@charset "UTF-8";
body {box-sizing: border-box;padding: 0; margin: 0 auto 0;  max-width: 600px; height: 200px; }/*border-top: 1px solid #1bb7d0; border: 2px solid #1bb7d0;padding: 0 18px 8px;*/
body * {box-sizing: border-box; }
.nav_top {margin-bottom: 0; height: 60px;} /*#8cdae7; rgba(114,218,231,0.3)*/
h1 {text-align: center; margin: 0; }/*font-family: arial, sans-serif; text-transform: uppercase;font-weight: normal; line-height: 20px; */
h1 a {color: rgba(0,122,173,0.75); font: 24px/1 "Heuristica",serif; text-decoration: none;}
h1 a:hover {color: #007aad;}
.nav_intro {display: block; margin: 0; font: 16px 'Source Sans Pro', Arial, sans-serif; color: #4f4f4f; text-align: center;}
.navCell { width: 20%; float: left; padding: 0; margin: 0; padding: 10px; overflow:hidden; }
.navCell img { display: block; height: auto; width: 100%; border: 4px solid #007aad;/*#8cdae7;*/ /*margin: 7%;  border-radius: 100px;*/ -webkit-opacity: 0.75; opacity: 0.75; -webkit-transition: all 0.2s; transition: all 0.2s;}
/*opacity: 0.3; -webkit-opacity: 0.3;}*/
.navCell span {cursor: pointer; display: none; z-index: 44;  text-align: center; width: 100%; height: 60px; /*padding: 16px; */background-color: white; color: #2f2f2f; text-decoration: none; top: 2px; left: 0; font: 16px 'Source Sans Pro', Arial, sans-serif;}
/*.navCell div span {display: block; width: 100%; max-width: 600px; margin: 0 auto;}*/
.navCell span h2 {margin: 20px 0 0; text-align: center; font: 24px/24px "Heuristica",serif; color: #007aad;}
.navCell:hover {border-color: #333; border-width: 4px;}
.navCell:hover img {height: auto; width: 110%; margin: -5%; opacity: 1;}
.navCell:hover span {display: block; position: absolute; text-decoration: none; }
@media only screen and (max-width: 480px) {
	.nav_intro {font-size: 14px;}
	.navCell {padding: 5px; margin-top: 15px;}
	.navCell img {border-width: 3px;}
}
@media only screen and (max-width: 360px) {
	.nav_intro {font-size: 13px;}
	.navCell {padding: 4px; margin-top: 20px;}
	.navCell img {border-width: 2px;}
}