.fade{
    animation: fadeIn 1s linear 0s 1;
}
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeup{
    animation: fadeInUp 1s linear 0s 1;
}

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

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

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

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


.surroundings-box .title:before{

    animation: butterfly 6s ease 0s infinite alternate;
}

@keyframes butterfly
{
    0%{
   
    transform: translateX(0) translateY(0)  skewX(0);
     -webkit-transform: translateX(0) translateY(0)  skewX(0);
  }

    33% {
    transform:translateX(-30px) translateY(15px)  skewX(10deg);
    -webkit-transform: translateX(-30px)translateY(15px) skewX(10deg);

  }

    66% {
    transform:translateX(-10px) translateY(0) skewX(-5deg);
    -webkit-transform: translateX(-10px)translateY(0) skewX(-5deg);

  }
    100%{
    transform: translateX(0)translateY(0) skewX(0);
    -webkit-transform: translateX(0)translateY(0) skewX(0);
    
  }

}

@-webkit-keyframes butterfly
{ 
    0%{
   
    transform: translateX(0) translateY(0)  skewX(0);
     -webkit-transform: translateX(0) translateY(0)  skewX(0);
  }

    33% {
    transform:translateX(-30px) translateY(15px)  skewX(10deg);
    -webkit-transform: translateX(-30px)translateY(15px) skewX(10deg);

  }

    66% {
    transform:translateX(-10px) translateY(0) skewX(-5deg);
    -webkit-transform: translateX(-10px)translateY(0) skewX(-5deg);

  }
    100%{
    transform: translateX(0)translateY(0) skewX(0);
    -webkit-transform: translateX(0)translateY(0) skewX(0);
    
  }
}


.header-logo span:nth-child(2){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(3){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -1.4s;
    animation-delay: -1.4s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(4){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -1.3s;
    animation-delay: -1.3s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(5){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(6){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(7){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(8){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(9){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(10){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -0.7s;
    animation-delay: -0.7s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(11){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -0.6s;
    animation-delay: -0.6s;
    transition: all .4s ease;
    display: inline-block;
}
.header-logo span:nth-child(12){
    animation: color2 2s infinite ease-in-out;
    -webkit-animation-delay: -0.5s;
    animation-delay: -0.5s;
    transition: all .4s ease;
    display: inline-block;
}

@-webkit-keyframes color2 {
  0%, 40%, 100% { color: #000 }  
  20% {      color: #EEE }
}

@keyframes color2 {
  0%, 40%, 100% { color: #000 }  
  20% {      color:#EEE }
}