@charset "utf-8";
/* CSS Document */

html {-webkit-text-size-adjust: none; /* Prevent font scaling in landscape */}
body{font-family:Arial, Helvetica, sans-serif;}
h1, h2, h3, h4, h5, h6, ul, ol, li, form, input, textarea, select {margin: 0; padding: 0;}
img {border: 0;}
a {text-decoration: none; outline: none !important; outline-color: transparent !important;}
a:link, a:hover {text-decoration: none; -moz-transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;}

.mtp0 {margin-top:0px;}
.mtp5 {margin-top:5px;}
.mtp10 {margin-top:10px;}
.mtp15 {margin-top:15px;}
.mtp20 {margin-top:20px;}
.mtp25 {margin-top:25px;}
.mtp30 {margin-top:30px;}
.mtp35 {margin-top:35px;}
.mtp40 {margin-top:40px;}
.mtp45 {margin-top:45px;}

.mbp0 {margin-bottom:0px;}
.mbp5 {margin-bottom:5px;}
.mbp10 {margin-bottom:10px;}
.mbp15 {margin-bottom:15px;}
.mbp20 {margin-bottom:20px;}
.mbp25 {margin-bottom:25px;}
.mbp30 {margin-bottom:30px;}
.mbp35 {margin-bottom:35px;}
.mbp40 {margin-bottom:40px;}
.mbp45 {margin-bottom:45px;}

.ptp0 {padding-top:0px;}
.ptp5 {padding-top:5px;}
.ptp10 {padding-top:10px;}
.ptp15 {padding-top:15px;}
.ptp20 {padding-top:20px;}
.ptp25 {padding-top:25px;}
.ptp30 {padding-top:30px;}
.ptp35 {padding-top:35px;}
.ptp40 {padding-top:40px;}
.ptp45 {padding-top:45px;}

.pbp0 {padding-bottom:0px;}
.pbp5 {padding-bottom:5px;}
.pbp10 {padding-bottom:10px;}
.pbp15 {padding-bottom:15px;}
.pbp20 {padding-bottom:20px;}
.pbp25 {padding-bottom:25px;}
.pbp30 {padding-bottom:30px;}
.pbp35 {padding-bottom:35px;}
.pbp40 {padding-bottom:40px;}
.pbp45 {padding-bottom:45px;}


/*==================================
Commen CSS
================================= */
.container{max-width: 1220px;}

/*==================================
Header CSS
================================= */
header{ background: #002d62; color: #fff; }
.topnavright{ text-align: right;}
.topnavright a{ margin-top: 17px; color: #fff; font-size: 13px; padding: 9px 0px; display: inline-block; }
.logo img{ width: 183px; }
/*==================================
Banner CSS
================================= */
.banner{ display: block; clear: both;  }
.bannerimg{ background: url(../../images/banner-img.jpg) center top no-repeat; background-size: cover; min-height: 170px;}
.bluerowtext{background: #002d62; padding: 20px 0px; }
.textborderbox{ max-width: 714px;  font: 14px/25px Arial, Helvetica, sans-serif ; color: #fff;  padding: 6px 0; border-top: solid 1px #5a7899; border-bottom: solid 1px #5a7899; }

/*==================================
Content CSS
================================= */
.tbspace{ display: block; clear: both; padding: 27px 0px;}
.protfoliolist{ list-style: none; margin: 0px; padding: 0px;}
.protfoliolist li{ display: inline-block; min-height:inherit; cursor: pointer; padding: 5px 0px; width:100%; position: relative; }
.protfoliolist li .probgimg img{ width: 100%; height: auto; }

.por-logo{ display: block; margin-bottom: 6px; min-height: 110px; text-align: center; position: absolute; left: 0; right: 0px;  top: 27px;}
.por-logo img{ max-width: 200px; max-height:105px; width: 103px;  }
.por-logo img.hover{ opacity: 0; display: none; }
.por-logo img.normal{  opacity: 1; display: inline-block;}
.por-text{display: block; min-height: 45px; height: 45px; overflow: hidden; color: #fff; font-size: 14px; position: absolute; left: 20px; right: 20px;  bottom: 45px; text-align: center;  }
.por-btnbox{ display: block ;clear: both; position: absolute; bottom: 0px; left: 10px; right: 10px; text-align: center; }
.por-btnbox a{ display: inline-block; padding: 5px 9px 1px;color: #000; font-size: 12px; font-weight: bold; background: #fff; -webkit-transition: all 0s ease-in; -o-transition: all 0s ease-in; transition: all 0s ease-in;}

.protfoliolist li:hover .hoverbg { content:''; position: absolute; top: 0px; left: 0px; right: 0px;  bottom: 0px; background: rgba(255,255,255,0.7); border-radius: 5px; }
.protfoliolist li:hover .por-logo img.hover{ opacity: 1; display: inline-block; }
.protfoliolist li:hover .por-logo img.normal{ opacity: 0; display:none;}

.protfoliolist li:hover .por-text{ color: #000; }
.protfoliolist li:hover a{ color: #fff; background: #002d62; -webkit-transition: all 0s ease-in; -o-transition: all 0s ease-in; transition: all 0s ease-in;}

/*==================================
Footer CSS
================================= */
footer{ background: #333333; color: #b8b8b8; font-size: 11px; padding-top: 18px; padding-bottom: 18px; text-align: center; }
footer span{ margin-right: 4px; margin-left: 4px;}
footer a{ font-size: 11px; color: #b8b8b8;  margin-left: 4px; margin-right: 4px;}
footer a:hover{ color: #ffffff;}

@media (min-width: 200px) and (max-width: 359px) {
    .por-logo img{ width: 76px;  }
    .por-logo { top: 13px; }
    .por-text{ left: 10px; right: 10px; bottom: 40px;}
    .por-btnbox{ bottom: 4px;}
    
}

@media (min-width: 360px) and (max-width: 480px) {
    .por-logo img{ width:104px;  }
    .por-logo { top: 30px; }
    .por-text{ left: 10px; right: 10px; bottom: 40px;}
    .por-btnbox{ bottom: 4px;}
    
}


@media (min-width: 481px) and (max-width: 639px) {
    .por-logo img{ width: 76px;  }
    .por-logo { top: 13px; }
    .por-text{ left: 10px; right: 10px; bottom: 40px;}
    .por-btnbox{ bottom: 4px;}
    
}
@media (min-width: 640px) and (max-width: 992px) {
    .por-logo img{ width: 90px;  }
    .por-logo { top: 18px; }
    .por-text{ left: 20px; right: 20px; bottom: 40px;}
    .por-btnbox{ bottom: 10px;} 
}

@media (min-width: 993px) and (max-width: 1100px) {
    .por-logo img{ width: auto;  }
    .por-logo { top: 33px; }
    .por-text{ left: 20px; right: 20px; bottom: 60px;}
    .por-btnbox{ bottom: 9px;} 
}


@media (min-width: 480px) {
/*==Header CSS== */

/*==Banner CSS== */

/*==Content CSS== */

/*==Footer CSS== */
	
}
@media (min-width: 640px) {
/*==Header CSS== */

/*==Banner CSS== */
.bannerimg{ min-height: 200px;}
    
/*==Content CSS== */
.protfoliolist li{ display: inline-block; min-height: 165px; padding: 10px; width: 49.65%; }
    
/*==Footer CSS== */
footer{ text-align: left; padding-top: 25px; padding-bottom: 25px; }
    
}
@media (min-width: 768px) {
/*==Header CSS== */
.topnavright a{ margin-top: 29px; font-size: 18px;  padding: 13px 12px;  display: inline-block; }
.logo img{ width: auto; }
    
/*==Banner CSS== */
.bannerimg{ min-height: 300px;}
    
/*==Content CSS== */

    
/*==Footer CSS== */
    
}
@media (min-width: 992px) {
/*==Header CSS== */

/*==Banner CSS== */

/*==Content CSS== */

/*==Footer CSS== */
}
@media (min-width: 1200px) {
    
.container {
    width: 1220px;
}
    
/*==Header CSS== */

/*==Banner CSS== */
.bannerimg{ min-height: 490px;}
.bluerowtext{padding: 50px 0px; }
    
/*==Content CSS== */
.protfoliolist{ list-style: none; margin: 0px; padding: 0px;}
.protfoliolist li{ display: inline-block; min-height: 210px; padding: 10px; width: 33.11%; }
.protfoliolist li .probgimg img{ width: 380px; height: 210px; }
.por-logo img{ width: inherit;  }
    .por-btnbox{ bottom: 10px; }
/*==Footer CSS== */
footer{ text-align: left; padding-top: 35px; padding-bottom: 35px; }
    
}