*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body
{
    width: 100vw;
    height: 100vh;
    background: #000;
    overflow-x: hidden;
  
}



@font-face{
    font-family:chida; src: url('../materiales/TIPOS/OLDENGL.TTF') format('truetype');
}




.overlay{
    height: 100vh;
    width: 0;
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    overflow: hidden;
    transition: .5s;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    }
    
    .overlay-content{
        position: relative;
        
        width: 100%;
        text-align: center;
        
        
    }
    
    .overlay-content a{
        margin: 35px;
        font-size: 4em;
        
    }
    
    .overlay a{
        padding: 8px;
        text-decoration: none;
    
        font-family: chida;
        color:#F7F1EB;
        display: block;
        transition: .5s;
    }
    
    .overlay a:hover, .overlay:focus{
        color: #f1f1f1;
    }
    
    .overlay .closebtn{
        position: absolute;
        top: 20px;
        right: 45px;
        font-size: 60px;
        font-family: chida;
        cursor: pointer;
    }
    
    .openbtn{
        color: #F7F1EB;
        font-size: 30px;
        z-index: 95;
        position: absolute;
        left:0%;
        top: 5%;
        cursor: pointer;
        font-family: chida;
        width: 100vw;
        text-align: center;
    }
    
    
    
    .cursor{
        position: relative;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        
        
    }








    






.pointer{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.70s ease-out;

}

.pointer img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer2{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.65s ease-out;

}

.pointer2 img{
    width: 300px;
    height: 300px;
    position: absolute;
}
.pointer3{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.60s ease-out;

}

.pointer3 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer4{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.55s ease-out;

}

.pointer4 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer5{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.50s ease-out;

}

.pointer5 img{
    width: 300px;
    height: 300px;
    position: absolute;
}
.pointer6{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.45s ease-out;

}

.pointer6 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer7{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.40s ease-out;

}

.pointer7 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer8{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.35s ease-out;

}

.pointer8 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer9{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.30s ease-out;

}

.pointer9 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer10{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.25s ease-out;

}

.pointer10 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer11{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.20s ease-out;

}

.pointer11 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer12{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.15s ease-out;

}

.pointer12 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer13{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.10s ease-out;

}

.pointer13 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer14{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2.05s ease-out;

}

.pointer14 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer15{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 2s ease-out;

}

.pointer15 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer16{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.95s ease-out;

}

.pointer16 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer17{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.90s ease-out;

}

.pointer17 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer18{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.85s ease-out;

}

.pointer18 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer19{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.80s ease-out;

}

.pointer19 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer20{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.75s ease-out;

}

.pointer20 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer21{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.70s ease-out;

}

.pointer21 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer22{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.65s ease-out;

}

.pointer22 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer23{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.60s ease-out;

}

.pointer23 img{
    width: 300px;
    height: 300px;
    position: absolute;
}
.pointer24{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.55s ease-out;

}

.pointer24 img{
    width: 300px;
    height: 300px;
    position: absolute;
}
.pointer25{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.50s ease-out;

}

.pointer25 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer26{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.45s ease-out;

}

.pointer26 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer27{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.40s ease-out;

}

.pointer27 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer28{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.35s ease-out;

}

.pointer28 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer29{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.30s ease-out;

}

.pointer29 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer30{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.25s ease-out;

}

.pointer30 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer31{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.20s ease-out;

}

.pointer31 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer32{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.15s ease-out;

}

.pointer32 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer33{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.10s ease-out;

}

.pointer33 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer34{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1.1s ease-out;

}

.pointer34 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer35{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 1s ease-out;

}

.pointer35 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer36{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 0.9s ease-out;

}

.pointer36 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer37{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 0.8s ease-out;

}

.pointer37 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer38{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 0.7s ease-out;

}

.pointer38 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer39{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 0.6s ease-out;

}

.pointer39 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.pointer40{
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    width: 30%;
    height: 30%;
    pointer-events: none;
    box-sizing: border-box;
    transition: 0.5s ease-out;

}

.pointer40 img{
    width: 300px;
    height: 300px;
    position: absolute;
}

.titulo p{
   
    font-size:169px;
    position: absolute;
    left:50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    
}

.titulo{
    
            padding-left:15%;
			color:#F7F1EB;
			padding-right:15%;
			font-size:169px;
			padding-top:15%;
			padding-bottom:15%;
            line-height: 100%;
            font-family: chida;    
            z-index: 90;
            position: absolute;
            width: 100vw;
            height: 100%;
            text-align: center;
    
    
   
    
}

.by{
    font-size:16px;
    color:#F7F1EB;
    width: 100vw;
   font-family: chida;
    position: absolute;
    z-index: 98;
    top: 70%;
    
    overflow: hidden;
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}

.by a{
    font-size: chida;
    color:#F7F1EB;
    cursor: pointer;

}


#tsu_pieza_sonora {
    position: absolute;
    z-index: 200;
    opacity: .4;
    top:80%;
    left:50%;
   
}

.linktsu {
    position: absolute;
    z-index: 200;
  
    top:80.9%;
    left:38%;
   
}


.linktsu a{
  font-family: chida;
  color: #F7F1EB;
  cursor: pointer;
  font-size: 11px;
}

audio{
height: 30px;
width:200px ;

}




@media only screen and (max-width: 1920px) {

    .titulo p{
   
        font-size:169px;
       
         } 
         .linktsu {
            
            left:42%;
            
           
        } 

}

@media only screen and (max-width: 1400px) {

    .titulo p{
   
        font-size:169px;
       
         } 
       
.by{
    top:75%;
}
.linktsu {
            
    left:40%;
    top: 81.3%;
   
} 

}

@media only screen and (max-width: 1024px) {

    .titulo p{
   
        font-size:110px;
        line-height: 110px;
       
         } 

         .by{
            top:70%;
        }
        
        .linktsu {
            
            left:36%;
            top:81.3%;
           
        } 
       
}

@media only screen and (max-width: 765px) {

    .titulo p{
   
        font-size:75px;
        line-height: 75px;
       
         } 

         .overlay-content a{
           
            font-size: 2em;
            
        }

}

@media only screen and (max-width: 320px) {

    .titulo p{
   
        font-size:40px;
        line-height: 40px;
       
         } 

         .by{
            top:58%;
        }
        
        
         .linktsu {
            
            left:30%;
            top: 74.9%;
           
        } 
        .linktsu a{
            font-size: 11px;
        }

      #tsu_pieza_sonora{
          left: 21%;
      }

        

        .overlay-content a{
           
            font-size: 1em;
            
        }

        .pointer img{
    
            width: 150px;
            height: 150px;
            
        
        }


        .pointer2 img{
    
            width: 150px;
            height: 150px;
            
        
        }

        .pointer3 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer4 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer5 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer6 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer7 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer8 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer9 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer10 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer11 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer12 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer13 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer14 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer15 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer16 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer17 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer18 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer19 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer20 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer21 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer22 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer23 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer24 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer25 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer26 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer27 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer28 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer29 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer30 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer31 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer32 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer33 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer34 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer35 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer36 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer37 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer38 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer39 img{
    
            width: 150px;
            height: 150px;
            
        
        }
        .pointer40 img{
    
            width: 150px;
            height: 150px;
            
        
        }

}