html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    background-color: #000000;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar {
    width: 8px;
    background-color: #F5F5F5;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #222B31;
}

.hp-wrap {
    position: absolute;
    left: -10000px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.splide__arrows {
    display: flex;
    position: relative;
    align-items: center;
    height: 30px;
    justify-content: center;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.50);
    background: rgba(255, 255, 255, 0.11);
    backdrop-filter: blur(2px);
    width: fit-content;
    margin: auto;
    margin-top:30px;
}

.splide__pagination__page.is-active {
    transform: none;
}

b {
    font-weight: 600;
}

*, *::before, *::after {
    box-sizing: border-box;
    text-wrap: balance;
}


body {
    margin: 0px;
    font-size: 15px;
    line-height: 22px;
    overflow-x: hidden;
    background-color: #000000;
    font-family: 'sofia-pro', sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, h4, h5 {
    margin: 0px;
}

a {
    text-decoration: none;
}

.upper {
    text-transform: uppercase;
}


.outer-scroll {
    margin-top: 100dvh;
    position: relative;
    -webkit-transition: margin-top .4s linear;
    transition: margin-top .4s linear;
    transition: margin-top .4s linear;
    transition: margin-top .4s linear;
    transition: margin-top .4s linear;
    transition: margin-top .4s linear;
}

.outer.over-top {
    position: relative;
    z-index: 2;
    background-image: url('/svg/background-desktop-sfumatura-radika.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/*.spazio {
    height: 110px;
}*/

.hero {
    /*height: 100vh;*/ /* altezza pieno schermo */
    /*background-image: url('/svg/background-desktop-sfumatura-radika.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;*/ /* fa rimanere l’immagine ferma */

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover; /* l’immagine si adatta */
    z-index: 0; /* va dietro al contenuto */
   /* background-image: url('/svg/background-desktop-sfumatura-radika.jpg');*/
}

.paddingleft100{
    padding-left:100px;
}

.paddingbottom100 {
    padding-bottom: 100px;
}

.none {
    display: none;
}

.grecaptcha-badge {
    display: none;
}

.heigth100vh {
    height: 100dvh;
    display: flex;
}

.container {
    margin: auto;
    padding: 0px 30px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
}

    .container.maxwidth900 {
        max-width: 900px;
    }

    .container2 {
        margin: auto;
        padding: 0px 30px;
        box-sizing: border-box;
        width: 100%;
        max-width: 2000px;
    }


.width200 {
    width: 200px;
}
.width300 {
    width: 300px;
}
.width550 {
    width: 550px;
}

.relative{
    position:relative;
}

.sx01 {
    margin-left: 25%;
    position: absolute;
    top: 0px;
}

.sx02 {
    position: absolute;
    top: 21%;
    z-index: 2;
}

.sx03 {
    margin-left: -5%;
    position: absolute;
    bottom: 10%;
}
.sx04 {
    position: absolute;
    top: -10%;
    right: -5%;
}

.sx05 {
    position: absolute;
    right: 30px;
    top: 30%;
}

.sx06 {
    position: absolute;
    right: 25%;
    bottom: 0%;
}

.containerparrallax {
    height: 100%;
}


.c-scroll-container {
    position: absolute;
    z-index: 2;
    bottom: 30px;
    right: 30px;
}
/* Applica l'effetto solo ai link con .hover-text */
.hover-text {
    position: relative;
    overflow: hidden;
    white-space: nowrap; /* evita a capo */
}

    .hover-text .textinterno {
        display: inline-block;
        position: relative;
        transition: transform 0.35s ease;
        transform: translateY(0); /* stato iniziale */
    }

        /* La copia parte sotto */
        .hover-text .textinterno::after {
            content: attr(data-text);
            position: absolute;
            left: 0;
            top: 100%; /* subito sotto la riga visibile */
            width: 100%;
            /* niente transition/transform qui! */
        }

    /* All’hover, sposti su di una “riga” (100%) solo l’elemento principale */
    .hover-text:hover .textinterno {
        transform: translateY(-100%);
    }



/* wrapper: ritaglia gli ultimi N px dal BASSO */
.reveal-bottom {
    --line: 12px; /* spessore della “linea” dal basso */
    /*display: inline-block;*/
    overflow: hidden;
    clip-path: inset(0 0 var(--line) 0);
    -webkit-clip-path: inset(0 0 var(--line) 0); /* safari */
}

    /* contenuto: parte sotto e sale sopra la linea */
    .reveal-bottom > .rise {
        /*display: inline-block;*/
        transform: translateY(120%); /* parte nascosto sotto */
        animation: riseIn .9s cubic-bezier(.2,.7,0,.99) .1s forwards;
        will-change: transform;
    }

@keyframes riseIn {
    to {
        transform: translateY(0);
    }
}

/* fallback opzionale (se vuoi): usa mask-image al posto di clip-path */
.reveal-bottom.mask-fallback {
    -webkit-mask-image: linear-gradient(to bottom, black 0 calc(100% - var(--line)), transparent calc(100% - var(--line)) 100%);
    mask-image: linear-gradient(to bottom, black 0 calc(100% - var(--line)), transparent calc(100% - var(--line)) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.immaginedettaglio {
    display: block;
    width: 50%;
    height: 100%;
    object-fit: cover;
    margin: auto;
    min-width: 500px;
}

.containerIntElenco.nascondidesktop {
    display: none;
}

.paddingtopbottom100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.containerFooter.paddingtopbottom100 {
    padding-top: 100px;
    padding-bottom: 100px;
}

.logosfondo {
    position: absolute;
    width: 160px;
    bottom: -27px;
    opacity: 0.1;
}

.riga.visibleresponsivo {
    display: none;
}

.rigaImmaginiIntermedia.visibleresponsivo {
    display: none;
}

.header {
    position: absolute;
    z-index: 44;
    display: block;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: 30px 30px;
    box-sizing: border-box;
    padding-bottom: 0px;
}

.containerparrallaxesterno {
    position: absolute;
    width: 100%;
    height: 100dvh;
}
.nascondimobile{
    display:block;
}

.flexelenco {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    gap: 50px;
    margin-top: 50px;
}

    .flexelenco .bloccoimmobile {
        width: calc(50% - 45px);
    }

/*.splide__list {
    gap: 50px;
}*/

.splideImmagini img{
    width:100%;
    display:block;
}

.bloccosfondofixed {
    background-image: url(/rdka/2025/3.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    overflow-x: hidden;
    padding: 150px 30px;
}


.background1::after {
    content: '';
    position: absolute;
    /* top: -150px;*/
    width: calc(100%);
    height: calc(100%);
    background: #1F1F1F;
    z-index: -1;
    left: 0px;
    border-radius: 35px 35px 35px 35px;
}

.bloccosfondofixedContenitore {
    max-width: 1000px;
    background-color: white;
    margin: auto;
}

    .bloccosfondofixedContenitore img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .fraseform {
        font-family: 'Source Sans Pro', sans-serif;
        color: #565656;
        margin: 0 0 0.85em 0;
        font-weight: 400;
        line-height: 1.75em;
        font-size: 0.9em;
        letter-spacing: 1px;
        display: block;
    }

.sectionCentrale h4 {
    font: normal normal 600 40px/50px galanogrotesque-buploadedfile;
    color: white;
    margin: 0px;
    text-transform: uppercase;
    letter-spacing: -1.5px;
}


.bloccoSfondoSezione2 {
    /*height: 500px;*/
    position: relative;
}

    .bloccoSfondoSezione2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sezioneStandard {
    margin: 120px 0px;
}

.box {
    display: inline-flex;
    flex-flow: wrap;
}
.contenitorefreccia {
    display: none;
}

.box h1 {
    font-family: 'Didot';
    text-transform: uppercase;
    font-style: italic;
    font-size: 3.2rem;
    letter-spacing: 5px;
    font-weight: 400;
    text-align: center;
    line-height: 3.2rem;
}

.first2 img.logohome {
    max-width: 430px;
    height: auto;
    margin: auto;
}


.DropDownListLista {
    border: none;
    color: #808080;
    padding: 3px 0px;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0 0 0.85em 0;
    outline: none;
    width: 100%;
    border: 0;
    border-bottom: 1px solid lightgrey;
}

.first2 img.desktop, .first2 video.desktop {
    display: block;
}
.first2 img.mobile, .first2 video.mobile {
    display: none;
}

textarea.TB_Messaggio {
    width: 100%;
    padding: 20px 10px;
    display: block;
    height: 126px;
    background-color: #f9f9f9;
    color: #000;
    font-size: 16px;
    border: solid 1px #d4d4d4;
    outline: none;
    width: 100%;
    display: block;
    padding: 10px 0px 10px 5px;
    margin: 0 0 10px 0;
    border: none;
    outline: none;
    color: #fff;
    font-family: 'sofia-pro', sans-serif;
    margin: 0 0 0.85em 0;
    font-weight: 400;
    line-height: 1.75em;
    font-size: 1em;
}
.colCentralemenu {
    text-align: center;
    margin-right: 25%;
    margin-left: 25%;
    position: relative;
    padding: 5%;
    box-sizing: border-box;

    padding-bottom:0px;
}

.flexmenu {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flexmenuinterno {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-flow: wrap;
}

    .flexmenuinterno > a {
        margin: inherit;
    }

    .colCentrale a.linkdettaglio {
        font: normal normal 400 22px/30px galanogrotesque-buploadedfile;
        color: #000000;
        margin: 0px;
        text-transform: uppercase;
        letter-spacing: -1.5px;
        text-align: center;
        text-decoration: underline;
    }

.bloccoimmobile {
/*    width: fit-content;
    background-color: #222222;*/
}
/*
.splideprincipale{
    max-width:500px;
}*/

.bloccoimmobile a {
    display: flex;
    flex-flow: column;
}
.immaginirealizzazioniImg {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 500px;
    overflow: hidden;
    aspect-ratio: 10 / 10;
    margin: auto;
}

    .immaginirealizzazioniImg img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

.calendarioRiga {
    border-bottom: 1px solid #BFBFBF;
    padding: 20px 30px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
}

    .calendarioRiga.nopadding {
        padding: 20px 0px;
    }

.calendarioData {
    width: 240px;
}

.calendarioDescrizione {
    flex: 1;
    display: flex;
    gap: 20px;
    flex-flow: wrap;
    justify-content: space-between;
}

    .calendarioDescrizione .widthnumero {
        font-weight: 300;
        width: 50px;
    }

        .calendarioDescrizione .widthnumero img {
            width: 100%;
        }

    .calendarioDescrizione .widthnumero2 {
        width: 30px;
    }

        .calendarioDescrizione .widthnumero2 img {
            width: 100%;
        }



.bloccoimmobileDesc {
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    color: white;
    position: relative;
    flex: 1;
    position: absolute;
    bottom: 50px;
    left: 65%;
    text-align: left;
}

 

    .bloccoimmobileDescLink {
        position: absolute;
        bottom: 20px;
        right: 20px;
        text-transform: uppercase;
        font-family: 'brockmannbold', sans-serif;
        letter-spacing: 0.5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .data {
            display: flex;
            flex-flow: column;
        }

.date-day {
    font-family: 'brockmannbold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0px;
    font-size: 50px;
    line-height: initial;
    color: white;
}
.date-other {
    line-height: initial;
    font-family: 'brockmannbold', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* margin-bottom: 0px; */
    font-size: 20px;
    line-height: initial;
    color: #7c7a87;
}

.colCentrale p {
    color: #000;
    margin: 0 0 0.85em 0;
    font-weight: 400;
    line-height: 1.75em;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.pulsante {
    font-family: "sofia-pro", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.8px;
    transition: all 0.3s linear;
    display: block;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    cursor:pointer;
}

    .pulsante:hover {
    }

.pulsante2 {
    font-family: "sofia-pro", sans-serif;
    color: #111;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 1px;
    transition: all 0.3s linear;
    display: block;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 200px;
    background: #FFF;
    padding: 20px 45px;
    width: fit-content;
    margin: auto;
}

.smooth {
    transition-duration: 500ms;
}

.headerWhite {
    background-color: #171717;
}

.MenuCentrale {
    position: absolute;
    display: flex;
    gap: 90px;
}



.closepopup {
    color: #fff;
    border: none;
    padding: 20px 20px;
    border-radius: 40px;
    cursor: pointer;
    font-size: 28px;
    position: absolute;
    right: 0;
}

.popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    justify-content: center;
    align-items: center;
    z-index: 999;
    overflow-y: auto;
}

.popup-container {
    overflow: hidden;
    width: 30em;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease-in-out;
    overflow-y: auto;
    position: absolute;
    top: 10%;
    bottom: 10%;
    /*    height: fit-content;*/
}

.popup-card {
    padding: 40px;
    text-align: center;
    background: #111;
    border-radius: 40px;
}

    .popup-card img {
        width: 100%;
        display: block;
        max-height: 30vh;
        object-fit: cover;
    }

  

#popup-popupinternoform {
    width: 50em;
}

#close-popup {
    background-color: #fff;
    color: black;
    border: none;
    padding: 10px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 28px;
    position: absolute;
    right: 0;
}



.logo {
    z-index: 1;
    margin-right: auto;
    height: 50px;
}

    .logo img {
        display: block;
        height: 100%;
    }

    .menu > input {
        display: none;
    }


.menu {
    overflow-y: visible;
}

.MenuInterno .Selezionato {
    text-decoration:underline;
}

.flexsup {
    display: flex;
    gap: 10px;
}


.MenuPrincipale {
    display: block;
    color: white;
    cursor: pointer;
    z-index: 2;
    /* margin-left: auto; */
    position: fixed;
    right: 0px;
    top: 10px;
}

    .MenuPrincipale img{
        padding:30px;
    }

 

    .colCentrale p .prezzomenu {
        font-family: 'Didot';
        text-transform: uppercase;
        font-style: italic;
        font-size: 1.5rem;
        letter-spacing: 1px;
        font-weight: 400;
        text-align: left;
        line-height: 1.5rem;
        color: black;
    }

.prezzo {
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    font-style: italic;
    font-size: 1.5rem;
    letter-spacing: 1px;
    font-weight: 400;
    text-align: left;
    line-height: 1.5rem;
}

.LabelMenuPrincipale {
    display: block;
    position: absolute;
    cursor: pointer;
}

.menu {
    display: block;
}


    .menu > input + div.widthVar {
        top: 0;
    }

    .menu > input + div {
        position: fixed;
        width: 100%;
        height: 100dvh;
        position: fixed;
        left: 0%;
        top: -100dvh;
        transition-duration: 500ms;
        background-color: #171717;
        z-index: 1;
    }

.bottonemenu {
    height: 2px;
    background-color: #fff;
    width: 35px;
    margin-bottom: 5px;
}

.colMenuSx {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    overflow: hidden;
    display:block;
}

.colMenuDx {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    /* align-items: center; */
    flex-flow: column;
}

.MenuInternoAlto {
    padding: 30px;
}

.MenuInternoBasso {
    padding: 30px;
    display: flex;
    gap: 30px;
}


.contenitoreFraseInt.flex {
    background-color: black;
    width: 700px;
    height: 700px;
    margin: auto;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.sectiongrey {
    padding: 150px 0px;
    position:relative;
}

.yellow {
    color: #fff;
}

.sfondo1 {
    background-image: url('/rdka/RDKA_avatar.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.MenuInterno {
    width: 100%;
    padding: 0px 30px;
    color: white;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    flex: 1;
    justify-content: center;
}

    .MenuInterno a {
        font-family: 'sofia-pro', sans-serif;
        /* text-transform: uppercase; */
        font-size: 6vh;
        font-style: normal;
        font-weight: 700;
        line-height: 120%;
        letter-spacing: 3px;
        width: fit-content;
    }

       

.section {
    margin: 10% auto;
    position: relative;
}

.radius {
    border-radius: 35px;
}

div.first {
    position: fixed;
    overflow: hidden;
    height: 100dvh;
    z-index: 1;
    display: flex;
    width: 100%;
    top: 0px;
}

.mySlidesHome {
    position: absolute;
    height: calc(100%);
    width: calc(100%);
    transition: all 1500ms;
    box-sizing: border-box;
}

div.first2 {
    transition: all 1500ms;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.bold {
    font-weight: bolder;
}

.BlocchiProdotti {
    margin-left: -20px;
    margin-right: -20px;
}

.immagineprodottowrapper {
    position: relative;
    height: 300px;
}

.footeritemlogo{
    width:250px;
    display:block;
}

.MenuInternoAlto.logomenu {
}

    .MenuInternoAlto.logomenu img {
        display: block;
        width: 136px;
    }


    .ElencoItem {
        width: 33%;
        position: relative;
        display: inline-block;
        padding: 0px 20px;
        box-sizing: border-box;
        vertical-align: top;
        /*margin: 30px 0px;*/
        text-decoration: none;
        color: black;
    }

    .ElencoItem:hover .immagineprodottowrapper:before {
        background-color: rgba(0,0,0,.3);
    }

    .ElencoItem img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.immagineprodottowrapper:before {
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    display: inline-block;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent;
}


.popup {
    position: fixed;
    /* top: 50%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    width: 100%;
    height: 100%;
    top: 0;
    background-color: rgba(0,0,0,0.6);
    z-index: 18;
}

.popupInterno {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    background-color: white;
    max-width: 650px;
}

    .popupInterno img {
        width: 100%;
        display: block;
        object-fit: cover;
        max-height: 320px;
    }




.DescrizioneSuPaginaElenco {
    padding: 20px;
    box-sizing: border-box;
    text-align: center;
    color: black;
}
.DescrizioneSuPaginaElenco h3{
    font-family: 'Didot';
    text-transform: uppercase;
    font-style: italic;
    font-size: 1.5rem;
    letter-spacing: 3px;
    font-weight: 400;
    text-align: center;
    line-height: 1.5rem;
}



.imgSlide {
    position: absolute;
    width: 100%;
    height: 100dvh;
    transition: all 1500ms;
    object-fit: cover;
}

.splide__arrow {
    background: transparent;
    position: relative;
    left: initial;
    right: initial;
}

.paginationprincipale {
    bottom: 0px;
    position: relative;
}

/*.first img {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}
.first video {
    height: 100%;
    width: 100%;
    display: block;
    object-fit: cover;
}*/
.fasciaHome img {
    height: 100vh;
    width: 100%;
    display: block;
    object-fit: cover;
}
.first2 img.finestra {
    height: auto;
    width: 100%;
    display: block;
    object-fit: initial;
    margin: auto;
    max-width: 700px;
}

    .fasciaHome img.finestra {
        height: auto;
        width: 100%;
        display: block;
        object-fit: initial;
        margin: auto;
        max-width: 700px;
    }

.mySlidesHomeVideo {
    position: absolute;
    height: 100%;
    width: 100%;
    transition: all 1500ms;
    object-fit: cover;
}

.exit {
    position: absolute;
    top: 0;
    right: 0;
    color: white;
    padding: 30px;
    font-size: 20px;
    /* font-weight: unset; */
    cursor: pointer;
    z-index: 1000;
}

.fasciaHome {
    background-attachment: scroll;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    position: relative;
    display: block;
    text-decoration: none;
    transition: all 1500ms;
    overflow: hidden;
}

a.fasciaHome:hover img {
    transform: scale(1.2);
}



.pulsantiRdka {
    font: normal normal 500 14px/24px sofia-pro;
    letter-spacing: 0px;
    color: #000;
    padding: 13px 40px;
    display: flex;
    text-decoration: none;
    transition: all 0.3s linear;
    width: fit-content;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    border-radius: 25px;
    border: 1px solid white;
    margin:auto;
    margin-top:30px;
}

    .pulsantiRdka:hover {
        background-color: #3ba936;
        border: 1px solid #3ba936;
        color: #fff;
    }


.pulsantiEvento {
    color: black;
    margin: 0px auto;
    display: inline-block;
    box-sizing: border-box;
    padding: 10px 20px;
    font-family: 'Didot';
    text-transform: uppercase;
    font-style: italic;
    font-size: 1rem;
    /* color: #3ba936; */
    text-decoration: underline;
    background-color: #000;
    color: #fff;
    text-decoration: none;
    position: relative;
    bottom: 0;
    width: 100%;
    left: 0;
}

    .pulsantiEvento:hover {
        background-color: #3ba936;
        color: #fff;
    }


    .center {
        text-align: center;
    }

.col h3.center {
    text-align: center;
}

.sfondoEvento {
    background-image: url('/rdka/celebrate4.jpg');
}
.sfondoEvento2 {
    background-image: url('/rdka/RDKA_avatar2.jpg');
}
.sfondoDinner {
    background-image: url('/rdka/dinner.jpg');
}
.sfondoDance {
    background-image: url('/rdka/dance.jpg');
}

.mask {
    background: rgba(17, 17, 17, 0.75); 
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
}

.contenitoreFrase {
    z-index: 10;
    position: absolute;
/*    width: 100%;
*/    text-align: center;
}



.footer {
    position: relative;
    z-index: 1;
    background-image: url('/svg/footer-backgound-radika.svg');
    background-size: cover;
    background-position: center;
}



.containerFooter {
    padding: 0px 30px;
    display: flex;
    margin: auto;
    flex-flow: wrap;
}
    .containerFooter > .footeritem {
        width: 50%;
    }
.footeritem1 img {
    width: 100%;
    display: block;
    max-width: 150px;
    margin: auto;
}

.footeritem.conflex {
    display:flex;
    flex-flow:wrap;
}

    .footeritem.conflex > div{
        width:50%;
    }

    .iconesocial {
        display: flex;
        gap: 30px;
    }


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

    .containerFooter.flex p{
        margin:0px;
    }


.margintop50 {
    margin-top: 50px;
}
.margintop100 {
    margin-top: 100px;
}
.footeritem2 .iconesocial {
    display: flex;
    gap: 20px;
}


.marginleft100{
    margin-left:100px;
}


.tabella {
    width: 100%;
    display: flex;
    /* justify-content: center; */
    /* align-items: center; */
    flex-flow: wrap;
    gap: 30px;
}

    .aligncenter {
        align-items: center;
    }

.justifycontent {
    justify-content: center;
}

.nopaddingtopbottom{
    padding-top:0px;
    padding-bottom:0px;
}

.containerIntElenco.dx.nopaddingtopbottom {
    padding-top: 0px;
    padding-bottom: 0px;
}

.containerIntElenco {
    width: calc(50% - 15px);
    box-sizing: border-box;
    z-index: 1;
    position: relative;
    display: flex;
}

.margintop30 {
    margin-top: 30px;
}

.containerIntDescElenco {
    box-sizing: border-box;
    font-weight: 300;
    font-size: 15px;
    line-height: 1.73em;
    position: relative;
    text-align: center;
    width: 100%;
}

    .containerIntDescElenco img.prima {
        position: absolute;
        bottom: 0px;
        left: 0;
        width: calc(50%);
        height: auto;
    }


.containerIntElencoImmagine {
    width: 100%;
    display: block;
    height: 100%;
    object-fit: cover;
    border: none;
}

.containerIntElenco.dx {
    box-sizing: border-box;
    padding: 100px;
}
.containerIntElenco.sx {
    box-sizing: border-box;
    padding: 100px;
}
.containerIntDescElenco.left {
    text-align: left;
}



.footer2 {
    z-index:1;
    position:relative;
}




.col {
    
    vertical-align: middle;
    max-width:900px;
    text-align: left;
    margin:auto;
}

.rigaImmagini {
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    background-color: #171717;
}


.verde {
    background-color: #a59683;
    color: #fff;
}
.rosso {
    background-color: #c5666a;
    color: #fff;
}

.giallo {
    background-color: #484a51;
    color: #fff;
}
.vini {
    background-color: #8e0500;
    color: #fff;
}

.blocchimenu a {
 /*   border: 1px solid white;*/
    border-radius: 25px;
    margin: 20px;
    width: calc(33.333% - 45px);
}

.rigaImmagini img {
    display: block;
    width: 100%;
}

.rigaImmaginiIntermedia {
    display: flex;
    margin:20px 0px;
}

    .rigaImmaginiIntermedia img {
        display: block;
        width: 100%;
    }

.rigacentrale {

}

.colCalendar {

    text-align: justify;
}

    .colCalendar h1 {
        font-family: 'Didot';
        text-transform: uppercase;
        font-style: italic;
        font-size: 3.2rem;
        letter-spacing: 5px;
        font-weight: 400;
        text-align: center;
        line-height: 3.2rem;
        margin-top: 0px;
    }

    .colCalendar h3 {
        font-family: 'Didot';
        text-transform: uppercase;
        font-style: italic;
        font-size: 1.5rem;
        letter-spacing: 3px;
        font-weight: 400;
        text-align: center;
        line-height: 1.5rem;
    }

.generale {
    font-family: 'Source Sans Pro', sans-serif;
    color: #565656;
    margin: 0 0 0.85em 0;
    font-weight: 400;
    line-height: 1.75em;
    font-size: 0.9em;
    letter-spacing: 1px;
}


.colCalendar p {
    font-family: 'Source Sans Pro', sans-serif;
    color: #565656;
    margin: 0 0 0.85em 0;
    font-weight: 400;
    line-height: 1.75em;
    font-size: 0.9em;
    letter-spacing: 1px;
}

.colCentrale {
    /* display: table-cell; */
    /* vertical-align: middle; */
    /* width: 100%; */
    text-align: justify;
    margin-right: 25%;
    margin-left: 25%;
}


    .colCentrale.form {
        text-align: justify;
        max-width: 1000px;
        margin: auto;
    }


    .colCentrale a {
        color: #fff;
    }
        .colCentrale a.pulsantiRdka {
            color: #fff;
        }

.lineaSeparazione {
    /*border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, #ffde17, #ffde17, #ffde17);
    background-image: -moz-linear-gradient(left, #ffde17, #ffde17, #ffde17);
    background-image: -ms-linear-gradient(left, #ffde17, #ffde17, #ffde17);
    background-image: -o-linear-gradient(left, #ffde17, #ffde17, #ffde17);
    margin: 20px 0px;*/
}




.traslateup {
    transition: transform 400ms ease-in-out,opacity 400ms ease-out;
    opacity: 0;
    transform: translateY(50px);
}

    .traslateup.visibile {
        transform: translateY(0);
        opacity: 1;
    }

.traslateopacity {
    transition: transform 800ms ease-in-out,opacity 800ms ease-out;
    opacity: 0;
}

    .traslateopacity.visibile {
        opacity: 1;
    }

.traslaterigth {
    transition: transform 1000ms ease-in-out,opacity 1000ms ease-out;
    opacity: 0;
    transform: translateX(100%);
}

    .traslaterigth.visibile {
        transform: translateX(0);
        opacity: 1;
    }

.traslateleft {
    transition: transform 1000ms ease-in-out,opacity 1000ms ease-out;
    opacity: 0;
    transform: translateX(-100%);
}

    .traslateleft.visibile {
        transform: translateX(0);
        opacity: 1;
    }


.hero-headline {
    animation: fade-in-hero 1s ease-out 0.3s 1 forwards;
    transform: translateY(50px);
    opacity: 0;
}

@keyframes fade-in-hero {
    100% {
        transform: translateY(0);
        opacity: 1
    }
}



.paddingCol {
    position: relative;
    margin: 150px auto;
    box-sizing: border-box;
    padding: 0px 20px;
}

.col img {
    display: block;
    width: 100%;
    /* height: 100vh; */
    object-fit: cover;
}

.col h1 {
    font-family: 'brockmannbold', sans-serif;
    color: #fff;
    font: normal normal 400 3.2rem/3.2rem galanogrotesque-buploadedfile;
    margin: 0px;
    text-transform: uppercase;
    letter-spacing: -1.5px;
}

.col h3 {
    font-family: 'brockmannbold', sans-serif;
    text-transform: uppercase;
    font-size: 1.5rem;
    text-align: left;
    line-height: 2rem;
    color: #fff;
    letter-spacing: -1px;
}


.col p {
    color: #fff;
    font: normal normal 500 18px/28px sofia-pro;
    letter-spacing: 0px;
}

.cover {
    background-image: url(/rdka/2025/3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}




.colCentrale h1 {
    color: #fff;
    font: normal normal 400 3.2rem/3.2rem galanogrotesque-buploadedfile;
    margin: 0px;
    text-transform: uppercase;
    letter-spacing: -1.5px;
    text-align:center
}
.colCentrale.dettaglio h1 {
    color: #000;
}

.colCentrale p {
    line-height: 1.5rem;
    text-align: center;
    color: #fff;
    font: normal normal 500 20px/30px sofia-pro;
    letter-spacing: 0px;
}
.colCentrale.dettaglio p {
    color: #000;
}

.colCentrale h3 {
    font-family: 'brockmannbold', sans-serif;
    text-transform: uppercase;
    font-size: 2rem;
    text-align: center;
    line-height: initial;
    color: #fff;
    letter-spacing: -0.5px;
}
.colCentrale.dettaglio h3 {
    color: #000;
}

.colCentrale.dettaglio{
    padding:50px 0px;
}

.bloccoinfo {
    background-color: #222222;
    text-align: center;
    color: white;
    padding: 50px;
}

    .bloccoinfo h1 {
        font: normal normal 600 40px/50px galanogrotesque-buploadedfile;
        color: white;
        margin: 0px;
        text-transform: uppercase;
        letter-spacing: -1.5px;
    }
    .bloccoinfo h2 {
        line-height: 28px;
        text-transform: uppercase;
        color: #fff;
        font-weight: 500;
        font-size: 20px;
    }

    .bloccoinfo h3 {
        text-transform: uppercase;
        font-size: 16px;
        line-height: 16px;
        font-weight: 600;
        color: #7c7a87;
    }

    @-webkit-keyframes fadeIn {
        0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
    animation-delay: 0.2s;
}

.fadeInAnimation {
    animation: fadeIn 2s both;
}

.marginbottom {
    margin-bottom: 30px;
    padding: 0px 20px;
    box-sizing: border-box;
}

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

    .h-subsection {
        font-size: 5vh;
    }

}


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

        div.first2.perbloccohome {
            align-items: initial;
        }

        .contenitoreFrase {
            padding: 110px 30px;
        }

        .containerIntElenco.dx {
            padding: 50px;
        }

        .containerIntElenco.sx {
            padding: 50px;
        }

        .marginleft100 {
            margin-left: 50px;
        }

        .paddingbottom100 {
            padding-bottom: 50px;
        }

        .paddingleft100 {
            padding-left: 50px;
        }

        .spazio {
            height: 80px;
        }
    }

    @media screen and (min-width: 988px) and (max-width:1199px) {

        div.first2.perbloccohome {
            align-items: initial;
        }

        .contenitoreFrase {
            padding: 110px 30px;
        }

        .containerIntElenco.dx {
            padding: 50px;
        }

        .containerIntElenco.sx {
            padding: 50px;
        }

        .marginleft100 {
            margin-left: 0px;
        }

        .paddingbottom100 {
            padding-bottom: 50px;
        }

        .paddingleft100 {
            padding-left: 50px;
        }

        .spazio {
            height: 80px;
        }

        .width200 {
            width: 150px;
        }

        .width300 {
            width: 250px;
        }

        .width550 {
            width: 300px;
        }

        .tabella {
            align-items: center;
        }

        .calendarioData {
            width: 140px;
        }
    }

    @media screen and (max-width: 987px) {

        .popup-container {
            bottom: 0px;
            top: 0px;
            height: 100dvh;
        }

        #popup-popupinternoform {
            width: 100%;
        }

        .popup-card {
            border-radius: 20px;
            padding: 20px;
        }


        div.first2.perbloccohome {
            align-items: initial;
        }

        .nascondimobile {
            display: none;
        }

        .heigth100vh {
            height: initial;
        }

       


        .containerIntElenco.nascondidesktop {
            display: block;
        }

        .containerparrallax {
            display: none;
        }

        .calendarioDescrizione .widthnumero2 {
            width: 18px;
        }

        .immaginedettaglio {
            width: 100%;
            height: 100%;
            min-width: inherit;
        }

        .footeritemlogo {
            width: 130px;
        }

        .paddingbottom100 {
            padding-bottom: 30px;
        }

        .paddingleft100 {
            padding-left: 30px;
        }


        .calendarioDescrizione .widthnumero {
            width: 30px;
        }

        .calendarioRiga {
            padding: 20px 10px;
        }

        .outer.over-top {
            background-image: url(/svg/background-apple-sfumatura-radika.jpg);
            background-attachment: initial;
            /* background-position: top; */
            background-repeat: repeat-y;
            background-size: contain;
        }

        .splide__slide {
            padding: 0px;
        }

        .paddingCol {
            margin: 70px auto;
            padding: 0px 30px;
        }

        .calendarioDescrizione {
            flex: initial;
            width: 100%;
        }

        .flexelenco {
            margin-top: 30px;
        }

            .flexelenco .bloccoimmobile {
                width: 100%;
            }

        .spazio {
            height: 80px;
        }

        .footeritem2 > div {
            width: 100%;
            flex: initial;
        }

        .containerFooter.flex {
            align-items: baseline;
            justify-content: flex-start;
            flex-flow: column;
        }

            .containerFooter.flex .p-regular2 {
                font-size: 14px;
            }

            .containerFooter.flex .iconesocial {
                gap: 10px;
                flex-flow: wrap;
            }

        .containerFooter {
            padding: 30px 30px;
            flex-flow: column;
        }

        .footeritem.conflex {
            gap: 30px;
        }

        .containerFooter > .footeritem {
            width: 100%;
        }

        .footeritem.conflex > div {
            width: 100%;
        }

        .sectiongrey {
            padding: 70px 0px;
        }

        .tabellarevert {
            flex-flow: column-reverse;
        }

        .containerFooter.padding100 {
            padding: 50px 30px;
            padding-bottom: 0px;
            flex-flow: column;
            gap: 50px;
        }


        .containerIntElenco {
            width: 100%;
        }

            .containerIntElenco.dx {
                padding: 50px 0px;
                border-top: 0px;
            }

            .containerIntElenco.sx {
                padding: 50px 0px;
                border-top: 0px;
            }

        .marginleft100 {
            margin-left: 40px;
        }

        .radius {
            border-radius: 25px;
        }

        .bloccoimmobileDesc {
            padding: 0px;
            position: relative;
            bottom: 0px;
            left: 0px;
            text-align: center;
            margin-top: 20px;
        }

        .date-day {
            font-size: 8vw;
        }

        .date-other {
            letter-spacing: 0px;
            font-size: 14px;
            font-size: 3vw;
        }

        .bloccoimmobileDescLink {
            bottom: 10px;
            right: 10px;
            letter-spacing: 0px;
            font-size: 3vw;
        }

        .MenuCentrale {
            display: none;
        }

        .blocchimenu a {
            width: calc(100% - 45px);
        }

        .colCentrale h3 {
            text-align: left;
        }

        .rigaImmagini {
            flex-flow: column;
        }

        .MenuInterno {
            padding: 100px 30px;
        }

        .colCentralemenu {
            margin-right: 0%;
            margin-left: 0%;
            padding: 5%;
        }

        .box h1 {
            font-size: 1.6em;
            line-height: 1.6em;
        }

        .portata {
            display: none;
        }


        .contenitorefreccia {
            display: flex;
            align-items: center;
            float: none;
            margin: auto;
        }

            .contenitorefreccia img {
                align-items: center;
                display: flex;
                width: 30px;
            }

        .bloccoSfondoSezione2 {
            height: auto;
        }

        .sezioneStandard {
            margin: 30px 0px;
        }


        .first2 img.desktop, .first2 video.desktop {
            display: none;
        }

        .first2 img.mobile, .first2 video.mobile {
            display: block;
        }

        .contenitoreFrase {
            padding: 110px 20px;
            width: 100%;
        }

        .section {
            margin: 100px auto;
        }

        .pulsantiEvento {
            position: fixed;
        }

        .ElencoItem {
            width: 100%;
            max-width: 500px;
            padding: 0px 0px;
        }

        .BlocchiProdotti {
            margin-left: 0px;
            margin-right: 0px;
        }

        .popup {
            z-index: 50;
        }

        .popupInterno {
            position: fixed;
            top: 0;
            left: 0;
            transform: none;
            width: 100%;
            height: 100vh;
        }

        .contenitoreFraseInt h2 {
            font-size: 40px;
            line-height: 3rem;
        }

        .spazioFooter {
            margin-bottom: 0px;
        }

        .footer {
                    background-position: left;
        background-color: black;
        background-image: none;
        }

        .FooterItem {
            width: 100%;
            float: none;
            font-size: 14px;
            text-align: center;
        }

            .FooterItem img {
                width: 90px;
            }

        .nomeAzienda {
            font-size: 1em;
            margin-bottom: 15px;
        }

        .FooterItem2 {
            width: 100%;
            float: none;
            padding-left: 0;
            text-align: center;
        }

        .FooterItem2Int {
            width: 100%;
            display: block;
        }

            .FooterItem2Int > .nomeAzienda {
                font-size: 1em;
                margin-bottom: 15px;
            }



        .colMenuSx {
            display: none;
        }

        .colMenuDx {
            width: 100%;
        }

        .col img {
            height: auto;
        }


        .menu > input + div.widthVar {
            width: 100%;
        }

        .riga {
            display: block;
        }

        .col {
            display: block;
            width: 100%;
        }

        .colCentrale {
            margin-right: 30px;
            margin-left: 30px;
        }

        .col h1 {
            font-size: 40px;
            line-height: 3rem;
            text-align: left;
        }

        .colCentrale h1 {
            font-size: 40px;
            line-height: 3rem;
            text-align: left;
            padding: 0px 20px;
            box-sizing: border-box;
        }


        .nascondiresponsivo {
            display: none;
        }

        .paddingtopResponsivo {
            padding-top: 0px;
        }

        .margintopResponsivo {
            margin-top: 0px;
        }

        .riga.visibleresponsivo {
            display: block;
        }

        .rigaImmaginiIntermedia.visibleresponsivo {
            display: flex;
        }

        .col h1.titolomenu {
            font-size: 2rem;
            line-height: 2rem;
        }
    }


    /*################### ANIMAZIONI #####################*/
    .opacity {
        opacity: 0;
    }

    .fadeInAnimation {
        animation: fadeIn 2s both;
    }


    .slideLeft {
        animation: slide-in-left 2s both;
    }


    .slide-in-left {
        -webkit-animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-left {
        0% {
            -webkit-transform: translateX(-1000px);
            transform: translateX(-1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }



    .slideRight {
        animation: slide-in-right 2s both;
    }


    .slide-in-right {
        -webkit-animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: slide-in-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }

    @-webkit-keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slide-in-right {
        0% {
            -webkit-transform: translateX(1000px);
            transform: translateX(1000px);
            opacity: 0;
        }

        100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
            opacity: 1;
        }
    }



    .fadeOut {
        animation: fadeOut 2s both;
    }


    @-webkit-keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    @keyframes fadeOut {
        from {
            opacity: 1;
        }

        to {
            opacity: 0;
        }
    }

    .fadeOut {
        -webkit-animation-name: fadeOut;
        animation-name: fadeOut;
    }


    .fadeInUp {
        animation: fadeInUp 2s both;
    }


    @-webkit-keyframes fadeInUp {
        0% {
            -webkit-transform: translate3d(0, 100%, 0);
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }

        to {
            -webkit-transform: translateZ(0);
            opacity: 1;
            transform: translateZ(0);
        }
    }

    @keyframes fadeInUp {
        0% {
            -webkit-transform: translate3d(0, 100%, 0);
            opacity: 0;
            transform: translate3d(0, 100%, 0);
        }

        to {
            -webkit-transform: translateZ(0);
            opacity: 1;
            transform: translateZ(0);
        }
    }

    .fadeInUp {
        -webkit-animation-name: fadeInUp;
        animation-name: fadeInUp;
    }


    @-webkit-keyframes fadeIn {
        0% {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    @keyframes fadeIn {
        0% {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

    .fadeIn {
        -webkit-animation-name: fadeIn;
        animation-name: fadeIn;
        animation-delay: 0.2s;
    }



    /*###################  AREA RISERVATA #######################*/
    .contenitoreArea {
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        /*    background: linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%);
*/ background-color: #fdc300;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
    }

        .contenitoreArea:before, .contenitoreArea:after {
            -webkit-box-flex: 1;
            box-flex: 1;
            -webkit-flex-grow: 1;
            flex-grow: 1;
            content: '';
            display: block;
            height: 24px;
        }

    .internoArea {
        text-align: center;
        background: white;
        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        max-width: 400px;
        width: 100%;
        margin: 0px 20px;
        z-index: 1;
    }

        .internoArea img {
            height: 30px;
            display: block;
        }

    .accedi {
        font-size: 24px;
        color: #1c1c1e;
    }

    .utilizza {
        padding-bottom: 3px;
        padding-top: 1px;
    }

    .accesso {
        padding: 30px 0px 0px 0px;
    }

    .inputBot {
        width: 100%;
        padding: 12px;
        border: 1px solid #d1d1d6;
        border-radius: 10px;
        font-size: 14px;
        color: #1c1c1e;
        box-sizing: border-box;
        transition: border-color 0.3s;
        padding-right: 50px;
        outline: none;
    }

    .accessonegato {
        font-size: 12px;
    }

    .contenitoreNega {
        height: 20px;
    }

    .contenitoreaccedi {
        margin-top: 30px;
    }

    .accessoform {
        -webkit-user-select: none;
        -webkit-transition: background .2s .1s;
        transition: background .2s .1s;
        border: 0;
        -webkit-border-radius: 3px;
        border-radius: 10px;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        min-width: 4em;
        outline: none;
        overflow: hidden;
        position: relative;
        text-align: center;
        -webkit-tap-highlight-color: transparent;
        z-index: 0;
        background: #3498db;
        color: #fff;
        padding: 12px;
        /* float: right; */
        width: 100%;
        font-size: 14px;
    }


    .mappacontenuti {
        position: absolute;
        left: -9999px;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px); /* Compatibilità legacy */
        white-space: nowrap;
    }

        .mappacontenuti a {
            color: black;
        }


    /*########    SPINNER     ############*/
    .modal {
        position: fixed;
        /* background-color: white; */
        background-color: rgb(165 165 165 / 70%);
        z-index: 10000000;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .circle-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        aspect-ratio: 1/1;
    }

    .circle-svg {
        --_circle-radius: 45px;
        --_svg-width: 100px;
        --_stroke-width: 10px; /* svg-width - (circle-radius * 2) */

        width: var(--_svg-width);
        height: var(--_svg-width);
        stroke: white;
        /*   stroke-linecap: round; */
        stroke-width: var(--_stroke-width);
        stroke-dashoffset: 1;
        stroke-dasharray: 1 1000;
        animation: loader 1500ms infinite linear, spin 3000ms infinite linear;
    }

    @keyframes loader {
        0% {
            stroke-dashoffset: 1;
            stroke-dasharray: 1 1000;
        }

        100% {
            stroke-dashoffset: calc(var(--_circle-radius) * -2 * 3.1415);
            stroke-dasharray: calc(var(--_circle-radius) * 2 * 3.1415) 1000;
        }
    }

    @keyframes spin {
        0% {
            rotate: 0deg;
        }

        100% {
            rotate: 360deg;
        }
    }