*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Courier, "Lucida Console", monospace;
    
}

.ealex {
    position: fixed;
    width: 15%;
    
    top: 43%;
    left: 58%;
}

.evia {
    position: fixed;
    width: 15%;
    
    top: 43%;
    left: 25%;
}

.proProy1, .proProy2, .proProy3 {  
    position: fixed;
    width: 8%;
    height: 13%;
    top: 18%;
    left: 89%;
}
.proProy1{
    top: 18%;
}
.proProy2{ 
    top: 41%; 
}
.proProy3{
    top: 65%;  
}


.logoTw {
    position: fixed;
    top: 28%;
    left: 23%;
}

.logotwa1 {
    width: 80%;
    position: fixed;
    top: 29%;
    left: 18%;
}

.logotwa1 :hover{
width:20%;
}
.proproy1 :hover{
    border-radius: 2px;
    box-shadow: 0 0 5px 5px rgba(229, 245, 4, 0.616);
    
}

.rankA {
    color: #fff;
}

.negro {
    position: fixed;
    background-color: black;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}
th, td {
    
    text-align: center;
    color: #fff;
    padding: 2.5px;
}
h3 {
    position: relative;
    text-align: center;
    top: 50%;
    left: 50%;
        transform: translateX(-50%) translateY(-50%);
        color:rgb(255, 255, 255);
    font-size: 30px;
}
.tablaRank{
width: 100%;

}

.imadfrank {
    
    position: fixed;
    width: 66%;
    
    top: 30%;
    left:17.2%;  
}
.rank {
    background-color: rgba(0, 0, 0, 0.712);
    position: fixed;
    width: 66%;
    height: 59.5%;
    top: 30%;
    left:17.2%;  
}

.cuerpo1 {
    background:rgb(6, 6, 6);
}

.fondoTotal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0%;
    left:0%;
    
}
.cajabotoflotante{
    position: fixed;
width: 100%;
height: 20%;
top: 55%;

    
}
.BotonInicio   {
    position: absolute;
    width:10%;
    height: 80%;
    top: 5%;
    left: 20%;
    animation: movimientobI 7s infinite linear ;
}

@keyframes movimientobI {
0%   {transform: translate(0px,0); }  
49% {transform: translate(510%,0); }
50% {transform: translate(510%,0);}
99% {transform: translate(0,0);}
100% {transform: translate(0,0);}
}

.fondoRotacion{
    position: fixed;
    width:100%;
    height: 100%;
    top: 0%;
    left: -110%;
}

.botones .botonesinicio {
    position: fixed;
    width: 5%;
   top: 22%;
    left:3%;
    
}

.botonesinicio div a {
    color:rgba(0, 0, 0, 0.979);
    text-decoration: none;
    list-style: none;
    text-align: center;
      
}
.letreroInicio {

    position: fixed;
    width: 100%;
    height: 12%;
    top: 16%;
     
}

.h1inicio {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
        transform: translateX(-50%) translateY(-50%);
        color:rgb(3, 3, 3);
    font-size: 80px;
   
  
}
.Bingles, .BEspanol {
    font-weight: 900;
    position: fixed;
    margin: auto;
    width: 30%;
    height:10%;
   
    
    color:rgba(0, 0, 0, 0.452);
}
.Bingles {
    
    top: 39%;
    left: 10%; 
    
   
}

.botingles1, .botEsp1   {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
        
    font-size: 4em;
        transform: translateX(-50%) translateY(-50%);
        
    }

    .botEsp1 {
        animation: botonespcolor 7s infinite linear ;
    }
    
    @keyframes botonespcolor {
        0%   {color: rgb(0, 0, 0) ; } 
        26%   {color: rgb(0, 0, 0) ; } 
        50% {color:  rgb(255, 251, 4);}
        74% {color:  rgb(0, 0, 0);}
        
        100% {color: rgb(0, 0, 0);}
        }
    
    

    .botingles1 {
        animation: botoninglcolor 7s infinite linear ;
    }
    
    @keyframes botoninglcolor {
    0%   {color: rgb(255, 251, 4) ; }  
    24% {color: rgb(0, 0, 0);}
    76% {color: rgb(0, 0, 0);}
    
    100% {color: rgb(255, 251, 4);}
    }


.BEspanol {
   
    top: 39%;
   right: 10%; 
    
}


.BEspanol:hover {

  
color: rgb(255, 251, 4);
    
    }
.Bingles1 {
    top: 39%;
    left: 49%; 
    
}

.botones p a {
    color:#fff;
    text-decoration: none;
    list-style: none;
    text-align: center;
    word-wrap: break-word;
}
.botones p b, .letrasA2 {
    color:rgb(238, 255, 0);
    text-decoration: none;
    list-style: none;
    text-align: center;
    word-wrap: break-word;
}

.letrasa1, .letrasa2, .letrasa3, .letrasa4, .letrasa5, .letrasa6, .letrasa7, .letrasa8, .letrasa9 {
    
    text-align: center;
    position: fixed;
    width: 7%;
    height: 3.7%;
    left:2%;
    margin: auto;
    font-size: 75%;
}
.lincklist :hover, .letrasa1 :hover, .letrasa2 :hover, .letrasa3 :hover, .letrasa4 :hover, .letrasa5 :hover, .letrasa6 :hover, .letrasa7 :hover, .letrasa8 :hover, .letrasa9 :hover {
    
    color: rgba(245, 241, 4, 0.966);
}

.letrasa1 {
    top: 24.3%;
} 

.letraA1 {
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;  
   
        transform: translateX(-50%) translateY(-50%);
        
    }


.letrasa3 {
    top: 39.5%;   
}

.letrasa2 {
    top: 32%;
}

.letrasa4 {
    top: 47.5%;
}

.letrasa5 {
    top: 55.1%;
}

.letrasa6 {
    top: 62.8%;
}

.letrasa7 {
    top: 70.5%;
}

.letrasa8 {
    top: 78.4%;
}

.letrasa9 {
    top: 86.1%;
}


#fondoF, #fondoF1, #fondoF2, #fondoF3, #fondoF4, #fondoF5, #fondoF6, #fondoF7 , #fondoF8 {
    
    position: fixed;
    
    height: 100%;
    top: 0%;
    left:0%;
    
}


.banerDestacado {
    align-items: center;
    position: fixed;
    width: 46%;
    height: 12.5%;
    top: 7.1%;
    left: 26.5%;
    
}


.introduccion {
    background:rgb(6, 6, 6);
    position: relative;
    width: 65%;
   color:#fff;
    left: 17.5%;
    top: 30%;
   
}

.introduccion p, .introduccion h1, .introduccion h2 {
    background:rgb(6, 6, 6);
 padding: 1% ;
 text-align: center;
 
}
.introduccion p{
  font-size:20px;  
}

.introduccion h1 {
    font-size:40px;
   }

.introduccion h2 {
    font-size:40px;
   }



@media screen and (max-width:1000px){
   
    .letrasa1, .letrasa2, .letrasa3, .letrasa4, .letrasa5, .letrasa6, .letrasa7, .letrasa8, .letrasa9 {
        font-size:55%;
    }
    p{
        font-size:7px;  
      }
      
     .cuerpo1 .introduccion div h1, .cuerpo1 .introduccion div h2 {
          font-size: 25px;
         }
         .cuerpo1 .introduccion div p{
            font-size:13px;  
         }
         .h1inicio {
            font-size: 50px;
        }
        .botingles1, .botEsp1   {
         
            font-size: 3em;
              
            }
            th, td {
                font-size: 10px;
                text-align: center;
                color: #fff;
                padding: 60%, 60%, 60%, 60%;
            }
            h3 {
                position: relative;
                text-align: center;
                top: 50%;
                left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    color:rgb(255, 255, 255);
                font-size: 12px;
            }
}

@media screen and (max-width:700px){
    .letrasa1, .letrasa2, .letrasa3, .letrasa4, .letrasa5, .letrasa6, .letrasa7, .letrasa8, .letrasa9 {
        font-size:50%;
    }
    p{
        font-size:7px;  
      }
      
      .introduccion p{
        font-size:10px;  
      }
      
      .introduccion h1 {
          font-size:30px;
         }
      
      .introduccion h2 {
          font-size:30px;
         }
     .cuerpo1 .introduccion div h1, .cuerpo1 .introduccion div h2 {
          font-size:30px;
         }
         .cuerpo1 .introduccion div p{
            font-size:11px;  
         }

         .h1inicio {
            font-size: 40px;
        }
        .botingles1, .botEsp1   {
            font-size: 2em; 
            }

            th, td {
                font-size: 9px;
                text-align: center;
                color: #fff;
                padding: 25%, 25%;
            }
            h3 {
                position: relative;
                text-align: center;
                top: 50%;
                left: 50%;
                    transform: translateX(-50%) translateY(-50%);
                    color:rgb(255, 255, 255);
                font-size: 12px;
            }
       
}

@media screen and (max-width:450px){
    .letrasa1, .letrasa2, .letrasa3, .letrasa4, .letrasa5, .letrasa6, .letrasa7, .letrasa8, .letrasa9 {
        font-size:40%;
    }

    .introduccion p{
        font-size:10px;  
      }
      
      .introduccion h1 {
          font-size:250px;
         }
      
      .introduccion h2 {
          font-size:25px;
         }
    .fondoRotacion{   
        left: 0%;
    }

    .h1inicio {
        font-size: 30px;
    }
    .botingles1, .botEsp1   {
         
        font-size: 2em;
          
        }
    
}

.imadf {
    
    width:100%;
    left: 50%;
    
}

.logod1{
    background-color: aqua;
    
    width: 7.5%;
    height: 12.5%;
    left: 2.9%;
    top: 6.9%;
}

.logo1 {
    position: fixed;
    left: 4.4%;
    top: 6.6%;
    width: 6%;
    animation: movimiento2 4s infinite linear ;
}

@keyframes movimiento2 {
25% {transform: translate(-5px,5px); }
50% {transform: translate(0,0);}
 75% {transform: translate(5px,5px);}
100% {transform: translate(0,0);}
}