_home-content.scss 2.78 KB
#homepage-content {
  top: 0;
  position: relative;
  @media screen and (min-width: $bp-middle) {
    position: relative;
    width: 100%;
    height: auto;
    display: table;
  }
  // -webkit-transform: translate(0,0);
  // -moz-transform: translate(0,0);
  // -ms-transform: translate(0,0);
  // -o-transform: translate(0,0);
  // transition: all 0.2s ease;
  #home-image {
    position: relative;
    @media screen and (min-width: $bp-middle) {
      position: absolute;
      top: 0;
    }

    width: 100%;
    height: auto;
    max-height: 750px;
    z-index: -10;
    margin-left: 15px;
    padding-right: 15px;
    margin-top: -15px;
    @media screen and (min-width: $bp-middle) {
      margin-top: 0;
      margin-left: 22px;
      padding-right: 22px;
    }
    img {
      width: inherit;
      max-width: 100%;
      //max-height: 750px;
      height: auto;
    }

  }

  #transparency-content {
    position: absolute;
    display: inline-block;
    top: 53px;
    left: 7px;
    // left: -22px;
    width: 188px;
    padding: 20px 0 20px 20px;
    @media screen and (min-width: $bp-middle) {
      width: 60%;
      top: 10px;
      left: 15px;
      padding: 2.5% 0 2% 3.3%;
      line-height: 17px;
    }
    @media screen and (min-width: $bp-large) {
      width: 50%;
      top: 24px;
      left: 0;
      padding: 2.5% 0 2% 3.3%;
      line-height: 35px;
    }
    height: auto;

    background: rgba(30, 30, 31, 0.5);
    .lt-ie9 & {
      background: transparent;
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F1E1E1F,endColorstr=#7F1E1E1F)"; /* IE8 */
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F1E1E1F, endColorstr=#7F1E1E1F); /* IE6 & 7 */
      zoom: 1;
    }
    //padding: 35px 0 30px 41px;

    h2 {
      font-family: "HelveticaNeue-Light", Helvetica, Arial, sans-serif;
      color: #FFF;
      text-transform: uppercase;
      //font-size: 32px;
      letter-spacing: 1px;
      font-size: 12px;
      @media screen and (min-width: $bp-middle) {
        letter-spacing: 2px;
        font-size: 13px;
        display: inline;
      }
      @media screen and (min-width: $bp-large) {
        letter-spacing: 3px;
        font-size: 22px;
        display: block;
      }
      margin: 0;
    }
  }

  article {
    margin-top: 20px;
    margin-left: 15px;
    @media screen and (min-width: $bp-middle) {
      margin-left: 260px;
    }
    //margin-right: 15px;
    //text-align: justify;
    //word-break: break-all;

    p {
      font-size: 13px;
      line-height: 18px;
      letter-spacing: 0.5px;
    }
  }

  #blue-menu {
    margin-left: 22px;
    margin-top: 17px;
    ul {
      li {
        display: inline-block;
        margin-right: 7px;
        a {
          font-size: 12px;
          text-transform: uppercase;
        }
      }
    }
  }
}