.gallery-detail .owl-carousel .owl-item>div,div.gallery-detail { -webkit-box-orient:vertical;-moz-box-orient:vertical;-webkit-box-direction:normal;-moz-box-direction:normal } html.no-touch div.gallery figure:hover .gallery-icon img, div.gallery figure:hover .gallery-icon img { opacity:.5 } .gallery-detail,section.product-overview article { -webkit-box-sizing:border-box;-moz-box-sizing:border-box } body.overlaidgallery { background:#000;padding:0;margin:0;height:100% } .gallery-overlay { display:none } #cboxTitle,#pagessubnav,#pagessubnav button,.owl-page,div.gallery { text-align:center } div.gallery figure { width:25%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;display:inline-block;vertical-align:top } div.gallery figcaption { font-size:.7em;height:2.7em;padding:3px;overflow:hidden } html.no-touch div.gallery figure:hover .gallery-icon, div.gallery figure:hover .gallery-icon { background:#000 } div.gallery { margin-left:-6px;margin-right:-6px } div.gallery:after,div.gallery:before { content:"";display:table } div.gallery:after { clear:both } @media only screen and (max-width :600px) { div.gallery figure { width:33.3333% } } @media only screen and (max-width :480px) { div.gallery figure { width:50% } } .owl-carousel .owl-wrapper:after { content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0 } .owl-carousel,.owl-carousel .owl-wrapper { display:none;position:relative } .owl-carousel { width:100%;-ms-touch-action:pan-y } .owl-carousel .owl-wrapper-outer { overflow:hidden;width:100% } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition:height .5s ease-in-out;-moz-transition:height .5s ease-in-out;-ms-transition:height .5s ease-in-out;-o-transition:height .5s ease-in-out;transition:height .5s ease-in-out } .owl-carousel .owl-item { float:left } .owl-controls .owl-buttons div,.owl-controls .owl-page { cursor:pointer } .owl-controls { -webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent } .grabbing { cursor:url(/wp-content/plugins/wh-gallery/grabbing.png) 8 8,move } .owl-carousel .owl-item,.owl-carousel .owl-wrapper { -webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0) } div.gallery.style-scrollingstrip { margin:3.5em 0;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);position:relative;left:50%; width:calc(100vw + 6px); max-width: 1400px; } div.gallery.style-scrollingstrip figure>div img { max-width:none; width:100%; /*height:100%; */ /* upsets Chrome where faux padding on outer element means parent height is 0 */ /*width:42vw*/ } div.gallery.style-scrollingstrip figure { /*width:42vw;*/ width: 176px; padding: 0 8px; overflow:hidden } div.gallery.style-scrollingstrip figure>div { overflow:hidden } div.gallery.style-scrollingstrip .flickity-prev-next-button { border-radius:0;width:11.5%;height:42%;max-height:116px;max-width:115px;background:rgba(0,0,0,.5) } div.gallery.style-scrollingstrip .flickity-prev-next-button:hover { background:rgba(0,0,0,.8) } div.gallery.style-scrollingstrip .flickity-prev-next-button.previous { left:0 } div.gallery.style-scrollingstrip .flickity-prev-next-button.next { right:0 } div.gallery.style-scrollingstrip .flickity-prev-next-button svg { position:absolute;left:36%;top:35%;width:33%;height:34% } div.gallery.style-scrollingstrip .flickity-prev-next-button .arrow { fill:#fff } div.gallery figure { padding:0 2px 4px;cursor:pointer;margin: 0; } div.gallery div.gallery-icon { height:0;padding-bottom:66.66667%;overflow:hidden } div.gallery.style-productgallery div.gallery-icon, div.gallery.style-scrollingstrip div.gallery-icon { padding-bottom:100%; } div.gallery.style-productgallery figcaption { text-transform:uppercase;color:#707070;margin:.95em 0 } div.gallery div.gallery-icon img { max-width:none;width:100% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(1) { width:100% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(1) { width:50% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(1) { width:33.3333% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(4),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(4):nth-last-child(1) { width:25% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(5),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(4) { width:50% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(6),div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(7),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(5),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(6),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(4),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(5),div.gallery.style-standard .gallery-item:nth-child(4):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(4):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(5):nth-last-child(1),div.gallery.style-standard .gallery-item:nth-child(5):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(6):nth-last-child(1) { width:33.3333% } div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(8),div.gallery.style-standard .gallery-item:nth-child(1):nth-last-child(9),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(7),div.gallery.style-standard .gallery-item:nth-child(2):nth-last-child(8),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(6),div.gallery.style-standard .gallery-item:nth-child(3):nth-last-child(7),div.gallery.style-standard .gallery-item:nth-child(4):nth-last-child(4),div.gallery.style-standard .gallery-item:nth-child(4):nth-last-child(5),div.gallery.style-standard .gallery-item:nth-child(4):nth-last-child(6),div.gallery.style-standard .gallery-item:nth-child(5):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(5):nth-last-child(4),div.gallery.style-standard .gallery-item:nth-child(6):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(6):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(7):nth-last-child(1),div.gallery.style-standard .gallery-item:nth-child(7):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(8):nth-last-child(1) { width:25% } div.gallery.style-standard .gallery-item:nth-child(5):nth-last-child(5),div.gallery.style-standard .gallery-item:nth-child(6):nth-last-child(4),div.gallery.style-standard .gallery-item:nth-child(7):nth-last-child(3),div.gallery.style-standard .gallery-item:nth-child(8):nth-last-child(2),div.gallery.style-standard .gallery-item:nth-child(9):nth-last-child(1) { width:20% } .entry-content div.gallery.style-standard:last-child { margin-bottom:80px } @media screen and (max-width:767px) { div.gallery.style-scrollingstrip { margin:3.5em 0 } } body.overlaidgallery>.gallery-overlay.active { display:block;width:100%;height:100%;background:rgba(0,0,0,.8);position:fixed;top:0;left:0;z-index:999999999 } .gallery-detail { background:0 0;position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:15vh 0 0 } .gallery-detail .owl-carousel { height:100% } .gallery-detail .owl-carousel .owl-item .galleryrest { padding:1em 1em 0;font-size:1.1em;color:#fff;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;text-align:center } .gallery-detail .owl-carousel .owl-item .galleryrest h2 { font-size:1.25em } .gallery-detail .owl-carousel .owl-item .galleryrest :not(h2) { display:none } .gallery-detail,.owl-carousel,.owl-item,.owl-item>div,.owl-wrapper,.owl-wrapper-outer { height:100% } .gallery-detail .owl-carousel .owl-item>div { display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column } .gallery-detail .owl-carousel .owl-item>div .galleryimg { -webkit-box-flex:1;-moz-box-flex:1;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;position:relative } .gallery-detail .owl-carousel .owl-item>div .galleryimg img { width:100%;height:100%;position:absolute;object-fit:contain;top:0;left:0 } html.no-touch .gallery-detail .owl-carousel div.owl-next:hover, html.no-touch .gallery-detail .owl-carousel div.owl-prev:hover { color:#fff } .gallery-detail .owl-carousel div.owl-next:hover, .gallery-detail .owl-carousel div.owl-prev:hover { color:#fff } .gallery-detail .owl-carousel .owl-pagination { margin-top:2em } .owl-page { display:inline-block;padding:0 6px;color:#f7f7f7 } .owl-page.active, html.no-touch .owl-page:hover, .owl-page:hover { color:#fff;background:#555 } .gallery-overlay .cross { cursor:pointer;font-family:FontAwesome;font-size:21px;display:block;position:absolute;z-index:10000;top:80px;right:54px;text-align:right;margin-right:5px;color:#7b7b7b } html.no-touch .gallery-overlay .cross:hover, .gallery-overlay .cross:hover { color:#fff } .owl-prev { margin-right:20px;padding-right:3px;left:20px;left:-100px } .owl-next { margin-left:20px;padding-left:3px;right:20px;right:-100px } .gallery-detail .owl-carousel div.owl-next,.gallery-detail .owl-carousel div.owl-prev { position:absolute;z-index:10000;top:50%;display:block;color:#888;width:100px;height:100px;margin-top:calc(-30px - 7.5vh);font-size:60px;font-family:FontAwesome;font-weight:400;font-style:normal;-webkit-font-smoothing:antialiased;cursor:pointer;line-height:100px;text-align:center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box } div#pag { text-align:center;color:#fff;padding:1em 0 } .owl-pagination { display:none } .gallery-detail .owl-carousel { -webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;position:relative;margin:0 120px;width:calc(100% - 240px);box-sizing:border-box } .owl-carousel .owl-wrapper-outer { position:absolute } div.gallery-detail { display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column } @media only screen and (max-width:489px) { div.gallery .gallery-item { pointer-events:none } } /*! Flickity v2.0.5 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled { position:relative } .flickity-enabled:focus { outline:0 } .flickity-viewport { overflow:hidden;position:relative;height:100% } .flickity-slider { position:absolute;width:100%;height:100% } .flickity-enabled.is-draggable { -webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none } .flickity-enabled.is-draggable .flickity-viewport { cursor:move;cursor:-webkit-grab;cursor:grab } .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor:-webkit-grabbing;cursor:grabbing } .flickity-prev-next-button { position:absolute;top:50%;width:44px;height:44px;border:none;border-radius:50%;background:#fff;background:hsla(0,0%,100%,.75);cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%) } .flickity-prev-next-button:hover { background:#fff } .flickity-prev-next-button:focus { outline:0;box-shadow:0 0 0 5px #09F } .flickity-prev-next-button:active { opacity:.6 } .flickity-prev-next-button.previous { left:10px } .flickity-prev-next-button.next { right:10px } .flickity-rtl .flickity-prev-next-button.previous { left:auto;right:10px } .flickity-rtl .flickity-prev-next-button.next { right:auto;left:10px } .flickity-prev-next-button:disabled { opacity:.3;cursor:auto } .flickity-prev-next-button svg { position:absolute;left:20%;top:20%;width:60%;height:60% } .flickity-prev-next-button .arrow { fill:#333 } .flickity-page-dots { position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1 } .flickity-rtl .flickity-page-dots { direction:rtl } .flickity-page-dots .dot { display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer } .flickity-page-dots .dot.is-selected { opacity:1 } /* * Core Owl Carousel CSS File * v1.3.3 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel{ display: none; position: relative; width: 100%; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper{ display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer{ overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight{ -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item{ float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div{ cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } /* mouse grab icon */ .grabbing { cursor:url(/wp-content/plugins/wh-gallery/grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item{ -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); } div.wpcf7 { margin: 0; padding: 0; } div.wpcf7 .screen-reader-response { position: absolute; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); height: 1px; width: 1px; margin: 0; padding: 0; border: 0; } div.wpcf7-response-output { margin: 2em 0.5em 1em; padding: 0.2em 1em; border: 2px solid #ff0000; } div.wpcf7-mail-sent-ok { border: 2px solid #398f14; } div.wpcf7-mail-sent-ng, div.wpcf7-aborted { border: 2px solid #ff0000; } div.wpcf7-spam-blocked { border: 2px solid #ffa500; } div.wpcf7-validation-errors, div.wpcf7-acceptance-missing { border: 2px solid #f7e700; } .wpcf7-form-control-wrap { position: relative; } span.wpcf7-not-valid-tip { color: #f00; font-size: 1em; font-weight: normal; display: block; } .use-floating-validation-tip span.wpcf7-not-valid-tip { position: absolute; top: 20%; left: 20%; z-index: 100; border: 1px solid #ff0000; background: #fff; padding: .2em .8em; } span.wpcf7-list-item { display: inline-block; margin: 0 0 0 1em; } span.wpcf7-list-item-label::before, span.wpcf7-list-item-label::after { content: " "; } .wpcf7-display-none { display: none; } div.wpcf7 .ajax-loader { visibility: hidden; display: inline-block; background-image: url('/wp-content/plugins/contact-form-7/images/ajax-loader.gif'); width: 16px; height: 16px; border: none; padding: 0; margin: 0 0 0 4px; vertical-align: middle; } div.wpcf7 .ajax-loader.is-active { visibility: visible; } div.wpcf7 div.ajax-error { display: none; } div.wpcf7 .placeheld { color: #888; } div.wpcf7 input[type="file"] { cursor: pointer; } div.wpcf7 input[type="file"]:disabled { cursor: default; } div.wpcf7 .wpcf7-submit:disabled { cursor: not-allowed; } .taxonomy-images-the-terms { margin: 10px 0; padding: 0; zoom: 1; } .taxonomy-images-the-terms:before, .taxonomy-images-the-terms:after { clear: both; content: "\0020"; display: block; height: 0; visibility: hidden; } .taxonomy-images-the-terms li, .taxonomy-images-the-terms a, .taxonomy-images-the-terms img { float: left; margin: 0; padding: 0; } .taxonomy-images-the-terms li { list-style-type: none; margin: 0 10px 10px 0; } /*! Flickity v2.0.11 http://flickity.metafizzy.co ---------------------------------------------- */ .flickity-enabled{position:relative}.flickity-enabled:focus{outline:0}.flickity-viewport{overflow:hidden;position:relative;height:100%}.flickity-slider{position:absolute;width:100%;height:100%}.flickity-enabled.is-draggable{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.flickity-enabled.is-draggable .flickity-viewport{cursor:move;cursor:-webkit-grab;cursor:grab}.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down{cursor:-webkit-grabbing;cursor:grabbing}.flickity-prev-next-button{position:absolute;top:50%;width:44px;height:44px;border:none;border-radius:50%;background:#fff;background:hsla(0,0%,100%,.75);cursor:pointer;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.flickity-prev-next-button:hover{background:#fff}.flickity-prev-next-button:focus{outline:0;box-shadow:0 0 0 5px #09f}.flickity-prev-next-button:active{opacity:.6}.flickity-prev-next-button.previous{left:10px}.flickity-prev-next-button.next{right:10px}.flickity-rtl .flickity-prev-next-button.previous{left:auto;right:10px}.flickity-rtl .flickity-prev-next-button.next{right:auto;left:10px}.flickity-prev-next-button:disabled{opacity:.3;cursor:auto}.flickity-prev-next-button svg{position:absolute;left:20%;top:20%;width:60%;height:60%}.flickity-prev-next-button .arrow{fill:#333}.flickity-page-dots{position:absolute;width:100%;bottom:-25px;padding:0;margin:0;list-style:none;text-align:center;line-height:1}.flickity-rtl .flickity-page-dots{direction:rtl}.flickity-page-dots .dot{display:inline-block;width:10px;height:10px;margin:0 8px;background:#333;border-radius:50%;opacity:.25;cursor:pointer}.flickity-page-dots .dot.is-selected{opacity:1}.wpml-ls-legacy-list-horizontal{border:1px solid transparent;padding:7px;clear:both}.wpml-ls-legacy-list-horizontal>ul{padding:0;margin:0 !important;list-style-type:none}.wpml-ls-legacy-list-horizontal .wpml-ls-item{padding:0;margin:0;list-style-type:none;display:inline-block}.wpml-ls-legacy-list-horizontal a{display:block;text-decoration:none;padding:5px 10px;line-height:1}.wpml-ls-legacy-list-horizontal a span{vertical-align:middle}.wpml-ls-legacy-list-horizontal .wpml-ls-flag{display:inline;vertical-align:middle;width:18px;height:12px}.wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-list-horizontal .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer{margin-bottom:30px}.wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer>ul{text-align:center} /* * Frontend CSS for the Related plugin. * Also used for Related_du. */ /* * CSS for Simple View */ /* None */ /* * CSS for Extended View */ /* UL */ ul.related-posts.extended_view, ul.related_du-posts.extended_view { margin: 0; list-style: none; } /* LI */ li.related-post.extended_view, li.related_du-post.extended_view { position: relative; display: inline-block; float: left; list-style: none; width: 31%; min-height: 20px; margin: 0 2% 10px 0; padding: 0; cursor: pointer; } /* A */ .extended_view a.related-post-link, .extended_view a.related_du-post-link { } /* IMG */ .extended_view img.related-posts-image, .extended_view img.related_du-posts-image { width: 100%; } /* SPAN */ .extended_view span.related-post-title, .extended_view span.related_du-post-title { font-size: 12px; position: absolute; width: 100%; overflow: hidden; background-color: #444; background: rgba( 0, 0, 0, 0.5 ); color: #fff; text-align: center; margin: 0; bottom: 0; left: 0; height: 20px; line-height: 20px; } @charset "UTF-8"; /*! Theme Name: Fabric */ /* $nav-breakpoint $overview-1-up-breakpoint $overview-2-up-breakpoint $overview-3-up-breakpoint $overview-4-up-breakpoint */ /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS and IE text size adjust after device orientation change, * without disabling user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 * and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; color: inherit; /* amb */ text-decoration: none; /* amb */ } /** * Improve readability of focused elements when they are also in an * active/hover state. */ a:active, a:hover, a:focus { outline: 0; text-decoration: underline; /* amb */ } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ box-sizing: content-box; /* 2 */ } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */ /* * What follows is the result of much research on cross-browser styling. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Kroc Camen, and the H5BP dev community and team. */ /* ========================================================================== Base styles: opinionated defaults ========================================================================== */ html { color: black; font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: * https://twitter.com/miketaylr/status/12228805301 * * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #eeeeee; text-shadow: none; } ::selection { background: #eeeeee; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } /* * Remove the gap between audio, canvas, iframes, * images, videos and the bottom of their containers: * https://github.com/h5bp/html5-boilerplate/issues/440 */ audio, canvas, iframe, img, svg, video { vertical-align: middle; } /* * Remove default fieldset styles. */ fieldset { border: 0; margin: 0; padding: 0; } /* * Allow only vertical resizing of textareas. */ textarea { resize: vertical; } /* ========================================================================== Browser Upgrade Prompt ========================================================================== */ .browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ========================================================================== Helper classes ========================================================================== */ /* * Image replacement * amb - dropped from h5bp, version ??? */ /* * Hide from both screenreaders and browsers: h5bp.com/u */ .hidden { display: none !important; } /* * Hide only visually, but have it available for screenreaders: h5bp.com/v * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility */ .assistive-text, body > header .site-title, body > .sticky-wrapper > header .site-title { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } /* * Extends the .visuallyhidden class to allow the element to be focusable * when navigated to via the keyboard: h5bp.com/p */ .assistive-text:active, .assistive-text:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } /* * Hide visually and from screenreaders, but maintain layout */ main:before, body > header:before, body > .sticky-wrapper > header:before, body > header #utility:before, body > .sticky-wrapper > header #utility:before, body > footer:before, .mainwrap:before, body.single-product section.keyinfo:before, .window-block:before, div.blockquote:before, div.breadcrumbs:before, main:after, body > header:after, body > .sticky-wrapper > header:after, body > header #utility:after, body > .sticky-wrapper > header #utility:after, body > footer:after, .mainwrap:after, body.single-product section.keyinfo:after, .window-block:after, div.blockquote:after, div.breadcrumbs:after { /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ content: " "; /* 1 */ display: table; /* 2 */ } main:after, body > header:after, body > .sticky-wrapper > header:after, body > header #utility:after, body > .sticky-wrapper > header #utility:after, body > footer:after, .mainwrap:after, body.single-product section.keyinfo:after, .window-block:after, div.blockquote:after, div.breadcrumbs:after { clear: both; } html.lt-ie7 main, html.lt-ie7 body > header, html.lt-ie7 body > .sticky-wrapper > header, html.lt-ie7 body > header #utility, body > header html.lt-ie7 #utility, html.lt-ie7 body > footer, html.lt-ie7 .mainwrap, html.lt-ie7 body.single-product section.keyinfo, body.single-product html.lt-ie7 section.keyinfo, html.lt-ie7 .window-block, html.lt-ie7 div.blockquote, html.lt-ie7 div.breadcrumbs { /* * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ zoom: 1; } /* ========================================================================== EXAMPLE Media Queries for Responsive Design. These examples override the primary ('mobile first') styles. Modify as content requires. ========================================================================== */ @media only screen and (min-width: 35em) { /* Style adjustments for viewports that meet the condition */ } @media print, (-o-min-device-pixel-ratio: 5 / 4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { /* Style adjustments for high resolution devices */ } /* ========================================================================== Print styles. Inlined to avoid required HTTP connection: h5bp.com/r ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } /* amb... */ .overview a, .related-wrap a, .related2-wrap a, .recent-wrap a { text-decoration: none !important; } .overview a[href]:after, .related-wrap a[href]:after, .related2-wrap a[href]:after, .recent-wrap a[href]:after { content: "" !important; } body.home > .cycle-slideshow, nav, #wpadminbar, footer .social, footer .links, footer .fsb { display: none !important; } .call-to-action { margin: 0; padding: 0; font-size: 1em; text-align: left; } .related-wrap { width: auto; max-width: none; margin-left: 0; transform: none; } .read-more, a.chevron { display: none !important; } body > header * { position: static !important; } body > header img[src*="logo"] { display: none; } body > header::before { content: url(/wp-content/themes/fabric/img/logotypeblack.svg); width: 100%; height: 60px; } } /* html, body { overflow-x: hidden; } */ html, body { overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { line-height: 1; } /* add a default with double the top margin to the bottom */ a { text-decoration: none; color: inherit; } a:hover { text-decoration: underline; } a:active { text-decoration: none; } main .entry-content a:link, main .entry-content a:visited { text-decoration: underline; } main .entry-content a:focus, main .entry-content a:hover, main .entry-content a:active { color: gray; } nav ul, nav li, nav a { padding: 0; margin: 0; } body > header .main-navigation, body > .sticky-wrapper > header .main-navigation, .footer-menus > div, body.single-product .entry-content .pane.Description .ac_pane, body.single-product .entry-content .pane.Fit .ac_pane, body.tax-product_category article.product, .overlaid-image > div:not(.videowrap), .overlaid-image > a > div:not(.videowrap), div.blockquote blockquote, div.review blockquote { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } a { color: inherit; text-decoration: none; } a:focus, a:hover, a:active { text-decoration: underline; } body > header a:focus, body > header a:hover, body > header a:active { text-decoration: underline; text-decoration: none; } header nav a:focus, header nav a:hover, header nav a:active { text-decoration: none; } footer .social a:focus, footer .social a:hover, footer .social a:active { text-decoration: none; } .size-windowwidth { display: block; width: 100vw; margin-left: 50% !important; margin-right: 0 !important; position: relative; left: -50vw; max-width: none !important; } .size-contentwidth { display: block; width: 100%; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; } .size-extrawidth { display: block; width: 1080px; margin-left: 50% !important; margin-right: 0 !important; position: relative; left: -540px; max-width: 100vw !important; } @media only screen and (max-width: 1080px) { .size-extrawidth { left: -50vw; } } /* WordPress Core Styles -------------------------------------------------------------- */ .alignnone { margin: 5px 20px 20px 0; } .aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; } .alignright { float: right; margin: 5px 0 20px 20px; } .alignleft { float: left; margin: 5px 20px 20px 0; } .aligncenter { display: block; margin: 5px auto 5px auto; } a img.alignright { float: right; margin: 5px 0 20px 20px; } a img.alignnone { margin: 5px 20px 20px 0; } a img.alignleft { float: left; margin: 5px 20px 20px 0; } a img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .wp-caption { background: transparent; border: none; padding: 0; text-align: center; } .wp-caption.alignnone { margin: 5px 20px 20px 0; } .wp-caption.alignleft { margin: 5px 20px 20px 0; } .wp-caption.alignright { margin: 5px 0 20px 20px; } .wp-caption img { border: none; height: auto; margin: 0; max-width: none; padding: 0; width: 100%; } .wp-caption p.wp-caption-text, .wp-caption figcaption.wp-caption-text { font-size: 0.7em; line-height: 1.1; margin: 0.5em 0; padding: 0 4px 5px; } /* recommended for $content_width */ .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail, img { max-width: 100%; height: auto; } /* post_class() */ /* .post-id .post .attachment .sticky .hentry (hAtom microformat pages) .category-ID .category-name .tag-name .format-name See http://codex.wordpress.org/Function_Reference/post_class for what appears where */ /* see also http://codex.wordpress.org/Function_Reference/body_class */ /* More at: http://www.wpbeginner.com/wp-themes/default-wordpress-generated-css-cheat-sheet-for-beginners/ http://wp.tutsplus.com/tutorials/creative-coding/working-with-classes-and-ids-generated-by-wordpress/ http://digwp.com/2010/05/default-wordpress-css-styles-hooks/ (by Chris Coyier) */ /* html { max-width: 1000px; margin: 0 auto; background: #eee; /* Fills the page * / position: relative; /* Fix for absolute positioning * / } Fixed position elements and things sized based on viewport will go bonkers Don't forget that transforms will also kill fixed positioning, making it behave like absolute */ img { width: 100%; height: auto; } body { font-family: 'Nimbus Sans W01 D'; max-width: 3000px; margin-left: auto; margin-right: auto; background: white; } body.home { background: #f5f5f5; } html { background: black; } main { position: relative; } @media only screen and (min-width: 1073px) { header.stuck { position: fixed; top: -44px; width: 100%; background: white; z-index: 30; max-width: 3000px; } body.admin-bar header.stuck { top: -12px; } } @media only screen and (min-width: 3001px) { header.stuck { left: calc( 50vw - 1500px ); } } body > header, body > .sticky-wrapper > header { /* position: absolute; z-index: 3; top: 0; width: 100%; background: white; &.fixed { position: fixed; top: -44px; ~ div { //margin-top: 134px; } } */ background: white; border-bottom: 1px solid #F2EEEF; } body > header img[src*="logo"], body > .sticky-wrapper > header img[src*="logo"] { width: 160px; height: 63px; } @media only screen and (min-width: 1073px) { body > header img[src*="logo"], body > .sticky-wrapper > header img[src*="logo"] { width: 130px; height: 51px; } } body > header > a, body > .sticky-wrapper > header > a { margin-right: -210px; float: left; padding: 16px 0 22px 50px; padding: 20px 0 18px 50px; padding: 20px 0 18px 30px; } @media only screen and (min-width: 1073px) { body > header > a, body > .sticky-wrapper > header > a { padding: 32px 0 18px 30px; } } body > header #utility, body > .sticky-wrapper > header #utility { width: 100%; border-bottom: 1px solid #F2EEEF; } body > header .localise, body > .sticky-wrapper > header .localise { float: left; } body > header .social, body > .sticky-wrapper > header .social { float: right; margin-right: 20px; } @media only screen and (min-width: 375px) and (max-width: 430px) { body > .sticky-wrapper > header .social { float: right; margin-right: 0; } } /*@media only screen and (max-width: 578px) {*/ @media only screen and (max-width: 374px) { body > .sticky-wrapper > header .social { float: right; margin-right: 20px; text-align: center; margin: 0; width: 100%; display: block; } } body > header .main-navigation, body > .sticky-wrapper > header .main-navigation { width: 100%; text-align: center; margin: 34px 0 37px; margin: 32px 0 23px; margin: 28px 0 27px; margin: 28px 0 11px; margin: 38px 0 18px; margin: 32px 0 0; font-size: 0.8125rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.05em; } @media only screen and (min-width: 1073px) { body > header .main-navigation, body > .sticky-wrapper > header .main-navigation { padding: 0 200px; } body > header .main-navigation .menu-toggle, body > .sticky-wrapper > header .main-navigation .menu-toggle { display: none; } } body > header .main-navigation .menu-toggle, body > .sticky-wrapper > header .main-navigation .menu-toggle { float: right; margin: 0 30px 0 0; position: relative; height: 40px; width: 50px; cursor: pointer; } body > header .main-navigation .menu-toggle span, body > header .main-navigation .menu-toggle span::before, body > header .main-navigation .menu-toggle span::after, body > .sticky-wrapper > header .main-navigation .menu-toggle span, body > .sticky-wrapper > header .main-navigation .menu-toggle span::before, body > .sticky-wrapper > header .main-navigation .menu-toggle span::after { cursor: pointer; border-radius: 1px; height: 2px; width: 40px; background: black; position: absolute; display: block; content: ''; transition: all 250ms ease-in-out; } body > header .main-navigation .menu-toggle span, body > .sticky-wrapper > header .main-navigation .menu-toggle span { top: 20px; left: 0; text-indent: -9999em; } body > header .main-navigation .menu-toggle span::before, body > .sticky-wrapper > header .main-navigation .menu-toggle span::before { top: -12px; } body > header .main-navigation .menu-toggle span::after, body > .sticky-wrapper > header .main-navigation .menu-toggle span::after { bottom: -12px; } body > header .main-navigation .menu-toggle:hover span, body > header .main-navigation .menu-toggle:hover span::before, body > header .main-navigation .menu-toggle:hover span::after, body > .sticky-wrapper > header .main-navigation .menu-toggle:hover span, body > .sticky-wrapper > header .main-navigation .menu-toggle:hover span::before, body > .sticky-wrapper > header .main-navigation .menu-toggle:hover span::after { background: #999; } body > header .main-navigation .menu-toggle.active span, body > .sticky-wrapper > header .main-navigation .menu-toggle.active span { background-color: transparent; } body > header .main-navigation .menu-toggle.active span::before, body > header .main-navigation .menu-toggle.active span::after, body > .sticky-wrapper > header .main-navigation .menu-toggle.active span::before, body > .sticky-wrapper > header .main-navigation .menu-toggle.active span::after { top: 0; } body > header .main-navigation .menu-toggle.active span::before, body > .sticky-wrapper > header .main-navigation .menu-toggle.active span::before { transform: rotate(45deg); } body > header .main-navigation .menu-toggle.active span::after, body > .sticky-wrapper > header .main-navigation .menu-toggle.active span::after { transform: rotate(-45deg); } @media only screen and (min-width: 1073px) { body > header .main-navigation, body > .sticky-wrapper > header .main-navigation { font-size: 0.8825rem; } } body > header .main-navigation > ul, body > .sticky-wrapper > header .main-navigation > ul { display: none; clear: both; margin: 30px 0 0; border-top: 1px solid #F2EEEF; padding: 40px 0; list-style-type: none; } @media only screen and (min-width: 1073px) { body > header .main-navigation > ul, body > .sticky-wrapper > header .main-navigation > ul { display: block !important; clear: none; margin: 0; padding: 0; border-top: none; } } body > header .main-navigation li, body > .sticky-wrapper > header .main-navigation li { margin: 0 32px; display: block; } @media only screen and (min-width: 1073px) { body > header .main-navigation li, body > .sticky-wrapper > header .main-navigation li { display: inline-block; padding: 4px 0 20px; padding: 4px 0 38px; } } body > header .main-navigation li a, body > .sticky-wrapper > header .main-navigation li a { display: block; padding: 0; padding: 12px 0; } @media only screen and (min-width: 1073px) { body > header .main-navigation li a, body > .sticky-wrapper > header .main-navigation li a { padding: 0.8em 0 0.6em; } body > header .main-navigation li a:link, body > header .main-navigation li a:visited, body > .sticky-wrapper > header .main-navigation li a:link, body > .sticky-wrapper > header .main-navigation li a:visited { border-bottom: 1px solid transparent; outline: none; text-decoration: none; } body > header .main-navigation li a:focus, body > header .main-navigation li a:hover, body > header .main-navigation li a:active, body > .sticky-wrapper > header .main-navigation li a:focus, body > .sticky-wrapper > header .main-navigation li a:hover, body > .sticky-wrapper > header .main-navigation li a:active { border-bottom: 1px solid black; outline: none; text-decoration: none; } } @media only screen and (min-width: 1073px) { body > header .main-navigation .current-menu-item > a, body > header .main-navigation .current-menu-parent > a .current-menu-ancestor > a, body > .sticky-wrapper > header .main-navigation .current-menu-item > a, body > .sticky-wrapper > header .main-navigation .current-menu-parent > a .current-menu-ancestor > a { border-bottom: 1px solid black !important; } } body > header .main-navigation .sub-menu, body > .sticky-wrapper > header .main-navigation .sub-menu { text-transform: capitalize; padding: 34px 0px; } body > header .main-navigation .sub-menu a, body > .sticky-wrapper > header .main-navigation .sub-menu a { padding: 7px 0; } @media only screen and (min-width: 1073px) { body > header .main-navigation .sub-menu, body > .sticky-wrapper > header .main-navigation .sub-menu { position: absolute; display: none; background: white; padding: 0px; font-size: 0.7825rem; text-transform: capitalize; } body > header .main-navigation .sub-menu::before, body > .sticky-wrapper > header .main-navigation .sub-menu::before { display: block; content: ' '; position: absolute; width: 100%; left: 0; height: 50px; background: transparent; top: -50px; } body > header .main-navigation .sub-menu li, body > .sticky-wrapper > header .main-navigation .sub-menu li { margin: 0; margin: 29px 0 37px; padding: 0; padding-left: 10px; padding-right: 10px; display: block; text-align: left; /* columnar display: inline-block; // fix column alignment width: 100%; // fix column alignment */ display: inline-block; } body > header .main-navigation .sub-menu a, body > .sticky-wrapper > header .main-navigation .sub-menu a { position: relative; } body > header .main-navigation .sub-menu a:link, body > header .main-navigation .sub-menu a:visited, body > .sticky-wrapper > header .main-navigation .sub-menu a:link, body > .sticky-wrapper > header .main-navigation .sub-menu a:visited { border-bottom: 1px solid transparent; outline: none; text-decoration: none; } body > header .main-navigation .sub-menu a:focus, body > header .main-navigation .sub-menu a:hover, body > header .main-navigation .sub-menu a:active, body > .sticky-wrapper > header .main-navigation .sub-menu a:focus, body > .sticky-wrapper > header .main-navigation .sub-menu a:hover, body > .sticky-wrapper > header .main-navigation .sub-menu a:active { border-bottom: 1px solid black; border-bottom: 1px solid transparent; outline: none; text-decoration: none; } body > header .main-navigation .sub-menu a:focus::before, body > header .main-navigation .sub-menu a:hover::before, body > header .main-navigation .sub-menu a:active::before, body > .sticky-wrapper > header .main-navigation .sub-menu a:focus::before, body > .sticky-wrapper > header .main-navigation .sub-menu a:hover::before, body > .sticky-wrapper > header .main-navigation .sub-menu a:active::before { position: absolute; width: 100%; display: block; content: ' '; border-bottom: 1px solid black; bottom: 0; } body > header .main-navigation .sub-menu .current-menu-item a, body > .sticky-wrapper > header .main-navigation .sub-menu .current-menu-item a { border-bottom: 1px solid transparent !important; } body > header .main-navigation .menu-item-has-children:hover .sub-menu, body > .sticky-wrapper > header .main-navigation .menu-item-has-children:hover .sub-menu { display: block; z-index: 200; left: 0; right: 0; /* columns -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; width: 500px; padding: 0 calc( 50vw - 250px ) 30px; */ width: 100vw; text-align: center; top: 157px; border-top: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; } body > header .main-navigation .menu-item-has-children:hover .sub-menu a:after, body > .sticky-wrapper > header .main-navigation .menu-item-has-children:hover .sub-menu a:after { content: '|'; position: absolute; right: -15px; } body > header .main-navigation .menu-item-has-children:hover .sub-menu li:last-of-type a:after, body > .sticky-wrapper > header .main-navigation .menu-item-has-children:hover .sub-menu li:last-of-type a:after { display: none; } } body.admin-bar > header .main-navigation .menu-item-has-children:hover .sub-menu, body.admin-bar > .sticky-wrapper > header .main-navigation .menu-item-has-children:hover .sub-menu { top: 189px; } body > .sticky-wrapper > header.stuck .main-navigation .menu-item-has-children:hover .sub-menu { top: 157px; } body.admin-bar > .sticky-wrapper > header.stuck .main-navigation .menu-item-has-children:hover .sub-menu { top: 157px; } body > footer { color: white; background: url(/wp-content/themes/fabric/img/fabric-logo-white.svg) no-repeat bottom black; background-size: 100% auto; background-size: 96vw auto; background-position: bottom -18vw left 2vw; padding-bottom: 20vw; clear: both; } @media only screen and (min-width: 3001px) { body > footer { background-size: 2880px auto; background-position: bottom -540px left 60px; padding-bottom: 600px; } } .footer-menus { text-align: center; max-width: 850px; margin: 0 auto; padding: 0 20px; } .footer-menus > div { width: 50%; display: inline-block; vertical-align: top; text-align: left; font-size: 0.75rem; margin-bottom: 1.2em; } @media only screen and (min-width: 600px) { .footer-menus > div { width: 25%; } } .footer-menus h2 { font-size: 1em; text-transform: uppercase; } .footer-menus ul { margin: 0; padding: 0; list-style-type: none; } .footer-menus li { margin: 1.2em 0; } .legendlike { font-weight: 700; text-transform: uppercase; font-size: 0.9em; border-bottom: 1px solid black; width: 100%; padding-bottom: 1em; margin: 3em 0 0; display: block; } .legendlike::before { content: '/ '; } .entry-content .wpcf7-form { max-width: 350px; /* Change Autocomplete styles in Chrome*/ } .entry-content .wpcf7-form legend, .entry-content .wpcf7-form .legendlike { font-weight: 700; text-transform: uppercase; font-size: 0.9em; border-bottom: 1px solid black; width: 100%; padding-bottom: 1em; margin-bottom: 0.6em; } .entry-content .wpcf7-form legend::before, .entry-content .wpcf7-form .legendlike::before { content: '/ '; } .entry-content .wpcf7-form fieldset { margin: 3em 0 0.6em; } .entry-content .wpcf7-form span.required { color: gray; font-size: 0.8em; } .entry-content .wpcf7-form input:not([type="submit"]):not([type="reset"]) { text-transform: uppercase; font-size: 0.75rem; border: none; background-color: inherit; color: inherit; border-bottom: 1px #ccc solid; padding: 4px 0; display: block; width: 100%; text-align: left; outline: none; } .entry-content .wpcf7-form input:not([type="submit"]):not([type="reset"])::-webkit-input-placeholder { color: inherit; } .entry-content .wpcf7-form input:not([type="submit"]):not([type="reset"])::-moz-input-placeholder { color: inherit; opacity: 1; } .entry-content .wpcf7-form input:not([type="submit"]):not([type="reset"]):-ms-input-placeholder { color: inherit; } .entry-content .wpcf7-form input[type="button"], .entry-content .wpcf7-form input[type="reset"], .entry-content .wpcf7-form input[type="submit"] { background: white; border: 1px solid black; padding: 8px 44px; text-transform: uppercase; font-size: 0.9em; } .entry-content .wpcf7-form input[type="button"]:focus, .entry-content .wpcf7-form input[type="button"]:hover, .entry-content .wpcf7-form input[type="button"]:active, .entry-content .wpcf7-form input[type="reset"]:focus, .entry-content .wpcf7-form input[type="reset"]:hover, .entry-content .wpcf7-form input[type="reset"]:active, .entry-content .wpcf7-form input[type="submit"]:focus, .entry-content .wpcf7-form input[type="submit"]:hover, .entry-content .wpcf7-form input[type="submit"]:active { outline: none; background: black; color: white; } .entry-content .wpcf7-form textarea { border-color: #ccc; width: 100%; box-sizing: border-box; } .entry-content .wpcf7-form input:-webkit-autofill, .entry-content .wpcf7-form input:-webkit-autofill:hover, .entry-content .wpcf7-form input:-webkit-autofill:focus input:-webkit-autofill, .entry-content .wpcf7-form textarea:-webkit-autofill, .entry-content .wpcf7-form textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, .entry-content .wpcf7-form select:-webkit-autofill, .entry-content .wpcf7-form select:-webkit-autofill:hover, .entry-content .wpcf7-form select:-webkit-autofill:focus { background-color: transparent !important; -webkit-box-shadow: 0 0 0 1000px white inset; } .signup-form { text-align: center; max-width: 286px; margin: 4em auto 6em; /* Change Autocomplete styles in Chrome*/ } .signup-form h2 { font-size: 1.7rem; } .signup-form p { /* text-transform: uppercase; font-size: 0.75rem; border-bottom: 1px white solid; padding: 1.5em 0; */ } .signup-form input:not([type="submit"]):not([type="reset"]) { text-transform: uppercase; font-size: 0.75rem; border: none; background-color: inherit; color: inherit; border-bottom: 1px white solid; padding: 1.5em 0; display: block; width: 100%; text-align: center; outline: none; border-radius: 0; } .signup-form input:not([type="submit"]):not([type="reset"])::-webkit-input-placeholder { color: inherit; } .signup-form input:not([type="submit"]):not([type="reset"])::-moz-input-placeholder { color: inherit; opacity: 1; } .signup-form input:not([type="submit"]):not([type="reset"]):-ms-input-placeholder { color: inherit; } .signup-form input[type="button"], .signup-form input[type="reset"], .signup-form input[type="submit"] { background: transparent; border: 1px solid white; padding: 8px 24px; text-transform: uppercase; font-size: 0.75rem; margin-top: 1em; border-radius: 0; } .signup-form input[type="button"]:focus, .signup-form input[type="button"]:hover, .signup-form input[type="button"]:active, .signup-form input[type="reset"]:focus, .signup-form input[type="reset"]:hover, .signup-form input[type="reset"]:active, .signup-form input[type="submit"]:focus, .signup-form input[type="submit"]:hover, .signup-form input[type="submit"]:active { outline: none; background: white; color: black; } .signup-form div.wpcf7 .ajax-loader { display: block; } .signup-form div.wpcf7-response-output { font-size: 0.75rem; border: none !important; } .signup-form input:-webkit-autofill, .signup-form input:-webkit-autofill:hover, .signup-form input:-webkit-autofill:focus input:-webkit-autofill, .signup-form textarea:-webkit-autofill, .signup-form textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, .signup-form select:-webkit-autofill, .signup-form select:-webkit-autofill:hover, .signup-form select:-webkit-autofill:focus { background-color: transparent; -webkit-box-shadow: 0 0 0 1000px white inset; } body.page { /* .entry-wrap, .entry-thumbnail { width: 50%; display: inline-block; vertical-align: middle; box-sizing: border-box; } .entry-wrap { padding: 0 110px; background: #FAFAFA; padding: 50px 110px; // quick fix for heights } */ } body.page article { padding: 0 10px; } @media only screen and (min-width: 801px) { body.page article { padding: 0; } body.page .preamble { display: table; width: 100%; /* The width:100% on the .flag__body{} is an odd hack of sorts; this forces the text content to take up all of the space that the .flag__image{} does not. https://csswizardry.com/2013/05/the-flag-object/ */ } body.page .preamble .entry-thumbnail, body.page .preamble .entry-wrap { display: table-cell; vertical-align: middle; } .flag--top body.page .preamble .entry-thumbnail, .flag--top body.page .preamble .entry-wrap { vertical-align: top; } .flag--bottom body.page .preamble .entry-thumbnail, .flag--bottom body.page .preamble .entry-wrap { vertical-align: bottom; } body.page .preamble .entry-thumbnail { width: 50%; vertical-align: top; } body.page .preamble .entry-thumbnail > img { display: block; max-width: none; } .flag--rev body.page .preamble .entry-thumbnail { padding-right: 0; padding-left: 10px; } body.page .preamble .entry-wrap { width: 100%; } body.page .preamble .breadcrumbs { position: absolute; top: 0; } body.page .preamble .entry-wrap { position: relative; padding: 6em 110px; background: #FAFAFA; } } body.page h1.page-title { text-transform: uppercase; font-weight: 400; font-size: 3.6em; margin-top: 0; } .entry-content { line-height: 1.85; } .entry-content-2 { width: 610px; max-width: 100%; margin: 7.5em auto; } .entry-content-2 h2 { font-size: 1.8em; margin: 1.6em 0; } body.home .entry-content { width: 610px; max-width: 100%; margin: 0 auto; } .entry-wrap-2 .breadcrumbs, .entry-wrap-2 > header { width: 610px; margin-left: auto; margin-right: auto; } body.page-slug-products .entry-wrap-2 .breadcrumbs, body.page-slug-products .entry-wrap-2 > header { display: none; } .features li { /* list-style-type: none; &:before { content: "+ "; font-weight: 900; font-size: 0.8em; } */ /* margin-left: 1em; // make sure we don't hang left on mobile @media only screen and (min-width: $product-collapse) { margin-left: 0; } */ list-style-type: none; position: relative; } @media only screen and (min-width: 860px) { .features li:before { content: "+ "; font-weight: 900; font-size: 0.8em; position: absolute; left: -1em; top: 0.3em; } } body.single-product { /* .fit { width: 150px; } */ /* div.breadcrumbs { width: 66%; margin-right: 34%; font-size: 0.8em; color: #999; color: black; margin-top: 42px; > span { float: right; // margin: 1em 0; margin: 1.1em 0; font-size: 0.9em } a { color: #999; } a::after { content: "\f0da"; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; position: relative; display: inline-block; //width: 1.666em; speak: none; padding: 0 5px 0 9px; color: black; text-decoration: none !important; speak: none; } } */ /* now repeated in main styles */ } body.single-product .colour-marker { cursor: pointer; display: inline-block; margin: 0 5px; width: 16px; height: 16px; border-radius: 100%; transform: rotate(90deg); color: transparent; position: relative; } @media only screen and (min-width: 860px) { body.single-product .colour-marker { margin: 0 11px 0 0; } } body.single-product .colour-marker.activethumb::before { position: absolute; content: ''; width: 22px; height: 22px; top: -4px; left: -4px; border-radius: 100%; display: block; border: 1px solid #7a7a7a; } body.single-product .colour-marker span { position: relative; width: 7px; height: 14px; } body.single-product .colour-marker span:first-of-type { float: left; border-top-left-radius: 7px; border-bottom-left-radius: 7px; margin-left: 1px; margin-top: 1px; } body.single-product .colour-marker span:last-of-type { float: right; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-right: 1px; margin-top: 1px; } body.single-product li.product-thumb { cursor: pointer; } body.single-product section.keyinfo { max-width: 1160px; margin: 0 auto 90px; padding: 0 10px; } body.single-product .entry-meta { clear: both; text-align: center; } @media only screen and (min-width: 860px) { body.single-product .entry-meta { width: 30%; float: right; clear: none; text-align: left; } } body.single-product .entry-meta a { text-decoration: underline; } body.single-product h1.entry-title { margin: 0.2em 0; margin: 2em 0 0.2em; text-transform: uppercase; font-size: 1.7em; } body.single-product .entry-header p { font-weight: 700; margin: 0.7em 0; } body.single-product .modelprice { font-weight: 200; font-size: 1.05em; display: block; margin: -0.9em 0 0.9em; } @media only screen and (min-width: 860px) { body.single-product .modelprice { margin: 0.9em 0; } } @media only screen and (min-width: 860px) { body.single-product .entry-thumbnail-wrap { width: 66%; float: left; } } body.single-product article .entry-thumbnail:after { width: 60px; height: 60px; background-size: 60px 60px; display: inline-block; content: ""; position: absolute; right: 28px; bottom: 23px; } body.single-product article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius.svg"); } body.single-product article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat.svg"); } body.single-product article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow.svg"); } body.single-product article .entry-thumbnail:before { content: ''; } body.single-product article .entry-thumbnail.unavailable:before { content: 'Product currently unavailable in your region'; position: absolute; bottom: 20px; width: 100%; left: 0; text-align: center; } html[lang="ja"] body.single-product article .entry-thumbnail.unavailable:before { content: '日本では販売しておりません。'; } body.single-product .entry-thumbnail { position: relative; } body.single-product .entry-thumbnail img { display: block; } @media only screen and (min-width: 860px) { body.single-product .entry-thumbnail { width: calc( 100% - 165px ); float: right; } } body.single-product .entry-thumbnail[data-highlight]:after { content: attr(data-highlight); /* no quotes around attribute name! */ position: absolute; right: 0; bottom: 0; background: #00fbe4; padding: 7px 14px; text-transform: uppercase; color: white; font-size: 0.9em; font-weight: bold; } @media only screen and (min-width: 860px) { body.single-product .entry-images-wrap { width: 140px; float: left; } } body.single-product .entry-images-wrap ul { list-style: none; padding: 0; margin: 0; } body.single-product .entry-images-wrap li { margin-bottom: 25px; } @media only screen and (max-width: 859px) { body.single-product .entry-images-wrap li { width: 32%; margin: 2% 0 25px; display: inline-block; } body.single-product .entry-images-wrap li + li { margin-left: 2%; } } body.single-product .features ul { list-style: none; padding: 0; margin: 3em 0; font-weight: 200; font-size: 0.95em; line-height: 2; } body.single-product a.find-dealer { display: block; margin: 2.5em auto; text-transform: uppercase; border: 1px solid black; text-decoration: none; text-align: center; font-weight: 400; font-size: 0.75em; padding: 3px 0; width: 50%; } body.single-product a.find-dealer:hover { color: white; background: black; } @media only screen and (min-width: 860px) { body.single-product a.find-dealer { margin-right: 50%; display: inline-block; } } body.single-product a.ask-question, body.single-product a.share-product { font-size: 0.75em; } @media only screen and (min-width: 860px) { body.single-product a.ask-question, body.single-product a.share-product { margin-right: 2em; } } body.single-product .entry-content > .sticky-wrapper { display: none; } @media only screen and (min-width: 860px) { body.single-product .entry-content > .sticky-wrapper { display: block; } } body.single-product .toc { display: none; clear: both; text-align: center; font-size: 0.8em; border-top: 1px solid #eeeeee; line-height: 40px; border-bottom: 1px solid #eeeeee; } @media only screen and (min-width: 860px) { body.single-product .toc { display: block; } } body.single-product .toc ul { list-style: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; } body.single-product .toc li { display: inline-block; } body.single-product .toc a { text-decoration: none; display: block; padding: 5px 55px; } @media only screen and (min-width: 1073px) { body.single-product .toc.stuck { position: fixed; top: 113px; width: 100%; background: white; z-index: 10; max-width: 3000px; } } @media only screen and (min-width: 3001px) { body.single-product .toc.stuck { left: calc( 50vw - 1500px ); } } body.single-product .entry-content { clear: both; /* position: relative; left: 50%; transform: translateX(-50%); */ /* .media-object { img { width: 50%; float: right; margin-right: 0; margin-left: 0; } h3 { font-size: 2.5em; } div { margin-left: 12%; float: left; width: 35%; margin-top: 6%; } @extend %clearfix; } .media-object.left { img { float: left; } div { margin-right: 12%; margin-left: 0; float: right; } } */ } body.single-product .entry-content h2 { cursor: pointer; position: relative; padding-left: 10px; padding-right: 10px; } body.single-product .entry-content h2:after { content: '+'; font-weight: 100; font-size: 2em; top: -0.15em; position: absolute; right: 16px; } body.single-product .entry-content h2.current:after { content: '—'; font-weight: 100; top: 0; font-size: 1em; right: 20px; } @media only screen and (min-width: 860px) { body.single-product .entry-content h2 { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } } body.single-product .entry-content .ac_pane { display: none; } @media only screen and (min-width: 860px) { body.single-product .entry-content .ac_pane { display: block !important; } } body.single-product .entry-content .pane .ac_pane { max-width: 720px; margin: 0 auto; } body.single-product .entry-content .pane.Specification .ac_pane { max-width: none; text-align: center; font-size: 0.8em; font-size: 0.9375em; line-height: 1.6; font-weight: 100; background: white; padding: 0 10px; } body.single-product .entry-content .pane.Specification .ac_pane ul { list-style: none; padding: 0; display: block; width: auto; text-align: left; } @media only screen and (min-width: 860px) { body.single-product .entry-content .pane.Specification .ac_pane ul { display: inline-block; vertical-align: middle; margin: 1em 95px; } } @media only screen and (min-width: 860px) { body.single-product .entry-content .pane.Specification .ac_pane ul { padding-top: 80px; padding-bottom: 80px; } } body.single-product .entry-content .pane.Specification .ac_pane p { display: block; text-align: left; } @media only screen and (min-width: 860px) { body.single-product .entry-content .pane.Specification .ac_pane p { max-width: 25%; margin: 1em 95px; display: inline-block; vertical-align: middle; } } @media only screen and (min-width: 860px) { body.single-product .entry-content .pane.Specification .ac_pane p { padding-top: 80px; padding-bottom: 80px; } } body.single-product .entry-content .pane.Specification .ac_pane img.size-windowwidth { margin-top: 0; margin-bottom: 0; } body.single-product .entry-content .pane.Description .ac_pane { max-width: none; margin: 0; width: 100%; padding-left: calc( 50% - 360px ); padding-right: calc( 50% - 360px ); background: #f7f8f9; font-size: 0.9375em; line-height: 1.6; font-weight: 100; } body.single-product .entry-content .pane.Description .ac_pane > div { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; } body.single-product .entry-content .pane.Fit .ac_pane { max-width: none; margin: 0 0 7.5em 0; width: 100%; padding-left: calc( 50% - 360px ); padding-right: calc( 50% - 360px ); } body.single-product .entry-content .pane.Fit .ac_pane > div { margin: 1em 42px; } body.single-product div.breadcrumbs { width: 100%; margin-right: 0; } body.single-product p#breadcrumbs { text-align: center; } @media only screen and (min-width: 860px) { body.single-product p#breadcrumbs { margin-left: 165px; float: left; text-align: left; } } body.single-product p#breadcrumbs a, body.single-product p#breadcrumbs .breadcrumb_last { white-space: nowrap; } body.single-product span#sku { text-align: center; display: block; margin: 1.1em 0; } @media only screen and (min-width: 860px) { body.single-product span#sku { float: right; text-align: right; } } @media only screen and (min-width: 1073px) { body.admin-bar.single-product .toc.stuck { top: 145px; } } body.tax-product_category main { margin: 0 10px; } @media only screen and (min-width: 760px) { body.tax-product_category main { margin: 0 30px; } } body.tax-product_category main img.attachment-header, body.tax-product_category main img.attachment-thirtysix-eleven { width: 100vw; margin-left: -10px; max-width: 100vw; } @media only screen and (min-width: 760px) { body.tax-product_category main img.attachment-header, body.tax-product_category main img.attachment-thirtysix-eleven { margin-left: -30px; } } body.tax-product_category article .entry-thumbnail:after { width: 10%; height: 10%; background-size: 100% 100%; display: inline-block; content: ""; position: absolute; right: 8%; bottom: 4%; } body.tax-product_category article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius.svg"); } body.tax-product_category article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat.svg"); } body.tax-product_category article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow.svg"); } body.tax-product_category article.product { width: 50%; display: inline-block; vertical-align: top; padding: 0; margin-bottom: 30px; color: #999999; } @media only screen and (min-width: 960px) { body.tax-product_category article.product { width: 33.333%; } } @media only screen and (min-width: 1073px) { body.tax-product_category article.product { width: 25%; } } @media only screen and (max-width: 759px) { body.tax-product_category article.product:nth-child(odd) { padding-right: 5px; } body.tax-product_category article.product:nth-child(even) { padding-left: 5px; } } @media only screen and (min-width: 760px) { body.tax-product_category article.product { border: 1px solid transparent; padding: 15px; } body.tax-product_category article.product:hover { border: 1px solid #e4e4e4; } } body.tax-product_category article.product .colour-marker { cursor: pointer; display: inline-block; margin: 5px 11px 0 0; width: 16px; height: 16px; border-radius: 100%; transform: rotate(90deg); color: transparent; position: relative; } body.tax-product_category article.product .colour-marker.activethumb::before { position: absolute; content: ''; width: 22px; height: 22px; top: -4px; left: -4px; border-radius: 100%; display: block; border: 1px solid #7a7a7a; } body.tax-product_category article.product .colour-marker span { position: relative; width: 7px; height: 14px; } body.tax-product_category article.product .colour-marker span:first-of-type { float: left; border-top-left-radius: 7px; border-bottom-left-radius: 7px; margin-left: 1px; margin-top: 1px; } body.tax-product_category article.product .colour-marker span:last-of-type { float: right; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-right: 1px; margin-top: 1px; } body.tax-product_category article.product .entry-title { color: black; font-size: 1em; margin: 1em 0 0; text-transform: uppercase; } body.tax-product_category article.product .entry-meta { line-height: 1.3; font-size: 0.875em; margin-bottom: 10px; } body.tax-product_category article.product a:link, body.tax-product_category article.product a:visited { color: inherit; text-decoration: none; outline: none; } body.tax-product_category article.product a:focus, body.tax-product_category article.product a:hover, body.tax-product_category article.product a:active { color: inherit; text-decoration: none; outline: none; } body.tax-product_category article.product .modelprice { display: block; } body.tax-product_category article.product .saddle-profile::after { content: '/'; display: inline-block; margin: 0 0.2em 0 0.4em; } body.tax-product_category article.product .entry-thumbnail { position: relative; } body.tax-product_category article.product .entry-thumbnail[data-highlight]:after { content: attr(data-highlight); /* no quotes around attribute name! */ position: absolute; right: 0; bottom: 0; background: #00fbe4; padding: 5px 12px; text-transform: uppercase; color: white; font-size: 0.8em; font-weight: bold; } body.tax-product_category div.category-sidebar { margin: 50px 0; } body.tax-product_category div.category-sidebar > div { display: none; padding: 30px 0; border-bottom: 1px solid #ccc; } @media only screen and (min-width: 760px) { body.tax-product_category div.category-sidebar > div { display: block !important; padding: 0; border-top: none; border-bottom: none; } } body.tax-product_category div.category-sidebar h2 { text-align: center; text-align: left; cursor: pointer; } @media only screen and (min-width: 760px) { body.tax-product_category div.category-sidebar h2 { text-align: left; cursor: default; } } @media only screen and (max-width: 759px) { body.tax-product_category div.category-sidebar h2 { padding: 1em 0; margin: 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } } @media only screen and (max-width: 759px) { body.tax-product_category div.category-sidebar { width: 100% !important; } body.tax-product_category div.category-sidebar ul.filter-list.many { column-count: 2; padding-left: 20%; padding-right: 20%; } body.tax-product_category div.category-sidebar ul.filter-list.many > li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } body.tax-product_category div.category-sidebar ul.filter-list.single { text-align: center; } body.tax-product_category div.category-sidebar ul.filter-list.single > li { display: inline-block; text-align: left; } } @media only screen and (max-width: 570px) { body.tax-product_category div.category-sidebar ul.filter-list { padding-left: 20%; padding-right: 10%; } } @media only screen and (max-width: 400px) { body.tax-product_category div.category-sidebar ul.filter-list { padding-left: 10%; padding-right: 5%; } } body.tax-product_category div.category-overview { width: 100%; margin: 50px auto; /* @media only screen and (max-width: 759px) { width: auto; margin: 50px -16px; } */ } @media only screen and (min-width: 760px) { body.tax-product_category div.category-overview { width: 80%; } } body.tax-product_category div.intro { text-align: center; margin: 3em 0 0; } @media only screen and (min-width: 760px) { body.tax-product_category div.category-sidebar { width: 30%; float: left; } body.tax-product_category div.category-sidebar + div.category-overview, body.tax-product_category div.sidebar + div.category-overview { width: 70%; float: right; } } @media only screen and (min-width: 1073px) { body.tax-product_category div.category-sidebar { width: 20%; width: 10%; } body.tax-product_category div.category-sidebar + div.category-overview, body.tax-product_category div.sidebar + div.category-overview { width: 80%; margin-right: 10%; } } body.tax-product_category h1.page-title { font-size: 1.8em; margin: 1.7em 0 0.2em; text-transform: uppercase; } @media only screen and (min-width: 760px) { body.tax-product_category h1.page-title:after { content: '/'; } } body.tax-product_category h1.page-title + .entry-content { font-size: 0.9em; } body.tax-product_category h1.page-title, body.tax-product_category h1.page-title + .entry-content { text-align: center; } @media only screen and (min-width: 760px) { body.tax-product_category h1.page-title, body.tax-product_category h1.page-title + .entry-content { text-align: left; display: inline-block; font-size: 0.9em; } } body.tax-product_category h1.page-title + .entry-content a { display: inline-block; background: white; color: black; border: 1px solid black; padding: 2px 25px 1px; text-decoration: none !important; margin: 1.3em 0 2em 0; /* font-size: 0.6em; */ font-weight: bold; } body.tax-product_category div.category-sidebar h2 { text-transform: uppercase; position: relative; font-size: 20px; } @media only screen and (max-width: 759px) { body.tax-product_category div.category-sidebar h2:after { content: '+'; font-weight: 100; font-size: 2em; top: 0.25em; position: absolute; right: 0; } body.tax-product_category div.category-sidebar h2.open:after { content: '—'; font-weight: 100; font-size: 1em; top: 0.92em; right: 5px; } } @media only screen and (min-width: 760px) { body.tax-product_category div.category-sidebar button { display: none; } } @media only screen and (max-width: 759px) { .slidein { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: white; max-width: 90%; min-width: 320px; width: 350px; z-index: 10; overflow-y: scroll; transform: translateX(-100%); transition: all 400ms ease; } .slidein.slid { transform: translateX(0); } .slidein > div { position: absolute; top: 0; left: 0; } body.admin-bar .slidein > div { padding-top: 60px; } } @media only screen and (min-width: 760px) { .filter-list { display: block; } } .filter-list > li > span { font-weight: 700; } .filter-list, .filter-list ul { list-style-type: none; /* @media only screen and (min-width: 760px) { margin-left: 40px; } */ margin: 0 0 1em 0; padding: 0; } .filter-list a:link, .filter-list a:visited, .filter-list a:focus, .filter-list a:hover, .filter-list a:active { text-decoration: underline; margin-left: 1.666em; margin-top: 1.2em; display: inline-block; } .filter-list ul a:link, .filter-list ul a:visited { color: inherit; text-decoration: none; outline: none; margin-left: 0; display: inline; } .filter-list ul a:focus, .filter-list ul a:hover, .filter-list ul a:active { color: inherit; text-decoration: none; outline: none; margin-left: 0; display: inline; } .filter-list ul a::before { content: "\f096"; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; position: relative; display: inline-block; width: 1.666em; color: #999999; speak: none; } .filter-list ul a.is-checked::before { content: "\f046"; } @media only screen and (min-width: 760px) { .filter-list > li { padding: 30px 0; border-top: 1px solid #F2EEEF; font-size: 14px; line-height: 23px; max-width: 120px; } .filter-list > li ul { margin-bottom: 0; } .filter-list > li span { font-weight: 700; text-transform: uppercase; } } .category-sidebar.stuck { position: fixed; top: 56px; } .category-sidebar.stuckbottom { position: absolute; top: auto; bottom: 0; } .sticky-wrapper.sidebar { float: left; } @media only screen and (min-width: 760px) { .sticky-wrapper.sidebar { width: 30%; } } @media only screen and (min-width: 1073px) { .sticky-wrapper.sidebar { width: 10%; } } /* media queries < 920px gets too narrow for sidebar if it's still 20% 30/70 and 3-up to 2-up works ok down to 760px but the scrolling sticky script needs adapting as it hard fixes a width to the sidebar to keep things from collapsing. Would a wrapper like waypoints uses help? Or shall I just be less clever and ditch the sidebar at 920? */ /* Social Icons */ /* FONT PATH * -------------------------- */ /* @font-face { font-family: 'FontAwesome'; src: url('/wp-content/themes/fabric/font/fontawesome-webfont.eot?v=3.2.1'); src: url('/wp-content/themes/fabric/font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('/wp-content/themes/fabric/font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('/wp-content/themes/fabric/font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('/wp-content/themes/fabric/font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg'); font-weight: normal; font-style: normal; } */ /* something like: $foreground: $darkgrey; $background: $lightgrey; $branded: true; then standard code handling colouring */ /* changing the parent ems still throws the icons off centre :-S Maybe just need to convert all pixel values here to ems too? */ /* FONT AWESOME CORE * -------------------------- */ [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; position: relative; display: inline-block; width: 1.666em; } [class^="icon-"] span, [class*=" icon-"] span { display: none; } [class^="icon-"]:before, [class*=" icon-"]:before { text-decoration: inherit; display: block; speak: none; top: 0; left: 0; width: 100%; height: 100%; text-align: center; line-height: 1.7; line-height: 40px; text-indent: 0; color: white !important; background: grey; font-size: 0.8em; } .icon-twitter:before, ul.social a[href*="twitter"]:before { content: "\f099"; color: #00acee; } .icon-twitter:hover:before, ul.social a[href*="twitter"]:hover:before { background-color: #00acee; color: white; } .icon-facebook:before, ul.social a[href*="facebook"]:before { content: "\f09a"; color: #3b5998; } .icon-facebook:hover:before, ul.social a[href*="facebook"]:hover:before { background-color: #3b5998; color: white; } .icon-instagram:before, ul.social a[href*="instagram"]:before { content: "\f16d"; color: #3f729b; } .icon-instagram:hover:before, ul.social a[href*="instagram"]:hover:before { background-color: #3f729b; color: white; } ul.social li { display: inline; } /* Brand colours on transparent inverting to white on brand square. With captions. */ .icon-linkedin:before { content: "\f0e1"; color: #0e76a8; } .icon-envelope:before { content: "\f0e0"; } /*.icon-envelope:hover:before { background-color: #D9B729; color: white; }*/ .icon-envelope-o::before { content: "\f003"; line-height: 1; } .icon-angle-double-down::before { content: "\f103"; font-size: 1.2em !important; line-height: 0.9; } .icon-twitter:before { content: "\f099"; } .icon-twitter:hover::before { color: #00aced; border-color: #00aced; background-color: #00aced; color: white; } .icon-facebook:before { content: "\f09a"; } .icon-facebook:hover::before { color: #3b5998; border-color: #3b5998; background-color: #3b5998; color: white; } .icon-linkedin:before { content: "\f0e1"; } .icon-linkedin:hover::before { color: #007bb6; border-color: #007bb6; background-color: #007bb6; color: white; } .icon-envelope:before { content: "\f0e0"; } /*.icon-envelope:hover::before { border-color: $red; background-color: $red; color: white; }*/ .icon-google-plus:before { content: "\f0d5"; } .icon-google-plus:hover::before { color: #dd4b39; border-color: #dd4b39; background-color: #dd4b39; color: white; } .icon-youtube:before { content: "\f167"; } .icon-flickr:before { content: "\f16e"; } .icon-instagram:before { content: "\f16d"; } /*.icon-instagram:hover::before { color: #517fa4; border-color: #517fa4; background-color: #517fa4; color: white; }*/ .icon-pinterest:before { content: "\f0d2"; } .icon-pinterest:hover::before { background-color: #cb2027; color: white; border-color: #cb2027; } .icon-vimeo:before { content: "\f27d"; } .icon-vimeo:hover::before { background-color: #1ab7ea; color: white; border-color: #1ab7ea; } footer .social a { color: #222222 !important; } footer .social a::before { color: inherit !important; } footer .social a:hover::before { color: inherit !important; background: transparent !important; } footer .social { padding: 10px 0; line-height: 2.5; list-style-type: none; background: white; margin-top: 0; } footer .social a { display: inline-block; vertical-align: middle; margin: 0 8px; text-align: center; font-weight: 100; font-size: 1.3em; line-height: 1.8; /* space between icon and label */ width: auto; padding: 0 24px; } footer .social a::before { width: auto; height: 32px; -webkit-border-radius: 50%; border-radius: 50%; display: block; vertical-align: middle; color: inherit; margin: 0 auto; font-size: 1em; line-height: 34px; font-family: FontAwesome; font-weight: normal; } footer .social a:focus, footer .social a:hover, footer .social a:active { text-decoration: none; } footer .social a:focus::before, footer .social a:hover::before, footer .social a:active::before { color: black !important; } footer .social a:focus span, footer .social a:hover span, footer .social a:active span { text-decoration: none; color: inherit; } footer .social a span { font-size: 0.8em; font-weight: 200; text-transform: uppercase; letter-spacing: 3px; display: none; } /* Site specific sharing styles */ .social [class^="icon-"], .social [class*=" icon-"] { border-left: 1px solid transparent; border-right: 1px solid transparent; width: 37px; } .social [class^="icon-"]:before, .social [class*=" icon-"]:before { line-height: 43px; color: #B9B9B9 !important; background: transparent; line-height: 41px; padding-top: 2px; font-size: 1em; } .social [class^="icon-"]:hover:before, .social [class*=" icon-"]:hover:before { color: #B9B9B9 !important; background: transparent; text-decoration: none; } .social [class^="icon-"]:hover, .social [class*=" icon-"]:hover { border-color: #e6e6e6; text-decoration: none; } span.share-product { display: none; } @media only screen and (min-width: 860px) { span.share-product { display: inline; } aside.sharing { display: none; position: absolute; border: 1px solid #ddd; padding: 7px 15px; width: 148px; top: 35px; left: 5px; } aside.sharing .arrow_box { position: relative; background: #ffffff; border: 1px solid #ddd; } aside.sharing:after, aside.sharing:before { bottom: 100%; left: 15px; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } aside.sharing:after { border-color: rgba(255, 255, 255, 0); border-bottom-color: #fff; border-width: 15px; margin-left: -15px; } aside.sharing:before { border-color: rgba(221, 221, 221, 0); border-bottom-color: #ddd; border-width: 16px; margin-left: -16px; } [class^="icon-"], [class*=" icon-"] { width: 37px; text-decoration: none !important; } [class^="icon-"]:before, [class*=" icon-"]:before { line-height: 43px; color: black !important; background: transparent; line-height: 41px; padding-top: 2px; font-size: 1.2em; text-decoration: none; } [class^="icon-"]:hover:before, [class*=" icon-"]:hover:before { color: #B9B9B9 !important; background: transparent; text-decoration: none; } [class^="icon-"]:hover, [class*=" icon-"]:hover { border-color: #e6e6e6; text-decoration: none; } } .share-product:hover aside.sharing { display: block !important; } body .entry-content div.gallery { margin-top: 7.5rem; margin-bottom: 7.5rem; } div.gallery.style-window { width: 100vw; margin-left: 50%; margin-right: 0; margin: 7.5rem 0 7.5rem 50%; position: relative; left: -50vw; } div.gallery.style-standard { width: 1200px; margin-left: 50%; margin-right: 0; margin: 7.5rem 0 7.5rem 50%; position: relative; left: -600px; } @media only screen and (max-width: 1200px) { div.gallery.style-standard { width: 100vw; left: -50vw; } } body div.gallery.style-scrollingstrip .flickity-prev-next-button .arrow { fill: black; } body div.gallery.style-scrollingstrip .flickity-prev-next-button { height: 60px !important; width: 60px !important; background: none; } body div.gallery.style-scrollingstrip .flickity-prev-next-button:hover { background: none; } body div.gallery.style-scrollingstrip .flickity-prev-next-button svg { height: 40px !important; width: 40px !important; left: 12px; top: 10px; } .overlaid-image { position: relative; } .overlaid-image div.videowrap { width: 100vw; height: 56.25vw; } .overlaid-image div.videowrap iframe, .overlaid-image div.videowrap div { width: 100%; height: 100%; } .overlaid-image.video a { position: absolute; left: 0; top: 0; right: 0; bottom: 0; } .overlaid-image > div:not(.videowrap), .overlaid-image > a > div:not(.videowrap) { position: absolute; top: 0; left: 0; max-width: 360px; width: 100%; padding: 30px; color: white; max-width: none; /* font-size: 16 * 1.5 * 720px / 1500; // proportional to screen size padding: 30 * 720px / 1500; width: 360 * 720px / 1500; @media only screen and (min-width: 720px) { font-size: 16 * 1.5 * 100vw / 1500; // proportional to screen size padding: 30 * 100vw / 1500; width: 360 * 100vw / 1500; } */ /* font-size: 16 * 1.5 * 1040px / 1500; // proportional to screen size padding: 30 * 1040px / 1500; width: 360 * 1040px / 1500; font-weight: 200; @media only screen and (min-width: 1040px) { font-size: 16 * 1.5 * 100vw / 1500; // proportional to screen size font-size: 16 * 1.125 * 100vw / 1500; // proportional to screen size padding: 30 * 100vw / 1500; width: 360 * 100vw / 1500; } @media only screen and (min-width: 1500px) { width: 360px; padding: 30px; font-size: 1.5em; font-size: 1.125em; } */ padding: 30px; width: 360px; font-size: 1.125em; line-height: 1; } .overlaid-image > div:not(.videowrap) h2, .overlaid-image > a > div:not(.videowrap) h2 { margin: 0.6em 0; font-weight: 700; font-size: 35px; } @media only screen and (min-width: 700px) { .overlaid-image > div:not(.videowrap) h2, .overlaid-image > a > div:not(.videowrap) h2 { margin: 0.6em 0 -10px; } } .overlaid-image > div:not(.videowrap) a, .overlaid-image > div:not(.videowrap) span, .overlaid-image > a > div:not(.videowrap) a, .overlaid-image > a > div:not(.videowrap) span { display: inline-block; background: white; color: #666666; padding: 1em 3em; text-decoration: none !important; margin: 4px 0 2em 0; text-transform: uppercase; font-size: 0.8em; font-weight: bold; } .overlaid-image > div:not(.videowrap) a:hover, .overlaid-image > div:not(.videowrap) span:hover, .overlaid-image > a > div:not(.videowrap) a:hover, .overlaid-image > a > div:not(.videowrap) span:hover { background: rgba(0, 0, 0, 0.7); color: white; } @media only screen and (max-width: 700px) { .overlaid-image > div:not(.videowrap) *, .overlaid-image > div:not(.videowrap) span, .overlaid-image > a > div:not(.videowrap) *, .overlaid-image > a > div:not(.videowrap) span { display: none; } .overlaid-image > div:not(.videowrap) a, .overlaid-image > a > div:not(.videowrap) a { display: inline-block; } .overlaid-image > div:not(.videowrap) h2, .overlaid-image > a > div:not(.videowrap) h2 { display: block; font-size: 30px; } } @media only screen and (min-width: 701px) { .overlaid-image.top > div:not(.videowrap), .overlaid-image.top > a > div:not(.videowrap) { top: 0; bottom: auto; } .overlaid-image.bottom > div:not(.videowrap), .overlaid-image.bottom > a > div:not(.videowrap) { top: auto; bottom: 0; } .overlaid-image.left > div:not(.videowrap), .overlaid-image.left > a > div:not(.videowrap) { left: 0; right: auto; } .overlaid-image.right > div:not(.videowrap), .overlaid-image.right > a > div:not(.videowrap) { left: auto; right: 0; } .overlaid-image.offcentre > div:not(.videowrap), .overlaid-image.offcentre > a > div:not(.videowrap) { left: calc( 50% + 40px ); right: auto; } } @media only screen and (min-width: 1400px) { .overlaid-image.left > div:not(.videowrap), .overlaid-image.left > a > div:not(.videowrap) { left: 20px; right: auto; } } @media only screen and (max-width: 700px) { .overlaid-image > div:not(.videowrap), .overlaid-image > a > div:not(.videowrap) { text-align: center; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; width: 66%; bottom: auto; } } body.page-slug-products .overlaid-image > a { position: relative; text-align: center; color: white; /*img { -webkit-filter: brightness(0.7); -moz-filter: brightness(0.7); filter: brightness(0.7) }*/ } body.page-slug-products .overlaid-image > a > div { position: absolute; z-index: 2; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; } body.page-slug-products .overlaid-image > a > div * { display: none; } body.page-slug-products .overlaid-image > a > div h2, body.page-slug-products .overlaid-image > a > div h3 { display: block; display: block; opacity: 0.4; color: white; font-size: 40px; } body.page-slug-products .overlaid-image > a:hover { background: transparent; color: black !important; } body.page-slug-products .overlaid-image > a:hover img { /* -webkit-filter: brightness(0.7); -moz-filter: brightness(0.7); filter: brightness(0.7); */ opacity: 0.2; } body.page-slug-products .overlaid-image > a:hover > div * { display: block; color: black !important; } body.page-slug-products .overlaid-image > a:hover h2, body.page-slug-products .overlaid-image > a:hover h3 { margin-top: 0; opacity: 1; color: black; font-size: 1.17em; } body.page-slug-products .overlaid-image > a:hover span { display: inline-block; background: transparent; color: black; padding: 0; text-decoration: none !important; margin: 0 0 2em 0; margin: 0 0 0.9em 0; text-transform: none; font-size: inherit; font-weight: bold; } body.page-slug-products .overlaid-image.two-thirds > a > div { width: 66%; } body.page-slug-products .overlaid-image > a > div p { font-size: 12px; } .overlaid-image.one-up { width: 100%; float: left; /* @media only screen and (min-width: 701px) { > div, > a > div { width: 50%; max-width: 720px; } } */ } .overlaid-image.one-up .size-square-overview { display: none; } @media only screen and (max-width: 700px) { .overlaid-image.one-up img { display: none; } .overlaid-image.one-up .size-square-overview { display: block; } } .overlaid-image.two-up { /* width: 50%; float: left; */ /*flex: 0 0 50%;*/ /* flex: 0 0 49.95%; */ flex: 0 0 49.9%; /* @media only screen and (min-width: 701px) { > div, > a > div { width: 100%; max-width: 720px; } } */ } @media only screen and (max-width: 700px) { .overlaid-image.two-up { /* width: 100%; */ flex: 0 0 100%; } } .overlaid-image.three-up { /* width: 33.3333%; float: left; */ flex: 0 0 33.32%; /* @media only screen and (min-width: 760px) { width: 100%; img { width: 50%; float: left; } div { width: 50%; float: right; position: static; color: inherit; } &:nth-child(odd) { img { float: left; } div { float: right; } } }*/ } @media only screen and (max-width: 700px) { .overlaid-image.three-up { /* width: 100%; */ flex: 0 0 100%; } } @media only screen and (min-width: 699px) { .overlaid-image.three-up div.videowrap { width: 100%; /*height: 50vw;*/ height: 100%; overflow: hidden; } .overlaid-image.three-up div.videowrap div { width: 266.6667%; height: 100%; margin-left: 50%; position: relative; left: -133.3333%; } } .overlaid-image.two-thirds { /* width: 66.6666%; float: left; */ flex: 0 0 66.5%; /* @media only screen and (min-width: 701px) { > div, > a > div { width: 100%; max-width: 720px; } } */ } @media only screen and (max-width: 700px) { .overlaid-image.two-thirds { /* width: 100%; */ flex: 0 0 100%; } } @media only screen and (min-width: 699px) { .overlaid-image.two-thirds div.videowrap { width: 100%; height: 50vw; overflow: hidden; } .overlaid-image.two-thirds div.videowrap div { width: 266.6667%; height: 100%; margin-left: 50%; position: relative; left: -133.3333%; } } .window-block { clear: both; width: calc( 100vw + 2px ); display: flex; flex-wrap: wrap; align-items: stretch; position: relative; left: 50%; transform: translateX(-50%); margin-top: 7.5rem; margin-bottom: 0; } .window-block:last-child { margin-bottom: 0; } .window-block:first-child { margin-top: 0; } .size-windowwidth { margin-top: 7.5rem; margin-bottom: 7.5rem; } .pane h2 + .size-windowwidth, .size-windowwidth:first-child { margin-top: 0; } div.blockquote { clear: both; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); font-size: 0.35em; text-align: center; } @media only screen and (min-width: 860px) { div.blockquote { font-size: 0.75em; } } div.blockquote img { display: inline-block; width: calc( 50vw - 340px ); vertical-align: middle; } div.blockquote blockquote { font-weight: bold; font-size: 2.8em; line-height: 1.2; max-width: 950px; padding: 0 110px; margin: 1em auto; quotes: "“" "”" "‘" "’"; position: relative; display: block; vertical-align: middle; } div.blockquote blockquote:before { content: open-quote; font-style: italic; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; position: absolute; top: 0.35em; left: 50px; } @media only screen and (min-width: 860px) { div.blockquote blockquote:before { left: 0; } } div.blockquote blockquote:after { content: close-quote; font-style: italic; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; position: absolute; bottom: 0.25em; right: 50px; } @media only screen and (min-width: 860px) { div.blockquote blockquote:after { right: 0; } } div.blockquote blockquote cite { font-style: italic; display: block; color: gray; font-size: 0.8em; margin: 2em 0; } @media only screen and (min-width: 860px) { div.blockquote blockquote cite { font-weight: 200; font-size: 0.6em; margin-top: 1.2em; } } div.reviews { clear: both; width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin: 7.5rem 0; text-align: center; } div.review { width: 100%; font-size: 0.35em; text-align: center; } @media only screen and (min-width: 860px) { div.review { font-size: 0.75em; } } div.review blockquote { font-weight: bold; font-size: 2.8em; line-height: 1.2; max-width: 950px; padding: 0 110px; margin: 1em auto; quotes: "“" "”" "‘" "’"; position: relative; display: block; vertical-align: middle; } div.review blockquote:before { content: open-quote; font-style: italic; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; vertical-align: -0.4em; position: absolute; top: 0.35em; left: 50px; } @media only screen and (min-width: 860px) { div.review blockquote:before { left: 0; } } div.review blockquote:after { content: close-quote; font-style: italic; font-size: 4em; line-height: 0.1em; margin-right: 0.25em; position: absolute; bottom: 0.25em; right: 50px; } @media only screen and (min-width: 860px) { div.review blockquote:after { right: 0; } } div.review blockquote cite { font-style: italic; display: block; color: gray; font-size: 0.8em; margin: 2em 0; } @media only screen and (min-width: 860px) { div.review blockquote cite { font-weight: 200; font-size: 0.6em; margin-top: 1.2em; } } div.breadcrumbs { font-size: 0.8em; color: #999; color: black; margin-top: 42px; } @media only screen and (min-width: 860px) { div.breadcrumbs { width: 66%; margin-right: 34%; } } div.breadcrumbs > span { font-size: 0.9em; } @media only screen and (min-width: 860px) { div.breadcrumbs > span { float: right; margin: 1.1em 0; } } div.breadcrumbs a { color: #999; } div.breadcrumbs a::after { content: "\f0da"; font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; *margin-right: .3em; position: relative; display: inline-block; /* width: 1.666em; */ speak: none; padding: 0 5px 0 9px; color: black; text-decoration: none !important; speak: none; } .videowrapper { clear: both; width: 100%; text-align: center; margin-top: 7.5rem; margin-bottom: 7.5rem; } body:not(.home) .videowrapper { width: 100vw; position: relative; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .videowrapper > div { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; } .videowrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } body.page-id-128 .entry-content-2 { -webkit-column-count: 2; -moz-column-count: 2; -ms-column-count: 2; column-count: 2; -webkit-column-gap: 40px; -moz-column-gap: 40px; -ms-column-gap: 40px; column-gap: 40px; } body.page-id-128 .entry-content-2 p { -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ /* fix Safari top alignment */ display: inline-block; width: 100%; } /* .media-object { img { width: 50%; float: right; margin-right: 0; margin-left: 0; } h3 { font-size: 2.5em; } div { margin-left: 12%; float: left; width: 35%; margin-top: 6%; } @extend %clearfix; } .entry-content-2 .media-object { // trapped with a special case that is now general width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } .media-object.left { img { float: left; } div { margin-right: 12%; margin-left: 0; float: right; } } */ /* ====== media object ====== */ /* Set up general layout: */ .media-object > div:not(.videowrap) { margin: 1em 42px; } @media only screen and (max-width: 859px) { .media-object .videowrap { width: 100%; margin: 0; height: 56.25vw; } .media-object .videowrap iframe { width: 100%; height: 56.25vw; } } @media only screen and (min-width: 860px) { .media-object { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .media-object > div:not(.videowrap) { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; margin: 1em 12% 1em 12%; width: 35%; } .media-object img, .media-object .videowrap { width: 50%; margin: 0; } .media-object .videowrap iframe { width: 100%; } .media-object.right img, .media-object.right .videowrap { -webkit-box-ordinal-group: 2; -webkit-order: 2; -ms-flex-order: 2; order: 2; } .media-object.right > div:not(.videowrap) { margin: 1em 12% 1em 12%; } .media-object h3 { font-size: 2.5em; margin-top: 0.4em; margin-bottom: 0.5em; } .media-object * + h3 { margin-top: 1em; } } .entry-content-2 .media-object { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); } .backhouse { /* Spacing, sizes and alternation: */ /*.bd { margin-right: 100px; margin-left: 0; }*/ /* match top and bottom margins for centering */ /* Vary sizes and margins for different screens: */ } .backhouse .media img { margin-right: 1em; } .backhouse .media { margin: 130px 0; } .backhouse .media img { margin-right: 90px; margin-left: 0; width: 360px; height: auto; } .backhouse .media:nth-of-type(2n) img { margin-left: 90px; margin-right: 0; -webkit-box-ordinal-group: 2; -webkit-order: 1; -ms-flex-order: 1; order: 1; } .backhouse .bd { margin: 1em 100px 0 0; } .backhouse .media:nth-of-type(2n) .bd { margin-left: 100px; margin-right: 0; } @media only screen and (max-width: 1093px) { .backhouse .media img { margin-right: 8.3799%; margin-left: 0; width: 33.5196%; } .backhouse .media:nth-of-type(2n) img { margin-left: 8.3799%; margin-right: 0; } .backhouse .media { margin: 12.1043% 0; } .backhouse .bd { margin-right: 9.311%; } .backhouse .media:nth-of-type(2n) .bd { margin-left: 9.311%; margin-right: 0; } } @media only screen and (max-width: 768px) { .backhouse .bd, .backhouse .media:nth-of-type(2n) .bd { margin: 0; } } @media only screen and (max-width: 600px) { .backhouse .media img, .backhouse .media:nth-of-type(2n) img { margin: 0; width: 50%; float: none; } .backhouse .bd, .backhouse .media:nth-of-type(2n) .bd { margin: 0; } .backhouse .media { margin: 10px 0; } .backhouse .media { display: block; } } .related-wrap { width: 100%; width: 960px; max-width: 100vw; position: relative; left: 50%; transform: translateX(-50%); text-align: center; margin: 0 0 7.5rem 0; } .related1-wrap { padding: 10px; background: #f7f8fa; background: white; width: 100vw; } @media only screen and (min-width: 780px) { .related1-wrap { box-sizing: border-box; padding: 7.5rem calc( 50vw - 390px ) calc( 7.5rem - 2 * 0.7 * 16px ); } } .related-summary { width: 96%; margin: 0 2%; display: inline-block; vertical-align: top; text-decoration: none !important; /* h2 { font-size: 1.2em; text-align: center; font-weight: normal } */ /* &:focus, &:hover, &:active { //text-decoration: underline !important; img { -webkit-filter: brightness(0.3); -moz-filter: brightness(0.3); filter: brightness(0.3) } } */ } @media only screen and (min-width: 720px) { .related-summary { width: 29.333%; } } .related-summary .entry-caption { margin: 2em 0; } .related-summary .entry-caption > * { font-size: 0.7em; text-align: center; font-weight: 600; text-transform: uppercase; } .related-summary .entry-caption > h2 { font-size: 0.7em; text-align: center; font-weight: 600; text-transform: uppercase; } .related1-summary { /* @media only screen and (min-width: 720px) { width: calc( 50% - 20px ); margin: 0 10px; &:nth-child(3n+3) { width: calc( 100% - 20px ); } } */ width: calc( 50% - 20px ); margin: 0 10px; /* h2 { font-size: 0.7em; text-align: center; font-weight: 600; text-transform: uppercase; margin: 2em 0; } */ } .related1-summary:nth-child(3n+3) { width: calc( 100% - 20px ); } .related1-summary:focus img, .related1-summary:hover img, .related1-summary:active img { -webkit-filter: brightness(0.3); -moz-filter: brightness(0.3); filter: brightness(0.3); } .related2-summary { width: 46%; } @media only screen and (min-width: 720px) { .related2-summary { width: 21%; } } .wrapper-dropdown-3 { /* Size and position */ position: relative; /*width: 120px;*/ /*width: 80px;*/ width: 100px; /* accommodate wider currency texts */ margin: 0; float: left; padding: 10px; /* Styles */ background: #fff; /* border-radius: 7px; border: 1px solid rgba(0,0,0,0.15); box-shadow: 0 1px 1px rgba(50,50,50,0.1); */ cursor: pointer; outline: none; /* Font settings */ font-weight: 100; color: #B9B9B9; } .wrapper-dropdown-3:after { content: ""; width: 0; height: 0; position: absolute; right: 15px; top: 50%; margin-top: -3px; border-width: 6px 6px 0 6px; border-style: solid; border-color: #B9B9B9 transparent; } .wrapper-dropdown-3 .dropdown { /* Size & position */ position: absolute; top: 100%; margin: 0; left: 0; right: 0; /* Styles */ background: white; border-radius: inherit; border: 1px solid rgba(0, 0, 0, 0.17); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); font-weight: 100; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; list-style: none; /* Hiding */ opacity: 0; pointer-events: none; padding: 0; } /* .wrapper-dropdown-3 .dropdown:after { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; right: 15px; border-width: 0 6px 6px 6px; border-style: solid; border-color: #fff transparent; } .wrapper-dropdown-3 .dropdown:before { content: ""; width: 0; height: 0; position: absolute; bottom: 100%; right: 13px; border-width: 0 8px 8px 8px; border-style: solid; border-color: rgba(0,0,0,0.1) transparent; } */ .wrapper-dropdown-3 .dropdown li a { display: block; padding: 10px; text-decoration: none; color: #B9B9B9; border-bottom: 1px solid #B9B9B9; box-shadow: inset 0 1px 0 white; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; position: relative; } .wrapper-dropdown-3 .dropdown li a:after { display: block; width: 30px; height: 18px; position: absolute; top: 12px; right: 10px; background: url(/wp-content/themes/fabric/img/EUFlag.svg); background-size: 30px auto; content: ' '; } .wrapper-dropdown-3 .dropdown li[data-currency="USD"] a:after { background: url(/wp-content/themes/fabric/img/USFlag.svg); background-size: 30px auto; } .wrapper-dropdown-3 .dropdown li[data-currency="GBP"] a:after { background-position: 0 38px; background: url(/wp-content/themes/fabric/img/UKFlag.svg); background-size: 30px auto; } .wrapper-dropdown-3 .dropdown li i { float: right; color: inherit; } .wrapper-dropdown-3 .dropdown li:last-of-type a { border: none; } /* Hover state */ .wrapper-dropdown-3 .dropdown li:hover a { background: #f3f8f8; } /* Active state */ .wrapper-dropdown-3.active .dropdown { opacity: 1; pointer-events: auto; z-index: 10; } /* No CSS3 support */ .no-opacity .wrapper-dropdown-3 .dropdown, .no-pointerevents .wrapper-dropdown-3 .dropdown { display: none; opacity: 1; /* If opacity support but no pointer-events support */ pointer-events: auto; /* If pointer-events support but no pointer-events support */ } .no-opacity .wrapper-dropdown-3.active .dropdown, .no-pointerevents .wrapper-dropdown-3.active .dropdown { display: block; } body.page-slug-products .entry-content-2 { margin: 0 auto; } p.striking { font-size: 1.5em; } a.back-to-top { background: none; margin: 0; position: fixed; bottom: 40px; right: 0; width: 50px; height: 50px; z-index: 100; display: none; text-decoration: none; color: #ffffff; background-color: #000; text-align: center; } a.back-to-top::before { content: "\f106"; font-size: 30px; font-family: FontAwesome; line-height: 50px; } /* Nixon uses: .btt-btn.js-visible transform: translateX(0); .btt-btn position: fixed; width: 36px; height: 50px; text-align: center; right: 0; bottom: 100px; transform: translateX(36px); transition: transform .15s cubic-bezier(.55, 0, .1, 1) function(t, e, n) { "use strict"; function r() { var t; $(".btt-btn").length > 0 || (t = '
', $("body").append(t), "undefined" != typeof hideBackToTop && hideBackToTop && $(".btt-btn").addClass("hide-mobile")) } function i() { $(".btt-btn").off("btt").on("click.btt", function(t) { t.preventDefault(), $("body, html").animate({ scrollTop: 0, easing: "easeInOutCubic" }, 400) }), $(window).off("btt").on("scroll.btt", a.throttle(o, 100)) } function o() { var t = $(".btt-btn"); $(window).scrollTop() > 300 ? t.addClass("js-visible") : t.removeClass("js-visible") } var a = t("lodash"); e.exports.init = function() { r(), i(), o() } } */ .error404 main { background: url("/wp-content/uploads/2017/09/Page-not-found.jpg") no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; min-height: 75vw; } .error404 main article { width: 600px; max-width: 90vw; margin: 0 auto; margin: 37.5vw auto 0; } .error404 main .entry-content { background: white; text-align: center; padding: 30px; transform: translate(0, -50%); } /*# sourceMappingURL=style.css.map */ body.single-product article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius-single.svg"); } body.single-product article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat-single.svg"); } body.single-product article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow-single.svg"); } body.tax-product_category article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius-group.svg"); } body.tax-product_category article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat-group.svg"); } body.tax-product_category article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow-group.svg"); } body.tax-product_category article .entry-thumbnail:after { width: 30%; right: 4%; } /* From Customizer */ .entry-content-2 { width: 610px; max-width: 100%; margin: auto; } body.page h1.page-title { text-transform: uppercase; font-weight: 400; font-size: 3.6em; margin-top: 0; display: none; } /* end Customizer */ body.page-template-pagetemplate-landing { } h1.page-title { } body.page-template-pagetemplate-landing div.intro { text-align: center; margin: 3em 0; } body.page-template-pagetemplate-landing h1.page-title { font-size: 1.8em; margin: 1.7em 0 0.2em; text-transform: uppercase; text-align: center; } body.page-template-pagetemplate-landing h1.page-title + p { text-align: center; font-size: 0.9em; line-height: 1.85; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing h1.page-title, body.page-template-pagetemplate-landing h1.page-title + p { text-align: left; display: inline-block; font-size: 0.9em; } body.page-template-pagetemplate-landing h1.page-title { margin: 1.7em 0 0.2em; text-transform: uppercase; font-weight: bold; } body.page-template-pagetemplate-landing h1.page-title:after { content: '/'; } } body.page-template-pagetemplate-landing main { margin: 0 10px; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing main { margin: 0 30px; } } body.page-template-pagetemplate-landing main img.attachment-header, body.page-template-pagetemplate-landing main img.attachment-thirtysix-eleven { width: 100vw; margin-left: -20px; max-width: 100vw; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing main img.attachment-header, body.page-template-pagetemplate-landing main img.attachment-thirtysix-eleven { margin-left: -30px; } } body.page-template-pagetemplate-landing article .entry-thumbnail:after { width: 10%; height: 10%; background-size: 100% 100%; display: inline-block; content: ""; position: absolute; right: 8%; bottom: 4%; } body.page-template-pagetemplate-landing article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius.svg"); } body.page-template-pagetemplate-landing article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat.svg"); } body.page-template-pagetemplate-landing article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow.svg"); } body.page-template-pagetemplate-landing article.product { width: 50%; display: inline-block; vertical-align: top; padding: 0; margin-bottom: 30px; color: #999999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (min-width: 960px) { body.page-template-pagetemplate-landing article.product { width: 33.333%; } } @media only screen and (min-width: 1073px) { body.page-template-pagetemplate-landing article.product { width: 25%; } } @media only screen and (max-width: 759px) { body.page-template-pagetemplate-landing article.product:nth-child(odd) { padding-right: 5px; } body.page-template-pagetemplate-landing article.product:nth-child(even) { padding-left: 5px; } } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing article.product { border: 1px solid transparent; padding: 15px; } body.page-template-pagetemplate-landing article.product:hover { border: 1px solid #e4e4e4; } } body.page-template-pagetemplate-landing article.product .colour-marker { cursor: pointer; display: inline-block; margin: 5px 11px 0 0; width: 16px; height: 16px; border-radius: 100%; transform: rotate(90deg); color: transparent; position: relative; } body.page-template-pagetemplate-landing article.product .colour-marker.activethumb::before { position: absolute; content: ''; width: 22px; height: 22px; top: -4px; left: -4px; border-radius: 100%; display: block; border: 1px solid #7a7a7a; } body.page-template-pagetemplate-landing article.product .colour-marker span { position: relative; width: 7px; height: 14px; } body.page-template-pagetemplate-landing article.product .colour-marker span:first-of-type { float: left; border-top-left-radius: 7px; border-bottom-left-radius: 7px; margin-left: 1px; margin-top: 1px; } body.page-template-pagetemplate-landing article.product .colour-marker span:last-of-type { float: right; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-right: 1px; margin-top: 1px; } body.page-template-pagetemplate-landing article.product .entry-title { color: black; font-size: 1em; margin: 1em 0 0; text-transform: uppercase; } body.page-template-pagetemplate-landing article.product .entry-meta { line-height: 1.3; font-size: 0.875em; margin-bottom: 10px; } body.page-template-pagetemplate-landing article.product a:link, body.page-template-pagetemplate-landing article.product a:visited { color: inherit; text-decoration: none; outline: none; } body.page-template-pagetemplate-landing article.product a:focus, body.page-template-pagetemplate-landing article.product a:hover, body.page-template-pagetemplate-landing article.product a:active { color: inherit; text-decoration: none; outline: none; } body.page-template-pagetemplate-landing article.product .modelprice { display: block; } body.page-template-pagetemplate-landing article.product .saddle-profile::after { content: '/'; display: inline-block; margin: 0 0.2em 0 0.4em; } body.page-template-pagetemplate-landing article.product .entry-thumbnail { position: relative; } body.page-template-pagetemplate-landing article.product .entry-thumbnail[data-highlight]:after { content: attr(data-highlight); /* no quotes around attribute name! */ position: absolute; right: 0; bottom: 0; background: #00fbe4; padding: 5px 12px; text-transform: uppercase; color: white; font-size: 0.8em; font-weight: bold; } body.page-template-pagetemplate-landing div.category-overview { width: 100%; margin: 50px auto; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing div.category-overview { width: 80%; } } body.page-template-pagetemplate-landing article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius-group.svg"); } body.page-template-pagetemplate-landing article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat-group.svg"); } body.page-template-pagetemplate-landing article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow-group.svg"); } body.page-template-pagetemplate-landing article .entry-thumbnail:after { width: 30%; right: 4%; } body.page-template-pagetemplate-landingnotitle { } h1.page-title { } body.page-template-pagetemplate-landingnotitle div.intro { text-align: center; margin: 3em 0; } body.page-template-pagetemplate-landingnotitle h1.page-title { font-size: 1.8em; margin: 1.7em 0 0.2em; text-transform: uppercase; text-align: center; } body.page-template-pagetemplate-landingnotitle h1.page-title + p { text-align: center; font-size: 0.9em; line-height: 1.85; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landingnotitle h1.page-title, body.page-template-pagetemplate-landingnotitle h1.page-title + p { text-align: left; display: inline-block; font-size: 0.9em; } body.page-template-pagetemplate-landingnotitle h1.page-title { margin: 1.7em 0 0.2em; text-transform: uppercase; font-weight: bold; } body.page-template-pagetemplate-landingnotitle h1.page-title:after { content: '/'; } } body.page-template-pagetemplate-landingnotitle main { margin: 0 10px; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landingnotitle main { margin: 0 30px; } } body.page-template-pagetemplate-landingnotitle main img.attachment-header, body.page-template-pagetemplate-landingnotitle main img.attachment-thirtysix-eleven { width: 100vw; margin-left: -10px; max-width: 100vw; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landingnotitle main img.attachment-header, body.page-template-pagetemplate-landingnotitle main img.attachment-thirtysix-eleven { margin-left: -30px; } } body.page-template-pagetemplate-landingnotitle article .entry-thumbnail:after { width: 10%; height: 10%; background-size: 100% 100%; display: inline-block; content: ""; position: absolute; right: 8%; bottom: 4%; } body.page-template-pagetemplate-landingnotitle article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius.svg"); } body.page-template-pagetemplate-landingnotitle article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat.svg"); } body.page-template-pagetemplate-landingnotitle article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow.svg"); } body.page-template-pagetemplate-landingnotitle article.product { width: 50%; display: inline-block; vertical-align: top; padding: 0; margin-bottom: 30px; color: #999999; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (min-width: 960px) { body.page-template-pagetemplate-landingnotitle article.product { width: 33.333%; } } @media only screen and (min-width: 1073px) { body.page-template-pagetemplate-landingnotitle article.product { width: 25%; } } @media only screen and (max-width: 759px) { body.page-template-pagetemplate-landingnotitle article.product:nth-child(odd) { padding-right: 5px; } body.page-template-pagetemplate-landingnotitle article.product:nth-child(even) { padding-left: 5px; } } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landingnotitle article.product { border: 1px solid transparent; padding: 15px; } body.page-template-pagetemplate-landingnotitle article.product:hover { border: 1px solid #e4e4e4; } } body.page-template-pagetemplate-landingnotitle article.product .colour-marker { cursor: pointer; display: inline-block; margin: 5px 11px 0 0; width: 16px; height: 16px; border-radius: 100%; transform: rotate(90deg); color: transparent; position: relative; } body.page-template-pagetemplate-landingnotitle article.product .colour-marker.activethumb::before { position: absolute; content: ''; width: 22px; height: 22px; top: -4px; left: -4px; border-radius: 100%; display: block; border: 1px solid #7a7a7a; } body.page-template-pagetemplate-landingnotitle article.product .colour-marker span { position: relative; width: 7px; height: 14px; } body.page-template-pagetemplate-landingnotitle article.product .colour-marker span:first-of-type { float: left; border-top-left-radius: 7px; border-bottom-left-radius: 7px; margin-left: 1px; margin-top: 1px; } body.page-template-pagetemplate-landingnotitle article.product .colour-marker span:last-of-type { float: right; border-top-right-radius: 7px; border-bottom-right-radius: 7px; margin-right: 1px; margin-top: 1px; } body.page-template-pagetemplate-landingnotitle article.product .entry-title { color: black; font-size: 1em; margin: 1em 0 0; text-transform: uppercase; } body.page-template-pagetemplate-landingnotitle article.product .entry-meta { line-height: 1.3; font-size: 0.875em; margin-bottom: 10px; } body.page-template-pagetemplate-landingnotitle article.product a:link, body.page-template-pagetemplate-landingnotitle article.product a:visited { color: inherit; text-decoration: none; outline: none; } body.page-template-pagetemplate-landingnotitle article.product a:focus, body.page-template-pagetemplate-landingnotitle article.product a:hover, body.page-template-pagetemplate-landingnotitle article.product a:active { color: inherit; text-decoration: none; outline: none; } body.page-template-pagetemplate-landingnotitle article.product .modelprice { display: block; } body.page-template-pagetemplate-landingnotitle article.product .saddle-profile::after { content: '/'; display: inline-block; margin: 0 0.2em 0 0.4em; } body.page-template-pagetemplate-landingnotitle article.product .entry-thumbnail { position: relative; } body.page-template-pagetemplate-landingnotitle article.product .entry-thumbnail[data-highlight]:after { content: attr(data-highlight); /* no quotes around attribute name! */ position: absolute; right: 0; bottom: 0; background: #00fbe4; padding: 5px 12px; text-transform: uppercase; color: white; font-size: 0.8em; font-weight: bold; } body.page-template-pagetemplate-landingnotitle div.category-overview { width: 100%; margin: 50px auto; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landingnotitle div.category-overview { width: 80%; } } body.page-template-pagetemplate-landingnotitle article.sectax_saddle_profile-radius .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/radius-group.svg"); } body.page-template-pagetemplate-landingnotitle article.sectax_saddle_profile-flat .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/flat-group.svg"); } body.page-template-pagetemplate-landingnotitle article.sectax_saddle_profile-shallow .entry-thumbnail:after { background-image: url("/wp-content/themes/fabric/img/shallow-group.svg"); } body.page-template-pagetemplate-landingnotitle article .entry-thumbnail:after { width: 30%; right: 4%; } .cookie-banner { display: none; background: rgba(255,255,255,0.8); position: fixed; bottom: 0; left: 0; width: 100%; padding: 15px; z-index: 10000; cursor: pointer; } .cookie-container { margin: 0 auto; width: 70%; max-width: 900px; color: black; font-size: 0.9em; line-height: 1.2; } /* * * Editor style for row of action buttons * */ .row-of-actions { text-align: center; margin: 7.5rem 0; } main .entry-content .row-of-actions a:link, main .entry-content .row-of-actions a:visited { display: inline-block; margin: 1em 6px; text-transform: uppercase; border: 1px solid #F2EEEF; text-decoration: none; text-align: center; font-weight: 400; font-size: 0.75em; padding: 3px 47px; } main .entry-content .row-of-actions a:focus, main .entry-content .row-of-actions a:hover, main .entry-content .row-of-actions a:active { color: white; background: black; outline: none; } /* * * Copy of styles from product categories to support landing page sidebars * * */ body.page-template-pagetemplate-landing div.category-sidebar { margin: 50px 0; } body.page-template-pagetemplate-landing div.category-sidebar > div { display: none; padding: 30px 0; border-bottom: 1px solid #ccc; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing div.category-sidebar > div { display: block !important; padding: 0; border-top: none; border-bottom: none; } } body.page-template-pagetemplate-landing div.category-sidebar h2 { text-align: center; text-align: left; cursor: pointer; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing div.category-sidebar h2 { text-align: left; cursor: default; } } @media only screen and (max-width: 759px) { body.page-template-pagetemplate-landing div.category-sidebar h2 { padding: 1em 0; margin: 0; border-top: 1px solid #eee; border-bottom: 1px solid #eee; } } @media only screen and (max-width: 759px) { body.page-template-pagetemplate-landing div.category-sidebar { width: 100% !important; } body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list.many { column-count: 2; padding-left: 20%; padding-right: 20%; } body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list.many > li { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; display: inline-block; width: 100%; margin-bottom: 2em; } body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list.single { text-align: center; } body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list.single > li { display: inline-block; text-align: left; } .filter-list a:link, .filter-list a:visited, .filter-list a:focus, .filter-list a:hover, .filter-list a:active { margin-left: 0; margin-top: 0; } } @media only screen and (max-width: 570px) { body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list { padding-left: 20%; padding-right: 10%; } } @media only screen and (max-width: 520px) { body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list.many { padding-left: 10%; padding-right: 10%; } } @media only screen and (max-width: 400px) { body.page-template-pagetemplate-landing div.category-sidebar ul.filter-list { padding-left: 10%; padding-right: 5%; } } body.page-template-pagetemplate-landing div.category-overview { width: 100%; margin: 50px auto; /* @media only screen and (max-width: 759px) { width: auto; margin: 50px -16px; } */ } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing div.category-overview { width: 80%; } } body.page-template-pagetemplate-landing div.intro { text-align: center; margin: 3em 0 0; } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing div.category-sidebar { width: 30%; float: left; } body.page-template-pagetemplate-landing div.category-sidebar + div.category-overview, body.page-template-pagetemplate-landing div.sidebar + div.category-overview { width: 70%; float: right; } } @media only screen and (min-width: 1073px) { body.page-template-pagetemplate-landing div.category-sidebar { width: 20%; width: 10%; } body.page-template-pagetemplate-landing div.category-sidebar + div.category-overview, body.page-template-pagetemplate-landing div.sidebar + div.category-overview { width: 80%; margin-right: 10%; } } body.page-template-pagetemplate-landing div.category-sidebar h2 { text-transform: uppercase; position: relative; font-size: 20px; } @media only screen and (max-width: 759px) { body.page-template-pagetemplate-landing div.category-sidebar h2:after { content: '+'; font-weight: 100; font-size: 2em; top: 0.25em; position: absolute; right: 0; } body.page-template-pagetemplate-landing div.category-sidebar h2.open:after { content: '—'; font-weight: 100; font-size: 1em; top: 0.92em; right: 5px; } } @media only screen and (min-width: 760px) { body.page-template-pagetemplate-landing div.category-sidebar button { display: none; } } #footer_language_list img { max-width: 36px; margin-left: 10px; max-height: 22px; } #footer_language_list { position: relative; /*width: 240px;*/ width: 90px; } #footer_language_list ul { position: absolute; top: 100%; margin: 0; left: 0; right: 0; background: white; border-radius: inherit; border: 1px solid rgba(0, 0, 0, 0.17); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); font-weight: 100; -webkit-transition: all 0.1s ease-in; -moz-transition: all 0.1s ease-in; -ms-transition: all 0.1s ease-in; -o-transition: all 0.1s ease-in; transition: all 0.1s ease-in; list-style: none; opacity: 0; pointer-events: none; padding: 0; } #footer_language_list.active .dropdown { opacity: 1; pointer-events: auto; z-index: 10; } #footer_language_list .dropdown li a:after { display: none; } .flag-icon-background { background-size: contain; background-size: auto 80%; background-position: 50%; background-repeat: no-repeat; } #footer_language_list .dropdown li, .flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; /* display: inline-block; width: 1.33333333em; line-height: 1em; */ } /* .flag-icon:before, #footer_language_list .dropdown li:before { content: "\00a0"; } */ .flag-icon.flag-icon-squared { width: 1em; } .flag-icon-gb, .flag-icon-en { background-image: url(/wp-content/themes/fabric/flags/4x3/gb.svg); } .flag-icon-gb.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/gb.svg); } .flag-icon-eu { background-image: url(/wp-content/themes/fabric/flags/4x3/eu.svg); } .flag-icon-eu.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/eu.svg); } .flag-icon-jp { background-image: url(/wp-content/themes/fabric/flags/4x3/jp.svg); } .flag-icon-jp.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/jp.svg); } .flag-icon-it { background-image: url(/wp-content/themes/fabric/flags/4x3/it.svg); } .flag-icon-it.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/it.svg); } .flag-icon-de { background-image: url(/wp-content/themes/fabric/flags/4x3/de.svg); } .flag-icon-de.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/de.svg); } .flag-icon-fr { background-image: url(/wp-content/themes/fabric/flags/4x3/fr.svg); } .flag-icon-fr.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/fr.svg); } .flag-icon-pt { background-image: url(/wp-content/themes/fabric/flags/4x3/pt.svg); } .flag-icon-pt.flag-icon-squared { background-image: url(/wp-content/themes/fabric/flags/1x1/pt.svg); } #footer_language_list { /* width: 264px; */ } #footer_language_list .dropdown li a { position: relative; padding-right: 24px; } .wrapper-dropdown-3 .dropdown li a:after { display: block; width: 30px; height: 18px; position: absolute; top: 12px; right: 10px; background: none; background-size: 30px auto; /* content: '€'; */ content: ' '; } .wrapper-dropdown-3 .dropdown li[data-currency="USD"] a:after { /* content: '$'; */ background: none; } .wrapper-dropdown-3 .dropdown li[data-currency="GBP"] a:after { /* content: '£'; */ background: none; } #footer_language_list .dropdown li a img { position: absolute; right: 3px; } #footer_language_list .dropdown li a span { display: block; } #footer_language_list .dropdown li a span.translated-name { font-size: 0.7em; } #footer_language_list > span span.translated-name { display: none; } /* MailChimp */ /* MailChimp Form Embed Code - Horizontal Super Slim - 12/16/2015 v10.7 Adapted from: http://blog.heyimcat.com/universal-signup-form/ */ /* #mc_embed_signup form {text-align:center; padding:10px 0 10px 0;} .mc-field-group { display: inline-block; } /* positions input field horizontally * / #mc_embed_signup input.email {font-family:"Open Sans","Helvetica Neue",Arial,Helvetica,Verdana,sans-serif; font-size: 15px; border: 1px solid #ABB0B2; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #343434; background-color: #fff; box-sizing:border-box; height:32px; padding: 0px 0.4em; display: inline-block; margin: 0; width:350px; vertical-align:top;} #mc_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;} #mc_embed_signup .clear {display: inline-block;} /* positions button horizontally in line with input * / #mc_embed_signup .button {font-size: 13px; border: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; letter-spacing: .03em; color: #fff; background-color: #aaa; box-sizing:border-box; height:32px; line-height:32px; padding:0 18px; display: inline-block; margin: 0; transition: all 0.23s ease-in-out 0s;} #mc_embed_signup .button:hover {background-color:#777; cursor:pointer;} */ #mc_embed_signup div#mce-responses {float:left; top:-1.4em; padding:0em .5em 0em .5em; overflow:hidden; width:90%;margin: 0 5%; clear: both;} #mc_embed_signup div.response {margin:1em 0; padding:1em .5em .5em 0; font-weight:bold; float:left; top:-1.5em; z-index:1; width:80%;} #mc_embed_signup #mce-error-response {display:none;} #mc_embed_signup #mce-success-response {color:#529214; display:none;} #mc_embed_signup label.error {display:block; float:none; width:auto; margin-left:1.05em; text-align:left; padding:.5em 0;} /* @media (max-width: 768px) { #mc_embed_signup input.email {width:100%; margin-bottom:5px;} #mc_embed_signup .clear {display: block; width: 100% } #mc_embed_signup .button {width: 100%; margin:0; } } */ /* MailChimp inline styles */ /* #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;} #mc-embedded-subscribe-form input[type=checkbox]{display: inline; width: auto;margin-right: 10px;} #mergeRow-gdpr {margin-top: 20px;} #mergeRow-gdpr fieldset label {font-weight: normal;} #mc-embedded-subscribe-form .mc_fieldset{border:none;min-height: 0px;padding-bottom:0px;} */ .ac_pane img.size-windowwidth:last-child { margin-bottom: 0; } /* New blog and team layouts */ body.archive article.team { width: 50%; display: inline-block; vertical-align: top; /* from products */ margin-bottom: 30px; /*color: #999999;*/ padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } @media only screen and (max-width: 959px) { body.archive article.team { margin-bottom: 0; } } body.archive article.team > a > header { height: 90px; } @media only screen and (max-width: 959px) { body.archive article.team > a > header { height: 112px; } } body.post-type-archive-team .overview { max-width: 2000px; margin: 0 auto; } @media only screen and (min-width: 2000px) { } body.archive article.team > div { max-height: 0; overflow: hidden; display: block; background: white; width: calc( 100vw - 64px ); /* padding and border */ max-width: calc( 2000px - 64px ); border: 1px solid transparent; padding: 0 15px; margin: 16px; margin: 0; visibility: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media only screen and (max-width: 600px) { body.archive article.team > div { display: block; } } /* @media only screen and (min-width: 2000px) { body.archive article.team > div { width: calc( 2000px - 64px ); } } */ body.archive article.team:nth-child(4n+1) > div { margin-left: 16px; } body.archive article.team:nth-child(4n+2) > div { /* margin-left: calc( 16px - 25vw ); */ margin-left: calc( 16px - 100% ); /* covers max-width on overview */ } body.archive article.team:nth-child(4n+3) > div { margin-left: calc( 16px - 200% ); } body.archive article.team:nth-child(4n+4) > div { margin-left: calc( 16px - 300% ); } /* then media queries for 2-up and 3-up */ @media only screen and (min-width: 960px) and (max-width: 1072px) { body.archive article.team:nth-child(3n+1) > div { margin-left: 16px; } body.archive article.team:nth-child(3n+2) > div { margin-left: calc( 16px - 100% ); } body.archive article.team:nth-child(3n+3) > div { margin-left: calc( 16px - 200% ); } } @media only screen and (max-width: 959px) { body.archive article.team:nth-child(2n+1) > div { margin-left: 16px; } body.archive article.team:nth-child(2n+2) > div { margin-left: calc( 16px - 100% ); } } /* Isotope visibility for 2-up, 3-up and 4-up layouts. Add classes mod 2, mod 3 & mod 4 then target each group with media queries */ body.archive article.team.is-visible-mod4-0 > div { margin-left: 16px; } body.archive article.team.is-visible-mod4-1 > div { margin-left: calc( 16px - 100% ); } body.archive article.team.is-visible-mod4-2 > div { margin-left: calc( 16px - 200% ); } body.archive article.team.is-visible-mod4-3 > div { margin-left: calc( 16px - 300% ); } @media only screen and (min-width: 960px) and (max-width: 1072px) { body.archive article.team.is-visible-mod3-0 > div { margin-left: 16px; } body.archive article.team.is-visible-mod3-1 > div { margin-left: calc( 16px - 100% ); } body.archive article.team.is-visible-mod3-2 > div { margin-left: calc( 16px - 200% ); } } @media only screen and (max-width: 959px) { body.archive article.team.is-visible-mod2-0 > div { margin-left: 16px; } body.archive article.team.is-visible-mod2-1 > div { margin-left: calc( 16px - 100% ); } } body.archive article.team.current > div { /* -moz-transition: max-height .5s ease-in; -webkit-transition: max-height .5s ease-in; -o-transition: max-height .5s ease-in; transition: max-height .5s ease-in; */ max-height: 1000px; border: 1px solid #e4e4e4; visibility: visible; margin-top: 16px; margin-bottom: 16px; } body.archive article.team.current > div button { border:none; outline:none !important; background-image:none; background-color:transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; position: absolute; top: 10px; right: 30px; text-indent: -9999em; } body.archive article.team.current > div button::after, body.archive article.team.current > div button::before { cursor: pointer; border-radius: 1px; height: 2px; width: 30px; background: black; position: absolute; display: block; content: ''; top: 0; } body.archive article.team.current > div button::before { transform: rotate(45deg); } body.archive article.team.current > div button::after { transform: rotate(-45deg); } body.archive article.team.current > div [class^="icon-"], body.archive article.team.current > div [class*=" icon-"] { width: 37px; text-decoration: none !important; } body.archive article.team.current > div [class^="icon-"]:before, body.archive article.team.current > div [class*=" icon-"]:before { line-height: 43px; color: black !important; background: transparent; line-height: 41px; padding-top: 2px; font-size: 1.2em; text-decoration: none; } body.archive article.team.current > div [class^="icon-"]:hover:before, body.archive article.team.current > div [class*=" icon-"]:hover:before { color: #B9B9B9 !important; background: transparent; text-decoration: none; } body.archive article.team.current > div [class^="icon-"]:hover, body.archive article.team.current > div [class*=" icon-"]:hover { border-color: #e6e6e6; text-decoration: none; } body.archive article.team.current > a { position: relative; } body.archive article.team > a > h2, body.archive article.team > h2 { margin-bottom: 0.5em; } body.archive article.team.current > a:after { content: ''; width: 0; -webkit-transform: rotate(360deg); border-radius: 0; background-color: transparent; padding: 0; height: 0; border-style: solid; border-width: 0 14px 16px 14px; border-color: transparent transparent white transparent; position: absolute; bottom: -8px; left: 50%; margin-bottom: -10px; margin-left: -16px; } body.archive article.team.current > a:before { content: ''; width: 0; -webkit-transform: rotate(360deg); border-radius: 0; background-color: transparent; padding: 0; height: 0; border-style: solid; border-width: 0 16px 18px 16px; border-color: transparent transparent #e4e4e4 transparent; position: absolute; bottom: -8px; left: 50%; margin-bottom: -10px; margin-left: -18px; } body.archive article.team > div:before, body.archive article.team > div:after { /* * Clearfix: contain floats * * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that receive the `clearfix` class. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ content: " "; /* 1 */ display: table; /* 2 */ } body.archive article.team > div:after { clear: both; } body.archive article.team > div .entry-thumbnail { width: 66.666%; /* float: left; */ margin: 1.245em 30px 1.245em 0; flex: 0 0 66.666%; } @media only screen and (max-width: 1200px) { body.archive article.team > div .entry-thumbnail { width: 50%; flex: 0 0 50%; } } @media only screen and (max-width: 600px) { body.archive article.team > div .entry-thumbnail { width: 100%; float: none; margin: 1.245em 0; } } /* body.archive article.team > div .entry-content:after { content: '\f00d'; display: block; position: absolute; top: 0; right: 0; font-family: FontAwesome; cursor: pointer; font-size: 2em; line-height: 1; } */ body.archive article.team > div .entry-content { position: relative; overflow: hidden; /* don't wrap float */ /* flex: 0 0 33.333%; */ flex: 1 1 auto; margin: 1.245em 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -moz-box-orient: vertical; -webkit-box-direction: normal; -moz-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } body.archive article.team > div .entry-content h2 { margin-top: 2em; } body.archive article.team > div .entry-content h3 { margin-top: auto; font-size: 0.9em; font-weight: inherit; } body.archive article.team > div .entry-content h3 + span { line-height: 1; } body.archive article.team > div .entry-content h3 + span a { width: auto !important; margin-right: 1.5em; } body.archive article.team.current > div [class^="icon-"]:before, body.archive article.team.current > div [class*=" icon-"]:before { line-height: 1; } @media only screen and (min-width: 960px) { body.archive article.team { width: 33.3333%; } } @media only screen and (min-width: 1073px) { body.archive article.team { width: 25%; } } /* @media only screen and (min-width: 760px) { */ body.archive article.team > a { border: 1px solid transparent; padding: 15px; display: block; } body.archive article.team > a:hover { border: 1px solid #e4e4e4; text-decoration: none; } body.archive article.team > a:focus, body.archive article.team > a:hover, body.archive article.team > a:active { text-decoration: none; } body.archive article.team > a:hover .entry-thumbnail { position: relative; } body.archive article.team > a:hover .entry-thumbnail:before { content: 'View Details'; position: absolute; z-index: 20; top: 50%; left: 50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); color: white; padding: 5px 10px; border: solid 1px white; white-space: nowrap; } body.archive article.team > a:hover img { -webkit-filter: brightness(0.5); -moz-filter: brightness(0.5); filter: brightness(0.5); } body.archive article.team .read-more { text-transform: uppercase; letter-spacing: 2px; font-size: 0.7em; display: inline-block; } body.archive article.team .read-more span::before { content: ""; display: block; position: absolute; bottom: -2px; left: 0; right: 2px; border-bottom: 1px solid black; } body.archive article.team .read-more span { display: inline-block; position: relative; } body.archive article.team .read-more::after { content: "\2192"; display: inline-block; margin-left: 6px; } /* } */ /* @media only screen and (max-width: 759px) { body.archive article.team:nth-child(odd) { padding-right: 5px; } body.archive article.team:nth-child(even) { padding-left: 5px; } } */ body.post-type-archive-team ul.ribbon, body.post-type-archive-team ul.stack { list-style-type: none; padding: 0; margin: 1.2em 0 2.2em; text-align: center; font-size: 0.85em; } body.post-type-archive-team ul.ribbon li { display: inline-block; margin: 5px 5px 5px 0; } body.post-type-archive-team ul.stack li { display: block; margin: 5px auto; text-align: center; } body.post-type-archive-team ul.ribbon a, body.post-type-archive-team ul.stack a { display: inline-block; padding: 5px 20px 5px; background: transparent; color: white; font-size: 0.7em; text-decoration: none; text-transform: uppercase; } body.post-type-archive-team ul.ribbon a:hover, body.post-type-archive-team ul.ribbon a.current, body.post-type-archive-team ul.stack a:hover, body.post-type-archive-team ul.stack a.current { background: black; color: white !important; } body.post-type-archive-team button { display: block; margin: 0 auto 1em; } body.post-type-archive-team .stack { /*display: none;*/ display: inline-block; } @media only screen and (max-width: 649px) { body.post-type-archive-team .stackgroup > div { display: none; padding: 30px 0; border-bottom: 1px solid #ccc; margin: 0 16px 16px; } } @media only screen and (min-width: 650px) { body.post-type-archive-team .stackgroup > div { display: block !important; } } body.post-type-archive-team ul.stack span { display: none; font-size: 18px; } body.post-type-archive-team button.stacker { background: none; border: 0; color: inherit; /* cursor: default; */ font: inherit; line-height: normal; overflow: visible; padding: 0; -webkit-appearance: button; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; cursor: pointer; padding: 5px 20px 5px; background: white; color: black; font-size: 0.9em; text-decoration: none; text-transform: uppercase; position: relative; font-size: 20px; padding: 1em 0; margin: 16px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; text-align: left; cursor: pointer; display: block; width: calc( 100% - 32px ); } body.post-type-archive-team button.stacker:after { content: '+'; font-weight: 100; font-size: 2em; top: 0.25em; position: absolute; right: 0; } body.post-type-archive-team button.stacker.open:after { content: '—'; font-weight: 100; font-size: 1em; top: 0.92em; right: 5px; } body.post-type-archive-case-study ul.stack, body.post-type-archive-team ul.stack { font-size: 1em; margin-top: 0; } body.post-type-archive-case-study ul.stack li, body.post-type-archive-team ul.stack li { margin: 10px auto; } body.post-type-archive-case-study ul.stack a, body.post-type-archive-team ul.stack a { background: transparent; color: black; border: 1px solid black; font-size: 0.7rem; /* font-weight: 700; letter-spacing: 2px; padding: 15px 20px; */ display: block; } body.post-type-archive-case-study ul.stack a.is-checked, body.post-type-archive-case-study ul.stack a:hover, body.post-type-archive-team ul.stack a.is-checked, body.post-type-archive-team ul.stack a:hover { color: white !important; border-color: black !important; background-color: black !important; } @media only screen and (min-width: 650px) { body.post-type-archive-team ul.stack li { display: inline-block; margin: 5px 5px 5px 0; } body.post-type-archive-team button.stacker { display: none; } body.post-type-archive-team ul.stack { display: block; margin: 2.2em 0; } } body.post-type-archive-project ul.stack a { display: block; border: none; text-align: left; background: white; } body.post-type-archive-project ul.stack a:hover { background: black; } body.post-type-archive-project ul.stack li { display: block; margin: 0; } body.post-type-archive-project ul.stack { position: absolute; z-index: 100; display: none; border: 1px solid black; border-top: none; } body.post-type-archive-project div.stackgroup { display: inline-block; vertical-align: top; margin: 0 5px 10px; } body.post-type-archive-project button.stacker { display: block; background: transparent; color: #a4a5a6; border: 1px solid black; font-size: 0.7rem; /* font-weight: 700; letter-spacing: 2px; padding: 15px 20px; */ display: block; width: 100%; transform: none; margin: 0; text-align: left; text-transform: uppercase; position: relative; } body.post-type-archive-project button.stacker:focus, body.post-type-archive-project button.stacker:hover, body.post-type-archive-project button.stacker:active { color: black; outline: none; } body.post-type-archive-project button.stacker::after { font-family: FontAwesome; font-weight: normal; font-style: normal; -webkit-font-smoothing: antialiased; text-decoration: none; margin: 0 auto; vertical-align: middle; speak: none; content: "\f0dd"; font-size: 2em; /* font-size: 3em !important; padding: 7px 5px 3px; width: 0.9em; height: 0.9em; line-height: 1.2; */ position: absolute; top: 50%; right: 16px; transform: translateY(-50%); margin-top: -4px; } body.post-type-archive-project .stackers { text-align: center; margin: 0 0 60px; } body.post-type-archive-team .stackgroup { width: auto !important; text-align: center; } body.post-type-archive-team .stack { /*display: inline-block !important; */} body.post-type-archive-team button.stacker { /*display: none !important;*/ } body.post-type-archive-project .stackgroup { width: 264px !important; } body.post-type-archive-project .stackgroup ul.stack { width: 262px !important; } body.post-type-archive-team div.intro { text-align: center; margin: 3em 0 0; } body.post-type-archive-team h1.page-title { font-size: 1.8em; margin: 1.7em 0 0.2em; text-transform: uppercase; } @media only screen and (min-width: 760px) { body.post-type-archive-team h1.page-title:after { content: '/'; } } body.post-type-archive-team h1.page-title + .entry-content { font-size: 0.9em; } body.post-type-archive-team h1.page-title, body.post-type-archive-team h1.page-title + .entry-content { text-align: center; } @media only screen and (min-width: 760px) { body.post-type-archive-team h1.page-title, body.post-type-archive-team h1.page-title + .entry-content { text-align: left; display: inline-block; font-size: 0.9em; } } body.post-type-archive-team h1.page-title + .entry-content a { display: inline-block; background: white; color: black; border: 1px solid black; padding: 2px 25px 1px; text-decoration: none !important; margin: 1.3em 0 2em 0; /* font-size: 0.6em; */ font-weight: bold; } @media only screen and (max-width: 759px) { /* body.blog .entry-content > article:nth-child(odd) { padding-right: 5px; padding-left: 5px; } body.blog .entry-content > article:nth-child(even) { padding-left: 5px; padding-right: 5px; } */ body.blog .entry-wrap-2, body.blog .entry-content-2 { padding-left: 5px; padding-right: 5px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } } .md-overlay { position: fixed; width: 100%; height: 100%; visibility: hidden; top: 0; left: 0; z-index: 1000; opacity: 0; background: rgba(0,0,0,0.8); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show ~ .md-overlay { opacity: 1; visibility: visible; } .md-modal { position: fixed; top: 50%; left: 50%; /* width: 50%; max-width: 630px; */ min-width: 300px; width: 750px; max-width: calc( 100vw - 20px ); height: auto; z-index: 2000; visibility: hidden; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); } .md-show { visibility: visible; } .md-content { /* color: #fff; background: #e74c3c; */ color: #000; background: #fff; position: relative; border-radius: 0; margin: 0 auto; } .md-content h3 { font-size: 1.3em; margin-bottom: 0; letter-spacing: 1px; } .md-content h3 + p { margin-top: 0.6em; line-height: 1.45; letter-spacing: 0.5px; text-align: center; } .md-content button.modal-close { border: none; outline: none !important; background-image: none; background-color: transparent; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; position: absolute; top: 25px; right: 33px; text-indent: -9999em; top: 13px; right: 17px; width: 30px; } .md-content button.modal-close::after, .md-content button.modal-close::before { cursor: pointer; border-radius: 1px; height: 2px; width: 24px; background: black; position: absolute; display: block; content: ''; top: 0; top: 12px; } .md-content button.modal-close::before { transform: rotate(45deg); } .md-content button.modal-close::after { transform: rotate(-45deg); } .md-content button.no-thanks { background:none!important; color:inherit; border:none; padding: 4px 15px !important; font: inherit; /*border is optional*/ border-bottom:1px solid #444; cursor: pointer; font-weight: bold; font-size: 1rem; margin-bottom: 1.3em; } .md-content input[type="submit"] { display: inline-block; padding: 15px 60px 15px; background: black; color: white; text-decoration: none; border: 1px solid black; font-size: 1.2rem; font-weight: 700; letter-spacing: 0px; } .md-content { position: relative; display: flex; } .md-content .modal-image { display: none; } .md-content .modal-message { padding: 20px 25px; box-sizing: border-box; } @media only screen and (min-width: 770px) { .md-content .modal-image { display: block; width: 50%; flex: 0 0 50%; position: relative; /* width: 50%; float: left; */ } .md-content .modal-image img:not(.logo) { width: 100%; height: 100%; object-fit: cover; } .md-content .modal-message { width: 50%; flex: 0 0 50%; } } .md-content .modal-message { position: relative; display: flex; flex-direction: column; justify-content: center; } .md-content .modal-message > * { align-self: center; } .md-content img.logo { float: none; width: 100px; position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); } .md-content #mce-EMAIL { padding: 9px 6px 7px; width: 100%; box-sizing: border-box; margin: 24px auto; } .md-content label.checkbox { color: #666; /*font-weight: bold;*/ font-size: 0.85em; display: flex; align-items: center; } .md-content label.checkbox span { line-height: 1.1; } .md-content label.checkbox input { font-size: 2em; width: 30px; } .md-content ::-webkit-input-placeholder { /* Chrome/Opera/Safari */ color: #ccc; font-weight: bold; font-size: 0.8em; } .md-content ::-moz-placeholder { /* Firefox 19+ */ color: #ccc; font-weight: bold; font-size: 0.8em; } .md-content :-ms-input-placeholder { /* IE 10+ */ color: #ccc; font-weight: bold; font-size: 0.8em; } .md-content :-moz-placeholder { /* Firefox 18- */ color: #ccc; font-weight: bold; font-size: 0.8em; } .md-effect-1 .md-content { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); opacity: 0; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .md-show.md-effect-1 .md-content { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /* Children shortcode */ div.overview.children { margin: 50px -10px; width: calc( 100vw - 40px ); width: 100%; } @media only screen and (min-width: 760px) { div.overview.children { width: 80%; width: calc( 100vw - 40px ); position: relative; left: 50%; transform: translateX(-50%); margin: 50px auto; } } div.overview.children > a { display: inline-block; width: calc( 50% - 20px ); margin: 50px 10px; vertical-align: top; text-decoration: none !important; text-align: center; } div.overview.children h3 { font-size: 1.7rem; margin-bottom: 0.2em; margin-top: 1.3em; } div.overview.children h3 + p { margin-top: -10px; }