@charset "utf-8";

@import "reset.css";
@import "global.css";
@import "fontawesome.css";

body{ font: normal 14px/1.8em 'Roboto', sans-serif; color: #212121; background: #EEE;}
a{color: #e71b24;
    transition:color 180ms linear, background 180ms linear, opacity 180ms linear;
    -webkit-transition:color 180ms linear, background 180ms linear, opacity 180ms linear;
    -moz-transition:color 180ms linear, background 180ms linear, opacity 180ms linear;
}
a:hover{text-decoration:none; color: #a7141a;}

/* ---Standard headers ---*/
h1 { font: normal 36px/1.3em 'Roboto Condensed', sans-serif; text-transform: uppercase;}
h2 { font: normal 30px/1.3em 'Roboto Condensed', sans-serif; text-transform: uppercase;}
h3 { font: normal 24px/1.3em 'Roboto Condensed', sans-serif; text-transform: uppercase;}
h4 { font: normal 20px/1.3em 'Roboto Condensed', sans-serif; text-transform: uppercase;}

.red-txt{color: #e71b24;}
.red-bg{background: #e71b24;}

/* --- General Layout Settings---*/
.container { width : 1500px; position : relative; margin : 0 auto; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#header, #navigation, #content, #footer, #marketing {position : relative; display: block; clear: both;}

.alert{background: #e71b24; color:#FFF; font: normal 14px arial, sans-serif; padding: 8px 12px;; margin: 10px 0; border-radius: 3px; clear: both;}
.alert-success{background:#3e8f3e; color:#FFF; font: normal 14px arial, sans-serif; padding: 8px 12px; margin: 10px 0; border-radius: 3px}

button, input.btn{border: none;}
.btn{font-size: 16px; line-height: 16px; font-weight: bold; text-transform: uppercase; color:#FFF; cursor:pointer; text-decoration:none; display:block; padding:15px 25px; background:#e71b24;}
.btn:hover{color: #FFF; background: #a7141a;}
.btn.dark{background: #212121;}
.btn.dark:hover{background: #e71b24;}
.btn.light{background: #e0e0e0; color: #212121;}
.btn.light:hover{background: #e71b24; color: #FFF;}
.btn.centered{max-width: 180px; margin: 0 auto; text-align: center;}

/*-- Responsiveness Base Structure -- */
.row{clear:both;}
.row .col{margin-left:2%; float:left; margin-bottom: 20px;}
.row .col.right{float:right;}
.row .col:first-child{margin-left:0;}
.row .col.split_int{margin-left:0; clear: both;}
.row .full{width:100%;}
.row .half{width:49%;}
.row .third{width:32%;}
.row .third_2{width:66%;}
.row .fourth{width:23.5%;}
.row .fourth_2{width:49%;}
.row .fourth_3{width:74.5%;}
.row .fifth{width:18.4%;}
.row .fifth_2{width:38.8%;}
.row .fifth_3{width:59.2%;}
.row .fifth_4{width:79.6%;}
.row .sixth{width:15%;}
.row .sixth_2{width:32%;}
.row .sixth_3{width:49%;}
.row .sixth_4{width:66%;}
.row .sixth_5{width:83%;}

.row.no_margin .col{margin-left:0; margin-bottom: 0;}
.row.no_margin .full{width:100%;}
.row.no_margin .half{width:50%;}
.row.no_margin .third{width:33.33%;}
.row.no_margin .third_2{width:66.66%;}
.row.no_margin .fourth{width:25%;}
.row.no_margin .fourth_2{width:50%;}
.row.no_margin .fourth_3{width:75%;}
.row.no_margin .fifth{width:20%;}
.row.no_margin .fifth_2{width:40%;}
.row.no_margin .fifth_3{width:60%;}
.row.no_margin .fifth_4{width:80%;}
.row.no_margin .sixth{width:16.66%;}
.row.no_margin .sixth_2{width:33.33%;}
.row.no_margin .sixth_3{width:50%;}
.row.no_margin .sixth_4{width:66.66%;}
.row.no_margin .sixth_5{width:83.33%;}


/* --- Layout ---*/
#wrapper{overflow: hidden; margin-top: 100px;}
#header{padding: 0; z-index: 10;  background: #FFF; border-bottom: 3px solid #000; position: fixed; top:0; left: 0; width: 100%;}
#header .container{height: 100px;}
#header #logo {position: absolute; left: 0; bottom: 0; margin-bottom: -3px; width: 280px; z-index: 3;}
#header #head-right{width: 300px; height: 100px; position: absolute; top: 0; right: 0; z-index: 2;}
#header #head-right .head-icon{display: block; float: right; font-size: 25px; line-height: 1em; color: #212121; margin: 38px 0 0 25px; cursor: pointer;}
#header #head-right .head-icon:hover{color: #e71b24;}
#header .search{padding: 15px 0; position: absolute; top:105px; left: 0; width: 100%; background: #e0e0e0; color: #212121; display: none; -webkit-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.2); -moz-box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.2); box-shadow: 1px 2px 2px 0 rgba(0,0,0,0.2);}
#header .search .search-field{ border:none; border-bottom: solid 2px #bbb; color: #424242; background: #e0e0e0; padding: 10px 0; margin-bottom: 10px; height: 50px; line-height: 50px; font-size: 26px; font-weight: normal; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#header .search .search-field:focus {outline:none;}
#header .search .container, #header.small .search .container{height: auto;}

#navigation{z-index: 1; position: absolute; top:0; left: 0; width: 100%; padding: 0 300px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#header #head-right .head-icon.mobile-menu{display: none;}
#navigation .nav-hold .close-btn{display: none;}
#navigation ul{padding: 0; margin: 0; width: 100%; text-align: center; list-style: none;}
#navigation ul li.level_1{display: inline-block; margin: 0; padding: 0;}
#navigation ul li.level_1 a{padding: 44px 15px 40px; height: 100px; color: #212121; font-size:16px; font-weight: bold; line-height: 1em; display: block; text-transform: uppercase;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
#navigation ul li.level_1 a:hover{background:#e0e0e0;}
#navigation ul li.level_1:hover .subnav{display:block;}
#navigation ul li.level_1 .subnav{display:none; position: absolute; padding: 20px 0; background: #EEE; border: 1px solid #ededed; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box}
#navigation ul li.level_1 .subnav li a{display: block; float: none; color: #212121; font-size: 14px; line-height: 14px; text-align: left; text-transform: none; min-width: 240px; padding: 12px 30px; height: auto;}
#navigation ul li.level_1 .subnav li a:hover{background: #FFF; color: #e71b24;}
#navigation ul li.level_1 .subnav li.level_3 a{font-size: 11px;}

#marketing{margin: 0;position: relative; z-index: 2}
#marketing .flexslider{margin: 0; padding: 0; border: 0;}
#marketing .panel-image{position:relative;}
#marketing .panel-bg{height: 580px; width: 100%;}
#marketing .container{height: 100%;}
#marketing .mcaption{position: absolute; top:50%; right:0; margin-top: -70px;  background: rgba(0,0,0,0.7); padding: 40px 50px; color: #FFF; min-width: 320px;
    -ms-transform: translate(0,-50%);
    -webkit-transform: translate(0,-50%);
    -moz-transform: translate(0,-50%);
    -o-transform: translate(0,-50%);
    transform: translate(0,-50%);}
.mcaption p, .mcaption h1, .mcaption h2, .mcaption h3{padding-bottom: 10px;}
.mcaption h1{font-weight: bold; font-size: 46px; line-height: 1em;}
.mcaption h2{font-weight: normal; font-size: 34px; line-height: 1em;}
#marketing .mcaption .btn{float: left; margin-top: 5px;}
#marketing .dir-nav{ opacity: 0.6; z-index: 9;
    transition:opacity 180ms linear;
    -webkit-transition:opacity 180ms linear;
    -moz-transition:opacity 180ms linear}
#marketing .dir-nav:hover{opacity: 1;}
#marketing .dir-nav img{background: rgba(0,0,0,0.5); padding: 10px 0;}
#marketing .prev-arrow{position: absolute; left: 5px; top: 50%; margin-top: -30px; cursor: pointer; z-index: 15;}
#marketing .next-arrow{position: absolute; right: 5px; top: 50%; margin-top: -30px; cursor: pointer; z-index: 15;}

#white-wrap{background: #FFF; position: relative; z-index: 1;}
.box-white{background: #FFF; padding: 50px; margin: 0 auto;  -moz-box-shadow: 0 0 9px rgba(0,0,0,.25); -webkit-box-shadow: 0 0 9px rgba(0,0,0,.25); box-shadow: 0 0 9px rgba(0,0,0,.25);}

#content{position: relative; z-index: 3;}
#content .content-hold{padding: 30px 0;}
#content .content-hold.home{padding: 180px 0 0;}
#content .content-wide{width: 100%;}
#content .content-left{width: 20%; float: left;}
#content .content-right{width: 78%; float: right;}

.wysiwyg ul{padding-left: 20px;}
.wysiwyg li{list-style: none; position: relative; padding-left: 15px;}
.wysiwyg li:before {content: "\f0da"; color: #e71b24; font-family: "FontAwesome", sans-serif;  padding-right: 8px; position: absolute; left: 0; top:0;}
.wysiwyg table {border-collapse: collapse; max-width: 100%; width: 100%; }
.wysiwyg table caption { text-transform: uppercase; padding: 0; color: rgba(0, 0, 0, 0.5);font-size: 11px; }
.wysiwyg table th, .wysiwyg table td {border: none; padding: 16px; padding-bottom: 15px; }
.wysiwyg table tfoot th, .wysiwyg table tfoot td {color: rgba(0, 0, 0, 0.5); }

#breadcrumbs{padding: 15px 0 0; font-size: 12px; line-height: 1em; color: #999;}
#breadcrumbs a{color: #999;}
#breadcrumbs a:hover{color: #212121;}

.header-image .container{height: 320px;}
.header-image h1{position: absolute; bottom: 0; left: 50%; background: rgba(0,0,0,0.7); font-size: 46px; line-height: 1em; font-weight: bold; color: #FFF; padding: 15px 25px;
    -ms-transform: translate(-50%,0);
    -webkit-transform: translate(-50%,0);
    -moz-transform: translate(-50%,0);
    -o-transform: translate(-50%,0);
    transform: translate(-50%,0);}

.lead-image{ width:500px; max-width: 50%; float: left; margin: 0 30px 20px 0;}
.lead-image img{display: block; width: 100%;}

.home-intro{padding: 0 200px 30px; min-height: 200px; background: url('../../../img/logo.png') right bottom no-repeat; text-align: center; background-size: 180px auto;}
.home-intro h1{color: #e71b24;}
.home-intro p{font-size: 18px; line-height: 1.8em;}

.services-feature{background: #212121; padding: 60px 0; color:#FFF;}
.services-feature .circle-icon{width: 70px; height: 70px; display: inline-block; vertical-align: middle; background: #FFF; border-radius: 50%; position: relative; margin-bottom: 15px; text-align: center;  -moz-box-shadow: 1px 1px 8px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 8px rgba(0,0,0,.3); box-shadow: 1px 1px 8px rgba(0,0,0,.3);}
.services-feature .circle-icon .char{font-size: 32px; line-height: 32px; padding-top: 20px; display: inline-block; color: #e71b24;}
.services-feature .circle-icon:hover{background: #e71b24;}
.services-feature .circle-icon .char{font-size: 32px; line-height: 32px; padding-top: 20px; display: inline-block; color: #e71b24;}
.services-feature .circle-icon:hover .char{color: #FFF;}

.services-feature .service{width: 20%; float: left; text-align: center; padding: 20px; border-left: 2px solid #444; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.services-feature .service:first-child{border-left: 0;}
.services-feature .service h3{padding-bottom: 0; min-height: 50px; text-transform: none; font-size: 18px; font-family: 'Roboto', sans-serif; font-weight: bold;}

.featured-products{background: #212121; padding: 60px 0 40px;}
.featured-products h1{color: #FFF; padding-bottom: 20px;}
.featured-products .prod-hold{height: 280px; position: relative; display: block;}
.featured-products .prod-hold .frame-hold{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 15px; background: rgba(0,0,0,0);  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    transition:background 280ms linear;
    -webkit-transition:background 280ms linear;
    -moz-transition: background 280ms linear;
}
.featured-products .prod-hold .frame-hold .frame{width: 100%; height: 100%; border:3px solid #FFF; opacity: 0.6;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    transition:opacity 280ms linear;
    -webkit-transition:opacity 280ms linear;
    -moz-transition: opacity 280ms linear;}
.featured-products .prod-hold:hover .frame-hold {background: rgba(0,0,0,0.2);}
.featured-products .prod-hold:hover .frame-hold .frame{opacity: 1;}
.featured-products .prod-hold h3{color: #FFF; position: absolute; bottom: 0; left: 0; padding: 15px 25px; background: #e71b24; text-transform: none; font: normal 24px/1.3em 'Roboto', sans-serif;}
.all-products{padding: 20px 0; background: #101010;}

.comp-detail h1{color: #e71b24; font-size: 36px; line-height: 1.3em;}
.comp-detail .sep{height: 2px; width: 120px; background: #eee; display: inline-block; margin: 10px 0 20px;}

/*-- Products styles --*/
.gallery-hold{background: url('../images/structure/bg-light-grey.jpg') center no-repeat; background-size: cover;}
.gallery-hold .prod-gallery{padding: 30px 0 40px;}
.gallery-hold .pg-thumbs{width: 120px; float: left;}
.gallery-hold .pg-thumbs .thumb{display: block; border: 2px solid #eee; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; margin-bottom: 10px;}
.gallery-hold .pg-thumbs .thumb:hover{border: 2px solid #e71b24; cursor: pointer;}
.gallery-hold .pg-thumbs .thumb.active{border: 2px solid #e71b24;}
.gallery-hold .pg-right{padding-left: 140px;}
.gallery-hold .pg-right .pg-info{padding: 40px 40px 40px 640px;}
.gallery-hold .pg-right .pg-info h1{color: #e71b24; font-size: 36px; line-height: 1.3em;}
.gallery-hold .pg-right .pg-info .sep{height: 2px; width: 120px; background: #eee; display: block; margin: 10px 0 20px;}
.gallery-hold .pg-right .pg-image{width: 600px; float: left; margin-right: 30px;}
.gallery-hold .pg-right .pg-image img{width: 100%;}

.bottom-contact{background: url('../images/structure/bg-dark-grey.jpg') center no-repeat; padding: 40px 0; background-size: cover; color: #FFF;}
.bottom-contact h2{text-align: center;}
.bottom-contact .form-hold{max-width: 800px; margin: 0 auto;}
.bottom-contact .form-hold input[type=text], .bottom-contact .form-hold select{height: 44px;}
.bottom-contact .form-hold textarea{min-height: 140px;}
.bottom-contact .form-hold .row .col{margin-bottom: 15px;}

/*-- Page Tabs --*/
.page-tabs{margin: 20px 0;}
.page-tabs .tab-labels{border-bottom: 1px solid #ddd;}
.page-tabs .ptab{color: #424242; background:#ededed; font-weight: bold; margin-right: 2px; font-size: 14px; line-height: 1em; display: block; float: left; white-space: nowrap; padding: 15px 20px; cursor: pointer; text-transform: uppercase;}
.page-tabs .ptab.active{color:#FFF; background: #424242 !important;}
.page-tabs .ptab:hover{background: #ccc;}
.page-tabs .pdetail{padding: 20px 20px 10px; background: #FFF; border: 1px solid #ddd; border-top: none;}

/* ----Footer Section ----*/
#footer{ background: #e0e0e0; padding: 20px 0 10px;}
#footer .footer-logo{width: 90px; margin: 0 20px 20px 0; float: left;}
#footer .footer-contact a {color: #212121;}
#footer .footer-menu ul{margin: 0; padding: 0; width: 100%; list-style: none; text-align: center;}
#footer .footer-menu ul li{display:inline-block; margin: 0; padding: 0;}
#footer .footer-menu a{padding: 10px; color: #212121; font-size:16px; font-weight: bold; line-height: 1em; display: block; text-transform: uppercase;}
#footer .footer-menu a:hover{color: #e71b24;}
#footer .footer-links{text-align: center; color: #888; font-size: 12px; line-height: 1.6em;}
#footer .footer-links a{color: #888;}
#footer .footer-links a:hover{color: #212121;}
#footer .footer-links p{padding-bottom: 0;}

/*--- Search Result Page ----*/

.search-list{margin: 20px 0; padding: 25px 30px; background: #FFF; -moz-box-shadow: 0 0 5px rgba(0,0,0,.15); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15); box-shadow: 0 0 5px rgba(0,0,0,.15);}
.search-list .li-summary{padding-bottom: 5px; font-size: 16px; line-height: 1.8em;}
.search-list h3{color: #e71b24;}

/*-- Pagination --*/
.pagination{ list-style: none; padding: 0; display: inline; }
.pagination li{display: inline; }
.pagination li a, .pagination li span{padding: 0 6px; border-left: 1px solid #CCC;}
.pagination li:first-child a{border-left:none;}
.pagination li.disabled{display: none;}
.pagination li.active{font-weight: bold;}


/* ----Form Inputs ----*/
fieldset{padding: 10px;}
input[type=text], input[type=email], input[type=password], select{width:100%; height:34px; padding:0 5px; color:#666; font-size:14px; border:1px solid #aaa; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
input[type=file]{padding:6px; border: 1px solid #aaa; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
select{padding-right:0;}
textarea{width:100%; height:80px; padding:8px 5px; color:#666; font-size:14px; border:1px solid #aaa; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
label{padding-bottom:5px; font-size:15px; line-height: 24px;}
.helper{padding:5px 0 0 5px; font-size:11px; color:#999;}


/*--- CTAs ---*/
.ctas-full-third{  height: 280px; width: 100%; position: absolute; top: -140px; left: 0; z-index: 20;}
.ctas-full-third .cta-third{display: block; position: relative; width: 33.33%; height: 280px; border: 3px solid #FFF; border-left: 1.5px solid #FFF; border-right: 1.5px solid #FFF;   float: left; overflow: hidden; background: #000; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.ctas-full-third .cta-third:first-child{border-left:3px solid #FFF;}
.ctas-full-third .cta-third:last-child{border-right:3px solid #FFF;}
.ctas-full-third .cta-third .bg-img{position: absolute; bottom: 0; left: 0; height: 100%; width: 100%; margin-left: 0; opacity: 0.7; }
.ctas-full-third .cta-third .cta-title{position: absolute; left: 0; bottom:0; opacity: 1; padding: 15px 10px; background: rgba(0,0,0,0.7); text-align: center; color: #FFF; font-size: 28px; font-family: 'Roboto Condensed', sans-serif; line-height: 1.3em; text-transform:uppercase; width: 100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;}
.ctas-full-third .cta-third .overlay{background: #000; color: #FFF; background: rgba(0, 0, 0, 0.7); position: absolute; top:0; left: 0; width: 100%; height: 100%; opacity: 0; padding: 30px 35px;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    transition:opacity 280ms linear;
    -webkit-transition:opacity 280ms linear;
    -moz-transition: opacity 280ms linear;}
.ctas-full-third .cta-third .overlay h2{font-size: 28px; line-height: 1.3em;}
.ctas-full-third .cta-third .overlay p{padding-bottom: 5px; line-height: 1.3em;}
.ctas-full-third .cta-third .overlay .sep{height: 2px; width: 100px; background: #FFF; display: block; margin: 5px 0 15px;}
.ctas-full-third .cta-third .overlay .cta-label{font-style: italic; color:#ffd600;}
.ctas-full-third .cta-third:hover .overlay{opacity: 1;}
.ctas-full-third .cta-third:hover .cta-title{opacity: 0;}

/*--- Products List Section ---*/
.item-list .item{margin-top: 20px; background: #FFF; position: relative; min-height: 280px;  -moz-box-shadow: 0 0 5px rgba(0,0,0,.15); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.15); box-shadow: 0 0 5px rgba(0,0,0,.15);}
.item-list .item:first-child{margin-top: 0;}
.item-list .item .li-img{height: 280px; width: 420px; display: block; position: absolute; top:0; left:0;}
.item-list .item .li-img .frame-hold{position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 15px; background: rgba(0,0,0,0);  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    transition:background 280ms linear;
    -webkit-transition:background 280ms linear;
    -moz-transition: background 280ms linear;
}
.item-list .item .li-img .frame-hold .frame{width: 100%; height: 100%; border:3px solid #FFF; opacity: 0.6;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;
    transition:opacity 280ms linear;
    -webkit-transition:opacity 280ms linear;
    -moz-transition: opacity 280ms linear;}
.item-list .item .li-img:hover .frame-hold {background: rgba(0,0,0,0.2);}
.item-list .item .li-img:hover .frame-hold .frame{opacity: 1;}
.item-list .item .li-img h3{color: #FFF; position: absolute; bottom: 0; left: 0; padding: 15px 25px; background: #e71b24; text-transform: none; font: normal 24px/1.3em 'Roboto', sans-serif;}
.item-list .item .li-info{padding: 35px 40px 35px 460px;}
.item-list .item .li-info .li-summary{padding-bottom: 5px; font-size: 16px; line-height: 1.8em;}

/* -- Responsive YouTube Embed -- */
.video-max{ max-height:450px; overflow: hidden; margin-bottom: 20px;}
.video-container {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 800px;}
.video-container iframe, .video-container object, .video-container embed {position: absolute; top: 0; left: 0; width: 100%; height: 100%; max-height:450px;}

/*-- Responsiveness Media Queries -- */
@media (max-width: 1600px) {
    #marketing .dir-nav img{padding: 5px 0;}
    #marketing .prev-arrow{position: absolute; left: 0; top: 50%; width: 30px; margin-top: -20px; cursor: pointer; z-index: 15;}
    #marketing .next-arrow{position: absolute; right: 0; top: 50%; width: 30px; margin-top: -20px; cursor: pointer; z-index: 15;}
    #marketing .mcaption{right: 10px;}
}

@media (max-width: 1540px) {
    .container{width: 94%;}
}

@media (max-width: 1224px) {
    #header #head-right .head-icon.mobile-menu{display: block;}
    #navigation{z-index: 99;}
    #navigation .nav-hold { max-width: none; }
    #navigation .nav-hold .close-btn { display: block; position: absolute; right: 9px; top: 12px; z-index: 20; color: #212121; font-size: 40px; }
    #navigation .nav-hold .close-btn:hover{ color: #e71b24; }
    #navigation .nav-hold { background: #e0e0e0; height: 100%; width: 400px; position: fixed; z-index: 18; right: -402px; top: 0; overflow-y: auto; transition: all 550ms cubic-bezier(0.2, 1, 0.3, 1); -moz-transition: all 550ms cubic-bezier(0.2, 1, 0.3, 1); }
    #navigation .nav-hold, #navigation #nav-menu { display: block; }
    #navigation .nav-hold ul#nav-menu{padding-top: 54px; height: auto;}
    #navigation .nav-hold.active { right: 0; }
    #navigation .nav-hold ul li.level_1 { display: block; height: auto; width: 100%; }
    #navigation .nav-hold ul li.level_1 a { height: auto; display: block; padding: 15px 20px 12px; text-align: left; font-size: 20px; font-weight: bold; color: #212121; }
    #navigation .nav-hold ul li.level_1 a:hover { background: #FFF; color: #e71b24; }
    #navigation .nav-hold ul li.level_1 .subnav { background: #ededed; padding: 0; display: block; width: 100%; min-width: 0; position: static; border: none; box-shadow: 0 0 0; overflow: auto; max-height: 1000px; }
    #navigation .nav-hold ul li.level_1 .subnav li { max-height: none; }
    #navigation .nav-hold ul li.level_1 .subnav li a{background: none; color: #212121; font-size: 16px; line-height: 1em; font-weight: bold; padding: 10px 20px 10px 40px;}
    #navigation .nav-hold ul li.level_1 .subnav li a:before{content: '- '}
    #navigation .nav-hold ul li.level_1 .subnav li a:hover{ background: #FFF; color: #212121; }
    #navigation .nav-hold ul li.level_1 .subnav li.level_2 { margin-bottom: 0; }
    .page-tabs .ptab{padding: 15px 15px;}
    .page-tabs .pdetail{padding: 20px 15px 10px;}
    .gallery-hold .pg-thumbs{width: 80px;}
    .gallery-hold .pg-right{padding-left: 90px;}
    .gallery-hold .pg-right .pg-image{width: 500px; margin-right: 20px;}
    .gallery-hold .pg-right .pg-info{padding: 20px 20px 20px 520px;}
    .gallery-hold .pg-right .pg-info h1{padding-bottom: 0;}
    .gallery-hold .pg-right .pg-info .sep{margin: 8px 0 10px;}
    .comp-detail h1{padding-bottom: 0;}
    .comp-detail .sep{margin: 8px 0 10px;}
    .box-white{padding: 40px;}
}

@media (max-width: 1080px) {
    .page-tabs .ptab{padding: 10px 12px;}
    .page-tabs .pdetail{padding: 15px 12px 5px;}
    .home-intro{padding: 0 0 20px; background: none;}
    .page-tabs .ptab{padding: 15px 15px;}
    .page-tabs .pdetail{padding: 20px 15px 10px;}
    .gallery-hold .pg-thumbs{width: 60px;}
    .gallery-hold .pg-right{padding-left: 70px;}
    .gallery-hold .pg-right .pg-image{width: 420px; margin-right: 20px;}
    .gallery-hold .pg-right .pg-info{padding: 20px 20px 20px 440px;}
}

@media (max-width: 980px) {
    #content .content-left{width: 27%; float: left;}
    #content .content-right{width: 72%; float: right;}
    .row .col.split {margin-left:0; clear:both !important;}
    .row .col.split_int{margin-left: 2%;  clear: none;}
    .row .half,  .row .third_2, .row .fourth_2, .row .fourth_3, .row .fifth_3, .row .fifth_4{width:100%; margin-left:0;}
    .row .fourth, .row .third, .row .third{width:49%;}
    .row .fifth{width:32%;}
    .row .fifth_2{width:66%;}
    #footer .row .col{margin-left:0 !important; clear:both !important; width: 100% !important; float: none;}
    #footer .row .col:first-child{display:block; width: 280px !important; margin: 0 auto 15px !important;}
    #footer .row .col.right{display: none;}
    .page-tabs .ptab{padding: 10px 10px; font-size: 11px; line-height: 1em;}
    .page-tabs .pdetail{padding: 15px 10px 5px;}
    .lead-image{margin: 0 20px 5px 0;}
    .services-feature{text-align: center;}
    .services-feature .service{width: 182px; float: none; display: inline-block; border: none;}
    h1 { font: normal 30px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h2 { font: normal 24px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h3 { font: normal 20px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h4 { font: normal 18px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    .mcaption h1{font-weight: bold !important; font-size: 38px !important; line-height: 1em !important;}
    .mcaption h2{font-size: 28px !important; line-height: 1em !important;}
    .header-image h1{font-size: 38px !important; line-height: 1em !important;}
    .services-feature .service h3{font: bold 18px/1.3em 'Roboto', sans-serif !important;}
    .featured-products .prod-hold h3{font: normal 20px/1.3em 'Roboto', sans-serif !important;}
    .item-list .item .li-img h3{font: normal 20px/1.3em 'Roboto', sans-serif !important;}
    .item-list .item .li-info{padding: 25px 30px 25px 410px;}
    .item-list .item .li-info .li-summary{font-size: 14px; line-height: 1.8em;}
    .item-list .item .li-img{width: 380px;}
    .gallery-hold .pg-right .pg-image{width: 100%; max-width: 100%; margin-right: 0; margin-bottom: 20px;}
    .gallery-hold .pg-right .pg-info{padding: 20px;}
    .box-white{padding: 30px;}
}

@media (max-width: 820px) {
    .ctas-full-third .cta-third{width: 100%; height: 280px; border: 3px solid #FFF;}
    .ctas-full-third .cta-third:first-child{border-bottom: 0; }
    .ctas-full-third .cta-third:last-child{border-top: 0; }
    #marketing .panel-bg{height: 60vh; min-height: 400px;}
    #content .content-hold.home{padding-top: 735px;}
}

@media (max-width: 780px) {
    #header .container{height: 60px;}
    #header #logo { width: 180px;}
    #wrapper{margin-top: 60px;}
    #header #head-right .head-icon{font-size: 20px; line-height: 1em; margin: 22px 0 0 20px;}
    #marketing .mcaption{left: 0; right: 0; margin: -70px auto 0; display: inline-block; text-align: center; max-width: 80%;}
    #marketing .mcaption .btn{float: none; text-align: center; margin: 15px auto 0; width: 120px;}
    .item-list .item .li-img{width: 100%; position: relative; height: 480px;}
    .item-list .item .li-info{padding-left: 25px; }
}

@media (max-width: 680px) {
    .row .col{margin-left:0 !important; clear:both !important; width: 100% !important;}
    .row .third, .row .fourth{margin:10px 0;}
    .page-tabs .ptab{display: block; float: none; width: 100%; margin-right: 0;  box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; font-size: 14px;}
    .container{width: 90%;}
    .lead-image{max-width: 100%; width: 100%; margin: 0 0 15px 0;}
    .header-image .container{height: 240px;}
    h1 { font: normal 24px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h2 { font: normal 20px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h3 { font: normal 18px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h4 { font: normal 16px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    .mcaption h1{font-weight: bold !important; font-size: 30px !important; line-height: 1em !important;}
    .mcaption h2{font-size: 24px !important; line-height: 1em !important;}
    .header-image h1{font-size: 30px !important; line-height: 1em !important;}
    .services-feature .service h3{font: bold 16px/1.3em 'Roboto', sans-serif !important;}
    .featured-products .prod-hold h3{font: normal 18px/1.3em 'Roboto', sans-serif !important;}
    .item-list .item .li-img h3{font: normal 18px/1.3em 'Roboto', sans-serif !important;}
    .item-list .item .li-img{height: 380px;}
    .container{width: 96%;}
    #marketing .panel-bg{height: 60vh; min-height: 300px;}
    .box-white{padding: 20px;}
}

@media (max-width: 540px) {
    #marketing .mcaption{padding: 20px 10px; margin-top: 0;}
    .ctas-full-third {margin-top: 10px; position: static;}
    .ctas-full-third .cta-third{border: 0 !important; margin-bottom: 10px;}
    #content .content-hold.home{padding: 30px 0 0;}
    #marketing .flex-control-nav{bottom: 0;}
    .item-list .item .li-img{height: 280px;}
    .item-list .item .li-img h3{padding: 10px 20px;}
    .item-list .item .li-info{padding: 20px;}
    .gallery-hold .pg-right{padding-left: 0; float: none; clear: both;}
    .gallery-hold .prod-gallery{position: relative; padding: 0 0 20px; margin-top: 10px;}
    .gallery-hold .pg-thumbs{position: absolute; top:5px; left: 5px; z-index: 5; width: 50px;}
    .gallery-hold .pg-thumbs .thumb{border: 1px solid #eee; margin-bottom: 5px;}
    .gallery-hold .pg-thumbs .thumb:hover{border: 1px solid #e71b24;}
    .gallery-hold .pg-thumbs .thumb.active{border: 1px solid #e71b24;}
}

@media (max-width: 420px) {
    #navigation .nav-hold {height: 100%; width: 100%; right: -100%;}
    #header{position: relative;}
    #wrapper {margin-top: 0;}
    #header #logo{left: 50%; margin-left: -90px;}
    #header .container {height: 100px;}
    #header #head-right{width: 100%; height: auto;}
    #header #head-right .head-icon {margin: 10px 0 0 20px;}
    #header #head-right .head-icon.si{float: left; margin: 10px 20px 0 0;}
    h1 { font: normal 22px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h2 { font: normal 18px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h3 { font: normal 16px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    h4 { font: normal 14px/1.3em 'Roboto Condensed', sans-serif !important; text-transform: uppercase;}
    body{ font: normal 12px/1.8em 'Roboto', sans-serif; color: #212121; background: #EEE;}
    .mcaption h1{font-weight: bold !important; font-size: 26px !important; line-height: 1em !important;}
    .mcaption h2{font-size: 20px !important; line-height: 1em !important;}
    .header-image h1{font-size: 26px !important; line-height: 1em !important;}
    .services-feature .service h3{font: bold 16px/1.3em 'Roboto', sans-serif !important;}
    .featured-products .prod-hold h3{font: normal 16px/1.3em 'Roboto', sans-serif !important;}
    .item-list .item .li-img h3{font: normal 16px/1.3em 'Roboto', sans-serif !important;}
    .item-list .item .li-img{height: 220px;}
    .item-list .item .li-info .li-summary{font-size: 12px; line-height: 1.8em;}
    .container{width: 94%;}
    #marketing .dir-nav{display: none;}
    .box-white{padding: 15px;}
}