* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto !important;
width: auto !important;
vertical-align:middle;
padding: 0px!important;
margin: 0px!important;
}
.container h3 {
font-size: 16px;
font-weight: 400;
margin: 12px 0 10px 0!important;
color: #ACADB0;
}
.container h4 {
font-size: 16px;
font-weight: 400;
margin: 32px 0 10px 0!important;
color: #ACADB0;
}
.container p {
font-weight: 300;
font-size: 13px!important;
margin: 0px 0px 15px 0px;
line-height:1.3em!important;
}
.container .btn {
display: inline-block;
padding: 5px 10px;
font-size: 14px;
color: #000;
border: 1px solid #FFCA03;
background-color: #FFF!important;
text-decoration: none;
transition: 0.4s;
}
.container .btn:hover {
background-color: #FFCA03!important;
color: #000!important; 
transition: 0.4s;
}
.text-desc {
position: absolute; 
left: 0;
top: 0;
background-color: #fff;
height: 100%;
opacity: 0; 
width: 100%;
padding: 0px;
}
.port-1 {
float: left;
width: 100%;
position: relative;
overflow: hidden;
text-align: center; 
border: 1px solid rgba(255, 255, 255, 0.9);
}
.port-1 .text-desc {
opacity: 0.9; top: -100%;
transition: 0.5s;
color: #000; 
padding: 20px 10px 10px 10px;
}
.port-1.effect-1:hover .text-desc { 
top: 0;
border: 1px solid rgba(195,196,198, 0.9);
}
.port-1.effect-1:hover img {
transform: translateY(-100%)
}


/*Smaller desktop screens*/
@media only screen and (min-width: 600px) and (max-width: 1100px) {
.container h3 {
font-size: 14px;
margin: 4px 0 10px 0!important;
}
.container h4 {
font-size: 14px;
margin: 24px 0 10px 0!important;
}
.container p {
font-size: 11px!important;
margin: 0px 0px 15px 0px;
line-height:1.2em!important;
}
	
}

/*Tablet ONLY. Use this query to add rules for tablets.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
h3 {
font-size: 10px!important;
margin: 0px!important;
padding: 0px!important;
}
h4 {
font-size: 10px!important;
margin: 0px 0 10px 0!important;
}
.container .btn {
padding: 2px 6px;
font-size: 11px;
}
}

/*Portrait Tablet ONLY. Use this query to add rules for tablets in Prtrait orientation.
Landscape tablets should get a normal and unaltered display.*/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
h3 {
font-size: 9px!important;
margin: 0px 0 0px 0!important;
padding: 0px!important;
}
h4 {
font-size: 10px!important;
margin: 0px 0 20px 0!important;
}
.container .btn {
padding: 2px 6px;
font-size: 10px;
}
.container p {
font-size: 9px!important;
margin: 0px 0px 0px 0px;
line-height:1em!important;
}
}