.apartment-wrapper {
    width: 100%;
    overflow: hidden;
}
.apartment-overview,
.apartment-floorplan-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #08384f url(../images/bg-apartment-1.jpg) no-repeat center center;
    background-size: cover;
}
    .apartment-floorplan-popup {
        position: absolute;
        bottom: 5%;
        left: 0;
        z-index: 100;
        width: 100%;
        height: 80%;
    }
        .apartment-floorplan-popup:before {
            content: "";
            display: block;
            position: absolute;
            z-index: 1;
            top: 0;
            left: 0;
            background: #fff url(../images/pattern-2.png) repeat 0 0;
            background-size: 200px auto;
            width: 80%;
            height: 100%;
        }
        .apartment-floorplan-popup > .layout {
            position: relative;
            height: 100%;
            z-index: 2;
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
            padding: 30px 15px;
            background: #fff url(../images/pattern-2.png) repeat 0 0;
            background-size: 200px auto;
        }
            .close-btn {
                display: block;
                width: 32px;
                height: 32px;
                text-indent: -1000em;
                background: url(../images/icon-close-btn.svg) no-repeat center center;
                background-size: contain;
            }
            .apartment-floorplan-popup .close-btn {
                position: absolute;
                top: 30px;
                right: 30px;
                z-index: 2;
            }
    .apartment-overview .hotspot,
    .apartment-floorplan .hotspot {
        cursor: pointer;
        position: absolute;
        z-index: 3;
        width: 16px;
        height: 16px;

        transform-origin: center center;
        -webkit-transform-origin: center center;
        -moz-transform-origin: center center;
    }
    .apartment-overview .hotspot {
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
    }
    .apartment-floorplan .hotspot {
        top: 50%;
        left: 50%;

        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
    }
    .apartment-floorplan .hotspot {
        width: 28px;
        height: 28px;
    }
        .apartment-overview .hotspot:before,
        .apartment-overview .hotspot:after,
        .apartment-floorplan .hotspot:before,
        .apartment-floorplan .hotspot:after {
            pointer-events: initial;
            content: "";
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 1px solid #fff;

            border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
        }
        .apartment-overview .hotspot.hotspot-alt:before,
        .apartment-floorplan .hotspot.hotspot-alt:before {
            border-color: #f6d88d;
        }
        .apartment-overview .hotspot:after,
        .apartment-floorplan .hotspot:after {
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border: none;
            background-color: #fff;
        }
        .apartment-overview .hotspot.hotspot-alt:after,
        .apartment-floorplan .hotspot.hotspot-alt:after {
            background-color: #f6d88d;
        }
        .apartment-overview .hotspot:before,
        .apartment-floorplan .hotspot:before {
            animation: waveAnimation 1.5s ease-in-out infinite;
            -webkit-animation: waveAnimation 1.5s ease-in-out infinite;
            -moz-animation: waveAnimation 1.5s ease-in-out infinite;
        }
        @keyframes waveAnimation {
            0% {
                transform: scale(1);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        @-webkit-keyframes waveAnimation {
            0% {
                transform: scale(1);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        @-moz-keyframes waveAnimation {
            0% {
                transform: scale(1);
                opacity: 0;
            }
            50% {
                opacity: 1;
            }
            100% {
                transform: scale(1.5);
                opacity: 0;
            }
        }
        .apartment-overview .hotspot span {
            cursor: pointer;
            display: block;
            padding-left: 100px;
            position: absolute;
            top: 50%;
            left: 100%;
            z-index: 1;
            text-decoration: none;

            transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -webkit-transform: translateY(-50%);
        }
        .apartment-floorplan .hotspot span {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #000;
            padding: 0;
            margin: 0;
            font-size: 10px;
            font-family: 'Montserrat-medium';
        }
        .apartment-overview .hotspot.flip span {
            left: auto;
            right: 100%;
            padding-left: 0;
            padding-right: 100px;
        }
        .apartment-overview .hotspot:hover span {
            padding-left: 110px;
        }
        .apartment-overview .hotspot.flip:hover span {
            padding-right: 110px;
        }
        .apartment-overview .hotspot span,
        .apartment-overview .hotspot span:before {
            transition: all .25s;
            -moz-transition: all .25s;
            -webkit-transition: all .25s;
        }
            .apartment-overview .hotspot span em {
                font-size: 18px;
                padding: 10px 20px;
                text-transform: uppercase;
                color: #000;
                white-space: nowrap;
                background-color: #fff;
                font-style: normal;
            }
            .apartment-overview .hotspot.hotspot-alt span em {
                background-color: #f6d88d;
            }
            .apartment-overview .hotspot span:before {
                content: "";
                display: block;
                width: 100%;
                max-width: 100px;
                height: 1px;
                background-color: #fff;
                position: absolute;
                top: 50%;
                left: 0;
                z-index: 1;
            }
            .apartment-overview .hotspot.hotspot-alt span:before {
                background-color: #f6d88d;
            }
            .apartment-overview .hotspot.flip span:before {
                left: auto;
                right: 0;
            }
        .apartment-overview .hotspot:hover span {
        }
            .apartment-overview .hotspot:hover span:before {
            }

        .hotspot-details {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 9999;
            padding: 10px;

            width: 200px;
            background-color: rgba(255,255,255,.9);
            border: 1px solid #c8ae6a;
        }
            .hotspot-details h3,
            .hotspot-details a {
                font-size: 14px;
            }
            .hotspot-details a.disabled {
                opacity: .3;
                cursor: default;
            }
            .hotspot-details h3 {
                line-height: 120%;
                cursor: text;
                margin: 0 0 10px;
                padding: 0 0 5px;
                color: #c8ae6a;
                border-bottom: 1px solid #c8ae6a;
            }
                .hotspot-details h3 strong {
                    display: block;
                }
            .hotspot-details a {
                color: #000;
                padding-left: 20px;
                background: url(../images/icon-add-dark.svg) no-repeat 0 center;
                background-size: auto 14px;
            }

/* Floor plan */
.apartment-floorplan {
    position: absolute;
    right: 0;
    bottom: 5%;
    width: calc( 100% - 100px );
    height: 80%;
    z-index: 1;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}
.floorplan-nav {
    width: 70px;
    height: 80%;
    position: absolute;
    bottom: 5%;
    left: 0;
    z-index: 1;
}
.floorplan-nav:before {
    content: "";
    display: block;
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    background-color: #cacaca;
    z-index: 1;
}
    .floorplan-nav ul {
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-flow: column;
    }
    .floorplan-nav ul,
    .floorplan-nav ul li {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .floorplan-nav ul li {
        width: 100%;
        margin: 10px 0;
    }
        .floorplan-nav ul li a {
            width: 100%;
            height: 70px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            border: 1px solid #4e4e4e;
            color: #4e4e4e;
            text-transform: uppercase;
            text-align: center;

            border-radius: 100%;
            -moz-border-radius: 100%;
            -webkit-border-radius: 100%;
        }
        .floorplan-nav ul li a:hover,
        .floorplan-nav ul li a.active {
            background-color: #f6d88d;
            border-color: #f6d88d;
        }
            .floorplan-nav ul li a strong {
                display: block;
                width: 100%;
            }
/* end. Floor plan */

/* Apartment */
.apartment-view-wrapper {
    width: 80%;
    height: 100%;
    padding: 100px 0 60px;
    margin: 0 auto;
}
    .apartment-view {
        width: 100%;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }
        .apartment-view > div:nth-child(1) {
            width: 40%;
        }
        .apartment-view > div:nth-child(2) {
            width: 60%;
        }
        .apartment-info {
            padding-right: 10%;
        }
            .apartment-info h2 {
                text-transform: uppercase;
                font-size: 35px;
                font-family: 'Montserrat-bold';
                color: #0d273b;
                margin-bottom: 40px;
            }
            .apartment-list-info,
            .apartment-list-info li {
                list-style: none;
                margin: 0;
                padding: 0;
            }
            .apartment-info p,
            .apartment-list-info li {
                width: 100%;
                font-size: 14px;
                display: flex;
                justify-content: space-between;
                margin-bottom: 15px;
            }
                .apartment-info p span:last-child,
                .apartment-list-info li span:last-child {
                    text-align: right;
                }
            .apartment-info h3 {
                font-size: 14px;
                font-family: 'Montserrat-bold';
                color: #0d273b;
                margin-bottom: 20px;
            }
            .apartment-info h3 label {
                width: 100%;
                display: flex;
                justify-content: space-between;
                cursor: pointer;
            }
            .apartment-info h3 label:hover {
                opacity: .8;
            }
            .apartment-info input[type="checkbox"],
            .apartment-info input[type="checkbox"] + h3 + div {
                display: none;
            }
            .apartment-info input[type="checkbox"]:checked + h3 + div {
                display: block;
            }
            .apartment-info input[type="checkbox"]:checked + h3 label .fa-plus,
            .apartment-info input[type="checkbox"] + h3 label .fa-minus {
                display: none;
            }
            .apartment-info input[type="checkbox"] + h3 label .fa-plus,
            .apartment-info input[type="checkbox"]:checked + h3 label .fa-minus {
                display: block;
            }

        .apartment-model {
            /*height: calc( 100vh - 80px - 48px );*/
        }
            .apartment-model canvas {
                width: 100% !important;
            }
/* end. Apartment */

@media (max-width: 768px) {
    .apartment-overview .hotspot span {
        padding-left: 10px;
    }
    .apartment-overview .hotspot.flip span{
        padding-right: 10px;
        left: 100%;
        right: auto;
    }
    .apartment-overview .hotspot span:before{
        max-width: 10px;
    }
}
@media(max-width: 480px)  {

    /* floorplan */
    .apartment-floorplan {
        background-position: center 53% !important;
    }
    .apartment-floorplan {
        width: 100% !important;
        transform: translateY(-40px) !important;
    }
    .floorplan-nav{
        width: 100% !important;
        height: 50px !important;

    }
    .floorplan-nav ul{
        width: 100%;
        display: inherit !important;
        text-align: center;
    }
    .floorplan-nav ul li{
        width: 50px !important;
        height: 50px !important;
        display: inline-block;
        margin: 0 10px !important;
        font-size: 11px;
    }
    .floorplan-nav:before {
        width: 100% !important;
        height: 1px !important;
        top: 50% !important;
        left: 0 !important;
    }
    .floorplan-nav ul li a{
        height: 50px !important;
    }
    .apartment-overview .hotspot:hover span {
        padding-left: 10px !important;
    }
    .apartment-overview .hotspot.flip:hover span {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}