@charset "UTF-8";

body {
	padding: 0px;
	margin: 0px;
	font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
	/*font-family: Georgia,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;
}



.depth {
	margin-bottom: 1.2em;
}

.height {
	margin-top: 1.2em;
}


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: 40vw;
	overflow: hidden;
	display: inline-block;
}

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

}

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

img {
/*	-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);*/
}

.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);
}


img#family_connection {
	width: 100%;
}

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

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

}*/

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

.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 #999999;
	border-bottom: 6px double #999999;
	padding: 20px;
	margin: 0 0 1.2em 0;
	font-weight: 400;
}

/*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: 1.2em;
}

video.full {
	width:100%;
}

video.left {
	/*position: relative;
	left: -100px;
	float: left;
	margin-right: -80px;*/
	-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: -60px;*/
	-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);
}


.cover_photo {
/*	width: 100%;
	height: 40vw;
	background: url(lost_pines_cover_1920.jpg) center center no-repeat;
	background-size: 100%, auto;
	border: 1px solid black;*/

	/*border: 1px solid red; */

	text-align: center;
	color: white;
	height: 42vw;
}

.cover_photo h1, h2 {
	padding: 0px;
	margin: 0px;
	text-transform: uppercase;
	/*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: 1.5vw;
	float: right;
	letter-spacing: .1em;
	font-weight: 300;
	padding-top: .3em;
}

.cover_photo h2 {
	font-size: 2.75vw;
	border-bottom: 1px solid white;
	letter-spacing: .2em;
	font-weight: 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.25;
}

.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: .3em;
}


.timeline_block {
width: 1000px;
margin: 0 auto;
}

.timeline_item {
background: url(bg_left.png) no-repeat center center;
display:inline-block;
}

.timeline_item:nth-child(odd) {
background: url(bg_right.png) no-repeat center center;
}

.timeline_item h3 {
font-size: 2.4em;
margin: 0 0 .6em 0;
font-size: 2.0vmax;
}

.timeline_item_desc {
width: 40%;
float: left;
padding: 1.2em;
margin-top: 3.6em;
}

.timeline_item_image {
width: 47%;
float:right;
}

.timeline_item_image img{
float:right;
border: 1px solid #cccccc;
max-width: 450px;
width: 100%;

}

.timeline_item:nth-child(even) .timeline_item_desc {
float: right;
}

.timeline_item:nth-child(even) .timeline_item_image {
float: left;
}

.timeline_item:nth-child(even) .timeline_item_image img {
float: left;
}

.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;
}

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

.copyright {
	display: inline-block;
	float: right;
	text-align: right;
}

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

	/*.pf_content {
		font-size: 1.6vw;
	}*/

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

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

	.timeline_block {
		width: 100%;
	}

	aside {
		font-size: 1.2em;
		width: 33%;
		line-height: normal;
		padding: 20px;
	}

	aside div {
		font-size: .75em;
	}

	aside span {
		font-size: .9em;
	}




}


@media only screen and (min-width : 300px) and (max-width : 767px) and (orientation : portrait) {
	body {}

	#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: 50%;*/
		width: 70%;
	}

	

	.pf_content {
		font-size: 4.8vw;
	}

	aside {
		width: 100%;
		padding: 0;
	}

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

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

	video {
		width: 100%;
	}

	.cover_photo h1 {
		font-weight: 800;
		font-size: 2.5vw;
	}

	.cover_photo h2 {
		font-weight: 800;
		font-size: 3.5vw;
	}

	.pf_content img {
		width: 100%;
	}

	/*.right {
		position: static;
		float: clear;
		display: block;
	}*/
}

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

/*@media only screen and (min-width : 446px) and (max-width : 645px) {*/

/*@media only screen and (max-width : 645px) {

	.timeline_item {
		background: none;
		display: block;
		text-align: center;
		float:none !important;
		margin-bottom: 3.6em;
	}

	.timeline_item:nth-child(odd) {
		background: none;
		display: block;
	}

	.timeline_item_desc {
		width: 100%;
		max-width: 450px;
		padding: 0 0 .9em 0;
		float:none !important;
		margin: 0 auto;
	}

	.timeline_item_desc:first-child {
		margin-top: 0px;
	}

	.timeline_item_image {
		width: 100%;
		display:block;
		float:none !important;
	}

	.timeline_item_image img{
		width: 100%;
		float:none !important;
	}	

	.timeline_item h3 {
		font-size: 2.4em;
		margin: 0 0 .3em 0;
	}

	.timeline_item:nth-child(even) .timeline_item_desc {
		
	}

	.timeline_item:nth-child(even) .timeline_item_image {
		
	}

	.timeline_item:nth-child(even) .timeline_item_image img {
		
	}


}*/