*{
            font-family: 'Carbona Test', sans-serif;
        }
        @import url('https://fonts.cdnfonts.com/css/carbona-test');
        .topbar {
            background: #282C63;
            position: fixed;
            width: 100%;
            height: 50px;
            top:0;
            left: 0;
            right: 0;
            z-index: 10;
            padding-left: 20px;
            float: left;
        }

        .NomArtiva {
            width: 18%;
            height: 23px;
            margin-top: 13px;
            margin-right: 34px;
            background-image: url(../img/Topbar_Principal/Artiva.png);
            background-repeat: no-repeat;
            background-size: 100%;
            float: left;
        }

        .Temps {
            padding-top: 6px;
            width: 45%;
            height: 44px;
            float: left;
        }

        .compte {
            width: 43px;
            height: 27px;
            float: left;
            color: white;
            text-align: center;
            font-size: 0.70rem;
            font-family: 'Carbona Test', sans-serif;
            font-weight: bold;
            margin-right: 10px;
        }

        .numero {
            width: 43px;
            height: 27px;
            color: white;
            background-color: white;
            border-radius: 8px;
            margin-bottom: 1px;
        }

        .dies {
            padding-top: -30px;
            color: #00C8FF;
            font-size: 1.55rem;
        }

        .hores {
            color: #00C8A0;
            font-size: 1.55rem;
        }

        .minuts {
            color: #F03C82;
            font-size: 1.55rem;
            margin-right: 0px;
        }

        .Botiga {
            width: 25px;
            height: 31px;
            margin-top: 10px;
            margin-right: 23px;
            background-image: url(../img/Topbar_Principal/Icona_Botiga.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
        }

        .Buscador {
            width: 30px;
            height: 31px;
            margin-top: 10px;
            background-image: url(../img/Topbar_Principal/Icona_Buscador.png);
            background-size: 100%;
            background-repeat: no-repeat;
            float: left;
        }
    
        .botbar {
            position: fixed;
            height: 60px;
            bottom:0;
            left: 0;
            right: 0;
            z-index: 100;
            background-repeat: no-repeat;
            background-size: 100%;
            }
        
            .icona {
                width: 7vw;
                height: 7vw;
                background-repeat: no-repeat;
                background-size: 100%;
                float: left;
                background-position: center;
                margin: 5.3vw 6.5vw 0 6.5vw;
            }
        
            .PaginaHome {background-image: url(../img/Botbar/Botbar_Home.png);}
        
                        .homeClicada {
                            background-image: url(../img/Icones/Clicades/Icona_Home\ _Clicada.png);
                            margin-top: 14px;
                        }   
        
                        .reptes {
                            background-image: url(../img/Icones/Icona_Reptes.png);
                        }
        
                        .invisible {
                            background: transparent;
                        }
        
                        .comunitat {
                            background-image: url(../img/Icones/Icona_Comunitat.png);
                        }
        
                        .perfil {
                            background-image: url(../img/Icones/Icona_Perfil.png);
                        }
        
        
                        .publicar {
                            position: absolute;
                            top: 0vw;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 7vw;
                            height: 7ww;
                            background-image: url(../img/Icones/Icona_Publicar.png);
                            background-position: center;
                            z-index: 99999999999999999999;
                            margin: 4vw -15px;
                            transform: scale(140%);
                            transform-origin: center;
                        }
        
                        input[type=checkbox]{
                            visibility:hidden;
                          }
                          
                          #alternador{
            
                          }
                          
                          #alternador label{
                            width:7vw;
                            height:7vw;
                            border-radius:0.5rem;
                            transition:all .5s ease;
                            cursor:pointer;
                            opacity:1;
                          }
                          
                          #alternador input[type=checkbox]:checked+label{
                            opacity:1;
                          }
                          
                          #alternador input[type=checkbox]:checked+label~.quadreElegir{
                            left:0rem;
                          }
                        
                          .quadreElegir {
                            width: 100%;
                            height: 900px;
                            margin: 0px;
                            position: absolute;
                            left:-500px;
                            top: -800px;
                            opacity: 1;
                            background-color: rgba(255, 255, 255, 0.4);
                        }
                        
                        .Opcions {
                            width: 91%;
                            height: 160px;
                            background-color: #282C63;
                            border-radius: 25px;
                            margin: 0 auto;
                            position: absolute;
                            top: 560px;
                            left: 20px;
                        }
                        
                        .Tancar {
                            width: 15px;
                            height: 15px;
                            background-image: url(../img/Publicar_Publicacio/Icona_Creu_Blanca.png);
                            background-size: 100%;
                            background-repeat: no-repeat;
                            margin-top: 15px;
                            margin-left: 15px;
                        }
                        
                        .Opcions p {
                            margin-top: 0px;
                            color: white;
                            font-size: 1.30rem;
                            text-align: center;
                            font-weight: bolder;
                            font-family: 'Carbona Test', sans-serif;
                        }
                        
                        .Apartats {
                            width: 30%;
                            height: 120px;
                            text-align: center;
                            float: left;
                            margin-left: 9.86%;
                            margin-right: 9.86%;
                        }
                        
                        .QIndividual {
                            width: 100%;
                            height: 70px;
                            background-color: white;
                            border-radius: 20px;
                            margin-bottom: 10px;
                        }
                        
                        .Grupal {
                            width: 100%;
                            height: 70px;
                            background-color: white;
                            border-radius: 20px;
                            margin-bottom: 10px;
                        }
                        
                        .QIndividual img {
                            margin-top: 6px;
                            width: 70%;
                            height: 90%;
                            text-align: center;
                        }
                        
                        .Grupal img {
                            margin-top: 8px;
                            width: 100%;
                            height: 90%;
                            position: center;
                        }
        
                        .QIcona {
                            width: 64px;
                            height: 64px;
                            margin-bottom: 3px;
                            margin: 0 auto;
                            border-radius: 100%;
                            text-align: center;
                        }

        .contingut {
            margin-top: 50px;
            width: 100%;
            height: 1305px;
        }

        .Repte {
            height: 57px;
            padding-left: 95px;
        }

        .Individual {
            width: 14px;
            height: 19px;
            margin-top: 17px;
            background-image: url(../img/Home_Principal/Repte_Proposat/Icona_Individual.png);
            float: left;
            margin-right: 12px;
            background-size: 100%;
        }

        .NomRepte {
            font-size: 25px;
            margin-top: 12px;
            font-family: 'Carbona Test', sans-serif;
            font-weight: bold;
            float: left;
            margin-right: 12px;
            color: #282C63;
        }

        .Desplegable {
            margin-top: 22px;
            width: 20px;
            height: 11px;
            background-image: url(../img/Home_Principal/Repte_Proposat/Desplegable.png);
            float: left;
            background-size: 100%;
        }

        .Categories {
            height: 86px;
            padding-left: 20px;
            margin-bottom: 21px;
        }

        .Menu {
            width: 9.23%;
            height: 81px;
            background-color: #282C63;
            float: left;
            border-radius: 25px;
            margin-left: 15px;
        }

        .Opcio1 {
            width: 25px;
            height: 25px;
            border-radius: 25px;
            background-color: white;
            margin: 0 auto;
            margin-top: 10px;
            text-align: center;
            font-size: 0.813rem;
            font-weight: bold;
            line-height: 25px;
            color: #282C63;
        }

        .Opcio2 {
            width: 25px;
            height: 25px;
            border-radius: 25px;
            border: white 3px solid;
            margin: 0 auto;
            color: white;
            margin-top: 8px;
            text-align: center;
            font-size: 0.813rem;
            font-weight: bold;
            line-height: 25px;
        }

        .Apartat {
            width: 14.7%;
            height: 82px;
            float: left;
            margin-right: 17px;
            text-align: center;
        }

        .Apartat p {
            margin-top: 0px;
            color: #282C63;
            font-size: 0.9rem;
            text-align: center;
            font-weight: bolder;
            font-family: 'Carbona Test', sans-serif;
        }

        .Icona {
            width: 64px;
            height: 64px;
            margin-bottom: 3px;
            background-color: #282C63;
            border-radius: 100%;
        }

        .Visual .Icona {
            background-color: #282C63;
            color: #00C8FF;
        }

        .Sonor .Icona {
            background-color: #F03C82;
        }

        .Tactil .Icona {
            background-color: #00C8FF;
        }

        .Gustatiu .Icona {
            background-color: #00C8A0;
        }

        .Apartat img {
            width: 55%;
            padding-top: 10px;
        }

        .Visual img {
            padding-top: 20px;
        }

        .Sonor img {
            width: 47%;  
            padding-top: 12px;
            padding-left: 4px;          
        }

        .Tactil img {
            padding-top: 13px;
        }

        .Gustatiu img {
            padding-top: 22px;
        }

        .T img {
            width: 47%;  
            padding-top: 12px;
            padding-left: 4px;          
        }

        .PHoritzontal {
            width: 383px;
            height: 177px;
            border-radius: 10px;
            margin: 0 auto;
            margin-top: 10px;
            background-size: 100%;
        }

        .PQuadrada {
            width: 185px;
            height: 185px;
            margin-top: 10px;
            border-radius: 10px;
            background-repeat: no-repeat;
            background-size: 100%;
        }
        
        .PVertical {
            width: 190px;
            height: 380px;
            margin-top: 10px;
            border-radius: 10px;
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .Video {
            width: 50px;
            height: 52px;
            margin-top: 50px;
            margin-left: 170px;
            background-size: 100%;
            float: left;
        }

        .Visual2 {background-image: url(../img/Home_Principal/Elements_Publicacio/Icona_Video_Visual.png);}
        .Gustatiu2 {background-image: url(../img/Home_Principal/Elements_Publicacio/IconaVideo_Gustatiu.png);}


        .Audio {
            width: 95px;
            height: 95px;
            margin-top: 130px;
            margin-left: 50px;
            background-size: 100%;
            float: left;
            background-image: url(../img/Home_Principal/Elements_Publicacio/Icona_Audio.png);
        }

        .Sonor2 {
            background-image: url(../img/Home_Principal/Elements_Publicacio/Icona_Audio.png);
            width: 70px;
            height: 70px;
            margin-top: 42px;
            margin-left: 57px;
        }

        .AvisIA {
            width: 47px;
            height: 30px;
            margin-top: 132px;
            background-color: #282C63;
            border-radius: 0 10px 0 10px;
            float: left;
        }

        .IconaIA {
            margin-top: 9px;
            margin-left: 9px;
            width: 13px;
            height: 13px;
            background-image: url(../img/Home_Principal/Elements_Publicacio/Icona_IA.png);
            background-size: 100%;
            float: left;
        }

        .ParaulaIA {
            margin-top: 9px;
            color: white;
            font-size: 0.75rem;
            padding-left: 25px;
        }

        .P1 {background-image: url(../img/Home_Principal/Imatges/Publicacio_1.jpg);}
        
        .P2 {background-image: url(../img/Home_Principal/Imatges/Publicacio_2.jpg);}
        .P2 .IndicacioCategoria {background-color: #00C8FF;}
        .P2 .NumeroArxius {color: #00C8FF;}

        .P3 {
            background-image: url(../img/Home_Principal/Imatges/Publicacio_3.jpg);
            background-position: 0 -80px;}
        .P3 .IndicacioCategoria {background-color: #00C8A0;}
        .P3 .NumeroArxius {color: #00C8A0;}

        .P4 {
            background-image: url(../img/Home_Principal/Imatges/Publicacio_4.jpg);
            background-size: 200%;
            background-position: -50px 0;}
        .P4 .IndicacioCategoria {background-color: #F03C82;}
        .P4 .NumeroArxius {color: #F03C82;}

        .P5 {
            background-image: url(../img/Home_Principal/Imatges/Publicacio_5.jpg);
            background-position: 20px -738px;}
        .P5 .IndicacioCategoria {background-color: #00C8A0;}
        .P5 .NumeroArxius {color: #00C8A0;}

        .P6 {background-image: url(../img/Home_Principal/Imatges/Publicacio_6.jpg);}

        .P7 {
            background-image: url(../img/Home_Principal/Imatges/Publicacio_7.jpg);
            background-size: 140%;
            background-position: -50px -10px;
        }
        .P7 .IndicacioCategoria {background-color: #F03C82;}
        .P7 .NumeroArxius {color: #F03C82;}

        .P8 {
            background-image: url(../img/Home_Principal/Imatges/Publicacio_8.jpg);
            background-size: 160%;
            background-position: -40px 0;
        }

        .IndicacioCategoria {
            width: 130px;
            height: 20px;
            padding-top: 2px;
            background-color: #282C63;
            border-radius: 10px 0 20px 0;
        }

        .IconaPetita {
            margin-left: 13px;
            width: 18px;
            height: 19px;
            float: left;
        }

        .IconaPetita img{
            width: 74%;
        }

        .NomPublicacio {
            margin-top: 1.4px;
            width: 90px;
            color: white;
            font-weight: bold;
            font-size: 0.75rem;
            float: left;
        }

        .contenidor{
            margin-top: 10px;
            margin: 0 auto;
            width: 395px;
            height: 390px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            justify-items: center;
            
        }

        .QuantitatArxius {
            width: 50px;
            height: 24px;
            background-color: white;
            border-radius: 20px;
            margin-top: 120px;
            margin-left: 321px;
        }

        .NumeroArxius {
            width: 30px;
            height: 20px;
            color: #282C63;
            font-size: 0.875rem;
            font-weight: bold;
            float: left;
            padding-top: 3.5px;
            text-align: center;
        }

        .IconaImatge {
            width: 20px;
            height: 100%;
            float: left;
        }

        .IconaImatge img {
            margin-top: 6.7px;
            margin-left: -2px;
            width: 11px;
            height: 11px;
            float: left;
        }

        .Q {
            margin-top: 128px;
            margin-left: 123px;
        }



        .V {
            margin-top: 325px;
            margin-left: 130px;
        }

        .resta {
            height: 60px;
        }

        #HomeFiltres {
            .Filtres {
                width: 100%;
                height: 86px;
                margin-bottom: 21px;
            }

            .Data {
                width: 100px;
                height: 35px;
                float: left;
                text-align: center;
                font-size: 0.8rem;
                font-weight: bold;
                margin-right: 7px;
                margin-left: 5px;
            }

            .Recents {
                width: 100px;
                height: 35px;
                border-radius: 25px;
                background-color: #F03C82;
                color: white; 
                line-height: 35px;
            }

            .Antics {
                width: 100px;
                height: 35px;
                border-radius: 25px;
                background-color: #F03C82;
                color: white; 
                line-height: 35px;
                margin-top: 10px;
            }

            .Quantitat {
                width: 100px;
                height: 35px;
                float: left;
                text-align: center;
                font-size: 0.8rem;
                font-weight: bold;
                margin-right: 7px;
            }

            .Vistos {
                width: 100px;
                height: 35px;
                border-radius: 25px;
                background-color: #00C8FF;
                color: white; 
                line-height: 35px;
            }

            .Votats {
                width: 100px;
                height: 35px;
                border-radius: 25px;
                background-color: #00C8FF;
                color: white; 
                line-height: 35px;
                margin-top: 10px;
            }

            .Alfabet {
                width: 100px;
                height: 35px;
                float: left;
                text-align: center;
                font-size: 0.7rem;
                font-weight: bold;
            }

            .AZ {
                width: 100px;
                height: 35px;
                border-radius: 25px;
                background-color: #00C8A0;
                color: white; 
                line-height: 35px;
            }

            .ZA {
                width: 100px;
                height: 35px;
                border-radius: 25px;
                background-color: #00C8A0;
                color: white; 
                line-height: 35px;
                margin-top: 10px;
            }
    
            .Menu {
                width: 40px;
                height: 81px;
                background-color: #282C63;
                float: left;
                border-radius: 25px;
                margin-left: 15px;
            }
    
            .Opcio1 {
                width: 25px;
                height: 25px;
                border-radius: 25px;
                margin: 0 auto;
                margin-top: 7px;
                text-align: center;
                font-size: 0.813rem;
                font-weight: bold;
                line-height: 25px;
                color: white;
                background-color: transparent;
                border: white 3px solid;
            }
    
            .Opcio2 {
                width: 25px;
                height: 25px;
                border-radius: 25px;
                background-color: white;
                margin: 0 auto;
                margin-top: 5px;
                text-align: center;
                font-size: 0.813rem;
                font-weight: bold;
                line-height: 25px;
                color: #282C63;
            }
        }
        
        .enrere {
            width: 37px;
            height: 23px;
            background-image: url(../img/Publicar_Publicacio/Fletxa_Enrere.png);
            background-size: 100%;
            margin-top: 13px;
            margin-left: 5px;
            float: left;
            margin-right: 30px;
        }

        .previsualitzacio {
            width: 300px;
            height: 50px;
            color: white;
            font-size: 1.6rem;
            line-height: 54px;
            font-weight: bold;
            float: left;
        }

        #PrevHoritzontal {
            .contingut {height: 720px;}

            .PHoritzontal {
                background-image: url(../img/Home_Principal/Imatges/Publicacio_25.jpg);
                background-size: 100%;
                background-position: 0px -246px;
            }

            .PQuadrada {
                background-image: none;
                background-color: #282c6398;
            }

            .PVertical {
                background-image: none;
                background-color: #282c6398;
            }
        }

        #PrevQuadrada {
            .contingut {height: 720px;}

            .PHoritzontal {
                background-image: none;
                background-color: #282c6398;
            }
            
            .PQuadrada {
                background-image: none;
                background-color: #282c6398;
            }

            .P2 {
                background-image: url(../img/Home_Principal/Imatges/Publicacio_25.jpg);
                background-size: 100%;
                background-position: 0px -76px;
            }

            .PVertical {
                background-image: none;
                background-color: #282c6398;
            }
        }

        #PrevVertical {
            .contingut {height: 720px;}

            .PHoritzontal {
                background-image: none;
                background-color: #282c6398;
            }
            
            .PQuadrada {
                background-image: none;
                background-color: #282c6398;
            }

            
            .PVertical {
                background-image: url(../img/Home_Principal/Imatges/Publicacio_25.jpg);
                background-size: 180%;
                background-position: -100px -100px;
            }
        }