* { font-family:Arial, Helvetica, sans-serif; }
h2 { font-size: 16px; padding-top: 0;}
.hcontainer {
    display: flex;
    flex-direction: row;
}

.vcontainer {
    display: flex;
    flex-direction:column;
}

.fixed { position: fixed}

.wrap { flex-wrap: wrap; }
.space-around { justify-content: space-around;}
.space-between { justify-content: space-between;}

.align-self-center { align-self: center;}
.align-self-baseline { align-self: baseline;}
.align-self-end { align-self:flex-end;}

.align-items-center { align-items: center;}
.align-items-baseline { align-items: baseline;}
.align-items-start { align-items: flex-start;}

.bold { font-weight: bold;}
.italic {font-style: italic;}

.large { font-size: 16px;}
.medium { font-size: 14px;}
.small { font-size: 12px;}
.tiny { font-size: 10px;}

.quote { font-size: 24px; text-align:justify;}

.gray { color: gray;}

.fixed-width-350 { width: 350px; }
.fixed-width-90 { width: 90px; }

.rel-width-margin { width: 25vw; }

.full-width { width: 95%; }
.twothirds-width { width: 60%; }
.half-width { width: 45%; }
.third-width { width: 30%; }
.fourth-width { width: 22%; }

.serif { font-family:'Times New Roman', Times, serif;}

.full-height {height: 95vh;}
.half-height {height: 45vh;}

.justify-center { text-align: center;}

.border { border: 1px solid;}
.padding-top { padding-top: 10px;}
.padding-twice { padding-top: 20px;}

.padding-all { padding: 5px; }
.collapse { visibility: collapse;}

.circle { width: 12px; height: 12px; border-radius: 8px;}

#title { font-size: 4vw; opacity: 0.7;}
.compress-line { line-height: 2.5vw;}

.myblue-bkgrnd { background-color: #0000cd;}
.mygray-bkgrnd { background-color: gray;}
.mygreen-bkgrnd { background-color: #808000;}

.myblue { color: #0000cd;}
.mygray { color: gray;}
.mygreen { color: #808000;}

#map { width: 40vw; height: 35vw; }

@media only screen and (max-width: 400px) {
    #title { font-size: 7vw;}
    .compress-line { line-height: 5vw;}

    #map { width: 90vw; height: 65vw; }

    #left_panel { width : 95% }
    .quote { font-size: 14px; }
}

@media only screen and (min-width: 401px) and (max-width: 600px) {
    #title { font-size: 7vw;}
    .compress-line { line-height: 5vw;}

    #map { width: 90vw; height: 65vw; }

    #left_panel { width : 95% }
    .quote { font-size: 16px; }
}

@media only screen and (min-width: 601px) and (max-width: 851px) {
    #title { font-size: 6vw;}
    .compress-line { line-height: 3.5vw;}

    #map { width: 60vw; height: 50vw; }
    #left_panel { width : 60% }
    .quote { font-size: 17px; }
}

@media only screen and (min-width: 852px) and (max-width: 986px) {
    #left_panel { width : 50% }
    .quote { font-size: 18px; }
}

@media only screen and (min-width: 992px) and (max-width: 1295px){  
}

@media only screen and (min-width: 1296){
}