/*
  Load fonts
*/
@font-face {
	font-family: STB;
 	src: url("./fonts/Steinschrift.eot")
 	src: url("./fonts/Steinschrift.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: STB;
	src: url("./fonts/Steinschrift.ttf")
}
@font-face {
	font-family: SSB;
 	src: url("./fonts/StreetSemiBold.eot")
 	src: url("./fonts/StreetSemiBold.eot?#iefix") format("embedded-opentype"); 
}
@font-face {
	font-family: SSB;
	src: url("./fonts/StreetSemiBold.ttf")
}

* { box-sizing: border-box; }

body {
    margin:0 auto;
    padding:0;
    overflow:hidden;
    background-color:#1c022e;
    font-family: STB;
    font-weight: normal;
    color: #ffffff;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
    -khtml-user-select: none; 
    -ms-user-select: none; 
}

#perfect,
#solveimage,
#topten,
#photomind,
#game,
#scores,
#gamebar,
#loader,
#launch,
#solve,
#aleft,
#aright,
#info,
#theimage,
#loaderblock,
#levelblock,
#nextlevel,
#uniloader {
    position:absolute;
    overflow:hidden;
    z-index: 10;
}

#gamebar {
    border-radius: 8px 8px;
    border: 2px solid #707070;
}

#scores {
    display: none;
}

.gamebar {
    background: linear-gradient(45deg, rgba(47,133,5,1) 0%, rgba(89,198,35,1) 15%, rgba(108,227,50,1) 35%, rgba(77,195,18,1) 65%, rgba(172,231,44,1) 75%, rgba(198,255,0,1) 80%, rgba(249,240,103,1) 85%, rgba(250,193,95,1) 90%, rgba(255,156,0,1) 95%, rgba(255,84,0,1) 97%, rgba(255,0,0,1) 100%);
    width: 0%;
    height: 28px;
}

span.row {
    text-align: right;
    font-size: 34px;
    display: block;
    text-transform: uppercase;
}

span.abort,
img.fotoset {
    cursor: pointer;
}

span.abort,
span.start {
    display: block;
    margin-top: 15px;
    text-align: center;
    text-transform: uppercase;
    color: #00e000;
}

#solveimage {
    border: 2px solid #f2f2f2;
    background-color: #000000;
    display: none;
}

#solution {
    display: none;
    position:absolute;
    overflow:hidden;
    background-color: #1c022e;
    opacity: .95;
    z-index: 9;
    overflow-y: auto;
}

img.thumb {
    width: 399px;
    height: 399px;
    border: 1px solid #f2f2f2;
}

#topten {
    overflow-y: auto;
    scrollbar-width: none;
}

.levelinfo h1 {
    padding: 0 0 10px 0;
    margin: 0;
    font-size: 40px;
    text-transform: uppercase;
}

#solution h2,
#topten h2,
#info h2 {
    padding: 0 0 10px 0;
    margin: 0;
    font-size: 28px;
    text-transform: uppercase;
}

#solution p,
#info p  {
    padding: 0; margin: 0;
    text-align: justify;
    font-size: 25px;
    line-height: 52px;
}

.levelinfo span,
.levelinfo p,
#solve span {
    opacity: 0;
    display: block;
    text-align: center;
    font-size: 30px;
    cursor: pointer;
    text-transform: uppercase;
}

.clickable {
    cursor: pointer;
    color: #00e000;
}

.levelinfo p {
    opacity: 1;
}

.topscore strong {
    color: #fdfd00;
}

.topscore {
    display: block;
    font-size: 24px;
    text-transform: uppercase;
    letter-spacing: -1px;
    color: #f0f0f0;
}


#aleft {
    cursor: pointer;
    background-position: left top;
    background-image: url("./images/aleft.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#aright {
    cursor: pointer;
    background-position: right top;
    background-image: url("./images/aright.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#loader {
    bottom: 80px;
    left: 724px;
    width: 600px;
    height: 40px;
    border: 1px solid #f2f2f2;
}

img.loading {
    width: 250px;
    height: 250px;
}

.progress {
    position: absolute;
    top: 0;
    display: inline-block;
    width: 0%;
    height: 39px;
    margin: 0 auto;
    padding: 0;
    background-color: #1c022e;
}

#launch {
    background-color: #1c022e;
    width: 100%;
    height: 100%;
}

#photomind {
    top: 0px; 
    left: 0px;
    width: 2048px;
    height: 1536px;
    display: none;
}

#noshow {
    display: none;
}

#perfect {
    z-index: 500000;
    display: none;
    background-color: #1c022e;
    opacity: .75;
}

#perfect span {
    position: absolute;
    display: block;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    font-size: 80px;
    line-height: 190px;
    background-color: #000000;
    height: 200px;
    left: 0; 
    top: 30%;
    border-top: 3px solid #fdfd00;
    border-bottom: 3px solid #fdfd00;
}

#nextlevel,
#uniloader {
    z-index: 500000;
    display: none;
    background-color: #1c022e;
    opacity: .95;
}

.levelinfo {
    text-align: center;
}

#loaderblock p {
    font-size: 32px;
    padding: 0; margin: 0;
    text-transform: uppercase;
    letter-spacing: -1px;
    display: block;
    text-align: center;
    color: #ffffff;
}

#levelblock {
    text-align: center;
    width: 1300px;
    height: 1200px;
    top: 80px;
}

#loaderblock {
    width: 800px;
    height: 500px;
    top: 468px;
}

/* --- Game instructions --- */

.scene {
    margin: 20px auto;
    position: relative;
    width: 820px;
    height: 620px;
    perspective: 1000px;
}

.carousel {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateZ(-2526px);
    transform-style: preserve-3d;
    transition: transform 1s;
}

.carousel__cell {
    position: absolute;
    width: 800px;
    height: 600px;
    left: 10px;
    top: 10px;
    border: 2px solid #ffffff;
    transition: transform 1s, opacity 1s;
    transform: translateZ(2526px);
    background: hsla(120, 100%, 25%, 0.9);
}

.boardID {
    position: absolute;
    background-color: #000000;
    border-radius: 25px 25px;
    opacity: .75;
    top: 5px; right: 5px;
    font-size: 70px;
    font-family: STB;
    color: #ffffff;
}

.photoholder {
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.photoholder img {
    opacity: .9;
    border: 1px solid #ffffff;
}

.x1x1 {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.x2x1 { 
    padding: 0;
    margin: 0;
    float: left;
    width: 50%;
    height: 100%;
}

.x1x2 { 
    padding: 0;
    margin: 0;
    width: 100%;
    height: 50%;
}

.x2x2 { 
    padding: 0;
    margin: 0;
    float: left;
    width: 50%;
    height: 100%;
}

.carousel__cell:nth-child(1) { transform: rotateY(  0deg) translateZ(2526px); }
.carousel__cell:nth-child(2) { transform: rotateY( 18deg) translateZ(2526px); }
.carousel__cell:nth-child(3) { transform: rotateY( 36deg) translateZ(2526px); }
.carousel__cell:nth-child(4) { transform: rotateY( 54deg) translateZ(2526px); }
.carousel__cell:nth-child(5) { transform: rotateY( 72deg) translateZ(2526px); }
.carousel__cell:nth-child(6) { transform: rotateY( 90deg) translateZ(2526px); }
.carousel__cell:nth-child(7) { transform: rotateY(108deg) translateZ(2526px); }
.carousel__cell:nth-child(8) { transform: rotateY(126deg) translateZ(2526px); }
.carousel__cell:nth-child(9) { transform: rotateY(144deg) translateZ(2526px); }
.carousel__cell:nth-child(10) { transform: rotateY(162deg) translateZ(2526px); }
.carousel__cell:nth-child(11) { transform: rotateY(180deg) translateZ(2526px); }
.carousel__cell:nth-child(12) { transform: rotateY(198deg) translateZ(2526px); }
.carousel__cell:nth-child(13) { transform: rotateY(216deg) translateZ(2526px); }
.carousel__cell:nth-child(14) { transform: rotateY(234deg) translateZ(2526px); }
.carousel__cell:nth-child(15) { transform: rotateY(252deg) translateZ(2526px); }
.carousel__cell:nth-child(16) { transform: rotateY(270deg) translateZ(2526px); }
.carousel__cell:nth-child(17) { transform: rotateY(288deg) translateZ(2526px); }
.carousel__cell:nth-child(18) { transform: rotateY(306deg) translateZ(2526px); }
.carousel__cell:nth-child(19) { transform: rotateY(324deg) translateZ(2526px); }
.carousel__cell:nth-child(20) { transform: rotateY(342deg) translateZ(2526px); }

.carousel-options {
  text-align: center;
  position: relative;
  z-index: 2;
  background: hsla(0, 0%, 100%, 0.8);
}