html, body, div.container, div.content { 
    width:100%; height:100%; margin:0;
    text-align:center;
    position: absolute;
    }
.content_text {
    position: absolute;
    top: 90%;
    left: 50%;
}
#background1 {
    background-color: rgb(255,0,0);
    z-index: -1;
}
#background2 {
    background-color: rgb(0,255,255);
    z-index: -1;
}
#maps { position: absolute; top: 0%; left: 0%; }
#maps, #map1, #map2 { width: 100%; height: 100%; }
#map1,#map2{
    z-index: 1;
}

#leftSide, #rightSide {position: relative; width: 49.5%; height: 100%; }
#leftSide { float: left; }
#rightSide { float: right; }

#map3 {
    position: absolute;
    top:0%;
    left:-50%;
    height:40%;
    width: 40%;
}

.overlay {
    height: 9vh;
    width: 100%;
    position: absolute;
    z-index: 9990;
    top: -10%;
    left: 0;
    background-color: rgba(0,0,0, 0.60);
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay4 {
    height: 10%;
    width: 10%;
    position: absolute;
    z-index: 9990;
    top: 0%;
    left: 90%;
    background-color: rgba(0,0,0, 0.0);
    overflow-x: hidden;
    transition: 0.5s;
    color: #d1d1d1;
    font-size: 7vh;
    cursor: pointer;
}
.overlay2 {
    height: 90vh;
    width: 16vw;
    z-index: 9990;
    position: absolute;
    top: -90vh;
    left: 0vw;
    background-color: rgba(0,0,0, 0.60);
    overflow-x: hidden;
    transition: 0.5s;
}
.overlay3 {
    height: 3vh;
    width: 42vw;
    z-index: 9990;
    position: absolute;
    top: 97vh;
    left: 0%;
    background-color: rgba(0,0,0, 0.60);
    overflow-x: hidden;
    transition: 0.5s;
    text-align: center;
    font-family: "Lucida Console";
    font-size: 2.8vh;
    color: #b1b1b1;
}
.overlay5 {
    height: 2.5vh;
    width: 2.5vh;
    z-index: 9990;
    position: absolute;
    top: 49vh;
    background-color: rgba(0,0,0, 0.4);
    overflow-x: hidden;
    text-align: center;
    font-size: 2vh;
    color: #b1b1b1;
    cursor: pointer;

}
.moreZoom{
    left:97%;
}                    
.lessZoom{
    left:0.5%;
}                    
.overlay-content {
    position: relative;
    top: 0vh;
    float: left;
    width: 11vw;
    text-align: center;
    cursor: pointer;
    }
.overlay2-content {
    position: relative;
    top: 0vh;
    float: top;
    text-align: center;
    cursor: pointer;
    padding: 0vh 1vw 3vh 1vw;
    text-decoration: none;
    font-size: 4vh;
    color: #b1b1b1;
    display: block;
    transition: 0.1s;
    }

    .overlay2-content:hover, .overlay2-content:focus {
        color: #ffffff;
    }
    .overlay-content:hover, .overlay-content:focus {
        color: #ffffff;
    }
    .overlay4:hover, .overlay4:focus {
        color: #ffffff;
    }
    .overlay-content {
    text-decoration: none;
    color: #b1b1b1;
    display: block;
    transition: 0.1s;
    }
    .overlay-title {
        text-decoration: none;
        top:0;
        height: 30%;
        width:100%;
        float: top;
        font-size: 2vh;
        color: #b1b1b1;
        display: block;
        transition: 0.1s;
    }
    .overlay-bottom {
        text-decoration: none;
        height: 70%;
        width:100%;
        float: top;
        font-size: 4.5vh;
        color: #b1b1b1;
        display: block;
        transition: 0.1s;
    }
    .overlay-bottom:hover, .overlay-bottom:focus {
        color: #ffffff;
    }

  .popuptext {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0, 0.60);
    color: #fff;
    text-align: center;
    font-size: 4vh;
    position: absolute;
    z-index: 9991;
    /*top: 0%;
    left: 0%;*/
  }
  
  .show {
    visibility: visible;
    -webkit-animation: fadeIn 0.5;
    animation: fadeIn 0.5s;
  }
  .hide {
    visibility: hidden;
    -webkit-animation: fadeOut 0.5;
    animation: fadeOut 0.5s;
  }
  
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
  }
  @-webkit-keyframes fadeOut {
    from {opacity: 1;} 
    to {opacity: 0;}
  }
  
  @keyframes fadeOut {
    from {opacity: 1;}
    to {opacity:0;}
  }

.v10 {
    position: relative;
    height: 10vh;
    width: 45vw;
    cursor: pointer;
}
.v20 {
    position: relative;
    height: 20vh;
    width: 45vw;
    cursor: pointer;
}
.v40 {
    position: relative;
    height: 40vh;
    width: 45vw;
}
.v60 {
    position: relative;
    height: 60vh;
    width: 45vw;
}
.v80 {
    position: relative;
    height: 80vh;
    width: 45vw;
}

@keyframes fade { 
    from { opacity: 0.5; } 
}
.blinking {
    animation: fade 1s infinite alternate;
}