html,body{
	font-size:90%;
	height:100%;
	margin:0px;
	padding:0px;
}
body{
	background:#262930;
	font-family:'Noto Sans',sans-serif;
	font-size:100%;
}
p{margin-bottom:1em;}
p:last-child{margin-bottom:0px;}
a{
	color:#222;
	text-decoration:underline;
}
em{
	font-style:italic;
	color:#000;
}
b,strong{
	color:#000;
	font-weight:bolder;
}
hr{
	border-width:0px 0px 1px 0px;
	border:3px solid #777;
	margin-bottom:1em;
}
h1,h2,h3,h4{
	font-weight:bold;
	line-height:1.25em;
	margin-bottom:0.5em;
}
h1,h2{
	background-color:#1e2025;
	color:#fff;
	margin-left:-0.75em;
	margin-right:-0.75em;
	padding:0.75em;
}
h2{background-color:#00438a;}
h1:before,h2:before{
	color:#555;
	content:'\f054';
	font-family:'FontAwesome';
	margin-right:0.5em;
}
h2:before{color:#2c72c7;}
h3{font-size:110%;}
blockquote{
	background-color:rgba(0,0,0,0.1);
	margin:0.5em;
	padding:0.5em;
}
/*common*/
div.title{
	background-color:#1e2025;
	color:#fff;
	font-weight:bold;
	padding:0.75em;
}
button,submit,a.button{
	background-color:#eff0f1;
	border-radius:3px;
	border:1px solid #aaa !important;
	box-shadow:inset 0px 5px 5px #f2f3f4,inset 0px -5px 10px #ddd;
	color:#000 !important;
	display:inline-block;
	font-size:100%;
	padding:0.25em 0.75em;
	text-decoration:none !important;
	transition:background-color 0.3s ease;
}
button[type="submit"]:before{
	content:'\f00c';
	font-family:'FontAwesome';
	margin-right:0.25em;
}
button:hover,submit:hover,a.button:hover{
	border-color:#2c72c7 !important;
	text-decoration:none !important;
}
button i,submit i,a.button i{margin-right:0.25em;}
button i:not(:empty),submit i:not(:empty),a.button i:not(:empty){margin-right:-0.25em;}
a.button.icon{
	padding:0.25em;
	margin-top:0.15em;
}
a.button.icon i{margin:0px;}
a.button.disabled{
	color:#555 !important;
	opacity:0.5;
}
nav.contorls{
	text-align:right;
	background-color:#d0d0d1;
	margin:0.5em -0.75em -0.75em -0.75em;
	padding:0.5em;
}
/*popups*/
a.overlay{
	background-color:rgba(0,0,0,0.6);
	bottom:0px;
	left:0px;
	opacity:0;
	position:fixed;
	right:0px;
	top:0px;
	transition:opacity 0.5s;
	visibility:hidden;
	z-index:1;
}
.popup{
	display:inline-block;
	left:50%;
	opacity:0;
	padding:0.5em;
	position:fixed;
	text-align:justify;
	top:50%;
	transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%);
	transition:opacity 0.5s;
	visibility:hidden;
	z-index:10;
}
.popup:target,.popup:target~a.overlay{
	opacity:1;
	visibility:visible;
}
/*layout*/
body>main{
	background:url("../img/layout/bg_body.jpg") no-repeat center top fixed;
	height:auto;
	margin:auto;
	max-width:1920px;
	min-height:100%;
}
body>main>header{
	position:relative;
}
body>main>header>a{
	background:#000 url('../img/layout/bg_head.jpg') no-repeat left top;
	border-top:1px solid black;
	display:block;
	height:270px;
	text-align:left;
}
body>main>header>a>img{
	position:absolute;
	display:block;
	margin:3em 0px 0px 2em;
	z-index:1 !important;
}
body>main>header>div#disc{
	height:330px;
	left:110px;
	margin:auto;
	position:absolute;
	top:-50px;
	width:330px;
	z-index:0;
}
body>main>header>div#disc>div{
	background-repeat:no-repeat;
	height:340px;
	position:absolute;
	width:340px;
}
body>main>header>div#disc>div.bg1{background-image:url('../img/layout/disc/1.png');}
body>main>header>div#disc>div.bg2{background-image:url('../img/layout/disc/2.png');}
body>main>header>div#disc>div.bg3{background-image:url('../img/layout/disc/3.png');}
body>main>header>nav{
	background-color:#1e2025;
	border-top:2px solid #000;
	box-shadow:0px 10px 25px 2px #000;
	font-size:175%;
	padding:0.1em 0px 0.3em 0px;
	text-align:center;
}
body>main>header>nav>div{
	display:inline-block;
	padding:0.2em;
}
body>main>header>nav>div>a{
	color:#fff;
	margin:1em;
	text-decoration:none;
	text-transform:uppercase;
	transition:color 0.5s ease,border-color 0.8s ease;
}
body>main>header>nav>div>a>i{
	color:#888;
	margin-right:0.25em;
	text-shadow:none;
}
body>main>header>nav>div>a.active{border-bottom:3px solid #1e92ff;}
body>main>header>nav>div>a.active>i{color:#eee;}
body>main>header>nav>div>a:hover{
	border-bottom:3px solid #ffa500;
	color:#000;
	text-shadow:0px 0px 10px #fff;
}
body>main>article{
	background-color:rgba(255,255,255,0.5);
	font-size:110%;
	line-height:1.25em;
	margin:1em 1em 0px 1em;
	padding:1em 1em;
}
body>main>article p,body>main>article ul,body>main>article ol{line-height:135%;}
body>main>article ul,body>main>article ol{
	margin:0px 0px 1em 1em;
	list-style:initial;
}
body>main>article ul ul{list-style-type:square;}
body>main>article ol{list-style-type:decimal;}
body>main>article ol ol{list-style-type:upper-alpha;}
body>main>article li{
	display:list-item;
	margin-left:1.5em;
}
body>main>article>aside{
	display:inline-block;
	float:left;
	width:240px;
}
body>main>article>aside+section{margin-left:250px;}
body>main>article>section{
	background:#fff;
	color:#111;
	padding:0.75em;
}
body>main>article>section{
	background:#fff;
	color:#111;
	padding:0.75em;
}
body>main>article>section>h1:first-child{margin-top:-0.75em;}
body>main>article>section a{
	border-bottom:1px solid #369;
	color:#147;
	text-decoration:none;
}
body>main>article>section a:hover{color:#2c72c7;}
body>main>article>section h1 a,body>main>article>section h2 a{
	border-bottom:0px;
	color:#fff;
}
body>main>article>section h1 a:hover,body>main>article>section h2 a:hover{color:#a4c0e4;}
body>main>article>hr{
	clear:both;
	border:0px;
	padding:0px;
	margin:0px;
}
body>main>article>section>nav:not(.tabs):last-child{
	background-color:#d0d0d1;
	margin:0.5em -0.75em -0.75em -0.75em;
	padding:0.5em;
	text-align:right;
}
body>main>article>section>nav:not(.tabs):last-child a{margin-right:2px;}
body>main>article>section>nav:not(.tabs):last-child a:last-child{margin-right:0px;}
body>main>article>footer{
	border-top:1px solid #555;
	color:#262626;
	font-size:90%;
	margin-top:0.5em;
	padding-top:0.5em;
}
body>main>article>footer a{
	font-weight:bold;
	text-decoration:none;
}
body>main>article>footer a:hover{color:#000;}
body>main>article>footer div.ratings{
	margin:0px -0.75em -0.75em -0.75em;
	padding:0.75em;
	text-align:center;
}
body>main>article>footer div.ratings img{margin:0px 0.25em;}
body>main>article>footer nav{
	display:inline-block;
	float:right;
}
body>main>article>footer nav a{padding:0px 0.25em;}
body>main>article>footer nav a:before{
	color:#555;
	content:'\2022';
	margin-right:0.25em;
}
body>main>article>footer nav a:first-of-type:before,body>main>article>footer div.social-media nav a:before{content:'';}
body>main>article>footer nav a:last-of-type{padding:0px;}
body>main>article>footer div.social-media{
	float:right;
	text-align:right;
}
body>main>article>footer div.social-media a:hover i{transform:scale(1.5,1.5);}
body>main>article>footer div.legal{font-size:x-small;}
body>main>article>footer div.legal p{margin:0px;}

/*media queries*/
@media all and (max-width:1919px) {
	body>main>header>a{
		background-size:100%;
		position:relative;
		height:auto;
	}
	body>main>header>a:before{
		content:"";
		display:block;
		padding-top:14.0625%;
	}
	body>main>header>a>img{
		left:0em;
		position:absolute;
		top:0em;
	}
	body>main>header>div#disc{display:none;}
}
@media all and (min-width:1919px) {
	body>main>header>div#disc>div.bg1{
		animation:bg1 38s infinite linear;
		-webkit-animation:bg1 38s infinite linear;
	}
	body>main>header>div#disc>div.bg2{
		animation:bg2 18s infinite linear;
		-webkit-animation:bg2 18s infinite linear;
	}
	body>main>header>div#disc>div.bg3{
		animation:bg3 12s infinite linear;
		-webkit-animation:bg3 12s infinite linear;
	}
}
@media all and (max-width:1600px) {
	body>main>header>a:before{display:none;}
	body>main>header>a>img{
		margin:0.25em 0px 0px 0.5em;
		position:static;
	}
}
@media all and (max-width:1480px) {
	body>main>header>a{background-size:1480px;}
	body>main>header>a>img{
		height:auto !important;
		max-width:35%;
	}
}
@media all and (max-width:975px) {
	body>main>header>a{
		background-position:50% 0%;
		background-size:230%;
		height:auto;
	}
	body>main>header>a>img{
		height:auto !important;
		margin:auto;
		max-width:75%;
		padding:0.5em;
	}
}
@media all and (max-width:400px) {
	body>main>header>a>img{
		padding:0.1em;
	}
}

@keyframes bg1 {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@keyframes bg2 {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@keyframes bg3 {
	from {transform:rotate(0deg);}
	to {transform:rotate(-360deg);}
}
@-webkit-keyframes bg1 {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@-webkit-keyframes bg2 {
	from {transform:rotate(0deg);}
	to {transform:rotate(360deg);}
}
@-webkit-keyframes bg3 {
	from {transform:rotate(0deg);}
	to {transform:rotate(-360deg);}
}