body {
    margin: 0px;
    padding: 0px;
}

#map {
    top: 0;
    width: 100%;
    height: 100vh;
    position: fixed;
}

#header {
    margin: auto auto auto auto;
    min-height: 100vh;
    width: 100vw;    
    position: relative;
    z-index: 5;
    padding: 2vh 0vh 5vh 0vh;
    background-color: rgba(0,0,0,0.5);    
    
}

#header .logoOP{
  display: block;
  margin-top: 0px;
  margin-left: auto;  
  margin-right: auto;
  width: 25vh;    
  position: relative;
  padding: 0vh 0vh 0vh 0vh;
  background-color: rgba(0,0,0,0);
  
  
}


#features {
    padding-top: 100vh;    
    position: relative;
    padding-bottom: 10vh;
}
@media (max-width: 100%) {
    #features {
      height: auto;      
      width: 100%;
      
    }
}

#footer {
    min-height: 2vh;
    text-align: left;
    line-height: 25px;
    width: 100%;
    position: relative;
    z-index: 5;
}

#header h1 {
    font-weight: 700;
    font-size:xx-large;
    text-transform: none;
    font-family: 'Merriweather', serif;
    text-align: center;
    margin: 4em auto 0em auto;
    max-width: 600px;
    padding: 1em 2.5em 0.24em 2.5em;
    opacity: 0.9;
}

#header h2 {
  font-weight: 600;
  text-transform: lowercase;
  font-family: 'Merriweather', serif;
  text-align: center;
  margin: auto auto 4em auto;
  max-width: 600px;
  padding: 0em 2.5em 0.24em 2.5em;
  opacity: 0.9;
}
#header h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 300;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    max-width: 600px;
}
#header p.byline {
    font-weight: 300;
    font-size: 0.9em;
    margin: 0.5em auto 0.8em auto;
}
#header p {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 400;
    text-align: left;
    font-size: 1.2em;
    max-width: 600px;
    margin: auto auto auto auto;
    padding: 0.5em 2.5em 0.5em 2.5em;
}
#features h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-family: 'Merriweather', serif;
    text-align: left;
    max-width: 50vw;
    padding: 0em 0em;
    
}
#features p {
    font-family: 'Roboto Condensed', sans-serif;
    text-align: left;
    font-size: 1.2em;    
    padding: 0em;
    
}
#features .imageCredit {
  font-size: 0.9em;
  margin-top: -5px;
}
#footer p {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 0.9em;
  max-width: 600px;
  padding: 0.75em 0em;
  margin: 1em 1em 1em 1em;
}

a, a:hover, a:visited {
    color: #e96138;
  }


/*html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars 
}*/

.mapboxgl-popup-content h4 {
    font-weight: 500;
    font-size: 0.9em;
    border-width: 0px 0px 0.5px 0px;
    border-style: solid;
    border-color: rgb(80, 80, 80);
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.mapboxgl-popup-content p {
    font-weight: 300;
    margin-top: 0.3em;
    margin-bottom: 0em;
}

.hidden {
    visibility: hidden;
  }
  .centered {
    width: 50vw;
    margin: 0 auto;
  }
  .lefty {
    width: 33vw;
    margin-left: 5vw;
  }
  .righty {
    width: 33vw;
    margin-left: 62vw;
  }
  .fully {
    
    width: 100%;
    margin: auto;
    
  }
  .light {
    color: #444;
    background-color: #ffffff;
  }
  .dark {
    color: #fafafa;
    background-color: #444;

  }
  .step {
    padding-bottom: 100vh;
    opacity: 0.99;
  }
  .step.active {
    opacity: 0.99;
  }
  .step div {
    padding: 25px 50px; /*25px 50px */
    line-height: 25px;
    font-size: 13px;
  }
  .step img {
    width: 100%;
  }
  @media (max-width: 750px) {
    .centered, .lefty, .righty, .fully {
      width: 100%;
      margin: auto auto;
    }
  }
  /* Fix issue on mobile browser where scroll breaks  */
  .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan, 
  .mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate.mapboxgl-touch-drag-pan .mapboxgl-canvas {
    touch-action: unset;
  }