/* Text Elements */

h2.heading-2 {
  font-size: 24px;
}

h5.heading-1 {
  margin-top: 20px;
  margin-bottom: 0;
  width: 95%;
  font-size: 16px;
}

p.paragraph.four-up-feature-text {
  margin-bottom: 32px;
  width: 80%;
  text-align: center;
}

p.paragraph.paragraph-1 {
  margin-right: auto;
  margin-left: auto;
  width: 95%;
}

/* Layout Elements */

.container.card {
  -ms-flex-pack: start;
  -ms-flex-align: center;
  margin-right: auto;
  margin-left: auto;
  padding: 10px;
  width: 95%;

  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
     -moz-box-pack: start;
          justify-content: flex-start;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
          align-items: center;
}

.container.four-up-feature {
  text-align: center;
}

.container.four-up-feature-header {
  display: -webkit-box;
  display: -webkit-flex;
  display:    -moz-box;
  display: -ms-flexbox;
  display:         flex;
  -ms-flex-pack: center;
  margin: 32px auto 48px;
  width: 95%;

  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
          justify-content: center;
}

.container.card-container {
  margin-right: auto;
  margin-left: auto;
  padding-right: 8px;
  padding-left: 8px;
}

.container.comments {
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

div.responsive-picture.four-up-feature-image {
  margin-bottom: 32px;
  -webkit-filter: opacity(.93);
          filter: opacity(.93);
  -webkit-transition-delay: .2s;
     -moz-transition-delay: .2s;
       -o-transition-delay: .2s;
          transition-delay: .2s;
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-duration: 2s;
     -moz-transition-duration: 2s;
       -o-transition-duration: 2s;
          transition-duration: 2s;
}

div.responsive-picture.four-up-feature-image.outofview {
  -webkit-filter: opacity(1);
          filter: opacity(1);
  -webkit-transition-delay: 0s;
     -moz-transition-delay: 0s;
       -o-transition-delay: 0s;
          transition-delay: 0s;
  -webkit-transition-timing-function: ease-in-out;
     -moz-transition-timing-function: ease-in-out;
       -o-transition-timing-function: ease-in-out;
          transition-timing-function: ease-in-out;
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
  -webkit-transform: translateY(100px) scaleZ(1) scaleX(0) scaleY(0);
     -moz-transform: translateY(100px) scaleZ(1) scaleX(0) scaleY(0);
          transform: translateY(100px) scaleZ(1) scaleX(0) scaleY(0);
}

div.responsive-picture.four-up-feature-image:hover {
  padding-top: 25px;
  padding-bottom: 10px;
  -webkit-transition-timing-function: ease;
     -moz-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transform: scaleX(1.5) scaleY(1.5);
     -moz-transform: scaleX(1.5) scaleY(1.5);
       -o-transform: scaleX(1.5) scaleY(1.5);
          transform: scaleX(1.5) scaleY(1.5);
}

@media screen and (min-width: 40rem) {
  /* Text Elements */

  h2.heading-2 {
    font-size: 32px;
  }

  h5.heading-1 {
    font-size: 18px;
  }

  /* Layout Elements */

  .container.card {
    width: 50%;
  }

  .container.card-container {
    display: -webkit-box;
    display: -webkit-flex;
    display:    -moz-box;
    display: -ms-flexbox;
    display:         flex;

    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
  }
}

@media screen and (min-width: 64rem) {
  /* Text Elements */

  h2.heading-2 {
    font-size: 40px;
  }

  /* Layout Elements */

  .container.card {
    width: 25%;
  }

  div.responsive-picture.four-up-feature-image.outofview {
    -webkit-transform: translateY(100px) scaleZ(1) scaleX(0) scaleY(0);
       -moz-transform: translateY(100px) scaleZ(1) scaleX(0) scaleY(0);
            transform: translateY(100px) scaleZ(1) scaleX(0) scaleY(0);
  }
}