body{
	background-image: url(../img/libros.jpg);
}

header{

	display:block;
	margin:4px;
	padding:5px;
	min-height:150px;
	border: 8px solid grey;
	border-radius:7pt;
	
	text-align:center;
	Color:white;
	padding-top:30px;
	font-size:100px;
	box-shadow:10px 10px 10px black;
	background-color:black;
}

footer{
	display:block;
	margin:4px;
	padding:5px;
	min-height:100px;
	border: 10px solid grey;
	border-radius:7pt;
	background-color:#DCDCDC;
}

.main{
	min-height:800px;
	margin:0px;
	padding:0px;
	display:flex;
	display:-webkit-flex;
	-webkit-flex-direcction:row;
	background-color:black; 
}

.main > article{
	margin:4px;
	padding:5px;
	border:1px solid grey;
	border-radius:7pt;
	flex-grow:3;
	flex-shrink:1;
	flex-basis:60%;
	-webkit-flex:3 1 60;
	order:2;
	-webkit-order:2;
	/*-Configuración de la foto de fondo*/
	background-image: url(../img/apertura3.jpg);
	background-repeat:no-repeat;
	background-size: cover;
}



.main > nav{
	margin:10px;
	padding:5px;
	border:1px solid black;
	border-radius:7pt;
	background-color: #DCDCDC;
	display:flex;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:20%;
	-webkit-flex:1 60 20;
	order:1;
	-webkit-order:1;
	}
	
.recomen{
	border:solid black 0px;
	color:white;
	width:250px;
	text-align:left;
	padding:10px 5px 5px 10px;
	margin-bottom:10px;
	margin-top:10px;
	background-color:white;
	transition:all 0.1s linear; 
	box-shadow:5px 10px 10px #000;
}

.recomen:hover{
	background-color:black;
	transition:all 0.1s linear;
	color:white;
	box-shadow:10px 20px 20px #555;
}


.main > aside{
	margin:4px;
	padding:5px;
	border: 1px solid #3333cc;
	border-radius:7pt; 
	background:#DCDCDC;
	flex-grow:1;
	flex-shrink:6;
	flex-basis:20%;
	-webkit-flex: 1 6 20%;
order:3;
-webkit-order:3}


.ventas{
	border:solid black 0px;
	width:11em;
	text-align:right;
	padding:10px 5px 5px 10px;
	margin-bottom:50px;
	margin-top:10px;
	background-color:white;
	margin-left:50px;
	margin-right:50px;
	padding-left:10px;
	box-shadow:-10px 10px 10px black;
}

.ventas:hover{
	background-color:black;
	transition:all 0.1s linear;
	color:white;
	box-shadow:-20px 20px 20px #555;
	
}

h1{
	text-align:center;
	font-size:30px;
	color:black;
}



a{
	color:black;
	padding-right:200px;
	padding:8px 7px 5px 8px;
}


a:visited{
	color:black;
	text-decoration:none;
	background:white;
	
}
a:hover{
	color:white;
	text-decoration:none;
}

A:link, A:visited { text-decoration: none }



@media all and (max-width:1024px){
	.main{
		flex-direction:column;
		-webkit-flex-direction:column;
	}
	
	.main > nav {
		-webkit-order:1;
		order:1;
	} 
	
	.main > aside{
		-webkit-order:3;
		order:3;
	}
	
	.main >article{
		-webkit-order:2;
		order:2;
	}
	
		.main >nav> h1{
			font-size:20px;
		}
header{
		font-size:80px;
		}

h1{
	font-size:25px;
}		
		
		}