<div class="marcoprincipal">
  <div class="top">
    <div class="line1">
      <img class="logo" src="http://www.bankids.cl/images2021/picLogoColor.png" />
    </div>
    <div class="line2">
      <nav id="social-menu" class="social-menu menu" role="navigation">
        <ul>
          <li><a href="http://twitter.com/mor10"><span class="screen-reader-text">Twitter</span></a></li>
          <li><a href="http://facebook.com"><span class="screen-reader-text">Facebook</span></a></li>
          <li><a href="http://instagram.com"><span class="screen-reader-text">Instagram</span></a></li>
          <li class="correo"><a href="mailto://contacto@bankids.cl">&nbsp;Contáctanos</a></li>
        </ul>
      </nav>

      <nav id="bankids-menu" class="menu bankids-menu menu_interno" role="navigation">
        <ul>
          <li class="trigger"><a href="#">Ingreso</a>
            <ul class="slide-menu">
              <li><a href="#">Alumno</a></li>
              <li><a href="#">Profesor</a></li>
              <li><a href="#">Colegio</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </div>
  </div>

  <div class="middle">
    <h2>¡Un mundo <br>donde tu esfuerzo <br>se premia! </h2>
  </div>

  <div class="bottom menu-section-bottom">
    <nav id="menu-publico" class="menu-publico" role="navigation">
      <ul>
        <li>
          <a href="#">
            <div class="icon">
              <img src="http://www.bankids.cl/images2021/home.png">
            </div>
            <div class="button-text">
              Inicio
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <img src="http://www.bankids.cl/images2021/equipo.png">
            </div>
            <div class="button-text">
              Equipo
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">

              <img src="http://www.bankids.cl/images2021/condiciones_de_uso.png">
            </div>
            <div class="button-text">
              Condiciones de uso
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <img src="http://www.bankids.cl/images2021/educacion_financiera.png">
            </div>
            <div class="button-text">
              Educación Financiera
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <img src="http://www.bankids.cl/images2021/cuidado_medio_ambiente.png">
            </div>
            <div class="button-text">
              Cuidado Medio Ambientes
            </div>
          </a>
        </li>
        <li>
          <a href="#">
            <div class="icon">
              <img src="http://www.bankids.cl/images2021/cuentakids_puntoskids.png">
            </div>
            <div class="button-text">
              CuentaKids y PuntoKids
            </div>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</div>

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}
/* Set some initial values */
html,
body {
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
/*--------------------------------------------------------------
        Accessibility
        --------------------------------------------------------------*/
/* Text meant only for screen readers */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

.screen-reader-text:hover,
.screen-reader-text:active,
.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  color: #21759b;
  display: block;
  font-size: 14px;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000; /* Above WP toolbar */
}

/*--------------------------------------------------------------
        Social Network
        --------------------------------------------------------------*/
.social-menu li a:before {
  font-family: "Fontawesome";
  -webkit-font-smoothing: antialiased;
}

.social-menu li a[href*="dribbble.com"]::before {
  content: "\f17d";
}

.social-menu li a[href*="facebook.com"]::before {
  content: "\f09a";
}

.social-menu li a[href*="flickr.com"]::before {
  content: "\f16e";
}

.social-menu li a[href*="foursquare.com"]::before {
  content: "\f180";
}

.social-menu li a[href*="github.com"]::before {
  content: "\f09b";
}

.social-menu li a[href*="plus.google.com"]::before {
  content: "\f0d5";
}

.social-menu li a[href*="instagram.com"]::before {
  content: "\f16d";
}

.social-menu li a[href*="jsfiddle.com"]::before {
  content: "\f1cc";
}

.social-menu li a[href*="linkedin.com"]::before {
  content: "\f0e1";
}

.social-menu li a[href*="pinterest.com"]::before {
  content: "\f0d2";
}

.social-menu li a[href*="reddit.com"]::before {
  content: "\f1a1";
}

.social-menu li a[href*="soundcloud.com"]::before {
  content: "\f1be";
}

.social-menu li a[href*="stackoverflow.com"]::before {
  content: "\f16c";
}

.social-menu li a[href*="tumblr.com"]::before {
  content: "\f173";
}

.social-menu li a[href*="twitter.com"]::before {
  content: "\f099";
}

.social-menu li a[href*="vimeo.com"]::before {
  content: "\f194";
}

.social-menu li a[href*="vine.co"]::before {
  content: "\f1ca";
}

.social-menu li a[href*="yelp.com"]::before {
  content: "\f1e9";
}

.social-menu li a[href*="youtube.com"]::before {
  content: "\f167";
}

.social-menu li a[href*="wordpress.com"]::before {
  content: "\f19a";
}

.social-menu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
body {
  background-color: antiquewhite;
  margin: 10px;
}

.menu-section {
  padding-bottom: 2em;
  margin-bottom: 2em;
  border-bottom: 1px solid hsl(0, 0%);
}

.marcoprincipal {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)),
    url(https://www.bankids.cl/images2021/BBanner_351160855812.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  max-width: 1900px;
  margin: auto;
  overflow: hidden;
  position: relative;
}
/* Start top of screen */
.top {
  display: flex;
  align-items: flex-start;
}
.line1 {
  flex: 1 0 0%;
}
img.logo {
  max-width: 30%;
  min-width: 200px;
  height: auto;
}

/* which should contain the right part of the top */
.line2 {
  display: flex;
  flex-direction: column;
  margin-left: auto;
}
.menu {
  display: flex;
  margin: 6px 0 2px auto;
}
.menu ul {
  background: hsl(0, 0%, 15%);
}
.menu li a {
  color: #ed6d1d;
  background-color: white;
  display: inline-block;
  border-radius: 60px;
  padding: 0.5em 0.6em;
  text-decoration: none;
}
.social-menu li:not(.correo) a{
  padding:0;
  width:2rem;
  height:2rem;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}
.menu li {
  padding-right: 10px;
  margin: 10px;
}

.menu li a:hover {
  background: #338aca;
  color: #fff;
}

.menu_interno {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.menu_interno > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  background: hsl(0, 0%, 15%);
}

.menu_interno li a {
  color: white;
  background-color: #e5007d;
  display: inline-block;
  border-radius: 60px;
  padding: 0.5em 0.6em;
  text-decoration: none;
}

.menu_interno li {
  padding-right: 10px;
  margin: 10px;
}

.menu_interno li a:hover {
  background: white;
  color: #e5007d;
}

.bankids-menu > ul {
  background-color: #e5007d;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}
.trigger {
  position: relative;
}
.trigger > a {
  position: relative;
  z-index: 2;
}
ul.slide-menu {
  position: absolute;
  top: -10px;
  right: 0;
  transform: translateX(100%);
  display: flex;
  background: #e5007d;
  border-radius: 20px 0 0 20px;
  transition: 1s ease;
  z-index: 1;
  padding-right: 50px;
  opacity: 0;
}
.trigger:hover > ul {
  transform: translateX(-30px);
  opacity: 1;
}
.bankids-menu li {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.social-menu ul {
  background-color: #ed6d1d;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 30px;
}

.social-menu li {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.menu li.correo a {
  color: white;
  background-color: #ed6d1d;
  display: inline-block;
  font-size: x-large;
  padding: 0;
  text-decoration: none;
}

.social-menu li a[href*="bankids.cl"]::before {
  content: "\f003";
}

/* Center of screen */

.middle h2 {
  font-family: "Source Sans Pro", sans-serif;
  color: white;
  font-size: 4em;
  font-weight: 200;
  font-style: normal;
  padding: 1rem;
  margin: 1rem 0;
}

/* Menu publico - bottom of screen */

.bottom {
  margin-top: auto;
  width: 100%;
}

.menu-publico {
  padding-bottom: 20px;
}

.menu-publico ul {
  display: flex;
  justify-content: space-around;
}
.menu-publico li a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.button-text {
  flex: 1 0 100%;
}
.icon {
  flex: 0 0 1.5em;
  font-size: 1.8em;
}

.button-text {
  text-align: center;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1em;
  font-weight: 200;
  color: white;
  text-decoration: none;
}

.icon {
  text-align: center;
}

.icon img {
  max-width: 100%;
}
@media screen and (max-width: 650px) {
  .bankids-menu {
    top: 0;
    position: absolute;
    right: 0;
  }
  .social-menu,
  .line2,
  .social-menu ul {
    flex: 1 0 100%;
    border-radius: 0;
    justify-content: space-around;
  }
  .social-menu {
    margin: 0 0 5px 0;
  }
  .social-menu li{padding:5px 0;margin:0;}
  .top {
    flex-wrap: wrap;
  }
  .menu-publico ul {
    flex-wrap: wrap;
  }
  .menu-publico ul li {
    display: flex;
    flex: 1 0 33%;
    width: 33%;
  }
  .menu-publico ul li a {
    background: rgba(255, 255, 255, 0.3);
    margin: 5px;
    padding: 5px;
  }
  .middle h2 {
    font-size: 3em;
  }
}