/*!
Theme Name: undersass
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: undersass
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

undersass is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# xxxx Normalize - using bootstrap for this
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# xxxx Clearings
# xxxx Widgets
# Content
	xxxx ## Posts and pages
	xxxx ## Comments
# xxxx Infinite scroll
# Media
	## Captions
	## Galleries

--------------------------------------------------------------*/
/* @include transition(all,2s,ease-out); */
/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Roboto:900);
body,
button,
input,
select,
optgroup,
textarea {
  color: #939597;
  font-family: futura-pt, sans-serif;
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.4;
}

@media (max-width: 1200px) {
  body,
  button,
  input,
  select,
  optgroup,
  textarea {
    font-size: calc(1.025rem + 0.13333vw) ;
  }
}

h1, h2, h3, h4, h5, h6 {
  clear: both;
  font-weight: 400;
  color: #939597;
}

h1 mark, h2 mark, h3 mark, h4 mark, h5 mark, h6 mark {
  background: none;
  padding: 0;
}

h1 {
  font-size: 2.25rem;
}

@media (max-width: 1200px) {
  h1 {
    font-size: calc(1.25rem + 1.33333vw) ;
  }
}

h1.entry-title, h1.archive-title {
  font-size: 1.875rem;
  color: #A41E24;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 1em;
}

@media (max-width: 1200px) {
  h1.entry-title, h1.archive-title {
    font-size: calc(1.175rem + 0.93333vw) ;
  }
}

h1.archive-title {
  margin-left: 15px;
}

h2 {
  font-size: 1.875rem;
}

@media (max-width: 1200px) {
  h2 {
    font-size: calc(1.175rem + 0.93333vw) ;
  }
}

section h2 {
  color: #A41E24;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 1em;
}

section.pgrid h2 {
  color: #A41E24;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  margin-bottom: 1em;
  padding-top: .5em;
  border-top: 1px solid #8b8b8b;
}

p + h2 {
  margin-top: 1em;
}

@media (min-width: 768px) and (orientation: portrait) {
  p + h2 {
    margin-top: 0;
  }
}

h3 {
  font-size: 1.25rem;
  color: #231F20;
}

@media (max-width: 1200px) {
  h3 {
    font-size: calc(1.05rem + 0.26667vw) ;
  }
}

.intro h3 {
  color: #A41E24;
  text-transform: uppercase;
  letter-spacing: 0.11em;
}

h4 {
  font-size: 1.5rem;
  font-weight: 300;
  color: #231F20;
}

@media (max-width: 1200px) {
  h4 {
    font-size: calc(1.1rem + 0.53333vw) ;
  }
}

h5 {
  font-size: 1.375rem;
  font-weight: 300;
}

@media (max-width: 1200px) {
  h5 {
    font-size: calc(1.075rem + 0.4vw) ;
  }
}

h6 {
  font-size: 1.25rem;
  font-weight: 300;
}

@media (max-width: 1200px) {
  h6 {
    font-size: calc(1.05rem + 0.26667vw) ;
  }
}

.project-content h6 {
  font-size: 1.0625rem;
  text-transform: uppercase;
  color: #333;
}

@media (max-width: 1200px) {
  .project-content h6 {
    font-size: calc(1.0125rem + 0.06667vw) ;
  }
}

body {
  font-size: 1.3125rem;
}

@media (max-width: 1200px) {
  body {
    font-size: calc(1.0625rem + 0.33333vw) ;
  }
}

p + h2 {
  margin-top: 2em;
  margin-bottom: 0;
}

dfn, cite, em, i {
  font-style: italic;
}

blockquote {
  margin: 0 1.5em;
}

.quote blockquote {
  font-size: 1.5rem;
  color: #A41E24;
  margin: 2rem 0 1rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid #8b8b8b;
}

@media (max-width: 1200px) {
  .quote blockquote {
    font-size: calc(1.1rem + 0.53333vw) ;
  }
}

address {
  margin: 0 0 1.5em;
}

h2 + h3 {
  margin-top: -1.5em;
  margin-bottom: 1.4em;
}

/*--------------------------------------------------------------
## Rev-bands (we don't have any yet)
--------------------------------------------------------------*/
.rev-band h1, .rev-band h2, .rev-band h3, .rev-band h4, .rev-band h5, .rev-band h6, .rev-band ul, .rev-band ol, .rev-band address, .rev-band blockquote,
.rev-band p {
  color: white;
  text-shadow: 0px 0px 15px rgba(147, 149, 151, 0.6), 0px 0px 5px rgba(147, 149, 151, 0.6);
}

.rev-band a {
  color: white;
}

.rev-band a:visited {
  color: white;
}

.rev-band a:hover, .rev-band a:focus, .rev-band a:active {
  color: rgba(255, 255, 255, 0.5);
}

pre {
  background: #fff;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code, kbd, tt, var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 0.9375rem;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark, ins {
  background: #fff;
  text-decoration: none;
}

big {
  font-size: 125%;
}

pre {
  background: #fff;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code, kbd, tt, var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 0.9375rem;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark, ins {
  background: #fff;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  box-sizing: inherit;
}

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}

hr {
  background-color: black;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

img {
  height: auto;
  /* Make sure images are scaled correctly. */
  max-width: 100%;
  /* Adhere to container width. */
}

figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

figure .wp-block-image {
  margin: 0;
}

ul, ol {
  margin: 0 0 1.5em 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  margin-left: -1em;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 0.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 1.5em 1.5em;
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  border: 1px solid;
  border-radius: 3px;
  background: #231F20;
  color: white;
  font-size: 12px;
  font-size: 0.75rem;
  line-height: 1;
  padding: .6em 1em .4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
  background: #594f51;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Generic Nav Styles
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Sticky Nav
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Mobile Nav (mmenu)
--------------------------------------------------------------*/
.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

a {
  color: #A41E24;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

a:visited {
  color: #631216;
}

a:hover, a:focus, a:active {
  color: #939597;
  outline: 0;
  text-decoration: none;
}

.btn-link, #sequence-basic.seq .seq-button, .btn-link:link, #sequence-basic.seq .seq-button:link, .btn-link:visited, #sequence-basic.seq .seq-button:visited {
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -ms-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  display: inline-block;
  padding: 10px 15px;
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
  background: #A41E24;
  color: white !important;
  /* stop rev-band styles from chaning the color  */
  font-weight: 900;
  font-size: 1rem;
  font-family: futura-pt, sans-serif;
  margin: .5em 0 .75em 0;
  border: none;
}

.btn-link:after, #sequence-basic.seq .seq-button:after, .btn-link:link:after, #sequence-basic.seq .seq-button:link:after, .btn-link:visited:after, #sequence-basic.seq .seq-button:visited:after {
  margin: 0 0 0 5px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 90%;
  content: "\f101";
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.btn-link:hover, #sequence-basic.seq .seq-button:hover, .btn-link:link:hover, #sequence-basic.seq .seq-button:link:hover, .btn-link:visited:hover, #sequence-basic.seq .seq-button:visited:hover {
  text-decoration: none;
  background: #939597;
}

/*--------------------------------------------------------------
## Generic Nav Styles
--------------------------------------------------------------*/
nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
}

nav ul li {
  list-style: none;
  margin: 0;
  padding: 0;
  flex-grow: 1;
}

/*--------------------------------------------------------------
## Flyout Side Nav
--------------------------------------------------------------*/
#side-toggle {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  -ms-transition: all 0.35s ease-in-out;
  -o-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  background: white;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 5%;
  min-width: 60px;
  max-width: 65px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

#side-toggle .side-toggle-logo {
  display: block;
  position: absolute;
  top: -5px;
  font-size: 0;
  width: 100%;
}

#side-toggle .dz-static-bug {
  width: 100%;
}

#side-toggle .flyout-nav-toggle {
  font-size: 1.6875rem;
  color: grey;
  align-self: center;
}

@media (max-width: 1200px) {
  #side-toggle .flyout-nav-toggle {
    font-size: calc(1.1375rem + 0.73333vw) ;
  }
}

#side-nav {
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
  -webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2) #CCC;
  -moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2) #CCC;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2) #CCC;
  background: rgba(255, 255, 255, 0.9);
  position: fixed;
  z-index: 998;
  top: 0;
  left: -70%;
  width: 60%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  opacity: .2;
}

@media (min-width: 576px) {
  #side-nav {
    left: -50%;
    width: 45%;
  }
}

@media (min-width: 526px) and (max-width: 830px) and (orientation: landscape) {
  #side-nav {
    flex-direction: row;
    left: -90%;
    width: 85%;
    align-items: flex-start;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  #side-nav {
    flex-direction: column;
    left: -30%;
    width: 25%;
  }
}

#side-nav .logo-container {
  width: 100%;
  background: white;
  margin-bottom: 2vw;
  padding: 2vw;
}

@media (min-width: 526px) and (max-width: 830px) and (orientation: landscape) {
  #side-nav .logo-container {
    width: 33%;
    background: none;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  #side-nav .logo-container {
    width: 100%;
    background: white;
  }
}

#side-nav .dz-static-full {
  width: 100px;
  margin: 2vw 0 0 13%;
}

#side-nav .nav-container {
  margin: 0 0 0 18%;
  width: 80%;
}

@media (min-width: 526px) and (max-width: 830px) and (orientation: landscape) {
  #side-nav .nav-container {
    width: 50%;
    margin: 25px 0 0 8%;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  #side-nav .nav-container {
    margin: 0 0 0 18%;
  }
}

#side-nav ul#primary-menu {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

@media (min-width: 526px) and (max-width: 830px) and (orientation: landscape) {
  #side-nav ul#primary-menu {
    margin: 0 0 0 0%;
  }
}

#side-nav ul#primary-menu li {
  font-size: 1.6875rem;
  list-style: none;
  margin: 0 0 1vh 0;
  padding: 0;
  flex-grow: 1;
}

@media (max-width: 1200px) {
  #side-nav ul#primary-menu li {
    font-size: calc(1.1375rem + 0.73333vw) ;
  }
}

#side-nav ul#primary-menu li ul {
  display: block;
}

#side-nav ul#primary-menu li ul li {
  font-size: 1rem;
  text-transform: uppercase;
  margin: 0 0 .3em 1em;
  flex-grow: 1;
}

#side-nav .contact-link {
  display: block;
  font-size: 1.6875rem;
  margin: 0;
}

@media (max-width: 1200px) {
  #side-nav .contact-link {
    font-size: calc(1.1375rem + 0.73333vw) ;
  }
}

#side-nav.open {
  left: 0%;
  opacity: 1;
  -webkit-transition: left 0.7s ease-in-out;
  -moz-transition: left 0.7s ease-in-out;
  -ms-transition: left 0.7s ease-in-out;
  -o-transition: left 0.7s ease-in-out;
  transition: left 0.7s ease-in-out;
}

#side-toggle.hideme {
  left: -10%;
  opacity: 0;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.flyout-nav-closer {
  display: block;
  margin: 5vw 0 0 0%;
}

@media (min-width: 526px) and (max-width: 830px) and (orientation: landscape) {
  .flyout-nav-closer {
    position: absolute;
    top: 48vh;
    left: 12%;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .flyout-nav-closer {
    position: relative;
    margin: 5vw 0 0 0%;
  }
}

/*--------------------------------------------------------------
## logo-loader
--------------------------------------------------------------*/
#logo-loader {
  position: relative;
  background: white;
  position: fixed;
  z-index: 1998;
  top: 0;
  left: 0;
  width: 25%;
  min-width: 60px;
  height: 100vh;
  opacity: 1;
  text-align: center;
}

#logo-loader .dz-animated {
  position: relative;
  top: 40px;
  margin: 0 auto;
  width: 70%;
}

#logo-loader .flyout-nav-toggle-a {
  font-size: 1.6875rem;
  color: grey;
  display: block;
  position: relative;
  top: 40%;
  left: -250px;
}

@media (max-width: 1200px) {
  #logo-loader .flyout-nav-toggle-a {
    font-size: calc(1.1375rem + 0.73333vw) ;
  }
}

#logo-loader .loader-closer {
  display: block;
  position: relative;
  top: 55vh;
}

#logo-loader.open {
  left: 0%;
  opacity: 1;
  -webkit-transition: left 0.7s ease-in-out;
  -moz-transition: left 0.7s ease-in-out;
  -ms-transition: left 0.7s ease-in-out;
  -o-transition: left 0.7s ease-in-out;
  transition: left 0.7s ease-in-out;
}

#logo-loader.hideme {
  left: -10%;
  opacity: 0;
  -webkit-transition: all 0.7s ease-in-out;
  -moz-transition: all 0.7s ease-in-out;
  -ms-transition: all 0.7s ease-in-out;
  -o-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
}

.gs-dev-tools {
  z-index: 10000;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #fff;
  border-radius: 3px;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  clip-path: none;
  color: #000;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
# ACFlex Content
--------------------------------------------------------------*/
.no-top-padding {
  padding-top: 0 !important;
}

.no-bottom-padding {
  padding-bottom: 0 !important;
}

.no-padding {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.bg-colored {
  background: #f1f1f1;
}

.thick-border {
  border-top: 5px solid #cdcdcd;
}

.thin-border {
  border-top: 1px solid #cdcdcd;
}

@media (min-width: 576px) {
  .flex-content.bg-default .col-md-3,
  .flex-content.bg-default .col-md-4,
  .flex-content.bg-default .col-md-5,
  .flex-content.bg-default .col-md-6,
  .flex-content.bg-default .col-md-7,
  .flex-content.bg-default .col-md-8,
  .flex-content.bg-default .col-md-10,
  .flex-content.bg-default .col-md-12 {
    margin-top: 1em;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .row.no-top-padding {
    margin-top: 2em;
  }
}

/*--------------------------------------------------------------
# Optional Modules
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## BASIC
--------------------------------------------------------------*/
/**
 * Theme Name: Basic - simplified
 * Theme URL: http://sequencejs.com/themes/basic/
 *
  */
/* Google Web Font */
#sequence-basic.seq {
  position: relative;
  /* Dimensions */
  width: 100%;
  /* Center the Sequence container on the page */
  margin: 0 auto;
  padding: 0;
  /* Some basic styles */
  /* font-family: sans-serif; */
  height: 100vh;
}

#sequence-basic.seq .seq-ation,
#sequence-basic.seq .seq-screen,
#sequence-basic.seq .seq-canvas,
#sequence-basic.seq .seq-canvas > * {
  /* Reset the canvas and steps for better browser consistency */
  margin: 0;
  padding: 0;
  list-style: none;
}

#sequence-basic.seq .seq-preloader {
  background: #eaeaed;
}

#sequence-basic.seq .seq-canvas {
  /* Make the canvas the same dimensions as the container and prevent lines
   * from wrapping so each step can sit side-by-side */
  position: absolute;
  height: 100%;
  width: 100%;
  white-space: nowrap;
  /* Reset the font-size to remove 4px from :before and .title */
  font-size: 0;
  height: 100vh;
}

#sequence-basic.seq .seq-canvas > * {
  /* Make the steps the same size as the container and sit side-by-side */
  display: inline-block;
  zoom: 1;
  vertical-align: top;
  width: 100%;
  height: 100%;
  white-space: normal;
  text-align: center;
  color: white;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}

.sqstep img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}

#sequence-basic.seq .seq-canvas > *:before {
  /* Vertically align .seq-content */
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

#sequence-basic.seqx .seq-contentx {
  /* optional wrapper to add basic content styles */
  display: inline-block;
  vertical-align: middle;
  max-width: 720px;
  margin: 0 4%;
  /* Reset the font-size from 0 back to 16 */
  font-size: 16px;
}

#sequence-basic.seq .seq-pagination {
  position: absolute;
  z-index: 10;
  bottom: 20px;
  width: 100%;
  border: none;
  text-align: center;
}

#sequence-basic.seq .seq-pagination a {
  display: block;
  width: 100%;
  height: 100%;
}

#sequence-basic.seq .seq-pagination .seq-current {
  border-radius: 100%;
}

#sequence-basic.seq .seq-pagination > * {
  margin: 0 4px;
  padding: 0;
  display: inline-block;
  zoom: 1;
  width: 28px;
  height: 28px;
  cursor: pointer;
  background: none;
  border: white solid 2px;
  -webkit-transition-duration: .1s;
  transition-duration: .1s;
  -webkit-transition-property: background-color, border-radius;
  transition-property: background-color, border-radius;
  /* Image replacement */
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
}

#sequence-basic.seq .seq-button {
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-transition-duration: .25s;
  transition-duration: .25s;
  -webkit-transition-property: background-color, color;
  transition-property: background-color, color;
}

#sequence-basic.seq.seq-active {
  /* when JS is enabled */
  /* Hide anything that goes beyond the boundaries of the Sequence container */
  overflow: hidden;
}

#sequence-basic.seq.seq-active .seq-preloader,
#sequence-basic.seq.seq-active .seq-pagination {
  visibility: visible;
}

#sequence-basic.seq.seq-active .seq-preloader.seq-preloaded {
  visibility: hidden;
}

#sequence-basic.seq.seq-active .seq-preloader .seq-preload-circle {
  fill: white;
}

#sequence-basic.seq.seq-activeX .seq-contentX {
  /* Pull the content up a bit to account for the pagination */
  margin-top: -26px;
}

@-webkit-keyframes jelly {
  0% {
    -webkit-transform: translateZ(0) scale(0);
    transform: translateZ(0) scale(0);
  }
  40% {
    -webkit-transform: translateZ(0) scale(1.15);
    transform: translateZ(0) scale(1.15);
  }
  60% {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
  80% {
    -webkit-transform: translateZ(0) scale(1.05);
    transform: translateZ(0) scale(1.05);
  }
  100% {
    -webkit-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
}

@keyframes jelly {
  0% {
    -webkit-transform: translateZ(0) scale(0);
    -ms-transform: translateZ(0) scale(0);
    transform: translateZ(0) scale(0);
  }
  40% {
    -webkit-transform: translateZ(0) scale(1.15);
    -ms-transform: translateZ(0) scale(1.15);
    transform: translateZ(0) scale(1.15);
  }
  60% {
    -webkit-transform: translateZ(0) scale(1);
    -ms-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
  80% {
    -webkit-transform: translateZ(0) scale(1.05);
    -ms-transform: translateZ(0) scale(1.05);
    transform: translateZ(0) scale(1.05);
  }
  100% {
    -webkit-transform: translateZ(0) scale(1);
    -ms-transform: translateZ(0) scale(1);
    transform: translateZ(0) scale(1);
  }
}

#sequence-basic.seq .sq-step .seq-in {
  /* Animate in positions for content */
  -webkit-transition-duration: 1s;
  transition-duration: 1s;
}

#sequence-basic.seq .seq-in {
  /* Animate in positions for content */
}

#sequence-basic.seq .seq-in .seq-button {
  -webkit-animation-name: jelly;
  animation-name: jelly;
  -webkit-animation-duration: .5s;
  animation-duration: .5s;
}

#sequence-basic.seq .seq-out {
  /* Animate out positions for content */
}

#sequence-basic.seq .seq-out .seq-button {
  -webkit-transform: scale(1) translateZ(0);
  -ms-transform: scale(1) translateZ(0);
  transform: scale(1) translateZ(0);
}

@media only screen and (min-width: 600px) {
  #sequence-basic.seq {
    /* Make the container 16:9 but no bigger than 90% of the screen height */
    position: relative;
    height: auto;
    min-height: 420px;
    height: 100vh;
  }
  #sequence-basic.seq:before {
    /* Make an element a certain aspect ratio */
    display: block;
    content: "";
    width: 100%;
    padding-top: 75%;
  }
  #sequence-basic .seq-canvas {
    height: 100vh;
  }
  #sequence-basic.seq .seq-screen {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  #sequence-basic.seqX .seq-contentX {
    /* Pull the content up to account for the pagination */
    margin-top: -19px;
  }
  #sequence-basic.seq .seq-pagination > * {
    width: 20px;
    height: 20px;
  }
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Bootstrap Overrides
--------------------------------------------------------------*/
.container-fluid {
  width: 80%;
  margin-left: 60px;
  border: 1px solid transparent;
}

@media (min-width: 576px) {
  .container-fluid {
    width: 90vw;
    margin-left: 10vw;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .container-fluid {
    margin-left: 7vw;
  }
}

/*--------------------------------------------------------------
## Modula Elements
--------------------------------------------------------------*/
/*---------------*/
/***** fluid-up *****/
/*---------------*/
.modula .modula-item.effect-fluid-up .figc {
  background: rgba(0, 0, 0, 0.3) !important;
}

.modula .modula-items .modula-item.effect-fluid-up h2 {
  color: white;
  text-transform: uppercase;
}

.figc-inner h2 {
  border: none !important;
  padding-top: 0 !important;
}

.gform_confirmation_wrapper {
  background: #eeedef;
  padding: 10%;
}

/*--------------------------------------------------------------
## Shared Elements
--------------------------------------------------------------*/
.sidebar + .sidebar {
  padding-top: 1rem;
  border-top: 1px dotted black;
}

.sub-header {
  background-position: center center;
  background-size: cover;
}

.vcard p {
  margin: 0;
}

/*--------------------------------------------------------------
## UI Modals
--------------------------------------------------------------*/
.iziUI {
  opacity: 0;
}

.iziUI.iziModal {
  opacity: 1;
}

.iziUI .izi-toggle {
  position: absolute;
  font-size: 2.25rem;
  top: 40px;
  right: 40px;
  z-index: 99;
}

@media (max-width: 1200px) {
  .iziUI .izi-toggle {
    font-size: calc(1.25rem + 1.33333vw) ;
  }
}

.iziUI .iziModal-header.iziModal-noSubtitle {
  padding: 20px;
}

.iziUI .iziModal-header.iziModal-noSubtitle .iziModal-header-title {
  font-family: futura-pt, sans-serif;
  font-size: 1.5625rem;
}

@media (max-width: 1200px) {
  .iziUI .iziModal-header.iziModal-noSubtitle .iziModal-header-title {
    font-size: calc(1.1125rem + 0.6vw) ;
  }
}

.iziUI .iziModal-content-wrapper {
  padding: 40px;
  z-index: 50;
  position: relative;
  overflow: hidden;
}

.iziUI .iziModal-content-wrapper h2 {
  max-width: 84%;
}

/*--------------------------------------------------------------
## News
--------------------------------------------------------------*/
.news-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-weight: 900;
}

.news-cat-list li {
  margin: 0;
  padding: 0;
}

/*--------------------------------------------------------------
## Header photo, default page template
--------------------------------------------------------------*/
.main-photo-default {
  position: relative;
  width: 100%;
  height: 33vh;
  margin: 0 auto 3vw;
  padding: 0;
}

.main-photo-default img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}

/*--------------------------------------------------------------
## Big DZ background sections
--------------------------------------------------------------*/
.page-id-2382 main,
.page-id-2481 main {
  margin-top: 25px;
}

.site-footer {
  margin-top: 5vw;
  border-top: 1px solid #bebebe;
}

/*--------------------------------------------------------------
## Team Block
--------------------------------------------------------------*/
.team-principals p:nth-of-type(2) {
  margin-bottom: 0;
}

.team-principals p strong {
  font-weight: 400;
  color: #A41E24;
}

.team-principals p img.principal-photo {
  width: 38%;
  height: auto;
}

/*--------------------------------------------------------------
## Projects page (using archive-project.php)
--------------------------------------------------------------*/
.portfolio-grid,
.modula-gallery {
  margin-bottom: 4em;
}

/*--------------------------------------------------------------
## Services page
--------------------------------------------------------------*/
.page-id-2647 article,
.page-id-2647 .service-intro {
  font-size: 120%;
}

/*--------------------------------------------------------------
## Single Project Page Styling
--------------------------------------------------------------*/
.single-frame {
  position: relative;
  overflow: hidden;
}

.main-photo {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 0 auto;
  bottom: 1em;
  padding: 0 0 1em 0;
}

.main-photo img {
  min-width: 100%;
  height: 100%;
  object-fit: cover;
}

.info-toggle {
  position: absolute;
  bottom: .8em;
  right: 0;
  width: 75%;
  background: white;
  padding: 0.6em;
  z-index: 1001;
  font-size: 1.5625rem;
}

@media (max-width: 1200px) {
  .info-toggle {
    font-size: calc(1.1125rem + 0.6vw) ;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .info-toggle {
    width: 35%;
  }
}

.info-toggle.hideme {
  right: -900px;
  -webkit-transition: all 0.45s ease-in-out;
  -moz-transition: all 0.45s ease-in-out;
  -ms-transition: all 0.45s ease-in-out;
  -o-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}

.project-specs p {
  line-height: 1.2;
}

p.author {
  margin-bottom: 0;
}

p.photo-desc {
  font-size: 1.0625rem;
  margin-top: 0.4rem;
  z-index: 1002;
}

@media (max-width: 1200px) {
  p.photo-desc {
    font-size: calc(1.0125rem + 0.06667vw) ;
  }
}

/*--------------------------------------------------------------
possib;e scripting for info overlay:

we know window height already
check position of toggle
check height of article
if toggle position is high, flow out info from top
if toggle is low, flow from bottom

need to think about this!
--------------------------------------------------------------*/
article.type-project {
  position: absolute;
  top: 102vh;
  left: 100vw;
  opacity: 0;
  width: 100vw;
  min-height: 100vh;
  padding: 5vw;
  background: rgba(248, 248, 250, 0.93);
  z-index: 1000;
  -webkit-transition: all 0.45s ease-in-out;
  -moz-transition: all 0.45s ease-in-out;
  -ms-transition: all 0.45s ease-in-out;
  -o-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}

article.type-project.open {
  position: fixed;
  top: 0;
  left: 7vw;
  overflow-y: scroll;
  z-index: 500;
  opacity: 1;
  -webkit-transition: all 0.45s ease-in-out;
  -moz-transition: all 0.45s ease-in-out;
  -ms-transition: all 0.45s ease-in-out;
  -o-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
}

article.type-project.open .container {
  position: absolute;
  overflow-y: auto;
}

.single-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

@media (min-width: 768px) and (orientation: portrait) {
  .single-grid {
    flex-direction: row;
  }
}

.grid-item {
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 3vw 0;
  padding: 1vw;
}

.grid-item img {
  width: 100%;
}

.grid-item.grid--63 {
  width: 85%;
}

.grid-item.grid--33 {
  width: 65%;
}

.grid-item.grid--36 {
  width: 85%;
}

@media (min-width: 768px) and (orientation: portrait) {
  .grid-item.grid--36 {
    width: 55%;
  }
}

@media (min-width: 992px) {
  .grid-item.grid--36 {
    width: 45%;
  }
}

.post-navigation {
  margin: 2em auto 0 auto;
  padding-top: 1em;
  border-top: 1px solid #bebebe;
  width: 92%;
}

.dz-animated {
  visibility: hidden;
}

.dz-logo-an #daniels, .dz-logo-an #zermack {
  fill: #a41e24;
}

.dz-logo-an #and, .dz-logo-an #architects {
  fill: #231f20;
}

.dz-logo-fig {
  width: 100px;
  border-bottom: 1px solid #bbbdbf;
}

/*--------------------------------------------------------------
## Slider (divs with these classes deleted 4/4)
--------------------------------------------------------------*/
.home-slider .single-slide {
  display: none;
}

.home-slider .single-slide:first-child {
  display: flex;
}

.slick-initialized.home-slider .single-slide,
.slick-initialized.home-slider .single-slide:first-child {
  display: flex;
}

.intro-home {
  margin-top: 2em;
}

#home-projects {
  margin-bottom: 2vw;
}

.big-dz {
  position: relative;
  margin-bottom: 10vw;
  background: #eaeaef;
}

.big-dz .container-fluid {
  z-index: 100;
}

@media (min-width: 576px) {
  .big-dz {
    min-height: 100vw;
  }
}

@media (min-width: 768px) and (orientation: portrait) {
  .big-dz {
    background: none;
  }
}

.big-dz .big-dz-fig {
  display: none;
}

@media (min-width: 768px) and (orientation: portrait) {
  .big-dz .big-dz-fig {
    display: block;
    position: absolute;
    top: 0px;
    width: 100%;
  }
}

.big-dz figure {
  z-index: -1;
}

.big-dz #dz-area-top {
  position: relative;
  margin-bottom: 9vw;
}

@media (min-width: 768px) and (orientation: portrait) {
  .big-dz #dz-area-top {
    min-height: 46vw;
    margin-bottom: 15vw;
  }
}

@media (min-width: 992px) {
  .big-dz #dz-area-top {
    margin-bottom: 16vw;
  }
}

.big-dz #instagram {
  position: relative;
  margin-top: 12vw;
}

.big-dz #dz-area-bottom {
  position: relative;
}

@media (min-width: 768px) and (orientation: portrait) {
  .vr-title {
    margin-bottom: 1rem;
  }
}

.vr-picture img {
  margin-bottom: 1rem;
}

@media (min-width: 768px) and (orientation: portrait) {
  .vr-picture img {
    margin-bottom: 0;
  }
}

.col-vr-text {
  margin-bottom: 4vw;
}

@media (min-width: 768px) and (orientation: portrait) {
  .col-vr-text {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

.wp-caption-text {
  text-align: center;
}

.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-caption {
  display: block;
}