@import url("https://use.typekit.net/oyc4mzo.css");

/* 30th Anniversary Palette:
Dark Cool Green: #406657
Medium Cool Green: #5a937e
Light Cool Green: #78a699
Burnt Orange: #c96f32
Maroon: #51261C
Grey: #5a5b5d
Light Blue: #b9c7d4 
*/

* {
    box-sizing:border-box; 
}

body { background-color:#b9c7d4; width:100%; max-width:100%; }

[class^="flex-container"] { 
    display:-webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
    display:-moz-box;         /* OLD - Firefox 19- */
    display:-ms-flexbox;      /* IE 10 */
    display:-webkit-flex;     /* NEW - Chrome */
    display:flex;             /* NEW - Opera 12.1, Firefox 20+ */
    position:relative;
    top:0;
}

.flex-container-outer {
    -ms-flex-pack:center;
    -webkit-justify-content:center;
    justify-content:center;
    width:100%;
    margin: 0 auto;
}

.flex-container-inner {
    -ms-flex-pack:start;
    -webkit-justify-content:flex-start;
    justify-content:flex-start;
    max-width:100%;
}

.w3-hover-burnt-orange:hover {color:#fff!important;background-color:#c96f32!important;}

#sidebarMenu { 
    z-index:3; 
    color:#5a5b5d!important; 
    background-color:#b9c7d4!important; 
    width:250px;
}

nav div * { line-height:1.25 }

.close-button { 
    font-size:18px; 
    padding:2px 10px; 
    text-decoration:none; 
    background:rgba(256, 256, 256, 0.3) 
}

header, header a {color:#5a5b5d!important; background-color:#b9c7d4!important;}
footer {color:#5a5b5d!important; background-color:#b9c7d4!important;}

#titleBanner { 
    width:100%; 
    max-width:100%;
    text-align:left;
    padding-top:10px;
    background:url(leaves-cluster-green.svg) 97% bottom no-repeat; 
    background-size:22%;
}

#titleBanner h1 { color:#51261C!important; font-size:36px!important; padding-bottom: 20px;}
#titleBanner img { max-width:80%;}

#mainContent { text-align:left;}

#mainContent * h1, h2, h3, h4 {line-height:1.2;}
#mainContent * h3, h4 {line-height:1.2; padding-top:10px}
#mainContent * h2 { color:#406657!important; font-size:28px!important; }
#mainContent * h3 { color:#5a5b5d!important; font-size:24px!important; }
#mainContent * h4 { font-weight:bold; color:#2c2c2d!important; font-size:18px!important;}

.w3-main { position:relative; top:56px; background-color:#fff!important; width:100%!important; font-size:16px; color:#1c1c1d; }
section a { color:#c96f32!important }
section a:visited { color:#bdbdbd!important }

figure { margin: 0 auto; padding:10px; text-align:center;}
figure img { max-width:100%; }
figcaption { text-align:left; margin:auto; font-size:85%; line-height:1.15;}
figure.full figcaption { max-width:585px; }
figure.side figcaption { max-width:300px; }
figure.multi figcaption { max-width:210px; }
figure.multi { width:50% }

hr { 
    height: 20px; 
    width:40%; 
    background-color:#BED3CB!important; 
    color:#AFBCBF!important; 
    border-radius:25px; 
    border-width:0px; 
    padding:0px; 
    margin:40px 0 20px; 
    text-align: left; 
}

/* For Tablets Only */

@media (min-width:420px) and (max-width:992px) {
    #sidebarMenu { left:0 }
    .w3-main { width:725px!important; font-size:18px;}
    #titleBanner { padding-left:35px; padding-top:20px; }
    #titleBanner img { max-width:70%; }
    #titleBanner h1 { font-size:48px!important; }
    section { margin:20px }
    #mainContent * h2 { font-size:36px!important; }
    #mainContent * h3 { font-size:28px!important; } 
    #mainContent * h4 { font-size:18px!important; }
    figure.side { float:right; max-width:50% }

}

/* For computers */

@media (min-width:993px) { 
    .w3-main { width:725px!important; margin-left:250px; top:0; font-size:18px; }
    #titleBanner { padding-left:35px; padding-top:20px; }
    #titleBanner img { max-width:65%; }
    #titleBanner { position:relative; top:0;}
    #titleBanner h1 { font-size:54px!important; }
    section { margin:20px }
    #About {margin-top:0px }
    #mainContent * h2 { font-size:42px!important; } 
    #mainContent * h3 { font-size:30px!important; } 
    #mainContent * h4 { font-size:20px!important; }
    figure.side { float:right; max-width:50% }
}