/****************************
-- Main Title --
****************************/
#usecase .main-title .bottom p:last-child {
  margin-bottom: 3em;
}

/****************************
-- Features --
****************************/
#usecase .features .wrapper {
  max-width: 1120px;
}

#usecase .features .bottom {
  font-size: 11px;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 35px;
  text-align: center;
  text-transform: uppercase;
}

/****************************
-- Captions --
****************************/
#usecase .captions .wrapper {
  max-width: none;
  padding: 0;
}

#usecase .captions figure {
  position: relative;
  width: 100%;
}

#usecase .captions figcaption {
  background-color: #06a94e;
  height: 0;
  max-height: 280px;
  min-height: 175px;
  padding-bottom: 50%;
  position: relative;
}

#usecase .captions figcaption:after {
  border-color: #06a94e transparent transparent transparent;
  border-style: solid;
  border-width: 19px 19px 0 19px;
  content: '';
  left: 9.375%;
  position: absolute;
  top: 100%;
  z-index: 1;
}

#usecase .captions figcaption .vertical-wrap {
  left: 9.375%;
  right: 9.375%;
  width: auto;
}

#usecase .captions figcaption h4 {
  color: #fff;
  font-size: 22px;
  font-size: 2.2rem;
  line-height: 1.25;
  margin-bottom: 0.5em;
}

#usecase .captions figcaption p {
  color: #106d35;
  font-weight: 500;
}

#usecase .captions .img-wrap {
  min-height: 175px;
  overflow: hidden;
  padding-bottom: 50%;
}

#usecase .captions .img-wrap img {
  max-height: none;
  width: 100%;
}

/* Animate */
#usecase .captions figure:first-child .vertical-wrap.animate {
  -webkit-animation: fadeInFromTop 300ms ease 0ms forwards;
  animation: fadeInFromTop 300ms ease 0ms forwards;
}

#usecase .captions figure:first-child + figure .vertical-wrap.animate {
  -webkit-animation: fadeInFromTop 300ms ease 200ms forwards;
  animation: fadeInFromTop 300ms ease 200ms forwards;
}

#usecase .captions figure:first-child + figure + figure .vertical-wrap.animate {
  -webkit-animation: fadeInFromTop 300ms ease 400ms forwards;
  animation: fadeInFromTop 300ms ease 400ms forwards;
}

#usecase .captions figure:first-child + figure + figure + figure .vertical-wrap.animate {
  -webkit-animation: fadeInFromTop 300ms ease 600ms forwards;
  animation: fadeInFromTop 300ms ease 600ms forwards;
}

/****************************
-- Media Queries --
****************************/
@media screen and (min-width: 30em) {
  /*---------------------
  Captions
  ---------------------*/
  #usecase .captions figure {
    width: 50%;
  }

  #usecase .captions figcaption,
  #usecase .captions .img-wrap {
    padding-bottom: 80%;
  }

  #usecase .captions figure:first-child + figure figcaption,
  #usecase .captions figure:first-child + figure + figure + figure figcaption {
    position: absolute;
    top: 100%;
    width: 100%;  
  }

  #usecase .captions figure:first-child + figure figcaption:after,
  #usecase .captions figure:first-child + figure + figure + figure figcaption:after {
    border-color: transparent transparent #06a94e transparent;
    border-width: 0 19px 19px 19px;
    bottom: 100%;
    top: auto;
  }
}

@media screen and (min-width: 40.0625em) {
  /*---------------------
  Features
  ---------------------*/
  #usecase .features .grid {
    margin: 0 -25px;
  }

  #usecase .features .feature {
    padding: 0 25px;
  }

  /*---------------------
  Captions
  ---------------------*/
  #usecase .captions figcaption,
  #usecase .captions .img-wrap {
    padding-bottom: 60%;
  }
}

@media screen and (min-width: 50em) {
  /*---------------------
  Captions
  ---------------------*/
  #usecase .captions figcaption,
  #usecase .captions .img-wrap {
    padding-bottom: 50%;
  }
}

@media screen and (min-width: 55em) {
  /*---------------------
  Captions
  ---------------------*/
  #usecase .captions .col {
    width: 25%;
  }

  #usecase .captions figcaption,
  #usecase .captions .img-wrap {
    padding-bottom: 100%;
  }

  #usecase .captions figcaption:after {
    border-width: 11px 11px 0 11px;
  }

  #usecase .captions figure:first-child + figure figcaption:after,
  #usecase .captions figure:first-child + figure + figure + figure figcaption:after {
    border-width: 0 11px 11px 11px;
  }
}

@media screen and (min-width: 60em) {
  /*---------------------
  Features
  ---------------------*/
  #usecase .features .feature {
    text-align: center;
  }

  #usecase .features .feature h5 {
    margin-bottom: 0.25em;
  }

  #usecase .features .feature .icon {
    float: none;
    margin: 0 auto 10px;
  }
}

@media screen and (min-width: 64em) {
  /*---------------------
  Main Title
  ---------------------*/
  #usecase .main-title .bottom p:last-child {
    margin-bottom: 4em;
  }

  /*---------------------
  Features
  ---------------------*/
  #usecase .features .feature {
    margin-bottom: 40px;
  }

  #usecase .features .bottom {
    font-size: 13px;
    font-size: 1.3rem;
    margin-bottom: 50px;
  }

  /*---------------------
  Captions
  ---------------------*/
  #usecase .captions figcaption,
  #usecase .captions .img-wrap {
    padding-bottom: 77.78%; /*280/360*/
  }

  #usecase .captions figcaption p {
    font-size: 16px;
    font-size: 1.6rem;
  }
}

@media screen and (min-width: 80em) {
  /*---------------------
  Captions
  ---------------------*/
  #usecase .captions figcaption .vertical-wrap {
    left: 17%;
    right: 17%;
  }

  #usecase .captions figcaption:after {
    left: 17%;
  }

  #usecase .captions figcaption h4 {
    font-size: 28px;
    font-size: 2.8rem;
    margin-bottom: 0.25em;
  }
}