/*Появление элементов*/
.hidd {
   visibility: none;
   opacity: 0;
   }

.gently {
   visibility: visible;
   opacity: 1;
   -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: gentl;
  animation-name: gentl;
  -webkit-animation-timing-function: easing;
    animation-timing-function: easing;
   }

@-webkit-keyframes gentl {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3%, 0);
    transform: translate3d(0, 3%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes gentl {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 3%, 0);
    transform: translate3d(0, 3%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}


.appear {
   -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: opacit;
  animation-name: opacit;
  -webkit-animation-timing-function: easing;
    animation-timing-function: easing;
   }

@-webkit-keyframes opacit {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes opacit {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}





.fromtop {
   visibility: visible;
   opacity: 1;
   -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: top;
  animation-name: top;
  -webkit-animation-timing-function: easing;
    animation-timing-function: easing;
   }

@-webkit-keyframes top {
  from {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}

@keyframes top {
  from {
    -webkit-transform: translate3d(0, -5%, 0);
    transform: translate3d(0, -5%, 0);
    opacity: 0;
  }

  to {
    -webkit-transform: none;
    transform: none;
    opacity: 1;
  }
}





.fromright {
   visibility: visible;
   opacity: 1;
   -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: right;
  animation-name: right;
  -webkit-animation-timing-function: easing;
    animation-timing-function: easing;
   }

@-webkit-keyframes right {
  from {
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes right {
  from {
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

.fromleft {
   visibility: visible;
   opacity: 1;
   -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: left;
  animation-name: left;
  -webkit-animation-timing-function: easing;
    animation-timing-function: easing;
   }

@-webkit-keyframes left {
  from {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes left {
  from {
    -webkit-transform: translate3d(-5%, 0, 0);
    transform: translate3d(-5%, 0, 0);
  }

  to {
    -webkit-transform: none;
    transform: none;
  }
}



/*Крылышки*/

.krill {
  visibility: visible;
  opacity: 1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: krill;
  animation-name: krill;
  animation-iteration-count: infinite; 
  -webkit-animation-iteration-count: infinite; 
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
   }
   
@-webkit-keyframes krill {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(10deg);
  }
}

@keyframes krill {
  from {
    transform: rotate(0);
  }

  to {
     transform: rotate(10deg);
  }
}
   
.krilr {
  visibility: visible;
  opacity: 1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: krilr;
  animation-name: krilr;
  animation-iteration-count: infinite; 
  -webkit-animation-iteration-count: infinite; 
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
   }
   
@-webkit-keyframes krilr {
  from {
    transform: rotate(10deg);
  }

  to {
    transform: rotate(0);
  }
}

@keyframes krilr {
  from {
    transform: rotate(10deg);
  }

  to {
     transform: rotate(0);
  }
}


/*парящий блок*/
.parblo {
  visibility: visible;
  opacity: 1;
  -webkit-animation-duration: 8s;
  animation-duration: 8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: parblo;
  animation-name: parblo;
  animation-iteration-count: infinite; 
  -webkit-animation-iteration-count: infinite; 
  animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
   }
   
@-webkit-keyframes parblo {
  from {
    transform: rotate(-1deg);
  }

  to {
    transform: rotate(1deg);
  }
}

@keyframes parblo {
  from {
    transform: rotate(-1deg);
  }

  to {
    transform: rotate(1deg);
  }
}

/*Знак вопроса*/
.quest:hover .voprtext {
  visibility: visible;
  opacity: 1;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: voprtext;
  animation-name: voprtext;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear;
  animation-delay: 0.2s;
  -webkit-animation-delay: 0.2s;
   }
   
@-webkit-keyframes voprtext {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes voprtext {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/*ОФИС - телефон*/
.office-phone img, .tourist-phone, .barman-phone {
   -webkit-transition: all 0.4s;
   -moz-transition: all 0.4s;
   -o-transition: all 0.4s;
   }
   
.office-phone:hover img, .tourist-phone:hover, .barman-phone:hover {
   animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
  -webkit-animation-duration: 0.2s;
  animation-duration: 0.2s;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
   }

@-webkit-keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
   
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}

/*ОФИС - баблы*/

.office-phone:hover .topbubble {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -webkit-animation-name: topbubble;
  animation-name: topbubble;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.ethernet:hover .topbubble1 {
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-name: topbubble;
  animation-name: topbubble;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes topbubble {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }

}

@keyframes topbubble {
  from {
    opacity: 0;
    visibility: hidden;
  }

  to {
    opacity: 1;
    visibility: visible;
  }

}

/*ОФИС - ethernet*/
.ethernet:hover img {
   -webkit-animation-name: ether;
  animation-name: ether;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
   }
   
@-webkit-keyframes ether {
  10%, 90% {
    background: url(../images/ethernet-glow.svg) no-repeat top left;
    background-size: 100% auto;
  }
  
  20%, 80% {
    background: transparent;
    background-size: 100% auto;
  }

  30%, 50%, 70% {
    background: url(../images/ethernet-glow.svg) no-repeat top left;
    background-size: 100% auto;
  }

  40%, 60% {
    background: transparent;
    background-size: 100% auto;
  }
}
   
@keyframes ether {
  10%, 90% {
    background: url(../images/ethernet-glow.svg) no-repeat top left;
    background-size: 100% auto;
  }
  
  20%, 80% {
    background: transparent;
    background-size: 100% auto;
  }

  30%, 50%, 70% {
    background: url(../images/ethernet-glow.svg) no-repeat top left;
    background-size: 100% auto;
  }

  40%, 60% {
    background: transparent;
    background-size: 100% auto;
  }
}

/*РЕСТОРАН - Девушка*/
.girlblock:hover .wi1b, .touristblock:hover .wi1b, .hipsterblock:hover .wi1b {
   -webkit-animation-name: wi1b;
  animation-name: wi1b;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
   }
   
.acti .wi1b {
   -webkit-animation-name: wi1b;
  animation-name: wi1b;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  -webkit-animation-delay: 0s;
   }
   
@-webkit-keyframes wi1b {
  from {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

@keyframes wi1b {
  from {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

.girlblock:hover .wi2b, .touristblock:hover .wi2b, .hipsterblock:hover .wi2b {
   -webkit-animation-name: wi2b;
  animation-name: wi2b;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1.3s;
  -webkit-animation-delay: 1.3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
   }
   
.acti .wi2b {
   -webkit-animation-name: wi2b;
  animation-name: wi2b;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.3s;
  -webkit-animation-delay: 0.3s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
   }
   
@-webkit-keyframes wi2b {
  from {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

@keyframes wi2b {
  from {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

.girlblock:hover .wi3b, .touristblock:hover .wi3b, .hipsterblock:hover .wi3b {
   -webkit-animation-name: wi3b;
  animation-name: wi3b;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1.5s;
  -webkit-animation-delay: 1.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
   }
   
.acti .wi3b {
   -webkit-animation-name: wi3b;
  animation-name: wi3b;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.5s;
  -webkit-animation-delay: 0.5s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
   }
   
@-webkit-keyframes wi3b {
  from {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

@keyframes wi3b {
  from {
    opacity: 0;
    visibility: hidden;
  }

  50% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

/*РЕСТОРАНЫ - баблы*/

.barman-phone:hover .topbubble {
  animation-delay: 0.6s;
  -webkit-animation-delay: 0.6s;
  -webkit-animation-name: topbubble;
  animation-name: topbubble;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/*РЕСТОРАНЫ - бармен*/
.barmen:hover .barmenhand {
  -webkit-animation-name: barmenhand;
  animation-name: barmenhand;
  -webkit-animation-duration: 0.8s;
  animation-duration: 0.8s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-transform-origin: 15% top;
    -moz-transform-origin: 15% top;
    -o-transform-origin: 15% top;
    -ms-transform-origin: 15% top;
    transform-origin: 15% top;
}

@-webkit-keyframes barmenhand {
  from {
        transform:rotate(0deg);
    }
    
    50% {
        transform:rotate(-7deg);
    }
    
    to {
        transform:rotate(0deg);
    }

}

@keyframes barmenhand {
  from {
        transform:rotate(0deg);
    }
    
    50% {
        transform:rotate(-7deg);
    }
    
    to {
        transform:rotate(0deg);
    }

}


/*РЕСТОРАНЫ - хипстер*/
.hipsterblock:hover .flash-phone {
  -webkit-animation-name: hipster;
  animation-name: hipster;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes hipster {
  from {
    opacity: 0;
    visibility: hidden;
  }

  25% {
    opacity: 1;
    visibility: visible;
  }
  
  50% {
    opacity: 0;
    visibility: hidden;
  }

  75% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

@keyframes hipster {
  from {
    opacity: 0;
    visibility: hidden;
  }

  25% {
    opacity: 1;
    visibility: visible;
  }
  
  50% {
    opacity: 0;
    visibility: hidden;
  }

  75% {
    opacity: 1;
    visibility: visible;
  }
  
  to {
    opacity: 0;
    visibility: hidden;
  }

}

/*Обратная связь*/
.rightphone {
  -webkit-animation-name: rightphone;
  animation-name: rightphone;
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 1s;
  -webkit-animation-delay: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.rightphone.active {
  -webkit-animation-name: rightphone1;
  animation-name: rightphone1;
}


@-webkit-keyframes rightphone {
0% {
    transform: rotate(0deg); } 
    
1% {
    transform: rotate(-0.5deg); }  

2% {
    transform: rotate(0.5deg); }  
    
3% {
    transform: rotate(-0.5deg); } 

4% {
    transform: rotate(0.5deg); } 
    
5% {
    transform: rotate(-0.5deg); }  

6% {
    transform: rotate(0.5deg); }  
    
7% {
    transform: rotate(-0.5deg); } 

8% {
    transform: rotate(0.5deg); } 
    
9% {
    transform: rotate(-0.5deg); } 
    
10% {
    transform: rotate(0deg); } 
}

@keyframes rightphone {
0% {
    transform: rotate(0deg); } 
    
1% {
    transform: rotate(-0.5deg); }  

2% {
    transform: rotate(0.5deg); }  
    
3% {
    transform: rotate(-0.5deg); } 

4% {
    transform: rotate(0.5deg); } 
    
5% {
    transform: rotate(-0.5deg); }  

6% {
    transform: rotate(0.5deg); }  
    
7% {
    transform: rotate(-0.5deg); } 

8% {
    transform: rotate(0.5deg); } 
    
9% {
    transform: rotate(-0.5deg); } 
    
10% {
    transform: rotate(0deg); }   
}


@media only screen and (max-width: 590px) {

@-webkit-keyframes parblo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes parblo {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(0deg);
  }
}
}


@media only screen and (max-width: 790px) {
/*парящий блок*/
.parblo {
  -webkit-animation-name: none;
  animation-name: none;
   }
   
.krill, .krilr {
   display: none;
   }
   
}