.content-wrapper{
  width: 100%;
  //background-color: $background-color;
}


.content{
  width: 100%;
  max-width: $bkp-extra-large;
  margin: 0 auto;
}

img{
  max-width: 100%;
  max-height: 100%;
}

.show{
  display:block;
}

.hide{
  display:none;
}

.grid-row {
  width:100%;
}

.grid-block,
.grid-row {
  float:left;
}

.grid{
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }

  .first-in-row {
    clear: left;
  }
}

.grid-1up{
  width: 100%;
}

.grid-2up{
  width: 100%;

  @include breakpoint($bkp-medium){
    width: 50%;
  }

  h4.list-heading {
    margin-left:0;
    @include breakpoint($bkp-medium){
      width: 100% - $gutter;
      margin: 0 auto;
    }
  }
}

.grid-3up{
  width: 100%;

  @include breakpoint($bkp-medium) {
    width: 33.3333333%;
  }

  h4.list-heading {
    margin-left:0;
    @include breakpoint($bkp-medium){
      width: 100% - ($gutter * 2);
      margin: 0 auto;
    }
  }
}

.grid-4up{
  width: 100%;

  @include breakpoint($bkp-medium){
    width: 25%;
  }

  .image-container {
    width: 100%;
    margin: 0 auto;

    @include breakpoint($bkp-medium){
      width: 100% - ($gutter * 3);
    }
  }

  .text-container {
    width: 100%;
    margin: 0 auto;
    //padding: 1em $gutter;

    @include breakpoint($bkp-medium){
      width: 100% - ($gutter * 3);
    }

  }
}

.grid-gallery{
  width: 100%;

  @include breakpoint($bkp-medium) {
    width: 33.33333333%;
  }
}

.stacks-module {
  //layout overrides specific to this app goes here
  width: 100% - ($gutter * 2);
  margin: 0 auto;
  padding-bottom: 1em;

  &.full-width{
    width: 100%;
    text-align: center;
    .text-container {
      width: 100% - ($gutter * 2);
      margin: 0 auto;
    }
  }

  &.stuff-right-content-left{
    width: 100% - ($gutter * 2);

    .image-container{
      width: 100%;
      text-align: center;

      @include breakpoint($bkp-medium){
        width: 100% - $gutter;
        margin-left: $gutter;
      }
    }

    .text-container {
      width: 100%;
      padding: 1em $gutter;
      @include breakpoint($bkp-medium) {
        width: 100% - $gutter;
        margin-right: $gutter;
        float:left;
        margin-left: 0px;
        padding-left: 0px;
      }
    }

  }

  &.stuff-left-content-right{
    .image-container {
      width: 100%;
      text-align: center;

      @include breakpoint($bkp-medium) {
        width: 100% - $gutter;
        margin-right: $gutter;
      }
    }

    .text-container {
      width: 100%;
      padding: 1em $gutter;
      @include breakpoint($bkp-medium) {
        width: 100% - $gutter;
        margin-left: $gutter;
        float:right;
        margin-right: 0px;
        padding-right: 0px;
      }
    }
  }

  .grid-block {
    margin-bottom: $gutter;
  }

  &.list-1up{
    text-align: center;

    .text-container{
      padding: 1em $gutter;
    }
  }

  &.list-2up{
    text-align: center;

    .image-container{
      width: 100%;
      margin: 0 auto;

      @include breakpoint($bkp-medium){
        width: 100% - $gutter;
      }
    }

    .text-container{
      width: 100%;
      margin: 0 auto;
      padding: 1em $gutter;

      @include breakpoint($bkp-medium){
        width: 100% - $gutter;
        padding-left:0px;
        padding-right:0px;
      }
    }
  }

  &.list-3up {
    text-align: center;

    .image-container {
      width: 100%;
      margin: 0 auto;

      @include breakpoint($bkp-medium){
        width: 100% - ($gutter * 2);
      }

    }

    .text-container {
      width: 100%;
      margin: 0 auto;
      padding: 1em $gutter;

      @include breakpoint($bkp-medium){
        width: 100% - ($gutter * 2);
        padding-left:0px;
        padding-right:0px;
      }

    }
  }

  &.list-gallery{
    text-align: center;

    .grid-block {
      margin-bottom: ($gutter * 0.6);
    }
  }
  .first-in-row {
    .image-container,
    .text-container,
    h4.list-heading {
      @include breakpoint($bkp-medium){
        margin-left:0;
      }
    }
  }
  .last-in-row {
    .image-container,
    .text-container,
    h4.list-heading {
      @include breakpoint($bkp-medium){
        margin-right:0;
      }
    }
  }

  &.list-carousel {
    .text-container {
      margin-top:$gutter;
    }
  }
}

.first-in-row h4.list-heading {
  @include breakpoint($bkp-medium){
    margin-left:0;
  }
}

.last-in-row h4.list-heading {
  @include breakpoint($bkp-medium){
    margin-right:0;
  }
}



.lazy {
    background: none !important;
    background-color: transparent !important;
    border: 0 solid black;
    color: black;
}


h3.section-title {
  width: 100% - ($gutter * 2);
  margin: 0 auto;
}
