local.scss

@import "core/core";

.local {

  .fifty {
    width: 50%;
    float: left;
  }

  .btn {
    width: 117px;
  }

  .thanks {
    font-weight: normal;
  }

  p, strong {
    font-size: 19px;
    line-height: 27px;
  }

  .landing {

    .geolocator {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      padding: 9px;
      max-width: 520px;
      margin-bottom: 18px;
    }

    @media only screen and (min-width: 767px) {
      .local-town {
        background-image: url("/assets/local/local-town-large.png");
        height: 531px;
        padding-top: 36px;
        h1 {
          font-weight: normal;
          font-size: 63px;
          margin-bottom: 9px;
        }
        h2 {
          font-size: 36px;
        }
      }
    }

    h1 {
      text-align: center;
      margin-bottom: 18px;
      line-height: 1.2;
    }
    .btn {
      width: 162px;
      margin-left: 18px;
      margin-right: 18px;
    }
    .blurb {
      text-align: left;
      padding: 18px;
      float: left;
      img {
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 18px;
        vertical-align: bottom;
      }
    }
    .site-blurbs {
      @media only screen and (max-width: 767px) {
        div.blurb {
          width: 100%;
        }
      }
      .blurb {
        width: 33%;
        text-align: center;
        img {
          max-height: 60px;
        }
        strong {
          margin-bottom: 9px;
          display: inline-block;
        }
        p {
          text-align: left;
        }
      }
    }
    .how-blurbs {
      @media only screen and (max-width: 767px) {
        div.blurb {
          width: 100%;
          height: 240px;
        }
      }
      .blurb {
        width: 25%;
        img {
          height: 34px;
        }
      }
    }
    .how-blurbs, .site-blurbs {
      @extend .cf;
      width: 100%;
      margin-bottom: 52px;
    }
  }

  .btn-group {
    text-align: center;
  }

  .panels {
    max-width: 765px;
    margin-left: auto;
    margin-right: auto;
    @extend .cf;

    h1, h2 {
      font-size: 19px;
      font-weight: bold;
    }
    h2.thanks {
      font-weight: normal;
    }
  }

  .left-panel, .right-panel {
    padding: 9px;
  }

  #new_local_signup {
    max-width: 522px;
  }

  .left-panel {
    margin-bottom: 18px;
    @extend .col8;
    padding-right: 36px;
  }

  .right-panel {
    @extend .col4;
    p {
      margin-bottom: 9px;
    }
    p, li {
      font-size: 15px;
    }
  }

  .lastname, .firstname {
    width: 47%;
    float: left;
  }

  .input.location {
    .field {
      margin-bottom: 9px;
    }
  }

  .firstname, .city {
    margin-right: 9px;
  }

  .city {
    float: left;
    width: 40%;
  }


  h1 {
    color: #0096b8;
    font-size: 36px;
    margin-bottom: 9px;
  }

  hr {
    margin-bottom: 9px;
    border-width: 3px;
  }

  h1, h2 {
    font-weight: normal;
  }

  .container {
    padding-top: 0;
    @media only screen and (max-width: 767px) {
      .col-abcde {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }
  .local-town {
    background-image: url("/assets/local/local-town-small.png");
    background-position: center top;
    height: 315px;
    padding: 18px;
    text-align: center;
    h1 {
      line-height: 1.5;
      margin-bottom: 0;
      font-size: 36px;
    }
    h2 {
      color: #295371;
    }
    @media only screen and (max-width: 767px) {
      h1 {
        font-size: 24px;
      }
    }
  }

}