@import url("../mod03/12a_responsive/css/smartphone.css");
@import url("../mod03/12a_responsive/css/wide.css");
	*                    { margin: 0; padding: 0; }
body, html {
	background-color: #ACF3EF;
	height: 100%;
	width: 100%;
	margin: 0px;
	padding: 0px;
	font-family: aladin;
	font-style: normal;
	font-weight: 400;
	text-align: center;
	font-size: xx-large;
}
#main {
   height: 80%;
   display: -webkit-flex;
   display:         flex;
   flex-flow: row; 
}

#main section {
	margin: 5px;
	border: none 1pt black;
	text-align: center;
	background: #ACF3EF;
	flex: 3 1 60%;
	order: 2;
}

#main section header {
	text-align:center;
	background: #ACF3EF;
	margin: 5px;
	border: none 1pt black;
	height:10%;
}

#main section article {
	text-align: center;
	margin: 5px;
	border: none 1pt black;
	background: #ACF3EF;
	height: 90%;
	font-size:large;
	flex-wrap:wrap;
}
#main section footer {
	text-align:center;
	background: #ACF3EF;
	margin: 5px;
	border: none 1pt black;
	height:10%;
}

#main nav {
	text-align: center;
	margin: 5px;
	border: none 1pt black;
	background: #ACF3EF;
	flex: 1 6 20%;
	order: 1;
}
#main aside {
	text-align: center;
	margin: 5px;
	border: none 1pt black;
	background: #ACF3EF;
	flex: 1 6 20%;
	order: 3;
}
header, footer {
	text-align: center;
	margin: 10px;
	border: none 1pt black;
	display: block;
	min-height: 10%;
	background: #ACF3EF;
}
ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-left-style: solid;
	border-top-color: #CCC;
	border-right-color: #CCC;
	border-left-color: #CCC;
}
a {
	color: #000;
	text-decoration: none;
	font-size: 0.9em;
	display: block;
	padding: 6px;
	border-bottom-style: solid;
	border-bottom-color: #CCC;
	background-color: #EAEAEA;
	border-width: thin;
}
a:hover {
	color: #FFF;
	background-color: #666;
	border-right-style: solid;
	border-right-color: #36F;
	border-width: thick;
}
#marco {
    background-color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid black;
}

#contenedor {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-wrap: wrap;
    flex-wrap:wrap;
}

.vertical {
  padding:3px;
  border:1px none;
  background-color:#ACF3EF;
  width:300px;
  height:400px;
}

.horizontal {
  border:1px solid #ACF3EF;
  background-color:#ACF3EF;
  width:300px;
  height:196px;
}