/*!
Theme Name: hpp-base-theme
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: hpp-base-theme
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.

hpp-base-theme is based on Underscores http://underscores.me/, (C) 2012-2016 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 http://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Variables
# Mixins
# Normalize
# Base
# Overrides
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Name: Breakpoints
 * ----------------------------------------------------------------------------
 * @description - Vars that support the global media queries
 *
 * ----------------------------------------------------------------------------
 * Breakpoint vars:
 * ----------------------------------------------------------------------------
 *  1. $x-small-up - All screens
 *  2. $x-small-only - 0 to 768px
 *  3. $small-up - 768px & up
 *  4. $small-only - 768px to 990px
 *  5. $medium-up - 991px & up
 *  6. $medium-only - 991px to 1199px
 *  7. $large-up -  1200px & up
 * ----------------------------------------------------------------------------
 */
/*
* ----------------------------------------------------------------------------
* Name: Color Variables
* ----------------------------------------------------------------------------
* @author - Modop
* @description - The styling related to global color vars
* ----------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------
* Gray scale color palette
* ----------------------------------------------------------------------------
*/
/*
* ----------------------------------------------------------------------------
* Section variables
* ----------------------------------------------------------------------------
*/
@import url("//hello.myfonts.net/count/34C649");
.FFMarkWebProBold {
  font-family: "FFMarkWebProBold"; }

.PerpetuaMTStd {
  font-family: "PerpetuaMTStd"; }

/*--------------------------------------------------------------
# Mixins
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%; }

body {
  margin: 0; }

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

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

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

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

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

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

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

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

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

small {
  font-size: 80%; }

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

sup {
  top: -.5em; }

sub {
  bottom: -.25em; }

img {
  border: 0; }

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

figure {
  margin: 1em 40px; }

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

pre {
  overflow: auto; }

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

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

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

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

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

input {
  line-height: normal; }

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

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

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

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: .35em .625em .75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

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

td,
th {
  padding: 0; }

/*--------------------------------------------------------------
# The base theme for all HPP "properties"
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Base Styles
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - Controls all styling imports
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Helper styles - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Helper Styles
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to helper styles
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .site-main .comment-navigation, .site-main
  .posts-navigation, .site-main
  .post-navigation {
    margin: 0 0 1.5em;
    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%; }
  .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; }
  /* Text meant only for screen readers. */
  .screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
    /* Many screen reader and browser combinations announce broken words as they would appear visually. */ }
    .screen-reader-text:focus {
      background-color: #111;
      border-radius: 3px;
      box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
      clip: auto !important;
      color: #fff;
      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; }
  .clear:before,
  .clear:after,
  .entry-content:before,
  .entry-content:after,
  .comment-content:before,
  .comment-content:after,
  .site-header:before,
  .site-header:after,
  .site-content:before,
  .site-content:after,
  .site-footer:before,
  .site-footer:after {
    content: "";
    display: table;
    table-layout: fixed; }
  .clear:after,
  .entry-content:after,
  .comment-content:after,
  .site-header:after,
  .site-content:after,
  .site-footer:after {
    clear: both; }
  /* Globally hidden elements when Infinite Scroll is supported and in use. */
  .infinite-scroll .posts-navigation,
  .infinite-scroll.neverending .site-footer {
    /* Theme Footer (when set to scrolling) */
    display: none; }
  /* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
  .infinity-end.neverending .site-footer {
    display: block; }
  .widget {
    margin: 0 0 1.5em;
    /* Make sure select elements fit in widgets. */ }
    .widget select {
      max-width: 100%; }
  .sticky {
    display: block; }
  .hentry {
    margin: 0 0 1.5em; }
  .updated:not(.published) {
    display: none; }
  .page-content,
  .entry-content,
  .entry-summary {
    margin: 1.5em 0 0; }
  .page-links {
    clear: both;
    margin: 0 0 1.5em; }
  .comment-content a {
    word-wrap: break-word; }
  .bypostauthor {
    display: block; }
  .text-color-tan {
    color: #9c7f47; }
  .gold {
    color: #a58041; }
  .grey-gold {
    color: #cac3ac; }
  .padtop-0 {
    padding-top: 0; }
  .padtop-5 {
    padding-top: 5px; }
  .padtop-10 {
    padding-top: 10px; }
  .padtop-15 {
    padding-top: 15px; }
  .padtop-20 {
    padding-top: 20px; }
  .padtop-25 {
    padding-top: 25px; }
  .padtop-30 {
    padding-top: 30px; }
  .padtop-35 {
    padding-top: 35px; }
  .padtop-40 {
    padding-top: 40px; }
  .padtop-45 {
    padding-top: 45px; }
  .padtop-50 {
    padding-top: 50px; }
  .padtop-55 {
    padding-top: 55px; }
  .padtop-60 {
    padding-top: 60px; }
  .padtop-65 {
    padding-top: 65px; }
  .padtop-70 {
    padding-top: 70px; }
  .padtop-75 {
    padding-top: 75px; }
  .padtop-80 {
    padding-top: 80px; }
  .padtop-85 {
    padding-top: 85px; }
  .padtop-90 {
    padding-top: 90px; }
  .padtop-95 {
    padding-top: 95px; }
  .padtop-100 {
    padding-top: 100px; }
  .margintop-0 {
    margin-top: 0; }
  .margintop-5 {
    margin-top: 5px; }
  .margintop-10 {
    margin-top: 10px; }
  .margintop-15 {
    margin-top: 15px; }
  .margintop-20 {
    margin-top: 20px; }
  .margintop-25 {
    margin-top: 25px; }
  .margintop-30 {
    margin-top: 30px; }
  .margintop-35 {
    margin-top: 35px; }
  .margintop-40 {
    margin-top: 40px; }
  .margintop-45 {
    margin-top: 45px; }
  .margintop-50 {
    margin-top: 50px; }
  .margintop-55 {
    margin-top: 55px; }
  .margintop-60 {
    margin-top: 60px; }
  .margintop-65 {
    margin-top: 65px; }
  .margintop-70 {
    margin-top: 70px; }
  .margintop-75 {
    margin-top: 75px; }
  .margintop-80 {
    margin-top: 80px; }
  .margintop-85 {
    margin-top: 85px; }
  .margintop-90 {
    margin-top: 90px; }
  .margintop-95 {
    margin-top: 95px; }
  .margintop-100 {
    margin-top: 100px; }
  .clear-padding {
    padding-left: 0;
    padding-right: 0; }
  .clear-left-padding {
    padding-left: 0; }
  .clear-right-padding {
    padding-right: 0; }
  .double-padding {
    padding-left: 30px;
    padding-right: 30px; }
  .caroufredsel_wrapper {
    width: 100% !important;
    max-height: calc(100vh); }
  .group-wrap {
    background-color: black; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Global styles - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Global Styles
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to global styles
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  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 http://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: #ccc;
    border: 0;
    height: 1px;
    margin-bottom: 1.5em; }
  ul,
  ol {
    margin: 0 0 1.5em 3em; }
  ul {
    list-style: disc; }
  ol {
    list-style: decimal; }
  li > ul,
  li > ol {
    margin-bottom: 0;
    margin-left: 1.5em; }
  dt {
    font-weight: bold; }
  dd {
    margin: 0 1.5em 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. */ }
  table {
    margin: 0 0 1.5em;
    width: 100%; }
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    border: 1px solid;
    border-color: #ccc #ccc #aaa;
    border-radius: 3px;
    background: #efefef;
    color: rgba(0, 0, 0, 0.8);
    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 {
      border-color: #ccc #aaa #999; }
    button:active, button:focus,
    input[type="button"]:active,
    input[type="button"]:focus,
    input[type="reset"]:active,
    input[type="reset"]:focus,
    input[type="submit"]:active,
    input[type="submit"]:focus {
      border-color: #999 #aaa #aaa; }
  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%; }
  p {
    margin-bottom: 1.5em; }
  dfn,
  cite,
  em,
  i {
    font-style: italic; }
  blockquote {
    margin: 0 1.5em; }
  address {
    margin: 0 0 1.5em; }
  pre {
    background: #eee;
    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: #f5b4a9;
    text-decoration: none; }
  big {
    font-size: 125%; }
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    clear: both; }
  a {
    color: #1e4d5f; }
    a:visited {
      color: #1e4d5f; }
    a:hover, a:focus, a:active {
      color: #000; }
    a:focus {
      outline: thin dotted; }
    a:hover, a:active {
      outline: 0; }
  a,
  a:hover,
  a:active,
  a:focus {
    outline: 0; }
  #page {
    display: block;
    position: relative; }
  #main > .container-fluid {
    margin-left: auto;
    margin-right: auto; }
  #video-section,
  #explore-section,
  #features-section,
  #gallery-section,
  #neighborhood-section,
  #developer-section,
  #floorplan-section,
  #panomap,
  #contact {
    display: block;
    position: relative; }
  #video,
  #explore,
  #features,
  #gallery,
  #neighborhood,
  #developer,
  #floorplan,
  #panomap {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    background-color: transparent;
    border: none;
    outline: none;
    top: -80px; }
  .admin-bar #video,
  .admin-bar #explore,
  .admin-bar #features,
  .admin-bar #gallery,
  .admin-bar #neighborhood,
  .admin-bar #developer,
  .admin-bar #floorplan,
  .admin-bar #panomap {
    top: -102px; }
  body,
  button,
  input,
  select,
  textarea {
    color: #455152;
    font-family: "PerpetuaMTStd";
    font-size: 25.6px;
    font-size: 1.6rem;
    line-height: 1.2; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  body,
  button,
  input,
  select,
  textarea {
    font-size: 28.8px;
    font-size: 1.8rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  body,
  button,
  input,
  select,
  textarea {
    font-size: 32px;
    font-size: 2rem; } }

/*--------------------------------------------------------------
# Vendor styles - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Vendor Styles
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - Imports all of the styles for vendor css
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Flexslider styles - PLEASE DO NOT EDIT THIS FILE!!! 
--------------------------------------------------------------*/
/*
 * jQuery FlexSlider v2.6.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 and later license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 *
 */
/* ====================================================================================================================
 * FONT-FACE
 * ====================================================================================================================*/
/* ====================================================================================================================
 * RESETS
 * ====================================================================================================================*/
.flex-container a:hover,
.flex-slider a:hover {
  outline: none; }

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

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

/* ====================================================================================================================
 * BASE STYLES
 * ====================================================================================================================*/
.flexslider {
  margin: 0;
  padding: 0; }

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

.flexslider .slides img {
  width: 100%;
  display: block; }

.flexslider .slides:after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0; }

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

* html .flexslider .slides {
  height: 1%; }

.no-js .flexslider .slides > li:first-child {
  display: block; }

/* ====================================================================================================================
 * DEFAULT THEME
 * ====================================================================================================================*/
.flexslider {
  margin: 0 0 60px;
  background: #ffffff;
  border: 4px solid #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: "" 0 1px 4px rgba(0, 0, 0, 0.2); }

.flexslider .slides {
  zoom: 1; }

.flexslider .slides img {
  height: auto;
  -moz-user-select: none; }

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

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

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

.flex-direction-nav {
  *height: 0; }

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -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; }

.flex-direction-nav a:before {
  font-family: "flexslider-icon";
  font-size: 40px;
  display: inline-block;
  content: '\f001';
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3); }

.flex-direction-nav a.flex-next:before {
  content: '\f002'; }

.flex-direction-nav .flex-prev {
  left: -50px; }

.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right; }

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px; }

.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1; }

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px; }

.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1; }

.flex-direction-nav .flex-disabled {
  opacity: 0 !important;
  filter: alpha(opacity=0);
  cursor: default;
  z-index: -1; }

.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'; }

.flex-control-nav {
  width: 100%;
  position: absolute;
  bottom: -40px;
  text-align: center; }

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

.flex-control-paging li a {
  width: 11px;
  height: 11px;
  display: block;
  background: #666;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px; }

.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7); }

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  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%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -moz-user-select: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease; }

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

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

/* ====================================================================================================================
 * RESPONSIVE
 * ====================================================================================================================*/
@media screen and (max-width: 860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px; }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px; } }

/**
 * ----------------------------------------------------------------------------
 * Section Name: Flexslider
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the flexslider plugin
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .flexslider {
    border-radius: 0;
    /*! Gray v1.4.5 (https://github.com/karlhorky/gray) | MIT */
    /* Webkit hack until filter is unprefixed */
    /* Background element */ }
    .flexslider ul {
      margin: 0;
      padding: 0; }
      .flexslider ul li {
        margin: 0;
        padding: 0; }
    .flexslider .grayscale {
      /* Firefox 10-34 */
      filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='saturate' values='0'/></filter></svg>#grayscale");
      /*
            Chrome 19+,
            Safari 6+,
            Safari 6+ iOS,
            Opera 15+
          */
      -webkit-filter: grayscale(1);
      /* Firefox 35+ */
      filter: grayscale(1);
      /* IE 6-9 */
      filter: gray; }
    .flexslider .grayscale.grayscale-fade {
      transition: filter .5s; } }
  @media only screen and (-webkit-min-device-pixel-ratio: 0) {
    .flexslider .grayscale.grayscale-fade {
      -webkit-transition: -webkit-filter .5s;
      transition: -webkit-filter .5s; } }

@media only screen {
    .flexslider .grayscale.grayscale-off,
    .flexslider .grayscale.grayscale-fade:hover {
      -webkit-filter: grayscale(0);
      filter: grayscale(0); }
    .flexslider .flex-active-slide .grayscale {
      -webkit-filter: grayscale(0);
      filter: grayscale(0); }
    .flexslider .flex-active-slide .grayscale.grayscale-replaced > svg {
      opacity: 0; }
    .flexslider .grayscale.grayscale-replaced {
      -webkit-filter: none;
      filter: none; }
    .flexslider .grayscale.grayscale-replaced > svg {
      -webkit-transition: opacity .5s ease;
      transition: opacity .5s ease;
      opacity: 1; }
    .flexslider .grayscale.grayscale-replaced.grayscale-off > svg,
    .flexslider .grayscale.grayscale-replaced.grayscale-fade:hover > svg {
      opacity: 0; }
    .flexslider .flex-control-nav.flex-control-paging li {
      position: relative;
      z-index: 1; }
    .flexslider .flex-control-nav.flex-control-paging li:after {
      content: "";
      background-color: #000;
      border-radius: 2px;
      height: 16px;
      width: 16px;
      display: block;
      position: absolute;
      top: 1px;
      left: 1px;
      z-index: 1; }
    .flexslider .flex-control-nav.flex-control-paging li a {
      border: 2px solid #fff;
      background-color: #3fbab8;
      opacity: .5;
      border-radius: 2px;
      width: 18px;
      height: 18px;
      position: relative;
      z-index: 2; }
    .flexslider .flex-control-nav.flex-control-paging .flex-active {
      opacity: 1; }
    .flexslider .flex-direction-nav a {
      color: transparent;
      height: 50px;
      margin: 0;
      opacity: .9;
      transform: translateY(-50%);
      -webkit-transition: none;
      -moz-transition: none;
      -ms-transition: none;
      -o-transition: none;
      transition: none;
      width: 31px; }
      .flexslider .flex-direction-nav a:before {
        background-size: contain;
        background-repeat: no-repeat;
        content: " ";
        height: 50px;
        width: 31px; }
      .flexslider .flex-direction-nav a.flex-prev {
        left: 12px; }
      .flexslider .flex-direction-nav a.flex-next {
        right: 12px; }
      .flexslider .flex-direction-nav a.flex-prev:before {
        background-image: url("./images/arrow-left.png"); }
      .flexslider .flex-direction-nav a.flex-next:before {
        background-image: url("./images/arrow-right.png"); }
    .flexslider:hover .flex-direction-nav .flex-prev {
      left: 12px; }
    .flexslider:hover .flex-direction-nav .flex-next {
      right: 12px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .flexslider .flex-direction-nav a {
    width: 46px;
    height: 75px; }
    .flexslider .flex-direction-nav a:before {
      width: 46px;
      height: 75px; }
    .flexslider .flex-direction-nav a.flex-prev {
      left: 90px; }
    .flexslider .flex-direction-nav a.flex-next {
      right: 90px; }
  .flexslider:hover .flex-direction-nav .flex-prev {
    left: 90px; }
  .flexslider:hover .flex-direction-nav .flex-next {
    right: 90px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .flexslider .flex-direction-nav .flex-viewport {
    overflow: visible !important; }
  .flexslider .flex-direction-nav a {
    width: 62px;
    height: 100px; }
    .flexslider .flex-direction-nav a:before {
      width: 62px;
      height: 100px; } }

/*--------------------------------------------------------------
# Headroom styles - PLEASE DO NOT EDIT THIS FILE!!! 
--------------------------------------------------------------*/
/** headroom.js animated styles **/
.slide {
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out; }

.slide--reset {
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0); }

.slide--up {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%); }

.animated {
  -webkit-animation-duration: .5s;
  -moz-animation-duration: .5s;
  -o-animation-duration: .5s;
  animation-duration: .5s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -o-animation-fill-mode: both;
  animation-fill-mode: both; }

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%); }
  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes slideDown {
  0% {
    -moz-transform: translateY(-100%); }
  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes slideDown {
  0% {
    -o-transform: translateY(-100%); }
  100% {
    -o-transform: translateY(0); } }

@keyframes slideDown {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0); } }

.animated.slideDown {
  -webkit-animation-name: slideDown;
  -moz-animation-name: slideDown;
  -o-animation-name: slideDown;
  animation-name: slideDown; }

@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(0); }
  100% {
    -webkit-transform: translateY(-100%); } }

@-moz-keyframes slideUp {
  0% {
    -moz-transform: translateY(0); }
  100% {
    -moz-transform: translateY(-100%); } }

@-o-keyframes slideUp {
  0% {
    -o-transform: translateY(0); }
  100% {
    -o-transform: translateY(-100%); } }

@keyframes slideUp {
  0% {
    transform: translateY(0); }
  100% {
    transform: translateY(-100%); } }

.animated.slideUp {
  -webkit-animation-name: slideUp;
  -moz-animation-name: slideUp;
  -o-animation-name: slideUp;
  animation-name: slideUp; }

@-webkit-keyframes swingInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(-90deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg); } }

@-moz-keyframes swingInX {
  0% {
    -moz-transform: perspective(400px) rotateX(-90deg); }
  100% {
    -moz-transform: perspective(400px) rotateX(0deg); } }

@-o-keyframes swingInX {
  0% {
    -o-transform: perspective(400px) rotateX(-90deg); }
  100% {
    -o-transform: perspective(400px) rotateX(0deg); } }

@keyframes swingInX {
  0% {
    transform: perspective(400px) rotateX(-90deg); }
  100% {
    transform: perspective(400px) rotateX(0deg); } }

.animated.swingInX {
  -webkit-transform-origin: top;
  -moz-transform-origin: top;
  -ie-transform-origin: top;
  -o-transform-origin: top;
  transform-origin: top;
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: swingInX;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: swingInX;
  -o-backface-visibility: visible !important;
  -o-animation-name: swingInX;
  backface-visibility: visible !important;
  animation-name: swingInX; }

@-webkit-keyframes swingOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg); }
  100% {
    -webkit-transform: perspective(400px) rotateX(-90deg); } }

@-moz-keyframes swingOutX {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg); }
  100% {
    -moz-transform: perspective(400px) rotateX(-90deg); } }

@-o-keyframes swingOutX {
  0% {
    -o-transform: perspective(400px) rotateX(0deg); }
  100% {
    -o-transform: perspective(400px) rotateX(-90deg); } }

@keyframes swingOutX {
  0% {
    transform: perspective(400px) rotateX(0deg); }
  100% {
    transform: perspective(400px) rotateX(-90deg); } }

.animated.swingOutX {
  -webkit-transform-origin: top;
  -webkit-animation-name: swingOutX;
  -webkit-backface-visibility: visible !important;
  -moz-animation-name: swingOutX;
  -moz-backface-visibility: visible !important;
  -o-animation-name: swingOutX;
  -o-backface-visibility: visible !important;
  animation-name: swingOutX;
  backface-visibility: visible !important; }

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  100% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@-moz-keyframes flipInX {
  0% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  100% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@-o-keyframes flipInX {
  0% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  100% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

@keyframes flipInX {
  0% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; }
  100% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; } }

.animated.flipInX {
  -webkit-backface-visibility: visible !important;
  -webkit-animation-name: flipInX;
  -moz-backface-visibility: visible !important;
  -moz-animation-name: flipInX;
  -o-backface-visibility: visible !important;
  -o-animation-name: flipInX;
  backface-visibility: visible !important;
  animation-name: flipInX; }

@-webkit-keyframes flipOutX {
  0% {
    -webkit-transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -webkit-transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@-moz-keyframes flipOutX {
  0% {
    -moz-transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -moz-transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@-o-keyframes flipOutX {
  0% {
    -o-transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    -o-transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

@keyframes flipOutX {
  0% {
    transform: perspective(400px) rotateX(0deg);
    opacity: 1; }
  100% {
    transform: perspective(400px) rotateX(90deg);
    opacity: 0; } }

.animated.flipOutX {
  -webkit-animation-name: flipOutX;
  -webkit-backface-visibility: visible !important;
  -moz-animation-name: flipOutX;
  -moz-backface-visibility: visible !important;
  -o-animation-name: flipOutX;
  -o-backface-visibility: visible !important;
  animation-name: flipOutX;
  backface-visibility: visible !important; }

@-webkit-keyframes bounceInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-200px); }
  60% {
    opacity: 1;
    -webkit-transform: translateY(30px); }
  80% {
    -webkit-transform: translateY(-10px); }
  100% {
    -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInDown {
  0% {
    opacity: 0;
    -moz-transform: translateY(-200px); }
  60% {
    opacity: 1;
    -moz-transform: translateY(30px); }
  80% {
    -moz-transform: translateY(-10px); }
  100% {
    -moz-transform: translateY(0); } }

@-o-keyframes bounceInDown {
  0% {
    opacity: 0;
    -o-transform: translateY(-200px); }
  60% {
    opacity: 1;
    -o-transform: translateY(30px); }
  80% {
    -o-transform: translateY(-10px); }
  100% {
    -o-transform: translateY(0); } }

@keyframes bounceInDown {
  0% {
    opacity: 0;
    transform: translateY(-200px); }
  60% {
    opacity: 1;
    transform: translateY(30px); }
  80% {
    transform: translateY(-10px); }
  100% {
    transform: translateY(0); } }

.animated.bounceInDown {
  -webkit-animation-name: bounceInDown;
  -moz-animation-name: bounceInDown;
  -o-animation-name: bounceInDown;
  animation-name: bounceInDown; }

@-webkit-keyframes bounceOutUp {
  0% {
    -webkit-transform: translateY(0); }
  30% {
    opacity: 1;
    -webkit-transform: translateY(20px); }
  100% {
    opacity: 0;
    -webkit-transform: translateY(-200px); } }

@-moz-keyframes bounceOutUp {
  0% {
    -moz-transform: translateY(0); }
  30% {
    opacity: 1;
    -moz-transform: translateY(20px); }
  100% {
    opacity: 0;
    -moz-transform: translateY(-200px); } }

@-o-keyframes bounceOutUp {
  0% {
    -o-transform: translateY(0); }
  30% {
    opacity: 1;
    -o-transform: translateY(20px); }
  100% {
    opacity: 0;
    -o-transform: translateY(-200px); } }

@keyframes bounceOutUp {
  0% {
    transform: translateY(0); }
  30% {
    opacity: 1;
    transform: translateY(20px); }
  100% {
    opacity: 0;
    transform: translateY(-200px); } }

.animated.bounceOutUp {
  -webkit-animation-name: bounceOutUp;
  -moz-animation-name: bounceOutUp;
  -o-animation-name: bounceOutUp;
  animation-name: bounceOutUp; }

/**
 * ----------------------------------------------------------------------------
 * Section Name: Headroom
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the headroom menu plugin
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Slideout styles - PLEASE DO NOT EDIT THIS FILE!!! 
--------------------------------------------------------------*/
body {
  width: 100%;
  height: 100%; }

.slideout-menu {
  position: fixed;
  left: auto;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 0;
  width: 256px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: none; }

.slideout-panel {
  position: relative;
  z-index: 1;
  will-change: transform; }

@media screen and (max-width: 991px) {
  .slideout-open,
  .slideout-open body,
  .slideout-open .slideout-panel {
    overflow: hidden; } }

.slideout-open .slideout-menu {
  display: block; }

/**
 * ----------------------------------------------------------------------------
 * Section Name: Slideout
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the slideout menu plugin
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Header section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Header
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the header section for both
 * logged in & logged out users
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  body.admin-bar .header {
    top: 46px; }
  .header {
    display: block;
    position: fixed;
    background: white;
    top: 0;
    width: 100%;
    text-align: center;
    height: 80px;
    z-index: 200;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.75);
    font-family: "FFMarkWebProBold";
    /* Small menu. */ }
    .header .header-wrap {
      display: block;
      position: relative;
      height: 48px;
      line-height: 48px;
      top: 50%;
      transform: translateY(-50%);
      margin: 0 auto;
      text-align: center; }
    .header .site-branding {
      display: inline-block;
      position: relative;
      height: 48px;
      line-height: 48px;
      padding: 0 10px;
      float: left; }
    .header .site-title {
      display: block;
      position: relative;
      height: 42px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 14px;
      margin: 0; }
      .header .site-title img {
        display: block;
        position: relative;
        height: 42px;
        width: auto;
        font-size: 14px; }
    .header .main-navigation {
      display: inline-block;
      position: relative;
      height: 48px;
      line-height: 48px;
      font-size: 14px; }
      .header .main-navigation ul {
        display: none;
        list-style: none;
        margin: 0;
        padding-left: 0; }
        .header .main-navigation ul ul {
          box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
          float: left;
          position: absolute;
          top: 100%;
          left: -999em;
          z-index: 99999; }
          .header .main-navigation ul ul ul {
            left: -999em;
            top: 0; }
          .header .main-navigation ul ul li:hover > ul,
          .header .main-navigation ul ul li.focus > ul {
            left: 100%; }
          .header .main-navigation ul ul a {
            width: 200px; }
        .header .main-navigation ul li:hover > ul,
        .header .main-navigation ul li.focus > ul {
          left: auto; }
      .header .main-navigation li {
        float: left;
        position: relative; }
      .header .main-navigation a {
        display: block;
        text-decoration: none; }
    .header .secondary-branding {
      display: inline-block;
      position: relative;
      padding: 0 10px;
      float: right; }
      .header .secondary-branding img {
        display: block;
        position: relative;
        height: 48px;
        width: auto;
        font-size: 14px; }
    .header .mobile-menu {
      display: inline-block;
      color: #000;
      float: right;
      margin: 5px 20px 0 10px;
      cursor: pointer; }
    .header ul#primary-menu li a {
      padding: 0 7px;
      color: #000; }
    .header .menu-toggle,
    .header .main-navigation.toggled ul {
      display: block; }
  .fixed {
    backface-visibility: hidden;
    position: fixed;
    z-index: 2;
    transition: transform 300ms ease; }
  .fixed-open {
    transform: translate3d(-256px, 0px, 0px); }
  .slideout-menu {
    background: #3d3d3f;
    text-transform: uppercase;
    font-size: 20px; }
  li.mobile-menu-sub-item {
    display: list-item;
    position: relative;
    top: 30px;
    font-size: 16px;
    text-transform: uppercase; }
  li.mobile-menu-sub-item + li.mobile-menu-sub-item {
    top: 20px; }
  ul#side-menu {
    margin: 70px 30px;
    padding: 0;
    font-family: "FFMarkWebProBold"; }
    ul#side-menu li {
      margin: 20px 0;
      list-style: none; }
      ul#side-menu li a {
        color: #fff; }
        ul#side-menu li a:hover, ul#side-menu li a:focus {
          color: #3fbab8;
          text-decoration: none; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  body.admin-bar .header {
    top: 32px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .header {
    text-align: center;
    -webkit-transform: translateY(0) !important;
    -ms-transform: translateY(0) !important;
    transform: translateY(0) !important; }
    .header .header-wrap {
      text-align: center; }
    .header .site-branding {
      float: none; }
    .header .secondary-branding {
      float: none; }
    .header .main-navigation ul {
      display: block; }
    .header li.mobile-menu-sub-item {
      display: none; }
    .header .menu-toggle {
      display: none; }
  .slideout-panel {
    transform: translateX(0) !important;
    overflow: visible !important; } }

/*--------------------------------------------------------------
# Hero video section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Hero-video
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to this property's hero video section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .hero-video {
    background-color: #000; }
    .hero-video #video-layers {
      height: 100vh;
      width: 100%; }
    .hero-video .video-loop-wrap {
      display: block;
      position: absolute;
      z-index: 1;
      height: 100%;
      width: 100%; }
      .hero-video .video-loop-wrap video {
        background-color: #fff; }
      .hero-video .video-loop-wrap p {
        margin: 0; }
    .hero-video .vidbg-container {
      background-color: transparent;
      background-size: contain;
      height: 100%;
      min-height: 100vh;
      width: 100%; }
    .hero-video .vidbg-container video {
      height: auto;
      width: 100%;
      z-index: 2; }
    .hero-video .play-video-button {
      display: none;
      position: absolute;
      transform: translateX(-50%);
      bottom: 12.5vh;
      left: 50%;
      z-index: 2;
      text-align: center;
      cursor: pointer; }
    .hero-video .play-video-button-image {
      height: 30px;
      width: 30px; }
    .hero-video .play-video-button-text {
      font-family: "FFMarkWebProBold";
      color: #fff;
      margin-top: 1rem;
      font-size: 1rem;
      cursor: pointer; }
    .hero-video .vidbg-container ~ .play-video-button {
      display: block; }
    .hero-video .video-background-image {
      position: relative;
      z-index: 1; }
    .hero-video .video-popup-wrap {
      display: block;
      position: absolute;
      z-index: -1; }
  #hdvid.modal {
    max-width: 1390px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    top: 80px; }
  .xclose {
    color: #fff;
    display: block;
    font-size: 48px;
    line-height: 0;
    opacity: 1;
    outline: none;
    position: absolute;
    text-shadow: 0 0 3px #455152;
    top: 30px;
    right: 0;
    z-index: 1001;
    cursor: pointer; }
  .xmodal-dialog {
    display: block;
    position: relative;
    padding-top: 45px;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto; }
  .video-player-wrap {
    width: 100%;
    max-width: 1300px;
    margin-left: auto;
    margin-right: auto; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .hero-video .vidbg-container {
    background-size: cover; }
  .hero-video .play-video-button-image {
    height: 40px;
    width: 40px; }
  .hero-video .play-video-button-text {
    margin-top: 1.25rem;
    font-size: 1.25rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .hero-video .play-video-button-image {
    height: 80px;
    width: 80px; }
  .hero-video .play-video-button-text {
    font-size: 1.5rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Explore section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Explore
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the explore carousel
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .explore {
    background-color: black;
    font-size: 1.25rem;
    font-family: "FFMarkWebProBold"; }
    .explore .explore-flexslider {
      overflow: hidden;
      position: relative;
      padding: 0;
      margin: 0;
      border: 0; }
    .explore .authentic,
    .explore .a-gem {
      position: absolute;
      transform: translateY(-50%);
      top: 50%;
      color: #0a313d;
      text-align: left; }
    .explore .a-special-blend {
      text-align: left;
      position: absolute;
      top: 20%; }
    .explore .three-unique {
      text-align: left;
      position: absolute;
      bottom: 20%; }
    .explore .slides {
      background-color: #fff; }
      .explore .slides li {
        position: relative; }
    .explore .image-container {
      display: block;
      position: relative;
      width: 100%;
      height: calc(100vh - 80px);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; }
    .explore .mobile-layout,
    .explore .tablet-layout {
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; }
    .explore .flex-control-nav {
      bottom: 30px; }
    .explore .slide-content {
      display: block;
      margin-left: 20%;
      text-align: center;
      color: #fff; }
    .explore .explore-title {
      margin: 20px 0; }
    .explore .explore-body {
      font-size: 14px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .explore {
    font-size: 1.75rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .explore {
    font-size: 2.5rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .explore {
    font-size: 3rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-large-up - (1440px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 90em) {
  .explore {
    font-size: 3.25rem; } }

/*--------------------------------------------------------------
# Features section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Features
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the features section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .features {
    font-family: "FFMarkWebProBold";
    font-size: 1.25rem; }
    .features .feature-flexslider {
      overflow: hidden;
      position: relative;
      padding: 0;
      margin: 0;
      border: 0;
      min-width: 100%; }
    .features .slides {
      background-color: #fff; }
      .features .slides li {
        display: inline-block;
        float: left;
        text-align: center;
        color: #fff;
        position: relative; }
    .features .slide-content {
      width: 90%;
      text-align: left;
      position: absolute;
      top: 7.5%;
      left: 7.5%;
      padding: 0;
      margin: 0 auto;
      line-height: 1.25; }
      .features .slide-content p {
        margin: 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .features {
    font-size: 1.75rem; }
    .features .feature-flexslider .flex-direction-nav {
      display: block;
      position: absolute;
      left: 50%;
      width: 160px;
      height: 50px;
      transform: translateX(-50%);
      z-index: 99999;
      bottom: 10%; }
    .features .feature-flexslider .flex-direction-nav a {
      transition: none;
      opacity: 1;
      color: transparent;
      width: 53px; }
      .features .feature-flexslider .flex-direction-nav a.flex-prev {
        bottom: 0;
        left: 0;
        margin: 0 auto;
        padding-right: 0; }
      .features .feature-flexslider .flex-direction-nav a.flex-next {
        bottom: 0;
        right: 0;
        margin: 0 auto;
        padding-left: 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .features {
    font-size: 2.5rem; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .features {
    font-size: 3rem; }
    .features .slide-body .icon-offset {
      padding-top: 234px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-large-up - (1440px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 90em) {
  .features {
    font-size: 3.25rem; } }

/*--------------------------------------------------------------
# Gallery section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Gallery
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the gallery carousels
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .gallery .gallery-flexslider {
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
    border: 0; }
    .gallery .gallery-flexslider .slides {
      background-color: #fff; }
      .gallery .gallery-flexslider .slides li {
        position: relative; }
    .gallery .gallery-flexslider .image-container {
      display: block;
      position: relative;
      width: 100%;
      height: calc(100vh - 230px);
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center; }
    .gallery .gallery-flexslider .slide-content {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      padding-left: 15%;
      padding-right: 45%;
      margin-left: auto;
      margin-right: auto; }
    .gallery .gallery-flexslider .slide-title {
      display: block;
      position: relative;
      float: left;
      font-family: HelveticaNeueLTStd-Lt, san-serif;
      font-size: 2em;
      line-height: 1em; }
    .gallery .gallery-flexslider .slide-body {
      display: block;
      position: relative;
      float: left;
      color: #fff;
      clear: both; }
    .gallery .gallery-flexslider .flex-control-nav.flex-control-paging {
      bottom: 30px; }
  .gallery #flexgallerynav {
    margin: 0;
    border: 0;
    background-color: #231f20;
    border-radius: 0; }
    .gallery #flexgallerynav .flex-viewport {
      position: relative;
      margin-left: auto;
      margin-right: auto; }
    .gallery #flexgallerynav .slides {
      margin-left: auto;
      margin-right: auto; }
      .gallery #flexgallerynav .slides li img {
        display: block;
        position: relative;
        width: 150px;
        height: 150px; }
  .admin-bar .gallery .image-container {
    height: calc(100vh - 252px); } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Neighborhood section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Neighborhood
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the Neighborhood section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .neighborhood {
    font-size: 18px; }
    .neighborhood .map-header {
      display: block;
      min-height: 250px;
      position: relative; }
    .neighborhood .map-header-content {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: auto; }
    .neighborhood .title {
      font-size: 24px;
      color: #1e4d5f;
      font-family: "FFMarkWebProBold";
      text-transform: uppercase;
      margin: 0 0 1.5rem; }
    .neighborhood .content {
      color: #455152; }
    .neighborhood .map-header-background-image {
      min-height: 250px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: 0 center; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .neighborhood {
    font-size: 22px; }
    .neighborhood .title {
      font-size: 28px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .neighborhood .title {
    font-size: 36px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Map section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Map
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the Google Maps API integration
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  #north-map,
  #region-map,
  #central-map,
  #south-map {
    width: 100%;
    height: 110vw;
    margin: 0; }
  #region-map {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100vw;
    margin: 0; }
  .maps-wrap {
    display: block;
    position: relative; }
    .maps-wrap > div {
      background-color: #3fbab8; }
  #north-map,
  #region-map,
  #south-map,
  #central-map {
    display: none; }
    #north-map.current,
    #region-map.current,
    #south-map.current,
    #central-map.current {
      display: block; }
  .infoBox {
    box-shadow: 6px 6px 13px rgba(0, 0, 0, 0.6); }
    .infoBox:after {
      content: " ";
      display: block;
      position: absolute;
      bottom: -15px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 15px 15px 0 15px;
      border-color: #fff transparent transparent transparent; }
  .infoBox > img {
    z-index: 99;
    cursor: pointer !important; }
    .infoBox > img:hover {
      cursor: pointer !important; }
  .popup-wrap {
    display: block;
    max-width: 250px;
    width: 250px;
    overflow: visible;
    background-color: #fff; }
  .popup-details {
    display: block;
    position: relative;
    max-width: 250px;
    width: 250px;
    overflow: visible; }
  .businesses {
    display: none;
    transition: all .5s ease; }
  .biz-type {
    color: #000;
    display: block;
    padding: 10px;
    font-family: "PerpetuaMTStd";
    font-size: 12px; }
  .businesses.current {
    display: block;
    transition: all .5s ease; }
  .popup-wrap .logo-wrap {
    display: none;
    position: relative;
    width: 250px;
    height: 130px;
    background-color: #e3e3e3; }
  .popup-wrap .logoleft img,
  .popup-wrap .logoright img {
    display: none; }
  .popup-wrap .logonav:hover {
    background-position: bottom center; }
  .popup-wrap .logoleft {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 50%;
    margin-top: -25px;
    cursor: pointer !important;
    background: url("./images/arrowleft2.png") no-repeat;
    background-size: cover;
    background-position: top center; }
  .popup-wrap .logoright {
    position: absolute;
    width: 50px;
    height: 50px;
    right: 0;
    top: 50%;
    margin-top: -25px;
    cursor: pointer !important;
    background: url("./images/arrowright2.png") no-repeat;
    background-size: cover;
    background-position: top center; }
  .popup-wrap .logo-wrap img {
    display: block;
    position: relative;
    height: 130px;
    width: auto;
    left: 50%;
    transform: translateX(-50%); }
  .popup-wrap .popup-nav {
    display: block;
    padding: 10px 30px 0 10px;
    max-width: 250px;
    width: 100%;
    position: relative; }
  .popup-wrap .closebtn {
    position: absolute;
    right: 2px;
    top: 2px;
    width: 13px;
    height: 13px;
    cursor: pointer !important; }
  .popup-wrap .biz-info-wrap.current {
    color: #9f8041;
    transition: all .5s ease; }
  .popup-wrap .biz-info-wrap {
    cursor: pointer !important;
    display: inline-block;
    line-height: 1;
    margin: 0;
    padding-right: 3px;
    font-family: "FFMarkWebProBold";
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all .5s ease;
    color: #000; }
  #controls-wrap {
    display: block;
    position: absolute;
    height: 0;
    width: 100%; }
  #map-switch-controls {
    display: block;
    position: absolute;
    left: 50%;
    top: -98px;
    transform: translateX(-50%);
    text-align: center;
    font-size: 13px;
    font-family: "FFMarkWebProBold";
    width: 240px; }
    #map-switch-controls > div {
      display: inline-block;
      position: relative;
      width: 100px;
      height: 30px;
      text-align: center;
      padding: 6px 0 0 0;
      margin: 0 5px 10px;
      background-color: #333;
      color: #fff;
      border: 1px solid #fff; }
      #map-switch-controls > div:hover {
        background-color: #000;
        color: #fff;
        border: 1px solid #fff; }
      #map-switch-controls > div.current {
        background-color: #0a313d;
        color: #fff; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  #north-map,
  #region-map,
  #central-map,
  #south-map,
  #region-map {
    width: 100%;
    height: 50vw; }
  .popup-wrap .logo-wrap,
  .popup-wrap .logoleft img,
  .popup-wrap .logoright img {
    display: block; }
  #map-switch-controls {
    top: -60px;
    width: 800px;
    font-size: 18px; }
    #map-switch-controls > div {
      float: left;
      width: 180px;
      text-align: center;
      padding: 3px 0 0 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  #north-map,
  #region-map,
  #south-map,
  #central-map {
    height: 585px; }
  #map-switch-controls {
    top: -60px;
    width: 800px;
    font-size: 18px; }
    #map-switch-controls > div {
      margin-bottom: 15px; } }

/*--------------------------------------------------------------
# Developer section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Developer
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the developer section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .developer {
    display: block;
    position: relative; }
    .developer a {
      color: #fff; }
    .developer .title {
      color: #1e4d5f;
      font-size: 24px;
      font-family: "FFMarkWebProBold";
      text-transform: uppercase; }
    .developer .hero-image {
      display: block;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 300px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center bottom; }
    .developer .content {
      margin-top: 30px; }
    .developer .hero-logo-wrap {
      display: block;
      position: relative;
      min-height: 300px; }
    .developer .hero-logo {
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: auto;
      left: 70px;
      width: 200px; }
    .developer .developer-content {
      background-color: #fff;
      background-size: 80%;
      background-repeat: no-repeat;
      background-position: right bottom;
      color: #7f7979;
      padding: 40px 0;
      overflow: hidden; }
    .developer .developer-mobile-background {
      display: block;
      position: absolute;
      right: -20px;
      bottom: -20px; }
    .developer .dev-prop-link {
      font-size: 20px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .developer .title {
    font-size: 28px; }
  .developer .developer-content {
    background-position: 2000px bottom;
    padding: 60px 0; }
  .developer .developer-mobile-background {
    display: block;
    position: absolute;
    right: 0;
    bottom: 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .developer .title {
    font-size: 36px; }
  .developer .content {
    margin-top: 40px; }
  .developer .container {
    padding: 0;
    width: auto; }
  .developer .developer-content {
    padding: 60px 40px; }
  .developer .hero-image {
    width: 33.33333333%;
    height: 100%; }
  .developer .hero-logo {
    height: auto;
    left: auto;
    right: 40px;
    top: 200px;
    transform: none; }
  .developer .developer-mobile-background {
    display: none; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .developer .developer-content {
    background-size: 80%;
    background-repeat: no-repeat;
    background-position: right bottom;
    padding: 80px 60px; } }

/*--------------------------------------------------------------
# Floorplan section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: floorplan
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the floorplan section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .floorplan {
    background-color: #fff;
    height: auto;
    overflow: hidden;
    padding-bottom: 100px;
    position: relative;
    width: 100%; }
    .floorplan .container {
      max-width: 970px; }
    .floorplan .floorplan-graphic {
      display: block;
      position: absolute;
      right: 0;
      top: 50px; }
    .floorplan .floor-content {
      color: #7f7979;
      padding-top: 40px; }
    .floorplan .header-bar {
      display: block;
      position: relative;
      width: 100%; }
    .floorplan .floorplan-title {
      font-size: 24px;
      font-family: "FFMarkWebProBold";
      color: #1e4d5f; }
      .floorplan .floorplan-title p {
        margin-bottom: 25px; }
    .floorplan .btn-wrapper {
      display: flex;
      align-items: center;
      flex-flow: column;
      left: 50%;
      margin: 20px 0 80px;
      position: relative;
      transform: translateX(-50%); }
    .floorplan .button {
      align-items: center;
      background-color: #1e4d5f;
      color: #fff;
      cursor: pointer;
      display: flex;
      justify-content: center;
      font-family: "FFMarkWebProBold";
      font-size: 16px;
      height: 54px;
      margin: 5px 0 0;
      padding: 0;
      position: relative;
      width: 200px; }
      .floorplan .button:hover {
        background-color: #245d72; }
      .floorplan .button:hover, .floorplan .button:focus, .floorplan .button:active {
        text-decoration: none; }
      .floorplan .button img {
        padding-right: 10px; }
    .floorplan .floor-link {
      margin-right: 0;
      height: 40px;
      width: auto; }
    .floorplan .plan-select {
      display: inline-block;
      font-size: 24px;
      font-family: PerpetuaMTStd;
      color: #a4a0a0;
      margin-top: 10px;
      margin-bottom: 10px;
      cursor: pointer; }
      .floorplan .plan-select:hover {
        color: #7f7979;
        border-bottom: 3px solid #1e4d5f; }
      .floorplan .plan-select.current {
        border-bottom: 3px solid #1e4d5f;
        color: #455152; }
    .floorplan .floorplan-flexslider,
    .floorplan .testfit-flexslider {
      margin: 0; }
    .floorplan .floor-content.floor-content-below {
      margin-top: -120px;
      margin-bottom: 120px; }
    .floorplan .slides .image-container {
      position: relative; }
      .floorplan .slides .image-container .floorplan-label,
      .floorplan .slides .image-container .testfit-label {
        position: relative;
        top: 20px; }
    .floorplan .flexslider {
      margin: 0; }
    .floorplan .flexslider .flex-direction-nav a.flex-prev {
      left: 50%;
      top: -50px;
      transform: rotate(90deg) translateY(25%); }
    .floorplan .flexslider .flex-direction-nav a.flex-next {
      bottom: -50px;
      left: 50%;
      top: auto;
      transform: rotate(90deg) translateY(25%); } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .floorplan .floor-content {
    padding-top: 60px; }
  .floorplan .btn-wrapper {
    flex-flow: row;
    left: auto;
    transform: none; }
  .floorplan .button {
    margin-right: 20px; }
  .floorplan .floor-link {
    height: 50px; }
  .floorplan .floorplan-title {
    font-size: 28px; }
  .floorplan .flexslider .flex-direction-nav a.flex-prev {
    top: -35px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .floorplan {
    background-color: transparent;
    padding-bottom: 125px; }
    .floorplan .floor-content {
      padding-top: 100px; }
    .floorplan .floorplan-title {
      font-size: 36px; }
    .floorplan .flexslider .flex-direction-nav a.flex-next {
      bottom: -75px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .floorplan {
    padding-bottom: 175px; }
    .floorplan .floor-content {
      padding-top: 145px; }
    .floorplan .btn-wrapper {
      margin-bottom: 100px; }
    .floorplan .flexslider .flex-direction-nav a.flex-prev {
      top: -60px; }
    .floorplan .flexslider .flex-direction-nav a.flex-next {
      bottom: -100px; }
    .floorplan .floor-link {
      height: 55px; }
    .floorplan .slides .image-container .floorplan-label,
    .floorplan .slides .image-container .testfit-label {
      position: absolute;
      top: 50px;
      font-size: 20px; } }

/*--------------------------------------------------------------
# Contact section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Contact
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to contact us section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .contact {
    background-color: #fff;
    color: #fff;
    display: block;
    font-family: "PerpetuaMTStd";
    overflow: hidden;
    position: relative; }
    .contact a {
      color: #fff;
      outline: 0; }
    .contact p {
      margin: 0; }
    .contact a:focus {
      outline: thin dotted; }
    .contact .title {
      color: #fff;
      font-family: "FFMarkWebProBold";
      font-size: 24px;
      margin: 0 0 20px; }
    .contact .name {
      font-weight: bold;
      margin-top: 20px; }
    .contact .sister-property-image {
      display: inline-block;
      position: relative;
      width: 340px;
      height: auto; }
    .contact .building {
      width: 100%;
      height: auto; }
    .contact .contact-wrapper {
      background-color: #3fbab8; }
    .contact .content {
      display: block;
      position: relative;
      font-size: 18px;
      line-height: 24px;
      padding: 40px 0 20px;
      width: 100%; }
    .contact .contact-set {
      margin-bottom: 20px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .contact .content {
    padding: 60px 0 20px; }
  .contact .title {
    font-size: 28px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .contact {
    background-color: transparent;
    margin: 0 0 -1px; }
    .contact .title {
      font-size: 36px;
      margin: 15px 0 35px; }
    .contact .name {
      margin-top: 40px; }
    .contact .contact-wrapper {
      background-color: none; }
    .contact .content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 18px; }
    .contact .contact-set {
      margin-bottom: 20px; }
      .contact .contact-set a {
        color: inherit; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-only - (991px) < (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) and (max-width: 74.9375em) {
  .contact .building {
    display: block;
    position: relative;
    width: 120%;
    max-width: 120%;
    left: -20%; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Panomap section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Panomap
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the Google Maps API integration
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the wilshire > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .panomap {
    position: relative; }
    .panomap .pano-img-wrapper .pano-img {
      position: relative;
      width: 100%; }
    .panomap .hotspots {
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      width: 100%; }
      .panomap .hotspots .pano-link {
        cursor: zoom-in;
        height: 32px;
        position: absolute;
        opacity: .9;
        outline: none;
        transition: opacity .2s;
        width: 32px; }
        .panomap .hotspots .pano-link:hover {
          opacity: 1;
          transition: opacity 250ms; }
        .panomap .hotspots .pano-link .pano-img {
          width: 100%; }
        .panomap .hotspots .pano-link#panoicon1 {
          top: 46%;
          left: 15%;
          transform: translate(-50%, -50%); }
        .panomap .hotspots .pano-link#panoicon2 {
          top: 81%;
          left: 57%;
          transform: translate(-50%, -50%); }
        .panomap .hotspots .pano-link#panoicon3 {
          top: 56%;
          left: 70%;
          transform: translate(-50%, -50%); }
        .panomap .hotspots .pano-link#panoicon4 {
          top: 83%;
          left: 77.5%;
          transform: translate(-50%, -50%); }
    .panomap .title {
      color: #fff;
      font-family: "FFMarkWebProBold";
      font-size: 16px;
      left: 0;
      margin: 16px 0 0 16px;
      position: absolute;
      text-transform: uppercase;
      top: 0; }
    .panomap .modal-dialog {
      height: 100%;
      margin: 0;
      width: 100%; }
      .panomap .modal-dialog .modal-body {
        height: 100%;
        padding: 0;
        width: 100%; }
        .panomap .modal-dialog .modal-body .iframe {
          border: none;
          height: 100%;
          width: 100%; }
      .panomap .modal-dialog .close {
        color: #fff;
        font-size: 48px;
        line-height: 0;
        opacity: 1;
        outline: none;
        position: absolute;
        right: 1rem;
        text-shadow: 0 0 3px #455152;
        top: 40px;
        z-index: 1; }
    .panomap .modal.fade .modal-dialog {
      transform: translate(0, -32px); }
    .panomap .modal.in .modal-dialog {
      transform: translate(0, 0); } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .panomap .title {
    font-size: 24px; }
  .panomap .hotspots .pano-link {
    height: 48px;
    width: 48px; }
  .panomap .modal-dialog {
    height: 400px;
    margin: 10vh auto 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .panomap .title {
    font-size: 32px;
    margin: 48px 0 0 48px; }
  .panomap .modal-dialog {
    width: 900px;
    height: 500px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .panomap .hotspots .pano-link {
    height: 64px;
    width: 64px; }
  .panomap .modal-dialog {
    width: 1100px;
    height: 700px; }
    .panomap .modal-dialog .close {
      font-size: 64px; } }

/*--------------------------------------------------------------
# Footer section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Footer
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the footer section
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .footer {
    background-color: #1e4d5f;
    font-family: "PerpetuaMTStd"; }
    .footer a {
      color: #fff; }
    .footer .footer-content-wrap {
      display: block;
      position: relative; }
    .footer .footer-content {
      display: block;
      padding: 30px 0;
      width: 100%;
      color: #fff; }
    .footer .footer-main {
      margin-left: auto;
      margin-right: auto; }
    .footer .social-icons {
      color: black;
      font-size: 12px; }
      .footer .social-icons li {
        margin: 0;
        padding: 0; }
      .footer .social-icons a {
        color: inherit; }
        .footer .social-icons a .fa-circle {
          color: #444; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .footer .footer-content {
    padding: 75px 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Sticky float/tabs section - PLEASE DO NOT EDIT THIS FILE!!!
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Sticky float/tabs
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the sticky tabs which are rendered
 * on the right side of the page. These tabs are authored into the experience
 * in the theme's sidebar widgets
 * ----------------------------------------------------------------------------
 * @IMPORTANT - PLEASE DO NOT EDIT THIS FILE!!! A carbon copy of this file 
 * is located in the hpp-base-theme > sass > overrides directory
 * this is where all style and variable overrides should live.
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .sticky-float {
    display: none;
    font-family: "FFMarkWebProBold"; }
    .sticky-float .widget {
      margin: 0; }
    .sticky-float a,
    .sticky-float a:hover {
      text-decoration: none; }
    .sticky-float #floating-toolbar {
      position: fixed;
      top: 22%;
      right: 0;
      width: 75px;
      z-index: 50;
      box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.5); }
    .sticky-float .square {
      background-color: #0a313d;
      color: #fff;
      font-weight: bold;
      text-transform: uppercase;
      font-size: 9px;
      height: 75px;
      border-bottom: 4px solid #fff; }
      .sticky-float .square:hover {
        background-color: #082630;
        cursor: pointer; }
      .sticky-float .square.last {
        border: 0; }
    .sticky-float a:first-of-type .square {
      background-color: #fff;
      color: #0a313d;
      border: 0; }
      .sticky-float a:first-of-type .square:hover {
        background-color: #d9d9d9; }
    .sticky-float .text {
      position: relative;
      top: 50%;
      -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      transform: translateY(-50%); }
      .sticky-float .text img {
        margin-bottom: 5px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .sticky-float {
    display: block; } }

/*--------------------------------------------------------------
# This property's overrides
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Template Name: Maxwell
 * ----------------------------------------------------------------------------
 * The styling related to the Maxwell experience/customization
 *
 * ----------------------------------------------------------------------------
 * Template Parts:
 * ----------------------------------------------------------------------------
 *  1. hero-video
 *  2. explore
 *  3. feature
 *  4. gallery
 *  5. neighborhood
 *  6. developer
 *  7. floorplan
 *  8. contact
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Helpers styles 
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Helpers
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to helper styles
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Global styles 
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Global
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to global styles
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  #video-section,
  #explore-section,
  #features-section,
  #gallery-section,
  #neighborhood-section,
  #developer {
    background-color: #fff; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  body {
    background-image: url("./images/floorplan-tile.png");
    background-position: calc(100vw - 126px) 0;
    background-repeat: repeat-y; } }

/*--------------------------------------------------------------
# Vendor styles 
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Vendor Overrides Styles
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - Overrides for the imported for vendor code
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Flexslider styles  
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Flexslider
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the flexslider plugin
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .flexslider:hover .flex-direction-nav .flex-next,
  .flexslider:hover .flex-direction-nav .flex-prev {
    opacity: .8; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Headroom styles
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Headroom
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the headroom menu plugin
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Slideout styles
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Slideout
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the slideout menu plugin
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Header section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Header
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the header section for both
 * logged in & logged out users
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Hero video section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Hero-video
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to this property's hero video section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .hero-video {
    height: 100vh;
    overflow: hidden; }
    .hero-video .video-background {
      background-position: center;
      background-size: cover;
      background-repeat: no-repeat;
      display: none;
      height: calc(100vh - 80px);
      margin: 80px auto 0;
      overflow: hidden;
      position: relative;
      width: 100vw;
      z-index: -2; }
    .hero-video.is-mobile {
      margin-top: 0; }
    .hero-video.is-mobile .video-background.small {
      display: block; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (max-width: 43.9375em) and (orientation: landscape) {
  .hero-video .play-video-button {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .hero-video .play-video-button {
    margin-top: 0;
    top: auto;
    transform: translate(-50%, 0); }
  .hero-video.is-mobile .video-background.small {
    display: none; }
  .hero-video.is-mobile .video-background.medium {
    display: block; } }

/*--------------------------------------------------------------
# Explore section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Explore
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the explore carousel
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Features section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Features
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the features section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .features .features-1 .slide-content {
    width: 95%; }
  .features .features-3 .slide-content,
  .features .features-6 .slide-content,
  .features .features-7 .slide-content,
  .features .features-9 .slide-content,
  .features .features-12 .slide-content {
    top: auto;
    bottom: 7.5%; }
  .features .features-8 .slide-content,
  .features .features-9 .slide-content,
  .features .features-10 .slide-content {
    color: #0a313d; }
  .features .features-10 img.leed-certified {
    margin: 1rem 0;
    height: 50px;
    width: 50px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 48em) {
  .features .features-3 .slide-content,
  .features .features-6 .slide-content,
  .features .features-7 .slide-content,
  .features .features-9 .slide-content,
  .features .features-12 .slide-content {
    top: auto;
    bottom: 10%; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .features .features-10 img.leed-certified {
    margin: 1.5rem 0;
    height: 100px;
    width: 100px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .features .features-10 img.leed-certified {
    margin: 2rem 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-large-up - (1440px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Gallery section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Gallery
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the gallery carousels
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Neighborhood section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Neighborhood
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the Neighborhood section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Map section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Map
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the Google Maps API integration
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .maps-wrap > div {
    background-color: #fff; }
  .popup-wrap .biz-info-wrap.current {
    color: #1e4d5f; }
  #map-switch-controls > div {
    background-color: #fff;
    color: #1e4d5f; }
    #map-switch-controls > div:hover {
      background-color: #1e4d5f;
      color: #fff;
      cursor: pointer; }
    #map-switch-controls > div.current {
      background-color: #1e4d5f;
      color: #fff; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Developer section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Developer
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the developer section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .developer .dev-prop-link {
    align-items: center;
    background-color: #3fbab8;
    display: flex;
    height: 60px;
    justify-content: center; }
    .developer .dev-prop-link a {
      font-family: "FFMarkWebProBold";
      font-size: 16px;
      text-transform: lowercase; }
  .developer .hero-logo {
    display: none; }
  .developer .hero-image {
    background-position: 0 0; }
  .developer .client-logos {
    margin-bottom: 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .developer .dev-prop-link {
    justify-content: flex-start; }
    .developer .dev-prop-link a {
      padding-left: 40px; }
  .developer .hero-image {
    background-position: 50% 100%; }
    .developer .hero-image:after {
      background-image: url("./images/developer-sprinkles.png");
      background-position: 0 100%;
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      position: absolute;
      height: 100%;
      width: 100%; }
    .developer .hero-image:before {
      content: "";
      background-color: #f36d62;
      border-radius: 50%;
      overflow: visible;
      position: absolute;
      bottom: 0;
      left: 50%;
      height: 100px;
      width: 100px;
      z-index: 1;
      transform: translate(-75%, 45%); }
  .developer .developer-content:before {
    background-image: url("./images/developer-shapes.png");
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 45%; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 75em) {
  .developer .dev-prop-link a {
    padding-left: 60px; } }

/*--------------------------------------------------------------
# floorplan section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Floorplan
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the floorplan section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .floorplan .floor-content.floor-content-below {
    display: none; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .floorplan:after {
    background-image: url("./images/floorplan-shapes.png");
    background-repeat: no-repeat;
    background-size: 30%;
    content: "";
    height: 100%;
    left: 0;
    width: 100%;
    position: absolute;
    top: -5px;
    z-index: -1; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Contact section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Contact
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to contact us section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .contact .cbre-logo {
    width: 50px; }
  .contact .sister-property-image {
    margin: 30px 0 60px;
    height: 50px;
    width: auto; }
  .contact .sister-property-link {
    margin-top: 60px; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .contact .cbre-logo {
    left: -150px;
    position: absolute;
    top: 120px;
    width: 75px; }
  .contact:after {
    background-image: url("./images/contact-shapes.png");
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 40%;
    content: "";
    height: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 0; }
  .contact .content {
    z-index: 1; }
  .contact .sister-property-link {
    margin-top: 80px; }
  .contact .sister-property-image {
    margin-top: 70px; }
  .contact .building {
    display: block; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-only - (991px) < (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Footer section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Footer
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the footer section
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen {
  .footer .social-icons {
    display: none; }
  .footer .property-logo {
    height: 42px;
    margin-right: 50px; }
  .footer .hpp-logo {
    height: 48px; }
  .footer .address {
    display: block;
    margin: 24px 0; }
  .footer .legal-text {
    display: block; }
  .footer .copyright {
    color: #fff;
    font-size: 14px;
    margin: 4px 0 0; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $small-up - (768px) widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
@media only screen and (min-width: 62em) {
  .footer .address {
    display: inline-block;
    margin: 0 45px 0 0; }
  .footer .legal-text {
    display: inline-block; } }

/**
 * ----------------------------------------------------------------------------
 * @breakpoint $large-up - (1200px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/*--------------------------------------------------------------
# Sticky float/tabs section
--------------------------------------------------------------*/
/**
 * ----------------------------------------------------------------------------
 * Section Name: Sticky float/tabs
 * ----------------------------------------------------------------------------
 * @author - Modop
 * @description - The styling related to the sticky tabs which are rendered
 * on the right side of the page. These tabs are authored into the experience
 * in the theme's sidebar widgets
 *
 * ----------------------------------------------------------------------------
 * Sticky Float Contents:
 * ----------------------------------------------------------------------------
 *  1. Download Brochure
 *  2. Email Link
 *  3. Contact
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $x-small-up - All viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */
/**
 * ----------------------------------------------------------------------------
 * @breakpoint $medium-up - (991px) viewport widths up to infinity
 * ----------------------------------------------------------------------------
 */