/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type="checkbox"], [type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type="search"] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* ************************************************************************** scaffolding.css **************************************************************************/ /** * personalize *************************/ fieldset { border: none; margin: 0; padding:0; } /** * micro clearfix *************************/ .clearfix:before, .clearfix:after { content:""; display:table; } .clearfix:after { clear:both; } .clearfix { zoom:1; } /** * document reset *************************/ html { font-size: 16px; text-rendering: optimizelegibility; -ms-touch-action: manipulation; touch-action: manipulation; /* remove 300ms delay in some browsers */ } html { box-sizing: border-box; } * { margin : 0; padding: 0; } *, *::before, *::after { box-sizing: inherit; } a { -webkit-tap-highlight-color: rgba( 255, 255, 255, 0.5); -webkit-tap-highlight-color: transparent; /* -webkit-touch-callout: none; */ } a:focus, button:focus { /* http://a11yproject.com/posts/never-remove-css-outlines/ */ outline: thin dotted; } /* ************************************************************************** grid-framework-12mf.css **************************************************************************/ *[class*="grid_"] { margin-left: 0 auto; width: auto; } /* Always apply clearfix to container */ *[class*="grid_"]:before, *[class*="grid_"]:after { content:""; display:table; } *[class*="grid_"]:after { clear:both; } .row { clear: both; margin: 0 auto; max-width: 100%; } *[class*="col_"] { list-style: none; padding-left: 0; padding-right: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } *[class*="push_"], *[class*="pull_"] { position: relative; } @media screen and ( min-width: 992px ) { *[class*="col_"] { float: left; } /* Grid >> Children (Alpha ~ First, Omega ~ Last) */ .grid_12 *[class*="col_"] { padding-right: 24px; padding-left: 24px; } *[class*="grid_"] .alpha { padding-left: 0; } *[class*="grid_"] .omega { padding-right: 0; } /* Grid >> 12 Columns */ .grid_12 .col_1 { width: 8.333333%; } .grid_12 .col_2 { width: 16.666667%; } .grid_12 .col_3 { width: 25%; } .grid_12 .col_4 { width: 33.333333%; } .grid_12 .col_5 { width: 41.666667%; } .grid_12 .col_6 { width: 50%; } .grid_12 .col_7 { width: 58.333333%; } .grid_12 .col_8 { width: 66.666667%; } .grid_12 .col_9 { width: 75%; } .grid_12 .col_10 { width: 83.333333%; } .grid_12 .col_11 { width: 91.666667%; } .grid_12 .col_12 { width: 100%; } /* Prefix Extra Space >> 12 Columns */ .grid_12 .prefix_1 { margin-left: 8.333333%; } .grid_12 .prefix_2 { margin-left: 16.666667%; } .grid_12 .prefix_3 { margin-left:25%; } .grid_12 .prefix_4 { margin-left: 33.333333%; } .grid_12 .prefix_5 { margin-left: 41.666667%; } .grid_12 .prefix_6 { margin-left: 50%; } .grid_12 .prefix_7 { margin-left: 58.333333%; } .grid_12 .prefix_8 { margin-left: 66.666667%; } .grid_12 .prefix_9 { margin-left: 75%; } .grid_12 .prefix_10 { margin-left: 83.333333%; } .grid_12 .prefix_11 { margin-left: 91.666667%; } /* Suffix Extra Space >> 12 Columns */ .grid_12 .suffix_1 { margin-right: 8.333333%; } .grid_12 .suffix_2 { margin-right: 16.666667%; } .grid_12 .suffix_3 { margin-right:25%; } .grid_12 .suffix_4 { margin-right: 33.333333%; } .grid_12 .suffix_5 { margin-right: 41.666667%; } .grid_12 .suffix_6 { margin-right: 50%; } .grid_12 .suffix_7 { margin-right: 58.333333%; } .grid_12 .suffix_8 { margin-right: 66.666667%; } .grid_12 .suffix_9 { margin-right: 75%; } .grid_12 .suffix_10 { margin-right: 83.333333%; } .grid_12 .suffix_11 { margin-right: 91.666667%; } /* Push Space >> 12 Columns */ .grid_12 .push_1 { left: 8.333333%; } .grid_12 .push_2 { left: 16.666667%; } .grid_12 .push_3 { left: 25%; } .grid_12 .push_4 { left: 33.333333%; } .grid_12 .push_5 { left: 41.666667%; } .grid_12 .push_6 { left: 50%; } .grid_12 .push_7 { left: 58.333333%; } .grid_12 .push_8 { left: 66.666667%; } .grid_12 .push_9 { left: 75%; } .grid_12 .push_10 { left: 83.333333%; } .grid_12 .push_11 { left: 91.666667%; } /* Pull Space >> 12 Columns */ .grid_12 .pull_1 { left: -8.333333%; } .grid_12 .pull_2 { left: -16.666667%; } .grid_12 .pull_3 { left: -25%; } .grid_12 .pull_4 { left: -33.333333%; } .grid_12 .pull_5 { left: -41.666667%; } .grid_12 .pull_6 { left: -50%; } .grid_12 .pull_7 { left: -58.333333; } .grid_12 .pull_8 { left: -66.666667%; } .grid_12 .pull_9 { left: -75%; } .grid_12 .pull_10 { left: -83.333333%; } .grid_12 .pull_11 { left: -91.666667%; } } /* min-width */ body.compensate-for-scrollbar{overflow:hidden}.fancybox-active{height:auto}.fancybox-is-hidden{left:-9999px;margin:0;position:absolute!important;top:-9999px;visibility:hidden}.fancybox-container{-webkit-backface-visibility:hidden;height:100%;left:0;outline:none;position:fixed;-webkit-tap-highlight-color:transparent;top:0;-ms-touch-action:manipulation;touch-action:manipulation;transform:translateZ(0);width:100%;z-index:99992}.fancybox-container *{box-sizing:border-box}.fancybox-bg,.fancybox-inner,.fancybox-outer,.fancybox-stage{bottom:0;left:0;position:absolute;right:0;top:0}.fancybox-outer{-webkit-overflow-scrolling:touch;overflow-y:auto}.fancybox-bg{background:#1e1e1e;opacity:0;transition-duration:inherit;transition-property:opacity;transition-timing-function:cubic-bezier(.47,0,.74,.71)}.fancybox-is-open .fancybox-bg{opacity:.9;transition-timing-function:cubic-bezier(.22,.61,.36,1)}.fancybox-caption,.fancybox-infobar,.fancybox-navigation .fancybox-button,.fancybox-toolbar{direction:ltr;opacity:0;position:absolute;transition:opacity .25s ease,visibility 0s ease .25s;visibility:hidden;z-index:99997}.fancybox-show-caption .fancybox-caption,.fancybox-show-infobar .fancybox-infobar,.fancybox-show-nav .fancybox-navigation .fancybox-button,.fancybox-show-toolbar .fancybox-toolbar{opacity:1;transition:opacity .25s ease 0s,visibility 0s ease 0s;visibility:visible}.fancybox-infobar{color:#ccc;font-size:13px;-webkit-font-smoothing:subpixel-antialiased;height:44px;left:0;line-height:44px;min-width:44px;mix-blend-mode:difference;padding:0 10px;pointer-events:none;top:0;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.fancybox-toolbar{right:0;top:0}.fancybox-stage{direction:ltr;overflow:visible;transform:translateZ(0);z-index:99994}.fancybox-is-open .fancybox-stage{overflow:hidden}.fancybox-slide{-webkit-backface-visibility:hidden;display:none;height:100%;left:0;outline:none;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:absolute;text-align:center;top:0;transition-property:transform,opacity;white-space:normal;width:100%;z-index:99994}.fancybox-slide:before{content:"";display:inline-block;font-size:0;height:100%;vertical-align:middle;width:0}.fancybox-is-sliding .fancybox-slide,.fancybox-slide--current,.fancybox-slide--next,.fancybox-slide--previous{display:block}.fancybox-slide--image{overflow:hidden;padding:44px 0}.fancybox-slide--image:before{display:none}.fancybox-slide--html{padding:6px}.fancybox-content{background:#fff;display:inline-block;margin:0;max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;padding:44px;position:relative;text-align:left;vertical-align:middle}.fancybox-slide--image .fancybox-content{animation-timing-function:cubic-bezier(.5,0,.14,1);-webkit-backface-visibility:hidden;background:transparent;background-repeat:no-repeat;background-size:100% 100%;left:0;max-width:none;overflow:visible;padding:0;position:absolute;top:0;transform-origin:top left;transition-property:transform,opacity;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:99995}.fancybox-can-zoomOut .fancybox-content{cursor:zoom-out}.fancybox-can-zoomIn .fancybox-content{cursor:zoom-in}.fancybox-can-pan .fancybox-content,.fancybox-can-swipe .fancybox-content{cursor:grab}.fancybox-is-grabbing .fancybox-content{cursor:grabbing}.fancybox-container [data-selectable=true]{cursor:text}.fancybox-image,.fancybox-spaceball{background:transparent;border:0;height:100%;left:0;margin:0;max-height:none;max-width:none;padding:0;position:absolute;top:0;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:100%}.fancybox-spaceball{z-index:1}.fancybox-slide--iframe .fancybox-content,.fancybox-slide--map .fancybox-content,.fancybox-slide--pdf .fancybox-content,.fancybox-slide--video .fancybox-content{height:100%;overflow:visible;padding:0;width:100%}.fancybox-slide--video .fancybox-content{background:#000}.fancybox-slide--map .fancybox-content{background:#e5e3df}.fancybox-slide--iframe .fancybox-content{background:#fff}.fancybox-iframe,.fancybox-video{background:transparent;border:0;display:block;height:100%;margin:0;overflow:hidden;padding:0;width:100%}.fancybox-iframe{left:0;position:absolute;top:0}.fancybox-error{background:#fff;cursor:default;max-width:400px;padding:40px;width:100%}.fancybox-error p{color:#444;font-size:16px;line-height:20px;margin:0;padding:0}.fancybox-button{background:rgba(30,30,30,.6);border:0;border-radius:0;box-shadow:none;cursor:pointer;display:inline-block;height:44px;margin:0;padding:10px;position:relative;transition:color .2s;vertical-align:top;visibility:inherit;width:44px}.fancybox-button,.fancybox-button:link,.fancybox-button:visited{color:#ccc}.fancybox-button:hover{color:#fff}.fancybox-button:focus{outline:none}.fancybox-button.fancybox-focus{outline:1px dotted}.fancybox-button[disabled],.fancybox-button[disabled]:hover{color:#888;cursor:default;outline:none}.fancybox-button div{height:100%}.fancybox-button svg{display:block;height:100%;overflow:visible;position:relative;width:100%}.fancybox-button svg path{fill:currentColor;stroke-width:0}.fancybox-button--fsenter svg:nth-child(2),.fancybox-button--fsexit svg:first-child,.fancybox-button--pause svg:first-child,.fancybox-button--play svg:nth-child(2){display:none}.fancybox-progress{background:#ff5268;height:2px;left:0;position:absolute;right:0;top:0;transform:scaleX(0);transform-origin:0;transition-property:transform;transition-timing-function:linear;z-index:99998}.fancybox-close-small{background:transparent;border:0;border-radius:0;color:#ccc;cursor:pointer;opacity:.8;padding:8px;position:absolute;right:-12px;top:-44px;z-index:401}.fancybox-close-small:hover{color:#fff;opacity:1}.fancybox-slide--html .fancybox-close-small{color:currentColor;padding:10px;right:0;top:0}.fancybox-slide--image.fancybox-is-scaling .fancybox-content{overflow:hidden}.fancybox-is-scaling .fancybox-close-small,.fancybox-is-zoomable.fancybox-can-pan .fancybox-close-small{display:none}.fancybox-navigation .fancybox-button{background-clip:content-box;height:100px;opacity:0;position:absolute;top:calc(50% - 50px);width:70px}.fancybox-navigation .fancybox-button div{padding:7px}.fancybox-navigation .fancybox-button--arrow_left{left:0;left:env(safe-area-inset-left);padding:31px 26px 31px 6px}.fancybox-navigation .fancybox-button--arrow_right{padding:31px 6px 31px 26px;right:0;right:env(safe-area-inset-right)}.fancybox-caption{background:linear-gradient(0deg,rgba(0,0,0,.85) 0,rgba(0,0,0,.3) 50%,rgba(0,0,0,.15) 65%,rgba(0,0,0,.075) 75.5%,rgba(0,0,0,.037) 82.85%,rgba(0,0,0,.019) 88%,transparent);bottom:0;color:#eee;font-size:14px;font-weight:400;left:0;line-height:1.5;padding:75px 44px 25px;pointer-events:none;right:0;text-align:center;z-index:99996}@supports (padding:max(0px)){.fancybox-caption{padding:75px max(44px,env(safe-area-inset-right)) max(25px,env(safe-area-inset-bottom)) max(44px,env(safe-area-inset-left))}}.fancybox-caption--separate{margin-top:-50px}.fancybox-caption__body{max-height:50vh;overflow:auto;pointer-events:all}.fancybox-caption a,.fancybox-caption a:link,.fancybox-caption a:visited{color:#ccc;text-decoration:none}.fancybox-caption a:hover{color:#fff;text-decoration:underline}.fancybox-loading{animation:a 1s linear infinite;background:transparent;border:4px solid #888;border-bottom-color:#fff;border-radius:50%;height:50px;left:50%;margin:-25px 0 0 -25px;opacity:.7;padding:0;position:absolute;top:50%;width:50px;z-index:99999}@keyframes a{to{transform:rotate(1turn)}}.fancybox-animated{transition-timing-function:cubic-bezier(0,0,.25,1)}.fancybox-fx-slide.fancybox-slide--previous{opacity:0;transform:translate3d(-100%,0,0)}.fancybox-fx-slide.fancybox-slide--next{opacity:0;transform:translate3d(100%,0,0)}.fancybox-fx-slide.fancybox-slide--current{opacity:1;transform:translateZ(0)}.fancybox-fx-fade.fancybox-slide--next,.fancybox-fx-fade.fancybox-slide--previous{opacity:0;transition-timing-function:cubic-bezier(.19,1,.22,1)}.fancybox-fx-fade.fancybox-slide--current{opacity:1}.fancybox-fx-zoom-in-out.fancybox-slide--previous{opacity:0;transform:scale3d(1.5,1.5,1.5)}.fancybox-fx-zoom-in-out.fancybox-slide--next{opacity:0;transform:scale3d(.5,.5,.5)}.fancybox-fx-zoom-in-out.fancybox-slide--current{opacity:1;transform:scaleX(1)}.fancybox-fx-rotate.fancybox-slide--previous{opacity:0;transform:rotate(-1turn)}.fancybox-fx-rotate.fancybox-slide--next{opacity:0;transform:rotate(1turn)}.fancybox-fx-rotate.fancybox-slide--current{opacity:1;transform:rotate(0deg)}.fancybox-fx-circular.fancybox-slide--previous{opacity:0;transform:scale3d(0,0,0) translate3d(-100%,0,0)}.fancybox-fx-circular.fancybox-slide--next{opacity:0;transform:scale3d(0,0,0) translate3d(100%,0,0)}.fancybox-fx-circular.fancybox-slide--current{opacity:1;transform:scaleX(1) translateZ(0)}.fancybox-fx-tube.fancybox-slide--previous{transform:translate3d(-100%,0,0) scale(.1) skew(-10deg)}.fancybox-fx-tube.fancybox-slide--next{transform:translate3d(100%,0,0) scale(.1) skew(10deg)}.fancybox-fx-tube.fancybox-slide--current{transform:translateZ(0) scale(1)}@media (max-height:576px){.fancybox-slide{padding-left:6px;padding-right:6px}.fancybox-slide--image{padding:6px 0}.fancybox-close-small{right:-6px}.fancybox-slide--image .fancybox-close-small{background:#4e4e4e;color:#f2f4f6;height:36px;opacity:1;padding:6px;right:0;top:0;width:36px}.fancybox-caption{padding-left:12px;padding-right:12px}@supports (padding:max(0px)){.fancybox-caption{padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}}}.fancybox-share{background:#f4f4f4;border-radius:3px;max-width:90%;padding:30px;text-align:center}.fancybox-share h1{color:#222;font-size:35px;font-weight:700;margin:0 0 20px}.fancybox-share p{margin:0;padding:0}.fancybox-share__button{border:0;border-radius:3px;display:inline-block;font-size:14px;font-weight:700;line-height:40px;margin:0 5px 10px;min-width:130px;padding:0 15px;text-decoration:none;transition:all .2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;white-space:nowrap}.fancybox-share__button:link,.fancybox-share__button:visited{color:#fff}.fancybox-share__button:hover{text-decoration:none}.fancybox-share__button--fb{background:#3b5998}.fancybox-share__button--fb:hover{background:#344e86}.fancybox-share__button--pt{background:#bd081d}.fancybox-share__button--pt:hover{background:#aa0719}.fancybox-share__button--tw{background:#1da1f2}.fancybox-share__button--tw:hover{background:#0d95e8}.fancybox-share__button svg{height:25px;margin-right:7px;position:relative;top:-1px;vertical-align:middle;width:25px}.fancybox-share__button svg path{fill:#fff}.fancybox-share__input{background:transparent;border:0;border-bottom:1px solid #d7d7d7;border-radius:0;color:#5d5b5b;font-size:14px;margin:10px 0 0;outline:none;padding:10px 15px;width:100%}.fancybox-thumbs{background:#ddd;bottom:0;display:none;margin:0;-webkit-overflow-scrolling:touch;-ms-overflow-style:-ms-autohiding-scrollbar;padding:2px 2px 4px;position:absolute;right:0;-webkit-tap-highlight-color:rgba(0,0,0,0);top:0;width:212px;z-index:99995}.fancybox-thumbs-x{overflow-x:auto;overflow-y:hidden}.fancybox-show-thumbs .fancybox-thumbs{display:block}.fancybox-show-thumbs .fancybox-inner{right:212px}.fancybox-thumbs__list{font-size:0;height:100%;list-style:none;margin:0;overflow-x:hidden;overflow-y:auto;padding:0;position:absolute;position:relative;white-space:nowrap;width:100%}.fancybox-thumbs-x .fancybox-thumbs__list{overflow:hidden}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar{width:7px}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-track{background:#fff;border-radius:10px;box-shadow:inset 0 0 6px rgba(0,0,0,.3)}.fancybox-thumbs-y .fancybox-thumbs__list::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:10px}.fancybox-thumbs__list a{-webkit-backface-visibility:hidden;backface-visibility:hidden;background-color:rgba(0,0,0,.1);background-position:50%;background-repeat:no-repeat;background-size:cover;cursor:pointer;float:left;height:75px;margin:2px;max-height:calc(100% - 8px);max-width:calc(50% - 4px);outline:none;overflow:hidden;padding:0;position:relative;-webkit-tap-highlight-color:transparent;width:100px}.fancybox-thumbs__list a:before{border:6px solid #ff5268;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:all .2s cubic-bezier(.25,.46,.45,.94);z-index:99991}.fancybox-thumbs__list a:focus:before{opacity:.5}.fancybox-thumbs__list a.fancybox-thumbs-active:before{opacity:1}@media (max-width:576px){.fancybox-thumbs{width:110px}.fancybox-show-thumbs .fancybox-inner{right:110px}.fancybox-thumbs__list a{max-width:calc(100% - 10px)}}/* roboto-mono-500 - latin */ @font-face { font-family: 'Roboto Mono'; font-style: normal; font-weight: 500; src: local('Roboto Mono Medium'), local('RobotoMono-Medium'), url('../webfonts/roboto-mono-v4-latin-500.woff2') format('woff2'); } /* ************************************************************************** typography.css **************************************************************************/ /** * base *************************/ body { font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-weight: 400; } a, a:visited { color: #2196f3; text-decoration: none; } a[href], a[data-src] { cursor: pointer; } a:hover, a:focus { color: #2196f3; text-decoration: underline; } b, strong { font-weight: 700; } cite, dfn, em { font-style: italic; } small { font-size: 0.875em; } address { display: block; } mark { background-color: #f5f5f5; color: #454545; padding-left : 0.25em; padding-right: 0.25em; } hr { border-top: 0 solid #f5f5f5; border-width: 1px 0 0 0; clear: both; margin: 1.5em 0; } /** * headings *************************/ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: #454545; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-weight: 400; } h1, .h1, h2, .h2, h3, .h3 { margin: 48px 0 24px; margin: 3rem 0 1.5rem; } h4, .h4, h5, .h5, h6, .h6 { margin: 24px 0 24px; margin: 1.5rem 0 1.5rem; } h1 small, h2 small { font-weight: normal; } h1, .h1 { font-size: 2em; /* 2em */ line-height: 1.2em; } h2, .h2 { font-size: 1.5em; /* 1.5em */ line-height: 1.2; } h3, .h3 { font-size: 1.3125em; /* 1.3125em */ line-height: 1.3; } h4, .h4 { font-size: 1.125em; /* 1.125em */ line-height: 1.25; } h5, .h5 { font-size: 1em; /* 1em */ } h6, .h6 { font-size: 0.857em; /* 0.857em */ font-weight: 400; letter-spacing: 1px; text-transform: uppercase; } /** * lists *************************/ ol, ul { padding-left: 32px; } ol li { list-style-type: decimal; } ul li { list-style-type: square; } dl { margin: 1.5rem 0; } dt { font-weight: 700; margin: 1.5rem 0 0.25rem; } dd { font-size: 0.857rem; margin: 0.25em 0 0.5em; } /** * table *************************/ table { border-collapse: collapse; border-spacing: 0; box-sizing: border-box; empty-cells: show; font-size: 0.875rem; line-height: 1.5; margin: 2rem 0; text-align: left; vertical-align: baseline; width: 100%; } table, thead, tfoot { border: 1px solid #f5f5f5; padding: 0; } thead { vertical-align: bottom; } tr { margin: 0; padding: 0; } td, th { margin: 0; padding: 0.5em 1em; } table.table-striped tbody tr:nth-child(odd) { background-color: #ffffff; } table.table-striped tbody tr:nth-child(even) { background-color: #f5f5f5; } table.stack-table { border: none; } table.stack-table thead, table.stack-table tfoot { display: none; } table.stack-table tr, table.stack-table td, table.stack-table th { display: block; } table.stack-table tbody tr { border: 1px solid #f5f5f5; margin: 0 0 1.5rem; } table.stack-table tbody td:before { content: attr(data-th); display: block; font-size: 0.75rem; font-weight: 600; } table.stack-table tbody tr:last-child { margin-bottom: 0; } /** * buttons *************************/ button, .button, .button:hover, input[type="button"], input[type="submit"], input[type="reset"] { background: #2196f3; border: none; border-radius: 0px 3px 3px 3px; color: #ffffff; cursor: pointer; display: inline-block; line-height: 1.5rem; padding-left : 0.25em; padding-right: 0.25em; text-align: center; vertical-align: baseline; } button:hover, .button:hover input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover { text-decoration: underline; } /** * forms *************************/ form button, form .button, form .button:hover, form input[type="button"], form input[type="submit"], form input[type="reset"], .form button, .form .button, .form .button:hover, .form input[type="button"], .form input[type="submit"], .form input[type="reset"] { line-height: 36px; padding-left : 12px; padding-right: 12px; vertical-align: top; } form, .form { display: block; margin : 1.5rem 0; } fieldset {} legend { display: block; font-size: 0.75rem; } form p, .form p { margin: 1rem 0; } form p.denotes-required-fields, .form p.denotes-required-fields, .google-recaptcha-privacy-and-terms-text { font-size: 0.875rem; } form label, .form label { font-size: 0.875rem; font-weight: 700; line-height: 1.5rem; } form label[for], .form label[for] { cursor: pointer; } form input[type="color"], form input[type="date"], form input[type="datetime"], form input[type="datetime-local"], form input[type="email"], form input[type="month"], form input[type="number"], form input[type="password"], form input[type="search"], form input[type="tel"], form input[type="text"], form input[type="time"], form input[type="url"], form input[type="week"], form input:not([type]), form select, form textarea, .form input[type="color"], .form input[type="date"], .form input[type="datetime"], .form input[type="datetime-local"], .form input[type="email"], .form input[type="month"], .form input[type="number"], .form input[type="password"], .form input[type="search"], .form input[type="tel"], .form input[type="text"], .form input[type="time"], .form input[type="url"], .form input[type="week"], .form input:not([type]), .form select, .form textarea { background-color: #fff; border: 1px solid #f5f5f5; border-radius: 0 3px 3px 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.15); color: #212121; display: inline-block; font-size: 1rem; padding: 0.5rem 0.75rem; vertical-align: middle; width: 100%; max-width: 394px; } form select, .form select { padding: initial; } form textarea, .form textarea { max-width: 768px; } form input[type="color"]:focus, form input[type="date"]:focus, form input[type="datetime"]:focus, form input[type="datetime-local"]:focus, form input[type="email"]:focus, form input[type="month"]:focus, form input[type="number"]:focus, form input[type="password"]:focus, form input[type="search"]:focus, form input[type="tel"]:focus, form input[type="text"]:focus, form input[type="time"]:focus, form input[type="url"]:focus, form input[type="week"]:focus, form input:not([type]):focus, form select:focus, form textarea:focus, .form input[type="color"]:focus, .form input[type="date"]:focus, .form input[type="datetime"]:focus, .form input[type="datetime-local"]:focus, .form input[type="email"]:focus, .form input[type="month"]:focus, .form input[type="number"]:focus, .form input[type="password"]:focus, .form input[type="search"]:focus, .form input[type="tel"]:focus, .form input[type="text"]:focus, .form input[type="time"]:focus, .form input[type="url"]:focus, .form input[type="week"]:focus, .form input:not([type]):focus, .form select:focus, .form textarea:focus { border-color: #2196f3; outline: 0; } form input[type="file"]:focus, form input[type="checkbox"]:focus, form input[type="radio"]:focus, .form input[type="file"]:focus, .form input[type="checkbox"]:focus, .form input[type="radio"]:focus { outline: thin solid #2196f3; outline: 1px auto #2196f3; } form input[type="color"][disabled], form input[type="date"][disabled], form input[type="datetime"][disabled], form input[type="datetime-local"][disabled], form input[type="email"][disabled], form input[type="month"][disabled], form input[type="number"][disabled], form input[type="password"][disabled], form input[type="search"][disabled], form input[type="tel"][disabled], form input[type="text"][disabled], form input[type="time"][disabled], form input[type="url"][disabled], form input[type="week"][disabled], form input:not([type])[disabled], form select[disabled], form textarea[disabled], .form input[type="color"][disabled], .form input[type="date"][disabled], .form input[type="datetime"][disabled], .form input[type="datetime-local"][disabled], .form input[type="email"][disabled], .form input[type="month"][disabled], .form input[type="number"][disabled], .form input[type="password"][disabled], .form input[type="search"][disabled], .form input[type="tel"][disabled], .form input[type="text"][disabled], .form input[type="time"][disabled], .form input[type="url"][disabled], .form input[type="week"][disabled], .form input:not([type])[disabled], .form select[disabled], .form textarea[disabled] { background-color: #eaeded; color: #cad2d3; cursor: not-allowed; } form input[readonly], form select[readonly], form textarea[readonly], .form input[readonly], .form select[readonly], .form textarea[readonly] { background-color: #eee; border-color: #ccc; color: #777; } form input:focus:invalid, form select:focus:invalid, form textarea:focus:invalid, .form input:focus:invalid, .form select:focus:invalid, .form textarea:focus:invalid { border-color: #e9322d; color: #b94a48; } form input[type="file"]:focus:invalid:focus, form input[type="checkbox"]:focus:invalid:focus, form input[type="radio"]:focus:invalid:focus, .form input[type="file"]:focus:invalid:focus, .form input[type="checkbox"]:focus:invalid:focus, .form input[type="radio"]:focus:invalid:focus { outline-color: #e9322d; } form label + input[type="color"], form label + input[type="date"], form label + input[type="datetime"], form label + input[type="datetime-local"], form label + input[type="email"], form label + input[type="month"], form label + input[type="number"], form label + input[type="password"], form label + input[type="search"], form label + input[type="tel"], form label + input[type="text"], form label + input[type="time"], form label + input[type="url"], form label + input[type="week"], form label + input:not([type]), form label + select, form label + textarea, .form label + input[type="color"], .form label + input[type="date"], .form label + input[type="datetime"], .form label + input[type="datetime-local"], .form label + input[type="email"], .form label + input[type="month"], .form label + input[type="number"], .form label + input[type="password"], .form label + input[type="search"], .form label + input[type="tel"], .form label + input[type="text"], .form label + input[type="time"], .form label + input[type="url"], .form label + input[type="week"], .form label + input:not([type]), .form label + select, .form label + textarea { display: block; } input[type="hidden"] { display: none; } select { /* Normalizes the height; padding is not sufficient. */ background-color: white; border: 1px solid #f5f5f5; color: #333333; display: block; height: 2rem; line-height: 1rem; /* -webkit-appearance: none; */ -webkit-border-radius: 0px 3px 3px 3px; } select[multiple] { height: auto; } form input[type="checkbox"], .form input[type="checkbox"], form input[type="radio"], .form input[type="radio"] { display: inline-block; font-size: 1rem; } form input[type="checkbox"] + label, .form input[type="checkbox"] + label, form input[type="radio"] + label, .form input[type="radio"] + label { cursor: pointer; } .check-list, .check-list li, .radio-list, .radio-list li { list-style: none; margin : 0; padding: 0; } /** * images *************************/ img { display: block; height: auto; max-width: 100%; overflow: hidden; position: relative; text-align: center; transform: translate3d(0,0,0); vertical-align: middle; white-space: nowrap; } /** * haiku *************************/ .haiku { line-height: 2em; margin: 1.25rem 0; } .haiku span { background-color: #454545; box-shadow: 0.5em 0 0 #454545, -0.5em 0 0 #454545; color: #ffffff; line-height: 1em; padding: 0.25em 0; } .haiku .attribution { background-color: transparent; box-shadow: none; color: #454545; display: block; font-size: 0.875rem; line-height: 2rem; } /* ************************************************************************** layout_main.css **************************************************************************/ /** * Document Body *************************/ html { height: 100%; } body { min-height: 100%; } html, #background { background-color: #ffffff; color: #454545; } #background__layers { display: none; } /**** IE hack ****/ .page__wrapper { display: flex; flex-direction: row; } /**** IE hack ****/ .page__body { background-color: transparent; display: flex; flex-direction: column; height: auto; margin: 0 auto; min-height: 100vh; overflow: auto; overflow-x: hidden; padding: 0; width: 100%; } .page__body > * { margin: 0 auto; overflow: hidden; width: 100%; } .page__body > nav { overflow: visible; } header, nav, footer { flex: none; } main { flex: 1 0 auto; } .content { margin: 0 auto; padding:0; position: relative; width: 100%; max-width: 100%; } .page__body > header { order: 2 ; } .page__body > main { order: 3 ; } .page__body > footer { order: 4 ; } .page__body > nav { order: 2 ; } .page__body > .page__pallet__top { order: 1 ; } /* fix for old Android browsers */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } .page__wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .page__body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } header, nav, footer { -webkit-box-flex: 0; -webkit-flex: none; -ms-flex: none; flex: none; } main { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; } .page__body > header { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ; } .page__body > main { -webkit-box-ordinal-group: 4; -webkit-order: 3 ; -ms-flex-order: 3 ; order: 3 ; } .page__body > footer { -webkit-box-ordinal-group: 5; -webkit-order: 4 ; -ms-flex-order: 4 ; order: 4 ; } .page__body > nav { -webkit-box-ordinal-group: 3; -webkit-order: 2 ; -ms-flex-order: 2 ; order: 2 ; } .page__body > .page__pallet__top { -webkit-box-ordinal-group: 2; -webkit-order: 1 ; -ms-flex-order: 1 ; order: 1 ; } main, main > .content { display: flex; } .main__column { background-color: transparent; flex: 1 1 auto; } main, main > .content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } .main__column { min-width: 0; -webkit-box-flex: 1; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; } /** * Columns, Desktop Display *************************/ input[type="checkbox"].page__toggle { position: fixed; top: -9999px; left: -9999px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .page__pallet { background-color: transparent; color: #454545; flex-basis: auto; flex-grow: 1; margin: 0px 0; width: 240px; min-width: 240px; max-width: 240px; } body[data-layout~="0col"] .main__column { order: 1 ;} body[data-layout~="0col"] .page__pallet[data-position="T1"] { display: none ;} body[data-layout~="0col"] .page__pallet[data-position="T2"] { display: none ;} body[data-layout~="1col"] .main__column { order: 1 ;} body[data-layout~="1col"] .page__pallet[data-position="T1"] { display: none ;} body[data-layout~="1col"] .page__pallet[data-position="T2"] { display: none ;} body[data-layout~="2col"] .main__column { order: 1 ;} body[data-layout~="2col"] .page__pallet[data-position="T1"] { order: 2 ;} body[data-layout~="2col"] .page__pallet[data-position="T2"] { display: none ;} body[data-layout~="2col"][data-layout~="left"] .main__column { order: 2 ;} body[data-layout~="2col"][data-layout~="left"] .page__pallet[data-position="T1"] { order: 1 ;} body[data-layout~="2col"][data-layout~="left"] .page__pallet[data-position="T2"] { display: none ;} body[data-layout~="3col"] .main__column { order: 1 ;} body[data-layout~="3col"] .page__pallet[data-position="T1"] { order: 2 ;} body[data-layout~="3col"] .page__pallet[data-position="T2"] { order: 3 ;} body[data-layout~="3col"][data-layout~="left"] .main__column { order: 3 ;} body[data-layout~="3col"][data-layout~="left"] .page__pallet[data-position="T1"] { order: 1 ;} body[data-layout~="3col"][data-layout~="left"] .page__pallet[data-position="T2"] { order: 2 ;} body[data-layout~="3col"][data-layout~="split"] .main__column { order: 2 ;} body[data-layout~="3col"][data-layout~="split"] .page__pallet[data-position="T1"] { order: 1 ;} body[data-layout~="3col"][data-layout~="split"] .page__pallet[data-position="T2"] { order: 3 ;} .page__overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; } /** * content_width *************************/ .content_width { width: 100%; max-width: 920px; } /** * z-index * set z-index values explicitly to prevent flex-ordering, * to preserve document order *************************/ .page__body > header { z-index: 1 ;} .page__body > main { z-index: 2 ;} .page__body > footer { z-index: 3 ;} .page__body > nav { z-index: 4 ;} .page__body > .page__pallet__top { z-index: 5 ;} .main__column { z-index: 1 ;} .page__pallet[data-position="T1"] { z-index: 2 ;} .page__pallet[data-position="T2"] { z-index: 2 ;} @media screen and ( max-width: 992px ) { .page__body > header { z-index: auto ;} .page__body > main { z-index: auto ;} .page__body > footer { z-index: auto ;} .page__body > nav { z-index: auto ;} .page__body > .page__pallet__top { z-index: 1 ;} .main__column { z-index: auto ;} .page__pallet[data-position="T1"] { z-index: auto ;} .page__pallet[data-position="T2"] { z-index: auto ;} } /** * Document Body Modifications *************************/ .page__body { padding-top: 49px; } @media screen and ( max-width: 992px ) { .page__body { padding-top: 49px; } } /* ************************************************************************** layout_sec_drawer.css **************************************************************************/ @media screen and ( max-width: 992px ) { html.block-scroll body { overflow: hidden; } .page__toggle__buttons, .page__overlay { z-index: 3; } /* fix iOS Safari z-index scrolling bug */ .spinal__column { -webkit-overflow-scrolling: touch; } .page__pallet { -webkit-overflow-scrolling: auto; } .page__toggle:checked ~ .spinal__column, .page__toggle:checked ~ .page__body .spinal__column { -webkit-overflow-scrolling: auto; } #page__toggle__T1:checked ~ .page__body .page__pallet[data-position="T1"], #page__toggle__T2:checked ~ .page__body .page__pallet[data-position="T2"] { -webkit-overflow-scrolling: touch; } /* end z-index fix */ /* Animations */ .page__animation .spinal__column { transition-duration: 300ms; transition-property: transform; transition-timing-function: ease-out; } .page__animation .page__pallet { transition-duration: 300ms; transition-property: all; transition-timing-function: ease-out; } .page__animation .page__overlay { transition-delay: 200ms; transition-duration: 300ms; transition-property: opacity; transition-timing-function: ease-in-out; } /* Overlays */ .page__body .page__overlay { background-color: rgba( 0, 0, 0, 0.65 ); background-color: rgba(0,0,0,0.65); display: block; margin: 0; opacity: 0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 0; height: 100%; } #page__toggle__T1:checked ~ .page__body .page__overlay[data-overlay="T1"], #page__toggle__T2:checked ~ .page__body .page__overlay[data-overlay="T2"] { opacity: 1; width: 100%; height: 100%; -webkit-transform: translate3d(0%, 0%, 0); transform: translate3d(0%, 0%, 0); } /* pallets */ .page__pallet { min-width: 0; max-width: none; overflow-y: auto; position: fixed; top: 0; left: auto; right: 0; visibility: hidden; width: 85%; height: 100%; } body[data-layout~="left"] .page__pallet[data-position="T1"], body[data-layout~="3col"] .page__pallet[data-position="T1"]{ left: 0; right: auto; } #page__toggle__T1:checked ~ .page__body .page__pallet[data-position="T1"], #page__toggle__T2:checked ~ .page__body .page__pallet[data-position="T2"]{ visibility: visible; } body[data-layout~="1col"] .page__pallet[data-position="T1"] { display: block; order: 2; } /* Transforms */ .spinal__column, #page__toggle__T1:checked ~ .page__body .page__pallet[data-position="T1"], #page__toggle__T2:checked ~ .page__body .page__pallet[data-position="T2"] { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } body[data-layout~="1col"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="1col"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="2col"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="3col"] #page__toggle__T2:checked ~ .spinal__column, body[data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column { -webkit-transform: translate3d(-85%, 0%, 0); transform: translate3d(-85%, 0%, 0); } body[data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="3col"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column { -webkit-transform: translate3d(85%, 0%, 0); transform: translate3d(85%, 0%, 0); } body[data-layout~="1col"] .page__pallet[data-position="T1"], body[data-layout~="2col"] .page__pallet[data-position="T1"], body[data-layout~="3col"] .page__pallet[data-position="T2"] { -webkit-transform: translate3d(100%, 0%, 0); transform: translate3d(100%, 0%, 0); } body[data-layout~="1col"][data-layout~="left"] .page__pallet[data-position="T1"], body[data-layout~="2col"][data-layout~="left"] .page__pallet[data-position="T1"], body[data-layout~="3col"] .page__pallet[data-position="T1"] { -webkit-transform: translate3d(-100%, 0%, 0); transform: translate3d(-100%, 0%, 0); } } /* @media */ @media screen and ( min-width: 282px ) and ( max-width: 992px ) { .page__pallet[data-position="T1"], .page__pallet[data-position="T2"]{ width: 240px; } body[data-layout~="1col"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="1col"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="2col"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="2col"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="3col"] #page__toggle__T2:checked ~ .spinal__column, body[data-layout~="3col"] #page__toggle__T2:checked ~ .page__body .spinal__column { -webkit-transform: translate3d(-240px, 0%, 0); transform: translate3d(-240px, 0%, 0); } body[data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="1col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="2col"][data-layout~="left"] #page__toggle__T1:checked ~ .page__body .spinal__column, body[data-layout~="3col"] #page__toggle__T1:checked ~ .spinal__column, body[data-layout~="3col"] #page__toggle__T1:checked ~ .page__body .spinal__column { -webkit-transform: translate3d(240px, 0%, 0); transform: translate3d(240px, 0%, 0); } } /* @media */ /** * fixes *************************/ /* fix for old Android browsers */ body { -webkit-animation: bugfix infinite 1s; } @-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} } /* * fix for Internet Explorer, flex-items not wrapping, overflowing their container on the x-axis; * honestly, I don't know why this works. */ .page__column { -ms-flex: 1; } /* ************************************************************************** background.css **************************************************************************/ #background__layers { display: block; margin: 0; padding:0; position: fixed; top: 0; bottom: 0; left: 0; right: 0; width: 100%; height: 100%; z-index: -1; } svg { height: 100%; width: 100%; } #background__layers > li { list-style: none; margin: 0; padding:0; position: absolute; top: 0; left: 0; width: 100%; height: 100% !important; } /* ************************************************************************** masthead-primary.css **************************************************************************/ /** * masthead (primary) *************************/ .masthead-primary { background-color: transparent; border-color: #f5f5f5; border-style: solid; border-width: 0px 0 0px; color: #ffffff; display: block; padding: 72px 0 72px; position: relative; } .masthead-primary::before { background-image: url('/backlight/designer/page/image/10?v=37'); background-position: center center; background-repeat: no-repeat; background-size: cover; content: ""; display: block; overflow: hidden; position: absolute; top: 0; width: 100%; height: 100%; } .masthead-primary > .content { padding: 0 24px; text-align: left; } .masthead-primary a, .masthead-primary h1 { color: #ffffff; text-decoration: none; } .masthead-primary h1 { background-color: transparent; border-color: #000000; border-style: solid; border-width: 0px; display: inline-block; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 1.5rem; font-weight: 400; line-height: 1; margin: 0; padding: 0px 0px; text-shadow: 0 1px 3px rgba(0,0,0,0.5); text-transform: none; } .masthead-primary h1 > span { margin: 0; } .masthead-primary .site__tagline { font-size: 1rem; margin-top:12px; text-transform: none; } .masthead-primary img { display: inline-block; } @media screen and ( max-width: 992px ) { .masthead-primary { display: block; } .masthead-primary > .content { padding: 0 12px; } } /* ************************************************************************** masthead-secondary.css **************************************************************************/ /** * masthead (secondary) *************************/ .masthead-secondary { background-color: transparent; border-color: #f5f5f5; border-style: solid; border-width: 0px 0 0px; color: #454545; display: block; padding: 24px 0 24px; position: relative; } .masthead-secondary::before { background-image: none; background-position: center center; background-repeat: no-repeat; background-size: auto; content: ""; display: block; overflow: hidden; position: absolute; top: 0; width: 100%; height: 100%; } .masthead-secondary > .content { padding: 0 48px; text-align: left; } .masthead-secondary a, .masthead-secondary h1 { color: #454545; text-decoration: none; } .masthead-secondary h1 { background-color: transparent; border-color: #000000; border-style: solid; border-width: 0px; display: inline-block; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 1.5rem; font-weight: 400; line-height: 1; margin: 0; padding: 0px 0px; text-shadow: none; text-transform: none; } .masthead-secondary h1 > span { margin: 0; } .masthead-secondary .site__tagline { font-size: 1rem; margin-top:12px; text-transform: none; } .masthead-secondary img { display: inline-block; } @media screen and ( max-width: 992px ) { .masthead-secondary { display: block; } .masthead-primary > .content { padding: 0 12px; } } /* ************************************************************************** navigation.css **************************************************************************/ /** * menu reset *************************/ nav.nav ul { font-size: 0; line-height: 1; margin: 0; padding: 0; } nav.nav ul, nav.nav li { border: 0px solid transparent; } nav.nav li { box-sizing: border-box; list-style: none; } nav.nav_h li { display: inline-block; } nav.nav_h li li, nav.nav_v li { display: block; } nav.nav .menu-item, nav.nav .menu-item a, nav.nav .menu-item span { background-color: transparent; border-radius: 0; color: #212121; font-size: 0.875rem; letter-spacing: 0.025em; line-height: 36px; margin: 0; opacity: 0.999999; outline: none; position: relative; text-align: left; text-decoration: none; } nav.nav .menu-item a, nav.nav .menu-item span { display: block; max-width: 100%; overflow: hidden; padding: 0 12px; text-overflow: ellipsis; vertical-align: middle; white-space: nowrap; } nav .menu-item a.hidden, nav .menu-item span.hidden, nav .menu-item a.locked, nav .menu-item a.before-publication, nav .menu-item span.locked { display: block !important; } nav .menu-item a.hidden::before, nav .menu-item span.hidden::before { content: "\f070"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.25em; } nav .menu-item a.locked::before, nav .menu-item span.locked::before { content: "\f023"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.25em; } nav .menu-item a.before-publication::before, nav .menu-item span.before-publication::before { content: "\f017"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 0.25em; } /** * fonts *************************/ nav.nav .menu-item, nav.nav .menu-item a, nav.nav .menu-item span { font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 0.875rem; font-weight: 400; } nav.nav_v .menu-item, nav.nav_v .menu-item a, nav.nav_v .menu-item span { font-size: 0.875rem; font-weight: 400; } /** * colors *************************/ nav.nav_h, .pallet_top_nav { background-color: rgb(69, 69, 69); border-color: rgb(33, 33, 33); } .pallet_top_nav, .pallet_top_nav nav.nav_h { border: none; } nav.nav .menu-item, nav.nav .menu-item a, nav.nav .menu-item span { color: #ffffff; } nav.nav .menu-item:hover, nav.nav .menu-item:hover a, nav.nav .menu-item:hover span, nav.nav .touchable .menu-item.hover, nav.nav .touchable .menu-item.hover a, nav.nav .touchable .menu-item.hover span { color: #ffffff; } nav.nav .menu-item ul, nav.nav .menu-item:hover, nav.nav .menu-item:hover ul, nav.nav .touchable .menu-item.hover, nav.nav .touchable .menu-item.hover ul { background-color: #2196f3; } nav.nav li .menu-item:hover > a, nav.nav li .menu-item:hover > span, nav.nav li .menu-item.hover > a, nav.nav li .menu-item.hover > span { background-color: rgba(255,255,255,0.25); } nav.nav ul ul, nav.nav ul ul li { border-color: rgb(33, 33, 33); } nav.nav_v { background-color: transparent; } nav.nav_v, nav.nav_v .menu > .menu-item, nav.nav_v .menu > .menu-item a { border-color: #f5f5f5; } nav.nav_v .menu-item, nav.nav_v .menu-item a, nav.nav_v .menu-item span { color: #2196f3; } nav.nav_v .menu-item:hover, nav.nav_v .menu-item:hover a, nav.nav_v .menu-item:hover span, nav.nav_v .touchable .menu-item.hover, nav.nav_v .touchable .menu-item.hover a, nav.nav_v .touchable .menu-item.hover span { color: #ffffff; } nav.nav_v .menu-item ul, nav.nav_v .menu-item:hover, nav.nav_v .menu-item:hover ul, nav.nav_v .touchable .menu-item.hover, nav.nav_v .touchable .menu-item.hover ul { background-color: #2196f3; } nav.nav_v li .menu-item:hover > a, nav.nav_v li .menu-item:hover > span, nav.nav_v li .menu-item.hover > a, nav.nav_v li .menu-item.hover > span { background-color: rgba(255,255,255,0.25); } nav.nav_v ul ul, nav.nav_v ul ul li { border-color: rgba(255,255,255,0.15); } /** * Font Awesome *************************/ nav.nav .menu-item.menu-item-has-children > a, nav.nav .menu-item.menu-item-has-children > span { padding-right: 24px; } nav.nav .menu-item.menu-item-has-children > a::after, nav.nav .menu-item.menu-item-has-children > span::after { content: '\f105'; display: block; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 36px; opacity: 0.75; position: absolute; top: 0; right: 0; text-align: center; width: 24px; } nav.nav_h .menu > .menu-item.menu-item-has-children > a::after, nav.nav_h .menu > .menu-item.menu-item-has-children > span::after { content: '\f107'; font-family: "Font Awesome 5 Free"; font-weight: 900; } nav.nav .touchable .menu-item.menu-item-has-children.hover > a::after, nav.nav .touchable .menu-item.menu-item-has-children.hover > span::after { content: '\f0c1'; font-family: "Font Awesome 5 Free"; font-weight: 900; } nav.nav_v .menu-item.menu-item-has-children > a::after, nav.nav_v .menu-item.menu-item-has-children > span::after { top: 6px; } /** * nav_h *************************/ nav.nav_h { border-style: solid; border-width: 1px 0 1px; padding: 6px 0 6px; } .pallet_top_nav nav.nav_h { border: none; } nav.nav_h > .content { padding: 0 12px; } nav.nav_h > .content > ul { text-align: center; } .page__pallet__top > .content > ul > .pallet_top_nav { border-radius: 3px; border-top-left-radius: 0; float: none; padding: 0 12px; } /** * nav_v *************************/ nav.nav_v { border-style: solid; border-width: 0px 0px 0px 0px; margin: 24px 0 48px; } nav.nav_v .menu > .menu-item { border-width: 0 0 1px; } nav.nav_v .menu > .menu-item:last-child { border-bottom-width: 0; } nav.nav_v .menu-item a, nav.nav_v .menu-item span { padding: 6px 12px; text-align: left; } /** * submenus *************************/ /* create a new stacking context */ nav.nav li.menu-item-has-children:hover, nav.nav li.menu-item-has-children.hover { z-index: 1; } nav.nav ul ul { box-shadow: 0 2px 2px 1px rgba( 0, 0, 0, 0.15 ); position: absolute; top: -9999px; left: 0px; text-align: left; visibility: hidden; width: 240px; } .mouseable li:hover > ul, .touchable li.hover > ul { top: 36px; visibility: visible; } .mouseable li li:hover > ul, .touchable li li.hover > ul { top: -1px; left: 100%; } .mouseable li > ul.position-right, .touchable li > ul.position-right { left: auto; right: 0px; } .mouseable li li > ul.position-right, .touchable li li > ul.position-right { left: auto; right: 100%; } nav.nav ul ul { border-width: 1px 1px 0; } nav.nav ul ul li { border-width: 0 0 1px; } nav.nav ul ul { opacity: 0; transition: visibility 0s linear 0.2s, right 0s linear 0.2s, left 0s linear 0.2s, top 0s linear 0.2s, opacity 0.2s ease-in-out; } nav.nav ul li:hover > ul, nav.nav ul li.hover > ul { opacity: 1; transition: right 0s linear 0s, left 0s linear 0s, top 0s linear 0s, opacity 0.2s ease-in-out; } /** * submenus, nav_v *************************/ .nav_v .mouseable li:hover > ul, .nav_v .touchable li.hover > ul { top: -1px; left: 100%; } .nav_v .mouseable li:hover > ul.position-right, .nav_v .touchable li.hover > ul.position-right { left: auto; right: 100%; } /** * flatten submenus, nav_v *************************/ nav.nav_v li.menu-item-has-children:hover, nav.nav_v li.menu-item-has-children.hover { z-index: auto; } nav.nav_v ul ul { border: none; box-shadow: none; opacity: 1; position: static; visibility: visible; width: auto; } nav.nav_v .menu-item:hover, nav.nav_v .menu-item:hover a, nav.nav_v .menu-item:hover span, nav.nav_v .touchable .menu-item.hover, nav.nav_v .touchable .menu-item.hover a, nav.nav_v .touchable .menu-item.hover span { color: #2196f3; } nav.nav_v .menu-item ul, nav.nav_v .menu-item:hover, nav.nav_v .menu-item:hover ul, nav.nav_v .touchable .menu-item.hover, nav.nav_v .touchable .menu-item.hover ul, nav.nav_v .menu-item:hover > a, nav.nav_v .menu-item:hover > span, nav.nav_v .menu-item.hover > a, nav.nav_v .menu-item.hover > span { background-color: transparent; } nav.nav_v .menu-item a:hover, nav.nav_v .menu-item span:hover, nav.nav_v .menu-item li a:hover, nav.nav_v .menu-item li span:hover { background: linear-gradient( rgba(255,255,255,0.25), rgba(255,255,255,0.25) ), #2196f3; color: #ffffff; } nav.nav_v ul .menu-item { border: none; } nav.nav_v ul .menu-item a { border-style: solid; border-width: 0 0 1px; } nav.nav_v .menu > .menu-item:last-child a { border-bottom-width: 0; } /** indicators when flat */ nav.nav_v .menu-item > a::after, nav.nav_v .menu-item > span::after, nav.nav_v .menu-item.menu-item-has-children > a::after, nav.nav_v .menu-item.menu-item-has-children > span::after { display: block; line-height: 36px; opacity: 0.5; padding-top : 6px; padding-bottom: 6px; position: absolute; top: 0; text-align: center; width: 24px; } nav.nav_v li.menu-item.menu-item-has-children > a, nav.nav_v li.menu-item.menu-item-has-children > span { padding-right: 0px; } nav.nav_v li.menu-item.menu-item-has-children > a::after, nav.nav_v li.menu-item.menu-item-has-children > span::after { content: '\f107'; font-family: "Font Awesome 5 Free"; font-weight: 900; } nav.nav_v .menu-item li a, nav.nav_v .menu-item li span { padding-left : 24px; } nav.nav_v .menu-item li a::after, nav.nav_v .menu-item li span::after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; left: 0; } /** * responsive display *************************/ nav.nav_v { display: none; } @media screen and ( max-width: 992px ) { nav.nav_h, .page__pallet__wide > .content > ul > li.pallet_top_nav { display: none; } nav.nav_v { display: block; } } /** * underlines *************************/ /* ************************************************************************** pallet_top_bottom.css **************************************************************************/ /** * page__pallet__top *************************/ .page__pallet__top { background-color: rgb(69, 69, 69); border: 0 solid rgb(33, 33, 33); border-width: 0px 0 1px; height: auto; margin: 0; overflow: visible; padding: 0; position: fixed; top: 0; left: 0; z-index: 2; } .page__pallet__top > .content { background-color: transparent; border: 0 solid rgb(33, 33, 33); max-width: none; padding-left : 6px; padding-right: 6px; } .page__pallet__top > .content, .page__pallet__top > .content > ul { height: 48px; overflow: visible; } .page__pallet__top.is-fixed { background-color: rgb(69, 69, 69); border-width: 0px 0 1px; } .page__pallet__top.is-fixed > .content { background-color: transparent; border-width: 0; height: 48px; } @media screen and ( max-width: 992px ) { .page__pallet__top, .page__pallet__top.is-fixed { background-color: rgb(69, 69, 69); border-width: 0px 0 1px; height: auto; } .page__pallet__top > .content, .page__pallet__top > .content > ul, .page__pallet__top.is-fixed > .content { height: 48px; } .page__pallet__top > .content { background-color: transparent; border: none; padding: 0 54px 0 0; } body[data-layout~="left"] .page__pallet__top > .content { padding: 0 6px 0 54px; } body[data-layout~="3col"] .page__pallet__top > .content { padding: 0 54px; } } @media screen and ( max-width: 640px ) { .page__pallet__top > .content { padding: 0 48px 0 0; } body[data-layout~="left"] .page__pallet__top > .content { padding: 0 0 0 48px; } body[data-layout~="3col"] .page__pallet__top > .content { padding: 0 48px; } } /** * top pallet widgets *************************/ .page__pallet__top > .content > ul { font-size: 0; margin : 0; padding: 0; position: relative; text-align: right; } .page__pallet__top > .content > ul > li, .page__pallet__top > .content > ul > li#widget-container > ul > li { display: inline-block; font-family: 'Arial', sans-serif; font-size: 0.875rem; height: 36px; line-height: 36px; list-style: none; margin: 6px; min-width: 36px; padding:0; text-align: center; vertical-align: top; } #widget-container { display: inline-block; float: none; height: 100%; list-style: none; margin: 0; min-width: 0; vertical-align: top; } #widget-container > ul { font-size: 0; margin: 0; padding:0; position: relative; } #widget-container li { list-style: none; } #widget-container #widget-buoy { margin: 6px 0; min-width: 0; width: 0; } .page__pallet__top > .content li.stacked-widget { background-color: rgba(0, 0, 0, 0.4); color: rgb(255, 255, 255); } .page__pallet__top > .content li.stacked-widget a { color: rgb(255, 255, 255); } .page__pallet__top > .content li.stacked-widget::before, .page__pallet__top > .content li.stacked-widget a::before { display: block; font-size: 0.875rem; line-height: 22px; } .page__pallet__top > .content li.stacked-widget .widget-count { display: block; font-family: Arial, sans-serif; font-size: 0.625rem; font-weight: bold; line-height: 14px; } .page__pallet__top button, .page__pallet__top .button, .page__pallet__top .button:hover { background-color: rgba(0, 0, 0, 0.4); color: rgb(255, 255, 255); } .page__pallet__top li > button, .page__pallet__top li > .button, .page__pallet__top li > .button:hover { display: block; height: 36px; line-height: 36px; } #language-selector { float: left; } #language-selector form { margin: 0; } form#language_selector select { font-size: 0.75rem; height: 36px; line-height: 36px; padding: 0; vertical-align: top; } /** * top pallet identity *************************/ .page__pallet__top > .content li.masthead_pallet_top { background: transparent; display: inline-block; float: left; vertical-align: none; } .page__pallet__top > .content li.masthead_pallet_top h1, .page__pallet__top > .content li.masthead_pallet_top h1 a { color: #ffffff; cursor: pointer; display: block; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 24px; font-weight: 400; height: 100%; line-height: 36px; margin: 0; padding:0; text-decoration: none; text-transform: none; white-space: nowrap; } @media screen and ( max-width: 640px ) { .page__pallet__top > .content li.masthead_pallet_top h1, .page__pallet__top > .content li.masthead_pallet_top h1 a { font-size: 0.875rem; } } @media screen and ( max-width: 992px ) { .page__pallet__top > .content > ul > li.masthead_pallet_top { display: inline-block; padding-left: 6px; } body[data-layout~="left"] .page__pallet__top > .content > ul > li.masthead_pallet_top, body[data-layout~="3col"] .page__pallet__top > .content > ul > li.masthead_pallet_top { padding-left: 0; } } /** * search *************************/ #search { display: none; } .fb-search .fancybox-bg { opacity: 0.1; } .fb-search #search { background-color: rgba(255,255,255,0.98); border-radius: 0; margin: 0 auto; max-width: none; position: relative; width: 100%; min-height: 100%; } .fb-search #search form { box-sizing: border-box; display: block; margin: 48px auto; padding: 0 12px; text-align: center; width: 100%; } .fb-search #search input[type=text] { box-sizing: border-box; margin: 0 auto; width: 100%; max-width: 768px; } .fb-search #search button[type=submit] { border-radius: 50%; display: block; font-family: 'Arial', sans-serif; margin: 1.5rem auto; width: 48px; height: 48px; } .fb-search #search button[type=submit] span { display: none; } .fb-search #search button[type=submit]::after { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; } /** * toolboxes *************************/ .tb { cursor: pointer; font-size: 1rem; line-height: 36px; position: relative; text-align: center; } .tb::after { content: ""; border-color: transparent transparent #ffffff transparent; border-style: solid; border-width: 6px; margin-left: -6px; position: absolute; left: 50%; width: 0; height: 0; } .tb > ul { background-color: #ffffff; border-radius: 3px; box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.5 ); box-sizing: content-box; color: #454545; cursor: auto; font-size: 0; height: auto; margin-top: 12px; padding: 3px; position: absolute; left: 50%; text-align: center; -webkit-transform: translate(-50%,0); -ms-transform: translate(-50%,0); transform: translate(-50%,0); width: 210px; height: auto; } .tb::after, .tb > ul { top: -9999px; opacity: 0; transition: 0s top linear 0.2s, 0.2s opacity linear 0s; } .tb.hover::after, .tb.hover > ul { top: 33px; opacity: 1; transition: 0s top linear 0.0s, 0.2s opacity linear 0s; } .tb li { box-sizing: border-box; display: block; float: left; font-size: 0.875rem; list-style: none; margin : 0; padding: 3px; text-align: center; white-space: nowrap; width: auto; min-width: 42px; max-width: 100%; } .tb li a, .tb li a:hover, .tb li button, .tb li button:hover { cursor: pointer; display: block; line-height: 36px; text-decoration: none; width: 100%; height: 100%; } /** * cart button *************************/ #widget-container #cart-widget { display: none; position: relative; } #cart-widget::before { content: "\f07a"; font-family: "Font Awesome 5 Free"; font-weight: 900; } #cart-widget > ul { max-width: 126px; } #cart-widget > ul li { width: 100%; } /** * fotomoto button *************************/ #fotomoto_view_cart_float { display: none; } #fotomoto-widget::before { content: "\f291"; font-family: "Font Awesome 5 Free"; font-weight: 900; } /** * social media links *************************/ #social_media::before { content: "\f234"; font-family: "Font Awesome 5 Free"; font-weight: 900; line-height: 36px; } #social_media > ul { max-width: 0px; } .page__pallet__top li > .social_media.button, .page__pallet__top li > .social_media.button:hover { background-color: rgba(0, 0, 0, 0.4); color: rgb(255, 255, 255); } /** * page__pallet__bottom *************************/ .page__pallet__bottom { background-color: rgb(69, 69, 69); border: 0 solid rgb(33, 33, 33); border-width: 1px 0 0px; box-sizing: content-box; height: 48px; margin: 0; overflow: visible; padding: 0; } .page__pallet__bottom > .content { box-sizing: border-box; max-width: none; padding-left: 6px; padding-right:6px; text-align: right; } .page__pallet__bottom > .content ul { font-size: 0; height: 48px; margin: 0; padding:0; } .page__pallet__bottom > .content ul > li { color: #ffffff; display: inline-block; height: 36px; line-height: 36px; list-style: none; margin: 6px; min-width: 36px; padding:0; text-align: center; vertical-align: top; } .copyright { font-size: 0.75rem; } @media screen and ( max-width: 992px ) { .page__pallet__bottom > .content { padding-left : 6px; padding-right: 6px; } } @media screen and ( max-width: 640px ) { .page__pallet__bottom, .page__pallet__bottom > .content ul { height: auto; min-height: 48px; } .page__pallet__bottom > .content { text-align: left; } .page__pallet__bottom > .content { padding-bottom: 48px; } .page__pallet__bottom .logomark { position: absolute; bottom: 0; left: 0; } } /** * autoRefresh *************************/ #autoRefresh { float: right; font-size: 14px; } #autoRefresh a { color: #ffffff; } /** * page__toggle__buttons *************************/ .page__toggle__buttons { display: none; height: 0; margin-top: 0px; overflow: visible; position: fixed; top: 0; left: 0; width: 100%; } @media screen and ( max-width: 992px ) { .page__toggle__buttons{ display: block; margin-top: 0px; } } .page__toggle__buttons label { cursor: pointer; display: block; position: absolute; top: 0; right: 0; min-width: 48px; height: 48px; } body[data-layout~="left"] label[for="page__toggle__T1"], body[data-layout~="3col"] label[for="page__toggle__T1"] { left: 0; right: auto; } .page__toggle__buttons ul { height: 48px; margin: 0; padding:0; position: relative; } .page__toggle__buttons li { background-color: rgba(0, 0, 0, 0.4); border-radius: 3px; border-top-left-radius: 0; color: rgb(255, 255, 255); display: block; font-size: 0.875rem; height: 36px; line-height: 36px; list-style: none; margin: 0 12px; min-width: 36px; padding:0; position: relative; top: 6px; text-align: center; } @media screen and ( max-width: 640px ) { .page__toggle__buttons li { margin: 0 6px; } } .page__toggle__buttons li li { /* reset list children */ border-radius: 0; display: block; margin: 0; min-width: 0; } .page__toggle__buttons li.fa_pseudo::before, .page__toggle__buttons li.fa_pseudo::before { line-height: 1; margin-top: -0.5em; opacity: 1; position: absolute; top: 50%; left: 0; text-align: center; width: 36px; } ul.palletToggle { margin: 0 auto; opacity:1; padding:0; position: relative; top: 10px; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; width: 22px; height: 16px; } ul.palletToggle li { background-color: rgb(255, 255, 255); border-radius: 3px; display: block; height: 2px; margin: 0; opacity: 1; position: absolute; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .2s ease-in-out; -moz-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; width: 100%; } ul.palletToggle li:nth-child(1) { top: 0px; } ul.palletToggle li:nth-child(2), ul.palletToggle li:nth-child(3) { top: 7px; } ul.palletToggle li:nth-child(4) { top: 14px; } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] li.fa_pseudo::before, #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] li.fa_pseudo::before { opacity: 0; } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] ul.palletToggle, #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] ul.palletToggle { opacity: 1; } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] ul.palletToggle li, #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] ul.palletToggle li { background-color: rgb(255, 255, 255); } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] ul.palletToggle li:nth-child(1), #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] ul.palletToggle li:nth-child(1) { left: 50%; top: 8px; width: 0%; } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] ul.palletToggle li:nth-child(2), #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] ul.palletToggle li:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] ul.palletToggle li:nth-child(3), #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] ul.palletToggle li:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } #page__toggle__T1:checked ~ .page__toggle__buttons label[for="page__toggle__T1"] ul.palletToggle li:nth-child(4), #page__toggle__T2:checked ~ .page__toggle__buttons label[for="page__toggle__T2"] ul.palletToggle li:nth-child(4) { left: 50%; top: 8px; width: 0%; } /* ************************************************************************** content.css **************************************************************************/ /** * main, the__copy layout *************************/ main > .content {} .page__column { /** establishes isolated stacking context within each column */ transform: translate3d(0,0,0); } .main__column { position: relative; } .main__column > .content { padding: 0 24px 72px; position: static; } @media screen and ( max-width: 992px ) { .main__column > .content { padding: 0 24px 72px; } } @media screen and ( max-width: 400px ) { .main__column > .content { padding-right: 12px; padding-left: 12px; } } .the__copy { margin: 36px auto 0; } .the__copy > .content { background-color: transparent; border-radius: 0px; box-shadow: none; padding: 0px 0px; width: 100%; max-width: none; } .the__copy > .content > *:first-child { margin-top: 0; } .the__copy > .content > *:last-child { margin-bottom: 0; } .the__copy.is__empty { display: none; } .the__copy .edge-to-edge { margin-right: -0px; margin-left: -0px; padding-right: 0px; padding-left: 0px; overflow: hidden; } @media screen and ( max-width: 992px ) { .the__copy > .content { /* padding-left: 0px; padding-right: 0px; */ padding-left: 0; padding-right: 0; } .the__copy .edge-to-edge { margin-right: -0px; margin-left: -0px; padding-right: 0px; padding-left: 0px; } } /** * main, the__copy typography *************************/ .the__copy { font-size: 1rem; line-height: 1.5em; } .the__copy p, .the__copy address { margin: 1.5em 0; } .the__copy .entry-content > ol, .the__copy .entry-content > ul { margin: 1.5em 0; } .page__column li { /* .page__column invokes both .the__copy, and the left/right pallets */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } .the__copy blockquote { margin-left: 1.5rem; margin-right:1.5rem; } .the__copy blockquote { font-family: Georgia, Palatino, 'Droid Serif', 'Times New Roman', 'Roboto Slab', serif; font-size: 16px; font-style: normal; font-weight: 400; text-align: left; } .the__copy blockquote, .the__copy q { quotes: none; } .the__copy blockquote:before, .the__copy blockquote:after, .the__copy q:before, .the__copy q:after { content: ''; content: none; } .the__copy blockquote.quote { border-width: 0; border-left-width: 12px; border-style: solid; margin: 0; padding-left: 1.5rem; } .the__copy blockquote.quote .quote_text { font-size: 1.25rem; position: relative; } .the__copy blockquote.quote .quotations:before { position: absolute; left: -0.6em; content: '\201C'; } .the__copy blockquote.quote .quotations:after { content: '\201D'; } .the__copy blockquote.quote .attribution { background-color: transparent; display: block; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 0.875rem; line-height: 1.5rem; } /* ************************************************************************** wordpress.css **************************************************************************/ /** * widgets * To maintain consistency between Backlight and its Wordpress theme, * we style pallet content as if it were a Wordpress text-widget. *************************/ .widget { margin: 36px 0 48px; } .widget > :first-child { margin-top: 0; } .widget-area > :last-child, .widget > :last-child { margin-bottom: 0; } .widget { color: #454545; font-size: 0.875em; line-height: 1.5em; font-size: 0.875rem; line-height: 1.5em; padding: 0 12px; } .widget p { margin: 1.5rem 0; } .widget a, .widget a:visited { color: #2196f3; } .widget a:focus, .widget a:hover { color: #2196f3; } .widget h1, .widget .h1, .widget h2, .widget .h2, .widget h3, .widget .h3, .widget h4, .widget .h4, .widget h5, .widget .h5, .widget h6, .widget .h6 { color: #454545; } .widget h2.widget-title { margin: 0 auto 7px; } .widget h2.widget-title + * { margin-top: 0.25em; } .widget ol, .widget ul { padding: 0; } .widget li { list-style: none; padding: 0; } .widget_archive, .widget_categories, .widget_pages { } .widget_meta { } .widget_nav_menu { padding: 0; } .widget_nav_menu ul.menu { display: block; } .widget_recent_comments { } .widget_recent_entries { } .widget_text { font-size: 0.875em; } .textwidget { } /* WP Search */ form.search-form { max-width: 394px; position: relative; } form.search-form input[type="text"] { padding-right: 42px; } form.search-form input[type="text"]::placeholder { font-size: 0.75rem; line-height: 1.25rem; } form.search-form button { padding-left : 0; padding-right: 0; position: absolute; top: 0; right: 0; width: 36px; } form.search-form button span { display: none; } form.search-form button::before { content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; } .widget_search .search-handoff, .widget_search hr { display: none; } /* WP Calendar */ .widget_calendar { margin-left: auto; margin-right: auto; max-width: 224px; padding: 0; } #wp-calendar { font-size: 0.75rem; line-height: 1; width: 100%; } #wp-calendar a { display: block; text-decoration: none; } #wp-calendar caption { font-weight: 700; margin-bottom: 0.25rem; text-align: right; } #wp-calendar thead, #wp-calendar tfoot { /* background-color: #e0e0e0; color: #212121; /**/ } #wp-calendar thead th, #wp-calendar tbody td { box-sizing: border-box; line-height: 32px; padding: 0; text-align: center; width: 32px; height: 32px; } #wp-calendar tbody td { /* background: #f5f5f5; border: 1px solid #fafafa; /**/ } #wp-calendar tbody td:hover { /* background: #fafafa; /**/ } #wp-calendar tbody td:hover a { text-decoration: underline; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot td { height: 32px; line-height: 32px; padding: 0; } #wp-calendar tfoot #next { text-align: right; text-transform: uppercase; } #wp-calendar tfoot #prev { text-transform: uppercase; } #wp-calendar td#prev, #wp-calendar td#next { padding: 0 6px; } /** * wordpress classes *************************/ .gallery-caption {} .sticky {} .bypostauthor {} /* Text meant only for screen readers. */ .screen-reader-text { clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .screen-reader-text:focus { background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; color: #21759b; display: block; font-size: 14px; font-size: 0.875rem; font-weight: bold; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; /* Above WP toolbar. */ } .alignnone { margin: 0.25rem 0; } .alignleft { float: left; margin: 0.25rem 1.5rem 0.25rem 0; } .alignright { float: right; margin: 0.25rem 0 0.25rem 1.5rem; } .aligncenter { clear: both; display: block; margin: 0.25rem auto; text-align: center; } figure.aligncenter img { margin: 0 auto; } .wp-caption { width: auto !important; max-width: 100%; } .wp-caption-text { } /* ************************************************************************** extras.css **************************************************************************/ /** * search page *************************/ form.search-form, form.search-form p, form.search-handoff { margin : 0; padding: 0; } form.search-handoff button { background-color: transparent; color: #2196f3; font-size: 0.875rem; padding: 0 0.75rem; text-decoration: none; } form.search-handoff button:hover, form.search-handoff button:focus { color: #2196f3; text-decoration: underline; } h3.search-section-title { margin : 3rem 0 1.5rem; padding: 0; } /** * breadcrumbs *************************/ ul.breadcrumbs { font-size: 0; margin : 0; padding: 0; text-align: left; } ul.breadcrumbs li { display: inline-block; font-size: 0.75rem; letter-spacing: 0.015em; line-height: 1.125rem; list-style: none; padding: 0; } ul.breadcrumbs li::after { content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 900; margin: 0 6px; opacity: 0.5; } ul.breadcrumbs li:last-child::after { content: '\f107'; font-family: "Font Awesome 5 Free"; font-weight: 900; } ul.breadcrumbs.album_search li:last-child::after { content: ''; } ul.breadcrumbs.album_search { line-height: 1rem; margin : 1rem 0; padding: 0; } /** * implement Font Awesome *************************/ a::before, a::after, button::before, button::after, .button::before, .button::after, .menu a::before, .menu a::after, .menu span::before, .menu span::after, .fa_pseudo::before, .fa_pseudo::after { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; } .fa_, .fa_pseudo::before, .fa_pseudo::after { font-family: "Font Awesome 5 Free"; font-weight: 900; } .fa-ul > li { line-height: 1.5rem; list-style: none; } /** * messages *************************/ #message { border: 0 solid rgba(255,255,255,0.15); border-width: 0 0 0 8px; border-radius: 3px; border-top-left-radius: 0; box-shadow: 1px 1px 3px rgba(0,0,0,0.15); margin: 1.5rem 0; max-width: 768px; padding: 0.75rem 12px; } #message.error { background-color: #F44336; } #message.success { background-color: #0091EA; } #message * { color: #fff; } #message > *:first-child { margin-top: 0; } #message > *:last-child { margin-bottom: 0; } #message h1 { font-size: 1rem; font-weight: 700; line-height: 1.5rem; margin : 0; padding: 0; } #message p { font-size: 0.857rem; margin: 1.5rem 0; } #message a { text-decoration: underline; } /** * notice *************************/ #notice { height: auto; opacity: 1; transition-duration: 300ms; transition-property: opacity; transition-timing-function: ease-in-out; } .notice { padding:0; } .notice > .content { border: 0 solid rgba( 255, 255, 255, 0.35 ); border-width: 0 0 0 8px; border-bottom-right-radius: 4px; border-top-right-radius: 4px; box-shadow: 1px 1px 3px rgba( 0, 0, 0, 0.15 ); font-family: 'Roboto Mono', sans-serif; font-size: 0.875rem; margin: 1.5rem auto 0; padding: 0.75rem 12px; } .notice > .content > *:first-child { margin-top: 0; } .notice > .content > *:last-child { margin-bottom: 0; } .notice > .content.green, .notice > .content.success { background-color: #B2FF59; color: #000000; } .notice > .content.yellow, .notice > .content.warning { background-color: #FFEB3B; color: #000000; } .notice > .content.red, .notice > .content.error { background-color: #F44336; color: #FFFFFF; } .notice > .content.blue, .notice > .content.info { background-color: #2196F3; color: #FFFFFF; } /** * responsive tabs *************************/ .radioTabs, .radioTabs-js { margin: 3rem auto 0; } .radioTabs input[type="radio"], .radioTabs-js input[type="radio"] { display: none; } .radioTabs label, .radioTabs-js label { border: 1px solid transparent; border-top-width: 2px; box-sizing: border-box; cursor: pointer; display: block; float: left; font-weight: 600; line-height: 44px; margin: 0 0 -1px; overflow-x: hidden; padding: 0 24px; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .radioTabs input[type="radio"]:checked + label, .radioTabs-js input[type="radio"]:checked + label { border: 1px solid #ddd; border-top: 2px solid orange; border-bottom: 1px solid #fff; } .radioTabs section, .radioTabs-js section { border-top: 1px solid transparent; clear: both; display: none; margin: 0 auto; padding:0; } .radioTabs #tab0:checked ~ [data-for='tab0'], .radioTabs #tab1:checked ~ [data-for='tab1'], .radioTabs #tab2:checked ~ [data-for='tab2'], .radioTabs #tab3:checked ~ [data-for='tab3'], .radioTabs #tab4:checked ~ [data-for='tab4'], .radioTabs #tab5:checked ~ [data-for='tab5'], .radioTabs #tab6:checked ~ [data-for='tab6'], .radioTabs #tab7:checked ~ [data-for='tab7'], .radioTabs #tab8:checked ~ [data-for='tab8'], .radioTabs #tab9:checked ~ [data-for='tab9'] { border-top: 1px solid #ddd; display: block; } .radioTabs-js section.is_open { border-top: 1px solid #ddd; display: block; } /** * miscellaneous *************************/ .is_hidden { display:none; } /** hide the honey-pot */ .contact-address { display: none } /** * prevent flash of unstyled content (FOUC) *************************/ .no-fouc { opacity: 0; transition-duration: 300ms; transition-property: opacity; transition-timing-function: ease-in-out; visibility: hidden; } .js .no-fouc { opacity: 1; visibility: visible; } /** * logomarks *************************/ /** reset */ #page__body .logomark, #page__body .logomark a, #page__body .logomark ul, #page__body .logomark li { background: transparent; border-radius: 0; color: inherit; display: block; height: auto; line-height: 0; list-style: none; margin: 0; min-width: 0; min-height: 0; padding: 0; text-decoration: none; } #page__body .logomark a { cursor: pointer; } /** logomark base */ #page__body .logomark { display: inline-block; min-width: 48px; padding: 6px; vertical-align: top; } #page__body .logomark ul { background-color: rgba( 255, 255, 255, 0.25 ); background-color: rgba( 0, 0, 0, 0.35 ); border: 2px solid transparent; box-sizing: border-box; float: left; margin: 0; padding:0; position: relative; width: 36px; height: 36px; } #page__body .logomark ul > li { background-color: #fff; position: absolute; width: 25%; height: 25%; } #page__body .logomark h1 { float: left; font-family: Lato, sans-serif; font-size: 1.2rem; font-weight: 300; letter-spacing: 0.025em; line-height: 36px; margin: 0; padding:0 6px; white-space: nowrap; } #page__body .logomark h1 strong { font-weight: 400; } /** in .the__copy */ ul.logomark-container { display: block; margin: 1.5rem auto; text-align: center; } #page__body .the__copy .logomark { padding: 0; } #page__body .the__copy .logomark ul { border-width: 3px; width: 72px; height: 72px; } #page__body .the__copy .logomark h1 { font-size: 3rem; line-height: 72px; padding:0 12px; } /** backlight */ /** built with backlight */ #page__body .page__pallet__bottom .backlight_logomark { float: left; } #page__body .page__pallet__bottom .backlight_logomark h1 { color: #ffffff; text-align: left; } #page__body .page__pallet__bottom .backlight_logomark h1 span { display: block; font-size: 0.875rem; font-weight: 400; line-height: 18px; } #page__body .page__pallet__bottom .backlight_logomark h1 span:nth-child(even) { font-size: 1rem; } /** theturninggate */ #page__body .theturninggate_logomark ul { background-color: #fff; border-width: 1px; } #page__body .theturninggate_logomark li { border: 1px solid #fff; } #page__body .theturninggate_logomark li.col_x2 { width: 50%; } #page__body .theturninggate_logomark li.row_x2 { height:50%; } #page__body .theturninggate_logomark li.color_999999 { background-color: #9E9E9E; } /* grey */ #page__body .theturninggate_logomark li.color_66ccff { background-color: #90CAF9; } /* light blue */ #page__body .theturninggate_logomark li.color_0099cc { background-color: #2196F3; } /* blue */ #page__body .theturninggate_logomark li.color_99cc66 { background-color: #B2FF59; } /* light green */ #page__body .theturninggate_logomark li.color_66cc33 { background-color: #8BC34A; } /* green */ #page__body .theturninggate_logomark li.color_ff9933 { background-color: #FF9800; } /* orange */ /** theturninggate large version, for masthead use */ #page__body .masthead .logomark { padding: 0; } #page__body .masthead .logomark ul { width: 96px; height: 96px; } #page__body .masthead .logomark h1 { line-height: 96px; padding:0 12px; } #page__body .masthead .theturninggate_logomark, #page__body .masthead .theturninggate_logomark li { border-width: 3px; } #page__body .masthead-primary .theturninggate_logomark h1 { color: #ffffff; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 1.5rem; font-weight: 400; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } #page__body .masthead-secondary .theturninggate_logomark h1 { color: #454545; font-family: Arial, 'Helvetica Neue', Helvetica, Roboto, 'Droid Sans', sans-serif; font-size: 1.5rem; font-weight: 400; text-shadow: none; } /** * language select *************************/ #language-selector li { display: block; font-size: 0.875rem; width: 100%; } *[data-lang] { display: none; } html[lang="en"] *[data-lang="en"] { display: inherit; } /** ** cookies acceptance notice **************************/ .cookies-acceptance-notice { background: #2196f3; bottom: 0; left: 0; position: fixed; width: 100%; z-index: 6; } .cookies-acceptance-notice > div { color: #ffffff; font-size: 0.875rem; line-height: 1.25rem; margin: 0 auto; max-width: 920px; padding: 18px; } .cookies-acceptance-notice p { margin-bottom: 1.25rem; } .cookies-acceptance-notice a { color: #ffffff; text-decoration: underline; } .cookies-acceptance-buttons { align-items: center; display: flex; justify-content: flex-end; } label[for="gaOptOut"] { cursor: pointer; margin-right: 9px; } .cookies-acceptance-buttons input[type="checkbox"] { display: none; } .cookies-acceptance-buttons button, .cookies-acceptance-buttons label { align-items: center; background-color: #2196f3; border: 2px solid #ffffff; border-radius: 4px; color: #ffffff; display: flex; font-size: 0.75rem; font-weight: 600; height: 36px; justify-content: center; padding: 0 18px; } .cookies-acceptance-buttons input[type="checkbox"] + span::before { content: "\f0c8"; display: inline-block; margin-right: 12px; } .cookies-acceptance-buttons input[type="checkbox"]:checked + span::before { content: "\f14a"; } @media only screen and (max-width: 640px) { .cookies-acceptance-buttons { flex-direction: column; justify-content: center; } .cookies-acceptance-buttons button, .cookies-acceptance-buttons label { margin-bottom: 18px; } } /** * alerts *************************/ .alert { background-color: #fcf8e3 !important; border: 1px solid #f2e187 !important; border-radius: 2px; color: #9c8611 !important; margin-bottom: 1.5em; padding: 0.75em; } .alert-success { background-color: #c5e6c5 !important; border-color: #a2d6a2 !important; color: #347834 !important; } .alert-warning { background-color: #fee7c7 !important; border-color: #fcd296 !important; color: #c17305 !important; } .alert-error { background-color: #f4cac8 !important; border-color: #eba19e !important; color: #da4f49 !important; } .alert-inverse { background-color: #414141 !important; border-color: #000000 !important; color: #ffffff !important; } .fancybox-is-open .fancybox-bg { opacity: 0.95; } .fancybox-slide--html > *, .fancybox-slide--inline > * { background-color: #fff; color: #212121; border-radius: 3px; margin: 44px; padding: 44px; width: 768px; max-width: calc(100% - 88px); min-width: 320px; } .fancybox-slide--html > :first-child > *:not(.fancybox-close-small), .fancybox-slide--inline > :first-child > *:not(.fancybox-close-small) { margin-bottom: 1.125rem; } @media screen and (max-width: 800px) { .fancybox-slide--html > *, .fancybox-slide--inline > * { font-size: 0.875rem; margin: 0; min-height: calc(100% - 6px); min-width: 0; padding: 44px 44px 72px 12px; width: 100%; } .fancybox-share { min-height: 0; } } .fancybox-slide--html > :first-child > :first-child, .fancybox-slide--inline > :first-child > :first-child { margin-top: 0; } .fancybox-slide--html > :first-child > :nth-last-child(2), .fancybox-slide--inline > :first-child > :nth-last-child(2) { margin-bottom: 0; } .fancybox-slide--html, .fancybox-slide--inline { font-size: 0.875rem; } .fancybox-slide--html p, .fancybox-slide--inline p { line-height: 1.25rem; margin: 1.25em 0; } .fancybox-navigation .fancybox-button div { opacity: 0.5; } .fancybox-navigation .fancybox-button:hover div { opacity: 1; } .fancybox-navigation .fancybox-button[disabled] { opacity: 0; visibility: hidden; } .fancybox-thumbs__list a::before { border: 6px solid #2196f3; } /**/ /** * add-on modal styling *************************/ #errorMessage { padding: 48px 24px 0; } div.modal-content { margin: 0; padding:0; } p.modal-title { border-bottom: 1px solid #e0e0e0; box-sizing: border-box; font-size: 0.875rem; line-height: 1.25rem; margin: 0; padding: 14px 49px 14px 24px; position: absolute; top: 0; left: 0; width: 100%; } p.modal-message { } .modal-actions { clear: both; padding-top: 48px; } .modal-actions button { display: inline-block; font-size: 0.875rem; line-height: 36px; width: 75%; } button.discreet { background-color: transparent; color: inherit; font-size: 0.75rem; line-height: 36px; margin-right: 5%; width: 20%; } /**/ /** * cart modal styling *************************/ #cartModal { padding: 48px 24px; width: 640px; } #cartModal-content .cart-thumbnail { float: left; margin: 1.5rem 24px 1.5rem 0; width: 168px; } #cartModal-content .cart-thumbnail img { display: block; } #cartModal-content .cart-details { float: left; font-size: 0.875rem; margin: 1.5rem 0 0; width: calc( 100% - 168px - 24px ); } @media only screen and (max-width: 640px) { #cartModal { padding: 48px 12px; } #cartModal-content .cart-thumbnail, #cartModal-content .cart-details { float: none; margin: 1.5rem 0; width: 100%; } #cartModal-content .cart-thumbnail img { margin-left: auto; margin-right: auto; } } #cartModal-content .cart-details :first-child { margin-top: 0; } #cartModal-content .cart-details :last-child { margin-bottom: 0; } #cartModal-content .cart-details dt, #cartModal-content .cart-details dd { font-size: 0.875rem; line-height: 1; margin: 0; padding:0; } #cartModal-content .cart-details dt { font-size: 0.75rem; font-weight: 700; margin: 0 0 0.25rem; } #productSelector { margin: 1rem 0; } span.text_option { margin-left: 6px; } #cartModal-content fieldset { border: none; margin: 1rem 0; padding:0; } #cartModal-content label { font-weight: 700; } #cartModal-content select { clear: both; display: block; width: auto; z-index: 1; } #cartModal-content input#quantity { display: block; text-align: center; width: auto; } #calculatedPrice { font-weight: 700; margin: 1.5rem 0; } #calculatedPrice .unit_price { font-weight: 400; } /**/