header{
  border-bottom: solid 2px #6AC1BC;
  padding-bottom: 10px;
  margin-bottom: 25px;
}

/* TOP BAR */
 header .top-bar{
   display: flex;
   flex-direction: row;
   width: 100%;
   background-color: #6AC1BC;
   color: #fff;
   justify-content: space-around;
   padding: 10px 0px;
 }
 header .top-bar .message{
   width: 70%;
   align-self: center;
   padding-left: 15px;
 }
 header .top-bar .contact #telefono a > p,
 header .top-bar .contact #mail a > p{
   display: none; /* quito el texto de los íconos de contacto */
 }
 header .top-bar .contact{
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   width: 20%;
 }
 header .top-bar .contact img{
   width: 25px;
   height: 25px;
   opacity: 0.5;
   transition: opacity 0.5s ease;
 }

 /* MENU */
 header .menu-bar{
   display: flex;
   flex-direction: column;
   flex-wrap: nowrap;
   margin-top: 10px;
   align-items: center;
   width: 100%;
 }
 header .menu-bar .image{
   width: 100%;
   text-align: center;
 }
 header .menu-bar img{
   width: 100px;
   margin-bottom: 10px;
 }
 header .menu-bar nav{
   width: 100%;
 }
 header .menu-bar nav ul {
   display: flex;
   flex-direction: row;
   width: 100%;
   margin: 0;
   padding: 0;
   list-style-type: none;
   justify-content: center;
 }
 header .menu-bar nav ul li{
   width: 30%;
   text-align: center;
 }
 header .menu-bar nav ul a{
   text-decoration: none;
   color: #353535;
 }

@media (max-width: 767px) {


}
@media (min-width: 768px) {

  /*TOP BAR*/
  header .top-bar{
    justify-content: space-between;
  }
  header .top-bar .contact{
    width: 10%;
    padding-right: 15px;
  }

  /* MENU */
  header .menu-bar {
    font-size: 24px;
  }
  header .menu-bar img{
    width: 250px;
    margin-bottom: 10px;
  }

}