/* :: PESfolio.com by Pedro Espirito Santo :: */

/****************************
 Global CSS Reset
*****************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, 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 {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

/* remember to define focus styles! */
:focus {outline: 0;}

/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/****************************
 Webfonts
*****************************/

@font-face {
    font-family: 'CalSansRegular';
    src: url('../fonts/calsans-regular-webfont.woff2') format('woff2'),
         url('../fonts/calsans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HankenGrotesk-Italic';
    src: url('../fonts/HankenGrotesk-Italic.woff2') format('woff2'),
        url('../fonts/HankenGrotesk-Italic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HankenGrotesk-Regular';
    src: url('../fonts/HankenGrotesk-Regular.woff2') format('woff2'),
        url('../fonts/HankenGrotesk-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HankenGrotesk-Black';
    src: url('../fonts/HankenGrotesk-Black.woff2') format('woff2'),
        url('../fonts/HankenGrotesk-Black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/****************************
 Global elements & styles
*****************************/
html {
    font-size:62.5%;
    scroll-behavior: smooth;
}

body {
    background-color: #000000;
    color: #FFFFFF;
    font-family: 'HankenGrotesk-Regular', sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'CalSansRegular', sans-serif;
}

h1 {
    font-size: 100px;
    font-size: 10rem;
    line-height: 120px;
    line-height: 12rem;
}

h2 {
    font-size: 75px;
    font-size: 7.5rem;
    line-height: 92px;
    line-height: 9.2rem;
}

h3 {
    font-size: 56px;
    font-size: 5.6rem;
    line-height: 72px;
    line-height: 7.2rem;
}

h6 {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 32px;
    line-height: 3.2rem;
}

p {
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 28px;
    line-height: 2.8rem;
}

p.small {
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 24px;
    line-height: 2.4rem;
}

p.large {
    font-size: 24px;
    font-size: 2.4rem;
    line-height: 36px;
    line-height: 3.6rem;
}

p.intro {
    font-size: 42px;
    font-size: 4.2rem;
    line-height: 50px;
    line-height: 5rem;
}

p.legend {
    font-family: 'HankenGrotesk-Italic', sans-serif;
    font-size: 14px;
    font-size: 1.4rem;
    line-height: 22px;
    line-height: 2.2rem;
    padding: 0 64px;
    text-align: center;
}

a {
    color: #EB0000;
}

a:hover {
    text-decoration: none;
}

a.textButton {
    background-image: url(../images/icons/arrow-right.svg);
    background-repeat: no-repeat;
    background-position: center right;
    color: #FFFFFF;
    font-family: 'CalSansRegular', sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 24px;
    line-height: 2.4rem;
    padding-right: 32px;
    text-decoration: none;
}

a.textButton:hover {
    text-decoration: underline;
}

.darkText a.textButton {
    background-image: url(../images/icons/arrow-right-bk.svg);
}

a.down {
    background-image: url(../images/icons/arrow-down.svg);
}

.darkText a.down {
    background-image: url(../images/icons/arrow-down-bk.svg);
}

a.top {
    background-image: url(../images/icons/arrow-up.svg);
}

.darkText a.top {
    background-image: url(../images/icons/arrow-up-bk.svg);
}

a.back {
    background-image: url(../images/icons/arrow-left.svg);
    background-position: left center;
    padding-right: 0;
    padding-left: 32px;
}

.darkText a.back {
    background-image: url(../images/icons/arrow-left-bk.svg);
}

a.external {
    background-image: url(../images/icons/external-link.svg);
}

.darkText a.external {
    background-image: url(../images/icons/external-link-bk.svg);
}

a.button {
    background-color: rgba(0, 0, 0, 0.08);
    background-image: url(../images/icons/arrow-right.svg);
    background-repeat: no-repeat;
    background-position: right 32px center;
    border: 2px solid #FFFFFF;
    border-radius: 500px;
    color: #FFFFFF;
    font-family: 'CalSansRegular', sans-serif;
    font-size: 18px;
    font-size: 1.8rem;
    line-height: 24px;
    line-height: 2.4rem;
    padding: 16px 80px 16px 40px;
    text-decoration: none;
    transition: background-color 0.25s ease;
}

a.button:hover {
    background-color: rgba(0, 0, 0, 0.24);
    transition: background-color 0.25s ease;
}

.darkText {
    color: #000000;
}

.darkText a.button {
    background-image: url(../images/icons/arrow-right-bk.svg);
    border: 2px solid #000000;
    color: #000000;
}

strong {
    font-family: 'HankenGrotesk-Black', sans-serif;
}

/****************************
 Paddings & Margins
*****************************/

.padBot8 {
    padding-bottom: 8px !important;
}

.padBot16 {
    padding-bottom: 16px !important;
}

.padBot24 {
    padding-bottom: 24px !important;
}

.padBot32 {
    padding-bottom: 32px !important;
}

.padBot40 {
    padding-bottom: 40px !important;
}

.padBot48 {
    padding-bottom: 48px !important;
}

.padBot56 {
    padding-bottom: 56px !important;
}

.padBot64 {
    padding-bottom: 64px !important;
}

.margBot8 {
    margin-bottom: 8px !important;
}

.margBot16 {
    margin-bottom: 16px !important;
}

.margBot24 {
    margin-bottom: 24px !important;
}

.margBot32 {
    margin-bottom: 32px !important;
}

.margBot40 {
    margin-bottom: 40px !important;
}

.margBot48 {
    margin-bottom: 48px !important;
}

.margBot56 {
    margin-bottom: 56px !important;
}

.margBot64 {
    margin-bottom: 64px !important;
}

.margBot72 {
    margin-bottom: 72px !important;
}

.margBot80 {
    margin-bottom: 80px !important;
}

.margBot88 {
    margin-bottom: 88px !important;
}

.margBot96 {
    margin-bottom: 96px !important;
}

/****************************
 Header
*****************************/

header {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0) 100%);
    display: flex;
    justify-content: space-between;
    padding: 64px;
    position: fixed;
    width: calc(100% - 128px);
    transition: background 0.35s ease;
}

#logo {
    font-size: 32px;
    font-size: 3.2rem;
    line-height: normal;
    transition: font-size 0.35s ease;
}

#logo span {
    color: #EB0000;
    transition: color 0.35s ease;
}

#social {
    column-gap: 24px;
    display: flex;
}

/****************************
 Sections
*****************************/

p.loggedOutCopy {
    padding-bottom: 18px;
}

section.slide {
    display: flex;
    height: 100vh;
    justify-content: center;
    overflow: hidden;
    transition: background-color 0.35s ease;
}

#intro {
    /*box-shadow: inset 0 -8px 0 0 #EB0000;*/
    align-items: center;
    padding: 0 64px;
}

#introWrapper {
    max-width: 672px;
}

#introWrapper p.intro {
    padding-right: 24px;
}

#midy {
    background-color: #6C6C6C;
    /*box-shadow: inset 0 -8px 0 0 #17A9E5;*/
}

#concorder {
    background-color: #17A9E5;
}

#musih {
    background-color: #E9DFBF;
}

div.projWrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    padding-top: 160px;
    width: 100%;
}

div.projWrapper img {
    width: 100%;
}

div.projInfo {
    column-gap: 32px;
    display: flex;
    max-width: 1142px;
    width: calc(100% - 128px);
}

div.projText {
    width: 60%;
}

div.projActions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-top: 16px;
    width: 40%;
}

ul.tags {
    column-gap: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
}

ul.tags li {
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 200px;
    font-size: 13px;
    font-size: 1.3rem;
    padding: 8px 16px;
    text-transform: uppercase;
}

#contactWrapper {
    justify-content: center;
    padding: 0 64px;
}

/****************************
 Footer
*****************************/

footer {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.48) 100%);
    border-bottom: 8px solid #EB0000;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    padding: 64px;
    position: fixed;
    width: calc(100% - 128px);
    transition: border-bottom 0.35s ease;
}

footer.rightAlign {
    justify-content: end;
}

/****************************
 Case Studies
*****************************/

.darkText a {
    color: #000000;
}

#midyCase {
    background-color: #6C6C6C;
}

#midyCase header {
    background: linear-gradient(180deg, rgba(108, 108, 108, 0.90) 20%, rgba(108, 108, 108, 0) 100%);
}

#concorderCase {
    background-color: #17A9E5;
}

#concorderCase header {
    background: linear-gradient(180deg, rgba(23, 169, 229, 0.90) 20%, rgba(23, 169, 229, 0) 100%);
}

#musihCase {
    background-color: #E9DFBF;
}

#musihCase header {
    background: linear-gradient(180deg, rgba(233, 223, 191, 0.90) 20%, rgba(233, 223, 191, 0) 100%);
}

body.caseStudies footer {
    background: transparent;
    border-bottom: 0;
    position: relative;
}

body.caseStudies header a {
    line-height: 32px;
    line-height: 3.2rem;
}

body.caseStudies div.projActions {
    padding-left: 32px;
    padding-top: 152px;
}

body.caseStudies:not(.darkText) section a {
    color: #FFFFFF;
}

ul.links {
    column-gap: 32px;
    display: flex;
}

#facts {
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 24px;
}

section.imgFull {
    display: flex;
    justify-content: center;
}

img.fullBleed {
    margin: auto;
    max-width: 1728px;
    width: 100%;
}

div.oneCol {
    margin: auto;
    max-width: 672px;
    padding: 0 64px;
}

div.oneCol p, div.twoCol p {
    padding-bottom: 18px;
}

div.oneCol p:last-of-type, div.twoCol p:last-of-type {
    padding-bottom: 0;
}

div.imgContainer {
    display: flex;
    justify-content: center;
}

section.twoImgs img {
    max-width: 50%;
}

section.centredImg div.imgContainer img, section.twoImgs div.imgContainer img {
    max-height: 80vh;
}

section.twoImgs div.imgContainer img {
    width: 50%;
}

div.twoCol {
    column-gap: 32px;
    display: flex;
    justify-content: center;
    padding-right: 64px;
    padding-left: 64px;
}

div.twoCol div {
    flex: 1;
    max-width: 555px;
}

h2.oneAndTwo {
    max-width: 1142px;
    margin: auto;
    padding-left: 64px;
    padding-right: 64px;
}

ul.editorial {
    list-style-position: outside;
    list-style-type: circle;
    padding-left: 32px;
    padding-bottom: 24px;
}

ul.editorial li {
    line-height: 28px;
}

video {
    max-height: 80vh;
}

/****************************
 Media Queries
*****************************/

@media screen and (max-width: 755px) {
    
    body {
        font-size: 18px;
        font-size: 1.8rem;
    }
    
    h1 {
        font-size: 50px;
        font-size: 5rem;
        line-height: 63px;
        line-height: 6.3rem;
    }
    
    h2 {
        font-size: 42px;
        font-size: 4.2rem;
        line-height: 52px;
        line-height: 5.2rem;
    }
    
    h3 {
        font-size: 35px;
        font-size: 3.5rem;
        line-height: 44px;
        line-height: 4.4rem;
    }
    
    h4 {
        font-size: 29px;
        font-size: 2.9rem;
        line-height: 37px;
        line-height: 3.7rem;
    }
    
    h5 {
        font-size: 24px;
        font-size: 2.4rem;
        line-height: 32px;
        line-height: 3.2rem;
    }
    
    h6 {
        font-size: 20px;
        font-size: 2rem;
        line-height: 26px;
        line-height: 2.6rem;
    }
    
    p.intro {
        font-size: 29px;
        font-size: 2.9rem;
        line-height: 42px;
        line-height: 4.2rem;
    }
    
    p.large {
        font-size: 20px;
        font-size: 2rem;
        line-height: 30px;
        line-height: 3rem;
    }
    
    p.small {
        font-size: 13px;
        font-size: 1.3rem;
        line-height: 22px;
        line-height: 2.2rem;
    }
    
    a.button {
        font-size: 17px;
        font-size: 1.7rem;
        line-height: 22px;
        line-height: 2.2rem;
        padding-bottom: 15px;
        padding-top: 15px;
        width: calc(100% - 124px);
    }
    
    a.textButton {
        background-size: 20px;
        font-size: 17px;
        font-size: 1.7rem;
        line-height: 22px;
        line-height: 2.2rem;
        padding-right: 28px;
    }
    
    header {
        row-gap: 16px;
        flex-direction: column;
        padding: 32px;
        width: calc(100% - 64px);
    }
    
    #logo {
        font-size: 24px !important;
        font-size: 2.4rem !important;
        line-height: 31px;
        line-height: 3.1rem;
    }
    
    footer {
        padding: 32px;
        width: calc(100% - 64px);
    }
    
    #intro {
        padding: 0 32px;
    }
    
    #intro.loggedOut {
        padding-top: 16px;
    }
    
    div.projWrapper {
        padding-top: 144px;
    }
    
    div.projInfo {
        flex-direction: column;
        width: calc(100% - 64px);
    }
    
    div.projText {
        width: 100%;
    }
    
    div.projActions {
        align-items: flex-start;
        flex-direction: column-reverse;
        padding-top: 24px;
        row-gap: 24px;
        width: 100%;
    }
    
    img.projImg {
        margin-top: 16px;
    }
    
    body.caseStudies div.projActions {
        flex-direction: column;
        padding-left: 0;
        padding-top: 32px;
    }
    
    div.oneCol, p.legend {
        padding: 0 32px;
    }
    
    div.twoCol {
        flex-direction: column;
        padding: 0 32px;
        row-gap: 24px;
    }
    
    div.imgContainer img {
        max-width: 100%;
    }
    
    div.imgContainer img.twoX {
        max-width: 200%;
    }
    
    section.twoImgs div.imgContainer img {
        width: unset;
    }
    
    section.twoImgs div.imgContainer {
        align-items: center;
        flex-direction: column;
    }
    
    h2.oneAndTwo {
        padding-left: 32px;
        padding-right: 32px;
    }
    
    ul.tags {
        justify-content: flex-start;
    }
    
    /* Paddings & Margins */
    
    .padBot8 {
        padding-bottom: 4px !important;
    }

    .padBot16 {
        padding-bottom: 8px !important;
    }

    .padBot24 {
        padding-bottom: 12px !important;
    }

    .padBot32 {
        padding-bottom: 16px !important;
    }

    .padBot40 {
        padding-bottom: 20px !important;
    }

    .padBot48 {
        padding-bottom: 24px !important;
    }

    .padBot56 {
        padding-bottom: 28px !important;
    }

    .margBot8 {
        margin-bottom: 4px !important;
    }

    .margBot16 {
        margin-bottom: 8px !important;
    }

    .margBot24 {
        margin-bottom: 12px !important;
    }

    .margBot32 {
        margin-bottom: 16px !important;
    }

    .margBot40 {
        margin-bottom: 20px !important;
    }

    .margBot48 {
        margin-bottom: 24px !important;
    }

    .margBot56 {
        margin-bottom: 28px !important;
    }
    
    .margBot64 {
        margin-bottom: 32px !important;
    }
    
    .margBot72 {
        margin-bottom: 36px !important;
    }
    
    .margBot80 {
        margin-bottom: 40px !important;
    }
    
    .margBot88 {
        margin-bottom: 44px !important;
    }
    
    .margBot96 {
        margin-bottom: 48px !important;
    }
    
}