@charset "utf-8";
/* CSS Document */

@import 'https://fonts.googleapis.com/css?family=Amiko:400,700';

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
* {box-sizing:border-box;}
html {height:100%;-webkit-text-size-adjust: 100%;}
body {
	font-family: 'Amiko', sans-serif; 
	font-weight:400;
	height:100%;
	background: #323031;
	background: -moz-linear-gradient(-45deg,  #323031 0%, #ffffff 100%) fixed;
	background: -webkit-linear-gradient(-45deg,  #323031 0%,#ffffff 100%) fixed;
	background: linear-gradient(135deg,  #323031 0%,#ffffff 100%) fixed;
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323031', endColorstr='#ffffff',GradientType=1 );
}
.wrap {
	width:100%; 
	max-width:1200px;
	margin:auto;
	padding:0 40px;
}
.head {padding:30px 0 40px 0;}
.head a{color:#fff; text-decoration:none;}
.head h1 {margin:0 0 2px 0; font-weight:400; font-size:40px; color:#fff;}
.head h2 {margin:0; font-weight:400; font-size:20.1px; color:#fff;}
.split {display:table;width:100%;}
.split > div {display:table-cell; vertical-align:top;}

.content {background:#e7e8e8;line-height:1.2em;}
.content > article > div {padding:40px;min-height:300px;}
.content img {width:100%; height:auto;}
.content p {margin-bottom:6px;}
.content a {color:#0000ee; text-decoration:none; transition: all.3s;}
.content a:hover {color:#000;}


.content h2 {font-weight:400;font-size:25px;color:#8c9696;margin:0 0 10px 0;}
.content strong {font-weight:700;}
.content ul {margin-top:5px;}
.content li {margin-bottom:8px;position:relative; padding-left:24px;}
.content li:before {
    content: "■ ";
	position:absolute;
	left:0px;
	top:-2px;
	font-size:22px;
    color: #e92387;
}

.menu {width:20%; font-weight:400;}
.menu a {width:70%; color:#fff; padding:6px 6px 0 6px; text-decoration:none; display:block; margin-bottom:4px; border-top:2px solid #f9ed37; border-left:2px solid #f9ed37; transition:all .4s;}
.menu a.an {border-top:2px solid #ec008c; border-left:2px solid #ec008c;}
.menu a:hover {border-top:2px solid #ec008c; border-left:2px solid #ec008c;}

.menub, .xmenub {display:none;}

@media (max-width: 900px) { 

	.split > div.menu {display:none;position:fixed; z-index:10; top:0px; left:0px; width:100%; height:100%; background:#323031; padding:20px; -webkit-overflow-scrolling:touch; overflow-y:scroll;}
	.menu a {padding:15px;}
	.wrap {	padding:0 10px;}
	.content div {padding:20px;min-height:auto;}
	.menub {display:block; position:fixed; z-index:100; top:20px; right:10px; cursor:pointer;}
	.xmenub {display:none; position:fixed; z-index:100; top:20px; right:10px; cursor:pointer;}

}