/* * Icon 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(https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/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; } /* !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; } #search { left:auto; margin-left:0px; right:50px; } } @media screen and (max-width: 740px) { .gridlock-fluid .row { width: 98%! important; } .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%; } .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%;overflow-x:scroll; } .gridlock .row .tablet-2 { width: 31.25%; overflow-x:scroll;} .gridlock .row .tablet-3 { width: original 47.9166666666666667%;overflow-x:scroll; } .gridlock .row .tablet-4 { width: 64.5833333333333333%;overflow-x:scroll; } .gridlock .row .tablet-5 { width: 81.25%;overflow-x:scroll; } .gridlock .row .tablet-6 { width: 97.9166666666666667%;overflow-x:scroll; } /* 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%;overflow-x:scroll;} .gridlock .row .mobile-2 { width: 64.5833333333333333%; overflow-x:scroll;} .gridlock .row .mobile-3 { width: 100%; text-align: center;margin: 0; overflow-x:scroll;} /* 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: 100%; } /* 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; } .first { clear: left; } html, body { height: 100%; font-family: Montserrat, Osaka; } body { color: #000000; background: #ffffff; font-size: 16px; font-family:'Montserrat', sans-serif; line-height: 1.6em; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; position: relative; text-rendering: optimizeLegibility; } .no-fouc {display: none;} .load-wait { width: 100%; text-align: center; margin-top: 100px; font-size: 50px; color: #ddd; margin-bottom: 50px; } .hide { display: none; } img { max-width: 100%; border: 0; } h1, h2, h3, h4, h5, h6 { color: #000000; font-family:'Montserrat', sans-serif,Osaka; font-weight: 700; text-transform: none; letter-spacing: 1px; 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: 22px; } h2 { font-size: 18px; } h3 { font-size: 16px; } h4 { font-size: 14px; } h5 { font-size: 14px; } h6 { font-size: 16px; } h1, h2, h3, h4, h5, h6, p, dl, hr, ol, ul, pre, table, address, fieldset { margin-bottom: 10px; } p { font-size: 16px; 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: #000000; outline: 0; -webkit-transition:color 0.3s ease-in; -moz-transition:color 0.3s ease-in; -o-transition:color 0.3s ease-in; transition:color 0.3s ease-in; } a:hover { color: #8fc4bd; text-decoration: none;} a:visited { /*color:#000000;*/ 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:#f0f0f0; border:none; color:#f0f0f0; 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; } */ .clearfix{ zoom:1; } .clearfix::after{ content: ""; display: block; clear: both; } /* #Buttons ================================================== */ .button, button, input[type="submit"], input[type="reset"], input[type="button"] { width: 100%; max-width: 100%; background: #000000; border: none; border-radius: 30px; -webkit-transition: background 0.3s ease,color 0.3s ease; -moz-transition: background 0.3s ease,color 0.3s ease; -o-transition: background 0.3s ease,color 0.3s ease; transition: background 0.3s ease,color 0.3s ease; -webkit-appearance: none; color: #ffe700; display: inline-block; font-family: 'Montserrat', sans-serif; font-weight: 400; font-size: 16px; text-decoration: none; cursor: pointer; margin-bottom: 20px; line-height: normal; padding: 15px 0; font-family: 'Montserrat', sans-serif; } .button:hover, button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { color: #ffe700; background: #6f6f6f; } .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; } .button.newsletter, input[type="submit"], input[type="reset"], input[type="button"] { display: inline-block! important; margin-left: 0px; width: auto! important; line-height: 40px! important; padding: 0 15px! important; } /* #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-size: 16px; font-family: 'Montserrat', sans-serif; color: #777; margin: 0; width: 100%; max-width: 100%; display: block; margin-bottom: 20px; background: #fff ; position: relative; height: 5px; } 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: 400; font-size: ; 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: #000000; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000000; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000000; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #000000; } input[type=text], input[type=password], input[type=email], input[type=url], input[type=number] { width: 100%; border: 1px solid #f0f0f0; padding: 15px 0px; margin: 0px; margin-bottom: 20px; max-width: 100%; text-indent: 5px; outline: none; } textarea { width: 100%; border: 1px solid #f0f0f0; height: 200px; margin: 0px; margin-bottom: 40px; max-width: 100%; padding: 2% 17px; outline: none; } /* =============== */ /* = Start CSS = */ /* =============== */ .bannertop { line-height: 30px; font-family: 'Open Sans Condensed', sans-serif; font-size: 12px; background: #3f3f3f; color: #ffffff; text-align: left; letter-spacing: 1px; } ul#cart { text-align: right; z-index: 5; position: relative; list-style: none; margin-top: 0; } ul#cart li { display: inline-block; padding: 0 0 0 10px; } ul#cart li a { text-transform: uppercase; font-family: 'Open Sans Condensed', sans-serif; font-size: 12px; color: #ffffff; } select#currencies { width: auto; text-align: center; display: inline-block; float: none; margin-left: 10px; background: transparent; border: 0; margin-bottom: 0; -moz-appearance:none; -webkit-appearance: none; text-transform: uppercase; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; } i.icon-shopping-cart { margin-left: 5px; } #phantom { visibility: hidden; } header { border-bottom: 1px solid #f0f0f0; width: 100%; line-height: 50px; top:0; z-index: 20; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; /* REST OF SITE STATIC HEADER BACKGROUND */ background: #ffffff; } .scrollheader { position: relative; } /* When using single full page image to eliminate scrollbars */ .coverheader { position: fixed; z-index: 900; } /* REST OF SITE SCROLLING HEADER BACKGROUND */ .coverheader { background: #ffffff; } /* HOMEPAGE STATIC HEADER BACKGROUND */ .index header { background: #ffffff; } /* HOMEPAGE SCROLLING HEADER BACKGROUND */ .index .coverheader { background: #ffffff; } select#currencies { width: auto; text-align: center; display: inline-block; float: none; margin-left: 10px; background: transparent; border: 0; margin-bottom: 0; -moz-appearance:none; -webkit-appearance: none; text-transform: uppercase; font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; } header ul { margin-bottom: 0; } #search { position:relative; float:right; display:block; width: 400px; text-align: center; padding-top: 20px; } #search_popup { text-align: center; } #search_popup #q { text-indent: 0; text-align: center; } input.isp_add_to_cart_btn { background: black !important; color: white !important; } #logo { vertical-align: middle; margin-right: 20px; display: inline-block; } #logo a { float: left; font-family: 'Josefin Sans', sans-serif; font-size: inherit; text-transform: uppercase; font-weight: 700; color: #000000; text-decoration: none; } #logo img { vertical-align: middle; padding: 10px 0; } /* NAV ( REST OF SITE ) - not HOMEPAGE */ .scrollheader ul#main-nav li a { color: #000000! important;} .scrollheader ul#main-nav li a:hover { color: #8fc4bd!important; } .coverheader ul#main-nav li a { color: #000000! important; } .coverheader ul#main-nav li a:hover { color: #8fc4bd! important; } /* NAV ( HOMEPAGE ONLY ) */ .index .scrollheader ul#main-nav li a { color: #000000! important; } .index .scrollheader ul#main-nav li a:hover { color: #8fc4bd!important; } .index .coverheader ul#main-nav li a { color: #000000! important; } .index .coverheader ul#main-nav li a:hover { color: #8fc4bd! important; } #navigation { width: 100%; position: relative; /*background-image: url("../../../../../0589/9557/files/bg3_736353916211705512.jpg");*/ } nav { display: inline-block; } ul#main-nav { list-style: none; text-align: left; margin-bottom: 0; width: 100%; } ul#main-nav li { display: inline-block; vertical-align: middle; } ul#main-nav li a { font-family: Verdana, Helvetica, Arial, sans-serif; font-weight: 700; font-size: 15px; display: block; padding: 0 10px; text-transform: uppercase; letter-spacing: 1px; -webkit-font-smoothing: antialiased; } /* HIGHLIGHT ACTIVE LINK */ ul#main-nav li a.current { color: #666666! important; } /* NO LINK UNDERLINE */ ul#main-nav li a:hover { text-decoration: none; } /* DOWNDOWN INDICATOR CHEVRONS */ ul#main-nav li.dropdown > a:after { font-family: 'FontAwesome'; content: "\f107"; margin-left: 10px; line-height: initial; } /* DROPDOWN LEVEL 1 */ ul#main-nav li ul.submenu { display: none; position: absolute; z-index: 5; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; width: 200px; } /* SHOW DROPDOWN ON HOVER */ ul#main-nav li.dropdown:hover ul.submenu { display: block; } /* INDEX DROPDOWN STATIC */ .index header ul#main-nav li ul { background: #ffffff; border: 0 none; } /* INDEX DROPDOWN SCROLLING */ .index .coverheader ul#main-nav li ul { background: #ffffff; border: 1px solid #f0f0f0; border-left: 0 none; border-right: 0 none; } /* REST OF SITE DROPDOWN SCROLLING */ header ul#main-nav li ul { background: #ffffff; border: 1px solid #f0f0f0; border-left: 0 none; border-right: 0 none; } /* REST OF SITE DROPDOWN SCROLLING */ .coverheader ul#main-nav li ul { background: #ffffff; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; } /* DROPDOWN LEVEL 1 STYLES */ ul#main-nav li ul.submenu li{ line-height: 30px! important; margin: 0; padding: 0; width: 100%; white-space: nowrap; background: transparent! important; min-width: 220px; float: left; } /* DROPDOWN LEVEL 1 LINK STYLES */ ul#main-nav li ul.submenu li a{ text-align: left; text-transform: none! important; font-weight: normal; font-size: 15px! important; } /* NESTED MENU */ .submenu li.nest { position: relative; } /* NESTED MENU INDICATOR */ ul#main-nav li ul.submenu li.nest:after { position: absolute; top: 0px; right: 30px; font-family: 'FontAwesome'; content: "\f105"; } /* VISIBLE NESTED MENU */ .submenu li.nest:hover > ul.nested { display: block; } /* HIDDEN NESTED MENU */ .nested { display: none; position: absolute; left: 200px; top: 0; } .nested li a { text-transform: none! important; font-weight: normal; font-size: 15px! important; } ul.megamenu { display: none; position: absolute; left: 0; z-index: 2; line-height: initial; width: 100%; -webkit-transition: background-color 1000ms linear; -moz-transition: background-color 1000ms linear; -o-transition: background-color 1000ms linear; -ms-transition: background-color 1000ms linear; transition: background-color 1000ms linear; } /* MEGAMENUS */ ul#main-nav li.dropdown:hover > ul.megamenu { display: block; } @media screen and (min-width: 1220px) { .mega-container { width: 1200px; } } @media screen and (max-width: 1220px) { .mega-container { width: 960px; } } @media screen and (max-width: 980px) { .mega-container { width: 720px; } } @media screen and (max-width: 740px) { .mega-container { display: none; } } .mega-container { margin: 0 auto; } /* SCROLLING REST OF SITE */ .coverheader ul#main-nav li ul.megamenu { background: #ffffff; } /* STATIC REST OF SITE */ header ul#main-nav li ul.megamenu { background: #ffffff; } /* STATIC INDEX */ .index .scrollheader ul.megamenu { background: #ffffff! important; } /* SCROLLING INDEX */ .index .coverheader ul.megamenu { background: #ffffff! important; } ul.megamenu li > ul { width: 100%; } ul.megamenu { padding-bottom: 20px; } ul.megamenu h4 { padding: 20px 0 5px; font-family: Verdana, Helvetica, Arial, sans-serif! important; font-weight: bold; margin-bottom: 10px; text-align: left; font-size: 15px; text-transform: uppercase; letter-spacing: initial; } ul.megamenu li:hover { } ul.megamenu li > ul.mega-stack { border: 0! important; } ul.megamenu li > ul.mega-stack li { line-height: 20px! important; text-align: left! important; display: block! important; clear: left; } ul.megamenu li > ul.mega-stack li a { padding: 0! important; text-transform: none! important; font-weight: normal; font-size: 15px! important; } /* SCROLLING REST OF SITE */ .coverheader ul#main-nav li ul.megamenu li > ul.mega-stack li a { color: #000000; } .coverheader ul#main-nav li ul.megamenu li > ul.mega-stack li a:hover { color: #8fc4bd; } .coverheader ul#main-nav li ul.megamenu h4 { color: #000000; } /* STATIC REST OF SITE */ .scrollheader ul#main-nav li ul.megamenu li > ul.mega-stack li a { color: #000000; } .scrollheader ul#main-nav li ul.megamenu li > ul.mega-stack li a:hover { color: #8fc4bd; } .scrollheader ul#main-nav li ul.megamenu h4 { color: #000000; } /* STATIC INDEX */ .index .scrollheader ul.megamenu li > ul.mega-stack li a { color: #000000! important; } .index .scrollheader ul.megamenu li > ul.mega-stack li a:hover { color: #8fc4bd!important; } .index .scrollheader ul#main-nav li ul.megamenu h4 { color: #000000! important; } /* SCROLLING INDEX */ .index .coverheader ul.megamenu li > ul.mega-stack li a { color: #000000! important; } .index .coverheader ul.megamenu li > ul.mega-stack li a:hover { color: #8fc4bd! important; } .index .coverheader ul#main-nav li ul.megamenu h4 { color: #000000! important; } .megamenu .product-index img { margin-top: 20px; } .megamenu img { margin-top: 20px; } .mega-container .product-index p { min-height: 30px; } .mega-container .product-index a, .mega-container .product-index .price { font-size: 11px! important; font-weight: bold; } .mega-container .product-details { line-height: 1em; } .mega-container .product-details p { font-family: 'Montserrat', sans-serif; } /* ============================================== */ /* ================ index.liquid ================ */ /* ============================================== */ /* CONDITIONAL FOR BACKSTRETCH AND NO OTHER CONTENT ON HOMEPAGE */ /* BACKGROUND SLIDESHOW ONLY */ /* ALL HOMEPAGE ELEMENTS */ #homepage-collections, #homepage-products, #homepage-promo, #homepage-pages-one, #homepage-pages-two, #homepage-instagram { width: 100%; position: relative; padding-top: 30px; padding-bottom: 30px; } /* HOMEPAGE COLLECTIONS */ section#homepage-collections { background: #ffffff; } section#homepage-collections h2, section#homepage-collections .fr a { color: #454545! important; } .prod-vendor { text-align: center; } #collection-loop { } .collection-block { padding-bottom: 30px; display: block; float: left; width: 100%; } #collection-loop .owl-controls.clickable { position: absolute; top: -70px; right: 13px; } #collection-loop .owl-item { padding: 0 13px; } .collection-carousel .product { margin-bottom: 0; } .collection-index { position: relative; } .collection-info { text-align: center; margin-top: 10px; } .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; text-align: center; } .ci img { text-align: center; margin: 0 auto; } /* IMAGE BLOCKS */ section#homepage-promo { background-color: #ffffff; padding-top: 30px; padding-bottom: 30px; } section#homepage-promo, section#homepage-promo .caption p { font-family: 'Montserrat', sans-serif; font-size: 20px; color: #FFF; font-weight: normal; } section#homepage-promo img { border: 8px solid rgba(255,255,255,0.8); } section#homepage-promo .pimg { min-height: 1px; } .promo-inner { position: relative; } .promo-inner .caption { position: absolute; text-align: left; /* width: 100%; height: 100%; */ top: 40%; left:10%; } .promo-inner .caption p { vertical-align: middle; font-size: 30px; } /* HOMEPAGE PRODUCTS */ section#homepage-products { background: #ffffff; } section#homepage-products h2, section#homepage-products .fr a { color: #454545! important; } /* IMAGE PAGES */ section#homepage-pages-one { background-color: #ffffff; padding: 50px 0 0; } section#homepage-pages-two { background-color: #ffffff; background: url(pages-2-promo-background_v-11225806491559515570.jpg) fixed 0 100% no-repeat; padding: 50px 0; } /* INSTAGRAM */ section#homepage-instagram { background: #ffffff; z-index: 3; } section#homepage-instagram .section-title { margin-bottom: 0; } section#homepage-instagram h2 { color: #454545!important; } #instafeed { float: left; background: #fff; } .index img.instagram-image { width: 16.666666666666668%; height: 200px; padding: 0; margin: 0; float: left; /* filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 3.5+ */ /* filter: grayscale(100%); /* Current draft standard */ /* -webkit-filter: grayscale(100%); */ /* New WebKit */ /* -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: gray;*/ /* IE6+ */ /* -webkit-transition: all .5s ease-in-out; */ /* opacity: 0.6; */ } /* .index img.instagram-image:hover { filter: none; -webkit-filter: grayscale(0); opacity: 1; } */ .index .section-title { margin-bottom: 30px; float: none! important; } /* HOMEPAGE SECTION TITLES */ .section-title { line-height: 60px; text-align: center; float: left; width: 100%; } .section-title h2{ line-height: inherit; margin-bottom: 0; border-bottom: 1px solid #f0f0f0; } .section-title h3{ line-height: inherit; margin-bottom: 0; border-bottom: 1px solid #f0f0f0; } .section-title h1 { line-height: inherit; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; } /* ============================================== */ /* ================ collection.liquid ================ */ /* ============================================== */ .collection-title { border-bottom: 2px solid #f0f0f0; text-align: center; } p.view-full { margin-top: 15px; padding: 15px 0; } .collection .bigimage { max-width: 99.4%; } span.prev-prod, span.next-prod { min-height: 1px; } .active { background: #e5e5e5; } #product-loop { margin: 0 auto; width: 100%; min-width: 100%; } #collection-description { margin-bottom: 20px; } #collection-description h1 { text-align: center; margin-bottom: 10px; } #collection-description .rte { border-top: 0; margin: 0; padding: 0; } .product { margin-bottom: 20px; position: relative; z-index:8} .product-info { text-align: center; position: absolute; bottom: 100px; left: 50%; margin-left: -50%; width: 100%; display: none; z-index: 100000; } .product-quick-view { overflow: hidden; } .product-info form { margin-top: 20px; } .product-index .single-option-selector { margin: 5px auto 10px; } .qvimages img { padding: 5px; } .product-details { text-align: center; margin-top: 15px; } .product-details h4 { color: #000000; margin-bottom: 3px; letter-spacing: initial; font-weight: 400; font-size: 16px; font-family: 'Montserrat', sans-serif; } .product-details h3 { color: #000000; margin-bottom: 3px; font-weight: 400; letter-spacing: initial; font-size: 16px; font-family: 'Montserrat', sans-serif; } .price { color: #666; margin-bottom: 3px; letter-spacing: initial; font-weight: 500; font-size: 14px; } .compare-price, .product-price { } .was, .product-compare-price, .compare-price { text-decoration: line-through; } .was { display: inline; margin-left: 5px; } .onsale { display: inline; color: #ba2323; } .icn { position: absolute; top: 10px; width: 50px; height: 50px; border-radius: 50%; right: 10px; text-align: center; padding: 0 10px; font-family: 'Montserrat', sans-serif; font-size: 11px; line-height: 52px; } .new { z-index: 2; background: #e5e5e5; color: #000000; } .sale-item { z-index: 3; font-size: 10px; background: #af2b2b; color: #ffffff; } .so { z-index: 4; background: #000000; color: #ffffff; line-height: initial; padding-top: 15px; } .product-modal { font-size: 12px; letter-spacing: 1px; position: absolute; bottom: 20%; text-align: center; color: #ffffff; background: #000000! important; padding: 10px; left: 50%; width: 60%; margin-left: -30%; font-weight: 300; -webkit-transition: background-color 0.3s linear; -moz-transition: background-color 0.3s linear; -o-transition: background-color 0.3s linear; -ms-transition: background-color 0.3s linear; transition: background-color 0.3s linear; } .product-modal:hover { color: #ffffff! important; background: #8fc4bd! important; } .quick-shop { overflow: hidden; width: 720px; } .product-quick-view { width: 720px; } .product-quick-view .product-photos { float: left; width: 48%; margin-right: 1.9%; } .product-quick-view #product-right { float: left; width: 48%; margin-left: 1.9%; } .show { display: none; } #sidebar.sticky { float: none; position: fixed; top: 20px; z-index: 6; left: auto; } #bside { float: right; } #sidebar h1 { margin-bottom: 20px;} #sidebar h4 { text-transform: uppercase; padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #f0f0f0; } #sidebar ul { list-style-type: none; margin-bottom: 20px; } #sidebar ul li a.current { border-bottom: 1px solid #f0f0f0; text-decoration: none; } #sidebar label { border-bottom: 1px solid #f0f0f0; padding-bottom: 5px; margin-bottom: 10px; font-weight:bold;} #sidebar img { margin-bottom: 20px; } #sidebar .selecter { margin-bottom: 20px; } .sorting label { clear: none; margin-right: 10px; line-height: 16px; display: inline-block; } select#sort-by, select.coll-filter { width: initial; background: transparent; border: 0; display: inline-block; } .sorting { width: 100%; text-align: right } ul#sort-me { list-style: none; } ul#sort-me li.filter ul li.current a:before { color: #000000; } ul#sort-me li.filter ul li a:before { content: "\f00c"; font-family: fontAwesome; border: 1px solid #eee; margin: 0 10px 0 0; text-align: center; padding: 3px; font-size: 10px; color: transparent; } ul#sort-me li.filter ul li { margin: 5px 0; } /* ============================================== */ /* ================ product.liquid ================ */ /* ============================================== */ #product-description form .selecter { display: inline-block; width: 50%; margin-top: 2px; } .selector-wrapper label { float: left; margin-right: 20px; line-height: 40px; min-width: 40px; } #bigimage { text-align: center; margin-bottom: 20px; max-width: 548px; } .active img {border:1px solid #ccc !important;} img.zoomImg { background: #ffffff; } .thumbnail { margin-bottom: 10px; } #product-price { padding-bottom: 10px; font-size: 16px; margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; } #product-description { text-align: left; } #product-description h1, #product-right h5 { text-transform: uppercase; } #product-description form { margin-bottom: 10px; border-bottom: 1px solid #f0f0f0; padding-top: 10px; } #product-description form label { text-transform: uppercase; min-width: 76px; display: inline-block; float: left; line-height: 42px; } .product-add { margin-top: 20px; } .product-add label { float: left; line-height: 44px; margin-right: 10px; padding: 0! important; display: inline-block; min-width: initial! important; } .quantity { line-height: 40px; height: 40px; text-indent: 0! important; text-align: center; padding: 0! important; width: 50px! important; background: transparent! important; border: 1px solid #f0f0f0; display: inline-block; color: #000000; } .add { display: inline-block! important; margin-left: 20px; width: auto! important; line-height: 40px! important; padding: 0 20px! important; } @media screen and (max-width: 740px ) { .product-add { text-align: center; } .product-add label { width: initial! important; float: none; } .add { margin-left: 10px! important; } } .desc { padding-top: 20px; padding-bottom: 10px; } .full-click { display: block; text-align: center; margin-top: 20px; } #related { border-top: 1px solid #f0f0f0; margin-top: 20px; padding: 20px 0; float: left; text-align: center; } .related-carousel .owl-item { padding: 10px; } #social { float: left; width: 100%; padding-bottom: 10px; } #product-navigation { text-align: center; } #back-forth img { margin: 0 5px; vertical-align: middle; } .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; } .what-is-it { margin-bottom: 15px; line-height: 42px;} .what-is-it label { display: inline; margin-right: 10px; } #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; position: relative; } //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; position: absolute; right: -30px; top: 85px; } .btn.prev { border: 1px solid #f0f0f0; color: #444; padding: 4px 7px; font-weight: 100; position: absolute; left: -30px; top: 85px; } .collection div.zoomWindow, .index div.zoomWindow { display: none! important; } .collection div.zoomLens, .index div.zoomLens { opacity: 0! important; } div.zoomContainer { z-index: 1; } #product-header { margin-bottom: 30px; text-align: center; line-height: 60px; } #product-header div { min-height: 1px; } #product-header h1 { margin-bottom: 0; line-height: 60px; border-bottom: 1px solid #f0f0f0; } .product .rte, .collection .rte, .index .rte { margin-top: 10px; padding-top: 10px; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; margin-bottom: 10px; } #related h4 { margin-bottom: 20px; } #mobile-product { display: none; } .ajaxified-cart-feedback.success { margin: 20px 0 30px ; } .ajaxified-cart-feedback.error { color: #FF4136; } .ajaxified-cart-feedback.success a { color: #000000! important; background: #ffe710! important; padding: 10px 20px; -webkit-transition: background 0.3s ease,color 0.3s ease; -moz-transition: background 0.3s ease,color 0.3s ease; -o-transition: background 0.3s ease,color 0.3s ease; transition: background 0.3s ease,color 0.3s ease; border-radius: 5px;} .ajaxified-cart-feedback.success a:hover { color: #ffe710! important; background: #000000! important; text-decoration: none; } /* ============================================== */ /* ================ cart.liquid ================ */ /* ============================================== */ #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 #f0f0f0; text-align: left; } #basket-right { text-align: center; } #basket-right h4 { } #basket-right p { margin-bottom: 20px; font-size: 14px; } #basket-right img { width: 50px; } #note { margin-top: 10px; } #cart-notes { margin-top: 20px; margin-bottom: 20px; } /* ============================================== */ /* ================ blog.liquid & page.liquid ================ */ /* ============================================== */ .rte h1 { border-bottom: 0! important; } #page { clear: left; margin-bottom: 50px; } #page h1 { text-align: center; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 1px solid #f0f0f0; } #page h1.page-title { text-align: left! important; } #page-sidebar h2 { border-bottom: 1px solid #f0f0f0; line-height: 60px; } #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; padding-top: 20px; } .article-image { margin-bottom: 10px; } .article-info { } .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: 16px; 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 label { float: left; display: inline-block; margin-right: 10px; font-size:15px; } .share-icons a { display: inline-block; margin-right: 5px; color: #444444; } .share-icons a:hover { color: #222222; } #blog-article .share-icons { text-align: center! important; } ul#blog-articles, #blog-article { list-style-type: none; } .single-article { margin-bottom: 50px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; 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 #f0f0f0; } #blog-sidebar #social-icons a { color: #444444; } #blog-sidebar #social-icons a:hover { color: #222222; } #twitter-card, #facebook-card, #instagram-card { width: 100%; float: left; clear: left; display: block; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #f0f0f0; } #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; } #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 #f0f0f0; } 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 { } ul#commentlist { margin-top: 20px; list-style-type: none; } ul#commentlist li { float: left; display: block; width: 100%; margin: 0 0 20px 0; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; } ul.disc { margin-bottom: 0; } .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: #000000! important; background: #ffe710! important; padding: 10px 20px; -webkit-transition: background 0.3s ease,color 0.3s ease; -moz-transition: background 0.3s ease,color 0.3s ease; -o-transition: background 0.3s ease,color 0.3s ease; transition: background 0.3s ease,color 0.3s ease; } .readmore a:hover { color: #ffe710! important; background: #000000! important; text-decoration: none; } ul#social-icons { list-style: none; } ul#social-icons li { display: inline-block; margin-right:10px; } ul#blog-recent, ul#blog-tags { list-style: none; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; } /* ============================================== */ /* ================ search.liquid ================ */ /* ============================================== */ .search-content { text-align: left; padding: 10px; } #search-bar { margin-bottom: 20px; margin-top: 20px; border-bottom: 1px solid #f0f0f0; } #search-bar #q {width: 300px; } #q { text-transform: uppercase;} /* ============================================== */ /* ================ customer accounts ================ */ /* ============================================== */ #customer-wrapper { 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 #f0f0f0; border-right: 1px solid #f0f0f0; margin: 0 10px; } a#view_address { display: block; margin-top: 10px; } .center { text-align: center; } /* ============================================== */ /* ================ footer ================ */ /* ============================================== */ footer { position: relative; z-index: 2; margin: 0; padding: 0; } #footer-wrapper { z-index: 2; clear: left; border-top: 1.5px solid #000000; background: #ffe710; padding: 50px 0; text-align: left; /*background-image: url("../../../../../0589/9557/files/bg3_736353916211705512.jpg");*/ } #footer-wrapper p { color: #000000; } #footer-wrapper h4 { color: #000000; text-transform: uppercase; font-size: 15px; border-bottom: 1.5px solid #000000; letter-spacing: 1px; padding-bottom: 5px; font-weight: 500; line-height: 12px; } #footer-wrapper ul { list-style: none; margin-top: 30px; } #footer-wrapper ul li a { color: #000000; } #footer-wrapper ul li a:hover { color: #8fc4bd; } div#footer_signup { margin-top: 30px; } input#footer-EMAIL { width: 75%; display: inline-block; float: left; margin-bottom: 0; background: #ffffff; color: #000000; border: 0; border-radius: 0; } input#footer-EMAIL::-webkit-input-placeholder { /* WebKit browsers */ color: #000000;} input#footer-EMAIL:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000000;} input#footer-EMAIL::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000000;} input#footer-EMAIL:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #000000;} input#footer-subscribe { width: 25%; float: left; display: inline-block; background: #000000; color: #ffffff; border: 0; border-radius: 0; font-weight: normal; } input#footer-subscribe:hover { background: #8fc4bd; color: #ffffff; } ul#footer-icons { text-align: center; margin-top: 30px; padding-top: 30px; border-top: 1.5px solid #000000; } ul#footer-icons li { display: inline-block; margin: 0 10px; width: 30px; height: 0px; padding: 10px; } ul#footer-icons li.line { width: 30px; padding: 0; height: auto; margin: 0px 18px 4px; vertical-align: middle; } ul#footer-icons li a { font-size: 14px; color: #000000; } ul#footer-icons li a:hover { color: #000000; } .credit { text-align: center; margin-top: 30px; } .credit p { color: #000000; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; } .credit a { color: #000000; } #mc_embed_signup { width: 100%; } #mce-EMAIL { width: 100%; border: 1px solid #f0f0f0; padding: 15px 0px; margin: 0px; margin-bottom: 20px; max-width: 100%; text-indent: 17px; outline: none; } #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; } #subscribe_popup { text-align: center; width: 800px; display: block; margin: 0 auto; overflow: hidden; } .left.fifty { width: 50%; float: left; display: inline-block; } .right.fifty { float: right; width: 50%; display: inline-block; padding: 0 0px 0 20px; text-align: left; } #subscribe_popup ul#footer-icons { text-align: left; margin-top: 0; border-top: 0; padding-top: 0; } /* ============================================== */ /* ================ globals ================ */ /* ============================================== */ .videoWrapper { position: absolute; padding-bottom:; /* 16:9 */ padding-top: ; width: 500px; height: 500px; clear: left; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .video-container > div { position: relative; } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #pagination { clear: left; text-align: center; margin-top: 20px; padding-top: 20px; margin-bottom: 20px; } #pagination a { margin: 0 5px; } #pagination a:hover { text-decoration: none; } #pagination .current { border-radius: 50%; border: 2px solid #f0f0f0; padding: 5px 10px; background: transparent; } /* #pagination .count { margin-right: 20px; } */ #breadcrumb { text-transform: uppercase; font-size: 10px; margin-bottom: 30px; margin-top: 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; } .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; opacity: 0.7; -webkit-transition: opacity 1000ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out; -o-transition: opacity 1000ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out; transition: opacity 1000ms ease-in-out; } /* iframe { width: 100%; } */ @media only screen and (max-width:500px) { iframe { width: 100%; height: 170px} } @media only screen and (min-width:501px) and (max-width:740px) { iframe { width: 100%; height: 270px} } @media only screen and (min-width:741px) and (max-width:980px) { iframe { width: 100%; height: 400px} } /* ============================================== */ /* ================ owl carousel ================ */ /* ============================================== */ .owl-buttons > div { background: #000000; color: #ffe700; padding: 3px 10px; font-family: FontAwesome; font-size: 12px; display: inline-block; text-align: center; transition: background-color 300ms ease-in-out; -moz-transition: background-color 300ms ease-in-out; -webkit-transition: background-color 300ms ease-in-out; -o-transition: background-color 300ms ease-in-out; } .owl-buttons > div:hover { cursor: pointer; color: #ffe700; background: #6f6f6f; } .owl-prev { } .owl-prev:before { content:"\f104" } .owl-next { margin-left: 5px; } .owl-next:before { content:"\f105" } /* 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(https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/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); } } /* * Shifter v3.0.5 - 2014-04-22 * A jQuery plugin for simple slide-out mobile navigation. Part of the Formstone Library. * http://formstone.it/shifter/ * * Copyright 2014 Ben Plum; MIT Licensed */ .shifter-page { overflow: hidden; } .shifter-open { overflow: hidden !important; } .shifter-open .shifter-page *, .shifter-open .shifter-header * { pointer-events: none !important; } .shifter .shifter-navigation { display: none; opacity: 0; } .shifter .shifter-handle { display: none; } nav.shifter-navigation { overflow: auto; overflow-x: hidden; overflow-y: scroll; height: 100% } .shifter-active .shifter-page { background: #ffffff; display: block; left: 0; min-height: 100%; overflow: hidden; position: relative; top: 0; z-index: 1; } .shifter-active .shifter-page, .shifter-active .shifter-header { -webkit-transform: translate3D(0px, 0px, 0px); -moz-transform: translate3D(0px, 0px, 0px); -ms-transform: translate3D(0px, 0px, 0px); -o-transform: translate3D(0px, 0px, 0px); transform: translate3D(0px, 0px, 0px); } .shifter-active .shifter-navigation { background: #ffffff; display: block; height: 100%; opacity: 1; pointer-events: none; position: fixed; top: 0; width: 270px; z-index: 0; } .shifter-active .shifter-page, .shifter-active .shifter-header, .shifter-active .shifter-navigation { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: -webkit-transform 0.2s ease !important; -moz-transition: -moz-transform 0.2s ease !important; -ms-transition: -ms-transform 0.2s ease !important; -o-transition: -o-transform 0.2s ease !important; transition: transform 0.2s ease !important; } .shifter-active .shifter-handle { background: url(jquery.fs_shifter-icon.png) no-repeat center center; cursor: pointer; content: ''; display: block; float: right; height: 40px; width: 50px; position: relative; overflow: hidden; text-indent: 110%; white-space: nowrap; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } /* Right / Default */ .shifter-active .shifter-navigation { right: 0; -webkit-transform: translate3D(0px, 0px, 0px); -moz-transform: translate3D(0px, 0px, 0px); -ms-transform: translate3D(0px, 0px, 0px); -o-transform: translate3D(0px, 0px, 0px); transform: translate3D(0px, 0px, 0px); } .shifter-open .shifter-page, .shifter-open .shifter-header { -webkit-transform: translate3D(-270px, 0px, 0px); -moz-transform: translate3D(-270px, 0px, 0px); -ms-transform: translate3D(-270px, 0px, 0px); -o-transform: translate3D(-270px, 0px, 0px); transform: translate3D(-270px, 0px, 0px); } /* Left */ .shifter-active.shifter-left .shifter-navigation { left: 0; -webkit-transform: translate3D(0px, 0px, 0px); -moz-transform: translate3D(0px, 0px, 0px); -ms-transform: translate3D(0px, 0px, 0px); -o-transform: translate3D(0px, 0px, 0px); transform: translate3D(0px, 0px, 0px); } .shifter-active.shifter-left.shifter-open .shifter-page, .shifter-active.shifter-left.shifter-open .shifter-header { -webkit-transform: translate3D(270px, 0px, 0px); -moz-transform: translate3D(270px, 0px, 0px); -ms-transform: translate3D(270px, 0px, 0px); -o-transform: translate3D(270px, 0px, 0px); transform: translate3D(270px, 0px, 0px); } /* Open */ .shifter-open .shifter-navigation { pointer-events: all; z-index: 1\9; /* IE9 */ -webkit-transform: translate3D(0px, 0px, 0px); -moz-transform: translate3D(0px, 0px, 0px); -ms-transform: translate3D(0px, 0px, 0px); -o-transform: translate3D(0px, 0px, 0px); transform: translate3D(0px, 0px, 0px); } /* IE 10 ONLY */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { /* Right / Default */ .shifter-active .shifter-navigation { right: 0; -webkit-transform: translate3D(270px, 0px, 0px); -moz-transform: translate3D(270px, 0px, 0px); -ms-transform: translate3D(270px, 0px, 0px); -o-transform: translate3D(270px, 0px, 0px); transform: translate3D(270px, 0px, 0px); } /* Left */ .shifter-active.shifter-left .shifter-navigation { left: 0; -webkit-transform: translate3D(-270px, 0px, 0px); -moz-transform: translate3D(-270px, 0px, 0px); -ms-transform: translate3D(-270px, 0px, 0px); -o-transform: translate3D(-270px, 0px, 0px); transform: translate3D(-270px, 0px, 0px); } /* Open */ .shifter-open .shifter-navigation { pointer-events: all; -webkit-transform: translate3D(0px, 0px, 0px); -moz-transform: translate3D(0px, 0px, 0px); -ms-transform: translate3D(0px, 0px, 0px); -o-transform: translate3D(0px, 0px, 0px); transform: translate3D(0px, 0px, 0px); } } nav.shifter-navigation { padding: 0 20px; } .shifter-navigation ul { margin-left: 10px; list-style: none; margin-bottom: 0; } nav.shifter-navigation { list-style: none; } .shifter-navigation li { padding: 10px 0; border-bottom: 1px solid #888; } .shifter-navigation li a { font-weight: bold; color: #000000; } .shifter-navigation li ul li { border-bottom: 0 none; padding: 5px 0; } .shifter-navigation li ul li a { font-weight: normal; color: #000000; } .shifter-navigation a:hover { color: #8fc4bd; } a.fr { float: right; font-size: 10px; padding-top: 5px; } /* * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes * Free to use under the GPLv2 license. * http://www.gnu.org/licenses/gpl-2.0.html * * Contributing author: Tyler Smith (@mbmufffin) */ /* Browser Resets *********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, .flex-direction-nav {margin: 0; padding: 0; list-style: none;} /* Icon Fonts *********************************/ /* Font-face Icons */ @font-face { font-family: 'flexslider-icon'; src:url('flexslider-icon.eot'); src:url('flexslider-icon.eot#iefix') format('embedded-opentype'), url('https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/flexslider-icon.woff') format('woff'), url('flexslider-icon.ttf') format('truetype'), url('flexslider-icon.svg') format('svg'); font-weight: normal; font-style: normal; } /* FlexSlider Necessary Styles *********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li { position: relative; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} .cta { margin-top: 25px; } .cta a { color: #000000; font-size: 20px; font-weight: 400; padding: 10px 20px; border-radius: 30px; background: #ffe710; letter-spacing: 1px; -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; } .cta a:hover { color: #ffe710; background: #000000; } .flex-caption { position: absolute; width: 100%; padding: 0 5%; line-height: normal; z-index: 3; } .flex-caption.slide1 { top: 77%; text-align: right; } .flex-caption.slide2 { top: 77%; text-align: center; } .flex-caption.slide3 { top: 85%; text-align: center; } .flex-caption.slide4 { top: 80%; text-align: left; } .flex-caption.slide5 { top: 80%; text-align: left; } .flex-caption h2.slide-title { font-size: 50px; font-family: 'Montserrat', sans-serif; font-weight:700; color: #ffffff; } .flex-caption p { font-family: 'Montserrat', sans-serif; font-size: 28px; color: #ffffff; letter-spacing: 1px; } .flexslider .readmore { position: absolute; width: 100%; text-align: center; } /* Clearfix for the .slides element */ .slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ /* If you are not using another script, such as Modernizr, make sure you * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} /* FlexSlider Default Theme *********************************/ .flexslider { margin: 0; position: relative; zoom: 1; } .flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav {*height: 0;} .flex-direction-nav a { background: transparent! important; text-align: center; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav a:hover { background: transparent! important; } .flex-direction-nav .flex-prev { width: 40px; height: 40px; left: -40px; } .flex-direction-nav .flex-next { width: 40px; height: 40px; right: -40px; } .flex-direction-nav .flex-prev:before {content:"\f104"; font-family: FontAwesome; font-size: 30px; text-align: center; line-height: 40px; } .flex-direction-nav .flex-next:before {content:"\f105"; font-family: FontAwesome; font-size: 30px; text-align: center; line-height: 40px; } .flexslider:hover .flex-prev { opacity: 0.7; left: 10px; } .flexslider:hover .flex-next { opacity: 0.7; right: 10px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} .flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } .flex-control-thumbs {margin: 5px 0 0; position: static; overflow: hidden;} .flex-control-thumbs li {width: 25%; float: left; margin: 0;} .flex-control-thumbs img {width: 100%; display: block; opacity: .7; cursor: pointer;} .flex-control-thumbs img:hover {opacity: 1;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } /** * BxSlider v4.1.2 - Fully loaded, responsive content slider * http://bxslider.com * * Written by: Steven Wanderski, 2014 * http://stevenwanderski.com * (while drinking Belgian ales and listening to jazz) * * CEO and founder of bxCreative, LTD * http://bxcreative.com */ .bx-wrapper { position: relative; padding: 0; *zoom: 1; } .bx-wrapper img { display: block; } .bx-wrapper .bx-viewport { -webkit-transform: translatez(0); -moz-transform: translatez(0); -ms-transform: translatez(0); -o-transform: translatez(0); transform: translatez(0); margin-top: 30px; } /* DIRECTION CONTROLS (NEXT / PREV) */ .bx-wrapper .bx-prev { left: 50%; margin-left: -16px; background: transparent; top: -42px; } a.bx-prev:after { font-family: FontAwesome; font-size: 22px; color: #000000; content: "\f106"; position: absolute; top: 0; left: 0; height: 32px; width: 32px; text-align: center; line-height: 32px; } .bx-wrapper .bx-next { left: 50%; background: transparent; margin-left: -16px; bottom: -42px; } a.bx-next:after { font-family: FontAwesome; font-size: 22px; color: #000000; content: "\f107"; position: absolute; top: 0; left: 0; height: 32px; width: 32px; text-align: center; line-height: 32px; } .bx-wrapper .bx-prev:hover { background-position: 0 0; } .bx-wrapper .bx-next:hover { background-position: -43px 0; } .bx-wrapper .bx-controls-direction a { position: absolute; outline: 0; width: 32px; height: 32px; } .bx-wrapper .bx-controls-direction a.disabled { display: none; } /* AUTO CONTROLS (START / STOP) */ .bx-wrapper .bx-controls-auto { text-align: center; } .bx-wrapper .bx-controls-auto .bx-start { display: block; text-indent: -9999px; width: 10px; height: 11px; outline: 0; background: url(https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/images/controls.png) -86px -11px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active { background-position: -86px 0; } .bx-wrapper .bx-controls-auto .bx-stop { display: block; text-indent: -9999px; width: 9px; height: 11px; outline: 0; background: url(https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/images/controls.png) -86px -44px no-repeat; margin: 0 3px; } .bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active { background-position: -86px -33px; } /* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */ .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager { text-align: left; width: 80%; } .bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto { right: 0; width: 35px; } /* IMAGE CAPTIONS */ .bx-wrapper .bx-caption { position: absolute; bottom: 0; left: 0; background: #666\9; background: rgba(80, 80, 80, 0.75); width: 100%; } .bx-wrapper .bx-caption span { color: #fff; font-family: Arial; display: block; font-size: .85em; padding: 10px; } /* Password Page */ body.password { background: #ffffff url(password-page-background_v-7128987944997212632.jpg) ; background-position: center center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; color: #fff; } body.password #logo { margin-top: 100px; text-align: center; } body.password #logo h1 a { color: #fff! important; display: block; float: none; } #password-message { margin-bottom: 30px; } .password-page { min-height: 100vh; } .password-page img { margin: 10px; } #signup-wrap { padding: 30px; border-radius: 3px; text-align: center; } #password-signup h3 { color: #fff! important; } #signup-holder { margin-top: 100px; } #password-email { float: left; text-indent: 10px; width: 70%; text-transform: uppercase; color: #fff; } #password-email::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } #password-email:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; } #password-email::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; } #password-email:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #fff; } #password-subscribe { float: left; width: 28%; margin-left: 2%; margin-top: 0; text-transform: uppercase; } body.password p.success { text-align: center; } ul#password-icons { position: fixed; left: 0; bottom: 20px; list-style: none; text-align: center; margin-top: 50px; margin-bottom: 50px; } ul#password-icons li { display: inline-block; margin: 0 5px; } ul#password-icons li a { color: #fff; } body.password form#login_form { padding: 15px 20px; } /* slideout */ .slideout-toggle.open_password { position: fixed; top: 20px! important; right: 20px! important; z-index: 2; cursor: pointer; } .slideout { position: fixed; top: 0! important; right: -320px; width: 320px; background-color: #fff; z-index: 300; color: #000; } .slideout label { margin-bottom: 30px; } .closeslide { float: right; width: 44px; padding: 15px 15px 11px 15px; cursor: pointer; font-size: 20px; } .closeslide i.icon-angle-right { margin-right: -3px; } @media screen and ( max-width: 740px ) { ul#password-icons { display: none; } #signup-holder { margin-top: 50px; } } .pass-foot { width: 100%; position: fixed; bottom: 10px; text-align: center; } .pass-foot a { font-family: "Myriad Pro", "Gill Sans", "Gill Sans MT", Calibri, sans-serif; font-style: italic; font-size: 16px; font-weight: 600; color: #fff; } /* =============================================== // Reveal module // =============================================== */ .reveal .hidden { display: block !important; visibility: visible !important;} .product:hover .reveal img { opacity: 1; } .reveal { position: relative; } .reveal .hidden { position: absolute; z-index: -1; top: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: opacity 0.3s ease-in-out; -moz-transition: opacity 0.3s ease-in-out; -o-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; } .reveal:hover .hidden { z-index: 100000; opacity: 1; } .reveal .caption { position: absolute; top: 0; display: table; width: 100%; height: 100%; background-color: white; /* fallback for IE8 */ background-color: rgba(255, 255, 255, 0.7); font: 13px/1.6 sans-serif; text-transform: uppercase; color: #333; letter-spacing: 1px; text-align: center; text-rendering: optimizeLegibility; } .reveal .hidden .caption .centered { display: table-cell; vertical-align: middle; } @media (min-width: 480px) and (max-width: 979px) { .reveal .caption { font-size: 11px; } } /*The Team Page*/ /* About -------------------------------------------------------------------------------*/ .about-gallery { width: 1000px; margin: 0 0 40px 0; } .gallery-thumb { width: 235px; height: 140px; float: left; margin: 0 20px 20px 0; } .gallery-thumb.last { margin: 0 0 20px 0; } .partners { width: 1000px; text-align: center; margin-left: auto; margin-right: auto; } .partners img { margin: 0 auto 18px auto; } @media screen and (min-width: 480px) and (max-width: 767px) { .partners img { margin: 0 auto 24px auto; } } @media screen and (max-width: 480px){ .partners img{ margin: 0 auto 20px auto; } } .col-left { width: 440px; margin: 0px 60px 0 0; float: left; } @media screen and (min-width: 480px) and (max-width: 767px) { .col-left { float: none; width: 470px; } } @media screen and (max-width: 480px){ .col-left { float: none; width: 293px; } #footer-wrapper ul li { text-align:center; } } @media screen and (min-width: 768px) and (max-width: 1000px) { .col-left { width: 290px; } } .col-right { width: 440px; margin: 0 0 0 60px; float: left; } @media screen and (min-width: 480px) and (max-width: 767px) { .col-right { float: none; width: 470px; margin: 40px 0 0 0; } } @media screen and (min-width: 768px) and (max-width: 1000px) { .col-right { width: 290px; } } @media screen and (max-width: 480px) { .col-right { float: none; width: 293px; margin: 40px 0 0 0; } } .social { width: 1000px; background: url("https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/Vict-divider-vert.png") no-repeat center 0 !important; margin: 0 0 60px 0; text-align: center; } .social p { font-size: 1.4em; line-height: 1.6em;} .staff-list {width: 600px; margin:0 auto;} .staff {} .staff img {float:left; margin: 0 40px 10px 0;} .staff-divider { background: url("https://cdn.shopify.com/s/files/1/1785/9665/t/21/assets/Vict-dbl-line.png") repeat-x center 0; height: 3px; margin: 15px 0; } /* new styles */ @media screen and (max-width: 1220px) { #navigation #search { position:inherit; float:none; margin:0 auto; } } @media screen and (max-width: 460px) { #navigation #search { width:300px; position:inherit; float:none; margin:0 auto; padding-top:10px; } } @media screen and (max-width: 740px) { .staff-list{ width:auto; } } @media screen and (max-width: 500px) { .staff img{ margin: 0 auto 15px auto; display: block; float: none; } } /*=========================== New style cart ====================*/ .bannertop .row{ position: relative; } .hover_cart{ position: absolute; right: 0; top: 29px; background: #fff; /*padding: 10px 10px;*/ z-index: 99; border: 1px solid #ccc; min-width: 350px; display:none; } .hover_cart #cartform{ margin-top: 0; padding: 0; } .product_list_widget{ padding: 0; margin: 0; list-style: inherit; max-height: 294px; overflow-y: auto; } .minicartitem{ margin-bottom: 10px; list-style: none; display: flex; border-bottom: 1px solid #ccc; padding: 10px; } .product_list_widget .minicartitem:last-child{ margin-bottom:0; } .minicartitem a{ display: inline-block; } .minicartitem .left{ margin-right: 15px; padding: 0; float: left; } .minicartitem .left img{ max-width: 85px; } .minicartitem .right{ display: inline-block; float: right; line-height: 26px; } .shoe-cat{ font-size: 18px; color: #000; } .quantity_new{ font-size: 16px; color: #000; } .amount{ display: block; } .minicartsubtotal{ background: #F7F5F6 !important; padding: 15px 0 !important; border-bottom: 1px solid #dcdcdc; text-align: center; } .minilabel{ font-size: 18px; color: #000; font-weight: 700; display: inline-block; } .miniprice{ display: inline-block; } .minicartbutton{ padding: 15px 10px 10px; text-align: center; } .minicartbutton .button{ color: #fff; display: inline-block; margin-right: 10px; width: auto! important; line-height: 40px! important; padding: 0 20px! important; margin-bottom: 0; } .minicartbutton input[type="submit"]{ margin-bottom: 0; } .product_list_widget::-webkit-scrollbar { width: 1em; } .product_list_widget::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); } .product_list_widget::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey; } /*======NEW CSS========KEVAL*/ .fa-snapchat-ghost{ font-size:2em !important; } .button.new_button{ display: inline-block; width: auto; padding: 15px 20px; color:white; border-radius:30px; } .ghost{ display:inline-block; padding: 5px 10px; width: 180px; background:transparent; border:1px solid #000; border-radius:5px; color:#000; cursor: pointer; transition: background 0.3s ease,color 0.3s ease; text-align: center; } .ghost:hover{ background:#000; color:#fff; } .three_button a{ margin: 0 5px; } .only_mobile{ text-align:center; display:none; } .premium_tag{ background: #000; color: #ccc; opacity:0.6; position: absolute; left: 10px; bottom:81px; text-align: center; padding: 3px 15px; font-family: 'Montserrat', sans-serif; font-size: 11px; text-transform:uppercase; z-index:2; letter-spacing:1px; } .share-icons a{ font-size:15px; } .inventory{ z-index: 2; background: #8fc4bd; color: #000; line-height: 11px; text-transform:uppercase; font-weight:bold; font-size:10px !important; display: -webkit-flex; /* Safari */ -webkit-flex-direction: column; /* Safari 6.1+ */ display: flex; flex-direction: column; -moz-flex-direction: column; display: -moz-flex; } .inventory span{ color:#fff; margin-top: 2px; } .inventory .only{ position: relative; top: 12px; } @media screen and (max-width: 767px) { .seen_in_section img:nth-child(2){ display:none; } } @media screen and (max-width: 500px) { .only_mobile{ display:block; } } #homepage-products{ padding-top:0; } #homepage-collections{ padding-bottom:0; } #artists-loop .owl-item { padding: 0 10px; } #artists-loop .owl-controls .owl-buttons div{ position: absolute; top: 50%; margin-top: -25px; } #artists-loop .owl-controls .owl-buttons .owl-next{ right:0; } #artists-loop .collection-block{ padding-bottom: 0; } .each_artist{ margin:15px 0; } .artist_title{ margin:0 !important; margin-bottom:15px; } .all_artists{ margin:25px 0; } .product_infobox{ position:relative; } .product-details{ width:100%; } .heart_box{ width:10%; position:absolute; top:0; right:0; } .heart_box .wishl-add-wrapper{ margin:0; line-height:1; } @media screen and (max-width: 740px) { #artists-loop .owl-controls .owl-buttons div{ margin-top: -25px; } .artists_info{ margin:10px 0; text-align:center; } .heart_box{ top:auto; bottom:5px; } } @media screen and (min-width: 741px) and (max-width: 980px) { .artist-carousel{ margin:20px 0; } #artists-loop .owl-controls .owl-buttons div{ margin-top: -25px; } } .how-it-works-new body{ padding: 0; margin: 0; -webkit-font-smoothing: antialiased; line-height: 1.6; font-family: 'Montserrat', sans-serif; } .how-it-works-new h1,.how-it-works-new h2,.how-it-works-new h3,.how-it-works-new h4,.how-it-works-new h5,.how-it-works-new h6,.how-it-works-new ul,.how-it-works-new p{ margin: 0; } .video_section.clear:after{ content: ''; display: table; clear: both; } .video_section.clear,.top_section.clear { visibility: visible; width: auto; height: auto; } * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; /* box-sizing: border-box; */ } .how-it-works-new a { text-decoration: none; color: #000000; outline: 0; -webkit-transition: color 0.3s ease-in; -moz-transition: color 0.3s ease-in; -o-transition: color 0.3s ease-in; transition: color 0.3s ease-in; } .how-it-works-new .ghost { display: inline-block; padding: 5px 20px; width: 135px; background: transparent; border: 1px solid #000; border-radius: 5px; color: #000; cursor: pointer; transition: background 0.3s ease,color 0.3s ease; } .how-it-works-new img{ max-width: 100%; display: block; } .content{ width: 1200px; margin: 0 auto; } .introduction_section{ position: relative; margin-top: 70px; } .introduction_section .caption{ width: 500px; position: absolute; top: 92px; left: 62px; } .introduction_section .rightcaption{ width: 500px; position: absolute; top: 72px; left: 600px; } .introduction_section h1{ color: #fff; font-size: 34px; font-weight: 700; margin-bottom: 98px; text-align: left; } .introduction_section h3{ color: #fff; font-size: 25px; margin-bottom: 35px; text-align: left; } .introduction_section ul{ list-style-position: inside; padding-left: 23px; line-height: 30px; } .introduction_section ul li{ color: #fff; font-size: 24px; list-style: disc; font-weight: 400; } .tattoo_kit_section{ position: relative; } .tattoo_kit_section .caption{ position: absolute; width: 350px; right: 80px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tattoo_kit_section .caption p{ font-size: 22px; font-weight: 700; } .tattoo_kit_section .mob_caption{ position: absolute; width: 135px; right: 18px; display: none; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .tattoo_kit_section .mob_caption ul{ padding:0; } .tattoo_kit_section .mob_caption ul li { list-style: none; font-weight: 700; line-height: 1.2; margin: 8px 0; } .video_section{ background: #000; padding: 85px 75px 55px 62px; } .video_section .left_title{ width: 280px; float: left; } .video_section .left_title h1{ font-size: 60px; color: #fff; line-height: 1.2; margin-bottom: 30px; } .video_section .left_title .ghost{ border-color: #fff; color: #fff; text-align:center; } .video_section .left_title .ghost:hover{ background: #fff; color: #000; } .video_section .right_video{ float: right; text-align: right; } .video_section .right_video iframe{ display:block; } .video_section .right_video a{ color: #fff; margin-top: 10px; display: inline-block; border-bottom: 1px solid transparent; } .video_section .right_video a:hover{ border-bottom: 1px solid #fff; } .science_section{ padding: 80px 78px 30px 68px; } .science_section .left_title{ width: 350px; float: left; } .science_section .left_title h1{ font-size: 70px; line-height: 1.2; text-transform: uppercase; } .science_section .figure_side{ float: right; margin-bottom: 20px; } .science_section p{ font-size: 21px; line-height: 30px; margin-bottom: 30px; } .freehand_section{ position:relative; } .freehand_section .mob_img{ display: none; } .freehand_section .caption{ position:absolute; right: 86px; width: 500px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); } .freehand_section .caption h1{ text-transform: uppercase; color: #fff; font-size: 87px; line-height: 1.2; margin-bottom: 40px; } .freehand_section .caption p{ color: #fff; font-size: 22px; line-height: 1.5; margin-bottom: 30px; } .freehand_section .caption ul{ padding-left: 22px; list-style-position: inherit; } .freehand_section .caption ul li{ color: #fff; font-size: 21px; } .freehand_section .caption a{ color: #fff; display: inline; border-bottom:1px solid transparent; } .freehand_section .caption a:hover{ border-bottom: 1px solid #fff; } .freehand_section .caption .ghost{ border-color: #fff; color: #fff; text-align:center; } .freehand_section .caption .ghost:hover{ background: #fff; color: #000; } .lets-get-inked{ margin:50px 0; } /* ----------------- Mobile Portrait ----------------- */ @media only screen and (max-width: 480px){ .content{ width: 100%; padding: 0 5px; margin: 0; } .introduction_section{ margin-top: 40px; } .introduction_section h1 { font-size: 20px; margin-bottom: 12px; width:83%; } .introduction_section .caption { width: 60%; top: 24px; left: 20px; } .introduction_section h3 { font-size: 13px; margin-bottom: 35px; width: 81%; } .introduction_section h3 { font-size: 13px; margin-bottom: 0; width: 81%; } .introduction_section ul { display: none; } .tattoo_kit_section .caption{ display: none; } .tattoo_kit_section .mob_caption{ display: block; } .video_section .left_title h1 { font-size: 23px; } .video_section { padding: 35px 25px 35px 25px; text-align: center; } .video_section .left_title { width: 100%; float: none; } .video_section .right_video { float: none; } .video_section .left_title .ghost { display: none; text-align: center; } .video_section .right_video iframe{ width: 100%; height: 185px; } .video_section .right_video a { margin-top: 0; font-size: 12px; } .science_section { padding: 25px; } .science_section .left_title h1 { font-size: 23px; text-align: center; } .science_section .left_title { width: 100%; float: none; } .science_section .figure_side { float: none; margin-top: 30px; } .science_section p { font-size: 12px; line-height: 18px; margin-bottom: 24px; } .freehand_section > img{ display: none; } .freehand_section .mob_img{ display: block; } .freehand_section .caption { right: 0px; top: 23px; width: 80%; padding: 0 25px; transform: none; } .freehand_section .caption h1 { font-size: 23px; width: 100%; margin-bottom:15px; text-align: left; } .freehand_section .caption p { font-size: 15px; margin-bottom: 18px; font-weight: 700; } .freehand_section .caption ul li { font-size: 15px; font-weight: 700; } .freehand_section .caption a { display: none; } .width55 { width:55%!important; } .three_button a{ margin-bottom: 8px; } } @media only screen and (max-width: 480px) and (min-width: 376px){ .freehand_section .caption { top: 80px!important; width:75%!important; } } /* ----------------- Mobile Landscape ----------------- */ @media only screen and (min-width: 481px) and (max-width: 767px) { .content{ width: 100%; padding: 0 5px; margin: 0; } .introduction_section{ margin-top: 40px; } .introduction_section h1 { font-size: 24px; margin-bottom: 12px; } .introduction_section .caption { width: 60%; top: 24px; left: 20px; } .introduction_section h3 { font-size: 16px; margin-bottom: 0; width: 81%; } .introduction_section ul { display: none; } .tattoo_kit_section .caption{ display: none; } .tattoo_kit_section .mob_caption { width: 210px; } .tattoo_kit_section .mob_caption ul li { margin: 16px 0; font-size: 20px; } .tattoo_kit_section .mob_caption{ display: block; } .video_section .left_title h1 { font-size: 23px; } .video_section { padding: 35px 25px 35px 25px; text-align: center; } .video_section .left_title { width: 100%; float: none; } .video_section .left_title .ghost { display: none; } .video_section .right_video { float: none; } .video_section .right_video iframe { width: 100%; height: 250px; } .video_section .right_video a { margin-top: 8px; font-size: 14px; } .science_section { padding: 25px; } .science_section .left_title h1 { font-size: 23px; text-align: center; } .science_section .left_title { width: 100%; float: none; } .science_section .figure_side { float: none; margin-top: 30px; } .science_section p { font-size: 14px; line-height: 20px; margin-bottom: 24px; } .freehand_section > img{ display: none; } .freehand_section .mob_img{ display: block; } .freehand_section .caption { position: static; right: auto; width: 100%; margin-top: 25px; padding: 0 25px; transform: none; } .freehand_section .caption h1 { font-size: 23px; position: absolute; top: 25px; width: 100%; left:0; text-align: center; } .freehand_section .caption p { color: #000; font-size: 17px; margin-bottom: 18px; font-weight: 700; } .freehand_section .caption ul li { color: #000; font-size: 17px; font-weight: 700; } .freehand_section .caption a { display: none; } } /* ----------------- Ipad Portrait ----------------- */ @media only screen and (min-width: 768px) and (max-width: 1024px) { .content{ width: 100%; margin: 0; } .introduction_section h1 { font-size: 34px; margin-bottom: 12px; } .introduction_section .caption { width: 50%; left: 30px; } .introduction_section h3 { font-size: 20px; margin-bottom: 0; } .introduction_section ul { display: none; } .tattoo_kit_section .caption{ right: 40px; } .video_section .left_title h1 { font-size: 55px; margin-bottom: 36px; } .video_section { padding: 55px 45px 35px 50px; } .video_section .left_title { width: 38%; } .video_section .right_video { width: 58%; } .video_section .right_video iframe { width: 100%; height: 280px; } .video_section .right_video a { margin-top: 8px; font-size: 14px; } .science_section { padding: 50px 40px 20px 40px; } .science_section .left_title h1 { font-size: 55px; } .science_section .left_title { width: 38%; } .science_section .figure_side { width: 60%; } .science_section p { font-size: 18px; line-height: 26px; margin-bottom: 30px; } .freehand_section .mob_img{ display: none; } .freehand_section .caption { right: 36px; width: 380px; } .freehand_section .caption h1 { font-size: 45px; margin-bottom: 15px; } .freehand_section .caption p { font-size: 20px; margin-bottom: 14px; } .freehand_section .caption ul li { font-size: 20px; } } /* ----------------- Small Desktop ----------------- */ @media only screen and (min-width: 1025px) and (max-width: 1250px) { .content{ width: 1000px; margin: 0 auto; } .introduction_section h1 { margin-bottom: 48px; } .introduction_section .caption { width: 50%; left: 30px; } .introduction_section h3 { margin-bottom: 25px; } .tattoo_kit_section .mob_caption { width: 210px; } .tattoo_kit_section .mob_caption ul li { margin: 16px 0; font-size: 20px; } .video_section { padding: 65px 55px 45px 55px; } .video_section .left_title { width: 36%; } .video_section .right_video { width: 62%; } .video_section .right_video iframe { width: 100%; height: 320px; } .science_section { padding: 50px 40px 20px 40px; } .science_section .left_title { width: 38%; } .science_section .figure_side { width: 60%; } .science_section p { font-size: 18px; line-height: 26px; margin-bottom: 30px; } .freehand_section .mob_img{ display: none; } .freehand_section .caption { right: 50px; width: 420px; } .freehand_section .caption h1 { font-size: 60px; margin-bottom: 30px; } .freehand_section .caption p { font-size: 20px; margin-bottom: 14px; } .freehand_section .caption ul li { font-size: 20px; } } /* Collection-filter Your designer can adjust these to get all kind of looks: one or separate lines, active links instead of checkboxes, colors etc. */ .collection-filters-container { /* */ text-align: center; margin: 10px 0px 10px 0px; font-size: 16px; display: block; } .cf-title { display: inline-block; /* to have filters separated one per line, change "inline-block" to "block" */ font-weight: bold; margin: 0px 5px 0px 24px; font-size: 16px; /* text-transform: uppercase; margin: 20px 0px 0px 0px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 6px; */ } .cf-options-container { /* optional, restrict height of available options to a scrollable container */ /* display: block; max-height: 360px; overflow: auto; */ } .cf-select { display: inline-block; /* to have filters separated one per line, change "inline-block" to "block" */ width: 12em; margin-right: 1em; float: none !important; height: 40px; /*background: transparent url(../../../../../0653/0119/t/1/assets/select.png) no-repeat right;*/ /*border-radius: 15px;*/ padding: 2px 2px 2px 17px; /*color: #000; background-color: #dedede;*/ border: solid 1px #d3d2d2; /*border: 0px solid;*/ /*box-shadow: none;*/ /*background-image: none;*/ /*-webkit-appearance: none;*/ /* vertical-align: middle;*/ /* background-color: #000; border-color: #000; color: #ffffff; padding: 0px; margin-left: 4em; */ } .cf-checkbox, .cf-radio { /*display: none !important;*/ padding: 0; /*margin: 0 !important;*/ vertical-align: bottom; position: relative; top: -6px; } /* individual checkbox labels */ .collection-filters-container label span { font-weight: normal; opacity: 0.8; } .collection-filters-container label { display: block; /* to have checkboxes on the same line, change "block" to "inline-block" */ margin: 0px 6px 6px 0px; cursor: pointer; font-weight: normal; } /* .collection-filters-container label { margin: 0px; padding: 10px 0px 10px 10px; background-color: #fff; } .collection-filters-container label:nth-child(even) { background: #fafafa; } */ .cf-checkbox:checked + span { font-weight: bold !important; opacity: 1; /* color: #000000; */ } .cf-radio:checked + span { font-weight: bold !important; opacity: 1; /* color: #000000; */ } .cf-mobile-only { display: none; } /* mobile */ @media (max-width: 760px) { .cf-title { display: none; /* to have filters separated one per line, change "inline-block" to "block" */ font-weight: bold; margin: 2px 5px 0px 0px; } .cf-select { display: block; /* to have filters separated one per line, change "inline-block" to "block" */ width: 100%; max-width:none; } .cf-desktop-only { display: none; } .cf-mobile-only { display: block; } }