html {
    font-family: "Titillium Web",Geneva,Tahoma,sans-serif;
    font-weight: 400;
    font-size: 12pt;
}

body, body * {
    box-sizing: border-box;
}

body {
    line-height: 1.5;
    color: #fff;
    background-color: #585858;
    margin: 7.5rem 0 0 0;
}

body > header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 7.5rem;
    max-width: 100%;
    background: #fff;
    display: -webkit-box;
    display:     -ms-flexbox;
    display:         flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    border-bottom: 0.35rem solid #3e8ede;
    padding: 1rem 2.5rem;
    z-index: 1;
}
body > header > * {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
}
body > header h1 {
    margin: 0;
    line-height: 1;
    color: inherit;
    font-size: inherit;
}
body > header a {
    color: inherit;
    font-weight: bold;
}
body > header .selection {
    font: inherit;
    color: inherit;
    background-color: transparent;
    border: none;
}

/* Header menu / burger menu */

body > header > nav {
    text-align: right;
}
body > header > nav button {
    border: none;
    background-color: transparent;
    color: inherit;
    padding: 0;
    margin-left: calc(3vw + 0.25rem);
    font-size: 1.75em;
    cursor: pointer;
}
body > header > nav ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0.5rem;
    position: absolute;
    right: 2.5rem;
    width: 14rem;
    height: auto;
    background-color: #fff;
    border-radius: 0.25em;
    box-shadow: 0 0 0.25em rgba(0,0,0, 0.5);
}
body > header > nav li {
    display: block;
}
body > header >nav a {
    display: block;
    padding: 0.5rem;
    width: 100%;
}

h1,
h2,
h3 {
    color: #00adee;
}

h1,
h2,
body > header {
    font-weight: 600;
    letter-spacing: 0.075em;
    line-height: 1.25;
    font-size: inherit;
}
h3 {
    font-weight: bold;
    letter-spacing: 0.05em;
    border-top: 1px solid #00adee;
    padding-top: 0.1em;
}
h4,
h5,
h6 {
    font-weight: normal;
}

h1 > span,
h2 > span {
    text-transform: uppercase;
}

h1 a,
h2 a {

}

a:link, a:visited {
    color: inherit;
    text-decoration: none;
}
a:link:hover {
    text-decoration: underline;
}

body > section,
body > footer {
    width: 100%;
    max-width: 100%;
    text-align: center;
    overflow: hidden;
}
body > section > *,
body > footer > * {
    text-align: left;
}
body > section:not(.borderless),
body > footer {
    padding: 7.5vw;
}
body > section:not(.borderless) {
    color: #333;
    -webkit-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;
}

body > section .sdg-header {
    position: relative;
    text-align: center;
}
body > section .sdg-header:before {
    content: " ";
    display: block;
    height: 5rem;
    margin-bottom: 2rem;
    background: url(/static/sdg-circle.svg) center / contain no-repeat;
}

body > section > main,
body > footer > main {
    width: 100%;
    max-width: 60rem;
    margin-left: auto;
    margin-right: auto;
}

body > section h1,
body > section h2 {
    margin-top: 0;
    font-size: 1.67em;
}

.page-title {
    height: calc(100vh - 6.67rem);
    background-color: #000;
}
.page-title a {
    color: #fff;
}
.page-title-arrow {
    font-size: 2em;
    position: absolute;
    bottom: 0.75rem;
    width: 100%;
    text-align: center;
    -webkit-animation: bounce-vertical 2s infinite;
            animation: bounce-vertical 2s infinite;
}
.page-title-arrow a:link,
.page-title-arrow a:link:hover {
    text-decoration: none;
}
.nav-arrow {
    font-size: 2.5em;
}
.nav-arrow,
.nav-arrow a {
    color: #454545 !important;
}

.slideshow {
    position: relative;
    list-style: none;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    text-align: center;
}
.slideshow > li {
    position: absolute;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100vh;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

a:link.button,
a:hover.button,
a:visited.button {
    color: #fff;
    text-decoration: none;
}
.button {
    display: inline-block;
    background-color: #3e8ede;
    color: #fff;
    padding: 0.5em 1em;
    margin-bottom: 1em;
    font-weight: bold;
}

body > footer {
    font-size: 0.6em;
    font-weight: 300;
    padding-top: 2vw;
    padding-bottom: 2.5vw;
}
body > footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
body > footer a {
    font-weight: normal;
    color: inherit;
}

.color-ruler {
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    background: url(/static/color-ruler.png) center center / contain repeat-y;
}


.pcp-footer-icon {
    margin-bottom: 1em;
    margin-top: 2em;
    height: 80px;
    width: 80px;
}
.pcp-footer-icon * {
    display: block;
    width: 100%;
    height: 100%;
}

@-webkit-keyframes bounce-vertical {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-0.5em);
                transform: translateY(-0.5em);
    }
    60% {
        -webkit-transform: translateY(-0.25em);
                transform: translateY(-0.25em);
    }
}
@keyframes bounce-vertical {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
    40% {
        -webkit-transform: translateY(-0.5em);
                transform: translateY(-0.5em);
    }
    60% {
        -webkit-transform: translateY(-0.25em);
                transform: translateY(-0.25em);
    }
}

@media only screen and (min-width: 1300px) {
    body > header > nav {
        text-align: right;
    }
    body > header > nav button {
        display: none;
    }
    body > header > nav ul {
        display: block;
        position: static;
        padding: 0;
        width: auto;
        box-shadow: none;
        background-color: transparent;
    }
    body > header > nav li {
        display: inline-block;
        margin-left: calc(2vw + 0.1rem);
    }
    body > header > nav li a {
        display: inline;
    }
}