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

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

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

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

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

/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
.globe {
  width: 50%;
  float: left; 
  margin-top: 2%;
}
  .globe img {
    width: 100%; }

.benefits {
  width: 45%;
  margin-left: 5%;
  margin-top: 5%;
  float: left; }

.benefit {
  width: 100%;
  margin: 1em 0;
  vertical-align: middle;
  padding: 0em 0em 0.5em 0.5em;
  border-bottom: 1px solid #ddd; }
  .benefit h1 {
    font-size: 1.03em;
    padding-top: 0.1em; }
  .benefit p {
    font-size: 1em;
    text-transform: none;
    padding-left: 20px;
    background: url("/images/global/arrow.png") no-repeat left 4px;
    background-size: 18px; }

.benefit div {
  width: 50%;
  float: left; }

@media screen and (max-width: 1024px) {
  .benefit {
    margin: 0.5em 0;
    padding: 0em 0em 0.2em 0.5em; } }
@media screen and (max-width: 768px) {
  .globe {
    width: 100%; }

  .benefits {
    width: 100%;
    margin-left: 0%; }

  .benefit div {
    width: 100%;
    float: left; }

  .benefit {
    margin: 0.5em 0;
    padding: 0em 0em 0em 0.5em; } }
@media screen and (max-width: 680px) {
  .globe {
    width: 100%; }

  .benefits {
    width: 100%;
    margin-left: 0%; }

  .benefit div {
    width: 100%;
    float: left; }

  .benefit {
    margin: 0.5em 0;
    padding: 0em 0em 0em 0.5em; } }