/*********************/
/**   Color    **/
/*********************/

:root {
  --ebonyclay:        hsla(233, 41%, 20%, 1);
  --ebonyclay-5:     hsla(233, 41%, 20%, .05);
  --ebonyclay-10:     hsla(233, 41%, 20%, .1);
  --ebonyclay-20:     hsla(233, 41%, 20%, .2);
  --ebonyclay-30:     hsla(233, 41%, 20%, .3);
  --ebonyclay-40:     hsla(233, 41%, 20%, .4);
  --ebonyclay-50:     hsla(233, 41%, 20%, .5);
  --ebonyclay-60:     hsla(233, 41%, 20%, .6);
  --ebonyclay-70:     hsla(233, 41%, 20%, .7);
  --ebonyclay-80:     hsla(233, 41%, 20%, .8);
  --ebonyclay-90:     hsla(233, 41%, 20%, .9);
  --ebonyclayLight:   hsla(233, 41%, 40%, 1);
  --ebonyclayLighter: hsla(233, 41%, 60%, 1);
  --ebonyclayDark:    hsla(233, 41%, 15%, 1);
  --ebonyclayDarker:  hsla(233, 41%, 10%, 1);

  --java:        hsla(179, 88%, 45%, 1);
  --java-5:     hsla(179, 88%, 45%, .05);
  --java-10:     hsla(179, 88%, 45%, .1);
  --java-20:     hsla(179, 88%, 45%, .2);
  --java-30:     hsla(179, 88%, 45%, .3);
  --java-40:     hsla(179, 88%, 45%, .4);
  --java-50:     hsla(179, 88%, 45%, .5);
  --java-60:     hsla(179, 88%, 45%, .6);
  --java-70:     hsla(179, 88%, 45%, .7);
  --java-80:     hsla(179, 88%, 45%, .8);
  --java-90:     hsla(179, 88%, 45%, .9);
  --javaLight:   hsla(179, 88%, 65%, 1);
  --javaLighter: hsla(179, 88%, 60%, 1);
  --javaDark:    hsla(179, 88%, 30%, 1);
  --javaDarker:  hsla(179, 88%, 20%, 1);

  --athensgray:        hsla(240, 0%, 94%, 1);
  --athensgray-5:        hsla(240, 0%, 94%, .05);
  --athensgray-10:        hsla(240, 0%, 94%, .1);
  --athensgray-20:        hsla(240, 0%, 94%, .2);
  --athensgray-30:        hsla(240, 0%, 94%, .3);
  --athensgray-40:        hsla(240, 0%, 94%, .4);
  --athensgray-50:        hsla(240, 0%, 94%, .5);
  --athensgray-60:        hsla(240, 0%, 94%, .6);
  --athensgray-70:        hsla(240, 0%, 94%, .7);
  --athensgray-80:        hsla(240, 0%, 94%, .8);
  --athensgray-90:        hsla(240, 0%, 94%, .9);
  --athensgrayLight:   hsla(240, 0%, 95%, 1);
  --athensgrayLighter: hsla(240, 0%, 97%, 1);
  --athensgrayLighter-80: hsla(240, 0%, 97%, .8);
  --athensgrayDark:    hsla(240, 0%, 85%, 1);
  --athensgrayDarker:  hsla(240, 0%, 65%, 1);

  --royalblue:        hsla(220, 65%, 60%, 1);
  --royalblue-5:     hsla(220, 65%, 60%, .05);
  --royalblue-10:     hsla(220, 65%, 60%, .1);
  --royalblue-20:     hsla(220, 65%, 60%, .2);
  --royalblue-30:     hsla(220, 65%, 60%, .3);
  --royalblue-40:     hsla(220, 65%, 60%, .4);
  --royalblue-50:     hsla(220, 65%, 60%, .5);
  --royalblue-60:     hsla(220, 65%, 60%, .6);
  --royalblue-70:     hsla(220, 65%, 60%, .7);
  --royalblue-80:     hsla(220, 65%, 60%, .8);
  --royalblue-90:     hsla(220, 65%, 60%, .9);
  --royalblueLight:   hsla(220, 65%, 70%, 1);
  --royalblueLighter: hsla(220, 65%, 80%, 1);
  --royalblueDark:    hsla(220, 65%, 40%, 1);
  --royalblueDarker:  hsla(220, 65%, 20%, 1);

  --brightsun:        hsla(45, 71%, 63%, 1);
  --brightsun-5:     hsla(45, 71%, 63%, .05);
  --brightsun-10:     hsla(45, 71%, 63%, .1);
  --brightsun-20:     hsla(45, 71%, 63%, .2);
  --brightsun-30:     hsla(45, 71%, 63%, .3);
  --brightsun-40:     hsla(45, 71%, 63%, .4);
  --brightsun-50:     hsla(45, 71%, 63%, .5);
  --brightsun-60:     hsla(45, 71%, 63%, .6);
  --brightsun-70:     hsla(45, 71%, 63%, .7);
  --brightsun-80:     hsla(45, 71%, 63%, .8);
  --brightsun-90:     hsla(45, 71%, 63%, .9);
  --brightsunLight:   hsla(45, 71%, 70%, 1);
  --brightsunLighter: hsla(45, 71%, 80%, 1);
  --brightsunDark:    hsla(45, 71%, 47%, 1);
  --brightsunDarker:  hsla(45, 71%, 40%, 1);

  --starship:        hsla(56, 87%, 60%, 1);
  --starship-5:     hsla(56, 87%, 60%, .05);
  --starship-10:     hsla(56, 87%, 60%, .1);
  --starship-20:     hsla(56, 87%, 60%, .2);
  --starship-30:     hsla(56, 87%, 60%, .3);
  --starship-40:     hsla(56, 87%, 60%, .4);
  --starship-50:     hsla(56, 87%, 60%, .5);
  --starship-60:     hsla(56, 87%, 60%, .6);
  --starship-70:     hsla(56, 87%, 60%, .7);
  --starship-80:     hsla(56, 87%, 60%, .8);
  --starship-90:     hsla(56, 87%, 60%, .9);
  --starshipLight:   hsla(56, 87%, 70%, 1);
  --starshipLighter: hsla(56, 87%, 80%, 1);
  --starshipDark:    hsla(56, 87%, 40%, 1);
  --starshipDarker:  hsla(56, 87%, 40%, 1);

  --wildstrawberry:        hsla(330, 100%, 65%, 1);
  --wildstrawberry-5:     hsla(330, 100%, 65%, .05);
  --wildstrawberry-10:     hsla(330, 100%, 65%, .1);
  --wildstrawberry-20:     hsla(330, 100%, 65%, .2);
  --wildstrawberry-30:     hsla(330, 100%, 65%, .3);
  --wildstrawberry-40:     hsla(330, 100%, 65%, .4);
  --wildstrawberry-50:     hsla(330, 100%, 65%, .5);
  --wildstrawberry-60:     hsla(330, 100%, 65%, .6);
  --wildstrawberry-70:     hsla(330, 100%, 65%, .7);
  --wildstrawberry-80:     hsla(330, 100%, 65%, .8);
  --wildstrawberry-90:     hsla(330, 100%, 65%, .9);
  --wildstrawberryLight:   hsla(330, 100%, 75%, 1);
  --wildstrawberryLighter: hsla(330, 100%, 85%, 1);
  --wildstrawberryDark:    hsla(330, 100%, 45%, 1);
  --wildstrawberryDarker:  hsla(330, 100%, 25%, 1);

  --white: hsla(330, 0%, 100%, 1);
  --white-5: hsla(330, 0%, 100%, .05);
  --white-10: hsla(330, 0%, 100%, .1);
  --white-20: hsla(330, 0%, 100%, .2);
  --white-30: hsla(330, 0%, 100%, .3);
  --white-40: hsla(330, 0%, 100%, .4);
  --white-50: hsla(330, 0%, 100%, .5);
  --white-60: hsla(330, 0%, 100%, .6);
  --white-70: hsla(330, 0%, 100%, .7);
  --white-80: hsla(330, 0%, 100%, .8);
  --white-90: hsla(330, 0%, 100%, .9);

  --alertError:          hsla(359, 51%, 47%, 1);
  --alertErrorLight:     hsla(359, 51%, 67%, 1);

  --alertWarning:        hsla(38, 49%, 38%, 1);
  --alertWarningLight:   hsla(38, 49%, 58%, 1);

  --alertSuccess:        hsla(134, 58%, 30%, 1);
  --alertSuccessLight:   hsla(134, 58%, 50%, 1);

  --alertInfo:          hsla(194, 91%, 30%, 1);
  --alertInfoLight:     hsla(194, 91%, 50%, 1);
}

.bg-color-ebonyclay {
background-color: var(--ebonyclay) !important;
}

.bg-color-ebonyclay-30 {
background-color: var(--ebonyclay-30) !important;
}

.bg-color-java {
background-color: var(--java) !important;
}

.bg-color-java-5 {
background-color: var(--java-5) !important;
}

.bg-color-java-10 {
background-color: var(--java-10) !important;
}

.bg-color-java-20 {
background-color: var(--java-20) !important;
}

.bg-color-java-30 {
background-color: var(--java-30) !important;
}

.bg-color-athensgray {
background-color: var(--athensgray) !important;
}

.bg-color-athensgray-10 {
background-color: var(--athensgray-10) !important;
}

.bg-color-athensgray-20 {
background-color: var(--athensgray-20) !important;
}

.bg-color-athensgray-30 {
background-color: var(--athensgray-30) !important;
}

.bg-color-athensgray-40 {
background-color: var(--athensgray-40) !important;
}

.bg-color-athensgray-50 {
background-color: var(--athensgray-50) !important;
}

.bg-color-brightsun {
background-color: var(--brightsun) !important;
}

.bg-color-brightsun-5 {
background-color: var(--brightsun-5) !important;
}

.bg-color-brightsun-10 {
background-color: var(--brightsun-10) !important;
}

.bg-color-brightsun-20 {
background-color: var(--brightsun-20) !important;
}

.bg-color-brightsun-30 {
background-color: var(--brightsun-30) !important;
}

.bg-color-starship {
background-color: var(--starship) !important;
}

.bg-color-starship-5 {
background-color: var(--starship-5) !important;
}

.bg-color-starship-10 {
background-color: var(--starship-10) !important;
}

.bg-color-starship-20 {
background-color: var(--starship-20) !important;
}

.bg-color-starship-30 {
background-color: var(--starship-30) !important;
}

.bg-color-starship-40 {
background-color: var(--starship-40) !important;
}

.bg-color-starship-50 {
background-color: var(--starship-50) !important;
}

.bg-color-wildstrawberry {
background-color: var(--wildstrawberry) !important;
}

.bg-color-wildstrawberry-30 {
background-color: var(--wildstrawberry-30) !important;
}

.text-color-ebonyclay {
color: var(--ebonyclay) !important;
}

.text-color-ebonyclay-30 {
color: var(--ebonyclay-30) !important;
}

.text-color-java {
color: var(--java) !important;
}

.text-color-javaDark {
color: var(--javaDark) !important;
}

.text-color-javaDarker {
color: var(--javaDarker) !important;
}

.text-color-java-30 {
color: var(--java-30) !important;
}

.text-color-athensgray {
color: var(--athensgray) !important;
}

.text-color-athensgrayDark {
color: var(--athensgrayDark) !important;
}

.text-color-athensgrayDarker {
color: var(--athensgrayDarker) !important;
}

.text-color-brightsun {
color: var(--brightsun) !important;
}

.text-color-brightsun-30 {
color: var(--brightsun-30) !important;
}

.text-color-wildstrawberry {
color: var(--wildstrawberry) !important;
}

.text-color-wildstrawberry-30 {
color: var(--wildstrawberry-30) !important;
}

.text-color-white {
color: var(--white) !important;
}

.bg-dots {
  background-color: var(--athensgrayLighter);
  background-image: radial-gradient(var(--java-80) 0.5px, transparent 0.5px), radial-gradient(var(--ebonyclay-20) 0.5px, var(--white) 0.5px);
  background-image: radial-gradient(var(--java-80) 0.5px, transparent 0.5px), radial-gradient(var(--ebonyclay-30) 0.5px, var(--white) 0.5px);
  background-size: 1.25rem 1.25rem;
  background-position: 0 0, 0.625rem 0.625rem;
  background-attachment: fixed;
}

.bg-img-learnfromus {
  background-image: url(//andtherewas.s3.amazonaws.com/img/learn-from-us.png);
  background-repeat: no-repeat;
  background-size: auto 94%;
  background-position: center;
}

.bg-img-workwithus {
  background-image: url(//andtherewas.s3.amazonaws.com/img/work-with-us.png);
  background-repeat: no-repeat;
  background-size: auto 94%;
  background-position: center;
}

.bg-img-transformationdesigntraining {
  background-image: url(//andtherewas.s3.amazonaws.com/img/transformation-design-training.png);
  background-repeat: no-repeat;
  background-size: auto 94%;
  background-position: center;
}

.bg-img-earsmidset {
  background-image: url(//andtherewas.s3.amazonaws.com/img/ears-mindset.png);
  background-repeat: no-repeat;
  background-size: auto 92%;
  background-position: center;
}

.bg-img-5dsofcreation {
  background-image: url(//andtherewas.s3.amazonaws.com/img/5ds-of-creation.png);
  background-repeat: no-repeat;
  background-size: auto 94%;
  background-position: center;
}


@media (min-width: 1025px) {
  [class*=carousel-control-]:focus:before,
  .btn-solid:not(:active):focus:before,
  .btn-outlined:not(:active):focus:before,
  .title a:not(:active):focus:before,
  .btn-text-link:not(:active):focus:before {
    content: '';
    width: calc(100% + .5rem);
    height: calc(100% + .5rem);
    background: transparent;
    box-shadow: 0 0 0px 3px var(--java-30), 0 0 30px -1px var(--java-50);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
  }

  nav #btn-letstalk:focus:before {
    border-radius: 100%;
  }

  .btn-solid:focus:before,
  .btn-outlined:focus:before,
  .btn-text-link.active:focus:before {
    border-radius: 4rem;
  }
}


/*************************/
/**   Section Titles    **/
/*************************/

.section-title h2,
.section-title h3 {
  font-size: 4vw !important;
}


/**************************/
/**   Disable Buttons    **/
/**************************/

a[class][disabled],
input[type=button][class][disabled],
input[type=submit][class][disabled],
button[class][disabled] {
  opacity: 0.7 !important;
  cursor: not-allowed !important;
  animation: none !important;
  user-select:none;
  -ms-user-select:none;
  -moz-user-select:none;
  -webkit-user-select:none;
}


/*************************/
/**   Text Selection    **/
/*************************/

::-moz-selection { /* Code for Firefox */
  background: var(--starship-50);
}

::selection {
  background: var(--starship-50);
}


/***************/
/**   Base    **/
/***************/

html,
body {
  /* overflow-x:hidden;This makes the position 'sticky' not work */
}

@media (min-width: 320px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  html,
  body {
    font-size: 16px;
    color: var(--ebonyclay);
    background: var(--athensgrayLighter);
    /*height: 100%; This makes the jQuery scroll not fire for some reason */
    width:100% !important;
    /*overflow-x:hidden; This makes the position 'stikcy' not work */
    margin: 0;
    padding: 0;
    /*scroll-behavior: smooth;*/

  }
}

@media (min-device-width: 1680px ){
  html,
  body {
    font-size: 18px !important;
  }
}

@media (min-device-width: 1920px ),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  html,
  body {
    font-size: 20px !important;
  }
}

@media (min-device-width: 2560px ){
  html,
  body {
    font-size: 26px !important;
  }
}

html.modal-is-visible,
html.modal-is-visible > body,
body[data-state="showMobileMenu"] {
  overflow-y: hidden !important;
}

#main-content a:not([class]),
#main-content a:not([class]):visited {
  /*font-family: 'Libre Baskerville', serif;
  color: var(--wildstrawberry) !important;*/
}

h1, h2, h3,
h1 *, h2 *, h3 * {
  font-family: 'Libre Baskerville', serif !important;
}

h4, h5, h6 {
  font-family: 'Libre Franklin', sans-serif !important;
}

.heading-responsive-lg,
.heading-responsive-lg h1,
.heading-responsive-lg h2,
.heading-responsive-lg h3,
.heading-responsive-lg h4,
.heading-responsive-lg h5,
.heading-responsive-lg h6 {
  font-size: clamp(2rem, 3.75vw, 3rem) !important;
}

@media (width < 680px) {
  .heading-responsive-lg,
  .heading-responsive-lg h1,
  .heading-responsive-lg h2,
  .heading-responsive-lg h3,
  .heading-responsive-lg h4,
  .heading-responsive-lg h5,
  .heading-responsive-lg h6 {
    font-size: clamp(2rem, 3.75vw, 5vw) !important;
  }
}

@media (max-width: 475px) {
  .heading-responsive-lg.w-90 {
    width: 100%;
  }
}

.heading-responsive,
.heading-responsive h1,
.heading-responsive h2,
.heading-responsive h3,
.heading-responsive h4,
.heading-responsive h5,
.heading-responsive h6 {
  font-size: clamp(1.5rem, 2.25vw, 1.75rem) !important;
}

p {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  opacity: 1;
}

p:not(.has-background):last-of-type {
    padding-bottom: 0;
    margin-bottom: 0;
}

p a:not([class]){
	color: var(--wildstrawberry) !important;
}


* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 1.25;
  /*transition: all 0.6s ease;*/
  letter-spacing: 0.04rem;
  outline: none;
  color: var(--ebonyclay);
  -webkit-overflow-scrolling: touch;
}

h1:not(.site-title):before,
h2:before {
  display: none;
  visibility: hidden;
}


/* Sticky Header */

body.admin-bar.et_fixed_nav #main-header,
#main-header {
  position: fixed !important;
}

#main-header {
  top: 0 !important;
}

@media only screen and (max-width: 980px){
  body.admin-bar.et_fixed_nav #main-header {
    top: 0 !important;
    position: sticky !important;
    margin-top: -5rem;
  }
}

@media only screen and (min-width: 981px){
  body.admin-bar.et_fixed_nav #main-header {
    top: 1.75rem !important;
  }
}


/* Logo */

.logo_container,
.logo_container a {
  display: flex;
  justify-content: flex-start;
}

.logo_container a:hover {
  opacity: 0.9;
  transform: scale(0.98);
  transform-origin: center center;
}

.et_header_style_left .logo_container {
    position: absolute;
    max-height: 100%;
    max-width: 12rem;
		width: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
}


@media (max-width: 980px){
	.et_header_style_left .logo_container {
    max-width: 21rem;
  }
  .et_header_style_left #logo {
    max-width: 100%;
  }
}

#logo {
  align-self: center;
}


/* Main Navigation */

#top-menu li ul.sub-menu,
#top-menu li ul.sub-menu li {
  padding: 0rem;
}


#top-menu li {
  display: inline-block;
  font-size: 0.875rem;
  padding-right: 1.375rem;
}

#top-menu li > ul.sub-menu > li {
  display: flex;
  width: 100%;
}

#top-menu li > ul.sub-menu > li a {
  padding: 1rem;
  display: flex;
  width: 100%;
}


#top-menu li:hover > a,
#top-menu li.menu-item-has-children:hover > a {
  color: var(--wildstrawberryDark);
}


#top-menu .menu-item-has-children:hover > a:first-child:after,
#et-secondary-nav .menu-item-has-children:hover > a:first-child:after {
  transform: rotate(180deg);
}


#top-menu li > ul > li:not(:last-child) a {
  border-bottom: 1px solid var(--java);
}

#top-menu > li > a {
  font-size: 1rem;
  color: var(--ebonyclay);
  opacity: 1 !important;
}

#top-menu > li > a:hover {
  opacity: .7 !important;
}

#top-menu li a:hover {
  text-decoration: underline;
}

body.not-in-category-51 #top-menu > li#menu-item-5849 > a,
body.in-category-51 #top-menu > li#menu-item-5956 > a {
  color: var(--wildstrawberry) !important;
}

@media only screen and (min-width: 981px) {
  .et_header_style_left #et-top-navigation nav>ul>li>a,
  .et_header_style_split #et-top-navigation nav>ul>li>a {
      padding-bottom: 1.5rem;
  }

  .et_header_style_left .et-fixed-header #et-top-navigation nav>ul>li>a,
  .et_header_style_split .et-fixed-header #et-top-navigation nav>ul>li>a {
    font-size: 0.875rem;
  }
  .et-fixed-header #top-menu li a {
    font-size: 0.875rem;
  }
}

#main-header .nav li ul a[aria-current="page"],
.et_mobile_menu li a[aria-current="page"],
#main-header .nav li ul a[aria-current="page"]:hover,
.et_mobile_menu li a[aria-current="page"]:hover {
  background-color: var(--wildstrawberry);
  color: var(--white) !important;
}

#main-header .nav ul li a:not([aria-current="page"]):hover,
#main-header .nav li ul a:not([aria-current="page"]):hover,
.et_mobile_menu li a:not([aria-current="page"]):hover {
  background-color: var(--starship-40);
  color: var(--ebonyclay) !important;
  opacity: 1 !important;
}


.et-fixed-header #top-menu li.btn-book-a-call a,
.btn-book-a-call a,
.af-submit-button {
  top: -0.75rem;
  padding: 0.75rem 1rem !important;
  color: var(--white) !important;
  border-radius: 4rem;
  font-weight: 500!important;
  background-color: var(--wildstrawberry);
  font-size: 1rem;
  opacity: 1 !important;
  border: 2px solid transparent;
}

.af-submit-button {
  top: 0rem !important;
}


.et_mobile_menu {
  overflow: scroll;
  height: calc(100vh - 5.5rem);
}

.mobile_menu_bar {
  min-height: 4rem;
  min-width: 4rem;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mobile_menu_bar button {
  padding: 0.5rem 1rem;
  border: 1px solid var(--ebonyclay-10);
  border-radius: 4rem;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  font-size: .925rem;
  font-weight: 600;
  background: transparent;
  color: var(--ebonyclay);
}

.mobile_nav.opened .mobile_menu_bar button {
  background: var(--ebonyclay);
  color: var(--white);
}

.menu-toggle-icon {
  width: 1rem;
  height: 1rem;
  margin-left: 0.5rem;
  display: inline-flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 0.125rem;
  position: relative;
  transition-duration: 1s !important;
}



.menu-toggle-icon .menu-toggle-icon-line-01,
.menu-toggle-icon .menu-toggle-icon-line-02,
.menu-toggle-icon .menu-toggle-icon-line-03 {
  height: .125rem;
  width: 100%;
  background: var(--java);
  border-radius: 0.125rem;
  transition-duration: 1s !important;
}


.mobile_nav.opened .menu-toggle-icon .menu-toggle-icon-line-01,
.mobile_nav.opened .menu-toggle-icon .menu-toggle-icon-line-02,
.mobile_nav.opened .menu-toggle-icon .menu-toggle-icon-line-03 {
  position: absolute;
  top: 50% !important;
  transform-origin: center;
  transition-duration: 1s !important;
}


.mobile_nav.opened .menu-toggle-icon .menu-toggle-icon-line-01 {
  transform: translateY(-50%) rotate(319deg);
}

.mobile_nav.opened .menu-toggle-icon .menu-toggle-icon-line-02 {
  opacity: 0;
}

.mobile_nav.opened .menu-toggle-icon .menu-toggle-icon-line-03 {
  transform: translateY(-50%) rotate(45deg);
}

/*
body[data-state="showMobileMenu"] .mobile_menu_bar button {

}

@media (min-width: 1025px ){
    .mobile_menu_bar button {
        display: none !important;
    }
}
*/



/**********************************
   STRUCTURAL
***********************************/
@media (min-width: 981px) {
  .et_fixed_nav.et_show_nav #page-container {
      padding-top: 110px !important;
  }
}


#page-container #et-main-area {
  z-index: 1;
}

#page-container #main-header {
  z-index: 2;
}

#page-container:before,
#page-container:after {
  content:'';
  display: block;
  z-index: 0;
  position: fixed;
  top: 0rem;
  bottom: 0rem;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
}


/** Page Decor **/
#page-container:before {
  background-image: url(https://andtherewas.s3.amazonaws.com/img/bg-fluid-left.svg);
  left: -16vw;
  top: -4rem;
  transform: rotate(0deg) scaleX(0.675) scaleY(-1.5) skewY(-4deg);
  transform-origin: left;
  background-position-x: left;

  animation: leftShapesIn 3s;
  animation-fill-mode: forwards;
}


#page-container:after {
  background-image: url(https://andtherewas.s3.amazonaws.com/img/bg-fluid-right.svg);
  right: -20vw;
  bottom: 0rem;
  top: 8rem;
  transform: rotate(358deg) scaleY(1.375) scaleX(0.675) skewY(32deg) skewX(-2deg);
  transform-origin: right;
  background-position-x: right;

  animation: rightShapesIn 3s;
  animation-fill-mode: forwards;
}

@keyframes leftShapesIn, rightShapesIn {
  from {
    opacity: 0.0;
    visibility: hidden;
  }
  to {
    opacity: .8;
    visibility: visible;
  }
}

@media (min-device-width: 768px) {
  #page-container:before {
    top: 0rem;
    background-position-y: 16vh;
  }

  @keyframes leftShapesIn {
    from {
      left: -8vw;
    }
    to {
      left: -2vw;
    }
  }

  @keyframes rightShapesIn {
    from {
      right: -8vw;
    }
    to {
      right: -2vw;
    }
  }

}

@media (min-device-width: 1400px) {
  #page-container:before {
    background-position-y: 16vh;
  }

  @keyframes leftShapesIn {
    from {
      left: -8vw;
    }
    to {
      left: -2vw;
    }
  }

  @keyframes rightShapesIn {
    from {
      right: -8vw;
    }
    to {
      right: -2vw;
    }
  }

}

@media (min-device-width: 1600px) {
  #page-container:before {
    background-position-y: 16vh;
  }

  @keyframes leftShapesIn {
    from {
      left: -8vw;
    }
    to {
      left: -4vw;
    }
  }

  @keyframes rightShapesIn {
    from {
      right: -8vw;
    }
    to {
      right: -4vw;
    }
  }

}




.et_pb_accordion_item {
  border-radius: 1.75rem;
}

.et_pb_toggle_title:before {
  font-family: ETmodules !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: 0 0;
  direction: ltr;
}

.et_pb_toggle_close .et_pb_toggle_title:before,
.et_pb_toggle_open .et_pb_toggle_title:before {
  content: "\E050";
  position: absolute;
  right: 0;
  font-size: 1.25rem;
  color: var(--javaDark) !important;
  top: 50%;
  margin-top: -.75rem;
  display: block !important;
}

.et_pb_toggle_close {
  border-color: var(--javaDark);
  background-color: var(--java-20);
}

.et_pb_toggle_close:has( .et_pb_toggle_title:hover ) {
  background-color: var(--java-60);
  cursor: pointer;
}

.et_pb_toggle_title {
  position: relative;
}

.et_pb_toggle_close h5.et_pb_toggle_title {
  margin: 0;
}

.et_pb_toggle_open .et_pb_toggle_title:before {
  transform: rotate(-45deg);
}

.et_pb_accordion_item {
  line-height: normal;
}

.et_pb_accordion_item ul,
.et_pb_accordion_item ol,
.et_pb_accordion_item dl {
  margin: 0;
  padding-bottom: 0;
}

.et_pb_accordion_item li {
  margin-bottom: .5rem;
}

.et_pb_accordion_item [data-toggle="tooltip"]{
  margin: 0 !important;
  transform: scale(.75) translateY(-0.125rem);
  transform-origin: left;
}



body[data-state="showMobileMenu"] .header nav {
}

#main-header {
  border-bottom: 0 solid var(--athensgrayLighter-80);
  box-shadow: none;
}

#main-header.et-fixed-header {
  background: var(--athensgrayLighter-80) !important;
  backdrop-filter: blur(0.25rem);
  box-shadow: 0 1rem 1rem 0.5rem var(--athensgrayLighter-80);
}

@media (min-width: 1024px) {
  #main-header.et-fixed-header  {
    box-shadow: 0 1rem 1rem 0.5rem var(--athensgrayLighter-80);
  }
}

.img-border {
  box-shadow: 0rem 0.125rem 0.75rem var(--java-30);
  border: 0.5rem double var(--ebonyclay-80);
  background-color: transparent !important;
}

/** FOCUS STATES **/


.portfolio-item:not(:active):hover,
.portfolio-item:not(:active):focus,
header a:not(:active):focus,
footer a:not(:active):focus,
.et_pb_button:not(:active):hover,
.et_pb_button:not(:active):focus,
button:not(:active):hover,
button:not(:active):focus,
input:not(:active):hover,
input:not(:active):focus,
.et_clickable:not(:active):hover,
.et_clickable:not(:active):focus,
.et_clickable a:not(:active):hover,
.et_clickable a:not(:active):focus,
a.img-square:not(:active):hover,
a.img-square:not(:active):focus,
.tab-content [role="tablist"] a:not(:active):hover:not(.active),
.tab-content [role="tablist"] a:not(:active):focus,
.page-title a:not(:active):focus i,
p a:not([class]):focus {
box-shadow: 0 0 0px 3px var(--java-30), 0 0 30px -1px var(--java-50);
}

.btn-solid:focus,
.btn-outlined:focus {
  animation: scaleIn 0.16s;
  transform-origin: center;
  animation-fill-mode: forwards;
}

a.portfolio-item[aria-label]:after,
a.img-square[aria-label]:after {
    transition-duration: .5s;
    content: attr(aria-label);
    display: flex;
    position: absolute;
    background-color: var(--javaDark);
    top: 50%;
    border-radius: 1rem;
    padding: .5rem 1rem;
    max-width: 70%;
    font-family: "Libre Franklin", sans-serif;
    font-size: 0.875rem;
    color: var(--white);
    text-align: center;
    text-shadow: 1px 1px 4px var(--javaDarker);
    opacity: 0;
    transform: translateY(-10%);
}

a.portfolio-item[aria-label]:hover:after,
a.portfolio-item[aria-label]:focus:after,
a.img-square[aria-label]:not(:active):hover:after,
a.img-square[aria-label]:not(:active):focus:after {
    opacity: 1;
    transform: translateY(-50%);
}

/** DROPDOWN **/

nav .dropdown-menu {
margin-top: 0.25rem;
border-radius: 0.125rem;
position: absolute;
background: var(--white);
padding: 4%;
border: 1px solid var(--athensgrayDark);
box-shadow: .125rem .25rem 1.5rem -.5rem var(--java-50);
opacity: 0;
visibility: hidden;
top: 120%;
left: 0%;
display: block;
overflow: hidden;
width: 0;
height: 0;
line-height: 0;
text-align: center;
}

@media (min-width: 768px) {
    nav .dropdown-menu {
    padding: 2%;
    }
}

@media (min-width: 1025px) {
    nav .dropdown-menu {
    text-align: left;
    padding: 1.25rem;
    }
}

nav li.dropdown {
position: relative;
flex-direction: column;
}


nav li.dropdown.open .dropdown-menu,
nav li.dropdown:hover .dropdown-menu {
    top: 100%;
    left: 0%;
    width: auto;
    height: auto;
    line-height: normal;
    position: relative;
}

@media (max-width: 1024px) {
    nav li.dropdown:not(.open) .dropdown-menu {
        opacity: 0;
        visibility: hidden;
        display: none;
    }

    nav li.dropdown.open .dropdown-menu {
        opacity: 1;
        visibility: visible;
        display: block;
    }
}

@media (min-width: 1025px) {
    nav li.dropdown:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        display: block;
        position: absolute;
    }
}

nav > li > .dropdown-menu {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

nav .dropdown-item {
display: block;
font-weight: normal;
animation: scaleOut 0.16s;
font-size: 6vw;
}

@media (min-width: 768px) {
    nav .dropdown-item {
    font-size: 3vw;
    padding: 2%;
    }
}

@media (min-width: 1025px) {
    nav .dropdown-item {
    font-size: 1.125rem;
    }
}

nav .dropdown-item:hover {
animation: scaleIn 0.16s;
transform-origin: center;
animation-fill-mode: forwards;
}

nav .dropdown-item.active .label {
background: var(--starship-30);
}

nav .dropdown-item:hover *:not(i) {
text-decoration: underline;
}

nav .dropdown-item:not(:last-child) {
margin-bottom: .5rem;
}

nav .dropdown-item i {
font-size: .75rem;
color: var(--ebonyclay-40);
margin-right: .325rem;
}

nav .dropdown-header {
font-family: "Libre Franklin", sans-serif;
font-weight: 600;
font-size: .75rem;
color: var(--java);
}

@media (max-width: 1025px) {
    nav .dropdown-header:not(:first-child) {
    margin-top: 2%;
    }
}

.dropdown-divider {
height: 0;
margin: .5rem 0;
overflow: hidden;
border-top: 1px solid var(--athensgrayDark);
}










body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_2 .et_pb_promo_description::before,
body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_3 .et_pb_promo_description::before,
body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_4 .et_pb_promo_description::before,
.category,
.category h2,
.category h3,
.category h4,
.category h5,
.category h6 {
font-family: "Libre Franklin", sans-serif !important;
font-weight: 600 !important;
font-size: 1rem !important;
color: var(--java) !important;
display: inline-block !important;
}


body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_2 .et_pb_promo_description::before,
body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_3 .et_pb_promo_description::before,
body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_4 .et_pb_promo_description::before {
  position: relative !important;
  display: flex !important;
  margin-bottom: 1.5rem;

  font-size: .875rem !important;
  font-size: .675rem !important;
  font-family: 'Libre Franklin', sans-serif !important;
  font-weight: 500 !important;
  line-height: 1.125rem !important;
  text-transform: uppercase !important;
  color: var(--ebonyclay) !important;
  animation: scaleOut 0.16s;
  min-height: 4.375rem;
  line-height: normal;
  align-items: center;
  justify-content: center;
}

body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_2 .et_pb_promo_description::before {
  content: 'Consulting' !important;
}

body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_3 .et_pb_promo_description:before {
  content: 'Training & Support';
  content: 'Public Speaking';
}

body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column_4 .et_pb_promo_description:before {
  content: 'Speaking';
}

body.home #main-content .et_pb_section.et_pb_section_1 .et_pb_row_2 .et_pb_column .et_pb_promo_description {
  background-image: url(//andtherewas.s3.amazonaws.com/img/scribble-quote-bg.svg);
  background-repeat: no-repeat;
  background-size: 6rem;
  background-position: top center;
}


section {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100vh;
  opacity: 1.0;
}

@media (min-width: 768px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  section {

  }
}




.sticky-page-title-row {
position: sticky;
top: 6.195rem;
background: var(--athensgrayLighter-80);
z-index: 2;
box-shadow: 0 0rem 1.125rem .625rem var(--athensgrayLighter);
backdrop-filter: blur(.25rem);
}

.page-title {
margin: 0 auto 2rem !important;
height: 4.375rem;
background-image: url(//andtherewas.s3.amazonaws.com/img/scribble-quote-bg.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
}

.page-title *,
.page-title * a,
.page-title,
.page-title a {
font-size: .875rem !important;
font-family: 'Libre Franklin', sans-serif !important;
font-weight: 500 !important;
line-height: 1.125rem !important;
text-transform: uppercase !important;
color: var(--ebonyclay);
animation: scaleOut 0.16s;
}

.page-title * a:hover,
.page-title a:hover {
animation: scaleIn 0.16s;
transform-origin: center;
animation-fill-mode: forwards;
color: var(--wildstrawberry);
}

.page-title * a i,
.page-title a i {
position: relative;
top: .2rem;
left: 0rem;
font-size: 1.125rem;
margin-right: .75rem;
color: var(--wildstrawberry);
padding: 0.5rem 0 !important;
border-radius: 100%;
width: 2rem;
display: inline-flex;
justify-content: center;
}

.page-section h1,
.page-section h2,
.page-section h3,
.page-section h4,
.page-section h5,
.page-section h6 {

}

.page-section h1,
.page-section h2,
.page-section h3,
.page-section h4,
.page-section h5,
.page-section h6,
.section-content .page-section {
  font-size: 1rem !important;
  font-family: 'Libre Franklin', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ebonyclay);
  background-color: var(--athensgray-30);
  line-height: 1.125rem !important;
  margin: 0 auto;
  padding: .75rem !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 0px solid var(--ebonyclay-40);
  border-bottom: 1px solid var(--java-60);
  box-shadow: inset 0px -3px 0px var(--white), inset 0px -4px 0px var(--ebonyclay-20);
  transform: none !important;
}






.page-lead-lg {
  font-size: clamp(1.5rem, 2.75vw, 3rem) !important;
  line-height: 1.65 !important;
  margin: 0 auto !important;
  text-align: center !important;
}

.et_pb_bg_layout_dark, .et_pb_bg_layout_dark h1,
.et_pb_bg_layout_dark h2,
.et_pb_bg_layout_dark h3,
.et_pb_bg_layout_dark h4,
.et_pb_bg_layout_dark h5,
.et_pb_bg_layout_dark h6,
.et_pb_slides .et_pb_slide_title,
.et_pb_slides .et_pb_slide_content,
.page-lead-lg {
  color: var(--ebonyclay) !important;
  text-shadow: 0 1px 3px rgba(0,0,0,0);
}

.et_pb_slides {
position: relative;
}


.et_pb_slides .et_pb_slide {
    padding: 0 0%;
}

.et_pb_slides .et_pb_container {
  box-shadow: 0rem 0.125rem 0.75rem var(--java-30);
  border: 0.5rem double var(--ebonyclay-80);
}

#speaker-jumbotron {
  padding: 0rem 0%;
}

#speaker-jumbotron .et_pb_image,
.et_pb_slider {
  overflow: visible !important; /* Remove Overflow so shapes and box shadow can extend boundary */
  height: 100%;
  display: flex;
}



#speaker-jumbotron .et_pb_image:before,
.et_pb_slider:before {
  content: '';
  display: block;
  z-index: 0;
  position: absolute;
  bottom: -0.5rem;
  left: 0rem;
  width: 102%;
  height: 5rem;
  background-image: url(https://andtherewas.s3.amazonaws.com/img/bg-fluid-shapes-01.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(-1);
}

#speaker-jumbotron .et_pb_image:before {
  width: 104%;
  z-index: -1;
  bottom: -1rem;
}

.et_pb_slider:after {
  content: '';
  display: block;
  z-index: 0;
  position: absolute;
  top: 1rem;
  left: 0rem;
  width: 102%;
  height: 2.75rem;
  background-image: url(https://andtherewas.s3.amazonaws.com/img/bg-fluid-shapes-02.svg);
  background-repeat: no-repeat;
  background-size: contain;
  transform: scale(-1);
}

#speaker-jumbotron .et_pb_image:after,
.et_pb_slides:before {
  content: '';
  display: block;
  z-index: 0;
  position: absolute;
  top: 0%;
  right: 0rem;
  width: 104%;
  height: 16rem;
  background-image: url(https://andtherewas.s3.amazonaws.com/img/bg-fluid-shapes-03.svg);
  background-repeat: no-repeat;
  background-size: 8vw;
  transform-origin: center;
  transform: translateY(-13%) rotate(-8deg);
}

#speaker-jumbotron .et_pb_image:after {
  top: 0%;
  width: 104%;
}

.et_pb_slides:after {
  content: '';
  display: block;
  z-index: 0;
  position: absolute;
  top: 0rem;
  right: 0rem;
  width: 95%;
  height: 10%;
  background-image: url(https://andtherewas.s3.amazonaws.com/img/bg-fluid-shapes-04.svg);
  background-repeat: no-repeat;
  background-size: contain;
}



@media (max-width: 767px) {
    .page-lead-lg {
    font-size: 5vw !important;
    }
}

.page-lead-lg .line-01 {
display: inline-block;
width: 100%;
margin-bottom: 1.125rem;
}

.page-lead-lg .line-01,
.page-lead-lg .line-02,
.page-lead-lg .line-03 {
display: inline-block;
}

@media (max-width: 767px) {
  .page-lead-lg .line-01 {
  display: inline;
  font-size: 9vw;
  margin-bottom: 0;
  }
}

.page-lead {
line-height: 3.75rem;
margin: 0 auto;
text-align: center;
color: var(--ebonyclay);
}

.page-lead .underline {
white-space: nowrap;
}

.section-content .page-sub-lead {
font-size: 1.25rem;
line-height: 2.5rem;
margin: 0 auto;
max-width: 90%;
text-align: center;
}

.content-area:after,
.content-tile:after,
.review-card:after,
.row-card-lg:after,
.coaching-tile:after,
.row-card-sm:after,
.link-card:after {
content: "";
position: relative;
display: block;
float: none;
clear: both;
width: 100%;
height:0px;
}







.review-card {
display: grid;
background: var(--white);
border: 0.4rem double var(--starshipDark);
padding: 3rem;
gap: 0.5rem;
margin: 3.75rem auto 0;
text-align: center;
width: 80%;
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .review-card {
  width: 100%;
  padding: 2rem 1.5rem 3rem;
  }
}

.review-card-img {
margin: -7rem 0 1rem;
z-index: 1;
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .review-card-img {
  margin: -5rem 0 0.5rem;
  }
}

.review-card-img .review-img-inner {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
height: 7rem;
width: 7rem;
margin: 0 auto;
border-radius: 100%;
border: 0.25rem solid var(--wildstrawberry);
box-shadow: inset 0 0 0 0.25rem var(--white);
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .review-card-img .review-img-inner {
    height: 6rem;
    width: 6rem;
  }
}

.review-card-img img {
opacity: 0;
}

.review-card-heading {
width: 90%;
margin: 0 auto;
}

.review-card-heading h4 {
  margin: 0;
  padding: 0;
}

.review-card-content {
display: grid;
gap: .5rem;
}

.review-card-content-comment {
}

.review-card-content-comment p {
font-size: .875rem;
}

.review-card-content-name {
font-size: 1rem;
font-weight: 600;
direction: ltr;
}

.review-card-content-details {
font-size: 0.75rem;
line-height: 1.5rem;
}






#carouselReviewCards {
margin-bottom: 0%;
width: 80%;
margin: 0 auto;
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  #carouselReviewCards {
  width: 100%;
  }
}

button[class*=carousel-control-]:focus {
border: .313rem solid var(--java-40);
}

.carousel-indicators {
  left: calc(50% - 1rem) !important;
  right: initial !important;
  transform: translateX(-50%);
  margin: 0 0 1rem !important;
}

.carousel-indicators [data-bs-target] {
width: 0.438rem !important;
height: 0.438rem !important;
border-radius: 100%;
}

.carousel-indicators button {
border-radius: 7px;
width: 7px;
height: 7px;
margin-right: 10px;
opacity: .5;
background-color: var(--wildstrawberry) !important;
}

.carousel-indicators button.active {
opacity: 1;
}


.carousel-indicators .play-pause-controls {
display: inline-flex;
}

@media (max-width: 1024px) {
  .carousel-indicators .play-pause-controls {
    display: block;
  }
}

.carousel-indicators .btn-play,
.carousel-indicators .btn-pause {
width: 2rem;
height: 2rem;
margin: 0 0 0 0.125rem;
line-height: 0;
padding: 0.5rem;
position: absolute;
top: -0.25rem;
font-size: .75rem;
animation: scaleOut 0.16s;
background: var(--white) !important;
border-color: var(--wildstrawberry) !important;
border-radius: 2rem;
border-style: solid;
opacity: 1;
}

.carousel-indicators .btn-play i,
.carousel-indicators .btn-pause i {

}

.carousel-indicators .btn-pause {
color: var(--ebonyclay) !important;
}

.carousel-indicators .btn-play {
background: var(--wildstrawberry) !important;
}

.carousel-indicators .btn-play i {
color: var(--white) !important;
margin-left: 0.188rem;
}

.carousel-timer {
    background: -webkit-linear-gradient(left, var(--java) 50%, var(--athensgray)50%);
    border-radius: 100%;
    height: calc(var(--size) * 1px);
    width: calc(var(--size) * 1px);
    position: absolute;
    top: 7.5px;
    right: -3.25rem;
    -webkit-animation: time calc(var(--duration) * 1s) steps(1000, start) infinite;
      -webkit-mask: radial-gradient(transparent 50%,var(--athensgrayDark) 50%);
      mask: radial-gradient(transparent 50%,var(--athensgrayDark) 50%);
}
.carousel-timer-mask {
    border-radius: 100% 0 0 100% / 50% 0 0 50%;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 50%;
    -webkit-animation: mask calc(var(--duration) * 1s) steps(500, start) infinite;
    -webkit-transform-origin: 100% 50%;
}
@-webkit-keyframes time {
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-webkit-keyframes mask {
    0% {
        background: var(--athensgray);
        -webkit-transform: rotate(0deg);
    }
    50% {
        background: var(--athensgray);
        -webkit-transform: rotate(-180deg);
    }
    50.01% {
        background: var(--java);
        -webkit-transform: rotate(0deg);
    }
    100% {
        background: var(--java);
        -webkit-transform: rotate(-180deg);
    }
}




button[class*=carousel-control-] {
width: 10%;
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  button[class*=carousel-control-] {
  width: 10%;
  display: none;
  }
}

button[class*=carousel-control-] i {
font-size: 3rem;
color: var(--wildstrawberry);
text-underline-offset: 0.5rem;
}

button[class*=carousel-control-]:hover i {
text-decoration: underline;
}



.calendly-inline-widget {
 padding: 1.5rem;
}

@media (max-width: 680px) {
  .calendly-inline-widget {
   height: calc(100vh + 60vh) !important;
   max-height: 100% !important;
  }

  .calendly-inline-widget iframe {
    overflow: visible;
    height: 100% !important;
    max-height: 100% !important;
  }
}




/*
@media only screen and (max-width: 1022px) {
  .calendly-inline-widget {

  }

  .calendly-inline-widget iframe {
  height: auto !important;
  }
}

@media only screen and (max-width: 1022px) {
  .calendly-inline-widget iframe {
  aspect-ratio: 678/882;
  height: auto;
  }
}
@media only screen and (max-width: 780px) {
  .calendly-inline-widget iframe {
  aspect-ratio: 2/3.7;
  height: auto;
  }
}
@media only screen and (max-width: 413px) {
  .calendly-inline-widget iframe {aspect-ratio: 2/4;}
}*/






.coaching-tile .title {
font-size: 3rem;
line-height: normal;
}

.coaching-tile .category {
font-family: "Libre Baskerville",serif;
font-size: 1.25rem;
font-weight: 500;
color: var(--java);
text-transform: none;
}

.row-card-lg .img-square i {
font-size: 9vw;
}

.row-card-sm-col-img {
padding-left: 0rem;
padding-right: 0rem;
}

.row-card-sm-col-img .img-square {
min-height: 14vh;
}

.row-card-sm-col-content .title,
.row-card-sm-col-content .title a {
font-size: 1.5rem;
color: var(--ebonyclay);
}

.content-tile .img-square i {
font-size: 9vw;
}

body.home-template .content-tile .img-square,
body.what-template .content-tile .img-square,
body.how-template .content-tile .img-square{
min-height: 50vh;
}

.training-table {
display: table;
border-collapse: separate;
width: 100%;
}

.training-table-row {
display: table-row;
}

.training-table-row-title {
display: table-cell;
vertical-align: middle;
padding: 1rem 2rem;
border-right: 1px solid var(--ebonyclay-30);
border-bottom: 1px solid var(--ebonyclay-30);
font-family: "LibreFranklin", sans-serif !important;
font-size: 4rem;
font-weight: 100;
white-space: nowrap;
text-align: right;
}

@media (max-width: 767px) {
  .training-table-row-title {
    font-size: 2rem;
  }
}

.training-table-row-content {
display: table-cell;
vertical-align: middle;
padding: 1rem 4%;
border-bottom: 1px solid var(--ebonyclay-30);
}

.training-table-row:last-child .training-table-row-title,
.training-table-row:last-child .training-table-row-content {
border-bottom: none;
}


.core-values-grid {
display: grid;
grid-template-columns: 1fr 1fr 2fr 2fr;
grid-template-rows: 1fr 1fr;
gap: 0.5rem;
grid-template-areas:
    "community delight enlighten embrace"
    "community delight integrity embrace"
    ". . . .";
min-height: 45vh;
font-family: 'Libre Baskerville', serif !important;
}

.core-values-grid .core-values-grid-item {
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Libre Franklin', sans-serif !important;
font-size: 2vw;
font-weight: 600;
padding: 2rem;
line-height: normal;
border-radius: 1rem;
}

.core-values-grid .core-values-grid-item-community {
background: var(--java-10);
grid-area: community;
}

.core-values-grid .core-values-grid-item-delight {
background: var(--starship-10);
grid-area: delight;
}

.core-values-grid .core-values-grid-item-enlighten {
background: var(--java-10);
grid-area: enlighten;
}

.core-values-grid .core-values-grid-item-integrity {
background: var(--wildstrawberry-10);
grid-area: integrity;
}

.core-values-grid .core-values-grid-item-embrace {
background: var(--starship-10);
grid-area: embrace;
}

@media only screen and (max-width: 980px){
  .core-values-grid .core-values-grid-item-community {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 5;
  }
  .core-values-grid .core-values-grid-item-delight {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 2;
  }
  .core-values-grid .core-values-grid-item-enlighten {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .core-values-grid .core-values-grid-item-integrity {
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 2;
    grid-column-end: 3;
  }
  .core-values-grid .core-values-grid-item-embrace {
    grid-row-start: 2;
    grid-row-end: 4;
    grid-column-start: 3;
    grid-column-end: 5;
  }
}


@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait), not all {
  .core-values-grid .core-values-grid-item {
    font-size: 3vw;
    padding: 2rem;
  }
}


@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) {
  .et_pb_row {
    width: 90%;
  }
}



.link-card .link-card-title,
.link-card .link-card-title a {
font-family: "LibreFranklin", sans-serif !important;
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}





.underline {
display: inline;
position: relative;
text-decoration: none;
white-space: pre;
z-index: 1;
}

.underline:after {
content: "";
background-image: url(//andtherewas.s3.amazonaws.com/img/underline.svg);
background-repeat: no-repeat;
background-size: 170%;
border-radius: 0 1rem 1rem 0;
display: block;
left: -0.325rem;
position: absolute;
width: 106%;
height: 0.375rem;
bottom: -0.025rem;
z-index: -1;
}

@media (max-width: 767px) {
  .underline:after {
    bottom: -0.125rem;
  }
}

.highlight {
  white-space: pre;
  background: var(--starship-40);
  padding: 0rem 0.25rem;
  margin: 0rem 0.25rem;
  display: inline-block;
}


.rule-lg {
height: 2.5rem;
width: 100%;
display: block;
background-image: url("https://andtherewas.s3.amazonaws.com/img/rule-large.svg");
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
border: none;
}

.rule-lg::before {
  display: none;
}

.hero {
    display: grid;
    align-items: center;
    min-height: 50vh !important;
    padding: 3rem 0 !important;
}

.callout {
background: var(--ebonyclay);
font-size: 1rem;
color: var(--white);
display: inline-block;
padding: 0.5rem 1rem;
}


.title a {
display: inline-block;
color: var(--ebonyclay);
position: relative;
}

.title a:after {
content:"";
height: 0.125rem;
width: 16.66%;
display: inline-block;
background-color: var(--athensgray);
position: absolute;
bottom: -.5rem;
left: 0;
border-radius: 0.25rem;
transition-duration: .25s;
}

.title a:hover:after {
width: 33.33%;
background-color: var(--wildstrawberry);
filter: blur(0px);
}






.w-100 {
width: 100% !important;
}
.w-90 {
width: 90% !important;
}
.w-80 {
width: 80% !important;
}
.w-70 {
width: 70% !important;
}
.w-75 {
width: 75% !important;
}
.w-66 {
width: 66.66% !important;
}
.w-60 {
width: 60% !important;
}
.w-40 {
width: 40% !important;
}
.w-50 {
width: 50% !important;
}
.w-33 {
width: 33.33% !important;
}
.w-30 {
width: 30% !important;
}
.w-25 {
width: 25% !important;
}
.w-20 {
width: 20% !important;
}


/** Callouts **/

#callout-transformation-design-mentorship h2 {

}

#callout-design-career-mentorship h2 {
  width: 90%;
  margin-left: auto !important;
  margin-right: auto !important;
}

/** Client Logos **/

.et_pb_row.row-2-to-6 img {
  /*filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);*/
  width: auto;
  max-width: 100%;
}

@media (max-width: 680px ) {
  .et_pb_row.row-2-to-6 {
    padding-bottom: 0;
  }
  .et_pb_row.row-2-to-6 .et_pb_column {
    width: 50% !important;
    margin-bottom: 2rem !important;
  }
  .et_pb_row.row-2-to-6 .et_pb_column .et_pb_image {
    text-align: center;
  }

  .et_pb_row.row-2-to-6 + .row-2-to-6 {
    padding-top: 0;
  }
}



/**********************************
   LAYOUT
***********************************/

.section-content {
  display: flex;
  width: 100%;
  min-height: 100%;
  /*padding-left: 0.625rem;
  padding-right: 0.625rem;*/
  flex-direction: column;
  align-items: flex-start;
}

@media (min-width: 768px) and (max-height: 1024px) {
  .section-content {
    /*padding-left: 2.625rem;
    padding-right: 2.625rem;*/
  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .section-content {
    flex-direction: row;
  }
}

@media (min-width: 1280px ){
  .section-content {
  }
}

.section-content:first-child .grid-1,
.section-content:first-child .grid-2 {
  height: 100%;
}

.section-content .grid-1,
.section-content .grid-2 {
  align-items: bottom;
  display: inline-flex;
  position: relative;
  /*width: 100%;*/
}

#who .section-content .grid-2,
#what .section-content .grid-2,
#how .section-content .grid-2 {
  height: auto;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .section-content .grid-1,
  .section-content .grid-2 {
    /*width: 50%;*/
  }
  #who .section-content .grid-2,
  #what .section-content .grid-2,
  #how .section-content .grid-2 {
    height: 100%;
  }
}

@media (min-width: 1280px ){
  .section-content .grid-1 {
    /*width: 66.66%;*/
  }
  .section-content .grid-2 {
    /*width: 33.33%;*/
  }
}

@media (min-width: 1680px ){
  .section-content .grid-1 {
    /*width: 66.66%;*/
  }
  .section-content .grid-2 {
    /*width: 33.33%;*/
  }
}

.et_pb_post .entry-title a, .et_pb_post h2 a,
#main-content h1,
#main-content h2 {
    font-size: 1.875rem;
    line-height: normal;
    margin: 1rem 0rem;
    font-weight: 100;
}

h2.dipl_blog_slider_post_title,
h2.dipl_blog_slider_post_title a {
  font-size: 1.5rem !important;
}

h2 a,
.et_pb_post .entry-title a, .et_pb_post h2 a {
  color: var(--javaDark) !important;
  text-decoration: none;
}

h2 a:hover,
.et_pb_post .entry-title a:hover, .et_pb_post h2 a:hover {
  color: var(--java);
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #main-content h1,
  #main-content h2 {
    /*transform: scale(0.92);
    transform-origin: left;*/
  }
}

/*
#intro #main-content h1 {
}

#main-content h1 .title-child-1 {
  font-size: 1rem;
  margin-bottom: 1rem;
}

#main-content h1 .title-child-2 {
  font-size: 3.5rem;
  margin-bottom: 1rem;
}

#main-content h1 .title-child-3 {
  font-size: 1.5rem;
}

@media (min-width: 768px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  #main-content h1 .title-child-1 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
  }

  #main-content h1 .title-child-2 {
    font-size: 4.5rem;
    margin-bottom: 1.5rem;
  }

  #main-content h1 .title-child-3 {
    font-size: 2rem;
  }
}

#main-content h1 .title-accent {
  font-weight: bold;
  color: var(--java);
}

#main-content h2 sub {
font-size: 1.5rem;
font-style: italic;
letter-spacing: 0.125rem;
top: -1.66rem;
margin-left: 0.925rem;
display: inline-flex;
position: relative;
place-self: flex-end;
}

#main-content h4 {
font-size: 1.125rem;
font-style: italic;
color: var(--ebonyclay);
line-height: normal;
white-space: nowrap;
margin: 0rem 0rem 2rem;
}

#main-content h4 a {
  display: inline-block;
  margin-right: 0.5rem;
}
*/


.content-area {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .content-area {
    /*align-self: center;
    place-self: flex-end;*/
  }
}

@media (min-width: 1280px ){
  .content-area {

  }
}

.col-img {
  background: transparent;
  width: 0%;
  display: inline-flex;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
}

  .col-img:after {
      content: "";
      display: block;
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(45deg, rgba(0,0,0,0.6), rgba(0,0,0,.0));
  }



.img-circle {
  padding: 0.25rem;
  width: 2.5rem;
  height: 2.5rem;
  display: none;
  /*background: var(--brightsun);*/
  border-radius: 100%;
  overflow: hidden;
  border: 3px double rgba(0, 0, 0, 0.16);
  margin-bottom: 0.5rem;
  justify-content: center;
  align-items: center;
}

@media (min-width: 1280px ){
  .img-circle {
    display: inline-flex;
  }
}

  .img-circle img {
    max-width: 100%;
    height: 100%;
    display: block;
    border: none;
  }

  .img-circle object {
    width: auto;
    height: 100%;
  }


.img-square {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--athensgray);
    overflow: hidden;
    margin-bottom: 0.5rem;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
    color: var(--ebonyclay) !important;
}

@media (min-width: 1280px ){
  .img-square {
  }
}

.img img,
.img-square img {
  max-width: 100%;
  height: 100%;
  display: block;
  border: none;
}


.img-square [class*=icon] {
  font-size: 18vw;
}

@media (min-width: 1024px ){
  .img-square [class*=icon] {
    font-size: 9vw;
  }
}

body.home-template .img-square-lg,
body.learn-from-me-template .img-square-lg,
body.who-template .img-square-lg {
background-color: transparent;
position: relative;
display: flex;
}

body.home-template .img-square-lg,
body.learn-from-me-template .img-square-lg {
bottom: -4rem;
margin-top: -4rem;
justify-content: flex-end;
}

body.who-template .img-square-lg {
justify-content: center;
}

    body.home-template .img-square-lg img,
    body.learn-from-me-template .img-square-lg img,
    body.who-template .img-square-lg img {
        position: relative;
        width: 100%;
        height: auto;
        max-width: 390px;
        border-radius: 1rem;
    }

.content-area p {
  margin-top: 0rem;
  margin-bottom: 1.125rem;
}

/**********************************
   Homepage
***********************************/

body.home-template main {
}

@media (min-width: 1025px){
    body.home-template main{
    }
}


/**********************************
   Brand
***********************************/

#brand {
  display: inline-block;
  text-align: center;
}

#brand-mark {
  display: inline-flex;
  width: 100%;
  max-width: 8.625rem;
  justify-content: center;
  align-items: center;
  outline: none;
}

@media (min-width: 768px ){
    #brand-mark {
        max-width: 15.625rem;
    }
}

#brand-mark img {
  height: auto;
  width: 100%;
}

#brand:hover img,
#brand:hover #brand-subtitle {
  opacity: 0.88;
  transform: scale(0.95);
  transform-origin: center center;
}

@media (min-width: 768px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  #brand-mark object {
    max-width: 32.313rem;
    margin-top: 0%;
  }
}


#brand-subtitle {
  font-size: .5rem;
  font-family: 'Libre Franklin', sans-serif;
  font-weight: 300;
  letter-spacing: 0.025rem;
  text-align: center;
  color: var(--ebonyclay);
  text-shadow: 0px 0px 2px var(--white), 0px 0px 4px var(--white);
  margin-top: 0.25rem;
  white-space: nowrap;
  user-select: none;
  display: block;
}

@media (min-width: 768px ){
    #brand-subtitle {
        font-size: .75rem;
        margin-top: 0.025rem;
    }
}

/* Media Query for Tablets Ipads portrait mode */
@media (min-width: 768px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    #brand-subtitle {

    }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #brand-subtitle {

  }
}


/**********************************
   What
***********************************/

#what {

}

#what .section-content {
  flex-direction: column-reverse;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #what .section-content {
    flex-direction: row;
  }
}

#what .what-apple {
  display: none;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #what .what-apple {
      width: 77%;
      display: inline-flex;
  }
}

#what .what-apple object {
  width: 100%;
  height: auto;
}

/*
#what .col-img {
  background-image: url("https://andtherewas.s3.amazonaws.com/img/what-sketches.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 40%;
  margin: -2rem 1rem -2rem -6.6rem;
  opacity: 1;
  visibility: hidden;
  mix-blend-mode: multiply;
  display: none;
}

@media (min-width: 1280px ){
  #what .col-img {
    opacity: 1;
    visibility: visible;
    display: inherit;
  }
}
*/

#what .grid-1 {

}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #what .grid-1 {

  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #what .grid-1 {

  }
}

#what .grid-1 .content-area {

}

@media (min-width: 1280px ){
  #what .grid-1 .content-area {

  }
}

#what .grid-2 .content-area {

}

@media (min-width: 1280px ){
  #what .grid-2 .content-area {

  }
}

#what-list {
  border-width: 0px;
  border-bottom: 1px solid;
  border-image-source: linear-gradient(90deg, rgba(38, 41, 64, 0), rgba(38, 41, 64, 0.3), rgb(38, 41, 64), rgb(38, 41, 64), rgba(38, 41, 64, 0.3), rgba(38, 41, 64, 0));
  border-image-slice: 1;
  text-align: center;
}

  .tab-content [role="tablist"].sticky-tabs {
    position: sticky;
    top: 15.195rem;
    background: var(--athensgrayLighter-80);
    z-index: 2;
    box-shadow: 0 0rem 1.125rem .625rem var(--athensgrayLighter);
    backdrop-filter: blur(.25rem);
    padding-top: 1.5rem;
  }

  .tab-content [role="tablist"] a,
  .tab-content [role="tablist"] a:active {
      display: inline-flex;
      font-size: 1.325rem;
      font-style: italic;
      letter-spacing: 0.05rem;
      color: var(--ebonyclay-80);
      border-left: 2px solid rgba(38, 41, 64, 0.15);
      border-right: 2px solid rgba(38, 41, 64, 0.15);
      border-top: 4px solid rgba(38, 41, 64, 0.15);
      margin: 0 0.25rem 0 0;
      padding: 0.75rem 1rem;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      position: relative;
      text-decoration: none;
      outline: none;
  }

  .tab-content [role="tablist"] a:not(.active) {
  background: var(--athensgrayLighter);
  color: var(--ebonyclay);
  }

  .tab-content [role="tablist"] a.active {
    border-left: 2px solid rgba(38, 41, 64, 1.0);
    border-right: 2px solid rgba(38, 41, 64, 1.0);
    border-top: 4px solid rgba(38, 41, 64, 1.0);
    color: rgba(38, 41, 64, 1.0);
  }

  .tab-content [role="tablist"] a.active:after {
    content: "";
    height: 4px;
    background-color: var(--athensgrayLighter);
    position: absolute;
    z-index: 1;
    bottom: -2px;
    left: 0;
    right: 0;
  }

  .tab-content [role="tablist"] a:before {
    content: "";
    height: .125rem;
    display: inline-block;
    background-color: transparent;
    position: absolute;
    bottom: 0rem;
    left: 50%;
    border-radius: 0.25rem;
    z-index: 2;
    transform: translateX(-50%);
    transform-origin: center;
    width: 0%;
    transition-duration: .5s;
  }

  .tab-content [role="tablist"] a.active:before {
    background-color: var(--wildstrawberry);
    width: 30%;
  }

  .tab-content [role="tablist"] a.active:hover:before {
    background-color: var(--wildstrawberry);
    width: 33.333%;
  }

    .tab-content [role="tabpanel"] {
      visibility: hidden;
      display: none;
    }

    .tab-content [role="tabpanel"].active {
      visibility: visible;
      display: block;
    }

    #what ul.list-link-group {
      list-style:none;
      padding-left: 1em;
    }

      #what ul.list-link-group > li {
        color: var(--ebonyclay);
        margin-bottom: 0.125rem;
      }

      #what ul.list-link-group > li.active {

      }

      #what ul.list-link-group > li > a {
        color: var(--ebonyclay);
        opacity: 0.8;
        will-change: opacity;
        padding: 0.1rem 0.25rem;
        font-family: 'LibreFranklin', sans-serif;
      }

      #what ul.list-link-group > li.active > a {
        opacity: 1.0;
        color: var(--starship);
        background: rgba(38, 41, 64, 0.88);
        text-decoration: none !important;
      }

      #what ul.list-link-group > li.active > a,
      #what ul.list-link-group > li > a:hover {
        opacity: 1.0;
        text-decoration: underline;
      }

      #what ul.list-link-group > li:before {
        content: '';
        display: inline-block;
        height: 0.75rem;
        width: 0.75rem;
        background-image: url("https://andtherewas.s3.amazonaws.com/img/bullet-arrow.png");
        background-image: url("https://andtherewas.s3.amazonaws.com/img/bullet-arrow.svg");
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 0.5rem;
        will-change: transform;
      }

      #what ul.list-link-group > li.active:before {
        transform: rotate(90deg) scale(0.9);
      }

      #what ul.list-link-group > li > .list-link-pane {
        overflow-x: auto;
        overflow-y: hidden;
        height: 0rem;
        width: 100%;
        padding: 0.75rem 1.5rem 0rem;
      }

      #what ul.list-link-group > li.active > .list-link-pane {
        height: auto;
      }

      #what .list-link-pane .img-circle {
        width: 3rem;
        height: 3rem;
        float: left;
        margin-right: 1rem;
        margin-top: 0.325rem;
        border-radius: 100%;
      }

      #what .list-link-pane .img-circle i {
        font-size: 1.5rem;
      }

      @media (min-width: 1280px) {
        #what .list-link-pane .img-circle {
          width: 4rem;
          height: 4rem;
        }
        #what .list-link-pane .img-circle i {
          font-size: 2.5rem;
        }
      }

      #what .list-link-pane .img-circle object {
        width: auto;
        height: 70%;
      }

      #what .list-link-pane .txt {
        display: flow-root;
      }

/**********************************
   Who
***********************************/

.waterbear-group {
background-image: url(https://andtherewas.s3.amazonaws.com/img/who-background.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: relative;
width: 100%;
min-height: 29rem;
margin: 0;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  .waterbear-group {
    min-height: 13rem;
  }
}

@media (min-width: 768px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  .waterbear-group {

  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .waterbear-group {

  }
}

@media (min-width: 1280px ){
  .waterbear-group {

  }
}

.waterbear-caption {
  font-family: 'Libre Baskerville', serif !important;
  font-style: italic;
  opacity: 0.88;
  position: absolute;
  top: 40%;
  right: 30%;
  display: flex;
  text-align: center;
  flex-direction: column;
  animation: float 16s ease-in-out infinite;
  user-select: none;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .waterbear-caption {
    top: 36%;
    right: 9%;
  }
}

@media (min-width: 1280px ){
  .waterbear-caption {
    top: 36%;
    right: 9%;
  }
}

.waterbear-caption-child-2 {
  font-size: 1rem;
}

.waterbear-01,
.waterbear-02,
.waterbear-03 {
  height: auto;
  position: absolute;
  user-select: none;
}

.waterbear-01 {
  top: 10%;/*6.25rem*/
  right: 17%;/*7.188rem*/
  width: 10%;
  animation: float 4s ease-in-out infinite;
  user-select: none;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .waterbear-01 {
    top: 13%;
    width: 13%;/*20%*/
  }
}

.waterbear-02 {
  top: 24%;
  right: 40%;
  width: 38%;
  animation: float 8s ease-in-out infinite;
  user-select: none;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .waterbear-02 {
    top: 36%;
    right: 51%;
  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .waterbear-02 {
    top: 20%;
    right: 33.33%;
    width: 50%;
  }
}

.waterbear-03 {
  top: 54%;
  right: 8%;
  width: 17%;/*17%*/
  animation: float 6s ease-in-out infinite;
  user-select: none;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .waterbear-03 {
    top: 70%;
    right: 16.66%;
  }
}

#who .img-circle,
#how .img-circle {
  width: 3rem;
  height: 3rem;
}

#who .section-content>div:last-child {
  display: flex;
  flex-basis: 100%;
}

#who .section-content>div:last-child .content-area {
  display: block;
  width: 100%;
  margin-top: 64%;
}

@media (min-width: 768px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  #who .section-content>div:last-child .content-area {
    margin-top: 50%;
  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #who .section-content>div:last-child .content-area {
    padding-left: 1rem;
    padding-right: 3rem;
    place-self: flex-end;
  }
}

#who .section-content>div:last-child h3 {
  margin: 0rem 0rem 2rem;
  display: inline-block;
  white-space: normal;
  line-height: 1.625rem;
}

#who .section-content>div:last-child h3:after {
  content: "";
  position: absolute;
  bottom: -2.5rem;
  left: 0rem;
  height: 0.75rem;
  width: 100%;
  display: inline-block;
  background-image: url("https://andtherewas.s3.amazonaws.com/img/rule-01.svg");
  background-repeat: no-repeat;
  background-position: center left;
  background-size: contain;
  opacity: 0.24;
}

ul.brand-list {
display: flex;
flex-wrap: wrap;
width: 100%;
justify-content: center;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  ul.brand-list {
    margin-bottom: 1.75rem;
  }
}

ul.brand-list li {
width: 20%;
height: 6rem;
justify-content: space-evenly;
display: inline-flex;
align-items: center;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    ul.brand-list li {
    width: 16.66%;
    }
}

@media (min-width: 1280px) {
    ul.brand-list li {
    width: 16.66%;
    }
}

@media (min-width: 1680px) {
    ul.brand-list li {
    width: 16.66%;
    }
}

ul.brand-list li > img {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  width: auto;
  max-width: 100%;
  max-height: 2rem;
}

/*

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #who .section-content>div:last-child li > img {
    max-width: 2.5rem;
  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #who .section-content>div:last-child li > img {
    max-width: 3.5rem;
  }
}

@media (min-width: 1280px) {
  #who .section-content>div:last-child li > img {
    max-width: 7.5rem;
    max-height: 2.5rem;
  }
}

@media (min-width: 1680px) {
  #who .section-content>div:last-child li > img {
    max-width: initial;
    max-height: 3.5rem;
  }
}
*/

/**********************************
   All Sections
***********************************/

main > section:first-of-type {
  padding-top: 6.375rem;
  padding-bottom: 3.5rem;
}

@media (min-width: 1024px ){
    main > section:first-of-type {
      padding-top: 9.375rem;
    }
}

#who, #what, #how, #why, footer {
  z-index: 2;
}

/**********************************
   How - 5 D's of Creation
***********************************/

.how-fivetouchpoints {
  display: flex;
  flex-direction: column;
  align-self: center;
  margin: 0 auto;
  place-self: center;
  width: 100%;
  right: 0%;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .how-fivetouchpoints {
    margin-bottom: 1.75rem;
  }
}

@media (min-width: 1025px ),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .how-fivetouchpoints {
    width: 95%;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .how-fivetouchpoints {
    width: 148%;
    position: absolute;
    top: 26%;
    right: -44%;
    transform: scale(0.9);
  }
}

.how-fivetouchpoints .how-hand {
  width: 100%;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .how-fivetouchpoints .how-hand {
    visibility: hidden;
    display: none;
  }
}

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
  .how-fivetouchpoints .how-hand {
      margin-top: -4%;
      margin-left: -2%;
  }
}

  .how-fivetouchpoints .how-hand img {
    width: 100%;
    height: auto;
  }

  .how-fivetouchpoints .how-hand-title {
    display: block;
    position: absolute;
    top: 0%;
    right: -5%;
    opacity: 1.0;
  }

  @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .how-fivetouchpoints .how-hand-title {
      position: relative;
      right: initial;
      margin: 0 auto;
      margin-top: -10%;
    }
  }


  @media (min-width: 1025px ),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    .how-fivetouchpoints .how-hand-title {
      right: 0%;
    }
  }

  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    .how-fivetouchpoints .how-hand-title {
      top: -4%;
      right: 0%;
      transform: scale(1.125);
    }
  }

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    .how-fivetouchpoints .how-hand-title {
      right: 25%;
      top: -28%;
      transform: scale(0.75);
    }
  }

  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    .how-fivetouchpoints .how-hand-title {
      top: 10%;
      right: 10%;
    }
  }

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    .how-fivetouchpoints .how-hand-title {
      top: 0%;
      right: 4%;
    }
  }


    .how-fivetouchpoints .how-hand-title img {
      height: auto;
      width: 100%;
      max-width: 15.625rem;
    }

    #how text tspan {
        letter-spacing: 0.02rem;
    }

    /**********************************
     How - 5 D's of Creation
  ***********************************/

  .how-fivetouchpoints {
    display: flex;
    flex-direction: column;
    align-self: center;
    margin: 0 auto;
    place-self: center;
    width: 100%;
    right: 0%;
  }

  @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .how-fivetouchpoints {
      margin-bottom: 1.75rem;
    }
  }

  @media (min-width: 1025px ),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    .how-fivetouchpoints {
      width: 95%;
    }
  }

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
    .how-fivetouchpoints {
      width: 148%;
      position: absolute;
      top: 26%;
      right: -44%;
      transform: scale(0.9);
    }
  }

  .how-fivetouchpoints .how-hand {
    width: 100%;
  }

  @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .how-fivetouchpoints .how-hand {
      visibility: hidden;
      display: none;
    }
  }

  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    .how-fivetouchpoints .how-hand {
        margin-top: -4%;
        margin-left: -2%;
    }
  }

    .how-fivetouchpoints .how-hand img {
      width: 100%;
      height: auto;
    }

    .how-fivetouchpoints .how-hand-title {
      display: block;
      position: absolute;
      top: 0%;
      right: -5%;
      opacity: 1.0;
    }

    @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
    only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
      .how-fivetouchpoints .how-hand-title {
        position: relative;
        right: initial;
        margin: 0 auto;
        margin-top: -10%;
      }
    }


    @media (min-width: 1025px ),
    only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
      .how-fivetouchpoints .how-hand-title {
        right: 0%;
      }
    }

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
      .how-fivetouchpoints .how-hand-title {
        top: -4%;
        right: 0%;
        transform: scale(1.125);
      }
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
    only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
      .how-fivetouchpoints .how-hand-title {
        right: 25%;
        top: -28%;
        transform: scale(0.75);
      }
    }

    @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
      .how-fivetouchpoints .how-hand-title {
        top: 10%;
        right: 10%;
      }
    }

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
    only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
      .how-fivetouchpoints .how-hand-title {
        top: 0%;
        right: 4%;
      }
    }


      .how-fivetouchpoints .how-hand-title img {
        height: auto;
        width: 100%;
        max-width: 15.625rem;
      }

      #how text tspan {
        letter-spacing: 0.02rem;
      }

    .how-fivetouchpoints .how-hand-step1,
    .how-fivetouchpoints .how-hand-step2,
    .how-fivetouchpoints .how-hand-step3,
    .how-fivetouchpoints .how-hand-step4,
    .how-fivetouchpoints .how-hand-step5 {
      display: block;
      position: absolute;
    }

    .how-earsmindset .how-earsmindset-step1,
    .how-earsmindset .how-earsmindset-step2,
    .how-earsmindset .how-earsmindset-step3,
    .how-earsmindset .how-earsmindset-step4 {
      display: block;
      position: absolute;
      top: 50%;
      left: 45%;
      opacity: 0.0;
    }

    .how-fivetouchpoints .how-hand-step1,
    .how-fivetouchpoints .how-hand-step2,
    .how-fivetouchpoints .how-hand-step3,
    .how-fivetouchpoints .how-hand-step4,
    .how-fivetouchpoints .how-hand-step5,
    .how-earsmindset .how-earsmindset-step1,
    .how-earsmindset .how-earsmindset-step2,
    .how-earsmindset .how-earsmindset-step3,
    .how-earsmindset .how-earsmindset-step4 {
      transform: scale(.6);
      max-width: 90px;
      opacity: .8;
      transform-origin: center;
    }


    .how-fivetouchpoints .how-hand-step1:hover,
    .how-fivetouchpoints .how-hand-step2:hover,
    .how-fivetouchpoints .how-hand-step3:hover,
    .how-fivetouchpoints .how-hand-step4:hover,
    .how-fivetouchpoints .how-hand-step5:hover,
    .how-earsmindset .how-earsmindset-step1:hover,
    .how-earsmindset .how-earsmindset-step2:hover,
    .how-earsmindset .how-earsmindset-step3:hover,
    .how-earsmindset .how-earsmindset-step4:hover {
      transform: scale(.66);
      opacity: 1;
    }

    .how-fivetouchpoints .how-hand-step1.active,
    .how-fivetouchpoints .how-hand-step2.active,
    .how-fivetouchpoints .how-hand-step3.active,
    .how-fivetouchpoints .how-hand-step4.active,
    .how-fivetouchpoints .how-hand-step5.active,
    .how-earsmindset .how-earsmindset-step1.active,
    .how-earsmindset .how-earsmindset-step2.active,
    .how-earsmindset .how-earsmindset-step3.active,
    .how-earsmindset .how-earsmindset-step4.active {
      opacity: 1.0;
      max-width: 5.625rem;
    }

    .how-fivetouchpoints .how-hand-step1 {
      top: 5%;
      left: 31%;
    }

    .how-earsmindset .how-earsmindset-step1 {
      top: 16%;
      left: 16%;
    }

    .how-fivetouchpoints .how-hand-step2 {
      top: 29%;
      left: 6%;
    }

    .how-earsmindset .how-earsmindset-step2 {
      top: 42%;
      left: 24%;
    }

    .how-fivetouchpoints .how-hand-step3 {
      top: 47%;
      left: 3%;
    }

    .how-earsmindset .how-earsmindset-step3 {
      top: 9%;
      left: 50%;
    }

    .how-fivetouchpoints .how-hand-step4 {
      top: 64.33%;
      left: 8%;
    }

    .how-earsmindset .how-earsmindset-step4 {
      top: 41%;
      left: 50%;
    }

    .how-fivetouchpoints .how-hand-step5 {
      top: 82%;
      left: 20%;
    }

    /* Hand Step Hover/Animation */
    .how-fivetouchpoints .hand-step,
    .how-earsmindset .earsmindset-step {
      cursor: pointer;
    }

    @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
    only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
      .how-fivetouchpoints .hand-step,
      .how-earsmindset .earsmindset-step {
        width: 3rem;
        height: 3.25rem;
        position: relative;
        top: initial !important;
        right: initial;
        left: 0% !important;
      }
    }

    .how-fivetouchpoints .hand-step img,
    .how-earsmindset .earsmindset-step img {
      height: auto;
      width: 100%;
      transition-duration: 0.16s;
      animation: scaleOut 0.16s;
      transform-origin: center;
      animation-fill-mode: forwards;
      border-radius: 100%;
      border: 1px solid transparent;
    }

    .how-fivetouchpoints .hand-step.active img,
    .how-earsmindset .earsmindset-step.active img {
      filter: drop-shadow(0rem 0rem .125rem var(--java));
      border: 1px solid var(--javaDark);
    }

    .how-fivetouchpoints .hand-step:hover object,
    .how-earsmindset .earsmindset-step:hover object {
      animation: scaleIn 0.16s;
    }

    .how-fivetouchpoints .hand-step:hover img,
    .how-earsmindset .earsmindset-step:hover img {
      transition-duration: 0.16s;
      fill: var(--white);
    }

    .how-fivetouchpoints .hand-step .how-step-scribble,
    .how-earsmindset .earsmindset-step .how-step-scribble {
      stroke: rgba(242, 230, 67, 0.8);
    }

    .how-fivetouchpoints .hand-step:hover .how-step-scribble,
    .how-earsmindset .earsmindset-step:hover .how-step-scribble {
      stroke: rgba(95, 236, 234, 0.64);
      stroke: rgba(242, 230, 67, 0.64);
      stroke-opacity: 1;
    }

    .how-fivetouchpoints .hand-step:hover .how-step-oval,
    .how-earsmindset .earsmindset-step:hover .how-step-oval {
      fill-opacity: 0.5;
    }

    .how-fivetouchpoints .hand-step:hover .how-step-oval,
    .how-earsmindset .earsmindset-step:hover .how-step-oval {
      fill: rgba(95, 236, 234, 0.4);
      fill: rgba(242, 230, 67, 0.8);
      fill: rgba(38, 41, 64, 1.0);
      fill-opacity: 1;
    }

    .how-fivetouchpoints .hand-step-content {
      background: rgba(255, 255, 255);
      position: absolute;
      z-index: 2;
      border: 7px double rgba(38, 41, 64, 0.95);
      width: 68%;
      border-radius: 3px;
      opacity: 0.0;
      visibility: hidden;
      will-change: opacity, transform;
      animation: cardOut 0.5s;
    }

    .how-fivetouchpoints .hand-step-content p {
      padding: 1.25rem;
    }

  @media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    .how-fivetouchpoints .hand-step-content {
      width: 27%;
    }
  }

  .how-fivetouchpoints .hand-step-content.active {
    animation: cardIn 0.5s;
    transform-origin: bottom;
    animation-fill-mode: forwards;
  }


  @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    @keyframes cardIn {
      from {
        transform: translate(260%, 52%) rotate(20deg);
        opacity: 0.0;
        visibility: hidden;
      }
      to {
        transform: translate(4rem, 7rem) rotate(4deg);
        opacity: 1.0;
        visibility: visible;
      }
    }
    @keyframes cardOut {
      0% {
        transform: translate(5rem, 7rem) rotate(-0deg);
        opacity: 1.0;
        visibility: visible;
      }
      100% {
        transform: translate(156%, 120%) rotate(-20deg);
        opacity: 0.0;
        visibility: hidden;
      }
    }
  }

  @media (min-width: 768px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
      @keyframes cardIn {
        from {
          transform: translate(260%, 52%) rotate(20deg);
          opacity: 0.0;
          visibility: hidden;
        }
        to {
          transform: translate(145%, 92%) rotate(-8deg);
          opacity: 1.0;
          visibility: visible;
        }
      }
      @keyframes cardOut {
        0% {
          transform: translate(145%, 92%) rotate(-8deg);
          opacity: 1.0;
          visibility: visible;
        }
        100% {
          transform: translate(156%, 120%) rotate(-20deg);
          opacity: 0.0;
          visibility: hidden;
        }
      }
  }

  @media (min-width: 1280px ){
    @keyframes cardIn {
      from {
        transform: translate(260%, 92%) rotate(20deg);
        opacity: 0.0;
        visibility: hidden;
      }
      to {
        transform: translate(145%, 92%) rotate(-8deg);
        opacity: 1.0;
        visibility: visible;
      }
    }
    @keyframes cardOut {
      0% {
        transform: translate(145%, 92%) rotate(-8deg);
        opacity: 1.0;
        visibility: visible;
      }
      100% {
        transform: translate(156%, 140%) rotate(-20deg);
        opacity: 0.0;
        visibility: hidden;
      }
    }
  }

  @media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
      @keyframes cardIn {
        from {
          transform: translate(260%, 52%) rotate(20deg);
          opacity: 0.0;
          visibility: hidden;
        }
        to {
          transform: translate(156%, 72%) rotate(-8deg);
          opacity: 1.0;
          visibility: visible;
        }
      }
      @keyframes cardOut {
        0% {
          transform: translate(156%, 72%) rotate(-8deg);
          opacity: 1.0;
          visibility: visible;
        }
        100% {
          transform: translate(156%, 120%) rotate(-20deg);
          opacity: 0.0;
          visibility: hidden;
        }
      }
  }

  @media (min-width: 1680px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
      @keyframes cardIn {
        from {
          transform: translate(260%, 52%) rotate(20deg);
          opacity: 0.0;
          visibility: hidden;
        }
        to {
          transform: translate(156%, 82%) rotate(-8deg);
          opacity: 1.0;
          visibility: visible;
        }
      }
      @keyframes cardOut {
        0% {
          transform: translate(156%, 82%) rotate(-8deg);
          opacity: 1.0;
          visibility: visible;
        }
        100% {
          transform: translate(156%, 120%) rotate(-20deg);
          opacity: 0.0;
          visibility: hidden;
        }
      }
  }

  .how-fivetouchpoints .hand-step-content h4,
  .how-earsmindset .earsmindset-step-content h4 {
    font-family: 'Libre Franklin', sans-serif !important;
    font-size: 1.25rem;
    font-weight: 500;
    text-align: center;
    background: rgba(242, 230, 67, 0.64);
    background: var(--wildstrawberry-90);
    background: rgb(95, 236, 234, 0.64);
    margin: -1.25rem -1.25rem 0.5rem;
    padding: 1.325rem 0rem 1rem;
    line-height: 1.626rem;
    letter-spacing: 0.04rem;
    text-transform: uppercase;
    border-bottom: 4px double rgba(38, 41, 64, 0.16);
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
  }

    .how-fivetouchpoints .hand-step-content h4 i,
    .how-earsmindset .earsmindset-step-content h4 i {
        font-size: 1.325rem;
        position: relative;
        text-align: right;
    }

  .how-fivetouchpoints .hand-step-content h4 sup,
  .how-earsmindset .earsmindset-step-content h4 sup {
    font-family: 'Libre Baskerville', serif !important;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--white);
    text-align: center;
    display: inline-flex;
    position: relative;
    padding: 0.5rem 0.425rem;
    background: rgba(255, 255, 255, 0.9);
    background: rgba(38, 41, 64, 1.0);
    align-items: center;
    justify-content: center;
    text-transform: capitalize;
    position: absolute;
    top: -24%;
    left: 50%;
    transform: translateX(-50%);
    border: 3px double rgba(38, 41, 64, 0.95);
  }

  .how-fivetouchpoints .hand-step-content p,
  .how-earsmindset .earsmindset-step-content p {
    font-size: 0.875rem;
    line-height: 1.325rem;
    padding: 0.5rem 0 0;
  }

  .how-fivetouchpoints .hand-step-instructions {
    display: none;
  }

  @media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
    .how-fivetouchpoints .hand-step-instructions {
      display: inline-block;
      position: absolute;
      z-index: 0;
      top: 64%;
      left: 56%;
      transform: translate(-50%, -50%);
      font-family: "LibreFranklin", sans-serif;
      font-size: 1.125rem;
      font-weight: 100;
      width: 7rem;
      color: #555;
    }
    .how-fivetouchpoints .hand-step-instructions:after {
      display: inline-block;
      position: absolute;
      z-index: 0;
      top: 50%;
      left: -37%;
      transform: translateY(-50%);
      font-size: 2rem;
      content: "↜";
    }
  }

  /**********************************
     How - EARS
  ***********************************/

  .how-earsmindset {
    height: clamp(50vh, 680px, 60vh);
    display: flex;
    /*background: var(--java-20);*/
    width: 100%;
    background-image: url(//andtherewas.s3.amazonaws.com/img/empathy-side-portrait_head.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1.25);
    transform-origin: top center;
  }

  .how-earsmindset-heart {
    max-width: 30%;
    position: absolute;
    left: 8rem;
    top: 4rem;
    transform-origin: center;
    animation: heartbeat 1.16s infinite alternate;
    opacity: .6;
  }

  .how-earsmindset-heart img {
    width: 100%;
    height: auto;
  }

  /* Heart beat animation */
  @keyframes heartbeat {
    to { transform: scale(.96) skew(0deg, -1deg); opacity: 1;}
  }

  .how-earsmindset-heart-chambers {
    position: absolute;
    z-index: 1;
    top: 30%;
    left: 55%;
    width: 84%;
    transform: translateX(-50%);
    transform-origin: center;
    opacity: .9;
  }

  .how-earsmindset-heart-chambers #heart-chambers-svg path {
    fill: transparent;
  }

  .how-earsmindset-heart-chambers #heart-chambers-svg #heart-chambers-svg-path-01 {

  }

  .how-earsmindset-heart-chambers #heart-chambers-svg #heart-chambers-svg-path-02 {

  }

  .how-earsmindset-heart-chambers #heart-chambers-svg #heart-chambers-svg-path-03 {

  }

  .how-earsmindset-heart-chambers #heart-chambers-svg #heart-chambers-svg-path-04 {

  }

  .how-earsmindset-heart-chambers #heart-chambers-svg [id*=heart-chambers-svg-path-].active .cls-1 {
    fill: var(--java-20);
  }

  .how-earsmindset-heart-chambers #heart-chambers-svg [id*=heart-chambers-svg-path-].active :not(.cls-1) {
    fill: var(--java-40);
  }


  .how-earsmindset-ear {
    width: 4rem;
    position: absolute;
    left: calc(100% - 23.75rem);
    top: 9.75rem;
    transform-origin: center;
    object-fit: fill;
    z-index: 1;
    opacity: 1;
    background: radial-gradient(ellipse farthest-side at center center, var(--white) 50%, transparent 100%);
  }

  .how-earsmindset-ear object,
  .how-earsmindset-ear svg {
    opacity: .24;
  }

  .earsmindset-step-content {

  }

  .how-earsmindset .earsmindset-step-content,
  .how-earsmindset .earsmindset-step-content:before,
  .how-earsmindset .earsmindset-step-content:after {
    background: rgba(255, 255, 255);
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: 2rem;
    border: 7px double rgba(38, 41, 64, 0.95);
    width: clamp(50%, 19.75rem, 90%);
    border-radius: .313rem;
    opacity: 0;
    visibility: hidden;
    will-change: opacity, transform;
    animation: speechIn .5s ease;
    animation-fill-mode: both;
    transform-origin: top;
  }

  .how-earsmindset .earsmindset-step-content p {
    padding: 1.25rem;
  }

  .how-earsmindset .earsmindset-step-content:before,
  .how-earsmindset .earsmindset-step-content:after {
    content:'';
    padding: 0rem;
    background: var(--ebonyclay);
    position: absolute;
    border: none !important;
    z-index: 2;
    left: 6%;
    top: -15%;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 100%;
    transform-origin: bottom;
    opacity: 1;
    visibility: visible;
    animation: none;
    display: none;
  }

  .how-earsmindset .earsmindset-step-content:before {
    z-index: 1;
  }

  .how-earsmindset .earsmindset-step-content:after {
    z-index: 1;
    left: 9%;
    top: -24%;
    width: .75rem;
    height: .75rem;
    transform-origin: left;
    box-shadow: 8px -16px 0 0 var(--ebonyclay),
                16px -32px 0 -2px var(--ebonyclay),
                -24px 17px 0 -6px var(--ebonyclay),
                -5px 25px 0 -10px var(--ebonyclay);
  }

  @media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait){
    .how-earsmindset .earsmindset-step-content {
      /*width: 27%;*/
    }
  }

  .how-earsmindset .earsmindset-step-content.active {
    animation: speechOut .5s;
    animation-fill-mode: both;
  }

  @media (min-width: 1280px ){
    @keyframes speechIn {
      from {
        transform: translate(-50%, 9%) scale(1);
        opacity: 1;
        visibility: visible;
      }
      to {
        transform: translate(-50%, 0%) scale(.92);
        opacity: 0;
        visibility: visible;
      }
    }
    @keyframes speechOut {
      from {
        transform: translate(-50%, -40%) scale(1);
        opacity: 0;
        visibility: hidden;
      }
      to {
        transform: translate(-50%, 9%) scale(1);
        opacity: 1;
        visibility: visible;
      }
    }
  }



/**********************************
   Why
***********************************/

#why {
  background: var(--white);
}

#why .section-content {
    flex-direction: column-reverse;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #why .grid-1 {
    margin-top: -16%;
  }
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #why .grid-2 {
    /*margin-top: -7vh;*/
  }
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #why .content-area {
      padding: 0rem;
  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #why .section-content {
    flex-direction: row;
  }
}

.stoneandpecans-group {
    width: 70%;
    display: table;
    margin: 0 auto;
}

.stoneandpecans-group-stone {
    text-align: center;
    vertical-align: bottom;
    display: table-cell;
    width: 40%;
}

.stoneandpecans-group-stone img {
width: 80%;
height: auto;
}

.stoneandpecans-group-stone:after {
    /*content: "";
    position: absolute;
    bottom: -1rem;
    left: 0rem;
    height: .75rem;
    width: 100%;
    display: inline-block;
    background-image: url(//andtherewas.s3.amazonaws.com/img/rule-01.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;*/
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .stoneandpecans-group-stone {

  }
}

@media (min-width: 1025px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .stoneandpecans-group-stone {

  }
}

.stoneandpecans-group-stone object {
  width: auto;
  height: 100%;
  position: relative;
}

.stoneandpecans-group-pecans-01 {
text-align: center;
vertical-align: bottom;
display: table-cell;
width: 15%;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .stoneandpecans-group-pecans-01 {
  }
}

@media (min-width: 1025px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .stoneandpecans-group-pecans-01 {
      max-height: 4.5rem;
  }
}

.stoneandpecans-group-pecans-01 object {
  width: 100%;
  height: auto;
}

.stoneandpecans-group-pecans-02 {
text-align: center;
vertical-align: bottom;
display: table-cell;
width: 15%;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .stoneandpecans-group-pecans-02 {
  }
}

@media (min-width: 1025px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .stoneandpecans-group-pecans-02 {
      max-height: 6.125rem;
  }
}

.stoneandpecans-group-pecans-02 object {
  width: 100%;
  height: auto;
}

.stoneandpecans-group-caption {
user-select: none;
display: table-caption;
text-align: center;
padding: 0rem 0rem 3rem;
}


@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .stoneandpecans-group-caption {
  }
}

@media (min-width: 1025px ),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  .stoneandpecans-group-caption {
  }
}

.stoneandpecans-group-caption h3 {
    margin: 0rem;
    padding: 0rem;
}

.stoneandpecans-group-caption h3:after {
  /*content: "";
  position: absolute;
  bottom: -1rem;
  left: 0rem;
  height: .75rem;
  width: 100%;
  display: inline-block;
  background-image: url(//andtherewas.s3.amazonaws.com/img/rule-01.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;*/
  display: none;
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .stoneandpecans-group-caption h3:after {

  }
}


/**********************************
   Blockquote
***********************************/

.blockquote {

}

.et_pb_row.blockquote {
  border-left: 0.5rem solid var(--javaLight);
  border-right: 0.5rem solid var(--starshipLight);
  padding: 1.5rem;
}

.et_pb_row.blockquote:before,
.et_pb_row.blockquote:after {

}

.et_pb_row.blockquote:before {

}

.et_pb_row.blockquote:after {

}

.et_pb_row.blockquote p:nth-child(1) {
  font-family: 'Libre Baskerville', serif;
  font-size: clamp(1.5rem, 9vw, 1.5rem);
  font-style: ;
  font-weight: 300;
  line-height:normal;
  margin: 0 auto;
  padding-bottom: 1.5rem;
  max-width: 100%;
  position: relative;
}

.et_pb_row.blockquote p:nth-child(1):after {
  content: '';
  display: block;
  position: relative;
  margin: 1rem auto 0rem;
  width: 2rem;
  height: .25rem;
  background-color: var(--wildstrawberry);
}


@media only screen and (min-width: 680px){
  .et_pb_row.blockquote p:nth-child(1) {
    max-width: 90%;
  }
}

@media only screen and (min-width: 1024px){
  .et_pb_row.blockquote p:nth-child(1) {
    max-width: 80%;
  }
}


@media (min-device-width: 1024px ) {
  .et_pb_row.blockquote p:nth-child(1) {
    font-size: clamp(1.5rem, 9vw, 2.675rem);
    padding-bottom: 1.5rem;
  }
}

.et_pb_row.blockquote p:last-child {
  font-size: .875rem;
  margin-bottom: 0;
}

@media (min-device-width: 1024px ) {
  .et_pb_row.blockquote p:last-child {
    font-size: 1rem;
  }
}

/**********************************
   Buttons
***********************************/

.gform_wrapper button,
.gform_wrapper input[type=submit],
.gform_wrapper input[type=button],
.btn-solid,
.btn-outlined,
.btn-text-link {
  font-family: 'Libre Franklin', sans-serif !important;
  font-weight: 500 !important;
  text-align: center !important;
  display: inline-flex !important;
  width: max-content;
  align-items: center;
  position: relative;
}

.btn-solid.text-center,
.btn-outlined.text-center,
.btn-text-link.text-center {
  justify-content: center;
}

.gform_wrapper button,
.gform_wrapper input[type=submit],
.gform_wrapper input[type=button],
.et-fixed-header #top-menu li.btn-book-a-call a,
.btn-solid,
.btn-outlined {
  background: var(--wildstrawberry);
  border: 2px solid transparent;
  border-radius: 4rem !important;
  text-decoration: none !important;
  margin: 0.25rem 0 !important;
  padding: 0.5rem 1rem !important;
}

.btn-text-link {
  padding: 0.5rem 0 !important;
  animation: scaleOut 0.16s;
  border-radius: 1.5rem;
  border: 2px dotted transparent;
}

.gform_wrapper button {
  animation: scaleOut 0.16s;
  border-radius: 1.5rem;
  border: 2px dotted transparent;
}

.gform_wrapper button:hover,
.btn-text-link:hover {
  animation: scaleIn 0.16s;
  transform-origin: center;
  animation-fill-mode: forwards;
}

.btn-text-link.active,
.btn-text-link.active:hover {
background: var(--java-10);
/* filter: drop-shadow(0rem 0rem .125rem var(--java)); */
border: 2px dotted var(--javaDark);
padding: 0.5rem 0.675rem !important;
margin-left: -0.5rem;
}

.btn-text-link .label {
color: var(--wildstrawberry);
text-decoration: underline !important;
}

.btn-text-link:hover .label {
color: var(--wildstrawberryDarker);
text-decoration: none !important;
}

.btn-text-link.active .label,
.btn-text-link.active:hover .label {
color: var(--ebonyclay);
text-decoration: none !important;
}

.btn-solid i,
.btn-outlined i,
.btn-text-link i {
  font-size: 0.75rem;
  margin-right: 0.5rem;
  line-height: 0;
}

.btn-text-link i {
  color: var(--ebonyclay);
}

.gform_wrapper button,
.gform_wrapper input[type=submit],
.gform_wrapper input[type=button],
.et-fixed-header #top-menu li.btn-book-a-call a,
.btn-solid {
  color: var(--white) !important;
  animation: scaleOut 0.16s;
  box-shadow: 0 0.325rem 0.5rem var(--java-30);
}

.gform_wrapper button:hover,
.et-fixed-header #top-menu li.btn-book-a-call a:hover,
body .et_pb_bg_layout_light.et_pb_button.btn-solid:hover,
body .et_pb_bg_layout_light .et_pb_button.btn-solid:hover,
body .et_pb_button.btn-solid:hover,
.btn-solid:hover {
    color: var(--white) !important;
    animation: scaleIn 0.16s;
    transform-origin: center;
    animation-fill-mode: forwards;
    background: var(--wildstrawberryDark) !important;
    box-shadow: 0 0.125rem 0.125rem var(--java-80);
}

.gform_wrapper button,
.gform_wrapper input[type=button],
.btn-outlined {
  font-size: 1rem;
  color: var(--ebonyclay) !important;
  animation: scaleOut 0.16s;
  background: var(--white) !important;
  border-color: var(--wildstrawberry) !important;
}

.gform_wrapper button {
margin-top: 0.75rem !important;
}

body .et_pb_bg_layout_light.et_pb_button.btn-outlined:hover,
body .et_pb_bg_layout_light .et_pb_button.btn-outlined:hover,
body .et_pb_button.btn-outlined:hover,
.btn-outlined:hover {
  color: var(--ebonyclay) !important;
  animation: scaleIn 0.16s;
  transform-origin: center;
  animation-fill-mode: forwards;
  background: var(--java-20);
  border-color: var(--wildstrawberry) !important;
}





.gform_wrapper.gravity-theme .gf_progressbar_percentage {
  background-color: var(--java-80) !important;
}






footer {
  font-size: 0.875rem;
  font-family: "LibreFranklin", sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-basis: 100%;
  text-align: center;
  background-color: var(--ebonyclayDark);
  position: relative;
  z-index: 1;
}

footer .bottom-nav {
  text-align: center;
}

.bottom-nav a {
  font-size: 1rem;
  color: var(--white);
}

.bottom-nav a:hover {
  color: var(--wildstrawberry);
}

footer #footer-bottom {
  padding: .75rem 0;
  display: flex;
  justify-content: space-around;
}


footer #footer-bottom .container {
  position: relative;
  width: 100%;
  display: grid;

  align-items: center;
  gap: .5rem;
}

@media (min-width: 768px) {
  footer #footer-bottom .container {
    grid-template-columns: 50% 50%;
  }
}

footer #footer-bottom .container:before,
footer #footer-bottom .container:after {
    content: "";
    display: none;
}

#footer-info,
#footer-info a {
padding: 0;
float: none;
}

footer .footer-copyright {
font-size: .5rem;
color: var(--ebonyclayLighter);
text-align: center;
}

footer #footer-info {
text-align: right;
font-size
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  footer #footer-info,
  footer .footer-copyright {
    text-align: center;
  }
}

footer .footer-social {
  text-align: left;
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  footer .footer-social {
    text-align: center;
  }
}

footer .footer-social a {
    display: inline-flex;
    width: 2.5rem;
    height: 2.5rem;
    justify-content: center;
    align-items: center;
    margin-right: .5rem;
    border-radius: 100%;
    background: var(--ebonyclay);
    animation: scaleOut 0.16s;
    text-decoration: none;
}

footer .footer-social a:hover {
    animation: scaleIn 0.16s;
    transform-origin: center;
    animation-fill-mode: forwards;
    background: var(--wildstrawberryDark);
}

footer .footer-social i {
    font-size: 1rem;
    color: var(--white);
}



footer .bottom-nav {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.5rem;
}

@media (min-width: 768px) {
  footer .bottom-nav {
    flex-direction: row;
  }
}

@media (max-width: 768px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  footer .bottom-nav li {
  padding: .5rem 0rem;
  }
}


/**********************************
  Forms
***********************************/

input[type=radio],
input[type=checkbox] {
  accent-color: var(--java);
  height: .75rem;
  width: .75rem;
}


/**********************************
  Let's Talk
***********************************/

#letstalk {
  height: 100vh;
  width: 100vh;
  background: transparent;
  position: fixed;
  z-index: 1;
  transition: all 0.16s linear;
  top: 0%;
  left: 0%;
  overflow-x: hidden;
  overflow-y: hidden;
  z-index: 10;
  transform: translateY(100%);
}

.title,
#letstalk .title {
font-size: 2.25rem;
line-height: normal;
white-space: normal;
margin: 1rem 0;
}

@media (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 320px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #letstalk .title {
    font-size: 4vw;
  }
}

@media (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait),
only (max-width: 680px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  #letstalk .title {
    font-size: 2rem;
  }
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #letstalk .title {
  }
}


#letstalk .subtitle {
font-size: 1.5rem;
margin: 0 0 1rem;
white-space: normal;
}


body[data-state="showLetsTalk"]{
  /*padding: 0% 4%;*/
}

body[data-state="showLetsTalk"] #letstalk {
height: 100%;
width: 100%;
position: fixed;
z-index: 10;
background: var(--java-90);
transform: translateY(0%);
cursor: pointer;
}


#letstalk .section-content .btn-text-link {
transform-origin: left;
}


#letstalk .section-content {
background: var(--java);
background: var(--wildstrawberry);
background: var(--white);
margin: 4% auto 0;
box-shadow: 0px 10px 320px var(--wildstrawberry-80) !important;
box-shadow: 0px 10px 320px var(--javaDark) !important;
overflow: hidden;
width: 98%;
max-width: 50rem;
cursor: default;
min-height: auto;
border-radius: .5rem;
padding: 1rem;
}

#letstalk .content-area {
  flex-direction: initial;
  width: 100%;
  margin: 0rem;
}

@media (min-width: 1025px ),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  #letstalk .content-area {
    flex-direction: column;
  }
}

#letstalk .content-area p {
margin-bottom: 0;
}


body:not([data-state="showLetsTalk"]) #letstalk .section-content {
  -webkit-animation: letstalkMoveOut 1s;
  animation: letstalkMoveOut 1s;
}

body[data-state="showLetsTalk"] #letstalk .section-content {
  box-shadow: 0px 40px 240px rgba(24, 205, 202, 0.24);
  -webkit-animation: letstalkMoveIn .5s;
  animation: letstalkMoveIn .5s;
}





@-webkit-keyframes letstalkMoveIn {
  from   { -webkit-transform: translateY(100%); opacity: 0; }
  to { -webkit-transform: translateY(0%); opacity: 1; }
}

@-moz-keyframes letstalkMoveIn {
  from   { -webkit-transform: translateY(100%); opacity: 0; }
  to { -webkit-transform: translateY(0%); opacity: 1;}
}

@keyframes letstalkMoveIn {
  from   { -webkit-transform: translateY(100%); opacity: 0; }
  to { -webkit-transform: translateY(0%); opacity: 1;}
}


@-webkit-keyframes letstalkMoveOut {
  0%   { -webkit-transform: translateY(0%); opacity: 1; }
  100% { -webkit-transform: translateY(100%); opacity: 0;}
}

@-moz-keyframes letstalkMoveOut {
  0%   { -webkit-transform: translateY(0%); opacity: 1; }
  100% { -webkit-transform: translateY(100%); opacity: 0;}
}

@keyframes letstalkMoveOut {
  0%   { -webkit-transform: translateY(0%); opacity: 1; }
  100% { -webkit-transform: translateY(100%); opacity: 0;}
}


#btn-admin,
.btn-circle {
  font-family: 'Libre Franklin', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05rem;
  color: var(--white);
  height: 4.75rem;
  width: 4.75rem;
  background: var(--wildstrawberry);
  border-radius: 100%;
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  user-select: none;
  z-index: 99;
  box-shadow: 0px 0px 20px rgba(24, 205, 202, 0);
  border: 3px solid var(--athensgray);
  user-select: none;
  outline: none;
  animation: scaleOut 0.16s;
}

@media (min-width: 1025px ){
    #btn-letstalk {
    font-family: 'Libre Franklin', sans-serif;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.05rem;
    color: var(--white) !important;
    height: 4.75rem;
    width: 4.75rem;
    background: var(--wildstrawberry);
    border-radius: 100%;
    position: absolute;
    top: -1rem;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    z-index: 99;
    box-shadow: 0px 0px 20px rgba(24, 205, 202, 0);
    border: 3px solid var(--athensgray);
    user-select: none;
    outline: none;
    animation: scaleOut 0.16s;
    }

    #btn-letstalk .line-01,
    #btn-letstalk .line-02 {
    line-height: normal;
    }

    #btn-letstalk .subtitle {
    visibility: hidden;
    display: none;
    }
}

@media (min-width: 1280px ){
  #btn-letstalk,
  #btn-admin {
    bottom: 1.5rem;
    right: 0rem;
  }
}


#btn-letstalk:hover,
#btn-admin:hover,
.btn-circle:hover {
  animation: scaleIn 0.16s;
  transform-origin: center;
  animation-fill-mode: forwards;
  background: var(--wildstrawberryDark);
}

#btn-admin {
  right: initial;
  left: 2.5rem;
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.4);
  opacity: 0.4;
  will-change: opacity;
}

#btn-admin:hover {
  opacity: 1.0;
}

body[data-state="showLetsTalk"] #btn-letstalk {
  background: #800040;
  box-shadow: 0px 0px 40px rgba(255, 17, 165, 0.24);
  /* border: 3px dotted #800040; */
  background-color: rgba(0, 0, 0, 0.4);
  border-color: rgba(0, 0, 0, 0.16);
}

@media (min-width: 1025px),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: landscape),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape),
  only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape){
  body[data-state="showLetsTalk"] #btn-letstalk {
    bottom: 50%;
  }
}

body[data-state="showMobileMenu"] #btn-letstalk  {
  /*transform: translateX(-50%) scale(0.9);
  opacity: 0.8;*/
}


@keyframes scaleIn {
from {
  transform: scale(1);
}
to {
  transform: scale(0.96);
}
}

@keyframes scaleOut {
from {
  transform: scale(0.96);
}
to {
  transform: scale(1);
}
}

/**********************************
  Portfolio
***********************************/

.portfolio {
  display: grid;
  gap: 1.5rem;
}


.portfolio,
.portfolio[data-state*=product_design] {
  grid-template-columns: repeat(2, 1fr);
}

.portfolio[data-state*=brand_design] {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 680px) {
  .portfolio,
  .portfolio[data-state*=product_design],
  .portfolio[data-state*=brand_design] {
    grid-template-columns: repeat(1, 1fr);
  }
}

.portfolio-item {
  border-width: 0.4rem;
  border-style: double;
  border-color: var(--ebonyclay-70);
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: var(--athensgray);
  overflow: hidden;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.portfolio[data-state*=product_design] .portfolio-item {
}

.portfolio[data-state*=brand_design] .portfolio-item {
  aspect-ratio: 1 / 1;
}

.portfolio-item img {
  width: 100%;
  height: auto;
  opacity: 0;
}

.portfolio-item-content-image {
  aspect-ratio: 16 / 9;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
}

.portfolio-item-content {
}

.portfolio-item-content-title {
}

.portfolio-item-overview-heading {
}

.portfolio-item-overview-description {
}


/**********************************
  Plans
***********************************/

.plans {
  display: grid;
  column-gap: 0.25rem;
  justify-content: space-around;
  width: calc(100% - 2.25rem);
  margin: 0 auto;
}

@media (max-width: 1200px) {
  .plans {
    grid-template-columns: repeat(3, 33.33%);
    grid-template-rows: auto auto;
    width: calc(100% - 2.25rem);
  }
}


@media (width > 767px) {
  .plans {
    grid-template-columns: repeat(4, 25%);
    width: calc(100% - 0.75rem);
  }
}

@media (max-width: 1200px) {
  .plans {
    grid-template-columns: repeat(3, 33.33%);
    /* width: calc(100% - 0.75rem); */
  }
}

@media (max-width: 680px) {
  .plans {
    overflow: none;
    overflow-x: scroll;
    width: 100vw;
    height: auto;
    margin-left: -1.25rem;
    background: var(--white-80);
    padding-left: 1.5rem;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  #modalPlansCompare .plans {
    margin-left: -1rem;
    padding-left: 1rem;
    width: calc(100vw - 2rem);
  }
}



.plans-item {
position: relative;
}

@media (max-width: 680px) {
  .plans-item {
    background-color: var(--white-40);
    z-index: 0;
    backdrop-filter: blur(4px);
  }
}

.plans-item:nth-child(1) {
  padding-right: 1.5rem;
  align-content: center;
  display: grid;
}

#modalPlansCompare .modal-header .plans-item:nth-child(1) {
  background: none;
}

#modalPlansCompare .plans-item:nth-child(1) {
  padding-left: 1.5rem;
}

#modalPlansCompare .plans-item-overview {
  border-radius: 2rem 0 0 0;
  background: var(--java-5);
}

#modalPlansCompare .plans-item:nth-child(1) {
  background: var(--java-20);
  padding-left: 1.5rem;
}

@media (max-width: 1200px) {
  .plans-item:nth-child(1) {
    /*grid-template-columns: repeat(3, 33.33%);
     width: calc(100% - 0.75rem); */
     display: none;
  }

  .plans-item .plans-item-overview {
    width: 100%;
    grid-column-start: 1;
    grid-column-end: 4;
    grid-row-start: 1;
    padding: 0rem 2rem 1.5rem;
    display: grid;
  }
}

.plans-item.plans-item-overview .plans-item-title {
  font-size: clamp(2rem, 3.25vw, 2.5rem) !important;
}

.plans-item:not(:nth-child(1), .plans-item-overview) .plans-item-title {
  background-color: var(--starship-90) !important;
  font-size: 1.75rem !important;
  font-family: 'Libre Franklin', sans-serif !important;
  font-weight: 600 !important;
  color: var(--ebonyclay);
  background-color: var(--athensgray-30);
  line-height: 1.125rem !important;
  margin: 0 auto;
  padding: 1.5rem !important;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 0px solid var(--ebonyclay-40);
  border-bottom: 1px solid var(--java-60);
  box-shadow: inset 0px -3px 0px var(--white), inset 0px -4px 0px var(--ebonyclay-20);
  transform: none !important;
}

.plans-item-row-sticky,
.plans-item-sticky {
  position: sticky !important;
  top: 4.125rem !important;
  z-index: 2;
  backdrop-filter: blur(0.25rem);
}

body.logged-in .plans-item-row-sticky,
body.logged-in .plans-item-sticky {
  top: 5.875rem !important;
}

.plans-item-content {
  text-align: center;
  padding: 1.5rem;
  display: grid;
  grid-row-gap: 1rem;
}

.plans-item.plans-item-overview .plans-item-content {
  text-align: left;
  padding: 0rem;
  padding-right: 1.5rem;
  position: relative;
  z-index: 1;
}

.plans-item-description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.4;
  padding-bottom: 0.5rem !important;
}

.plans-item-image {
  /*background-color: var(--athensgray-20); */
  /* background-color: var(--java-10) !important; */
  /* background-image: radial-gradient(circle, var(--java) -20%, transparent 20%); */
  margin-bottom: 0;
  padding-bottom: 0.25rem;
  width: 100%;
  aspect-ratio: 4 / 2;
  overflow: hidden;
  justify-content: center;
  align-items: flex-end;
  display: flex;
  position: relative;
}

.plans-item-image [class*=icon] {
  font-size: calc(3vw);
}

.plans-item-image img {
  width: auto;
}

.plans-item-image img.walk {
  height: calc(100% - 3.25rem);
}

.plans-item-image img.run {
  height: calc(100% - 4.425rem);
  position: relative;
  top: 0.094rem;
}

.plans-item-image img.fly {
  height: calc(100% - 2.5rem);
  position: relative;
  top: 0.094rem;
}

.plans-item-subheading {
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0;
  padding: 0;
}

.plans-item-subheading .underline:after {
  bottom: -0.375rem;
  background-size: unset;
}

.plans-item-pricing {
  font-size: 2rem;
  font-weight: 700;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.125rem;
}

@media (width > 1300px) {
  .plans-item-pricing {
    font-size: 2.5rem;
  }
}

.plans-item-pricing label {
  font-size: 1rem;
  font-weight: 500;
  position: relative;
  padding-right: 0.25rem;
}

.plans-item-pricing sup {
  top: -0.425rem !important;
  font-size: .875rem;
  position: relative;
}

.plans-item-pricing .plans-item-pricing-sale-badge {
  font-size: 40%;
  display: grid;
  width: auto;
  color: var(--white);
  position: relative;
  padding: 0.375rem 0.75rem;
  line-height: normal;
  text-transform: capitalize;
  margin-left: 0.375rem;
  background-color: var(--javaDark);
  border-radius: 0.125rem;
}

/*.plans-item-pricing .plans-item-pricing-sale-badge:before {
  content: "";
  position: absolute;
  top: 0rem;
  left: 0.25rem;
  display: block;
  background-color: var(--javaDark);
  background-image: linear-gradient(45deg, transparent 49%, var(--java-80) 50%, transparent 51%);
  background-size: 0.5rem 0.5rem;
  right: 0.25rem;
  bottom: -0.125rem;
  z-index: -1;
  border-radius: 0.125rem;
  opacity: 0;
}*/

.plans-item-pricing .plans-item-pricing-sale-badge:after {
  content: "Was " attr(data-was);
  text-transform: none;
  display: block;
  font-size: 60%;
  letter-spacing: normal;
}

#main-content .plans-item-link a:not([class]) {
  color: var(--javaDark) !important;
}

.plans-item-action {
  padding-top: 0.5rem;
}

.plans-item-row-overview .plans-item:nth-child(2):before,
.plans-feature-row .plans-item:nth-child(2):before,
.plans-item:nth-child(10):before {
  position: absolute;
  content:'' !important;
  background: var(--ebonyclay-20);
  width: 1px;
  height: calc(100% - 0.25rem);
  bottom: 0rem;
  left: 0rem;
}

.plans-item-row .plans-item:nth-child(3):before,
.plans-feature-row .plans-item:nth-child(3):before,
.plans-item:nth-child(11):before {
  position: absolute;
  content:'';
  background: var(--ebonyclay-20);
  width: 1px;
  height: calc(100% - 0.25rem);
  bottom: 0rem;
  left: 0rem;
}

.plans-item-row .plans-item:nth-child(3):after,
.plans-feature-row .plans-item:nth-child(3):after,
.plans-item:nth-child(11):after {
  position: absolute;
  content:'';
  background: var(--ebonyclay-20);
  width: 1px;
  height: calc(100% - 0.25rem);
  bottom: 0rem;
  right: 0rem;
}

.plans-item-row-image .plans-item:nth-child(3):before,
.plans-item-row-image .plans-item:nth-child(3):after {
  opacity: 0;
}


.plans-item-row-overview .plans-item:nth-child(4):after,
.plans-feature-row .plans-item:nth-child(4):after,
.plans-item:nth-child(12):after {
  position: absolute;
  content:'';
  background: var(--ebonyclay-20);
  width: 1px;
  height: calc(100% - 0.25rem);
  bottom: 0rem;
  right: 0rem;
}

#modalPlansCompare .plans-item:nth-child(4):after {
  opacity: 0;
}

/* Head Row */
.plans-head-row {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 5;
  grid-template-columns: auto 75%;
  align-items: center;
}

@media (max-width: 1200px) {
  .plans-head-row {
    grid-column-end: 4;
    grid-template-columns: auto;
  }
}

.plans-head-row-title {
  font-family: 'Libre Franklin', sans-serif !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0.5rem 0.75rem;
}

.plans-head-row .plans-head-row-title:nth-child(1) {
  background-color: var(--java-40);
}


@media (max-width: 1200px) {
  .plans-head-row .plans-head-row-title:nth-child(1),
  .plans-head-row .plans-head-row-title:nth-child(2) {
    display: none;
  }
}

.plans-head-row .plans-head-row-title:nth-child(2) {
  text-align: center;
  background-color: var(--java-80);
}

.plans-head-row-title-empty {
  font-size: 0 !important;
  padding: .25rem;
}

/* Sections */
.plans-section-row {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 5;
  align-items: center;
  grid-template-columns: 1;
  position: relative;
  background-color: var(--ebonyclay) !important;
}

.plans-section-row .plans-item:has(.plans-item-title) {
  padding-left: 0 !important;
}

.plans-section-row:after {
  position: absolute;
  content: '';
  background: var(--ebonyclay-20);
  width: 100%;
  height: 1px;
  bottom: 0rem;
  left: 0rem;
  display: block;
}

@media (max-width: 680px) {
  .plans-section-row:after {
    opacity: 0;
  }
}

.plans-section-row .plans-item-title {
  margin: 0;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
}



/* Features */
.plans-item-row,
.plans-feature-row {
  display: grid;
  grid-column-start: 1;
  grid-column-end: 5;
  align-items: center;
  align-items: stretch;
  grid-template-columns: repeat(4, 25%);
  position: relative;
  justify-content: center;
}

@media (max-width: 1200px) {
  .plans-item-row,
  .plans-feature-row {
    grid-column-start: 1;
    grid-column-end: 4;
    grid-template-columns: repeat(3, 33.33%);
    column-gap: 0rem;
    justify-content: start;
  }
}

@media (max-width: 680px) {
  .plans-item-row,
  .plans-feature-row {
    grid-template-columns: repeat(3, calc(80vw - 2rem) );
    column-gap: 1rem;
    padding-right: 2rem;
    width: 90%;
  }

  #modalPlansCompare .plans-item-row,
  #modalPlansCompare .plans-feature-row {
    grid-template-columns: repeat(3, calc(75vw - -2rem));
    column-gap: .5rem;
  }
}

.plans-feature-row:after {
  position: absolute;
  content: '';
  background: var(--ebonyclay-20);
  width: 100%;
  height: 1px;
  bottom: 0rem;
  left: 0rem;
}

@media (max-width: 680px) {
  .plans-feature-row:after {
    opacity: 0;
  }
}


.plans-item-row .plans-item:not(:nth-child(1)):before,
.plans-item-row .plans-item:not(:nth-child(1)):after,
.plans-feature-row .plans-item:not(:nth-child(1)):before,
.plans-feature-row .plans-item:not(:nth-child(1)):after {
  height: 100%;
}



#modalPlansCompare .plans-feature-row .plans-item:nth-child(4):after
#modalPlansCompare .plans-item-row .plans-item:nth-child(2):before,
#modalPlansCompare .plans-item-row .plans-item:nth-child(4):after,
.plans-item-row-image .plans-item:nth-child(4):after {
  opacity: 0 !important;
}

@media (max-width: 1200px) {
  .plans-item-row .plans-item:nth-child(2):before,
  .plans-feature-row .plans-item:nth-child(2):before {
  opacity: 0;
  }
}

.plans-item-row:last-child:after,
.plans-feature-row:last-child:after {
  opacity: 0;
}



.plans-feature-row .plans-item:nth-child(1) {
  padding-left: 0.75rem;
}

@media (max-width: 1200px) {
  .plans-feature-row .plans-item:nth-child(1) {
    display: grid;
    grid-column-start: 1;
    grid-column-end: 4;
    text-align: center;
    background-color: var(--athensgray);
    padding: 0.5rem;
  }
}

.plans-feature-row .plans-item:nth-child(n+1) .plans-item-title {
  font-size: 1rem !important;
  margin: 0;
  padding: 0;
}

@media (max-width: 680px) {

  .plans-item-print-only-copy,
  .plans-feature-row .plans-item:nth-child(n+1) .plans-item-title {
    /*width: calc(100vw - 3rem);*/
    width: calc(100vw - 8rem) !important;
    position: sticky !important;
    left: 0 !important;
  }
}

.plans-feature-row .plans-item:nth-child(n+1) .plans-item-title .badge {
  font-size: .5rem !important;
}

.plans-feature-row .plans-item {
  padding: 1.5rem;
  align-self: stretch;
}

.plans-feature-row .plans-item:not(:nth-child(1)) {
  text-align: center;
  align-self: stretch;
  display: inline-grid;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
}

.plans-feature-row .plans-item:not(:nth-child(1)) ul {
  text-align: left;
  margin: 0rem !important;
  padding-bottom: 0rem !important;
  font-size: 0.875rem;
  list-style-type: disc;
  padding-left: 0.875rem;
}

.plans-feature-row .plans-item:not(:nth-child(1)) ul li:not(:last-child) {
  margin-bottom: 0.5rem !important;
}

.plans-feature-row .plans-item:not(:nth-child(1)) p {
  text-align: left;
  margin: 0rem !important;
  padding-bottom: 0rem !important;
  font-size: 0.875rem;
  font-weight: normal !important;
}

.plans-feature-row .plans-item:before,
.plans-feature-row .plans-item:after {
  height: 100%;
}


.plan-bs-tooltip {
  --bs-tooltip-bg: var(--ebonyclay-50) !important;
  --bs-tooltip-color: var(--white) !important;
}

@media (min-width: 1400px) and (-webkit-min-device-pixel-ratio: 2) {
  .plan-ios-controls {
    display: none;
  }
}

.plan-ios-controls {
  position: sticky !important;
  z-index: 10;
  bottom: .875rem;
  left: 0rem;
  right: 0rem;
  padding-left: 2rem;
}

.plan-ios-controls .btn-group {
  padding: 0 0 0 .75rem;
  border-radius: 4rem;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  font-size: .925rem;
  font-weight: 600;
  background: var(--ebonyclay) !important;
  width: 100%;
  border-radius: 2rem !important;
  gap: 0.125rem;
}

.plan-ios-controls label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--white);
  padding: 0 0.25rem;
  width: 30%;
  white-space: nowrap;
}

@media (max-width: 420px) {
  .plan-ios-controls label {
    font-size: .675rem;
  }
}

.plan-ios-controls label a {
  color: var(--starship);
}

.plan-ios-controls [type=button] {
  background-color: var(--ebonyclayLight);
  border-color: var(--ebonyclay);
  font-weight: 700;
}

.plan-ios-controls [type=button].active {
  background-color: var(--starship);
  border-color: var(--ebonyclay);
  color: var(--ebonyclay) !important;
}

.plan-ios-controls [type=button]:last-child {
  border-radius: 0 1.5rem 1.5rem 0 !important;
}



.plans-item-print-only-copy {
  font-size: 0.75rem;
  margin-top: 0.5rem;
}



/** Plans Compact Layout **/
.plans[data-layout=compact]{

}

.plans[data-layout=compact] .plans-item-row,
.plans[data-layout=compact] .plans-feature-row {
  grid-template-columns: repeat(3, 33.33%);
}

@media (width < 680px) {

  .plans[data-layout=compact]{
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0;
    margin-left: -1.3rem;
    padding-right: 3.3rem;
    padding-left: 1.3rem;
    width: calc(100vw - 1.3rem);
  }
  .plans[data-layout=compact] .plans-item-row,
  .plans[data-layout=compact] .plans-feature-row {
    grid-template-columns: repeat(3, 100%);
    column-gap: 1rem;
    padding-right: 2rem;
    width: 100%;
  }
}

.plans[data-layout=compact] > .plans-feature-row.plans-feature-row-summary {
  display: grid;
}

.plans[data-layout=compact] .plans-feature-row.plans-feature-row-summary .plans-item:nth-child(1) {
  display: none;
}

.plans[data-layout=compact] .plans-item-row .plans-item:nth-child(1),
.plans[data-layout=compact] .plans-head-row .plans-head-row-title-empty:nth-child(1),
.plans[data-layout=compact] .plans-section-row {
  display: none;
}

.plans[data-layout=compact] .plans-head-row .plans-head-row-title-empty:nth-child(2) {
  grid-column-start: 1;
  grid-column-end: 4;
}

.plans[data-layout=compact] .plans-feature-row .plans-item:nth-child(2):before {
  opacity: 1;
}

@media (width < 680px) {
  .plans[data-layout=compact] .plans-feature-row .plans-item:nth-child(2):before,
  .plans[data-layout=compact] .plans-feature-row .plans-item:nth-child(4):after,
  .plans[data-layout=compact] .plans-item-row-overview .plans-item:nth-child(4):after {
    opacity: 0;
  }
}

.plans[data-layout=compact] > .plans-head-row.plans-head-row-other-features {
  display: none;
}

.plans[data-layout=compact] > .plans-feature-row {
  display: none;
}


#modalPlansCompare .modal-header {
  background: var(--white-90) !important;
  /*background: var(--starship-90) !important;*/
  box-shadow: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  padding-bottom: 0rem;
}

#modalPlansCompare .modal-header .btn-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

#modalPlansCompare .plan-bs-tooltip,
.tooltip {
  z-index: 999999999999999999999999 !important;/* To fix them not showing in modals */
}

#modalPlansCompare .modal-body {
  overflow-x: hidden;
  padding-top: 0rem;
}

@media (width < 680px) {
  #modalPlansCompare .plans-item-row,
  #modalPlansCompare .plans-feature-row {
    grid-template-columns: repeat(3, 82vw);
    column-gap: .5rem;
    padding-right: 2rem;
    width: 100%;
  }
}









/*
  .plans[data-layout=compact] .plans-head-row:not( :nth-child(1) ),
  .plans[data-layout=compact] .plans-head-row:nth-child(1) .plans-head-row-title:nth-child(1),
  .plans[data-layout=compact] .plans-feature-row,


  .plans[data-layout=compact] > .plans-feature-row:first-of-type {
    display: grid;
  }

*/











.btn-info {
  border-radius: 100% !important;
  width: 1.25rem !important;
  height: 1.25rem !important;
  line-height: 0 !important;
  font-size: 0.6rem !important;
  padding: 0rem !important;
  margin-left: 0.5rem !important;
  background-color: var(--starship) !important;
  border-color: var(--starshipDarker) !important;
}

.btn-info:hover {
  background-color: var(--starshipDarker) !important;
  border-color: var(--starshipDarker) !important;
}





/**********************************
  Image Advertisement
***********************************/

.img-advertisement[data-position='fixed'] {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  background-color: var(--java-80);
  padding: 0.25rem;
  backdrop-filter: blur(2px);
}

@media (max-width: 680px) {
  .img-advertisement[data-position='fixed'] {
    padding-bottom: 1.25rem;
  }
}

.img-advertisement[data-position='fixed'] .img-advertisement-content {

}


.img-advertisement[data-position='fixed'] .img-advertisement-content-link {

}

.img-advertisement[data-position='fixed'] img {
  display: flex;
  max-height: 100%;
  margin: 0 auto;
}

.img-advertisement .img-advertisement-content-link,
.img-advertisement .img-advertisement-content-link {
  border: 8px solid var(--java-40);
  display: flex;
}

.img-advertisement .img-advertisement-content-link:not(:active):hover,
.img-advertisement .img-advertisement-content-link:not(:active):focus {
  animation: scaleIn 0.16s;
  transform-origin: center;
  animation-fill-mode: forwards;
  box-shadow: 0 0 0px 3px var(--java-30), 0 0 30px -1px var(--java-50);
  border: 8px solid var(--java);
}

.img-advertisement[data-position='fixed'] .img-advertisement-content,
.img-advertisement[data-position='fixed'] .img-advertisement-controls {
  margin: 0 auto;
  max-width: 768px;
  position: relative;
}

@media (max-width: 680px) {
  .img-advertisement[data-position='fixed'] .img-advertisement-content,
  .img-advertisement[data-position='fixed'] .img-advertisement-controls {
    margin: 0 auto;
    max-width: 75%;
    position: relative;
  }
}

@media (min-width: 1024px) {
  .img-advertisement[data-position='fixed'] .img-advertisement-content,
  .img-advertisement[data-position='fixed'] .img-advertisement-controls {
    margin: 0 auto;
    max-width: 680px;
    position: relative;
  }
}

.img-advertisement[data-position='fixed'] .img-advertisement-controls {

}

.img-advertisement[data-position='fixed'] .img-advertisement-controls .img-advertisement-controls-btn-hide {
  position: absolute;
  top: 0.25rem;
  right: -3rem;
  appearance: initial;
  font-size: .75rem;
  margin: 0;
  border: 0;
  line-height: normal;
  display: inline-flex;
  border-radius: 100%;
  height: 2.5rem;
  width: 2.5rem;
  justify-content: center;
  align-items: center;
  padding-top: 0.125rem;
}

.img-advertisement[data-position='fixed'].hide-ad {
  padding: 0rem 0rem .5rem;
}

.img-advertisement[data-position='fixed'].hide-ad img {

}

.img-advertisement[data-position='fixed'].hide-ad .img-advertisement-controls .img-advertisement-controls-btn-hide,
.img-advertisement[data-position='fixed'].hide-ad .img-advertisement-content {
  display: none;
}

.img-advertisement[data-position='fixed']:not(.hide-ad) .img-advertisement-controls .img-advertisement-controls-btn-show {
display: none;
}

.img-advertisement[data-position='fixed'].hide-ad .img-advertisement-controls .img-advertisement-controls-btn-show {
display: inline-flex;
position: fixed;
bottom: 0rem;
right: 1rem;
z-index: 1;
padding: 0.75rem;
border: 2px var(--java) solid;
border-radius: 0.25rem;
background-color: var(--javaLight);
font-size: .875rem;
font-weight: 500;
}



/**********************************
  Device Orientation Buffer
***********************************/
#device-orientation-buffer {
  height: 100%;
  width: 100%;
  position: fixed;
  background: rgba(0,0,0,0.64);
  transform: translateY(0%);
  color: var(--white) !important;
  cursor: pointer;
  position: fixed;
  opacity: 0.0;
  visibility: hidden;
  z-index: -1;
}

#device-orientation-buffer {
  opacity: 0.0;
  visibility: hidden;
  z-index: -1;
  top: 0%;
  left: 0%;
}

/* (max-width: 896px)  */
@media only screen and (max-device-width: 960px) and (orientation: landscape) and (min-aspect-ratio: 13/9) {

  #device-orientation-buffer {
    opacity: 1.0;
    visibility: visible;
    z-index: 99;
    padding: 2%;
  }

  #device-orientation-buffer .section-content {
    background: var(--wildstrawberry);
    box-shadow: 0px 10px 320px var(--wildstrawberry-80) !important;
    overflow: hidden;
    cursor: default;
    flex-direction: row;
    display: flex;
    justify-content: stretch;
    align-items: center;
    border-radius: .5rem;
  }

  #device-orientation-buffer .section-content .grid-1,
  #device-orientation-buffer .section-content .grid-2 {
    justify-content: center;
    align-items: center;
    width: 60%;
  }

  #device-orientation-buffer .section-content .grid-1 {
    width: 36%;
  }

  #device-orientation-buffer .img-square {
    display: inline-flex;
    width: auto;
    place-self: center;
    border: none;
    overflow: visible;
    font-size: 30vh;
    color: var(--white) !important;
    background-color: transparent !important;
  }

  #device-orientation-buffer .img-square i {
    color: var(--white) !important;
  }

  #device-orientation-buffer h2 {
    font-size: 8vw;
    color: var(--white) !important;
  }

  #device-orientation-buffer p {
    color: var(--white) !important;
    font-weight: 500;
    font-size: 2.5vw;
    line-height: 4vw;
    letter-spacing: 0.125rem;
  }
}


/**********************************
   BG Video
***********************************/

#introvidbg {
opacity: 0.2;
mix-blend-mode: overlay;/* hard-light */
position: absolute;
top: 0%;
left: 0%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: 1;
background-size: cover;
transition: 1s opacity;
object-fit: cover;
}

.stopfade {
opacity: 0.2;
}


.photon-symbol-action,
.photon-symbol-action:hover,
.photon-symbol-action:active {
position: absolute;
right: -10px;
bottom: -10px;
color: var(--ebonyclay);
user-select: none;
}

.photon-symbol-action:focus {
  outline: none;
  box-shadow: none !important;
}

/**********************************
   Floating Animation
***********************************/

@keyframes float {
	0% {
		transform: translateY(0rem);
	}
	50% {
		transform: translateY(-0.75rem);
	}
	100% {
		transform: translateY(0rem);
	}
}



/*----------------------------------------------------------------
>>> ALERT COMPONENTS:
----------------------------------------------------------------*/

.gfield_html {
position: relative;
}

.gfield_html::before:not(.info, .warning, .success) {
  content: "" !important;
}

.gfield_html.info,
.gfield_html.success,
.gfield_html.info,
.gfield_html.warning,
.woocommerce-error,
.woocommerce-info,
.woocommerce-message,
.login #login_error,
.login .message,
.login .success,
[role='alert'].error,
[role='alert'].warning,
[role='alert'].info,
[role='alert'].success,
[role='message'].error,
[role='message'].warning,
[role='message'].info,
[role='message'].success {
    padding: .75rem 2rem .75rem 2.75rem;
    margin: 0 0 .75rem;
    position: relative;
    background-color: transparent;
    color: var(--white);
    border: 2px solid transparent;
    list-style: none outside;
    width: auto;
    word-wrap: break-word;
    border-radius: 0.25rem;
    box-shadow: 0 2px 1px 0 var(--denim-30);
    align-items: flex-start;
    display: flex;
    align-items: center;
}

 .login #login_error,
 .login .message {
     display: block;
 }



[role='alert'].error,
[role='alert'].info,
[role='alert'].warning,
[role='alert'].success {
  position: fixed !important;
  z-index: 99999;
  top: -50%;
  left: 50%;
  width: min(100%, 80vw);
  transform: translateX(-50%);
}

@media only screen and (max-width: 680px){
    .gfield_html.info,
    .gfield_html.success,
    .gfield_html.info,
    .gfield_html.warning,
    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message,
    .login #login_error,
    .login .message,
    .login .success,
    [role='alert'].error,
    [role='alert'].info,
    [role='alert'].success,
    [role='message'].error,
    [role='message'].info,
    [role='message'].success {
        flex-direction: column;
    }
}

.gfield_html.info::before,
.gfield_html.success::before,
.gfield_html.info::before,
.gfield_html.warning::before,
.woocommerce-error::before,
.woocommerce-info::before,
.woocommerce-message::before,
.login #login_error::before,
.login .message::before,
.login .success::before,
[role='alert'].error:before,
[role='alert'].warning:before,
[role='alert'].info:before,
[role='alert'].success:before,
[role='message'].error:before,
[role='message'].warning:before,
[role='message'].info:before,
[role='message'].success:before {
    color: var(--white);
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    position: absolute;
    content: "😅";
}

@media only screen and (min-device-width: 680px){
    .gfield_html.info a,
    .gfield_html.success a,
    .gfield_html.info a,
    .gfield_html.warning a,
    .woocommerce-error a,
    .woocommerce-info a,
    .woocommerce-message a,
    .login #login_error a,
    .login .message a,
    .login .success a,
    [role='alert'].error a,
    [role='alert'].info a,
    [role='alert'].success a,
    [role='message'].error a,
    [role='message'].info a,
    [role='message'].success a {
        margin-left: .625rem;
        display: inline;
    }
}

.woocommerce-error,
.login #login_error,
.woocommerce-password-strength.short,
.woocommerce-password-strength.bad,
[role='alert'].error,
[role='message'].error {
    background: var(--alertError);
    border: 2px solid var(--alertErrorLight);
}

.gfield_html.info,
.woocommerce-message,
.woocommerce-info,
.login .message,
[role='alert'].info,
[role='message'].info {
    background: var(--alertInfo);
    border: 2px solid var(--alertInfoLight);
}

.gfield_html.info {
  background: var(--javaDark);
  border: 2px solid var(--javaLight);
}


.gfield_html.warning,
.woocommerce-password-strength.good,
[role='alert'].warning,
[role='message'].warning {
    background: var(--alertWarning);
    border: 2px solid var(--alertWarningLight);
}

.gfield_html.success,
.woocommerce-message,
.login .success,
.woocommerce-password-strength.strong,
[role='alert'].success,
[role='message'].success {
    background: var(--alertSuccess);
    border: 2px solid var(--alertSuccessLight);
}

.woocommerce .woocommerce-error .button,
.woocommerce .woocommerce-info .button,
.woocommerce .woocommerce-message .button,
.woocommerce-page .woocommerce-error .button,
.woocommerce-page .woocommerce-info .button,
.woocommerce-page .woocommerce-message .button {
    float: none;
    order: 2;
    margin-left: .75rem;
}

.woocommerce form .form-row.woocommerce-invalid label {
    color: var(--alertError) !important;
    background: var(--white-80);
    padding: .25rem;
    border-bottom: 4px solid var(--alertError);
}

[role='alert'] .btn-remove-alert {
display: flex;
justify-content: center;
position: absolute;
top: 0;
right: .25rem;
background: transparent;
border: none;
padding: .875rem;
color: var(--white);
}

/**********************************
   MODALS
***********************************/

/*----------------------------------------------------------------
>>> BOOSTRAP OVERRIDES
----------------------------------------------------------------*/

html.modal-open,
body.modal-open {
  overflow: hidden !important;
}

.modal-backdrop {
  z-index: 99999 !important;
}

.modal {
  z-index: 999999 !important;
}

.modal-dialog.modal-xl {
}

@media (width < 1024px) {
  .modal-dialog.modal-xl {
    max-width: 98%;
  }
}

.modal.detent {
  top: 110vh !important;
  opacity: 0 !important;
  transition: all .16s !important;
  will-change: opacity transform !important;
  animation-fill-mode: both !important;
}

.modal.detent.show {
  top: 0rem !important;
  opacity: 1 !important;
  transition: all .6s !important;
  transition-delay: .16s !important;
}

.modal-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background-color: var(--starship);
  backdrop-filter: blur(1px);
  box-shadow: 0 0.125rem 0rem var(--white-90), 0 0.25rem 0.5rem var(--white-20);
  border-bottom: 1px solid var(--java-60);
  box-shadow: inset 0px -3px 0px var(--white), inset 0px -4px 0px var(--ebonyclay-20);
}

.modal-title {
  display: inline-flex;
  flex-wrap: wrap;
  column-gap: 0.75rem;
  padding-bottom: 0rem;
  align-items: center;
  font-size: 160%;
  width: 100%;
}

.modal-title .modal-title-description {
  font-size: small;
  font-weight: normal;
  width: 100%;
  padding-left: 2rem;
  color: var(--black-50);
}

.modal-body .gf_progressbar_wrapper {
    border-bottom: 1px solid var(--java-60);
    box-shadow: inset 0px -3px 0px var(--white), inset 0px -4px 0px var(--ebonyclay-20);
    padding: 0.5rem;
    margin-bottom: 1rem;
}

#productDesignPlansConfirmationModal .img-square .iconCheckmark {
  border-radius: 100%;
  background-color: var(--alertSuccessLight);
  color: var(--white);
  font-size: 100%;
  padding: 0.5rem;
  margin: -2rem -1rem 0;
}

#productDesignPlansConfirmationModal .img-square .iconEmail {
  background-color: var(--java-40);
  padding: 0rem 0.75rem;
  border-radius: 0.5rem;
  color: var(--white);
}


/*----------------------------------------------------------------
>>> FANCYBOX OVERRIDES
----------------------------------------------------------------*/

@media (width > 676px) {
  body.admin-bar .fancybox__container {
    top: 1.75rem;
  }
}

.carousel__button svg {
  stroke: var(--white) !important;
}


/*----------------------------------------------------------------
>>> BREADCRUMBS
----------------------------------------------------------------*/

ol.breadcrumbs {
  display: inline-flex;
  list-style: none;
  font-size: .875rem;
  grid-gap: 0.5rem;
  margin: 0;
  padding: 0 0 1rem;
  white-space: nowrap;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

ol.breadcrumbs li {
  display: inline-flex;
  align-items: center;
  grid-gap: 0.5rem;
}

ol.breadcrumbs li.separator {
  font-weight: 100;
}

ol.breadcrumbs li.current {
  color: var(--ebonyclay-90);
}

ol.breadcrumbs li.current span {

}

ol.breadcrumbs a {
  display: flex;
  align-items: center;
  font-weight: 600;
}

ol.breadcrumbs a,
ol.breadcrumbs a * {
  color: var(--wildstrawberry) !important;
}

ol.breadcrumbs a:has(i[class*=icon]) {
  font-size: .925rem !important;
  color: var(--wildstrawberry);
  text-decoration: none !important;
}

ol.breadcrumbs i[class*=icon] {
  text-decoration: none !important;
}


/*----------------------------------------------------------------
>>> ARCHIVE, CATEGORY, & AUTHOR PAGES
----------------------------------------------------------------*/

.et_pb_post {
  border-radius: 1rem;
  overflow: hidden;
}


p.post-meta,
.et_pb_blog_grid .et_pb_post .post-meta {
  font-weight: 400;
  margin-bottom: .75rem;
}


/*----------------------------------------------------------------
>>> SINGLE POST PAGE
----------------------------------------------------------------*/

body.single h1.entry-title {
  font-size: clamp(2.25rem, 9vw, 2.75rem) !important;
  max-width: 98%;
}

p.et_pb_title_meta_container {
  font-size: 1rem;
  margin-bottom: 1.7rem !important;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Lists */

.et_pb_title_featured_container {
  border: 4px solid var(--java-20);
  border-radius: 1rem;
  overflow: hidden;
}

.et_pb_title_featured_container img {

}

/* Lists */

.et_pb_module > ol,
.et_pb_module > ul {
  margin-bottom: 0;
  display: grid;
  gap: .75rem;
}

.et_pb_module > ol > li:last-child > ul,
.et_pb_module > ul > li:last-child > ul {
  padding-bottom: .75rem;
}


.et-l--body ol ul,
.et-l--body ul ul {
  margin-left: 2rem;
  margin-top: .75rem;
  margin-bottom: 0rem;
  display: grid;
  gap: .75rem;
}

.et-l--body ol ul li,
.et-l--body ul ul li {
  line-height: 1.5;
  font-size: 1.125rem;
}

/* Blockquote */

.et_pb_module blockquote {
  margin: 2rem auto 2.75rem;
  padding: 4% 1.5rem;
  border-left: 5px solid var(--wildstrawberry);
  border-right: 5px solid var(--wildstrawberry);
  background: var(--starship-10);
}

.et_pb_module blockquote p {
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.5;
  padding: 0 !important;
  margin: 0 !important;
  text-align: center;
}


.et_pb_module blockquote p a {

}

/* Audio Player Controls */
.wp-playlist {
  border-radius: 1rem;
  background: var(--athensgray) !important;
  box-shadow: 0 0 0px 3px var(--java-10), 0 0 30px -1px var(--java-20);
  margin: .75rem 0 2rem !important;
}

.mejs-container * {
  font-family: 'Libre Franklin', sans-serif !important;
  color: var(--white) !important;
}

.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
  background: var(--javaDark) !important;
  border-radius: 1rem;
}

.wp-playlist-tracks {
  background: var(--starship) !important;
  border-radius: 1rem;
  padding: .125rem .25rem;
}

.wp-playlist-tracks .wp-playlist-playing {
  background: transparent !important;
}

/*----------------------------------------------------------------
>>> TAGS
----------------------------------------------------------------*/

.tags {
  font-weight: 500;
  margin: 1rem 0 0;
  padding: 1rem 0 0rem;
  /*border-top: 2px dotted var(--java-60);*/
}

.tags a:not([class]) {
  display: inline-flex;
  font-size: .75rem;
  color: var(--javaDarker) !important;
  border-radius: 1rem;
  border: 1px solid var(--java-40);
  padding: .25rem .625rem;
  background-color: var(--java-5);
  text-decoration: none;
}

.tags a:not([class]):hover {
  color: var(--javaDark) !important;
  background-color: var(--white);
  text-decoration: underline;
}