/* normalise.css */
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

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

td,
th {
  padding: 0;
}


/* colorbox.css */
/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden; -webkit-transform: translate3d(0,0,0);}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0; padding:0; margin:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/* 
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000; opacity: 0.9; filter: alpha(opacity = 90);}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;background:#000;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{border:5px solid #000; background:#fff;}
        #cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(../images/colorbox/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }
        
        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
        
        #cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(../images/colorbox/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(../images/colorbox/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}


/* dna-fonts.css */
@font-face {
  font-family: 'AvenirNext';
  src: url('../fonts/AvenirNext/AvenirNext-Regular.eot');
  src: url('../fonts/AvenirNext/AvenirNext-Regular?#iefix') format('embedded-opentype'),
       url('../fonts/AvenirNext/AvenirNext-Regular.woff') format('woff'),
       url('../fonts/AvenirNext/AvenirNext-Regular.ttf')  format('truetype'),
       url('../fonts/AvenirNext/AvenirNext-Regular.svg#AvenirNextRegular') format('svg');
       
  font-style:   normal;
  font-weight:  normal;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('../fonts/AvenirNext/AvenirNext-RegularItalic.eot');
  src: url('../fonts/AvenirNext/AvenirNext-RegularItalic?#iefix') format('embedded-opentype'),
       url('../fonts/AvenirNext/AvenirNext-RegularItalic.woff') format('woff'),
       url('../fonts/AvenirNext/AvenirNext-RegularItalic.ttf')  format('truetype'),
       url('../fonts/AvenirNext/AvenirNext-RegularItalic.svg#AvenirNextRegularItalic') format('svg');
       
  font-style:   italic;
  font-weight:  normal;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('../fonts/AvenirNext/AvenirNext-Medium.eot');
  src: url('../fonts/AvenirNext/AvenirNext-Medium?#iefix') format('embedded-opentype'),
       url('../fonts/AvenirNext/AvenirNext-Medium.woff') format('woff'),
       url('../fonts/AvenirNext/AvenirNext-Medium.ttf')  format('truetype'),
       url('../fonts/AvenirNext/AvenirNext-Medium.svg#AvenirNextMedium') format('svg');
       
  font-style:   normal;
  font-weight:  bold;
}

@font-face {
  font-family: 'AvenirNext';
  src: url('../fonts/AvenirNext/AvenirNext-MediumItalic.eot');
  src: url('../fonts/AvenirNext/AvenirNext-MediumItalic?#iefix') format('embedded-opentype'),
       url('../fonts/AvenirNext/AvenirNext-MediumItalic.woff') format('woff'),
       url('../fonts/AvenirNext/AvenirNext-MediumItalic.ttf')  format('truetype'),
       url('../fonts/AvenirNext/AvenirNext-MediumItalic.svg#AvenirNextMediumItalic') format('svg');
       
  font-style:   italic;
  font-weight:  bold;
}

/* dna-defaults.css */
* {outline: none !important; box-sizing: border-box; cursor: default}
html {font-size: 16px}
body {font-family: 'AvenirNext', sans-serif; line-height: 1; background-color: #eeeeee; color: #444444; letter-spacing: 0px}

p, dt, dd, li, address {line-height: 1.5rem}
p {margin: 0 0 20px 0}
address {font-style: normal; margin-bottom: 20px}

a {text-decoration: underline; cursor: pointer; color: #999999}
  a * {cursor: pointer}
  a[href="#"] {cursor: default}

ul {margin: 0 0 20px 15px; padding: 0}
  ul > li {margin: 0; padding: 0; list-style: disc}

ol {margin: 0 0 20px 20px; padding: 0}
  ol > li {margin: 0; padding: 0; list-style: decimal}

ul.no-list {margin: 0; padding: 0}
  ul.no-list > li {list-style: none; background: none; margin: 0; padding: 0}

p:last-child, ul:last-child,
ol:last-child, dl:last-child,
address:last-child {margin-bottom: 0 !important;}

strong {font-weight: bold}
em {font-style: italic}

h2, h3, h4,
h2 a, h3 a, h4 a,
.h1, .h2, .h3, .h4,
.h1 a, .h2 a, .h3 a, .h4 a {font-weight: normal; color: #999999;}
h1, .h1,
h1 a, .h1 a {font-size: 2.75rem; line-height: 3rem; text-decoration: none}
h2, .h2,
h2 a, .h2 a {font-size: 1.45rem; margin: 0; line-height: 1.85rem; text-decoration: none; margin-bottom: 20px;}
h3, .h3,
h3 a, .h3 a {text-decoration: none}
h4, .h4,
h4 a, .h4 a {text-decoration: none}

.h1 .modifier,
.h1 a .modifier {color: #444444;}
h2 .modifier, .h2 .modifier,
h2 a .modifier, .h2 a .modifier {color: #444444;}
h3 .modifier, .h3 .modifier,
h3 a .modifier, .h3 a .modifier {color: #444444;}
h4 .modifier, .h4 .modifier,
h4 a .modifier, .h4 a .modifier {color: #444444;}

h2.large {font-size: 2.75rem; line-height: 3rem; color: #444444; margin-bottom: 30px;}

.sections {overflow: hidden}
  .sections > .section {float: left; margin: 0 2% 20px 0}
  
    .sections > .section-1-1 {float: none; width: 100%; margin-right: 0}
    
    .sections > .section-1-2 {width: 49%}
    
    .sections > .section-1-3 {width: 32%}
    .sections > .section-2-3 {width: 66%}
    
    /* .sections > .section-1-4 {width: 23.5%} */
    .sections > .section-3-4 {width: 74.5%}

    .sections > .section-1-5 {width: 18%}
    .sections > .section-2-5 {width: 38%}
    .sections > .section-3-5 {width: 60%}
    .sections > .section-4-5 {width: 80%}

    .sections > .section-left {float: left; margin-right: 2%;}
    .sections > .section-right {float: right; margin-right: 0;}

  .sections > .section-last {margin-right: 0 !important}
  
  .sections-content > .section {margin-bottom: 0}

  html.js .page-section {position: relative; opacity: 0; top: 100px; transition: all 1s;}
  html.js .page-section.active {opacity: 1; top: 0;}

  .image {position: relative}
    .image a {display: block}
    .image img,
    .image a img {display: block; width: 100%; height: auto; float: none}

    img.image-hidden {position: absolute; display: block; width: 100%; height: auto; left: 0; top: 0; z-index: -1}
  
  .image-preserve-width img,
  .image-preserve-width a img {max-width: 100%; width: auto}

  .background img {visibility: hidden}


  .button,
  .field-submit input {}

  .button:hover,
  .field-submit input:hover {}

/* dna-menu.css */
#nav-inner::-webkit-scrollbar {display: none !important}
#nav-inner::-moz-scrollbar {display: none !important}
#nav-inner::-o-scrollbar {display: none !important}
#nav-inner::scrollbar {display: none !important}

.menu-toggle-open {position: fixed; transition: all 0.5s; right: 120px; top: 60px; z-index: 10000; width: 30px; height: 20px; background: transparent url(../images/menu.png) 0 0 no-repeat; background-size: 30px 20px; display: block; transition: all 0.5s; -webkit-filter: invert(100%); filter: invert(100%); cursor: pointer;}
.menu-toggle-open:hover {transform: rotate(90deg); transform-origin: center;}
body.home .menu-toggle-open {-webkit-filter: invert(0); filter: invert(0);}
body.main-active .menu-toggle-open {-webkit-filter: invert(100%); filter: invert(100%);}

nav {position: fixed; left: 100%; top: 0; width: 100%; transition: left 1s ease-in-out; background-color: #424242; z-index: 10001; height: 100%}
  nav * {color: #ccc; font-weight: normal; letter-spacing: 0}
  nav a {color: #ccc; transition: color 0.5s;}
  nav a:hover {color: #fff}
body.nav-active nav {left: 0}
  nav #nav-inner {max-width: 1230px; padding: 50px 25px; margin: 0 auto; overflow: hidden; height: 100%; -webkit-overflow-scrolling: touch; overflow-y: auto;}
  nav #nav-inner:hover {}
    nav #nav-inner .menu-top {float: none; clear: both}
      nav #nav-inner .menu-top h1 {margin-bottom: 40px}
        nav #nav-inner .menu-top h1 a {color: #fff; font-weight: bold !important; font-size: 2.75rem}
      nav #nav-inner .menu-top .menu-toggle-close {transition: all 0.5s; position: absolute; top: 60px; right: 120px; width: 21px; height: 21px; cursor: pointer; background: transparent url(../images/close.png) 0 0 no-repeat; background-size: 21px 21px}
      nav #nav-inner .menu-top .menu-toggle-close:hover {transform: rotate(90deg); transform-origin: center;}

    nav #nav-inner ul {margin: 0; padding: 0}
    nav #nav-inner ul li {margin: 0; padding: 0; list-style: none}
    nav #nav-inner ul li a {text-decoration: none}

    nav #nav-inner .menu-right {float: right}
      nav #nav-inner .menu-right .menu-main {margin-bottom: 80px;}
        nav #nav-inner .menu-right .menu-main .menu-main-menu-container {}
          nav #nav-inner .menu-right .menu-main .menu-main-menu-container ul {text-align: right}
            nav #nav-inner .menu-right .menu-main .menu-main-menu-container ul li {margin-bottom: 15px;}
              nav #nav-inner .menu-right .menu-main .menu-main-menu-container ul li a {font-size: 2.62rem; font-weight: bold; line-height: 1}
      nav #nav-inner .menu-right .menu-secondary {}
        nav #nav-inner .menu-right .menu-secondary .menu-secondary-menu-container {}
          nav #nav-inner .menu-right .menu-secondary .menu-secondary-menu-container ul {text-align: right}
            nav #nav-inner .menu-right .menu-secondary .menu-secondary-menu-container ul li {margin-bottom: 10px;}
              nav #nav-inner .menu-right .menu-secondary .menu-secondary-menu-container ul li a {font-size: 1.5rem; font-weight: normal}
    nav #nav-inner .menu-left {float: left}
      nav #nav-inner .menu-left .menu-tertiary {}
        nav #nav-inner .menu-left .menu-tertiary .menu-tertiary-menu-container {}
          
          nav #nav-inner .menu-left .menu-tertiary .menu-tertiary-menu-container a {font-weight: normal; font-size: 0.875rem; line-height: 1}

          nav #nav-inner .menu-left .menu-tertiary ul.top-level {overflow: hidden}
            nav #nav-inner .menu-left .menu-tertiary ul.top-level > li {float: left; margin-right: 90px; width: 200px}
            nav #nav-inner .menu-left .menu-tertiary ul.top-level > li:last-child {margin-right: 0;}
              nav #nav-inner .menu-left .menu-tertiary ul.top-level > li > a,
              nav #nav-inner .menu-left .menu-tertiary ul.top-level > li > span {font-size: 1.5rem; line-height: 2.06rem; margin-bottom: 30px; display: block; cursor: default;}
          nav #nav-inner .menu-left .menu-tertiary ul.second-level {}
            nav #nav-inner .menu-left .menu-tertiary ul.second-level > li {margin-bottom: 5px;}
              nav #nav-inner .menu-left .menu-tertiary ul.second-level > li > a,
              nav #nav-inner .menu-left .menu-tertiary ul.second-level > li > span {cursor: default;}
          nav #nav-inner .menu-left .menu-tertiary ul.third-level {margin-left: 20px; display: none}
            nav #nav-inner .menu-left .menu-tertiary ul.third-level > li {}
              nav #nav-inner .menu-left .menu-tertiary ul.third-level > li > a {cursor: pointer;}
              nav #nav-inner .menu-left .menu-tertiary ul.third-level > li:last-child > a {margin-bottom: 20px;}

    nav #nav-inner .menu-bottom {float: none; clear: both; overflow: hidden; padding: 35px 10px}
      nav #nav-inner .menu-bottom a {display: block; text-decoration: none}
      nav #nav-inner .menu-bottom .phone {float: left; font-size: 18px; line-height: 1}
      nav #nav-inner .menu-bottom .email {float: right; text-align: right; font-size: 18px; line-height: 1}


nav #menu-secondary-menu a[href="#"] {color: #575757 !important; position: relative;}
  nav #menu-secondary-menu li:first-child a[href="#"]:before {content: "coming soon"; position: absolute; top: -5px; right: 0; font-size: 10px; color: #575757; line-height: 1}


@media(max-width: 1065px){
  nav #nav-inner .menu-left .menu-tertiary ul.top-level > li {float: left; margin-right: 50px; max-width: 187px}
}

@media(max-width: 935px){
  nav #nav-inner .menu-left .menu-tertiary ul.top-level > li {float: none; margin: 0 0 30px 0; max-width: none}
}

@media(max-width: 740px){
  .menu-toggle-open {right: 10px; top: 10px;}
  nav #nav-inner .menu-top .menu-toggle-close {right: 10px; top: 10px;}
  .header-curtain .home-header .easter_egg {left: 10px !important; top: 10px !important;}

  nav #nav-inner .menu-left .menu-tertiary ul.third-level {display: block}

  .header-curtain .home-header .bottom-buttons {bottom: 10px !important;}
  .header-curtain .home-header .bottom-buttons .phone-reveal {padding-left: 10px !important;}
  .header-curtain .home-header .bottom-buttons .email-reveal {padding-right: 10px !important;}
}

@media(max-width: 650px){
  nav #nav-inner .menu-left {width: 48%; margin-right: 4%;}
  nav #nav-inner .menu-right {width: 48%}
}

@media(max-width: 600px){

}

@media(max-width: 480px){
  nav #nav-inner .menu-left {float: none; margin: 0; width: 100%}
  nav #nav-inner .menu-right {float: none; margin: 0 0 35px 0; width: 100%}

  nav #nav-inner .menu-right .menu-main .menu-main-menu-container ul,
  nav #nav-inner .menu-right .menu-secondary .menu-secondary-menu-container ul {text-align: left}

  nav #nav-inner .menu-bottom .phone,
  nav #nav-inner .menu-bottom .email {float: none; text-align: left; width: auto; margin: 0;}
  nav #nav-inner .menu-bottom .phone {margin: 0 0 10px 0;}
}

/* dna.css */
.header-curtain {}
  .header-curtain .home-header {width: 100%; position: relative}
    .header-curtain .home-header .slider {height: 100%; background-color: #eeeeee; display: none}
    .header-curtain .home-header .slider.active {display: block}
      .header-curtain .home-header .slider ul.slides {margin: 0; padding: 0; height: 100%; overflow: hidden;}
        .header-curtain .home-header .slider ul.slides li.slide {filter: brightness(85%); list-style: none; padding: 0; margin: 0; height: 100%; opacity: 0; position: absolute; width: 100%; height: 100%; top: 0; left: 0; transition: opacity 2s}
        .header-curtain .home-header .slider ul.slides li.slide.active {opacity: 1}
          .header-curtain .home-header .slider ul.slides li.slide img {display: none}
    .header-curtain .home-header .large-title {position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); width: 480px; height: 150px; transition: all 0.5s; text-indent: 100%; overflow: hidden; background: transparent url(../images/el-logo-large-white.png) 0 0 no-repeat; background-size: 480px 150px;}
    
    .header-curtain .home-header .easter_egg {display: block; position: absolute; top: 60px; left: 120px; color: #fff; font-size: 1.5rem; width: 30px; text-align: center; transition: all 0.5s;}
    .header-curtain .home-header .easter_egg:hover {top: 50px;}
    .header-curtain .home-header .bottom-buttons {position: absolute; bottom: 78px; width: 100%; overflow: hidden; text-align: center; transition: all 0.5s;}
      .header-curtain .home-header .bottom-buttons .phone-reveal {float: left; color: #fff; padding-left: 120px; transition: all 0.5s;}
        .header-curtain .home-header .bottom-buttons .phone-reveal .icon {opacity: 1; transition: opacity 0.5s; float: left; height: 35px; line-height: 35px; width: 13px; background: transparent url(../images/slider-plus.png) 0 50% no-repeat; background-size: 13px 13px; cursor: pointer}
        .header-curtain .home-header .bottom-buttons .phone-reveal .text {float: right; opacity: 0; transition: opacity 0.5s; height: 35px; line-height: 35px; cursor: pointer}
          .header-curtain .home-header .bottom-buttons .phone-reveal .text a {display: block; text-decoration: none; color: #fff;}
        .header-curtain .home-header .bottom-buttons .phone-reveal:hover .text {opacity: 1}
        .header-curtain .home-header .bottom-buttons .phone-reveal:hover .icon {opacity: 0}
      .header-curtain .home-header .bottom-buttons .arrow {cursor: pointer; padding-top: 0; transition: all 0.5s; display: inline-block; width: 20px; height: 20px; background: transparent url(../images/slider-arrow.png) 0 50% no-repeat; background-size: 20px 20px;}
      .header-curtain .home-header .bottom-buttons .arrow:hover {padding-top: 10px; height: 30px;}
      .header-curtain .home-header .bottom-buttons .email-reveal {float: right; color: #fff; padding-right: 120px; transition: all 0.5s;}
        .header-curtain .home-header .bottom-buttons .email-reveal .icon {opacity: 1; transition: opacity 0.5s; float: right; height: 35px; line-height: 35px; width: 18px; background: transparent url(../images/slider-at.png) 0 50% no-repeat; background-size: 18px 17px; cursor: pointer}
        .header-curtain .home-header .bottom-buttons .email-reveal .text {float: left; opacity: 0; transition: opacity 0.5s; height: 35px; line-height: 35px; cursor: pointer}
          .header-curtain .home-header .bottom-buttons .email-reveal .text a {display: block; text-decoration: none; color: #fff;}
        .header-curtain .home-header .bottom-buttons .email-reveal:hover .text {opacity: 1}
        .header-curtain .home-header .bottom-buttons .email-reveal:hover .icon {opacity: 0}

.rest-of-site {padding-top: 55px}
body.home .rest-of-site {padding-top: 125px}

body.home .header-curtain {position: relative; padding-bottom: 0}
body.home .rest-of-site {position: relative; top: auto; width: 100%}
body.home.curtain .header-curtain {position: relative; padding-bottom: 100%}
body.home.curtain .rest-of-site {position: fixed; top: 0; z-index: -1}

  .header .header-inner {margin-bottom: 125px}
  body.page-id-50 .header .header-inner {margin-bottom: 55px}
  body.home .header .header-inner {margin-bottom: 125px; padding-top: 0}
    .header .header-inner .logo {margin: 0; font-size: 2.75rem; color: #444444; font-weight: bold; text-transform: lowercase}
      .header .header-inner .logo a {color: #444444; text-decoration: none}
      .header .header-inner .logo .title-modifier {font-weight: normal; color: #999999; display: inline-block; padding: 0; transition: all 0.5s}
      .header .header-inner .logo:hover .title-modifier {padding: 0 5px}

.page-section {margin-bottom: 160px;}
body.home .page-section {margin-bottom: 200px;}

.page-section.micro-width,
.page-section.tiny-width {margin-bottom: 80px}

.gmap {height: 400px; background-color: #ffffff; position: relative;}

.instagram-wrapper {max-width: 1200px; padding: 0 10px; margin: 0 auto;}

.sections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
}
@media screen and (max-width: 820px) {
  .sections-grid {
    grid-template-columns: 1fr;
  }
}
  .sections-grid .section {transition: padding 0.5s; cursor: pointer; padding: 10px 0 0 0;}
  .sections-grid .section * {color: #999999; font-size: 1rem; transition: all 0.5s}
  .sections-grid .section:hover,
  .sections-grid .section.active {padding: 0 0 10px 0;}
  .sections-grid .section:hover *,
  .sections-grid .section.active * {color: #444444;}
    .sections-grid .section .image {filter: grayscale(100%); transition: all 1s; margin-bottom: 5px;}
    .rest-of-site.filter-color .sections-grid .section .image {filter: grayscale(0%);}
    .sections-grid .section:hover .image,
    .sections-grid .section.active .image {filter: grayscale(0)}

    .sections-grid .section .data {display: none}

  .sections-grid h2,
  .sections-grid h3 {margin: 0 0 5px 0; line-height: 1rem}

  .content-reveal {padding: 70px 0; display: none}
    .content-reveal-inner {border-top: 1px solid rgba(153, 153, 153, 0.5); border-bottom: 1px solid rgba(153, 153, 153, 0.5); padding: 70px 0;}
      .content-reveal .sections {}
        .content-reveal .section {}

        /* PERSON */
          .content-reveal-person .section h3 {font-size: 1.125rem; color: #444444; margin: 0 0 5px 0; line-height: 1}
          .content-reveal-person .section h4 {font-size: 1.125rem; color: #999999; margin: 0 0 60px 0; line-height: 1}
          .content-reveal-person .section blockquote {font-size: 1.5rem; color: #444444; line-height: 2rem; margin: 0 0 25px 0; padding: 0;}
          .content-reveal-person .section .content {margin: 0 0 25px 0;}
          .content-reveal-person .section .content p {padding: 0; font-size: 0.875rem; color: #444444;}

  .section-person .image {background-color: #fff; padding-bottom: 71.3%; height: 0; position: relative;}
  .section-person .image img {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: opacity 2s;}
  .section-person .image.active-image img {opacity: 1}

  .section-person .data {padding: 20px 0; border-bottom: 1px solid #999999; margin-bottom: 20px;}
    .section-person .data .subtext {margin-bottom: 15px;}
    .section-person .data .content {margin-bottom: 15px;}
      .section-person .data .content p {font-size: 1.5rem; color: #444444; line-height: 2rem}
    .section-person .data blockquote {font-size: 0.875rem; color: #444444; margin: 0 0 15px 0; padding: 0;}
    .section-person .data .image {}
      .section-person .data .image img {}

        /* PROJECT */
        .content-reveal-project .gallery-slider {margin-bottom: 35px; position: relative;}
          .content-reveal-project .gallery-slider-inner {overflow: hidden; overflow-x: auto; width: 100%; height: 500px;}
            .content-reveal-project .gallery-slider ul {overflow: hidden; height: 100%; margin: 0; padding: 0;}
              .content-reveal-project .gallery-slider ul li {float: left; margin: 0 5px 0 0; height: 100%; padding: 0; list-style: none; position: relative;}
              .content-reveal-project .gallery-slider ul li:last-child {margin-right: 0;}
                .content-reveal-project .gallery-slider ul li img {visibility: hidden; display: block; max-width: 100%; height: auto;}
                .content-reveal-project .gallery-slider ul li .caption {position: absolute; bottom: 0; left: 0; width: 100%; text-align: center; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 10px 0;}
                .content-reveal-project .gallery-slider ul li .caption:empty {display: none}

          .content-reveal-project .gallery-heading {padding-left: 60px;}
            .content-reveal-project .gallery-heading h4 {font-size: 1.5rem; line-height: 1; color: #444444; margin: 0 0 10px 0; padding-left: 60px;}

          .content-reveal-project .gallery-slider .slider-nav {position: absolute; top: 50%; transform: translateY(-50%); width: 100%; left: 0;}
            .content-reveal-project .gallery-slider .slider-nav .prev,
            .content-reveal-project .gallery-slider .slider-nav .next {position: absolute; background: transparent url(../images/project-slider-arrow.png) 0 0 no-repeat; background-size: 26px 26px; width: 26px; height: 26px; transition: all 0.5s; cursor: pointer}
            .content-reveal-project .gallery-slider .slider-nav .prev {left: 15px; transform: rotate(180deg);}
            .content-reveal-project .gallery-slider .slider-nav .prev:hover {left: 10px;}
            .content-reveal-project .gallery-slider .slider-nav .next {right: 15px;}
            .content-reveal-project .gallery-slider .slider-nav .next:hover {right: 10px;}

            .content-reveal-project .gallery-slider .slider-nav .prev:hover,
            .content-reveal-project .gallery-slider .slider-nav .next:hover {}

            .content-reveal-project .secondary-content {padding-left: 60px;}

          .gallery-slider-mobile {}
            .gallery-slider-mobile .gallery-slider-inner {display: block; overflow: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch;}
              .gallery-slider-mobile ul {margin: 0; padding: 0; overflow: hidden}
                .gallery-slider-mobile ul li {max-width: 320px; float: left; margin: 0 5px 0 0; list-style: none; padding: 0; height: 228px}
                .gallery-slider-mobile ul li:last-child {margin-right: 0}
                  .gallery-slider-mobile ul li img {display: block; max-width: 100%; height: auto}

          .section-project .image {background-color: #fff; padding-bottom: 71.3%; height: 0; position: relative;}
          .section-project .image img {opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: auto; transition: opacity 2s;}
          .section-project .image.active-image img {opacity: 1}

          .section-project .data {padding: 30px 0;}
          .section-project .data .main-content {margin-bottom: 15px;}
          .section-project .data .secondary-content {}

          .video-slide video{
            object-fit: cover;
            width: 100%;
            height: 100%;
          }

      .load-archive {text-align: center; padding: 10px 0;}
      .load-archive a.load-more-proj {display: inline-block; padding-right: 20px; background: transparent url(../images/load-more.png) 100% 50% no-repeat; background-size: 10px 10px; color: #999999; text-decoration: none}

      .page-id-690 .page-section-0,
      .page-id-692 .page-section-0,
      .page-id-695 .page-section-0 {margin-bottom: 60px;}

      .archive-links {padding: 20px; text-align: right}
      .archive-links br {display: none !important}
        .archive-links a {display: inline-block; text-decoration: none; margin-right: 20px; transition: all 0.5s; line-height: 1}
        .archive-links a:hover,
        .archive-links a.active {color: #444444;}
        .archive-links a:last-child {margin-right: 0;}

/*.page-id-54 .project-row-wrapper {display: none}
.page-id-54 .project-row-wrapper:first-child {display: block}*/

/* MEDIA AND AWARDS */
.sections-media {}
  .sections-media .section-media {margin-bottom: 40px;}
    .sections-media .section-media .image {margin-bottom: 20px}
      .sections-media .section-media .image img {}
    .sections-media .section-media .content {}
      .sections-media .section-media .content p.date {color: #999; font-size: 0.875rem; line-height: 1; margin-bottom: 5px;}
      .sections-media .section-media .content h2 {color: #444; font-size: 0.875rem; font-weight: normal; line-height: 1; margin: 0;}

.media-area {}
  .media-area h2 {color: #444; margin: 0 0 30px 0}

.awards-area {}
  .awards-area h2 {color: #444; margin: 0 0 30px 0}
  .awards-area .sections-awards {margin-bottom: 80px;}
    .awards-area .sections-awards p.award-year-titles {border-bottom: 1px solid #a7a7a7; color: #444; margin: 0 0 30px 0; padding: 0 0 45px 0;}
    .awards-area .sections-awards .section-award {border-bottom: 1px solid #999; padding-bottom: 20px; text-decoration: none;}
    .awards-area .sections-awards a.section-award:hover {text-decoration: underline;}
      .awards-area .sections-awards .section-award {}
        .awards-area .sections-awards .section-award h3 {font-size: 0.875rem; line-height: 1; margin: 0 0 5px 0;}
        .awards-area .sections-awards .section-award p {margin-bottom: 10px; color: #444444;}

/* STUDIO JOURNAL */
.filter {margin-bottom: 40px;}
  .filter .filter-inner {}
    .filter ul {display: block; text-align: right}
      .filter ul li {display: inline-block; list-style: none; margin: 0 10px 0 0;}
      .filter ul li:last-child {margin-right: 0;}
        .filter ul li a {display: block; color: #999999; text-decoration: none}
        .filter ul li.active a {color: #444444;}

.sections-studio-journal {}
  .sections-studio-journal .section {position: relative}
    .sections-studio-journal .section .content {}
      .sections-studio-journal .section .content .date-cat {margin-bottom: 0; color: #999999 !important;}
  .sections-studio-journal .section a.read-more {display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-decoration: none; overflow: hidden; text-indent: 100%; font-size: 0}

body.single-post {}
  body.single-post .page-section .date-cat {color: #999999;}
  body.single-post .page-section h2 {font-size: 2.8rem; line-height: 3rem; color: #444444; margin: 0;}
  body.single-post .page-section h3 {font-size: 1.5rem; line-height: 1.8rem; color: #444444; margin: 0 0 25px 0;}

  body.single-post .page-section .image img {margin-bottom: 12px;}
  body.single-post .image-caption {font-style: italic; color: #999999;}

.author-share {overflow: hidden; padding-bottom: 95px; margin-bottom: 25px; border-bottom: 1px solid #999999;}
  .author-share .authors {float: left}
    .author-share .author {overflow: hidden;}
      .author-share .author .image {float: left; max-width: 46px; margin-right: 15px;}
        .author-share .author .image img {}
      .author-share .author .content {float: left}
        .author-share .author .content p {color: #999999}
          .author-share .author .content p .author-name {color: #444444;}
          .author-share .author .content p .position {}
  .author-share .share {float: right}
    .author-share .share p {text-align: right; color: #999999}
      .author-share .share p a {text-decoration: none}

  .posts-nav {overflow: hidden}
    .posts-nav a {display: block; color: #999999; font-size: 1rem; line-height: 1.3rem; text-decoration: none; max-width: 150px}
      .posts-nav a span {display: block}
      .posts-nav a .date {}
      .posts-nav a .title {color: #444444;}
    .posts-nav a.next-post {float: left}
    .posts-nav a.prev-post {float: right; text-align: right}

/* CUSTOM */
body.home h2 {margin-bottom: 15px;}
body.home .page-section-0 {margin-bottom: 125px;}
  body.home .page-section-0 p {font-size: 1.5rem; line-height: 1.8rem}
body.home .page-section-7 h2 {margin-bottom: 70px;}
body.home .page-section-8 .h1 {background: transparent url(../images/project-arrow.png) 90% 85% no-repeat; background-size: 24px 24px;}
body.home .page-section-8 .sections .section-2 a {display: block}

.page-id-50 .page-section-2 h2 {margin-bottom: 15px;}

.page-id-56 {}
  .page-id-56 .page-section-0 .sections-0 {position: relative}
    .page-id-56 .page-section-0 .sections-0 .section {overflow: hidden; height: 430px;}
      .page-id-56 .page-section-0 .sections-0 .contact_info {position: absolute; left: 0; top: 30px; z-index: 2000;}
        .page-id-56 .page-section-0 .sections-0 .contact_info p,
        .page-id-56 .page-section-0 .sections-0 .contact_info a {font-size: 1.5rem; text-decoration: none; color: #444; line-height: 1.8rem}
        .page-id-56 .page-section-0 .sections-0 .contact_info p {margin-bottom: 40px;}
      .page-id-56 .page-section-0 .sections-0 .gmap {position: absolute; right: 0; top: 0; width: 100%; max-width: 65%;}

  .page-id-56 .page-section-1 h2 {margin-bottom: 40px;}

  .page-id-157 .page-section-0 {margin-bottom: 100px;}
    .page-id-157 .page-section-0 p {color: #444444;}

  .page-id-54 .page-section .section-1-5 p .modifier {color: #999999;}

  .page-id-875 .header-inner {margin-bottom: 0}
  .project-map-wrapper {position: absolute; top: 0; left: 0; width: 100%; z-index: -1; height: 100vh;}
  #map-canvas {height: 100%; background-color: #ffffff}
  .page-id-875 #footer {position: absolute; top: 100%; left: 0; width: 100%}

  #map-canvas span.map-load,
  .gmap span.map-load {display: block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); color: #999; font-size: 2rem}
/* CUSTOM */

/* FORMS */
.gform_wrapper {}
  form label,
  form br,
  form p:empty {display: none !important}

  .gform_wrapper .validation_error,
  .gform_wrapper .validation_message {display: none !important}

  .gform_wrapper ul {margin: 0; padding: 0; overflow-x: hidden}
    .gform_wrapper ul li,
    .mc-field-group {margin: 0 0 25px 0; padding: 0; list-style: none}
      .gform_wrapper ul li .ginput_container_text input,
      .gform_wrapper ul li .ginput_container_email input,
      .gform_wrapper ul li .ginput_container_textarea textarea,
      .mc-field-group input {width: 100%; float: none; border: none; border-bottom: 1px solid rgba(153, 153, 153, 0.5); transition: all 0.5s; height: 35px; font-family: 'AvenirNext'; font-size: 1rem; background: none !important; padding: 5px 0;}
      .gform_wrapper ul li .ginput_container_text input:focus,
      .gform_wrapper ul li .ginput_container_email input:focus,
      .gform_wrapper ul li .ginput_container_textarea textarea:focus,
      .mc-field-group input:focus {border-bottom: 1px solid rgba(68, 68, 68, 1);}
      .gform_wrapper ul li .ginput_container_textarea textarea {resize: none}
      .gform_wrapper ul li .ginput_container_textarea textarea:focus {height: 100px;}

      .gform_wrapper ul li#field_2_1,
      .gform_wrapper ul li#field_2_2,
      .mc-field-group:first-child,
      .mc-field-group:nth-child(2n) {float: left; width: 49%;}

      .gform_wrapper ul li#field_2_1,
      .mc-field-group:first-child {margin-right: 2%;}

      .gform_wrapper .gform_footer,
      .form-button {text-align: right}
      .gform_wrapper .gform_footer input.gform_button,
      .form-button input {border: none; background: transparent url(../images/button-submit.png) 100% 50% no-repeat; background-size: 12px 12px; padding: 0 30px 0 0; font-family: 'AvenirNext'; font-size: 1.5rem; color: #444444; display: inline-block; transition: all 0.5s}
      .gform_wrapper .gform_footer input.gform_button:hover,
      .form-button input:hover {background-position: 95% 50%;}

      .gform_wrapper .gfield_error input,
      .gform_wrapper .gfield_error textarea {color: #800; border-bottom: 1px solid #800 !important;}

.accordion {}
  .accordion.remove-points ol,
  .accordion.remove-points ul{
    margin-left: 0;
  }
  .accordion.remove-points ol li,
  .accordion.remove-points ul li{
    list-style: none;
  }
  .accordion ol {margin-left: 28px}
  .accordion ul {}
    .accordion ol > li,
    .accordion ul > li {margin-bottom: 15px}
    .accordion ol > li {font-size: 1.5rem; color: #999999;}
    .accordion ol > li.active {color: #444444;}
      .accordion ol > li > h3,
      .accordion ul > li > h3 {margin: 0; font-size: 1.5rem; color: #999999; cursor: pointer;}
      .accordion ol > li.active > h3,
      .accordion ul > li.active > h3 {color: #444444;}
      .accordion ol > li > .content,
      .accordion ul > li > .content {margin: 0; padding: 12px 0 20px 0; display: none; font-size: 0.875rem; color: #000;}

.infobox-title,
.infobox-location,
.infobox-desc {display: block}
.infobox-title {font-weight: bold; font-size: 1rem}
.infobox-location {font-weight: bold}
.infobox-desc {}

#footer {background-color: #444444;}

#footer p,
#footer a,
#footer li {color: #cccccc; font-size: 0.75rem; text-decoration: none; transition: all 0.5s;}
#footer p:hover,
#footer a:hover,
#footer li:hover {color: #ffffff;}

  #footer-inner {padding: 60px 0;}

    #footer .sections,
    #footer .sections .section {margin-bottom: 0;}
      
      #footer .item-1 {}
        #footer .item-1 p {font-weight: bold; color: #fff !important; font-size: 1.5rem !important; text-transform: lowercase; transition: all 0.5s;}
        #footer .item-1 p:hover {font-size: 1.7rem !important}

  .back-top {background: transparent url(../images/back-top.png) 50% 50% no-repeat; background-size: 20px 20px; height: 40px; width: 40px; position: fixed; bottom: 30px; right: 30px; opacity: 0; transition: all 1s; cursor: pointer; filter: invert(100%)}
  .back-top:hover {bottom: 35px;}
  .page-id-875 .back-top{ display: none !important; }

  .footer-visible .back-top {filter: invert(0);}

  .not-top .back-top {opacity: 1}







  .video-banner{
    width: 100vw;
    height: 100vh;
    position: relative;
  }
  .header-curtain .video-banner .large-title{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 480px;
    height: 150px;
    transition: all 0.5s;
    text-indent: 100%;
    overflow: hidden;
    background: transparent url(../images/el-logo-large-white.png) 0 0 no-repeat;
    background-size: 480px 150px;
  }
  .video-banner video{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  #desktop-video{

  }
  #mobile-video{
    display: none;
  }
  @media screen and (max-width: 820px) {
    #desktop-video {
      display: none;
    }
    #mobile-video {
      display: block;
    }
    .header-curtain .video-banner .large-title{
      width: 240px;
      height: 75px;
      background-size: 240px 75px;
    }
  }


  #autoplay-modal{
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
  }
  .autoplay-modal-inner{
    padding: 30px;
    text-align: center;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .autoplay-modal-button{
    margin-top: 30px;
  }


  .matrix-data{
    line-height: 1.1em;
    text-transform: uppercase;
    opacity: 0.6;
  }

  .back-to-journal-link{
    text-align: center;
    margin-bottom: 50px;
  }

  .hide{
    display: none !important;
  }

  .award-thumbnail{
    max-width: 100%;
    width: 100%;
    height: 280px;
    margin: 20px 0 30px 0;
  }
  .award-thumbnail img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .animated-gallery-images{
    display: none;
  }

  .image > p{
    display: none;
  }

  .animated-gallery-image{
    transition: 0.3s;
  }

/* dna-global-overrides.css */
.header-inner,
#footer-inner,
.constrained,
.small-width,
.tiny-width,
.micro-width,
.sections-grid-people,
.sections-grid-projects,
.content-reveal-person .sections,
.content-reveal-project .gallery-heading,
.content-reveal-project .gallery-slider,
.content-reveal-project .sections {max-width: 1200px; padding-left: 10px; padding-right: 10px; margin-left: auto; margin-right: auto;}

.small-width {max-width: 970px}
.tiny-width {max-width: 785px}
.micro-width {max-width: 590px}

.content-small .section-inner {max-width: 600px}

.sections-content .padding-top {padding-top: 100px;}
.sections-content .padding-left {padding-left: 55px;}
.sections-content .padding-right {padding-right: 55px;}
.sections-content .padding-left-large {padding-left: 110px;}

.align-center {text-align: center}
.align-left {text-align: left}
.align-right {text-align: right}

.hr {display: block; height: 1px; overflow: hidden; background-color: #ccc; background-color: rgba(153, 153, 153, 0.5); margin: 0 0 50px 0; padding: 0; font-size: 0;}
.hr:last-child {margin-bottom: 0;}

/* dna-responsive.css */
@media(max-width: 960px){
  body.home .header-curtain {position: relative !important; padding-bottom: 0 !important}
  body.home .rest-of-site {position: relative !important; top: auto !important; width: 100% !important}
}

@media(max-width: 820px){
  .sections > .section {float: none !important; width: 100% !important; margin-right: 0 !important; margin-bottom: 35px; text-align: left; padding: 0 !important;}
  .sections > .section-project {padding-bottom: 35px !important; border-bottom: 1px solid #ccc; max-width: calc(100vw - 40px);}

  .content-reveal {display: none !important}
  .section-person.active .data,
  .section-project.active .data {display: block !important}

  #footer .sections > .section {margin-bottom: 15px !important;}
  #footer .sections > .section:last-child {margin-bottom: 0 !important;}

  .section-person .image img {opacity: 1 !important}
}

@media(max-width: 700px){
  .page-id-56 .page-section-0 .sections-0 .section {height: auto}
  .page-id-56 .page-section-0 .sections-0 .contact_info {position: relative; float: none; width: 100%; margin: 0 0 35px 0; padding: 0; top: auto; left: auto;}
  .page-id-56 .page-section-0 .sections-0 .gmap {display: block; float: none; width: 100%; max-width: none; position: relative; height: 300px; margin: 0 0 35px 0; top: auto; left: auto;; right: auto;}

  .header-curtain .home-header .large-title {width: 240px; height: 75px; background-size: 240px 75px}

  .header-curtain .home-header .bottom-buttons .phone-reveal .text {opacity: 1}
  .header-curtain .home-header .bottom-buttons .phone-reveal .icon {opacity: 0}
  .header-curtain .home-header .bottom-buttons .email-reveal .text {opacity: 1}
  .header-curtain .home-header .bottom-buttons .email-reveal .icon {opacity: 0}
}

@media(max-width: 655px){
  /*.bottom-buttons {display: none}*/
}

@media(max-width: 530px){
  
}