/** Shopify CDN: Minification failed Line 25:144 Expected identifier but found "*" Line 33:293 Expected identifier but found "*" Line 570:0 Comments in CSS use "/* ... */" instead of "//" Line 648:35 Expected identifier but found "0" Line 868:44 Expected ":" Line 1236:2 Expected identifier but found "*" **/ /* * Testament Shopify theme * Copyright 2014, Underground Media * www.shopifythemes.net * * Gridlock - A CSS responsive grid system [12 column - Desktop standard] * @author Ben Plum * @version 0.2.0 * * Copyright © 2013 Ben Plum * Released under the MIT License */ /* !Reset 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; *behavior: url(boxsizing.htc); } /* !Defaults */ .gridlock .row { margin-left: auto; margin-right: auto; width: 960px; /* Fallback */ } .gridlock .row:after { clear: both; content: "."; display: block; height: 0; line-height: 0; visibility: hidden; } .gridlock .row .row { margin-left: -1.0416666666666667%; margin-right: -1.0416666666666667%; width: 102.0833333333333334%; } .gridlock .row [class*="desktop-"] { float: left; margin-left: 1.0416666666666667%; margin-right: 1.0416666666666667%; } .gridlock .row [class*="desktop-"].right { float: right; } .gridlock .row [class*="desktop-"].padded { margin-left: 0; margin-right: 0; padding-left: 1.0416666666666667%; padding-right: 1.0416666666666667%; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; *behavior: none; } .fl { float: left; } .fr { float: right; } .first { clear: left; } /* !Rows, Widest to Thinest */ @media screen and (min-width: 1220px) { .gridlock .row { width: 1200px; } } @media screen and (max-width: 1220px) { .gridlock .row { width: 960px; } } @media screen and (max-width: 980px) { .gridlock .row { width: 720px; } } @media screen and (max-width: 740px) { .gridlock .row { width: 480px; } } @media screen and (max-width: 500px) { .gridlock .row { width: 300px; } } /* !Desktop - Default, 12 column, 1220 + 960 (min 980), IE Standard */ .gridlock .row .desktop-1 { width: 6.25%; } .gridlock .row .desktop-2 { width: 14.5833333333333333%; } .gridlock .row .desktop-3 { width: 22.9166666666666667%; } .gridlock .row .desktop-4 { width: 31.25%; } .gridlock .row .desktop-5 { width: 39.5833333333333333%; } .gridlock .row .desktop-6 { width: 47.9166666666666667%; } .gridlock .row .desktop-7 { width: 56.25%; } .gridlock .row .desktop-8 { width: 64.5833333333333333%; } .gridlock .row .desktop-9 { width: 72.9166666666666667%; } .gridlock .row .desktop-10 { width: 81.25%; } .gridlock .row .desktop-11 { width: 89.5833333333333333%; } .gridlock .row .desktop-12 { width: 97.9166666666666667%; } /* Push Cells */ .gridlock .row .desktop-push-1 { margin-left: 9.375%; } .gridlock .row .desktop-push-2 { margin-left: 17.7083333333333333%; } .gridlock .row .desktop-push-3 { margin-left: 26.0416666666666667%; } .gridlock .row .desktop-push-4 { margin-left: 34.375%; } .gridlock .row .desktop-push-5 { margin-left: 42.7083333333333334%; } .gridlock .row .desktop-push-6 { margin-left: 51.0416666666666667%; } .gridlock .row .desktop-push-7 { margin-left: 59.375%; } .gridlock .row .desktop-push-8 { margin-left: 67.7083333333334%; } .gridlock .row .desktop-push-9 { margin-left: 76.0416666666668%; } .gridlock .row .desktop-push-10 { margin-left: 84.375%; } .gridlock .row .desktop-push-11 { margin-left: 92.7083333333335%; } /* Center Cells */ .gridlock .row [class*="desktop-"].center { margin-left: auto; margin-right: auto; } /* !Generic, fractions */ .gridlock .row .desktop-third { width: 31.25%; } .gridlock .row .desktop-half { width: 47.9166666666666667%; } .gridlock .row .desktop-full { width: 97.9166666666666667%; } .gridlock .row .desktop-push-third { margin-left: 34.375%; } .gridlock .row .desktop-push-half { margin-left: 51.0416666666666667%; } /* !Desktop - Max, 12 column, 1200 (min 1221) */ @media screen and (min-width: 1221px) { .gridlock .row .max-1 { width: 6.25%; } .gridlock .row .max-2 { width: 14.5833333333333333%; } .gridlock .row .max-3 { width: 22.9166666666666667%; } .gridlock .row .max-4 { width: 31.25%; } .gridlock .row .max-5 { width: 39.5833333333333333%; } .gridlock .row .max-6 { width: 47.9166666666666667%; } .gridlock .row .max-7 { width: 56.25%; } .gridlock .row .max-8 { width: 64.5833333333333333%; } .gridlock .row .max-9 { width: 72.9166666666666667%; } .gridlock .row .max-10 { width: 81.25%; } .gridlock .row .max-11 { width: 89.5833333333333333%; } .gridlock .row .max-12 { width: 97.9166666666666667%; } /* Push Cells */ .gridlock .row .max-push-1 { margin-left: 9.375%; } .gridlock .row .max-push-2 { margin-left: 17.7083333333333333%; } .gridlock .row .max-push-3 { margin-left: 26.0416666666666667%; } .gridlock .row .max-push-4 { margin-left: 34.375%; } .gridlock .row .max-push-5 { margin-left: 42.7083333333333334%; } .gridlock .row .max-push-6 { margin-left: 51.0416666666666667%; } .gridlock .row .max-push-7 { margin-left: 59.375%; } .gridlock .row .max-push-8 { margin-left: 67.7083333333334%; } .gridlock .row .max-push-9 { margin-left: 76.0416666666668%; } .gridlock .row .max-push-10 { margin-left: 84.375%; } .gridlock .row .max-push-11 { margin-left: 92.7083333333335%; } } /* !Tablet, 6 column, 720 (min 739) */ @media screen and (min-width: 739px) and (max-width: 980px) { .gridlock .row [class*="desktop-push-"] { margin-left: 1.0416666666666667%; margin-right: 1.0416666666666667%; } .gridlock .row .tablet-1 { width: 14.5833333333333333%; } .gridlock .row .tablet-2 { width: 31.25%; } .gridlock .row .tablet-3 { width: 47.9166666666666667%; } .gridlock .row .tablet-4 { width: 64.5833333333333333%; } .gridlock .row .tablet-5 { width: 81.25%; } .gridlock .row .tablet-6 { width: 97.9166666666666667%; } /* Push Cells */ .gridlock .row .tablet-push-1 { margin-left: 17.7083333333333333%; } .gridlock .row .tablet-push-2 { margin-left: 34.375%; } .gridlock .row .tablet-push-3 { margin-left: 51.0416666666666667%; } .gridlock .row .tablet-push-4 { margin-left: 67.7083333333334%; } .gridlock .row .tablet-push-5 { margin-left: 84.375%; } /* !Generic, fractions */ .gridlock .row .tablet-third { width: 31.25%; } .gridlock .row .tablet-half { width: 47.9166666666666667%; } .gridlock .row .tablet-full { width: 97.9166666666666667%; } .gridlock .row .tablet-push-third { margin-left: 34.375%; } .gridlock .row .tablet-push-half { margin-left: 51.0416666666666667%; } } /* !Mobile, 3 column, 300 + 480 (max 740) */ @media screen and (max-width: 740px) { .gridlock .row [class*="desktop-push-"], .gridlock .row [class*="tablet-push-"] { margin-left: 1.0416666666666667%; margin-right: 1.0416666666666667%; } .gridlock .row .mobile-1 { width: 31.25%; } .gridlock .row .mobile-2 { width: 64.5833333333333333%; } .gridlock .row .mobile-3 { width: 97.9166666666666667%; } /* Push Cells */ .gridlock .row .mobile-push-1 { margin-left: 34.375%; } .gridlock .row .mobile-push-2 { margin-left: 67.7083333333334%; } /* !Generic, fractions */ .gridlock .row .mobile-third { width: 31.25%; } .gridlock .row .mobile-half { width: 47.9166666666666667%; } .gridlock .row .mobile-full { width: 97.9166666666666667%; } .gridlock .row .mobile-push-third { margin-left: 34.375%; } .gridlock .row .mobile-push-half { margin-left: 51.0416666666666667%; } } /* !Mobile - Min, 300 (max 500) */ @media screen and (max-width: 500px) { .gridlock .row .min-full { width: 97.9166666666666667%; } } * { margin: 0; } #ienav { display: none; } html, body { height: 100%; } body { color: #050505; background: #ffffff; font-size: 13px; font-family:'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Lucida, Helvetica, Arial, sans-serif; line-height: 1.6em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } img { max-width: 100%; border: 0; } h1, h2, h3, h4, h5, h6 { color: #000000; font-family:'Montserrat', sans-serif; font-weight: normal; letter-spacing: 2px; margin-top: 0; margin-bottom: 10px; line-height: normal; -webkit-font-smoothing: antialiased; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; color: #000000! important; } h1 { font-size: 18px; } h2 { font-size: 14px; } h3 { font-size: 14px; } h4 { font-size: 14px; } h5 { font-size: 14px; } h6 { font-size: 14px; } h1, h2, h3, h4, h5, h6, p, dl, hr, ol, ul, pre, table, address, fieldset { margin-bottom: 10px; } p { font-size: 13px; margin-bottom: 10px; } strong { font-weight: bold; } em { font-style:italic; } pre { font-family: "Courier New", Courier, monospace; font-size: 13px; font-weight:bold; } p.date { } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } a { text-decoration: none; color: #777777; outline: 0; -webkit-transition:color .5s ease-in; -moz-transition:color .5s ease-in; -o-transition:color .5s ease-in; transition:color .5s ease-in; } a:hover { color: #000000; text-decoration: none;} a:visited { color:#777777; text-decoration: none; } a:focus { outline: none; } /* .row hr, .row p, .row ul, .row ol, .row dl, .row pre, .row address, .row table, .row form {margin-bottom: 1.6em;} */ dt { font-weight: bold; } ol { padding: 0; margin-left: 0; margin-bottom: 20px; text-indent: 0; list-style-position: inside; } ul { padding: 0; margin: 0 0 20px 0; list-style:disc inside;} li { } blockquote { font-family: Georgia, "Times New Roman", Times, sans-serif; font-size:18px; line-height: 24px; font-style:italic; padding-left:35px; color: #999; margin: 20px 0; } input, textarea { } hr { background:#89898b; border:none; color:#89898b; display:block; height:1px; margin-top: 20px; width:100%;} .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { width: 100%; max-width: 100%; background: #f4e45d; border: none; -webkit-transition: background .5s ease,color .5s ease; -moz-transition: background .5s ease,color .5s ease; -o-transition: background .5s ease,color .5s ease; transition: background .5s ease,color .5s ease; border-radius: 3px; -webkit-border-radius:3px; -moz-border-radius:3px; -webkit-appearance: none; color: #ffffff; display: inline-block; font-size: 12px; font-weight: normal; text-decoration: none; cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 15px 0; font-family: 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Lucida, Helvetica, Arial, sans-serif; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color: #ffffff; background: #fee509; } .button.full-width, button.full-width, input[type="submit"].full-width, input[type="reset"].full-width, input[type="button"].full-width { width: 100%; padding-left: 0 !important; padding-right: 0 !important; text-align: center; } /* Fix for odd Mozilla border & padding issues */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* #Forms ================================================== */ form { margin-bottom: 0; } fieldset { margin-bottom: 20px; } input[type="text"], input[type="password"], input[type="email"], textarea, select { border: 1px solid #ccc; padding: 6px 4px; outline: none; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; font: 13px 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Lucida, Helvetica, Arial, sans-serif; color: #777; margin: 0; width: 100%; max-width: 100%; display: block; margin-bottom: 20px; background: #fff; } select { padding: 0; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, textarea:focus { color: #444; -moz-box-shadow: 0 0 3px rgba(0,0,0,.2); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 3px rgba(0,0,0,.2); } textarea { min-height: 60px; min-width: 300px; } label, legend { display: block; font-weight: bold; font-size: 13px; margin-bottom: 5px; } select { width: 220px; } input[type="checkbox"] { display: inline; } label span, legend span { font-weight: normal; font-size: 13px; color: #444; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #ccc; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #ccc; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #ccc; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #ccc; } input[type=text], input[type=password], input[type=email], input[type=url], input[type=number] { width: 100%; background: #fff; border: 1px solid #89898b; padding: 15px 0px; margin: 0px; margin-bottom: 20px; max-width: 100%; text-indent: 17px; outline: none; } textarea { width: 100%; background: #fff; border: 1px solid #89898b; height: 200px; margin: 0px; margin-bottom: 40px; max-width: 100%; padding: 2% 17px; outline: none; } /* =============== */ /* = Start CSS = */ /* =============== */ header { background: rgba(0,0,0,0); line-height: 30px; } ul#social-icons { margin-bottom: 0; text-align: left; z-index: 5; position: relative; list-style: none; } ul#social-icons li { text-align: left; display: inline; padding: 0 10px 0 0; } ul#social-icons li a { color: #444444; } ul#social-icons li a:hover { color: #fee509; } #search { width: 300px; text-align: center; margin: 0 auto; } #search_popup { text-align: center; } #search_popup #q { text-indent: 0; text-align: center; } /* ====== Quick Cart ===== */ header .icon-2x { font-size: 14px! important; } ul#cart { float:right; margin-bottom: 0; text-align: right; z-index: 5; position: relative; list-style: none; margin-top: 0; } ul#cart li { display: inline; padding: 0 0 0 10px; } ul#cart li a { color: #444444; } ul#cart li a:hover { color: #fee509; } ul#cart li.cart-overview { position: relative; } ul#cart li.cart-overview:hover #crt { display: block; } ul#cart li.seeks-mobile { display: none; } .icon-shopping-cart { margin-right: 5px; } #crt { top: 15px; padding-top: 5px; position: absolute; right: 0; z-index: 30; width: 300px; display: none; background: #fff; color: #050505; border: 1px solid #eee; } .quick-cart-item { border-bottom: 1px solid #eee; width: 280px; margin-left: 10px; float: left; padding-top: 10px; padding-bottom: 10px; clear: left; } .quick-cart-image { height: 80px; width: 70px; float: left; } .quick-cart-image img { max-width: 60px; max-height: 80px; height: auto! important; } .quick-cart-details { color: #fff; margin-left: 80px; line-height: 15px! important; } .quick-cart-details p { padding: 0 10px 0 0; margin: 0! important; text-align: left; font-size: 11px; color: #050505! important; } .quick-cart-details a { padding-left: 0! important; font-size: 11px! important; line-height: initial! important; color: #050505! important; height: auto! important; } a.checkout-link { color: #777777! important; float: left; line-height: 40px; width: 100%; clear: left; text-align: center; display: block; font-weight: bold; } a.checkout-link:hover { color: #000000! important; } .remove_item { float: left; margin-top: 10px; } #hello { text-align: center; } #hello p { margin-bottom: 0; color: #626060; font-size: 12px; font-weight: 300; } #logo { position: relative; margin-top: 15px; text-align: center; padding: 0 20px 20px 20px; } #logo a { font-family: 'Arvo', serif; font-size: 24px; text-transform: uppercase; font-weight: 700; color: #444444; text-decoration: none; } #logo img { max-width:100%;} #content { margin-bottom: 50px; margin-top: 10px; position: relative; } .smallcash { font-size: 12px; margin-left: 5px; } /* =============== */ /* = index.liquid = */ /* =============== */ .mask { background: url(//www.yellow108.com/cdn/shop/t/14/assets/mask.png?v=51730603974927490741444287496); height: 100%; width: 100%; top:0; position: absolute; z-index: 1; } #product-carousel { } #product-carousel .product-car { padding: 0; margin: 5px; position: relative; } #product-carousel .product-car img { } .customNavigation{ margin: -5px 0 10px; text-align: center; } //use styles below to disable ugly selection .customNavigation a{ -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .customNavigation a:hover { cursor: pointer; } .btn.next { border: 1px solid #f0f0f0; color: #444; padding: 4px 7px; font-weight: 100; background: #fff; margin-right: 5px; } .btn.prev { border: 1px solid #f0f0f0; color: #444; padding: 4px 7px; font-weight: 100; background: #fff; margin-right: -5px; } .prod-vendor { text-align: center; } .section-title.lines { position: relative; text-align: center; margin-top: 20px; margin-bottom: 10px; } .section-title.lines h1 { display: inline-block; text-transform: uppercase; padding: 8px 23px; margin: 0; background-color: #ffffff; position: relative; z-index: 1; } .section-title.lines h2 { display: inline-block; text-transform: uppercase; padding: 8px 23px; margin: 0; background-color: #ffffff; position: relative; z-index: 1; } .section-title h5 { text-align: center; margin-top: -3px; } .section-title.lines:after { content: ''; width: 100%; display: inline-block; border-bottom: 1px solid #89898b; position: absolute; left: 0; top: 50%; z-index: 0; } #collection-loop { margin-top: -30px; } .collection-index { background: #fff; position: relative; } .collection-info { padding: 10px; 0; width: 100%; text-align: center; position: absolute; top: 50%; margin-top: -40px; background: rgba(255,255,255,0.9); } .collection-info h3 { text-transform: uppercase; margin-bottom: 0; } .collection-info p { margin-bottom: 0; text-transform: uppercase; font-size: 12px; } .collection-image { padding: 2px; } #promo-images { float: left; } #index-content-left { float: left; margin-bottom: 30px; } #index-pages h3 { text-align: center; margin-bottom: 20px; } .pages-left-content { padding-top: 5px; } .padded { margin-bottom: 15px; } /* =============== */ /* = collections = */ /* =============== */ #product-loop { margin: 0 auto; width: 100%; min-width: 100%; } #product-loop .product-index { margin: 0 5px 10px; border-radius: 0; overflow: hidden; background: #fff; } .masonry, .masonry .masonry-brick { -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -ms-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .masonry { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .masonry .masonry-brick { -webkit-transition-property: left, right, top; -moz-transition-property: left, right, top; -ms-transition-property: left, right, top; -o-transition-property: left, right, top; transition-property: left, right, top; } #collection-description { float: left; padding-bottom: 10px; margin-bottom: 10px; } #collection-description h1 { text-align: center; margin-bottom: 10px; } #full-width-filter { padding-bottom: 20px; border-bottom: 1px solid #89898b; overflow: hidden; float: right; margin-bottom: 20px; } #side-filter .clearfix.filter { margin-bottom: 20px; } span.customSelect { font:12px sans-serif; background:#fff url(//www.yellow108.com/cdn/shop/t/14/assets/select.png?v=165875623313023863111444287497) right center no-repeat; border:1px solid #ddd; color:#555; padding:7px 9px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px 2px; width:100%; } .product-quick-view { overflow: hidden; } .product-info form { margin-top: 20px; } .product-index .single-option-selector { margin: 5px auto 10px; } .selector-wrapper label { float: left; } .product-index img { display: block; margin: 0 auto 0; } .product-index img a { border: 0; } .product-index .product-info { padding-bottom: 30px; } .product-info { text-align: center; padding-top: 20px; padding-bottom: 15px; position: relative; } #product-loop .product-index .product-info { border-bottom: 0 solid #000000; } .product-info-inner { width: 96%; margin: 0 auto; } .product-info-inner h4 { font-size: 11px; letter-spacing: initial; } .product-info h3 { letter-spacing: initial; margin-bottom: 10px; font-size: 12px; } .product-info p { font-size: 13px; margin-bottom: 0; } .product-info a { text-decoration: none! important; text-transform: uppercase; } .price { font-size: 12px; margin-bottom: 20px; font-family: 'Montserrat', sans-serif; } .compare-price, .product-price { } .was, .product-compare-price, .compare-price { color: #ba2323; text-decoration: line-through; } .was { display: inline; margin-left: 5px; } .onsale { display: inline; } .product-index-inner { position: relative; } .pre-order { z-index: 2; color: #fff; background: #000;} .new { z-index: 2; color: #fff; background: #000;} .sale-item { color: #fff; background: #000;} .so { z-index: 3; color: #fff; background: #000;} .product-modal { font-size: 12px; background: #b6b6ba; color: #ffffff; padding: 5px 8px; } .product-modal:hover { background: #89898b; color: #ffffff; } .quick-shop { overflow: hidden; width: 720px; } .product-quick-view #product-photos { float: left; width: 49%; margin-right: 0.8%; } .product-quick-view #product-right { float: left; width: 49%; margin-left: 0.8%; } .quick-shop .thumbnail { width: 24%; vertical-align: top; display: inline-block; } .product-index:hover .icn, .product-index.hover .icn { opacity: 0; } .product-car:hover .icn, .product-car.hover .icn { opacity: 0; } .icn { -webkit-transition: opacity 1s ease-out; width: 50px; height: 50px; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; position: absolute; top: 10px; right: 10px; text-align: center; line-height: 50px; font-size: 11px; } .show { display: none; } #sidebar h1 { margin-bottom: 20px; } #sidebar h4 { text-transform: uppercase; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #89898b; } #sidebar ul { list-style-type: none; margin-bottom: 20px; } #sidebar ul li a.current { border-bottom: 1px solid #89898b; text-decoration: none; } /* ================ */ /* = Product page = */ /* ================ */ .bigimage { text-align: center; margin-bottom: 20px; max-width: 548px; } .active img { border:1px solid #ccc !important;} .thumbnail { margin-bottom: 10px; border: 1px solid #fff; } #product-price { font-size: 16px; margin-bottom: 10px; } #product-right { background: #ffffff; padding: 20px; border: 7px double #f0f0f0; } #product-description { text-align: center; } #product-description h1, #product-right h5 { text-transform: uppercase; } #product-description form { margin-bottom: 10px; border-top: 1px solid #89898b; border-bottom: 1px solid #89898b; padding-top: 10px; } .product-add { padding: 10px 0 0; } .quantity { font-weight: bold; text-align: center; margin: 0 5px! important; width: 70px! important; display: inline-block! important; padding: 10px 0! important; text-indent: 0! important; } .up { border: 1px solid #f0f0f0; padding: 6px 8px; display: inline; color: #050505; } .down { border: 1px solid #f0f0f0; padding: 6px 8px; display: inline; color: #050505; } .up:hover, .down:hover { cursor: pointer; } .add { text-transform: uppercase; margin: 20px auto; display: block! important; clear: left; width: 50%! important; } .desc { padding-top: 10px; } .full-click { display: block; text-align: center; margin-top: 20px; } #related { margin-top: 20px; padding: 20px 0; float: left; text-align: center; } ul#popups { margin: 20px 0 0; list-style-type: none; text-align: center; } ul#popups li { display: inline; margin-right 10px; border-right: 1px solid #89898b; padding-right: 10px; margin-left: 10px; } ul#popups li.first { margin-left: 0; } ul#popups li.last { border-right: 0; } #social { float: left; width: 100%; padding-bottom: 10px; } #product-navigation { text-align: center; } #back-forth img { margin: 0 5px; vertical-align: middle; max-width: 160px; } .backto { margin-bottom: 10px; display: block; } .prev-prod { margin-right: 10px; } .next-prod { margin-left: 10px; } .prev-prod, .next-prod { display: inline-block; } .share-icons a { margin: 0 5px; } #lower-description { text-align: center; } ul#sortme { text-align: center; list-style-type: none; width: 100%; } ul#sortme li { text-align: left; display: inline-block; margin: 0 10px; } ul#sortme li p { text-align: center; } .current { } ul#sort-me li.current:after { content: " \2713 "; } .what-is-it { margin-bottom: 15px; } .what-is-it label { display: inline; margin-right: 10px; } /* =============== */ /* = Cart = */ /* =============== */ #cartform { margin-top: 20px; } .cart-item { display: table-cell; } .cart-image { display: inline-block; margin-right: 10px; } .cart-image img { vertical-align: middle; } .cart-title { display: inline-block; } table { width: 100%; border-collapse: collapse; } /* Zebra striping */ tr:nth-of-type(odd) { } th { background: #ffffff; font-weight: normal; } td, th { padding: 10px; border: 1px solid #89898b; text-align: left; } #basket-right { text-align: center; } #basket-right h4 { } #basket-right p { margin-bottom: 20px; } #basket-right img { width: 50px; } #note { margin-top: 10px; } #cart-notes { margin-top: 20px; margin-bottom: 20px; } /* =============== */ /* = Blogs & Pages = */ /* =============== */ .rte h1 { border-bottom: 0! important; text-align: inherit! important; margin-bottom: inherit! important; } #page { clear: left; margin-bottom: 50px; } #page h1 { text-align: center; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #89898b; } #page h1.page-title { text-align: left! important; } #page-sidebar h2 { padding-bottom: 8px; margin-bottom: 20px; border-bottom: 1px solid #89898b; } #page-sidebar ul { list-style-type: none; } #page-sidebar ul li { display: block; margin-bottom: 10px; padding-bottom: 5px; } #article-loop { margin: 0 auto; width: 100%; min-width: 100%; } .article-index { margin: 0 5px 10px; border-radius: 0; overflow: hidden; background: #fff; padding-top: 20px; display:inline-block; } .article-info { border-bottom: 0 solid #000000; } .article-info-inner { width: 96%; margin: 0 auto; } .article-info h2 { letter-spacing: initial; margin-bottom: 10px; text-align: center; } .posted { text-align: center; margin-bottom: 20px; } .post-tags { clear: left; display: block; text-align: center; } .article-info p { font-size: 13px; margin-bottom: 0; } .article-info a { text-decoration: none! important; text-transform: uppercase; } .article-content { margin-top: 10px; margin-bottom: 10px; } .article-index .share-icons { text-align: center! important; } .article-index .readmore { text-align: center! important; } .share-icons a { color: #b6b6ba; } .share-icons a:hover { color: #fee509; } #blog-article .share-icons { text-align: center! important; } #blog-article img { margin-bottom:2em;} ul#blog-articles, #blog-article { list-style-type: none; } .single-article { margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid #89898b; float: left; width: 100%; } .single-article .posted { text-align: left; } .single-article .post-tags { text-align: left; } #blog-sidebar h2 .icon-rss { float: right; font-size: 16px; } #blog-sidebar #social-icons { font-size: 90%; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #89898b; } #blog-sidebar #social-icons a { color: #b6b6ba; } #blog-sidebar #social-icons a:hover { color: #fee509; } #twitter-card, #facebook-card, #instagram-card { width: 100%; float: left; clear: left; display: block; margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #89898b; } #twitter-card h3, #facebook-card h3, #instagram-card h3 { letter-spacing: initial; } #fb-root { display: none; } /* To fill the container and nothing else */ .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] { width: 100% !important; } #instafeed { margin-top: 15px; } #page .share-icons { margin-bottom: 20px; text-align: left; margin-top: 20px; } #page .share-icons a { margin-right: 10px; } ul#posts { list-style: none; } ul#posts li { margin-bottom: 20px; padding-bottom: 0; border-bottom: 1px solid #89898b; } ul#posts li p { margin-top: 0; } ul#posts li.tags { padding-bottom: 10px; } #comments h4 { text-align: center; } #comments { float: left; padding-top: 20px; margin-top: 20px; width: 100%; } #comment-form { width: 100%; text-align: center; clear: left; float: left; } #comments ul { margin-top: 20px; list-style-type: none; } #comments ul li { float: left; display: block; width: 100%; margin: 0 0 20px 0; border-bottom: 1px solid #89898b; padding-bottom: 20px; } .comment-details { margin-bottom: 10px; } .gravatar { float: left; margin-right: 20px; } .comment { float: left; } .comment p { margin-top: 0; } dd { margin-left: 0; } .notice { border: 1px dashed #eee; padding: 5px; background: ghostwhite; margin: 20px 0; } .readmore { clear: left; text-align: left; margin: 30px auto; } .readmore a { color: #ffffff! important; background: #b6b6ba! important; padding: 10px 20px; -webkit-transition: background .5s ease,color .5s ease; -moz-transition: background .5s ease,color .5s ease; -o-transition: background .5s ease,color .5s ease; transition: background .5s ease,color .5s ease; } .readmore a:hover { color: #ffffff! important; background: #89898b! important; text-decoration: none; } /* =============== */ /* = Search = */ /* =============== */ #search-bar { margin-bottom: 20px; margin-top: 20px; border-bottom: 1px solid #89898b; } #search-bar #q {width: 300px; } #q { text-transform: uppercase; } /* =============== */ /* = Customer Accounts = */ /* =============== */ #customer-wrapper { float: left; margin-bottom: 40px; } #customer-wrapper p { margin-top: 0! important; margin-bottom: 0! important; } #forgot_password { margin-bottom: 15px; } #customer-wrapper form { margin-top: 20px; } #admin_header { margin-bottom: 30px; } .view_address p { margin: 0; } #customer_detail p { margin: 0; } .address_table { margin-bottom: 20px; } #order_address { clear: both; float: left; width: 100%; margin-bottom: 20px; } #order_details { float: left; } #create-customer, #customer { margin-top: 30px; } div#recover-password { margin-top: 30px; } .action_link { display: inline-block; margin-bottom: 10px; } .action_edit { padding: 0 10px; border-left: 1px solid #89898b; border-right: 1px solid #89898b; margin: 0 10px; } a#view_address { display: block; margin-top: 10px; } .center { text-align: center; } /* =============== */ /* = Footer = */ /* =============== */ @media only screen and (min-width: 1024px ){ .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -52px; } .page-wrap:after { content: ""; display: block; } /*.site-footer, .page-wrap:after {*/ /* .push must be the same height as footer */ /* height: 52px; */ /*}*/ } #footer-wrapper { z-index: 2; clear: left; } #footer { padding: 10px 0; text-align: center; } #subscribe_popup { text-align: center; max-width: 450px; display: block; margin: 0 auto; overflow: hidden; } #mc_embed_signup { width: 100%; } #mce-EMAIL { float: left; text-align: center; text-indent: 0; } #mc-embedded-subscribe { float: left; margin-top: 0; } #payment { text-align: center; margin-top: 30px; margin-bottom: 50px; } #payment img { max-width: 60px; text-align: center; margin-bottom: 10px; } /* =============== */ /* = Mobile Hides = */ /* =============== */ #mobile-product { display: none; } /* =============== */ /* = Global = */ /* =============== */ #pagination { clear: left; text-align: center; margin-top: 20px; padding-top: 20px; margin-bottom: 20px; } #pagination a { margin: 0 5px; background: #89898b; padding: 2px 5px; border-radius: 15px; } #pagination a:hover { text-decoration: none; background: #050505; color: #fff; } #pagination .current { background: transparent; } #pagination .count { margin-right: 20px; } #breadcrumb { text-transform: uppercase; font-size: 10px; margin-bottom: 20px; text-align: center; } #breadcrumb a { padding: 0 5px 0 0; font-size: 10px; } #breadcrumb p { padding: 0 5px 0 0; } .separator { padding-right: 5px; } /* Hiding the drop-downs. */ #product-variants, .selector-wrapper, .select { display: none; } label[for="product-select-option-"] { display: none; } #product-select-option- { display: none; } #product-select-option- + .custom-style-select-box { display: none !important; } /* Swatches Styles */ .swatch { margin:0; } /* Label */ .swatch .header { margin: 0.5em 0; } /* Hide radio buttons.*/ .swatch input { display:none; } .color label { width: 40px! important; } .swatch label { /* Cross-browser inline-block */ display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; /* Content must stretch all the way to borders */ padding:0; /* Background color */ background-color: #fcfcfc; /* Spacing between buttons */ margin:0px 5px 10px; /* Fake that those are buttons, i.e. clicky */ cursor:pointer; /* The border when the button is not selected */ border: #DDD 1px solid !important; /* To position the sold out graphic and tooltip */ position:relative; /* Text styling */ text-transform:uppercase; font-size:13px; min-width:30px !important; height:30px !important; line-height:28px; white-space:nowrap; text-transform:uppercase; text-align: center; font-weight: 400; } .swatch-element label { padding:0 10px; } .color.swatch-element label { padding:0; } /* Styling selected swatch */ /* Slightly raised */ .swatch input:checked + label { border:#999 1px solid !important; background: #333; color: #fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.25); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.25); box-shadow:0px 1px 2px rgba(0,0,0,0.25); } .swatch .swatch-element { display: inline-block; -webkit-transform:translateZ(0); /* webkit flicker fix */ -webkit-font-smoothing:antialiased; /* webkit text rendering fix */ /* To position the sold out graphic and tooltip */ position:relative; } /* Image with the cross in it */ .crossed-out { position:absolute; width:100%; height:100%; left:0; top:0; } .swatch .swatch-element .crossed-out { display:none; } .swatch .swatch-element.soldout .crossed-out { display:block; } .swatch .swatch-element.soldout label { filter: alpha(opacity=60); /* internet explorer */ -khtml-opacity: 0.6; /* khtml, old safari */ -moz-opacity: 0.6; /* mozilla, netscape */ opacity: 0.6; /* fx, safari, opera */ } /* Tooltips */ .swatch .tooltip { text-align:center; background:gray; color:#fff; bottom:100%; padding: 10px; display:block; position:absolute; width:100px; left:-33px; margin-bottom:15px; /* Make it invisible by default */ filter:alpha(opacity=0); -khtml-opacity: 0; -moz-opacity: 0; opacity:0; visibility:hidden; /* Animations */ -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); transform: translateY(10px); -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -ms-transition: all .25s ease-out; -o-transition: all .25s ease-out; transition: all .25s ease-out; -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28); z-index: 10000; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .swatch .tooltip:before { bottom:-20px; content:" "; display:block; height:20px; left:0; position:absolute; width:100%; } /* CSS triangle */ .swatch .tooltip:after { border-left:solid transparent 10px; border-right:solid transparent 10px; border-top:solid gray 10px; bottom:-10px; content:" "; height:0; left:50%; margin-left:-13px; position:absolute; width:0; } .swatch .swatch-element:hover .tooltip { filter:alpha(opacity=100); -khtml-opacity:1; -moz-opacity:1; opacity:1; visibility:visible; -webkit-transform:translateY(0px); -moz-transform:translateY(0px); -ms-transform:translateY(0px); -o-transform:translateY(0px); transform:translateY(0px); } .swatch.error { background-color:#E8D2D2!important; color:#333!important; padding:1em; border-radius:5px; } .swatch.error p { margin:0.7em 0; } .swatch.error p:first-child { margin-top:0; } .swatch.error p:last-child { margin-bottom:0; } .swatch.error code { font-family:monospace; } .scrollup{ width:30px; height:30px; opacity:0.3; position:fixed; bottom:50%; right:20px; display:none; z-index: 3; text-align: center; } .scrollup:hover { text-decoration: none; } iframe { width: 100%; } /* Navigation */ /* Dropdown Navigation */ .dl-menuwrapper { display: none; width: 100%; max-width: 300px; z-index: 5; float: left; top: 40px; left: 10px; position: fixed; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; -webkit-perspective-origin: 50% 200%; -moz-perspective-origin: 50% 200%; perspective-origin: 50% 200%; } .dl-menuwrapper:first-child { margin-right: 100px; } .dl-menuwrapper button { background: #fefefe; border: none; width: 48px; height: 45px; font-size: 13px; text-align: center; /*text-indent: -900em; */ overflow: hidden; padding: 0; position: relative; cursor: pointer; outline: none; margin-bottom: 0; color: #545454; } .dl-menuwrapper button:hover, .dl-menuwrapper button.dl-active, .dl-menuwrapper ul { background: #fefefe; } .dl-menuwrapper button:after { content: ''; position: absolute; width: 68%; height: 5px; /*background: #545454;*/ top: 10px; left: 16%; /* box-shadow: 0 10px 0 #545454, 0 20px 0 #545454; */ } .dl-menuwrapper ul { padding: 0; list-style: none; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } .dl-menuwrapper li { position: relative; } .dl-menuwrapper li a { font-family: 'Montserrat', sans-serif; display: block; position: relative; padding: 15px 20px; font-size: 13px; line-height: 20px; font-weight: 400; color: #545454; outline: none; text-transform: uppercase; } .no-touch .dl-menuwrapper li a:hover { background: #fefefe; color: #000000; } .dl-menuwrapper li.dl-back > a { padding-left: 30px; background: #fefefe; } .dl-menuwrapper li.dl-back:after, .dl-menuwrapper li > a:not(:only-child):after { position: absolute; top: 0; line-height: 50px; font-family: 'FontAwesome'; speak: none; color: #545454; -webkit-font-smoothing: antialiased; content: "\f054"; } .dl-menuwrapper li.dl-back:after { left: 10px; color: #545454; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); transform: rotate(180deg); } .dl-menuwrapper li > a:after { right: 10px; color: rgba(0,0,0,0.15); } .dl-menuwrapper .dl-menu { margin: 5px 0 0 0; position: absolute; width: 100%; opacity: 0; pointer-events: none; -webkit-transform: translateY(10px); -moz-transform: translateY(10px); transform: translateY(10px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .dl-menuwrapper .dl-menu.dl-menu-toggle { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } .dl-menuwrapper .dl-menu.dl-menuopen { opacity: 1; pointer-events: auto; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); transform: translateY(0px); } /* Hide the inner submenus */ .dl-menuwrapper li .dl-submenu { display: none; margin-bottom: 0; } /* When a submenu is openend, we will hide all li siblings. For that we give a class to the parent menu called "dl-subview". We also hide the submenu link. The opened submenu will get the class "dl-subviewopen". All this is done for any sub-level being entered. */ .dl-menu.dl-subview li, .dl-menu.dl-subview li.dl-subviewopen > a, .dl-menu.dl-subview li.dl-subview > a { display: none; } .dl-menu.dl-subview li.dl-subview, .dl-menu.dl-subview li.dl-subview .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu, .dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li { display: block; } /* Dynamically added submenu outside of the menu context */ .dl-menuwrapper > .dl-submenu { position: absolute; width: 100%; top: 50px; left: 0; margin: 0! important; } /* Animation classes for moving out and in */ .dl-menu.dl-animate-out-1 { -webkit-animation: MenuAnimOut1 0.4s; -moz-animation: MenuAnimOut1 0.4s; animation: MenuAnimOut1 0.4s; } .dl-menu.dl-animate-out-2 { -webkit-animation: MenuAnimOut2 0.3s ease-in-out; -moz-animation: MenuAnimOut2 0.3s ease-in-out; animation: MenuAnimOut2 0.3s ease-in-out; } .dl-menu.dl-animate-out-3 { -webkit-animation: MenuAnimOut3 0.4s ease; -moz-animation: MenuAnimOut3 0.4s ease; animation: MenuAnimOut3 0.4s ease; } .dl-menu.dl-animate-out-4 { -webkit-animation: MenuAnimOut4 0.4s ease; -moz-animation: MenuAnimOut4 0.4s ease; animation: MenuAnimOut4 0.4s ease; } .dl-menu.dl-animate-out-5 { -webkit-animation: MenuAnimOut5 0.4s ease; -moz-animation: MenuAnimOut5 0.4s ease; animation: MenuAnimOut5 0.4s ease; } @-webkit-keyframes MenuAnimOut1 { 50% { -webkit-transform: translateZ(-250px) rotateY(30deg); } 75% { -webkit-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @-webkit-keyframes MenuAnimOut2 { 100% { -webkit-transform: translateX(-100%); opacity: 0; } } @-webkit-keyframes MenuAnimOut3 { 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut4 { 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes MenuAnimOut5 { 100% { -webkit-transform: translateY(40%); opacity: 0; } } @-moz-keyframes MenuAnimOut1 { 50% { -moz-transform: translateZ(-250px) rotateY(30deg); } 75% { -moz-transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { -moz-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @-moz-keyframes MenuAnimOut2 { 100% { -moz-transform: translateX(-100%); opacity: 0; } } @-moz-keyframes MenuAnimOut3 { 100% { -moz-transform: translateZ(300px); opacity: 0; } } @-moz-keyframes MenuAnimOut4 { 100% { -moz-transform: translateZ(-300px); opacity: 0; } } @-moz-keyframes MenuAnimOut5 { 100% { -moz-transform: translateY(40%); opacity: 0; } } @keyframes MenuAnimOut1 { 50% { transform: translateZ(-250px) rotateY(30deg); } 75% { transform: translateZ(-372.5px) rotateY(15deg); opacity: .5; } 100% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } } @keyframes MenuAnimOut2 { 100% { transform: translateX(-100%); opacity: 0; } } @keyframes MenuAnimOut3 { 100% { transform: translateZ(300px); opacity: 0; } } @keyframes MenuAnimOut4 { 100% { transform: translateZ(-300px); opacity: 0; } } @keyframes MenuAnimOut5 { 100% { transform: translateY(40%); opacity: 0; } } .dl-menu.dl-animate-in-1 { -webkit-animation: MenuAnimIn1 0.3s; -moz-animation: MenuAnimIn1 0.3s; animation: MenuAnimIn1 0.3s; } .dl-menu.dl-animate-in-2 { -webkit-animation: MenuAnimIn2 0.3s ease-in-out; -moz-animation: MenuAnimIn2 0.3s ease-in-out; animation: MenuAnimIn2 0.3s ease-in-out; } .dl-menu.dl-animate-in-3 { -webkit-animation: MenuAnimIn3 0.4s ease; -moz-animation: MenuAnimIn3 0.4s ease; animation: MenuAnimIn3 0.4s ease; } .dl-menu.dl-animate-in-4 { -webkit-animation: MenuAnimIn4 0.4s ease; -moz-animation: MenuAnimIn4 0.4s ease; animation: MenuAnimIn4 0.4s ease; } .dl-menu.dl-animate-in-5 { -webkit-animation: MenuAnimIn5 0.4s ease; -moz-animation: MenuAnimIn5 0.4s ease; animation: MenuAnimIn5 0.4s ease; } @-webkit-keyframes MenuAnimIn1 { 0% { -webkit-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -webkit-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -webkit-transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @-webkit-keyframes MenuAnimIn2 { 0% { -webkit-transform: translateX(-100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn3 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn4 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes MenuAnimIn5 { 0% { -webkit-transform: translateY(40%); opacity: 0; } 100% { -webkit-transform: translateY(0); opacity: 1; } } @-moz-keyframes MenuAnimIn1 { 0% { -moz-transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { -moz-transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { -moz-transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @-moz-keyframes MenuAnimIn2 { 0% { -moz-transform: translateX(-100%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; } } @-moz-keyframes MenuAnimIn3 { 0% { -moz-transform: translateZ(300px); opacity: 0; } 100% { -moz-transform: translateZ(0px); opacity: 1; } } @-moz-keyframes MenuAnimIn4 { 0% { -moz-transform: translateZ(-300px); opacity: 0; } 100% { -moz-transform: translateZ(0px); opacity: 1; } } @-moz-keyframes MenuAnimIn5 { 0% { -moz-transform: translateY(40%); opacity: 0; } 100% { -moz-transform: translateY(0); opacity: 1; } } @keyframes MenuAnimIn1 { 0% { transform: translateZ(-500px) rotateY(0deg); opacity: 0; } 20% { transform: translateZ(-250px) rotateY(30deg); opacity: 0.5; } 100% { transform: translateZ(0px) rotateY(0deg); opacity: 1; } } @keyframes MenuAnimIn2 { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes MenuAnimIn3 { 0% { transform: translateZ(300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn4 { 0% { transform: translateZ(-300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes MenuAnimIn5 { 0% { transform: translateY(40%); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .dl-menuwrapper > .dl-submenu.dl-animate-in-1 { -webkit-animation: SubMenuAnimIn1 0.4s ease; -moz-animation: SubMenuAnimIn1 0.4s ease; animation: SubMenuAnimIn1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-2 { -webkit-animation: SubMenuAnimIn2 0.3s ease-in-out; -moz-animation: SubMenuAnimIn2 0.3s ease-in-out; animation: SubMenuAnimIn2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-in-3 { -webkit-animation: SubMenuAnimIn3 0.4s ease; -moz-animation: SubMenuAnimIn3 0.4s ease; animation: SubMenuAnimIn3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-4 { -webkit-animation: SubMenuAnimIn4 0.4s ease; -moz-animation: SubMenuAnimIn4 0.4s ease; animation: SubMenuAnimIn4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-in-5 { -webkit-animation: SubMenuAnimIn5 0.4s ease; -moz-animation: SubMenuAnimIn5 0.4s ease; animation: SubMenuAnimIn5 0.4s ease; } @-webkit-keyframes SubMenuAnimIn1 { 0% { -webkit-transform: translateX(50%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn2 { 0% { -webkit-transform: translateX(100%); opacity: 0; } 100% { -webkit-transform: translateX(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn3 { 0% { -webkit-transform: translateZ(-300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn4 { 0% { -webkit-transform: translateZ(300px); opacity: 0; } 100% { -webkit-transform: translateZ(0px); opacity: 1; } } @-webkit-keyframes SubMenuAnimIn5 { 0% { -webkit-transform: translateZ(-200px); opacity: 0; } 100% { -webkit-transform: translateZ(0); opacity: 1; } } @-moz-keyframes SubMenuAnimIn1 { 0% { -moz-transform: translateX(50%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; } } @-moz-keyframes SubMenuAnimIn2 { 0% { -moz-transform: translateX(100%); opacity: 0; } 100% { -moz-transform: translateX(0px); opacity: 1; } } @-moz-keyframes SubMenuAnimIn3 { 0% { -moz-transform: translateZ(-300px); opacity: 0; } 100% { -moz-transform: translateZ(0px); opacity: 1; } } @-moz-keyframes SubMenuAnimIn4 { 0% { -moz-transform: translateZ(300px); opacity: 0; } 100% { -moz-transform: translateZ(0px); opacity: 1; } } @-moz-keyframes SubMenuAnimIn5 { 0% { -moz-transform: translateZ(-200px); opacity: 0; } 100% { -moz-transform: translateZ(0); opacity: 1; } } @keyframes SubMenuAnimIn1 { 0% { transform: translateX(50%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn2 { 0% { transform: translateX(100%); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } @keyframes SubMenuAnimIn3 { 0% { transform: translateZ(-300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn4 { 0% { transform: translateZ(300px); opacity: 0; } 100% { transform: translateZ(0px); opacity: 1; } } @keyframes SubMenuAnimIn5 { 0% { transform: translateZ(-200px); opacity: 0; } 100% { transform: translateZ(0); opacity: 1; } } .dl-menuwrapper > .dl-submenu.dl-animate-out-1 { -webkit-animation: SubMenuAnimOut1 0.4s ease; -moz-animation: SubMenuAnimOut1 0.4s ease; animation: SubMenuAnimOut1 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-2 { -webkit-animation: SubMenuAnimOut2 0.3s ease-in-out; -moz-animation: SubMenuAnimOut2 0.3s ease-in-out; animation: SubMenuAnimOut2 0.3s ease-in-out; } .dl-menuwrapper > .dl-submenu.dl-animate-out-3 { -webkit-animation: SubMenuAnimOut3 0.4s ease; -moz-animation: SubMenuAnimOut3 0.4s ease; animation: SubMenuAnimOut3 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-4 { -webkit-animation: SubMenuAnimOut4 0.4s ease; -moz-animation: SubMenuAnimOut4 0.4s ease; animation: SubMenuAnimOut4 0.4s ease; } .dl-menuwrapper > .dl-submenu.dl-animate-out-5 { -webkit-animation: SubMenuAnimOut5 0.4s ease; -moz-animation: SubMenuAnimOut5 0.4s ease; animation: SubMenuAnimOut5 0.4s ease; } @-webkit-keyframes SubMenuAnimOut1 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(50%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut2 { 0% { -webkit-transform: translateX(0%); opacity: 1; } 100% { -webkit-transform: translateX(100%); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut3 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(-300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut4 { 0% { -webkit-transform: translateZ(0px); opacity: 1; } 100% { -webkit-transform: translateZ(300px); opacity: 0; } } @-webkit-keyframes SubMenuAnimOut5 { 0% { -webkit-transform: translateZ(0); opacity: 1; } 100% { -webkit-transform: translateZ(-200px); opacity: 0; } } @-moz-keyframes SubMenuAnimOut1 { 0% { -moz-transform: translateX(0%); opacity: 1; } 100% { -moz-transform: translateX(50%); opacity: 0; } } @-moz-keyframes SubMenuAnimOut2 { 0% { -moz-transform: translateX(0%); opacity: 1; } 100% { -moz-transform: translateX(100%); opacity: 0; } } @-moz-keyframes SubMenuAnimOut3 { 0% { -moz-transform: translateZ(0px); opacity: 1; } 100% { -moz-transform: translateZ(-300px); opacity: 0; } } @-moz-keyframes SubMenuAnimOut4 { 0% { -moz-transform: translateZ(0px); opacity: 1; } 100% { -moz-transform: translateZ(300px); opacity: 0; } } @-moz-keyframes SubMenuAnimOut5 { 0% { -moz-transform: translateZ(0); opacity: 1; } 100% { -moz-transform: translateZ(-200px); opacity: 0; } } @keyframes SubMenuAnimOut1 { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(50%); opacity: 0; } } @keyframes SubMenuAnimOut2 { 0% { transform: translateX(0%); opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } } @keyframes SubMenuAnimOut3 { 0% { transform: translateZ(0px); opacity: 1; } 100% { transform: translateZ(-300px); opacity: 0; } } @keyframes SubMenuAnimOut4 { 0% { transform: translateZ(0px); opacity: 1; } 100% { transform: translateZ(300px); opacity: 0; } } @keyframes SubMenuAnimOut5 { 0% { transform: translateZ(0); opacity: 1; } 100% { transform: translateZ(-200px); opacity: 0; } } /* No JS Fallback */ .no-js .dl-menuwrapper .dl-menu { position: relative; opacity: 1; -webkit-transform: none; -moz-transform: none; transform: none; } .no-js .dl-menuwrapper li .dl-submenu { display: block; margin-bottom: 0! important; } .no-js .dl-menuwrapper li.dl-back { display: none; } .no-js .dl-menuwrapper li > a:not(:only-child) { background: rgba(0,0,0,0.1); } .no-js .dl-menuwrapper li > a:not(:only-child):after { content: ''; } /* Owl Carousel */ /* * Core Owl Carousel CSS File * v1.24 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor:url(grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } /* CSS3 Transitions */ .owl-origin { -webkit-perspective: 1200px; -webkit-perspective-origin-x : 50%; -webkit-perspective-origin-y : 50%; -moz-perspective : 1200px; -moz-perspective-origin-x : 50%; -moz-perspective-origin-y : 50%; perspective : 1200px; } /* fade */ .owl-fade-out { z-index: 10; -webkit-animation: fadeOut .7s both ease; -moz-animation: fadeOut .7s both ease; animation: fadeOut .7s both ease; } .owl-fade-in { -webkit-animation: fadeIn .7s both ease; -moz-animation: fadeIn .7s both ease; animation: fadeIn .7s both ease; } /* backSlide */ .owl-backSlide-out { -webkit-animation: backSlideOut 1s both ease; -moz-animation: backSlideOut 1s both ease; animation: backSlideOut 1s both ease; } .owl-backSlide-in { -webkit-animation: backSlideIn 1s both ease; -moz-animation: backSlideIn 1s both ease; animation: backSlideIn 1s both ease; } /* goDown */ .owl-goDown-out { -webkit-animation: scaleToFade .7s ease both; -moz-animation: scaleToFade .7s ease both; animation: scaleToFade .7s ease both; } .owl-goDown-in { -webkit-animation: goDown .6s ease both; -moz-animation: goDown .6s ease both; animation: goDown .6s ease both; } /* scaleUp */ .owl-fadeUp-in { -webkit-animation: scaleUpFrom .5s ease both; -moz-animation: scaleUpFrom .5s ease both; animation: scaleUpFrom .5s ease both; } .owl-fadeUp-out { -webkit-animation: scaleUpTo .5s ease both; -moz-animation: scaleUpTo .5s ease both; animation: scaleUpTo .5s ease both; } /* Keyframes */ /*empty*/ @-webkit-keyframes empty { 0% {opacity: 1} } @-moz-keyframes empty { 0% {opacity: 1} } @keyframes empty { 0% {opacity: 1} } @-webkit-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-moz-keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @keyframes fadeIn { 0% { opacity:0; } 100% { opacity:1; } } @-webkit-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-moz-keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @keyframes fadeOut { 0% { opacity:1; } 100% { opacity:0; } } @-webkit-keyframes backSlideOut { 25% { opacity: .5; -webkit-transform: translateZ(-500px); } 75% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(-200%); } } @-moz-keyframes backSlideOut { 25% { opacity: .5; -moz-transform: translateZ(-500px); } 75% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; -moz-transform: translateZ(-500px) translateX(-200%); } } @keyframes backSlideOut { 25% { opacity: .5; transform: translateZ(-500px); } 75% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } 100% { opacity: .5; transform: translateZ(-500px) translateX(-200%); } } @-webkit-keyframes backSlideIn { 0%, 25% { opacity: .5; -webkit-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -webkit-transform: translateZ(-500px); } 100% { opacity: 1; -webkit-transform: translateZ(0) translateX(0); } } @-moz-keyframes backSlideIn { 0%, 25% { opacity: .5; -moz-transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; -moz-transform: translateZ(-500px); } 100% { opacity: 1; -moz-transform: translateZ(0) translateX(0); } } @keyframes backSlideIn { 0%, 25% { opacity: .5; transform: translateZ(-500px) translateX(200%); } 75% { opacity: .5; transform: translateZ(-500px); } 100% { opacity: 1; transform: translateZ(0) translateX(0); } } @-webkit-keyframes scaleToFade { to { opacity: 0; -webkit-transform: scale(.8); } } @-moz-keyframes scaleToFade { to { opacity: 0; -moz-transform: scale(.8); } } @keyframes scaleToFade { to { opacity: 0; transform: scale(.8); } } @-webkit-keyframes goDown { from { -webkit-transform: translateY(-100%); } } @-moz-keyframes goDown { from { -moz-transform: translateY(-100%); } } @keyframes goDown { from { transform: translateY(-100%); } } @-webkit-keyframes scaleUpFrom { from { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpFrom { from { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpFrom { from { opacity: 0; transform: scale(1.5); } } @-webkit-keyframes scaleUpTo { to { opacity: 0; -webkit-transform: scale(1.5); } } @-moz-keyframes scaleUpTo { to { opacity: 0; -moz-transform: scale(1.5); } } @keyframes scaleUpTo { to { opacity: 0; transform: scale(1.5); } } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; clear: left; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ul#main-nav { width: 100%; background: #fefefe; margin-bottom: 20px; list-style: none; text-align: center; border-top: 1px solid #dddddd; border-bottom: 1px solid #dddddd; } ul#main-nav li { display: inline-block; position: relative; line-height: 50px; } ul#main-nav li:hover { background: #fefefe; } ul#main-nav li a { font-family: 'Montserrat', sans-serif; font-weight: normal; font-size: 13px; color: #545454; display: block; padding: 0 20px; text-transform: uppercase; } ul#main-nav li a:hover { color: #000000; text-decoration: none; } ul#main-nav li ul{ display: none; position: absolute; top: 50px; z-index: 5; left: 0; background: #fefefe; border-bottom: 3px solid #454545; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; } ul#main-nav li:hover ul{ display: block; } ul#main-nav li ul li{ line-height: 40px! important; margin: 0; padding: 0; width: 100%; white-space: nowrap; background: transparent! important; min-width: 220px; float: left; } ul#main-nav li ul li:hover { background: #fefefe! important; } ul#main-nav li ul li a{ text-align: left; text-transform: uppercase; font-weight: normal; color: #454545; font-size: 12px; } ul#main-nav li ul li a:hover { color: #000000; } .collection div.zoomWindow { display: none! important; } .collection div.zoomLens { opacity: 0! important; } #footer ul { list-style: none; border-top: 1px solid #89898b; padding-top: 20px; margin-bottom: 5px; } #footer ul li { display: inline-block; margin: 0 10px; } .social-icons-footer { margin: 0px auto; text-align: center; display: inline-block; border-top: none !important; padding-bottom: 12px; } .social-icons-footer a { max-width: 16px; } .social-icons-footer ul { border-top: none; } .footlinks { color: #000; } .salvaged { text-align: center; } .row.full-width-template { margin: 0px!important; padding: 0px!important; width: 100%!important; } .container__main { width: 100%; position: relative; margin: 0px; padding: 0px; text-align: center; } .hero__header { width: 100%; height: 800px; text-align: center; display: flex; align-items: center; justify-content: center; } .hat-care__header { display: flex; align-items: center; justify-content: center; width: 100%; height: 800px; } .secondary__hero { margin: 60px 0 60px 0; } .hero__header-text { margin: 0px; padding: 0px; align-self: flex-end; } .hero__header-text--inner { position: relative; display: inline-block; text-align: center; margin: 0 auto; padding: 0px; margin-bottom: 60px } .hero__hat-care-text--inner { position: relative; display: inline-block; text-align: center; margin: 0 auto; padding: 0px; margin-bottom: 60px } .hero__hat-care-text--inner h1 { font-size: 52px; line-height: 63px; } .hero__header-text h1 { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; color: #fff; font-size: 52px; line-height: 38px; text-align: center; margin: 0px 0px 25px 0px; padding: 0px; } .hero__header-text span { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 26px; line-height: 30px; text-align: center; color: #fff; margin: 0px 0px 37px 0px; padding: 0px; display: block; } a.btn { color: #fff; text-decoration: none; display: inline-block; border: 1.5px solid #FFFFFF; box-sizing: border-box; border-radius: 4px; padding: 15px 29px 15px 29px; text-align: center; font-family: Lucida Grande; font-size: 13px; line-height: 15px; font-style: normal; font-weight: normal; font-size: 13px; line-height: 15px; text-align: center; } a.btn.btn-basic:hover { background: #fff; border: none; color: #000; } a.btn.btn-black { background-color: #6D6D6D; color: #fff; border: none; } a.btn.btn-black:hover { background-color: #000; color: #fff; border: none; } a.btn.btn-white { background-color: #fff; color: #000; border: none; } ul.list__actions { list-style-type: none; margin: 0px; padding: 0px; display: inline-block; clear: both; } ul.list__actions li { float: left; } ul.list__actions li.--last { float: left; margin-left: 10px; } .fedora__hero-container { width: 100%; position: relative; margin: 0px; padding: 0px; text-align: center; } .fedora__hero-container--inner { max-width: 1166px; margin: 0 auto; padding: 0px; display: inline-block; } .luke-bone__feature { width: 687px; height: 600px; position: relative; text-align: left; } .feature__1 { position: absolute; left: 10px; top: 70px; } .feature__2 { position: absolute; right: 10px; top: 70px; } .feature__3 { position: absolute; left: 40px; bottom: 0px; width: 587px; } .--feature-text { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 17px; line-height: 130%; } .diagram__num { display: inline-block; float: left; height: 20px; width: 20px; border-radius: 50px; color: #000; border: solid 2px #000; text-align: center; font-weight: bold; font-size: 13px; } .numeral { position: relative; top: -3px; left: 0.5px; } .text__block { display: inline-block; margin-left: 10px; } .--long-text { width: 90%; } .fedora__hero-actions-container { width: 100%; position: relative; margin: 0px; padding: 0px; text-align: center; margin-top: 60px; } .fedora__hero-actions-container--inner { display: inline-block; margin: 0 auto; padding: 0px; clear: both; } .horizontal__rule { max-width: 1166px; height: 1px; background-color: #000; margin: 60px auto 60px auto; padding: 0px 0px 0px 0px; } h1.h1__secondary { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 52px; line-height: 63px; text-align: center; color: #000; } h1.h1__tertiary { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 28px; line-height: 42px; color: #000; margin: 20px 0 0 0; } .container__mobile-hats-featured { background: url('./hats-mobile-featured.png') no-repeat top center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; position: relative; width: 100%; height: 208px; margin: 60px 0px 60px 0px; } .--mobile { display: none!important; } .container__style-guide-hats-inner { max-width: 1166px; margin: 0 auto; } ul.list__style-guide-hats { margin: 0px; padding: 0px; list-style-type: none; clear: both; display: inline-block; position: relative; width: 100%; } ul.list__style-guide-hats li { width: 33%; float: left; display: inline-block; margin: 0px; padding: 0px; } ul.list__style-guide-hats li a { font-size: 17px; line-height: 24px; font-style: normal; font-weight: 500; font-family: Montserrat; text-decoration: underline; color: #000; } .list__style-guide-hats--item img{ width: 100%; } .container__made-info-inner { max-width: 1166px; margin: 60px auto 60px auto; } ul.list__made-info { margin: 0px; padding: 0px; list-style-type: none; clear: both; display: flex; flex-wrap: wrap; position: relative; width: 100%; } ul.list__made-info li { max-width: 23%; margin: 0px; padding: 0px 15px 0px 15px; text-align: center; } ul.list__made-info.--third li { width: 33%; } ul.list__made-info li.list__earth-text { text-align: left!important; } h1.h1__tertiary span.--highlight { background-color: #F5F025; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 28px; line-height: 34px; text-align: center; color: #000; } .list__made-info--item img { width: 65%; } ul.list__made-info li span { font-style: normal; font-weight: normal; font-size: 17px; line-height: 130%; } .container__hat-top-inner { max-width: 1166px; margin: 60px auto 60px auto; } .container__hat-top-inner.--hat-care { max-width: 1166px; margin: 60px auto 0px auto; } .fit__guide-slider-container .container__hat-top-inner.--fit-guide-slider { display: inherit; } .fit__guide-slider-container .--landing-page-list { display: none; } .container__hat-top-inner.--fit-guide-slider { display: none; } ul.list__hat-top { margin: 0px; padding: 0px; list-style-type: none; clear: both; display: inline-block; position: relative; width: 100%; } ul.list__hat-top li { width: 100%; display: inline-block; margin: 0px; padding: 0px 15px 0px 15px; } ul.list__hat-top li h2 { font-weight: bold; font-size: 32px; line-height: 39px; } ul.list__hat-top li .list__hat-top--item { float: right; width: 50%; } ul.list__hat-top li .list__hat-top--item.--hat-care { display: flex; align-items: center; justify-content: center; height: 500px; } ul.list__hat-top li .list__hat-top--item.--hat-care img { /*height: 500px;*/ max-height: 500px; } ul.list__hat-top li.--hat-care { border-bottom: solid 1px #868686; margin-bottom: 25px; padding-bottom: 25px; } ul.list__hat-top li.--hat-care:last-child { border-bottom: none; } ul.list__hat-top li:nth-child(odd) .list__hat-top--item { float: left; width: 50%; } ul.list__hat-top li:nth-child(odd) .list__hat-top--text { float: right; text-align: left; width: 50%; padding-top: 35px; padding-right: 85px; } ul.list__hat-top li .list__hat-top--text { float: right; text-align: left; width: 50%; padding-top: 35px; padding-left: 85px; } ul.list__hat-top li .list__hat-top--text.--hat-care { display: flex; align-items: center; justify-content: center; height: 500px; } .list__hat-care-content { position: relative; margin: 0px; padding: 0px; } h2.hat_care-title { text-align: center!important; } ul.list__hat-top li a { color: #000; text-decoration: underline; font-weight: 500; } ul.list__hat-top li p { font-size: 17px; line-height: 24px; font-style: normal; font-weight: 100; font-family: Montserrat; margin-bottom: 25px; } .container__measure-inner { max-width: 1066px; margin: 60px auto 60px auto; } ul.list__measure { margin: 0px; padding: 0px; list-style-type: none; clear: both; display: inline-block; position: relative; width: 100%; } ul.list__measure li { width: 33%; float: left; display: inline-block; margin: 0px; padding: 0px 15px 0px 15px; text-align: center; } .view__measurement-close { position: absolute; right: 15px; top: 15px; cursor: pointer; } .view__measurement-container { position: relative; width: 375px; display: inline-auto; margin: 0 auto; } .measure__action-container { margin: 45px 0 45px 0; } .measure__action-container a{ cursor: pointer; } .list__measure--item { height: 240px; } .list__measure--item img { width: 70%; } ul.list__measure li span { font-style: normal; font-weight: normal; font-size: 17px; line-height: 130%; } .stevie__header { max-width: 1164px; height: 800px; text-align: center; display: flex; align-items: center; margin: 0 auto; justify-content: center; } .stevie__header-text { margin: 0px; padding: 0px; } .stevie__header-text--inner { position: relative; display: inline-block; text-align: center; margin: 0 auto; padding: 0px; margin-bottom: 0px } .stevie__header-text h1 { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; color: #fff; font-size: 52px; line-height: 38px; text-align: center; margin: 0px 0px 25px 0px; padding: 0px; } .stevie__header-text span { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 26px; line-height: 30px; text-align: center; color: #fff; margin: 0px 0px 37px 0px; padding: 0px; display: block; } .view__measurement-chart { position: fixed; background-color: rgba(0, 0, 0, 0.5); height: 100%; width: 100%; z-index: 100; top: 0px; left: 0px; align-items: center; justify-content: center; display: none; } .view__measurement-chart.--show { display: flex; } .hero__header { /*background: url('./dylan-putty-hero.png') no-repeat center center fixed;*/ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: cover; /* Resize the background image to cover the entire container */ background-attachment: fixed; } .hero__header.--hat-care { /*background: url('./dylan-putty-hero.png') no-repeat center center fixed;*/ background-position: left; /* Center the image */ background-attachment: inherit; background-size: cover; } .hero__header.main__header.--hat-care { height: 518px!important; background-size: 100%; } .footer__container__main { max-width: 1164px; position: relative; margin: 0 auto; padding: 0px; text-align: center; background-color: #E4E4E5; } .footer__container-inner { width: 100%; position: relative; margin: 0 auto; padding: 45px 0 15px 0; text-align: left; clear: both; display: inline-block; } .footer__col { float: left; position: relative; width: 25%; display: inline-block; } .footer__logo-container { display: block; margin: 15px 0 15px 0; width: 100%; text-align: center; clear: both; } .footer__col.--subscribe { /*width: 455px;*/ } .footer__col.--last { width: 145px; float: right; text-align: center; } .footer__date { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 15px; line-height: 17px; text-align: center; } .footer__subscribe { /*width: 455px;*/ height: 247px; background-color: #E4E4E5; text-align: center; display: flex; align-items: top; justify-content: center; } .footer__subscribe input { background: #fff; border: none; width: 277px; height: 38px; } .footer__subscribe input:focus{ outline: none; } .footer__subscribe-subheader { display: inline-block; position: relative; padding: 0 15px 10px 15px; margin: 0 0 10px 0; border-bottom: 1px solid #868686; font-family: Georgia; font-style: normal; font-weight: normal; font-size: 20px; line-height: 23px; text-align: center; letter-spacing: 0.02em; } .footer__subscribe-text { display: block; position: relative; margin: 15px 0 15px 0; font-family: Montserrat; font-style: normal; font-weight: normal; font-size: 17px; line-height: 130%; text-align: center; } .footer__menu-about { text-align: center; } .footer__menu-about .menu__subheader { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 20px; line-height: 23px; display: inline-block; padding: 0 15px 10px 15px; margin: 0 0 10px 0; border-bottom: 1px solid #868686; } .footer__menu-about ul { margin: 0px; padding: 0px; list-style-type: none; } .footer__menu-about .search__icon { position: relative; top: 7px; margin: 0 3px 0 0; } .footer__menu-about ul li { font-family: Montserrat; font-style: normal; font-weight: 500; font-size: 15px; line-height: 18px; margin: 8px 0 8px 0; } .footer__menu-about ul a { text-decoration: none; color: #000; } .footer__menu-social { width: 100%; clear: both; position: reltive; display: inline-block; text-align: center; } .footer__menu-social ul { margin: 0px; padding: 0px; list-style-type: none; display: inline-block; margin: 0 auto; position: relative; } .footer__menu-social ul li { float: left; display: inline-block; padding-right: 5px!important; padding-left: 5px!important; } .footer__subscribe--inner { display: inline-block; position: relative; padding: 0px 15px 15px 15px; } input.footer__subscribe-input { margin: 0 auto!important; position: relative!important; } .footer__subscribe-btn { margin: 15px auto!important; } .footer__subscribe-btn input[type="submit"] { font-family: Lucida Grande; background: none; color: #000; display: block; font-style: normal; font-weight: bold; font-size: 14px; line-height: 20px; text-align: center; text-decoration-line: underline; margin: 0 auto!important; } .footer__subscribe-btn input[type="submit"]:hover { background: none!important; } .mobile__slider-earth { text-align: center; } .mobile__slider-earth .slick-prev { display: none!important; } .mobile__slider-earth .slick-next { display: none!important; } /* slick overrides */ ul.slick-dots { position: relative; display: inline-block; text-align: center; width: inherit; list-style: disc inside; } ul.slick-dots button { display: none; } ul.slick-dots li { float: left; color: #E4E5E5; list-style: circle inside!important; } ul.slick-dots li.slick-active { color: #000; list-style: disc inside!important; } .fit-guide__header-text { width: 100%; text-align: center; } .fit-guide__header-text h1 { font-style: normal; font-weight: normal; font-size: 52px; line-height: 63px; color: #000000; } .fit-guide__header-text h3 { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 26px; line-height: 30px; text-align: center; color: #868686; margin: 45px 0 45px 0; letter-spacing: 0.8px; } .fit-guide__head-shape-container { display: flex; align-items: center; justify-content: center; width: 100%; } .fit-guide__head-shape-img { float: right; /*max-width: 675px;*/ display: inline-block; flex: 0 0 60%; } .fit-guide__head-shape-text { float: left; text-align: left; display: inline-block; padding: 0 45px 0 0; flex: 0 0 40%; } .fit-guide__head-shape-text h2 { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: bold; font-size: 32px; line-height: 39px; color: #000000; margin: 0 0 25px 0; } .fit-guide__head-shape-text p { font-style: normal; font-family: 'Montserrat', sans-serif; font-weight: 100; font-size: 17px; line-height: 24px; color: #000; } .fit--guide a { color: #000; text-decoration: underline; } .fit--guide .btn { text-decoration: none; } .fit--guide h2 { font-weight: bold; font-size: 32px; line-height: 39px; } .fit--guide__title { width: 100%; text-align: center; margin: 45px 0 45px 0; } .fit--guide__slide-hats { margin: 0 auto; max-width: 1166px; } .fit-guide__header-text--outter { margin: 0 auto; max-width: 1166px; } .container__hat-top-inner .slick-prev { display: none!important; } .container__hat-top-inner .slick-next { display: none!important; } .fit-guide__slider-container { display: flex; align-items: center; justify-content: center; } .fit-guide-slider__img { text-align: right; width: 50%; } .fit-guide-slider__img img { display: inline-block!important; } .fit-guide-slider__text { text-align: left; width: 50%; } .fit-guide-slider__text h2 { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 26px; line-height: 30px; letter-spacing: 1px; } .fit-guide-slider__text p { font-style: normal; font-weight: normal; font-size: 17px; line-height: 24px; margin-bottom: 25px; } .fit-guide-slider__text strong { text-transform: uppercase; font-weight: bold; } .fit--guide__choose-material-container { margin: 0 auto; max-width: 1166px; display: flex; } .choose-material-block { width: 33%; text-align: center; padding: 0 15px 0 15px; } .choose-material-block h3 { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 26px; line-height: 30px; letter-spacing: 1px; margin: 25px 0 25px 0; } .choose-material-text { width: 100%; text-align: left; display: flex; align-items: center; justify-content: center; min-height: 200px; } .choose-material-text p { font-size: 17px; line-height: 24px; font-weight: 400; font-family: Montserrat; } .fit-guide__header-text { max-width: 800px; margin: 0 auto; } /* animations */ .--fade-in-intro { position: relative; animation-name: FadeIn; -webkit-animation-name: FadeIn; animation-duration: 2s; -webkit-animation-duration: 2s; animation-timing-function: ease-in-out; -webkit-animation-timing-function: ease-in-out; transition-timing-function: ease; } .fit-slider.--mobile { display: none; } .style-guide__hat-selection-container { display: flex; flex-wrap: wrap; width: 100%; } .style-guide__hat-selection-container h2 { font-family: Georgia; font-style: normal; font-weight: normal; font-size: 26px; line-height: 30px; letter-spacing: 1px; } .style-guide__hat-section { flex: 0 0 33%; position: relative; max-width: 33%; } .style-guide__hat-section .slick-prev, .style-guide__hat-section .slick-next { display: none!important; } .style-guide__main-container { max-width: 1166px; margin: 0 auto; } .style-guide__text-container { width: 100%; text-align: left; padding: 15px; } .style-guide__text-container ul { margin: 0px; padding: 0px; list-style-type: none; } .style-guide__text-container ul li { font-family: Montserrat; font-style: normal; font-weight: normal; font-size: 17px; line-height: 24px; } .contact__top-section { position: relative; width: 100%; clear: both; display: flex; flex-wrap: wrap; } .contact__main-image { width: 50%; } .contact__main-image img { width: 554px; } .contact__main-content { width: 50%; text-align: left; padding: 0 15px 0 15px; } .contact__main-content p { margin-bottom: 25px; font-size: 15px; line-height: 20px; } a.link-blk { color: #000; text-decoration: underline; } .contact__main-content strong { text-transform: uppercase; } .contact__main-content h1 { font-style: normal; font-weight: normal; font-size: 52px; line-height: 63px; margin-bottom: 35px; } .contact__main-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; padding: 35px 0 35px 0; } .contact__left-main { width: 50%; text-align: left; padding-left: 25px; padding-right: 15px; } .container__main.--social-media-section .horizontal__rule { margin-bottom: 15px; } .contact__left-main p { font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 17px; line-height: 21px; } .contact__right-links { width: 50%; text-align: left; padding-right: 25px; padding-left: 15px; } .contact__right-links ul { list-style-type: none; margin: 0px; padding: 0px; } .contact__right-links img { float: left; position: relative; top: 1px; margin-right: 20px; } .contact__right-links a { color: #000; font-family: 'Montserrat', sans-serif; font-style: normal; font-weight: normal; font-size: 17px; line-height: 21px; } .contact__right-links ul li { float: left; margin-right: 25px; } ul.sustain__list { list-style-type: none; margin: 0 auto; padding: 0px; display: inline-block; } ul.sustain__list li { float: left; text-align: center; margin-right: 10px; margin-bottom: 8px; } ul.sustain__list img { display: inline-block; margin: 0 auto; width: 50px; } ul.sustain__list span { display: block; font-size: 15px; width: 100px; } .block__height-sustainability { height: 100px; } .block__height-sustainability .sustain__list:nth-of-type(2){ display: none!important; } @keyframes FadeIn { 0% { opacity: 0; top: 25px; } 100% { opacity: 1; top: 0px; } } /* mobile */ @media only screen and (max-device-width: 740px), only screen and (max-device-width: 740px), only screen and (max-width: 740px) { .block__height-sustainability { height: inherit!important; } .block__height-sustainability .sustain__list:nth-of-type(2){ display: none!important; } .--desktop { display: none!important; } .--mobile { display: inherit!important; } ul.sustain__list li { margin-right: 0px!important; min-height: 120px; } ul.sustain__list { width: 210px; } .hero__header.main__header { height: 518px!important; background-size: 220%; } .hero__header { height: 279px; /*background: url('./dylan-putty-hero.png') no-repeat center center fixed;*/ background-position: center; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: 130%; /* Resize the background image to cover the entire container */ background-attachment: scroll; } .hero__header-text h1 { font-size: 31px; margin: 0px 0px 5px 0px; } .hero__header-text span { font-size: 16px; margin: 0px 0px 15px 0px; } .fedora__hero-container { margin-top: 43px; } .luke-bone__feature { width: 375px; height: 410px; position: relative; text-align: left; } .feature__1 { position: absolute; left: 10px; top: 5px; } .feature__2 { position: absolute; right: 10px; top: 0px; width: 155px; } .feature__2 .text__block { position: relative; top: -20px; left: 20px; } .feature__3 { position: absolute; left: 20px; bottom: 0px; width: 350px; } .fedora__hero-actions-container { margin-top: 15px; } h1.h1__secondary { font-size: 31px; line-height: 38px; padding: 0 15px 0 15px; } ul.list__style-guide-hats li { width: 50%; } ul.list__made-info li { width: 100%; margin-bottom: 45px; } .list__made-info--item img { width: 50%; } ul.list__made-info li span { font-style: normal; font-weight: normal; font-size: 15px; } .container__made-info-inner { width: 300px; } .hat_sliders { margin: 0 45px 0 45px; } .hat_sliders .list__hat-top { width: 80%; } .hat_sliders .list__hat-top .list__hat-top--item { width: 100%; } .hat_sliders .list__hat-top .list__hat-top--text { width: 100%; padding-top: 35px; } .hat_sliders .list__hat-top--item { text-align: center; } .hat_sliders .list__hat-top--item img { width: 75%!important; display: inline-block; margin: 0 auto; } .hat_sliders .list__hat-top--text.--title { text-align: center; } .hat_sliders .list__hat-top--text { text-align: left; } .hat_sliders .list__hat-top--text h2 { font-weight: bold; font-size: 22px; line-height: 39px; } .hat_sliders .list__hat-top--text p { font-size: 17px; line-height: 24px; font-style: normal; font-weight: 100; font-family: Montserrat; margin-bottom: 25px; } .hat_sliders p.--button__container { text-align: center; width: 100%; } .hat_sliders .list__hat-top--text .btn.btn-black { display: inline-block; margin: 0 auto; } ul.list__hat-top li { width: 80%; } ul.list__hat-top li .list__hat-top--item { width: 100%; } ul.list__hat-top li:nth-child(odd) .list__hat-top--item { width: 100%; } ul.list__hat-top li:nth-child(odd) .list__hat-top--text { width: 100%; padding-top: 35px; } ul.list__hat-top li .list__hat-top--text { width: 100%; padding-top: 35px; padding-right: 0px!important; padding-left: 0px!important; } ul.list__hat-top li .list__hat-top--item img { width: 75%; } ul.list__hat-top li .list__hat-top--item a:hover { text-decoration: underline; } .list__measure--item { height: inherit; } .container__measure-inner { width: 90%; } .stevie__header { height: 250px; width: 85%; position: relative; margin-top: 45px; } .--mobile-h1__spacing { margin-top: 45px; } .footer__col.--subscribe { width: 100%; } .footer__col.footer__logo-main-container { width: 100%; } .footer__subscribe { margin: 0 auto; width: 90%; } .footer__subscribe-text { font-size: 15px; } .footer__col { width: 50%; } .footer__menu-about { padding: 35px 25px 0 25px; } .--menu__about .footer__menu-about{ margin-left: 10%; margin-top: 22px; } .--menu__customer-care .footer__menu-about{ margin-right: 10%; } .footer__col.--last { width: 100%; display: inline-block; clear: both; position: relative; } .footer__menu-social { float: right; width: 50%; } .footer__menu-social { float: right; margin: 45px 0 0 0; display: inline-block; position: relative; width: 50%; } .footer__menu-social ul { margin-right: 10%; } .footer__logo-container { display: inline-block; position: relative; width: 50%; } .footer__logo-container img { margin-left: 10%; } .footer__date { float: right; display: inline-block; position: relative; top: -35px; width: 50%; } .footer__date .footer__date-text { margin-right: 10%; } .footer__menu-social ul li { float: left; display: inline-block; padding-right: 10px!important; padding-left: 10px!important; } .list__made-info--item img { display: inline-block!important; } .mobile__earth-item { width: 100%; text-align: center; padding: 25px; } .mobile__earth-item img { display: inline-block!important; } .container__hat-top-inner.--fit-guide-slider { display: none!important; } .fit-guide__header-text, .fit-guide__header-text { padding: 0px 22px 0px 22px; } .fit-guide__head-shape-container.--desktop { display: none!important; } .fit-guide__head-shape-container { display: block!important; flex: 0 0 100%; } .fit-guide__head-shape-container .fit-guide__head-shape-text { margin: 35px 0 35px 0; padding: 0px 22px 0px 22px; } .fit-guide__head-shape-text h2 { letter-spacing: 1px; text-align: center; display: block; width: 100%; } .fit-guide__header-text h1 { font-size: 31px; line-height: 38px; margin-bottom: 5px; } .fit-guide__header-text h3 { font-size: 16px; line-height: 18px; text-align: center; margin-top: 10px; margin-bottom: 15px; } .fit--guide__choose-material-container { display: inline-block!important; width: 100%; } .fit--guide__choose-material-container .choose-material-block { width: 100%; } .fit-slider .slick-next, .fit-slider .slick-prev { display: none!important; } .fit-slider .choose-material-block { width: 100%; } .fit--guide__choose-material-container.--desktop { display: none!important; } .fit-slider.--mobile { display: inherit; } .style-guide__hat-section { flex: 0 0 100%; position: relative; max-width: 100%; } .contact__left-main { width: 100%!important; } .contact__right-links { width: 100%!important; } .contact__right-links li { margin-top: 15px; } .contact__main-image { width: 100%!important; } .contact__main-content { width: 100%!important; } .hero__header.main__header.--hat-care { height: 150px!important; background-size: 100%; margin-bottom: 25px; } .hero__header.main__header.--hat-care h1 { font-size: 24px; position: relative; left: 20px; top: 25px; } .hero__header.--hat-care { /*background: url('./dylan-putty-hero.png') no-repeat center center fixed;*/ background-position: left; /* Center the image */ background-repeat: no-repeat; /* Do not repeat the image */ background-size: 800px; /* Resize the background image to cover the entire container */ background-attachment: inherit; } }