.wrapper {
    position: relative;
}

.office-page {
    margin-left  : 85px;
    display      : flex;
    width        : 90%;
    margin-bottom: 10vh;
    position     : relative;
}

.content-section {
    width     : 50%;
    margin-top: 35px;
    transition: all 1s ease;
}

.floor-content {
    margin-top: 20px;
}

.floor-content>p {
    font-size: 1rem;
    height   : 210px;
}

.floors-sec {
    position: relative;
    display: flex;
}

.floor-img-section img:nth-child(2) {
    width: 150px;
    align-self: flex-end;
    margin-right: 262px;
    margin-top: -38px;
    cursor: pointer;

}

.floor-img-section img:nth-child(1) {

    width     : 285px;
    align-self: flex-end;
    cursor    : pointer;
}

.floor-img-section {
    display       : flex;
    flex-direction: column;
    width         : 50%;
    align-self    : flex-start;
}

.nav-section {
    position   : relative;
    display    : flex;
    align-items: center;
}

.nav-section>div:nth-child(1) {
    width: 500px;
}

.nav-section .item {
    font-size  : 1rem;
    font-weight: 600;
    white-space: nowrap;
    cursor     : pointer;
    display    : inline-block;
    text-align : center;
    margin: 0px 5px;
    padding: 0px 5px;

}

.nav-section>a {
    margin: 0px 5px;
}

#underline {
    position  : absolute;
    height    : 1px;
    bottom    : 1px;
    z-index   : 0;
    border-top: 1.7px solid #f7941f;
    transition: all 0.3s ease;

}

.nav-section a img {
    width : 13px;
    cursor: pointer;
}

.modal {
    display         : none;
    height          : calc(100% + 5vh);
    position        : absolute;
    z-index         : 1;
    left            : 0;
    top             : 0;
    width           : 96%;
    margin-left     : 2%;
    overflow        : auto;
    background-color: rgba(0, 0, 0, 0.7);
}

.modal-content {
    background : transparent;
    margin     : auto;
    padding    : 20px;
    padding-top: 0px;
    height     : 90%;
}

.closeicon {
    width       : 25px;
    float       : right;
    padding     : 4px;
    margin-right: 13px;
    margin-top  : 12px;
    cursor      : pointer;
}

.close:hover,
.close:focus {
    color          : #000;
    text-decoration: none;
    cursor         : pointer;
}

.modal-images-sec {
    height         : 83%;
    display        : flex;
    justify-content: center;
    margin-bottom  : 25px;
}

.modal-img {
    height: 100%;
}

.left-arrow,
.right-arrow {
    height    : 49px;
    padding   : 10px;
    align-self: center;
    margin    : 0px 20px;
    cursor    : pointer;
}

.modal-content>p {
    text-align: center;
    font-size : 0.8rem;
    color     : #EEEFEB;
}

@media only screen and (max-width: 1080px) {
    .top-of-page {
        margin: 30px 0px 20px 40px;
    }

    .office-page {
        margin-left: 40px;
        width      : 94%;
    }
}

@media only screen and (max-width:1080px) {
    .modal {
        width : 100%;
        margin: 0px;
    }

    .office-page {
        flex-direction: column;
    }

    .content-section {
        width: 100%;
    }

    .floor-content>p {
        height: 150px;
        margin-bottom: 30px;
    }

    .floor-img-section {
        width     : 100%;
        margin-top: 30px;
    }

    .floor-img-section img:nth-child(1) {
        align-self: center;
    }

    .nav-section {
        width : 600px;
        margin: auto;
    }

    .floor-img-section img:nth-child(2) {
        margin-right: 424px;
        margin-top  : -93px;
        align-self  : center;
    }

    .modal-images-sec {
        height       : 50%;
        margin-top   : 100px;
        margin-bottom: 15px;
    }
}

@media only screen and (max-width:676px) {

    .office-page {
        padding-left: 31px;
        margin-left : 0px;
    }

    .top-of-page {
        margin-left : 0px;
        padding-left: 31px;
    }

    .floor-content>p {
        height: 235px;
        margin-bottom: 30px;
    }

    .modal-images-sec {
        height    : 40%;
        margin-top: 30%;
    }

    .floor-img-section img:nth-child(1) {
        width : 200px;
        height: 200px;
    }

    .floor-img-section img:nth-child(2) {
        width       : 100px;
        height      : 100px;
        margin-right: 315px;
        margin-top  : -75px;
    }

    .floors-sec {
        display   : flex;
        flex-flow : column wrap;
        width     : 336px;
        overflow-x: hidden;
        max-height: 37px;
    }

    .floors-sec::-webkit-scrollbar {
        display: none;
    }

    .floors-sec {
        -ms-overflow-style: none;
        scrollbar-width   : none;
    }

    .nav-section {
        width: 400px;
    }



}

@media only screen and (max-width:560px) {

    .left-arrow,
    .right-arrow {
        height    : 26px;
        padding   : 5px;
        align-self: center;
        cursor    : pointer;
    }

    .modal-images-sec {
        height: 31%;
    }
}

@media only screen and (max-width:450px) {

    .office-page,
    .top-of-page {
        padding-left: 20px;
    }

    .nav-section {
        width: 346px;
    }

    .floors-sec {
        width: 330px;
    }


    .floor-content>p {
        height: 275px;
        margin-bottom: 30px;
    }

    .floor-img-section img:nth-child(1) {
        align-self  : flex-end;
        margin-right: 20px;
    }

    .floor-img-section img:nth-child(2) {
        margin-right: 230px;
        align-self  : flex-end;
    }

    .modal-content {
        padding: 0px;
    }

    .left-arrow,
    .right-arrow {
        margin: 0px;
    }
}

@media only screen and (max-width:381px) {

    .floor-content>p {
        height   : 260px;
        font-size: 0.85rem;
    }

    .office-page {
        padding-left: 18px;
        margin-left : 0px;
    }

    .nav-section {
        width: 292px;
    }

    .floors-sec {
        width     : 230px;
        max-height: 20px;
    }

    .nav-section .item:nth-child(1),
    .nav-section .item:nth-child(2),
    .nav-section .item:nth-child(3),
    .nav-section .item:nth-child(4) {
        font-size: 11px;
    }

    .nav-section .item:nth-child(5) {
        font-size: 11px;
    }

    .nav-section a img {
        width: 7px;
    }

    .floor-img-section img:nth-child(2) {
        width       : 80px;
        height      : 80px;
        margin-right: 174px;
        margin-top  : -55px;
    }

    .floor-img-section img:nth-child(1) {
        width      : 150px;
        height     : 150px;
        margin-left: 80px;
    }
    .nav-section .item {
        padding: 0px;
    }

}