
//About

// Styling for the team section
.about-us {
    margin-bottom: 50px;
    text-align: center;
    img {
      width: 225px;
      height: 225px;
      border: 7px solid $white;
    }
    h4 {
      margin-top: 25px;
      margin-bottom: 0;
      text-transform: none;
    }
    p {
      margin-top: 0;
    }
  }
  

  //Contact

  // Styling for the contact section
section#contact {
    background-color: $gray-900;
    background-image: url('../img/map-image.png');
    background-repeat: no-repeat;
    background-position: center;
    .section-heading {
      color: $white;
    }
    .form-group {
      margin-bottom: 25px;
      input,
      textarea {
        padding: 20px;
      }
      input.form-control {
        height: auto;
      }
      textarea.form-control {
        height: 248px;
      }
    }
    .form-control:focus {
      border-color: $primary;
      box-shadow: none;
    }
    ::-webkit-input-placeholder {
      font-weight: 700;
      color: $gray-400;
      @include heading-font;
    }
    :-moz-placeholder {
      font-weight: 700;
      color: $gray-400;
      @include heading-font;
    }
    ::-moz-placeholder {
      font-weight: 700;
      color: $gray-400;
      @include heading-font;
    }
    :-ms-input-placeholder {
      font-weight: 700;
      color: $gray-400;
      @include heading-font;
    }
  }
  

  // Styling for the masthead

header.masthead {
    text-align: center;
    color: white;
    background-image: url('../img/header-bg.jpg');
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: cover;
    .intro-text {
      padding-top: 150px;
      padding-bottom: 100px;
      .intro-lead-in {
        font-size: 22px;
        font-style: italic;
        line-height: 22px;
        margin-bottom: 25px;
        @include serif-font;
      }
      .intro-heading {
        font-size: 50px;
        font-weight: 700;
        line-height: 50px;
        margin-bottom: 25px;
        @include heading-font;
      }
    }
  }
  @media(min-width:768px) {
    header.masthead {
      .intro-text {
        padding-top: 300px;
        padding-bottom: 200px;
        .intro-lead-in {
          font-size: 40px;
          font-style: italic;
          line-height: 40px;
          margin-bottom: 25px;
          @include serif-font;
        }
        .intro-heading {
          font-size: 75px;
          font-weight: 700;
          line-height: 75px;
          margin-bottom: 50px;
          @include heading-font;
        }
      }
    }
  }
  
  .apply-btn {
    background-color: transparent;
    color: #fff;
    border-color: $primary;
    &:active,
    &:focus,
    &:hover {
      background-color: darken($primary, 7.5%) !important;
      border-color: darken($primary, 7.5%) !important;
      color: white;
    }
    &:active,
    &:focus {
      box-shadow: 0 0 0 0.2rem rgba(254, 209, 55,.5) !important;
    }
  }
  
  header.masthead {
      
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9)),
      url("../img/header-bg.jpg") no-repeat center center;
    
  }


  //Portfolio

  // Styling for the portfolio section
#portfolio {
    .portfolio-item {
      right: 0;
      margin: 0 0 15px;
      .portfolio-link {
        position: relative;
        display: block;
        max-width: 400px;
        margin: 0 auto;
        cursor: pointer;
        .portfolio-hover {
          position: absolute;
          width: 100%;
          height: 100%;
          -webkit-transition: all ease 0.5s;
          -moz-transition: all ease 0.5s;
          transition: all ease 0.5s;
          opacity: 0;
          background: fade-out($primary, .1);
          &:hover {
            opacity: 1;
          }
          .portfolio-hover-content {
            font-size: 20px;
            position: absolute;
            top: 50%;
            width: 100%;
            height: 20px;
            margin-top: -12px;
            text-align: center;
            color: white;
            i {
              margin-top: -12px;
            }
            h3,
            h4 {
              margin: 0;
            }
          }
        }
      }
      .portfolio-caption {
        max-width: 400px;
        margin: 0 auto;
        padding: 25px;
        text-align: center;
        background-color: $white;
        h4 {
          margin: 0;
          text-transform: none;
        }
        p {
          font-size: 16px;
          font-style: italic;
          margin: 0;
          @include serif-font;
        }
      }
    }
    * {
      z-index: 2;
    }
  }
  @media(min-width:767px) {
    #portfolio {
      .portfolio-item {
        margin: 0 0 30px;
      }
    }
  }
  
  .portfolio-modal {
    .modal-dialog {
      margin: 1rem;
      max-width: 100vw;
    }
    .modal-content {
      padding: 100px 0;
      text-align: center;
      h2 {
        font-size: 3em;
        margin-bottom: 15px;
      }
      p {
        margin-bottom: 30px;
      }
      p.item-intro {
        font-size: 16px;
        font-style: italic;
        margin: 20px 0 30px;
        @include serif-font;
      }
      ul.list-inline {
        margin-top: 0;
        margin-bottom: 30px;
      }
      img {
        margin-bottom: 30px;
      }
      button {
        cursor: pointer;
      }
    }
    .close-modal {
      position: absolute;
      top: 25px;
      right: 25px;
      width: 75px;
      height: 75px;
      cursor: pointer;
      background-color: transparent;
      &:hover {
        opacity: 0.3;
      }
      .lr {
        /* Safari and Chrome */
        z-index: 1051;
        width: 1px;
        height: 75px;
        margin-left: 35px;
        /* IE 9 */
        -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
        background-color: $gray-900;
        .rl {
          /* Safari and Chrome */
          z-index: 1052;
          width: 1px;
          height: 75px;
          /* IE 9 */
          -webkit-transform: rotate(90deg);
          -ms-transform: rotate(90deg);
          transform: rotate(90deg);
          background-color: $gray-900;
        }
      }
    }
  }
  

  //Services

// Styling for the services section
.service-heading {
    margin: 15px 0;
    text-transform: none;
  }
  

  //Team

  // Styling for the team section
.team-member {
    margin-bottom: 50px;
    text-align: center;
    img {
      width: 225px;
      height: 225px;
      border: 7px solid fade-out($black, 0.9);
    }
    h4 {
      margin-top: 25px;
      margin-bottom: 0;
      text-transform: none;
    }
    p {
      margin-top: 0;
    }
  }
  

  //Timeline

  // Styling for the timeline section
.timeline {
    position: relative;
    padding: 0;
    list-style: none;
    &:before {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 40px;
      width: 2px;
      margin-left: -1.5px;
      content: '';
      background-color: $gray-200;
    }
    > li {
      position: relative;
      min-height: 50px;
      margin-bottom: 50px;
      &:after,
      &:before {
        display: table;
        content: ' ';
      }
      &:after {
        clear: both;
      }
      .timeline-panel {
        position: relative;
        float: right;
        width: 100%;
        padding: 0 20px 0 100px;
        text-align: left;
        &:before {
          right: auto;
          left: -15px;
          border-right-width: 15px;
          border-left-width: 0;
        }
        &:after {
          right: auto;
          left: -14px;
          border-right-width: 14px;
          border-left-width: 0;
        }
      }
      .timeline-image {
        position: absolute;
        z-index: 100;
        left: 0;
        width: 80px;
        height: 80px;
        margin-left: 0;
        text-align: center;
        color: white;
        border: 7px solid $gray-200;
        border-radius: 100%;
        background-color: $primary;
        h4 {
          font-size: 10px;
          line-height: 14px;
          margin-top: 12px;
        }
      }
      &.timeline-inverted > .timeline-panel {
        float: right;
        padding: 0 20px 0 100px;
        text-align: left;
        &:before {
          right: auto;
          left: -15px;
          border-right-width: 15px;
          border-left-width: 0;
        }
        &:after {
          right: auto;
          left: -14px;
          border-right-width: 14px;
          border-left-width: 0;
        }
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
    .timeline-heading {
      h4 {
        margin-top: 0;
        color: inherit;
        &.subheading {
          text-transform: none;
        }
      }
    }
    .timeline-body {
       > ul,
      > p {
        margin-bottom: 0;
      }
    }
  }
  @media(min-width:768px) {
    .timeline {
      &:before {
        left: 50%;
      }
      > li {
        min-height: 100px;
        margin-bottom: 100px;
        .timeline-panel {
          float: left;
          width: 41%;
          padding: 0 20px 20px 30px;
          text-align: right;
        }
        .timeline-image {
          left: 50%;
          width: 100px;
          height: 100px;
          margin-left: -50px;
          h4 {
            font-size: 13px;
            line-height: 18px;
            margin-top: 16px;
          }
        }
        &.timeline-inverted > .timeline-panel {
          float: right;
          padding: 0 30px 20px 20px;
          text-align: left;
        }
      }
    }
  }
  @media(min-width:992px) {
    .timeline {
      > li {
        min-height: 150px;
        .timeline-panel {
          padding: 0 20px 20px;
        }
        .timeline-image {
          width: 150px;
          height: 150px;
          margin-left: -75px;
          h4 {
            font-size: 18px;
            line-height: 26px;
            margin-top: 30px;
          }
        }
        &.timeline-inverted > .timeline-panel {
          padding: 0 20px 20px;
        }
      }
    }
  }
  @media(min-width:1200px) {
    .timeline {
      > li {
        min-height: 170px;
        .timeline-panel {
          padding: 0 20px 20px 100px;
        }
        .timeline-image {
          width: 170px;
          height: 170px;
          margin-left: -85px;
          h4 {
            margin-top: 40px;
          }
        }
        &.timeline-inverted > .timeline-panel {
          padding: 0 100px 20px 20px;
        }
      }
    }
  }
  