#head
{
  position: relative;
  a
  {
    color:$text-color;
  }
  #logo
  {
    a
    {
      .white
      {
        display: none;
      }
      .black
      {
        display: block;
      }
    }
  }
  #main-menu
  {
    ul
    {
      li
      {
        a
        {
          color:$text-color;
        }
      }
    }
  }
  #tool-menu
  {
    #lang-menu
    {
      i
      {
        color:$text-color;
      }
      ul
      {
        li
        {
          a
          {
            color:$text-color;
          }
        }
      }
    }
    .socil
    {
      border-color:$text-color;
      color:$text-color;
    }
  }
  #menu-button
  {
    border-color:$text-color;
    color:$text-color;
  }
}

#breadcrumb
{
  ul
  {
    li
    {
      a
      {
        color:$text-color;
      }
      &::after
      {
        color:$text-color;
      }
    }
  }
}


header
{
  border-bottom: 1px solid $grey-color;
  margin-bottom:100px;
  h1
  {
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: 72px; /* 150% */
    letter-spacing: 0.96px;
    padding:80px 0;
  }
}

main
{
  aside
  {
    ul
    {
      li
      {
        display: flex;
        margin-bottom:16px;
        a
        {
          width:200px;
          text-align: center;
          background-color: #f7f7f7;
          padding:16px 0;
          color:$text-color;
          transition-duration:.5s;
          &:hover
          {
            color:#fff;
            background-color: $main-color;
          }
        }
        &.active
        {
          a
          {
            color:#fff;
            background-color: $main-color;
          }
        }
      }
    }
  }
  section
  {
    border-top:1px solid $grey-color;
    article
    {
      border-bottom:1px solid $grey-color;
      padding-top:32px;
      padding-bottom:32px;
      >div
      {
        h2
        {
          margin-bottom:8px;
          a
          {
            font-size: 18px;
            font-weight: 400;
            line-height: 28px; /* 155.556% */
            color:$text-color;
            transition-duration:.5s;
            &:hover
            {
              color:$main-color;
            }
          }
        }
      }
      i
      {
        padding:8px;
        display: block;
        font-size:26px;
        color:$grey-color;
      }
    }
  }
  @media(min-width:768px)
  {
    display: flex;
    aside
    {
      width: 25%;
      min-width:220px;
    }
    section
    {
      flex:1;
      article
      {
        display: flex;
        time
        {
          min-width:100px;
          width: 15.625%;
        }
        >div
        {
          padding-right:50px;
          flex:1;
        }
        i
        {
          width: 42px;
        }
      }
    }
  }
  @media(max-width:767px)
  {
    aside
    {
      ul
      {
        overflow-x:auto;
        display: flex;
        li
        {
          margin-right:16px;
          &:last-child
          {
            margin-right:0px;
          }
        }
      }
    }
    section
    {
      article
      {
        time
        {
          display: block;
          margin-bottom:24px;
        }
        h2
        {
          margin-bottom:24px;
        }
        p
        {
          margin-bottom:24px;
        }
        i
        {
          display: block;
          text-align: right;
        }
      }
    }
  }
}