html, body {
    margin: 0;
    padding: 0;
    font-weight: 100;
    font-style: normal;
    background-color: #000000;
}

a {
	color: #ffffff;
	text-decoration: none;
}

.box {
    height: 100vh;
    margin: 0;
    padding: 0;
}

.hidden {
    display: none;
}

.dark-navy {
    color: #09112f;
}

/* Logo */

@media only screen and (min-width: 601px) {
    .main-logo {
        position: relative;
    }
    .mobile-logo {
        display: none;
    }
}

@media only screen and (max-width: 600px) {
    .main-logo {
        display: none;
    }
    .mobile-logo {
        padding-top: 25px;
        position: relative;
    }
}

/* Welcome Screen */

@media only screen and (min-width: 601px) {
    .welcome-container {
        background-color: #000000;
        min-height: 100vh;
        padding-left: 140px;
        padding-right: 0;
        padding-top: 50px;
        padding-bottom: 0;
        margin: 0;
    }

    .headline {
        line-height: 45px;
        letter-spacing: -1px
    }

    .show-mobile {
        display: none;
    }

    .welcome-container > div > p {
        font-size: 44px;
        color: #ffffff;
        padding: 0;
        margin: 0;
    }

    .welcome-container .small {
        font-size: 23px;
        color: #ffffff;
    }

    .welcome-container .small a {
        border-bottom: #F1C40F 2px solid;
    }

    .welcome-container .white {
        font-size: 23px;
        color: #F1C40F;
    }
}

@media only screen and (max-width: 600px) {
    .welcome-container {
        padding-left: 35px;
        padding-right: 35px;
        padding-top: 0;
        padding-bottom: 0;
        margin: 0;
    }

    .headline {
        line-height: 34px;
        letter-spacing: -1px
    }

    .hide-mobile {
        display: none;
    }

    .welcome-container > div > p {
        font-size: 37px;
        color: #ffffff;
        
    }

    .welcome-container .small {
        font-size: 23px;
        color: #ffffff;
    }

    .welcome-container .small a {
        border-bottom: white 2px solid;
    }

    .welcome-container .white {
        font-size: 23px;
        color: #F1C40F;
    }
}

/* WORK SCREEN */

@media only screen and (min-width: 601px) {
    .our-work-container {
        background-color: #ffffff;
        padding-left: 140px;
        padding-right: 0;
        padding-top: 80px;
        padding-bottom: 120px;
        margin: 0;
    }

    .our-work-container > div > p {
        font-size: 22px;
        line-height: 25px;
        margin: 0;
        padding: 0;
        color: #ffffff;
    }

    .grid-row {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .mobile-block {
        font-size: 20px;
        padding-left: 5px;
        font-family: neue-haas-grotesk-display,sans-serif;
        font-weight: 300;
        font-style: normal;
    }

    .client_name {
        font-size: 50px;
    }
    
    .our-work-container a:hover {
        text-decoration: underline;
        text-underline-offset: 0.1em;
        text-decoration-color: #000000;
        text-decoration-thickness: 3px;
    }
}

@media only screen and (max-width: 600px) {
    .our-work-container {
        background-color: #ffffff;
        padding-left: 35px;
        padding-right: 35px;
        padding-top: 35px;
        padding-bottom: 30px;
        margin: 0;
    }

    .our-work-container > div > p {
        font-size: 22px;
        line-height: 25px;
        margin: 0;
        padding: 0;
        color: #000000;
    }

    .grid-row {
        width: 100%;
        margin: 0;
        padding-bottom: 10px;
    }

    .client_name {
        font-size: 30px;
        line-height: 30px;
    }

    .mobile-block {
        display: block;
        padding: 0;
        margin: 0;
        line-height: 13px;
        font-size: 13px;
        padding-left: 0px;

        font-family: neue-haas-grotesk-display, sans-serif;
        font-weight: 500;
        font-style: normal;

    }
    
    .our-work-container a:hover {
        text-decoration: none;
    }
}

/* FOOTER */

@media only screen and (min-width: 601px) {
    .footer {
        height: 50px;
        padding-left: 140px;
        padding-top:35px;
        background-color: #000000;
    }
    
}

@media only screen and (max-width: 600px) {
    .footer {
        height: 50px;
        padding-left: 35px;
        padding-top:35px;
        background-color: #000000;
    }
} 


/*** FONTS ***/

.font-15-ultra-thin {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 100;
font-style: normal;
}

.font-15-ultra-thin-italic {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 100;
font-style: italic;
}

.font-25-thin {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 200;
font-style: normal;
}

.font-26-thin-italic {
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 200;
font-style: italic;
}

.font-35-extra-light {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 300;
font-style: normal;
}

.font-36-extra-light-italic {
font-family: neue-haas-grotesk-display, sans-serif;
font-weight: 200;
font-style: italic;
}

.font-45-light {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 400;
font-style: normal;
}

.font-46-light-italic {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 400;
font-style: italic;
}

.font-55-roman {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 500;
font-style: normal;
}

.font-56-italic {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 500;
font-style: italic;
}

.font-65-medium {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 600;
font-style: normal;
}

.font-66-medium {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 600;
font-style: italic;
}

.font-75-bold {
font-family: neue-haas-grotesk-display,sans-serif;
font-weight: 700;
font-style: normal;
}

.white {
    color: #0028db;
}