/**
 * @file
 * The layout base CSS file for the Green Hour module.
 *
 */

#block-greenhour-greenhour-banner {
  clear: both;
  overflow: hidden;
  margin-bottom: 40px;
}

#greenhour-banner {
  background: url("../img/greenhour_mapcentered.jpg") repeat-x;
  background-position: 50% 0;
  height: 240px;
  overflow: hidden;
  position: relative;
  width: 100%;
}

#greenhour-banner.mobile {
  background: url("../img/greenhour_render.jpg") no-repeat;
  background-position: top center;
  overflow: hidden;
  position: relative;
  width: 100%;
}

@media all and (max-width: 709px) {
  #block-greenhour-greenhour-banner {
    display: none;
  }
}

  #greenhour-banner .highlight {
    background: url("../img/greenhour_highlight.png") no-repeat;
    background-position: top center;
    height: 244px;
    overflow: hidden;
    position: relative;
    top: 48px;
    width: 100%;
  }

  #greenhour-banner .fade {
    background: url("../img/greenhour_fade.png") no-repeat;
    background-position: top center;
    background-size: 100% 100%;
    height: 240px;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
  }

  #greenhour-banner .strip-under {
    background: #FFF;
  }

  #greenhour-banner .strip, #greenhour-banner .strip-under {
      height: 40px;
      position: absolute;
      width: 100%;
  }

  #greenhour-banner .wrapper-background {
    height: 100%;
    padding-top: 40px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
  }

  #greenhour-banner .wrapper-background:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }

    #greenhour-banner .wrapper-background span {
      color: #01224D;
      font-family: 'P22CezanneAltTwo';
      font-size: 2.0em;
      position: relative;
      top: 135px;
    }

    #greenhour-banner .logo-green_h {
      background: url("../img/greenhour_text.png") no-repeat;
      background-size: contain;
      color: #01224D;
      display: block;
      height: 167px;
      position: relative;
      top: -220px;
      text-align: center;
      margin: 0 auto;
      width: 200px;
    }