/**************************************************************************************** NOTE: This site is using critical path CSS method to help with page speed scores. That means, some CSS that's in this stylesheet is being inlined in the which can be found in parent.master. If you're changing styles you should double check if they need to be changed in the critical CSS as well. ****************************************************************************************/ /************************* General *************************/ *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; } body { background: #fff; color: #333; font: 1em/1.6 'Cabin', "Helvetica", arial, sans-serif; } form#aspnetForm { height: 100%; } .full { background: #fff; margin: 0 auto; width: 100%; max-width: 100%; z-index: 2; } p { margin: 15px 0; } a { color: #333; -webkit-transition: all .1s; transition: all .1s; } a:hover, a:focus { color: #5b8573; } h1, h2, h3, h4, h5, h6 { font: 26px 'Cabin', "Helvetica", arial, sans-serif; line-height: 1.2; margin: 0 0 10px; padding: 0; text-transform: uppercase; } h1 { font: 300 26px 'Lato', "Helvetica", arial, sans-serif; } h2 { font: 300 24px 'Lato', "Helvetica", arial, sans-serif; } h3 { color: #003663; font-size: 23px; font-weight: 700; } h4 { font-size: 21px; } h5, .section-header { font: 900 19px 'Source Sans Pro', "Helvetica", arial, sans-serif; } .section-header { border-bottom: 1px solid #e3e3e3; } h6 { font: 900 16px 'Source Sans Pro', "Helvetica", arial, sans-serif; } .ht { display: block; font-size: 0; overflow: hidden; text-indent: 100%; white-space: nowrap; } :root * > img { max-width: 100%; } .nm { margin: 0; } .np { padding: 0; } .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .error, .req { color: #db595a !important; } .success { color: #509355; } .inner, .testimonials.lr ul { margin: 0 auto; max-width: 1250px; padding: 0 15px; } .message .inner { max-width: 1030px; } .notes { font-size: 12px; font-style: italic; margin: 5px 0; } /************************* Forms *************************/ label { font: 11px/1.2 'Cabin', "Helvetica", arial, sans-serif; text-transform: uppercase; } @media only screen and (min-width : 800px) { label { font-size: 14px; } } .item label { display: block; } .item .checki label { display: inline-block; } input[type="text"], input[type="email"], input[type="password"], .item select, .item input[type="email"], .item input[type="tel"] { background: #e3e3e3; border: 1px solid #e3e3e3; height: 40px; } input[type="checkbox"], input[type="radio"], textarea { background: #e3e3e3; border: 1px solid #e3e3e3; } input[type="submit"], button[type="submit"], a.btn, .btn a, .btn span, a[title="Button"] { background: #5b8573; border: 0; color: #fff; display: inline-block; font: bold 16px 'Cabin', "Helvetica", arial, sans-serif; margin: 0 0 10px; overflow: hidden; padding: 10px 25px; position: relative; text-align: center; text-decoration: none; -webkit-transition: all .3s; transition: all .3s; } .btn a::before { background: #476a5b; content: "\2192"; display: block; font: 40px/4 arial, sans-serif; left: 0; padding: 15% 0; position: absolute; -webkit-transform: translateY(-47%) translateX(-300%); -ms-transform: translateY(-47%) translateX(-300%); transform: translateY(-47%) translateX(-300%); -webkit-transition: -webkit-transform .3s; transition: transform .3s; width: 100%; z-index: 10; } .touch .btn a::before { display: none; } .btn a:hover::before { -ms-transform: translateY(-46%) translateX(0%); -webkit-transform: translateY(-46%) translateX(0%); transform: translateY(-46%) translateX(0%); } input[type="submit"][disabled], button[type="submit"][disabled], input[type="submit"][disabled]:hover, button[type="submit"][disabled]:hover { background: #5b8573; color: #fff; -webkit-transition: none; transition: none; } input[type="submit"]:hover, input[type="submit"]:focus, button[type="submit"]:hover, button[type="submit"]:focus, .btn a:hover, .btn a:focus, a:hover.btn, a:focus.btn, a[title="Button"]:hover, a[title="Button"]:focus, .btn span:hover, .btn span:focus { color: #fff; } input[type="submit"]:hover, input[type="submit"]:focus, .touch .btn a:hover, .touch .btn a:focus { background-color: #476a5b; } .actions button[type="submit"], .actions input[type="submit"] { float: right; } a.btn-cancel { background: none; color: #333; } a:hover.btn-cancel, a:focus.btn-cancel { color: #999; } /************************* Header *************************/ header { background: #333; padding: 20px 15px; text-align: center; -webkit-transition: all .3s; transition: all .3s; } header .logo a { display: inline-block; margin: auto; -webkit-transition: all .3s; transition: all .3s; } .market { color: #fafafa; font-size: 14px; margin-top: 10px; } .market .listings { display: none; } .market a { color: #fafafa; display: inline-block; padding: 5px 0; text-decoration: none; } .market a:hover, .market a:focus { color: #d4d4d4; } .market p { margin: 0 0 5px; } .plus { display: inline-block; vertical-align: middle; margin-bottom: 4px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #3fa878; } .minus { display: inline-block; vertical-align: middle; margin-bottom: 2px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #ff4040; } .search-wrap { display: table; margin: 15px auto 0; max-width: 350px; width: 100%; } .search-wrap ul { display: table-row; } .search-wrap li { display: table-cell; vertical-align: top; } .search-wrap input[type="submit"] { font-size: 16px; } @media only screen and (min-width : 550px) { .secondary-nav { left: 15px; position: absolute; top: -5px; } } /*was 900*/ @media only screen and (min-width : 700px) { .search-wrap { float: right; margin: 45px auto 2px; } .secondary-nav { left: auto; position: relative; top: auto; } .market { float: left; margin: 0; text-align: left; width: 50%; } .market p { display: inline-block; margin: 5px 20px 5px 0; } .shop-nav { float: right; width: 50%; } } @media only screen and (min-width : 1200px) { .market a { display: none; } .market .listings { display: block; font-size: 12px; } } /************************* Navigation *************************/ #main-nav p, #main-nav, #shop-nav { display: none; } /* Mobile Navigation */ .toggle-menu { background: #111; color: #fafafa; font-size: 16px; left: 0; position: fixed; text-decoration: none; text-transform: uppercase; top: 0; width: 100%; z-index: 1000; } .toggle-menu li { float: left; } .toggle-menu li:last-of-type { padding-left: 30px; } .toggle-menu .icon, .toggle-menu .menu-text { display: inline-block; vertical-align: middle; } .toggle-menu p { margin: 0; } .toggle-menu a { color: #fafafa; display: block; padding: 10px 15px; text-decoration: none; } /* Hamburger menu icon */ .toggle-menu .icon, .toggle-menu .icon:after, .toggle-menu .icon:before { background: #fafafa; -webkit-transition: all 0s .3s; transition: all 0s .3s; width: 18px; height: 2px; } .toggle-menu .icon:after, .toggle-menu .icon:before { background: #fafafa; content: ""; position: absolute; left: 0; } .toggle-menu .icon:before { bottom: 5px; -webkit-transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1); transition: bottom .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-menu .icon:after { top: 5px; -webkit-transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s cubic-bezier(0.23, 1, 0.32, 1); transition: top .3s .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s cubic-bezier(0.23, 1, 0.32, 1); } /* When clicked, hamburger icon animates into an X */ .toggle-menu .is-clicked .icon { background: rgba(255, 255, 255, 0); } .toggle-menu .is-clicked .icon:after { background: #db595a; top: 0; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); transition: top .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); } .toggle-menu .is-clicked .icon:before { background: #db595a; bottom: 0; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); transition: bottom .3s cubic-bezier(0.23, 1, 0.32, 1), transform .3s .3s cubic-bezier(0.23, 1, 0.32, 1); } /* Mobile Nav Panels */ [id$="nav-copy"] { background: #333; box-shadow: 5px 0 5px -5px rgba(0,0,0,.5); font-size: 18px; left: 0; overflow-y: auto; padding: 48px 0; position: fixed; top: 0; -webkit-transform: translateX(-250%); -ms-transform: translateX(-250%); transform: translateX(-250%); -webkit-backface-visibility: hidden; -webkit-transition: -webkit-transform .4s 0s, visibility 0s .4s; transition: transform .4s 0s, visibility 0s .4s; width: 230px; height: 100%; z-index: 9; } [id$="nav-copy"] ul li a { border-bottom: 1px solid #222; color: #fafafa; display: block; padding: 15px; text-decoration: none; } [id$="nav-copy"] ul li a:hover { background: #fafafa; color: #333; } [id$="nav-copy"] ul li ul { background: #484848; font-size: 16px; line-height: 1.2; } [id$="nav-copy"] ul li ul li a { padding-left: 30px; } [id$="nav-copy"].open-menu { -webkit-transform: translateX(0) !important; -ms-transform: translateX(0) !important; transform: translateX(0) !important; -webkit-transition: -webkit-transform .4s 0s, visibility 0s 0s; transition: transform .4s 0s, visibility 0s 0s; -webkit-overflow-scrolling: touch; } .dd-wrap { display: block; width: 100%; } .open-dd { background: #222; border-bottom: 1px solid #1c1c1c; color: #fafafa; cursor: pointer; display: block; position: absolute; right: 0; text-align: center; top: 0; width: 50px; height: 100%; z-index: 10; } /* Icon to indicate there's drop downs to open */ .open-dd::after { content: "+"; font-size: 36px; left: 0; margin: auto; position: absolute; right: 0; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); } .open-dd:hover, .open-dd:focus { background: #101010; color: #fafafa; } .has-sub ul { display: none; } .has-sub span { display: block; } .has-sub > span { height: 100%; } .htmobile { display: none; } .homepage section { margin-bottom: 40px; } /************************* Banner *************************/ /************************* Layout *************************/ /*** Homepage ***/ .full { padding-top: 37px; } .interior .container { padding-bottom: 50px; padding-top: 40px; } /* Message */ .message { margin-bottom: 50px; } .message .image { margin: 0 auto 20px; width: 150px; } .message .icons { font-size: 15px; font-weight: bold; margin: 40px auto 0; text-align: center; text-transform: uppercase; max-width: 550px; } .message .icons a { display: block; text-decoration: none; } .message .icons li { display: inline-block; margin: 0 0 25px; vertical-align: top; width: 28%; } .message .icons li:nth-of-type(2) { margin: 0 10px; } .message .icons li a:before { background: #5b8573 url(../images/sprites.png) no-repeat 15px center / auto 35px; border-radius: 75%; content: ""; display: block; margin: auto; -webkit-transition: background-color .1s; transition: background-color .1s; width: 70px; height: 70px; } .message .icons li a:hover:before { background-color: #476a5b; } .message .icons li:nth-of-type(2) a:before { background-position: -110px center; } .message .icons li:nth-of-type(3) a:before { background-position: -235px center; } /* Buckets */ .ih-item { border-radius: 75%; margin: 0 auto 40px; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; width: 220px; height: 220px; } .touch .ih-item { border-radius: 0; -webkit-transition: none; transition: none; } .ih-item img { width: 100%; height: 100%; } .ih-item .image { border-radius: 75%; } .ih-item .image img { border-radius: 75%; } .ih-item .image { -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); z-index: 11; } .touch .ih-item .image { -webkit-transition: none; transition: none; -webkit-transform: none; -ms-transform: none; transform: none; } .title { background: rgba(255,255,255,.7); border-radius: 75%; bottom: 0; height: 85%; left: 0; margin: auto; position: absolute; right: 0; top: 0; -webkit-transition: all .3s; transition: all .3s; width: 85%; z-index: 10; } .title span { display: block; font: bold 28px 'Cabin', "Helvetica", arial, sans-serif; text-align: center; text-transform: uppercase; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; z-index: 11; } .touch .title { display: none; -webkit-transition: none; transition: none; } .ih-item .btn span, .btn.white-btn a { background: #fff; font-size: 14px; color: #333; -webkit-transition: background-color .2s; transition: background-color .2s; } .ih-item .btn a::before, .btn.white-btn a::before { display: none; } .ih-item .btn span:hover, .btn.white-btn a:hover { background: #000; color: #fff; } .ih-item:hover .image, .touch .ih-item .image { -webkit-transform: scale(.25) translateY(-200%); -ms-transform: scale(.25) translateY(-200%); transform: scale(.25) translateY(-200%); } .touch .ih-item:hover .image { -webkit-transform: scale(0.25) translateY(-200%) !important; -ms-transform: scale(0.25) translateY(-200%) !important; transform: scale(0.25) translateY(-200%) !important; } .ih-item:hover .title { opacity: 0; } .ih-item .info, .touch .ih-item .info { -webkit-backface-visibility: hidden; backface-visibility: hidden; background: #333; border-radius: 0; bottom: 0; color: #fff; font-size: 13px; left: 0; line-height: 1.3; opacity: 0; padding: 0 15px; position: absolute; right: 0; text-align: center; top: 0; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; -webkit-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); } .touch .ih-item .info { opacity: 1; -webkit-transition: none; transition: none; -webkit-transform: none; -ms-transform: none; transform: none; } .ih-item:hover .info { border-radius: 0; opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } .touch .ih-item:hover .info { -webkit-transform: none; -ms-transform: none; transform: none; } .ih-item .info h3 { color: #fff; font-size: 20px; padding: 35px 0 0; text-transform: uppercase; } /* Slider */ .slider { background: #333; color: #fff; font-size: 14px; padding: 40px 20px; } .slider p { margin: 0; } .slider h2, .slider h3 { color: #fff; text-align: center; } .slider h2 { font-size: 22px; } .slider h3 { font-size: 16px; } .slider h6 { margin-bottom: 5px; } .slider ul { margin-top: 25px; } .slider .slick-slide { margin: 0 10px; width: 210px; } .slider .image { margin-bottom: 15px; max-height: 560px; opacity: .1; -webkit-transition: opacity .5s; transition: opacity .5s; } .slider .image img { max-height: 530px; } .slider .slick-center .image { opacity: 1; } .slider .text { opacity: .1; -webkit-transition: opacity .5s; transition: opacity .5s; } .slider .text .inner { margin: 0; padding: 0; max-width: none; } .slider .slick-center .text { opacity: 1; } .slider .btn { margin: 15px 0 0; text-align: center; } .slider .btn a { margin: 0; } /* Testimonials */ .testimonials { background: #e3e3e3 url(../images/bg-coins.jpg) no-repeat center center / cover; background-attachment: fixed; padding: 40px 0; } .touch .testimonials { background-size: auto; background-attachment: scroll; } @media only screen and (max-width: 800px) { .testimonials { background-size: initial; background-attachment: scroll; } } .testimonials .slick-list li { background: rgba(255,255,255,.9); font-style: italic; font-weight: 700; margin: 0 10px; padding: 15px; } .testimonials .slick-dots { bottom: -19px; left: 0; position: absolute; right: 0; text-align: center; width: 100%; } .testimonials .slick-dots li { display: inline-block; margin: 0 5px; width: 15px; height: 15px; } .testimonials .slick-dots li button::before { background: #333; border-radius: 75%; content: ""; left: 0; position: absolute; top: 0; width: 15px; height: 15px; } .testimonials .slick-dots li:hover button::before, .testimonials .slick-dots li.slick-active button::before { background: #5b8573; } .testimonials .slick-dots li button { background: transparent; border: 0 none; color: transparent; cursor: pointer; display: inline-block; outline: none; } /*** Categories ***/ .categories { margin-top: 50px; } .categories ul { text-align: center; } .categories ul li { margin: 0 auto 60px; max-width: 270px; } .categories ul li a { display: block; } /*** Contact ***/ .contact-content { margin-bottom: 40px; } /*********************** Shopping ***********************/ /*** Catalog ***/ .catalog ul li, .category ul li { margin: 0 auto 30px; text-align: center; max-width: 325px; } .catalog ul li { background: #eee; padding: 15px; } .slider .slick-slide a { margin: 0 20px; text-align: center; } .slider .slick-slide { width: 210px; } .catalog ul li a, .category ul li a, .featured ul li a { color: #333; display: block; text-decoration: none; } .catalog h6 { font-size: 16px; } @media only screen and (min-width : 460px) { .catalog ul { text-align: center; } .catalog ul li { float: left; margin: 0 2% 30px; vertical-align: top; max-width: none; width: 48%; } .catalog ul li:nth-of-type(2n+1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(2n+2) { margin-right: 0; } } @media only screen and (min-width: 650px) { .catalog ul li { width: 30.5%; } .catalog ul li:nth-of-type(2n+1) { clear: none; margin-left: 2%; } .catalog ul li:nth-of-type(2n+2) { margin-right: 2%; } .catalog ul li:nth-of-type(3n+1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(3n+3) { margin-right: 0; } } @media only screen and (min-width : 850px) { .catalog ul li { margin-bottom: 25px; width: 22%; } .catalog ul li:nth-of-type(3n+1) { clear: none; margin-left: 2%; } .catalog ul li:nth-of-type(3n+3) { margin-right: 2%; } .catalog ul li:nth-of-type(4n+1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(4n+4) { margin-right: 0; } } @media only screen and (min-width : 1000px) { .catalog ul li a h6, .category ul li a h6, .featured ul li a h6 { font-size: 16px; } .catalog ul li { margin-bottom: 20px; margin-left: 1.2% !important; margin-right: 1.2% !important; width: 17.6%; } .catalog ul li:nth-of-type(4n+1) { clear: none; margin-left: 1.2%; } .catalog ul li:nth-of-type(4n+4) { margin-right: 1.2%; } .catalog ul li:nth-of-type(5n+1) { clear: both; margin-left: 0; } .catalog ul li:nth-of-type(5n+5) { margin-right: 0; } } .product-image a { display: block; } .pimage { margin: 0 auto 15px; } .pcontent .stock { line-height: 1; } .pcontent .error { font-size: 12px; } .pcontent .price, .view-product { } .pcontent .price { font-size: 14px; } .view-product input[type="submit"] { font-size: 16px; padding: 10px 15px; } .page-sort { font-size: 14px; margin-bottom: 30px; text-align: center; } .page-sort.bottom { margin-bottom: 0; margin-top: 15px; } .page-sort.bottom { margin: 2px 0 0; padding: 10px 0 0 0; } .pagination { margin-bottom: 15px; } div.pagination a, div.pagination span.current { color: #999; display: inline-block; float: none; font-size: 14px; font-weight: bold; line-height: 1; margin: 0 3px 5px; padding: 5px; text-decoration: none; -webkit-transition: all .3s; transition: all .3s; } div.pagination span.current { background: #e3e3e3; color: #476a5b; } div.pagination a:hover { background-color: #999; color: #fff; } /* Product Details */ .main-product-details .actions button[type="submit"], .main-product-details .actions input[type="submit"] { display: block; float: none; } .product-wrapper { margin-bottom: 50px; } .product-header { margin-bottom: 15px; text-align: center; } .product-header .price { color: #5b8573; margin: 7px 0; font-size: 20px; } .product-header .price label { color: #333; } .discount { color: #db595a; } .pcontent .stock { margin-bottom: 10px; } .pcontent input[type="submit"] { padding: 7px 15px; } .product-header::after { background: #ccc; content: ""; height: 1px; width: 150px; position: absolute; left: 0; right: 0; margin: auto; bottom: -7px; } .main-product-image { margin-bottom: 10px; } .main-product-image table { table-layout: fixed; margin: 0 auto; text-align: center; width: 100%; } .main-product-image table td { padding: 10px; } .main-product-image ul { text-align: center; } .main-product-image ul li { display: inline-block; margin: 10px 5px; } .main-product-image ul li img { height: 100px; } .main-product-image .bx-wrapper { background: none; border: none; box-shadow: none; } .options td { padding-bottom: 5px; } .catalog.related-prod { margin: 10px 0 40px; } .related-prod.lg { padding: 25px 20px 0; } input[type="submit"].secondary { background: #789c8c; } input[type="submit"].secondary:hover, input[type="submit"].secondary:focus { background: #476a5b; } .wishlist-image { margin-bottom: 10px; } .wishlist-delete a { color: #db595a; } .wishlist-delete a:hover, .wishlist-delete a:focus { color: #999; } /* Check Out */ .cart-footer { margin: 20px 0; text-align: right; } .total-cost { padding: 0 0 10px; } .gridview td, .gridview th { border: 0; } .gridview td:nth-of-type(2n+2), .cart-contents td:nth-of-type(2n) { background: rgba(0,0,0,.04); } .gridview th { background: #5b8573; color: #fff; padding: 10px; } .gridview tr.even, .gridview tr:nth-of-type(odd) { background: rgba(0,0,0,.05); } .breadcrumb { padding: 10px 0 0; margin: 0; color: #fff; } .breadcrumb li { display: inline-block; } .breadcrumb a { display: inline-block; color: #fff; text-decoration: none; } .breadcrumb a:hover { text-decoration: underline; color: #fff; } .breadcrumb span { margin-left: 10px; margin-right: 10px; } @media only screen and (min-width:900px) { #breadcrumb { max-width: 60%; } .breadcrumb { padding: 0; margin: 45px 0 0 15px; text-align: left; /*height: 40px;*/ line-height: 30px; color: #fff; } } @media only screen and (max-width : 34.375em) { .cart-contents tr:first-of-type { display: none; } .cart-contents table { counter-reset: product; } .cart-contents tr:before { background: #5b8573; counter-increment: product; content: "Product " counter(product) ":"; color: #fff; display: block; padding: 5px 15px; width: 100%; } .cart-contents tr:nth-child(n+3) td:first-child { padding-top: 15px; } .cart-contents tr:not(:last-of-type):after { background: #fff; content: ""; display: block; height: 35px; } } /* My Account */ .halfi.block-shipping { margin-bottom: 25px; } .my-account-un { margin-bottom: 30px; } /************************* Footer *************************/ footer { background: #eee; font-size: 14px; text-align: center; z-index: 99; } footer .inner { padding: 25px 15px; } footer nav { display: none; } footer a { text-decoration: none; } footer a:hover, footer a:focus { text-decoration: none; } .socials, footer nav { margin-bottom: 20px; } @media only screen and (min-width: 400px) { /************************* Layout *************************/ /*** Categories ***/ .categories ul li { display: inline-block; margin: 0 2% 10%; max-width: none; vertical-align: top; width: 42.5%; } .main-product-details .actions button[type="submit"], .main-product-details .actions input[type="submit"] { display: inline-block; } a.products-share { display: block; margin-top: 10px; } input[type="submit"].secondary { margin-left: 20px; } } @media only screen and (min-width: 450px) { /************************* Layout *************************/ /* Buckets */ .buckets ul { margin: auto; text-align: center; max-width: 470px; } .ih-item { display: inline-block; } .ih-item:nth-of-type(2n+1) { margin-right: 2%; } .ih-item:nth-of-type(2n+2) { margin-left: 2%; } /* Message */ section.message.intro { margin-bottom: 100px !important; } .message .image { float: left; margin: 0 20px 0 0; width: 150px; } /* Slider */ .slider { font-size: 16px; } .slider .slick-slide { margin: 0 30px; width: 350px; } .slider h2 { font-size: 36px; } .slider h3, .slider h6 { font-size: 22px; } } @media only screen and (min-width : 550px) { /************************* Layout *************************/ /* Message */ .message .icons li { font-size: 22px; } .message .icons li a::before { background-position: 30px center; background-size: auto; margin-bottom: 10px; width: 125px; height: 125px; } .message .icons li:nth-of-type(2) a::before { background-position: -170px center; } .message .icons li:nth-of-type(3) a::before { background-position: -370px center; } /*********************** Shopping ***********************/ /*** Catalog ***/ .featured { padding-left: 50px; padding-right: 50px; } .slider .slick-prev { left: -55px; } .slider .slick-next { right: -55px; } .slider .slick-slide { width: 356px; } .pcontent .tc { display: block; text-align: left; } .pcontent .tc:first-child { padding-right: 0; width: 100%; } .pcontent .tc:last-child { width: 100%; } /*** Product Details ***/ .product-image, .product-details { float: left; width: 40%; } .product-details { margin-left: 2%; padding: 15px 40px; width: 59%; } .category ul li { float: left; max-width: none; width: 30%; } .category ul li:nth-of-type(2) { margin: 0 5%; } } @media only screen and (min-width : 625px) { /************************* Layout *************************/ /* Message */ .message .image { float: left; margin: 0; width: 30%; } .message .text { float: right; width: 68%; } .message.alternate .image { float: right; } .message.alternate .text { float: left; } .message.centered { text-align: center; } .message.centered .text, .message.centered .image { float: none; width: 100%; } /*********************** Shopping ***********************/ .page-sort { text-align: left; } .pagination, .sort-by { float: left; width: 50%; } .sort-by { padding-left: 30px; text-align: right; } .checki.bill-ship { font-size: 14px; left: 10px; position: absolute; text-align: right; top: -25px; } } @media only screen and (min-width: 750px) { /************************* Layout *************************/ /*** Contact ***/ .contact-form, .contact-content { float: left; width: 45%; } .contact-form { padding-left: 30px; width: 55%; } /************************* Layout *************************/ /*** Categories ***/ .categories ul li { width: 27%; } /************************* Shopping *************************/ .main-product-image { padding: 20px 30px 0 0; } .main-product-image, .main-product-details { float: left; width: 50%; } .main-product-details { padding-right: 10px; } /* My Account */ .halfi.block-shipping { margin-bottom: 0; } } /*was 900*/ @media only screen and (min-width : 700px) { /************************* General *************************/ h1 { font-size: 36px; } h2 { font-size: 34px; } h3 { font-size: 24px; } h4 { font-size: 22px; } h5 { font-size: 20px; } h6 { font-size: 18px; } input[type="submit"], button[type="submit"], a.btn, .btn a, a[title="Button"] { font-size: 20px; } /************************* Header *************************/ header { padding: 0; left: 0; position: fixed; top: 0; width: 100%; z-index: 300; } header .logo { background: #333; border-radius: 75%; left: 0; margin: auto; position: absolute; right: 0; -ms-transform: translateY(-80px); -webkit-transform: translateY(-80px); transform: translateY(-80px); -webkit-transition: -webkit-transform .3s, all .3s; transition: all .3s; width: 205px; height: 170px; z-index: 90; } header.small .logo { -ms-transform: translateY(-68px); -webkit-transform: translateY(-68px); transform: translateY(-68px); } header .logo img { width: 100px; -webkit-transition: width .3s; transition: width .3s; } header.small .logo img { width: 80px; } header .logo a { top: 82%; -ms-transform: translateY(-82%); -webkit-transform: translateY(-82%); transform: translateY(-82%); -webkit-transition: none; transition: none; } /************************* Navigation *************************/ nav[id$="nav-copy"], .toggle-menu { display: none; } #main-nav.main-nav, #shop-nav, .htmobile { display: block; } .main-nav { display: block; font-size: 14px; margin: 0 auto; text-align: center; text-transform: uppercase; } nav[id$="-nav"] ul li { display: inline-block; font-weight: bold; } nav[id$="-nav"] ul li a { display: block; color: #fff; padding: 15px; text-decoration: none; } .main-nav > ul > li:nth-of-type(3) { padding-right: 120px; } .main-nav > ul > li:nth-of-type(4) { padding-left: 120px; } .main-nav ul li:hover a { color: #999; } .secondary-nav { background: rgba(80,80,80,.9); font-size: 13px; line-height: 1.8; padding: 0 30px; position: fixed; right: 0; text-align: right; top: auto; width: 100%; z-index: 80; } .shop-nav ul li { color: #fff; margin-left: 25px; } .shop-nav > ul > li:hover { cursor: pointer; } .shop-nav ul li a { color: #fff; padding: 5px 0 !important; } .shop-nav ul li a:hover, .main-nav .shop-nav ul li:hover { color: #d4d4d4 !important; } /* Drop Downs */ nav[id$="-nav"] ul > li > ul { background: #282828; display: block; left: 0; line-height: 1.2 !important; margin: 0; max-height: 0; opacity: 0; overflow: hidden; padding: 0; position: absolute; text-align: left; top: auto; -webkit-transition: max-height .1s ease-in-out 0s, opacity .1s ease-in-out 0s; transition: max-height .1s ease-in-out 0s, opacity .1s ease-in-out 0s; width: 250px; height: auto !important; z-index: 9999; } .shop-nav ul > li > ul { left: auto !important; right: 0; top: auto; width: 150px !important; } .main-nav > ul > li:nth-of-type(1n+4) > ul { left: auto !important; right: 0; } nav[id$="-nav"] ul > li > ul li { border-bottom: 1px solid #676767; display: inline-block; font-size: 16px; font-weight: 400; height: auto !important; margin: 0; padding: 0; position: relative; width: 100%; } .shop-nav ul > li > ul li { font-size: 14px !important; font-weight: 400 !important; text-align: right; } nav[id$="-nav"] ul > li > ul li:last-child { border-bottom: 0; } nav[id$="-nav"] ul > li > ul li a { background: #282828 !important; border: 0 !important; color: #fff !important; display: block; padding: 15px !important; text-indent: 0 !important; -webkit-transition: none; transition: none; } .shop-nav ul > li > ul li a { padding: 7px 15px !important; } nav[id$="-nav"] ul > li > ul li:hover a { background: #202020 !important; } nav[id$="-nav"] ul > li:hover > ul { max-height: 550px; opacity: 1; -webkit-transition: max-height .7s ease-in-out 0s; transition: max-height .7s ease-in-out 0s; } @media (max-width:900px) { /* 700 - 900 needs desktop version so made it fit*/ .main-nav { font-size: 8px !important; } } /************************* Layout *************************/ .homepage section { margin-bottom: 60px; } .full { padding-top: 0; } .interior .container { border-top: 0; padding-top: 205px; /* padding-top: 180px; */ } /* Testimonials */ .testimonials { padding: 60px 0; } .testimonials .slick-list li { font-size: 20px; padding: 20px 40px; } /*** Categories ***/ .categories ul li { width: 20%; margin: 0 2% 6%; } /*** Contact ***/ .contact-form, .contact-content { float: left; width: 45%; } .contact-form { padding-left: 30px; width: 55%; } /************************* Shopping *************************/ /*** Product Details ***/ .main-product-image { width: 42%; } .main-product-details { width: 58%; } .product-image table td { display: table-cell; } /************************* Footer *************************/ footer { font-size: 16px; } footer nav { display: block; } footer nav ul li { display: inline-block; margin: 0 15px 0 0; } } @media only screen and (min-width : 1000px) { .touch .buckets ul { max-width: none; } .touch .ih-item { margin-left: 1% !important; margin-right: 1% !important; } .touch .ih-item:first-of-type { margin-left: 0 !important; } .touch .ih-item:last-of-type { margin-right: 0 !important; } } @media only screen and (min-width : 1040px) { /************************* Navigation *************************/ .main-nav { font-size: 18px; } header.small .main-nav { font-size: 14px; } /************************* Layout *************************/ /* Buckets */ section.buckets { margin-bottom: 0; } .homepage.touch section { margin-bottom: 60px; } .buckets ul { max-width: 100%; } .ih-item { margin: 0 1% 2% !important; } .ih-item:hover .info { -ms-transform: translateY(11%); -webkit-transform: translateY(11%); transform: translateY(11%); } .ih-item:hover .image { -webkit-transform: scale(0.25) translateY(-160%); -ms-transform: scale(0.25) translateY(-160%); transform: scale(0.25) translateY(-160%); } /*********************** Shopping ***********************/ .main-product-image { width: 25%; } .main-product-details { width: 73%; } } @media only screen and (min-width : 1350px) { /************************* Header *************************/ header .logo { -ms-transform: translateY(-70px); -webkit-transform: translateY(-70px); transform: translateY(-70px); width: 275px; height: 190px; z-index: 90; } header.small .logo { width: 230px; height: 160px; } header .logo img { width: 129px; -webkit-transition: width .3s; transition: width .3s; } header .logo a { top: 75%; -ms-transform: translateY(-75%); -webkit-transform: translateY(-75%); transform: translateY(-75%); -webkit-transition: none; transition: none; } /************************* Navigation *************************/ .main-nav { font-size: 20px; } .main-nav > ul > li:nth-of-type(3) { padding-right: 170px; } .main-nav > ul > li:nth-of-type(4) { padding-left: 170px; } /************************* Layout *************************/ /* Buckets */ .ih-item { height: 300px; width: 300px; } .title span { font-size: 36px; } .ih-item .info, .touch .ih-item .info { font-size: 16px; line-height: 1.5; } .ih-item .info h3 { font-size: 32px; padding: 55px 0 0; } .ih-item .btn { margin-top: 20px; } .ih-item .btn span, .btn.white-btn a { font-size: 16px; } /*********************** Shopping ***********************/ /*** Catalog ***/ .slick-prev, .slick-next { bottom: auto; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 50px; height: 50px; } .slick-prev { left: -75px; } .slick-next { right: -75px; } .featured button::after { font: 44px/1 FontAwesome; } } @media only screen and (min-width : 1800px) { /************************* Layout *************************/ /* Buckets */ .ih-item { height: 400px; width: 400px; } .ih-item .info, .touch .ih-item .info { font-size: 18px; } .ih-item .info h3 { font-size: 36px; padding: 75px 0 0; } .ih-item .btn { margin-top: 30px; } .ih-item .btn span, .btn.white-btn a { font-size: 18px; } } @media only screen and (max-width : 750px) { /* Taking off the float styles used on images */ .fr, .fl { display: inline-block; float: none !important; margin: 10px auto !important; } .actions .fr button[type="submit"], .actions .fr input[type="submit"], .actions .fl button[type="submit"], .actions .fl input[type="submit"] { display: inline-block; float: none !important; margin-left: 0 !important; } } .b-lazy { -webkit-transition: opacity 500ms ease-in-out; transition: opacity 500ms ease-in-out; opacity: 0; } .b-lazy.b-loaded { opacity: 1; } .loading { background: url(../Images/loader.gif) no-repeat center center; } .reputationLogosTop img { /*max-width:25%;*/ max-width: 15%; margin: 10px; } .reputationLogosTop { text-align: center; } .reputationLogosBottom img { /*max-width: 32%;*/ max-width: 15%; margin: 10px; } .reputationLogosBottom { text-align: center; margin-bottom: 5px; } .affiliationsFooter { text-align: center; border-top: 5px solid #EEEEEE; padding: 40px; z-index: 99; background-color: #fff; } .affiliationsFooter h2 { margin-top: 20px; } /*1385*/ @media (min-width : 1520px) { .reputationLogosTop { width: 50%; display: inline; } .reputationLogosBottom { width: 50%; display: inline; } } #purchaseExistingTable td { padding: 2px; border: 1px solid black; } #purchaseExistingTable th { padding: 2px; border: 1px solid black; } @media only screen and (min-width : 650px) { .pagination { float: none; text-align: left; width: 50%; } .advenced-search-btn { float: right; text-align: right; width: 50%; } } div.pagination span.current { padding: 8px 10px; background: #b22625; } div.pagination span.current, div.pagination a:hover, div.pagination a:focus { background: #b22625; color: #fff; } div.pagination span { background: #b22625; } div.pagination a:hover, div.pagination a:focus { background: #565f69; } div.pagination a, div.pagination span { background: #989fa6; color: #fff; display: inline-block; font-size: 16px; line-height: 16px; margin: 0 0 5px; padding: 8px 10px 7px; text-decoration: none; } /* Banner */ .banner { max-width: 960px; margin: 0 auto; } .banner .text { padding: 30px; text-align: center; } .banner .text p { margin: 0; line-height: 1; } .banner .text .btn { margin-top: 20px; } .banner .arrow, .slider .arrow { position: absolute; top: 0; width: 35px; height: 35px; background-color: #fff; color: #333; -webkit-transition: all 0.3s; transition: all 0.3s; } .slider .arrow { top: -20px; } .banner .arrow:hover, .banner .arrow:focus, .slider .arrow:hover, .slider .arrow:focus { background-color: #ccc; cursor: pointer; } .banner .arrow:hover:before, .banner .arrow:focus:before, .slider .arrow:hover:before, .slider .arrow:focus:before { opacity: 0.5; } .banner .arrow.arrow-prev, .slider .arrow.arrow-prev { left: 0; } .banner .arrow.arrow-prev:before, .slider .arrow.arrow-prev:before { content: ''; display: block; background-image: url(/Images/arrow-prev.png); background-size: cover; background-repeat: no-repeat; background-position: center; width: 13px; height: 20px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 0.3s; transition: all 0.3s; } .banner .arrow.arrow-next, .slider .arrow.arrow-next { right: 0; } .banner .arrow.arrow-next:before, .slider .arrow.arrow-next:before { content: ''; display: block; background-image: url(/Images/arrow-next.png); background-size: cover; background-repeat: no-repeat; background-position: center; width: 13px; height: 20px; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-transition: all 0.3s; transition: all 0.3s; } @media (min-width: 700px) { .banner { margin: 134px auto; } } @media (min-width: 900px) { .banner { margin: 144px auto; } .slider .arrow { top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; } .slider .arrow.arrow-prev:before, .slider .arrow.arrow-next:before { width: 26px; height: 40px; } } @media (min-width: 1040px) { .banner { margin: 190px auto; } } @media (min-width: 1200px) { .banner { max-width: none; margin: 150px auto 0; background-color: #eee; } .banner li { display: table; width: 100%; max-width: none; } .banner .image, .banner .text { display: table-cell; width: 50%; vertical-align: middle; } .banner .image { background-size: cover; background-repeat: no-repeat; background-position: center center; } .banner .image img { opacity: 0; } .banner .text { padding: 100px; } } @media (min-width: 1350px) { .banner { margin: 154px auto 0; } } @media (min-width: 1600px) { .banner .text { padding: 100px 150px; } .banner .arrow { top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); width: 60px; height: 60px; } .banner .arrow.arrow-prev:before, .banner .arrow.arrow-next:before { width: 26px; height: 40px; } } @media (min-width:700px) { .full.interior.special { padding-top: 134px; } } .full.interior.special .container { padding-bottom: 0; padding-top: 0; } .full.interior.special h1, .full.interior.special h2, .full.interior.special h3, .full.interior.special h4, .full.interior.special h5, .full.interior.special h6 { font-family: 'Raleway', sans-serif; font-weight: 700; } .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .vimeo-wrapper iframe { width: 100vw; height: 55.75vw; } @media (min-width:700px) { } @media (min-width:992px) { .vimeo-wrapper { width: 100%; height: auto; pointer-events: none; overflow: hidden; } .vimeo-wrapper iframe { height: 56.25vw; } } @media (min-width:992px) { .special .panel.one { height: auto; margin-top: 0; width: 100%; } } .special a.btn, .special .btn a { background-color: #884F0A; text-transform: uppercase; font-family: 'Raleway', sans-serif; } .special a.btn:hover, .special a.btn:focus, .special .btn a:hover, .special .btn a:focus { background-color: #999; } .big-cta a.btn { background-color: #884F0A; text-transform: uppercase; font-family: 'Raleway', sans-serif; padding: 15px 40px; } .big-cta a.btn:hover, .big-cta a.btn:focus { background-color: #999; } @media (min-width: 1200px) { .big-cta a.btn { padding: 15px 75px; font-size: 24px; } } .panel { background-color: #fff; } .panel.one { background-color: transparent; } .panel.two { background-color: #f2f2f2; } .panel.two .panel-inner { padding: 50px 0; } .panel.two .big-cta { text-align: center; padding: 30px 20px 40px; } .panel.two .text-block { padding: 40px 20px; text-align: center; max-width: 800px; margin: auto; } .panel.two .text-block:before { content: ''; width: 100px; height: 4px; background-color: #884F0A; position: absolute; display: block; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); top: 0; } .panel.two .panel-card { background-color: #fff; } .panel.two .panel-card .card-image img { width: 100%; } .panel.two .panel-card .card-text { padding: 20px; } @media (min-width: 800px) { .panel.two .panel-card { max-width: 800px; margin: 20px auto 40px; padding: 20px; } .panel.two .panel-card .card-image, .panel.two .panel-card .card-text { width: 50%; } .panel.two .panel-card .card-image { float: right; } .panel.two .panel-card:nth-of-type(even) .card-image { float: left; } .panel.two .panel-card .card-text { position: absolute; top: 50%; -ms-transform: translateY(-50%); transform: translateY(-50%); left: 0; padding: 50px; } .panel.two .panel-card:nth-of-type(even) .card-text { left: calc(50%); } } @media (min-width: 1200px) { .panel.two .text-block p { font-size: 24px; } .panel.two .panel-card { max-width: 1200px; margin: 25px auto; padding: 50px; } .panel.two .panel-card:last-of-type { margin-bottom: 0; } .panel.two .text-block { max-width: 1200px; } } .panel.four { font-family: 'Raleway', sans-serif; font-weight: 700; text-transform: uppercase; } .panel.four .panel-inner { max-width: 1200px; margin: auto; padding: 75px 20px; } .panel.four .panel-inner:before { content: ''; width: 100px; height: 4px; background-color: #884F0A; position: absolute; display: block; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); top: 37px; } .panel.four h2 { text-align: center; } .panel.four ul { padding-left: 20px; margin-bottom: 10px; } .panel.four ul > li:first-child { color: #884F0A; } .panel.four ul > li:first-child:before { content: '+'; margin-right: 8px; margin-left: -15px; } @media (min-width: 600px) { .panel.four ul li { display: inline-block; } .panel.four ul > li:first-child { width: 150px; text-align: right; margin-right: -5px; vertical-align: top; } .panel.four ul > li:last-child { width: calc(100% - 150px); padding-left: 25px; } } @media (min-width: 1200px) { .panel.four ul li { font-size: 24px; } .panel.four ul > li:first-child { width: 200px; } .panel.four ul > li:last-child { width: calc(100% - 200px); } } .panel.six .panel-inner { max-width: 1200px; margin: auto; text-align: center; padding: 75px 0 50px; } .panel.six .panel-inner:before { content: ''; width: 100px; height: 4px; background-color: #884F0A; position: absolute; display: block; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); top: 37px; } .panel.seven { background-color: #2A2F33; color: #fff; padding: 100px 0; } .panel.seven .panel-inner { padding: 0 20px; } .panel.seven .panel-inner:before { content: ''; width: 100px; height: 4px; background-color: #884F0A; position: absolute; display: block; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); top: -37px; } .panel.seven h2 { text-align: center; margin-bottom: 40px; } .panel.seven .split-component { max-width: 800px; margin: auto; } .panel.seven .split-component .split-image { margin-bottom: 30px; } .panel.seven .split-component .split-image img { width: 100%; } .panel.seven .split-component .split-text h6 { color: #884F0A; text-transform: none; font-family: inherit; margin-bottom: 5px; } @media (min-width: 1200px) { .panel.seven .split-component { max-width: 1200px; display: table; } .panel.seven .split-component .split-image { display: table-cell; width: 70%; vertical-align: middle; padding-right: 100px; } .panel.seven .split-component .split-text { display: table-cell; width: 30%; vertical-align: middle; } }