.fa, .fas {
    color: white;
}

.contenedor_museo {
    /* display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
    "header_museo header_museo header_museo"
    "principal_museo principal_museo principal_museo"
    "carousel_museo carousel_museo carousel_museo"; */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: white;
    padding: 30px;
    border-radius: 5px;
}

.header_museo {
    width: 100%;
    grid-area: header_museo;
    background-image: url(../img/museo/museodefarmaciaunsl.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: space-around;
    border-radius: 5px;
}

.buttom {    
    padding: .4em 1em;
    border: none;    
    border-radius: .4em;
    
}
.buttom--museo{
    background-color: rgba(166, 233, 99, 0.766);
    box-shadow: 2px 5px 14px rgb(108, 106, 106);
    color: black;
    font-weight: 600;
}
.buttom--museo:hover {
    background-color: rgba(42, 129, 100, 0.724);
    color: rgb(255, 255, 255);

}

nav {
    display: flex;
    margin-top: 25px;
    gap: 1em;
}

/* PRINCIPAL */
.principal_museo {
    margin-left: auto;
    margin-right: auto;
   width: 480px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2em;
    margin-top: 25px;
    margin-bottom: 25px;
    /* justify-content: space-around; */
}

    

/* .dos {
    width: 350px;
    background: rgb(255, 255, 255);
    background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(244, 240, 240, 1) 35%, rgba(243, 243, 243, 1) 100%);
    background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(244, 240, 240, 1) 35%, rgba(243, 243, 243, 1) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(244, 240, 240, 1) 35%, rgba(243, 243, 243, 1) 100%);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(253, 253, 253, 1) 35%, rgba(243, 243, 243, 1) 100%);
    /* border: 1px solid rgb(83, 138, 93); 
    border-radius: 5px;
    padding: 15px;
    box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.362);
} */

.dos{
    background: rgb(249, 216, 4);
    border-radius: .25em;
    /* box-shadow: 0 .15em .175em hsla(0,0%,0%,.1); */
    margin: 1.5em;
    overflow: hidden;
    margin: auto;
    max-width: 380px;
}
  figure{
    height: 12.5em;
  }
  article{
    padding: 2em;
  }
  

/* TYPOGRAPHY */
.h1{
    font-size: 2em;
    letter-spacing: -.05em;
    line-height: 1;
    margin: .25em 0;
    text-align: center;
  }
  p{
    line-height: 1.4;
  } 
  .foto_pcipal{
    height: 100%;
    object-fit: cover;
    width: 100%;
}
  }
  .sapn_pal{
    color: #bbb;
    font-size: .75em;
    text-transform: uppercase;
    word-spacing: .0625em;
  }
.visitas {
    margin: 15px;
    display: flex;
    gap: 25px;
    justify-content: center;
}

/* CARROUSELL */

@import url('https://fonts.googleapis.com/css?family=Muli:400,700&display=swap');

.carousel_museo {
    grid-area: carousel_museo;
    display: flex;
    width: 100%;
    margin-top: 50px;
}

.container_carousel {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.items {
    display: flex;
    align-items: center;
    width: fit-content;
    animation: carouselAnim 60s infinite alternate linear;
}

.entry {
    display: flex;
    align-items: center;
    flex-direction: column;
    position: relative;
    width: 300px;
    background: white;
    margin: 1em;
    padding: .5em;
    /* border-radius: 10px;
            box-shadow: 4px 4px 5px 0px rgba(0,0,0,0.05); */
}

.entry img {
    border-radius: 7px;
}

p {
    text-align: center;
    padding: 1em;
}

p.name {
    font-weight: bold;
}

@keyframes carouselAnim {
    from {
        transform: translate(0, 0);
    }

    to {
        transform: translate(calc(-100% + (5*300px)));
    }
}



.zoom {
    transition: transform .2s;
}

.zoom:hover {
    transform: scale(1.25);
}

@media only screen and (max-width: 768px) {
    .principal_museo {
        margin-top: 25px;
        display: flex;
        flex-wrap: wrap;
        gap: 25px;
        margin-top: 25px;
        margin-bottom: 25px;
        justify-content: space-around;
    }
    .header_museo{
        top: 25px;
        background-image: none;
        position: relative;
    }
    nav{
        top: 50px;
        flex-wrap: wrap;
        margin-top: 50px;
        justify-content: left;
        position: relative;
    }
    .dos{
        position: relative;
        top: 100px;
        margin-bottom: 30px;
    }
    .bottom {
        background-color: rgb(166, 233, 99);
        
    }
    .items {
        animation: carouselAnim 30s infinite alternate linear;
    }

    @keyframes carouselAnim {
        from {
            transform: translate(0, 0);
        }

        to {
            transform: translate(calc(-100% + (2*300px)));
        }
    }
}

.faders {
    width: 100%;
    position: absolute;
    height: 100%;
}

.left, .right {
    /* background: linear-gradient(to right, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 100%); */
    width: 20%;
    height: 100%;
    position: absolute;
    z-index: 200;
}

.right {
    right: 0;
    /* background: linear-gradient(to left, rgba(245,245,245,1) 0%,rgba(255,255,255,0) 100%); */
}
}
}