.overlay-image-container {
  width: calc(100vw - 20px);
  margin-left: calc(-50vw + 50% + 10px);
  background-size: cover;
  /*background-position: center;*/
  position: relative;
}

/* background alignments */
.bptl {background-position: top left}
.bptc {background-position: top center}
.bptr {background-position: top right}
.bpcl {background-position: center left}
.bpcc {background-position: center center}
.bpcr {background-position: center right}
.bpbl {background-position: bottom left}
.bpbc {background-position: bottom center}
.bpbr {background-position: bottom right}

.overlay-contentwidth {
  width: 100%;/* this needs to change with the breakpoints */
  margin: auto;
  position: relative;
}
.overlay-text-container {
    padding: 20px;
    display: inline-block;
}

/* overlay position */
/*.overlay-pos-ll {bottom: 0px;left: 0px;}*/
.overlay-pos-ll {bottom: 0px;left: 0px;}
.overlay-pos-lr {bottom: 0px;right: 0px;}
.overlay-pos-ul {top: 0px;left: 0px;}
.overlay-pos-ur {top: 0px;right: 0px;}
.overlay-pos-vbr {top: 0px;bottom: 0px; right: 0px;}
.overlay-pos-vbl {top: 0px;bottom: 0px; left: 0px;}

/* text in the box */
.overlay-text {
  width: 100%;
  font-size: 1.1em;
  margin: 0px;
}

/* headlines */
.overlay-headlineone {
  text-transform: uppercase;
  margin: 0px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: 48px;
}
.overlay-headlinetwo {
  text-transform: uppercase;
  margin-top: 0px;
  margin: 0px;
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  font-size: 48px;
}

/* buttons/links */
.overlay-linkbuttons {
  margin-top: 0px;
}
.overlay-linkbuttons .ub-link {
  margin-right: 10px;
}
.overlay-linkbuttons .ub-button {
  margin-right: 10px;
}
.overlay-button .fa-circle-chevron-right {display: none;}
.overlay-linkbuttons a.uwsp-btn-link-purple, .overlay-linkbuttons a.uwsp-btn-link-gold, .overlay-linkbuttons a.uwsp-btn-link-white {text-decoration: none;}

.heroNavBar {
  border-radius: 0px;
  position: relative;
  background-color: rgb(var(--purple));
  color: rgb(var(--white));
  box-shadow: 1px 1px 5px rgba(var(--black),0.5);
  text-shadow: 1px 1px 1px rgba(var(--purple),1);
}
a.heroNavBarButton:link,a.heroNavBarButton:active,a.heroNavBarButton:visited {display: block;flex-grow: 1;color: rgb(var(--white));font-size: 20px; text-transform: uppercase;  padding: 12px 8px 12px 20px;text-decoration: none;}
a.heroNavBarButton:hover {text-decoration: none;background-color: rgb(var(--purple)) !important;}
a.heroNavBarButton .sublabel {font-size: 20px;display: inline-block;}
a.heroNavBarButton:nth-child(1) {background-color: rgba(var(--white), .4)}
a.heroNavBarButton:nth-child(2) {background-color: rgba(var(--white), .3)}
a.heroNavBarButton:nth-child(3) {background-color: rgba(var(--white), .2)}
a.heroNavBarButton:nth-child(4) {background-color: rgba(var(--white), .1)}

/* color themes */
.hero-white-bg {
  background: rgba(var(--white), 0.85);
}
.hero-white-bg .overlay-headlineone {color: rgb(var(--purple));}
.hero-white-bg .overlay-headlinetwo {color: rgb(var(--purple));}
.hero-white-bg .overlay-text {color: rgb(var(--black));}
.hero-white-bg .overlay-button {background-color: rgb(var(--gold)); color: rgb(var(--purple));}
.hero-white-bg .overlay-link {color: rgb(var(--purple));}

.hero-purple-bg {
  background: rgba(var(--purple), 0.75);
}
.hero-purple-bg .overlay-headlineone {color: rgb(var(--white));}
.hero-purple-bg .overlay-headlinetwo {color: rgb(var(--white));}
.hero-purple-bg .overlay-text {color: rgb(var(--white));}
.hero-purple-bg .overlay-button {background-color: rgb(var(--gold)); color: rgb(var(--purple));}
.hero-purple-bg .overlay-link {color: rgb(var(--gold));}

.hero-gold-bg {
  background: rgba(var(--gold), 0.75);
}
.hero-gold-bg .overlay-headlineone {color: rgb(var(--purple));}
.hero-gold-bg .overlay-headlinetwo {color: rgb(var(--purple));}
.hero-gold-bg .overlay-text {color: rgb(var(--black));}
.hero-gold-bg .overlay-button {background-color: rgb(var(--purple)); color: rgb(var(--white));}
.hero-gold-bg .overlay-link {color: rgb(var(--purple));}

.hh-mobile-textwidth {width: auto;}

.overlay-linkbuttons .uwsp-btn-solid-purple, .overlay-linkbuttons .uwsp-btn-solid-gold, .overlay-linkbuttons .uwsp-btn-outline-purple, .overlay-linkbuttons .uwsp-btn-outline-gold, .overlay-linkbuttons .uwsp-btn-link-purple, .overlay-linkbuttons .uwsp-btn-link-gold, .overlay-linkbuttons .uwsp-btn-link-white {margin-top: 10px;}

/* edit mode */
.overlay-image-container-editmode {
  width: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
}



@media only screen and (max-width: 600px) {
 .heroNavBar {display: block; margin-top: 0px;width: calc(100vw - 20px);margin-left: calc(-50vw + 50% + 10px);}
 .overlay-auto, .overlay-w-full, .overlay-w-twothirds, .overlay-w-half, .overlay-w-onethird, .overlay-w-f900, .overlay-w-f800, .overlay-w-f700, .overlay-w-f600, .overlay-w-f500, .overlay-w-f400 {width: 100%;}
 /* add a space if navbar exists and the text box is aligned at the bottom */
.hero-navbar-space.overlay-pos-ll, .hero-navbar-space.overlay-pos-lr, .hero-navbar-space.overlay-pos-vbr, .hero-navbar-space.overlay-pos-vbl {padding-bottom: 20px;}
.imgforsmallscrn {width: 100%; height: auto;padding: 0;margin: 0;display: block;}
.overlay-text-container{position: relative;display: block}
.bannerheight650, .bannerheight400, .bannerheight300 {height: auto;}
.hero-fww .smaller-banner, .hero-bwbb .smaller-banner, .hero-bwnb .smaller-banner {display: none;}
.overlay-text-backdrop {position: relative;top: initial;right: initial;bottom: initial;left: initial;}
.overlay-linkbuttons {display: block;}
.overlay-linkbuttons a {margin: 6px 0;display: block}
/* headlines */
.overlay-headlineone {

  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  line-height: 1.2em;
  font-size: 26px;
}
.overlay-headlinetwo {
  font-family: "Roboto Condensed", sans-serif;
  font-weight: 700;
  line-height: 1.2em;
  font-size: 26px;
}
.overlay-text {font-size: .9em;}
.overlay-w-onethird .overlay-linkbuttons, .overlay-w-onethird .overlay-linkbuttons a, .overlay-w-f400 .overlay-linkbuttons, .overlay-w-f400 .overlay-linkbuttons a {display: block;}
}

@media only screen and (min-width: 601px) {
 .heroNavBar {display: block; margin-top: 0px;width: calc(100vw - 20px);  margin-left: calc(-50vw + 50% + 10px);}
 .overlay-auto, .overlay-w-full, .overlay-w-twothirds, .overlay-w-half, .overlay-w-onethird, .overlay-w-f900, .overlay-w-f800, .overlay-w-f700, .overlay-w-f600, .overlay-w-f500, .overlay-w-f400 {width: 100%;}
 /* add a space if navbar exists and the text box is aligned at the bottom */
.hero-navbar-space.overlay-pos-ll, .hero-navbar-space.overlay-pos-lr, .hero-navbar-space.overlay-pos-vbr, .hero-navbar-space.overlay-pos-vbl {padding-bottom: 20px;}
.imgforsmallscrn {width: 100%; height: auto;margin: 0;display: block;}
.overlay-text-container{position: relative;display: block;}
.bannerheight650, .bannerheight400, .bannerheight300 {height: auto;}
.hero-fww .smaller-banner, .hero-bwbb .smaller-banner, .hero-bwnb .smaller-banner {display: none;}
.overlay-text-backdrop {position: relative;top: initial;right: initial;bottom: initial;left: initial;}
.overlay-linkbuttons {display: flex;align-items: baseline;}
.overlay-linkbuttons a {margin: 2px 4px 2px 0;display: block}
.overlay-w-onethird .overlay-linkbuttons, .overlay-w-onethird .overlay-linkbuttons a, .overlay-w-f400 .overlay-linkbuttons, .overlay-w-f400 .overlay-linkbuttons a {display: block;}
.hh-mobile-textwidth {width: 560px;margin: 0 auto;}
}

@media only screen and (min-width: 768px) {
.hh-mobile-textwidth {width: 727px;margin: 0 auto;}
}

@media only screen and (min-width: 992px) {
.heroNavBar {display: flex; width: auto;  margin-left: auto;margin-bottom: 40px;}
.heroNavBar.blockspacebottom {margin-top: -84px;margin-bottom: 42px;}
.heroNavBar.noblockspacebottom {margin-top: -42px;margin-bottom: 0px;}
.hh-mobile-textwidth {width: auto;}
a.heroNavBarButton .sublabel {font-size: 14px;display: block;}
.imgforsmallscrn {display: none;}
.hero-fww .smaller-banner {display: none;}
.hero-bwbb .smaller-banner {display: block;backdrop-filter: blur(6px);background-color: rgba(var(--white),0.45);position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.hero-bwnb {background-image: none !important;}
.hero-bwnb .smaller-banner {display: block;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
.smaller-banner-image-container {width: 100%;background-size: cover; /*background-position: center center;*/}
/* banner height */
.bannerheight650 {height: 650px}
.bannerheight400 {height: 400px}
.bannerheight300 {height: 300px}
/* overlay width */
.overlay-auto {width: auto;}
.overlay-w-full {width: 100%;}
.overlay-w-twothirds {width: 66%}
.overlay-w-half {width: 50%}
.overlay-w-onethird {width: 33%}
.overlay-w-f900 {width: 900px}
.overlay-w-f800 {width: 800px}
.overlay-w-f700 {width: 700px}
.overlay-w-f600 {width: 600px}
.overlay-w-f500 {width: 500px}
.overlay-w-f400 {width: 400px}
.overlay-text-backdrop {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}
/* add a space if navbar exists and the text box is aligned at the bottom */
.hero-navbar-space.overlay-pos-ll, .hero-navbar-space.overlay-pos-lr, .hero-navbar-space.overlay-pos-vbr, .hero-navbar-space.overlay-pos-vbl {padding-bottom: 60px;}
.overlay-text-container {position: absolute;margin: 0px;}
.overlay-linkbuttons {display: flex;  align-items: baseline;}
.overlay-linkbuttons a {display: inline-block; margin: 2px 4px 2px 0;}
.overlay-w-onethird .overlay-linkbuttons, .overlay-w-onethird .overlay-linkbuttons a, .overlay-w-f400 .overlay-linkbuttons, .overlay-w-f400 .overlay-linkbuttons a {display: inline-block;}
.overlay-text-backdrop {width: 951px;margin: 0 auto;padding: 0 20px;}
}

@media only screen and (min-width: 1200px) {
  .overlay-text-backdrop {width: 1159px;margin: 0 auto;padding: 0 20px;}
}

@media only screen and (min-width: 1400px) {
  .overlay-text-backdrop {width: 1350px;margin: 0 auto;padding: 0 20px;}
}