/* IMPORT THE FRAMEWORK */
/* /////////////// VARIABLES /////////////// */
/* COLOUR PALETTE */
/* PRIMARY NAV */
/* LINKS */
/* /////////////// MIXIN FUNCTIONS /////////////// */
/*  LINEAR GRADIENTS  */
/*  BREAKPOINTS  */
/*  VISUAL STYLES  */
/*  LAYOUT FRAMEWORK  */
.hero-slide, .hero-text {
  position: relative; }

.hero-text .button {
  display: inline-block;
  zoom: 1; }

.hero-slide:first-of-type, .features a {
  display: block; }

.about, .gallery {
  box-sizing: border-box; }

.hero-text .button, .hero-slide, .hero-text, .intro p, .features a h2 {
  text-align: center; }

/*  COLUMN FRAMEWORK  */
.intro:before, .intro:after {
  content: "";
  display: table; }
.intro:after {
  clear: both; }

.about, .gallery {
  display: block;
  float: left; }

/* LOOP TO CREATE A CLASS FOR EACH COLUMN WIDTH */
.hero-inner {
  width: 1200px;
  margin: 0 auto;
  text-align: left; }
  @media screen and (max-width: 1199px) {
    .hero-inner {
      width: 95%;
      padding-left: 2.5%;
      padding-right: 2.5%; } }

.about, .gallery {
  float: left; }

.about, .gallery {
  width: 50%; }

.about, .gallery {
  width: 48%;
  margin-right: 2%; }
  .about:nth-of-type(2n), .gallery:nth-of-type(2n) {
    margin-right: 0; }
  .about:nth-of-type(2n+1), .gallery:nth-of-type(2n+1) {
    clear: both; }

/* --------------------------------- */
/* /////// SITE SPECIFIC STYLES //// */
/* --------------------------------- */
.hero-text .button, .hero-text h1, .features a h2 {
  text-transform: uppercase; }

/* BUTTON */
.hero-text .button {
  padding: 0.8em 1.5em;
  background-color: #0080c6;
  font-size: 1em;
  color: #FFF;
  cursor: pointer; }
  .hero-text .button:hover {
    background-color: #2ad9ff; }
  .hero-text .button:active {
    background-color: #007690; }

/* CONTENT */
.hero-text h1 {
  color: #00b5dc;
  font-size: 1.4em;
  margin-bottom: 0.5em; }

.hero-text p, .intro p {
  color: #223740;
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 1.2em; }

/* SITE SPECIFIC */
/* FORMS */
/* --------------------------------- */
/* /////// END SITE STYLES ///////// */
/* --------------------------------- */
/* HERO */
.hero {
  background: #64625e;
  margin-bottom: 1.5em; }

/* OVERALL CONTAINER */
.hero, .hero-slide, .hero-inner {
  height: 500px; }

/* MAIN HERO HEIGHT */
.hero-slide {
  display: none;
  background-position: center top;
  background-size: 1200px 500px;
  background-repeat: repeat-x; }

.hero-text {
  width: 60%;
  margin: 0 auto;
  top: 150px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 2% 5%; }
  .hero-text h1 {
    margin-bottom: 0.5em;
    font-size: 2em;
    color: #FFE62C; }
  .hero-text p {
    color: #fff;
    font-size: 1.1em; }
  .hero-text .button {
    margin: .8em 0; }

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

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

/* INTRO */
.intro {
  padding: 0em 5em; }
  .intro p {
    font-weight: 100;
    font-size: 1.2em;
    color: #0080c6; }

/* FEATURES */
.features-wrapper {
  margin: 1em 0; }

.features a {
  float: left;
  width: 25%;
  height: 280px;
  background-color: #0080c6;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100%; }
  .features a h2 {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px 0px;
    color: #fff;
    font-size: 1em;
    border-right: 1px solid #8bd2f4; }

/* BOTTOM SECTION */
.bottom {
  padding: 3em 0; }

.gallery-thumbs {
  width: 100%;
  float: left; }
  .gallery-thumbs img {
    width: 30.5%;
    padding: 1%; }

/* MEDIA QUERIES */
@media screen and (max-width: 768px) {
  .hero-text {
    width: 90%;
    margin: 0 auto;
    top: 110px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2% 2%; }
    .hero-text h1 {
      font-size: 1.8em; }
    .hero-text .button {
      margin: .8em 0 1em 0em; }

  .intro {
    padding: 0em 0.5em; }

  .features a {
    width: 100%;
    height: 100px;
    background-size: 100%;
    margin-bottom: 20px; }
    .features a h2 {
      margin-top: 35px;
      padding: 0.8em 0;
      background-color: rgba(0, 0, 0, 0.7);
      border-right: none !important; }

  .bottom {
    padding: 0 0; }

  .about, .gallery {
    width: 100%; } }
@media screen and (max-width: 736px) {
  .hero-text {
    width: 90%;
    margin: 0 auto;
    top: 110px;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 2% 2%; }
    .hero-text h1 {
      font-size: 1.8em; }
    .hero-text .button {
      margin: .8em 0 1em 0em; }

  .intro {
    padding: 0em 0.5em; }

  .features a {
    width: 100%;
    height: 100px;
    background-size: 100%;
    margin-bottom: 20px; }
    .features a h2 {
      margin-top: 35px;
      padding: 0.8em 0;
      background-color: rgba(0, 0, 0, 0.7);
      border-right: none !important; }

  .bottom {
    padding: 0 0; }

  .about, .gallery {
    width: 100%; }

  .gallery-thumbs {
    width: 100%;
    float: left; }
    .gallery-thumbs img {
      width: 46%;
      padding: 1%; } }