/* SECTION: HERO */
section#hero {
	position: relative;
	background: rgba(78,137,165,1);
}

section#hero:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background-image: url("../media/home_header_bg.jpg");
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

section#hero div.content {
	/*position: relative;
	margin: 2.5em 0;*/
}

section#hero div.content img {
	position: relative;
	margin: 0;
	width:100%;
	max-width:800px;
}

section#hero div.content h1 {
	position:relative; 
	color:#ffffff;
	font-size:2.5em;
}

section#hero div.content div.date {
	position:relative; 
	font-size:1.8em;
	font-weight:600;
	color:#ffffff;
}

@media screen and (max-width:910px) {
	section#hero div.content h1 {
		font-size:2em;
	}
}


/* SECTION: SUMMARY / CONDUCT */
section#summary {
	padding-top: 0;
	padding-bottom: 0;
}

section#conduct div.content,
section#summary div.content {
	padding:2em;
	/* blue bg, white text */
	/*background:rgb(0,32,96);
	color:#ffffff;*/
	/* changed to white bg, dark gray text */
	background:rgb(255,255,255);
	color:#222222;
	text-align:left;
}

video {
	width:100%;
	max-width:1920px; 
	height:auto;
	margin:0 auto;
}

@media screen and (max-width:800px) {
	section#conduct div.content a.btn {
		width:100%;
	}
}

section#summary div.image-switcher {
	position:relative;
	width: 340px;
	height: 340px;
	border:1px solid #bbbbbb;
	border-radius:50%;
	overflow:hidden;
}

section#summary div.image-switcher img.photo {
	position:absolute;
	z-index:3;
	width: 100%;
	/*height: 100%;*/
}

section#summary div.image-switcher img.right-arrow,
section#summary div.image-switcher img.left-arrow {
	opacity:.65;
	position:absolute;
	z-index:5;
  top: 50%;
  transform: translateY(-50%);
}

section#summary div.image-switcher img.right-arrow:hover,
section#summary div.image-switcher img.left-arrow:hover {
	opacity:.95;
}

section#summary div.image-switcher img.right-arrow {
	right:0;
}

/* SECTION: CAROUSEL 2 */
section#carousel2 {
	padding:0;
}

@media screen and (max-width:950px) {
	section#summary div.image-switcher {
		width: 240px;
		height: 240px;
	}
}