* {margin:0; padding:0;}
body {
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Exo 2', sans-serif;
font-family: 'Allura', cursive;
font-family: 'Catamaran', sans-serif;
font-family: 'Amatic SC', cursive;
font-family: 'Cairo', sans-serif;
font-family: 'Bellota Text', cursive;
font-family: 'Open Sans Condensed', sans-serif;
font-family: 'Titillium Web', sans-serif;
font-family: 'Dosis', sans-serif;
font-family: 'Barlow', sans-serif;
font-family: 'Barlow Condensed', sans-serif;
font-family: 'Open Sans', sans-serif;


 
font-size: 100%; color: #523a0e; text-align: center; }
a img {border: none;} 
hr {clear: both; visibility: hidden; margin: 0; height: 0; border: none;}
/*---------menu---------*/
 div.menu {width: 100%; max-width: 100%; margin: auto; z-index: 100; background: #38302b;  font-weight: 300; }
.menu button {
    background: #38302b;
    border: none;
    color: #f48e0a;
    font-size: 3em;
    cursor: pointer;
    display: block;
    width: 1.5em;
    height: 1.5em;
    margin: auto;
    
}
.menu button:focus {
  outline: none;
}

 .menu menu {display: none;} 
.menu.zobrazit menu {display: block;}
div.menu menu {margin-top: 0.1em;}

div.menu li {list-style: none;}
div.menu a {display: block;  font-size: 1.2em; color: #f48e0a; letter-spacing: 0.05em; padding: 0.4em 0;  text-decoration: none; text-transform: uppercase;  margin: auto;}
div.menu a#last {border-bottom: none; padding-bottom: 1.5em;}
div.menu a:hover  {color: #fff; }
body#home div.menu a#domu {color: #fff;}

div#main {position: relative; width: 100%;  max-width: 1920px; height: 100vh;  margin: auto; overflow: hidden; }
div#slideshow {position: absolute; top: 0; left: 0;  width: 500%;  height: 100%;  animation: animate 18s linear infinite;  }
div#slideshow div.slide {width: 20%; height: 100%; float: left;   }
div#slideshow div.slide.slide1 {background: url(slide/01.jpg); background-size: cover; background-position: center;}
div#slideshow div.slide.slide2 {background: url(slide/min/06.jpg); background-size: cover; background-position: center;}
div#slideshow div.slide.slide3 {background: url(slide/min/03.jpg); background-size: cover; background-position: center;}
div#slideshow div.slide.slide4 {background: url(slide/min/04.jpg); background-size: cover; background-position: center;}
div#blocek {position: absolute; top: 10px; left: 50%; transform: translate(-50%, 0%); z-index: 1000; width: 90%; max-width: 800px;} 
div#blocek p {color: #fff; font-weight: 600; font-size: 3em; margin: 0.5em auto 0 auto; text-transform: uppercase; text-shadow: 0 0 5px #666;}
@keyframes animate {
0% {left: 0;}
17.5% {left: 0;}
27.5% {left: -100%;}
42.5% {left: -100%;}
52.5% {left: -200%;}
67.5% {left: -200%;}
77.5% {left: -300%;}
 92.5% {left: -300%;}
100% {left: -400%;}
}

a#logo {display: block; margin: 1em auto; }
a#logo img {width: 90%; max-width: 150px; padding: 15px; border: 1px solid #fff; }
a#balicek,
a#weekmenu {display: block; color: #fff; width: 90%; max-width: 150px; margin: 0.5em auto; padding: 0.5em 0; text-decoration: none; font-size: 1.2em; }
a#balicek {background: #f48e0a;}
a#weekmenu  {background: #c0aa3a;}
div#lang {width: 90px; position: absolute; top: 10%; left: 0; z-index: 10;  }
div#lang a  {display: block; color: #fff; width: 20px; margin: 3px 0; padding: 2px 5px; text-decoration: none; background: #c0aa3a; font-size: 1.1em;}


div#reserve {display: none; width: 90%; margin: auto; margin-top: 320px; max-width: 420px; color: #fff;}
div#reservationStart {width: 100%; margin: auto; float: none; margin-left: 25px;}
div#text,
div#left,
div#right {width: 100%; max-width: 1920px; margin: 1em auto;}
div#text img {width: 100%; max-width: 107px; margin: auto;}
div#text h1,
div#text h2 {color: #c0aa3a; text-transform: uppercase; font-family: 'Catamaran', sans-serif;}
div#text h1 {font-size: 1.2em; font-weight: 300;}
div#text h2 {font-size: 2em; font-weight: 800;}
div#text p {width: 90%; text-align: justify; margin: 1em auto; line-height: 1.6em; font-size: 1.2em; font-weight: 300;}

p a,
h4 a {color: #f48e0a;}


div#trio {width: 100%; max-width: 1920px; margin: 1em auto;}
div#trio a {display: block; position: relative; width: 98%; max-width: 613px; margin: auto; display: inline-block; margin: 1em 1%;  background: #38302b; }

div#trio a img {width: 100%; max-width: 613px; height: 100%; margin: auto; opacity: 0.3; transition: all 1s; }
div#trio a img:first-child {position: absolute; top: 5em; left: 50%; width: 58px; height: 55px; margin-left: -29px; opacity: 1; z-index: 10;}
div#trio a p {position: absolute; top: 4.5em; left: 50%; width: 150px; height: 75px; font-size: 2em; text-transform: uppercase; margin-left: -75px; opacity: 1; z-index: 10; color: #f48e0a;  transition: all 1s; }
div#trio a:hover > img {opacity: 0.8;}
div#trio a:hover > p {text-shadow: 0 0 5px #38302b;}  


div#duo {width: 100%; margin: auto;}
div#duo a {display: block; position: relative; width: 100%; max-width: 500px; margin: 1em auto; display: inline-block; background: #f48e0a; color: #fff; text-decoration: none; padding-bottom: 2em;}
div#duo a img:first-child {width: 100%; max-width: 277px; }
div#duo a:last-child {background: #38302b;}
div#duo a h3 {margin: 1em auto; font-size: 2em;}
div#duo a p {margin: 1em auto 0 auto; font-size: 1.4em; line-height: 1.5em;}
div#duo img {transition: all 1s; }
div#duo a:hover > img:first-child {transform: scale(1.025); }

/*--------balíček---------------*/
div#balicek {width: 100%; max-width: 1920px; margin: 2em auto;}
h1#nazevakce {color: #f48e0a; font-size: 4em; margin: 0.5em auto;}
p#time {font-size: 1.4em; margin: 0.5em auto;}
h2#hlavnisdeleni {color: #caab74; font-size: 3em; margin: 0.5em auto;}
p#upresneni {font-size: 1.4em; margin: 0.5em auto;}
h3#rezervace  {color: #caab74; font-size: 3em; margin: 0.5em auto;}
img#vino {width: 100%; max-width: 300px; margin: 0 auto;}
p#odkazakce  { font-size: 1.4em; margin: 1em  auto 2em auto;}

div#video {width: 100%; margin: 1em auto; background: url(img/bg_video.png) no-repeat #caab74;  background-position: 50% 50%; padding: 1em 0;}
div#video iframe {width: 100%; max-width: 640px; margin: auto; }

div#kontaktmapa {width: 100%; margin: auto;}
div#udaje {width: 100%; max-width: 1920px; margin: 1em auto 2em auto;}
div#udaje h3 {color: #caab74; font-size: 2em; margin: 1em auto;}
div#udaje p {font-size: 1.4em; font-weight: 300; line-height: 1.5em; margin: 0.5em auto;};
div#mapa,
div#kontaktmapa iframe {width: 100%; max-width: 1000px; margin: auto; border: none; overflow: hidden; }
iframe {width: 100%; margin: auto;}

div#skill {width: 100%; margin: auto; padding: 1em 0; margin: auto; color: #fff; background: #c0aa3a;}
div#skill a {}
div#copy {width: 100%; max-width: 1920px; margin: 1em auto;}
div#copy img {display: inline-block; width: 100%; max-width: 60px; vertical-align: middle; margin: 0.5em 0;  }
div#copy img:first-child,
div#copy img:last-child {max-width: 37px; margin: 0 1.5em;  }
div#copy p {width: 100%; margin: 0.5em auto;}





@media screen and (min-width: 475px) {
div#blocek {top: 50px;} 
div#reserve {display: block; width: 90%; margin: auto; margin-top: 320px;}

}


@media screen and (min-width: 600px) {

div#duo a {padding-bottom: 0; width: 97%; margin: 1em 1.5%;}
div#duo a img:first-child {float: left;}
div#duo a:last-child img:first-child {float: right;}
}




@media screen and (min-width: 1000px) {
div#blocek p {font-size: 4em;}

a#balicek,
a#weekmenu {max-width: 248px; }
.menu button {display: none;}
div.menu a {display: inline-block;  letter-spacing: 0.05em;   text-decoration: none; margin: 0.25em 0.75em 0 0.75em;}
div.menu a#last {border-bottom: none; padding-bottom: 0;}
div.menu {padding: 0.6em 0 1em 0; position: fixed; z-index: 1000;}
div#video {padding: 3em 0;}
 div#main {margin-top: 4em;}
div#video iframe {border: 15px solid #957f5a;} 
div#reserve {position: absolute; top: 5%; left: 60%; margin: 0;}
 /*-------------hack firefox---------*/
 @-moz-document url-prefix() { 
  div.menu {margin-top: -4em;}
}
.menu menu {display: block; margin: auto;}
div#text {margin: 3em auto;}
div#text img {width: 100%; max-width: 90px; float: left; margin: 0 1em 1em 0; }
div#left,
div#right {float: left; margin: 1em 0;}
div#left {width: 35%; border-bottom: 1px solid #c0aa3a; margin: 1em 5%;}
div#right {width: 50%; vertical-align: top; margin: 0 5% 0 0;}
div#text h1,
div#text h2 {text-align: left;}
div#text h2 {font-size: 1.8em;}
div#text p {width: 100%;}

div#kontaktmapa {margin: 1em auto;}
div#udaje,
div#mapa {float: left; width: 50%;}
div#udaje {margin: 2em auto 0 auto;}
div#mapa iframe {width: 100%; max-width: 1000px;}
div#reserve {top: 5%; left: 55%;  transform: translate(0%, 0%); }
}

@media screen and (min-width: 1200px) {

.menu menu {width: 90%; margin-left: 5%;}
div.menu a {display: block; float: left;  margin: 0.25em 1.25em 0 1.25em;}
div.menu a#last {margin-right: 0;}
div#left {width: 30%; border-bottom: 1px solid #c0aa3a; margin: 1em 0 1em 5%;}
div#right {width: 55%; vertical-align: top; margin: 0 5%;}
div#udaje {width: 40%;}
div#mapa {width: 60%; max-width: 1200px;}
div#mapa iframe {max-width: 1200px;}
div#slideshow div.slide.slide1 {background: url(slide/01.jpg)  no-repeat;}
div#slideshow div.slide.slide2 {background: url(slide/06.jpg)  no-repeat;}
div#slideshow div.slide.slide3 {background: url(slide/03.jpg)  no-repeat;}
div#slideshow div.slide.slide4 {background: url(slide/04.jpg)  no-repeat;}
div#reserve {left: 60%;  }
div#main {height: 80vh; }
}

@media screen and (min-width: 1400px) {
div#reserve {left: 65%;  }
}

@media screen and (min-width: 1500px) {
div.menu a {margin: 0.25em 1.75em 0 1.75em;}
div#reserve {left: 70%;  }
}

@media screen and (min-width: 1600px) {
div#text h2 {font-size: 2.2em; line-height: 1.3em;}
div#text p {font-size: 1.3em;}
div#trio a {max-width: 500px;}
div#trio a:first-child {margin-left: 0;}
div#trio a:last-child {margin-right: 0;}
div#reserve {top: 5%;}

}