.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; /*original 70vh*/
	object-fit: scale-down;/*remove for full widh image*/
	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.5);
	position: absolute;
	width: 50%;
    top: 18%;
	left: 25%;
	/*border-radius: 3rem;*/
	border: 0.1rem solid #1d344f;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,1);
	z-index: 1;
	-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:#1d344f;/*#780434;*/
    font-size: 3.5rem;
    font-family: 'Oooh Baby', cursive;
    padding: 8px 12px;
	text-align: center;
}
/*color:#780434;font-family: 'Barlow';font-family: 'Oooh Baby', cursive;*/
.text1 p{
	width: 100%;
	margin: 0;
	color: #1d344f;
    font-size: 2.5rem;
    font-family: 'Oooh Baby', cursive;
    padding: 8px 12px;
	text-align: center;
}
.text2{
	background-color: rgba(255, 255, 255, 0.6);
	position: absolute;
	width: 30%;
	left: 35%;
	bottom: 30%;
	/*border-radius: 3rem;*/
	border: 0.2rem solid #1d344f;
	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: 'Oooh Baby';
	font-size: 2rem;
	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);    
}



/* 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%;
	}
	
	
}
@media only screen and (max-width: 400px){
	.text2{
		bottom: 19%;
	}
	
	  
  
  
  
  
}