:root {
    --plan1: rgba(140,45,4, 1.0);
    --plan2:rgba(230,146,62, 1.0);
    --plan3:rgba(225,221,176, 1.0);
    --plan4:rgba(78,185,159);
    --plan5:rgba(15,80,83);
    --plan6:rgba(193,193,193,1.0);
    --plan7:rgba(94,94,94,1.0);
    --fill:#003757;
    --fillopacity:rgba(0,55,87, 0.8);
    --red:rgb(204,80,62);
    --disabled:#ddd;
    --font:"Roboto",Arial,sans-serif
}

.content-item__title {
    text-align:center;
    color: #3e5266;
    font-size: 58px;
    margin-top: 20px;
    font-weight:800;
    line-height:1.2;
    font-family:var(--font);
}
.content-item__spacer {text-align:center;font-style:italic;color:var(--red);}
.content-item__date {color:var(--red);    font-size: 18px;font-weight:500;padding-top:5px;}




/* ///////////////////////// */
/*           Pie chart          */
/* ///////////////////////// */

.reopening-text {
    text-align:center;
    font-size:32px;
    color:#000000;
    font-family:var(--font);
    font-weight:700;
    float:right!important;
    padding-top:10%;
    line-height:1.2;

}

.reopening-text #custom {display:none;}

.reopening-text .tbd {font-weight:400;font-size:30px;color:rgb(100,100,100)}
#title-slide {display:table;width:100%;}
#title-slide .split {
    width:50%;
    display:table-cell;
    vertical-align:middle;

}

.emphasis {font-weight:800;}

#text-online-pie {
    color:var(--plan5);


}

#text-tbd-pie {color:var(--plan7)}

#text-inperson-pie {
    color:var(--plan1);


}

#text-tbd-pie {
    color:var(--plan7);


}

/* ///////////////////////// */
/*           Search          */
/* ///////////////////////// */
#selector #search_inst_results {position: absolute;
top: 100%;
width: 100%;
background-color: rgb(250,250,250);
box-shadow: 1px 2px 4px rgba(0,0,0,0.1);
z-index: 202;
border-radius: 4px;
display: none;}
#selector #search-group {width:100%;text-align:center;}
#selector #search-group div {width:-webkit-fill-available;}
#selector #search-group p {margin-right:10px;}
#selector #search-group p, #selector #search-group .input-holder {display:inline-block;} 
#selector .opendrawer #search_inst_results {display: block;}
#selector #search_inst_results a { border-bottom: 2px solid white;
    clear: both;
    display: block;
    padding: 0;
    padding-left: 17px;
    height: auto;
    padding-top: 6px;
    text-align: left;
    cursor: pointer;
    font-family: "Source Sans Pro",sans-serif;
    font-size: 13px;
    line-height: 1.3;
    margin: 0;
    min-height: 30px;}
#selector #search_inst_results a .name {font-size: 14px; font-weight: normal; line-height: 16px; float: none; padding-top: 2px; display: block;}
#selector #search_inst_results a:hover {text-decoration: none; background-color:var(--fill); color: white;}
#selector #search_inst_results p { font-family: var(--font); text-align: center; color: #3f3f3f; font-weight: normal; font-size: 14px; line-height: 18px; padding: 8px;}
#selector-nav {
    text-align: center;
    margin: 0 auto;
    font-family: var(--font);
    font-size: 16px;
    padding:10px 20px;
    color:#003757;
    font: weight 500;
    text-transform:uppercase;
    background-color: rgba(232,236,243,1);
}
#selector.fixed {
    position:fixed;
    left:0;
    top: 60px;
    width: 100%;
    padding-top: 10px;
    /*border-bottom: 1px solid #d3d3d3;*/
}
#selector {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 0px;
    /*border-bottom: 1px solid #d3d3d3;*/
    font-family: var(--font);
    padding-bottom: 10px;
}

.reopening-text.no-padding {padding-top:10%;}

#selector p {
    max-width:600px;
    margin:0 auto;
    font-size:20px;
    font-family:var(--font);
    color:var(--fill);
    text-transform:uppercase;
}

#selector .input-holder {
    position: relative;
    max-width: 600px;
    margin: 0 auto;
}

#selector input {
    display: block;
    width: 100%;
    padding: 0.5em;
    border: 1px solid #eee;
    margin: 0 0 0.2em 0;
    box-sizing: border-box;
}

#selector #search_inst_results {
    max-height: 200px;
    overflow-y: auto;
}

button.button-exit {
    position: absolute;
    right: 0;
    top: 0.25em;
    height: calc(100% - 0.7em);
    font-family: inherit;
    line-height: 1;
    padding: 0;
    width: 2em;
    right: 0.35em;
    font-weight:700;
    border: none;
    background-color: var(--fill);
    color: #FFF;
    transition:background-color 400ms ease-out;
    -webkit-transition: background-color 400ms ease-out;
    -moz-transition: background-color 400ms ease-out;
    -ms-transition: background-color 400ms ease-out;
    -o-transition: background-color 400ms ease-out;
}
button.button-exit:hover {background-color:var(--fillopacity)}
@media(max-width:1100px) {
    .reopening-text {font-size:30px;}
    .reopening-text.no-padding {padding-top:5px;}

}

@media(max-width:1024px) {
    #selector.fixed {top:65px;}
    #selector #search-group {text-align:left;padding:10px;max-width: 700px;margin: 0 auto;}
    #selector .input-holder {max-width:none;}
    #selector #search-group div {width:100%;}
    #selector.fixed #search-group {text-align:center;padding:0px;max-width:none;margin:None;}
    #selector.fixed .input-holder {max-width:600px;}
    #selector.fixed #search-group div {width:-webkit-fill-available;}


}

@media(max-width:1000px) {
    .reopening-text {font-size:25px;}

}

@media(max-width:900px) {
    div.split, #title-slide .split {
        width:100%;
        display: block;
        float: none!important;
        margin-bottom:20px;
        padding-top:0px;
    }

    #pie1 {margin-bottom:0px!important;}

    .reopening-text {font-size:208x;padding-top:10px;}
    .reopening-text .tbd {font-size:22px}

    .content-item__title{font-size:45px;}
    .content-item__date{font-size:18px;}





}

@media(max-width:500px) {
    .reopening-text {font-size:20px;}
    .reopening-text .tbd {font-size:14px}
    .content-item__title{font-size:30px;}
    .content-item__date{font-size:12px;}
    #selector p {font-size:18px;}
    div.split, #title-slide .split {padding-bottom:0px;}
}

@media(max-width:400px) {
    .reopening-text {font-size:18px;}
    .reopening-text .tbd {font-size:14px}
    .content-item__title{font-size:32px;}
    .content-item__date{font-size:12px;}
    #selector p {font-size:14px;}
}

