// ====================================================
// HOME PAGE
//

.homepage {
  header.page-header {
    border: none;
    padding: 0;

    .hgroup {
      padding: 0;
    }
  }

  .dbd-promo {
    border-bottom: 5px solid $main-colour;
    overflow: hidden;
    margin: 2em 1em;

    @include media(desktop) {
      margin: 0.5em 2em 2em 2em;
    }

    p {
      margin: 1em 0;
      float: left;

      @include core-24;

      @include media(tablet) {
        width: 44%;
      }
    }

    .logo {
      display: block;
      padding: 0;
      margin: 0;

      @include media(tablet) {
        float: right;
        width: 50%;

        a {
          display: block;
          padding: 1em 0 0 1em;
        }
      }

      img{
        width: 100%;
      }
    }
  }

  .homepage-column {
    @include media(tablet) {
      width: 50%;
      float: left;
    }

    .inner {
      padding: 0 1em;
      margin-bottom: 1em;

      @include media(desktop) {
        padding: 0 2em;
        margin-bottom: 2em;
      }
    }
  }

  .timeline {
    @include media(tablet) {
      width: 50%;
      float: right;

      .inner {
        border-left: 1px solid $border-colour;
      }
    }

    .inner {
      padding: 0 1em;
      margin-bottom: 1em;

      @include media(desktop) {
        padding: 0 2em;
        margin-bottom: 2em;
      }
    }
  }

  .intro {
    margin: 0 0 2em 0;
    padding: 0 0 1em 0;
    border-bottom: 3px solid $main-colour;

    h2{
       margin-top: 0;
    }

    img {
      margin: 0 auto;
      display: block;
      float: right;
      width: 30%;
    }

    a{
      @include bold-19;
    }
    .button{
      @include button($red);
    }
  }

  .service-life {
    margin: 0;

    h2 {
      margin-top: 0;
      // @include bold-36;

      a {
        color: $text-colour;
        text-decoration: none;

        &:hover {
          text-decoration: underline;
        }
      }
    }
  }

  // Phases list (main styles are in phases.scss)
  .phases-list {
    li {
      p {
        @include core-16;
      }
    }
  }

  .resources {
    margin: 0 2em;
  }

  #roles{
    padding-top: 1em;
    border-top: 3px solid #DF3034;

    @include media(tablet) {
      padding-top: 0;
      border-top: none;
    }

    h3{
      @include bold-24;
      margin-top: 0;
    }

    .roles {
      li{
        width: 100%;
      }
      a, p{
        padding: 0;
        border: none;
        @include core-19;
      }
    }
  }
}