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

/*Animation*/


.zt-spin{animation:zt-spin 2s infinite linear
}@keyframes zt-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}

.zt-animate-fading{animation:fading 10s infinite}
@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}

.zt-animate-opacity{animation:opac 0.8s}
@keyframes opac{from{opacity:0} to{opacity:1}}

.zt-animate-top{position:relative;animation:animatetop 0.4s}
@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}

.zt-animate-left{position:relative;animation:animateleft 0.4s}
@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}

.zt-animate-right{position:relative;animation:animateright 0.4s}
@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}

.zt-animate-bottom{position:relative;animation:animatebottom 0.4s}
@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}

.zt-animate-zoom {animation:animatezoom 0.6s}
@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}

.zt-animate-input{transition:width 0.4s ease-in-out}
.zt-animate-input:focus{width:100%!important}


.zt-socialmedia-anim{
	box-shadow: 10px 10px 12.5px -5px black;
	transition: 0.15s ease;
}

.zt-socialmedia-anim:hover{
	transform:scale(1.1);
	box-shadow: 7px 7px 15px -5px black;
	animation: sm-popup 0.5s;
	transition-timing-function: ease;
	
}

@keyframes sm-popup{
	0% {transform:scale(1); box-shadow: 10px 10px 12.5px -5px black;}
	50% {transform:scale(1.3); box-shadow: 3px 3px 20px -5px black;}
	100% {transform: scale(1.1); box-shadow: 7px 7px 15px -5px black;}
}

.podroll {
  
  /* 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; 
}
.animatedd {
  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: 2s;
  -moz-animation-duration: 2s;
  -ms-animation-duration: 2s;
  -o-animation-duration: 2s;
  animation-duration: 2s;

  -webkit-animation-play-state: running;
  -moz-animation-play-state: running;
  -ms-animation-play-state: running;
  -o-animation-play-state: running;
  animation-play-state: running;
}
@-webkit-keyframes rollInLeft {
	0% {
		opacity: 0;
		-webkit-transform: translateX(-2000px) rotateZ(-270deg);
	}
	60% {
		-webkit-transform: translateX(20px);
	}

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

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

@-moz-keyframes rollInLeft {
	0% {
		opacity: 0;
		-moz-transform: translateX(-2000px) rotateZ(-270deg);
	}

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

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

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

@-o-keyframes rollInLeft {
	0% {
		opacity: 0;
		-o-transform: translateX(-2000px) rotateZ(-270deg);
	}

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

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

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

@keyframes rollInLeft {
	0% {
		opacity: 0;
		transform: translateX(-2000px) rotateZ(-270deg);
	}

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

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

	100% {
		opacity: 1;
		transform: translateX(0) rotateZ(0deg);
	}
}

.animatedd.rollInLeft {
	-webkit-animation-name: rollInLeft;
	-moz-animation-name: rollInLeft;
	-o-animation-name: rollInLeft;
	animation-name: rollInLeft;
}


.shake:hover{
	animation: shake 0.7s;
	animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform:  rotate(0deg); }
  10% { transform: rotate(-1.5deg); }
  20% { transform:rotate(1.5deg); }
  30% { transform: rotate(0deg); }
  40% { transform: rotate(1.5deg); }
  50% { transform:  rotate(-1.5deg); }
  60% { transform: rotate(0deg); }
  70% { transform: rotate(-1.5deg); }
  80% { transform:  rotate(1.5deg); }
  90% { transform: rotate(0deg); }
  100% { transform:  rotate(-1.5deg); }
}