*,
:after,
:before {
  border:0 solid;
  box-sizing:border-box;
}
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

html{
  line-height:1.5;
  -moz-tab-size:4;
  -o-tab-size:4;
  tab-size:4;
}

body{
  background:#f5f5f5;
  padding:0;
  margin:0;
  font-family:Work Sans,sans-serif;
}

a{
  color:black;
  text-decoration:underline;
}

a.help{
  border-bottom:1px dotted #999;
  cursor:help;
  text-decoration:underline;
}

h1,h2,h3,h4,p{
  margin:0;
  padding:0;
}

ul{
  list-style:none;
  margin:0;
  padding:0;
}


/* =========================================
   SERVERS
   ========================================= */

ul.servers{
  grid-gap:.5em;
  display:grid;
  list-style:none;
  margin:0;
  padding:0;
}

ul.servers li{
  align-items:center;
  background:#fff;
  border-radius:.4rem;
  box-shadow:0 .1rem .2rem rgba(0,0,0,.15);
  display:flex;
  flex-wrap:wrap;
  height:88px;
  padding:.25em;
}

ul.servers li a{
  align-items:center;
  color:inherit;
  display:flex;
  flex:1;
  text-decoration:none;
}

.right ul.servers li a{
  align-items:flex-start;
}

ul.servers li a:hover .bonus,
ul.servers li a:hover .bonus2{
  text-decoration:underline!important;
}

ul.servers li a .image{
  align-self:flex-start;
  border-radius:.2rem;
  margin-right:.5em;
  width:80px;
}

ul.servers li a .image img{
  width:80px;
  z-index:1;
}

ul.servers li a .text{
  display:block;
  margin-top:-10px;
}

.right ul.servers li a .text{
  margin-top:0;
}

ul.servers li a .text .title{
  font-size:1.3em;
  margin-bottom:5px;
  display:block;
  position:static;
  text-decoration:underline;
}

ul.servers li a .text .bonus{
  font-size:1.1em;
  color:#1e1e1e;
  display:block;
  text-decoration:none;
}

ul.servers li a .text .bonus2{
  font-size:1em;
  padding:0 5px 0 0;
  margin-top:-5px;
  line-height:1.2em;
  color:#1e1e1e;
  display:block;
  text-decoration:none;
}

ul.servers li a .rating,
table .rating{
  margin-left:auto;
  color:#e09e11;
  text-align:center;
  padding:0 .5em;
}

ul.servers li a .rating .symbol,
table .rating .symbol{
  font-size:2.2em;
  margin:-10px 0;
}

ul.servers li a .left{
  align-self:unset;
  margin-right:.75em;
  min-width:90px;
  width:90px;
}


/* =========================================
   UTILITY
   ========================================= */

.bold{
  font-weight:bold!important;
}

.hidden{
  display:none;
}

.flex{
  display:flex;
}

.fixed{
  position:fixed;
}

.absolute{
  position:absolute;
}

.relative{
  position:relative;
}

.sticky{
  position:sticky;
}

.padtop{
  padding-top:40px!important;
}

.help{
  cursor:help;
}


/* =========================================
   BUTTONS
   ========================================= */

.baction{
  position:relative;
  display:inline-block;
  padding:10px 20px;
  border-radius:6px;
  color:#fff;
  overflow:hidden;
  text-decoration:none;
  font-weight:bold;
}

.baction.green{
  background:#03d43d;
}

.baction:hover{
  text-decoration:underline;
}

.baction.yellow{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  background:#f0b026;
  overflow:hidden;
  isolation:isolate;
}

.baction.yellow span{
  position:relative;
  z-index:5;
}

.baction.yellow .coin{
  position:absolute;
  top:-30px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:
    radial-gradient(
      circle at 35% 35%,
      #fff7b2 0%,
      #ffe56b 20%,
      #ffc400 70%,
      #d79d00 100%
    );
  box-shadow:
    inset 0 0 0 2px #ffd700,
    0 2px 5px rgba(0,0,0,.3);
  animation:coinFall linear infinite;
  opacity:.9;
}

.baction.yellow .coin::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:50%;
}

.baction.yellow .c1{
  left:8%;
  animation-duration:2.4s;
  animation-delay:0s;
}

.baction.yellow .c2{
  left:22%;
  animation-duration:2.9s;
  animation-delay:.7s;
}

.baction.yellow .c3{
  left:41%;
  animation-duration:2.2s;
  animation-delay:1.3s;
}

.baction.yellow .c4{
  left:60%;
  animation-duration:3.1s;
  animation-delay:.2s;
}

.baction.yellow .c5{
  left:78%;
  animation-duration:2.6s;
  animation-delay:1.8s;
}

.baction.yellow .c6{
  left:92%;
  animation-duration:2.8s;
  animation-delay:1s;
}

@keyframes coinFall{

  0%{
    transform:translateY(-30px) rotate(0deg);
    opacity:0;
  }

  10%{
    opacity:1;
  }

  100%{
    transform:translateY(95px) rotate(720deg);
    opacity:0;
  }

}

.baction.big{
  padding:20px;
  width:100%;
  font-size:1.5em;
  margin:30px 0;
  text-align:center;
}

.baction.anim::before{
  content:'';
  position:absolute;
  top:0;
  left:-120%;
  width:60px;
  height:100%;
  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.4) 50%,
      rgba(255,255,255,0) 100%
    );
  transform:skewX(-25deg);
  animation:shine 2.5s infinite;
}


/* =========================================
   BOXES
   ========================================= */

.bbox{
  color:#000;
  padding:1em .5em;
  position:relative;
  border-radius:10px;
}

.right .link .baction{
  display:block;
  padding:20px;
  text-align:center;
  font-size:1.5em;
  width:100%!important;
}

.bbox.yellow{
  background:linear-gradient(#f0b026 60px,#f8f1a5);
}

.bbox.red{
  background:linear-gradient(#f14949 60px,#f8b0b0);
}

main .content .bbox h4{
  margin-left:5px!important;
}

.bbox .posneg{
  background:white;
  margin:-10px;
  padding:10px;
}


/* =========================================
   GLIST
   ========================================= */

.glist{
  color:#000;
  padding:1em .5em;
  position:relative;
  z-index:0;
  border-radius:10px;
}

.glist .topline{
  height:140px;
  border-bottom:1px solid rgba(0,0,0,.4);
  margin-bottom:0;
  padding:0 0 .6em .2em;
}

main.vocabulary .glist,
main.vocabulary2 .glist,
main.bonus2 .glist{
  padding:1.2em .5em 0 .5em;
  border-radius:10px 10px 0 0;
}

main.vocabulary .glist.grey .topline{
  height:130px!important;
}

main.vocabulary .glist.grey .topline h1{
  display:inline-block;
}

main.vocabulary .glist.grey .topline .link{
  display:inline-block;
  margin-left:10px;
  position:relative;
  top:8px;
}

main.bonus2 .glist .topline,
main.vocabulary2 .glist .topline{
  margin-bottom:-15px;
  height:110px!important;
}

main.bonus .glist .topline,
main.functions .glist .topline,
main.vocabulary .glist .topline{
  margin-bottom:14px;
  height:157px;
}

main .glist .update{
  display:block;
  font-size:.95em;
}

main.servers .glist .update{
  margin:20px 0 0 0;
  text-align:right;
}

main.bonus .glist.nob .update,
main.functions .glist.nob .update,
main.vocabulary .glist.nob .update{
  text-align:left;
  margin:5px 0 0 130px;
}

.glist.nob{
  margin-bottom:0!important;
  padding-bottom:0!important;
  border-radius:10px 10px 0 0!important;
  background:#acfbc2;
}

.glist.noc{
  border-radius:0 0 10px 10px!important;
}

.glist.nob .topline img{
  width:120px;
  height:120px;
  margin-right:10px;
  float:left;
}

.glist h1{
  font-size:2.6em;
}

.glist p{
  padding:0 0 .2em .4em;
}

.glist.green{
  background:#acfbc2;
  background:linear-gradient(#acfbc2 100px,#d4fbdf);
}

.glist.grey{
  background:#b6b6b6;
  background:linear-gradient(#b6b6b6 50px,#dfdcdc);
}

.glist h2,
.bbox h2,
main.bonus .glist h3,
main.functions .glist h3,
main.vocabulary .glist h3{
  border-bottom:1px solid rgba(0,0,0,.4);
  margin-bottom:.5em;
  padding:0 0 .6em .2em!important;
  z-index:3;
  font-weight:800;
  font-size:1.6em;
}

.glist h1{
  z-index:3;
  padding-bottom:.2em;
}


/* =========================================
   RATING ICON
   ========================================= */

.ricon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:20px;
  border-radius:50%;
  margin-right:4px;
  color:#fff;
  font-weight:bold;
  font-size:14px;
  line-height:1;
}

.ricon.plus{
  background:#f0b026;
}

.ricon.minus{
  background:#f14949;
}


/* =========================================
   NAVIGACE DESKTOP
   ========================================= */

nav{
  background:#000!important;
  width:100%;
  position:fixed;
  height:70px;
  z-index:20;
  margin:0;
  padding:0;
}

nav #innav{
  margin:0 auto;
  width:1260px;
  max-width:100%;
  height:70px;
  padding:0;
  display:flex;
  align-items:center;
  gap:0;
  position:relative;
}

nav #innav .logo{
  position:relative;
  display:inline-block;
  padding-top:10px;
  margin:2px 50px 0 0;
  flex-shrink:0;
}

nav #innav .logo img{
  display:block;
}

nav #innav .logo .hover{
  position:absolute;
  left:0;
  top:10px;
  opacity:0;
  transition:opacity .2s;
}

nav #innav .logo:hover .hover{
  opacity:1;
}


/* =========================================
   HLAVNÍ MENU
   ========================================= */

nav #innav > ul{
  display:flex;
  align-items:stretch;
  margin:0;
  padding:0;
}


/* DESKTOP - MENU VŽDY VIDITELNÉ */

@media (min-width:901px){

  nav #innav > ul[data-x-bind="navigation"]{
    display:flex!important;
  }

}


nav #innav ul li button{
  background-color:transparent;
  background-image:none;
}

nav #innav ul li.top{
  position:relative;
  display:block;
}

nav #innav ul li.top a{
  text-decoration:underline;
}

nav #innav ul li.top button{
  position:relative;
  padding:21px 20px 23px 20px;
  border-left:1px solid #000;
  font-size:1.4em;
  cursor:pointer;
  color:white;
  text-decoration:underline;
}

nav #innav ul li.top:hover{
  background:#fff;
  width:auto!important;
}

nav #innav ul li.top:hover button{
  color:#000;
}

nav #innav ul li.top:hover a{
  color:#000!important;
}


/* =========================================
   ŠIPKA MENU
   ========================================= */

nav #innav ul li button span{
  border-left:7px solid transparent;
  border-right:7px solid transparent;
  border-top:8px solid #02d93f;

  -webkit-clip-path:polygon(
    20% 0,
    80% 0,
    100% 100%,
    0 85%
  );

  clip-path:polygon(
    20% 0,
    80% 0,
    100% 100%,
    0 85%
  );

  display:inline-block;
  height:0;
  margin-left:10px;
  transition:transform .2s;
  vertical-align:middle;
  width:0;
}


/* =========================================
   PODMENU
   ========================================= */

nav #innav ul ul{
  position:absolute;
  display:block;
  width:300px;
  background:#fff;
  border:1px solid #252525;
  border-top:0;
  padding:13px 0;
  font-size:1.1em;
  box-shadow:0 12px 12px -12px rgba(0,0,0,.5);
}

nav #innav ul ul li{
  padding:6px 20px;
  transition:.25s;
}

nav #innav ul ul li a{
  display:block;
  text-decoration:none!important;
}

nav #innav ul ul li span.text{
  display:inline-block;
  text-decoration:underline;
  padding-right:6px;
}

nav #innav ul ul li span.rating{
  color:#e09e11;
  font-size:.8em;
}

nav #innav ul ul li span.bold{
  color:#02d73e!important;
  font-size:1.1em!important;
}

nav #innav ul ul li:hover{
  text-shadow:
    0 0 12px rgba(1,270,65,.5),
    0 0 24px rgba(1,270,65,.35);
}


/* =========================================
   HAMBURGER - DESKTOP SKRYTÝ
   ========================================= */

nav #innav .mobile-menu-toggle{
  display:none;
}


/* =========================================
   MOBILNÍ NAVIGACE
   ========================================= */

@media (max-width:900px){

  nav{
    height:60px;
  }

  nav #innav{
    width:100%;
    height:60px;
    padding:0 12px;
    box-sizing:border-box;
  }

  nav #innav .logo{
    margin:0;
    padding:0;
  }

  nav #innav .logo img{
    max-height:45px;
    width:auto;
  }


  /* HAMBURGER */

  nav #innav .mobile-menu-toggle{
    display:flex;

    width:44px;
    height:44px;

    margin-left:auto;
    padding:0;

    border:0;
    outline:0;

    background:transparent;

    align-items:center;
    justify-content:center;

    flex-direction:column;

    gap:5px;

    cursor:pointer;

    flex-shrink:0;

    z-index:101;
  }


  nav #innav .mobile-menu-toggle span{
    display:block!important;

    width:25px!important;
    height:3px!important;
    min-height:3px!important;

    margin:0!important;
    padding:0!important;

    background:#fff!important;

    border:0!important;

    border-radius:3px!important;
  }


  /* =========================================
     MOBILNÍ MENU
     ========================================= */

  nav #innav > ul[data-x-bind="navigation"]{
    position:absolute;

    top:60px;
    left:0;
    right:0;

    width:100%;

    margin:0;
    padding:0;

    box-sizing:border-box;

    background:#fff;

    display:none;

    flex-direction:column;

    align-items:stretch;

    max-height:calc(100vh - 60px);

    overflow-y:auto;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    z-index:100;
  }


  /* ZAVŘENÉ */

  nav #innav > ul[data-x-bind="navigation"].hidden{
    display:none!important;
  }


  /* OTEVŘENÉ - Alpine přidá flexImportant */

  nav #innav > ul[data-x-bind="navigation"].flexImportant{
    display:flex!important;
  }


  /* =========================================
     MOBILNÍ POLOŽKY
     ========================================= */

  nav #innav > ul[data-x-bind="navigation"] li.top{
    width:100%;
    border-bottom:1px solid #e5e5e5;
    background:#fff;
  }

  nav #innav > ul[data-x-bind="navigation"] li.top:hover{
    width:100%!important;
    background:#f5f5f5;
  }

  nav #innav > ul[data-x-bind="navigation"] li.top button{
    display:flex;

    align-items:center;
    justify-content:space-between;

    width:100%;

    box-sizing:border-box;

    padding:15px 18px;

    border:0;

    color:#111;

    background:#fff;

    font-size:16px;

    text-align:left;

    text-decoration:none;
  }

  nav #innav > ul[data-x-bind="navigation"] li.top button:hover{
    color:#111;
    background:#f5f5f5;
  }


  /* =========================================
     ŠIPKY V MOBILU
     ========================================= */

  nav #innav > ul[data-x-bind="navigation"] li.top button span{
    flex-shrink:0;

    width:0!important;
    height:0!important;
    min-height:0!important;

    padding:0!important;

    margin-left:10px;

    border-left:7px solid transparent!important;
    border-right:7px solid transparent!important;
    border-top:8px solid #02d93f!important;

    background:transparent!important;

    border-radius:0!important;
  }


  /* =========================================
     PODMENU V MOBILU
     ========================================= */

  nav #innav > ul[data-x-bind="navigation"] ul{
    position:static;

    display:block;

    width:100%;

    margin:0;
    padding:0;

    background:#f7f7f7;

    border:0;

    box-shadow:none;

    font-size:1em;
  }

  nav #innav > ul[data-x-bind="navigation"] ul li{
    padding:12px 20px 12px 30px;

    border-bottom:1px solid #e5e5e5;

    background:#f7f7f7;
  }

  nav #innav > ul[data-x-bind="navigation"] ul li:hover{
    text-shadow:none;
    background:#eee;
  }

  nav #innav > ul[data-x-bind="navigation"] ul li a{
    color:#111;
  }

}


/* =========================================
   MENŠÍ MOBIL
   ========================================= */

@media (max-width:600px){

  nav #innav{
    padding:0 10px;
  }

  nav #innav .mobile-menu-toggle{
    width:42px;
    height:42px;
  }

  nav #innav .mobile-menu-toggle span{
    width:24px!important;
  }

}


/* =========================================
   VELMI MALÝ MOBIL
   ========================================= */

@media (max-width:400px){

  nav #innav .mobile-menu-toggle{
    width:40px;
    height:40px;
  }

  nav #innav .mobile-menu-toggle span{
    width:23px!important;
  }

}


/* =========================================
   MAIN
   ========================================= */

main{
  padding-top:70px;
}

main p{
  padding-bottom:10px;
}

main h2,
main h4{
  border-bottom:1px solid rgba(0,0,0,.4);
  margin-bottom:.75em;
  padding:.6em 0;
  z-index:3;
}

main .topnav{
  display:block;
  margin:0 auto;
  width:1260px;
  max-width:100%;
  padding:20px 0;
}

main .content.block{
  display:block !important
}

main .content{
  margin:0 auto;
  width:1260px;
  max-width:100%;
  padding-top:0;
  display:flex;
  gap:0;
}

main .content .left{
  width:900px;
}

main .content .left h5{
  padding:0 0 10px 0;
  margin:0;
  font-size:1.4em;
  font-weight:bold;
}

main .content .right{
  width:360px;
  top:0;
  padding:0 0 0 30px;
}

main .content h2,
main.bonus .content h3,
main.functions .content h3,
main.vocabulary .content h3,
main .content h4{
  border-bottom:1px solid rgba(0,0,0,.4);
  margin-bottom:.5em;
  padding:0 0 .6em 0;
  z-index:3;
  font-size:1.4em;
  font-weight:bold;
}

main .content .left h4{
  padding:0 0 .6em 0!important;
}

main .content .left .sticky{
  z-index:5;
  position:sticky;
  top:63px;
}

main .content .right .sticky{
  align-self:flex-start;
  position:sticky;
  top:100px;
}


/* =========================================
   HOME
   ========================================= */

main #home{
  background:#000;
}

main #home .front{
  margin:0 auto;
  padding:30px 0 50px 0;
  width:1260px;
  max-width:100%;
  height:360px;
}

main #home .front .intext{
  display:flex;
  flex-direction:column;
  width:730px;
  position:absolute;
  z-index:2;
}

main #home .front .intext h1{
  color:white;
  font-size:2em;
  line-height:1.2em;
  font-weight:800;
  margin:0;
  padding:0 0 20px 0;
}

main #home .front .intext p{
  color:white;
  font-size:1.1em;
  line-height:1.5em;
}

main #home .front .imgfront{
  position:absolute;
  left:900px;
  top:120px;
  z-index:1;
}

main #home .front .imgfront img{
  width:667px;
  height:266px;
}


/* =========================================
   BANNER
   ========================================= */

main #banner{
  background:#f8f1a5;
  height:100px;
  display:block;
  padding-top:15px;
  margin-bottom:30px;
}

main #banner .bonustxt{
  position:relative;
  display:block;
  color:#000;
  width:100%;
  text-shadow:
    0 0 12px rgba(255,255,255,.9),
    0 0 24px rgba(255,255,255,.35);
}

main #banner .bonustxt .text{
  font-size:1.6em;
  font-weight:800;
  z-index:10;
  position:absolute;
  line-height:1.2em;
}

main #banner .spark{
  position:absolute;
  color:#e09e11;
  font-size:24px;
  opacity:0;
  z-index:1;
  animation:twinkle 2.5s infinite;
  pointer-events:none;
}

main #banner .ulink{
  position:relative;
  display:inline-block;
  text-decoration:none;
}

main #banner .ulink::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:100%;
  height:2px;
  background:#e09e11;
  transform:scaleX(0);
  transform-origin:left;
  animation:underline 10s infinite;
}

main #banner .s1{
  bottom:-75px;
  left:5%;
  animation-delay:0s;
}

main #banner .s2{
  bottom:-10px;
  right:15%;
  animation-delay:.4s;
}

main #banner .s3{
  bottom:-30px;
  left:50%;
  animation-delay:.8s;
}

main #banner .s4{
  bottom:-60px;
  right:45%;
  animation-delay:1.2s;
}

main #banner .s5{
  bottom:-55px;
  left:10%;
  animation-delay:1.6s;
}

main #banner .s6{
  bottom:-40px;
  right:30%;
  animation-delay:2s;
}

main #banner .s7{
  bottom:-65px;
  left:10%;
  animation-delay:2.4s;
}

main #banner .s8{
  bottom:-20px;
  right:25%;
  animation-delay:2.8s;
}

main #banner .s9{
  bottom:-60px;
  left:40%;
  animation-delay:3.2s;
}

main #banner .s10{
  bottom:-50px;
  right:20%;
  animation-delay:3.6s;
}


/* =========================================
   NUMS
   ========================================= */

main .nums{
  list-style:none;
  margin:0;
  padding:0;
  counter-reset:nums;
}

main .nums li a.active{
  color:#28a745;
}

main .nums li a.active::before{
  background:#28a745;
  transform:scale(1.15);
}

main .nums li{
  counter-increment:nums;
  margin:12px 0;
}

main .nums li a{
  display:flex;
  align-items:center;
  text-decoration:none;
  color:#333;
  transition:.2s;
}

main .nums li a span{
  text-decoration:underline;
}

main .nums li a::before{
  content:counter(nums);
  width:28px;
  height:28px;
  min-width:28px;
  border-radius:50%;
  background:#03d43d;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:700;
  margin-right:10px;
}

main .nums li a:hover{
  color:#03d43d;
  transform:translateX(3px);
}


/* =========================================
   TOGGLE
   ========================================= */

main .toggle{
  justify-content:flex-start;
  width:100%;
  margin:12px 0;
  border:1px solid #e6ebf2;
  color:#1f2937;
  font-size:16px;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
  cursor:pointer;
  align-items:center;
  background:#fff;
  border-radius:.4rem;
  box-shadow:0 .1rem .2rem rgba(0,0,0,.15);
  display:flex;
  flex-wrap:wrap;
  padding:1em;
}

main .toggle:hover span{
  text-decoration:underline;
}

main .toggle a{
  margin:2px 6px 0 0;
}

main .toggle::after{
  content:"+";
  display:flex;
  margin-left:auto;
  justify-content:center;
  align-items:center;
  width:30px;
  height:30px;
  flex-shrink:0;
  border-radius:50%;
  background:linear-gradient(135deg,#acfbc2,#03d43d);
  color:#fff;
  font-size:20px;
  font-weight:700;
  transition:.25s;
}

main .toggle.open::after{
  content:"−";
  transform:rotate(180deg);
}

main .txt{
  display:none;
  border:1px solid #e6ebf2;
  border-top:none;
  transition:all .25s ease;
  border-radius:.4rem;
  padding:1em;
  box-shadow:0 .1rem .2rem rgba(0,0,0,.15);
  background:#fff;
  margin:-2em 0 1.5em 0;
}

main .txt.open{
  display:block;
}


/* =========================================
   TABLE
   ========================================= */

main .usetab table{
  width:100%;
  border-collapse:collapse;
  font-family:Arial,sans-serif;
  font-size:15px;
  margin:0;
  background:#fff;
  border:1px solid #e6ebf2;
  border-radius:12px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}

main .usetab table th{
  padding:16px;
  text-align:left;
  font-weight:600;
  border-bottom:2px solid #ececec;
}

main .usetab table td.first{
  font-weight:bold;
  min-width:200px;
}

main .usetab table th.first{
  min-width:200px;
}

main .usetab table td{
  padding:15px 16px;
  border-bottom:1px solid #ececec;
  vertical-align:top;
}

main .usetab table td .ntop{
  font-size:1.4em;
}

main .usetab table td.mw{
  width:280px;
}

main .usetab table td.mw2{
  width:140px;
}

main .usetab table td.img img{
  width:50px;
  height:50px;
  margin:0 10px -20px 0;
}

main .usetab table td.bonus{
  color:#e09e11;
}

main .usetab table td.pros{
  color:green;
}

main .usetab table td.cons{
  color:red;
}

main .usetab table tbody tr{
  transition:.2s;
}

main .usetab table tbody tr:hover{
  background:#f5faf7;
}

main .usetab table tbody tr:last-child td{
  border-bottom:none;
}

main .usetab table .yes{
  color:#03d43d;
}

main .usetab table .no{
  color:#dc3545;
}


/* =========================================
   RATING LIST
   ========================================= */

main .rating-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}

main .rating-list li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:1px solid #e5e5e5;
  border-radius:10px;
  background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

main .rating-list li strong:first-child{
  flex:1;
  font-size:15px;
}

main .rating-list .stars{
  color:#f6b400;
  white-space:nowrap;
}

main .rating-list .percent{
  color:#198754;
  min-width:50px;
  text-align:right;
}

main .rating-total{
  list-style:none;
  margin:10px 0 0 0;
  padding:0;
}

main .rating-total li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  background:linear-gradient(135deg,#fbe1ae,#fff);
  border-radius:10px;
  color:#000;
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}

main .rating-total li strong:first-child{
  flex:1;
  font-size:15px;
}

main .rating-total .stars{
  color:#f6b400;
  white-space:nowrap;
}

main .rating-total .percent{
  color:#198754;
  min-width:50px;
  text-align:right;
  font-weight:bold;
}


/* =========================================
   COUPON
   ========================================= */

main .couponc{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(180deg,#fff,#f7f7f7);
  border:2px dashed #03d43d;
  border-radius:10px;
  padding:20px 0;
  text-decoration:none;
  max-width:100%;
  transition:.25s;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

main .couponc:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 45px rgba(25,179,75,.18);
}

main .couponc:hover .baction{
  text-decoration:underline;
}

main .couponc .code{
  font-weight:bold;
  font-size:1.4em;
  color:#000;
  margin-bottom:12px;
}


/* =========================================
   RESPONSIVE CONTENT
   ========================================= */

@media (max-width:1000px){

  main .content{
    width:100%;
    padding-left:15px;
    padding-right:15px;
  }

  main .topnav{
    width:100%;
    padding-left:15px;
    padding-right:15px;
  }

  main #home .front{
    width:100%;
    padding-left:20px;
    padding-right:20px;
  }

}


@media (max-width:900px){

  main{
    padding-top:60px;
  }

  main .content{
    display:block;
    width:100%;
    padding-left:15px;
    padding-right:15px;
  }

  main .content .left{
    width:100%;
  }

  main .content .right{
    width:100%;
    padding:30px 0 0 0;
  }

  main .topnav{
    width:100%;
  }

  main #home .front{
    width:100%;
    height:auto;
    min-height:360px;
  }

  main #home .front .intext{
    position:relative;
    width:60%;
  }

  main #home .front .imgfront{
    left:auto;
    right:0;
    top:120px;
  }

}


@media (max-width:768px){

  main .rating-list{
    grid-template-columns:1fr;
  }

  ul.servers li{
    height:auto;
    min-height:88px;
  }

}


@media (max-width:600px){

  main .content{
    padding-left:10px;
    padding-right:10px;
  }

  main #home .front{
    padding:25px 15px 35px;
    min-height:300px;
  }

  main #home .front .intext{
    width:100%;
  }

  main #home .front .intext h1{
    font-size:1.7em;
  }

  main #home .front .intext p{
    font-size:1em;
  }

  main #home .front .imgfront{
    display:none;
  }

  main .glist h1{
    font-size:2em;
  }

  main .usetab table{
    font-size:13px;
  }

  ul.servers li a .image{
    width:65px;
  }

  ul.servers li a .image img{
    width:65px;
  }

  ul.servers li a .left{
    min-width:75px;
    width:75px;
  }

}


@media (max-width:420px){

  ul.servers li a .text .title{
    font-size:1.1em;
  }

  ul.servers li a .text .bonus{
    font-size:1em;
  }

  ul.servers li a .text .bonus2{
    font-size:.9em;
  }

}


/* =========================================
   ANIMACE
   ========================================= */

@keyframes underline{

  0%,50%{
    transform:scaleX(0);
    transform-origin:left;
  }

  55%{
    transform:scaleX(1);
    transform-origin:left;
  }

  95%{
    transform:scaleX(1);
    transform-origin:left;
  }

  100%{
    transform:scaleX(0);
    transform-origin:right;
  }

}


@keyframes twinkle{

  0%,100%{
    opacity:0;
    transform:scale(.2) rotate(0deg);
  }

  40%{
    opacity:1;
    transform:scale(1.4) rotate(180deg);
  }

  60%{
    opacity:.8;
    transform:scale(1);
  }

}


@keyframes shine{

  0%{
    left:-120%;
  }

  100%{
    left:120%;
  }

}

/* =========================================================
   MOBILNÍ HAMBURGER MENU
   ========================================================= */

.mobile-menu-toggle{
    display:none;
}


/* =========================================================
   DESKTOP
   Alpine nastavuje menu na .hidden,
   ale desktop ho musí vždy zobrazit
   ========================================================= */

@media (min-width:901px){

    nav #innav ul[data-x-bind="navigation"]{
        display:flex !important;
    }

}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width:900px){

    nav{
        height:60px;
    }

    nav #innav{
        width:100%;
        height:60px;
        padding:0 12px;
        box-sizing:border-box;
        display:flex;
        align-items:center;
    }

    nav #innav .logo{
        margin:0;
        padding:0;
    }

    nav #innav .logo img{
        max-height:45px;
        width:auto;
    }


    /* HAMBURGER */

    nav #innav .mobile-menu-toggle{
        display:flex !important;

        width:44px;
        height:44px;

        margin-left:auto;
        padding:0;

        border:0;
        background:transparent;

        align-items:center;
        justify-content:center;
        flex-direction:column;

        gap:5px;

        cursor:pointer;

        z-index:100;
    }

    nav #innav .mobile-menu-toggle span{
        display:block !important;

        width:25px !important;
        height:3px !important;
        min-height:3px !important;

        margin:0 !important;
        padding:0 !important;

        border:0 !important;

        background:#fff !important;

        border-radius:3px !important;
    }


    /* =====================================================
       MENU
       ===================================================== */

    nav #innav ul[data-x-bind="navigation"]{

        position:absolute;

        top:60px;
        left:0;
        right:0;

        width:100%;

        margin:0;
        padding:0;

        box-sizing:border-box;

        background:#fff;

        flex-direction:column;

        max-height:calc(100vh - 60px);

        overflow-y:auto;

        box-shadow:0 10px 30px rgba(0,0,0,.25);

        z-index:99;
    }


    /*
       ZAVŘENO
       Alpine vrací class="hidden"
    */

    nav #innav ul[data-x-bind="navigation"].hidden{
        display:none !important;
    }


    /*
       OTEVŘENO
       Alpine vrací:
       flexImportant overflow-y-scroll
    */

    nav #innav ul[data-x-bind="navigation"].flexImportant{
        display:flex !important;
    }


    /* =====================================================
       HLAVNÍ POLOŽKY
       ===================================================== */

    nav #innav ul[data-x-bind="navigation"] > li.top{
        width:100% !important;
        border-bottom:1px solid #e5e5e5;
        background:#fff;
    }

    nav #innav ul[data-x-bind="navigation"] > li.top button{
        display:flex;

        align-items:center;
        justify-content:space-between;

        width:100%;

        padding:15px 18px;

        box-sizing:border-box;

        border:0;

        background:#fff;

        color:#111;

        font-size:16px;

        text-align:left;

        text-decoration:none;
    }

    nav #innav ul[data-x-bind="navigation"] > li.top button:hover{
        background:#f5f5f5;
        color:#111;
    }


    /* =====================================================
       ŠIPKY
       ===================================================== */

    nav #innav ul[data-x-bind="navigation"] > li.top button span{
        display:inline-block !important;

        width:0 !important;
        height:0 !important;
        min-height:0 !important;

        margin-left:10px !important;
        padding:0 !important;

        border-left:7px solid transparent !important;
        border-right:7px solid transparent !important;
        border-top:8px solid #02d93f !important;

        background:transparent !important;

        border-radius:0 !important;
    }


    /* =====================================================
       PODMENU
       ===================================================== */

    nav #innav ul[data-x-bind="navigation"] ul{

        position:static;

        display:block;

        width:100%;

        margin:0;
        padding:0;

        background:#f7f7f7;

        border:0;

        box-shadow:none;
    }

    nav #innav ul[data-x-bind="navigation"] ul li{

        padding:11px 20px 11px 30px;

        border-bottom:1px solid #e5e5e5;

        background:#f7f7f7;
    }

    nav #innav ul[data-x-bind="navigation"] ul li a{
        color:#111;
    }

}


/* =========================================================
   MENŠÍ MOBIL
   ========================================================= */

@media (max-width:600px){

    nav #innav{
        padding:0 10px;
    }

    nav #innav .mobile-menu-toggle{
        width:42px;
        height:42px;
    }

    nav #innav .mobile-menu-toggle span{
        width:24px !important;
    }

}


/* =========================================================
   MALÝ MOBIL
   ========================================================= */

@media (max-width:420px){

    nav #innav .mobile-menu-toggle{
        width:40px;
        height:40px;
    }

    nav #innav .mobile-menu-toggle span{
        width:23px !important;
    }

}

@media(max-width:900px){

    .mobile-menu-toggle.open span:nth-child(1){
        transform:translateY(8px) rotate(45deg);
    }

    .mobile-menu-toggle.open span:nth-child(2){
        opacity:0;
    }

    .mobile-menu-toggle.open span:nth-child(3){
        transform:translateY(-8px) rotate(-45deg);
    }

}


@media (max-width: 767px) {

    /* hlavní obsah */
    main,
    main .content,
    main .topnav,
    main .content .left,
    main .content .right {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    main .content {
        display: block;
    }

    main .content .left,
    main .content .right {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* navigace */
    nav,
    nav #innav {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* všechny běžné kontejnery */
    .container,
    .wrapper,
    .content,
    .footer,
    footer {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* footer */
    footer {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    footer *,
    .footer * {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* dlouhé texty, odkazy, tabulky apod. */
    footer a,
    footer p,
    footer li,
    footer span,
    footer div {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    /* pokud má footer vlastní široký vnitřní wrapper */
    footer .content,
    footer .container,
    footer .inner,
    footer #innav {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width:767px){

    /* méně prostoru po stranách hlavního obsahu */
    main .content,
    main .topnav{
        width:100%;
        max-width:100%;
        padding-left:5px;
        padding-right:5px;
        box-sizing:border-box;
    }

    main .content .left,
    main .content .right{
        width:100%;
        max-width:100%;
        padding-left:0;
        padding-right:0;
        box-sizing:border-box;
    }



    /* homepage - tabulka Nejlepší sázkové kanceláře */
    main #home .usetab{
        width:100%;
    }


    /* promo blok 3 700 Kč / 65 000 Kč */
    main #banner .bonustxt .text{
        font-size:1.15em;
        line-height:1.25em;
        max-width:100%;
        box-sizing:border-box;
    }

}

@media (max-width:767px){

    main .toggle{
        display:flex;
        align-items:center;
        flex-wrap:nowrap;

        width:100%;
        box-sizing:border-box;

        padding:11px 8px 11px 12px;
        gap:8px;
    }

    main .toggle a,
    main .toggle span{
        min-width:0;
    }

    main .toggle a{
        flex:1 1 auto;
        margin:0;
        line-height:1.3;
    }

    main .toggle::after{
        flex:0 0 28px;

        width:28px;
        height:28px;

        margin-left:auto;

        font-size:18px;
    }
}

@media (max-width:767px){

    ul.servers li{
        padding-top:12px;
        padding-bottom:12px;
    }

    ul.servers li a .text{
        margin-top:0 !important;
        padding-top:2px;
    }

}

/* =========================================================
   MOBILNÍ TABULKY – scroll pouze uvnitř .usetab
   ========================================================= */

@media (max-width: 767px) {

    .usetab {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        box-sizing: border-box !important;
    }

    .usetab > table {
        width: 700px !important;
        min-width: 700px !important;
        max-width: none !important;
        box-sizing: border-box !important;
    }


    .usetab img {
        display: none !important;
    }

    main .usetab table td.mw,
    main .usetab table td.mw2 {
        width: auto !important;
    }
}

@media (max-width: 767px) {

    .mobile-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: absolute;
        top: 10px;
        right: 10px;

        width: 44px;
        height: 44px;

        padding: 8px;
        margin: 0;

        border: 0;
        background: transparent;
        cursor: pointer;
        z-index: 1001;
    }

    .mobile-menu-toggle span {
        display: block;
        width: 24px;
        height: 3px;
        margin: 3px 0;
        background: #1e1e1e;
        border-radius: 2px;
    }

}
@media (max-width: 767px) {

    .nom {
        display: none !important;
    }
    img.hover {
        display: none !important;
    }

    img.normal {
        display: block !important;
    }

}

@media (max-width:767px){

    main .usetab table {
        font-size:14px !important;
        -webkit-text-size-adjust:100%;
        text-size-adjust:100%;
    }

    main .usetab table th,
    main .usetab table td,
    main .usetab table td a,
    main .usetab table td span,
    main .usetab table td strong,
    main .usetab table td b {
        font-size:14px !important;
        line-height:1.4 !important;
    }

    main .usetab table td .ntop {
        font-size:14px !important;
    }

}

@media (max-width: 767px) {

    main .glist.nob .topline {
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 0 !important;
        padding: 0 0 10px 0 !important;
    }

    main .glist.nob .topline img {
        width: 70px !important;
        height: 70px !important;
        margin: 0 10px 5px 0 !important;
        float: left;
    }

    main .glist.nob .topline h1 {
        font-size: 1.5em !important;
        line-height: 1.2 !important;
        padding: 5px 0 8px 0 !important;
        margin: 0 !important;
    }

    main .glist.nob .topline .link {
        display: block !important;
        margin: 5px 0 8px 0 !important;
        position: static !important;
    }

    main .glist.nob .topline .update {
        clear: both !important;
        display: block !important;
        margin: 8px 0 0 0 !important;
        font-size: .85em !important;
        line-height: 1.4 !important;
    }

}

@media (max-width: 767px) {

    main .topline {
        height: auto !important;
        min-height: 0 !important;
        box-sizing: border-box;
    }

    main .topline h1 {
        font-size: 1.5em !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        padding: 5px 0 10px 0 !important;
    }

    main .topline .link {
        display: none;
    }

    main .topline .update {
        display: block !important;
        font-size: .85em !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }

}