* {
	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(2, 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: rgb(255, 255, 255);
	color: #fff;
	grid-area: header;
}

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

.contenedor .sidebar {
    
	grid-column: 3 / 4;
	background: rgb(253, 253, 253);
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: auto;
    grid-area: sidebar;
}
.contenedor .sidebar h3{
    text-align: center;
    padding-bottom: 50px;
   
    
}
.contenedor .sidebar img{
    margin-top: 0px;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    width: 100%;
}

.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: rgb(251, 251, 252);
	color: #fff;
    grid-area: footer;
    display: block;
}

@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";
	}
}
.contenedor .contenido p{
	text-align: justify;
}