html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
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, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
body {
font-family: "din-2014", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
line-height: 1.9;
font-size: 1rem;
color: #241F21;
font-weight: 400;
-webkit-font-smoothing: antialiased;
letter-spacing: 0.3px; }
h1, h2, h3, h4, h5, h6 {
font-family: "poppins", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
font-weight: 500;
line-height: 1.31; }
h1, h2, h3, h4, h5, h6 {
word-wrap: break-word;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
-o-hyphens: none;
hyphens: none; }
h1.underline span, h2.underline span, h3.underline span, h4.underline span, h5.underline span, h6.underline span {
background-position: 0 0.5em;
background-repeat: no-repeat; }
h1.underline.black span, h2.underline.black span, h3.underline.black span, h4.underline.black span, h5.underline.black span, h6.underline.black span {
background-image: linear-gradient(transparent 0%, transparent 50%, #241F21 50%, #241F21 100%); }
h1.underline.orange span, h2.underline.orange span, h3.underline.orange span, h4.underline.orange span, h5.underline.orange span, h6.underline.orange span {
background-image: linear-gradient(transparent 0%, transparent 50%, #f99638 50%, #f99638 100%); }
h1.underline.teal span, h2.underline.teal span, h3.underline.teal span, h4.underline.teal span, h5.underline.teal span, h6.underline.teal span {
background-image: linear-gradient(transparent 0%, transparent 50%, #81fafb 50%, #81fafb 100%); }
h1.underline.pink span, h2.underline.pink span, h3.underline.pink span, h4.underline.pink span, h5.underline.pink span, h6.underline.pink span {
background-image: linear-gradient(transparent 0%, transparent 50%, #F2B9FF 50%, #F2B9FF 100%); }
h1, .h1 {
font-size: 2.5rem;
letter-spacing: 2px;
line-height: 1.1;
margin-bottom: .5em; }
h2, .h2 {
font-size: 1.52rem;
letter-spacing: 1.7px;
line-height: 1.5; }
h3, .h3 {
font-size: 1.1rem;
letter-spacing: 1.6px;
margin-bottom: .5em; }
h4, .h4 {
font-size: 0.9rem; }
h5, .h5 {
font-size: 0.875rem; }
h6 {
font-size: 0.7rem;
letter-spacing: 1.6px;
margin-bottom: 0.5em; }
@media screen and (min-width: 768px) {
h1, .h1 {
font-size: 3.125rem; }
h2, .h2 {
font-size: 1.9rem; }
h3, .h3 {
font-size: 1.375rem; }
h4, .h4 {
font-size: 1.125rem; }
h5, .h5 {
font-size: 1.09375rem; }
h6 {
font-size: 0.875rem; } }
em {
font-style: italic; }
strong, b {
font-weight: 600; }
ul {
list-style-type: disc; }
ul li {
margin-left: 1.5em; }
ul, ol {
margin-bottom: 1em; }
ol {
list-style-position: inside !important;
list-style: decimal; }
.center {
text-align: center; }
a {
text-decoration: none;
color: #81fafb; }
code, pre {
font-family: monospace; }
p {
margin-bottom: 1em; }
hr.short {
width: 30px;
margin: 1.5em 0;
border-bottom: 2px solid; }
hr.short.center {
margin: 1.5em auto; }
img {
max-width: 100%;
height: auto; }
main {
flex-grow: 1;
max-width: 100%; }
@media screen and (max-width: 767px) {
main, footer {
position: relative;
top: 67px; } }
.filters .sideways {
border-bottom: 0;
font-weight: 400;
font-size: .7rem;
position: relative; }
@media screen and (min-width: 1110px) {
.filters .sideways {
transform: rotate(-90deg) translateY(-50%) translateX(-50%);
position: relative;
left: 1.5em;
top: 50%; } }
@media screen and (max-width: 1109px) {
.filters .sideways {
transform: none;
left: 0;
top: 0;
flex-basis: 100%; } }
.filters a:first-of-type {
padding-left: 0; }
@media screen and (max-width: 991px) {
.filters a {
padding-right: 2em; } }
.filters .divide {
margin: 0 1em;
height: 30px;
display: inline-block;
border-right: 2px solid; }
@media screen and (max-width: 991px) {
.filters .divide {
display: none; } }
@keyframes fadeInDown {
0% {
transform: translateX(0);
opacity: 1; }
55% {
opacity: .65; }
100% {
transform: translateX(-120%);
opacity: 0; } }
body.hideanimate #canvasBackground, body.hideanimate #canvasIntro {
animation-name: fadeInDown;
animation-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0.01, 0.165, 0.99); }
footer {
z-index: 9999;
position: relative; }
.nextprev {
line-height: 1;
display: block;
text-align: center; }
.nextprev a {
color: #241F21;
font-family: "calling-code", monospace;
font-size: .65rem;
font-weight: 700; }
.nextprev i {
margin: 0 auto;
width: 20px;
margin-top: 10px; }
.nextprev .next i {
transform: rotate(180deg); }
@media screen and (max-width: 991px) {
.nextprev {
width: 100%;
position: fixed;
bottom: .5em; }
.nextprev i {
background-color: rgba(36, 31, 33, 0.7);
height: 30px;
width: 30px;
margin: 0; }
.nextprev i svg {
transform: translateY(-50%);
top: 50%;
width: 15px;
position: relative; }
.nextprev i svg * {
stroke: white !important; }
.nextprev span {
display: none; } }
nav.sidenav {
z-index: 9999999; }
nav.sidenav .nextprev {
display: none; }
@media screen and (min-width: 768px) {
nav.sidenav .nextprev {
position: absolute;
bottom: 3em;
left: 50%;
transform: translateX(-50%);
line-height: 1;
display: block;
text-align: center; }
nav.sidenav .nextprev a {
color: #241F21;
font-family: "calling-code", monospace;
font-size: .65rem;
font-weight: 700; }
nav.sidenav .nextprev i {
margin: 0 auto;
width: 20px;
margin-top: 10px; }
nav.sidenav .nextprev .next i {
transform: rotate(180deg); }
nav.sidenav .nextprev > div {
padding: 2em 0; } }
@media screen and (min-width: 768px) and (max-height: 700px) {
nav.sidenav .nextprev > div {
padding: .5em 0; }
nav.sidenav .nextprev > div a {
font-size: .6rem; }
nav.sidenav .nextprev > div .proj {
display: none; }
nav.sidenav .nextprev > div i {
width: 15px; } }
@media screen and (min-width: 768px) and (max-height: 700px) {
nav.sidenav .nextprev {
bottom: 1em; } }
@media screen and (min-width: 768px) and (max-height: 530px) {
nav.sidenav .nextprev {
display: none; } }
@media screen and (min-width: 768px) {
nav.sidenav {
z-index: 9;
position: fixed;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
width: 90px;
flex-basis: 90px; }
nav.sidenav ul {
margin: 0;
padding: 0; }
nav.sidenav ul li {
margin: 0;
padding: 0;
list-style-type: none; }
nav.sidenav > ul {
margin: 3em 0;
padding-left: 1em; }
nav.sidenav > ul ul {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
margin-bottom: calc(-100% + 15px);
width: 200px;
transform: translateX(-100%);
position: relative;
line-height: 0;
border-left: 2px solid #F2B9FF;
transition: transform 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), margin-bottom 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transition-delay: .2s; }
nav.sidenav > ul ul li a {
line-height: 2;
padding: 0 .5em 0 0.8em;
display: inline-block; }
nav.sidenav > ul > li:hover ul {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transition: transform 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), margin-bottom 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
margin-bottom: 0;
transform: translateX(0); }
nav.sidenav > ul > li.current-page-ancestor ul, nav.sidenav > ul > li.current-menu-item ul {
transform: translateX(0);
margin-bottom: 0; } }
@media screen and (max-width: 767px) {
nav.sidenav {
padding-top: .75em;
padding-bottom: .75em;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
position: absolute;
width: 100%;
flex-basis: 100%; }
nav.sidenav:after {
background-color: white;
position: absolute;
width: 100%;
top: 0px;
height: calc(43px + 1.5em);
content: ' ';
display: block;
z-index: 2;
left: 0; }
nav.sidenav .block--social {
display: none; }
nav.sidenav .block--logo {
z-index: 3;
flex-basis: calc(100% / 2 - (.5em * 1.618em));
width: calc(100% / 2 - (.5em * 1.618em)); } }
@media screen and (max-width: 767px) and (max-width: 767px) {
nav.sidenav .block--logo {
height: 43px; } }
@media screen and (max-width: 767px) {
nav.sidenav ul {
margin: 0; }
nav.sidenav ul li {
padding: 0;
margin: 0;
list-style-type: none; }
nav.sidenav > ul {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 1;
padding-top: 1em;
background-color: #F2B9FF;
left: 0;
width: 100%;
position: fixed;
bottom: 0;
list-style-type: none;
top: calc(43px + 1.5em);
transform: translateY(-120%);
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
height: calc(100vh - 43px - 1.5em); }
nav.sidenav > ul > li {
margin: 0; }
nav.sidenav > ul > li > a {
font-size: 1.3rem; }
nav.sidenav > ul > li li a {
font-size: .75em;
padding: .2em .5em; } }
@media screen and (min-width: 768px) {
body {
margin-left: 90px; } }
@media screen and (max-width: 767px) {
body.navopen {
width: 100%; }
body.navopen nav.sidenav {
width: 100%; }
body.navopen nav.sidenav > ul {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
transform: translateY(0);
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); } }
header.header h1 {
letter-spacing: 0;
font-size: 1.925rem; }
header.header.bg--black {
color: white; }
@media screen and (min-width: 768px) {
footer {
padding-top: 5em;
padding-bottom: 5em; } }
@media screen and (min-width: 768px) {
footer .block--footer-email-nav {
border-right: 2px solid #918f90; } }
@media screen and (min-width: 768px) {
footer .block--footer-email-nav .piece--email {
border-bottom: 2px solid #918f90;
padding-right: 3em;
padding-bottom: 3em; } }
@media screen and (min-width: 768px) {
footer .block--footer-email-nav .piece--nav {
padding-right: 3em;
padding-top: 3em; } }
footer .block--footer-email-nav i {
display: block;
width: 80%;
max-width: 165px; }
footer .block--footer-email-nav i svg path {
fill: white; }
footer .block--footer-contact {
line-height: 1.5; }
@media screen and (min-width: 768px) {
footer .block--footer-contact {
padding-left: 3em; } }
footer .block--footer-contact i svg path {
fill: #918f90; }
@media screen and (max-width: 767px) {
footer .block--footer-contact .contact--blurb br {
display: none; } }
footer .block--social a {
display: inline-block;
margin: 0 !important;
margin-right: 1em !important; }
@media screen and (max-width: 767px) {
footer nav {
margin-bottom: 2em; } }
footer ul, footer li {
padding: 0;
margin: 0; }
fieldset {
background-color: transparent;
border: 0;
margin: 0;
padding: 0; }
legend {
font-weight: 600;
padding: 0; }
label {
display: block;
font-weight: 600; }
input,
select,
textarea,
[type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='password'], [type='search'], [type='tel'], [type='text'], [type='time'], [type='url'], [type='week'], input:not([type]), textarea, [type="submit"] {
font-size: .9rem;
font-family: "calling-code", monospace;
color: #241F21;
appearance: none;
border: 1px solid #241F21;
border-radius: 0 !important;
box-shadow: none !important;
box-sizing: border-box;
padding: .75em;
transition: color .2s ease-in-out;
letter-spacing: 1px; }
input:focus,
select:focus,
textarea:focus,
[type='color']:focus, [type='date']:focus, [type='datetime']:focus, [type='datetime-local']:focus, [type='email']:focus, [type='month']:focus, [type='number']:focus, [type='password']:focus, [type='search']:focus, [type='tel']:focus, [type='text']:focus, [type='time']:focus, [type='url']:focus, [type='week']:focus, input:not([type]):focus, textarea:focus, [type="submit"]:focus {
transition: color .2s ease-in-out;
box-shadow: 0;
outline: none; }
input::-webkit-input-placeholder,
select::-webkit-input-placeholder,
textarea::-webkit-input-placeholder,
[type='color']::-webkit-input-placeholder, [type='date']::-webkit-input-placeholder, [type='datetime']::-webkit-input-placeholder, [type='datetime-local']::-webkit-input-placeholder, [type='email']::-webkit-input-placeholder, [type='month']::-webkit-input-placeholder, [type='number']::-webkit-input-placeholder, [type='password']::-webkit-input-placeholder, [type='search']::-webkit-input-placeholder, [type='tel']::-webkit-input-placeholder, [type='text']::-webkit-input-placeholder, [type='time']::-webkit-input-placeholder, [type='url']::-webkit-input-placeholder, [type='week']::-webkit-input-placeholder, input:not([type])::-webkit-input-placeholder, textarea::-webkit-input-placeholder, [type="submit"]::-webkit-input-placeholder {
transition: color .2s ease-in-out;
color: #241F21; }
input:-moz-placeholder,
select:-moz-placeholder,
textarea:-moz-placeholder,
[type='color']:-moz-placeholder, [type='date']:-moz-placeholder, [type='datetime']:-moz-placeholder, [type='datetime-local']:-moz-placeholder, [type='email']:-moz-placeholder, [type='month']:-moz-placeholder, [type='number']:-moz-placeholder, [type='password']:-moz-placeholder, [type='search']:-moz-placeholder, [type='tel']:-moz-placeholder, [type='text']:-moz-placeholder, [type='time']:-moz-placeholder, [type='url']:-moz-placeholder, [type='week']:-moz-placeholder, input:not([type]):-moz-placeholder, textarea:-moz-placeholder, [type="submit"]:-moz-placeholder {
transition: color .2s ease-in-out;
/* Firefox 18- */
color: #241F21; }
input::-moz-placeholder,
select::-moz-placeholder,
textarea::-moz-placeholder,
[type='color']::-moz-placeholder, [type='date']::-moz-placeholder, [type='datetime']::-moz-placeholder, [type='datetime-local']::-moz-placeholder, [type='email']::-moz-placeholder, [type='month']::-moz-placeholder, [type='number']::-moz-placeholder, [type='password']::-moz-placeholder, [type='search']::-moz-placeholder, [type='tel']::-moz-placeholder, [type='text']::-moz-placeholder, [type='time']::-moz-placeholder, [type='url']::-moz-placeholder, [type='week']::-moz-placeholder, input:not([type])::-moz-placeholder, textarea::-moz-placeholder, [type="submit"]::-moz-placeholder {
transition: color .2s ease-in-out;
/* Firefox 19+ */
color: #241F21; }
input:-ms-input-placeholder,
select:-ms-input-placeholder,
textarea:-ms-input-placeholder,
[type='color']:-ms-input-placeholder, [type='date']:-ms-input-placeholder, [type='datetime']:-ms-input-placeholder, [type='datetime-local']:-ms-input-placeholder, [type='email']:-ms-input-placeholder, [type='month']:-ms-input-placeholder, [type='number']:-ms-input-placeholder, [type='password']:-ms-input-placeholder, [type='search']:-ms-input-placeholder, [type='tel']:-ms-input-placeholder, [type='text']:-ms-input-placeholder, [type='time']:-ms-input-placeholder, [type='url']:-ms-input-placeholder, [type='week']:-ms-input-placeholder, input:not([type]):-ms-input-placeholder, textarea:-ms-input-placeholder, [type="submit"]:-ms-input-placeholder {
transition: color .2s ease-in-out;
color: #241F21; }
input:-webkit-autofill,
select:-webkit-autofill,
textarea:-webkit-autofill,
[type='color']:-webkit-autofill, [type='date']:-webkit-autofill, [type='datetime']:-webkit-autofill, [type='datetime-local']:-webkit-autofill, [type='email']:-webkit-autofill, [type='month']:-webkit-autofill, [type='number']:-webkit-autofill, [type='password']:-webkit-autofill, [type='search']:-webkit-autofill, [type='tel']:-webkit-autofill, [type='text']:-webkit-autofill, [type='time']:-webkit-autofill, [type='url']:-webkit-autofill, [type='week']:-webkit-autofill, input:not([type]):-webkit-autofill, textarea:-webkit-autofill, [type="submit"]:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px white inset;
background: transparent; }
textarea {
resize: vertical; }
[type="checkbox"],
[type="radio"] {
display: inline; }
[type="file"] {
width: 100%; }
select {
width: 100%; }
.screenreader, .gform_wrapper label, .screen-reader-text {
position: absolute;
left: -10000px;
top: auto;
height: 1px;
width: 1px;
overflow: hidden; }
.wpcf7-form-control-wrap {
width: 100%;
margin-bottom: 1em;
display: block; }
.wpcf7-form-control-wrap input,
.wpcf7-form-control-wrap select,
.wpcf7-form-control-wrap textarea,
.wpcf7-form-control-wrap [type='color'], .wpcf7-form-control-wrap [type='date'], .wpcf7-form-control-wrap [type='datetime'], .wpcf7-form-control-wrap [type='datetime-local'], .wpcf7-form-control-wrap [type='email'], .wpcf7-form-control-wrap [type='month'], .wpcf7-form-control-wrap [type='number'], .wpcf7-form-control-wrap [type='password'], .wpcf7-form-control-wrap [type='search'], .wpcf7-form-control-wrap [type='tel'], .wpcf7-form-control-wrap [type='text'], .wpcf7-form-control-wrap [type='time'], .wpcf7-form-control-wrap [type='url'], .wpcf7-form-control-wrap [type='week'], .wpcf7-form-control-wrap input:not([type]), .wpcf7-form-control-wrap textarea {
width: 100%; }
span.wpcf7-not-valid-tip {
color: white;
background-color: #F2B9FF;
border-left: 1px solid #241F21;
border-right: 1px solid #241F21;
border-bottom: 1px solid #241F21;
font-size: 1rem;
font-weight: normal;
padding: 5px 15px;
display: block; }
div.wpcf7-validation-errors {
background-color: #F2B9FF;
color: white;
border: none;
padding: 5px 15px; }
.required + span {
position: relative; }
.required + span:after {
content: '*';
display: block;
height: 10px;
width: 10px;
position: absolute;
top: 0;
right: 8px;
color: red; }
div.wpcf7-mail-sent-ok {
background: #81fafb;
border: 0;
padding: 15px;
margin: 0;
color: white; }
button, [type="submit"] {
background-color: #81fafb;
color: #241F21;
font-size: .8rem;
font-weight: bold;
padding: .75em 1.5em;
text-transform: uppercase; }
.mc-field-group {
display: flex;
flex-wrap: wrap; }
footer .mc-field-group .email {
flex-grow: 1; }
.gform_wrapper ul, .gform_wrapper li {
list-style-type: none;
padding: 0;
margin: 0; }
.gform_wrapper .gform_fields, .gform_wrapper .ginput_container_name {
display: flex;
flex-wrap: wrap;
justify-content: space-between; }
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper [type='color'], .gform_wrapper [type='date'], .gform_wrapper [type='datetime'], .gform_wrapper [type='datetime-local'], .gform_wrapper [type='email'], .gform_wrapper [type='month'], .gform_wrapper [type='number'], .gform_wrapper [type='password'], .gform_wrapper [type='search'], .gform_wrapper [type='tel'], .gform_wrapper [type='text'], .gform_wrapper [type='time'], .gform_wrapper [type='url'], .gform_wrapper [type='week'], .gform_wrapper input:not([type]), .gform_wrapper textarea {
margin-bottom: 1em; }
.gform_wrapper [type="submit"] {
width: auto;
flex-basis: unset; }
[type="submit"] {
appearance: none;
-webkit-appearance: none; }
@keyframes fadeOut {
0% {
opacity: 1; }
100% {
opacity: 0; } }
@keyframes smallLogo {
0% {
stroke-dashoffset: 1000; }
100% {
stroke-dashoffset: 825; } }
.animate--logo .st0 {
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation-duration: 0.75s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.animate--logo line {
animation-delay: 0.4125s !important; }
.animate--logo .st2 {
animation-duration: 0.375s;
animation-delay: 0s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.animate--logo .st2:first-of-type {
animation-delay: 0.1875s !important; }
.block--logo.go .st0 {
animation-name: smallLogo; }
.block--logo.go .st2 {
animation-name: fadeOut; }
#canvasIntro, #canvasBackground {
position: absolute;
min-height: 100%;
min-width: 100%;
z-index: 999999;
top: -5em;
left: 0;
right: 0;
bottom: -5em; }
#canvasIntro path, #canvasBackground path {
transition: fill 0.1 cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.bg--orange {
background-color: #f99638; }
.bg--teal {
background-color: #81fafb; }
.bg--pink {
background-color: #F2B9FF; }
.bg--black {
background-color: #241F21; }
.bg--white {
background-color: white; }
.bg--gray {
background-color: #e2e3e4; }
.bg--gray-dark {
background-color: #242020; }
.bg--gray-lightest {
background-color: #eaeaea; }
.bg--white a,
.bg--gray-lightest a {
color: #d529a8; }
.block--header-title {
position: absolute;
top: 50%;
left: 100%;
transform: translateY(-50%) translateX(-50%); }
@media screen and (max-width: 767px) {
.block--header-title {
padding: 1em;
transform: translateY(-50%) translateX(-45%); } }
.block--header-title h1 {
margin-bottom: 0; }
@media screen and (max-width: 767px) {
.block--header-title h1 {
font-size: 1.9rem; } }
.block--home-header-image img {
min-height: 50vw;
width: 100%; }
@media screen and (min-width: 768px) {
.block--home-header-image img {
min-height: calc((100vh - 90px) * 0.75);
width: 100%; }
.block--home-header-image img.loaded {
min-height: auto; } }
@media screen and (max-width: 767px) {
.block--home-header-image {
height: 70vw;
background-size: cover;
background-repeat: no-repeat;
background-position: center; } }
.block--logo {
position: relative; }
@media screen and (min-width: 768px) {
.block--logo {
left: 10px;
top: 10px;
margin-bottom: 10px; } }
.block--logo .animate--logo {
width: 110px;
transform-origin: 0 0;
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
@media screen and (max-width: 767px) {
.block--logo .animate--logo {
width: 70px;
height: 40px; } }
.block--logo.go {
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.menu--trigger {
width: 25px;
height: 25px;
position: relative;
z-index: 99999999;
display: block;
-webkit-tap-highlight-color: transparent !important; }
.menu--trigger span {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: opacity, color;
height: 1px;
width: 100%;
border-bottom: 2px solid;
top: 50%;
position: relative;
transform: translateY(-50%);
display: block;
opacity: 1;
color: #241F21;
transition: opacity 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99), color 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.menu--trigger:after, .menu--trigger:before {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform, color;
display: block;
position: absolute;
width: 100%;
height: 1px;
content: ' ';
transform-origin: center;
transform: translateY(0) rotate(0);
color: #241F21;
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99), color 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.menu--trigger:before {
border-top: 2px solid;
top: 0; }
.menu--trigger:after {
border-bottom: 2px solid;
bottom: 0; }
body.navopen {
position: fixed;
overflow: hidden;
top: 0; }
body.navopen .menu--trigger {
background-color: transparent; }
body.navopen .menu--trigger:after, body.navopen .menu--trigger:before {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform,color;
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99), color 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
body.navopen .menu--trigger:before {
transform: translateY(11.5px) rotate(45deg); }
body.navopen .menu--trigger:after {
transform: rotate(45deg);
transform: translateY(-11.5px) rotate(-45deg); }
body.navopen .menu--trigger span {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: opacity;
transition: opacity 0.15s cubic-bezier(0.4, 0.01, 0.165, 0.99);
opacity: 0; }
body.navopen nav {
width: 100%;
position: fixed; }
@media screen and (max-width: 991px) {
.block--project-meta {
text-align: left !important; } }
.block--project-meta p {
margin-bottom: 0; }
.block--project-meta h4 {
display: inline;
font-size: .925rem;
top: -3px;
position: relative; }
.block--project-meta .piece--meta {
top: -3px;
position: relative; }
.block--project-meta .block--meta {
margin-bottom: 1em; }
.block--social a {
width: 16px;
height: 16px;
margin: 0 auto;
display: block; }
.block--social a.facebook {
width: 10px;
height: 20px;
margin: 10px auto; }
.block--social a i {
width: 16px;
height: 16px;
display: block; }
.block--social a i.icon-social--facebook {
width: 10px;
height: 20px; }
.block--social a i svg {
display: block;
width: 100%; }
.block--work {
height: calc((100vw - 90px) * .45);
margin-bottom: 4em;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative; }
@media screen and (min-width: 640px) {
.block--work {
height: calc((100vw - 90px) * .4);
height: calc((100vw - 90px) * 0.35); } }
@media screen and (min-width: 992px) {
.block--work {
margin-bottom: 5em; } }
@media screen and (min-width: 1110px) {
.block--work {
height: calc((100vw - 90px) * 0.23); } }
@media screen and (min-width: 1200px) {
.block--work {
margin-bottom: 4em; } }
@media screen and (min-width: 768px) {
.block--work {
align-items: flex-end; } }
.block--work:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50%;
width: 100%;
content: ' ';
background-image: linear-gradient(transparent 0%, rgba(36, 31, 33, 0.98) 100%);
mix-blend-mode: multiply; }
.block--work h2 {
transition: all 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
position: relative;
padding: 0em 0.4em 0.2em 0em;
z-index: 9;
margin: 0 1.1em 1em 0;
border-right: 2px solid;
border-bottom: 2px solid;
text-transform: lowercase;
font-size: 1.5rem;
max-width: calc(100% - 2.2em); }
@media screen and (min-width: 768px) {
.block--work h2 {
text-align: right; } }
@media screen and (max-width: 767px) {
.block--work h2 {
font-size: 1.25rem;
margin: 0;
border: 0;
text-shadow: 0 0 4px rgba(36, 31, 33, 0.6);
padding: 0 0.75em .75em .75em;
max-width: calc(100% - 1.5em); } }
@media screen and (max-width: 639px) {
.block--work h2 {
font-size: 0.9rem;
letter-spacing: 0;
line-height: 1.2; } }
@media screen and (min-width: 1200px) {
.block--work.hovered:hover .block--work-meta {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
will-change: transform, opacity;
opacity: 1;
transform: translateY(75%) translateX(0.809em);
transition: transform 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); } }
@media screen and (min-width: 768px) {
.block--work.hovered h2 {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border-bottom: 0;
transition: border-right-color 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99), padding 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.block--work.hovered h2:after {
content: ' ';
background-color: white;
height: 2px;
width: calc(100% + 2px);
position: absolute;
display: block;
bottom: 0; }
.block--work.hovered:hover h2 {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
border-right-color: transparent;
padding-right: 0;
transition: border-right-color 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99), padding 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); } }
.block--work .block--work-meta {
position: absolute;
z-index: -1;
bottom: 0;
right: 0;
line-height: 1;
transform: translateY(75%);
padding: 1.5em 0.75em 0.5em; }
@media screen and (min-width: 768px) {
.block--work .block--work-meta {
padding: 1.5em 1.25em 1em 1.25em; } }
@media screen and (min-width: 992px) {
.block--work .block--work-meta {
padding: 2em 1.25em 1em; } }
@media screen and (min-width: 1200px) {
.block--work .block--work-meta {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
opacity: 0;
will-change: transform, opacity;
transform: translateY(0%) translateX(0%);
transition: transform 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99), opacity 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99); } }
@media screen and (max-width: 1199px) {
.block--work .block--work-meta {
width: 100%;
left: 0; } }
@media screen and (max-width: 639px) {
.block--work .block--work-meta .piece--cat {
font-size: .75rem; } }
@media screen and (min-width: 768px) {
.block--work .block--work-meta .piece--cat {
font-weight: bold; } }
.block--work .block--work-meta .piece--loc {
letter-spacing: .5px; }
@media screen and (max-width: 639px) {
.block--work .block--work-meta .piece--loc {
font-size: .5rem; } }
@media screen and (max-width: 767px) {
.block--work .block--work-meta {
min-height: 64px; } }
.block--work.nolink h2 {
border-right: 0;
border-bottom: 0; }
@media screen and (min-width: 1110px) {
.block--work:last-of-type:nth-of-type(7) {
margin-right: auto; }
.block--work:last-of-type:nth-of-type(5), .block--work:last-of-type:nth-of-type(8) {
margin-right: auto;
margin-left: 3em; } }
.block--featured-work {
height: calc((100vw - 90px));
margin-bottom: 1.2em;
justify-content: flex-end;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
position: relative; }
@media screen and (min-width: 768px) {
.block--featured-work {
height: calc((100vw - 90px) * 0.4); } }
@media screen and (min-width: 834px) {
.block--featured-work {
height: calc((100vw - 90px) * 0.3); } }
@media screen and (min-width: 992px) {
.block--featured-work {
margin-bottom: 3em; } }
.block--featured-work:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 80%;
width: 100%;
content: ' ';
background-image: linear-gradient(transparent 0%, rgba(36, 31, 33, 0.98) 100%);
mix-blend-mode: multiply; }
@media screen and (min-width: 768px) {
.block--featured-work:after {
height: 65%; } }
.block--featured-work .button {
margin: 1.3em 1.1em 1em 0;
transition: background-color 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
flex-shrink: 0; }
.block--featured-work .button:hover {
background-color: #F2B9FF; }
.block--featured-work .featured-work--title {
max-width: calc(100% - 5em); }
.block--featured-work h3 {
font-size: 0.7rem;
text-transform: uppercase;
color: white;
margin-bottom: 1.2em; }
@media screen and (min-width: 768px) {
.block--featured-work h3 {
font-size: 1.1em; } }
.block--featured-work h2 {
transition: all 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
position: relative;
text-transform: lowercase;
font-size: 1.4rem;
line-height: 1.1; }
@media screen and (min-width: 480px) {
.block--featured-work h2 {
font-size: 2rem;
max-width: calc(100% - 30px); } }
@media screen and (min-width: 768px) {
.block--featured-work h2 {
font-size: 3rem;
max-width: 500px; } }
@media screen and (min-width: 1640px) {
.block--featured-work h2 {
font-size: 5rem;
max-width: 700px; } }
.block--featured-work.nolink h2 {
border-right: 0;
border-bottom: 0; }
.block--featured-work .featured-work--inner {
width: 100%;
max-width: calc(100% - 2.8em);
padding: 1.5em 0;
margin: 0 auto;
z-index: 9; }
@media screen and (min-width: 768px) {
.block--featured-work .featured-work--inner {
max-width: calc(100% - 5em);
display: flex;
justify-content: space-between;
align-items: flex-end; } }
.button, .gform_button {
text-transform: uppercase;
font-family: "calling-code", monospace;
background: #e2e3e4;
color: #241F21;
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 1px;
padding: 0.5em 1em; }
.button.center, .gform_button.center {
display: table; }
.button.border, .gform_button.border {
border: 1px solid; }
.color--orange {
color: #f99638; }
.color--teal {
color: #81fafb; }
.color--pink {
color: #F2B9FF; }
.color--black {
color: #241F21; }
.color--white {
color: white; }
.color--gray {
color: #e2e3e4; }
.color--gray-dark {
color: #242020; }
.color--gray-faded {
color: #918f90; }
.color--gray-light {
color: #d3d2d3; }
@media screen and (min-width: 768px) {
.dsk--hide {
display: none !important; } }
@media screen and (max-width: 767px) {
.mobile--hide {
display: none !important; } }
@media screen and (min-width: 992px) {
.large--hide {
display: none !important; } }
@media screen and (max-width: 991px) {
.medium--hide {
display: none !important; } }
.margin--center {
margin: 0 auto;
display: block; }
.center {
margin: 0 auto; }
.modal--center {
transform: translateY(100%) translateX(-50%);
position: absolute;
width: 60vw;
margin: 0 auto;
left: 50%;
top: 50%;
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99); }
.modal--center.open {
transition: transform 0.3s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform: translateY(-50%) translateX(-50%); }
.relative {
position: relative; }
.border-box {
box-sizing: border-box; }
.flex, .single-team main {
display: flex; }
@media screen and (min-width: 768px) {
.dsk--flex {
display: flex; } }
.flex--wrap, .single-team main {
flex-wrap: wrap; }
.flex--column {
flex-direction: column; }
.justify--between, .single-team main {
justify-content: space-between; }
.justify--around {
justify-content: space-around; }
.justify--end {
justify-content: flex-end; }
.justify--center {
justify-content: center; }
.align--items-start {
align-items: flex-start; }
.align--items-end {
align-items: flex-end; }
.align--items-center {
align-items: center; }
.align--items-baseline {
align-items: baseline; }
.max-wrap {
max-width: 1250px;
box-sizing: content-box; }
.margin--center {
margin: 0 auto; }
.block {
display: block; }
.inline-block {
display: inline-block; }
.content-box {
box-sizing: content-box; }
.vertical--center {
position: relative;
top: 50%;
transform: translateY(-50%); }
@media screen and (max-width: 767px) {
.hidden--mob {
display: none !important; } }
@media screen and (max-width: 991px) {
.hidden--md {
display: none !important; } }
@media screen and (max-width: 1199px) {
.hidden--lg {
display: none !important; } }
@media screen and (min-width: 768px) {
.hidden--dsk {
display: none !important; } }
@media screen and (min-width: 768px) {
.order--1 {
order: 1; }
.order--2 {
order: 2; } }
.font--medium {
font-size: 1.15rem; }
@media screen and (min-width: 992px) {
.font--medium-dsk {
font-size: 1.15rem; } }
.font--large {
font-size: 1.4rem; }
@media screen and (min-width: 992px) {
.font--large {
font-size: 1.7rem; } }
p.font--large {
margin-bottom: 1.5em; }
.font--sans {
font-family: "din-2014", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
.font--larger {
font-size: 2.5em; }
.font--small {
font-size: .85em; }
.font--tiny {
font-size: .65em; }
.font--mono {
font-family: "calling-code", monospace; }
.font--din {
font-family: "din-2014", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif; }
.font--thin {
font-weight: 100 !important; }
.font--semi-bold {
font-weight: 500 !important; }
.font--standard {
font-weight: 400 !important; }
.font--bold {
font-weight: 600 !important; }
.font--italic {
font-style: italic; }
.font--normal {
font-style: normal !important; }
.text--center {
text-align: center !important; }
.text--right {
text-align: right; }
.text--uppercase {
text-transform: uppercase !important; }
.text--lowercase {
text-transform: lowercase !important; }
.text--capitalize {
text-transform: capitalize !important; }
.decoration--no {
text-decoration: none !important; }
.line--1 {
line-height: 1; }
.letter--1 {
letter-spacing: 1px; }
.letter--2 {
letter-spacing: 2px; }
.letter--3 {
letter-spacing: 3px; }
hr {
border: 0;
border-bottom: 1px solid; }
hr.inline {
width: 160px; }
@media screen and (min-width: 992px) {
.column--2 {
column-gap: 3em;
column-count: 2; } }
@media screen and (min-width: 992px) {
.dsk--center {
text-align: center; } }
.grid--one, .gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper [type='color'], .gform_wrapper [type='date'], .gform_wrapper [type='datetime'], .gform_wrapper [type='datetime-local'], .gform_wrapper [type='email'], .gform_wrapper [type='month'], .gform_wrapper [type='number'], .gform_wrapper [type='password'], .gform_wrapper [type='search'], .gform_wrapper [type='tel'], .gform_wrapper [type='text'], .gform_wrapper [type='time'], .gform_wrapper [type='url'], .gform_wrapper [type='week'], .gform_wrapper input:not([type]) {
flex-basis: 100%;
width: 100%; }
.grid--four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 1));
width: calc(100% / 1.25 - (.2em * 1)); }
.grid--four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.grid--three-fourths {
flex-basis: calc(75% - (.25em * 1));
width: calc(75% - (.25em * 1)); }
.grid--three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.grid--two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 1));
width: calc(100% / 1.5 - (.3333333em * 1)); }
.grid--two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.grid--half, .gform_wrapper .gform_fields span, .gform_wrapper .ginput_container_name span {
flex-basis: calc(100% / 2 - (.5em * 1));
width: calc(100% / 2 - (.5em * 1)); }
.grid--half.nog, .gform_wrapper .gform_fields span.nog, .gform_wrapper .ginput_container_name span.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.grid--two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 1));
width: calc(100% / 2.5 - (.6em * 1)); }
.grid--two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.grid--three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 1));
width: calc(100% / 1.666666 - (.4em * 1)); }
.grid--three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.grid--third {
flex-basis: calc(100% / 3 - (.6666666em * 1));
width: calc(100% / 3 - (.6666666em * 1)); }
.grid--third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.grid--fourth {
flex-basis: calc(100% / 4 - (.75em * 1));
width: calc(100% / 4 - (.75em * 1)); }
.grid--fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.grid--fifth {
flex-basis: calc(100% / 5 - (.8em * 1));
width: calc(100% / 5 - (.8em * 1)); }
.grid--fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.grid--sixth {
flex-basis: calc(100% / 6 - (.85em * 1));
width: calc(100% / 6 - (.85em * 1)); }
.grid--sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.grid--ninth {
flex-basis: calc(100% / 9 - (.55em * 1));
width: calc(100% / 9 - (.55em * 1)); }
.grid--ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.grid--tenth {
flex-basis: calc(100% / 10 - (.55em * 1));
width: calc(100% / 10 - (.55em * 1)); }
.grid--tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); }
@media screen and (min-width: 480px) {
.grid--xs-one {
flex-basis: 100%;
width: 100%; }
.grid--xs-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 1));
width: calc(100% / 1.25 - (.2em * 1)); }
.grid--xs-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.grid--xs-three-fourths {
flex-basis: calc(75% - (.25em * 1));
width: calc(75% - (.25em * 1)); }
.grid--xs-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.grid--xs-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 1));
width: calc(100% / 1.5 - (.3333333em * 1)); }
.grid--xs-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.grid--xs-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 1));
width: calc(100% / 1.666666 - (.4em * 1)); }
.grid--xs-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.grid--xs-half {
flex-basis: calc(100% / 2 - (.5em * 1));
width: calc(100% / 2 - (.5em * 1)); }
.grid--xs-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.grid--xs-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 1));
width: calc(100% / 2.5 - (.6em * 1)); }
.grid--xs-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.grid--xs-third {
flex-basis: calc(100% / 3 - (.6666666em * 1));
width: calc(100% / 3 - (.6666666em * 1)); }
.grid--xs-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.grid--xs-fourth {
flex-basis: calc(100% / 4 - (.75em * 1));
width: calc(100% / 4 - (.75em * 1)); }
.grid--xs-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.grid--xs-fifth {
flex-basis: calc(100% / 5 - (.8em * 1));
width: calc(100% / 5 - (.8em * 1)); }
.grid--xs-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.grid--xs-sixth {
flex-basis: calc(100% / 6 - (.85em * 1));
width: calc(100% / 6 - (.85em * 1)); }
.grid--xs-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.grid--xs-ninth {
flex-basis: calc(100% / 9 - (.55em * 1));
width: calc(100% / 9 - (.55em * 1)); }
.grid--xs-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.grid--xs-tenth {
flex-basis: calc(100% / 10 - (.55em * 1));
width: calc(100% / 10 - (.55em * 1)); }
.grid--xs-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 768px) {
.grid--sm-one {
flex-basis: 100%;
width: 100%; }
.grid--sm-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 1));
width: calc(100% / 1.25 - (.2em * 1)); }
.grid--sm-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.grid--sm-three-fourths {
flex-basis: calc(75% - (.25em * 1));
width: calc(75% - (.25em * 1)); }
.grid--sm-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.grid--sm-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 1));
width: calc(100% / 1.5 - (.3333333em * 1)); }
.grid--sm-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.grid--sm-half {
flex-basis: calc(100% / 2 - (.5em * 1));
width: calc(100% / 2 - (.5em * 1)); }
.grid--sm-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.grid--sm-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 1));
width: calc(100% / 1.666666 - (.4em * 1)); }
.grid--sm-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.grid--sm-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 1));
width: calc(100% / 2.5 - (.6em * 1)); }
.grid--sm-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.grid--sm-third {
flex-basis: calc(100% / 3 - (.6666666em * 1));
width: calc(100% / 3 - (.6666666em * 1)); }
.grid--sm-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.grid--sm-fourth {
flex-basis: calc(100% / 4 - (.75em * 1));
width: calc(100% / 4 - (.75em * 1)); }
.grid--sm-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.grid--sm-fifth {
flex-basis: calc(100% / 5 - (.8em * 1));
width: calc(100% / 5 - (.8em * 1)); }
.grid--sm-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.grid--sm-sixth {
flex-basis: calc(100% / 6 - (.85em * 1));
width: calc(100% / 6 - (.85em * 1)); }
.grid--sm-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.grid--sm-seventh {
flex-basis: calc(100% / 7 - (.8em * 1));
width: calc(100% / 7- (.8em * 1)); }
.grid--sm-seventh.nog {
flex-basis: calc(100% / 7);
width: calc(100% / 7); }
.grid--sm-ninth {
flex-basis: calc(100% / 9 - (.55em * 1));
width: calc(100% / 9 - (.55em * 1)); }
.grid--sm-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.grid--sm-tenth {
flex-basis: calc(100% / 10 - (.55em * 1));
width: calc(100% / 10 - (.55em * 1)); }
.grid--sm-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 992px) {
.grid--md-one {
flex-basis: 100%;
width: 100%; }
.grid--md-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 1));
width: calc(100% / 1.25 - (.2em * 1)); }
.grid--md-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.grid--md-three-fourths {
flex-basis: calc(75% - (.25em * 1));
width: calc(75% - (.25em * 1)); }
.grid--md-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.grid--md-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 1));
width: calc(100% / 1.5 - (.3333333em * 1)); }
.grid--md-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.grid--md-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 1));
width: calc(100% / 1.666666 - (.4em * 1)); }
.grid--md-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.grid--md-half {
flex-basis: calc(100% / 2 - (.5em * 1));
width: calc(100% / 2 - (.5em * 1)); }
.grid--md-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.grid--md-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 1));
width: calc(100% / 2.5 - (.6em * 1)); }
.grid--md-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.grid--md-third {
flex-basis: calc(100% / 3 - (.6666666em * 1));
width: calc(100% / 3 - (.6666666em * 1)); }
.grid--md-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.grid--md-fourth {
flex-basis: calc(100% / 4 - (.75em * 1));
width: calc(100% / 4 - (.75em * 1)); }
.grid--md-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.grid--md-fifth {
flex-basis: calc(100% / 5 - (.8em * 1));
width: calc(100% / 5 - (.8em * 1)); }
.grid--md-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.grid--md-sixth {
flex-basis: calc(100% / 6 - (.85em * 1));
width: calc(100% / 6 - (.85em * 1)); }
.grid--md-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.grid--md-ninth {
flex-basis: calc(100% / 9 - (.55em * 1));
width: calc(100% / 9 - (.55em * 1)); }
.grid--md-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.grid--md-tenth {
flex-basis: calc(100% / 10 - (.55em * 1));
width: calc(100% / 10 - (.55em * 1)); }
.grid--md-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 1110px) {
.grid--mdl-one {
flex-basis: 100%;
width: 100%; }
.grid--mdl-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 1));
width: calc(100% / 1.25 - (.2em * 1)); }
.grid--mdl-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.grid--mdl-three-fourths {
flex-basis: calc(75% - (.25em * 1));
width: calc(75% - (.25em * 1)); }
.grid--mdl-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.grid--mdl-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 1));
width: calc(100% / 1.5 - (.3333333em * 1)); }
.grid--mdl-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.grid--mdl-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 1));
width: calc(100% / 1.666666 - (.4em * 1)); }
.grid--mdl-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.grid--mdl-half {
flex-basis: calc(100% / 2 - (.5em * 1));
width: calc(100% / 2 - (.5em * 1)); }
.grid--mdl-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.grid--mdl-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 1));
width: calc(100% / 2.5 - (.6em * 1)); }
.grid--mdl-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.grid--mdl-third {
flex-basis: calc(100% / 3 - (.6666666em * 1));
width: calc(100% / 3 - (.6666666em * 1)); }
.grid--mdl-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.grid--mdl-fourth {
flex-basis: calc(100% / 4 - (.75em * 1));
width: calc(100% / 4 - (.75em * 1)); }
.grid--mdl-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.grid--mdl-fifth {
flex-basis: calc(100% / 5 - (.8em * 1));
width: calc(100% / 5 - (.8em * 1)); }
.grid--mdl-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.grid--mdl-sixth {
flex-basis: calc(100% / 6 - (.85em * 1));
width: calc(100% / 6 - (.85em * 1)); }
.grid--mdl-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.grid--mdl-ninth {
flex-basis: calc(100% / 9 - (.55em * 1));
width: calc(100% / 9 - (.55em * 1)); }
.grid--mdl-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.grid--mdl-tenth {
flex-basis: calc(100% / 10 - (.55em * 1));
width: calc(100% / 10 - (.55em * 1)); }
.grid--mdl-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 1200px) {
.grid--lg-one {
flex-basis: 100%;
width: 100%; }
.grid--lg-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 1));
width: calc(100% / 1.25 - (.2em * 1)); }
.grid--lg-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.grid--lg-three-fourths {
flex-basis: calc(75% - (.25em * 1));
width: calc(75% - (.25em * 1)); }
.grid--lg-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.grid--lg-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 1));
width: calc(100% / 1.5 - (.3333333em * 1)); }
.grid--lg-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.grid--lg-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 1));
width: calc(100% / 1.666666 - (.4em * 1)); }
.grid--lg-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.grid--lg-half {
flex-basis: calc(100% / 2 - (.5em * 1));
width: calc(100% / 2 - (.5em * 1)); }
.grid--lg-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.grid--lg-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 1));
width: calc(100% / 2.5 - (.6em * 1)); }
.grid--lg-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.grid--lg-third {
flex-basis: calc(100% / 3 - (.6666666em * 1));
width: calc(100% / 3 - (.6666666em * 1)); }
.grid--lg-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.grid--lg-fourth {
flex-basis: calc(100% / 4 - (.75em * 1));
width: calc(100% / 4 - (.75em * 1)); }
.grid--lg-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.grid--lg-fifth {
flex-basis: calc(100% / 5 - (.8em * 1));
width: calc(100% / 5 - (.8em * 1)); }
.grid--lg-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.grid--lg-sixth {
flex-basis: calc(100% / 6 - (.85em * 1));
width: calc(100% / 6 - (.85em * 1)); }
.grid--lg-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.grid--lg-ninth {
flex-basis: calc(100% / 9 - (.55em * 1));
width: calc(100% / 9 - (.55em * 1)); }
.grid--lg-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); } }
@media screen and (min-width: 834px) {
.flex--double .grid--smd-one {
flex-basis: 100%;
width: 100%; }
.flex--double .grid--smd-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 3));
width: calc(100% / 1.25 - (.2em * 3)); }
.flex--double .grid--smd-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.flex--double .grid--smd-three-fourths {
flex-basis: calc(75% - (.25em * 3));
width: calc(75% - (.25em * 3)); }
.flex--double .grid--smd-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.flex--double .grid--smd-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 3));
width: calc(100% / 1.5 - (.3333333em * 3)); }
.flex--double .grid--smd-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.flex--double .grid--smd-half {
flex-basis: calc(100% / 2 - (.5em * 3));
width: calc(100% / 2 - (.5em * 3)); }
.flex--double .grid--smd-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.flex--double .grid--smd-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 3));
width: calc(100% / 1.666666 - (.4em * 3)); }
.flex--double .grid--smd-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.flex--double .grid--smd-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 3));
width: calc(100% / 2.5 - (.6em * 3)); }
.flex--double .grid--smd-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.flex--double .grid--smd-third {
flex-basis: calc(100% / 3 - (.6666666em * 3));
width: calc(100% / 3 - (.6666666em * 3)); }
.flex--double .grid--smd-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.flex--double .grid--smd-fourth {
flex-basis: calc(100% / 4 - (.75em * 3));
width: calc(100% / 4 - (.75em * 3)); }
.flex--double .grid--smd-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.flex--double .grid--smd-fifth {
flex-basis: calc(100% / 5 - (.8em * 3));
width: calc(100% / 5 - (.8em * 3)); }
.flex--double .grid--smd-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.flex--double .grid--smd-sixth {
flex-basis: calc(100% / 6 - (.85em * 3));
width: calc(100% / 6 - (.85em * 3)); }
.flex--double .grid--smd-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.flex--double .grid--smd-seventh {
flex-basis: calc(100% / 7 - (.875em * 3));
width: calc(100% / 7 - (.875em * 3)); }
.flex--double .grid--smd-seventh.nog {
flex-basis: calc(100% / 7);
width: calc(100% / 7); }
.flex--double .grid--smd-eighth {
flex-basis: calc(100% / 8 - (.875em * 3));
width: calc(100% / 8 - (.875em * 3)); }
.flex--double .grid--smd-eighth.nog {
flex-basis: calc(100% / 8);
width: calc(100% / 8); }
.flex--double .grid--smd-ninth {
flex-basis: calc(100% / 9 - (.55em * 3));
width: calc(100% / 9 - (.55em * 3)); }
.flex--double .grid--smd-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.flex--double .grid--smd-tenth {
flex-basis: calc(100% / 10 - (.55em * 3));
width: calc(100% / 10 - (.55em * 3)); }
.flex--double .grid--smd-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 992px) {
.flex--double .grid--md-one {
flex-basis: 100%;
width: 100%; }
.flex--double .grid--md-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 3));
width: calc(100% / 1.25 - (.2em * 3)); }
.flex--double .grid--md-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.flex--double .grid--md-three-fourths {
flex-basis: calc(75% - (.25em * 3));
width: calc(75% - (.25em * 3)); }
.flex--double .grid--md-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.flex--double .grid--md-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 3));
width: calc(100% / 1.5 - (.3333333em * 3)); }
.flex--double .grid--md-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.flex--double .grid--md-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 3));
width: calc(100% / 1.666666 - (.4em * 3)); }
.flex--double .grid--md-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.flex--double .grid--md-half {
flex-basis: calc(100% / 2 - (.5em * 3));
width: calc(100% / 2 - (.5em * 3)); }
.flex--double .grid--md-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.flex--double .grid--md-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 3));
width: calc(100% / 2.5 - (.6em * 3)); }
.flex--double .grid--md-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.flex--double .grid--md-third {
flex-basis: calc(100% / 3 - (.6666666em * 3));
width: calc(100% / 3 - (.6666666em * 3)); }
.flex--double .grid--md-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.flex--double .grid--md-fourth {
flex-basis: calc(100% / 4 - (.75em * 3));
width: calc(100% / 4 - (.75em * 3)); }
.flex--double .grid--md-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.flex--double .grid--md-fifth {
flex-basis: calc(100% / 5 - (.8em * 3));
width: calc(100% / 5 - (.8em * 3)); }
.flex--double .grid--md-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.flex--double .grid--md-sixth {
flex-basis: calc(100% / 6 - (.85em * 3));
width: calc(100% / 6 - (.85em * 3)); }
.flex--double .grid--md-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.flex--double .grid--md-seventh {
flex-basis: calc(100% / 7 - (.875em * 3));
width: calc(100% / 7 - (.875em * 3)); }
.flex--double .grid--md-seventh.nog {
flex-basis: calc(100% / 7);
width: calc(100% / 7); }
.flex--double .grid--md-eighth {
flex-basis: calc(100% / 8 - (.875em * 3));
width: calc(100% / 8 - (.875em * 3)); }
.flex--double .grid--md-eighth.nog {
flex-basis: calc(100% / 8);
width: calc(100% / 8); }
.flex--double .grid--md-ninth {
flex-basis: calc(100% / 9 - (.55em * 3));
width: calc(100% / 9 - (.55em * 3)); }
.flex--double .grid--md-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.flex--double .grid--md-tenth {
flex-basis: calc(100% / 10 - (.55em * 3));
width: calc(100% / 10 - (.55em * 3)); }
.flex--double .grid--md-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 1110px) {
.flex--double .grid--mdl-one {
flex-basis: 100%;
width: 100%; }
.flex--double .grid--mdl-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 3));
width: calc(100% / 1.25 - (.2em * 3)); }
.flex--double .grid--mdl-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.flex--double .grid--mdl-three-fourths {
flex-basis: calc(75% - (.25em * 3));
width: calc(75% - (.25em * 3)); }
.flex--double .grid--mdl-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.flex--double .grid--mdl-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 3));
width: calc(100% / 1.5 - (.3333333em * 3)); }
.flex--double .grid--mdl-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.flex--double .grid--mdl-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 3));
width: calc(100% / 1.666666 - (.4em * 3)); }
.flex--double .grid--mdl-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.flex--double .grid--mdl-half {
flex-basis: calc(100% / 2 - (.5em * 3));
width: calc(100% / 2 - (.5em * 3)); }
.flex--double .grid--mdl-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.flex--double .grid--mdl-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 3));
width: calc(100% / 2.5 - (.6em * 3)); }
.flex--double .grid--mdl-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.flex--double .grid--mdl-third {
flex-basis: calc(100% / 3 - (.6666666em * 3));
width: calc(100% / 3 - (.6666666em * 3)); }
.flex--double .grid--mdl-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.flex--double .grid--mdl-fourth {
flex-basis: calc(100% / 4 - (.75em * 3));
width: calc(100% / 4 - (.75em * 3)); }
.flex--double .grid--mdl-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.flex--double .grid--mdl-fifth {
flex-basis: calc(100% / 5 - (.8em * 3));
width: calc(100% / 5 - (.8em * 3)); }
.flex--double .grid--mdl-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.flex--double .grid--mdl-sixth {
flex-basis: calc(100% / 6 - (.85em * 3));
width: calc(100% / 6 - (.85em * 3)); }
.flex--double .grid--mdl-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.flex--double .grid--mdl-ninth {
flex-basis: calc(100% / 9 - (.55em * 3));
width: calc(100% / 9 - (.55em * 3)); }
.flex--double .grid--mdl-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); }
.flex--double .grid--mdl-tenth {
flex-basis: calc(100% / 10 - (.55em * 3));
width: calc(100% / 10 - (.55em * 3)); }
.flex--double .grid--mdl-tenth.nog {
flex-basis: calc(100% / 10);
width: calc(100% / 10); } }
@media screen and (min-width: 1200px) {
.flex--double .grid--lg-one {
flex-basis: 100%;
width: 100%; }
.flex--double .grid--lg-four-fifths {
flex-basis: calc(100% / 1.25 - (.2em * 3));
width: calc(100% / 1.25 - (.2em * 3)); }
.flex--double .grid--lg-four-fifths.nog {
flex-basis: calc(100% / 1.25);
width: calc(100% / 1.25); }
.flex--double .grid--lg-three-fourths {
flex-basis: calc(75% - (.25em * 3));
width: calc(75% - (.25em * 3)); }
.flex--double .grid--lg-three-fourths.nog {
flex-basis: 75%;
width: 75%; }
.flex--double .grid--lg-two-thirds {
flex-basis: calc(100% / 1.5 - (.3333333em * 3));
width: calc(100% / 1.5 - (.3333333em * 3)); }
.flex--double .grid--lg-two-thirds.nog {
flex-basis: calc(100% / 1.5);
width: calc(100% / 1.5); }
.flex--double .grid--lg-three-fifths {
flex-basis: calc(100% / 1.666666 - (.4em * 3));
width: calc(100% / 1.666666 - (.4em * 3)); }
.flex--double .grid--lg-three-fifths.nog {
flex-basis: calc(100% / 1.666666);
width: calc(100% / 1.666666); }
.flex--double .grid--lg-half {
flex-basis: calc(100% / 2 - (.5em * 3));
width: calc(100% / 2 - (.5em * 3)); }
.flex--double .grid--lg-half.nog {
flex-basis: calc(100% / 2);
width: calc(100% / 2); }
.flex--double .grid--lg-two-fifths {
flex-basis: calc(100% / 2.5 - (.6em * 3));
width: calc(100% / 2.5 - (.6em * 3)); }
.flex--double .grid--lg-two-fifths.nog {
flex-basis: calc(100% / 2.5);
width: calc(100% / 2.5); }
.flex--double .grid--lg-third {
flex-basis: calc(100% / 3 - (.6666666em * 3));
width: calc(100% / 3 - (.6666666em * 3)); }
.flex--double .grid--lg-third.nog {
flex-basis: calc(100% / 3);
width: calc(100% / 3); }
.flex--double .grid--lg-fourth {
flex-basis: calc(100% / 4 - (.75em * 3));
width: calc(100% / 4 - (.75em * 3)); }
.flex--double .grid--lg-fourth.nog {
flex-basis: calc(100% / 4);
width: calc(100% / 4); }
.flex--double .grid--lg-fifth {
flex-basis: calc(100% / 5 - (.8em * 3));
width: calc(100% / 5 - (.8em * 3)); }
.flex--double .grid--lg-fifth.nog {
flex-basis: calc(100% / 5);
width: calc(100% / 5); }
.flex--double .grid--lg-sixth {
flex-basis: calc(100% / 6 - (.85em * 3));
width: calc(100% / 6 - (.85em * 3)); }
.flex--double .grid--lg-sixth.nog {
flex-basis: calc(100% / 6);
width: calc(100% / 6); }
.flex--double .grid--lg-seventh {
flex-basis: calc(100% / 7 - (.875em * 3));
width: calc(100% / 7 - (.875em * 3)); }
.flex--double .grid--lg-seventh.nog {
flex-basis: calc(100% / 7);
width: calc(100% / 7); }
.flex--double .grid--lg-eighth {
flex-basis: calc(100% / 8 - (.875em * 3));
width: calc(100% / 8 - (.875em * 3)); }
.flex--double .grid--lg-eighth.nog {
flex-basis: calc(100% / 8);
width: calc(100% / 8); }
.flex--double .grid--lg-ninth {
flex-basis: calc(100% / 9 - (.55em * 3));
width: calc(100% / 9 - (.55em * 3)); }
.flex--double .grid--lg-ninth.nog {
flex-basis: calc(100% / 9);
width: calc(100% / 9); } }
.icon-arrow {
width: 25px;
height: auto;
display: block; }
.icon-arrow svg {
width: 100%; }
.icon-arrow.left {
transform: rotateY(-180deg); }
a .icon-arrow svg path {
stroke: #241F21; }
a .icon-arrow.diag {
display: inline-block;
height: 20px;
width: 20px; }
a .icon-arrow.diag svg {
transform: rotate(-45deg); }
a .icon-arrow.diag svg path {
stroke: #F2B9FF; }
span .icon-arrow svg path {
stroke: #d3d2d3; }
.margin--vert-1 {
margin-top: 1em;
margin-bottom: 1em; }
.margin--vert-2 {
margin-top: 2em;
margin-bottom: 2em; }
.margin--vert-3 {
margin-top: 3em;
margin-bottom: 3em; }
.margin--vert-4 {
margin-top: 4em;
margin-bottom: 4em; }
.margin--vert-5 {
margin-top: 5em;
margin-bottom: 5em; }
.margin--vert-6 {
margin-top: 6em;
margin-bottom: 6em; }
@media screen and (min-width: 768px) {
.margin--dsk-vert-1 {
margin-top: 1em;
margin-bottom: 1em; }
.margin--dsk-vert-2 {
margin-top: 2em;
margin-bottom: 2em; }
.margin--dsk-vert-3 {
margin-top: 3em;
margin-bottom: 3em; }
.margin--dsk-vert-4 {
margin-top: 4em;
margin-bottom: 4em; }
.margin--dsk-vert-5 {
margin-top: 5em;
margin-bottom: 5em; }
.margin--dsk-vert-6 {
margin-top: 6em;
margin-bottom: 6em; } }
.margin--horiz-1 {
margin-left: 1em;
margin-right: 1em; }
.margin--horiz-2 {
margin-left: 2em;
margin-right: 2em; }
.margin--horiz-3 {
margin-left: 3em;
margin-right: 3em; }
.margin--horiz-4 {
margin-left: 4em;
margin-right: 4em; }
.margin--horiz-5 {
margin-left: 5em;
margin-right: 5em; }
.margin--horiz-6 {
margin-left: 6em;
margin-right: 6em; }
@media screen and (min-width: 768px) {
.margin--dsk-horiz-1 {
margin-left: 1em;
margin-right: 1em; }
.margin--dsk-horiz-2 {
margin-left: 2em;
margin-right: 2em; }
.margin--dsk-horiz-3 {
margin-left: 3em;
margin-right: 3em; }
.margin--dsk-horiz-4 {
margin-left: 4em;
margin-right: 4em; }
.margin--dsk-horiz-5 {
margin-left: 5em;
margin-right: 5em; }
.margin--dsk-horiz-6 {
margin-left: 6em;
margin-right: 6em; } }
@media screen and (max-width: 767px) {
.margin--mob-bot-1 {
margin-bottom: 1em; } }
@media screen and (max-width: 767px) {
.margin--mob-bot-2 {
margin-bottom: 2em; } }
@media screen and (max-width: 767px) {
.margin--mob-bot-3 {
margin-bottom: 3em; } }
@media screen and (max-width: 767px) {
.margin--mob-bot-4 {
margin-bottom: 4em; } }
.margin--bot-1 {
margin-bottom: 1em; }
.margin--bot-2 {
margin-bottom: 2em; }
.margin--bot-3 {
margin-bottom: 3em; }
.margin--bot-4 {
margin-bottom: 4em; }
@media screen and (max-width: 991px) {
.margin--md-top-4 {
margin-top: 4em; } }
@media screen and (min-width: 768px) {
.section--about-recognition .block--recognition {
border-right: 1px solid #e2e3e4; }
.section--about-recognition .block--recognition:last-of-type {
border: 0 !important; } }
@media screen and (max-width: 767px) {
.section--about-recognition .block--recognition {
border-bottom: 1px solid #e2e3e4;
padding-bottom: 1em; }
.section--about-recognition .block--recognition:last-of-type {
border: 0 !important; } }
.page-id-172 .block--recognition {
border-bottom: 1px solid rgba(36, 31, 33, 0.3); }
.section--about-services i {
display: block;
height: 70px;
width: 70px;
margin: 0 auto; }
.section--about-services i svg {
position: relative;
top: 50%;
transform: translateY(-50%); }
@media screen and (min-width: 992px) {
.section--about-services .block--service:nth-of-type(1), .section--about-services .block--service:nth-of-type(2) {
position: relative; }
.section--about-services .block--service:nth-of-type(1):after, .section--about-services .block--service:nth-of-type(2):after {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border-right: 1px solid #e2e3e4;
content: ' ';
height: 40px;
width: 1px;
display: block; } }
@media screen and (max-width: 991px) {
.section--about-services .block--service h3 {
font-size: 1.5rem; } }
@media screen and (max-width: 991px) {
.aboutimage {
min-height: 50vw;
background-size: cover;
background-repeat: no-repeat;
background-position: center; } }
@media screen and (min-width: 992px) {
.aboutimage {
display: none; } }
.section--about-team .lazy {
background-repeat: no-repeat;
background-position: center;
background-size: cover; }
@media screen and (max-width: 1199px) {
.section--about-team .lazy {
min-height: 75vw; } }
@media screen and (max-width: 991px) {
.section--about-team .lazy {
min-height: 50vw; } }
@media screen and (min-width: 992px) {
.section--home-projects {
padding-right: 1vw; } }
@media screen and (min-width: 1200px) {
.section--home-projects {
padding-right: 5vw; } }
.section--archive-pagination .page-number {
line-height: 1.6;
margin: 0 .5em;
padding: 0 .2em;
border-bottom: 4px solid transparent; }
.section--archive-pagination .page-number.current {
border-bottom: 4px solid #F2B9FF; }
.section--archive-pagination .arrow.previous {
padding-right: 2em; }
.section--archive-pagination .arrow.next {
padding-left: 2em; }
.section--services .block--service .lazy, .section--approach .block--service .lazy {
background-size: cover;
min-height: 170px; }
@media screen and (min-width: 480px) {
.section--services .block--service .lazy, .section--approach .block--service .lazy {
min-height: 200px; } }
@media screen and (min-width: 992px) {
.section--services .block--service .lazy, .section--approach .block--service .lazy {
height: calc(50vw - 90px - 12em); } }
@media screen and (max-width: 767px) {
.section--services .block--service .lazy, .section--approach .block--service .lazy {
margin-bottom: 1em; } }
@media screen and (min-width: 992px) {
.section--services .block--service:nth-of-type(even) .lazy, .section--approach .block--service:nth-of-type(even) .lazy {
order: 2; } }
.section--team .block--work {
min-height: calc((100vw - 90px) * 0.3);
margin-bottom: 3em !important; }
.section--team .block--work h2 {
border: 0 !important; }
.section--team .block--work h2:after {
display: none !important; }
.section--team .block--work h2 .border {
border-bottom: 2px solid;
width: 100%;
margin: 0.2em 0 0.3em 0; }
.section--team .block--work h2 .piece--position {
font-size: .9rem;
letter-spacing: 0; }
.section--team .block--work:after {
background-image: linear-gradient(transparent 0%, transparent 20%, rgba(36, 31, 33, 0.3) 100%); }
@media screen and (max-width: 991px) {
.section--team .block--work {
margin-bottom: 4em !important; } }
@media screen and (max-width: 991px) {
.section--team {
padding-bottom: 3em; } }
.single-team main {
align-items: flex-start; }
@media screen and (min-width: 992px) {
.single-team main header {
margin-bottom: 3em; } }
@media screen and (min-width: 992px) {
.single-team main aside {
border-left: 1px solid rgba(36, 31, 33, 0.3); } }
@media screen and (max-width: 991px) {
.single-team main .block--single-team-content {
padding-top: 2em; } }
.single-team .headshot {
border-radius: 100%;
shape-outside: circle();
position: relative;
left: -3em;
margin-top: -1em;
width: 180px; }
@media screen and (min-width: 992px) {
.single-team .headshot {
width: 210px; } }
.single-team .block--meta {
border-bottom: 1px solid rgba(36, 31, 33, 0.3);
padding: 2em 0em; }
.single-team .block--meta h4 {
font-size: .925rem;
top: -3px;
position: relative; }
.single-team .block--meta .piece--meta {
margin: 1em auto;
line-height: 1.4; }
.single-team .block--meta .piece--meta:last-of-type {
margin-bottom: 0 !important; }
@media screen and (min-width: 992px) {
.single-team .block--meta {
padding: 3em 3em 3em 3em;
margin-right: 3em; } }
@media screen and (min-width: 768px) {
.single-team .block--meta:first-of-type {
padding-top: 0 !important; } }
@media screen and (max-width: 991px) {
.single-team .block--meta:last-of-type {
border-bottom: 0; } }
@media screen and (min-width: 992px) {
.post-type-team {
padding-right: 3em; } }
.post-type-work .column--2 {
column-gap: 3em;
position: relative;
margin: 2em 0 4em 0; }
@media screen and (min-width: 992px) {
.post-type-work .column--2.images {
column-gap: 0.5em;
column-count: 2; } }
.post-type-work .featured-image {
max-width: 1280px; }
.sideways {
display: table;
font-size: .9rem;
letter-spacing: 0;
border-bottom: 2px solid #f99638;
font-family: "calling-code", monospace;
font-weight: bold;
margin-bottom: 1em;
transition: all 0.2s cubic-bezier(0.4, 0.01, 0.165, 0.99);
transform-origin: top left; }
@media screen and (min-width: 992px) {
.sideways {
display: inline-block;
position: absolute;
transform: rotate(-90deg) translateY(-100%) translateX(-100%);
left: -1.5em;
top: .75em; } }
@media screen and (min-width: 992px) {
.short .sideways {
position: relative;
transform: none;
left: 0;
display: table;
margin-bottom: -1em;
top: -2em; } }
@media screen and (min-width: 992px) {
.short {
margin-top: 2em; } }
.spacing--vert-half {
padding-top: 0.5em;
padding-bottom: 0.5em; }
.spacing--vert-1 {
padding-top: 1em;
padding-bottom: 1em; }
.spacing--vert-2 {
padding-top: 2em;
padding-bottom: 2em; }
.spacing--vert-3 {
padding-top: 3em;
padding-bottom: 3em; }
.spacing--vert-4 {
padding-top: 4em;
padding-bottom: 4em; }
.spacing--vert-5 {
padding-top: 5em;
padding-bottom: 5em; }
.spacing--vert-6 {
padding-top: 6em;
padding-bottom: 6em; }
@media screen and (min-width: 768px) {
.spacing--dsk-vert-1 {
padding-top: 1em;
padding-bottom: 1em; }
.spacing--dsk-vert-2 {
padding-top: 2em;
padding-bottom: 2em; }
.spacing--dsk-vert-3 {
padding-top: 3em;
padding-bottom: 3em; }
.spacing--dsk-vert-4 {
padding-top: 4em;
padding-bottom: 4em; }
.spacing--dsk-vert-5 {
padding-top: 5em;
padding-bottom: 5em; }
.spacing--dsk-vert-6 {
padding-top: 6em;
padding-bottom: 6em; } }
.spacing--horiz-1 {
padding-left: 1em;
padding-right: 1em; }
.spacing--horiz-2 {
padding-left: 2em;
padding-right: 2em; }
.spacing--horiz-3 {
padding-left: 3em;
padding-right: 3em; }
.spacing--horiz-4 {
padding-left: 4em;
padding-right: 4em; }
.spacing--horiz-5 {
padding-left: 5em;
padding-right: 5em; }
.spacing--horiz-6 {
padding-left: 6em;
padding-right: 6em; }
@media screen and (min-width: 768px) {
.spacing--dsk-horiz-1 {
padding-left: 1em;
padding-right: 1em; }
.spacing--dsk-horiz-2 {
padding-left: 2em;
padding-right: 2em; }
.spacing--dsk-horiz-3 {
padding-left: 3em;
padding-right: 3em; }
.spacing--dsk-horiz-4 {
padding-left: 4em;
padding-right: 4em; }
.spacing--dsk-horiz-5 {
padding-left: 5em;
padding-right: 5em; }
.spacing--dsk-horiz-6 {
padding-left: 6em;
padding-right: 6em; } }
.spacing--gutter {
padding-right: 1.5em;
padding-left: 1.5em; }
@media screen and (min-width: 768px) {
.spacing--gutter {
padding-right: 3em;
padding-left: 3em; } }
@media screen and (max-width: 767px) {
.spacing--mob-bot-1 {
padding-bottom: 1em; } }
@media screen and (max-width: 767px) {
.spacing--mob-bot-2 {
padding-bottom: 2em; } }
@media screen and (max-width: 767px) {
.spacing--mob-bot-3 {
padding-bottom: 3em; } }
@media screen and (max-width: 767px) {
.spacing--mob-bot-4 {
padding-bottom: 4em; } }
.spacing--bot-1 {
padding-bottom: 1em; }
.spacing--bot-2 {
padding-bottom: 2em; }
.spacing--bot-3 {
padding-bottom: 3em; }
.spacing--bot-4 {
padding-bottom: 4em; }
@media screen and (min-width: 768px) {
.spacing--gutter-dsk {
padding-right: 3em;
padding-left: 3em; } }
@media screen and (max-width: 767px) {
.spacing--gutter-mob {
padding-right: 1.5em;
padding-left: 1.5em; } }
@media screen and (min-width: 768px) {
.spacing--dsk-vert-0 {
padding-top: 0;
padding-bottom: 0; } }
.block--media-queries {
display: none;
z-index: 9999999;
font-size: .9rem;
position: fixed;
bottom: 1em;
left: 1em;
background-color: black;
color: white;
padding: .5em;
font-family: "calling-code", monospace; }
.block--media-queries.show {
display: block; }
.block--media-queries:after {
content: 'displaying smallest';
font-weight: 900; }
@media screen and (min-width: 480px) {
.block--media-queries:after {
content: 'displaying screen-xs';
font-weight: 900; } }
@media screen and (min-width: 640px) {
.block--media-queries:after {
content: 'displaying screen-xsm';
font-weight: 100; } }
@media screen and (min-width: 768px) {
.block--media-queries:after {
content: 'displaying screen-sm';
font-weight: 900; } }
@media screen and (min-width: 834px) {
.block--media-queries:after {
content: 'displaying screen-smd';
font-weight: 100; } }
@media screen and (min-width: 992px) {
.block--media-queries:after {
content: 'displaying screen-md';
font-weight: 900; } }
@media screen and (min-width: 1110px) {
.block--media-queries:after {
content: 'displaying screen-mdl';
font-weight: 100; } }
@media screen and (min-width: 1200px) {
.block--media-queries:after {
content: 'displaying screen-lg';
font-weight: 900; } }
@media screen and (min-width: 1640px) {
.block--media-queries:after {
content: 'displaying screen-xl';
font-weight: 100; } }