/*@import url('https://fonts.googleapis.com/css?family=Aref+Ruqaa');*/

 /*@font-face
 {
     font-family: Aref Ruqaa;
     src : url(C:/Users/CPA/Downloads/Aref_Ruqaa/ArefRuqaa-Regular.tff) format('truetype')
 }*/
 .imgtwo {
  position: absolute;
  /*z-index: -1;*/
  animation: anim 2s linear infinite;
  -webkit-animation: anim 2s infinite alternate ease-in-out;
  -webkit-animation-delay: 0.9s;
          animation-delay: 0.9s;
  -webkit-transform-origin: top;
          transform-origin: top;
  right: 0;
}

.imgtwo img {
    width: 160px;
    height: 180px;
}

.imgtwo:hover
{
    cursor:pointer
}

@-webkit-keyframes anim {
  from {
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
  }
}

@keyframes anim {
  from {
    transform: rotate(-3deg);
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
  }
  to {
    transform: rotate(3deg);
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -ms-transform: rotate(3deg);
    -o-transform: rotate(3deg);
  }
}



/*.overlay{
    z-index:-1;
    position:absolute;
    top:0;
    left:0;*/
    /*width:100%;*/
    /*height:100%;
    background-color:rgba(0,0,0,1);
}*/

.overlay2 {
    position: absolute;
    top: 0;
    left: 0;
    width:100%;
    height:100%;
    background-color: rgba(0,0,0,0.7);
    display:none;
}

.moon {
position: initial;
    /* height: 100vh; */
        /*margin-top: 222px;
    margin-right: 222px;*/
}

.moon:after, .moon:before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  top: calc(50% - 150px);
  border-radius: 50%;
}

.moon:after {
  background-color: #fff;
  right: 40%;
  top:0;
width: 6%;
    height: 9%;
}
.moon:before {
  background-color: #8DA1BA;
right: 41%;
    z-index: 2;
    top: 0;
    width: 6%;
    height: 9%;
  animation: moving 3s ease-in-out 1;
}

.congrate {
 text-align: center;
    z-index: 3;
    position: absolute;
    top: 42%;
    right: 29%;
    width: 43%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
    color: #86E2D5;
    animation: coloring 7s infinite;
    font-family: 'Aref Ruqaa', serif;
    font-weight: bold;
    font-size: x-large;
}

@keyframes moving {
  from { right: 40% }
  to   { right: 41% }
}
@keyframes coloring {
  0.000% { color: #86E2D5 }
  25.00% { color: #52B3D9 }
  50.00% { color: #F2784B }
  75.00% { color: #F7CA18 }
  100.0% { color: #86E2D5 }
}















#work {
  width: 150px;
  margin: 0 auto;
  position: absolute;
  top: 5px;
  -webkit-animation-name: routate;
  -webkit-animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-name: routate;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  /*left: 12px*/
}

@-webkit-keyframes routate {
  0% {
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  50% {
    -webkit-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
}

@keyframes routate {
  0% {
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
  50% {
    -webkit-transform: rotate(-1deg);
    -ms-transform: rotate(-1deg);
    transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(1deg);
    -ms-transform: rotate(1deg);
    transform: rotate(1deg);
  }
}

#work #wire {
    margin: 0 auto;
    height: 52px;
    width: 0px;
    background: #87bdd8;
    border: 5px #5b9aa0 solid;
}

#work #c1 {
position: absolute;
    z-index: 5;
    bottom: 32px;
    height: 152px;
    left: -18px;
}

#work .light {
      width: 100%;
    height: 65%;
    padding: 22px;
  margin: 0 auto;
  background: rgba(255, 155, 0, 0.2);
  -webkit-border-radius: 100%;
  -moz-border-radius: 100%;
  border-radius: 100%;
  -webkit-animation-name: flash;
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
  animation-name: flash;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@-webkit-keyframes flash {
  0% {
    background: rgba(255, 155, 0, 0.12);
  }
  50% {
    background: rgba(255, 155, 0, 0.08);
  }
  100% {
    background: rgba(255, 155, 0, 0.12);
  }
}

@keyframes flash {
  0% {
    background: rgba(255, 155, 0, 0.12);
  }
  50% {
    background: rgba(255, 155, 0, 0.02);
  }
  100% {
    background: rgba(255, 155, 0, 0.12);
  }
}

#fanos {
  /*height: 380px;*/
  padding: 10px;
  margin: 0 auto;
  position: relative;
  top: -20px;
}

#small-circle {
    margin: 0 auto;
    width: 11px;
    height: 7px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background: #87bdd8;
    border: 5px #5b9aa0 solid;
    position: relative;
    z-index: 5;
}

#half-circle {
    width: 21px;
    height: 11px;
    position: absolute;
    top: 25px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 1;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    background: #87bdd8;
    border: 5px #5b9aa0 solid;
}

#bottom-quppa {
  margin: 0 auto;
  position: relative;
  top: 18px;
  z-index: 3;
}

#line {
    margin: 0 auto;
    width: 57px;
    height: 11px;
    padding-top: 3px;
    background: #87bdd8;
    border: 5px #5b9aa0 solid;
    overflow: hidden;
    text-align: center;
}

    #line .ball {
        width: 6px;
        height: 3px;
        margin: auto 5px;
        display: inline-block;
        -webkit-border-radius: 100%;
        -moz-border-radius: 100%;
        border-radius: 100%;
        background: #87bdd8;
        border: 5px #5b9aa0 solid;
    }

#top-triangle {
    margin: 0 auto;
    width: 86px;
    height: 0;
    border-left: 25px transparent solid;
    border-right: 25px transparent solid;
    border-bottom: 30px #5b9aa0 solid;
    position: relative;
    top: -5px;
}

    #top-triangle:after {
        content: '';
        display: block;
        position: absolute;
        z-index: 3;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 5px;
        width: 74px;
        height: 0;
        border-left: 15px transparent solid;
        border-right: 15px transparent solid;
        border-bottom: 20px #87bdd8 solid;
    }

#box {
    width: 98px;
    margin: 0 auto;
    height: 82px;
    background: rgba(255, 255, 255, 0.1);
    position: relative;
    top: -10px;
    z-index: 1;
    border: 5px #5b9aa0 solid;
}

    #box #candel {
        height: 48px;
        width: -1px;
        background: #ffffff;
        border: 5px #5b9aa0 solid;
        border-bottom: 0;
        position: absolute;
        z-index: 1;
        left: 35px;
        bottom: 0;
    }

        #box #candel:after {
            content: '';
            display: block;
            margin: 0 auto;
            position: relative;
            top: -20px;
            width: 10px;
            height: 15px;
            -webkit-border-radius: 100%;
            -moz-border-radius: 100%;
            border-radius: 100%;
            background: #ff9b00;
            border: 5px #5b9aa0 solid;
        }

    #box #col {
        margin: 0 auto;
        width: 57px;
        height: 96px;
        border-left: 5px #5b9aa0 solid;
        border-right: 5px #5b9aa0 solid;
        position: relative;
        z-index: 2;
        background: rgba(255, 255, 255, 0.1);
    }

#final {
  position: relative;
  z-index: 4;
  top: -15px;
}

#last-triangle {
    margin: 0 auto;
    width: 81px;
    height: 0;
    border-left: 25px transparent solid;
    border-right: 25px transparent solid;
    border-bottom: 25px #5b9aa0 solid;
    position: relative;
    top: -5px;
}

    #last-triangle:after {
        content: '';
        display: block;
        position: absolute;
        z-index: 3;
        left: 52%;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        top: 5px;
        width: 74px;
        height: 0;
        border-left: 15px transparent solid;
        border-right: 15px transparent solid;
        border-bottom: 15px #87bdd8 solid;
    }
/*
@viewport {
    zoom: 1.0;
    width: device-width;
}
*/


@media screen and (max-width: 1100px) {
    #work{
        visibility:hidden
    }
}