/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
@font-face {
    font-family: 'Futura-Bold';
    src: url('../fonts/futura-bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    
}
@font-face {
    font-family: 'Futura BdCn BT';
    src: url('../fonts/futura-bold-condensed-bt') format('truetype');
    font-weight: normal;
    font-style: normal;
    
}
@font-face {
    font-family: 'Futura Bk BT';
    src: url('../fonts/futura-book-bt.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    
}
@font-face {
    font-family: 'Futura-CondensedLight';
    src: url('../fonts/futura-condensedlight') format('truetype');
    font-weight: light;
    font-style: normal;
    
}
@font-face {
    font-family: 'Futura Md BT';
    src: url('../fonts/futura-medium-bt') format('truetype');
    font-weight: normal;
    font-style: normal;
    
}

#reservation {
  padding: 65px;
  background-color: #2189F6;
  color: #fff;
  flex: 1 0 41%;
  max-width: 41%;
  order: 3;
  border-radius: 10px;
}
#reservation .acf-field {
    border: 0;
    padding: 0;
    flex: 1 0 100%;
    max-width: 100%; 
    margin-top: 10px;   
}
#reservation .acf-field .acf-label{
    margin-bottom: 0;
}
#reservation label{
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 14px;
}
#reservation .acf-field-email label,
#reservation .acf-field-textarea label,
#reservation .acf-field-text label {
    display: none;
}

#reservation .container {
  padding: 0;
}
#reservation input[type='number']{
    text-align: right;
}
#reservation input[type='number'],
#reservation input[type='text'],
#reservation input[type='email'],
#reservation input[type='tel'],
#reservation input[type="checkbox"],
#reservation textarea,
#reservation select {
    background: #fff !important;
    border: 1px solid #2189F6;
    color: #2189F6 !important;
    font-size: 22px !important;
    font-family: 'Futura Md BT', sans-serif;
}
#reservation input[type="checkbox"]{
    width: 20px;
    height: 20px;
}
#reservation select{
}
#reservation input::placeholder {
  color: #2189F6;
    font-size: 22px !important;
    font-family: 'Futura Md BT', sans-serif;

}

#reservation input::-webkit-input-placeholder {
  /* Edge */
  color: #2189F6;
    font-size: 22px !important;
    font-family: 'Futura Md BT', sans-serif;

}

#reservation input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #2189F6;
    font-size: 22px !important;
    font-family: 'Futura Md BT', sans-serif;

}
#cf7sg-form-reservation-2 label {
  text-align: center;
  display: block;
}
#cf7sg-form-reservation-2 textarea {
  height: 40px;
}

.reservation-form-title{
    font-size: 45px;
    font-family: 'Futura-Bold', sans-serif;
}

#reservation .acf-field{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
#reservation .acf-field-631a23250ee03{
    justify-content: flex-end;
}
#reservation .acf-field-6089a40138f3456,
#reservation .acf-field-631a23250ee03,
#reservation .acf-field-631a23b60ee04,
#reservation .acf-field-631a241d0ee05{
    position: relative;
}
#reservation .acf-field-6089a40138f3456:before,
#reservation .acf-field-631a23250ee03:after,
#reservation .acf-field-631a23b60ee04:after,
#reservation .acf-field-631a23b60ee04:before,

#reservation .acf-field-631a241d0ee05:after,
#reservation .acf-field-631a241d0ee05:before{
    display: inline-block;
    position: absolute;
    content: '';
    margin: auto;
}
#reservation .acf-field-631a241d0ee05:after{
    width: 53px;
    height: 53px;
    background: url(../images/icon-clock.svg) 0 0 transparent no-repeat;
    background-size: cover;
    left: 0;
    top: -50px;
    bottom: 0;
}
#reservation .acf-field-6089a40138f3456:before,
#reservation .acf-field_631a23b60ee04:before,
#reservation .acf-field-631a23b60ee04:before{
    z-index: 9;
    width: 100%;
    height: 100%;
}
#reservation .acf-field-631a23b60ee04:after{
    width: 51px;
    height: 51px;
    background: url(../images/icon-calendar.svg) 0 0 transparent no-repeat;
    background-size: cover;
    left: 0;
    top: -50px;
    bottom: 0;
}
#reservation .acf-field-631a23250ee03:after{
    width: 63px;
    height: 41px;
    background: url(../images/icon-people.svg) 0 0 transparent no-repeat;
    background-size: cover;
    left: 0;
    top: -50px;
    bottom: 0;
}
#reservation .acf-field-6089a40138f3456 .acf-input{
    width: 130px;
}
#reservation .acf-label label{
    color: #fff;
    font-size: 37px;
    font-family:  'Futura Md BT', sans-serif;
    margin-top: 0;
    margin-right: 15px;
}
#reservation .acf-label label .acf-required{
    display: none;
}

#reservation .acf-field .acf-input{
    max-width: 215px;
}
#reservation .acf-field-631a23b60ee04 .acf-input{
    position: relative;
}
#reservation .acf-field-631a23b60ee04 .acf-input:after{
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 50px 61px 50px 0;
    border-color: transparent #fff transparent transparent;
    right: -70px;
    bottom: -70px;
}
#reservation .acf-field .acf-input .acf-input-prepend,
#reservation .acf-field .acf-input .acf-input-append{
    border: 0;
    background: transparent;
    font-size: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
#reservation .acf-form-submit{
    width: 100%;
    margin-top: 20px;
}
#reservation .acf-form-submit input{
    background-color: #2f8c40;
    border-color: #2f8c40;
    width: auto;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    text-transform: uppercase;
    padding: 5px 30px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    box-shadow: none;
    border: 0;
}
#reservation .acf-form-submit input:hover{
    opacity: 0.75;
}
#reservation .acf-form-submit input[type=submit]{
    display: none;
}

#reservation input[type=text]:focus, 
#reservation input[type=email]:focus, 
#reservation input[type=url]:focus, 
#reservation input[type=password]:focus, 
#reservation input[type=search]:focus, 
#reservation input[type=number]:focus, 
#reservation input[type=tel]:focus, 
#reservation input[type=date]:focus, 
#reservation input[type=month]:focus, 
#reservation input[type=week]:focus, 
#reservation input[type=time]:focus, 
#reservation input[type=datetime]:focus, 
#reservation input[type=datetime-local]:focus, 
#reservation input[type=color]:focus, 
#reservation textarea:focus{
    outline: 0;
}

#reservation div[data-key=field_631a241d0ee09],
#reservation div[data-key=field_631a241d0ee06],
#reservation div[data-key=field_631a241d0ee07],
#reservation div[data-key=field_631a241d0ee08],
#reservation div[data-name=hiddenDate]{
  display: none;
}
.time-container{
    margin-top: 20px;
}
.slick-next,
.slick-prev,
.slick-next:focus,
.slick-next:active,
.slick-prev:focus,
.slick-prev:active{
    background-color: transparent;
    border: 0;
    outline: 0;
    display: flex;
}

.slick-slide{
    cursor: pointer;
    color: #B3B3B3;
    font-size: 15px;
}
.slick-slide.state-active{
    color: #fff;
    background: url(../images/hour-mark.svg) center center transparent no-repeat;
    background-size: contain;
}
.ui-datepicker{
    width: 100% !important;
}
.ui-datepicker thead{
    display: none;
}
.ui-datepicker-title{
    font-size: 25px;
    color: #2189F6;
    text-transform: capitalize;
}
.ui-datepicker .ui-datepicker-next,
.ui-datepicker .ui-datepicker-prev{
    width: 8px !important;
    cursor: pointer;
    top: 0 !important;
    bottom: 0;
    margin: auto;
}
.ui-datepicker .ui-datepicker-next{
    content: url(../images/big-right.svg);
}
.ui-datepicker .ui-datepicker-prev{
    content: url(../images/big-left.svg);
}

.ui-datepicker td span, 
.ui-datepicker td a{
    color: #B3B3B3 !important;
    font-size: 22px;
    text-align: center !important;
    font-family: 'Futura-CondensedLight', sans-serif;
}

.ui-datepicker td span.ui-state-active, 
.ui-datepicker td a.ui-state-active{
    color: #fff !important;
    background: url(../images/day-mark.svg) center center transparent no-repeat;
    background-size: contain;
}
.ui-datepicker-unselectable{
    opacity: 0.3;
}

.calendar-wrapper{
    flex: 1 0 59%;
    max-width: 59%;
    padding: 65px;
    box-sizing: border-box;
    order: 3;
}
.calendar-title{
    color: #29ABE2;
    font-size: 17px;
}

#submit-confirm:hover,
#submit-confirm{
    margin-top: 40px;
    text-transform: uppercase;
    max-width: 384px !important;
    border-radius: 20px !important;
    font-size: 28px !important;
    border: 0;
    color: #fff !important;
    background-color: #2189F6 !important;
    padding: 20px;
}
#submit-confirm:hover{
    opacity: 0.75;
}

.acf-notice{
    margin-bottom: 35px;
}

.reservation-form-wrapper{
    max-width: 1260px;
    margin: 40px auto;
    position: reservation;
}
.reservation-form-wrapper .bg-white{
    border-radius: 10px;
    overflow: hidden;
}
.reservation-form-wrapper #message{
    width: 100%;
    padding: 20px;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    order: 1;
    flex: 1 0 100%;
    margin-bottom: 10px;
}
.reservation-form-wrapper #message p{
    border-radius: 10px;
    padding: 10px;
    color: #fff;
    background: #2189F6;
    margin-bottom: 0;
    font-size: 24px;
}

.input-container label{
    color:  #B3B3B3;
    text-transform: capitalize;
}
.input-container input{
    font-size: var(--font-20) !important;
    padding: 6px 24px !important;
    border: 0;
}

@media (max-width: 1200px) {
    #reservation .acf-field-631a23250ee03:after{
        width: 52px;
        height: 34px;
    }
    #reservation .acf-field-631a241d0ee05:after,
    #reservation .acf-field-631a23b60ee04:after{
        width: 34px;
        height: 34px;
    }
    #reservation .acf-label label{
        font-size: 25px;
    }
    #reservation .acf-field .acf-input {
        max-width: calc(100% - 62px);
    }
    #reservation .acf-field-631a23b60ee04 .acf-input:after{
        border-width: 34px 40px 34px 0;
    }
    .reservation-form-title{
        font-size: 30px;
    }
}

@media (max-width: 992px) {
    .wizard ul, .tabcontrol ul{
        display: flex;
        justify-content: center;
    }
    .reservation-form-wrapper .bg-white > form,
    .reservation-form-wrapper .bg-white > div{
        flex: 1 0 100% !important;
        max-width: 100% !important;
    }
    .reservation-form-wrapper .bg-white > #reservation > div{
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }
    #reservation .acf-field-631a23b60ee04 .acf-input:after{
        display: none;
    }
    .reservation-form-wrapper .bg-white > .calendar-wrapper{
        position: relative;
    }
    .reservation-form-wrapper .bg-white > .calendar-wrapper:after{
        position: absolute;
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0px 50px 50px 50px;
        border-color: transparent transparent #fff transparent;
        right: 0;
        left: 0;
        top: -40px;
        margin: auto;
    }

}

@media (max-width: 768px) {
    .wizard ul, .tabcontrol ul{
    }
}

@media (max-width: 576px) {
    .reservation-form-wrapper .bg-white > .calendar-wrapper:after{
        border-width:  0px 20px 20px 20px;
        top: -20px;
    }
    .calendar-wrapper,
    #reservation{
        padding: 20px 10px;
    }
    .wizard ul, .tabcontrol ul{
        display: flex;
        flex-direction: column;
    }
    .ui-datepicker-title{
        font-size: 18px;
    }
    .ui-datepicker td span, .ui-datepicker td a{
        font-size: 14px;
    }
    .wizard > .content{
        margin: 0;
    }
}

@media (max-width: 480px) {}