/* This makes sure that the padding and border are included in the total width and height of the elements. */
* {
  box-sizing: border-box;
}
@font-face {
  font-family: warmheart;
  src: url('font/warmheart.woff') format('woff');
}
body {
  font-family: "Century Gothic", sans-serif;;
  text-align: center;
  background-image: url("files/background.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
  background-color: white;
  color: black;
  font-size: 4vw;
}
.mobil_doprava {text-align: right;} .mobil_doleva {text-align:left} .mobil_doprostred {text-align:center;} .mobil_dobloku {text-align: justify;}
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
  float: left;
  border: 1px solid transparent;
}
/* The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns do not exist. To prevent this, we will add a style that clears the flow. */
.row::after {
  content: "";
  clear: both;
  display: table;
}
.logo {
  width: 100%;
}
.logo_mobil {
  width: 50%;
  float: left;
}
a, a:visited a:active {
  color: #0000cc;
}
a:hover {
  opacity: 0.8;
  color: #e60073;
}
.knoflik {
  height: 12vw;
  vertical-align: middle;
  margin: 3vw 4vw 3vw 0vw;
  filter: drop-shadow(4px 4px 2px rgba(0,0,0,0.2));
}
.knoflik:hover {
  filter: drop-shadow(4px 4px 5px rgba(0,0,0,0.2));
}
.knoflik1 {transform: rotate(0deg);}
.knoflik2 {transform: rotate(0deg);}
.knoflik3 {transform: rotate(0deg);}
.knoflik4 {transform: rotate(0deg);}
.knoflik5 {transform: rotate(0deg);}

.knoflik_menu {
  height: 8vw;
  margin: 0.5vw 3vw;
  vertical-align: middle;
  filter: drop-shadow(3px 3px 1px rgba(0,0,0,0.2));
}
.btn {
  font-family: warmheart; 
  font-size: 9vw;
  font-weight: lighter;
  text-decoration: none;
  color: black;
}
.paticka {
  margin: 7vw 0 0 0;
  font-size: 3.5vw;
}
p {
  text-align: justify;
}
li {
  margin: 0.5vw;
}
p.uvod {
  text-align: justify;
  margin: 2vw;
  width: 95%;
}
.info {
  text-align: justify;
  margin: auto;
  margin-top: 2vw;
  margin-bottom: 2vw;
}
.fcb_ico {
  width: 10vw;
  margin: 0 1vw;
}
.dropbtn {
  background-color: #e60073;
  color: white;
  padding: 4vw;
  font-size: 3vw;
  border: none;
  cursor: pointer;
  border-radius: 10vw;
}
.dropdown {
  position: relative;
  display: inline-block;
  float: right;
}
.dropdown-content {
  display: none;
  position: absolute;
  font-size: 7vw;
  right: 0;
  background-color: #f9f9f9;
  min-width: 55vw;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  text-align: left;
}
.dropdown-content a {
  color: black;
  padding: 2vw 2.5vw;
  text-decoration: none;
  display: block;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {-background-color: #3e8e41;}

.menu_mobil {
  position: sticky;
  position: -webkit-sticky;
  font-family: warmheart;
  top: 0vw;
  padding: 1vw;
  margin: -2vw 0 0 0;
  background-image: url("files/background.jpg");
  background-repeat: repeat;
  background-attachment: fixed;
}
.menu {
  margin: auto;
  width: max-content;
  text-align: left;
}
.main {
  margin: auto;
  text-align: left;
  width: 95%;
}
h1 {
  font-family: warmheart;
  text-align: center;
  font-size: 9vw;
  margin: 3vw 0 0 0;
  font-weight: normal;
}
h2 {
  font-size: 4vw;
  text-align: center;
}
.tabulka {
  margin: 0 0 5vw 2vw;
  text-align: center;
  font-size: 2.8vw;
  border-spacing: 0px;
  border-collapse: collapse;
  border: 2px solid black;
}
.tabulka td, .tabulka th {
  border: 1px solid black;
  padding: 0.5vw 1vw;
}
.tabulka th {
  text-align: left;
  width: 71vw;
}
.tabulka td {
  width: 15vw;
}
.ruzova {background-color: pink; font-weight: bold;} .seda {background-color: #e6e6e6;}
.latky {
  font-weight: bold;
  font-size: 2vw;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.2s;
  width: 88vw;
  background-color: white;
  border-radius: 5vw;
  margin: 3vw 0 0 0;
}
.card_strihy {
  padding: 1vw 0;
}
.card_strihy table {
  color: #0000cc;
}
.card_thumb {
  width: 100%;
  border-radius: 5vw 0 0 5vw;
}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
.container {
  -padding: 2px 16px;
}
.bez_podtrzeni {
  text-decoration: none;
}
.vyber_latek {
  margin: 3vw 0 0 0;
  text-align: center;
}
.vyber_latek a {
  font-size: 6vw;
  margin: 0 2vw 0 2vw;
}
.aktivni {
  color: #e60073;  
}
.galerie {
  margin: auto;
  text-align: center;
}
.galerie img {
  width: 26vw;
  margin: 1vw;
  padding: 0;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  border-radius: 2vw; 
}
.galerie img:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  transition: 0.1s;
}
.vyber_strihu a {
  font-size: 5.7vw;
  margin: 0 1vw;
}
.recenze {
  margin: 7vw 0 0 0;
}
.podpis {
  font-style: italic;
  margin: 0 0 0 67vw;
}
.emoji {
  width: 4vw;
}
.hanka_ema {
  width: 100%;
}
.onas_podpis {
  width: 80%;
  margin: 3vw 0 0 0;
}



}