html, body {width:100%; height:100%; margin:0; padding:0; font-family:"Montserrat", sans-serif; color:#333}
a {color:inherit; text-decoration:none; transition:.4s}
a:hover {color:#00a6ce}

.headings {  width: 100%;color: #333; text-align: center; }
.headings h1 { font-size: 14px; font-weight: 600; margin: 0 0 4px; text-transform: uppercase;}
.headings h2 { font-size: 12px; font-weight: 400; margin: 0}

.font-Cormorant {font-family: "Cormorant", serif;}
.font-Reenie-Beanie {font-family: "Reenie Beanie", cursive;}

.cookie-btn-wrapper{ position: fixed; right:20px; bottom: 15px; color: #333; z-index: 999}
.cookie-btn-wrapper a{ font-size: 12px; color: #333; filter: brightness(0) invert(1); }

.bg { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; overflow: hidden; opacity: 1}
.bg img {object-fit: cover; object-position: center; width: 100%; height: 100%;}

.bg-marquee {position:fixed; inset:0; z-index:0; display:flex; align-items:center; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);}
.box {position:relative; z-index:2;}
.bg-marquee__inner {display:flex; width:calc(var(--group-width, 100vw) * 2); align-items:center; animation-name:marquee; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform;}
.bg-marquee__group {display:flex; align-items:center; justify-content:center; min-width:var(--group-width, 20vw); padding:0 4vw; box-sizing:border-box;}
.bg-marquee__item {display:inline-block; white-space:nowrap; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(255,255,255, .6); font-size:20vh; line-height:0.85; -webkit-font-smoothing:antialiased; pointer-events:none; user-select:none; opacity:0.45; mix-blend-mode:normal;}

@keyframes marquee {
from {transform:translateX(0);}
to {transform:translateX(-50%);}
}

@media (prefers-reduced-motion: reduce) {
.bg-marquee__inner {animation:none !important; transform:translateX(0);}
.bg-marquee__item {transition:none;}
}

@media (max-width: 600px) {
.bg-marquee__item {font-size:min(120vh, 140vw); letter-spacing:0.04em;}
}

.box {display:flex; align-items:center; justify-content:center; width:100%; height:100%}
.content {width:300px; text-align:center;background-color: #fff; padding: 60px 35px; border-radius: 4px; box-shadow: 0 0 50px rgba(50, 50, 50, .4);}
.logo {max-width:100%; height:auto; display:block; margin:0 auto 6px; opacity:0; transform:translateY(8px) scale(.995); transition:opacity 1.7s ease, transform 1.7s ease}
.info {margin-top:20px; opacity:0; transform:translateY(8px); transition:opacity 1.7s ease, transform 1.7s ease}
.content.is-visible .logo {opacity:1; transform:none; transition-delay:0s}
.content.is-visible .info {opacity:1; transform:none; transition-delay:.75s}

@media (prefers-reduced-motion: reduce) {
.logo, .info {transition:none!important; opacity:1!important; transform:none!important}
}
.btn-prenota {background-color: #00a6ce; color: #fff; padding:8px 15px; border-radius: 5px; font-size:34px;}
.btn-prenota:hover {background-color: #f0d283; color: #333; }

@media (max-width: 600px) {
    .bg { position: relative; height: 220px; }
    .content {width: 85%; height:inherit; margin-bottom: 100px; padding: 30px 10px 30px 10px; border-radius: 0px;box-shadow: 0 0 30px rgba(50, 50, 50, .2);}
    .info { padding: 0 40px;}
    .cookie-btn-wrapper a{  filter: none; }
}

 
@media screen and (min-width: 700px) and (max-height: 700px) {
    .box {align-items: anchor-center;height: auto;}
}