@font-face {
    font-family: Monstsrrat;
    src: url("../font/monst-semi.ttf");
}

html {
    scroll-behavior: smooth;
    margin: 0;
    padding: 0
}

* {
    color: #eeeeee;
    font-family: 'Montserrat', sans-serif;
}

body {
    background-color: #050505;
    overflow-y: scroll;
    padding: 0;
    margin: 0;
    width: 100%;
}

.master-container {
    margin: 10px auto;
    padding: 75px;
    max-width: 1400px;
}

.title {
    float: left;
    margin-left: 1vmin;
}

.title h1 {
    font-size: 4vmin;
    font-weight: bold;
    margin-bottom: 1vmin;
    margin-top: 0;
}

.title h2 {
    font-size: 1.5vmin;
    margin-top: 0;
    text-align: center;
}

.icons {
    float: right;
    width: 4vmin;
    margin-top: 0.65%;
    margin-right: 2%;
}

.showreel {
    width: 100%;
    height: 60vmin;
}

.client-area {
    text-align: center;
    margin-top: 30vmin;
}

.thin-title {
    font-weight: 100;
    margin-top: 4%;
    margin-bottom: 1.5%;
    text-align: center;
}

.client-area h2 {
    font-size: 1.5vmin;
    margin-top: 0;
}

.client-area h2 a {
    color: inherit;
    cursor: pointer;
}

.client-area h2 a:hover {
    text-decoration: underline
}

.video-grid {
    margin-top: 8vmin;
    margin-bottom: 12vmin;
    width: 50%
}

.video-grid .row {
    height: 35vmin;
}

.video-grid .row .video-container {
    height: 100%;
}

.video-grid-paragraph {
    font-size: 2vmin;
}

.video-container iframe {
    margin: 2%;
    width: 96%;
}

.quote-area {
    margin-top: 8vmin;
}

#result {
    text-align: center;
    font-weight: 200;
}

.text-container {
    margin-top: 1%;
    display: inline-block;
}

.text-container h2 {
    /* text-align: center; */
}

.features-text {
    width: 100%;
}

.features-text ul {
    width: 50%;
    float: left;
    text-align: center;
}

.features-text ul li {
    list-style-type: none;
    margin-top: 2%;
    font-size: 2.5vmin;
    letter-spacing: 0.2vmin;
    font-weight: 300;
}

.title-item {
    font-size: 4vmin;
    text-align: center;
}

.quote {
    font-style: italic;
    font-weight: 300;
}

/* Media Query Section */

@media only screen and (max-width: 1200px) {
    .title {
        text-align: center;
        width: 100%
    }

    .title h1 {
        /* font-size: 5vmin; */
    }

    .title h2 {
        /* font-size: 2vmin; */
    }

    #twitter-icon {
        display: none;
    }

    .nav-list {
        display: none;
    }

    nav a {
        display: none;
    }
}

@media only screen and (max-height: 900px) {
    .client-area h2 {
        font-size: 2vmin;
    }
}

@media only screen and (max-height: 700px) {
    .client-area h2 {
        font-size: 3vmin;
    }
}

nav {
    background-color: #34495e;
}

#navbar {
    position: sticky;
    top: 0;
    left: 0;
    z-index: 100;
    height: 8vmin;
    padding: 0.5vmin;
    background-color: #2a2a2a;
}

.scrollToOffset {
    padding-top: 3em;
    margin-top: -2em;
}

hr {
    width: 50%;
    position: relative;
    top: 2em;
}

.video-grid-text {
    width: 48%;
    float: right;
    padding: 3%;
}

.video-grid-text h2 {
    margin-top: 1%;
}

.video-grid-text a {
    color: white;
}

.nav-list {
    margin-left: 40%
}

.nav-list li a {
    line-height: 6vmin;
}

.workarea {
    float: left;
    width: 100%;
}

.brand-integration-area img {
    width: 60%;
}

.brands li img{
    width:27%;
    float:left;
    margin-left:8vmin;
}