@charset "UTF-8";

	html {
		box-sizing: border-box;
	}

	*, *:before, *:after {
		box-sizing: inherit;
	}


body {
	padding: 0px;
	margin: 0px;
	font-family: Open sans, sans-serif;
}


#WatchRead {
	color: #FFF;
	/*height:75px;*/
	/*width: 266px;*/
	/*height: 5vw;
	width: 24vw;*/
	/*padding-top: 25px;*/
	padding: 1vw;
	display:inline-block;
	background: url(assets/fade_bg.png);
}


#WatchRead img{
	/*width: 9vw;*/
}

#WatchReadRight {
	border-left: solid 2px white;
	padding-left: 4px;
}

#WatchReadLeft {
	/*padding-left: 5px;*/
	padding: 0 5px 0 5px;
}


	#map-canvas {
		width: 100%; height: 550px;
	}

	.layer-wizard-search-label {
		font-family: sans-serif
	};



a {
	text-decoration: none;
	color: #454545;
}

a:hover {
	text-decoration: underline;
}


#nav {

}

#nav > a {
	display: none;
}

#nav ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	font-size: .9em;
}

#nav li {
	position: relative;
}

#nav li a {
	color: #fff;
	display: block;
	text-decoration: none;
}

#nav li a:active {

}

#nav span:after  {

}

/* first level */

#nav > ul {
	list-style-type: none;
}

#nav >ul > li {
	height: 100%;
	float: left;
}

#nav > ul > li > a {

}

#nav > ul > li:not( :last-child ) > a {
	border-right: 1px solid #072c61;
}

#nav > ul > li:hover > a,
#nav > ul:not( :hover ) > li.active > a {

}

/* second level */

#nav li ul {
	background-color: #072c61;
	display: none;
	position: absolute;
	top: 100%;
}

#nav li:hover ul {
	display: block;
	left: 0;
	right: 0;
}

#nav li:not( :first-child ):hover ul {
	left: -1px;
}

#nav li ul a {
	/*font-size: 1.25em; */
	border-top: 1px solid #3333cc;
	padding: 0.75em; 
}

#nav li ul li a:hover,
#nav li ul:not( :hover ) li.active a {
	background-color: #6666ff;
}

.full {
	text-align: center;
}

.depth {
	margin-bottom: 1.2em;
}

.height {
	margin-top: 1.2em;
}

.image_control {
	text-align: center;
	margin-bottom: 3vw;
}

img#investigates_logo {
	/*padding: 5px 0 0 2vw;*/
	margin: .3em 0 0 .3em;

}

.menu_button {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 2px solid white;
	display: inline-block;
	color: white;
	padding: .3em;
	float: left;
	margin: .3em .3em 0 .3em;
}

.opacity_master {
	opacity: 0;
}

.opacity_bg_blue {}

#header {
	width: 100%;
	height: 45px;
	z-index: 100;
	position: fixed;
	top: 0;
	left: auto;
	background-color: rgba(7,44,97,0);
}

.social_box {
	float: right;
	display: inline-block;
	margin-right: 10px;

}

.social_box img {
	margin: 5px 10px 0 0;
}

.head_vid_box {
	width: 100%;
	/*height: 13vw;*/
	overflow: hidden;
	display: inline-block;
}

.cover_photo {
	text-align: center;
	color: white;
	height: 55vw;
font-size: 3.5vw;
	margin-top: -25px;
}

.cover_photo h1, h2 {
	width: 100%;
	padding: 0px;
	margin: 0px;
	text-transform: uppercase;
	font-size: 3.5vw;
	/*text-shadow: 0px 0px 30px rgba(0, 0, 0, 1);*/

	text-shadow:	0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1);

}

#the_shadow {
	text-shadow:	0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1), 
					0px 0px 20px rgba(0, 0, 0, 1);
}

.cover_photo h1 {
	font-size: 2.5vw;
	float: right;
	letter-spacing: .1em;
	font-weight: 300;
	padding-top: .3em;
	width: 100%;
}

.cover_photo h2 {
	font-size: 3.75vw;
	border-bottom: 1px solid white;
	letter-spacing: .2em;
	font-weight: 100;
	width: 100%;

}

.cover_photo .byline {
	/*text-align: right;*/
	font-size: .6em;
}

.title_box {
	position: relative;
	top: 20vw;
	display: inline-block;
}

.scroll_tooltip {
	position: relative;
	bottom: 0;
	padding-top: 12vw;
	opacity: 0.85;

}

video#bg_video {
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;

}

#canvas_video {
	width: 100%;
	height: 40vw;
	border: 1px solid black;
}

.clockwise {
	margin-top: 1.2em;
	-ms-transform: rotate(7deg); /* IE 9 */
	-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
	transform: rotate(7deg);
}

.counterclockwise {
	margin-top: 1.2em;
	-ms-transform: rotate(-7deg); /* IE 9 */
	-webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
	transform: rotate(-7deg);
}

.shadow {
    -webkit-box-shadow: 0px 0px 22px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0px 0px 22px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 22px 5px rgba(0,0,0,0.5);
}

.caption {
	font-size: .9em;
	line-height: normal;
	color: #666666;
	font-weight: 300;
	margin-bottom: 2vw;
}

div.caption.left {
	width: 60%;
	text-align: left;
	position: relative;
	left: -100px;
	float: left;
	margin-right: -60px;
	margin-bottom: 30px;
}

div.caption.right {
	width: 60%;
	text-align: right;
	position: relative;
	right: -100px;
	float: right;
	margin-left: -80px;
}

div.caption img {
	width: 100%;
	margin-bottom: 1vw;
}

div.caption video {
	width: 100%;
	margin-bottom: 1vw;
}

img#family_connection {
	width: 100%;
}

img.left {
	position: relative;
	left: -100px;
	float: left;
	/*margin-right: -60px;*/
	margin-bottom: 30px;
	width: 60%;
	-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
}

img.right {
	position: relative;
	right: -100px;
	float: right;
	margin-left: -80px;
	width: 60%;
	-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
}

.left {
	position: relative;
	left: -100px;
	float: left;
	/*margin-right: -3vw;*/
}

.right {
	position: relative;
	right: -100px;
	float: right;
	/*margin-left: -80px;*/

}

aside {
	font-family: serif;
	font-size: 1.2em;
	font-style: italic;
	color: #454545;
	/* width: 500px; */
	width: 350px;
	line-height: normal;
	border-top: 6px double #4c6346;
    border-bottom: 6px double #4c6346;
	padding: 20px;
	margin: 0 0 1.2em 0;
	font-weight: 400;
}

a {  text-decoration: none; color: #347ca8; }
a:hover { text-decoration: underline;  }

aside.left {
	position: relative;
	left: -100px;
	float: left;
	margin-right: -60px;
}

aside.right {
	position: relative;
	right: -100px;
	float: right;
	margin-left: -80px;
}

aside div {
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: .75em;
	text-align: right;
	float: right;
	padding-top: .75em;
	color: #333333;
	max-width: 66%;
}

aside span {
	font-size: .9em;

}

video {
	margin-bottom: 2vw;
}

video.full {
	width:100%;
}

video.left {
	position: relative;
	left: -100px;
	float: left;
	margin-right: -60px;
	margin-bottom: 30px;
	width: 60%;
	-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
}

video.right {
	position: relative;
	right: -100px;
	float: right;
	margin-left: -80px;
	width: 60%;
	-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
}

.pf_content {
	 max-width: 1000px;
	 display: block;
	 font-size: 1.2em;
	 line-height: 1.4em;
	 margin-left: auto;

	 margin-right: auto;

	 padding-left: 15px;
	 padding-right: 15px;
}

.pf_content p {
	margin: 0 0 1.2em 0;
}

.pf_content h3 {
	margin-top: 2.4em;
	margin-bottom: 1em;
	/*padding-bottom: .3em;*/
	/*border-bottom: 1px solid #454545;*/
}

.footer {
	margin: 3.6em 0 3.6em 0;
	padding: 1.2em 0 3.6em 0;
	border-top: 6px double #999999;
}

.footer h3 {
	margin: 0;
}
.credits {
	/*display: inline-block;*/
	/*float: left;*/
	width: 100%;
	margin-bottom: 2vw;
}

.credits h3{
	border: 0;
}

.credits ul {
	list-style-type: none;
	padding: 0px;
	margin: 0px;
}

.copyright {
	/*display: inline-block;*/
	/*float: right;*/
	/*text-align: right;*/
	width: 100%;
}


@media only screen and (min-width : 401px)  and (max-width : 1200px) {

	#nav {
		width: 50%;
	}

	#header {
		width: 100%;
		height: 45px;
		z-index: 100;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(7,44,97,0);
	}

	#investigates_logo {
		width: 70%;
	}

	div.caption.left {
		left: 0px;
		margin-right: 20px;
		
	}

	div.caption.right {
		right: 0px;
		margin-left: 20px;
	}

	

	div.caption.left img {
		left: 0px;
		margin-right: 20px;
		-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
		
	}

	div.caption.right img {
		right: 0px;
		margin-left: 20px;
		-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	}
	
	aside.left {
		position: relative;
		left: 0px;
		float: left;
		margin-right: 20px;
	}

	aside.right {
		position: relative;
		right: 0px;
		float: right;
		margin-left: 20px;
	}

	.left, .right {
		position: static;
		float: clear;
		display: block;
	}

	.left {
		left: 0;
	}

	.right {
		right: 0;
	}

	.clockwise, .counterclockwise {
		margin-top: 0;
		-ms-transform: rotate(0deg); 
		-webkit-transform: rotate(0deg); 
		transform: rotate(0deg);
	}

	video {
		width: 100%;
	}

/*	.cover_photo h1 {
		font-weight: 300;
		font-size: 2.5vw;
		width: 100%;
	}

	.cover_photo h2 {
		font-weight: 300;
		font-size: 3.5vw;
		width: 100%;
	}*/

	.pf_content img {
		/*width: 100%;*/
	}

}

@media only screen and (max-width : 401px)  {

	#header {
		width: 100%;
		height: 14vw;
		z-index: 100;
		position: fixed;
		top: 0;
		left: 0;
		background-color: rgba(7,44,97,0);
		
	}


	.cover_photo h1 {
		font-weight: 400;
		font-size: 3vw;
		width: 100%;
	}

	.cover_photo h2 {
		font-weight: 400;
		font-size: 4vw;
		width: 100%;
	}

	#investigates_logo {
		width: 50vw;
		margin-top: 1vw;
	}

	.left, .right {
		position: static;
		float: clear;
		display: block;
		width: 100%;
	}

	.left {
		left: 0;
	}

	.right {
		right: 0;
	}

		.caption {

	}

	div.caption.left {
		width: 100%;
		text-align: left;
		position: relative;
		left: 0px;
		float: left;
		margin-right: 0px;
		margin-bottom: 20px;
	}

	div.caption.right {
		width: 100%;
		text-align: left;
		position: relative;
		right: 0px;
		float: left;
		margin-left: 0px;
	}

	div.caption img {
		width: 100%;
	}

	img {
		width: 100%;
	}

	img.left {
		position: relative;
		left: 0px;
		float: left;
		margin-right: 0px;
		margin-bottom: 30px;
		width: 100%;
	}

	img.right {
		position: relative;
		right: 0px;
		float: right;
		margin-left: 0px;
		width: 100%;
		margin-bottom: 30px;

	}
	
	.image_control {
		text-align: center;
		margin-bottom: 3vw;
		width: 100%;
	}

	aside.left {
		position: relative;
		left: 0px;
		float: left;
		margin-right: 0px;
		margin-bottom: 30px;
		width: 100%;
	}

	aside.right {
		position: relative;
		right: 0px;
		float: right;
		margin-left: 0px;
		width: 100%;
		margin-bottom: 30px;

	}

	video.left {
		position: relative;
		left: 0px;
		float: left;
		margin-right: 0;
		margin-bottom: 20;
		width: 100%;
	}

	video.right {
		position: relative;
		right: 0px;
		float: right;
		margin-left: 0px;
		margin-bottom: 20;
		width: 100%;
	}

	video.full {
		-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.5);
	}

	#scroll_icon {
		width: 10vw;
	}

	.ad_control {
		width: 100%;
	}

	#WatchRead {
		color: #FFF;
		/*height:75px;*/
		/*width: 266px;*/
		/*height: 5vw;*/
		width: 50vw;
		/*padding-top: 25px;*/
		padding: 1vw;
		display:inline-block;
		background: url(assets/fade_bg.png);
	}


	#WatchRead img{
		width: 40%;
	}
}