/* NOTE: Dodaj loading="lazy" na sve <img> tagove u HTML za bolje performanse */


.menu_header {
  width: 100vw;
  height: 40vh;
  background-size: cover;
  background-position: center;
  background-attachment: scroll;
}


#dorucak_header { background-image: url('images/breakfast.webp'); }
#sendvic_header { background-image: url('images/sendvic_header.webp'); }
#predjelo_header { background-image: url('images/predjelo_header.webp'); }
#supe_header { background-image: url('images/supe_header.webp'); }
#gotova_header { background-image: url('images/gotovajela.webp'); }
#pizza_header { background-image: url('images/pizza_header.webp'); }
#vege_header { background-image: url('images/vege_header.webp'); }
#jela_od_ribe_header { background-image: url('images/ribe_header.webp'); }
#po_porudzbini_header { background-image: url('images/piletina_header.webp'); }
#piletina_header { background-image: url('images/piletina_header.webp'); }
#paste_i_rizota_header { background-image: url('images/pasta_header.webp'); }
#obrok_salate_header { background-image: url('images/salate.webp'); }
#salate_header { background-image: url('images/krastavac_header.webp'); }
#dodaci_header { background-image: url('images/predjelo_header.webp'); }
#slatke_header { background-image: url('images/palacinke_header.webp'); }
#deserti_header { background-image: url('images/dezert_header.webp'); }
#pice_header { background-image: url('images/pice_header.webp'); }

* {
box-sizing: border-box;
margin: 0;
padding: 0;
overflow-x: hidden;
text-decoration: none;
scroll-behavior: smooth;
}
html, body {
overflow-x: hidden;
width: 100%;
}
#preloader {
background: white url(images/loader.gif) no-repeat center center;
background-size: 8%;
height: 100%;
width: 100%;
position: fixed;
z-index: 100000000;
}
.header {
width: 100vw;
height: 8vh;
margin: 0;
padding: 0;
position: fixed;
z-index: 100000;
background: rgba(0, 0, 0, 0.4);
}
.logo_header {
width: 15vh;
float: left;
margin: 2.5vh 3vw;
}
.open {
display: block;
width: 30px;
height: 20px;
float: right;
margin: 3.5vh 5vw;
cursor: pointer;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
z-index: 50000;
overflow: hidden;
}
.open:hover div {
background: #C5492F;
}
svg {
transition-duration: 0.5s;
}
.close:hover svg {
fill: #C5492F;
}
.close {
display: none;
width: 25px;
height: 25px;
float: right;
margin: 0vh 5vw;
margin-top: 6vh;
cursor: pointer;
transition-duration: 0.5s;
transition-timing-function: ease-in-out;
overflow: hidden;
z-index: 5000000;
}
.one {
width: 25px;
height: 2px;
background: white;
transition-duration: 0.2s;
}
.two {
width: 25px;
height: 2px;
margin-top: 5px;
background: white;
transition-duration: 0.2s;
}
.navlinks {
z-index: 100000000;
overflow: hidden;
width: 0vw;
height: 100vh;
text-align: center;
transition-duration: 0.2s;
background: white;
position: fixed;
left: 0;
top: 0vh;
}
.navlinks li {
padding-top: 4vh;
}
.navlinks li a {
font-size: 1.5vh;
text-transform: uppercase;
color: black;
transition-duration: 0.2s;
font-family: 'Lora', serif;
}
.navlinks li a:hover {
color: #C5492F;
}
.navlinks_rezervisi {
width: 8vw;
line-height: 3.5vh;
overflow: hidden;
margin: 0 21vw;
height: 3.5vh;
font-size: 1.3vh;
border-bottom: none;
background: black;
color: white;
font-family: 'Lora', serif;
letter-spacing: 2px;
text-transform: uppercase;
transition-duration: 0.5s;
border-radius: 5px;
}
.navlinks_rezervisi:hover {
background: #C5492F;
}
.home {
width: 100vw;
height: 100vh;
background: url(images/fortuna_3.webp);
background-position: center;
background-size: cover;
background-attachment: fixed;
overflow: hidden;
}
.home h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
color: #C5492F;
text-align: center;
font-family: 'Playfair Display', serif;
overflow: hidden;
padding-top: 45vh;
}
.home h2 {
font-size: clamp(3rem, 8vw, 6rem);
color: white;
text-align: center;
padding-top: 2vh;
text-transform: uppercase;
letter-spacing: 1vw;
font-family: 'Lora', serif;
overflow: hidden;
}
.home h3 {
font-size: clamp(0.9rem, 1.5vw, 1.2rem);
text-align: center;
font-family: 'Lora', serif;
text-transform: uppercase;
color: #DEDEDE;
padding-bottom: 4vh;
}
.view_menu {
font-size: 1.5vh;
margin: 2vh auto;
text-align: center;
background: #C5492F;
letter-spacing: 2px;
color: white;
width: 16vw;
height: 8vh;
line-height: 8vh;
font-size: 1.6vh;
text-transform: uppercase;
font-weight: bold;
border-radius: 15px;
transition-duration: 0.5s;
font-family: 'Lora', serif;
}
.view_menu:hover {
background: #e75031;
color: white;
}
.home2 {
width: 100vw;
height: fit-content;
display: flex;
padding-bottom: 10vh;
}
.home2_part {
width: 50vw;
text-align: center;
overflow: hidden;
}
.home2 div h1 {
color: #C5492F;
font-size: 3.7vh;
font-family: 'Playfair Display', serif;
padding-top: 20vh;
padding-bottom: 2vh;
overflow: hidden;
padding-left: 5vw;
}
.home2 div h2 {
color: black;
font-size: 4.2vh;
text-transform: uppercase;
font-family: 'Lora', serif;
padding-left: 5vw;
overflow: hidden;
}
.home2 div p {
font-size: 2.5vh;
padding-left: 5vw;
padding-top: 3vh;
text-align: left;
font-family: 'Lora', serif;
}
.home2 div img {
width: 25vw;
margin-top: 15vh;
border-radius: 5px;
transition: transform .5s ease;
}
.home2 div img:hover{
transform: scale(1.05);
}
.our_story {
color: #383838;
text-align: center;
width: fit-content;
height: fit-content;
text-transform: uppercase;
padding: 1vh 2vw;
margin-left: 20vw;
margin-top: 5vh;
transition-duration: 0.5s;
font-family: 'Lora', serif;
text-decoration: none;
font-size: 2.2vh;
}
.our_story:hover {
color: #C5492F;
}
.about1 {
width: 100vw;
height: 40vh;
background: url(images/fortuna_3.webp);
background-size: cover;
background-position: center;
background-attachment: scroll;
text-align: center;
}
.about1 h1 {
font-size: 4vh;
text-align: center;
padding-top: 12vh;
font-family: 'Playfair Display', serif;
color: #C5492F;
}
.about1 h2 {
font-size: clamp(2rem, 5vw, 3.5rem);
color: white;
text-align: center;
padding-top: 2vh;
text-transform: uppercase;
letter-spacing: 1vw;
font-family: 'Lora', serif;
overflow: hidden;
}
.about2 {
background: white;
height: fit-content;
padding-bottom: 10vh;
display: flex;
}
.about2_part {
width: 25vw;
text-align: center;
float: left;
padding-top: 8vh;
overflow: hidden;
}
.about2_part img {
width: 19vw;
border-radius: 10px;
transition: transform .5s ease;
}
.about2_part img:hover{
transform: scale(1.05);
}
.about2_part h1 {
font-size: 3vh;
padding: 3vh 0;
font-family: 'Lora', serif;
}
.about2_part p {
font-size: 1.5vh;
font-family: 'Lora', serif;
text-align: center;
padding: 0 5vw;
overflow: hidden;
}
.about2_learnmore {
width: fit-content;
height: fit-content;
padding-left: 10vw;
padding-top: 3vh;
transition-duration: 0.5s;
font-size: 1.8vh;
}
.about2_learnmore:hover {
color: #C5492F;
}
.proslava {
width: 100vw;
height: fit-content;
background: #791f0d;
overflow: hidden;
}
.proslava_part {
clip-path: polygon(100% 0, 100% 77%, 75% 100%, 0 100%, 0 23%, 33% 0);
background: white;
width: 100vw;
height: fit-content;
}
.proslava_text {
width: 100vw;
float: left;
padding: 0vh 20vw;
padding-top: 20vh;
overflow: hidden;
}
.slideshow {
width: 100%;
padding: 5vh 0;
}
.container {
width: 60vw;
height: 45vh;
margin: 0 auto;
overflow: hidden;
border-radius: 8px;
box-shadow: -1px 5px 15px black;
}
.wrapper {
width: 200vw;
display: flex;
animation: slide 20s infinite;
}
.wrapper img {
width: 100%;
object-fit: cover;
}
@keyframes slide {
0% {
transform: translateX(0);
}
10% {
transform: translateX(-10%);
}
20% {
transform: translateX(-20%);
}
30% {
transform: translateX(-30%);
}
40% {
transform: translateX(-40%);
}
50% {
transform: translateX(-50%);
}
60% {
transform: translateX(-60%);
}
70% {
transform: translateX(-70%);
}
100% {
transform: translateX(0);
}
}
.proslava_text h1 {
color: black;
font-size: 5vh;
text-transform: uppercase;
font-family: 'Lora', serif;
}
.proslava_text p {
color: black;
font-size: 2.2vh;
margin-top: 2.5vh;
font-family: 'Lora', serif;
}
.proslava_link {
margin-top: 5vh;
width: 8vw;
height: 3.5vh;
font-size: 1.3vh;
text-align: center;
line-height: 3.5vh;
border-bottom: none;
background: black;
color: white;
font-family: 'Lora', serif;
letter-spacing: 1px;
text-transform: uppercase;
transition-duration: 0.5s;
border-radius: 8px;
}
.proslava_link:hover {
background: #C5492F;
}
.menu {
width: 100vw;
height: fit-content;
background: #DEDEDE;
font-family: 'Lora', serif;
}
.menu_section {
width: 100vw;
height: fit-content;
background: #DEDEDE;
}
.menu_header {
width: 100vw;
height: 40vh;
background: url(images/rucak.webp);
background-size: cover;
background-position: center;
background-attachment: scroll;
}

















.menu_header h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
color: white;
text-align: center;
padding-top: 15vh;
text-transform: uppercase;
letter-spacing: 1vw;
}
.menu_container {
width: 100vw;
height: max-content;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
padding-top: 5vh;
padding-bottom: 9vh;
}
.menu_row {
width: 45vw;
height: fit-content;
margin-bottom: 2vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}


.menu_img {
    width: 40%;
    overflow: hidden;

}
.menu_img img {
    overflow: hidden;
  width: auto;
  height: auto;
  max-width: 70%;
  max-height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
    transition: transform .5s ease;
}
.menu_img img:hover{
transform: scale(1.1);
}


.menu_text {
width: 60%;
text-align: left;
}
.menu_text h2 {
font-weight: bolder;
font-size: 2.2vh;
text-transform: none;
font-family: 'Lora', serif;
padding-top: 4.5vh;
}
.menu_text h3 {
font-weight: lighter;
color: gray;
font-size: 0.8rem;
font-family: 'Lora', serif;
text-transform: uppercase;
padding-bottom: 0.5vh;
}
.menu_container p {
font-weight: bolder;
color: #C5492F;
font-size: 1.6vh;
overflow: hidden;
font-family: 'Lora', serif;
}
#text2_pica h2 {
padding-top: 2vh;
}


.contact {
width: 100vw;
height: fit-content;
background: white;
}
.contact_header h1 {
color: #C5492F;
font-size: 3.5vh;
font-family: 'Inter', sans-serif;
padding-top: 12vh;
padding-bottom: 6vh;
text-align: center;
overflow: hidden;
}
.mapa {
width: 100vw;
height: 50vh;
overflow: hidden;
text-align: center;
}
.contact_info {
padding-top: 8vh;
width: 33vw;
float: left;
text-align: center;
height: 40vh;
}
.contact_info h1 {
font-family: 'Lora', serif;
}
.contact_info p {
font-size: 1.8vh;
color: gray;
margin-top: 3vh;
}
.reservation {
background: white;
width: 100vw;
height: 100vh;
z-index: 1000;
overflow: hidden;
}
.reservation_part {
width: 49vw;
float: left;
overflow: hidden;
text-align: center;
}
.reservation_part h1 {
color: #C5492F;
font-size: 3.5vh;
font-family: 'Inter', sans-serif;
padding-top: 12vh;
padding-bottom: 2vh;
overflow: hidden;
padding-left: 20vw;
}
.reservation_part h2 {
color: black;
font-size: 4vh;
text-transform: uppercase;
font-family: 'Lora', serif;
padding-left: 20vw;
padding-bottom: 5vh;
overflow: hidden;
}
.reservation_part img {
margin-top: 25vh;
width: 25vw;
border-radius: 15px;
transition: transform .5s ease;
}
.reservation_part img:hover{
transform: scale(1.05);
}
.fillin {
padding-left: 20vw;
}
.fillin h3 {
font-size: 1.7vh;
font-family: 'Lora', serif;
}
.fillin input {
border: none;
border-bottom: 1px solid black;
outline: none;
height: 3.5vh;
line-height: 3.5vh;
width: 15vw;
font-size: 1.3vh;
font-family: 'Lora', serif;
text-align: center;
margin-bottom: 4vh;
}
#submit {
border-bottom: none;
background: black;
color: white;
font-family: 'Lora', serif;
letter-spacing: 4px;
text-transform: uppercase;
transition-duration: 0.5s;
border-radius: 10px;
}
#submit:hover {
background: #C5492F;
}
.footer {
background: #1C1C1C;
width: 100vw;
height: fit-content;
text-align: center;
overflow: hidden;
padding-bottom: 3vh;
}
.footer img {
padding-top: 4vh;
}
.footer p {
padding-top: 4vh;
letter-spacing: 1px;
text-align: center;
color: white;
font-family: 'Lora', serif;
}
.footer h1 {
padding-top: 4vh;
letter-spacing: 1px;
text-align: center;
color: white;
text-transform: uppercase;
font-family: 'Lora', serif;
}
.nasa-prica_home {
width: 100vw;
height: 70vh;
background: url(images/fortuna_3.webp);
background-attachment: fixed;
background-size: cover;
background-position: center;
}
.back {
position: absolute;
margin: 5vh 5vw;
}
.nasa-prica_home h1 {
font-size: clamp(3rem, 8vw, 6rem);
color: white;
text-align: center;
font-family: 'Inter', sans-serif;
overflow: hidden;
padding-top: 35vh;
}
.opis {
height: fit-content;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 69%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 76%, rgba(251,251,251,1) 80%, rgba(236,236,236,1) 84%, rgba(208,208,208,1) 88%, rgba(187,187,187,1) 90%, rgba(144,144,144,1) 93%, rgba(92,92,92,1) 97%, rgba(64,64,64,1) 100%);
}
.opis p {
font-size: 1.8vh;
width: 60vw;
text-align: left;
margin-left: 6vw;
padding-top: 6vh;
text-align: center;
font-family: 'Lora', serif;
}
.opis img {
width: 50vw;
overflow: hidden;
margin: 0 10vw;
}
.vinska_karta {
height: 80vh;
width: 100vw;
background: #DEDEDE;
}
.vinska_karta h2 {
text-align: center;
color: #C5492F;
font-size: clamp(2rem, 5vw, 3.5rem);
margin-top: 5vh;
margin-bottom: 5vh;
font-family: 'Inter', sans-serif;
}
#vino_part1 {
width: 25vw;
float: left;
text-align: center;
}
.vino_part {
width: 33vw;
float: left;
text-align: center;
}
#vino_part2 {
width: 50vw;
}
.vino_part h1 {
font-size: 3.5vh;
margin-top: 5vh;
font-family: 'Inter', sans-serif;
}
.vino_part p {
font-family: 'Lora', serif;
font-size: 1.4vh;
text-transform: uppercase;
margin-top: 1vh;
}
.vino_part img {
width: 8vw;
margin-top: 3vh;
}
@media (max-width: 1000px) {
#preloader {
background: white url(images/loader.gif) no-repeat center center;
background-size: 25%;
height: 100%;
width: 100%;
position: fixed;
z-index: 100000000;
}
.navlinks {
z-index: 100000000;
overflow: hidden;
width: 0vw;
height: 100vh;
text-align: center;
transition-duration: 0.2s;
background: white;
position: fixed;
left: 0;
top: 0vh;
}
.navlinks li {
padding-top: 4vh;
}
.navlinks li a {
font-size: 1.5vh;
text-transform: uppercase;
color: black;
transition-duration: 0.2s;
font-family: 'Lora', serif;
}
.navlinks li a:hover {
color: #C5492F;
}
.navlinks_rezervisi {
width: 25vw;
line-height: 3.5vh;
margin: 0 12vw;
height: 3.5vh;
font-size: 1vh;
border-bottom: none;
background: black;
color: white;
font-family: 'Lora', serif;
letter-spacing: 2px;
text-transform: uppercase;
transition-duration: 0.5s;
border-radius: 5px;
}
.navlinks_rezervisi:hover {
background: #C5492F;
}
.home {
width: 100vw;
height: 100vh;
background: url(images/fortuna_3.webp);
background-position: center;
background-size: cover;
background-attachment: scroll;
overflow: hidden;
}
.home h1 {
font-size: 4vh;
text-align: center;
overflow: hidden;
padding-top: 45vh;
}
.home h2 {
font-size: 7vh;
color: white;
text-align: center;
padding-top: 2vh;
text-transform: uppercase;
letter-spacing: 1vw;
font-family: 'Lora', serif;
overflow: hidden;
}
.view_menu {
margin: 4vh auto;
text-align: center;
background: #C5492F;
color: white;
width: 70vw;
height: 7vh;
line-height: 7vh;
font-size: 1.6vh;
text-transform: uppercase;
font-weight: bold;
border-radius: 15px;
transition-duration: 0.5s;
font-family: 'Lora', serif;
}
.home2 {
width: 100vw;
height: fit-content;
display: block;
overflow: hidden;
}
.home2_part {
width: 100vw;
text-align: center;
overflow: hidden;
}
.home2 div h1 {
color: #C5492F;
font-size: 3.5vh;
font-family: 'Playfair Display', serif;
padding-top: 8vh;
padding-bottom: 2vh;
text-align: center;
overflow: hidden;
padding-left: 0;
}
.home2 div h2 {
color: black;
font-size: 4.5vh;
text-transform: uppercase;
font-family: 'Lora', serif;
padding-left: 0vw;
text-align: center;
overflow: hidden;
}
.home2 div p {
font-size: 3vh;
word-spacing: 0;
letter-spacing: 0;
padding: 0 4vw;
padding-top: 4vh;
text-align: center;
font-family: 'Lora', serif;
}
.home2 div img {
width: 90vw;
margin-top: 10vh;
border-radius: 10px;
transition: transform .5s ease;
border: 2px solid #C5492F;
}
.home2 div img:hover{
transform: scale(1.05);
}
.our_story {
color: #383838;
text-align: center;
width: fit-content;
height: fit-content;
text-transform: uppercase;
padding: 1vh 2vw;
margin-left: 35vw;
margin-top: 5vh;
transition-duration: 0.5s;
font-family: 'Lora', serif;
text-decoration: none;
}
.our_story:hover {
color: #C5492F;
}
.about1 {
width: 100vw;
height: 40vh;
background: url(images/fortuna_3.webp);
background-size: cover;
background-position: center;
background-attachment: scroll;
}
.about1 h1 {
font-size: 4vh;
text-align: center;
padding-top: 12vh;
font-family: 'Playfair Display', serif;
color: #C5492F;
}
.about1 h2 {
font-size: clamp(2rem, 5vw, 3.5rem);
color: white;
text-align: center;
padding-top: 2vh;
text-transform: uppercase;
letter-spacing: 1vw;
font-family: 'Lora', serif;
overflow: hidden;
}
.about2 {
background: white;
height: fit-content;
overflow: hidden;
display: block;
}
.about2_part {
width: 100vw;
text-align: center;
padding-top: 8vh;
overflow: hidden;
}
.about2_part img {
width: 90vw;
border-radius: 10px;
transition: transform .5s ease;
}
.about2_part img:hover{
transform: scale(1.05);
}
.about2_part h1 {
font-size: 4vh;
padding: 3vh 0;
text-align: left;
padding-left: 6vw;
font-family: 'Lora', serif;
}
.about2_part p {
font-size: 2.2vh;
font-family: 'Lora', serif;
text-align: center;
padding: 0 6vw;
text-align: left;
overflow: hidden;
}
.about2_learnmore {
width: fit-content;
height: fit-content;
padding-left: 6vw;
text-transform: uppercase;
padding-top: 3vh;
transition-duration: 0.5s;
overflow: hidden;
}
.about2_learnmore:hover {
color: #C5492F;
}
.proslava {
width: 100vw;
height: fit-content;
background: #791f0d;
overflow: hidden;
}
.proslava_part {
clip-path: polygon(100% 0, 100% 100%, 100% 100%, 0 100%, 0 23%, 33% 0);
background: white;
width: 100vw;
height: fit-content;
}
.slideshow {
width: 100vw;
height: 40vh;
padding-bottom: 0;
overflow: hidden;
}
.container{
width: 500vw;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 0px;
box-shadow: none;
}
.wrapper{
width: 100%;
display: flex;
animation: slide 30s infinite;
}
.wrapper img {
width: 100%;
}
.proslava_text {
width: 100vw;
float: left;
padding: 0vh 10vw;
padding-top: 20vh;
overflow: hidden;
}
.proslava_img {
width: 100vw;
float: left;
overflow: hidden;
margin: 0;
padding: 5vh 0vw;
text-align: center;
}
.proslava_img img {
width: 100vw;
}
.proslava_text h1 {
color: black;
font-size: 4.2vh;
text-transform: uppercase;
font-family: 'Lora', serif;
}
.proslava_text p {
color: black;
font-size: 2.3vh;
margin-top: 2.5vh;
font-family: 'Lora', serif;
}
.proslava_link {
overflow: hidden;
margin-top: 5vh;
width: 35vw;
height: 3.5vh;
line-height: 3.5vh;
font-size: 1.3vh;
text-align: center;
border-bottom: none;
background: black;
color: white;
font-family: 'Lora', serif;
letter-spacing: 1px;
text-transform: uppercase;
transition-duration: 0.5s;
border-radius: 5px;
}
.proslava_link:hover {
background: #C5492F;
}
.menu {
width: 100vw;
height: fit-content;
background: #DEDEDE;
}
.menu_header {
width: 100vw;
height: 40vh;
background: url(images/menu.webp);
background-size: cover;
background-position: center;
background-attachment: scroll;
overflow: hidden;
}
.menu_header h1 {
font-size: 4vh;
color: white;
text-align: center;
padding-top: 15vh;
text-transform: uppercase;
letter-spacing: 1vw;
overflow: hidden;
font-family: 'Lora', serif;
}
.rucak {
width: 100vw;
height: fit-content;
background: #DEDEDE;
}
.rucak_header {
width: 100vw;
height: 40vh;
background: url(images/rucak.webp);
background-size: cover;
background-position: center;
background-attachment: scroll;
margin-top: 4vh;
}
.rucak_header h1 {
font-size: 4vh;
color: white;
text-align: center;
padding-top: 15vh;
text-transform: uppercase;
letter-spacing: 1vw;
font-family: 'Lora', serif;
}
.menu_container {
width: 100vw;
height: max-content;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap;
padding-top: 5vh;
padding-bottom: 9vh;
}
.menu_row {
width: 100vw;
margin-bottom: 2vh;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
}

.menu_text {
width: 40%;
text-align: left;
}
.menu_container img {
width: 90%;
border-radius: 10px;
transition: transform .5s ease;
margin-left: 0vw;
}
.menu_container img:hover{
transform: scale(1.1);
}
.menu_text h2 {
font-weight: bolder;
font-size: 1.5rem;
text-transform: none;
font-family: 'Lora', serif;
padding-top: 4.5vh;
}
.menu_text h3 {
font-weight: lighter;
color: gray;
font-size: 1rem;
font-family: 'Lora', serif;
text-transform: uppercase;
padding-bottom: 0.5vh;
}
.menu_text p {
font-weight: bolder;
color: #C5492F;
font-size: 1.5rem;
font-family: 'Lora', serif;
}
.contact {
width: 100vw;
height: fit-content;
background: white;
}
.contact_header h1 {
color: #C5492F;
font-size: 3.5vh;
font-family: 'Inter', sans-serif;
padding-top: 6vh;
padding-bottom: 5vh;
overflow: hidden;
padding-left: 0vw;
}
.mapa {
width: 100vw;
height: 60vh;
overflow: inherit;
padding: 0vh 0vw;
}
.mapa iframe {
width: 450px;
}
.contact_info {
padding-top: 0vh;
width: 100vw;
float: left;
text-align: center;
height: 28vh;
}
.contact_info h1 {
font-family: 'Lora', serif;
}
.contact_info p {
font-size: 1.7vh;
color: gray;
margin-top: 3vh;
}
.reservation {
background: white;
width: 100vw;
height: fit-content;
z-index: 1000;
overflow: hidden;
}
.reservation_part {
width: 100vw;
float: left;
overflow: hidden;
text-align: center;
}
.reservation_part h1 {
color: #C5492F;
font-size: 3.5vh;
font-family: 'Inter', sans-serif;
padding-top: 12vh;
padding-bottom: 2vh;
overflow: hidden;
padding-left: 0vw;
}
.reservation_part h2 {
color: black;
font-size: 4vh;
text-transform: uppercase;
font-family: 'Lora', serif;
padding-left: 0vw;
padding-bottom: 5vh;
overflow: hidden;
}
.reservation_part img {
margin-top: 0vh;
margin-top: 8vh;
margin-bottom: 8vh;
width: 90vw;
border-radius: 15px;
transition: transform .5s ease;
}
.reservation_part img:hover{
transform: scale(1.05);
}
.fillin {
padding-left: 0vw;
}
.fillin h3 {
font-size: 1.5vh;
font-family: 'Lora', serif;
}
.fillin input {
border: none;
border-bottom: 1px solid black;
outline: none;
padding: 0.5vh 0.7vw;
width: 55vw;
font-size: 1.3vh;
font-family: 'Lora', serif;
text-align: center;
margin-bottom: 4vh;
}
#submit {
width: 35vw;
overflow: hidden;
height: 3.5vh;
line-height: 3.5vh;
border-bottom: none;
background: black;
color: white;
font-family: 'Lora', serif;
letter-spacing: 4px;
text-transform: uppercase;
transition-duration: 0.5s;
border-radius: 10px;
}
#submit:hover {
background: #C5492F;
}
.footer {
background: #1C1C1C;
width: 100vw;
height: 40vh;
text-align: center;
overflow: hidden;
}
.footer img {
width: 35vw;
padding-top: 4vh;
}
.footer p {
font-size: 1vh;
padding-top: 4vh;
letter-spacing: 1px;
text-align: center;
color: white;
font-family: 'Lora', serif;
}
.footer h1 {
font-size: clamp(0.9rem, 1.5vw, 1.2rem);
padding-top: 4vh;
letter-spacing: 1px;
text-align: center;
color: white;
text-transform: uppercase;
font-family: 'Lora', serif;
}
.nasa-prica_home {
width: 100vw;
height: 70vh;
background: url(images/fortuna_3.webp);
background-attachment: scroll;
background-size: cover;
background-position: center;
overflow: hidden;
}
.nasa-prica_home h1 {
font-size: 12vh;
color: white;
text-align: center;
font-family: 'Inter', sans-serif;
overflow: hidden;
padding-top: 35vh;
}
.opis {
height: fit-content;
overflow: hidden;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 65%, rgba(255,255,255,1) 69%, rgba(255,255,255,1) 72%, rgba(255,255,255,1) 76%, rgba(251,251,251,1) 80%, rgba(236,236,236,1) 84%, rgba(208,208,208,1) 88%, rgba(187,187,187,1) 90%, rgba(144,144,144,1) 93%, rgba(92,92,92,1) 97%, rgba(64,64,64,1) 100%);
}
.opis img {
width: 100vw;
overflow: hidden;
margin: 0 0vw;
}
.opis p {
font-size: 2.2vh;
width: 100vw;
text-align: left;
margin-left: 0vw;
padding: 0 4vw;
padding-top: 4vh;
font-family: 'Lora', serif;
}
#nasa-prica-linija {
width: 80vw;
margin-left: 10vw;
}
.vinska_karta {
height: fit-content;
padding-bottom: 5vh;
width: 100vw;
background: #DEDEDE;
}
.vinska_karta h2 {
text-align: center;
color: #C5492F;
font-size: clamp(2rem, 5vw, 3.5rem);
margin-top: 5vh;
margin-bottom: 5vh;
}
.vino_part {
width: 100vw;
float: left;
text-align: center;
}
#vino_part1 {
width: 100vw;
float: left;
text-align: center;
}
#vino_part2 {
width: 100vw;
}
.vino_part h1 {
font-size: 4vh;
margin-top: 5vh;
}
.vino_part p {
font-family: 'Lora', serif;
font-size: 1.3vh;
text-transform: uppercase;
margin-top: 1vh;
}
.vino_part img {
margin-top: 3vh;
}
}
@media (max-width: 768px) {
.home h1 {
font-size: 2rem;
}
.home h2 {
font-size: 4rem;
}
.home h1 {
font-size: 2rem;
}
.menu_text h2 {
padding-top: 0;
}
.menu_row {
flex-direction: column;
width: 100vw;

}
.menu_img {
    width: 100%;

}
.menu_img img {
    overflow: hidden;
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 100%;
  margin: 0 auto;
}
.menu_text {
    text-align: center;
    width: 90%;
}
.view_menu {
width: 80vw;
height: 10vh;
line-height: 10vh;
font-size: 1.5rem;
}
.navlinks_rezervisi {
width: 60vw;
font-size: 1rem;
}
.about2_part, .reservation_part, .contact_info {
width: 100% !important;
float: none;
}
}
@media (max-width: 480px) {
.home h1 {
font-size: 2rem;
}
.home h2 {
font-size: 4rem;
}
.home h1 {
font-size: 2rem;
}
.menu_text h2 {
font-size: 1.5rem;
padding-top: 0px;
}
.menu_text h3{
font-size: 0.8rem;
}
.menu_text p{
font-size: 1.5rem;
}
.menu_text {
width: 90%;
text-align: center;
}
.menu_row {
width: 100%;
flex-direction: column;
}
.view_menu {
width: 90vw;
}
}