@import url("https://use.typekit.net/ota5gmx.css");
@media screen and (min-width: 800px){
    

html{
font-family: 'greycliff-cf';
display: flex;
flex-direction: row;
overflow-y: hidden;
}

.home{
    display: flex;
    height: 100vh;
}

/*LEFT BAR*/
.leftbarmob{
    display: none;
}

.leftbar{
    max-width: 19.5vw;
    position: sticky;
    left: 0;
    background-color: white;
    padding-left: 1vw;
}

.leftbar #logo img{
    height: 4vw;
    align-self: start;
}

.leftbar h1{
    margin-top: 0;
    font-size: 5vh;
}

.leftbar h2{
    margin-bottom: 0;
    font-weight: 500;
    font-size: 3vh;
    color: #3e3e3e  ;
}

.leftbar p{
    color: #3e3e3e;
    font-size: 2vh;
}

.leftbar #leftbartext{
    padding-top: 30vh;
    max-width: 19.5vw;
}


.leftbar a{
    color: #3e3e3e;
    display: flex;
    flex-direction: column;
    font-size: 2vh;
}
.leftbar a:hover{
    color: #8a0303;
}

.leftbar #leftbarlink {
    padding-top: 17vh;
}

.leftbar #leftbarlink h3{
    font-size: 3vh;
    margin: auto;
    margin-bottom: .1vh;
    font-weight: 500;
}

/*HERO*/
.hero{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
    justify-content: center;
}

.hero a{
    margin: auto;
}

.hero #cta a{
    align-items: center;
    color: black;
    font-weight: 700;
    font-size: 3.5vh;
}

.hero #cta a:hover{
    color: #8a0303;
}

.hero img{
    height: 650px;
}

.hero h1{
    font-size: 10vh;
}

.hero #contactmob{
    display: none;
}
/*WORKS*/
.works{
    display: flex;
    flex-direction: column;
    width: 80vw;
}

.works h1{
    text-align: center;
    padding-top: 1vw;
    padding-bottom: 3vw;
    font-size: 5vh;
}
.workblocks{
    display: flex;
    flex-direction: row;
}
.works #blocks1{
    background-position: center;
    background-size: cover;
    width: 35vw;
    height: 15vh;
    background-image: url(images/pexels-photo-6923433.jpeg);
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.works #blocks1:hover{
    background-color: #8a0303;
    cursor: pointer;
}

.works #blocks2{
    background-position: center;
    background-size: cover;
    width: 35vw;
    height: 15vh;
    background-image: url(images/mgbackground.png);
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.works #blocks2img{
    width: auto;
}

.works #blocks2:hover{
    background-color: #8a0303;
    cursor: pointer;
}

.works #blocks3{
    background-position: center;
    background-size: cover;
    width: 35vw;
    height: 15vh;
    background-color: #9879da ;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.works #blocks3:hover{
    background-color: #f3c8e2;
    cursor: pointer;
}

.works #blocks4{
    background-position: center;
    background-size: cover;
    width: 35vw;
    height: 15vh;
    background-image: url(images/showcasewarp.png) ;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.works #blocks4:hover{
    background-color: #f3c8e2;
    cursor: pointer;
}

.works #blocks{
    background-position: center;
    background-size: cover;
    width: 35vw;
    height: 15vh;
    background-color: black ;
    margin-left: 2vw;
    margin-right: 2vw;
    margin-top: 1vh;
    margin-bottom: 1vh;
}

.works #blocks:hover{
    background-color: #8a0303;
    cursor: pointer;
}

.works #blocks h1{
    color: white;
    text-decoration: none;
}

.works a{
    text-decoration: 
    none;
}

.works img{
    display: flex;
    flex-direction: column;
    height: 13vh;
    margin: auto;
    padding-top: 1vh;
}

.reel{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 99vh;
    justify-content: center;
    align-items: center;
    padding-left: 5vw;
}

/*REELS*/
.reel{
    padding-right: 5vw;
}

.reel img{
    justify-content: center;
    height: 90vh;
    padding-left: 1vw;
    padding-right: 1vw;
}

.reel h1{
    font-size: 8vh;
}

.reel a{
    color: black;
}

.reelkarments{
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    height: 99vh;
    justify-content: center;
    align-items: center;
    margin-left: 5vw;
    overflow: none;
}
.reelkarments img{
    justify-content: center;
    align-items: center;
    margin: auto;
    width: 60vw;
    
}
}

/*MOB VIEW*/
@media screen and (max-width: 800px){
html{
    margin: 0;
    padding: 0;
    font-family: 'greycliff-cf';
}

body{
    margin: 0;
    padding: 0;
}

.hero #cta p{
    font-weight: 600;
}

.home{
    margin: 0;
    padding: 0;
}

.leftbar #logo img{
    height: 8vh;
    padding-top: 2vh;
    padding-bottom: 1vh;
}

.leftbar {
    display: flex;
    justify-content: center;
    text-align: center;
    align-items: center;
    position: sticky;
    top: 0;
}

.leftbar{
    display: flex;
    background-color: #bbbbbb;
}
.leftbar #leftbarlink , #leftbartext{
    display: none;
}

.hero{
    display: flex;
    flex-direction: column;
    padding-top: 10vh;
    padding-bottom: 10vh;
    justify-content: center;
    align-items: center;
}

.hero img{
    width: 70vw;
}

.hero p{
    font-size: 4vh;
    color: black;
}

.hero{
    text-align: center;
}

.hero #contactmob a{
    padding-left: .5vw;
    padding-right: .5vw;
    color: #3e3e3e;
    font-size: 2.75vh;
}

/*WORKS PAGE*/
    .works{
        max-width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        padding-top: 2vh;
        padding-left: 3vw;
        padding-right: 3vw;
    }

    .workblocks img{
        max-width: 50rem;
        max-height: 20vh;
        padding-top: 1vh;
        cursor: pointer;
    }

    .workblocks #blocks1{
        background-image: url(images/pexels-photo-6923433.jpeg);
        margin-bottom: 3vh;
        cursor: pointer;
        background-position: center;
        background-size: cover;
    }

    .workblocks #blocks2{
        background-image: url(images/mgbackground.png);
        margin-bottom: 3vh;
        background-position: center;
        background-size: cover;
    }

    .workblocks #blocks3{
        background-color: #9879da;
        margin-bottom: 3vh;
        background-position: center;
        background-size: cover;
    }

    .workblocks #blocks4{
        background-image: url(images/showcasewarp.png);
        margin-bottom: 3vh;
        background-position: center;
        background-size: cover;
    }

    .workblocks #blocks{
        background-color: black;
        max-width: 100vw;
        padding-top: 3vh;
        padding-bottom: 3vh;
        margin-bottom: 3vh;
        cursor: pointer;
    }

    .workblocks #blocks a{
        color: white;
        text-decoration: none;
        height: 30vh;
    }

    .workblocks #blocks:hover{
        background-color: #8a0303;
    }

    .reel{
        text-align: center;
    }
    .reel img{
       max-width: 90vw;
       padding-left: 5vw;
       padding-right: 5vw;
       margin-top: 3vh;
       align-items: center;
    }

    .leftbarmob{
        text-align: center;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .leftbarmob h2{
        margin-bottom: 0;
    }

    .leftbarmob h1{
        margin-top: 0;
        margin-bottom: 1vh;
    }

    .leftbarmob p{
        margin-top: 1vh;
    }

    .reelkarments img{
        max-width: 90vw;
        padding-left: 5vw;
        padding-right: 5vw;
        margin-top: 3vh;
        align-items: center;
    }
}