/******************************************************************
Theme Name: Fallingwater Custom Theme
Theme URI: http://www.fallingwater.org
Description: ustom WordPress theme developed for Fallingwater.
Author: H2
Author URI: http: //www.h2.com
Version: 1.0
License: GNU General Public License & MIT
License URI: http: //www.gnu.org/licenses/gpl-2.0.html
Tags: Blank, HTML5, CSS3
******************************************************************/

/* FONTS */

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Vollkorn:400,400i');

/* GENERIC BASE STYLES */

* { box-sizing: border-box; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
a[href], a[href] img { border: 0; outline: 0; text-decoration: none; }
a[href]:link, a[href]:visited { color: #699ea0; /* color: #690; */ }
a[href]:hover, a[href]:active { color: #000; }
body { -webkit-oveflow-scrolling: touch; width: 100vw; max-width: 1600px; overflow-x: hidden; margin: 0 auto; padding: 0; background: #fff; font-family: 'Montserrat', sans-serif; font-size: 10.5pt; }
h1 { font-family: "Montserrat",serif; font-weight: normal; line-height: 135% !important; }
h2 { font-family: "Vollkorn",serif; font-weight: normal; line-height: 105% !important; }
h3 { font-family: "Montserrat",serif; font-weight: normal; line-height: 100%; }
h4 { font-family: "Vollkorn",serif; font-weight: normal; line-height: 100%; }
h5 { font-family: "Vollkorn",serif; font-weight: normal; line-height: 100%; }
ol, p, ul { margin-top: 0; margin-bottom: 1.25em; }
table { border-collapse: collapse; }
td, th { vertical-align: top; }
textarea { height: 7em; }

/* STRUCTURAL STYLES & WORDPRESS CORE */

.alignnone { margin: 0 0 .5em; }
.aligncenter, div.aligncenter { display: block; margin: .5em auto .5em auto; }
.alignright { float: right; margin: .5em 0 1.5em 1.5em; }
.alignleft { float: left; margin: .5em 1.5em 1.5em 0; }
.clear { zoom: 1; }
.clear:before, .clear:after, .gallery:after { content: ''; display: block; clear: both; width: 0; height: 0; }

@media screen and (min-width: 1001px) {
  .tablet, .phone { display: none; }
  .desktop { display: block; }
  span.desktop { display: inline; }
}

@media screen and (max-width: 1000px) {
  .desktop, .phone { display: none; }
  .tablet { display: block; }
  span.tablet { display: inline; }
}

@media screen and (max-width: 600px) {
  .desktop, .tablet { display: none; }
  .phone { display: block; }
  span.tablet { display: inline; }
}


/* HEADER */

header { position: absolute; z-index: 9000; width: 100%; max-width: 1600px; background: -moz-linear-gradient(top, rgba(0,0,0,1) 60%, rgba(0,0,0,0) 100%); background: -webkit-linear-gradient(top, rgba(0,0,0,1) 50%,rgba(0,0,0,0) 100%);  background: linear-gradient(to bottom, rgba(0,0,0,1) 60%,rgba(0,0,0,0) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 ); } 
header a[href] { transition: .1s ease-in all; }

@media screen and (min-width: 1001px) {
  header { display: flex; padding: 25px 50px 20px;  }
  header a[href]#expand { display: none; }
  header a[href]#logo { flex-grow: 0; flex-shrink: 0; padding: 2px 0; }
}

@media screen and (max-width: 1000px) {
  header { height: 66px; overflow: hidden; padding: 15px 30px; }
  header > * { position: relative; z-index: 9002; }
  header div#screen { position: fixed; top: 0; left: 0; z-index: 9001; width: 100vw; height: 0; background: rgba(255,255,255,.9);  opacity: 0; transition: .1s ease-in opacity; }
  header a[href]#expand { position: absolute; top: 6.5px; right: 10px; width: 40px; height: 40px; }
  header a[href]#expand span { display: block; position: absolute; left: 0; width: 32px; height: 4px; background: #fff; transition: .1s ease-in all; }
  header a[href]#expand:hover span { background: #d3c2a5; }
  header a[href]#expand span:nth-child(1) { top: 13px; transform: rotate(0); }
  header a[href]#expand span:nth-child(2) { top: 22px; }
  header a[href]#expand span:nth-child(3) { top: 31px; transform: rotateY(0); }

  header a[href]#logo { display: flex; height: 40px; align-items: center; }
  header a[href]#logo img { width: 50vw; max-width: 250px; height: auto; transition: .1s ease-in filter; }

  header.open { height: 100vh; overflow: visible; }
  header.open div#screen { height: 100vh; opacity: 1; }
  header.open a[href]#expand span { background: #000; }
  header.open a[href]#expand span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
  header.open a[href]#expand span:nth-child(2) { width: 0; }
  header.open a[href]#expand span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
  header.open a[href]#logo img { filter: invert(1); }

}

/* NAVIGATION - GENERAL */

nav > ul { list-style-type: none; margin: 0; }

@media screen and (min-width: 1001px) {
  nav { flex-grow: 1; flex-shrink: 0; }
  nav > ul { display: inline-block; }
  nav > ul > li { display: inline-block; vertical-align: top; ; }
  nav > ul > li > ul { position: absolute; height: 0; overflow: hidden; opacity: 0; transition: .1s ease-in opacity; }
  nav > ul > li:hover > ul { z-index: 9001; height: auto; overflow: visible; opacity: 1;  }
  nav > ul > li > div { position: absolute; height: 0; overflow: hidden; margin-top: -12px; transform: translateX(-100%) translateX(50px); opacity: 0; transition: .1s ease-in opacity; }
  nav > ul > li:hover > div { z-index: 9001; height: auto; overflow: visible; opacity: 1;  }
}

/* NAVIGATION - PRIMARY */

nav > ul.primary > li > ul { list-style-type: none; }
nav > ul.primary > li > ul > li > a[href]:link, nav > ul.primary > li > ul > li > a[href]:visited { color: #515140; padding-left: 0; padding-right: 5px; }
nav > ul.primary > li > ul > li > a[href]:link:before, nav > ul.primary > li > ul > li > a[href]:visited:before { content: url("images/arrow-515140.png"); } 
nav > ul.primary > li > ul > li > a[href]:hover, nav > ul.primary > li > ul > li > a[href]:active { color: #000; padding-left: 5px; padding-right: 0; }
nav > ul.primary > li > ul > li > a[href]:hover:before, nav > ul.primary > li > ul > li > a[href]:active:before { content: url("images/arrow-000000.png"); }
nav > ul.primary > li > ul > li > a[href]:before { position: relative; top: 1px; margin-right: 4px; vertical-align: top; }

@media screen and (min-width: 1001px) {
  nav > ul.primary { margin-left: 80px; }
  nav > ul.primary > li  { padding: 0 12px; }
  nav > ul.primary > li > a[href] { font-size: 19.5pt; font-weight: 300; line-height: 45px; }
  nav > ul.primary > li > a[href] { color: #fff; }
  nav > ul.primary > li:hover > a[href],  nav > ul.primary > li.current-page-ancestor > a[href], nav > ul.primary > li.current_page_item > a[href] { color: #d3c2a5;}
  nav > ul.primary > li > ul { margin: 2px 0 0 0; padding: 20px; background: rgba(239,235,228,.8); box-shadow: 10px 10px 15px rgba(0,0,0,.6); }
  nav > ul.primary > li > ul:before { content: url("images/carat_efebe4.png"); position: absolute; margin: -34px 0 0 0; opacity: .8; }
  nav > ul.primary > li > ul > li { padding: 8px 0; font-size: 12pt; line-height: 16px; }

  @media screen and (max-width: 1400px) {
    nav > ul.primary { margin-left: 30px; } 
  }
}

@media screen and (max-width: 1000px) {
  nav > ul.primary { margin: 2em 0 1em; }
  nav > ul.primary > li > a[href] { font-size: 18pt; font-weight: 300; line-height: 1.5em; }
  nav > ul.primary > li > a[href]:link, nav > ul.primary > li > a[href]:visited { color: #515140 !important; }
  nav > ul.primary > li > a[href]:hover, nav > ul.primary > li > a[href]:active { color: #af0021 !important; }
  nav > ul.primary > li > ul { display: none; margin: 0; padding: 0; }
}

/* NAVIGATION - SECONDARY */

@media screen and (min-width: 1001px) {
  nav > ul.secondary { margin-left: 80px; }
  nav > ul.secondary > li { padding: 0 10px; }
  nav > ul.secondary > li > a[href] { font-size: 12pt; line-height: 50px; }
  nav > ul.secondary > li > a[href]:link, nav > ul.secondary > li > a[href]:visited { color: #d3c2a5; }
  nav > ul.secondary > li > a[href]:hover, nav > ul.secondary > li > a[href]:active { color: #fff; }

  @media screen and (max-width: 1400px) {
    nav > ul.secondary { margin-left: 30px; }
  }

  @media screen and (max-width: 1200px) {
    nav > ul.secondary { display: none; }
  }
}

@media screen and (max-width: 1000px) {
  nav > ul.secondary { margin: 0 0 2em; }
  nav > ul.secondary > li > a[href] { font-size: 12pt; line-height: 1.75em; }
  nav > ul.secondary > li > a[href]:link, nav > ul.secondary > li > a[href]:visited { color: #515140; }
  nav > ul.secondary > li > a[href]:hover, nav > ul.secondary > li > a[href]:active { color: #d3c2a5; }
}

/* NAVIGATION - TERTIARY */

input[type="email"]:focus, input[type="text"]:focus { border: 0 !important; outline: 0 !important; -webkit-appearance: none;  }

nav > ul.tertiary > li > div button.search-submit { float: right; font-size: 10.5pt; border: 0; padding: 5px 10px 6px; background: #7f7f75; color: #fff; line-height: 140%; vertical-align: top; transition: .1s ease-in all; }
nav > ul.tertiary > li > div button.search-submit:hover { background: #515140; }
nav > ul.tertiary > li > div input { display: inline-block; margin: 0; vertical-align: top; }
nav > ul.tertiary > li > div input[type="search"] { width: 210px; border: 0; padding: 6px 10px; font-size: 10.5pt; line-height: 140%; vertical-align: top; background: transparent; }
nav > ul.tertiary > li > div form { display: block; width: 280px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); }
nav > ul.tertiary > li > div ul { list-style-type: none; margin: .25em 0 .5em; padding: 0; }
nav > ul.tertiary > li > div ul li { margin: 0 0 .25em; }

@media screen and (min-width: 1001px) {
  nav > ul.tertiary { float: right; }
  nav > ul.tertiary > li { padding: 0 10px; }
  nav > ul.tertiary > li > a[href] { line-height: 50px; }
  nav > ul.tertiary > li > a[href] img { position: relative; top: 5px; }
  nav > ul.tertiary > li > a[href] { opacity: .6; }
  nav > ul.tertiary > li:hover > a[href] { opacity: 1; }
  nav > ul.tertiary > li > div { margin: 2px 0 0 0; padding: 20px; border: 1px solid #eee; border-width: 0px 1px 1px 1px; background: rgba(255,255,255,.9); color: #525240; box-shadow: 10px 10px 15px rgba(0,0,0,.6); font-size: 10.5pt; line-height: 140%; }
  nav > ul.tertiary > li > div:before { content: url("images/carat_ffffff.png"); position: absolute; margin-top: -34px; right: 28px; opacity: .9; }
  nav > ul.tertiary > li > div a[href]:link, nav > ul.tertiary > li > div a[href]:visited { color: #515140; }
  nav > ul.tertiary > li > div a[href]:hover, nav > ul.tertiary > li > div a[href]:active { color: #000; }
  nav > ul.tertiary > li > div form { display: block; width: 280px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); }
  nav > ul.tertiary > li > div ul a[href] { white-space: nowrap; }
}

@media screen and (max-width: 1000px) {
  nav > ul.tertiary { margin: }
  nav > ul.tertiary > li { margin-bottom: 1em; }
  nav > ul.tertiary > li > a[href] img { filter: invert(1); }
  nav > ul.tertiary > li:last-child > a[href] img { display: none; }
  nav > ul.tertiary > li > div { margin-left: 36px; transform: translateY(-24px);  }
  nav > ul.tertiary > li:last-child > div { margin-left: 0; transform: translateY(0); }
  nav > ul.tertiary > li > div input[type="search"] { width: calc(100% - 70px); }
  nav > ul.tertiary > li > div form { width: 100%; }
  nav > ul.tertiary > li a[href]:link, nav ul.tertiary > li > a[href]:visited { color: #000; }
  nav > ul.tertiary > li a[href]:hover, nav ul.tertiary > li > a[href]:active { color: #af0021; }

  nav > p { font: 14pt "Vollkorn",serif; font-weight: bold; line-height: 1.25em; }
  nav > p a[href] { white-space: nowrap; }
  nav > p a[href]:link, nav > p a[href]:visited { color: #515140; }
  nav > p a[href]:hover, nav > p a[href]:active { color: #af0021; }
}


/* FOOTER - SEARCH - NAVIGATION - TERTIARY */

nav2 > ul.tertiary > li > div button.search-submit { float: right; font-size: 10.5pt; border: 0; padding: 5px 10px 6px; background: #7f7f75; color: #fff; line-height: 140%; vertical-align: top; transition: .1s ease-in all; }
nav2 > ul.tertiary > li > div button.search-submit:hover { background: #515140; }
nav2 > ul.tertiary > li > div input { display: inline-block; margin: 0; vertical-align: top; }
nav2 > ul.tertiary > li > div input[type="search"] { width: 210px; border: 0; padding: 6px 10px; font-size: 10.5pt; line-height: 140%; vertical-align: top; background: transparent; }
nav2 > ul.tertiary > li > div form { display: block; width: 280px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); }
nav2 > ul.tertiary > li > div ul { list-style-type: none; margin: .25em 0 .5em; padding: 0; }
nav2 > ul.tertiary > li > div ul li { margin: 0 0 .25em; }

@media screen and (min-width: 1001px) {
  nav2 > ul.tertiary > li { padding: 0 1px; }
  nav2 > ul.tertiary > li > a[href] { line-height: 50px; }
  nav2 > ul.tertiary > li > a[href] img { position: relative; top: 5px; }
  nav2 > ul.tertiary > li > a[href] { opacity: .6; }
  nav2 > ul.tertiary > li:hover > a[href] { opacity: 1; }
  nav2 > ul.tertiary > li > div { margin: 0 0 0 0; padding: 0px;  border-width: 0px 1px 1px 1px;  font-size: 10.5pt; line-height: 140%; }  nav2 > ul.tertiary > li > div a[href]:link, nav > ul.tertiary > li > div a[href]:visited { color: #515140; }
  nav2 > ul.tertiary > li > div a[href]:hover, nav > ul.tertiary > li > div a[href]:active { color: #000; }
  nav2 > ul.tertiary > li > div form { display: block; width: 280px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #ccc; background: #fff; box-shadow: 0 0 15px rgba(0,0,0,.1); }
  nav2 > ul.tertiary > li > div ul a[href] { white-space: nowrap; }
}

@media screen and (max-width: 1000px) {
  nav2 > ul.tertiary { margin: 0px;}
  nav2 > ul.tertiary > li { margin-bottom: 1em; }
  nav2 > ul.tertiary > li > a[href] img { filter: invert(1); }
  nav2 > ul.tertiary > li:last-child > a[href] img { display: none; }
  nav2 > ul.tertiary > li > div { margin-left: 1px; transform: translateY(-24px);  }
  nav2 > ul.tertiary > li:last-child > div { margin-left: 0; transform: translateY(0); }
  nav2 > ul.tertiary > li > div input[type="search"] { width: calc(100% - 70px); }
  nav2 > ul.tertiary > li > div form { width: 100%; }
  nav2 > ul.tertiary > li a[href]:link, nav ul.tertiary > li > a[href]:visited { color: #000; }
  nav2 > ul.tertiary > li a[href]:hover, nav ul.tertiary > li > a[href]:active { color: #af0021; }

  nav2 > p { font: 14pt "Vollkorn",serif; font-weight: bold; line-height: 1.25em; }
  nav2 > p a[href] { white-space: nowrap; }
  nav2 > p a[href]:link, nav > p a[href]:visited { color: #515140; }
  nav2 > p a[href]:hover, nav > p a[href]:active { color: #af0021; }
}



/* FOOTER - GENERAL */

footer { display: flex; flex-direction: row; padding: 70px 0 0; background: #dfd7c8; color: #515140; }
footer a[href]:link, footer a[href]:visited { color: #515140; }
footer a[href]:hover, footer a[href]:active { color: #000; }
footer > div { flex-basis: 33.3%; flex-grow: 1; flex-shrink: 1; padding: 0 40px; }
footer > div:first-child { padding-left: 50px; }
footer > div:last-child { padding-right: 50px; }
footer h4 { display: none; }
footer p a[href] { white-space: nowrap; }
footer ul { display: inline-block; list-style-type: none; margin-left: 0; padding-left: 0; }
footer ul li a[href] { display: inline-block; transition: .1s ease-in margin; }
footer ul li a[href]:link, footer ul li a[href]:visited { margin-left: 0; background: url("images/arrow-515140.png") no-repeat; }
footer ul li a[href]:hover, footer ul li a[href]:active { margin-left: 5px; background: url("images/arrow-000000.png") no-repeat; }
footer > div#footerLeft { position: relative; top: -10px; }
footer > div#footerLeft p.address { line-height: 128%; } 
footer > div#footerLeft p.social a[href] { display: inline-block; margin: 0 1em 0 0; padding: 0; transition: .1s ease-in opacity; } 
footer > div#footerLeft p.social a[href] img { border-radius: 3px; }
footer > div#footerLeft p.social a[href]:link, footer > div#footerLeft p.social a[href]:visited { opacity: .36; }
footer > div#footerLeft p.social a[href]:hover, footer > div#footerLeft p.social a[href]:active { opacity: .75; }
footer > div#footerLeft p.tagline { margin-top: -1.5em; font-style: italic; line-height: 110%; }
footer > div#footerLeft ul li a[href] { padding-left: 12px; background-position: left center;  }
footer > div#footerCenter { font-size: 9pt; }
footer > div#footerCenter strong { margin-bottom: 0; font-family: "Vollkorn",serif; font-size: 15pt; font-weight: normal; line-height: 100%; }
footer > div#footerCenter img { width: 100%; max-width: 400px; height: auto; }
footer > div#footerCenter p { line-height: 167%; }
footer > div#footerRight ul { border-top: .8px solid #959585; line-height: 14px; }
footer > div#footerRight ul li { border-bottom: .8px solid #959585; padding: .5em 1.5em .5em 0; }
footer > div#footerRight ul li a[href] { padding-left: 1.75em; background-position: .75em .25em; }

@media screen and (max-width: 1000px) {
  footer { flex-direction: column; padding: 50px 30px 100px; }
  footer > div { flex-basis: 100%; padding: 0 0 50px !important; }
}

@media screen and (max-width: 600px) {
  footer ul { display: block; }
}


/* FOOTER SEARCH */

input[type="email"]:focus, input[type="text"]:focus { border: 0 !important; outline: 0 !important; }
nav > ul.ftertiary { display:block!important; }
nav > ul.ftertiary > li > div button.search-submit { float: right; font-size: 10.5pt; border: 0; padding: 5px 10px 6px; background: #7f7f75; color: #fff; line-height: 140%; vertical-align: top; }
nav > ul.ftertiary > li > div button.search-submit:hover { background: #515140; }
nav > ul.ftertiary > li > div input { display: inline-block; margin: 0; vertical-align: top; }
nav > ul.ftertiary > li > div input[type="search"] { width: 210px; border: 0; padding: 6px 10px; font-size: 10.5pt; line-height: 140%; vertical-align: top; background: transparent; }
nav > ul.ftertiary > li > div form { display: block; width: 280px; height: 32px; overflow: hidden; padding: 0; border: 1px solid #ccc; background: #fff;}
nav > ul.ftertiary > li > div ul { list-style-type: none; margin: .25em 0 .5em; padding: 0; }
nav > ul.ftertiary > li > div ul li { margin: 0 0 .25em; }

/* CONTENT STYLES */
/* These are generic content styles that create a base to work with - font sizes, padding, etc.  */

#content { padding-bottom: 35px; color: #666; font-size: 10.5pt; }
#content > div.panel-grid-cell { padding: 100px 50px 120px; }
#content > div.panel-grid-cell:first-child { background: url("images/bg_sidebar.jpg") top right no-repeat; background-size: 50px 100%; }
#content > div.panel-grid-cell:last-child > div { max-width: 900px; }
#content div.textwidget p:last-child { margin-bottom: 0; }
#content div.widget_sow-image + div.widget_sow-editor h3 { margin-top: .5em; }
#content h1 { margin: 1.25em 0 .25em; color: #63686C; font-size: 18pt; line-height: 1em; }
#content h2 { margin: 0 0 .5em; border-bottom: 1px solid #cdc7ab; color: #af0021; font-size: 37pt; font-style: italic; line-height: .8em; }
#content h3 { margin: 1.25em 0 .25em; color: #af0021; font-size: 18pt; line-height: 110%; }
#content h3 a[href]:link, #content h3 a[href]:visited { color: #9e3039; }
#content h3 a[href]:hover, #content h3 a[href]:active { color: #7e282f; }
#content ol, #content p, #content ul { line-height: 140%; }
#content ul:not(.nav-tabs) li { margin: 0 0 .5em; }
#content td, #content th { padding: .25em 1em .25em 0; }

#content.full > div.panel-grid-cell:last-child > div { max-width: 1240px; } 
/* Use this class when the main content area should stretch to fill the entire screen instead of being cropped at 900px. Best used when the content is not a good fit at 900px, such as tabular data or large images. */

#content.noSidebar > div.panel-grid-cell:first-child { background: transparent; }
/* Use this class when the main content area does not have a sidebar. It hides the background image. */

#content *.small { font-size: 9pt; }
/* Use this class on an element when you want fine print. */

@media screen and (max-width: 1000px) {
  #content { flex-direction: column-reverse; }
  #content > div.panel-grid-cell { width: 100%; padding: 50px 30px 60px; }
  #content > div.panel-grid-cell:last-child > div { max-width: 100%; }
}

@media screen and (max-width: 600px) {
  #content > div.panel-grid-cell:last-child div.panel-layout div.panel-grid-cell:first-child { padding-bottom: 30px; }
  #content h2 { font-size: 22pt; }
}

/* HERO IMAGE */
/* These are the styles for formatting the hero image and any header text that might go in the hero image. */

.widget_sow-hero { overflow: hidden; }
.widget_sow-hero div.sow-slide-nav { display: none !important; }
.widget_sow-hero h1 { position: absolute; bottom: 20px; margin: 0; padding: 0 100px !important; font: 61pt "Vollkorn",serif !important; font-style: italic !important; font-weight: normal; !important; line-height: 1em !important; text-shadow: 0 0 2px rgba(0,0,0,.8); !important; }
.widget_sow-hero li, .widget_sow-hero li > div { max-height: 568px; }
.widget_sow-hero ol.sow-slider-pagination { display: none !important; }
.page-template-template-home .widget_sow-hero h1 { font-size: 78pt !important; bottom: 24pt; }

@media screen and (max-width: 1000px) {
  .widget_sow-hero h1, .page-template-template-home .widget_sow-hero h1 { font-size: 45pt !important; padding: 0 30px !important; }
}

@media screen and (max-width: 600px) {
  .widget_sow-hero h1, .page-template-template-home .widget_sow-hero h1 { font-size: 30pt !important; }
}

/* HERO IMAGE - VIDEO */

#HomeVideo, #HomeVideo li { max-height: 758px; }

@media screen and (max-width: 1000px) {
  #HomeVideo video { display: none; }
}

/* SIDEBAR */
/* These are the styles for formatting the sidebar menus and any other content that might go into the sidebar. */

.sidebar { font-size: 12pt; }
.sidebar a[href] { display: block; padding: 12px 5px 12px 12px; background-position: 0px 14px !important; line-height: 1em; transition: .1s ease-in transform; }
.sidebar a[href]:link, .sidebar a[href]:visited { color: #515140; background: url("images/arrow-515140.png") no-repeat; transform: translateX(0); }
.sidebar a[href]:hover, .sidebar a[href]:active { color: #af0021; background: url("images/arrow-af0021.png") no-repeat; transform: translateX(5px); }
.sidebar li { border-bottom: 1px solid #d7d5bf; }
.sidebar li.current-menu-item > a[href]:link, .sidebar li.current-menu-item > a[href]:visited { color: #af0021; background: url("images/arrow-af0021.png") no-repeat; transform: translateX(0); }
.sidebar li.current-menu-item > a[href]:hover, .sidebar li.current-menu-item > a[href]:active { color: #af0021; background: url("images/arrow-af0021.png") no-repeat; transform: translateX(5px); }
.sidebar ul { display: block; list-style-type: none; margin: 0; border-top: 1px solid #d7d5bf; padding: 0; }
.sidebar ul li a[href] { margin-left: 10px; }
.sidebar li.current-page-ancestor > a[href], .sidebar li.current-menu-item > a[href] { color: #af0021 !important; background: url("images/arrow-af0021.png") no-repeat; }
.sidebar ul li.current_page_ancestor > ul, .sidebar ul li.current-menu-item > ul { display: block; }
.sidebar ul ul { display: none; }
.sidebar ul ul ul { display: none; }
.sidebar ul ul li:last-child { border-bottom: none; }
.sidebar ul ul li a[href] { margin-left: 40px; } /* 20 */
.sidebar ul ul ul li a[href] { margin-left: 70px; } /* 30 */

/* TODAY AT FALLINGWATER */
/* These styles are for formatting the slide-out "Today at Fallingwater" widget that appears fixed on the page for the home page and other top level pages. They should be tinkered with very carefully. */

section#today { position: fixed; z-index: 8000; width: 100%; max-width: 1600px; transition: .3s ease-in all;  }
section#today section > div a[href]:link, section#today section > div a[href]:visited { color: #515140; }
section#today section > div a[href]:hover, section#today section > div a[href]:active { color: #000; }
section#today section > div a[href].tickets { display: block; border: 1px solid rgba(0,0,0,.2); padding: 12px 19px; background: rgba(255,255,255,.2); color: #515140 !important; font-size: 13px; font-weight: bold; line-height: 19px; transition: .1s ease-in background; }
section#today section > div a[href].tickets:hover { background: rgba(255,255,255,.5); }
section#today section > div a[href].directions { display: none; margin-top: .5em; border: 1px solid rgba(0,0,0,.2); padding: 12px 19px; background: rgba(255,255,255,.2); color: #515140 !important; font-size: 13px; font-weight: bold; line-height: 19px; transition: .1s ease-in background; }
section#today section > div a[href].directions:hover { background: rgba(255,255,255,.5); }
section#today section > div > div { padding: 20px; }
section#today section > div h3 { cursor: pointer;  margin: 0; color: #63686C; font-family: "Montserrat",serif; font-size: 20px; font-weight: normal; line-height: 20px; }
section#today section > div img { margin-left: .5em; vertical-align: top; }
section#today section > div p { margin: 0 0 1em; }


@media screen and (min-width: 1001px) {
  section#today { top: 30vh; }
  .home section#today { top: 45vh; }
  @media screen and (min-height: 840px) {
    section#today { top: 284px; }
  }
  @media screen and (min-height: 950px) {
    .home section#today { top: 379px; }
  }
  section#today section { position: absolute; right: 0; min-height: 54px; min-width: 54px; overflow-X: hidden; margin: 0 auto; padding: 0; transform: translateY(-50%); }
  section#today section > div { width: 300px; background: rgba(223,215,200,.85); color: #515140; font-size: 13px; line-height: 17px; box-shadow: -10px 10px 15px rgba(0,0,0,.6); opacity: 1; transition: .3s ease-in all; } 
  section#today section > div h3 { padding: 17px 0 17px 64px; background: rgba(255,255,255,.25);  }
  section#today a[href].opener { position: absolute; width: 54px; height: 54px;z-index: 9000; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.0); transition: .3s ease-in all; }
section#today a[href].opener img { position: relative; top: 19px; left: 11px; transform: rotate(-90deg); transition: .3s ease-in all; }
  section#today.closed section > div { opacity: 1; margin-right: -264px; box-shadow: 10px 10px 15px rgba(0,0,0,0); opacity: 0; }
  section#today.closed a[href].opener { border: 1px solid #eee; border-width: 1px 1px 1px 0; box-shadow: 0 5px 5px rgba(0,0,0,.1); }
  section#today.closed a[href].opener img { top: 18px; left: 8px; transform: rotate(90deg); }
}

@media screen and (max-width: 1000px) {
  section#today { bottom: 0; background: rgba(239,235,228,1); box-shadow: 0px 0px 15px rgba(0,0,0,.6); transform: translateY(0); }
  section#today section > div a[href].directions { display: block; }
  section#today section > div h3 { padding: 17px 0 12px 60px; }
  section#today section > div > div { height: auto; }
  section#today a[href].opener { position: absolute; top: 0px; left: 0; width: 50px; height: 50px; z-index: 9000; background: #fff; box-shadow: 0 0 10px rgba(0,0,0,.0); transition: .3s ease-in all; }
  section#today a[href].opener img { position: relative; top: 17px; left: 9.5px; transform: rotate(0deg); transition: .3s ease-in all; }
  section#today.closed { transform: translateY(100%) translateY(-50px); }
  section#today.closed a[href].opener img { transform: rotate(-180deg); }
}




/* WARNING */
/* In general content above this comment is structural in nature. Tinker with it very carefully. */



/* CALL TO ACTION */
/* This class is for creating sidebar call-to-action boxes similar to the one on visit/tours/fallingwater-tours/focus-tour/ */

#content div.cta { padding: 30px; background: #efebe1; color: #515140; }
#content div.cta strong { font-size: 12pt; }
#content div.cta ul { margin-left: 0; padding-left: 1em; }


/* CAROUSEL */
/* These styles are for formatting a carousel, similar to the one on the home page. */

#carousel { background: #d3c2a5; }
#carousel div.sow-slide-nav { display: none !important; }
#carousel div.sow-slider-image-container .panel-grid-cell:last-child { height: 396px; padding: 70px 50px 110px 50px; background: rgba(223,210,185,.9); }
#carousel div.sow-slider-image-container .panel-grid-cell:last-child h3 { font-family: "Vollkorn",serif; font-weight: normal; margin: 0; color: #515140; font-size: 28pt; font-style: italic; line-height: 1em; text-shadow: none !important; }
#carousel div.sow-slider-image-container .panel-grid-cell:last-child p { margin: 0; padding: 0 20px 0 0; color: #666; font-size: 10.5pt; line-height: 140%; text-shadow: none !important; }
#carousel ol.sow-slider-pagination { display: block !important; }
#carousel ol.sow-slider-pagination li a[href] { display: inline-block; width: 24px; height: 9px; margin-right: 10px; border-radius: 0; background: #fff; opacity: 1; font-size: 0; transition: .1s ease-in all; }
#carousel ol.sow-slider-pagination li a[href]:hover, #carousel ol.sow-slider-pagination li.sow-active a[href] { background: #af0021; opacity: 1;  }

#content #carousel div.sow-slider-image-container .panel-grid-cell:last-child { height: 400px; }
#content #carousel ul li.sow-slider-image { margin-bottom: 0; }

@media screen and (max-width: 1000px) { 
  #carousel div.sow-slider-image-container .panel-grid-cell-empty { width: 50%; }
  #carousel div.sow-slider-image-container .panel-grid-cell:last-child { width: 50%; padding: 30px; }

  #content #carousel div.sow-slider-image-container .panel-grid-cell:last-child h3 { font-size: 24pt; }
}

@media screen and (max-width: 600px) { 
  #carousel div.sow-slider-image-container .panel-grid-cell-empty { display: none }
  #carousel div.sow-slider-image-container .panel-grid-cell:last-child { width: 100%; background: transparent; }
  #carousel div.sow-slider-base ul.sow-slider-images li.sow-slider-image.sow-slider-image-cover { height: 520px !important; padding-top: calc(50% + 30px); background-repeat: no-repeat; background-position: top center; background-size: 200% auto; }
  #carousel div.sow-slider-base ul.sow-slider-images li.sow-slider-image .sow-slider-image-container { position: static; }

  #content #carousel div.sow-slider-base ul.sow-slider-images li.sow-slider-image.sow-slider-image-cover { background-size: 100% auto; }
  #content #carousel div.sow-slider-base ul.sow-slider-images li.sow-slider-image.sow-slider-image-cover { padding-top: calc(40% + 30px); }
  #content #carousel > div.panel-grid-cell { padding-bottom: 0; }

}


/* CAROUSEL-ESQUE */
/* These styles create an appearance similar to the carousel but on static content. You can see them in action on the /history/ page. The .up2a style is for content with text on the right, .up2b is for when the text is on the left. */

.up2a h3 { font-family: "Vollkorn",serif; font-weight: normal; margin: 0; color: #515140 !important; font-size: 28pt !important; font-style: italic; line-height: 1em; text-shadow: none !important; }
.up2a p { line-height: 142%; }
.up2a div.textwidget div { width: 50%; margin-left: 50%; padding: 70px 50px; background: rgba(211,194,165,.9); }
.up2a div.widget_siteorigin-panels-builder { height: 100%; }

@media screen and (max-width: 1000px) {
  .up2a { flex-direction: column !important; }
  .up2a div.panel-grid-cell { width: 100% !important; margin-bottom: 18px !important; }
  .up2a div.textwidget div { padding: 50px 30px; }
}

@media screen and (max-width: 600px) {
  .up2a { background-color: #d3c2a5; background-repeat: no-repeat !important; background-position: top center !important; background-size: 100% auto !important; }
  .up2a div.textwidget div { width: 100%; margin: 0; padding: calc(42.5% + 30px) 30px 30px; background: transparent;  }
}

.up2b h3 { font-family: "Vollkorn",serif; font-weight: normal; margin: 0; color: #515140 !important; font-size: 8pt !important; font-style: italic; line-height: 1em; text-shadow: none !important; }
.up2b p { line-height: 142%; }
.up2b div.textwidget div { width: 50%; padding: 70px 50px; background: rgba(211,194,165,.9); }
.up2b div.widget_siteorigin-panels-builder { height: 100%; }

@media screen and (max-width: 1000px) {
  .up2b { flex-direction: column !important; }
  .up2b div.panel-grid-cell { width: 100% !important; margin-bottom: 18px !important; }
  .up2b div.textwidget div { padding: 50px 30px; }
}

@media screen and (max-width: 600px) {
  .up2b { background-color: #d3c2a5; background-repeat: no-repeat !important; background-position: top center !important; background-size: 100% auto !important; }
  .up2b div.textwidget div { width: 100%; margin: 0; padding: calc(42.5% + 30px) 30px 30px; background: transparent;  }
}


/* MORE LINK STYLES */
/* These classes are for setting up "more information"  links like the ones on the home page. They automatically return the link to the next line, add a colored carat to the end of the link, and add the rollover behavior that shimmies the link to the right. All links rollover to black. */

a[href].moreBlue { display: block; transition: .1s ease-in padding; }
a[href].moreBlue:after { position: relative; top: 1px; margin-left: 4px; vertical-align: top; }
a[href].moreBlue:link, a[href].moreBlue:visited { color: #699ea0; padding-left: 0; }
a[href].moreBlue:link:after, a[href].moreBlue:visited:after { content: url("images/arrow-699ea0.png"); } 
a[href].moreBlue:hover, a[href].moreBlue:active { color: #000; padding-left: 5px; }
a[href].moreBlue:hover:after, a[href].moreBlue:active:after { content: url("images/arrow-000000.png"); } 

a[href].moreGreen { display: block; transition: .1s ease-in padding; }
a[href].moreGreen:after { position: relative; top: 1px; margin-left: 4px; vertical-align: top; }
a[href].moreGreen:link, a[href].moreGreen:visited { color: #690; padding-left: 0; }
a[href].moreGreen:link:after, a[href].moreGreen:visited:after { content: url("images/arrow-669900.png"); } 
a[href].moreGreen:hover, a[href].moreGreen:active { color: #000; padding-left: 5px; }
a[href].moreGreen:hover:after, a[href].moreGreen:active:after { content: url("images/arrow-000000.png"); } 

a[href].moreRed { display: block; transition: .1s ease-in padding; }
a[href].moreRed:after { position: relative; top: 1px; margin-left: 4px; vertical-align: top; }
a[href].moreRed:link, a[href].moreRed:visited { color: #af0021; padding-left: 0; }
a[href].moreRed:link:after, a[href].moreRed:visited:after { content: url("images/arrow-af0021.png"); } 
a[href].moreRed:hover, a[href].moreRed:active { color: #000; padding-left: 5px; }
a[href].moreRed:hover:after, a[href].moreRed:active:after { content: url("images/arrow-000000.png"); } 

a[href].moreTan { display: block; transition: .1s ease-in padding; }
a[href].moreTan:after { position: relative; top: 1px; margin-left: 4px; vertical-align: top; }
a[href].moreTan:link, a[href].moreTan:visited { color: #918671; padding-left: 0; }
a[href].moreTan:link:after, a[href].moreTan:visited:after { content: url("images/arrow-tan.png"); } 
a[href].moreTan:hover, a[href].moreTan:active { color: #000; padding-left: 5px; }
a[href].moreTan:hover:after, a[href].moreTan:active:after { content: url("images/arrow-000000.png"); } 


a[href].moreBrown { display: block; transition: .1s ease-in padding; }
a[href].moreBrown:after { position: relative; top: 1px; margin-left: 4px; vertical-align: top; }
a[href].moreBrown:link, a[href].moreBrown:visited { color: #515140; padding-left: 0; }
a[href].moreBrown:link:after, a[href].moreBrown:visited:after { content: url("images/arrow-brown.png"); } 
a[href].moreBrown:hover, a[href].moreBrown:active { color: #000; padding-left: 5px; }
a[href].moreBrown:hover:after, a[href].moreBrown:active:after { content: url("images/arrow-000000.png"); }

/* NEWS LISTING */
/* These are the styles for formatting the news listing. */

.news div.iw-so-article-content { padding: 0 !important; }
.news h4.iw-so-article-title { font: bold 11pt 'Montserrat', sans-serif; }
.news p.iw-so-article-byline-above { margin: 0; font-size: 9pt; }
.news p.iw-so-article-excerpt { margin: 0; font-size: 10.5pt; }


/* RULE CLASSES */
/* These classes add a single pixel beige rule to the bottom and top of an element. In general they should only be used on row elements. */

.ruleBottom { margin-bottom: 18px; border-bottom: 1px solid #e1dccb; }
.ruleTop { margin-top: 18px; border-top: 1px solid #e1dccb; }
#content div.ruleTop { padding-top: 2em; }


/* SEARCH RESULTS + PRESS RELEASES */
/* These are the styles for formatting the search results and blog post pages. Because of the nature of these pages, they cannot be constructed in PageBuilder, so an alternative structure has been built that mimics the look and feel of the PageBuilder pages. */

#heroStatic { width: 100%; height: 270px; background-image: url("/wp-content/uploads/visit/billboard-visit01.jpg"); background-position: center center; background-size: cover; }

#content.contentStatic { display: flex; }
#sidebarStatic { width: 27.5%; padding: 100px 50px; background: url("images/bg_sidebar.jpg") top right no-repeat; background-size: 50px 100%; }
#newsStatic, #searchStatic { width: 72.5%; max-width: 1000px; padding: 100px 50px; }

#searchStatic article h2 { margin: 0; border-bottom: 0; padding: 0; font: bold 10.5pt "Montserrat",sans-serif; }
#searchStatic a.post-edit-link { display: none; }
#searchStatic p { margin-bottom: 1.25em !important; }
#searchStatic span.date { display: none; }
#searchStatic span.author { display: none; }
#searchStatic span.comments { display: none; }

@media screen and (max-width: 1000px) {
  #sidebarStatic, #newsStatic, #searchStatic { width: 100%; padding: 50px 30px; }
}


/* SITEMAP */

.sitemap a[href] { display: block; line-height: 10.5pt; }

.sitemap li { margin: 0 !important; padding: 0; }
.sitemap ul { list-style-type: none; margin: 0; border-bottom: 3px solid #699ea0; padding: 0; }
.sitemap ul + ul { margin-top: 4em; }
.sitemap ul ul { border-bottom: none; }
.sitemap ul li { border-top: 3px solid #699ea0; }
.sitemap ul li a[href] { padding: .5em 1em; font-weight: bold; }
.sitemap ul ul li { border-top: 2px solid #699ea0; }
.sitemap ul ul li a[href] { padding: .5em 2em; font-size: 10pt; font-weight: normal; }
.sitemap ul ul ul li { border-top: 1px solid #699ea0; }
.sitemap ul ul ul li a[href] { padding: .5em 3em; font-size: 9.5pt; font-weight: normal; }
.sitemap ul ul ul ul li a[href] { padding: .5em 4em; font-size: 9pt; font-weight: normal; }

/* SIX UP */
/* These styles create an appearance similar to the 3x2 area om the home page. */

.up6 { color: #858579; }
.up6 h3 { margin: 0 0 .25em; color: #af0021; font-size: 18pt; }
.up6 h3 a[href] { color: #af0021; }
.up6 h3 a[href]:hover, #content h3 a[href]:active { color: #7e282f; }
.up6 p { line-height: 150%; }



@media screen and (max-width: 1000px) {
  .up6 { flex-direction: column !important; padding: 0 30px !important; }
  .up6.ruleBottom { padding-bottom: 60px !important; }
  .up6.ruleTop { padding-top: 60px !important; }
  .up6 div.panel-grid-cell { width: 100% !important; padding: 15px 0 !important; }
}


/* THREE UP */
/* These styles create an appearance similar to the top content bar of the home page (visit/education/history). They may require your content to be formatted as close to that as possible. */

.up3 { color: #666; }
.up3 > div.panel-grid-cell { padding: 100px 50px; background: url("images/bg_callout.png") top right no-repeat; background-size: auto 100%; }
.up3 h3 { padding: 0 0 .5em; font-size: 30pt; }
.up3 h3 a[href] { color: #666; }
.up3 p { font-size; 12pt; line-height: 137.5%; }

@media screen and (max-width: 1000px) {
  .up3 { flex-direction: column; padding: 20px 30px; }
}

@media screen and (max-width: 600px) {
  .up3 div.textwidget { flex-direction: column; }
  .up3 div.textwidget div { width: 100%; }
  .up3 div.textwidget div img { width: 100%; height: auto; }
  .up3 div.textwidget p { padding: 1em 0 0; }
}


/* THUMBNAIL */
/* This creates a thumbnail display where the image and the text next to it are locked as if in a table. You can see this in action on the /visit/ page. */

div.thumbnailed div.panel-grid-cell { display: flex; flex-flow: row wrap; align-items: flex-start; justify-content: left; }
div.thumbnailed div.panel-grid-cell h3 { margin-top: 0 !important; }
div.thumbnailed div.panel-grid-cell > div.widget_sow-headline { width: 100%; flex-grow: 0; flex-shrink: 0; }
div.thumbnailed div.panel-grid-cell > div.widget_sow-image { width: 140px; flex-grow: 1; flex-shrink: 1; }
div.thumbnailed div.panel-grid-cell > div.widget_sow-editor { width: calc(100% - 140px); flex-grow: 1; flex-shrink: 1; padding-left: 2em; }

@media screen and (max-width: 1000px) {
  div.thumbnailed div.panel-grid, div.thumbnailed div.panel-row-style { flex-flow: column; }
  div.thumbnailed div.panel-grid-cell { width: 100% !important; padding: 30px 0 !important; background: transparent; }
}

@media screen and (max-width: 600px) {
  div.thumbnailed div.panel-grid-cell { flex-flow: column; }
  div.thumbnailed div.panel-grid-cell > div { width: 100% !important; }
  div.thumbnailed div.panel-grid-cell > div.widget_sow-editor { padding: 1em 0 0; }
}


/* TICKETING SECTION */
/* These styles are for formatting the ticketing section on the /visit/ page. */

#content div.ticketing { margin-bottom: 30px; padding-top: 18px; background-size: cover; }
#content div.ticketing a[href]:link, #content div.ticketing a[href]:visited { color: #af0021; }
#content div.ticketing a[href]:hover, #content div.ticketing a[href]:active { color: #000; }
#content div.ticketing > div { border-top: 0px solid #cdc7ab; padding: 42px 50px 120px; }
#content div.ticketing h2 { border-bottom: 0; }
#content div.ticketing ul { list-style-type: none; margin-left: 0; padding-left: 0; font-size: 13.5pt; }

@media screen and (max-width: 1000px) {
  #content div.ticketing > div { padding: 18px 30px 60px; }
}


/* TWO UP */
/* These are the styles for formatting the area at the bottom of the home page where text is transparently overlaid on top of static images. */

.up2.ruleBottom { padding-bottom: 80px; }
.up2 h3 { font-family: "Vollkorn",serif !important; font-weight: normal; margin: 0 0 .25em; color: #515140; font-size: 27pt; font-style: italic; }
.up2 p { line-height: 142%; }
.up2 div.textwidget div { width: 50%; padding: 70px 50px; background: rgba(223,210,185,.9); }
.up2 div.widget_siteorigin-panels-builder { height: 100%; }

@media screen and (max-width: 1000px) {
  .up2 { flex-direction: column !important; }
  .up2.ruleBottom { padding-bottom: 60px; }
  .up2 div.panel-grid-cell { width: 100% !important; margin-bottom: 18px !important; }
  .up2 div.textwidget div { padding: 50px 30px; }
}

@media screen and (max-width: 600px) {
  .up2 div.textwidget div { width: 100%; background: transparent; padding: 30px; }
  .up2 > div.panel-grid-cell > div.so-panel > div { padding-top: calc(37.5% + 30px); background-color: #d3c2a5; background-repeat: no-repeat !important; background-position: top center !important; background-size: 100% auto !important; }
}

/* HOVER 50% WHITE IMAGES */
/* Rollover image to show a 50% value hover effect */
div.rollWhite { width: 100%; }
div.rollWhite img { width: 100% }
div.rollWhite:hover img { opacity: 0.5; }
	
/* ZOOMING IMAGES */
/* Use these styles on a SiteOrigin Image widget if you want to add the zoom effect. the .zoomSquare class creates the effect on an 140x140 thumbnail-sized image, while the .zoomFull class creates the effect on an image that is scaled to fit the width of the window but locked to 200px tall. */

div.zoomFull { position: relative ; width: 100%; height: 100%; background-color: black !important; }
div.zoomFull img { position: relative; width: 100%; height: 100%; }
#content div.zoomFull:hover img { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */}

div.zoomNull { position: relative; width: 100%; height: 200px; overflow: hidden; background-color: black !important; }
div.zoomNull img { position: absolute; top: 50%; left: 50%; width: 100% !important; min-width: 451px !important; height: auto !important; transform: scale(1) translate(-50%,-50%); transform-origin: top left; }
#content div.zoomNull:hover img { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */}

div.zoomSquare { position: relative; width: 140px; height: 140px; overflow: hidden; background-color: black !important; /* border: 1px solid #727272; */ }
div.zoomSquare img { position: absolute; top: 50%; left: 50%; width: 142px !important; height: 142px !important; transform: scale(1) translate(-50%,-50%); transform-origin: top left; transition: .1s ease-in transform;  }
div.zoomSquare:hover img { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */}

div.zoomHigh { position: absolute ; width: 158px; height: 158px; overflow: hidden }
div.zoomHigh img { position: absolute; width: 158px !important; height: 158px !important }
div.zoomHigh:hover img { opacity: 0.5; filter: alpha(opacity=50); /* For IE8 and earlier */ }

/* zoomMed now same function as zoomFull - 10-4-2019 - Jmatters */
div.zoomMed { position: relative ; width: 100%; height: 100%; background-color: black !important; }
div.zoomMed img { position: relative; width: 100%; height: 100% }
div.zoomMed:hover img { opacity: 0.8; filter: alpha(opacity=80); /* For IE8 and earlier */ }

@media screen and (max-width: 600px) {
  div.zoomFull, div.zoomSquare, div.zoomHigh { width: 100% !important; background-color: black !important; }
  div.zoomFull img, div.zoomSquare img, div.zoomHigh { width: 100% !important; max-width: 100% !important; height: auto !important; }
}

/* NEWSLETTER */
/* Styling for Benchmark Email Light newsletter subscription form, which should be called out via shortcode in an object with the #newsletter ID. */

#newsletter form.benchmarkemaillite-subscribe { }
#newsletter form.benchmarkemaillite-subscribe div { font-size: 13.5pt; margin-bottom: 1.5em; }
#newsletter form.benchmarkemaillite-subscribe input[type="email"], #newsletter form.benchmarkemaillite-subscribe input[type="text"] { display: block; width: 100%; border: 1px solid #af0021; padding: .25em .5em; }
#newsletter form.benchmarkemaillite-subscribe input[type="submit"] { width: 100%; margin-top: .25em; border: 0; border-radius: 0; padding: .25em .5em; background: #0d776e; font-size: 18pt; font-weight: 500; color: #fff; text-transform: uppercase; transition: .2s ease-in background, .2s ease-in hover; }
#newsletter form.benchmarkemaillite-subscribe input[type="submit"]:hover { background: #fff; color: #666; }

/* GDPR ACCEPT BUTTON */
/* Additional stylng for newsletter subscription buttons, as seen in the page footer and on the home page in the newsletter spotlight. */

a[href].accept-button { display: inline-block; margin-top: .25em; padding: .25em .5em; font-size: 14.25pt; font-weight: 500; text-align: center; text-transform: uppercase; box-shadow: 1px 1px 1px rgba(0,0,0,.3); }
a[href].accept-button:link, a[href].accept-button:visited { color: #fff; background: #699ea0; width: 100px; padding: 10px}
a[href].accept-button:hover, a[href].accept-button:active { color: #fff !important;  background: #666; }

/* MAIN BACKGROUND SHADING */
/* For 15% opacity colored backgrounds (.shaded-brown, .shaded-green, .shaded-teal) and 100% opacity colored backgrounds (.shaded-white), plus optional styles to add additional padding where required (.shaded-padding). */

.shaded { padding-top: 1.5em; padding-bottom: 1.5em; background: rgba(112,98,89,.10); }
.shaded-padding { padding-left: 1.5em; padding-right: 1.5em; }
.shaded-brown { padding-top: 1.5em; padding-bottom: 1.5em; background: rgba(223,215,200,.50); }
.shaded-white { padding-left: 1.5em; padding-right: 1.5em; background: #fff; }

/*Video resize to fit mobile */
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

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