@charset "utf-8";

/*text-align: center; centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
/* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
body  {margin: 0; padding: 0; text-align: center; color: #393533; background-color: #312824; font-family: 'Montserrat', sans-serif; font-size: 13px; line-height:20px; }
html, body { background-color: #312824; background-image:url(images/Brownfield_bg_tile.jpg); background-repeat:repeat; }

#fullWrapper {width:100%; min-width:1160px; max-width:1340px; height:auto !important; margin:0px auto; background:#ffffff; padding:0px; position:relative; z-index:20;}

#header_container {width:100%; height:260px; padding: 0px; position:relative; margin:0px auto; background:url(images/Brownfield_header_squares.jpg) no-repeat center bottom; z-index:80;}
  #logo {width:353px; height:192px; position:absolute; left:25px; top:20px; z-index:95;}
  #image_banner {width:619px; height:194px; position:absolute; background:url(images/Brownfield_image_banner.jpg) no-repeat right top; right:232px; top:18px;}
  #contact_info {width:194px; height:194px; position:absolute; right:18px; top:18px; background:url(images/Brownfield_contact_bg.jpg) no-repeat right top; text-align:center;}
    .location_text {font:19px/30px 'Montserrat', sans-serif; color:#ffffff;}
    .phone_number {text-decoration:none; width:auto; height:18px; display:block; position:absolute; right:0px; bottom:33px; text-align:center; margin-right:12px; font:19px/18px Arial, Helvetica, sans-serif; color:#ffffff; padding-left:25px; background:url(images/Brownfield_phone_icon.png) no-repeat left;}
  
#topnav_wrapper {width:100%; height:43px; text-align:left; position:relative; margin:0px auto; background:#73635c; z-index:99;}
  #menu_1 {padding:0px; position:relative; width:100%; height:43px; z-index:95;}    


#contentContainer {width:100%; text-align: left; position:relative; padding:18px 0px 18px 0px; z-index:65;}
  #CTA_wrapper {width:auto; margin:0px auto; padding:20px 18px 30px 18px;}
    #CTA_column1 {width:30%; height:auto; position:relative; display:inline-block; text-align:center; padding-left:5%;}
    #CTA_column2 {width:30%; height:auto; position:relative; display:inline-block; text-align:center;}
    #CTA_column3 {width:30%; height:auto; position:relative; display:inline-block; text-align:center;}
      a.brownfield_wheelrim_link {width:329px; height:410px; display:block; text-decoration:none; border:0px; background: url(images/Brownfield_CTA_wheelrim.jpg) no-repeat center top; margin:0px auto;}
      a:hover.brownfield_wheelrim_link {width:329px; height:410px; display:block; text-decoration:none; border:0px; background: url(images/Brownfield_CTA_wheelrim.jpg) no-repeat center bottom; margin:0px auto;}
      a.reymat_link {width:329px; height:410px; display:block; text-decoration:none; border:0px; background: url(images/Brownfield_CTA_corim.jpg) no-repeat center top; margin:0px auto;}
      a:hover.reymat_link {width:329px; height:410px; display:block; text-decoration:none; border:0px; background: url(images/Brownfield_CTA_corim.jpg) no-repeat center bottom; margin:0px auto;}
      a.brownfield_otr_link {width:329px; height:410px; display:block; text-decoration:none; border:0px; background: url(images/Brownfield_CTA_otr_systems.jpg) no-repeat center top; margin:0px auto;}
      a:hover.brownfield_otr_link {width:329px; height:410px; display:block; text-decoration:none; border:0px; background: url(images/Brownfield_CTA_otr_systems.jpg) no-repeat center bottom; margin:0px auto;}
    

#content_wrapper {width:auto; margin:0px auto; padding-left:18px; padding-right:18px; text-align:left; position:relative;}
#mainContent {width:78%; position:relative; margin:0px; padding:0px; float:left; text-align:left; z-index:50;}

#rightPanel {width:20%; float:right; text-align:left; position:relative; z-index:50;}
#right_content {width:100%; position:relative; }


#footer_wrapper {background: url(images/Brownfield_footer_bg.jpg) no-repeat center bottom; width:100%; max-width:1340px; min-width:1160px; height:139px; position:relative; margin:0px auto 0px auto; z-index:90;}
/*#footer_wrapper, .push{height:98px; clear:both;}*/



#footer_text_wrapper {width:100%; height:75px; position:relative; margin:0px auto; z-index:90;}
  #footer_text_left {width:auto; position:relative; float:left; padding-top:48px; margin-left:18px; text-align:left; font:12px/26px 'Montserrat', sans-serif; color:#b9b1ae;}
  #footer_text_right {width:auto; position:relative; float:right; padding-top:48px; margin-right:18px; text-align:right; font:12px/26px 'Montserrat', sans-serif; color:#b9b1ae;}

#footer_wrapper p {margin:0px; font:12px/26px 'Montserrat', sans-serif; color:#b9b1ae;}
#footer_wrapper a {font:12px/26px 'Montserrat', sans-serif; color: #b9b1ae; text-decoration: none;}
#footer_wrapper a:hover {font:12px/26px 'Montserrat', sans-serif; color: #b9b1ae; text-decoration: underline;}

#footer_logoIcon {width:107px; height:75px; position:absolute; left:0px; top:48px; background:url(images/Brownfield_footer_logo_icon.png) no-repeat left;}

.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
  float: right; margin-left: 10px; }
  
.fltlft { /* this class can be used to float an element left in your page */
  float: left; margin-right: 10px;}
  
.clearfloat {clear:both;}
#clearfloat { clear:both;}

#contentContainer h1 {font:25px 'Montserrat', sans-serif; color:#73635c; margin:0px 0px 5px 0px;}
#contentContainer h2 {font:21px 'Montserrat', sans-serif; color:#5ea0d3; margin:0px 0px 5px 0px;}
#contentContainer h3 {font:19px 'Montserrat', sans-serif; color:#9b928b; margin:0px 0px 5px 0px;}
#contentContainer h4 {font:17px 'Montserrat', sans-serif; color:#4a433f; margin:0px 0px 5px 0px;}
#contentContainer h5 {font:17px 'Montserrat', sans-serif; color:#2e6b9a; margin:0px 0px 5px 0px;}


#contentContainer p {font:13px/20px 'Montserrat', sans-serif; color:#393533; text-align:justify;}

#contentContainer ul {margin:0px 0px 0px 30px; padding:0px;}
#contentContainer ul li {margin:0px; padding:0px 0px 8px 8px; list-style-type: disc; list-style-position: outside; color:#393533;}

#contentContainer ol {margin:0px 0px 0px 30px; padding:0px;}
#contentContainer ol li {margin:0px; padding:0px 0px 8px 8px; list-style-type: decimal; list-style-position: outside; color:#393533;}

#contentContainer a {font:13px/20px 'Montserrat', sans-serif; color: #ee792b; text-decoration: underline;}
#contentContainer a:hover  {color: #ee792b; text-decoration: none;}

#contentContainer .spacer-gif {border: none; height:0px;}
#contentContainer img.spacer-gif {border: none; height:0px;}

#contentContainer .csc-caption {font:12px 'Montserrat', sans-serif; color:#9b928b; text-align:center;}

#contentContainer p .csc-caption {font:12px 'Montserrat', sans-serif; color:#9b928b; text-align:center;}

#contentContainer img {border:0px solid #000000;}

/* ------------ OTR Monitoring CTA ---------- */
#otr-banner {background:url(images/banner-itrack.jpg) no-repeat center center; height:372px;}
#trucksense-banner {background:url(images/banner-trucksense.jpg) no-repeat center center; height:372px;}
#otr-banner {text-align:center;}
#otr-banner div {padding:71px 0;}
#otr-banner h1 {text-align:center; color:#ffffff; font-size:48px; line-height:60px; font-weight:400;}
#otr-banner p {text-align:center; color:#ffffff; font-size:20px; line-height:24px; font-weight:400; font-style:italic;}
#otr-banner .button, #trucksense-banner .button {display:inline-block; background-color:#439639; line-height:52px; border-radius:26px; color:#ffffff; padding:0 32px; font-size:18px; text-decoration:none; -webkit-transition:background-color 0.15s ease-in-out; transition:background-color 0.15s ease-in-out; margin:30px 0 0 0;}
#otr-banner .button:hover, #trucksense-banner .button:hover {background-color:#3e4145; color:#ffffff;}
#trucksense-banner .button {margin-top:280px;}
#otr {padding:40px 0; text-align:center;}
#otr h1 {font-family:'Montserrat', sans-serif; color:#73635c; font-size:48px; line-height:60px; font-weight:400;}
#otr p {font-family:'Montserrat', sans-serif; color:#8b8e94; font-size:19px; line-height:32px; font-weight:400; text-align:center;}
.cta-otr {display:inline-block; position:relative; overflow:hidden; border:15px solid rgba(95, 120, 130, 0.04); margin:17px;}
.cta-otr img {transition:all 0.25s;}
.cta-otr:hover img{-webkit-transform: scale(1.2) rotateZ(-3deg); transform: scale(1.2) rotateZ(-3deg);}
.cta-otr-overlay {position:absolute; top:0; bottom:0; left:-30%; width:100%; background:rgba(0, 0, 0, 0.7); opacity:0; -webkit-transition:opacity 0.15s linear; transition:opacity 0.15s linear; -webkit-transition:all 0.25s ease-in-out; transition:all 0.25s ease-in-out;}
.cta-otr-overlay:before {content:"\f061"; position:absolute; top:50%; left:50%; width:30px; height:30px; margin-top:-15px; margin-left:-15px; font-size:30px; line-height:1; font-family:"FontAwesome"; text-align:center; color:#ffffff;}
.cta-otr:hover .cta-otr-overlay {left:0; opacity:1;}
.full-banner {position:relative; margin:-18px -18px 18px -18px; text-align:center;}
.full-banner img {width:100%; height:auto;}


#rfid-features {display:table; table-layout:fixed; border-spacing:40px; width:100%; max-width:1160px; margin:18px auto;}
#rfid-features > div{display:table-row;}
#rfid-features > div div{display:table-cell; text-align:center;}
#rfid-features img{width:100px; height:auto;}

.circle-list {margin:40px 0;}
#contentContainer .circle-list ol {counter-reset:li; margin-left:0;  padding-left:0;}
#contentContainer .circle-list ol > li {position:relative; padding:14px 0 14px 80px; margin:16px 0; list-style:none; font-size:22px; line-height:32px; color:#7f7f7f;}
#contentContainer .circle-list ol > li:before {
  content:counter(li);
  counter-increment:li;
  
  position:absolute;
  top:0;
  left:0;
  box-sizing:border-box;
  width:60px;
  height:60px;
  color:#ffffff;
  background:#5b9bd5;
  border-radius:50%;
  font-weight:700;
  text-align:center;
  line-height:60px;
}