@font-face 
{
    font-family: 'Computer Modern Concrete Roman';
    src: url('../font/cmunorm-webfont.eot');
    src: url('../font/cmunorm-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/cmunorm-webfont.woff') format('woff'),
         url('../font/cmunorm-webfont.ttf') format('truetype'),
         url('../font/cmunorm-webfont.svg#cmu_concreteroman') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
	background-color : #000;
	background-image : url('../image/e-background.jpg');
	background-repeat : no-repeat;
	background-position : center 20px;
	background-attachment : fixed;
	color : #fff;
	font-family : 'Computer Modern Concrete Roman';
	position : relative;
	margin : 0;
}

@media all and (min-width: 1024px)
{
	body
	{
		padding : 200px 0 1000px;
	}
}

@media all and (max-width: 1023px)
{
	body
	{
		padding : 0 0 20px;
	}
}

body::before
{
	content : '';
	z-index : -1000;
	position : absolute;
	background-color : rgba(0, 0, 0, 0.5);
	transition : all 1s;
	top : 0;
	left : 0;
	bottom : 0;
	right : 0;
}

body.at-end::before
{
	background-color : transparent;
}

@media all and (min-width: 1024px)
{
	header
	{
		position : fixed;
		top : 0;
		left : 0;
		right : 0;
		background-color : #000;
		background-image : url('../image/e-background.jpg');
		background-repeat : no-repeat;
		background-position : center 20px;
		background-attachment : fixed;
	}
	
	header::before
	{
		content : '';
		z-index : -1000;
		position : absolute;
		background-color : rgba(0, 0, 0, 0.5);
		transition : all 1s;
		top : 0;
		left : 0;
		bottom : 0;
		right : 0;
	}
	
	body.at-end header::before
	{
		background-color : transparent;	
	}
}

h1
{
	text-align : center;
	margin : 10px 0 0;
	padding : 0;
	font-size : 60px;
	line-height : 60px;
	font-weight : normal;	
}

@media all and (max-width: 599px)
{
	h1
	{
		font-size : 40px;
	}
}

h2
{
	text-align : center;
	margin : 15px 0 0;
	padding : 0;	
	font-size : 30px;
	font-weight : normal;	
}

@media all and (min-width : 1024px)
{
	h2
	{
		line-height : 30px;
	}
}

@media all and (max-width : 1023px)
{
	h2
	{
		line-height : 35px;
	}
}

@media all and (max-width: 599px)
{
	h2
	{
		font-size : 20px;
		line-height : 25px;
	}
}



h2 span
{
	white-space : nowrap;
}

ul.menu
{
	display : block;
	text-align : center;
	padding : 0;
}

@media all and (max-width: 1023px)
{
	ul.menu
	{
		display : none;
	}
}

ul.menu li
{
	display : inline-block;
	font-size : 20px;
	margin : 0 15px;
}

@media all and (min-width: 1100px) and (max-width: 1299px)
{
	ul.menu li
	{
		font-size : 18px;
		margin : 0 10px;
	}
}

@media all and (max-width: 1099px)
{
	ul.menu li
	{
		font-size : 16px;
		margin : 0 5px;
	}
}

ul.menu li.active
{
	
}

ul.menu li i
{
	font-size : 15px;
}

ul.menu li a {
	
	color : #888;
	text-decoration : none;
	transition : all 200ms;
}

ul.menu li a:hover,
ul.menu li a:focus 
{
	color : #ccc;
	outline : none;
}

ul.menu li.active a 
{
	color : #fff;
}

div.box
{
	margin : 40px auto 20px;
	width : 550px;
	background-color : rgba(0, 0, 0, 0.75);
	padding : 20px;
	font-size : 16px;
}

@media all and (min-width: 00px)
{
	div.box
	{
		border : 5px solid #333;
		border-radius : 5px;
	}	
}

@media all and (max-width: 599px)
{
	div.box
	{
		border-top : 5px solid #333;
		border-bottom : 5px solid #333;
		box-sizing : border-box;
		width : 100%;
	}
}

div.box.video
{
	padding : 0;
}

@media all and (min-width: 600px)
{
	div.box.video
	{
		width : 560px;
		border : 20px solid #000;
	}
}

@media all and (max-width: 599px)
{
	div.box.video
	{
		width : 100%;
		border-top : 20px solid #000;
		border-bottom : 20px solid #000;
	}
}

@media all and (min-width: 600px)
{
	div.box.video iframe
	{
		width : 560px;
		height : 315px;
	}
}

@media all and (max-width: 599px)
{
	div.box.video iframe
	{
		width : 100%;
		height : 315px;
	}
}

div.box.info h4
{
	margin : 20px 30px 30px;
	text-align : center;
}

@media all and (min-width: 600px)
{
	div.box.info h4
	{
		margin : 20px 30px 30px;
	}
}

@media all and (max-width: 599px)
{
	div.box.info h4
	{
		font-size : 18px;
		margin : 20px 0 30px;
	}
}

div.box.cover img
{
	width : 300px;
	display : block;
	margin : 10px auto 20px;
	border : 1px solid #222;
	border-radius : 4px;
	outline : 25px solid #000;
}

h4
{
	font-size : 20px;
	font-weight : normal;
	margin : 0;
	padding : 0;
}

p 
{
	margin : 0;
}

a
{
	color : #bca;
	text-decoration : none;
	transition : all 200ms;
}

a:hover,
a:focus
{
	color : #efd;
	outline : none;
}

div.linklist 
{
	margin : 10px 0 10px;
	text-align : center;
	line-height : 30px;
}

div.linklist a
{
	margin : 0 20px 0; 
	white-space : nowrap;
}

div.linklist a i
{
	font-size : 14px;
}