@charset "utf-8";
/* CSS Document */

/*Animated*/
/*
http://www.w3schools.com/css/css3_animations.asp
https://codepen.io/hilja/pen/zKGHC
*/

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
	opacity: 1;  
  }
}

@keyframes fadeOutTo {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.7;
  }
}
@keyframes fadeInTo {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 1;
  }
}

@keyframes bounceIn {
  0% {
    transform: scale(0.01);
    opacity: 0;
  }
  100% {
	opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceOut {
  0% {
    transform: scale(1);
    opacity: 1;
	background: rgba(36, 84, 113, 0.5);
  }
  100% {
    transform: scale(0);
	opacity: 0;
	background: rgba(36, 84, 113, 0);
  }
}


@keyframes bounceIn1 {
  0% {
    transform: scale(0.01) rotate(30deg);
    opacity: 0;
  }
  100% {
	opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes bounceOut1 {
  0% {
    transform: scale(1) rotate(0deg); 
    opacity: 1;
	
  }
  100% {
    transform: scale(0) rotate(-15deg);
	opacity: 0;
	
  }
}

@keyframes bounceIn2{
  0% {
    /*transform: scale(1);*/
    opacity: 1;
  }
  100% {
	opacity: 0.6;
    /*transform: scale(0.8);*/
  }
}

@keyframes bounceOut2{
  0% {
    /*transform: scale(0.8);*/
    opacity: 0.6;
  }
  100% {
    /*transform: scale(1);*/
	opacity: 1;
  }
}



@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}


@keyframes fadeToblack {
  0% {
    -webkit-filter: grayscale(0%); filter: grayscale(0%);
  }
  100% {
    -webkit-filter: grayscale(70%); filter: grayscale(70%);
  }
}
@keyframes fadeToColor {
  0% {
    -webkit-filter: grayscale(70%); filter: grayscale(70%);
  }
  100% {
    -webkit-filter: grayscale(0%); filter: grayscale(0%);
  }
}

@keyframes blurIn {
  0% {
    filter: blur(0px); 
  }
  100% {
    filter: blur(2px);  
  }
}
@keyframes blurOut {
  0% {
    filter: blur(2px); 
  }
  100% {
    filter: blur(0px); 
  }
}

@keyframes scaleIn {
  0% {
   transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes scaleOut {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes scaleIn1 {
  0% {
   transform: scale(1);
  }
  100% {
    transform: scale(0.8);
  }
}
@keyframes scaleOut1 {
  0% {
    transform: scale(0.8);
  }
  100% {
    transform: scale(1);
  }
}




@keyframes sliderMoov1 {
	0%   { -webkit-transform: translateX(-400%); transform: translateX(-400%); }
	100% { -webkit-transform: translateX(0%); transform: translateX(0); }
}
@keyframes sliderMoov2 {
	0%   { -webkit-transform: translateX(0%); transform: translateX(0); }
	100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
}
@keyframes sliderMoov3 {
	0%   { -webkit-transform: translateX(-100%); transform: translateX(-100%); }
	100% { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
}
@keyframes sliderMoov4 {
	0%   { -webkit-transform: translateX(-200%); transform: translateX(-200%); }
	100% { -webkit-transform: translateX(-300%); transform: translateX(-300%); }
}
@keyframes sliderMoov5 {
	0%   { -webkit-transform: translateX(-300%); transform: translateX(-300%); }
	100% { -webkit-transform: translateX(-400%); transform: translateX(-400%); }
}


@keyframes sliderTextMoov1 {
	0%   { -webkit-transform: translateX(-50%); transform: translateX(-50%); opacity:0; }
	100% { -webkit-transform: translateX(0%); transform: translateX(0); opacity:1; }
}
@keyframes sliderTextMoov2 {
	0%   { -webkit-transform: translateX(50%); transform: translateX(50%); opacity:0; }
	100% { -webkit-transform: translateX(0%); transform: translateX(0); opacity:1; }
}