#logo {
  display: block;
  background-image:url(../images/logo_cross-tai_menu.png);
  background-repeat:no-repeat;
  width:164px;
  height:97px;
}

#main-header {
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* header's height should match main-content's padding-top */
  height: 100px;

  display:flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  padding-left: 50px; /* MARGEM ESQUERDA DO MENU */
  padding-right: 20px; /* MARGEM DIREITA DO MENU */
  box-sizing: border-box;
  background-image:url(../images/bg_menu.png);

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

#main-nav a {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;

  padding-left: 4px;
  box-sizing: border-box;

  text-decoration: none;
 /* color:#FFF;*/ /* COR DA LETRA DO BOTÃO */
 /* background-color: #FF9B00;*/ /* COR DE FUNDO DO BOTÃO */
/*  font-weight: bold;*/

  height: 20px; /* ALTURA DO BOTÃO DO MENU */
  /*box-shadow: 5px 5px 5px rgba(0,0,0,0.5);*/ /* SOMBRA DO BOTÃO */
 /* border-radius: 5px 5px 5px 5px;*/ /* CANTOS ARREDONDADOS DO BOTÃO */
}

#main-nav a.active {
  font-weight: 700;
  color: #F56D7C;
}

/**
 * Styles used only by large devices
 */
@media (min-width: 1025px) {
  #main-nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  #main-nav ul li {
    margin-right: 5px; /*DISTÂNCIA ENTRE OS BOTÕES NO MODO DESKTOP*/
  }

  #main-nav ul li:last-child {
    margin-right: 0;
  }

  #main-nav a { /*DISTÂNCIA ENTRE OS BOTÕES NO MODO DESKTOP*/
    padding-left: 0;
    padding-right: 0;
  }

  /**
   * Hide small-device-only elements
   */
  #menu-trigger {
    display: none;
  }

  #menu-overlay {
    display: none;
  }
}

/**
 * Styles used only by small devices
 * 500px is an appropriate breakpoint for this project,
 * it may vary acording to interactions and usability
 */
@media (max-width: 1024px) {
  #main-header {
    padding-left: 20px;
    padding-right: 20px;
  }

  /**
   * When in small device, the main-nav is positioned fixed -
   * always relative to the window - at left: 100vw (100% viewport width).
   * That means that the left edge of the main-nav box is aligned to
   * the right edge of the window.
   */
  #main-nav {
    background-image:url(../images/bg_menu_responsivo.png);

    height: 100vh;
    width: 60vw;

    position: fixed;
    z-index: 2;
    top: 0;
    left: 100vw;

    padding-top: 5px; /*ESPAÇAMENTO DO GRUPO DE BOTÕES DO MENU NO MODO RESPONSIVO*/
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;

    transition: transform .3s ease;
  }

  #main-nav a { /*ESPAÇAMENTO ENTRE OS BOTÕES DO MENU NO MODO RESPONSIVO*/
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /**
   * The menu trigger is a button element
   * with a background-image that has 2 images:
   *  - the menu icon
   *  - the close icon
   *
   * In order to change the image, we use the background-position
   * property.
   * This is known as 'CSS sprites'.
   * Learn more at: https://css-tricks.com/css-sprites/
   */
  #menu-trigger {
    position: absolute;
    top: 40px;
    right: 100%;

    transform: translate(-20px, -50%);

    border: none;
    height: 30px;
    width: 30px;

    background-image: url(../images/menu-trigger-images.svg);
    background-position: 0 bottom;
    background-color: #FF9B00;
    box-shadow: 5px 5px 5px rgba(0,0,0,0.5);
  }

  #menu-overlay {
    display: none;

    position: fixed;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    background-color: rgba(0, 0, 0, 0.6);
  }

  /**
   * Modify the menu-trigger's background-position so that
   * the close icon is displayed instead of the menu icon.
   */
  body.menu-open #menu-trigger {
    background-position: 0 top;
  }

  /**
   * Translate the main-nav -100% in the x-axis, so that
   * the main-nav's box is moved towards left the same amount
   * as its full width.
   */
  body.menu-open #main-nav {
    transform: translateX(-100%);
  }

  /**
   * Make the menu-overlay visible.
   */
  body.menu-open #menu-overlay {
    display: block;
  }
}