/** Table of Contents: 1.0 - Reset 2.0 - Variables 3.0 - Structure 4.0 - Menu 5.0 - Typography 6.0 - Pages, modules, widgets and other sections 7.0 - Hacks and fixes ----------------------------------------------------------------------------- */ @font-face { font-family: 'Apercu'; src: url("../fonts/apercu_regular.eot"); /* IE9 Compat Modes */ src: url("../fonts/apercu_regular.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu_regular.woff2") format("woff2"), url("../fonts/apercu_regular.woff") format("woff"), url("../fonts/apercu_regular.ttf") format("truetype"), url("../fonts/apercu_regular.svg#svgFontName") format("svg"); /* Legacy iOS */ font-weight: 400; font-style: normal; } @font-face { font-family: 'Apercu'; src: url("../fonts/apercu_regular_italic.eot"); /* IE9 Compat Modes */ src: url("../fonts/apercu_regular_italic.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu_regular_italic.woff2") format("woff2"), url("../fonts/apercu_regular_italic.woff") format("woff"), url("../fonts/apercu_regular_italic.ttf") format("truetype"), url("../fonts/apercu_regular_italic.svg#svgFontName") format("svg"); /* Legacy iOS */ font-weight: 400; font-style: italic; } @font-face { font-family: 'Apercu'; src: url("../fonts/apercu_bold.eot"); /* IE9 Compat Modes */ src: url("../fonts/apercu_bold.eot?#iefix") format("embedded-opentype"), url("../fonts/apercu_bold.woff2") format("woff2"), url("../fonts/apercu_bold.woff") format("woff"), url("../fonts/apercu_bold.ttf") format("truetype"), url("../fonts/apercu_bold.svg#svgFontName") format("svg"); /* Legacy iOS */ font-weight: 700; font-style: normal; } @font-face { font-family: 'Heimat Sarah'; src: url("../fonts/HeimatSarah-Bold.eot"); /* IE9 Compat Modes */ src: url("../fonts/HeimatSarah-Bold.eot?#iefix") format("embedded-opentype"), url("../fonts/HeimatSarah-Bold.woff") format("woff"); /* Pretty Modern Browsers */ font-weight: 700; font-style: normal; } /*@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');*/ /* @font-face { font-family: 'Heimat Sarah'; src: url('../fonts/HeimatSarah-ExtraBold.eot'); // IE9 Compat Modes src: url('../fonts/HeimatSarah-ExtraBold.eot?#iefix') format('embedded-opentype'), // IE6-IE8 url('../fonts/HeimatSarah-ExtraBold.woff') format('woff'); // Pretty Modern Browsers font-weight: 900; font-style: normal; } */ html { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } *, *:before, *:after { -webkit-box-sizing: inherit; -moz-box-sizing: inherit; -o-box-sizing: inherit; -ms-box-sizing: inherit; box-sizing: inherit; outline: none; } html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { border: 0; font-family: inherit; font-size: 100%; font-style: inherit; font-weight: inherit; margin: 0; outline: 0; padding: 0; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: block; max-width: 100%; } html { overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, button, input, select, textarea { color: #2b2b2b; font-family: "Roboto", "Apercu", Helvetica, Arial, san-serif; font-size: inherit; font-weight: 400; line-height: 1.375; } a { color: #24890d; text-decoration: none; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } h1, h2, h3, h4, h5, h6 { font-size: inherit; clear: both; margin: 0; } address { font-style: italic; margin-bottom: 24px; } abbr[title] { border-bottom: 1px dotted #2b2b2b; cursor: help; } b, strong { font-family: inherit; font-weight: 700; font-style: normal; } cite, dfn, em, i { font-style: italic; font-family: inherit; font-weight: 300; } mark, ins { background: #fff9c0; text-decoration: none; } p { margin-bottom: 0; /*-webkit-font-smoothing:antialiased;*/ } code, kbd, tt, var, samp, pre { font-family: monospace, serif; font-size: inherit; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; line-height: 1.6; } pre {max-width: 100%; overflow: auto; padding: 6px; white-space: pre; white-space: pre-wrap; word-wrap: break-word; } blockquote, q { -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; hyphens: none; quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; } blockquote { color: #767676; font-size: inherit; font-style: normal; font-weight: inherit; line-height: 1.2631578947; margin-bottom: 0px; } blockquote cite, blockquote small { color: #2b2b2b; font-size: inherit; font-weight: 400; line-height: 1.5; } blockquote em, blockquote i, blockquote cite { font-style: normal; } blockquote strong, blockquote b { font-weight: 400; } small { font-size: inherit; } big { font-size: inherit; } sup, sub { font-size: 75%; height: 0; line-height: 0; position: relative; vertical-align: baseline; } sup { bottom: 1ex; } sub { top: .5ex; } dl { margin-bottom: 24px; } dt { font-weight: bold; } dd { margin-bottom: 24px; } ul, ol { list-style: none; margin: 0 0 24px 20px; } ul { list-style: disc; } ol { list-style: decimal; } li > ul, li > ol { margin: 0 0 0 20px; } img { -ms-interpolation-mode: bicubic; border: 0; vertical-align: middle; } figure { margin: 0; } fieldset { border: 1px solid rgba(0, 0, 0, 0.1); margin: 0 0 24px; padding: 11px 12px 0; } legend { white-space: normal; } button, input, select, textarea { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 100%; margin: 0; max-width: 100%; vertical-align: baseline; } button, input { line-height: normal; } input, textarea { background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)); /* Removing the inner shadow, rounded corners on iOS inputs */ } button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { padding: 0; } input[type="search"] { -webkit-appearance: textfield; } input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; } table, th, td { border: 1px solid rgba(0, 0, 0, 0.1); } table { border-collapse: separate; border-spacing: 0; border-width: 1px 0 0 1px; margin-bottom: 24px; width: 100%; } caption, th, td { font-weight: normal; text-align: left; } th { border-width: 0 1px 1px 0; font-weight: bold; } td { border-width: 0 1px 1px 0; } del { color: #767676; } hr { background-color: rgba(0, 0, 0, 0.1); border: 0; height: 1px; margin-bottom: 23px; } .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** For IE 6/7 only Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } /*FONTS*/ /* 2.0 - Variables ----------------------------------------------------------------------------- */ /* Support a widely-adopted but non-standard selector for text selection styles to achieve a better experience. See http://core.trac.wordpress.org/ticket/25898. */ ::selection { background: gray; color: black; text-shadow: none; } ::-moz-selection { background: gray; color: black; text-shadow: none; } /*Extend example: @extend .message; */ /* @mixin border($type,$time,$easing) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } */ /* .selector { @include border-radius(10px); } */ /* .selector { @include transition(all,1s,ease-in-out); } */ /*Colours*/ /*$colBlueLight:#A8E5FF; rgb(168,229,255); $colBlueMed:#43D4F7; rgb(67,212,247);*/ /*rgb(54,218,255);*/ /*rgb(0,34,68);*/ /*rgb(53,53,53);*/ /*rgb(244,244,244)*/ /*rgb(234,234,234)*/ /*rgb(210,210,210)*/ /*rgb(171,171,171)*/ /*rgb(144,144,144)*/ /* 3.0 - Structure ----------------------------------------------------------------------------- */ html { height: 100%; background: #F4F4F4; } body { font-size: 13px; font-size: 1.3rem; font-size: 4.0238095238vw; line-height: 1.3846153846; } @media (min-width: 30em) { body { font-size: 13px; font-size: 2.1rem; } } @media (min-width: 45em) { body { font-size: 14px; font-size: 1.4rem; line-height: 1.4285714286; } } body.menu-active { height: 100%; } #main { position: relative; padding-top: 134px; padding-top: 13.4rem; padding-top: 41.4761904762vw; } @media (min-width: 30em) { #main { padding-top: 134px; padding-top: 21.6461538462rem; } } @media (min-width: 45em) { #main { padding-top: 120px; padding-top: 12rem; } } .menu-toggle { cursor: pointer; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE/Edge */ user-select: none; /* non-prefixed version, currently not supported by any browser */ } .block { float: left; position: relative; } .block:last-child { margin-right: 0; } @media (max-width: 29.875em) { .block:last-child { margin-right: 0 !important; } } .centred, .wide-text-block, .large-text-block, .two-column-text-block, .embed-wrapper video, .single .embed-wrapper video, .single .embed-container, .centred:last-child, .wide-text-block:last-child, .large-text-block:last-child, .two-column-text-block:last-child, .embed-wrapper video:last-child, .single .embed-container:last-child {margin-left: auto !important;margin-right: auto !important;/* text-align: center; */float: none;} .lefted, .lefted:last-child { margin-left: auto; margin-right: auto; text-align: left; float: left; } .righted, .righted:last-child { margin-left: auto; margin-right: auto; text-align: right; float: right; } .block-full { margin-right: 0; } @media (max-width: 29.875em) { .block-full { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .block-full { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .block-full { margin-right: 20px; width: 700px; } } @media (min-width: 60em) { .block-full { margin-right: 20px; width: 940px; } } @media (max-width: 29.875em) { .block-half { width: 46.9999999998%; margin-right: 6%; } } @media (min-width: 30em) { .block-half { margin-right: 20px; width: 220px; } } @media (min-width: 45em) { .block-half { margin-right: 20px; width: 340px; } } @media (min-width: 60em) { .block-half { margin-right: 20px; width: 460px; } } @media (max-width: 29.875em) { .block-third { width: 29.3333333332%; margin-right: 3%; } } @media (min-width: 30em) { .block-third { margin-right: 20px; width: 140px; } } @media (min-width: 45em) { .block-third { margin-right: 20px; width: 220px; } } @media (min-width: 60em) { .block-third { margin-right: 20px; width: 300px; } } @media (max-width: 29.875em) { .block-two-third { width: 64.6666666664%; margin-right: 3%; } } @media (min-width: 30em) { .block-two-third { margin-right: 20px; width: 300px; } } @media (min-width: 45em) { .block-two-third { margin-right: 20px; width: 460px; } } @media (min-width: 60em) { .block-two-third { margin-right: 20px; width: 620px; } } @media (max-width: 29.875em) { .block-quarter { width: 20.4999999999%; margin-right: 3%; } } @media (min-width: 30em) { .block-quarter { margin-right: 20px; width: 100px; } } @media (min-width: 45em) { .block-quarter { margin-right: 20px; width: 160px; } } @media (min-width: 60em) { .block-quarter { margin-right: 20px; width: 220px; } } .block-1 { margin-right: 20px; width: 60px; } .block-2 { margin-right: 20px; width: 140px; } .block-3 { margin-right: 20px; width: 220px; } .block-4 { margin-right: 20px; width: 300px; } .block-5 { margin-right: 20px; width: 380px; } .block-6 { margin-right: 20px; width: 460px; } .block-7 { margin-right: 20px; width: 540px; } .block-8 { margin-right: 20px; width: 620px; } .block-9 { margin-right: 20px; width: 700px; } .block-10 { margin-right: 20px; width: 780px; } .block-11 { margin-right: 20px; width: 860px; } .block-12 { margin-right: 20px; width: 940px; } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-1 { margin-right: 20px; width: 60px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-2 { margin-right: 20px; width: 140px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-3 { margin-right: 20px; width: 220px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-4 { margin-right: 20px; width: 300px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-5 { margin-right: 20px; width: 380px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-6 { margin-right: 20px; width: 460px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-7 { margin-right: 20px; width: 540px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-8 { margin-right: 20px; width: 620px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-9 { margin-right: 20px; width: 700px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-10 { margin-right: 20px; width: 780px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-11 { margin-right: 20px; width: 860px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-block-12 { margin-right: 20px; width: 940px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-1 { margin-right: 20px; width: 60px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-2 { margin-right: 20px; width: 140px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-3 { margin-right: 20px; width: 220px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-4 { margin-right: 20px; width: 300px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-5 { margin-right: 20px; width: 380px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-6 { margin-right: 20px; width: 460px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-7 { margin-right: 20px; width: 540px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-8 { margin-right: 20px; width: 620px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-9 { margin-right: 20px; width: 700px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-10 { margin-right: 20px; width: 780px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-11 { margin-right: 20px; width: 860px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-block-12 { margin-right: 20px; width: 940px; } } @media (max-width: 29.875em) { .s-p-left-0 { padding-left: 0; } } @media (max-width: 29.875em) { .s-m-left-0 { margin-left: 0; } } @media (max-width: 29.875em) { .s-p-right-0 { padding-right: 0; } } @media (max-width: 29.875em) { .s-m-right-0 { margin-right: 0; } } @media (max-width: 29.875em) and (max-width: 29.875em) { .s-block-1 { width: 11.6666666666%; margin-right: 3%; } } @media (max-width: 29.875em) { .s-m-left-1 { margin-left: 13.6666666% !important; } } @media (max-width: 29.875em) { .s-m-right-1 { margin-right: 15.6666666% !important; } } @media (max-width: 29.875em) and (max-width: 29.875em) { .s-block-2 { width: 29.3333333332%; margin-right: 3%; } } @media (max-width: 29.875em) { .s-m-left-2 { margin-left: 31.3333332% !important; } } @media (max-width: 29.875em) { .s-m-right-2 { margin-right: 33.3333332% !important; } } @media (max-width: 29.875em) and (max-width: 29.875em) { .s-block-3 { width: 46.9999999998%; margin-right: 6%; } } @media (max-width: 29.875em) { .s-m-left-3 { margin-left: 49.9999998% !important; } } @media (max-width: 29.875em) { .s-m-right-3 { margin-right: 52.9999998% !important; } } @media (max-width: 29.875em) and (max-width: 29.875em) { .s-block-4 { width: 64.6666666664%; margin-right: 3%; } } @media (max-width: 29.875em) { .s-m-left-4 { margin-left: 66.6666664% !important; } } @media (max-width: 29.875em) { .s-m-right-4 { margin-right: 68.6666664% !important; } } @media (max-width: 29.875em) and (max-width: 29.875em) { .s-block-5 { width: 82.333333333%; margin-right: 2%; } } @media (max-width: 29.875em) { .s-m-left-5 { margin-left: 85.833333% !important; } } @media (max-width: 29.875em) { .s-m-right-5 { margin-right: 85.333333% !important; } } @media (max-width: 29.875em) and (max-width: 29.875em) { .s-block-6 { width: 99.9999999996%; margin-right: 1.5%; } } @media (max-width: 29.875em) { .s-m-left-6 { margin-left: 101.1999996% !important; } } @media (max-width: 29.875em) { .s-m-right-6 { margin-right: 102.3999996% !important; } } .p-left-0 { padding-left: 0; } .m-left-0 { margin-left: 0; } .p-right-0 { padding-right: 0; } .m-right-0 { margin-right: 0; } @media (min-width: 60em) { .p-left-1 { margin-right: 20px; padding-left: 60px; } } @media (min-width: 60em) { .p-right-1 { margin-right: 20px; padding-right: 60px; } } @media (min-width: 60em) { .m-left-1 { margin-right: 20px; margin-left: 80px; } } @media (min-width: 60em) { .m-right-1 { margin-right: 20px; margin-right: 100px; } } @media (min-width: 60em) { .p-left-2 { margin-right: 20px; padding-left: 140px; } } @media (min-width: 60em) { .p-right-2 { margin-right: 20px; padding-right: 140px; } } @media (min-width: 60em) { .m-left-2 { margin-right: 20px; margin-left: 160px; } } @media (min-width: 60em) { .m-right-2 { margin-right: 20px; margin-right: 180px; } } @media (min-width: 60em) { .p-left-3 { margin-right: 20px; padding-left: 220px; } } @media (min-width: 60em) { .p-right-3 { margin-right: 20px; padding-right: 220px; } } @media (min-width: 60em) { .m-left-3 { margin-right: 20px; margin-left: 240px; } } @media (min-width: 60em) { .m-right-3 { margin-right: 20px; margin-right: 260px; } } @media (min-width: 60em) { .p-left-4 { margin-right: 20px; padding-left: 300px; } } @media (min-width: 60em) { .p-right-4 { margin-right: 20px; padding-right: 300px; } } @media (min-width: 60em) { .m-left-4 { margin-right: 20px; margin-left: 320px; } } @media (min-width: 60em) { .m-right-4 { margin-right: 20px; margin-right: 340px; } } @media (min-width: 60em) { .p-left-5 { margin-right: 20px; padding-left: 380px; } } @media (min-width: 60em) { .p-right-5 { margin-right: 20px; padding-right: 380px; } } @media (min-width: 60em) { .m-left-5 { margin-right: 20px; margin-left: 400px; } } @media (min-width: 60em) { .m-right-5 { margin-right: 20px; margin-right: 420px; } } @media (min-width: 60em) { .p-left-6 { margin-right: 20px; padding-left: 460px; } } @media (min-width: 60em) { .p-right-6 { margin-right: 20px; padding-right: 460px; } } @media (min-width: 60em) { .m-left-6 { margin-right: 20px; margin-left: 480px; } } @media (min-width: 60em) { .m-right-6 { margin-right: 20px; margin-right: 500px; } } @media (min-width: 60em) { .p-left-7 { margin-right: 20px; padding-left: 540px; } } @media (min-width: 60em) { .p-right-7 { margin-right: 20px; padding-right: 540px; } } @media (min-width: 60em) { .m-left-7 { margin-right: 20px; margin-left: 560px; } } @media (min-width: 60em) { .m-right-7 { margin-right: 20px; margin-right: 580px; } } @media (min-width: 60em) { .p-left-8 { margin-right: 20px; padding-left: 620px; } } @media (min-width: 60em) { .p-right-8 { margin-right: 20px; padding-right: 620px; } } @media (min-width: 60em) { .m-left-8 { margin-right: 20px; margin-left: 640px; } } @media (min-width: 60em) { .m-right-8 { margin-right: 20px; margin-right: 660px; } } @media (min-width: 60em) { .p-left-9 { margin-right: 20px; padding-left: 700px; } } @media (min-width: 60em) { .p-right-9 { margin-right: 20px; padding-right: 700px; } } @media (min-width: 60em) { .m-left-9 { margin-right: 20px; margin-left: 720px; } } @media (min-width: 60em) { .m-right-9 { margin-right: 20px; margin-right: 740px; } } @media (min-width: 60em) { .p-left-10 { margin-right: 20px; padding-left: 780px; } } @media (min-width: 60em) { .p-right-10 { margin-right: 20px; padding-right: 780px; } } @media (min-width: 60em) { .m-left-10 { margin-right: 20px; margin-left: 800px; } } @media (min-width: 60em) { .m-right-10 { margin-right: 20px; margin-right: 820px; } } @media (min-width: 60em) { .p-left-11 { margin-right: 20px; padding-left: 860px; } } @media (min-width: 60em) { .p-right-11 { margin-right: 20px; padding-right: 860px; } } @media (min-width: 60em) { .m-left-11 { margin-right: 20px; margin-left: 880px; } } @media (min-width: 60em) { .m-right-11 { margin-right: 20px; margin-right: 900px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-0 { padding-left: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-0 { margin-left: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-0 { padding-right: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-0 { margin-right: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-1 { margin-right: 20px; padding-left: 60px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-1 { margin-right: 20px; padding-right: 60px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-1 { margin-right: 20px; margin-left: 80px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-1 { margin-right: 20px; margin-right: 100px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-2 { margin-right: 20px; padding-left: 140px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-2 { margin-right: 20px; padding-right: 140px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-2 { margin-right: 20px; margin-left: 160px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-2 { margin-right: 20px; margin-right: 180px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-3 { margin-right: 20px; padding-left: 220px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-3 { margin-right: 20px; padding-right: 220px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-3 { margin-right: 20px; margin-left: 240px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-3 { margin-right: 20px; margin-right: 260px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-4 { margin-right: 20px; padding-left: 300px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-4 { margin-right: 20px; padding-right: 300px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-4 { margin-right: 20px; margin-left: 320px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-4 { margin-right: 20px; margin-right: 340px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-5 { margin-right: 20px; padding-left: 380px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-5 { margin-right: 20px; padding-right: 380px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-5 { margin-right: 20px; margin-left: 400px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-5 { margin-right: 20px; margin-right: 420px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-6 { margin-right: 20px; padding-left: 460px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-6 { margin-right: 20px; padding-right: 460px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-6 { margin-right: 20px; margin-left: 480px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-6 { margin-right: 20px; margin-right: 500px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-7 { margin-right: 20px; padding-left: 540px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-7 { margin-right: 20px; padding-right: 540px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-7 { margin-right: 20px; margin-left: 560px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-7 { margin-right: 20px; margin-right: 580px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-8 { margin-right: 20px; padding-left: 620px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-8 { margin-right: 20px; padding-right: 620px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-8 { margin-right: 20px; margin-left: 640px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-8 { margin-right: 20px; margin-right: 660px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-9 { margin-right: 20px; padding-left: 700px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-9 { margin-right: 20px; padding-right: 700px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-9 { margin-right: 20px; margin-left: 720px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-9 { margin-right: 20px; margin-right: 740px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-10 { margin-right: 20px; padding-left: 780px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-10 { margin-right: 20px; padding-right: 780px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-10 { margin-right: 20px; margin-left: 800px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-10 { margin-right: 20px; margin-right: 820px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-left-11 { margin-right: 20px; padding-left: 860px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-p-right-11 { margin-right: 20px; padding-right: 860px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-left-11 { margin-right: 20px; margin-left: 880px; } } @media (min-width: 30em) and (max-width: 44.9375em) { .m-m-right-11 { margin-right: 20px; margin-right: 900px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-0 { padding-left: 0; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-0 { margin-left: 0; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-0 { padding-right: 0; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-0 { margin-right: 0; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-1 { margin-right: 20px; padding-left: 60px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-1 { margin-right: 20px; padding-right: 60px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-1 { margin-right: 20px; margin-left: 80px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-1 { margin-right: 20px; margin-right: 100px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-2 { margin-right: 20px; padding-left: 140px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-2 { margin-right: 20px; padding-right: 140px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-2 { margin-right: 20px; margin-left: 160px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-2 { margin-right: 20px; margin-right: 180px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-3 { margin-right: 20px; padding-left: 220px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-3 { margin-right: 20px; padding-right: 220px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-3 { margin-right: 20px; margin-left: 240px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-3 { margin-right: 20px; margin-right: 260px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-4 { margin-right: 20px; padding-left: 300px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-4 { margin-right: 20px; padding-right: 300px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-4 { margin-right: 20px; margin-left: 320px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-4 { margin-right: 20px; margin-right: 340px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-5 { margin-right: 20px; padding-left: 380px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-5 { margin-right: 20px; padding-right: 380px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-5 { margin-right: 20px; margin-left: 400px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-5 { margin-right: 20px; margin-right: 420px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-6 { margin-right: 20px; padding-left: 460px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-6 { margin-right: 20px; padding-right: 460px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-6 { margin-right: 20px; margin-left: 480px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-6 { margin-right: 20px; margin-right: 500px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-7 { margin-right: 20px; padding-left: 540px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-7 { margin-right: 20px; padding-right: 540px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-7 { margin-right: 20px; margin-left: 560px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-7 { margin-right: 20px; margin-right: 580px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-8 { margin-right: 20px; padding-left: 620px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-8 { margin-right: 20px; padding-right: 620px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-8 { margin-right: 20px; margin-left: 640px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-8 { margin-right: 20px; margin-right: 660px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-9 { margin-right: 20px; padding-left: 700px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-9 { margin-right: 20px; padding-right: 700px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-9 { margin-right: 20px; margin-left: 720px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-9 { margin-right: 20px; margin-right: 740px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-10 { margin-right: 20px; padding-left: 780px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-10 { margin-right: 20px; padding-right: 780px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-10 { margin-right: 20px; margin-left: 800px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-10 { margin-right: 20px; margin-right: 820px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-left-11 { margin-right: 20px; padding-left: 860px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-p-right-11 { margin-right: 20px; padding-right: 860px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-left-11 { margin-right: 20px; margin-left: 880px; } } @media (min-width: 45em) and (max-width: 59.9375em) { .ml-m-right-11 { margin-right: 20px; margin-right: 900px; } } .fl { float: left; } .fr { float: right; } html { font-size: 62.5%; margin: 0; padding: 0; } img.resp { /*make an image responsive*/ max-width: 100%; display: block; } .logo-wrapper .svg, .home-logo-wrapper .svg { overflow: hidden; } .resp-width { margin: 0 5%; } @media (min-width: 30em) { .resp-width { margin-right: 20px; width: 460px; margin: 0 auto; } } @media (min-width: 45em) { .resp-width { margin-right: 20px; width: 700px; margin: 0 auto; } } @media (min-width: 60em) { .resp-width { margin-right: 20px; width: 940px; margin: 0 auto; } } .svg > svg, .svg > a > svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #site-header { border-top: 4px solid #36DAFF; position: fixed; width: 100%; z-index: 99; padding-top: 14px; padding-top: 1.4rem; padding-top: 4.3333333333vw; height: 120px; height: 12rem; height: 37.1428571429vw; background: #F4F4F4; } @media (min-width: 30em) { #site-header { padding-top: 14px; padding-top: 2.2615384615rem; } } @media (min-width: 30em) { #site-header { height: 120px; height: 19.3846153846rem; } } @media (min-width: 45em) { #site-header { padding-top: 24px; padding-top: 2.4rem; height: 96px; height: 9.6rem; } } .home #site-header { /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f4f4f4+0,f4f4f4+100&1+0,1+63,0.5+74,0.22+84,0+100 */ height: 50px; height: 5rem; height: 15.4761904762vw; } @media (min-width: 30em) { .home #site-header { height: 50px; height: 8.0769230769rem; } } @media (min-width: 45em) { .home #site-header { height: 96px; height: 9.6rem; } } .menu-active #site-header { background: #36DAFF; } #site-footer { background: #353535; padding-top: 15px; padding-top: 1.5rem; padding-top: 4.6428571429vw; padding-bottom: 11px; padding-bottom: 1.1rem; padding-bottom: 3.4047619048vw; } @media (min-width: 30em) { #site-footer { padding-top: 15px; padding-top: 2.4230769231rem; } } @media (min-width: 30em) { #site-footer { padding-bottom: 11px; padding-bottom: 1.7769230769rem; } } @media (min-width: 45em) { #site-footer { padding-top: 18px; padding-top: 1.8rem; padding-bottom: 9px; padding-bottom: 0.9rem; } } #page { height: 100%; } .menu-toggle { float: right; position: relative; width: 8.4507042254%; height: 0; padding-top: 6.338028169%; } @media (min-width: 45em) { .menu-toggle { position: relative; width: 24px; height: 0; padding-top: 18px; } } .menu-toggle #burger, .menu-toggle #close { -webkit-transition: opacity 0.25s ease-out; -moz-transition: opacity 0.25s ease-out; -ms-transition: opacity 0.25s ease-out; -o-transition: opacity 0.25s ease-out; transition: opacity 0.25s ease-out; } .menu-toggle #close { opacity: 0; } .menu-active .menu-toggle svg rect { fill: #ffffff; } .menu-active .menu-toggle #burger { opacity: 0; } .menu-active .menu-toggle #close { opacity: 1; } .main-logo { float: left; position: relative; width: 23.2394366197%; height: 0; padding-top: 6.7092519993%; } @media (min-width: 45em) { .main-logo { position: relative; width: 156px; height: 0; padding-top: 45.0373788754px; } } /* 4.0 - Menu ----------------------------------------------------------------------------- */ #nav-wrapper { background: #36DAFF; position: relative; top: 0px; display: none; width: 100%; min-height: 100%; padding-top: 134px; padding-top: 13.4rem; padding-top: 41.4761904762vw; padding-bottom: 134px; padding-bottom: 13.4rem; padding-bottom: 41.4761904762vw; } @media (min-width: 30em) { #nav-wrapper { padding-top: 134px; padding-top: 21.6461538462rem; } } @media (min-width: 30em) { #nav-wrapper { padding-bottom: 134px; padding-bottom: 21.6461538462rem; } } @media (min-width: 45em) { #nav-wrapper { padding-top: 120px; padding-top: 12rem; padding-bottom: 120px; padding-bottom: 12rem; } } #nav-wrapper ul { margin: 0; padding: 0; list-style: none; } #footer-navigation ul { list-style: none; margin: 0; padding: 0; } #footer-navigation li { display: inline; margin-left: 3px; margin-left: 0.3rem; margin-left: 0.9285714286vw; margin-right: 3px; margin-right: 0.3rem; margin-right: 0.9285714286vw; } @media (min-width: 30em) { #footer-navigation li { margin-left: 3px; margin-left: 0.4846153846rem; } } @media (min-width: 30em) { #footer-navigation li { margin-right: 3px; margin-right: 0.4846153846rem; } } #footer-navigation li:first-of-type { margin-left: 0; } #site-navigation { color: white; font-size: 32px; font-size: 3.2rem; font-size: 9.9047619048vw; line-height: 1.25; } @media (max-width: 29.875em) { #site-navigation { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { #site-navigation { font-size: 32px; font-size: 5.1692307692rem; } } @media (min-width: 30em) { #site-navigation { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { #site-navigation { margin-right: 20px; width: 340px; margin-right: 20px; margin-left: 360px; font-size: 36px; font-size: 3.6rem; line-height: 1.1666666667; } } @media (min-width: 60em) { #site-navigation { margin-right: 20px; width: 460px; margin-right: 20px; margin-left: 480px; } } /*hide everything else on menu-active*/ .menu-active #main { display: none !important; } .menu-active #site-footer { display: none !important; } /* 5.0 - Typography ----------------------------------------------------------------------------- */ address { font-style: inherit; margin: 0; padding: 0; } a { color: inherit; } header.example h1 { font-size: inherit !important; text-align: center; padding: 4em 0 2em; display: block; } #page-title { padding: 0; margin-top: 20px; margin-top: 2rem; margin-top: 6.1904761905vw; -webkit-transition: opacity 0s ease-in-out; -moz-transition: opacity 0s ease-in-out; -ms-transition: opacity 0s ease-in-out; -o-transition: opacity 0s ease-in-out; transition: opacity 0s ease-in-out; } @media (min-width: 30em) { #page-title { margin-top: 20px; margin-top: 3.2307692308rem; } } @media (min-width: 45em) { #page-title { position: absolute; top: 0; margin-top: 0; } } .home #page-title { display: none; } #page-title .inactive { color: #D2D2D2; } #page-title .active, #page-title a:hover { color: #ABABAB; } .menu-active #page-title { opacity: 0; -webkit-transition: opacity 0.15s ease-in-out; -moz-transition: opacity 0.15s ease-in-out; -ms-transition: opacity 0.15s ease-in-out; -o-transition: opacity 0.15s ease-in-out; transition: opacity 0.15s ease-in-out; } h1, h2 { text-transform: none; color: #909090; font-weight: 400; font-family: "Roboto", "Apercu", Helvetica, Arial, san-serif; font-size: 21px; font-size: 2.1rem; font-size: 6.5vw; line-height: 1.380952381; padding-bottom: 16px; padding-bottom: 1.6rem; padding-bottom: 4.9523809524vw; /*half of elements*/ } @media (min-width: 30em) { h1, h2 { font-size: 21px; font-size: 3.3923076923rem; } } @media (min-width: 30em) { h1, h2 { padding-bottom: 16px; padding-bottom: 2.5846153846rem; } } @media (min-width: 45em) { h1, h2 { font-size: 24px; font-size: 2.4rem; line-height: 1.1666666667; padding-bottom: 11px; padding-bottom: 1.1rem; } } h3 { border-bottom: 1px solid #36DAFF; display: inline-block; } #main-content { color: #ABABAB; } #main-content p { margin-bottom: 1em; } #main-content p:last-of-type { margin-bottom: 0; } #site-footer { color: white; font-size: 11px; font-size: 1.1rem; font-size: 3.4047619048vw; line-height: 1.0909090909; } @media (min-width: 30em) { #site-footer { font-size: 11px; font-size: 1.7769230769rem; } } @media (min-width: 45em) { #site-footer { font-size: 11px; font-size: 1.1rem; line-height: 1.2727272727; } } #site-footer .address { padding-bottom: 20px; padding-bottom: 2rem; padding-bottom: 6.1904761905vw; } @media (min-width: 30em) { #site-footer .address { padding-bottom: 20px; padding-bottom: 3.2307692308rem; } } @media (min-width: 45em) { #site-footer .address { padding-bottom: 0; } } #site-footer h2 { color: inherit; font-size: 14px; font-size: 1.4rem; font-size: 4.3333333333vw; line-height: 1.2142857143; padding-top: 12px; padding-top: 1.2rem; padding-top: 3.7142857143vw; } @media (min-width: 30em) { #site-footer h2 { font-size: 14px; font-size: 2.2615384615rem; } } @media (min-width: 30em) { #site-footer h2 { padding-top: 12px; padding-top: 1.9384615385rem; } } @media (min-width: 45em) { #site-footer h2 { font-size: 14px; font-size: 1.4rem; line-height: 1.2142857143; padding-top: 12px; padding-top: 1.2rem; } } #site-footer h2:before { content: ''; display: block; height: 0; border-top: 1px solid white; width: 13px; width: 1.3rem; width: 4.0238095238vw; padding-bottom: 10px; padding-bottom: 1rem; padding-bottom: 3.0952380952vw; } @media (min-width: 30em) { #site-footer h2:before { width: 13px; width: 2.1rem; } } @media (min-width: 30em) { #site-footer h2:before { padding-bottom: 10px; padding-bottom: 1.6153846154rem; } } @media (min-width: 45em) { #site-footer h2:before { width: 13px; width: 1.3rem; padding-bottom: 10px; padding-bottom: 1rem; } } .footer-menu { padding-top: 26px; padding-top: 2.6rem; padding-top: 8.0476190476vw; padding-bottom: 26px; padding-bottom: 2.6rem; padding-bottom: 8.0476190476vw; } @media (min-width: 30em) { .footer-menu { padding-top: 26px; padding-top: 4.2rem; } } @media (min-width: 30em) { .footer-menu { padding-bottom: 26px; padding-bottom: 4.2rem; } } @media (min-width: 45em) { .footer-menu { padding: 0; } } @media (min-width: 45em) { .finals { padding-top: 46px; padding-top: 4.6rem; } } .footer-logo { position: relative; width: 18.4027777778%; height: 0; padding-top: 5.3129030457%; } @media (min-width: 45em) { .footer-logo { position: relative; width: 53px; height: 0; padding-top: 15.3011607718px; } } /* 6.0 - Pages, modules, widgets and other sections ----------------------------------------------------------------------------- */ #project-images-container .slider-nav .arrows { -webkit-user-select: none; /* Chrome/Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* IE10+ */ /* Rules below not implemented in browsers yet */ -o-user-select: none; user-select: none; } .gallery-cell { height: 100%; } .gallery-cell img { display: block; width: auto; height: 100%; padding: 0; } .fwi img { /*full-width-image*/ width: 100%; height: auto; display: block; outline: none; margin: 0; } .bg-cover-wrapper.page-cover { padding: 0; } .bg-cover { background-position: center; background-repeat: no-repeat; background-size: cover; } @media (max-width: 29.875em) { .wide-text-block, .large-text-block { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .wide-text-block, .large-text-block { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .wide-text-block, .large-text-block { margin-right: 20px; width: 700px; } .page-id-1059 .wide-text-block, .page-id-1059 .large-text-block { margin-right: 20px; width: 340px; margin-left: 0 !important; } } @media (min-width: 60em) { .wide-text-block, .large-text-block { margin-right: 20px; width: 940px; } .page-id-1059 .wide-text-block, .page-id-1059 .large-text-block { margin-right: 20px; width: 460px; margin-left: 0 !important; } } .wide-text-block > *, .large-text-block > * { text-align: left; } .large-text, .large-text-block { color: #909090; font-size: 24px; font-size: 2.4rem; font-size: 7.4285714286vw; line-height: 1.1666666667; } @media (min-width: 30em) { .large-text, .large-text-block { font-size: 24px; font-size: 3.8769230769rem; } } @media (min-width: 45em) { .large-text, .large-text-block { font-size: 24px; font-size: 2.4rem; } } .quote { padding-bottom: 13px; padding-bottom: 1.3rem; padding-bottom: 4.0238095238vw; } .quote > * { text-align: left; } @media (min-width: 30em) { .quote { padding-bottom: 13px; padding-bottom: 2.1rem; } } @media (min-width: 45em) { .quote { padding-bottom: 13px; padding-bottom: 1.3rem; } } .quote:before { content: ''; display: block; height: 0; border-top: 1px solid #36DAFF; width: 30px; width: 3rem; width: 9.2857142857vw; padding-bottom: 10px; padding-bottom: 1rem; padding-bottom: 3.0952380952vw; } @media (min-width: 30em) { .quote:before { width: 30px; width: 4.8461538462rem; } } @media (min-width: 30em) { .quote:before { padding-bottom: 10px; padding-bottom: 1.6153846154rem; } } @media (min-width: 45em) { .quote:before { width: 30px; width: 3rem; padding-bottom: 10px; padding-bottom: 1rem; } } .quote-provider { font-size: 18px; font-size: 1.8rem; font-size: 5.5714285714vw; line-height: 1.1666666667; } @media (min-width: 30em) { .quote-provider { font-size: 18px; font-size: 2.9076923077rem; } } @media (min-width: 45em) { .quote-provider { font-size: 18px; font-size: 1.8rem; } } @media (min-width: 45em) { .two-column-text-block { margin-right: 20px; -webkit-column-width: 300px; margin-right: 20px; -moz-column-width: 300px; margin-right: 20px; -ms-column-width: 300px; margin-right: 20px; -o-column-width: 300px; margin-right: 20px; column-width: 300px; margin-right: 20px; -webkit-column-gap: 60px; /*TOTO PRefixes*/ } .page-id-1059 .two-column-text-block { margin-right: 20px; -webkit-column-width: 220px; margin-right: 20px; -moz-column-width: 220px; margin-right: 20px; -ms-column-width: 220px; margin-right: 20px; -o-column-width: 220px; margin-right: 20px; column-width: 220px; } } @media (min-width: 60em) { .two-column-text-block { margin-right: 20px; -webkit-column-width: 420px; margin-right: 20px; -moz-column-width: 420px; margin-right: 20px; -ms-column-width: 420px; margin-right: 20px; -o-column-width: 420px; margin-right: 20px; column-width: 420px; margin-right: 20px; -webkit-column-gap: 60px; /*p{ overflow: hidden; break-inside: avoid-column; -webkit-column-break-inside: avoid; }*/ } .page-id-1059 .two-column-text-block { margin-right: 20px; -webkit-column-width: 300px; margin-right: 20px; -moz-column-width: 300px; margin-right: 20px; -ms-column-width: 300px; margin-right: 20px; -o-column-width: 300px; margin-right: 20px; column-width: 300px; } } @media (max-width: 29.875em) { .two-column-text-block { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .two-column-text-block { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .two-column-text-block { margin-right: 20px; width: 700px; } .page-id-1059 .two-column-text-block { margin-right: 20px; width: 460px; margin-left: 0 !important; } } @media (min-width: 60em) { .two-column-text-block { margin-right: 20px; width: 940px; } .page-id-1059 .two-column-text-block { margin-right: 20px; width: 620px; margin-left: 0 !important; } } .two-column-text-block > * { text-align: left; } .row, .element { padding-bottom: 32px; padding-bottom: 3.2rem; padding-bottom: 9.9047619048vw; } @media (min-width: 30em) { .row, .element { padding-bottom: 32px; padding-bottom: 5.1692307692rem; } } @media (min-width: 45em) { .row, .element { padding-bottom: 22px; padding-bottom: 2.2rem; } } .large-text a, .wide-text-block a, .two-column-text-block a, .three-columns-text a, .post .content a { border-bottom: 1px solid #ABABAB; } .cta-large { position: relative; display: block; color: white; background: #36DAFF; padding-bottom: 0; font-size: 15px; font-size: 1.5rem; font-size: 4.6428571429vw; line-height: 1.4; margin-bottom: 32px; margin-bottom: 3.2rem; margin-bottom: 9.9047619048vw; background-color: #36DAFF; -webkit-background-blend-mode: multiply; -moz-background-blend-mode: multiply; -o-background-blend-mode: multiply; -ms-background-blend-mode: multiply; background-blend-mode: multiply; } @media (min-width: 30em) { .cta-large { font-size: 15px; font-size: 2.4230769231rem; } } @media (min-width: 30em) { .cta-large { margin-bottom: 32px; margin-bottom: 5.1692307692rem; } } .no-blend .cta-large { -webkit-background-blend-mode: normal; -moz-background-blend-mode: normal; -o-background-blend-mode: normal; -ms-background-blend-mode: normal; background-blend-mode: normal; background-image: none !important; } @media (max-width: 29.875em) { .cta-large { margin-left: 0; margin-right: 0; width: auto; } } @media (min-width: 30em) and (max-width: 44.9375em) { .cta-large { margin-left: 0; margin-right: 0; width: auto; } } @media (min-width: 45em) { .cta-large { font-size: 36px; font-size: 3.6rem; line-height: 1.1111111111; margin-bottom: 22px; margin-bottom: 2.2rem; } } .cta-large img { position: absolute; opacity: 0; } .no-blend .cta-large img { opacity: .55; } .cta-large .text { -webkit-transition: all 0.15s ease-in-out; -moz-transition: all 0.15s ease-in-out; -ms-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; text-align: center; display: block; border: 2px solid #353535; background: #353535; margin-top: 76px; margin-top: 7.6rem; margin-top: 23.5238095238vw; margin-bottom: 76px; margin-bottom: 7.6rem; margin-bottom: 23.5238095238vw; padding-top: 10px; padding-top: 1rem; padding-top: 3.0952380952vw; padding-bottom: 10px; padding-bottom: 1rem; padding-bottom: 3.0952380952vw; } @media (min-width: 30em) { .cta-large .text { margin-top: 76px; margin-top: 12.2769230769rem; } } @media (min-width: 30em) { .cta-large .text { margin-bottom: 76px; margin-bottom: 12.2769230769rem; } } @media (min-width: 30em) { .cta-large .text { padding-top: 10px; padding-top: 1.6153846154rem; } } @media (min-width: 30em) { .cta-large .text { padding-bottom: 10px; padding-bottom: 1.6153846154rem; } } @media (min-width: 45em) { .cta-large .text { padding-top: 10px; padding-top: 1rem; padding-bottom: 10px; padding-bottom: 1rem; margin-top: 157px; margin-top: 15.7rem; margin-bottom: 157px; margin-bottom: 15.7rem; } } .cta-large:hover .text { border: 2px solid white; background: none; } .cta-twoup { padding-top: 28px; padding-top: 2.8rem; padding-top: 8.6666666667vw; padding-bottom: 60px; padding-bottom: 6rem; padding-bottom: 18.5714285714vw; } .cta-twoup > div:first-child { margin-bottom: 22px; margin-bottom: 2.2rem; margin-bottom: 6.8095238095vw; } @media (min-width: 30em) { .cta-twoup > div:first-child { margin-bottom: 22px; margin-bottom: 3.5538461538rem; } } @media (min-width: 45em) { .cta-twoup > div:first-child { margin-bottom: 0; } } @media (min-width: 30em) { .cta-twoup { padding-top: 28px; padding-top: 4.5230769231rem; } } @media (min-width: 30em) { .cta-twoup { padding-bottom: 60px; padding-bottom: 9.6923076923rem; } } @media (max-width: 29.875em) { .cta-twoup { margin-left: 0; margin-right: 0; width: auto; } } @media (min-width: 30em) and (max-width: 44.9375em) { .cta-twoup { margin-left: 0; margin-right: 0; width: auto; } } @media (min-width: 45em) { .cta-twoup { padding-top: 20px; padding-top: 2rem; padding-bottom: 48px; padding-bottom: 4.8rem; } } @media (min-width: 45em) { .cta-twoup > div { margin-right: 20px; width: 340px; height: 404px; height: 40.4rem; position: relative; } } @media (min-width: 60em) { .cta-twoup > div { margin-right: 20px; width: 460px; } } .cta-pic { width: 100%; height: 270px; height: 27rem; height: 83.5714285714vw; background-position: center; background-repeat: no-repeat; background-size: cover; } @media (min-width: 30em) { .cta-pic { height: 270px; height: 43.6153846154rem; } } .cta-half { background: #36DAFF; padding-top: 24px; padding-top: 2.4rem; padding-top: 7.4285714286vw; padding-bottom: 18px; padding-bottom: 1.8rem; padding-bottom: 5.5714285714vw; } @media (min-width: 30em) { .cta-half { padding-top: 24px; padding-top: 3.8769230769rem; } } @media (min-width: 30em) { .cta-half { padding-bottom: 18px; padding-bottom: 2.9076923077rem; } } @media (max-width: 29.875em) { .cta-half { width: 100%; padding-left: 5%; padding-right: 5%; text-align: center; } } @media (min-width: 30em) and (max-width: 44.9375em) { .cta-half { width: 100%; text-align: center; } } @media (min-width: 45em) { .cta-half { padding: 0; } } .cta-half > * { margin: 0 auto; text-align: left; } @media (min-width: 30em) and (max-width: 44.9375em) { .cta-half > * { margin-right: 20px; width: 460px; margin: 0 auto; } } .cta-half p { color: #353535; font-size: 16px; font-size: 1.6rem; font-size: 4.9523809524vw; line-height: 1.1875; padding-bottom: 86px; padding-bottom: 8.6rem; padding-bottom: 26.619047619vw; } @media (min-width: 30em) { .cta-half p { font-size: 16px; font-size: 2.5846153846rem; } } @media (min-width: 30em) { .cta-half p { padding-bottom: 86px; padding-bottom: 13.8923076923rem; } } @media (min-width: 45em) { .cta-half p { font-size: 24px; font-size: 2.4rem; line-height: 1.1666666667; padding-bottom: 0; position: absolute; top: 18px; padding-left: 15px; padding-left: 1.5rem; padding-right: 15px; padding-right: 1.5rem; } } @media (min-width: 60em) { .cta-half p { top: 36px; padding-left: 28px; padding-left: 2.8rem; padding-right: 28px; padding-right: 2.8rem; } } .cta-half a.action-button { background: #353535; border: 2px solid #353535; color: white; display: block; text-align: center; font-size: 15px; font-size: 1.5rem; font-size: 4.6428571429vw; line-height: 1.3333333333; padding-top: 11px; padding-top: 1.1rem; padding-top: 3.4047619048vw; padding-bottom: 11px; padding-bottom: 1.1rem; padding-bottom: 3.4047619048vw; } @media (min-width: 30em) { .cta-half a.action-button { font-size: 15px; font-size: 2.4230769231rem; } } @media (min-width: 30em) { .cta-half a.action-button { padding-top: 11px; padding-top: 1.7769230769rem; } } @media (min-width: 30em) { .cta-half a.action-button { padding-bottom: 11px; padding-bottom: 1.7769230769rem; } } @media (min-width: 45em) { .cta-half a.action-button { font-size: 21px; font-size: 2.1rem; line-height: 1.380952381; position: absolute; bottom: 15px; width: calc(100% - 30px); left: 15px; padding: 0.7619047619em 1.4285714286em; } } @media (min-width: 60em) { .cta-half a.action-button { bottom: 30px; width: calc(100% - 56px); left: 28px; } } .cta-half a.action-button:hover { border: 2px solid white; background: none; } .three-columns-text { padding-top: 32px; padding-top: 3.2rem; padding-top: 9.9047619048vw; padding-bottom: 64px; padding-bottom: 6.4rem; padding-bottom: 19.8095238095vw; } @media (min-width: 30em) { .three-columns-text { padding-top: 32px; padding-top: 5.1692307692rem; } } @media (min-width: 30em) { .three-columns-text { padding-bottom: 64px; padding-bottom: 10.3384615385rem; } } @media (min-width: 45em) { .three-columns-text { padding-top: 22px; padding-top: 2.2rem; padding-bottom: 44px; padding-bottom: 4.4rem; } } .three-columns-text section { padding-bottom: 32px; padding-bottom: 3.2rem; padding-bottom: 9.9047619048vw; } @media (min-width: 30em) { .three-columns-text section { padding-bottom: 32px; padding-bottom: 5.1692307692rem; } } .three-columns-text section:last-of-type { padding-bottom: 0; } @media (min-width: 45em) { .three-columns-text section { padding-bottom: 0; } } .three-columns-text .block { margin-right: 20px; width: 460px; } @media (max-width: 29.875em) { .three-columns-text .block { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 45em) { .three-columns-text .block { margin-right: 20px; width: 193.333333333px; margin: 0; } .three-columns-text .block:nth-of-type(2) { margin-right: 20px; margin-left: 40px; margin-right: 20px; margin-right: 60px; } } @media (min-width: 60em) { .three-columns-text .block { margin-right: 20px; width: 273.33333328px; margin: 0; } .three-columns-text .block:nth-of-type(2) { margin-right: 20px; margin-left: 40px; margin-right: 20px; margin-right: 60px; } } #map_canvas { height: 360px; height: 36rem; height: 111.428571429vw; } @media (min-width: 30em) { #map_canvas { height: 360px; height: 58.1538461538rem; } } @media (min-width: 45em) { #map_canvas { height: 400px; height: 40rem; } } .quote-bg { background: #353535; clear: both; padding: 5%; padding-top: 25px; padding-top: 2.5rem; padding-top: 7.7380952381vw; padding-bottom: 55px; padding-bottom: 5.5rem; padding-bottom: 17.0238095238vw; font-family: "Apercu", Helvetica, Arial, san-serif; } @media (min-width: 30em) { .quote-bg { padding-top: 25px; padding-top: 4.0384615385rem; } } @media (min-width: 30em) { .quote-bg { padding-bottom: 55px; padding-bottom: 8.8846153846rem; } } @media (min-width: 30em) { .quote-bg { padding-left: 15px; padding-left: 1.5rem; } } @media (min-width: 45em) { .quote-bg { padding-top: 25px; padding-top: 2.5rem; padding-bottom: 35px; padding-bottom: 3.5rem; } } .quote-bg .quote { color: #36DAFF; } @media (max-width: 29.875em) { .quote-bg .quote { width: 100%; } } @media (min-width: 30em) and (max-width: 44.9375em) { .quote-bg .quote { width: 100%; } } .page-template-projects .quote-bg, .tax-sector .quote-bg { background: none; padding-bottom: 0; } @media (min-width: 30em) { .page-template-projects .quote-bg, .tax-sector .quote-bg { padding-left: 0; } } .page-template-projects .quote-bg .quote, .tax-sector .quote-bg .quote { color: #909090; } /*forms*/ .cf_hidden { display: none; } .reqtxt, .emailreqtxt { display: none; } .cf-ol { list-style: none; margin: 0; padding: 0; } .cf-ol > li { border-top: 1px solid #36DAFF; line-height: 2; } .cf-ol > li label span { width: 40%; display: inline-block; } .cf-ol > li input { width: 60%; display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: none; background: none; } .cf-ol > li textarea { width: 100%; border: 1px solid #36DAFF; background: none; } #label--4 span { width: 100%; } #sendbutton { display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 1px solid #36DAFF; background: none; width: 100%; margin-top: 6px; margin-top: 0.6rem; margin-top: 1.8571428571vw; padding: 0.7142857143em 0; color: #909090; } @media (min-width: 30em) { #sendbutton { margin-top: 6px; margin-top: 0.9692307692rem; } } @media (min-width: 45em) { #sendbutton { margin-top: 14px; margin-top: 1.4rem; width: auto; padding-left: 51px; padding-left: 5.1rem; padding-right: 51px; padding-right: 5.1rem; } } #sendbutton:hover { background: #36DAFF; color: white; } #usermessagea, #usermessageb { color: #36DAFF; } .contact-form .contact-block, .contact-form .address-block { margin-bottom: 1em; } @media (max-width: 29.875em) { .contact-form .contact-block, .contact-form .address-block { margin-right: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .contact-form .contact-block, .contact-form .address-block { margin-right: 0; } } @media (min-width: 45em) { .contact-form .contact-block, .contact-form .address-block { float: right; } } @media (min-width: 45em) { .contact-form .address-block { margin-right: 0; } } @media (min-width: 45em) { .contact-form .form-block { margin-right: 20; } } .img-wrap { background-position: center; background-size: cover; background-repeat: none; } .img-wrap img { width: 100%; height: 100%; -webkit-object-fit: cover; -moz-object-fit: cover; -o-object-fit: cover; -ms-object-fit: cover; object-fit: cover; overflow: hidden; opacity: 0; /*use this for IE later...DO NOT FORGET... if('objectFit' in document.documentElement.style === false) { */ } /*3pics*/ @media (min-width: 45em) { .three-pics { padding-top: 0px; padding-top: 0rem; margin-bottom: 20px; margin-bottom: 2rem; } } .three-pics + .project-image-grid { margin-top: -20px; margin-top: -2rem; } @media (min-width: 30em) { .three-pics + .project-image-grid { margin-top: -20px; margin-top: -2rem; } } .three-pics .img-wrap { height: 188px; height: 18.8rem; height: 58.1904761905vw; margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; } @media (min-width: 30em) { .three-pics .img-wrap { height: 188px; height: 30.3692307692rem; } } @media (min-width: 30em) { .three-pics .img-wrap { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } .three-pics .img-wrap:last-child { margin-bottom: 0; } @media (min-width: 30em) { .three-pics .img-wrap { margin-bottom: 20px; margin-bottom: 2rem; } } @media (min-width: 45em) { .three-pics .img-wrap { height: 298px; height: 29.8rem; margin-bottom: 0; } } @media (min-width: 60em) { .three-pics .img-wrap { height: 402px; height: 40.2rem; } } .layered { position: relative; } .layered > * { z-index: 1; /*default*/ } .layered .overlay { font-family: "Heimat Sarah", "Roboto", "Apercu", Helvetica, Arial, san-serif; font-weight: 700; -webkit-transform: translate3d(0, 0, 0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; z-index: 2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; background-color: #36DAFF; background-size: cover; background-position: center; -webkit-background-blend-mode: multiply; -moz-background-blend-mode: multiply; -o-background-blend-mode: multiply; -ms-background-blend-mode: multiply; background-blend-mode: multiply; } .home .layered .overlay { background-color: #ABABAB; } .no-blend .layered .overlay { -webkit-background-blend-mode: normal; -moz-background-blend-mode: normal; -o-background-blend-mode: normal; -ms-background-blend-mode: normal; background-blend-mode: normal; background-color: rgba(34, 198, 255, 0.55); background-image: none !important; opacity: 0; } .no-blend.home .layered .overlay { background-color: rgba(171, 171, 171, 0.55); } .layered:hover .overlay, .layered .touch-hover .overlay { opacity: 1; } .no-blend .layered:hover .overlay, .no-blend .layered .touch-hover .overlay { opacity: 1; } .link_page.layered .overlay { background-color: #36DAFF; -webkit-background-blend-mode: multiply; -moz-background-blend-mode: multiply; -o-background-blend-mode: multiply; -ms-background-blend-mode: multiply; background-blend-mode: multiply; opacity: 1; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .no-blend .link_page.layered .overlay { -webkit-background-blend-mode: normal; -moz-background-blend-mode: normal; -o-background-blend-mode: normal; -ms-background-blend-mode: normal; background-blend-mode: normal; background-color: rgba(34, 198, 255, 0.55); background-image: none !important; opacity: 1; } .link_page.layered:hover .overlay, .link_page.layered .touch-hover .overlay { background-color: #ABABAB; } .no-blend .link_page.layered:hover .overlay, .no-blend .link_page.layered .touch-hover .overlay { background-color: rgba(171, 171, 171, 0.55); opacity: 1; } .overlay span { -webkit-font-smoothing: antialiased; font-size: 31px; font-size: 3.1rem; font-size: 9.5952380952vw; line-height: 1.1612903226; color: white; display: block; width: 100%; padding-left: 5%; padding-right: 5%; text-align: center; top: 50%; position: relative; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); word-wrap: break-word; /*-webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;*/ } @media (min-width: 30em) { .overlay span { font-size: 31px; font-size: 5.0076923077rem; } } @media (min-width: 45em) { .overlay span { font-size: 22px; font-size: 2.2rem; line-height: 1.1290322581; padding-left: 24px; padding-left: 2.4rem; padding-right: 24px; padding-right: 2.4rem; } } /* .embed-wrapper{ @include breakpoint(midiLarge){ @include gb(2,''); margin:0 auto; } @include breakpoint(maxi){ @include gb(2,''); margin:0 auto; } video{ @extend .centred; @include gb-s(4,''); @include breakpoint(midiLarge){ @include gb(9,''); } @include breakpoint(maxi){ @include gb(12,''); } } } .embed-container { @extend .centred; @include gb-s(4,''); position: relative; padding-bottom: 55.5%; height: 0; overflow: hidden; max-width: 100%; @include breakpoint(midiLarge){ padding-bottom: 41.55%; @include gb(9,''); } @include breakpoint(maxi){ @include gb(12,''); } iframe, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } } */ .img-row { clear: both; } @media (min-width: 45em) { .project-image-grid .img-row.block-full { height: 529px; height: 52.9rem; } .projects-grid .img-row { height: 320px; height: 32rem; } } .img-row > div, .img-row.block-full, .img-row > a, .img-row .short { margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; } @media (min-width: 30em) { .img-row > div, .img-row.block-full, .img-row > a, .img-row .short { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } @media (min-width: 30em) { .img-row > div, .img-row.block-full, .img-row > a, .img-row .short { margin-bottom: 20px; margin-bottom: 2rem; } } .img-row, .img-row > div, .img-row > a { height: 190px; height: 19rem; height: 58.8095238095vw; } @media (min-width: 30em) { .img-row, .img-row > div, .img-row > a { height: 190px; height: 30.6923076923rem; } } @media (min-width: 45em) { .img-row, .img-row > div, .img-row > a { height: 402px; height: 40.2rem; } .projects-grid .img-row, .projects-grid .img-row > div, .projects-grid .img-row > a { height: 320px; height: 32rem; } } .img-row.tall-row { height: 610px; height: 61rem; height: 188.80952381vw; } @media (min-width: 30em) { .img-row.tall-row { height: 610px; height: 98.5384615385rem; } } @media (min-width: 45em) { .img-row.tall-row { height: 480px; height: 48rem; } } @media (min-width: 45em) { .img-row.tall-row .tall { height: 480px; height: 48rem; } } .img-row.tall-row div.tall { height: 420px; height: 42rem; height: 130vw; } @media (min-width: 30em) { .img-row.tall-row div.tall { height: 420px; height: 67.8461538462rem; } } @media (min-width: 45em) { .img-row.tall-row div.tall { height: 480px; height: 48rem; } } .img-row.tall-row .short { height: 230px; height: 23rem; } .makequote { font-family: "Heimat Sarah", "Roboto", "Apercu", Helvetica, Arial, san-serif; font-weight: 700; } @media (min-width: 45em) { .makequote { padding-top: 46px; padding-top: 4.6rem; padding-bottom: 70px; padding-bottom: 7rem; } } .makequote a { border-bottom: 1px solid #36DAFF; -webkit-word-wrap: break-word; -moz-word-wrap: break-word; -o-word-wrap: break-word; -ms-word-wrap: break-word; word-wrap: break-word; } footer a:hover, #related a:hover { color: #36DAFF; } .element p a:hover { color: #36DAFF; border-bottom: 1px solid #36DAFF; } .sector-link { border-bottom: 1px solid #36DAFF; } .related { height: 190px; height: 19rem; height: 58.8095238095vw; margin-bottom: 10px; margin-bottom: 1rem; margin-bottom: 3.0952380952vw; } @media (min-width: 30em) { .related { height: 190px; height: 30.6923076923rem; } } @media (min-width: 30em) { .related { margin-bottom: 10px; margin-bottom: 1.6153846154rem; } } @media (min-width: 45em) { .related { height: 202px; height: 20.2rem; margin-bottom: 0; } } #related { margin-bottom: 30px; margin-bottom: 3rem; margin-bottom: 9.2857142857vw; } @media (min-width: 30em) { #related { margin-bottom: 30px; margin-bottom: 4.8461538462rem; } } @media (min-width: 45em) { #related { margin-bottom: 28px; margin-bottom: 2.8rem; } } .project-image { padding-bottom: 14px; padding-bottom: 1.4rem; padding-bottom: 4.3333333333vw; } @media (min-width: 30em) { .project-image { padding-bottom: 14px; padding-bottom: 2.2615384615rem; } } @media (min-width: 45em) { .project-image { padding-bottom: 20px; padding-bottom: 2rem; } } #project-info { padding-bottom: 15px; padding-bottom: 1.5rem; padding-bottom: 4.6428571429vw; } @media (min-width: 30em) { #project-info { padding-bottom: 15px; padding-bottom: 2.4230769231rem; } } @media (min-width: 45em) { #project-info { padding-bottom: 40px; padding-bottom: 4rem; } } #project-info dt, #project-info dd { margin: 0; } #project-info dt { clear: both; font-weight: 400; border-bottom: 1px solid #36DAFF; line-height: 1; width: auto; display: inline-block; } #project-info dd { display: block; margin-bottom: .5em; } #project-info dd:first-of-type { text-transform: capitalize; } #project-info .awards { padding-bottom: 14px; padding-bottom: 1.4rem; padding-bottom: 4.3333333333vw; } @media (min-width: 30em) { #project-info .awards { padding-bottom: 14px; padding-bottom: 2.2615384615rem; } } @media (min-width: 45em) { #project-info .awards { padding-bottom: 20px; padding-bottom: 2rem; } } .awards h2 { font-size: inherit; color: inherit; border-bottom: 1px solid #36DAFF; margin: inherit; padding: 0; display: inline-block; line-height: 1; } .awards ul, .awards li { margin: 0; list-style: none; } .image-grid { font-family: "Heimat Sarah", "Roboto", "Apercu", Helvetica, Arial, san-serif; font-weight: 700; } .image-grid .solid { overflow: hidden; background: #36DAFF; color: #353535; padding: 5% 8%; } @media (max-width: 29.875em) { .image-grid .solid { height: auto; } } @media (min-width: 30em) and (max-width: 44.9375em) { .image-grid .solid { height: auto; } } @media (min-width: 45em) { .image-grid .solid { padding: 22px 30px; } } .image-grid .solid .quote { color: inherit; font-size: 24px; font-size: 2.4rem; font-size: 7.4285714286vw; line-height: 1.1666666667; padding: 0; } @media (min-width: 30em) { .image-grid .solid .quote { font-size: 24px; font-size: 3.8769230769rem; } } @media (min-width: 45em) { .image-grid .solid .quote { font-size: 24px; font-size: 2.4rem; } } .image-grid .solid .quote:before { border-top-color: #353535; } .image-grid .solid.block-half .quote { font-size: 33px; font-size: 3.3rem; font-size: 10.2142857143vw; line-height: 1.2121212121; } @media (min-width: 30em) { .image-grid .solid.block-half .quote { font-size: 33px; font-size: 5.3307692308rem; } } @media (min-width: 45em) { .image-grid .solid.block-half .quote { font-size: 42px; font-size: 4.2rem; line-height: 1; } } .image-grid .solid.block-half .quote:before { display: none; } .image-grid .solid.block-full { background: #353535; color: #36DAFF; } .image-grid .solid.block-full .quote { font-size: 33px; font-size: 3.3rem; font-size: 10.2142857143vw; line-height: 1.2121212121; } @media (min-width: 30em) { .image-grid .solid.block-full .quote { font-size: 33px; font-size: 5.3307692308rem; } } @media (min-width: 45em) { .image-grid .solid.block-full .quote { font-size: 50px; font-size: 5rem; line-height: 1; } } .image-grid .solid.block-full .quote:before { display: none; } .image-grid .solid.short { background: #353535; } .image-grid .solid.short .quote { color: #36DAFF; font-size: 20px; font-size: 2rem; font-size: 6.1904761905vw; line-height: 1.2; } @media (min-width: 30em) { .image-grid .solid.short .quote { font-size: 20px; font-size: 3.2307692308rem; } } @media (min-width: 45em) { .image-grid .solid.short .quote { font-size: 24px; font-size: 2.4rem; line-height: 1.0833333333; } } .project-cat-img { display: none; } @media (min-width: 45em) { .project-cat-img { display: block; } } #sector-quote { margin-top: 0; padding-bottom: 0; } #sector-quote .img-row { height: auto; } #sector-quote .quote { font-size: 16px; font-size: 1.6rem; font-size: 4.9523809524vw; line-height: 1.2; font-family: "Apercu", Helvetica, Arial, san-serif; font-weight: 400; } @media (min-width: 30em) { #sector-quote .quote { font-size: 16px; font-size: 2.5846153846rem; } } @media (min-width: 45em) { #sector-quote .quote { font-size: 18px; font-size: 1.8rem; } } #sector-quote .quote-provider { display: block; margin-top: 1em; font-size: 14px; font-size: 1.4rem; font-size: 4.3333333333vw; } @media (min-width: 30em) { #sector-quote .quote-provider { font-size: 14px; font-size: 2.2615384615rem; } } @media (min-width: 45em) { #sector-quote .quote-provider { font-size: 16px; font-size: 1.6rem; } } #sector-quote em, #sector-quote i { font-style: italic; } .image-grid .solid.short.showbg { background: #36DAFF; } /*nav for projects page*/ #project-cat-nav { -webkit-appearance: none; -moz-appearance: none; -o-appearance: none; -ms-appearance: none; appearance: none; width: 100%; border: 1px solid #36DAFF; border-radius: 0; background: url(../images/arrow-down.png) no-repeat; background-size: 7.4468085106% auto; color: #ABABAB; font-size: 15px; font-size: 1.5rem; font-size: 4.6428571429vw; line-height: 1.4; padding: 10px; padding: 1rem; padding: 3.0952380952vw; background-position: right 10px center; background-position: right 1rem center; background-position: right 3.0952380952vw center; } @media (min-width: 30em) { #project-cat-nav { font-size: 15px; font-size: 2.4230769231rem; } } @media (min-width: 30em) { #project-cat-nav { padding: 10px; padding: 1.6153846154rem; } } @media (min-width: 30em) { #project-cat-nav { background-position: right 10px center; background-position: right 1.6153846154rem center; } } #project-cat-nav option { text-align: center; background: white; } .project-overview-links, .project-sort-links { margin-right: 20px; width: 100px; } @media (min-width: 60em) { .project-overview-links, .project-sort-links { margin-right: 20px; width: 140px; } } .project-sector-links { margin-right: 20px; width: 340px; -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; -ms-column-count: 3; column-count: 3; } @media (min-width: 60em) { .project-sector-links { margin-right: 20px; width: 460px; } } .project-sector-links a { display: block; max-width: 120px; } .project-sector-links a.active { color: #36DAFF; } .project-sort-links { margin-right: 20px; margin-left: 120px; } @media (min-width: 60em) { .project-sort-links { margin-right: 20px; margin-left: 160px; } } #project-nav .active { text-decoration: underline; } #project-nav a:hover { color: #36DAFF; } #project-nav .block-full { color: #ABABAB; font-size: 13px; font-size: 1.3rem; line-height: 1.3846153846; padding-bottom: 20px; padding-bottom: 2rem; } #project-nav .block-full .view { padding-top: 1.38461538461538em; } /*accordion styles - peopl and list view*/ .accordion { padding-bottom: 52px; padding-bottom: 5.2rem; padding-bottom: 16.0952380952vw; color: #36DAFF; } @media (min-width: 30em) { .accordion { padding-bottom: 52px; padding-bottom: 8.4rem; } } @media (min-width: 45em) { .accordion { padding-bottom: 166px; padding-bottom: 16.6rem; } } .accordion .list-row { font-size: 21px; font-size: 2.1rem; font-size: 6.5vw; line-height: 1.380952381; } @media (min-width: 30em) { .accordion .list-row { font-size: 21px; font-size: 3.3923076923rem; } } .accordion .list-row h2 { color: #36DAFF; border-bottom: 1px solid #36DAFF; display: inline-block; cursor: pointer; display: block; background: url(../images/plus.png) no-repeat right center; background-size: auto 30px; padding-top: 5px; padding-top: 0.5rem; padding-top: 1.5476190476vw; padding-bottom: 5px; padding-bottom: 0.5rem; padding-bottom: 1.5476190476vw; } @media (min-width: 30em) { .accordion .list-row h2 { padding-top: 5px; padding-top: 0.8076923077rem; } } @media (min-width: 30em) { .accordion .list-row h2 { padding-bottom: 5px; padding-bottom: 0.8076923077rem; } } @media (min-width: 45em) { .accordion .list-row h2 { background-size: auto 20px; padding-top: 5px; padding-top: 0.5rem; padding-bottom: 5px; padding-bottom: 0.5rem; } } .accordion .list-row h3 { display: block; } @media (min-width: 45em) { .accordion .list-row { font-size: 24px; font-size: 2.4rem; line-height: 1.1666666667; } } .accordion .list-content { color: #ABABAB; font-size: 13px; font-size: 1.3rem; font-size: 4.0238095238vw; line-height: 1.3846153846; border-bottom: 1px solid #36DAFF; padding-top: 5px; padding-top: 0.5rem; padding-top: 1.5476190476vw; padding-bottom: 5px; padding-bottom: 0.5rem; padding-bottom: 1.5476190476vw; } @media (min-width: 30em) { .accordion .list-content { font-size: 13px; font-size: 2.1rem; } } @media (min-width: 30em) { .accordion .list-content { padding-top: 5px; padding-top: 0.8076923077rem; } } @media (min-width: 30em) { .accordion .list-content { padding-bottom: 5px; padding-bottom: 0.8076923077rem; } } @media (min-width: 45em) { .accordion .list-content { font-size: 14px; font-size: 1.4rem; line-height: 1.4285714286; padding-top: 5px; padding-top: 0.5rem; padding-bottom: 5px; padding-bottom: 0.5rem; } } .home-blocks > .block { margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; height: 190px; height: 19rem; height: 58.8095238095vw; } @media (min-width: 30em) { .home-blocks > .block { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } @media (min-width: 30em) { .home-blocks > .block { height: 190px; height: 30.6923076923rem; } } @media (max-width: 29.875em) { .home-blocks > .block { width: 46.9999999998%; margin-right: 6%; } } .home-blocks > .block .overlay span { font-size: 20px; font-size: 2rem; font-size: 6.1904761905vw; line-height: 1.5; } @media (min-width: 30em) { .home-blocks > .block .overlay span { font-size: 20px; font-size: 3.2307692308rem; } } @media (min-width: 30em) and (max-width: 44.9375em) { .home-blocks > .block { margin-right: 20px; width: 220px; } } @media (min-width: 30em) { .home-blocks > .block { margin-bottom: 20px; margin-bottom: 2rem; } } @media (min-width: 45em) { .home-blocks > .block { height: 320px; height: 32rem; } .home-blocks > .block .overlay span { font-size: 40px; font-size: 4rem; line-height: 1.55; } } .home-blocks .page .overlay { background-color: #6B6766; } @media (max-width: 29.875em) { .home-blocks > .block:nth-of-type(3n) { width: 99.9999999996%; margin-right: 1.5%; } } @media (max-width: 29.875em) { .home-blocks > .block:nth-of-type(3n) { margin-right: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .home-blocks > .block:nth-of-type(3n) { margin-right: 20px; width: 460px; margin-right: 0; } } @media (max-width: 29.875em) { .home-blocks > .block:nth-of-type(3n-1) { margin-right: 0; } } @media (min-width: 30em) and (max-width: 44.9375em) { .home-blocks > .block:nth-of-type(3n-1) { margin-right: 0; } } @media (min-width: 45em) { .home-blocks > .block:nth-of-type(2n) { margin-right: 0; } } .home-feature { position: relative; top: 0; left: 0; width: 100%; height: 100vh; margin-top: -134px; margin-top: -13.4rem; margin-top: -41.4761904762vw; } @media (min-width: 30em) { .home-feature { margin-top: -134px; margin-top: -21.6461538462rem; } } @media (min-width: 45em) { .home-feature { margin-top: -120px; margin-top: -12rem; } } .home-feature .img-wrap { width: 100%; height: 100%; } .home-feature .gallery-cell { width: 100%; height: 100%; } .home-feature .arrow { cursor: pointer; position: absolute; bottom: 0; z-index: 3; width: 100%; text-align: center; padding-bottom: 15px; padding-bottom: 1.5rem; padding-bottom: 4.6428571429vw; } @media (min-width: 30em) { .home-feature .arrow { padding-bottom: 15px; padding-bottom: 2.4230769231rem; } } @media (min-width: 45em) { .home-feature .arrow { padding-bottom: 22px; padding-bottom: 2.2rem; } } @keyframes bouncearrow { 0% { margin-top: 0px; } 20% { margin-top: -60px; } 40% { margin-top: 0px; } 100% { margin-top: 0px; } } .home-feature .arrow img { animation-name: bouncearrow; animation-duration: 3s; animation-delay: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; /*@include breakpoint(midiLarge){ padding:5px; }*/ } .home-feature .text { font-family: "Heimat Sarah", "Roboto", "Apercu", Helvetica, Arial, san-serif; font-weight: 700; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; top: 29.1044776119%; } .home-feature .text > .resp-width { height: 100%; } .home-feature .text span { -webkit-font-smoothing: antialiased; font-size: 38px; font-size: 3.8rem; font-size: 11.7619047619vw; line-height: 1; position: relative; color: white; } @media (min-width: 30em) { .home-feature .text span { font-size: 38px; font-size: 6.1384615385rem; } } @media (min-width: 45em) { .home-feature .text span { font-size: 64px; font-size: 6.4rem; line-height: 0.96875; } } #home-intro-text { background: #353535; padding-top: 17px; padding-top: 1.7rem; padding-top: 5.2619047619vw; padding-bottom: 50px; padding-bottom: 5rem; padding-bottom: 15.4761904762vw; margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; } @media (min-width: 30em) { #home-intro-text { padding-top: 17px; padding-top: 2.7461538462rem; } } @media (min-width: 30em) { #home-intro-text { padding-bottom: 50px; padding-bottom: 8.0769230769rem; } } @media (min-width: 30em) { #home-intro-text { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } @media (min-width: 30em) { #home-intro-text { margin-bottom: 20px; margin-bottom: 2rem; } } @media (min-width: 45em) { #home-intro-text { padding-top: 24px; padding-top: 2.4rem; padding-bottom: 22px; padding-bottom: 2.2rem; } } #home-intro-text .quote { color: #EAEAEA; } /*awards*/ .awards { /*@include breakpoint(midiLarge){ @include gb(4.5,'-webkit-column-width'); @include gb(4.5,'-moz-column-width'); @include gb(4.5,'-ms-column-width'); @include gb(4.5,'-o-column-width'); @include gb(4.5,'column-width'); margin:0 auto; } @include breakpoint(maxi){ @include gb(6,'-webkit-column-width'); @include gb(6,'-moz-column-width'); @include gb(6,'-ms-column-width'); @include gb(6,'-o-column-width'); @include gb(6,'column-width'); margin:0 auto; }*/ } .awards li { margin-bottom: .5em; } .award { float: left; border-bottom: 1px solid #36DAFF; overflow: hidden; /* fix for Firefox */ break-inside: avoid-column; -webkit-column-break-inside: avoid; margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; padding-bottom: 13px; padding-bottom: 1.3rem; padding-bottom: 4.0238095238vw; } @media (min-width: 30em) { .award { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } @media (max-width: 29.875em) { .award { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .award { padding-bottom: 13px; padding-bottom: 2.1rem; } } @media (min-width: 30em) { .award { margin-right: 20px; width: 460px; margin-bottom: 20px; margin-bottom: 2rem; padding-bottom: 13px; padding-bottom: 1.3rem; } } @media (min-width: 45em) { .award { margin-right: 20px; width: 340px; } } @media (min-width: 60em) { .award { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .award:nth-of-type(2n) { margin-right: 0; } } @media (min-width: 45em) { .award:nth-of-type(2n+1) { clear: both; } } .award h2 { font-size: 21px; font-size: 2.1rem; font-size: 6.5vw; line-height: 1; color: #36DAFF; margin: 0; border: none; text-transform: none; } @media (min-width: 30em) { .award h2 { font-size: 21px; font-size: 3.3923076923rem; } } @media (min-width: 45em) { .award h2 { font-size: 24px; font-size: 2.4rem; } } #main-content .award p { margin-bottom: 7px; margin-bottom: 0.7rem; margin-bottom: 2.1666666667vw; } @media (min-width: 30em) { #main-content .award p { margin-bottom: 7px; margin-bottom: 1.1307692308rem; } } @media (min-width: 45em) { #main-content .award p { margin-bottom: 7px; margin-bottom: 0.7rem; } } .current-projects .post { margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; } @media (max-width: 29.875em) { .current-projects .post { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .current-projects .post { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } @media (min-width: 30em) { .current-projects .post { margin-right: 20px; width: 460px; margin-bottom: 48px; margin-bottom: 4.8rem; } } @media (min-width: 45em) { .current-projects .post { margin-right: 20px; width: 220px; } .current-projects .post:nth-of-type(3n) { margin-right: 0; } .current-projects .post:nth-of-type(3n+1) { clear: both; } } @media (min-width: 60em) { .current-projects .post { margin-right: 20px; width: 300px; } } .current-projects .post .img { width: 100%; height: 190px; height: 19rem; height: 58.8095238095vw; margin-bottom: 19px; margin-bottom: 1.9rem; margin-bottom: 5.880952381vw; } @media (min-width: 30em) { .current-projects .post .img { height: 190px; height: 30.6923076923rem; } } @media (min-width: 30em) { .current-projects .post .img { margin-bottom: 19px; margin-bottom: 3.0692307692rem; } } @media (min-width: 45em) { .current-projects .post .img { height: 191px; height: 19.1rem; margin-bottom: 12px; margin-bottom: 1.2rem; } } @media (min-width: 60em) { .current-projects .post .img { height: 259px; height: 25.9rem; } } .current-projects h2, .current-projects h3 { color: #36DAFF; margin: 0; padding: 0; cursor: pointer; } @media (min-width: 45em) { .current-projects h2, .current-projects h3 { cursor: auto; } } .current-projects h2 { font-size: 21px; font-size: 2.1rem; font-size: 6.5vw; line-height: 1.1428571429; margin-bottom: 4px; margin-bottom: 0.4rem; margin-bottom: 1.2380952381vw; } @media (min-width: 30em) { .current-projects h2 { font-size: 21px; font-size: 3.3923076923rem; } } @media (min-width: 30em) { .current-projects h2 { margin-bottom: 4px; margin-bottom: 0.6461538462rem; } } @media (min-width: 45em) { .current-projects h2 { font-size: 24px; font-size: 2.4rem; line-height: 1.1666666667; margin-bottom: 6px; margin-bottom: 0.6rem; } } .current-projects h3 { border: none; font-size: 16px; font-size: 1.6rem; font-size: 4.9523809524vw; line-height: 1.125; display: block; border-bottom: 1px solid #36DAFF; background: url(../images/plus.png) no-repeat; background-position: bottom 10px right; background-position: bottom 1rem right; background-position: bottom 3.0952380952vw right; background-size: auto 30px; margin-bottom: 10px; margin-bottom: 1rem; margin-bottom: 3.0952380952vw; padding-bottom: 10px; padding-bottom: 1rem; padding-bottom: 3.0952380952vw; padding-right: 10%; } @media (min-width: 30em) { .current-projects h3 { font-size: 16px; font-size: 2.5846153846rem; } } @media (min-width: 30em) { .current-projects h3 { margin-bottom: 10px; margin-bottom: 1.6153846154rem; } } @media (min-width: 30em) { .current-projects h3 { padding-bottom: 10px; padding-bottom: 1.6153846154rem; } } @media (min-width: 30em) { .current-projects h3 { background-position: bottom 10px right; background-position: bottom 1.6153846154rem right; } } @media (min-width: 45em) { .current-projects h3 { padding: 0; margin: 0; background: none; border: none; font-size: 19px; font-size: 1.9rem; line-height: 1.2631578947; margin-bottom: 14px; margin-bottom: 1.4rem; background: none; border: none; } } @media (max-width: 29.875em) { .current-projects .featured-left, .current-projects .featured-right { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .current-projects .featured-left, .current-projects .featured-right { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .current-projects .featured-left, .current-projects .featured-right { margin-right: 20px; width: 340px; } } @media (min-width: 60em) { .current-projects .featured-left, .current-projects .featured-right { margin-right: 20px; width: 460px; } } .current-projects .featured-left h3, .current-projects .featured-right h3 { background: none; border: none; } .current-projects .featured-left .img, .current-projects .featured-left .embed-wrapper { margin-bottom: 20px; margin-bottom: 2rem; margin-bottom: 6.1904761905vw; } @media (min-width: 30em) { .current-projects .featured-left .img, .current-projects .featured-left .embed-wrapper { margin-bottom: 20px; margin-bottom: 3.2307692308rem; } } @media (min-width: 30em) { .current-projects .featured-left .img, .current-projects .featured-left .embed-wrapper { margin-bottom: 20px; margin-bottom: 2rem; } } .current-projects .featured-left.is-right { float: right; margin-right: 0 !important; } .current-projects .featured-right { margin-right: 0; } @media (max-width: 29.875em) { .current-projects .featured-right .img { width: 46.9999999998%; margin-right: 6%; } } @media (min-width: 30em) { .current-projects .featured-right .img { margin-right: 20px; width: 220px; } } @media (min-width: 45em) { .current-projects .featured-right .img { margin-right: 20px; width: 160px; } } @media (min-width: 60em) { .current-projects .featured-right .img { margin-right: 20px; width: 220px; } } .current-projects .featured-right .img:nth-of-type(2) { margin-right: 0; } @media (min-width: 45em) { .embed-wrapper { margin-right: 20px; width: 340px; margin: 0 auto; } } @media (min-width: 60em) { .embed-wrapper { margin-right: 20px; width: 460px; margin: 0 auto; } } .embed-wrapper video { display: block; } @media (max-width: 29.875em) { .embed-wrapper video { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .embed-wrapper video { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .embed-wrapper video { margin-right: 20px; width: 340px; } } @media (min-width: 60em) { .embed-wrapper video { margin-right: 20px; width: 460px; } } .embed-container { position: relative; padding-bottom: 55.5%; height: 0; overflow: hidden; max-width: 100%; } @media (max-width: 29.875em) { .embed-container { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 30em) { .embed-container { margin-right: 20px; width: 460px; } } @media (min-width: 45em) { .embed-container { padding-bottom: 56.3%; margin-right: 20px; width: 340px; } } @media (min-width: 60em) { .embed-container { margin-right: 20px; width: 460px; } } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .people .list-content { border: none; padding: 0; } @media (min-width: 45em) { .people .list-content { border-bottom: 1px solid #36DAFF; } } .person { padding-bottom: 140px; padding-bottom: 14rem; padding-bottom: 43.3333333333vw; } @media (min-width: 30em) { .person { padding-bottom: 140px; padding-bottom: 22.6153846154rem; } } .person:first-of-type { padding-top: 14px; padding-top: 1.4rem; padding-top: 4.3333333333vw; } @media (min-width: 30em) { .person:first-of-type { padding-top: 14px; padding-top: 2.2615384615rem; } } @media (min-width: 45em) { .person { padding-bottom: 14px; padding-bottom: 1.4rem; } .person:first-of-type { padding-top: 14px; padding-top: 1.4rem; } } .person .text { margin-right: 20px; width: 460px; } @media (max-width: 29.875em) { .person .text { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 45em) { .person .text { margin-right: 20px; width: 320px; z-index: 2; } .person .text:nth-of-type(2n-1) { margin-right: 20px; margin-right: 60px; } .person .text:nth-of-type(2n) { margin-right: -80px; } } @media (min-width: 60em) { .person .text { margin-right: 20px; width: 440px; } .person .text:nth-of-type(2n-1) { margin-right: 20px; margin-right: 60px; } .person .text:nth-of-type(2n) { margin-right: -200px; } } .person .img-wrap { margin-right: 20px; width: 460px; } @media (max-width: 29.875em) { .person .img-wrap { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 45em) { .person .img-wrap { margin-right: 20px; width: 460px; } } @media (min-width: 60em) { .person .img-wrap { margin-right: 20px; width: 700px; } } .person h3 { border: none; color: #909090; font-size: 21px; font-size: 2.1rem; font-size: 6.5vw; line-height: 1.380952381; padding-bottom: 10px; padding-bottom: 1rem; padding-bottom: 3.0952380952vw; padding-top: 8px; padding-top: 0.8rem; padding-top: 2.4761904762vw; } @media (min-width: 30em) { .person h3 { font-size: 21px; font-size: 3.3923076923rem; } } @media (min-width: 30em) { .person h3 { padding-bottom: 10px; padding-bottom: 1.6153846154rem; } } @media (min-width: 30em) { .person h3 { padding-top: 8px; padding-top: 1.2923076923rem; } } @media (min-width: 45em) { .person h3 { font-size: 24px; font-size: 2.4rem; line-height: 1.1666666667; padding-bottom: 10px; padding-bottom: 1rem; padding-top: 22px; padding-top: 2.2rem; } } @media (max-width: 29.875em) { .person > div { margin-right: 0 !important; } } @media (min-width: 30em) and (max-width: 44.9375em) { .person > div { margin-right: 0 !important; } } @media (min-width: 45em) { .person-single .img-wrap { float: right; margin-right: 0; top: 14px; margin-bottom: 14px; margin-bottom: 1.4rem; } } @media (min-width: 60em) { .person-single .img-wrap { margin-right: 0; } } @media (min-width: 45em) { .person-single img { width: 460px; height: auto; } } @media (min-width: 60em) { .person-single img { width: 700px; } } .person-group .img-wrap { margin-top: 20px; margin-top: 2rem; margin-top: 6.1904761905vw; } @media (min-width: 30em) { .person-group .img-wrap { margin-top: 20px; margin-top: 3.2307692308rem; } } @media (min-width: 30em) { .person-group .img-wrap { margin-top: 20px; margin-top: 2rem; } } @media (min-width: 45em) { .person-group .img-wrap { clear: both; margin-right: 20px; width: 700px; } } @media (min-width: 60em) { .person-group .img-wrap { margin-right: 20px; width: 940px; } } @media (min-width: 45em) { .single .embed-wrapper { margin-right: 20px; width: 700px; margin: 0 auto; } } @media (min-width: 60em) { .single .embed-wrapper { margin-right: 20px; width: 940px; margin: 0 auto; } } @media (max-width: 29.875em) { .single .embed-wrapper video { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 45em) { .single .embed-wrapper video { margin-right: 20px; width: 700px; } } @media (min-width: 60em) { .single .embed-wrapper video { margin-right: 20px; width: 940px; } } .single .embed-container { position: relative; padding-bottom: 55.5%; height: 0; overflow: hidden; max-width: 100%; } @media (max-width: 29.875em) { .single .embed-container { width: 99.9999999996%; margin-right: 1.5%; } } @media (min-width: 45em) { .single .embed-container { padding-bottom: 56.3%; margin-right: 20px; width: 700px; } } @media (min-width: 60em) { .single .embed-container { margin-right: 20px; width: 940px; } } .single .embed-container iframe, .single .embed-container object, .single .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #jump-to-info { margin-top: 3em; text-decoration: underline; font-weight: 400; font-family: "Roboto", "Apercu", Helvetica, Arial, san-serif; font-size: 21px; font-size: 2.1rem; font-size: 6.5vw; line-height: 1.380952381; } @media (min-width: 30em) { #jump-to-info { font-size: 21px; font-size: 3.3923076923rem; } } @media (min-width: 45em) { #jump-to-info { font-size: 24px; font-size: 2.4rem; line-height: 1.1666666667; } } #jump-to-info:hover { color: #36DAFF; } .award-project { font-size: 18px; font-size: 1.8rem; font-size: 5.5714285714vw; font-weight: 700; } @media (min-width: 30em) { .award-project { font-size: 18px; font-size: 2.9076923077rem; } } @media (min-width: 45em) { .award-project { font-size: 20px; font-size: 2rem; } } /* 7.0 - Hacks and fixes ----------------------------------------------------------------------------- */ .mini-only.inline { display: inline; } .mini-only.inline-block { display: inline-block; } @media (min-width: 30em) { .mini-only { display: none; } } .midi-only { display: none; } @media (min-width: 30em) { .midi-only { display: block; } .midi-only.inline { display: inline; } .midi-only.inline-block { display: inline-block; } } @media (min-width: 45em) { .midi-only { display: none; } } .midi-large-only { display: none; } @media (min-width: 45em) { .midi-large-only { display: block; } .midi-large-only.inline { display: inline; } .midi-large-only.inline-block { display: inline-block; } } @media (min-width: 60em) { .midi-large-only { display: none; } } .maxi-only { display: none; } @media (min-width: 60em) { .maxi-only { display: block; } .maxi-only.inline { display: inline; } .maxi-only.inline-block { display: inline-block; } } .midi-up { display: none; } @media (min-width: 30em) { .midi-up { display: block; } .midi-up.inline { display: inline; } .midi-up.inline-block { display: inline-block; } } .midi-large-up { display: none; } @media (min-width: 45em) { .midi-large-up { display: block; } .midi-large-up.inline { display: inline; } .midi-large-up.inline-block { display: inline-block; } } .midi-large-down { display: block; } .midi-large-down.inline { display: inline; } .midi-large-down.inline-block { display: inline-block; } @media (min-width: 60em) { .midi-large-down { display: none !important; } } .midi-down { display: block; } .midi-down.inline { display: inline; } .midi-down.inline-block { display: inline-block; } @media (min-width: 45em) { .midi-down { display: none !important; } } @media (max-width: 29.875em) { .show-mini { display: block; } .show-mini.inline { display: inline; } .show-mini.inline-block { display: inline-block; } } @media (min-width: 30em) and (max-width: 44.9375em) { .show-midi { display: block; } .show-midi.inline { display: inline; } .show-midi.inline-block { display: inline-block; } } @media (min-width: 45em) and (max-width: 59.9375em) { .show-midi-large { display: block; } .show-midi-large.inline { display: inline; } .show-midi-large.inline-block { display: inline-block; } } @media (min-width: 60em) { .show-maxi { display: block; } .show-maxi.inline { display: inline; } .show-maxi.inline-block { display: inline-block; } } @media (max-width: 29.875em) { .hide-mini { display: none; } } @media (min-width: 30em) and (max-width: 44.9375em) { .hide-midi { display: none; } } @media (min-width: 45em) and (max-width: 59.9375em) { .hide-midi-large { display: none; } } @media (min-width: 60em) { .hide-maxi { display: none; } } /* Updates */ .latest-entry-options { border-top: 1px solid; border-bottom: 1px solid; border-color: #ABABAB; padding: 10px 0; margin: 10px 0; width: 100%; display: table; } .latest-entry-link-more { display: table-cell; vertical-align: middle; width: 10%; text-transform: uppercase; transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out; } .latest-entry-link-more:hover { border-left: 4px solid #36DAFF; padding-left: 1em; transition: 0.15s padding ease-out, 0.15s margin ease-out, 0.15s border ease-out; color: #333; } .latest-entry-date-time, .comment-date-time { font-size: .8em; } .latest-entry-date-time a { color: #555; border-bottom: 1px dotted #909090; } .latest-entry-social-options { display: table-cell; text-align: right; width: 50%; vertical-align: middle; } .social-icon { float: none !important; } .social-icon span { border-radius: 100%; display: inline-block; color: rgba(0, 0, 0, 0.1); line-height: 35px; text-align: center; background-color: rgba(0, 0, 0, 0.1) !important; } .social-icon span:hover { background-color: #36DAFF !important; } .latest-entry-excerpt { font-weight: normal; text-overflow: ellipsis; overflow: hidden; height: 60px; -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; } .latest-news-category { display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 1px solid #36DAFF; background: none; width: auto; min-width: 100px; margin: 6px 0; margin: 0.6rem 0; padding: 0 0.7142857143em; color: #909090; background: #36DAFF; color: white; text-align: center; text-transform: uppercase; height: 2em; line-height: 2em; } .latest-news-panel { height: 100%; background-color: #edede9; padding: 15px; } .latest-news-panel form input[type="text"], .latest-news-panel form input[type="search"], .latest-news-panel form input[type="email"] { width: 100%; height: 35px; border: none; margin: 6px 0; margin: 0.6rem 0; padding: 0 6px; padding: 0 0.6rem; } .latest-news-panel form input[type="submit"], .comment-respond form input[type="submit"] { display: inline-block; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; -o-appearance: none; appearance: none; border: 1px solid #36DAFF; background: none; width: 100%; margin: 6px 0; margin: 0.6rem 0; padding: 0 0.7142857143em; color: #909090; background: #36DAFF; color: white; text-align: center; text-transform: uppercase; line-height: 2em; overflow: visible; white-space: normal; } .latest-news-panel h4 { color: #555; } .latest-news-panel div[role="form"] { margin: 0px; } .latest-news-panel label span { display: none; } .latest-news-category-list { margin: 6px 0; margin: 0.6rem 0; padding-bottom: 10px; } .latest-news-category-list li { margin: 6px 0; margin: 0.6rem 0; list-style: none; } .latest-news-category-list li:before { background-color: #36DAFF; width: 3px; height: 3px; display: inline-block; content: ''; vertical-align: middle; margin-right: 15px; margin-right: 1rem; } .latest-news-category-list li a:hover { color: #36DAFF; } .latest-news-article { height: auto !important; } .latest-news-article h2 a:hover { color: #555; } .latest-news-row { } .post-navigation { display: none; } .comments-area { margin-top: 20px; } .comments-area h3 { margin: 6px 0; margin: 0.6rem 0; } .comment-list { margin: 0 0 20px 0; padding: 0px; list-style: none; background: white; } .comment-list .comment { padding: 15px; border: 1px solid rgba(0, 0, 0, 0.1); } .comment-form-comment { width: 100%; } .comment-form-author, .comment-form-email, .comment-form-url { display: block; float: left; margin-right: 20px; width: 193px; } .comment-form-url { margin-right: 0px; } .comment-respond form label { display: block; } .comment-respond form input { width: 100%; height: 35px; border: none; margin: 6px 0; margin: 0.6rem 0; padding: 0 6px; padding: 0 0.6rem; } .comment-respond form textarea { width: 100%; border: none; margin: 6px 0; margin: 0.6rem 0; padding: 0 6px; padding: 0 0.6rem; } .comment-notes { font-weight: lighter; } .says { display: none; } .comment-avatar { margin-right: 10px; } .comment-avatar, .comment-meta { display: inline-block; vertical-align: top; } .latest-news-category-pills { margin: 6px 0; margin: 0.6rem 0; padding: 6px 0; padding: 0.6rem 0; } .latest-news-category-pills a { display: inline-block; min-width: 100px; width: auto; border-radius: 1em; height: 2em; line-height: 2em; border: 1px solid rgba(0, 0, 0, 0.1); text-align: center; } .latest-news-category-pills a:hover { border-color: #36DAFF; } .latest-news-articles article a { color: #555; } .latest-news-articles article a:hover { color: #36DAFF; } @media (max-width: 59.875em) { .latest-news-articles > div { width: 100%; } .latest-news-article { padding: 0; margin: 0; width: 100% !important; max-height: none; height: auto !important; } .latest-news-thumbnail { background-size: 100%,auto !important; } } @media (max-width: 44.875em) { .latest-news-articles, .latest-news-panel { width: 100%; padding-bottom: 0px; } .latest-news-articles > .element:last-child { padding-bottom: 0px; } .latest-news-article, .img-row { display: block !important; } .latest-news-thumbnail { background-size: 100%,auto !important; } }