.box {
    display: flex;
    flex-flow: column;
    height:100%;
}
.box #title{
    /* The flex is short for 'flex-grow' 'flex-shrink' 'flex-basis', so here can't grow (value 0) can shrink (value > 0) and auto sized */
    flex:0 1 auto;
    background-color: cornflowerblue;
}

.box #title h1{
    font-family:'Skranji', cursive, sans-serif;
    font-size: 72pt;
    margin: 0px 0px;
    text-align: center;
    color:antiquewhite;
    
}

.box #intro{
    flex:0 1 auto;
    font-family: 'Source Sans Pro', 'Verdana', sans-serif;
    font-size:13pt;
    margin: 10px 0px;
    background-color: antiquewhite;
    color:cornflowerblue;
    padding:5px 20px;
    line-height: 1.1;
    
}

/*#wrapper{position: relative; top:15%; height: 85%; width: 100%}*/
.box #map {
    /* Leaflet needs a defined height for the map, so this sets it for 800px.
    This doesn't really work with the flex layout because it doesn't shrink and expand
    (gives a scroll bar instead), but it DOES work well with the other content above it
    when that's re-sized, so I think it's good as-is here.
    */
    height:800px;
    flex:1 1 auto;
}

.slide-section{
    /*display:flex;*/
    width:98%;

}

#slider{
    width:100%;
    height:30px;
    background: lightseagreen;
    outline: none;
    opacity: 0.7;
    transition: opacity 0.2s;
    border: solid gainsboro 2px;
    border-radius: 5px;
}

#slider:hover{
    opacity: 1;
}

.sliderTicks{
    display: flex;
    justify-content:space-between;
    /*padding: 0 5px;*/
}

.sliderTick{
    text-align: center;
    /* Change the padding to change the width of the slider too*/
    padding: 0 5px;
}

.button-div{
    display: flexbox;
    height:40px;
}

.background-div{
    display: flexbox;
    height:40px;
}

.slider-div {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

.button-div {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

.background-div {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255,255,255,0.8);
    box-shadow: 0 0 15px rgba(0,0,0,0.2);
    border-radius: 5px;
}

#slide-label {
    text-align: center;
}

#source{
    font-size: smaller;
    font-family: 'Courier New', Courier, monospace;
}