/*:: LESS Mixins -------------------------------------------- */ .rounded-all { border-radius: 5px; } .rounded-top { border-radius: 5px 5px 0 0; } .rounded-bottom { border-radius: 0 0 5px 5px; } .transition-all { -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .transition-all-fast { -webkit-transition: all 0.125s ease-out; -moz-transition: all 0.125s ease-out; -ms-transition: all 0.125s ease-out; -o-transition: all 0.125s ease-out; transition: all 0.125s ease-out; } .transition-none { -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; } .box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } /*:: Global Styles -------------------------------------------- */ .wrapper { margin: 0 auto; width: 90%; } #overlay { position: fixed; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5) url(images/bg-line.png) repeat 0 0; z-index: 1000; } #modal { position: absolute; top: 120px; width: 500px; left: 50%; margin-left: -260px; z-index: 1010; padding: 10px; border-radius: 5px; background: white; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.75); } #modal a.modal-close { position: absolute; height: 26px; width: 26px; text-align: center; line-height: 26px; background: black; top: -15px; right: -15px; border-radius: 26px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } #modal a.modal-close i:before { color: white; margin-right: 0; font-size: 16px; } #modal a.modal-close:hover { background: white; } #modal a.modal-close:hover i:before { color: black; } #modal iframe { display: block; } /*:: Header -------------------------------------------- */ #contact-strip { width: 100%; font-size: 14px; padding: 10px 0; border-bottom: 1px solid #dddddd; text-shadow: 0 1px 0 white; background: #eeeeee; } #contact-strip ul { text-align: center; } #contact-strip i { vertical-align: -2px; } #contact-strip #to-top { display: none; } header { padding: 40px 0 0 0; float: left; width: 100%; } header #badge { display: none; } header p { text-align: center; margin-bottom: 20px; } header h2 { float: left; max-width: 75%; margin-bottom: 20px; font-size: 32px; line-height: normal; } header h2 a { display: block; } header h2.boxed a { background: white; padding: 20px; } header h2 img { display: block; max-height: 100%; } /*:: Menu -------------------------------------------- */ #menu-toggle { height: 40px; line-height: 40px; border-radius: 5px; float: right; padding: 0 10px; } #menu-toggle.on #menu-icon .line { top: 5px; } #menu-toggle.on #menu-icon .line1 { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #menu-toggle.on #menu-icon .line2 { opacity: 0; } #menu-toggle.on #menu-icon .line3 { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #menu-toggle #menu-icon { float: left; width: 14px; height: 12px; position: relative; margin-top: 14px; } #menu-toggle #menu-icon .line { height: 2px; width: 100%; background: white; position: absolute; left: 0; -webkit-transition: all 0.125s ease-out; -moz-transition: all 0.125s ease-out; -ms-transition: all 0.125s ease-out; -o-transition: all 0.125s ease-out; transition: all 0.125s ease-out; } #menu-toggle #menu-icon .line1 { top: 0px; } #menu-toggle #menu-icon .line2 { top: 5px; } #menu-toggle #menu-icon .line3 { top: 10px; } #menu-toggle span { display: none; } header nav ul { clear: both; display: none; text-align: center; background: #322c28; border-radius: 5px 5px 0 0; overflow: hidden; } header nav ul.on { display: block; } header nav ul li.first { display: none; } header nav ul li:nth-child(2) + a { border-top: 0; } header nav ul li a { border-top: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } header nav ul li ul { display: none; } header nav ul a { display: block; height: 44px; line-height: 44px; color: #999999; } /*:: Body -------------------------------------------- */ #main { clear: both; margin-bottom: 20px; } #breadcrumbs { display: none; } #page-header { display: none; } #page-header.campaign { display: block; } #page-header.campaign img { display: none; } #page-header.campaign h1 { font-size: 2em; padding: 20px; line-height: 1.25em; } #promos { padding-top: 0; } #promos .promo { margin-bottom: 20px; } #promos .promo h5 { padding-top: .75em; background: url(images/yellowArrow.png) no-repeat 0 19px; padding-left: 13px; } #promos .promo p, #promos .promo q { color: #444444; font-size: 14px; opacity: 0.8; margin-bottom: 0; } #promos .promo q { position: relative; } #promos .promo q:before { position: absolute; color: #dddddd; font-size: 72px; content: "“"; top: 20px; left: -30px; } #sidebar { padding: 20px; border-top: 20px solid #f6f6f6; } #sidebar h4 { font-size: 18px; } #sidebar ul { margin: 0 0 20px 0; } #sidebar ul a { display: block; padding-left: 10px; position: relative; } #sidebar ul a:before { content: '\e80c'; font-family: "icons"; font-size: 8px; color: #999999; position: absolute; left: 0; top: 1px; } #sidebar ul a:hover:before { color: #444444; } #sidebar ul ul { margin: 0 0 5px 20px; } #sidebar #contact-sidebar { display: none; } #sidebar #contact-sidebar a { padding-left: 0; } #sidebar #contact-sidebar a:before { content: ""; padding: 0; } #content ul { padding-left: 17px; list-style: disc; } #content ol { padding-left: 22px; list-style-type: decimal; } #content .tunneler:hover i { opacity: 1; } #content .tunneler i { opacity: 0.5; } #content .tunneler i:before { font-size: 12px; line-height: normal; } #content img.right { float: right; } #content img.left { float: left; } #content img.right, #content img[style*="float:right"], #content img[style*="float: right"] { margin: 5px 0 20px 20px; } #content img.left, #content img[style*="float:left"], #content img[style*="float: left"] { margin: 5px 20px 20px 0; } #content table { width: 100%; } #content table th, #content table td { text-align: left; border-bottom: 1px solid #dddddd; padding: 10px; } #content table tr:nth-child(odd) { background: #f6f6f6; } #content table tr:last-child td { border-bottom: 0; } #content table p { margin-bottom: 0; } #contact-form { margin-bottom: 10px; width: 100%; } #contact-address { margin-bottom: 30px; } .btn { border-radius: 5px; height: 36px; line-height: 35px; padding: 0 20px; } form legend { font-size: 18px; margin-bottom: 10px; white-space: nowrap; border-bottom: 1px solid #dddddd; width: 100%; } form fieldset { margin-bottom: 10px; } form label { display: block; } form input.text, form select, form textarea { border-radius: 4px; border: 1px solid #dddddd; padding: 6px; margin: 0 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 100%; } form input.text, form select { height: 36px; line-height: 36px; } form #captcha { clear: both; margin-bottom: 20px; } form label.checkbox { width: auto; text-align: left; margin-bottom: 0; height: 30px; line-height: 30px; } form label.checkbox input { display: inline; margin: 9px 6px 0 0; } form button { border-radius: 5px; height: 36px; line-height: 35px; padding: 0 20px; cursor: pointer; margin: 0; } #content .testimonial { margin-bottom: 1em; } #content .testimonial p { margin-bottom: 0; } /*:: Photo Gallery -------------------------------------------- */ #gallery { clear: both; } #gallery #hero { display: none; } #gallery ul { list-style: none; padding: 0; margin-bottom: 0; } #gallery ul li img { display: block; margin-bottom: 20px; } #gallery ul li:last-child img { margin-bottom: 0; } /*:: Product List -------------------------------------------- */ #product-list { padding: 0 !important; list-style: none !important; } #product-list h3 { clear: both; padding-top: 1em; } ul.product-child-list { float: left; width: 100%; border-left: 1px solid #dddddd; padding: 0 !important; list-style: none !important; } ul.product-child-list img { display: none; } ul.product-child-list li { width: 100%; border-width: 0 1px 1px 0; border-style: solid; border-color: #dddddd; } ul.product-child-list li:first-child { border-top: 1px solid #dddddd; } ul.product-child-list li a { display: block; padding: 20px; line-height: 20px; } ul.product-child-list li a:hover { background: #f6f6f6; } ul.product-child-list li a:hover span { opacity: 1; } ul.product-child-list li a:active { background: #e8e8e8; padding: 22px 20px 18px 20px; box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.2); } ul.product-child-list li a strong { display: block; } ul.product-child-list li a span { font-size: 14px; color: #444444; opacity: 0.75; } ul.product-child-list li a span strong { display: inline; font-size: 16px; } /*:: Product -------------------------------------------- */ #main.is-product #content { padding: 0; clear: both; } #main.is-product section { padding: 20px; border-top: 5px solid #f6f6f6; position: relative; } #main.is-product section.striped { background: #f7f6f5 url(images/bg-line.png) repeat 0 0; } #main.is-product section > h2 { padding-top: 0 !important; margin-bottom: .5em !important; } #main.is-product section#product-introduction h3 { margin-bottom: 1em; font-size: 18px; } #main.is-product section#product-introduction h3 strong { font-size: 26px; } #main.is-product section#product-information p strong { display: block; margin-bottom: .25em; } #main.is-product section#product-information br { display: none; } #main.is-product section#product-video .col { max-width: 480px; margin: 0 auto; } #main.is-product section#product-contact h3 { padding-top: 0; } #main.is-product section#product-contact p { clear: both; } #main.is-product section .arrow, #main.is-product section .arrow:before { content: ""; position: absolute; left: 50%; width: 0; height: 0; border-style: solid; } #main.is-product section .arrow { margin-left: -40px; top: 0; border-width: 20px 40px 0 40px; border-color: #f6f6f6 transparent transparent transparent; } #main.is-product section .arrow:before { margin-left: -25px; border-width: 11px 25px 0 25px; top: -20px; } #main.is-product section a:hover i { opacity: 1; } .video-holder, .promo.video span { display: block; height: 0; overflow: hidden; position: relative; padding-bottom: 55.5%; margin-bottom: .75em; } .video-holder i, .promo.video span i { position: absolute; top: 50%; left: 50%; display: block; height: 40px; width: 40px; border-radius: 40px; background: white; margin: -20px 0 0 -20px; opacity: 0.5; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } .video-holder i:before, .promo.video span i:before { font-size: 35px; text-align: center; line-height: 40px; width: 100%; margin: 0; } .video-holder img, .promo.video span img { display: block; margin-top: -9.5%; max-width: 100%; } .promo.video.short { padding-bottom: 0; } .promo.video.short img { margin-top: 0; } .promo.video.short span { padding-bottom: 38.8%; } /*:: Campaign -------------------------------------------- */ #campaign #campaign-introduction { padding-right: 20px; } /*:: Footer -------------------------------------------- */ footer { display: none; } #bottom { text-align: center; background: #322c28 url(images/bg-line.png) repeat 0 0; font-size: 14px; padding-top: 20px; color: #dddddd; box-shadow: inset 0 -40px 0 #26221f; } #bottom address { margin-bottom: 10px; } #bottom ul li { display: inline-block; } #bottom #socials { margin-bottom: 10px; } #bottom #socials a { color: white; display: block; height: 40px; width: 40px; text-align: center; line-height: 40px; } #bottom #socials li.angies { display: block; padding: 10px 0; } #bottom #socials li.angies a { width: auto; background: transparent; margin-bottom: 10px; } #bottom #legal { height: 40px; line-height: 40px; font-size: 12px; } #bottom #legal li { padding: 0 10px; } #bottom #legal a { color: #999999; } /*:: 2015 updates -------------------------------------------- */ section.border { border-top: 5px solid #f6f6f6; } .contentContainer { padding: 20px; clear: both; } .contentContainer.testimonial { margin: 0; text-align: center; background: url(images/bg-testimonial-box.png) no-repeat center 0; } .contentContainer.testimonial q { font-size: 24px; line-height: 40px; color: #777777; font-weight: 200; width: 70%; margin: 0 auto; display: block; background: url(images/bg-testimonial.png) no-repeat center 0; padding-top: 75px; } .contentContainer.testimonial cite { display: block; font-size: 16px; font-weight: 400; } .contentContainer.reversed { background: #444444 url(images/bg-wide-line.png) repeat 0 0; color: white; } .contentContainer.pageIntro p { font-size: 30px; line-height: 40px; font-weight: 200; color: #444444; } .contentContainer.pageIntro.center p { width: 80%; margin: 0 auto; } .contentContainer .col { padding-bottom: 20px; } .contentContainer .col:last-child { padding-bottom: 0; } #content .callout { float: left; width: 100%; box-sizing: border-box; -webkit-box-sizing: border-box; clear: both; border-width: 5px 0; border-color: #fe7702; border-style: solid; color: white; background-repeat: repeat; background-position: 0 0; background-image: url(images/bg-callout.png), -webkit-gradient(linear, right top, left top, color-stop(0, #fe7702), color-stop(1, #e3711f)); background-image: url(images/bg-callout.png), -o-linear-gradient(left, #fe7702 0%, #e3711f 100%); background-image: url(images/bg-callout.png), -moz-linear-gradient(left, #fe7702 0%, #e3711f 100%); background-image: url(images/bg-callout.png), -webkit-linear-gradient(left, #fe7702 0%, #e3711f 100%); background-image: url(images/bg-callout.png), -ms-linear-gradient(left, #fe7702 0%, #e3711f 100%); background-image: url(images/bg-callout.png), linear-gradient(to left, #fe7702 0%, #e3711f 100%); font-size: 34px; font-weight: 200; line-height: 54px; text-align: center; } #content .callout strong { color: #feca0d; font-weight: 900; } #content .callout span { display: none; } #content .callout.noCTA:hover em { border-bottom-color: transparent; } #content .callout.noCTA em { font-style: normal; border-bottom: 2px solid #feca0d; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #content .center { text-align: center; } #infoList { text-align: center; } #infoList img { display: block; max-width: 100%; margin: 0 auto; } #infoList h3 { color: #444444; font-size: 36px; line-height: 40px; position: relative; font-weight: 100; margin: 0 20px; padding: 30px 0 20px 0; } #infoList h3 span { position: absolute; background: #feca0d; height: 50px; width: 50px; text-align: center; line-height: 50px; font-size: 23px; border: 5px solid white; border-radius: 50px; font-family: Arial; font-weight: bold; top: -30px; left: 50%; margin-left: -30px; } #infoList p { font-size: 18px; line-height: 30px; color: #777777; margin: 0 20px; padding-bottom: 20px; } #infoList .alt { background: #fafafa; } #series-list { margin: 0; padding: 20px 0 0 0; } #series-list img { display: block; margin: 0 auto; max-width: 100%; } #series-list h4 { font-size: 30px; } #series-list p { color: #777777; font-size: 18px; line-height: 30px; } #series-list li { list-style: none; } #series-list a { display: block; padding: 20px; } #series-list a:hover { background: #fafafa; } #banner { display: none; } #gallery #full img { display: block; max-width: 100%; } #gallery #description { margin-bottom: 20px; } #gallery #description h2 { margin-top: 20px; } #gallery #description p { font-size: 16px; line-height: 30px; color: #777777; } #gallery #gallery-nav { display: none; } #thumbs ul { list-style: none; padding: 0; margin: 0 -25px -25px 0; } #thumbs li { float: left; margin: 0 25px 25px 0; } #thumbs img { display: block; } #thumbs a { display: block; position: relative; } #thumbs a:before { display: block; content: ""; height: 100%; width: 100%; position: absolute; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; z-index: 10; box-shadow: inset 0 0 0 #feca0d, inset 0 0 0 #feca0d; } #thumbs a.on:before { box-shadow: inset 5px 5px 0 #feca0d, inset -5px -5px 0 #feca0d; } #thumbs a:hover img { opacity: 1; } /* - Slideout Menu - */ @media screen and (min-width: 520px) { /*:: Menu -------------------------------------------- */ #menu-toggle span { display: block; float: right; padding-left: 5px; } header nav ul { position: fixed; width: 50%; left: -50%; top: 0; height: 100%; border-radius: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; display: block; text-align: left; overflow: visible; z-index: 100; } header nav ul.on { left: 0; box-shadow: 3px 0 3px rgba(0, 0, 0, 0.25); } header nav ul li.more li a, header nav ul a { padding: 0 20px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); } header nav ul li.more li a:before, header nav ul a:before { content: '\e80c'; font-family: "icons"; font-style: normal; font-weight: normal; font-size: 12px; float: right; } header nav ul ul { position: static; height: auto; width: auto; display: none; font-size: 14px; padding-bottom: 13px; } header nav ul ul span { display: none; } header nav ul ul li a { border: 0; box-shadow: none; height: 24px; line-height: 24px; color: #777777; } header nav ul ul li:last-child { border-bottom: 0; } header nav ul li.on h5 a:hover { background: transparent; color: #999999; } header nav ul li.on h5 a:before { content: '\e80e'; font-family: "icons"; font-style: normal; font-weight: normal; font-size: 12px; float: right; } header nav ul li.on a { box-shadow: none; } header nav ul li.on ul { display: block; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1); } header nav ul li.on ul ul { display: none; } header nav ul li.more a:before { content: ""; } header nav ul li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /*:: Product List -------------------------------------------- */ #product-list h3 { clear: both; padding-top: 1em; } html.flexbox ul.product-child-list { display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -moz-flex-wrap: wrap; align-items: stretch; } html.no-flexbox ul.product-child-list li span { height: 60px; } html.ie8 ul.product-child-list li { min-height: 230px; } ul.product-child-list { border: 0; } ul.product-child-list li { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 50%; border: 0 !important; } ul.product-child-list li img { max-height: 130px; display: block; margin: 0 auto 20px auto; } ul.product-child-list li span { display: block; overflow: hidden; } /*:: Footer -------------------------------------------- */ footer { padding: 40px 0 20px 0; background: #322c28 url(images/bg-line.png) repeat 0 0; display: block; } footer nav ul { text-align: center; } footer nav ul a { display: block; } footer nav ul li { padding-bottom: 20px; } footer nav ul li h6 a { color: white; font-size: 18px; width: 90%; margin: 0 auto 6px auto; border-bottom: 1px solid #665a52; } footer nav ul li ul li { float: none; width: auto; padding-bottom: 0; } footer nav ul li ul li a { font-size: 14px; color: #99908a; } footer nav ul li ul li a:hover { color: white; } footer address { clear: both; } #bottom { background: #26221f; box-shadow: none; } .wrapper { width: 480px; } } /* - Sidebar, Banner, Breadcrumbs - */ @media screen and (min-width: 680px) { /*:: Header -------------------------------------------- */ #contact-strip { height: 40px; padding: 0; text-align: center; } #contact-strip.largeImages { height: 60px; text-align: center; } #contact-strip.largeImages ul { float: none; } #contact-strip.largeImages li { height: 59px; line-height: 59px; padding-left: 5px; } #contact-strip.largeImages img { margin: 0 5px 0 0; vertical-align: middle; } #contact-strip.largeImages #to-top { line-height: 59px; height: 59px; } #contact-strip.largeImages .gen-logo, #contact-strip.largeImages .contact-link { display: none; } #contact-strip ul { float: right; } #contact-strip li { float: left; display: inline-block; line-height: 39px; height: 39px; padding-left: 20px; border-left: 1px solid #dddddd; } #contact-strip img { margin: 8px 17px 0 0; } /*:: Main -------------------------------------------- */ #page-header, #page-header img { display: block; } #page-header.campaign { position: relative; overflow: hidden; } #page-header.campaign img { display: block; } #page-header.campaign h1 { color: white; background: rgba(0, 0, 0, 0.8) url(images/bg-line.png) repeat 0 0; position: absolute; bottom: 0; left: 0; width: 100%; } html.ie8 #banner .backdrop { background: #322c28 url(images/bg-line.png) repeat 0 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; } #banner { display: block; } #banner a { display: block; overflow: hidden; position: relative; } #banner .old-banner a { height: 500px; background-color: #26221f; -webkit-background-size: auto; -moz-background-size: auto; -ms-background-size: auto; -o-background-size: auto; background-size: auto; } #banner .old-banner h3 { display: none; } #banner img { display: block; } #banner #bannerText { position: absolute; left: 0; top: 0; height: 100%; width: 604px; background: url(images/bg-bannerInfo-left.png) no-repeat 0 0; padding-left: 50px; } #banner #bannerText h3 { color: white; width: 460px; padding: 0; margin: 30px 0 10px 0; -moz-transition: color 0.25s ease-out; -o-transition: color 0.25s ease-out; -webkit-transition: color 0.25s ease-out; transition: color 0.25s ease-out; font-weight: 900; font-size: 24px; line-height: 24px; } #banner #bannerText p { color: #dddddd; font-weight: 300; width: 425px; padding: 0; margin: 0 0 20px 0; font-size: 16px; line-height: 22px; } #banner #bannerText span { border-radius: 50px; height: 30px; line-height: 30px; padding: 0 20px; background: #e4711e; color: white; display: block; float: left; text-transform: uppercase; text-shadow: 0 1px 0 rgba(68, 68, 68, 0.5); box-shadow: inset 0px 2px 0px 0px rgba(255, 255, 255, 0.3); -moz-transition: padding 0.25s ease-out; -o-transition: padding 0.25s ease-out; -webkit-transition: padding 0.25s ease-out; transition: padding 0.25s ease-out; } #banner.right #bannerText, #banner .right #bannerText { left: auto; right: 0; background-image: url(images/bg-bannerInfo-right.png); padding-left: 175px; width: 479px; } #banner.no-shadow #bannerText, #banner .no-shadow #bannerText { background-image: none !important; } #banner.no-button #bannerText span, #banner .no-button #bannerText span { display: none; } #banner a:hover #bannerText h3 { color: #feca0d; } #banner a:hover #bannerText span { padding: 0 26px; } #breadcrumbs { display: block; padding: 20px 20px 0 20px; font-size: 12px; } #breadcrumbs li { float: left; padding-right: 5px; } #breadcrumbs a { color: #444444; opacity: 0.5; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #breadcrumbs a:hover { opacity: 1; } #breadcrumbs a:before { content: '\e80c'; font-family: "icons"; font-style: normal; font-weight: normal; font-size: 8px; float: right; margin: 1px 0 0 5px; color: #999999; } #breadcrumbs a.last:before { content: ""; } #breadcrumbs a i:before { font-size: 14px; } #main { min-height: 500px; } #main.with-sidebar #sidebar { float: right; padding: 20px 0 20px 20px; width: 180px; border-top: 0; } #main.with-sidebar #sidebar #contact-sidebar { display: block; padding-top: 20px; } #main.with-sidebar #sidebar ul + #contact-sidebar { padding-top: 0; } #main.with-sidebar #content { float: right; width: 440px; } #main.is-product #breadcrumbs { padding: 20px; margin-bottom: 0; } form { clear: both; } form legend { width: auto; border-bottom: 0; } form label { float: left; clear: left; width: 25%; text-align: right; padding-right: 20px; height: 36px; line-height: 36px; margin: 0 0 10px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } form input.text, form select, form textarea { float: left; width: auto; } form input.text.x-large, form select.x-large, form textarea.x-large { width: 75%; } form input.text.large, form select.large, form textarea.large { width: 60%; } form input.text.medium, form select.medium, form textarea.medium { width: 50%; } form input.text.small, form select.small, form textarea.small { width: 40%; } form input.text.x-small, form select.x-small, form textarea.x-small { width: 30%; } form input.text:focus, form select:focus, form textarea:focus { border-color: #e36f25; } form label.checkbox { width: auto; margin-left: 25%; } form label.checkbox input { float: left; } form #captcha { margin-bottom: 20px; } form #captcha, form legend, form button { margin-left: 25%; } form #captcha:focus, form legend:focus, form button:focus { background-color: #e36f25; } form p.error, form label.error { color: #e32525; } form input.error, form select.error { border-color: #e32525; } form .email-confirmation { position: absolute; left: -9999%; } #promos { width: 620px; } #promos .promo { float: left; width: 33.33%; padding-right: 20px; margin-bottom: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } #promos a:hover i { opacity: 1; } /*:: Footer -------------------------------------------- */ footer nav ul { text-align: left; } footer nav ul li { float: left; width: 50%; } footer nav ul li:nth-child(3n) { clear: both; } footer nav ul li h6 a { border-bottom: 0; width: 100%; margin: 0; } footer nav ul li li a { display: block; padding-left: 10px; position: relative; } footer nav ul li li a:before { content: '\e80c'; font-family: "icons"; font-size: 8px; color: #999999; position: absolute; left: 0; top: 1px; } footer nav ul li li a:hover:before { color: white; } #bottom { text-align: left; padding: 40px 0; } #bottom address { float: left; margin-bottom: 20px; margin-right: 40px; } #bottom #socials { margin: 0; float: right; } #bottom #socials li { float: left; margin-left: 10px; } #bottom #socials li.angies { clear: both; padding: 10px 0 0 0; float: right; } #bottom #socials a { height: 40px; line-height: 40px; color: #26221f; background: white; border-radius: 5px; text-align: center; opacity: 0.4; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; } #bottom #socials a:hover { opacity: 1; } #bottom #socials a i:before { font-size: 20px; } #bottom #legal { height: auto; line-height: normal; clear: left; float: left; } #bottom #legal li { padding: 0 20px 0 0; } html.ie8 #bottom #socials a { background: transparent; color: white; } .wrapper { width: 640px; } } /* - Dropdown Menu - */ @media screen and (min-width: 840px) { /*:: Header -------------------------------------------- */ #contact-strip { position: fixed; z-index: 100; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; top: 0; left: 0; } #contact-strip.scrolling { box-shadow: 0 3px 3px rgba(0, 0, 0, 0.25); } #contact-strip.scrolling #to-top { opacity: 1; } #contact-strip.largeImages ul { float: right; } #contact-strip #to-top { display: block; opacity: 0; -webkit-transition: all 0.25s ease-out; -moz-transition: all 0.25s ease-out; -ms-transition: all 0.25s ease-out; -o-transition: all 0.25s ease-out; transition: all 0.25s ease-out; float: left; line-height: 39px; padding: 0 20px 0 0; border-right: 1px solid #dddddd; } header { margin-top: 41px; padding: 40px 0 0 0; } header .align-helper { display: inline-block; height: 100%; vertical-align: middle; } header h2 { max-width: auto; margin-bottom: 0; } header h2 a { margin: 0; max-width: 325px; height: 73px; } header p { text-align: right; line-height: 35px; color: #444444; margin-bottom: 0; float: right; } header p strong { display: block; font-weight: bold; font-family: Arial; font-size: 30px; } header p i:before { font-size: 24px !important; margin-right: 0 !important; vertical-align: middle !important; color: #686868; } #banner #bannerText h3 { font-size: 28px; line-height: 28px; } #banner #bannerText p { font-size: 18px; line-height: 24px; } #banner #bannerText span { height: 34px; line-height: 34px; padding: 0 30px; } #banner a:hover #bannerText span { padding: 0 36px; } /*:: Menu -------------------------------------------- */ #menu-toggle { display: none; } header nav { clear: both; position: relative; float: left; width: 100%; height: 52px; line-height: 52px; background: white; margin-top: 10px; } header nav ul { display: block; background: transparent; position: static; height: auto; width: auto; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; padding-left: 20px; } header nav ul li { position: relative; float: left; margin-right: 5px; } header nav ul li:hover a { text-shadow: none; } header nav ul li.more.on a:before { content: ""; } header nav ul li.more:hover ul { left: -10px; top: 52px; } header nav ul li.more a { margin-bottom: 0; float: left; } header nav ul li.more a:after { content: '\e80a'; font-family: "icons"; font-style: normal; font-weight: normal; font-size: 12px; float: right; padding-left: 6px; } header nav ul li.first { display: block; } header nav ul li.first a { padding: 0; } header nav ul li a { padding: 0 10px; text-shadow: 0 1px 0 white; height: 52px; line-height: 52px; color: #444444; border: none; box-shadow: none; } header nav ul li a:before { content: ""; } header nav ul li#product-nav { position: static; } header nav ul li#product-nav:hover ul { left: 5%; width: 90%; } header nav ul li#product-nav ul { padding: 0; } header nav ul li#product-nav ul li { width: 20%; margin: 0; float: left; padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } header nav ul li#product-nav ul ul { position: static; border: none; border-radius: 0; box-shadow: none; } header nav ul li#product-nav ul ul li { width: 100%; padding: 0; } header nav ul li#product-nav ul ul li b { font-size: 14px; color: #777777; line-height: 20px; margin-bottom: 6px; display: block; } header nav ul li#product-nav ul ul li:last-child b { margin-bottom: 0; } header nav ul li.more ul { position: absolute; left: -9000em; padding: 20px 20px 10px 20px; box-shadow: 0 5px 5px rgba(0, 0, 0, 0.25); display: block; width: 300px; z-index: 100; } header nav ul li.more ul li { line-height: normal; height: auto; float: left; margin-bottom: 10px; } header nav ul li.more ul li span { display: block; } header nav ul li.more ul li a { padding: 0; margin: 0; height: auto; text-shadow: none; } header nav ul li.more ul li a:before, header nav ul li.more ul li a:after { content: ""; } header nav ul li.more ul li a b { font-size: 17px; color: #222222; } html.ie8 header nav li.more ul { border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-right: 1px solid #dddddd; } /*:: Main -------------------------------------------- */ #page-header.campaign h1 { padding: 20px 40px; } .contentContainer { padding: 40px; } .contentContainer .col { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 0 40px 0 0; margin: 0; max-width: none; } .contentContainer .col p:last-child { margin-bottom: 0 !important; } .contentContainer .col-half { width: 50%; } .contentContainer .col-third { width: 33.33%; } .contentContainer .col-two-thirds { width: 66.66%; } #main { margin-bottom: 40px; } #main.with-sidebar #sidebar { padding: 40px 0 40px 40px; } #main.with-sidebar #content { width: 580px; } #main.is-product section { padding: 40px 0 40px 40px; } #promos { width: 760px; } #promos .promo { padding-right: 40px; } /*:: Campaign -------------------------------------------- */ #campaign #campaign-introduction { padding-right: 40px; } .wrapper { width: 800px; } } @media screen and (min-width: 1000px) { /*:: Header -------------------------------------------- */ #contact-strip.largeImages .gen-logo { display: block; } /*:: Menu -------------------------------------------- */ header #badge { display: inline; vertical-align: middle; } header #badge-holder { height: 73px; float: left; border-left: 1px solid #dddddd; padding: 0 0 0 20px; margin: 0 0 0 20px; position: relative; } header #badge-holder img { display: inline-block; vertical-align: middle; } header nav ul li#product-nav ul li { padding: 20px; } #banner #bannerText h3 { font-size: 34px; line-height: 34px; margin: 40px 0 20px 0; } #banner #bannerText p { font-size: 20px; line-height: 26px; margin-bottom: 30px; } #banner #bannerText span { height: 38px; line-height: 38px; padding: 0 30px; } #banner a:hover #bannerText span { padding: 0 36px; } /*:: Main -------------------------------------------- */ #main.with-sidebar #sidebar { width: 240px; } #main.with-sidebar #content { width: 680px; } #contact-form { float: left; margin: 0 20px 40px 0; width: 630px; } #contact-address { float: left; width: 250px; } #promos { width: 920px; } #content .callout { text-align: left; } #content .callout span { display: block; float: right; background: #feca0d; height: 54px; border-radius: 50px 0 0 50px; font-size: 18px; color: #444444; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); font-weight: 200; padding: 0 10px 0 20px; position: relative; margin-right: 28px; } #content .callout span:after { width: 0; content: ""; position: absolute; top: 0; right: -28px; height: 0; border-style: solid; border-width: 27px 0 27px 28px; border-color: transparent transparent transparent #feca0d; } #content .callout span strong { font-weight: 800; color: #444444; } #content .callout.center { text-align: center; } #infoList { text-align: left; } #infoList h3 { margin: 37px 50px 12px 50px; padding: .5em 0 0 0; } #infoList h3 span { top: 7px; left: 380px; margin: 0; } #infoList p { margin: 0 50px; padding: 0 0 50px 0; } #infoList img { float: left; margin-right: 50px; } #infoList .alt img { float: right; margin: 0 0 0 50px; } #infoList .alt span { border-color: #fafafa; left: auto; right: 380px; } #series-list li { float: left; width: 50%; } #series-list li:nth-child(2n+1) { clear: both; } /*:: Photo Gallery -------------------------------------------- */ #gallery { position: relative; } #full { float: left; width: 66.66%; background: #444444; } #full img { margin: 0 auto; } #description { float: left; width: 33.33%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding-left: 40px; margin-bottom: 40px; } #description h2 { margin-top: 40px; } #gallery-nav { display: block !important; width: 33.33%; right: 0; bottom: 0; position: absolute; padding: 0 40px 40px 40px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; } #gallery-nav .nav { opacity: 0.75; position: relative; z-index: 10; background-repeat: no-repeat; } #gallery-nav .nav:hover { opacity: 1; } #gallery-nav .prev { float: left; background-image: url(images/prev-arrow.png); background-position: 0 6px; padding-left: 12px; } #gallery-nav .next { float: right; background-image: url(images/next-arrow.png); background-position: right 6px; padding-right: 12px; } #gallery-nav p { text-align: center; opacity: 0.5; } /*:: Product List -------------------------------------------- */ ul.product-child-list li { width: 33.33%; } /*:: Footer -------------------------------------------- */ footer nav ul li { width: 24%; padding-right: 1%; } footer nav ul li:nth-child(3n) { clear: none; } .wrapper { width: 960px; } } @media screen and (min-width: 1160px) { /*:: Header -------------------------------------------- */ #contact-strip.largeImages .contact-link { display: block; } /*:: Main -------------------------------------------- */ #main.with-sidebar #content { width: 840px; } #contact-form { width: 790px; } #promos { width: 1080px; } #content .callout { font-size: 36px; } #content .callout span { font-size: 24px; padding: 0 20px 0 30px; } #banner #bannerText h3 { font-size: 38px; line-height: 40px; } #banner #bannerText p { font-size: 20px; line-height: 28px; } #banner #bannerText span { height: 38px; line-height: 38px; padding: 0 30px; } #banner a:hover #bannerText span { padding: 0 36px; } /*:: Product List -------------------------------------------- */ ul.product-child-list li { width: 25%; } .wrapper { width: 1120px; } } @media screen and (min-width: 1320px) { /*:: Main -------------------------------------------- */ #page-header.campaign h1 { padding: 30px 50px; } .contentContainer { padding: 50px; } #main { margin-bottom: 50px; } #main.with-sidebar #sidebar { width: 280px; padding: 50px 0 50px 50px; } #main.with-sidebar #content { width: 950px; } #main.is-product section { padding: 50px 0 50px 50px; } form input.text, form select, form textarea { float: left; width: auto; } form input.text.x-large, form select.x-large, form textarea.x-large { width: 70%; } form input.text.large, form select.large, form textarea.large { width: 45%; } form input.text.medium, form select.medium, form textarea.medium { width: 35%; } form input.text.small, form select.small, form textarea.small { width: 25%; } form input.text.x-small, form select.x-small, form textarea.x-small { width: 15%; } #contact-form { width: 800px; margin-bottom: 50px; } #promos { width: 1230px; } #promos .promo { padding-right: 50px; } #content .callout { font-size: 46px; } #banner #bannerText h3 { font-size: 48px; line-height: 48px; margin: 40px 0 16px 0; } #banner #bannerText p { font-size: 24px; line-height: 30px; margin: 0 0 30px 0; } #banner #bannerText span { height: 54px; font-size: 24px; padding: 0 50px; line-height: 54px; font-size: 19px; } #banner a:hover #bannerText span { padding: 0 56px; } #series-list li { width: 33.33%; } #series-list li:nth-child(2n+1) { clear: none; } #series-list li:nth-child(3n+1) { clear: both; } /*:: Photo Gallery -------------------------------------------- */ #description { padding-left: 50px; margin-bottom: 50px; } #description h2 { margin-top: 50px; } #gallery-nav { padding: 0 50px 50px 30px; } /*:: Campaign -------------------------------------------- */ #campaign #campaign-introduction { padding-right: 50px; } /*:: Footer -------------------------------------------- */ footer { padding: 50px 0 30px 0; } #bottom { padding: 50px 0; } .wrapper { width: 1280px; } }