/* NHPC Colors Reference:

New Palette:
Brown: #b97b51
Yellow: #ffd140
Teal: #79a799
Grey: #414042
Light Yellow: #FEE7AB
Light Teal: #ABC4B2

Classic Palette:
Orange: #DD7500
Green: #707014
Blue: #AFBCBF
Maroon: #51261C

*/

* {
    box-sizing:border-box; 
}

body { background-color: #ABC4B2; 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%;
}

#sidebarMenu { 
    z-index:3; 
    color:#fff!important; 
    background-color:#79a799!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) 
}

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:550px; }
figure.side figcaption { max-width:250px; }
figure.multi figcaption { max-width:210px; }
figure.multi { width:50% }


footer, header, header a {color:#fff!important; background-color:#79a799!important;}

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

#titleBanner { 
    width:100%; 
    text-align:center;
    background:url(leaves-background-left.svg) no-repeat left top; 
    background-size:contain;	
}

#titleBanner h1 { line-height:1.1; color:#414042!important; font-size:36px!important;}
#titleBanner img { max-width:80%; }

#mainContent { text-align:left;}

#mainContent * h2 { line-height:1.2; color:#51261C!important; font-size:28px!important; }
#mainContent * h3 { line-height:1.2; color:#414042!important; font-size:24px!important; }

hr { 
    height: 8px; 
    width:50%; 
    background-color:#AFBCBF!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) {
    #titleBanner { 
	background:url(leaves-background-left.svg) no-repeat left top, url(leaves-background-right.svg) no-repeat right top; 
	background-size: contain, contain;
    }
    #titleBanner img { max-width:70%; }
    .w3-main { width:725px!important; font-size:18px;}
    section { margin:20px }
    #titleBanner h1 { font-size:48px!important; }
    #mainContent * h2 { font-size:36px!important; }
    #mainContent * h3 { font-size:28px!important; } 
    figure.side { float:right; max-width:50% }
}

/* For computers */

@media (min-width:993px) { 
    #titleBanner { 
	background:url(leaves-background-left.svg) no-repeat left top, 
	    url(leaves-background-right.svg) no-repeat right top; 
	background-size: contain, contain;
    }
    #titleBanner img { max-width:65%; }
    .w3-main { width:725px!important; margin-left:250px; top:0; font-size:18px; } 
    section { margin:20px }
    #titleBanner { position:relative; top:0;}
    #titleBanner h1 { font-size:64px!important; }
    #mainContent * h2 { font-size:48px!important; } 
    #mainContent * h3 { font-size:36px!important; } 
    figure.side { float:right; max-width:50% }
}