@charset "UTF-8";
/* CSS Document */

body,
h1,
h2,
h3,
h4,
h5,
p {
    font-family: "Outfit", sans-serif;
}


.outfit-<uniquifier> {
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

@font-face {
    font-family: grindela;
    /* set name */
    src: url(../font/grind.otf);
    /* url of the font */
}

.tessere{
    filter: drop-shadow(10px 10px 10px #ffffff18);
}
::-moz-selection {
    /* Code for Firefox */
    color: #F4F2E8;
    background: #383838;
}

::selection {
    color: #F4F2E8;
    background: #383838;
}
#pagopa, #pagamenti, #ricariche{
    scroll-margin-top: 6rem;
}
.title-news-modal{
    font-size:calc(20px + (18 - 16)*((100vw - 300px) /(1920 - 300)))!important;
    color:#134a92;
    font-weight:600;
}
.wa {
    position: fixed;
    max-width: 80px;
    right: 1rem;
    bottom: 1rem;
    z-index: 100000;
}
.modal-header{
    border-bottom:0;
}
.modal-content.modal-style{
    border:4px solid #134a92;
    /* From https://css.glass */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(11px);
    
}
.card-collapse {
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 0.5rem;
    color: #134a92;
    padding: 1em;
}

.title-box-servizi-collapse {
    font-weight: 700;
}

.back-serv-pages {
    background-color: #f9fcff;
    background-image: url(../img/back-serv.png);
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-top: 6%;
    padding-bottom: 18%;
    padding-left: 6%;
    padding-right: 6%;
}


.relative {
    position: relative;
}

.logo-nav {
    max-width: 18rem;
    min-width: 18rem;

}

.navbar {
    background-color: #fff;
    padding-left: 6%;
    ;
    padding-right: 6%;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    z-index: 99;
}

.nav-link {
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 500;
    color: #1c3d72;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    letter-spacing: 0;
    margin-left: 2.4rem;
    margin-right: 2.4rem;
}

.nav-link:hover {
    color: #546c92;
}

.prenota {
    display: block;
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 400;
    background-color: #216bcc;
    color: #fff;
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
    letter-spacing: 0;
    margin-top: 0.2rem;
    border: 2px solid #2f6bcc;
    border-radius: 5rem;
    padding: 0.2rem;
    transition-duration: 1s;
}

.prenota:hover {
    background-color: #174786;
    transition-duration: 1s;
    color: #fff;
}

.box-logo-head {
    padding-top: 4%;
}

.logo-head {
    max-width: 80%;
    z-index: 9999999999;
}

.tit-vert {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: calc(13px + (16 - 13)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    color: #222323;
    position: absolute;
    right: 97%;
    top: 8%;
    text-transform: uppercase;
}

.dropdown-menu {
    padding: 0;

}

.dropdown-menu .dropdown-item {
    padding-top: 0.5em;
    padding-bottom: 0.5em;

}

.dropdown-menu .dropdown-item:hover {
    background-color: #1f65bf;
    color: #fff;



}



.link-footer {
    font-size: calc(13px + (16 - 13)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    color: #222323 !important;
}



.head {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* Slider: base (1.jpg) stays opaque; 2.jpg fades over it so no white gap */
.head {
    background-image: url(../img/slider-home/1.jpg);
}
.head::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(to right, rgba(10, 35, 80, 0.65) 0%, rgba(10, 35, 80, 0.45) 65%, rgba(10, 35, 80, 0.1) 100%), url(../img/slider-home/2.jpg);
    animation: head-slide-2 12s infinite;
}
.head > * {
    position: relative;
    z-index: 1;
}
/* 2.jpg fades in over the middle of the loop, revealing 1.jpg otherwise */
@keyframes head-slide-2 {
    0%, 15% { opacity: 0; }
    35%, 65% { opacity: 1; }
    85%, 100% { opacity: 0; }
}

.sp-head {
    padding-top: 15%;
    padding-bottom: 15%;
    padding-left: 6%;
    text-shadow: 0 2px 12px rgba(10, 35, 80, 0.85);
}

.h1-head {
    font-size: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
}

.h2-head {
    padding-top: 1rem;
    font-size: calc(16px + (80 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (76 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 700;
}

.txt-head {
    font-size: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 300;
    letter-spacing: 0.15rem;
    padding-top: 2rem;
    padding-right: 8rem;
    padding-bottom: 2rem;
}

.btn-head {
    background-color: #1569d8;
    border-radius: 0.5rem;
    padding: 0.8rem 2rem;
    color: #fff;
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
}

.btn-head:hover {
    background-color: #134a92;
    border-radius: 0.5rem;
    padding: 0.8rem 2rem;
    color: #fff;
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
}

.h-box-head {
    position: relative;
    z-index: 2;
    margin-top: -4%;
    padding-left: 4%;
    padding-right: 4%;
}

.sp-box-head {
    padding-left: 2%;
    padding-right: 2%;
}

.box-head {
    height: 100%;
    background-color: #fff;
    border-radius: 0.5rem;
    padding: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-shadow: 0px 0px 10px #2a2a2b3f;
}

.title-box {
    font-size: calc(16px + (24 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #134a92;
    font-weight: 600;
}

.txt {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (20 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #78797a;
    font-weight: 300;
}

.box-head .col-md-8 {
    display: flex;
    flex-direction: column;
}

.link-box {
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #216bcc;
    font-weight: 400;
    margin-top: auto;
}

.icn {
    padding: 0px;
}

.freccia {
    max-width: 1rem;
    flex-shrink: 0;
    position: relative;
    top: -1px;
    transition-duration: 1s;
    margin-left: 0.5rem;
}

.link-box:hover .freccia {
    margin-left: 1.5rem;
}



.h-box-news {
    padding-top: 6%;
    padding-bottom: 6%;
    padding-left: 6%;
    padding-right: 6%;
}

.title-h2 {
    font-size: calc(24px + (40 - 24)*((100vw - 300px) /(1920 - 300)));
    color: #134a92;
    font-weight: 600;
}

.sp-news {
    padding-top: 2rem;
    padding-left: 1rem;
    padding-right: 2rem;
}

.back-news {
    background-size: cover;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    position: relative;
}

.back-news {
    background-size: 140%;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0.5rem;
    position: relative;
    transition-duration: 1s;
}

.back-news:hover {
    background-size: 130%;
    transition-duration: 1s;
}

.ombra {
    position: absolute;
    background: #171717;
    background: linear-gradient(0deg, rgba(23, 23, 23, 0.644) 0%, rgba(23, 23, 23, 0.089) 100%);
    height: 100%;
    border-radius: 0.5rem;
    z-index: 0;
}

.sp-txt-news {
    padding: 3rem;
    padding-bottom: 2rem;
    padding-top: 0rem;
    z-index: 9;
}

.title-news {
    font-size: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 600;
    padding-top: 22vh;
}

.txt-w {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (20 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 300;
}

.fr-news {
    position: absolute;
    bottom: 2rem;
    z-index: 99999;
}

.up-title {
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #134a92;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
}

.sub-title {
    font-size: calc(24px + (32 - 24)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(24px + (32 - 24)*((100vw - 300px) /(1920 - 300)));
    color: #134a92;
    font-weight: 400;
    padding-bottom: 1rem;
}

.btn-app {
    background-color: #fff;
    border: 2px solid #1569d8;
    border-radius: 4rem;
    padding: 0.6rem 1.5rem;
    color: #1569d8;
    font-size: calc(16px + (14 - 16)*((100vw - 300px) /(1920 - 300)));
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
}

.btn-app:hover {
    background-color: #134a92;
    border: 2px solid #134a92;
    border-radius: 4rem;
    padding: 0.6rem 2rem;
    color: #fff;
    text-transform: uppercase;
    font-weight: 300;
    letter-spacing: 0.15rem;
    transition-duration: 1s;
}

.sp-info {
    padding-left: 15%;
    padding-right: 6%;
}

.box-info {
    background-color: #fff;
    padding: 1.5rem 2rem;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 20px #6a6a6b28;
}

.box-entrata {
    background-color: #fff;
    height: 12rem;
    border-radius: 0.5rem;
    box-shadow: 0px 0px 20px #6a6a6b28;
    background-image: url(../img/insegna.jpg);
    background-size: 100%;
    background-position: top center;
    background-repeat: no-repeat;
    margin-bottom: 2rem;
}

.title-info {
    font-size: calc(16px + (26 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #134a92;
    font-weight: 600;
}

.txt-info {
    font-size: calc(16px + (20 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (22 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #78797a;
    font-weight: 300;
}





.back-serv {
    background-color: #f9fcff;
    background-image: url(../img/back-serv.png);
    background-size: 100%;
    background-position: bottom center;
    background-repeat: no-repeat;
    padding-top: 6%;
    padding-bottom: 20%;
    padding-left: 6%;
    padding-right: 6%;
}


.h-box-servizi {
    margin-top: -4%;
    padding-left: 4%;
    padding-right: 4%;
}

.sp-box-servizi {
    
    padding-left: 2%;
    padding-right: 2%;
    margin-top: 2rem;
}

.box-servizi {
    height: 100%;
    background-color: #134a92;
    border-radius: 0.5rem;
    padding: 1rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    box-shadow: 0px 0px 10px #2a2a2b3f;
}

.title-box-servizi {
    font-size: calc(16px + (24 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 600;
}

.txt-servizi {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(16px + (20 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 300;
}

.link-box-servizi {
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    color: #fff;
    font-weight: 400;
}

.icn {
    padding: 0px;
}

.freccia {
    max-width: 1rem;
    flex-shrink: 0;
    position: relative;
    top: -1px;
    transition-duration: 1s;
    margin-left: 0.5rem;
}

.link-box-servizi:hover .freccia {
    margin-left: 1.5rem;
}

.title-form {
    font-size: calc(20px + (26 - 20)*((100vw - 300px) /(1920 - 300)));
    line-height: calc(20px + (26 - 20)*((100vw - 300px) /(1920 - 300)));
    color: #134a92;
    font-weight: 600;
    padding-bottom: 2rem;
    padding-top: 4rem;
}






.foot {
    background-color: #fff;
    padding-left: 6%;
    padding-right: 6%;
}

.contatti {
    font-size: calc(16px + (20 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    margin-bottom: 0px;
    color: #1c3d72;
    text-align: center;
    padding-top: 4%
}

.logo-foot {
    max-width: 100%;
}

.sp-contatti {
    padding-left: 10%;
}

.dati {
    font-size: calc(13px + (16 - 13)*((100vw - 300px) /(1920 - 300)));
    font-weight: 200;
    color: #222323;
    padding-left: 2rem;
    padding-top: 0rem;
    padding-bottom: 0rem;
    transition-duration: 1s;
    margin-bottom: 0px;
}

.sp-dati {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.sp-foot {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.form-control {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: 0px solid #ced4da;
    border-bottom: 2px solid #063f6d;
    border-radius: 0rem;
}


.form-control:focus {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: 0px solid #ced4da;
    border-bottom: 2px solid #88a5db;
    border-radius: 0rem;
    box-shadow: 0px 0px 0px transparent;
}

.form-rett {
    border: 2px solid #063f6d;
}

.form-rett:focus {
    border: 2px solid #88a5db;
}

.form-select {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: 0px solid #ced4da;
    border-bottom: 2px solid #063f6d;
    border-radius: 0rem;
}

.form-select:focus {
    font-size: calc(16px + (18 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    line-height: 1.5;
    color: #212529;
    background-color: transparent;
    border: 0px solid #ced4da;
    border-bottom: 2px solid #063f6d;
    border-radius: 0rem;
    box-shadow: 0 0 0 0rem transparent;
}

option:disabled {
    color: #063f6d;
    font-weight: 600;
    opacity: calc(1);
}

input::placeholder {
    color: #adaeb1;
    opacity: 0.2;
    font-weight: 400;
    ;
}

.btn-form {
    background-color: #bab874;
    font-size: calc(16px + (16 - 16)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    color: #f4f7f9;
    border-radius: 50rem;
    padding: 0.5rem 3rem;
    border: none;
    bottom: 2rem;
    margin-left: 1rem;
    letter-spacing: 0.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 2rem;
    padding-right: 3rem;
    cursor: pointer;
}

.btn-form:hover .freccia {
    rotate: 90deg;
    transition-duration: 0.3s;
}

.mappa {
    height: 40vh;
}

.sp-map {
    padding-left: 12rem;
}

.white {
    color: #f4f7f9
}

strong {
    font-weight: 600;
}

a {
    color: #fff;
    text-decoration: none;
}

a:hover {
    color: #7bb2d6;

    text-decoration: none;
}

.link-privacy{
    font-size: calc(13px + (16 - 13)*((100vw - 300px) /(1920 - 300)));
    font-weight: 300;
    color: #222323!important;
}


@media only screen and (max-width: 1500px) {
    .title-box {
        font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .txt {
        font-size: calc(16px + (16 - 16) * ((100vw - 300px) / (1920 - 300)));
        line-height: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .box-head {
        padding: 0.5rem;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .sp-box-head {
        padding-left: 1.5%;
        padding-right: 1.5%;
    }

    .title-news {
        font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1920 - 300)));
        padding-top: 18vh;
    }

    .sp-txt-news {
        padding: 1.5rem;
    }

    .title-box-servizi {
        font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .txt-servizi {
        font-size: calc(16px + (16 - 16) * ((100vw - 300px) / (1920 - 300)));
    }

    .sp-box-servizi {
        padding-left: 1.5%;
        padding-right: 1.5%;
        margin-top: 2rem;
    }
}

@media only screen and (max-width: 850px) {
    .sp-head{
        padding-top:25%
    }
    .fr-news {
        position: absolute;
        top: 2rem;
        right: 2rem;
        max-width: 4rem;
        z-index: 99999;
    }

    .sp-info {
        padding-top: 2rem;
        padding-left: 3%;
        padding-right: 3%;
    }
}