@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');

/* sizeCheck */

.checkSize {
	display: none;
	font-size: 1px;
}

/* body, html */

body, html {
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: 'Montserrat', sans-serif;
	font-size: 1em;
	background-color: rgba(15,15,15,1);
}

.quadrants {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;	
}

/* quad */

.tl.quad,
.tr.quad,
.bl.quad,
.br.quad {
	position: absolute;
	z-index: 1;
	width: 90%;
	height: calc(100% - 5em);
	overflow: hidden;
	-webkit-transition: all 600ms cubic-bezier(0.5,0.5,0.5,1);
	-moz-transition: all 600ms cubic-bezier(0.5,0.5,0.5,1);
	-ms-transition: all 600ms cubic-bezier(0.5,0.5,0.5,1);
	-o-transition: all 600ms cubic-bezier(0.5,0.5,0.5,1);
	transition: all 600ms cubic-bezier(0.5,0.5,0.5,1);
}

.tl.quad {
	bottom: 50%;
	right: 50%;
	background-color: rgba(7,7,7,1);
}	  

.tr.quad {
	bottom: 50%;
	left: 50%;
	background-color: rgba(15,15,15,1);
}

.bl.quad {
	top: 50%;
	right: 50%;
	background-color: rgba(22,22,22,1);
}

.br.quad {
	top: 50%;
	left: 50%;
	background-color: rgba(30,30,30,1);
}

/* quad selected */

.tl.quad.tlselected,
.tl.quad.trselected,
.tr.quad.tlselected,
.tr.quad.trselected {
	bottom: 5em;
}

.tl.quad.blselected,
.tl.quad.brselected,
.tr.quad.blselected,
.tr.quad.brselected {
	bottom: calc(100% - 5em);
}

.bl.quad.tlselected,
.bl.quad.trselected,
.br.quad.tlselected,
.br.quad.trselected {
	top: calc(100% - 5em);
	bottom: unset;
}

.bl.quad.blselected,
.bl.quad.brselected,
.br.quad.blselected,
.br.quad.brselected {
	top: 5em;
	bottom: unset;
}

.tl.quad.tlselected,
.tl.quad.blselected,
.bl.quad.tlselected,
.bl.quad.blselected {
	right: 10%;
}

.tl.quad.trselected,
.tl.quad.brselected,
.bl.quad.trselected,
.bl.quad.brselected {
	right: 90%;
}	

.tr.quad.trselected,
.tr.quad.brselected,
.br.quad.trselected,
.br.quad.brselected {
	left: 10%;
}

.tr.quad.tlselected,
.tr.quad.blselected,
.br.quad.tlselected,
.br.quad.blselected {
	left: 90%;
}

/* quad show */

.bl.quad.blshow,
.bl.quad.brshow,
.br.quad.blshow,
.br.quad.brshow {
	top: 0px;
}

.bl.quad.trshow,
.br.quad.trshow {
	top: 100%;
}

.tl.quad.blshow,
.bl.quad.blshow {
	right: 0px;
}

.tl.quad.trshow,
.tl.quad.brshow,
.bl.quad.trshow,
.bl.quad.brshow {
	right: 100%;
}

.tl.quad.trshow,
.tr.quad.trshow {
	bottom: 0px;
}

.tl.quad.blshow,
.tl.quad.brshow,
.tr.quad.blshow,
.tr.quad.brshow {
	bottom: 100%;
}

.tr.quad.trshow,
.tr.quad.brshow,
.br.quad.trshow,
.br.quad.brshow {
	left: 0px;
}

.tr.quad.blshow,
.br.quad.blshow {
	left: 100%;
}

.tl.quad.trshow,
.tl.quad.blshow,
.tl.quad.brshow,
.tr.quad.trshow,
.tr.quad.blshow,
.tr.quad.brshow,
.bl.quad.trshow,
.bl.quad.blshow,
.bl.quad.brshow,
.br.quad.trshow,
.br.quad.blshow,
.br.quad.brshow {
	width: 100%;
}

.tl.quad.blshow,
.tl.quad.brshow,
.tr.quad.blshow,
.tr.quad.brshow,
.bl.quad.trshow,
.br.quad.trshow {
	height: 10%;
}

.tl.quad.trshow,
.tr.quad.trshow,
.bl.quad.blshow,
.bl.quad.brshow,
.br.quad.blshow,
.br.quad.brshow {
	height: 100%;
}

/* nav */

.tl.nav,
.tr.nav,
.bl.nav,
.br.nav {
	cursor: pointer;
	position: absolute;
	z-index: 10;
	width: 30%;
	background-color: rgba(0,0,0,0);
	overflow: visible !important;
	-webkit-transition: all 450ms cubic-bezier(0,0,0,1);
	-moz-transition: all 450ms cubic-bezier(0,0,0,1);
	-ms-transition: all 450ms cubic-bezier(0,0,0,1);
	-o-transition: all 450ms cubic-bezier(0,0,0,1);
	transition: all 450ms cubic-bezier(0,0,0,1);
}

.tl.nav,
.tl.menu {
	bottom: 0px;
	right: 0px;
}	  

.tr.nav,
.tr.menu {
	bottom: 0px;
	left: 0px;
}

.bl.nav,
.bl.menu {
	top: 0px;
	right: 0px;
}

.br.nav,
.br.menu {
	top: 0px;
	left: 0px;
}

.tl.nav {
	background-color: inherit;
}

/* nav selected */

.nav.select {
	width: 11.11%;
}

.nav.selected {
	width: 100%;
}

/* menu */

@-webkit-keyframes move-l {
	from { background-position: 100%; }
	to   { background-position: 300%; }
}

@-moz-keyframes move-l {
	from { background-position: 100%; }
	to   { background-position: 300%; }
}

@-o-keyframes move-l {
	from { background-position: 100%; }
	to   { background-position: 300%; }
}

@keyframes move-l {
	from { background-position: 100%; }
	to   { background-position: 300%; }
}

@-webkit-keyframes move-r {
	to { background-position: -200%; }
}

@-moz-keyframes move-r {
	to { background-position: -200%; }
}

@-o-keyframes move-r {
	to { background-position: -200%; }
}

@keyframes move-r {
	to { background-position: -200%; }
}

.tl.menu {
	background-image: -webkit-linear-gradient(-45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: -moz-linear-gradient(-45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: -ms-linear-gradient(-45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: -o-linear-gradient(-45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: linear-gradient(-45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
}

.tr.menu {
	background-image: -webkit-linear-gradient(45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: -moz-linear-gradient(45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: -ms-linear-gradient(45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: -o-linear-gradient(45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
	background-image: linear-gradient(45deg,
		rgba(0,0,0,0) 0%,
		rgba(0,0,0,1) 10%,
		rgba(0,0,0,1) 15%,
		rgba(102,102,102,0) 20%,
		rgba(102,102,102,1) 35%,
		rgba(102,102,102,1) 40%,
		rgba(0,0,0,0) 45%,
		rgba(0,0,0,1) 55%,
		rgba(0,0,0,1) 60%,
		rgba(102,102,102,0) 65%,
		rgba(102,102,102,1) 80%,
		rgba(102,102,102,1) 85%,
		rgba(0,0,0,0) 90%,
		rgba(0,0,0,1) 100%);
}

.bl.menu {
	background-image: -webkit-linear-gradient(45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: -moz-linear-gradient(45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: -ms-linear-gradient(45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: -o-linear-gradient(45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: linear-gradient(45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
}

.br.menu {
	background-image: -webkit-linear-gradient(-45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: -moz-linear-gradient(-45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: -ms-linear-gradient(-45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: -o-linear-gradient(-45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
	background-image: linear-gradient(-45deg,
		rgba(0,0,0,1) 0%,
		rgba(0,0,0,0) 10%,
		rgba(102,102,102,1) 15%,
		rgba(102,102,102,1) 20%,
		rgba(102,102,102,0) 35%,
		rgba(0,0,0,1) 40%,
		rgba(0,0,0,1) 45%,
		rgba(0,0,0,0) 55%,
		rgba(102,102,102,1) 60%,
		rgba(102,102,102,1) 65%,
		rgba(102,102,102,0) 80%,
		rgba(0,0,0,1) 85%,
		rgba(0,0,0,1) 90%,
		rgba(0,0,0,0) 100%);
}

.tl.menu,
.bl.menu {
	-webkit-animation: move-l 5s linear infinite;
	-moz-animation: move-l 5s linear infinite;
	-ms-animation: move-l 5s linear infinite;
	-o-animation: move-l 5s linear infinite;
	animation: move-l 5s linear infinite;
}

.tr.menu,
.br.menu {
	-webkit-animation: move-r 5s linear infinite;
	-moz-animation: move-r 5s linear infinite;
	-ms-animation: move-r 5s linear infinite;
	-o-animation: move-r 5s linear infinite;
	animation: move-r 5s linear infinite;
}

.tl.menu,
.tr.menu,
.bl.menu,
.br.menu {
	width: calc(100% - 2em);
    height: 6em;
    padding: 0px 1em;
	overflow: visible !important;
    font-size: 1em;
    font-weight: 300;
    line-height: 3em;	
	color: transparent;
	text-shadow: 0px 2px 6px rgba(0,0,0,0.4);
	text-align: justify;
	white-space: nowrap;
	-webkit-text-align-last: justify;
	-moz-text-align-last: justify;
	-ms-text-align-last: justify;
	-o-text-align-last: justify;
	text-align-last: justify;
	-webkit-background-clip: text;
	-moz-background-clip: text;
	-ms-background-clip: text;
	-o-background-clip: text;
	background-size: 200%;
	-webkit-transition: all 450ms cubic-bezier(0,0,0,1);
	-moz-transition: all 450ms cubic-bezier(0,0,0,1);
	-ms-transition: all 450ms cubic-bezier(0,0,0,1);
	-o-transition: all 450ms cubic-bezier(0,0,0,1);
	transition: all 450ms cubic-bezier(0,0,0,1);
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}

/* menu selected */

.menu.select,
.menu.selected {
	-webkit-text-fill-color: rgba(102,102,102,1);
	-moz-text-fill-color: rgba(102,102,102,1);
	-ms-text-fill-color: rgba(102,102,102,1);
	-o-text-fill-color: rgba(102,102,102,1);
	text-fill-color: rgba(102,102,102,1);
}

.menu.select {
	width: calc(100% - 2em);
	height: 4em;
	padding: 0.5em 1em;
	font-size: 1em;
	font-weight: 400;
	line-height: 2em;
}

.menu.selected {
	width: calc(100% - 0.5em);
	height: 1em;
	padding: 0.125em 0.25em;
	font-size: 4em;
	font-weight: 200;
	line-height: 1em;
}

/* @media */

@media only screen and (max-width: 1200px){

/* sizeCheck */
	
	.checkSize {
		font-size: 2px;
	}
	
/* body, html */

	body, html {
		font-size: 1.4em;
	}

/* quad selected */
	
	.tl.quad.tlselected,
	.tr.quad.trselected,
	.bl.quad.blselected,
	.br.quad.brselected {
		z-index: 1;
		width: 100%;
		height: calc(100% - 5em);
		bottom: 5em;
	}
	
	.tl.quad.trselected,
	.tl.quad.blselected,
	.tl.quad.brselected,
	.tr.quad.tlselected,
	.tr.quad.blselected,
	.tr.quad.brselected,
	.bl.quad.tlselected,
	.bl.quad.trselected,
	.bl.quad.brselected,
	.br.quad.tlselected,
	.br.quad.trselected,
	.br.quad.blselected {
		z-index: 2;
		width: 33.333%;
		height: 5em;
		bottom: 0px;
	}
	
	.tr.quad.trselected,
	.tr.quad.tlselected,
	.br.quad.brselected {
		left: 0px;
	}
	
	.tr.quad.blselected,
	.tr.quad.brselected {
		left: 33.333%;
	}
	
	.br.quad.tlselected,
	.br.quad.trselected,
	.br.quad.blselected {
		left: 66.666%;
	}
	
	.tl.quad.tlselected,
	.bl.quad.blselected,
	.bl.quad.brselected {
		right: 0px;
	}
	
	.bl.quad.tlselected,
	.bl.quad.trselected {
		right: 33.333%;
	}
	
	.tl.quad.trselected,
	.tl.quad.blselected,
	.tl.quad.brselected {
		right: 66.666%;
	}
	
	.bl.quad.tlselected,
	.bl.quad.trselected,
	.bl.quad.blselected,
	.bl.quad.brselected,
	.br.quad.tlselected,
	.br.quad.trselected,
	.br.quad.blselected,
	.br.quad.brselected {
		top: unset;
	}
	
/* quad show */

	.tr.quad.trshow,
	.bl.quad.blshow,
	.br.quad.brshow {
		width: 100%;
		height: 100%;		
		bottom: 0px;		
	}
	
	.tl.quad.trshow,
	.tl.quad.blshow,
	.tl.quad.brshow,
	.tr.quad.blshow,
	.tr.quad.brshow,
	.bl.quad.trshow,
	.bl.quad.brshow,
	.br.quad.trshow,
	.br.quad.blshow {
		width: 33.333%;
		height: 5em;
		bottom: -5em;
	}
	
	.tr.quad.trshow,
	.br.quad.brshow {
		left: 0px;
	}
	
	.tr.quad.blshow,
	.tr.quad.brshow {
		left: 33.333%;
	}
	
	.br.quad.trshow,
	.br.quad.blshow {
		left: 66.666%;
	}
	
	.bl.quad.blshow,
	.bl.quad.brshow {
		right: 0px;
	}
	
	.bl.quad.trshow {
		right: 33.333%;
	}
	
	.tl.quad.trshow,
	.tl.quad.blshow,
	.tl.quad.brshow {
		right: 66.666%;
	}
	
	.bl.quad.trshow,
	.bl.quad.blshow,
	.bl.quad.brshow,
	.br.quad.trshow,
	.br.quad.blshow,
	.br.quad.brshow {
		top: unset;
	}
	
/* nav selected */
	
	.tl.nav,
	.tr.nav,
	.bl.nav,
	.br.nav {
		width: 50%;
	}

/* nav selected */
	
	.nav.select,
	.nav.selected {
		width: 100%;
		top: unset;
		bottom: 0px;
	}

	
/* menu selected */

	.menu.selected {
		width: calc(100% - 1em);
		height: 1.5em;
		padding: 0px 0.5em;
		font-size: 2em;
		font-weight: 300;
		line-height: 1.5em;
	}

}

/* no cell landscape  */

@media screen and (orientation:landscape) and (max-width: 1200px) {
	body {
		transform: rotate(-90deg);
		transform-origin: left top;
		width: 100vh;
		height: 100vw;
		overflowX: hidden;
		position: absolute;
		top: 100%;
		left: 0;
	}
}