.content {
    padding-top: 2px;
    background: lightgray;
    position: relative;
}

body {
    overflow-x: hidden;
    text-align: center
}

h1 {
    font-family: "Lucida Console", "Courier New", monospace;
}


.mapsec { 
  max-height: 0; 
  overflow: hidden; 
  transition: max-height 500ms;
}
.mapsec.active {
  /* Depending on this value, your animatiom will seem faster or shorter */
  max-height: 1100px;
}

a:link {
    color: black;
    text-decoration: none;
}

a:visited {
  color: black;
  text-decoration: none;
}


.hideable {
  color: white;
  text-decoration: line-through;
  text-decoration-color: black;
}

.hideable:hover {
  color: black;
  text-decoration: none;
}

.responsive {
  display: none;
}

.iframe-container{
    position: relative;
    width: 100%;
    padding-bottom: 0%; 
    height: 80vh;
}

.iframe-container iframe{
    position: absolute;
    left: 10%;
    width: 80%;
    height: 100%;
}

@media (orientation: portrait) {

  body {
        font-size: 10vw;
        word-wrap: break-word;
        white-space: normal;
   }

   .responsive {
      display: inline;
   }

}