/*Estilos de la galeria*/

.galeria {
	width: 100%;
	margin: auto;
	list-style: none;
	padding: 20px;
	box-sizing: border-box;
	
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
}

.galeria li {
	margin: 5px;
}
/* se mueve el tamaño de las imgenes princiales */
.galeria img {
	width: 300px;
	height: 300px;
    padding: 20px;
}

/*Estilos del modal*/

.modal {
	display: none;
}

.modal:target {
	
	display: block;
	position: fixed;
	background: rgba(120, 118, 241, 0.8);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.modal h3 {
	color: #fff;
	font-size: 30px;
	text-align: center;
	margin: 70px 0;
}

.imagen {
	width: 100%;
	height: 50%;
	
	display: flex;
	justify-content: center;
	align-items: center;
}

.imagen a {
	color: #fff;
	font-size: 40px;
	text-decoration: none;
	margin: 0 10px;
}

.imagen a:nth-child(2) {
	margin: 0;
	height: 100%;
	flex-shrink: 2;
}

.imagen img {
	width: 500px;
	height: 100%;
	max-width: 100%;
	border: 7px solid #fff;
	box-sizing: border-box;
}

.cerrar {
	display: block;
	background: #fff;
	width: 25px;
	height: 25px;
	margin: 50px auto;
	text-align: center;
	text-decoration: none;
	font-size: 35px;
	color: #000;
	padding: 5px;
	border-radius: 50%;
	line-height: 25px;
}

h3{

color: #000;
text-decoration: none;

}
		/*Estilos  para galerias*/
        .contenedor-img {
            width: 300px;
            height: 200px;
            float: left;
            overflow: hidden;
            position: relative;
            text-align: center;
            cursor: default;
            background: #fff;
            margin: 20px;
            border-radius: 10px 10px 10px 10px;
            }


            .contenedor1-img {
                width: 300px;
                height: 450px;
                float: left;
                overflow: hidden;
                position: relative;
                text-align: center;
                cursor: default;
                background: #fff;
                margin: 20px;
                border-radius: 10px 10px 10px 10px;
                }




            .contenedor-img .mascara,.contenedor-img .contenido {
            width: 300px;
            height: 200px;
            position: absolute;
            overflow: hidden;
            top: 0;
            left: 0
            }

            .contenedor-img img {
            display: block;
            position: relative;
            
            }
            .contenedor-img h2 {
            text-transform: uppercase;
            color: #fff;
            text-align: center;
            position: relative;
            font-size: 17px;
            padding: 10px;
            background: rgba(0, 0, 0, 0.9);
            margin: 20px 0 0 0
            }
            .contenedor-img p {
            font-size: 12px;
            position: relative;
            color: #fff;
            padding: 10px 20px 10px;
            text-align: center
            }
            .contenedor-img a.link {
            display: inline-block;
            text-decoration: none;
            padding: 7px 14px;
            background: #222;
            color: #fff;
            text-transform: uppercase;
            box-shadow: 0 0 1px #000
            }
            .contenedor-img a.link:hover {
            box-shadow: 0 0 5px #000
            }
            /*termina base*/
            .capa_fontal img {
            transition: all 0.2s ease-in;
            }
            .capa_fontal .mascara {
            background-color: rgb(0, 0, 0);
            width: 300px;
            padding: 60px;
            height: 300px;
            opacity: 1;
            transform: translate(300px, 200px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
            transition: all 0.5s ease-in-out;
            }
            .capa_fontal h2 {
            border-bottom: 1px solid rgba(0, 0, 0, 0.3);
            background: transparent;
            margin: 20px 40px 0px 40px;
            transform: translate(200px, -200px);/*Desplazamos el título arriba a la derecha*/
            transition: all 0.3s ease-in-out;
            }
            .capa_fontal p {
            transform: translate(-200px, 200px);/*Desplazamos la descripción abajo a la izquierda*/
            transition: all 0.4s ease-in-out;
            }

            
            .capa_fontal a.link {
            transform: translate(0px, 100px);/*Desplazamos el link para abajo*/
            transition: all 0.3s 0.1s ease-in-out;
            }
            
            .capa_fontal:hover .mascara {
            opacity:1;
            transform: translate(-96px, -120px) rotate(45deg);
            }
            .capa_fontal:hover h2 {
            transform: translate(0px,0px);
            transition-delay: 0.3s;
            }
            .capa_fontal:hover p {
            transform: translate(0px,0px);
            transition-delay: 0.4s;
            }
            .capa_fontal:hover a.link {
            transform: translate(0px,0px);
            transition-delay: 0.5s;
            }
            



/*---------------------------------capas 2----------------------------*/

            .capa_fontal2 .mascara2 {
                background-color: rgb(0, 0, 0);
                width: 300px;
                padding: 60px;
                height: 450px;
                opacity: 1;
                transform: translate(300px, 450px) rotate(0deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
                transition: all 0.5s ease-in-out;
                }






            .contenedor1-img .mascara2,.contenedor1-img .contenido2 {
                width: 300px;
                height: 450px;
                position: absolute;
                overflow: hidden;
                top: 0;
                left: 0
                }







                .capa_fontal2:hover .mascara2 {
                    opacity:1;
                    transform: translate(0px, 450px) rotate(0deg);
                    
                    }







            /*capa frontal 2 turs*/
            .capa_fontal2 img {
                transition: all 0.2s ease-in;
                }
                .capa_fontal2 .mascara2 {
                background-color: rgb(0, 0, 0);
                width: 300px;
                padding: 60px;
                height: 450px;
                opacity: 1;
                transform: translate(300px, 450px) rotate(45deg); /*Rotamos para dar efecto de diagonal y lo movemos por donde queremos que entre.*/
                transition: all 0.5s ease-in-out;
                }
                .capa_fontal2 h2 {
                border-bottom: 1px solid rgba(0, 0, 0, 0.3);
                background: transparent;
                margin: 20px 40px 0px 40px;
                transform: translate(200px, -450px);/*Desplazamos el título arriba a la derecha*/
                transition: all 0.3s ease-in-out;
                }
                .capa_fontal2 p {
                transform: translate(-200px, 450px);/*Desplazamos la descripción abajo a la izquierda*/
                transition: all 0.4s ease-in-out;
                }
    
                
                .capa_fontal2 a.link {
                transform: translate(0px, 450px);/*Desplazamos el link para abajo*/
                transition: all 0.3s 0.1s ease-in-out;
                }
                
                .capa_fontal2:hover .mascara2 {
                opacity:1;
                transform: translate(-0px, -0px) rotate(0deg);
                }
                .capa_fontal2:hover h2 {
                transform: translate(0px,0px);
                transition-delay: 0.3s;
                }
                .capa_fontal2:hover p {
                transform: translate(0px,0px);
                transition-delay: 0.4s;
                }
                .capa_fontal2:hover a.link {
                transform: translate(0px,0px);
                transition-delay: 0.5s;
                }