body {
            margin:0;
            padding:0;
            font-family: 'Roboto Condensed', sans-serif;
        }
        a, a:hover, a:visited {
            color: #black;
        }

       
        .legend {
    background-color: #fff;
    border-radius: 5px;
    bottom: 65px;
    font: 11px/20px 'Roboto Condensed', sans-serif;
    padding: 20px;
    position: fixed;
    z-index: 0;
    max-width: 50vw;
    margin-left: 5vw;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.legend.visible {
    opacity: 0.9;
    visibility: visible;
}

.toggle-button {
    position: fixed;
    right: 10px;
    bottom: 39px;
    z-index: 6;
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 50%;
    padding: 10px;
    font: 12px/20px 'Roboto Condensed', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}

.toggle-button-2 {
    position: fixed;
    right: 10px; 
    bottom: 69px;
    z-index: 6;
    background-color: #fff;
    border: 0px solid #ccc;
    border-radius: 50%;
    padding: 10px;
    font: 12px/20px 'Roboto Condensed', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
}


.toggle-button-2.visible {
    opacity: 1;
    visibility: visible;
}


.toggle-button.visible {
    opacity: 1;
    visibility: visible;
}

        .toggle-button .fa {
            font-size: 13px;
        }
 
        .legend h4 {
            margin: 0 0 10px;
        }

        .circle {
            border-radius: 50%;
        }
 
        .legend div span {
            display: inline-block;
            height: 10px;
            margin-right: 5px;
            width: 10px;
        }
        #legend {
  padding: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  line-height: 18px;
  height: 150px;
  margin-bottom: 40px;

}

.legend-key {
  display: inline-block;
  border-radius: 20%;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
        #map {
            top:0;
            height: 100vh;
            width:100vw;
            position: fixed;
        }
        #mapInset {
            bottom:50px;
            right:30px;
            height: 180px;
            width:250px;
            max-width:100%;
            position: fixed;
            z-index: 1;
            opacity: 1;
            transition: opacity 0.5s ease-in-out;
            pointer-events: none;
        }
        #mapInset .mapboxgl-ctrl-bottom-left{
            display: none;
        }
        @media (max-width: 500px) {
            #mapInset {
                display: none;
            }
        }
#header {
    margin: auto;
    width: 100%;
    position: relative;
    z-index: 5;
    background-image: url("images/pexels-alteredsnaps-17231430.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 40%;
    height: 100vh;
    
    /* Glass effect */
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /*border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);*/
   /* box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}        
        #header p{
            font-size: 1.8vh;
            text-align: justify;
            margin-left: 34vw;
            margin-right: 34vw;
            color: black;
        }


         #header h1{
            margin: 0;
            padding: 2vw 2vw 0vw 2vw;
            font-family: 'Roboto Condensed', sans-serif;
            text-align: left;
            font-size: 7.5vh;
            color: white;
            /*-webkit-text-stroke: 0.9px black;*/
            padding-top: 40vh;
        }

        


        #header h2{
            margin: 0;
            padding: 0vw 0vw 0vw 2.25vw;
            text-align: left;
            font-size: 3.5vh;
            color: white;
            padding-bottom:5vh;
            font-family: 'Roboto Condensed', sans-serif;
            /*-webkit-text-stroke: 0.5px black;*/
        }

        #header h3{
            margin: 0;
            padding: 0.5vw 0vw 0vw 2.3vw;
            text-align: left;
            font-family: 'Roboto Condensed', sans-serif;
            font-weight: 300;
            font-size: 2vh;
            color: white;
            padding-bottom:0vh;
        }




        #interlude p{
            font-size: 1.8vh;
            text-align: justify;
            margin-left: 34vw;
            margin-right: 34vw;
            background-color: : white;
        }

        #footer {
            width: 100%;
            min-height: 5vh;
            padding-top: 2vh;
            padding-bottom: 2vh;
            text-align: center;
            line-height: 25px;
            font-size: 13px;
            position: relative;
            z-index: 5;
        }
        #interlude {
            width: 100vw;
        }
        video {
            margin-left: 45vw;
            width:32%;
            transform: translate(-50%);
        }
        #features {
            padding-top: 10vh;
            padding-bottom: 10vh;
        }
        .hidden {
            visibility: hidden;
        }
        .centered {
            width: 59vw;
            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: #fafafa;
        }
        .dark {
            color: #fafafa;
            background-color: #444;
        }
        .step {
            padding-bottom: 50vh;
            /* margin-bottom: 10vh; */
            opacity: 0.25;
            transition: opacity 0.5s; /* Apply a transition to the opacity property */
        }
        .step.active {
            opacity: 0.9;
        }

        .step.hidden1 {
        opacity: 0 ;
}

        .step div {
            padding:  25px 50px;
            line-height: 25px;
            font-size: 13px;
            border-radius: 5px;
        }

        .step img {
            width: 100%;
        }

        @media (max-width: 750px) {
            .centered, .lefty, .righty, .fully {
                width: 90vw;
                margin: 0 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;
        }