/* ======================================================== DESKTOP ================================================== */
.grecaptcha-badge { 
    visibility: hidden;
}
.home-header *{
    transition: all .3s;
}
.home-header{
    padding-top: 40px;
    height: 700px;
    background-color: #42a5e8;
    background-image: url("./incl/img/foto_home_v2_2.jpg");
    background-position: bottom center;
    background-repeat: no-repeat;
    background-size:cover;
}
.home-header.aziende{
    background-image: url("./incl/img/img-home-header-aziende.png");
    background-position: right;
    background-size: cover;
}
.home-header .input-wrapper{
    width: 100%;
    max-width: 500px;
    margin-bottom: 20px;
}
.home-header .input-wrapper p{
    margin: 4px 0;
}
.home-header .input-wrapper label{
    text-transform: uppercase;
    font-size: .85rem;
}
.home-header .input-wrapper label.privacy{
    font-size: .8rem;
    text-transform: initial;
}
.home-header .input-wrapper label.privacy a{
    color: white!important;
    font-size: .8rem;
}
.password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.toggle-password {
    position: absolute;
    right: 0.5rem;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.eye-icon {
    width: 1.5rem;
    height: 1.5rem;
}
.home-header input:not(input[type="checkbox"]){
    outline: none;
    font-family: inherit;
    padding: 12px 10px;
    border-radius: 4px;
    border: 2px solid white;
    flex: 1;
    padding-right: 2rem;
    font-size: .85rem;
}
.home-header input[type="checkbox"]{
    width: 18px;
    height: 18px;
}
.home-header input:not(input[type="checkbox"]):focus{
    border: 2px solid #0c486f;
}
.home-header h1{
    color: #f5e564;
    font-size: 2.5rem;
    font-weight: 700;
    max-width: 55%;
}
.home-header .subtitle{
    font-size: 1.3rem;
    margin-top: -1.5rem;
    max-width: 55%;
}
.home-header button{
    background-color: #e8bf44;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    height: 45px;
    margin-top: 20px;
    padding: 10px 20px;
    width: fit-content;
    cursor: pointer;
    border:2px solid #fff;
}
.home-header button:hover{
    background-color: #e8be45;
}
.home-header button img{
    width: 20px;
    height: 20px;
    transition: .3s;
    filter: invert(1);
}
.home-header p{
    color: white;
    font-weight: 500;
}
.home-header p a{
    color: white;
    text-decoration: underline;
    text-underline-offset: 5px;
}
.home-header p a:hover{
    color: #f6c97a;
    transition: .3s;
}
.home-header .icon{
    width: 30px;
    height: 30px;
    transition: .3s;
    filter: invert(93%) sepia(63%) saturate(700%) hue-rotate(309deg) brightness(102%) contrast(95%);
}
.container-scroll {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f3f3f3;
    padding: 40px 0;
}
.container-scroll .container{
    position: relative;
}
.container-scroll .scroll-container {
    overflow: hidden;
    flex: 1;
}
.container-scroll .scroll-content {
    display: flex;
    transition: transform 0.3s ease;
    width: 100%;
    
}
.container-scroll .box {
    flex: 1 0 100%;
    height: auto;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-size: 24px;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 10px 40px;
}
.container-scroll .box h2{
    color: #e8be45;
    font-size: 1.8rem;
    margin: 0;
}
.container-scroll .box p {
    color: #62615f;
    margin: 0;
    font-size: 1.2rem;
}
.container-scroll .box a{
    background-color: #0c486f;
    border-radius: 4px;
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    transition: .3s;
}
.container-scroll .box a:hover{
    background-color: var(--main);
    transition: .3s;
}
.container-scroll .nav-button {
    background-color: #2980b9;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    padding: 0;
    padding-top: 3px;
    z-index: 1;
}
.container-scroll .nav-button.prev{
    left: -10px;
    top: 45%;
}
.container-scroll .nav-button.next {
    right: -10px;
    top: 45%;
}
.container-scroll .nav-button:disabled {
    background-color: #bdc3c7;
    cursor: not-allowed;
}
.container-scroll .nav-button img{
    width: 30px;
    height: auto;
    filter: invert(1);
}
.container-scroll .indicator-container {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.container-scroll .indicator {
    width: 10px;
    height: 10px;
    background-color: #bdc3c7;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
}
.container-scroll .indicator.active {
    background-color: #2980b9;
}
section{
    padding: 5rem 0;
}
section h2{
    color: #e8bf44;
    font-size: 2rem;
    margin: 0;
    margin-bottom: 3rem;
}
section h2.alt{
    color: #e8be45;
}
section h2.white{
    color: white;
}

section .section-subtitle{
    margin-top: -2.5rem;
    margin-bottom: 3rem;
    font-size: 1.5rem;
    color: #62615f;
    font-weight: 500;
}
section .grid-evidenza{
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
}
section .grid-evidenza2{
    grid-template-columns: repeat(2, 1fr)!important;
    padding-left: 8rem;
    padding-right: 8rem;
}
section .grid-evidenza .grid-item{
    background-color: #f3f3f3;
    border-radius: 4px;
    height: 200px;
}
section .grid-giornali{
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(7, 1fr);
}
section .grid-giornali img{
    object-fit: contain;
    width: 100%;
    height: 100%;
    filter: grayscale(1) contrast(.5);
}
section .grid-strumenti{
    display: grid;
    gap: 3rem;
    grid-template-columns: repeat(2, 1fr);
}
section .grid-strumento img{
    width: 90px;
    height: 90px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(55%) sepia(89%) saturate(698%) hue-rotate(177deg) brightness(94%) contrast(94%);
}
section.section-bg{
    background-color: var(--main);
}
section .long-text{
    line-height: 1.5;
    font-size: 1.2rem;
    text-align: center;
    max-width: 60rem;
    margin: auto;
}
section .buttons a{
    padding: 10px 20px;
    border-radius: 4px;
    color: white;
    font-weight: 500;
    transition: .3s;
    width: 200px;
    text-align: center;
    border: 1px solid white;
    font-weight: bold;
}
section .buttons a.registrati{
    color: black;
}
section .buttons a:hover{
    filter: brightness(1.2);
    transition: .3s;
}
.container-aziende{
    /*max-width: 1000px;*/
}
.container-blu-new{
    max-width: 80rem!important;
    width: 90%!important;
    margin: auto!important;
}
section .grid-aziende{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
section .grid-aziende img{
    /*object-fit: cover;*/
    width: 100%;
    /*height: 100%;
    aspect-ratio: 1/1;*/
}
section .grid-aziende .pic_s2{
    width: 80%!important;
}
section .grid-aziende .testo.txt-left{
    padding: 2rem 2rem 2rem 0;
}
section .grid-aziende .testo.txt-right {
    padding: 2rem 0 2rem 2rem;
}
section .grid-aziende .testo a{
    border: 2px solid #1e6fa5;
    color: #1e6fa5;
    padding: 10px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 1rem;
    transition: .3s;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 300px;
}
section .grid-aziende .testo a:hover{
    transition: .3s;
    background-color: #0c486f;
    color: white;
}
section .grid-aziende h3{
    font-size: 1.8rem;
    font-weight: normal;
    margin: 0;
    line-height: 1.5;
    color: #e8bf44;
    text-align: center;;
}
section .grid-aziende p{
    line-height: 1.5;
    text-align: center;
    color:#fff;
    font-size:1.1rem;
}
section .candidati{
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 2rem;
}
section .candidati .candidato{
    flex: 1 1 100px;
}
section .candidati .candidato .foto{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 50%;
}
section .candidati .candidato .foto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
section .candidati .candidato h3{
    font-size: 1rem;
    margin-bottom: 0;
    color: var(--main);
}
section .candidati .candidato .mansione{
    font-size: .85rem;
    color: #333333;
    margin-bottom: 0;
    font-weight: 600;
}
section .candidati .candidato .location{
    font-size: .8rem;
    color: #333333;
    margin-top: 0;
}
section .candidati .candidato .mansione{
    font-size: .85rem;
    font-weight: 600;
}
#utenti_iscritti.container-scroll {
    scroll-snap-type: x mandatory;
    overflow-x: scroll;
    scroll-behavior: smooth;
    position: relative;
    padding: 10px 0;
    margin: 20px 0;
}
#utenti_iscritti.container-scroll::-webkit-scrollbar{
    display: none;
}
#utenti_iscritti .box-articolo{
    min-width: 350px;
    overflow: hidden;
}
#utenti_iscritti .box-candidato{
    min-width: 250px;
    overflow: hidden;
}
#utenti_iscritti .box-articolo:hover img{
    transition: .5s;
    transform: scale(1.2);
    opacity: .8;
}
#utenti_iscritti .box-articolo .dati{
    min-height: 250px;
}
#utenti_iscritti .box-articolo .categoria {
    margin-bottom: 5px;
    color: #0c486f;
    font-size: .82rem;
    font-weight: 500;
}
#utenti_iscritti .box-articolo h3{
    margin: 0;
    color: #0c486f;
    font-size: 1rem;
    line-height: 1.3;
}
#utenti_iscritti .box-articolo p {
    color: #5a5a5a;
    font-size: .85rem;
}
#utenti_iscritti .box-articolo .data{
    font-size: .8rem;
    color: #aeaeae;
}
#utenti_iscritti .box-articolo .foto{
    overflow: hidden;
    border-bottom: 4px solid #1e6fa5;
    height: 250px;
    border-radius: 4px 4px 0 0;
}
#utenti_iscritti .box-articolo img{
    border-radius: 4px 4px 0 0;
    transition: .5s;
}
.btn-scroll-rev2 {
    position: absolute;
    background-color: #0c486f;
    color:#fff;
    cursor: pointer;
    z-index: 2;
    transition: .5s;
    overflow: hidden;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    padding: 4px;
}
.btn-scroll-rev2 img{
    width: 100%;
    height: 100%;
    filter: invert(1);
    object-fit: contain;
}
.btn-scroll-rev2:hover{
    background-color: #486579;
    transition: .5s;
}
.btn-scroll-rev2:hover img{
    filter: invert(1);
}

.btn-scroll-rev2.left{
    left: -15px;
}
.btn-scroll-rev2.right{
    right: -15px;
}
.box_tasto_invia_cv{
    font-size: 1.7rem;
    padding:20px;
}

section .grid-aziende .tasto_acquisto_mi{
    background-color:#0c486f!important;
    color:#ffff!important;
    margin:auto;
}
section .grid-aziende .tasto_acquisto_mi .icon_phone{
    filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(313deg) brightness(101%) contrast(106%); object-fit:unset; 
    width:19px; 
    aspect-ratio:unset; 
    margin-right:6px;
}
section .grid-aziende .tasto_acquisto_mi:hover{
    background-color:#fff!important;
    color:#1e6fa5!important;
}
section .grid-aziende .tasto_acquisto_mi:hover img{
    filter: brightness(0) saturate(100%) invert(33%) sepia(78%) saturate(918%) hue-rotate(172deg) brightness(88%) contrast(84%);
}


.form-ric-base-row {
    margin-top: 20px;
}
.form-ric-base-row .filtro{
    padding-bottom: 8px;;
}
.form-ric-base-row .filtro input, 
.form-ric-base-row .filtro textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    min-height: 40px; 
    padding: 0 10px;
    font-size: 16px;
    color: #717171;
}
.form-ric-base-btn-container {
    margin-top: 15px;
}
.form-ric-base-btn-container .btn-submit {
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
}
.form-ric-base-btn-container .btn-submit:hover {
    background-color: #000;
}
.obbligatorio{
    border:1px solid red !important;
    color:red !important;
}
.obbligatorio:focus, .obbligatorio:focus{
    border: 1px solid #ccc;
    color: #717171!important;
}

.grid-annunci{
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
}
.grid-annunci .grid-item{
    background-color: #f3f3f3;
    border-radius: 4px;
    box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14);
    padding: 1rem;
}
.grid-annunci .grid-item:hover img{
    transition: .5s;
    transform: scale(1.2);
}
.grid-annunci .grid-item .foto{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 4px;
    position: relative;
}
.grid-annunci .grid-item .foto .categoria{
    background-color: #0c486f;
    color: white;
    font-size: .80rem;
    font-weight: 500;
    padding: 5px 10px;
    background-color: rgba(73, 157, 255, .8);
    position: absolute;
    top: 0;
    border-radius: 0 0 4px 0;
    z-index: 2;
}
.grid-annunci .grid-item .foto .categoria.annunci {
    background-color: #106399;
}
.grid-annunci .grid-item .foto .categoria.aziende {
    background-color: #7e16df;
}
.grid-annunci .grid-item .foto .categoria.video {
    background-color: rgb(167, 45, 45);
}
.grid-annunci .grid-item .foto .categoria.articoli {
    background-color: #e09719;
}
.grid-annunci .grid-item .foto .categoria.podcast {
    background-color: rgb(59, 162, 59);
}
.grid-annunci .grid-item .foto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: .5s;
}
.grid-annunci .grid-item .categoria.basic {
    background-color: black;
}
.grid-annunci .grid-item .categoria.gold {
    background-color: #CFAF70;
}
.grid-annunci .grid-item .categoria.platinum {
    background-color: #C0C0C0;
}
.grid-annunci .grid-item h3{
    font-size: 1.2rem;
    text-align: center;
    font-weight: 600;
    margin-bottom: 0;
    color: #0c486f;
    margin-bottom: 1rem;
}
.grid-annunci .grid-item p{
    font-size: .85rem;
    font-weight: 400;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
    color: #333333;
}
.grid-annunci .box_prezzo_a_partire_da{
    text-align:center;
    font-size:0.95rem;
    padding-bottom:15px;
}
.grid-annunci .box_prezzo_a_partire_da .prezzo{
    color:#106399;
    font-size:1.4em;
    font-weight:bold
}
.grid-annunci .box_prezzo_a_partire_da .tasto_prezzi{
    background-color: #e8be45;
    color: #fff;
    font-weight: bold;
    padding: 7px 12px;
    border-radius: 4px;
    font-size: 1rem;
    font-style: normal;
    cursor:pointer;
}
.grid-annunci .box_prezzi_pacchetti{
    display:flex;
    align-items:flex-start;
    margin-bottom:15px;
    padding:0px;
    min-height:50px;
}
.grid-annunci .box_prezzi_pacchetti .v_mese{
    width:23%;
    font-size:1em;
    font-weight:bold;
    color:#106399
}
.grid-annunci .box_prezzi_pacchetti .v_prezzo{
    width:53%;
    font-size:0.88em;
    font-weight:bold;
}
.grid-annunci .box_prezzi_pacchetti .v_prezzo .prezzo_originale{
    text-decoration: line-through;
    font-weight:normal;
    color:red;
}
.grid-annunci .box_prezzi_pacchetti .v_prezzo .prezzo_offerta{
    font-size:1.0em;
    color:green;
}
.grid-annunci .box_prezzi_pacchetti .v_prezzo .prezzo_mese{
    font-weight:normal;
    font-size:0.78em;
}
.grid-annunci .box_prezzi_pacchetti .v_tasto{
    width:23%;
    text-align:right;
    font-size:0.78rem;
    font-style: italic;
}
.grid-annunci .box_prezzi_pacchetti .v_tasto .tasto_vai{
    background-color: #f8d498;
    color: #222222;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: .80rem;
    font-style: normal;
    transition: .3s;
    text-align: center;
}

/* ======================================================== TABLET LANDSCAPE ================================================== */
@media only screen and (min-width: 768px) and (max-width: 1450px) {

    section .grid-giornali{
        grid-template-columns: repeat(6, 1fr);
    }

    .grid-annunci {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =========================================================== TABLET PORTRAIT AND MOBILE ====================================== */
@media only screen and (max-width: 1019px) {
.home-header {
    padding-top: 0;
    height: 100dvh;
    background-size: cover;
    background-position: 55% 20%;
}
.home-header h1{
    font-size: 2rem;
    margin-bottom: 0;
    max-width: 100%;
}
.home-header .subtitle{
    font-size: 1rem;
    text-align: center;
    margin-top: 10px;
    max-width: 100%;
}
.home-header .container{
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    padding: 0 20px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.home-header .input-wrapper {
    background-color: transparent;
    width:100%;
    max-width: 100%;
    padding: 0;
}
.home-header .input-wrapper input:not(input[type="checkbox"]){
    width: 100%;
    border-radius: 4px;
    padding: 15px;
}
.home-header input[type="checkbox"] {
    width: 25px;
    height: 25px;
}
.home-header h1{
    text-align: center;
}
.home-header button{
    width: 100%;
    height: 50px;
    margin-top: 10px;
}
.container-scroll .box h2{
    font-size: 1.2rem;
    text-align: center;
}
.container-scroll .box p {
    font-size: 1rem;
}
section .grid-evidenza {
    grid-template-columns: repeat(1, 1fr);
}
section .grid-giornali{
    grid-template-columns: repeat(4, 1fr);
}
section .grid-strumenti{
    grid-template-columns: repeat(1, 1fr);
}

.grid-annunci {
    grid-template-columns: repeat(1, 1fr);
}

}

/* =========================================================== MOBILE ONLY ================================================== */
@media only screen and (max-width: 767px) {
    .home-header.aziende{
        background-position: 55% 20%;
    }
    section .grid-giornali{
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }
    section .buttons{
        flex-wrap: wrap;
    }
    section .grid-strumento img {
        width: 50px;
        height: 50px;
    }
    section .grid-aziende {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
    }
    section .grid-aziende .item1{
        order: 1;
    }
    section .grid-aziende .item2 {
        order: 2;
    }
    section .grid-aziende .item3 {
        order: 4;
    }
    section .grid-aziende .item4 {
        order: 3;
    }
    section .grid-aziende .item5 {
        order: 5;
    }
    section .grid-aziende .testo{
        height: fit-content;
    }
    section .grid-aziende .testo a{
        max-width: 100%;
    }
    section .grid-aziende .testo.txt-right, section .grid-aziende .testo.txt-left{
        padding: 1rem 0 2rem 0;
    }
    #utenti_iscritti .box-articolo {
        min-width: 90%;
    }
    #utenti_iscritti .box-candidato {
        min-width: 70%;
    }
    #utenti_iscritti .box-articolo img{
        object-fit: contain;
    }
    .box_tasto_invia_cv{
        text-align: center;
        font-size: 1.4rem!important;
    }
    .box_tasto_invia_cv label{
        background-color:#e0c342!important;
        color:#000!important;
    }
    section .grid-aziende .pic_s2{
        width: 100%!important;
    }
    section .grid-evidenza2{
        grid-template-columns: repeat(1, 1fr)!important;
        padding-left: 0px!important;
        padding-right: 0px!important;
    }
}