/************* MIXINS *************/
/************* MEDIA *************/
/************* COLOURS *************/
/************* RESET *************/
* {
  margin: 0;
  padding: 0;
  /*@include boxModel;*/ }

/************* START BUILD *************/
body, html {
  margin: 0px;
  padding: 0px;
  width: 100%;
  height: 100%;
  font-family: 'Roboto';
  /*-webkit-font-smoothing: antialiased;*/ }

header {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: white;
  width: 100%;
  height: 80px;
  background-color: #232323; }
  header img {
    width: 111px; }

a > img {
  border: 0; }

.hero {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  flex-direction: column;
  -ms-flex-direction: column;
  height: 320px;
  background-color: #1b6e75; }
  @media (max-width: 768px) {
    .hero {
      padding: 0 10px 0 10px; } }
  .hero h1 {
    clear: both !important;
    font-size: 30px;
    font-weight: 100;
    color: #cddfe0;
    text-align: center;
    margin-top: 20px;
    flex-direction: column !important; }
    .hero h1 a {
      color: #cddfe0; }
    @media (max-width: 768px) {
      .hero h1 {
        font-size: 28px; } }

.imageGrid {
  display: block;
  max-width: 1200px;
  margin: 0px auto;
  margin-top: 50px;
  margin-bottom: 60px; }
  @media (max-width: 1024px) {
    .imageGrid {
      padding: 0 20px 0 20px; } }
  .imageGrid .imageArea {
    display: block;
    position: relative;
    float: left;
    width: calc(50% - 5px);
    background-color: black;
    vertical-align: middle;
    margin-top: 10px;
    overflow: hidden;
    transform: scale(1); }
    @media (max-width: 768px) {
      .imageGrid .imageArea {
        width: 100%; } }
    .imageGrid .imageArea h2 {
      width: 100%;
      display: block;
      position: absolute;
      top: 45%;
      z-index: 2;
      color: white;
      font-weight: 100;
      font-size: 30px;
      text-align: center; }
      @media (max-width: 1024px) {
        .imageGrid .imageArea h2 {
          width: calc(100% - 40px);
          padding: 0 20px 0 20px;
          font-size: 22px; } }
    .imageGrid .imageArea img {
      display: block;
      opacity: 0.5;
      width: 100%;
      transition: all 0.6s; }
  .imageGrid .imageArea:nth-child(odd) {
    margin-right: 10px;
    float: left; }
    @media (max-width: 768px) {
      .imageGrid .imageArea:nth-child(odd) {
        margin-right: 0px; } }
  .imageGrid .imageArea:hover img {
    opacity: 0.75;
    transform: scale(1.06); }

.emailWrapper {
  background-color: #232323;
  clear: both;
  float: left;
  text-align: center;
  /*max-width: 1200px;*/
  width: 100%;
  padding: 60px 0 60px 0;
  margin: 0px auto;
  margin-top: 60px; }
  .emailWrapper .title {
    font-size: 16px;
    color: white;
    margin-bottom: 20px;
    font-weight: 300; }
  .emailWrapper form {
    display: block;
    margin: 0px auto;
    max-width: 1200px;
    text-align: left;
    /*background-color: red;*/ }
    .emailWrapper form #mce-EMAIL {
      float: left;
      display: block;
      height: 58px;
      border-radius: 5px;
      width: calc(100% - 175px);
      margin-right: 20px;
      padding-left: 50px;
      border: none;
      outline: none;
      background-image: url("../images/envelope.png");
      background-repeat: no-repeat;
      background-position: 20px center;
      font-family: 'Roboto';
      font-size: 17px; }
    .emailWrapper form .button {
      outline: none;
      height: 58px;
      width: 100px;
      background-color: #1b6e75;
      font-weight: 400;
      font-size: 20px;
      border: none;
      border-radius: 5px;
      color: white;
      cursor: pointer;
      transition: all 0.6s; }
    .emailWrapper form button:hover {
      background-color: #2ba7b2; }
    .emailWrapper form .privacy {
      display: block;
      color: white;
      margin-top: 10px;
      text-decoration: none;
      font-size: 15px;
      font-weight: 300;
      opacity: 0.5; }
    .emailWrapper form .privacy:hover {
      opacity: 1; }
  .emailWrapper #mce-success-response {
    margin-top: 10px !important;
    color: #1b6e75 !important; }
  .emailWrapper #mc_embed_signup div.mce_inline_error {
    width: calc(100% - 150px) !important;
    border-radius: 0 0 5px 5px;
    padding: 10px; }