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

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

*{
  margin:0;
  padding:0;
  box-sizing:border-box;	
}

body {
	 font-family: 'Open Sans', sans-serif;
}


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


.contenedor {
	width: 100%;
	max-width: 1000px;
	margin: 5px auto;
	display: grid;
	grid-gap: 10px;
	grid-template-columns: 1fr 1fr 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 {
	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 only screen and (min-width:220px) and (max-width:580px){
	.contenedor {
		grid-template-columns: 1fr 1fr;
		text-align: center;
		display: block;
		align-items: center;
		justify-content: center;
		gap: 20px;


	}

	.imagen{
		width: 150px;
		height: 150px;
	}

	.contenido{
		text-align: justify;
		width: 150px;
		height: 150px;
	}

	.sidebar{
		text-align: justify;
		width: 150px;
		height: 150px;
	}

	.widget-1{
		text-align: center;
		width: 100px;
		height: 100px;
    }

	.texto{
		text-align: center;
		display: block;
		align-items: center;
		justify-content: center;
		width: 15px;
	}

    .container{
	text-align: center;
	display: block;
	align-items: center;
	justify-content: center;
}

	
}