.flex-start {
    display: flex;
    flex-wrap: wrap;
}

.primary-banner {
    width: 55.26vw;
    height: auto;
    margin-right: 1.25vw;
}

.primary-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info-box {
    width: 17.44vw;
    align-self: flex-end;
}

.project-title {
    font-weight: 600;
    font-size: calc(30px * .75);
    line-height: calc(36px * .75);
    color: #2E2828;
    text-transform: uppercase;
}

.project-type {
    font-size: calc(20px * .75);
    line-height: calc(24px * .75);
    margin-top: .46vw;
    color: #727272;
}

.project-description {
    width: 55.41vw;
    margin-top: 2.03vw;
    padding-top: 1.14vw;
    padding-bottom: 4.58vw;
    padding-left: 2.35vw;
    border-left: 1px solid #3C3838;
    font-size: calc(20px * .75);
    line-height: calc(30px * .75);
    color: #727272;
}

.flex-end {
    display: flex;
    justify-content: flex-end;
}

.secondary-banner {
    width: 43.02vw;
    height: auto;
    margin-top: 1.3vw;
}

.secondary-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 3.22vw;
    margin-bottom: 8.9vw;
}

.gallery-item {
    width: 36.51vw;
    height: 22.55vw;
    margin-left: .42vw;
    margin-bottom: .42vw;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-gallery {
    width: 100vw;
    height: 100vh;
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999999999999999999999999;
}

.backdrop-over {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,.75);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000000000000000000000000;
}

.center__i {
    position: relative;
    z-index: 100000000000000000000000001;
}

.modal-gallery.show {
    display: block;
}

.modal-gallery img {
    width: 70%;
    height: 70%;
    margin: 15vh 15vw;
    object-fit: contain;
}

.page-project-detail img:hover {
    cursor: pointer;
}

.gallery-container {
    width: 70%;
    height: 70%;
    margin: 15vh 15vw;
}

.slide-container {
    position: relative;
}

.close-modal-btn {
    color: #fff;
    position: absolute;
    top: -15px;
    right: -15px;
    transition: all .15s;
}

.close-modal-btn:hover {
    color: #D2A460;
    cursor: pointer;
}

div>.each-slide>div {
    width: 0vw;
    height: 0vh;
    background-repeat: no-repeat;
    background-size: cover;
}

.active>.each-slide>div {
    width: 70vw;
    height: 70vh;
}

.each-slide--image {
    background-size: contain!important;
    background-position: center center;
}

@media only screen and (max-width: 565px) {
    .primary-banner {
        width: 100vw;
        margin: 0;
    }

    .primary-banner img{
        width: 100vw;
        height: auto;
        margin-left: -5.19vw;
    }

    .info-box {
        width: 100%;
        margin-top: 2.59vw;
    }

    .project-title {
        font-size: 16px;
        line-height: 19px;
    }

    .project-type {
        font-size: 14px;
        line-height: 17px;
        margin-top: 1.55vw;
    }

    .project-description {
        width: calc(100% - 7.35vw);
        margin-top: 5.71vw;
        padding-top: 3.63vw;
        padding-bottom: 8.83vw;
        padding-left: 7.35vw;
        font-size: 14px;
        line-height: 24px;
    }

    .secondary-banner {
        width: 64.67vw;
        height: auto;
        margin-top: 8.05vw;
    }

    .gallery {
        margin-top: 2.85vw;
        margin-bottom: 16.1vw;
    }

    .gallery-item {
        width: calc(50% - 2.07vw);
        height: 28.57vw;
        margin-left: 2.07vw;
        margin-bottom: 2.07vw;
    }
    
    .modal-gallery img {
        width: 90%;
        height: 90%;
        margin: 5vh 5vw;
    }

    .gallery-container {
        width: 90vw;
        height: 70vw;
        margin: 30vw 5vw;
    }

    .active>.each-slide>div {
        width: 100vw;
        height: 90vh;
        margin-top: -12vh;
        margin-left: -5vw;
    }

    .react-slideshow-wrapper.slide {
        overflow: unset;
    }

    /* .react-slideshow-container .nav,
    .react-slideshow-container + div.indicators {
        display: none!important;
    } */

    .react-slideshow-container .nav {
        position: fixed;
        top: calc(50vh - 15px);
    }

    div.indicators > div.active {
        background-color: #fff!important;
        width: 15px!important;
        height: 7px!important;
        border-radius: 3.5px!important;
    }

    .react-slideshow-container .nav[data-type="next"] {
        right: 5vw;
    }
    .react-slideshow-container .nav[data-type="prev"] {
        left: 5vw;
    }

    .backdrop-over {
        background-color: #000;
        pointer-events: none;
    }

    .close-modal-btn {
        width: 23px;
        height: 20px;
        padding: 4px 1px 2px 2px;
        background-color: #fff;
        border-radius: 50%;
        color: #000;
        position: fixed;
        top: 15px;
        right: 15px;
        transition: all .15s;
        text-align: center;
    }
}

@media only screen and (min-width: 566px) and (max-width: 767px) {
    .active>.each-slide>div {
        width: 100vw;
        height: 90vh;
        margin-top: -10vh;
        margin-left: -15vw;    
    }

    .react-slideshow-wrapper.slide {
        overflow: unset;
    }

    /* .react-slideshow-container .nav,
    .react-slideshow-container + div.indicators {
        display: none!important;
    } */

    .react-slideshow-container .nav {
        position: fixed;
        top: calc(50vh - 15px);
    }

    div.indicators > div.active {
        background-color: #fff!important;
        width: 15px!important;
        height: 7px!important;
        border-radius: 3.5px!important;
    }

    .react-slideshow-container .nav[data-type="next"] {
        right: 5vw;
    }
    .react-slideshow-container .nav[data-type="prev"] {
        left: 5vw;
    }

    .backdrop-over {
        background-color: #000;
        pointer-events: none;
    }

    .close-modal-btn {
        width: 23px;
        height: 20px;
        padding: 4px 1px 2px 2px;
        background-color: #fff;
        border-radius: 50%;
        color: #000;
        position: fixed;
        top: 15px;
        right: 15px;
        transition: all .15s;
        text-align: center;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
    .gallery-container {
        width: 90vw;
        height: 70vw;
        margin: 30vw 5vw;
    }

    .active>.each-slide>div {
        width: 90vw;
        height: 70vw;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) and (max-height: 768px) {
    .gallery-container {
        width: 90vw;
        height: 70vw;
        margin: 15vh 5vw;
    }

    .active>.each-slide>div {
        width: 90vw;
        height: 70vh;
    }
}

@media only screen and (min-width: 1600px) {
    .project-title {
        font-size: calc(30px * 1);
        line-height: calc(36px * 1);
    }
    
    .project-type {
        font-size: calc(20px * 1);
        line-height: calc(24px * 1);
    }
    
    .project-description {
        font-size: calc(20px * 1);
        line-height: calc(30px * 1);
    }
}