@font-face {
    font-family: "NHass Light";
    src: url('../fonts/NHaasGroteskDSPro-45Lt.ttf');
}

@font-face {
    font-family: "NHass";
    src: url('../fonts/NHaasGroteskDSPro-55Rg.ttf');
}

@font-face {
    font-family: "NHass Semibold";
    src: url('../fonts/NHaasGroteskDSPro-65Md.ttf');
}

@font-face {
    font-family: "NHass Bold";
    src: url('../fonts/NHaasGroteskDSPro-75Bd.ttf');
}

body {
    font-family: "NHass", "sans serif";
    font-size: 8px;
    margin: 0px;
    background-color: #F4F3F2;
    max-height: 100vh;
    overflow: hidden;
}

ul {
    padding-left: 0px;
}

ul li {
    list-style: none;
}

.centered {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    width: 100%;
}

.background-white {
    background-color: white;
}

.background-red {
    background-color: #DD280D;
}

.background-green {
    background-color: #6A9613;
}

.background-blue {
    background-color: #0070BC;
}

.background-blue-light {
    background-color: #70AFDC;
}

.background-yellow {
    background-color: #FFC300;
}


/* Colors per a la llista d'unitats */

.background-li-pink {
    background-color: #E59698;
}

.background-li-pink-light {
    background-color: #F2CACA;
}

.background-li-blue {
    background-color: #49B6CB;
}

.background-li-blue-light {
    background-color: #A0E6F5;
}

.background-li-verd {
    background-color: #B1BD3B;
}

.background-li-verd-light {
    background-color: #E9F37F;
}

.background-li-yellow {
    background-color: #FFC557;
}

.background-li-yellow-light {
    background-color: #FBDCA1;
}

.background-li-purple {
    background-color: #808BAC;
}

.background-li-purple-light {
    background-color: #CFD5E6;
}

.background-li-red {
    background-color: #E45347;
}

.background-li-red-light {
    background-color: #EB786D;
}

.background-li-orange {
    background-color: #F79A45;
}

.background-li-orange-light {
    background-color: #F9C392;
}

.cercle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

#img-cercle-revista {
    width: 110px;
}

#cancionero .cercle-gran {
    position: relative;
}

#img-cercle-cancionero {
    width: 170px;
    position: absolute;
    top: 0px;
}

#img-cercle-viva {
    width: 105px;
}

.cercle-petit {
    width: 25px;
    height: 25px;
    margin-left: 10px;
    margin-right: 10px;
    /* background-color: white; */
}

.cercle-mitja {
    width: 50px;
    height: 50px;
}

.cercle-gran {
    width: 98px;
    height: 98px;
}

.cercle-text {
    margin-top: 20px;
}

.text-negre {
    color: #2F2F31;
}

.text-bold {
    font-family: 'NHass Bold';
    font-size: 25px;
    display: contents;
}

.text-small {
    font-size: 15px;
}

.rotate {
    transform: rotate(180deg);
}


/* ESTIL PER L'SCROLL */

::-webkit-scrollbar {
    width: 12px;
    scrollbar-width: thin;
}

 ::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: var(--colorlightgrey);
}

 ::-webkit-scrollbar-thumb {
    border-radius: 20px;
    height: 20px;
}

.background-li-pink-scroll::-webkit-scrollbar-thumb {
    background-color: #E59698;
}

.background-li-blue-scroll::-webkit-scrollbar-thumb {
    background-color: #49B6CB;
}

.background-li-verd-scroll::-webkit-scrollbar-thumb {
    background-color: #B1BD3B;
}

.background-li-yellow-scroll::-webkit-scrollbar-thumb {
    background-color: #FFC557;
}

.background-li-purple-scroll::-webkit-scrollbar-thumb {
    background-color: #808BAC;
}

.background-li-red-scroll::-webkit-scrollbar-thumb {
    background-color: #E45347;
}

.background-li-orange-scroll::-webkit-scrollbar-thumb {
    background-color: #F79A45;
}


/* MODAL */

.modal-dialog {
    max-width: 600px;
    font-size: 14px;
}

.modal-header {
    background-color: #FFC300;
    color: #FFF;
    border-radius: 0px;
    padding: 8px 9px 11px 28px;
    border-bottom: 0px;
}

.modal-header .close {
    margin: 0px;
    padding: 0px;
}

.modal-title {
    font-family: "NHass Bold";
    /* font-size: 18px; */
}

.vertical-alignment-helper {
    display: table;
    height: 100%;
    max-width: 600px;
    pointer-events: none;
    margin: 0 auto;
    padding: 20px;
}

.vertical-align-center {
    /* To center vertically */
    display: table-cell;
    vertical-align: middle;
    pointer-events: none;
}

.modal-content {
    border-radius: 0px;
    border: 2px solid #FFC300;
    /* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
    width: inherit;
    height: inherit;
    /* To center horizontally */
    margin: 0 auto;
    pointer-events: all;
}


/*-- PART HORITZONTAL SUPERIOR: ES MOSTRA EN TOTES LES PANTALLES ----*/

#header-superior {
    height: 80px;
    display: flex;
}

#header-superior div {
    display: flex;
    justify-content: center;
    align-items: center;
}

#header-superior .contenidor-logo {
    background-color: #DD280D;
    width: 40%;
}

#header-superior .contenidor-logo .logo img {
    width: 130px;
}

#header-superior .contenidor-info {
    background-color: #0070BC;
    width: 60%;
    justify-content: flex-start;
}

#header-superior .contenidor-info .logo_mapaches {
    margin-left: 30px;
}

#header-superior .contenidor-info .logo_mapaches img {
    width: 172px;
}

#header-superior .contenidor-info .logo_mapaches .etapa {
    display: flex;
    justify-content: flex-start;
}

#header-superior .contenidor-info .contenidor-info-perfil {
    flex-grow: 1;
    max-width: 285px;
    display: flex;
    justify-content: flex-end;
}


/*-- PART HORITZONTAL SUPERIOR GROGA: ES MOSTRA EN TOTES LES PANTALLES ----*/

#header-recursos-unitats-contenidor {
    background-color: white;
    height: 76px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

#header-recursos-unitats {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #FFC300;
}

#header-recursos-unitats .recursos-unitats-buit {
    width: 40%;
}

#header-recursos-unitats .recursos-unitats-text {
    width: 60%;
    font-size: 24px;
    font-family: "NHass Semibold";
    display: flex;
    justify-content: start;
}

#header-registre .text-registre {
    width: 58%;
}


/*-- CONTENIDOR CENTRAL DEL CONTINGUT DEL DVD----*/

#contingut-dvd {
    display: flex;
    flex-wrap: wrap-reverse;
}


/* #contingut-dvd>#recursos-unitat+#contingut-unitats {
    border-left: 4px solid white;
} */


/*-- CONTENIDOR CERCLES OPCIONS----*/

#recursos {
    width: 40%;
    margin-top: 30px;
}

#recursos .recursos-opcions {
    flex-wrap: wrap;
    font-family: "NHass Bold";
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
}

#recursos .recursos-opcions a {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#recursos .recursos-opcions a:hover {
    text-decoration: none;
}

#recursos .recursos-opcions .cercle-recursos>div {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#recursos .recursos-opcions>div.cercle-recursos+div.cercle-recursos {
    margin-top: 40px;
}

#recursos .recursos-opcions #revista:hover .cercle-text {
    color: #0070BC;
}

#recursos .recursos-opcions #cancionero:hover .cercle-text {
    color: #DD280D;
}

#recursos .recursos-opcions #viva:hover .cercle-text {
    color: #FFC300;
}


/*-- CONTENIDOR PEL LLISTAT DE RECURSOS DE CADA UNITAT ----*/

#recursos-unitat {
    position: absolute;
    width: 100%;
    z-index: 1;
    /* margin-top: 8px; */
    font-size: 20px;
    line-height: 23px;
    top: -30px;
    border-right: 4px solid white;
    display: flex;
    flex-direction: column;
    height: 656px;
}

#recursos-unitat ul li {
    display: flex;
    align-items: center;
    padding: 10px 0px;
}

#recursos-unitat ul>li+li {
    margin-top: 6px;
}

#recursos-unitat ul li .text-recurs {
    max-width: 75%;
    padding-right: 10px;
    line-height: 18px;
}

#recursos-unitat #recursos-unitat-material {
    overflow-x: hidden;
    overflow-y: auto;
}

#recursos-unitat #recursos-unitat-material li {
    min-height: 38px;
    cursor: pointer;
}


/*--- CONTENIDOR PER MOSTAR LES ACTIVITATS ----*/

.dvd-contingut-principal {
    display: flex;
    flex-grow: 1;
    align-items: center;
    height: auto;
}

#recursos-unitat-material {
    scrollbar-color: var(--color1) var(--colorlightgrey);
    overflow-x: hidden;
    overflow-y: auto;
}

#portada_0,
#portada_1,
#portada_2,
#portada_3,
#portada_4,
#portada_5,
#portada_6 {	
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

#portada_0 {
	background-image: url(../static/img/portades_unitats/unitat_0.png);
}
#portada_1 {
    background-image: url(../static/img/portades_unitats/unitat_1.png);
}
#portada_2 {
    background-image: url(../static/img/portades_unitats/unitat_2.png);
}
#portada_3 {
    background-image: url(../static/img/portades_unitats/unitat_3.png);
}
#portada_4 {
    background-image: url(../static/img/portades_unitats/unitat_4.png);
}
#portada_5 {
    background-image: url(../static/img/portades_unitats/unitat_5.png);
}
#portada_6 {
    background-image: url(../static/img/portades_unitats/unitat_6.png);
}
.dvd-continguts-visuals {
    display: flex;
    flex-direction: column;
    /* justify-content: center; */
}

.dvd-continguts-visuals #content,
.dvd-continguts-visuals #contentmobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    width: auto;
    flex-wrap: nowrap;
    flex-grow: 0.5;
    flex-shrink: 1;
    /* padding-bottom: 10px; */
}

.dvd-continguts-visuals #content header,
.dvd-continguts-visuals #contentmobile header {
    /* background-color: var(--color1); */
    padding: 10px 10px;
    color: white;
    width: 100%;
    font-family: "NHass Bold";
    font-size: 16px;
    height: 40px;
}

.dvd-continguts-visuals #content .imatgeArxiu.imatge {
    height: calc(100vh - 336px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.dvd-continguts-visuals #content .imatgeArxiu img.defaultcontenticonsize {
    max-width: 100px;
    max-height: 100px;
}

.dvd-continguts-visuals #content .imatgeArxiu.dinamicimg {
    display: flex;
    width: 100%;
    max-height: 100%;
}

.dvd-continguts-visuals #content .imatgeArxiu img {
    max-height: 100%;
    max-width: 100%;
}

.dvd-continguts-visuals #content .text {
    font-family: "NHass Bold";
    font-size: 22px;
    color: var(--color1);
    padding: 0.5rem 0rem 1.5rem 0rem;
    text-align: center;
    display: block;
    margin-bottom: 45px;
}

.dvd-continguts-visuals #content .text a {
    text-decoration: none;
    color: var(--color1);
}

.dvd-continguts-visuals #content .credits,
.dvd-continguts-visuals #contentmobile .credits {
    background-color: #4d4d4d;
    color: white;
    padding: 10px;
    margin: 0 auto;
}

.dvd-continguts-visuals #contentmobile .credits p,
.dvd-continguts-visuals #content .credits p {
    padding: 0px;
    margin: 0;
}

.dvd-continguts-visuals #contentPortada {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.dvd-continguts-visuals #contentPortada img {
    width: auto;
    height: auto;
    max-width: 90%;
    max-height: 90%;
}


/*-- CONTENIDOR PEL LLISTAT D'UNITATS DEL DVD----*/

#contingut-unitats {
    width: 60%;
}

#contingut-unitats ul {
    margin-bottom: 0px;
}

#contingut-unitats ul li {
    min-height: 75px;
    display: flex;
}

#contingut-unitats ul>li+li {
    margin-top: 8px;
}

#contingut-unitats ul li>div+div {
    margin-left: 8px;
}

#contingut-unitats ul li div {
    display: flex;
    align-items: center;
}

#contingut-unitats ul li div.desplegable-icona {
    justify-content: center;
    cursor: pointer;
}


/* #contingut-unitats ul li div.desplegable-icona:hover svg {
    rotate: 90;
} */

#contingut-unitats ul li div.desplegable-icona img {
    height: 30px;
    margin-right: 15px;
    margin-left: 15px;
}

#contingut-unitats ul li div.desplegable-text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 10px;
    line-height: 27px;
    padding-bottom: 10px;
}

#contingut-unitats ul li div.desplegable-text div {
    width: 90%;
}

#contingut-unitats ul li div.desplegable-text .unitat-numero {
    font-family: "NHass Light";
    font-size: 18px;
}

#contingut-unitats ul li div.desplegable-text .unitat-titol {
    font-family: "NHass Bold";
    font-size: 26px;
}

#contingut-unitats ul li#todos-los-recursos div.download {
    flex-grow: 1;
    width: unset;
    display: flex;
}

#contingut-unitats ul li#todos-los-recursos div.download img {
    width: 40px;
    margin-left: 10px;
}

#contingut-unitats ul li#todos-los-recursos div.unitat-titol {
    line-height: 27px;
    margin-left: 26px;
}

#contingut-unitats ul li#todos-los-recursos div.informacio {
    width: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#contingut-unitats ul li#todos-los-recursos div.informacio .cercle-petit {
    width: 32px;
    height: 32px;
}


/* #contingut-unitats ul li#todos-los-recursos div.unitat-titol .icona-download {
    width: 58px;
    background-color: red;
    display: flex;
    justify-content: center;
} */


/* #contingut-unitats ul li#todos-los-recursos div.cercle-petit {
    width: 32px;
    height: 32px;
} */


/* disseny específic: excepcions generals  */

@media screen and (min-width:425px) {}


/* disseny específic sm */

@media screen and (min-width: 576px) {}


/* disseny específic md */

@media screen and (min-width:768px) {
    .cercle-text {
        width: unset;
    }
    /*-- PART HORITZONTAL SUPERIOR: ES MOSTRA EN TOTES LES PANTALLES ----*/
    #header-superior .contenidor-logo,
    #header-superior .contenidor-central,
    #header-recursos-unitats .recursos-unitats-text {
        width: 34%;
    }
    #header-superior .contenidor-central .centra-contingut {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 auto;
    }
    #header-superior .contenidor-central img {
        width: 162px;
    }
    #header-superior .contenidor-info {
        width: 36%;
    }
    /*-- PART HORITZONTAL SUPERIOR GROGA: ES MOSTRA EN TOTES LES PANTALLES ----*/
    #header-recursos-unitats-contenidor {
        height: 48px;
    }
    #header-recursos-unitats {
        height: 36px;
    }
    #header-recursos-unitats .recursos-unitats-buit {
        width: 65.5%;
    }
    #header-recursos-unitats .recursos-unitats-text {
        font-size: 18px;
        /* justify-content: start;
        padding-left: 29px; */
    }
    /*-- CONTENIDOR CENTRAL DEL CONTINGUT DEL DVD----*/
    #contingut-dvd {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }
    /*-- CONTENIDOR CERCLES OPCIONS----*/
    #recursos {
        width: 66%;
        /* height: 225px; */
        margin-top: 0px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #recursos .recursos-opcions {
        width: 500px;
        font-size: 18px;
        display: flex;
        align-items: flex-start;
        justify-content: space-around;
    }
    #recursos .recursos-opcions .cercle-recursos {
        width: 33%;
    }
    #recursos .recursos-opcions>div.cercle-recursos+div.cercle-recursos {
        margin: 0px;
    }
    /*--- CONTENIDOR PER MOSTAR LES ACTIVITATS ----*/
    .dvd-contingut-principal {
        width: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .dvd-contingut-principal .portada_unitat {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .dvd-contingut-principal .portada_unitat img {
        height: 100%;
    }
    /*-- CONTENIDOR PEL LLISTAT DE RECURSOS DE CADA UNITAT ----*/
    #recursos-unitat {
        /* width: 100%; */
        /* height: 285px; */
        height: 100%;
        display: flex;
        flex-direction: row-reverse;
        margin-top: 0px;
        font-size: 14px;
        line-height: 13px;
        top: 0px;
    }
    #recursos-unitat>div+div {
        border-right: 2px solid white;
    }
    #recursos-unitat>#recursos-unitat-material+#recursos-unitat-imatge {
        border-right: 4px solid white;
    }
    #recursos-unitat #recursos-unitat-material {
        width: 50%;
    }
    #recursos-unitat #recursos-unitat-imatge {
        width: 50%;
    }
    #recursos-unitat ul li {
        padding: 0px;
    }
    #recursos-unitat ul li .icona-recurs {
        background-size: 15px;
        width: 40px;
    }
    /*-- CONTENIDOR PEL LLISTAT D'UNITATS DEL DVD----*/
    #contingut-unitats {
        width: 35%;
    }
    #contingut-unitats ul li {
        min-height: 26px;
    }
    #contingut-unitats ul>li+li {
        margin-top: 4px;
    }
    #contingut-unitats ul li>div+div {
        margin-left: 4px;
    }
    #contingut-unitats ul li div:first-child {
        width: 25px;
    }
    #contingut-unitats ul li div.desplegable-icona img {
        width: 7px;
    }
    #contingut-unitats ul li div.desplegable-text {
        flex-direction: row;
        line-height: 13px;
    }
    #contingut-unitats ul li div.desplegable-text .unitat-numero {
        font-size: 10px;
        width: 75px;
        padding-left: 10px;
        padding-right: 10px;
        align-self: start;
    }
    #contingut-unitats ul li div.desplegable-text .unitat-titol,
    #contingut-unitats ul li#todos-los-recursos div {
        font-size: 12px;
    }
    #contingut-unitats ul li div.no-unitat-numero {
        justify-content: flex-start;
        padding-left: 10px;
    }
    #contingut-unitats ul li#todos-los-recursos div.download {
        justify-content: start;
    }
    #contingut-unitats ul li#todos-los-recursos div.download img {
        width: 20px;
        height: 20px;
    }
    #contingut-unitats ul li#todos-los-recursos div.unitat-titol .icona-download {
        width: 120px;
    }
    #contingut-unitats ul li#todos-los-recursos div.unitat-titol {
        margin-left: 15px;
    }
    #contingut-unitats ul li#todos-los-recursos div.informacio {
        width: 30px;
    }
    #contingut-unitats ul li#todos-los-recursos div.informacio .cercle-petit {
        width: 15px;
        height: 15px;
        margin-left: 0px;
        margin-right: 0px;
    }
    #contingut-unitats ul li#todos-los-recursos div.informacio .cercle-petit img {
        height: 10px;
    }
}


/* disseny específic lg */

@media screen and (min-width:992px) {
    .cercle-gran {
        width: 130px;
        height: 130px;
    }
    .cercle-text {
        max-width: 70%;
    }
    #img-cercle-revista {
        width: 160px;
    }
    #img-cercle-cancionero {
        width: 226px;
    }
    #img-cercle-viva {
        width: 140px;
    }
    /*-- PART HORITZONTAL SUPERIOR: ES MOSTRA EN TOTES LES PANTALLES ----*/
    #header-superior {
        height: 100px;
    }
    /*-- PART HORITZONTAL SUPERIOR GROGA: ES MOSTRA EN TOTES LES PANTALLES ----*/
    #header-recursos-unitats-contenidor {
        height: 60px;
    }
    #header-recursos-unitats {
        height: 48px;
    }
    #header-recursos-unitats .recursos-unitats-buit {
        width: 60%;
    }
    #header-recursos-unitats .recursos-unitats-text {
        font-size: 24px;
        /* justify-content: start;
        padding-left: 29px; */
    }
    /*-- CONTENIDOR CERCLES OPCIONS----*/
    #recursos {
        /* height: 280px; */
    }
    #recursos .recursos-opcions {
        width: 640px;
    }
    /*-- CONTENIDOR PEL LLISTAT DE RECURSOS DE CADA UNITAT ----*/
    #recursos-unitat {
        /* height: 314px; */
    }
    /*-- CONTENIDOR PEL LLISTAT D'UNITATS DEL DVD----*/
    #contingut-unitats ul li {
        min-height: 34px;
    }
    #contingut-unitats ul>li+li {
        margin-top: 5px;
    }
    #contingut-unitats ul li>div+div {
        margin-left: 5px;
    }
    #contingut-unitats ul li div:first-child {
        width: 35px;
    }
    #contingut-unitats ul li div.desplegable-icona img {
        width: 9px;
    }
    #contingut-unitats ul li div.desplegable-text {
        line-height: 15px;
        justify-content: unset;
    }
    #contingut-unitats ul li div.desplegable-text .unitat-numero {
        font-size: 13px;
    }
    #contingut-unitats ul li div.desplegable-text .unitat-titol,
    #contingut-unitats ul li#todos-los-recursos span {
        font-size: 15px;
        max-width: 190px;
    }
    #contingut-unitats ul li div.no-unitat-numero {
        padding-left: 10px;
    }
    #contingut-unitats ul li#todos-los-recursos div.download {
        flex-grow: 1;
        width: unset;
        display: flex;
    }
    #contingut-unitats ul li#todos-los-recursos div.download img {
        width: 21px;
        height: 21px;
        margin-left: 7px;
    }
    #contingut-unitats ul li#todos-los-recursos div.informacio {
        width: 40px;
    }
    #contingut-unitats ul li#todos-los-recursos div.informacio .cercle-petit {
        width: 20px;
        height: 20px;
    }
    #contingut-unitats ul li#todos-los-recursos div.informacio .cercle-petit img {
        height: 12px;
    }
}

@media screen and (min-width: 992px) {
    #header-superior,
    #contingut-dvd {
        max-width: 992px;
        margin: 0 auto;
    }
    #header-recursos-unitats .recursos-unitats-text {
        margin: 0 auto;
        display: flex;
        justify-content: flex-end;
        width: 705px;
    }
}


/* disseny específic xl */

@media screen and (min-width:1200px) {
    /*-- CONTENIDOR CENTRAL DEL CONTINGUT DEL DVD----*/
    #header-superior,
    #contingut-dvd {
        max-width: 992px;
        margin: 0 auto;
    }
    #recursos-unitat {
        max-width: 676px;
    }
}

.modal-open,
#infoModal {
    padding-right: 0px !important;
}

#playerSection {
    width: 100%;
    /* height: 100%; */
}

#player {
    width: 100%;
    height: 100%;
}