/* Pi Auto Wow Slider Start */
.piSlide{
	display: none;
}
.pi_auto_slideshow_container{
	position: relative;
    width: 100%;
    height: 70vh;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.piSlide img {
	width: 100%;
	height: 70vh;
	vertical-align: middle;
	-o-animation-name: fade;
	-o-animation-delay: 6.5s;
    -o-animation-duration: 1s;
	-moz-animation-name: fade;
	-moz-animation-delay: 6.5s;
    -moz-animation-duration: 1s;
	-ms-animation-name: fade;
	-ms-animation-delay: 6.5s;
    -ms-animation-duration: 1s;
	-webkit-animation-name: fade;
	-webkit-animation-delay: 6.5s;
    -webkit-animation-duration: 1s;
    animation-name: fade;
	animation-delay: 6.5s;
    animation-duration: 1s;
}
@-o-keyframes fade{
	from {opacity: 1;} 
    to {opacity: 0;}
}
@-moz-keyframes fade{
	from {opacity: 1;} 
    to {opacity: 0;}
}
@-ms-keyframes fade{
	from {opacity: 1;} 
    to {opacity: 0;}
}
@-webkit-keyframes fade{
    from {opacity: 1;} 
    to {opacity: 0;}
}
@keyframes fade{
    from {opacity: 1;} 
    to {opacity: 0;}
}
.text1{
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	width: 50%;
    top: 18%;
	left: 25%;
	border-radius: 3rem;
	border: 0.1rem solid grey;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
	z-index: 999999;
	-o-animation-name: move1;
	-o-animation-delay: 6.5s;
    -o-animation-duration: 1s;
	-moz-animation-name: move1;
	-moz-animation-delay: 6.5s;
    -moz-animation-duration: 1s;
	-ms-animation-name: move1;
	-ms-animation-delay: 6.5s;
    -ms-animation-duration: 1s;
	-webkit-animation-name: move1;
	-webkit-animation-delay: 6.5s;
    -webkit-animation-duration: 1s;
    animation-name: move1;
	animation-delay: 6.5s;
    animation-duration: 1s;
}
@-o-keyframes move1{
	from {opacity: 1;} 
    to {opacity: 0; left: -100%;}
}
@-moz-keyframes move1{
	from {opacity: 1;} 
    to {opacity: 0; left: -100%;}
}
@-ms-keyframes move1{
	from {opacity: 1;} 
    to {opacity: 0; left: -100%;}
}
@-webkit-keyframes move1{
    from {opacity: 1;} 
    to {opacity: 0; left: -100%;}
}
@keyframes move1{
    from {opacity: 1;} 
    to {opacity: 0; left: -100%;}
}
.text1 h4{
	width: 100%;
	margin: 0;
	color: black;
    font-size: 3rem;
    padding: 8px 12px;
	text-align: center;
}
.text1 p{
	width: 100%;
	margin: 0;
	color: black;
    font-size: 2rem;
    padding: 8px 12px;
	text-align: center;
}
.text2{
	background-color: rgba(255, 255, 255, 0.8);
	position: absolute;
	width: 30%;
	left: 35%;
	bottom: 30%;
	border-radius: 3rem;
	border: 0.2rem solid red;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
	overflow: hidden;
	-o-animation-name: move1;
	-o-animation-delay: 6.5s;
    -o-animation-duration: 1s;
	-moz-animation-name: move1;
	-moz-animation-delay: 6.5s;
    -moz-animation-duration: 1s;
	-ms-animation-name: move1;
	-ms-animation-delay: 6.5s;
    -ms-animation-duration: 1s;
	-webkit-animation-name: move1;
	-webkit-animation-delay: 6.5s;
    -webkit-animation-duration: 1s;
    animation-name: move1;
	animation-delay: 6.5s;
    animation-duration: 1s;
}
.text2 a{
	display: block;
	position: relative;
	padding-top: 1.5rem;
	padding-bottom: 1.5rem;
	color: black;
	font-family: 'Audiowide';
	font-size: 1.5rem;
	font-weight: 900;
	text-decoration: none;
	letter-spacing: 1px;
	text-align: center;
}
.text2 a:before{
	content:'';
	position: absolute;
	top: 0px;
	left: 50%;
	width: 0;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	transition: all 2s ease;
	z-index: -9;
}
.text2 a:hover:before{
	width: 50%;
	background: rgba(255, 255, 255, 1);
	z-index: -9999;
}
.text2 a:after {
	content:'';
	position: absolute;
	top: 0px;
	right: 50%;
	width: 0;
	height: 100%;
	background: rgba(255, 255, 255, 1);
	transition: all 2s ease;
	z-index: -9;
}
.text2 a:hover:after{
	width: 50%;
	background: rgba(255, 255, 255, 1);
	z-index: -9999;
}
.text2 a:hover{
	-o-transition: all 1s 0.1s linear;
	-moz-transition: all 1s 0.1s linear;
    -ms-transition: all 1s 0.1s linear;
    -webkit-transition: all 1s 0.1s linear;
    transition: all 1s 0.1s linear;
	-o-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);    
}
.timer_bar_left{
	position: relative;
	left: 0;
	bottom: 5px;
	height: 5px;
	-o-animation-name: timerbarleft;
	-o-animation-delay: 2s;
    -o-animation-duration: 5.2s;
	-o-animation-iteration-count: infinite;
	-moz-animation-name: timerbarleft;
	-moz-animation-delay: 2s;
    -moz-animation-duration: 5.2s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: timerbarleft;
	-ms-animation-delay: 2s;
    -ms-animation-duration: 5.2s;
	-ms-animation-iteration-count: infinite;
	-webkit-animation-name: timerbarleft;
	-webkit-animation-delay: 2s;
    -webkit-animation-duration: 5.2s;
	-webkit-animation-iteration-count: infinite;
    animation-name: timerbarleft;
	animation-delay: 2s;
    animation-duration: 5.2s;
	animation-iteration-count: infinite;
}
@-o-keyframes timerbarleft{
	from {background-color: red; width: 0;} 
    to {background-color: red; width: 47.5%;}
}
@-moz-keyframes timerbarleft{
	from {background-color: red; width: 0;} 
    to {background-color: red; width: 47.5%;}
}
@-ms-keyframes timerbarleft{
	from {background-color: red; width: 0;} 
    to {background-color: red; width: 47.5%;}
}
@-webkit-keyframes timerbarleft{
    from {background-color: red; width: 0;} 
    to {background-color: red; width: 47.5%;}
}
@keyframes timerbarleft{
    from {background-color: red; width: 0;} 
    to {background-color: red; width: 47.5%;}
}
.timer_bar_right{
	position: relative;
	bottom: 10px;
	height: 5px;
	-o-animation-name: timerbarright;
	-o-animation-delay: 2s;
    -o-animation-duration: 5.2s;
	-o-animation-iteration-count: infinite;
	-moz-animation-name: timerbarright;
	-moz-animation-delay: 2s;
    -moz-animation-duration: 5.2s;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-name: timerbarright;
	-webkit-animation-delay: 2s;
    -webkit-animation-duration: 5.2s;
	-webkit-animation-iteration-count: infinite;
    animation-name: timerbarright;
	animation-delay: 2s;
    animation-duration: 5.2s;
	animation-iteration-count: infinite;
}
@-o-keyframes timerbarright{
	from {left: 100%; background-color: red; width: 0;} 
    to {left: 52.5%; background-color: red; width: 47.5%;}
}
@-moz-keyframes timerbarright{
	from {left: 100%; background-color: red; width: 0;} 
    to {left: 52.5%; background-color: red; width: 47.5%;}
}
@-ms-keyframes timerbarright{
	from {left: 100%; background-color: red; width: 0;} 
    to {left: 52.5%; background-color: red; width: 47.5%;}
}
@-webkit-keyframes timerbarright{
    from {left: 100%; background-color: red; width: 0;} 
    to {left: 52.5%; background-color: red; width: 47.5%;}
}
@keyframes timerbarright{
    from {left: 100%; background-color: red; width: 0;} 
    to {left: 52.5%; background-color: red; width: 47.5%;}
}
.counter_box{
	position: relative;
	width: 100%;
	height: 8rem;
	top: -6rem;
	text-align: center;
}
.counter{
	position: absolute;
	padding: 0;
	top: 0;
	left: 50%;
	opacity: 0;
}
.counter i{
	color: black;
	font-size: 0;
	text-shadow: none;
	transition: 1s linear;
}
.current{
	position: relative;
	width: 5vw;
    height: 10rem;
	left: 0;
	padding: 0;
	text-align: center;
	opacity: 1;
}
.current i{
	background-color: white;
	margin: 0;
	padding: 0;
	padding: 1rem 4rem;
	line-height: 10rem;
	font-size: 7rem;
	text-shadow: 0 0 3px red;
	border-radius: 50%;
	border: 0.2rem solid grey;
	-o-animation-name: timerbarbutton;
	-o-animation-delay: 5.5s;
    -o-animation-duration: 1.5s;
	-o-animation-iteration-count: infinite;
	-moz-animation-name: timerbarbutton;
	-moz-animation-delay: 5.5s;
    -moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	-ms-animation-name: timerbarbutton;
	-ms-animation-delay: 5.5s;
    -ms-animation-duration: 1.5s;
	-ms-animation-iteration-count: infinite;
	-webkit-animation-name: timerbarbutton;
	-webkit-animation-delay: 5.5s;
    -webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
    animation-name: timerbarbutton;
	animation-delay: 5.5s;
    animation-duration: 1.5s;
	animation-iteration-count: infinite;
}
@-o-keyframes timerbarbutton{
	from {border: 0.2rem solid grey;} 
    to {border: 0.2rem solid red;}
}
@-moz-keyframes timerbarbutton{
	from {border: 0.2rem solid grey;} 
    to {border: 0.2rem solid red;}
}
@-ms-keyframes timerbarbutton{
	from {border: 0.2rem solid grey;} 
    to {border: 0.2rem solid red;}
}
@-webkit-keyframes timerbarbutton{
    from {border: 0.2rem solid grey;} 
    to {border: 0.2rem solid red;}
}
@keyframes timerbarbutton{
    from {border: 0.2rem solid grey;} 
    to {border: 0.2rem solid red;}
}
/* Animation */
.animation{
	-o-animation-name: fademain1;
    -o-animation-duration: 2s;
    -o-transition-timing-function: ease;
	-moz-animation-name: fademain1;
    -moz-animation-duration: 2s;
    -moz-transition-timing-function: ease;
	-ms-animation-name: fademain1;
    -ms-animation-duration: 2s;
    -ms-transition-timing-function: ease;
    -webkit-animation-name: fademain1;
    -webkit-animation-duration: 2s;
    -webkit-transition-timing-function: ease; 
    animation-name: fademain1;
    animation-duration: 2s;
    transition-timing-function: ease;
}
@-o-keyframes fademain1{
    from {margin-top: 50%;} 
    to {margin-top: 0;}
}
@-moz-keyframes fademain1{
    from {margin-top: 50%;} 
    to {margin-top: 0;}
}
@-ms-keyframes fademain1{
    from {margin-top: 50%;} 
    to {margin-top: 0;}
}
@-webkit-keyframes fademain1{
    from {margin-top: 50%;} 
    to {margin-top: 0;}
}
@keyframes fademain1{
    from {opacity: 0; margin-top: 50%;} 
    to {opacity: 1; margin-top: 0;}
}
.animation1{
	-o-animation-name: fademain2;
    -o-animation-duration: 2s;
    -o-transition-timing-function: ease;
	-moz-animation-name: fademain2;
    -moz-animation-duration: 2s;
    -moz-transition-timing-function: ease;
	-ms-animation-name: fademain2;
    -ms-animation-duration: 2s;
    -ms-transition-timing-function: ease;
    -webkit-animation-name: fademain2;
    -webkit-animation-duration: 2s;
    -webkit-transition-timing-function: ease; 
    animation-name: fademain2;
    animation-duration: 2s;
    transition-timing-function: ease;
}
@-o-keyframes fademain2{
    from {opacity: 0; margin-left: 100%;} 
    to {opacity: 1; margin-left: 0;}
}
@-moz-keyframes fademain2{
    from {opacity: 0; margin-left: 100%;} 
    to {opacity: 1; margin-left: 0;}
}
@-ms-keyframes fademain2{
    from {opacity: 0; margin-left: 100%;} 
    to {opacity: 1; margin-left: 0;}
}
@-webkit-keyframes fademain2{
    from {opacity: 0; margin-left: 100%;} 
    to {opacity: 1; margin-left: 0;}
}
@keyframes fademain2{
    from {opacity: 0; margin-left: 100%;} 
    to {opacity: 1; margin-left: 0;}
}
.animation2{
	-o-animation-name: fademain3;
    -o-animation-duration: 2s;
    -o-transition-timing-function: ease;
	-moz-animation-name: fademain3;
    -moz-animation-duration: 2s;
    -moz-transition-timing-function: ease;
	-ms-animation-name: fademain3;
    -ms-animation-duration: 2s;
    -ms-transition-timing-function: ease;
    -webkit-animation-name: fademain3;
    -webkit-animation-duration: 2s;
    -webkit-transition-timing-function: ease; 
    animation-name: fademain3;
    animation-duration: 2s;
    transition-timing-function: ease;
}
@-o-keyframes fademain3{
    from {opacity: 0; -ms-transform: rotate(90deg); -ms-transform-origin: 0 0;} 
    to {opacity: 1; -ms-transform: rotate(0); -ms-transform-origin: 0 0;}
}
@-moz-keyframes fademain3{
    from {opacity: 0; -ms-transform: rotate(90deg); -ms-transform-origin: 0 0;} 
    to {opacity: 1; -ms-transform: rotate(0); -ms-transform-origin: 0 0;}
}
@-ms-keyframes fademain3{
    from {opacity: 0; -ms-transform: rotate(90deg); -ms-transform-origin: 0 0;} 
    to {opacity: 1; -ms-transform: rotate(0); -ms-transform-origin: 0 0;}
}
@-webkit-keyframes fademain3{
    from {opacity: 0; -webkit-transform: rotate(90deg); -webkit-transform-origin: 0 0;} 
    to {opacity: 1; -webkit-transform: rotate(0); -webkit-transform-origin: 0 0;}
}

@keyframes fademain3{
    from {opacity: 0; transform: rotate(90deg); transform-origin: 0 0;} 
    to {opacity: 1; transform: rotate(0); transform-origin: 0 0;}
}
@media only screen and (max-width: 1080px){
	.pi_auto_slideshow_container{
	    height: 65vh;
    }
    .piSlide img {
		height: 65vh;
	}
	.text1{
		width: 70%;
		left: 15%;
	}
}
@media only screen and (max-width: 767px){
	.pi_auto_slideshow_container{
	    height: 50vh;
    }
    .piSlide img {
		height: 50vh;
	}
	.text1{
		width: 90%;
		left: 5%;
		top: 3%;
	}
	.text1 h4{
		font-size: 1.7rem;
	}
	.text1 p{
		font-size: 1.3rem;
	}
	.text2{
		width: 60%;
		left: 20%;
	}
	.counter_box{
		height: 5rem;
	    top: -3.5rem;
	}
	.current i{
		padding: 1rem 2rem;
		line-height: 5rem;
		font-size: 3.5rem;
	}
}
@media only screen and (max-width: 400px){
	.text2{
		bottom: 19%;
	}
	
	  
  
  
  
  
}