/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
    overflow:hidden;    
}

body {    
    /*background:#f7ee23 url(../images/background.jpg) 50% 50% no-repeat;    */
}
body.preload-done {    
    background:#f7ee23 url(../images/background.jpg) 50% 50% no-repeat;    
}

.debug-result span.active {
    color:#ff0000;
}

.audio-btn.off {
    background:url(../images/audio_off.png) no-repeat !important;  
    background-size:contain !important;
}

#full-container {
    width:100%;      
    overflow:hidden;
}

#main-container {
    width: 768px;
    height: 943px;
    background-color:#fff;
    margin:0 auto;
    position:absolute;
    top:50%;
    left:50%;
    display:none;
}

#main-wrap {
    width:100%;
    height:100%;
    position:relative;
}

#game-container {
	overflow:hidden;
    background-color:#ccc;  
    position: absolute;  
    bottom:0px;
    right:0px;    
}
.info-left #game-container {
    width:75%;    
    height:100%;
}
.info-top #game-container {
    width:100%;    
    height:75%;
}

#main-info-game-container {
    display:none;
}

/* Fonts
################################## */
.headline {
	font-family: 'Titan One', cursive;
	text-align: center;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}
.subtext {
	font-family: 'Dosis', sans-serif;
	text-align: center;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
}

/* Loading
################################## */
#loading-container {
    width:100%;
    height:100%;
    background-color:#fff;
}
#loading-icon {
    background:url(../images/loader.gif) center no-repeat;
    width:50px;
    height:50px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-25px;
    margin-top:-25px;
}
/* End Loading */

/* Info Area
################################## */
#info-left-container {
    width:25%;
    /*height:150px;*/
    height:100%;
    background-color:#5b9bd5;  
    position: absolute;
    top:0px;
    left:0px;
}

#info-top-container {
    width:100%;
    /*height:150px;*/
    height:25%;
    background-color:#5b9bd5;  
    position: absolute;
    top:0px;
    left:0px;
}

#info-top-bg {
    background: url(../images/top-bg.jpg) no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:0%;
}

#info-left-bg {
    background: url(../images/left-bg.jpg) no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:0%;
}

/* Top Info Items */

#info-top-logo {
    width:30.3%;
    height:43.8%;
    position:absolute;
    top:13.1%;
    left:10.8%;  
    background:url(../images/logo.png) no-repeat;  
    background-size:contain;    
}

#info-top-title {
    position:absolute;
	width:51%;
    text-shadow: 0.15vw 0.15vw rgba(0, 55, 214, 0.67);
    line-height: 85%;
    color:#fff;
}

#info-top-audio {
    width:4.4%;
    height:10%;
    position:absolute;
    top:10.9%;
    left:85%;  
    background:url(../images/audio_on.png) no-repeat;  
    background-size:contain;
    cursor:pointer;
}

#info-top-legal-block {   
	width:51%;
	height:8.6%;
    position:absolute;
    top:75%;
    left:0%;  
}

/* Left Info Items */

#info-left-logo {
    width:87.5%;
    height:14%;
    position:absolute;
    top:3%;
    left:9.7%;  
    background:url(../images/logo.png) no-repeat;  
    background-size:contain;    
}

#info-left-title {
    position:absolute;
	width:90%;
    text-shadow: 0.15vw 0.15vw rgba(0, 55, 214, 0.67);
    line-height: 85%;
    color:#fff;
}

#info-left-audio {
    width:13.1%;
    height:3.5%;
    position:absolute;
    top:73.6%;
    left:10%;  
    background:url(../images/audio_on.png) no-repeat;  
    background-size:contain;
    cursor:pointer;
}

#info-left-legal-block {   
	width:100%;
	height:8.6%;
    position:absolute;
    top:88%;
    left:2%;  
}


/* End Info Area */


/* Game Area
################################## */
#game-bg-blank {
    background: url(../images/game-bg-blank.jpg) no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:0%;
}

#game-bg-blank.win-bg1{
	background: url(../images/game-bg1.jpg) no-repeat;
	background-size:contain;
}

#game-bg-blank.win-bg2{
	background: url(../images/game-bg2.jpg) no-repeat;
	background-size:contain;
}

#game-bg-blank.win-bg3{
	background: url(../images/game-bg3.jpg) no-repeat;
	background-size:contain;
}

#card-level3,#card-level2 {
    display:none;
}

#card-level3 .game-card-cover{
    background: url(../images/card-cover.jpg) no-repeat;
    background-size:contain;
    width:16%;
    height:24.1%;
    position:absolute;
    cursor:pointer;
}

#card-level2 .game-card-cover{
    background: url(../images/medium/card-cover.jpg) no-repeat;
    background-size:contain;
    width:19.3%;
    height:24.1%;
    position:absolute;
    cursor:pointer;
}

#card-level1 .game-card-cover{
    background: url(../images/easy/card-cover.jpg) no-repeat;
    background-size:contain;
    width:24.1%;
    height:24.1%;
    position:absolute;
    cursor:pointer;
}

#card-level3 .game-card{
    width:16%;
    height:24.1%;
    position:absolute;
    cursor:pointer;
}

#card-level2 .game-card{
    width:19.3%;
    height:24.1%;
    position:absolute;
    cursor:pointer;
}

#card-level1 .game-card{
    width:24.1%;
    height:24.1%;
    position:absolute;
    cursor:pointer;
}

#card-level3 .game-card-face-1 {
    background: url(../images/card1.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-2 {
    background: url(../images/card2.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-3 {
    background: url(../images/card3.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-4 {
    background: url(../images/card4.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-5 {
    background: url(../images/card5.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-6 {
    background: url(../images/card6.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-7 {
    background: url(../images/card7.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-8 {
    background: url(../images/card8.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-9 {
    background: url(../images/card9.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-10 {
    background: url(../images/card10.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-11 {
    background: url(../images/card11.jpg) no-repeat;
    background-size:contain;
}
#card-level3 .game-card-face-12 {
    background: url(../images/card12.jpg) no-repeat;
    background-size:contain;
}

#card-level2 .game-card-face-1 {
    background: url(../images/medium/card1.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-2 {
    background: url(../images/medium/card2.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-3 {
    background: url(../images/medium/card3.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-4 {
    background: url(../images/medium/card4.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-5 {
    background: url(../images/medium/card5.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-6 {
    background: url(../images/medium/card6.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-7 {
    background: url(../images/medium/card7.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-8 {
    background: url(../images/medium/card8.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-9 {
    background: url(../images/medium/card9.jpg) no-repeat;
    background-size:contain;
}
#card-level2 .game-card-face-10 {
    background: url(../images/medium/card10.jpg) no-repeat;
    background-size:contain;
}

#card-level1 .game-card-face-1 {
    background: url(../images/easy/card1.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-2 {
    background: url(../images/easy/card2.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-3 {
    background: url(../images/easy/card3.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-4 {
    background: url(../images/easy/card4.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-5 {
    background: url(../images/easy/card5.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-6 {
    background: url(../images/easy/card6.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-7 {
    background: url(../images/easy/card7.jpg) no-repeat;
    background-size:contain;
}
#card-level1 .game-card-face-8 {
    background: url(../images/easy/card8.jpg) no-repeat;
    background-size:contain;
}

.card-row1{
    top:2%;
}
.card-row2{
    top:25.9%;
}
.card-row3{
    top:49.9%;
}
.card-row4{
    top:73.9%;
}

#card-level3 .card-column1{
    left:1.9%;
}
#card-level3 .card-column2{
    left:17.9%;
}
#card-level3 .card-column3{
    left:33.9%;
}
#card-level3 .card-column4{
    left:49.9%;
}
#card-level3 .card-column5{
    left:65.9%;
}
#card-level3 .card-column6{
    left:81.9%;
}

#card-level2 .card-column1{
    left:1.9%;
}
#card-level2 .card-column2{
    left:21.1%;
}
#card-level2 .card-column3{
    left:40.4%
}
#card-level2 .card-column4{
    left:59.7%;
}
#card-level2 .card-column5{
    left:79%;
}

#card-level1 .card-column1{
    left:1.9%;
}
#card-level1 .card-column2{
    left:25.9%;
}
#card-level1 .card-column3{
    left:50%;
}
#card-level1 .card-column4{
    left:74.1%;
}

/* Instructions Screen */

#instructions-bg {
    position:absolute;
    width:100%;
    height:100%;
}

#instructions-bg{
    background: url(../images/instructions-bg.png) no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
}

#ins-card1{
    background: url(../images/ins-card.jpg) no-repeat;
    background-size:contain;
    width:13.4%;
    height:20%;
    top:30.1%;
    left:43.1%;
    position:absolute;
}

#ins-card2{
    background: url(../images/ins-card.jpg) no-repeat;
    background-size:contain;
    width:13.4%;
    height:20%;
    top:30.1%;
    left:58.8%;
    position:absolute;
}

#ins-card1-cover{
    background: url(../images/ins-card-cover.jpg) no-repeat;
    background-size:contain;
    width:13.4%;
    height:20%;
    top:30.1%;
    left:43.1%;
    position:absolute;
}

#ins-card2-cover{
    background: url(../images/ins-card-cover.jpg) no-repeat;
    background-size:contain;
    width:13.4%;
    height:20%;
    top:30.1%;
    left:58.8%;
    position:absolute;
}

#hand{
    width:7.3%;
    height:10.5%;
    top:34.8%;
    left:72.7%;
    position:absolute;
}

#ins-hand{
    background: url(../images/ins-hand.png) no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
}

#ins-hand-click{
    background: url(../images/ins-hand-click.png) no-repeat;
    background-size:contain;
    width:100%;
    height:100%;
    position:absolute;
}

#ins-check1{
    background: url(../images/ins-check.png) no-repeat;
    background-size:contain;
    width:11.3%;
    height:10.8%;
    top:33.4%;
    left:44.4%;
    position:absolute;
}

#ins-check2{
    background: url(../images/ins-check.png) no-repeat;
    background-size:contain;
    width:11.3%;
    height:10.8%;
    top:33.4%;
    left:60%;
    position:absolute;
}

/* Win Screens */
#game-win-text1{
    background: url(../images/game-win-text1.png) no-repeat;
    background-size:contain;
    width:91.7%;
    height:14.5%;
    position:absolute;
    top:4.2%;
    left:4.2%;
}

#win-text1 {    
    position:absolute;
    width:100%;
    text-shadow: 0.15vw 0.15vw rgba(255, 255, 255, 0.67);
    line-height: 85%;
    color:#537abb; 
}

#win-button {    
    width:50.9%;
    height:13.8%;
    position:absolute;
    top:82.1%;
    left:24.7%;  
    background:url(../images/button.png) no-repeat;  
    background-size:contain;    
    cursor:pointer;
}

#win-button-text {    
    position:absolute;
    width:100%;
    text-shadow: 0.15vw 0.15vw rgba(0, 55, 214, 0.67);
    line-height: 85%;
    color:#ffde00; 
}

/* End Game Area */


/* Splash
################################## */
#splash-container {
	overflow:hidden;
    width:100%;
    height:100%;
    position:absolute;
    top:0%;
    left:0%;  
    background:url(../images/splash-bg-h.jpg) no-repeat;  
    background-size:contain;        
}

#splash-container.portrait-bg {
    background:url(../images/splash-bg-v.jpg) no-repeat;
    background-size:contain;    
}

#splash-audio {
    width:3.3%;
    height:3.5%;
    position:absolute;
    top:4%;
    left:3%;  
    background:url(../images/audio_on.png) no-repeat;  
    background-size:contain;
    cursor:pointer;
}

#splash-audio.portrait-bg {
    width:4.4%;
    height:2.7%;
    top:3%;
    left:91.1%;  
}

#splash-logo {
    width:43.1%;
    height:27.5%;
    position:absolute;
    top:4.1%;
    left:53.6%;  
    background:url(../images/logo.png) no-repeat;  
    background-size:contain;    
}

#splash-logo.portrait-bg {
    width:57.5%;
    height:20.6%;
    position:absolute;
    top:34.2%;
    left:38.1%;  
}

#splash-title-block {   
	width:43.1%;
	height:35%;
    position:absolute;
    top:33%;
    left:53.6%;  
}

#splash-title-block.portrait-bg {   
	width:57.5%;
	height:28%;
    position:absolute;
    top:55%;
    left:38.1%;  
} 

#splash-title {    
    position:absolute;
    text-shadow: 0.15vw 0.15vw rgba(0, 55, 214, 0.67);
    line-height: 85%;
    color:#fff; 
}

#splash-button {    
    width:38.2%;
    height:13.8%;
    position:absolute;
    top:79.6%;
    left:56.2%;  
    background:url(../images/button.png) no-repeat;  
    background-size:contain;    
    cursor:pointer;
}

#splash-button.portrait-bg {    
    width:50.9%;
    height:10.3%;
    top:84.7%;
    left:41.6%;  
}

#splash-button-text {    
    position:absolute;
    width:100%;
    text-shadow: 0.15vw 0.15vw rgba(0, 55, 214, 0.67);
    line-height: 85%;
    color:#ffde00; 
}

#splash-legal-block {   
	width:53%;
	height:8.6%;
    position:absolute;
    top:84%;
    left:1%;  
}

#splash-legal-block.portrait-bg {  
	left:1.5%; 
	width:40%;
    top:87%;
}


.legal-text {    
    position:absolute;
    width:100%;
    line-height: 125%;
    color:#fff; 
}

.legal-link {    
    text-decoration: none;
    width:100%;
    line-height: 125%;
    color:#ffcf39; 
}

.legal-link:hover {
    color:#fff; 
}

rating {
    color:#cecece;
    padding:0.3% 0.75%;
    border: 1px solid #cecece;
    line-height: 80%;
}

.ratings-text.portrait-bg {
    width:20%;
    margin-left:38.5%;
    padding-top:1%;
    padding-bottom:1.5%;
}

/* End Splash */