:root {


}

/* hide recaptcha badge */
.grecaptcha-badge { visibility: hidden; }

body {
  margin: 0;
  font-family: "Gill Sans Light", arial;
}
.arial {
  font-family: arial;
}
body a {
  text-decoration: none;
}
body a:visited {
  text-decoration: none;
}
.customer-booking-body {
  background-color: #f8f4f1;
}
select {
  -webkit-appearance:none;
  /* Add paddings to accommodate arrow */
  padding: 8px;
  padding-right: 30px;
  
  /* Add arrow icon */
  /* Source: https://material.io/tools/icons/?icon=keyboard_arrow_down&style=baseline */
  background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');
  background-position: center right;
  background-repeat: no-repeat;
}
.no-scrollbar {
  overflow-x: scroll; /* Allows horizontal scrolling */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}
.no-scrollbar::-webkit-scrollbar {
  display: none; /* Hide scrollbar for Chrome, Safari, and WebKit-based browsers */
}
.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

.z-index-20 {
 z-index: 20;
}
.pos-relative {
  position: relative;
}
.relative {
  position: relative;
}
/* Custom checkbox The container */
.check_container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.bg-calendar-icon {
  background-image: url('../svg/calendar.svg');
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 20px 35px;
  cursor: pointer;
  padding: 9px;
  box-sizing: border-box;
  background-position: center right;
}

/* Hide the browser's default checkbox */
.check_container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #efefef;
  border: 1px solid #444;
}

/* When the checkbox is checked, add a blue background */
.check_container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check_container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check_container .checkmark:after {
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* required for fade_block() */

/* */
.transform-scale-1-2 {
  transform: scale(1.2)
}
.transform-scale-1-3 {
  transform: scale(1.3)
}
.transform-scale-1-4 {
  transform: scale(1.4)
}
.transform-scale-1-5 {
  transform: scale(1.5)
}
.opacity-0 {
  opacity: 0;
}
.layer-fade-in {
  opacity: 1;
  transition: 1s;
}

.display-block {
  display: block;
}
.display-inline-block {
  display: inline-block;
}
.display-flex {
  display: flex;
}
.display-none {
  display: none;
}
.scroll-auto {
  overflow: auto;
}
.scroll-hidden {
  overflow: hidden;
}

.button-notice-box {
  padding: 10px;
  border: 1px solid #ccc;
  background-color: floralwhite;
}

.TC-box {
  margin: 20px auto;
  line-height: 1.4;
  overflow: auto;
}
.TC-box > ul {
margin: 10px auto;
}
TC-box > ul > li {
  margin: 5px 0px 5px 10px;
  list-style-type: disc;
}
.TC-box > div {
  margin: 10px auto;
}
.tc-sub-title {
  margin: 10px 0px;
  text-decoration: underline;
}
.arrow-down-bar {
  padding-bottom: 10px;
  padding-right: 30px;
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-down-black {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-up-black {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/up-arrow.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-down-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/down-arrow-white.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-right-arrow-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow-white.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-right-arrow-black {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/right-arrow.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.bg-arrow-up-white {
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/up-arrow-white.svg);
  background-position: center right 20px;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}
.arrow-up-bar {
  padding-bottom: 10px;
  padding-right: 30px;
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/up-arrow.svg);
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 15px 15px;
  background-origin: content-box;
  cursor: pointer;
}

 @keyframes popup {
  0% {
    opactiy: 0;
    }
  50% {
    opacity: 0.5;
    }
  100% {
    opacity: 1;
    }
  }
@keyframes fade {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
    height: 0;
    font-size: 0;
    line-height: 0;
    display: block;
  }
  100% {
    opacity: 1;
    font-size: auto;
    line-height: 1;
    height: 100%;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes slideDown{
  0% {
    transform: translateY(-50%) scaleY(0);
   /* transform: scaleY(0); */
    max-height: 0;
    opacity: 0;
  }
  60% {
     opacity: 0;
  }
  100% {
    transform: translateY(0) scaleY(1);
/*    transform: scaleY(1); */
    max-height: 620px; 
    opacity: 1;
  }
}

@keyframes slideUp{
  0% {
    opacity: 1;
    max-height: 800px;
    transform: scaleY(1);
    transform: translateY(0);
/*    transform: scaleY(1); */
  }
  50% {
    opacity: 0;
    transform: scaleY(0.5);
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%) scaleY(0);
/*    transform: scaleY(0); */
    max-height: 0px;
    opacity: 0;
  }
}


@keyframes appear-delay {
  0% { opacity: 0; height: 0; line-height: 0;}
  20% {opacity: 0.2; height: 20%; line-height: 0.2; ease-in}
  40% {opacity: 0.4; height: 40%; line-height: 0.4; ease-in}
  60% {opacity: 0.6; height: 60%; line-height: 0.6; ease-in} 
  80% {opacity: 0.8; height: 80%; line-height: 0.8; ease-in}
  100% {opacity: 1; height: 100%; line-height: 1; ease-in}
}

@keyframes disappear {
  0% { opacity: 1;}
  100% {opacity: 0; ease}
}

@keyframes appear {
  0% { opacity: 0; height: 0; line-height: 0;}
  50% {opacity: 0; height: 100%; line-height: 1;}
  100% {opacity: 1;}
}
.book-index-bgimg {
  width: 100vw;
  height: 85vh;
}
.book-index-body-bgimg {
  width: 100%;
  height: 100%;
  background-image: url(../jpg/daphne_beach_warrior_flipped_20240821124730.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.height-85vh {
  height: 85vh;
}
.logo-bar {
  box-sizing: border-box;
  height: 120px;
  background-size: 210px;
/*  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/samahita_booking.svg); */
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/samahita-logo-blue-edit.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.7);
}
.open-button-br {
  position: absolute;
  top: 40px; 
  right: 35px; 
  left: auto;
  cursor: pointer;
  border: none;
 }


.booking-start-button {
  background-color: #0f6d70;
  border: 2px solid white;
  color: #fff;
}
.book-text-parent {
  height: 85vh;
}
.book-index-container {
  display: flex;
  margin-top: 10vh;
}
.book-app-bg {
  background-image: url(../jpg/drone-sky-top.jpg);
  background-position: center;
  background-repeat: no-repeat;
}
.book-index-text {
  font-size: 18px;
  min-height: 200px;
  line-height: 1.7;
  padding: 20px;
  border-radius: 20px;
  box-sizing: border-box;
  background: rgb(255,255,255);
  background: rgba(255,255,255,0.85);
}
.book-index-start {
  min-height: 200px;
}
.book-complete-txt {
  line-height: 1.8;
  min-height: 300px;
  padding: 20px; 
}

@media only screen and (min-width: 800px) {
  .m100pc-ipd-50pc {
    width: 50%;
  }
  .m100pc-ipd-auto {
    width: auto;
  }
  .flex-video-box {
    width: 600px;
    height: 350px;
  }
  .m-95-ipd-300px {
    width: 300px;
  }
  .m-95vw-ip-300px-d-400px {
    width: 400px;
  }
  .m-95vw-ip-350px-d-500px {
    width: 500px;
  }
  .m-95-ip-500-700-d-900 {
    width: 700px;
  }
  .m-100-ip-500-700-d-900 {
    width: 700px;
  }
  .ip-d-500px {
    width: 500px;
  }
  .book-index-bgimg {
    background-image: url(../jpg/drone-sky-top.jpg);
  }
  .book-index-container {
  }
  .book-index-text {
    width: 40vw;
    font-size: 20px;
    margin: auto;
  }
  .booking-start-button {
    width: 300px;
  }
  .book-index-start {
  }
  .book-complete-txt {
    width: 600px;
  }
}
/* phone screen landscape */
@media only screen and (max-height: 540px) {
  .logo-bar {
    height: 120px;
  }
  .book-text-parent {
    height: 600px;
  }
  .book-index-text {
    font-size: 18px;
  }
}

@media only screen and (min-width: 601px) and (max-width: 799px){
  .large-scroll-box-height {
    height: 500px;
  }
  .medium-scroll-box-height {
    height: 800px;
  }
  .m100pc-ipd-50pc {
    width: 50%;
  }
  .m100pc-ipd-auto {
    width: auto;
  }
  .flex-video-box {
    width: 500px;
    height: 280px;
  }
  .m-95-ipd-300px {
    width: 300px;
  }
  .m-95vw-ip-350px-d-500px {
    width: 350px;
  }
  .m-95vw-ip-300px-d-400px {
    width: 300px;
  }
  .m-95-ip-500-700-d-900 {
    width: 500px;
  }
  .m-100-ip-500-700-d-900 {
    width: 500px;
  }
  .ip-d-500px {
    width: 500px;
  }
  .book-index-bgimg {
    background-image: url(../jpg/drone-sky-top.jpg);
  }
  .book-index-container {
    margin-top: 30vh;
  }
  .book-index-text {
    width: 70vw;
    margin: auto;
    font-size: 20px;
  }
  .booking-start-button {
    width: 300px;
  }
  .book-index-start {
  }
  .book-complete-txt {
    width: 500px;
    font-size: 22px;
  }
}
@media only screen and (max-width: 600px) {
  .logo-bar {
    background-size: 190px;
    background-position: left 30px center;
    height: 120px;
  }
  .m-width-95pc {
    width: 95%;
  }
  .m100pc-ipd-50pc {
    width: 100%;
  }
  .m100pc-ipd-auto {
    width: 100%;
  }
  .flex-video-box {
    width: 95%;
    height: 125px;
  }
  .m-95-ipd-300px {
    width: 95%;
  }
  .m-95vw-ip-300px-d-400px {
    width: 100%;
  }
  .m-95vw-ip-350px-d-500px {
    width: 100%;
    overflow: scroll;
  }
  .m-95-ip-500-700-d-900 {
    width: 95%;
  }
  .m-100-ip-500-700-d-900 {
    width: 100%;
  }
  .m-max-height-500 {
    max-height: 500px;
  }
  .m-max-height-600 {
    max-height: 600px;
  }
  .book-index-bgimg {
    background-image: url(../jpg/drone-sky-top.jpg);
  }
  .book-index-text {
    width: 80vw;
    font-size: 17px;
    margin: 50px auto 0px;
  }
  .booking-start-button {
    width: 80vw;
  }
  .book-index-start {
    margin-top: 15px;
  }
  .book-complete-txt {
    width: 95%;
    font-size: 20px;
  }
}
.make-popup {
  background-color: #fff;
  z-index: 1100;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  padding: 20px;
  min-width: 300px;
}
.cookie-popup {
  background-color: #fff;
  z-index: 1100;
  position: fixed;
  top: 100%;
  transform: translate(0,-110px);
  left: 10px;
  font-size: 14px;
}
@media only screen and (max-width: 600px) {
  .cookie-popup {
    font-size: 12px;
    transform: translate(0,-100px);
  }
}
.make-popup-box {
  width: 250px;
  min-height: 400px;
  padding: 20px;
  margin-top: 50px;
}
.room-intro-list {

  list-style-type: disc;
  font-size: 14px;
  margin-left: 10px;
  padding-left: 10px;

}
.room-description-list {
  list-style-type: circle;
  font-size: 14px;
  margin: 0;
  padding-left: 10px;
}
.room-description-list > li {
  font-size: 14px;
  padding: 5px 0px;
}
.errorlist {
  margin: 0;
  color: red;
 }
 .red-border {
  border: 1px solid red;
 }
.get-prog-info {
  border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%;
  padding: 7px;
  font-size: 14px;
  font-weight: bold;
  width: 10px;
  height: 10px;
  background-color: #fff;
  position: relative;
  top: 10px;
  left: 10px;
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.error {
  color: red;
  background-color: #fff;
  font-size: 20px;
  text-align: center;
  margin: 10px auto;
  padding: 10px;
  width: 50vw;
  border-radius: 5px;
 }  
.top-bar {
  margin-left: 0;
 }
.logo-title {
  background-size: 200px;
  background-image: url(https://samahita-media.ams3.cdn.digitaloceanspaces.com/media/svg/samahita-international-white-horiz.svg);
  background-position: center; 
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  font-size: 28px;
  font-family: serif;
  letter-spacing: 2px;
  height: 100px;
  line-height: 2.5;
}
.logo-title a {
  text-decoration: none;
  color: #fff;
}
.logo-title a:visited {
  text-decoration: none;
  color: #fff;
}
@media only screen and (max-width: 600px) {
 .logo-title {
   padding-left: 20px;
   font-size: 18px;
   line-height: 3.8;
 }
}
.side-menu {
  width: 200px;
  height: 100%;
  background-color: #000;
  color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  padding-left: 0;
}
.side-menu ul {
  list-style-type: none;
  margin-top: 200px;
  margin-left: 15px;
}
.side-menu li {
  padding: 0 0 15px 5px;
  font-size: 18px;
}
.side-menu a {
  color: #fff;
  text-decoration: none;
}
.side-menu a:visited {
  color: #fff;
  text-decoration: none;
}
.float-none {
  float: none;
}
.float-right {
  float: right;
}
.float-left {
  float: left;
}
/* Popups  */
.floating-div {
  background-color: #fff;
  position: absolute;
  z-index: 1001;
  animation-name: popup;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
  box-shadow: 7px 7px 30px #222;
 }
section {
  background-color: #fff;
  position: fixed;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  animation-name: popup;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
  box-shadow: 5px 5px 15px #666666;
  min-height: 250px;
  max-height: 580px;
  overflow: auto;
  padding-bottom: 20px;
 }
 .popup-message {
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  font-size: 24pt;
  color: #000;
  text-align: center;
 }
  .popup-message a {
   text-decoration: none;
   color: #000;
   font-weight: bold;
 }
 .popup-message a:visited {
  text-decoration: none;
  color: #000;
  font-weight: bold;
 }
 .popup-close {
  font-size: 20pt;
  color: #000;
  float: right;
  padding: 5px 15px 5px 5px;
 }
.addon-img {
  width: 180px;
  height: 180px;
  margin: auto;
  border-radius: 50%;
  opacity: 0.9;
}
.addon-select-box {
  width: 100%;
  text-align: center;
  margin: 10px auto 20px;
}
.addon-choices {
  width: 180px;
  float: none;
  background-color: #90A8A8;
  color: #fff;
  margin: 8px auto;
  border: none;
  padding: 8px;
  text-align: center;
}
/* end popups */

.centered-container {
  position: absolute;
  margin-top: 0;
  left: 50%;
  top: 50%;  
  transform: translate(-50%, -50%);
}
.hero-container {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
}
.hero-content {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  text-align: center;
}
.hero-title {
  color: #fff;
  width: 100%;
  font-size: 35px;
  letter-spacing: 2px;
  text-shadow: 1px 2px 3px #333;
}
/* room selection form */
.room-selection-container {
  min-height: 500px;
  animation-name: fade;
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
}
.room-form-row {
  display: flex;
  margin-top: 10px;
  animation-name: fade;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-play-state: running;
  opacity: 0.1;
}
.room-description {
  display: none;
  height: 0;
  opacity: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-play-state: paused;
}
.room-image {
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.room-form-cell {
  box-sizing: border-box;
  text-align: center
}
.cell-selected {
  background-color: #f3928c;
  color: #fff;
}
.cell-selected > div {
  color: #fff;
}
@media only screen and (max-width: 800px) {  
  .room-form-box {
    width: 100vw;
    margin: 40px auto 10px auto;
  }
  .room-form-cell {
    width: 50vw;
    height: 50vw;
    font-size: 18px;
  }
 .ttl {
    padding: 3px 0;
  }
}
@media only screen and (min-width: 700px) {
  .room-form-cell {
    font-size: 22px;
  }
   .ttl {
    font-size: 24px;
    padding: 4px 0;
  }
}
@media only screen and (min-width: 801px) and (max-width: 999px) {
  .large-scroll-box-height {
    height: 550px;
  }
  .medium-scroll-box-height {
    height: 800px;
  }
}
@media only screen and (min-width: 801px) {
  .room-form-box {
    width: 600px;
    margin: 40px auto 10px auto;
  } 
  .room-form-cell {
    width: 300px;
    height: 300px;
    font-size: 22px;
  }
   .ttl {
    font-size: 22px;
    padding: 5px 0;
  }
}
/* end room selction form */
/* summary box */
.summary-table {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.summary-title {
  text-align: center;
  padding: 10px 0;
  margin: 0 0 10px 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.span-title {
  text-align: center;
  padding: 25px 0;
}
.span-title-thin {
  text-align: center;
  padding: 15px 0;
}
.sum-row {
  padding: 7px 3px;
  display: flex;
  flex-wrap: norap;
}
.sum-cell {
  text-align: left;
  padding: 2px;
}
/* end summary box */
.add-program-box {
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  margin: 30px auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.add-program-container select {
  border: 2px solid #f3928c;
  border-radius: 25px;
  padding: 16px;
}
.add-program-container {
  display: flex;
}

@media only screen and (min-width: 800px) {
  .add-program-box {
    width: 250px;
    height: 250px;
  }
  .addon-select {
    width: 250px;
  }
}
@media only screen and (max-width: 798px) {
  .add-program-box {
    width: 210px;
    height: 210px;
  }
  .addon-select {
    width: 210px;
  }
}
@media only screen and (max-width: 700px) {
  .add-program-container {
    flex-wrap: wrap;
  }
  .add-program-box {
    width: 70vw;
    height: 70vw;
  }
  .addon-select {
    width: 70vw;
  }
}
.container-100 {
  width: 100%;
}
.para {
  margin: 40px auto;
  text-align: center;
  width: 500px;
}
@media only screen and (max-width: 800px) {
  .para {
    width: 80vw;
  }
}
.circle {
  border-radius: 50%;
    -moz-border-radius: 50%;
}
.border-box {
  box-sizing: border-box;
}
.wid-3rd {
  width: 33.33%;
}
.wid-2-3rd {
  width: 66.66%;
}
.wid-25pc {
  width: 25%;
}
.wid-10pc {
  width: 10%;
}
.wid-50pc {
  width: 50%;
}
.wid-75pc {
  width: 75%;
}
.wid-100pc {
  width: 100%;
}
.wid-50px {
  width: 50px;
}
.wid-75px {
  width: 75px;
}
.wid-100px {
  width: 100px;
}
.wid-150px {
  width: 150px;
}
.wid-175px {
  width: 175px;
}
@media only screen and (max-width: 700px) {
  .summary-table {
    width: 90vw;
  }
  .sum-cell {
    padding-left: 5px;
  }
}
@media only screen and (min-width: 701px) {
  .summary-table {
    width: 600px;
  }
  .sum-cell {
    padding-left: 30px;
  }
}
.hgt-400 {
  height: 400px;
}
.br-word {
  overflow-wrap: break-word;
}
.pointer {
  cursor: pointer;
}
.flex-container {
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: wrap;
}
.flex-scroll-container {
  display: flex;
  overflow: auto;
}
.flex-no-wr {
  display: flex;
  flex-wrap: nowrap;
}
.grid {
  display: grid;
}
.flex {
  display: flex;
  flex-wrap: wrap;
}
.justify-sa {
  justify-content: space-around;
}
.justify-sb {
  justify-content: space-between;
}
/* required for printing */
.display-flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.simple-flex-container {
  display: flex;
}
.item-box {
  width: 50vw;
  height: 50vw;
}
.round-corn-10 {
  border-radius: 10px;
}
.round-corn-20 {
  border-radius: 20px;
}
.round-10 {
  border-radius: 10px;
}
.round-20 {
  border-radius: 20px;
}
.round-25 {
  border-radius: 25px;
}
.round-30 {
  border-radius: 30px;
}
.round-40 {
  border-radius: 40px;
}
.bord-tlr-20 {
  border-top-left-radius: 20px;
}
.bord-trr-20 {
  border-top-right-radius: 20px;
}
.bord-blr-20 {
  border-bottom-left-radius: 20px;
}
.bord-brr-20 {
  border-bottom-right-radius: 20px;
}
.round-top-40 {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
.box-shad-none {
  box-shadow: 0px;
}
.box-shad {
  box-shadow: 2px 2px 8px #989898; 
}
.box-shad-444 {
   box-shadow: 2px 2px 8px #444;
}
.box-shad-1-ef {
   box-shadow: 1px 1px 8px #efefef;
}
.box-shad-1-de {
   box-shadow: 1px 1px 8px #dedede;
}
.box-shad-1 {
  box-shadow: 1px 1px 6px #989898;
}
.box-shad-right-bottom {
  box-shadow: 2px 3px 8px #989898;
}
.box-shad-right-bottom-1 {
  box-shadow: 1px 2px 6px #ccc;
}
.bord-radius-0 {
  border-radius: 0;
}
.bord-tp-gry {
  border-top: 1px solid #ccc;
}
.bord-bot-gry {
  border-bottom: 1px solid #989898;
}
.bord-ver-ccc {
  border-top:  1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.txt-al-rt {
  text-align: right;
  padding-right: 30px;
}
.uppercase {
  text-transform: uppercase;
}
.underline-98  {
  text-decoration: underline;
  text-decoration-color: #989898;
}
/* book retreatbox */
.retreat-container {
   margin-left: auto;
   margin-right: auto;
   padding: 10px 0; 
}
.retreat-card {
  background-color: #fff;
  box-shadow: 2px 2px 10px #444;
  margin: 10px;
  border-radius: 5px;
}
.retreat-card-row {
  display: flex;
  flex-wrap: nowrap;
  border-radius: 5px;
}
.retreat-card-section {
  border-radius: 5px;
  padding: 0 5px;
}
.transp {
  opacity: 0.7;
}
.retreat-title {
  padding: 10px 5px;
  text-align: center;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  min-height: 15vw;
}
.name-box {
  height: 11vw;
}
.date-box {
  height: 11vw;
} 
.sub-title {
  margin: 30px auto;
  text-align: center;
 }
@media only screen and (max-width: 600px) {
  .sub-title {
    width: 250px;
  }
  .retreat-container {
    width: 90%;
  }
  .retreat-card-row {
    height: 43vw;
  }
  .retreat-title {
  }
 .retreat-card-section {
   width: 43vw;
   height: 43vw;
 }
  .name-box {
  height: 22vw;
 }
  .date-box {
    height: 22vw;
 }
}
@media only screen and (min-width: 601px) {
  .sub-title {
    width: 300px;
  }
  .retreat-card {
  }
  .retreat-card-row {
    height: 22vw;
  }
  .retreat-title {
    width: 45vw;
  }
 .retreat-card-section {
   width: 22vw;
   height: 22vw;
 }
}

@media only screen and (min-width: 1201px) {
.large-scroll-box-height {
    height: 550px;
  }
 .medium-scroll-box-height {
    height: 600px;
  }
}
@media only screen and (min-width: 1000px) and (max-width: 1200px) {
  .large-scroll-box-height {
    height: 550px;
  }
  .medium-scroll-box-height {
    height: 650px;
  }
}
@media only screen and (min-width: 1000px) {

 .prog-container {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   padding: 20px 0;
 }
  .m-95-ip-500-700-d-900 {
    width: 900px;
  }
  .m-100-ip-500-700-d-900 {
    width: 900px;
  }
  .retreat-title {
    width: 330px;
  }
 .retreat-conainer {
 }
  .retreat-card-row {
    height: 150px;
  }

  .retreat-card {
    width: 330px;
  }
 .retreat-card-section {
   width: 330px;
   height: 150px;
 }
  .name-box {
    width: 150px;
    height: 75px;
  }
  .date-box {
    width: 150px;
    height: 75px;
  }
}
.bgimg-cen {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cen-txt {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
/* dead center within parent */
.center { 
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.cen-vert {
  position: relative;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.cen-horiz {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.lft-txt {
  text-align: left;
}
.shad-txt {
  text-shadow: 1px 2px 3px #333;
 }
.select-box-center {
  position: relative;
  padding: 10px;
  margin: 10px;
  border-radius: 10px;
  box-shadow: 3px 3px 7px #537575;
  cursor: pointer;
  text-align: center;
}
.select-box-center:hover {
  box-shadow: 3px 3px 7px #537575 inset;
}

.select-box-title {
  color: #fff;
  line-height: 1.5;
  font-family: arial;
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.rec-display-box {
  width: 100%;
  height: 250px;
}
.display-inner-box-txt {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
}
.display-inner-box-img {
  position: relative;
  top: 50%;
  left: 50%;
  text-align: center;
  transform: translate(-50%, -50%);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 250px;
}
.hide {
  display: none;
}
.show {
  display: block;
}
.flx-marg-auto {
  margin-left: auto;
  margin-right: auto;
}
.mar-lr-auto {
  margin-left: auto;
  margin-right: auto;
}
.mar-h-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mar-0 {
  margin: 0;
}
.mar-0-auto {
  margin: 0 auto;
}
.mar-top-0 {
  margin-top: 0;
}
.mar-top-5 {
  margin-top: 5px;
}
.mar-top-6 {
  margin-top: 6px;
}
.mar-top-7 {
  margin-top: 7px;
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-25 {
  margin-top: 25px;
}
.mar-top-30 {
  margin-top: 30px;
}
.mar-top-35 {
  margin-top: 35px;
}
.mar-top-40 {
  margin-top: 40px;
}
.mar-top-60 {
  margin-top: 60px;
}
.mar-top-70 {
  margin-top: 70px;
}

.mar-top-80 {
  margin-top: 80px;
}
.mar-top_100 {
  margin-top: 100px;
}
.mar-top-bot-0 {
  margin-top: 0;
  margin-bottom: 0;
}
.mar-top-auto: {
  margin-top: auto;
}
.mar-top-0 {
  margin-top: 0px;
}
.mar-bot-0 {
  margin-bottom: 0px;
}
.mar-bot-auto {
  margin-bottom: auto;
}
.mar-auto {
  margin: auto;
}
.mar-ver-auto {
  margin-top: auto;
  margin-bottom: auto;
}
.mar-60-auto {
  margin: 60px auto;
}
.mar-0 {
  margin: 0;
}
.mar-5 {
  margin: 5px;
}
.mar-5-20 {
  margin: 5px 20px;
}
.mar-10 {
  margin: 10px;
}
.mar-10-auto {
  margin: 10px auto;
}
.mar-15 {
  margin: 15px;
}
.mar-20 {
  margin: 20px;
}
.mar-30 {
  margin: 30px;
}
.mar-40 {
  margin: 40px;
}
.mar-50-0 {
  margin: 50px 0;
}
.mar-left-0 {
  margin-left: 0;
}
.mar-left-5 {
  margin-left: 5px;
}
.mar-left-10 {
  margin-left: 10px;
}
.mar-left-20 {
  margin-left: 20px;
}
.mar-left-30 {
 margin-left: 30px;
}
.mar-left-40 {
 margin-left: 40px;
}
.mar-left-50 {
 margin-left: 50px;
}
.mar-left-60 {
 margin-left: 60px;
}
.mar-left-70 {
 margin-left: 70px;
}
.mar-left-80 {
 margin-left: 80px;
}
.mar-right-20 {
  margin-right: 20px;
}
.mar-right-25 {
  margin-right: 25px;
}
.mar-h-5 {
  margin-left: 5px;
  margin-right: 5px;
}
.mar-h-6 {
  margin-left: 6px;
  margin-right: 6px;
}
.mar-h-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.mar-h-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mar-h-30 {
  margin-left: 30px;
  margin-right: 30px;
}
.mar-h-40 {
  margin-left: 40px;
  margin-right: 40px;
}
.mar-hor-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.mar-30-0 {
  margin: 30px 0;
}
.mar-right-0 {
  margin-right: 0px;
}
.mar-40-auto-0 {
  margin: 40px auto 0;
}
.letter-spacing-1 {
  letter-spacing: 1px;
}
.letter-spacing-1-2 {
  letter-spacing: 1.2px;
}
.letter-spacing-1-5 {
  letter-spacing: 1.5px;
}
.letter-spacing-2 {
  letter-spacing: 2px;
}
.letter-spacing-2-5 {
  letter-spacing: 2.5px;
}
.sq {
  width: 200px;
  height: 200px;
  margin: 10px;
  border-radius: 5px;
}
.rect {
  width: 200px;
  height: 100px; 
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-15 {
  margin-top: 15px;
}
.mar-top-18 {
  margin-top: 18px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-30 {
  margin-top: 30px;
}
.mar-top-40 {
  margin-top: 40px;
}
.mar-top-50 {
  margin-top: 50px;
}
.mar-0 {
  margin: 0;
}
.mar-ver-5 {
  margin-top: 5px;
  margin-bottom: 5px;
}
.mar-ver-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mar-ver-15 {
  margin-top: 15px;
  margin-bottom: 15px;
}
.mar-ver-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mar-ver-30 {
  margin-top: 30px;
  margin-bottom: 30px;
}
.mar-ver-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.mar-bot-0 {
  margin-bottom: 0;
}
.mar-bot-5 {
  margin-bottom: 5px;
}
.mar-bot-10 {
  margin-bottom: 10px;
}
.mar-bot-20 {
  margin-bottom: 20px;
}
.mar-bot-30 {
  margin-bottom: 30px;
}
.mar-bot-40 {
  margin-bottom: 40px;
}
.mar-bot-50 {
  margin-bottom: 50px;
}
.mar-bot-100 {
  margin-bottom: 100px;
}
.mar-top-0 {
  margin-top: 0;
}
.mar-bot-0 {
  margin-bottom: 0;
}
.mar-top-5 {
  margin-top: 5px;
}
.mar-top-10 {
  margin-top: 10px;
}
.mar-top-20 {
  margin-top: 20px;
}
.mar-top-30 {
  margin-top: 30px;
}
.mar-top-40 {
  margin-top: 40px;
}
.mar-top-50 {
  margin-top: 50px;
}
.mar-right-0 {
  margin-right: 0;
}
.mar-right-5 {
  margin-right: 5px;
}
.mar-right-10 {
  margin-right: 10px;
}
. mar-right-20 {
  margin-right: 20px;
}

.mar-right-auto {
  margin-right: auto;
}
.mar-left-auto {
  margin-left: auto;
}
.mar-0-auto-0-0 {
  margin: 0 auto 0 0;
}
.mar-40-auto-0 {
  margin: 40px auto 0;
}
.max-width-100 {
  max-width: 100px;
}
.max-width-120 {
  max-width: 120px;
}
.max-width-215 {
  max-width: 215px;
}
.max-width-300 {
  max-width: 300px;
}
.max-width-350 {
  max-width: 350px;
}
.max-width-400 {
  max-width: 400px;
}
.max-width-450 {
  max-width: 450px;
}
.max-width-500 {
  max-width: 500px;
}
.max-width-600 {
  max-width: 600px;
}
.max-width-700 {
  max-width: 700px;
}
.max-width-800 {
  max-width: 800px;
}
.max-width-1000 {
  max-width: 1000px;
}
.max-width-1200 {
  max-width: 1200px;
}
.max-width-1500 {
  max-width: 1500px;
}
.max-height-100 {
  max-height: 100px;
}
.max-height-120 {
  max-height: 120px;
}
.max-height-130 {
  max-height: 130px;
}
.max-height-140 {
  max-height: 140px;
}
.max-height-400 {
   max-height: 400px;
}
.max-height-450 {
   max-height: 450px;
}
.max-height-500 {
  max-height: 500px;
}
.width-auto {
  width: auto;
}
.min-width-100 {
  min-width: 100px;
}
.min-width-120 {
  min-width: 120px;
}
.min-width-130 {
  min-width: 130px;
}
.min-width-140 {
  min-width: 140px;
}
.min-width-150 {
  min-width: 150px;
}
.min-width-160 {
  min-width: 160px;
}
.min-width-180 {
  min-width: 180px;
}
.min-width-200 {
  min-width: 200px;
}
.min-width-280 {
  min-width: 280px;
}
.min-width-300 {
  min-width: 300px;
}
.width-215 {
  width: 215px;
}
.width-250 {
  width: 250px;
}
.width-280 {
  width: 280px;
}
.width-180 {
  width: 180px;
}
.width-200 {
  width: 200px;
}
.width-300 {
  width: 300px;
}
.width-350 {
  width: 350px;
}
.width-500 {
  width: 500px;
}
.pad-h-5 {
  padding-left: 5px;
  padding-right: 5px;
}
.pad-h-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.pad-h-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.pad-h-15 {
  padding-left: 15px;
  padding-right: 15px;
}
.pad-h-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.pad-h-30 {
  padding-left: 30px;
  padding-right: 30px;
}
.pad-h-40 {
  padding-left: 40px;
  padding-right: 40px;
}
.pad-h-b-20 {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
}
.pad-h-b-30 {
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 30px;
}
.pad-left-5 {
  padding-left: 5px;
}
.pad-left-10 {
  padding-left: 10px;
}
.pad-left-20 {
  padding-left: 20px;
}
.pad-right-5 {
  padding-right: 5px;
}
.pad-right-10 {
  padding-right: 10px;
}
.pad-right-20 {
  padding-right: 20px;
}
.pad-0 {
  padding: 0;
}  
.padd-vert-10 {
  padding: 10px 0;
}
.pad-ver-5 {
  padding-top: 5px;
  padding-bottom: 5px;
}
.pad-ver-7 {
  padding-top: 7px;
  padding-bottom: 7px;
}
.pad-ver-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.pad-ver-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pad-ver-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}
.pad-ver-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.pad-ver-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}
.pad-ver-60 {
  padding-top: 60px;
  padding-bottom: 60px;
}
.padd-bot-10 {
  padding-bottom: 10px;
}
.pad-bot-0 {
  padding-bottom: 0px;
}
.pad-bot-5 {
  padding-bottom: 5px;
}
.pad-bot-10 {
  padding-bottom: 10px;
}
.pad-bot-20 {
  padding-bottom: 20px;
}
.pad-bot-30 {
  padding-bottom: 30px;
}
.pad-bot-40 {
  padding-bottom: 40px;
}
.padd-top-10 {
  padding-top: 10px;
}
.pad-top-0 {
  padding-top: 0px;
}
.pad-top-2 {
  padding-top: 2px;
}
.pad-top-5 {
  padding-top: 5px;
}
.pad-top-10 {
  padding-top: 10px;
}
.pad-top-15 {
  padding-top: 15px;
}
.pad-top-20 {
  padding-top: 20px;
}
.pad-top-30 {
  padding-top: 30px;
}
.pad-top-38 {
  padding-top: 38px;
}
.pad-top-40 {
  padding-top: 40px;
}
.pad-top-50 {
  padding-top: 50px;
}
.pad-top-60 {
  padding-top: 60px;
}
.pad-top-70 {
  padding-top: 70px;
}
.pad-top-80 {
  padding-top: 80px;
}
.line-height-1-1 {
  line-height: 1.1;
}
.line-height-1-2 {
  line-height: 1.2;
}
.line-height-1-3 {
  line-height: 1.3;
}
.line-height-1-5 {
  line-height: 1.5;
}
.line-height-1-8 {
  line-height: 1.8;
}
.line-height-1-9 {
  line-height: 1.9;
}
.line-height-2 {
  line-height: 2;
}
.bord-ccc {
  border: 1px solid #ccc;
}
.bord-de {
  border: 1px solid #dedede;
}
.bord-bot-0 {
  border-bottom: 0;
}
.bord-left-1-ccc {
  border-left: solid 1px #ccc;
}
.bord-bot-1-cadetblue {
  border-bottom: 1px solid cadetblue;
}
.bord-bot-1-ccc {
  border-bottom: solid 1px #ccc;
}
.bord-right-1-ccc {
  border-right: solid 1px #ccc;
}
.bord-top-1-ccc { 
  border-top: solid 1px #ccc;
}
.bord-top-1-ef {
  border-top: 1px solid #efefef;
}
.bord-bot-1-ef {
  border-bottom: 1px solid #efefef;
}
.bord-top-1-000 {
  border-top: solid 1px #000;
}
.bord-1-ef {
  border: 1px solid #efefef;
}
.bord-1-ccc {
  border: 1px solid #ccc;
}
.bord-1-98 {
  border: 1px solid #989898;
}
.bord-top-1-98 {
  border-top: solid 1px #989898;
}
.bord-1-333 {
  border: 1px solid #333;
}
.bord-1-blk {
  border: 1px solid #000;
}
.bord-bot-1-98 {
  border-bottom: solid 1px #989898;
  border-top: 0;
  border-right: 0;
  border-left: 0;
}
.bord-bot-1-666 {
  border-bottom: solid 1px #666;
}
.bord-bot-1-333 {
  border-bottom: solid 1px #333;
}
.gry-brd-bt {
  border-bottom: solid 1px #989898;
}
.xxl-txt {
  font-size: 50px;
}
.xl-txt {
  font-size: 40px;
}
.large-txt {
  font-size: 35px;
}
.med-txt {
  font-size: 30px;
}
.sm-med-txt {
  font-size: 25px;
  }
.small-txt {
  font-size: 18px;
}
.x-small-txt {
  font-size: 16px;
}
.xxs-txt {
  font-size: 14px;
}
.italic {
  font-style: italic;
}
.cursive {
  font-family: cursive;
}
.adobe-garamond-pro {
font-family: adobe-garamond-pro, serif;
font-style: normal;
font-weight: 400;
}

.adobe-garamond-pro-italic {
font-family: adobe-garamond-pro, serif;
font-style: italic;
font-weight: 400;
}
.serif {
  font-family: "Times New Roman", Times, serif;
}
.sans-serif {
  font-family: Arial, Helvetica, sans-serif;
}
.white-txt {
  color: #fff
}
.grey-txt-lite {
  color: #ccc;
}
.grey-txt-med {
  color: #666666;
}
.grey-txt-dark {
  color: #444;
}
.red-txt {
  color: red;
}
.green-txt {
  color: green;
}
.txt-red {  
  color: red;
}
.blk-txt {
  color: #000;
}
.bold {
  font-weight: bold;
}
.underline {
  text-decoration: underline;
}
.normal {
  font-weight: normal;
}
.bg-grad-cadetblue-trans-top {
  background-image: linear-gradient(to top, cadetblue, rgba(255,255,255,0));
}
.bg-grad-white-smoke {
  background-image: linear-gradient(to bottom, rgba(245, 245, 245, 1), white);
}
.bg-grad-trans-white {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), white);
}
.bg-grad-white-trans {
  background-image: linear-gradient(to bottom, white, rgba(255, 255, 255, 0));
}
.bg-grad-trans-black {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #000);
}
.bg-trans {
  background-color: transparent;
}
.bg-black-trans-1 {
  background-color: rgba(0,0,0,0.1);
}
.bg-black-trans-2 {
  background-color: rgba(0,0,0,0.2);
}
.bg-black-trans-3 {
  background-color: rgba(0,0,0,0.3);
}
.bg-black-trans-4 {
  background-color: rgba(0,0,0,0.4);
}
.bg-black-trans-5 {
  background-color: rgba(0,0,0,0.5);
}
.bg-black-trans-6 {
  background-color: rgba(0,0,0,0.6);
}
.bg-white-trans-5 {
  background-color: rgba(255,255,255,0.5);
}
.bg-white-trans-6 {
  background-color: rgba(255,255,255,0.6);
}
.bg-white-trans-7 {
  background-color: rgba(255,255,255,0.7);
}
.bg-white-trans-8 {
  background-color: rgba(255,255,255,0.8);
}
.bg-white-trans-9 {
  background-color: rgba(255,255,255,0.9);
}
.bg-000 {
  background-color: #000;
}
.bg-black-trans {
  background-color: rgba(0,0,0,0.15);
}
.bg-black-trans-2 {
  background-color: rgba(0,0,0,0.2);
}
.bg-black-trans-3 {
  background-color: rgba(0,0,0,0.3);
}
.bg-darkorange {
  background-color: darkorange;
}
.bg-lightcoral {
  background-color: lightcoral;
}
.bg-antiquewhite {
  background-color: antiquewhite;
}
.bg-dodgerblue {
  background-color: dodgerblue;
}
.bg-aliceblue {
  background-color: aliceblue;
}
.bg-lightpink {
  background-color: lightpink;
}
.bg-cream {
  background-color: #edebc2;
}
.bg-slate {
  background-color: slategray;
}
.bg-beige {
  background-color: beige;
}
.bg-darksalmon {
  background-color: darksalmon;
}
.txt-slate {
  color: slategray;  
}
.bord-slate {
  border: 1px solid slategray;
}
.bg-warm-deep {
  background-color: #e05e58;
}
.bord-warm-deep {
  border: solid 1px #c2605b;
}
.bg-warm-med {
  background-color: #f3928c;
}
.bg-warm-lite {
  background-color: #efc5b6;
}
.bg-lt-pink {
  background-color: #feede5;
}
.bg-peachpuff {
  background-color: peachpuff;
}
.bg-lt-blue {
  background-color: #cde6fa;
}
.bord-cream {
  border: solid 1px #edebc2;
} 
.bg-lt-gry {
  background-color: #efefef;
}
.bg-med-gry-1 {
  background-color: #ccc;
}
.bg-a9 {
  background-color: #A9A9A9;
}
.bg-ccc {
  background-color: #ccc;
}
.bg-whitesmoke {
  background-color: whitesmoke;
}
.bg-ef {
  background-color: #efefef;
}
.bg-de {
  background-color: #dedede;
}
.bg-98 {
  background-color: #989898;
}
.bg-666 {
  background-color: #666;
}
.bg-444 {
  background-color: #444;
}
.bg-333 {
  background-color: #333;
}
.bg-cadetblue {
  background-color: cadetblue;
}
.bg-plum {
  background-color: plum;
}
.txt-cadetblue {
  color: cadetblue;
}
.txt-dodgerblue {
  color: dodgerblue;
}
.txt-fff {
  color: #fff;
}
.txt-000 {
  color: #000;
}
.txt-ccc {
  color: #ccc;
}
.txt-cc {
  color: #ccc;
}
.txt-ef {
  color: #efefef;
}
.txt-98 {
  color: #989898;
}
.txt-666 {
  color: #666;
}
.txt-555 {
  color: #555;
}
.txt-444 {
  color: #444;
}
.txt-333 {
  color: #333;
}
.bg-grad-tb-ef-ff {
  background: linear-gradient(to bottom, whitesmoke, #fff);
}
.bg-fff {
  background-color: #fff;
}
.bg-fff-08 {
  background-color: rgba(255,255,255,0.8);
}
.bg-fff-07 {
  background-color: rgba(255,255,255,0.7);
}
.bg-fff-06 {
  background-color: rgba(255,255,255,0.6);
}
.bg-fff-05 {
  background-color: rgba(255,255,255,0.5);
}
.bg-fff-04 {
  background-color: rgba(255,255,255,0.4);
}
.bg-fff-03 {
  background-color: rgba(255,255,255,0.3);
}
.bg-floralwhite {
  background-color: floralwhite;
}
.bg-ghostwhite {
  background-color: ghostwhite;
}
.txt-10px {
  font-size: 10px;
}
.txt-11px {
  font-size: 11px;
}
.txt-12px {
  font-size: 12px;
}
.txt-14px {
  font-size: 14px;
}
.txt-15px {
  font-size: 15px;
}
.txt-16px {
  font-size: 16px;
}
.txt-18px {
  font-size: 18px;
}
.txt-20px {
  font-size: 20px;
}
.txt-22px {
  font-size: 22px;
}
.txt-24px {
  font-size: 24px;
}
.txt-26px {
  font-size: 26px;
}
.txt-28px {
  font-size: 28px;
}
.txt-30px {
  font-size: 30px;
}
.txt-32px {
  font-size: 32px;
}
.txt-34px {
  font-size: 34px;
}
.txt-36px {
  font-size: 36px;
}
.txt-38px {
  font-size: 38px;
}
.txt-38px {
  font-size: 38px;
}
.txt-50px {
  font-size: 50px;
}
.bg-med-gry-2 {
  background-color: #989898;
}
.bg-dark-gry-1 {
  background-color: #666666;
}
.bg-dark-gry-2 {
  background-color: #333;
}
.bord-1-66 {
  border: solid 1px #666;
}
.bord-3-66 {
  border: solid 3px #666;
}
.bord-1-cc {
  border: solid 1px #ccc;
}
.bord-1-98 {
  border: 1px solid #989898;
}
.bord-2-98 {
  border: solid 2px #989898;
}
.bord-3-98 {
  border: solid 3px #989898;
}
.bord-warm-deep-2 {
  border: solid 2px #e05e58;
}
.bord-cool-deep {
  border: solid 1px #537575;
}
.bg-neutral {
  background-color: #e0dcd1;
} 
.bg-warm-grey-lite {
  background-color: #f8f8f8;
}
.bg-coral {
  background-color: #f8f4f1;
}
.bg-coral-dark {
  background-color: #e8e4e1;
}
.bg-cool-drk {
  background-color: #355454;
}
.bg-cool-deep {
  background-color: #537575;
}
.bg-cool-med {
  background-color: #90A8A8;
}
.bg-cool-lite {
  background-color: #bcd6d5;
}
.bg-cool-vlite {
  background-color: #f5fafa;
}
.bg-white {
  background-color: #fff;
}
.bg-blk {
  background-color: #000;
}
.txt-cen {
  text-align: center;
}
.rtxt {
  text-align: right;
}
.ltxt {
  text-align: left;
}
.ctxt {
  text-align: center;
}

.admin-menu-top {
  background-color: aliceblue;
  font-size: 15px;
  /*
  border-top: 1px solid #ccc;
  */
  border-bottom: 1px solid #ccc;
}

/* buttons */
.green-button {
  color: #fff;
  background-color: #90a8a8;
  padding: 10px;
}
.green-button-round {
  text-align: center;
  border: 0;
  background-color: #5f7a7a;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}
.blk-button-round {
  text-align: center;
  border: 0;
  background-color: #444;
  color: #fff;
  font-size: 16px;
  border-radius: 5px;
}
.reset-button-container {
  display: flex;
  flex-wrap: wrap;
  margin: 30px auto 0;
  background-color: #90a8a8;
  border: 0;
  outline: 0;
  padding: 20px 0;
  color: #fff;
  text-align: center;
}
.next-button-container {
  display: flex;
  flex-wrap: wrap;
  margin: 30px auto 0;
  background-color: #90a8a8;
  border: 0;
  outline: 0;
  padding: 20px 0;
  color: #fff;
  text-align: center;
}
@media only screen and (max-width: 700px) {
  .reset-button-container {
    width: 90vw;
  }
  .next-button-container {
    width: 90vw;
  }
}
@media only screen and (min-width: 701px) {
  .reset-button-container {
    width: 600px;
  }
  .next-button-container {
    width: 100%;
    max-width: 800px;
  }
}
.reset-button-container a {
  color: #fff;
}
.reset-button-container a:visited {
  color: #fff;
}
.reset-button {
  width: 200px;
  margin: 20px auto;
  padding: 10px;
  text-align: center;
  margin: 15px auto;
  background-color: #90a8a8;
  color: #fff;
}
button {
  cursor: pointer;
}
.point {
  cursor: pointer;
}
.dark-bord-round {
  width: 100px;
  border: 1px solid #222;
  border-radius: 5px;
  padding: 8px; 
}

.no-outline {
  outline: none;
}
.no-border {
  border: 0;
}
.radius-5 {
  border-radius: 5px;
}
.radius-10 {
  border-radius: 10px;
}
.radius-15 {
  border-radius: 15px;
}
.radius-20 {
  border-radius: 20px;
}
.box-shad-inset {
  box-shadow: 1px 1px 0px 0px #c1c1c1 inset;
}
.box-shad-coral-dark-thick {
  box-shadow: 4px 4px 5px 0px #a8a4a1;
}
.box-shad-coral-dark-thin {
  box-shadow: 2px 2px 3px 0px #a8a4a1;
}
.break-word {
  word-break: break-word;
}
.width-10 {
  width: 10px;
}
.width-20 {
  width: 20px;
}
.width-25 {
  width: 25px;
}
.width-30 {
  width: 30px;
}
.width-40 {
  width: 40px;
}
.width-45 {
  width: 45px;
}
.width-230 {
  width: 230px;
}
.width-250 {
  width: 250px;
}
.width-300 {
  width: 300px;
}
.width-400 {
  width: 400px;
}
.max-height-none {
  max-height: none;
}
.max-height-65pc {
  max-height: 65%;
}
.height-10 {
  height: 10px;
}
.height-15 {
  height: 15px;
}
.height-18 {
  height: 18px;
}
.height-19 {
  height: 19px;
}
.height-20 {
  height: 20px;
}
.height-25 {
  height: 25px;
}
.height-30 {
  height: 30px;
}
.height-40 {
  height: 40px;
}
.height-45 {
  height: 45px;
}
.height-50 {
  height: 50px;
}
.height-60 {
  height: 60px;
}
.height-70 {
  height: 70px;
}
.height-80 {
  height: 80px;
}
.height-90 {
  height: 90px;
}
.height-100 {
  height: 100px;
}
.height-110 {
  height: 110px;
}
.height-120 {
  height: 120px;
}
.height-125 {
  height: 125px;
}
.height-130 {
  height: 130px;
}
.height-150 {
  height: 150px;
}
.height-160 {
  height: 160px;
}
.height-170 {
  height: 170px;
}
.height-180 {
  height: 180px;
}
.height-190 {
  height: 190px;
}
.height-200 {
  height: 200px;
}
.height-250 {
  height: 250px;
}
.height-300 {
  height: 300px;
}
.min-height-100 {
  min-height: 100px;
}
.min-height-120 {
  min-height: 120px;
}
.min-height-130 {
  min-height: 130px;
}
.min-height-140 {
  min-height: 140px;
}
.min-height-150 {
  min-height: 150px;
}
.min-height-200 {
  min-height: 200px;
}
.min-height-250 {
  min-height: 250px;
}
.min-height-300 {
  min-height: 300px;
}
.min-height-400 {
  min-height: 400px;
}
.min-height-450 {
  min-height: 450px;
}
.min-height-500 {
  min-height: 500px;
}
.height-350 {
  height: 350px;
}
.height-400 {
  height: 400px;
}
.height-450 {
  height: 450px;
}
.height-500 {
  height: 500px;
}
.height-550 {
  height: 550px;
}
.height-560 {
  height: 560px;
}
.height-570 {
  height: 570px;
}
.height-600 {
  height: 600px;
}
.height-650 {
  height: 650px;
}
.height-700 {
  height: 700px;
}
.height-750 {
  height: 750px;
}
.height-800 {
  height: 800px;
}
.height-10 {
  height: 10px;
}
.height-20 {
  height: 20px;
}
.height-30 {
  height: 30px;
}
.height-33 {
  height: 33px;
}
.height-40 {
  height: 40px;
}
.height-50 {
  height: 50px;
}
.height-100 {
  height: 100px;
}
.height-80pc {
  height: 80%;
}
.height-100pc {
  height: 100%;
}
.width-61pc {
  width: 61%;
}
.width-50 {
  width: 50px;
}
.width-80 {
  width: 80px;
}
.width-90 {
  width: 90px;
}
.width-100 {
  width: 100px;
}
.width-120 {
  width: 120px;
}
.width-130 {
  width: 130px;
}
.width-150 {
  width: 150px;
}
.width-200 {
  width: 200px;
  max-width: 200px;
}
.height-200 {
  height: 200px;
  max-height: 200px;
}
.width-220 {
  width: 220px;
  max-width: 220px;
}
.width-100pc {
  width: 100%;
}
.width-90pc {
  width: 90%;
}
.width-60pc {
  width: 60%;
}
.width-40pc {
  width: 40%;
}
.width-49pc {
  width: 49%;
}
.width-48pc {
  width: 48%;
}
.height-48pc {
  height: 48%;
}
.height-49pc {
  height: 49%;
}
.width-50pc {
  width: 50%;
}
.h50 {
  height: 50%;
}
.height-10pc {
  height: 10%;
}
.height-15pc {
  height: 15%;
}
.height-20pc {
  height: 20%;
}
.height-25pc {
  height: 25%;
}
.height-40pc {
  height: 40%;
}
.height-60pc {
  height: 60%;
}
.height-50pc {
  height: 50%;
}
.height-66pc {
  height: 66%;
}
.height-75pc {
  height: 75%;
}
.height-33pc {
  height: 33%;
}
.height-60pc {
  height: 60%;
}
.height-40pc {
  height: 40%;
}
.max-width-280 {
  width: 280px;
  max-width: 280px;
}

.round {
  border-radius: 5px;
}
.bord-top-rad-10 {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.bord-bot-1-000 {
  border-bottom: solid 1px #000;
}
.bord-bot-2-000 {
  border-bottom: solid 2px #000;
}
.bord-0 {
  border: 0;
}
.pad-1 {
  padding: 1px;
}
.pad-2 {
  padding: 2px;
}
.pad-3 {
  padding: 3px;
}
.pad-4 {
  padding: 4px;
}
.pad-5 {
  padding: 5px;
}
.pad-7 {
  padding: 7px;
}
.pad-8 {
  padding: 8px;
}
.pad-10 {
  padding: 10px;
}
.pad-10-20 {
  padding: 10px 20px;
}
.pad-15 {
  padding: 15px;
}
.pad-20 {
  padding: 20px;
}
.pad-30 {
  padding: 30px;
}
.pad-40 {
  padding: 40px;
}
.pad-45 {
  padding: 45px;
}
.pad-50 {
  padding: 50px;
}
.pad-55 {
  padding: 55px;
}
.pad-r-5 {
  padding-right: 5px;
}
.pad-r-10 {
  padding-right: 10px;
}
.pad-ver-15 {
  padding: 15px 0;
}
.pad-ver-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pad-ver-30 {
  padding: 30px 0;
}
.pad-v30 {
  padding: 30px 0;
}
.line-height-1 {
  line-height: 1;
}
.line-height-1-5 {
  line-height: 1.5;
} 
.line-height-2 {
  line-height: 2;
}
.line-height-2-5 {
  line-height: 2.5;
}
.line-height-3 {
  line-height: 3;
}
.bord-1-ef {
  border: 1px solid #efefef;
}
.white-bord-1 {
  border: 1px solid #fff;
}
.white-bord {
  border: 2px solid #fff;
}
.bord-shad-grey {
  box-shadow: 1px 2px 3px #333;
}
.box-shad-98-thin {
  box-shadow: 2px 2px 5px #989898;
}
.box-shadow-coral-dark {
  box-shadow: 4px 4px 5px #a8a4a1;
}
.wellness-appointment-box-outer {
  position: relative;
  background-color: bisque;
  min-height: 80px;
  max-height: 80px;
}
.wellness-appointment-box-inner {
  position: absolute;
  width: 100%;
}
.booking-scroll-box-outer {
  position: relative;
  min-height: 60px;
  max-height: 60px;
}
.booking-scroll-box-inner {
  position: absolute;
  width: 100%;
}
.pos-relative {
  position: relative;
}
.pos-absolute {
  position: absolute;
}
.absolute {
  position: absolute;
}
.pos-fixed {
  position: fixed;
}
.bg-bisque {
  background-color: bisque;
}
.list-style-none {
  list-style: none;
}
.title {
  letter-spacing: 2px;
  color: #fff;
  text-align: center;
}
.header {
  text-align: center; 
  width: 100%;
  padding: 50px 0;
}
.prog-outer-box {
}
.prog-select-container {
    margin: 0 auto;
  }
@media only screen and (min-width: 601px) {
  .hide-desk-tab {
    display: none;
  }
  .prog-select-container {
    margin-top: 30px;
  }
  .prog-txt-box {
    text-align: center;    
  }
  .prog-outer-box {
    width: 325px;
  }

}
/* Desktop */
@media only screen and (min-width: 1000px) {
    .display-inner-box-img {
      border-radius: 10px;
    }
  .prog-select-container {
  }
  .prog-outer-box {
    width: 30vw;
  }

}
/* ipad */
@media only screen and (max-width: 1000px) {
    .rec-display-box {
      width: 100%;
      height: 250px;
  }
    .sq-inner-box {
      width: 300px;
      height: 300px;
    }
    .item-box {
      width: 50vw;
      height: 50vw;
    }   
  .prog-select-container {
  
  }
}
@media only screen and (min-width: 851px) {

  .hide-above-850 {
    display: none;
  }

}
/* large mobile / small tablet */
@media only screen and (max-width: 850px) {

  .hide-below-850 {
    display: none;
  }

}
@media only screen and (min-width: 751px) {

  .hide-above-750 {
    display: none;
  }

}
/* large mobile / small tablet */
@media only screen and (max-width: 750px) {

  .hide-below-750 {
    display: none;
  }

}
/* mobile */
@media only screen and (max-width: 600px) {
  .m-width-180 {
    width: 180px;
  }
  .large-scroll-box-height {
    height: 700px;
  }
  .medium-scroll-box-height {
    height: 800px;
  }
  .prog-select-container {
  }
  .prog-outer-box {
    width: 100vw;
  }
  .hide-mob {
    display: none; 
  }
  .centered-container {
    margin-top: 10px;
  }
  .flex-container {
    display: flex;
    flex-wrap: wrap;
  }
  .simple-flex-container {
    flex-wrap: wrap;
  }
  .rec-display-box {
    width: 100%;
    height: 250px;
  }
  .select-box-title {
    font-size: 30px;
  }
  .hero-title {
    font-size: 25px;
  }
  .sq {
    width: 160px;
    height: 160px;
  }
  .item-box {
    width: 50vw;
    height: 50vw;
  }
  .xxl-txt {
    font-size: 40px;
  }
  .xl-txt {
    font-size: 35px;
  }
  .large-txt {
    font-size: 30px;
  }
  .med-txt {
    font-size: 25px;
  }
  .sm-med-txt {
    font-size: 22px;
  }
  .small-txt {
    font-size: 18px;
  }
  .x-small-txt {
    font-size: 16px;
  }
}
.nav-line {
  height: 2px;
}

.booking-container {
  width: 350px;
}
.program-container-box {
  background-color: #fff;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
}
.program-list-box-title {
  color: #666;
  font-size: 20px;
  padding: 20px 0;
  text-align: center;
  box-sizing: border-box;
}
.program-list-box-title.bord-bot-2-ccc {
  border-bottom: 2px solid #ccc;
}
.program-list-box-title.mar-bot-28 {
  margin-bottom: 28px;
}
.program-selector-box {
  color: #444;
  display: flex;
}
.program-selector-box-image {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
}
.prog-txt-overlay {
  font-size: 30px;
  text-shadow: 2px 1px 3px #333;
  color: #fff;  
}
.new-room-label {
  position: relative;
  top: 150px;
  width: 100%;
  text-align: center;
  letter-spacing: 2px;
  color: #fff;
  font-size: 30px;
  font-style: italic;
  font-family: serif;
  text-shadow: 2px 1px 3px #333;
}
.retreat-selector-box-image {
  width: 100%;
  height: 200px;
  box-sizing: border-box;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.retreat-selector-box-title {
  font-size: 18px;
  margin: 20px 20px 20px;
  padding-bottom: 20px;
  line-height: 1.2;
  border-bottom: 1px solid #989898;
/*
  background-color: antiquewhite;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;  
*/
}
.retreat-selector-box-description {
  
}
.program-description-txt {
  padding: 20px 0 0;
  margin: 0 20px;
  line-height: 1.5;
}
.view-details-button {
  border-bottom: 1px #ccc solid;
/*
  background-color: #fff;
  border-radius: 5px;
*/
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: #000;
  padding-left: 0;
  padding-right: 0;
}
.selector-parent-box {
  margin-bottom: 20px;
  padding-bottom: 20px;
  box-shadow: 2px 1px 10px -2px #989898;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-radius: 5px;
  background-color: floralwhite;
}
.selector-parent-box.pad-bot-0 {
  padding-bottom: 0px;
}
.program-selector-box-txt {
  width: 50%;
  height: 150px;
  padding: 0 4px;
  cursor: pointer;
  background-color: #fff;
  box-sizing: border-box;
  border-top-right-radius: 5px;
}
.program-info-box {
  text-align: center;
  padding: 20px 0 0;
  box-sizing: border-box;
  width: auto;
  /*
  margin: 0 20px;
  */
  font-size: 14px;
}
.customer-booking-button {
  text-align: center;
  border: none;
  outline: none;
  color: #fff;
  font-size: 18px;
  padding: 6px;
  background-color: #005151;
  cursor: pointer;
}
.bg-005151 {
  background-color: #005151;
}
.retreat-date-bar {
  padding: 8px;
  text-align: center;
  background-color: #fff;
  color: #c2605b;
  font-size: 14px;
  border: 1px solid #fff;
}
.prog-view-more {
    box-sizing: border-box;
    background-color: #dedede;
    cursor: pointer;
    padding: 8px;
    padding-right: 30px;
    margin: 0 20px 20px 20px;
    background-image: url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" xml:space="preserve"><path d="M7.41,8.59L12,13.17l4.59-4.58L18,10l-6,6l-6-6L7.41,8.59z"/><path fill="none" d="M0,0h24v24H0V0z"/></svg>');
    background-position: center right;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 320px) {

  .nav-box {
    width: auto;
  }
  .nav-line {
    width: 25px;
  }
  .booking-container {
    width: 320px;
  }
}

@media only screen and (min-width: 321px) {

  .nav-box {
    width: auto;
  }
  .nav-line {
    width: 35px;
  }
}

@media only screen and (min-width: 600px) {

  .nav-box {
    width: auto;
  }
  .nav-line {
    width: 45px;
  }
}
@media only screen and (min-width: 601px) {

  .nav-box {
    width: 600px;
  }
  .nav-line {
    width: 60px;
  }
}
@media only screen and (min-width: 800px) {

  .nav-box {
    width: 800px;
  }
  .nav-line {
    width: 90px;
  }
}

@media only screen and (min-width: 1000px) {

  .nav-box {
    width: 800px;
  }
  .nav-line {
    width: 100px;
  }
}


/* Parent container */
.circle-container {
    position: relative;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    margin: 50px auto; /* Center horizontally */
    overflow: hidden;
}

/* Smaller circles */
.circle-orbit {
    position: absolute;
    width: 80px; 
    height: 80px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: 0px;
    border-radius: 50%; 
    top: 38%; /* offset relative to size of circle icon */
    left: 38%; 
    transform-origin: center; /* Center point for rotation */
}
.circle-orbit:hover {
  background-color: whitesmoke;
}
.circle-orbit.bg-35px {
  background-size: 35px;
}
.circle-orbit.bg-40px {
  background-size: 40px;
}
.circle-orbit.bg-45px {
  background-size: 45px;
}
.circle-orbit.bg-50px {
  background-size: 50px;
}
.circle-orbit.bg-55px {
  background-size: 55px;
}
.circle-orbit.bg-60px {
  background-size: 60px;
}
.circle-orbit.bg-50px {
  background-size: 50px;
}
.circle-orbit.bg-70px {
  background-size: 70px;
}
/* Position each circle perfectly around the larger circle */
.circle-orbit:nth-child(1) {
    transform: rotate(0deg) translate(130px) rotate(0deg);
}

.circle-orbit:nth-child(2) {
    transform: rotate(60deg) translate(130px) rotate(-60deg);
}

.circle-orbit:nth-child(3) {
    transform: rotate(120deg) translate(130px) rotate(-120deg);
}

.circle-orbit:nth-child(4) {
    transform: rotate(180deg) translate(130px) rotate(-180deg);
}

.circle-orbit:nth-child(5) {
    transform: rotate(240deg) translate(130px) rotate(-240deg);
}

.circle-orbit:nth-child(6) {
    transform: rotate(300deg) translate(130px) rotate(-300deg);
}