/* ===== Navbar Styles ===== */
.navbar-experience {
    background-color: #004982;
    opacity: 1;
    border-color: #004982;
}
.navbar-experience .navbar-nav>li>a {
	color:#fff;
	text-transform:uppercase;
	font-weight:400;
}

.navbar-experience .navbar-nav>.current-menu-item>a, 
.navbar-experience .navbar-nav>.current-menu-item>a:focus, 
.navbar-experience .navbar-nav>.current-menu-item>a:hover {
    color: #004982;
    background-color: #fff;
    opacity:1;
}
.navbar-experience .navbar-toggle {
    border-color: #fff;
}
.navbar-experience .navbar-toggle .icon-bar {
    background-color: #fff;
}
.navbar-experience .nav>li>a:focus, .navbar-experience .nav>li>a:hover {
    text-decoration: none;
    background-color: #fff;
    color: #004982;
}
/* ===== End Navbar Styles ===== */

/*.full-height {    
	min-height: 100vh;
    height: 100vh;
    padding: 0;
}*/
/*.module-header {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}*/
.header-content {
    position: relative;
   	margin: 75px 0 20px 0;
}
.bg {
  width: 100%;
}
div.scroll { display:none; }

section#credits { color:#fff; }
section p.lead a { color:#fff; }
section p.lead {font-weight:400;}
.header-content p {
    margin-bottom: 50px;
    font-size: 16px;
    font-weight: 300;
    color: rgba(255,255,255,0.7);
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
    font-family: 'Source Sans Pro', sans-serif;
}

blockquote.experience {
	font-family: 'Source Sans Pro', sans-serif;
    font-size: 30px;
    line-height: 36px;
    /*color:#fff;*/
    border-left:none;
    font-style:italic;
}
.callout-box { color:#eee; padding:15px; margin:0 0; }

#videobg .full-height { height:auto; }
.iframe-wrapper {
  	position: relative;
  	display: block;
  	height: 0;
  	padding: 0;
  	overflow: hidden;
	padding-bottom: 56.25%;
	/*margin-bottom: 10px;*/
}
.iframe-wrapper iframe {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ===== Color Styles ===== */

.white { background-color:#fff; }
.black { background-color:#000; opacity:1.0; }
.bg-gray-color { background-color:#f8f8f8; }
.purple { background-color:#50042a; opacity:1.0; } 
.orange { background-color:#906214; opacity:1.0; }
.blue { background-color:#0c0b8b; opacity:1.0; }
.darkblue { background-color:#012c54; opacity:1.0; }
.cshl-blue { background-color:#004982; opacity:1.0; }

/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#98064f+0,50042a+100 */
.purple-gradient {
	background: #50042a; /* Old browsers */
	background: -moz-linear-gradient(top,  #98064f 0%, #50042a 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #98064f 0%,#50042a 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #98064f 0%,#50042a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98064f', endColorstr='#50042a',GradientType=0 ); /* IE6-9 */
}
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#d3921c+0,906214+100 */
.orange-gradient {
	background: #d3921c; /* Old browsers */
	background: -moz-linear-gradient(top,  #d3921c 0%, #906214 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #d3921c 0%,#906214 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #d3921c 0%,#906214 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d3921c', endColorstr='#906214',GradientType=0 ); /* IE6-9 */
}
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0f0fbd+0,0c0b8b+100 */
.blue-gradient {
	background: #0f0fbd; /* Old browsers */
	background: -moz-linear-gradient(top,  #0f0fbd 0%, #0c0b8b 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  #0f0fbd 0%,#0c0b8b 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  #0f0fbd 0%,#0c0b8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0f0fbd', endColorstr='#0c0b8b',GradientType=0 ); /* IE6-9 */
}
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#012c54+0,000c18+100 */
.darkblue-gradient {
background: #012c54; /* Old browsers */
background: -moz-linear-gradient(top,  #012c54 0%, #000c18 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #012c54 0%,#000c18 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #012c54 0%,#000c18 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012c54', endColorstr='#000c18',GradientType=0 ); /* IE6-9 */
}

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7db9e8+0,207cca+0,004982+100 */
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#7db9e8+0,207cca+0,004982+100 */
.cshlblue-gradient {
background: linear-gradient(to bottom,  #7db9e8 0%,#207cca 0%,#004982 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
/* ========= Desktop Style =============== */
@media(min-width:769px) {
	.navbar-experience {
    	opacity: .75;
	}

	.full-height {    
		min-height: 100vh;
    	height: 100vh;
    	padding: 0;
	}
	.bg {
  	position: fixed; 
  	top: 0; 
  	left: 0; 
	
  /* Preserve aspet ratio */
  	min-width: 100%;
  	min-height: 100%;
  	height: 100vh;
  	/*width:100vw;*/ /* this style was causing a horizontal scroll bar because it made the image wider than the video */
  	overflow:hidden;
}
/* ===== Video Styles ===== */
/* Makes a fixed background wrapper
which the user cannot interact with */

	.iframe-wrapper {
  		position: fixed;
  		left: 0;
  		right: 0;
  		top: 0;
  		bottom: 0;
  		width: 100%;
  		height: 100%;
  		z-index: -1;
  		pointer-events: none;
  		overflow: hidden;
	}
/* Make the iframe keep an aspect ratio, and
position it in the middle of its parent wrapper*/

	.iframe-wrapper iframe {
  		width: 100%;
  		height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
  		min-height: 100vh;
  		min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
  		position: absolute;
  		top: 50%;
  		left: 50%;
  		transform: translate(-50%, -50%);
	}
/*.vimeo-wrapper {
  	position: relative;
  	display: block;
  	height: 0;
  	padding: 0;
  	overflow: hidden;
	padding-bottom: 56.25%;
}
.vimeo-wrapper iframe {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
}*/

	.module-header {
    	background-position: 50%;
    	background-repeat: no-repeat;
    	background-size: cover;
    	position: relative;
	}
	div.scroll { display:block; }
	.scroll a span {
   	 position: absolute;
    	top: 0;
    	left: 50%;
    	width: 30px;
    	height: 50px;
    	margin-left: -15px;
    	border: 2px solid #fff;
    	border-radius: 50px;
    	box-sizing: border-box;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	}
	.scroll a span::before {
    	position: absolute;
    	top: 10px;
    	left: 50%;
    	content: '';
    	width: 6px;
    	height: 6px;
    	margin-left: -3px;
    	background-color: #fff;
    	border-radius: 100%;
    	box-sizing: border-box;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	}
	a.next {
    	position: absolute;
    	bottom: 25px;
    	left: 50%;
    	z-index: 2;
    	display: inline-block;
    	-webkit-transform: translate(0, -50%);
    	transform: translate(0, -50%);
    	color: #fff;
    	font: 400 20px/1 'Source Sans Pro', sans-serif;
    	text-decoration: none;
		text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
/*    	transition: opacity .3s; */
		padding-top: 60px;
	}
	#videobg a.next { bottom: 100px; }
	.vimeo-wrapper {
   		position: fixed;
   		top: 0;
   		left: 0;
   		width: 100%;
   		height: 100%;
   		z-index: -1;
   		pointer-events: none;
   		overflow: hidden;
	}
	.vimeo-wrapper iframe {
   		width: 100vw;
   		height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   		min-height: 100vh;
   		min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   		position: absolute;
   		top: 50%;
   		left: 50%;
   		transform: translate(-50%, -50%);
	}

	.header-content {
/*    	position: absolute; */
        top: 40%;
    	text-align: center;
    	z-index: 20;
	}

	.header-content h1 {
    	margin-top: 0;
    	margin-bottom: 25px;
    	color:#fff;
        font-size: 600%; /*53px;*/
		line-height:1em; 
		text-transform:uppercase; 
		/*font-size:50px; */
		font-weight:300; 
		text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
	}
    .header-content p { font-size: 25px; }
	.callout-box { margin:5% 0; }
	/*.purple, .blue { opacity:.75; }
	.orange, .cshl-blue  { opacity:.85; }*/
}


.header-content h4,
.header-content a { color:#fff; text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4); }
.header-content a:hover { text-decoration:none; }