/*  ----------------------------------------------------------------------------
    header grid container
*/
.td-header-container {
  width: 1021px;
  margin-right: auto;
  margin-left: auto;
  position: relative;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
     width: 756px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    width: 100%;
  }
}

.td-header-main-menu {
  background-color: #222;
  position: relative;
  z-index: 3;

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    height: 53px;
  }
}

.td-header-menu-wrap { // for affix to keep the space
  min-height: 44px;
  /* responsive phone */
  @media (max-width: 767px) {
    min-height: 53px;
  }
}

// fix height of the ads area
body .td-header-row {
  .td-header-sp-rec {
    min-height: 0;
  }
}


// full width setup grid
body .td-make-full {
  width: 1021px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  display: table;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    width: 756px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    width: 100%;
  }

  .sub-menu {
    border-top: 0; // fix alignment when top menu is full
  }
}

/* header rows */
.td-header-row {
  .mx-row-and-span(td-header-sp);
}


/*  ----------------------------------------------------------------------------
    header menu affix
*/
.td-header-main-menu.td-affix {
  -webkit-transform: translate3d(0, 0, 0); //chrome / safari / ios fix for 3d parallax
  transform: translate3d(0, 0, 0);

  width: 1021px;
  margin-right: auto;
  margin-left: auto;
  left: 0;
  right: 0;
  top: 0;
  z-index: 9999;
  position: fixed !important;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    width: 756px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    width: auto;
  }
}

// fix menu affix when admin bar + responsive
.admin-bar .td-header-main-menu.td-affix {
  top: 32px;

  @media (min-width: 527px) and (max-width: 782px) {
    top: 46px;
  }
  @media (max-width: 602px) {
    top: 0;
  }
}



/*  ----------------------------------------------------------------------------
    main menu
*/
// hidden logo on menu
.td-main-menu-logo {
  display: none;
  float: left;
  height: 44px;

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    display: block;
    float: none;
    height: auto !important;
  }

  a {
    line-height: 44px;
  }

  img {
    max-height: 44px;
    margin: 0 21px;
    position: relative;
    vertical-align: middle;
    display: inline-block;
    padding-top: 3px;
    padding-bottom: 3px;

    /* responsive portrait tablet */
    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      margin: 0 17px;
    }

    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      margin: auto;
      bottom: 0;
      top: 0;
      left: 0;
      right: 0;
      position: absolute;
      max-height: 45px !important;
    }
  }
}


@media (min-width: @responsive_p_tablet_min) {
  .td-affix .td-logo-sticky {
    display: block;
  }

  //Small height for menu with affix
  .td-header-wrap {
    .td-affix {
      .td-main-menu-logo {
        height: 44px !important;

        a {
          line-height: 44px !important;
        }

        img {
          max-height: 44px !important;
          top: -1px;
        }
      }

      .sf-menu > li > a {
        line-height: 44px !important;
      }
    }
  }
}


#td-header-menu .td-container-border:after {
  background-color: @td_grid_border_color;
}

// main menu full
.td-main-menu-full {
  background-color: #222;
  position: relative;
}

// main menu gradient = shadow
.td-header-gradient:before {
  content:"";
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAHCAYAAADJTCeUAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDphMjViOTdiYS1kZjJlLTNlNDUtYjk3Yi00N2I1NjQyOTRjODQiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RUQ3M0QzQTVFNzE5MTFFMzk1RTdCODk0MTJBMEZFMUIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RUQ3M0QzQTRFNzE5MTFFMzk1RTdCODk0MTJBMEZFMUIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmZiZjM2Y2ExLTgzODYtMDE0Mi05NTU2LWNiZTFmMzg5YmM3NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDphMjViOTdiYS1kZjJlLTNlNDUtYjk3Yi00N2I1NjQyOTRjODQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7mNy80AAAAI0lEQVR42mJgYGBgZQISnCCCn+H///8MIJY8iMUOYv0BCDAAU6YHQs4scEAAAAAASUVORK5CYII=);
  background-color: transparent;
  width: 100%;
  height: 7px;
  position: absolute;
  top: -3px;
  z-index: 1;
}

// header border
.td-header-border:before {
  content:"";
  background-color: @td_theme_color;
  display: block;
  height: 4px;

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    display: none;
  }
}

// h1 logo title seo
.td-visual-hidden {
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}
.td-logo {
  margin: 0;
  padding: 0;
  line-height: 1;
  font-size: inherit !important;
  font-family: @font2;
}



/*  ----------------------------------------------------------------------------
    header
*/
.td-header-container {
  clear: both;
}

/*  ----------------------------------------------------------------------------
    logo
*/
.td-header-sp-logo {
  width: 272px;
  position: relative;
  margin-bottom: 8px;
  margin-top: 8px;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    width: 248px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    margin-bottom: 0;
    display: none !important;
  }

  a {
    height: 114px;
    display: block;

    /* responsive portrait tablet */
    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      height: 90px;
    }
  }

  img {
    bottom: 0;
    max-height: 90px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;

    /* responsive portrait tablet */
    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      max-height: 70px;
    }
  }
}

// used for logo in menu
.menu-td-header-container {
  display: block;
}


/*  ----------------------------------------------------------------------------
    ads
*/
.td-header-sp-rec {
  float: right;
  margin-bottom: 8px;
  margin-top: 8px;
  width: 728px;
  position: relative;

  /* responsive portrait tablet */
  @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
    width: 508px;
  }

  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    margin-bottom: 0;
    margin-top: 0;
    width: 100%;
    float: none;
    min-height: 0 !important; //with no ad remain 1px space top
  }

  /* ipad horizontal */
  @media (min-width: 1024px) and (max-height: 768px) {
    margin-right: 7px;
  }

  .td-header-ad-wrap {
    height: 114px;
    display: block;

    /* responsive portrait tablet */
    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      height: 90px;
    }

    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      height: auto;
      margin-left: auto;
      margin-right: auto;
      display: table;
    }
  }

  .adsbygoogle {
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      position: relative;
      margin-top: 8px;
      margin-bottom: 8px;
    }
  }

  .td-adspot-title {
    margin: 0;
    position: relative;
    top: -8px;

    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      top: -6px;
    }

    @media (max-width: @responsive_p_phone_max) {
      top: 0;
      margin-top: 5px;
      margin-bottom: -5px;
    }
  }
}


// remove border bottom when no ad
.td-header-style-5,
.td-header-style-7,
.td-header-style-8,
.td-header-style-9,
.td-header-style-10 {
  .td-ad-m {
    /* responsive desktop */
    @media (min-width: 1024px) {
      border-bottom: 1px solid @td_grid_border_color;
    }
  }

  .td-ad-tp {
    /* responsive portrait tablet */
    @media (min-width: @responsive_p_tablet_min) and (max-width: @responsive_p_tablet_max) {
      border-bottom: 1px solid @td_grid_border_color;
    }
  }

  .td-ad-p {
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      border-bottom: 1px solid @td_grid_border_color;
    }
  }

  .td-adspot-title {
        margin-bottom: -20px;
        top: 0;
  }
}

/*
    general fix the main menu for white background color

*/
.white-menu {
  // mega menu
  .td-mega-menu {
    .td-mega-grid {
      border-top-width: 1px;
      border-style: solid;
      border-color: @td_grid_border_color;
    }
  }

  // normal menu
  #td-header-menu {
    .td-normal-menu .sub-menu {
      box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
    }
    .sf-menu > .td-normal-menu > .sub-menu > li:first-child {
      border-top: 1px solid @td_grid_border_color;
    }
  }

  .sf-menu {
    margin-left: 5px;
  }

  .td-header-main-menu.td-affix {
    box-shadow: none;
  }

  .td-header-main-menu {
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      border-bottom: 1px solid @td_grid_border_color;
      border-top: 1px solid @td_grid_border_color;
      background-color: #fcfcfc;
    }
  }
  .td-header-main-menu {
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      height: 55px;
    }
  }

  // search
  .header-search-wrap {
    .td-drop-down-search {
      box-shadow: none;
      border-top: 1px solid @td_grid_border_color;
      border-bottom: 1px solid @td_grid_border_color;

      &:before {
        border-color: transparent transparent @td_grid_border_color;
      }
    }
  }
}


/* -------------------------------------------------------------------------------

      logo on sticky menu

*/
// logo in header

// disable
.td-logo-in-header .td-sticky-disable {
  &.td-mobile-logo,
  &.td-header-logo {
    display: none;
  }
  &.td-mobile-logo {
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: block;
    }
  }
}

// header logo
.td-logo-in-header .td-sticky-header {
  &.td-mobile-logo {
    display: none;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: inherit;
    }
  }

  &.td-header-logo {
    display: block;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: none;
    }
  }
}

// mobile logo
.td-logo-in-header .td-sticky-mobile {
  &.td-mobile-logo {
    display: block;
  }

  &.td-header-logo {
    display: none;
  }
}


// logo in menu

// disable
.td-logo-in-menu .td-sticky-disable {
  &.td-mobile-logo {
    display: none;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: block;
    }
  }
  &.td-header-logo {
    display: block;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: none;
    }
  }
}
.td-affix .td-logo-in-menu .td-sticky-disable {
  &.td-header-logo {
    display: none;
  }
}

// header logo
.td-logo-in-menu .td-sticky-header {
  &.td-mobile-logo {
    display: none;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: block;
    }
  }
  &.td-header-logo {
    display: block;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: none;
    }
  }
}

// mobile logo
.td-logo-in-menu .td-sticky-mobile {
  &.td-mobile-logo {
    display: none;
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: block;
    }
  }

  &.td-header-logo {
    /* responsive portrait phone */
    @media (max-width: @responsive_p_phone_max) {
      display: none;
    }
  }
}
.td-affix .td-logo-in-menu .td-sticky-mobile {
  &.td-header-logo {
    display: none;
  }
  &.td-mobile-logo {
    display: block;
  }
}


// condition when no mobile logo
.td-affix .td-logo-in-menu .td-main-logo {
  display: none;
  /* responsive portrait phone */
  @media (max-width: @responsive_p_phone_max) {
    display: block;
  }
}

.td-affix .td-logo-in-menu.td-logo-sticky .td-main-logo {
  display: block;
}