:root {
    --c1: #FFC300;
    --c2: #BCB29C;
  }
  html, body, div, span, applet, object, iframe, h1, h2, h3, h4, .tile.text time, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;	padding: 0;	border: 0; 	outline: 0; 	vertical-align: baseline;}
    :focus {	outline: 0; } ol, ul {list-style: none;} a {text-decoration:none} .clear{clear:both} 
.clearfix:after { content: ""; display: table; clear: both;}
a {color:white}
.print-only {display: none;}
h1 {font-family: "Jost", sans-serif; font-style: normal; font-size: 6.2em; font-weight: 400; margin-top: 0.2em; margin-bottom: 0.4em; line-height: 1em;}
h2 {font-family: "Jost", sans-serif; font-style: normal; font-size: 3.7em; font-weight: 400; line-height: 1.2em; margin-top: 0.2em; margin-bottom: 0.4em;}
h3 {font-family: "Jost", sans-serif; font-style: normal; font-size: 1.8em; line-height: 1.3em; font-weight: 700; margin-top: 0em; margin-bottom: 0.5em;}
h4 {font-size: 1em; font-weight: 700; margin-bottom: 0.4em; text-transform: uppercase; line-height: 1.4em;}
h5 {font-size: 1.5em; font-weight: 700; margin-bottom: 0.8em; line-height: 1.2em;}
.row { position: relative; } .col {float:left; width: 50%;}

body, html {height:100%;}
/*html{-webkit-text-size-adjust: none;}*/ /*stop font resizse ios - better to have in in media queries*/ 
/*::-webkit-scrollbar { display: none; }*/
html {height:100% }
section {overflow:auto}
a {color:var(--c1)}
img {color:transparent; display: block;} 
.img100 {width: 100%;}

body { font-family: "Red Hat Display", serif; font-weight: normal; font-style: normal; font-size: 20px; font-size: 1.1vw;  line-height: 1.5em; background-color: #000; color:#fff;  height:100%;  }

::-moz-selection { background: #e6e1b0; color:black }
::selection { background: #e6e1b0; color:black } 


main {background-color:black}
p {margin-bottom: 2.2em;}
.container {margin:auto; width:76%; max-width:1700px; position: relative;}


/*nav*/
.topbar {  background-color: black; height: 4em;  position: relative;}
.topbar .logo { padding-top: 1em; display: block; margin: 0 0 0 1.8em; width: 7.1em;}
.nav-cont {  position: absolute; right: 3em; top: 1em; margin-left: 2.3em; margin-top: 0.18em; }

.nav-cont li {float:left; letter-spacing: 0.0em; margin: 0 0 0 4em; font-size: 0.8em; position: relative;}
.nav-cont li a {font-weight: 700; letter-spacing: 0.1em; color: #d8d8d8;}
.nav-cont li a:hover {color:var(--c1)}


/*menu mobile*/
#ham {transition:opacity 1s; display: none;}
.menu {width:100%; height:100%; color:black; background:var(--c1); position:fixed; top:0; left:0; text-align: center;  display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.5s,  visibility 0s 0.5s; z-index:100;  }
.menu .nav-cont {display:block; position:static; }
.menu {flex-direction: column;}
.menu .nav-cont {margin-left: 3.2em;}
.menu .nav-cont li {float:none; text-align:left; margin:0 auto .8em; font-size:2em;}
.menu .nav-cont li a {color:black}
.menu .logo {width: 12em; filter: invert(1); margin-bottom: 2em;}
.open-menu { opacity: 1;  visibility: visible; transition: opacity 0.5s; }

nav {  font-size: 1.2em;
  color: #eff2f7;
  line-height: 1.6em; }
.nav-show {opacity:1; transform:translateY(0)}    
nav a{color:#eff2f7; transition:color 0.2s; cursor:pointer; font-weight:800}
nav a:hover{color:red}

/*intro*/
.intro {  height: 35em; align-items: center; position: relative; color: white; overflow: hidden; z-index: 1;}
.intro .video {position: absolute; left:0; top: 50%; transform: translateY(-50%); width: 100%; filter: brightness(0.7);}
.intro-text {position: absolute; z-index: 2; top: 50%; left:14%; transform: translateY(-50%); }
.intro-text h1 {text-transform: uppercase; font-size: 1.2em; font-weight: 600; }
.intro-text p {margin-top: 1em;}
.intro .logo {width: 30vw;}

/*food menu*/
.food-menu-section {position: relative;     overflow: hidden;     background: url(../img/wood1.jpg);
    background-size: contain; background-repeat: repeat;}
.food-menu {color:black; position: relative; background-color: white;  width: 40%; margin: 0em auto 0;padding: 4em; z-index: 2;}
.small-title {font-weight: bold; letter-spacing: 0.25em; font-size: .9em; text-transform: uppercase;}
.small-title .datum {color: var(--c2)}

.food-menu table {width: 100%; font-size: 1.1em;}
.food-menu .price {font-weight: 600; text-align: right; min-width: 5em;}
.food-menu h5 {margin: 1.2em 0 0.4em;}
.plate1 {position: absolute; top: -6em; transform: rotate(255deg); left: -8em; width: 22em;
    animation: plate1-rotate 80s linear infinite;
}

@keyframes plate1-rotate {
  from { transform: rotate(255deg); }
  to { transform: rotate(615deg); }
}
.plate2 {  position: absolute;
    left: -10%;
    transform: rotate(32deg);
    top: 20em;
    width: 22em;
    /* animation: plate2-rotate 130s linear infinite; */
}

@keyframes plate2-rotate {
  from { transform: rotate(634deg); }
  to { transform: rotate(274deg); }
}
.after-food {position: relative;}
.plate3 {position: absolute; left: 11%; top: -24em; width: 22em; transform: rotate(10deg);
    animation: plate3-rotate 40s linear infinite;
}

@keyframes plate3-rotate {
  from { transform: rotate(10deg); }
  to { transform: rotate(370deg); }
}
.beer {position: absolute;       left: 62%;
    top: -13em; width: 21em; transform: rotate(16deg);
    animation: beer-rotate 50s linear infinite;
}

@keyframes beer-rotate {
  from { transform: rotate(16deg); }
  to { transform: rotate(376deg); }
}
.coffee {position: absolute; top: 4em; transform: rotate(201deg); left: -5em; width: 19em;}
.since {    margin: 0 auto 1em;
    padding-top: 7em;
    width: 13em;
    mix-blend-mode: screen;}
.logo-print {display: none;}
.onas {position: relative; padding-bottom: 1em; overflow: visible;}
.onas a {color: white;}
.onas .small-title {color: var(--c2);}
.flex {display: flex;}
.onas .col {padding-right: 10%;}
.onas .col h3 {transition: 0.2s all ease; position: relative;}
.onas .col:hover h3 {color: var(--c1); transform: scale(1.1); left: 5%;}
.sign {position: absolute; right: 4%; bottom: -6em; width: 25em;}
.ornament {position: absolute; z-index: 0; left: -25%; top: 10.2em; right: 0; width: 20%;}
.onas .flex {position: relative; z-index: 1;}

.gallery {padding-top: 8em;}
.gallery .square {width:24.25%; float:left; overflow: hidden; margin-right: 1%; height: 20em; margin-bottom: 1vw;}
.gallery .square img {width: 100%;}
.gallery .square:nth-child(4n) {margin-right: 0;}


/* .slot {float:left; overflow: hidden; margin-right: 1%; height: 20em; margin-bottom: 1vw;}
.slot img {width: 100%;}
.slot1 {width: 35%;}  .slot2 {width: 42%;}  .slot3 {width: 21%; margin-right: 0;}
.slot4 {width: 22%;}  .slot5 {width: 25%;} .slot6 {width: 25%;}  .slot7 {width: 25%; margin-right: 0;}
.slot8 {width: 26%;}  .slot9 {width: 26%;} .slot10 {width: 20%;}  .slot11 {width: 25%; margin-right: 0;} */

.opening-hours tr td:first-child {padding-right: 1em;}

.stale-menu {width:50%; margin-top: 2em;}
.stale-menu .beer, .napojak-page .beer {left:72%}


/* page o nas */
.page-onas .onas {padding: 5em 20%;}
.foto-history .banner {width: 100%;}
section.service .text1 {width: 33%; margin-bottom: 4.6em;}
.row-left-img, .row-right-img {display: flex; margin: 3em auto 7em;}
.row-left-img .col1 {width: 58%;}
.row-left-img .col1 img, .row-right-img .col1 img  {width: 100%;}
.row-left-img .col2 {width: 40%; padding-left: 10%; padding-top: 1.6em;}
.row-right-img .col1 {width: 58%;}
.row-right-img .col2 {width: 40%; padding-right: 11%; padding-top: 1.6em;}
.sign-onas {position: static; width: 20em;}

.foto-history {overflow: auto;}
.foto-history img {width: 49%; margin-right: 2%; float: left;}
.foto-history img:last-child {margin-right: 0;}

.pano {margin: 0 auto 2em;}
.page-onas .since {     margin: 0 auto -1em; padding-top: 2em;}

/* shop */
.shop {padding-top: 3em;}
.products {margin-top: 4em; max-width: 1300px;}
.products a {color: white;}
.product {width: 24%; float: left; margin-right: 1%;}
.product:hover img {transform: scale(1.1);}
.shop .img-cont { overflow: hidden; height: 23em; }
.shop .img-cont img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s ease ;}
.shop h2 {font-size: 1.4em; margin-top: 1em; font-weight: 500;}
.cena {color: var(--c1); font-weight: 600;}

/* shop single */
.product-single {overflow: auto; display: flex;}
.product-single .left {float: left; width: 60%;}
.product-single .left img {width: 100%; height: auto;}
.product-single .right {float: left; width: 40%; padding-left: 10%;}
.product-single h1 {font-size: 3em;}
.product-single .cena {font-size: 2em;}