@charset "UTF-8";
body {box-sizing: border-box;padding: 0; margin: 4px 0 0;  height: 417px; }/*border-top: 1px solid #1bb7d0; border: 2px solid #1bb7d0;padding: 0 18px 8px;*/
body * {box-sizing: border-box; }
.nav_top {border: 4px solid #8f8f8f; padding: 16px; height: 120px; background-color: #caedf3; margin-bottom: 8px;} /*#8cdae7; rgba(114,218,231,0.3)*/
h1 {text-align: center; margin: 0 0 8px; color: #4f4f4f; font: 24px/1 "Heuristica",serif; }/*font-family: arial, sans-serif; text-transform: uppercase;font-weight: normal; line-height: 20px; */
.nav_intro {display: block; margin: 0; font: 16px 'Source Sans Pro', Arial, sans-serif; color: #4f4f4f; }
.navCell {height: 144px; width: 20%; float: left; padding: 0; margin: 0;}
.navCell img {overflow:hidden; display: block; height: auto; width: 86%; margin: 7%; border: 4px solid #212121; border-radius: 70px; -webkit-opacity: 0.5; opacity: 0.5; -webkit-transition: all 0.2s; transition: all 0.2s;}
.thisArticle a {cursor: default;}
.thisArticle img {-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
opacity: 0.3; -webkit-opacity: 0.3;}
.navCell div {cursor: pointer; display: none; z-index: 44;  text-align: center; width: 100%; height: 120px; padding: 16px; background-color: #caedf3; border: 4px solid #8cdae7; color: #2f2f2f; text-decoration: none; top: 4px; left: 0; font: 16px 'Source Sans Pro', Arial, sans-serif;}
.navCell div h2 {margin: 0 0 8px; text-align: center; font: 24px/24px "Heuristica",serif; color: #2f2f2f;}
.navCell a:hover {border-color: #333; border-width: 4px;}

.navCell a:hover img {height: auto; width: 96%; margin: 2%; opacity: 1;}
.thisArticle a:hover img {width: 86%; margin: 7%; opacity: 0.3; -webkit-opacity: 0.3;}
.navCell:hover div {display: block; position: absolute; text-decoration: none; }
.thisArticle:hover div {display: none;}
@media only screen and (max-width: 749px) {
	.nav_top, .navCell div {height: 130px; margin-bottom: 10px;}
	.navCell {height: 131px;}
}
@media only screen and (max-width: 618px) {
	.nav_top, .navCell div {height: 130px; margin-bottom: 10px;}
	.navCell {height: 120px;}
}
@media only screen and (max-width: 570px) {
	.navCell {height: 110px;}
}
@media only screen and (max-width: 488px) {
	.nav_top, .navCell div {height: 150px; margin-bottom: 10px;}
	.navCell {height: 100px;}
}
@media only screen and (max-width: 458px) {
	.navCell {height: 90px;}
}
@media only screen and (max-width: 420px) {
	.nav_top, .navCell div {margin-bottom: 8px;}
	.navCell {height: 85px; width: 21%;}
	.arow.ecol, .arow.acol {margin-left: 8%;}
	.brow.dcol {margin-left: 29%;}
}
@media only screen and (max-width: 390px) {
	h1, .navCell div h2 {font-size: 20px;}
 	.nav_top, .navCell div {height: 140px; padding: 13px 11px; margin-bottom: 7px;}
	.navCell {width: 23%; height: 90px; margin: 0;}
	.arow.ecol, .arow.acol {margin-left: 4%;}
	.brow.dcol {margin-left: 27%;}
}
@media only screen and (max-width: 370px) {
	h1, .navCell div h2 {font-size: 20px;}
 	.nav_top, .navCell div {height: 162px; padding: 13px 10px; margin-bottom: 8px;}
	.navCell {width: 25%; height: 81px;}
	.arow.ecol, .arow.acol {margin-left: 0;}
	.brow.dcol {margin-left: 25%;}
}