.main-home-container {
    max-width: 80vw;
    margin: auto;
}


.home__body-header-nav-container {
    display: flex;
    justify-content: center;
}

.home__director-container,
.home__designer-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 25px;
    margin: 25px auto;
}

.home__director--anchor,
.home__designer--anchor  {
    font-size: 46px;
    color: white;
    font-weight: bold;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    text-align: center;
    top: 40%;
}

.home__director--item,
.home__designer--item  {
    font-size: 46px;
}

.home__director--item-container,
.home__designer--item-container {
    height: 330px;
    display: flex;
    background-color: rgb(0, 0, 0);
    position: relative;
}

.home__director--item-container:hover {

}

.home__body-header-h2 {
    text-align: center;
    font-size: 46px;
    margin: 20px auto;    
}

.home__body-header-nav-item-container {
    font-size: 24px;
    padding: 10px;
}

.home__body-header-nav-item-container:hover {
    cursor: pointer;
}

#home-designer-toggle,
#home-director-toggle {
    color: #ff5200;
}

.home__director-inner-item-container {
    width: 100%;
    display: flex;
    /* background-color: black; */
    opacity: 0.2;
}

#home-director-gateway,
#home-director-monster,
#home-director-bird,
#home-director-evoo,
#home-director-colossal,
#home-director-jvc,
#home-director-sharperImage,
#home-director-epikLearning {
    background-position: center;
    background-size: 600px;
    transition: 0.5s ease-out;
}

#home-director-gateway:hover,
#home-director-monster:hover,
#home-director-bird:hover,
#home-director-evoo:hover,
#home-director-colossal:hover,
#home-director-jvc:hover,
#home-director-sharperImage:hover,
#home-director-epikLearning:hover {
    transition: 0.5s ease-in;
    background-size: 700px;
    border-radius: 5%;
    cursor: pointer;
}



#home-director-gateway {
    background-image: url(../images/work/gateway/work.jpg);
}

#home-director-monster {
    background-image: url(../images/work/monster/work.jpg);
}

#home-director-bird {
    background-image: url(../images/work/bird/work.jpg);
}

#home-director-evoo {
    background-image: url(../images/work/evoo/work.jpg);
}

#home-director-colossal {
    background-image: url(../images/work/colossal/work.jpg);
}

#home-director-jvc {
    background-image: url(../images/work/jvc/work.jpg);
}

#home-director-sharperImage {
    background-image: url(../images/work/sharper/work.jpg);
}

#home-director-colossalBlocks {
    background-image: url(../images/work/monster/work.jpg);
}

#home-director-epikLearning {
    background-image: url(../images/work/epik/work.jpg);
}





#home-designer-segway,
#home-designer-maskNglow,
#home-designer-monster,
#home-designer-hitachi,
#home-designer-vrTech {
    background-position: center;
    background-size: 600px;
    transition: 0.5s ease-out;
}

#home-designer-segway:hover,
#home-designer-maskNglow:hover,
#home-designer-monster:hover,
#home-designer-hitachi:hover,
#home-designer-vrTech:hover {
    transition: 0.5s ease-in;
    background-size: 700px;
    border-radius: 5%;
    cursor: pointer;
}


#home-designer-segway {
    background-image: url(../images/work/segway/work.jpg);
}

#home-designer-maskNglow {
    background-image: url(../images/work/maskNglow/work.jpg);
}

#home-designer-monster {
    background-image: url(../images/work/monster/work1.jpg);
}

#home-designer-hitachi {
    background-image: url(../images/work/hitachi/work.jpg);
}

#home-designer-vrTech {
    background-image: url(../images/work/vrTech/work.jpg);
}



/* DEVICE SCALING */

@media only screen and (max-width: 1100px){
    .home__director-container, 
    .home__designer-container {
        grid-template-columns: 1fr 1fr;
    }   
}

@media only screen and (max-width: 650px){
    .home__director-container, 
    .home__designer-container {
        grid-template-columns: 1fr;
    }   
}