body {
  overflow-x: auto;
}

/*********************************
* Typography
**********************************/

h1 {
  font-size: 30px;
  text-align: center;
}

h2 {
  font-size: 20px;
}

h3 {
  font-size: 34px;
}

h4 span {
  font-size: 30px;
}

p.highlight {
  position: relative;
  bottom: 0;
  text-align: center;
}

/*********************************
* Header
**********************************/

.header {
  z-index: 99;
}

.header.home {
  position: relative;
}

.header .column {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.header > table.parcel {
  width: 100%;
  margin: 0;
}

.header > table tr > td:first-of-type {
  padding: .5rem 1.5rem !important;
  font-size: 0;
}

.header > table tr > td:last-of-type {
  position: absolute;
}

.header tr td:last-of-type .button {
  display: none;
}

.header .logo {
  position: relative;
  top: 0;
  left: 0;
  width: 120px;
  transform: none;
}

.header .logo-link,
.header div.mobile {
  display: inline-block;
  vertical-align: middle;
}

.header .logo-link {
  width: calc(100% - 301px);
  height: 100%;
  text-align: left;
}

.header div.mobile {
  width: 301px;
}

.header div.mobile .button,
.header div.mobile .menu-toggle {
  display: inline-block;
  vertical-align: middle;
}

.header div.mobile .button.rectangle {
  width: auto;
  margin-bottom: 0;
  margin-right: 5rem;
  font-size: 16px;
  padding: 1rem .5rem;
  line-height: 0;
}

.header div.mobile .menu-toggle {
  width: 40px;
  color: #f68e4a;
  font-size: 40px;
}

@media (max-width: 500px) {
  .header .logo-link {
    width: calc(100% - 186px);
  }

  .header div.mobile {
    width: 186px;
  }

  .header div.mobile .button.rectangle {
    margin-right: 1rem;
    font-size: 12px;
  }
}


@media (max-width: 365px) {
  .header .logo-link {
    width: calc(100% - 40px);
  }

  .header div.mobile {
    width: 40px;
  }

  .header div.mobile .button.rectangle {
    display: none;
  }
}

/*********************************
* Navigation
**********************************/

.header .navigation {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  padding: 2rem;
  margin-right: 0;
  z-index: 99;
  background-color: #298fd0;
}

.header .navigation.on {
  display: block;
}

.navigation li {

}

.navigation li a {
  display: block;
  width: 100%;
  height: 100%;
}

.navigation .sub-nav li {
  margin-left: 13px;
  margin-right: 0;
  font: normal bold 14px/1.5em 'Neutra Text';
}

.navigation .sub-nav li a {
  color: #f5be64;
}

.navigation .sub-nav li.alt a {
  color: #f68e4b;
}

.navigation .sub-nav li:nth-of-type(1),
.navigation .sub-nav li:nth-of-type(4) {
  margin-left: 0;
}

.navigation .main-nav li {
  margin-left: 0;
  margin-right: 0;
  font: normal bold 18px/1em 'Neutra Text';
  display: block;
  background: white;
  margin-bottom: .5rem;
}

.navigation .sub-nav li:last-of-type, .navigation .main-nav li:last-of-type {
  margin-right: auto;
}

.navigation .sub-nav,
.navigation .main-nav li a {
  padding: .5rem 0;
}

.navigation .sub-nav {
  border-bottom: none;
}

.navigation .main-nav {
  padding-bottom: .5rem;
}

/* Funky Buttons */

.navigation .main-nav li {
  position: relative;
  display: block;
  margin: auto;
  margin-bottom: .25rem;
  background-color: transparent;
  background-size: 100% 100%;
  color: #fff;
  text-transform: uppercase;
  line-height: 0em;
  width: 203px;
  height: 48px;
  padding: 1.1rem 0;
  background-image: url('/images/layout/buttons/medium.png');
}

.navigation .main-nav li:nth-child(odd) {
  position: relative;
  background-image: none;
  z-index: 1;
}

.navigation .main-nav li:nth-child(odd):before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('/images/layout/buttons/medium.png');
  background-size: 100% 100%;
  transform: scaleX(-1);
  z-index: -1;
}

.navigation .main-nav li a,
.navigation .main-nav li a:hover {
  color: #fff;
}

.navigation .main-nav li a:hover {
  color: #fff;
}

/*********************************
* Billboard
**********************************/

.billboard {
  height: 85vw;
}

.billboard h6 {
  position: absolute;
  top: 18%;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  padding-top: 0;
  font-size: 65px;
  line-height: 1em;
  text-align:center;
}

.billboard h6 span {
  font-size: 45px;
  line-height: 1em;
  text-align:center;
}

@media (max-width: 550px) {
  .billboard h6 {
    font-size: 45px;
  }
  
  .billboard h6 span {
    font-size: 30px;
  }
}

.billboard .animal.desktop {
  display: none;
}

.billboard .animal {
  width: 100vw;
  max-width: 100vw;
  top: auto;
  bottom: -1px;
  right: 0;
  left: auto;
}

.billboard .parcel {
  width: 100%;
  margin: 0;
}

.billboard.home {
  height: 50vw;
}

.billboard.home h6 {
  padding-top: 0;
}

.billboard.home video {
  width: 100vw;
  height: auto;
  right: 0;
  left: auto;
}

@media (max-width: 800px) and (min-width: 500px) {
  .billboard.home {
    height: 50vw;
  }
}

@media (max-width: 800px) and (orientation: landscape) {
  .billboard.home video {
    top: 50%;
    transform: translateY(-50%);
  }
}

@media (max-width: 500px) {
  .billboard.home {
    height: 35vh;
  }

  .billboard.home video {
    width: auto;
    height: 35vh;
  }
}

/*********************************
* Recent Work
**********************************/

div.recent-work {
  display: block;
}

.recent-work .info {
  width: 100%;
}

.recent-work .info .wrapper {
  position: relative;
  max-width: 90%;
  margin: auto;
  padding-top: 3rem;
  padding-bottom: 3rem;
  top: 0;
  left: 0;
  transform: none;
}

.recent-work .showcase {
  width: 100%;
}

/*********************************
* Facebook
*********************************/

.social-buttons > div {
  display: block;
}

.social-buttons > .fb-like {
  margin-bottom: 1rem;
}

.social-buttons > .social-icons > a:first-of-type i {
  margin-left: 0;
}

img.facebook-post {
  
}

/*********************************
* Client List
**********************************/

.client-list-buttons .button.rectangle {
  display: block;
  width: 100%;
  margin-left: 0;
}

.client-list-buttons .button.rectangle:last-of-type {
  margin-bottom: 0;
}

/*********************************
* Borders
*********************************/

.bordered > .column,
.bordered > td {
  border: none;
}

/*********************************
* Footer
*********************************/

.footer td:last-of-type > img.exclamation-mark {
  max-height:210px;
}

/*********************************
* Spacing
**********************************/

.row.no-top-padding > .column,
.row.no-top-padding > td {
  padding-top: 0rem;
}

/**********************************
* Grid
***********************************/

.row > .column, .row > td {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.one-quarter {
  padding-bottom: 2.25rem;
}

.one-quarter:last-of-type {
  padding-bottom: 0rem;
}

.main {
  padding-bottom: 0;
}

/***********************************
* Helper Classes
***********************************/

.mobile {
  display: block;
}

.desktop {
  display: none;
}