#container{
	display:grid;
	width:100%;
	height:95vh;
	margin:0;
	padding:0;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 10% 5%	25% 25% 25% 10%; 
	
}
#titulo{
	background-color:#0E1628;
	color: white;
	grid-row:1;
	grid-column-start:1;
	grid-column-end:5;
	text-align:center;
	overflow: hidden;	
}
#menu{
	background-color:#F13A4B;
	color: white;
	grid-row:2;
	grid-column-start:1;
	grid-column-end:5;
}
#pendiente{
	border-width: 2px;
	border-style: double;
	BORDER-COLOR: IVORY;
	BORDER-RADIUS: 6PX;
	background-color: #FFFEE8;
	color: black;
	grid-row-start:3;
	grid-column-start:1;
	grid-column-end:3;
	grid-row-end:6;
	

align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 100% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;



  overflow: auto;	
}
#pendiente #titulo{
	background-color:#E9E93F;
}

#detallePendiente{	

}

#detalle{
	border-width: 2px;
	border-style: double;
	BORDER-COLOR: IVORY;
	BORDER-RADIUS: 6PX;
	background-color: #FEEFC2;
	color: black;
	grid-row-start:3;
	grid-row-end:5;
	grid-column-start:3;
	grid-column-end:5;	
	

align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 100% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;	

	overflow: auto;	
}
#detalle #titulo{
	background-color:#F9BB00;
}

#detalleListado{	

}
#receta{
	border-width: 2px;
	border-style: double;
	BORDER-COLOR: IVORY;
	BORDER-RADIUS: 6PX;
	background-color: #DFFACB;
	color: black;
	grid-row-start:5;
	grid-row-end:7;
	grid-column-start:3;
	grid-column-end:5;	
align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 100% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;	

		overflow: auto;
}
#receta #titulo{
	background-color:#6BFC00;
}

#bultos{
	background-color:#F13A4B;
	color: floralwhite;
	grid-row:6;
	grid-column-start:1;
	grid-column-end:3;	
	text-align:right;
}
#tablepedidos{
	position: relative;
	top: 190px;
}
#ulingredientes{
	position: inherit;

}
#ulcliente{
	position: inherit;
}

#footer{
	background-color:#0E1628;
	color: white;
	grid-row:7;
	grid-column-start:1;
	grid-column-end:5;	
}


@media screen and (orientation : landscape){
	
	
#tablepedidos{
	position: relative;
	top: 190px;
}
#ulingredientes{
	position: inherit;
}
#ulcliente{
	position: relative;
	top: -230px;
}
}

@media screen and (max-device-width:1024px) {
#container{
	display:grid;
	width:100%;
	height:95vh;
	margin:0;
	padding:0;
	grid-template-columns: 25% 25% 25% 25%;
	grid-template-rows: 10% 5%	25% 25% 25% 10% 25% 25% 25% 25% 2%; 
	
}
#pendiente{
	background-color: #FFFEE8;
	color: black;
	grid-row-start:3;
	grid-column-start:1;
	grid-column-end:6;
	grid-row-end:6;
	

align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 100% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;
  overflow: auto;	
}	

#bultos{
	background-color:#F13A4B;
	color: white;
	grid-row:6;
	grid-column-start:1;
	grid-column-end:6;	
	grid-row-end:7;	
}	
#detalle{
	background-color: #FEEFC2;
	color: black;
	grid-row-start:7;
	grid-column-start:1;
	grid-column-end:6;	
	grid-row-end:9;		
	

align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 100% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;	

	overflow: auto;	
}
#receta{
	background-color: #DFFACB;
	color: black;
	grid-row-start:9;	
	grid-column-start:1;
	grid-column-end:6;	
	grid-row-end:11;		
align-items: center ;
grid-auto-flow: row ;
grid-auto-rows: 100% ; // play with this to change height of the children, 50% will fill half
grid-template-columns: unset; // do not set template columns and rows
grid-template-rows: unset;	

		overflow: auto;
}
#tablepedidos{
	background: lavender;
	font-size:16px;
	position:inherit;
}
#pendiente #titulo{
	background-color:#9C33FF;
}

#ulingredientes{
	font-size:16px;
}
#ulcliente{
position: inherit;
}	
#footer{
	background-color:#0E1628;
	color: white;
	grid-row:11;
	grid-column-start:1;
	grid-column-end:6;	
}

}
@media screen and (min-device-width:1025px) {
#tablepedidos{
	position: relative;
	top: 0px;
	background: lightgoldenrodyellow;
	font-size:16px;
}
#ulingredientes{
position: inherit;
}
#ulcliente{
position: inherit;
}	
}