html {
	background: #EFDFCB;
}

html, body {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	top: 0;
}

#main_ctn {
	background: #d6c4ad;
	max-width: 1290px;
}
/* Minimum aspect ratio */
/*
@media screen and (min-aspect-ratio: 1000/553) {
  #main_ctn {
	position: absolute;
	height: : 100%;
	margin: 0;
	padding: 0;
	padding-bottom: 53.33%;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);
	background: red;

  }
}*/

#unity_ctn {
	position: absolute;
	max-width: 387px;
	width: 30%;
	height: 0;
	top: 50%;
	right: 50%;
	transform: translateX(-66.67%);
}

#gameContainer {
	width: 100%;
	padding-bottom: 178% !important;
	position: absolute !important;
	transform: translateY(-50%);
}

#\#canvas {
	position: absolute;
	width: 100%;
	height: 100%;
}

#showcase_ctn {
	max-width: 907px;
	position: absolute;
	width: 70%;
	height: 0;
	left: 50%;
	top: 50%;
	transform: translateX(-28.57%);
}

#showcase_ratio {
	/*background: blue;*/
	width: 100%;
	/*padding-bottom: 76.19%;*/
	padding-bottom: 63.69%;
	position: absolute;
	transform: translateY(-48%);
}
/*
#art_ctn {
	background: green;
	position: absolute;
	width: 48.25%;
	height: 45%;
	left: 0;
	top: 0;
}

#prog_ctn {
	background: yellow;
	position: absolute;
	width: 48.25%;
	height: 45%;
	right: 0;
	top: 0;
}

#gd_ctn {
	background: lime;
	position: absolute;
	width: 100%;
	height: 50%;
	left: 0;
	bottom: 0;
}*/

#art_ctn, #prog_ctn, #gd_ctn, #contact_ctn {

	position: absolute;
	transition: background 0.375s;
	/*background: #c3b4a0;*/
}

#art_ctn {
	z-index: 3;
	width: 44.444%;
	height: 66.7%;
	left: 0;
	top: 0;
	clip-path: polygon(0% 0%, 75% 0%, 75% 35%, 82% 50%, 75% 65%, 75% 100%, 0% 100%);
	background-color: #8a250a;
}

#prog_ctn {
	z-index: 2;
	width: 44.444%;
	height: 66.7%;
	left: 33.30%;
	top: 0;
	clip-path: polygon(0% 0%, 75% 0%, 75% 35%, 82% 50%, 75% 65%, 75% 100%, 0% 100%, 0% 65%, 7% 50%, 0% 35%);
}

#gd_ctn {
	z-index: 1;
	width: 33.5%;
	height: 100%;
	right: 0;
	top: 0;
	clip-path: polygon(0% 0%, 100% 0%, 100% 66.7%, 70% 66.7%, 50% 72%, 30% 66.7%, 0% 66.7%, 0% 43.333%, 9.31% 33.35%, 0% 23.333%);
}

#showcase_ctn > div {
	/*outline: 1px solid white;*/
}

#art_ctn:hover, 
#prog_ctn:hover, 
#gd_ctn:hover {

	/*background: #e6d6c2;*/
	cursor: pointer;
}

#art_ctn:before, #prog_ctn:before, #gd_ctn:before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 1;
}
#art_ctn:hover:before, #prog_ctn:hover:before, #gd_ctn:hover:before {
	opacity: 1;
}
#art_ctn.locked:before, #prog_ctn.locked:before, #gd_ctn.locked:before {
	opacity: 0;
}
#art_ctn:before {
	background-image: url('xelor.png');
	background-size: 100% auto;
	background-position-y: 32%;
	transition: transform 0.375s, opacity 0.375s;
	/*transform: scale(1);*/
	transform: translate(-15%, 0%);
	opacity: 1;
}
#art_ctn:not(.locked):hover:before {
	transform: translate(-15%, 0%) scale(1.5);
	opacity: 0;
}
#prog_ctn:before {
	background-image: url('prog.png');
	background-size: 100% auto;
	background-position-y: 85%;
	transition: transform 0.375s, opacity 0.375s;
	transform: scale(1);
	transform: translate(-15%, 0%);
	opacity: 1;
}
#gd_ctn:before {
	background-image: url('gd.png');
	background-size: 100% auto;
	background-position-y: 0%;
	background-repeat: no-repeat;
	background-color: #170a16;
	transition: transform 0.375s, opacity 0.375s;
	/*transform: scale(1);*/
	transform: translate(0%, 0%);
	opacity: 1;
}

div.locked {
	background-color: #efdfcb !important;
}

.gamelocked {
	position: absolute;
	z-index: 100;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #efdfcb;
	background-image: linear-gradient(to right, transparent, #f7ecde);
}

.gamelocked span {
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 192px;
	text-align: center;
	transform: translate(-50%, -50%);
	font-family: sans-serif;
	color: #9a8b77;
}

#gd_ctn .gamelocked {
	background-image: linear-gradient(to bottom, transparent, #f7ecde 70%);
}
#prog_ctn .gamelocked {
	background-image: linear-gradient(135deg, transparent, #f7ecde 75%);
}

#art_ctn.locked > .gamelocked {
}
#art_ctn.locked > .gamelocked:before {
	content: '';
	position: absolute;
	width: 192px;
	height: 192px;
	left: 37.5%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-image: url('brush.png');
	background-size: 100%;
}
#art_ctn.locked > .gamelocked > span {
	left: 37.5%;
	top: 90%;
}

#prog_ctn.locked > .gamelocked:before {
	content: '';
	position: absolute;
	width: 192px;
	height: 192px;
	left: 37.5%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-image: url('keyboard.png');
	background-size: 100%;
}
#prog_ctn.locked > .gamelocked > span {
	left: 37.5%;
	top: 90%;
}

#gd_ctn.locked > .gamelocked:before {
	content: '';
	position: absolute;
	width: 192px;
	height: 192px;
	left: 50%;
	top: 33.333%;
	transform: translate(-50%, -50%);
	background-image: url('gear.png');
	background-size: 100%;
}
#gd_ctn.locked > .gamelocked > span {
	left: 50%;
	top: 60%;
}


/*#art_ctn:before, #prog_ctn:before, #gd_ctn:before {
	content: '';
	position: absolute;
	background: #efdfcb;
}
#art_ctn:before {
	width: 97%;
	height: 97%;
	left: 1.1%;
	top: 1.5%;
	clip-path: polygon(0% 0%, 75% 0%, 75% 30%, 85% 50%, 75% 70%, 75% 100%, 0% 100%);
}
#prog_ctn:before {
	width: 97%;
	height: 97%;
	left: 1.1%;
	top: 1.5%;
	clip-path: polygon(0% 0%, 75% 0%, 75% 30%, 85% 50%, 75% 70%, 75% 100%, 0% 100%);
}
#gd_ctn:before {
	width: 97%;
	height: 97%;
	left: 1.1%;
	top: 1.5%;
	clip-path: polygon(0% 0%, 100% 0%, 100% 66.7%, 70% 66.7%, 50% 72%, 30% 66.7%, 0% 66.7%);
}*/