* { margin: 0; padding: 0; box-sizing: border-box;}
img {max-width: 100%;}

/* book now start*/

.book-now-wrapper {font-family: "Roboto", Sans-serif; display: flex; flex-wrap: wrap; height: 100vh; width: 100%; overflow-y: auto; position: fixed; top: 0; left: 0; z-index: 999;  }
.book-now-wrapper.hide { display: none; }
body.popup-open { overflow: hidden; }
.event-box { width: 35%; padding: 30px; background-color: #fff; text-align: center; }
.event-box .pic { padding-bottom: 20px; }
.event-box .pic img {object-fit: cover; object-position: center; width: 100%; }
.event-box .date { font-size: 12px; text-transform: uppercase; color: #847D5D; padding-bottom: 15px; }

.event-box .title {color: #002F56; font-family: "Old Standard TT", Sans-serif; font-size: 35px; font-weight: 400; font-style: normal; line-height: 40px; color: #002F56; padding-bottom: 20px; }
.event-box .txt { font-size: 16px; line-height: 1.5; font-weight: 300; color: #5E6770; padding-bottom: 20px; }

.person-count{ background-color: #002F56; position: relative;}
.person-count span.person { color: #fff; text-transform: uppercase; position: absolute; left: 50%; top: 20px; margin-left: 15px; transform: translateX(-50%);  }
.person-count span.level{ display: inline-block; margin-right: 10px; font-size: 21px; color: #6E6E6E; transform: translateY(-20px);}
.person-count .number-style{ display: flex;}

.number-style input{ height: 65px;  text-align: center; border: none; font-size: 16px; color: #fff; background: none; width: calc(100% - 140px); padding-right: 55px;}

.number-minus{ border-right: 1px solid #fff;}
.number-plus{ border-left: 1px solid #fff;}
.number-style span{ position: relative; float: left; width: 70px; height: 65px; cursor: pointer;}
.number-style span.number-minus::after{ content: ""; position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -5px; width: 10px; height: 2px; background-color: #fff;}
.number-style span.number-plus::after{ content: ''; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -5px; width: 10px; height: 2px; background-color: #fff;}
.number-style span.number-plus::before{ content: ''; position: absolute; top: 50%; left: 50%; margin: -5px 0 0 -1px; width: 2px; height: 10px; background-color: #fff;}

.number-style input[type='number'] { -moz-appearance:textfield;}
.number-style input::-webkit-outer-spin-button, .number-style input::-webkit-inner-spin-button { -webkit-appearance: none;}



.form-box { width: 65%; padding: 30px; background: url(../images/book-now-bg.jpg) no-repeat; background-size: cover; }

.form-content { background-color: #fff; padding: 50px; position: relative; height: 100%;}
.book-close { position: absolute; width: 45px; height: 45px; position: absolute; top: 30px; right: 30px; cursor: pointer; }
.book-close:hover { opacity: 0.7; }

.form-content .title {color: #002F56; font-family: "Old Standard TT", Sans-serif; font-size: 50px; font-weight: 400; font-style: normal; line-height: 55px; color: #002F56; padding-bottom: 50px; text-align: center; }
.form-content .title span {display: block; text-decoration: underline;} 

.form-content .form-row { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.form-content .form-row .col-50 { width: 50%; padding: 0 15px; margin-bottom: 15px; }
.form-content .form-row .col-100 { width: 100%; padding: 0 15px; margin-bottom: 15px; }

.form-content form { width: 70%; margin: 0 auto; }

.form-content input[type="text"], .form-content input[type="email"], .form-content input[type="tel"] { border: 0; border-bottom: 1px solid #002F56; padding: 10px 0; color: #002F56; font-family: "Roboto", Sans-serif; font-size: 16px; width: 100%;  }
.form-content input[type="text"]:focus, .form-content input[type="email"]:focus, .form-content input[type="tel"]:focus { outline: none;  }

.btn-book { border: 1px solid #D3D1C1; padding: 20px 35px; background-color: #fff; color: #002F56; font-size: 14px; line-height: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; display: inline-block; border-radius: 65px; cursor: pointer; margin-top: 50px;  }
.btn-book:hover {background-color: #D3D1C1; }

.text-center { text-align: center; }

@media (max-width: 991px) {

.event-box, .form-box { width: 100%; padding: 20px; }
.event-box { order: 2; }
.form-box { order: 1; }

}

@media (max-width: 767px) {

.event-box .title { font-size: 25px; }
.form-content .title {font-size: 30px; line-height: 1.2;}
.form-content { padding: 20px; }

.form-content .title { padding: 15px 0; }

.book-close {width: 30px; height: 30px; top: 10px; right: 10px;}

.form-content form { width: 100%; }
.form-content .form-row .col-50 { width: 100%; }
.btn-book { margin-top: 15px; }

}

/* book now  end*/