/*= Reset CSS 
============= */

.container{margin: 0 auto; max-width: 100%;min-height:800px; }

*{margin: 0; padding: 0; box-sizing: border-box;}
img{max-width: 100%; vertical-align: middle;}
.full-length{width: 100%; float: left; padding-bottom: 80px; }
ul8{margin: 0 -1.5%;  width: 100%;}
li8{float: left; width: 31.33%; margin: 10px 1%; list-style: none;}




h3{color: #fff; float: left; height: 65%; width: 46%; padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 258px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 46%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -294px; background: rgba(177,113,277,0.5);}





p{color: #000; float: left; width: 100%; font-size: 14px;  position: relative; z-index: 50; left: 0; }

.btn{display: inline-block; padding: 5px 10px; font-size: 14px; color: #fff; border: 2px solid #4d92d9;  text-decoration: none; transition: 0.4s;}
.btn:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.text-desc{position: absolute; left: 0; top: 0;  height: 100%; opacity: 0; width: 100%; padding: 20px;}
/*= Reset CSS End
================= *

/* effect-1 css */

.text-desc2 {border: 0px; position: relative; height: 140px; width: 100%; top: 210px; left: 390px; }

.text-desc3 {border: 0px; position: relative; height: 140px; width: 100%; top: 140px; left: 390px; }
	
.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 240px;top:160px;}
.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 120px;}
.port-1 .text-desc{opacity: 0.9; top: -100%; transition: 0.5s; color: #000; padding: 45px 20px 20px;}
.port-1 img{transition: 0.5s;}
.port-1:hover img{transform: scale(1.2);}

.port-1.effect-1:hover .text-desc{top: 0;}


.port-1.effect-2:hover .text-desc{bottom: 0;}

.port-1.effect-3 .text-desc{top: 50%; left: 50%; width: 0; height: 0; overflow: hidden; padding: 0;}
.port-1.effect-3:hover .text-desc{width: 100%; top: 0; left: 0; height: 100%; padding: 45px 20px 20px;}
/* effect-1 css end */

/* effect-2 css */
.port-2{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 800px;}
.port-2 .text-desc{z-index: -1; transition: 0.6s;}
.port-2 .image-box{transition: 0.4s;}
.port-2:hover .image-box{transform: rotateX(80deg); transform-origin: center bottom 0; transition: 0.4s;}

.port-2.effect-1:hover .text-desc{opacity: 1;}

.port-2.effect-2 .text-desc{opacity: 1; top: -100%;}
.port-2.effect-2:hover .text-desc{top: 0;}

.port-2.effect-3 .text-desc{opacity: 1; top: auto; bottom: -100%;}
.port-2.effect-3:hover .text-desc{bottom: 0;}
/* effect-2 css end */



/*= Media Screen CSS
==================== */




@media (max-width: 1700px){

h3{color: #fff; float: left; height: 65%; width: 46%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 253px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 46%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -299px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); top:160px; left: 230px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 115px;}

}



@media (max-width: 1650px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 203px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -395px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); top:160px; left: 210px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 105px;}

}



@media (max-width: 1600px){
    
h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 193px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); top:160px; left: 210px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 105px;}
}



@media (max-width: 1550px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 183px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 195px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 95px;}


}






@media (max-width: 1500px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 163px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 195px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 95px;}

}


@media (max-width: 1450px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 130px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 165px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 85px;}


}





@media (max-width: 1400px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 110px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 165px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 85px;}

}


@media (max-width: 1350px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 106px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 165px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}



@media (max-width: 1300px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 88px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 155px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}




@media (max-width: 1250px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 58px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 155px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}




@media (max-width: 1200px){


h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 52px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 155px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}


}



@media (max-width: 1150px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 32px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 150px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}




@media (max-width: 1100px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: 12px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 145px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}



@media (max-width: 1050px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: -10px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 135px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}


@media (max-width: 1000px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: -22px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}


.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 125px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 65px;}

}


@media (max-width: 988px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: -15px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 140px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 70px;}

}




@media (max-width: 968px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: -15px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 140px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 70px;}

}





@media (max-width: 868px){

h3{color: #fff; float: left; height: 65%; width: 50%; font-size: 20px;padding: 5px 0px 0px 10px; position: relative; z-index: 50; top: 140px;left: -15px; background: rgba(177,113,277,0.5);}

h4{color: #fff; float: left; height: 40%; width: 50%; font-size: 14px; padding: 0px 0px 0px 10px; position: relative; z-index: 50;line-height:22px;top: 161px;left: -390px; background: rgba(177,113,277,0.5);}

.port-1{float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); left: 140px;top:160px;}


.port-1.effect-3 {float: left; width: 70%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:300px;left: 70px;}

}


@media only screen and (max-width: 768px){
	ul8{width: 100%; margin: 0 auto;}
	
	.port-1{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9);top:0px; left: 0px;}
	.port-1.effect-3 {float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 2px solid rgba(255, 255, 255, 0.9); top:0px;left: 0px;}
	.text-desc2 {border: 0px; position: relative; height: 140px; width: 90%; top: 200px; left: 20px;}
	.container{background-image:url(../../../web/images/img-2.jpg); background-repeat:no-repeat; background-size:contain;}
	li8{width: 100%; margin: 10px 0;}
	.port-5.effect-1 {z-index: 19;}
	p{color: #C30; float: left; width: 100%; font-size: 14px;   }


h3{color: #fff; float: left;height: 65%; width: 100%; font-size: 20px;line-height:22px; position: relative; z-index: 50;text-align: left; top:10px;left: 0px;}

h4{color: #fff; float: left;height: 40%; width: 100%; font-size: 14px;line-height:22px; padding: 0px 0px 0px 10px; position: relative; z-index: 50; top:0px;left: 0px; }
}




@media only screen and (max-width: 360px){
	ul8{width: 100%; }
	.port-1 .text-desc, 
	.port-1.effect-3:hover .text-desc, 

	.port-3.effect-1 .text-desc, 
	.port-3.effect-3 .text-desc,
	.port-4.effect-1 .text-desc,
	.port-4.effect-2 .text-desc,
	.port-4.effect-3 .text-desc, .port-8 .text-desc{padding: 20px;}
	.text-desc{padding: 7px;}
	.port-5.effect-1 .text-desc{padding: 13px 20px 20px 90px;}
	.port-5.effect-2 .text-desc{padding: 10px;}
	.port-5.effect-3 .text-desc{padding: 16px 90px 20px 20px;}
	.port-6.effect-1 .text-desc .btn, 
	.port-6.effect-2 .text-desc .btn,
	.port-6.effect-3 .text-desc .btn,
	.port-7.effect-1 .text-desc .btn,
	.port-7.effect-2 .text-desc .btn,
	.port-7.effect-3 .text-desc .btn,
	.port-8.effect-3 .text-desc .btn{display: none;}
	.port-6.effect-2 .text-desc{padding: 20px 120px 20px 20px;}
	.port-6.effect-3 .text-desc{padding: 75px 20px 10px;}
	.port-7.effect-1 .text-desc{padding: 12px 10px;}
	.port-8.effect-3 .text-desc{padding: 28px 70px 20px;}
}
/*= Media Screen CSS End
======================== */