/*!
 * @file template/includes/css/base2014/core-base.css
 */

:root {
  --cutler: #00694E;
  --under-the-elms: #024230;
  --putnam: #756E65;
  --trillium: #F9F7ED;
  --sycamore: #E7ECC3;
  --marigold: #AA8A00;
  --web-marigold: #C4AD4D;
  --teal: #B5E3D8;
  --moss: #A4D65E;
  --rust: #FA4616;
  --white: #FFFFFF;
  --black: #000000;
  --light-gray: #F4F3F2;
  --middle-gray: #524D47;

  --text-sans: proxima-nova, Arial, Verdana, sans-serif;
  --text-serif: p22-mackinac-pro, Times New Roman, serif;
  --text-display: termina, Arial Black, Verdana, sans-serif;
  --text-display-alt: industry, Tahoma, sans-serif;
}

/* Global Tag Classes */
html{
  font-size: 10px; /* Set at 10px for easy rem calculations. Example 1.2rem = 12px when html font-size is set to 10px. */
}

body {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  color: var(--black);
  margin: 0;
  margin-left: 0px!important; /* fixes a bug that was blowing out bootstrap when using admin toolbar module */
  overflow-x: hidden;
  overflow-y: auto;
}
body, a, p, span {
  font-family: var(--text-sans);
  font-weight: 400;
}

/* WSS-4233 - Antialiasing Fix */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@viewport{
  width:320px auto!important;
  zoom:1.0;
}

body > img { /* Hide marketting pixels */
	position: absolute;
	visibility: hidden;
}

button {
    padding: 0;
    background: 0;
    border: 0;
    cursor: pointer
}

hr {
  color: var(--putnam);
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0 0 8px 0;
  padding: 0;
  padding: 15px 0px 0px 0px;
  line-height: 1.25em;
}
/* This prevents italics in headings by WYSIWYG abuse */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em{
  font-style: normal !important;
}
/* Landing-page titles are to be centered */
h1.landing-page {
  text-align:center;
}

/* Font Awesome 6 and fallbacks */
/* need to keep `.fa` declarations until all components utilize fa6 classes */
#ouws_content .fa,
#block-seven-content .fa,
#ouws_content .fa-sharp,
#block-seven-content .fa-sharp {
  font-family: var(--text-sans);
}

.fa:before,
#ouws_content .fa:before,
#block-seven-content .fa:before,
.fa-sharp:before,
#ouws_content .fa-sharp:before,
#block-seven-content .fa-sharp:before  {
  font-family:"Font Awesome 6 Sharp", "Font Awesome 6 Brands" !important;
}

/* Displays do not correlate to heading (h1, h2, etc) */
/* and are driven by design */
/* Used in Hero space */
.display-one {
  color: var(--cutler);
  font-family: var(--text-serif);
  font-weight: 700;
  font-size: 64px;
}
/* Mobile display styles  */
@media only screen and (max-width: 767px){
  .display-one {
    font-size: 42px;
    line-height: .15;
    margin-top: 32px;
    }
}

/* Page Titles */
.display-two, #middle-top .page-2017-title * {
  color: var(--cutler);
  font-family: var(--text-serif);
  font-weight: 700;
  font-size: 48px;
}
@media (max-width:576px){
  .display-two, #middle-top .page-2017-title * {
    font-size:40px;
  }
}

/* Styled Marketing Text */
.termina-largecaps {
  color: var(--cutler);
  font-family: var(--text-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: 40px;
  line-height: .95em;
}
@media (min-width:500px){
  .termina-largecaps{
    font-size:60px;
  }
}
@media (min-width:992px){
  .termina-largecaps{
    font-size:80px;
  }
}
@media (min-width:1200px){
  .termina-largecaps{
    font-size:100px;
  }
}
.proxima-font {
  color: var(--cutler);
  font-family: var(--text-sans);
  font-weight: 400;
}

.mackinac-font {
  color: var(--cutler);
  font-family: var(--text-serif);
  font-weight: 500;
}

.display-three {
  color: var(--cutler);
  font-family: var(--text-serif);
  font-weight: 700;
  font-size: 42px;
}
@media (max-width:576px){
  .display-three{
    font-size:32px;
  }
}

.display-four {
  color: var(--cutler);
  font-family: var(--text-serif);
  font-weight: 700;
  font-size: 36px;
}

.display-five {
  color: var(--cutler);
  font-family: var(--text-serif);
  font-weight: 700;
  font-size: 30px;
}

figure {
  margin: 0;
}

/* Page Title */
.ohio-one-column-main #middle h1.page-2017-title {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--putnam);
}

.ohio-two-column-right-main #middle h1.page-2017-title,
.ohio-two-column-left-main #middle h1.page-2017-title,
.ohio-three-column-main #middle h1.page-2017-title,
.page-node-type-modular-page #middle.container h1.page-2017-title {
  padding-bottom: 15px;
  border-bottom: 1px solid var(--putnam);
  margin:15px 0;
}

.page-node-type-modular-page #middle.container h1.page-2017-title {
  border-bottom: none;
}

@media screen and (max-width: 1200px) {
  .ohio-one-column-main #middle h1.page-2017-title,
  .ohio-two-column-right-main #middle h1.page-2017-title,
  .ohio-two-column-left-main #middle h1.page-2017-title,
  .ohio-three-column-main #middle h1.page-2017-title,
  .page-node-type-modular-page #middle.container h1.page-2017-title {
    margin-left: 0;
  }
}

h1, h1 a {
  font-family: var(--text-serif);
  font-size: 48px;
  font-weight:700;
  color: var(--cutler);
}

h2, .middle h2 a {
  font-family: var(--text-serif);
  font-size: 42px;
  font-weight: 700;
  color: var(--cutler);
}

h2.page-2017-title, .views-content h2{
  font-weight: bold;
  margin-top: 0px!important;
  margin-bottom:0px;
  font-size:38px;
}

.middle-right h2 {
  font-size: 22px;
  font-weight: 700;
  color: var(--cutler);
  font-family: var(--text-serif);
  line-height: 30px;
}

h3, .middle h3 a {
  font-size: 32px;
  font-family: var(--text-serif);
  font-weight: 700;
  color: var(--cutler);
}


h4, .middle h4 a {
  font-size: 28px;
  font-family: var(--text-serif);
  font-weight: 700;
  color: var(--cutler);
}

h5, .middle h5 a {
  font-size: 23px;
  font-family: var(--text-serif);
  font-weight: 700;
  color: var(--cutler);
}

h6, .middle h6 a {
  font-size: 18px;
  font-family: var(--text-serif);
  font-weight: 700;
  color: var(--cutler);
}

main ul, main ol {
  overflow: hidden; /* Fixes a bug when a ul is next to a floated image. This will float it next to it instead of overlap. */
}

p, ul, ol, li, caption, figcaption, div, span, section, aside, main, article, header, footer, nav {color:var(--black); font-size: 18px; padding:0; margin:0; line-height: 1.5;} /* by not specifying a unit for line-height it will be 1.5 times the element font size */

.middle-right p, .middle-right ul, .middle-right ol, .middle-right li, .middle-right caption,
.middle-right figcaption, .middle-right div, .middle-right span, .middle-right section,
.middle-right aside, .middle-right main, .middle-right article, .middle-right header, .middle-right footer, .middle-right nav {
  font-size: 16px;
  margin: 0 0 8px 0;

}

.caption > figcaption{
  font-style: normal;
  font-size: 16px;
  font-family: var(--text-sans);
  color: var(--middle-gray);
}

p {
  margin: 15px 0 0 0;
}

nav h2 {
  display: none;
}

p + ul {
  clear: both
}

a img {
  border: 0
}

@media screen and (max-width: 767px) {
  p img {
    width: 100%;
  }
}

.top a,
.bottom a {
    color: var(--cutler)
}

.middle a,
.cke_contents a {
    color: var(--cutler);
    text-decoration: underline;
}

#ouws_content #middle p a:focus,
#middle a:focus, .mainBody a:focus span, .mainBody a:focus em, .mainBody a:focus b, .mainBody a:focus strong, .mainBody a:focus i {
    color: var(--white);
    background: var(--under-the-elms);
}

.mainBody a {
  color:var(--cutler);
  text-decoration:underline;
  font-weight: 500;
}

.mainBody a:not([href]),
.mainBody a:not([href]) *,
.mainBody a:not([href]):hover,
.mainBody a:not([href]):hover * {
  text-decoration: none;
  font-weight: inherit;
  color: inherit;
}

.mainBody a:hover {
  color:var(--cutler);
}

.mainBody a *{
  color: var(--cutler);
}

#ouws_content #middle p a:focus:after,
#middle a:focus:only-child:after,
#ouws_content #middle p a:focus:before,
#middle a:focus:only-child:before {
    color: var(--white);
}

#ouws_content a:focus,
a:focus img {
    outline: 2px solid #85b7d1;
}

.middle table caption {
  padding:5px 0px;
  font-weight:bold;
}

.middle table {
  border-collapse:collapse;
  border:0;
  width: 100%;
  margin: 15px 0px;
}

.middle table td {
  text-align:left;
  border:0;
  border-bottom:1px solid #ddd;
  padding: 10px;
}

.middle table th {
  text-align:left;
  border:0;
  border-bottom:1px solid #ddd;
  padding: 10px;
  background:var(--cutler);
  color:var(--white);
}

.middle thead th {
  background:var(--cutler);
  color:var(--white);
}

.middle tr:nth-child(even) {
  background: var(--white);
}

.middle table th p, .middle table th article, .middle table th aside, .middle table th caption, .middle table th div, .middle table th figcaption, .middle table th footer, .middle table th header, .middle table th li, .middle table th main, .middle table th nav, .middle table th ol, .middle table th p, .middle table th section, .middle table th span, .middle table th ul {
  color: var(--white);
}

th h1,
th h2,
th h3,
th h4,
th h5,
th h6{
  color:var(--white) !important;
}

.center-items {
  -webkit-box-align: center;
     -ms-flex-align: center;
  align-items: center;
}

a.action, a.active-link {
  font-weight: bold;
}

a.action:after, a.active-link:after {
  content: "\00a0\f105 ";
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
  position: relative;
  font-size: 14px;
}

a.action:focus, a.active-link:focus, #ouws_content #middle p a.action:focus:only-child:after, #middle a.button:focus:only-child:after, #middle a.action:focus:only-child:after, #middle a.active-link:focus:only-child:after {
  color: var(--white);
}

a.action--grey {
  font-weight: bold;
  color: var(--middle-gray);
}

a.action--grey:after {
  content: "\f105 ";
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
  font-size: 20px;
  padding-left: 6px;
  display: inline-block;
  position: relative;
}

a.action--grey:focus {
  color: var(--white);
}

a[target="_blank"]:after {
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
  content: " \f08e";
}

.views-field-view-node a:after, a.button:after {
  content: "\00a0\f105";
  font-family: "Font Awesome 6 Sharp", "Font Awesome 6 Brands";
  font-size: 14px;
}

a.button[target="_blank"]:after {
  content: "\00a0\00a0\f08e";
  font-size: 12px;
}

.slide__caption a.button:only-child {
  border-color: var(--white);
  height: 65px;
  font-size: 20px;
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  padding: 0 10px;
  -webkit-box-align: center;
     -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
    -ms-flex-pack: center;
  justify-content: center;
  color: var(--white);
  background: transparent;
}

a.button.white,
a.button.white * {
  color:var(--white);
}

a.button.white {
  border: 2px solid var(--white);
  background: transparent;
}

.slide__caption a.button:only-child:hover,
#ouws_content .mainBody #middle a.button.white:hover,
#ouws_content .mainBody #middle a.button.white:hover *,
#ouws_content .mainBody #middle a.button.white:focus,
#ouws_content .mainBody #middle a.button.white:focus * {
  background: var(--white);
  color: var(--cutler) !important;
  text-decoration: underline;
}

#ouws_content .mainBody #middle a.button.white:hover,
#ouws_content .mainBody #middle a.button.white:focus {
  border: 2px solid;
}

#ouws_content .mainBody #middle a.button.white:hover *,
#ouws_content .mainBody #middle a.button.white:focus * {
  background:transparent;
}

#ouws_content .mainBody #middle a.button.white:focus:after {
  color: var(--cutler) !important;
}

.slide__caption a.button:only-child:active, a.button.white:active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.views-field-view-node a, a.button.green, a.button {
  font-weight: 700;
  text-decoration: none;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  background: var(--cutler);
  border: 2px solid var(--cutler);
  padding: .3em 10px;
  position: relative;
  color: var(--white);
  font-size: 18px;
  height: 3.3em;
  width: 255px;
  max-width: 100%;
  display: -ms-inline-flexbox;
  justify-content: center;
  align-items: center;
  display: -webkit-inline-box;
  -webkit-box-align: center;
  -webkit-box-pack: center;
  overflow: hidden;
  line-height: 1.3;
  text-align: center;
}

/* Mobile display styles  */
@media only screen and (max-width: 767px){
  a.button {
    margin-left: 0;
  }

  a.button:first-child {
    margin-right: 1em;
  }

  a.button:not(:last-of-type) {
    margin-bottom: 1em;
  }
}

.views-field-view-node a:hover, .views-field-view-node a:focus, a.button.green:hover, a.button.green:focus, a.button:hover, a.button:focus {
  background: var(--white);
  color: var(--cutler);
  border: 2px solid;
  text-decoration: underline;
}

.views-field-view-node a:active, a.button.green:active, a.button:active {
  -webkit-box-shadow: none;
  box-shadow: none;
}

blockquote {
  margin: 45px auto;
  text-wrap: balance;
  width: 100%;
  padding: 0 45px;
}

blockquote.block-quote.expanded-quote {
  width: 100%;
  padding: 0 15px 0 34px;
}

@media only screen and (min-width: 840px) {
  blockquote {
    width: calc(100% - 60px);
    padding: 0;
    max-width: 780px;
  }
}

@media only screen and (min-width: 970px) {
  blockquote.block-quote.expanded-quote {
    width: calc(100% - 60px);
    padding: 0;
    max-width: 880px;
  }
}

blockquote p {
  font-family: var(--text-serif);
  font-size: 24px; 
  line-height: 34px; 
  font-weight: 500;
  color: var(--black);
}

blockquote:not(.block-quote) {
  border-left: 10px solid var(--cutler);
  padding-left: 30px;
}

.mod-page-container.mod-page-solid-background-color[style="background: #00694E; "] blockquote p,
.mod-page-container.mod-page-solid-background-color[style="background: #00694E; "] blockquote.block-quote.expanded-quote p,
.mod-page-container.mod-page-solid-background-color[style="background: #024230; "] blockquote p,
.mod-page-container.mod-page-solid-background-color[style="background: #024230; "] blockquote.block-quote.expanded-quote p,
.mod-page-container.mod-page-solid-background-color[style="background: #524D47; "] blockquote p,
.mod-page-container.mod-page-solid-background-color[style="background: #524D47; "] blockquote.block-quote.expanded-quote p {
  color: var(--white);
}

.mod-page-container.mod-page-solid-background-color[style="background: #00694E; "] blockquote:not(.block-quote),
.mod-page-container.mod-page-solid-background-color[style="background: #024230; "] blockquote:not(.block-quote) {
  border-color: var(--moss);
}

.mod-page-container.mod-page-solid-background-color[style="background: #B5E3D8; "] blockquote:not(.block-quote) {
  border-color: var(--under-the-elms);
}

.mod-page-container.mod-page-solid-background-color[style="background: #524D47; "] blockquote:not(.block-quote) {
  border-color: var(--trillium);
}

.mod-page-container.mod-page-solid-background-color[style="background: #00694E; "] blockquote:not(.block-quote) p:nth-child(2), 
.mod-page-container.mod-page-solid-background-color[style="background: #00694E; "] blockquote.block-quote.expanded-quote p:nth-child(2) {
  color: var(--white);
}

.mod-page-container.mod-page-solid-background-color[style="background: #B5E3D8; "] blockquote:not(.block-quote) p:nth-child(2), 
.mod-page-container.mod-page-solid-background-color[style="background: #B5E3D8; "] blockquote.block-quote.expanded-quote p:nth-child(2) {
  color: var(--under-the-elms);
}

blockquote p:first-child {
  padding-top: 15px;
  padding-bottom: 15px;
}

blockquote.block-quote.expanded-quote p:first-child {
  font-family: var(--text-display);
  font-size: 24px; 
  line-height: 36px;
  font-weight: 700;
  color: var(--cutler);
}

@media only screen and (min-width: 840px) {
  blockquote p:first-child {
    font-size :30px; 
    line-height: 42px; 
  }

  blockquote.block-quote.expanded-quote p:first-child {
    font-size: 32px; 
    line-height: 42px;
  }
}

blockquote:not(.block-quote) p:first-child:before,
blockquote.block-quote p:first-child:before {
  content: '“';
  position: absolute;
}

blockquote:not(.block-quote) p:before {
  margin-left: -.5em;
}

blockquote.block-quote.expanded-quote p:before {
  margin-left: -.7em;
}

blockquote:not(.block-quote) p:nth-child(2):before,
blockquote.block-quote.expanded-quote p:nth-child(2):before {
  content: '—';
  margin-right: 5px;
}

blockquote.block-quote.expanded-quote p:nth-child(2)::before {
  margin-left: 0;
}

blockquote:not(.block-quote) p:first-child:after,
blockquote.block-quote p:first-child:after {
  content: '”';
}

blockquote:not(.block-quote) p:nth-child(2) {
  color: var(--cutler);
  font-family: var(--text-sans);
  font-size: 20px;
  line-height: 42px;
  font-weight: 600;
  text-align: right;
  margin-top: 0;
}

blockquote.block-quote.expanded-quote p:nth-child(2) {
  font-family: var(--text-display);
  font-size: 18px;
  color: var(--under-the-elms);
  text-align: left;
  margin-top: 0;
  font-style: normal;
}

p.ohio-red, div.ohio-red {
  color: #911003;
}

/* These are a placeholder fix until this issue is resolved: https://www.drupal.org/project/drupal/issues/2785483 */
body .middle table td.cell-text-align-left{
  text-align:left;
}

body .middle table td.cell-text-align-right{
  text-align:right;
}

body .middle table td.cell-text-align-center{
  text-align:center;
}

body .middle table td.cell-text-align-justify{
  text-align:justify;
}

body .middle table td.cell-vertical-align-top{
  vertical-align:top;
}
body .middle table td.cell-vertical-align-middle{
  vertical-align:middle;
}
body .middle table td.cell-vertical-align-bottom{
  vertical-align:bottom;
}

body .middle table td.cell-vertical-align-baseline{
  vertical-align:baseline;
}

summary {
  display: list-item;
}

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

b, strong {
  font-weight: bold;
}

/* left, right, and center wysiwyg embedded images */
.field--type-text-with-summary figure,
.field--type-text-long figure {
  margin: 15px 0px;
  display:table;
}

.field--type-text-with-summary figure.align-left,
.field--type-text-long figure.align-left,
.embedded-entity.align-left {
  margin: 15px 30px 10px 0px;
}

.field--type-text-with-summary figure.align-center,
.field--type-text-long figure.align-center,
article.align-center.media--type-image,
.embedded-entity.align-center {
  text-align:center;
  margin:30px auto;
}

.field--type-text-with-summary figure.align-right,
.field--type-text-long figure.align-right,
.embedded-entity.align-right {
  margin: 15px 0px 10px 30px;
}

article.media,
article.align-center.media,
article.align-left.media,
article.align-right.media {
  margin: 0 auto;
  display: block;
  float: none;
}

@media (min-width: 768px){
  article.media {
    display: block;
  }

  article.align-center.media {
    text-align: center;
  }

  article.align-left.media {
    float: left;
    margin: 0px 30px 10px 0px;
  }

  article.align-right.media {
    float: right;
    margin: 0px 0px 10px 30px;
  }
}

figure[role="group"].align-left,
figure[role="group"].align-center,
figure[role="group"].align-right,
figure[role="group"]:not(:is(.align-center, .align-left, .align-right)),
article.align-left.media--type-image,
article.align-center.media--type-image,
article.align-right.media--type-image,
article.media--type-image:not(:is(.align-center, .align-left, .align-right)) {
  margin: 30px auto;
  display: block;
  float: none;
  text-align: left;
}

figure[role="group"].align-center article.media--type-image + figcaption {
  margin: 10px auto 0px;
}

@media (min-width: 768px) {  
  figure[role="group"]:not(:is(.align-center, .align-left, .align-right)),
  article.media--type-image:not(:is(.align-center, .align-left, .align-right)) {
    margin: 30px 0px;
    text-align: left;
  }
  
  figure[role="group"].align-left,
  article.align-left.media--type-image {
    float: left;
    margin: 15px 30px 15px 0px;
  }
  
  figure[role="group"].align-center {
    text-align: center;
  }

  article.align-center.media--type-image {
    text-align: center;
  }

  figure[role="group"].align-right,
  article.align-right.media--type-image {
    float: right;
    margin: 15px 0px 15px 30px;
  }
}

figure[role="group"] article.media--type-image {
  margin: 0;
}

figure[role="group"] article.media--type-image div img {
  width: auto;
}

@media (min-width: 768px) { 
  figure[role="group"].align-center article.media--type-image div img {
    margin: 0 auto;
  }
}

.field--type-text-with-summary figure img,
.field--type-text-long figure img {
  width:100%;
  height:auto;
  display:block;
}

.field--type-text-with-summary figure figcaption,
.field--type-text-long figure figcaption {
  display:table-caption;
  caption-side:bottom;
  font-size:16px;
  font-style:italic;
  margin-top:10px;
}

figure[role="group"] figcaption {
  display: block;
  width: 100%;
}

.media--type-remote-video iframe {
  aspect-ratio:16 / 9;
  width:100%;
  height:auto;
}