@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

*{
  box-sizing:border-box;	
}

body {
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
  }



.header{
	background-color: rgba(51,51,51,0.9);
	color: #fff;
}


.contenedor {
	padding-top: 100px;
	width: 100%;
	max-width: 1000px;
	margin: 5px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(4, auto);

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

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

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

.contenedor .contenido {
	grid-area: contenido;
	text-align: center;
	display: block;
	align-items: center;
	justify-content: center;
}

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

.contenedor .widget-1,
.contenedor .widget-2 {
	height: 100px;
	text-align: center;
	display: block;
	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;
}

.text{
	color: black;
	width: 100%;
	padding: 10px;
	margin: 0, 20px;
	text-align: justify;
}

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