/* ! Style Computer*/

html, body {overflow-x: hidden;}

body { 
    position: relative;
    margin:0;
    padding:0;
    width: 100vw;
    display: grid;
    font-family: "Outfit", sans-serif; 
    background-color: var(--_bg);
    scroll-behavior: smooth;
}

.big-text {font-size: clamp(30px, calc(15.455px + 4.545vw), 70px);}
.med-text {font-size: clamp(20px, calc(12.727px + 2.273vw), 40px); font-weight: 300;}
.intro-text {font-weight: 400; text-transform: uppercase; font-size: 16px; margin-bottom:2px;}

a {text-decoration: none;}

body::-webkit-scrollbar {display:none;}

h1, h2, h3, h4, h5{
    text-transform: uppercase; 
}

h1 {
    font-size: clamp(30px, calc(15.455px + 4.545vw), 70px);
    font-weight: 900;  
}

h2 {
    font-size: clamp(25px, calc(2.143px + 2.976vw), 45px);
    font-weight: bold;
}

h3 {
    font-size: clamp(20px, calc(1.972px + 2.294vw), 35px);
    font-weight: 600;
   }



strong {font-weight: bold;}

:root {
    --_bg: #f8f5ef;
    --_tx: #1b1b1b;
    --_ve: #9ad301;
    --_ve2:#739e01;
    --_ar: #ff9800;
    --_ar2:#FFC107;
    --_bl: #5771f6;
    --_ro: #ff1100;

}

/* ##### HEADER #################################*/

.header {
    width: 100%;
    top: 0; 
    left: 0;
    padding: 30px;
    display: flex;
    position: absolute;
    justify-content: space-between;
    z-index: 2;
}

img.immagine-logo {width: 130px;}

#ham-menu {display: none;}

.menu {
    width: 100%;
    opacity: 100%;
    justify-content: center;
    text-align: center;
}

.menu li {display: inline-block;}

.menu li a {
    color: white;
    padding: 15px clamp(15px, calc(-20.556px + 4.63vw), 35px);
    display: block;
    text-transform: uppercase;
    opacity: 100%;
    font-size: clamp(13px, calc(-0.667px + 1.389vw), 16px);
    font-family: "Outfit", sans-serif;
}

.menu li a:hover {
    color: var(--_tx)
}

/* ##### HERO ######################################*/

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 60px;
    color: white;
    background: #000000;
    background: linear-gradient(0deg, rgb(0 0 0 / 30%) 30%, var(--_ar) 100%), url(foto-pesche.png) no-repeat center center;
    background-size: cover;
    width: 100%; 
    height:100vh;
    padding: 100px;
    align-items: center;
    align-content: center;
    position:relative;
    z-index: 0;
}

.hero-content {
    display: flex;
    gap: 20px;
    align-content: center; 
    align-items: center;
}

.data {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    border: 3px solid white; 
    border-radius: 0px 40px ;
    height: 100%;
    width: fit-content;
    text-transform: uppercase;
    font-weight: 300;
    padding: 10px 30px;
    gap: 4px;
}

.giorni {
    display:grid;
}

.trat {opacity:0.5;}
.data span {width:70px; height:2.5px; background:white; margin:5px;}


.vl2 {display: none;}
.gg {font-size: clamp(40px, calc(11.933px + 3.717vw), 50px); font-weight: 600;}
.mm {font-size: clamp(20px, calc(5.967px + 1.859vw), 25px); font-weight: 400;}

.vl {

    border-left: 3px solid white;
    height: 100%;
  
}



.titolo {
    font-weight: 600; 
    font-style: normal; 
    text-transform: uppercase;
    font-size: clamp(30px, calc(15.455px + 4.545vw), 70px)    
}

.sottotitolo {
    font-size: clamp(20px, calc(12.727px + 2.273vw), 40px); 
    font-weight: 200; 
    margin-top: 5px;
    font-weight: 400;    
}

.spacer{
    width: 100%;
    height: 8em;
    position: absolute;
    left:0;
    bottom: 0;
    transform: translateY(50%);
    z-index:1;
}

.volantino {
    background: radial-gradient(circle,rgba(119,179,29,1) 0%,rgba(154,211,66,1) 100%);
    text-align: center;
    text-transform: uppercase;
    width: fit-content;
    color: white;
    font-size: 20px;
    padding: 15px 30px;
    border-radius: 40px 0px;
    box-shadow: 0px 5px 0px var(--_ve2);
}

.volantino:hover {
    transform: translate(0px, 5px);
    box-shadow: none;
}



/* #######  PAGE1  #################################*/

.page1 {
    background: var(--_bg);
    width: 100%;
    padding: 90px 0px 25px;
}

.page1-content {
    --r: 35px; /* radius of circles */
    padding: calc(1.5*var(--r));
    mask:    
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
    background: #ffdab970;
    height: auto;
    margin: 50px;
    display: grid;
    grid-template-columns: 30% 70%;
    align-self: center;
    align-items: center;
    gap: 15px;
}

.cornici {
    grid-column: 1;
    width: 100%;
}

.scritte{
    grid-column: 2;
    padding: 0px clamp(0px, calc(-123.077px + 12.019vw), 50px);
    margin: 0 auto;
    text-align: left;
}

.scritte > h2 {
    color: var(--_ro);
    /* removed: Safari unsupported text-box */
    margin-bottom: 20px;
}

.scritte  p {
    font-size: clamp(1.00rem, calc(0.429rem + 1.190vw), 1.50rem);
    color: #2e2929;
    line-height: 1.2;
    margin-bottom: 10px;
}

.lt p {margin-bottom: 0px;}

/*##### PAGE2 ######################################*/

.page2 {
    background: var(--_bg);
    padding: 25px 30px; 
    align-content: center;    
}

.page2-cont {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    grid-template-rows: 1fr;
    gap: 15px;
    height: max-content;
    align-items: center;    
}

.page2 h2 { 
    color: var(--_ve2);
    font-size: clamp(25px, calc(2.143px + 2.976vw), 45px);
    text-transform: uppercase;
    font-weight: 900;
    text-align: center;
    margin-bottom: 40px;  
}

.page2 h3 {
    --r: 20px;
    padding: 10px 60px;
    clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
    background: var(--_ar); 
 
    width: fit-content;
    color: whitesmoke;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 50px;
    
}

.sez {
    --r: 20%; 
    --_r: clamp(0%,var(--r)/2,25%);
    --_v: calc(var(--_r)*(1 - sqrt(2)/4));
    --_p: calc(var(--_v) - var(--_r)/2);
    clip-path: shape( from var(--_v) var(--_p), curve to 50% 0 with var(--_r) 0, curve to calc(100% - var(--_v)) var(--_p) with calc(100% - var(--_r)) 0, curve to calc(100% - var(--_p)) var(--_v) with calc(100% - 2*var(--_p)) calc(2*var(--_p)), curve to 100% 50% with 100% var(--_r), curve to calc(100% - var(--_p)) calc(100% - var(--_v)) with 100% calc(100% - var(--_r)), curve to calc(100% - var(--_v)) calc(100% - var(--_p)) with calc(100% - 2*var(--_p)) calc(100% - 2*var(--_p)), curve to 50% 100% with calc(100% - var(--_r)) 100%, curve to var(--_v) calc(100% - var(--_p)) with var(--_r) 100%, curve to var(--_p) calc(100% - var(--_v)) with calc(2*var(--_p)) calc(100% - 2*var(--_p)), curve to 0 50% with 0 calc(100% - var(--_r)), curve to var(--_p) var(--_v) with 0 var(--_r), curve to var(--_v) var(--_p) with calc(2*var(--_p)) calc(2*var(--_p)));
    
    display: flex;
    flex-direction: column;
    padding: clamp(16px, calc(-23.294px + 5.204vw), 30px);
    text-align: center;
    text-wrap: balance;
    align-items: center; 
    height: 100%;
    gap: 25px;
    border-radius: 30px;
    z-index: 0;
 
}

.sez img {
    --r: 20%; 
    --_r: clamp(0%,var(--r)/2,25%);
    --_v: calc(var(--_r)*(1 - sqrt(2)/4));
    --_p: calc(var(--_v) - var(--_r)/2);
    clip-path: shape( from var(--_v) var(--_p), curve to 50% 0 with var(--_r) 0, curve to calc(100% - var(--_v)) var(--_p) with calc(100% - var(--_r)) 0, curve to calc(100% - var(--_p)) var(--_v) with calc(100% - 2*var(--_p)) calc(2*var(--_p)), curve to 100% 50% with 100% var(--_r), curve to calc(100% - var(--_p)) calc(100% - var(--_v)) with 100% calc(100% - var(--_r)), curve to calc(100% - var(--_v)) calc(100% - var(--_p)) with calc(100% - 2*var(--_p)) calc(100% - 2*var(--_p)), curve to 50% 100% with calc(100% - var(--_r)) 100%, curve to var(--_v) calc(100% - var(--_p)) with var(--_r) 100%, curve to var(--_p) calc(100% - var(--_v)) with calc(2*var(--_p)) calc(100% - 2*var(--_p)), curve to 0 50% with 0 calc(100% - var(--_r)), curve to var(--_p) var(--_v) with 0 var(--_r), curve to var(--_v) var(--_p) with calc(2*var(--_p)) calc(2*var(--_p)));  
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 30px;
}

.sez video {
    --r: 20%; 
    --_r: clamp(0%,var(--r)/2,25%);
    --_v: calc(var(--_r)*(1 - sqrt(2)/4));
    --_p: calc(var(--_v) - var(--_r)/2);
    clip-path: shape( from var(--_v) var(--_p), curve to 50% 0 with var(--_r) 0, curve to calc(100% - var(--_v)) var(--_p) with calc(100% - var(--_r)) 0, curve to calc(100% - var(--_p)) var(--_v) with calc(100% - 2*var(--_p)) calc(2*var(--_p)), curve to 100% 50% with 100% var(--_r), curve to calc(100% - var(--_p)) calc(100% - var(--_v)) with 100% calc(100% - var(--_r)), curve to calc(100% - var(--_v)) calc(100% - var(--_p)) with calc(100% - 2*var(--_p)) calc(100% - 2*var(--_p)), curve to 50% 100% with calc(100% - var(--_r)) 100%, curve to var(--_v) calc(100% - var(--_p)) with var(--_r) 100%, curve to var(--_p) calc(100% - var(--_v)) with calc(2*var(--_p)) calc(100% - 2*var(--_p)), curve to 0 50% with 0 calc(100% - var(--_r)), curve to var(--_p) var(--_v) with 0 var(--_r), curve to var(--_v) var(--_p) with calc(2*var(--_p)) calc(2*var(--_p)));  
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 30px;
}

.tx {
    display: flex;
    flex-direction: column;
    gap:10px;
}

.page2 h4 {
    font-size: clamp(20px, calc(5.967px + 1.859vw), 25px);
    font-weight: 100;
    text-transform: uppercase;   
}

.page2 p {
    font-size: clamp(1.00rem, calc(0.700rem + 0.612vw), 1.25rem);    
    line-height: clamp(20px, calc(5.967px + 1.859vw), 25px);
    border-bottom-right-radius: 40px;
    border-bottom-left-radius: 0px;
}

.cuc{
    color: #2121bc;
    background: #5771f629; 
    grid-column: 2;
}

.pan{
    color: brown;
    background: #ff110029;
    grid-column: 1;
}   

.bar {
    color: #4CAF50;
    background: #9ad30129; 
    grid-column: 3;
    
    /* color:#dd8400;
    background: #ff980029;*/

}

.cta {
    color: white;
    background: #5771F6;
    background: radial-gradient(circle, rgb(111 132 240) 0%, rgb(41 67 194) 100%);
    text-align: center;
    text-transform: uppercase;
    padding: 15px 30px;
    border-radius: 40px 0px;
    box-shadow: 0px 5px 0px var(--_bl);
}

.cta:hover {
    transform: translate(0px, 5px);
    box-shadow: none;
}

/* ##### PAGE3 #####################################*/
    
.page3 {
 
    max-width:100vw; 
    padding: 60px 0px;
    background-color: #000000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='88' height='24' viewBox='0 0 88 24'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='autumn' fill='%23404040' fill-opacity='0.34'%3E%3Cpath d='M10 0l30 15 2 1V2.18A10 10 0 0 0 41.76 0H39.7a8 8 0 0 1 .3 2.18v10.58L14.47 0H10zm31.76 24a10 10 0 0 0-5.29-6.76L4 1 2 0v13.82a10 10 0 0 0 5.53 8.94L10 24h4.47l-6.05-3.02A8 8 0 0 1 4 13.82V3.24l31.58 15.78A8 8 0 0 1 39.7 24h2.06zM78 24l2.47-1.24A10 10 0 0 0 86 13.82V0l-2 1-32.47 16.24A10 10 0 0 0 46.24 24h2.06a8 8 0 0 1 4.12-4.98L84 3.24v10.58a8 8 0 0 1-4.42 7.16L73.53 24H78zm0-24L48 15l-2 1V2.18A10 10 0 0 1 46.24 0h2.06a8 8 0 0 0-.3 2.18v10.58L73.53 0H78z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.page3-content{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.testata {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.luci {
    height: 20px;
    width: 100%;
    background:
    radial-gradient(circle, white 45%, transparent 50%) center / 30px 20px repeat-x;
    filter: drop-shadow(0 0 9px white);
}

.banner {
    font-family: "Outfit", sans-serif;
    text-transform: uppercase;
    font-size: clamp(30px, calc(13.034px + 2.247vw), 40px);
    font-weight:900;
    letter-spacing: 30%;
    color:#ff3d00;
    width:100%;
    background-color: #ffffff;
    background-size: 22px 22px;
    background-image:  repeating-linear-gradient(0deg, #9e9e9e7a, #9e9e9e7a 5px, #ffffff 5px, #ffffff);  
    padding:12px;
    border: 20px ridge var(--_ar2);
    border-left: none;
    border-right: none;
    text-align:center;
}

.carosello {
    width: 100%;
}

.eventi {
    display: flex;
    gap: 10px;
    width: max-content;

    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

.spett {
    flex: 0 0 250px;
    height: 350px;
    background: #8BC34A;
    border-radius: 10px;
    display: grid;
    place-items: center;
    box-shadow: 0 0 20px #ffeb3b47;
}

.sab1 {
    background: url(sab1.png) no-repeat center center;
    background-size: cover;
}

.dom2 {
    background: url(dom2.png) no-repeat center center;
    background-size: cover;
}

.lun3 {
    background: url(lun3.png) no-repeat center center;
    background-size: cover;
}

.mar4 {
    background: url(mar4.png) no-repeat center center;
    background-size: cover;
}

.mer5 {
    background: url(mer5.png) no-repeat center center;
    background-size: cover;

}

.gio6 {
    background: url(gio6.png) no-repeat bottom center;
    background-size: cover;
}

.ven7 {
    background: url(ven7.png) no-repeat center center;
    background-size: cover;
}

.sab8 {
    background: url(sab8.png) no-repeat center center;
    background-size: cover;
}

.p2-1{
    display:flex;
    align-items:center;
    align-self: center;
    gap: 80px;
} 

.p2 {
    color: white; 
    text-align: center;
    text-wrap:balance;
    width: 500px;
    font-size: clamp(1.56rem, calc(1.205rem + 0.744vw), 1.88rem);
    font-weight: 600;
    text-transform: uppercase;
    filter: drop-shadow(0px 0px 4px white);
}

.ticket {
    display: flex; 
    position: relative;
    justify-content: center;
}

.ticket:hover{
    transform: rotate(5deg);
    cursor:pointer;
}

.rett{
    display: flex;
    background-color: #FFC107;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='18' viewBox='0 0 100 18'%3E%3Cpath fill='%23c18000' fill-opacity='0.16' d='M61.82 18c3.47-1.45 6.86-3.78 11.3-7.34C78 6.76 80.34 5.1 83.87 3.42 88.56 1.16 93.75 0 100 0v6.16C98.76 6.05 97.43 6 96 6c-9.59 0-14.23 2.23-23.13 9.34-1.28 1.03-2.39 1.9-3.4 2.66h-7.65zm-23.64 0H22.52c-1-.76-2.1-1.63-3.4-2.66C11.57 9.3 7.08 6.78 0 6.16V0c6.25 0 11.44 1.16 16.14 3.42 3.53 1.7 5.87 3.35 10.73 7.24 4.45 3.56 7.84 5.9 11.31 7.34zM61.82 0h7.66a39.57 39.57 0 0 1-7.34 4.58C57.44 6.84 52.25 8 46 8S34.56 6.84 29.86 4.58A39.57 39.57 0 0 1 22.52 0h15.66C41.65 1.44 45.21 2 50 2c4.8 0 8.35-.56 11.82-2z'%3E%3C/path%3E%3C/svg%3E");
    height: 100px;
    width: 200px;
    justify-content: center;
    align-items: center;
    mask: radial-gradient(10px at 10px 10px,#0000 98%,#000) -10px -10px;
}

.ticket:before {
    position: absolute;
    content: '';
    border-left: 4px dotted #FFC107; 
    height: 80px;
    transform: translate(-101px, 10px); 
    z-index:2;
}

.ticket:after{
    position: absolute;
    content: '';
    height: 80px;
    border-right: 4px dotted var(--_ar2);
    transform: translate(101px, 10px);
    z-index:2;
}

.sdp {
    width: 180px;
    height: 80px;
    border: 4px solid #c48725d9;
    color: var(--_tx);
    border-radius: 10px;
    text-align: center;
    font-family: "Ultra", serif;
    font-size: 30px;
    text-transform: uppercase;
    justify-items: center;
    align-content: center;

}

/*##### AUTO #######################################*/

.auto-storiche{
    padding: 45px 50px;

}

.auto-storiche h2 {
    color: var(--_bl);
    font-size: clamp(1.56rem, calc(0.811rem + 1.529vw), 2.19rem);    font-weight: 900;
    text-align: center; 
    margin-bottom: 20px;
}

.auto-storiche h3 {
    --r: 20px;
    padding: 10px 40px;
    clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
    background: var(--_ro); 
    font-size: clamp(25px, calc(2.143px + 2.976vw), 45px);
 
    width: fit-content;
    color: whitesmoke;
    text-align: center;
    margin: 0 auto;
}

.auto {
    display: grid;
    grid-template-columns: 45% 55%;
    align-items: center;
    gap: 20px;
}

.foto-auto {
    padding: 50px;
    grid-column: 1 / span 2;
    grid-row: 1;
    margin: 0 auto;
}

.foto {
    position: relative;
    anchor-name: --_foto;
    display: flex;
    flex-direction: row;
    width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
    touch-action: pan-y;
    user-select:none;
    border: 30px ridge var(--_ar2);

}

.foto::-webkit-scrollbar {display: none;}

.foto-auto img {
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
}

.prev,
.next{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 30%;
    border: none;
    font-size: 50px;

    background: #3d3d3d69;
    color: white;
    cursor: pointer;
    outline: none;
    user-select: none;
}

.prev:focus,
.next:focus{
    outline:none;
}
.next{
    right: 0px;
}

input[type="radio"]{
    display:none;
}

.foto img{
    display:none;
    width:100%;
}

#s1:checked ~ .foto .img1{
    display:block;
}

#s2:checked ~ .foto .img2{
    display:block;
}

#s3:checked ~ .foto .img3{
    display:block;
}

#s4:checked ~ .foto .img4{
    display:block;
}

#s5:checked ~ .foto .img5{
    display:block;
}

#s6:checked ~ .foto .img6{
    display:block;
}

.slider{
    position: absolute;
    display:flex;
    gap:10px;
    left: 50%;
    transform: translate(-50%, -500%);
}

.slider label{
    width:15px;
    aspect-ratio: 1;
    border-radius: 50%;
    background:whitesmoke;
    cursor: pointer;
    opacity: 0.8;
}

.slider label:hover {
    opacity: 1;
}

#s1:checked ~ .slider label[for="s1"],
#s2:checked ~ .slider label[for="s2"],
#s3:checked ~ .slider label[for="s3"],
#s4:checked ~ .slider label[for="s4"],
#s5:checked ~ .slider label[for="s5"],
#s6:checked ~ .slider label[for="s6"]{
    background: var(--_bl);
    opacity: 1;
}

.prog1 {
    position: relative;
    grid-column: 1;
    margin-top: 20px;
    align-items: center;
    padding: 30px;
    background-color: #5771f60f;
    background-image: radial-gradient(#5771f600 0.9px, #ffffff 0.9px);
    background-size: 9px 9px;
    transform: rotate(1deg);
    overflow: visible;    
    height: max-content;
}

.prog1::before {
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 14px;
    height: 100%;
    background-color: #5771f60f;
    background-image: radial-gradient(#5771f600 0.9px, #ffffff 0.9px);
    background-size: 9px 9px;    
    transform: scaleX(-1);
    clip-path: polygon(40% 0%, 70% 5%, 0% 10%, 80% 18%, 25% 25%, 75% 35%, 20% 45%, 80% 55%, 30% 65%, 70% 75%, 35% 85%, 75% 95%, 50% 100%, 0% 100%, 0% 0%);
}

.prog1::after{
    content: "";
    position: absolute;
    width: 90px;
    height: 28px;
    top: -15px;
    left: 50%;
    transform: translateX(-50%) rotate(-6deg);
    background: #ffc1078c ;
    border: 1px solid #ffc1078c;
    box-shadow: 0 6px 10px #00000036;
    opacity: 0.5;
}

.cale {
    display: grid;
    width: 100%;
    padding: 20px;
    grid-template-columns: 70% 30% ;
    background: var(--_bl);

}

.dom, .due, .mese {
    color: white; 
    text-transform: uppercase;
    font-weight: bold;
}

.dom {
    grid-row: span 2;
    grid-column: 1;
    font-size: 35px;
    align-self: center;

}

.due {
    grid-row: 1;
    grid-column: 2;
    font-size: 50px;
}

.mese {
    grid-row: 2;
    grid-column: 2;
    font-weight: normal;
    font-size: 20px;
}

.prog {
    padding: 20px 0px;
    font-size: 30px;
    font-weight: bold;
    color: var(--_bl);
    border-bottom: 2px solid var(--_bl);
    
}

.orari {
    display: grid;   
}

.orari h6 {
    grid-column: 1;
    padding: 15px;
    color: var(--_bl);
    font-weight: bold;
    border-bottom: 1px solid var(--_bl);
    height: 100%;
}

.orari :nth-child(8), .orari :nth-child(7) {border-bottom: 1px solid var(--_bl);}

.orari p {
    grid-column: 2;
    border-bottom: 1px solid var(--_bl);
    height: 100%;
    padding: 15px;
    line-height: 1.5;

}

.orari p:nth-child(1) {border-top: none;}

.orari i {
    color: #1b1b1b90;
    font-style: italic;
}

.ref {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: center;
}

.ref h4 {
    font-weight: bold;
    color: var(--_bl);
}

.ref p:nth-child(2) {font-weight: bold;}

.prog1, .prog2 {
    line-height: 1.2;
}

.prog2 {
    grid-column: 2;
    align-content: center;
    padding: 30px;
    text-align: center;
    text-wrap: balance;
}

.rego {
    background-color: #5771f60f;
    background-image: radial-gradient(#5771f600 0.9px, #ffffff 0.9px);
    background-size: 9px 9px;   
    transform: rotate(-1deg);
    
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: fit-content;
    padding: 30px;
    position: relative;
}

.rego::before{
    position: absolute;
    content: "";
    display: block;
    background: var(--_ro);
    border: 10px outset #c90d00;
    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
    left: 50%;
    top: 0;
    transform: translate(-50%, -60%);
}

.rego h4 {
    text-align: center;
}

.rego h4:first-child {font-weight: bold; font-size: 35px; color: var(--_ro);}
.rego p:nth-child(7), .rego p:nth-child(8) {text-transform: uppercase; text-align: center;}

.iscriz {
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    text-wrap: balance;
    height: max-content;
    margin: 20px auto;
    border: 1px solid var(--_ro);
    border-radius: 10px;
}

.isc {
    grid-column: 1;
    grid-row: span 2;
    background: var(--_ro);
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    align-content: center;
    
}

.iscriz img {
    width: 6em;
    align-self: center;
    background: var(--_ro);
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.iscriz  h4 {
    grid-row: 1; 
    grid-column: 2; 
    align-self: center; 
    justify-self: center;
    width: fit-content; 
    margin-top: 10px;
    margin-bottom: 5px;
}

.iscriz p {
    grid-row: 2; 
    grid-column: 2; 
    align-self: center; 
    justify-self: center;
    width: fit-content;  
    text-align: center;
    font-weight: bold;
    text-decoration: underline;
    margin-bottom: 10px;
}

.quota {
    display: grid;
    width: 100%;
    grid-template-columns: max-content;
    text-wrap: balance;
    height: max-content;
    margin: 20px auto;
    border: 1px solid var(--_ve);
    border-radius: 10px;
}

.img {
    grid-row: span 3;
    grid-column: 1;
    background: var(--_ve);
    align-content: center;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.quota img {
    width: 6em;
    align-self: center;
    background: var(--_ve);
    padding: 10px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

}

.quota h4 {
    grid-row: 1; 
    grid-column: 2; 
    align-self: center; 
    justify-self: center;
    width: fit-content; 
    margin-top: 10px;
    margin-bottom: 5px;
}

.quota p {
    grid-column: 2; 
    align-self: center; 
    justify-self: center;
    width: fit-content;  
    text-align: center;
}

.quota p:last-child {margin-bottom: 10px;}


/*##### PAGE4 ######################################*/

.page4 {
    background: var(--_bg);
    padding: 45px clamp(20px, calc(-16.055px + 4.587vw), 50px);
}

.page4-content {
    justify-items: center;
}

.prenotazioni {
    display: flex;
    flex-direction: column;
    justify-items: center;
    gap: 30px;
}

.prenotazioni > h2 {
    margin: 0px auto;
    padding: 10px 80px;
    width: fit-content;
    --r: 30px; 
    color: var(--_bl);
    text-align: center;
    border-bottom: 3px dashed ;
}

.prenotazioni > p {
    margin: 0px auto;
    color: var(--_tx);
    font-size: clamp(1.00rem, calc(0.700rem + 0.612vw), 1.25rem);    
    line-height: 1.2;
    padding: 0px 50px;
    text-align: center;
}

.prenotazioni > h5  {
    margin: 0px auto;
    --r: 20px; /* control the ribbon shape */
    clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%, var(--r) 50%);
    width: fit-content;
    background: var(--_ro);
    color: white;
    padding: 10px 50px;
    font-weight: bold;
    font-size: larger; 
}

.pq {
    display: flex;
    margin: 0 auto;
}

.pq img {
    width: 10em;
    height: 10em;
}

.dec, .dec2 {
    z-index: 0;
} 

.dec2 {
    transform: scaleX(-1);

}

.popup, .chiudi {
    opacity: .7;
}

.nd {
    text-transform: uppercase;
    background: #9E9E9E;
    color: white;
    text-align: center;
    align-self: center;
    --r: 10px; 
    width: max-content;
    padding: 20px;
}

.popup-wrapper {
    position: relative;
    height: fit-content;
    margin: 25px 0px;
    overflow: visible;
}

.popup {
    --r: 20px;  /* control the rounded part */
    --s: 40px;  /* control the size of the cut */
    --a: 20deg; /* control the depth of the curvature */
    --p: 50%;   /* control the position */
    background: #ED303C;
    border-radius: var(--r);
    --_m:calc(100% - var(--r)),#000 calc(100% - 1px),#0000;
    --_d:(var(--s) + var(--r))*cos(var(--a));
    mask:
    radial-gradient(var(--r) at calc(var(--p) + var(--_d)) var(--_m)),
    radial-gradient(var(--r) at calc(var(--p) - var(--_d)) var(--_m)),
    radial-gradient(var(--s) at var(--p) calc(100% + sin(var(--a))*var(--s)),
      #0000 100%,#000 calc(100% + 1px)) 0 calc(var(--r)*(sin(var(--a)) - 1)) no-repeat,
    linear-gradient(90deg,#000 calc(var(--p) - var(--_d)),#0000 0 calc(var(--p) + var(--_d)),#000 0);

    width: clamp(400px, calc(243.761px + 19.878vw), 530px);
    padding: 30px;
    background-color: #5f7aff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='%238a9dff' fill-opacity='1'%3E%3Cpath fill-rule='evenodd' d='M0 0h40v40H0V0zm40 40h40v40H40V40zm0-40h2l-2 2V0zm0 4l4-4h2l-6 6V4zm0 4l8-8h2L40 10V8zm0 4L52 0h2L40 14v-2zm0 4L56 0h2L40 18v-2zm0 4L60 0h2L40 22v-2zm0 4L64 0h2L40 26v-2zm0 4L68 0h2L40 30v-2zm0 4L72 0h2L40 34v-2zm0 4L76 0h2L40 38v-2zm0 4L80 0v2L42 40h-2zm4 0L80 4v2L46 40h-2zm4 0L80 8v2L50 40h-2zm4 0l28-28v2L54 40h-2zm4 0l24-24v2L58 40h-2zm4 0l20-20v2L62 40h-2zm4 0l16-16v2L66 40h-2zm4 0l12-12v2L70 40h-2zm4 0l8-8v2l-6 6h-2zm4 0l4-4v2l-2 2h-2z'/%3E%3C/g%3E%3C/svg%3E");
    max-height: max-content;
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-rows: repeat(2, max-content) ;
}

.popup h2 {
    grid-row: 1;
    color: whitesmoke;
    margin: 0 auto;
    font-size: clamp(30px, calc(11.972px + 2.294vw), 45px);
}

.form {
    grid-row: 2;
    display: flex;
    flex-direction: column;
    padding: 20px;
    padding-bottom: 0px;
    gap: 10px;
    color: whitesmoke;
    accent-color: var(--_ro);
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: height 1s ease, opacity 0.3s ease;
}

label {
    text-transform: uppercase;
    font-size: larger;
}

input {
    border: none;
    width: 80;
    padding:5px;
    cursor: text;
}

select {
    border: none;
    padding: 5px;
    font-size: large;
}

.capotavola {display: flex; align-items: center;}

#ct {width: 30px; height: 30px;}

.form > p {
    text-decoration: underline;
    text-align: center;
    margin: 10px;
}

#close{
    display: none;
}

.chiudi { 
    z-index: 0;
    display: block; 
    position: absolute;
    width: 60px;
    aspect-ratio: 1;
    background: var(--_ve) ;
    border-radius: 50px;
    margin: 0 auto;
    text-align: center;
    align-content: center;
    font-weight: bold;
    font-size: xxx-large;
    color: white;
    transform: translate( -50%, 50%) rotate(0deg);
    left: 50%;
    bottom: 0;
    cursor: pointer;
    transition: transform 1s ease;
  
}

#close:checked ~ .chiudi{
    background: var(--_ro);
    transform: translate( -50%, 50%) rotate(45deg);

}

#close:checked ~ .popup .form{
    height: 500px;
    opacity: 1;
    overflow: hidden;
    margin-bottom: 15px;
}

#close:checked, .popup-wrapper {
    margin-bottom: 20px;
}

.invia {
    width: 10em;
    margin: 0 auto;    
    padding: 5px;
    border: none;
    border-radius: 40px 0px;

    text-transform: uppercase;
    text-align: center;
    font-weight: bold;
    font-size: larger;
    color: white;
    background: rgba(154, 211, 1, 1);
    box-shadow: 0 5px 0 #77b31d; 
}

.invia:hover{
    transform: translate(0px, 5px);
    box-shadow: none;
}

.contact {
    display: flex;
    flex-direction: row;
    width: clamp(400px, calc(243.761px + 19.878vw), 530px);
    margin-top: 0px;
    padding: 30px 0px;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
}

.b1 {
    display: flex;
    flex-direction: row-reverse;
    gap: 30px;
}

.s1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cell {

    --b: 2em;
    --h: 1em; 
    --p: 100%;
    --r: 10px;
    --c: var(--_ve);
    width: fit-content;   
    padding: 20px;
    border-radius: var(--r)/min(var(--r),var(--p) - var(--b)/2) var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2);
    clip-path: polygon(0 100%,100% 100%,100% 0,0 0,
    0 max(0%  ,var(--p) - var(--b)/2),
    calc(-1*var(--h)) var(--p),
    0 min(100%,var(--p) + var(--b)/2));
    background: var(--c);
    border-image: conic-gradient(var(--c) 0 0) fill 0/
    calc(var(--p) - var(--b)/2) var(--r) calc(100% - var(--p) - var(--b)/2) 0/
    0 0 0 var(--h);

    display: flex;
    justify-self: start;
    align-items: center;
    line-height: 1.5;
    gap: 10px;
    color: white;
    font-weight: 500;
    text-decoration: underline;
    
}

.cell > svg {
    width: 3em; 
    height: 3em; 
    padding: 5px;

}

.b2 {
    display: flex;
    flex-direction: row-reverse;
    gap: 30px;
}

.s2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mail {
    display: flex;
    flex-direction: column;
    width: max-content;
    height: fit-content;
    background: white;
    border: 1px solid #3e5eff;
    border-top: 15px solid #3e5eff;
    align-self: end;
    justify-self: end;
}

.mail > p {
    margin: 0px 10px;
    padding: 10px;
    padding-bottom:5px;
    border-bottom: 1px solid #4b4b4b;
    font-size: larger;
    text-align: left;
}

.mail > img {
    margin: 10px;
    align-self: end;
}

.f1, .f2 {width: 2em;}

.f1 {
    transform: rotate(-70deg);
}

.f2 {
    transform: rotate(70deg) scaleX(-1);
}

.tt {
    font-family: "Italianno",cursive;
    font-size: xx-large;
    transform: rotate(-10deg);
}

.ma {
    font-family: "Italianno",cursive;
    font-size: xx-large;
    text-align: left;
    transform: rotate(10deg);
}

footer {
    display: flex;
    flex-direction: column;
    background: var(--_bg);    
    padding: 45px 0px;
    gap: 50px;
    align-items: center;
    background: #ffdab970;
    border-top-right-radius: 50px;
    border-top-left-radius: 50px;
    
}

.mappa {
    margin: 0 30px;
    --r: 25px; /* radius of circles */
    height: max-content;
    padding: calc(1.5*var(--r));
    background: var(--_bg);
    mask:
     
    linear-gradient(#000 0 0) no-repeat
    50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
    0 0/calc(2*var(--r)) calc(2*var(--r)) round;
}

.cartolina {
    display: grid;
    grid-template-columns: 40% 60%;
    margin: 20px;
    padding: 20px;
    border: 2px solid var(--_tx);
}

.cartolina img {width: 30%; margin: 20px;}

.indirizzo {
    grid-row: 2; 
    grid-column: 1;
    align-content: center;
}

.indirizzo > p {
    padding: 5px 20px;
    line-height: 2;
    text-align: left;
    align-self: center;
    font-size: x-large;
}

.r1, .r2, .r3, .r4 {
    margin: 0px 10%;
    border-bottom: 2px solid var(--_tx);
}

.r2, .r3, .r4 {text-transform: uppercase; font-weight: bold;}

.map {
    grid-column: 2;
    grid-row: span 2;
    width: 100%;
    aspect-ratio: 4 / 3;
    align-self: center;
    padding: 20px;
    border-left: 2px solid var(--_tx);
}

.footer {
    border-top: solid var(--_ve2);
    padding: 50px 0px 0px;
    align-items: start;
    justify-items: center;
    height: 250px;
    width: 90%;
    display: grid;
    grid-template-columns: 25% 50% 25%;
    
}
.footer img {
    height: 150px;
}

.footer h6{
    text-transform: uppercase;
}

.social {
    display: grid;
    align-items: end;
    
    height: 150px;
}

.social > h6 {
    grid-row: 1;
    grid-column: span 2;
    text-align: center;
    align-self: start;
}

.social p {
    font-size: 20px;
    text-align: center;
    background: #32cd3229;
    color: var(--_tx);
    padding: 15px;
    border-radius: 40px;
    cursor: pointer;
}

.insta, .fb {width: 3em;}

.insta {
    grid-row: 2;
    grid-column: 1;
}

.hi {
    grid-row: 2;
    grid-column: 2;
}

.fb {
    grid-row: 3;
    grid-column: 1;
}

.hf {
    grid-row: 3;
    grid-column: 2;
}

.baraca {
    display: grid;
    justify-items: center;
    height: 150px;
}

.baraca > p {
    font-size: larger;
    align-self: end;
}

.baraca img {height: 100px;  align-self: center;}

.patrocinio{
    display: grid;
    grid-template-columns: 40% 60%;
    width: 20%;

}

.patrocinio  h6 {
    grid-row: 1; grid-column: span 2;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 10px;
}
.ro {
    grid-row: 2/ span 2; grid-column: 1; 
    width: 100%; 
    margin: auto;
}

.to {
    grid-row: 2; grid-column: 2;
    width: 100%; 
    margin: auto;
}

.reg {
    grid-row: 3; grid-column: 2; 
    width: 100%; 
    margin: auto;
}


.copyright {
    display: grid;
    row-gap: 20px;
    column-gap: 30px;
    justify-content: center;
    text-align: center;
    font-size: large;
    text-transform: uppercase;
    font-weight: 200;
    background: var(--_tx);
    color: whitesmoke;
    padding: 20px;
    
}

.copyright h6 {
    grid-column: span 3;
}
.copyright p {
    font-size: larger;
    grid-row: 1;
    text-transform: lowercase;
}

/*##### MOBILE #####################################*/

@media (max-width: 1000px) {

.prog1 {
    width: 80%;
    margin: 0 auto;
    grid-column: span 2;
}

.prog2 {
    width: 90%;
    margin: 0 auto;
    grid-column: span 2;
}
    
}

@media (max-width: 768px) {

.data {
    width: 170px;
    height: 200px;
}

.vl {
    height: 200px;
}

.hero, .page1, .page2, .page3, .auto-storiche, .page4, footer {
    width: 100vw;
}

.cornici {
    display: none;
}

.scritte {
    grid-column: span 2;
}

.page2 {
    padding: 45px 15px;
}

.page2-cont {
    gap: 10px;
}

.cuc {
    gap: 15px;
}

.cta {
    padding: 10px 25px;
    transform: translateY(-5px);
    font-size: 14px;
}

.p2-1 {
    flex-direction: column;
    gap: 30px;
    margin: 10px;
}

.contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

.cartolina {
    height: 400px;
}

.map {
    height: 300px;
}

.indirizzo > p {
    font-size: 18px;
    line-height: 1.2;
}

.footer {
    grid-template-columns: 26% 48% 26%;
    align-items: center;
    padding: 50px 0 0;
}

.footer img {
    height: 130px;
}

.footer h6, .footer p, .social p {
    font-size: 14px;
}

.social {
    justify-items: center;
    height: 130px;
    padding: 0 10px;
}

.social h6 {
    margin-bottom: 8px;
}

.baraca {
    height: 130px;
}

.baraca img {
    height: 80px;
}

.hi, .hf {
    justify-self: center;
}

.fb, .insta {
    justify-self: right;
}

}

@media (max-width: 755px) {

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 25px;
}

img.immagine-logo {
    width: 120px;
}

#ham-menu {
    display: none;
}

.pallino {
    position: fixed;
    top: 20px;
    right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    aspect-ratio: 1;
    padding: 15px;
    background: var(--_bl);
    border-radius: 50px;
    z-index: 1000;
    transition: .7s ease-in-out;
    cursor: pointer;
}

.hamburger, .hamburger::before, .hamburger::after{
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    background: whitesmoke;
    border-radius: 50px;
    transition: .7s ease-in-out;
    cursor: pointer;
}

.hamburger::before {
    transform: translateY(-12px);
}

.hamburger::after {
    transform: translateY(6px);
}

#ham-menu:checked ~ .hamburger {
    background: transparent;
}

#ham-menu:checked ~ .hamburger::before {
    transform: rotate(45deg);
}

#ham-menu:checked ~ .hamburger::after {
    transform: rotate(-45deg) translate(4px, -5px);
}

html:has(#ham-menu:checked),
body:has(#ham-menu:checked){
    overflow: hidden;
}

.barra-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    padding-top: 80px;
    padding-bottom: 30px;
    background: var(--_tx);
    opacity: 0;
    visibility: hidden;
    align-content: center;
    z-index: 999;
    transition: all .7s ease-in-out;
}

.boh:has(#ham-menu:checked) .barra-menu {
    right: 0;
    opacity: 1;
    visibility: visible;
}

.boh:has(#ham-menu:checked) .pallino {
    background: transparent;
}

.menu li {
    display: block;
}

.menu li a {
    padding: 25px;
    font-size: 20px;
}

.menu li a:hover {
    color: var(--_ar);
}

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 0;
}

.hero-content {
    flex-direction: column;
    padding: 0 30px;
}

.vl {
    display: none;
}

.data {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    justify-items: center;
    width: 300px;
    height: max-content;
    margin: 10px;
    padding: 10px;
    gap: 10px;
    border: none;
    background: radial-gradient(circle,rgba(119,179,29,1) 0%,rgba(154,211,66,1) 100%);
    text-transform: uppercase;
}

.data span {
    width: 4px;
    height: 8px;
    border-radius: 2px;
}

.giorni {
    display: grid;
    grid-template-columns: max-content max-content max-content;
    align-items: center;
    gap: 10px;
}

.gg {
    font-size: 30px;
    font-weight: 600;
}

.mm {
    font-size: 30px;
}

.intro-text {
    margin-left: 1px;
    margin-bottom: 6px;
    font-size: 20px;
}

.titolo {
    font-size: 45px;
}

.sottotitolo {
    font-size: 30px;
}

.patrocinio {
    width: 40%;
}

.spacer {
    height: 5em;
}

.page1 {
    width: 100vw;
    padding: 45px 0;
}

.page1-content {
    --r: 10px;
    margin: 30px;
    padding: 30px;
}

.cornici {
    display: none;
}

.scritte {
    display: flex;
    flex-direction: column;
    gap: 20px;

    grid-column: span 2;
}

.scritte > h2 {
    margin: 0;
}

.scritte > p {
    padding: 0;
}

.scritte br {
    display: none;
}

.page2 {
    width: 100vw;
    padding: 30px 0 45px;
}

.page2-cont {
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
}

.page2 h2 {
    margin-bottom: 30px;
}

.page2 h3 {
    --r: 0px;

    margin-bottom: 30px;
    padding: 10px 30px;

}

.sez {
    display: grid;

    width: 99%;
    padding: 20px 40px 20px 20px;

    gap: 0;

    clip-path: none;

    border-top-right-radius: 500px;
    border-bottom-right-radius: 500px;
}

.sez img {
    display: none;
}

.pan {
    grid-row: 1;
    grid-column: 1 / span 3;
}

.bar {
    display: grid;

    grid-row: 2;
    grid-column: 1 / span 3;

    justify-self: end;

    padding-right: 20px;
    padding-left: 40px;

    border-top-left-radius: 500px;
    border-bottom-left-radius: 500px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.cuc {
    grid-row: 3;
    grid-column: 1 / span 3;

    gap: 10px;
    padding: 30px 40px 30px 20px;
}

.cc {
    align-self: end;
}

.cta {
    grid-row: 2;

    align-self: start;
    margin: 0 auto;

    transform: translate(0) scale(90%);
}

.cta:hover {
    transform: translateY(5px) scale(90%);
}

.page3 {
    height: max-content;
}

.page3-content {
    gap: 70px;
}

.luci {
    width: 100%;
    height: 20px;

    background:
        radial-gradient(circle, white 45%, transparent 50%)
        center / 30px 20px repeat-x;

    filter: drop-shadow(0 0 9px white);
}

.banner {
    width: 100%;

    transform: translate(0);

    border: 10px ridge var(--_ar2);
    border-left: none;
    border-right: none;
}

.p2-1 {
    display: flex;
    flex-direction: column;

    width: 100vw;
    gap: 40px;
}

.p2 {
    font-size: 20px;
}

.ticket {
    transform: scale(80%);
}

.auto-storiche {
    padding: 45px 0px;
}

.auto-storiche h3 {
    --r: 0;
}

.auto {
    width: 100%;
    column-gap: 0;
    row-gap: 50px;
    padding: 0 15px;
}

.foto-auto {
    width: 100%;

    margin: 20px auto;
    padding: 0;
}

.foto {
    border-width: 10px;
}

.slider {
    width: 100px;
    transform: translate(-50%, -350%);
}

.prev, .next {
    transform: scale(55%) translateY(-50%);
}

.prev {
    left: -5px;
}

.next {
    right: -5px;
}

.prog1, .prog2, .rego {
    width: 100%;
    padding: 0;

    transform: rotate(0);
}

.prog1 {
    padding: 10px;
}

.prog2 img {
    width: 4em;
}

.rego {
    padding: 30px 20px;
}

.rego::before {
    width: 30px;
    border-width: 7px;
}

.rego h4:first-child {
    font-size: 25px;
}

.dom {
    align-self: center;
}

.due {
    font-size: 25px;
}

.mese {
    font-size: 16px;
}

.prog {
    font-size: 20px;
}

.page4 {
    position: relative;
    text-wrap: balance;
    padding: 45px 20px;
}

.page4::before {
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    content: '';
    display: block;
    --s: 21px; /* size of the wave */
    --b: 5px; /* thickness of the line */
    --m: 0.5; /* curvature of the wave [0 2] */
  
    background: var(--_ro);
    --R: calc(var(--s)*sqrt(var(--m)*var(--m) + 1) + var(--b)/2);
    height: calc(2*var(--R));
    width: 100%;
    --_g: #0000 calc(99% - var(--b)), #000 calc(101% - var(--b)) 99%, #0000 101%;
    mask:
    radial-gradient(var(--R) at left 50% bottom calc(-1*var(--m)*var(--s)), var(--_g)) 
     calc(50% - 2*var(--s)) calc(50% - var(--s)/2 - var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x,
    radial-gradient(var(--R) at left 50% top calc(-1*var(--m)*var(--s)),var(--_g)) 
     50% calc(50% + var(--s)/2 + var(--b)/2)/calc(4*var(--s)) calc(var(--s) + var(--b)) repeat-x;
}


.page4 h2 {
    padding: 0;
}

.page4 p {
    padding: 0 30px;
}

.contact {
    padding: 0;
    gap: 10px;
}

.contact p {
    padding: 5px;
}

.b1 {
    flex-direction: column-reverse;
    gap: 10px;
}

.b2 {
    flex-direction: column;
    gap: 10px;
}

.tt, .ma {
    transform: rotate(0);
}

.dec, .dec2, .f1, .f2, .pb {
    display: none;
}

.popup-wrapper::before{
    font-size: clamp(1.25rem, calc(0.790rem + 2.299vw), 1.88rem);
    padding: 10px;
    width: 100%;
    transform: translate( -50%, 50%) ;
    top: clamp(-25px, calc(18.391px - 5.747vw), 0px);;
}

#close:checked ~ .chiudi {
    margin-top: 10px;
}

footer {
    padding-bottom: 0;
}

.mappa {
    --r: 15px;
    padding: 20px;
}

.cartolina {
    height: 100%;
    margin: 0;
}

.cartolina img {
    grid-row: 1;
    grid-column: 1 / span 2;
}

.indirizzo {
    grid-row: 2;
    grid-column: 1 / span 2;
}

.indirizzo > p {
    font-size: 16px;
}

.map {
    grid-row: 3;
    grid-column: 1 / span 2;

    margin-top: 20px;

    border-top: 2px solid;
    border-left: none;
}

.footer {
    display: grid;

    width: 100vw;

    padding: 0 20px;

    grid-template-columns: 1fr 1fr;
    grid-template-rows: max-content 100px;
    gap: 0;

    border-top: none;
}

.footer img {
    height: 100px;
}

.social {
    grid-column: span 2;
}

.lb {
    grid-column: 1;
    grid-row: 2;

    margin-top: 50px;
}

.baraca {
    grid-column: 2;
    grid-row: 2;

    height: 100px;
    margin-top: 50px;
}

.baraca img {
    height: 65px;
}

.patrocinio {
    transform: scale(90%) translateY(-30px);
}

.copyright { 
    display: flex;
    flex-direction: column;    
}

.copyright h6 {
    order: 2;
}

}

@media (max-width: 375px) {

.data {
    width: 100%;
}

.data span {
    height: 10px;
}

.titolo {
    font-size: 35px;
}

.sottotitolo {
    font-size: 25px;
}

.patrocinio {
    right: 20px;
    bottom: 50px;
}

.page1 {
    padding-bottom: 20px;
}

.page2 {
    padding-top: 20px;
}

.page2 h2 {
    padding: 0px 20px;
}
    
.page2 h3 {
    padding: 10px;
}

.page2-cont {
    gap: 25px;
}

.sez {
    width: 99%;
}

.page3 {
    height: max-content;
}

.page3 h2 {
    font-size: 25px;
}

.p2 {
    width: 100%;
    font-size: 18px;
}

.auto-storiche h2 {
    font-size: 23px;
    padding: 0px 10px;
}

.auto-storiche h3 {
    font-size: 20px;
}

.dom {
    font-size: clamp(1.56rem, calc(-0.256rem + 9.091vw), 1.88rem);
}

.popup {
    width: 95%;
    margin: 0 auto;
    padding: 25px 15px 40px;
}

.popup h2 {
    font-size: clamp(1.56rem, calc(-0.256rem + 9.091vw), 1.88rem);
}

.contact {
    gap: 15px;
    padding: 0;
}

.footer {
    padding-top: 0;
}

.footer img {
    transform: scale(80%);
}

.baraca p {
    text-align: center;
}

}



















*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}