// .title {
//     background-color: hsla(230, 72%, 32%, 1.00);
    
//     &__head {
//       color: #fff;
//       text-transform: uppercase;
//       transform: rotate(180deg) translate(-4px);
//       writing-mode: vertical-lr;
//       text-align: center;
//       margin-bottom: 0;
//       font-size: 6rem;
//       width: 100%;
//       line-height: 1;
      
//       @media(min-width: 1020px) {
//         font-size: 6rem;
//       }
//     }
//   }

//   p{
//     font-weight: 100 !important;
//   }
//   .translate-middle {
//     transform: translate(-4%,-124%)!important;
// }

header {
    background: rgba(0,0,0,0.3);
    text-align: center;
    padding: 30px 15px;
    width: 100%;
    margin-bottom: 50px;
  
    nav {
    a {
      color: #fff;
      text-decoration: none;
      font-size: 18px;
      line-height: 30px;
      padding: 15px;
      margin: 5px;
      display: inline-block;
      font-weight: 300;
      letter-spacing: 2px;
      span {
        display: inline-block;
        &:after {
            content: "";
            display: block;
            margin: 0 auto;
            width: 0;
            height: 2px;
            background-color: #C3A368;
            -webkit-transition: opacity .3s ease,width .3s ease;
            -moz-transition: opacity .3s ease,width .3s ease;
            -o-transition: opacity .3s ease,width .3s ease;
            transition: opacity .3s ease,width .3s ease;
            -ms-transition: opacity .3s ease,width .3s ease;
        }
      }
  
      &:hover {
        span {
          &:after {
            width: 100%;
          }
        }
      }
      
    }
    }
  }