@font-face {
    font-family: 'kiaB';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/kia_bold.eot');
    src: url('../fonts/kia_bold.eot?#iefix') format('embedded-opentype'), url('../fonts/kia_bold.woff') format('woff');
}

@font-face {
    font-family: 'kiaM';
    font-weight: normal;
    font-style: normal;
    src: url('../fonts/kia_medium.eot');
    src: url('../kia_medium.eot?#iefix') format('embedded-opentype'), url('../fonts/kia_medium.woff') format('woff');
}

html, body
{
	width:100%;
	height:100%;
	margin:auto;
	padding:0;
	color: #000;
	overflow: hidden;
	font-family: kiaM, kiaB, Arial;
}

#wrapper {
	width: 85vw;
	height:90vh; 
	margin-left: auto;
	margin-right: auto;
	display:block; 
		font-family: kiaM, kiaB, Arial;
}

#game-wrapper {
	display:block;
    margin-top: 10vh;
}

#game-square {
	display:block;
	width: 50vw;
	float:left;
}

.inner-square {
	display:block;
	float:left;
	width: 30%;
	height: 22%;
	position:relative;
	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	border-radius: 20px;
	border: 4px solid #bb162b;
	margin-right:10px;
	margin-bottom: 10px;
}

#sq-static {
	display:block;
	float:left;
	width: 30%;
	height: 22%;
	margin-right:10px;
	margin-bottom: 10px;
}

#sq-static .logo {
margin-top:10%;margin-bottom:auto;
}
div.inner-square .front {
	display:block;
	position:absolute;
	top:0;
	padding-top:15%;
	z-index:900;
	width: 100%;
	height:100%;
	background: #bb162b;
	text-align:center;
	color: #fff;
	font-size: 80px;
	
	-webkit-transform: rotateX(0deg) rotateY(0deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
	border-radius: 16px;
}

div.inner-square.flip .front {
	z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    	-webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	border-radius: 20px;

}
div.inner-square .krandom {
	position: absolute;
    top: 0;
    z-index: 800;
    width: inherit;
    height: inherit;
	margin-left:5%;
    
    -webkit-transform: rotateY(-180deg);
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
 
    -moz-transform: rotateY(-180deg);
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    /* -- transition is the magic sauce for animation -- */
    -o-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    
    
}

.krandom IMG {
	width: 300%;
	/* height: calc(480% - 10px);*/
	margin-left: 5%;
	margin-left:auto;
	margin-right:auto;

}

div.inner-square.flip .krandom {
	z-index: 1000;
    -webkit-transform: rotateX(0deg) rotateY(0deg);
    -moz-transform: rotateX(0deg) rotateY(0deg);
    
}

.inner-square:before {
	content: "";
	display:block;
	padding-top: 100%;
}

#message-square {
	display:block;
	width: 30vw;
	height: 61vh;
	color: #fff;
	background: #7e8083;
	position:relative;
	float:right;
	overflow:hidden;
	-webkit-border-radius: 60px;
    -moz-border-radius: 60px;
	border-radius: 60px;
	


}
#howtoplay {
	display:block;
	margin-top: 10vh;
	margin-bottom: 50px;
	font-size: 60px;
	display:block;
	width: 85vw;
	padding: 60px 0px 60px 0px;
	color: #fff;
	background: #7e8083;
	-webkit-border-radius: 60px;
    -moz-border-radius: 60px;
	border-radius: 60px;
	


}

.large-text {
	font-size: 150px;
}

.count-text {
	color: #bb162b;
	display: inline-block;
	width: 40px;
}
.inner-message {
	height: 100%;
	width: 100%;
	font-size: 4em;
	padding: 60px 60px 60px 60px;
	display:none;
	
}

.message-unit {
	width:30vw;	
	display: block;
	float:left;
}

#bottom {
	display:block;
	margin-top: 50px;
	float:left;
	width:100%;
	text-align:center;
}

#bottom input[type=button]#btn_startover, input[type=button]#btn_start {
	background: #7e8083;
	width: 20vw;
	height: 120px;
	color: #fff;
	font-size:3em;
	font-family: kiaM, kiaB;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	border-radius: 10px;

}

input[type=button]#btn_solution {
	background: #fff;
	width: 200px;
	height: 80px;
	color: #000;
	font-size:35px;
	font-family: kiaM, kiaB;
	margin-top:40px;
	margin-left:auto;
	margin-right:auto;
	-webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	border-radius: 10px;

}


table {
	margin-top: 15vh;
}

table td {
	font-size: 70px;
	font-family: kiaM, kiaB;
	height: 140px;
}

table td.left {
	text-align:right;
	padding-right:30px;
}

table td.right {
	text-align: left;
	padding-left:30px;
}

#backtotop {
	display:block;position:fixed;bottom:20px;width:200px;height:100px;
}