*{
    margin: 0;
    padding: 0;
    font-family: Arial;
}
a:hover{
    color:rgb(221, 0, 0);
}
a.img img{
    border: 5px solid transparent;
    animation: imgBorderBlink 1s infinite;
    box-sizing: border-box;
}
@keyframes imgBorderBlink { 50% { border-color: #ffffff; }  }
h1{
    text-align: center;
    font-size: 24px;
    margin-bottom: 16px;
}
h2{

}
iframe{
    border: none;
}
body{
    width: 100%;
    background-color:rgb(192, 237, 255);
    font-size: 20px;
}
#stranka{
    width: 100%;
}
#hlavicka{
    height: 70px;
    background-color: rgb(240, 142, 80);
    text-align: center;
    font-size: 23px;
    line-height: 70px;
    position: relative;
    width: 100%;
}
#menuIcon{
    background: url("images/menu.png") no-repeat center scroll;
    width: 32px;
    height: 32px;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 999;
}
#hlavicka .nazov{
    width: 50%;
    line-height: 24px;
    margin: 0 auto;
    padding-top: 12px;
}
#hlavicka .logo{
    background: url("images/logoWebLista.svg") no-repeat center scroll;
    width: 56px;
    height: 56px;
    right: 8px;
    top: 8px;
    position: absolute;
}
#logout{
    position: absolute;
    right: 0;
    bottom: -35px;
    line-height: 1em;
    cursor: pointer;
    z-index: 1;
    background-color: rgb(240, 142, 80);
    padding: 6px;
    box-sizing: border-box; 
}
#logout:hover{
    color: white;
    z-index: 1;
}
#hlavna{
    width: 100%;
  position: relative;
}
#menu{
    background-color: rgb(230, 175, 141);
    box-sizing: border-box;
    display: none;
    padding: 16px 24px;
    color: white;
    font-size: 20px;
    position: fixed;
    top: 70px;
    z-index: 1;
    overflow: auto;
    left: 0px;
    width: 65%;
    max-height: 86%;
}
#menu li{

}
#menu li.sep{
    background-color: black;
    height: 2px;
    width: 100%;
    margin: 5px 0;
}
#menu li a{
    text-decoration: none;
    padding: 0px 0;
    width: 100%;
    display: block;
}
a{
    color: black;
}
#pokec{
    background-color: rgb(80, 224, 250);
    float: left;
    width: 100%;
    box-sizing: border-box;
    padding: 16px;
    color: black;
    min-height: 678px;
    position: relative;
    overflow: hidden;
}
#pokec.jePrihlaseny{
    padding-top: 48px;
}
#pokec img.captcha{
    width: unset;
}
#pokec.slovnicek .vyraz{
    text-align: left;
    margin-bottom: 8px;
}
#pokec.slovnicek .pismeno{
    margin-bottom: 8px;
    font-size: 24px;
    text-align: center;
    margin-top: 32px;
}
#pokec.slovnicek img{
    width: 100%;
    margin: 0 auto;
    display: block;
}
#pokec.akademia iframe{
    width: 100%;
    aspect-ratio: auto 16/9;
    margin-bottom: 16px;
}
#pokec.sachulko video, #pokec.chessmind video, #pokec.zakulisie video, #pokec.akademia video{
    width: 100%;
    height: auto;
    margin-bottom: 16px;
}
#pokec.sachulko .videoNazov, #pokec.chessmind .videoNazov, #pokec.akademia .videoNazov{
    margin-bottom: 4px;
    font-weight: bold;
    text-align: center;
}
#pokec.stranky a{
    display: block;
    margin-bottom: 16px;
}
#pokec.pravidla a{
    display: block;
    background: url(images/filePDF.png) no-repeat;
    padding-left: 40px;
    height: 32px;
    line-height: 31px;
    margin-bottom: 16px;
}
#pokec a.yt{
    display: block;
    background: url(images/iconYT.png) no-repeat 0/contain;
    padding-left: 40px;
    height: 32px;
    line-height: 31px;
    margin-bottom: 16px;
}
p{
    text-align: center;
    margin-bottom: 1em;
}
p.left{
    text-align: left;
}
.left{
    text-align: left;
}
.justify{
    text-align: justify;
}
li{
    list-style: none;
}
.testy-urovne .pokyny{
    background-color: rgb(79, 215, 102);
    border: 4px solid #ffa15d;
    padding: 8px;
    margin-bottom: 24px;
}
.testy-urovne .formulare {
    text-align: center;
}
.testy-urovne .formulare .nazov {
    margin-bottom: 4px;
    font-weight: bold;
}
.testy-urovne form {
    border: 3px solid black;
    box-sizing: border-box;
    padding: 8px;
    margin-bottom: 16px;
    display: inline-block;
}
.testy-urovne form td.label{
    text-align: right;
    white-space: nowrap;
}
.testy-urovne form td.tlacidlo{
    text-align: center;
}
.testy-urovne form input{
    font-size: 18px;
    width: 100%;
    padding: 2px;
    box-sizing: border-box;
}
.testy-urovne form td.tlacidlo input {
    font-size: 18px;
    margin-top: 8px;
    padding: 8px;
    width: auto;
  }
.testy-urovne form .warning{
    color: red;
    font-weight: bold;
}
.ramcek{
    border: 6px solid black;
    width: 78%;
    text-align: center;
    margin: 39px auto;
    font-size: 49px;
    color: blue;
    box-sizing: border-box;
    display: block;
    text-decoration: none;
}
.urovne .item{
    display: block;
    color: black;
    text-decoration: none;
    width: 100%;
    padding: 8px;
    margin: 4px auto 24px;
    box-sizing: border-box;
    border: 3px solid black;
}
.urovne .nazov{
    font-size: 26px;
    font-weight: bold;
    text-align: center;
}
.urovne .popis{
    font-style: italic;
    margin: 8px 0 16px;
    text-align: center;
    font-size: 20px;
}
.urovne .cisla, .urovne .rebricky{
    text-align: center;
    margin-bottom: 14px;
}
.urovne .rebricky{
    margin-bottom: 4px;
}
.urovne .cisla a{
    font-size: 24px;
    font-weight: bold;
    display: inline-block;
    background: white;
    text-decoration: none;
    padding: 8px;
    margin: 0 7px;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
}
.urovne .rebricky a{
    display: inline-block;
    background: url("images/iconPodium.svg") no-repeat;
    margin: 0 7px;
    width: 40px;
    height: 40px;
}
#pokec .f1{background-color: rgb(127, 238, 104);}
#pokec .f2{background-color: rgb(253, 243, 107);}
#pokec .f3{background-color: rgb(253, 185, 95);}
#pokec .f4{background-color: rgb(253, 95, 95);}
#pokec .f5{background-color: rgb(191, 123, 82);}
.testyikona{
    display: block;
  color: black;
  text-decoration: none;
  width: 215px;
  padding: 8px;
  margin: 4px 0px;
  box-sizing: border-box;
  border: 3px solid black;
  text-align: center;
  background-color: orange;
}
.bod{
    width: 100%;
    margin-bottom: 48px;
}
.otazka, .odpoved{
    font-size: 18px;
}
.otazka{
    font-weight: bold;
    margin-bottom: 16px;
    font-size: 20px;
}
.bod .diagram{
    width: 100%;
}
.odpoved{
    margin: 16px 0;
    cursor: pointer;
    padding: 6px 6px 6px 32px;
    background: #defaff;
    border-radius: 12px;
    border: 2px solid black;
    /*user-select: none;*/
}
.odpoved::before {
    content: "♟️ ";
    font-size: 16px;
  }
.odpoved.dobre, .odpoved:hover{
    background-color: rgb(31, 255, 31);
}
.odpoved.zle{
    background-color: rgb(223, 69, 69);
}
#vysledokTestu{
    position: relative;
    width: 352px;
    height: 285px;
    background: url("images/vysledokTestu.png") no-repeat center top /cover scroll;
    margin: 0 auto;
    display:none;
}
#sprava{
    position: absolute;
    right: 19px;
    top: 33px;
    font-size: 14px;
    color: black;
    text-align: center;
    line-height: 19px;
    width: 168px;
}
.emotikon{
    display: none;
    position: absolute;
    top:0;
    right: 0;
    zoom: 66%;
    overflow: hidden;
}
.emotikon video{
    position: relative;
    top: -2px;
    left: -2px;
}
.emotikon.dama.dobre{
    background: url("images/damaspravne.png") no-repeat center 100% /contain scroll;
}
.emotikon.dama.zle{
    background: url("images/damanespravne.png") no-repeat center 100% /contain scroll;
}
.emotikon.patrik.dobre{
    background: url("images/patrikspravne.png") no-repeat center 100% /contain scroll;
}
.emotikon.patrik.zle{
    background: url("images/patriknespravne.png") no-repeat center 100% /contain scroll;
}
.emotikon.sachulko.dobre{
    background: url("images/sachulkospravne.png") no-repeat center 100% /contain scroll;
}
.emotikon.sachulko.zle{
    background: url("images/sachulkonespravne.png") no-repeat center 100% /contain scroll;
}
#leaderboard{
    margin-top: 24px;
}
#leaderboard .nazovTabulky{
    font-size: 24px;
    text-align: center;
    margin-bottom: 16px;
    font-weight: bold;
    text-transform: uppercase;
    width: 100%;  
}
#leaderboard .tabulka{
    overflow: auto;    
}
#leaderboard table{
    border-collapse: collapse;
    width: 772px;
}

#leaderboard table th, #leaderboard table td{
    padding: 8px;
    border: 3px solid black;
    text-align: center;
}
#leaderboard table th{
    background-color: silver;
}
#leaderboard table th:nth-of-type(1){width: 42px;}
#leaderboard table th:nth-of-type(3){width: 84px;}
#leaderboard table th:nth-of-type(4){width: 64px;}
#leaderboard table th:nth-of-type(5){width: 96px;}
#leaderboard table th:nth-of-type(6){width: 188px;}
#leaderboard table td{
    background: #eee7d4;
}
.iconHandTableWrapper{
    width: 100%;
    text-align: center;
    margin: 8px 0;
    position: absolute;
}
@keyframes iconHandTableMove {
    0%   {left: 0px;}
    25%   {left: -24px;}
    50% {left: 0px;}
    100% {left: 0px;}
}
@keyframes iconHandTableHide {
    0%   {height: 64px;}
    100% {height: 0px;}
}
.iconHandTableWrapper div{
    display: inline-block;
    background: url("images/iconHandTable.svg") no-repeat 50%/contain;
    height: 64px;
    aspect-ratio: auto 50/64;
    animation-name: iconHandTableMove, iconHandTableHide;
    animation-duration: 1200ms, 500ms;
    animation-delay: 0ms, 3600ms;
    animation-iteration-count: 3, 1;
    animation-direction: normal, normal;
    animation-fill-mode: none, forwards;
    position: relative;
    top: 78px;
}
.galeria img, .turnaj .znak img{
    float: left;
    display: block;
    margin-bottom: 16px;
    width: 100%;
}
.spolupraca img, .historia img{
    width: 100%;
}
.chessmind a.img{
    display: block;
    text-align: center;
    margin: 16px 0;
}
.logoChessmind{
    width: 70%;
}
.logoBSA{
    width: 45%;
}
.logoDubravan{
    width: 164px;
    border-radius: 0 0 82px 82px;
}
.logoSachoveulohy{
    width: 70%;
}
#lightgallery{

}
#lightgallery img{
    width: 110px;
    height: 124px;
    display: block;
    float: left;
    background-size: cover;
    background-position: 50% 50%;
  
}
.turnaj .znak{
    margin-bottom: 48px;
}
.turnaj .znak .komentar::before{
    background: url("images/turnajCisla.svg") no-repeat 0px /cover scroll;
    content: " ";
    width: 32px;
    height: 32px;
    display: block;
    float: left;
    margin-right: 8px;
}
.turnaj .znak .komentar {
    font-weight: bold;
    text-align: center;
}
.turnaj .znak .miesto {
    text-align: center;
    margin-bottom: 6px;
    padding-left: 40px;
}
.turnaj .znak img{
    float: none;
    margin-bottom: 0;
}
/*.turnaj .znak .komentar::before{
    background: url("images/turnajCisla.svg") no-repeat 0px /cover scroll;
    content: " ";
    width: 32px;
    height: 32px;
}*/
.turnaj .znak .komentar.c2::before{
    background-position: -32px;
}
.turnaj .znak .komentar.c3::before{
    background-position: -64px;
}
.turnaj .znak .komentar.c4::before{
    background-position: -96px;
}
.turnaj .znak .komentar.c5::before{
    background-position: -128px;
}
.turnaj .znak .komentar.c6::before{
    background-position: -160px;
}
.turnaj .znak .komentar.c7::before{
    background-position: -192px;
}
.turnaj .znak .komentar.c8::before{
    background-position: -224px;
}
.turnaj .znak .komentar.c9::before{
    background-position: -256px;
}
.turnaj .znak .komentar.c10::before{
    background-position: -288px;
}

#precache{
    display: none;
}
.pravidlaJozko{
    width: 100%;
}
#copyright{
    text-align: center;
    padding: 8px 0;
    float: left;
    width: 100%;    
}