@font-face {
  font-family: 'Verdana';
  font-style: normal;
 
}

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;
 font-family: 'Verdana' ;
}


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:430px;

  border: none;
  z-index:99;

}

#board{
  position: absolute;        
  width:980px;
  height:800px;
  padding: 25px 0 0 25px;
  top:200px;
  left:440px;
  z-index:12;
  
}
.card{
   width:141px;
   height:141px;
   float: left;
   margin: 11px;
   position:relative;
   padding:0;
}
.back{
   width:200px;
   height:200px;
   background: url(../images/card.png) no-repeat;  
          
}
.front{
   width:200px;
   height:200px;
   box-sizing:border-box;
   border:3px solid #2b2a5c;
   border-radius:30px;
   overflow:hidden;
  
 
}
#pokus{
    position: absolute;
    z-index:10;
    padding: 15px 5px 5px 5px ;
    left:10px;
    top:530px;
    margin:25px auto;
    font-size:197px;
    color: #ffad01; 
    text-align: center;
    width:400px;
}
#pokusTXT{
    position: absolute;
    z-index:10;
    font-size:73px; 
    left:10px;
    top:330px;
    color: white;
    text-align: center;
    width:400px;
}

#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;
    left:115px;
    top:260px;
    width:220px;
    height:220px;
}
#casovac .ring{
    position: absolute;
    left:0;
    top:0;
    transform: rotate(-90deg);
    filter: drop-shadow(0 6px 0 rgba(0,0,0,0.12));
}
#casovac .track{
    fill: rgba(255,255,255,0.7);
    stroke: rgba(59,42,107,0.18);
    stroke-width: 22;
}
#casovac .prog{
    fill: none;
    stroke: #7ab332;
    stroke-width: 22;
    stroke-linecap: round;
    stroke-dasharray: 578.05;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.6s;
}
#casText{
    position: absolute;
    left:0;
    top:0;
    width:220px;
    height:220px;
    line-height:220px;
    text-align:center;
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size:50px;
    font-weight:900;
    color:#3b2a6b;
}
#casText .inyfont1{
    font-family:Inter, Arial, Helvetica, sans-serif;
    font-size:40px;
    margin:0 2px;
}
#casovac.hurry{
    animation: casPulse 0.5s ease-in-out infinite alternate;
}
#casovac.hurry #casText{
    color:#f24a2a;
}
@keyframes casPulse{
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}
#limit{
    position: absolute;
    z-index:10;
    font-size:14px;
    color: white;
    padding: 15px 10px 5px 85px ;
    left:10px;
    top:1000px;
    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;
  border-radius:30px;                                  /* rovnaky polomer ako rub a licna strana karty */
  background-color:rgba(255,173,1,0.54);               /* farba pouzivana aj v images/free.png */
  background-image:none !important;
 }
 

#casovac2{
   position: absolute;
    z-index:10;
    /*border: 1px dotted white;*/
    font-size:120px;
    color: white;
    width: 400px;
    /*padding: 15px 10px 5px 85px ;  */
    /*background: url(../images/timer.png) no-repeat ;     */
    left:50px;
    top:250px;
    text-align: center ;
}
#overTime{
   position: absolute;
   display: none;
   top: 430px;
   left:580px;
   border: 10px solid #3b2a6b;
   border-radius: 40px;
   text-align: center;
   height:110px;
   width: 700px;
   font-family: Inter, Arial, Helvetica, sans-serif;
   font-weight: 900;
   font-size:76px;
   line-height:110px;
   color: white;
   z-index:20;
   background-color: #f24a2a;
   box-shadow: 0 12px 0 rgba(0,0,0,0.25);
   padding: 0;
}

#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;
}

#loga{
    position: absolute;
    left:100px;
    top:1700px;
    z-index: 555;
}
#navrat{
  position: absolute;        
  width:114px;
  padding: 0;
  top:35px;
  left:50px;
  z-index:10; 
  width:120px;
  height:120px;
 /* border: 1px solid black;     */    
}