
body { font-family: sans-serif;  }


@media (max-width: 2000px) and (min-width: 900px) {

input, select, button { 
	display: block; 
	width: 80%; 
	margin-bottom: 15px; 
	padding: 8px; 
	background-color: #fada04;
}

button.ir-arriba { 
	display: none; 
	width: auto; 
	margin-bottom: 15px; 
	padding: .5rem; 
	background-color: #104789;
}

 
.contenedor_poe_aleat {
	border: 1px solid #ccc;
	border-radius: 32px;
	display: grid;
	grid-template-areas: "sel xxi" "ind tot" "aut aut" "pai pai";
	grid-template-columns: 1fr 1fr;
	border: 0; 
	padding: 10px; 
	width: 900px; 
	margin: 0;
}

.item-1 { grid-area: sel; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 32px; 
	max-width: 450px; 
	margin: 10px;}
.item-2 { grid-area: xxi; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 32px; 
	max-width: 450px; 
	margin: 10px;}
.item-3 { grid-area: ind; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 32px; 
	max-width: 450px; 
	margin: 10px;}
.item-4 { grid-area: tot; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 32px; 
	max-width: 450px; 
	margin: 10px;}
.item-5 { grid-area: aut;  
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 32px; 
	max-width: 900px; 
	margin: 20px;}
.item-6 { grid-area: pai; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 32px; 
	max-width: 900px; 
	margin: 20px;}
}

@media (max-width: 900px) and (min-width: 100px) {


input, select, button { 
	display: block; 
	width: 90%; 
	margin-bottom: 15px; 
	padding: 8px; 
	background-color: #fada04;
}

button.ir-arriba { 
	display: none; 
	width: auto; 
	padding: .5rem; 
	background-color: #104789;
}

div.item-1 { grid-area: sel; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 16px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

div.item-2 { grid-area: xxi; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 16px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

div.item-3 { grid-area: ind; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 16px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

div.item-4 { grid-area: tot; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 16px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

div.item-5 { grid-area: aut; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 16px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}

div.item-6 { grid-area: pai; 
	border: 1px solid #ccc; 
	padding: 20px; 
	border-radius: 16px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}
.contenedor_poe_aleat {
	grid-template-areas: "sel" "xxi" "ind" "tot" "aut" "pai";
	grid-template-columns: 1fr;
	grid-template-rows: 200px 200px 200px 200px 200px 200px;
	border: 0; 
	padding: 10px; 
	max-width: 900px; 
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 0;
	margin-right: 0;
}
}
