/*** 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, main { width: 100%; height: 100%; }	
footer a { text-decoration: underline; }
* { background-size: cover; }
/*** END CANCEL ***/

/*** Z-INDEXES ***/
.flyer-button { position: relative; z-index: 10; }
.flyer-price-text { position: relative; z-index: 20; }
/*** END Z-INDEXES ***/

/*** COLORS ***/
.demo-content_dock,
.flyer-button { background-color: #03E960; }

.demo-content-code-area,
.demo-content-code-blocks { background-color: rgba(255, 255, 255, .5); }

.flyer-price_dock,
.flyer-price-text a { color: #eee; }

.demo-content-menu span { background-color: #AAA; }

.flyer-price_dock { background-color: #101010; }
/*** END COLORS ***/

/*** FONTS ***/
@font-face { font-family: "OCR A"; src: url("../../assets/fonts/ocraext.ttf"); }

*,
.flyer-footer,
.flyer-price-text { font-family: "OCR A"; letter-spacing: -.05em; }

.flyer-footer,
.flyer-price-text { font-size: 5vw; }
.demo-content-code h5 { font-size: .8em; }

.flyer-footer,
.flyer-price { text-align: center; }
.flyer-price-text a { text-decoration: underline; }
/*** END FONTS ***/

/*** MEDIA ***/
.demo-content-grid-box.has-money { background-image: url("/assets/images/demo/icon_money.png"); }
.demo-content-grid-box.has-computers { background-image: url("/assets/images/demo/icon_laptopB.png"); }
.demo-content-grid-box.has-books { background-image: url("/assets/images/demo/icon_books.png"); }
.demo-content-grid-box.has-degrees { background-image: url("/assets/images/demo/icon_degrees.png"); }
.demo-content-grid-box {
	background-repeat: no-repeat;
	background-position: center;

	background-size: 70% !important;
}

.demo-content-grid-item.is-character img {
	background-repeat: no-repeat;
	background-position: center;

	background-size: 70% auto !important;
}
/*** END MEDIA ***/

/*** COMPONENTS ***/
	/*** COMMONS ***/
	.demo-content-code-area,
	.demo-content-code-blocks { border-radius: .5em; }

	/*** .demo ***/
	.demo-content_dock,
	.demo-content-code,
	.demo-content-code-area,
	.demo-content-code-area-nav,
	.demo-content-code-blocks,
	.demo-content-grid,
	.demo-content-menu { display: flex; }
	.demo-content_dock,
	.demo-content-code-area,
	.demo-content-code-blocks { flex-direction: column; }
	.demo-content-code-area-nav { justify-content: flex-end; }
	.demo-content-code,
	.demo-content-code-area,
	.demo-content-code-area-tags,
	.demo-content-code-blocks,
	.demo-content-code-blocks-tags,
	.demo-content-menu span { flex: 1; }
	.demo-content-code-area { flex: 2; }
	
	.demo-content_dock {
		height: 100%;
		padding: 1em;
	}
	
	.demo-content-code img {
		position: relative;
		width: auto; height: 1.8em;
		display: block;
	}
	.demo-content-code-blocks img { margin: .3em 0; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(2) { top: -0.3em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(3) { top: -0.6em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(4) { top: -0.9em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(5) { top: -1.2em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(6) { top: -1.5em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(7) { top: -1.8em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(8) { top: -2.1em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(9) { top: -2.4em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(10) { top: -2.7em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(11) { top: -3.0em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(12) { top: -3.3em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(13) { top: -3.6em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(14) { top: -3.9em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(15) { top: -4.2em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(16) { top: -4.5em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(17) { top: -4.8em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(18) { top: -5.1em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(19) { top: -5.4em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(20) { top: -5.7em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(21) { top: -6.0em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(22) { top: -6.3em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(23) { top: -6.6em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(24) { top: -6.9em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(25) { top: -7.2em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(26) { top: -7.5em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(27) { top: -7.8em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(28) { top: -8.1em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(29) { top: -8.4em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(30) { top: -8.7em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(31) { top: -9.0em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(32) { top: -9.3em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(33) { top: -9.6em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(34) { top: -9.9em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(35) { top: -10.2em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(36) { top: -10.5em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(37) { top: -10.8em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(38) { top: -11.1em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(39) { top: -11.4em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(40) { top: -11.7em; }
	.demo-content-code-area-nav img { height: 1.5em; }
	.demo-content-code-area-tags img:nth-child(1) { height: 2.3em;// left: .1em; }
	.demo-content-code-area-tags img:nth-child(41) { top: -12.0em; }
	
	.demo-content-code-area,
	.demo-content-code-blocks { 
		padding: 0 .5em;
	}
	.demo-content-code-area {
		margin-right: 1em;
	}
	.demo-content-code-area-tags,
	.demo-content-code-blocks-tags {
		overflow-y: auto;
	}
	.demo-content-code-area-tags_dock {
		position: relative;
	}
	.demo-content-code-area-tags_dock div {
		position: absolute; top: 0; left: 0;
	}
	
	.demo-content-grid {
		position: relative;
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
		grid-template-rows: 1fr 1fr 1fr 1fr;
		margin-top: 1em;
	}
	.demo-content-grid-box {
		border: .1em dashed #bbb;
		aspect-ratio: 1/1;
	}
	.demo-content-grid-box { background-color: #AAA; }
	.demo-content-grid-box.is-map { background-color: white; }
	.demo-content-grid-item {
		position: absolute; top: 0; left: 0;
		width: 12.5%; aspect-ratio: 1/1;
	}
	/* ROW 1 */
	.demo-content-grid-item.is-character[attr-start="1"]  { top: 0%;  left: 0%; }
	.demo-content-grid-item.is-character[attr-start="2"]  { top: 0%;  left: 12.5%; }
	.demo-content-grid-item.is-character[attr-start="3"]  { top: 0%;  left: 25%; }
	.demo-content-grid-item.is-character[attr-start="4"]  { top: 0%;  left: 37.5%; }
	.demo-content-grid-item.is-character[attr-start="5"]  { top: 0%;  left: 50%; }
	.demo-content-grid-item.is-character[attr-start="6"]  { top: 0%;  left: 62.5%; }
	.demo-content-grid-item.is-character[attr-start="7"]  { top: 0%;  left: 75%; }
	.demo-content-grid-item.is-character[attr-start="8"]  { top: 0%;  left: 87.5%; }

	/* ROW 2 */
	.demo-content-grid-item.is-character[attr-start="9"]  { top: 25%; left: 0%; }
	.demo-content-grid-item.is-character[attr-start="10"] { top: 25%; left: 12.5%; }
	.demo-content-grid-item.is-character[attr-start="11"] { top: 25%; left: 25%; }
	.demo-content-grid-item.is-character[attr-start="12"] { top: 25%; left: 37.5%; }
	.demo-content-grid-item.is-character[attr-start="13"] { top: 25%; left: 50%; }
	.demo-content-grid-item.is-character[attr-start="14"] { top: 25%; left: 62.5%; }
	.demo-content-grid-item.is-character[attr-start="15"] { top: 25%; left: 75%; }
	.demo-content-grid-item.is-character[attr-start="16"] { top: 25%; left: 87.5%; }

	/* ROW 3 */
	.demo-content-grid-item.is-character[attr-start="17"] { top: 50%; left: 0%; }
	.demo-content-grid-item.is-character[attr-start="18"] { top: 50%; left: 12.5%; }
	.demo-content-grid-item.is-character[attr-start="19"] { top: 50%; left: 25%; }
	.demo-content-grid-item.is-character[attr-start="20"] { top: 50%; left: 37.5%; }
	.demo-content-grid-item.is-character[attr-start="21"] { top: 50%; left: 50%; }
	.demo-content-grid-item.is-character[attr-start="22"] { top: 50%; left: 62.5%; }
	.demo-content-grid-item.is-character[attr-start="23"] { top: 50%; left: 75%; }
	.demo-content-grid-item.is-character[attr-start="24"] { top: 50%; left: 87.5%; }

	/* ROW 4 */
	.demo-content-grid-item.is-character[attr-start="25"] { top: 75%; left: 0%; }
	.demo-content-grid-item.is-character[attr-start="26"] { top: 75%; left: 12.5%; }
	.demo-content-grid-item.is-character[attr-start="27"] { top: 75%; left: 25%; }
	.demo-content-grid-item.is-character[attr-start="28"] { top: 75%; left: 37.5%; }
	.demo-content-grid-item.is-character[attr-start="29"] { top: 75%; left: 50%; }
	.demo-content-grid-item.is-character[attr-start="30"] { top: 75%; left: 62.5%; }
	.demo-content-grid-item.is-character[attr-start="31"] { top: 75%; left: 75%; }
	.demo-content-grid-item.is-character[attr-start="32"] { top: 75%; left: 87.5%; }

	/*
	.demo-content-grid-item.is-character[attr-start="1"] { top: 0; left: 0; }
	.demo-content-grid-item.is-character[attr-start="2"] { top: 0; left: 33.333%; }
	.demo-content-grid-item.is-character[attr-start="3"] { top: 0; left: 66.666%; }
	.demo-content-grid-item.is-character[attr-start="4"] { top: 33.333%; left: 0; }
	.demo-content-grid-item.is-character[attr-start="5"] { top: 33.333%; left: 33.333%; }
	.demo-content-grid-item.is-character[attr-start="6"] { top: 33.333%; left: 66.666%; }
	.demo-content-grid-item.is-character[attr-start="7"] { top: 66.666%; left: 0; }
	.demo-content-grid-item.is-character[attr-start="8"] { top: 66.666%; left: 33.333%; }
	.demo-content-grid-item.is-character[attr-start="9"] { top: 66.666%; left: 99.999%; }
	*/
	
	.demo-content-grid-item.is-character[attr-direction="up"] { transform: rotate(-90deg); }
	
	.demo-content-menu {
		margin-top: 1em;
	}
	.demo-content-menu span, .demo-content-menu label {
		padding: 1em;
		border-radius: .5em;
	}
	.demo-content-menu span {
		margin-right: 1em;
	}
	.demo-content-menu label {
		background-color: white;
	}

	/*** .flyer ***/
	.flyer {
		position: relative;
	}
	.flyer-button {
		position: absolute;
		width: 15%; aspect-ratio: 1/1;
		display: block;
		padding: .5em;
		
		border-radius: 50%;
	}
		.flyer-button.for-flyer { top: 35%; left: 19%; }
		.flyer-button.for-demo { top: 0; right: 0; }
		#chkbx4price:checked ~ main .flyer-button {// width: 1.9em; }
	.flyer-footer {
		padding: .75em .5em;
	}
	.flyer-img {
		display: block;
		margin: 0 auto;
	}
	.flyer-price {
		position: absolute; top: 37.5%;
		width: 100%;
		padding: 0 10%;
	}
	.flyer-price_dock {
		padding: .5em;
		border-radius: .5em;
	}
/*** END COMPONENTS ***/

/*** INTERACTIIVITY ***/
.js-code,
.demo-content-menu span, .demo-content-menu label,
.flyer-button { cursor: pointer; }

.flyer-price { display: none; }
#chkbx4price:checked ~ main .flyer-price { display: block; }

.demo { display: none !important; }
#chkbx4demo:checked ~ main .demo { display: flex !important; }

.flyer-button img { transform: rotate(-15deg); }
#chkbx4price:checked ~ main .flyer-button img { transform: rotate(0); }

#chkbx4demo:checked ~ main .flyer-button.for-demo { background-color: #AAA !important; }
/*** END INTERACTIIVITY ***/

/*** MEDIA-QUERIES ***/
@media screen and (max-width: 50em) {
	/*** FONTS ***/
	html { font-size: 14px; }	

	/*** COMPONENTS: .demo ***/
	.demo-content {
		position: absolute; top: 0; left: 0; z-index: 100;
		width: 100%; height: 100%;
	}
	
	/*** VIEWPORT ***/
	.demo-footer { display: none; }
}
@media screen and (min-width: 50em) {
	/*** CANCEL ***/
	html { max-width: 1000px; margin: 0 auto; }
	
	/*** FONTS ***/
	html { font-size: 18px; }
	
	/*** COMMONS ***/
	main { display: flex; }
	.demo { flex: 1; }
	
	.demo,
	.flyer { margin: 1em; }
	.demo-content_dock,
	.flyer {
		border-radius: 1em; overflow: hidden;
	}
	
	/*** COMPONENTS: .demo ***/
	.demo {// display: flex; }
	.demo { flex-direction: column; }
	.demo-content { flex: 1; }
	
	.demo-content-code-area { min-width: 10em; }
	
	/*** COMPONENTS: .flyer ***/
	.flyer {// max-width: 19em; }
	.flyer { max-height: 100vh; }
	.flyer-img { width: auto; height: 100%; }
	
	.flyer-footer,
	.flyer-price-text { font-size: 1em; }

	/*** VIEWPORT ***/
	.demo-content-grid-box {
		/*
		width: auto; height: 18vh !important;
		*/
	}
	.demo-footer {
		padding: 1em 1em 0 1em;
		text-align: right;
	}
	.demo-content_dock { max-width: 60vh; }
	
	.flyer-footer { display: none; }
}
/*** END MEDIA-QUERIES ***/

/*** TOOLS ***/
	/*** .CSScentered ***/
	.CSScentered {
		display: flex;
		align-items: center; justify-content: center;
	}
	
	/*** .CSSspacer ***/
	.u-spacer { flex: 1; }
/*** END TOOLS ***/

/*** ANIMATION ***/
	/*** .flyer-button ***/
	#chkbx4price:not(:checked) ~ main .flyer-button,
	.js-code.for-play { animation: twinkle 1s infinite; }
	
	@keyframes twinkle {
		0% { transform: scale(1); }
		50% { transform: scale(1.19); }
		100% { transform: scale(1); }
	}
/*** END ANIMATION ***/