/* RESPONSIVENESS
*****************************************************/
@media screen and (max-width: 1000px) {
    h1 {
        font-size: 1em;
    }
}

/*
*   INDEX.HTML CSS
*/

/* Create four equal columns that sits next to each other */
.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

    .column img {
        margin-top: 8px;
        vertical-align: middle;
    }

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
    .column {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
    .col-sm-3{
        -ms-flex: 50%;
            flex: 50%;
            max-width: 50%;
    }
    .modal-lg{
        width: 82% !important;
    }

    .controls .hotspot-controls {
        max-width: 310px !important;
    }
    
    #barge_icon{
        display: none !important;
    }

    .intrinsic-container-16x9 {
        padding-bottom: 120% !important;
    }
    #myMap, #nav_panel{
        padding-top: 21% !important;
    }
    
    .control_buttons {
        max-height: 40px !important;
        max-width: 40px !important;
    }

    #tutorial_icon{
        right: 57px !important; 
    }
    #refresh_icon{
        right: 103.5px !important;  
    }
    #map_icon{
        right: 150px !important;
    }
}


/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
    .col-sm-3{
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
    #main-irma-video{
        display: none !important;
    }
    
    .controls .hotspot-controls{
        max-width: 300px !important;
        font-size: 15px !important;
        /*left: 10% !important;*/
        font-weight: normal !important;
    }
    
    .control_buttons, #barge_icon{
        display: none !important;
    }
    .modal-content .modal-title{
        font-size: 20px !important;
    }
    .modal-content .modal-body{
        font-size: 15px !important;
    }
    .annotation-description {        
        max-width: 200px !important;      
    }
    .annotation-description-content {
        font-size: 0.70em !important;
    }

    #popups_icon, #tutorial_icon2, #refresh_icon2, #fullscreen_icon2{
        display: none !important;
    }

    .intrinsic-container-16x9 {
        padding-bottom: 180% !important;
    }
    
}

/*
*   REPOSIVENESS FOR SITES OUTSIDE OF INDEX.HTML
*/


@media screen and (max-width: 800px) {
    .mini-container1 {
        display: none;
    }

    .mini-container2 {
        -ms-flex: 100% !important;
        flex: 100% !important;
        width: 100% !important;
    }

    .potree_container {
        -ms-flex: 100%;
        flex: 100%;
        width: 100%;
    }
}

/*
* FIXING BOTTOM ROW OF VIDEOS IN 3D DOC PAGE AND IRMA PAGE
*/

#main-canvas {
	width: auto;
    /*width: 100% !important;*/
	height: 79%;
    
}

.main-container {
    height: 100vh;
}

@media screen and (max-width: 575px) {
    #main-canvas {
        flex: 0 0 56.25%;
    }
}


/* MARCELLUS FONT
*****************************************************/
/* latin-ext */
@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    src: local('Marcellus'), local('Marcellus-Regular'), url(../fonts/wEO_EBrOk8hQLDvIAF81WPoK7Es.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Marcellus';
    font-style: normal;
    font-weight: 400;
    src: local('Marcellus'), local('Marcellus-Regular'), url(../fonts/wEO_EBrOk8hQLDvIAF81VvoK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* OPENSANS FONT
*****************************************************/
/* cyrillic-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFWJ0bbck.woff2) format('woff2');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFUZ0bbck.woff2) format('woff2');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFWZ0bbck.woff2) format('woff2');
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFVp0bbck.woff2) format('woff2');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFWp0bbck.woff2) format('woff2');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFW50bbck.woff2) format('woff2');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../fonts/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    background-color: black !important;
}

#container {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#split-container {
    height: 100%;
    float: left;
}

.mini-container1 {
    /*background-color: purple;*/
    width: 16.5%;
    overflow: hidden;
}

.mini-container2 {
    /*background-color: brown;*/
    width: 83.5%;
}



#house-image {
    width: 100%;
    height: 100%;
}

#footer-div {
    width: 5%;
    height: 6%;
    position: absolute;
    top: 94%;
    left: 95%;
}

#panel-div {
    width: 20%;
    height: 25%;
    position: absolute;
    top: 70%;
    left: 75%;
    display: none;
}

    #panel-div img {
        max-width: 90%;
        max-height: 85%;
        margin-left: 45%;
        margin-top: 8%;
    }

.footer-split {
    height: 100%;
    float: left;
    border-radius: 50%;
}

#footer-splitone {
    width: 50%;
}

#footer-splittwo {
    width: 50%;
}


.footer-icon {
    width: 60%;
    height: 60%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 20%;
    cursor: pointer;
}

iframe {
    height: 100%;
    width: 100%;
    border-style: none;
}

body p {
    font-size: 0.95em;
    /*font-family: 'Open Sans';*/
    font-family: 'Marcellus';
}

h1, h2, h3, h4 {
    font-family: 'Marcellus';
    font-size: 1.5em;
	word-wrap: break-word;
	white-space: normal;
}

.feather {
    width: 16px;
    height: 16px;
    vertical-align: text-bottom;
}

.mdl-menu a{
    text-decoration: none !important;
}

.modal-backdrop {
    z-index: 0 !important;
    }

.modal-backdrop .show{
    opacity: 1 !important;
}
.mdl-button {
    font-family: 'Marcellus' !important;
    font-size: 18px;
    
    }

.mdl-menu{
    font-family: 'Marcellus';
}
/*sticky-footer*/

.footer {
    width: 100%;
    height: 12%;
    max-height: 12%;
    max-width: calc(100% - 20px);
    position: absolute;
    bottom: 0%;
    /* Set the fixed height of the footer here */
    /*line-height: 60px; /* Vertically center the text there */
    padding: 1px;
    background-color: #F8F9FA;
    font-size: 1.1em; /*increase for home | spanish links*/
    overflow: auto;
}

    .footer img {
        width: 100%;
    }

.footer2 {
    width: 100%;
    height: 12%;
    
    bottom: 0%;

    /* Set the fixed height of the footer here */
    /*line-height: 60px; /* Vertically center the text there */
    padding: 5%;
    
    font-size: 1.1em; /*increase for home | spanish links*/
}

    .footer2 img {
        width: 100%;
    }

#homeicon {
    width: 100%;
    height: 100%;
    max-height: 42px !important;
    max-width: 37px !important;
}

.lang_div {
    bottom: 0;
    left: 0%;
    top: 0;
    right: 0;
    position: relative;
	font-weight: lighter;
}

#langdiv_index {
    bottom: 0;
    left: 0%;
    top: 0;
    right: 0;
    padding-top: 10%;
    position: relative;
    font-weight: lighter;
    font-family: 'Marcellus';
}

#langdiv_navbar {
    bottom: 0;
    left: 0%;
    top: 0;
    right: 0;
    position: relative;
    font-weight: lighter;
    font-family: 'Marcellus';
    font-size: 14px;
}

#lang_selected {
    /*font-weight: 900;*/
    border-bottom: #3d9fd6 solid 5px;
}


/*
 * Sidebar
 */

#header-div {
    /*word-wrap: break-word;*/
	position: sticky;
    font-size: 2.5em;
    white-space: pre-line;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100; /* Behind the navbar */
    padding-top: 10px;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 10px; /* Height of navbar */
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1);
}

.sidebar-sticky {
    position: relative;
    top: 0;
    /*padding-bottom: 0px;*/
    height: calc(100% - 8px);
    height: 85%;
    padding-top: .5rem;
    overflow-x: hidden;
    overflow-y: auto; /*Scrollable contents if viewport is shorter than content. */
    padding: 5%;
    line-height: 27px;
}

.sidebar-sticky2 {
    position: relative;
    top: 0;
    /*padding-bottom: 0px;*/
    height: calc(100% - 8px);
    height: 85%;
    padding-top: .5rem;
    /* overflow-x: hidden;
    overflow-y: hidden; Scrollable contents if viewport is shorter than content. */
    padding: 5%;
    line-height: 27px;
}

.sidebar-sticky3 {
    position: relative;
    top: 0;
    /*padding-bottom: 0px;*/
    height: calc(100% - 8px);
    height: 85%;
    padding-top: .5rem;
    overflow-x: none !important;
    overflow-y: none !important; /*Scrollable contents if viewport is shorter than content. */
    padding: 5%;
    line-height: 27px;
}
/*@supports ((position: -webkit-sticky) or (position: sticky)) {
  .sidebar-sticky {
    position: -webkit-sticky;
    position: sticky;
  }*/



.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

    .sidebar .nav-link .feather {
        margin-right: 4px;
        color: #999;
    }

    .sidebar .nav-link.active {
        color: #007bff;
    }

        .sidebar .nav-link:hover .feather,
        .sidebar .nav-link.active .feather {
            color: inherit;
        }

.sidebar-heading {
    font-size: .75rem;
    text-transform: uppercase;
}

.drawer-content{
    padding: 5% 8% 8% 8%;
    overflow-y: auto !important;
    
}

.drawer-content-footer{
    bottom: 3% !important;
    position: absolute;
    margin-left: 20%;
    margin-top: 30%;
    margin-right: 20%;
    
}

.potree-iframes{
    position: absolute; 
    height: 100%; 
    width: 100%;
}

#IE-title{
    display: none;
    font-family: 'Marcellus';
    font-size: 30px;
    padding-left: 8%;
    padding-top: 5%;
}
/*
 * Content
 */

[role="main"] {
    padding-top: 12px; /* Space for fixed navbar */
}

/*
 * Navbar
 */

.navbar-brand {
    padding-top: .75rem;
    padding-bottom: .75rem;
    font-size: 1rem;
    background-color: rgba(0, 0, 0, .25);
    box-shadow: inset -1px 0 0 rgba(0, 0, 0, .25);
}

.navbar-fixed-bottom

.navbar .form-control {
    padding: .75rem 1rem;
    border-width: 0;
    border-radius: 0;
}

.form-control-dark {
    color: #fff;
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .1);
}

    .form-control-dark:focus {
        border-color: transparent;
        box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
    }

/*
 * Utilities
 */

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

a {
    color: #555555;
    text-decoration: none;
}

.modal-title {
    font-size: 25px;
}

.modal-body {
    font-size: 20px;
}

/*
 * Scrollbar
*/

::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-button {
    width: 6px;
    height: 2px;
}

::-webkit-scrollbar-track {
    background: #eee;
    border: thin solid lightgray;
    box-shadow: 0px 0px 3px #dfdfdf inset;
    border-radius: 12px;
}

::-webkit-scrollbar-thumb {
    background: #999;
    border: thin solid gray;
    border-radius: 12px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #7d7d7d;
    }


/* 
*POTREE ANNOTATIONS
*/
.annotation {
    opacity: 1 !important;
}

.annotation-titlebar {
    background-color: #3D9FD6;
    border: 2px solid #3D9FD6; /*1px solid rgba(255, 255, 255, 0.7) for border thickness*/
    padding: 6px 9px; /*5px 8px|1px 8px | 2px 13px for roundness*/
    opacity: 1; /*1 shows icons | 0 !important could hide annotations*/
}
/*
    .annotation-titlebar:hover {
        background-color: #015289 !important;
    }
    */
.annotation-expand {
}

.annotation-action-icon {
}

    .annotation-action-icon:hover {
        /*filter: unset !important;*/
    }

.annotation-item {
    opacity: 1; /*0.5*/
}

    .annotation-item:hover {
    }

.annotation-main {
}

.annotation-label {
}

.annotation-description {
    border-radius: 10px; /*4px*/
    max-width: 250px; /*500px*/
    /*font-family: 'Open Sans', sans-serif; */
    font-family: 'Marcellus';
}

.annotation-description-close {
}

.annotation-description-content {
    font-size: 0.85em;
}

.annotation-icon {
    width: 40px; /*20px*/
    height: 40px; /*20px*/
    opacity: 1; /*0.5*/
}


/* 
*POP-UP WINDOWS FOR HERMS AND SCULPTURES
*/

.popup {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 4; /* Sit on top */
    padding-top: 2%; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}

/* popup Content */
.popup-content {
    background-color: #000000; /*#fefefe*/
    margin: auto;
    padding: 20px;
    width: 80%;
    border-radius: 20px;
}

.popup-header {
    padding: 5px;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

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

.intrinsic-container {
    position: relative;
    height: 0;
    overflow: hidden;
}

/* 16x9 Aspect Ratio */
.intrinsic-container-16x9 {
    padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.intrinsic-container-4x3 {
    padding-bottom: 56.25%;
}

.intrinsic-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-color: black;
    border-radius: 20px;
}


/*
* NAVIGATION PANEL
*/
.navPanel {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 3; /* Sit on top */
    padding-top: 2%; /* Location of the box */
    left: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(255,255,255); /* Fallback color */
    background-color: rgba(0,0,0,0.25) !important; /* Black w/ opacity */
    border-radius: 20px;
}

/* navPanel Content */
.navPanel-content {
    /*color: rgba(255,255,255,0.1);
    background-color: rgba(0,0,0,0.1);*/
    margin: auto;
    padding: 20px;
    /*border: 1px solid black; /*#888*/
    width: 80%;
    border-radius: 20px;
    position: absolute;
    left: 9%;
}

.nav_img {
    position: absolute;
    width: 100%;
    height: 100%;
    color: rgba(0,0,0,0.01);
    background-color: rgba(0,0,0,0.01); /*rgba(255,255,255,0.01)*/
    border-radius: 22px;
}

/*Control Panel image after selecting control icon*/
#control_panel {
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
    position: fixed;
    right: 70px;
    z-index: 100;
    display: none;
}



/*
//css for background of control buttons
.controls .general-controls .control-button{
    display: flex;
    background: rgba(0,0,0,0.3);
    border-radius: 30px;
    height: 20px;
    width: 20px;
    right: 1px;
    z-index: 1;
    padding: 15px;
}
    */


/*
*HOTSPOTS DROPUP
*/
/*
.potree_container:hover .controls {
    display: flex;
}
*/
.controls {
    display: flex; /*none to hide*/
    /*min-width: 0;*/
    padding: 0px;
    pointer-events: none;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 1;
    height: 70px;
    /*width: 40% my change*/
    /*inherited*/
    font-family: 'Marcellus';
    font-size: 19px;
    font-weight: 900;
    /*temp*/
    transition-property: opacity;
    transition-duration: 250ms;
    transition-timing-function: ease-in-out;
    transition-delay: initial;
    width: 100%; /*changed*/
    align-content: center;
    /*align-items: center;*/
    box-align: center;
    -moz-box-align: center;
    align-self: center;
}

    .controls .hotspot-controls {
        display: flex;
        max-width: 350px;
        position: relative;
        
        flex-grow: 1;
        flex-shrink: 0;
        flex-basis: 0;
        
        pointer-events: all;
        height: 50px;
        font-size: 18px; /*13px*/
        color: #ffffff;
        background: rgba(0,0,0,0.4);		
        border-radius: 25px;
        bottom: 20px;
        right: 50%;
        left: 50%;
        transform: translate(-50%, 50%);
		/*
        border: solid;
        border-color: #ffffff;
		border-width: 1.7px;
        */
        
    }

        .controls .hotspot-controls [data-action="prev-annotation"] {
            padding-top: 0px;
            padding-bottom: 0px;
            padding-left: 20px; /*changed*/
            padding-right: 20px; /*changed*/
            line-height: 30px;
            cursor: pointer;
        }

        .controls .hotspot-controls .hotspot-name {
            padding: 0 3px;
            overflow: hidden;
            line-height: 50px; /*modifies the height of the text*/
            text-align: center;
            text-overflow: ellipsis;
            text-shadow: 0 0 10px #000000;
            white-space: nowrap;
            cursor: pointer;
            -ms-flex: 1;
            flex: 1;
        }

        .controls .hotspot-controls [data-action="next-annotation"] {
            padding-top: 0px;
            padding-right: 20px; /*changed*/
            padding-bottom: 0px;
            padding-left: 20px; /*changed*/
            line-height: 30px;
            cursor: pointer;
        }

        .controls .hotspot-controls .list {
            position: absolute;
            left: 28px;
            bottom: 55px; /*change the proximity of bar and list*/
            display: none;
            min-height: 100px;
			height: flex;
            padding: 1px;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.75);
            border-radius: 10px;
            transition-property: opacity;
            transition-duration: 250ms;
            transition-timing-function: ease-in-out;
            transition-delay: initial;
            flex-direction: column;
            flex-wrap: nowrap;
            max-width: 290px;
            width: flex;
            right: 4.5%;
        }

#prevDiv, #nextDiv {
    height: 10px;
    width: 10px;
    position: center;
    position: absolute;
}

#prevIcon {
    bottom: -25px;
    position: absolute;
    left: -5px;
}

#nextIcon {
    bottom: -25px;
    position: absolute;
    right: 12px;
}

.js-scrollable {
    margin-top: 0px;
    margin-bottom: 0px;
    list-style-type: none;
}



/*
            .hotspot-controls:hover .list hotspots-list visible{
                display: flex;
            }
*/

.controls .hotspot-controls .list .annotations-visibility,
.controls .hotspot-controls .list .annotations-autopilot {
    display: none; /*set to none if hidden on barge*/
    height: 28px;
    padding-top: 0px;
    padding-right: 5px;
    padding-bottom: 0px;
    padding-left: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px;
    align-items: center;
    justify-content: flex-start;
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: auto;
}

    .controls .hotspot-controls .list .annotations-visibility:hover,
    .controls .hotspot-controls .list .annotations-autopilot:hover {
        background-color: #333333;
    }

.controls .hotspot-controls .list ul {
    overflow: auto;
    /*border-top-width: 1px;*/
    /*border-top-style: solid; to hide line on top */
    border-top-color: rgb(86, 86, 86);
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
    padding: 10px;
}

.controls .hotspot-controls .list li a {
    display: flex;
    width: 100%;
    min-height: 20px;
    box-sizing: border-box;
    padding: 0 3px;
    overflow: hidden;
    color: #ffffff; /*color: #cccccc;*/
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

    .controls .hotspot-controls .list li a:hover {
        background-color: #333333;
    }


.controls .hotspot-controls .list li .index {
    margin-right: 8px;
}


/*visibility*/
.controls .hotspot-controls .list .annotations-visibility.\--hide:before {
    content: "\F06E";
}

.controls .hotspot-controls .list .annotations-visibility:before {
    content: "\F070";
}

.controls .hotspot-controls .list .annotations-visibility:before,
.controls .hotspot-controls .list .annotations-autopilot:before {
    margin-right: 8px;
    font-family: "FontAwesome";
}

.controls .hotspot-controls .list .annotations-visibility.\--hide:after {
    content: "Show annotations";
}

.controls .hotspot-controls .list .annotations-visibility:after {
    content: "Hide annotations";
}


/*autopilot*/
.controls .hotspot-controls .list .annotations-autopilot.\--stopped:before {
    content: "\F04D";
}

.controls .hotspot-controls .list .annotations-autopilot:before {
    content: "\F04B";
}

.controls .hotspot-controls .list .annotations-visibility:before,
.controls .hotspot-controls .list .annotations-autopilot:before {
    margin-right: 8px;
    font-family: "FontAwesome";
}

.controls .hotspot-controls .list .annotations-autopilot.\--stopped:after {
    content: "Stop autopilot";
}

.controls .hotspot-controls .list .annotations-autopilot:after {
    content: "Start autopilot";
}

/*
* CONTROLS ICONS
*/

#barge_icon{
	width: 100%;
    height: 100%;
    position: fixed;
    bottom: 18px;
    cursor: pointer;
    max-height: 52px !important;
    max-width: 52px !important;
    z-index: 2;
    border-radius: 45px;
}

#popups_icon{
	width: 100%;
    height: 100%;
    position: fixed;
    bottom: 18px;
    cursor: pointer;
    max-height: 50px !important;
    max-width: 50px !important;
    z-index: 2;
    border-radius: 45px;
}

.control_buttons, .control_buttons_popups {
    width: 100%;
    height: 100%;
    position: fixed;
    bottom: 18px;
    cursor: pointer;
    max-height: 47px;
    max-width: 47px;
    z-index: 2;
    border-radius: 40px;
    background: rgba(0,0,0,0.4);
 
    border: solid;
    border-color: #ffffff;
    border-width: 1.9px;

}

.control_buttons_popups {
    border: solid;
    border-color: #ffffff;
    border-width: 1.7px;
}

.control_buttons:hover {
    background: rgba(0,0,0,0.6) !important;
}

#barge_icon {    
	right: 230px; 
}

#map_icon {
    right: 175px; 
}

#refresh_icon {
    right: 120px; 
}

#tutorial_icon {
    right: 65px; 
}

#fullscreen_icon {
    right: 10px;
}

/*For popups buttons/icons*/
#popups_icon {
    right: 172px;
}

#refresh_icon2 {
    right: 118px;
}

#tutorial_icon2 {
    right: 63px;
}

#fullscreen_icon2 {
    right: 10px;
}

/*Animation for Finger Instructions*/
#finger_animation {
    display: none;
    width: 80px;
    height: 140px;
    position: relative;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 8s;
    z-index: 1;
    right: 50%;
    top: 50%;
    /*
    background: rgba(0,0,0,0.3);
    border-radius: 50px;
    padding: 10px;
        */
}

#fingeranimation_grotto {
    display: none;
    width: 10%;
    height: 20%;
    position: absolute;
    -webkit-animation-name: grotto; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */
    animation-name: grotto;
    animation-duration: 8s;
    z-index: 100;
    right: 50%;
    /*
    background: rgba(0,0,0,0.3);
    border-radius: 50px;
    padding: 10px;
        */
}

#fingeranimation_models {
    display: none;
    width: 20%;
    height: 20%;
    position: absolute;
    left: 50%; /*50%*/
    top: 50%;
    -webkit-animation-name: model; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */
    animation-name: model;
    animation-duration: 8s;
    z-index: 100;
    /*
    background: rgba(0,0,0,0.3);
    border-radius: 50px;
    padding: 10px;
        */
}

@keyframes model {
    0% {
        left: 50%;
        top: 40%;
    }

    25% {
        left: 30%;
        top: 40%;
    }

    75% {
        left: 50%;
        top: 40%;
    }

    100% {
        left: 30%;
        top: 40%;
    }
}

@keyframes example {
    0% {
        left: 50%;
        top: 50%;
    }

    25% {
        left: 35%;
        top: 50%;
    }

    75% {
        left: 50%;
        top: 50%;
    }

    100% {
        left: 35%;
        top: 50%;
    }
}

@keyframes grotto {
    0% {
        left: 50%;
        top: 50%;
    }

    25% {
        left: 35%;
        top: 50%;
    }

    75% {
        left: 50%;
        top: 50%;
    }

    100% {
        left: 35%;
        top: 50%;
    }
}

#fingeranimation_sculptureslmodels {
    display: none;
    width: 20%;
    height: 20%;
    position: absolute;
    left: 50%; /*50%*/
    top: 50%;
    -webkit-animation-name: sculpturesmodel; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */
    animation-name: sculpturesmodel;
    animation-duration: 8s;
    z-index: 100;
    /*
    background: rgba(0,0,0,0.3);
    border-radius: 50px;
    padding: 10px;
        */
}

@keyframes sculpturesmodel {
    0% {
        left: 60%;
        top: 40%;
    }

    25% {
        left: 15%;
        top: 40%;
    }

    75% {
        left: 60%;
        top: 40%;
    }

    100% {
        left: 15%;
        top: 40%;
    }
}

#gif_loader {
    width: 10%;
    height: 15%;
    position: absolute;
    right: 45%;
    top: 50%;
    display: none;
    z-index: 2;
}

#bottom_nav {
    z-index: initial;
    height: 6%; /*10%*/
    z-index: 4;
    background-color: lightgray;
    background-color: rgba(0,0,0,0.5);
}

/*
* Context Map
*/

#floor_plan {
    border-radius: 20px;
    z-index: 2;
    right: 10%;
    /*width: 850px;*/
    /*height: 500px;*/
    bottom: 0px;
    height: 100%;
    width: 100%;
}

#map_wrapper {
    width: 280px;
    max-width: 280px;
    height: auto;
    position: relative;
    float: right;
    z-index: 1;
    display: none;
}

#map_marker_grotto {
    max-height: 38px;
    width: 38px;
    height: auto;
    width: auto;
    position: absolute;
    top: 55%;
	right: 35%;
    z-index: 100;
	animation: mapAnimation 1s ease-in-out infinite alternate;
    -webkit-animation-name: mapAnimation;
    animation-name: mapAnimation;
}

#map_marker_barge {
    max-height: 38px;
    width: 38px;
    height: auto;
    width: auto;
    position: absolute;
    top: 15%;
	right: 23.8%;
    z-index: 100;
	animation: mapAnimation 1s ease-in-out infinite alternate;
    -webkit-animation-name: mapAnimation;
    animation-name: mapAnimation;
}

@keyframes mapAnimation {
    0% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
    }

    100% {
        transform: scale(1.3);
        -webkit-transform: scale(1.3);
    }
}

/*
* 3D Doc info buttons on videos
*/

#ainfoDiv {
    height: 35px;
    width: 35px;
    position: absolute;
    z-index: 4;
    top: 4%;
    right: 4%;
    border-radius: 25px;
    background-color: #3D9FD6;
}

#info_img {
    height: 24px;
    width: 24px;
    position: absolute;
    z-index: 4;
    top: 16%;
    right: 16%;
    filter: invert(1);
}

#infoDiv2 {
    height: 38px;
    width: 38px;
    position: absolute;
    z-index: 4;
    top: 4%;
    right: 1.2%;
    border-radius: 25px;
    background-color: #3D9FD6;
}

/*
* Map markers
*/

#grotto_marker_div {
    height: 38px;
    width: 38px;
    position: absolute;
    z-index: 4;
    top: 49%;
	left: 12.7%;
}

#grotto_marker_a {
    height: 35px;
    width: 35px;
    position: absolute;
    z-index: 4;
    top: 49%;
	left: 12.7%;
}

#grotto_marker_img {
    height: 35px;
    width: 35px;
    position: absolute;
    z-index: 4;
	top: 49%;
	left: 12.7%;
	animation: mapAnimation 1s ease-in-out infinite alternate;
    -webkit-animation-name: mapAnimation;
    animation-name: mapAnimation;
}

#barge_marker_div {
    height: 38px;
    width: 38px;
    position: absolute;
    z-index: 4;
    top: 14%;
	left: 21%;
}

#barge_marker_a {
    height: 35px;
    width: 35px;
    position: absolute;
    z-index: 4;
    top: 14%;
	left: 21%;
}

#barge_marker_img {
    height: 35px;
    width: 35px;
    position: absolute;
    z-index: 4;
	top: 14%;
	left: 21%;
	animation: mapAnimation 1s ease-in-out infinite alternate;
    -webkit-animation-name: mapAnimation;
    animation-name: mapAnimation;
}

/*3D Doc modal*/
.modal-content {
    width: 115%;
}

/*Sidebar-Sticky for Popups*/
#popups_sidebar-sticky {
    height: 100%;
}
#popups_sidebar-sticky p{
	color: #FFFFFF;
	font-size: .8em !important;
}

#popups_sidebar-sticky h1{
	color: #FFFFFF;
	font-size: 1.4em !important;
}

#popups_sidebar-sticky hr{
	border-color: #696969;
}

/*Loader animation for 1916 Herm + Sculptures*/
#loader {
    position: absolute;
    left: 45%;
    top: 40%;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3d9fd6;
    border-bottom: 16px solid #3d9fd6;
    width: 100px; /*150px*/
    height: 100px;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
	z-index: 4;
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*CSS for Popups' body: 1916 Herm + 1916 Sculptures*/
.popups_body{
    background-color: #000;
    color: #000;
}

/*CSS for Popups' page body: all popups*/
.popups_bodypage{
	background-color: #000000;
	touch-action: none;
}

#popups_sidebarpage{
	background-color: #000000 !important;
	max-width: 25% !important;
}

.lead{
	font-size: 0.8rem;
	font-weight: lighter;
}

.headers{
	font-size: 1.1em;
}

#intro{
	font-weight: bold;
	font-size: 0.67em;
}

#vizcaya_logo{
    height: 100%;
    width: 100%;
}