/** Shopify CDN: Minification failed Line 352:115 Expected identifier but found whitespace Line 352:126 Expected ":" Line 352:149 Unexpected ";" Line 438:66 Expected ":" **/ /********* 1. General *********/ html, body, body *, body *::before, body *::after { outline: none !important; position: relative; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box } html, body { margin: 0; padding: 0; -webkit-overflow-scrolling: auto } body { background-color: #f7f7f9; color: #5b626d; font-family: 'Montserrat', sans-serif; font-size: 14px; letter-spacing: 0.05em; max-height: 100vh; overflow-y: auto; padding-top: 70px } body.has-heading-banner { padding-top: 125px } body.has-heading-banner.scrolled-down { padding-top: 115px } body.has-collection-hero.has-heading-banner { padding-top: 70px } .def-anch-hov.def-anch a { color: #000000 } .def-anch-hov a:hover { color: #000000; text-decoration: underline } .special-serif { font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none; } h1, h2, h3, h4, h5, h6 { color: #000000; font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none; } .fw-light { font-weight: 300 } .fw-normal { font-weight: 400 } .fw-heavy { font-weight: 500 } .fw-heavier { font-weight: 700 } .fs-italic { font-style: italic } .bg-light { background-color: #899192 !important } .hover-bg-light:hover { background-color: #899192 !important } .bg-regular { background-color: #5b626d !important } .hover-bg-regular:hover { background-color: #5b626d !important } .color-lighter { color: #899192; opacity: 0.6 } .color-grey, .hover-color-light:hover, .color-light { color: #899192 } .hover-color-regular:hover, .color-regular { color: #5b626d } .hover-color-darker:hover, .color-darker { color: #000000 } .accent-color { color: #000000 } .accent-color-dark { color: #0b4f79 } .hover-bg-accent:hover { background-color: #000000 !important } .error-color { color: #f05656 } .success-color { color: #1aba02 } .label { color: inherit; font-size: inherit } .regular-content { font-size: 12px; letter-spacing: 0.05em } .regular-content ul { margin: 0 0 15px; padding-left: 30px } .regular-content ul li { list-style: outside disc; padding: 3px 0 } .regular-content .anchor, .regular-content a { color: inherit; text-decoration: underline } .regular-links a { color: inherit } .regular-links a:hover, .regular-content .anchor:hover, .regular-content a:hover { color: #000000 } .regular-content a.uoh { text-decoration: none } .regular-content a.uoh:hover { text-decoration: underline } .regular-content table { border: 1px solid #c4c8c8; border-collapse: collapse } .regular-content table th, .regular-content table td{ border: 1px solid #c4c8c8; padding: 6px 12px } a.btn-primary, a.btn-warning, a.btn-danger, a.btn-success, a.btn-info { color: #FFF } .alert { padding: 8px 15px } .etiquette-drop { background-color: rgba(0,0,0,0.5); cursor: url(//www.etiquetteclothiers.com/cdn/shop/t/2/assets/cursor-close.png?v=126182320575872169671521266092) 25 25, auto; height: 100%; left: 0; opacity: 0; position: fixed; top: 0; visibility: hidden; width: 100%; z-index: 5000; -moz-transition: opacity 0.3s, visibility 0s 0.3s; -webkit-transition: opacity 0.3s, visibility 0s 0.3s; -o-transition: opacity 0.3s, visibility 0s 0.3s; -ms-transition: opacity 0.3s, visibility 0s 0.3s; transition: opacity 0.3s, visibility 0s 0.3s; } body.modal-drop .etiquette-drop { cursor: default } body.show-drop .etiquette-drop { opacity: 1; visibility: visible; -moz-transition: opacity 0.3s; -webkit-transition: opacity 0.3s; -o-transition: opacity 0.3s; -ms-transition: opacity 0.3s; transition: opacity 0.3s; } img.faux { display: none !important } .shopify-section[id^="shopify-section-"] { position: static } @media all and (max-width:767px) { body { font-size: 10px; padding-top: 50px } body.has-heading-banner { padding-top: 85px } body.has-heading-banner.scrolled-down { padding-top: 75px } body.has-collection-hero.has-heading-banner { padding-top: 50px } .regular-content, .regular-links { font-size: 10px; letter-spacing: 0.05em } #admin_bar_iframe { display: none } } /****----- 1.1 General - Buttons, Form controls, etc. -----****/ .like-btn-spl, .btn { border-radius: 0; border-width: 0; padding: 0 2em; /*font-weight: 500;*/ height: 30px; letter-spacing: 0.1em; line-height: 28px; text-align: center; text-transform: uppercase; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .like-btn-spl { border-style: solid } .like-btn-spl, .btn.btn-default { background-color: #f7f7f9; border-color: #AEAFAE; border-width: 1px; color: #5b626d } .btn.shopify-challenge__button, .btn.btn-primary { background-color: #000000; border-color: #000000; color: #FFF } .btn.shopify-challenge__button:hover, .btn.btn-default:hover, .btn.btn-primary:hover { background-color: #5b626d; border-color: #5b626d; color: #FFF } .btn.btn-grey { background-color: #9097a0; border-color: #9097a0; color: #FFF; font-size: 12px; line-height: 1em; padding: 1.4em } .btn.btn-grey:hover { background-color: #000000; border-color: #000000 } .btn.btn-transp { background-color: transparent; border-width: 2px } .btn.btn-transp.btn-white { border-color: #FFF; color: #FFF } .btn.btn-transp.btn-white:hover { background-color: #FFF; color: #000 } .btn.btn-transp.btn-black { border-color: #000; color: #000 } .btn.btn-transp.btn-black:hover { background-color: #000; color: #FFF } .btn.tall-n-wide { font-size: 14px; height: 40px; line-height: 38px; padding-top: 0; padding-bottom: 0; width: 100% } .btn-success { background-color: #1aba02 } .btn-success:hover, .btn-success:focus { background-color: #0aaa00 } .btn.btn-spl, .like-btn-spl { background-color: transparent; border-width: 1px; -moz-transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; -webkit-transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; -o-transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; -ms-transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out, color 0.3s ease-in-out; } .btn.btn-spl::before, .like-btn-spl::before { bottom: -2px; content: ''; display: block; height: 3px; left: 10px; position: absolute; width: calc(100% - 20px); z-index: 0 -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .btn.btn-spl:hover::before, .like-btn-spl:hover::before { bottom: 0; height: 100%; left: 0; right: 0; width: 100% } .btn.btn-spl span, .like-btn-spl span { z-index: 1 } .btn.btn-spl.btn-spl-black, .like-btn-spl.btn-spl-black { border-color: rgba(0,0,0,0.5); color: #000 } .btn.btn-spl.btn-spl-black:hover, .like-btn-spl.btn-spl-black:hover { border-color: #000; color: #FFF } .btn.btn-spl.btn-spl-black:hover, .btn.btn-spl.btn-spl-black::before, .like-btn-spl.btn-spl-black:hover, .like-btn-spl.btn-spl-black::before { background-color: #000 } .btn.btn-spl.btn-spl-white, .like-btn-spl.btn-spl-white { border-color: rgba(255,255,255,0.5); color: #FFF } .btn.btn-spl.btn-spl-white:hover, .like-btn-spl.btn-spl-white:hover { border-color: #FFF; color: #000 } .btn.btn-spl.btn-spl-white:hover, .btn.btn-spl.btn-spl-white::before, .like-btn-spl.btn-spl-white:hover, .like-btn-spl.btn-spl-white::before { background-color: #FFF } .has-cancel-text-btn { color: #899192; display: block; font-size: 12px; font-style: italic; height: 50px; letter-spacing: 0.05em; line-height: 50px; text-align: center } .selectize-input { -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s } .form-control:focus, .selectize-input.focus { border-color: rgba(49,58,68,0.5); -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(49,58,68,.2); box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(49,58,68,.2) } .minimal-selectize .selectize-input { border-color: transparent } .minimal-selectize .selectize-input.input-active { box-shadow: none } .minimal-selectize .selectize-control.single .selectize-input::after { border-color: #000000; border-width: 0px 2px 2px 0; height: 7px; right: 4px; top: 44%; width: 7px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .minimal-selectize .selectize-control.single .selectize-input.dropdown-active::after { border-width: 2px 0 0 2px; top: 56% } .select-skin { display: block } .select-skin::before { background-color: #FFF; content: ''; height: 100%; pointer-events: none; position: absolute; right: 0; top: 0; width: 2.4em; z-index: 1 } .select-skin::after { content: ''; border-color: #000; border-style: solid; border-width: 0 2px 2px 0; display: block; height: 8px; margin-top: -6px; pointer-events: none; position: absolute; right: 1em; top: 50%; width: 8px; z-index: 2; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .select-skin select:not(.form-control) { border: 0 none; height: 2.4em; width: 100% } [data-togglehandleto] { cursor: pointer } [data-togglehandleto]::after { content: ''; border-top: 5px solid #444444; border-left: 4px solid transparent; border-right: 4px solid transparent; position: absolute; top: 50%; right: 0; margin-top: -3px } .expanded[data-togglehandleto]::after { border-top: 0 none; border-bottom: 5px solid #444444 } .form-table th, .form-table td { padding: 6px 0; vertical-align: middle } .form-table th.has-label, .form-table td.has-label { width: 120px } form input { border-radius: 0 } form .form-group label { color: #000; font-size: 10px; font-weight: normal; letter-spacing: 0.05em; text-transform: uppercase } form .form-group .form-control { background-color: #F7F6F6; border-radius: 0; height: 40px } form .form-group .select-skin::before { background-color: #F7F6F6; border-color: #CCC; border-style: solid; border-width: 1px 1px 1px 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075); } form .form-group .select-skin.active::before { border-color: #000 } form .form-group textarea.form-control { height: 120px } .shopify-challenge__errors, form .success, form .errors { background-color: rgba(255,150,150,0.2); border: 1px solid rgba(200,100,100,0.4); color: #B44; font-size: 12px; letter-spacing: 0.05em; margin: 15px 0 20px; padding: 10px 15px } form .success { background-color: rgba(150,255,150,0.2); border-color: rgba(100,200,100,0.4); color: #393 } form .errors a { color: #900; border-bottom: 1px dotted rgba(200,100,100,0.6) } form .success a { color: #090; border-bottom: 1px dotted rgba(100,200,100,0.6) } form .errors a:hover, form .success a:hover { border-bottom-style: solid } form .nice-note { display: table; font-size: 12px; font-style: italic; letter-spacing: 0.05em; line-height: 1.8em; margin: 50px auto; text-align: center } .shopify-challenge__container { padding: 50px 0 } .shopify-challenge__container .shopify-challenge__message { font-size: 12px; letter-spacing: 0.05em; margin-bottom: 20px } .numerify { display: none } .numerified .numerify { display: block } .numerified { border: 1px solid #acacac; border-radius: 3px; display: table; height: 38px; padding-right: 20px; position: relative; vertical-align: middle } .numerified input { background: #FFF none; border: 0 none; border-right: 1px solid #acacac; border-radius: 3px 0 0 3px; cursor: pointer; font-size: 16px; height: 36px; line-height: 32px; text-align: center } .numerified a.dec, .numerified a.inc { position: absolute; width: 20px; height: 18px; right: 0; top: 0 } .numerified a.dec { top: auto; bottom: 0; border-top: 1px solid #acacac } .numerified a.dec::before, .numerified a.inc::before { content: ''; display: block; position: absolute; border-bottom: 6px solid #C3C3C3; border-left: 4px solid transparent; border-right: 4px solid transparent; left: 50%; top: 50%; margin: -4px 0 0 -4px; } .numerified a.dec::before { border-top: 6px solid #C3C3C3; border-bottom: 0 none } .numerified a.dec:active, .numerified a.inc:active { background-color: rgba(0,0,0,0.1) } .numerified a.inc:hover::before { border-bottom-color: #333 } .numerified a.dec:hover::before { border-top-color: #333 } .numerified-minimal .numerified input { width: 50px } .numerified-skin-plus-minus .numerified, .numerified-skin-plus-minus .numerified *, .numerified-skin-plus-minus .numerified *::before, .numerified-skin-plus-minus .numerified *:hover::before { border: 0 none !important } .numerified-skin-plus-minus .numerified { height: 30px; padding: 0 30px } .numerified-skin-plus-minus .numerified input { height: 30px; padding: 0; width: 40px } .numerified-skin-plus-minus .numerified a.dec, .numerified-skin-plus-minus .numerified a.inc { bottom: 0; height: 30px; top: auto; width: 30px } .numerified-skin-plus-minus .numerified a.dec { left: 0; right: auto } .numerified-skin-plus-minus .numerified a.dec::before, .numerified-skin-plus-minus .numerified a.inc::before { color: inherit; content: '+'; font-size: inherit; font-weight: inherit; height: 100%; left: 0; line-height: 30px; margin: 0;width: 100%; position: absolute; top: 0 } .numerified-skin-plus-minus .numerified a.dec::before { content: '-' } .numerified-skin-plus-minus .numerified a.dec:active, .numerified-skin-plus-minus .numerified a.inc:active { background-color: transparent } .numerified-skin-plus-minus.smaller .numerified, .numerified-skin-plus-minus.smaller .numerified input, .numerified-skin-plus-minus.smaller .numerified a.dec, .numerified-skin-plus-minus.smaller .numerified a.dec::before, .numerified-skin-plus-minus.smaller .numerified a.inc, .numerified-skin-plus-minus.smaller .numerified a.inc::before { height: 24px; line-height: 24px } .numerified-skin-plus-minus.smaller .numerified input { width: 20px } .numerified-skin-plus-minus.smaller .numerified a.dec, .numerified-skin-plus-minus.smaller .numerified a.inc { width: 24px } .numerified-skin-plus-minus.shorter .numerified, .numerified-skin-plus-minus.shorter .numerified input, .numerified-skin-plus-minus.shorter .numerified a.dec, .numerified-skin-plus-minus.shorter .numerified a.dec::before, .numerified-skin-plus-minus.shorter .numerified a.inc, .numerified-skin-plus-minus.shorter .numerified a.inc::before { height: 16px; line-height: 16px } .fancy-checkbox [type="checkbox"] + label { line-height: 1.6em } .fancy-checkbox [type="checkbox"] + label::before { background-color: #FFF; border-radius: 0 } .fancy-checkbox [type="checkbox"] + label::after { background: linear-gradient(to bottom, transparent 40%, #000 40%, #000 60%, transparent 60%), linear-gradient(to right, transparent 40%, #000 40%, #000 60%, transparent 60%); border: 0 none; height: 12px; left: -23px; top: 4px; width: 12px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .light-checkbox .fancy-checkbox [type="checkbox"] + label::before { background-color: transparent; border-color: rgba(255,255,255,0.5); } .light-checkbox .fancy-checkbox [type="checkbox"] + label::after { background: linear-gradient(to bottom, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%), linear-gradient(to right, transparent 40%, #FFF 40%, #FFF 60%, transparent 60%) } .radio-like-checkbox [type="checkbox"] + label::before { border-width: 1px; border-radius: 40px; height: 16px; left: -24px; top: 50%; width: 16px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .radio-like-checkbox [type="checkbox"] + label::after { background: #5b626d none; border-radius: 20px; height: 10px; left: -21px; top: 50%; width: 10px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .light-checkbox .radio-like-checkbox [type="checkbox"] + label::after { background: #FFF none } .modal-backdrop { z-index: 5040 } .modal { z-index: 5050 } .modal.panel-modal .modal-dialog { margin-top: 70px } body.scrolled-down .modal.panel-modal .modal-dialog { margin-top: 70px } .modal.panel-modal .modal-content { background-color: #f7f7f9; border: 0 none; border-radius: 0 } .modal.panel-modal .modal-header, .modal.panel-modal .modal-footer, .modal.panel-modal .modal-body { padding: 0 } .modal.panel-modal .modal-footer { border: 0 none; margin-top: 15px; padding: 15px 0; text-align: center } .modal.panel-modal .modal-footer::before { background-color: #e6e6e6; content: ''; display: block; height: 1px; left: 50%; margin-left: -100px; position: absolute; top: 0; width: 200px } .modal .has-video-embed iframe { display: block } .carousel .carousel-indicators li, .carousel .carousel-indicators .active { background-color: #FFF; border: 1px solid #000000; height: 10px; margin: 0 6px; width: 10px } .carousel .carousel-indicators .active { background-color: #000000 } .modal.has-full-carousel .modal-dialog { margin-bottom: 80px; margin-top: 70px; width: 1000px } body.has-heading-banner .modal.has-full-carousel .modal-dialog { margin-top: 70px } body.has-heading-banner.scrolled-down .modal.has-full-carousel .modal-dialog { margin-top: 70px } .modal.has-full-carousel .carousel .carousel-control.left { left: -100px } .modal.has-full-carousel .carousel .carousel-control.right { right: -100px } .modal.has-full-carousel .carousel .carousel-control svg .stroke-color { stroke: #FFF } .modal.has-full-carousel.panel-modal .close { display: none } .modal.has-full-carousel .carousel-inner > .item > img { height: auto; width: 100% } .modal.has-full-carousel .carousel .carousel-control { margin: 0; padding: 30px 0; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .modal.vcentered { text-align: center; padding: 0 !important } .modal.vcentered:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-right: -4px; /* Adjusts for spacing */ } .modal.vcentered .modal-dialog { display: inline-block; margin: auto; text-align: left; vertical-align: middle } @media all and (max-width:767px) { .btn { font-size: 10px } .btn.btn-transp { border-width: 1px } .btn.tall-n-wide { font-size: 11px; height: 40px; line-height: 40px } .has-cancel-text-btn, form .form-group label { font-size: 10px } .form-control { font-size: 12px } form .form-group .form-control { height: 40px } .shopify-challenge__errors, form .success, form .errors { font-size: 10px; padding: 7px 12px } form .nice-note { font-size: 9px } .numerified-skin-plus-minus .numerified { height: 20px; padding: 0 20px } .numerified-skin-plus-minus .numerified a.dec, .numerified-skin-plus-minus .numerified a.inc { height: 20px; width: 20px } .numerified-skin-plus-minus .numerified a.dec::before, .numerified-skin-plus-minus .numerified a.inc::before { line-height: 20px } .numerified-skin-plus-minus .numerified input { width: 26px } .radio-like-checkbox [type="checkbox"] + label::before { border-width: 1px; height: 16px; left: -24px; width: 16px } .radio-like-checkbox [type="checkbox"] + label::after { height: 10px; left: -21px; top: 50%; width: 10px } .modal.panel-modal .modal-dialog { margin-top: 50px; margin-bottom: 40px } body.scrolled-down .modal.panel-modal .modal-dialog { margin-top: 45px } .modal.embed-modal .modal-dialog { max-width: 100%; width: 100% } } @media all and (max-width:700px) { .modal.embed-modal .has-video-embed { height: auto; padding-top: 56.25%; width: 100%; } .modal.embed-modal .has-video-embed iframe { max-height: 100%; left: 0; position: absolute; top: 0; max-width: 100% } } /****----- 1.2 Bootstrap/OwlCarousel Carousel -----****/ .carousel .carousel-control { background: transparent none; bottom: auto; height: auto; margin-top: -15px; opacity: 1; top: 50%; width: auto } .carousel .carousel-control.left { left: 30px } .carousel .carousel-control.right { right: 30px } .owl-carousel .owl-nav > [class^="owl-"]:hover svg line, .carousel .carousel-control:hover svg line { stroke-width: 2px } .owl-carousel .owl-nav > [class^="owl-"] svg line, .carousel .carousel-control svg line { stroke-dasharray: 70px; stroke-dashoffset: 69px; -moz-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); -o-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); -ms-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); } .owl-carousel:hover .owl-nav > [class^="owl-"] svg line, .carousel:hover .carousel-control svg line, .modal.has-full-carousel .carousel .carousel-control svg line { stroke-dashoffset: 0 } .owl-carousel .owl-nav > [class^="owl-"].disabled svg line { stroke: rgba(0,0,0,0.1) } .owl-carousel.generic-owl-nav .owl-nav { position: static } .owl-carousel.generic-owl-nav .owl-nav > [class^="owl-"] { left: 0; position: absolute; top: 43%; z-index: 50; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .owl-carousel.generic-owl-nav .owl-nav > .owl-next { left: auto; right: 0; z-index: 1; -moz-transform: translateX(50%) translateY(-50%); -webkit-transform: translateX(50%) translateY(-50%); -o-transform: translateX(50%) translateY(-50%); -ms-transform: translateX(50%) translateY(-50%); transform: translateX(50%) translateY(-50%); } .carousel.smart-arrows .carousel-control { display: none } .carousel .arrow-capture { display: none } .carousel.smart-arrows .has-arrow-captures > * { z-index: 1 } .carousel.smart-arrows .arrow-capture { cursor: url(//www.etiquetteclothiers.com/cdn/shop/t/2/assets/carousel-smart-arrow-left.png?v=70202482214724901341519473035) 0 14, auto; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 40%; z-index: 0 } .carousel.smart-arrows .arrow-capture.right { cursor: url(//www.etiquetteclothiers.com/cdn/shop/t/2/assets/carousel-smart-arrow-right.png?v=113957065248539742891519473032) 33 14, auto; left: 60% } /********* 2. Header *********/ .header-drop { background-color: #FFF; height: 70px; left: 0; position: absolute; top: 0px; width: 100%; z-index: 4950; -moz-transition: height 0.3s ease 0s, background-color 0.3s ease 0s; -webkit-transition: height 0.3s ease 0s, background-color 0.3s ease 0s; -o-transition: height 0.3s ease 0s, background-color 0.3s ease 0s; -ms-transition: height 0.3s ease 0s, background-color 0.3s ease 0s; transition: height 0.3s ease 0s, background-color 0.3s ease 0s; } #header { height: 70px; left: 0; position: absolute; top: 0px; width: 100%; z-index: 4990; -moz-transition: height 0.3s ease 0s; -webkit-transition: height 0.3s ease 0s; -o-transition: height 0.3s ease 0s; -ms-transition: height 0.3s ease 0s; transition: height 0.3s ease 0s; } #header .header-sections, #header .header-sections *:not(.custom-animation) * { -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #announcements-bar { background-color: #e7f2f2; color: #008888; font-size: 14px; height: 0px; left: 0; line-height: { settings.header_top_offset }}px; position: absolute; overflow: hidden; top: 0; white-space: no-wrap; width: 100%; z-index: 4950; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #announcements-bar p { margin: 3px 0 } #header-main #logo { height: 70px; width: 260px } #header-main #logo.is-svg-logo { background-image: none; text-align: center; } #header-main #logo.is-svg-logo .svg-logo { display: table; margin: 0 auto } #header-main #search .input-group { display: table; margin: 0 auto; max-width: 100%; width: 320px } #header-main #btn-menu, #header-main #btn-cart, #header-main .btn-size { max-width: 40px; text-align: center; width: 40px } #header-main #btn-menu .icon { position: static } #header-main #btn-menu .icon svg.svg-menu { left: 40%; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #header-main .header-btn { overflow: hidden } #header-main .header-btn > * { display: inline-block; text-transform: uppercase; vertical-align: middle; white-space: nowrap } #header-main .header-btn .btn-label { position: absolute; line-height: 40px; top: 50%; left: 48px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%) } #header-main .header-btn#btn-cart .btn-label { left: 53px } #header-main .header-btn#btn-cart .count { /*border: 1px solid #000000;*/ border-radius: 50%; color: #000000; display: inline-block; font-size: 12px; height: auto; line-height: 2em; /*margin-right: 4px;*/ margin-top: 5px; padding: 0.1em 0.4em 0; text-align: center; vertical-align: sub; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } svg.svg-cart text[data-cartitemscount="0"], #header-main .header-btn#btn-cart .count[data-cartitemscount="0"], #etiquette-cart #btn-drawer-cart .count[data-cartitemscount="0"] { display: none } #header-main .header-btn:hover { color: #000000 } #header-main .header-btn .icon img { height: 40px; width: auto } #header-main svg.svg-cart { display: inline-block; vertical-align: text-bottom } #header-main #btn-header-account svg.svg-account, #header-main #btn-header-account svg.svg-account-loggedin { left: 50%; margin-top: -1px; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #header #header-main .header-sections.flexed #logo, #header #header-main .header-sections.flexed .two-btn-size, #header #header-main .header-sections.flexed #btn-cart, #header .header-sections.flexed { align-items: center; display: flex; justify-content: center } #header #header-main .header-sections.flexed #btn-menu {} #header #header-main .header-sections.flexed .btn-size {} #header #header-main .header-sections.flexed .spacer { flex-grow: 1 } #header #header-main .header-sections.flexed #logo { } #header #header-main .header-sections.flexed .two-btn-size {} #header #header-main .header-sections.flexed #btn-header-account {} #header #header-main .header-sections.flexed #btn-cart { margin-left: 5px; max-width: none; width: auto } #header ul.nav a { display: block; font-size: 16px; line-height: 2.4em; padding: 0 15px; white-space: nowrap } #header ul.nav > li { display: block; float: left; position: static } #header ul.nav > li + li { margin-left: 10px } #header ul.nav > li > a { text-transform: uppercase } #header ul.nav li > a:focus, #header ul.nav li:hover > a { background-color: rgba(255,255,255,0) } #header ul.nav > li:hover > a span::before { background-color: #000000; content: ''; display: block; bottom: -2px; left: 0; width: 100%; height: 2px; position: absolute } .nonsvg-menu-icon [class*="line-"] { background-color: #000000 } #header-main svg .fill-color { fill: #000000 } #header-main #btn-menu svg.svg-menu .stroke-color { stroke: #000000; stroke-dasharray: 28; stroke-dashoffset: 0; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } body.etiquette-nav-open #header-main #btn-menu svg.svg-menu .stroke-color:nth-child(3), #header-main #btn-menu:hover svg.svg-menu .stroke-color:nth-child(3) { stroke-dashoffset: 5.8 } body.etiquette-nav-open #header-main #btn-menu svg.svg-menu .stroke-color:nth-child(4), #header-main #btn-menu:hover svg.svg-menu .stroke-color:nth-child(4) { stroke-dashoffset: 15 } a.header-btn:hover svg .fill-color { stroke: rgba(0,0,0,0.1); stroke-width: 1px } body.template-index { padding-top: 0 } body.template-index .header-drop { background-color: transparent } body.template-index .nonsvg-menu-icon [class*="line-"] { background-color: #FFF } body.template-index #header-main svg .fill-color { fill: #FFF } body.template-index #header-main #btn-menu svg.svg-menu .stroke-color { stroke: #FFF } body.template-index.scrolled-down #header-main #btn-menu svg.svg-menu .stroke-color { stroke: #000000 } body.template-index a.header-btn:hover svg .fill-color { stroke: rgba(255,255,255,0.5) } body.template-index #header-main .header-btn#btn-cart .count { color: #FFF; border-color: #FFF } body.scrolled-down .header-drop { background-color: #FFF } body.scrolled-down .header-drop, body.scrolled-down #header { height: 70px; position: fixed; top: 0 } body.scrolled-down #header-main #logo { background-size: auto 41px; height: 70px } body.scrolled-down #header-main #logo.is-svg-logo .svg-logo { height: 41px } body.scrolled-down #header-main #logo.is-svg-logo svg.svg-logo .fill-color { fill: #000000 } body.scrolled-down #header-main #search .input-group { float: right; margin-right: 50px } body.scrolled-down #header-main .header-btn > .btn-label { opacity: 0; width: 0 } body.scrolled-down .nonsvg-menu-icon [class*="line-"] { background-color: #000000 } body.scrolled-down #header-main #btn-menu, body.scrolled-down #header-main #btn-cart { /*width: 45px*/ } body.scrolled-down #header-main .header-btn .icon { margin: 0 } body.scrolled-down #header-main .header-btn .icon img { height: 32px } body.scrolled-down #header-main svg .fill-color { fill: #000000 } body.scrolled-down a.header-btn:hover svg .fill-color, body.template-index.scrolled-down a.header-btn:hover svg .fill-color { stroke: rgba(0,0,0,0.5) } body.scrolled-down #header-main .header-btn#btn-cart .count { color: #000000; border-color: #000000 } @media all and (min-width:992px) { #header-main #btn-menu .icon svg.svg-menu { height: 25px; width: 25px } #header-main #btn-header-account svg.svg-account, #header-main #btn-header-account svg.svg-account-loggedin, #header-main svg.svg-cart { height: 18px; width: 18px; transform } } @media all and (min-width:768px) { #header-main #btn-menu { padding-left: 3px; text-align: left } } @media all and (max-width:767px) { .header-drop, #header-main #logo, #header { height: 50px } #header-main #logo { width: 140px } body.scrolled-down .header-drop, body.scrolled-down #header-main #logo, body.scrolled-down #header { height: 45px } #header svg { height: 22px; width: auto } #header svg.svg-menu { height: 28px } #header-main #logo.is-svg-logo .svg-logo { height: 30px; width: auto } body.scrolled-down #header-main #logo.is-svg-logo .svg-logo { height: 28px } #header-main #btn-menu, #header-main #btn-cart { width: 30px } #header-main #btn-cart { overflow: visible; text-align: right } #header-main .header-btn#btn-cart .count { line-height: 1.8em; margin-top: 6px; padding: 0 0 0 0.3em } #header-main #btn-header-account { visibility: hidden } } /****----- 2.1 Menu Icon -----****/ a#btn-menu.header-btn .nonsvg-menu-icon { display: block; width: 20px; height: 20px } a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"] { display: block; position: absolute; top: 7px; left: 5px; width: 28px; height: 2px } a#btn-menu.header-btn .nonsvg-menu-icon .line-2 { top: 14px } a#btn-menu.header-btn .nonsvg-menu-icon .line-3 { top: 22px; width: 22px } a#btn-menu.header-btn .nonsvg-menu-icon .line-4 { top: 29px; width: 13px } a#btn-menu.header-btn:hover .nonsvg-menu-icon [class*="line-"] { outline: 1px solid rgba(0,0,0,0.5) !important } a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"] { transition-duration: .3s,.3s; transition-delay: 0s,.3s } a#btn-menu.header-btn .nonsvg-menu-icon .line-1, a#btn-menu.header-btn .nonsvg-menu-icon .line-2 { transition-property: top,transform; transition-delay: .3s,0s } a#btn-menu.header-btn .nonsvg-menu-icon .line-3, a#btn-menu.header-btn .nonsvg-menu-icon .line-4 { transition-property: top,opacity } body.etiquette-nav-open a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"] { top: 18px } body.etiquette-nav-open a#btn-menu.header-btn .nonsvg-menu-icon .line-1 { transform: rotate(45deg); transition-delay: 0s,.3s } body.etiquette-nav-open a#btn-menu.header-btn .nonsvg-menu-icon .line-2 { transform: rotate(-45deg); transition-delay: 0s,.3s } body.etiquette-nav-open a#btn-menu.header-btn .nonsvg-menu-icon .line-3, body.etiquette-nav-open a#btn-menu.header-btn .nonsvg-menu-icon .line-4 { opacity: 0; transition-delay: 0s,0s } body.template-index a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"] { background-color: #FFF } body.template-index a#btn-menu.header-btn:hover .nonsvg-menu-icon [class*="line-"] { outline: 1px solid rgba(255,255,255,0.5) !important } body.scrolled-down.template-index a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"], body.scrolled-down a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"] { background-color: #000 } body.scrolled-down.etiquette-nav-open a#btn-menu.header-btn .nonsvg-menu-icon [class*="line-"] { background-color: #FFF } body.scrolled-down a#btn-menu.header-btn:hover .nonsvg-menu-icon [class*="line-"] { outline: 1px solid rgba(0,0,0,0.5) !important } body.scrolled-down.etiquette-nav-open a#btn-menu.header-btn:hover .nonsvg-menu-icon [class*="line-"] { outline: 1px solid rgba(255,255,255,0.5) !important } /****----- 2.2 Basic Drawer Styles -----****/ .drawer .etdrwr-section { padding-left: 35px; padding-right: 35px } .drawer .etdrwr-section.height-35 { height: 35px } .drawer .etdrwr-section.height-60 { height: 60px } .drawer .etdrwr-section.height-100 { height: 100px } .drawer .etdrwr-section.height-120 { height: 120px } .drawer .etdrwr-section.height-180 { height: 180px } .drawer .etdrwr-top .etdrwr-section { padding: 20px 35px 0 } .drawer .etdrwr-bottom .etdrwr-section { padding-bottom: 40px } .drawer .etdrwr-top .etdrwr-section a[id^="btn-"] { position: absolute; top: 20px } .drawer .etdrwr-top a[id^="btn-"], .drawer .etdrwr-top a[id^="btn-"] .icon { display: block; height: 30px; width: 30px } .drawer.bottom { bottom: -200%; height: 50vh; left: 0; max-height: 100vh; position: fixed; visibility: hidden; width: 100%; z-index: 5050; -moz-transition: bottom 0.3s ease 0s, visibility 0s ease 0.3s; -webkit-transition: bottom 0.3s ease 0s, visibility 0s ease 0.3s; -o-transition: bottom 0.3s ease 0s, visibility 0s ease 0.3s; -ms-transition: bottom 0.3s ease 0s, visibility 0s ease 0.3s; transition: bottom 0.3s ease 0s, visibility 0s ease 0.3s; } body.etiquette-promos-open #etiquette-promos, body.etiquette-cookiesnotice-open #etiquette-cookiesnotice { bottom: 0; visibility: visible; -moz-transition: bottom 0.3s ease 0.3s, visibility 0s; -webkit-transition: bottom 0.3s ease 0.3s, visibility 0s; -o-transition: bottom 0.3s ease 0.3s, visibility 0s; -ms-transition: bottom 0.3s ease 0.3s, visibility 0s; transition: bottom 0.3s ease 0.3s, visibility 0s; } .drawer.top { height: auto; left: 0; max-height: 100vh; position: fixed; visibility: hidden; top: -70%; width: 100%; z-index: 4940; -moz-transition: top 0.6s ease-in-out 0s, visibility 0s ease-in-out 0.6s; -webkit-transition: top 0.6s ease-in-out 0s, visibility 0s ease-in-out 0.6s; -o-transition: top 0.6s ease-in-out 0s, visibility 0s ease-in-out 0.6s; -ms-transition: top 0.6s ease-in-out 0s, visibility 0s ease-in-out 0.6s; transition: top 0.6s ease-in-out 0s, visibility 0s ease-in-out 0.6s; } body.etiquette-filters-open #etiquette-filters { top: 70px; visibility: visible; -moz-transition: top 0.6s ease-in-out 0s, visibility 0s; -webkit-transition: top 0.6s ease-in-out 0s, visibility 0s; -o-transition: top 0.6s ease-in-out 0s, visibility 0s; -ms-transition: top 0.6s ease-in-out 0s, visibility 0s; transition: top 0.6s ease-in-out 0s, visibility 0s; } body.etiquette-filters-open.has-heading-banner #etiquette-filters { top: 126px } body.etiquette-filters-open.has-heading-banner.scrolled-down #etiquette-filters { top: 126px } body.etiquette-filters-open.has-heading-banner.scrolled-down.shrink-heading-banner #etiquette-filters { top: 116px } body.etiquette-filters-open.has-collection-hero.has-heading-banner #etiquette-filters { top: 70px } body.etiquette-filters-open.has-collection-hero.has-heading-banner.scrolled-down #etiquette-filters { top: 70px } body.etiquette-filters-open.has-collection-hero.past-collection-hero.has-heading-banner #etiquette-filters { top: 116px } .drawer.boxed { height: 350px; left: 50%; max-width: 100%; position: fixed; visibility: hidden; top: 120vh; width: 550px; z-index: 5050; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: top 0.3s ease 0s, visibility 0s ease 0.3s; -webkit-transition: top 0.3s ease 0s, visibility 0s ease 0.3s; -o-transition: top 0.3s ease 0s, visibility 0s ease 0.3s; -ms-transition: top 0.3s ease 0s, visibility 0s ease 0.3s; transition: top 0.3s ease 0s, visibility 0s ease 0.3s; } body.etiquette-region-open #etiquette-region, body.etiquette-promo-spl-open #etiquette-promo-spl, body.etiquette-check-location-open #etiquette-check-location { top: 50%; visibility: visible; -moz-transition: top 0.3s ease 0.3s, visibility 0s; -webkit-transition: top 0.3s ease 0.3s, visibility 0s; -o-transition: top 0.3s ease 0.3s, visibility 0s; -ms-transition: top 0.3s ease 0.3s, visibility 0s; transition: top 0.3s ease 0.3s, visibility 0s; } .modal.panel-modal .close, .drawer.bottom .close, .drawer.boxed .close { background-color: #000000; bottom: 100%; display: block; height: 40px; margin-bottom: 4px; opacity: 1; position: absolute; right: 0; width: 40px } .drawer.modal-drawer .close { display: none } .modal.panel-modal .close svg, .drawer.bottom .close svg, .drawer.boxed .close svg { display: block; height: 31px; left: 50%; position: absolute; top: 50%; width: 31px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .modal.panel-modal .close:hover svg .fill-color, .drawer.bottom .close:hover svg .fill-color, .drawer.boxed .close:hover svg .fill-color { stroke: #FFF; stroke-width: 1px } @media all and (max-width:767px) { .drawer .etdrwr-section { padding-left: 20px; padding-right: 20px } .drawer .etdrwr-top .etdrwr-section { padding: 15px 46px 0 } .drawer .etdrwr-bottom .etdrwr-section { padding-bottom: 25px } .drawer .etdrwr-top .etdrwr-section a[id^="btn-"] { position: absolute; top: 15px } .drawer .etdrwr-top a[id^="btn-"], .drawer .etdrwr-top a[id^="btn-"] .icon, .drawer .etdrwr-top a[id^="btn-"] .icon svg { height: 26px; width: 26px } .drawer .close svg.svg-close { height: 24px; width: 24px } body.etiquette-filters-open #etiquette-filters { top: 50px } body.etiquette-filters-open.has-heading-banner #etiquette-filters { top: 85px } body.etiquette-filters-open.has-heading-banner.scrolled-down #etiquette-filters { top: 75px } body.etiquette-filters-open.has-collection-hero.has-heading-banner #etiquette-filters { top: 85px } body.etiquette-filters-open.has-collection-hero.has-heading-banner.scrolled-down #etiquette-filters { top: 75px } body.etiquette-filters-open.has-collection-hero.has-heading-banner.scrolled-down.past-collection-hero #etiquette-filters { top: 75px } } /****----- 2.3 Etiquette Nav (Drawer) -----****/ body.etiquette-nav-open { max-width: 100%; min-width: 100%; overflow: hidden } #header-main #btn-menu { -moz-transition: transform 0.3s ease 0s; -webkit-transition: transform 0.3s ease 0s; -o-transition: transform 0.3s ease 0s; -ms-transition: transform 0.3s ease 0s; transition: transform 0.3s ease 0s; } #etiquette-nav { position: fixed; top: 0; right: 100%; height: 100%; max-height: 100vh; min-height: 100vh; z-index: 5050; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } body.etiquette-nav-open #etiquette-nav { left: 0; -moz-transition: all 0.3s ease 0.3s; -webkit-transition: all 0.3s ease 0.3s; -o-transition: all 0.3s ease 0.3s; -ms-transition: all 0.3s ease 0.3s; transition: all 0.3s ease 0.3s; } #etiquette-nav .etdrwr-top .etdrwr-section { padding-left: 75px } #etiquette-nav a[id^="btn-"]:hover svg path, #etiquette-nav a[id^="btn-"]:hover svg polygon, #etiquette-nav a[id^="btn-"]:hover svg rect { stroke: rgba(255,255,255,0.5); stroke-width: 1px } #etiquette-nav a#btn-close-nav { left: 30px } #etiquette-nav .has-btn-search { border-bottom: 1px solid transparent; display: table; margin-right: -9px; width: 30px; -moz-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; -webkit-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; -o-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; -ms-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; transition: border-color 0.3s ease 0s, width 0.3s ease 0s; } body.search-form-open #etiquette-nav .has-btn-search { border-bottom-color: #FFF; width: 170px; -moz-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; -webkit-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; -o-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; -ms-transition: border-color 0.3s ease 0s, width 0.3s ease 0s; transition: border-color 0.3s ease 0s, width 0.3s ease 0s; } #etiquette-nav .has-btn-search::before { background-color: #FFF; content: ''; display: block; height: 12px; left: 0; opacity: 0; position: absolute; top: 50%; width: 1px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } body.search-form-open #etiquette-nav .has-btn-search::before { opacity: 0.4 } #etiquette-nav .has-btn-search input.search-keyword { background-color: transparent; border: 0 none; display: block; float: left; font-size: 12px; font-style: italic; height: 30px; letter-spacing: inherit; padding: 0 30px 0 8px; width: 100%; z-index: 0 } #etiquette-nav .has-btn-search a.btn-search { position: absolute; right: 0; top: 0; z-index: 1 } body.search-form-open #etiquette-nav .etdrwr-pre-bottom .has-btn-search, #etiquette-nav .etdrwr-pre-bottom .has-btn-search { border-bottom-style: solid; border-bottom-width: 1px; width: 100% } #etiquette-nav .etdrwr-pre-bottom .has-btn-search a.btn-search { display: block; left: 0; position: absolute; right: auto; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } body.search-form-open #etiquette-nav .etdrwr-pre-bottom .has-btn-search a.btn-search { left: calc(100% - 30px); } #etiquette-nav .etdrwr-pre-bottom .has-btn-search a.btn-search .icon, #etiquette-nav .etdrwr-pre-bottom .has-btn-search a.btn-search .icon svg { display: block } #etiquette-nav .etdrwr-pre-bottom .has-btn-search a.btn-search:hover .icon svg .fill-color { fill: #8C939B } #etiquette-nav .etdrwr-pre-bottom .has-btn-search input.search-keyword { opacity: 0; padding: 0 38px 0 0; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } body.search-form-open #etiquette-nav .etdrwr-pre-bottom .has-btn-search input.search-keyword { opacity: 1 } #etiquette-nav ul.etnav li a { display: block; font-size: 12px; line-height: 26px; padding: 0.2em 0; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } #etiquette-nav ul.etnav > li > a { font-family: 'Cormorant Garamond', serif; font-weight: 400; letter-spacing: 0.01em; text-transform: none; font-size: 26px; padding: 24px 0 5px } #etiquette-nav ul.etnav > li:first-child > a { padding-top: 5vh } #etiquette-nav ul.etnav li.has-sub-menu > a::after { content: '+'; display: inline-block; position: absolute; /*top: 0.9em;*/ right: 0 } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu > a::after { content: '-'; -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } #etiquette-nav ul.etnav li.has-sub-menu ul.sub-menu { max-height: 0; overflow-y: hidden; -moz-transition: max-height 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s; transition: max-height 0.3s ease 0s; } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu ul.sub-menu { max-height: 94px; -moz-transition: max-height 0.3s ease 0.1s; -webkit-transition: max-height 0.3s ease 0.1s; -o-transition: max-height 0.3s ease 0.1s; -ms-transition: max-height 0.3s ease 0.1s; transition: max-height 0.3s ease 0.1s; } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu.menu-item-mens ul.sub-menu { max-height: 262px; -moz-transition: max-height 1.8s ease 0.1s; -webkit-transition: max-height 1.8s ease 0.1s; -o-transition: max-height 1.8s ease 0.1s; -ms-transition: max-height 1.8s ease 0.1s; transition: max-height 1.8s ease 0.1s; } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu.menu-item-junior ul.sub-menu { max-height: 136px; -moz-transition: max-height 0.9s ease 0.1s; -webkit-transition: max-height 0.9s ease 0.1s; -o-transition: max-height 0.9s ease 0.1s; -ms-transition: max-height 0.9s ease 0.1s; transition: max-height 0.9s ease 0.1s; } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu.menu-item-black-friday-mega-sale ul.sub-menu { max-height: 136px; -moz-transition: max-height 0.9s ease 0.1s; -webkit-transition: max-height 0.9s ease 0.1s; -o-transition: max-height 0.9s ease 0.1s; -ms-transition: max-height 0.9s ease 0.1s; transition: max-height 0.9s ease 0.1s; } #etiquette-nav ul.etnav li.has-sub-menu ul li.active > a { font-weight: 500 } #etiquette-nav a#btn-close-nav .cross-icon { display: block; width: 30px; height: 30px } #etiquette-nav a#btn-close-nav .cross-icon [class*="line-"] { background-color: #FFF; display: block; position: absolute; top: 7px; left: 5px; width: 28px; height: 2px } #etiquette-nav a#btn-close-nav .cross-icon .line-2 { top: 14px } #etiquette-nav a#btn-close-nav:hover .cross-icon [class*="line-"] { outline: 1px solid rgba(255,255,255,0.5) !important } #etiquette-nav a[data-hovcaption]:hover::after { bottom: -15px; content: attr(data-hovcaption); display: block; font-size: 11px; left: 50%; position: absolute; text-transform: uppercase; white-space: nowrap; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } body.search-form-open #etiquette-nav a[data-hovcaption].btn-search:hover::after { display: none } #etiquette-nav ul.bottom-nav li { display: block; font-size: 10px } #etiquette-nav ul.bottom-nav li + li { margin-top: 5px } #etiquette-nav ul.bottom-nav li a { display: block; font-size: 10px; line-height: 2.2em; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } #etiquette-nav ul.bottom-nav > li > a:first-child::before { content: '\203A'; display: inline-block; font-size: 1.4em; line-height: inherit; margin-right: 10px } #etiquette-nav ul.bottom-nav li.menu-item-login-logout a { display: inline-block } #etiquette-nav ul.bottom-nav li.menu-item-login-logout a[href*="logout"] { margin: 0 2px; text-decoration: underline } #etiquette-nav ul.bottom-nav li.active a { font-weight: 600 } #etiquette-nav .etdrwr-bottom a.social-prop-link { display: block; float: left; height: 20px; width: 20px } #etiquette-nav .etdrwr-bottom a.social-prop-link:hover svg path { stroke: #FFF; stroke-width: 1px } #etiquette-nav .etdrwr-bottom a.social-prop-link + .social-prop-link { margin-left: 20px } #etiquette-nav .breadcrumb { background-color: transparent; font-size: 10px; letter-spacing: 0.05em; line-height: 1.2em; margin: 0; padding: 0; text-transform: uppercase } #etiquette-nav .breadcrumb .current-page, #etiquette-nav .breadcrumb a:hover { color: #FFF } #etiquette-nav.drawer .etdrwr-pre-bottom .etdrwr-section { align-items: center; display: flex; padding-bottom: 0; padding-top: 0 } body.expanded-menu #etiquette-nav ul.etnav li.has-sub-menu > a::after { display: none } body.expanded-menu #etiquette-nav ul.etnav li.has-sub-menu ul.sub-menu { max-height: none } @media all and (min-width:1200px) { body #etiquette-nav { display: flex; flex-direction: column; height: calc(100% - 80px); left: 20px; min-height: calc(100% - 80px); top: 60px; -moz-animation: none; -webkit-animation: none; animation: none; -moz-transform: translateY(-120%); -webkit-transform: translateY(-120%); transform: translateY(-120%) } body.etiquette-nav-open #etiquette-nav { left: 20px; -moz-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0) } #etiquette-nav::before { border-bottom-style: solid; border-bottom-width: 7px; border-left: transparent 5px solid; border-right: transparent 5px solid; content: ''; display: block; left: 8px; position: absolute; top: -6px } #etiquette-nav .etdrwr-main { flex-grow: 1 } #etiquette-nav .etdrwr-bottom { display: none } #etiquette-nav.drawer .etdrwr-section { display: block } #etiquette-nav.drawer .etdrwr-pre-bottom .etdrwr-section.height-120.has-search-form { height: 80px } #etiquette-nav.drawer .etdrwr-pre-bottom .etdrwr-section.height-120.has-bottom-nav { height: 240px; max-height: 26vh } #etiquette-nav.drawer .etdrwr-pre-bottom .etdrwr-section.height-120.has-bottom-nav ul.bottom-nav { -moz-transform: translateY(-2vh); -webkit-transform: translateY(-2vh); -o-transform: translateY(-2vh); -ms-transform: translateY(-2vh); transform: translateY(-2vh); } } @media all and (min-width:1200px) and (min-height:721px) { #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu-desktop > a::after { content: '-'; -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); -o-transform: rotate(10deg); -ms-transform: rotate(10deg); transform: rotate(10deg); } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu-desktop ul.sub-menu { max-height: 52px; -moz-transition: max-height 0.3s ease 0.1s; -webkit-transition: max-height 0.3s ease 0.1s; -o-transition: max-height 0.3s ease 0.1s; -ms-transition: max-height 0.3s ease 0.1s; transition: max-height 0.3s ease 0.1s; } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu-desktop.menu-item-mens ul.sub-menu { max-height: 178px; -moz-transition: max-height 1.2s ease 0.1s; -webkit-transition: max-height 1.2s ease 0.1s; -o-transition: max-height 1.2s ease 0.1s; -ms-transition: max-height 1.2s ease 0.1s; transition: max-height 1.2s ease 0.1s; } #etiquette-nav ul.etnav li.has-sub-menu.show-sub-menu-desktop.menu-item-junior ul.sub-menu { max-height: 136px; -moz-transition: max-height 0.9s ease 0.1s; -webkit-transition: max-height 0.9s ease 0.1s; -o-transition: max-height 0.9s ease 0.1s; -ms-transition: max-height 0.9s ease 0.1s; transition: max-height 0.9s ease 0.1s; } } @media all and (min-width:1200px) and (max-height:720px) { body #etiquette-nav { height: 100%; max-height: 100vh; min-height: 100vh; top: 0; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } #etiquette-nav::before { display: none } #etiquette-nav .etdrwr-top.hidden-lg { display: table-row !important } } @media all and (min-width:768px) { #etiquette-nav ul.bottom-nav li a { font-size: 12px } } @media all and (max-width:1199px) { #etiquette-nav ul.etnav li a { /*padding: 0.6em 0*/ } #etiquette-nav ul.etnav > li > a { /*padding: 0.8em 0*/ } #etiquette-nav.drawer .etdrwr-pre-bottom .etdrwr-section { display: table-cell } } @media all and (max-width:767px) { #etiquette-nav { display: block; overflow-y: auto } #etiquette-nav > *, #etiquette-nav > * > * { display: block; width: 100% } #etiquette-nav.drawer .etdrwr-section.height-180, #etiquette-nav.drawer .etdrwr-section.height-120, #etiquette-nav.drawer .etdrwr-section.height-100, #etiquette-nav.drawer .etdrwr-section.height-60, #etiquette-nav.drawer .etdrwr-section.height-35 { height: auto } #header-main #btn-menu { min-height: 40px; text-align: left } #header-main #btn-menu, #header-main #btn-cart { min-width: 40px; width: 40px } #header-main #btn-cart { min-width: 26px; width: auto } body.template-collection #header-main #btn-menu, body.template-search #header-main #btn-menu { -moz-transform: translateX(-5px); -webkit-transform: translateX(-5px); -o-transform: translateX(-5px); -ms-transform: translateX(-5px); transform: translateX(-5px); } body.template-collection #header-main #btn-cart, body.template-search #header-main #btn-cart { -moz-transform: translateX(5px); -webkit-transform: translateX(5px); -o-transform: translateX(5px); -ms-transform: translateX(5px); transform: translateX(5px); } #etiquette-nav.drawer .etdrwr-bottom .etdrwr-section.height-60 { height: 20px } #etiquette-nav svg { height: 26px; width: auto } #etiquette-nav .etdrwr-top .etdrwr-section { padding-left: 20px; padding-right: 20px } #etiquette-nav a#btn-account { left: 20px } #etiquette-nav a#btn-close-nav { left: 17px } #etiquette-nav .has-btn-search { margin-right: -4px; width: 26px } #etiquette-nav .has-btn-search input.search-keyword { font-size: 16px; height: 26px; padding-right: 26px } #etiquette-nav a[data-hovcaption]:hover::after { font-size: 6px } #etiquette-nav ul.etnav li a { font-size: 13px; line-height: 40px; padding: 0 } #etiquette-nav ul.etnav > li:first-child > a, #etiquette-nav ul.etnav > li > a { font-size: 24px; line-height: 40px; padding: 10px 0 0 } #etiquette-nav ul.etnav li.has-sub-menu > a::after { /*display: none*/ } #etiquette-nav .etdrwr-pre-bottom { position: absolute; bottom: 15px } #etiquette-nav ul.bottom-nav { /*padding: 40px 0*/ } #etiquette-nav ul.bottom-nav li + li { margin-top: 0 } #etiquette-nav ul.bottom-nav li a { font-size: 12px; line-height: 30px } #etiquette-nav .etdrwr-bottom a.social-prop-link + .social-prop-link { margin-left: 10px } #etiquette-nav .etdrwr-bottom a.social-prop-link, #etiquette-nav .etdrwr-bottom svg { height: 34px; width: 34px } #etiquette-nav .breadcrumb { font-size: 8px } } @media all and (max-width:500px) { #etiquette-nav ul.etnav li a, #etiquette-nav ul.etnav > li > a { line-height: 36px } #etiquette-nav ul.bottom-nav li a { line-height: 28px } } /****----- 2.4 Etiquette Cart (Drawer) -----****/ #etiquette-cart { border: 1px solid #000000; position: fixed; top: 0; left: 100%; height: 100%; min-height: 100%; z-index: 5050; -moz-transition: right 0.3s ease 0s; -webkit-transition: right 0.3s ease 0s; -o-transition: right 0.3s ease 0s; -ms-transition: right 0.3s ease 0s; transition: right 0.3s ease 0s; } body.etiquette-cart-open { max-width: 100%; min-width: 100%; overflow: hidden } body.etiquette-cart-open #etiquette-cart { right: 0; -moz-transition: right 0.3s ease 0.3s; -webkit-transition: right 0.3s ease 0.3s; -o-transition: right 0.3s ease 0.3s; -ms-transition: right 0.3s ease 0.3s; transition: right 0.3s ease 0.3s; } #etiquette-cart .etdrwr-section { padding-left: 25px; padding-right: 25px } #etiquette-cart.cart-has-items .show-when-cart-is-empty, #etiquette-cart.cart-is-empty .show-when-cart-has-items { display: none } #etiquette-cart #btn-drawer-cart .count { display: none } #etiquette-cart h4 { color: #5b626d } #etiquette-cart #btn-drawer-cart .svg-cart, #etiquette-cart #btn-account .svg-account { display: block; left: 50%; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%) } #etiquette-cart a[id^="btn-"]:hover svg path, #etiquette-cart a[id^="btn-"]:hover svg polygon, #etiquette-cart a[id^="btn-"]:hover svg rect { fill: #5b626d /*stroke: rgba(0,0,0,0.5); stroke-width: 1px*/ } #etiquette-cart a#btn-close-cart { right: 22px } #etiquette-cart a#btn-drawer-cart { left: 55px; min-width: 30px; width: auto } #etiquette-cart a#btn-account { left: 20px }/* #etiquette-cart a#btn-account::after { background-color: #c4c8c8; content: ''; display: block; height: 25px; position: absolute; right: -10px; top: 3px; width: 1px }*/ #etiquette-cart a#btn-account .icon { padding-top: 2px } #etiquette-cart .currency-picker__wrapper { display: block; padding-top: 10px; position: absolute; right: 70px; top: 0 } #etiquette-cart .currency-picker__wrapper .selectize-control { font-size: 12px; letter-spacing: 0.05em } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-input { background-color: transparent; border: 0 none; height: 38px; padding: 9px 0 } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-input.focus input { display: none !important } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-input::after { border-top: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 0 none; height: 0; left: 50%; margin-left: -5px; top: 90%; width: 0; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-input.dropdown-active::after { border-top: 0 none; border-bottom: 5px solid #000 } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-dropdown { background-color: #5b626d; border: 0 none; border-radius: 0; color: #FFF; font-size: 10px; font-weight: 500; left: 50% !important; margin-left: -26px; white-space: nowrap; width: 52px !important } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-dropdown .option { padding: 2px 0; text-align: center } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-dropdown .option.selected, #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-dropdown .option.active { background-color: transparent; color: #FFF } #etiquette-cart .empty-cart-message { color: #5b626d; font-size: 10px; padding: 30px 0; text-align: center; text-transform: uppercase } .has-main-collection-btns .btn { background-color: #9097A0; display: block; margin-left: 20px; margin-right: 20px; width: auto } .has-main-collection-btns .btn:hover { background-color: #5b626d } .has-main-collection-btns .btn::before { background-color: rgba(255,255,255,0); -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } .has-main-collection-btns .btn:hover::before { background-color: rgba(255,255,255,0.25) } .has-main-collection-btns .btn + .btn { margin-top: 20px } #etiquette-cart h4 { color: #899192; font-size: 14px; font-family: 'Montserrat', sans-serif; font-weight: 500; text-transform: uppercase } #etiquette-cart .has-signin-register h4 { margin: 0 0 30px } #etiquette-cart .has-free-shipping-info h4 { margin-top: 5px } #etiquette-cart .has-free-shipping-info p { font-size: 10px; line-height: 2em } #etiquette-cart a.sign-in:hover h4 { color: #5b626d } #etiquette-cart a.sign-in:hover svg path { fill: #5b626d } #etiquette-cart .has-cart-items .etdrwr-section { padding: 0 } #etiquette-cart .cart-items-wrap { height: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch } #etiquette-cart .cart-items-wrap .cart-items-wrap-inner { min-height: 100%; position: absolute; top: 0; width: 100% } #etiquette-cart .cart-items-wrap .checkout-bottom-text { bottom: 0; left: 0; position: absolute; width: 100% } #etiquette-cart .cart-items { padding: 0 25px } #etiquette-cart.just-added .cart-items::before { content: 'Added to wardrobe'; display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: 20px; line-height: 2em; padding-top: 10px; text-align: center } #etiquette-cart .cart-item-separator hr { border-top-color: #899192; border-top-style: dotted } #etiquette-cart .cart-item { font-size: 12px; letter-spacing: 0.05em; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } #etiquette-cart .cart-item:last-child { padding-bottom: 20px } #etiquette-cart .cart-item > table { height: 215px } #etiquette-cart .cart-item + .cart-item { border-top: 1px solid #c4c8c8; margin-top: 20px } #etiquette-cart .cart-item.loading { opacity: 0.5 } #etiquette-cart .cart-item .cli-thumb a, #etiquette-cart .cart-item .cli-thumb figure { display: table; margin: 10px auto } #etiquette-cart .cart-item .cli-remove { height: 30%; padding-top: 20px; vertical-align: top } #etiquette-cart .cart-item .cli-qty .selectize-input { padding-right: 20px }/*#etiquette-cart[data-maxitemstodisp="1"] .cart-item-separator,#etiquette-cart[data-maxitemstodisp="1"] .cart-item[data-cartlineid="2"],#etiquette-cart[data-maxitemstodisp="1"] .cart-item[data-cartlineid="3"],#etiquette-cart[data-maxitemstodisp="2"] .cart-item[data-cartlineid="2"] + .cart-item-separator,#etiquette-cart[data-maxitemstodisp="2"] .cart-item[data-cartlineid="3"] { display: none }*/ #etiquette-cart .cart-error { background-color: #f05656; border-radius: 5px; color: #FFF; display: block; font-size: 13px; left: 50%; letter-spacing: 0; max-width: 250px; padding: 8px 10px; position: absolute; top: 50%; z-index: 1; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #etiquette-cart .checkout-bottom-text p { font-size: 10px; letter-spacing: 0.05em; line-height: 2em; margin-bottom: 15px } #etiquette-cart .checkout-bottom-text p.cart-currency-note { margin: 0 30px 5px } #etiquette-cart .etdrwr-bottom .etdrwr-section.has-subtotal { background-color: #5b626d; color: #FFF; font-size: 13px; padding-bottom: 0 } #etiquette-cart .etdrwr-bottom .etdrwr-section.has-btn-checkout { height: 50px; padding: 0 } #etiquette-cart .etdrwr-bottom .etdrwr-section.has-btn-checkout #btn-checkout-drawer { font-size: 14px; height: 50px; width: 100% } #etiquette-cart .etdrwr-bottom .etdrwr-section.has-btn-checkout #btn-checkout-drawer:hover { background-color: #9097A0 } @media all and (max-width:1199px) { #etiquette-cart { display: block; overflow-y: auto } #etiquette-cart > *, #etiquette-cart > * > * { display: block; width: 100% } .etdrwr-section.has-main-collection-btns { left: 0; position: absolute; top: 50%; width: 100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #etiquette-cart .etdrwr-bottom .etdrwr-section.has-subtotal { font-size: 12px; height: 35px; line-height: 35px } } @media all and (max-width:767px) { #etiquette-cart > .wrap-cart-subtotal { bottom: 50px; bottom: 60px; position: absolute; z-index: 1 } #etiquette-cart > .wrap-btn-checkout { bottom: 0; position: absolute; z-index: 1 } #etiquette-cart .etdrwr-section { padding-left: 15px; padding-right: 15px } #etiquette-nav.drawer .etdrwr-top .etdrwr-section.height-60, #etiquette-cart.drawer .etdrwr-top .etdrwr-section.height-60, .drawer .etdrwr-section.height-60 { height: 50px } #etiquette-cart.cart-has-items.drawer .etdrwr-bottom .etdrwr-section.height-60 { height: 50px; height: 60px } #etiquette-cart.drawer .etdrwr-top .etdrwr-section [id^="btn"] { -moz-transform: translateY(-4px); -webkit-transform: translateY(-4px); -o-transform: translateY(-4px); -ms-transform: translateY(-4px); transform: translateY(-4px); } .drawer .etdrwr-section.height-180 { height: 120px } .drawer .etdrwr-section.height-120 { height: 80px } .drawer .etdrwr-section.height-100 { height: 66px } .drawer .etdrwr-section.height-35 { height: 23px }/*body.scrolled-down #etiquette-nav.drawer .etdrwr-top .etdrwr-section.height-60,body.scrolled-down #etiquette-cart.drawer .etdrwr-top .etdrwr-section.height-60 { height: 45px }*/ #etiquette-cart .etdrwr-top svg { height: 26px; width: auto } #etiquette-cart .etdrwr-top #btn-account svg, #etiquette-cart .etdrwr-top #btn-drawer-cart svg { height: 22px } #etiquette-cart .empty-cart-message { font-size: 8px; padding: 20px 0 } .has-main-collection-btns .btn + .btn { margin-top: 12px } #etiquette-cart h4 { font-size: 10px } #etiquette-cart .has-signin-register h4 { margin: 0 0 15px } #etiquette-cart .has-free-shipping-info p { font-size: 8px } #etiquette-cart .etdrwr-pre-bottom svg, #etiquette-cart .etdrwr-bottom svg { height: 35px; width: auto } #etiquette-cart a#btn-close-cart { right: 14px } #etiquette-cart a#btn-drawer-cart { left: 47px; min-width: 26px } #etiquette-cart a#btn-account { left: 12px } #etiquette-cart .currency-picker__wrapper { padding-top: 2px; right: 56px } #etiquette-cart .currency-picker__wrapper .selectize-control { font-size: 10px } #etiquette-cart .currency-picker__wrapper .selectize-control .selectize-input::after { top: 82% } #etiquette-cart .cart-items { padding: 0 15px } #etiquette-cart .cart-item { font-size: 12px } #etiquette-cart .cart-item svg.svg-close { height: 16px; width: 16px } #etiquette-cart .cart-item .cli-qty .selectize-input { padding-left: 0 } #etiquette-cart .checkout-bottom-text p { font-size: 10px; line-height: 1.6em; margin-bottom: 10px; padding-top: 10px } #etiquette-cart .etdrwr-bottom .etdrwr-section.has-btn-checkout #btn-checkout-drawer { background-color: #390; font-size: 14px; height: 50px; height: 60px; line-height: 50px; padding-top: 0; padding-bottom: 0 } } @media only screen and (device-width : 375px) and (device-height : 667px) and (-webkit-device-pixel-ratio : 2) { #etiquette-nav, #etiquette-cart { height: 667 } } @media only screen and (device-width : 414px) and (device-height : 736px) and (-webkit-device-pixel-ratio : 3) { #etiquette-nav, #etiquette-cart { height: 736 } } @media only screen and (device-width : 375px) and (device-height : 812px) and (-webkit-device-pixel-ratio : 3) { #etiquette-nav, #etiquette-cart { height: 812 } } /****----- 2.5 Etiquette Region (Drawer) -----****/ #etiquette-region h3 { font-size: 30px; margin: 15px 0 0 } #etiquette-region .imp-note { margin: 0 auto; max-width: 90%; text-align: center; width: 340px } #etiquette-region .imp-note h6 { border-style: solid; border-width: 0 0 1px; display: table; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 500; margin: 0 auto; text-transform: uppercase } #etiquette-region .imp-note p { font-size: 11px; line-height: 24px; margin: 10px 0 0 } #etiquette-region ul#regions-w-flags { display: table; margin: 40px auto } #etiquette-region ul#regions-w-flags li { display: inline-block } #etiquette-region ul#regions-w-flags li + li { margin-left: 40px } #etiquette-region ul#regions-w-flags li a { border-width: 1px; border-style: solid; border-radius: 30px; display: block; height: 95px; text-align: center; width: 95px; -moz-transition: border-color 0.3s ease 0s; -webkit-transition: border-color 0.3s ease 0s; -o-transition: border-color 0.3s ease 0s; -ms-transition: border-color 0.3s ease 0s; transition: border-color 0.3s ease 0s; } #etiquette-region ul#regions-w-flags li a svg { height: 50px; left: 50%; position: absolute; top: 35%; width: 50px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #etiquette-region ul#regions-w-flags li a span { display: block; font-size: 12px; font-weight: 500; left: 50%; letter-spacing: 0.05em; text-transform: uppercase; position: absolute; top: 75%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #etiquette-region ul#regions { display: flex; margin: 40px auto } #etiquette-region ul#regions li { flex: 1 } #etiquette-region ul#regions li + li { margin-left: 15px } #etiquette-region ul#regions li a { border-style: solid; border-width: 1px; display: block; font-size: 12px; font-weight: 500; padding: 0.8em 1em; text-align: center; text-transform: uppercase } @media all and (max-width:767px) { #etiquette-region ul#regions-w-flags { display: block; margin: 20px auto 10px; width: 350px } #etiquette-region ul#regions-w-flags li, #etiquette-region ul#regions-w-flags li + li { display: block; float: left; height: auto; margin: 0; padding-top: 24%; width: 50% } #etiquette-region ul#regions-w-flags li a { background-color: transparent; border: 0 none; border-radius: 0; height: 80px; left: 50%; position: absolute; top: 50%; width: 80px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #etiquette-region ul#regions-w-flags li a svg { max-height: 35px; width: auto } #etiquette-region ul#regions-w-flags li a span { font-size: 10px } #etiquette-region ul#regions { flex-direction: column; max-width: 80%; width: 150px } #etiquette-region ul#regions li + li { margin: 15px 0 0 } #etiquette-region .imp-note { max-width: 100%; width: auto } } @media all and (max-width:400px) { #etiquette-region ul#regions-w-flags { width: 100% } } /****----- 2.6 Etiquette Check Location (Drawer) -----****/ #etiquette-check-location .etdrwr-main h4, #etiquette-check-location h3 { font-size: 30px; letter-spacing: 0; margin: 10px 0 20px } #etiquette-check-location .etdrwr-main p { font-size: 11px; font-weight: 500; margin: 10px 0 } #etiquette-check-location .etdrwr-main h4 { font-size: 28px; font-style: italic; font-weight: 400; margin: 0 } #etiquette-check-location .actions .btn { border-width: 1px; font-size: 12px; font-weight: 500; margin: 20px 10px 10px; padding-bottom: 0; padding-top: 0; width: 150px } #etiquette-check-location .actions .btn:hover { background-color: #000000; color: #FFF } #etiquette-check-location .actions .btn.btn-primary:hover { background-color: #f7f7f9; border-color: #AEAFAE; color: #5b626d } @media all and (max-width:767px) { #etiquette-check-location .etdrwr-main .etdrwr-section p { font-size: 11px; font-style: normal; line-height: 2em; margin: 20px 0 } #etiquette-check-location .etdrwr-main .etdrwr-section p:first-child { margin-bottom: 0 } #etiquette-check-location .etdrwr-main .current-location + p { margin-top: 0 } #etiquette-check-location .etdrwr-main h4.current-location { margin: 10px 0 } #etiquette-check-location .etdrwr-main .current-location, #etiquette-check-location .etdrwr-main .website-locale { /*color: #000000*/ } #etiquette-check-location .actions { padding-bottom: 10px } #etiquette-check-location .actions .btn { display: block; margin: 5px auto 10px; padding: 0; width: 165px } #etiquette-check-location .actions .btn.action-no { } #etiquette-check-location .actions .btn.action-yes { margin: 20px auto 0 } } /****----- 2.7 Etiquette Promos (Drawer) -----****/ #etiquette-promos .etdrwr-main .etdrwr-section { padding-top: 30px } #etiquette-promos .etdrwr-main h4, #etiquette-promos h3 { font-size: 28px; letter-spacing: 0; margin: 15px 0 0; } #etiquette-promos .etdrwr-top p, #etiquette-promos .etdrwr-main p { font-size: 11px; font-weight: 500; margin: 18px 0 } #etiquette-promos .has-quick-subscribe { padding-top: 0; padding-bottom: 30px } #etiquette-promos .has-quick-subscribe .fields-wrap { margin: 0 auto } #etiquette-promos .has-quick-subscribe .has-policy-submit .form-group { margin-bottom: 0 } #etiquette-promos .has-quick-subscribe .btn { background-color: transparent; border-radius: 50px; font-size: 12px; font-weight: 500; width: 175px } .has-subscribe-form ul.interested-in li { display: inline-block; margin: 0 30px } .has-subscribe-form ul.interested-in li label { font-weight: normal; font-style: italic; letter-spacing: 0.05em; } @media all and (max-width:767px) { #etiquette-promos .etdrwr-main .etdrwr-section { padding-top: 15px } #etiquette-region .etdrwr-top svg.svg-shipping-region, #etiquette-check-location .etdrwr-top svg.svg-globe, #etiquette-promos .etdrwr-main svg.svg-newsletter-popup, #etiquette-promos .etdrwr-top svg.svg-shipping { max-height: 45px; width: auto } #etiquette-region .etdrwr-bottom .imp-note, #etiquette-check-location .etdrwr-main p { font-size: 10px; font-style: italic; letter-spacing: 0.05em; margin: 8px 0; text-transform: none } #etiquette-promos .etdrwr-top p, #etiquette-promos .etdrwr-main p { font-size: 11px } #etiquette-promos .etdrwr-top h3, #etiquette-promos .etdrwr-main h3 { margin: 7px 0 12px } #etiquette-promos .etdrwr-top p, #etiquette-promos .etdrwr-main p { line-height: 2em } #etiquette-region .etdrwr-bottom .imp-note { margin-bottom: 0 } #etiquette-promos .etdrwr-top p:last-child { margin-bottom: 15px } .has-subscribe-form ul.interested-in { display: block; margin: 0 auto; padding: 10px 0 } .has-subscribe-form ul.interested-in li { display: inline-block; margin: 0 1% 10px 8%; text-align: left; width: auto } .has-subscribe-form ul.interested-in li label { font-size: 10px; margin-bottom: 2px } } @media all and (max-width:600px) { body.etiquette-check-location-open, body.etiquette-promos-open { overflow: hidden } #etiquette-check-location, #etiquette-promos { display: block; height: auto; max-height: 100vh } #etiquette-check-location { display: table } } @media all and (max-height:550px) { #etiquette-check-location, #etiquette-promos { height: 100vh; min-height: 100vh; max-height: 100vh; overflow: auto } #etiquette-check-location.drawer.bottom .close, #etiquette-promos.drawer.bottom .close { position: fixed; right: 0; top: 0 } } @media all and (max-width:500px) { #etiquette-promos .has-quick-subscribe .fields-wrap { width: 100% } } /****----- 2.75 Etiquette Promo Special (Drawer) -----****/ #etiquette-promo-spl img { height: auto; margin-top: 40px; max-height: 120px; max-width: 120px; width: auto } #etiquette-promo-spl h3 { font-size: 22px; line-height: 1.4 } #etiquette-promo-spl .btn.btn-spl { height: 35px; line-height: 34px; margin: 20px auto 50px; min-width: 155px; padding-top: 0; padding-bottom: 0 } #etiquette-promo-spl .btn.btn-spl span { display: block; font-size: 12px; height: 35px; line-height: 34px; text-align: center } #etiquette-promo-spl .promo-code { font-family: 'Arapey', 'Frank+Ruhl+Libre' } @media all and (max-width:600px) { body.etiquette-promo-spl-open { overflow: hidden } } /****----- 2.8 Cookies Notice Drawer -----****/ #etiquette-cookiesnotice { height: auto } #etiquette-cookiesnotice.drawer .etdrwr-bottom .etdrwr-section { padding-bottom: 25px } #etiquette-cookiesnotice h3 { font-size: 28px; margin: 12px 0 20px; text-align: center } #etiquette-cookiesnotice svg { display: block; margin: 10px auto 0 } #etiquette-cookiesnotice .has-cookies-notice p { font-size: 11px; font-weight: 500; line-height: 26px } #etiquette-cookiesnotice .has-cookies-notice p a { text-decoration: underline } #etiquette-cookiesnotice .has-cookies-notice p a:hover { text-decoration: none } #etiquette-cookiesnotice .has-cookies-notice a.btn#agree-to-cookies { border-radius: 40px; border-width: 1px; font-size: 12px; margin-bottom: 5px; margin-top: 10px; width: 175px } @media all and (max-width:767px) { #etiquette-cookiesnotice.drawer .etdrwr-bottom .etdrwr-section { padding-bottom: 20px; padding-top: 5px } #etiquette-cookiesnotice .has-cookies-notice p { line-height: 24px } #etiquette-cookiesnotice .has-cookies-notice p br { display: none } } /****----- 2.9 ‘Just Added To’ Etiquette Cart (Drawer) -----****/ #etiquette-just-added-to-cart { display: none } #etiquette-just-added-to-cart { background-color: #FFF; display: block; max-width: 100%; right: 25px; position: fixed; top: 60px; width: 300px; z-index: 5050; -moz-transform: translateY(-200%); -webkit-transform: translateY(-200%); -o-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } body.etiquette-just-added-to-cart-open #etiquette-just-added-to-cart { -moz-transform: translateY(0); -webkit-transform: translateY(0); -o-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } #etiquette-just-added-to-cart::before { border-bottom: #FFF 7px solid; border-left: transparent 5px solid; border-right: transparent 5px solid; content: ''; display: block; right: 13px; position: absolute; top: -6px } #etiquette-just-added-to-cart h3 { font-size: 20px; margin: 20px auto 10px; text-align: center } #etiquette-just-added-to-cart .added-item { display: block; margin: 20px auto; padding: 0 20px; text-align: center } #etiquette-just-added-to-cart .added-item .thumb {} #etiquette-just-added-to-cart .added-item .thumb a {} #etiquette-just-added-to-cart .added-item .thumb a figure {} #etiquette-just-added-to-cart .added-item .thumb a figure img { height: 125px; width: 125px } #etiquette-just-added-to-cart .added-item .details { display: block; margin: 20px auto 0 } #etiquette-just-added-to-cart .added-item .details > * { color: #899192; display: block; font-size: 12px; line-height: 20px } #etiquette-just-added-to-cart .added-item .details .title { color: #000000; margin: 0 auto; max-width: 80% } #etiquette-just-added-to-cart .subtotal { background-color: #5b626d; color: #FFF; display: flex; font-size: 12px; height: 35px; line-height: 35px; padding: 0 15px } #etiquette-just-added-to-cart .subtotal .subtotal-label { flex-grow: 1 } #etiquette-just-added-to-cart .subtotal .cart-subtotal {} #etiquette-just-added-to-cart .btn { font-size: 14px; height: 50px; line-height: 50px; width: 100% } #etiquette-just-added-to-cart .btn:hover { background-color: #9097A0 } @media all and (max-width:767px) { #etiquette-just-added-to-cart { right: 10px; top: 46px } #etiquette-just-added-to-cart::before { right: 19px } } @media all and (max-width:400px) { #etiquette-just-added-to-cart { right: 0; width: 100% } } /****----- 2.10 Heading Banner -----****/ #heading-banner { border-color: #e6e6e6; border-style: solid; border-width: 1px 0; margin-left: -15px; margin-right: -15px } body.has-collection-hero #heading-banner { opacity: 0; visibility: hidden; -moz-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; } body.has-collection-hero.past-collection-hero #heading-banner { opacity: 1; visibility: visible; -moz-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; -webkit-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; -o-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; -ms-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; transition: visibility 0s ease 0s, opacity 0.3s ease 0s; } #heading-banner::before { background-color: #ffffff; content: ''; display: block; height: 100%; left: 0; opacity: 1; position: absolute; top: 0; width: 100%; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } body.shrink-heading-banner #heading-banner::before { background-color: #ffffff; opacity: 0.8 } #heading-banner .auto-table { height: 55px; -moz-transition: height 0.3s ease 0s; -webkit-transition: height 0.3s ease 0s; -o-transition: height 0.3s ease 0s; -ms-transition: height 0.3s ease 0s; transition: height 0.3s ease 0s; } body.shrink-heading-banner #heading-banner .auto-table { height: 45px } #heading-banner #page-description { max-height: 55px; opacity: 1; overflow-y: hidden; -moz-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; } body.shrink-heading-banner #heading-banner #page-description { opacity: 0; max-height: 0; -moz-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; } #heading-banner .heading-banner-wrap { color: #000000; margin: 0 auto; max-width: 90%; /*width: 1000px;*/ -moz-transition: padding 0.3s ease 0s; -webkit-transition: padding 0.3s ease 0s; -o-transition: padding 0.3s ease 0s; -ms-transition: padding 0.3s ease 0s; transition: padding 0.3s ease 0s; } body.shrink-heading-banner #heading-banner .heading-banner-wrap { padding: 0 } #heading-banner #page-heading, #heading-banner #page-description { color: #000000; font-size: 12px; line-height: 2.2em; text-align: center } #heading-banner #page-heading { font-size: 24px; line-height: 1em; margin: 0; text-transform: capitalize; -moz-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0s; transition: font-size 0.3s ease 0s, opacity 0.3s ease 0s; } body.shrink-heading-banner #heading-banner #page-heading { font-size: 20px } body.shrink-heading-banner #heading-banner #page-heading br { display: none } #heading-banner #page-description p:last-child { margin-bottom: 0 } #heading-banner #page-description a:hover { color: #000000 } body.shrink-heading-banner #heading-banner #page-heading { opacity: 1; -moz-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0.3s; -webkit-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0.3s; -o-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0.3s; -ms-transition: font-size 0.3s ease 0s, opacity 0.3s ease 0.3s; transition: font-size 0.3s ease 0s, opacity 0.3s ease 0.3s; } body.shrink-heading-banner #heading-banner .heading-banner-wrap:hover #page-heading { opacity: 0; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } #heading-banner .back-to-top { font-size: 12px; line-height: 1.6em; opacity: 0; position: absolute; text-align: center; text-transform: uppercase; top: 0; visibility: hidden; width: 100%; z-index: 1; -moz-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; } body.shrink-heading-banner #heading-banner .heading-banner-wrap:hover .back-to-top { opacity: 1; visibility: visible; -moz-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; -webkit-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; -o-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; -ms-transition: visibility 0s ease 0s, opacity 0.3s ease 0s; transition: visibility 0s ease 0s, opacity 0.3s ease 0s; } @media all and (max-width:767px) { body.has-collection-hero #heading-banner { opacity: 1; visibility: visible } #heading-banner .auto-table { height: 35px } body.shrink-heading-banner #heading-banner .auto-table { height: 30px } #heading-banner .heading-banner-wrap { padding: 0; width: 100% } #heading-banner #page-heading { font-size: 18px } body.shrink-heading-banner #heading-banner #page-heading { font-size: 17px } #heading-banner .back-to-top { font-size: 10px; line-height: 1.2em } #heading-banner #page-description { display: none } } /********* 3. Content *********/ #content { background-color: #FFF } body.template-index #content { padding-left: 0; padding-right: 0 } @media all and (max-width:767px) { body.coll-filters-active #content { padding-top: 86px } } /****----- 3.1 Homepage Page -----****/ body.template-index h1, body.template-index h2, body.template-index h3, body.template-index h4, body.template-index h5 { font-weight: 500 } #home-hero-slider .carousel-inner .item { background: transparent none center center no-repeat; background-size: cover; height: 100vh; padding-top: 0 } #home-hero-slider .carousel-inner .item .carousel-caption { top: 0; left: 0 } #home-hero-slider .carousel-caption { filter: blur(10px); opacity: 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: opacity 1.5s ease-out 0.3s, filter .5s ease-out 0.3s; -webkit-transition: opacity 1.5s ease-out 0.3s, filter .5s ease-out 0.3s; -o-transition: opacity 1.5s ease-out 0.3s, filter .5s ease-out 0.3s; -ms-transition: opacity 1.5s ease-out 0.3s, filter .5s ease-out 0.3s; transition: opacity 1.5s ease-out 0.3s, filter .5s ease-out 0.3s; } #home-hero-slider .item.active .carousel-caption { filter: blur(0); opacity: 1 } #home-hero-slider .carousel-caption .title, #home-hero-slider .carousel-caption .sub-title { display: table; margin: 0 auto; text-align: center; text-shadow: none } #home-hero-slider .carousel-caption .title { font-size: 50px; margin-top: 8px } #home-hero-slider .carousel-caption .sub-title { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase } #home-hero-slider .carousel-caption .btn-set { display: flex; justify-content: center } #home-hero-slider .carousel-caption .btn, #home-three-buckets .cta-buttons .btn { height: 35px; line-height: 34px; min-width: 155px; padding-top: 0; padding-bottom: 0 } #home-hero-slider .carousel-caption .btn + .btn { margin-left: 80px } #home-hero-slider .carousel-caption .btn { margin-top: 35px } #home-hero-slider .carousel-caption .btn.btn-spl span, #home-three-buckets .cta-buttons .btn.btn-spl span { display: block; font-size: 12px; height: 35px; line-height: 34px; text-align: center } #home-three-buckets .bucket { background: transparent none center center no-repeat; background-size: cover; border-color: #FFF; border-style: solid; border-width: 40px 40px 0 20px; height: 28.5vw; overflow: hidden } #home-three-buckets .bucket:first-child { border-width: 40px 20px 0 40px; height: 57vw } #home-three-buckets .bucket:nth-child(4) { border-width: 40px 40px 0; height: 39vw } #home-three-buckets .bucket .bucket-content { left: 0; position: absolute; top: 0 } #home-three-buckets h3 { font-size: 42px; margin: 0 0 30px; text-align: center; -moz-transform: translateY(30px); -webkit-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -moz-transition: all 0.3s ease 0.1s; -webkit-transition: all 0.3s ease 0.1s; -o-transition: all 0.3s ease 0.1s; -ms-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s; } #home-three-buckets .bucket:hover h3 { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #home-three-buckets .cta-buttons { opacity: 0; text-align: center; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #home-three-buckets .bucket:hover .cta-buttons { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); -moz-transition: all 0.3s ease 0.1s; -webkit-transition: all 0.3s ease 0.1s; -o-transition: all 0.3s ease 0.1s; -ms-transition: all 0.3s ease 0.1s; transition: all 0.3s ease 0.1s; } #home-three-buckets .cta-buttons .btn + .btn { margin-left: 80px } @media all and (max-width:1199px) { #home-hero-slider .carousel-caption .title { font-size: 42px; margin: 8px auto 0; max-width: 80% } #home-hero-slider .carousel-caption .sub-title { font-size: 12px; margin: 0 auto; max-width: 80% } #home-hero-slider .carousel-caption .btn, #home-three-buckets .cta-buttons .btn { height: 30px; min-width: 130px } #home-hero-slider .carousel-caption .btn { margin-top: 27px } #home-hero-slider .carousel-caption .btn.btn-spl span, #home-three-buckets .cta-buttons .btn.btn-spl span { font-size: 11px; height: 30px; line-height: 28px } #home-hero-slider.carousel .carousel-control { display: none } #home-three-buckets h3 { font-size: 34px; margin-bottom: 22px; -moz-transform: translateY(22px); -webkit-transform: translateY(22px); -o-transform: translateY(22px); -ms-transform: translateY(22px); transform: translateY(22px); } #home-three-buckets .cta-buttons .btn + .btn { margin-left: 28px } } @media all and (max-width:767px) { #home-hero-slider .carousel-caption .btn + .btn { margin-left: 30px } #home-three-buckets { padding-left: 12px; padding-right: 12px } #home-three-buckets .bucket:first-child, #home-three-buckets .bucket:nth-child(4), #home-three-buckets .bucket { border-left: 0 none; border-right: 0 none; border-top-width: 12px; height: 55vw } #home-three-buckets .bucket:first-child { height: 110vw } } /****----- 3.2 Collection Page -----****/ [class*="container"].collection-grid { padding-left: 0; padding-right: 0 } [class*="container"].collection-grid > .row, .flexize { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap } @media all and (max-width:1400px) { body.has-collection-header-bar .collection-grid > .row { padding-top: 30px } } @media all and (max-width:1199px) { [class*="container"].collection-grid > .row { /*display: block*/ } } /****----- 3.2.1 Collection Hero -----****/ body.has-collection-hero #content .has-collection-hero, body[class*="pagetpl-etq-basics"] #content .has-collection-hero { border-color: #e6e6e6; border-style: solid; border-width: 1px 0; height: 461px; padding: 60px 25px } .collection-hero-wrap { background-color: #f7f7f9; padding-left: 55px; padding-right: 55px } body[class*="pagetpl-etq-basics"] .collection-hero-wrap { background-color: #B1E5DC } .collection-hero-wrap .auto-table, .collection-hero-wrap .auto-table > * > * { float: none; height: 340px } #collection-hero .coll-hero-img { background: transparent none center center no-repeat; background-size: cover; height: 420px; left: 15px; position: absolute; right: 15px; top: -40px } #collection-hero h5 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: normal; letter-spacing: 0.15em; line-height: 1em; margin: 0 0 10px; text-transform: uppercase } #collection-hero h2 { font-size: 46px; margin: 16px 0 } #collection-hero p { font-size: 11px; line-height: 24px; margin: 10px auto; max-width: 100%; width: 370px } #collection-hero .buttons { text-align: center } #collection-hero .buttons .btn { font-size: 11px; height: 37px; letter-spacing: 0.05em; line-height: 35px; margin: 15px 10px 0; padding: 0; text-align: center; width: 155px } @media all and (min-width:768px) and (max-width:1330px) { #collection-hero .buttons .btn { font-size: 9px; margin: 15px 5px 0; width: 130px } } @media all and (max-width:1110px) { .collection-hero-wrap { padding-left: 30px; padding-right: 30px } #collection-hero .buttons .btn:nth-child(n+3) { display: none } #collection-hero h2 { font-size: 40px } } @media all and (max-width:991px) { #collection-hero h2 { font-size: 38px } } @media all and (min-width:768px) and (max-width:991px) { body[data-deviceorientation="portrait"] #collection-hero h5 { margin-top: 20px } body[data-deviceorientation="portrait"] #collection-hero .buttons { margin-bottom: 20px } } @media all and (max-width:767px) { body.has-collection-hero #content .has-collection-hero, body[class*="pagetpl-etq-basics"] #content .has-collection-hero { height: 301px; padding: 10px } body.has-collection-hero.has-collection-header-bar.has-heading-banner #content .has-collection-hero { margin-top: 35px } .collection-hero-wrap { padding: 0 15px } .collection-hero-wrap .auto-table, .collection-hero-wrap .auto-table > * > * { height: 280px } #collection-hero .has-hero-descr { padding-bottom: 20px; padding-top: 15px } #collection-hero h2 { font-size: 34px; margin: 0 0 30px } #collection-hero h2::after { background-color: #000000; bottom: -17px; content: ''; display: block; height: 1px; left: 50%; margin-left: -50px; position: absolute; width: 100px } #collection-hero p { line-height: 20px; margin-bottom: 5px } #collection-hero .buttons .btn { margin: 10px 8px 0 } } @media all and (max-width:600px) { #collection-hero .buttons .btn:nth-child(n+3) { display: none } } @media all and (max-width:400px) { #collection-hero .buttons .btn { font-size: 9px; margin: 10px 5px 0; width: 130px } } @media all and (max-width:360px) { #collection-hero h2 { font-size: 28px } #collection-hero p { font-size: 10px } #collection-hero .buttons .btn { margin: 10px 0 0 } } /****----- 3.2.2 Collection Header Bar -----****/ .product-header-bar-wrap, .collection-header-bar-wrap { left: 0; opacity: 0; position: absolute; top: 17px; width: 100%; z-index: 10; -moz-transition: top 0.3s ease 0s, opacity 0.3s ease 0.3s; -webkit-transition: top 0.3s ease 0s, opacity 0.3s ease 0.3s; -o-transition: top 0.3s ease 0s, opacity 0.3s ease 0.3s; -ms-transition: top 0.3s ease 0s, opacity 0.3s ease 0.3s; transition: top 0.3s ease 0s, opacity 0.3s ease 0.3s; } body.shrink-heading-banner .product-header-bar-wrap, body.shrink-heading-banner .collection-header-bar-wrap { top: 12px }/* body.loading-anim-complete */.product-header-bar-wrap, body.loading-anim-complete .collection-header-bar-wrap { opacity: 1; -moz-transition: top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: top 0.3s ease 0s, opacity 0.3s ease 0s; transition: top 0.3s ease 0s, opacity 0.3s ease 0s; } #content .collection-header-bar-wrap { visibility: hidden } body.has-collection-hero #content .collection-header-bar-wrap { visibility: visible } body.has-collection-hero.past-collection-hero #content .collection-header-bar-wrap, body.loading-page .collection-header-bar-wrap { visibility: hidden } .product-header-bar-wrap [class*="col-"], .collection-header-bar-wrap [class*="col-"] { min-height: 0 } .collection-header-bar > .list-style { position: absolute; top: 0; left: 10px } .collection-header-bar > .has-filters-btn { position: absolute; top: 0; right: 10px } .collection-header-bar > .has-filters-btn > *, .collection-header-bar button { background: transparent none; border: 0 none; display: block; float: left; height: 14px; padding: 0; width: 14px } .collection-header-bar button + button { margin-left: 10px } .collection-header-bar > .has-filters-btn > * svg, .collection-header-bar button svg { height: 14px; width: 14px; -moz-transform: translateY(2px); -webkit-transform: translateY(2px); -o-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); } .collection-header-bar > .has-filters-btn > * { color: #899192; font-size: 10px; height: 20px; line-height: 20px; white-space: nowrap; width: auto } .collection-header-bar > .has-filters-btn > *:nth-child(n+2) { margin-left: 16px } body.coll-filters-active .collection-header-bar > .has-filters-btn > *:nth-child(n+2)::before { background-color: #899192; content: ''; display: block; height: 9px; left: -8px; margin-top: -4px; position: absolute; top: 50%; width: 1px } .collection-header-bar .clear-all-filters:hover, .collection-header-bar button.filters:hover { color: #000000 } .collection-header-bar button.filters::after { content: ' +' } body.etiquette-filters-open .collection-header-bar button.filters::after, .collection-header-bar button.filters.active::after { content: ' -' } .collection-header-bar .clear-all-filters svg { display: inline-block; vertical-align: middle } .collection-header-bar .clear-all-filters:hover svg .fill-color { fill: #000000 } .collection-header-bar .filtered-prod-count, .collection-header-bar .clear-all-filters, .collection-header-bar > .has-filters-btn > *:nth-child(n+2)::before { display: none } body.coll-filters-active .collection-header-bar .filtered-prod-count, body.coll-filters-active .collection-header-bar .clear-all-filters, body.coll-filters-active .collection-header-bar > .has-filters-btn > *:nth-child(n+2)::before { display: block } body.coll-filters-active .collection-header-bar .filtered-prod-count, body.coll-filters-active .collection-header-bar > .has-filters-btn > *:nth-child(2)::before { display: none } body.filtering-products .collection-header-bar .filtered-prod-count, body.filtering-products .collection-header-bar .clear-all-filters, body.filtering-products .collection-header-bar > .has-filters-btn > *:nth-child(n+2)::before { visibility: hidden } .filtered-prod-count::before { content: attr(data-filteredprodcount) } .filtered-prod-count::after { content: 's' } .filtered-prod-count[data-filteredprodcount="0"]::after { content: '' } .collection-header-bar button.active svg rect { fill: #5b626d; stroke: #5b626d } .collection-header-bar button:hover svg rect { fill: #5b626d; stroke: #5b626d } .collection-header-bar button svg rect.fill-when-active { fill: none; stroke-width: 0 } .collection-header-bar button.active svg rect.fill-when-active, .collection-header-bar button.active svg path.fill-color { fill: #5b626d } .collection-header-bar button:hover svg rect.fill-when-active, .collection-header-bar button:hover svg path.fill-color { fill: #5b626d } @media all and (max-width:767px) { body.has-collection-hero.has-heading-banner.has-collection-header-bar #content .collection-header-bar-wrap { visibility: hidden } .product-header-bar-wrap, .collection-header-bar-wrap { top: 7px } body.shrink-heading-banner .product-header-bar-wrap, body.shrink-heading-banner .collection-header-bar-wrap { top: 5px } .collection-header-bar > .list-style { left: 0 } .collection-header-bar > .has-filters-btn { right: 0 } #header .collection-header-bar button, #header .collection-header-bar svg { height: 14px; width: 14px } #header .collection-header-bar button.filters { width: auto } .collection-header-bar button + button { margin-left: 8px } } /****----- 3.2.3 Collection Grid Item -----****/ [id^="page-anchor-"] { float: left } .collection-grid.style-list .collection-grid-item { width: 50% } .collection-grid.style-list .collection-grid-item a { margin-left: auto; margin-right: auto; max-width: 100%; width: 800px } .collection-grid .no-items-to-show { color: #899192; font-size: 20px; letter-spacing: 0.05em; opacity: 0.6; padding-bottom: 100px; padding-top: 100px; text-align: center } .collection-grid .no-items-to-show p { line-height: 1.6em; margin: 20px 0 } .collection-grid-item a { display: block; height: 100% } .collection-grid-item a::before { background-color: transparent; content: ''; display: block; height: auto; filter: blur(6px); left: 0; padding-top: 90%; position: absolute; top: 5%; width: 100%; z-index: 0; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } .collection-grid-item.added a::before, .collection-grid-item a:hover::before { background-color: #e6e6e6 } .collection-grid-item a figure { background-color: #FFF; border: 1px solid transparent; height: auto; overflow: hidden; padding-top: 100%; -moz-transition: border-color 0.3s ease 0s; -webkit-transition: border-color 0.3s ease 0s; -o-transition: border-color 0.3s ease 0s; -ms-transition: border-color 0.3s ease 0s; transition: border-color 0.3s ease 0s; } .collection-grid-item a figure > * { position: absolute } .collection-grid-item a figure img { display: table; height: auto; left: 50%; max-height: 100%; max-width: 100%; top: 50%; width: auto; -moz-transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .collection-grid-item a figure.has-alt-image img[class*="collection-product-image-"] { -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .collection-grid-item a figure.has-alt-image:hover img[class*="collection-product-image-"] { opacity: 0 } .collection-grid-item a figure img.collection-product-alt-image { opacity: 0; -moz-transform: translateX(-50%) translateY(-50%) scale(1); -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -o-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1); -moz-transition: opacity 0.3s ease 0s, transform 0.3s ease-in-out 0s; -webkit-transition: opacity 0.3s ease 0s, transform 0.3s ease-in-out 0s; -o-transition: opacity 0.3s ease 0s, transform 0.3s ease-in-out 0s; -ms-transition: opacity 0.3s ease 0s, transform 0.3s ease-in-out 0s; transition: opacity 0.3s ease 0s, transform 0.3s ease-in-out 0s; } .collection-grid-item a figure:not(.has-alt-image):hover img[class*="collection-product-image-"], .collection-grid-item a figure:hover img.collection-product-alt-image { opacity: 1; -moz-transform: translateX(-50%) translateY(-50%) scale(1.1); -webkit-transform: translateX(-50%) translateY(-50%) scale(1.1); -o-transform: translateX(-50%) translateY(-50%) scale(1.1); -ms-transform: translateX(-50%) translateY(-50%) scale(1.1); transform: translateX(-50%) translateY(-50%) scale(1.1); -moz-transition: opacity 0.3s ease 0s, transform 3s ease-in-out 0.3s; -webkit-transition: opacity 0.3s ease 0s, transform 3s ease-in-out 0.3s; -o-transition: opacity 0.3s ease 0s, transform 3s ease-in-out 0.3s; -ms-transition: opacity 0.3s ease 0s, transform 3s ease-in-out 0.3s; transition: opacity 0.3s ease 0s, transform 3s ease-in-out 0.3s; } .collection-grid-item a figure .quick-add, .collection-grid-item a figure .coll-grid-item-oos { bottom: 0; color: #FFF; display: block; font-size: 12px; /*font-weight: 500;*/ height: 40px; left: 0; line-height: 40px; opacity: 0; right: 0; text-align: center; text-transform: uppercase; visibility: hidden; -moz-transform: translateY(-45px); -webkit-transform: translateY(-45px); -o-transform: translateY(-45px); -ms-transform: translateY(-45px); transform: translateY(-45px); -moz-transition: visibility 0.6s ease 0.5s, opacity 0.5s ease 0s, transform 0.5s ease 0s; -webkit-transition: visibility 0.6s ease 0.5s, opacity 0.5s ease 0s, transform 0.5s ease 0s; -o-transition: visibility 0.6s ease 0.5s, opacity 0.5s ease 0s, transform 0.5s ease 0s; -ms-transition: visibility 0.6s ease 0.5s, opacity 0.5s ease 0s, transform 0.5s ease 0s; transition: visibility 0.6s ease 0.5s, opacity 0.5s ease 0s, transform 0.5s ease 0s; } .collection-grid-item.added a figure .quick-add, .collection-grid-item a figure:hover .quick-add, .collection-grid-item a figure:hover .coll-grid-item-oos { opacity: 1; visibility: visible; -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -moz-transition: visibility 0.5s ease 0s, opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; -webkit-transition: visibility 0.5s ease 0s, opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; -o-transition: visibility 0.5s ease 0s, opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; -ms-transition: visibility 0.5s ease 0s, opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; transition: visibility 0.5s ease 0s, opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s; } .collection-grid-item a figure .quick-add::before, .collection-grid-item a figure .coll-grid-item-oos::before { background-color: #899192; content: ''; display: block; opacity: 0.9; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 } .collection-grid-item a figure .coll-grid-item-oos::before { background-color: #db4d07 } .collection-grid-item a figure .quick-add:hover::before { background-color: #5b626d } .collection-grid-item.added a figure .quick-add::before { background-color: #000000 } .collection-grid-item a figure .quick-add::after { content: '+ Add to Bag'; display: block; opacity: 1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .collection-grid-item a figure .quick-add:hover::after { opacity: 0 } .collection-grid-item.added a figure .quick-add:hover::after, .collection-grid-item.added a figure .quick-add::after { content: 'Added to Bag'; opacity: 1 } .collection-grid-item a figure .quick-add .variant { display: inline-block; margin: 0 8px; padding: 0 4px; opacity: 0; visibility: hidden; z-index: 2; -moz-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -webkit-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -o-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -ms-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; } .collection-grid-item a figure .quick-add:hover .variant { opacity: 1; visibility: visible; -moz-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; } .collection-grid-item a figure .quick-add:hover .variant.not-available { cursor: default; opacity: 0.4 } .collection-grid-item.added a figure .quick-add .variant { display: none } .collection-grid-item a figure .quick-add .variant::before { background-color: transparent; content: ''; display: block; height: 2px; left: 0; position: absolute; width: 100%; top: 50%; margin-top: 0.7em } .collection-grid-item a figure .quick-add:hover .variant:hover::before { background-color: rgba(255,255,255,0.5) } .collection-grid-item a figure .quick-add[data-variantcount="1"]:hover .variant:hover::before, .collection-grid-item a figure .quick-add:hover .variant.not-available:hover::before { display: none } .collection-grid-item a figure .svg-wrap { background-color: #000000; border-radius: 100px; display: block; height: 110px; left: 50%; top: 45%; width: 110px; z-index: 5; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .collection-grid-item a figure .svg-wrap svg { display: table; left: 50%; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .collection-grid-item a figure .svg-wrap svg polyline { stroke-dasharray: 104; stroke-dashoffset: 104; -moz-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); -o-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); -ms-transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); transition: stroke-dashoffset 1s cubic-bezier(0.25, 0.45, 0.43, 0.97); } .collection-grid-item a figure .svg-wrap svg.animate polyline { stroke-dashoffset: 0 } .collection-grid-item a figure .cart-error { background-color: #db4d07; border: 1px solid #FFF; color: #FFF; display: block; font-size: 15px; left: 50%; line-height: 1.6em; padding: 12px 10px; text-align: center; top: 50%; width: 80%; z-index: 1; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .collection-grid-item a figure .cart-error::before { background-color: #FFF; bottom: -2px; content: ''; display: block; height: 3px; left: 10px; position: absolute; width: calc(100% - 20px); z-index: 0; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .collection-grid-item a figure .cart-error strong { display: block; font-size: 14px; font-weight: 500; margin-bottom: 5px; text-transform: uppercase } .collection-grid-item a h5 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: normal; letter-spacing: 0.05em; margin: 20px 0 0; text-align: center; text-transform: none; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } .collection-grid-item a h5:hover { color: #000000 } .collection-grid-item a h5 .name { display: block; line-height: 1.4em } .collection-grid-item a h5 .price-wrap { display: block; font-weight: normal; margin-top: 8px } .collection-grid-item a h5 .price-wrap > * { display: inline-block } .collection-grid-item a h5 .price-wrap .compare-at-price { opacity: 0.8; text-decoration: line-through } .collection-grid-item a h5 .price-wrap .compare-at-price + .price { color: #C00 } .collection-grid-item a .actions { display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 100px } .collection-grid-item a .actions .btn { display: table; margin: 0 auto } @media all and (max-width:1199px) { .collection-grid.style-list .collection-grid-item { width: 50% } .collection-grid.style-list .collection-grid-item a { /*width: 250px; width: 360px;*/ width: 500px } .collection-grid-item a::before { display: none } .collection-grid-item a figure:hover { border-color: transparent } .collection-grid-item.mobile-show-quick-add a figure { border-color: #e6e6e6 } .collection-grid-item a figure .quick-add:hover::after, .collection-grid-item a figure.has-alt-image:hover img[class*="collection-product-image-"] { opacity: 1 } .collection-grid-item a figure img.collection-product-alt-image { display: none } .collection-grid-item a figure .quick-add { font-size: 12px; height: 35px; line-height: 35px; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .collection-grid-item a figure .quick-add::after, .collection-grid-item a figure .quick-add .variant { font-size: 12px } .collection-grid-item a figure .quick-add:hover .variant, .collection-grid-item a figure:hover .quick-add { visibility: hidden } .collection-grid-item.mobile-show-quick-add.mobile-show-variants a figure .quick-add .variant, .collection-grid-item.mobile-show-quick-add a figure .quick-add { opacity: 1; visibility: visible; -moz-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; } .collection-grid-item.mobile-show-quick-add.mobile-show-variants a figure .quick-add::after { opacity: 0 } .collection-grid-item a figure .svg-wrap { height: 75px; width: 75px } .collection-grid-item a figure .svg-wrap svg { height: 40px; width: 40px } .collection-grid-item a h5 { font-size: 11px; margin-top: 5px } .collection-grid-item a h5 .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .collection-grid-item a h5 .price-wrap { margin-top: 5px } .collection-grid-item a figure .cart-error, .collection-grid-item a figure .cart-error strong { font-size: 9px } .collection-grid-item a figure .cart-error strong { margin-bottom: 2px } } @media all and (max-width:767px) { .collection-grid.style-list .collection-grid-item { width: 100% } .collection-grid-item a h5 .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } } @media all and (max-width:460px) { .collection-grid.style-list .collection-grid-item a { width: 100% } } /****----- 3.2.4 Collection CTA Box -----****/ .collection-grid.style-list .cta-box { margin-left: 7.5%; margin-right: 7.5%; width: 85% } .cta-box, .collection-grid-item { margin-bottom: 30px; margin-top: 30px } .cta-box .cta-box-wrap { background: transparent none center center no-repeat; background-size: cover; display: table; height: 100%; width: 100% } .collection-grid.style-list .cta-box .cta-box-wrap { height: 800px } .cta-box .cta-box-wrap .cta-box-content { color: #FFF } .cta-box .cta-box-wrap .cta-box-content > span > span > * { margin-left: auto; margin-right: auto; max-width: 80% } .cta-box h3 { color: inherit; font-size: 42px; font-weight: 400; margin: 0 auto; opacity: 1; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .cta-box div.cta-box-wrap h3 { cursor: default } .cta-box a.cta-box-wrap h3 { margin: 0 0 30px; -moz-transform: translateY(30px); -webkit-transform: translateY(30px); -o-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .cta-box a.cta-box-wrap:hover h3 { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .cta-box a.cta-box-wrap .cta-buttons { opacity: 0; text-align: center; -moz-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .cta-box a.cta-box-wrap:hover .cta-buttons { opacity: 1; -moz-transform: scale(1); -webkit-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } .cta-box a.cta-box-wrap .cta-buttons .btn { height: 35px; line-height: 34px; min-width: 155px; padding-top: 0; padding-bottom: 0 } .cta-box a.cta-box-wrap .cta-buttons .btn.btn-spl span { display: block; font-size: 12px; height: 35px; line-height: 34px; text-align: center } .cta-box-area { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; width: 100% } .cta-box-area .cta-box, .cta-box-area .collection-grid-item { width: 100% } .cta-box-area .cta-box-area-col-wrap { display: -webkit-flex; display: flex; flex: 1; flex-direction: column } .cta-box-area .cta-box-area-col-wrap > * { flex: 1 } .cta-box-area .cta-box-area-col-wrap.has-cta-box-sized2x2, .cta-box-area .cta-box-area-col-wrap.has-cta-box-sized2x2 > * { flex: 2 } @media all and (max-width:991px) { .cta-box { /*display: none*/ } .cta-box .cta-box-wrap { display: flex; padding-top: 50% } .cta-box .cta-box-wrap .cta-box-content { left: 50%; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } } @media all and (max-width:767px) { .collection-grid-item { margin-bottom: 5px; margin-top: 5px } .collection-grid.style-list .collection-grid-item { margin-bottom: 20px; margin-top: 20px } } /****----- 3.2.5 Collection Load More -----****/ .grid-load-more { height: 50px; margin-bottom: 50px; margin-top: 50px } .grid-load-more[data-direction="backward"] { /*margin-top: 0*/ } .grid-load-more.end-reached { display: none } .grid-load-more .loader { background: transparent url(//www.etiquetteclothiers.com/cdn/shop/files/eq_logo_round.png?v=1525328411) center center no-repeat; background-size: auto 100%; display: table; height: 50px; left: 50%; margin: 0 0 -25px -100px; opacity: 0; position: absolute; top: 0; width: 200px; z-index: 0; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; -moz-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #collection-products-listing.loading + .grid-load-more .loader, .grid-load-more.loading .loader { opacity: 1; } .grid-load-more a { color: #899192; font-size: 15px; height: 50px; line-height: 40px; padding: 0 20px; text-transform: uppercase; z-index: 1; -moz-transition: color 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: color 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: color 0.3s ease 0s, opacity 0.3s ease 0s; transition: color 0.3s ease 0s, opacity 0.3s ease 0s; } .grid-load-more[data-direction="backward"] a { line-height: 60px } #collection-products-listing.loading + .grid-load-more a, .grid-load-more.loading a { opacity: 0 } .grid-load-more a:hover { color: #5b626d } .grid-load-more a::after { border-color: #899192; border-style: solid; border-width: 0 1px 1px 0; bottom: 5px; content: ''; display: block; height: 10px; left: 50%; margin-left: -5px; position: absolute; width: 10px; -moz-transition: border-color 0.3s ease 0s; -webkit-transition: border-color 0.3s ease 0s; -o-transition: border-color 0.3s ease 0s; -ms-transition: border-color 0.3s ease 0s; transition: border-color 0.3s ease 0s; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } .grid-load-more[data-direction="backward"] a::after { bottom: auto; top: 5px; -moz-transform: rotate(-135deg); -webkit-transform: rotate(-135deg); -o-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } .grid-load-more a:hover::after { border-color: #5b626d } .grid-load-more.end-reached > * { display: none } .grid-load-more.end-reached::after { background-color: #c4c8c8; content: ''; display: block; height: 1px; left: 50%; margin-left: -50px; position: absolute; top: 50%; width: 100px } /****----- 3.2.6 Collection Filters (Drawer) -----****/ body.etiquette-filters-open { max-width: 100%; min-width: 100%; overflow: hidden } body.etiquette-filters-open .collection-header-bar > .list-style { display: none } #etiquette-filters::before { background-color: rgba(255,255,255,0.95); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1 } #etiquette-filters::after { border-color: rgba(0,0,0,0.1); border-style: solid; border-width: 1px 0; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1 } #etiquette-filters { color: #000000 } #etiquette-filters .etdrwr-main .etdrwr-section { padding-bottom: 30px; padding-top: 30px } #etiquette-filters .etdrwr-bottom .etdrwr-section { overflow: hidden; padding-bottom: 0; padding-top: 20px } #etiquette-filters .etdrwr-bottom .etdrwr-section::before { background: transparent url(//www.etiquetteclothiers.com/cdn/shop/files/eq_logo_round.png?v=1525328411) center top no-repeat; background-size: auto 100%; content: ''; display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; -moz-animation: spin 2s linear infinite; -webkit-animation: spin 2s linear infinite; -o-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #etiquette-filters.loading .etdrwr-bottom .etdrwr-section::before { opacity: 1 } #etiquette-filters.loading .etdrwr-bottom .etdrwr-section > * { visibility: hidden } #etiquette-filters.drawer.loading .etdrwr-bottom { bottom: 20px } #etiquette-filters .heading .show-on-loading, #etiquette-filters.loading .heading .heading-text { display: none } #etiquette-filters.loading .heading { border-color: transparent } #etiquette-filters.loading .heading .show-on-loading { display: block; line-height: 60px; opacity: 0.4 } #etiquette-filters a.clear-all-filters, #etiquette-filters h3 { border: 1px dashed #FFF; font-size: 16px; height: 50px; line-height: 50px; text-align: center; text-transform: uppercase; width: 350px; } #etiquette-filters a.clear-all-filters { border: 0 none; color: rgba(0,0,0,0.4); display: table; margin: 0 auto; width: auto } #filter-results-display .clear-all-filters:hover, #etiquette-filters a.clear-all-filters:hover { color: #000000 } #etiquette-filters .etfilters { margin: 0 auto; max-width: 100%; width: 650px } #etiquette-filters .etfilter + .etfilter { margin-top: 20px } #etiquette-filters .etfilter h4 { border-bottom: 1px solid rgba(0,0,0,0.1); font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.05em; padding-bottom: 10px; margin: 0 0 15px; text-transform: uppercase } #etiquette-filters .etfilter ul { margin: 0; padding: 0 } #etiquette-filters .etfilter ul li { display: block; float: left; padding: 6px 0 6px 27px; width: 25% } #etiquette-filters .etfilter ul li label { font-size: 11px; font-weight: 500; margin: 0; padding-top: 2px } #etiquette-filters .etfilter.filter-color ul li label::before { background-color: transparent; z-index: 1 } #etiquette-filters .etfilter.filter-color ul li label::after { background: linear-gradient(to bottom, transparent 42%, #FFF 42%, #FFF 58%, transparent 58%), linear-gradient(to right, transparent 42%, #FFF 42%, #FFF 58%, transparent 58%); z-index: 2 } #etiquette-filters .etfilter.filter-color ul li label.is-light-color::after { background: linear-gradient(to bottom, transparent 42%, #000 42%, #000 58%, transparent 58%), linear-gradient(to right, transparent 42%, #000 42%, #000 58%, transparent 58%) } #etiquette-filters .etfilter ul li label .cb_bg { display: block; height: 18px; left: -26px; overflow: hidden; position: absolute; top: 1px; width: 18px; z-index: 0 } #etiquette-filters .etfilter ul li label .cb_bg .cb_bg_alt { bottom: 0; display: block; height: 30px; left: 1px; position: absolute; width: 20px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: 0 100%; -webkit-transform-origin: 0 100%; transform-origin: 0 100% } #etiquette-filters .etfilter ul li.more-filters a { font-size: 12px; font-weight: 500; opacity: 0.5 } #etiquette-filters .etfilter ul li.more-filters a:hover { opacity: 1 } #etiquette-filters a.close.close-filters { color: #000000; float: none; font-size: 11px; font-weight: 500; opacity: 1; text-shadow: none; text-transform: uppercase } #etiquette-filters a.close.close-filters:hover { color: #899192 } #etiquette-filters a.close.close-filters::before { border-top: 1px solid #000000; border-left: 1px solid #000000; content: ''; display: block; height: 10px; left: 50%; margin-left: -5px; position: absolute; top: -21px; width: 10px; -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } #etiquette-filters a.close.close-filters:hover::before { border-left-color: #899192; border-top-color: #899192 } body.coll-filters-active #etiquette-filters .label-no-filters-active, #etiquette-filters .label-filters-active { display: none } body.coll-filters-active #etiquette-filters .label-filters-active { display: block } #filter-results-display { background-color: rgba(255,255,255,0.8); border-bottom: 1px solid #e6e6e6; display: none; padding: 8px 0px 20px; opacity: 1; position: absolute; top: calc(100% + 1px); visibility: visible; width: 100%; -moz-transition: opacity 0.3s ease 0s, visibility 0s ease 0s; -webkit-transition: opacity 0.3s ease 0s, visibility 0s ease 0s; -o-transition: opacity 0.3s ease 0s, visibility 0s ease 0s; -ms-transition: opacity 0.3s ease 0s, visibility 0s ease 0s; transition: opacity 0.3s ease 0s, visibility 0s ease 0s; } body.etiquette-filters-open #filter-results-display { opacity: 0; visibility: hidden; -moz-transition: opacity 0.3s ease 0.3s, visibility 0s ease 0.6s; -webkit-transition: opacity 0.3s ease 0.3s, visibility 0s ease 0.6s; -o-transition: opacity 0.3s ease 0.3s, visibility 0s ease 0.6s; -ms-transition: opacity 0.3s ease 0.3s, visibility 0s ease 0.6s; transition: opacity 0.3s ease 0.3s, visibility 0s ease 0.6s; } #filter-results-display .filtered-prod-count { color: #000000 } #filter-results-display .clear-all-filters { color: #899192; display: table; text-transform: uppercase } @media all and (min-width:768px) { #etiquette-filters { /*background-color: rgba(255,255,255,0.95);*/ display: block; overflow: auto } body.etiquette-filters-open #etiquette-filters { height: calc(100vh - 70px) } body.etiquette-filters-open.has-heading-banner #etiquette-filters { height: calc(100vh - 126px) } body.etiquette-filters-open.has-heading-banner.scrolled-down #etiquette-filters { height: calc(100vh - 116px) } body.etiquette-filters-open.has-collection-hero.has-heading-banner #etiquette-filters { height: calc(100vh - 70px) } body.etiquette-filters-open.has-collection-hero.past-collection-hero.has-heading-banner #etiquette-filters { height: calc(100vh - 116px) } #etiquette-filters::before, #etiquette-filters::after { /*display: none*/ } #etiquette-filters > * { display: table; margin: 0 auto } #etiquette-filters > .etdrwr-main { /*top: calc(50% - 30px); -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);*/ } #etiquette-filters > .etdrwr-bottom { bottom: 40px; position: absolute; left: 50%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } } body.collapsible-filters #etiquette-filters { z-index: 4995 } body.collapsible-filters #etiquette-filters .etfilters { padding: 0 10px; overflow-y: auto; width: 100% } body.collapsible-filters #etiquette-filters .etfilter + .etfilter { margin-top: 30px } body.collapsible-filters #etiquette-filters .etfilter h4 { cursor: pointer; margin: 0 0 8px } body.collapsible-filters #etiquette-filters .etfilter h4::after { content: '+'; float: right } body.collapsible-filters #etiquette-filters .etfilter.mobile-open h4::after { content: '-' } body.collapsible-filters #etiquette-filters .etfilter ul { max-height: 0; overflow-x: visible; overflow-y: hidden; visibility: hidden; -moz-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; } body.collapsible-filters #etiquette-filters .etfilter.mobile-open ul { max-height: 400px; visibility: visible; -moz-transition: visibility 0s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s, max-height 0.3s ease 0s; -o-transition: visibility 0s, max-height 0.3s ease 0s; -ms-transition: visibility 0s, max-height 0.3s ease 0s; transition: visibility 0s, max-height 0.3s ease 0s; } @media all and ((max-width:1199px) or (max-height:750px)) { #etiquette-filters { z-index: 4995 } #etiquette-filters .etfilters { padding: 0 10px; overflow-y: auto; width: 100% } #etiquette-filters .etfilter + .etfilter { margin-top: 30px } #etiquette-filters .etfilter h4 { cursor: pointer; margin: 0 0 8px } #etiquette-filters .etfilter h4::after { content: '+'; float: right } #etiquette-filters .etfilter.mobile-open h4::after { content: '-' } #etiquette-filters .etfilter ul { max-height: 0; overflow-x: visible; overflow-y: hidden; visibility: hidden; -moz-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; } #etiquette-filters .etfilter.mobile-open ul { max-height: 400px; visibility: visible; -moz-transition: visibility 0s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s, max-height 0.3s ease 0s; -o-transition: visibility 0s, max-height 0.3s ease 0s; -ms-transition: visibility 0s, max-height 0.3s ease 0s; transition: visibility 0s, max-height 0.3s ease 0s; } } @media all and (max-width:767px) { body.coll-filters-active .collection-header-bar .filtered-prod-count, body.coll-filters-active .collection-header-bar .clear-all-filters, body.coll-filters-active .collection-header-bar > .has-filters-btn > :nth-child(n+2)::before { display: none } #etiquette-filters { display: block; min-height: calc(100% - 50px); z-index: 4000 /*z-index: 4990*/ } body.etiquette-filters-open #etiquette-filters { min-height: calc(100% - 50px) } body.etiquette-filters-open.has-heading-banner #etiquette-filters { min-height: calc(100% - 85px) } body.etiquette-filters-open.has-heading-banner.scrolled-down #etiquette-filters { min-height: calc(100% - 75px) } body.etiquette-filters-open.has-collection-hero.has-heading-banner #etiquette-filters { min-height: calc(100% - 85px) } body.etiquette-filters-open.has-collection-hero.past-collection-hero.has-heading-banner #etiquette-filters { min-height: calc(100% - 75px) } #etiquette-filters.drawer .etdrwr-section { padding: 10px } #etiquette-filters.drawer .etdrwr-top { display: none } #etiquette-filters .etdrwr-main { display: block; height: 100%; left: 0; padding-bottom: 60px; position: absolute; top: 10px; width: 100% } #etiquette-filters .etdrwr-main .etdrwr-section { display: block; height: 100%; padding-bottom: 10px; padding-left: 0; padding-right: 0; vertical-align: top } #etiquette-filters.drawer .etdrwr-bottom, #etiquette-filters.drawer .etdrwr-bottom > .etdrwr-section { bottom: 0; display: block; left: 0; position: absolute; width: 100% } #etiquette-filters .close { opacity: 1; z-index: 1 } #etiquette-filters .etdrwr-top .close { display: none } #etiquette-filters .filter-results-display { max-height: 0; overflow-y: hidden; visibility: hidden; -moz-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; } body.coll-filters-active #etiquette-filters .filter-results-display { max-height: 100px; visibility: visible; -moz-transition: visibility 0s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s, max-height 0.3s ease 0s; -o-transition: visibility 0s, max-height 0.3s ease 0s; -ms-transition: visibility 0s, max-height 0.3s ease 0s; transition: visibility 0s, max-height 0.3s ease 0s; } body.coll-filters-active.filtering-products #etiquette-filters .filter-results-display { max-height: 0; visibility: hidden; -moz-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; transition: visibility 0s ease 0.3s, max-height 0.3s ease 0s; } #filter-results-display .filtered-prod-count, #etiquette-filters .filter-results-display .filtered-prod-count { display: block; font-size: 14px; font-weight: 500; line-height: 1.8em; padding-top: 15px; text-align: center; text-transform: uppercase } #filter-results-display .clear-all-filters, #etiquette-filters .filter-results-display .clear-all-filters { font-size: 12px; font-weight: 500; height: auto; line-height: 1.6em; margin: 10px auto 5px } #etiquette-filters .etfilter ul li { padding: 2px 0 2px 37px; width: 50% } #etiquette-filters .etfilter ul li label { line-height: 30px; white-space: nowrap } #etiquette-filters .fancy-checkbox [type="checkbox"] + label::before { height: 30px; left: -37px; top: 2px; width: 30px } #etiquette-filters .etfilter ul li label .cb_bg { height: 28px; left: -36px; top: 3px; width: 28px } #etiquette-filters .etfilter ul li label .cb_bg .cb_bg_alt { height: 40px } #etiquette-filters .fancy-checkbox [type="checkbox"] + label::after { height: 17px; left: -30px; top: 8px; width: 17px } #etiquette-filters .etfilter ul li[class*="hidden"] { height: 36px } #etiquette-filters .etdrwr-bottom .etdrwr-section { height: 50px; padding: 0 } #etiquette-filters .etdrwr-bottom .btn.close { font-size: 14px; font-weight: normal; height: 50px; line-height: 50px; text-shadow: none } body.coll-filters-active #filter-results-display { display: block } } /****----- 3.2.7 Search Filters (Search Page) -----****/ #grid-filters { padding-bottom: 40px; padding-top: 40px; text-align: center } #grid-filters a { color: #899192; display: inline-block; font-size: 11px; font-weight: 500; line-height: 2em; padding: 0 0.5em; text-transform: uppercase; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } #grid-filters a.active { color: #000000 } /****----- 3.3 Product Page -----****/ #product-wrap #product-thumbs figure { padding: 50px 0 } #product-wrap #product-thumbs a { display: block } #product-wrap #product-thumbs a + a::before { background-color: #c4c8c8; content: ''; display: block; height: 1px; left: 50%; margin-left: -30px; position: absolute; top: 0; width: 60px } #product-wrap #product-thumbs figure img { cursor: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' height='35' width='35' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 35 35' style='enable-background:new 0 0 35 35;' xml:space='preserve'%3E%3Cg%3E%3Ccircle fill='%23231F20' cx='17.5' cy='17.5' r='17.5'/%3E%3Cpath fill='%23FFFFFF' d='M25.8,18.4h-7.4v7.2h-1.8v-7.2H9.2v-1.7h7.4V9.4h1.8v7.2h7.4V18.4z'/%3E%3C/g%3E%3C/svg%3E"), pointer; height: auto; width: 100% } #product-wrap #product-thumbs a figure.has-product-video-thumb::before { background-color: rgba(0,0,0,0.2); bottom: 50px; content: ''; display: block; left: 0; position: absolute; right: 0; top: 50px; z-index: 1; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } #product-wrap #product-thumbs a:hover figure.has-product-video-thumb::before { background-color: rgba(0,0,0,0.4) } #product-wrap #product-thumbs a figure.has-product-video-thumb .play-btn { display: table; left: 50%; position: absolute; top: 50%; z-index: 5; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #product-wrap #product-thumbs a figure.has-product-video-thumb .play-btn svg .fill-circle { stroke-dasharray: 80px; stroke-dashoffset: 80px; -moz-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); -webkit-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); -o-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); -ms-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); } #product-wrap #product-thumbs a:hover figure.has-product-video-thumb .play-btn svg .fill-circle { stroke-dasharray: 145px } #product-wrap #product-thumbs a:hover figure.has-product-video-thumb .play-btn svg polyline { fill: #010101 } #product-wrap #product-details { letter-spacing: 0.05em; padding-top: 60px; padding-bottom: 50px } #product-wrap #product-details h1.page-heading { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: normal; letter-spacing: 0.05em; margin-top: 0; text-align: center } #product-wrap #product-details h1.page-heading .nice-color { color: #899192; display: block; font-size: 14px; font-weight: normal; margin-top: 12px } #product-carousel .carousel-inner > .item > img { display: block; margin: 0 auto } #product-carousel a.carousel-control { bottom: 5px; cursor: pointer; top: auto } #product-carousel a.carousel-control:hover svg .stroke-color { stroke: #000000; stroke-width: 2px } #product-carousel .carousel-indicators { bottom: 10px } #product-carousel .carousel-indicators li { background-color: #FFF; border: 1px solid #000000; cursor: pointer; margin: 0 12px } #product-carousel .carousel-indicators li.active { background-color: #000; height: 10px; margin: 0 12px; width: 10px } #product-carousel .item.prod-video-carousel-item .prod-video-iframe-wrap { padding-top: 56.25% } #product-carousel .item.prod-video-carousel-item .prod-video-iframe-wrap iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } .modal.has-full-carousel, .modal.has-full-carousel .modal-backdrop, #product-zoom { cursor: url("data:image/svg+xml,%3Csvg version='1.1' height='35' width='35' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 35 35' style='enable-background:new 0 0 35 35;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cpath d='M22.5,23.7l-5-5l-4.9,4.9l-1.2-1.2l4.9-4.9l-5-5l1.1-1.1l5,5l4.9-4.9l1.2,1.2l-4.9,4.9l5,5L22.5,23.7z'/%3E%3C/g%3E%3C/g%3E%3Cg%3E%3Cpath fill='%23231F20' d='M17.5,35C7.9,35,0,27.1,0,17.5C0,7.8,7.9,0,17.5,0S35,7.8,35,17.5C35,27.1,27.1,35,17.5,35z M17.5,1.4%0AC8.6,1.4,1.4,8.6,1.4,17.5c0,8.9,7.2,16.1,16.1,16.1c8.9,0,16.1-7.2,16.1-16.1C33.6,8.6,26.4,1.4,17.5,1.4z'/%3E%3C/g%3E%3C/svg%3E"), pointer; } #product-zoom .configned-carousel-indicators, #product-zoom .carousel-indicators { bottom: auto; left: auto; margin: 0 40px 0 0; right: 100%; top: 0; width: 75px } #product-zoom .carousel-indicators .active, #product-zoom .carousel-indicators li { background-color: #FFF; border-radius: 0; display: block; height: auto; margin: 0; padding-top: 100%; width: 100%; } #product-zoom .carousel-indicators li + li.active, #product-zoom .carousel-indicators li + li { margin-top: 12px } #product-zoom .carousel-indicators li img { display: block; height: 100%; left: 0; opacity: 0.7; position: absolute; top: 0; width: 100%; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } #product-zoom .carousel-indicators li.active img { opacity: 1 } #product-zoom .configned-carousel-indicators { height: 435px; max-height: calc(50% - 65px); position: absolute } #product-zoom .configned-carousel-indicators .carousel-indicators-wrap { height: 100%; left: 0; overflow: hidden; position: absolute; top: 0; width: 100%; } #product-zoom .configned-carousel-indicators .carousel-indicators { left: 0; margin: 0; right: auto } #product-zoom .configned-carousel-indicators > a { display: block; height: 20px; left: 0; position: absolute; top: -25px; width: 100% } #product-zoom .configned-carousel-indicators > a.down { bottom: -25px; top: auto } #product-zoom .configned-carousel-indicators > a svg { display: table; margin: 0 auto } #product-zoom .configned-carousel-indicators > a svg polygon { stroke: rgba(255,255,255,0); stroke-width: 0.5px } #product-zoom .configned-carousel-indicators > a:hover svg polygon { stroke: rgba(255,255,255,1) } #product-zoom .item.prod-video-carousel-item { background-color: #000; padding-top: 100% } #product-zoom .item.prod-video-carousel-item .prod-video-iframe-wrap { left: 0; padding-top: 100%; position: absolute; top: 50%; width: 100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #product-zoom .item.prod-video-carousel-item .prod-video-iframe-wrap iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100% } #product-zoom .carousel-indicators li.prod-video-carousel-item-thumb::after { background-color: rgba(0,0,0,0.5); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } #product-zoom .carousel-indicators li.prod-video-carousel-item-thumb .play-btn { display: table; left: 0; position: absolute; top: 50%; width: 100%; z-index: 2; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #product-zoom .carousel-indicators li.prod-video-carousel-item-thumb .play-btn svg { display: table; height: 30px; margin: 0 auto; width: 30px } #product-zoom .carousel-indicators li.prod-video-carousel-item-thumb .play-btn svg circle:nth-child(2) { stroke: #000 } #product-details .product-price { color: #000000; margin-top: 40px; text-align: center } #product-details .product-price [class*="price-"] { display: inline-block; margin: 0 4px } #product-details .product-price .price-discounted { color: #C00 } #product-wrap.on-sale #product-details .product-price .price-regular { color: #899192; font-weight: 400; text-decoration: line-through } #product-details .product-options { text-align: center; width: 100% } #product-details .product-options.colors { margin: 50px 0 40px } #product-details .product-options.options-qty { margin: 20px 0 } #product-details .product-options .prod-options, #product-details .product-options .prod-options + .prod-quantity { width: 50% } body.waiting-for-scripts #product-details .product-options .prod-quantity { visibility: hidden } #product-details .option-selector label { margin-bottom: 10px } #product-details .option-selector[data-optionname="Color"] ul.options li { border-bottom: 2px solid transparent; display: block; float: left; padding-bottom: 8px } #product-details .option-selector[data-optionname="Color"] ul.options li.active { border-bottom-color: #000000 } #product-details .option-selector[data-optionname="Color"] ul.options:hover li.active { border-bottom-color: transparent } #product-details .option-selector[data-optionname="Color"] ul.options:hover li:hover { border-bottom-color: #000000 } #product-details .option-selector[data-optionname="Color"] ul.options li + li { margin-left: 20px } #product-details .option-selector[data-optionname="Color"] ul.options li a { background: rgba(0,0,0,0.1) none center center no-repeat; background-size: cover; display: table; height: 30px; width: 30px; } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li { display: inline-block } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li + li { margin-left: 15px } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li a { display: block; padding: 0 6px } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li:hover a::after, #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li.active a::after { background-color: #000000; bottom: -2px; content: ''; display: block; height: 2px; left: 0; position: absolute; width: 100% } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options:hover li.active a::after, #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li.not-available:hover a::after, #product-details .product-options.options-qty .option-selector[data-optionname] ul.options[data-sizeoptionscount="1"] li.active a::after { background-color: transparent } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options:hover li.active:hover a::after { background-color: #000000 } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li.not-available { opacity: 0.4 } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li.not-available a { cursor: default } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li a, #product-details .option-selector.quantity .numerified a, #product-details .option-selector.quantity input { color: #000000; font-size: 14px; line-height: 30px; height: 30px } #product-details .product-add-to-cart, #product-details #product-specs { margin-left: auto; margin-right: auto; max-width: 100%; width: 500px } #product-details .product-add-to-cart { margin-top: 40px } #product-details .btn-out-of-stock, #product-details .btn-add-to-cart { font-size: 14px; height: 44px; line-height: 44px; text-transform: uppercase } #product-details .btn-add-to-cart[disabled]:focus, #product-details .btn.btn-add-to-cart:hover { background-color: #899192 } #product-details .btn.btn-out-of-stock:hover, #product-details .btn.btn-out-of-stock[disabled], #product-details .btn.btn-out-of-stock { background-color: #db4d07; color: #FFF; opacity: 1 } #product-details .btn.btn-add-to-cart.added { background-color: #5b626d } #product-details .add-to-cart-status .alert { font-size: 12px; letter-spacing: 0.05em } #product-details #product-specs { border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 0; margin-top: 60px } #product-details .panel-group .panel { border: 0 none } #product-details .panel-group .panel + .panel { margin: 0; padding: 0 } #product-details .panel-group .panel-default > .panel-heading { background-color: transparent; border: 0 none; padding: 0 } #product-details .panel-group .panel .panel-heading a { border-top: 1px solid rgba(0,0,0,0.1); color: #000000; display: block; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: normal; letter-spacing: 0.05em; line-height: 15px; padding: 22px 0; text-transform: uppercase } #product-details .panel-group .panel .panel-heading a::after { content: '-'; display: block; right: 0; position: absolute; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #product-details .panel-group .panel .panel-heading a.collapsed::after { content: '+' } #product-details .panel-default > .panel-heading + .panel-collapse > .panel-body { border-top: 0 none; color: #899192; font-size: 12px; line-height: 1.7em; padding: 0 0 60px } #product-details [id^="shopify-section-size-guide-"] .additional-info { font-size: 12px } #product-details table#size-guide { color: #000000; margin: 20px 0 0 } #product-details table#size-guide tr td { border-top: 1px solid #e6e6e6; padding: 12px 8px } #product-details table#size-guide tr td + td { border-left: 1px solid #e6e6e6 } #product-details table#size-guide tr:last-child td { border-bottom: 1px solid #e6e6e6 } #product-details #spec-share a { display: inline-block } #product-details #spec-share a + a { margin-left: 40px } #product-details #spec-share a svg { display: block } #product-details #spec-share a:hover svg .fill-color { fill: #5b626d } .svg-social-email { -moz-transform: translateX(-10px); -webkit-transform: translateX(-10px); -o-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } #product-wrap #related-recent .nav-tabs { border: 0 none } #product-wrap #related-recent .nav-tabs > li + li { margin-left: 40px } #product-wrap #related-recent .nav-tabs > li + li::before { color: #000000; content: '/'; display: block; left: -22px; position: absolute; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #product-wrap #related-recent .nav-tabs > li > a { border: 0 none; color: #899192; font-size: 12px; letter-spacing: 0.05em; margin: 0; padding-left: 0; padding-right: 0; text-transform: uppercase } #product-wrap #related-recent .nav-tabs > li.active > a { color: #000000; font-weight: 500 } #product-wrap #related-recent .nav > li > a:hover { background-color: transparent } #product-wrap .product-free-shipping-msg { border-color: #c4c8c8; border-style: solid; border-width: 1px 0; color: #000000; display: table; font-style: italic; letter-spacing: 0.05em; margin: 20px auto; padding: 8px 15px; } @media all and (max-width:1300px) { .modal.has-full-carousel .modal-dialog { margin-left: 150px; margin-right: 150px; width: auto } } @media all and (min-width:1200px) { #product-wrap .has-product-images { padding-right: 45px } #product-wrap .has-product-details { padding-left: 45px } #product-wrap > .row.has-product { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; min-height: calc(100vh - 125px) } #product-wrap #product-details { position: fixed; top: 70px; -moz-transition: top 0.3s ease 0s, bottom 0.3s ease 0s; -webkit-transition: top 0.3s ease 0s, bottom 0.3s ease 0s; -o-transition: top 0.3s ease 0s, bottom 0.3s ease 0s; -ms-transition: top 0.3s ease 0s, bottom 0.3s ease 0s; transition: top 0.3s ease 0s, bottom 0.3s ease 0s; } #product-wrap .no-floating #product-details { position: relative } body.scrolled-down #product-wrap #product-details { top: 70px } body.has-heading-banner #product-wrap #product-details { top: 125px } body.has-heading-banner.shrink-heading-banner #product-wrap #product-details { top: 115px } body.has-heading-banner.shrink-heading-banner #product-wrap .fix-floating-col-at-bottom #product-details { bottom: 0; position: absolute; top: auto } body.has-heading-banner #product-wrap .no-floating #product-details, body.has-heading-banner.shrink-heading-banner #product-wrap .no-floating #product-details, body.has-heading-banner.shrink-heading-banner #product-wrap .no-floating.fix-floating-col-at-bottom #product-details { bottom: auto; position: relative; top: 0 } } @media all and (max-width:1199px) { body.template-product.shrink-heading-banner #heading-banner .heading-banner-wrap:hover #page-heading { opacity: 1 } body.template-product.shrink-heading-banner #heading-banner .heading-banner-wrap:hover .back-to-top { opacity: 0; visibility: hidden } body.template-product { padding-bottom: 40px } body.template-product.product-has-options { padding-bottom: 65px } #product-wrap #product-thumbs figure { padding: 10px 0 } #product-carousel { cursor: pointer; margin: 15px 0 5px; padding-bottom: 35px } #product-carousel .carousel-inner > .item > img { max-height: 70vh } #product-carousel a.carousel-control { display: none } #product-carousel .carousel-indicators { bottom: -7px; margin-left: 0; width: 100%; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #product-carousel .carousel-indicators li.active, #product-carousel .carousel-indicators li { height: 10px; margin: 0 7px; vertical-align: middle; width: 10px } #product-carousel .carousel-indicators li img { display: none } #product-carousel .item.prod-video-carousel-item .prod-video-iframe-wrap::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10 } #product-carousel .item.prod-video-carousel-item .prod-video-iframe-wrap.show-video::before { display: none } #product-wrap #product-details { padding-bottom: 20px; padding-top: 20px } #product-wrap #product-details.vfs-float.vfs-float-via-position { -moz-transform: none !important; -webkit-transform: none !important; -o-transform: none !important; -ms-transform: none !important; transform: none !important; } #product-details .product-options .prod-options { background-color: #5b626d; bottom: 60px; color: #FFF; font-size: 14px; font-weight: 500; height: 35px; left: 0; line-height: 35px; opacity: 0; padding: 0 15px; position: fixed; text-align: left; width: 100%; z-index: 100; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } body.loading-anim-complete #product-details .product-options .prod-options { opacity: 1 } #product-details .product-options .prod-options .option-selector label { display: none } #product-details .product-options.options-qty { margin: 15px 0 0 } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li + li { margin-left: 7px } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li a { color: #FFF; font-size: 14px; font-weight: 500; height: 35px; line-height: 35px; text-transform: uppercase } #product-details .product-options.options-qty .option-selector[data-optionname] ul.options:hover li.active a::after, #product-details .product-options.options-qty .option-selector[data-optionname] ul.options:hover li.active:hover a::after, #product-details .product-options.options-qty .option-selector[data-optionname] ul.options li.active a::after { background-color: #FFF; bottom: 3px; height: 1px } #product-details .product-price { bottom: 60px; color: #FFF; font-size: 14px; font-weight: 500; line-height: 35px; position: fixed; right: 15px; z-index: 101 } #product-details .product-options .prod-options + .prod-quantity { display: block; width: 100% } #product-details .product-options .prod-quantity label { color: #000000; font-size: 14px; margin-bottom: 15px } #product-details .option-selector.quantity .numerified a, #product-details .option-selector.quantity input { font-size: 14px; line-height: 20px; height: 20px; vertical-align: top; display: inline-block; bottom: auto } #product-details .numerified-skin-plus-minus .numerified a.dec::before, .numerified-skin-plus-minus .numerified a.inc::before { line-height: 20px } #product-details .product-options.colors { margin: 34px 0 38px } #product-details .option-selector label { margin-bottom: 2px } #product-details .option-selector[data-optionname="Color"] ul.options li { padding-bottom: 3px } #product-details .option-selector[data-optionname="Color"] ul.options li + li { margin-left: 18px } #product-details .option-selector[data-optionname="Color"] ul.options li a { height: 25px; width: 25px } #product-details .product-add-to-cart { margin: 0 } #product-details .btn.btn-add-to-cart:hover { background-color: #9097A0 } body.is-ios #product-details .btn.btn-add-to-cart:hover { background-color: #000000 } #product-details .btn-add-to-cart, #product-details .btn-add-to-cart[disabled], #product-details .btn-out-of-stock { bottom: 0; font-size: 14px; height: 60px; left: 0; line-height: 50px; opacity: 0; padding: 0; position: fixed; width: 100%; z-index: 100 } #product-details .btn-add-to-cart:not([disabled]) { background-color: #390 } body.loading-anim-complete #product-details .btn-add-to-cart[disabled], body.loading-anim-complete #product-details .btn-add-to-cart, body.loading-anim-complete #product-details .btn-out-of-stock { opacity: 1 } #product-details .btn-add-to-cart[disabled]:before { background-color: #FFF; content: ''; display: block; height: 100%; left: 0; opacity: 0.4; position: absolute; top: 0; width: 100% } #product-details #product-specs { margin-top: 20px; max-width: 100%; width: 100% } #product-details .panel-group .panel .panel-heading a { font-size: 11px; font-weight: 500; padding: 12px 0 } #product-details .panel-group .panel .panel-heading a::after { right: 0 } #product-details .panel-default > .panel-heading + .panel-collapse > .panel-body { font-size: 11px; padding: 0 0 20px } #product-details table#size-guide { max-width: 100% } #product-details table#size-guide tr td:first-child { max-width: 60px } #product-details table#size-guide tr td { padding: 7px 0 } #product-details #spec-share a svg { height: 20px; width: auto } #product-wrap .product-free-shipping-msg { font-size: 9px; padding: 6px 10px } #product-wrap #related-recent .nav-tabs > li > a { font-size: 11px } .owlize.recent-products-placeholder:not(.owl-loaded) .collection-grid-item:nth-child(n+5) { display: none } #related-recent .owl-carousel .collection-grid-item { float: none; margin: 30px auto; min-width: 80%; max-width: 90% } #related-recent .owl-carousel.generic-owl-nav .owl-nav > .owl-prev { left: auto; right: 50px; top: -15px } #related-recent .owl-carousel.generic-owl-nav .owl-nav > .owl-next { right: 40px; top: -15px } #related-recent .owl-carousel .owl-nav > [class^="owl-"] svg line { stroke-dashoffset: 0 } } /****----- 3.3.1 Product Header Bar -----****/ .product-header-bar .has-links { left: 0; position: absolute; top: 0 } .product-header-bar .has-links.prev-next-prod { left: auto; right: 0 } .product-header-bar .has-links a { display: inline-block; font-size: 10px; height: 20px; line-height: 20px; padding: 0 0.5em; text-transform: uppercase } .product-header-bar .has-links a + a { margin-left: 10px } #header .product-header-bar .has-links a svg { height: 10px; width: 10px } .product-header-bar .has-links a:hover svg .fill-color { fill: #000000 } @media all and (min-width:768px) { .product-header-bar .has-links.prev-next-prod { right: 10px } } @media all and (max-width:767px) { .product-header-bar .has-links { top: 2px } } /****----- 3.3.2 Collection/Product Breadcrumb -----****/ .coll-breadcrumb { display: none } @media all and (min-width:991px) { body.template-product .product-header-bar .has-links.back-to-coll { display: none } .collection-header-bar > .coll-breadcrumb + .list-style { left: auto; right: 2px } .collection-header-bar > .coll-breadcrumb + .list-style + .has-filters-btn { right: 60px } .coll-breadcrumb { background-color: transparent; color: #899192; display: block; font-size: 10px; line-height: 1em; margin: 0 0 0 7px; padding: 0; position: absolute; text-transform: capitalize; top: 10px; width: 30vw } .coll-breadcrumb .breadcrumb-items-wrap { position: absolute; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .coll-breadcrumb a:hover { color: #000000 } .coll-breadcrumb .sep { margin: 0 4px } } /****----- 3.4 Blog Pages -----****/ #blog-listing .blog-grid-item.offset { -moz-transform: translateY(40px); -webkit-transform: translateY(40px); -o-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } #blog-listing .article { background-color: #f7f7f9; margin: 30px 10px } #blog-listing .article .article-image { display: block; height: auto; overflow: hidden; padding-top: 65% } #blog-listing .article .article-image img { display: block; height: auto; left: 0; position: absolute; top: 0; width: 100% } #blog-listing .article .excerpt-wrap { font-size: 11px; height: 165px; letter-spacing: 0.05em; padding: 15px 20px; text-align: center } #blog-listing .article .excerpt-wrap h3 { font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: normal; letter-spacing: 0.05em; margin: 5px 0 20px; text-transform: uppercase } #blog-listing .article .excerpt-wrap p { line-height: 1.8em; margin: 10px 15px } #blog-listing .article .excerpt-wrap .read-more { color: #899192; display: table; font-style: italic; margin: 20px auto 0; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } #blog-listing .article .excerpt-wrap .read-more:hover { color: #000000 } body.template-blog .grid-load-more { height: auto; margin: 60px 0 0 } body.template-blog .grid-load-more a { border: 1px solid #e6e6e6; border-radius: 30px; font-size: 12px; height: 30px; letter-spacing: 0.05em; line-height: 30px; padding: 0 30px; -moz-transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s, color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s, color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s, color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s, color 0.3s ease 0s; transition: background-color 0.3s ease 0s, border-color 0.3s ease 0s, color 0.3s ease 0s; } body.template-blog .grid-load-more a:hover { background-color: #899192; border-color: #899192; color: #FFF } body.template-blog .grid-load-more.end-reached[data-direction="forward"] { display: none } body.template-blog .grid-load-more::after, body.template-blog .grid-load-more a::after { display: none } #blog-article .captioned-image { background-color: #EEE; color: #899192; display: table; margin: 0 0 20px; padding: 15px; width: auto } #blog-article .captioned-image img { display: table; margin: 0 0 10px } .modal .article-image img { height: auto; width: 100% } .modal .article-image img + img { margin-top: 10px } .has-newsletter-social h4 { color: #0b4f79; font-weight: bold } #instagram-items .section-heading { margin-top: 60px; padding-bottom: 30px; padding-top: 60px } #instafeed { padding: 10px 0 } #instafeed .instafeed-item { margin-top: 15px; margin-bottom: 15px; } #instafeed .instafeed-item a { background: transparent none center center no-repeat; background-size: cover; display: block; height: auto; padding-top: 100%; width: 100%; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } #instafeed .instafeed-item.has-image a:hover { opacity: 0.8 } #instafeed .instafeed-item.type-carousel a::before { background: transparent url(//www.etiquetteclothiers.com/cdn/shop/t/2/assets/icon-instagram-carousel.png?v=87707985978272017981524822748) 0 0 no-repeat; content: ''; display: block; height: 48px; position: absolute; right: 0; top: 0; width: 48px; z-index: 1; } #instafeed .instafeed-item a .hover-drop { background-color: rgba(143,149,158,0.5); display: block; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 5; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } #instafeed .instafeed-item a:hover .hover-drop { opacity: 1 } #instafeed .instafeed-item a .hover-drop svg { display: block; position: absolute; top: 50%; left: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #instafeed .instafeed-item a img { height: auto; left: 0; position: absolute; top: 0; width: 100% } #instafeed .instafeed-item.last-item a { background-color: #5b626d; color: #FFF; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } #instafeed .instafeed-item.last-item a:hover { background-color: #db4d07 } #instafeed .instafeed-item.last-item a .wrap { display: block; position: absolute; top: 50%; left: 50%; width: 65%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #instafeed .instafeed-item.last-item a .text { display: block; font-size: 21px; font-weight: 300; line-height: 2.2em; text-transform: uppercase } #instafeed .instafeed-item.last-item a svg { margin-left: 0; top: 10px; -moz-transition: margin-left 0.3s ease 0s; -webkit-transition: margin-left 0.3s ease 0s; -o-transition: margin-left 0.3s ease 0s; -ms-transition: margin-left 0.3s ease 0s; transition: margin-left 0.3s ease 0s; } #instafeed .instafeed-item.last-item a:hover svg { margin-left: calc(100% - 67px) } @media all and (max-width:1199px) { #blog-listing > .row.flexize { display: block } } @media all and (max-width:991px) { #blog-listing .blog-grid-item.offset { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } @media all and (max-width:767px) { #blog-listing .article { margin: 45px 0 0 } #blog-listing .article .excerpt-wrap .read-more { font-style: normal; text-decoration: underline } body.template-blog .grid-load-more { margin-top: 30px } body.template-blog .grid-load-more a { font-size: 10px; height: 24px; line-height: 24px } #instafeed .instafeed-item { margin-bottom: 0px; margin-top: 0px; padding: 5px } #instagram-items .section-heading { font-size: 34px; margin-top: 36px; padding-top: 25px } #instagram-items .section-heading-sub { display: none } #instafeed .instafeed-item.last-item a { background-color: #899192 } #instafeed .instafeed-item.last-item a .text { font-size: 17px; line-height: 32.88px } #instafeed .instafeed-item a .hover-drop { display: none } } /****----- 3.5 Cart Page -----****/ body.template-cart #heading-banner #page-heading { line-height: 1.4em; padding-top: 8px } body.template-cart.logged-in #heading-banner #page-heading { padding-bottom: 8px } body.template-cart.shrink-heading-banner #heading-banner #page-heading, body.template-cart.logged-in.shrink-heading-banner #heading-banner #page-heading { padding: 0 } body.template-cart #heading-banner .back-to-top { line-height: 30px } #heading-banner .cart-already-reg-msg { font-size: 20px; line-height: 1.6em; padding-bottom: 8px } #heading-banner .cart-already-reg-msg span { font-weight: normal; font-style: italic } #heading-banner .cart-already-reg-msg a { text-decoration: underline } #heading-banner .cart-already-reg-msg a:hover { text-decoration: none } body.template-cart #content { padding-top: 44px } body.template-cart.logged-in #content { padding-top: 24px } #empty-cart .free-shipping-note h4 { font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: 14px } #content .free-shipping-note h4 { color: #899192 } #content .free-shipping-note p { color: #899192; letter-spacing: 0.05em; line-height: 1.8em } #checkout-cart { font-size: 12px; letter-spacing: 0.05em; padding-top: 50px } h2.page-section-heading { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; letter-spacing: 0.1em; margin: 0; height: 40px; line-height: 40px; text-align: center; text-transform: uppercase } h2.page-section-heading.w-borders { border-color: #c4c8c8; border-style: solid; border-width: 1px 0 } #cart-items, #cart-summary { margin: 0 0 30px } #cart-items * { font-size: 12px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase } #cart-items .head-row > * { border-color: #c4c8c8; border-style: solid; border-width: 1px 0; color: #000; height: 35px; line-height: 35px } #cart-items .head-row > *:first-child { text-indent: 25px } #cart-items .item-row > * { border-bottom: 1px dotted #c4c8c8; color: #5b626d; line-height: 1.6em; padding-bottom: 15px; padding-top: 15px } #cart-items .line-item-thumb { width: 100px } #cart-items .line-item-descr { padding-left: 20px } #cart-items .line-item-qty { width: 100px } #cart-items .line-item-price, #cart-items .line-item-subtotal { width: 85px } #cart-items .line-item-remove { width: 70px } #cart-items .line-item-qty, #cart-items .line-item-price, #cart-items .line-item-subtotal, #cart-items .line-item-remove { text-align: center } #cart-items .line-item-thumb a { display: block } #cart-items .line-item-thumb a .product-image { background: transparent none center center no-repeat; background-size: contain; display: block; height: auto; padding-top: 100%; width: 100% } #cart-items .line-item-descr h4 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-weight: normal; letter-spacing: 0.05em; line-height: inherit; margin: 0; text-transform: none } #cart-items .line-item-descr .nice-color { font-weight: normal; text-transform: none } #cart-items .line-item-descr .sku { margin-top: 5px } #cart-items .line-item-descr .option { bottom: 15px; left: 20px; position: absolute } #cart-items .line-item-descr .option > * { display: inline-block; text-transform: none } #cart-items .line-item-descr .option .value { font-weight: normal } #cart-items .line-item-qty .numerified { display: table; margin: 0 auto } #cart-items .line-item-remove a { display: inline-block; height: 16px; padding: 2px; width: 16px } #cart-items.minimal-selectize .selectize-control { width: 40px } #cart-items.minimal-selectize .selectize-control, #cart-items.minimal-selectize .selectize-control * { height: auto } #cart-items.minimal-selectize .selectize-input { min-height: auto; padding: 0 } #cart-items.minimal-selectize .selectize-input > .item { float: right; margin-right: 20px } body.template-cart #content .currency-picker__wrapper { display: inline-block; font-size: 12px; font-weight: 500; line-height: 1em; letter-spacing: 0.05em } body.template-cart #content .currency-picker__wrapper::before { content: '('; display: inline-block } body.template-cart #content .currency-picker__wrapper::after { content: ')'; display: inline-block } body.template-cart #content .currency-picker__wrapper .selectize-control { display: inline-block; height: auto; line-height: inherit } body.template-cart #content .currency-picker__wrapper .selectize-control.single .selectize-input { background-color: transparent; border: 0 none; height: auto; line-height: inherit; padding: 0 12px 0 0; min-height: auto; vertical-align: top } body.template-cart #content .currency-picker__wrapper .selectize-control.single .selectize-input::after { border-width: 5px 3px 0; right: 3px } body.template-cart #content .currency-picker__wrapper .selectize-control.single .selectize-input.dropdown-active::after { border-width: 0 3px 5px } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-input.focus { box-shadow: none } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-input input { display: none !important } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-dropdown { background-color: #5b626d; border: 0 none; border-radius: 0; color: #FFF; left: 50% !important; margin-left: -26px; margin-top: 7px; min-width: 52px; top: 100% !important } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-dropdown::before { border-bottom: 4px solid #5b626d; border-left: 4px solid transparent; border-right: 4px solid transparent; content: ''; display: block; left: 50%; position: absolute; margin-left: -4px; top: -4px } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-dropdown .option { font-size: 11px; padding: 2px 0 } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-dropdown .option.active { background-color: transparent; color: #FFF } body.template-cart #content .currency-picker__wrapper .selectize-control .selectize-dropdown .option.selected { background-color: transparent; color: #FFF } #cart-summary { border-top: 1px solid #c4c8c8 } #cart-summary .totals { border-bottom: 1px dotted #c4c8c8; padding-bottom: 5px } #cart-summary .totals p { color: #000000; font-size: 12px; font-weight: 500; line-height: 26px; margin: 4px 0 0; text-transform: uppercase } #cart-summary .wrong-region-note { border: 1px dashed #ed6623; color: #899192; display: none; font-size: 10px; font-style: italic; line-height: 24px; margin: 20px 0 25px; padding: 10px 10px 12px; text-align: center } #cart-summary .wrong-region-note .your-country { color: #000; font-style: normal; font-weight: bold } #cart-summary .wrong-region-note a { text-decoration: underline } #cart-summary .wrong-region-note a:hover { text-decoration: none } #cart-summary .totals-note { color: #5b626d; font-size: 10px; line-height: 1.6em; margin-top: 15px; text-align: center } #cart-summary .totals-note img { display: table; height: auto; margin: 0 auto 20px; max-width: 100%; width: auto; } #cart-summary .totals p.cart-discount-field { display: flex; line-height: 30px } #cart-summary .totals p.cart-discount-field > span.pull-left, #cart-summary .totals p.cart-discount-field .add-discount, #cart-summary .totals p.cart-discount-field > span.added-discount { display: none } #cart-summary .totals p.cart-discount-field a { color: #899192; text-transform: none } #cart-summary .totals p.cart-discount-field a:hover { color: #000000 } #cart-summary .totals p.cart-discount-field.adding a { display: none } #cart-summary .totals p.cart-discount-field.adding .add-discount { display: flex; width: 100% } #cart-summary .totals p.cart-discount-field .add-discount > input { border: 1px solid #c4c8c8; flex-grow: 1; line-height: 28px; padding: 0 10px } #cart-summary .totals p.cart-discount-field .add-discount > button.btn { font-size: 11px; padding: 0; width: 70px } #cart-summary .totals p.cart-discount-field.added a { display: none } #cart-summary .totals p.cart-discount-field > span.pull-left { flex-grow: 1; margin-bottom: 10px; text-align: left } #cart-summary .totals p.cart-discount-field > span.pull-left span { color: #AAA; display: table; font-size: 10px; line-height: 0.7em; text-transform: none } #cart-summary .totals p.cart-discount-field.added > span.pull-left, #cart-summary .totals p.cart-discount-field.added > span.added-discount { display: block } #cart-summary .totals p.cart-discount-field.added > span.added-discount { border-bottom: 1px dotted #c4c8c8; cursor: pointer; height: 24px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap } #cart-summary .totals .cart-totals-note { color: #899192; font-size: 10px; font-style: italic; line-height: 1.6em; margin: 10px 0; text-align: center; text-transform: none } #cart-summary.coupon-applied .totals .cart-totals-note[data-totalsmayvary]::after { content: attr(data-totalsmayvary); display: block } body[data-selectedcurrency="USD"] #etiquette-cart p.cart-currency-note, body[data-selectedcurrency="USD"] #cart-summary .cart-currency-note { display: none } #cart-summary .totals-est-shipping, #cart-summary .totals-taxes, #cart-summary .totals-total-incl-tax, #cart-summary .free-shipping-meter { display: none } #cart-summary .free-shipping-meter { flex-direction: column; margin: 12px 0 } #cart-summary .free-shipping-meter .meter { border: 1px solid #000000; border-radius: 2px; height: 8px; padding: 1px } #cart-summary .free-shipping-meter .meter .fill { background-color: #000000; background-color: #390; border-radius: 1px; height: 4px; width: 0; -moz-transition: width 0.3s ease 0s; -webkit-transition: width 0.3s ease 0s; -o-transition: width 0.3s ease 0s; -ms-transition: width 0.3s ease 0s; transition: width 0.3s ease 0s; } #cart-summary .free-shipping-meter .caption { color: #000000; color: #390; font-size: 10px; font-weight: 500; margin-top: 5px; text-align: center } #cart-summary .free-shipping-meter .caption .ca { display: none } #cart-summary.coupon-applied .free-shipping-meter .caption .ca { display: inline } #cart-summary.coupon-applied .totals-est-shipping { font-size: 0 } #cart-summary.coupon-applied .totals-est-shipping::after { content: 'At Checkout'; display: inline-block; font-size: 12px; position: absolute; right: 0; text-transform: none } #cart-summary.coupon-applied .totals-est-shipping .pull-left { font-size: 12px } #shipping-calculator { /*display: none*/ } #add-gift-message, #shipping-calculator { margin: 40px 0; padding: 0 15px } #add-gift-message h3, #shipping-calculator h3 { color: #5b626d; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.05em; text-align: center; text-transform: uppercase } #add-gift-message.expanded h3, #shipping-calculator.expanded h3 { color: #000000 } #add-gift-message h3 svg, #shipping-calculator h3 svg { display: table; margin: 0 auto 10px } #add-gift-message h3 svg { margin-bottom: 16px } #add-gift-message.expanded h3 svg .fill-color, #shipping-calculator.expanded h3 svg .fill-color { fill: #000000 } #add-gift-message h3 span, #shipping-calculator h3 span { display: table; margin: 0 auto } #add-gift-message .collapsible-giftmsg-wrap, #shipping-calculator .collapsible-shipcalc-wrap { max-height: 0; overflow-y: hidden; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #add-gift-message.expanded .collapsible-giftmsg-wrap, #shipping-calculator.expanded .collapsible-shipcalc-wrap { max-height: 800px } #shipping-calculator .collapsible-shipcalc-wrap .field, #shipping-calculator .collapsible-shipcalc-wrap .field * { text-align: center } #shipping-calculator .collapsible-shipcalc-wrap .field label { color: #000; letter-spacing: 0.1em; text-transform: uppercase } #shipping-calculator .collapsible-shipcalc-wrap #wrapper-response { font-size: 10px; min-height: 10px } #shipping-calculator .selectize-control, #shipping-calculator .select-skin { margin-left: auto; margin-right: auto; width: 230px } #shipping-calculator #wrapper-response { text-align: center } #shipping-calculator #wrapper-response .shipping-rates-note { line-height: 1.8em; margin: 15px 0 10px } #shipping-calculator #wrapper-response .shipping-rates-note span { display: block } #shipping-calculator #wrapper-response .shipping-rates-note span.address { color: #000000; font-style: italic } #shipping-calculator #wrapper-response ul#shipping-rates { margin: 15px 0 } #shipping-calculator #wrapper-response ul#shipping-rates li { color: #000000; line-height: 1.8em; text-align: center } #shipping-calculator #wrapper-response .free-shipping-note { color: #000; font-style: italic; line-height: 1.8em; margin: 20px auto 0; max-width: 100%; width: 250px } #add-gift-message textarea { border: 2px solid #CCC; height: 160px; padding: 6px 10px; width: 100% } #add-gift-message .giftmsg-how-it-works { color: #899192; display: table; font-size: 10px; font-style: italic; margin-top: 5px } #add-gift-message.how-it-works-open .giftmsg-how-it-works { color: #000000 } #add-gift-message .how-gift-message-works { bottom: 72px; left: 0; max-height: 0; overflow-y: hidden; position: absolute; z-index: 10; -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } #add-gift-message.how-it-works-open .how-gift-message-works { max-height: 500px } #add-gift-message .how-gift-message-works .wrap { background: #f7f7f9; bottom: 10px; box-shadow: -5px 5px 4px rgba(0,0,0,0.2); left: 4%; line-height: 1.6em; padding: 0 30px; position: relative; right: 10px; text-align: center; top: auto; width: 92% } #add-gift-message .how-gift-message-works .wrap::before { content: ''; display: block; position: absolute; border-top: 15px solid rgba(0,0,0,0.5); border-left: 20px solid transparent; border-right: 20px solid transparent; left: 20px; bottom: -15px; -moz-filter: blur(5px); -webkit-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); z-index: -1 } #add-gift-message .how-gift-message-works .wrap::after { border-top: #f7f7f9 15px solid; border-left: 20px solid transparent; border-right: 20px solid transparent; content: ''; display: block; position: absolute; bottom: -15px; left: 20px } #add-gift-message .how-gift-message-works svg { margin: 5px auto 15px } #add-gift-message.expanded .how-gift-message-works svg .fill-color { fill: #5b626d } #add-gift-message .how-gift-message-works h3 { color: #5b626d; font-size: 14px; margin: 10px auto 15px; padding-top: 20px } #add-gift-message .how-gift-message-works p { color: #899192; font-size: 10px } #add-gift-message .how-gift-message-works .para-2 { padding: 0 10px 25px } .svg-scribble .st0{ fill: #5b626d; stroke: #899192; stroke-width: 0.5; stroke-miterlimit: 10 } .svg-scribble .st1{ fill-rule:evenodd; clip-rule:evenodd; fill: #5b626d; stroke: #899192; stroke-width: 0.5; stroke-miterlimit: 10 } p.has-agree-to-terms { display: table; font-style: italic; line-height: 1.8em; margin: 0 auto } #cart-summary p.has-agree-to-terms::before { background-color: transparent; border-radius: 3px; bottom: -3px; content: ''; display: block; left: -10px; position: absolute; right: -10px; top: -3px; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } #cart-summary p.has-agree-to-terms.shake::before { background-color: rgba(240, 86, 86, 0.15) } #cart-summary p.has-agree-to-terms.shake { color: #f05656 } p.has-agree-to-terms.fancy-checkbox [type="checkbox"] + label { display: inline-block; font-size: 10px; font-weight: normal; line-height: 2.4em; margin: 0; text-transform: none } p.has-agree-to-terms a { border-bottom: 1px solid #5b626d; font-size: 10px; letter-spacing: 0.05em } #cart-summary p.has-agree-to-terms.shake a { border-bottom-color: #f05656 } p.has-agree-to-terms a:hover { border-bottom-color: transparent } #cart-summary #terms-checkout .btn { font-size: 14px; height: 50px; line-height: 50px; margin-top: 20px } #cart-summary .radio-like-checkbox p.has-agree-to-terms [type="checkbox"] + label::before { -moz-transition: border-color 0.3s ease 0s; -webkit-transition: border-color 0.3s ease 0s; -o-transition: border-color 0.3s ease 0s; -ms-transition: border-color 0.3s ease 0s; transition: border-color 0.3s ease 0s; } #cart-summary .radio-like-checkbox p.has-agree-to-terms.shake [type="checkbox"] + label::before { border-color: #f05656 } @media all and (max-width:1199px) { body.template-cart #heading-banner .back-to-top { line-height: 22px } body.template-cart #content { padding-top: 24px } body.template-cart #heading-banner #page-description { display: block } #heading-banner .cart-already-reg-msg { font-size: 14px; line-height: 1.8em } p.has-agree-to-terms a { font-size: 9px } #cart-summary #terms-checkout .btn.btn-checkout { background-color: #390; /*bottom: 0; font-size: 14px; height: 50px; left: 0; line-height: 50px; opacity: 0; padding: 0; position: fixed; width: 100%; z-index: 100*/ } body.loading-anim-complete #cart-summary #terms-checkout .btn.btn-checkout { opacity: 1 } } @media all and (max-width:991px) { #cart-summary { margin: 0 auto 30px; max-width: 100%; /*width: 350px*/ } #cart-summary .totals-note img { width: 350px } } @media all and (max-width:767px) { #checkout-cart .has-cart-items .page-section-heading { border-bottom: 1px solid #c4c8c8; cursor: pointer } #cart-items .head-row > * { border-top: 0 none } #checkout-cart .has-cart-items .page-section-heading .caret { border: 0 none; height: 10px; margin-left: 10px; width: 10px } #checkout-cart .has-cart-items.show-items .page-section-heading .caret { -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); transform: rotate(180deg); } #checkout-cart .has-cart-items .page-section-heading .caret svg { left: 0; position: absolute; top: 0 } #checkout-cart .has-cart-items .cart-items-wrap { display: none } #checkout-cart .has-cart-items.show-items .cart-items-wrap { display: block } #checkout-cart .has-cart-subtotal { margin-top: 20px } #cart-items .line-item-descr .option { bottom: auto; left: auto; margin-top: 5px; position: relative } #shipping-calculator { margin: 36px 0 0 } #add-gift-message { margin: 32px 0 0 } #terms-checkout { margin: 26px 0 0 } #add-gift-message h3, #shipping-calculator h3 { margin: 0 } } @media all and (max-width:640px) { #cart-items .head-row { display: none } #cart-items .item-row { border-bottom: 1px dotted #5b626d; display: block; padding-left: 120px } #cart-items .item-row::before, #cart-items .item-row::after { content: ' '; display: table } #cart-items .item-row::after { clear: both } #cart-items .item-row > * { border: 0 none; display: block } #cart-items .item-row .line-item-thumb { left: 0; position: absolute; top: 0 } #cart-items .item-row .line-item-descr { padding-left: 0 } #cart-items .line-item-descr .sku, #cart-items .line-item-descr .option { display: inline-block; float: left; margin-right: 10px } #cart-items .line-item-qty { clear: left } #cart-items .line-item-qty, #cart-items .line-item-price, #cart-items .line-item-subtotal { display: block; float: left; margin-top: 20px; text-align: left; width: 33.33% } #cart-items .line-item-qty::before, #cart-items .line-item-price::before, #cart-items .line-item-subtotal::before { content: 'Quantity'; display: block; left: 0; position: absolute; text-transform: none; top: -2px } #cart-items .line-item-price::before { content: 'Price' } #cart-items .line-item-subtotal::before { content: 'Subtotal' } #cart-items .line-item-remove { right: 0; position: absolute; top: 0; width: auto } #cart-items .line-item-qty .numerified { margin: 0; text-align: center } } @media all and (max-width:440px) { /*#cart-items .line-item-qty { width: 100% } #cart-items .line-item-price, #cart-items .line-item-subtotal { width: 50% }*/ #cart-items .item-row { height: 185px; padding-bottom: 95px } #cart-items .line-item-qty, #cart-items .line-item-price, #cart-items .line-item-subtotal { bottom: 0; left: 0; margin: 0; position: absolute; text-align: center } #cart-items .line-item-price { left: 33.33% } #cart-items .line-item-subtotal { left: 66.66% } #cart-items .line-item-qty::before, #cart-items .line-item-price::before, #cart-items .line-item-subtotal::before { text-align: center; width: 100% } #cart-items .line-item-qty .numerified { margin: 0 auto } } /****----- 3.6 Account Pages -----****/ body.template-customers-login .account-page-wrap .has-page-content, body.template-customers-register .account-page-wrap .has-page-content { padding-bottom: 50px; padding-top: 15px } .account-content-wrap > * > .container { padding-top: 50px } .page-sub-heading { display: block; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; height: 40px; letter-spacing: 0.1em; line-height: 40px; margin: 50px auto; text-align: center; text-transform: uppercase } .account-page-wrap h2.page-sub-heading { margin-top: 15px } .account-content-wrap h2.page-section-heading::after, .page-sub-heading::after { bottom: 0; background-color: #CCC; content: ''; display: block; height: 1px; left: 0; position: absolute; width: 100% } .page-sub-heading.blank::before { top: 50% } .page-sub-heading.blank::after { display: none } .page-sub-heading.extended { min-height: 40px } .page-sub-heading.extended a { display: block; font-weight: normal; font-size: 0.8em; font-style: italic; letter-spacing: 0.05em; line-height: 0.4em; padding-bottom: 1.2em; text-align: center; text-decoration: underline; text-transform: none } .page-sub-heading.extended a:hover { color: #000000 } .account-form-wrap { margin-left: auto; margin-right: auto; max-width: 100%; width: 500px } .account-form-wrap .alerts-wrap { display: none; padding: 10px 0 20px } .account-form-wrap .alerts-wrap .errors, .account-form-wrap .alerts-wrap .success { margin: 0 } .account-form-wrap p.has-agree-to-terms { margin: 0 } .account-form-wrap form#form-recover-password .nice-note { font-size: 10px; line-height: 30px; margin-top: 20px } .account-form-wrap form#form-recover-password .nice-note a { color: #000000; text-decoration: underline } #customer-reset-password { margin-bottom: 150px } #customer-reset-password .page-sub-heading { margin-bottom: 30px } #customer-reset-password .note.regular-content { font-size: 10px; font-style: italic; line-height: 20px; text-align: center } .account-form-wrap.customer_address.edit_address { max-height: 0; overflow-y: hidden; -moz-transition: max-height 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s; transition: max-height 0.3s ease 0s; } .account-form-wrap.customer_address.edit_address.show { max-height: 1000px; -moz-transition: max-height 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s; transition: max-height 0.3s ease 0s; } body.template-customers-login .link-forgot-password { font-size: 10px } body.template-customers-login p.has-agree-to-terms a { color: #000000 } .account-details-wrap { font-size: 10px; letter-spacing: 0.05em; text-align: center } .account-details-wrap .customer-name { color: #000000; font-weight: 500; padding-top: 60px; text-transform: uppercase } .account-details-wrap .customer-email { color: #000000; padding-top: 10px } .account-details-wrap .account-actions { color: #899192; font-size: 10px; padding-top: 5px } .account-details-wrap .has-signout a:hover { color: #899192 } .account-details-wrap .spacer { color: #899192; padding-top: 10px } .account-details-wrap .has-signout { color: #000000; font-weight: 500; margin-bottom: 30px; padding-top: 10px; text-transform: uppercase } .account-details-wrap .address-wrap { border: 1px dotted #c4c8c8; margin: 20px 0; padding: 10px } .account-details-wrap .address-wrap + .address-wrap { margin-top: 30px } .account-details-wrap .address-wrap .address { color: #000000; line-height: 26px; padding: 20px 10px; text-align: center } .address-wrap h4 { font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.05em; margin: 3px 0 0; text-transform: uppercase } .address-wrap .address-actions { color: #899192; font-size: 10px; margin: 10px 0 3px } .address-wrap .address-actions a { display: inline-block; margin: 0 10px } #no-orders { max-width: 100%; margin: 0 auto; width: 400px } #no-orders .no-orders-caption { color: #000000; font-size: 10px; font-weight: 500; padding-bottom: 50px; padding-top: 10px; text-align: center; text-transform: uppercase } #no-orders.has-main-collection-btns .btn { margin-left: 0; margin-right: 0 } #no-orders .free-shipping-note { padding-top: 50px } #no-orders .free-shipping-note h4 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 400; letter-spacing: 0.05em; margin-top: 5px; text-transform: uppercase } #no-orders .free-shipping-note p { font-size: 10px } body#account .has-customer-orders { padding-top: 30px; padding-bottom: 50px } #customer-orders * { font-size: 10px; letter-spacing: 0.05em } #customer-orders .head-row > * { background-color: #f7f7f9; border-color: #c4c8c8; border-style: solid; border-width: 1px 0; color: #000000; font-weight: 500; text-transform: uppercase } #customer-orders .order-item-date, #customer-orders .order-item-order, #customer-orders .order-item-total, #customer-orders .order-item-status { display: block; float: left; padding-bottom: 12px; padding-top: 12px; width: 25% } #customer-orders .order-item-date { text-indent: 25px } #customer-orders .order-row > * { border-bottom: 1px solid #c4c8c8; color: #000000; line-height: 1.6em } #customer-orders .order-row[data-orderid]:hover > * { background-color: #5b626d; color: #FFF; cursor: pointer } #customer-orders .order-row[data-orderid].expanded > * { background-color: #f7f7f9; border-bottom-color: transparent; color: #000000 } #customer-orders .order-details-row { background-color: #f7f7f9 } #customer-orders .order-row .order-item-status::after { color: #000000; content: '+'; display: block; position: absolute; top: 50%; right: 25px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #customer-orders .order-row[data-orderid]:hover .order-item-status::after { color: #FFF } #customer-orders .order-row[data-orderid].expanded .order-item-status::after { color: #000000 } #customer-orders .order-row[data-orderid].expanded .order-item-status::after { content: '-' } #customer-orders .order-details-row .order-details { display: none } #customer-orders .order-details { border-bottom: 2px solid #e6e6e6 } #customer-orders .order-details * { font-size: 10px; letter-spacing: 0.05em } #customer-orders .order-details h5 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-weight: normal; letter-spacing: 0.05em; margin: 0 } #customer-orders .order-details .sku { margin-top: 12px } #customer-orders .order-details .order-items .item { min-height: 140px; padding: 20px 0 20px 140px } #customer-orders .order-details .order-items .item + .item { } #customer-orders .order-details .order-items .item .thumb { display: block; left: 25px; position: absolute; top: 20px; width: 100px } #customer-orders .order-details .order-items .item .thumb img { display: table; height: auto; width: 100% } #customer-orders .order-details .order-items .item .line-item-specs { bottom: 20px; max-width: 100%; position: absolute; width: 300px } #customer-orders .order-details .order-items .item .line-item-specs .title { } #customer-orders .order-details .order-shipping-billing { color: #899192 } #customer-orders .order-details .order-shipping-billing > * > * { line-height: 1.6em; padding: 10px 20px } #customer-orders .order-details .order-shipping-billing h5 { color: #000000; margin-bottom: 6px; text-transform: uppercase } #account-mobile-menu { background-color: rgba(255,255,255,0.8); border-bottom: 1px solid #e6e6e6; font-size: 11px; margin-left: -15px; margin-right: -15px; text-align: center; text-transform: uppercase } #account-mobile-menu .btn.btn-default { background-color: transparent; border: 0 none; color: #000000; display: table; float: none; font-size: inherit; height: 39px; line-height: 40px; margin: 0 auto } #account-mobile-menu .btn.btn-default:active { box-shadow: none } #account-mobile-menu .btn.btn-default:hover { background-color: transparent; color: #000000 } #account-mobile-menu .btn-group.open .dropdown-toggle { box-shadow: none } #account-mobile-menu .btn-group .dropdown-toggle .caret { border: 0 none; display: block; height: 10px; margin-top: -5px; position: absolute; right: 0px; top: 50%; width: 10px } #account-mobile-menu .btn-group .dropdown-toggle .caret svg { display: block; height: 10px } #account-mobile-menu .btn-group.open .dropdown-toggle .caret { -moz-transform: rotate(180deg) translateY(1px); -webkit-transform: rotate(180deg) translateY(1px); -o-transform: rotate(180deg) translateY(1px); -ms-transform: rotate(180deg) translateY(1px); transform: rotate(180deg) translateY(1px); } #account-mobile-menu .btn.btn-default:hover {} #account-mobile-menu ul.dropdown-menu { background-color: transparent; border: 0 none; box-shadow: none; margin: -4px 0 0; padding-top: 2px; position: relative; text-align: center; width: 100% } #account-mobile-menu ul.dropdown-menu li.divider { background-color: transparent; height: auto; margin: 0 } #account-mobile-menu ul.dropdown-menu li.divider::before { content: '--' } #account-mobile-menu ul.dropdown-menu li a { color: #000000; font-size: 11px; font-weight: 500; line-height: 2em } #account-mobile-menu ul.dropdown-menu > li > a:hover { background-color: transparent } @media all and (max-width:1199px) { body.template-customers-login .account-page-wrap .has-page-content, body.template-customers-register .account-page-wrap .has-page-content { padding-top: 0; padding-bottom: 0 } .account-content-wrap { padding-top: 42px } .account-content-wrap > * > .container { padding-top: 0 } .account-form-wrap .alerts-wrap { padding: 0 0 15px } .account-form-wrap .link-forgot-password { font-size: 9px } .page-sub-heading { font-size: 12px; height: 26px; line-height: 26px; margin: 30px auto } .page-sub-heading::before, .page-sub-heading::after { display: none } .page-sub-heading.extended { font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: 30px; height: auto; padding: 25px 0 } .page-sub-heading.extended::before, .page-sub-heading.extended::after { background-color: #e6e6e6; content: ''; display: block; height: 1px; left: 50%; margin-left: -75px; position: absolute; top: 0; width: 150px } .page-sub-heading.extended::after { bottom: 0; top: auto } .page-sub-heading.extended a { font-size: 18px; line-height: 1.6em; padding: 10px 0 0 } .has-login-link { margin-bottom: 10vh } body.template-customers-login, body.template-customers-register, body.template-customers-reset_password, body.template-customers-account { background-color: #FFF; padding-bottom: 40px } body.template-customers-login #footer, body.template-customers-register #footer, body.template-customers-reset_password #footer, body.template-customers-account #footer { display: none } body.template-customers-login .has-login-form, body.template-customers-login .has-register-form { max-height: 600px; overflow-y: hidden; -moz-transition: max-height 0.6s ease 0s; -webkit-transition: max-height 0.6s ease 0s; -o-transition: max-height 0.6s ease 0s; -ms-transition: max-height 0.6s ease 0s; transition: max-height 0.6s ease 0s; } body.template-customers-login .has-register-form, body.template-customers-login.show-register-form .has-login-form { max-height: 0 } body.template-customers-login.show-register-form .has-register-form { max-height: 700px } body.template-customers-login .has-register-form #create_customer [type="submit"] { display: none } body.template-customers-login.show-register-form .has-register-form #create_customer [type="submit"] { display: block } body.template-customers-login.show-register-form .has-login-form #customer-login [type="submit"] { display: none } form#form-recover-password .pre-submit-note { color: #000000; font-size: 11px; line-height: 1.6em; text-align: center } #customer-login [type="submit"], #create_customer [type="submit"], #form-recover-password .btn-primary, #form-customer-reset-password [type="submit"], body.template-customers-account .btn-add-address, body.template-customers-account .customer_address.edit_address [type="submit"] { bottom: 0; font-size: 14px; height: 50px; left: 0; opacity: 0; position: fixed; width: 100%; z-index: 100 } body.loading-anim-complete #customer-login [type="submit"], body.loading-anim-complete #create_customer [type="submit"], body.loading-anim-complete #form-recover-password .btn-primary, body.loading-anim-complete #form-customer-reset-password [type="submit"], body.loading-anim-complete.template-customers-account .btn-add-address, body.loading-anim-complete.template-customers-account .customer_address.edit_address [type="submit"] { opacity: 1 } body.template-customers-account .customer_address.edit_address [type="submit"] { z-index: 110 } #customer-login .form-group:last-child { margin-bottom: 0 } #customer-reset-password .note.regular-content { font-size: 11px; line-height: 26px; margin-left: auto; margin-right: auto; max-width: 80%; text-align: center } #customer-reset-password .note.regular-content span { display: block } #customer-reset-password .note.regular-content span + br { display: none } body#account.mobile-manage-account .has-order-history, body#account .has-account-sidebar, #account-mobile-menu ul.dropdown-menu li.order-history, body#account.mobile-manage-account #account-mobile-menu ul.dropdown-menu li.manage-account { display: none } body#account.mobile-manage-account .has-account-sidebar, body#account.mobile-manage-account #account-mobile-menu ul.dropdown-menu li.order-history { display: block } body#account .has-customer-orders { margin-left: -15px; margin-right: -15px; padding: 0 } .address-wrap h4 { font-size: 11px } #no-orders .no-orders-caption, #customer-orders * { font-size: 11px } #no-orders .free-shipping-note svg { height: 48px; width: auto } #no-orders .free-shipping-note h4 { font-size: 12px } #no-orders .free-shipping-note p { font-size: 9px } #customer-orders.auto-table, #customer-orders .auto-table, #customer-orders.auto-table > *, #customer-orders.auto-table > * > *, #customer-orders .auto-table > *, #customer-orders .auto-table > * > * { display: block } #customer-orders .head-row > * { background-color: #5b626d; border: 0 none; color: #FFF } #customer-orders .order-item-date, #customer-orders .order-item-order, #customer-orders .order-item-total, #customer-orders .order-item-status { line-height: 16px; padding-bottom: 12px; padding-top: 12px } #customer-orders .order-item-date { text-indent: 12px; width: 29% } #customer-orders .order-item-total { width: 21% } #customer-orders .order-row::after { right: 12px } #customer-orders .order-row[data-orderid]:hover > * { background-color: #f7f7f9; color: #000000 } #customer-orders .order-row[data-orderid]:hover::after { color: #000000 } #customer-orders .order-details * { font-size: 11px; line-height: 16px } #customer-orders .order-details .order-items .item .thumb { left: 12px; top: 14px } #customer-orders .order-details .order-items .item { padding: 12px 0 12px 130px } #customer-orders .order-details h5, #customer-orders .order-details .order-items { color: #000000 } #customer-orders .order-details .sku { margin-top: 0 } #customer-orders .order-shipping-billing, #customer-orders .order-details .order-items .item .line-item-specs { bottom: auto; position: relative } #customer-orders .order-details .order-items .item .line-item-specs .title, #customer-orders .order-details .order-items .item .line-item-specs .value { display: inline-block } #customer-orders .order-shipping-billing { text-align: center } #customer-orders .order-shipping-billing > * { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap } #customer-orders .order-shipping-billing > * > * { float: left; width: 50% } .address-wrap .address-actions, .account-details-wrap { font-size: 11px } .account-details-wrap .customer-name { padding-top: 40px } .account-details-wrap .customer-email { padding-top: 8px } .account-details-wrap .account-actions { font-size: 9px; padding-top: 10px } .account-details-wrap .address-wrap.default .address, .account-details-wrap .address-wrap .address { color: #899192; line-height: 18px } } /****----- 3.6.1 WMA App Customer Form -----****/ .has-register-form #customer-fields { visibility: hidden } .has-register-form #customer-fields.wma-etiquette-styled { visibility: visible } #customer-fields.wma-etiquette-styled form .form-footer { border-top: 0 none; margin-top: 0; padding-top: 5px } #customer-fields.wma-etiquette-styled form [type="submit"] { display: block; margin: 0; width: 100% } #customer-fields.wma-etiquette-styled form.loading [type="submit"] { opacity: 0.4 } /****----- 3.6.2 Customr App Forms -----****/ .has-register-form #customer-fields { visibility: hidden } .has-register-form #customer-fields.customr-etiquette-styled { visibility: visible } #customer-fields .customr-container-item { padding: 0 } #customer-fields .errors { font-size: 10px; line-height: 1.8em } #customer-fields form .form-group label { display: inline-block; margin: 0 0 5px } #customer-fields form p.has-agree-to-terms.fancy-checkbox [type="checkbox"] + label { margin: 0 } #customer-fields form .form-footer { border-top: 0 none; margin-top: 0; padding-top: 10px } #customer-fields form input[type="submit"] { display: block; margin: 0; width: 100% } #customer-fields form .action-icon { display: none } .account-details-wrap .has-register-form { max-height: 0; opacity: 0; overflow-y: hidden; -moz-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; } .account-details-wrap.edit-account .has-register-form { max-height: 300px; opacity: 1; -moz-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; } .account-details-wrap #customer-fields { padding: 10px 0 } .account-details-wrap #customer-fields .page-sub-heading, .account-details-wrap .customr-field-checkbox, .account-details-wrap .customr-field-email { display: none } /****----- 3.7 Contact/Newsletter Pages -----****/ #newsletter-subscription, #contact_form { margin-top: 40px } .page-description, .pre-form-info { color: #899192; font-size: 10px; line-height: 24px; margin: 40px auto; text-align: center } body.page-newsletter .form-group, body.page-newsletter .form-field-wrap, body.page-contact .form-group, body.page-contact .form-field-wrap { margin: 20px auto; max-width: 100%; width: 500px } form .pre-submit-note, form .agree-to-terms { color: #899192; display: table; font-size: 10px; font-style: italic; letter-spacing: 0.05em; margin: 20px auto 30px } body.page-contact .has-info-section + .has-info-section {} body.page-contact .has-info-section + .has-info-section::before { content: '--'; display: table; margin: 0 auto } body.page-contact .info-section { margin: 20px auto; max-width: 100%; text-align: center; width: 680px } body.page-contact .info-section h4 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: normal; letter-spacing: 0.05em } body.page-contact .info-section p { font-size: 10px; line-height: 26px } form #newsletter-form-wrap .form-group .interested-in label { text-transform: none } #page-newsletter-conf-message, #page-newsletter-ty-message, body.page-contact #contact_form .success-message { border-bottom: 1px solid #c4c8c8; border-top: 1px solid #c4c8c8; margin: 30px auto 60px; max-width: 100%; padding: 7vw 0; width: 500px } #page-newsletter-conf-message, #page-newsletter-ty-message { margin-top: 90px } #page-newsletter-conf-message p, #page-newsletter-ty-message p, body.page-contact #contact_form .success-message p { color: #000000; font-size: 24px; text-align: center } @media all and (max-width:767px) { #newsletter-subscription, #contact_form { margin-top: 20px } .page-description, .pre-form-info { font-size: 11px; line-height: 16px; margin: 20px auto } .page-description br, .pre-form-info br { display: none } body.page-contact .form-group, body.page-contact .form-field-wrap { margin: 12px auto } #newsletter-subscription .has-subscribe-form ul.interested-in li { display: block; margin: 0 0 0 20px } #newsletter-subscription .has-subscribe-form ul.interested-in li + li { margin-top: 15px } #contactFormSubmit, #subscribeSubmit { bottom: 0; font-size: 14px; height: 50px; left: 0; line-height: 48px; opacity: 0; position: fixed; width: 100%; z-index: 100 } body.loading-anim-complete #contactFormSubmit, body.loading-anim-complete #subscribeSubmit { opacity: 1 } body.page-contact .info-section p { line-height: 16px } body.page-contact .info-section p br { display: none } form .pre-submit-note, form .agree-to-terms { font-size: 11px; margin: 15px auto } } /****----- 3.8 Terms Page -----****/ body.page-contact .page-sub-heading, body.page-terms .page-sub-heading { margin: 0 auto } body.page-contact .page-sub-heading::before, body.page-terms .page-sub-heading::before { display: none } body.page-terms .page-description { margin-bottom: 30px } #page-terms { margin: 0 auto; max-width: 100%; padding-bottom: 50px; width: 800px } #page-terms h3 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: bold; letter-spacing: 0.05em; line-height: 1em; margin: 50px 0 20px; padding: 10px 0; text-align: center; text-transform: uppercase } #page-terms h3:first-child { margin-top: 10px } #page-terms .panel-group .panel + .panel { margin-top: 0 } #page-terms .panel-group .panel.panel-default { border-color: #c4c8c8; border-style: dotted; border-width: 0 0 1px; border-radius: 0; box-shadow: none } #page-terms .panel-group h3 + .panel.panel-default { border-top-width: 1px } #page-terms .panel-default > .panel-heading { background-color: transparent; padding: 0 } #page-terms .panel-title a { display: block; font-size: 24px; line-height: 1em; padding: 15px 0 } #page-terms .panel-title a::after { content: '-'; display: block; float: right; margin-top: -4px; } #page-terms .panel-title a.collapsed::after { content: '+' } #page-terms .panel-collapse {} #page-terms .panel-default > .panel-heading + .panel-collapse > .panel-body { border: 0 none; color: #899192; font-size: 12px; line-height: 20px; padding: 12px 0 30px } @media all and (max-width:767px) { #page-terms .panel-title a { font-size: 14px } #page-terms .panel-default > .panel-heading + .panel-collapse > .panel-body { font-size: 11px; line-height: 16px; padding: 3px 0 22px } } /****----- 3.9 About Page -----****/ .page-heading-special { border-bottom: 1px solid #c4c8c8; border-top: 1px solid #c4c8c8; font-size: 26px; line-height: 2.2em; margin: 0 0 20px; text-align: center } #page-about-hero-slider, #page-aob-hero-slider { padding-top: 18px } #page-about-hero-slider .carousel-indicators, #page-aob-hero-slider .carousel-indicators { display: none } .pages-carousel .carousel-inner .item { background: transparent none center center no-repeat; background-size: cover; height: auto; padding-top: 60% } .pages-carousel-caption { z-index: 10 } .pages-carousel-caption .caption-content { padding: 40px 10%; text-align: center } .pages-carousel-caption h2, #page-aob-alt-tiles .tile h3 { font-size: 46px; margin: 0 0 25px; padding-bottom: 22px } .pages-carousel-caption h2::after, #page-aob-alt-tiles .tile h3::after { background-color: #000; bottom: 0; content: ''; display: block; height: 2px; left: 50%; margin: -1px 0 0 -50px; position: absolute; width: 100px } .pages-carousel-caption p { font-size: 11px; letter-spacing: 0.05em; line-height: 26px } .section-heading { font-size: 46px; margin: 60px 0 50px; padding-top: 50px; text-align: center } .section-heading::before, #page-footnote::before { background-color: #e6e6e6; content: ''; display: block; height: 1px; left: 50%; margin-left: -200px; position: absolute; top: 0; width: 400px } #page-about-spl-editions .items.row { display: flex; flex-wrap: wrap; justify-content: center; margin: 0 } #page-about-spl-editions .items .item { padding-bottom: 10px } #page-about-spl-editions .items .owl-item .item { float: none; margin: 0 auto } #page-about-spl-editions .items .item a { display: block; height: auto; padding-top: 100%; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } #page-about-spl-editions .items .item a::before { background-color: rgba(0,0,0,0); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } #page-about-spl-editions .items .item a:hover::before { background-color: rgba(0,0,0,0.05) } #page-about-spl-editions .items .item a::after { content: ''; display: block; height: 3px; left: 0; position: absolute; bottom: 0; width: 100%; -moz-transition: background-color 0.3s ease 0s, transform 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s, transform 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s, transform 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s, transform 0.3s ease 0s; transition: background-color 0.3s ease 0s, transform 0.3s ease 0s; } #page-about-spl-editions .items .item a:hover::after { background-color: #000000; -moz-transform: translateY(10px); -webkit-transform: translateY(10px); -o-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } #page-about-spl-editions .items .item a > * { background: transparent none center center no-repeat; background-size: contain } #page-about-spl-editions .items .item a .logo { display: block; height: 20%; left: 0; position: absolute; top: 6%; width: 100% } #page-about-spl-editions .items .item a .main-image { bottom: 10%; display: block; height: 60%; left: 0; position: absolute; width: 100% } .modal.modal-narrow .modal-dialog { margin-left: auto; margin-right: auto; max-width: 100%; width: 500px } .modal.modal-naked .modal-dialog { text-align: center } .modal.modal-naked .spled-carousel { padding-bottom: 40px } .modal.modal-naked .carousel-indicators { bottom: -40px } .modal.modal-naked .carousel .carousel-control.left { left: 10px } .modal.modal-naked .carousel .carousel-control.right { right: 10px } .modal.modal-naked .carousel .item { background: transparent none center center no-repeat; background-size: cover; height: auto; padding-top: 80% } .modal.modal-naked .item-content { font-size: 11px; letter-spacing: 0.05em } .modal.modal-naked .item-content h4 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: normal; letter-spacing: 0.05em; padding: 0 40px; text-transform: uppercase } .modal.modal-naked .item-content p { line-height: 26px; padding: 0 40px } .modal.modal-naked .modal-footer a.show-share-icons { display: block; font-size: 11px; line-height: 36px; letter-spacing: 0.05em; text-transform: uppercase; -moz-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; } .modal.modal-naked .modal-footer.show-icons a.show-share-icons { opacity: 0; visibility: hidden; -moz-transition: visibility 0s, opacity 0.3s ease 0.3s; -webkit-transition: visibility 0s, opacity 0.3s ease 0.3s; -o-transition: visibility 0s, opacity 0.3s ease 0.3s; -ms-transition: visibility 0s, opacity 0.3s ease 0.3s; transition: visibility 0s, opacity 0.3s ease 0.3s; } .modal.modal-naked .modal-footer .share-icons { opacity: 0; visibility: hidden; position: absolute; left: 0; top: 20px; width: 100%; -moz-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -webkit-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -o-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; -ms-transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; transition: visibility 0s ease 0.3s, opacity 0.3s ease 0s; } .modal.modal-naked .modal-footer.show-icons .share-icons { opacity: 1; visibility: visible; -moz-transition: visibility 0s, opacity 0.3s ease 0.3s; -webkit-transition: visibility 0s, opacity 0.3s ease 0.3s; -o-transition: visibility 0s, opacity 0.3s ease 0.3s; -ms-transition: visibility 0s, opacity 0.3s ease 0.3s; transition: visibility 0s, opacity 0.3s ease 0.3s; } .modal.modal-naked .modal-footer .share-icons a { display: inline-block; margin: 0 20px } .modal.modal-naked .modal-footer .share-icons a:hover svg .fill-color { fill: #000000 } #page-about-retailers .section-heading { margin-top: 60px; padding-top: 56px } #page-about-retailers .retailer { height: auto; padding-top: 100% } #page-about-retailers .retailer img { display: table; height: auto; left: 50%; max-height: 60%; max-width: 80%; position: absolute; top: 50%; width: auto; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #page-footnote { margin: 50px 0 } #page-footnote .footnote { color: #899192; font-size: 11px; font-style: italic; padding-top: 40px; text-align: center } #page-footnote .footnote a { font-style: normal } @media all and (max-width:767px) { #page-about-hero-slider .carousel-indicators, #page-aob-hero-slider .carousel-indicators { bottom: 0; display: block } #page-about-hero-slider-caption, #page-aob-hero-slider-caption { margin-top: 15px; padding: 0 } #page-aob-hero-slider-caption { border-bottom: 1px solid #e6e6e6; padding-bottom: 15px; } #page-about-hero-slider-caption.pages-carousel-caption .caption-content, #page-aob-hero-slider-caption.pages-carousel-caption .caption-content { padding: 15px } .section-heading::before, #page-footnote::before { left: -15px; margin-left: 0; right: -15px; width: auto } body.page-about.modal-open { max-width: 100%; min-width: 100%; overflow: hidden } #page-about-spl-editions .carousel .carousel-indicators { bottom: auto; top: 71vw } #page-about-spl-editions .items.row { display: block } #page-about-spl-editions .items .carousel .item a { padding-top: 0 } #page-about-spl-editions .items .carousel .item a:hover::before, #page-about-spl-editions .items .carousel .item a:hover::after { display: none } #page-about-spl-editions .items .carousel .item a .logo, #page-about-spl-editions .items .carousel .item a .main-image { height: auto; padding-top: 15%; position: relative } #page-about-spl-editions .items .carousel .item a .main-image { padding-top: 60%; margin-bottom: 50px } #page-about-spl-editions .items .carousel .item .excerpt { display: block; font-size: 10.35px; line-height: 20.71px; text-align: center } #page-about-spl-editions .items .carousel .item .excerpt .anchor { display: block; margin: 0 auto } #page-about-hero-slider, #page-about-spl-editions-xs { padding-bottom: 0 } #page-about-hero-slider .carousel-indicators, #page-about-spl-editions-xs .carousel-indicators { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; margin-left: -50%; width: 100% } #page-about-hero-slider .carousel-indicators > *, #page-about-spl-editions-xs .carousel-indicators > * { background-color: #EEE; border: 0 none; border-radius: 0; flex: 1; margin: 0 } #page-about-hero-slider .carousel-indicators > *.active, #page-about-spl-editions-xs .carousel-indicators > *.active { background-color: #000 } .modal.modal-naked .carousel-indicators { bottom: 0 } .modal.modal-naked .carousel .carousel-control { display: none } .modal.modal-naked .spled-carousel { border-bottom: 1px solid #c4c8c8; margin-bottom: 20px; padding-bottom: 0 } .modal.modal-naked .item-content h4 { font-size: 10px } .modal.modal-naked .item-content p { font-size: 10px; line-height: 1.5em } .modal.modal-naked .modal-footer a.show-share-icons { line-height: 30px } body.page-about .section-heading, #page-about-retailers .section-heading { font-size: 34px; margin-top: 15px 0; padding-top: 20px } #page-about-retailers .retailer { padding-top: 75% } } @media all and (max-width:600px) { #page-about-spl-editions .carousel .carousel-indicators { top: 71vw } } @media all and (max-width:480px) { #page-about-spl-editions .carousel .carousel-indicators { top: 69vw } } /****----- 3.10 Art of Basics Page -----****/ .pages-carousel-caption.has-image { padding-bottom: 20px } .pages-carousel-caption.has-image .caption-content { padding: 50px 60px; text-align: left; width: 75% } .pages-carousel-caption.has-image .caption-content p { padding-right: 35% } .pages-carousel-caption.has-image .image-wrap { float: right; margin-top: -200px; width: 49%; z-index: 1 } .pages-carousel-caption.has-image .image-wrap img { height: auto; width: 100% } body.page-art-of-basics .pages-carousel-caption h2::after, #page-aob-alt-tiles .tile h3::after { left: 0; margin-left: 0 } #page-aob-alt-tiles .tile .text-right h3::after { left: auto; right: 0 } #page-aob-alt-tiles {} #page-aob-alt-tiles .tile { margin-top: 50px } #page-aob-alt-tiles .tile .tile-image { background: transparent none center center no-repeat; background-size: cover; height: auto; padding-top: 106%; } #page-aob-alt-tiles .tile .tile-image a { background-color: rgba(0,0,0,0.7); color: #FFF; font-size: 10px; height: 180px; left: 50%; line-height: 2.4em; position: absolute; text-align: center; text-transform: uppercase; top: 50%; width: 180px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #page-aob-alt-tiles .tile .tile-image a .play-btn { display: table; margin: 10px auto 0 } /*#page-aob-alt-tiles .tile .tile-image*/ a .play-btn svg .fill-circle { stroke-dasharray: 80px; stroke-dashoffset: 80px; -moz-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); -webkit-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); -o-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); -ms-transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); transition: stroke-dasharray 0.6s cubic-bezier(0.25, 0.45, 0.43, 0.97); } /*#page-aob-alt-tiles .tile .tile-image*/ a:hover .play-btn svg .fill-circle { stroke-dasharray: 145px } /*#page-aob-alt-tiles .tile .tile-image*/ a:hover .play-btn svg polyline { fill: #010101 } #page-aob-alt-tiles .tile p { font-size: 11px; letter-spacing: 0.05em; line-height: 26px } .section-heading-sub { font-size: 11px; letter-spacing: 0.05em; text-align: center } #page-aob-learn-the-basics .ltb-columns { margin-bottom: 30px; margin-top: 30px } #page-aob-learn-the-basics .ltb-columns .column-wrap { background-color: #f7f7f9; font-size: 12px; height: 100%; letter-spacing: 0.05em; padding: 30px 0; text-align: center } .washing-instructions h4, #page-aob-learn-the-basics .ltb-columns .column-wrap h4 { font-size: 24px; margin: 0 auto 10px; text-transform: capitalize } #page-aob-learn-the-basics .ltb-columns .column-wrap ul + h4 { margin-top: 30px } #page-aob-learn-the-basics .ltb-columns .column-wrap ul li { line-height: 3.3em; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } body[class*="pagetpl-etq-basics"] .washing-instructions { margin-bottom: 50px } .washing-instructions { background-color: #f7f7f9; padding-top: 20px; padding-bottom: 20px } .washing-instructions h4 { margin-bottom: 20px } .washing-instructions .wi { display: table; font-size: 12px; letter-spacing: 0.05em; margin: 0 auto; padding: 10px 0; text-decoration: none; -moz-transition: color 0.3s ease 0s; -webkit-transition: color 0.3s ease 0s; -o-transition: color 0.3s ease 0s; -ms-transition: color 0.3s ease 0s; transition: color 0.3s ease 0s; } .washing-instructions .wi:hover { color: #000000; font-weight: bold } .washing-instructions .wi .icon { display: table; margin: 0 auto; } .washing-instructions .wi:hover .icon svg .fill-color { fill: #000000 } .washing-instructions .wi .title { text-transform: capitalize } .washing-instructions .wi + .wi-instr img { display: table; height: auto; margin: 10px auto; max-width: 100%; width: auto } @media all and (min-width:1200px) { #washing-instructions .washing-instructions > .row, #washing-instructions .washing-instructions > .row > [class*="col-"] { position: static } #page-aob-learn-the-basics .ltb-columns .term-wrap > h5 { color: #5b626d; cursor: pointer; display: inline-block; font-family: 'Montserrat', sans-serif; font-size: inherit; font-weight: normal; letter-spacing: 0.05em; line-height: inherit; margin: 0 } #page-aob-learn-the-basics .ltb-columns .term-wrap:hover > h5 { color: #000000; font-weight: 700 } #washing-instructions .washing-instructions .wi + .wi-instr, #page-aob-learn-the-basics .ltb-columns .term-wrap .term-info { background-color: #f7f7f9; border: 1px solid rgba(0,0,0,.15); box-shadow: -6px 12px 3px rgba(0,0,0,0.2); color: #899192; display: block; left: 100%; line-height: 2em; margin-left: 10px; opacity: 0; padding: 15px 20px; position: absolute; text-align: left; top: 0.5em; width: 500px; visibility: hidden; z-index: 1; -moz-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -webkit-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -o-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -ms-transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; transition: visibility 0.3s ease 0.3s, opacity 0.3s ease 0s; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } #washing-instructions .washing-instructions .wi + .wi-instr { bottom: 110px; left: 2%; margin: 0; top: auto; width: 96%; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } #page-aob-learn-the-basics .ltb-columns .term-wrap .term-info::before { border-right: 7px solid #AAA; border-top: 7px solid transparent; border-bottom: 7px solid transparent; content: ''; display: block; filter: blur(3px); left: -7px; margin: 9px 0 0 -5px; position: absolute; top: 50% } #washing-instructions .washing-instructions .wi + .wi-instr::before, #washing-instructions .washing-instructions .wi + .wi-instr::after, #page-aob-learn-the-basics .ltb-columns .term-wrap .term-info::after { border-right: 7px solid #f7f7f9; border-bottom: 7px solid transparent; border-top: 7px solid transparent; content: ''; display: block; left: -7px; margin-top: -4px; position: absolute; top: 50% } #washing-instructions .washing-instructions .wi + .wi-instr::before, #washing-instructions .washing-instructions .wi + .wi-instr::after { border-bottom: 0 none; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #f7f7f9; top: 100%; left: 50%; margin: 0 0 0 -8px } #washing-instructions .washing-instructions .wi + .wi-instr::before { border-top-color: #AAA; filter: blur(3px); top: 107% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(1) .wi + .wi-instr::before { left: 14.2% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(1) .wi + .wi-instr::after { left: 14.4% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(2) .wi + .wi-instr::before { left: 32.1% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(2) .wi + .wi-instr::after { left: 32.3% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(4) .wi + .wi-instr::before { left: 68.1% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(4) .wi + .wi-instr::after { left: 68.3% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(5) .wi + .wi-instr::before { left: 85.6% } #washing-instructions .washing-instructions .wis > [class*="col-"]:nth-child(5) .wi + .wi-instr::after { left: 85.8% } #page-aob-learn-the-basics .ltb-columns > *:last-child .term-wrap .term-info { box-shadow: 6px 12px 3px rgba(0,0,0,0.2); left: auto; margin-left: 0; margin-right: 10px; right: 100% } #page-aob-learn-the-basics .ltb-columns > *:last-child .term-wrap .term-info::before { border-right: 0 none; border-left: 7px solid #AAA; left: auto; right: -13px } #page-aob-learn-the-basics .ltb-columns > *:last-child .term-wrap .term-info::after { border-left: 7px solid #f7f7f9; border-right: 0 none; left: auto; right: -7px } #washing-instructions .washing-instructions .wi:hover + .wi-instr, #washing-instructions .washing-instructions .wi + .wi-instr:hover, #page-aob-learn-the-basics .ltb-columns .term-wrap .term-info:hover, #page-aob-learn-the-basics .ltb-columns .term-wrap > h5:hover + .term-info { opacity: 1; visibility: visible; -moz-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; transition: visibility 0.3s ease 0s, opacity 0.3s ease 0s; } } @media all and (max-width:1199px) { #page-aob-learn-the-basics .ltb-columns { display: block } #page-aob-learn-the-basics .ltb-columns .column-wrap ul li { margin-top: 5vh } #page-aob-learn-the-basics .ltb-columns .column-wrap ul li .term-info { line-height: 1.6em; margin: 0 auto; max-width: 80%; width: 500px } .washing-instructions .row.wis > [class*="col-"] + [class*="col-"] { margin-top: 40px } .washing-instructions .wi + .wi-instr img { max-width: 90% } } @media all and (min-width:992px) { .pages-carousel-caption.has-image h2 { white-space: nowrap } } @media all and (min-width:768px) and (max-width:991px) { .pages-carousel-caption.has-image .image-wrap { margin-top: -300px } } @media all and (max-width:767px) { #page-aob-learn-the-basics { display: none } #page-aob-hero-slider { padding-bottom: 10px } #page-aob-hero-slider .carousel-indicators { bottom: 0; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; margin-bottom: 0; margin-left: -50%; width: 100% } #page-aob-hero-slider .carousel-indicators > * { background-color: #EEE; border: 0 none; border-radius: 0; flex: 1; margin: 0 } #page-aob-hero-slider .carousel-indicators > *.active { background-color: #000 } #page-aob-hero-slider-caption.pages-carousel-caption h2 { line-height: 32.21px; text-align: center } #page-aob-hero-slider-caption.pages-carousel-caption h2::after { left: 50%; margin-left: -50px } .pages-carousel-caption.has-image .caption-content { width: 100% } .pages-carousel-caption.has-image .caption-content p { padding-right: 0; text-align: center } .pages-carousel-caption.has-image .image-wrap { margin-top: 15px; width: 100% } #page-about-hero-slider-caption.pages-carousel-caption h2, #page-aob-hero-slider-caption.pages-carousel-caption h2, #page-aob-alt-tiles .tile h3 { font-size: 34px } #page-about-hero-slider-caption.pages-carousel-caption p, #page-aob-hero-slider-caption.pages-carousel-caption p, #page-aob-alt-tiles .tile p { font-size: 10.35px; line-height: 20.71px } #page-aob-alt-tiles .tile.row > * { padding-left: 0; padding-right: 0 } #page-aob-alt-tiles .tile { margin-top: 20px } #page-aob-alt-tiles .tile h3, #page-aob-alt-tiles .tile p { margin: 0 0 20px; padding-bottom: 0; text-align: center } #page-aob-alt-tiles .tile h3::after { display: none } #page-footnote { margin: 20px 0 } #page-footnote .footnote { padding-top: 20px } #page-footnote .footnote a { color: #000000; font-style: italic; display: block } } /****----- 3.11 Etiquette Basics Pages -----****/ body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav { text-align: left } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav.next { text-align: right } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a { color: #5b626d; display: inline-block; font-size: 10px; height: 20px; line-height: 20px; margin-left: 20px; text-transform: uppercase; white-space: nowrap; width: auto } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav.next a { margin: 0 20px 0 0 } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a:hover { color: #000000 } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a svg { display: inline-block; height: 6px; vertical-align: middle; width: 6px } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a:hover svg .fill-color { fill: #000000 } body[class*="pagetpl-etq-basics"] #collection-hero p { width: 500px } body[class*="pagetpl-etq-basics"] #collection-hero .coll-hero-img { /*background-size: auto 140%; background-position: 36% 50%; height: auto; padding-top: 58%; top: 50%; width: 100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);*/ } .page-content.etq-basic { padding: 20px 0 } .page-content.etq-basic .has-etqb-chapters { float: right; margin-top: 50px; padding: 50px 0; } .page-content.etq-basic .has-etqb-chapters > a { display: block; height: 50px; left: 0; position: absolute; top: 0; width: 100% } .page-content.etq-basic .has-etqb-chapters > a.next { bottom: 0; top: auto } .page-content.etq-basic .has-etqb-chapters > a svg { display: block; left: 50%; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .page-content.etq-basic .has-etqb-chapters .etqb-chapters-list-wrap { border-color: #000000; border-style: solid; border-width: 2px 0; max-height: 1294px; overflow: hidden } .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters { margin: 0; padding: 0; width: 215px } .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li { list-style: outside none; padding: 20px 0 } .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li + li { border-top: 1px solid #e6e6e6 } .has-etqb-chapters-landing .chapter-item a, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a { display: block; text-decoration: none } .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li.active a, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li.active a:hover *, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li.active a:hover { cursor: default } .has-etqb-chapters-landing .chapter-item a .chapter-thumb, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a .chapter-thumb { background: transparent none center center no-repeat; background-size: cover; display: block; height: auto; padding-top: 100% } .has-etqb-chapters-landing .chapter-item a .chapter-thumb::before, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a .chapter-thumb::before { background-color: rgba(0,0,0,0); content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1; -moz-transition: background-color 0.3s ease 0s; -webkit-transition: background-color 0.3s ease 0s; -o-transition: background-color 0.3s ease 0s; -ms-transition: background-color 0.3s ease 0s; transition: background-color 0.3s ease 0s; } .has-etqb-chapters-landing .chapter-item a:hover .chapter-thumb::before, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li.active a .chapter-thumb::before, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a:hover .chapter-thumb::before { background-color: rgba(51,51,51,0.5) } .has-etqb-chapters-landing .chapter-item a .chapter-thumb::after, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a .chapter-thumb::after { border-bottom: 1px solid transparent; color: transparent; content: 'Read more'; display: block; font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-size: 20px; left: 50%; line-height: 1em; position: absolute; top: 50%; z-index: 2; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: all 0.3s ease 0s; -webkit-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; -ms-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li.active a .chapter-thumb::after { content: 'You’re here' } .has-etqb-chapters-landing .chapter-item a:hover .chapter-thumb::after, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a:hover .chapter-thumb::after { border-bottom-color: #FFF; color: #FFF } .has-etqb-chapters-landing .chapter-item a h5, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a h5, .page-content.etq-basic .etqb-chapter h4 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: normal; letter-spacing: 0.15em; text-transform: uppercase } .has-etqb-chapters-landing .chapter-item a h4, .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li a h4 { font-size: 28px; line-height: 0.9em; margin-bottom: 0 } .page-content.etq-basic .has-etqb-chapters .back-to-summary { border-top: 1px solid #e6e6e6; bottom: 0; display: block; left: -30px; position: absolute; right: -30px } .page-content.etq-basic .has-etqb-chapters .back-to-summary a { display: block; font-size: 14px; letter-spacing: 0.15em; line-height: 50px; text-align: center; text-decoration: none; text-transform: uppercase; z-index: 1 } .page-content.etq-basic .has-etqb-chapters.style-mobile .etqb-chapters-list-wrap { border-width: 0; margin: 0 auto; max-height: 316px; width: 235px } .page-content.etq-basic .has-etqb-chapters.style-mobile .etqb-chapters-list-wrap::before, .page-content.etq-basic .has-etqb-chapters.style-mobile .etqb-chapters-list-wrap::after { background-color: #000000; content: ''; display: block; height: 215px; left: 0; position: absolute; top: 0; width: 2px; z-index: 5 } .page-content.etq-basic .has-etqb-chapters.style-mobile .etqb-chapters-list-wrap::after { left: auto; right: 0 } .page-content.etq-basic .has-etqb-chapters.style-mobile > a { left: 50%; margin-left: -150px; top: 112px; width: 50px; -moz-transform: translate(-50%, 0) rotate(-90deg); -webkit-transform: translate(-50%, 0) rotate(-90deg); -o-transform: translate(-50%, 0) rotate(-90deg); -ms-transform: translate(-50%, 0) rotate(-90deg); transform: translate(-50%, 0) rotate(-90deg); } .page-content.etq-basic .has-etqb-chapters.style-mobile > a.next { margin-left: 150px } .page-content.etq-basic .has-etqb-chapters.style-mobile ul#etqb-chapters { display: -webkit-flex; display: flex; flex-wrap: wrap; width: 5000px } .page-content.etq-basic .has-etqb-chapters.style-mobile ul#etqb-chapters li { padding: 0 10px; width: 235px } .page-content.etq-basic .has-etqb-chapters.style-mobile ul#etqb-chapters li + li { border-top: 0 none } .page-content.etq-basic a.chapters-summary { color: #000000; display: block; font-size: 14px; letter-spacing: 0.1em; line-height: 40px; text-align: center; text-decoration: none; text-transform: uppercase } .page-content.etq-basic a.chapters-summary::before, .page-content.etq-basic a.chapters-summary::after { border-bottom: 7px solid transparent; border-left: 7px solid #000000; border-top: 7px solid transparent; content: ''; display: inline-block; margin: 0 14px 2px; vertical-align: middle; -moz-transition: margin 0.3s ease 0s; -webkit-transition: margin 0.3s ease 0s; -o-transition: margin 0.3s ease 0s; -ms-transition: margin 0.3s ease 0s; transition: margin 0.3s ease 0s; } .page-content.etq-basic a.chapters-summary::after { border-left: 0 none; border-right: 7px solid #000000 } .page-content.etq-basic a.chapters-summary:hover::before, .page-content.etq-basic a.chapters-summary:hover::after { margin: 0 8px 2px } .has-etqb-chapters-landing { margin: 20px 0 } .has-etqb-chapters-landing .chapter-item { margin: 20px 0 } .page-content.etq-basic .etqb-chapter { float: left; width: calc(100% - 245px); } .page-content.etq-basic .etqb-chapter h1 { font-size: 46px; line-height: 1em } ul.etqb-chapter-items { margin: 20px -15px; padding: 0 } ul.etqb-chapter-items li { list-style: outside none; padding: 0 15px } ul.etqb-chapter-items li .etqb-chapter-item { display: block } ul.etqb-chapter-items li .etqb-chapter-item .hoverlay, ul.etqb-chapter-items li .etqb-chapter-item .offset-overlay { background-color: rgba(51,51,51,0.5); display: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } ul.etqb-chapter-items li .etqb-chapter-item .offset-overlay { display: block; left: 15px; top: 15px } .etqb-chapter .etqb-heading { border-bottom: 1px solid rgba(0,0,0,0.3); display: table; font-family: 'Montserrat', sans-serif; letter-spacing: 0.05em; margin: 0 auto; padding-bottom: 6px; text-shadow: 0 0 1px rgba(0,0,0,0.9), 0 0 1px rgba(0,0,0,0.5); text-transform: uppercase } .etqb-chapter .etqb-chapter-content h2 { font-weight: 500 } .etqb-chapter .etqb-chapter-content p { font-size: 13px; line-height: 26px } .etqb-chapter .etqb-chapter-content .image-n-blockquote { margin-bottom: 70px; margin-top: 70px; } .etqb-chapter .etqb-chapter-content .image-n-blockquote .row.flexize blockquote { left: 20px; position: absolute; top: 50%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .etqb-chapter blockquote { border: 0 none; font-size: 16px; font-style: italic; font-weight: 400; letter-spacing: 0.05em; line-height: 30px; max-width: 100%; padding: 5px 0 0; width: auto } .etqb-chapter blockquote .svg-quote-start { bottom: 100%; left: 0; position: absolute } .etqb-chapter blockquote .svg-quote-end { display: inline-block; vertical-align: middle } .etqb-chapter .etqb-factoid { margin: 5% 0 } .etqb-chapter .etqb-factoid::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter .etqb-factoid h3 { border-bottom: 1px solid #FFF; color: #FFF; display: table; font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 700; letter-spacing: 0.05em; line-height: 1.6em; margin: 0 auto 15px; padding: 15px 0 0; text-transform: uppercase } .page-content.etq-basic .etqb-chapter .etqb-factoid h4 { color: #000000; display: table; font-size: 13px; letter-spacing: 0.05em; margin: 0 auto 10px; padding: 25px 0 0 } .etqb-chapter .etqb-factoid h2 { color: #FFF; display: table; font-size: 28px; font-weight: 500; line-height: 1.2em; margin: 0 auto 15px; padding: 0 1em; text-align: center } .etqb-chapter .etqb-factoid p { color: #FFF; font-size: 16px; font-style: italic; line-height: 30px; margin: 0 auto; padding: 0 0 25px; text-align: center; width: 77% } .etqb-chapter .etqb-factoid table { margin: 0 auto; max-width: 100%; width: 450px } .etqb-chapter .etqb-factoid table th, .etqb-chapter .etqb-factoid table td { text-align: center } .etqb-chapter .etqb-factoid table th { color: #000000; font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none;; font-size: 18px } .etqb-chapter .etqb-factoid table thead th { border-color: transparent transparent #c4c8c8 } .etqb-chapter .etqb-factoid table tbody th, .etqb-chapter .etqb-factoid table tbody td {} .etqb-chapter .etqb-factoid table tbody th { text-align: left } .etqb-chapter .etqb-factoid table tbody td {} .etqb-chapter[data-chapterno="01"] ul.etqb-chapter-items li { float: left; margin: 12px 0 100px; width: 50% } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: auto; padding-top: 64.26% } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .text { height: 40px; left: 20px; position: absolute; top: 20px; width: auto } .etqb-chapter[data-chapterno="01"] li:last-child .etqb-chapter-item .text { height: 190px } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .image { height: 290px; position: absolute; right: 20px; top: -20px; width: auto } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .hoverlay h5 { color: #FFF; font-size: 36px; margin-top: 0px; opacity: 0; position: absolute; text-align: center; top: 50%; width: 100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item:hover .hoverlay h5 { opacity: 1; margin-top: -30px } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .hoverlay .buttons { display: table; left: 50%; margin-top: 0; opacity: 0; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item:hover .hoverlay .buttons { opacity: 1; margin-top: 30px } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .hoverlay .like-btn-spl { display: table } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item-descr { font-size: 12px; line-height: 2em; margin: 15px 0 0 } .etqb-chapter[data-chapterno="01"] .bottom-line { color: #000000; font-family: 'Cormorant Garamond', serif; font-weight: 600; letter-spacing: 0.01em; text-transform: none; font-weight: 500; font-size: 22px; margin: 0 } .etqb-chapter[data-chapterno="02"] [class*="container"] { margin-bottom: 70px; margin-top: 70px } .etqb-chapter[data-chapterno="02"] .etqb-chapter-content > h2, .etqb-chapter[data-chapterno="02"] .etqb-chapter-content > p { z-index: 1 } .etqb-chapter[data-chapterno="02"] .etqb-chapter-content blockquote { display: table; margin: 100px auto 50px } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap { padding-top: 120% } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap a { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 5 } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap.playing a { display: none } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap .play-btn { display: block; height: 41px; left: 50%; position: absolute; top: 50%; width: 41px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap video { bottom: -10%; height: auto; left: -11%; position: absolute; width: 150%; z-index: 0 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: auto; margin: 8% 0 12%; padding-top: 26.7%; width: 74.3% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:first-child .etqb-chapter-item { margin-top: 26% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin-left: 25.7% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 230%; left: 0; position: absolute; top: -98%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item .image { bottom: -32%; height: 558px; left: 4%; position: absolute; width: auto } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image { left: auto; right: 4% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item blockquote { left: 66%; position: absolute; top: 52%; width: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item blockquote { left: 34% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: auto; margin: 8% 0 8% 0; padding-top: 26.7%; width: 81.5% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item { margin-left: 18.5% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 164%; left: 0; position: absolute; top: -32%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item .image { height: auto; left: 8%; position: absolute; top: 50%; width: 376px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item .image { left: auto; right: 8% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item blockquote { left: 81%; position: absolute; top: 52%; width: 27%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item blockquote { left: 21% } .etqb-chapter[data-chapterno="05"] ul.etqb-chapter-items li { float: left; margin: 30px 0; width: 50% } .etqb-chapter[data-chapterno="05"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="05"] ul.etqb-chapter-items h2 { font-weight: 500; margin: 15px 0 5px } .etqb-chapter[data-chapterno="05"] ul.etqb-chapter-items p { font-size: 13px; line-height: 26px } .etqb-chapter[data-chapterno="06"] ul.etqb-chapter-items li .etqb-chapter-item > .row > [class*="col-"]::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="06"] ul.etqb-chapter-items li .combo-details { left: 50%; max-width: 100%; text-align: center; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="06"] .combo-details .combo-item { margin: 30px auto; max-width: 100%; width: auto } .etqb-chapter[data-chapterno="06"] .combo-details .combo-item + .combo-item { margin-top: 50px } .etqb-chapter[data-chapterno="06"] .combo-details .combo-item + .combo-item::before { background-color: #000; content: ''; display: block; height: 1px; left: 50%; margin-left: -10px; position: absolute; top: -27px; width: 20px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote > .row > [class*="col-"]::before, .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .info-box::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote .row.flexize blockquote { max-width: 100%; width: 250px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes { margin-bottom: 50px; margin-top: 80px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .info-box { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: 100%; padding: 20px 10px; text-align: center } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .info-box h2.etqb-heading { border-bottom: 0 none; font-size: 26px; margin: 10px auto 15px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .info-box svg { left: 50%; position: absolute; top: -60px; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .info-box p { line-height: 20px } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: auto; margin: 6% 0 6%; padding-top: 26.7%; width: 74.3% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:first-child .etqb-chapter-item { margin-top: 12% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin-left: 25.7% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 172%; left: 0; position: absolute; top: -38%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item .image { bottom: -32%; height: 400px; left: 4%; position: absolute; width: auto } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image { left: auto; right: 4% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(1) .etqb-chapter-item .image { margin-left: -50px } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2) .etqb-chapter-item .image { margin-bottom: -45px; margin-right: -20px } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(3) .etqb-chapter-item .image { margin-bottom: 20px; margin-left: -76px } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(4) .etqb-chapter-item .image { margin-bottom: 27px; margin-right: -27px } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item blockquote { left: 69%; position: absolute; top: 52%; width: 52%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item blockquote { left: 34% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(4) .etqb-chapter-item blockquote { left: 28%; width: 40% } .etqb-chapter[data-chapterno="09"] .main-image-wrap { padding: 30% 0 } .etqb-chapter[data-chapterno="09"] .main-image-wrap::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="09"] .main-image-wrap img { display: table; margin: 0 auto; width: 80% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box { left: 50%; position: absolute; text-align: center; top: 50%; width: 260px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box::after { background-color: #000; content: ''; display: block; height: 110px; left: 50%; position: absolute; top: 100%; width: 1px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box h2 { border: 0 none; font-size: 22px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box p { font-size: 16px; font-style: italic; line-height: 24px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="1"] { left: 17%; margin-top: -49.5% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="1"]::after {} .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="2"] { left: 39%; margin-top: 42% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="2"]::after { bottom: 100%; height: 100px; top: auto; -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="3"] { left: 48%; margin-top: -56%; width: 270px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="3"]::after { height: 130px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="4"] { left: 70%; margin-top: -41% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="4"]::after { height: 80px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="5"] { left: 72%; margin-top: 54% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="5"]::after { bottom: 100%; height: 120px; top: auto; -moz-transform: translateY(-10px); -webkit-transform: translateY(-10px); -o-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: auto; margin: 4% 0 4%; padding-top: 26.7%; width: 74.3% } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items li:first-child .etqb-chapter-item { margin-top: 6% } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin-left: 25.7% } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 172%; left: 0; position: absolute; top: -38%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .image { height: 170px; left: 6%; position: absolute; top: -11%; width: auto } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content { left: 70%; position: absolute; top: 52%; width: 55%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content > h2 { font-size: 24px; font-weight: 500; margin-top: 0 } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content blockquote { margin: 30px 0 0 } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content blockquote h2.etqb-heading { border-bottom: 0 none; display: inline; font-size: 24px; font-style: normal; font-weight: 500; line-height: 1.2em; margin: 0 } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content .hashtags { margin-top: 10px } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content .hashtags svg { bottom: 5px; left: -75px; position: absolute } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content .hashtags .hashtag { color: #000; display: inline-block; font-size: 16px; text-transform: uppercase } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li { margin: 18% 0 } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 220%; left: 0; position: absolute; top: -60%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item > .row > [class*="col-"]::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item .image { display: table; left: 50%; position: absolute; top: 50%; width: calc(100% - 60px); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { padding: 0 15px } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .item-content { text-align: right } .etqb-chapter[data-chapterno="12"] ul.etqb-chapter-items li { margin: 40px 0 } .etqb-chapter[data-chapterno="12"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .image-tile { background-position: center center; background-size: cover; padding-top: 76.87% } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item a > .hoverlay h5 { color: #FFF; font-size: 36px; margin-top: 0px; opacity: 0; position: absolute; text-align: center; top: 50%; width: 100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item a:hover > .hoverlay h5 { opacity: 1; margin-top: -30px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item a > .hoverlay .buttons { display: table; left: 50%; margin-top: 0; opacity: 0; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item a:hover > .hoverlay .buttons { opacity: 1; margin-top: 30px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item a > .hoverlay .like-btn-spl { display: table } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile { background-color: #F4F3F3 } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content { height: 100%; padding: 50px 25px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content h2.thick, .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content .the-perks h4 { font-family: 'Montserrat', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content h2.thick { margin: 0 } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content h2.thick + h2 { margin: 15px 0 25px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content p { font-size: 16px; font-style: italic } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content .the-perks { bottom: 30px; left: 25px; position: absolute; width: calc(100% - 50px) } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content .the-perks h4 { font-size: 20px } .etqb-chapter[data-chapterno="13"] .main-image-wrap { padding-bottom: 50px; padding-top: 80px } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image-n-blockquote::before, .etqb-chapter[data-chapterno="13"] .main-image-wrap::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image { display: table; margin: 0 auto; width: 80% } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .etqb-factoid.one-half p { padding: 0 1em 25px; width: 100% } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image-n-blockquote { left: 50%; position: absolute; margin: auto; max-width: 100%; top: 50%; width: 380px; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image-n-blockquote img { display: table; margin: 0 auto; width: 380px } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image-n-blockquote blockquote { margin: 50px auto 0; max-width: 100%; width: 325px } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li { margin: 4% 0 } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li:first-child { margin-top: 8% } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li .etqb-chapter-item::before { content: ''; display: block; height: 130%; left: 0; position: absolute; top: -15%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li .etqb-chapter-item .etqb-heading { font-size: 30px; margin: 0 0 20px } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li .etqb-chapter-item .image { -moz-transform: translateY(-40px); -webkit-transform: translateY(-40px); -o-transform: translateY(-40px); -ms-transform: translateY(-40px); transform: translateY(-40px); } .etqb-chapter[data-chapterno="15"] ul.etqb-chapter-items li { margin: 30px 0 } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li .etqb-chapter-item::before { content: ''; display: block; height: 130%; left: 0; position: absolute; top: -15%; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="15"] ul.etqb-chapter-items li .etqb-chapter-item .image { display: table; margin: 0 auto; width: 290px } .etqb-chapter[data-chapterno="15"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { left: 0; max-width: 100%; position: absolute; top: 50%; width: 360px; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } .etqb-chapter[data-chapterno="15"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .item-content { left: auto; right: 0; text-align: right } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li { margin: 90px 0 } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li:first-child { margin-top: 50px } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item h2 { line-height: 1em } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item .image[class*="col-"] { background: transparent none center center no-repeat; background-size: cover; display: block; padding-top: 33.33% } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item a.image[class*="col-"] .hoverlay h5 { color: #FFF; font-size: 36px; margin-top: 0px; opacity: 0; position: absolute; text-align: center; top: 50%; width: 100%; -moz-transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); -moz-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item a.image[class*="col-"]:hover .hoverlay h5 { opacity: 1; margin-top: -30px } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item a.image[class*="col-"] .hoverlay .buttons { display: table; left: 50%; margin-top: 0; opacity: 0; position: absolute; top: 50%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -moz-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; transition: margin-top 0.3s ease 0s, opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item a.image[class*="col-"]:hover .hoverlay .buttons { opacity: 1; margin-top: 30px } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item a.image[class*="col-"] .hoverlay .like-btn-spl { display: table } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { padding: 0 25px } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .item-content { text-align: right } .etqb-chapter[data-chapterno="17"] .etqb-chapter-content .main-image-wrap { padding-bottom: 50px; padding-top: 50px } .etqb-chapter[data-chapterno="17"] .etqb-chapter-content .main-image-wrap .image { display: table; margin: 0 auto; width: 710px } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items .etqb-chapter-item { background-color: #F2F1F1; border: 1px solid rgba(0,0,0,0.3); height: auto; margin: 4% 0 4%; padding: 20px 40px; width: 74.3% } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin-left: 25.7%; text-align: right } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items .etqb-chapter-item h2 { font-size: 30px; letter-spacing: -0.002em; margin: 0 0 18px } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item h2 { clear: both; float: right } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items { margin: 20px -25px } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items li { float: left; margin: 12px 0; padding: 0 25px; width: 50% } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items.folding-socks li { width: 33.33% } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items .etqb-chapter-item::before { content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 1 } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items .etqb-chapter-item .image-wrap h2 { color: #FFF; font-size: 50px; left: 20px; margin: 0; position: absolute; top: 0; z-index: 1 } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items p { font-size: 13px; line-height: 26px; margin: 5px 0 0 } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li { margin: 10% 0 } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li:first-child { margin-top: 6% } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li:last-child { margin-bottom: 6% } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item .image { background: transparent none center center no-repeat; background-size: cover; float: left; margin-left: 15px; padding-top: 85%; width: 85% } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image { float: right; margin-left: auto; margin-right: 15px } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item .image .offset-overlay svg { left: 50%; position: absolute; top: 40%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item .image .offset-overlay h5 { color: #FFF; font-size: 46px; left: 50%; margin: 0; position: absolute; text-align: center; top: 75%; width: 100%; -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { margin-left: -15px } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .item-content { margin-left: auto; margin-right: -15px; text-align: right } body.is-ipad [class*="container"].collection-grid > .row, body.page-etiquette-101.is-ipad .flexize, body[class*="pagetpl-etq-basics-"].is-ipad .flexize, body.is-ipad #page-about-spl-editions .items.row { display: block } body.page-etiquette-101.is-ipad .has-etqb-chapters-landing .chapter-item a h4 { height: 2em } body.is-ipad .etqb-chapter[data-chapterno="06"] ul.etqb-chapter-items li .combo-details { -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } body.is-ipad ul.etqb-chapter-items li + li { margin-top: 10vh } body.is-ipad .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item .image { -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } body.is-ipad .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile { padding-top: 76.87% } body.is-ipad .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content { left: 15px; position: absolute; top: 0 } body.is-ipad .etqb-chapter[data-chapterno="15"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } @media all and (min-width:1200px) { ul.etqb-chapter-items li .etqb-chapter-item .hoverlay { display: block; opacity: 0; -moz-transition: opacity 0.3s ease 0.3s; -webkit-transition: opacity 0.3s ease 0.3s; -o-transition: opacity 0.3s ease 0.3s; -ms-transition: opacity 0.3s ease 0.3s; transition: opacity 0.3s ease 0.3s; } .etqb-chapter[data-chapterno="01"] ul.etqb-chapter-items li .etqb-chapter-item:hover > .hoverlay { opacity: 1; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="06"] .combo-details .combo-item { width: 360px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote .row.flexize img { -moz-transform: translateX(100px); -webkit-transform: translateX(100px); -o-transform: translateX(100px); -ms-transform: translateX(100px); transform: translateX(100px); } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote .row.flexize blockquote { -moz-transform: translate(100px, -50%); -webkit-transform: translate(100px, -50%); -o-transform: translate(100px, -50%); -ms-transform: translate(100px, -50%); transform: translate(100px, -50%); } .etqb-chapter[data-chapterno="12"] ul.etqb-chapter-items li .etqb-chapter-item a:hover > .hoverlay { opacity: 1; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item a.image[class*="col-"]:hover .hoverlay { opacity: 1; -moz-transition: opacity 0.3s ease 0s; -webkit-transition: opacity 0.3s ease 0s; -o-transition: opacity 0.3s ease 0s; -ms-transition: opacity 0.3s ease 0s; transition: opacity 0.3s ease 0s; } .etqb-chapter[data-chapterno="19"] .etqb-chapter-content .image-n-blockquote .row.flexize blockquote { left: auto; max-width: none; right: 0; top: 30%; width: 280px } } @media all and (max-width:1199px) { .etqb-chapter blockquote { font-size: 14px; line-height: 22px } .etqb-chapter ul.etqb-chapter-items .etqb-chapter-item::before { height: 100% !important; top: 0 !important } .etqb-chapter[data-chapterno="01"] ul.etqb-chapter-items li { margin: 12px 0 75px } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .text { height: 30px } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .image { height: 217.5px; right: 15px; top: -15px } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item .image { height: 460px } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item { background-color: transparent; border: 0 none; margin: 0; padding: 0; width: 100% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item { margin-left: 0 } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item .image { left: 0; position: relative; top: 0; width: 50%; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item .image { left: 50%; right: auto } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item blockquote { left: 75%; width: 30% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item blockquote { left: 25% } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote .row.flexize { display: block } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote .row.flexize blockquote { left: auto; margin: 70px auto 40px; position: relative; top: auto; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item { background-color: transparent; border: 0 none; margin: -5% 0 0; padding: 0; width: 100% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:first-child .etqb-chapter-item { margin-top: 5% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin-left: 0 } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item .image { height: auto; left: 0; position: relative; top: 0; width: 50%; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(1) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(3) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(4) .etqb-chapter-item .image { margin: 0 } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image { left: 50%; right: auto } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item blockquote { left: 75%; width: 30% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item blockquote { left: 25% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box { -moz-transform: translate(-50%, -50%) scale(0.75); -webkit-transform: translate(-50%, -50%) scale(0.75); -o-transform: translate(-50%, -50%) scale(0.75); -ms-transform: translate(-50%, -50%) scale(0.75); transform: translate(-50%, -50%) scale(0.75); } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item { padding-top: 34%; width: 100% } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin-left: 0 } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content { top: 50% } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content { padding: 20px 15px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content h2.thick + h2 { margin: 10px 0 15px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content p { font-size: 14px; line-height: 24px } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content .the-perks { bottom: 20px; left: 15px; width: calc(100% - 30px) } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .row.flexize { display: block } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image-n-blockquote { left: auto; margin: 40px auto; position: relative; top: auto; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .etqb-factoid p { padding: 0 2em 25px } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li .etqb-chapter-item .image { -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="18"] .etqb-chapter-content h2 { font-size: 24px !important } .etqb-chapter[data-chapterno="19"] .image-n-blockquote .row.flexize { display: block } .etqb-chapter[data-chapterno="19"] .image-n-blockquote .row.flexize blockquote { left: auto; margin: 40px auto 0; max-width: 100%; position: relative; top: auto; width: 360px; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } } @media all and (max-width:991px) { .page-content.etq-basic { padding-bottom: 0 } .page-content.etq-basic .has-etqb-chapters, .page-content.etq-basic .etqb-chapter { float: none; width: 100% } .page-content.etq-basic .has-etqb-chapters { margin: 0 0 -20px; padding: 30px 0 70px } .page-content.etq-basic .has-etqb-chapters::before { background-color: #e6e6e6; content: ''; display: block; height: 1px; left: -30px; right: -30px; position: absolute; top: 0; width: auto } ul.etqb-chapter-items { margin-bottom: 0 } .etqb-chapter[data-chapterno="02"] .image-n-blockquote img { display: table; margin: 0 auto } .etqb-chapter[data-chapterno="02"] .image-n-blockquote blockquote { display: table; margin: 40px auto 60px } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap { overflow: hidden } .etqb-chapter[data-chapterno="06"] ul.etqb-chapter-items li { margin: 10% 0 } .etqb-chapter[data-chapterno="06"] ul.etqb-chapter-items li:first-child { margin-top: 5% } .etqb-chapter[data-chapterno="06"] ul.etqb-chapter-items .etqb-chapter-item .image { display: table; margin: 0 auto; max-width: 80% } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .image-n-blockquote { margin-bottom: 40px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes { margin: 0 0 40px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .row.flexize { display: block } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .row.flexize > [class*="col-"] + [class*="col-"] { margin-top: 40px } .etqb-chapter[data-chapterno="07"] .etqb-chapter-content .has-info-boxes .info-box svg { display: none } } @media all and (max-width:767px) { body[class*="pagetpl-etq-basics"] #content .has-collection-hero { height: 301px; padding: 10px } .has-etqb-chapters-landing .chapter-item + .chapter-item a { margin-top: 20px } .has-etqb-chapters-landing .chapter-item + .chapter-item a::before { background-color: #e6e6e6; content: ''; display: block; height: 1px; left: 0; position: absolute; top: -35px; width: 100% } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a { text-align: center; width: 20px } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a svg { height: 10px; width: 10px } body[class*="pagetpl-etq-basics"] #heading-banner .auto-table .page-nav a span { display: none } .etqb-chapter[data-chapterno="01"] ul.etqb-chapter-items li { margin: 8vw 0; width: 100% } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .text { height: 8vw; left: 6vw; top: 6vw } .etqb-chapter[data-chapterno="01"] li:last-child .etqb-chapter-item .text { height: 40vw } .etqb-chapter[data-chapterno="01"] .etqb-chapter-item .image { height: 60vw; right: 0 } .etqb-chapter[data-chapterno="01"] li:last-child .etqb-chapter-item .image { right: 2vw } .etqb-chapter[data-chapterno="02"] [class*="container"] { margin-top: 20px } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap { padding-top: 100% } .etqb-chapter[data-chapterno="02"] .etqb-02-video-wrap > img { bottom: -14%; height: auto; left: 0%; max-width: 120%; position: absolute; width: 120%; z-index: 0 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item, .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { background-color: transparent; border: 0 none; margin: -5% 0; padding: 0; width: 100% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:first-child .etqb-chapter-item { margin-top: 0 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:last-child .etqb-chapter-item { margin-bottom: 0 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item .image { height: 425px; left: 25%; position: relative; top: 0; width: auto; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image { left: 75% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item blockquote { line-height: 26px; left: 70%; width: 45% } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item blockquote { left: 30% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item { padding: 5% 0 0 } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item .image { left: 10%; width: 80% } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item blockquote, .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item blockquote { bottom: auto; left: 50%; margin: 70px 0 40px; position: relative; top: auto; width: 200px; -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } .etqb-chapter[data-chapterno="05"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item { margin: 0 } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item .image { left: 10%; width: 80% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item blockquote, .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item blockquote { display: table; left: auto; margin: 40px auto; max-width: 100%; position: relative; width: 300px; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="09"] .main-image-wrap { margin-left: -30px; padding: 0 0 5%; text-align: center } .etqb-chapter[data-chapterno="09"] .main-image-wrap img { margin-bottom: 40px } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="1"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="2"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="3"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="4"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="5"] { display: inline-block; height: 150px; left: auto; margin: 0; padding-left: 30px; position: relative; top: auto; width: 49%; vertical-align: top; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box::after { display: none } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box p { font-size: 12px; line-height: 20px } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item { background-color: transparent; border: 0 none; margin: 8% 0; padding: 0 } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .image { display: table; left: auto; margin: 0 auto 20px; position: relative; top: auto } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content { display: table; left: auto; margin: 0 auto; position: relative; text-align: center; top: auto; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content blockquote { display: table; margin: 30px auto 0; text-align: left } .etqb-chapter[data-chapterno="10"] ul.etqb-chapter-items .etqb-chapter-item .item-content .hashtags svg { display: none } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li { margin: 10% 0 } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item { padding: 0 } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item .image { position: relative; width: 100% } .etqb-chapter[data-chapterno="11"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { padding: 0 } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .row.flexize { display: block } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .image-tile { display: block; padding-top: 129.97%; width: 100% } .etqb-chapter[data-chapterno="12"] .etqb-chapter-item .content-tile .item-content .the-perks { bottom: auto; left: auto; padding-top: 40px; position: relative; width: 100% } .etqb-chapter[data-chapterno="13"] .etqb-chapter-content .image { width: 100% } .etqb-chapter[data-chapterno="14"] ul.etqb-chapter-items li { margin: 8% 0 } .etqb-chapter[data-chapterno="15"] .etqb-chapter-item .row.flexize { display: block } .etqb-chapter[data-chapterno="15"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { left: auto; margin: 0 auto 40px; position: relative; top: auto; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="16"] .etqb-chapter-item .row.flexize { display: block } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item .image[class*="col-"] { padding-top: 66.66% } .etqb-chapter[data-chapterno="16"] ul.etqb-chapter-items li .etqb-chapter-item .item-content { padding: 0; margin: 0 -15px } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items .etqb-chapter-item { width: 100% } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin: 0; text-align: left } .etqb-chapter[data-chapterno="17"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item h2 { float: none } .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items li { width: 100% } .etqb-chapter[data-chapterno="18"] .etqb-chapter-content h2 { font-size: 18px !important } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item { padding: 0 } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item .item-content, .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .item-content { margin: 0; text-align: left } .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="20"] ul.etqb-chapter-items li .etqb-chapter-item .image { float: none; margin: 0 0 40px; width: 100% } } @media all and (max-width:600px) { .etqb-chapter[data-chapterno="18"] ul.etqb-chapter-items.folding-socks li { width: 100% } } @media all and (max-width:480px) { .page-content.etq-basic .has-etqb-chapters.style-mobile .etqb-chapters-list-wrap::before, .page-content.etq-basic .has-etqb-chapters.style-mobile .etqb-chapters-list-wrap::after { display: none } .page-content.etq-basic .has-etqb-chapters.style-mobile > a { margin-left: -130px; z-index: 5 } .page-content.etq-basic .has-etqb-chapters.style-mobile > a.next { margin-left: 130px; z-index: 5 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li { margin: 5% 0 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:first-child .etqb-chapter-item, .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:last-child .etqb-chapter-item, .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li .etqb-chapter-item, .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item { margin: 0 } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item .image { display: table; left: 50%; } .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item blockquote, .etqb-chapter[data-chapterno="03"] ul.etqb-chapter-items .etqb-chapter-item blockquote { display: table; left: auto; margin: 20px auto 0; position: relative; top: auto; width: 80%; -moz-transform: none; -webkit-transform: none; -o-transform: none; -ms-transform: none; transform: none; } .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items li:nth-child(4n+3) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="04"] ul.etqb-chapter-items .etqb-chapter-item .image { left: 0; width: 100% } .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items li:nth-child(2n+2) .etqb-chapter-item .image, .etqb-chapter[data-chapterno="08"] ul.etqb-chapter-items .etqb-chapter-item .image { left: 0; width: 100% } .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="1"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="2"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="3"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="4"], .etqb-chapter[data-chapterno="09"] .main-image-wrap .info-box[data-boxindex="5"] { height: auto; padding: 15px 0 15px 30px; width: 100% } } @media all and (max-width:380px) { body[class*="pagetpl-etq-basics"] #content .has-collection-hero { height: 331px } } @media all and (max-width:340px) { .page-content.etq-basic .has-etqb-chapters.style-mobile > a { margin-left: -80px } .page-content.etq-basic .has-etqb-chapters.style-mobile > a.next { margin-left: 80px } .page-content.etq-basic .has-etqb-chapters ul#etqb-chapters li.active a .chapter-thumb::before { background-color: transparent } } /********* 4. Footer *********/ .has-back-to-top a { color: #000; display: table; font-size: 12px; font-weight: 500; margin: 50px auto 30px; text-transform: uppercase } .has-back-to-top a::before { border-bottom: 5px solid #000; border-left: 5px solid transparent; border-right: 5px solid transparent; bottom: 140%; content: ''; display: block; left: 50%; margin-left: -5px; position: absolute; z-index: 1 } #footer { background-color: #FFF; border-top: 20px solid #FFF; color: #5b626d; overflow: hidden; text-align: center } #footer::before { background-color: #f7f7f9; content: ''; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100% } #footer::before, #footer > * { will-change: transform; -moz-transform: translateY(200px); -webkit-transform: translateY(200px); -o-transform: translateY(200px); -ms-transform: translateY(200px); transform: translateY(200px); -moz-transition: transform .1s linear; -webkit-transition: transform .1s linear; -o-transition: transform .1s linear; -ms-transition: transform .1s linear; transition: transform .1s linear; } body.footer-in-display #footer::before, body.footer-in-display #footer > * { -moz-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -moz-transition: transform .9s cubic-bezier(.19,1,.22,1); -webkit-transition: transform .9s cubic-bezier(.19,1,.22,1); -o-transition: transform .9s cubic-bezier(.19,1,.22,1); -ms-transition: transform .9s cubic-bezier(.19,1,.22,1); transition: transform .9s cubic-bezier(.19,1,.22,1); } body.template-index #footer { border-top-width: 40px } .has-quick-subscribe { padding-top: 15px } .has-quick-subscribe h5 { color: #5b626d; font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase } .has-quick-subscribe .fields-wrap { margin: 25px auto 0; max-width: 85%; width: 450px } .has-quick-subscribe input[id^="quickSubscribeEmail"] { background-color: transparent; border-width: 0 0 1px; box-shadow: none; font-size: 10px; font-style: italic; padding: 12px 12px 0; text-align: center } .has-quick-subscribe .form-messages { font-size: 10px; font-style: italic; text-align: center } .has-quick-subscribe .form-messages, .has-quick-subscribe .has-policy-submit { max-height: 0; opacity: 0; overflow-y: hidden; -moz-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; } .has-quick-subscribe form.show-messages .form-messages, .has-quick-subscribe.expand .has-policy-submit { opacity: 1; max-height: 150px; -moz-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -webkit-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -o-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; -ms-transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; transition: max-height 0.3s ease 0s, opacity 0.3s ease 0s; } .has-quick-subscribe form .agree-to-terms { font-size: 10px; font-style: normal; margin: 0 auto; padding-top: 6px } .has-quick-subscribe form .agree-to-terms.fancy-checkbox [type="checkbox"] + label { color: inherit; display: inline-block; font-size: inherit; letter-spacing: inherit; line-height: 2em; margin: 0; text-transform: inherit } .has-quick-subscribe form .agree-to-terms label + a { display: inline-block; margin-left: 0.4em } .has-quick-subscribe .btn { font-size: 10px; width: 125px } #footer .has-etiquette-tagline { padding-top: 15px } #footer #etiquette-tagline { color: #5b626d; display: table; font-size: 36px; font-weight: 600; letter-spacing: 0; line-height: 1em; margin: 10px auto 20px } #footer #etiquette-tagline sup { font-size: 22px; vertical-align: sub } ul#footer-social { margin: 20px auto 30px } ul#footer-social li { display: inline-block } ul#footer-social li + li { margin-left: 90px } ul#footer-social li a { display: block } ul#footer-social li a svg { display: block } #footer .has-footer-menu { color: #5b626d; font-size: 10px; font-weight: 500 } #footer .has-footer-menu ul.footer-nav {} #footer .has-footer-menu ul.footer-nav li { display: inline-block } #footer .has-footer-menu ul.footer-nav li.menu-item-contact, #footer .has-footer-menu ul.footer-nav li + li { margin-left: 20px } #footer .has-footer-menu ul.footer-nav li.menu-item-contact:before, #footer .has-footer-menu ul.footer-nav li + li:before { content: '/'; display: block; position: absolute; top: 0; left: -12px } #footer .has-footer-menu ul.footer-nav li a { text-transform: uppercase } #footer .has-footer-menu ul.footer-nav li a:hover { color: #000000 } #footer .has-copyright-text { font-size: 9px; margin: 30px auto 10px } @media all and (max-width:767px) { body.template-index #footer { border-top-width: 12px } #footer #etiquette-tagline { font-size: 34px; font-weight: 600; margin: 0 auto; max-width: 90% } #footer #etiquette-tagline sup { font-size: 26px } ul#footer-social { margin: 40px auto 30px } ul#footer-social li + li { margin-left: 60px } #footer .has-footer-menu ul.footer-nav li { font-size: 10px; line-height: 3em } #footer .has-footer-menu ul.footer-nav li.menu-item-contact { margin-left: 0 } #footer .has-footer-menu ul.footer-nav li.menu-item-contact:before { display: none } } @media all and (min-width:471px) { .has-quick-subscribe .has-policy-submit .has-policy .form-group { float: right } .has-quick-subscribe .has-policy-submit .has-submit .form-group { float: left } } @media all and (max-width:470px) { .has-quick-subscribe .has-policy-submit .has-policy, .has-quick-subscribe .has-policy-submit .has-submit { text-align: center; width: 100% } #footer #etiquette-tagline { font-size: 30px } #footer #etiquette-tagline sup { font-size: 18px; line-height: inherit; vertical-align: top } ul#footer-social li + li { margin-left: 40px } } /********* 5. Misc Styles *********/ #heading-banner, #account-mobile-menu, #content { -moz-transition: background-color 1.2s ease 0s, opacity 0.8s ease 0s, transform 0.8s ease 0s; -webkit-transition: background-color 1.2s ease 0s, opacity 0.8s ease 0s, transform 0.8s ease 0s; -o-transition: background-color 1.2s ease 0s, opacity 0.8s ease 0s, transform 0.8s ease 0s; -ms-transition: background-color 1.2s ease 0s, opacity 0.8s ease 0s, transform 0.8s ease 0s; transition: background-color 1.2s ease 0s, opacity 0.8s ease 0s, transform 0.8s ease 0s; } body.loading-page #heading-banner, body.loading-page #account-mobile-menu, body.loading-page #content, body.loading-page #footer { opacity: 0; -moz-transform: translateY(40px); -webkit-transform: translateY(40px); -o-transform: translateY(40px); -ms-transform: translateY(40px); transform: translateY(40px); } #section-404 { background: transparent none center center / contain no-repeat; height: auto; margin: 10vw 0; padding-top: 40% } /* For safari */ @media not all and (min-resolution:.001dpcm) { @supports (-webkit-appearance:none) { [class*="container"].collection-grid > .row { display: block } [class*="container"].collection-grid.style-grid .cta-box { height: 327px } [class*="container"].collection-grid > .row { /*display: block*/ } .collection-grid-item a h5 .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .cta-box-area { display: table; width: 100% } .cta-box-area .cta-box-area-col-wrap { display: table-cell; vertical-align: top; width: 25% } .cta-box-area .cta-box-area-col-wrap.has-cta-box-sized2x2 { width: 50% } .cta-box-area .cta-box-area-col-wrap.has-cta-box-sized2x2 .cta-box { height: 714px } } } body.pagetpl-etq-basics-landing.is-mac .flexize, body.pagetpl-etq-basics-landing.is-ios .flexize { display: block } body.is-mac .has-etqb-chapters-landing .chapter-item a h4, body.is-ios .has-etqb-chapters-landing .chapter-item a h4 { height: 1.8em } @media all and (min-width:992px) { #product-wrap > .row.has-product { -webkit-flex-wrap: unset; flex-wrap: unset } } /* END: For safari */ .pagination, .pagination > li { align-items: center; display: flex; justify-content: center } .pagination > li { min-height: 34px; min-width: 33px } @media all and (max-width:1199px) { body #qab_container { bottom: 50px !important; height: auto !important } }