.custom-intro-wrap {
}
.custom-intro-content {
  display:flex;
  align-items:stretch;
  justify-content:center;
  color:#fff;
  text-align:center;
  margin:0 auto;
}
.custom-intro-green {
  background-color:#58A545;
}
.custom-intro-green .ci-text {
  background-color:#58A545;
}
.custom-intro-blue {
  background-color:#2483C5;
}
.custom-intro-blue .ci-text {
  background-color:#2483C5;
}
.custom-intro-red {
  background-color:#D61440;
}
.custom-intro-red .ci-text {
  background-color:#D61440;
}
.custom-intro-orange {
  background-color:#F58A1F;
}
.custom-intro-orange .ci-text {
  background-color:#F58A1F;
}
.custom-intro-grey {
  background-color:#6D6E67;
}
.custom-intro-grey .ci-text {
  background-color:#6D6E67;
}
{# with slanted graphics
@media only screen and (min-width:1600px) {
  .custom-intro-green {
    background-color:#408e26;
  }
  .custom-intro-blue {
    background-color:#1A73BE;
  }
  .custom-intro-red {
    background-color:#C20923;
  }
  .custom-intro-orange {
    background-color:#F17114;
  }
  .custom-intro-grey {
    background-color:#5A5B55; 
  }
}
#}
.ci-text {
  max-width:1200px;
  width:60%;
  padding:20px;
  min-height:200px;
  display:flex;
  align-items:center;
  align-content:center;
  justify-content:center;
  flex-wrap:wrap;
}
.ci-text-large {
  width:100%;
  font-size:22px;
}
.ci-text-medium {
  width:100%;
  font-size:20px;
}
.ci-text-small {
  width:100%;
  font-size:17px;
}

.ci-text-large p,
.ci-text-medium p,
.ci-text-small p {
  line-height:1.5;
  margin:0;
}
.ci-title {
  font-family: "roca", sans-serif;
  font-weight: 400;
  color:#fff;
  margin:0 0 10px;
}
.ci-title-large {
  font-size:26px;
  line-height:1.2;
}
.ci-title-medium {
  font-size:25px;
  line-height:1.2;
}
.ci-title-small {
  font-size:21px;
  line-height:1.2;
}
@media only screen and (min-width:570px) {
  .ci-title-large {
    font-size:29px;
  }
  .ci-title-medium {
    font-size:25px;
  }
  .ci-title-small {
    font-size:21px;
  }
  .ci-text-large {
    font-size:22px;
  }
  .ci-text-medium {
    font-size:19px;
  }
  .ci-text-small {
    font-size:16px;
  }
}
@media only screen and (min-width:768px) {
  .ci-text {
    min-height:270px;
  }
  .ci-title-large {
    font-size:36px;
  }
  .ci-title-medium {
    font-size:30px;
  }
  .ci-title-small {
    font-size:26px;
  }
  .ci-text-large {
    font-size:27px;
  }
  .ci-text-medium {
    font-size:22px;
  }
  .ci-text-small {
    font-size:19px;
  }
}
@media only screen and (min-width:1025px) {
  .ci-title-large {
    font-size:36px;
  }
  .ci-title-medium {
    font-size:30px;
  }
  .ci-title-small {
    font-size:26px;
  }
  .ci-text-large {
    font-size:28px;
  }
  .ci-text-medium {
    font-size:22px;
  }
  .ci-text-small {
    font-size:19px;
  }
}
@media only screen and (min-width:1200px) {
  .ci-title-large {
    font-size:44px;
  }
  .ci-title-medium {
    font-size:38px;
  }
  .ci-title-small {
    font-size:30px;
  }
  .ci-text-large {
    font-size:30px;
  }
  .ci-text-medium {
    font-size:25px;
  }
  .ci-text-small {
    font-size:21px;
  }
}
.ci-left-image {
  background-size:contain;
  background-position:top left;
  background-repeat:no-repeat; 
  width:20%;
}
.ci-right-image {
  background-size:contain;
  background-position:bottom right;
  background-repeat:no-repeat;
  width:20%;
}
@media only screen and (min-width:1600px) {
  .ci-text {
    min-width:500px;
  }
  .ci-left-image {
    background-size:contain;
    background-position:right center;
    width:30%;
  }
  .ci-right-image {
    background-size:contain;
    background-position:left center;
    background-repeat:no-repeat;
    width:30%;
  }
}