body {
  font-family: arial;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


@media (min-width: 668px) {
  .container {
    display: grid;
    grid-template-columns: 400px 1fr 300px;
    grid-template-rows: auto 1fr auto;

  }
}

header {
  grid-column: span 3;
  padding: 30px;
  text-align: center;
  font-size: 1.4em;
  background-color: #369;
  color: white;
}

main {
  flex: 1;
  padding: 20px;
  overflow-y: scroll;
  height: 80vh;
}

nav {
  background-color: #FFE8FE;
  padding: 20px;
  overflow-y: scroll;
  height: 80vh;

}
 
aside {
  padding: 20px;
  background-color: #E5EBEB;
}

footer {
  grid-column: span 3;
  padding: 30px;
  text-align: center;
  font-size: 1.4em;
  background-color: #F96395;
  color: white;
}

h1 {
  margin-bottom: 1em;
  font-size: 1.3em;
  font-weight: bold;
}


/*AGENDA*****************************/
#agenda{margin:0 auto 10px; width:340px; position: relative;}
#agenda .texture-line{border-left:#FFF 10px solid; border-right:#FFF 11px solid; clear:both; display:block; height:15px; margin:0 auto;}
#agenda ul.list-mes-agenda{ position: relative; z-index: 99; background:#f4e9da url(../../images/bg-mes-agenda.png) repeat-x 0 66px; border-top:#4EABE4 6px solid; float:left; height:90px; width:100%;}
#agenda ul.list-mes-agenda li{background:url(../../images/bt-active-agenda.png) no-repeat -1px -20px; float:left; font-size:18px; height:45px; letter-spacing:-1px; margin-left:1px; text-align:center; text-transform:uppercase; width:75px; -webkit-transition:all .3s ease-in-out}
#agenda ul.list-mes-agenda li:first-child{margin-left:0;}
#agenda ul.list-mes-agenda li a{background:url(../images/bt-agenda.png) no-repeat; color:#FFF; display:block; height:35px; padding-top:10px;}
#agenda ul.list-mes-agenda li:hover, #agenda ul.list-mes-agenda li.active{background:url(../../images/bt-active-agenda.png) no-repeat -1px -20px; height:55px; padding-top:10px;}

#agenda ul.list-mes-agenda li:hover a, #agenda ul.list-mes-agenda li.active a{background:none;}
#agenda ul.list-dia-agenda{background:#FAEADB url(../../images/bg-mes-agenda.png) repeat-x bottom; clear:both; padding-bottom:25px; text-transform:uppercase;}
#agenda ul.list-dia-agenda li{background:#E0BD99; border-bottom:#FFF 2px solid; overflow:hidden; margin-left:20px;}
#agenda ul.list-dia-agenda li .date-agenda{background:#D3A578; color:#FFF; float:left; height:100%; font-size:28px; letter-spacing:-3px; line-height:66%; padding:20px 0 10px; text-align:center; width:48px;}
#agenda ul.list-dia-agenda li .date-agenda span{display:block; font-size:21px; letter-spacing:-1px;}
#agenda ul.list-dia-agenda li .evento-agenda{background:#FAEADB; float:left; padding:20px 20px 0; width:340px;min-height: 100px;}
#agenda ul.list-dia-agenda li .evento-agenda p{color:#9D8F80; font-size:15px; padding-bottom:25px;}
#agenda ul.list-dia-agenda li .evento-agenda p strong{color:#9B9997; display:block; font-size: 14px; line-height:140%;}