/* Extra small devices (portrait phones, less than 576px)*/

.hotspot_cdata {
    font-size: 14px;
    font-family: 'Open Sans';
    color: #777;
    border: 1px solid #b0b0b0;
    padding: 10px;
    background-color: #fff;
    line-height: 17px;
    max-width: 400px;
}

    .hotspot_cdata B {
        color: #044269 !important;
        font-size: 16px;
        line-height: 20px;
        font-family: 'Saira';
        clear: both;
    }

        .hotspot_cdata B::after {
            content: "\A";
            white-space: pre;
        }


#content3D {
    width: 100%;
    height: 300px;
    /* border: 1px dotted #cecfd2; */
}

@media (max-width: 576px) {
    .wr360_player .container .position_rollover {
        position: unset !important;
    }
        .hotspot_cdata {
        z-index:21; 
        font-size: 10px;
        width: 180px !important;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        position: absolute !important;
        left: 50% !important;
        top: 60% !important;
        transform: translate(-50%, -60%) !important;
    }

    .hotspot_cdata B {
        font-size: 11px;
    }
}

@media (max-width: 768px) and (min-width: 576px) {

    .wr360_player .container .position_rollover {
        position: unset !important;
    }

    .hotspot_cdata {
        font-size: 12px;
        z-index: 21;
        width: 300px !important;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
        position: absolute !important;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }

        .hotspot_cdata B {
            font-size: 13px;
        }
}

@media (min-width: 576px) {
    #content3D {
        width: 100%;
        height: 300px;
        /* border: 1px dotted #cecfd2; */
    }
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    #content3D {
        width: 100%;
        height: 300px;
        /* border: 1px dotted #cecfd2; */
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    #content3D {
        width: 100%;
        height: 400px;
        /* border: 1px dotted #cecfd2; */
    }
    
    #header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
        padding:8px !important;
    }
}

/* Extra large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    #content3D {
        width: 100%;
        height: 450px;
        /* border: 1px dotted #cecfd2; */
    }
        
    #header .header-nav.header-nav-links nav > ul > li > a, #header .header-nav.header-nav-links nav > ul > li:hover > a, #header .header-nav.header-nav-line nav > ul > li > a, #header .header-nav.header-nav-line nav > ul > li:hover > a {
        padding:0.9rem !important;
    }
}