*{
	margin: 0px;
	padding: 0px;
	border: none;
}

html {
	height: 100%;
	margin: 0px;
	padding: 0px;
}

body { 
	width:  100%;
	height: 100%; 
	margin:  0px;
	padding: 0px;
	font: 14px/1.5 Arial, times;
	color: #333;
	background: url('bg-body.jpg') no-repeat top left;
	background-size: 80%;
	text-align: left;
}
h1, h2, h3, h4 { font-weight: normal;  }

header {
 padding-top: 1px;
 margin-bottom: 20px;
}

header a {
 display: block;
 margin: 35px 0 15px 0;
}

header h1 {
 color: #0f238c;
 font-size: 25px;
}

#container {
	width: 990px;
	padding-left: 20px;
	margin: 0 auto;
}

.middle {
	width: 608px;
	background: #fff;
	margin: 0 20px 0 0; 
	float: left;
}

h2 {
	font: normal 32px/1.2 Arial, times;
	color: #1c7ddb;
	margin: 0 0 40px 0;
}

nav {
	display: block;
	width: 320px;
	padding: 20px;
	float: left;
	position: relative;
	background: url('grey.png');
}

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

nav ul li {
 margin-bottom: 10px;
}

nav ul li a {
 color: #666;
 text-decoration: none;
 padding: 5px 0 5px 30px;
 position: relative;
 cursor: pointer;
}

nav ul li.active a,
nav ul li a:hover {
 color: #033886;
}

nav ul li i {
 display: block;
 position: absolute;
 top: 8px;
 left: 0px;
 width: 9px;
 height: 9px;
 background: url('arrow-sprite.jpg') left -9px no-repeat;
}

nav ul li.active i,
nav ul li a:hover i {
 background-position: left 0px;
}

.show-menu {
 display: none;
 border: 1px solid #eee;
 background: #fff;
 border-radius: 4px;
 width: 100px;
 text-align: center;
 text-decoration: none;
 color: #666;
 padding: 5px 0;
 position: absolute;
 top: 10px;
 right: 10px;
}

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

	html {
		height: auto;
		border: none;
	}
	
	header {
		padding: 10px;
		margin: 0;
	}
	
	header a {
	 margin: 0;
	}
	
	header h1 {
	 margin: 10px;
	}
	
	header img {
		width: 150px;
		margin: 0;
	}
	
	.show-menu {
  display: block;
 }
	
	#container { 
		width: auto; 
		margin-top: 0px; 
		padding: 0;
	}
	
	#container .middle { 
		float: none; 
		width: 100%; 
		margin: 0 0 20px 0;
	}
	
	#container nav { 
		float: none; 
		width: auto;
		font-size: 16px;
	}
	
	nav a {
	 font-size: 16px;
	}
	
	#container #mep_0 { width: 100% !important; height: 240px !important; overflow: hidden;}
	#container .player { background: none; height: auto !important; }
	#container video { width: 100% !important; height: 240px !important; }
	#container .mejs-mediaelement { width: 100% !important; height: 240px !important; }
	#container .mejs-inner { width: 100% !important; height: 240px !important; }
	#container .mejs-overlay { width: 100% !important; height: 240px !important; overflow: hidden; }
	#container .mejs-poster img { width: 100% !important; height: auto !important; margin-top: -40px; }
}

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

	html {
		height: auto;
		border: none;
	}
	
	header {
		padding: 10px;
	}
	
	#container { 
		width: auto; 
		margin-top: 0px; 
		padding: 0;
	}
	
	#container .middle { 
		float: none; 
		margin: 0 auto 20px auto;
	}
	#container nav { 
		float: none; 
		margin: 0 auto;
	}
	
	header h1 {
		margin-left: 0px;
	}
}