/*==================================== 
  Header
=====================================*/

.background_header {
  background: white;
}

.unit_table {
  @extend %align;
  display: block;
  margin-top: 0px;
  max-height: 0;
  max-width: 910px;
  opacity: 0;
  transition-delay: 0ms;
  transition-duration: 200ms;
  transition-property: all;
  transition-timing-function: ease;
  width: 70%;
  z-index: 0;
  @media #{$brk-iPhone6sPlus-wide} {
    width: 80%;
  }
  &.active {
    max-height: 300px;
    opacity: 1;
    transition-delay: 200ms;
    transition-duration: 300ms;
    @media #{$brk-iPhone6sPlus-portrait} {
      width: 100%;
    }
  }
}

.un_table {
  width: 100%;
}

.th_1 {
  width: 10%;
  background: $color-sec;
  color: $color-text-light;
  font-size: 2em;
  padding-left: 10px;
  padding-right: 10px
}

.th_2 {
  background: $background-unit;
  width: 90%;
  border: 0px solid $black;
  border-collapse: collapse;
}

.header {
  @extend %alignBase;
  background-color: $background-app;
  /*rgba(0, 0, 0, .65);*/
  display: block;
  display: block;
  max-height: 0;
  max-width: 910px;
  overflow: hidden;
  position: relative;
  transition-delay: 0ms;
  transition-duration: 200ms;
  transition-property: all;
  transition-timing-function: ease;
  width: 70%;
  z-index: 13;
  @media #{$brk-iPhone6sPlus-wide} {
    width: 80%;
  }
  @media #{$brk-iPhone6sPlus-portrait} {
    width: 100%;
  }
  &.active_1 {
    max-height: 500px;
    width: 70%;
    transition-delay: 200ms;
    transition-duration: 300ms;
    @media #{$brk-iPhone6sPlus-wide} {
      width: 80%;
    }
    @media #{$brk-iPhone6sPlus-portrait} {
      width: 100%;
    }
  }
  &.active_2 {
    max-height: 500px;
    width: 100%;
    max-width: 100%;
    transition-delay: 200ms;
    transition-duration: 300ms;
  }
}