/*************************************************************** 
Colors:
CHRP green 		= #5C6731  rgb(92, 103, 49)
light green		= #C7CFA5  rgb(199, 207, 165)
dark blue		= #1B3969  rgb(27, 57, 105)
light blue		= #406CB4  rgb(64, 108, 180)
coral			= #B56053  rgb(181, 96, 83)
light accent	= #EBFFA8  rgb(235, 255, 168)

Images: 380px Wide
Tags: 420px Wide by 160px Tall
Staff, Social, CHRP thumbnails: 380 x 285px
Border on tags: 6px wide

https://fancyapps.com/fancybox/3/

****************************************************************/

:root {
  --dgreen: #5C6731;
  --lgreen: #C7CFA5;
  --dblue:  #1B3969;
  --lblue:  #406CB4;
  --coral:  #B56053;
  --accent: #EBFFA8;
  --text:   #000000;
}

html,body{height:100%;}
body{
	background: var(--lgreen);
	font: normal normal normal 15px/1.4 Verdana, Geneva, Tahoma, sans-serif;
	color: var(--text);
	position: relative;
	min-width: 1000px;
}

p{margin-bottom:18px}
a{color:var(--text); outline:none; cursor:pointer; text-decoration:underline;}
a:hover{color:blue;}
img{height:auto; width:100%;}
ol{padding:0 20px 18px;}
ul{list-style: disc outside; margin-left:20px; padding-bottom:18px;}
ul li { padding: 0; margin: 0; }
ul a { padding: 5px; display: block; }

/********************  Header styles ************************************************/
h1{font: normal 700 20px/24px Verdana, Geneva, Tahoma, sans-serif; color: var(--text);}
h2{font: normal 700 20px/24px Verdana, Geneva, Tahoma, sans-serif; color: var(--text);}
h3{font: normal 600 16px/20px Verdana, Geneva, Tahoma, sans-serif; color: var(--text);}
h4{font: normal 400 16px/20px Verdana, Geneva, Tahoma, sans-serif; color: var(--text);}
h5{font: normal 400 16px/20px Verdana, Geneva, Tahoma, sans-serif; color: var(--text);}
h6{font: bold 13px/18px Verdana, Geneva, Tahoma, sans-serif;       color: var(--coral);}

/********************** Header ********************************************************/
#header{background-color:var(--lgreen);}
#logo{margin:auto; padding:20px 20px 5px 20px; float:left; width:169px; height:59px; }
.flex-wrapper {display: flex; min-height: 100vh; flex-direction: column; justify-content: flex-start;}

/********************** Global Content ************************************************/

#content{padding-top:15px; padding-bottom:15px;}

.page{background-color:white; padding-top:10px;}

.box{
	background: white;
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	box-shadow: 1px 1px 0px 5px rgba(0,0,0,0.08);
	-moz-box-shadow: 1px 1px 0px 5px rgba(0,0,0,0.08);
	-webkit-box-shadow: 1px 1px 0px 5px rgba(0,0,0,0.08);
	margin-bottom: 10px;
}
.box h1 {background: var(--dblue);color: #ffffff;display: block;padding: 14px 17px 14px 25px;text-align: center;}
.box h3 {padding: 5px 0; font-weight:bold;}
/*.box div{padding:20px;} */

.frame{background: white; border: thick var(--lblue) solid; margin-bottom: 10px;}

.one-centered-pic{max-width:350px; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom:20px;}
.one-centered-vid{width:50%; padding:2px; margin:0 auto;}
.three-pics{margin: -10px 10px 20px 10px;}

.long-link {word-break: break-all;}

.icon 	{height:40px; width:40px;}

.aligncenter{text-align:center}
.last-item{margin-right:0 !important; margin-bottom:0 !important;} 
.pad-all{padding:20px;}
.pad-bottom{padding-bottom:15px;}
.justify{text-align: justify;}

/************************* contact.html ****************************************************/
.contact-info{margin: 14px 10px 30px; display: inline-block;}

/************************* staff.html  ***************************************************/
.staffpic{width:340px; float:left;	margin-right:20px; padding:0;} /* has to come after .frame for padding to work*/

/************************* chrp.html ***************************************************/
.chrp-pics{margin-left: 12px;margin-right: 0px;margin-top:12px;margin-bottom:12px;}

/*************************** Footer *****************************************************/
#footer{
	background: var(--dgreen);
	padding-top: 40px;
	font: normal 400 12px/15px Verdana, Geneva, Tahoma, sans-serif;
	color: white;
	margin-top: auto;
}
#footer h4{border-bottom: thin white solid; margin-bottom:15px; color: white; text-transform:uppercase;}
.footer-list {list-style:none; margin-left:0; padding-bottom:0;}
.footer-list li{font: bold 15px/15px Verdana, Geneva, Tahoma, sans-serif;margin-bottom: 15px;}
.footer-list a{color:white; text-decoration:none;}
.footer-list a:link{color:white; text-decoration:none;}
.footer-list a:visited{color:white; text-decoration:none;}
.footer-list a:hover{color:var(--accent);text-decoration:none;}
.footer-list a:active{color:var(--accent); text-decoration:none;}
		
#footer .spacing{padding:31px 30px 28px;}
.footer-bg{background: url("../images/footer-tail.png") center bottom repeat-x;}
.footer-text{float:left; text-transform:uppercase;}
	
/*========================================   MOBILE    ==========================================*/
@media only screen and (max-width: 995px) {
	body{min-width:768px;}
	img{width:100%; height:auto;}
	.staffpic{width:220px;} 
	p{margin-bottom:9px}
		
} /* end 1st media */

@media only screen and (max-width: 767px) {
	body{min-width:480px;}
	h2{padding-left:10px;padding-right:10px;}
	.page{padding-top:0;}
	.frame {margin:10px;}
	#content{padding-top:15px; padding-bottom:5px;}
	#footer {padding-top:15px;}
	#footer .spacing{padding:20px 30px 18px;}
	#footer h4{margin-bottom:9px;margin-top:10px;}
	.mobile-hide{display:none;}
	.contact-info{margin: 14px 8px 10px; }
	.staffpic{width:340px; margin-right:0px;}
	.one-centered-vid{width:100%; margin:0;}
	.chrp-pics{margin-left:0px; margin-bottom:0px; margin-top:6px;}
	.m-side{margin-left:10px;margin-right:10px;}
	.justify{text-align: left;}
	
} /* end 2nd media */

@media only screen and (max-width: 479px) {
	body{min-width:320px;}
	#footer .spacing{padding:20px 0px 18px;}
	.staffpic{width:230px;}
	#amznCharityBanner {margin-left:-28px;}

} /* end 3rd media */