/* CSS Document */
*
{ 
	margin:0;
	padding:0;
}

body {
	background: #E9ECF4;
	color: #000;
	font-family: 'Roboto', san-serif;
}

.contenedor {
	width:100%;
	max-width:100%;
	margin: 20px auto;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(5, auto);
	grid-template-areas: "header header header"
						 "bajada bajada bajada"	
						 "contenido contenido sidebar"
						 "widget-1 widget-2 sidebar"
						 "footer footer footer";
}	

.contenedor > div,
.contenedor .header,
.contenedor .bajada,
.contenedor .contenido,
.contenedor .sidebar,
.contenedor .footer
	{		
		padding:20px;
		border-radius:4px;
	}
	
.contenedor .header {
	background-image: url("fondoheader.png");
	background: #12200E;
	color:#fff;
	grid-area: header;		
}

.contenedor .bajada
	{
		grid-area: bajada;		
	}
	
.contenedor .contenido
	{
		grid-area: contenido;
		
	}
	
* {
	margin: 0;
	padding: 0;
}

body {
	background: #E9ECF4;
	color: #000;
	font-family: 'Roboto', sans-serif;
}

.contenedor {
	width: 90%;
	max-width: 1000px;
	margin: 20px auto;
	display: grid;
	grid-gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);

	grid-template-areas: "header header header"
						 "contenido contenido sidebar"
						 "widget-1 widget-2 sidebar"
						 "footer footer footer";
}

.contenedor > div,
.contenedor .header,
.contenedor .contenido,
.contenedor .sidebar,
.contenedor .footer {
	background: #fff;
	padding: 20px;
	border-radius: 4px;
}

.contenedor .header {
	background: #12203E;
	color: #fff;
	grid-area: header;
}

.contenedor .contenido {
	grid-area: contenido;
}

.contenedor .sidebar {
	grid-column: 3 / 4;
	background: #fAA43D;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
	grid-area: sidebar;
}

.contenedor .widget-1,
.contenedor .widget-2 {
	background: #55a8fd;
	color: #fff;
	height: 100px;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
}

.contenedor .widget-1 {
	grid-area: widget-1;
}

.contenedor .widget-2 {
	grid-area: widget-2;
}

.contenedor .footer {
	background: #12203E;
	color: #fff;
	grid-area: footer;
}

@media screen and (max-width: 768px){
	.contenedor {
		grid-template-areas: "header header header"
						 "contenido contenido contenido"
						 "sidebar sidebar sidebar"
						 "widget-1 widget-1 widget-2"
						 "footer footer footer";
	}
}