@font-face{ font-family:'Exo2-Regular';
	src:url('../font/Exo2-Regular.eot');
	src:url('../font/Exo2-Regular.eot') format('embedded-opentype'),
		url('../font/Exo2-Regular.woff2') format('woff2'),
		url('../font/Exo2-Regular.woff') format('woff'),
		url('../font/Exo2-Regular.ttf') format('truetype'),
		url('../font/Exo2-Regular.svg#Exo2-Regular') format('svg');
} 
@font-face{ font-family:'Exo2-Medium';
	src:url('../font/Exo2-Medium.eot');
	src:url('../font/Exo2-Medium.eot') format('embedded-opentype'),
		url('../font/Exo2-Medium.woff2') format('woff2'),
		url('../font/Exo2-Medium.woff') format('woff'),
		url('../font/Exo2-Medium.ttf') format('truetype'),
		url('../font/Exo2-Medium.svg#Exo2-Medium') format('svg');
} 
@font-face{ font-family:'Exo2-Bold';
	src:url('../font/Exo2-Bold.eot');
	src:url('../font/Exo2-Bold.eot') format('embedded-opentype'),
		url('../font/Exo2-Bold.woff2') format('woff2'),
		url('../font/Exo2-Bold.woff') format('woff'),
		url('../font/Exo2-Bold.ttf') format('truetype'),
		url('../font/Exo2-Bold.svg#Exo2-Bold') format('svg');
}

body, h1, h2, h3, h4, h5, h6, p, ul, li, ol, form, small, label, cite, br, td {
	padding:0;
	margin:0;
	font:100% 'Exo2-Regular';
	font-weight:normal;
	list-style:none;
	border:none;
	color:#444;
}

header, footer, nav, aside, article, section{
	display:block;
}

body{
	background:#444;
}

h1, h2, h3{
	top:150px;
	margin:40px 0px 20px 0px;
}

h1{
	font:2.0em 'Exo2-Medium';
}

h2{
	font:1.5em 'Exo2-Medium';
}

h3{
	font:1.2em 'Exo2-Regular';
}

img.center{
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding-bottom:20px;
}

p{
	font-size:1.1em;
	line-height:24px;
	margin:0 0 23px;
}
p b{
	font-family:'Exo2-Bold';
}

ul{
	padding-left:50px;
	padding-bottom:20px;	
}

ol{
	padding-left:50px;
	padding-bottom:20px;
	text-indent: 0.6em;
}

li{
	font-size:1.1em;
	line-height:24px;
	margin:0 0 5px;
	text-align:justify;
}

ul li{	
	list-style:square;
}

ol li{
	list-style-type:decimal;
}

a{
	color:#E77200;
}
a:hover{
	text-decoration:underline;
}
a:link{
	text-decoration:none;
}

pre{
	background:#444;
	font:1.0em Courier;
	color:#CCC;
	line-height:24px;
	margin-bottom:18px;
	padding:1.0em;
	display:block;
	overflow:auto;
	scrollbar-arrow-color:#E77200;
	scrollbar-face-color:#E77200;
	scrollbar-shadow-color:#E77200;
	scrollbar-track-color:#444;
}
pre::-webkit-scrollbar{
	height:0.9em;
}
pre::-webkit-scrollbar-thumb{
  background-color: #E77200;
}
pre b{}
pre .line-number{
	float:left;
	margin:0 1em 0 -1.0em;
	border-right:1px solid #E77200;
	text-align:right;
}
pre .line-number span{
	display:block;
	padding:0 .5em 0 1em;
}
pre .cl{	
	
	clear:both;
}

.container{
	position:relative;
	overflow:hidden;
	width:100%;
	margin:0 auto;
}

.brilliance{
	min-width:769px;
	max-width:960px;
	margin:0 auto;
}

.brillianceCCC{
	min-width:769px;
	max-width:960px;
	margin:0 auto;
	z-index:10;
}
.brillianceCCC:after{
	background:url("../img/hexCCC.png") repeat;
	content:"";   
	top:0;
	left:0;
	bottom:0;
	right:0;
	position:absolute;
	z-index:-10;  
}

.brilliance444{
	min-width:769px;
	max-width:960px;
	margin:0 auto;
	z-index:10;
}
.brilliance444:after{
	background:url("../img/hex444.png") repeat;
	content:"";   
	top:0;
	left:0;
	bottom:0;
	right:0;
	position:absolute;
	z-index:-10;  
}

.title h1{
	font:6.0em 'Exo2-Bold';
	line-height:100px;
	width:100%;
	text-align:center;
	color:#E77200;
}

.home{
	background: url("../img/main.jpg") no-repeat center 0px fixed;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main.jpg', sizingMethod='scale');
	-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main.jpg', sizingMethod='scale');
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	overflow:hidden;
	position:relative;
	z-index:2;	
	min-height:1020px;
}
.home h1{
	margin-top:250px;
}

.title-links{
	min-height:20px;
}
.title-links h1{
	font:6.0em 'Exo2-Bold';
	line-height:100px;
	width:100%;
	margin-top:250px;
	text-align:center;
	color:#E77200;
}

.header_footer{
	background:#444;
	position:relative;
	overflow:hidden;
	width:100%;
}
.header_footer p{
	padding-top:20px;
	text-align:center;
	color:#CCC;
}

#toc li{
	list-style-type:none;
	margin-left:-50px;
}
#toc a{
	color:#444;
	display:block;
	font-size:18px;
	line-height:18px;
	padding:10px 30px;
	text-decoration:none;
}
#toc a:hover{
	border-bottom:medium none;
	background:#444;
	color:#E77200;
}
#toc a:active{
	border-bottom:medium none;
	background:#444;
	color:#CCC;
}
#toc a.H1{
	font:1.2em 'Exo2-Medium';
}
#toc a.H2{
	font:1.1em 'Exo2-Regular';
	padding-left:50px;
}
#toc a.H3{
	font:1.0em 'Exo2-Regular';
	padding-left:70px;
}		

.highlight{
	background: url("../img/main.jpg") no-repeat center 0px fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main.jpg', sizingMethod='scale');
	-ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/main.jpg', sizingMethod='scale');		
	overflow:hidden;
	position:relative;
	z-index:2;
}
.highlight h1, .highlight h2, .highlight p{
	color:#CCC;
}

.hex444{
	background:#444;
}
.hex444 h1, .hex444 h2, .hex444 h3, .hex444 p, .hex444 li, .hex444 td{
	color:#CCC;
}
.hex444 pre{
	background:#CCC;
	color:#444;
	scrollbar-track-color:#CCC;
}

.hexCCC{
	background:#CCC;
}

.hexE77200{
	background:#E77200;
}

@keyframes spinner{
	to{transform:rotate(360deg);}
}
@-webkit-keyframes spinner{
	to{-webkit-transform:rotate(360deg);}
}
.spinner:before{
	content:'Loading…';
	position:absolute;
	width:48px;
	height:48px;
	top:calc(50% - 24px);
	left:calc(50% - 24px);
}
.spinner:not(:required):before{
	content:'';
	border-radius:50%;
	border-top:4px solid #E77200;
	border-righ:t4px solid transparent;
	animation:spinner .6s linear infinite;
	-webkit-animation:spinner .6s linear infinite;
}

.container-nav{
	margin:0;
}

#toggle-nav-label{
	background:rgba(231,114,0,0.9);
	color:rgba(0,0,0,0.5);
	text-align:center;
	font-size:1.1em;
	display:block;
	cursor:pointer;
	z-index:8;
	width:100%;
	/*border-radius:5px;*/	
	overflow:hidden;
	position:fixed;
	right:0px;
	padding:20px;
	box-shadow:0px 10px 200px #E77200
}
#toggle-nav{
	display:none;
}
#toggle-nav:checked ~ .box{
	opacity:1;
	z-index:7;
}
#toggle-nav:checked ~ .box ul{
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}

.menu .box{
	position:fixed;
	text-align:center;
	overflow:hidden;
	z-index:-1;
	opacity:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.9);
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
}
.menu ul{
	position:relative;
	top:15%;
	-webkit-transform:scale(6);
	-moz-transform:scale(6);
	-ms-transform:scale(6);
	transform:scale(6);
	-webkit-transition:all 0.3s ease-in-out;
	-moz-transition:all 0.3s ease-in-out;
	-o-transition:all 0.3s ease-in-out;
	transition:all 0.3s ease-in-out;
	margin-left:-50px;
}
.menu li{
	display:block;
	text-align:center;
	padding:40px;
}
.menu li a{
	border-radius:6px;
	padding:20px;
	border:2px solid transparent;
	text-decoration:none;
	font-size:2.0em;
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-o-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	color:#E77200;
}
.menu li a:hover{
	border-color:#E77200;
}

#blocker{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	opacity:0.9;
	background:#000;
	z-index:1000;
}

*:focus{
	outline:none;
}


details {
    background-color: yellow;
}
details details {
    background-color: limegreen;
    margin-left: 1em;
}