/* Theme Name: Wolseley Industrial Description: Wolseley Industrial website Author: Chris Steman Version: 2 */ /* default -------------------------------------------------------------------------------*/ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section {display: block;} /* Responsive images and other embedded objects Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */ img, object, embed {width: 100%; height:auto} /* force a vertical scrollbar to prevent a jumpy page */ html {overflow-y: scroll;} /* we use a lot of ULs that aren't bulleted. don't forget to restore the bullets within content. */ ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;} a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#666; text-decoration:none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } a:hover{ text-decoration:none;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} /* tables still need cellspacing="0" in the markup */ table {border-collapse: collapse; border-spacing: 0;} th {font-weight: bold; vertical-align: bottom;} td {font-weight: normal; vertical-align: top;} h1,h2,h3,h4,h5,h6{ font-weight:400} hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} input, select {vertical-align: middle;} pre { white-space: pre; /* CSS2 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ word-wrap: break-word; /* IE */ } input[type="radio"] {vertical-align: text-bottom;} input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} .ie6 input {vertical-align: text-bottom;} select, input, textarea {font: 99% sans-serif;} table {font-size: inherit; font: 100%;} /* Accessible focus treatment people.opera.com/patrickl/experiments/keyboard/test */ a:hover, a:active {outline: none;} small {font-size: 85%;} strong, th {font-weight: bold;} td, td img {vertical-align: top;} /* Make sure sup and sub don't screw with your line-heights gist.github.com/413930 */ sub, sup {font-size: 75%; line-height: 0; position: relative;} sup {top: -0.5em;} sub {bottom: -0.25em;} /* standardize any monospaced elements */ pre, code, kbd, samp {font-family: monospace, sans-serif;} /* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;} /* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin: 0;} /* make buttons play nice in IE */ button {width: auto; overflow: visible;} /* scale images in IE7 more attractively */ .ie7 img {-ms-interpolation-mode: bicubic;} /* prevent BG image flicker upon hover */ .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} /* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; } .clear { clear: both; } .hide { display: none; } img { display: block; } img.no-resize { width: auto; } .alignleft { float: left; width: auto; margin: 0 10px 10px 0; } .alignright { float: right; width: auto; margin: 0 0 10px 10px; } .loader { background: url(images/loader.gif) center center no-repeat !important; } .mobile-hide { display: block; } .mobile-show { display: none; } /*** grid ***/ /*** site styles ***/ html, BODY { height: 100%; } BODY { background: #e03127; font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.4; color: #3b3b3b; text-align: center; } h1, h2, h3, h4, h5, h6 { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: bold; font-size: 48px; line-height: 1.3; letter-spacing: 1; color: #3b3b3b; margin: 0; padding: 0 0 20px; } h3:last-of-type, h4:last-of-type { padding-bottom: 0; } h3:last-of-type + div, h4:last-of-type + div, h3:last-of-type + p, h4:last-of-type + p { padding-top: 25px; } p { padding: 0 0 30px; } p:last-of-type { padding-bottom: 0; } a { color: #3b3b3b; text-decoration: none; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } a:hover { color: #e12f29; text-decoration: none; } a.tel, a.tel:hover { cursor: default; color: #3b3b3b !important; } .site-wrapper { position: relative; display: block; width: 100%; overflow: hidden; background: #fff; } .header-wrapper { position: relative; display: block; width: 100%; z-index: 200; } #header { position: relative; display: block; width: 100%; padding: 30px 50px; margin: 0 auto; text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; } .logo { position: absolute; display: block; width: 400px; z-index: 99; } .logo img { position: relative; display: block; width: 100%; height: auto; } .logo h1, .logo h2 { text-indent: -9999px; overflow: hidden; font-size: 1px; } .logo .logo-alt { display: none; } .header-right { position: relative; display: block; width: 100%; padding: 0 0 0 400px; box-sizing: border-box; -moz-box-sizing: border-box; } .top-menu { position: relative; display: block; margin: 0 0 20px; } .top-menu .maple-leaf { position: relative; display: none; width: 25px; height: 25px; float: left; margin: 0 15px 0 0; } .top-menu ul { margin: 0; padding: 0; float: right; } .top-menu ul li { list-style-type: none; margin: 0 0 0 10px; padding: 0; float: left; white-space: nowrap; } .top-menu ul li:before { content: '|'; padding: 0 10px 0 0; white-space: nowrap; font-size: 18px; } .top-menu ul li:first-child:before { content: ''; } .top-menu ul li a { color: #3b3b3b; font-size: 18px; } .top-menu ul li a:hover, .menu ul li a.active { color: #e12f29; } .header-wrapper #header .header-menu { position: relative; display: block; text-align: left; float: left; padding: 20px 0 0 50px; } .header-wrapper #header .header-menu ul.menu { position: relative; display: inline-block; margin: 0; padding: 0; z-index: 100; float: right; } .header-wrapper #header .header-menu ul.menu li { position: relative; margin: 0 0 0 25px; padding: 0; float: left; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } .header-wrapper #header .header-menu ul.menu li:first-of-type { margin-left: 0; } .header-wrapper #header .header-menu ul.menu li a { position: relative; color: #3b3b3b; line-height: 1; font-size: 19px; font-weight: bold; } .header-wrapper #header .header-menu ul.menu li a:hover, .header-wrapper #header .header-menu ul.menu li.current-menu-item > a, .header-wrapper #header .header-menu ul.menu li.current-menu-ancestor > a { color: #e12f29; } .header-wrapper #header .header-menu ul.menu li.current-menu-item.menu-item-object-custom > a { color: #e12f29; } .header-wrapper #header .header-menu ul.menu ul { position: absolute; display: none; } .header-wrapper #header .header-menu ul.menu li:hover ul { display: block; padding: 5px 10px 10px; margin: 0; background: rgba(227, 227, 227, .9); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .header-wrapper #header .header-menu ul.menu li:hover ul ul { display: none; top: 0; left: 100%; border-left: 1px solid #ccc; } .header-wrapper #header .header-menu ul.menu ul li { display: block; width: auto; padding: 10px 0; margin: 0; float: none; line-height: normal; border-bottom: 1px solid #5a5b5d; } .header-wrapper #header .header-menu ul.menu ul li:last-child { border-bottom: none; } .header-wrapper #header .header-menu ul.menu ul li a { display: block; width: 210px; font-size: 16px; padding: 0; margin: 0; font-weight: 300; color: #5a5b5d; text-align: left; line-height: 1.1; box-sizing: border-box; -moz-box-sizing: border-box; text-transform: uppercase; } .header-wrapper #header .header-menu ul.menu ul li a:hover, .header-wrapper #header .header-menu ul.menu ul li.current-menu-item a { color: #e03127; } .header-wrapper #header .header-menu ul.menu li ul li:hover ul { display: block; } .search-bar { position: relative; display: block; float: right; padding: 0; margin: 0 0 0 20px; } .search-bar .maple-leaf { position: relative; display: block; width: 35px; height: 35px; float: left; margin: 0 20px 0 0; padding: 5px 0 0; } .search-bar .search-form { position: relative; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #e3e3e3; overflow: hidden; } .search-bar input[type='text'] { width: 220px; font-family: Helvetica, Arial, sans-serif; color: #3b3b3b; font-size: 18px; background: none; border: none; padding: 12px 10px; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; } .search-bar input[type='submit'] { display: inline-block; width: 35px; height: 35px; background: url(images/search-pad.svg) no-repeat #e3e3e3; text-indent: -9999px; overflow: hidden; border: none; box-sizing: border-box; -moz-box-sizing: border-box; } .flyout { position: relative; display: none; text-align: right; z-index: 9999; margin: 0; float: right; padding: 0; margin-top: -20px; font-size: 46px; } .flyout a, .flyout a.icon-menu { position: relative; color: #e12f29; text-decoration: none; margin: 0; } .flyout a:hover, .flyout a.icon-menu:hover { color: #3b3b3b; } #flyout-menu { position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100%; padding: 55px 20px; background: #fff; text-align: left; overflow: auto; box-sizing: border-box; -moz-box-sizing: border-box; z-index: 99999; } #flyout-menu .flyout-header { position: relative; display: block; height: 100px; z-index: 100; } #flyout-menu a.close-btn { position: relative; font-size: 46px; color: #e12f29; float: right; } #flyout-menu a.close-btn:hover { color: #3b3b3b; } #flyout-menu ul { margin: 0; padding: 0; } #flyout-menu ul ul { display: none; } #flyout-menu li { margin: 0; padding: 0; display: block; text-align: right; } #flyout-menu li a { display: block; padding: 10px 0; font-size: 24px; font-weight: bold; color: #3b3b3b; line-height: 1.2; text-decoration: none; box-sizing: border-box; -moz-box-sizing: border-box; } #flyout-menu li a:hover { color: #e12f29; text-decoration: none; } #flyout-menu li li a { font-size: 18px; text-transform: none; padding: 8px 20px; } #flyout-menu li .pop-up { display: none; } #flyout-menu #flyout-menu-main, #flyout-menu #flyout-menu-sub, #flyout-menu #flyout-menu-sub-sub { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 55px 20px; background: #fff; box-sizing: border-box; -moz-box-sizing: border-box; z-index: 80; text-align: right; } #flyout-menu #flyout-menu-sub, #flyout-menu #flyout-menu-sub-sub { display: none; padding-top: 145px; z-index: 90; } #flyout-menu .top { position: relative; display: block; margin: 0 0 10px; } #flyout-menu .bottom { position: relative; display: block; padding: 10px 0 0; } #flyout-menu .bottom li a { font-size: 16px; } #flyout-menu #flyout-menu-sub a { color: #e12f29; font-size: 30px; font-weight: bold; } #flyout-menu #flyout-menu-sub a:hover { color: #3b3b3b; } #flyout-menu #flyout-menu-sub ul { position: relative; display: none; margin-top: 10px; padding-top: 10px; } #flyout-menu #flyout-menu-sub li a { font-size: 24px; color: #3b3b3b; } #flyout-menu #flyout-menu-sub li a:hover { color: #e12f29; } #flyout-menu #flyout-menu-sub ul ul { display: none; } #flyout-menu .search-bar { display: block; float: left; margin-left: 0; padding-top: 0; } #flyout-menu .search-bar .search-form { -webkit-box-shadow: -1px 1px 5px 0px rgba(0,0,0,.2); -moz-box-shadow: -1px 1px 5px 0px rgba(0,0,0,.2); box-shadow: -1px 1px 5px 0px rgba(0,0,0,.2); background: #fff; border: 5px solid #e3e3e3; } #flyout-menu .search-bar input[type="submit"] { background-color: #fff; } .content-wrap { position: relative; display: block; margin: 0 auto; width: 100%; max-width: 1440px; padding: 70px 30px 100px 20px; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrap .content-side { position: relative; display: block; width: 24%; float: left; text-align: left; padding-top: 5px; } .content-wrap .content-side a.mobile-side { display: none; font-size: 50px; color: #de3227; } .content-wrap .content-side a.mobile-side:hover { color: #3b3b3b; } .content-wrap .content-side h2 { font-size: 30px; } .content-wrap .content-side ul { margin: 0; padding: 0; } .content-wrap .content-side ul li { list-style-type: none; margin: 0 0 10px; padding: 0; } .content-wrap .content-side ul li a { font-size: 22px; } .content-wrap .content-side ul li a:hover { font-weight: bold; color: #3b3b3b; } .content-wrap .content-side ul li.current-menu-item a { font-weight: bold; color: #de3227; } .content-wrap .content-side ul li li { padding-top: 10px; } .content-wrap .content-side ul li.current-menu-item li a { font-weight: normal; color: #3b3b3b; } .content-wrap .content-side ul li.current-menu-item li a:hover { font-weight: bold; color: #3b3b3b; } .content-wrap .content-side ul li:last-child { margin-bottom: 0; } .content-wrap .content-side .content-side-inner { position: relative; display: block; } .content-wrap .content-side .content-side-inner ul.sub-menu { padding-left: 10px; } .content-wrap .content-side .content-side-inner ul.sub-menu li a { font-size: 17px; } .content-wrap .content-side .content-side-inner ul.sub-menu ul.sub-menu li a { font-size: 15px; } .content-wrap .content-main { position: relative; display: block; width: 75%; float: right; text-align: left; margin: -15px 0 0; } .home .content-wrap .content-main { width: 100%; float: none; margin: 0; } .content-wrapper { position: relative; display: block; margin: 0 0 35px; overflow: hidden; box-sizing: border-box; -moz-box-sizing: border-box; } .page-template-page-locations .content-wrapper { max-width: 960px; } .content-wrapper:last-child { margin-bottom: 0; } .content-wrapper.content-border { border: 1px solid #656565; } .content-wrapper.content-title { margin-bottom: 0; } .content-wrapper img { width: auto; max-width: 100%; height: auto; } .content-wrapper .content-row-content { position: relative; display: block; } .content-wrapper h2, .content-wrapper .content-row-content h2 { font-size: 32px; } .content-wrapper h3, .content-wrapper .content-row-content h3 { font-size: 20px; } .content-wrapper .content-row-content a { color: #de3227; } .content-wrapper .content-row-content a:hover { color: #3b3b3b; } .content-wrapper .content-row-content ul, .content-wrapper .content-row-content ol { margin: 0 0 35px; padding: 0; } .content-wrapper .content-row-content ul:last-child, .content-wrapper .content-row-content ol:last-child { margin-bottom: 0; } .content-wrapper .content-row-content li { margin: 0 0 10px 35px; list-style-type: none; } .content-wrapper .content-row-content li:last-child { margin-bottom: 0; } .content-wrapper .content-row-content p:last-of-type + ul, .content-wrapper .content-row-content p:last-of-type + ol { padding-top: 25px; } .content-wrapper.content-text .content { max-width: 980px; } .content-wrapper.content-news-featured { } .content-wrapper.content-news-featured .content-row-content { margin-left: -30px; } .content-wrapper.content-news-featured .content-row-content p { padding-bottom: 10px; } .content-wrapper.content-news-featured .news-box { position: relative; display: block; width: 25%; float: left; padding: 0 0 0 30px; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-news-featured .news-box:nth-child(4n+1) { clear: both; } .content-wrapper.content-news-featured .news-box a { color: #5a5b5d; } .content-wrapper.content-news-featured .news-box a .news-img { display: block; overflow: hidden; border: 1px solid #f4f4f4; margin: 0 0 20px; text-align: center; } .content-wrapper.content-news-featured .news-box a img { width: auto; height: 220px; max-width: none; box-sizing: border-box; -moz-box-sizing: border-box; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; margin: 0 auto; } .content-wrapper.content-news-featured .news-box a .news-box-text { position: relative; display: block; background: #f4f4f4; padding: 10px; font-size: 16px; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } .content-wrapper.content-news-featured .news-box a .news-box-text strong { font-size: 18px; } .content-wrapper.content-news-featured .news-box a:hover { color: #5a5b5d; } .content-wrapper.content-news-featured .news-box a:hover img { border-color: #e3e3e3; } .content-wrapper.content-news-featured .news-box a:hover .news-box-text { background: #e3e3e3; } .content-wrapper.content-news-featured .content-row-content p.read-more { width: 100%; text-align: right; padding-top: 15px; } .content-wrapper.content-news-featured .content-row-content p.read-more a { color: #3b3b3b; font-weight: bold; } .content-wrapper.content-news-featured .content-row-content p.read-more a:hover { color: #de3227; } .content-wrapper.content-map img { margin: -410px 0 -10px; } .content-wrapper.content-map .content-map-icons { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; } .content-wrapper.content-map .content-map-icons a { position: absolute; display: inline-block; font-size: 11px; z-index: 10; } .content-wrapper.content-map .content-map-icons a:before { position: relative; display: block; width: 20px; height: 25px; content: ''; background: url(images/map-marker.svg) no-repeat; margin: 0 5px 0 0; float: left; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } .content-wrapper.content-map .content-map-icons a .icon-name { position: relative; display: block; background: #fff; color: #656565; padding: 3px 5px 3px 5px; text-transform: uppercase; line-height: 1; float: right; } .content-wrapper.content-map .content-map-icons a .icon-name:before { position: absolute; top: 0; left: -6px; display: block; width: 6px; height: 25px; content: ''; background: url(images/location-name.svg) no-repeat; } .content-wrapper.content-map .content-map-icons a .icon-desc { position: relative; display: none; background: #fff; color: #656565; padding: 3px 5px 3px 5px; float: right; } .content-wrapper.content-map .content-map-icons a .icon-desc:before { position: absolute; top: 0; left: -9px; display: block; width: 62px; height: 59px; content: ''; background: url(images/location-open.svg) no-repeat; } .content-wrapper.content-map .content-map-icons a .icon-desc .desc-name { position: relative; display: block; color: #e03026; } .content-wrapper.content-map .content-map-icons a .icon-desc .desc-content { position: relative; display: block; padding: 5px 0 0; } .content-wrapper.content-map .content-map-icons a.left:before { float: right; margin: 0 0 0 5px; } .content-wrapper.content-map .content-map-icons a.left .icon-name { position: absolute; left: -70px; width: 60px; } .content-wrapper.content-map .content-map-icons a.left .icon-name:before { background: url(images/location-name-alt.svg) no-repeat; left: auto; right: -6px; } .content-wrapper.content-map .content-map-icons a.left .icon-desc { position: absolute; left: -140px; width: 130px; } .content-wrapper.content-map .content-map-icons a.left .icon-desc:before { background: url(images/location-open-alt.svg) no-repeat; left: auto; right: -61px; } .content-wrapper.content-map .content-map-icons a:hover { z-index: 99; } .content-wrapper.content-map .content-map-icons a:hover:before { width: 30px; height: 35px; } .content-wrapper.content-map .content-map-icons a:hover .icon-name { display: none; } .content-wrapper.content-map .content-map-icons a:hover .icon-desc { display: block; } .content-wrapper.content-locations { font-size: 16px; margin-bottom: 20px; } .content-wrapper.content-locations:last-child { margin-bottom: 0; } .content-wrapper.content-locations h3 { font-weight: normal; text-transform: uppercase; font-size: 40px; color: #e03026; margin: 0 0 20px; padding: 0; } .content-wrapper.content-locations h4 { text-transform: uppercase; font-size: 18px; color: #e03026; margin: 0; padding: 0; } .content-wrapper.content-locations a.location-show { display: none; font-size: 50px; color: #de3227; float: right; margin-top: -10px; } .content-wrapper.content-locations a.location-show:hover { color: #3b3b3b; } .content-wrapper.content-locations .show a.location-show { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4); } .content-wrapper.content-locations .content-row-content { margin: -30px 0 30px -30px; } .content-wrapper.content-locations .content-location { position: relative; display: block; width: 25%; float: left; padding: 30px 0 0 30px; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-locations .content-location a.toll-free { display: inline-block; margin-bottom: 10px; color: #e03026; } .content-wrapper.content-locations .content-location a.toll-free:hover { color: #e03026; } .content-wrapper.content-locations .content-location:nth-child(4n+1) { clear: both; } .content-wrapper.content-image {} .content-wrapper.content-image .content { max-width: 800px; max-height: 350px; overflow: hidden; } .content-wrapper.content-image.content-image-overlay .content { max-width: 1075px; max-height: 290px; } .content-wrapper.content-image .image-content { position: absolute; top: 0; right: 0; display: block; width: 70%; height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-image .image-content div { position: relative; display: block; color: #fff; font-weight: bold; font-size: 23px; line-height: 1.2; padding: 60px 20px 0 85px; z-index: 99; } .content-wrapper.content-image .image-content:before { position: absolute; bottom: -261px; left: -193px; display: block; width: 340px; height: 340px; content: ''; background: rgba(90, 91, 93, .55); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); z-index: 1; } .content-wrapper.content-image .image-content:after { position: absolute; top: -230%; left: 0; display: block; width: 130%; height: 400%; content: ''; background: rgba(205, 46, 49, .7); -ms-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); z-index: 1; } .content-wrapper.content-gallery { overflow: visible; max-width: 850px; } .content-wrapper.content-gallery .gallery-main { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; } .content-wrapper.content-gallery .gallery-main .new { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; } .content-wrapper.content-gallery .gallery-main img { max-height: 370px; max-width: 850px; } .content-wrapper.content-gallery .gallery-thumb-wrapper { position: relative; display: block; padding: 20px 0 0; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-gallery .gallery-thumb-outer-wrapper { position: relative; display: block; width: 100%; box-sizing: border-box; -moz-box-sizing: border-box; overflow: hidden; } .content-wrapper.content-gallery .gallery-thumb-inner-wrapper { position: relative; display: block; width: 10000px; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-gallery .gallery-thumbs { position: relative; display: block; margin: 0 -10px; } .content-wrapper.content-gallery .gallery-thumbs .gallery-thumb { position: relative; display: block; width: 200px; float: left; padding: 0 10px; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-gallery .gallery-thumbs .gallery-thumb .hide { display: none; } .content-wrapper.content-gallery .gallery-thumbs .gallery-thumb a { display: block; border: 1px solid #fff; } .content-wrapper.content-gallery .gallery-thumbs .gallery-thumb a:hover { border-color: #cd2e31; } .content-wrapper.content-gallery .gallery-thumb-wrapper a.gallery-left { position: absolute; top: 50%; left: -30px; font-size: 60px; margin-top: -30px; color: #cd2e31; } .content-wrapper.content-gallery .gallery-thumb-wrapper a.gallery-right { position: absolute; top: 50%; right: -30px; font-size: 60px; margin-top: -30px; color: #cd2e31; } .content-wrapper.content-gallery .gallery-thumb-wrapper a:hover { color: #3b3b3b; } .content-wrapper.content-gallery .gallery-pager-wrapper { position: relative; display: none; text-align: center; padding: 10px 0 0; } .content-wrapper.content-gallery .gallery-pager { position: relative; display: inline-block; margin: 0 auto; } .content-wrapper.content-gallery .gallery-pager span { font-size: 60px; line-height: 1; color: #e3e3e3; margin: 0 5px; cursor: pointer; } .content-wrapper.content-gallery .gallery-pager span.cycle-pager-active { color: #5a5b5d; } .content-wrapper.content-column {} .content-wrapper.content-column .content-row-content { margin: 0 0 0 -40px; } .content-wrapper.content-column .content-col { position: relative; display: block; width: 50%; float: left; padding: 0 0 0 40px; box-sizing: border-box; -moz-box-sizing: border-box; } .content-wrapper.content-column .content-col:nth-child(2n+1) { clear: both; } .content-wrapper.content-column .content-col h3 { font-size: 20px; } .content-wrapper.content-column .content-col .content-col-row-content { position: relative; display: block; } .side-menu-box { position: relative; display: block; padding: 40px 0 0; } .side-menu-box h3 { font-size: 20px; padding-bottom: 5px; } .side-menu-box .side-menu-products { position: relative; display: block; height: 155px; border-top: 3px solid #e3e3e3; border-bottom: 3px solid #e3e3e3; box-sizing: border-box; -moz-box-sizing: border-box; overflow: auto; padding-top: 0; } .content-wrap .content-side .side-menu-box .side-menu-products ul { margin: 0; padding: 0; } .content-wrap .content-side .side-menu-box .side-menu-products li { margin: 0; padding: 0; } .content-wrap .content-side .side-menu-box .side-menu-products li a { display: block; font-size: 20px; padding: 5px 10px 5px 0; } .content-wrap .content-side .side-menu-box .side-menu-products li a:hover { font-weight: normal; color: #de3227; } .content-wrap .content-side .side-menu-box .side-menu-products li a.na, .content-wrap .content-side .side-menu-box .side-menu-products li a.na:hover { cursor: default; color: #a5a6a6; } .side-menu-box .side-menu-products li a .checkbox { display: inline-block; width: 20px; height: 20px; background: #e3e3e3; margin: 2px 10px 0 0; overflow: hidden; float: left; box-sizing: border-box; -moz-box-sizing: border-box; } .side-menu-box .side-menu-products li a .checkbox.icon-check { color: #5a5b5d; line-height: 1; font-size: 20px; padding-left: 3px; } .content-wrapper.content-manufacturer { margin-bottom: 45px; } .content-wrapper .content-row-content .content-row-content-side { position: relative; display: block; width: 26%; float: left; } .content-wrapper .content-row-content .content-row-content-side h3 { text-align: right; } .content-wrapper .content-row-content .content-row-content-side h3 a { color: #3b3b3b; } .content-wrapper .content-row-content .content-row-content-side h3 a:hover { color: #de3227; } .content-wrapper .content-row-content .content-row-content-side img { max-height: 70px; float: right; } .content-wrapper .content-row-content .content-row-content-text { position: relative; display: block; width: 70%; float: right; } .content-wrapper.content-manufacturer-none { display: none; } .content-wrapper.content-parallax { padding: 100px 0; overflow: visible; } .content-wrapper.content-parallax .content-wrap { position: relative; display: block; padding: 50px 20px; z-index: 99; } .content-wrapper.content-parallax .content { position: relative; display: block; margin: 0 auto; max-width: 1400px; } .content-wrapper.content-parallax .parallax-bg { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; z-index: 10; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); overflow: hidden; } .content-wrapper.content-parallax.header-banner { top: -151px; padding-top: 151px; margin-bottom: -101px; } .content-wrapper.content-parallax.header-banner .content-wrap { background: rgba(227, 227, 227, .5); } .content-wrapper.content-parallax.header-banner img.logo-alt { max-width: 1150px; width: 100%; } .content-wrapper.content-parallax.header-banner h4:last-of-type + p { padding-top: 0; } .content-wrapper.content-parallax.header-banner p { font-size: 24px; } .content-wrapper.content-parallax.banner-padding { padding-top: 0; padding-bottom: 0; } .content-wrapper.content-parallax.banner-padding .content-wrap { padding-top: 0; padding-bottom: 0; } .content-wrapper.content-parallax.banner-padding .parallax-bg { margin-top: 65px; height: 80%; } .home .content-wrap { max-width: none; padding-top: 0; padding-left: 0; padding-right: 0; } .home .content-wrapper { max-width: 1440px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto; } .home .content-wrapper.content-parallax { max-width: none; padding-left: 0; padding-right: 0; } .home .content-wrapper.content-parallax img { max-width: none; width: 100%; } .alert-wrapper { position: relative; display: block; background: #e03127; padding: 20px 20px 30px; } .alert-wrapper .alert-content { position: relative; display: block; width: 100%; max-width: 960px; margin: 0 auto; color: #000; text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; } .alert-wrapper .alert-content strong.alert-title { color: #fff; text-transform: uppercase; } .alert-wrapper .alert-content p { padding-bottom: 20px; } .alert-wrapper .alert-content p:last-of-type { padding-bottom: 0; } .alert-wrapper .alert-content .alert-link { text-align: left; } .alert-wrapper .alert-content a { color: #000; border: 2px solid #fff; background: #fff; border-radius: 50px; padding: 5px 20px; font-size: 16px; } .alert-wrapper .alert-content a:hover { color: #fff; background: #e03127; } .wpcf7 { padding: 0; margin: 0 0 30px; } .wpcf7-form p { width: auto; padding: 0 0 20px; } .wpcf7-form .field { position: relative; display: block; padding: 15px 20px 10px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background: #e3e3e3; overflow: hidden; } .wpcf7-form .field span { display: block; border: none; background: none; } .wpcf7-form .field.submit-btn { margin-left: 12.857143%; } .wpcf7-form input, .wpcf7-form textarea { font-family: Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; color: #404041; } .wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form textarea { width: 100%; border: none; outline: 0; padding: 0; margin: 0; background: none; line-height: 1; } .wpcf7-form textarea { height: 100px; } .wpcf7-form input.wpcf7-submit { color: #fff; font-family: Helvetica, Arial, sans-serif; font-weight: 300; font-size: 18px; padding: 12px 20px 8px; outline: 0; border: none; background: #E31B23; text-transform: uppercase; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; transition: all .4s; -moz-transition: all .4s; -webkit-transition: all .4s; -o-transition: all .4s; } .wpcf7-form input.wpcf7-submit:hover { color: #fff; background: #3b3b3b; } .wpcf7-form img { width: auto; } .wpcf7 .ajax-loader { float: right; } .wpcf7 div.wpcf7-validation-errors { background: #E31B23; border: none; color: #FFFFFF; font-size: 18px; padding: 4px 10px 4px; margin: 20px 0 0; } .wpcf7 div.wpcf7-response-output { margin-top: 0; } .wpcf7-form .field span.wpcf7-not-valid-tip { background: #E31B23; color: #fff; padding: 4px 10px; } .wpcf7-form .field-city { width: 1px !important; height: 1px; overflow: hidden; color: #fff; } #footer-wrapper { position: relative; display: block; width: 100%; } #footer { position: relative; display: block; width: 100%; padding: 30px 50px; margin: 0 auto; text-align: left; box-sizing: border-box; -moz-box-sizing: border-box; } #footer .footer-left { position: relative; display: block; width: 50%; float: left; } #footer .footer-right { position: relative; display: block; width: 50%; float: right; text-align: right; color: #e3e3e3; font-weight: bold; } #footer .footer-left ul { margin: 0; padding: 0; } #footer .footer-left ul li { margin: 0 15px 0 0; padding: 0; float: left; } #footer .footer-left ul li:last-child { margin-right: 0; } #footer .footer-left ul li a { display: block; padding: 15px 0; width: 60px; font-size: 20px; text-align: center; color: #e3e3e3; border: 4px solid #e3e3e3; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } #footer .footer-left ul li a:hover { color: #fff; border-color: #fff; } #footer .footer-menu { position: relative; display: block; padding: 10px 0 0; text-align: right; } #footer .footer-menu ul { margin: 0; padding: 0; } #footer .footer-menu ul li { list-style-type: none; display: inline-block; margin: 0 15px 0 0; padding: 0; } #footer .footer-menu ul li:after { display: inline-block; content: '|'; margin: 0 0 0 17px; color: #e3e3e3; font-weight: bold; } #footer .footer-menu ul li:last-child { margin-right: 0; } #footer .footer-menu ul li:last-child:after { display: none; } #footer .footer-menu ul li a { color: #e3e3e3; font-weight: bold; } #footer .footer-menu ul li a:hover, .menu ul li a.active { color: #fff; } .side-arrow { background: url(images/side-arrow.png) left center no-repeat; padding-left: 16px; } .grecaptcha-badge { display: none !important; } .page-template-page-locations .grecaptcha-badge { display: block !important; } @viewport { width: auto; } @media only screen and (max-width: 1640px) { .logo { width: 350px; padding-top: 10px; } .header-right { padding-left: 350px; } .top-menu ul li a { font-size: 17px; } .header-wrapper #header .header-menu ul.menu li a { font-size: 19px; } .search-bar input[type="text"] { width: 180px; } .content-wrapper.content-image .image-content::before { left: -193px; } } @media only screen and (max-width: 1500px) { #header { padding-left: 20px; padding-right: 20px; } .logo { width: 300px; padding-top: 20px; } .header-right { padding-left: 300px; } .search-bar input[type="text"] { width: 150px; } .header-wrapper #header .header-menu ul.menu li { margin-left: 20px; } .header-wrapper #header .header-menu ul.menu li a { font-size: 18px; } .header-wrapper #header .header-menu ul.menu ul li a { font-size: 14px; } h1 { font-size: 40px; } .content-wrap .content-side h2 { font-size: 28px; } .content-wrap .content-side ul li a { font-size: 22px; } .footer-right { font-size: 16px; } } @media only screen and (max-width: 1340px) { .logo { padding-top: 0; } .header-right { padding-left: 0; } .top-menu { margin: 0 0 10px; } .header-wrapper #header .header-menu { padding: 30px 0 0 0; } .header-wrapper #header .header-menu ul.menu li a { font-size: 20px; } .search-bar { padding-top: 10px; } .search-bar input[type="text"] { width: 200px; } .content-wrapper.content-image .image-content::before { left: -205px; } .content-wrapper.content-map { display: none; } } @media only screen and (max-width: 1200px) { .logo { width: 260px; } .top-menu ul { display: none; } #flyout-menu .search-bar .search-form { display: block; } .search-bar { display: none; } .header-wrapper #header .header-menu ul.menu { display: none; } .flyout { display: block; } .header-right { z-index: 100; } .header-wrapper #header .header-menu { float: right; padding: 0; } } @media only screen and (max-width: 1040px) { h4 { font-size: 34px; } .logo { width: 400px; padding-top: 40px; } .logo img { display: none; } .logo .logo-alt, .logo .logo-alt img, .top-menu .maple-leaf { display: block; } .search-bar input[type="text"] { width: 150px; } #flyout-menu .search-bar .search-form { display: block; } .top-menu ul { float: none; } .top-menu ul li:first-child { margin-left: 0; } .top-menu ul li:first-child:before { display: none; } .header-wrapper #header .header-menu ul.menu { display: none; } .header-right { z-index: 100; } .content-wrap { padding-right: 20px; } .search .content-wrap { padding-top: 30px; } .content-wrap .content-side { position: absolute; top: -20px; left: 20px; width: auto; padding: 20px 20px 20px 45px; z-index: 999; background: #fff; } .search .content-wrap .content-side { display: none; } .content-wrap .content-side a.mobile-side { position: absolute; top: 0; left: 10px; display: block; } .content-wrap .content-side h2 { font-size: 22px; } .content-wrap .content-side .content-side-inner, .search-bar { display: none; } .flyout { display: block; } .header-wrapper #header .header-menu { float: right; padding: 0; } .content-wrap .content-side:hover { -webkit-box-shadow: -1px 1px 5px 0px rgba(0,0,0,.2); -moz-box-shadow: -1px 1px 5px 0px rgba(0,0,0,.2); box-shadow: -1px 1px 5px 0px rgba(0,0,0,.2); } .content-wrap .content-side:hover a.mobile-side { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=4); } .content-wrap .content-side:hover .content-side-inner { display: block; } .content-wrap .content-main { width: 100%; float: none; } .content-wrapper.content-image .image-content div { font-size: 20px; padding-top: 30px; } .content-wrapper.content-image .image-content::before { left: -198px; } .content-wrapper.content-gallery .gallery-thumb-outer-wrapper { width: 95%; margin: 0 auto; } .content-wrapper.content-gallery .gallery-thumb-wrapper a.gallery-left { left: -10px; } .content-wrapper.content-gallery .gallery-thumb-wrapper a.gallery-right { right: -10px; } .content-wrapper.content-parallax.header-banner { top: 0; padding-top: 100px; margin-bottom: 40px; } .content-wrapper.content-parallax.header-banner p { font-size: 22px; } .content-wrapper.content-parallax.banner-padding .parallax-bg { margin-top: 55px; } .content-wrapper.content-locations a.location-show { display: block; } .content-wrapper.content-locations h3:hover { color: #3b3b3b; } .content-wrapper.content-locations .content-row-content { display: none; } .content-wrapper.content-locations .show .content-row-content { display: block; } #footer { padding: 0; text-align: center; } #footer .footer-left { padding: 0 20px 50px; width: auto; background: #fff; float: none; } #footer .footer-left ul { margin: 0 auto; } #footer .footer-left ul li { display: inline-block; float: none; } #footer .footer-left ul li a:hover { color: #E31B23; border-color: #E31B23; } #footer .footer-right { padding: 20px; width: auto; float: none; text-align: center; } #footer .footer-menu { text-align: center; } } @media only screen and (max-width: 800px) { .content-wrapper.content-news-featured .content-row-content { margin-top: -50px; } .content-wrapper.content-news-featured .news-box { width: 50%; padding-top: 50px; } .content-wrapper.content-news-featured .news-box:nth-child(2n+1) { clear: both; } .content-wrapper.content-news-featured .news-box a img { height: auto; width: 100%; } .content-wrapper.content-locations .content-location { width: 50%; } .content-wrapper.content-locations .content-location:nth-child(2n+1) { clear: both; } .content-wrapper.content-parallax.banner-padding .parallax-bg { margin-top: 45px; } .content-wrapper.content-gallery .gallery-main img { max-height: 300px; } .content-wrapper.content-image .image-content::before { left: -216px; bottom: -281px; } } @media only screen and (max-width: 667px) { h1 { font-size: 36px; } h4 { font-size: 28px; } .content-wrapper h2, .content-wrapper .content-row-content h2 { font-size: 30px; } .content-wrapper.content-image .image-content { position: relative; top: auto; left: auto; width: 100%; height: auto; background: rgba(205, 46, 49, 1); } .content-wrapper.content-image .image-content::before, .content-wrapper.content-image .image-content::after { display: none; } .content-wrapper.content-image .image-content div { padding: 20px; font-size: 18px; font-weight: 400; } .content-wrapper.content-gallery .gallery-thumb-wrapper { display: none; } .content-wrapper.content-gallery .gallery-pager-wrapper { display: block; } .content-wrapper.content-parallax.header-banner { padding-top: 50px; padding-bottom: 50px; } .content-wrapper.content-parallax.header-banner p { font-size: 18px; } .content-wrapper.content-parallax.banner-padding .parallax-bg { margin-top: 35px; } .content-wrapper.content-locations h3 { font-size: 30px; } .content-wrapper.content-locations a.location-show { margin-top: -20px; } } @media only screen and (max-width: 600px) { .top-menu ul li a { font-size: 16px; } .logo { width: 350px; padding-top: 65px; } .top-menu .maple-leaf { height: 50px !important; } .content-wrapper .content-row-content .content-row-content-side { width: 100%; float: none; margin-bottom: 20px; text-align: center; } .content-wrapper .content-row-content .content-row-content-side img { float: none; margin: 0 auto; } .content-wrapper .content-row-content .content-row-content-side h3 { text-align: center; } .content-wrapper .content-row-content .content-row-content-text { width: 100%; float: none; } } @media only screen and (max-width: 480px) { .mobile-hide { display: none; } .mobile-show { display: block; } .top-menu ul li { margin-left: 5px; } .top-menu ul li:before { font-size: 14px; padding-right: 5px; } .top-menu ul li a { font-size: 15px; } .top-menu .maple-leaf { width: 20px; height: 20px; margin-right: 10px; } .logo { width: 300px; } h1 { font-size: 32px; } h4 { font-size: 18px; } .content-wrap { padding-bottom: 50px; } .content-wrapper h2, .content-wrapper .content-row-content h2 { font-size: 28px; } .content-wrapper.content-column .content-col { width: 100%; } .content-wrapper.content-column .content-col:first-child { margin-bottom: 35px; } .content-wrapper.content-image .image-content div { padding: 10px; font-size: 16px; } .content-wrapper.content-news-featured .news-box { width: 100%; } .content-wrapper.content-parallax.banner-padding { padding-top: 50px; padding-bottom: 50px; } .content-wrapper.content-parallax.banner-padding .parallax-bg { margin-top: 0; height: 100%; } .content-wrapper.content-parallax.header-banner h4 { font-size: 20px; } .content-wrapper.content-parallax.header-banner p { font-size: 16px; } .content-wrapper.content-locations h3 { font-size: 26px; } .content-wrapper.content-locations a.location-show { margin-top: -25px; } .content-wrapper.content-locations .content-location { width: 100%; } .content-wrapper.content-gallery .gallery-main img { max-height: 250px; } } @media only screen and (max-width: 420px) { #header { padding-top: 20px; padding-bottom: 20px; } .logo { width: 220px; padding-top: 10px; } #flyout-menu { padding-top: 45px; padding-bottom: 45px; } .flyout, #flyout-menu a.close-btn { font-size: 40px; } .top-menu .maple-leaf { display: none; } .top-menu ul li a { font-size: 12px; } .search-bar input[type="text"] { width: 120px; } #flyout-menu li a, #flyout-menu #flyout-menu-sub li a { font-size: 22px; } #flyout-menu #flyout-menu-sub a { font-size: 26px; } h1 { font-size: 30px; } .content-wrapper h2, .content-wrapper .content-row-content h2 { font-size: 26px; } .content-wrap .content-side h2, .content-wrap .content-side ul li a { font-size: 20px; } .content-wrapper.content-gallery .gallery-pager-wrapper { margin-bottom: -20px; } .content-wrapper.content-gallery .gallery-pager span { font-size: 50px; } .content-wrapper.content-locations h3 { font-size: 22px; } .footer-right { font-size: 14px; } } @media only screen and (max-width: 320px) { } @media only screen and (min-width: 480px) and (-webkit-min-device-pixel-ratio: 2) { } @media only screen and (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) { }