@font-face {
    font-family: 'RoobertENEL';
    src: url('/font/RoobertENEL-Regular.woff2') format('woff2'),
    url('/font/RoobertENEL-Regular.woff') format('woff');
}

@font-face {
    font-family: 'RoobertENEL-light';
    src: url('/font/RoobertENEL-Light.woff2') format('woff2'),
    url('/font/RoobertENEL-Light.woff') format('woff');
}

@font-face {
    font-family: 'RoobertENEL-bold';
    src: url('/font/RoobertENEL-Bold.woff2') format('woff2'),
    url('/font/RoobertENEL-Bold.woff') format('woff');
}

@font-face {
    font-family: 'RoobertENEL-black';
    src: url('/font/RoobertENEL-Black.woff2') format('woff2'),
    url('/font/RoobertENEL-Black.woff') format('woff');
}

body {
    margin: 0;
    background-color: #de007a;
    /*background: linear-gradient(180deg, #583580 0%, #583580 85%, #94d500 85%, #94d500 100%);*/
    /*height: 100vh;*/
    color: #000;
    font-family: 'RoobertENEL';
}

.nascosto {
    display: none;
}

.content-container {
    width: 100%;
    height: calc(1vw / (4 / 3) * 100);
}

.content-container .content {
    position: relative;
}

/* HOME */
.content-container.home {
    background: url('../images/bg-home.jpg') no-repeat center center #de007a;
    background-size: contain;
}

.content-container.home .content .iniziamo {
    position: absolute;
    top: calc(1vw / (4 / 3) * 67);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
}

.content-container.home .content .iniziamo img {
    width: 15vw;
    display: block;
    margin: 0 auto;
}

.content-container .content .logo {
    position: absolute;
    top: calc(1vw / (4 / 3) * 7);
    bottom: 0;
    left: 7vw;
    right: 0;
    margin: auto;
    width: calc(100% - 7vw);
}

.content-container .content .logo img {
    width: 10vw;
    display: block;
}

.content-container .content .titolo {
    font-family: 'RoobertENEL-bold';
    font-size: 2.5vw;
    color: #fff;
    position: absolute;
    top: calc(1vw / (4 / 3) * 20);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

/* SELEZIONE */
.content-container.selezione {
    background: url('../images/bg-selezione.jpg') no-repeat center center #de007a;
    background-size: contain;
}

.content-container.selezione .content .domanda {
    font-family: 'RoobertENEL-bold';
    font-size: 2.9vw;
    color: #fff;
    position: absolute;
    top: calc(1vw / (4 / 3) * 35);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

.content-container.selezione .content .comuni-contenitore {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 2vw;
    justify-items: center;
    position: absolute;
    top: calc(1vw / (4 / 3) * 45);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

.content-container.selezione .content .comuni-contenitore .comune {

}

.content-container.selezione .content .comuni-contenitore .comune a {
    color: #de007a;
    text-decoration: none;
    background-color: #fff;
    border-radius: 10px;
    font-family: 'RoobertENEL-bold';
    width: 22vw;
    height: calc(1vw / (4 / 3) * 6);
    display: grid;
    justify-content: center;
    align-content: center;
    font-size: 1.4vw;
}

/* QUIZ */
.content-container.quiz {
    background: url('../images/bg-quiz.jpg') no-repeat center center #de007a;
    background-size: contain;
}

.content-container.quiz .domanda-contenitore {
    display: none;
}

.content-container.quiz .domanda-contenitore.visibile {
    display: block;
}

.content-container.quiz .domanda-contenitore .domanda {
    display: grid;
    grid-template-columns: 15vw 70vw 15vw;
    align-items: center;
    justify-content: center;
    height: calc(1vw / (4 / 3) * 22);
    position: absolute;
    top: calc(1vw / (4 / 3) * 40);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

.content-container.quiz .domanda-contenitore .domanda .num-domanda {
    font-family: 'RoobertENEL-bold';
    color: #fff;
    font-size: 4vw;
    justify-self: end;
    padding-right: calc(1vw / (4 / 3) * 6);
}

.content-container.quiz .domanda-contenitore .domanda .testo-container {
    background-color: #fff;
    border-radius: 10px;
    width: 100%;
    color: #de007a;
    font-family: 'RoobertENEL-bold';
}

.content-container.quiz .domanda-contenitore .domanda.prodotto .testo-container {
    height: calc(1vw / (4 / 3) * 30);
}

.content-container.quiz .domanda-contenitore .domanda .testo-container .testo {
    padding: calc(1vw / (4 / 3) * 5) 10vw;
    font-size: 2.5vw;
    text-align: center;
}

.content-container.quiz .domanda-contenitore .risposte {
    display: grid;
    grid-template-columns: repeat(3, calc((100% / 3) - 6vw));
    justify-content: center;
    grid-gap: 3vw;
    min-height: calc(1vw / (4 / 3) * 37);
    position: absolute;
    top: calc(1vw / (4 / 3) * 75);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

.content-container.quiz .domanda-contenitore .risposte .risposta {
    border-radius: 10px;
    padding: calc(1vw / (4 / 3) * 2) 1.5vw;
    height: calc(1vw / (4 / 3) * 12);
    cursor: pointer;
    display: grid;
    grid-template-rows: 100%;
    align-items: center;
    font-family: 'RoobertENEL-bold';
    background-color: #fff;
    color: #000;
    text-align: center;
}

.content-container.quiz .domanda-contenitore .risposte .risposta.corretta {
    background-color: #7ebf66;
    color: #fff;
}

.content-container.quiz .domanda-contenitore .risposte .risposta.errata {
    background-color: #fc6464;
    border-color: #fc6464;
    color: #fff;
}

.content-container.quiz .domanda-contenitore .risposte .risposta .testo {
    font-size: 1.8vw;
}

.content-container.quiz .domanda-contenitore .risposte .risposta .testo.grande {
    font-size: 2.5vw;
}

/* RISULTATO */
.content-container.risultato {
    background: url('../images/bg-risultato.jpg') no-repeat center center #de007a;
    background-size: contain;
}

.content-container.risultato .content .claim {
    font-family: 'RoobertENEL-bold';
    font-size: 2.9vw;
    color: #fff;
    position: absolute;
    top: calc(1vw / (4 / 3) * 35);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    text-align: center;
}

.content-container.risultato .content > .lucchetti {
    display: flex;
    gap: 3vw;
    justify-content: space-evenly;
    align-items: baseline;
    position: absolute;
    top: calc(1vw / (4 / 3) * 50);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

.content-container.risultato .content > .lucchetti .lucchetto {
    width: 6vw;
}

.content-container.risultato .content > .lucchetti .lucchetto img {
    width: 100%;
    display: block;
}

/* VOUCHER */
.content-container.voucher {
    background: url('../images/bg-qrcode.jpg') no-repeat center center #de007a;
    background-size: contain;
}

.content-container.voucher .content .claim {
    font-family: 'RoobertENEL-bold';
    font-size: 3.5vw;
    color: #fff;
    position: absolute;
    top: calc(1vw / (4 / 3) * 30);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    text-align: center;
}

.content-container.voucher .content .info {
    font-family: 'RoobertENEL-light';
    font-size: 2.5vw;
    color: #fff;
    position: absolute;
    top: calc(1vw / (4 / 3) * 45);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
    text-align: center;
}

.content-container.voucher .content .qrcode {
    position: absolute;
    top: calc(1vw / (4 / 3) * 55);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 15vw;
}

.content-container.voucher .content .qrcode img {
    width: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 15px;
}

/* FOOTER */
.footer {
    display: grid;
    grid-template-columns: 40vw 20vw 40vw;
    justify-content: center;
    align-items: center;
    height: 10vw;
    border-top: 1px solid #fff;
    color: #de007a;
    position: absolute;
    top: calc(1vw / (4 / 3) * 93);
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100%;
}

.footer .numero {
    font-size: 1.5vw;
    justify-self: left;
    padding-left: 8vw;
    color: #fff;
}

.footer .lucchetti {
    display: flex;
    gap: 3vw;
    justify-content: space-evenly;
    align-items: baseline;
}

.footer .lucchetti .lucchetto {
    width: 4vw;
}

.footer .lucchetti .lucchetto img {
    width: 100%;
    display: block;
}

.footer .avanti {
    justify-self: right;
    padding-right: 8vw;
    cursor: pointer;
}

.footer .avanti img {
    display: none;
}

.content-container.risultato .footer .avanti img {
    display: block;
}

.footer .avanti.attivo img {
    width: 14vw;
    display: block;
}

/* MOBILE WARNING */
.content-container.mobile-warning .content .logo {
    width: 30vw;
    margin: calc(1vw / (4 / 3) * 8) 6vw calc(1vw / (4 / 3) * 10);
}

.content-container.mobile-warning .content .logo img {
    width: 100%;
    display: block;
}

.content-container.mobile-warning .content .logo-elettroquiz {
    width: 85vw;
    margin: calc(1vw / (4 / 3) * 2) auto calc(1vw / (4 / 3) * 8);
}

.content-container.mobile-warning .content .logo-elettroquiz img {
    width: 100%;
    display: block;
}

.content-container.mobile-warning .content .warning {
    width: 50vw;
    margin: 0 auto;
}

.content-container.mobile-warning .content .warning img {
    width: 100%;
    display: block;
}

.content-container.mobile-warning .content .text {
    font-size: 9vw;
    margin-top: calc(1vw / (4 / 3) * 8);
}

.content-container.mobile-warning .content .footer {
    width: 100%;
}

.content-container.mobile-warning .content .footer img {
    width: 100%;
    display: block;
}