html{
    font-size: 62.5%;/*1REM = 10PX*/
    height: 100vh;

}
header{
    width: 100%;/*100*/
    min-height: 80vh;

    display: flex;
    flex-direction: column;
    justify-items: center;
    
    justify-content: space-between;

}
.mex{
    width: 40%;
    margin-left: auto;
    margin-right: auto;
    /*min-width: 90%*/;
    max-width: 80rem;
    margin-top: 6rem;

}

header .le{
    margin-bottom: 5rem;
}
@media (max-width: 450px) {
    .mex{
        width: 85%;

    }

}
h1 {
    text-align: center;
    font-family: 'Raleway', sans-serif;

}
p{
    text-align: center;
    font-family: 'Raleway', sans-serif;

}
.hero{
    width: 100%;
    height: 100%;
    background-color: #ebbab1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/*GLOBALES */
.contenedor{
    max-width: 1200px;
    margin: 0 auto;

}
.redes-sociales{
    height: 10rem;
    padding: .5rem 0;
    background-color: rgba(38, 38, 38, 1);
    
    

}
.redes-sociales ul{
    display: flex;
    justify-content: center;
    height: 100%;

    padding-inline-start: 0;

}
.imagenes{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto;

    grid-gap: .2rem;

    margin-bottom: 2rem;
    margin-top: 2rem;

}
@media (max-width: 1200px){
    .contenedor{
        width: 95%;

    }

}
.card{
    border: solid rgba(38, 38, 38, .2) .2px;

}/*
.card img{
    width: 100%;

}*/
header h1{
    color: white;
    font-size: 5rem;
    margin: 0;

}
header p{
    color: white;
    font-size: 2rem;

}
.img{
    height: 300px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

}
@media ( max-width: 400px ){
    .img{
        height: 100px!important;

    }

}
@media ( max-width: 800px ){
    .img{
        height: 150px;

    }

}
.downloadAll {
    background-color: rgba(38, 38, 38, 1);
    display: flex;
    justify-content: space-between;
    padding: .5rem;
    justify-items: center!important;

    margin-top: 2rem;

}
h2{
    font-family: 'Raleway', sans-serif;
    color: white;
    font-size: 20px;

}
.m{
    background-color: salmon;
    display: flex;
    justify-content: space-between;
    width: 350px;
    align-items: center;
    padding: 5px;
    border-radius: 5px;


}
.fa-camera{
    color: white;
    font-size: 40px;

}


.d{
    background-color: #FFA91F;
    display: flex;
    justify-content: space-between;
    width: 350px;
    align-items: center;
    padding: 5px;
    border-radius: 5px;

}
.d img, .m img{
    height: 15px;

}
.d h2, .m h2{
    margin: 0 0 0 5px;

}
.d:hover, .m:hover{
    cursor: pointer;

}

.header{
    
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    min-height: 40vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

} 
.redes-sociales .il{
    justify-content: space-between;

}



/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
    .header{
        background-attachment: fixed; 
    
    } 
    .overlay img {
        max-width: 50vh;
    }
  }
  
  /* 
    ##Device = Laptops, Desktops
    ##Screen = B/w 1025px to 1280px
  */
  
  @media (min-width: 1025px) and (max-width: 1280px) {
    
    .header{
        background-attachment: fixed; 
    
    } 
    
  }


 


.header h2{
    font-size: 6rem;

}
@media (min-width: 1000px){
    .header h2{
        font-size: 10rem;
    
    }

}
@media ( max-width: 300px ){
    .header h2{
        font-size: 4rem;

    }

}

.sandalia-header{
    background-image: url('../img/sandalia.jpeg');
}

.zapatilla-header{
    background-image: url('../img/Zapatilla.jpeg');
}

.botin-header{
    background-image: url('../img/Botin.jpeg');

}

.valerina-header{
    background-image: url('../img/Valerina.jpeg');

}

.tenis-header{
    background-image: url('../img/Tenis.jpeg');

}

.confort-header{
    background-image: url('../img/Confort.jpeg');

}

.especiales-header{
    background-image: url('../img/especial.jpeg');

}

.bota-header{
    background-image: url('../img/bota.jpeg');

}

.off-header{
    background-image: url('../img/ofertas.jpeg');

}

.casual-header{
    background-image: url('../img/Casual.jpeg');

}

.corridas-header{
    background-image: url('../img/corridas.jpeg');
}
.modelo{
    display: flex;
    justify-content: space-between;

}




/* Overlay */

.overlay {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: rgba(0,0,0,.9);
	width: 100%;
	height: 100vh;
	display: none;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.overlay.activo {
	display: flex;
}

.overlay img {
	max-width: 50vh;
}

.contenedor-img {
	position: relative;
}

.overlay #btn-cerrar-popup {
	background: none;
	font-size: 20px;
	color: rgb(38, 38, 38);
	border: none;
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
}
.img:hover{
    cursor: pointer;

}
.more {
    width: 100%;
    font-family: 'Raleway', sans-serif;
    background-color: royalblue;
    color: white;
    border: none;

}
.more:hover {
    cursor: pointer;
    background-color: #809aeb;

}