/* -----------------------------

    Base Sizes:
        2rem = 32px
        1.5rem = 24px

----------------------------- */



/* Variables
----------------------------- */

    :root {
        --home-bg-color: #006794;
        --write-bg-color: #8BB8C6;
        --font-color: #000E2F;
        --speak-bg-color: #042747;
        --speak-font-color: #fff;
        --ellis-bg-color: #C8D3D1;
        --ellis-font-color: ;
        --ellis-button-color: #B25010;
        }



/* Reset
----------------------------- */

    *, *::before, *::after { box-sizing: border-box; }
    *:not(dialog) { margin: 0; }
    body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
    img, picture, video, canvas, svg { display: block; max-width: 100%; }
    input, button, textarea, select { font: inherit; }
    p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
    p { text-wrap: pretty; }
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    li { list-style: none; }
    ul { padding: 0; margin: 0; }


/* Globals
----------------------------- */

    .is-screenreader {
        position: absolute;
        left: -10000px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
        }


/* Typography
----------------------------- */

    h1, h2, h3, h4, h5, h6, .nav a, .nav span, 
    footer small, .message a, .contact__form, button { 
        font-family: "Montserrat", sans-serif;
        font-optical-sizing: auto;
        font-weight: 400;
        font-style: normal;
        }

    h1 {
        font-size: 2.1rem;
        line-height: 2.6rem;
        padding-bottom: 3rem;
        letter-spacing: -2%;
        }
        
    h2 {
        font-size: 1.8rem;
        line-height: 2.1rem;
        padding-bottom: 2rem;
        letter-spacing: -2%;
        }

    p, span, a, .contact__form [type="submit"] {
        font-family: "Montserrat", sans-serif;
        font-weight: 400;
        font-style: normal;
        font-size: 1.2rem;
        }

    p {
        line-height: 2.2rem;
        text-indent: 10%;
        }

    a {
        color: var(--font-color);
        }

    a, button { 
    	text-decoration: none;  
    	-o-transition: all .3s linear;
        -moz-transition: all .3s linear;
        -khtml-transition: all .3s linear;
        -webkit-transition: all .3s linear;
        -ms-transition: all .3s linear;
        transition: all .3s linear; 
        cursor: pointer;
    	}
    	
	a:hover { 
        opacity: .8; 
        }

    .home a { 
        text-decoration: none; 
        color: #fff; 
        font-size: 1.5rem;
        }

    .speak a, footer a {
        color: var(--speak-font-color);
        }

    .nav a, .nav span {
        font-size: 1.2rem;
        text-decoration: none;
        }

    .nav__list__item span {
        font-weight: 600;
        }

        @media only screen and (min-width: 30em) { /* ~ 480px */
            
            h2 { padding-bottom: 1.4rem; }

            }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */ 
            h1 {
                font-size: 3rem;
                line-height: 3.5rem;
                padding-bottom: 12%;
                letter-spacing: -2%;
                }

            h2 {
                font-size: 2.3rem;
                line-height: 2.6rem;
                padding-bottom: 6%;
                letter-spacing: -2%;
                }

            p, span, a {
                font-size: 1.2rem;
                }

            p {
                line-height: 2.6rem;
                }
            }


/* Home
----------------------------- */

    .home, .thanks { background: url(../img/home-bg.jpg) var(--home-bg-color) top center / cover no-repeat; margin: 0; padding: 0; }
    .home .page { background: url(../img/home.png) 55% 150px  / 290px no-repeat; width: 100vw; height: 100vh; }
    .home .nav { width: 200px; margin: 0 auto; padding: 290px 0 200px; }
    .home .nav__list { width: 100%; }
    .home .nav__list__item { display: block; padding-bottom: 5px; }

        @media only screen and (min-width: 30em) { /* ~ 480px */
            .home .page { background: url(../img/home.png) 50% 50px / 350px no-repeat; width:inherit; height: inherit; }
            .home .nav { padding: 225px 0 75px; }
        }

        @media only screen and (min-width: 48em) { /* ~ 768px */
            .home .page { background: url(../img/home.png) 50% 100px / 500px no-repeat; width: 100vw; height: 100vh; }
            .home .nav { padding: 325px 0; }
        }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .home .page { width:inherit; height: inherit; }
            .home .nav, .home .nav__list { display: block; }
        }

        @media only screen and (min-width: 68.75em) { /* ~ 1100px */
            .home, .thanks { background: url(../img/home-bg.jpg) var(--home-bg-color) bottom center / cover no-repeat; }
            .home .page { background: url(../img/home.png) 50% 100px / 900px no-repeat; }
            .home .nav { min-width: 325px; width: 450px; padding: 500px 0 500px; }
            .home .nav__list { }
        }


/* Page
----------------------------- */

    .write {
        background-color: var(--write-bg-color);
        /* background: url(../img/write.jpg) bottom left / 170% no-repeat; */
        }

    .write .page {
        color: var(--font-color);
        background: url(../img/write.jpg) 48% 5% / 195% no-repeat;
         }

    .speak {
        background-color: var(--speak-bg-color);
        background: url(../img/speak.jpg) var(--speak-bg-color) 0 0 / cover no-repeat;
        }

    .speak .page {
        color: var(--speak-font-color);
        background: url(../img/speak.jpg) 38% 100% / 180% no-repeat;
        }

    .design {
        background-color: var(--write-bg-color);
        /* background: url(../img/design.jpg) center left / 170% no-repeat; */
        }

    .design .page {
        color: var(--font-color);
        background: url(../img/design.jpg) 56% 100% / 280% no-repeat;
        }

    .design .linkedin {
        font-size: 3rem;
        padding-top: 20%;
        }

    footer {
        background: url(../img/home-bg.jpg) var(--home-bg-color) bottom right / cover no-repeat;
        padding: 25% 0;
        color: var(--speak-font-color);
        }

    footer .nav {
        padding: 0% 10% 0 10%;
        display: block;
        }

    footer .nav__list {  
        display: block;
        width: 50%;
        margin: 0 auto 75px;
        }

    footer .nav__list__item {  
        text-align: center;
        }

    footer .nav > small {
        display: block;
        margin-bottom: 0;
        width: 100%;
        text-align: center;
        }
    
    footer .logo {
        display: block;
        width: 40%;
        margin: 0 auto 5%;
        }
    
    footer .logo img {
        width: 200px;
        margin: 0 auto;
        }

        @media only screen and (min-width: 30em) { /* ~ 480px */

            
            .write .page {
                background: url(../img/write.jpg) 50% 15% / 100% no-repeat;
                }

            .speak .page {
                background: url(../img/speak.jpg) bottom center / 110% no-repeat;
                }

            .design .page {
                background: url(../img/design.jpg) bottom center / 140% no-repeat;
                }

            .design .linkedin {
                padding-top: 10%;
                }
                
            footer {
                padding: 10% 30%;
                }
        
            }
    
        @media only screen and (min-width: 37.5em) { /* ~ 600px */
            .page, .contact, footer {
                max-width: 1100px;
                position: relative;
                margin: 0 auto;
                }
            
                }
        
        @media only screen and (min-width: 56.25em) { /* ~ 900px */

            
            .write .page {
                background: url(../img/write.jpg) top center / 100% no-repeat;
                }

            .speak {
                background-color: var(--speak-bg-color);
                background: url(../img/speak.jpg) var(--speak-bg-color) 0 0 / 300% no-repeat;
                }

            .speak .page {
                background: url(../img/speak.jpg) bottom center / 100% no-repeat;
                }

            .design .page {
                background: url(../img/design.jpg) bottom center / 100% no-repeat;
                }
            
            footer {
                background-attachment: fixed;
                backdrop-filter: blur(4px);
                padding: 5% 0;
                }

            }
        

/* 404
----------------------------- */

        .four-oh-four {
            display: flex; 
            align-items: center; 
            justify-content: center;
            background: url(../img/404.jpg) var(--home-bg-color) top center / cover no-repeat;
            overflow: hidden;
            margin: 0; padding: 0;
            height: 100vh;
            width: 100vw;
            color: var(--speak-font-color);
            }

        .four-oh-four .message h1 {
            font-size: 2.5rem;
            font-weight: 800;
            padding-bottom: 20px;
            }

        .four-oh-four .logo > img {
            margin-bottom: 75px;
            }
        
        .four-oh-four p {
            padding-bottom: 10px;
            }
        
        .four-oh-four p,
        .four-oh-four a {
            font-size: .9rem;
            line-height: 1.3rem;
            text-indent: 0;
            }

            @media only screen and (min-width: 56.25em) { /* ~ 900px */
                .four-oh-four .message {
                    display: block;
                    }
                }


/* Thanks
----------------------------- */

        .thanks {
            display: flex; 
            align-items: center; 
            justify-content: center;
            color: var(--speak-font-color);
            height: 100vh;
            width: 100vw;
            }

        .message {
            width: 80%;
            }

        .message .logo img {
            width: 100px;
            margin-bottom: 25px;
            }

        .message h1 {
            font-size: 1.5rem;
            line-height: 2rem;
            padding-bottom: 20px;
            letter-spacing: -2%;
            }
        

        .message a {
            color: var(--speak-font-color);
            }

            @media only screen and (min-width: 56.25em) { /* ~ 900px */
                
                .message {
                    max-width: 30%;
                    }

                .message .logo img {
                    width: 150px;
                    margin-bottom: 50px;
                    }

                .message h1 {
                    font-size: 2rem;
                    line-height: 2.5rem;
                    padding-bottom: 50px;
                    letter-spacing: -2%;
                    }
            
                }

/* Article
----------------------------- */

    article {
        width: 80%;
        padding: 0 0 25% 10%;
        }

    .cite {
        display: block;
        text-align: right;
        padding: 0 0 25%;
        }

    .cite span {
        display: block;
        font-style: italic;
        font-size: 1rem;
        }

        @media only screen and (min-width: 30em) { /* ~ 480px */
            
            article {
                width: 60%;
                padding: 0 0 10% 10%;
                }

            .speak article {
                padding-bottom: 20%;
                }

            .cite {
                padding-bottom: 10%;
                }


            }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            
            article {
                width: 60%;
                padding: 0 0 20% 10%;
                }
            
            }


/* Navigation
----------------------------- */

    .nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 50px 10% 35% 10%;
        }

    .nav__list {
        width: 45%;
        }

    .logo img {  
        width: 80px;
        }

        @media only screen and (min-width: 30em) { /* ~ 480px */

            .nav {
                padding-bottom: 15%;
                }

            }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            
            .nav, .nav__list {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                }

            .nav {
                padding: 100px 10% 15% 10%;
                }

            .nav__list {
                width: 40%;
                }

            footer .nav { display: flex; flex-wrap: nowrap; justify-content: space-evenly; align-items: center; }
            footer .nav > * { width: 30% !important; margin: 0; }

            }

/* Contact
----------------------------- */

    .contact {
        padding: 20% 10%;
        background-color: var(--write-bg-color);
        background: url(../img/contact-bg.jpg) top left / cover no-repeat;
        color: var(--speak-font-color);
        }

    .contact > div {
        margin-bottom: 20%;
        }

    .contact__form {
        font-size: .9rem;
        }

    .contact p {
        line-height: 2.2rem;
        text-indent: 0;
        padding-bottom: 8%;
        }

    .contact__form label {
        color: var(--speak-font-color);
        display: block;
        padding-bottom: 5px;
        }
    
    .contact__form input[type="text"],
    .contact__form input[type="email"],
    .contact__form textarea {
        border: 0 none;
        padding: 10px;
        margin-bottom: 15px;
        display: block;
        }

    .contact__form input[type="text"],
    .contact__form input[type="email"] {
        width: 100%;
        }

    .contact__form textarea {
        width: 100%;
        }

    .contact__form [type="submit"] {
        display: block;
        border: 0;
        padding: 10px 30px;
        background-color: var(--home-bg-color);
        color: var(--speak-font-color);
        }

        @media only screen and (min-width: 30em) { /* ~ 480px */
            
            .contact {
                padding: 10% 30%;
                }
        
            }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .contact {
                padding: 5%;
                background: url(../img/speak.jpg) top left / 150% no-repeat;
                background-attachment: fixed;
                backdrop-filter: blur(4px);
                }
            
            .contact > div {
                width: 40%;
                margin-bottom: 0;
                } 

            .contact p {
                line-height: 2.3rem;
                }
                
            .contact__form {
                width: 45%;
                font-size: .9rem;
                }

            .contact__form input[type="text"],
            .contact__form input[type="email"] {
                width: 60%;
                }
            }

/* Ellis
----------------------------- */

    .ellis {
        background-color: var(--ellis-bg-color);
        background: url(../img/ellis.jpg) var(--speak-bg-color) 100% 0% / 390% no-repeat;
        }

    .ellis nav,
    .ellis section {
        width: 100%;    
        }

    .ellis .nav {
        padding-bottom: 3%;
        justify-content: flex-end;
        }

    .ellis .nav a {
        color: var(--speak-font-color);
        }

    .ellis h1 {
        padding-bottom: 1.5rem;
        }
    
    .ellis .hero article {
        padding: 5% 10% 20% 10%;
        width: 100%;
        } 

    .ellis .action { display: none; }
    
    .ellis .content { margin-bottom: 20%; }

    .cover {
        object-fit: contain;
        margin: 0 auto;
        }

    .button, audio { display: block; margin: 0 auto 25px; }

    .ellis .button {
        display: block;
        background-color: var(--ellis-button-color);
        color: white;
        padding: 15px;
        border-radius: 10px;
        text-align: center;
        max-width: 300px;
        }

    .button svg { font-size: 1.4rem; padding-right: 5px; }

        @media only screen and (min-width: 37.5em) { /* ~ 600px */
            
            .ellis {
                background: url(../img/ellis.jpg) var(--speak-bg-color) 100% 0% / 300% no-repeat;
                }

            .ellis .hero article {
                padding: 5% 10% 10% 10%;
                }
            
            }

        @media only screen and (min-width: 48em) { /* ~ 768px */
            
            .ellis {
                background: url(../img/ellis.jpg) var(--speak-bg-color) 100% 0% / 200% no-repeat;
                }
            }

        @media only screen and (min-width: 56.25em) { /* ~ 900px */
            .ellis {
                background: url(../img/ellis.jpg) var(--speak-bg-color) top right / 120% no-repeat;
                }
            
            .ellis nav,
            .ellis .hero {
                max-width: 900px;
                margin: 0 auto;
                }

            .ellis .nav { padding: 50px 3% 3% 3%; width: 100%; }

            .ellis h1 {
                padding-bottom: 1.8rem;
                }

            .ellis .hero > * { width: 48% !important; }

            .ellis .hero article {
                padding: 25% 0 10%;
                }

            .ellis .action { display: block; }
            .ellis .content { display: none; }
            
            section {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                align-items: flex-start;
                }
            }

        @media only screen and (min-width: 68.75em) { /* ~ 1100px */
            .ellis { background-size: 100%; }
            }