.fade-in-one {
    animation: fadeInOne ease 2s;
    -webkit-animation: fadeInOne ease 2s;
    -moz-animation: fadeInOne ease 2s;
    -o-animation: fadeInOne ease 2s;
    -ms-animation: fadeInOne ease 2s;
  }
  
  
  @keyframes fadeInOne{
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-moz-keyframes fadeInOne {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-webkit-keyframes fadeInOne {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-o-keyframes fadeInOne {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }
  
  @-ms-keyframes fadeInOne {
    0% {
      opacity:0;
    }
    100% {
      opacity:1;
    }
  }

  .slideDown{
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*Animations*/

[data-animate-in] {
    opacity: 0;
    transition: transform 0.8s ease, opacity 0.8s ease
    }
    
    [data-animate-in="up"] {
    transform: translate3d(0, 24px, 0)
    }
    
    [data-animate-in="left"] {
    transform: translate3d(-25%, 0, 0)
    }
    
    [data-animate-in="right"] {
    transform: translate3d(25%, 0, 0)
    }
    
    [data-animate-in="down"] {
    transform: translate3d(0, -24px, 0)
    }
    
    [data-animate-in="fadeIn"] {
    transform: translate3d(0, 0, 0)
    }
    
    [data-animate-in].in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transition: transform 0.6s ease, opacity 0.6s ease
    }
    
    .fade-in {
    opacity: 0;
    transition: opacity 1s ease
    }
    
    .page-loaded .fade-in,.page-loaded.fade-in {
    opacity: 1
    }
    
    .isSafari.isTouch [data-animate-in],.isSafari.isTouch [data-animate-in="up"] {
    opacity: 1;
    transition: none;
    transform: none
    }
    
    
    /* Transitions and transforms */
    .wow {
    opacity: 0;
    -webkit-transform: translate(0,50px);
    -moz-transform: translate(0,50px);
    -ms-transform: translate(0,50px);
    transform: translate(0,50px);
    -webkit-transition: opacity .6s .1s,transform .6s ease;
    transition: opacity .6s .1s,transform .6s ease;
    transition-delay: 0ms;
    }
    
    .wow-in-view {
    opacity: 1!important;
    -webkit-transform: translate(0,0)!important;
    -moz-transform: translate(0,0)!important;
    -ms-transform: translate(0,0)!important;
    transform: translate(0,0)!important;
    }
    
    
    .animatable {
      
      /* initially hide animatable objects */
      visibility: hidden;
      
      /* initially pause animatable objects their animations */
      -webkit-animation-play-state: paused;   
      -moz-animation-play-state: paused;     
      -ms-animation-play-state: paused;
      -o-animation-play-state: paused;   
      animation-play-state: paused; 
    }
    
    /* show objects being animated */
    .animated {
      visibility: visible;
      
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -ms-animation-fill-mode: both;
      -o-animation-fill-mode: both;
      animation-fill-mode: both;
      
      -webkit-animation-duration: 1s;
      -moz-animation-duration: 1s;
      -ms-animation-duration: 1s;
      -o-animation-duration: 1s;
      animation-duration: 1s;
    
      -webkit-animation-play-state: running;
      -moz-animation-play-state: running;
      -ms-animation-play-state: running;
      -o-animation-play-state: running;
      animation-play-state: running;
    }
    /* CSS Animations */
@-webkit-keyframes fadeInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }	100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInDown {
    0% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}



@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-o-keyframes fadeIn {
    0% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    20% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@-webkit-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-2000px);
    }
    60% {
        -webkit-transform: translateX(20px);
    }

    80% {
        -webkit-transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -moz-transform: translateX(-2000px);
    }

    60% {
        -moz-transform: translateX(20px);
    }

    80% {
        -moz-transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInLeft {
    0% {
        opacity: 0;
        -o-transform: translateX(-2000px);
    }

    60% {
        opacity: 1;
        -o-transform: translateX(20px);
    }

    80% {
        -o-transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes bounceInLeft {
    0% {
        opacity: 0;
        transform: translateX(-2000px);
    }

    60% {
        transform: translateX(20px);
    }

    80% {
        transform: translateX(-5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes bounceInRight {
    0% {
        opacity: 0;
        -webkit-transform: translateX(2000px);
    }

    60% {
        -webkit-transform: translateX(-20px);
    }

    80% {
        -webkit-transform: translateX(5px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@-moz-keyframes bounceInRight {
    0% {
        opacity: 0;
        -moz-transform: translateX(2000px);
    }

    60% {
        -moz-transform: translateX(-20px);
    }

    80% {
        -moz-transform: translateX(5px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateX(0);
    }
}

@-o-keyframes bounceInRight {
    0% {
        opacity: 0;
        -o-transform: translateX(2000px);
    }

    60% {
        -o-transform: translateX(-20px);
    }

    80% {
        -o-transform: translateX(5px);
    }

    100% {
        opacity: 1;
        -o-transform: translateX(0);
    }
}

@keyframes bounceInRight {
    0% {
        opacity: 0;
        transform: translateX(2000px);
    }

    60% {
        transform: translateX(-20px);
    }

    80% {
        transform: translateX(5px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
@-webkit-keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(20px);
    }	100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes fadeInUp {
    0% {
        opacity: 0;
        -moz-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes fadeInUp {
    0% {
        opacity: 0;
        -o-transform: translateY(20px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
@-webkit-keyframes bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.3);
    }
    50% {
        -webkit-transform: scale(1.05);
    }

    70% {
        -webkit-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes bounceIn {
    0% {
        opacity: 0;
        -moz-transform: scale(.3);
    }

    50% {
        -moz-transform: scale(1.05);
    }

    70% {
        -moz-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -moz-transform: scale(1);
    }
}

@-o-keyframes bounceIn {
    0% {
        opacity: 0;
        -o-transform: scale(.3);
    }

    50% {
        -o-transform: scale(1.05);
    }

    70% {
        -o-transform: scale(.9);
    }

    100% {
        opacity: 1;
        -o-transform: scale(1);
    }
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(.3);
    }

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(.9);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}
@-webkit-keyframes moveUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(40px);
    }	100% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }
}

@-moz-keyframes moveUp {
    0% {
        opacity: 1;
        -moz-transform: translateY(40px);
    }

    100% {
        opacity: 1;
        -moz-transform: translateY(0);
    }
}

@-o-keyframes moveUp {
    0% {
        opacity: 1;
        -o-transform: translateY(40px);
    }

    100% {
        opacity: 1;
        -o-transform: translateY(0);
    }
}

@keyframes moveUp {
    0% {
        opacity: 1;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@-webkit-keyframes fadeBgColor {
    0%{
        background:none;
    }
  70%{
        background:none;
    }
    100%{
        background:#464646;
    }
}
@-o-keyframes fadeBgColor {
    0%{
        background:none;
    }
  70%{
        background:none;
    }
    100%{
        background:#464646;
    }
}
@keyframes fadeBgColor {
    0%{
        background:none;
    }
  70%{
        background:none;
    }
    100%{
        background:#464646;
    }
}

.animated.animationDelay{
    animation-delay:.4s;
    -webkit-animation-delay:.4s;
}
.animated.animationDelayMed{
    animation-delay:1.2s;
    -webkit-animation-delay:1.2s;
}
.animated.animationDelayLong{
    animation-delay:1.6s;
    -webkit-animation-delay:1.6s;
}
.animated.fadeBgColor {
    -webkit-animation-name: fadeBgColor;
    -moz-animation-name: fadeBgColor;
    -o-animation-name: fadeBgColor;
    animation-name: fadeBgColor;
}
.animated.bounceIn {
    -webkit-animation-name: bounceIn;
    -moz-animation-name: bounceIn;
    -o-animation-name: bounceIn;
    animation-name: bounceIn;
}
.animated.bounceInRight {
    -webkit-animation-name: bounceInRight;
    -moz-animation-name: bounceInRight;
    -o-animation-name: bounceInRight;
    animation-name: bounceInRight;
}
.animated.bounceInLeft {
    -webkit-animation-name: bounceInLeft;
    -moz-animation-name: bounceInLeft;
    -o-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}
.animated.fadeIn {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
}
.animated.fadeInDown {
    -webkit-animation-name: fadeInDown;
    -moz-animation-name: fadeInDown;
    -o-animation-name: fadeInDown;
    animation-name: fadeInDown;
}
.animated.fadeInUp {
    -webkit-animation-name: fadeInUp;
    -moz-animation-name: fadeInUp;
    -o-animation-name: fadeInUp;
    animation-name: fadeInUp;
}
.animated.moveUp {
    -webkit-animation-name: moveUp;
    -moz-animation-name: moveUp;
    -o-animation-name: moveUp;
    animation-name: moveUp;
}
/*------------------------------------------------------------
  text-shadow effects
  ------------------------------------------------------------*/
  .effect1, .effect2, .effect3, .effect4, .effect5, .effect6, .effect8{color:rgba(0,0,0, 0) !important;transition: all .3s ease;}
  
  
  .effect1{text-shadow: 0 0 0 #fff, 0 45px 0 #fff;}
  .effect2{text-shadow:0 0 0  #fff, 0 -45px 0 #fff ;}
  .effect3{text-shadow:0 0 0  #fff, 200px 0 0 #fff ;}
  .effect4{text-shadow:0 0 0  #fff, -200px 0 0 #fff ;} 
  .effect5{text-shadow:0 0 0  #fff;  transition: all .5s ease;}
  .effect6{text-shadow:0 0 0  #fff, 0 -45px 0 #fff ;}
  .effect7{text-shadow:0 0 0  #fff; transition: all .3s ease;}
  .effect8{ text-shadow: 0 0 0 #fff ; transition: all .3s ease; }
  
  
  
  
  
  .effect1:hover{ text-shadow: 0 -45px 0 #fff, 0 0 0 #fff ; }
  .effect2:hover{ text-shadow: 0 45px 0 #fff, 0 0 0 #fff ;}
  .effect3:hover{ text-shadow: -200px 0 0 #fff, 0 0 0 #fff ;}
  .effect4:hover{ text-shadow: 200px 0 0 #fff, 0 0 0 #fff ;}
  .effect5:hover{text-shadow:0 0 0  #fff, -200px 0 0 rgba(255, 255, 255, .3), 200px 0 0 rgba(255, 255, 255, .3), 0 45px 0 rgba(255, 255, 255, .3) , 0 -45px 0 rgba(255, 255, 255, .3) ;}
  
  .btn.effect7:hover{ text-shadow:-2px 8px 3px  rgba(0, 0, 0, .5);  }
  
  
  
  
  /* hover effect6--------------------------------------------------------------*/
  @-webkit-keyframes drop {
    0%{text-shadow:0 0 0  #fff, 0 -45px 0 #000 ;}
     20% {text-shadow:0 0 0  #fff, 0 -15px 0 #000 ;}
     30%{text-shadow:0 15px 0  #fff, 0 0px 0 #000 ;}
    40%{text-shadow:0 45px 0  #fff, 0 0px 0 #000 ;}
     41%{text-shadow:0 45px 0  #fff, 0 0px 0 #000 , 0 -45px 0 #fff ;}
    70%{text-shadow:0 45px 0  #fff, 0 15px 0 #000 , 0 0px 0 #fff ;}
    80%{text-shadow:0 45px 0  #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
  100%{text-shadow:0 45px 0  #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
  }/*safari and chrome*/
  
  
  @keyframes drop {
    0%{text-shadow:0 0 0  #fff, 0 -45px 0 #000 ;}
     20% {text-shadow:0 0 0  #fff, 0 -15px 0 #000 ;}
     30%{text-shadow:0 15px 0  #fff, 0 0px 0 #000 ;}
    40%{text-shadow:0 45px 0  #fff, 0 0px 0 #000 ;}
     41%{text-shadow:0 45px 0  #fff, 0 0px 0 #000 , 0 -45px 0 #fff ;}
    70%{text-shadow:0 45px 0  #fff, 0 15px 0 #000 , 0 0px 0 #fff ;}
    80%{text-shadow:0 45px 0  #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
  100%{text-shadow:0 45px 0  #fff, 0 45px 0 #000 , 0 0px 0 #fff ;}
  }
  
  
  
  .btn.effect6:hover{
    -webkit-animation: drop .6s 1 linear; 
   animation: drop .6s 1 linear;}
  /* end hover-----------------------------------------------------------*/
  
  
  
  /* hover effect8--------------------------------------------------------------*/
  @-webkit-keyframes run {
    0%{text-shadow: 0px  0 0 #fff;}
  
  30%{letter-spacing:60px;}
    50%{text-shadow: 400px 0 0 rgba(0, 0, 0, 0);}
  51%{text-shadow: -400px 0 0 rgba(0, 0, 0, 0); letter-spacing:30px; }
  85% { letter-spacing:1px;}
  90% { text-shadow: 10px  0 0 #000;}
  }/*safari and chrome*/
  
  
  @keyframes run {
  30%{letter-spacing:60px;}
    50%{text-shadow: 400px 0 0 rgba(0, 0, 0, 0);}
  51%{text-shadow: -400px 0 0 rgba(0, 0, 0, 0); letter-spacing:30px; }
  85% { letter-spacing:1px;}
  90% { text-shadow: 10px  0 0 #000;}
  } 
  
  
  .effect8:hover{-webkit-animation: run 1s 1 linear;
    animation: run 1s 1 linear;
    text-shadow: 0px  0 0 #000;}
  /* end hover-----------------------------------------------------------*/
  
  
  .effect9:hover{  
    -webkit-animation: pulse .5s infinite  linear; 
   animation: pulse .5s infinite  linear; }
  
  
  
  @-webkit-keyframes pulse {
    0%{text-shadow: 0 0 0  rgba( 0, 0, 0, 1); }
     100%{text-shadow: 0 0  200px black ;}
   }/*safari and chrome*/
  
  @keyframes pulse {
    0%{text-shadow: 0 0 0  rgba( 0, 0, 0, 1); }
     100%{text-shadow: 0 0  200px black ;}
   }/*safari and chrome*/
  
  
  /*------------------------------------------------------------
  background & box-shadow effects
  ------------------------------------------------------------*/
  .b-effect1{ transition: all .7s ease; 
  background: linear-gradient(90deg, #08a 3px, #09c 1px);
  background-size:204px 1px;
  background-position: 50% 50%;
  }
  .b-effect2{ transition: all .7s ease; 
  background: linear-gradient(90deg, #08a 5px, #09c 1px);
  background-size:204px 1px;
  background-position: 100% 0%;
  }
  
  
  .b-effect1:hover{ background-size:3px 1px; }
  .b-effect2:hover{ background-size:5px 1px; }
  
  
  
  
  .b-effect3:before{ transition: all .4s ease-out;
    float:left;
    margin-left: -10px;
    margin-top: -10px;
    width:10px;
    height:10px;
    display: block;
    background: #fff;
    content: "";
    box-shadow: 
     30px 30px 0px -10px rgba(100, 255, 255, .2);
    }
  
  
  .b-effect3:hover.b-effect3:before{
    box-shadow: 
      30px 30px 0px 20px rgba(0, 0, 0, .2),
      80px 10px 0px 20px rgba(0, 0, 0, .2),
      20px 80px 0px 20px rgba(0, 0, 0, .2),
      100px 60px 0px 20px rgba(0, 0, 0, .2),
      65px 45px 0px 5px rgba(0, 0, 0, .2),
      60px 70px 0px 10px rgba(0, 0, 0, .2),
      130px 10px 0px 20px rgba(0, 0, 0, .2),
      140px 50px 0px 10px rgba(0, 0, 0, .2),
      145px 85px 0px 15px rgba(0, 0, 0, .2),
      185px 75px 0px 15px rgba(0, 0, 0, .2),
      165px 15px 0px 5px rgba(0, 0, 0, .2),
      170px 40px 0px 10px rgba(0, 0, 0, .2),
      160px 60px 0px  rgba(0, 0, 0, .2),
      195px 45px 0px 5px  rgba(0, 0, 0, .2),
      190px 10px 0px 10px  rgba(0, 0, 0, .2),
      190px 30px 0px   rgba(0, 0, 0, .2),
      200px 30px 0px   rgba(0, 0, 0, .2)
    ;
  }
    
  
  .b-effect4:after {
      width: 100%;
      height: 40%;
      left: 0;
      top: -40%;
      background: #49a7df;
      -webkit-transform-origin: 0% 100%;
      -webkit-transform: rotateX(90deg);
      -moz-transform-origin: 0% 100%;
      -moz-transform: rotateX(90deg);
      transform-origin: 0% 100%;
      transform: rotateX(90deg);
  }
  
  .btn-8 {
      display: block;
      background: #5cbcf6;
      -webkit-transform-style: preserve-3d;
      -moz-transform-style: preserve-3d;
      transform-style: preserve-3d;
  }

/*Animations*/

[data-animate-in] {
opacity: 0;
transition: transform 0.8s ease, opacity 0.8s ease
}

[data-animate-in="up"] {
transform: translate3d(0, 24px, 0)
}

[data-animate-in="left"] {
transform: translate3d(-25%, 0, 0)
}

[data-animate-in="right"] {
transform: translate3d(25%, 0, 0)
}

[data-animate-in="down"] {
transform: translate3d(0, -24px, 0)
}

[data-animate-in="fadeIn"] {
transform: translate3d(0, 0, 0)
}

[data-animate-in].in-view {
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transition: transform 0.6s ease, opacity 0.6s ease
}