@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: #452779;
    /*background: linear-gradient(180deg, #452779 0%, #452779 85%, #ff006f 85%, #ff006f 100%);*/
    /*height: 100vh;*/
    color: #fff;
    font-family: 'RoobertENEL';
}

.content {
    width: 100%;
    /*height: 100vh;*/
    height: calc(1vw / (16 / 9) * 100);
}

.content .header {
    display: grid;
    grid-template-columns: 5% 50% 45%;
    padding: calc(1vw / (16 / 9) * 3.6) 2vw;
    height: calc(1vw / (16 / 9) * 9);
    background-color: #452779;
}
.content .header .home {
    text-align: left;
    align-self: center;
}
.content .header .home img {
    width: 3vw;
}
.content .header .titolo .top {
    font-size: 2vw;
    color: #ff006f;
    letter-spacing: 1px;
    font-family: 'RoobertENEL-bold';
}
.content .header .titolo .bottom {
    font-size: 1.5vw;
}
.content .header .logo {
    text-align: right;
}
.content .header .logo img {
    width: 15vw;
    align-self: center;
}

/* HOME */
.content .prodotti-container {
    background-color: #452779;
    width: calc(100% - 4vw);
    height: calc(1vw / (16 / 9) * calc(91 - (2 * 3.6)));
    padding: 0 2vw;
    display: grid;
    grid-template-columns: repeat(3, calc((100% - 2vw) / 3));
    grid-template-rows: calc(65% / (16 / 9)) calc(65% / (16 / 9));
    grid-column-gap: 1vw;
    grid-row-gap: calc(1vw / (16 / 9) * 1.78);
}
.content .prodotti-container .prodotto {
    background-color: #ff006f;
}
.content .prodotti-container .prodotto a {
    display: grid;
    grid-template-rows: 70% 30%;
    height: 100%;
    text-decoration: none;
    color: #fff;
}
.content .prodotti-container .prodotto:nth-child(4),
.content .prodotti-container .prodotto:nth-child(5) {
    grid-template-columns: 40% 60%;
    grid-template-rows: 100%;
}
.content .prodotti-container .prodotto .immagine {
    text-align: center;
    align-self: center;
    height: 80%;
    width: 80%;
    justify-self: center;
}
.content .prodotti-container .prodotto .immagine img {
    max-width: 100%;
    max-height: 100%;
}
.content .prodotti-container .prodotto .descrizione {
    text-align: center;
    align-self: center;
    font-size: 1.5vw;
    font-family: 'RoobertENEL-bold';
}

/* PRODOTTO - DOMANDA */
.content .prodotto-container {
    width: 100%;
    /*height: calc(100vh - calc(1vw / (16 / 9) * calc((9 + 2 * 3.6))));*/
    height: calc(1vw / (16 / 9) * calc(91 - (2 * 3.6)));
    background: linear-gradient(175deg, #452779 0%, #452779 35%, #ff006f 35%, #ff006f 100%);
}
.content .prodotto-container .prodotto {
    display: grid;
    grid-template-rows: 35% 47% 18%;
    justify-content: center;
    align-items: start;
    height: 100%;
}
.content .prodotto-container .prodotto .domanda {
    text-align: center;
    font-size: 3vw;
    font-family: 'RoobertENEL-bold';
}
.content .prodotto-container .prodotto .immagine {
    text-align: center;
    height: calc(100% - calc(1vw / (16 / 9) * 3));
    padding: 1vw calc(1vw / (16 / 9) * 1.5);
}
.content .prodotto-container .prodotto .immagine a {
    width: auto;
    height: 100%;
    display: grid;
    grid-template-rows: 100%;
    justify-content: center;
    align-items: center;
}
.content .prodotto-container .prodotto .immagine a img {
    max-width: 100%;
    max-height: 100%;
    margin: 0 auto;
}
.content .prodotto-container .prodotto .nome {
    text-align: center;
    font-size: 3vw;
    font-family: 'RoobertENEL-bold';
    align-self: center;
}

.content .prodotto-container .prodotto.prod-3,
.content .prodotto-container .prodotto.prod-5 {
    grid-template-rows: 35% 65%;
}
.content .prodotto-container .prodotto.prod-3 .domanda,
.content .prodotto-container .prodotto.prod-5 .domanda {
    grid-area: 1 / 1 / span 1 / span 2;
}
.content .prodotto-container .prodotto.prod-3 .immagine,
.content .prodotto-container .prodotto.prod-5 .immagine {
    grid-area: 2 / 1 / span 1 / span 1;
    height: 90%;
    padding: 5%;
}
.content .prodotto-container .prodotto.prod-3 .immagine a,
.content .prodotto-container .prodotto.prod-5 .immagine a {
    justify-content: right;
}
.content .prodotto-container .prodotto.prod-3 .nome,
.content .prodotto-container .prodotto.prod-5 .nome {
    grid-area: 2 / 2 / span 1 / span 1;
    align-self: center;
    justify-self: left;
}

/* QUIZ */
.content .quiz-container {
    width: calc(100% - 10vw);
    height: calc(1vw / (16 / 9) * calc(91 - (2 * 3.6)));
    padding: 0 5vw;
    /*display: grid;*/
    /*align-items: center;*/
    background-color: #452779;
}
.content .quiz-container .domanda {
    text-align: center;
    font-size: 3vw;
    font-family: 'RoobertENEL-bold';
}
.content .quiz-container .risposte {
    display: grid;
    grid-template-columns: repeat(4, calc((100% - 18vw) / 4));
    grid-column-gap: 6vw;
    margin-top: calc(1vw / (16 / 9) * 16);
}
.content .quiz-container .risposte .risposta {
    background-color: #ff006f;
    cursor: pointer;
    font-size: 5vw;
    text-align: center;
    height: calc(1vw / (16 / 9) * 30);
    display: grid;
    align-items: center;
    font-family: 'RoobertENEL-bold';
}
.content .quiz-container .risposte .risposta div {

}

/* RISPOSTA */
.content .risposta-container {
    width: calc(100% - 4vw);
    height: calc(1vw / (16 / 9) * calc(91 - (2 * 3.6)));
    padding: 0 2vw;
    display: grid;
    align-items: center;
    justify-content: center;
    font-size: 9vw;
    font-family: 'RoobertENEL-bold';
    background-color: #452779;
}
.content .risposta-container .risposta {

}
.content .risposta-container .risposta.esatta a {
    text-decoration: none;
    color: #ff006f;
}
.content .risposta-container .risposta a {
    text-decoration: none;
    color: #fff;
}

/* SCOPRI PRODOTTO */
.content .scopri-prodotto-container {
    width: 100%;
    /*height: calc(100vh - calc(1vw / (16 / 9) * calc((9.2 + 2 * 3.6))));*/
    height: calc(1vw / (16 / 9) * calc(91 - (2 * 3.6)));
    background: linear-gradient(175deg, #452779 0%, #452779 35%, #ff006f 35%, #ff006f 100%);
}
.content .scopri-prodotto-container .prodotto {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 38% 62%;
    justify-content: center;
    align-items: center;
    height: 100%;
}
.content .scopri-prodotto-container .prodotto .risposta {
    text-align: center;
    font-size: 1.15vw;
    height: 100%;
    display: grid;
    grid-template-columns: 60% 40%;
    align-content: start;
}
.content .scopri-prodotto-container .prodotto .risposta .esito {
    justify-self: right;
    font-family: 'RoobertENEL-bold';
    font-size: 4vw;
    align-self: center;
    padding-right: 3vw;
}
.content .scopri-prodotto-container .prodotto .risposta .esito.esatta {
    color: #ff006f;
}
.content .scopri-prodotto-container .prodotto .risposta .dettaglio {
    justify-self: left;
    padding-left: 3vw;
}
.content .scopri-prodotto-container .prodotto .risposta .colore {
    color: #ff006f;
    font-size: 1.6vw;
}
.content .scopri-prodotto-container .prodotto .risposta .colore.esatta {
    display: none;
}
.content .scopri-prodotto-container .prodotto .risposta .percentuale {
    font-size: 7.5vw;
    font-family: 'RoobertENEL-bold';
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto {
    display: grid;
    grid-template-columns: 58% 38%;
    grid-column-gap: 4%;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .disclaimer {
    grid-area: 1 / 1 / span 1 / span 2;
    text-align: center;
    color: #452779;
    font-size: 2vw;
    font-family: 'RoobertENEL-bold';
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x {
    display: grid;
    height: 100%;
    align-items: center;
    grid-area: 2 / 1;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .immagine {
    grid-area: 2 / 1 / span 1 / span 1;
    justify-self: right;
    height: calc(1vw / (16 / 9) * 45);
    display: grid;
    align-content: center;
    padding: 1vw calc(1vw / (16 / 9) * 1.5);
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .immagine img {
    max-width: 90%;
    max-height: calc(1vw / (16 / 9) * 45);
    margin: 0 auto;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto {
    grid-area: 2 / 2 / span 1 / span 1;
    text-align: right;
    /*margin-top: calc(1vw / (16 / 9) * 4);*/
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .nome {
    font-size: 2vw;
    font-family: 'RoobertENEL-bold';
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container {
    font-family: 'RoobertENEL-bold';
    font-size: 1.3vw;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .sconto {
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 1vw;
    align-items: center;
    justify-content: right;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .sconto .prezzo {
    display: inline;
    position: relative;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .sconto .prezzo:before {
    content: '';
    width: 100%;
    border-top: 2px solid #452779;
    position: absolute;
    transform: rotate(-15deg);
    bottom: calc(1vw / (16 / 9) * 1.3);
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .sconto .prezzo span {
    font-size: 0.6vw;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .sconto .prezzo-scontato {
    display: inline;
    color: #452779;
    font-size: 5vw;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .sconto .prezzo-scontato span {
    font-size: 2vw;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .dettaglio-prezzo {

}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .enel-x .info-acquisto .prezzo-container .condizioni-acquisto {
    font-family: 'RoobertENEL-light';
    font-size: 1vw;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .info {
    font-size: 2vw;
    align-self: center;
    grid-area: 2 / 2;
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .info .vantaggi {
    font-family: 'RoobertENEL-bold';
    margin-bottom: calc(1vw / (16 / 9) * 4);
}
.content .scopri-prodotto-container .prodotto .dettagli-prodotto .info .dettaglio-vantaggi span {
    font-family: 'RoobertENEL-bold';
}

/* FOOTER */
.content .footer {
    background-color: #ff006f;
    width: 100%;
    height: calc(100vh - calc(1vw / (16 / 9) * 100));
    display: none;
}
.content.prodotto .footer,
.content.scopri-prodotto .footer {
    display: block;
}