/*! normalize.css v3.0.2 | 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, menu, nav, section, summary { display: block; }

/** 1. Correct `inline-block` display not defined in IE 8/9. 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. */
audio, canvas, progress, video { display: inline-block; /* 1 */ vertical-align: baseline; /* 2 */ }

/** Prevent modern browsers from displaying `audio` without controls. Remove excess height in iOS 5 devices. */
audio:not([controls]) { display: none; height: 0; }

/** Address `[hidden]` styling not present in IE 8/9/10. Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. */
[hidden], template { display: none; }

/* Links ========================================================================== */
/** Remove the gray background color from active links in IE 10. */
a { background-color: transparent; }

/** Improve readability when focused and also mouse hovered in all browsers. */
a:active, a:hover { outline: 0; }

/* Text-level semantics ========================================================================== */
/** Address styling not present in IE 8/9/10/11, Safari, and Chrome. */
abbr[title] { border-bottom: 1px dotted; }

/** Address style set to `bolder` in Firefox 4+, Safari, and Chrome. */
b, strong { font-weight: bold; }

/** Address styling not present in Safari and Chrome. */
dfn { font-style: italic; }

/** Address variable `h1` font-size and margin within `section` and `article` contexts in Firefox 4+, Safari, and Chrome. */
h1 { font-size: 2em; margin: 0.67em 0; }

/** Address styling not present in IE 8/9. */
mark { background: #ff0; color: #000; }

/** Address inconsistent and variable font size in all browsers. */
small { font-size: 80%; }

/** Prevent `sub` and `sup` affecting `line-height` in all browsers. */
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }

sup { top: -0.5em; }

sub { bottom: -0.25em; }

/* Embedded content ========================================================================== */
/** Remove border when inside `a` element in IE 8/9/10. */
img { border: 0; }

/** Correct overflow not hidden in IE 9/10/11. */
svg:not(:root) { overflow: hidden; }

/* Grouping content ========================================================================== */
/** Address margin not present in IE 8/9 and Safari. */
figure { margin: 1em 40px; }

/** Address differences between Firefox and other browsers. */
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }

/** Contain overflow in all browsers. */
pre { overflow: auto; }

/** Address odd `em`-unit font size rendering in all browsers. */
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }

/* Forms ========================================================================== */
/** Known limitation: by default, Chrome and Safari on OS X allow very limited styling of `select`, unless a `border` property is set. */
/** 1. Correct color not being inherited. Known issue: affects color of disabled elements. 2. Correct font properties not being inherited. 3. Address margins set differently in Firefox 4+, Safari, and Chrome. */
button, input, optgroup, select, textarea { color: inherit; /* 1 */ font: inherit; /* 2 */ margin: 0; /* 3 */ }

/** Address `overflow` set to `hidden` in IE 8/9/10/11. */
button { overflow: visible; }

/** Address inconsistent `text-transform` inheritance for `button` and `select`. All other form control elements do not inherit `text-transform` values. Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. Correct `select` style inheritance in Firefox. */
button, select { text-transform: none; }

/** 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 2. Correct inability to style clickable `input` types in iOS. 3. Improve usability and consistency of cursor style between image-type `input` and others. */
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; /* 2 */ cursor: pointer; /* 3 */ }

/** Re-set default cursor for disabled elements. */
button[disabled], html input[disabled] { cursor: default; }

/** Remove inner padding and border in Firefox 4+. */
button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }

/** Address Firefox 4+ setting `line-height` on `input` using `!important` in the UA stylesheet. */
input { line-height: normal; }

/** It's recommended that you don't attempt to style these elements. Firefox's implementation doesn't respect box-sizing, padding, or width.  1. Address box sizing set to `content-box` in IE 8/9/10. 2. Remove excess padding in IE 8/9/10. */
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ }

/** Fix the cursor style for Chrome's increment/decrement buttons. For certain `font-size` values of the `input`, it causes the cursor style of the decrement button to change from `default` to `text`. */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }

/** 1. Address `appearance` set to `searchfield` in Safari and Chrome. 2. Address `box-sizing` set to `border-box` in Safari and Chrome (include `-moz` to future-proof). */
input[type="search"] { -webkit-appearance: textfield; /* 1 */ -moz-box-sizing: content-box; -webkit-box-sizing: content-box; /* 2 */ box-sizing: content-box; }

/** Remove inner padding and search cancel button in Safari and Chrome on OS X. Safari (but not Chrome) clips the cancel button when the search input has padding (and `textfield` appearance). */
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }

/** Define consistent border, margin, and padding. */
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }

/** 1. Correct `color` not being inherited in IE 8/9/10/11. 2. Remove padding so people aren't caught out if they zero out fieldsets. */
legend { border: 0; /* 1 */ padding: 0; /* 2 */ }

/** Remove default vertical scrollbar in IE 8/9/10/11. */
textarea { overflow: auto; }

/** Don't inherit the `font-weight` (applied by a rule above). NOTE: the default cannot safely be changed in Chrome and Safari on OS X. */
optgroup { font-weight: bold; }

/* Tables ========================================================================== */
/** Remove most spacing between table cells. */
table { border-collapse: collapse; border-spacing: 0; }

td, th { padding: 0; }

.form-field, .contributions, .sponsoring, .project { *zoom: 1; }
.form-field:before, .contributions:before, .sponsoring:before, .project:before, .form-field:after, .contributions:after, .sponsoring:after, .project:after { content: " "; display: table; }
.form-field:after, .contributions:after, .sponsoring:after, .project:after { clear: both; }

.screen-reader-text { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip: rect(0, 0, 0, 0); position: absolute; }

@font-face { font-family: 'photys-icons'; src: url("../fonts/photys-icons.eot?-19jrev"); src: url("../fonts/photys-icons.eot?#iefix-19jrev") format("embedded-opentype"), url("../fonts/photys-icons.woff2?-19jrev") format("woff2"), url("../fonts/photys-icons.ttf?-19jrev") format("truetype"), url("../fonts/photys-icons.woff?-19jrev") format("woff"), url("../fonts/photys-icons.svg?-19jrev#photys-icons") format("svg"); font-weight: normal; font-style: normal; }
[class^="icon-"], [class*=" icon-"] { font-family: 'photys-icons'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@-webkit-keyframes intro_fade_in { 0% { opacity: 0.5; -webkit-transform: scale(0) translate3d(0, 0, 0); }
  50% { opacity: 0.5; -webkit-transform: scale(0) translate3d(0, 0, 0); }
  90% { opacity: 1; -webkit-transform: scale(1.05) translate3d(0, 0, 0); }
  100% { opacity: 1; -webkit-transform: scale(1) translate3d(0, 0, 0); } }
@-moz-keyframes intro_fade_in { 0% { opacity: 0.5; -moz-transform: scale(0) translate3d(0, 0, 0); }
  50% { opacity: 0.5; -moz-transform: scale(0) translate3d(0, 0, 0); }
  90% { opacity: 1; -moz-transform: scale(1.05) translate3d(0, 0, 0); }
  100% { opacity: 1; -moz-transform: scale(1) translate3d(0, 0, 0); } }
@keyframes intro_fade_in { 0% { opacity: 0.5; transform: scale(0) translate3d(0, 0, 0); }
  50% { opacity: 0.5; transform: scale(0) translate3d(0, 0, 0); }
  90% { opacity: 1; transform: scale(1.05) translate3d(0, 0, 0); }
  100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } }
@-webkit-keyframes intro_bg { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }
@-moz-keyframes intro_bg { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }
@keyframes intro_bg { 0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; } }
@-webkit-keyframes scroll_teaser { 0% { -webkit-transform: translate3d(0, 0, 0); }
  25% { -webkit-transform: translate3d(0, -2em, 0); }
  100% { -webkit-transform: translate3d(0, 0, 0); } }
@-moz-keyframes scroll_teaser { 0% { -moz-transform: translate3d(0, 0, 0); }
  25% { -moz-transform: translate3d(0, -2em, 0); }
  100% { -moz-transform: translate3d(0, 0, 0); } }
@keyframes scroll_teaser { 0% { transform: translate3d(0, 0, 0); }
  40% { transform: translate3d(0, 0, 0); }
  60% { transform: translate3d(0, -2em, 0); }
  100% { transform: translate3d(0, 0, 0); } }
@-webkit-keyframes soft_fade_in { 0% { opacity: 0.5; }
  100% { opacity: 1; } }
@-moz-keyframes soft_fade_in { 0% { opacity: 0.5; }
  100% { opacity: 1; } }
@keyframes soft_fade_in { 0% { opacity: 0.5; }
  100% { opacity: 1; } }
@-webkit-keyframes fade_in_from_top { 0% { opacity: 0; -webkit-transform: scale(0.9) translate3d(0, -1em, 0); }
  100% { opacity: 1; -webkit-transform: scale(1); } }
@-moz-keyframes fade_in_from_top { 0% { opacity: 0; -moz-transform: scale(0.9) translate3d(0, -1em, 0); }
  100% { opacity: 1; -moz-transform: scale(1); } }
@keyframes fade_in_from_top { 0% { opacity: 0; transform: scale(0.9) translate3d(0, -1em, 0); }
  100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } }
@-webkit-keyframes fade_in_from_bottom { 0% { opacity: 0; -webkit-transform: scale(0.9) translate3d(0, 1em, 0); }
  100% { opacity: 1; -webkit-transform: scale(1); } }
@-moz-keyframes fade_in_from_bottom { 0% { opacity: 0; -moz-transform: scale(0.9) translate3d(0, 1em, 0); }
  100% { opacity: 1; -moz-transform: scale(1); } }
@keyframes fade_in_from_bottom { 0% { opacity: 0; transform: scale(0.9) translate3d(0, 1em, 0); }
  100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } }
@-webkit-keyframes loading_indicator { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1); opacity: 0; } }
@-moz-keyframes loading_indicator { 0% { -moz-transform: scale(0); }
  100% { -moz-transform: scale(1); opacity: 0; } }
@keyframes loading_indicator { 0% { transform: scale(0); }
  100% { transform: scale(1); opacity: 0; } }
@-webkit-keyframes pulsate { 0% { -webkit-transform: scale(1); }
  50% { -webkit-transform: scale(0.9); }
  100% { -webkit-transform: scale(1); } }
@-moz-keyframes pulsate { 0% { -moz-transform: scale(1); }
  50% { -moz-transform: scale(0.9); }
  100% { -moz-transform: scale(1); } }
@keyframes pulsate { 0% { transform: scale(1); }
  50% { transform: scale(0.9); }
  100% { transform: scale(1); } }
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

body, input, textarea, select { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Arial, sans-serif; color: #222; font-size: 1em; line-height: 1.625; font-weight: 300; /* -webkit-font-smoothing: antialiased; */ }

body { padding-top: 100vh; font-size: 1em; background: #222; }

img { display: block; max-width: 100%; }
img[data-src] { background-color: #F5F5F5; }
img[data-src].loaded { -webkit-animation: soft_fade_in 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -moz-animation: soft_fade_in 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -ms-animation: soft_fade_in 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -o-animation: soft_fade_in 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; animation: soft_fade_in 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; }

figure { margin: 0; }

.wrap { max-width: 1200px; margin: auto; }

.brand { color: #E41B13; }

.tooltip { position: relative; }
.tooltip .tooltip-content { position: absolute; opacity: 0; top: -2.8571428571em; left: 50%; font-size: 0.875em; padding: 0.3571428571em 0.7142857143em; white-space: nowrap; background: #FFF; color: #222; border-radius: 3px; -webkit-transform: translate3d(-50%, -1em, 0) scale(1); -moz-transform: translate3d(-50%, -1em, 0) scale(1); transform: translate3d(-50%, -1em, 0) scale(1); -webkit-transition: all 250ms cubic-bezier(0.67, 0, 0.265, 1.55); -moz-transition: all 250ms cubic-bezier(0.67, 0, 0.265, 1.55); transition: all 250ms cubic-bezier(0.67, 0, 0.265, 1.55); }
.tooltip .tooltip-content:after { top: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(255, 255, 255, 0); border-top-color: #FFF; border-width: 8px; margin-left: -8px; }
.tooltip:hover .tooltip-content { opacity: 1; -webkit-transition: all 500ms cubic-bezier(0.67, 0, 0.265, 1.55); -moz-transition: all 500ms cubic-bezier(0.67, 0, 0.265, 1.55); transition: all 500ms cubic-bezier(0.67, 0, 0.265, 1.55); -webkit-transform: translate3d(-50%, 0, 0) scale(1); -moz-transform: translate3d(-50%, 0, 0) scale(1); transform: translate3d(-50%, 0, 0) scale(1); }

button, input[type="button"], input[type="reset"], input[type="submit"], .button { display: inline-block; padding: 0.5em 1em; background-color: #222; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.1))); background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.1)); color: #FFF; font-weight: 500; border: none; border-radius: 3px; outline: none; text-decoration: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-transition: 250ms background-color ease-in-out; -moz-transition: 250ms background-color ease-in-out; transition: 250ms background-color ease-in-out; }
button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active, .button:active { position: relative; -webkit-transform: translate3d(0, 1px, 0); -moz-transform: translate3d(0, 1px, 0); transform: translate3d(0, 1px, 0); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMC4xIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNncmFkKSIgLz48L3N2Zz4g'); background-size: 100%; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(255, 255, 255, 0.1))); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0.1)); }

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], textarea { width: 100%; padding: 0.5em; border: 1px solid #CCC; border-radius: 3px; outline: none; box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15); -webkit-appearance: none; -moz-appearance: none; appearance: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.15), 0 0 8px rgba(0, 0, 0, 0.25); }

textarea { height: 10em; }

.form-field { position: relative; margin-bottom: 1em; }

img, embed, iframe, object { max-width: 100%; }

img { height: auto; }

h1 { margin: 0 0 0.625em 0; font-size: 2em; line-height: 1.25; }

h2 { margin: 1em 0; font-size: 3.75em; line-height: 1.2; }

h3 { margin: 5% 0; font-size: 2.5em; text-align: center; line-height: 1.25; }
h3:after { content: " "; display: block; width: 60px; margin: 0.4166666667em auto 0 auto; height: 2px; background: rgba(0, 0, 0, 0.1); }

h4 { margin: 1em 0; font-weight: 300; font-size: 1.5em; line-height: 1.25; }

h5 { margin: 1em 0; font-size: 1em; }

h6 { margin: 1em 0; font-size: 1em; }

p { margin: 0 0 1em 0; }

ul, ol { margin: 0 0 1.5em 2em; padding: 0; }

ul { list-style: disc; }

ol { list-style: decimal; }

nav ul, .no-list, .inline-list { margin: 0; padding: 0; list-style: none; }

.inline-list li { display: inline-block; margin: 0 .5em 0 0; }

dt { font-weight: 600; }

dd { margin: 0 1.5em 1.5em; }

b, strong { font-weight: 600; }

hr { clear: both; height: 1px; margin: 0 0 5% 0; background: rgba(0, 0, 0, 0.1); border: none; }

figure { margin: 0; }

figcaption { margin: 0.3571428571em 0 0 0; font-size: 0.875em; color: #888; }

blockquote:before, blockquote:after, q:before, q:after { content: ""; }

blockquote, q { quotes: "" ""; }

a { color: #E41B13; text-decoration: none; -webkit-transition: all 175ms ease-in-out; -moz-transition: all 175ms ease-in-out; transition: all 175ms ease-in-out; }
a:hover { color: #222; }
.section p a { border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
.section p a:hover { border-bottom-color: #E41B13; box-shadow: 0 1px 0 0 #E41B13; }

.cover { position: fixed; top: 0; left: 0; right: 0; z-index: 1; height: 100vh; overflow: hidden; display: flex; padding: 5vh 0; color: #FFF; text-align: center; align-items: center; vertical-align: middle; }
.cover .year { position: relative; width: 50em; max-width: 100%; margin: 2.5em auto 2.5em auto; -webkit-animation: intro_fade_in 1000ms 1; -moz-animation: intro_fade_in 1000ms 1; -ms-animation: intro_fade_in 1000ms 1; -o-animation: intro_fade_in 1000ms 1; animation: intro_fade_in 1000ms 1; }
.cover .year h1 { overflow: hidden; margin: 0; padding-bottom: 32.4375%; font-size: 1em; line-height: 0; text-indent: 100%; background: linear-gradient(90deg, #6ba928, #4080c3, #9640c3, #c3404f); background-size: 800% 800%; -webkit-animation: intro_bg 5s infinite; -moz-animation: intro_bg 5s infinite; -ms-animation: intro_bg 5s infinite; -o-animation: intro_bg 5s infinite; animation: intro_bg 5s infinite; }
.cover .year:before, .cover .year:after { content: " "; position: absolute; left: 0; right: 0; height: 1px; background: #222; }
.cover .year:before { top: 0; }
.cover .year:after { bottom: 0; }
.cover .year .bg-overlay { content: " "; position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; right: 0; opacity: 1; background: url(../img/year-mask.png); background-repeat: no-repeat; background-position: center; background-size: 100%; }
.cover .team { position: absolute; bottom: 0; left: 50%; z-index: 3; margin: 2.5em auto 0 auto; width: 25em; max-width: 80%; -webkit-transform: translate3d(-50%, 0, 0); -moz-transform: translate3d(-50%, 0, 0); transform: translate3d(-50%, 0, 0); }
.cover .brand sup { color: #FFF; }
.cover p { margin: 0; -webkit-animation: intro_fade_in 1000ms 1; -moz-animation: intro_fade_in 1000ms 1; -ms-animation: intro_fade_in 1000ms 1; -o-animation: intro_fade_in 1000ms 1; animation: intro_fade_in 1000ms 1; }
.cover .headline { position: relative; z-index: 1; width: 50em; max-width: 80%; margin: 0 auto; line-height: 1.2; font-family: Georgia, serif; }
.cover a { position: relative; color: #E41B13; text-decoration: none; margin: 0 -.25em; padding: 0 .25em; border-radius: 3px; }
.cover a:after { content: " "; position: absolute; bottom: 10px; left: .25em; right: .25em; display: block; height: 2px; background: rgba(255, 255, 255, 0.15); }
.cover a[href*="projects-clients"] { color: #4080C3; }
.cover a[href*="projects-clients"]:hover { background: #4080C3; }
.cover a[href*="community-lifestyle"] { color: #9640C3; }
.cover a[href*="community-lifestyle"]:hover { background: #9640C3; }
.cover a:hover { color: #FFF; }
.cover a:hover:after { opacity: 0; }

@media only screen and (orientation: landscape) and (max-height: 700px) { body { padding-top: 0; }
  .cover { position: relative; z-index: 1; height: auto; min-height: 100vh; } }
.nav-section { text-align: center; }
.nav-section li { display: inline-block; }
.nav-section a { display: block; padding: 1em; position: relative; text-align: center; color: #FFF; text-decoration: none; white-space: nowrap; border-radius: 3px; }
.nav-section a[href*="projects-clients"] { background: #4080C3; }
.nav-section a[href*="community-lifestyle"] { background: #9640C3; }
.nav-section a:hover { background: #222; }

.section-header { position: relative; padding: 5% 0; z-index: 2; }
#projects-clients .section-header { background: #4080C3; }
#community-lifestyle .section-header { background: #9640C3; }
.section-header .header-inner { display: table; width: 100%; height: 100%; }
.section-header h2 { display: table-cell; vertical-align: middle; margin: 0; color: #FFF; text-align: center; }
.section-header .breadcrumb { display: block; margin-bottom: 0.3125em; text-align: center; font-weight: 300; font-size: 0.4em; font-family: Georgia, serif; color: rgba(255, 255, 255, 0.75); }

.section { position: relative; z-index: 2; overflow: hidden; background: #FFF; -webkit-transition: all 750ms cubic-bezier(0.67, 0, 0.265, 1.55); -moz-transition: all 750ms cubic-bezier(0.67, 0, 0.265, 1.55); transition: all 750ms cubic-bezier(0.67, 0, 0.265, 1.55); }
.section.open, .section:target { position: relative; top: 0; visibility: visible; opacity: 1; z-index: 3; height: auto; -webkit-transform: translate3d(0, 0, 0) scale(1) !important; -moz-transform: translate3d(0, 0, 0) scale(1) !important; transform: translate3d(0, 0, 0) scale(1) !important; }
.section .content { /*
padding: 10em 1.25em 1.25em 1.25em;
*/ overflow: hidden; padding: 5%; }
.section .content .inner { max-width: 35em; margin-left: auto; margin-right: auto; }
.section .content .inner-l { max-width: 61.25em; }
.section .content .inner-xl { max-width: 75em; }

.close-section { position: absolute; opacity: 0; z-index: 4; top: 1em; right: 1em; width: 2em; height: 2em; text-decoration: none; line-height: 1.6666666667; font-size: 1.875em; text-align: center; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 3px; color: #FFF; cursor: pointer; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); -webkit-transition: all 250ms ease-out; -moz-transition: all 250ms ease-out; transition: all 250ms ease-out; }
.close-section:hover { background: rgba(0, 0, 0, 0.2); }
.section-open .close-section, .section:target .close-section { opacity: 1; }

.contributions { margin-top: -3%; margin-bottom: 3%; }
.contributions .part { float: left; display: table; width: 100%; height: 7.5em; margin: 2% 0; padding: 0 2%; float: left; text-align: center; border-radius: 3px; border: 1px solid rgba(34, 34, 34, 0.1); }
.contributions .part .inner { display: table-cell; vertical-align: middle; }
.contributions .part h4 { display: block; margin: 0; font-size: 2em; font-weight: 600; }
.contributions .part p { margin: 0; }
@media only screen and (min-width: 400px) { .contributions .part { width: 46%; margin: 2%; height: 8.75em; } }
@media only screen and (min-width: 900px) { .contributions .part { width: 31.333333333%; margin: 1%; } }

.sponsoring { margin-top: -2.5%; margin-bottom: 2%; }

.wordcamp-cover { position: relative; z-index: 1; margin: 5em 0 0 0; padding: 5% 20% 10% 20%; background-size: cover; background-position: center; background-image: url(../img/photo-default.jpg); background-color: #222; border-radius: 3px; -webkit-transition: background-image 750ms cubic-bezier(0.67, 0, 0.265, 1.55); -moz-transition: background-image 750ms cubic-bezier(0.67, 0, 0.265, 1.55); transition: background-image 750ms cubic-bezier(0.67, 0, 0.265, 1.55); }
.wordcamp-cover .city-name, .wordcamp-cover .city-icon { display: block; margin: 5% auto; }
.wordcamp-cover .city-name { width: 600px; }
.wordcamp-cover .city-icon { width: 200px; }
.wordcamp-cover .city-name[src*="philadelphia"] { width: 800px; }
.wordcamp-cover .city-icon[src*="london"] { width: 400px; }
.wordcamp-cover .city-icon[src*="vienna"] { width: 200px; }
.wordcamp-cover .city-icon[src*="cologne"] { width: 160px; }
.wordcamp-cover .city-icon[src*="seville"] { width: 50px; }
.wordcamp-cover .city-icon[src*="zurich"] { width: 140px; }
.wordcamp-cover .city-icon[src*="berlin"] { width: 40px; }
.wordcamp-cover .city-icon[src*="philadelphia"] { width: 140px; }
@media only screen and (max-width: 699px) { .wordcamp-cover .city-icon[src*="london"] { width: 200px; }
  .wordcamp-cover .city-icon[src*="vienna"] { width: 100px; }
  .wordcamp-cover .city-icon[src*="cologne"] { width: 80px; }
  .wordcamp-cover .city-icon[src*="seville"] { width: 30px; }
  .wordcamp-cover .city-icon[src*="zurich"] { width: 70px; }
  .wordcamp-cover .city-icon[src*="berlin"] { width: 20px; }
  .wordcamp-cover .city-icon[src*="philadelphia"] { width: 70px; } }
.wordcamp-cover.in-viewport .city-icon { -webkit-animation: fade_in_from_top 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -moz-animation: fade_in_from_top 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -ms-animation: fade_in_from_top 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -o-animation: fade_in_from_top 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; animation: fade_in_from_top 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; }
.wordcamp-cover.in-viewport .city-name { -webkit-animation: fade_in_from_bottom 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -moz-animation: fade_in_from_bottom 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -ms-animation: fade_in_from_bottom 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; -o-animation: fade_in_from_bottom 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; animation: fade_in_from_bottom 750ms cubic-bezier(0.67, 0, 0.265, 1.55) 1; }

.attendees { display: block; position: relative; text-align: center; margin: -2.875em 0 1em 0; padding: 0; list-style: none; }
.attendees li { display: inline-block; margin: 0 -.5em; }
.attendees img { display: block; width: 3.75em; }

.wordcamp-intro { position: relative; z-index: 2; max-width: 35em; margin: -2.5% auto 1em auto; padding: 1em; background: #FFF; border-radius: 3px; }
.wordcamp-intro .date { display: block; text-align: center; color: #888; }

.gallery { max-width: 82.5em; margin: auto; padding: 0; display: flex; flex-wrap: wrap; list-style: none; overflow: hidden; }
.gallery li { float: left; width: 100%; padding-bottom: 1.25em; }
.gallery li.large figure { padding-bottom: 47.619047619%; }
@media only screen and (max-width: 899px) { .gallery li.large { order: -1; } }
.gallery figure { position: relative; overflow: hidden; padding-bottom: 100%; }
.gallery figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 0.4285714286em 0.7142857143em; background: rgba(0, 0, 0, 0.75); color: rgba(255, 255, 255, 0.75); border-radius: 0 0 3px 3px; }
.gallery figcaption a { color: rgba(255, 255, 255, 0.75); border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.gallery figcaption a:hover { color: #FFF; border-bottom-color: transparent; }
.gallery img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; background-color: #F5F5F5; }
@media only screen and (min-width: 400px) { .gallery li { float: left; width: 50%; padding: 1.5151515152%; }
  .gallery li.large { width: 100%; } }
@media only screen and (min-width: 900px) { .gallery li { float: left; width: 33.333333333%; }
  .gallery li.large { width: 66.666666667%; } }

.loader { display: block; margin: 2.5em auto; width: 1.875em; height: 1.875em; background-color: #FFF; border: 0.3125em solid #888; border-radius: 50%; -webkit-animation: loading_indicator 1000ms infinite; -moz-animation: loading_indicator 1000ms infinite; -ms-animation: loading_indicator 1000ms infinite; -o-animation: loading_indicator 1000ms infinite; animation: loading_indicator 1000ms infinite; }

.client-logos { margin: 0 auto; padding: 0; list-style: none; text-align: center; }
.client-logos li { float: left; width: 47.959183673%; margin: 0 2.0408163265% 4.081632653% 2.0408163265%; border-radius: 3px 3px 0 0; }
.client-logos li:nth-child(2n+1) { margin-left: 0; }
.client-logos li:nth-child(2n) { margin-right: 0; }
.client-logos a { display: block; position: relative; padding-bottom: 50%; }
.client-logos a img { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; }
.client-logos a:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -0.2em, 0); -moz-transform: translate3d(0, -0.2em, 0); transform: translate3d(0, -0.2em, 0); }
.client-logos a:before { content: " "; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); }

.sub-section-intro { margin-bottom: 5%; }
.sub-section-intro h3 { margin-top: 0; }
.sub-section-intro img { float: right; max-width: 40%; margin: .25em 0 1.25em 1.25em; }

.project { margin-bottom: 5%; }
.project .screenshot { position: relative; margin-bottom: 0.9375em; }
.project .screenshot .screenshot-holder { display: block; padding-bottom: 75%; position: relative; }
.project .screenshot .screenshot-holder:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); -webkit-transform: translate3d(0, -0.2em, 0); -moz-transform: translate3d(0, -0.2em, 0); transform: translate3d(0, -0.2em, 0); }
.project .screenshot .screenshot-holder:before { content: " "; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: 0; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 3px; -webkit-transform: translate3d(0, 0, 0) scale(1); -moz-transform: translate3d(0, 0, 0) scale(1); transform: translate3d(0, 0, 0) scale(1); }
.project .screenshot img { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3px; }
.project .project-description h4 { margin: 0; }
.project .project-description h4 span { display: inline-block; position: relative; margin: 0 .25em; top: -0.1875em; font-size: 0.6666666667em; font-style: italic; line-height: 1; font-family: Georgia, serif; color: #888; }
.project .project-description p:last-child { margin-bottom: 0; }
.project .project-description .project-link a { text-decoration: none; }
.project .project-description .project-link a[href*="blog.css.ch"] { color: #00A0E7; }
.project .project-description .project-link a[href*="blog.css.ch"]:hover { border-bottom-color: #00A0E7; box-shadow: 0 1px 0 0 #00A0E7; }
.project .project-description .project-link a[href*="twint.ch"] { color: #00D76E; }
.project .project-description .project-link a[href*="twint.ch"]:hover { border-bottom-color: #00D76E; box-shadow: 0 1px 0 0 #00D76E; }
.project .project-description .project-link a[href*="blog.migrosbank.ch"] { color: #92B050; }
.project .project-description .project-link a[href*="blog.migrosbank.ch"]:hover { border-bottom-color: #92B050; box-shadow: 0 1px 0 0 #92B050; }
.project .project-description .project-link a[href*="lehner-versand.ch"] { color: #B860A6; }
.project .project-description .project-link a[href*="lehner-versand.ch"]:hover { border-bottom-color: #B860A6; box-shadow: 0 1px 0 0 #B860A6; }
.project .project-description .project-link a[href*="mcschindler.com"] { color: #007CB0; }
.project .project-description .project-link a[href*="mcschindler.com"]:hover { border-bottom-color: #007CB0; box-shadow: 0 1px 0 0 #007CB0; }

@media only screen and (min-width: 700px) { .client-logos li { width: 30.612244898%; }
  .client-logos li:nth-child(2n+1) { margin-left: 2.0408163265%; }
  .client-logos li:nth-child(2n) { margin-right: 2.0408163265%; }
  .client-logos li:nth-child(3n+1) { margin-left: 0; }
  .client-logos li:nth-child(3n) { margin-right: 0; }
  .project { display: flex; align-items: center; }
  .project .screenshot, .project .project-description { vertical-align: middle; }
  .project .screenshot { width: 47.5%; margin-bottom: 0; }
  .project .project-description { width: 52.5%; padding: 0 5%; }
  .project:nth-child(2n+1) .screenshot { order: 2; }
  .project:nth-child(2n+1) .project-description { order: 1; }
  .project:nth-child(2n) .screenshot { order: 1; }
  .project:nth-child(2n) .project-description { order: 2; } }
#end-remarks { padding-bottom: 15%; color: #222; text-align: center; background: url(../img/team-footer.jpg) no-repeat center bottom #FFF; background-size: 100%; }
#end-remarks .icon-thank-you { display: block; width: 160px; margin: 0 auto 2.5% auto; -webkit-animation: pulsate 1500ms infinite; -moz-animation: pulsate 1500ms infinite; -ms-animation: pulsate 1500ms infinite; -o-animation: pulsate 1500ms infinite; animation: pulsate 1500ms infinite; }
#end-remarks .section-header h2 { color: #E41B13; }
#end-remarks .content { padding-top: 0%; }
@media only screen and (max-width: 699px) { #end-remarks { padding-bottom: 20%; } }

footer.copyright { position: relative; z-index: 3; padding: 1.4285714286em; background: #222; font-size: 0.875em; text-align: center; font-weight: 300; color: rgba(255, 255, 255, 0.75); }
footer.copyright a:hover { color: #FFF; }
footer.copyright p:last-child { margin-bottom: 0; }