/*video.test {
  top: 0;
  width: 26vw;
  margin-left: 70vw;
  margin-top: 130vh;
  padding-top: 5vh;
}*/

#sidebar {
    position: fixed;
    /* padding-bottom: 5vh; */
    /* padding-right: 5vw; */
    width: 73vw;
    bottom: 1vw;
    /* right: -10vw; */
    left: 61vw;
}
#sidebar > img {
    height: 15vw;
    display: block;
}
#viewer {
    position: fixed;
    padding-top: 5vh;
    padding-right: 5vw;
    width: 73vw;
    left: 55vw;
    transition:all 0.3s ease
    /*height: 10vw*/
    /*background-color: red;*/
/*    border: 5px solid red;*/
}
#viewer > img{
    position: absolute;
    width: 50%;
    display: none;
    transition:all 0.3s ease
}
#vid{
    position: absolute;
    width: 50%;
    opacity: 0;
    transition:all 0.3s ease;
    z-index: 1000;
}
#vid:hover{
        opacity: 100;
        /*-webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);*/
}
#viewer:hover{
        -webkit-transform: scale(1.3);
        -ms-transform: scale(1.3);
        transform: scale(1.3);
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
}

/*.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
*/
#story {
    position: relative;
}

div.mapboxgl-popup-content > img {
    max-width: 320px;
}
body {
    margin:0;
    padding:0;
    font-family: sans-serif;
    width: 0;
}
/* a, a:hover, a:visited {
    color: lightblue;
} */
#map {
    top:0;
    height: 100vh;
    width:100vw;
    position: fixed;
    z-index: -5;
}
#header {
    margin: 3vh auto;
    width: 90vw;
    padding: 2vh;
    text-align: center;
    display:none;
}
#footer {
    width: 100vw;
    min-height: 5vh;
    padding-top: 2vh;
    padding-bottom: 2vh;
    text-align: center;
    line-height: 25px;
    font-size: 13px;
}
#features {
    padding-top: 10vh;
    padding-bottom: 10vh;
    z-index: 100;
}
.centered {
    width: 50vw;
    margin: 0 auto;
}
.lefty {
    width: 33vw;
    margin-left: 5vw;
}
.righty {
    padding-top: 10vh;
    width: 33vw;
    margin-left: 62vw;
    /*position: absolute;*/
    top: 0;
    left: 0;
    bottom: auto;
    width: 100%;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    z-index: 1000;
}
.light {
    color: #444;
    background-color: #fafafa;
}
.dark {
    color: #fafafa;
    background-color: #444;
}
.theme_1 {
    background-color: #ff40ff;
}
.theme_2 {
    background-color: #d883ff;
}
.theme_3 {
    background-color: #0096ff;
}
.theme_4 {
    background-color: #76d6ff;
}
.theme_5 {
    background-color: #00fa00;
}
.theme_6 {
    background-color: #d5fc79;
}

#theme-dot {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    display: inline-block;
}


/* .street_1 {
    opacity: 0;
} */

.step {
    padding-bottom: 50vh;
    /* margin-bottom: 10vh; */
    opacity: 0.25;
}
.step.active {
    opacity: 1;
}

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

 .noUi-tooltip {
    padding: 5px
}


#timelapse{
    padding:  0px 0px;
    line-height: 0px;
    font-size: 0px;
    margin-top: 29px;
}
#timelapse div {
    padding:  0px 0px;
    line-height: 0px;
    font-size: 0px;
}

.step img {
    width: 100%;
}
#icon {
    width: 50;
}

@media (max-width: 750px) {
    #features {
        width: 90vw;
        margin: 0 auto;
    }
}


/*# sourceMappingURL=/style.e308ff8e.css.map */