body {
top: 0;
left: 0;
width: 100%;
background-color: #f8f8ff;
opacity: 1;
font-family: Abel;
font-size: 1.25rem;
letter-spacing: -.01rem;
}

#content {
position: absolute;
top: 0;
right: 0;
width: 50%;
height: auto;
padding: 0 0 4rem 0;
margin: 0;
background-color: #f8f8ff;
opacity: 1;
font-family: Abel;
font-size: 1.25rem;
letter-spacing: -.01rem;
border-left: 0px solid black;
}

#navigation {
position: fixed;
top: 2px;
right: 52%;
z-index: 1;
text-align: right;
font-size: 1rem; 
line-height: 1.6rem;
font-family:;
font-weight: 200;
letter-spacing: -.05rem;
color: #666;
}

p {
	z-index: 1;
}

.navigation {
	position: relative;
	top: 0;
	left: 0;
	font-size: 2rem;
	font-weight: 600;
}

.index-video {
	width: 100%;
	margin: -1rem 0 0 0;
	filter: grayscale(.7) sepia(.2);
	opacity: .6;
}

.embed-container {
  position: relative; 
  padding-bottom: 56.25%;
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: 100%;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 110%; 
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 100%;
}


a:link { color:#666; text-decoration:none;opacity:1; }
a:visited { color:#666; text-decoration:none;opacity:1; }
a:hover { color:crimson; text-decoration:none;opacity:1; }
a:active { color:#666; text-decoration:none;opacity:1; }

a.red:link { color:crimson; text-decoration:none;opacity:.8; cursor:pointer; }
a.red:visited { color:crimson; text-decoration:none;opacity:.8; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.red:active { color:crimson; text-decoration:none;opacity:.8; cursor:pointer; }

a.steelblue:link { color:steelblue; text-decoration:none;opacity:.6; cursor:pointer; }
a.steelblue:visited { color:steelblue; text-decoration:none;opacity:.6; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.steelblue:active { color:steelblue; text-decoration:none;opacity:.6; cursor:pointer; }









@media only screen and (max-width:768px) {
body {
top: 0;
left: 0;
width: 100%;
background-color: #f8f8ff;
opacity: 1;
font-family: Abel;
font-size: 1.25rem;
letter-spacing: -.01rem;
}
#content {
position: ;
top: 100%;
left: 2%;
width: 97%;
padding: 0 0 100px 0;
margin: 0;
background-color: #f8f8ff;
opacity: 1;
font-family: Abel;
font-size: 1.25rem;
letter-spacing: -.01rem;
border-left: 0px solid black;
}
#navigation {
position: absolute;
top: 1rem;
left: 2%;
width: 96%;
margin-bottom: 4rem;
z-index: 1;
text-align: left;
line-height: 3.5rem;
padding: 0;
font-size: 1.5rem;
font-family: ;
font-weight: 200;
letter-spacing: rem;
opacity: .8;
color:#666;
}

a.steelblue:link { color:steelblue; text-decoration:none;opacity:.6; cursor:pointer; }
a.steelblue:visited { color:steelblue; text-decoration:none;opacity:.6; cursor:pointer; }
a.black:hover { color:black; text-decoration:none;opacity:1; cursor:pointer; }
a.steelblue:active { color:steelblue; text-decoration:none;opacity:.6; cursor:pointer; }

.index-video {
	width: 100%;
	margin: 0rem 0 0 0;
	filter: grayscale(.7) sepia(.2);
	opacity: .6;
}

.navigation {
	visibility: hidden;
}

.embed-container {
position: relative; 
  padding-bottom: 56.25%; /*  */
  height: 0; 
  overflow: hidden; 
  width: 100%;
  height: auto;
}
.embed-container iframe {
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

/* ratio 4x3 */
.embed-container.ratio4x3 {
  padding-bottom: 75%;
}
}