/* head styles */

.head {

position: relative;
@media (min-width: 1280px) {
  height: calc(100% - 56px);
}

.bg {
  position: relative;
  height: 100%;
  z-index: -1;
  background: {
    color: black;
    image: url("../../img/ws-bg.jpg");
    position: top center;
    size: contain;
    repeat: no-repeat;
  }

  &:after {
    display: block;
    content: "";
    width: 100%;
    padding-top: (39 / 64) * 100%;
    @media (min-width: 1280px) {
      padding-top: 0;
    }
  }
}

.ws-logo {
  max-width: $container-width;
  margin: 0 auto;
  padding: 2em;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-shadow: 0 0 48px rgba(0, 0, 0, 0.5);
}

.contact-box {
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  max-width: $container-width;
  position: relative; // 1024px
  @media (min-width: 768px) {
    position: absolute;
  }

  .contact-name {
    position: relative;
    padding: 28px 32px;
    color: white;
    z-index: 10;
    background-color: $dark-grey;
    @media (min-width: 768px) {
      max-width: 458px;
      margin: {
        left: 32px;
        right: 32px;
        bottom: 32px;
      }
    }
  }

  .contact-now {
    display: block;
    background-color: $logo-primary;
    left: 0;
    text-decoration: none;
    font-size: 24px;
    color: white;
    font-weight: 600;
    padding: 16px 24px;
    z-index: 8;
    top: 0;
    white-space: nowrap;
    transition: background-color 0.3s ease;

    &:hover {
      background-color: lighten($primary, 10);
    }

    @media (min-width: 768px) {
      left: 2rem;
      top: -68px;
      position: absolute;
    }
  }

  .title {
    font-weight: 600;
    font-size: 32px;
    line-height: 1.3;
    margin: 0;

    small {
      font-weight: 300;
      font-size: 24px;
      display: block;
      padding-top: 12px;
    }
  }
}

}

.menu {

background-color: #c3c3c3;
display: block;
margin: 0;

ul {
  list-style: none;

  a {
    display: block;
    text-decoration: none;
  }
}

}

.container {

max-width: $container-width;
margin: 0 auto;

}

.section {

padding-top: 2.5rem;
padding-bottom: 2.5rem;

&:nth-of-type(2n) {
  background-color: #efefef;
}

&.introduction {
  text-align: center;

  strong {
    font-weight: normal;
  }

  .container {
    @include media-breakpoint-up(md) {
      max-width: 710px;
    }
  }

  .title {
    line-height: 1.4;
    font-weight: 300;
    margin: 0;
    font-size: 20px;
    @include media-breakpoint-up(md) {
      font-size: 24px;
    }
    strong {
      display: block;
      font-weight: 600;
    }
  }

  .bio-image {
    margin-bottom: 1rem;
  }

  p {
    color: $grey;
    margin-bottom: 0;
  }
}

}