@charset "UTF-8"; /*! * by Archive Studio * http://archivestudio.co.uk */ /** * Config */ /** * Settings * * Core defaults */ /** * Base */ /** * Text sizes */ /** * Line heights */ /** * Spacing */ /** * 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. */ /** * Settings * * Extend `_defaults.scss` from the core and define global settings. */ /** * Fonts */ /* point to a SASS file e.g @import "../fonts/{font_name}/font-face"; */ @font-face { font-family: 'Calibre Semibold'; src: url("/ui/fonts/Calibre-Semibold.eot"); /* IE9 Compat Modes */ src: url("/ui/fonts/Calibre-Semibold.eot?#iefix") format("embedded-opentype"), url("/ui/fonts/Calibre-Semibold.woff") format("woff"), url("/ui/fonts/Calibre-Semibold.ttf") format("truetype"), url("/ui/fonts/Calibre-Semibold.svg#25dc652d1ac2f0b6c05727b08da51f67") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: 700; } @font-face { font-family: 'Calibre Regular'; src: url("/ui/fonts/Calibre-Regular.eot"); /* IE9 Compat Modes */ src: url("/ui/fonts/Calibre-Regular.eot?#iefix") format("embedded-opentype"), url("/ui/fonts/Calibre-Regular.woff") format("woff"), url("/ui/fonts/Calibre-Regular.ttf") format("truetype"), url("/ui/fonts/Calibre-Regular.svg#98292a1e4407be9097aa202a1c7584b2") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: 400; } @font-face { font-family: 'Calibre Medium'; src: url("/ui/fonts/Calibre-Medium.eot"); /* IE9 Compat Modes */ src: url("/ui/fonts/Calibre-Medium.eot?#iefix") format("embedded-opentype"), url("/ui/fonts/Calibre-Medium.woff") format("woff"), url("/ui/fonts/Calibre-Medium.ttf") format("truetype"), url("/ui/fonts/Calibre-Medium.svg#3915d0766a54f577ab174df350abfe80") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: 400; } @font-face { font-family: 'Calibre Light'; src: url("/ui/fonts/Calibre-Light.eot"); /* IE9 Compat Modes */ src: url("/ui/fonts/Calibre-Light.eot?#iefix") format("embedded-opentype"), url("/ui/fonts/Calibre-Light.woff") format("woff"), url("/ui/fonts/Calibre-Light.ttf") format("truetype"), url("/ui/fonts/Calibre-Light.svg#a728d5143ee2c334a64b531ee447af37") format("svg"); /* Legacy iOS */ font-style: normal; font-weight: 200; } /* * Symbolset * www.symbolset.com * Copyright © 2014 Oak Studios LLC * * Upload this file to your web server * and place this within your tags. * */ @font-face { font-family: "SSSocialRegular"; src: url("/ui/fonts/ss-social-regular.eot"); src: url("/ui/fonts/ss-social-regular.eot?#iefix") format("embedded-opentype"), url("/ui/fonts/ss-social-regular.woff") format("woff"), url("/ui/fonts/ss-social-regular.ttf") format("truetype"), url("/ui/fonts/ss-social-regular.svg#SSSocialRegular") format("svg"); font-weight: normal; font-style: normal; } /* This triggers a redraw in IE to Fix IE8's :before content rendering. */ html:hover [class^="ss-"] { -ms-zoom: 1; } .ss-icon, .ss-icon.ss-social-regular, [class^="ss-"]:before, [class*=" ss-"]:before, [class^="ss-"].ss-social-regular:before, [class*=" ss-"].ss-social-regular:before, [class^="ss-"].right:after, [class*=" ss-"].right:after, [class^="ss-"].ss-social-regular.right:after, [class*=" ss-"].ss-social-regular.right:after { font-family: "SSSocialRegular"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; /*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */ -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="ss-"].right:before, [class*=" ss-"].right:before { display: none; content: ''; } .ss-facebook:before, .ss-facebook.right:after { content: ''; } .ss-twitter:before, .ss-twitter.right:after { content: ''; } .ss-googleplus:before, .ss-googleplus.right:after { content: ''; } .ss-appdotnet:before, .ss-appdotnet.right:after { content: ''; } .ss-ello:before, .ss-ello.right:after { content: ''; } .ss-aboutme:before, .ss-aboutme.right:after { content: ''; } .ss-vk:before, .ss-vk.right:after { content: ''; } .ss-weibo:before, .ss-weibo.right:after { content: ''; } .ss-linkedin:before, .ss-linkedin.right:after { content: ''; } .ss-zerply:before, .ss-zerply.right:after { content: ''; } .ss-xing:before, .ss-xing.right:after { content: ''; } .ss-reddit:before, .ss-reddit.right:after { content: ''; } .ss-steam:before, .ss-steam.right:after { content: ''; } .ss-tumblr:before, .ss-tumblr.right:after { content: ''; } .ss-wordpress:before, .ss-wordpress.right:after { content: ''; } .ss-blogger:before, .ss-blogger.right:after { content: ''; } .ss-quora:before, .ss-quora.right:after { content: ''; } .ss-youtube:before, .ss-youtube.right:after { content: ''; } .ss-vimeo:before, .ss-vimeo.right:after { content: ''; } .ss-vine:before, .ss-vine.right:after { content: ''; } .ss-letterboxd:before, .ss-letterboxd.right:after { content: ''; } .ss-flickr:before, .ss-flickr.right:after { content: ''; } .ss-instagram:before, .ss-instagram.right:after { content: ''; } .ss-vscogrid:before, .ss-vscogrid.right:after { content: ''; } .ss-fivehundredpx:before, .ss-fivehundredpx.right:after { content: ''; } .ss-feedly:before, .ss-feedly.right:after { content: ''; } .ss-pinterest:before, .ss-pinterest.right:after { content: ''; } .ss-dropbox:before, .ss-dropbox.right:after { content: ''; } .ss-pinboard:before, .ss-pinboard.right:after { content: ''; } .ss-delicious:before, .ss-delicious.right:after { content: ''; } .ss-dribbble:before, .ss-dribbble.right:after { content: ''; } .ss-behance:before, .ss-behance.right:after { content: ''; } .ss-github:before, .ss-github.right:after { content: ''; } .ss-bitbucket:before, .ss-bitbucket.right:after { content: ''; } .ss-stackoverflow:before, .ss-stackoverflow.right:after { content: ''; } .ss-stackexchange:before, .ss-stackexchange.right:after { content: ''; } .ss-codepen:before, .ss-codepen.right:after { content: ''; } .ss-jsfiddle:before, .ss-jsfiddle.right:after { content: ''; } .ss-paypal:before, .ss-paypal.right:after { content: ''; } .ss-shopify:before, .ss-shopify.right:after { content: ''; } .ss-kickstarter:before, .ss-kickstarter.right:after { content: ''; } .ss-etsy:before, .ss-etsy.right:after { content: ''; } .ss-foursquare:before, .ss-foursquare.right:after { content: ''; } .ss-swarm:before, .ss-swarm.right:after { content: ''; } .ss-yelp:before, .ss-yelp.right:after { content: ''; } .ss-skype:before, .ss-skype.right:after { content: ''; } .ss-whatsapp:before, .ss-whatsapp.right:after { content: ''; } .ss-rdio:before, .ss-rdio.right:after { content: ''; } .ss-spotify:before, .ss-spotify.right:after { content: ''; } .ss-lastfm:before, .ss-lastfm.right:after { content: ''; } .ss-soundcloud:before, .ss-soundcloud.right:after { content: ''; } .ss-appstore:before, .ss-appstore.right:after { content: ''; } .ss-googleplay:before, .ss-googleplay.right:after { content: ''; } .ss-appleinc:before, .ss-appleinc.right:after { content: ''; } .ss-microsoft:before, .ss-microsoft.right:after { content: ''; } .ss-windows:before, .ss-windows.right:after { content: ''; } .ss-android:before, .ss-android.right:after { content: ''; } .ss-blackberry:before, .ss-blackberry.right:after { content: ''; } .ss-link:before, .ss-link.right:after { content: '🔗'; } .ss-phone:before, .ss-phone.right:after { content: '📞'; } .ss-mail:before, .ss-mail.right:after { content: '✉'; } .ss-like:before, .ss-like.right:after { content: '👍'; } .ss-rss:before, .ss-rss.right:after { content: ''; } .ss-share:before, .ss-share.right:after { content: ''; } /** * Import the core */ /** * Tools */ /** * 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) { ... } */ /** * Ceaser cubic bezier’s easing animations * * Based on: http://matthewlein.com/ceaser */ /** * Cubic */ /** * Circ */ /** * Expo */ /** * Quad */ /** * Quart */ /** * Quint */ /** * Sine */ /** * Back */ /** * 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 { 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 */ /* 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: "Calibre Regular", arial, sans-serif; /* 1 */ font-size: 0.875em; /* 1 */ line-height: 1.1428571429; /* 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: color 0.2s ease; } a:hover, a:focus, a:active { color: #666; } 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: "Calibre SemiBold", arial, sans-serif; } /** * Address */ address { font-style: normal; } /** * Selection */ ::-moz-selection { background-color: rgba(0, 0, 0, 0.75); color: #FFF; text-shadow: none; } ::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; } /** * Headings 1–6, extend text utilities */ h1, h2, h3, h4, h5, h6 { font-weight: normal; } /** * Utilities */ /** * 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. */ /** * 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--foot, .List--news, .List--projectNav, .Template-body article, .PageContent { display: block; /* 1 */ margin: 0; /* 1 */ padding: 0; /* 1 */ text-align: left; /* 2 */ margin-left: -15px; /* 3 */ } /** * 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--foot .List-item, .List--news .List-item, .List--projectNav .List-item, .PageContent-griditem, .PageContent-pagination, .PageContent-section { display: inline-block; /* 1 */ margin: 0; padding-left: 15px; /* 2 */ text-align: left; /* 3 */ vertical-align: top; /* 4 */ width: 100%; /* 5 */ } /** @define Container */ /** * Container has auto side margins and max width in line with the base settings */ /** * Display-type utilities */ /** * Completely remove from the flow but leave available to screen readers. */ /** * Text utilities * * As per: csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css */ h1 { font-size: 32px; font-size: 2.2857142857rem; line-height: 1.3; } h2 { font-size: 24px; font-size: 1.7142857143rem; line-height: 1.3; } h3 { font-size: 16px; font-size: 1.1428571429rem; line-height: 1.3; } h4 { font-size: 12px; font-size: 0.8571428571rem; line-height: 1.2; } h5 { font-size: 10px; font-size: 0.7142857143rem; line-height: 1.2; } h6 { font-size: 10px; font-size: 0.7142857143rem; line-height: 1.2; } /** * Core overlay system */ /** * Overlay container * * 1. Make the same size as the relative parent * 2. Position it over the parent * 3. Apply a negative `margin-left` to negate the columns’ gutters. */ /** * Overlay item * * 1. Display as table so that we can control vertical positioning of content * 2. Make as big as the parent */ /** * Overlay content * * 1. Display as table-cell so that we inherit vertical positioning of content * 2. Make as big as the parent */ /** * Themes */ /** @define UI Theme */ /** * Some defaults for .ui- components */ .Site .ui-clickable--handled { cursor: pointer; } /** * Core Components */ /** @define Site */ /** * Base site component */ /** @define Template */ /** * Base template component */ /** @define Calendar */ /** * TODO: Make silent & extendable */ .Calendar table { width: 100%; table-layout: fixed; } .Calendar td { vertical-align: top; text-align: center; } .Calendar-head { text-align: center; } .Calendar-title { display: inline-block; } .Calendar-arrow { width: 30px; height: 30px; } /** * Modifier: large calendar */ .Calendar--alpha td { border: 1px solid #000; text-align: left; } .Calendar--alpha .Calendar-item { position: relative; padding-bottom: 100%; height: 0; } /** @define Checkbox */ /** * CSS3 checkbox with graceful fallback. * * Based on: http://www.paulund.co.uk/style-checkboxes-with-css */ /** * TODO: Make silent & extendable */ .Checkbox { position: relative; } @media (max-width: 745px) { .Checkbox { padding-top: 2px; } } .Checkbox input[type=checkbox], .Checkbox input[type=radio] { visibility: hidden; width: 20px; height: 20px; } .Checkbox span { vertical-align: top; padding-left: 6px; } @media (max-width: 745px) { .Checkbox span { font-size: 12px; font-size: 0.8571428571rem; } } /** * Create the box for the checkbox */ .Checkbox label { width: 20px; height: 20px; position: absolute; top: 0; left: 0; background: #f1f1f1; border: 1px solid #e3e3e3; cursor: pointer; } /** * Display the tick inside the checkbox */ .Checkbox label:after { content: ""; width: 9px; height: 5px; position: absolute; top: 6px; left: 5px; background: transparent; border: 2px solid #000; border-top: none; border-right: none; opacity: 0.1; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } /** * Create the hover event of the tick */ .Checkbox label:hover:after { opacity: 0.5; } /** * Create the checkbox state for the tick */ .Checkbox input[type=checkbox]:checked + label:after, .Checkbox input[type=radio]:checked + label:after { opacity: 1; } /** * JS UI Component styles */ /** @define ui-keepRatio */ /** * ui-keepRatio * * */ .ui-keepRatio { display: block; width: auto; position: relative; } .ui-keepRatio > * { display: block; width: 100%; height: 100%; } .ui-keepRatio img { min-height: 100%; } /** @define ui-keepRatio */ /** * ui-lazyImage * * */ .ui-lazyImage { background: #DDD; } .ui-lazyImage img { display: block; width: 100%; height: auto; } /** * Components */ .Site { transition: color 0.3s ease, background 1s ease; font-weight: 400; } .Site h1, .Site h2, .Site h3, .Site h4 { font-family: "Calibre Regular", arial, sans-serif; } @media (max-width: 745px) { .Site.Site--grey body { background-color: #000; } } .Site.Site--grey .Content { color: white; } .Site.Site--grey .Content a { color: white; text-decoration: underline; font-family: "Calibre SemiBold", arial, sans-serif; } .Site.Site--grey .Content a:hover { color: #999; } .donate .Site.Site--grey .Content a { text-decoration: none; } .Site.Site--black .Content { color: white; } .Site.Site--black .Content p a { color: white; text-decoration: underline; font-family: "Calibre SemiBold", arial, sans-serif; } .Site.Site--black .Content p a:hover { color: #999; } .donate .Site.Site--black .Content p a { text-decoration: none; } .donate .Site.Site--black .Content p a:hover { color: white; } .Site.Site--black .Content p.donate a { text-decoration: none; } .Site.Site--black .Content p.donate a:hover { color: white; } .Site p.intro { position: absolute; color: white; text-transform: uppercase; top: 25%; margin-top: -72px; left: 0px; width: 100%; z-index: 999; text-align: center; font-size: 60px; line-height: 70px; font-family: "Calibre Light", arial, sans-serif; letter-spacing: 15px; pointer-events: none; } .Site a { color: #999; } .Site a:hover { text-decoration: underline; } .Site a h3 { color: black; } .Site p.donate a { display: inline-block; padding: 7px 7px 3px 7px; margin-right: 6px; border: 2px solid #999; font-family: "Calibre SemiBold", arial, sans-serif; color: black; text-transform: uppercase; letter-spacing: 1px; } .Site p.donate a:hover { background-color: #999; text-decoration: none; } .Site .Content--grey p.donate a { text-decoration: none; } .Site .Content--grey p.donate a:hover { color: white; } .Site body.past-events p.donate { display: none; } .Site p.bottom.sticky { /*position: fixed;*/ opacity: 1; transition: opacity 0.5s; } .Site p.bottom.sticky.active { opacity: 1; } @media (max-width: 745px) { .Site p.bottom { bottom: 100px !important; } } .Site p.left, .Site p.right, .Site p.bottom { position: absolute; font-family: "Calibre Light", arial, sans-serif; font-size: 16px; line-height: 18px; letter-spacing: 3px; width: 100%; color: white; } .Site p.left a:hover, .Site p.right a:hover, .Site p.bottom a:hover { color: black; text-decoration: none; border: 0; } .Site p.left.right, .Site p.right.right, .Site p.bottom.right { top: 50%; right: 0px; text-align: right; } .Site p.left.right span, .Site p.right.right span, .Site p.bottom.right span { right: 35px; top: 50%; margin-right: -150px; top: 50%; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .Site p.left.left, .Site p.right.left, .Site p.bottom.left { top: 50%; left: 0px; text-align: left; } .Site p.left.left span, .Site p.right.left span, .Site p.bottom.left span { left: 35px; top: 50%; margin-left: -150px; top: 50%; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .Site p.left.bottom, .Site p.right.bottom, .Site p.bottom.bottom { top: auto; bottom: 50px; text-align: center; } .Site p.left.bottom span, .Site p.right.bottom span, .Site p.bottom.bottom span { width: 100%; left: 0px; -webkit-transform: rotate(180deg); transform: rotate(180deg); } .Site p.left span, .Site p.right span, .Site p.bottom span { display: inline-block; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; white-space: nowrap; width: 300px; height: 30px; line-height: 30px; text-align: center; text-transform: uppercase; color: white; } .Site.js body { transition: opacity 1.2s cubic-bezier(0.19, 1, 0.22, 1); opacity: 0; } .Site.js.Site--loaded body { opacity: 1; } .Site--slideshow .Site-body { margin-top: 100%; } .when-Mini-show-is-active .Navigation, .when-Mini-show-is-active .Logo, .when-Mini-show-is-active .Social, .when-Mini-show-is-active .Volume, .when-Video-is-active .Navigation, .when-Video-is-active .Logo, .when-Video-is-active .Social, .when-Video-is-active .Volume { display: none; } .when-Mini-show-is-active.has-Video .Volume, .when-Video-is-active.has-Video .Volume { display: none; } .no-touch .Volume { position: fixed; z-index: 999; top: 40px; right: 60px; width: 27px; height: 27px; background-image: url(/ui/img/unmuted.png); background-size: 27px 27px; cursor: pointer; display: none; } .no-touch .Volume.is-active { background-image: url(/ui/img/muted.png); } .has-Video .Volume { display: block; } .Site-head { position: fixed; top: 0px; left: 0px; width: 100%; height: 100px; z-index: 20; transition: background 0.5 ease-out; } .touch .Site-head { bottom: auto; top: 0px; } .Site-head.scrolled { pointer-events: none; } .Site-head.blocked { /* background-color: white; */ } .Site-head.Mask-black { height: 0px; top: auto; bottom: 400px; z-index: 21; } .touch .Site-head.Mask-black { bottom: auto; top: 0px; overflow: hidden; } .Site-head.Mask-black .Site-head-mask { bottom: auto; top: 0px; } .Site-head .Site-head-mask { position: absolute; left: 0px; bottom: 0px; width: 100%; height: 100%; } .Site-head .before, .Site-head .after { content: ''; display: block; width: 10px; height: 10px; background-image: url(/ui/img/sprites.svg); background-repeat: no-repeat; position: absolute; z-index: 60; background-size: 30px 10px; background-position: -10px 0px; top: 18px; } .Site--no-slideshow .Site-head .before, .Site-head--black .Site-head .before, .Site--no-slideshow .Site-head .after, .Site-head--black .Site-head .after { background-position: 0px 0px; } .Site-head.Site-head--black .before, .Site-head.Site-head--black .after { background-position: 0px 0px; } .Site-head .before { left: 18px; } .Site-head .after { right: 18px; } .Site-head.black .Logo { /* background-color: white; */ } .Site-head.black nav { /* background-color: white; */ } .Site-head.black .before, .Site-head.black .after { background-position: 0px 0px; } .Site--grey .Site-head { /* background-color: #000; */ } @media (max-width: 745px) { .Site-head { pointer-events: all; overflow: none; /* &.cloned { display: block; height:100% !important; .Logo { background-color: transparent; } } */ } .Site-head .before, .Site-head .after { display: none; } .Site-Navigation-Open .Site-head { height: 100% !important; } .Site-head.Site-head-open { height: 100% !important; } .Site-head.Site-head-open.cloned { overflow: visible; z-index: 100; pointer-events: all; display: block; height: 100% !important; } .Site-head.Site-head-open.cloned .Logo { background-color: transparent; z-index: 60; bottom: auto; } } .Social { font-family: "SSSocialRegular"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; } .Social.invisible ul { z-index: 999; opacity: 0; } .Social ul { /* position: absolute; left: 40px; right: 50px; z-index: 50; */ } .Social ul li { display: inline; padding: 0px 5px; } .Social ul li a { color: white; } .Social ul li a:hover, .Social ul li a.over { color: #999; border: 0; text-decoration: none; } @media (max-width: 745px) { .Social { /* display: none; */ } } .Share { margin-top: 10px; padding-top: 15px; padding-bottom: 40px; } .Share:before { content: '\2014'; color: #7f7f7f; font-family: "Calibre SemiBold", arial, sans-serif; font-size: 18px; display: block; margin-bottom: 10px; } .Share .List-item--title { display: inline; padding: 0px 10px 0 0; color: #7f7f7f; font-family: "Calibre SemiBold", arial, sans-serif; font-size: 11px; text-transform: uppercase; } .Share .List-item { font-family: "SSSocialRegular"; font-style: normal; font-weight: normal; text-decoration: none; text-rendering: optimizeLegibility; white-space: nowrap; -ms-font-feature-settings: "liga" 1; -o-font-feature-settings: "liga"; font-feature-settings: "liga"; -webkit-font-smoothing: antialiased; display: inline; padding: 0px 5px; } .Share .List-item a { color: #7f7f7f; } .Share .List-item a:hover, .Share .List-item a.over { color: #999; border: 0; text-decoration: none; } .Site-foot { position: absolute; z-index: 20; bottom: 0px; left: 0px; width: 100%; height: 105px; background-color: #7f7f7f; /* p { position: absolute; bottom: -35px; left: 0px; margin: 0; width: 150px; } */ } @media (max-width: 745px) { .Site-foot { position: relative; z-index: 50; left: 0px; height: auto; bottom: 0px; margin: 0px 0 0 0px; padding: 10px 0px 10px 10px; } } .Site-foot .before, .Site-foot .after { display: block; width: 10px; height: 10px; background-image: url(/ui/img/sprites.svg); background-repeat: no-repeat; position: fixed; z-index: 50; background-size: 30px 10px; background-position: -10px 0px; bottom: 18px; } .Site--no-slideshow .Site-foot .before, .black .Site-foot .before, .Site--no-slideshow .Site-foot .after, .black .Site-foot .after { background-position: 0px 0px; } .Site-foot .before { left: 18px; } .Site-foot .after { right: 18px; } .Site-foot.black .before, .Site-foot.black .after { background-position: 0px 0px; } @media (max-width: 745px) { .Site-foot .before, .Site-foot .after { display: none; } } p { margin: 0 0 1em 0; } p.date { font-size: 12px; letter-spacing: 1px; margin: 0px; /*color: $base-color-light;*/ } p.grey { color: #999; } p b, p strong { font-family: "Calibre SemiBold", arial, sans-serif; } p b i, p b em, p strong i, p strong em { font-family: "Calibre SemiBold", arial, sans-serif; } p i, p em { font-family: "Calibre Regular", arial, sans-serif; font-style: italic; } .caption p { padding: 5px 0 3px 0; font-size: 12px; margin: 0px; color: #999; } p.small { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-family: "Calibre SemiBold", arial, sans-serif; margin: 0 0 5px 0; } @media (max-width: 745px) { .Site-head-open.cloned { bottom: 0px !important; } .Site-head-open.cloned .Logo { bottom: auto !important; top: 0px; } .cloned .Logo { bottom: auto !important; top: 0px; } } .Logo { position: absolute; z-index: 50; bottom: auto; left: 0px; width: 100%; text-align: center; padding: 40px 0px 100px 0; } .cloned .Logo { bottom: 65px; } @media (max-width: 745px) { .Site-head-open .Logo { z-index: 101; } .Site-head-open .Logo h1 a { background-image: url(/ui/img/logo-black.svg); } } .Logo.invisible { position: fixed; bottom: auto; top: 0px; opacity: 0; z-index: 998; padding-bottom: 0px; } .Logo h1 { width: 305px; height: 25px; margin: 0px auto; } .Logo h1 a { display: block; background-image: url(/ui/img/logo-white.svg); background-repeat: no-repeat; background-size: 305px 25px; } .Site--no-slideshow .Logo h1 a, .Site-head--black .Logo h1 a { background-image: url(/ui/img/logo-black.svg); } .Logo h1 span { margin-left: -20000px; } @media (max-width: 745px) { .Logo { padding: 15px 0px; } .Logo h1 { width: 250px; height: 20px; } .Logo h1 a { background-size: 250px 20px; } } @media (min-width: 746px) { /* body.homepage { */ .Navigation { padding-bottom: 150px; } .Navigation ul { opacity: 0; pointer-events: none; transition: opacity 0.3s linear; } .Navigation-toggle { display: block; } /* } */ .Site-head-open .Navigation > ul { opacity: 1; pointer-events: all; } .Site-head-open .Navigation-toggle { display: none; } } @media (max-width: 745px) { .Nav-mobile { position: fixed; z-index: 10; top: 0px; left: -100%; width: 100%; height: 100%; background-color: white; transition: left 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .Site-head-open .Nav-mobile { left: 0px; } } .Navigation { position: absolute; z-index: 106; top: 40px; left: 20px; font-family: "Calibre SemiBold", arial, sans-serif; line-height: 20px; padding: 0 30px 50px 30px; } .Navigation li { position: relative; } .Navigation.invisible { position: fixed; bottom: auto; top: 50px; opacity: 0; z-index: 999; } .Navigation.invisible ul { opacity: 0; } .Navigation li.Navigation-item--newsletter-subscription, .Navigation li.Navigation-item--terms-conditions { display: none; } .Navigation ul ul { opacity: 0; pointer-events: none; position: absolute; z-index: 6; top: 0px; left: 120px; width: 150px; /* padding-left: 18px; */ font-family: "Calibre Regular", arial, sans-serif; } @media (max-width: 745px) { .Navigation ul ul { left: 130px; width: 180px; } } .Navigation ul ul li a { color: #999 !important; } .Navigation ul ul li a.over { color: black !important; border: 0px !important; /*&:before { content: '\2014'; display: inline; margin:0 5px 0 -17px; }*/ } .Navigation ul ul li.is-active a { color: white !important; border: 0px !important; } .Site--black .Navigation ul ul li.is-active a { color: white !important; } .Site--no-slideshow .Navigation ul ul li.is-active a, .Site-head--black .Navigation ul ul li.is-active a { color: black !important; } .Navigation li.is-active ul { opacity: 1; pointer-events: all; } .Navigation li.is-active > a { border-bottom: 1px solid; } .Navigation a { color: white; } .Site--no-slideshow .Navigation a, .Site-head--black .Navigation a { color: black; } .Site--no-slideshow .Navigation > ul > li > a:hover, .Site-head--black .Navigation > ul > li > a:hover { text-decoration: none; border-bottom: 1px solid black; } .Navigation > ul > li > a:hover, .Navigation > ul > li > a.over { text-decoration: none; border-bottom: 1px solid; } .Navigation .Navigation-toggle { /* display: none; */ width: 30px; height: 20px; position: absolute; top: 0px; left: 30px; background-image: url(/ui/img/burger.png); background-repeat: no-repeat; z-index: 50; background-size: 30px 20px; background-position: 0px 0px; cursor: pointer; /* .Site-head-open & { display:none; } */ } .Navigation .Navigation-toggle span { margin-left: -2000px; } @media (max-width: 745px) { .Navigation .Navigation-toggle { display: block; } } .Site--no-slideshow .Navigation .Navigation-toggle, .Site-head--black .Navigation .Navigation-toggle { background-image: url(/ui/img/burger-black.png); background-position: 0px 0px; } @media (max-width: 745px) { .Site--no-slideshow .Navigation .Navigation-toggle, .Site-head--black .Navigation .Navigation-toggle { display: block; } } .Site-head-open .Navigation .Navigation-toggle { -webkit-transform: rotate(45deg); transform: rotate(45deg); } @media (max-width: 745px) { .Navigation .Nav-mobile { position: fixed; top: 0px; left: -100%; width: 100%; height: 100%; background-color: white; transition: left 0.5s cubic-bezier(0.23, 1, 0.32, 1); } .Site-head-open .Navigation .Nav-mobile { left: 0px; } .Navigation > ul { position: fixed; top: 0px; transition: left 0.5s cubic-bezier(0.23, 1, 0.32, 1); left: -100%; width: 100%; background-color: transparent; /* .Site--grey &, .Site--black & { background-color: #333; a { color: white; } } */ } .Site-head-open .Navigation > ul { left: 0px; } .Navigation > ul > li { margin-left: 15px; font-size: 18px; line-height: 30px; } .Navigation > ul > li:first-child { margin-top: 100px; } .Navigation > ul a { color: black; } .Navigation .Navigation-toggle { display: block; width: 20px; height: 20px; position: fixed; top: 15px; left: 15px; background-image: url(/ui/img/sprites.svg); background-repeat: no-repeat; z-index: 105; background-size: 60px 20px; background-position: -20px 0px; cursor: pointer; } .Site--no-slideshow .Navigation .Navigation-toggle, .Site-head--black .Navigation .Navigation-toggle { background-image: url(/ui/img/sprites.svg); background-position: 0px 0px; } .Site-head-open .Navigation .Navigation-toggle { background-position: 0px 0px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } } .PageContent { padding: 145px 0 215px 0; margin-left: -10px; /* &.PageContent-feed { margin: 0 auto; @include respond-to('desktop') { width:75%; } @include respond-to('wide') { width:100%; } @include respond-to('super-wide') { width:100%; } @include respond-to('mobile') { width:100%; } @include respond-to('tablet') { width:75%; } @include respond-to('tablet-up') { width:87%; } }*/ } .PageContent.PageContent-archives { padding-top: 0; } .PageContent.PageContent--short { padding-bottom: 150px; } @media (max-width: 745px) { .PageContent.PageContent-productions { padding-top: 200px; } .PageContent.PageContent-productions .Filters { margin-top: -100px; } } .PageContent.PageContent-unpadded { padding-bottom: 0px; } .PageContent.PageContent-feed { padding-top: 255px; } .PageContent.PageContent-feed .Content-title { margin-top: -115px; } @media (max-width: 745px) { .PageContent.PageContent-feed { padding-top: 200px; } .PageContent.PageContent-feed.PageContent-feed-padded { padding-top: 320px; } .PageContent.PageContent-feed.PageContent-feed-padded .Content-title { margin-top: -220px; } .PageContent.PageContent-feed .Filters { margin-top: 0px; } .PageContent.PageContent-feed .Content-title { margin-top: -100px; } } @media (max-width: 745px) { .PageContent { padding-top: 100px; margin-left: 0; } } .PageContent.PageContent-text { padding-top: 30px; } .PageContent.PageContent-signup { width: 490px; margin: 0 auto; } .PageContent.PageContent--news { padding: 10px 0px; border-bottom: 1px solid #ddd; } .PageContent-section { margin-bottom: 1em; width: 50%; padding-left: 0; } .PageContent-section h3 { font-size: 14px; /*color:$base-color-light;*/ } .PageContent-section h3 { font-family: "Calibre Light", arial, sans-serif; font-size: 18px; text-transform: uppercase; letter-spacing: 3px; } .PageContent-section h3:after { content: '\2014'; display: block; } .PageContent-section p { margin-right: 15px; } @media (max-width: 745px) { .PageContent-section p { margin-right: 0px; } } .PageContent-section p.large { font-family: "Calibre Light", arial, sans-serif; font-size: 24px; line-height: 28px; letter-spacing: 1px; } .PageContent-section.PageContent-section--thin { width: 25%; margin-bottom: 2em; } @media (max-width: 745px) { .PageContent-section.PageContent-section--thin { width: 100%; } } @media (min-width: 746px) and (max-width: 1023px) { .PageContent-section.PageContent-section--thin { width: 50%; } } .PageContent-section.PageContent-section-double { width: 100%; padding-right: 15px; margin-bottom: 30px; position: relative; } @media (max-width: 745px) { .PageContent-section.PageContent-section-double { padding-right: 0px; } } .PageContent-section.PageContent-section-featured { padding: 15px 0px; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; } .PageContent-section.PageContent-section-featured .quote { margin-bottom: 1em; } .PageContent-section.PageContent-section-featured .quote p { margin-top: 0px; } .Template--grid .PageContent-section { margin-bottom: 15px; } .PageContent-section.PageContent-text-section { padding-right: 30px; } @media (min-width: 746px) and (max-width: 1023px) { .PageContent-section { width: 100%; } } @media (max-width: 745px) { .PageContent-section { width: 100%; } } .PageContent-section span.img { display: inline-block; margin-right: 15px; } @media (max-width: 745px) { .PageContent-section span.img { margin-right: 0; } } .PageContent-section span.img img { width: 100%; } .PageContent-section span.img.halfwidth { width: 50%; } .PageContent-section span.img.logo { width: 40%; margin-bottom: 20px; } .PageContent-section span.img.logo img { width: 70%; } .PageContent-section .quote p { font-family: "Calibre Light", arial, sans-serif; font-size: 16px; line-height: 18px; letter-spacing: 3px; margin: 25px 0 4px 0; } .PageContent-section .videoEmbed { margin-right: 15px; margin-bottom: 0; } @media (max-width: 745px) { .PageContent-section .videoEmbed { margin-right: 0; } } .PageContent-section .videoEmbed .Poster { width: 100%; height: 100%; cursor: pointer; position: relative; } .PageContent-section .videoEmbed .Poster:after { content: ''; display: block; position: absolute; width: 64px; height: 64px; left: 50%; top: 50%; margin: -32px 0 0 -32px; background-image: url(/ui/img/play.png); background-size: 64px 64px; } .PageContent-section .videoEmbed .Poster:hover:after { opacity: 0.5; } .PageContent-section .review { /* min-height: 120px; */ text-align: center; padding: 0 0 15px 0; } .PageContent-section .review p.citation { font-size: 14px; } .PageContent-section .review p.citation:before { display: block; } .PageContent-section .review .quote p { margin-top: 0; } .PageContent-section p.citation { margin: 0 0 1em 0; font-size: 12px; } .PageContent-section p.citation:before { content: '\2014'; display: inline; margin: 0 5px 0 0; } .PageContent-section .Spaces-donate { width: 100%; padding-top: 16px; } .PageContent-section .Spaces-donate p.donate a { text-decoration: none !important; width: 205px; text-align: center; } .PageContent-section .Spaces-donate p.donate a:hover { color: white; } .PageContent-section .Spaces-donate .Spaces-donate--left { display: inline-block; width: 50%; vertical-align: top; } .PageContent-section .Spaces-donate .Spaces-donate--right { display: inline-block; width: 50%; vertical-align: top; } .PageContent-pagination { position: relative; padding: 20px 0; padding-left: 20px; display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; width: 100%; text-align: center; } .PageContent-griditem { position: relative; width: 25%; padding-left: 20px; padding-bottom: 10px; } .Template--wide .PageContent-griditem { padding-left: 10px; } @media (max-width: 745px) { .Template--wide .PageContent-griditem { width: 100%; padding-left: 0; } } .Template--wide .PageContent-griditem a { /* cursor: crosshair */ } .Template--wide .PageContent-griditem .PageContent-description { margin-left: 10px; width: calc(100% - 20px); border: 0; padding: 0; margin-top: 50px; /* @include respond-to('mobile') { width:100%; margin-left:0; } */ } .Template--wide .PageContent-griditem .PageContent-description h3 { margin: 0px; } @media (max-width: 745px) { .PageContent-griditem { width: 100%; padding-left: 0; } } @media (min-width: 746px) and (max-width: 1023px) { .PageContent-griditem.feed { width: 50%; } } @media (min-width: 746px) { .PageContent-griditem.feed { width: 100%; } } @media (min-width: 1024px) { .PageContent-griditem.feed { width: 50%; } } @media (min-width: 1470px) { .PageContent-griditem.feed { width: 33.33%; } } @media (min-width: 1800px) { .PageContent-griditem.feed { width: 33.33%; } } .PageContent-griditem.text { width: 50%; } @media (max-width: 745px) { .PageContent-griditem.text { width: 100%; } } .PageContent-griditem.PageContent-griditem-production { position: relative; } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay { position: absolute; z-index: 5; top: 0px; left: 10px; width: calc(100% - 10px); height: 30px; background-color: rgba(0, 0, 0, 0.6); overflow: hidden; transition: height 0.2s ease-out; pointer-events: none; } @media (max-width: 745px) { .PageContent-griditem.PageContent-griditem-production .PageContent-overlay { left: 0px; width: 100%; } } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay.clickable { pointer-events: all; height: 50px; } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay.clickable p.grey { opacity: 1; } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay.clickable a { color: white; text-decoration: underline; } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay h3 { color: white; padding-left: 10px; margin-top: 5px; } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay p { opacity: 0; color: white; transition: opacity 0.5s ease-out; } .PageContent-griditem.PageContent-griditem-production .PageContent-overlay p.grey { padding-left: 10px; font-family: "Calibre Regular", arial, sans-serif; } .PageContent-griditem.PageContent-griditem-production:hover .PageContent-overlay { height: calc(100% - 10px); } .PageContent-griditem.PageContent-griditem-production:hover .PageContent-overlay p { opacity: 1; } @media (max-width: 745px) { .PageContent-griditem.PageContent-griditem-production { width: 100%; } .PageContent-griditem.PageContent-griditem-production:nth-child(-n + 2) h3 { /* border-top:1px solid black; */ } } @media (min-width: 746px) and (max-width: 1023px) { .PageContent-griditem.PageContent-griditem-production { width: 50%; } .PageContent-griditem.PageContent-griditem-production:nth-child(-n + 3) h3 { /* border-top:1px solid black; */ } } @media (min-width: 1024px) { .PageContent-griditem.PageContent-griditem-production { width: 33.33%; } .PageContent-griditem.PageContent-griditem-production:nth-child(-n + 5) h3 { /* border-top:1px solid black; */ } } @media (min-width: 1200px) { .PageContent-griditem.PageContent-griditem-production { width: 25%; } .PageContent-griditem.PageContent-griditem-production:nth-child(-n + 5) h3 { /* border-top:1px solid black; */ } } @media (min-width: 1470px) { .PageContent-griditem.PageContent-griditem-production { width: 20%; } .PageContent-griditem.PageContent-griditem-production:nth-child(-n + 6) h3 { /* border-top:1px solid black; */ } } @media (min-width: 1800px) { .PageContent-griditem.PageContent-griditem-production { width: 16.6666%; } .PageContent-griditem.PageContent-griditem-production:nth-child(-n + 7) h3 { /* border-top:1px solid black; */ } } .PageContent-griditem img { position: relative; top: 0px; left: 0px; z-index: 2; transition: opacity 0.3s cubic-bezier(0.23, 1, 0.32, 1); margin-bottom: 5px; pointer-events: none; } .PageContent-griditem .PageContent-description { position: absolute; top: 0px; left: 0px; padding-top: 0px; margin-left: 20px; border-top: 1px solid black; padding-top: 3px; } @media (max-width: 745px) { .PageContent-griditem .PageContent-description { margin: 0; width: 100%; } } .PageContent-griditem h3 { margin-top: 0px; padding-left: 10px; padding-top: 3px; } .PageContent-griditem h3.feed { margin: 3px 0 0 0; padding: 0; padding-top: 3px; } .PageContent-griditem h3, .PageContent-griditem p.grey { font-size: 14px; font-family: "Calibre SemiBold", arial, sans-serif; } .PageContent-griditem:hover { /*img { opacity: 0; }*/ } .PageContent-griditem.no-fade:hover img { opacity: 1; } .PageContent-section--beta, .PageContent-section--quote { width: 50%; } .Site--mobile .PageContent-section--beta, .Site--mobile .PageContent-section--quote { width: 100%; } .Content--dimmed { background-color: #ddd !important; } .Content--dimmed .Content-title, .Content--dimmed .List-item { opacity: 0.3; } .Content--dimmed .Content-title.List-item--current, .Content--dimmed .List-item.List-item--current { opacity: 1; } .Content { /* &.Slideshow { &:after { content:''; display: block; position: absolute; width:43px; height:26px; background-image: url(/ui/img/arrow-down-thin.png); background-size: 43px 26px; z-index:99; bottom: 50px; left:50%; margin-left: -21px; pointer-events: none; } } */ /*&.Content--fullHeight { &.down { cursor: url(/ui/img/arrow-down-grey.png),auto; } padding-bottom: 0px !important; }*/ } .Content.Content--spaceHire { min-height: 0px !important; } .Content .bgImage { position: absolute; z-index: 1; left: 0px; bottom: 0px; width: 100%; height: 100%; overflow: hidden; } .Content .bgImage img { position: absolute; width: 100%; left: 0px; bottom: 0px; } .Content:last-child { /* padding-bottom: 130px !important; */ } .Content:last-child .bgImage { bottom: 130px; } .Content.Portrait-only { display: none; } @media (max-width: 414px) { .Content.Landscape-only { display: none; } .Content.Portrait-only { display: block; } } .Content.Slideshow.left { cursor: none; } .Content.Slideshow.right { cursor: none; } .Content.Slideshow.down { cursor: none; } .Content.Content--down { /* cursor: none; */ } .Content.Content--full { width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; } @media (max-width: 745px) { .Content.Content--full { position: absolute; } } .Content.Content--wide { width: 100%; background-color: white; position: relative; transition: background-color 0.3s ease-out; } .Content.Content--wide.Content--grey { background-color: #000; } .Content.Content--wide.Content--black { background-color: #000; } .Content .Content-title { font-size: 22px; letter-spacing: 4px; text-transform: uppercase; padding: 0px 0 25px 0px; font-family: "Calibre Light", arial, sans-serif; text-align: center; } .Content .Content-title.lower { text-transform: none; } .Content .Content-title:after { content: '\2014'; display: block; margin-top: 20px; } .Content .Content-title.scroller { padding: 0; -webkit-transform: rotate(180deg); transform: rotate(180deg); position: absolute; top: -55px; cursor: pointer; width: 100%; color: white; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .Content .Content-title.scroller:after { display: none; } .Content .Content-title.scroller:before { content: ''; display: block; background-image: url(/ui/img/arrow-up-white-thin.png); background-repeat: no-repeat; width: 100%; height: 10px; background-size: 10px 5px; background-position: center center; position: static; margin-bottom: 10px; } .Content .Content-title.scroller:hover { color: white; } .Content .Content-title.scroller.manual { color: black; } .Content .Content-title.scroller.manual:hover { color: #999; } .Template-body { width: calc(100% - 310px); max-width: 1000px; margin: 0px auto; position: relative; z-index: 2; } @media (min-width: 746px) and (max-width: 1023px) { .Content--news .Template-body { width: calc(100% - 80px); } } @media (max-width: 745px) { .Template-body { width: calc(100% - 40px); padding-left: 0px; } } .Template-body.Template--wide { width: calc(100% - 100px); max-width: 100%; } @media (max-width: 745px) { .Template-body.Template--wide { width: calc(100% - 60px); } } .Template-body article { width: 100%; } .Template-body.Template--news { padding-top: 205px; } .Template-body.Template--news h3 { font-family: "Calibre Light", arial, sans-serif; text-transform: uppercase; letter-spacing: 3px; padding: 0; margin: 0 0 7px 0; } .Template-body.Template--grid .PageContent { /* margin-left: 0px; */ padding-top: 15px; } .Project--nav { position: absolute; bottom: 130px; left: -10px; z-index: 20; width: 100%; } @media (max-width: 745px) { .Project--nav { left: 0px; } } .PageContent-pagination .Project--nav { bottom: 0px; } .Project--nav .List { width: calc(100% - 310px); max-width: 1000px; margin: 0px auto; } @media (max-width: 745px) { .Project--nav .List { width: calc(100% - 20px); left: 10px; } } .video { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; z-index: 1; } .touch video { display: none; } .rsSlide p { position: absolute; top: 50%; right: 0px; width: 100%; text-align: right; font-family: "Calibre Light", arial, sans-serif; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .rsSlide p a { display: inline-block; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; right: 35px; top: 50%; margin-right: -150px; white-space: nowrap; width: 300px; height: 30px; line-height: 30px; text-align: center; top: 50%; text-transform: uppercase; -webkit-transform: rotate(90deg); transform: rotate(90deg); color: white; } .rsSlide p a:hover { text-decoration: none; color: #999; } .video .mejs-layers, .video .mejs-controls { display: none; } .royalSlider { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: white; z-index: -1; visibility: hidden; } .royalSlider.show { display: block; } .mobile .royalSlider { top: 0px; } @media (max-width: 745px) { .royalSlider { position: absolute; } } .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; position: fixed; top: 30px; right: 89px; width: 24px; height: 15px; background-repeat: no-repeat; background-image: url(/img/sprites.svg); background-position: -45px 0px; } .mobile .rsArrow, .mobile .rsThumbsArrow { top: 25px; } .rsArrow.rsArrowRight, .rsThumbsArrow.rsArrowRight { right: 55px; left: auto; background-image: url(/img/sprites.svg); background-position: -15px 0px; } .rsThumb { float: left; position: relative; } .rsArrow, .rsNav, .rsThumbsArrow { opacity: 1; transition: opacity 0.3s linear; } .rsHidden { opacity: 0; visibility: hidden; transition: visibility 0s linear 0.3s,opacity 0.3s linear; } .rsGCaption { position: absolute; left: 50px; bottom: 13px; color: #999; pointer-events: none; } /* 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; transition: 0s; display: none; } .rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100%; } .rsSlide img { margin: 100px 30px 0 30px; } .mobile .rsSlide img { margin: 70px 0 0 10px; } .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; -ms-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 { 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(grab.png) 8 8, move; } .grabbing-cursor { cursor: url(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(blank.gif); } table.dataTable span { display: block; margin: 0px 3px; padding: 3px 3px; border-top: 1px solid #CCC; } table.dataTable thead th { text-align: left; padding: 0; cursor: pointer; outline: 0; font-family: "Calibre SemiBold", arial, sans-serif; } table.dataTable thead th span { border-bottom: 1px solid #000; border-top: 0; } table.dataTable thead th.sorting_asc span, table.dataTable thead th.sorting_desc span { background-color: #eee; } table.dataTable tbody td { padding: 0; cursor: pointer; vertical-align: top; } table.dataTable tbody tr:hover td:first-child { /* font-family: $base-font-family-bold; */ } table.dataTable tbody tr.over td span { border-top: 1px solid #fff; } table.dataTable tbody tr.open td { /*border-top: 1px solid $base-color-light;;*/ font-family: "Calibre SemiBold", arial, sans-serif; } table.dataTable tbody tr.open td span { border-top: 2px solid #fff; margin: 0; padding: 3px 6px; } table.dataTable tbody tr.open-next td span { border-top: 1px solid #fff; margin: 0; padding: 3px 6px; } table.dataTable tbody tr.open.open-next td span { border-top: 2px solid #fff; } table.dataTable tbody tr.info:hover td { font-family: "Calibre Regular", arial, sans-serif; } table.dataTable tbody tr:first-child td { border: 0; } table.dataTable tbody tr.info td { cursor: auto; } table.dataTable tbody tr.info td.image { padding-left: 6px; padding-bottom: 6px; } table.dataTable tbody tr.info td.text { padding-left: 6px; padding-bottom: 6px; } table.dataTable tbody tr.info:hover td { font-family: "Calibre Regular", arial, sans-serif; } .Filters { position: fixed; top: 75px; z-index: 999; right: 50px; background-color: rgba(255, 255, 255, 0.7); } .Site--black .Filters { background-color: rgba(0, 0, 0, 0.7); } .Site--black .Filters input[type='text'], .Site--black .Filters input[type='search'] { background-color: #333; color: #999; } .Site--black .Filters p, .Site--black .Filters a { color: white; } .Filters input[type='text'], .Filters input[type='search'] { width: 100%; color: #505050; } .Filters p { position: relative; } .Filters p span.cancel { position: absolute; top: 6px; right: 5px; cursor: pointer; z-index: 5; font-size: 16px; } .Filters p span.cancel:hover { color: #999; } .Content .Filters { display: none; } @media (max-width: 745px) { .Filters { display: none; position: relative !important; right: auto !important; top: auto !important; margin-bottom: 40px; z-index: 10; } .Content .Filters { display: block; } .Filters input[type='text'], .Filters input[type='search'] { width: 100%; } .Filters ul { width: 100% !important; } } .Filters .reset { margin-top: 5px; } .Filters .reset a { display: block; padding: 2px; } .Filters .Filters-container { margin-top: 10px; } .Filters .Filters-container p { width: 200px; cursor: pointer; font-family: "Calibre SemiBold", arial, sans-serif; margin-bottom: 0px; padding: 2px; } .Filters .Filters-container p:after { position: absolute; content: ''; width: 10px; height: 5px; background-image: url(/ui/img/arrow-down-grey-thin.png); background-size: 10px 5px; background-repeat: no-repeat; right: 0px; top: 7px; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } @media (max-width: 745px) { .Filters .Filters-container p { width: 100%; } } .Filters .Filters-container.open > ul { display: block; } .Filters .Filters-container.open > ul ul { max-height: 200px; overflow: hidden; overflow-y: scroll; } .Filters .Filters-container.open p.title:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .Filters .Filters-container.Filters-single > ul { display: block; } .Filters .Filters-container.Filters-single > ul > li > a { font-family: "Calibre SemiBold", arial, sans-serif; } .Filters .Filters-container > ul { display: none; } @media (max-width: 745px) { .Filters .Filters-container > ul { position: absolute !important; background-color: rgba(255, 255, 255, 0.7); } .Site--black .Filters .Filters-container > ul { background-color: rgba(0, 0, 0, 0.7); } } .Filters .Filters-container > ul > li > a:after { position: absolute; content: ''; width: 10px; height: 5px; background-image: url(/ui/img/arrow-down-grey-thin.png); background-size: 10px 5px; background-repeat: no-repeat; right: 0px; top: 7px; transition: -webkit-transform 0.4s ease; transition: transform 0.4s ease; transition: transform 0.4s ease, -webkit-transform 0.4s ease; } .Filters .Filters-container > ul > li > a.open:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .Filters .Filters-container > ul > li.active span.cancel { display: block; } .Filters .Filters-container > ul > li.active a:after { display: none; } .Filters .Filters-container > ul > li li.active { font-family: "Calibre SemiBold", arial, sans-serif; } .Filters .Filters-container > ul > li li.active span.cancel { display: block; } .Filters .Filters-container > ul > li li.active a:after { display: none; } .Filters ul { width: 200px; position: relative; } .Filters ul a { display: block; padding: 2px; color: black; /* background-color: rgb(255,255,255); */ text-decoration: none !important; font-family: "Calibre Regular", arial, sans-serif !important; } .Filters ul a:hover { text-decoration: none !important; } .Filters ul a:hover { text-decoration: none; } .Filters ul li { margin: 0; position: relative; } .Filters ul li.active, .Filters ul li.selected { font-family: "Calibre SemiBold", arial, sans-serif; } .Filters ul li span.cancel { position: absolute; top: 0px; right: 0px; cursor: pointer; z-index: 5; font-size: 16px; display: none; } .Filters ul li span.cancel:hover { color: #999; } .Filters ul ul { display: none; } .Filters ul ul li { font-family: "Calibre Regular", arial, sans-serif !important; } .Filters ul ul li a { padding-left: 18px; } .Filters ul ul li a:hover:before { content: '\2014'; display: inline; margin: 0 5px 0 -17px; } .Filters ul ul li.active a:before { content: '\2014'; display: inline; margin: 0 5px 0 -17px; } form input[type="text"], form input[type="search"] { color: #333; background-color: #e5e5e5; border: 0; padding: 7px 2px 2px 2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } form .field-line { width: 100%; margin-bottom: 8px; } form .field-line input[type="text"], form .field-line input[type="search"] { width: 100%; } form .field-line .field-label, form .field-line .field { display: inline-block; vertical-align: top; width: 50%; } form .field-line .field-label.field-label, form .field-line .field.field-label { font-family: "Calibre SemiBold", arial, sans-serif; width: calc(50% - 8px); padding: 6px 0 1px 2px; border-top: 2px solid #e5e5e5; border-bottom: 2px solid #e5e5e5; margin-right: 8px; } form .field-line .field-options { width: 50%; display: inline-block; vertical-align: top; } form .field-line .field-options ul { margin: 0; padding: 0; } form .field-line .field-options ul li { display: inline-block; width: 50%; } form .field-submit { width: 100%; text-align: center; padding-top: 8px; } form input[type="checkbox"] { -webkit-appearance: checkbox; } form input[type="submit"] { font-family: "Calibre SemiBold", arial, sans-serif; letter-spacing: 2px; background-color: white; border: 2px solid #e5e5e5; padding: 7px 10px 2px 10px; text-transform: uppercase; } form input[type="submit"]:hover { background-color: #e5e5e5; } /*! Chosen, a Select Box Enhancer for jQuery and Prototype by Patrick Filler for Harvest, http://getharvest.com Version 1.3.0 Full source at https://github.com/harvesthq/chosen Copyright (c) 2011-2014 Harvest http://getharvest.com MIT License, https://github.com/harvesthq/chosen/blob/master/LICENSE.md This file is generated by `grunt build`, do not edit it by hand. */ /* @group Base */ .chosen-container { position: relative; display: inline-block; vertical-align: middle; font-family: "Calibre Regular", arial, sans-serif; font-size: 14px; zoom: 1; *display: inline; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; max-width: 100%; } .chosen-container a { color: #b2b2b2; text-decoration: none; } .chosen-container * { box-sizing: border-box; } .chosen-container .chosen-drop { position: absolute; top: 100%; left: -9999px; z-index: 1010; width: 100%; border: 0px; border-top: 0; background: #e5e5e5; } .chosen-container.chosen-with-drop .chosen-drop { left: 0; } .chosen-container a { cursor: pointer; color: #787878; text-decoration: none; } .chosen-container a:hover { text-decoration: none; } /* @end */ /* @group Single Chosen */ .chosen-container-single .chosen-single { position: relative; display: block; overflow: hidden; padding: 3px 0 0 2px; background-color: #e5e5e5; color: #787878; text-decoration: none; white-space: nowrap; line-height: 24px; } .chosen-container-single .chosen-default { color: #999; } .chosen-container-single .chosen-single span { display: block; overflow: hidden; margin-right: 26px; text-overflow: ellipsis; white-space: nowrap; } .chosen-container-single .chosen-single-with-deselect span { margin-right: 38px; } .chosen-container-single .chosen-single abbr { position: absolute; top: 6px; right: 26px; display: block; width: 12px; height: 12px; background: url("chosen-sprite.png") -42px 1px no-repeat; font-size: 1px; } .chosen-container-single .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single.chosen-disabled .chosen-single abbr:hover { background-position: -42px -10px; } .chosen-container-single .chosen-single div { position: absolute; top: 0; right: 0; display: block; width: 18px; height: 100%; } .chosen-container-single .chosen-single div b { display: block; width: 100%; height: 100%; background: url("/ui/img/chosen-btn.png") no-repeat 0px 4px; } .chosen-container-single .chosen-search { position: relative; z-index: 1010; margin: 0; padding: 3px 4px; white-space: nowrap; } .chosen-container-single .chosen-search input[type="text"] { margin: 1px 0; padding: 4px 20px 4px 5px; width: 100%; height: auto; outline: 0; border: 1px solid #aaa; background: white url("chosen-sprite.png") no-repeat 100% -20px; background: url("chosen-sprite.png") no-repeat 100% -20px; font-size: 1em; font-family: sans-serif; line-height: normal; border-radius: 0; } .chosen-container-single .chosen-drop { margin-top: -1px; background-clip: padding-box; } .chosen-container-single.chosen-container-single-nosearch .chosen-search { position: absolute; left: -9999px; } /* @end */ /* @group Results */ .chosen-container .chosen-results { position: relative; overflow-x: hidden; overflow-y: auto; margin: 0 4px 4px 0; padding: 0 0 0 4px; max-height: 240px; -webkit-overflow-scrolling: touch; } .chosen-container .chosen-results li { display: none; margin: 0; padding: 5px 6px; list-style: none; line-height: 15px; word-wrap: break-word; -webkit-touch-callout: none; } .chosen-container .chosen-results li.active-result { display: list-item; cursor: pointer; } .chosen-container .chosen-results li.disabled-result { display: list-item; color: #ccc; cursor: default; } .chosen-container .chosen-results li.highlighted { background-color: #ccc; } .chosen-container .chosen-results li.no-results { color: #777; display: list-item; background: #f4f4f4; } .chosen-container .chosen-results li.group-result { display: list-item; font-weight: bold; cursor: default; } .chosen-container .chosen-results li.group-option { padding-left: 15px; } .chosen-container .chosen-results li em { font-style: normal; text-decoration: underline; } /* @end */ /* @group Multi Chosen */ .chosen-container-multi .chosen-choices { position: relative; overflow: hidden; margin: 0; padding: 0 5px; width: 100%; height: auto !important; height: 1%; border: 1px solid #aaa; background-color: #fff; background-image: linear-gradient(#eeeeee 1%, #ffffff 15%); cursor: text; } .chosen-container-multi .chosen-choices li { float: left; list-style: none; } .chosen-container-multi .chosen-choices li.search-field { margin: 0; padding: 0; white-space: nowrap; } .chosen-container-multi .chosen-choices li.search-field input[type="text"] { margin: 1px 0; padding: 0; height: 25px; outline: 0; border: 0 !important; background: transparent !important; box-shadow: none; color: #999; font-size: 100%; font-family: sans-serif; line-height: normal; border-radius: 0; } .chosen-container-multi .chosen-choices li.search-choice { position: relative; margin: 3px 5px 3px 0; padding: 3px 20px 3px 5px; border: 1px solid #aaa; max-width: 100%; border-radius: 3px; background-color: #eeeeee; background-image: linear-gradient(#f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); background-size: 100% 19px; background-repeat: repeat-x; background-clip: padding-box; box-shadow: 0 0 2px white inset, 0 1px 0 rgba(0, 0, 0, 0.05); color: #333; line-height: 13px; cursor: default; } .chosen-container-multi .chosen-choices li.search-choice span { word-wrap: break-word; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close { position: absolute; top: 4px; right: 3px; display: block; width: 12px; height: 12px; background: url("chosen-sprite.png") -42px 1px no-repeat; font-size: 1px; } .chosen-container-multi .chosen-choices li.search-choice .search-choice-close:hover { background-position: -42px -10px; } .chosen-container-multi .chosen-choices li.search-choice-disabled { padding-right: 5px; border: 1px solid #ccc; background-color: #e4e4e4; background-image: linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eeeeee 100%); color: #666; } .chosen-container-multi .chosen-choices li.search-choice-focus { background: #d4d4d4; } .chosen-container-multi .chosen-choices li.search-choice-focus .search-choice-close { background-position: -42px -10px; } .chosen-container-multi .chosen-results { margin: 0; padding: 0; } .chosen-container-multi .chosen-drop .result-selected { display: list-item; color: #ccc; cursor: default; } /* @end */ /* @group Active */ .chosen-container-active.chosen-with-drop .chosen-single div { border-left: none; background: transparent; } .chosen-container-active.chosen-with-drop .chosen-single div b { background-position: -18px 2px; } .chosen-container-active .chosen-choices { border: 1px solid #5897fb; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .chosen-container-active .chosen-choices li.search-field input[type="text"] { color: #222 !important; } /* @end */ /* @group Disabled Support */ .chosen-disabled { opacity: 0.5 !important; cursor: default; } .chosen-disabled .chosen-single { cursor: default; } .chosen-disabled .chosen-choices .search-choice .search-choice-close { cursor: default; } /* @end */ /* @group Right to Left */ .chosen-rtl { text-align: right; } .chosen-rtl .chosen-single { overflow: visible; padding: 0 8px 0 0; } .chosen-rtl .chosen-single span { margin-right: 0; margin-left: 26px; direction: rtl; } .chosen-rtl .chosen-single-with-deselect span { margin-left: 38px; } .chosen-rtl .chosen-single div { right: auto; left: 3px; } .chosen-rtl .chosen-single abbr { right: auto; left: 26px; } .chosen-rtl .chosen-choices li { float: right; } .chosen-rtl .chosen-choices li.search-field input[type="text"] { direction: rtl; } .chosen-rtl .chosen-choices li.search-choice { margin: 3px 5px 3px 0; padding: 3px 5px 3px 19px; } .chosen-rtl .chosen-choices li.search-choice .search-choice-close { right: auto; left: 4px; } .chosen-rtl.chosen-container-single-nosearch .chosen-search, .chosen-rtl .chosen-drop { left: 9999px; } .chosen-rtl.chosen-container-single .chosen-results { margin: 0 0 4px 4px; padding: 0 4px 0 0; } .chosen-rtl .chosen-results li.group-option { padding-right: 15px; padding-left: 0; } .chosen-rtl.chosen-container-active.chosen-with-drop .chosen-single div { border-right: none; } .chosen-rtl .chosen-search input[type="text"] { padding: 4px 5px 4px 20px; background: white url("chosen-sprite.png") no-repeat -30px -20px; background: url("chosen-sprite.png") no-repeat -30px -20px; direction: rtl; } .chosen-rtl.chosen-container-single .chosen-single div b { background-position: 6px 2px; } .chosen-rtl.chosen-container-single.chosen-with-drop .chosen-single div b { background-position: -12px 2px; } /* @end */ /* @group Retina compatibility */ @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 144dpi) { .chosen-rtl .chosen-search input[type="text"], .chosen-container-single .chosen-single abbr, .chosen-container-single .chosen-single div b, .chosen-container-single .chosen-search input[type="text"], .chosen-container-multi .chosen-choices .search-choice .search-choice-close, .chosen-container .chosen-results-scroll-down span, .chosen-container .chosen-results-scroll-up span { background-image: url("/ui/img/chosen-btn2x.png") !important; background-position: 3px 7px !important; background-size: 10px 13px !important; background-repeat: no-repeat !important; } } /* @end */ #cursor { position: absolute; top: 0px; left: 0px; z-index: 999; width: 43px; height: 43px; background-image: url(/ui/img/arrow-down.png); background-repeat: no-repeat; display: none; pointer-events: none; } .Site--cursor-grey #cursor { background-image: url(/ui/img/arrow-down-grey.png); } .Site--cursor-right #cursor { background-image: url(/ui/img/arrow-right.png); } .Site--cursor-left #cursor { background-image: url(/ui/img/arrow-left.png); } .Site--cursor #cursor { display: block; } .no-touch .Slideshow video { pointer-events: none; } .no-touch .Slideshow .mejs-container .mejs-controls { visibility: hidden !important; } @media (min-width: 746px) { .no-touch .Slideshow .rsArrow { width: 200px; height: 100%; cursor: none; } .no-touch .Slideshow .rsArrow.rsArrowLeft { left: 0; top: 0; } .no-touch .Slideshow .rsArrow.rsArrowRight { left: auto; right: 0; } } .List--projectNav { margin: 0px; width: 100%; } .List--projectNav .List-item { height: 16px; width: 33%; padding: 0; text-align: center; font-size: 18px; letter-spacing: 3px; text-transform: uppercase; } .List--projectNav .List-item.List-item--back { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .List--projectNav .List-item.List-item--back a { display: inline-block; padding-top: 4px; } .List--projectNav .List-item a:hover { text-decoration: none; border: 0; opacity: 0.6; } .List--projectNav .List-item.List-item--prev { text-align: left; } .List--projectNav .List-item.List-item--prev a:before { display: inline-block; content: ''; width: 5px; height: 10px; background-image: url(/ui/img/arrow-left-grey-thin.png); background-repeat: no-repeat; background-size: 5px 10px; margin-right: 10px; } .List--projectNav .List-item.List-item--next { text-align: right; } .List--projectNav .List-item.List-item--next a:after { display: inline-block; content: ''; width: 5px; height: 10px; background-image: url(/ui/img/arrow-right-grey-thin.png); background-repeat: no-repeat; background-size: 5px 10px; margin-left: 10px; } @media (max-width: 745px) { .List--projectNav .List-item { font-size: 14px; } } .List--news { width: 100%; } .List--news .List-item { width: 33%; min-height: 450px; transition: opacity 0.4s ease-out; } @media (min-width: 746px) and (max-width: 1023px) { .List--news .List-item { width: 50%; } } @media (max-width: 745px) { .List--news .List-item { width: 100%; } } .List--news .List-item .Item--full { display: none; } .List--news .List-item .Item--summary { display: block; } .List--news .List-item.List-item--current { width: 66%; min-height: 0; } @media (min-width: 746px) and (max-width: 1023px) { .List--news .List-item.List-item--current { width: 100%; } } @media (max-width: 745px) { .List--news .List-item.List-item--current { width: 100%; } } .List--news .List-item.List-item--current .Item--full { display: block; } .List--news .List-item.List-item--current .Item--summary { display: none; } .List--news .List-item.List-item--current .Item { background-color: white; } .List--news .List-item.List-item--current .Item .Item-head, .List--news .List-item.List-item--current .Item .Item-body { padding: 15px; } .List--news .List-item .Summary { display: none; } .List--foot { width: 100%; height: 105px; margin: 0px; } @media (max-width: 745px) { .List--foot { height: auto; } } .List--foot:before { content: ''; display: inline-block; height: 100%; width: 1px; vertical-align: middle; } .List--foot .List-item { padding: 0px; vertical-align: middle; } .List--foot .List-item p { padding: 2px 0 0 0; margin: 0; color: white; } .List--foot .List-item p a { color: white; text-decoration: underline; } .List--foot .List-item p.donate a { text-decoration: none; } @media (min-width: 746px) and (max-width: 1023px) { .List--foot .List-item { width: 23% !important; } } @media (max-width: 745px) { .List--foot .List-item { width: 45% !important; padding: 10px 0px; } } .List--foot .List-item.List-item--social { width: 12%; text-align: center; } @media (max-width: 745px) { .List--foot .List-item.List-item--social { text-align: left; } } .List--foot .List-item.List-item--tel { width: 15%; } .List--foot .List-item.List-item--signup { width: 43%; text-align: center; } @media (min-width: 746px) and (max-width: 1023px) { .List--foot .List-item.List-item--signup { display: none; } } @media (max-width: 745px) { .List--foot .List-item.List-item--signup { display: none; } } .List--foot .List-item.List-item--signup ul { height: 35px; } .List--foot .List-item.List-item--signup li { display: inline-block; vertical-align: middle; width: 60%; padding: 7px; text-align: left; height: 35px; } .List--foot .List-item.List-item--signup li:first-child { text-align: right; width: 40%; } .List--foot .List-item.List-item--copyright { width: 18%; } .List--foot .List-item.List-item--sponsor { width: 9%; } .List--foot .List-item.List-item--sponsor img { width: 100%; } .Item h3 { font-family: "Calibre Light", arial, sans-serif; line-height: 1em; text-transform: uppercase; letter-spacing: 3px; padding: 0; margin: 15px 0 17px 0; } .Item .Item-media { margin-bottom: 15px; } .Item .Item-head h3 { margin-top: 0; } .List-item--current .Item .Item-body .Item-column { display: inline-block; width: 50%; padding-right: 10px; vertical-align: top; } .Item .Item-close { position: absolute; top: 15px; right: 15px; cursor: pointer; } .Carousel-prev, .Carousel-next { position: absolute; top: 50%; width: 10px; margin-top: -5px; cursor: pointer; } .Carousel-prev { left: -40px; } .Carousel-next { right: -25px; } @media (max-width: 745px) { .Carousel-prev { left: -15px; } .Carousel-next { right: -15px; } .Carousel-open { display: none; } } .Carousel-open { position: absolute; top: 10px; right: 25px; z-index: 20; cursor: pointer; width: 18px; } .ui-carousel { position: relative; top: 0px; left: 0px; width: 100%; height: 573px; /* Fullscreen options, very important ^^ */ /* ios controls over video bug, shifting video */ } @media (max-width: 745px) { .ui-carousel { height: 165px; } } .ui-carousel .video { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; z-index: 1; } .ui-carousel .touch video { display: none; } .ui-carousel .rsSlide p { position: absolute; top: 50%; right: 0px; width: 100%; text-align: right; font-family: "Calibre Light", arial, sans-serif; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .ui-carousel .rsSlide p a { display: inline-block; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; right: 35px; top: 50%; margin-right: -150px; white-space: nowrap; width: 300px; height: 30px; line-height: 30px; text-align: center; top: 50%; text-transform: uppercase; -webkit-transform: rotate(90deg); transform: rotate(90deg); color: white; } .ui-carousel .rsSlide p a:hover { text-decoration: none; color: #999; } .ui-carousel .video .mejs-layers, .ui-carousel .video .mejs-controls { display: none; } .ui-carousel .royalSlider > * { float: left; } .ui-carousel .rsWebkit3d .rsSlide { -webkit-transform: translateZ(0); } .ui-carousel .rsWebkit3d .rsSlide, .ui-carousel .rsWebkit3d .rsContainer, .ui-carousel .rsWebkit3d .rsThumbs, .ui-carousel .rsWebkit3d .rsPreloader, .ui-carousel .rsWebkit3d img, .ui-carousel .rsWebkit3d .rsOverflow, .ui-carousel .rsWebkit3d .rsBtnCenterer, .ui-carousel .rsWebkit3d .rsAbsoluteEl, .ui-carousel .rsWebkit3d .rsABlock, .ui-carousel .rsWebkit3d .rsLink { -webkit-backface-visibility: hidden; } .ui-carousel .rsFade.rsWebkit3d .rsSlide, .ui-carousel .rsFade.rsWebkit3d img, .ui-carousel .rsFade.rsWebkit3d .rsContainer { -webkit-transform: none; } .ui-carousel .rsOverflow { width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-carousel .rsVisibleNearbyWrap { width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-carousel .rsVisibleNearbyWrap .rsOverflow { position: absolute; left: 0; top: 0; } .ui-carousel .rsContainer { position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-carousel .rsArrow, .ui-carousel .rsThumbsArrow { cursor: pointer; position: fixed; top: 30px; right: 89px; width: 24px; height: 15px; background-repeat: no-repeat; background-image: url(/img/sprites.svg); background-position: -45px 0px; } .mobile .ui-carousel .rsArrow, .mobile .ui-carousel .rsThumbsArrow { top: 25px; } .ui-carousel .rsArrow.rsArrowRight, .ui-carousel .rsThumbsArrow.rsArrowRight { right: 55px; left: auto; background-image: url(/img/sprites.svg); background-position: -15px 0px; } .ui-carousel .rsThumb { float: left; position: relative; } .ui-carousel .rsArrow, .ui-carousel .rsNav, .ui-carousel .rsThumbsArrow { opacity: 1; transition: opacity 0.3s linear; } .ui-carousel .rsHidden { opacity: 0; visibility: hidden; transition: visibility 0s linear 0.3s,opacity 0.3s linear; } .ui-carousel .rsGCaption { position: absolute; left: 50px; bottom: 13px; color: #999; pointer-events: none; } .ui-carousel .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; } .ui-carousel .royalSlider .rsSlide.rsFakePreloader { opacity: 1 !important; transition: 0s; display: none; } .ui-carousel .rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100%; } .ui-carousel .royalSlider.rsAutoHeight, .ui-carousel .rsAutoHeight .rsSlide { height: auto; } .ui-carousel .rsContent { width: 100%; height: 100%; position: relative; } .ui-carousel .rsPreloader { position: absolute; z-index: 0; } .ui-carousel .rsNav { -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-carousel .rsNavItem { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25); } .ui-carousel .rsThumbs { cursor: pointer; position: relative; overflow: hidden; float: left; z-index: 22; } .ui-carousel .rsTabs { float: left; background: none !important; } .ui-carousel .rsTabs, .ui-carousel .rsThumbs { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-carousel .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; } .ui-carousel .rsVideoFrameHolder { position: absolute; left: 0; top: 0; background: #141414; opacity: 0; -webkit-transition: .3s; } .ui-carousel .rsVideoFrameHolder.rsVideoActive { opacity: 1; } .ui-carousel .rsVideoContainer iframe, .ui-carousel .rsVideoContainer video, .ui-carousel .rsVideoContainer embed, .ui-carousel .rsVideoContainer .rsVideoObj { position: absolute; z-index: 50; left: 0; top: 0; width: 100%; height: 100%; } .ui-carousel .rsVideoContainer.rsIOSVideo iframe, .ui-carousel .rsVideoContainer.rsIOSVideo video, .ui-carousel .rsVideoContainer.rsIOSVideo embed { box-sizing: border-box; padding-right: 44px; } .ui-carousel .rsABlock { left: 0; top: 0; position: absolute; z-index: 15; } .ui-carousel img.rsImg { max-width: none; } .ui-carousel .grab-cursor { cursor: url(grab.png) 8 8, move; } .ui-carousel .grabbing-cursor { cursor: url(grabbing.png) 8 8, move; } .ui-carousel .rsNoDrag { cursor: auto; } .ui-carousel .rsLink { left: 0; top: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 20; background: url(blank.gif); } .Mini-show { opacity: 0; pointer-events: none; position: fixed; z-index: 20; background-color: white; top: 0px; left: 0px; width: 100%; height: 100%; padding: 40px; transition: opacity 0.4s ease-out; box-sizing: border-box; } .when-Mini-show-is-active .Mini-show { opacity: 1; pointer-events: all; } .Mini-show-prev, .Mini-show-next { position: absolute; top: 50%; width: 10px; margin-top: -5px; cursor: pointer; } .Mini-show-prev { left: 30px; } .Mini-show-next { right: 30px; } .Mini-show-close { position: absolute; top: 50px; right: 50px; cursor: pointer; width: 18px; } .ui-fsCarousel { position: fixed; top: 40px; left: 40px; width: calc(100% - 80px); height: calc(100% - 80px); background-color: white; /* Fullscreen options, very important ^^ */ /* ios controls over video bug, shifting video */ } .ui-fsCarousel .video { position: absolute; top: 0; left: 0; width: 100%; height: auto; display: block; z-index: 1; } .ui-fsCarousel .touch video { display: none; } .ui-fsCarousel .rsSlide p { position: absolute; top: 50%; right: 0px; width: 100%; text-align: right; font-family: "Calibre Light", arial, sans-serif; font-size: 16px; line-height: 18px; letter-spacing: 3px; } .ui-fsCarousel .rsSlide p a { display: inline-block; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; position: absolute; right: 35px; top: 50%; margin-right: -150px; white-space: nowrap; width: 300px; height: 30px; line-height: 30px; text-align: center; top: 50%; text-transform: uppercase; -webkit-transform: rotate(90deg); transform: rotate(90deg); color: white; } .ui-fsCarousel .rsSlide p a:hover { text-decoration: none; color: #999; } .ui-fsCarousel .video .mejs-layers, .ui-fsCarousel .video .mejs-controls { display: none; } .ui-fsCarousel .royalSlider > * { float: left; } .ui-fsCarousel .rsWebkit3d .rsSlide { -webkit-transform: translateZ(0); } .ui-fsCarousel .rsWebkit3d .rsSlide, .ui-fsCarousel .rsWebkit3d .rsContainer, .ui-fsCarousel .rsWebkit3d .rsThumbs, .ui-fsCarousel .rsWebkit3d .rsPreloader, .ui-fsCarousel .rsWebkit3d img, .ui-fsCarousel .rsWebkit3d .rsOverflow, .ui-fsCarousel .rsWebkit3d .rsBtnCenterer, .ui-fsCarousel .rsWebkit3d .rsAbsoluteEl, .ui-fsCarousel .rsWebkit3d .rsABlock, .ui-fsCarousel .rsWebkit3d .rsLink { -webkit-backface-visibility: hidden; } .ui-fsCarousel .rsFade.rsWebkit3d .rsSlide, .ui-fsCarousel .rsFade.rsWebkit3d img, .ui-fsCarousel .rsFade.rsWebkit3d .rsContainer { -webkit-transform: none; } .ui-fsCarousel .rsOverflow { width: 100%; height: 100%; position: relative; overflow: hidden; float: left; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-fsCarousel .rsVisibleNearbyWrap { width: 100%; height: 100%; position: relative; overflow: hidden; left: 0; top: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-fsCarousel .rsVisibleNearbyWrap .rsOverflow { position: absolute; left: 0; top: 0; } .ui-fsCarousel .rsContainer { position: relative; width: 100%; height: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-fsCarousel .rsArrow, .ui-fsCarousel .rsThumbsArrow { cursor: pointer; position: fixed; top: 30px; right: 89px; width: 24px; height: 15px; background-repeat: no-repeat; background-image: url(/img/sprites.svg); background-position: -45px 0px; } .mobile .ui-fsCarousel .rsArrow, .mobile .ui-fsCarousel .rsThumbsArrow { top: 25px; } .ui-fsCarousel .rsArrow.rsArrowRight, .ui-fsCarousel .rsThumbsArrow.rsArrowRight { right: 55px; left: auto; background-image: url(/img/sprites.svg); background-position: -15px 0px; } .ui-fsCarousel .rsThumb { float: left; position: relative; } .ui-fsCarousel .rsArrow, .ui-fsCarousel .rsNav, .ui-fsCarousel .rsThumbsArrow { opacity: 1; transition: opacity 0.3s linear; } .ui-fsCarousel .rsHidden { opacity: 0; visibility: hidden; transition: visibility 0s linear 0.3s,opacity 0.3s linear; } .ui-fsCarousel .rsGCaption { position: absolute; left: 50px; bottom: 13px; color: #999; pointer-events: none; } .ui-fsCarousel .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; } .ui-fsCarousel .royalSlider .rsSlide.rsFakePreloader { opacity: 1 !important; transition: 0s; display: none; } .ui-fsCarousel .rsSlide { position: absolute; left: 0; top: 0; display: block; overflow: hidden; height: 100%; width: 100%; } .ui-fsCarousel .royalSlider.rsAutoHeight, .ui-fsCarousel .rsAutoHeight .rsSlide { height: auto; } .ui-fsCarousel .rsContent { width: 100%; height: 100%; position: relative; } .ui-fsCarousel .rsPreloader { position: absolute; z-index: 0; } .ui-fsCarousel .rsNav { -moz-user-select: -moz-none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .ui-fsCarousel .rsNavItem { -webkit-tap-highlight-color: rgba(0, 0, 0, 0.25); } .ui-fsCarousel .rsThumbs { cursor: pointer; position: relative; overflow: hidden; float: left; z-index: 22; } .ui-fsCarousel .rsTabs { float: left; background: none !important; } .ui-fsCarousel .rsTabs, .ui-fsCarousel .rsThumbs { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } .ui-fsCarousel .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; } .ui-fsCarousel .rsVideoFrameHolder { position: absolute; left: 0; top: 0; background: #141414; opacity: 0; -webkit-transition: .3s; } .ui-fsCarousel .rsVideoFrameHolder.rsVideoActive { opacity: 1; } .ui-fsCarousel .rsVideoContainer iframe, .ui-fsCarousel .rsVideoContainer video, .ui-fsCarousel .rsVideoContainer embed, .ui-fsCarousel .rsVideoContainer .rsVideoObj { position: absolute; z-index: 50; left: 0; top: 0; width: 100%; height: 100%; } .ui-fsCarousel .rsVideoContainer.rsIOSVideo iframe, .ui-fsCarousel .rsVideoContainer.rsIOSVideo video, .ui-fsCarousel .rsVideoContainer.rsIOSVideo embed { box-sizing: border-box; padding-right: 44px; } .ui-fsCarousel .rsABlock { left: 0; top: 0; position: absolute; z-index: 15; } .ui-fsCarousel img.rsImg { max-width: none; } .ui-fsCarousel .grab-cursor { cursor: url(grab.png) 8 8, move; } .ui-fsCarousel .grabbing-cursor { cursor: url(grabbing.png) 8 8, move; } .ui-fsCarousel .rsNoDrag { cursor: auto; } .ui-fsCarousel .rsLink { left: 0; top: 0; position: absolute; width: 100%; height: 100%; display: block; z-index: 20; background: url(blank.gif); } .Video-pop { position: fixed; z-index: 100; top: 0px; left: 0px; width: 100%; height: 100%; background-color: white; opacity: 0; pointer-events: none; transition: opacity 0.4s ease-out; } .Video-pop .Video-pop-video { position: absolute; top: 80px; left: 80px; width: calc(100% - 160px); height: calc(100% - 160px); text-align: center; } .Video-pop .Video-pop-close { position: absolute; top: 50px; right: 50px; cursor: pointer; width: 10px; } .when-Video-is-active .Video-pop { opacity: 1; pointer-events: all; }