* {
    box-sizing: border-box;
    font-family: 'Special Elite', cursive;
}
/* #professions-button.selected {
    background-color: #363636; 
    color: white; 
  } */

  .active-filter {
    background-color: black!important;
    color: white!important;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Special Elite', cursive;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    color: #363636;
}
a{
    text-decoration: none!important;
}
a, a:visited {
 color: #363636!important;   
}
h1 {
    font-size: 40px;
    line-height: 1;
    color: #363636;
    font-family: 'Special Elite', cursive !important;
}

.text-negreta {
    font-size: 20px;
    font-weight: 700;
    padding: 0;
    margin: 0;
    font-family: 'Special Elite', cursive !important;
}

.page-container {
    overflow: hidden;
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    justify-content: center;
    align-items: center;
}

.flag {
    width: 50%;
    height: 100vh;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: transparent;
}

.flag .background-image {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flag img {
    opacity: 0.2;
    width: 100%;
    height: auto;
}



.title-container {
    z-index: 3;
    text-align: center;
    position: relative;

}

.subtitle-container {
    z-index: 3;
    text-align: center;
    position: absolute;
    bottom: 80px;
    width: 100%;
    background-color: transparent;
}


/* HEADER */

.header {
    position: relative;
    z-index: 3;
    background: transparent;
    padding: 25px 95px;
}

.header::after {
    content: "";
    position: absolute;
    left: 65px;
    right: 65px;
    bottom: 15px;
    height: 2px;
    background: #363636;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.header-text {
    text-align: center;
    flex-grow: 1;
    margin-right: 45px;
}

.home-button {
    text-decoration: none;
    color: #363636;
}


/* BÚSQUEDA */


.page-container-buscar {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    background-image: url('../images/Imagen 2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 1;
}
.page-container-welcome {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    /* background-image: url('../images/Imagen 2.jpg'); */
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 1;
}

.background-overlay-buscar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
    
}
.background-overlay-welcome {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    
}
.welcome-text{
    width: 60%;
}
#typewriter{
font-size: 22px;
}
#typewriter p{
    line-height: 1.2em;
}
#buscador{
  
    background-color: transparent;
    align-items: center;
    border: 3px solid #363636;
    padding: 12px 25px !important;
    margin-bottom: 0px;
    font-size: 20px;
    font-weight: 700;
    
    font-family: 'Special Elite', cursive;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    color: #363636;
    
        position: fixed;
        bottom: 60px;
        left: 50%; 
        transform: translateX(-50%); 
    }
    #buscador a{
        color: #363636;
        
        } 
    
    #buscador a{
    text-decoration: none;
    
    } 
    #buscador a:visited {
        color: #000; 
        text-decoration: none; 
      }

.container-transparent-welcome {
    

    z-index: 1;
    text-align: center;
    color: #363636;

}
.background-overlay-buscar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
    
}
.selected-filters{
    width: 800px;
    margin-left: 30px;

}

.container-transparent-buscar {
    position: relative;
    width: 100%;

    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #363636;

}


h2 {
    padding: 0;
    margin: 0;
    text-align: center;
    line-height: 1.2em;
    margin-bottom: 20px;
    margin-top:50px;
}

.container-form {
    padding-left: 85px;
    padding-right: 85px;
    width: 100%;


    margin-top: 10vh;
    height: 100vh;
   
    display: flex;
    flex-direction: column;


    align-items: center;

}

.container-input {
    display: grid;
    place-items: center;
}

.container-input input {
    margin-top: 30px;
    background-color: transparent;
    width: 880px;
    height: 40px;

    border: 1px solid #363636;
    padding-left: 10px;
    font-size: 20px;
    margin-bottom: 20px;

}

#subtitol-filtres {
    text-align: center;
    font-size: 20px;
    font-weight: 500;
}

.apply-button{
    background-color: transparent;
    border: 3px solid #363636;
    padding: 12px 25px !important;
    margin: 10px;
    font-size: 20px;
    font-weight: 700;

    font-family: 'Special Elite', cursive;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    color: #363636;
}

#search-filter-buttons {

    display: flex;
    flex-direction: row;
    justify-content: center;
    width:910px;
    gap: 10px;
    flex-wrap: wrap;
}

#search-filter-buttons button {
    background-color: transparent;
    border: 2px solid #363636;
    padding: 12px 35px;
    margin: 10px;
    font-size: 18px;
    height: 45px;

    font-family: 'Special Elite', cursive;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    color: #363636;
}

#submit-button {
    margin-top: 60px;
    text-align: center;

}

#submit-button button {
    background-color: transparent;
    border: 3px solid #363636;
    padding: 12px 25px !important;
    margin: 10px;
    font-size: 20px;
    font-weight: 700;

    font-family: 'Special Elite', cursive;
    text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.15);
    color: #363636;
}

/* form {
    margin: 0 auto;
    width: 50%;
    max-width: 500px;
    padding: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
}

input[type="text"] {
    flex: 1;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

button[type="submit"] {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #4caf50;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-left: 10px;
}

#search-results{
    display: flex;
    flex-direction: column;
    padding-left: 250px;


}
h2{
    font-size: 20px;
}
.result {
    display: flex;
    margin-bottom: 20px;
    border-bottom: 1px solid gray;
    width: 80%;
    
}

.result-image {
    flex: 1;
    margin-right: 20px;
    
}
.result-image img{
    width: 100px;
    height: 100px;
}

.result-details {
    flex: 2;
    margin-right: 20px;
}



.pagination{
    text-align: center;
}
.details-flex{
    display: flex;
    justify-content: space-between;
}
a{
    text-decoration: none;
} */

/* RESULTADOS */


.page-container-resultados {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    background-image: url('../images/37eebfd81435886c9616eeea7a43f01c.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: auto;
    opacity: 1;
}

.background-overlay-resultados {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
}

#no-results{
    margin-top: -100px;
}
.container-transparent-resultados {
    position: relative;
    width: 100%;
    margin-top: 50px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #363636;
}


 .selected-filters-results {
   border-bottom:  2px dashed #363636;
} 




.selected-filters-results ul{
    list-style: none;
    
    padding: 0;
}
.selected-filters-results ul li{
    
    padding: 2px;
}

#search-results {
    margin-top: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
}

.result {

    margin-bottom: 20px;
    width: 100%;
    border-bottom: 1px solid gray;
}

.result-ficha {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.result-content {
    display: flex;
    flex-direction: row;
}

.result-image {
    margin-right: 25px;
}

.result-image img {
    width: 97px;
    height: 91px;
}

.result-details {
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.result-title {
    order: 1;
}

.result-title h2 {
    float: left;
    margin-bottom: 15px;
}

 .result-alias-procedencia {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin-top: -10px;
    order: 2;
} 
.no-alias{
    margin-top: 10px;
}

/*.alias-container {
    order: 1;
}*/

.procedencia-container.has-alias {
    margin-left: auto;
    margin-right: 50px;
    margin-top: 20px;
    /* margin-right: auto; */
    width: 120px;
    /* white-space: nowrap; */
    display: flex;
    flex-direction: column;
    align-items: flex-start;

}

.custom-button {

    width: fit-content;
    border: 2px solid #363636;
    opacity: 1;
    padding: 7px 10px 5px 10px;
    text-decoration: none;

    color: #363636;


}

.pagination {
    margin-top: 25px;
}

.pagination-button {

    width: fit-content;
    border: 3px solid #363636;
    opacity: 1;
    padding: 7px 10px 4px 10px;
    text-decoration: none;
    color: #363636;
    font-weight: 700;
    font-size: 18px;


}


.procedencia {
    font-size: 15px;
    white-space: nowrap;
}

.nombre {
    font-size: 22px;
    white-space: nowrap;
    margin: 0;
}

.container-title-resultados {

    position: absolute;
    top: 60px;
    z-index: 2;
}

.container-title-resultados h1 {
    text-align: center;
    font-size: 25px;


}
.pagination-button.current-page, .pagination-button.current {
    background-color: #363636; 
    color: #ffffff; 
    
}



/* BRIGADISTA */

.page-container-brigadista {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    background-image: url('../images/182ed5c5724a512b7770eec9f15dbda2.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    opacity: 1;
}

.background-overlay-brigadista {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.container-transparent-brigadista {
    position: relative;
    width:100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #363636;
    max-height: 100vh;
    overflow-y: auto;
}

#imatge-brigadista{
    width: 151px;
height: 142px;
}
.container-transparent-brigadista h2{
    margin-top: 80px;
}

.brigadista-info-part2{
    display:flex;
    white-space: wrap;
    gap:50px;

}
.brigadista-info-part1{
    display: inline-flex;
    gap: 65px;

    
    
}
.brigadista-info-part3{
    display:flex;
    white-space: wrap;
    gap:50px;

}
.brigadista-info-part1 ul, .brigadista-info-part2 ul, .brigadista-info-part3 ul {
 list-style: none; 
 display:flex;
    flex-direction: column;
    gap: 5px;
padding: 0;



}
.brigadista-info-part2 div, .brigadista-info-part3 div{
    width: 25%;
}
.result-alias{
    white-space: nowrap;
}

.back-button{
    
    margin-top: 80px; 
    margin-bottom: 35px;
    width: fit-content;
    border: 3px solid #363636;
    opacity: 1;
    padding: 13px 15px 10px 15px;
    text-decoration: none;
    background-color: transparent;
    color: #363636;
    font-weight: 700;
    font-size: 18px;
}

.brigadista-info{
    width:80%;
    display:flex;
    flex-direction: column;
    gap: 20px;
}


.padding-zero {
    padding: 0;
}

.more-info-container{
    position: relative;
    top: 30px;
    
    width: 100%;
    overflow-y: auto;
}
/* ::-webkit-scrollbar {
    width: 2px; 
}
::-webkit-scrollbar-track {
    background: #363636; 
}
::-webkit-scrollbar-thumb {
    background: #707070; 
}
::-webkit-scrollbar-thumb:after {
    background: #555; 
} */




/* FILTROS */


/* FILTROS */
/* Estilo base que aplica tanto a professions, hospitals como camps */
/* Estilo base que aplica tanto a professions, hospitals como camps y ahora paisos */
#professions-container, #hospitals-container, #camps-container, #batalles-container, #paisos-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    overflow: hidden;
}

.page-container-professions, .page-container-hospitals, .page-container-camps, .page-container-batalles, .page-container-paisos {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: transparent;
    top: 0;
    left: 0;
    background-image: url('../images/08c83dced988efe7539f7f73b030194d.jpg');
    background-size: cover;
    background-repeat: no-repeat;
}

.background-overlay-professions, .background-overlay-hospitals, .background-overlay-camps, .background-overlay-batalles, .background-overlay-paisos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/concepto-material-concreto-pared-textura-fondo-grunge.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.8;
}

.container-transparent-professions, .container-transparent-hospitals, .container-transparent-camps, .container-transparent-batalles, .container-transparent-paisos {
    position: relative;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #363636;
}

#checkbox-pages, #checkbox-pages-camps, #checkbox-pages-batalles, #checkbox-pages-paisos, #checkbox-pages-professions {
    margin-top: 150px;
    width: 80%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-content: space-around;
    gap: 25px;
    flex-wrap: wrap;
    word-wrap: break-word;
}
#checkbox-pages-hospitals{
    margin-top: 150px;
    width: 95%;
    height: 60vh;
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 25px;
    flex-wrap: wrap;
    word-wrap: break-word;
}


.checkbox-page {
    display: flex;
    align-items: flex-start;
    max-width: 475px;
    overflow: hidden;
    max-height: 40px;
}

.checkbox-page label {
    font-size: 20px;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    flex-grow: 1; 
}

.checkbox-page input[type="checkbox"] {
    transform: scale(2); 
    margin-right: 10px;
}

.pagination-hospitals, .pagination-camps, .pagination-batalles, .pagination-paisos, .pagination-professions {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

#apply-hospitals-button, #apply-camps-button, #apply-batalles-button, #apply-paisos-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    cursor: pointer;
}