.is-hidden {
    position: absolute;
    height: 1px;
    width: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0 0 0 0);
    opacity: 0
}

.clear:after,
.clear:before,
.container:after,
.container:before {
    content: '';
    display: table
}

.clear:after,
.container:after {
    clear: both
}

.clear,
.container {
    *zoom: 1
}

.button,
body,
html {
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}


/*! normalize.css v3.0.0 | MIT License | git.io/normalize */

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block
}

audio,
canvas,
progress,
video {
    display: inline-block;
    vertical-align: baseline
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

a {
    background: 0 0
}

a:active,
a:hover {
    outline: 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

hr {
    box-sizing: content-box;
    height: 0
}

pre {
    overflow: auto
}

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
html input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    height: auto
}

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

article,
aside,
blockquote,
body,
dd,
div,
dl,
dt,
fieldset,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
label,
legend,
li,
menu,
nav,
ol,
p,
pre,
section,
td,
th,
ul {
    margin: 0;
    padding: 0;
    border: 0
}

html {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    font-size: 100%
}

*,
:after,
:before {
    box-sizing: inherit
}

body,
html {
    font-family: Lato, Helvetica Neue, Helvetica, Verdana, Roboto, sans-serif;
    line-height: 1.5;
    background-color: #FFF;
    color: #000;
    height: 100%
}

body {
    font-size: 100%
}

@-ms-viewport {
    width: device-width
}

@viewport {
    width: device-width
}

a,
button,
input {
    -ms-touch-action: none!important
}

.container {
    width: 100%;
    max-width: 1344px;
    padding: 0 32px;
    margin: 0 auto
}

img {
    height: auto;
    max-width: 100%;
    vertical-align: middle
}

::-moz-selection {
    background: #000;
    text-shadow: none;
    color: #FFF
}

::selection {
    background: #000;
    text-shadow: none;
    color: #FFF
}

h2,
h3,
h4,
h5,
h6,
ul {
    margin: 0 0 1em
}

h2:last-of-type:last-child,
h3:last-of-type:last-child,
h4:last-of-type:last-child,
h5:last-of-type:last-child,
h6:last-of-type:last-child,
ul:last-of-type:last-child {
    margin-bottom: 0
}

h1 {
    margin: 0 0 1em
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.3
}

p {
    padding: 0 0 1rem
}

p:last-child {
    padding-bottom: 0
}

.report,
.report--error,
.report--info,
.report--success,
.report--warning {
    color: #333;
    border: 1px solid transparent;
    padding: 10px 20px;
    padding: .625rem 1.25rem;
    margin: 0 0 24px;
    margin: 0rem 0rem 1.5rem
}

.report--error:last-of-type:last-child,
.report--error>:last-child,
.report--info:last-of-type:last-child,
.report--info>:last-child,
.report--success:last-of-type:last-child,
.report--success>:last-child,
.report--warning:last-of-type:last-child,
.report--warning>:last-child,
.report:last-of-type:last-child,
.report>:last-child {
    margin-bottom: 0
}

.report--error>:first-child,
.report--info>:first-child,
.report--success>:first-child,
.report--warning>:first-child,
.report>:first-child {
    margin-top: 0
}

ol.report,
ol.report--error,
ol.report--info,
ol.report--success,
ol.report--warning,
ul.report,
ul.report--error,
ul.report--info,
ul.report--success,
ul.report--warning {
    padding-left: 35px;
    padding-left: 2.1875rem
}

.report--success {
    background: #DEF1DD;
    border-color: #A2D69A
}

.report--success a,
.report--success a:active,
.report--success a:hover,
.report--success a:visited {
    color: #41563e
}

.report--error {
    background: #FADCD7;
    border-color: #F39B88
}

.report--error a,
.report--error a:active,
.report--error a:hover,
.report--error a:visited {
    color: #613e36
}

.report--warning {
    background: #FCF5D6;
    border-color: #F7E287
}

.report--warning a,
.report--warning a:active,
.report--warning a:hover,
.report--warning a:visited {
    color: #635a36
}

.report--info {
    background: #DAE5F0;
    border-color: #90B1D2
}

.report--info a,
.report--info a:active,
.report--info a:hover,
.report--info a:visited {
    color: #3a4754
}

.button {
    display: inline-block;
    border: none;
    background: 0 0;
    outline: 0;
    font-family: Montserrat, sans-serif;
    text-decoration: none;
    line-height: 1;
    text-transform: uppercase;
    font-size: .75rem;
    letter-spacing: 4.8px;
    position: relative;
    padding-bottom: .75rem
}

.button:after {
    content: '';
    display: block;
    height: .125rem;
    width: 60%;
    position: absolute;
    left: 0;
    bottom: 0;
    transition: width .2s
}

.button:disabled {
    opacity: .5
}

.button:focus,
.button:hover {
    text-decoration: none
}

.button:focus:after,
.button:hover:after {
    width: 100%
}

.button--white {
    color: #FFF
}

.button--white:after {
    background-color: #FFF
}

.button--rounded {
    color: #000;
    border: 1px solid #000;
    padding: 1rem 3.5rem .875rem;
    border-radius: 1.4375rem;
    transition: color .15s, background-color .15s;
    text-align: center
}

.button--rounded:hover {
    background-color: #000;
    color: #FFF
}

div[role=tablist] {
    text-align: center;
    border-bottom: 1px solid #f2bd04;
    margin-bottom: 1.5rem
}

.tabs__tab-trigger {
    display: inline-block;
    padding: 1rem 1.5rem;
    margin-bottom: -1px;
    background-color: #e6b304;
    border: 1px solid #f2bd04;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: .875rem;
    letter-spacing: .02em
}

.tabs__tab-trigger:not(:last-child) {
    margin-right: .5rem
}

.tabs__tab-trigger:focus,
.tabs__tab-trigger:hover,
.tabs__tab-trigger[aria-selected=true] {
    background-color: #FFC704;
    text-decoration: none;
    border-bottom-color: #FFC704
}

.tabs__tab {
    outline: 0
}

.tabs__tab[aria-hidden=true] {
    display: none
}

.col {
    float: left;
    margin-right: 5%
}

.col:last-child {
    margin-right: 0
}

.col-1 {
    width: 8.333333%
}

.col-2 {
    width: 16.666666%
}

.col-3 {
    width: 21.25%
}

.col-4 {
    width: 30%
}

.col-4:nth-child(3n+3) {
    margin-right: 0
}

.col-4.full {
    width: 33.3333334%;
    margin-right: 0
}

.col-5 {
    width: 41.666666%
}

.col-6 {
    width: 47.5%
}

.col-6:nth-child(even) {
    margin-right: 0
}

.col-6.full {
    width: 50%;
    margin-right: 0
}

.col-7 {
    width: 58.333333%
}

.col-8 {
    width: 63.3333334%
}

.col-9 {
    width: 71.25%
}

.col-10 {
    width: 83.33333%
}

.col-11 {
    width: 91.66666%
}

.col-12 {
    width: 100%
}

h1 {
    font-size: 4.5rem;
    text-transform: uppercase;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    line-height: 3.5rem;
    letter-spacing: -.09em;
    margin-bottom: 3.125rem;
    position: relative
}

h1.line:before {
    content: '';
    display: block;
    width: 4rem;
    height: .25rem;
    background-color: #000;
    margin: 3.125rem 0
}

h1+.fact--wrapper {
    margin-top: -2.5rem
}

.mirror {
    -webkit-transform: scaleX(-1) translateX(-5px);
    transform: scaleX(-1) translateX(-5px);
    display: inline-block
}

h2 {
    font-size: 1.5rem;
    font-family: Montserrat, sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 1rem
}

h3 {
    font-family: Montserrat, sans-serif;
    font-size: 1rem
}

section {
    padding: 5.625rem 0
}

.bg-supernova {
    background-color: #FFC704
}

.bg-medium-turqoise {
    background-color: #3FD1CD
}

.bg-persian-rose {
    background-color: #F22D9C
}

.bg-chamoisee {
    background-color: #A87458
}

a.bg-supernova:hover {
    background-color: #ffd236
}

a.bg-chamoisee:hover {
    background-color: #b99079
}

.bg-lima {
    background-color: #7DA914
}

a.bg-lima:hover {
    background-color: #97ba43
}

.bg-botticelli {
    background-color: #C7DFE1
}

a.bg-botticelli:hover {
    background-color: #d2e5e7
}

.bg-cool-gray {
    background-color: #8C92AB
}

a.bg-cool-gray:hover {
    background-color: #a3a8bc
}

.bg-japanese-maple {
    background-color: #780002
}

a.bg-japanese-maple:hover {
    background-color: #933335
}

.c-supernova {
    color: #FFC704
}

.c-white {
    color: #FFF
}

.c-black {
    color: #000
}

.c-shaded {
    color: rgba(0, 0, 0, .7)
}

.z-top {
    position: relative;
    z-index: 2
}

a {
    text-decoration: none;
    font-weight: 700;
    color: #000
}

a:hover {
    text-decoration: underline
}

.cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover
}

p+.button--rounded {
    margin-top: 1.25rem
}

.fr {
    float: right
}

.fl {
    float: left
}

.pos-a {
    position: absolute
}

.form-feedback {
    margin-bottom: 2rem
}

.form-feedback .report,
.form-feedback .report--error,
.form-feedback .report--info,
.form-feedback .report--success,
.form-feedback .report--warning {
    padding: .625rem 1.25rem
}

.form-feedback ul.report,
.form-feedback ul.report--error,
.form-feedback ul.report--info,
.form-feedback ul.report--success,
.form-feedback ul.report--warning {
    padding-left: 2.5rem
}

.form--contact .form-feedback {
    margin-top: 3rem
}

form fieldset {
    position: relative
}

.header--main .container,
.hero .container {
    position: relative;
    padding: 0 2rem
}

.header--main {
    background-color: rgba(255, 255, 255, .95);
    box-shadow: 0 5px 38px rgba(0, 0, 0, .14);
    position: fixed;
    width: 100%;
    z-index: 999
}

.logo {
    float: left;
    padding: .625rem 0
}

.logo:hover {
    text-decoration: none
}

.logo svg {
    width: 45px;
    height: 63px;
    vertical-align: middle;
    margin-right: 1rem;
    fill: #515255
}

.menu-toggle {
    position: absolute;
    right: 1.5rem;
    top: 1.2rem;
    display: block;
    padding: .625rem;
    cursor: pointer;
    font-weight: 700;
    text-transform: uppercase;
    color: #515255
}

.nav--main {
    font-family: Montserrat, sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    float: right;
    font-size: .75rem
}

.nav--main a {
    color: #000;
    text-decoration: none;
    letter-spacing: .192em;
    text-align: center;
    padding: 1.5625rem 0;
    display: block
}

.nav--main a:hover span:after {
    width: 100%
}

.nav--main a span {
    padding: .5rem .3125rem;
    display: block;
    position: relative
}

.nav--main a span:after {
    content: '';
    width: 0;
    height: .125rem;
    display: block;
    position: absolute;
    background-color: #FFC704;
    bottom: 0;
    left: 0;
    transition: width .2s
}

.nav--main ul {
    list-style: none
}

.nav--main ul li {
    float: left;
    margin-right: 1.875rem
}

.nav--main ul li.current-menu-parent span:after,
.nav--main ul li.current_page_item span:after {
    width: 100%
}

.nav--main ul li:last-child {
    margin-right: 0
}

.menu-item-has-children {
    position: relative
}

.menu-item-has-children:hover>a span:after {
    width: 100%
}

.menu-item-has-children:hover ul {
    display: block
}

.menu-item-has-children ul {
    position: absolute;
    background-color: #FFC704;
    top: 5.25rem;
    display: none;
    z-index: 10
}

.menu-item-has-children ul li {
    float: none;
    display: block;
    margin: 0
}

.menu-item-has-children ul li.current_page_item span {
    border-bottom: 2px solid #ffdd68
}

.menu-item-has-children ul a {
    white-space: nowrap;
    text-align: left;
    padding: .5rem .6875rem 0
}

.menu-item-has-children ul a:hover span {
    border-bottom: 2px solid #ffdd68
}

.menu-item-has-children ul a span {
    border-bottom: 2px solid transparent
}

main {
    padding-top: 5.25rem
}

.hero {
    height: 49.375rem;
    background: url(../images/hero.jpg) center center no-repeat;
    background-size: cover;
    padding: 7.25rem 0;
    margin-bottom: 5.625rem
}

.video {
    width: 100%;
    padding-top: 56.25%;
    background-color: rgba(136, 136, 136, .7);
    position: relative;
    top: 5rem;
    box-shadow: 0 0 18px rgba(128, 128, 128, .5)
}

.video iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.substory .video {
    top: 0
}

.quote {
    font-size: 1.5rem;
    text-align: center;
    line-height: 1.75;
    letter-spacing: 1px;
    position: relative;
    padding: 9.25rem 0
}

.quote:after,
.quote:before {
    content: '';
    display: block;
    width: 4.375rem;
    height: .25rem;
    background-color: #000;
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%)
}

.quote:before {
    top: 5.625rem
}

.quote:after {
    bottom: 5.625rem
}

.quote+.chapters,
.quote+.stories {
    padding-top: 0
}

.quote .container {
    padding: 0 8%
}

.stories .img--wrapper {
    display: block;
    width: 70%;
    padding-top: 54.4444445%;
    float: left;
    position: relative
}

.stories .img--wrapper img {
    position: absolute;
    left: 0;
    top: 0
}

.stories article:nth-child(even) .img--wrapper {
    float: right
}

.stories article:nth-child(even) .content {
    right: auto;
    left: 0
}

.stories article:nth-child(6n+1) .content {
    background-color: #FFC704
}

.stories article:nth-child(6n+2) .content {
    background-color: #3FD1CD
}

.stories article:nth-child(6n+3) .content {
    background-color: #F22D9C
}

.stories article:nth-child(6n+4) .content {
    background-color: #A87458
}

.stories article:nth-child(6n+5) .content {
    background-color: #7DA914
}

.stories article:nth-child(6n+6) .content {
    background-color: #8C92AB
}

.stories article {
    position: relative;
    margin-bottom: 4.5rem
}

.stories article:last-of-type {
    margin-bottom: 0
}

.stories h2 a {
    color: #FFF
}

.content {
    position: absolute;
    right: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 30.625rem;
    color: #FFF;
    padding: 3.125rem 2.8125rem
}

.content.content--wide {
    width: 60%
}

.content a,
.content p,
.content ul {
    color: rgba(0, 0, 0, .7)
}

.content p+h2 {
    padding-top: .75rem
}

.content li a,
.content p a {
    font-weight: 400;
    text-decoration: underline
}

.content .button {
    margin-top: 2rem
}

.content ul {
    padding-left: 1.125rem
}

.content ul li {
    padding-left: 1rem
}

.request {
    padding: 4.5rem 0
}

.request h2 {
    font-size: 2.25rem;
    text-transform: none;
    text-align: center;
    color: #000;
    margin-bottom: 2.5rem
}

.request form {
    color: #515255;
    width: 31.25rem;
    margin: 0 auto;
    z-index: 1
}

.request label {
    position: relative;
    display: block
}

.request span {
    position: absolute;
    top: .6875rem;
    left: 1.75rem
}

.request input {
    background-color: #FFF;
    border: 1px solid #DDD;
    border-radius: 1.4375rem;
    outline: 0
}

.request button {
    background-color: #000;
    color: #FFF;
    border: none;
    padding: .8125rem 3.5rem .75rem;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 1.4375rem;
    outline: 0;
    transition: background-color .15s
}

.request button:focus,
.request button:hover {
    background-color: #333
}

.request__email-form fieldset {
    position: relative
}

.request__email-form input {
    width: 25rem;
    padding: .75rem 6.25rem .8125rem 5.625rem
}

.request__email-form button {
    position: absolute;
    right: 0;
    top: 0
}

.request__post-form input {
    width: 100%;
    padding: .75rem 1.875rem .8125rem 8.125rem
}

.request__post-form label {
    margin-bottom: 1rem
}

.request__post-form button {
    float: right
}

.background {
    position: relative;
    text-align: center;
    padding: 8.125rem 0
}

.background:after {
    content: 'Background';
    text-transform: uppercase;
    color: #FFC704;
    font-family: Montserrat, sans-serif;
    font-size: 10rem;
    position: absolute;
    top: 4.5rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    letter-spacing: 1px
}

.background .col {
    padding-left: 4.5rem;
    text-align: left;
    padding-bottom: 0;
    padding-top: 0
}

.background .button {
    margin-top: 8.125rem
}

.fact {
    font-family: Montserrat, sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    padding: 2.5rem 0 0;
    position: relative
}

.fact span {
    font-size: 3rem;
    display: block;
    line-height: 1
}

.fact svg {
    display: none;
    fill: #FFC704;
    max-width: 5.75rem;
    max-height: 5.75rem;
    position: absolute;
    left: 0;
    top: -1rem;
    z-index: -1
}

.partners {
    text-align: center;
    background-color: #F1F1F1
}

.partners .img--wrapper {
    width: 20%;
    display: inline-block;
    vertical-align: middle
}

.partners .img--wrapper:nth-child(n+6) {
    margin-top: 2.5rem
}

.partners h2 {
    text-transform: capitalize;
    font-size: 2.25rem;
    margin-bottom: 4.375rem
}

.footer--main {
    background-color: #000;
    padding: 3.4375rem 0;
    color: #b2b2b2
}

.footer--main h3 {
    text-transform: uppercase;
    color: #DDD
}

.footer--main .col-3 {
    width: 23.75%
}

.footer--main .col-6 {
    width: 47.5%;
    margin-right: 5%
}

.footer--main .col-6:last-child {
    margin-right: 0
}

.footer--main .col-9 {
    padding-left: 5%;
    border-left: 1px solid #141414;
    border-right: 1px solid #141414
}

.footer--main .col-8 {
    width: 64%;
    margin-right: 4%
}

.footer--main .col-4 {
    width: 32%
}

.footer--main a {
    color: #FFF
}

.footer--main ul {
    list-style: none
}

.footer--main label {
    position: relative;
    display: block
}

.footer--main label span {
    position: absolute;
    top: .6875rem;
    left: 1.75rem
}

.footer--main input {
    width: 100%;
    background-color: rgba(81, 82, 85, .4);
    border: 1px solid rgba(221, 221, 221, .4);
    padding: .75rem 3.75rem .8125rem 5.625rem;
    border-radius: 1.4375rem;
    outline: 0;
    margin-bottom: 2.5rem;
    transition: border-color .15s
}

.footer--main input:focus {
    border-color: #FFC704
}

.footer--main button {
    background: 0 0;
    border: none;
    position: absolute;
    right: 0;
    top: 0;
    padding: .8125rem 2rem .75rem;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 1.4375rem;
    outline: 0
}

.footer--main button svg {
    fill: #FFF;
    width: .5625rem;
    height: .875rem;
    transition: fill .15s
}

.footer--main button:focus svg,
.footer--main button:hover svg {
    fill: #FFC704
}

.container.footer--main__credits {
    border-top: 1px solid rgba(255, 255, 255, .2);
    margin-top: 2rem;
    padding-top: 1rem
}

.container.footer--main__credits .dgd-logo {
    max-width: 130px
}

.social {
    display: inline-block;
    margin-right: .5rem
}

.social:last-child {
    margin-right: 0
}

.social svg {
    fill: #000;
    width: 1.875rem;
    height: 1.875rem;
    vertical-align: top
}

footer .social svg {
    fill: #F1F1F1
}

.form--contact {
    padding: 5rem 7rem;
    margin-bottom: 12.5rem
}

.form--contact .col-8 {
    width: 65%
}

.form--contact .col-8 .col-6 {
    width: 46.15%;
    margin-right: 7.7%
}

.form--contact .col-8 .col-6:last-child {
    margin-right: 0
}

.form--contact h3 {
    font-size: 1.125rem;
    border-bottom: 1px solid #ffdd68;
    padding-bottom: .75rem
}

.form--contact label {
    display: block;
    position: relative;
    color: #ffe99b;
    margin-bottom: 2rem
}

.form--contact label span {
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    position: absolute;
    left: 0;
    top: 1rem;
    transition: -webkit-transform .15s;
    transition: transform .15s
}

.form--contact input,
.form--contact textarea {
    width: 100%;
    background: 0 0;
    border: none;
    border-bottom: 1px solid #ffdd68;
    outline: 0;
    transition: border-color .15s;
    padding: .5rem 0;
    margin-top: 1rem
}

.form--contact input:focus,
.form--contact textarea:focus {
    border-bottom-color: #FFF
}

.form--contact input.valid+span,
.form--contact input:focus+span,
.form--contact input:valid+span,
.form--contact textarea.valid+span,
.form--contact textarea:focus+span,
.form--contact textarea:valid+span {
    -webkit-transform: translateY(-16px);
    transform: translateY(-16px)
}

.form--contact textarea {
    line-height: 1.3;
    margin-top: 1.25rem
}

.form--contact fieldset {
    padding: 1.5rem 2.5rem 2.5rem;
    background-color: #e6b304;
    margin-top: 2.5rem
}

.form--contact button {
    color: #FFF;
    border: 1px solid #FFF;
    padding: .75rem 4.5rem;
    transition: color .15s, background-color .15s
}

.form--contact button:focus,
.form--contact button:hover {
    background-color: #FFF;
    color: #FFC704
}

.double-background {
    position: relative
}

.double-background .img-wrapper {
    width: 48%;
    height: 40.625rem;
    position: absolute
}

.double-background .img-wrapper:first-child {
    top: 0;
    right: 0
}

.double-background .img-wrapper:last-child {
    bottom: 0;
    left: 0
}

.side-background {
    width: 50%;
    position: absolute;
    top: 5.25rem;
    right: 0
}

.page--background {
    position: relative
}

.page--background .button--rounded {
    margin-bottom: 1.25rem
}

.page--background section+section {
    padding-top: 0
}

.img--world {
    margin: 3.125rem auto 6.25rem;
    display: block
}

table {
    width: 100%;
    border: 5px solid #000;
    border-top: none
}

th {
    background-color: #005a65;
    color: #FFF;
    text-align: left;
    padding: .5rem;
    font-size: 1.25rem;
    font-family: Montserrat, sans-serif
}

.row--title {
    background-color: #D7A928;
    text-transform: uppercase;
    font-size: 1.125rem;
    padding: .5rem;
    font-weight: 700;
    color: #FFF;
    font-family: Montserrat, sans-serif;
    text-align: left!important
}

.row--title.last {
    background-color: #005477;
    height: 2.75rem
}

td {
    border: 1px solid #515255;
    padding: .25rem .5rem
}

td:first-child {
    text-align: right;
    width: 2.8125rem
}

.chapter {
    display: block;
    color: #FFF;
    transition: background-color .15s
}

.chapter:nth-last-child(n+4) {
    margin-bottom: 4.5rem
}

.chapter:nth-child(6n+1) {
    background-color: #FFC704
}

.chapter:nth-child(6n+2) {
    background-color: #A87458
}

.chapter:nth-child(6n+3) {
    background-color: #7DA914
}

.chapter:nth-child(6n+4) {
    background-color: #C7DFE1
}

.chapter:nth-child(6n+5) {
    background-color: #8C92AB
}

.chapter:nth-child(6n+6) {
    background-color: #780002
}

.chapter:hover {
    text-decoration: none
}

.chapter h2 {
    text-transform: none
}

.chapter h2 span {
    display: block;
    text-transform: uppercase;
    padding: .625rem 0 3.625rem
}

.chapter--inner {
    padding: 4.25rem 2.5rem 2.5rem
}

.page-installatie h1 {
    padding-left: 7%
}

.page-installatie__intro {
    padding: 0 14% 26%
}

.page-installatie__social {
    padding: 15% 14% 0
}

.page-installatie__social .button {
    width: 14.6875rem;
    margin-bottom: 1.25rem;
    padding: 1.0625rem 2rem .8125rem
}

.page-installatie__social svg {
    max-width: 1rem;
    max-height: 1rem;
    vertical-align: middle;
    margin-right: 1rem;
    position: relative;
    top: -.125rem;
    fill: #b2b2b2
}

.upcoming-location {
    text-transform: uppercase;
    display: block;
    color: #FFC704;
    font-weight: 700;
    font-family: Montserrat, sans-serif;
    font-size: 1.875rem;
    line-height: 1.2;
    padding-top: .25rem;
    letter-spacing: -2px
}

.reposition {
    position: relative;
    top: -21.875rem;
    margin-bottom: -21.875rem
}

.installatie-bg-text {
    padding: 2.5rem 0 0 7%
}

.nav--stories {
    width: 22.5rem;
    text-transform: uppercase;
    font-family: Montserrat, sans-serif;
    line-height: 1.2;
    font-size: 1.5rem
}

.nav--stories a:last-child {
    text-align: right
}

.page--journalists .intro h1,
.page--journalists .intro p,
.page--meres .intro h1,
.page--meres .intro p {
    margin-left: 7%
}

.page--journalists .intro p,
.page--meres .intro p {
    width: 43.75rem
}

.page--journalists .intro+section,
.page--meres .intro+section {
    padding-top: 0
}

.page--meres article {
    padding-bottom: 5.625rem
}

.page--meres article:last-child {
    padding-bottom: 0
}

.page--meres article img {
    display: block
}

.page--meres article.full img {
    width: 100%
}

.page--meres .img-description {
    background-color: #000;
    padding: 3.125rem 2.5rem
}

.installatie__sharing,
.substory__sharing {
    padding-top: 3rem
}

.installatie__sharing a,
.substory__sharing a {
    display: inline-block
}

.installatie__sharing a:not(:last-child),
.substory__sharing a:not(:last-child) {
    margin-right: 1rem
}

.installatie__sharing a:focus svg,
.installatie__sharing a:hover svg,
.substory__sharing a:focus svg,
.substory__sharing a:hover svg {
    fill: #000
}

.installatie__sharing svg,
.substory__sharing svg {
    display: block;
    fill: #515255;
    width: 2em;
    height: 2em
}

.substory__sharing a:focus svg,
.substory__sharing a:hover svg {
    fill: #FFF
}

.page--journalists .stories .img--wrapper {
    width: 50%;
    padding-top: 43%
}

.world-wrapper {
    margin: 3.75rem auto 6.25rem;
    position: relative;
    max-width: 87.5rem
}

@media screen and (min-width:28.125em) and (max-width:50em) {
    .logo {
        float: none;
        width: 13.75rem
    }
}

@media screen and (min-width:28.125em) {
    .menu-toggle {
        display: none
    }
}

@media screen and (min-width:34.375em) {
    .container.footer--main__credits .dgd-logo {
        float: right
    }
}

@media screen and (min-width:68.75em) {
    .header--main .container,
    .hero .container {
        padding: 0 12.5rem
    }
}

@media screen and (max-width:80em) {
    .content.content--wide {
        width: 50%;
        position: static;
        float: left;
        -webkit-transform: none;
        transform: none
    }
}

@media screen and (max-width:77.5em) {
    .background:after {
        font-size: 8.25rem
    }
    .background .button {
        margin-top: 5rem
    }
}

@media screen and (max-width:71.875em) {
    .side-background {
        width: 40%
    }
}

@media screen and (max-width:64em) {
    .background:after {
        display: none
    }
    .background .col {
        padding-left: 3rem
    }
    .fact svg {
        display: block
    }
    .chapter h2 span {
        padding: 0 0 2rem
    }
    .chapter--inner {
        padding: 2.5rem 1.5rem 1.5rem
    }
    .page-installatie img.last {
        width: 50%
    }
    .reposition {
        top: -15.625rem;
        margin-bottom: -15.625rem
    }
}

@media screen and (max-width:60em) {
    .footer--main .col-9 {
        border-right: none
    }
    .footer--main .col-8 {
        width: 100%;
        margin-right: 0;
        float: none
    }
    .footer--main .col-4 {
        width: 100%;
        float: none;
        padding-top: 2rem
    }
    .side-background {
        display: none
    }
    .page--background .container>.col-6 {
        width: 100%;
        float: none
    }
}

@media screen and (max-width:56.25em) {
    h1.line:before {
        margin-top: 0;
        margin-bottom: 2rem
    }
    section {
        padding: 4.375rem 0
    }
    .hero {
        height: 45rem
    }
    .stories .img--wrapper {
        width: 100%;
        float: none;
        padding: 0
    }
    .stories .img--wrapper img {
        position: static
    }
    .stories article:nth-child(even) .img--wrapper {
        float: none
    }
    .content {
        position: static;
        -webkit-transform: none;
        transform: none;
        width: 100%
    }
    .content.content--wide {
        width: 100%;
        float: none
    }
    .form--contact {
        padding: 3.75rem 2rem;
        margin-bottom: 0
    }
    .double-background .img-wrapper {
        display: none
    }
    .chapter h2 {
        font-size: 1.25rem
    }
    .page-installatie h1 {
        padding-left: 0
    }
    .page-installatie__intro {
        padding: 0 14% 3.125rem 0
    }
    .page-installatie__social {
        padding: 3.125rem 0
    }
    .upcoming-location {
        font-size: 1.5rem
    }
    .reposition {
        top: -9.375rem;
        margin-bottom: -9.375rem
    }
    .reposition h1:before {
        margin-top: 3.125rem
    }
    .installatie-bg-text {
        padding-left: 0
    }
    .page--journalists .intro h1,
    .page--journalists .intro p,
    .page--meres .intro h1,
    .page--meres .intro p {
        margin-left: 0
    }
    .page--meres article {
        padding-bottom: 4.5rem
    }
    .page--journalists .stories .img--wrapper {
        width: auto;
        padding-top: 0
    }
}

@media screen and (max-width:50em) {
    .container {
        padding: 0 1.5rem
    }
    .col {
        margin-right: 0
    }
    h1 {
        font-size: 3.75rem;
        margin-bottom: 2.625rem;
        line-height: 2.9375rem
    }
    h2 {
        font-size: 1.25rem;
        margin-bottom: .75rem
    }
    .header--main .container,
    .hero .container {
        padding: 0 1.5rem
    }
    .logo {
        display: block;
        margin: 0 auto;
        padding: 1.25rem 0 .25rem
    }
    .nav--main {
        width: 100%
    }
    .nav--main a {
        padding: .75rem 0
    }
    .nav--main ul li {
        margin-right: 2%;
        width: 23.5%
    }
    .menu-item-has-children ul {
        top: 3.625rem
    }
    .menu-item-has-children ul li {
        width: 100%
    }
    main {
        padding-top: 9.0625rem
    }
    .hero {
        padding: 6.25rem 0;
        margin-bottom: 0
    }
    .content {
        padding: 2rem 1.5rem
    }
    .content .button {
        margin-top: .75rem
    }
    .request h2 {
        font-size: 1.75rem;
        margin-bottom: 2rem
    }
    .background {
        padding: 5.625rem 0
    }
    .background .col {
        width: 50%
    }
    .background .col:nth-last-child(n+3) {
        margin-bottom: 2.5rem
    }
    .background .button {
        margin-top: 3.75rem
    }
    .partners .img--wrapper {
        width: 33.333333%
    }
    .partners .img--wrapper:nth-child(n+4) {
        margin-top: 2.5rem
    }
    .partners h2 {
        font-size: 1.75rem;
        margin-bottom: 2.5rem
    }
    .footer--main .col-3 {
        width: 100%;
        float: none;
        margin-right: 0
    }
    .footer--main .col-9 {
        width: 100%;
        float: none;
        padding-left: 0;
        border-left: none;
        margin-top: 2rem
    }
    .form--contact .col-4 {
        float: none;
        width: 100%;
        padding-top: 2rem
    }
    .form--contact label.col-6 {
        width: 100%;
        float: none
    }
    .form--contact .col-8 {
        width: 100%;
        margin-right: 0;
        float: none
    }
    .form--contact label {
        margin-bottom: 1.5rem
    }
    .page--background .col-6 {
        width: 50%
    }
    .row--title,
    td,
    th {
        font-size: .875rem
    }
    .chapter {
        width: 47.5%
    }
    .chapter img {
        width: 100%
    }
    .chapter:nth-child(even) {
        margin-right: 0
    }
    .chapter:nth-child(odd) {
        margin-right: 5%!important
    }
    .page-installatie .col-6 {
        width: 100%;
        margin-right: 0;
        float: none;
        padding-bottom: 1.5rem
    }
    .page-installatie__intro {
        padding: 0 0 3.125rem
    }
    .page-installatie__social {
        padding-bottom: .25rem
    }
    .page-installatie__social .button {
        display: block;
        margin: 0 auto 1.25rem
    }
    .reposition {
        top: 0;
        margin-bottom: 0
    }
    .page--journalists .intro p,
    .page--meres .intro p {
        width: 100%
    }
    .page--meres .img-description .col-6 {
        width: 100%;
        float: none
    }
    .page--meres .img-description .col-6:not(:last-child) {
        margin-bottom: 2rem
    }
}

@media screen and (max-width:37.5em) {
    .nav--main a {
        letter-spacing: 0
    }
    .request form {
        width: 100%
    }
}

@media screen and (max-width:34.3125em) {
    .container.footer--main__credits {
        text-align: center
    }
    .container.footer--main__credits span {
        display: block;
        margin: 0 auto
    }
    .container.footer--main__credits .dgd-logo {
        margin-top: 2rem
    }
}

@media screen and (max-width:30em) {
    .button--rounded {
        line-height: 1.3
    }
    h1 {
        font-size: 2.5rem;
        margin-bottom: 1.75rem;
        line-height: 1.9375rem
    }
    h1.line:before {
        margin-bottom: 1.25rem
    }
    section {
        padding: 3.125rem 0
    }
    .nav--main {
        font-size: .625rem
    }
    .menu-item-has-children ul {
        top: 3.4375rem
    }
    main {
        padding-top: 8.875rem
    }
    .hero {
        padding: 4.625rem 0;
        height: auto
    }
    .video {
        top: 0;
        margin-top: 2.5rem
    }
    .quote {
        padding: 7.25rem 0;
        font-size: 1.25rem
    }
    .quote:before {
        top: 4.5rem
    }
    .quote:after {
        bottom: 4.5rem
    }
    .request h2 {
        font-size: 1.5rem;
        margin-bottom: 1.75rem
    }
    .request__email-form input {
        width: 100%;
        padding: .75rem 1.5rem .8125rem 5.625rem
    }
    .request__email-form button {
        position: static;
        margin: 1.5rem auto 0;
        display: block
    }
    .background {
        padding: 5.625rem 0 4.5rem
    }
    .background .col {
        width: 100%;
        margin-bottom: 2.5rem;
        text-align: right
    }
    .background .button {
        margin-top: 1.25rem;
        line-height: 1.3
    }
    .partners .img--wrapper {
        width: 50%
    }
    .partners .img--wrapper:nth-child(n+3) {
        margin-top: 2.5rem
    }
    .footer--main .col-6 {
        width: 100%;
        margin-right: 0;
        float: none
    }
    .footer--main .col-6:last-child {
        padding-top: .75rem
    }
    .form--contact {
        padding: 2.5rem 1.5rem
    }
    .form--contact .col-8 .col-6 {
        width: 100%;
        float: none;
        margin-right: 0
    }
    .form--contact .col-8 .col-6:last-child {
        padding-top: 2rem
    }
    .form--contact fieldset {
        padding: 1.5rem 1.25rem 2rem
    }
    .form--contact button {
        width: 100%
    }
    th {
        font-size: .6875rem
    }
    .chapter {
        width: 100%;
        margin-right: 0!important
    }
    .chapter:not(:last-child) {
        margin-bottom: 3.125rem
    }
    .chapter h2 span {
        padding: 0 0 .25rem
    }
    .chapter--inner {
        padding: 1.5rem
    }
    .page--meres .img-description {
        padding: 2rem 1.5rem
    }
}

@media screen and (max-width:28.125em) {
    input[name=menu-toggle]:not(:checked)~.nav--main {
        display: none
    }
    .nav--main ul li {
        display: block;
        width: 100%
    }
    main {
        padding-top: 5.0625rem
    }
}

@media screen and (max-width:28.0625em) {
    .logo {
        width: 12.875rem;
        padding: .625rem 0
    }
    .logo svg {
        width: 35px;
        height: 61px
    }
}

@media screen and (max-width:25em) {
    .nav--main a span {
        padding: .5rem 0
    }
}

@media print {
    * {
        background: 0 0!important;
        color: #000!important;
        box-shadow: none!important;
        text-shadow: none!important
    }
    a,
    a:visited {
        text-decoration: underline
    }
    a[href]:after {
        content: " (" attr(href) ")"
    }
    abbr[title]:after {
        content: " (" attr(title) ")"
    }
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: ''
    }
    blockquote,
    pre {
        border: 1px solid #999;
        page-break-inside: avoid
    }
    thead {
        display: table-header-group
    }
    img,
    tr {
        page-break-inside: avoid
    }
    img {
        max-width: 100%!important
    }
    h2,
    h3,
    p {
        orphans: 3;
        widows: 3
    }
    h2,
    h3 {
        page-break-after: avoid
    }
}