/* IMPORT THE FRAMEWORK */
/* /////////////// VARIABLES /////////////// */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/* /////// CUSTOM BORDER RADIUS //////// */
/* /////// CUSTOM TRANSITIONS //////// */
/* /////// LINEAR GRADIENTS //////// */
/* /////// BREAKPOINTS //////// */
/* CUSTOM MIN MAX */
/* CUSTOM MAX */
/* CUSTOM MIN */
/* --------------------------------- */
/* /////// LAYOUT FRAMEWORK //////// */
/* --------------------------------- */
/* PLACEHOLDERS */
.software {
  position: relative; }

.service {
  text-align: center; }

.services:before, .software:before, .benefit:before, .services:after, .software:after, .benefit:after {
  content: "";
  display: table; }
.services:after, .software:after, .benefit:after {
  clear: both; }

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
/* --------------------------------- */
/* /////// END LAYOUT FRAMEWORK //// */
/* --------------------------------- */
/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
/* PLACEHOLDERS */
.service h1 {
  text-transform: uppercase; }

/* BUTTON */
/* TITLES & BODY TEXT */
.service h1 {
  color: #138fd1;
  font-size: 1.4em;
  line-height: 1.2em;
  font-weight: 300;
  margin-bottom: 0.5em; }

.service p {
  color: #615C56;
  padding-bottom: 1em;
  line-height: 1.5em;
  font-size: 1em; }

/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
/* SERVICES */
.services {
  padding: 3em 0; }

.service {
  width: 18.5%;
  min-height: 380px;
  float: left;
  padding: 1.5em 0.5%;
  color: #fff;
  border: 1px solid #fff; }
  .service h1 {
    color: #fff;
    font-size: 1em;
    font-weight: 500; }
  .service p {
    color: #fff; }
  .service img {
    width: 40%;
    padding: 1.5em 0 3em 0; }

.benefit {
  padding: 3em 0; }

.benefits .text-wrapper {
  padding-bottom: 20px; }

@media screen and (max-width: 768px) {
  .service {
    min-height: 430px;
    padding: 1.5em 0.5%; } }
@media screen and (max-width: 680px) {
  .services {
    padding: 0 0; }

  .service {
    width: 100%;
    min-height: 280px;
    margin-bottom: 0.5em;
    margin-right: 0; }
    .service h1 {
      color: #fff;
      font-size: 1.4em; }
    .service p {
      color: #fff;
      font-size: 1.1em; }
    .service img {
      width: 20%;
      padding: 1.5em 0 1.5em 0; } }