@charset "UTF-8";
/* CSS Document */
@font-face {
  font-family: NotoSerif;
  src: url(../font/NotoSerif-Regular.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: NotoSerif;
  src: url(../font/NotoSerif-Italic.ttf) format("truetype");
  font-style: italic;
}
@font-face {
  font-family: NotoSerif;
  src: url(../font/NotoSerif-Bold.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: NotoSerif;
  src: url(../font/NotoSerif-BoldItalic.ttf) format("truetype");
  font-style: italic;
  font-weight: bold;
}

@font-face {
  font-family: Andika;
  src: url(../font/Andika-Regular.ttf) format("truetype");
  font-weight: normal;
}
@font-face {
  font-family: Andika;
  src: url(../font/Andika-Italic.ttf) format("truetype");
  font-style: italic;
}
@font-face {
  font-family: Andika;
  src: url(../font/Andika-Bold.ttf) format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: Andika;
  src: url(../font/Andika-BoldItalic.ttf) format("truetype");
  font-style: italic;
  font-weight: bold;
}

body {
  font-family: Andika, sans-serif;
  background-image: url("../images/wallpaper-tileable.jpg"); 
  background-attachment: fixed;
  background-color: Gray;
  font-size: .7rem; 
}  

article {
  width: 94%;
  max-width:728px; 
  display:block; 
  margin: 0 auto;
  border: double 6px black;
  background-color:WhiteSmoke;
  position:relative;
}

img#Left, img#Right {display:none;}

img#Mobil {
  display: block;
  margin: 0 auto;
}

hr {overflow: visible; width:98%;  border-top: 5px double Black;} 

h1, h2, h3 {font-family:"Noto Serif", serif; margin: 20px 12px 9px 12px; text-align:center}

h1 {font-size:1.4rem}
h2 {font-size:1.3rem}
h3 {font-size:1.2rem}
p {font-size:1.1rem; margin: 8px; text-align:center}

p.Stahnout {margin:9px 9px 2px; text-align:right}

strong {font-weight:normal; background-color:LightGray; border: 2px solid Black; border-radius:28px; padding:0}
strong:hover {color:SaddleBrown; background-color:WhiteSmoke}
strong:active {color:WhiteSmoke; background-color:SaddleBrown}
strong img {display:inline}

hr.Last {position:relative; top:8px}

iframe {
  display: block;
  margin:0 auto;
  width: 280px; 
  height:158px;
}

a {color:RoyalBlue; text-decoration:none}
a:hover {color:SaddleBrown}
a:active {color:Purple}

address {text-align:center; padding-bottom:10px; font-size:1.4em; font-style:normal}

@media (min-width: 700px) {

  body {
    font-size: .8rem;
  } 
  
  h1 {font-size:1.5rem}
  h2 {font-size:1.4rem}
  h3 {font-size:1.3rem}
  p {font-size:1.2rem; margin: 8px; text-align:center}

}  /* End of @media (min-width: 700px) */

@media (min-width: 988px) {

  body {
    font-size: .9rem;
  } 
  
  p.Stahnout {
    margin: 16px 22px 8px;
  }

  iframe {
    width: 560px; 
    height:315px;
  }
  
  img#Mobil {
    display: none;
  }
  
  img#Left, img#Right {
    position:fixed;
    display:block;
    width: 118px;
    height: 189px;
    top: 15px;
  } 
  
  img#Left {
    left: 20px;
  }
  
  img#Right {
    right: 20px;
  }
  
  h1 {font-size:1.6rem}
  h2 {font-size:1.5rem}
  h3 {font-size:1.4rem}
  p {font-size:1.3rem; margin: 8px; text-align:center}

}  /* End of @media (min-width: 984px) */

@media (min-width: 1290px) {

  body {
    font-size: 1rem;
  } 
  
  img#Left, img#Right {
    width: 235px;
    height: 378px;
    top: 28px; 
  }
  
  img#Left {
    left: 40px;
  }
  
  img#Right {
    right: 40px;
  }
  
  h1 {font-size:1.7rem}
  h2 {font-size:1.6rem}
  h3 {font-size:1.5rem}
  p {font-size:1.4rem; margin: 8px; text-align:center}

}  /* End of @media (min-width: 1290px) */ 

/* PhotoSwipe begin */
.my-gallery {
  width: 100%;
  float: left;
  margin-bottom: 2rem;
  margin-left: .8rem;
}
.my-gallery img {
  width: 100%;
  height: auto;
}
.my-gallery figure {
  display: block;
  float: left;
  margin: 0 5px 5px 0;
  width: 113px;
}
.my-gallery figcaption {
  display: none;
}
/* PhotoSwipe end */

/* Zvětšování fotek při najetí */
a img {
  transition: all .25s ease-out;
}
a img:hover {
  transform: scale(1.14);
}

/* Vlajky */
#Jazyk {position:absolute; right:5px; top:-15px; align-content: center}
#Jazyk p {color:DodgerBlue; margin:0; padding:0}
#Jazyk img {display:block; margin:0 auto; padding:0}
#Jazyk a {border-radius:10px}
#Jazyk a:link {padding:5px; background-color:transparent}
#Jazyk a:hover {padding:5px; background-color:Chocolate}
#Jazyk a:active {padding:5px; background-color:Purple}

.Kousek {
  position: relative;
  right: .7rem;
}

/* NAV MOBILE */
@media only screen and (max-width: 949px) {

  /* Style the navigation menu */
  nav.Mobile {
    position: fixed;
    top: 0;
    right: 0;
    text-transform: uppercase;
    width: 60%;
    z-index: 3;
    padding-left: 1rem;
    background-color: transparent;
  }

  /* Hide the links inside the navigation menu (except for logo/home) */
  nav.Mobile #myLinks {
    display: none;
    background-color: #333;
    overflow: hidden;
    width: 100%;
  }

  /* Style navigation menu links */
  nav.Mobile a {
    color: hsl(27.6,87.1%,66.7%);
    padding: .4rem;
    text-decoration: none;
    font-size: 1.4rem;
    display: block;
  }
  nav.Mobile a.Logo {
    background-color: transparent;
  }

  /* Style the hamburger menu */
  nav.Mobile a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
  }

  /* Add a grey background color on mouse-over */
  nav.Mobile a:hover {
    background-color: #ddd;
    color: black;
  }

  /* Style the active link (or home/logo) */
  .active {
    background-color: #555;
    color: white;
  }

  /* nav Computer */
  nav.Nav {
    display: none;
  }

}  /* End of max-width: 949px */

/* HORIZONTAL NAV */
@media only screen and (min-width: 950px) {

  body {
    --nav-height: 40px;
    padding-top: var(--nav-height);
  }

  nav.Nav {
    width: 100%;
    height: var(--nav-height);
    position: fixed;
    top: 0;
    left: 0;
    text-transform: uppercase;
    background-color: hsla(25,36%,30%, 0.0);
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
    transition: .3s;
    z-index: 3;
  }
  .NavLink, .NavLink:visited {
    color: hsl(27.6,87.1%,66.7%);
    text-decoration: none;
    margin: 0 .6rem;
    background-color: hsl(25,36%,30%);;
    padding: .2rem .5rem .3rem;
    border-radius: .5rem;
    border: 2px hsl(27.6,87.1%,66.7%) solid;
    font-weight: bold;
  }
  a.NavLink:hover {
    border: 2px #ddd solid;
    color: #ddd;
    background-color: #222;

  }
  a.NavLink:active {
    border: 2px #222 solid;
    color: #222;
    background-color: #ddd;
  }

  .NavHidden {
    transform: translateY(calc(-1 * var(--nav-height)));
    box-shadow: none;
  }

  nav.Mobile {
    display: none;
  }

}  /* End of min-width: 950px */