/*Global CSS*/
@font-face {font-family: 'VuyaniHeaders';font-display: fallback;src: url('assets/fonts/VuyaniHeaders.woff2') format('woff2'),url('fonts/VuyaniHeaders.woff') format('woff');font-weight: normal;font-style: normal;}
@import url('https://fonts.googleapis.com/css?family=Maven+Pro&display=swap');
body {position: relative; color: #787878;font-family: 'Maven Pro', sans-serif; width: 100%; max-width: 1200px; min-width: 389px; height: 100%; background-color: white;}
h1{font-size: 2.5rem; margin:0px; padding: 0px;}
p{margin:0px; padding: 0px;}
img {border: 0;}
main {box-shadow: 0 9px 0px 0px white, 0 -9px 0px 0px white, 12px 0 15px -4px rgba(0, 0, 0, 0.3), -12px 0 15px -4px rgba(0, 0, 0, 0.3);}
footer {z-index: 1029;}
a {color:#9B7D00;}
.red {border: 1px solid red;}
.Maya{z-index:1; position:fixed;bottom:0;right:0;border:none;background-color: rgb(0,0,0);}
/*font*/
.vsl  {font-family: "VuyaniHeaders", sans-serif;}
/*header*/
#logoTXT, #logoGFX{height:50px;}

.fixed { position: fixed; top: 0px; z-index: 2;}
.fixed-top30 { position: fixed; top: 30px; right: 0; left: 0; z-index: 1030;}
.navbar-toggler,.navbar-toggler:hover,.navbar-toggler:focus, .navbar-toggler:active {border: none; outline: none; -webkit-box-shadow: none; box-shadow: none;}
.navbar-underline a:hover {text-decoration: underline;}

/*buttons*/
#menutoggle { font-size: 0.6rem; font-weight: bold; vertical-align: text-top; color:rgba(0,0,0,0.7); border:}
.btn-check{background: #ffc107;border: 1px solid #d69900;box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);border-radius: 7px;}
.btn-check:active {color:white;}
.btn-check:hover {color:white;-webkit-transform: scale(1.1);-moz-transform: scale(1.1);-ms-transform: scale(1.1);-o-transform: scale(1.1);transform: rotate scale(1.1);-webkit-transition: all 0.4s ease-in-out;-moz-transition: all 0.4s ease-in-out;-o-transition: all 0.4s ease-in-out;transition: all 0.4s ease-in-out;}

/*Elements*/
.ico {width: 30px; height: 30px; fill:#282828;}.ico:hover {fill:#754e00;}
.menu-header .ico,.menu-header .close{ height: 40px!important; width: 40px!important;}
.specialOffer {display: block; width: 250px; height:164px;}

/*main*/
.pos-tl{position: absolute; top:0; left:0;}
.panel {top:105px;  min-height: 100%;}

/*slider mennu*/
.slideout-menu {position: fixed;  left: auto;  top: 105px;  bottom: 0;  right: 0;  z-index: 0;  width: 256px;  overflow-y: scroll;  -webkit-overflow-scrolling: touch;  display: none;}
.slideout-panel {  position: relative;  z-index: 1;  will-change: transform;}
.slideout-open,.slideout-open body,.slideout-open .slideout-panel {  overflow: hidden; }
.slideout-open .slideout-menu { display: block; }

.menu a {text-decoration: none; color: #fffbf0;}
.menu a:hover {text-decoration: underline;}
.menu-header {border-bottom: 1px solid #2a2d2f; padding: 20px 0 10px 10px; background-size: 50px; background-color: white;}
.menu-header a {padding: 0;}


.menu-section-title {font-size: 1rem; margin: 0; padding: 15px 0; background-image: url("assets/img/bg-sand.webp");}
.menu-section-list,.menu-section-list¢ {padding:0; margin:0; list-style:none; border-top: 1px solid #63696e; text-align: center;}
.menu-section-list a {display: block; padding: 10px 0; background-color: rgba(200, 200, 200, 0.1);  border-bottom: 1px solid #63696e; font-weight:normal; font-size: 1.1rem;}
.menu-section-list tr th a {text-align: left; padding: 10px 0 10px 30px; font-weight:normal; font-size: 1.1rem;}
.menu-section-list¢ tr th a {text-align: center; padding: 10px 0; font-weight:normal; font-size: .8rem;}
/*mobile bottom bar*/
#nav-bottom .nav-item {color:white; font-size: .7rem; line-height: 1.2rem; margin-bottom: -5px; background-color: black; border:0;}
#nav-bottom .ico{width: 30px; height: 30px;}

/*backgrounds*/

.bg-black,.menu{background-color: black;  background-image: url("assets/img/bg-sand-black.jpg");}
.bg-white-sand{background-color: white;  background-image: url("assets/img/bg-sand-white.jpg");}
.bg-blue{background-image: linear-gradient(rgba(100, 170, 232, 0.9), rgba(255, 255, 255, 0.1)), url('assets/img/bg-sand-white.jpg');}
/*
.bg-sand::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 0, 0, 0.1); 
}*/
.bg-sand {background-color: #9e844f; background-image: url("assets/img/bg-sand.webp");}
.bg-sand2 {background-image: linear-gradient( rgba(35,0,0,0.3), rgba(255,186,100,0.3)), url('assets/img/bg-sand.webp');}
.bg-sand-turq {background-color: #1b968f; background-image: url("assets/img/bg-sand-turq3.jpg");}
.bg-sand-turq2 {background-image: linear-gradient( rgba(35,0,0,0.3), rgba(27,150,143,0.3)), url('assets/img/bg-sand-turq2.jpg');}
.bg-marula{ background-image:linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)), url('assets/img/bg-marula.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 35% 10%;}
.bg-lion{background-image: url('assets/img/bg-lion.webp'); background-repeat: no-repeat; background-size: cover; background-position: 30% 50%;}
.bg-dumbos{background-image: url('assets/img/bg-dumbos.webp'); background-repeat: no-repeat; background-size: cover; background-position: 30% 50%;}
.bg-dumbos-w{background-image: url('assets/img/bg-dumbos-w.webp'); background-repeat: no-repeat; background-size: cover; background-position: 30% 50%;}
.bg-giraffe{background-image: url('assets/img/bg-giraffe.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.bg-tripadvisor{background: rgb(52,224,161); background:linear-gradient(0deg, rgba(52,224,161,0) 50%, rgba(52,224,161,1) 80%, rgba(52,224,161,1) 100%), url('assets/img/bg-sand-white.jpg');}
.bg-honey{ background-image:linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)), url('assets/img/bg-honey.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 35% 10%;}
.bg-honeyST{ background-image:linear-gradient(rgba(255,255,255,.7), rgba(255,255,255,.7)), url('assets/img/bg-honeyST.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 35% 10%;}
.bg-tent{ background-image:url('assets/img/bg-honeyST.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 35% 10%;}
.bg-roomVML{ background-image:url('assets/img/bg-roomVML.webp'); background-repeat: no-repeat; background-size: cover; background-position: 35% 10%;}
.bg-transfer{background-image: url('assets/img/bg-transfer.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 30% 50%;}
.bg-ultra{background-image: url('assets/img/bg-ultra.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center;}
.bg-orange{background-color:#f4511e!important;}
.bg-light-70{ background-color: rgba(255,255,255,.7)!important;}
.bg-light-50{ background-color: rgba(255,255,255,.5)!important;}
.bg-light-30{ background-color: rgba(255,255,255,.3)!important;}
.bg-dark-90{ background-color: rgba(73,73,73,.9)!important;}
.bg-black-30{ background-color: rgba(0,0,0,.3)!important;}
.bg-black-50{ background-color: rgba(0,0,0,.5)!important;}

.bg-gradient-dark-rtl {background: rgb(0,0,0); background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);}
.bg-gradient-light-rtl {background: rgb(0,0,0); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 35%, rgba(255,255,255,1) 100%);}
/*text*/
.text-sand, .text-sand a, .menu-section-title{font-family: "VuyaniHeaders", sans-serif; letter-spacing: 0.15em; font-weight: unset; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border: none; color: rgba(60,113,110,1); text-align: center; text-transform: normal; -o-text-overflow: clip; text-overflow: clip; white-space: pre; text-shadow: 1px 1px 0 rgba(191,172,136,0.6) , -1px -1px 1px rgba(0,0,0,0.67) ;}
.text-orange{color:#f4511e!important;}
.text-small {font-size:0.9rem!important;}
.text-tripadvisor{color: #34E0A1!important;}
.price-info {padding:5px 15px 15px 15px; text-align: center; }
.price-now {color:#ff5406; font-size:1.5rem;}
.price-try {font-size:0.7rem;}


.discount-badge {position: absolute; top: -10px; right: -5px; padding: 6px 12px; z-index: 1000;}
.discount-badge, .btn-discount {border: 1px solid grey; border-radius: 5px; background-color: rgba(255, 206, 0, 1); box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.5) !important; font-family: "Maven Pro", sans-serif; z-index: 10;}
.discount-badge__text { text-align: center; font-size: .8rem; line-height: 1; color: #000;}
.discount-badge__price { font-style: italic; font-weight: 600; font-size: 1.4rem; display: block; padding:1px; color:#ff0000;}
/*shadows*/
.inset-shadow-top {box-shadow:inset 0px 5px 10px rgba(0,0,0,0.3);}
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.5) !important;}
.glow-lg { box-shadow: 0 0 1rem rgba(255, 255, 255, 0.3) !important;}
.text-shadow {text-shadow: 2px 2px 8px #000;}

.gradTopAc { position:relative;  display:inline-block;}
.gradTopAc:after {content:''; position:absolute; left:0; top:0; width:100%; height:30%; display:inline-block;background-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0)100%);}
.gradTop {background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.5)80%);}

/* Special Offers custom */
.text-price{font-family: 'Maven Pro', sans-serif; text-transform: uppercase!important;color:#f4511e;}
.nav-mini {font-size: 0.9rem;}
.nav-pills .nav-link{ border: 1px solid grey;  background-color: #f8f9fa; margin-right: 1px; color:grey;}
.nav-pills .nav-link.active,.nav-pills .show > .nav-link { border: 1px solid grey; background-color: black; color:white;}

.listing {background: #fff; border: 2px solid #ddd; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); margin:15px 0; overflow: hidden;}
.listing:hover {-webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: rotate scale(1.1); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }
.listing br, .listing p{line-height: 1rem;}
.listing-radius {border-radius: 7px;}

/*VSL Local*/
.bg-table-LS{ background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url('assets/rooms/rooms-570x380_LS1.jpg'); background-repeat: no-repeat; background-size: cover;}
.bg-table-HS{ background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url('assets/rooms/rooms-570x380_HS1.jpg'); background-repeat: no-repeat; background-size: cover;}
.bg-table-PS{ background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url('assets/rooms/rooms-570x380_PS1.jpg'); background-repeat: no-repeat; background-size: cover;}
.bg-table-OA{ background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url('assets/rooms/rooms-570x380_OA1.jpg'); background-repeat: no-repeat; background-size: cover;}
.bg-table-ST{ background-image: linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.6)), url('assets/img/rooms-1_600x400_ST.jpg'); background-repeat: no-repeat; background-size: cover;}



/*Media-queries*/
@media (min-width:767.99pxpx) and (max-width: 990.98px) {
  .bg-giraffe{background-image: url('img/bg-giraffe.jpg'); background-repeat: no-repeat; background-size: cover; background-position: left;}
  .bg-dumbos-w{background-image: url('assets/img/bg-dumbos-w.jpg'); background-repeat: no-repeat; background-size: cover; background-position:left;}


}
@media (min-width:575.99pxpx) and (max-width: 767.98px) {
  .discount-badge__text { font-size: 1.2rem;}
  .discount-badge__price { font-size: 2rem;}

}
@media (min-width:389.99px) and (max-width: 575.98px) {
  body{font-size: 1.3rem;}
  footer{padding-bottom: 100px;}
  section .row .col h2 {font-size: 1.5rem;}
  #header {top: 0px!important;}
  .panel {top:65px;}
  .slideout-menu {top: 65px; padding-bottom: 100px;}
  .nav .btn-check{font-size: .8rem!important; width:90px; line-height: 1.2rem;}
  section .modal-body table tr {font-size: 1rem;}
  .bg-lion,.bg-honey,.bg-transfers,.bg-ultra,.bg-dumbos-w{background-image: none; background-color: white;}
  .bg-giraffe{background-color: black;  background-image: url("img/bg-sand-black.jpg");}
  .specialOffer {width: 388px;height: 245px;}
  /*.owl-carousel{background-color: rgba(0,0,0,0.5); background-image: url('img/spinner.svg'); background-repeat: no-repeat; background-attachment: fixed; background-position: 50% 25%;}*/
}
@media (min-width:1px) and (max-width: 389.98px) {
  body{font-size: 1rem;min-width: 320px}
  footer{padding-bottom: 100px;}
  section .row .col h2 {font-size: 1.3rem;}
  section thead tr th {font-size: .8rem; }
  #header {top: 0px!important;}
  .panel {top:65px;}
  .slideout-menu {top: 65px; padding-bottom: 100px;}
  .nav .btn-check{display:none;}
  section .modal-body table tr {font-size: 1rem;}
  .bg-lion,.bg-honey,.bg-transfers,.bg-ultra,.bg-dumbos-w{background-image: none; background-color: white;}
  .bg-giraffe{background-color: black;  background-image: url("img/bg-sand-black.jpg");}
  .specialOffer {width: 320px;}
  #hamburger {position: fixed; top: 10px; right:10px;}
}