html {
  position: relative;
  min-height: 100%;
  background-color: #f0f0f0;
}

@media (max-width: 379px) {
  body {
    margin-bottom: 700px;
    background-color: transparent;
  }
}

@media (min-width: 380px) {
  body {
    margin-bottom: 640px;
    background-color: transparent;
  }
}

@media (min-width: 576px) {
  body {
    margin-bottom: 545px;
  }
}

@media (min-width: 768px) {
  body {
    margin-bottom: 432px;
  }
}

@media (min-width: 992px) {
  body {
    margin-bottom: 281px;
  }
}

.text-white {
  color: white !important;
}

.h6.text-white>* {
  color: white!important;
}

.text-gold {
  color: #d9ac40;
}

.bg-green {
  background-color: #093d00;
}

p, .p {
  /*font-family: 'Metropolis';*/
  /*font-size: small !Important;*/
}

.slide-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
}

.text-gold.slide-overlay-caption::after, .text-gold.slide-overlay-caption::before {
  display: block;
  color: white;
  text-align: center;
}

.text-gold.slide-overlay-caption::after {
  content: attr(bottom-text);
  font-size: 0.4em;
  font-family: 'Metropolis';
}

.text-gold.slide-overlay-caption::before {
  content: attr(top-text);
  font-size: 0.5em;
  font-family: 'Encorpada-Regular'
}

.caption.metro::before, .caption.metro::after {
  font-family: 'Metropolis';
}

.caption::before, .caption::after {
  display: block;
  font-size: medium;
}

.caption::before {
  content: attr(top-text);
}

.caption::after {
  content: attr(bottom-text);
}

.text-xs {
  font-size: smaller;
}

.text-small {
  font-size: small !Important;
}

.text-medium {
  font-size: medium !Important;
}

.text-large {
  font-size: large !Important;
}

.text-larger {
  font-size: larger !Important;
}

.text-xxl {
  font-size: x-large;
}

.text-xl {
  font-size: x-large;
}

.slide-overlay-dark {
  background-color: rgba(0, 0, 0, 0.5);
}

.slide-overlay-light {
  background-color: rgba(255, 255, 255, 0.1);
}

.slide-overlay-frame {
  background-color: rgba(255, 255, 255, 0.7);
  padding: 0.5em;
  margin: 0.5em;
  max-width: 480px;
}

@media (min-width: 768px) {
  .slide-overlay-frame {
    padding: 1em;
    margin: 1em;
  }
}

.slide-overlay-border {
  border: 0.1em solid rgba(154, 118, 31, 0.5);
  padding: 5%;
}

@media (min-width: 768px) {
  .slide-overlay-border {
    padding: 10%;
  }
}

.subtext-black::after, .subtext-black::before {
  color: #000000 !Important;
  font-size: medium !Important;
  white-space: normal;
}

@media (min-width: 768px) {
  .subtext-black::after, .subtext-black::before {
    color: #000000 !Important;
    font-size: large !Important;
    white-space: nowrap;
  }
}

.bg-gold {
  background-color: #9a761f;
}

.text-xxxl {
  font-size: 3.5em;
}

.card-date-day::after {
  content: '/';
}

.card-thumbnail {
  /*
  width: 140px;
  height: 96px;
*/
  width: 210px;
  height: 144px;
  padding: 1.5em;
}

.card-thumbnail-body {
  max-height: 144px;
  overflow: hidden;
  margin-left: 0.5em;
}

.card {
  border: none;
  background-color: transparent;
}

.text.recent-event-details {
  margin-left: 0.5em;
}

.recent-events .details {
  overflow: hidden;
  max-height: 140px;
}

.slide-overlay-caption {
  font-size: 3.5em;
}

@media (min-width: 768px) {
  .slide-overlay-caption {
    font-size: 3.5em;
  }
}

.scaleX {
  transform: scaleX(0.5);
}

.blog-details {
  font-size: small;
  max-height: 72px;
}

.blog-more:hover {
  text-decoration: none;
  color: inherit;
}

.blog-more {
  border: 2px solid #9a761f;
  padding: 0.1em 0.5em;
}

@media (min-width: 768px) and (max-width: 991px) {
  .recent-events {
    /*max-width: 50%;*/
  }
}

@media (min-width: 768px) {
  .dutyfree {
    position: absolute;
    display: block;
    left: 0;
    width: auto;
  }
}

.navbar .container-fluid {
  border-bottom: 1px solid #b8b8b8;
  -webkit-box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 10px 5px -5px rgba(0, 0, 0, 0.25);
  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.25);
}

.bootstrap-select>.dropdown-toggle, .bootstrap-select>.dropdown-toggle:focus, .bootstrap-select>.dropdown-toggle:active {
  background-color: transparent !Important;
  border: none !Important;
  color: rgba(0, 0, 0, .5)!important;
  outline: none !important;
  box-shadow: none !Important;
}

.bootstrap-select>.dropdown-toggle:after {
  /*transform: rotate(180deg) !Important;*/
}

@media (min-width: 992px) {
  .room-thumbnail {
    /*max-width: 360px;*/
  }
}

.tour-price::before, .tour-price::after {
  font-size: small;
}

.room-price::before, .room-price::after {
  font-size: small;
}

.room-price::before {
  content: 'PHP';
}

.tour-price::before {
  content: 'PHP';
}

.room-price::after {
  content: '/night';
  align-self: flex-end;
}

.tour-price::after {
  content: '/head';
  align-self: flex-end;
}

.border-gray {
  border: 1px solid #d8d8d8;
}

.bg-gray {
  background-color: #e5e5e5;
}

.table thead th {
  border-bottom: 2px solid #bdbdbd;
}

.table-bordered td, .table-bordered th {
  border: 1px solid #bdbdbd;
}

.list-inline.package-amenities .list-inline-item:before {
  content: '•';
}

.contact-icon {
  width: 32px;
}

.contact-text {
  max-width: 320px;
  text-indent: 12px;
}

/*modified*/

.Encorpada {
  font-family: 'Encorpada-Essential-Regular'!important;
}

.Metropolis {
  font-family: 'Metropolis'!important;
}

a.dropdown-item.active-link.p-0.text-medium.mb-2:hover {
  cursor: pointer;
}

ul#footernavs:hover {
  cursor: pointer;
}

#main-nav .nav-item .nav-link:hover {
  cursor: pointer;
}

.ml12 {
  font-weight: 200;
  font-size: 1.8em;
  text-transform: uppercase;
  letter-spacing: 0.5em;
}

.ml12 .letter {
  display: inline-block;
  line-height: 1em;
  color: white;
}

.active-link {
  cursor: pointer;
}

.list-inline.package-amenities .list-inline-item:before {
  content: '•';
  margin-right: 0.5em;
}

a.social-media {
  color: #d9ac40;
  margin-right: 25px;
}

.title-before-after::before {
  font-family: 'Metropolis'!important;
}

.title-before-after::after {
  font-family: 'Metropolis'!important;
}

.flex-wrap {
  display: flex;
  flex-direction: column;
  max-height: 196px;
  flex-wrap: wrap;
}

.min-h1 {
  min-height: 108px;
  /*max-height: 160px;*/
}

.room-description {
  display: block !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 5 !important;
  -webkit-box-orient: vertical !important;
  -ms-text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}