body {
    margin:0;
    padding: 0%;
    background-image: url(https://i.imgur.com/fkyj6Or.png);
}

header {
    background: rgb(30, 176, 196);
    height: 206px;
    width: 100%;
}

.avatar {
    width: 64px; /* Ancho del div */
    height: 76px; /* Alto del div */
    background-image: url(''); /* La imagen se inyectará aquí con PHP */
    background-size: cover; /* Cubrirá todo el div */
    background-repeat: no-repeat; /* No repetir la imagen */
    background-position: center top; /* Centrar la imagen */
    /* border-radius: 50%; */ /* Hacerlo circular */
    margin: -16px auto; /* Ajustar el margen */
}


.hover-text {
    position: relative; /* Para posicionar el tooltip correctamente */
    cursor: pointer; /* Cambiar el cursor para indicar interactividad */
}

.tooltip-textm {
    visibility: hidden !important; /* Ocultar el tooltip por defecto */
    width: max-content !important; /* Ancho del tooltip */
    background-color: rgb(0 0 0 / 77%) !important; /* Fondo negro con opacidad */
    color: #fff !important; /* Color del texto */
    text-align: center !important; /* Centrar el texto */
    border-radius: 8px !important; /* Bordes redondeados */
    padding: 10px !important; /* Espaciado interno */
    position: absolute !important; /* Posicionamiento absoluto */
    z-index: 1 !important; /* Asegurar que esté por encima de otros elementos */
    bottom: 116% !important; /* Mover el tooltip hacia arriba */
    left: 49% !important; /* Centrar el tooltip */
    transform: translateX(8%) translateY(31%) !important; /* Centramos el tooltip correctamente */
    transition: visibility 0s, opacity 0.5s linear !important; /* Transición suave */
    opacity: 0 !important; /* Comienza invisible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3) !important; /* Sombra sutil */
    border: 2px solid rgb(0 0 0 / 77%) !important; /* Borde que coincide con el fondo */
}

/* Añadir la flecha en la esquina inferior izquierda */
.tooltip-textm::after {
    content: "" !important; /* Necesario para que se muestre el triángulo */
    position: absolute !important; /* Posicionamiento absoluto */
    left: -12px !important; /* Posicionar hacia la izquierda */
    top: 90% !important; /* Colocar la flecha encima del tooltip */
    border-width: 11px !important; /* Tamaño de la flecha */
    border-style: solid !important; /* Estilo sólido */
    border-color: transparent rgb(0 0 0 / 77%) transparent transparent !important; /* Color de la flecha */
    transform: rotate(310deg) !important; /* Rotar la flecha para que apunte en diagonal */
}

/* Mostrar el tooltip */
.hover-text:hover .tooltip-textm {
    visibility: visible !important; /* Mostrar el tooltip al pasar el ratón */
    opacity: 1 !important; /* Hacerlo completamente visible */
}
.logo {

    padding: 34px 0px 0px 133px;

    /*padding: 65px 0 0 120px*/;
    /* padding: 96px 0 0 120px*/;
  
    
  
}

.nav1 {
        width: 100%;
        height: 84px;
        overflow: hidden;
        text-align: center;
        background:#232323;
        border-bottom: 3px solid #fdce4c;
}


#main-footer, #main-text { 
            font-weight: normal !important;
}

.nvc {

   margin-top: 10px;
   width: max-content;
   box-sizing: border-box;
    position: relative;
    left: 50%;
    width: 720px;
    margin-left: -310px;
  
   overflow: hidden;

}
.login-min {
    color: white;
    text-align: left;
    position: absolute;
    right: 50%;
    margin-right: 337px;
    font-size: 23px;
    float: right;
    width: max-content;

}

.img-user { 
    position: relative;
    float: left;
    width: 70px;
    height: 69px;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 11px;
    background-repeat: no-repeat;
    background-position: 0px -20px;;
}

.login-min > p {
    display: inline-block !important;
    height: 0px;
    margin-top: 6px !important;
    margin-bottom: 38px !important;
}

.ajustes {
    font-size: 12px;
    border: 2px solid #343434;
    background: #161616;
    padding-left: 7px;
    border-radius: 8px;
    margin-left: 70px;
    padding-top: 1px;
    height: 30px;
    width: 105px;
}

.ajustes > img {
    margin-right: 6px;
}

.armario {
    float: right;
    background: #161616;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    width: 30px;
    height: 30px;
    margin-top: -30px;
    border: 2px solid #343434;
}

#nav-iconos {

    background: #161616;
    width: 52px;
    height: 52px;
    border-radius: 6px;
    float: left;
    transition: 1s;
    margin:5px;
    border: 2px solid #343434;
    display: flex;
    align-items: center;
    justify-content: center;

}

#nav-iconos img {

    transition: 0.8s;
}
#nav-iconos>img:hover {

    animation: pulse;
  
}

#nav-iconos.uno:hover {
        background: rgb(226, 92, 92);
        transition:all 1.5s ease-in-out;
}

#nav-iconos.dos:hover {
    background: rgb(226, 129, 92);
    transition:all 1.5s ease-in-out;
}

#nav-iconos.tres:hover {
    background: rgb(226, 191, 92);
    transition:all 1.5s ease-in-out;
}

#nav-iconos.cuatro:hover {
    background: rgb(156, 226, 92);
    transition:all 1.5s ease-in-out;
}


#nav-iconos.cinco:hover {
    background: rgba(226, 116, 1, 1);
    transition:all 1.5s ease-in-out;
}

#nav-iconos.seis:hover {
    background: rgb(34, 187, 212);
    transition:all 1.5s ease-in-out;
}


#nav-iconos.siete:hover {
    background: rgb(92, 112, 255);
    transition:all 1.5s ease-in-out;
}

#nav-iconos.ocho:hover {
    background: #363bd7;
    transition:all 1.5s ease-in-out;
}

#nav-iconos.ochoymedio:hover {
    background: rgb(162, 92, 255);
    transition:all 1.5s ease-in-out;
}

#nav-iconos.nueve:hover {
    background: rgb(229, 131, 230);
    transition:all 1.5s ease-in-out;
}

#nav-iconos.diez:hover {
    background: rgb(216, 70, 137);
    transition:all 1.5s ease-in-out;
}
.redes {

    box-sizing: border-box;
    height: 59px;
    width: 92px;
    padding-left: 14px;
    border-left: 1px solid #3c3c3c;
    overflow: hidden;
    margin-left: 390px;
    margin-top: -61px;
    position: absolute;
    left: 50%;
}

.hobba  {
    position: absolute;
    left: 50%;
    margin-left: 418px;
    margin-top: -58px;
}

.logout  {
    position: absolute;
    left: 50%;
    margin-left: 488px;
    border-left: 1px solid #3c3c3c;
    padding-left: 16px;
    margin-top: -58px;
}

.redes > img {

    margin: 2px 0px;
}

.content-mid {

    width: 1224px;
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 15px;
    padding-bottom:15px;
    box-sizing: border-box;
    overflow: hidden;
 
    margin: 0 auto;
    background: #f1f1ec;
}


.carouseel {

    width: 100%;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    height: auto;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    padding-bottom: 20px;
    overflow: hidden;
    text-align: center;
    margin-bottom: 20px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 20px;
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    border: solid 1px rgba( 0, 0, 0, 0.06 );
}
.item {

    width: 339px;
    display: inline-block !important;
    height: 160px;
    background: #fbfbfb;
    border-radius: 10px;
    border: 1px solid #ececec;
}

.img-category {
    border-radius: 10px 10px 0px 0px;
    width: 100%;
    height: 90px;
  
}

.title-eventoc {
    padding:10px;
    margin-top: 100px;
    color: white;
    border-radius: 4px;
    font-weight: bold;
    background: #2689de;
    display: inline-flex;
    box-shadow: 0px -2px 0px #4278cc inset, 0px 0px 0px, 0px 0px 0px;
    border-bottom: solid 2px rgb(181 178 178 / 83%);
}


.subtitle-eventoc {

    margin-top:100px;
    float: left;
    margin-left: 20px;
    font-size: 16px;
    font-weight: 600;
    text-align:left;
    width: 100%;
    color: #4c4c4c;

}

.autor-eventoc {
    font-size: 12px;
    color:#777777;
    float: left;
    margin-left: 20px;
}

.autor-eventoc > img {
    margin-top:-3px !important;
    margin-right: 5px !important;
    display: inline !important;
    width: auto !important;
}

.fecha-eventoc > img {
    margin-top:-3px !important;
    margin-right: 5px !important;
    display: inline !important;
    width: auto !important;
}
.fecha-eventoc {
    font-size: 12px;
    color:#777777;
    float: left;
    margin-left: 20px;
}

.puntuaciones {
    width: 100%;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    height: auto;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    padding-bottom: 20px;
    overflow: hidden;
    margin-bottom: 40px;
    padding-top: 47px;
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    border: solid 1px rgba( 0, 0, 0, 0.06 );
}



.button-patos {
    box-shadow: 0px -2px 0px #752e2e inset, 0px -20px 0px #dc3636 inset, 0px 2px 0px #ff8383 inset;
    background: #f53e3e;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width: 95%;
    border-radius: 4px;
    font-weight: bold;
    margin: -53px 12px;
   float:left;
    
}

.button-gym {
    box-shadow: 0px -2px 0px #752e2e inset, 0px -20px 0px #dc3636 inset, 0px 2px 0px #ff8383 inset;
    background: #f53e3e;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width: 95%;
    border-radius: 4px;
    font-weight: bold;
    margin: -53px 12px;
   float:left;
    
}

.button-puntua {
    height: 44px;
    width: 275px;
    box-shadow: 0px -2px 0px #752e2e inset, 0px -20px 0px #dc3636 inset, 0px 2px 0px #ff8383 inset;
    color: white;
    margin-top:-71px;
    position: absolute;
    background: #f53e3e;
    align-items: center;  
    margin-left: 30px;
    font-size: 16px; 
    padding: 14px;
    display: flex;
    text-align: center;
    border-radius: 4px;
    font-weight: bold;
    justify-content: center;
    
}

.info-user {

    width: 240px;
    height: 104px;
    margin: 5px 3px;
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    box-sizing: border-box;
    background: #dadada;
    display: inline-block;
    border-radius: 4px;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    position: relative;
}


.user-img {
    width: 64px;
    height: 78px;
    background: orange;
    border-radius: 4px;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    margin-left: 12px;
    margin-top: 12px;
    margin-right: 8px;
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    float: left;
}

.name-user {

    width: 146px;
    height: 36px;
    font-weight: bold;
    margin-top:12px;
    align-items: center;
    display: flex;
    border-radius: 4px;
    font-size:14px;
    padding-left:16px;
    background: #f8f8f8;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
}

.points-user {

    width: 146px;
    height: 36px;
    font-weight: bold;
    font-size:14px;
    margin-top:4px;
    align-items: center;
    display: flex;
    border-radius: 4px;
    padding-left:16px;
    background: #f8f8f8;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
}

.box-noticias {

    width: 100%;
    background: rgb(255, 255, 255);
    border-radius: 4px;
    height: auto;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    padding-bottom: 6px;
    padding-right: 30px;
    text-align: center;
    margin-bottom: 40px;
    margin-top:73px;
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    padding-left: 30px;
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    overflow: hidden;
}

.button-noticias {

    box-shadow: 0px -2px 0px #366e93 inset, 0px -20px 0px #4389b8 inset, 0px 0px 0px #366e93 inset;
    background: #4690c1;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-top: -23px;
    color: white;
    width: 1000px;
    left: 50%;
    margin-left: -500px;
    position: absolute;
    border-radius: 4px;
    font-weight: bold;
}

.box-buscador {
    margin-top:45px;
    
    margin-bottom: 40px;
}

.button-img {
    width: 65px;height: 65px;border-radius: 10px;box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    background: #a2b6ff;
    border: solid 1px rgba( 0, 0, 0, 0.06 );
}

.busc-noticia {

    float: left;
    padding-left: 30px;
    margin-left: 15px;
    padding-top:5px;
    padding-right: 5px;
    padding-bottom: 5px;
    width: 300px;
    margin-top:13px;
}

.box-noticia {

    width: 360px;
    height: 97px;
    margin: 2.2px;
    background: #efefef;
    display: inline-block;
    padding-right: 15px;
    overflow: hidden;
    box-sizing: border-box;
    border-radius: 4px;
}

.box-img-noticia {

    width: 82px;
    float: left;
    height: 100%;
    border-radius: 4px 0 0 4px;
    display: flex;
    margin-right: 15px;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
}

.autor-noticia {

    width: 45px;
    height: 45px;
    border-radius: 4px;
    background: #000000ab;
    text-align: center;
    position: relative;
    border: 1px solid gray;
    overflow: hidden;
}

.titulo-noticia {

    width: 71%;
    color: white;
    align-items: center;
    display: flex;
    overflow: hidden;
    height: 32px;
    float: left;
    font-size: 12px;
    box-sizing: border-box;
    padding:12px;
    margin-top: 10px;
    margin-bottom: 5px;
    border-radius: 4px;
    background: #a5a5a5;

}

.sub-noticia {
    width: 71%;
    color: #757575;
    text-align: left;
    height: 22px;
    box-sizing: border-box;
    overflow: hidden;
    align-items: center;
    font-size: 12px;
}

.autor2-noticia {

    float: left;
    font-weight: bold;
    margin-right: 10px;
    font-size: 14px;
}

.fecha-noticia {
    float: right;
    margin-top:2px;
    font-size: 12px;
    color: #9c9c9c;
}

.button-noticia {
    float: right;
    margin-right: 10px;
    font-size: 14px;
    color: #6e7cbf;
    font-weight: bold;
}

.button-all { 

    width: 1000px;
    background:#b9b9b99a;
    padding: 10px;
    border-radius: 4px;
    align-items: center;
    float: left;
    margin-left: -500px;
    top:20px;
    left: 50%;
    justify-content: center;
    display: flex;
    position: relative;
    box-shadow: 0px -2px 0px #ababab inset, 0px -20px 0px #bfbfbf inset, 0px 0px 0px #ababab inset;
    color: white;


}

.placas {

    float: left;
    width: 49.3%;
    box-sizing: border-box;
    text-align: center;
    padding-top:22px;
    padding-left: 15px;
    padding-right: 10px;
    padding-bottom: 10px;
    background: rgb(255, 255, 255);
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    border-radius: 4px;

}

.furnis {

    float: right;
    width: 49.3%;
    box-sizing: border-box;
    text-align: center;
    padding-top:22px;
    padding-left: 15px;
    padding-right: 10px;
    padding-bottom: 10px;
    background: rgb(255, 255, 255);
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    border-radius: 4px;

      }


      .top-patos {
        margin-top:20px;
        float: left;
        width: 49.3%;
        box-sizing: border-box;
        text-align: center;
        padding-top:30px;
        margin-bottom: 38px;
        padding-left: 15px;
        padding-right: 10px;
        padding-bottom: 13px;
        background: rgb(255, 255, 255);
        box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
        border: solid 1px rgba( 0, 0, 0, 0.06 );
        border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
        border-radius: 4px;
    
    }
    
    .top-gym {
    
        float: right;
        margin-bottom: 38px;
        width: 49.3%;
        margin-top:20px;
        box-sizing: border-box;
        text-align: center;
        padding-top:30px;
        padding-left: 15px;
        padding-right: 10px;
        padding-bottom: 13px;
        background: rgb(255, 255, 255);
        box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
        border: solid 1px rgba( 0, 0, 0, 0.06 );
        border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
        border-radius: 4px;
    
          }

.button-placas {

    box-shadow: 0px -2px 0px #bc7e38 inset, 0px -20px 0px #eb9e46 inset, 0px 0px 0px #bc7e38 inset;
    background: #f7a649;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width: 95%;
    border-radius: 4px;
    font-weight: bold;
    margin: -45px 12px;
   float:left;
    
}

.box-placa { 

    background: #dadada;
    width: 72px;
    height: 72px;
    display: inline-flex;
    border-radius: 4px;
    align-items: center;
    margin: 6px 1px;
    justify-content: center;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
}


.box-furnis { 

    background: #dadada;
    width: 72px;
    height: 72px;
    display: inline-flex;
    border-radius: 4px;
    align-items: center;
    margin: 6px 1px;
    justify-content: center;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
}

.button-furnis {
    box-shadow: 0px -2px 0px #bc7e38 inset, 0px -20px 0px #eb9e46 inset, 0px 0px 0px #bc7e38 inset;
    background: #f7a649;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width: 95%;
    margin: -45px 12px;
   float:left;
    
    border-radius: 4px;
    font-weight: bold;
}


.sidebar {
 
   
    width: 30%;
    box-sizing: border-box;
    float: left;
    margin-left: 10px;
    margin-top: 40px;

}


.eventos-sid {

  
    background: rgb(255, 255, 255);
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    width: 100%;
    box-sizing: border-box;
    padding-left: 15px;
    padding-bottom: 10px;
    padding-right: 15px;
    padding-top: 32px;
    border-radius: 4px;
}


.eventos-sid > hr {

    height: 0px !important;
    margin-bottom: 10px !important;
    border-top: 1px solid rgba(0,0,0,.1) !important;
}


.button-eventos {

    box-shadow: 0px -2px 0px #5d8a27 inset, 0px -20px 0px #74ac31 inset, 0px 0px 0px #5d8a27 inset;
    background: #7ab433;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width:95%;
    border-radius: 4px;
    font-weight: bold;
    margin: -55px 9px;
   float:left;
  }


  .content-right {

        width: 68%;
        box-sizing: border-box;
        float: right;
        margin-left: 10px;
        margin-top: 40px;
   
  }

.articles {

    float: right;
    background: rgb(255, 255, 255);
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    width: 100%;
    padding-top: 32px;
    text-align: center;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    padding-bottom: 20px;
    margin-bottom: 40px;
    border-radius: 4px;
}

.button-articles {

    box-shadow: 0px -2px 0px #6b5282 inset, 0px -20px 0px #8667a3 inset, 0px 0px 0px #8667a3 inset;
    background: #8d6cab;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width:95%;
    border-radius: 4px;
    font-weight: bold;
    margin: -55px 20px;
   float:left;
  }


  .movimientos {

 
    background: rgb(255, 255, 255);
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
    border-bottom: solid 1px rgba( 0, 0, 0, 0.2 );
    width: 100%;
    box-sizing: border-box;
    float: left;
    text-align: center;
    padding-top: 28px;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    border-radius: 4px;
}




.button-movimientos {

    box-shadow: 0px -2px 0px #bc386b inset, 0px -20px 0px #eb4686 inset, 0px 0px 0px #bc386b inset;
    background: #f7498d;
    height: 44px;
    align-items: center;
    justify-content: center;
    display: flex;
    color: white;
    width:95%;
    border-radius: 4px;
    font-weight: bold;
    margin: -52px 20px;
   float:left;
  }

  .box-movimiento { 

    background: #dadada;
    width: 67.69px;
    height: 71px;
    margin-top:7px;
    margin:1.67px;
    border-radius: 4px;
    display: inline-block;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    border: solid 1px rgba( 0, 0, 0, 0.06 );
}

.box-articles {
    width: 100%;
    height: 76px;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: -6px;
    background: white;
    border: 1px solid #cacaca;
}

.box-img-art {
    width: 95px;
    height: 74px;
    background: darkkhaki;
}

.categoria-evento {
    width: 92px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    height: 100%;
}

.title-evento {
    height: 36px;
    width: 70.8%;
    display: flex;
    font-weight: bold;
    font-size: 15.2px;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
    padding-left: 15px;
    align-items: center;
    background: #9c9c9c;
    color: white;
}

.fecha-evento {
    float: left;
    height: 15px;
    font-size: 14px;
    color:#5f5f5f;
    padding-left: 15px;
}

.fecha-evento > img {
    margin-top:-2px;
    margin-right: 5px;
}
.org-evento {
    float: left;
    height: 13px;
    font-size: 14px;
    padding-left: 15px;
    color: #5f5f5f;

}

.button-eventos2 {

    width: 90%;
    padding: 10px;
    background: #dadada;
    color: #8a8a8a;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    border: 1px solid #cecdcd;
    justify-content: center;
    border-radius: 4px;
    margin: auto;
}

.lf-article {

    width: 245.18px;
    padding-bottom: 10px;
    border-radius: 4px;
    margin: 2px;
    margin-bottom: 10px;
    overflow: hidden;
    box-sizing: border-box;
    display: inline-block;
    background:white;
    border: 1px solid #c5c5c5;
}

.categoria-article {
    width: 100%;
    float: left;
    height: 106px;
}

.categoria-nombre {
    border-radius: 4px;
    padding:8px;
    margin-top: 10px;
    background: white;
    font-size: 12px;
    font-weight: bold;
    margin-left: 10px;
    float: left;
}

.autor-article {

    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: #000000ab;
    text-align: center;
    float: right;
    margin-top: 48px;
    margin-right:10px;
    border: 1px solid #e8e8e8;
    overflow: hidden;
}

.title-article { 
    margin-left: 10px;
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 4px;
    float: left;
}

.org-left {
 
    float: left;
    font-size: 12px;
    text-align: left;
    width: 60%;
    margin-left: 10px;
}

.org-right {
    margin-right: 10px;
    float: right;
    font-size: 12px;
}



.cuerp{
    padding: 2% 10% 2% 10%;
    display: flex;
    flex-direction: column;
    align-items: center;

}

.anuncio1{

    background-color: black;
    width: 95%;
    height: auto;
    border-radius: 10px;
    padding: 15px 20px 10% 20px;
    margin-bottom: 10px;
}

.anuncio1 a{
    text-decoration: none;
    color: white;
}

.anuncio1 a:hover{
    text-decoration: none;
    color: white;
}


.tituloanuncio1{
    font-size:22px;
    background-color: #00000090;
    width: fit-content;
    padding: 0px 20px 2px 10px;
    border-radius: 10px;
    margin-right: 20%;
}

.descanuncio1{
    line-height: 15px;
    font-size:12px;
    background-color: #00000090;
    width: fit-content;
    padding: 5px 17px 5px 10px;
    border-radius: 10px;
    margin-right: 45%;
    margin-top: 20px;
}

.seccion{
    margin: 0px 0px 10px 0px;
    display: flex;
    flex-direction: row;

}

.seccionimg{
    width: 60px;
    height: 60px;
    border: solid 1px #d3d3d2;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}


.secimg{
    width: 85%;
    height: 50px;
    background-color: #ededed;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}


.seccionimgh {
    width: 60px;
    height: 60px;
    /* border: solid 1px #d3d3d2; */
    border-radius: 10px;
    /* background: white; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}


.secimgh {
    width: 85%;
    height: 50px;
    background: rgba(0, 0, 0, 0.61);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}


.seccionimgl {
    width: 60px;
    height: 60px;
    /* border: solid 1px #d3d3d2; */
    border-radius: 10px;
    /* background: white; */
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.secimgl {
    width: 85%;
    height: 50px;
    background: rgba(0, 0, 0, 0.61);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}



.secciontext{
    color: #555555;
    margin: 0px 10px 0px;
}

.secciontexttit{
    font-size: 14px;

}

.secciontextdes{
    font-size: 13px;
    color: #747474;

}

.ultimosmov{
    background-color: white;
    border: solid 1px #d3d3d2;    
    width: 95%;
    height: auto;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;   
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    display: inline-block; 
    margin-bottom: 10px;

}


.ultimosmov2{
    background-color: white;
    border: solid 1px #d3d3d2;    
    width: 95%;
    height: auto;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;   
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    display: inline-block; 
    margin-bottom: 10px;

}
.movimiento{
    width:60px;
    height: 60px;
    background-image: url('https://habborator.org/archive/topstory/general_1/topStory_speeding.gif');
    margin: 15px;
    margin-right: 0px;
    display: inline-block;
    margin-bottom: 10px;
    margin-top: 5px;
    border-radius: 5px;
    margin-right: 5px;
    margin-bottom: 0px;
    box-shadow: -1px 1px 0px 1px rgb(0 51 85);
    background-repeat: no-repeat;
    background-position: left -67px;

}



.movimiento2 {
    width:62px;
    height: 62px;
    background-color: #ffce79;
    margin: 15px;
    margin-right: 0px;
    margin-bottom: 10px;
    margin-top: 5px;
    background-image: url('https://i.imgur.com/pcaDlWQ.png');
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-position-y: -12px;
    box-shadow: 0px 0px 0px 3px rgb(247 185 112);
    border: solid #ffe2a5 0px;

}

.masmovimientos{
    background-color: #388E3C;
    border-radius: 5px;
    /* border: solid 1px #000000; */
    color: white;
    /* text-shadow: 1px 1px 0px black; */
    font-size: 14px;
    padding: 7px;
    box-shadow: 0px -2px 0px #2a7b2f inset, 0px -20px 0px #2a7b2f inset, 0px 0px 0px #2a7b2f inset;
    margin: 5px 15px 2px 15px;
/*    box-shadow: 0px 3px 7px #0000002e; */
    border-bottom: #185f1c solid;
}

.masmovimientos a, .masmovimientos a:hover{
    text-decoration: none;
    color: white;
}



.tooltip-text {
  visibility: hidden;
  position: absolute;
  z-index: 2;
  width: 170px;
  color: #555555;
  background-color: #fdfdfd;
  border: solid 1px #d3d3d2;
  border-radius: 5px;
  margin-top: 2px;
  padding: 5px 12px 5px 12px;
  animation: 0.5s;
    box-shadow: 0px 3px 7px #0000002e;


}

.hover-text:hover .tooltip-text {
  visibility: visible;
  animation: 0.5s;

}

#right {
  top: -8px;
  left: 120%;
  animation: 0.5s;

}

.hover-text {
  position: relative;
  display: inline-block;
  text-align: center;
  animation: 0.5s;

}

.cuerp{
}

.cuerp1{
    display: flex;
    flex-wrap: wrap;
    width: 100%!important;
    max-width: 1209px;
    background: #;
    margin-bottom: 20px;
    padding: 20px;
}


.index1{
}

.index2{
}

.ultimasnotis{
    background-color: white;
    border: solid 1px #d3d3d2;    
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    padding: 10px 5px 10px 5px;   
    display: inline-block; 
}

.ultnoti{
    background-color: white;
    border: solid 1px #d3d3d2;    
    height: 85px;
    border-radius: 10px;
    width: 97%;
    display: flex;
    margin-bottom: 13px;

}

.minianoti{
    background-color: black;
    width: 70px;
    height:100%; 
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;

}



.kekonoti{
    background-color: #0000008c;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    border-radius: 10px;
    border: solid 1px #fff; 
    background-position: -12px -20px;   


}

.notiinfo{

    padding: 10px 5px 10px 10px;
}

.notititulom a, .notititulom a:hover{
    color: #646464;
    text-decoration: none;
    font-size: 13px;
}



.notititulom{
    background-color: #e2e2e2;
    border-radius: 7px;
    padding: 3px 7px 3px 7px;
    width: 327px;
    overflow:hidden;
    text-overflow: ellipsis;


}


.notititulom b {
    white-space: nowrap;
}

.notidescm{
    padding: 3px 7px 3px 5px;
    color: #646464;
    text-decoration: none;
    font-size: 11px;

}

.miniinfoinfo{
    padding: 3px 7px 3px 5px;
    color: #646464;
    text-decoration: none;
    font-size: 10px;
    display: flex;
    align-items: center;  
}



.miniinfonotm{
    display: flex;
    justify-content: space-evenly;
}

.index3{
    width: 100%;
    height: max-content;
}









/* ---- ----- ----- Contenedor Titulo y Controles ----- ----- ----- */
.contenedor-titulo-controles {
    display: flex;
    justify-content: space-between;
    align-items: end;
}

.contenedor-titulo-controles h3 {
    color: #fff;
    font-size: 30px;
}

.contenedor-titulo-controles .indicadores button {
    background: #fff;
    height: 3px;
    width: 10px;
    cursor: pointer;
    border: none;
}

.contenedor-titulo-controles .indicadores button:hover,
.contenedor-titulo-controles .indicadores button.activo {
    background: red;
}


/* ---- ----- ----- Contenedor Principal y Flechas ----- ----- ----- */

.peliculas-recomendadas .contenedor-principal {
    align-items: center;
    position: relative;
}

.peliculas-recomendadas .contenedor-principal .flecha-izquierda,
.peliculas-recomendadas .contenedor-principal .flecha-derecha {
   position: absolute;
    background: transparent;
    /* border: solid 1px #858585; */
    font-size: 25px;
    /* height: 30px; */
    top: calc(50% - 25%);
    /* line-height: 40px; */
    /* width: 30px; */
    /* color: #858585; */
    cursor: pointer;
    z-index: 500;
    transition: .2s ease all;
    border-radius: 50px;
    border: none;
}


.peliculas-recomendadas .contenedor-principal .flecha-izquierda {
    left: 0;
}

.peliculas-recomendadas .contenedor-principal .flecha-derecha {
    right: 0;
}

/* ---- ----- ----- Carousel ----- ----- ----- */
.peliculas-recomendadas .contenedor-carousel {
    overflow: hidden;
    scroll-behavior: smooth;

}

.peliculas-recomendadas .contenedor-carousel .carousel1 {
    display: inline-flex;
}

.pelicula{
    width: 60px;
}


.puntosgym{
    background-color: white;
    border: solid 1px #d3d3d2;    
    width: 100%;
    height: auto;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;   
    margin-bottom: 10px;
    box-shadow: inset 0px 2px 0px rgb(255 255 255 / 60%), 0px 2px 1px rgb(0 0 0 / 10%);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

.lufpatos{
    width: 100%;
    max-width: 520px;
    align-self: end;
}

.patosuser{
    background-color: #eeeeee;
    margin: 8px 8px 8px 8px;
    border-radius: 5px;
    border: solid 1px #d3d3d2;    
    padding: 10px;
    width: 240px;
    display: inline-flex;
}

.imagenpunto{
    border-radius: 5px;
}

.infopuntoo{
    background-color: white;
    width: 98%;
    border-radius: 5px;
    padding: 4px 10px 4px 10px;   
    display: inline-block;
    color: #555555;
    margin: 0px 8px 0px 8px;
}



.events {   
    height: 215px;
    margin: 0px 0;
    margin-bottom: 25px;
}

.more-info-modal {
    position: fixed;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.65);
    width: 100%;
    height: 100%;
    z-index: 1050;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: center;
    -ms-flex-line-pack: center;
    align-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center
}

.more-info-modal .event-modal-wrapper {
    width: 50%
}

.more-info-modal .event-modal-wrapper .main-box {
    max-height: 450px;
    overflow: auto
}

.more-info-modal .event-modal-header {
    width: 100%
}

.more-info-modal .event-modal-header h1,
.more-info-modal .event-modal-header h4 {
    font-weight: 600;
    margin: 10px;
    color: #424242;
}

.more-info-modal .event-modal-header .left-side {
    float: left
}

.more-info-modal .event-modal-header .right-side {
    float: right
}

.more-info-modal .closeModal {
    background: none;
    width: initial;
    font-size: 24px;
    float: right;
    color: #424242;
}

.event {
    background: #F5F5F5;
    border-radius: 5px;
    overflow: hidden;
    display: inline-block;
    border-bottom: 3px solid #BDBDBD;
    width: 349px;
}

.rare_item {
    background: #2c3e50;
    border-radius: 5px;
    overflow: hidden;
    border-bottom: 3px solid rgba(0, 0, 0, 0.58)
}

.parrafo-evento {
    color: #424242;
}

.event-img,
.rare-img_item,
.large-rare-img_item {
    height: 90px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.rare_item-margin:nth-child(even) {
    padding: 0 15px 15px 0
}

.rare_item-margin:nth-child(odd) {
    padding: 0 0 15px 0
}

.event-details,
.rare-details_item {
    padding: 15px
}

.event-title,
.rare-title_item,
.large-rare-title_item {
    width: 283px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 15px 0;
    color: #737373;
}

.large-rare-title_item {
    width: 100%;
    font-size: 32px;
    font-weight: 300;
    line-height: 56px;
    margin: 0
}

.event-wrapper {
    width: 100%
}

.event-date,
.event-publisher,
.event-more-info {
    font-weight: 300;
    color: #4a4a4a;
    font-size: 12px;
    margin: 5px 0
}

.event-publisher {
    float: left
}

.event-more-info button {
    float: right;
    width: initial;
    font-weight: bold;
    margin: initial;
    background: none;
    padding: initial;
    border-radius: 0;
    color: #00796b;
}

.event-more-info button:hover,
.event-more-info button:focus {
    background: none
}


.cajasecciong{

    background-color: white;
    border: solid 1px #d3d3d2;    
    width: 100%;
    height: auto;
    border-radius: 10px;
    display: flex; 
    margin-bottom: 10px; 

}

.owl-stage-outer {

height: 220px;

}

.owl-nav{
    display: none;
}

.noticiatitulod{
    width: 100%;
    height: 70px;
    background-color:#e2e2e2;
    margin: 0px;
    border-radius: 10px 10px 0px 0px;
    padding: 10px 10px;
    display: flex;
    align-items: center;

}

.cajasecciong{
    display: flex;
    flex-direction: column;

}

.noticiamin{
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1px solid #d3d3d2;
}

.noticiainf{
    margin-left: 5px;
}

.noticiainf .titulo{
    color: #646464;
    text-decoration: none;
    font-size: 14px;    
}

.noticiainf .noticiad{
    color: #646464;
    text-decoration: none;
    font-size: 12px;    
}


.inicor{
    font-size: 11px;
    border: 2px solid #343434;
    background: #161616;
    padding-left: 7px;
    border-radius: 8px;
    margin-left: 70px;
    padding-top: 5px;
    height: 30px;
    width: 135px!important;
    transition: 1s;

}

.inicor a{
    color: #fff;
    text-decoration: none;
}

.inicor a:hover{
    color: #fff;
    text-decoration: none;
}

.inicor:hover{
    background: #684209;
    transition:all 1.5s ease-in-out;
    cursos:pointer;
}

.cass input{
    background-color: #e4e4e4;
    border-radius: 10px;
    border: 1px solid #a3a3a3;
    margin: 5px;
    padding: 5px;
    width: 300px;
}

.login .boton{
    font-weight: bold;
    background-color: #e4e4e4;
    color: #666666;
    border-radius: 10px;
    border: 1px solid #a3a3a3;
    margin: 5px;
    padding: 5px;
    width: 300px;
    transition: 1s;

}

.login .boton:hover{
    font-weight: bold;
    background-color: #b9b9b9;
    color: #494949;
    border-radius: 10px;
    border: 1px solid #a3a3a3;
    margin: 5px;
    padding: 5px;
    width: 300px;
    transition:all 1.5s ease-in-out;

}




.ajustesel .boton{
    font-weight: bold;
    background-color: #e4e4e4;
    color: #666666;
    border-radius: 10px;
    border: 1px solid #a3a3a3;
    margin: 5px;
    padding: 5px;
    width: 300px;
    transition: 1s;

}

.ajustesel .boton:hover{
    font-weight: bold;
    background-color: #b9b9b9;
    color: #494949;
    border-radius: 10px;
    border: 1px solid #a3a3a3;
    margin: 5px;
    padding: 5px;
    width: 300px;
    transition:all 1.5s ease-in-out;

}


.botonajuste a{
    text-decoration: none;
    color: #494949;
    transition: 1s;


}

.botonajuste a:hover{
    text-decoration: none;
    color: #494949;
    background-color: #e2e2e2;
    border-radius:20px;
    padding: 0px 7px 0px 7px;
    transition:all 1s ease-in-out;
}


.cs{
    text-decoration: none;
    color: #a40404;
    transition: 1s;


}

.contenido img{
    max-width: -webkit-fill-available;
}

.rangoh {
    box-shadow: 0px 13px 7px -3px rgba(0,0,0,0.1);
    border-radius: 7px;
    margin: 7px 12px;
    padding: 7px 10px;
    display: flex;
    background-image: url(https://images.habsite.es/album2098/news/g0x3Q0grk2l.png);
    align-items: center;
    background-repeat: no-repeat;
    justify-content: space-between;
    background-position: bottom -143px right;
    align-content: center;

}



.rangol{
    box-shadow: 0px 13px 7px -3px rgba(0,0,0,0.1);
    border-radius: 7px;
    margin: 7px 12px;
    padding: 7px 10px;
    display: flex;
    background-image: url(https://i.imgur.com/5VhASiy.png);
    align-items: center;
    background-repeat: no-repeat;
    justify-content: space-between;
    background-position: bottom -143px right;
    align-content: center;
}


.rango{
    border: 1px solid #b5b5b5;
    border-radius: 7px;
    margin: 7px 12px;
    padding: 7px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;

}




.infoequipoh {
    color: #ffffff;
    font-size: 20px;
}


.infoequipol {
    color: #ffffff;
    font-size: 20px;
}


.infoequipo{
    color: #525252;
}

.infoequipo hr{
    margin: 10px 0px 5px;
    width: 20%
}

.equipohead img{
    display: contents;

}

.miembros{
    display:flex;
    flex-wrap: wrap;
    margin: 7px 10px;

    
}

.miembro{
    margin: 0px 5px 5px 5px;
    border: 1px solid #b5b5b5;
    border-radius: 7px;
    padding: 7px 10px;
    width: 198.5px;
    display: flex;
    align-items: center;


}

.miembrofoto{
    background-color: #d3d3d2;
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background-position-x: -5px;
    background-position-y: -15px;
}

.miembroinfo{
    margin-left: 5px;
    color:#525252;
    font-size: 12px;

}

.equiposgeneralh{
    background-color:white;
    border: solid 1px #d3d3d2;
    width: 100%;
    max-width: 1080px;
    height: auto;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    background-image: url();
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position: bottom -120px right 0px;
}

.equiposgeneral{
    background-color: white;
    border: solid 1px #d3d3d2;
    width: 100%;
    max-width: 1080px;
    height: auto;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;
    background-image: url();
    display: flex;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    background-repeat: no-repeat;
    background-position: bottom -120px right 0px;
}


.calendario{
    width: 100%;
    height: auto;
    border-radius: 10px;
    padding: 10px 5px 10px 5px;   
    display: flex; 
    margin-bottom: 10px; 
    display: flex;
    flex-direction: column;   
}

.cabeza-c{
    width: 30px;
    float: left;
    height: 30px;
    margin-right: 10px;
    border-radius: 8px
}

.infopatotienda p{
}

.tiendasele{
    width:50px;
    height:50px;
    opacity: 0;
}

.tiendasele{
    width: 10px;
    height: 20px;
    background-color: red;
}

.form-search{
    display: flex;
    justify-content: center;
    margin-bottom: 5px;
}

.form-search input{
    width: 70%;
    height: 40px;
    border-radius: 5px;
    border: solid 1px #d3d3d2;
    margin: 5px;
    padding-left: 5px;
}

.form-search .btn_search{
 width: 25%;
 margin: 5px
}

.wiredtabla{
    color: #555;
    font-size: 14px;
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
}



.wiredtabla tr th{
    text-align-last: center;
    border-radius: 7px;
    border: solid 1px #c7c7c7;
    padding: 5px;
    text-align: center;

}

.wiredtabla tr td{
    text-align-last: center;
    border-radius: 7px;
    border: solid 1px #c7c7c7;
    padding: 10px 20px 10px 20px;
    text-align: center;


}

.wiredtabla tr td p{
    margin-bottom: 0px;


}

.icono{
    width: 20%;
}

.wired{
    width: 30%;
}

.funcion{
    width: 50%;
}


.registro{
    margin:20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.textoregistro{
    color: #555555;
    font-size: 13px;
    margin-bottom: 5px;
}

.casillaregistro input{
    background-color: #ededed;
    border: solid 1px #c5c5c5;
    border-radius: 7px;
    width: 320px;
    height: 40px;
    padding: 10px;
    margin-top:10px;
    margin-right: 20px;
    margin-bottom: 20px;
}


.registro select{
    background-color: #ededed;
    border: solid 1px #c5c5c5;
    border-radius: 7px;
    width: 320px;
    height: 40px;
    padding: 10px;
    margin-top:10px;
    margin-right: 20px;
    margin-bottom: 20px;
}

.botonregistro{
    background-color: #6a5ac5;
    border: solid 1px #3a2d89;
    border-radius: 7px;
    width: 320px;
    height: 40px;
    padding: 10px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.botonregistro:hover{
    background-color: #3a2d89;
    border: solid 1px #3a2d89;
    border-radius: 7px;
    width: 320px;
    height: 40px;
    padding: 10px;
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 20px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.fotodeperfil{
    background-color: #ededed;
    border: solid 1px #c5c5c5;
    border-radius: 7px;
    width: 90px;
    height: 130px;
    padding: 10px;
    margin-top:10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dato{
    margin-top: 15px;
}

.infodato{
    width: 250px;
    border: solid 1px #c5c5c5;
    border-radius: 7px;
    background-color: #ededed;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    margin-right: 15px;
    color: #6a6a6a;

}

.comandog{
    background-color: #f7f7f7;
    border-radius: 7px;
    border: solid 1px #d9d9d9;
    padding: 10px;
    color: #545454;
    font-size: 12px;
    width: 140px;
    height: 195px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-around;
    margin: 5px;
    text-align: center;
}


.famoso{
    border: solid 1px #d5d5d5;
    background-color: #ffffffb0;
    width: 130px;
    height: 130px;
    border-radius: 7px;
    box-shadow: 0px 0px 10px #d5d5d5;
    display: flex;
    align-items: flex-end;
    margin: 7px;
}

.famosoinfo{
    display: flex;
    align-items: center;
    padding: 18px;
    flex-direction: column;
    justify-content: flex-end;
}

@keyframes rotation {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(359deg)
    }
}