html, body {
    overflow-x: hidden;
    font-family: "Gotham", sans-serif;
}

.bd-placeholder-img{
                font-size:1.125rem;
                text-anchor:middle;
                -webkit-user-select:none;
                -moz-user-select:none;
                user-select:none
}

@media (min-width: 768px){
    .bd-placeholder-img-lg{
        font-size:3.5rem
    }
}

.b-example-divider{
    width:100%;
    height:3rem;
    background-color:#0000001a;
    border:solid rgba(0,0,0,.15);
    border-width:1px 0;
    box-shadow:inset 0 .5em 1.5em #0000001a,inset 0 .125em .5em #00000026
}

.b-example-vr{
    flex-shrink:0;
    width:1.5rem;
    height:100vh
}

.bi{
    vertical-align:-.125em;
    fill:currentColor
}

.nav-scroller{
    position:relative;
    z-index:2;
    height:2.75rem;
    overflow-y:hidden
}

.nav-scroller .nav{
    display:flex;
    flex-wrap:nowrap;
    padding-bottom:1rem;
    margin-top:-1px;
    overflow-x:auto;
    text-align:center;
    white-space:nowrap;
    -webkit-overflow-scrolling:touch
}

.btn-bd-primary{
    --bd-violet-bg: #712cf9;
    --bd-violet-rgb: 112.520718, 44.062154, 249.437846;
    --bs-btn-font-weight: 600;
    --bs-btn-color: var(--bs-white);
    --bs-btn-bg: var(--bd-violet-bg);
    --bs-btn-border-color: var(--bd-violet-bg);
    --bs-btn-hover-color: var(--bs-white);
    --bs-btn-hover-bg: #6528e0;
    --bs-btn-hover-border-color: #6528e0;
    --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
    --bs-btn-active-color: var(--bs-btn-hover-color);
    --bs-btn-active-bg: #5a23c8;
    --bs-btn-active-border-color: #5a23c8
}

.bd-mode-toggle{
    z-index:1500
}

.bd-mode-toggle .bi{
    width:1em;
    height:1em;
}

.bd-mode-toggle .dropdown-menu .active .bi{
    display:block!important;
}

.container {
  max-width: 960px;
}

.icon-link > .bi {
  width: .75em;
  height: .75em;
}

.nav-link {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
}


.navbar, footer, .offcanvas {
    background-color: #020e50 !important;
}

footer {
	color: #fff !important;
}

#herovid {
    object-fit: cover;
    width: 100vw;
    height: auto;
    max-height: 40vh;
    min-height: 480px;
    top: 0;
    left: 0;
    display: block;
}

.hero-container {
    position: relative;
    width: 100vw;
    max-height: 60vh;
    overflow: hidden;
    /*border-bottom: 8px solid #016134;*/
}

.overlay-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    padding: 0;
    max-width: 640px;
    z-index: 1;
    text-shadow: 3px 3px 18px black;
    font-weight: 700 !important;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.38);
    z-index: 1;
}

#map img {
    padding: 2em 5em 5em 5em;
    max-width: 1024px
}

#history-grid-1 {
    width: 50%; float: left; padding: 1em 0.5em 0 0;
}

#history-grid-2 {
    width: 25%; padding: 1em 0.5em 0.5em 0.5em;
}

#history-grid-3 {
    width: 25%;  padding: 1em 0.5em 0.5em 0.5em;
}

#history-grid-4 {
    width: 25%; padding: 0.5em 0.5em 0 0.5em;
}

#history-grid-5 {
    width: 25%; padding: 0.5em 0.5em 0 0.5em;
}



@media only screen and (max-width: 767px) {
    
    #map img {
        padding: 0 0 1em 0;
        max-width: 1024px;
    }
    #teaser-container, #map div div {
        width: 100% !important;
        max-width: none !important;
    }
    .navbar a {padding: 18px 0;}
    .offcanvas-body img {
        width: 60% !important;
    }
    .offcanvas-body a {font-size: 1.4em}
    
    #photogrid div {
        display: inline !important;
    }
    

    #history-grid-1 {
        width: 100%; float: left; padding: 0;
    }

    #history-grid-2 {
        width: 50%; padding: 1em 0.5em 0.5em 0;
    }

    #history-grid-3 {
        width: 50%;  padding: 1em 0 0.5em 0.5em;
    }

    #history-grid-4 {
        width: 50%; padding: 0.5em 0.5em 0 0;
    }

    #history-grid-5 {
        width: 50%; padding: 0.5em 0 0 0.5em;
    }
    
    .overlay-text {
        width: 90%;
    }

    .overlay-text .display-5 {
        font-size: 2.75em;
    }
    
}


footer {
    outline: 8px solid #016134;
}

/*
 * Extra utilities
 */

.flex-equal > * {
  flex: 1;
  text-shadow: 0 0 3em;
}
@media (min-width: 768px) {
  .flex-md-equal > * {
    flex: 1;
  }
}