/* * * * * * * * * * * *  Font definitions * * * * * * * * * * * * */

/* inter-100 - latin-ext */
@font-face {
    font-family: 'Inter-thin';
    font-style: normal;
    font-weight: 100;
    src: local(''),
    url('font/inter-v3-latin-ext-100.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-100.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-200 - latin-ext */
@font-face {
    font-family: 'Inter-extralight';
    font-style: normal;
    font-weight: 200;
    src: local(''),
    url('font/inter-v3-latin-ext-200.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-200.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-300 - latin-ext */
@font-face {
    font-family: 'Inter-light';
    font-style: normal;
    font-weight: 300;
    src: local(''),
    url('font/inter-v3-latin-ext-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-regular - latin-ext */
@font-face {
    font-family: 'Inter-regular';
    font-style: normal;
    font-weight: 400;
    src: local(''),
    url('font/inter-v3-latin-ext-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-500 - latin-ext */
@font-face {
    font-family: 'Inter-medium';
    font-style: normal;
    font-weight: 500;
    src: local(''),
    url('font/inter-v3-latin-ext-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-600 - latin-ext */
@font-face {
    font-family: 'Inter-semibold';
    font-style: normal;
    font-weight: 600;
    src: local(''),
    url('font/inter-v3-latin-ext-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-700 - latin-ext */
@font-face {
    font-family: 'Inter-bold';
    font-style: normal;
    font-weight: 700;
    src: local(''),
    url('font/inter-v3-latin-ext-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-800 - latin-ext */
@font-face {
    font-family: 'Inter-extrabold';
    font-style: normal;
    font-weight: 800;
    src: local(''),
    url('font/inter-v3-latin-ext-800.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-800.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* inter-900 - latin-ext */
@font-face {
    font-family: 'Inter-black';
    font-style: normal;
    font-weight: 900;
    src: local(''),
    url('font/inter-v3-latin-ext-900.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */ url('font/inter-v3-latin-ext-900.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* color tables */

#color-tables {
    /* main logo colors */
    color: #323232;
    color: #f05500;
    color: #ffcc00;
    color: #5aa02c;
    color: #00add2;
    color: #ab37c8;

    /* greyscale */
    color: #323232;
    color: #646464;
    color: #969696;
    color: #afafaf;
    color: #c8c8c8;

    /* dark */
    color: #b44000;
    color: #b49000;
    color: #4f8d27;
    color: #0094b4;
    color: #79278d;

    /* darker */
    color: #963500;
    color: #967800;
    color: #427620;
    color: #007b96;
    color: #652076;

    /* light */
    color: #ff772d;
    color: #ffd52d;
    color: #6ec436;
    color: #00cefa;
    color: #ba5ad2;

    /* lighter */
    color: #ff975f;
    color: #ffdf5f;
    color: #89d25a;
    color: #2ddaff;
    color: #ca81dd;

}

/* * * * * * * * * * * * Main structure / grid * * * * * * * * * * * * */

html {
    font-family: Inter-regular, helvetica, Arial, sans-serif;
    font-size: 16px;
}

body {
    margin: 0;
    background: white;
}

/* * * * * * * * * * * * Layout and breakpoint stuff * * * * * * * * * * * * */

/* One column grid for smallest screens */
article {
    margin: 0 auto;
    padding: 0 1.875rem;
    display: grid;
    grid-template-columns: 1fr;
}


#logo,
.logo-secondary {
    margin: 1.875rem 0 0;
    text-indent: -1000rem;
    width: 13.125rem;
    height: 2.856rem;
}

#main-menu {
    display: none;
}

#main-menu ul {
    padding: 0;
    list-style-type: none;
}

h1, h2 {
    font-size: 2rem;
    line-height: 2.2rem;
    font-family: Inter-black, "Arial Black", Helvetica, Arial, sans-serif;
    margin: 0 0 1rem;
    color: #323232;
}

h3 {
    font-size: 1.5rem;
    font-family: Inter-black, "Arial Black", Helvetica, Arial, sans-serif;
    margin: 0 0 .70rem;
    color: #323232;
}

p {
    font-family: Inter-light, Helvetica, Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    margin: 0 0 2rem;
}

header p,
header ol,
footer p {
    font-size: 1.5rem;
    line-height: 2.4rem;
    color: #323232;
}

/* * * * * * * * * * * * What * * * * * * * * * * * * */

#what {
    min-height: 20rem;
    background: transparent url("../img/illustration-what.png") no-repeat 0 bottom;
}

#what article {
    padding-top: 3rem;
}

/* * * * * * * * * * * * How * * * * * * * * * * * * */

#how {
    background-color: #00add2;
    padding: 2rem 0 4.5rem 0;
}

#how h2,
#how h3 {
    color: white;
}

#how article a.contact {
    color: #323232;
    background-color: #ffcc00;
}

/* * * * * * * * * * * * #why * * * * * * * * * * * * */

#why {
    padding-bottom: 2rem;
}

#why header {
    padding-top: 2rem;
}

body > footer {
    padding-bottom: 2rem;
}

/**
    we probably don't need these,
    but let's keep m around for reference

    @media (min-width: 640px) {}
    @media (min-width: 768px) {}
    @media (min-width: 1024px) {}
**/

@media (min-width: 888px) {
    #what {
        /*
            Pull the #what section to the top of the page
            using a negative margin so we can have the
            illustration below the header
        */
        margin-top: -6.2rem;
        padding-top: 6.2rem;
        padding-bottom: 2rem;
        background: transparent url("../img/illustration-what.png") no-repeat center bottom;
    }
}

@media (min-width: 1280px) {

    /* * * * * * * * * * * * Typography * * * * * * * * * * * * */

    h1, h2 {
        font-size: 2.67rem;
        line-height: 3.337rem;
        font-family: Inter-black, "Arial Black", Helvetica, Arial, sans-serif;
    }

    h3 {
        font-size: 2rem;
        font-family: Inter-black, "Arial Black", Helvetica, Arial, sans-serif;
    }

    header p,
    footer p {
        font-size: 1.5rem;
        line-height: 2.4rem;
        color: #323232;
    }

    /* Menu links are special */
    nav a:link,
    nav a:visited {
        color: #323232;
        text-decoration: none;
    }

    nav a:hover,
    nav a:active {
        color: #0094b4;
        text-decoration: underline;
    }

    /* 12 column grid: on large screens will be max 1410px, 90px columns with 30px track */
    article {
        margin: 0 auto;
        padding: 0 1.875rem;
        display: grid;
        max-width: 88.125rem;
        column-gap: 1.875rem;
        grid-template-columns: repeat(12, 1fr);
    }

    /* * * * * * * * * * * * Header * * * * * * * * * * * * */
    #logo,
    .logo-secondary {
        grid-column: 1 / span 3;
    }

    #logo {
        margin: 3.313rem 0 0;
    }

    #main-menu li {
        padding-right: 1.563rem;
        white-space: nowrap;
    }

    #main-menu {
        display: block;
        grid-column: 4 / span 8;

    }

    #main-menu ul {
        margin: 4rem 0 0;
        display: flex;
        justify-content: flex-end;
    }

    /* * * * * * * * * * * * What * * * * * * * * * * * * */

    #what {
        /*
            Pull the #what section to the top of the page
            using a negative margin so we can have the
            illustration below the header
        */
        margin-top: -6.2rem;
        padding-top: 17.27rem;
        padding-bottom: 0;
        min-height: 41.15rem;
        background: transparent url("../img/illustration-what.png") no-repeat center top;
    }

    #what article header {
        grid-column: 1 / span 4;
    }

    /* * * * * * * * * * * * How * * * * * * * * * * * * */
    #how article header,
    #how article footer {
        grid-column: 1 / span 6;
    }

    .course {
        grid-column: 1 / span 6;
    }

    #how article a.contact {
        grid-column: 4 / span 3;

    }

    #how article footer p,
    .course p {
        font-size: 1.3rem;
        line-height: 2rem;
    }

    /* * * * * * * * * * * * How * * * * * * * * * * * * */

    #how {
        padding-top: 4.69rem;
        padding-bottom: 4rem;
    }

    #how article {
        background: transparent url("../img/illustration-how.png") no-repeat right center;
    }

    /* * * * * * * * * * * * Why * * * * * * * * * * * * */
    #why header {
        grid-column: 1 / span 12;
    }

    .begin {
        grid-column: 1 / span 4;
    }

    .middle {
        grid-column: 5 / span 4;
    }

    .end {
        grid-column: 9 / span 4;
    }

    #why header {
        padding-top: 10rem;
    }

    .better-faster-stronger {
        margin-top: 3rem;
    }

    .better-faster-stronger p {
        color: #323232;
        font-size: 1.3rem;
        line-height: 2rem;
    }

    #why {
        background: white url("../img/illustration-why.png") no-repeat bottom center;
        padding-bottom: 39rem;
    }


    /* * * * * * * * * * * * Who * * * * * * * * * * * * */
    #who article header,
    #who article footer {
        grid-column: 1 / span 12;
    }

    .first {
        grid-column: 1 / span 6;
    }

    .last {
        grid-column: 7 / span 6;
    }

    #socials {
        grid-column: 1 / span 3;
    }

    .credits {
        grid-column: 10/ span 3;
    }

    .person p {
        color: #323232;
        font-size: 1.3rem;
        line-height: 2rem;
    }

    body > footer {
        min-height: 20rem;
    }

}


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

#logo {
    background-image: url("../img/logo.svg");
}


/* * * * * * * * * * * * Widget * * * * * * * * * * * * */

.logo-secondary {
    margin-top: -2.5rem;
    background-image: url("../img/logo-dia.svg");

}

a.contact:link,
a.contact:visited,
a.contact:hover,
a.contact:active {
    display: block;
    max-width: 17rem;
    text-align: center;
    font-size: 2rem;
    font-family: Inter-black, "Arial Black", Helvetica, Arial, sans-serif;
    text-decoration: none;
    padding: .5rem 0;
}


a:link,
a:visited {
    color: #323232;
}

a:hover,
a:active {
    color: #0094b4;
}
/* * * * * * * * * * * * What * * * * * * * * * * * * */

#what header {
    max-width: 25rem;
}

/* * * * * * * * * * * * Why * * * * * * * * * * * * */


#why .contact {
    color: white;
    background-color: #5aa02c;
}


/* * * * * * * * * * * * Who * * * * * * * * * * * * */

#who h2,
#people h3 {
    color: white;
}

#who {
    padding: 3rem 0 2rem;
    background-color: #6ec436;
}


#people {
    padding: 2.5rem 0;
    background-color: #89d25a;
    border-bottom: #6ec436 solid 5rem;
}

.cert {
    margin: 0;
    padding: 2rem 0;
    list-style-type: none;
    display: flex;
}

.cert li {
    padding-right: 1rem;
}

/* * * * * * * * * * * * Who * * * * * * * * * * * * */

#socials {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
}

#socials li a {
    padding-top: 3.5rem;
    padding-left: .38rem;
    padding-right: .38rem;
    display: block;
    text-indent: -1000rem;
    width: 1.88rem;
    height: 1.88rem;
}

.mail {
    background: transparent url("../img/gmail.svg") no-repeat center center;
}

.twitter {
    background: transparent url("../img/twitter.svg") no-repeat center center;
}

.linkedin {
    background: transparent url("../img/linkedin.svg") no-repeat center center;
}

.youtube {
    background: transparent url("../img/youtube.svg") no-repeat center center;
}

.instagram {
    background: transparent url("../img/instagram.svg") no-repeat center center;
}

p.credits {
    margin: 0;
    padding-top: 2rem;
    font-family: Inter-regular, Arial, Helvetica, sans-serif;
    font-size: .955rem;
    text-align: right;
}