@font-face {
    font-display: swap;
    font-family: icons-base;
    font-style: normal;
    font-weight: 400;
    src: url(/themes/villa-espana/assets/fonts/icons-base.woff) format("woff"),url(/themes/villa-espana/assets/fonts/icons-base.woff2) format("woff2")
}

.book-modal {
    background-color: rgba(0,0,0,.6);
    bottom: 100%;
    display: block;
    left: 0;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: bottom .5s;
    transition: bottom .5s;
    z-index: 5
}

.book-modal.in {
    bottom: 0
}

.book-modal:before {
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle
}

.book-modal-dialog,.book-modal__dialog {
    background-color: #fff;
    border-radius: 0;
    display: inline-block;
    position: relative;
    text-align: left;
    vertical-align: middle;
    width: 400px;
}

.book-modal-close,.book-modal__close {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 1.5rem;
    position: absolute;
    right: -50px;
    top: 0;
    -webkit-transition: background-color .5s ease-in;
    transition: background-color .5s ease-in;
    z-index: 1
}

.book-modal-close:before,.book-modal__close:before {
    color: #000;
    font-size: 22px;
}

.book-modal-close:hover,.book-modal__close:hover {
    background-color: transparent
}

.book-modal__dialog {
    padding: 2rem
}

.book-modal__header {
    margin-bottom: 1rem
}

.book-modal__close {
    right: 0
}

.book-modal__title {
    color: #1a1a1a;
    font-size: 20px;
    font-weight: 600;
    font-family: work-sans;
}

.book-modal__subtitle,.book-modal__title {
    text-align: center;
    text-transform: uppercase
}

.book-modal__subtitle {
    color: #122637;
    font-size: 13px;
    font-weight: 500;
    margin-top: 10px;
    font-family: work-sans;
}

.book-modal__body {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.book-modal__body,.book-modal__date {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

.book-modal__date {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 50%
}

.book-modal__date--in {
    padding-right: 2rem;
    position: relative
}

.book-modal__date--in::before {
    bottom: 0;
    color: #84B0BC;
    font-size: 50px;
    height: 70px;
    margin-bottom: auto;
    margin-top: auto;
    position: absolute;
    right: -25px;
    top: 0;

    font-family: icons-base;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    speak: none;
    text-transform: none;

    content: "";
}

.book-modal__date--out {
    padding-left: 2rem
}

.book-modal__date-group {
    background-color: #fff;
    border: .1rem solid #e6e6e6;
    border-radius: 0;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 10%;
    position: relative;
    text-align: center;
    -webkit-transition: background-color .5s;
    transition: background-color .5s;
    width: 100%
}

.book-modal__date-group:hover {
    background-color: #122637
}

.book-modal__date-group:hover .book-modal__date-day,.book-modal__date-group:hover .book-modal__date-month,.book-modal__date-group:hover .book-modal__date-text {
    color: #fff
}

.book-modal__date-text {
    font: 13px work-sans;
    text-transform: uppercase
}

.book-modal__date-day,.book-modal__date-text {
    color: #122637;
    -webkit-transition: color .5s;
    transition: color .5s
}

.book-modal__date-day {
    font: 50px/1.2 work-sans;
}

.book-modal__date-month {
    color: #122637;
    font: 13px work-sans;
    text-transform: uppercase;
    -webkit-transition: color .5s;
    transition: color .5s
}

.book-modal__date-input {
    bottom: 0;
    cursor: pointer;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0
}

.book-modal__promo {
    margin-top: 2rem;
    width: 100%
}

.book-modal__promo-input {
    color: #1a1a1a;
    font: 17px Quicksand, serif;
    height: 50px;
    text-align: center;
    width: 100%
}

.book-modal__promo-input::-webkit-input-placeholder {
    color: #333;
    font: 16px/42px Quicksand, serif;
}

.book-modal__promo-input::-moz-placeholder {
    color: #333;
    font: 16px/42px Quicksand, serif;
}

.book-modal__promo-input:-ms-input-placeholder {
    color: #333;
    font: 16px/42px Quicksand, serif;
}

.book-modal__promo-input::-ms-input-placeholder {
    color: #333;
    font: 16px/42px Quicksand, serif;
}

.book-modal__promo-input::placeholder {
    color: #333;
    font: 16px/42px Quicksand, serif;
}

.book-modal__action {
    margin-top: 1rem;
    width: 100%
}

.book-modal__action-button {
    width: 100%
}

.book-modal__destination {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #e6e6e6;
    color: #000;
    cursor: pointer;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
    height: 50px;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    position: relative
}

.book-modal__destination:before {
    color: #84B0BC;
    font-size: 16px;
}

.book-modal__destination-text {
    color: #1a1a1a;
    font: 16px Quicksand, serif;
}

.book-modal__destination-list {
    background-color: #122637;
    left: 0;
    max-height: 0;
    overflow-y: scroll;
    position: absolute;
    right: 0;
    top: 100%;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
    z-index: 1
}

.book-modal__destination-list--open {
    max-height: 300px;
}

.book-modal__destination-link {
    color: #1a1a1a;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font: 16px Quicksand, serif;
    padding: 1rem 1.5rem
}

.book-modal__destination-link:hover {
    background-color: #e6e6e6;
    color: #122637
}

.book-modal__promo-input {
    background-color: #fff;
    border: .1rem solid #27425B;
    border-radius: .5rem;
}

.book-modal__action-button {
    background-color: #27425B;
    border: .1rem solid #27425B;
    color: white;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%;

    height: auto;
    min-width: 170px;
    padding: 1rem 2rem;
    text-align: center;
    -webkit-transition: all .5s;
    transition: all .5s;
    border-radius: .5rem;
}

.book-modal__action-button:hover {
    background-color: #fff;
    border: .1rem solid #122637;
    color: #122637;
}

.book-modal__close:before {
    content: "";
    font-family: icons-base;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    speak: none;
    text-transform: none;
}


@media (max-width: 1024px) {
    .book-modal-close, .book-modal__close {
        right: 0
    }

    .book-modal__dialog {
        padding: 4rem 2rem
    }

    .book-modal__date--in {
        padding-right: 2rem
    }

    .book-modal__date--out {
        padding-left: 2rem
    }
}