/* HACK: .............screen 1600...................... */
@media only screen and (max-width: 1600px){
.navigation{
  margin-left: 12%;
  width: 75%;
}
.navigation li{
  margin-right: 4%;
}

.dropdown{
  margin-right: 4%;
}

div.opacity_uvod{
  margin-left: 35.7%;
}

}

/* HACK: .............screen 1440............. */
@media only screen and (max-width: 1440px){
  .navigation li{
    margin-right: 3%;
  }

.dropdown{
  margin-right: 3%;
}
  div.opacity_uvod{
    margin-left: 35.2%;
  }

}


/* HACK: .....................screen 1366 */
@media only screen and (max-width: 1350px){

.navigation a{
  font-size: 20px;
}

.navigation li{
  margin-right: 2.5%;
}

.dropdown{
  margin-right: 2.5%;
}

.dropdown .dropbtn{
  font-size: 20px;
}

.dropdown-content a {
  font-size: 16px;
}

.sipka{
  font-size:65px;
}

div.opacity_uvod{
  margin-left: 32.5%;
  width: 30%;
}

.footer p,a{
  font-size: 18px;
}
.footer{
  padding: 4px;
}

.tabulkasezona{
  margin-left: 15%;
  margin-right: 15%;
}
.tabulka{
  margin-left: 15%;
  margin-right: 15%;
}
}


/* HACK: .................screen 1110................. */
@media only screen and (max-width: 1110px){
  .navigation a{
    font-size: 19px;
  }

  .navigation li{
    margin-right: 2.2%;
  }

  .dropdown{
    margin-right: 2.2%;
  }

  .dropdown .dropbtn{
    font-size: 19px;
  }

  .dropdown-content a {
    font-size: 15px;
  }

  .sipka{
    font-size:55px;
  }

  div.opacity_uvod{
    margin-left: 32%;
    width: 30%;
  }

  .footer p,a{
    font-size: 17px;
  }
  .footer{
    padding: 4px;
  }

  .tabulkasezona{
    margin-left: 10%;
    margin-right: 10%;
    min-width: 70%;
  }
  .tabulka{
    margin-left: 10%;
    margin-right: 10%;
    min-width: 70%;
  }

.tabulka th, .tabulkasezona th{
  font-size: 17px;
}

.tabulka td,a , .tabulkasezona td,a{
  font-size: 16px;
}

div.content p{
  font-size: 18px;
}

div.content{
  margin-left: 8%;
  margin-right: 8%;
  margin-top: 4%;
}

.velkynadpis p{
  font-size: 16px;
}
}



@media only screen and (max-width: 1075px){
  .navigation{
    margin-left: 10%;
    margin-right: 10%;
    min-width: 80%;
  }
}


@media only screen and (max-width: 960px){
  .navigation{
    margin-left: 2%;
    margin-right: 2%;
    min-width: 95%;
  }

  .navigation a{
    font-size: 17px;
  }

  .navigation li{
    margin-right: 2%;
    margin-left: 0px;
    padding-left: 0px;
  }
  .dropdown{
    margin-right: 2%;
  }
}



/* HACK: .................screen 850..................... */
@media only screen and (max-width: 850px){
  .navigation{
    margin-left: 2%;
    margin-right: 2%;
    min-width: 95%;
  }

  .navigation a{
    font-size: 16px;
  }

  .navigation li{
    margin-right: 0.5%;
    margin-left: 0px;
    padding-left: 0px;
  }

  .dropdown{
    margin-right: 0.5%;
  }

  .dropdown .dropbtn{
    font-size: 16px;
    padding: 4px;
  }

.dropdown-content{
  padding:8px;
  min-width: 80px;
}
  .dropdown-content a {
    font-size: 14px;
    padding: 6px;
  }

  .sipka{
    font-size:50px;
  }

  div.opacity_uvod{
    margin-left: 23%;
    width: 45%;
  }

.uvod h1{
  font-size: 40px;
}
.uvod p{
  font-size: 20px;
}

.velkynadpis{
  padding-top: 1%;
}
.velkynadpis h2{
  font-size: 35px;
  padding: 7px;
}

  .footer p,a{
    font-size: 14px;
  }
  div.footer{
    padding: 4px;
  }
  div.footer_shadow{
    margin-left: 30%;
    margin-right: 30%;
  min-width: 35%;
  }

  .tabulkasezona{
    margin-left: 1%;
    margin-right: 1%;
    min-width: 92%;
  }
  .tabulka{
    margin-left: 1%;
    margin-right: 1%;
    min-width: 92%;
  }

.tabulka th, .tabulkasezona th{
  font-size: 15px;
}

.tabulka td,a , .tabulkasezona td,a{
  font-size: 14px;
}

div.content p{
  font-size: 16px;
}

div.content{
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 4%;
}
div.content h2{
  font-size: 25px;
}

.covid19{
  font-size: 45px;
}

.flip-card{
  height: 190px;
  width: 190px;
}

.flip-card-back h1{
  font-size: 25px;
}
}


/* HACK: .........screen 600 (mobile)............... */
@media only screen and (max-width: 600px){

div.posun{
  padding-top: 35px;
}

div.footer_shadow{
  margin-left: 25%;
  margin-right: 25%;
min-width: 40%;
}

/* tabulky */
  .tabulkasezona{
    margin-left: 0.5%;
    margin-right: 0.5%;
    min-width: 97%;
  }
  .tabulka{
    margin-left: 0.5%;
    margin-right: 0.5%;
    min-width: 97%;
  }

.tabulka th, .tabulkasezona th{
  font-size: 13px;
}

.tabulka td,a , .tabulkasezona td,a{
  font-size: 12px;
}

div.content{
  margin-left: 3%;
  margin-right: 3%;
  margin-top: 4%;
}


/* .....navigace......... */

.navigation{
  display: none;
}

.navigation-mobile{
  font-family: Albertus_tucne;
  top: 4px;
  position: fixed;
  display: grid;
  width: 100%;
  border-bottom-color: #8c0000;
  border-width: 3px;
  box-shadow: 0px 0px 10px 2px rgba(255,0,0,0.77);
  background-image: url('../images/red_navigation_position.jpg');
  background-repeat: repeat-x;
  background-size: contain;
}

.dropdown-mobile-main{
  display: grid;
  cursor: pointer;
  transition: 0.5s;
}

.dropbtn-mobile-main{
  font-family: Albertus_tucne;
  text-align: center;
  font-size: 20px;
  color: black;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 1px 1px 8px black, 1px 1px 5px grey, 1px 1px 2px silver;
}

.dropdown-content-mobile-main{
 display: none;
 float: left;
 background: linear-gradient(to top, #b20000 0%, #000000 130%);
 background-color: #b50000;
 width: 100%;
 box-shadow: 0px 0px 10px 2px rgba(255,0,0,0.77);
 z-index: 2;
 transition: 1s;
}

.dropdown-content-mobile-main a{
  text-decoration: none;
  text-transform: uppercase;
  font-family: Albertus_tucne;
  color: black;
  font-size: 17px;
  float: left;
  padding: 8px;
  border-bottom: 1px solid black;
  text-shadow: 1px 1px 8px black, 1px 1px 5px grey, 1px 1px 2px silver;

}

.dropdown-mobile{
  display:none;
}

.dropbtn-mobile{
  text-transform: uppercase;
  text-decoration: none;
  font-size: 18px;
}
.dropdown-content-mobile{
font-family: Albertus_stredni;
margin-left: 8px;
display: none;
float: left;
padding: 5px;
font-size: 13px;
}

.dropdown-mobile-main:hover .dropdown-content-mobile-main, .dropdown-mobile{
  display:grid;
}

.dropdown-mobile:hover .dropdown-content-mobile{
  display:grid;
}

.imgshadow{
  max-width: 90%;
  max-height: 90%;
}
}
/* HACK: .........screen 540 (mobile)............... */
@media only screen and (max-width: 540px){
/* tabulky */
.tabulkasezona{
  display: none;
}

.tabulka{
  display: none;
}

/* normal */
.covid19{
  font-size: 40px;
}
div.opacity_uvod{
  margin-left: 18%;
  width: 50%;
}
.sipka{
  font-size:45px;
}

.mobilegalery{
  display: block;
  line-height: 100px;
}

.imgshadowgalerie{
  border-width: 3px;
  max-width: 130px;
}

}
/* HACK: .........screen 340 (mobile S)............... */
@media only screen and (max-width: 340px){
  div.opacity_uvod{
    margin-left: 10%;
    width: 60%;
  }
  .uvod h1{
    font-size: 35px;
  }
  .uvod p{
    font-size: 18px;
  }
  div.footer_shadow{
    margin-left: 10%;
    margin-right: 10%;
  min-width: 70%;
  }

  .imgshadowgalerie{
    border-width: 2px;
    max-width: 120px;
  }
}