.container{margin: 0 auto; max-width:100%;;}


*{margin: 0; padding: 0; box-sizing: border-box;}

img{max-width: 100%; vertical-align: middle;}

.container ul{margin: 0 -1.5%;}
.container li{float: left; width: 23%; margin: 10px 1%; list-style: none;border:1px solid #eaeaea}
.container:after{clear:both; content:'';display:block}
.container>ul:after{clear:both; content:'';display:block}
.btn1{margin-top:15px;;display: inline-block; padding: 5px 10px;
font-size: 14px; color: #fff; border: 2px solid #4d92d9; background-color: #4d92d9; text-decoration: none; transition: 0.4s;}
.btn1:hover{background-color: transparent; color: #4d92d9; transition: 0.4s;}
.text-desc{position: relative;
border:1px solid #cfcfcf;
left: 0; top: 0; background-color: #fff; height: 100%; opacity: 1; width: 100%; padding: 20px;}
.port-3{float: left; width: 100%; position: relative; overflow: hidden; text-align: center; border: 4px solid rgba(255, 255, 255, 0.9); perspective: 500px;}
.port-3 img{transition: 0.5s;}




.text-desc h4{padding:3px;font-weight:400}
.text-desc h3{padding:3px;font-weight:800; font-size:16px;}
.text-desc h2{padding:3px;font-weight:800}
.text-desc h5{padding:3px;}




@media all and (min-width:1px) and (max-width:640px) {

.container li{float: left;padding:3px; width: 50%; margin: 3px auto; list-style: none;}
.port-3.effect-3 .text-desc p{display:none}




}