@charset "utf-8";

/** FONTS **/
@font-face {
    font-family: 'droid_serifregular';
    src: url('/web/20240523073451im_/https://www.ramcoplexus.com/fonts/DroidSerif-webfont.eot');
    src: url('/web/20240523073451im_/https://www.ramcoplexus.com/fonts/DroidSerif-webfont.eot#iefix') format('embedded-opentype'),
         url('/web/20240523073451im_/https://www.ramcoplexus.com/fonts/DroidSerif-webfont.woff') format('woff'),
         url('/web/20240523073451im_/https://www.ramcoplexus.com/fonts/DroidSerif-webfont.ttf') format('truetype'),
         url('/web/20240523073451im_/https://www.ramcoplexus.com/fonts/DroidSerif-webfont.svg#droid_serifregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/** RESET **/
* {margin:0; padding:0;}
ul, ol {list-style:none;}
a {text-decoration: none;}
img {display: block}
body {font-size:100%; line-height:110%; width:100%; font-family:'droid_serifregular', Helvetica , Arial,sans-serif; color: #404040; background:#000; position:relative;}
input[type="text"], input[type="email"], textarea {transition: all ease-in-out 0.3s; -webkit-transition: all ease-in-out 0.3s; -moz-transition: all ease-in-out 0.3s;}
input[type="text"]:focus, textarea:focus, input[type="email"]:focus {box-shadow: 0 0 5px rgba(216, 216, 216, 1); border: 1px solid rgba(255, 231, 179, 1);}

/** TYPOGRAPHY **/
p {font-size: 16px; line-height: 170%;} /* 13px/16px */
h1 {font-size:40px; font-weight:normal; line-height:100%;  font-family:'droid_serifregular', Helvetica , Arial,sans-serif; } /* 30px/16px */
h2 {font-weight:normal; line-height: 120%;  font-family:'droid_serifregular', Helvetica , Arial,sans-serif;}


/** GENERAL CLASSES AND ELEMENTS **/
.clearfix:after {clear:both; content:""; display:block; height:0; visibility:hidden; }
.caps {text-transform:uppercase;}
.row {margin:0;}
.col-lg-6, .col-lg-3, .col-lg-12, .col-lg-8, .col-lg-4 {padding:0;}
strong, b {font-weight: normal;}

/** LAYOUT CONTAINERS AND THEIR RELATED ELEMENTS **/
/* Section Intro */
#page-wrapper {background:#fff;}
#introSection {background:#fff; }
.logoCont {text-align: center;padding: 35px 0 0;margin: 0 0 40px;}
.logoCont img {display: inline;}
.introTtl {width: 80%; margin: 0 auto; text-align: center; color: #000; }
.introTtl h1 {font-size: 20px; line-height: 161%; transform: translateY(200px); -webkit-transform: translateY(200px); -moz-transform: translateY(200px);  transition: all ease-in-out 0.7s; -webkit-transition: all ease-in-out 0.7s; -moz-transition: all ease-in-out 0.7s;}
.introTtl h1 span {margin: 10px 0 0; display: block;}
.introTtl h1.untranslate {transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.view-all {display: none; padding: 12px 10px; border: 1px solid #fff; text-transform: uppercase;font-size: 15px;margin: 20px 0 0;color: #fff; background: transparent; transform: translateY(55px); -webkit-transform: translateY(55px); -moz-transform: translateY(55px); transition: background ease-in-out 0.5s, color ease-in-out 0.5s, transform ease-in-out 0.8s; -webkit-transition: background ease-in-out 0.5s, color ease-in-out 0.5s, -webkit-transform ease-in-out 0.8s; -moz-transition: background ease-in-out 0.5s, color ease-in-out 0.5s, -moz-transform ease-in-out 0.8s  }
.view-all.untranslate {transform: translateY(0); -webkit-transform: translateY(0); -moz-transform: translateY(0);}
.view-all:hover {background: #fff; color: #523b22}

/* Brand Section */
#brandSection {overflow:hidden; background:#876e55; margin: 46px 0 0; padding: 30px 20px 0; position: relative; z-index: 999;}
.brandSectionTtl {text-align: center;margin: 0 0 44px;}
.brandSectionTtl h2 {color: #fff; font-size: 20px;text-transform: uppercase;}
.brandSectionTtl h2:after {content:""; display: block; width: 100px; height: 2px; margin: 11px auto 0; background: #fff}
.singleBrand {float: left; width: 31.3333%; position:relative; padding: 0 0 87px;margin: 0 2% 3% 0;overflow: hidden;}
.brandLogoHolder {position: relative; background: #fff;}
.brandLogoHolder {height: 310px;padding:10px}
.dispTable {width:100%; height:100%; display: table}
.dispTableCell {width:100%; height:100%; display: table-cell; vertical-align: middle; text-align: center}
.brandLogoHolder img { backface-visibility: hidden; -webkit-backface-visibility: hidden; display: inline; transition: transform ease-in-out 0.5s; -webkit-transition: -webkit-transform ease-in-out 0.5s; -moz-transition: -moz-transform ease-in-out 0.5s;}
.brandDescr {position:absolute; left:0; bottom:0; width:100%; background: #45311b; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; height: 87px; text-align: center; color:#fff;padding: 16px 10px 0;  transition: all ease-in-out 0.5s; -webkit-transition: all ease-in-out 0.5s; -moz-transition: all ease-in-out 0.5s;}
.brandDescr p {transition: all ease-in-out 0.8s; -webkit-transition: all ease-in-out 0.8s; -moz-transition: all ease-in-out 0.8s;}
.visitWebsiteLink {position: absolute; left:0; bottom:-60px; width:100%; opacity:0; transition: all ease-in-out 0.8s; -webkit-transition: all ease-in-out 0.8s; -moz-transition: all ease-in-out 0.8s;  }
.visitWebsiteLink a { display: inline-block; padding: 5px 7px; border:1px solid #fff; color: #fff; font-size: 14px; background: transparent; transition: all ease-in-out 0.4s; -webkit-transition: all ease-in-out 0.4s; -moz-transition: all ease-in-out 0.4s;}
.visitWebsiteLink a:hover {background:#fff; color:#000; }
.singleBrand:hover .brandLogoHolder img {transform:translate3d(0, -40px, 0); -moz-transform:translate3d(0, -40px, 0); -webkit-transform:translate3d(0, -40px, 0);}
.singleBrand:hover .brandDescr {height: 126px;}
.singleBrand:hover .brandDescr p {transform: translate3d(0, -7px, 0); -moz-transform: translate3d(0, -7px, 0); -webkit-transform: translate3d(0, -7px, 0);} 
.singleBrand:hover .visitWebsiteLink {opacity:1; bottom: 13px;}

/* Footer Section */
#mainFooter {overflow: hidden; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; padding: 15px 15px; background-color:#35302b;}
.footerSign {float: left;}
.footerSign a {display: inline-block; vertical-align: middle; margin:  0 40px 0 0}
.footerInfo {float: right;color: #fff;font-size: 16px;line-height: 100%;margin: 12px 0 0;}

/* Media Queries */ 
@media only screen and (min-width: 960px) and (max-width: 1230px) {
.brandLogoHolder img {max-width: 265px;}
.brandDescr p {font-size:15px;}
}
@media only screen and (min-width: 771px) and (max-width: 960px) {
.brandLogoHolder img {max-width: 100%;}
.brandDescr p {font-size:15px;}
#brandSection {text-align: center}
.singleBrand {width:47%; float: none; display: inline-block}
}
@media only screen and (min-width: 581px) and (max-width: 770px) {
.brandLogoHolder {height:260px}
.brandLogoHolder img {max-width: 225px;}
.singleBrand:hover .brandLogoHolder img, .singleBrand:hover .brandDescr p {transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);}
.brandDescr {height: auto !important; padding: 16px 10px; position: relative; left:0; bottom:0}
.brandDescr p {font-size:15px;}
.visitWebsiteLink {position: relative; left:0; top:0; margin: 10px 0 0; opacity: 1 !important; display: block}
#brandSection {text-align: center}
.singleBrand {width:47%; float: none; display: inline-block; margin: 0 1% 20px; vertical-align: top; padding: 0}
#mainFooter p {float:none; text-align: center}
.footerSign a {display: block; margin: 0 0 20px; }
.footerSign a img {display: inline}
}

@media only screen and (max-width: 580px) {
.brandLogoHolder {height:220px}
.brandLogoHolder img {max-width: 225px;}
.singleBrand:hover .brandLogoHolder img, .singleBrand:hover .brandDescr p {transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); -webkit-transform:translate3d(0,0,0);}
.brandDescr {height: auto !important; padding: 16px 10px; position: relative; left:0; bottom:0}
.brandDescr p {font-size:15px;}
.visitWebsiteLink {position: relative; left:0; top:0; margin: 10px 0 0; opacity: 1 !important; display: block}
#brandSection {text-align: center}
.singleBrand {width:98%; float: none; display: inline-block; margin: 0 1% 20px; vertical-align: top; padding: 0}
#mainFooter p {float:none; text-align: center}
.footerSign a {display: block; margin: 0 0 20px; }
.footerSign a img {display: inline}
}

/*
     FILE ARCHIVED ON 07:34:51 May 23, 2024 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 06:36:47 Oct 26, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 0.53
  exclusion.robots: 0.016
  exclusion.robots.policy: 0.007
  esindex: 0.011
  cdx.remote: 22.731
  LoadShardBlock: 131.951 (3)
  PetaboxLoader3.datanode: 173.473 (5)
  PetaboxLoader3.resolve: 222.909 (3)
  load_resource: 287.835 (2)
*/