html{
    font-size: 10px;
    font-family: "Montserrat";

}
body{
    font-family: "montserrat";
    font-size: 1.6rem;
}
.layaut{
    max-width: 96rem;
    margin: 0 auto;
    margin-top: 2rem;
   
}
.menu{
    display: flex;
    flex-direction: row;
    background-color: black;
    font-size: 2rem;
    color: aliceblue;
    height: 3.5rem;
    border-radius: 10rem;
    align-items: center;
    overflow: hidden;

}
.menu img{
    height: 7rem;
    border-radius: 100%;
    margin-right: 3rem;
}
.menu li{
    display: flex;
    flex-direction: row;
    padding-left: 5rem;
    text-decoration: none;
    gap: 5rem;
    flex-wrap: wrap;
}
.presentacion{
    display: flex;
    flex-direction: row;
    height: 19rem;
    width: 95rem;
    overflow:hidden;
    margin-top: 5rem;
    border-radius: 10rem;
    
   
}
.presentacion img{
    height: 17rem;
    width: 60rem;
    border-radius: 100%;
    gap: 12rem;
    padding-inline: 2rem;
    animation:  presen 15s ease-in-out infinite; 


}
@keyframes presen {
    0%{
        transform: translatex(0);
    }
    15%{
        transform: translatex(-80rem);
    }
    35%{
        transform: translatex(-160rem);
    }
    55%{
        transform: translateX(-240rem);
    }
    75%{
        transform: translateX(-320);
    }
    100%{
        transform: translateX(-400);
    }
    
}
.header__top{
    display: flex;
    gap: 4rem;
    margin-bottom: 5rem;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.header__top img{
    border-radius: 130rem;
    height: 12rem;   
}
.header__titulo{
    font-size: 6rem;
    text-align: center;
}
.header__botom{
    
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 5rem;

}
.fotos{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 auto;
    overflow: hidden;

}
.fotos img{
    max-width: 40rem;
    display: flex;
    justify-content: center;
    border-radius: 100%;
    height: 40rem;
    gap: -2rem;    
    align-items: center;

}
.presentacion p{
    color: black;
    

}
.mapa{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10rem;
}

.nosotros{
    display: flex;
    text-align: center;
    align-items: center;
    overflow: hidden;
    flex-direction: column;

}
.nosotros img{

    border-radius: 100%;
    width: 40rem;
    height: 40rem;
    gap: 5rem;
    margin-bottom: 5rem;

}
.instalaciones{
    display: flex;
    flex-direction: row;
    overflow: hidden;


}
.redessociales{
    display: flex;
    flex-direction: row;
    overflow: hidden;
    height: 10rem;
    text-align: center;
    align-items:center;
    justify-content: space-between;
    width: 75%;
    margin-left: 12%;

}
.redessociales a img{
    height: 7rem;
    justify-content: center;
    border-radius: 100%;
    border-color: rgb(112, 116, 116);
    gap: -2rem;    
    
}
.recambios{
    display: flex;
    flex-direction: row ;
}
.animacion{
    width: 67rem;
    height: 47rem;
    display: flex;
    overflow: hidden;
    flex-direction: row;
    margin-left: 20%;
    border-radius: 10rem;

}
.animacion img{
    width: 45rem;
    height: 45rem;
    border-radius: 100%;
    animation: rotate 15s ease infinite;


}
@keyframes rotate {
    0%{
        transform: translatex(0);
    }
    10%{
        transform: translatex(-26rem);
    }
    20%{
        transform: translatex(-51rem);
    }
    30%{
        transform: translatex(-76rem);
    }
    40%{
        transform: translatex(-101rem);
    }
    50%{
        transform: translatex(-126rem);
    }
    60%{
        transform: translatex(-157rem);
    }
    70%{
        transform: translatex(-178rem);
    }
    80%{
        transform: translatex(-200rem);
    }
    90%{
        transform: translatex(-225rem);
    }
    100%{
        transform: translatex(-250rem);
    }
}
.pie{
    width: 100%;
    background-color: black;
    height: 5rem;
    border-radius: 10rem;
    color: aliceblue;
    text-align: center;
    font-size: 4rem;

}