/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

:root {
    --bg-color: #26272c;
    --primary-color: #bd9a60;
    --secondary-color: #aaa;
    --accent1-color: #2F3037;
    --accent2-color: #383A41;
    --feeling-color: #60bd9a;
    --thinking-color: #6083bd;
    --gut-color: #bd6083;
    --low-color: #8b526a;
    --medium-color: #988954;
    --high-color: #528b78;
    --link-color: #ce9e4f;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6 {
  color: var(--primary-color);
}

body {
  background-color: var(--bg-color);
  color: var(--secondary-color);
}

/* mindfulness modal*/

.modal-body {
  background-color: var(--bg-color);
  margin: 0 auto;
}

.modal-header {
  padding: 0 3em;
  text-align: center;
  background: var(--bg-color);
  border: none;
}

.modal-xl {
  max-height: calc(100vw*.9);
}

.mindfulness-map {
  display: flex;
  /* flex-wrap: wrap; */
  max-width: 510px;
  max-height: 100px;
  justify-items: center;
  justify-content: space-evenly;
  text-align: center;
  margin: 10vh auto;
  cursor: pointer;
  background-color: var(--accent1-color);
  transition: box-shadow 0.25s, transform 0.25s;
  /* border: 1px solid var(--primary-color); */
}

.mindfulness-map:hover {
    box-shadow: 0 0.5em 0.8em -0.4em #f09f1a;
    transform: translateY(-0.25em);
    color: var(--secondary-color);
}

.mindfulness-map img {
  margin: 1em;
  max-height: 40px;
  width: auto;
}

.mindfulness-map-img {
  order: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.mindfulness-map-txt {
  display: flex;
  order: 2;
  align-items: center;
}

.mindfulness-map-txt h4 {
  margin: 1em;
  font-size: 1.25rem;
}

@media screen and (max-width: 453px) {
  /* .modal-header h2 {
    font-size: 1.6em;
  } */

  .modal-header {
    padding: 0 1.5em;
  }
}


/* end mindfulness modal */

/* bootstrap customizations */

.btn-close:focus {
  box-shadow: 0 0 0 0.25rem rgba(189, 154, 96, 0.25);
}

/* end bootstrap customizations */

.home-category {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.mindfulness-bg-img {
  background-image: url("/staging/img/autumn-morning-in-the-forest-2021-09-03-02-32-10-utc.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 10px 30px var(--bg-color) inset;
}

.meditation-bg-img {
  background-image: url("/staging/img/view-from-the-albion-basin-valley-floor-to-the-wa-2021-08-28-13-39-33-utc.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 10px 30px var(--bg-color) inset;
}

.being-knowing-bg-img {
  background-image: url("/staging/img/cloud-2021-08-29-11-19-22-utc.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 10px 30px var(--bg-color) inset;
}

.sanctuary-bg-img {
  background-image: url("/staging/img/the-first-rays-of-the-rising-sun-2021-08-26-19-00-28-utc.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  box-shadow: 0 0 10px 30px var(--bg-color) inset;
}

.row .home-category {
  padding: 0 40px;
  margin: 0;
}


@media screen and (min-width: 992px) {
  .mg-l-60 {
    margin-left: 60px;
  }
}

.flex-nowrap {
  flex-wrap: nowrap;
  flex-shrink: 1;
}

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

.menu-link {
  color: var(--primary-color);
  text-transform: none;
  font-size: 1.25rem;
  font-weight: 400;
}

.sub-menu-container .menu-item > .menu-link {
  color: var(--primary-color);
  font-size: .95rem;
  font-weight: 400;
  font-family: 'Open Sans', sans-serif;
}

.sub-menu-container .menu-item:hover > .menu-link {
	font-weight: 400;
}

.menu-item .sub-menu-trigger {
  color: var(--primary-color);
}

.menu-item .sub-menu-trigger:hover {
  color: var(--secondary-color);
}

/* hamburger menu svg */

.svg-trigger path {
  stroke: var(--primary-color);
}

#header {
  /* border-bottom: 1px solid var(--accent1-color); */
  border-bottom: none;
}

#header-wrap {
  background-color: var(--bg-color);
}

.menu-item:not(:first-child) {
  border-top: 1px solid var(--accent1-color);
}

.sub-menu-container .menu-item:not(:first-child) {
  border-top: 1px solid var(--accent1-color);
}

.sub-menu-container, .mega-menu-content {
  border-top: 1px solid var(--accent1-color);
}

  .side-header #logo img {
    max-width: 200px;
  }


@media (min-width: 992px) {

  .block-nav-header-3.side-header.open-header #header-trigger {
    --widget-width: 260px;
    top: 0;
    left: 0;
    width: 60px;
    height: 100%;
    line-height: normal;
    border-radius: 0;
    align-items: center;
    justify-content: center;
    /* font-size: 24px; */
    /* color: var(--accent1-color); */
    background-color: #4a4c56;
    /* border-right: 1px solid var(--primary-color); */
  }

  .block-nav-header-3.side-header.open-header.side-header-open #header-trigger {
    left: var(--widget-width, 260px);
  }

  .block-nav-header-3.side-header.side-header-right.open-header #header-trigger {
    right: 0;
  }

  .block-nav-header-3.side-header.side-header-right.open-header.side-header-open #header-trigger {
    right: var(--widget-width, 260px);
  }

  .side-header #header {
    background-color: var(--accent1-color);
  }

  .block-nav-header-3 #header-trigger .svg-trigger {
    width: 40px;
    height: 40px;
  }

  .block-nav-header-3.side-header-open #header-trigger .svg-trigger {
    transform: rotate(45deg);
  }

  .block-nav-header-3.side-header-open #header-trigger .svg-trigger path:nth-child(1),
  .block-nav-header-3.side-header-open #header-trigger .svg-trigger path:nth-child(3) {
    stroke-dashoffset: -64px;
  }

  .block-nav-header-3.side-header-open #header-trigger .svg-trigger path:nth-child(2) {
    transform: rotate(90deg);
  }

  .side-header .menu-link {
    text-transform: none;
  }
}

@media screen and (max-width: 974px) {
  .svg-trigger path {
  stroke: var(--primary-color);
  }
}