/* IMPORT THE FRAMEWORK */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/*  LINEAR GRADIENTS  */
/*  BREAKPOINTS  */
/*  VISUAL STYLES  */
.intro .intro-text p, .about-us p {
  font-family: Helvetica, sans-serif;
}

.hero-wrapper .hero-cta p, .intro .intro-text h1, .slogan h1, .intro .intro-text h2, .service h2, .about-us h2, .intro .intro-text a {
  text-transform: uppercase;
}

/*  LAYOUT FRAMEWORK  */
.hero-inner, .hero-wrapper, .slogan, .intro, .service-wrapper, .about-wrapper {
  width: 1200px;
  margin: 0 auto;
  text-align: left;
}

@media screen and (max-width: 1319px) {
  .hero-inner, .hero-wrapper, .slogan, .intro, .service-wrapper, .about-wrapper {
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
  }
}

.hero, .hero-slide, .hero-wrapper, .sss, .service {
  position: relative;
}

.hero:before, .hero:after, .hero-wrapper .hero-cta, .sssnext, .sssprev, .service h2 {
  position: absolute;
}

.intro .intro-text, .intro .intro-image, .about-us, .service, .hero:before, .hero-slide:first-of-type, .hero-wrapper .hero-cta p, .sss, .slogan h1:before, .intro .intro-text img, .intro .intro-text a, .intro .intro-image img, .service img {
  display: block;
}

.intro .intro-text, .intro .intro-image, .about-us, .service {
  box-sizing: border-box;
}

.hero-slide, .slogan, .service {
  text-align: center;
}

.slogan h1:before {
  margin-left: auto;
  margin-right: auto;
}

.hero-wrapper .hero-cta p, .intro .intro-text h1, .slogan h1, .intro .intro-text h2, .service h2, .about-us h2, .intro-wrapper, .intro {
  clear: both;
}

.hero-wrapper .hero-cta p:after, .intro .intro-text h1:after, .slogan h1:after, .intro .intro-text h2:after, .service h2:after, .about-us h2:after, .intro-wrapper:after, .intro:after {
  display: table;
  content: '';
  clear: both;
}

.ssslide {
  display: none;
}

/*  COLUMN FRAMEWORK  */
.intro .intro-text, .intro .intro-image, .about-us, .service {
  float: left;
}

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
.intro .intro-text, .intro .intro-image, .about-us {
  width: 49%;
  margin-right: 2%;
}

.intro .intro-text:nth-of-type(2n), .intro .intro-image:nth-of-type(2n), .about-us:nth-of-type(2n) {
  margin-right: 0;
}

.intro .intro-text:nth-of-type(2n+1), .intro .intro-image:nth-of-type(2n+1), .about-us:nth-of-type(2n+1) {
  clear: both;
}

/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
.hero-wrapper .hero-cta p {
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
}

.hero-wrapper .hero-cta p, .intro .intro-text h1, .slogan h1, .intro .intro-text h2, .service h2, .about-us h2 {
  font-weight: normal;
  margin-bottom: 0.2em;
}

.hero-wrapper .hero-cta p, .intro .intro-text h1 {
  font-size: 1.6em;
  color: #f56f22;
}

.slogan h1, .intro .intro-text h2, .service h2, .about-us h2 {
  font-size: 1.5em;
  color: #f56f22;
}

.intro .intro-text p, .about-us p {
  font-weight: normal;
  color: #fff;
  font-size: 0.9em;
  line-height: 1.5em;
  padding: 0.9em 0;
}

.intro .intro-text a {
  color: #f56f22;
  transition: .1s ease-in-out;
}

.intro .intro-text a:hover {
  color: #792f05;
}

.intro .intro-text a:active {
  color: #7a7a7f;
}

.intro-wrapper {
  background-color: #262626;
  /* Fallback Color */
  background-image: -webkit-gradient(linear, left top, left bottom, from(#0d0e0e), to(#262626));
  /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #0d0e0e, #262626);
  /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image: -moz-linear-gradient(top, #0d0e0e, #262626);
  /* FF3.6 */
  background-image: -ms-linear-gradient(top, #0d0e0e, #262626);
  /* IE10 */
  background-image: -o-linear-gradient(top, #0d0e0e, #262626);
  /* Opera 11.10+ */
  background-image: linear-gradient(top, #0d0e0e, #262626);
  color: #FFF;
}

/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
.hero {
  overflow: hidden;
  padding: 0;
  background: #000;
}

.hero:before {
  z-index: 1000;
  content: "";
  width: 1200px;
  height: 1200px;
  left: 50%;
  top: 0%;
  margin-left: 600px;
  transform: rotate(-20deg);
  transform-origin: left top;
  background-color: rgba(0, 0, 0, 0.4);
}

.hero:after {
  background-color: rgba(0, 0, 0, 0.4);
  content: "";
  display: block;
  width: 1200px;
  height: 600px;
  right: 50%;
  margin-right: 600px;
  top: 100%;
  transform: rotate(65deg);
  transform-origin: right top;
}

.hero, .hero-slide, .hero-inner {
  height: 700px;
  overflow: hidden;
}

/* MAIN HERO HEIGHT */
.hero-slide {
  display: none;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.hero-wrapper {
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.hero-wrapper .hero-cta {
  top: 180px;
  left: 60px;
  width: 500px;
  padding: 1.5em;
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
}

.hero-wrapper .hero-cta p {
  width: 100%;
  font-size: 2em;
  padding-left: 15px;
}

/* HERO SLIDER */
.sss {
  width: 100%;
  max-width: 100%;
  height: 0;
  margin: 0 auto;
  padding: 0;
}

.ssslide {
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

.sssnext, .sssprev {
  width: 64px;
  height: 64px;
  margin: 0;
  top: 220px;
  background-repeat: no-repeat;
  z-index: 9;
  background-image: url("/images/home/hero-chevron.png");
  background-size: 64px;
}

.sssprev {
  left: 50%;
  margin-left: -700px;
}

.sssnext {
  right: 50%;
  margin-right: -700px;
  transform: rotate(180deg);
}

.sssprev:hover,
.sssnext:hover {
  cursor: pointer;
  opacity: .6;
}

.sssprev:active,
.sssnext:active {
  cursor: pointer;
  opacity: .3;
}

/* SLOGAN */
.slogan h1 {
  color: #fff;
  padding: 1.5em 20%;
}

.slogan h1:before {
  content: '';
  width: 50%;
  height: 3px;
  background-color: #f56f22;
  margin-bottom: 1.5em;
}

/* INTRO */
.intro-wrapper {
  border-top: 1px solid #333;
}

.intro {
  padding: 1.5em 0;
}

.intro .intro-text h2 {
  color: #f56f22;
}

.intro .intro-text img {
  width: 100%;
  height: auto;
  margin-bottom: 1.5em;
}

.intro .intro-text a {
  padding: 0.5em 0 0.5em 1.5em;
}

.intro .intro-text a:hover {
  color: #fff;
}

.intro .intro-image img {
  width: 100%;
  height: auto;
}

/* SERVICES */
.service {
  overflow: hidden;
  width: 23.5%;
  margin-right: 2%;
  height: 230px;
  border-bottom: 1px solid #fff;
}

.service h2 {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 40px;
  padding-top: 12px;
  margin-bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  font-size: 1.2em;
}

.service img {
  width: 100%;
  height: auto;
  transition: all .4s;
  margin-bottom: 1em;
}

.service img:hover {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.service:last-of-type {
  margin-right: 0 !important;
}

.services-listing a {
  text-transform: uppercase !important;
}

.about-wrapper {
  padding: 3em 0;
}

.about-us h2 {
  color: #f56f22;
}

/* MEDIA QUERIES */
@media screen and (max-width: 768px) {
  .hero, .hero-slide, .hero-inner {
    height: 500px;
    overflow: hidden;
  }
  /* MAIN HERO HEIGHT */
  .slogan h1 {
    padding: 1em 0;
    font-size: 1.3em;
  }
  .service {
    width: 49%;
    margin-bottom: 1.5em;
  }
  :nth-of-type(2),
  :nth-of-type(4) {
    margin-right: 0 !important;
  }
  .intro .intro-text, .intro .intro-image {
    width: 100%;
  }
}

@media screen and (max-width: 700px) {
  .hero, .hero-slide, .hero-inner {
    height: 400px;
    overflow: hidden;
  }
  /* MAIN HERO HEIGHT */
  .hero-wrapper {
    bottom: 20%;
  }
  .hero-wrapper .hero-cta {
    left: 0px;
    width: 80%;
    padding: 10%;
  }
  .hero-wrapper .hero-cta p {
    font-size: 1.6em;
  }
  .hero-wrapper .hero-cta a {
    width: 110px;
    font-size: 0.8em;
    padding: 1em 0.5em;
  }
  .intro .intro-text, .intro .intro-image {
    width: 100%;
  }
  .service {
    width: 100%;
    margin-bottom: 1.5em;
  }
  .about-us {
    width: 100%;
  }
}

@media screen and (max-width: 414px) {
  .hero:before {
    display: none;
  }
  .hero:after {
    display: none;
  }
  .hero-wrapper {
    bottom: 20%;
  }
  .hero-wrapper .hero-cta {
    text-align: center;
    left: 0px;
    width: 90%;
    padding: 5%;
  }
  .hero-wrapper .hero-cta p {
    text-align: left;
    font-size: 1.6em;
  }
  .slogan h1 {
    font-size: 1.2em;
  }
  .about-us {
    margin-bottom: 1.5em;
  }
}