@charset "UTF-8"; /*! * by Archive Studio * http://archivestudio.co.uk */ /** * Config */ /** * Settings * * Project settings to override _core/sass/defaults */ /** * Breakpoints * * Hold our breakpoint aliases and conditions in a list. These can be invoked * later on via the `respond-to()` mixin found in _mixins.scss. */ /** * Base Grid & Spacing values */ /** * Base Type Settings */ /** * Base Colours */ /** * Base Images */ /** * Base Icons */ /** * Base Cursors */ /** * Base Sections (Sections being regions that allow you to control core styling) * The keys in this array will be used as modifiers (.Section--{key}) with the config settings provided * At a config level Sections can define: - background color - foreground color, - heading typeface, - body typeface - padding for the .Section-body - max width for the .Section-body - colour for images - colour links - colour for active items */ /** * Top level hooks */ /** * Fonts */ @font-face { font-family: 'acute'; src: url("/ui/fonts/acute/acute.eot"); src: url("/ui/fonts/acute/acute.eot#iefix") format("embedded-opentype"), url("/ui/fonts/acute/acute.ttf") format("truetype"), url("/ui/fonts/acute/acute.woff") format("woff"), url("/ui/fonts/acute/acute.svg #icomoon") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'b'; src: url("/ui/fonts/b/b.eot"); src: url("/ui/fonts/b/b.eot#iefix") format("embedded-opentype"), url("/ui/fonts/b/b.ttf") format("truetype"), url("/ui/fonts/b/b.woff") format("woff"), url("/ui/fonts/b/b.svg #icomoon") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon'; src: url("/ui/fonts/icomoon/icomoon.eot?hxbp1h"); src: url("/ui/fonts/icomoon/icomoon.eot?hxbp1h#iefix") format("embedded-opentype"), url("/ui/fonts/icomoon/icomoon.ttf?hxbp1h") format("truetype"), url("/ui/fonts/icomoon/icomoon.woff?hxbp1h") format("woff"), url("/ui/fonts/icomoon/icomoon.svg?hxbp1h#icomoon") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'icomoon'; src: url("/ui/fonts/icons/icons.eot?hxbp1h"); src: url("/ui/fonts/icons/icons.eot?hxbp1h#iefix") format("embedded-opentype"), url("/ui/fonts/icons/icons.ttf?hxbp1h") format("truetype"), url("/ui/fonts/icons/icons.woff?hxbp1h") format("woff"), url("/ui/fonts/icons/icons.svg?hxbp1h#icons") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'Unica77 LL Black'; src: url("/ui/fonts/Unica-Black/Unica77LL-Black.eot"); /* IE9 Compat Modes */ src: url("/ui/fonts/Unica-Black/Unica77LL-Black.eot#iefix") format("embedded-opentype"), url("/ui/fonts/Unica-Black/Unica77LL-Black.woff") format("woff"), url("/ui/fonts/Unica-Black/Unica77LL-Black.ttf") format("truetype"), url("/ui/fonts/Unica-Black/Unica77LL-Black.svg#1ff3782679a7b923289d2e035aae87ec") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: 400; } @font-face { font-family: 'Unica77 LL'; src: url("/ui/fonts/Unica-Regular/Unica77LL-Regular.eot"); /* IE9 Compat Modes */ src: url("/ui/fonts/Unica-Regular/Unica77LL-Regular.eot#iefix") format("embedded-opentype"), url("/ui/fonts/Unica-Regular/Unica77LL-Regular.woff") format("woff"), url("/ui/fonts/Unica-Regular/Unica77LL-Regular.ttf") format("truetype"), url("/ui/fonts/Unica-Regular/Unica77LL-Regular.svg#2867689ec643d72addaa69dde277011b") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: 400; } /** * Import the core */ /** * Settings - will only sett settings if we settings have not yet been defined */ /** * Settings * * Core defaults */ /** * Breakpoints * * Hold our breakpoint aliases and conditions in a list. These can be invoked * later on via the `respond-to()` mixin found in _mixins.scss. */ /** * Base Grid & Spacing values */ /** * Base Type Settings */ /** * Base Colours */ /** * Base Icons */ /** * Base Cursors */ /** * Base Sections (Sections being regions that allow you to control core styling) * The keys in this array will be used as modifiers (.Section--{key}) with the config settings provided * At a config level Sections can define: - background color - foreground color, - heading typeface, - body typeface - padding for the .Section-body - max width for the .Section-body - colour for images - colour links - colour for active items */ /** * Top level hooks */ /** * Tools */ /* Strip unit */ /* Express pixel size as viewport width */ /* Express pixel size as viewport width */ /* Col and Row functions */ /** * Font size mixin * * This will generate a rem-based font-size with its pixel fallback. * * @include font-size(12px); */ /** * Media query mixin * * A simple mixin to quickly generate whole media queries from the aliases and * conditions defined in `_settings.scss`. * * @include respond-to(mobile) { ... } */ /** * Get Unit function * * Return a value from a variable based on a responsive breakpoint vlabel. If the variable passed in is not multidimensional, then the value is simply returned * * get-unit('mobile',$base-padding); */ /** * Responsive property * * Works with the respond-to mixin to output a property with a range of settings based on breakpoint labels supplied * * @include font-size(12px); */ /** * Responsive X property * * Multiple a multi-dimensional value by a supplied factor */ /* 'background' : $base-background, 'color' : $base-color, 'heading-font-family' : $base-font-family-alt, 'text-font-family' : $base-font-family, 'container-padding' : $base-padding, 'container-max-width' : $base-max-width, 'image-color' : $base-image-color, 'link-color' : $base-link-color, 'active-color' : $base-active-color */ /* Spritesheet mixin */ /** * Ceaser cubic bezier’s easing animations * * Based on: http://matthewlein.com/ceaser */ /** * EaseOut */ /** * Cubic */ /** * Circ */ /** * Expo */ /** * Quad */ /** * Quart */ /** * Quint */ /** * Sine */ /** * Back */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /** * Base */ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */ /** * 1. Set default font family to sans-serif. * 2. Prevent iOS text size adjust after orientation change, without disabling * user zoom. */ html { font-family: sans-serif; /* 1 */ -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */ } /** * Remove default margin. */ body { margin: 0; } /* HTML5 display definitions ========================================================================== */ /** * Correct `block` display not defined for any HTML5 element in IE 8/9. * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox. * Correct `block` display not defined for `main` in IE 11. */ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; } /** * 1. Correct `inline-block` display not defined in IE 8/9. * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */ audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ } /** * Prevent modern browsers from displaying `audio` without controls. * Remove excess height in iOS 5 devices. */ audio:not([controls]) { display: none; height: 0; } /** * Address `[hidden]` styling not present in IE 8/9/10. * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */ [hidden], template { display: none; } /* Links ========================================================================== */ /** * Remove the gray background color from active links in IE 10. */ a { background: transparent; } /** * Improve readability when focused and also mouse hovered in all browsers. */ a:active, a:hover { outline: 0; } /* Text-level semantics ========================================================================== */ /** * Address styling not present in IE 8/9/10/11, Safari, and Chrome. */ abbr[title] { border-bottom: 1px dotted; } /** * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */ b, strong { font-weight: bold; } /** * Address styling not present in Safari and Chrome. */ dfn { font-style: italic; } /** * Address variable `h1` font-size and margin within `section` and `article` * contexts in Firefox 4+, Safari, and Chrome. */ h1 { font-size: 2em; margin: 0.67em 0; } /** * Address styling not present in IE 8/9. */ mark { background: #ff0; color: #000; } /** * Address inconsistent and variable font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` affecting `line-height` in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } /* Embedded content ========================================================================== */ /** * Remove border when inside `a` element in IE 8/9/10. */ img { border: 0; } /** * Correct overflow not hidden in IE 9/10/11. */ svg:not(:root) { overflow: hidden; } /* Grouping content ========================================================================== */ /** * Address margin not present in IE 8/9 and Safari. */ figure { margin: 1em 40px; } /** * Address differences between Firefox and other browsers. */ hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; } /** * Contain overflow in all browsers. */ pre { overflow: auto; } /** * Address odd `em`-unit font size rendering in all browsers. */ code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } /* Forms ========================================================================== */ /** * Known limitation: by default, Chrome and Safari on OS X allow very limited * styling of `select`, unless a `border` property is set. */ /** * 1. Correct color not being inherited. * Known issue: affects color of disabled elements. * 2. Correct font properties not being inherited. * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */ button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ } /** * Address `overflow` set to `hidden` in IE 8/9/10/11. */ button { overflow: visible; } /** * Address inconsistent `text-transform` inheritance for `button` and `select`. * All other form control elements do not inherit `text-transform` values. * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. * Correct `select` style inheritance in Firefox. */ button, select { text-transform: none; } /** * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` * and `video` controls. * 2. Correct inability to style clickable `input` types in iOS. * 3. Improve usability and consistency of cursor style between image-type * `input` and others. */ button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ } /** * Re-set default cursor for disabled elements. */ button[disabled], html input[disabled] { cursor: default; } /** * Remove inner padding and border in Firefox 4+. */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /** * Address Firefox 4+ setting `line-height` on `input` using `!important` in * the UA stylesheet. */ input { line-height: normal; } /** * It's recommended that you don't attempt to style these elements. * Firefox's implementation doesn't respect box-sizing, padding, or width. * * 1. Address box sizing set to `content-box` in IE 8/9/10. * 2. Remove excess padding in IE 8/9/10. */ input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Fix the cursor style for Chrome's increment/decrement buttons. For certain * `font-size` values of the `input`, it causes the cursor style of the * decrement button to change from `default` to `text`. */ input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } /** * 1. Address `appearance` set to `searchfield` in Safari and Chrome. * 2. Address `box-sizing` set to `border-box` in Safari and Chrome * (include `-moz` to future-proof). */ input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; } /** * Remove inner padding and search cancel button in Safari and Chrome on OS X. * Safari (but not Chrome) clips the cancel button when the search input has * padding (and `textfield` appearance). */ input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } /** * Define consistent border, margin, and padding. */ fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } /** * 1. Correct `color` not being inherited in IE 8/9/10/11. * 2. Remove padding so people aren't caught out if they zero out fieldsets. */ legend { border: 0; /* 1 */ padding: 0; /* 2 */ } /** * Remove default vertical scrollbar in IE 8/9/10/11. */ textarea { overflow: auto; } /** * Don't inherit the `font-weight` (applied by a rule above). * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */ optgroup { font-weight: bold; } /* Tables ========================================================================== */ /** * Remove most spacing between table cells. */ table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } /** * Set the global `box-sizing` state to `border-box`. * * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice * paulirish.com/2012/box-sizing-border-box-ftw */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } /** * A thin layer on top of normalize.css that provides a starting point more * suitable for web applications. Removes the default spacing and border for * appropriate elements. */ /** * High, page-level styling. * * 1. Set the default font-family, `font-size` and `line-height` for the entire project, * sourced from our default variables. The `font-size` is calculated to exist * in ems, the `line-height` is calculated to exist unitlessly. * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when * navigating between pages that do/do not have enough content to produce * scrollbars naturally. * 3. Ensure the page always fills at least the entire height of the viewport. * 4. Fonts on OSX will look more consistent with other systems that do not * render text using sub-pixel anti-aliasing. */ html { font-family: "Unica77 LL", "Helvetica", Arial, sans-serif; /* 1 */ font-size: 1.125em; /* 1 */ line-height: 1.2222222222; /* 1 */ background: #fff; color: #000; overflow-y: scroll; /* 2 */ min-height: 100%; /* 3 */ -moz-osx-font-smoothing: grayscale; /* 4 */ -webkit-font-smoothing: antialiased; /* 4 */ -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } a { color: #000; text-decoration: none; transition: all 0.4s ease; } a:hover { opacity: 1; } blockquote, dl, dd, h1, h2, h3, h4, h5, h6, figure, p, pre { margin: 0; } button { background: transparent; border: 0; padding: 0; } /** * Work around a Firefox/IE bug where the transparent `button` background * results in a loss of the default `button` focus styles. */ button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; } fieldset { border: 0; margin: 0; padding: 0; } iframe { border: 0; } ol, ul { list-style: none; margin: 0; padding: 0; } /** * Suppress the focus outline on links that cannot be accessed via keyboard. * This prevents an unwanted focus outline from appearing around elements that * might still respond to pointer events. */ [tabindex="-1"]:focus { outline: none !important; } /** * Emboldened elements */ b, strong { font-weight: normal; font-family: "Helvetica", Arial, sans-serif; } /** * Address */ address { font-style: normal; } /** * Selection */ ::selection { background-color: rgba(0, 0, 0, 0.75); color: #FFF; text-shadow: none; } /** * 1. Fluid images for responsive purposes. * 2. Offset `alt` text from surrounding copy. * 3. Setting `vertical-align` removes the whitespace that appears under `img` * elements when they are dropped into a page as-is. Safer alternative to * using `display: block;`. */ img { max-width: 100%; /* 1 */ font-style: italic; /* 2 */ vertical-align: middle; /* 3 */ } /** * If a `width` and/or `height` attribute have been explicitly defined, let’s * not make the image fluid. */ img[width], img[height] { max-width: none; } /** * Text inputs */ input, textarea { outline: none; border: 0; -webkit-appearance: none; border-radius: 0; padding: 0; } input[type="search"] { box-sizing: inherit; } ::-webkit-input-placeholder { color: #787878; } /** * Text tags all set to base font size */ h1, h2, h3, h4, h5, h6, p, ul, input { font-size: 18px; font-size: 1rem; font-weight: normal; } /** * Utils */ .Image, .Item--browser, .Video, .Slider, .Site *[data-box-mode="ratio"], .Logo, .Icon.Icon--ratio, .Image--square, .Image--landscape, .Image--portrait { position: relative; } .Video.Video--fluid, .Slider-body, .Slider.Slider--fluid, .Site *[data-box-mode="fluid"], .Scroller .Scroller-body, .Scroller, .Icon.Icon--fluid, .Image--fluid > *, .Image--fluid, .Image > *, .Item--browser > *, .Video > *, .Slider > *, .Site *[data-box-mode="ratio"] > *, .Logo > *, .Icon.Icon--ratio > *, .Image--square > *, .Image--landscape > *, .Image--portrait > * { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: block; } .Item--browser, .Video, .Slider, .Site *[data-box-mode="ratio"], .Logo, .Icon.Icon--ratio, .Image--square, .Image--landscape, .Image--portrait { height: 0; overflow: hidden; width: auto; } .Image--portrait { padding-top: 133.3333333333%; height: 5px; box-sizing: content-box; } .Image--landscape { padding-top: 66.6666666667%; } .Image--square { padding-top: 100%; } /** * Contain floats * * Make an element expand to contain floated children. * Uses pseudo-elements (micro clearfix). * * 1. The space content is one way to avoid an Opera bug when the * `contenteditable` attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of the * element. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .List--masonry:before, .Section-container:before, .List--masonry:after, .Section-container:after { content: " "; /* 1 */ display: table; /* 2 */ } .List--masonry:after, .Section-container:after { clear: both; } /** @define Container */ /** * Container has auto side margins and max width in line with the base settings */ .Overlay-content, .Container { margin-left: auto; margin-right: auto; max-width: none; padding-left: 5px; padding-right: 5px; } /** * Core grid system */ /** * Grid container * * 1. Account for browser defaults of elements that might be the root node of * the component. * 2. Ensure consistent default alignment. * 3. Apply a negative `margin-left` to negate the columns’ gutters. */ .List--masonry, .List--logos, .Grid--social, .List--instagram, .List--details, [data-grid-of], .Grid, .Component, .Grid--4, .Grid--3, .Grid--2, .Grid--spec { display: block; /* 1 */ margin: 0; /* 1 */ padding: 0; /* 1 */ text-align: left; /* 2 */ margin-left: -5px; } /** * Grid item * * 1. Fundamentals of the non-float grid layout. * 2. Space columns apart. * 3. Keeps content correctly aligned with the grid direction. * 4. Controls vertical positioning of units. * 5. Make cells full-width by default. */ .List--masonry .List-item, .List--logos .List-item, .Grid--social .Grid-body, .Grid--social .Grid-head, .List--instagram > *, .List--details > *, [data-grid-of] > *, .Grid > *, .Grid .Grid-item, .Grid--spec > *, .Component .Component-body, .Component .Component-head, .Grid--4 > *, .Grid--3 > *, .Grid--2 > * { display: inline-block; /* 1 */ margin: 0; padding-left: 5px; /* 2 */ text-align: left; /* 3 */ vertical-align: top; /* 4 */ width: 100%; /* 5 */ } .Grid--2 > * { vertical-align: top; width: 50%; } @media (max-width: 745px) { .Grid--2 > * { width: 100%; } } .Grid--3 > * { vertical-align: top; width: 33.3333333333%; } @media (max-width: 745px) { .Grid--3 > * { width: 100%; } } .Grid--4 > * { vertical-align: top; width: 25%; } @media (max-width: 745px) { .Grid--4 > * { width: 50%; } } .Component .Component-head { vertical-align: top; width: 40%; } @media (max-width: 745px) { .Component .Component-head { width: 100%; } } .Component .Component-body { vertical-align: top; width: 60%; } @media (max-width: 745px) { .Component .Component-body { width: 100%; } } .Grid--spec > * { vertical-align: top; } .Grid--spec > *:before { content: ''; display: block; padding-top: 66%; height: 0; background: #DDD; } /* Can be extended on a component or pseudo element, add icon types and just send in an icon file: %u-icon--close{ background-image:url('/ui/img/icons/close.svg'); } Examples for making a component or pseudo element display like an icon... .Icon{ @extend %u-icon; @extend %u-box--ratio; width:100%; padding-top:100%; } .Icon--closeBlack{ @extend %u-icon--close; } .Link--icon{ &:before{ @extend %u-icon; @extend %u-icon--close; width:20px; height:20px; } } */ .Image .Image-icon:before, .Image .Image-icon:after, .Video .mejs-overlay-play .mejs-overlay-button:after, .Video-poster:after, .Slider-arrow:after, .Link--not-muted:before, .Link--muted:before, .Link--search:before, .Link--play:before, .Link--arrow-down:before, .Link--arrow-up:before, .Link--arrow-left:before, .Link--arrow-right:before, .Link--cross:before, .Link--phone:before, .Link--location:before, .Link--mail:before, .Link--info:before, .Icon { background: transparent center no-repeat; background-size: 100% auto; content: ''; display: inline-block; transition: all 0.4s ease; transform-origin: 50% 50%; /*@include when-inside(':hover >'){ opacity:0.5; }*/ } .Link--info:before, .Icon--info { background-image: url("/ui/img/icons/info.svg"); } .Link--mail:before, .Icon--mail { background-image: url("/ui/img/icons/mail.svg"); } .Link--location:before, .Icon--location { background-image: url("/ui/img/icons/location.svg"); } .Link--phone:before, .Icon--phone { background-image: url("/ui/img/icons/phone.svg"); } .Link--cross:before, .Icon--cross { background-image: url("/ui/img/icons/cross.svg"); } .Slider-arrow--right:after, .Link--arrow-right:before, .Icon--arrow-right { background-image: url("/ui/img/icons/arrow-right.svg"); } .Slider-arrow--left:after, .Link--arrow-left:before, .Icon--arrow-left { background-image: url("/ui/img/icons/arrow-left.svg"); } .Link--arrow-up:before, .Icon--arrow-up { background-image: url("/ui/img/icons/arrow-up.svg"); } .Link--arrow-down:before, .Icon--arrow-down { background-image: url("/ui/img/icons/arrow-down.svg"); } .Video .mejs-overlay-play .mejs-overlay-button:after, .Video-poster:after, .Link--play:before, .Icon--play { background-image: url("/ui/img/icons/play.svg"); } .Link--search:before, .Icon--search { background-image: url("/ui/img/icons/search.svg"); } .Image .Image-icon:after, .Link--muted:before, .Icon--muted { background-image: url("/ui/img/icons/muted.svg"); } .Image .Image-icon:before, .Link--not-muted:before, .Icon--not-muted { background-image: url("/ui/img/icons/not-muted.svg"); } .Link--glyph-pause:before, .Link--glyph-play:before, .Link--glyph-location2:before, .Link--glyph-ellipsis:before, .Link--glyph-open:before, .Link--glyph-inbox:before, .Link--glyph-cross:before, .Link--glyph-check:before, .Link--glyph-minus:before, .Link--glyph-plus:before, .Link--glyph-arrow-down:before, .Link--glyph-arrow-up:before, .Link--glyph-arrow-right:before, .Link--glyph-arrow-left:before, .Link--glyph-location:before, .Link--glyph-zoom-out:before, .Link--glyph-zoom-in:before, .Link--glyph-search:before, .Link--glyph-mail:before, .Link--glyph-info:before, .Link--glyph-phone:before, .Icon--glyph-pause, .Icon--glyph-play, .Icon--glyph-location2, .Icon--glyph-ellipsis, .Icon--glyph-open, .Icon--glyph-inbox, .Icon--glyph-cross, .Icon--glyph-check, .Icon--glyph-minus, .Icon--glyph-plus, .Icon--glyph-arrow-down, .Icon--glyph-arrow-up, .Icon--glyph-arrow-right, .Icon--glyph-arrow-left, .Icon--glyph-location, .Icon--glyph-zoom-out, .Icon--glyph-zoom-in, .Icon--glyph-search, .Icon--glyph-mail, .Icon--glyph-info, .Icon--glyph-phone { /* use !important to prevent issues with browser extensions that change fonts */ font-family: 'icomoon' !important; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .Link--glyph-phone:before, .Icon--glyph-phone:before { content: ""; } .Link--glyph-info:before, .Icon--glyph-info:before { content: ""; } .Link--glyph-mail:before, .Icon--glyph-mail:before { content: ""; } .Link--glyph-search:before, .Icon--glyph-search:before { content: ""; } .Link--glyph-zoom-in:before, .Icon--glyph-zoom-in:before { content: ""; } .Link--glyph-zoom-out:before, .Icon--glyph-zoom-out:before { content: ""; } .Link--glyph-location:before, .Icon--glyph-location:before { content: ""; } .Link--glyph-arrow-left:before, .Icon--glyph-arrow-left:before { content: ""; } .Link--glyph-arrow-right:before, .Icon--glyph-arrow-right:before { content: ""; } .Link--glyph-arrow-up:before, .Icon--glyph-arrow-up:before { content: ""; } .Link--glyph-arrow-down:before, .Icon--glyph-arrow-down:before { content: ""; } .Link--glyph-plus:before, .Icon--glyph-plus:before { content: ""; } .Link--glyph-minus:before, .Icon--glyph-minus:before { content: ""; } .Link--glyph-check:before, .Icon--glyph-check:before { content: ""; } .Link--glyph-cross:before, .Icon--glyph-cross:before { content: ""; } .Link--glyph-inbox:before, .Icon--glyph-inbox:before { content: ""; } .Link--glyph-open:before, .Icon--glyph-open:before { content: ""; } .Link--glyph-ellipsis:before, .Icon--glyph-ellipsis:before { content: ""; } .Link--glyph-location2:before, .Icon--glyph-location2:before { content: ""; } .Link--glyph-play:before, .Icon--glyph-play:before { content: ""; } .Link--glyph-pause:before, .Icon--glyph-pause:before { content: ""; } /* Ratio box - needs a top padding to give it proportion */ /* Relative box - must be sized specifically, e.g. keepRatio */ .Image > * { background-size: cover; background-position: center center; display: block; } /* Fluid box - will fill its parent */ /* Ratio cover - needs a top padding. Images will cover regardless of source size */ .Image--square > *, .Image--landscape > *, .Image--portrait > * { background-size: cover; background-position: center center; display: block; } /* Fluid cover - will fill its parent and scale background image regardless of source size */ .Image--fluid { height: 100%; width: 100%; } .Image--fluid > * { background-size: cover; background-position: center center; display: block; } /** * Core list system */ /** * List * */ .List--items > * { padding-bottom: 5px; } .List--items > *:last-child { padding-bottom: 0; } .List--spec > li { padding-bottom: 5px; } .Item--tile .Item-body p, .Item--tile .Item-body h1 { padding: 5px; } .Site-scroll, .Scroller .Scroller-body, .Overlay-body { overflow: hidden; overflow-y: auto; } .Site--touch .Site-scroll, .Site--touch .Scroller .Scroller-body, .Scroller .Site--touch .Scroller-body, .Site--touch .Overlay-body { overflow-y: scroll; /* has to be scroll, not auto */ -webkit-overflow-scrolling: touch; } .Content--unica--regular, .Content--search, .Content--unica--regular--large, .Form--search input, .Content--body, .Content--unica--regular--medium, .Item--tile h1, .Content--caption, .Content--unica--regular--small, .Item--tile h2, .Item--tile p, .Content--message, .Content--details h5 a, .Content--details h4, .Site-copyright, .Site-heading *, .Section.Section--information .Section-container .Section-container-body ul u, .List--footerNav li { font-family: "Unica77 LL","Helvetica", Arial, sans-serif; font-style: normal; font-weight: normal; } .Content--caption, .Content--unica--regular--small, .Item--tile h2, .Item--tile p, .Content--message, .Content--details h5 a, .Content--details h4, .Site-copyright, .Site-heading *, .Section.Section--information .Section-container .Section-container-body ul u, .List--footerNav li { font-size: 18px; font-size: 1rem; } .Site-copyright,.List--footerNav li { font-size: 12px; font-size: 0.6666666667rem; } .Content--body, .Content--unica--regular--medium, .Item--tile h1 { font-size: 18px; font-size: 1rem; } .Content--search, .Content--unica--regular--large, .Form--search input { font-size: 80px; font-size: 4.4444444444rem; } .Content--unica--bold, .Content--unica--bold--large, .Content--unica--bold--medium, .Content--unica--bold--small { font-family: "Unica77 LL Black","Helvetica", Arial, sans-serif; font-style: normal; font-weight: normal; } .Content--unica--bold--small { font-size: 18px; font-size: 1rem; } .Content--unica--bold--medium { font-size: 18px; font-size: 1rem; } .Content--unica--bold--large { font-size: 80px; font-size: 4.4444444444rem; } /** * Align children of this element vertically in the middle */ /** * Cell * * 1. Make it relative so children can borrow its height * 2. Add pseudo element so that theblcok content can sit in the vertical middle (hack to give height to an unknown area) * 3. Immediate children set to inline block * 4. Immeditate children set to vertical align middle */ .Overlay-body { display: block; position: relative; /* 1 */ } .Overlay-body:before { /* 2 */ content: ''; display: inline-block; height: 100%; vertical-align: middle; /* Old way */ margin-right: -0.25em; /* Adjusts for spacing */ /* New Way */ width: 1px; margin-left: -1px; margin-right: 0; } .Overlay-body > * { display: inline-block; /* 3 */ vertical-align: middle; /* 4 */ } /** * Components */ /** @define Component */ /** * Component */ .Component .Component-head:before { content: ''; display: block; background: #999; height: 1px; margin-bottom: 5px; } .Component .Component-body { position: relative; } .Component .Component-body:before { content: ''; display: block; height: 1px; background: #DDD; margin-bottom: 5px; } .Component .Component-foot { display: inline-block; } /** @define Content */ /** * Content */ .Content > :last-child { margin-bottom: 0; } .Content--meta { display: none !important; } /* Make a content style for each of the base text families */ /* Make a content style for each of the text applications */ .Content--spec, .Content--spec-util { font-family: monospace; padding: 10px; display: inline-block; border: 1px #333 solid; color: #333; border-radius: 5px; } .Content--spec-util { border: 1px #999 solid; color: #999; } /* data-breakpoint-col */ [data-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-col-one-of="1"] { width: 100%; } [data-grid-of] > *[data-col-two-of="1"] { width: 200%; } [data-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-col-one-of="2"] { width: 50%; } [data-grid-of] > *[data-col-two-of="2"] { width: 100%; } [data-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-col-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-col-two-of="3"] { width: 66.6666666667%; } [data-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-col-one-of="4"] { width: 25%; } [data-grid-of] > *[data-col-two-of="4"] { width: 50%; } [data-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-col-one-of="5"] { width: 20%; } [data-grid-of] > *[data-col-two-of="5"] { width: 40%; } [data-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-col-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-col-two-of="6"] { width: 33.3333333333%; } [data-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-col-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-col-two-of="7"] { width: 28.5714285714%; } [data-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-col-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-col-two-of="8"] { width: 25%; } [data-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-col-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-col-two-of="9"] { width: 22.2222222222%; } [data-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-col-one-of="10"] { width: 10%; } [data-grid-of] > *[data-col-two-of="10"] { width: 20%; } [data-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-col-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-col-two-of="11"] { width: 18.1818181818%; } [data-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-col-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-col-two-of="12"] { width: 16.6666666667%; } @media (max-width: 745px) { [data-mobile-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-mobile-one-of="1"] { width: 100%; } [data-grid-of] > *[data-mobile-two-of="1"] { width: 200%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-tablet-one-of="1"] { width: 100%; } [data-grid-of] > *[data-tablet-two-of="1"] { width: 200%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-tablet-up-one-of="1"] { width: 100%; } [data-grid-of] > *[data-tablet-up-two-of="1"] { width: 200%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-tablet-all-one-of="1"] { width: 100%; } [data-grid-of] > *[data-tablet-all-two-of="1"] { width: 200%; } } @media (min-width: 1024px) { [data-desktop-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-desktop-one-of="1"] { width: 100%; } [data-grid-of] > *[data-desktop-two-of="1"] { width: 200%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-desktop-plus-one-of="1"] { width: 100%; } [data-grid-of] > *[data-desktop-plus-two-of="1"] { width: 200%; } } @media (min-width: 1400px) { [data-wide-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-wide-one-of="1"] { width: 100%; } [data-grid-of] > *[data-wide-two-of="1"] { width: 200%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="1"] > * { width: 100%; } [data-grid-of] > *[data-shallow-one-of="1"] { width: 100%; } [data-grid-of] > *[data-shallow-two-of="1"] { width: 200%; } } @media (max-width: 745px) { [data-mobile-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-mobile-one-of="2"] { width: 50%; } [data-grid-of] > *[data-mobile-two-of="2"] { width: 100%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-tablet-one-of="2"] { width: 50%; } [data-grid-of] > *[data-tablet-two-of="2"] { width: 100%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-tablet-up-one-of="2"] { width: 50%; } [data-grid-of] > *[data-tablet-up-two-of="2"] { width: 100%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-tablet-all-one-of="2"] { width: 50%; } [data-grid-of] > *[data-tablet-all-two-of="2"] { width: 100%; } } @media (min-width: 1024px) { [data-desktop-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-desktop-one-of="2"] { width: 50%; } [data-grid-of] > *[data-desktop-two-of="2"] { width: 100%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-desktop-plus-one-of="2"] { width: 50%; } [data-grid-of] > *[data-desktop-plus-two-of="2"] { width: 100%; } } @media (min-width: 1400px) { [data-wide-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-wide-one-of="2"] { width: 50%; } [data-grid-of] > *[data-wide-two-of="2"] { width: 100%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="2"] > * { width: 50%; } [data-grid-of] > *[data-shallow-one-of="2"] { width: 50%; } [data-grid-of] > *[data-shallow-two-of="2"] { width: 100%; } } @media (max-width: 745px) { [data-mobile-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-mobile-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-mobile-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-tablet-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-tablet-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-tablet-up-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-tablet-up-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-tablet-all-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-tablet-all-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 1024px) { [data-desktop-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-desktop-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-desktop-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-desktop-plus-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-desktop-plus-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 1400px) { [data-wide-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-wide-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-wide-two-of="3"] { width: 66.6666666667%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="3"] > * { width: 33.3333333333%; } [data-grid-of] > *[data-shallow-one-of="3"] { width: 33.3333333333%; } [data-grid-of] > *[data-shallow-two-of="3"] { width: 66.6666666667%; } } @media (max-width: 745px) { [data-mobile-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-mobile-one-of="4"] { width: 25%; } [data-grid-of] > *[data-mobile-two-of="4"] { width: 50%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-tablet-one-of="4"] { width: 25%; } [data-grid-of] > *[data-tablet-two-of="4"] { width: 50%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-tablet-up-one-of="4"] { width: 25%; } [data-grid-of] > *[data-tablet-up-two-of="4"] { width: 50%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-tablet-all-one-of="4"] { width: 25%; } [data-grid-of] > *[data-tablet-all-two-of="4"] { width: 50%; } } @media (min-width: 1024px) { [data-desktop-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-desktop-one-of="4"] { width: 25%; } [data-grid-of] > *[data-desktop-two-of="4"] { width: 50%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-desktop-plus-one-of="4"] { width: 25%; } [data-grid-of] > *[data-desktop-plus-two-of="4"] { width: 50%; } } @media (min-width: 1400px) { [data-wide-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-wide-one-of="4"] { width: 25%; } [data-grid-of] > *[data-wide-two-of="4"] { width: 50%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="4"] > * { width: 25%; } [data-grid-of] > *[data-shallow-one-of="4"] { width: 25%; } [data-grid-of] > *[data-shallow-two-of="4"] { width: 50%; } } @media (max-width: 745px) { [data-mobile-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-mobile-one-of="5"] { width: 20%; } [data-grid-of] > *[data-mobile-two-of="5"] { width: 40%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-tablet-one-of="5"] { width: 20%; } [data-grid-of] > *[data-tablet-two-of="5"] { width: 40%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-tablet-up-one-of="5"] { width: 20%; } [data-grid-of] > *[data-tablet-up-two-of="5"] { width: 40%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-tablet-all-one-of="5"] { width: 20%; } [data-grid-of] > *[data-tablet-all-two-of="5"] { width: 40%; } } @media (min-width: 1024px) { [data-desktop-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-desktop-one-of="5"] { width: 20%; } [data-grid-of] > *[data-desktop-two-of="5"] { width: 40%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-desktop-plus-one-of="5"] { width: 20%; } [data-grid-of] > *[data-desktop-plus-two-of="5"] { width: 40%; } } @media (min-width: 1400px) { [data-wide-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-wide-one-of="5"] { width: 20%; } [data-grid-of] > *[data-wide-two-of="5"] { width: 40%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="5"] > * { width: 20%; } [data-grid-of] > *[data-shallow-one-of="5"] { width: 20%; } [data-grid-of] > *[data-shallow-two-of="5"] { width: 40%; } } @media (max-width: 745px) { [data-mobile-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-mobile-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-mobile-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-tablet-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-tablet-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-tablet-up-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-tablet-up-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-tablet-all-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-tablet-all-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 1024px) { [data-desktop-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-desktop-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-desktop-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-desktop-plus-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-desktop-plus-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 1400px) { [data-wide-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-wide-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-wide-two-of="6"] { width: 33.3333333333%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="6"] > * { width: 16.6666666667%; } [data-grid-of] > *[data-shallow-one-of="6"] { width: 16.6666666667%; } [data-grid-of] > *[data-shallow-two-of="6"] { width: 33.3333333333%; } } @media (max-width: 745px) { [data-mobile-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-mobile-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-mobile-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-tablet-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-tablet-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-tablet-up-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-tablet-up-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-tablet-all-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-tablet-all-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 1024px) { [data-desktop-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-desktop-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-desktop-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-desktop-plus-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-desktop-plus-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 1400px) { [data-wide-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-wide-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-wide-two-of="7"] { width: 28.5714285714%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="7"] > * { width: 14.2857142857%; } [data-grid-of] > *[data-shallow-one-of="7"] { width: 14.2857142857%; } [data-grid-of] > *[data-shallow-two-of="7"] { width: 28.5714285714%; } } @media (max-width: 745px) { [data-mobile-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-mobile-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-mobile-two-of="8"] { width: 25%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-tablet-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-tablet-two-of="8"] { width: 25%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-tablet-up-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-tablet-up-two-of="8"] { width: 25%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-tablet-all-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-tablet-all-two-of="8"] { width: 25%; } } @media (min-width: 1024px) { [data-desktop-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-desktop-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-desktop-two-of="8"] { width: 25%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-desktop-plus-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-desktop-plus-two-of="8"] { width: 25%; } } @media (min-width: 1400px) { [data-wide-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-wide-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-wide-two-of="8"] { width: 25%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="8"] > * { width: 12.5%; } [data-grid-of] > *[data-shallow-one-of="8"] { width: 12.5%; } [data-grid-of] > *[data-shallow-two-of="8"] { width: 25%; } } @media (max-width: 745px) { [data-mobile-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-mobile-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-mobile-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-tablet-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-tablet-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-tablet-up-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-tablet-up-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-tablet-all-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-tablet-all-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 1024px) { [data-desktop-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-desktop-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-desktop-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-desktop-plus-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-desktop-plus-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 1400px) { [data-wide-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-wide-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-wide-two-of="9"] { width: 22.2222222222%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="9"] > * { width: 11.1111111111%; } [data-grid-of] > *[data-shallow-one-of="9"] { width: 11.1111111111%; } [data-grid-of] > *[data-shallow-two-of="9"] { width: 22.2222222222%; } } @media (max-width: 745px) { [data-mobile-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-mobile-one-of="10"] { width: 10%; } [data-grid-of] > *[data-mobile-two-of="10"] { width: 20%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-tablet-one-of="10"] { width: 10%; } [data-grid-of] > *[data-tablet-two-of="10"] { width: 20%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-tablet-up-one-of="10"] { width: 10%; } [data-grid-of] > *[data-tablet-up-two-of="10"] { width: 20%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-tablet-all-one-of="10"] { width: 10%; } [data-grid-of] > *[data-tablet-all-two-of="10"] { width: 20%; } } @media (min-width: 1024px) { [data-desktop-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-desktop-one-of="10"] { width: 10%; } [data-grid-of] > *[data-desktop-two-of="10"] { width: 20%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-desktop-plus-one-of="10"] { width: 10%; } [data-grid-of] > *[data-desktop-plus-two-of="10"] { width: 20%; } } @media (min-width: 1400px) { [data-wide-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-wide-one-of="10"] { width: 10%; } [data-grid-of] > *[data-wide-two-of="10"] { width: 20%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="10"] > * { width: 10%; } [data-grid-of] > *[data-shallow-one-of="10"] { width: 10%; } [data-grid-of] > *[data-shallow-two-of="10"] { width: 20%; } } @media (max-width: 745px) { [data-mobile-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-mobile-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-mobile-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-tablet-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-tablet-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-tablet-up-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-tablet-up-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-tablet-all-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-tablet-all-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 1024px) { [data-desktop-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-desktop-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-desktop-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-desktop-plus-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-desktop-plus-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 1400px) { [data-wide-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-wide-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-wide-two-of="11"] { width: 18.1818181818%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="11"] > * { width: 9.0909090909%; } [data-grid-of] > *[data-shallow-one-of="11"] { width: 9.0909090909%; } [data-grid-of] > *[data-shallow-two-of="11"] { width: 18.1818181818%; } } @media (max-width: 745px) { [data-mobile-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-mobile-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-mobile-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 746px) and (max-width: 1023px) { [data-tablet-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-tablet-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-tablet-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 746px) { [data-tablet-up-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-tablet-up-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-tablet-up-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 746px) and (max-width: 1024px) { [data-tablet-all-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-tablet-all-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-tablet-all-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 1024px) { [data-desktop-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-desktop-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-desktop-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 1200px) { [data-desktop-plus-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-desktop-plus-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-desktop-plus-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 1400px) { [data-wide-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-wide-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-wide-two-of="12"] { width: 16.6666666667%; } } @media (min-width: 1024px) and (max-height: 850px) { [data-shallow-grid-of="12"] > * { width: 8.3333333333%; } [data-grid-of] > *[data-shallow-one-of="12"] { width: 8.3333333333%; } [data-grid-of] > *[data-shallow-two-of="12"] { width: 16.6666666667%; } } .Icon { width: 24px; height: 24px; overflow: hidden; overflow: hidden; padding: 0; text-indent: 101%; white-space: nowrap; } .Icon.Icon--ratio { width: 100%; padding-top: 100%; } .Icon.Icon--fluid { padding-top: 0; } .Icon--glyph-phone { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-phone:before { display: inline-block; width: 100%; } .Icon--glyph-info { position: relative; text-indent: 0; font-size: 20px; } .Icon--glyph-info:before { display: inline-block; width: 100%; } .Icon--glyph-mail { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-mail:before { display: inline-block; width: 100%; } .Icon--glyph-search { position: relative; text-indent: 0; font-size: 20px; } .Icon--glyph-search:before { display: inline-block; width: 100%; } .Icon--glyph-zoom-in { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-zoom-in:before { display: inline-block; width: 100%; } .Icon--glyph-zoom-out { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-zoom-out:before { display: inline-block; width: 100%; } .Icon--glyph-location { position: relative; text-indent: 0; font-size: 20px; } .Icon--glyph-location:before { display: inline-block; width: 100%; } .Icon--glyph-arrow-left { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-arrow-left:before { display: inline-block; width: 100%; } .Icon--glyph-arrow-right { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-arrow-right:before { display: inline-block; width: 100%; } .Icon--glyph-arrow-up { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-arrow-up:before { display: inline-block; width: 100%; } .Icon--glyph-arrow-down { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-arrow-down:before { display: inline-block; width: 100%; } .Icon--glyph-plus { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-plus:before { display: inline-block; width: 100%; } .Icon--glyph-minus { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-minus:before { display: inline-block; width: 100%; } .Icon--glyph-check { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-check:before { display: inline-block; width: 100%; } .Icon--glyph-cross { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-cross:before { display: inline-block; width: 100%; } .Icon--glyph-inbox { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-inbox:before { display: inline-block; width: 100%; } .Icon--glyph-open { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-open:before { display: inline-block; width: 100%; } .Icon--glyph-ellipsis { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-ellipsis:before { display: inline-block; width: 100%; } .Icon--glyph-location2 { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-location2:before { display: inline-block; width: 100%; } .Icon--glyph-play { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-play:before { display: inline-block; width: 100%; } .Icon--glyph-pause { position: relative; text-indent: 0; font-size: 24px; } .Icon--glyph-pause:before { display: inline-block; width: 100%; } /** @define Image */ /** * Image */ .Image { overflow: hidden; } .Image > * { transition: opacity 0.8s 0s ease; } .Image.ui-lazyImage > * { opacity: 0; } .Image.ui-lazyImage--loaded > * { opacity: 1; } .Image.ui-lazyImage--loaded.is-invisible > * { transition: opacity 0.5s ease; opacity: 0; } .Image--fixed > * { background-attachment: fixed; } .Image--fit > * { background-size: contain; background-repeat: no-repeat; } .Link { display: inline-block; } .Link .Link-body { display: inline-block; vertical-align: middle; } .Link--info:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--mail:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--location:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--phone:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--cross:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--arrow-right:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--arrow-left:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--arrow-up:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--arrow-down:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--play:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--search:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--muted:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--not-muted:before { width: 24px; height: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-phone:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-info:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-mail:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-search:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-zoom-in:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-zoom-out:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-location:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-arrow-left:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-arrow-right:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-arrow-up:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-arrow-down:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-plus:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-minus:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-check:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-cross:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-inbox:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-open:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-ellipsis:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-location2:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-play:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Link--glyph-pause:before { width: 24px; height: 24px; line-height: 24px; font-size: 24px; vertical-align: middle; margin-right: 10px; } .Logo { padding-top: 66%; width: 100%; background-position: center center; background-repeat: no-repeat; background-size: 100% auto; } .Logo a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .Logo .Logo-body { display: none; } /** @define Overlay */ /** * Base overlay component */ .Overlay { position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; overflow: hidden; /* Fade-Out Effect */ } .Overlay.Overlay--lightbox { position: fixed; z-index: 9999; } .Overlay.is-active { visibility: visible; opacity: 1; transition: opacity 0.3s ease; } .Overlay.is-inactive { visibility: visible; pointer-events: none; opacity: 0; top: -9999px; overflow: hidden; height: 0; transition: visibility 0s 0.4s, top 0s 0.4s,height 0s 0.4s, opacity 0.4s ease; } .Overlay-head { position: absolute; top: 0; left: 0; width: 100%; height: auto; text-align: right; padding: 10px; z-index: 5; } .Overlay-body { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 100%; white-space: nowrap; text-align: center; } .Overlay-body > * { white-space: normal; } .Overlay-content { width: 100%; padding: 10px; display: inline-block; text-align: left; } .Scroller .Scroller-body { z-index: 1; } .Scroller .Scroller-head { position: absolute; top: 0; left: 0; width: 100%; } .Scroller .Scroller-foot { position: absolute; bottom: 0; left: 0; width: 100%; } /* .Section - Base section component. Uses setting in $base-sections to create pre-defined Section components - Sections have no inherent padding, but it is assumed that their Section-container does <section class="Section"> <div class="Section-container"> <hgroup class="Section-head"></hgroup> <div class="Section-body"></div> <div class="Section-foot"></div> </div> </section> */ .Section { position: relative; transition: all 0.4s ease; background: transparent; color: #000; } .Section h1, .Section h2, .Section h3, .Section h4, .Section h5 { font-family: "Unica77 LL", "Helvetica", Arial, sans-serif; } .Section p, .Section ul { font-family: "Unica77 LL", "Helvetica", Arial, sans-serif; } .Section .Section-container { padding: 10px; max-width: none; margin: 0 auto; } .Section .Section-body { position: relative; } .Section .Image { background: #EEE; } .Section a { color: #000; } @media (min-width: 745px) { .Section .is-active, .Section .is-active > * { color: #ff0000; }} .Section--modifier { position: relative; background: #000; color: #fff; } .Section--modifier h1, .Section--modifier h2, .Section--modifier h3, .Section--modifier h4, .Section--modifier h5 { font-family: monospace; } .Section--modifier p, .Section--modifier ul { font-family: "Unica77 LL", "Helvetica", Arial, sans-serif; } .Section--modifier .Section-container { padding: 10px; max-width: none; margin: 0 auto; } .Section--modifier .Section-body { position: relative; } .Section--modifier .Image { background: #fff; } .Section--modifier a { color: #e3e3e3; } .Section--modifier .is-active, .Section--modifier .is-active > * { color: #ff0000; } .Site--modified .Section--modifier { position: relative; background: #000; color: #fff; } .Site--modified .Section--modifier .Section-container { margin: 0 auto; } .Site--modified .Section--modifier .Section-body { position: relative; } .Site *[data-box-mode="fluid"] { padding-top: 0; } .Site-content--mobile { display: none; } @media (max-width: 745px) { .Site-content--desktop { display: none; } .Site-content--mobile { display: block; } } .Slider { position: relative; width: 100%; padding-top: 66.6666666667%; overflow: visible; } .Slider.Slider--fluid { padding-top: 0; overflow: visible; } .Slider-body { overflow: hidden; } .Slider-body > * { height: 100% !important; width: 100% !important; } .Slider-pages, .Slider-info { height: auto; position: absolute; top: auto; bottom: 0; left: 0; padding: 10px; } .Slider-pages { text-align: right; } .Slider-arrow { width: 30%; cursor: pointer; padding: 10px; } .Slider-arrow--left { left: 0; top: 0; } .Slider-arrow--right { left: auto; right: 0; top: 0; text-align: right; } .Slider-arrow { overflow: hidden; padding: 0; text-indent: 101%; white-space: nowrap; overflow: hidden; width: 33%; } .Slider-arrow a { display: none; } .Slider-arrow:after { width: 24px; height: 24px; position: absolute; top: 50%; transform: translateY(-50%); } .Site--no-touch .Slider-arrow:after { display: none; } .Site--no-touch .Slider-arrow:hover:after { display: block; } .Slider-arrow--right:after { right: 10px; } .Slider-arrow--left:after { left: 10px; } /** @define Video */ /** * Base video component */ .Video { width: 100%; padding-top: 56.25%; } .Video.Video--fluid { padding-top: 0; } .Video-poster { cursor: pointer; z-index: 3; transition: opacity 0.4s ease; } .is-playing .Video-poster { pointer-events: none; opacity: 0; } .Video-poster:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 15%; height: 50%; } .Site--no-touch .Video-poster:hover:after { opacity: 0; } .Video .mejs-poster { background-size: cover; } .Video .mejs-overlay-loading { width: 20px; height: 20px; vertical-align: middle; height: 20px; width: 20px; transform-origin: 50% 50%; animation: pulse 1.5s ease infinite; display: block; border-radius: 50%; background: #e3e3e3; box-sizing: border-box; overflow: hidden; vertical-align: middle; position: absolute; top: 50%; left: 50%; margin-left: -10px; margin-top: -10px; } .Video .mejs-overlay-loading span { display: none !important; } .Video .mejs-overlay-loading:before { content: ''; width: 100%; height: 100%; border-radius: 50%; background-color: #e3e3e3; } .Video .mejs-controls { display: none !important; } .Video.Video--controls .mejs-controls { display: block !important; } .Video.is-playing { cursor: pointer, auto; } .Video .mejs-overlay-play { cursor: pointer, auto; } .Site--no-touch .Video .mejs-overlay-play:hover .mejs-overlay-button { opacity: 0; } .Video .mejs-overlay-play .mejs-overlay-button { display: block; background: none !important; margin: 0; transform: translate(-50%, -50%); width: 15%; padding-top: 15%; height: 0; overflow: hidden; transition: all 0.4s ease; } .Video .mejs-overlay-play .mejs-overlay-button:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /** * JS Components */ .mejs-offscreen { clip: rect(1px 1px 1px 1px); clip: rect(1px, 1px, 1px, 1px); clip-path: polygon(0px 0, 0 0, 0 0, 0 0); position: absolute !important; height: 1px; width: 1px; overflow: hidden; } .mejs-container { position: relative; background: #000; font-family: Helvetica,Arial; text-align: left; vertical-align: top; text-indent: 0; } .mejs-container:focus { outline: 0; } .me-plugin { position: absolute; } .mejs-embed, .mejs-embed body { width: 100%; height: 100%; margin: 0; padding: 0; background: #000; overflow: hidden; } .mejs-fullscreen { overflow: hidden !important; } .mejs-container-fullscreen { position: fixed; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; z-index: 1000; } .mejs-container-fullscreen .mejs-mediaelement, .mejs-container-fullscreen video { width: 100%; height: 100%; } .mejs-clear { clear: both; } .mejs-background { position: absolute; top: 0; left: 0; } .mejs-mediaelement { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .mejs-poster { position: absolute; top: 0; left: 0; background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; } :root .mejs-poster img { display: none; } .mejs-poster img { border: 0; padding: 0; border: 0; } .mejs-overlay { position: absolute; top: 0; left: 0; } .mejs-overlay-play { cursor: pointer; } .mejs-overlay-button { position: absolute; top: 50%; left: 50%; width: 100px; height: 100px; margin: -50px 0 0 -50px; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/bigplay.svg) no-repeat; } .no-svg .mejs-overlay-button { background-image: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/bigplay.png); } .mejs-overlay:hover .mejs-overlay-button { background-position: 0 -100px; } .mejs-overlay-loading { position: absolute; top: 50%; left: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; background: #333; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(0, 0, 0, 0.9); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 50, 50, 0.9)), to(rgba(0, 0, 0, 0.9))); background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: -o-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); background: linear-gradient(rgba(50, 50, 50, 0.9), rgba(0, 0, 0, 0.9)); } .mejs-overlay-loading span { display: block; width: 80px; height: 80px; background: transparent url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/loading.gif) 50% 50% no-repeat; } .mejs-container .mejs-controls { position: absolute; list-style-type: none; margin: 0; padding: 0; bottom: 0; left: 0; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(0, 0, 0, 0.7); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7))); background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); height: 30px; width: 100%; } .mejs-container .mejs-controls div { list-style-type: none; background-image: none; display: block; float: left; margin: 0; padding: 0; width: 26px; height: 26px; font-size: 11px; line-height: 11px; font-family: Helvetica,Arial; border: 0; } .mejs-controls .mejs-button button { cursor: pointer; display: block; font-size: 0; line-height: 0; text-decoration: none; margin: 7px 5px; padding: 0; position: absolute; height: 16px; width: 16px; border: 0; background: transparent url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/controls.svg) no-repeat; } .no-svg .mejs-controls .mejs-button button { background-image: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/controls.png); } .mejs-controls .mejs-button button:focus { outline: dotted 1px #999; } .mejs-container .mejs-controls .mejs-time { color: #fff; display: block; height: 17px; width: auto; padding: 10px 3px 0; overflow: hidden; text-align: center; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } .mejs-container .mejs-controls .mejs-time a { color: #fff; font-size: 11px; line-height: 12px; display: block; float: left; margin: 1px 2px 0 0; width: auto; } .mejs-controls .mejs-play button { background-position: 0 0; } .mejs-controls .mejs-pause button { background-position: 0 -16px; } .mejs-controls .mejs-stop button { background-position: -112px 0; } .mejs-controls div.mejs-time-rail { direction: ltr; width: 200px; padding-top: 5px; } .mejs-controls .mejs-time-rail span, .mejs-controls .mejs-time-rail a { display: block; position: absolute; width: 180px; height: 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: pointer; } .mejs-controls .mejs-time-rail .mejs-time-total { margin: 5px; background: #333; background: rgba(50, 50, 50, 0.8); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8))); background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); } .mejs-controls .mejs-time-rail .mejs-time-buffering { width: 100%; background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, rgba(255, 255, 255, 0.15)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.15)), color-stop(0.75, rgba(255, 255, 255, 0.15)), color-stop(0.75, transparent), to(transparent)); background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); -webkit-background-size: 15px 15px; -moz-background-size: 15px 15px; -o-background-size: 15px 15px; background-size: 15px 15px; -webkit-animation: buffering-stripes 2s linear infinite; -moz-animation: buffering-stripes 2s linear infinite; -ms-animation: buffering-stripes 2s linear infinite; -o-animation: buffering-stripes 2s linear infinite; animation: buffering-stripes 2s linear infinite; } @-webkit-keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } @-moz-keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } @-ms-keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } @-o-keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } @keyframes buffering-stripes { from { background-position: 0 0; } to { background-position: 30px 0; } } .mejs-controls .mejs-time-rail .mejs-time-loaded { background: #3caac8; background: rgba(60, 170, 200, 0.8); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(44, 124, 145, 0.8)), to(rgba(78, 183, 212, 0.8))); background: -webkit-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: -moz-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: -o-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: -ms-linear-gradient(top, rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); background: linear-gradient(rgba(44, 124, 145, 0.8), rgba(78, 183, 212, 0.8)); width: 0; } .mejs-controls .mejs-time-rail .mejs-time-current { background: #fff; background: rgba(255, 255, 255, 0.8); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); width: 0; } .mejs-controls .mejs-time-rail .mejs-time-handle { display: none; position: absolute; margin: 0; width: 10px; background: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; border: solid 2px #333; top: -2px; text-align: center; } .mejs-controls .mejs-time-rail .mejs-time-float { position: absolute; display: none; background: #eee; width: 36px; height: 17px; border: solid 1px #333; top: -26px; margin-left: -18px; text-align: center; color: #111; } .mejs-controls .mejs-time-rail .mejs-time-float-current { margin: 2px; width: 30px; display: block; text-align: center; left: 0; } .mejs-controls .mejs-time-rail .mejs-time-float-corner { position: absolute; display: block; width: 0; height: 0; line-height: 0; border: solid 5px #eee; border-color: #eee transparent transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; top: 15px; left: 13px; } .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float { width: 48px; } .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-current { width: 44px; } .mejs-long-video .mejs-controls .mejs-time-rail .mejs-time-float-corner { left: 18px; } .mejs-controls .mejs-fullscreen-button button { background-position: -32px 0; } .mejs-controls .mejs-unfullscreen button { background-position: -32px -16px; } .mejs-controls .mejs-mute button { background-position: -16px -16px; } .mejs-controls .mejs-unmute button { background-position: -16px 0; } .mejs-controls .mejs-volume-button { position: relative; } .mejs-controls .mejs-volume-button .mejs-volume-slider { display: none; height: 115px; width: 25px; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(50, 50, 50, 0.7); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; top: -115px; left: 0; z-index: 1; position: absolute; margin: 0; } .mejs-controls .mejs-volume-button:hover { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; } .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-total { position: absolute; left: 11px; top: 8px; width: 2px; height: 100px; background: #ddd; background: rgba(255, 255, 255, 0.5); margin: 0; } .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-current { position: absolute; left: 11px; top: 8px; width: 2px; height: 100px; background: #ddd; background: rgba(255, 255, 255, 0.9); margin: 0; } .mejs-controls .mejs-volume-button .mejs-volume-slider .mejs-volume-handle { position: absolute; left: 4px; top: -3px; width: 16px; height: 6px; background: #ddd; background: rgba(255, 255, 255, 0.9); cursor: N-resize; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; margin: 0; } .mejs-controls a.mejs-horizontal-volume-slider { height: 26px; width: 56px; position: relative; display: block; float: left; vertical-align: middle; } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total { position: absolute; left: 0; top: 11px; width: 50px; height: 8px; margin: 0; padding: 0; font-size: 1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #333; background: rgba(50, 50, 50, 0.8); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(30, 30, 30, 0.8)), to(rgba(60, 60, 60, 0.8))); background: -webkit-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -moz-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -o-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: -ms-linear-gradient(top, rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); background: linear-gradient(rgba(30, 30, 30, 0.8), rgba(60, 60, 60, 0.8)); } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current { position: absolute; left: 0; top: 11px; width: 50px; height: 8px; margin: 0; padding: 0; font-size: 1px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #fff; background: rgba(255, 255, 255, 0.8); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255, 255, 255, 0.9)), to(rgba(200, 200, 200, 0.8))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -o-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: -ms-linear-gradient(top, rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); background: linear-gradient(rgba(255, 255, 255, 0.9), rgba(200, 200, 200, 0.8)); } .mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { display: none; } .mejs-controls .mejs-captions-button { position: relative; } .mejs-controls .mejs-captions-button button { background-position: -48px 0; } .mejs-controls .mejs-captions-button .mejs-captions-selector { visibility: hidden; position: absolute; bottom: 26px; right: -51px; width: 85px; height: 100px; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; padding: 10px 10px 0; overflow: hidden; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .mejs-controls .mejs-captions-button:hover .mejs-captions-selector { visibility: visible; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul li { margin: 0 0 6px; padding: 0; list-style-type: none !important; display: block; color: #fff; overflow: hidden; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul li input { clear: both; float: left; margin: 3px 3px 0 5px; } .mejs-controls .mejs-captions-button .mejs-captions-selector ul li label { width: 55px; float: left; padding: 4px 0 0; line-height: 15px; font-family: helvetica,arial; font-size: 10px; } .mejs-controls .mejs-captions-button .mejs-captions-translations { font-size: 10px; margin: 0 0 5px; } .mejs-chapters { position: absolute; top: 0; left: 0; -xborder-right: solid 1px #fff; width: 10000px; z-index: 1; } .mejs-chapters .mejs-chapter { position: absolute; float: left; background: #222; background: rgba(0, 0, 0, 0.7); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(50, 50, 50, 0.7)), to(rgba(0, 0, 0, 0.7))); background: -webkit-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -moz-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -o-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: -ms-linear-gradient(top, rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); background: linear-gradient(rgba(50, 50, 50, 0.7), rgba(0, 0, 0, 0.7)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#323232, endColorstr=#000000); overflow: hidden; border: 0; } .mejs-chapters .mejs-chapter .mejs-chapter-block { font-size: 11px; color: #fff; padding: 5px; display: block; border-right: solid 1px #333; border-bottom: solid 1px #333; cursor: pointer; } .mejs-chapters .mejs-chapter .mejs-chapter-block-last { border-right: 0; } .mejs-chapters .mejs-chapter .mejs-chapter-block:hover { background: #666; background: rgba(102, 102, 102, 0.7); background: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(102, 102, 102, 0.7)), to(rgba(50, 50, 50, 0.6))); background: -webkit-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: -moz-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: -o-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: -ms-linear-gradient(top, rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); background: linear-gradient(rgba(102, 102, 102, 0.7), rgba(50, 50, 50, 0.6)); filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666, endColorstr=#323232); } .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title { font-size: 12px; font-weight: 700; display: block; white-space: nowrap; text-overflow: ellipsis; margin: 0 0 3px; line-height: 12px; } .mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan { font-size: 12px; line-height: 12px; margin: 3px 0 4px; display: block; white-space: nowrap; text-overflow: ellipsis; } .mejs-captions-layer { position: absolute; bottom: 0; left: 0; text-align: center; line-height: 20px; font-size: 16px; color: #fff; } .mejs-captions-layer a { color: #fff; text-decoration: underline; } .mejs-captions-layer[lang=ar] { font-size: 20px; font-weight: 400; } .mejs-captions-position { position: absolute; width: 100%; bottom: 15px; left: 0; } .mejs-captions-position-hover { bottom: 35px; } .mejs-captions-text { padding: 3px 5px; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(20, 20, 20, 0.5); white-space: pre-wrap; } .me-cannotplay a { color: #fff; font-weight: 700; } .me-cannotplay span { padding: 15px; display: block; } .mejs-controls .mejs-loop-off button { background-position: -64px -16px; } .mejs-controls .mejs-loop-on button { background-position: -64px 0; } .mejs-controls .mejs-backlight-off button { background-position: -80px -16px; } .mejs-controls .mejs-backlight-on button { background-position: -80px 0; } .mejs-controls .mejs-picturecontrols-button { background-position: -96px 0; } .mejs-contextmenu { position: absolute; width: 150px; padding: 10px; border-radius: 4px; top: 0; left: 0; background: #fff; border: solid 1px #999; z-index: 1001; } .mejs-contextmenu .mejs-contextmenu-separator { height: 1px; font-size: 0; margin: 5px 6px; background: #333; } .mejs-contextmenu .mejs-contextmenu-item { font-family: Helvetica,Arial; font-size: 12px; padding: 4px 6px; cursor: pointer; color: #333; } .mejs-contextmenu .mejs-contextmenu-item:hover { background: #2C7C91; color: #fff; } .mejs-controls .mejs-sourcechooser-button { position: relative; } .mejs-controls .mejs-sourcechooser-button button { background-position: -128px 0; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector { visibility: hidden; position: absolute; bottom: 26px; right: -10px; width: 130px; height: 100px; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; padding: 10px; overflow: hidden; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li { margin: 0 0 6px; padding: 0; list-style-type: none !important; display: block; color: #fff; overflow: hidden; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input { clear: both; float: left; margin: 3px 3px 0 5px; } .mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label { width: 100px; float: left; padding: 4px 0 0; line-height: 15px; font-family: helvetica,arial; font-size: 10px; } .mejs-postroll-layer { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(50, 50, 50, 0.7); z-index: 1000; overflow: hidden; } .mejs-postroll-layer-content { width: 100%; height: 100%; } .mejs-postroll-close { position: absolute; right: 0; top: 0; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(50, 50, 50, 0.7); color: #fff; padding: 4px; z-index: 100; cursor: pointer; } div.mejs-speed-button { width: 46px !important; position: relative; } .mejs-controls .mejs-button.mejs-speed-button button { background: transparent; width: 36px; font-size: 11px; line-height: normal; color: #fff; } .mejs-controls .mejs-speed-button .mejs-speed-selector { display: none; position: absolute; top: -100px; left: -10px; width: 60px; height: 100px; background: url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/background.png); background: rgba(50, 50, 50, 0.7); border: solid 1px transparent; padding: 0; overflow: hidden; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .mejs-controls .mejs-speed-button:hover > .mejs-speed-selector { display: block; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li label.mejs-speed-selected { color: #21f8f8; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul { margin: 0; padding: 0; display: block; list-style-type: none !important; overflow: hidden; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li { margin: 0 0 6px; padding: 0 10px; list-style-type: none !important; display: block; color: #fff; overflow: hidden; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li input { clear: both; float: left; margin: 3px 3px 0 5px; display: none; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li label { width: 60px; float: left; padding: 4px 0 0; line-height: 15px; font-family: helvetica,arial; font-size: 11.5px; color: #fff; margin-left: 5px; cursor: pointer; } .mejs-controls .mejs-speed-button .mejs-speed-selector ul li:hover { background-color: #c8c8c8 !important; background-color: rgba(255, 255, 255, 0.4) !important; } .mejs-controls .mejs-button.mejs-jump-forward-button { background: transparent url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/jumpforward.png) no-repeat; background-position: 3px 3px; } .mejs-controls .mejs-button.mejs-jump-forward-button button { background: transparent; font-size: 9px; line-height: normal; color: #fff; } .mejs-controls .mejs-button.mejs-skip-back-button { background: transparent url(/ui/js/vendor/sitejs/lib/components/ui-mediaelement/src/skipback.png) no-repeat; background-position: 3px 3px; } .mejs-controls .mejs-button.mejs-skip-back-button button { background: transparent; font-size: 9px; line-height: normal; color: #fff; } .ui-mediaelement { width: 100%; padding-top: 57.25%; padding-top: 56.25%; position: relative; display: block; overflow: hidden; } .ui-mediaelement > .mejs-container { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; display: block; background: transparent; } .ui-mediaelement > .mejs-container .mejs-layers, .ui-mediaelement > .mejs-container .mejs-layer { width: 100% !important; height: 100% !important; } .ui-mediaelement > .mejs-container .mejs-mediaelement { width: 100% !important; height: 100% !important; } .ui-mediaelement > .mejs-container .mejs-mediaelement * { width: 100% !important; height: 100% !important; } /* v1.0.5 */ /* Core RS CSS file. 95% of time you shouldn't change anything here. */ .royalSlider { width: 600px; height: 400px; position: relative; direction: ltr; } .royalSlider > * { float: left; } .rsWebkit3d .rsSlide { -webkit-transform: translateZ(0); } .rsWebkit3d .rsSlide, .rsWebkit3d .rsContainer, .rsWebkit3d .rsThumbs, .rsWebkit3d .rsPreloader, .rsWebkit3d img, .rsWebkit3d .rsOverflow, .rsWebkit3d .rsBtnCenterer, .rsWebkit3d .rsAbsoluteEl, .rsWebkit3d .rsABlock, .rsWebkit3d .rsLink { -webkit-backface-visibility: hidden; } .rsFade.rsWebkit3d .rsSlide, .rsFade.rsWebkit3d img, .rsFade.rsWebkit3d .rsContainer { -webkit-transform: none; } .rsOverflow { width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rsVisibleNearbyWrap { width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rsVisibleNearbyWrap .rsOverflow { position: absolute; left: 0; top: 0; } .rsContainer { position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rsArrow, .rsThumbsArrow { cursor: pointer; } .rsThumb { float: left; position: relative; } .rsArrow, .rsNav, .rsThumbsArrow { opacity: 1; -webkit-transition: opacity 0.3s linear; -moz-transition: opacity 0.3s linear; -o-transition: opacity 0.3s linear; transition: opacity 0.3s linear; } .rsHidden { opacity: 0; visibility: hidden; -webkit-transition: visibility 0s linear 0.3s,opacity 0.3s linear; -moz-transition: visibility 0s linear 0.3s,opacity 0.3s linear; -o-transition: visibility 0s linear 0.3s,opacity 0.3s linear; transition: visibility 0s linear 0.3s,opacity 0.3s linear; } .rsGCaption { width: 100%; float: left; text-align: center; } /* Fullscreen options, very important ^^ */ .royalSlider.rsFullscreen { position: fixed !important; height: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 2147483647 !important; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; } .royalSlider .rsSlide.rsFakePreloader { opacity: 1 !important; -webkit-transition: 0s; -moz-transition: 0s; -o-transition: 0s; transition: 0s; display: none; } .rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100%; } .royalSlider.rsAutoHeight, .rsAutoHeight .rsSlide { height: auto; } .rsContent { width: 100%; height: 100%; position: relative; } .rsPreloader { position: absolute; z-index: 0; } .rsNav { -moz-user-select: -moz-none; -webkit-user-select: none; user-select: none; } .rsNavItem { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25); } .rsThumbs { cursor: pointer; position: relative; overflow: hidden; float: left; z-index: 22; } .rsTabs { float: left; background: none !important; } .rsTabs, .rsThumbs { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .rsVideoContainer { /*left: 0; top: 0; position: absolute;*/ /*width: 100%; height: 100%; position: absolute; left: 0; top: 0; float: left;*/ width: auto; height: auto; line-height: 0; position: relative; } .rsVideoFrameHolder { position: absolute; left: 0; top: 0; background: #141414; opacity: 0; -webkit-transition: .3s; } .rsVideoFrameHolder.rsVideoActive { opacity: 1; } .rsVideoContainer iframe, .rsVideoContainer video, .rsVideoContainer embed, .rsVideoContainer .rsVideoObj { position: absolute; z-index: 50; left: 0; top: 0; width: 100%; height: 100%; } /* ios controls over video bug, shifting video */ .rsVideoContainer.rsIOSVideo iframe, .rsVideoContainer.rsIOSVideo video, .rsVideoContainer.rsIOSVideo embed { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-right: 44px; } .rsABlock { left: 0; top: 0; position: absolute; z-index: 15; } img.rsImg { max-width: none; } .grab-cursor { cursor: url(/ui/css/grab.png) 8 8, move; } .grabbing-cursor { cursor: url(/ui/css/grabbing.png) 8 8, move; } .rsNoDrag { cursor: auto; } .rsLink { left: 0; top: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 20; background: url(/ui/css/blank.gif); } /** * Components */ .List--details > * { width: 33.333%; } @media (max-width: 745px) { .List--details > * { width: 100%; } } @media (max-width: 745px) { .List--instagram { margin-top: 5px; } } .List--instagram > * { width: 20%; } @media (max-width: 745px) { .List--instagram > * { width: 33%; margin-bottom: 5px; } } .Grid--social .Grid-head { width: 16.666%; } @media (max-width: 745px) { .Grid--social .Grid-head { width: 100%; } } .Grid--social .Grid-body { width: 83.333%; } @media (max-width: 745px) { .Grid--social .Grid-body { width: 100%; } } .Content--introLogo { font-family: "b" !important; line-height: 100%; font-size: 20px; font-size: 1.1111111111rem; } .Loader.Loader--projects:after, .Chars .char1:after, .Chars--logo .char1:after { font-family: "acute" !important; line-height: 100%; font-size: 20px; font-size: 1.1111111111rem; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /** @define Grid */ /** * Grid */ .Grid--social:first-child { margin-bottom: 20px; } /** @define List */ /** * List */ .List--mobile { display: none; } @media (max-width: 745px) { .List--mobile { display: block; } } .List--toggles { padding-left: 85px; display: inline-block; } @media (min-width: 746px) { .List--toggles { padding-left: 47px; } } .List--toggles li { display: inline-block; position: relative; padding-right: 20px; } .List--toggles li.is-active { display: none; } .List--toggles#project_toggles li { box-sizing: content-box; width: 50px; overflow: visible; } @media (max-width: 745px) { .List--toggles#project_toggles li { width: 42px; } } .List--sections { display: inline-block; } .List--sections li { display: inline-block; position: relative; padding-right: 20px; } .List--sections li.is-active { color: #ff0000; } .List--sections#project_sections { transition: opacity 0.4s ease; opacity: 1; } @media (max-width: 745px) { .List--sections#project_sections { display: none; } } .Site.Site--textActive .List--sections#project_sections { opacity: 0; pointer-events: none; } @media (max-width: 745px) { .Site--home #filters { display: none; } } @media (max-width: 745px) { .List--nav { padding-left: 49px; opacity: 1; pointer-events: none; } .Site--menuActive .List--nav { opacity: 1; pointer-events: all; } .Site--intro .List--nav { display: none; } } .List--nav li { display: inline-block; position: relative; padding-right: 20px; } @media (max-width: 745px) { .List--nav li a { font-size: 18px; font-size: 1rem; } } .List--nav li ul { position: absolute; top: 0; left: 100%; white-space: nowrap; } .List--nav #filters { transition: opacity 0.4s ease; opacity: 1; } .List--nav #navTrigger { position: relative; } .List--nav #navTrigger:after { content: ''; background: url(/ui/img/icons/arrow-filters.svg); background-repeat: no-repeat; background-size: 100% auto; width: 7px; height: 11px; display: inline-block; margin-left: 5px; vertical-align: middle; position: absolute; top: 50%; right: -15px; transform: translateY(-50%); } .List--nav #navTrigger.is-active { color: black; } .List--nav a.is-active + #filters { opacity: 1; color: #ff0000; } .List--nav li.is-not-selected { opacity: 1; } .List--nav li a { color: black; transition: color 0.5s; } .List--nav li.is-selected { opacity: 1; } .List--nav li.is-selected a { color: #ff0000; transition: color 0.5s; } .List--navMobile { position: relative; display: none; } @media (max-width: 745px) { .List--navMobile { position: fixed; min-height: 100vh; background-color: black; display: block; transform: translateY(-105%); top: 0; left: 0; width: 100%; height: auto; z-index: 10; transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); } .Site--menuActive .List--navMobile { transform: translateY(0%); } .List--navMobile .List-item { background-color: white; padding: 8px 0px 8px 10px; display: block; width: 100%; background: white; color: black !important; } .List--navMobile .List-item > a{ display: inline-block; padding-left: 75px; } .List--navMobile .List-item:first-child { padding-top: 9px; } .List--navMobile .List-item a { font-size: 18px; font-size: 1rem; } .List--navMobile .List-item.List-item--odd { background-color: black !important; } .List--navMobile .List-item.List-item--odd a { color: white; } } .List--navMobile .List-item .Content--details { } .List--navMobile .List-item .Content--details h4 { color: white; } .List--icons { display: flex; text-align: right; } .List--icons li { padding-left: 20px; display: inline-block; text-align: right; } .List--icons li.List-item--info + li { padding-left: 15px; } .List--icons li.List-item--mail + li { padding-left: 18px; } .List--icons li.List-item--mail { display: none; } .List--icons li.List-item--phone { display: none; } .List--icons li.List-item--search { padding-left: 17px; } @media (max-width: 745px) { .List--icons li.List-item--search { display: none; } .List--icons li.List-item--mail { display: inline-block; } .List--icons li.List-item--phone { display: inline-block; } } @media (max-width: 745px) { .List--icons { display: block; white-space: nowrap; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); line-height: 100%; } .List--icons li { padding-left: 60px; text-align: left; display: inline-block; } .List--icons li:nth-child(2) { padding-left: 0; } .List--icons li.List-item--info + li { padding-left: 55px; } .List--icons li.List-item--mail + li { padding-left: 58px; } } .List--logos .List-item { width: 25%; padding-bottom: 5px; } @media (min-width: 746px) { .List--logos .List-item { width: 20%; } } @media (min-width: 1400px) { .List--logos .List-item { width: 16.66667%; } } .List--masonry .List-item.List-item--small .Item-body { /* margin-top: -1px; */ } .List--masonry .List-item { float: left; padding-bottom: 5px; width: 100%; } .List--masonry .List-item.List-item--large, .List--masonry .List-item.List-item--half { width: 33.333%; } @media (max-width: 745px) { .List--masonry .List-item.List-item--large, .List--masonry .List-item.List-item--half { width: 100%; } } .List--masonry .List-item.List-item--small, .List--masonry .List-item.List-item--quarter { width: 16.666%; } @media (max-width: 745px) { .List--masonry .List-item.List-item--small, .List--masonry .List-item.List-item--quarter { width: 50%; } } .List--masonry .List-item.List-item--half { width: 50%; } @media (max-width: 745px) { .List--masonry .List-item.List-item--half { width: 100%; } } .List--masonry .List-item.List-item--quarter { width: 25%; } @media (max-width: 745px) { .List--masonry .List-item.List-item--quarter { width: 50%; } } .Template--search .List--masonry .List-item.List-item--small { width: 20%; } .List--masonry .List-item.List-item--iframe { z-index: 99999; padding: 0; margin-left: 5px; } .List--masonry .List-item.List-item--iframe iframe { width: 100%; height: 100%; } @media (max-width: 745px) { .List--instagram .Image { opacity: 1 !important; } } .List--footerNav { list-style: none; } .List--footerNav li { line-height: 100%; } .Section.Section--text .Section-container { padding: 0 10px 10px 10px; } .Section.Section--foot .Section-container { padding: 10px 15px; } .Section.Section--search .Section-container { padding: 0px 30px; } @media (max-width: 745px) { .Section.Section--search .Section-container { padding: 0px 10px; margin-top: 10px; } } .Section.Section--information .Section-container { padding: 0 10px 8px 10px; } @media (min-width: 746px) { .Section.Section--information .Section-container { padding: 0 80px 20px 40%; } } @media (min-width: 746px) and (max-width: 1023px) { .Section.Section--information .Section-container { padding: 0 20px 20px 20px; } } @media (min-width: 1400px) { .Section.Section--information .Section-container { padding: 0 80px 20px 45%; } } .Section.Section--information .Section-container a { color: inherit; } .Section.Section--information .Section-container .Section-container-head { width: 100%; position: relative; margin-top: 8px; } @media (min-width: 746px) { .Section.Section--information .Section-container .Section-container-head { margin-top: 20px; } } .Section.Section--information .Section-container .Section-container-head a:after { content: ''; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%) rotate(0deg); background: url(/ui/img/icons/lightPlus.svg); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; width: 32px; height: 32px; transform-origin: 50% 50%; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); } @media (max-width: 746px) { .Section.Section--information .Section-container .Section-container-head a:after { width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg); background: url(/ui/img/icons/searchCloseMobile.svg); } } .Section.Section--information .Section-container .Section-container-head a:hover { color: inherit; } .Section.Section--information .Section-container .Section-container-head.ui-state-active a:after { transform: translateY(-50%) rotate(45deg); transform-origin: 50% 50%; } @media (max-width: 746px) { .Section.Section--information .Section-container .Section-container-head.ui-state-active a:after { transform: translateY(-50%) rotate(90deg); transform-origin: 50% 50%; } } .Section.Section--information .Section-container .Section-container-body { padding-top: 20px; } .Section.Section--information .Section-container .Section-container-body ul { column-count: 3; column-gap: 0; } @media (max-width: 745px) { .Section.Section--information .Section-container .Section-container-body ul { column-count: 2; margin: 0; padding: 0; -webkit-column-break-inside: avoid; column-break-inside: avoid; } } .Section.Section--information .Section-container .Section-container-body ul u { text-decoration: none; } .Section.Section--information .Section-container .Section-container-body .Section-text-column { width: 33%; display: inline-block; vertical-align: top; padding-right: 20px; } .Section.Section--information .Section-container .Section-container-body .Section-text-column ul { column-count: 1; width: 100%; } .Section.Section--information .Section-container .Section-container-body .Section-text--mobile { display: none; } .Section.Section--information .Section-container .Section-container-body .Section-text--mobile ul { column-count: 1; display: inline-block; width: 100%; vertical-align: top; } @media (max-width: 745px) { .Section.Section--information .Section-container .Section-container-body .Section-text { display: none; } .Section.Section--information .Section-container .Section-container-body .Section-text--mobile { display: block; } } .Section.Section--information .Section-container .Section-container-body.Section-container-body--recognition { padding-bottom: 20px; } .Section.Section--information .Section-container .Section-container-body.Section-container-body--recognition ul { /* column-count: 1; display: inline-block; width: 33.33%; vertical-align: top; */ } @media (max-width: 745px) { .Section.Section--information .Section-container .Section-container-body.Section-container-body--recognition ul { /* width: 50%; */ } } .Section.Section--social .Section-container { padding: 10px 10px 20px 10px; } @media (min-width: 746px) { .Section.Section--social .Section-container { padding: 20px 20px 20px 40%; } } @media (min-width: 746px) and (max-width: 1023px) { .Section.Section--social .Section-container { padding: 20px 20px 20px 20px; } } @media (min-width: 1400px) { .Section.Section--social .Section-container { padding: 20px 20px 20px 45%; } } .Section.Section--even .Section-container .Section-container-head a:after { content: ''; display: inline-block; background: url(/ui/img/icons/lightPlusBlack.svg); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; width: 32px; height: 32px; vertical-align: middle; } @media (max-width: 746px) { .Section.Section--even .Section-container .Section-container-head a:after { width: 13px; height: 13px; transform: translateY(-50%) rotate(45deg); background: url(/ui/img/icons/searchClose.svg); } } .Section.Section--odd { background-color: black; color: white; } .Section.Section--head .Section-container { padding: 10px 0; } /** @define Site */ /** * Site structure * * Top level architecture. */ .Site.Site--textActive .Scroller .Scroller-body { overflow-y: hidden; } .Site.Site--clients { background-color: black; color: white; } .Site.Site--clients .Site-head { background-color: transparent; } .Site.Site--clients .Site-logo a, .Site.Site--clients .Site-icons a { color: white; } .Site.Site--clients .List--nav li a { color: white; } .Site.Site--clients.Site--info .Site-logo a, .Site.Site--clients.Site--info .Site-icons a { color: black; } .Site.Site--clients.Site--info .List--nav li a { color: black; } @media (max-width: 745px) { .Site.Site--clients .List--nav li a { color: black !important; } .Site.Site--clients .List--nav li.List-item--odd a { color: white; } } .Site-info { position: fixed; top: 0px; left: 0px; z-index: 3; width: 100%; height: 100%; background: white; overflow-y: scroll; -webkit-overflow-scrolling: touch; opacity: 0; pointer-events: none; transition: opacity 0.4s; } .Site--info .Site-info { opacity: 1; pointer-events: all; } .Site-info .Template--info { padding-bottom: 44px; } .Site { overflow: hidden; } .Site.Site--loading { cursor: wait; } .Site.Site--loading * { cursor: wait; } .Site canvas { margin: 0; padding: 0; display: block; border: none; border-top-color: transparent; border-left-color: transparent; } @media (max-width: 745px) { .Site { overflow-x: hidden; font-size: 18px; } } .Site :focus { outline: none !important; } .Site-splash { height: 1200px; } .Site-navMobile-trigger { display: none; } @media (max-width: 745px) { .Site-navMobile-trigger { display: inline-block; float: right; position: relative; width: 19px; height: 14px; margin-right: 15px; margin-top: 3px; } .Site-navMobile-trigger span { display: none; } .Site-navMobile-trigger:after { content: ''; display: block; width: 100%; height: 100%; background: url(/ui/img/icons/menu.svg); background-position: center center; background-repeat: no-repeat; background-size: 100% auto; } .Site--clients .Site-navMobile-trigger:after { background: url(/ui/img/icons/menu-white.svg); } .Site--clients.Site--info .Site-navMobile-trigger:after { background: url(/ui/img/icons/menu.svg); } } .Site-navMobile-close { display: none; } @media (max-width: 745px) { .Site-navMobile-close { display: block; } } .Site-intro { overflow: hidden; } .Site--searchActive { overflow: hidden; } .Site-splash-logo { position: fixed; top: 10px; left: 12px; width: auto; height: auto; z-index: 10; color: white; } .Site-splash-images { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: black; } .Site-page { background: white; position: relative; z-index: 1; } .Site-head { position: fixed; top: 0; left: 0; width: 100%; background: transparent; z-index: 4; } .Site-head .Info-close { display: none; } @media (max-width: 745px) { .Site-head { height: 82px; } } .Site--intro.Site--notScrolled .Site-head { position: absolute; top: auto; left: auto; width: 100%; } .Site-head .Site-all { display: none; } .Site--clients .Site-head .Site-all a { color: white; } .Site--info.Site--clients .Site-head .Site-all { display: none; } .Site--info.Site--clients .Site-head .Site-all a { color: black; } @media (max-width: 745px) { .Site--info .Site-head .Info-close { display: none; position: absolute; z-index: 10; top: 10px; right: 10px; /* display: inline-block; */ background: url(/ui/img/icons/searchClose.svg); background-repeat: no-repeat; background-position: center center; background-size: 13px 13px; width: 18px; height: 18px; } .Site-head .Site-all { display: block; position: absolute; left: 85px; top: 10px; } .Site-head .Site-all--info { display: none;} .Site--info.Site--clients .Site-head .Site-all--info { display: block; } .Site--info .Site-navMobile-trigger { /* display: none; */ } } .Site--searchActive .Site-body { overflow: hidden; } .Site-heading { padding-top: 15px; overflow: hidden; width: 100%; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); } @media (min-width: 746px) { .Site-heading { padding-top: 30px; } } @media (max-width: 745px) { .Site-heading * { font-size: 18px; font-size: 1rem; } } .Site--info .Site-heading { opacity: 0 !important; pointer-events: none; } .Site-message { position: relative; display: inline-block; margin-left: 0; color: black; } .Site-icons, .Site-searchClose { float: right; } .Site-icons { padding-right: 25px; } @media (max-width: 745px) { .Site-icons { display: none; float: left; position: fixed; width: 100%; height: 44px; background: #f0f0f0; left: 0; bottom: 0; } .Site--clients .Site-icons { background: #111; } } .Site-form { float: left; padding-left: 145px; position: relative; } @media (max-width: 745px) { .Site-form { padding-left: 30px; } } .Site-form:before { content: ''; position: absolute; top: 50%; left: 0; display: inline-block; background: url(/ui/img/icons/searchLarge.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; width: 48px; height: 48px; transform: translateY(-50%); } @media (max-width: 745px) { .Site-form:before { width: 20px; height: 20px; } } .Site-searchClose, .Site-navMobile-close { position: absolute; right: 40px; top: 50%; width: 35px; height: 35px; cursor: pointer; transform: translateY(-50%); } @media (max-width: 745px) { .Site-searchClose, .Site-navMobile-close { width: 25px; height: 25px; right: 5px; } } .Site-searchClose span, .Site-navMobile-close span { display: none; } .Site-searchClose:after, .Site-navMobile-close:after { content: ''; position: absolute; top: 0; left: 0; display: inline-block; background: url(/ui/img/icons/searchCloseMobile.svg); background-repeat: no-repeat; background-position: center center; background-size: 100% auto; width: 35px; height: 35px; } @media (max-width: 745px) { .Site-searchClose:after, .Site-navMobile-close:after { width: 13px; height: 13px; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .Site-searchClose { position: absolute; right: 40px; top: 50%; width: 35px; height: 35px; cursor: pointer; transform: translateY(-50%); } @media (max-width: 745px) { .Site-searchClose { width: 25px; height: 25px; right: 5px; } } .Site-searchClose span { display: none; } .Site-searchClose:after { content: ''; position: absolute; top: 0; left: 0; display: inline-block; background: url(/ui/img/icons/lightPlusBlack.svg); background-repeat: no-repeat; background-position: center center; transform: rotate(45deg); background-size: 100% auto; width: 35px; height: 35px; } @media (max-width: 745px) { .Site-searchClose:after { width: 13px; height: 13px; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .Site-navMobile-close { pointer-events: none; top: -200px; opacity: 0; transition: opacity 0.2s 0.5s; } @media (max-width: 745px) { .Site--menuActive .Site-navMobile-close { top: 19px; opacity: 1; pointer-events: all; z-index: 100; } } .Site-logo, .Site-nav { opacity: 1; pointer-events: all; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .Site--searchActive .Site-logo, .Site--searchActive .Site-nav { opacity: 0; pointer-events: none; } .Site-copyright { float: left; } @media (max-width: 745px) { .Site-foot { padding-bottom: 0px; } } .Site-footerNav { float: right; } .Site-logo-project { display: inline-block; opacity: 0; } .Site-logo { padding-left: 7px; } .Site-logo.is-active { color: black; } .Site-logo.is-active > * { color: black; } .Site-logo, .Site-nav { display: inline-block; padding-right: 20px; } @media (max-width: 745px) { .Site-logo, .Site-nav { padding-right: 0; } } @media (max-width: 745px) { #filters { display: none; } } .Site--info .Site-nav { opacity: 0 !important; pointer-events: none; } @media (max-width: 745px) { .Site-logo { margin-right: 10px; } } .Site-loader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: white; z-index: 99; } .Site-loader .Loader { top: 50%; left: 50%; position: absolute; transform: translate(-50%, -50%); } .Site-loader.Site-loader--projects { position: relative; display: none; background: transparent; width: auto; height: auto; top: 0; left: 0; vertical-align: middle; margin-top: -2px; margin-left: 1px; padding-right: 10px; } .Site-loader.Site-loader--projects .Loader { position: relative; top: 0; left: 0; transform: none; } .Site-search { opacity: 0; pointer-events: none; position: fixed; top: -100%; left: 0; width: 100%; height: 100%; z-index: 10; overflow-y: scroll; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1), top 0s 0.6s; } .Site--searchActive .Site-search { top: 0; opacity: 1; pointer-events: all; transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1); } @media (max-width: 745px) { .Site--searchActive .Site-search { overflow: hidden; overflow-y: scroll; } } .Site-search:before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 1); z-index: -1; } .Site--intro .Site-logo-project { display: none; } .Site--project .Site-logo-project { display: inline-block; padding-left: 10px; padding-right: 20px; opacity: 0; } .Site--project .Site-loader--projects { display: none; } .Site-scroll { /* Site--lightbox & { overflow: hidden !important; overflow-y: auto !important; } */ position: fixed; top: 0; left: 0; bottom: 0; right: 0; } /** @define Template */ /** * Template */ .Template { padding-top: 82px; } @media (min-width: 746px) { .Template { padding-top: 105px; } } .Template--clients { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0 10px; padding-top: 82px; overflow: hidden; overflow-y: auto; } .Template--info { min-height: 100vh; } @media (min-width: 746px) { .Template--clients { padding-top: 105px; } } @media (min-width: 746px) and (max-width: 1024px) { .Template--info .Section h4 { font-size: 15px; font-size: 0.8333333333rem; } .Template--info .Section p, .Template--info .Section ul, .Template--info .Section .Section-container-head a { font-size: 18px; font-size: 1rem; } } .Template--404 .Template-title { display: block; padding: 10px 10px 40px 10px; } .Template-title { display: none; } .Template--project .Template-section--text { display: none; position: fixed; z-index: 3; } .Template--project .Template-section--image { display: block; } @media (max-width: 745px) { .Template--project .Template-section--image > div { height: auto !important; } } .Site--textActive .Template--project .Template-section--image { opacity: 0; pointer-events: none; } .Site--textActive .Template--project .Template-section--text { display: block; width: 60%; } @media (max-width: 745px) { .Site--textActive .Template--project .Template-section--text { width: 100%; overflow-y: scroll; padding-bottom: 88px; } } .Template-section--text { width: 60%; } @media (max-width: 745px) { .Template-section--text { width: 100%; } } .Browser { position: relative; width: auto; height: 0; } .Browser:before { content: ''; display: block; z-index: 1; position: absolute; width: 100%; top: 0; left: 0; } .Browser-viewport { position: absolute; overflow: hidden; background: transparent; z-index: 2; width: auto; height: auto; } .Browser-viewport > * { position: absolute; width: 102%; height: 101%; top: 50%; left: 50%; transform: translate(-50%, -50%); } .Browser--desktop { padding-top: 67.3553719008%; } .Browser--desktop:before { padding-top: 2.2%; background: url("/ui/img/browser/desktop.svg") top left no-repeat; background-size: 100% 100%; } .Browser--desktop .Browser-viewport { top: 3%; bottom: 0; left: 0; right: 0; /* border:3px solid white; */ } .Browser--tablet { padding-top: 66.8571428571%; } .Browser--tablet:before { padding-top: 66.8571428571%; background: url("/ui/img/browser/tablet.svg") top left no-repeat; background-size: 100% 100%; } .Browser--tablet .Browser-viewport { top: 4.7%; bottom: 4.7%; left: 9.6%; right: 9.6%; } .Browser--mobile { padding-top: 200%; } .Browser--mobile:before { padding-top: 200%; background: url("/ui/img/browser/phone.svg") top left no-repeat; background-size: 100% 100%; } .Browser--mobile .Browser-viewport { top: 14%; bottom: 14%; left: 3.57%; right: 3.57%; } .Chars--logo { width: 16px; } .Chars--logo > * { display: none; text-align: center; } .Chars--logo > *.is-current { display: block; } .Chars--logo.is-playing .char1:after { display: none; } .Chars--logo .char1 { position: relative; } .Chars--logo .char1:after { content: '\e900'; display: inline-block; position: absolute; color: black; top: -9px; left: 50%; transform: translateX(-65%); opacity: 1; } @media (max-width: 745px) { .Chars--logo .char1:after { top: -9px; } } .Site--clients .Chars--logo .char1:after { color: white; } .Site--clients.Site--info .Chars--logo .char1:after { color: black; } .Chars .char1 { opacity: 1; position: relative; } .Chars .char1:after { content: '\e900'; display: inline-block; position: absolute; color: black; top: -8px; left: 50%; transform: translateX(-60%); opacity: 0; transition: opacity 0.2s; } .Site--filterActive .Chars .char1:after { opacity: 1; } .Chars .char2, .Chars .char3, .Chars .char4, .Chars .char5, .Chars .char6, .Chars .char7, .Chars .char8, .Chars .char9, .Chars .char10, .Chars .char11, .Chars .char12 { opacity: 1; transition: opacity 0.5s; } .Site--intro.Site--notScrolled .Chars .char1 { opacity: 1; transition: opacity 0.5s 0.5s; } .Site--intro.Site--notScrolled .Chars .char2, .Site--intro.Site--notScrolled .Chars .char3, .Site--intro.Site--notScrolled .Chars .char4, .Site--intro.Site--notScrolled .Chars .char5, .Site--intro.Site--notScrolled .Chars .char6, .Site--intro.Site--notScrolled .Chars .char7, .Site--intro.Site--notScrolled .Chars .char8, .Site--intro.Site--notScrolled .Chars .char9, .Site--intro.Site--notScrolled .Chars .char10, .Site--intro.Site--notScrolled .Chars .char11, .Site--intro.Site--notScrolled .Chars .char12 { opacity: 1; transition: opacity 0.5s 1s; } .Site--intro.Site--scrolled .Chars .char1 { opacity: 1; transition: opacity 0s; } .Site--intro.Site--scrolled .Chars .char2, .Site--intro.Site--scrolled .Chars .char3, .Site--intro.Site--scrolled .Chars .char4, .Site--intro.Site--scrolled .Chars .char5, .Site--intro.Site--scrolled .Chars .char6, .Site--intro.Site--scrolled .Chars .char7, .Site--intro.Site--scrolled .Chars .char8, .Site--intro.Site--scrolled .Chars .char9, .Site--intro.Site--scrolled .Chars .char10, .Site--intro.Site--scrolled .Chars .char11, .Site--intro.Site--scrolled .Chars .char12 { opacity: 0; transition: opacity 0.5s 1s; pointer-events: none; } .Site--intro.Site--scrolled.Site--filterActive .Chars .char1 { opacity: 1; pointer-events: none; transition: opacity 0.5s; } .Site--intro.Site--scrolled.Site--filterActive .Chars .char2, .Site--intro.Site--scrolled.Site--filterActive .Chars .char3, .Site--intro.Site--scrolled.Site--filterActive .Chars .char4, .Site--intro.Site--scrolled.Site--filterActive .Chars .char5, .Site--intro.Site--scrolled.Site--filterActive .Chars .char6, .Site--intro.Site--scrolled.Site--filterActive .Chars .char7, .Site--intro.Site--scrolled.Site--filterActive .Chars .char8, .Site--intro.Site--scrolled.Site--filterActive .Chars .char9, .Site--intro.Site--scrolled.Site--filterActive .Chars .char10, .Site--intro.Site--scrolled.Site--filterActive .Chars .char11, .Site--intro.Site--scrolled.Site--filterActive .Chars .char12 { opacity: 0; pointer-events: none; transition: opacity 0.5s 0s; } .Site--scrolled.Site--filterActive .Chars .char1 { opacity: 1; pointer-events: none; transition: opacity 0.5s; } .Site--scrolled.Site--filterActive .Chars .char2, .Site--scrolled.Site--filterActive .Chars .char3, .Site--scrolled.Site--filterActive .Chars .char4, .Site--scrolled.Site--filterActive .Chars .char5, .Site--scrolled.Site--filterActive .Chars .char6, .Site--scrolled.Site--filterActive .Chars .char7, .Site--scrolled.Site--filterActive .Chars .char8, .Site--scrolled.Site--filterActive .Chars .char9, .Site--scrolled.Site--filterActive .Chars .char10, .Site--scrolled.Site--filterActive .Chars .char11, .Site--scrolled.Site--filterActive .Chars .char12 { opacity: 0; pointer-events: none; transition: opacity 0.5s 0s; } .Site--filterActive .Chars .char1 { opacity: 1; pointer-events: none; transition: opacity 0.5s; } .Site--filterActive .Chars .char2, .Site--filterActive .Chars .char3, .Site--filterActive .Chars .char4, .Site--filterActive .Chars .char5, .Site--filterActive .Chars .char6, .Site--filterActive .Chars .char7, .Site--filterActive .Chars .char8, .Site--filterActive .Chars .char9, .Site--filterActive .Chars .char10, .Site--filterActive .Chars .char11, .Site--filterActive .Chars .char12 { opacity: 0; pointer-events: none; transition: opacity 0.5s 0s; } .Site--project .Chars .char1 { opacity: 0; pointer-events: none; transition: opacity 0.5s; } .Site--project .Chars .char2, .Site--project .Chars .char3, .Site--project .Chars .char4, .Site--project .Chars .char5, .Site--project .Chars .char6, .Site--project .Chars .char7, .Site--project .Chars .char8, .Site--project .Chars .char9, .Site--project .Chars .char10, .Site--project .Chars .char11, .Site--project .Chars .char12 { opacity: 0; pointer-events: none; transition: opacity 0.5s 1s; } .Content p { margin-bottom: 10px; } @media (min-width: 746px) { .Content p { margin-bottom: 15px; } } .Content--details h4 { margin-top: 20px; } @media (min-width: 746px) { .Content--details h4 { margin-top: 20px; } } .Content--details h5 a:after { content: ""; display: inline-block; background: url("/ui/img/icons/arrow-link.svg"); background-size: 100% auto; background-position: center center; background-repeat: no-repeat; width: 14px; height: 7px; vertical-align: middle; margin-left: 15px; display: none; } .Section--social .Content--details h5 a:after { background: url("/ui/img/icons/arrow-link-black.svg"); } .Section--even .Content--details h5 a:after { background: url("/ui/img/icons/arrow-link-black.svg"); } .Section--social .Content--details p { margin-bottom: 10px; } .Content--introLogo { color: black; transition: color .5s ease; opacity: 1; transition: opacity .5s; } .Content--introLogo span { display: none; } .Content--introLogo:hover { color: #ff0000; } .Site--scrolled .Content--introLogo { opacity: 1; transition: opacity 0s; } .Site--project .Content--introLogo { opacity: 1; transition: opacity .5s .5s; color: black; } .Content--introLogo:before { content: "\e900"; } .Content--tweet p a { display: inline-block; margin-right: 10px; border-bottom: 2px solid transparent; transition: all 0.4s ease; } .Content--tweet p a:hover { border-bottom: 2px solid black; } .Content--message { white-space: nowrap; text-transform: uppercase; letter-spacing: 0.09em; } @media (max-width: 745px) { .Content--message { font-size: 17px; font-size: 0.9444444444rem; } } .Content--message:before, .Content--message:after { content: "\00B7"; display: inline-block; } .Content--message:before { margin-right: 3px; } .Content--message:after { margin-left: 3px; } .Form--search { position: relative; margin-bottom: 5px; } .Form--search input { margin-top: -5px; } @media (max-width: 745px) { .Form--search input { font-size: 30px; margin-top: 0; } } .Form--search input[type=search] { color: black; background: transparent; z-index: 1; position: relative; text-transform: lowercase; } @media (max-width: 745px) { .Form--search input[type=search] { width: 90%; } } .Form--search input[type=search]::placeholder { color: transparent; } .Form--search input[type=submit] { display: none; } /* This used to work for parent element of button divs */ /* But it is not enough now, below dont hide play button parent div */ *::-webkit-media-controls-panel { display: none !important; -webkit-appearance: none; } /* Old shadow dom for play button */ *::--webkit-media-controls-play-button { display: none !important; -webkit-appearance: none; } /* New shadow dom for play button */ /* This one works */ *::-webkit-media-controls-start-playback-button { display: none !important; -webkit-appearance: none; } .Image--landscape { padding-top: 56.25%; } .Image--landscape.Image--large { padding-top: calc(56.25%) !important; } .Image { background: #eee; } .Image > * { background-repeat: no-repeat; } .Image .Image-icon { width: 30px; height: 30px; top: auto; top: 10px; right: 10px; left: auto; z-index: 2; display: block !important; cursor: pointer; } .Image .Image-icon:before, .Image .Image-icon:after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; } .Site--touch .Image .Image-icon { display: none !important; } .Site--touch .Image.Image--video.Image-video--mobile:after { content: ''; width: 60px; height: 70px; display: block; background-image: url(/ui/img/icons/play-fill.svg); background-repeat: no-repeat; position: absolute; top: 50%; left: 50%; margin-left: -30px; margin-top: -35px; background-size: 100%; z-index: 5; pointer-events: none; opacity: 0.7; -webkit-filter: invert(100%); } @media (max-width: 745px) { .Site--touch .Image.Image--video.Image-video--mobile:after { transform: scale(0.75); } } .Site--touch .Image.Image--video.Image-video--mobile.is-playing:after { background-image: none; } .Image.Image--video.is-muted .Image-icon:before { opacity: 0; } .Image.Image--video.is-muted .Image-icon:after { opacity: 1; } .Image.Image--video.not-muted .Image-icon:before { opacity: 1; } .Image.Image--video.not-muted .Image-icon:after { opacity: 0; } .Image .Image-media.Image-media--video { position: absolute; top: 0; left: 0; z-index: 2; background: white; } .Image .Image-media.Image-media--video video { width: auto !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%); } .Site--touch .Image .Image-media.Image-media--video { display: none; } .Site--touch .Image .Image-media.Image-media--video.Image-media--video-mobile { display: block; background: transparent; } .Site--touch .Image .Image-media.Image-media--video .Image-icon { display: none; } .Image--portrait { padding-top: 112.5%; } .ImageSwitcher.Image--landscape.Image--large { height: 1px; } .Item { position: relative; } .Item--browser { padding-top: 56.25%; margin-bottom: 5px; } @media (max-width: 745px) { .Item--browser { display: none; } } .Item--browser .Item-media { position: absolute; top: 50%; left: 50%; width: 70%; height: auto; transform: translate(-50%, -50%); } .Item--browser .Item-media--mobile { width: 20%; } .Item--tile .Item-media { position: relative; z-index: 1; } .Item--tile .Item-media .video-wrap { position: absolute; z-index: 5; top: 0; left: 0; width: 100%; padding-top: calc(56.25%); } .Item--tile .Item-media video{ position: absolute; top: 0; left: 0; height: 100%; object-fit: cover; object-position: center; width: 100%; } .Item--tile .Item-body { position: relative; margin-top: 5px; } .List-item--small .Item--tile .Item-media .Image--landscape { padding-top: calc(56.25% - 1px); } /* .List-item--small .Item--tile .Item-body { margin-top: 0px; } */ .Item--tile .Item-body > div { padding-top: calc(56.25% - 1px); } .List-item--large .Item--tile .Item-body > div { padding-top: calc(28.125% - 2px); } .Item--tile .Item-body h1 { position: absolute; left: 0px; top: 0px; } .Item--tile .Item-body p { position: absolute; left: 0px; top: 0px; width: 100%; font-size: 12px; font-size: 0.6666666667rem; } @media (min-width: 746px) and (max-width: 1023px) { .Item--tile .Item-body p { display: none; } } @media (max-width: 745px) { .Item--tile .Item-body { height: 90px; } } @media (max-width: 745px) { .List-item--small .Item--tile h2, .List-item--small .Item--tile p { /* display: none; */ } .List-item--large .Item--tile h2, .List-item--large .Item--tile p { /* display: none; */ } } .Item--tile h1, .Item--tile h2 { padding-bottom: 5px; } .Item--tile h1 { margin-bottom: 1em; } .Item--tile.is-active .Item-body { opacity: 1; } .Landing { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; cursor: pointer; transition: opacity 0.5s; } .Landing.is-hidden { opacity: 0; pointer-events: none; } .Landing > div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .Landing > div > div > video { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center; } .Landing > h1 { opacity: 0; pointer-events: none; position: relative; z-index: 10; margin-top: 10px; } .Landing > h1 a { color: white; } .Landing > h1 a { color: white; } .Site--clients .Landing > h1 .Chars--logo .char1 { display: block; } .Site--clients .Landing > h1 { opacity: 1; } [data-view='mobile'] { display: none !important; } @media (max-width: 745px) { [data-view='mobile'] { display: block !important; } [data-view='default'] { display: none !important; } } @keyframes loader-x { from { background-position-x: 0; } to { background-position-x: -200px; } } @keyframes loader-y { from { background-position-y: 0; } to { background-position-y: -2400px; } } .Loader { display: block; width: 200px; height: 200px; overflow: hidden; background-image: url(/ui/img/sprites/loader.svg); background-size: 200px 2400px; background-position: 0 0; animation-name: loader-x, loader-y; animation-duration: 0.12s, 1.44s; animation-iteration-count: infinite; animation-timing-function: steps(1), steps(12); } @keyframes loaderProject-x { from { background-position-x: 0; } to { background-position-x: -30px; } } @keyframes loaderProject-y { from { background-position-y: 0; } to { background-position-y: -360px; } } .Loader.Loader--projects { display: block; width: 30px; height: 30px; overflow: hidden; background-image: url(/ui/img/sprites/loader.svg); background-size: 30px 360px; background-position: 0 0; animation-name: loaderProject-x, loaderProject-y; animation-duration: 0.1s, 1.2s; animation-iteration-count: infinite; animation-timing-function: steps(1), steps(12); } @keyframes 404-x { from { background-position-x: 0; } to { background-position-x: -200px; } } @keyframes 404-y { from { background-position-y: 0; } to { background-position-y: -800px; } } .Loader.Loader--404 { display: block; width: 200px; height: 200px; overflow: hidden; background-image: url(/ui/img/sprites/404.svg); background-size: 200px 800px; background-position: 0 0; animation-name: 404-x, 404-y; animation-duration: 0.12s, 0.48s; animation-iteration-count: infinite; animation-timing-function: steps(1), steps(4); } .Loader * { display: none; } .Loader.is-paused { display: block; animation-iteration-count: 1; } .Loader.Loader--projects { display: none; position: relative; margin-top: -1px; } .Loader.Loader--projects:after { content: '\e900'; display: inline-block; position: absolute; color: black; top: -9px; left: 50%; transform: translateX(-60%); opacity: 0; transition: opacity .2s .5s; } .Loader.is-paused:after { opacity: 1; transition: opacity .2s 1s; } .Loader--project { border: 1px solid red; } .Search > * { display: inline-block; } .Section a:hover { color: #ff0000; } @media (max-width: 745px) { .Section a:hover { color: black; } } .Section--search { height: 105px; } @media (max-width: 745px) { .Section--search { height: auto; } } .Section--search .Section-container { padding: 0 20px; } @media (min-width: 746px) { .Section--search .Section-container { padding: 10px 30px; } } .Section--results .is-active * { color: black; } .Section.Section-container--Clients .Section-container { padding-right: 10px; } .Video-poster { background-color: black; } .Video-poster:after { width: 10%; } .Site--no-touch .Video-poster:hover:after { opacity: 1; } .Video-controls { display: none; } .Video .mejs-overlay-play .mejs-overlay-button { width: 10%; } .ImageSwitcher { position: relative; width: 100%; opacity: 0; transition: opacity .5s ease; } .ImageSwitcher.is-visible { opacity: 1; } .ImageSwitcher.is-invisible { opacity: 0; } .ImageSwitcher .ImageSwitcher-item { position: absolute; top: 0; left: 0; width: 100%; /* height: 100%; */ opacity: 0; background-color: #eee; /* img { display: block; width: 100%; height: auto; opacity: 0; } */ } .ImageSwitcher .ImageSwitcher-item .ImageSwitcher-bg { background-size: cover; background-repeat: no-repeat; } .ImageSwitcher .ImageSwitcher-item.is-current { opacity: 1; } .ImageSwitcher .ImageSwitcher-item.is-loaded { background-color: transparent; } .ImageSwitcher .ImageSwitcher-item.is-loaded img { opacity: 1; transition: opacity 5s; } /**/