/*************************************************
************* HoverAlls Main Styles **************
**************************************************/
/* MASTER STYLING FOR CONTAINER */
.hoveralls_container {overflow:hidden; position:relative; padding:0px;}  
/* MASTER STYLING FOR BACKGROUND */
.hoveralls_background {width:100%; position:absolute;} 
/* MASTER STYLING FOR TEXT */
p.hoveralls_text {margin-top:0px; margin-bottom:0px; position:relative;}
/* MASTER STYLING FOR TOP DROP MODE */
#top_drop {width:100%; height:50px; margin:0px; position:fixed; z-index:999999;}
/* TICKER SPACER */ 
.tickerspacer {padding:0px 10px;}
/* TOOLTIP CONTAINER */ 
.hv_tooltip {position:absolute; z-index:99999;}
/* OVERLAY - APPLY YOUR OWN COLOR OR IMAGE USING THE OVERLAY_CLASS SETTING AND YOUR OWN CLASS */
#hv_overlay {width:100%; height:100%; position:fixed; top:0px; left:0px; z-index:999999; display:none; -moz-opacity:0.8; -khtml-opacity:0.8; opacity:0.8; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}
/* SET THE MAX WIDTH TO KEEP LIGHTBOX IMAGES FROM BEING TOO LARGE */
.hv_lightbox_img {max_width:1000px; position:absolute;}

.captionbackground {background:#fff; border-top:1px solid #fff; border-bottom:1px solid #fff;}
.captext {color:#1c374a; line-height:34px; font-size:14px; text-align:center; padding-top:20px; font-weight:200;}

/* Bruce T.  Added the "container" prefix to limit the "box-sizing" handling below to only apply within the grid space - otherwise it affects Stream's layouts. */

.container *,
.container *:after,
.container *:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	padding: 0;
	margin: 0;
}

/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
    content:" ";
    display:table;
}

.clearfix:after {
    clear:both;
}

.clearfix {
    *zoom:1;
}
/* Sets the width of the overall container */
/* Making this narrower will reduce the number of horizontal columns */
.container {
	width:100%;
	position:relative;
}

.container > header {
	width:90%;
	max-width:1240px;
	margin:0 auto;
	position:relative;
	padding:0 30px 50px 30px;
}

.container > header {
	padding:60px 30px 50px;
	text-align:center;
}

.container > header h1 {
	font-size:34px;
	line-height:38px;
	margin:0 auto;
	font-weight:300;
}

.container > header h1 span {
	display:block;
	font-size:20px;
	font-weight:300;
}

.main > p {
	text-align:center;
	padding:50px 20px;
}

/* Header Style */
.codrops-top {
	line-height:24px;
	font-size:11px;
	background:#fff;
	background:rgba(255, 255, 255, 0.5);
	text-transform:uppercase;
	z-index:9999;
	position:relative;
	box-shadow:1px 0px 2px rgba(0,0,0,0.2);
}

.codrops-top a {
	padding:0px 10px;
	letter-spacing: 1px;
	color:#458cc7;
	display:inline-block;
}

.codrops-top a:hover {
	background:rgba(255,255,255,0.9);
	color:#000;
}

.codrops-top span.right {
	float:right;
}

.codrops-top span.right a {
	float:left;
	display:block;
}

.Image200
{
	width:200px;
	height:200px;
}

.StaffGridImage	{margin:0 auto;}

/*---------------------------------------------------------------*/
.og-grid {
	list-style:none;
	padding:20px 0;
	margin:0 auto;
	text-align:center;
	width:100%;
}
/* Control spacing in between grid photos */
/* Also height of box that displays name and postion */
.og-grid li {
	display:inline-block;
	margin:20px 30px 0 30px;
	vertical-align: top;
	width:200px;
	height:360px;
	max-height:700px;
	font-size:14px;
}

.og-grid li > a,
.og-grid li > a img {
	border:none;
	outline:none;
	display:block;
	position:relative;
}

.og-grid li.og-expanded > a::after {
	top:auto;
	border:solid transparent;
	content:" ";
	height:0;
	width:0;
	position:absolute;
	pointer-events:none;
	border-bottom-color:#ddd;
	border-width:15px;
	left:50%;
	margin:20px 0 0 -15px;
}

.og-expander {
	position: absolute;
	background:#fff;
	top:auto;
	left:0;
	width:100%;
	margin-top:1px;
	text-align:left;
	height:0;
	max-height:450px;
	overflow:auto;
	z-index:9999;
	-webkit-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); -moz-box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1); box-shadow: 0 0 4px 4px rgba(76, 76, 76, 0.1);
}

.og-expander-inner {
	padding:50px 30px;
	height:100%;
}

.og-close {
	position:absolute;
	width:40px;
	height:40px;
	top:10px;
	right:10px;
	cursor:pointer;
}
/* Close "X" */
.og-close::before,
.og-close::after {
	content:'';
	position:absolute;
	width:100%;
	top:50%;
	height:1px;
	background:#888;
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	transform:rotate(45deg);
}

.og-close::after {
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	transform:rotate(-45deg);
}

.og-close:hover::before,
.og-close:hover::after {
	background:#333;
}

.og-fullimg,
.og-details {
	width:50%;
	float:left;
	height:100%;
	overflow:auto;
	position:relative;
}

.og-details {
	padding:5px 40px 0 20px;
}

.og-fullimg {
	text-align:center;
}

.og-fullimg img {
	display:inline-block;
	max-height:100%;
	max-width:100%;
}

.og-details h3 {
	font-weight:200;
	font-size:28px;
	padding:0px 0 10px;
	margin-bottom:10px;
}

.og-details p {
	font-weight:300;
	font-size:14px;
	line-height:20px;
	color:#1c374a;
}

.og-details a {
	font-weight:300;
	font-size:16px;
	color:#1c374a;
	text-transform:uppercase;
	letter-spacing:2px;
	padding:10px 20px;
	border:3px solid #333;
	display:inline-block;
	margin:30px 0 0;
	outline:none;
}

.og-details a::before {
	/*content:'\2192';*/
	display:inline-block;
	margin-right:10px;
}

.og-details a:hover {
	border-color:#999;
	color:#999;
}

.og-loading {
	width:20px;
	height:20px;
	border-radius:50%;
	background:#ffafaf;
	box-shadow:0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position:absolute;
	top:50%;
	left:50%;
	margin:-25px 0 0 -25px;
	-webkit-animation:loader 0.5s infinite ease-in-out both;
	-moz-animation:loader 0.5s infinite ease-in-out both;
	animation:loader 0.5s infinite ease-in-out both;
}

@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 830px) {
	.og-expander h3 { font-size:32px; }
	.og-expander p { font-size:13px; }
	.og-expander a { font-size:12px; }

}

@media screen and (max-width: 650px) {
	.og-fullimg { display:none; }
	.og-details { float:none; width:100%; }
	
}