/*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:none;}

.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;}
.panelS {position: relative; top:110px;  min-height: 100%;}
.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.jpg");}

.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 {background-color: #9e844f; background-image: url("assets/img/bg-sand.jpg");}

.bg-sand2 {background-image: linear-gradient( rgba(35,0,0,0.3), rgba(255,186,100,0.3)), url('assets/img/bg-sand.jpg');}

.bg-lion{background-image: url('assets/img/bg-lion.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 30% 50%;}

.bg-dumbos{background-image: url('assets/img/bg-dumbos.jpg'); background-repeat: no-repeat; background-size: cover; background-position: 30% 50%;}

.bg-dumbos-w{background-image: url('assets/img/bg-dumbos-w.jpg'); 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-marula{ background-image:linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)), url('https://www.vuyaniresorts.com/img/bg-marula.jpg'); 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:#316B03!important;}

/*.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(82,66,32,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:#316B03!important;}

/*.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:#316B03; 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:#316B03;}

/*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;}





/*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;}



}

@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;}
  .panelS {position: relative; top:65px;}
  .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-marula{background-image: none; background-color: white;}

  .bg-giraffe{background-color: black;  background-image: url("assets/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;}

  #header {top: 0px!important;}
  .panelS {position: relative; top:65px;}
  .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-marula{background-image: none; background-color: white;}

  .bg-giraffe{background-color: black;  background-image: url("assets/img/bg-sand-black.jpg");}

  .specialOffer {width: 320px;}

  #hamburger {position: fixed; top: 10px; right:10px;}

}