@charset "UTF-8";
/*
Theme Name: sposto
Author: Sposto Interactive
Version: 2.1
Text Domain: customspostotheme
*/
/************* Reset *************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, * {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
}

html, body {
  min-width: 320px;
}

/************* HTML5 display-role reset for older browsers *************/
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/************* Global Styles *************/
body {
  padding: 4px 4px 0 4px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::-moz-selection {
  background: rgba(255, 111, 99, 0.99);
  color: #ffffff;
}

::-webkit-selection {
  background: rgba(255, 111, 99, 0.99);
  color: #ffffff;
}

::selection {
  background: rgba(255, 111, 99, 0.99);
  color: #ffffff;
}

#wrapper {
  width: 100%;
}

#wrapper > :nth-child(2) {
  margin-top: 4.813em;
}

.content-well {
  width: 70%;
  margin: 0 auto;
}

.content-well > p:last-of-type {
  margin-bottom: 3.125em;
}

.headline-block {
  padding: 3.125em 0;
  text-align: center;
}

.clear {
  clear: both;
}

.desktop-item {
  display: block;
}

.mobile-item {
  display: none;
}

.headline {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 4.500em;
  line-height: 1em;
  text-transform: uppercase;
  color: #454545;
}

.headline-small {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.625em;
  line-height: 1.15em;
  text-transform: uppercase;
  color: #454545;
}

h2 {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.625em;
  line-height: 1.15em;
  text-transform: uppercase;
  color: #454545;
}

h3 {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.125em;
  line-height: 1.250em;
  margin-bottom: 0.500em;
  color: #666666;
  text-transform: uppercase;
}

.subhead {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1.125em;
  line-height: 1.4em;
  color: #666666;
  text-transform: none;
  font-weight: normal;
}

.tile .subhead, .eye-candy-text .subhead {
  color: #454545;
  margin-top: 0.313em;
}

p {
  font-family: Georgia, serif;
  line-height: 2.313em;
  margin-bottom: 1.563em;
  color: #666666;
}

small {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.875em;
  line-height: 1.5em;
  color: #666666;
}

.footer-text {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  color: #858585;
  font-size: 0.750em;
  margin-top: 0.625em;
}

.pipe {
  padding: 0 1em;
}

a:link, a:hover {
  -webkit-tap-highlight-color: transparent;
}

a {
  text-decoration: none;
}

p a, a.text-link, .photo-credit a {
  color: #ff6f63;
  text-decoration: none;
}

p a:hover, a.text-link:hover, .photo-credit a:hover {
  text-decoration: underline;
}

img.alignnone {
  width: 100%;
}

img.alignleft {
  width: 50%;
  height: auto;
  float: left;
  margin: 0 3.125em 1.563em 0;
}

img.alignright {
  width: 50%;
  height: auto;
  float: right;
  margin: 0 0 1.563em 3.125em;
}

img.aligncenter {
  max-width: 100%;
  height: auto;
}

.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#upgrade {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #ffffff;
  text-align: center;
  padding: 200px 0 0 0;
  z-index: 30;
}

#rotate {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: url("_img/rotate.png");
  background-repeat: no-repeat;
  background-position: center;
  background-color: #ffffff;
  background-size: 130px auto;
  z-index: 30;
  display: none;
}

.rule {
  width: 4.688em;
  height: 2px;
  margin: 0.938em auto 0 auto;
  background-color: #ff6f63;
}

.rule-header {
  width: 4.688em;
  height: 2px;
  margin: 1.125em auto 0 auto;
  background-color: #ff6f63;
}

.rule-left {
  width: 4.688em;
  height: 2px;
  margin: 0.938em 0 0 0;
  background-color: #ff6f63;
  -webkit-transition: 1s false false;
  -moz-transition: 1s false false false;
  -o-transition: 1s false false false;
  transition: 1s;
}

.tile:hover .rule-left, .related-project:hover .rule-left {
  width: 9em;
}

#pagination {
  margin: 0 auto;
  text-align: center;
  margin-bottom: 3.125em;
}

.arrow-left {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-left: 4px solid #333333;
  border-bottom: 4px solid #333333;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.arrow-right {
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  border-right: 4px solid #333333;
  border-bottom: 4px solid #333333;
  margin-left: 1.563em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.arrow-left:hover, .arrow-right:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.arrow-left.inactive, .arrow-right.inactive {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

.arrow-left.inactive:hover, .arrow-right.inactive:hover {
  cursor: default !important;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
  opacity: 0.4;
}

#full-page {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: url("_img/oops.gif");
  background-size: cover;
  background-position: center;
  text-align: center;
  padding: 1.563em;
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#full-page-text {
  display: table-cell;
  vertical-align: middle;
}

#full-page .headline, #full-page h3 {
  color: #ffffff;
}

/************* Header Styles *************/
header {
  width: 100%;
  background-color: #333333;
  border: 4px #ffffff solid;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 15;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.logo {
  width: 45px;
  height: 45px;
  margin: 0.875em 1.563em;
  display: inline-block;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: 0.3s false false;
  -moz-transition: 0.3s false false false;
  -o-transition: 0.3s false false false;
  transition: 0.3s;
}

.logo svg {
  width: 100%;
  height: 100%;
}

.logo:hover {
  cursor: pointer;
  opacity: 1.0;
}

#menu-icon, #menu-close {
  float: right;
  margin: 1.563em;
  position: fixed;
  top: 4px;
  right: 4px;
  z-index: 230;
  height: 25px;
  width: 22px;
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: 0.3s false false;
  -moz-transition: 0.3s false false false;
  -o-transition: 0.3s false false false;
  transition: 0.3s;
}

#menu-icon:before {
  content: 'Menu';
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 1em;
  text-transform: uppercase;
  color: #ffffff;
  position: absolute;
  top: 5px;
  left: -250%;
  z-index: 240;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear false;
  -o-transition: opacity 1s linear false;
  transition: opacity 1s linear;
}

#menu-icon.open:before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  visibility: hidden;
}

#menu-icon.open:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  visibility: visible;
}

#menu-close {
  display: none;
  z-index: 235;
}

#menu-close:before {
  content: 'Close';
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 1em;
  text-transform: uppercase;
  color: #ffffff;
  position: absolute;
  top: 5px;
  left: -250%;
  z-index: 240;
  visibility: visible;
  -webkit-transition: opacity 1s linear;
  -moz-transition: opacity 1s linear false;
  -o-transition: opacity 1s linear false;
  transition: opacity 1s linear;
}

#menu-icon,
#menu-close + #menu-icon,
#menu-close:before {
  -webkit-transition: opacity 0.25s ease-out;
  -moz-transition: opacity 0.25s ease-out false;
  -o-transition: opacity 0.25s ease-out false;
  transition: opacity 0.25s ease-out;
}

#menu-icon:hover,
#menu-close:hover + #menu-icon,
#menu-close:hover::before {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transition: opacity 0.25s ease-in;
  -moz-transition: opacity 0.25s ease-in false;
  -o-transition: opacity 0.25s ease-in false;
  transition: opacity 0.25s ease-in;
}

#menu-icon.open #hamburger {
  top: 2px !important;
  -webkit-transition: top 0.25s linear;
  -moz-transition: top 0.25s linear false;
  -o-transition: top 0.25s linear false;
  transition: top 0.25s linear;
}

.menu-icon-bar {
  background-color: #ffffff;
  width: 22px;
  height: 5px;
  position: relative;
  top: 10px;
  -webkit-transition: all 0.3s false;
  -moz-transition: all 0.3s false false;
  -o-transition: all 0.3s false false;
  transition: all 0.3s;
}

.menu-icon-bar:after, .menu-icon-bar:before {
  content: '';
  display: block;
  background-color: #ffffff;
  width: 22px;
  height: 5px;
  position: absolute;
  z-index: -1;
  -webkit-transition: all 0.5s false;
  -moz-transition: all 0.5s false false;
  -o-transition: all 0.5s false false;
  transition: all 0.5s;
}

.menu-icon-bar:before {
  top: -8px;
}

.menu-icon-bar:after {
  top: 8px;
}

#menu-icon.open {
  -webkit-transition: none false false;
  -moz-transition: none false false false;
  -o-transition: none false false false;
  transition: none;
}

#menu-icon.open .menu-icon-bar {
  background: none !important;
}

#menu-icon.open .menu-icon-bar:after {
  top: 0px !important;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#menu-icon.open .menu-icon-bar:before {
  top: 0px !important;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.menu-line {
  height: 5px;
  width: 22px;
  position: absolute;
  background-color: #ffffff;
}

#hamburger {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
}

#menu-icon #hamburger {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transform-origin: center center 50%;
  -moz-transform-origin: center center 50%;
  -ms-transform-origin: center center 50%;
  -o-transform-origin: center center 50%;
  transform-origin: center center 50%;
}

#menu-icon.open #hamburger {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(-180deg);
  -moz-transform: rotate(-180deg);
  -ms-transform: rotate(-180deg);
  -o-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

#menu-icon #hamburger .topBun {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(0deg) translate(0px, 0px);
  -moz-transform: rotate(0deg) translate(0px, 0px);
  -ms-transform: rotate(0deg) translate(0px, 0px);
  -o-transform: rotate(0deg) translate(0px, 0px);
  transform: rotate(0deg) translate(0px, 0px);
  -webkit-transform-origin: center center 50%;
  -moz-transform-origin: center center 50%;
  -ms-transform-origin: center center 50%;
  -o-transform-origin: center center 50%;
  transform-origin: center center 50%;
}

#menu-icon.open #hamburger .topBun {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(-45deg) translate(4px, -4px);
  -moz-transform: rotate(-45deg) translate(4px, -4px);
  -ms-transform: rotate(-45deg) translate(4px, -4px);
  -o-transform: rotate(-45deg) translate(4px, -4px);
  transform: rotate(-45deg) translate(4px, -4px);
}

.bottomBun {
  -webkit-transform-origin: center center 50%;
  -moz-transform-origin: center center 50%;
  -ms-transform-origin: center center 50%;
  -o-transform-origin: center center 50%;
  transform-origin: center center 50%;
}

#menu-icon #hamburger .bottomBun {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(0deg) translate(0px, 0px);
  -moz-transform: rotate(0deg) translate(0px, 0px);
  -ms-transform: rotate(0deg) translate(0px, 0px);
  -o-transform: rotate(0deg) translate(0px, 0px);
  transform: rotate(0deg) translate(0px, 0px);
}

#menu-icon.open #hamburger .bottomBun {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(-135deg) translate(-7px, -7px);
  -moz-transform: rotate(-135deg) translate(-7px, -7px);
  -ms-transform: rotate(-135deg) translate(-7px, -7px);
  -o-transform: rotate(-135deg) translate(-7px, -7px);
  transform: rotate(-135deg) translate(-7px, -7px);
}

#menu-icon #hamburger .patty {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(0deg) scale(1);
  -moz-transform: rotate(0deg) scale(1);
  -ms-transform: rotate(0deg) scale(1);
  -o-transform: rotate(0deg) scale(1);
  transform: rotate(0deg) scale(1);
  -webkit-transform-origin: center center 50%;
  -moz-transform-origin: center center 50%;
  -ms-transform-origin: center center 50%;
  -o-transform-origin: center center 50%;
  transform-origin: center center 50%;
}

#menu-icon.open #hamburger .patty {
  -webkit-transition: 0.6s false false;
  -moz-transition: 0.6s false false false;
  -o-transition: 0.6s false false false;
  transition: 0.6s;
  -webkit-transform: rotate(-135deg) scale(0);
  -moz-transform: rotate(-135deg) scale(0);
  -ms-transform: rotate(-135deg) scale(0);
  -o-transform: rotate(-135deg) scale(0);
  transform: rotate(-135deg) scale(0);
}

/************* Menu Styles *************/
#menu-overlay {
  height: 0;
  /* make 100% to fade out instead of hiding instantly */
  width: 100%;
  background-color: rgba(51, 51, 51, 0.7);
  z-index: -10;
  border-left: 4px #ffffff solid;
  border-right: 4px #ffffff solid;
  cursor: pointer;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity(0.5s) false false;
  -moz-transition: opacity(0.5s) false false false;
  -o-transition: opacity(0.5s) false false false;
  transition: opacity(0.5s);
}

#menu {
  width: 50%;
  height: 100%;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  position: fixed;
  top: 0;
  right: -50%;
  bottom: 0;
  z-index: 20;
  background-color: #ff6f63;
  border-top: 4px #ffffff solid;
  border-right: 4px #ffffff solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: 0.5s false false;
  -moz-transition: 0.5s false false false;
  -o-transition: 0.5s false false false;
  transition: 0.5s;
}

.menu-display {
  height: 100% !important;
  /* remove to fade out instead of hiding instantly */
  opacity: 1 !important;
  z-index: 10 !important;
}

.menu-open {
  right: 0 !important;
}

#menu-top-wrapper {
  padding: 0 1.563em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#menu-top {
  height: 4.55em;
  border-bottom: 1px #ff8c82 solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#menu-top .logo {
  margin: 0.875em 0;
  opacity: 0.7;
  display: none;
}

#menu-top .logo:hover {
  cursor: pointer;
  opacity: 1.0;
}

#big-links-wrapper {
  margin: 0.750em 0;
}

.menu-big-link {
  padding: 0.625rem 1.563rem;
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 2.375em;
  color: #ffffff;
  text-transform: uppercase;
  -webkit-transition: background 0.25s ease-out;
  -moz-transition: background 0.25s ease-out false;
  -o-transition: background 0.25s ease-out false;
  transition: background 0.25s ease-out;
}

.menu-big-link:hover {
  background-color: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  -webkit-transition: background 0.25s linear;
  -moz-transition: background 0.25s linear false;
  -o-transition: background 0.25s linear false;
  transition: background 0.25s linear;
}

#menu-secondary-links {
  width: 100%;
  padding: 0.625em 1.563em 0 1.563em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#menu-secondary-links h3 {
  color: #ffffff;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.menu-secondary-link {
  width: 50%;
  padding: 1.250em 1.250em 1.250em 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 1px #ff8c82 solid;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #ffffff;
}

.menu-link {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1em;
  color: #ffffff;
  opacity: 0.7;
}

.menu-link:hover {
  opacity: 1;
}

.menu-cta-area {
  width: 100%;
  padding: 0 1.563em 1.563em 1.563em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.menu-cta-area a {
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1em;
  color: #ffffff;
  margin: 1.563em 1.563em 0 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: 0.3s false false;
  -moz-transition: 0.3s false false false;
  -o-transition: 0.3s false false false;
  transition: 0.3s;
}

.menu-cta-area a:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.menu-cta-wrapper {
  width: 100%;
  border-top: 1px #ff8c82 solid;
}

.menu-cta {
  width: 45px;
  height: 45px;
  display: inline-block;
  vertical-align: middle;
}

.menu-cta svg {
  width: 100%;
  height: 100%;
}

.menu-cta-area a span, .footer-link-desktop span {
  padding-left: 4px;
}

.menu-cta-area a:last-child {
  margin-right: 0;
}

.footer-link-mobile {
  display: none;
  margin: 0 1.563em 0 0;
}

.footer-link-desktop {
  opacity: 0.7;
  display: inline-block;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 1em;
  color: #ffffff;
  margin: 0 1.563em 0 0;
}

/************* Footer Styles *************/
footer {
  width: 100%;
  background-color: #333333;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-top: 4px #ffffff solid;
  padding: 1.563em;
}

footer h3 {
  color: #858585;
  margin-bottom: 0;
}

#footer-inner {
  width: auto;
  display: inline-block;
  float: left;
}

footer .menu-cta-area {
  width: auto;
  padding: 0 0 0 0;
  float: right;
  display: inline-block;
}

footer .menu-cta-area a {
  margin: 0 1.563em 0 0;
}

footer .menu-cta-area a:hover {
  opacity: 1.0;
}

footer .menu-cta-wrapper, #success .menu-cta-wrapper {
  width: 100%;
  border-top: 0 none;
}

#bottom-border {
  position: relative;
  width: 100%;
  height: 4px;
  background-color: #ffffff;
  z-index: 25;
}

#right-border {
  position: fixed;
  width: 4px;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 25;
}

#left-border {
  position: fixed;
  width: 4px;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #ffffff;
  z-index: 25;
}

/************* Basic Content Styles *************/
.write-up h1 {
  color: red;
}

.write-up h1:after {
  content: '– Please do not use H1 in the content well';
}

.write-up h2 {
  border-bottom: 1px solid #eeeeee;
  margin: 2em 0 .5em 0;
  padding-bottom: .5em;
}

.write-up h3, .write-up h4, .write-up h5, .write-up h6 {
  margin: 2em 0 .5em 0;
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  font-size: 1.125em;
  line-height: 1.250em;
  margin-bottom: 0.500em;
  color: #666666;
  text-transform: uppercase;
}

.write-up strong, .write-up b {
  font-weight: bold;
}

.write-up > p:first-of-type:first-line {
  font-size: 1.375em;
  font-style: italic;
}

.write-up > ol, .write-up ul {
  margin-bottom: 1.563em;
}

.write-up > ol li, .write-up ul li {
  position: relative;
  z-index: 1;
  padding: 0 0 .75em 1em;
  color: #666666;
  line-height: 2em;
}

.write-up > ol li {
  counter-increment: step-counter;
}

.write-up > ol li:before {
  content: counter(step-counter);
  font-size: 1.25em;
  color: #ff6f63;
  font-weight: bold;
  position: absolute;
  z-index: 2;
  top: 0;
  left: -.125em;
}

.write-up > ul li:before {
  content: '';
  height: .375em;
  width: .375em;
  background: #ff6f63;
  border-radius: 50%;
  display: block;
  position: absolute;
  z-index: 2;
  top: .7em;
  left: 0;
}

.write-up > ul li a {
  color: #ff8c82;
}

.write-up a:not(.cta) {
  text-decoration: none;
  position: relative;
  z-index: 1;
  outline: none;
  padding-bottom: .25em;
  display: inline-block;
}

.write-up a:not(.cta):after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  height: 2px;
  width: 100%;
  background: #ff6f63;
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
  transform: translateY(-5px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: -webkit-transform 0.2s ease-in, opacity 0.2s linear;
  -moz-transition: -moz-transform 0.2s ease-in false, opacity 0.2s linear false;
  -o-transition: -o-transform 0.2s ease-in false, opacity 0.2s linear false;
  transition: transform 0.2s ease-in, opacity 0.2s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.write-up a:not(.cta):focus, .write-up a:not(.cta):hover {
  text-decoration: none;
}

.write-up a:not(.cta):focus:after, .write-up a:not(.cta):hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.content-well p a:not(.cta) {
  text-decoration: none;
  position: relative;
  z-index: 1;
  outline: none;
  padding-bottom: .25em;
  display: inline-block;
}

.content-well p a:not(.cta):after {
  content: '';
  position: absolute;
  z-index: 2;
  top: 100%;
  left: 0;
  height: 1px;
  width: 100%;
  background: #ff6f63;
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: -webkit-transform 0.2s ease-in, opacity 0.2s linear;
  -moz-transition: -moz-transform 0.2s ease-in false, opacity 0.2s linear false;
  -o-transition: -o-transform 0.2s ease-in false, opacity 0.2s linear false;
  transition: transform 0.2s ease-in, opacity 0.2s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.content-well p a:not(.cta):focus, .content-well p a:not(.cta):hover {
  text-decoration: none;
}

.content-well p a:not(.cta):focus:after, .content-well p a:not(.cta):hover:after {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transform: translateY(-10px);
  -moz-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  -o-transform: translateY(-10px);
  transform: translateY(-10px);
}

.cta {
  padding: .75em 1.25em;
  text-align: center;
  font-family: "Lato", Arial, sans-serif;
  background: #666666;
  color: #ffffff;
  font-weight: 900;
  font-size: 1em;
  letter-spacing: .02em;
  line-height: 1.250em;
  text-transform: uppercase;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear false;
  -o-transition: all 0.2s linear false;
  transition: all 0.2s linear;
}

.cta:hover {
  background: #ff6f63;
  text-decoration: none;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in false;
  -o-transition: all 0.2s ease-in false;
  transition: all 0.2s ease-in;
}

/************* Inline Images *************/
.aligncenter a:before, .aligncenter a:after,
.alignnone a:before,
.alignnone a:after,
.alignright a:before,
.alignright a:after,
.alignleft a:before,
.alignleft a:after {
  display: none;
}

.aligncenter a:hover img, .aligncenter a:focus img,
.alignnone a:hover img,
.alignnone a:focus img,
.alignright a:hover img,
.alignright a:focus img,
.alignleft a:hover img,
.alignleft a:focus img {
  border: 1px solid #ff6f63;
}

.aligncenter a:hover:before, .aligncenter a:hover:after, .aligncenter a:focus:before, .aligncenter a:focus:after,
.alignnone a:hover:before,
.alignnone a:hover:after,
.alignnone a:focus:before,
.alignnone a:focus:after,
.alignright a:hover:before,
.alignright a:hover:after,
.alignright a:focus:before,
.alignright a:focus:after,
.alignleft a:hover:before,
.alignleft a:hover:after,
.alignleft a:focus:before,
.alignleft a:focus:after {
  display: none;
}

.aligncenter img,
.alignnone img,
.alignright img,
.alignleft img {
  border: 1px solid rgba(102, 102, 102, 0.2);
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear false;
  -o-transition: all 0.2s linear false;
  transition: all 0.2s linear;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.alignleft {
  float: left;
  margin: 1em 5em 1em 0;
}

.alignright {
  float: right;
  margin: 1em 0 1em 5em;
}

.alignnone {
  width: auto;
}

.alignnone:before, .alignnone:after {
  content: "";
  display: table;
  clear: both;
}

.wp-caption .wp-caption-text {
  font-family: "Lato", Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: .875em;
  letter-spacing: .02em;
  line-height: 1.5;
  color: #666666;
  position: relative;
  z-index: 1;
  margin-bottom: 1em;
}

.wp-caption.alignleft .wp-caption-text {
  border-right: 1px solid rgba(102, 102, 102, 0.2);
  margin: 1em 0 0 0;
  padding-right: 1em;
}

.wp-caption.alignright .wp-caption-text {
  border-left: 1px solid rgba(102, 102, 102, 0.2);
  margin: 1em 0 0 0;
  padding-left: 1em;
}

/************* Basic Inline WP Gallery *************/
.gallery {
  position: relative;
  z-index: 3;
  overflow: hidden;
}

.gallery.gallery-size-full {
  width: 100%;
  height: auto;
}

.gallery.gallery-size-medium {
  width: 40%;
  height: auto;
  float: right;
  margin: 1em 0 1em 5em;
}

.gallery.gallery-size-small {
  width: 30%;
  height: auto;
  float: right;
  margin: 1em 0 1em 5em;
}

.gallery figure {
  position: absolute;
  top: -9999em;
  left: -9999em;
  z-index: 2;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear false;
  -o-transition: height 0.5s linear false;
  transition: height 0.5s linear;
}

.gallery figure > div {
  display: block;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.1s linear;
  -moz-transition: opacity 0.1s linear false;
  -o-transition: opacity 0.1s linear false;
  transition: opacity 0.1s linear;
}

.gallery figure.active {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  z-index: 4;
  -webkit-transition: height 0.5s linear;
  -moz-transition: height 0.5s linear false;
  -o-transition: height 0.5s linear false;
  transition: height 0.5s linear;
}

.gallery figure.active > div {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transition: opacity 0.3s ease-in;
  -moz-transition: opacity 0.3s ease-in false;
  -o-transition: opacity 0.3s ease-in false;
  transition: opacity 0.3s ease-in;
}

.gallery figure img {
  border: 1px solid rgba(102, 102, 102, 0.2);
  width: 100%;
  height: auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.gallery figure figcaption {
  padding: 2em;
  font-family: "Lato", Arial, sans-serif;
  font-style: normal;
  font-weight: 300;
  font-size: .75em;
  letter-spacing: .02em;
  line-height: 1.25;
  color: #666666;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #ffffff;
}

.gallery .gallery-nav {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  padding: 0 .5em;
  display: block;
}

.gallery .gallery-nav ol {
  margin: 0 auto;
  display: block;
  padding-left: 4px;
}

.gallery .gallery-nav ol li {
  cursor: pointer;
}

.gallery .next,
.gallery .prev {
  position: absolute;
  z-index: 2;
  top: 8px;
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 0.2em solid #eaeaea;
  border-top: 0.2em solid #eaeaea;
  z-index: 5;
  background: none;
  cursor: pointer;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out false;
  -o-transition: all 0.15s ease-out false;
  transition: all 0.15s ease-out;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.gallery .next:hover, .gallery .next:focus,
.gallery .prev:hover,
.gallery .prev:focus {
  border-color: #454545;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear false;
  -o-transition: all 0.25s linear false;
  transition: all 0.25s linear;
}

.gallery .next span,
.gallery .prev span {
  text-indent: -9999px;
  position: absolute;
}

.gallery .prev {
  left: 0;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.gallery .next {
  right: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.gallery ol li {
  margin-right: 4px;
  display: inline-block;
}

.gallery ol li:last-child {
  margin-right: 0;
}

.gallery ol li.active button {
  background: #ff6f63;
}

.gallery ol li button {
  cursor: pointer;
  height: 15px;
  width: 15px;
  background: #cbcbcb;
  border: 2px solid #ffffff;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -ms-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.gallery ol li span {
  position: absolute;
  text-indent: -9999px;
}

/************* Homepage Grid Styles *************/
.homepage-statement {
  /*height: 0;*/
  overflow: hidden;
}

.tile-inner {
  padding: 1.563em;
  width: 80%;
  position: absolute;
  z-index: 5;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.tile-image {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background-size: cover;
  background-position: center;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: 1s false false;
  -moz-transition: 1s false false false;
  -o-transition: 1s false false false;
  transition: 1s;
}

.dark {
  background-color: #333333;
}

.dark .headline, .dark h2, .dark .subhead, .dark .photo-credit {
  color: #ffffff;
}

.tile {
  position: absolute;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: 4px #ffffff solid;
  display: none;
}

.tile:hover .tile-image {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  -webkit-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  -moz-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  -ms-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  -o-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  transform: matrix(1.1, 0, 0, 1.1, 0, 0);
}

.grid-quote .tile-inner {
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
  padding: 1.563em 3.125em;
}

.grid-quote .subhead {
  color: #ff6f63;
  margin-top: 0;
  display: table-cell;
  vertical-align: middle;
}

.quote-icon {
  width: 45px;
  height: 45px;
  margin: 0 auto 1.250em auto;
}

.quote-icon svg {
  width: 100%;
  height: 100%;
}

.homepage-ad .tile-inner {
  width: 100%;
  height: 100%;
  display: table;
  text-align: center;
  padding: 1.563em;
  background-color: #ff6f63;
}

.homepage-ad-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.homepage-ad h2, .homepage-ad .subhead {
  color: #ffffff;
}

.block-cta {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  color: #ffffff;
  display: inline-block;
  padding: .675em 1.250em;
  margin-top: 15px;
  background-color: #666666;
  -webkit-transition: 0.3s false false;
  -moz-transition: 0.3s false false false;
  -o-transition: 0.3s false false false;
  transition: 0.3s;
}

.block-cta:hover {
  background-color: #333333;
}

.grid-1, .grid-2 {
  width: 100%;
  position: relative;
}

.grid-1 {
  height: 62.188em;
}

.grid-2 {
  height: 41.25em;
}

.grid-1 .tile-1 {
  width: 50%;
  height: 20.625em;
  top: 0;
  left: 0;
}

.grid-1 .tile-2 {
  width: 50%;
  height: 41.563em;
  border-left: 4px #ffffff solid;
  top: 0;
  right: 0;
}

.grid-1 .tile-3 {
  width: 50%;
  height: 41.563em;
  top: 20.625em;
  left: 0;
}

.grid-1 .tile-4 {
  width: 50%;
  height: 20.625em;
  border-left: 4px #ffffff solid;
  top: 41.563em;
  right: 0;
}

.grid-2 .tile-1 {
  width: 25%;
  height: 20.625em;
  top: 0;
  left: 0;
}

.grid-2 .tile-2 {
  width: 25%;
  height: 20.625em;
  border-left: 4px #ffffff solid;
  top: 0;
  left: 25%;
}

.grid-2 .tile-3 {
  width: 25%;
  height: 41.25em;
  border-left: 4px #ffffff solid;
  top: 0;
  left: 50%;
}

.grid-2 .tile-4 {
  width: 25%;
  height: 41.25em;
  border-left: 4px #ffffff solid;
  top: 0;
  right: 0;
}

.grid-2 .tile-5 {
  width: 50%;
  height: 20.625em;
  top: 20.625em;
  left: 0;
}

#more-trigger {
  width: 100%;
  padding: 1.250em 0;
  background-color: #666666;
  text-align: center;
  -webkit-transition: 0.3s false false;
  -moz-transition: 0.3s false false false;
  -o-transition: 0.3s false false false;
  transition: 0.3s;
}

#more-trigger h3 {
  margin: 0;
  color: #ffffff;
}

#more-trigger:hover {
  background-color: #ff6f63;
}

/************* Homepage Client Logos Styles *************/
.client-list {
  width: 70%;
  margin: 0 auto;
  padding: 6.25em 0 3.125em 0;
  text-align: center;
}

.client-logo {
  width: 25%;
  display: inline-block;
  padding: 0 2%;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.client-logo img {
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/************* Project Page Styles *************/
.content-wrap {
  background: #ffffff;
  position: relative;
  z-index: 4;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.write-up {
  padding: 3.125em 0;
  position: relative;
}

.write-up > p:last-of-type {
  margin-bottom: 0 !important;
}

.desktop article > .eye-candy:first-child {
  position: fixed;
  z-index: 3;
  top: 5em;
  left: 0;
}

.eye-candy {
  width: 100%;
  position: relative;
  z-index: 1;
}

.eye-candy a[rel="prev"],
.eye-candy a[rel="next"] {
  width: 3em;
  height: 3em;
  display: block;
  position: absolute;
  z-index: 5;
  top: 50%;
  -webkit-transform: translateY(-3em);
  -moz-transform: translateY(-3em);
  -ms-transform: translateY(-3em);
  -o-transform: translateY(-3em);
  transform: translateY(-3em);
}

.eye-candy a[rel="prev"] span:first-child,
.eye-candy a[rel="next"] span:first-child {
  display: none;
}

.eye-candy a[rel="prev"] span:not(:first-child),
.eye-candy a[rel="next"] span:not(:first-child) {
  border-right: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  width: 1.5em;
  height: 1.5em;
  display: block;
  position: absolute;
  z-index: 2;
  top: .5em;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out false;
  -o-transition: all 0.2s ease-out false;
  transition: all 0.2s ease-out;
}

.eye-candy a[rel="next"] {
  left: 1em;
}

.eye-candy a[rel="next"]:hover span:not(:first-child) {
  right: .75em;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in false;
  -o-transition: all 0.2s ease-in false;
  transition: all 0.2s ease-in;
}

.eye-candy a[rel="next"] span:not(:first-child) {
  right: .25em;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

.eye-candy a[rel="prev"] {
  right: 1em;
}

.eye-candy a[rel="prev"]:hover span:not(:first-child) {
  left: .75em;
  -webkit-transition: all 0.2s ease-in;
  -moz-transition: all 0.2s ease-in false;
  -o-transition: all 0.2s ease-in false;
  transition: all 0.2s ease-in;
}

.eye-candy a[rel="prev"] span:not(:first-child) {
  left: .25em;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.eye-candy-content {
  width: 100%;
  height: 37.500em;
  overflow: hidden;
  position: relative;
}

.no-mobile-play {
  display: block;
}

.video-substitute {
  display: none;
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background-size: cover;
  background-position: center;
}

.project-hero {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background-size: cover;
  background-position: center;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear false;
  -o-transition: all 0.1s linear false;
  transition: all 0.1s linear;
}

.eye-candy-video {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #333333;
}

.eye-candy-video iframe {
  width: 100%;
  height: 100%;
}

.eye-candy-text {
  text-align: center;
  display: table;
  z-index: 5;
  position: absolute;
  padding: 0;
  width: 100%;
  height: 100%;
}

.eye-candy-text .headline,
.eye-candy-text .subhead {
  width: 70%;
  margin: 0 auto;
}

.eye-candy-text .subhead {
  margin: 0.5em auto;
}

.eye-candy-text-inner {
  display: table-cell;
  vertical-align: middle;
  position: relative;
}

.photo-credit {
  position: absolute;
  bottom: 0.6em;
  right: 0.6em;
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.8em;
  color: #666666;
}

.related-project {
  width: 33%;
  float: left;
  border: 3px solid #ffffff;
  text-align: left;
  vertical-align: top;
  margin-bottom: 3.125em;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.related-project-tile {
  height: 18.750em;
  width: 100%;
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.related-project-image {
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  background-size: cover;
  background-position: center;
  -webkit-transition: 1s false false;
  -moz-transition: 1s false false false;
  -o-transition: 1s false false false;
  transition: 1s;
}

.related-project-image:hover {
  -webkit-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  -moz-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  -ms-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  -o-transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  transform: matrix(1.1, 0, 0, 1.1, 0, 0);
  cursor: pointer;
}

.related-project-text {
  width: 80%;
  padding-left: 4px;
  margin-top: 0.750em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.related-project-text a,
.related-project-text a:visited,
.related-project-text a:hover {
  color: #666666;
}

/************* About Page Styles *************/
.services {
  width: 100%;
  height: auto;
  background-image: url("_img/hq.jpg");
  background-size: cover;
  background-position: center;
  text-align: center;
}

.services .subhead {
  color: #ffffff;
}

.service {
  display: inline-block;
  vertical-align: top;
  width: 20%;
  margin: 0 3% 3.125em 3%;
}

.services-border {
  display: inline-block;
  width: 60%;
  height: 0;
  padding: 30% 0;
  border-radius: 50%;
  background: #ffffff;
}

.services-icon {
  display: inline-block;
  width: 70%;
  height: 0;
  padding: 35% 0;
  border-radius: 50%;
  background: #ff6f63;
  margin-top: -35%;
  position: relative;
}

.services-icon svg {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 15%;
  left: 15%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}

.service h3 {
  color: #ffffff;
  margin-top: 1em;
}

.two-column {
  width: 100%;
  text-align: left;
  padding-bottom: 3.125em;
}

.left-column {
  float: left;
  width: 50%;
  padding-right: 1.563em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.right-column {
  float: right;
  width: 50%;
  padding-left: 1.563em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.client-quote {
  margin-bottom: 3.125em;
}

.quotee {
  font-family: "Lato", Arial, sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1em;
  text-transform: uppercase;
  color: #ff6f63;
  margin-top: 0.875em;
}

.question {
  margin-bottom: 3.125em;
}

/************* Contact Page Styles *************/
#contact-form-wrapper {
  position: relative;
}

#contact-form {
  width: 100%;
  margin-bottom: 3.125em;
  -webkit-transition: 0.5s false false;
  -moz-transition: 0.5s false false false;
  -o-transition: 0.5s false false false;
  transition: 0.5s;
}

#contact-form input, #contact-form textarea {
  background-color: #eeeeee;
  font-family: Georgia, serif;
  font-style: italic;
  line-height: 2.313em;
  margin-bottom: 1.563em;
  color: #666666;
  padding: 1.000em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

#contact-form input.paddingFix {
  padding-bottom: 2.000em !important;
  /* To fix padding in IE9 */
}

#contact-form input {
  width: 48.5%;
  width: calc(50% - 0.7815em);
  width: -moz-calc(50% - 0.7815em);
  width: -webkit-calc(50% - 0.7815em);
}

#contact-form input.form-left {
  float: left;
}

#contact-form input.form-right {
  float: right;
}

#contact-form textarea {
  width: 100%;
  min-height: 200px;
  resize: none;
  overflow: auto;
}

#contact-form ::-webkit-input-placeholder {
  color: #666666;
  opacity: 0.5;
}

#contact-form :-moz-placeholder {
  color: #666666;
  opacity: 0.5;
}

#contact-form ::-moz-placeholder {
  color: #666666;
  /* no opacity - added by default */
}

#contact-form :-ms-input-placeholder {
  color: #666666;
  opacity: 0.5;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {
  color: transparent !important;
}

input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {
  color: transparent !important;
}

input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {
  color: transparent !important;
}

input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {
  color: transparent !important;
}

input:focus, textarea:focus {
  background-color: #eeeeee !important;
}

.form-cta-wrapper {
  width: 100%;
  text-align: center;
}

.form-cta {
  opacity: 0.7;
  display: inline-block;
  vertical-align: middle;
  width: 45px;
  height: 45px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: 0.3s false false;
  -moz-transition: 0.3s false false false;
  -o-transition: 0.3s false false false;
  transition: 0.3s;
}

.form-cta:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  cursor: pointer;
}

.form-cta:hover + span {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
  cursor: pointer;
}

.form-cta svg {
  width: 100%;
  height: 100%;
}

#captcha {
  display: none;
}

#contact-form label {
  display: none !important;
}

.invalid {
  background-color: rgba(255, 111, 99, 0.5) !important;
}

#success {
  text-align: center;
  padding: 0 1.563em;
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 0.5s false false;
  -moz-transition: 0.5s false false false;
  -o-transition: 0.5s false false false;
  transition: 0.5s;
}

#success-content {
  display: table;
  height: 100%;
}

.success-inner {
  display: table-cell;
  vertical-align: middle;
}

#success-content p {
  margin-bottom: 0 !important;
}

#success .subhead {
  margin-top: 0.313em;
}

#success .menu-cta-wrapper {
  padding: 1.563em 0;
}

#success .menu-cta-wrapper a {
  margin: 0 0.700em;
}

#submit {
  background: no-repeat;
  background-color: transparent !important;
  background-image: url("_img/send.png");
  background-size: 45px;
  color: #333333;
  margin-bottom: 0 !important;
  padding: 0 0 0 50px !important;
  text-align: right;
  width: auto !important;
}

#resubmit {
  cursor: pointer;
}

/************* Specialties Page Styles *************/
.specialty-row {
  width: 100%;
  height: 34.375em;
}

.specialty-row.gray {
  background-color: #eeeeee;
}

.specialty-type {
  width: 50%;
  height: 100%;
  text-align: center;
  padding: 0 6.250em;
  display: table;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.specialty-type .specialty-type-inner {
  display: table-cell;
  vertical-align: middle;
}

.specialty-type .specialty-type-inner h2 {
  margin-bottom: 0.313em;
}

.specialty-image {
  width: 50%;
  height: 100%;
  background-size: 95% auto;
  background-position: center;
  background-repeat: no-repeat;
}

.specialty-left {
  float: left;
}

.specialty-right {
  float: right;
}

/************* FlexSlider *************/
/* Browser Resets
*********************************/
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
  outline: none;
}

.slides,
.flex-control-nav,
.flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* FlexSlider Necessary Styles
*********************************/
.flexslider {
  margin: 0;
  padding: 0;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: 0.5s false false;
  -moz-transition: 0.5s false false false;
  -o-transition: 0.5s false false false;
  transition: 0.5s;
}

.flexslider .slides > li {
  display: none;
  -webkit-backface-visibility: hidden;
}

/* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {
  width: 100%;
  display: block;
}

.flex-pauseplay span {
  text-transform: capitalize;
}

.slides li {
  display: block;
  height: 37.5em;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Clearfix for the .slides element */
.slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .slides {
  display: block;
}

* html .slides {
  height: 1%;
}

/* No JavaScript Fallback */
/* If you are not using another script, such as Modernizr, make sure you
 * include js that eliminates this class on page load */
.no-js .slides > li:first-child {
  display: block;
}

/* FlexSlider Default Theme
*********************************/
.flexslider {
  position: relative;
  zoom: 1;
}

.flex-viewport {
  height: 37.5em;
  max-height: 2000px;
}

.loading .flex-viewport {
  max-height: 300px;
}

.flexslider .slides {
  zoom: 1;
}

.carousel li {
  margin-right: 5px;
}

/* Pause/Play */
.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}

.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 20px;
  display: inline-block;
  content: '\f004';
}

.flex-pauseplay a:hover {
  opacity: 1;
}

.flex-pauseplay a.flex-play:before {
  content: '\f003';
}

/* Control Nav */
.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: 1.563em;
  text-align: center;
}

.flex-control-nav li {
  margin: 0 4px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #cbcbcb;
  cursor: pointer;
  text-indent: -9999px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  -o-border-radius: 20px;
  border-radius: 20px;
  border: 2px #ffffff solid;
}

.flex-control-paging li a:hover {
  background: #666666;
}

.flex-control-paging li a.flex-active {
  background: #ff6f63;
  cursor: default;
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}

.flex-control-thumbs img {
  width: 100%;
  display: block;
  opacity: .7;
  cursor: pointer;
}

.flex-control-thumbs img:hover {
  opacity: 1;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}

.control-nav {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}

.control-nav > div {
  width: 13em;
  margin: 0 auto;
  background: gray;
  position: relative;
  z-index: 3;
}

.flex-direction-nav {
  width: 100%;
}

.flex-direction-nav li {
  width: 1.25em;
  height: 1.25em;
  position: absolute;
  z-index: 3;
  top: -2.8em;
}

.flex-direction-nav li:first-child {
  left: 0;
}

.flex-direction-nav li:last-child {
  right: 0;
}

.flex-direction-nav li a {
  display: block;
  width: 1.25em;
  height: 1.25em;
  position: relative;
  z-index: 4;
}

.flex-direction-nav li:first-child a:before,
.flex-direction-nav li:last-child a:before {
  position: absolute;
  top: 4px;
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  border-right: 0.2em solid #eaeaea;
  border-top: 0.2em solid #eaeaea;
  z-index: 5;
  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out false;
  -o-transition: all 0.15s ease-out false;
  transition: all 0.15s ease-out;
}

.flex-direction-nav li:first-child a:before {
  right: 0;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.flex-direction-nav li:last-child a:before {
  left: 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.flex-direction-nav li a:hover::before {
  border-color: #454545;
  -webkit-transition: all 0.25s linear;
  -moz-transition: all 0.25s linear false;
  -o-transition: all 0.25s linear false;
  transition: all 0.25s linear;
}

.flex-direction-nav li a:active::before {
  border-color: #ff6f63;
}

.flex-direction-nav li a span {
  text-indent: -999em;
  position: absolute;
}

/************* Responsive Styles *************/
@media screen and (min-width: 800px) {
  .desktop .content-wrap {
    margin-top: 42.313em;
    -webkit-transition: margin 0.2s linear;
    -moz-transition: margin 0.2s linear false;
    -o-transition: margin 0.2s linear false;
    transition: margin 0.2s linear;
  }
}

@media screen and (min-width: 500px) and (max-width: 800px) {
  .desktop .content-wrap {
    margin-top: 31em;
    -webkit-transition: margin 0.2s linear;
    -moz-transition: margin 0.2s linear false;
    -o-transition: margin 0.2s linear false;
    transition: margin 0.2s linear;
  }
}

@media screen and (max-width: 1100px) {
  #menu {
    width: 100%;
    padding-left: 4px;
    right: -100%;
  }
  #menu-top .logo {
    display: inline-block;
    float: left;
  }
}

@media screen and (max-width: 800px) {
  .headline {
    font-size: 3.000em;
  }
  .grid-1 {
    height: auto;
  }
  .grid-2 {
    height: auto;
  }
  .tile-1, .tile-2, .tile-3, .tile-4, .tile-5 {
    width: 100% !important;
    height: 20.625em !important;
    border-left: 0 none !important;
    border-right: 0 none !important;
    position: relative !important;
    float: left;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
  }
  .grid-2 .tile-1 {
    width: 50% !important;
    border-right: 4px #ffffff solid !important;
  }
  .grid-2 .tile-2 {
    width: 50% !important;
  }
  .grid-2 .tile-3 {
    height: 41.25em;
    width: 50% !important;
    border-right: 4px #ffffff solid !important;
  }
  .grid-2 .tile-4 {
    height: 41.25em;
    width: 50% !important;
  }
  .client-list {
    width: 100%;
  }
  .content-well {
    width: 100%;
    padding: 0 1.563em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .write-up {
    margin: 1.563em 0;
  }
  .write-up > p:last-of-type {
    margin-bottom: 0 !important;
  }
  .eye-candy-text-inner {
    padding: 0 1.563em;
  }
  .eye-candy a[rel="prev"],
  .eye-candy a[rel="next"] {
    width: 2em;
    height: 2em;
  }
  .eye-candy a[rel="prev"] span:not(:first-child),
  .eye-candy a[rel="next"] span:not(:first-child) {
    border-right: 4px solid #ffffff;
    border-bottom: 4px solid #ffffff;
    width: 1em;
    height: 1em;
  }
  .eye-candy a[rel="next"] span:not(:first-child) {
    right: .15em;
  }
  .eye-candy a[rel="prev"] span:not(:first-child) {
    left: .15em;
  }
  .no-mobile-play {
    display: none;
  }
  .video-substitute {
    display: block;
  }
  .services h3 {
    font-size: 1.000em;
  }
  .service {
    width: 28%;
    margin: 0 2% 3.125em 2%;
  }
  .services-border {
    display: inline-block;
    width: 70%;
    padding: 35% 0;
  }
  footer {
    text-align: center;
  }
  #footer-inner {
    width: auto;
    display: block;
    float: none;
  }
  footer .menu-cta-area {
    width: auto;
    padding: 1.563em 0 0 0;
    float: none;
    display: block;
  }
  .eye-candy-content, .flex-viewport, .slides li {
    height: 25.000em !important;
  }
  .related-project-tile {
    height: 12.500em;
  }
  .left-column, .right-column {
    float: none;
    width: 100%;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .specialty-row {
    height: auto;
  }
  .specialty-type {
    width: 100%;
    height: auto;
    padding: 3.125em 1.563em 0 1.563em;
    display: block;
    float: none;
  }
  .specialty-image {
    width: 100%;
    height: 25em;
    display: block;
    background-size: 80% auto;
    background-position: center 2.500em !important;
    float: none;
  }
  .specialty-left {
    float: none;
  }
  .specialty-right {
    float: none;
  }
  #submit {
    width: 45px !important;
    padding: 0 0 0 45px !important;
    text-indent: 45px;
  }
}

@media screen and (max-width: 500px) {
  body {
    font-size: 85%;
  }
  .headline {
    font-size: 2.375em;
  }
  #wrapper > div:nth-child(2) {
    margin-top: 5.368em;
  }
  .grid-2 .tile-1, .grid-2 .tile-2, .grid-2 .tile-3, .grid-2 .tile-4, .grid-2 .tile-5 {
    width: 100% !important;
    height: 20.625em !important;
    border-left: 0 none !important;
    border-right: 0 none !important;
  }
  .client-list {
    padding: 3.125em 0;
  }
  #menu {
    -webkit-transition: 0.3s false false;
    -moz-transition: 0.3s false false false;
    -o-transition: 0.3s false false false;
    transition: 0.3s;
  }
  #menu-icon {
    margin: 1.73em 1.563em;
  }
  #menu-top {
    height: 5.135em;
  }
  .menu-close-bar-1 {
    margin-top: 10px;
  }
  .homepage-statement {
    height: auto;
  }
  .desktop-item {
    display: none;
  }
  .mobile-item {
    display: block;
  }
  .grid-quote .tile-inner {
    padding: 1.563em;
  }
  .cta {
    display: block;
  }
  .menu-secondary-link {
    width: 100%;
  }
  .menu-cta-area a span {
    display: none !important;
  }
  #menu-icon::before,
  #menu-close::before {
    display: none;
  }
  .rule {
    margin: 0.938em auto 0.938em auto;
  }
  .client-logo {
    width: 33%;
    display: inline-block;
    padding: 0 2%;
    text-align: center;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .desktop .content-wrap {
    margin-top: 23.5em;
    -webkit-transition: margin 0.2s linear;
    -moz-transition: margin 0.2s linear false;
    -o-transition: margin 0.2s linear false;
    transition: margin 0.2s linear;
  }
  .eye-candy-text .headline, .eye-candy-text .subhead {
    width: 85%;
  }
  .eye-candy a[rel="prev"],
  .eye-candy a[rel="next"] {
    top: 62%;
  }
  .eye-candy-content, .flex-viewport, .slides li {
    height: 17.000em !important;
  }
  .control-nav {
    bottom: -1em;
  }
  img.alignleft, img.alignright {
    width: 100%;
    height: auto;
    float: none;
    margin: 0;
  }
  .related-wrap {
    display: block;
  }
  .related-project {
    width: 100%;
    display: block;
    margin-bottom: 3.125em;
  }
  .related-project-tile {
    border: 0 none;
  }
  .service {
    width: 45%;
    margin-bottom: 1.563em;
  }
  #contact-form input {
    width: 100%;
  }
  .specialty-image {
    height: 15em;
    background-size: 75% auto;
    background-position: center 1.563em !important;
  }
  .footer-link-mobile {
    display: inline-block;
  }
  .footer-link-desktop {
    display: none;
  }
}

@media screen and (max-width: 500px) and (orientation: landscape) {
  #rotate {
    display: block !important;
  }
  #wrapper {
    overflow-x: hidden !important;
    position: fixed !important;
  }
}