.view-infoscreen .views-row .qr-slide {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    opacity: 0;
    /* transition: opacity 1000ms ease; */
    z-index: 10;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, cover;
    background-position: bottom left, center center;
}

.view-infoscreen .views-row.hecap .qr-slide { background-image: url(../../assets/filigrane/filigrana-waves-hecap.svg), url(../../assets/images/bg-hp-hecap.webp); }
.view-infoscreen .views-row.cmsp .qr-slide { background-image: url(../../assets/filigrane/filigrana-waves-cmsp.svg), url(../../assets/images/bg-hp-cmsp.webp); }
.view-infoscreen .views-row.math .qr-slide { background-image: url(../../assets/filigrane/filigrana-waves-math.svg), url(../../assets/images/bg-hp-math.webp); }
.view-infoscreen .views-row.esp .qr-slide { background-image: url(../../assets/filigrane/filigrana-waves-esp.svg), url(../../assets/images/bg-hp-esp.webp); }
.view-infoscreen .views-row.qls .qr-slide { background-image: url(../../assets/filigrane/filigrana-waves-qls.svg), url(../../assets/images/bg-hp-qls.webp); }
.view-infoscreen .views-row.sti .qr-slide { background-image: url(../../assets/filigrane/filigrana-waves-sti.svg), url(../../assets/images/bg-hp-sti.webp); }

.view-infoscreen .views-row .qr-slide::before,
.view-infoscreen .views-row .qr-slide::after {
    content: '';
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}
.view-infoscreen .views-row .qr-slide::after { 
    opacity: 1; 
    background: linear-gradient(to bottom left, #000 5%, rgba(0, 0, 0, .2) 80%)
}


.view-infoscreen .views-row.hecap .qr-slide::before { background: linear-gradient(to top right, var(--hecap), transparent 60%); }
.view-infoscreen .views-row.cmsp .qr-slide::before { background: linear-gradient(to top right, var(--cmsp), transparent 60%); }
.view-infoscreen .views-row.math .qr-slide::before { background: linear-gradient(to top right, var(--math), transparent 60%); }
.view-infoscreen .views-row.esp .qr-slide::before { background: linear-gradient(to top right, var(--esp), transparent 60%); }
.view-infoscreen .views-row.qls .qr-slide::before { background: linear-gradient(to top right, var(--qls), transparent 60%); }
.view-infoscreen .views-row.sti .qr-slide::before { background: linear-gradient(to top right, var(--sti), transparent 60%); }


.view-infoscreen .views-row .qr-slide.visible {
    /* transition: opacity 1000ms ease; */
    opacity: 1;
}


.view-infoscreen .views-row .qr-slide .qr-wrapper {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: calc(50vh + 10vw);
    height: 100vh;
    background-color: rgba(0, 0, 0, .3);
}

.view-infoscreen .views-row .qr-slide .qr-wrapper .qr-svg {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 50vh;
    height: 50vh;
    bottom: 50%;
    right: 5vw;
    transform: translateY(60%);
}

.view-infoscreen .views-row.hecap .qr-wrapper .qr-svg { background-image: url(../../assets/qrcodes/qr_wrapper_hecap.svg); } 
.view-infoscreen .views-row.cmsp .qr-wrapper .qr-svg { background-image: url(../../assets/qrcodes/qr_wrapper_cmsp.svg); } 
.view-infoscreen .views-row.math .qr-wrapper .qr-svg { background-image: url(../../assets/qrcodes/qr_wrapper_math.svg); } 
.view-infoscreen .views-row.esp .qr-wrapper .qr-svg { background-image: url(../../assets/qrcodes/qr_wrapper_esp.svg); } 
.view-infoscreen .views-row.qls .qr-wrapper .qr-svg { background-image: url(../../assets/qrcodes/qr_wrapper_qls.svg); } 
.view-infoscreen .views-row.sti .qr-wrapper .qr-svg { background-image: url(../../assets/qrcodes/qr_wrapper_sti.svg); } 

.view-infoscreen .views-row .qr-slide .qr-code {
    position: absolute;
    width: 25vh;
    height: 25vh;
    top: 45%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: 1vw;
}

.view-infoscreen .views-row.hecap .qr-code { background-image: url(../../assets/qrcodes/qr_code_hecap.svg); }
.view-infoscreen .views-row.cmsp .qr-code { background-image: url(../../assets/qrcodes/qr_code_cmsp.svg); }
.view-infoscreen .views-row.math .qr-code { background-image: url(../../assets/qrcodes/qr_code_math.svg); }
.view-infoscreen .views-row.esp .qr-code { background-image: url(../../assets/qrcodes/qr_code_esp.svg); }
.view-infoscreen .views-row.qls .qr-code { background-image: url(../../assets/qrcodes/qr_code_qls.svg); }
.view-infoscreen .views-row.sti .qr-code { background-image: url(../../assets/qrcodes/qr_code_sti.svg); }


/* -------------------------- BOTTOM ROW QR CODE --------------------------------- */
.view-infoscreen .views-row .columns .qr-wrapper {
    content: '';
    position: relative;
    width: 100%;
    height: 100%;
    grid-column-start: 4;
}

.view-infoscreen .views-row .columns .qr-wrapper .qr-svg {
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    position: absolute;
    width: 90%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.view-infoscreen .views-row .columns .qr-code {
    position: absolute;
    width: 11vw;
    height: 11vw;
    top: 32%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: .5vw;
}
/* ----------------------------------------------------------- */

.view-infoscreen > .view-content > .views-row .qr-slide .info {
    grid-template-columns: 3fr 23fr 4fr 1fr 1fr;
    position: relative;
    z-index: 11;
}

.view-infoscreen > .view-content > .views-row .qr-slide .info .logo-section,
.view-infoscreen > .view-content > .views-row .qr-slide .info .title1,
.view-infoscreen > .view-content > .views-row .qr-slide .info .title2 {
    transform: translateY(calc(45vh - 50%)) translateX(7vw) scale(1.5);
    transform-origin: left top;
}
.view-infoscreen > .view-content > .views-row .qr-slide .info .title1 { 
    padding-bottom: 1vw; 
    transform: translateY(calc(41.5vh - 50%)) translateX(10vw) scale(1.5);
}
.view-infoscreen > .view-content > .views-row .qr-slide .info .title2 { 
    max-width: 20vw; 
    font-weight: 300;
    transform: translateY(calc(42.5vh - 50%)) translateX(10vw) scale(1.8);
}


.view-infoscreen > .view-content > .views-row .qr-slide .info::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 15vh;
    width: 15vh;
    opacity: .4;
    z-index: -1;
}
.view-infoscreen > .view-content > .views-row .qr-slide .info::after {
    content: '';
    position: absolute;
    top: 10vh;
    left: 7vh;
    height: 75vh;
    width: 80vh;
    opacity: 0.2;
    z-index: -1;
}

.view-infoscreen > .view-content > .views-row .qr-slide .info .title2::after {
    content: '';
    position: absolute;
    width: 13vh;
    height: 13vh;
    top: -14vh;
    right: 0;
    opacity: .1;
    z-index: -1;
}

.view-infoscreen > .view-content > .views-row.hecap .qr-slide .info::before,
.view-infoscreen > .view-content > .views-row.hecap .qr-slide .info::after,
.view-infoscreen > .view-content > .views-row.hecap .qr-slide .info .title2::after { background-color: var(--hecap); }
.view-infoscreen > .view-content > .views-row.cmsp .qr-slide .info::before,
.view-infoscreen > .view-content > .views-row.cmsp .qr-slide .info::after,
.view-infoscreen > .view-content > .views-row.cmsp .qr-slide .info .title2::after { background-color: var(--cmsp); }
.view-infoscreen > .view-content > .views-row.math .qr-slide .info::before,
.view-infoscreen > .view-content > .views-row.math .qr-slide .info::after,
.view-infoscreen > .view-content > .views-row.math .qr-slide .info .title2::after { background-color: var(--math); }
.view-infoscreen > .view-content > .views-row.esp .qr-slide .info::before,
.view-infoscreen > .view-content > .views-row.esp .qr-slide .info::after,
.view-infoscreen > .view-content > .views-row.esp .qr-slide .info .title2::after { background-color: var(--esp); }
.view-infoscreen > .view-content > .views-row.qls .qr-slide .info::before,
.view-infoscreen > .view-content > .views-row.qls .qr-slide .info::after,
.view-infoscreen > .view-content > .views-row.qls .qr-slide .info .title2::after { background-color: var(--qls); }
.view-infoscreen > .view-content > .views-row.sti .qr-slide .info::before,
.view-infoscreen > .view-content > .views-row.sti .qr-slide .info::after,
.view-infoscreen > .view-content > .views-row.sti .qr-slide .info .title2::after { background-color: var(--sti); }