* {
     margin : 0;
     padding: 0;
}

.container {
     display            : grid;
     width              : 100%;
     height             : 100%;
     background-color   : rgb(238, 238, 238);
     grid-template-areas: 'header header header header header header header header header''nav nav nav nav nav nav nav nav nav nav nav nav''aside aside section section section section ''footer footer footer footer footer footer footer footer footer footer footer footer ';
}

.row-container {
     display        : flex;
     justify-content: center;
}

.sep {
     color    : #f4a024;
     font-size: 30px;
}

.superior {
     display         : flex;
     flex-direction  : row;
     background-color: #49688E;
     color           : white;
     text-align      : center;
     padding         : 20px;
     font-family     : 'Open Sans', sans-serif;
}

.aviso span a img {
     width : 20px;
     height: 21px;
}

.underline {
     text-decoration: underline #f4a024;
     font-size      : 20px;
}

.superior .marquesina a {
     color          : white;
     text-decoration: none;
}

.superior .correo a {
     color          : white;
     text-decoration: none;
}

.header {
     display         : flex;
     background-color: rgb(255, 255, 255);
     color           : brown;
     text-align      : center;
     justify-content : center;
}

.leyenda {
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     flex-direction: column;
     color: #f4a024;
     font-size: 60px;
     margin: 20px;
}

.leyenda p {
     font-family: 'Oswald', sans-serif;
}

.nav {
     display: flex;
     justify-content: center;
     flex-direction: column;
     background-color: #294A70;
     text-align: center;
     border-bottom: 5px solid #f4a024;
     width: 100%;
     color: rgb(75, 16, 16);
     height: 40px;
     flex-wrap: wrap;
}

.menu {
     display: flex;
     color: white;
     justify-content: center;
}

.menu li {
     list-style: none;
     padding: 10px 13px;
     border-right: 1px solid #FFF;
}

.menu li a {
     text-decoration: none;
     font-size: 15px;
     color: white;
     font-family: 'Open Sans', sans-serif;
}

.nav ul li:first-child {
     border-left: 1px solid #FFF;
}

.row-container nav {
     justify-content: center;
}

.section {
     display: flex;
     background-color: rgb(255, 255, 255);
     text-align: justify;
     width: 100%;
     color: #294a70;
     font-family: 'Open Sans', sans-serif;
     padding: 30px;
     justify-content: center;
}

.row-container .section figure {
     text-align: center;
     font-size: 30px;
}

.row-container .section figure a .img {
     object-fit: cover;
     width: 150px;
     height: 150px;
     margin: 15px;
     border-radius: 50%;
     background-color: #f4a024;
     background-position:center;
     padding: 5px;
     border: 2px solid #294A70;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
 0 1px 2px rgba(0, 0, 0, 0.24);
 transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
}

.row-container .section figure a .img:hover {
     border-color: #294A70;
     border-radius: 50%;
     box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.22);

}

.footer {
     display: flex;
     flex-direction: column;
     font-family: 'Open Sans', sans-serif;
     background-color: #15305b;
     clear: both;
     padding: 15px 0;
     text-align: center;
     color: white;
}

.footer a {
     color: #C2C2C2;
     text-decoration: none;
}

.site-info {
     line-height: 1.5;
}

@media screen and (max-width:700px) {
     .row-container {
          display: flex;
          flex-direction: column;
     }
     .section {
          width: 100%;
     }
     .nav {
          width: 100%;
          margin: auto;
     }
     .header {
          display: flex;
          flex-direction: column;
     }

     .nav {
          display: flex;
          width: 100%;
          height: auto;
          justify-content: baseline;
     }

     .menu {
          display: block;
     }

     li {
          border: 1px solid #FFF;
     }

     li a {
          list-style: none;
          padding: 10px 13px;
          width: 100%;
          flex-direction: column;
     }

     .row-container .aside {
          order: 2;
     }
     .site-info{
          display:flex;
          flex-direction: column;
     }
}
@media screen and (max-width:800px) {
     .row-container .section {
          flex-direction: column;
     }
     .header {
          display: flex;
          background-color: rgb(255, 255, 255);
          flex-direction: column;
     }
     .header {
          display: flex;
     }
     .logo {
          order: 2;
     }
     .logo img {
          width: 53px;
          height: 98px;
     }
     .section {
          width: 90%;
     }

     .leyenda {
          font-size: 30px;
     }
}