{% set baseColor      = "#4F5858" %} /* - Main Text Font */
{% set accentColor2   = "#006580" %} /* - Turquoise Base Color */

{% set baseFontFamily    = "gotham, Source Sans Pro, 'Open Sans'" %}


.saas-content-grid-4 {
  position: relative;
  padding: 80px 0 60px 0;
  z-index: 1;
}

.saas-content-grid-4 .page-center {
  position: relative;
}

.saas-content-grid-4 .header-content {
  flex: 40% 1 1;
}

.saas-content-grid-4 .solutions-module {
  flex: 50% 1 1;
}

.saas-content-grid-4 .background-image {
  position: absolute;
  left: 0;
  bottom: -30px;
  background: url(https://www.covisum.com/hubfs/Covisum%20Apr%202017%20Theme/Images/support-graphic.png) center center no-repeat;
  background-size: contain;
  height: 26rem;
  width: 26rem;
}

.saas-content-grid-4 .header-content {
  text-align: center;
  margin: 0 0 50px;
  color: #006580;
}

.saas-content-grid-4 .header-content h2 {
  font-size: 30px;
  color: #006580;
  letter-spacing: -0.89px;
  line-height: 46px;
  margin: 0 0 5px;
}
.saas-content-grid-4 .header-content h3 {
  font-weight: 300;
  color: #000;
  font-size: 21px;
  line-height: 30px;
  max-width: 645px;
  margin: 0 auto;
}
.saas-content-grid-4 .solutions-module {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.saas-content-grid-4 .solutions-module .solution-item {
  margin: 0 0 40px;
  width: 50%;
  text-align: center;
  padding: 0 30px;
  min-width: 360px;
  max-width: 500px;
}
.saas-content-grid-4 .solution-item .solution-item-image {
  width: 208px;
  height: 128px;
  margin: 0 auto 17px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.saas-content-grid-4.narrow-items .solution-item .solution-item-image {
  width: 88px;
  height: 88px;
}
.saas-content-grid-4 .solution-item .solution-item-image img {
  max-height: 100%;
  object-fit: contain;
}
.saas-content-grid-4 .solution-item .solution-item-title {
  font-family: ;
  color: ;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.48px;
  line-height: 29px;
  margin: 0 0 15px;
}
.saas-content-grid-4 .solution-item .solution-item-title:empty {
  display: none;
}
.saas-content-grid-4.narrow-items .solution-item .solution-item-title {
  margin: 30px auto 15px;
  max-width: 250px;
}
.saas-content-grid-4 .solution-item .solution-item-description {
  color: #000;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  font-family: source sans pro;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
}
.saas-content-grid-4.narrow-items .solution-item .solution-item-description {
  max-width: 200px;
}
.saas-content-grid-4 .solutions-module-cta {
  text-align: center;
  margin-top: 40px;
}

.saas-content-grid-4 .solutions-module .solution-item a {
  text-decoration: none;
}

.saas-content-grid-4 .grid-cta {
  text-align: center;
  margin-top: 10px;
  width: 100%;
}
.saas-content-grid-4 .grid-cta a {
  font-size: 19px;
}

.saas-content-grid-4 .header-content > * {
  font-size: 30px;
  color: #006580;
  letter-spacing: -0.89px;
  line-height: 46px;
}
.saas-content-grid-4 .grid-cta {
  position: relative;
  top: 60px;
}

.saas-content-grid-4.no-header-content > .page-center {
  padding-bottom: 0 !important;
}
.saas-content-grid-4.no-header-content .background-image {
  bottom: 0;
}

@media(max-width: 1088px) {
  .saas-content-grid-4 .solutions-module {
    justify-content: center;
  }
}

@media(max-width: 991px) {
  .saas-content-grid-4 .grid-cta {
    position: static;
  }
  .saas-content-grid-4 .solutions-module .solution-item {
    width: 50%;
  }
  .saas-content-grid-4.no-header-content > .page-center {
    padding-bottom: 0 !important;
  }
  .saas-content-grid-4 .page-center {
    flex-direction: column;
    padding-bottom: 0;
  }
  .saas-content-grid-4 .background-image {
    position: static;
    max-width: 100%;
    margin-left: -20px;
  }
}

@media(max-width: 767px) {
  .saas-content-grid-4 {
    padding: 60px 0;
  }
  .saas-content-grid-4 .solutions-module .solution-item {
    width: 100%;
  }
}

@media (max-width: 450px) {
  .saas-content-grid-4 .solutions-module .solution-item {
    min-width: 0;
    width: 100%;
    padding: 0;
  }
}