body{
    overflow-x:hidden;
}
.scroll-container{
    display:block;
}

/*background/foreground*/
.background-item{
    width:100%;
    height:100vh;
    z-index:0;
    position:sticky;
    display:block;
    top:0;
    margin-bottom:20%;
}
.foreground-item{
    position:relative;
    padding-bottom:50%;
}
.hidden{
    display:none !important;
}

/*positioning*/
.center, .center-wide{
    text-align:center;
}
.half-width{
    width:50%;
}
.full-width, .fit{
    width:100%;
}
.half-height{
    height:50%;
}
.full-height, .fill{
    height:100%;
}

/*title*/
.title{
    height:100vh;   
}
.title h1{
    font-size:100px;
}

/*bottom margin styles*/
.row{
    margin-bottom:30%;
    padding-right: var(--bs-gutter-x,.75rem);
    padding-left: var(--bs-gutter-x,.75rem);
}

/*smaller bottom margin for rows in the foreground*/
.foreground-item > .row{
    margin-bottom:60%;
}
.no-margin{
    margin-bottom:0 !important;
}
.lg-margin{
    margin-bottom:100% !important;
}
.sm-margin{
    margin-bottom:25% !important;
}

/*block styles*/
.rounded{
    border-radius:10%;
}
.background-white{
    background-color:white;
    padding:20px;
}
.background-transparent{
    background-color:rgba(255,255,255,0.8);
    padding:20px;
}

/*credits section*/
.credits{
    text-align:left;
    margin-bottom:50px;
}
.credits > p{
    margin-bottom:5px;
}

/*interactions*/
.no-event{
    pointer-events:none;
}

/*temp*/
#map, #background-map, .full-screen{
    height:100vh;
    width:100vw;
}

@media screen and (min-width: 1200px) {
    .center{
        flex: 0 0 auto;
        margin-left:25%;
        width:50% !important;
    }
    .center-wide{
        flex: 0 0 auto;
        margin-left:15%;
        width:70% !important;
    }
    .left{
        flex: 0 0 auto;
        margin-left: 8.33333333%;
        width: 41.66666667% !important;
    }
    .right{
        flex: 0 0 auto;
        margin-left:50%;
        width: 41.66666667% !important;
    }
    .right-inline{
        width: 41.66666667% !important;
    }
}
    @media screen and (min-width: 720px) and (max-width: 1199px) {
    .center{
        flex: 0 0 auto;
        margin-left: 16.66666667%;
        width: 66.66666667% !important;
    }
    .center-wide{
        flex: 0 0 auto;
        margin-left:15%;
        width:70% !important;
    }
    .left{
        flex: 0 0 auto;
        width: 50% !important;
    }
    .right{
        flex: 0 0 auto;
        margin-left:50%;
        width: 50% !important;
    }
    .right-inline{
        flex: 0 0 auto;
        width: 50% !important;
    }

}
@media screen and (min-width: 540px) and (max-width: 719px) {
    .center, .center-wide{
        flex: 0 0 auto;
        margin-left: 8.33333333%;
        width: 83.333333333% !important;
    }
    .left{
        flex: 0 0 auto;
        width: 50% !important;
    }
    .right{
        flex: 0 0 auto;
        margin-left:50%;
        width: 50% !important;
    }
    .right-inline{
        flex: 0 0 auto;
        width: 50% !important;
    }
}
@media screen and (max-width: 539px) {
    .center, .center-wide{
        width: 100% !important;
    }
    .left{
        width: 100% !important;
    }
    .right{
        width: 100% !important;
    }
    .right-inline{
        width: 100% !important;
    }
    .row{
        margin-bottom:50%;
    }
    .foreground-item > .row{
        margin-bottom:100%;
    }
}

/*bootstrap carousel control*/
#next-button, #prev-button{
    background:rgba(0,0,0,0.1) !important;
    width:75px;
}
#next-button:hover, #prev-button:hover{
    background:rgba(0,0,0,0.2)
}