@charset "utf-8";
/***************************************************************************************************
 * Date Range Picker
 **************************************************************************************************/
.date_range_picker {
    position: relative;
    z-index: 10;
	float:left;
/*	width:100%;*/
}
.date_range_picker.active {
    z-index: 200;
}

/***************************************************************************************************
 * Values
 **************************************************************************************************/


.date_range_picker .values {
    padding: 0;
    box-sizing: border-box;
	float: left;
	width: 100%;
}

.date_range_picker.active .values {
    position: relative;
    z-index: 200;
}

.date_range_picker .values .value,
.date_range_picker .values .to,
.date_range_picker .values .clear {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    font-size: 18px;
    line-height: 24px;
}

.date_range_picker .values .to {
    width: 24px;
    height: 13px;
    padding-top: 9px;
    background: url("../img/to.svg") 50% 50% no-repeat;
    background-size: 24px 13px;
}
.date_range_picker .values .clear {
    float: right;
    width: 12px;
    height: 12px;
    margin: 0;
    padding: 6px 0;
    cursor: pointer;
    display: none;
    background: url("../img/clear.svg") 50% 50% no-repeat;
    background-size: 12px 12px;
}

.date_range_picker .values .value span {
    cursor: pointer;
}
.date_range_picker .values .value.active span {
    color: #3399cc;
}
.date_range_picker .values .value input {
    opacity: 0;
}


/***************************************************************************************************
 * Calendar
 **************************************************************************************************/


.date_range_picker .calendar {
    display: none;
    width: 566px;
    height: 319px;
    margin: 0px;
    padding: 10px 0px;
    background: #fff;
    text-align: center;
    overflow: hidden;

    position: absolute;
    top: 100%;
    left: 0px;
    z-index: 100;

    -webkit-user-select: none;
    -moz-user-select: none;
    box-sizing: border-box;
    transition-duration: 0.5s;
}
.date_range_picker.active .calendar {
    display: block;
}

.date_range_picker .calendar .button {
    position: absolute;
    top: 20px;
    z-index: 300;

    width: 36px;
    height: 29px;
    padding: 8px;
    border: 1px solid #ccc;
    opacity: .5;
    cursor: pointer;
    box-sizing: border-box;
    border-radius: 4px;
    background-size: 18px 11px;
    background-color: #fff;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.date_range_picker .calendar .button:hover {
    opacity: 1;
}
.date_range_picker .calendar .button-prev {
    background-image: url("../img/prev.svg");
    left: 20px;
}
.date_range_picker .calendar .button-next {
    background-image: url("../img/next.svg");
    right: 20px;
}


.date_range_picker .calendar .container {
    position: absolute;
    top: 10px;
    left: -263px;
    z-index: 200;

    float: left;
    width: 1092px;
    text-align: left;
    font-size: 0px;
}
.date_range_picker .calendar table {
    display: inline-block;
    vertical-align: top;
    width: 253px;
    margin: 10px;
    padding: 0px;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
}
.date_range_picker .calendar table caption {
    width: 100%;
    line-height: 29px;
    font-size: 18px;
    font-weight: 700;
    margin: 0px 0px 10px 0px;
}
.date_range_picker .calendar table th {
    width: 37px;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #999;
    box-sizing: border-box;
}
.date_range_picker .calendar td {
    width: 36px;
    height: 35px;
    font-size: 15px;
    line-height: 33px;
    box-sizing: border-box;
}
.date_range_picker .calendar td.valid,
.date_range_picker .calendar td.inactive {
    border: 1px solid #e4e7e7;
}
.date_range_picker .calendar td.valid {
    cursor: pointer;
}
.date_range_picker .calendar td.valid:hover {
    background: #cccccc;
}
.date_range_picker .calendar td.today {
    color: #666;
}
.date_range_picker .calendar td.inactive {
    color: #ccc;
}


.date_range_picker .calendar td.valid.intermediate,
.date_range_picker .calendar td.valid.intermediate-hover,
.date_range_picker .calendar td.valid.hovered {
    background: #83c6e7;
    border: 1px double #56aed9;
    color: #fff;
}
.date_range_picker .calendar td.valid.intermediate-hover,
.date_range_picker .calendar td.valid.hovered {
    color: #3399cc;
}
.date_range_picker .calendar td.valid.start,
.date_range_picker .calendar td.valid.end {
    background: #3399cc;
    border: 1px double #3399cc;
    color: #fff;
}




.Guests button {
  background-color: transparent;
  border: none;
  font: inherit;
  padding: 0;
}


.Guests label { font-size:14px; text-align:right; margin-right:20px;}
.Guests label {
  min-width: 120px;
}
.Guests label.long {
  min-width: 320px;
}

.Guests ul {
  padding: 0 0 0 1em;
}
.Guests ul li + li {
  margin-top: .5em;
}



/* == Stepper ============================ */

/* ======================================== *\
    OBJECT
\* ======================================== */
.Guests .o-horizontal {
  align-items: center;
  display: flex;
}
.Guests .o-horizontal + .o-horizontal {
  margin-top: 20px;
}

.Guests .o-vertical {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
/*  width: 200px;*/
	width:auto;
}

/* == OBJECTS ============================= */
/* ======================================== *\
    COMPONENTS
\* ======================================== */
.Guests .c-stepper-group {
  max-width: 320px;
}

.Guests .c-input-wrapper {
  align-items: center;
  background-color: #fff;
  border: 1px solid #999;
  display: flex;
  padding: .5em;
}
.Guests .c-input-wrapper button {
  color: #ff9200;
  font-size: 1.25em;
  font-weight: bold;
  height: 25px;
  line-height: 25px;
  width: 25px;
}
.Guests .c-input-wrapper button:disabled {
  color: #ccc;
}
.Guests .c-input-wrapper input[type="number"] {
  border: none;
  font-size: 1em;
  margin: 0 10px;
  padding: 0;
  text-align: center;
  width: 30px;
}
.Guests .c-input-wrapper input[type="number"]::-webkit-inner-spin-button,
.Guests .c-input-wrapper input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}


.Guests .c-input-wrapper input[type='number'] {
    -moz-appearance:textfield;
}

.Guests .c-input-wrapper input::-webkit-outer-spin-button,
.Guests .c-input-wrapper input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

/* == COMPONENTS ========================== */

.Guests_trigger { box-sizing: border-box; float:left; padding:0; margin-left:40px; margin-right:20px; cursor:pointer}
.Guests {
    position: absolute;
    padding: 20px;
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    z-index: 100;
    -webkit-user-select: none;
    -moz-user-select: none;
    box-sizing: border-box;
    transition-duration: 0.5s;
	top:100%;
	right:0;
}
	

.fieldLabel { padding:0; font-size:14px; letter-spacing:normal; font-weight:300; color:#666; text-transform:uppercase; line-height:24px; }

.date_range_picker .values .value span.date_at { /*width:160px;*/ float:left; width:auto}
.date_range_picker .values .value span.date_to { /*width:210px;*/ float:left; width:auto}


.date_range_picker .values .value, 
.date_to,
.date_att,
.activeLine p { margin:0; padding:0; /*font-size:28px;*/ font-size:24px; letter-spacing:-1.5px; font-weight:400; color:#333; line-height:26px; float:left; /*width:250px*/ }
.activeLine p { width:250px }
body.home .activeLine p { width:150px }

.date_range_picker .values .clear_,
.date_range_picker .values .to { line-height:78px; height:78px; margin:0 20px; float:left}

.date_range_picker .values .clear { /*opacity:.4; width:65px; margin-top:6px;*/ display:none} 
.date_range_picker .values .clear:hover { opacity:1} 
/*.date_range_picker .values .clear:after { content:"Clear Dates"; font-size:12px; margin-top:5px; line-height:normal; height:auto}*/

.Guests.hide {
    display: none;
}

.calendar,
.Guests {
	box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.50);	
	z-index:300;
	margin-top:-20px !important;
	}
	
.cta { background-color:#dbe4db; padding:19px 30px 30px 30px; position:relative; float:right}
.cta h3 { font-weight:400; font-size:16px; color:#20658c;}
.cta .submit { border:none; outline:none; background-color:#20658c; color:#fff; font-size:12px; font-weight:400; padding:15px 35px; letter-spacing:1px; -webkit-transition: all 1s; /* Safari */ transition: all 1s; cursor:pointer}

.cta .submit:hover {background-color:#b09d68;  -webkit-transition: all 1s; /* Safari */ transition: all 1s;}

.reservation_cta_container{ 
	float: none;
	width: 100%;
	max-width: 920px;
	margin: 0 auto;
	padding-top:20px;
	padding-bottom:20px;
}
.date_range_picker { padding:49px 0px 21px 30px; }

.innerpagebookingsection .cta { padding:23px 0 0 0; background-color:transparent }
.innerpagebookingsection .cta h3 { text-align:center; margin-bottom:10px;}

.cta h3 a { color:#000}

body.home .floating_container { position: absolute; bottom:0px; width:100%;}

@media only screen and (max-width: 959px) {
body.home .floating_container { position: relative; bottom:0px; width:100%;}
body.home .homefloatingcta .date_range_picker { padding:10px;}
body.home .homefloatingcta .cta { padding-top:20px;}
body.home .homefloatingcta .Guests_trigger { margin-top:0;}
}

@media only screen and (max-width: 1023px) {
/*
	.floating_container .first_level { position:relative; top:0; }
	.floating_container .first_level p { margin:0;}
	.floating_container .second_level { position:relative; bottom:0;}
*/
	
	.cta { padding:20px 30px 30px 30px; margin-top:-30px; 	}
	.date_range_picker { padding:34px 10px 11px 30px; }
	.hideonmobile { display:none !important}
	.hideontablet { display:none !important}	
	
	.reservation_cta_container h4 { margin-left:30px; float: left; width: 65%;}
	.date_range_picker { width:100%; }
	body.home .activeLine p { width:250px;}
	.Guests { right:80px;}
	
	.homefloatingcta .date_range_picker	{ padding-bottom:20px !important; }
	body.home .homefloatingcta .activeLine p { font-size:19px;}
}
@media only screen and (min-width: 758px) and (max-width: 1366px){
	.reservation_cta_container h4 { display:none}	
	.date_range_picker { width:70%; }	
	.innerpagebookingsection .cta { padding:0; margin-top:0px;}	
}
@media only screen and (min-width: 1025px) and (max-width: 1366px){
	.date_range_picker .values .value, .date_to, .date_att, .activeLine p { font-size:22px;}
	.date_range_picker .values .clear_, .date_range_picker .values .to { margin:0 20px;}
	.Guests_trigger	{ margin-left:20px;}
	.activeLine p { width: 195px}
	.cta { padding:0px 20px 15px 30px; 	}
	.date_range_picker { padding:29px 10px 11px 30px; }
	.date_range_picker { width:60%; }
	.home .date_range_picker { width:100%; }	
	.hideontablet { display:none}
	.reservation_cta_container h4 { margin-left:30px; float: left; width: 65%; display:none}	
	.innerpagebookingsection .cta { padding:0; margin-top:-10px;}

	.homefloatingcta .date_range_picker .values .value,
	.homefloatingcta .date_to,
	.homefloatingcta .date_att { max-width:105px; font-size: 22px; line-height: 1.2em; text-align: center;}
}


@media only screen and (max-width: 1024px) {
	/*.date_range_picker { width:100%; }*/
}


@media only screen and (max-width: 600px) {
	.date_range_picker { padding:0 20px; padding-bottom:20px;}
	.home .date_range_picker { background-color:#dbe4db; width:100%;}
	.activeLine p { width:100%; }
	

	.date_range_picker .values .value, 
	.date_to, 
	.date_att, 
	.activeLine p {font-size: 22px; letter-spacing:0}
	body.home .activeLine p	{ width:auto;}
	.date_range_picker .values .clear_,
	.date_range_picker .values .to { margin:0 20px;  line-height:55px; height:55px; }
	.Guests_trigger { margin:0; margin-top:20px; width:100%;}


	.cta { background-color:#c5d8c5; padding:10px; padding-bottom:20px; width:100%; text-align:center; margin-top:0;}	
	.cta .submit { margin: 0 auto; text-align: center; display: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
	.cta h3 { font-size:14px; margin:4px 0}
	.innerpagebookingsection { padding-bottom:30px !important}
	.date_range_picker .calendar { width:283px; z-index:400; left:20px}
	
	.calendar, .Guests {
	    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.30); 
	    z-index: 300;
	    margin-top: -10px !important;
	}	
	.Guests { left:20px; right:auto; padding:15px; }
	.date_range_picker.active .calendar { top:70px !important}
	.reservation_cta_container h4 { font-weight:400; padding:0; margin:0; margin-left:20px; padding-bottom:20px; width:100%;  }
	.home .reservation_cta_container{ background-color:#dbe4db; float:left; padding-bottom:0;}
	
	.home .homefloatingcta .date_range_picker .calendar { left:20px;}	
}


.homefloatingcta .reservation_cta_container h4 { display:none;  }
.homefloatingcta .reservation_cta_container { padding:0;}
.homefloatingcta .cta h3 a { display:none}
.homefloatingcta .cta { width: 100%; text-align: center; padding: 10px 20px 25px 20px;}
.homefloatingcta .date_range_picker { padding: 20px 10px 0px 20px; }
.homefloatingcta .Guests_trigger { float:right; margin-right:10px; text-align:right; max-width:100px;}
.homefloatingcta .Guests { right:20px;}
body.home .homefloatingcta .activeLine p {  padding-bottom:20px; width:100px; max-width:100px !important;}


.homefloatingcta .date_range_picker .values .value,
.homefloatingcta .date_to,
.homefloatingcta .date_att { max-width:90px; font-size: 19px; line-height: 1.2em; text-align: center; padding-bottom:10px;}



.homefloatingcta .date_range_picker .calendar { left:-50%}
.homefloatingcta .date_range_picker .values .clear_,
.homefloatingcta .date_range_picker .values .to { margin:0 5px;}

@media only screen and (max-width: 320px) {
	.date_range_picker { padding:0 0 0 20px;}
	body.home .homefloatingcta .date_range_picker .values .value,
	body.home .homefloatingcta .date_to,
	body.home .homefloatingcta .date_att { max-width:80px; font-size: 16px; line-height: 1.2em; text-align: center; padding-bottom:10px;}
	body.home .homefloatingcta .activeLine p {width:80px; max-width:80px; font-size: 16px; line-height: 1.2em; padding-bottom:0; }
	body.home .homefloatingcta .Guests_trigger	{max-width:80px; font-size: 16px; }
}
@media only screen and (max-width: 960px) {
	.homefloatingcta .date_range_picker .calendar { left:-30%}
}
@media only screen and (max-width: 760px) {
/*	.homefloatingcta .date_range_picker {
		padding-bottom: 0px !important;
	}
*/	
}
@media only screen and (min-width: 760px) and (max-width: 1024px) {
	.homefloatingcta .Guests_trigger {		width: 180px;	max-width: 180px !important;
}
	body.home .homefloatingcta .activeLine p {
		padding-bottom: 20px;
		width: 180px;
		max-width: 180px !important;
	}
}