/*** RESET ***/
*{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-family:inherit;vertical-align:baseline;font-size:1em;font-style:normal;-webkit-font-smoothing:antialiased;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;/*user-select:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;*/tap-highlight-color:transparent;-webkit-tap-highlight-color:transparent;-moz-tap-highlight-color:transparent;-o-tap-highlight-color:transparent;}*, *::before, *::after{-webkit-transition:.5s;-box-transition:.5s;-o-transition:.5s;transition:.5s;}:hover,:active,:focus{outline:0 !important;}html, body{min-height:100%;font-family:sans-serif;font-size:1rem;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;padding:0;line-height:1;}article, footer, header, section{display:block;}ol, ul{list-style:none;}a{display:inline-block;text-decoration:none;background-color:transparent;color:initial;}a img{border:none;}a, button, input[type="submit"]{cursor:pointer !important;}button{// background-color:transparent;}img{width:100%;height:auto;}img::selection{fill:none;color:none;display:none;background:none;}input[type="text"], input[type="number"], input[type="search"], input[type="email"], textarea{text-align:left;max-width:100%;}input[type="checkbox"], input[type="radio"]{display:none;}input[type="submit"]{background-color:transparent;}label{display:inline;}textarea{resize:vertical;}
/*** END RESET ***/

/*** CANCEL ***/
html, body { width: 100%; height: 100%; }
main { min-height: 100%; }
/*** END CANCEL ***/

/*** COLORS ***/
.nav-button > label,
.nav-button p { color: white; }

.nav-button p { background-color: #AAA; }

html,
.form { background-color: #eee; }

.nav-button > label { background-color: #181818; }
/*** END COLORS ***/

/*** FONTS ***/
@font-face{
	font-family:"Megatech";src:url("../../assets/fonts/MegatechAlt.ttf");/*src:url("../../assets/fonts/ALPHABETH.eot") format("embedded-opentype"),url("../../assets/fonts/ALPHABETH.woff2") format("woff2"),url("../../assets/fonts/ALPHABETH.woff") format("woff"),url("../../assets/fonts/ALPHABETH.ttf") format("trutype"),url("../../assets/fonts/ALPHABETH.svg") format("svg");*/}
@font-face{
	font-family:"Megatech Blank";src:url("../../assets/fonts/MegatechAltBold.ttf");/*src:url("../../assets/fonts/ALPHABETH.eot") format("embedded-opentype"),url("../../assets/fonts/ALPHABETH.woff2") format("woff2"),url("../../assets/fonts/ALPHABETH.woff") format("woff"),url("../../assets/fonts/ALPHABETH.ttf") format("trutype"),url("../../assets/fonts/ALPHABETH.svg") format("svg");*/}

.header-hgroup-h1 { font-family: "Megatech"; }
.header { font-family:"MegaTech Blank", serif; }
* {font-family:"Arial Black", sans-serif;}

.header-hgroup-h1 { font-size: 3vh; }

.form label { text-align: left; }
main { text-align: center; }
.nav-button span { text-decoration: underline; }
/*** END FONTS ***/

/*** UTILITIES ***/
	/*** .u-btnToggle ***/
	.u-btnToggle {
		display: block;
		width: 3em; height: 3em;
		
		background-color: #181818;
		color: white;
	}
		.form .u-btnToggle { position: absolute; }
/*** END UTILITIES ***/

/*** COMPONENTS ***/
	/*** COMMONS ***/
	main { display: flex; flex-direction: column; }
	section { flex: 1; }
	
	section { position: relative; overflow: hidden; }

	/*** .form ***/
	.form {
		position: absolute;
		width: 100%; height: 100%;
	}
	
	.form input[type="submit"] {
		background-color: #181818;
		color: white;
	}
	.form label {
		display: block;
		padding: 1em 0;
	}

	/*** .header ***/
	.header {
		display: block;
	}
	
	/*** .nav ***/
	.nav {// max-height: 40vh;// overflow: auto; }
	.nav-button {
		position: relative;
		display: inline-block;
		vertical-align: bottom;
	}
	.nav-button > label { display: block; }
	.nav-button p {
		position: absolute; bottom: 100%;
		width: 100%;
	}
	.nav-button p label {
		position: absolute; top: 0; right: 0;
	}
/*** END COMPONENTS ***/

/*** INTERRACTIVITY ***/
.nav-button label,
.nav-button span { cursor: pointer; }

.form { bottom: -100%; }
.form.is-open { bottom: 0; }

.nav-button p { display: none; }
#chbx4Nav1:checked ~ main .nav-button:nth-child(1) p, 
#chbx4Nav2:checked ~ main .nav-button:nth-child(2) p, 
#chbx4Nav3:checked ~ main .nav-button:nth-child(3) p, 
#chbx4Nav4:checked ~ main .nav-button:nth-child(4) p, 
#chbx4Nav5:checked ~ main .nav-button:nth-child(5) p, 
#chbx4Nav6:checked ~ main .nav-button:nth-child(6) p, 
#chbx4Nav7:checked ~ main .nav-button:nth-child(7) p, 
#chbx4Nav8:checked ~ main .nav-button:nth-child(8) p, 
#chbx4Nav9:checked ~ main .nav-button:nth-child(9) p, 
#chbx4Nav10:checked ~ main .nav-button:nth-child(10) p, 
.jekyllPlaceholderClassName { display: block !important; }
/*** END INTERRACTIVITY ***/

/*** MEDIA QUERIES ***/
@media screen and (max-width: 50em) {
	body { font-size: 14px; }
	
	/*** UTILITIES: .u-btnToggle ***/
	.form .u-btnToggle { top: 1em; right: 1em; }
		
	/*** UTILITIES: .u-input ***/
	.u-input { padding: .5em; }
	.form input[type="submit"] { padding: .5em 1em; }
	
	/*** COMPONENTS: .nav ***/
	.nav { padding: .5em; }
	.nav-button { margin: .25em; }
	.nav-button > label { padding: 1em; }
	.nav-button p { padding: .5em; }
}
@media screen and (min-width: 50em) {
	body { font-size: 16px; }
	
	/*** UTILITIES: .u-btnToggle ***/
	.form .u-btnToggle { top: 1.8em; right: 1.8em; }
	
	/*** UTILITIES: .u-input ***/
	.u-input { padding: 1em; }
	.form input[type="submit"] { padding: 1em 1.8em; }
	
	/*** COMPONENTS: .header ***/
	.header-hgroup-h1 {
		padding: 1em;
	}
	
	/*** COMPONENTS: .nav ***/
	.nav { padding: 1.8em; }
	.nav-button { margin: 1em; }
	.nav-button > label { padding: 1.8em; }
	.nav-button p { padding: 1em; }
	
	/*** VIEWPORT ***/
	.nav-button > label { width: 10em; }
}
/*** MEDIA QUERIES ***/

/*** DECORATION ***/
	/*** .d-cssCentered ***/
	.d-cssCentered {
		display: flex;
		align-items: center; justify-content: center;
	}

	/*** .d-midWrap ***/
	.d-midWrap {
		max-width: 75em;
		margin: 0 auto;
	}
/*** END DECORATION ***/

/*** GLOBAL ***/
	/*** .u-notifications ***/
	.u-notifications {
			z-index: 100;
		position: fixed; top: 0; right: 0;
		width: 30%;
			padding: 1em;
	}
	.u-notifications div {
		position: relative;
			padding: 1em .5em;
			margin-bottom: 1em;
			background-color: #AAA;
	}
	.u-notifications span {
		position: absolute; top: 0; left: 0;
	}
/*** END GLOBAL ***/