/***
Byte Main CSS
Version 2 - 2018-02-02 by MD, SP & the Byte Studios Team
 ***/
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
    line-height: 1.15; /* 1 */
    -ms-text-size-adjust: 100%; /* 2 */
    -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
    margin: 0;
}

/**
 * Add the correct display in IE 9-.
 */

article,
aside,
footer,
header,
nav,
section {
    display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

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

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

/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

figcaption,
figure,
main { /* 1 */
    display: block;
}

/**
 * Add the correct margin in IE 8.
 */

figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

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

/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

a {
    background-color: transparent; /* 1 */
    -webkit-text-decoration-skip: objects; /* 2 */
}

/**
 * 1. Remove the bottom border in Chrome 57- and Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font style in Android 4.3-.
 */

dfn {
    font-style: italic;
}

/**
 * Add the correct background and color in IE 9-.
 */

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

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

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

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

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

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

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

/**
 * Remove the border on images inside links in IE 10-.
 */

img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */

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

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

/**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

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

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    box-sizing: border-box; /* 1 */
    color: inherit; /* 2 */
    display: table; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

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

/**
 * Remove the default vertical scrollbar in IE.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

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

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

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

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

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

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
}

/* Interactive
========================================================================== */

/*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

details, /* 1 */
menu {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Scripting
========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
    display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
    display: none;
}

/* Hidden
========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
    display: none;
}
/*! END normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */

/****** Add Boilerplate CSS Here *******/

input {
    /* border: 1px solid #7ab6ac; */
    padding: 4px 20px;
    font: inherit;
}

/****** Common Forms CSS Auto-embed - site specific area *******/
.field-row {
    margin: 10px 8px 0 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-line-pack: start;
        align-content: flex-start;
}
.field-container {
    margin: 10px 0 0 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
.field-container label {
    display: inline-block;
    width: 100%;
    float: none;
    padding: 0;
    font-size: 16px;
    vertical-align: top;
    color: #888;
}
.field-container input {
    width: 100%;
    height: 36px;
    display: block;
    font-size: 16px;
    color: #484067;
    /* border-color: #a69371;  */
    border-color: #4F4754;
}
.field-container input.checkbox {
    width: 12px;
    border: none;
}
.field-container .checkbox-label {
    width: auto;
    display: inline-block;
}
.field-container input[type="checkbox"] {       
    border: none;
    width: auto;
    height: auto;
    display: inline-block;
}
.field-container input[type="radio"] {
    display: inline-block;
    width: auto;
    vertical-align: middle;
    margin-right: .25em;
}
.field-container input[type="file"] {
    border: none;
    background-color: transparent;
    line-height: normal;
}
fieldset {
    padding: 0;
    border: none;
    margin: 0 auto 36px;
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
}
fieldset legend {
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
}
fieldset select, fieldset input {
    width: 100%;
    margin: 0;
    border: 1px solid #aaa;
    padding: 2px 3px;
    font-size: 16px;
    height: 36px;
    color: #888;
    border-color: #a69371;
    border-radius: 0;
    font-style: italic;
}
fieldset select option[disabled] {
    color: #9189b2;
}
input[type="submit"] {
    -webkit-appearance: none;
    border: 1px solid #7ab6ac;
    padding: 4px 20px;
    font: inherit;
    font-weight: bold;
    z-index: 10;
    color: #7BB6AC;
    background: none;
}
.submitbutton {
    border: 1px solid #7ab6ac;
    padding: 4px 20px;
    font: inherit;
    font-weight: bold;
    z-index: 10;
    color: #7BB6AC;
    background: none;
}
input[type="submit"]:disabled,
input[type="submit"]:hover:disabled {
	background-color: #777;
	cursor: progress;
}
.g-recaptcha {		
    display: inline-block;
    vertical-align: top;
    margin-right: -66px;
}
:placeholder-shown,
::-moz-placeholder,
:-moz-placeholder,
:-ms-input-placeholder,
::-webkit-input-placeholder {
    font: inherit;
    color: inherit;
} 
.progress-bar {
    width: 0%;
    height: 3px;
    background-color: #00b2e6;
    margin-top: .25em;
    transition: width .25s;
    position: relative;
}
.progress-bar.complete {
  opacity: 0;
  transition: opacity .25s .5s;
}

/*upload file*/
/*loading animation*/
@keyframes loadingIconAnimation {

  to {
    transform: rotate(360deg);
  }
}
.file-icon {
	display: inline-block;
	font-size: 12px;
	margin: .5em 1em 1em 0;
	vertical-align: middle;
}
.file-icon:before {
	content: "\f15b";
	font: normal normal normal 14px/1 FontAwesome;
	font-size: inherit;
	color: inherit;
	position: relative;
	display: inline-block;
	vertical-align: middle;
	margin-right: .5em;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}
.file-icon.loading:before {
    content: "\f110";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    color: inherit;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    margin-right: .5em;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    animation: infinite 1s loadingIconAnimation;
}
.delete-file {
    font-size: .75em;
    color: #777;
    cursor: pointer;
    transform: translate3d(0,-.75em, 0);
}
.delete-file .fa-stack-2x {
	color: inherit;
}

.full-width {
    width: 100%;
}
.width_50 {
    width: calc(50% - 1em);
}

/****** End Common Forms CSS Auto-embed - site specific area *******/

/* Animations */


/*-------SLIDE UP ON SCROLL---------- */

.create-slide {
    transform: translateY(75px);
	opacity: .5;
}

.create-slide.visible {
	animation: contentSlideUp 1s forwards;
}

@keyframes contentSlideUp {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}
.fade-in {
	opacity: .5;
}

.fade-in.visible {
	animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
	to {
		opacity: 1;
	}
}
.vue-slide-up {
    transform: translateY(75px);
	opacity: .5;
    animation: vueSlideUp 1s forwards;
}

@keyframes vueSlideUp {
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/* Start: alert-block */
.alert-block {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 999;
}
.alert-block.hidden {
	display: none;
}
.alert-block .alert-block-bkgd {
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,.7);
}
.alert-block .alert-block-content {
	max-width: 720px;
	min-width: 720px;
	max-height: calc(100% - 30%);
	padding: 30px;
	box-sizing: border-box;
	background-image: linear-gradient(0deg, #D1D2CE 0%, #FFFFFF 84%);
	background-color: #fff;
	border: 3px solid #4F4754;
	box-shadow: 0 0 5px rgba(0,0,0,.4);
	position: fixed;
	top: 25%;
	left: calc(50% - (720px / 2));
	z-index: 1000;
	overflow: scroll;
}
.alert-block .alert-block-content p {
	margin-bottom: 10px;
	color: #4F4754;
	font-size: 16px;
}
.alert-block .alert-block-content ol {
	margin-bottom: 10px;
	padding: 0 0 0 35px;
}
.alert-block .alert-block-content .close {
	color: #4F4754;
	font-size: 25px;
	position: absolute;
	top: 15px;
	right: 15px;
}
/*--------------------*/

@media only screen and (max-width: 800px) {
	.alert-block .alert-block-content {
		width: calc(100% - 60px);
		min-width: unset;
		max-height: calc(100% - 25px);
		top: 15px;
		left: 30px;
		overflow: scroll;
	}
	.alert-block .alert-block-content .close {
		position: fixed;
		top: 21px;
		right: 43px;
	}
}

@media only screen and (max-width: 450px) {
	.alert-block .alert-block-content {
		width: calc(100% - 20px);
		max-height: calc(100% - 25px);
		padding: 35px 20px 15px 15px;
		top: 15px;
		left: 10px;
		overflow: scroll;
	}
	.alert-block .alert-block-content .close {
		right: 17px;
	}
	.alert-block .alert-block-content p {
		font-size: 14px;
	}
	.alert-block .alert-block-content ol li {
		font-size: 13px;  
	}
}


/* generic custom styles */
body {
    margin: 0;
    -webkit-font-smoothing: antialiased;
    font-family: 'Quicksand', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}
/* body:after {
position: absolute;
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
opacity: 0;
transition: .25s;
} */
body.open {
    overflow: hidden;
}
/* body.open:after {
opacity: 1;
} */

.h1 {
    color: #458484;
    font-family: 'Cardo', serif;
    font-weight: normal;
    font-size: 31.5px;
    line-height: 42px;
}
.h1:after {
    content: '';
    display: block;
    width: 45px;
    height: 2px;
    background-color: #458484;
}
.h2 {
    color: #4F4754;
    font: inherit;
    font-size: 18px;
    font-weight: bold;
}
.page-content h2 {
    margin-bottom: 0;
}
.page-content h2 + p {
    margin-top: 0;
}
.main-content p {
    font: inherit;
    color: #4F4754;
}
.main-content p.center {
    text-align: center;
}
ul {
    list-style: none;
    padding: 0;
    font: inherit;	
    line-height: 18px;
}
ul.green {
    padding: 1em;
    background-color: #458484;
    box-sizing: border-box;
}
ul.green li,
.main-content ul.green li.list-header {
    color: #E8EBE2;
    font-weight: normal;
}
.main-content ul.green li.list-header:before {
    content: none;
}
.main-content ul li.list-header {
    color: #458484;
    font: inherit;
    font-weight: bold;
    margin-bottom: .25em;
}
li {
    color: #4F4754;
}
li:before {
    content: '•';
    margin-right: .5em;
}
li ul {
    padding-left: 2em;
}
li ul li:before {
    margin-right: .5em;
    content: '-';
}

.h1-home {
    color: #458484;
    font-family: 'Cardo', serif;
    font-size: 40px;
    font-weight: normal;
    letter-spacing: 0.97px;
    line-height: 1.25;
    margin: .5em auto .75em;
}
@media screen and (min-width: 768px) {
    .h1-home {
        font-size: 45px;
        letter-spacing: 1px;
        line-height: 61px;
    }
}
.h1-home  span::before {
    /* adds a line break */
    content: "\A";
    white-space: pre;
}
@media screen and (min-width: 1024px) {
    .h1-home span:before {
        content: none;
    }
}
.h1-home:after {
    content: '';
    display: block;
    width: 64px;
    height: 2px;
    background-color: #458484;
}
.h1-home.checkVisible:after {
    width: 0px;
    transition: width .5s .25s;
}
.h1-home.checkVisible.visible:after {
    width: 64px;
}
.h2-home-lrg {
    color: #4F4754;
    font-family: 'Cardo';
    font-size: 22px;
    font-weight: bold;
    line-height: 22px;
}
.h2-home-med {
    color: #4F4754;
    font-family: 'Cardo';
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
}
.home-layout p {
    color: #4F4754;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}

.h3-bucket {
    color: #E8EBE2;
    font-family: 'Cardo', serif;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.25;
    margin: 0 auto;
}
.sidebar p {
    color: #7BB6AC;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.h3-footer {
    color: #4F4754;
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    line-height: 22px;
}
footer p {
    color: #4F4754;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
}
footer .hours p{
    white-space: pre;
}
.blockquote {
    color: #5B9F9F;
    font-family: 'Cardo', serif;
    font-size: 20px;
    line-height: 27px;
    padding: 2em;
    border-top: 0.5px solid #5B9F9F;
    border-bottom: 0.5px solid #5B9F9F;
}

a {
    position: relative;
    color: #458484;
    font: inherit;
    font-weight: bold;
    text-decoration: none;
}
/* @media screen and (min-width: 1024px) {
    a {
        font-size: 18px;
    }
} */
a:hover {
    color: #7BB6AC;
    transition: color .25s;
    -webkit-transition: color .25s;
    -moz-transition: color .25s;
}
a[class^="red"] {
    color: #A7664A;
    font-size: 14px;
    font-weight: 500;
}
a[class^="red"]:after {
    position:absolute; 
    content: '';
    left:0; 
    bottom:0; 
    width:100%; 
    height:1.5px; 
    border-bottom:1px solid #A7664A;
}
a[class^="red"]:hover {
    color: #C78164;
    border-color: #C78164;
}
a[class^="red"]:hover:after {
    background-color: #C78164;
}
a[class^="green"] {
    border-bottom: 2px solid #458484;
    font-weight: 500;
    text-transform: uppercase;
}
a[class*="-lrg"] {
    font-size: 18px;
    font-weight: 500;
}
a.view-more {
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    border-bottom: 1.5px solid #458484;
    text-transform: uppercase;
}
a.view-more:hover {
    border-color: #7BB6AC;
}

a.red-footer {
    border: none;
    font-family: 'Cardo', serif;
    line-height: 19px;
}
.sidebar nav a,
.sidebar a {
    font-size: 14px;
    color: #7BB6AC;
}
.sidebar nav a:hover,
.sidebar a:hover {
    color: #458484;
}
.sidebar nav .subnav a {
    color: #C78164;
}
.sidebar nav .subnav a:hover {
    color: #E8EBE2;
}
.sidebar a.active {
    display: inline-block;
}
.sidebar a.active:after {
    content: '';
    display: block;
    width: 25px;
    height: 1px;
    background-color: #91C8C8;
}
.sidebar a.active:hover:after {
    background-color: #458484;
}

footer .footer-credits p {
    color: #E8EBE2;
}
.footer-credits a {
    text-decoration: underline;
    color: #E8EBE2;
    font-size: 12px;
    font-weight: bold;
    line-height: 15px;
}
.footer-credits a:hover {
    color: #BBBBBB;
}

.img_left_25,
.img_left_50,
.img_right_25,
.img_right_50,
.img_full_width {
    width: 100%;
    margin: .5em auto 1em;
}
@media screen and (min-width: 768px) {
    .img_right_25,
    .img_right_50 {
        float: right;
        width: 50%;
        margin: 1em 0 2em 2em;
    }
    .img_left_25,
    .img_left_50 {
        float: left;
        width: 50%;
        margin: 1em 2em 2em 0;
    }

    .img_full_width {
        width: 100%;
        float: none;
        margin: .5em auto 1em;
    }
}
@media screen and (min-width: 1024px) {
    .img_right_25,
    .img_right_50 {
        float: right;
        width: 50%;
        margin: 1em 0 2em 2em;
    }
    .img_left_25,
    .img_left_50 {
        float: left;
        width: 50%;
        margin: 1em 2em 2em 0;
    }
    .img_right_25,
    .img_left_25 {
        width: 25%;
    }
    .img_full_width {
        width: 100%;
        float: none;
        margin: .5em auto 1em;
    }
}
/*responsive video CSS*/
/*
aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%
*/
.responsive-embed-50-left,
.responsive-embed-50-right,
.responsive-embed-25-left,
.responsive-embed-25-left,
.responsive-embed {
  position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 56.25%;
	padding-top: 25px;
	margin: 0 auto 1em;
}
.responsive-embed-25-left,
.responsive-embed-50-left {
	float: left;
	margin-right: 2em;
}
.responsive-embed-25-right,
.responsive-embed-50-right {
	float: right;
	margin-left: 2em;
}
.responsive-embed-50-right,
.responsive-embed-50-left {
	width: 50%;
	padding-bottom: 20%;
}
.responsive-embed-25-right,
.responsive-embed-25-left {
	width: 25%;
	padding-bottom: 15%;
}
.responsive-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.scroll-to {
    font-family: 'Cardo', serif;
    font-size: 16px;
    color: #DEDEDE;
    letter-spacing: 0.5px;
    text-shadow: 0 4px 8px #000;
    background: rgba(132, 123, 116, .60);
    border: 1px solid #E8EBE2;
    padding: .5em 1em;
    transition: opacity .25s;
}
.scroll-to.hide {
    opacity: 0;
    pointer-events: none;
}
@media screen and (max-width: 767px) {
    .line-break:before {
        content: none;
    }
}
.custom-arrow {
    transform: scale(.7);
}
/*when custom arrow is a left arrow reflect it by giving it negitive scale*/
.left .custom-arrow {
    transform: scale(-.7);
}

/****** Add Header CSS Here *******/
header {
    position: absolute;
    top: 0;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    text-align: center;
    box-sizing: border-box;
    z-index: 100;
    /*padding: 2em 0;*/
    /*justify-content: space-around;*/
    padding: 2em 1em;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
@media screen and (min-width: 768px) {
    header {
        -ms-flex-align: start;
            align-items: flex-start;
    }
}
/* @media screen and (min-width: 1024px) {
} */
@keyframes slideUp {
    to {
        transform: translateY(-100%);
    }
}
header {
    position: absolute;
    top: 0;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
    padding: 2em 5vw;
    transition: padding .25s ease, background-color .25s ease;
}
header.sticky {
    position: fixed;
    background-color: rgba(255, 255, 255, .9);
    transform: translateY(-100%);
    padding: .75em 5vw;
}
header.sticky.hide {
    background-color: rgba(255, 255, 255, .9);
    transform: translateY(-100%);
    padding: .75em 5vw;
    transition: .5s;
}
header.sticky.show {
    background-color: rgba(255, 255, 255, .9);
    transform: translateY(0);
    padding: .75em 5vw;
    transition: .5s;
}

header .social {
    display: none;
}
@media screen and (min-width: 768px) {
    header .social {
        display: block;
    }
}

.site-logo {
    max-width: 175px;
}
@media screen and (min-width: 768px) {
    .site-logo {
        width: 200px;
    }
}
@media screen and (min-width: 768px) {
    .site-logo {
        max-width: none;
    }
}
.site-logo img {
    width: 100%;
    transform: translateY(2px);
}

.menu {
    padding: .5em;
    font-family: 'Cardo', serif;
    font-size: 18px;
    font-weight: bold;
    color: #6F716B;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    background-color: transparent;
    border: none;
}
@media screen and (min-width: 768px) {
    .menu {
        font-size: 19px;
    }
}

/* navigation */
.menu-header {
    position: relative;
    height: 100px;
    display: -ms-flexbox;
    display: flex;
    padding: .25em 1em 0;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-align: center;
        align-items: center;
}
@media screen and (min-width: 768px) {
    .menu-header {
        -ms-flex-pack: justify;
            justify-content: space-between;
        padding: 3.5px 5vw;
        box-sizing: border-box;
    }
}
@media screen and (min-width: 1024px) {
    .menu-header {
        -ms-flex-pack: end;
            justify-content: flex-end;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 10;
    }    
}
a.menu-logo {
    max-width: 175px;
    margin-right: auto;
}
.menu-logo img {
    width: 100%;
    transform: translateY(2px);
}
@media screen and (min-width: 768px) {
    a.menu-logo {
        /* width: 90px; */
        width: 175px;
    }
    .menu-logo img {
        width: 100%;
    }
}
@media screen and (min-width: 1024px) {
    a.menu-logo {
        display: none;
    }
}
nav.main-nav {
    /* position: absolute; */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    transform: translateY(-150%);
    z-index: 101;
    background-color: #fff;
    /* background-color: #BAB87D; */
    background-image: url(/assets/images/nav-bg.png);
    background-size: auto 100vh;
    background-position: 53% top;
    background-repeat: no-repeat;
    pointer-events: none;
    transition: .5s;
}
@media screen and (min-width: 1024px) {
    nav.main-nav {
        background-image: url(/assets/images/nav-bg2x.png);
        background-size: cover;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
    }
}
@media screen and (min-width: 1280px) {
    nav.main-nav {
        overflow: hidden;
    }
}
nav.main-nav canvas[data-snow] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}
nav.main-nav.open {
    transform: translateY(0);
    overflow: scroll;
    pointer-events: auto;
    /* max-height: 99.9vh; */
    /* max-height: calc(100vh - 53px); */
    max-height: 100vh;
}
@media screen and (min-width: 768px) {
    nav.main-nav.open {
        max-height: 100vh;
    }
}
@media screen and (min-width: 1024px) {
    nav.main-nav.open {
        height: 100vh;
        max-height: 100vh;
    }
}
nav ul,
nav li {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
nav.main-nav > ul > li {
    position: relative;
    border-top: .5px solid rgba(67, 48, 77, .5);
    color: #4F4754;
    /* border-bottom: 1px solid rgba(67, 48, 77, .5); */
    padding: 1em 1em;
    box-sizing: border-box;
    /* background-size: 100% auto;
    background-position: center -100%;
    background-repeat: no-repeat; */
    transition: .5s;
}
@media screen and (min-width: 768px) {
    nav.main-nav > ul > li {
        /* padding: 3em 5vw; */
        padding: 3em 2.5vw 3em;
    }
}
@media screen and (min-width: 1024px) {
    nav.main-nav > ul > li {
        padding: 0;
        border-left: .5px solid rgba(67, 48, 77, .5);
        border-top: 0;
        width: calc(100%/5);
        height: auto;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: center;
            align-items: center;
        -ms-flex-line-pack: start;
            align-content: flex-start;
        padding: 15vh 0 0;
        overflow: hidden;
    }
    .main-nav-links div:not(.nav-image) {
        opacity: 0;
    }
    .main-nav-links div:not(.nav-image).slide {
        animation: contentSlideUp 1s forwards;
    }
}
li .nav-image {
    position: absolute;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-blend-mode: lighten;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: .25s;
    opacity: 0;
    pointer-events: none;
}
/* nav.main-nav > ul > li.open {
background-position: center top;
background-color: rgba(183, 222, 207, 0.7);
} */
nav.main-nav > ul > li.open .nav-image {
    opacity: 1;
}
nav li:before,
nav li ul li:before {
    content: none;
}

nav a {
    color: #4F4754;
    font-family: 'Cardo', serif;
    font-weight: normal;
    line-height: 25px;
    text-align: center;
}
nav a:hover {
    color: #6F716B;
}
@media screen and (max-width: 767px) {
    nav.main-nav a {
        font-size: 18px;
        color: #4F4754;
        letter-spacing: 0;
        line-height: 25px;
        text-transform: uppercase;
    }
}
nav a span {
    font-size: 25px;
}
@media screen and (max-width: 768px) {
    nav a span {
        font-size: 18px;
    }
}
@media screen and (min-width: 1280px) {
    nav a span::before {
        /* adds a line break */
        content: "\A";
        white-space: pre;
    }
}
.svg-inline--fa {
    cursor: pointer;
}
nav.main-nav li > .svg-inline--fa {
    margin-left: 0.5em;
    line-height: 2;
    padding: 0 .5em;
    transition: .5s;
}
@media screen and (min-width: 768px) {
    nav.main-nav li > .svg-inline--fa {
        font-size: 30px;
    }
}
@media screen and (min-width: 1280px) {
    nav.main-nav li > .svg-inline--fa {
        display: none;
    }
}
nav.main-nav li.open .svg-inline--fa {
    transform: rotate(-180deg);
}
nav .subnav {
    display: none;
    padding: 1em 0;
}
@media screen and (min-width: 1024px) {
    nav .subnav {
        display: block;
    }
}
/* nav .subnav.open {
display: block;
} */
nav .subnav a {
    color: #4F4754;
    font-family: 'Quicksand', sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 16px;
}
@media screen and (max-width: 768px) {
    nav .subnav a {
        font-size: 16px;
        display: block;
        text-align: left;
        line-height: 1.75;
    }
}
@media screen and (min-width: 768px) {
    nav .subnav a {
        font-size: 16px;
        display: block;
        text-align: left;
        line-height: 2.5;
        text-transform: capitalize;
    }
}
@media screen and (min-width: 768px) {
    nav .main-nav-links a {
        font-size: 18px;
        text-transform: uppercase;
        vertical-align: middle;
    }
}
/* secondary mobile nav */
ul.secondary-nav-links {
    background-image: linear-gradient(0deg, #D1D2CE 0%, #FFFFFF 84%);
    padding-bottom: 53px;
}
@media screen and (min-width: 768px) {
    .secondary-nav-links {
        display: none;
        padding-bottom: 0;
    }
}
nav.main-nav > ul.secondary-nav-links > li {
    color: #458484;
    white-space: nowrap;
}
@media screen and (min-width: 768px) {
    nav.main-nav > ul.secondary-nav-links > li {
        white-space: normal;
    }
}
nav.main-nav > ul.secondary-nav-links > li.open {
    background: none;
}
ul.secondary-nav-links .subnav.open{
    padding: .5em 0;
}
nav ul.secondary-nav-links > li > a {
    color: #458484;
}
ul.secondary-nav-links .subnav a {
    font-size: 14px;
    font-weight: 500;
}
.menu-footer {
    transform: translateY(100%);
    opacity: 0;
    transition: .5s .35s;
}
@media screen and (min-width: 1024px) {
    .menu-footer {
        position: relative;
    }
}
.open .menu-footer {
    transform: translateY(0);
    opacity: 1;
}
.menu-footer .footer-credits a,
.menu-footer .footer-credits p {
    font-family: inherit;
}
/* social links mobile nav */
.social-links a {
    padding: .25em;
}

/* quick links mobile nav */
ul.secondary-nav-links .quick-links a {
    display: block;
    text-align: left;
    padding: .25em 0;
    color: #A7664A;
    text-transform: capitalize;
}
ul.secondary-nav-links .quick-links a:hover {
    color: #C78164;
}

/****** Add Body CSS Here *******/
/* nav,
.main-content,
.footer-wrapper {
max-width: 1280px;
margin: 0 auto;
} */

/* home-layout */
/* home navigation */
@media screen and (min-width: 1024px) {
    ul.main-nav-links {
        display: -ms-flexbox;
        display: flex;
        /* height: 60vh; */
        -ms-flex-align: stretch;
            align-items: stretch;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-line-pack: stretch;
            align-content: stretch;
        text-align: center;
        -ms-flex: 1;
            flex: 1;
        min-height: 500px;
    }
}
@media screen and (min-width: 1024px) {
    .main-nav-links div:not(.nav-image) {
        min-height: 320px;
        /* alignment experiment */
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-align: center;
            align-items: center;
    }
}
nav.main-nav .fa-angle-down {
    padding: .75em;
    vertical-align: middle;
}
@media screen and (min-width: 1024px) {
    nav.main-nav .fa-angle-down {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    nav.main-nav li .nav-image {
        background-size: auto 100%;
        background-position: -30vw center;
        background-position: center;
        transform: scale(1);
        transition: .75s;
    }
}
@keyframes backgroundZoom {
    to {
        transform: scale(1.25);
    }
}
@media screen and (min-width: 1024px) {
    nav.main-nav li:hover .nav-image {
        opacity: 1;
        /* transform-origin: top; */
        animation: backgroundZoom 10s linear;
    }
}
@media screen and (min-width: 1024px) and (-ms-high-contrast: active), 
(-ms-high-contrast: none) {
    nav.main-nav li .nav-image:after {
      content: "";
      background: rgba(255, 255, 245, 0.8);
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
}
@media screen and (min-width: 1024px) {
    nav .main-nav-links a {
        font-size: 18px;
        width: 100%;
    }
}
@media screen and (min-width: 1024px) {
    nav .main-nav-links > li > div > a:after {
        display: block;
        content: '';
        /* width: 85%; */
        width: calc(100vw/5 - 8vw);
        /* max-width: 125px; */
        height: 1px;
        background-color: #4F4754;
        margin: 0.75em auto 0;
    }
}
@media screen and (min-width: 1024px) {
    nav a span::before {
        /* adds a line break */
        content: "\A";
        white-space: pre;
    }
}
@media screen and (min-width: 1024px) {
    nav .main-nav-links .subnav a {
        font-size: 13px;
        line-height: 2;
    }
}
.menu-footer .hours p {
    white-space: pre;
}
/* home content */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .main-content {
        overflow-x: hidden;
    }
    .main-content [class*="content"] {
        overflow: visible;
    }
}
.page-header  {
    position: relative;
    width: 100%;
    height: calc(100vh - 2em);
    max-height: 608px;
    max-height: 850px;
    padding: 0 1vw;
    text-align: center;
    box-sizing: border-box;
}
.home-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-size: auto 150%;
    background-position: center top;
    background-repeat: no-repeat;
}
/* @media screen and (min-width: 768px) {
    .home-hero {
        max-height: 645px;
        background-position: left top;
    }
} */
@media screen and (min-width: 1024px) {
    .home-hero {
        background-position: center top;
        background-size: cover;
        height: 100%;
        max-height: initial;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .page-header {
        max-height: initial;
        max-height: 880px;
    }
}
.page-header .scroll-to {
    position: relative;
    margin-top: 55vh;
}
@media screen and (max-width: 768px) {
    .page-header .scroll-to {
        margin-top: 45vh;
    }
}
@media screen and (min-width: 1024px) {
    .page-header .scroll-to {
        display: none;
        /* margin-top: 75%; */
        position: absolute;
        bottom: 130px;
        left: 50%;
        transform: translateX(-50%);
    }
}
.content {
    overflow: auto;
    overflow: unset;
    position: relative;
}
@media screen and (min-width: 768px) {
    .content {
        overflow: inherit;
    }
}
[class^="content"] {
    display: block;
    width: 100%;
    padding: .25em 1em;
    background-size: auto 100%;
    background-position: left center;
    background-repeat: no-repeat;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    [class^="content"] {
        padding: 1.5em 3.5vw 150px;
        background-size: cover;
        background-position: center top;
    }
}
[class*="-overlap"] {
    overflow: visible;
}
[class^="content-item"] {
    position: relative;
    background-color: #fff;
    background-image: linear-gradient(0deg, #D1D2CE 0%, #FFFFFF 84%);
    padding: 1em;
    box-sizing: border-box;
    margin-bottom: 1em;
}
[class*="-overlap"] [class^="content-item"] {
    padding-top: .25em;
    transform: translateY(-20vh);
}
@media screen and (min-width: 768px) {
    [class*="-overlap"] [class^="content-item"] {
        transform: translateY(-7vh);
        margin-bottom: 3em;
    }
}
@media screen and (max-height: 650px) {
    [class*="-overlap"] [class^="content-item"] {
        transform: translateY(-12vh);
    }
}
[class*="-bg-none"] {
    background: transparent;
    padding: 0;
}
.bg-img-loader {
    display: none;
}

/* home exhibitions & events */
@media screen and (min-width: 768px) {
    #events, #exhibitions {
        padding: 1.5em 3.5vw 1em;
    }
}

@media screen and (min-width: 1024px) {
    #home-events {
        -ms-flex-pack: center;
            justify-content: center;
    }
}
@media screen and (min-width: 1024px) {
    #exhibitions {
        margin-right: 2.5vw;
    }
}
@media screen and (min-width: 1024px) {
    #exhibitions,
    #events {
        max-width: calc(517px - 1.25vw);
    }
}
@media screen and (min-width: 1024px) {
    section.content-overlap {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-align: start;
            align-items: flex-start;
    }
}
@media screen and (min-width: 1024px) {
    [class*="-overlap"] [class^="content-item"] {
        width: calc(50% - 1em);
    }
}
.event-list.swiper-container {
    margin-bottom: 1em;
}
.event-item a {
    margin-bottom: 2em;
}
.event-item {
    /*margin-bottom: 2em;*/
    display: -ms-flexbox;
    display: flex;
    /*flex-direction: column;*/
    -ms-flex-align: start;
        align-items: flex-start;
}
@media screen and (min-width: 768px) {   
    .event-item .details {
        -ms-flex: 1;
            flex: 1;
    }
}
@media screen and (min-width: 768px) {
    .event-item {
        margin-bottom: 2em;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.event-controller{ 
    position: absolute;
    top: 2.25em;
    right: 1em;
}
@media screen and (min-width: 768px) {
    .event-controller {
        top: auto;
        bottom: 2.25em;
    }
}
.date {
    width: 56px;
    font-family: 'Cardo';
    font-size: 26px;
    font-weight: normal;
    color: #A7664A;
    letter-spacing: 0;
    padding: .25em .5em;
    padding: .15em;
    text-align: left;
    border: solid 1px #A7664A;
    margin: 0 .5em .5em 0;
    box-sizing: border-box;
    text-align: center;
    float: left;
}
.date span {
    display: block;
    font-size: 14px;
    font-weight: normal;
    line-height: 16px;
    line-height: 1;
}
.date span.day {
    font-size: 30px;
}
.details h2:first-child {
    margin-top: 0;
}
.details p:last-of-type {
    margin-bottom: 0;
}
.details .h2-home-med {
    margin-bottom: 0;
}
p.date-text {
    margin-top: 0;
    /* clear: left; */
}
.event-item .preview {
    margin-top: 1em;
}
.img-grp {
    margin-top: 1em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
    .img-grp {
        -ms-flex-wrap: initial;
            flex-wrap: initial;
    }
}
.img-grp div:first-child {
    margin-right: 1em;
}
.img-grp img {
    width: 100%;
}
.img-grp p {
    margin-top: 0;
}
.content-item .green-lrg {
    display: inline-block;
    margin-bottom: 1.5em;
}

/* explore villa */
[class*="-controller"] button {
    padding: 0;
    color: #E8EBE2;
    font-size: 38px;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    border: none;
    transition: color .25s;
}
[class*="-controller"] button:hover {
    color: #BABABA;
}
[class*="-controller"] button:focus {
    color: #E8EBE2;
}
[class*="-controller"] button .fa-square-full {
    color: #4f4753;
    transition: color .25s;
}
[class*="-controller"] button.swiper-button-disabled .fa-square-full {
    /* color: rgba(79, 71, 84, .3); */
    color: #cac7cb;
}
@media screen and (min-width: 768px) {
    .room-item {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-align: start;
            align-items: flex-start;
    }
}
.room-details.swiper-container {
    margin-bottom: 3em;
    margin-left: 0;
}
@media screen and (min-width: 768px) {
    .room-image.swiper-container {
        -ms-flex: 1;
            flex: 1;
        height: 630px;
        /* transform: translateY(-275px); */
        margin-top: -275px;
    }
}
@media screen and (min-width: 1024px) {
    .room-image.swiper-container {
        max-width: calc(50% - 1em);
        margin-right: 0;
    }
}
@media all and (-ms-high-contrast:none) and (min-width: 768px) {
    .room-image.swiper-container {
        margin-right: auto;
    }
}
@media screen and (min-width: 768px) {
    .room-details.swiper-container {
        width: 260px;
        margin-right: 3em;
    }
}
.collection-image.swiper-container {
    position: absolute;
    top: 260px;
}
.story-image.swiper-container .swiper-slide,
.room-image.swiper-container .swiper-slide {
    width: 100%;
    height: 355px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
    .room-image.swiper-container .swiper-slide {
        height: 100%;
    }
}
.explore-villa {
    position: relative;
}
.room-controller,
.collection-controller,
.story-controller {
    position: absolute;
    bottom: 355px;
    transform: translateY(75%);
    right: 1em;
    z-index: 10;
}
.room-controller {
    bottom: 0;
    transform: none;
    max-width: 50px;
}
/*TS: added rentals id target for now, perhaps there sould be a class in common with all these elements*/
.room-controller button,
.collection-controller button,
#rentals button,
.story-controller button {
    display: block;
    margin: 0 0 .25em;
}

.mobile-nav-buttons {
    display: none;
}
@media screen and (max-width: 768px) {
    .mobile-nav-buttons {
        position: fixed;
        /* top: calc(100vh - 53px); */
        top: auto;
        bottom: 0;
        left: 0;
        width: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: distribute;
            justify-content: space-around;
        background-image: linear-gradient(-180deg, #458484 0%, #305252 100%);
        box-shadow: 0 -3px 4px 0 rgba(0,0,0,0.35);
        z-index: 10;
    }
}
@media screen and (min-width: 768px) {
    .mobile-nav-buttons {
        display: none;
    }
}
@media screen and (max-width: 500px) {
    .mobile-nav-buttons a {
        padding: .75em 5vw;
    }
}
@media screen and (max-width: 767px) {
    .mobile-nav-buttons a {
        font-family: 'Cardo';
        font-weight: bold;
        font-size: 14px;
        color: #E9EBE3;
        letter-spacing: 0;
        line-height: 16px;
        /*padding: .75em 0;*/
        /* min-height: 53px; */
        box-sizing: border-box;
    }
}
@media screen and (min-width: 501px) and (max-width: 767px) {
    .mobile-nav-buttons a {
        padding: .75em 9vw;
    }
}
@media screen and (max-width: 767px) {
    .mobile-nav-buttons a:after {
        position: absolute;
        top: 50%;
        right: 0;
        content: '';
        display: block;
        width: 1px;
        height: 85%;
        background-color: #5B9F9F;
        transform: translateY(-50%);
    }
}
@media screen and (max-width: 767px) {
    .mobile-nav-buttons a:last-child:after {
        content: none;
    }
}
/* home collection */
@media screen and (min-width: 768px) {
    #colnik_collection {
        width: 55%;
        margin-top: 2em;
        margin-left: auto;
        margin-right: 0;
    }
}
@media screen and (min-width: 1024px) {
    #home-collection {
        padding-bottom: 0;
        z-index: 10;
    }
}
@media screen and (min-width: 1024px) {
    #home-collection [class*="content-item"] {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}
@media screen and (min-width: 1024px) {
    #colnik_collection {
        width: 50%;
    }
}
@media screen and (min-width: 1024px) {
    .explore-collection .overview {
        margin-bottom: -175px;
    }
}
@media screen and (min-width: 768px) {
    #colnik_collection span::before,
    .red-lrg span::before {
        content: none;
    }
}
#home-collection .bg-accent {
    display: none;
}
@media screen and (min-width: 768px) {
    #home-collection .bg-accent {
        display: block;
        position: absolute;
        bottom: 0;
        right: 0;
        transform: translateX(60%);
        width: 500px;
    }
}
@media screen and (min-width: 1280px) {
    #home-collection .bg-accent {
        transform: translateX(30%);
    }
}
.explore-collection {
    position: relative;
    margin-bottom: 3em;
}
@media screen and (min-width: 768px) {
    .explore-collection {
        position: static;
    }
}
@media screen and (min-width: 1024px) {
    .explore-collection {
        position: relative;
        width: 75%;
        max-width: 705px;
        margin: 0 auto;
    }
}
[class*="-thumbnail-controller"] {
    display: none;
}
@media screen and (min-width: 768px) {
    [class*="-thumbnail-controller"] {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin: 1.25em 0;
    }
}
.collection-item.swiper-container {
    margin-top: 115px;
    padding-top: 235px;
    background-image: linear-gradient(0deg, #D1D2CE 0%, #FFFFFF 84%);
}
@media screen and (min-width: 768px) {
    .collection-item.swiper-container {
        padding-top: 0;
        position: static;
    }
}
.collection-image.swiper-container {
    max-width: 270px;
    transform: translateX(-20vw) translateY(-75px);
    z-index: 10;
}
@media screen and (min-width: 768px) {
    .collection-image.swiper-container {
        position: absolute;
        width: 526px;
        max-width: unset;
        top: 0;
        top: -100px;
        left: 10vw;
        left: -6vw;
    }
}
@media screen and (min-width: 1024px) {
    .collection-image.swiper-container {
        top: -125px;
        /* top: -175px; */
        left: 0;
        /* transform: translateX(-15vw) translateY(-75px); */
        transform: translateX(-80%) translateY(-275px);
        z-index: 10;
    }
}
@media screen and (min-width: 1024px) {
    .collection-item.swiper-container {
        max-width: 300px;
        margin-top: 0;
        margin-left: 0;
        transform: translateY(5vw);
        padding-bottom: 120px;
    }
}
@media screen and (min-width: 1024px) {
    .collection-image .swiper-wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
            align-items: center;
    }
}
.collection-image img {
    width: 100%;
    opacity: 0;
    transition: opacity .75s;
}
@media screen and (max-width: 767px) {
    .collection-image .swiper-slide,
    .collection-image .swiper-wrapper,
    .collection-image.swiper-container {
        max-height: 350px;
    }
    .collection-image img {
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
    }
}
.collection-image.swiper-slide-active img {
    opacity: 1;
}
p.collection-title {
    font-family: 'Cardo';
    font-size: 22px;
    color: #458484;
    letter-spacing: 0;
    line-height: 22px;
    margin-bottom: .25em;
}
.collection-details {
    box-sizing: border-box;
    padding: 1em;
    /* transform: translateY(-145px); */
}
@media screen and (min-width: 768px) {
    .collection-details {
        transform: translateY(0);
        padding: 3em 4em;
        box-sizing: border-box;
    }
}
.collection-details p {
    /*margin: 5px 0 0;*/
    margin: 2px 0 0;
    /*margin-top: 0;*/
}
.collection-desc:before,
.collection-desc:after {
    content: '';
    display: block;
    width: 38px;
    height: 2px;
    background-color: #458484;
    margin-top: .25em;
}
.collection-desc:after {
    background-color: #A7664A;
}
.collection-controller {
    top: 0;
    z-index: 10;
}
.collection-item .meta {
    white-space: pre;
    margin-top: 1em;
}
@media screen and (min-width: 768px) {
    .collection-controller {
        /*top: 200px;*/
        top: 375px;
        left: 0;
        right: auto;
        z-index: 10;
    }
}
@media screen and (min-width: 1024px) {
    .collection-controller {
        top: auto;
        bottom: 120px;
        /* left: 12vw; */
        left: 0;
        transform: translateX(-50%) translateY(75%);
    }
}
@media screen and (min-width: 768px) {
    .item-thumbnail.swiper-pagination-bullet {
        display: block;
        position: relative;
        width: 50px;
        height: 50px;
        margin-right: 1em;
        margin-bottom: 1em;
        background-color: transparent;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 0;
        border: none;
        opacity: 1;
    }
}
@media screen and (min-width: 768px) {
    .item-thumbnail:after {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        content: '';
        width: 100%;
        height: 100%;
        background-color: rgba(190, 175, 141, .65);
        transition: .25s;
    }
}
@media screen and (min-width: 768px) {
    .item-thumbnail.swiper-pagination-bullet-active {
        background-color: transparent;
        border-radius: 0;
        border: none;
        opacity: 1;
    }
}
@media screen and (min-width: 768px) {
    .item-thumbnail.swiper-pagination-bullet-active:after {
        background-color: rgba(190, 175, 141, 0);
    }
}
@media screen and (min-width: 768px) {
    .explore-collection .overview {
        width: 55%;
        margin-left: auto;
        margin-right: 0;
    }
}
@media screen and (min-width: 1024px) {
    .explore-collection .overview {
        width: 50%;
    }
}
/*[class="content-item"]*/
.h2-home-lrg + p {
    margin-top: 5px;
}
.h2-home-lrg {
    margin-bottom: 0;
}

/* home story */
#our_story {
    /* margin: 2.5em auto 10em; */
    margin: 2.5em auto 300px;
}
@media screen and (min-width: 768px) {
    #our_story {
        position: static;
        margin: 225px 0 5vw auto;
        padding: 110px 10vw 5vw;
        max-width: 70vw;
    }
}
@media screen and (min-width: 1024px) {
    #our_story {
        position: relative;
        max-width: 515px;
        width: 60%;
        /* margin: 225px 0 5vw auto; */
        margin: 225px auto 5vw;
        padding: 1.5vw 5.5vw 5vw;
        transform: translateX(202.5px);
    }
}
@media screen and (min-width: 1024px) {
    #home-explore [class*="content-item"] {
        max-width: 1080px;
        margin: 0 auto;
    }
}
.explore-stories {
    position: relative;
}
@media screen and (min-width: 768px) {
    .explore-stories {
        position: static;
    }
}
.story-details {
    padding-bottom: 6em;
}
@media screen and (min-width: 1024px) {
    .story-details {
        padding-bottom: 0;
    }
}

.story-image.swiper-container .swiper-slide {
    height: 253px;
}
.story-image .video-slide {
    width: 100%;
    height: 100%;
    background-image: radial-gradient(50% 225%, rgba(62, 162, 162, 0.7) 0%, rgba(69, 132, 132, 0.7) 100%);
}
.video-slide iframe {
    width: 100%;
    height: 100%;
}
@media screen and (min-width: 768px) {
    .story-image.swiper-container .swiper-slide {
        height: 100%;
        background-position: center;
    }
}
.story-image.swiper-container {
    position: absolute;
    bottom: 0;
    width: 100%;
    transform: translateY(80%);
}
@media screen and (min-width: 768px) {
    .story-image.swiper-container {
        bottom: auto;
        top: 0;
        left: 5vw;
        width: 50vw;
        height: 50vw;
        transform: translateY(-50px);
    }
}
@media screen and (min-width: 1024px) {
    .story-image.swiper-container {
        left: 0;
        transform: translateX(-100%) translateY(-3vw);
        /* transform: translateX(-100%) translateY(-13vw); */
        width: 45vw;
        max-width: 405px;
        max-height: 520px;
    }
}
.story-controller {
    right: 2em;
    bottom: 60px;
    z-index: 10;
}
@media screen and (min-width: 768px) {
    .story-controller {
        bottom: auto;
        top: 100px;
        left: 52.5vw;
    }
}
@media screen and (min-width: 1024px) {
    .story-controller {
        left: 0;
        top: 0;
        transform: translateY(-25%) translateX(-50%);
        right: auto;
    }
}

/* rent space */
#rentals {
    margin-top: 2.5em;
    /* margin-bottom: 235px; */
    margin-bottom: 345px;
    z-index: 10;
}
@media screen and (min-width: 768px) {
    #rentals {
        width: 70%;
        margin-left: auto;
        margin-top: 30vw;
        margin-bottom: 235px;
        padding: 1em 3em 3em;
    }
}
@media screen and (min-width: 1024px) {
    #rentals {
        max-width: 478px;
    }
}
@media screen and (min-width: 1280px) {
    #rentals {
        margin: 15vw auto;
        margin-right: 0;
        transform: translateX(-50%);
    }
}
.content.rentals {
    background-size: cover;
    max-height: 1000px;
}
.rental-bg {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: calc(100%);
    background-size: cover;
}
@media screen and (min-width: 768px) {
    .rental-bg {
        bottom: 0;
        right: 0;
        width: 30vw;
        height: calc(100% + 3em);
    }
}
.rental-slider.swiper-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
@media screen and (min-width: 768px) {
    .rental-slider.swiper-container {
        top: 0;
        bottom: auto;
        width: 70vw;
        height: 100%;
    }
}
.rental-image.swiper-slide,
.swiper-container-autoheight .swiper-slide.rental-image {
    display: block;
    width: 100vw;
    height: 445px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
    .rental-image.swiper-slide, 
    .swiper-container-autoheight .swiper-slide.rental-image {
        height: 100%;
    }
}
.rental-details {
    position: relative;
}
@media screen and (max-width: 767px) {
    .rental-controller {
        position: absolute;
        right: .75em;
        bottom: 1em;
        transform: translateY(50%);
    }
}
@media screen and (min-width: 768px) {
    .rental-controller {
        position: absolute;
        top: 50%;
        left: -20px;
    }
}
@media screen and (min-width: 768px) {
    .rental-controller button {
        display: block;
    }
}

/* primary pages */
.primary {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-direction: column;
            flex-direction: column;
    /* background-image: url(/assets/images/primary-bg.png);
    background-size: cover; */
}
@media screen and (min-width: 1024px) {
    .primary {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
@media screen and (min-width: 1024px) {
    .primary header {
        -ms-flex-pack: end;
            justify-content: flex-end;
        -ms-flex-align: center;
            align-items: center;
        width: 70vw;
        right: 0;
    }
}
@media screen and (min-width: 1024px) {
    .primary header .site-logo {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    .primary header .social {
        display: block;
        -ms-flex-order: 1;
            order: 1;
        margin-left: 1em;
    }
}
@media screen and (min-width: 768px) {
    .primary .main-content {
        padding: 112px 5vw 15vw;
    }
}
.primary-img {
    display: none;
}
.primary .primary-img {
    display: block;
    width: calc(50% + 2.5vw);
    height: calc(40vw);
    background-size: cover;
    margin-top: 5vw;
    margin-right: -5vw;
    width: 100%;
    margin-right: auto;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .primary .primary-img {
        width: 70%;
        height: 60vw;
        margin-right: auto;
        -ms-flex-order: 1;
            order: 1;
    }
}
@media screen and (min-width: 1024px) {
    .primary .primary-img {
        width: calc(50% + 2.5vw);
        height: 40vw;
        margin-right: -5vw;
    }
}
.primary .breadcrumbs {
    margin-bottom: 1em;
    width: 100%;
    padding-left: 5vw;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .primary .breadcrumbs {
        margin-left: 20%;
    }
}
@media screen and (min-width: 1024px) {
    .breadcrumbs {
        display: none;
    }
}
.breadcrumbs a {
    font-family: 'Cardo', serif;
    font-weight: bold;
    font-size: 14px;
    color: #6F716B;
}
.breadcrumbs a.active {
    color: #458484;
}
.breadcrumbs a .svg-inline--fa {
    margin-left: .25em;
    margin-right: .25em;
}
.breadcrumbs a:last-child .svg-inline--fa {
    display: none;
}
.primary .main-content {
    padding: 7.5vw 5vw 5vw;
    display: block;
    box-sizing: border-box;
    -ms-flex: 1;
        flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* padding: 0; */
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-pack: center;
        justify-content: center;
    padding-top: 112px;
    background-image: url(/assets/images/primary-bg.png);
    background-size: cover;
    z-index: 10;
}
[type="variable"],
[data-remove="true"] {
    display: none;
    -ms-flex-order: 100;
        order: 100;
}
@media screen and (min-width: 768px) {
    .primary .main-content {
        padding: 112px 5vw 15vw;
        min-height: calc(100vh - 387.09px);
    }
}
.first-abstract {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: end;
        align-items: flex-end;
}
@media screen and (min-width: 768px) {
    .first-abstract {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.abstract-video {
    position: relative;
    -ms-flex: 1;
        flex: 1;
    width: 100%;
    height: 0;
    padding-bottom: 46%;
}
@media screen and (min-width: 768px) {
    .abstract-video {
        width: auto;
    }
}
.abstract-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}
.page-content .first-image {
    width: 200px;
    margin-right: 0;
    margin-left: 2.5vw;
    display: block;
    transform: translateY(60px);
}
.abstract {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 100px;
    padding: 2em 5vw;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
}
@media screen and (min-width: 768px) {
    .abstract {
        margin-bottom: 200px;
        max-width: 70vw;
        -ms-flex-direction: row;
            flex-direction: row;
    }
    .abstract.last {
        margin-bottom: 0;
    }
}
.abstract .text {
    max-width: 80%;
    margin-bottom: 1em;
    /* flex: 1; */
}
@media screen and (min-width: 768px) {
    .abstract .text {
        margin-bottom: 0;
    }
}
.abstract:first-of-type {
    padding: 0;
    margin-top: 50px;
}
.abstract:first-of-type ~ .abstract .text {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .abstract:first-of-type ~ .abstract .text {
        width: calc(50% - 1em);
    }
}
.abstract:first-of-type .text {
    margin-left: auto;
    margin-right: 5vw;
}
.abstract:first-of-type ~ .abstract:nth-child(even) {
    background: linear-gradient(0deg, #EFEFEF 0%, #FFFFFF 84%);
}
.abstract-image {
    height: 400px;
    width: 100%;
    -ms-flex-order: -1;
        order: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
    .abstract-image {
        width: calc(50% - 2em);
        margin-top: -5em;
        margin-bottom: -5em;
    }
}
.abstract:first-of-type ~ .abstract:nth-child(even) .abstract-image {
    -ms-flex-order: 1;
        order: 1;
}

.last-abstract {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-align: end;
        align-items: flex-end;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-bottom: 3em;
}
@media screen and (min-width: 768px) {
    .last-abstract {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.last-abstract .featured-image {
    -ms-flex: 1;
        flex: 1;
    margin-bottom: 75px;
    max-width: 100%;
}
@media screen and (min-width: 768px) {
    .last-abstract .featured-image {
        max-width: initial;
    }
}
.last-abstract .last-image {
    width: 200px;
    margin-right: 2.5vw;
}
.abstract:first-of-type ~ .abstract.last .text {
    width: 80%;
    max-width: 80%;
    margin-left: auto;
    margin-right: 0;
}

/* host your event landing page */
.gallery-preview {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    max-width: 670px;
    margin: 0 auto;
    transform: translateY(-50%);
}
.gallery-preview .spaces, 
.gallery-preview .private,
.gallery-preview .weddings {
    width: calc(100%/3);
    position: relative;
    height: 0;
    padding-bottom: 33.33%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border: 3px solid #E9EBE3;
    box-shadow: 4px 4px 4px rgba(0,0,0,.21);
    box-sizing: border-box;
}
@-moz-document url-prefix() { 
    .gallery-preview .spaces, 
    .gallery-preview .private,
    .gallery-preview .weddings {
        height: 200px;
    }
}
.weddings {
    transform: scale(1.5);
    z-index: 10;
}
a.preview-link {
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(79,71,84,0.65);
    display: block;
    padding: 1em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    opacity: 0;
    transition: .5s;
}
a.preview-link:hover {
    opacity: 1;
}
.preview-link p {
    font-size: 12px;
    color: #E9EBE3;
    letter-spacing: 0;
    line-height: 1.5;
    margin-top: .25em;
    border-bottom: 1px solid #fff;
    text-transform: uppercase;
}
.rental-links {
    max-width: 100%;
    margin: 2em auto;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-line-pack: end;
        align-content: flex-end;
    -ms-flex-align: end;
        align-items: flex-end;
    box-sizing: border-box;
}
.rental-links a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: end;
        justify-content: flex-end;
    padding: 0 1em;
    box-sizing: border-box;
    box-shadow: none;
    border: none;
    /* max-width: calc(100%/3); */
    height: 100%;
    text-align: center;
}
.rental-links .icon {
    max-width: 70px;
    max-height: 50px;
}
.primary .rental-links .icon {
    max-width: 95%;
    max-height: 70px;
}
@media screen and (min-width: 768px) {
    .primary .rental-links .icon {
        max-width: 100px;
    }
}
.rental-links a.private {
    padding-top: .5em;
    border-left: solid 1px #6F716B;
    border-right: solid 1px #6F716B;
}
.main-content .rental-links p {
    margin-top: .25em;
    margin-bottom: 0;
    font-size: 12px;
    color: #A7664A;
    letter-spacing: 0;
    line-height: 1.25;
    border-bottom: 1px solid #A7664A;
}
.primary .main-content .rental-links p {
    font-size: 14px;
}

/* exhibitions and events landing page */
.events-preview {
    width: 100%;
    margin: 2.5em 5vw;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: start;
        align-items: flex-start;
}
@media screen and (min-width: 768px) {
    .events-preview {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.exhibition-item {
    margin-bottom: 2em;
}
p.ex-title,
p.ex-subtitle {
    font-family: 'Cardo', serif;
    font-weight: bold;
    font-size: 18px;
    color: #4F4754;
    letter-spacing: 0;
    line-height: 1;
    margin: 0;
}
p.ex-subtitle {
    font-size: 16px;
}
p.ex-date,
p.ex-now {
    margin-bottom: 0;
    font-size: 14px;
    color: #4F4754;
}
p.ex-now {
    color: #A7664A;
    margin-top: 0;
}
.events-preview [class^="upcoming"] {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 7em;
}
@media screen and (min-width: 768px) {
    .events-preview [class^="upcoming"] {
        width: calc(50% - 1em);
        margin-bottom: 0;
    }
}
.upcoming-exhibitions {
    background-color: #7BB6AC;
    padding: 1em;
}
.ex-links {
    transform: translateY(100%);
    padding-top: 1em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
.ex-links a.view-more {
    font-size: 18px;
}
.upcoming-events > a.view-more {
    -ms-flex-item-align: end;
        align-self: flex-end;
    font-size: 18px;
    float: right;
}
.ex-item,
.upcoming-events .event-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-direction: column;
        flex-direction: column;
    margin: 2em auto 3em;
    padding-bottom: 3em;
    border-bottom: 1px solid #6F716B;
}
@media screen and (min-width: 768px) {
    .ex-item,
    .upcoming-events .event-item {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.ex-item,
.upcoming-events .event-item:last-of-type {
    border: none;
    padding-bottom: 0;
}
.ex-item .ex-preview {
    width: calc(50% - 1em);
    margin-left: -3em;
    margin-right: 1.5em;
}
.ex-item .ex-details {
    -ms-flex: 1;
        flex: 1;
}

.main-content.secondary.hero .h1:after {
    width: 100%;
}
a.back-link {
    display: none;
}
@media screen and (min-width: 768px) {
    a.back-link {
        display: block;
        position: absolute;
        top: 2em;
        right: 2em;
    }
}
a.view-more.light {
    color: #fff;
    border-color: #fff;
}
h2.dark,
h1.dark {
    font-family: 'Cardo', serif;
    font-size: 31.5px;
    color: #4F4754;
}
h2.dark:after,
h1.dark:after {
    background-color: #4F4754;
}
.hero .page-content {
    padding-top: 1vw;
    margin-top: 0;
}
.current-ex {
    margin-bottom: 3em;
}
.current-ex .ex-events {
    margin-top: 2.25em;
    padding: 1em 0 2em;
    border-top: solid 1px #4F4754;
}
.ex-events {
    margin-top: 3em;
}
.ex-event-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
@media screen and (min-width: 768px) {
    .ex-event-wrapper {
        margin-top: 1em;
        -ms-flex-direction: row;
            flex-direction: row;
        flex-wrap: wrap;
    }
}
.ex-event-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
        align-items: flex-start;
    width: 100%;
    margin-bottom: 2em;
}
@media screen and (min-width: 768px) {
    .ex-event-item {
        width: calc(50% - 2em);
    }
    .ex-event-item:nth-child(2) ~ .ex-event-item {
        border-top: solid 1px #979797;
        padding-top: 2em;
    }
}
.ex-event-item:nth-child(odd):after {
    content: '';
    height: 100%;
    width: 1px;
    border-right: solid 1px #979797;
    position: relative;
    display: block;
    margin-left: 2em;
    margin-right: -1.5em;
}
.ex-event-item:last-child:after {
    content: none;
}
.ex-event-item .details {
    -ms-flex: 1;
        flex: 1;
}
.upcoming-ex {
    width: 100%;
    margin: 3em 5vw 0;
}
.upcoming-ex .ex-item {
    background-color: #7BB6AC;
    padding: 2em;
    box-sizing: border-box;
}
.upcoming-ex .ex-item .ex-preview {
    width: 25%;
    margin-left: 0;
}
.social-share {
    position: absolute;
    top: 0;
    right: 2em;
    background: #4F4754;
    color: #E9EBE3;
    padding: .25em .5em;
    transform: translateY(-50%);
}
.social-share a,
.social-share span {
    font-family: 'Cardo';
    font-weight: bold;
    font-size: 18px;
    color: inherit;
}

.social-share .social-icon {
    margin-left: .25em;
}

/* upcoming events */
.filter-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    padding: 1em 0;
    border-bottom: 1px solid #458484;
}
@media screen and (min-width: 768px) {
    .filter-bar {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.filter-bar label {
    margin-right: 1em;
}
@media screen and (max-width: 767px) {
    .filter-bar label {
        margin-bottom: .25em;
    }
}
.filter-bar label span {
    min-width: 20px;
    background-color: #4F4754;
    color: #4F4754;
    padding: 1px 3px;
    font-size: 16px;
    line-height: 1;
    margin-right: .5em;
}
.filter-bar input[type='checkbox']:checked + span {
    /* color: #fff; */
    color: #7BB6AC;
}
.filter-bar label:last-child {
    margin-left: auto;
    margin-right: 0;
}
@media screen and (max-width: 767px) {
    .filter-bar label:last-child {
        -ms-flex-order: -1;
            order: -1;
        margin-right: auto;
        margin-left: 0;
    }
}
.filter-bar label input {
    margin-right: .5em;
    opacity: 0;
}
.upcoming-events-wrapper {
    margin-top: 3em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
@media screen and (min-width: 768px) {
    .upcoming-events-wrapper {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.upcoming-events-wrapper .event-item {
    position: relative;
    width: 100%;
    border-bottom: solid 1px #979797;
    padding-bottom: 2em;
    margin-bottom: 3em;
}
@media screen and (min-width: 768px) {
    .upcoming-events-wrapper .event-item {
        width: calc(50% - 2em);
    }
}
.upcoming-events-wrapper .event-item:nth-child(even):before {
    position: absolute;
    left: -2em;
    content: '';
    width: 1px;
    height: 90%;
    background-color: #979797;
    transform: translateX(-100%);
}
/* .upcoming-events-wrapper .event-item:nth-child(odd):last-child {
    border-bottom: none;
} */
.upcoming-events-wrapper .event-item:last-child,
.upcoming-events-wrapper .event-item:nth-last-child(2):nth-child(odd) {
    border-bottom: none;
}
a.event-type {
    display: block;
    font-family: 'Cardo', serif;
    font-size: 16px;
    color: #7BB6AC;
    letter-spacing: 0;
    line-height: 1;
    margin-top: 2em;
    text-transform: capitalize;
}
a.event-type:after {
    display: block;
    content: '';
    width: 32px;
    height: 1px;
    margin-top: .25em;
    background-color: #7BB6AC;
}

/* collections */
.featured-collection {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
    margin-top: 3em;
    margin-bottom: 3em;
}
@media screen and (min-width: 768px) {
    .featured-collection {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
.featured-collection:before {
    position: absolute;
    content: '';
    top: 50%;
    left: 0;
    right: 0;
    width: 95%;
    height: calc(100% - 3em);
    margin: 0 auto;
    background-color: #4F4754;
    transform: translateY(-50%);
}
@media screen and (min-width: 768px) {
    .featured-collection:before {
        width: 100%;
    }
}
.featured-collection .collection-item {
    position: relative;
    width: 100%;
    background-color: #E8EBE2;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.25);
    padding: 1em;
    margin-bottom: 2em;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-line-pack: justify;
        align-content: space-between;
    -ms-flex-pack: center;
        justify-content: center;
    z-index: 10;
}
.featured-collection .collection-item:last-child {
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .featured-collection .collection-item {
        width: calc(100%/3);
        margin-bottom: 0;
    }
    .featured-collection .collection-item:first-child {
        transform: translateX(-2.5vw);
    }
    .featured-collection .collection-item:last-child {
        transform: translateX(2.5vw);
    }
}
.page-content img.item-cutout {
    margin: 0 auto;
    display: block;
    max-width: unset;
    max-width: 100%;
    max-height: 300px;
    transform: translateY(-2.5vw);
}
@media screen and (min-width: 768px) {
    .page-content img.item-cutout {
        max-width: 130%;
        max-height: 330px;
    }
}
.featured-collection .collection-item:nth-child(2) img.item-cutout {
    transform: translateY(2.5vw);
    -ms-flex-order: 1;
        order: 1;
}
.featured-collection .item-name {
	color: #458484;
	font-family: 'Cardo';
	font-size: 22px;
	line-height: 1;
}
.featured-collection .item-name:after {
    display: block;
    content: '';
    width: 32px;
    height: 1px;
    margin-top: .25em;
    background-color: #458484;
}
.featured-collection .meta {
	color: #458484;
	font-family: 'Quicksand';
	font-size: 14px;
	font-weight: 500;
    line-height: 1.5;
    white-space: pre;
}

/* collection gallery */
[v-cloak] {
    display: none !important;
}
.gallery-row {
    display: block;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: start;
        align-items: flex-start;
    /* background: linen; */
    margin-bottom: 3em;
}
.gallery-item {
    width: 100%;
    height: 500px;
    margin-bottom: 3em;
    background: lightgray;
    box-sizing: border-box;
    padding: 2em 2em .5em;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
@media screen and (min-width: 768px) {
    .gallery-item {
        width: calc(50% - 1.5em);
    }
}
.gallery-item ~ .gallery-item {
    margin-bottom: 0;
}
@media screen and (min-width: 768px) {
    .gallery-item {
        margin-bottom: 0;
    }
}
.gallery-footer {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
}
.main-content p.item-name {
    font-family: 'Cardo', serif;
    font-size: 22px;
    color: #458484;
    letter-spacing: 0;
    line-height: 1;
}
.main-content p.item-name:after {
    display: block;
    content: '';
    width: 40px;
    border-bottom: solid 2px #458484;
    margin-top: .25em;
}
/* .item-overlay,
.full-view {
    display: none;
} */
.item-overlay {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
}
@media screen and (min-width: 768px) {
    .item-overlay {
        -ms-flex-direction: row;
            flex-direction: row;
    }
}
/* .full .item-overlay {
    display: block;
} */
/* .full .item-detalis,
.full .gallery-img,
.preview .gallery-footer,
.full .gallery-footer {
    display: none;
} */
.gallery-thumbnail {
    -ms-flex: 1;
        flex: 1;
    background-size: cover;
    background-position: center;
}
/* .gallery-view.preview */
.item-overlay {
    position: absolute;
    top: 0;
    left: 0;
    padding: 2em;
    width: 100%;
    min-height: 100%;
    background-color: #E9EBE3;
    box-sizing: border-box;
    z-index: 10;
}
.item-overlay[data-side="1"] {
    top: calc(50% + 1.5em);
}
@media screen and (min-width: 768px) {
    .item-overlay[data-side="1"] {
        top: 0;
    }
}
.item-overlay.full {
    display: block;
}
.item-overlay.full {
    height: 50%;
    min-height: auto;
}
@media screen and (min-width: 768px) {
    .item-overlay.full {
        height: 70vw;
    }
}
.item-detalis {
    /* width: 60%; */
    -ms-flex: 1;
        flex: 1;
    margin-left: 2em;
}

.item-desc .meta {
    white-space: pre;
}
.gallery-img {
    -ms-flex: 1;
        flex: 1;
    background-size: cover;
    background-position: center;
    position: relative;
}
.gallery-img:after {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    font-family: 'fontAwesome';
    font-size: 28px;
    content: '';
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
    width: 100%;
    height: 100%;
    color: #E9EBE3;
    background: rgba(79,71,84,0.57);
    opacity: 0;
    transition: opacity .5s;
}
.gallery-img:hover:after {
    opacity: 1;
}
/* gallery overlay view */
.full-view {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    height: 100%;
}
.full-header {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
        justify-content: flex-end;
    -ms-flex-align: center;
        align-items: center;
}
.full-header .vert-hr {
    background-color: #4F4754;
}
.full-header p.reset-zoom {
    color: #4F4754;
    cursor: pointer;
}
.full-header .item-name {
    margin-right: auto;
}
.full-header [class*="fa"],
.full-header .reset-zoom {
    margin: .5em;
}
@media all and (min-width: 768px) and (-ms-high-contrast:none) {
    .full-header {
        display: block;
    }
    .full-header div {
        display: inline-block;
        vertical-align: middle;
    }
    .main-content p.item-name {
        display: inline-block;
        margin-right: 1em;
    }
    .full .close-item {
        position: absolute;
        top: 1em;
        right: 1em;
    }
}
.close-item{
    display: block;
    position: absolute;
    top: 1.5em;
    right: 1.5em;
}
.full .close-item {
    display: block;
    position: relative;
    margin-left: 1em;
    top: auto;
    right: auto;
}
.gallery-view .gallery-img {
    -ms-flex: 1;
        flex: 1;
    background-color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
}
.gallery-view .item-img {
    max-width: 100%;
    max-height: 100%;
}
.gallery-view .item-detalis {
    width: 0;
    padding: 0;
    transition: .25s;
}
.gallery-view.preview .item-detalis {
    width: calc(60% - 4em);
    padding-left: 2em;
}
.item-slider {
    width: 100%;
    height: 100%;
    -ms-flex: 1;
        flex: 1;
    background-color: rgba(79, 71, 84, 0.7);
}
.item-slider .swiper-wrapper {
    width: 100%;
    height: 100%;
}
.item-slider .swiper-slide {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}
.item-slider .swiper-slide img {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.item-slider .info-box {
    background-color: #4F4754;
}
.main-content .item-slider .info-box p {
    color: #E9EBE3;
}

/* sidebar */
.sidebar {
    display: none;
}
.primary .sidebar {
    display: block;
    background: #4F4754;
    padding: 2em;
    box-sizing: border-box;
    -ms-flex-order: 1;
        order: 1;
    width: 100%;
    overflow: hidden;
}
@media screen and (min-width: 1024px) {
    .primary .sidebar {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-line-pack: start;
            align-content: flex-start;
        -ms-flex-item-align: stretch;
            align-self: stretch;
        width: 30vw;
        max-width: 310px;
        -ms-flex-order: 0;
            order: 0;
    }
}
.sidebar-logo {
    display: none;
}
@media screen and (min-width: 1024px) {
    .sidebar-logo {
        display: block;
        width: 100%;
        max-width: 178px;
        margin: 0 auto;
        text-align: center;
    }
}
.sidebar-logo img {
    width: 100%;
    max-width: 135px;
}
.sidebar-logo:after,
.sidebar-nav:after {
    display: block;
    position: relative;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #E8EBE2;
    margin: 1em auto;
}
nav.sidebar-nav {
    display: none;
}
@media screen and (min-width: 1024px) {
    nav.sidebar-nav {
        display: block;
        width: 100%;
        max-width: 178px;
        margin: 0 auto;
    }
}
ul.main-links {
    padding: .5em 0 1em;
}
nav ul.main-links > li {
    position: relative;
    color: #7BB6AC;
    padding: 0 0 1em;
    box-sizing: border-box;
    transition: .5s;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
@media screen and (min-width: 1024px) {
    nav ul.main-links > li {
        padding: 0 0 .5em;
    }
}
.main-links .svg-inline--fa {
    position: absolute;
    top: 0;
    right: 0;
    padding: .5em;
    transform: translateX(100%);
    transition: .25s;
}
.main-links li.open .svg-inline--fa {
    transform: translateX(100%) rotate(-180deg);
}
nav ul.main-links > li a { 
    font-family: 'Cardo', serif;
    font-weight: bold;
    font-size: 15px;
    color: #7BB6AC;
    letter-spacing: 1.14px;
}
.main-links a.active {
    color: #E9EBE3;
}
.main-links a.active:after {
    background-color: #E9EBE3;
}
.main-links a.active + .svg-inline--fa {
    color: #E9EBE3;
    transform: translateX(100%) rotate(-180deg);
}
.sublinks {
    display: none;
    width: 100%;
    text-align: left;
    margin-top: .5em;
}
.active ~ .sublinks,
.open .sublinks {
    display: block;
}
.sidebar .sublinks a {
    display: block;
    font-family: 'Quicksand';
    font-weight: 500;
    font-size: 12px;
    color: #C78164;
    line-height: 20px;
    text-align: left;
}
.sidebar .sublinks a.active {
    color: #E9EBE3;
}
.sidebar .sublinks a.active:after {
    content: none;
}
a.tothetop {
    display: block;
    right: 0;
    z-index: 100;
    transform: translate3d(105%, -80px, 0);
    background-color: #7BB6AC;
    pointer-events: none;
    transition: .5s ease;
    -webkit-transition: .5s ease;
    -moz-transition: .5s ease;
}
@media screen and (max-width: 1023px) {
    a.tothetop.stuck {
        position: fixed !important;
        bottom: 50px !important;
        top: auto !important;
    }
    header.sticky.show ~ .sidebar a.tothetop {
        transform: translate3d(0, -80px, 0);
        pointer-events: auto;
    }
    /* nav.main-nav.open ~ .sidebar a.tothetop.stuck, */
    nav.main-nav.open ~ .sidebar a.tothetop {
        transform: translate3d(105%, -80px, 0);
        pointer-events: none;
    }
}
@media screen and (min-width: 1024px) {
    a.tothetop {
        display: block;
        position: fixed;
        bottom: 1em;
        left: 155px; /* for old safari browsers */
        right: inherit;
        color: #fff;
        background-color: transparent;
        border: solid 2px #7BB6AC;
        z-index: 100;
        border-right: none;
        border-left: none;
        cursor: default;
        transform: translateX(-50%); /* for old safari browsers */
    }
    a.tothetop.scroll {
        opacity: 1;
        pointer-events: auto;
        transition: .25s;
    }
}
@media screen and (min-width: 1024px) {
    a.tothetop:hover {
        color: #fff;
        transform: translateX(-50%) translateY(-5px);
    }
}
.tothetop .arrow-up {
    position: absolute;
    top: 3px;
    transform: translateY(-100%) scale(.55);
    left: 0;
    right: 0;
    margin: 0 auto;
}
@media screen and (min-width: 1024px) {
    .tothetop .arrow-up {
        top: 1px;
    }
}
.tothetop p {
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.75px;
    padding: 0 .75em;
}
.tothetop p span {
    display: none;
}
@media screen and (min-width: 1024px) {
    .tothetop p {
        font-size: 14px;
        text-transform: capitalize;
    }
    .tothetop p span {
        display: inline;
    }
}

/* sidebar buckets */
.primary-buckets {
    text-align: center;
    margin-bottom: 3em;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .primary-buckets {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: justify;
            justify-content: flex-start;
    }
}
.sidebar-bucket {
    width: 100%;
    max-width: 178px;
    max-width: 100%;
    margin: 1em auto 0;
    padding: 0 1em;
    box-sizing: border-box;
    text-align: center;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .sidebar-bucket {
        position: relative;
        width: calc(100%/3 - 2px/3);
        text-align: left;
        margin: 0;
        margin-right: 3em;
    }
}
@media screen and (max-width: 767px) {
    .sidebar-buckets,
    .menu-footer {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    .sidebar-bucket {
        max-width: 178px;
        text-align: left;
    }
}
.sidebar-bucket:after {
    display: block;
    position: relative;
    content: '';
    width: calc(100% + 2em);
    height: 1px;
    background-color: #E8EBE2;
    margin: 2em auto;
    transform: translateX(-1em);
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .sidebar-bucket:after {
        position: absolute;
        right: 0;
        top: -1.5em;
        width: 1px;
        height: calc(100vw/3 - 5em);
        margin: 0;
        /* transform: translateX(100%); */
        transform: translateX(1.5em);
    }
}
.sidebar-bucket:last-child:after {
    content: none;
}
.sidebar-bucket img {
    width: 100%;
}
.sidebar .sidebar-bucket a.active:after {
    content: none;
}
/* .bucket-title {
color: #E8EBE2;
font-family: 'Cardo', serif;
font-size: 18px;
font-weight: bold;
line-height: 1.25;
} */

.main-content.secondary {
    background-image: url(/assets/images/secondary-bg.png);
}
.primary .main-content.hero {
    padding-left: 0;
    padding-right: 0;
}

/* hero content */
.hero-img {
    background-color: #4F4754;
    position: relative;
    width: 100%;
    height: calc(100vw/2.5);
    overflow: hidden;
}
@media screen and (min-width: 768px) {
    .hero-img {
        height: calc(100vw/3.5);
    }
}
.hero-img img {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    min-width: 100%;
    min-height: 100%;
    display: block;
    /* transition: .25s; */
}
@media screen and (max-width: 767px) {
    .hero-img img {
        object-fit: cover;
        height: 100%;
        min-width: initial;
        min-height: initial;
        width: 100%;
    }
}

/* page content */
@media screen and (min-width: 768px) {
    .page-header {
        padding: 0 5vw;
    }
}
.page-content {
    width: calc(50% + 2.5vw);
    padding: 2.5em;
    padding: .5em 1em;
    background-image: linear-gradient(0deg, #E2E2E2 0%, #FFFFFF 84%);
    width: 100%;
    box-sizing: border-box;
    word-wrap: break-word;
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .page-content {
        margin-left: auto;
        margin-bottom: -10vw;
        width: 80%;
        padding: 2.5em;
        z-index: 1;
    }
}
@media screen and (min-width: 1024px) {
    .page-content {
        width: calc(50% + 2.5vw);
        padding: 2.5em;
    }
}
.hero.secondary .page-content,
.secondary .page-content {
    background-image: none;
    width: 100%;
    padding: 0 1em;
    margin-top: 0;
    box-shadow: none;
}
@media screen and (min-width: 768px) {
    .hero.secondary .page-content,
    .secondary .page-content {
        padding: 0;
    }
}
/* TODO: clean up and put in correct media queries */
/* gallery page */
.hero .page-content {
    margin: 0 auto;
    padding: 2.5vw;
    background-image: linear-gradient(0deg, #EFEFEF 0%, #FFFFFF 84%);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.20);
    transform: translateY(-15vw);
    position: relative;
}
@media screen and (min-width: 768px) {
    .hero .page-content {
        margin-left: 5vw;
        margin-right: 5vw;
    }
}
.page-content img {
    max-width: 100%;
}
.gallery-bucket img,
.private-event-bucket img {
    width: 100%;
}
@media screen and (min-width: 768px) {
    .private-event-bucket,
    .gallery-bucket {
        display: grid; /* desktop */
        grid-template-columns: 1fr 1fr 1fr; /* desktop */
        /* grid-template-rows: repeat(4, 20%); */ /* desktop */
        grid-template-rows: repeat(4, 23%); /* desktop */
/*         grid-template-rows: 23% 25% 20% 20%; */
        grid-column-gap: 2em; /* desktop */
        grid-row-gap: 2em; /* desktop */
        margin-bottom: 2em;
    }

}
.private-event-bucket .topleft,
.gallery-bucket .topleft {
    max-width: 100%;
    grid-column: span 2; /* desktop */
    grid-row: span 1; /* desktop */
}
@media screen and (min-width: 768px) {
    .gallery-bucket .topleft {
        /* height: 300px; */
    }
    .gallery-bucket .middle-full {
	    height: 100%;
	    object-fit: cover;
        object-position: bottom;
    }
    .gallery-bucket .bottom-tall {
        height: 100%;
        object-fit: cover;
        object-position: bottom;
    }
    .gallery-bucket .middle-right {
        height: 100%;
        object-fit: cover;
    }
    .gallery-bucket .bottomleft {
        height: 100%;
        object-fit: cover;
    }
}

.private-event-bucket [class*="-cta"],
.gallery-bucket [class*="-cta"] {
    position: relative;
    padding: 2em;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-align: center;
        align-items: center;
    background: #E9EBE3;
    text-align: center;
    transition: .5s;
    overflow: hidden;
}

@media screen and (min-width: 768px) {
    body.overlay {
        overflow: hidden;	
    }
}
.hero-img {
    background-repeat: no-repeat;
    background-size: cover;
}
.hero .page-content {
    transform: none;
    margin-top: -1vh;
    width: 100%;
}
@media screen and (min-width: 800px) {
    .hero .page-content {
        margin-top: -15vh;       
    }
}
.gallery-overlay {
    position: relative;
    width: 100%;
    -ms-flex-order: -1;
        order: -1;
}
@media screen and (min-width: 768px) {
    .gallery-overlay {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
            justify-content: center;
        -ms-flex-align: start;
            align-items: flex-start;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(233, 235, 227, 0.85);
        box-sizing: border-box;
        pointer-events: none;
        opacity: 0;
        overflow-y: auto;
        transition: .5s;
        -ms-flex-order: unset;
            order: unset;
    }
}
.gallery-overlay.open {
    opacity: 1;
    pointer-events: inherit;
    overflow-y: auto;
}
.overlay-container {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: justify;
        align-content: space-between;
    margin: 5vw 0 3em;
    width: 100%;
    max-width: 1080px;
    /* min-height: 90vh; */
    padding: 2.5vw 5vw 5vw;
    background-color: #4F4754;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .overlay-container {
        width: 95vw;
        min-height: 90vh;
    }
}
@media all and (-ms-high-contrast:none) and (min-width: 768px) {
    .overlay-container {
        min-height: 1000px;
    }
}
.overlay-header {
    width: 100%;
    font-size: 20px;
    color: #7BB6AC;
    line-height: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: justify;
        justify-content: space-between;
}
.vert-hr {
    display: none;
}
@media screen and (min-width: 768px) {
    .vert-hr {
        display: inline-block;
        vertical-align: middle;
        margin: 0 .25em;
        height: 1em;
        width: 1px;
        background-color: #7BB6AC;
    }
}
.overlay-tools {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-order: 2;
        order: 2;
}
.overlay-tools .fa-info-circle {
    display: none;
}
.overlay-tools [class*="fa-"] {
    margin-right: .5em;
}
@media screen and (min-width: 768px) {
    .overlay-tools .fa-info-circle {
        display: inline-block;
    }
    .overlay-tools {
        display: block;
        -ms-flex-order: 0;
            order: 0;
    }
}
p.reset-zoom {
    display: inline-block;
    color: #458484;
    font-size: inherit;
}
.overlay-links {
    margin-bottom: .25em;
}
@media screen and (min-width: 768px) {
    .overlay-links {
        margin-bottom: .25em;
        margin-right: 1.5em;
    }
}
@media screen and (min-width: 1024px) {
    .overlay-links {
        margin-bottom: 0;
    }
}
.overlay-links a,
.overlay-container p {
    font-weight: normal;
}
.overlay-links a {
    display: block;
    margin-bottom: .25em;
}
@media screen and (min-width: 1024px) {
    .overlay-links a {
        display: inline;
        margin-left: 1em;
    }
}
.overlay-image {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    position: relative;
    width: 85vw;
    height: 250px;
    margin: 0 auto;
    border: solid 1px teal;
    padding: 0;
    -ms-flex: 1;
        flex: 1;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .overlay-image {
        overflow: hidden;
        width: 69vw;
        max-width: calc(1079px - 10vw);
        height: 60vh;
    }
}
@media screen and (min-width: 1280px) {
    .overlay-image {
        width: 100%;
    }
}
.info-box {
    display: none;
}
@media screen and (min-width: 768px) {
    .info-box {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        color: #fff;
        width: 100%;
        max-width: 400px;
        background-color: #E9EBE3;
        padding: 1em;
        box-sizing: border-box;
        transform: translateY(-100%);
        transition: .25s;
        z-index: 10;
    }
}
.info-box.show {
    transform: translateY(0);
}
.panzoom {
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: center;
        align-items: center;
}
.overlay-image img {
    max-width: 100%;
    max-height: 100%;
    /* height: auto;
    width: auto; */
    display: block;
    margin: 0 auto;
}
@media screen and (min-width: 768px) {
    .overlay-image img {
        /* max-width: initial;
        max-height: initial; */
        height: initial;
        width: initial;
    }
}
.overlay-image .overlay-slider {
    /* max-height: 250px; */
    /* width: 100%; */
    height: 100%;
    /* height: 250px; */
    /* flex: 1; */
    display: block;
    box-sizing: border-box;
}
/* @media screen and (min-width: 768px) {

} */
.overlay-slider .swiper-slide {
    width: 70vw;
}
.overlay-image .overlay-slider > .swiper-wrapper {
    /* display: flex;
    align-items: center;
    justify-content: center; */
    position: relative;
    /* width: auto; */
    /* width: 100%; */
    /* height: 250px; */
    box-sizing: border-box;
}
.overlay-slider > .swiper-wrapper .swiper-slide {
    width: 100%;
    min-height: 100%;
    -ms-flex-item-align: stretch;
        align-self: stretch;
}
@media screen and (min-width: 768px) {
    .overlay-image .overlay-slider > .swiper-wrapper {
        /* display: block; */
        /* max-height: 60vh;
        height: unset; */
        -ms-flex-align: stretch;
            align-items: stretch;
    }
    .overlay-image .overlay-slider > .swiper-wrapper {
        width: 100%;
        height: 100%;
        /* max-height: unset; */
    }
}
@media all and (-ms-high-contrast:none) and (min-width: 768px) {
    .overlay-image,
    .overlay-image .overlay-slider,
    .overlay-slider > .swiper-wrapper .swiper-slide,
    .overlay-image .overlay-slider > .swiper-wrapper {
        min-height: 500px;
    }
}
.overlay-footer {
    width: 100%;
    padding-top: 2.5vw;
    display: block;
    -ms-flex-align: center;
        align-items: center;
}
@media screen and (min-width: 768px) {
    .overlay-footer {
        display: -ms-flexbox;
        display: flex;
    }
}
.overlay-footer p {
    font-size: 14px;
    color: #E9EBE3;
    letter-spacing: 1.08px;
    line-height: 1;
}
@media screen and (min-width: 768px) {
    .overlay-footer .desc,
    .overlay-footer .credits {
        width: calc(50% - 2.5vw);
    }
}
.overlay-footer .vert-hr {
    height: 100px;
    margin: 0 5vw;
    width: 1.5px;
}
.close-overlay {
    display: none;
}
@media screen and (min-width: 768px) {
    .close-overlay {
        display: block;
        position: absolute;
        top: 1em;
        right: 1em;
        font-size: 28px;
        color: #7BB6AC;
        letter-spacing: 1.08px;
        line-height: 1;
    }
}

button[class^="gallery"] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding: 0;
    color: #458484;
    font-size: 38px;
    background-color: transparent;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    border: none;
    transition: color .25s;
    z-index: 10;
}
button[class^="gallery"]:disabled,
button[class^="gallery"].swiper-button-disabled {
        color: gray;
}
.gallery-left {
    left: 0;
    left: 5vw;
}
button[class^="gallery"].gallery-right {
    right: 0;
    right: 5vw;
    transform: translateY(-50%) translateX(50%);
}
.gallery-left .custom-arrow {
    transform: scale(-.7);
}
.gallery-full img {
    opacity: 0;
    transition: .25s .5s;
}
.gallery-full img.load {
    opacity: 1;
}

h3.cta-title {
    font-family: 'Cardo', serif;
    font-weight: normal;
    font-size: 26px;
    color: #4F4754;
    letter-spacing: 0.63px;
    line-height: 1.5;
    white-space: pre-line;
}
h3.cta-title:after {
    display: block;
    content: '';
    width: 110px;
    margin: .25em auto 0;
    height: 1px;
    background-color: #458484;
}
[class*="-cta"] .message {
    position: absolute;
    padding: 2em;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-line-pack: center;
        align-content: center;
    -ms-flex-align: center;
        align-items: center;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: #4F4754;
    transform: translateX(100%);
    transition: .5s;
}
.left-cta .message {
    transform: translateY(100%);
}
.main-content [class*="-cta"] .message p {
    font-size: 18px;
    color: #E9EBE3;
}
.gallery {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
    .gallery {
        display: block;
    }
}
.private-event-bucket .title,
.gallery-bucket .title {
    opacity: 1;
    transition: .5s;
}
.private-event-bucket [class*="-cta"]:hover .title,
.gallery-bucket [class*="-cta"]:hover .title {
    transform: translateX(-100%);
}
.private-event-bucket .left-cta:hover .title,
.gallery-bucket .left-cta:hover .title {
    transform: translateY(-100%);
}
.private-event-bucket [class*="-cta"]:hover .message,
.gallery-bucket [class*="-cta"]:hover .message {
    transform: translateX(0);
    /* transform: scale(1); */
}
.private-event-bucket .middle-full,
.gallery-bucket .middle-full {
    grid-column: span 3;
}
.private-event-bucket .left-cta,
.gallery-bucket .left-cta {
    grid-row: span 1;
}
.private-event-bucket .bottom-tall,
.gallery-bucket .bottom-tall {
    grid-row: span 2;
}
.gallery-full {
    display: none;
}
@media screen and (min-width: 768px) {
    .gallery-full {
        margin-top: 2em;
        display: block;
        /* display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-align: start;
            align-items: flex-start;
        -ms-flex-pack: start;
            justify-content: flex-start;
        -ms-flex-line-pack: justify;
            align-content: space-between;
        -ms-flex-direction: column;
            flex-direction: column; */
    }
}
.gallery-full img {
    width: calc( (100% - 4em)/3 );
    margin-bottom: 2em;
}

/* spaces explorer */
[section="body_content"].hide {
    display: none;
}
.spaces-explorer {
    overflow-x: hidden;
}
@media screen and (min-width: 768px) {
    .spaces-explorer {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-pack: justify;
            justify-content: space-between;
        width: 100%;
        margin-top: 3em;
        overflow-x: visible;
    }
}
.spaces-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
.landing .spaces-nav {
    -ms-flex-align: start;
        align-items: flex-start;
    -ms-flex-line-pack: start;
        align-content: flex-start;
}
@media screen and (min-width: 768px) {
    .landing .spaces-nav {
        width: 40%;
        max-width: 200px;
    }
}
.nav-item {
    display: block;
    position: relative;
    background: linear-gradient(360deg, #FFFFFF 0%, #FAFAF4 100%);
    padding: 0 1em;
    box-sizing: border-box;
    border: solid 1px rgba(155, 155, 155, 0.2);
    border-bottom: 2px solid #C87652;
    width: 100%;
    min-width: 210px;
    margin-bottom: 1em;
    opacity: .6;
    z-index: 1;
    transition: opacity .25s;
}
.landing .nav-item {
    opacity: 1;
}
.nav-item:hover {
    opacity: 1;
}
.nav-item.active {
    opacity: 1;
    border-bottom-width: 5px;
}
@media screen and (min-width: 768px) {
    .nav-item {
        min-width: unset;
        /* width: calc(25% - 1.5em); */
        width: auto;
        -ms-flex: 1;
            flex: 1;
        margin-right: 1.5em;
    }
    .landing .nav-item {
        width: 100%;
        -ms-flex: auto;
            flex: auto;
        margin-right: auto;
    }
}
.active-arrow {
    display: none;
}
.nav-item.active .active-arrow {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    margin: 0 auto;
    transform: translateY(100%);
}
p.nav-title {
    position: relative;
    font-family: 'Cardo', serif;
    font-size: 20px;
    color: #4E4654;
    line-height: 1;
    margin-bottom: 0;
}
/* .nav-title:before {
    content: '';
    position: absolute;
    top: .25em;
    left: -1em;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #C87652;
} */
.nav-title span.accent {
    position: absolute;
    top: .25em;
    left: -1em;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #C87652;
}
p.nav-desc {
    font-size: 11px;
    font-weight: normal;
    color: #000;
    line-height: normal;
}
a.spaces-link {
    color: #C87652;
    border-bottom: 1px solid;
    margin-bottom: 1em;
    display: inline-block;
    text-transform: capitalize;
}
.floorplans {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        /* justify-content: space-between; */
        justify-content: space-around;
    width: 100%;
}
.landing .floorplans {
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex: 1;
        flex: 1;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: start;
        justify-content: flex-start;
}
@media screen and (min-width: 768px) {
    .landing .floorplans {
        margin-left: 3em;
    }
}
.floor-item {
    position: relative;
    /* display: none; */
    width: calc(50% - 1em);
}
.landing .floor-item {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 2em;
}
.landing .floor-item:nth-child(2) {
    -ms-flex-order: -1;
        order: -1;
}
/* .floor-item.active {
    display: block;
} */
.floor-image {
    position: relative;
    display: inline-block;
}
.landing .floor-image {
    text-align: right;
}
.dots .dot-helper {
    display: none;
    position: absolute;
    top: 1em;
    left: 50%;
    border: solid 1px rgba(163, 163, 163, 1);
    background-color: #E8E8E8;
    padding: .25em .5em;
    width: 100px;
    z-index: 1;
    opacity: 0;
    transform: translateX(-50%);
    pointer-events: none;
    transition: opacity .25s;
    text-align: center;
    /* box-shadow: 2px 3px 2px rgba(0,0,0,0.3); */
}
@media screen and (min-width: 1024px) {
    .dots .dot-helper {
        display: block;
        top: 1.5em;
        border-color: rgba(151, 151, 151, 0.2258);
    }
}
.dot-helper.padRight {
    left: calc(50% - 40px);
}
.dots .dot-helper.padRight:before {
    left: 80px;
}
.dot-helper.padLeft {
    left: calc(50% + 40px);
}
.dots .dot-helper.padLeft:before {
    left: -80px;
}
.dots.active.show-tooltip .dot-helper {
    pointer-events: auto;
    opacity: 1;
}
@media screen and (min-width: 1024px) {
    .dots.active .dot-helper {
        opacity: 0;
        pointer-events: none;
    }
    .dots.active:hover .dot-helper {
        pointer-events: auto;
        opacity: 1;
    }
}
.dots .dot-helper:before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: #E8E8E8;
    transform: rotate(45deg);
    border-left: solid 1px rgba(151, 151, 151, 0.2258);
    border-top: solid 1px rgba(151, 151, 151, 0.2258);
    border-color: inherit;
}
p.dot-title {
    cursor: default;
    font-size: 12px;
    color: #413945;
    margin: .5em auto;
    line-height: 1;
}
p.dot-stories {
    cursor: pointer;
    font-size: 10px;
    color: #945C12;
    margin: 0 auto .25em;
    line-height: 1;
}
.dots {
    display: block;
    position: absolute;
    z-index: 0;
    transform: translate3d(-50%, -50%, 0);
}
.dots.active {
    z-index: 2;
}
.id-dot,
.small-dot {
    width: 22px;
    height: 22px;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    background-color: #C87652;
    color: #fff;
    border-radius: 50%;
    transform: translateY(-.5em);
}
.id-dot {
    display: none;
    opacity: .5;
    cursor: default;
    transition: opacity .25s;
}
.id-dot:hover {
    opacity: 1;
}
.small-dot {
    display: -ms-flexbox;
    display: flex;
    width: 13px;
    height: 13px;
    opacity: .5;
}
.landing .small-dot,
.dots.active .id-dot,
.dots.active .small-dot {
    opacity: 1;
}
@media screen and (min-width: 768px) {
    .landing .id-dot,
    .small-dot {
        display: none;
    }
    .landing .small-dot {
        display: -ms-flexbox;
        display: flex;
    }
    .id-dot {
        display: -ms-flexbox;
        display: flex;
    }
}
.id-dot text {
    transform: translateX(-23%) translateY(23%);
}
p.floor-title {
    font-family: 'Cardo';
    font-size: 21px;
    color: #000;
}
.landing p.floor-title {
    text-align: left;
}
@media screen and (min-width: 768px) {
    .landing p.floor-title {
        position: absolute;
        top: 0;
        left: 0;
    }
}
.story-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    -ms-flex-align: end;
        align-items: flex-end;
}
@media screen and (min-width: 1024px) {
    .story-nav {
        -ms-flex-pack: start;
            justify-content: flex-start;
    }
}
.thumb-nav {
    position: relative;
    width: 78px;
    text-align: center;
    margin-right: 1.5em;
    border-bottom: 5px solid rgba(255, 255, 255, 0);
    opacity: .5;
    transition: opacity .25s;
}
.thumb-nav:hover {
    opacity: 1;
}
.thumb-nav.active {
    opacity: 1;
    border-color: #C87652;
}
.thumb-nav .active-arrow {
    display: none;
}
.thumb-nav.active .active-arrow {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.5px;
    margin: 0 auto;
    transform: translateY(100%);
    width: 12px;
}
p.thumb-title {
    font-size: 11px;
    line-height: 1.25;
    padding: 0 .75em;
    word-wrap: normal;
}
.thumb-nav .thumbnail {
    position: relative;
    width: 100%;
    height: 74px;
    background-color: #ccc;
    background-size: cover;
    background-position: center;
}
.thumb-index {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 22px;
    height: 22px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    background-color: #C87652;
    color: #fff;
    border-radius: 50%;
    transform: translateY(-.5em);
}
.mobile-tooltip {
    position: absolute;
    bottom: 0;
    background: #c97551;
    font-size: 10px;
    width: 100%;
    text-align: center;
    color: #fff;
    max-height: 0;
    overflow: hidden;
    transition: .25s;
}
.thumb-nav.active .mobile-tooltip {
    max-height: 200px;
}
@media screen and (min-width: 1024px) {
    .mobile-tooltip {
        display: none;
    }
}
.mobile-tooltip p {
    color: #fff;
    margin: 0 auto -.5em;
}

.stories {
    margin-top: 2em;
    width: 100%;
}
.story-index {
    width: 38px;
    height: 38px;
    font-size: 25px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    background-color: #C87652;
    color: #fff;
    border-radius: 50%;
}
p.story-header {
    display: inline-block;
    font-family: 'Cardo', serif;
    font-weight: bold;
    color: #7AB6AC;
    font-size: 25px;
    vertical-align: middle;
    margin-left: .25em;
}
.story-count {
    display: inline-block;
    background-color: #E8E8E8;
    padding: .15em 1em;
    border-radius: 21px;
    color: #A66F15;
    font-size: 15px;
    font-weight: bold;
    border: solid 1px rgba(151, 151, 151, 0.2258);
    margin-left: 0.5em;
    margin-bottom: 1em;
}
.story-block {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    width: 100%;
    min-height: 375px;
    background-color: #fff;
    border: 1px solid #A66F16;
    border-left-width: 7px;
    margin-bottom: 1em;
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .story-block {
        width: 90%;
    }
}
.story-block:nth-child(odd) {
    margin-right: 0;
    margin-left: auto;
}
.story-block .media {
    width: 100%;
    height: 300px;
    background-color: #4f4753;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
@media screen and (min-width: 768px) {
    .story-block .media {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        /* max-height: 400px; */
    }
}
.story-content {
    position: relative;
    width: 100%;
    padding: 1em 3em;
    box-sizing: border-box;
    margin-left: auto;
}
@media screen and (min-width: 768px) {
    .story-content {
        width: 50%;
    }
}
.story-content p.story-id {
    position: absolute;
    top: 1.75em;
    right: 3em;
    background-color: #E8E8E8;
    padding: .05em 1em;
    border-radius: 21px;
    color: #A66F15;
    font-size: 13px;
    font-weight: bold;
    border: solid 1px rgba(151, 151, 151, 0.2258);
}
.story-content .desc,
.story-content p {
    color: #4E4654;
    /* font-size: 13px;
    font-weight: normal; */
}
p.story-title {
    font-family: 'Cardo', serif;
    font-weight: bold;
    font-size: 20px;
    color: #4E4654;
    line-height: normal;
    max-width: calc(100% - 50px);
}

/* footer */
footer {
    width: 100%;
    -ms-flex-order: 1;
        order: 1;
}
@media screen and (max-width: 768px) {
    footer {
        margin-top: 3.75em;
    }
}
@media screen and (min-width: 1024px) {
    footer {
        width: 100%;
        -ms-flex-order: 0;
            order: 0;
    }
}
.footer-social {
    text-align: center;
}
.footer-social a {
    color: #458484;
    font-size: 25px;
    padding: 0 .25em;
}
@media screen and (max-width: 768px) {
    .social a {
        color: #6F716B;
        padding: .05em .25em;
        font-size: 16px;
    }
}
@media screen and (min-width: 768px) {
    .footer-social a {
        font-size: 16px;
    }
}
.footer-wrapper {
    background-image: linear-gradient(0deg, #D1D2CE 0%, #FFFFFF 84%);
    padding: .5em 1em;
    box-sizing: border-box;
}
@media screen and (max-width: 768px) {
    .footer-wrapper {
        padding-top: 1.5em;
    }
}
@media screen and (min-width: 768px) {
    .footer-wrapper {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-align: stretch;
            align-items: stretch;
        padding: 0 5vw;
    }
}
@media screen and (min-width: 1024px) {
    .footer-wrapper {
        padding: 1em;
    }
}
#search-page-search {
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    #search-page-search {
        transform: translateY(-60px);
        padding-left: 120px;
    }
}
[name="search"] ::-moz-placeholder,
[name="search"] :-moz-placeholder,
[name="search"] :-ms-input-placeholder,
[name="search"] ::-webkit-input-placeholder {
    font: inherit;
    font-size: 18px;
    color: #458484;
} 
[name="search"] :placeholder-shown {
    font: inherit;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    color: #458484;
}
[name="search"] {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
        justify-content: space-between;
    -ms-flex-align: center;
        align-items: center;
}
[name="search"] input#page_search {
    border: none;
    width: 50%;
    font-size: 18px;
    color: #448483;
    margin-right: .25em;
}
@media screen and (min-width: 768px) {
    [name="search"] input#page_search {
        border: none;
        -ms-flex: 1;
            flex: 1;
        font-size: 18px;
        color: #448483;
        margin-right: .25em;
    }
}
span.search-results-count {
    margin-left: .5em;
    white-space: nowrap;
}
[name="search"] input[type="submit"] {
    width: auto;
}

[class*="-search-container"] {
    display: none;
    min-width: 295px;
}
@media screen and (min-width: 768px) {
    [class*="-search-container"] {
        min-width: 300px;
    }
}
[class*="-search-container"].show {
    display: block;
}
.mobile-search-container.show {
    display: inline-block;
}
.menu-footer-nav, 
.footer-nav {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: start;
        justify-content: flex-start;
    -ms-flex-align: start;
        align-items: flex-start;
}
@media screen and (max-width: 767px) {
    .footer-buckets,
    .footer-nav,
    footer .footer-links {
        display: none;
    }
}
[name="mobile_footer_search"] {
    display: inline-block;
}
[name*="_search"] input.onsite-search-input {
    width: auto;
    font: inherit;
    margin-top: .25em;
    padding: .25em;
    background: none;
    border: solid 1px #6F716B;
}
@media screen and (min-width: 768px) {
    [name*="_search"] input.onsite-search-input {
        padding: 0 .25em;
    }
}
.show ~ [class$="-search-submit"] .fa-search {
    margin-right: .5em;
}
a.footer-search {
    margin: 0;
    text-align: left;
}
.search-results.populate-search {
    display: none;
    position: relative;
}
.loading-gif {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    transform: translateY(-50%);
}
.loading-gif.hide {
    display: none;
}
.add-results {
    margin-top: -1px;
    border: solid 1px #6F716B;
    width: 100%;
    min-height: 100px;
    padding: 1em; 
    box-sizing: border-box;
}
ul.secondary-nav-links .quick-links a[class$="-search-submit"] {
    display: inline-block;
    vertical-align: top;
}
.show ~ a[class$="-search-submit"] {
    transform: translateX(-168px);
}
/* @media screen and (min-width: 768px) {
    .show ~ a[class$="-search-submit"] {
        transform: translateX(-168px);
    }
} */
.footer-search {
    display: none;
    width: 300px;
}
@media screen and (max-width: 767px) {
    .credits-left {
        margin-bottom: 1em;
    }
}
.footer-credits {
    color: #E8EBE2;
    background: #4F4754;
    overflow: auto;
    text-align: center;
    padding: 1.5em;
    padding: 1.5em calc(1.5em + 4vw);
    box-sizing: border-box;
}
@media screen and (min-width: 768px) {
    .footer-credits {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
            justify-content: space-between;
        -ms-flex-align: center;
            align-items: center;
    }
}
.credits-left p {
    margin-bottom: 0;
}
.site-logo-footer {
    display: block;
    margin: 0 auto 1em;
    max-width: 120px;
    padding: 0 3vw;
}
.site-logo-footer img {
    max-width: 100%;
}
@media screen and (min-width: 768px) {
    .site-logo-footer {
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
        -ms-flex-positive: 1;
            flex-grow: 1;
        margin: 0;
    }
    .site-logo-footer img {
        max-width: 100%;
    }
}
a.byte-credit {
    color: #5B9F9F;
    font-weight: normal;
    font-size: 12px;
    line-height: 15px;
    text-decoration: none;
}
a.byte-credit:hover {
    color: #7BB6AC;
}
@media screen and (min-width: 768px) {
    .footer-wrapper .general {
        padding: 2vw 0;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -ms-flex-pack: justify;
            justify-content: space-between;
    }
}
@media screen and (min-width: 768px) {
    .menu-sitemap-nav,
    .sitemap-nav {
        margin: 0;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
}
@media screen and (min-width: 1024px) {
    .menu-sitemap-nav, 
    .sitemap-nav {
        -ms-flex-wrap: initial;
            flex-wrap: initial;
        -ms-flex-pack: justify;
            justify-content: space-between;
        width: 100%;
        padding: 0 3vw;
        box-sizing: border-box;
    }
}
@media all and (-ms-high-contrast:none) and (min-width: 768px) {
    .menu-sitemap-nav, 
    .sitemap-nav {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
    }
}
@media screen and (min-width: 768px) {
    .footer-contact,
    .footer-links {
        /*width: 50%;*/
        width: 37%;
        /*margin-bottom: 2em;*/
        margin: 0 1em 2em;
    }
}
@media screen and (min-width: 768px) {
    .footer-links a {
        font-family: 'Cardo', serif;
        font-size: 14px;
        color: #458484;
        font-weight: bold;
        text-align: left;
    }
}
@media screen and (min-width: 768px) {
    .footer-links .footer-subnav a {
        display: block;
        font-family: 'Quicksand', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #4F4754;
        line-height: 18px;
    }
}
@media screen and (min-width: 768px) {
    .menu-footer-nav,
    .footer-nav {
        /* width: 100%; */
        /*margin: 0;*/
        margin: 0 1em;
    }
}
@media screen and (min-width: 1024px) {
    .menu-footer-nav,
    .footer-nav {
        width: 100%;
        padding-left: 3vw;
    }
}
@media screen and (min-width: 768px) {
    .footer-contact {
        width: 50%;
    }
}
@media screen and (min-width: 1024px) {
    .footer-contact {
        width: 55%;
    }
}
@media screen and (min-width: 768px) {
    .footer-contact p {
        margin-top: 0;
    }
}
@media screen and (min-width: 768px) {
    .footer-social,
    .footer-contact p {
        text-align: left;
        font-size: 12px;
        color: #4F4754;
    }
}
@media screen and (min-width: 768px) {
    .footer-contact .address .line-break:before {
        content: "\A";
        white-space: pre;
    }
}
@media screen and (min-width: 768px) {
    .menu-footer-nav a,
    .footer-nav a {
        font-family: 'Cardo', serif;
        font-weight: bold;
        font-size: 14px;
        color: #A7664A;
        padding: .25em;
        margin-right: 1.5em;
    }
}

/* footer buckets */
@media screen and (min-width: 768px) {
    .footer-buckets {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-pack: justify;
            justify-content: space-between;
    }
}
@media screen and (min-width: 1024px) {
    .footer-buckets {
        width: 35%;
    }
}
@media screen and (min-width: 1280px) {
    .footer-buckets {
        -ms-flex-direction: row;
            flex-direction: row;
        width: 50%;
        max-width: 424px;
        -ms-flex-pack: end;
            justify-content: flex-end;
    }
}
@media screen and (min-width: 768px) {
    .footer-cta {
        padding: 1em 2em;
        background: rgba(232, 235, 226, .5);
        height: calc(50% - .25em);
        box-sizing: border-box;
        text-align: center;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
            flex-direction: column;
        -ms-flex-line-pack: center;
            align-content: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
}
@media screen and (min-width: 768px) and (max-width: 800px) and  {
    .footer-cta {
        flex: 1;
        height: auto;
    }
}
_::-webkit-full-page-media, 
_:future, 
:root .footer-cta {
    flex: 1;
    height: auto;
}
@media screen and (min-width: 1024px) {
    .footer-cta {
        padding: 1em 1.25em;
    }
}
@media screen and (min-width: 1280px) {
    .footer-cta {
        height: 100%;
        width: calc(50% - .25em);
        margin-left: 10px;
    }
}
@media screen and (min-width: 768px) {
    .footer-cta p {
        margin-top: .5em;
        font-size: 12px;
        color: #4F4754;
    }
}
@media screen and (min-width: 768px) {
    .footer-cta p.bucket-title {
        font-family: 'Cardo';
        font-weight: bold;
        font-size: 14px;
        color: #3E3743;
        letter-spacing: 0.39px;
        line-height: 18px;
        /*margin-bottom: .25em;*/
        margin-bottom: 0;
    }
}
@media screen and (min-width: 1024px) {
    .footer-cta p.bucket-title {
        font-size: 17px;
    }
}
@media screen and (min-width: 768px) {
    p.bucket-title:after {
        display: block;
        margin: .5em auto 0;
        content: '';
        width: 80%;
        height: 1px;
        background-color: #A7664A;
    }
}
@media screen and (min-width: 768px) {
    a.bucket-link {
        font-family: 'Quicksand', sans-serif;
        font-weight: 500;
        color: #A7664A;
        line-height: 1.25;
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px) {
    a.bucket-link {
        font-size: 14px;
    }
}
@media screen and (min-width: 1024px) {
    .footer-credits {
        padding: 1.5em 5vw;
    }
}
@media screen and (min-width: 768px) {
    .credits-left {
        -ms-flex-order: -1;
            order: -1;
        text-align: left;
    }
}
@media screen and (min-width: 1024px) {
    .credits-left {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: end;
            justify-content: flex-start;
        -ms-flex-align: center;
            align-items: center;
    }
}
@media screen and (min-width: 768px) {
    footer .credits-left p {
        text-align: left;
    }
}
@media screen and (min-width: 1024px) {
    footer .credits-left p {
        text-align: left;
        display: inline;
        max-width: 160px;
        margin-right: 3em;
    }
    .menu-footer .credits-left p {
        text-align: left;
        display: inline;
        max-width: 180px;
    }
}
@media screen and (min-width: 1024px) {
    .credits-left p {
        margin: 0;
        margin-right: auto;
        margin-right: 3em;
    }
}
@media screen and (min-width: 768px) {
    footer .credits-right {
        text-align: right;
    }
}
@media screen and (min-width: 768px) {
    .credits-left,
    .credits-right {
        -ms-flex-preferred-size: 0;
            flex-basis: 0;
        -ms-flex-positive: 1;
            flex-grow: 1;
    }
    .credits-right {
        text-align: right;
    }
}
@media screen and (min-width: 1024px) {
    .credits-left span {
        margin: 0 1em;
    }
}