@font-face {
  font-family: 'Just Another Hand';
  font-style: normal;
  src: local('Just Another Hand'), local('JustAnotherHand-Regular'), url(https://fonts.gstatic.com/s/justanotherhand/v7/fKV8XYuRNNagXr38eqbRf8DbBFScDQWNirGEA9Q9Yto.woff) format('woff');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
  border: 0;
  outline: 0;

}

body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;

}


body {
	margin: 0;
	background-color: black;
	font-size: 11px;
  overflow: hidden;      
  padding:0;
}

#container {
   width:1920px;
   height:1080px;
   padding:0;
   margin: 0 ;
   background-image: url(../images/background.jpg); 
}
#head{
  height:200px;
  width:1080px;
  padding:40px 0 0 0;
  margin:0;
  text-align: center;
  
 /* background-image: url(../images/head.png);         */
  
}

#navrat{
  position: absolute;        
  padding: 0;
  top:35px;
  left:50px;
  z-index:10; 
  width:120px;
  height:120px;
  background-image: url('../images/navrat.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  
 /* border: 1px solid black;     */    
}

#btn_reset{
  position:absolute;
  left:220px;
  top: 35px;
  height:120px;
  width:120px;

  border: none;
  z-index:99;
  background-image: url('../images/reload.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
 /*   border: 1px solid black;    */  
}

#napis{
   position:absolute;
  left:700px;
  top: 35px;
  height:140px;
  width:600px;

  border: none;
  z-index:99;

}

#board{
  position: absolute;        
  width:1132px;
  height:816px;
  padding: 0;
  top:230px;
  left:30px;
  z-index:12;
  background-color: white;
  /*background-image: url(../images/mriezka.png) ;      */
  background-repeat: no-repeat;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

#help{
  position: absolute;        
  width:1400px;
  height:30px;
  padding: 0;
  top:200px;
  left:50px;
}
#help2{
  position: absolute;        
  width:1400px;
  height:30px;
  padding: 0;
  top:215px;
  left:50px;
}
#karty{
  position: absolute;        
  width:400px;
  height:800px;
  padding: 0;
  top:230px;
  left:1150px;
  z-index:12;
  /*border: 1px solid black;    */
}
.card{
   position:absolute;
   padding:0;
   z-index:10;
}
.back{
   width:200px;
   height:200px;
   background: url(../images/card.png) no-repeat;  
          
}
.front{
   width:200px;
   height:200px;
  
 
}
#pokus{
    width:300px;
    margin:25px auto;
    font-size:28px;
}

#page1{
  width:1080px;
  height:1720px;
 /* display: none;      */
 /* background-image: url(../images/page1.png);   */
}
#page1 #button1{
  position: relative;
  z-index:10;
  top: 740px;
  left:150px;
  width:810px;
  height:170px;
 /* border:1px solid white;     */
}

#page2{
  width:1080px;
  height:1720px;
  display: none;
 /* background-image: url(../images/textura.jpg);          */
}
#casovac{
    position: absolute;
    z-index:10;
   /* border: 1px dotted white;   */
    font-size:64px;
    color: white;
    width: 155px;
    padding: 15px 10px 5px 85px ;
    background: url(../images/timer.png) no-repeat ; 
    left:5px;
    top:220px;
    height:80px;
}
#limit{
    position: absolute;
    z-index:10;
    font-size:14px;
    color: white;
    padding: 15px 10px 5px 85px ;
    left:10px;
    top:1000px;
    height:80px;
}
#pokus{
    position: absolute;
    z-index:10;
    /*border: 1px dotted white;     */
    font-size:28px;
    color: white;
    width: 250px;
    padding: 15px 5px 5px 5px ;
    left:30px;
    top:340px;
    height:80px;
}
#page3{
  width:1080px;
  height:1720px;
  display: none;
  background-image: url(../images/page3.jpg) ;
}
#page4{
  width:1080px;
  height:1720px;
  display: none;
  background-image: url(../images/page4.png) ;
}

#list{
  top:550px;
  left: 280px;
  color: white;
  font-size:40px;
  position: absolute;
  width: 800px;
}
#vysledky {
  top: 1700px;
  position: absolute;
  left:460px;
  width:150px;
  height:55px;
  text-align: center;
  background-color: red;
  border: 1px solid white;
  color: white;
}
.tab{
   float:left;
   width: 300px;
   font-size: 56px;
   margin: 10px 0 10px 10px ;
}
#timerFull{
  position: absolute;
  z-index: 20;
  font-size: 22px;  
  top:2700px;
  width:1080px;
  font-family: Verdana, Ariel;
  text-align: center;
  color:white;
}
.popisky{
  top:350px;
  width:1080px;
  height:200px;
  position: absolute;
}
.napis{
  display: none;
  top:300px;
  left:0;
  width:1080px;
  height:200px;
  position: absolute;
}

 .matchCard{
  z-index:50;
 }
 

#casovac2{
   position: absolute;
    z-index:10;
    border: 1px dotted white;
    font-size:150px;
    color: white;
    width: 400px;
    /*padding: 15px 10px 5px 85px ;  */
    /*background: url(../images/timer.png) no-repeat ;     */
    left:290px;
    top:450px;
    text-align: center ;
}
#overTime{
   position: absolute;
   display: none;
   top: 450px;
   left:600px;
   border: 1px solid white;
   text-align: center;
   height:90px;
   width: 700px;
   font-family: arial;
   font-size:64px;
   color: white;
   z-index:20;
   background-color: red; 
   padding-top:20px;
}

#btnPlayAgain{
  position: absolute;
  z-index:10;
  top:1180px;
  left:150px;
  width:800px;
  height:125px;
  color: white;
  font-size:72px;
  text-align: center;
  padding: 30px 0 0 0 ;
}

#btnSutaz{
  position: absolute;
  z-index:10;
  top:1420px;
  left:150px;
  width:800px;
  height:280px;
  color: white;
  font-size:72px;
  text-align: center;
   padding: 30px 0 0 0 ;
 /* border:1px dotted white;     */
}

#keyboard{
  border: 1px double silver;
  width:auto;
  padding:10px;
  background-color: white;
  z-index:99;   
  position: absolute;
  display: none; 
  top:1070px;
  left:170px; 
}

#keyboard .key{
 width:65px;
 height:65px;
 font-size: 18px;
 float: left;
}
#keyboard .maily{
 width:130px;
 height:65px;
 font-size: 18px;
 float: left;
}
#keyboard .del{
 width:65px;
 height:65px;
 float: left;
}

#keyboard .close{
 width:65px;
 height:65px;
 float: left;
}

#keyboard #del_all{
 width:65px;
 height:65px;
 font-size: 12px;
  float: left;
}

#keyboard .space{
 width:585px;
 height:65px;
  float: left;
}

#keyboard .entr{
   width:130px;
   height:65px;
  float: left;
}
#auto{
  width:760px;
  height: 85px;
  font-family: arial;
  font-size:42px;
  line-height: 68px;
  position: absolute;
  top:940px;
  left:140px;
  padding: 15px 10px 10px 25px;
}
#note{
  font-family: arial;
  font-size:38px;
  position: absolute;
  top:800px;
  left:0;
  width:1080px;
  height: 50px;
  display: none;
  color:yellow;
  text-align: center;
}
.inyfont1{
  font-family:arial;
  font-size:42px;
  font-weight:bold;
}

#obtiaznost1{
  position:absolute;
  left:1213px;
  top: 540px;
  height:55px;
  width:55px;
  z-index:99999;
  
  
}
#obtiaznost2{
  position:absolute;
  left:1293px;
  top: 540px;
  height:55px;
  width:55px;
  z-index:99999;
  
}
#obtiaznost3{
  position:absolute;
  left:1385px;
  top: 540px;
  height:55px;
  width:55px;
  z-index:99999;
       
}
.active{
   background: url(../images/active.png) ; 
}
#loga{
    position: absolute;
    left:100px;
    top:1700px;
    z-index: 555;
}
.vzor{
    position: absolute;
    left:0px;
    top:0px;
    z-index: 1;
}
#touch{
    position: absolute;
    left:0px;
    top:0px;
    z-index:9999;
    width:60px;
    height: 60px;
   /* border: 1px solid black;   */ 
}

#help, #help2{
  color: white;
  
}

.pic{
  position: absolute;
}
#final_pic{
  display: none;
}
#color_picker{
 clear: both;
}

#color_picker_container{
   position: absolute;
   top: 220px;
   left:1250px;
   height: 500px;
   width: 600px;
   cursor:crosshair;
}
.svgpic{
  position: absolute;
  top:0;
  left:0;
 /* display: none;     */
}
#svg_picture1{
  display: none; 
}
#svg_picture2{
  display: none;  
}
#svg_picture3{
  display: none;  
}