body{
    margin:0;
    padding:0;
    overflow:hidden;
    -webkit-user-select:none;
    -moz-user-select:none;
    user-select:none;
    text-align:center;
}
#load{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:800;
    background-color :transparent;
    background-image:  linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5));
    background-blend-mode: overlay;
}    
#load table{
    width:100%;
    height:80%;
}
#load table td{
    font-family:Arial;
    font-size:20px;
}
#load img{
    width:70%;
}
#loadcontainer{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
}
#startbutton{
    position:absolute;
    bottom:0;
    width:100%;
    height:100px;
    z-index:801;
    display:none;
}
#startbutton div{
    border-radius:5px;
    padding:15px 25px;
    font-size:22px;
    text-decoration:none;
    margin:20px;
    color:#002563;
    position:relative;
    display:inline-block;
    font-family:Arial;
    text-shadow:0 0 1px #000000,0 0 5px #000000;
    transform:translate(0px, 5px);
    -webkit-transform:translate(0px, 5px);
    background-color: #ffcfdf;
    background-image: linear-gradient(315deg, #ffcfdf 0%, #b0f3f1 74%);
    cursor:pointer;
}

#content{
    width:100%;
    height:100%;
    position:fixed;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
    max-width:100%;
    max-height:100%;
    overflow:hidden;
    text-align:center;
}
#container{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#fff;
    overflow:hidden;
}
#menu{
    position:absolute;
    right:10px;
    top:10px;
    padding:0.5%;
    border-radius:20%;
    z-index:700;
    color:black;
    background-color: transparent;
}
#menu2{
    position:absolute;
    left:10px;
    bottom:10px;
    z-index:700;
    color: #aaaaaa;
    background-color: transparent;
}

#icon1{   
    padding: 9%;
    margin-left: 10px;
    height: 60px;
    width: 60px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    background:#fff;
    border-radius: 50%;
}

.popover {
    max-width:350px;  
    max-height:250px; 
}
    
.popover img {
    max-width: 250px;
    max-height: 150px;
}
#details{ 
    position: fixed;  
    right: -10%;
    bottom: -10%;
    transform: translate(-50%, -50%);
    margin:0 auto;
    display:none;
}
#detailstext:empty {
    display: none;
}
#detailstext{
    padding:0;
    background-color: #fff;
    z-index:701;
    font-family:Arial;
    font-size:12px;
    color:black;
    box-shadow: 10px 10px 5px #abe9cd;
}
.front-div{
    color:black;
    display:inline-block;
    position:relative;
    width:64px;
    height:64px;
}
.front-div div{
    transform-origin:32px 32px;
    animation:front-div 1.2s linear infinite;
}
.front-div div:after{
    content:" ";
    display:block;
    position:absolute;
    top:3px;
    left:29px;
    width:5px;
    height:14px;
    border-radius:20%;background:#000000;
}
.front-div div:nth-child(1){
    transform:rotate(0deg);
    animation-delay:-1.1s;
}
.front-div div:nth-child(2){
    transform:rotate(30deg);
    animation-delay:-1s;
}
.front-div div:nth-child(3){
    transform:rotate(60deg);
    animation-delay:-0.9s;
}
.front-div div:nth-child(4){
    transform:rotate(90deg);
    animation-delay:-0.8s;
}
.front-div div:nth-child(5){
    transform:rotate(120deg);
    animation-delay:-0.7s;
}
.front-div div:nth-child(6){
    transform:rotate(150deg);
    animation-delay:-0.6s;
}
.front-div div:nth-child(7){
    transform:rotate(180deg);
    animation-delay:-0.5s;
}
.front-div div:nth-child(8){
    transform:rotate(210deg);
    animation-delay:-0.4s;
}
.front-div div:nth-child(9){
    transform:rotate(240deg);
    animation-delay:-0.3s;
}
.front-div div:nth-child(10){
    transform:rotate(270deg);
    animation-delay:-0.2s;
}
.front-div div:nth-child(11){
    transform:rotate(300deg);
    animation-delay:-0.1s;
}
.front-div div:nth-child(12){
    transform:rotate(330deg);
    animation-delay:0s;
}
@keyframes front-div{0%{opacity:1;}100%{opacity:0;}}

@media screen and (max-width: 992px) {
    .popover {
        max-width:450px;  
        max-height:250px; 
    }
    
    .popover img {
        max-width: 350px;
        max-height:150px; 
    }
}
  
  /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .popover {
        max-width:250px;  
        max-height:250px; 
    }
    
    .popover img {
        max-width: 150px;
        max-height:150px; 
    }
}