body {
  padding-top: 90px;}

header.header {
  width: 100%;
  min-height: 104px;
  margin: 0 auto;
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  padding: 0 5vw;
  width: 100%;
  background-color: #fff;
  -webkit-transition: -webkit-transform .4s ease-in-out;
  transition: -webkit-transform .4s ease-in-out;
  transition: transform .4s ease-in-out;
  transition: transform .4s ease-in-out, -webkit-transform .4s ease-in-out;}

  @media screen and (max-width: 900px){
    header.header {
      min-height: 90px;}}


  @media screen and (min-width: 900px){
    header.header {
      padding: 0 7vw;}}

    header.header .header-wrapper {
      position: relative;
      display: -webkit-box;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
              flex-direction: column;
      -webkit-box-align: center;
              align-items: center;
      height: 100%;
      width: 100%;
      max-width: 1264px;
      margin: 0 auto;
      z-index: 1000;
      background-color: #fff;  
      -webkit-box-pack: justify;  
              justify-content: space-between;}

      .header-wrapper > .brand {
        font-family: 'Playfair Display', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        color: #202020;
        font-size: 20pt;
        text-align: center;
        font-weight: 600;}

        .header-wrapper > .brand > img {
          max-width: 180px;}

        @media screen and (max-width: 900px) {
          .header-wrapper > .desc {
            display: none;}

          .header-wrapper > .brand {
            margin: 0 auto;
            position: absolute;
            top: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);}}


    @media screen and (max-width: 900px){
      header.header .header-wrapper {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
                flex-direction: column;
        -webkit-box-align: start;
                align-items: flex-start;
        overflow: hidden;}

        header:not(.is-active) .header-wrapper {
          max-height: 90px;}

        header.is-active .header-wrapper {
          max-height: unset;
          position: fixed;
          top: 0;
          left: 0;
          right: 0;
          margin: 0 auto;
        height: 100vh;}}

/* HAMBURGER */
          header.header .hamburger {
            display: -webkit-box;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                    flex-direction: column;
            -webkit-box-align: center;
                    align-items: center;
            -webkit-box-pack: center;
                    justify-content: center;
            background: none;
            outline: none;
            border: none;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            cursor: pointer;
            height: 90px;
            -webkit-transition: -webkit-transform .2s ease;
            transition: -webkit-transform .2s ease;
            transition: transform .2s ease;
            transition: transform .2s ease, -webkit-transform .2s ease;
            padding: 0;}

            header.is-active .hamburger {
              -webkit-transform: translateX(-30px);
                      transform: translateX(-30px);
              padding-right: 30px;}

            @media screen and (min-width: 900px){
              header.header .hamburger {
                display: none;}}


            header.header .hamburger > span {
              height: 3px;
              width: 42px;
              margin: 3px 0;
              background-color: #202020;}

              header.is-active .hamburger > span {
                background-color: #b0b0b0;}

/* NAV */
          header.header nav.nav {
            display: -webkit-box;
            display: flex;
            -webkit-box-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                    align-items: center;
            width: 100%;}

            @media screen and (max-width: 900px){
              header.header nav.nav {
                -webkit-box-flex: 1;
                        flex-grow: 1;
                height: 100%;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                        flex-direction: column;}
              
              header:not(.is-active) nav.nav {
                display: none;}}

            header.header .nav .nav-wrapper {
              display: -webkit-box;
              display: flex;}

            @media screen and (max-width: 900px){
              header.header .nav .nav-wrapper {
                -webkit-box-flex: 1;
                        flex-grow: 1;
                -webkit-box-align: center;
                        align-items: center;}}




/* LINKS */
            .links-wrapper {
              display: -webkit-box;
              display: flex;
              -webkit-box-align: center;
                      align-items: center;}

              @media screen and (max-width: 900px){
                .links-wrapper {
                  -webkit-box-orient: vertical;
                  -webkit-box-direction: normal;
                          flex-direction: column;}}

              .links-wrapper > a.link {
                padding: 10px 0;
                margin: 0 10px;
                font: inherit;
                -webkit-box-flex: 0;
                        flex-grow: 0;
                display: -webkit-box;
                display: flex;
                -webkit-box-pack: center;
                        justify-content: center;
                -webkit-box-align: center;
                        align-items: center;
                text-align: center;
                font-size: 12pt;
                color: #202020; 
                cursor: pointer;
                font-weight: 600;}

                .links-wrapper > a.link:hover {
                  opacity: .6;}

                @media screen and (min-width: 900px){
                  .links-wrapper > a.link:first-child {
                    margin-left: 0;}
              
                  .links-wrapper > a.link:last-child {
                    margin-right: 0;}
                  
                  .links-wrapper > a.link.active {
                    text-decoration: underline;}}


                @media screen and (max-width: 900px){
                  .links-wrapper > a.link {
                    font-size: 20pt;
                    margin: 4vw 0;
                    color: #b0b0b0;}

                  .links-wrapper > a.link.active {
                    color: #202020;}}