@keyframes topicAnimateIn {
  0% 	{   transform:scaleY(0) translateZ(0) rotateX(0deg);transform-origin:0 0;}
  100% 	{   transform:scaleY(1) translateZ(1) rotateX(-90deg);transform-origin:0 0;}}
@keyframes topicAnimateOut {
  0% 	{   transform:scaleY(1) translateZ(1) rotateX(-90deg);transform-origin:0 0;}
  100% 	{   transform:scaleY(0) translateZ(0) rotateX(0deg);transform-origin:0 0;}}


@keyframes backgroundAnimateIn {
  0% 	{   background-position: 0 -100%;}
  100% 	{   background-position: 0 0%;}}

@keyframes backgroundAnimateOut {
  0% {    background-position: 0 0%;  background-image: linear-gradient(to top, transparent 0%, transparent 50%, white 50%, white 100%);}
  100% {    background-position: 0 -100%;  background-image: linear-gradient(to top, transparent 0%, transparent 100%, white 50%, white 100%);}}
#load {
  position:absolute;
  width: 50vw;
  height: 15.5vw;
  left:50%;
  top:50%;
  transform: translate(-50%, +5vw);
  overflow:visible;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  cursor:default;
}

#load div {
  position:absolute;
  width:2vw;
  height:2vw;
  opacity:0;
  font-family:Montserrat, Helvetica, Arial, sans-serif;
  font-size:2vw;
  animation:move 2s linear infinite;
  -webkit-animation:move 2s linear infinite;
  transform:rotate(180deg);
  -webkit-transform:rotate(180deg);
  color:#FFFFFF;
}

#load div:nth-child(2) {
  animation-delay:0.2s;
  -o-animation-delay:0.2s;
  -moz-animation-delay:0.2s;
  -webkit-animation-delay:0.2s;
}
#load div:nth-child(3) {
  animation-delay:0.4s;
  -o-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
  -webkit-animation-delay:0.4s;
}
#load div:nth-child(4) {
  animation-delay:0.6s;
  -o-animation-delay:0.6s;
  -moz-animation-delay:0.6s;
  -webkit-animation-delay:0.6s;
}
#load div:nth-child(5) {
  animation-delay:0.8s;
  -o-animation-delay:0.8s;
  -moz-animation-delay:0.8s;
  -webkit-animation-delay:0.8s;
}
#load div:nth-child(6) {
  animation-delay:1s;
  -o-animation-delay:1s;
  -moz-animation-delay:1s;
  -webkit-animation-delay:1s;
}
#load div:nth-child(7) {
  animation-delay:1.2s;
  -o-animation-delay:1.2s;
  -moz-animation-delay:1.2s;
  -webkit-animation-delay:1.2s;
}

@keyframes move {
  0% {
    left:0;
    opacity:0;
  }
  35% {
    left: 41%; 
    -moz-transform:rotate(0deg);
    -webkit-transform:rotate(0deg);
    -o-transform:rotate(0deg);
    transform:rotate(0deg);
    opacity:1;
  }
  65% {
    left:59%; 
    -moz-transform:rotate(0deg); 
    -webkit-transform:rotate(0deg); 
    -o-transform:rotate(0deg);
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%; 
    -moz-transform:rotate(-180deg); 
    -webkit-transform:rotate(-180deg); 
    -o-transform:rotate(-180deg); 
    transform:rotate(-180deg);
    opacity:0;
  }
}

@-webkit-keyframes move {
  0% {
    left:0; 
    opacity:0;
  }
  35% {
    left:41%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  65% {
    left:59%; 
    -webkit-transform:rotate(0deg); 
    transform:rotate(0deg); 
    opacity:1;
  }
  100% {
    left:100%;
    -webkit-transform:rotate(-180deg); 
    transform:rotate(-180deg); 
    opacity:0;
  }
}

@keyframes flip {
  					0% {
						-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
						-webkit-animation-timing-function: ease-out;
  						transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
						animation-timing-function: ease-out;}
  					40% {
  						-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
						-webkit-animation-timing-function: ease-out;
  						transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  						animation-timing-function: ease-out;}
  					50% {
						-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
						-webkit-animation-timing-function: ease-in;
  						transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  						animation-timing-function: ease-in;}
					80% {
						-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
						-webkit-animation-timing-function: ease-in;
  						transform: perspective(400px) scale3d(.95, .95, .95);
 						animation-timing-function: ease-in;}
					100% {
						-webkit-transform: perspective(400px);
						-webkit-animation-timing-function: ease-in;
						transform: perspective(400px);
  						animation-timing-function: ease-in;}}
@-webkit-keyframes flip {
  					0% {
						-webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
						-webkit-animation-timing-function: ease-out;
  						transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
						animation-timing-function: ease-out;}
					40% {
						-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
						-webkit-animation-timing-function: ease-out;
  						transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
  						animation-timing-function: ease-out;}

					50% {
						-webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
						-webkit-animation-timing-function: ease-in;
  						transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
  						animation-timing-function: ease-in;}
					80% {
						-webkit-transform: perspective(400px) scale3d(.95, .95, .95);
						-webkit-animation-timing-function: ease-in;
  						transform: perspective(400px) scale3d(.95, .95, .95);
 						animation-timing-function: ease-in;}

					100% {
						-webkit-transform: perspective(400px);
						-webkit-animation-timing-function: ease-in;
						transform: perspective(400px);
  						animation-timing-function: ease-in;}}
 
img.xbutton {
 transition: transform 0.3s;
 -moz-transition: transform 0.3s;
 -webkit-transition: transform 0.3s;
 -o-transition: transform 0.3s;
 -ms-transition: transform 0.3s;
}
img.xbutton:hover {
 cursor: pointer;
 cursor: -moz-pointer;
 cursor: -webkit-pointer;
 transform: scale(1.2, 1.2);
 -moz-transform: scale(1.2, 1.2);
 -webkit-transform: scale(1.2, 1.2);
 -o-transform: scale(1.2, 1.2);
 -ms-transform: scale(1.2, 1.2);
 -webkit-animation:spin 1s linear infinite;
 -moz-animation:spin 1s linear infinite;
  animation:spin 1s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.zoomOutUp {
  -webkit-animation-name: zoomOutUp;
  animation-name: zoomOutUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomOutUp {
  40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  100% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  }
  @keyframes zoomOutUp {
  40% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  100% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
  -webkit-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  } 
 .zoomInDown {
  -webkit-animation-name: zoomInDown;
  animation-name: zoomInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes zoomInDown {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  }
  @keyframes zoomInDown {
  0% {
  opacity: 0;
  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
  }
  60% {
  opacity: 1;
  -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
  -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
  }
  } 
.bounceInRight 
	{  
		-webkit-animation-name: bounceInRight;  
		animation-name: bounceInRight;  
		-webkit-animation-duration: 1s;  
		animation-duration: 1s;  
		-webkit-animation-fill-mode: both;  
		animation-fill-mode: both;
	}
 	@-webkit-keyframes bounceInRight 
 	 	{  0%, 60%, 75%, 90%, 100% 
 	 		{  
 	 			-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
 	 			transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
 	 		}
 	 			0% 
 	 				{
 	 					opacity: 0;
 	 					-webkit-transform: translate3d(3000px, 0, 0);
 	 					transform: translate3d(3000px, 0, 0);
 	 				}
 	 			60% 
 	 				{	
 	 					opacity: 1;
 	 					-webkit-transform: translate3d(-25px, 0, 0);
 	 					transform: translate3d(-25px, 0, 0);
 	 				}
  				75% 
  					{
  						-webkit-transform: translate3d(10px, 0, 0);
  						transform: translate3d(10px, 0, 0);
  					}
  				90%
  					{	
  						-webkit-transform: translate3d(-5px, 0, 0);
  						transform: translate3d(-5px, 0, 0);
  					}
  				100% 
  					{	
  						-webkit-transform: none;
  						transform: none;
  					}
	 	}

	@keyframes bounceInRight 
		{  0%, 60%, 75%, 90%, 100% 
			{  
				-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
				transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);  
			}
  				0% 
  					{
  						opacity: 0;
  						-webkit-transform: translate3d(3000px, 0, 0);
  						transform: translate3d(3000px, 0, 0);
  					}
  				60% 
  					{
  						opacity: 1;
  						-webkit-transform: translate3d(-25px, 0, 0);
  						transform: translate3d(-25px, 0, 0);
  					}
  				75%
  					{
  						-webkit-transform: translate3d(10px, 0, 0);
  						transform: translate3d(10px, 0, 0);
  					}
  				90% 
  					{
  						-webkit-transform: translate3d(-5px, 0, 0);
  						transform: translate3d(-5px, 0, 0);
  					}
  				100% 
  					{
  						-webkit-transform: none;
  						transform: none;
  					}
 		}

.bounceOutLeft {
  -webkit-animation-name: bounceOutLeft;
  animation-name: bounceOutLeft;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes bounceOutLeft {
  20% {
  opacity: 1;
  -webkit-transform: translate3d(20px, 0, 0);
  transform: translate3d(20px, 0, 0);
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  }
  @keyframes bounceOutLeft {
  20% {
  opacity: 1;
  -webkit-transform: translate3d(20px, 0, 0);
  transform: translate3d(20px, 0, 0);
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(-2000px, 0, 0);
  transform: translate3d(-2000px, 0, 0);
  }
  } 

.zoomInDown 
	{  
		-webkit-animation-name: zoomInDown;  
		animation-name: zoomInDown;  
		-webkit-animation-duration: 1s;  
		animation-duration: 1s;  
		-webkit-animation-fill-mode: both;  
		animation-fill-mode: both;  
	}			

	@-webkit-keyframes zoomInDown 
		{  
			0% 
				{	
					opacity: 0;  -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
					transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
					-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
					animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
				}
			60% 
				{
					opacity: 1;
					-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
					transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
					-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
					animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
				}
		}
		
	@keyframes zoomInDown 
		{  
			0% 
				{
					opacity: 0;
					-webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
					transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
					-webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
					animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
				}
			60% 
				{	
					opacity: 1;
					-webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
					transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
					-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
					animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
				}
		}
			
.fadeIn 
	{  
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
  	@-webkit-keyframes fadeIn 
  		{  
  			0% {opacity: 0;}  
  			100% {opacity: 1;}
  		}
  		
  	@keyframes fadeIn 
  		{  
  			0% {opacity: 0;}
  			100% {opacity: 1;}
  		}
.fadeOut 
	{  
		-webkit-animation-name: fadeOut;
		animation-name: fadeOut;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
  	@-webkit-keyframes fadeOut 
  		{  
  			0% {opacity: 1;}  
  			100% {opacity: 0;}
  		}
  		
  	@keyframes fadeOut 
  		{  
  			0% {opacity: 1;}
  			100% {opacity: 0;}
  		}
.fadeInTo60
	{  
		-webkit-animation-name: fadeIn;
		animation-name: fadeIn;
		-webkit-animation-duration: 2s;
		animation-duration: 2s;
		-webkit-animation-fill-mode: both;
		animation-fill-mode: both;
	}
	
  	@-webkit-keyframes fadeInTo60
  		{  
  			0% {opacity: 0;}  
  			100% {opacity: 0.6;}
  		}
  		
  	@keyframes fadeInTo60
  		{  
  			0% {opacity: 0;}
  			100% {opacity: 0.6;}
  		}


.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes fadeOutUp {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  }
  @keyframes fadeOutUp {
  0% {
  opacity: 1;
  }
  100% {
  opacity: 0;
  -webkit-transform: translate3d(0, -100%, 0);
  transform: translate3d(0, -100%, 0);
  }
  } 
  
.zoomOut
	{
	-webkit-animation-name: zoomOut;
	animation-name: zoomOut;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
 	}

	@-webkit-keyframes zoomOut
  	{
  		0%
	  		{
	  		opacity: 1;
	  		}
		50%	
			{	
	  		opacity: 0;
	  		-webkit-transform: scale3d(10, 10, 10);
	  		transform: scale3d(10, 10, 10);
	  		}
		100%
			{
	  		opacity: 0;
  			heigth: 0px;
  			width: 0px;
			}
  	}

.zoomOutlogo
	{
	-webkit-animation-name: zoomOutlogo;
	animation-name: zoomOutlogo;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
 	}

	@-webkit-keyframes zoomOutlogo
  	{
  		0%
	  		{
	  		opacity: 1;
	  		}
		50%	
			{
	  		opacity: 1;
	  		-webkit-transform: scale3d(10, 10, 10);
	  		}
		100%
			{
  			opacity: 0;
  			heigth: 0px;
  			width: 0px;
			}
  	}

	@keyframes zoomOutlogo
	{
		0%
			{
			opacity: 1;
  			}
  		50%
  			{
  			opacity: 1;
  			transform: scale3d(10, 10, 10);
  			}
  		100%
  			{
  			opacity: 0;
  			heigth: 0px;
  			width: 0px;
  			}
	}

 @-webkit-keyframes zoomOut2 {
		0% {
			opacity: 1;
			}
  
		50% {
			opacity: 0;
			-webkit-transform: scale3d(.3, .3, .3);
			transform: scale3d(.3, .3, .3);
			}
		100% {
		opacity: 0;
  			}}
@keyframes zoomOut2 {
		0% {
			opacity: 1;
			}
		50% {
			opacity: 0;
			-webkit-transform: scale3d(.3, .3, .3);
			transform: scale3d(.3, .3, .3);
			}
		100% {
			opacity: 0;
			}}
 
 .rubberBand {
  -webkit-animation-name: rubberBand;
  animation-name: rubberBand;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
  @keyframes rubberBand {
  0% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  30% {
  -webkit-transform: scale3d(1.25, 0.75, 1);
  transform: scale3d(1.25, 0.75, 1);
  }
  40% {
  -webkit-transform: scale3d(0.75, 1.25, 1);
  transform: scale3d(0.75, 1.25, 1);
  }
  50% {
  -webkit-transform: scale3d(1.15, 0.85, 1);
  transform: scale3d(1.15, 0.85, 1);
  }
  65% {
  -webkit-transform: scale3d(.95, 1.05, 1);
  transform: scale3d(.95, 1.05, 1);
  }
  75% {
  -webkit-transform: scale3d(1.05, .95, 1);
  transform: scale3d(1.05, .95, 1);
  }
  100% {
  -webkit-transform: scale3d(1, 1, 1);
  transform: scale3d(1, 1, 1);
  }
  }
.flipInX {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  animation-name: flipInX;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes flipInX {
  0% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  opacity: 0;
  }
  40% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  }
  60% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  }
  }
  @keyframes flipInX {
  0% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  opacity: 0;
  }
  40% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  -webkit-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  }
  60% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  opacity: 1;
  }
  80% {
  -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  100% {
  -webkit-transform: perspective(400px);
  transform: perspective(400px);
  }
  }