body { color: #777; font-size: 1.0em; font-family: sans-serif; margin: 0; padding: 0; }
h1 { margin: 0px 0px 1em 0px; color: #5283c6; font-size: 1.7em; }
h3 { margin: 0px 0px 1.5em 0px; color: #5283c6; font-size: 1.1em; font-weight: normal; letter-spacing: 2px; text-transform: uppercase; }
h4 { margin: 0px 0px 0.5em 0px; color: #5283c6; font-size: 1.1em; font-weight: bold; }
a { color: #00a2ff; text-decoration: none; }

header { height: 272px; background: #eee url(banner.jpg) no-repeat center; background-size: cover; margin-bottom: 50px; position: relative; }
header a.logo { position: absolute; display: block; width: 154px; height: 57px; background: url(logo.png) no-repeat 0 0; background-size: contain; z-index: 1; top: 15px; left: 20px; }
header a.logo span { display: none; }

article { width: 70%; float: left; margin-bottom: 75px; border-right: 1px solid #555;}
article div { padding: 0px 40px 0px 40px; }
aside { width: 25%; float: left; }
aside div { padding: 0px 0px 0px 40px; }

video { width: 100%; height: auto; float: left; }
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 0px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

nav { background-color: rgba(0,0,0,.6); position: relative; padding: 45px 0px 0px 180px; }

nav ul { list-style: none; margin: 0; padding: 0; }

nav ul::after { content:''; display: block; clear: both; }
nav ul li:hover { background-color: rgba(103,148,211,.8); }
nav ul li:hover > ul { display: block; }

nav ul li a { display: inline-block; color: #fff; padding: 10px 20px; text-decoration: none; width: 125px; }
nav ul li a:hover { background-color: #5283c6; }

nav ul ul { display: none; position: absolute; top: 100%; background-color: rgba(103,148,211,.8);) }
nav ul ul li { position: relative; }
nav ul ul ul { left: 100%; top: 0px; }

/* top level */
nav > ul { padding-left: 35px; }
nav > ul > li { float: left; }
nav > ul > li > a { padding: 10px 20px 15px 20px; width: auto; }

@media screen and (max-width: 750px) {
	header { height: 290px; }
	header a.logo { width: 120px; height: 44px; }
	article { width: 100%;  margin-bottom: 40px; padding: 0px 0px 40px 0px; border-right: none; border-bottom: 1px solid #555; }
	article div { padding 0px 40px 0px 40px; }
	aside { width: 100%; }
	aside div { padding: 0px 40px 0px 40px; }
	
	nav { padding: 70px 0px 0px 10px; }
	nav> ul { padding-left: 0px; padding-right: 20px; }
	nav > ul > li > a { padding: 8px 12px 10px 12px; }
}

@media only screen 
  and (min-device-width: 668px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
	body { font-size: 1.3em; }
	header { height: 290px; } 
}

@media only screen 
  and (min-device-width: 668px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
	body { font-size: 1.7em; }
	header { height: 310px; } 
	header a.logo { width: 120px; height: 44px; }
	article { width: 100%;  margin-bottom: 40px; padding: 0px 0px 40px 0px; border-right: none; border-bottom: 1px solid #555; }
	article div { padding 0px 40px 0px 40px; }
	aside { width: 100%; }
	aside div { padding: 0px 40px 0px 40px; }
	
	nav { padding: 70px 0px 0px 10px; }
	nav> ul { padding-left: 0px; padding-right: 20px; }
	nav > ul > li > a { padding: 8px 12px 10px 12px; }
}

@media only screen 
  and (min-device-width: 200px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 
  	body { font-size: 2.0em; }
	header { height: 400px; } 
	header a.logo { width: 240px; height: 88px; }
	article { width: 100%;  margin-bottom: 40px; padding: 0px 0px 40px 0px; border-right: none; border-bottom: 1px solid #555; }
	article div { padding 0px 40px 0px 40px; }
	aside { width: 100%; }
	aside div { padding: 0px 40px 0px 40px; }
	
	nav { padding: 100px 0px 0px 10px; }
	nav> ul { padding-left: 0px; padding-right: 20px; }
	nav > ul > li > a { padding: 8px 12px 10px 12px; }
}