@charset "utf-8";
* {
    box-sizing: border-box;
	margin: 0px;
	padding: 0px;
}

body {
	padding: 0px;
    border: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;	
}

.cuerpo {
    flex-grow: 1;
    display: flex;
	flex-direction: row;
    justify-content: space-around;    
    align-items: center;
    
}
#contenedorPrincipal {
    max-width: 100%;    
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
}

#contenedorPal {
    max-width: 100%;    
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1em;
    margin-left: 2em;
}

#albumFotos {    
    display: flex;
    position: relative;
    width: 100%;    
    height: auto;
}

#albumImagenes {    
    display: flex;
    position: relative;
    width: 100%;    
    height: auto;
    
}
#foto1 {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 2em;
}
#imagen1 {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 2em;
}

#albumFotos img:not(:first-of-type) {  
	margin: 0px;
	padding: 0px;    
    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
    height: 100%;    
    transform: scale(0,1);
}


#albumFotos img {
    transition: transform 1s linear 0s, opacity 1s linear 0s;
    opacity: 0;
    justify-items: center;
    width: auto;
    height: 100%;
    padding-right: 2em;
}


#albumImagenes img:not(:first-of-type) {  
	margin: 0px;
	padding: 0px;  
    position: absolute;
    top: 0px;
    left: 0px;
    width: auto;
    height: 100%;    
    transform: scale(0,1);
    
}
#albumImagenes img {
    transition: transform 1s linear 0s, opacity 1s linear 0s;
    opacity: 0;
    justify-items: center;
    width: auto;
    height: 100%;
}

#visorPantalla{
    margin-left: 2em;
    margin-right: 2em;
	
}

#imagenVisorPantalla{
    margin-left: 2em;
    margin-right: 2em;
	
}
#pasarFoto {
    display: flex;      
    justify-content: left;
    margin-left: 3em;
    width: 100%;
	margin-bottom: 1em;
	
}
#pasarFoto > span {
    font-size: larger;
    font-weight: bold;
}
#pasarFoto >span:not(:nth-of-type(2)) {
    cursor: pointer;
}

#controlImagenes  {
    display: flex;      
    justify-content: left;
    margin-left: 3em;
    width: 100%;
	margin-bottom: 1em;
    
}
#controlImagenes > span {
    font-size: larger;
    font-weight: bold;
	
}
#controlImagenes >span:not(:nth-of-type(2)) {
    cursor: pointer;
}


#contenedorPrincipal #albumFotos .salirDerecha {
    transform-origin: right center;
    transform: scale(0,1);
    opacity: 0;   
}
#contenedorPrincipal #albumFotos .salirIzquierda {
    transform-origin: left center;
    transform: scale(0,1);
    opacity: 0;   
}
#contenedorPrincipal #albumFotos .entrarDerecha {
    transform-origin: right center;
    transform: scale(1,1);
    opacity: 1;   
}
#contenedorPrincipal #albumFotos .entrarIzquierda {
    transform-origin: left center;
    transform: scale(1,1);
    opacity: 1;   
}

#contenedorPal #albumImagenes .imagenSalirDerecha {
    transform-origin: right center;
    transform: scale(0,1);
    opacity: 0;   
}
#contenedorPal #albumImagenes .imagenSalirIzquierda {
    transform-origin: left center;
    transform: scale(0,1);
    opacity: 0;   
}
#contenedorPal #albumImagenes .imagenEntrarDerecha {
    transform-origin: right center;
    transform: scale(1,1);
    opacity: 1;   
}
#contenedorPal #albumImagenes .imagenEntrarIzquierda {
    transform-origin: left center;
    transform: scale(1,1);
    opacity: 1;   
}


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

    .cuerpo {  
        width: 100%;
        height: auto;
        margin: 0px;      
        padding: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;        
    }

    #contenedorPal{
        height: auto;
        width:90%;
        padding: 2em;
        margin: 2em;
        
    }
    #contenedorPrincipal {        
        height: auto;        
        width: 100%;            
        padding: 2em;
        margin: 2em;
               
    }
    
    
    #albumImagenes img {
        height: auto;
        width: 100%;
        padding: 0em;
        margin: 0em;
    }

    #albumImagenes img:not(:first-of-type) {      
        padding: 0em; 
             
    }
    #albumFotos img:not(:first-of-type) {      
        padding: 2em; 
             
    }   
    
    #albumFotos img {        
        width: 100%;
        height: auto;  
        margin: 0em;
        padding: 2em;
    }
    
    #pasarFoto {        			
        justify-content: left;			
        width: 100%;
        font-size: small;
    }
    #visorPantalla {
        padding-left: 1em;
        padding-right: 1em;
    }

    #controlImagenes {        				
        justify-content: left;			
        width: 100%;
        font-size: small;
    }
    #imagenVisorPantalla {
        padding-left: 1em;
        padding-right: 1em;
    }
}

/* adaptcion para tablets */
@media screen and (max-width: 850px){
    
    #contenedorPrincipal {        
        height: auto;        
        width: 100%;            
        padding: 2em;
        
               
    }
    #contenedorPal{
        height: auto;
        width: 100%;
        padding: 2em;
    }
    
    #albumImagenes img {
        height: auto;
        width: 100%;
        
    }

    #albumImagenes img:not(:first-of-type) {      
        height: auto;
        width: 100%;        
    }   
    
    #albumFotos img {        
        width: 100%;
        height: auto;  
       
    }
    #albumFotos img:not(:first-of-type) {      
        width: 100%;
        height: auto;        
    }  
    
    #pasarFoto {        			
        justify-content: left;			
        width: 100%;
        font-size: small;
    }
    #visorPantalla {
        padding-left: 1em;
        padding-right: 1em;
    }

    #controlImagenes {        				
        justify-content: left;			
        width: 100%;
        font-size: small;
    }
    #imagenVisorPantalla {
        padding-left: 1em;
        padding-right: 1em;
    }
}


	
	/* adaptcion para moviles */
	@media screen and (max-width: 500px){
		
        #contenedorPrincipal {        
            height: auto;        
            width: 100%;            
            padding: 2em;
            margin: 0px;
                   
        }
        #contenedorPal{
            height: auto;
            width: 100%;
            padding: 2em;
            margin: 0px;
        }

		#foto1 {
			width: auto;
			height: 100%;			
		}
        #imagen1{
            width: auto;
			height: 100%;
        }

		#albumFotos{
			width: 100%;
            height: auto;
            justify-content: center;
		}

        #albumImagenes{
			width: 100%;
            height: auto;
            justify-content: center;
		}

		#albumFotos img:not(:first-of-type) {			
			width: auto;
			height: 100%;    
			justify-content: center;
		}

        #albumImagenes img:not(:first-of-type) {			
			width: 100%;
			height: auto;                         
			justify-content: center;
		}
		
		#pasarFoto {        			
            justify-content: left;			
            width: 100%;
            font-size: small;
            padding-left: 2em;
        }
        #visorPantalla {
            padding-left: 0.5em;
            padding-right: 0.5em;
        }
    
        #controlImagenes {        				
            justify-content: left;			
            width: 100%;
            font-size: small;
            padding-left: 3em;
        }
        #imagenVisorPantalla {
            padding-left: 0.5em;
            padding-right: 0.5em;
        }
	}