@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap');
body
{
  font-family: "Shippori Mincho", serif;
  font-weight: 500;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
}

#head
{
  a
  {
    color:#fff;
  }
  @media(min-width:1200px)
  {
    padding-top:17px;
    padding-right:pxvw(55);
    padding-left:pxvw(55);
    display: flex;
    align-items:center;
    >div
    {
      &#logo
      {
        width: 120px;
        picture
        {
          display: block;
          width: 100%;
          img
          {
            width: 100%;
            display: block;
          }
        }
      }
      &.main-menu
      {
        ul
        {
          li
          {
            a
            {
              display: block;
              padding:5px 0;
              letter-spacing: 2px;

            }
          }
        }
      }
      ul
      {
        display: flex;
        li
        {
          padding-left:pxvw(21);
          a
          {
            font-size:20px;
          }
        }
      }

      &:nth-child(2)
      {
        order:0;
        width: calc(50% - 60px);
        ul
        {
          li
          {
            padding-left:0px;
            padding-right:pxvw(21);
          }
        }
      }
      &:nth-child(3)
      {
        order:2;
        flex:1;

        ul
        {
          justify-content:flex-end;
        }
      }
      &:nth-child(4)
      {
        order:1;

      }
      &:nth-child(5)
      {
        order:3;

      }


    }
    button#menu-btn
    {
      display: none;
    }
  }
  @media(max-width:1199px)
  {
    .main-menu
    {
      display: none;
    }
    display: flex;
    #menu-btn
    {
      width:75px;
      border:0px;
      height:75px;
      background-color: rgba(0,0,0,0);
      padding:0px;
      margin:0px;
      color:#fff;
      font-size:16px;
      cursor: pointer;
    }
    #logo
    {
      flex:1;
      padding:8px 0;
      display: flex;
      justify-content:center;
      a
      {
        width:55px;
        display: flex;
        justify-content:center;
        picture
        {

          max-width:55px;
          display: flex;
          justify-content:center;
          img
          {
            height: 55px;
          }
        }
      }
    }
    #socil-menu
    {
      li
      {
        display: none;
        &:nth-child(1)
        {
          display: block;
          height:75px;
          width:75px;
          a
          {
            display: block;
            line-height: 75px;
            font-size:32px;
            text-align:center;
          }
        }
      }
    }
  }
}

#mobile-menu
{
  display: none;
  background-color: $main-color;
  justify-content:center;
  align-items:center;
  text-align: center;
  ul
  {
    padding:50px 0;
    li
    {
      margin-bottom:50px;
      &:last-child
      {
        margin-bottom:0px;
      }
      button
      {
        height: 45px;
        width: 45px;
        line-height:45px;
        border:0px;
        background-color: #fff;
        padding:0px;
        margin:0px;
        border-radius: 100%;
        color:$main-color;
        font-size:20px;
      }
      a
      {
        color:#fff;
        font-size:20px;
        line-height: 29px;
        letter-spacing: 2px;
      }
    }
  }
  @media(max-width:1199px)
  {
    &.active
    {
      position: fixed;
      top:0px;
      left:0px;
      z-index:9999;
      width: 100%;
      height:100vh;
      display: flex;
    }


  }
}


#mobile-socil-menu
{
  position: fixed;
  right:10px;
  bottom:50px;
  li
  {
    margin-bottom:20px;
    &:last-child
    {
      margin-bottom:20px;
    }
    a
    {
      box-shadow: 0 0 5px $main-color;
      background:#fff;
      display: block;
      width:50px;
      height:50px;
      border-radius: 5px;
      text-align: center;
      color:$main-color;
      line-height:50px;
      i
      {
        font-size:20px;
        line-height:50px;
        display: block;
      }
    }
  }
  @media(max-width:500px)
  {
    li
    {
      a
      {
        width: 10vw;
        height:10vw;
        line-height: 10vw;
        i
        {
          font-size:5vw;
          line-height: 10vw;
        }
      }
    }
  }
}


.breadcrumb
{
  display: flex;
  flex-wrap:wrap;
  margin-bottom:100px;
  li
  {
    display: flex;
    align-items:center;
    a
    {
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 1.6px;
      line-height:24px;
      color:$main-color;
    }
    svg
    {
      margin-left:26px;
      margin-right:26px;
    }
    &:last-child
    {
      svg
      {
        display: none;
      }
    }
  }
}