* {
    margin: 0;
    padding: 0;
    border: 0;
    position:relative;
    
}



body {
    display: flex;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
}




.fondo img{
    position:absolute;
    z-index: 10;
    height:100vh;
    min-width: 100vw;
    
    
    
}

.icon {

    position: fixed;
    z-index: 15;
    
}

.icon img{
   
    margin-left: 25px;
    TOP:-25PX;
    height: 250px;
    width: 160px;

 
}

.detras_icon{
    position: fixed;
    z-index: 15;
    
}

 .detras_icon img {
     display: flex;
        width: 160PX;
        margin-left: 200px;
        animation: fadeDown 4s ease;
    }
    



.intro {
    display: none;
    margin: auto;
    position: fixed;
    background-color: rgba(0,0,0,0.45);
    top:0;
    z-index: 20;
    left: 0;
    width: 100%;
    height: 100%;
    
    
}

.intro.activo {
    display: block;
}


.intro2 {
    display: none;
    margin: auto;
    position: fixed;
    background-color: rgba(0,0,0,0.0);
    top:0;
    z-index: 20;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    
    
}

.intro2.activo {
    display: block;
}






.help {
    width:100%;
   
    justify-content: flex-end;
    display: flex;
    z-index: 15;
  
}

.help img {
    position: fixed;
    width: 120px;
    

}

.help2 { 
    
    display: none;
 
}



/* HELP pc*/

body button {
    

    color: transparent;
    background-color: transparent;
    border-color: transparent;
    
}

.modal{
    display: none;
}
.modal:target{
    display: block;
    position: fixed;
    background-color: rgba(0,0,0,0.0);
    top:0;
    z-index: 15;
    left: 0;
    width: 100%;
    height: 100%;
    
}

.imagenXL {
    
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items:flex-end;
    justify-content:flex-end;
}



.imagenXL img {
    animation: translateUP 1.5s ;
    display: flex;
    cursor:auto;
    width: auto;
    max-height: 100vh;
    max-width: 30vw;
    margin: auto;
    box-sizing: border-box;
    z-index: 10;
    
} 

@keyframes translateUP{
    0% { 
        transform: translate(0%, 50%);
        opacity: 0;
    }
    
    100% {
        transform: translate(0%, 0%);
        
    }
    
    
}

.imagenXLintro {
    
    width: 100%;
    height: 100%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}



.imagenXLintro img {
    animation: fadeIn 1.5s ease;
    display: flex;
    cursor:auto;
    width: auto;
    max-height: 100vh;
    max-width: 55vw;
    margin: auto;
    box-sizing: border-box;
    
} 


@keyframes fadeIn {
    0% { opacity: 0;
        transform: translate(0%, 5%)
    }
    
    100% {
        transform: translate(0%, 0%);
        
    }
 
}

@keyframes fadeDown {
    0% { opacity: 0.8;
        transform: translate(0%, -60%)
    }
    
    100% {
        transform: translate(0%, 0%);
        
    }
 
}



.cerrarXL {
    z-index: 21;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0%;
    right: 0%;
    cursor: pointer;
    
    
}

.cerrarXLintro {
    z-index: 21;
    width: 35vw;
    height: 47vh;
    position: fixed;
    top:0%;
    right: 0%;
    cursor: pointer;
    
    
}


@media screen and (min-width: 1530px) {
    
    
    .icon img {
    margin-left: 25px;
    TOP:-25PX;
    height: 270px;
    width: 180px;
    }
    
    .help img {
    position: fixed;
    width: 150px;

}
    
    .imagenXL img {
    max-width: 30vw;
   
} 
    
    .detras_icon img {
     display: flex;
        width: 180PX;
        margin-left: 220px;
        animation: fadeDown 4s ease;
    }
    
    

    
  
    
}




/* VERSIÓn MÓvil */
@media screen and (max-width: 630px) and (orientation: portrait) {
 
    
    .intro2{
        opacity: 1;
    }
    
 
     
    .detras_icon img{
    display: none;
}

    
    .help {
    display: none;
      
    }

    .help2 { 
    width:100%;
    justify-content: flex-end;
    display: flex;
    z-index: 10;
  
    }
    
    .help2 img {
        position: fixed;
        width: 130px;

    }
    
    .imagenXL img {
    padding-left: 5px;
    display: flex;
    cursor:auto;
    width: auto;
    max-height: 90vh;
    max-width: 105vw;
    margin: auto;
    box-sizing: border-box;
    z-index: 10;
        
    }
        
    .imagenXLintro img {
    animation: fadeIn 0s ease;
    padding-left: 5px;
    display: flex;
    cursor:auto;
    width: auto;
    max-height: 90vh;
    max-width: 100vw;
    margin: auto;
    box-sizing: border-box;
} 

}