@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
html {
     background-image: url(./img/bolas.png);     
}
body { 
     width: 100%;
     font-family: poppins, sans-serif;
     font-weight: 300;   
     line-height: 0.1em;     
} 
.logo img {  
     display: grid;
     place-items: center;
     margin: 0 auto;
     width: 100px;   
     border-radius: 6%;    
} 
h1 {
    font-family: "Russo One", serif;
    font-size:3em; 
    font-weight: 300;
    line-height:0.2em;
    text-align: center;
    color: white;
} 
h2 {
    font-size: 1.1em; 
    font-weight: 600;
    text-align: center;
    display: block;
    line-height: 1em;   
    color: white;

    /*text-shadow: -1px -1px 1px #000, 1px 1px 1px #000, -1px 1px 1px #000, 1px -1px 1px #000;
     -webkit-text-fill-color: white;
     -webkit-text-stroke: 1px green;   */
}
.container th h1 {
     font-weight: bold;
     font-size: 1em;
     text-align: left;     
} 
.container td {    
     margin-bottom: 15px; 
     font-weight: normal;
     font-size: 1em;
     -webkit-box-shadow: 0 2px 2px -2px #012B37;
     -moz-box-shadow: 0 2px 2px -2px #012B37;
     box-shadow: 0 2px 2px -2px #012B37;
} 
.container {     
     text-align: left;
     overflow: hidden;
     width: 40%;
     margin: 0 auto;
     display: table;
     padding: 16px 0 16px 0;
} 
.container td, .container th {
     padding-bottom: 2%;
     padding-top: 2%;
     padding-left:15px;     
}
.container tr #cuadro-1 {
     background-color: #012B37;
     /*background-color: #F5C501;   */
}
.container tr #cuadro-2 {
     /*background-color: #DB440F;*/
     background-color: #012B37;
}
.container tr #cuadro-3 {
     background-color: #012B37;
     /*background-color: #BB1C00;*/
}
.container tr #cuadro-4 {
     background-color: #012B37;
     /*background-color: #9B4924;*/
}
.container tr #cuadro-5 {
     background-color: #012B37;
}
.container tr #cuadro-6 {
     background-color: #012B37;
}
.container tr #cuadro-7 {
     background-color: #012B37;
}
.container tr #cuadro-8 {
     background-color: #012B37;
}
.container tr #cuadro-9 {
     background-color: #012B37;
}
.container tr #cuadro-10 {
     background-color: #012B37;
}
.container tr #cuadro-11 {
     background-color: #012B37;
}
/*.container tr:nth-child(odd) {
     background-color: #ef47d0;
} 
.container tr:nth-child(even) {
     background-color: #4e80f5;
}*/

.linkeo {
     text-decoration: none;
     color: white;
} 
.container th {
     background-color: #1F2739;
}
.container tr {
    gap:  25px;
} 
.container td:first-child { color: white; }
 
/*.container tr:hover {
     background-color: grey;
     -webkit-box-shadow: 0 6px 6px -6px #0E1119;
        -moz-box-shadow: 0 6px 6px -6px #0E1119;
             box-shadow: 0 6px 6px -6px #0E1119;
}*/ 
.container td:hover {     
     color: none;
     font-weight: bold;
     box-shadow: #525253 -1px 1px, #525253 -2px 2px, #525253 -3px 3px, #525253 -4px 4px, #525253 -5px 5px, #525253 -6px 6px;    
     transform: translate3d(6px, -6px, 0);      
     transition-delay: 0s;
     transition-duration: 0.4s;
     transition-property: all;
     transition-timing-function: line;
}
td {
     display: flex;    
     align-items: center; /* Alinea verticalmente los elementos */
     gap: 10px; /* Espacio entre los elementos */
}
.item1 {
     line-height: 19px;    
     text-align: left;
     flex-grow: 1; /* Ocupa el espacio disponible */
}
.item2 img {
     width: 60px;
     padding-right: 8px; /* Mantiene el tamaño de la imagen */
}
footer {     
     position: relative;    
     font-size: small;
     padding-top: 50px;
     padding-bottom: 35px;
     text-align: center;     
}
footer .contact-link {
     color: white!important;
     text-decoration: none;
}
footer .contact-link:hover {
     color: #FB667A;
}
@media (max-width: 1111px) {
     .item1, .item2 {
          font-size: 0.85rem;
     }     
}

@media (max-width: 800px) {
.container td:nth-child(4),
.container th:nth-child(4) { display: none; }
.logo img {
     width: 70px;   
}
.container {
     text-align: left;
     overflow: hidden;
     width: 80%;
     margin: 0 auto;
     display: table;
     padding: 0 0 8em 0;
}
.container td, .container th {
     padding-bottom: 5%;
     padding-top: 5%;
     padding-left:2%;  
}
.item1, .item2 {
     font-size: smaller;
     }
}
@media (max-width: 500px) {          
     .item1, .item2 {
          font-size: 0.8rem;
     }
     footer {
          padding-top: 10px;
     }
}