/* ---------- HEADER ---------- */
header {height:450px; background-image:url('../images/bookings/bookings-header-bg.jpg'); background-size:cover; background-position:center top;}



/* ---------- TITLE ---------- */
#title-wrapper {position:absolute; top:195px; left:0; right:0; max-width:612px; margin:0 auto; padding:0 40px; opacity:0; animation:title 1.5s ease-in-out 0.5s forwards; z-index:-2;} /*Adjust top at different breakpoints*/
#title {width:100%; padding-bottom:31.39%; background-image:url('../images/bookings/bookings-title.svg'); background-repeat:no-repeat; background-position:center top; background-size:contain;}
@keyframes title {
from {margin-top:100px; opacity:0; transform:rotate(20deg); filter:blur(3px); -webkit-filter:blur(3px);}
20% {transform:rotate(-4deg); margin-top:100px;}
40% {transform:rotate(2deg);}
60% {transform:rotate(-1deg);}
75% {transform:rotate(1deg);}
to {margin-top:0; opacity:1; transform:rotate(0deg); filter:blur(0px); -webkit-filter:blur(0px);}
}



/* ---------- CONTENT ---------- */
#content {padding:90px 0; background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(223,236,245,1) 80%);}
#content2 {position:relative; padding:90px 0; z-index:20; background-color: rgb(255,255,255);}
#form-text .underline, #content2 .underline {line-height:22px !important;}
.wavy-line-break {display:block; margin:0 auto;}
#please-note {margin:60px auto 0 auto;}
#testimonials-other {background-image:url('../images/bookings/testimonials-bg.jpg');}
.wavy-light, .wavy-blue {background-position:right -50% top;}



/* ---------- CALENDARS ---------- */
#availability-calendars {position:relative; max-width:1200px; margin:0 auto; padding:60px 20px 40px 20px; overflow:hidden;  border:0px solid blue; z-index:-10;}
#calendar-key {font-size:15px; font-weight:700; padding:0;}
#calendar-key li {display:inline-block; margin:10px; padding:2px 20px; border-radius:6px;}
.available {line-height:40px; color:#ffffff;  background-color:#83b3d8;}
.provisional {line-height:40px; color:#ffffff;  background-color:#c9b0cd;}
.booked {line-height:40px; color:#ffffff;  background-color:#ed5752;}



/* ---------- FORM ---------- */
#form {display:block; max-width:1200px; margin:20px auto; padding:40px; background-color:rgba(131,179,216,1); border-radius:10px; font-size:0;}
#form label {display:inline-block; font-size:16px; color:#ffffff; font-weight:700; text-align:right; padding-right:15px; background-color:; margin-bottom:30px; vertical-align:top;}
#name, #group, #guests, #email, #telephone, #arrival, #departure {display:inline-block; height:41px; font-family:'Red Hat Text', sans-serif; font-size:15px; font-weight:400; color:#446485; text-align:center; line-height:1; background-color:#ffffff; margin-bottom:30px; padding:10px; border:none; outline:none; border-radius:6px; vertical-align:top;}

#name-label {width:9%; height:41px; padding-top:11px;}
#name {width:27%;}
#group-label {width:12%; height:41px; padding-top:11px;}
#group {width:28%;}
#guests-label {width:12.5%; height:41px; padding-top:11px;}
#guests {width:11.5%; -webkit-appearance:none; text-align:center !important; cursor:pointer; text-align-last:center;}
#telephone-label {width:9%; height:41px; padding-top:11px;}
#telephone {width:14%;}
#email-label {width:7%; height:41px; padding-top:11px;}
#email {width:24.5%;}
#arrival-label {width:8%; height:41px; padding-top:11px;}
#arrival {width:13.5%; -webkit-appearance:none; cursor:pointer;}
#departure-label {width:10.5%; height:41px; padding-top:11px;}
#departure {width:13.5%; -webkit-appearance:none; cursor:pointer;}
#form-text {display:inline-block; max-width:75%; height:auto; color:#446485 !important; font-weight:400 !important; line-height:27px; text-align:left !important; margin-right:3% !important; margin-bottom:0 !important; padding:0px !important; vertical-align:top;}
#form-button-wrapper {display:inline-block; width:22%; margin:0 auto; border-radius:10px; box-shadow:0px 12px 0px -5px rgba(66,100,133,0.2); -webkit-transition:box-shadow 0.1s; transition:box-shadow 0.1s;}
#form-button {width:100%; font-family:'Red Hat Text', sans-serif; font-size:16px; font-weight:700; color:#ffffff; line-height:1; background-color:#446485; padding:20px; vertical-align:top; border:0px solid #ffffff; outline:none; border-radius:6px; cursor:pointer; -webkit-transition:color 0.3s, background-color 0.3s; transition:color 0.3s, background-color 0.3s;}
#form-button-wrapper:hover {box-shadow:0px 0px 0px 0px rgba(66,100,133,0.2);}
#form-button:hover {background-color:#ff9a69;}
#form .underline {display:inline-block; border-bottom:2px solid currentColor; line-height:25px;}
#form a {color:#446485;}
#form a:hover {color:#ff9a69;}



/* ---------- RESPONSIVE ---------- 
@media only screen and (max-width: 1280px){
#form {margin:20px 40px;}
#name-label {width:11%;}
#name {width:25%;}
#group-label {width:14%;}
#group {width:26%;}
#guests-label {width:14.5%;}
#guests {width:9.5%;}
#telephone-label {width:11%;}
#telephone {width:14%;}
#email-label {width:9%;}
#email {width:20.5%;}
#arrival-label {width:10%;}
#arrival {width:11.5%;}
#departure-label {width:12.5%;}
#departure {width:11.5%;}
}*/



@media only screen and (max-width: 1280px){
#form {margin:20px 40px;}
#name, #group, #guests, #email, #telephone, #arrival, #departure {font-size:16px;}
#name-label {width:9%; padding-top:4px;}
#name {width:40.5%;}
#group-label {width:10%; padding-top:4px;}
#group {width:40.5%;}
#guests-label {width:9%; padding-top:4px;}
#guests {width:12.5%;}
#telephone-label {width:12%;}
#telephone {width:25.5%;}
#email-label {width:9%;}
#email {width:32%;}
#arrival-label {width:9%;}
#arrival {width:39%;}
#departure-label {width:13%;}
#departure {width:39%;}
}

@media only screen and (max-width: 1200px){
header {height:400px;}
#title-wrapper {top:150px;}
#content {padding:70px 0;}
#content2 {padding:70px 0 0 0;}
#availability-calendars {padding:40px 20px;}
.wavy-light-reverse {background-image:url('../images/wavy-blue-reverse.svg');}
}

/*@media only screen and (max-width: 1000px){
#name, #group, #guests, #email, #telephone, #arrival, #departure {font-size:16px;}
#name-label {width:9%; padding-top:4px;}
#name {width:40.5%;}
#group-label {width:10%; padding-top:4px;}
#group {width:40.5%;}
#guests-label {width:9%; padding-top:4px;}
#guests {width:12.5%;}
#telephone-label {width:13%;}
#telephone {width:24.5%;}
#email-label {width:9%;}
#email {width:32%;}
#arrival-label {width:9%;}
#arrival {width:38%;}
#departure-label {width:15%;}
#departure {width:38%;}
}*/

@media only screen and (max-width: 1100px){
#guests {width:11.5%;}
#telephone-label {width:13%;}
#arrival {width:38.5%;}
#departure-label {width:14%;}
#departure {width:38.5%;}
}

@media only screen and (max-width: 1024px){
#guests {width:10.5%;}
#telephone-label {width:14%;}
#arrival {width:38%;}
#departure-label {width:15%;}
#departure {width:38%;}
}

@media only screen and (max-width: 950px){
#availability-calendars {padding:40px 20px 10px 20px;}
#name {width:39%;}
#group-label {width:13%;}
#group {width:39%;}
#guests {width:8%;}
#telephone-label {width:15%;}
#email-label {width:10.5%;}
#arrival {width:37%;}
#departure-label {width:17%;}
#departure {width:37%;}
#form-text {max-width:70%;}
#form-button-wrapper {width:27%;}
}

@media only screen and (max-width: 900px){
#content .half-width-left, #content .half-width-right {text-align:center;}
.wavy-line-break {margin:0 auto;}
#name-label {width:11%;}
#name {width:35.5%;}
#group-label {width:13.5%;}
#group {width:40%;}
#guests-label {width:11%;}
#telephone-label {width:17.5%;}
#telephone {width:22.5%;}
#email-label {width:11%;}
#email {width:30%;}
#arrival-label {width:11%;}
#arrival {width:35.5%;}
#departure-label {width:18%;}
#departure {width:35.5%;}
#form-text {max-width:67%;}
#form-button-wrapper {width:30%;}
}

@media only screen and (max-width: 800px){
header {height:360px;}
#title-wrapper {top:130px;}
#content {padding:60px 0;}
#content2 {padding:60px 0 0 0;}
#content2 .half-width-left, #content2 .half-width-right {width:100%; padding:0; text-align:center;}
#content2 .half-width-right {margin-top:27px;}
#please-note {margin:60px auto 0 auto;}
#availability-calendars {padding:30px 20px 10px 20px;}
}

@media only screen and (max-width: 800px){
#name-label {width:22%; padding-top:11px;}
#name {width:78%;}
#group-label {width:22%; padding-top:11px;}
#group {width:78%;}
#guests-label {width:22%; padding-top:11px;}
#guests {width:10%;}
#telephone-label {width:22%;}
#telephone {width:46%;}
#email-label {width:22%;}
#email {width:78%;}
#arrival-label {width:22%;}
#arrival {width:28%;}
#departure-label {width:22%;}
#departure {width:28%;}
#form-text {display:block; max-width:100%; text-align:center !important; margin-right:0 !important; padding:10px 0px 30px 0px !important;}
#form-button-wrapper {width:250px; margin:10px 0;}
}

@media only screen and (max-width: 700px){
header {height:340px;}
#title-wrapper {top:110px;}
#content {padding:50px 0;}
#content2 {padding:50px 0 0 0;}
#name-label {width:15%; padding-top:4px;}
#name {width:85%;}
#group-label {width:15%; padding-top:4px;}
#group {width:85%;}
#guests-label {width:15%; padding-top:4px;}
#guests {width:10%;}
#telephone-label {width:22%;}
#telephone {width:53%;}
#email-label {width:15%;}
#email {width:85%;}
#arrival-label {width:15%;}
#arrival {width:31%;}
#departure-label {width:23%;}
#departure {width:31%;}
}

@media only screen and (max-width: 650px){
#telephone-label {width:24%;}
#telephone {width:51%;}
#arrival {width:30%;}
#departure-label {width:25%;}
#departure {width:30%;}
}

@media only screen and (max-width: 600px){
header {height:320px;}
#title-wrapper {top:100px;}
#name-label, #group-label, #guests-label, #telephone-label, #email-label, #arrival-label, #departure-label {width:30%;}
#name, #group, #guests, #telephone, #email, #arrival, #departure {width:70%;}
#name-label, #group-label, #guests-label {padding-top:11px;}
}

@media only screen and (max-width: 550px){
header {height:300px;}
.half-width-left, .half-width-right {width:100%; padding:0;}
#form {padding:30px;}
#form label {display:block; font-size:16px; color:#ffffff; font-weight:700; text-align:center; margin-bottom:0; padding-right:0px;}
#name-label, #group-label, #guests-label, #telephone-label, #email-label, #arrival-label, #departure-label {width:100%; height:26px; vertical-align:auto; padding-top:0px;}
#name, #group, #guests, #telephone, #email, #arrival, #departure {width:100%;}
#form-text {padding:0px 0px 30px 0px !important;}
#form-button-wrapper {margin:0 0 10px 0;}
}

@media only screen and (max-width: 500px){
header {height:280px;}
#title-wrapper {top:90px; padding:0 30px;}
#availability-calendars {padding:30px 20px 20px 20px;}
#calendar-key {font-size:14px; padding:0;}
#calendar-key li {margin:5px; padding:2px 15px; border-radius:6px;}
#form {margin:30px;}
}

@media only screen and (max-width: 480px){
#content {padding:30px 0 30px 0;}
#content2 {padding:40px 0 0 0;}
#form-button-wrapper {width:100%;}
}

@media only screen and (max-width: 450px){
header {height:260px;}
#availability-calendars {padding:30px 25px 0px 25px;}
}

@media only screen and (max-width: 400px){
header {height:240px;}
}