@charset "UTF-8";
/* CSS Document */


/*###############################
 -- TABLE OF CONTENTS --
  01. HOMEPAGE SECTIONS
    01.1 Main Container
    01.2 Layer 1: Image
    01.3 Layer 1.1: Call-To-Caption
    01.3 Layer 2: Overlay
    01.4 Layer 3: Tagline
    01.5 Layer 4: Stats
    01.6 Layer 5: Content
  02. HOMEPAGE QUOTES
    02.1 Blockquotes
    02.2 Images
  03. HOMEPAGE INTRODUCTION
  04. HOMEPAGE QUOTE: INTRO
  05. HOMEPAGE SECTION: DIFFERENT VALUE
  06. HOMEPAGE QUOTE: DIFFERENT QUOTE
  07. HOMEPAGE SECTION: DARING OPPORTUNITY
  08. HOMEPAGE QUOTE: DARING QUOTE
  09. HOMEPAGE SECTION: DIVERSE PLACE
  10. HOMEPAGE QUOTE: DIVERSE QUOTE
  11. HOMEPAGE SECTION: REBEL SPIRIT
###############################*/


/*  HOMEPAGE SECTIONS */
/* ####################################################################*/

/* MAIN CONTAINER */
.homepage-section {
  position: relative;
  overflow: hidden;
  background-color: #37474f;
  padding: 0;
}

/* LAYER 1: IMAGE */
.layer-1-image > img {
  position: relative;
  width: 100%;
}
  @media (min-width: 768px)  {
    .layer-1-image > img {
      position: absolute;
      margin: auto;
      min-height: 100%;
      min-width: 100%;
      max-width: none;
      width: auto;
      left: -100%;
      right: -100%;
      bottom: 0;
    }
  }

/* LAYER 1.1: CALL-TO-CAPTION */
.layer-call-to-caption {
  margin: -80px 0 0 20px;
}
  .layer-call-to-caption .click-region {
    display: inline-block;
  }
    .layer-call-to-caption .call-to-caption {
      transition: all 100ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
      transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
      position: relative;
      overflow: hidden;
      clear: both;
      margin: 0;
      padding:10px 20px;
      border-radius: 10px 0 10px 10px;
      background-color: rgba(55, 71, 79, 0.825);
      box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      font-size: 14px;
    }
      .layer-call-to-caption .click-region:hover .call-to-caption {
        background-color: rgba(55, 71, 79, 0.925);
        box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
      }
      .layer-call-to-caption .click-region:active .call-to-caption,
      .layer-call-to-caption .click-region:focus .call-to-caption {
        background-color: rgba(55, 71, 79, 0.9);
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
      }
      .layer-call-to-caption .call-to-caption:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        border:15px solid transparent;
        border-right-color: rgba(255, 255, 255, 0.1);
        border-top-color: rgba(255, 255, 255, 0.1);
      }
        .call-to-caption-image {
          float: left;
          margin-right: 8px;
        }
        .call-to-caption-label {
          float: left;
          margin-right: 15px;
        }
        .call-to-caption-action {
          float: left;
          text-transform: uppercase;
          padding-top: 10px;
          font-size: 15px;
        }

  @media (min-width: 768px) {
    .layer-call-to-caption {
      position: absolute;
      bottom: 40px;
      left: 40px;
      margin: 0;
    }
      .layer-call-to-caption .call-to-caption {
        padding:15px 30px;
        font-size: 18px;
      }
        .call-to-caption-label {
          margin-right: 20px;
        }
        .call-to-caption-action {
          padding-top: 14px;
          font-size: 20px;
        }
  }

/* LAYER 2: OVERLAY */
.layer-2-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 66.6666666666667%; /* mark of the beast */
}
  @media (min-width: 768px) {
    .layer-2-overlay {
      height: 100%;
      padding-bottom: 0;
    }
  }

/* LAYER 3: TAGLINE */
.layer-3-tagline {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font: normal 500 60px "Roboto",sans-serif;
  text-transform: uppercase;
  letter-spacing: -3px;
  line-height: .9;
  text-align: center;
  color: rgba(255, 255, 255, .8);
  margin-top: 20px;
}
  @media (min-width: 768px) {
    .layer-3-tagline {
      font-size: 150px;
      letter-spacing: -9px;
      text-align: inherit;
      color: rgba(255, 255, 255, .24);
      margin-top: 0;
    }
  }
  @media (min-width: 992px) {
    .layer-3-tagline {
      font-size: 200px;
    }
  }
  @media (min-width: 1200px) {
    .layer-3-tagline {
      font-size: 250px;
    }
  }

/* LAYER 4: STATS */
.layer-4-stat {
  display: none;
}
  @media (min-width: 768px) {
    .layer-4-stat {
      display: block;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      height: 100%;
    }
      .layer-4-stat .stat {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 300px;
        padding: 25px 25px;
        text-align: center;
      }
        .layer-4-stat .stat-value {
          font: bold 120px "Roboto Slab",serif;
          color: rgba(255, 255, 255, .6);
        }
          .layer-4-stat .stat-value:after {
            content: none;
          }
          .layer-4-stat .stat-value sup {
            font-weight: bold;
            font-size: 60px;
            color: rgba(255, 255, 255, .6);
          }
        .layer-4-stat .stat-label {
          font-size: 22px;
          color: rgba(255, 255, 255, .83);
        }
  }
  @media (min-width: 992px) {
    .layer-4-stat .stat {
      width: 500px;
      padding: 100px 125px;
    }
  }

/* LAYER 5: CONTENT */
.layer-5-content {
  position: relative;
  margin: 30px 0;
}
  .layer-5-content h2 {
    color: rgba(255, 255, 255, .8);
  }
  .layer-5-content .lead {
    font-weight: 300;
    font-size: 20px;
    color: rgba(255, 255, 255, .8);
  }
  @media (min-width: 768px)  {
    .layer-5-content {
      margin: 0;
    }
      .layer-5-content .lead {
        font-size: 25px;
      }
  }


/*  HOMEPAGE QUOTES */
/* ####################################################################*/

.homepage-quote {
  display: none;
}
  @media (min-width: 768px) {
    .homepage-quote {
      display: block;
    }
  }
  .homepage-quote .col-sm-8 {
    margin-bottom:0;
  }

/* BLOCKQUOTES */
.homepage-quote blockquote {
  padding: 10px;
  font-size: 20px;
}
  .homepage-quote blockquote .quote-text {
    margin-bottom: 10px;
  }
  @media (min-width: 768px) {
    .homepage-quote blockquote .quote-cite {
      margin-left: 30px;
    }
  }
  @media (min-width: 1200px) {
    .homepage-quote blockquote {
      margin: 15px 0 0 50px;
    }
  }

/* IMAGES */
img.img-circle {
  display: none;
}
  @media (min-width: 768px) {
    img.img-circle {
      display: block;
      position: relative;
      width: 100%;
      max-width: 100%;
      height: auto;
      margin: 0 auto;
    }
  }
  @media (min-width: 1200px) {
    img.img-circle {
      z-index: 100;
      max-width: none;
      width: 120%;
      height: 120%;
      margin: -20% 0 -20% 0;
    }
  }


/*  HOMEPAGE INTRODUCTION */
/* ####################################################################*/

#introduction .layer-2-overlay {
  background: rgb(160,40,22,.8);
  background: -moz-linear-gradient(bottom, rgba(246,136,78,.3) 50%, rgba(160,40,22,.8) 90%);
  background: -webkit-linear-gradient(bottom, rgba(246,136,78,.3) 50%,rgba(160,40,22,.8) 90%);
  background: linear-gradient(to top, rgba(246,136,78,.3) 50%,rgba(160,40,22,.8) 90%);
}
@media (min-width: 768px)  {
  #introduction {
    padding: 75px 0 825px 0;
  }
    #introduction .layer-2-overlay {
      height: 100%;
      padding-bottom: 0;
    }
    #introduction h2,
    #introduction .lead {
      color: #fff;
    }
}
@media (min-width: 992px)  {
  #introduction h2 {
    font-size: 60px;
    line-height: .75;
  }
}
@media (min-width: 2100px)  {
  #introduction {
    padding: 75px 0 900px 0;
  }
}
@media (min-width: 2275px)  {
  #introduction {
    padding: 75px 0 1000px 0;
  }
}


/*  HOMEPAGE QUOTE: INTRO */
/* ####################################################################*/

#intro-quote {
  background-color: #646c73; /* 737c84 */
}
  #intro-quote blockquote,
  #intro-quote blockquote cite {
    color: rgba(255, 255, 255, .8);
  }
  #intro-quote img.img-circle {
    border: solid 5px #939ea6;
  }
    @media (min-width: 1200px) {
      #intro-quote img.img-circle {
        border: solid 25px #939ea6;
      }
    }


/*  HOMEPAGE SECTION: DIFFERENT VALUE */
/* ####################################################################*/

#different-value .layer-2-overlay {
  background-color: rgba(169, 99, 105, .4);
  background: -moz-linear-gradient(-29deg, rgba(142,56,57,.8) 25%, rgba(169,99,105,.5) 60%);
  background: -webkit-linear-gradient(-29deg, rgba(142,56,57,.8) 25%,rgba(169,99,105,.5) 60%);
  background: linear-gradient(159deg,rgba(142,56,57,.8) 30%,rgba(169,99,105,.3) 60%);
}
@media (min-width: 768px)  {
  #different-value {
    padding: 140px 0 500px 0;
  }
    #different-value .layer-3-tagline {
      color: rgba(255, 255, 255, .15);
    }
    #different-value .layer-4-stat .stat-value,
    #different-value .layer-4-stat .stat-value sup {
      color: rgba(255, 255, 255, .65);
    }
    #different-value .layer-4-stat .stat-label {
      color: rgba(255, 255, 255, .95);
    }
    #different-value h2 {
      color: #fff;
    }
    #different-value .lead {
      color: rgba(255, 255, 255, .85);
    }
}
@media (min-width: 2100px)  {
  #different-value {
    padding: 75px 0 720px 0;
  }
}


/*  HOMEPAGE QUOTE: DIFFERENT QUOTE */
/* ####################################################################*/

#different-quote {
  background-color: #6c464f;
}
  #different-quote blockquote,
  #different-quote blockquote cite {
    color: rgba(255, 255, 255, .8);
  }
  #different-quote img.img-circle {
    border: solid 5px #896b72;
  }
@media (min-width: 1200px) {
  #different-quote img.img-circle {
    border: solid 25px #896b72;
  }
}


/*  HOMEPAGE SECTION: DARING OPPORTUNITY */
/* ####################################################################*/

#daring-opportunity .layer-2-overlay {
  background-color: rgba(169, 99, 105, .3);
}
@media (min-width: 768px)  {
  #daring-opportunity {
    padding: 140px 0 500px 0;
  }
    #daring-opportunity .layer-1-image > img {
      bottom: -100px;
    }
    #daring-opportunity .layer-4-stat .stat {
      left:0;
      margin: 100px 0;
    }
      #daring-opportunity .layer-4-stat .stat-value {
        color: #775e6b;
      }
      #daring-opportunity .layer-4-stat .stat-label {
        color: #4c3b4c;
      }
      #daring-opportunity h2,
      #daring-opportunity .lead {
        color: #3d2f3d;
      }
}
@media (min-width: 1200px)  {
  #daring-opportunity .layer-4-stat .stat {
    margin: 100px;
  }
}
@media (min-width: 1500px)  {
  #daring-opportunity .layer-4-stat .stat {
    margin: 100px 260px;
  }
}
@media (min-width: 2100px)  {
  #daring-opportunity {
    padding: 140px 0 660px 0;;
  }
}


/*  HOMEPAGE QUOTE: DARING QUOTE */
/* ####################################################################*/

#daring-quote {
  background-color: #816670;
}
  #daring-quote blockquote,
  #daring-quote blockquote cite {
    color: rgba(255, 255, 255, 1);
  }
  #daring-quote img.img-circle {
    border: solid 5px #b7969f;
  }
  @media (min-width: 1200px) {
    #daring-quote img.img-circle {
      border: solid 25px #b7969f;
    }
    blockquote {
      margin-top: 10px;
    }
  }


/*  HOMEPAGE SECTION: DIVERSE PLACE */
/* ####################################################################*/

#diverse-place .layer-2-overlay {
  background-color: rgba(246, 136, 78, .2);
}
@media (min-width: 768px)  {
  #diverse-place {
    padding: 140px 0 500px 0;
  }
    #diverse-place .layer-4-stat .stat {
      top:0;
      bottom: auto;
      margin: 180px 50px;
      background: -moz-radial-gradient(center, ellipse cover, rgba(91,80,97,.9) 0%, rgba(255,255,255,0) 60%);
      background: -webkit-radial-gradient(center, ellipse cover, rgba(91,80,97,.9) 0%,rgba(255,255,255,0) 60%);
      background: radial-gradient(ellipse at center, rgba(91,80,97,.9) 0%,rgba(255,255,255,0) 60%);
    }
    #diverse-place h2,
    #diverse-place .lead {
      color: #263238;
    }
}
@media (min-width: 992px)  {
  #diverse-place .layer-4-stat .stat {
    margin: 100px 0;
  }
}
@media (min-width: 1200px)  {
  #diverse-place .layer-4-stat .stat {
    margin: 100px 80px;
  }
}
@media (min-width: 2100px)  {
  #diverse-place {
    padding: 140px 0 650px 0;
  }
}


/*  HOMEPAGE QUOTE: DIVERSE QUOTE */
/* ####################################################################*/

#diverse-quote {
  background-color: #563635;
}
  #diverse-quote blockquote,
  #diverse-quote blockquote cite,
  #diverse-quote .stat-value,
  #diverse-quote .stat-value sup,
  #diverse-quote .stat-label {
    color: rgba(255, 255, 255, .7);
  }
    #diverse-quote .stat-value:after {
    background: rgba(255, 255, 255, .7);
  }
  #diverse-quote img.img-circle {
    border: solid 5px #917c7c;
  }
  @media (min-width: 1200px) {
    #diverse-quote img.img-circle {
      border: solid 25px #917c7c;
    }
  }


/*  HOMEPAGE SECTION: REBEL SPIRIT */
/* ####################################################################*/

#rebel-spirit .layer-2-overlay {
  background: rgba(160,40,22,.35);
  background: -moz-linear-gradient(16deg, rgba(96,89,125,.85) 30%,rgba(160,40,22,.25) 40%);
  background: -webkit-linear-gradient(16deg, rgba(96,89,125,.85) 30%,rgba(160,40,22,.25) 40%);
  background: linear-gradient(166deg, rgba(96,89,125,.85) 30%,rgba(160,40,22,.25) 40%);
}
#rebel-spirit .layer-3-tagline {
  font-size: 40px;
  letter-spacing: normal;
}
@media (min-width: 768px)  {
  #rebel-spirit {
    padding: 50px 0 590px 0;
  }
    #rebel-spirit .layer-1-image > img {
      top: -100px;
    }
    #rebel-spirit .layer-3-tagline {
      padding: 10px 15px 0 0;
      font-size: 60px;
      letter-spacing: -3px;
      text-align: right;
      color: rgba(255, 255, 255, .5);
    }
    #rebel-spirit h2,
    #rebel-spirit .lead {
      color: #fff;
    }
}
@media (min-width: 992px)  {
  #rebel-spirit .layer-3-tagline {
    font-size: 70px;
  }
}
@media (min-width: 1200px)  {
  #rebel-spirit .layer-3-tagline {
    font-size: 80px;
    letter-spacing: -4px;
  }
}
@media (min-width: 1550px)  {
  #rebel-spirit .layer-3-tagline {
    font-size: 125px;
  }
}
@media (min-width: 2100px)  {
  #rebel-spirit {
    padding: 50px 0 800px 0;
  }
}