:root{
    --beige: #FCF2E4;
    --gold: #C3996B;
    --turquoise: #5FDBBE;
    --palegreen: #F4FFF6;  
    --palegrey: #BABABA;  
    --paleblue: #EAF1FF; 
    --grey: #3B3B3B;
}
body{
    color: var(--grey);
}
h1, h1 p{
    font-family: matrix-ii, serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(40px, 3.6vw, 68px);
    line-height: clamp(52px, 4vw, 78px);
}
h2{
     font-family: matrix-ii, serif;
    font-weight: 300;
    font-style: normal;
font-size: clamp(40px, 2.8vw, 80px);
    line-height: clamp(48px, 3.2vw, 794px);
}
.mphb-reservation-details p{
    font-family: ballinger-condensed, sans-serif;
    font-weight: 500;
    font-style: normal;
        font-size: clamp(20px, 1.4vw, 30px);
    text-transform: uppercase;
	color: var(--beige);
}
h3{
    font-family: ballinger-condensed, sans-serif;
    font-weight: 500;
    font-style: normal;
        font-size: clamp(20px, 1.4vw, 30px);
    text-transform: uppercase;
}
h3.bold{
    font-family: ballinger-condensed, sans-serif;
    font-weight: 700;
    font-style: normal;
    text-transform: uppercase;
}
h4{
     font-family: matrix-ii, serif;
    font-weight: 300;
    font-style: normal;
    font-size: clamp(21px, 2vw, 32px);
    line-height: clamp(26px, 2.4vw, 38px);
}
p1{
      font-family: matrix-ii, serif;
    font-weight: 300;
    font-style: normal;  
    font-size: 20px;
    line-height: 30px;
}
.menu-nav{
	background: var(--gold) !important;
}



.open-enquire-2{

    font-family: 'ballinger-condensed';
    text-transform: uppercase;
    font-weight: 600;
    text-align: left;
    font-size: 22px;
   
    border: 0;
    height: auto;
		padding: 15px;
    padding-left: 40px;
    padding-right: 40px;
	position: fixed;
 right: 0;
	bottom: 0;
	z-index: 99	
}
.paleblue .open-enquire-2{
	 background: var(--gold);
		color: var(--paleblue);
}
.palegreen .open-enquire-2{
	 background: var(--turquoise);
		color: var(--palegreen );
}
.palegrey .open-enquire-2{
	 background: var(--grey);
		color: var(--beige );
}

.home .open-enquire, .beige .open-enquire-2{
	 background: var(--grey);
		color: var(--beige );
}

p{
      font-family: matrix-ii, serif;
    font-weight: 300;
    font-style: normal;  
    font-size: 20px;
    line-height: 30px;
}
p2{
    font-family: ballinger, sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size: 18px;
    line-height: 22px;
}
p3{
    font-family: ballinger, sans-serif;
    font-weight: 400;
    font-style: normal; 
    font-size: 14px;
    line-height: 18px;
    opacity: 0.4;
}
h4 span{
	    font-size: clamp(18px, 1.6vw, 28px);
    font-family: 'ballinger';
    color: var(--gold);
    font-weight: 100;
}
.room-image{
    height: 50vh;
    z-index: 1;
}
.small-room-image{
    height: 30vh;
        
}




.mphb_sc_search_results-wrapper .small-room-image{
	height: 30vh;
	width: 29vw;
}
.small-room-div{
    max-width: 80%;
}
.room-title{
    margin-bottom: 12%;
    margin-top: 12%;
    max-height: 28px;
}
.room-title-2{
    margin-bottom: 17%;
    margin-top: 12%;
    max-height: 35px;
}
.room-title-3{
    margin-bottom: 8%;
    margin-top: 5%;
    max-height: 35px;
}
.next-room-div{
            padding: 8% 12% 16%;
}
.room-outer-div{
	padding: 7% 3% 10%;
}
.full-image{
    height: 100vh
}
.background-title{
    position: fixed;
    z-index: 2;
}
.beige{
    background:  var(--beige);
}
.font-beige{
    color: var(--beige);
}
.font-gold{
    color: var(--gold);
}
.gold{
    background:  var(--gold);
}
.turquoise{
    background:  var(--turquoise);
}
.palegreen{
    background:  var(--palegreen);
}
.palegrey{
    background:  var(--palegrey);
}
.paleblue{
    background:  var(--paleblue);
}

a{
	text-decoration: none;
}
a:hover{
	text-decoration: none;
}
.room-block.paleblue h3, .room-block.paleblue h4, .room-block.paleblue h2, .room-block.paleblue p1{
    color:  var(--gold) !important;
}
.room-block.palegrey h3, .room-block.palegrey h4, .room-block.palegrey h2, .room-block.palegrey p1{
    color:  var(--grey) !important;
}
.room-block.palegreen h3, .room-block.palegreen h4, .room-block.palegreen h2, .room-block.palegreen p1{
    color:  var(--turquoise) !important;
}
.contact a{
	color: beige !important;
	border-bottom: 1px solid var(--gold);
	text-decoration: none;
}
.paleblue h3{
    color:  var(--gold);
}
.palegrey h3{
    color:  var(--beige);
}
.palegreen h3{
    color:  var(--turquoise);
}
.beige h3{
    color:  var(--gold);
}
.paleblue .navbar{
    background:  var(--paleblue);
    color: var(--gold);
}
.paleblue .arrow path, .paleblue .arrow line{
  stroke: var(--gold) !important;
}
.palegrey .navbar{
     background:  var(--palegrey);
    color: var(--beige);
}
.palegrey .arrow path, .palegrey .arrow line{
  stroke: var(--grey) !important;
}
.palegreen .navbar{
     background:  var(--palegreen);
    color: var(--turquoise);
}
.beige .navbar{
     background:  var(--beige);
    color: var(--gold);
}
.beige .navbar a{
    color: var(--gold);
}
.palegreen .arrow path, .palegreen .arrow line{
  stroke: var(--turquoise) !important;
}
.footer{
    padding-top: 5% !important;
    padding-bottom: 2% !important;
    background:  var(--beige);
    color: var(--gold)
}
.home{
    background:  var(--beige);
}
.home .navbar, .home .navbar a{
    background:   var(--gold);
    color: var(--beige);
}
	.text-div{
		    max-width: 80%;
	}
	.room-block:nth-child(2n) .text-part{
	-ms-flex-order: 1 !important;
    order: 1 !important;	
	}
	.room-block:nth-child(2n) .image-large-padding{
	padding-right: 5% !important;
		padding-left: 0% !important;
	}
	.room-block:nth-child(2n) .img-part{
	-ms-flex-order: 2 !important;
    order: 2 !important;
		
	}
#menu-main-menu{
    margin-bottom: 0px !important
}
.paleblue .navbar, .paleblue .navbar a{
    color:  var(--gold);
}
.palegreen .navbar, .palegreen .navbar a{
    color:  var(--turquoise);
}
.palegrey .navbar, .palegrey .navbar a{
    color:  var(--beige);
}
.nav-load{
  -webkit-animation: nav-load 0.7s ease; /* Safari 4+ */
  -moz-animation:    nav-load 0.7s ease; /* Fx 5+ */
  -o-animation:      nav-load 0.7s ease; /* Opera 12+ */
  animation:         nav-load 0.7s ease; /* IE 10+, Fx 29+ */
}
@keyframes nav-load{
0%{
transform: translateY(-200%);
}
100%{
transform: translateY(0%);
}
}

@-webkit-keyframes nav-load{
0%{
transform: translateY(-200%);
}
100%{
transform: translateY(0%);
}
}
@-moz-keyframes nav-load{
0%{
transform: translateY(-200%);
}
100%{
transform: translateY(0%);
}
}
@-o-keyframes nav-load{
0%{
transform: translateY(-200%);
}
100%{
transform: translateY(0%);
}
}
@keyframes nav-load{
0%{
transform: translateY(-200%);
}
100%{
transform: translateY(0%);
}
}

.paleblue .bar-1, .paleblue .bar-2, .paleblue .bar-3{
	border-top: 2px solid var(--gold);
}
.palegrey .bar-1, .palegrey .bar-2, .palegrey .bar-3{
	border-top: 2px solid var(--beige);
}

.palegreen .bar-1, .palegreen .bar-2, .palegreen .bar-3{
	border-top: 2px solid var(--turquoise);
}
.beige .bar-1, .beige .bar-2, .beige .bar-3{
	border-top: 2px solid var(--gold);
}
.home .bar-1, .home .bar-2, .home .bar-3{
	border-top: 2px solid var(--beige);
}
.paleblue .home-logo path,
.palegrey .home-logo path,
.beige .home-logo path,
.palegreen .home-logo path{
    fill: var(--gold) !important;
}
.home .home-logo path{
    fill: var(--beige) !important;
}
.menu-nav .home-logo path{
	background: var(--beige) !important;
}
.paleblue .menu-nav .home-logo path,
.palegrey .menu-nav .home-logo path,
.beige .menu-nav .home-logo path,
.palegreen .menu-nav .home-logo path{
    fill: var(--beige) !important;
}
.menunew li{
	padding-top: 30px;
}

.home-text{
    padding-top: 34vh;
    text-align: center;
}
.general-padding{
    padding: 8.3%;
}
.image-large-padding{
    padding: 5%;
}
.arrow-div:hover .arrow{
   margin-left: 60px;
    transition: 0.5s ease;
}
 .arrow{
    transition: 0.5s ease;
}
.container-fluid{
    position: relative;
    z-index: 2
}
.arrow-div{
    display: inline-flex;
}
.arrow{
        margin-top: 5px;
    margin-left: 20px;
}

.text-div{
	height:fit-content;
    min-height: 40vh;
}
.navbar{
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 99;
	padding: 20px 40px;
}
.home-height{
height: 100vh;
}
.house img{
    max-height: 60%;
    margin-top: 20%;
}
.house {
text-align: center
}
.home-background{
    position: fixed;
    z-index: 1;
}
.navbar ul{
    list-style: none;
    padding-left: 0px;
}
.navbar ul li{
    display: inline;
    text-transform: uppercase;
	padding-left: 40px;
}
.nav-left{
    width: 50%;
}
.nav-right{
    width: 50%;
    text-align: right;
}
.show-when-small{
	display: none;
}



.menunew {
	top: 0;
  height:100%;
  width:100%;
  z-index:90;
  display:none;
  text-align:center;
    position: fixed;
     background:var(--gold);
    color: var(--beige) !important;
    padding-top: 38vh;
}

.menunew li  {
  
    text-decoration:none;
    list-style-type: none;
    
}

 .menunew li  a {
  
    padding-top:3em;
    text-decoration:none;
    color:var(--beige)  !important;
} 
.menu-socials li a {
    text-decoration:none;
    color:var(--beige)  !important;
}
.show-when-small{
    display: none;
}

.burger-menu { 
  cursor:pointer;

}

.master-container{
    position: fixed;
    z-index: 9999999; 
    right: 25px;
    margin-top: 5px;
}
.bar {
   transition:0.4s;
  
}



.bar-1 {
  
  display: block;
  width: 28px;
  border-top: 2px solid var(--beige);
  padding-top:6px;
  cursor:pointer;
  transition:0.4s;
}
 .bar-2 {     
  display: block;
  width: 28px;
  border-top: 2px solid var(--beige);
  padding-top:5px;  
  display:fixed;
  transition:0.4s;
  }
   .bar-3 {  

  display: block;
  width: 28px;
  border-top: 2px solid var(--beige);
  padding-top:5px;
  transition:0.4s;

  }


.change .bar-1 {

-webkit-transform: rotate(-45deg) translate(-5px, 7px);
    transform: rotate(-45deg) translate(-5px, 8px);
    border-top: 2px solid  var(--beige);
}

.change .bar-2 {opacity:0;}

.change .bar-3 {
    -webkit-transform: rotate(45deg) translate(-5px, 4px);
    transform: rotate(45deg) translate(-5px, -3px);
    border-top: 2px solid  var(--beige);
}






@media (max-width: 992px) {
	.full-image{
		height: 40vh;
	}
	.contact a{
		line-break: anywhere;
	}
	.room-image{
		 height: 35vh;
	}
	.mphb_sc_search-wrapper form {
    display: inline-block !important;
    background-color: transparent !important;
    margin-bottom: 20px !important;
    width: 100% !important;
}
	#searching .mphb_sc_search-adults, #searching .mphb_sc_search-check-out-date, #searching .mphb_sc_search-check-in-date{
		display: block !important;
		text-align: left !important;
	}
	#searching .mphb_sc_search-adults {
    padding-right: 30px !important;
    padding-left: 20px !important;
}
	
	#menu-main-menu-1{
		    padding-left: 0;
	}
	#menu-main-menu-1 ul li{
		   padding: 30px;
	}
	.text-div {
		height:fit-content;
    min-height: 30vh;
}
.text-div {
    max-width: 90%;
	
}
	.dive-in-lower{
		padding: 35px 30px
	}
	.text-part{
		padding: 40px 30px !important
	}
	.general-padding{
		padding: 40px 30px;
	}
	.hide-when-small{
		display: none ;
	}
	.show-when-small{
	display: block;
}
	.img-part{
		height: 34vh;
	}
	.home-background{
		    max-width: 100vw;
	}
	.home-height{
		height: 45vh;
	}
	.home-height-2{
		height: 90vh !important;
	}
	.room-block-small{
		padding: 0 !important;
	}
	.room-block-small .image-large-padding, .room-block-small .img-part{
		padding: 0 !important;
	}
	.room-block:nth-child(2n) .image-large-padding {
    padding-right: 0% !important; 
}
	.room-outer-div {
    padding: 35px 30px 40px;
}
	.navbar{
		padding: 20px 30px;
	}
	.navbar svg{
		    max-width: 100%;
	}
}


@media (max-width: 500px) {
	.logo-img{
		max-width: 180px;
		padding-bottom: 50px ;
		padding-top: 20px;
	}
	.mphb_sc_search-check-in-date, .mphb_sc_search-check-out-date{
		margin-bottom: 0px !important
	}
	.contact-form .mphb_sc_search-check-in-date, .contact-form .mphb_sc_search-check-out-date{
		text-align: left !important;
		padding: 0px !important;
		padding-bottom: 10px !important;
	}
	.contact-form .mphb_sc_search-adults{
				text-align: left !important;
		padding: 0px !important;
		padding-bottom: 10px !important;
	}
	.room-section{
		padding-bottom: 20px !important;
		padding-top: 20px !important;
	}
	.mphb-check-in-date-wrapper, .mphb-check-out-date-wrapper{
		margin-bottom: 0px !important;
	}
	.contact-form input.button {
    padding: 13px;
		    margin-bottom: 0px !important;
}
	.mphb-rooms-quantity-single{
    padding-bottom: 16px;
}
	.mphb_sc_checkout-wrapper .col-12{
		padding-left: 0px !important;
		padding-right: 0px !important;
	}
	#mphb-customer-details{
		padding-top: 30px;
	}
	.mphb_cb_checkout_form .mphb-price-breakdown .mphb-price-breakdown-expand>.mphb-inner-icon, .mphb_sc_checkout-form .mphb-price-breakdown .mphb-price-breakdown-expand>.mphb-inner-icon{
		border: 0 !important;
	}
	.mphb-guest-name-wrapper input{
		width: 100% !important;
	}
	.contact-form-outer {

    padding-top: 30px !important;
}
	.footer .col-lg-6{
		text-align: left !important;
	}
	.footer{
		padding-bottom: 20px !important;
	}
	.img-div-smaller{
		padding-top: 30px !important;
		padding-left: 0px !important;
		padding-right: 0px !important;
		padding-bottom: 20px !important;
	}
	.img-div-width{
		width: 100% !important;
	}
	.open-enquire {
    font-size: 20px;
    padding: 15px;
    position: fixed;
    width: 100%;
    text-align: center;
}
		.text-div {
		height: fit-content;	
    min-height: 30vh;
}
}