body {
    font-family: 'Source Sans Pro', sans-serif;
}

body h1,
body h2,
body h5.card-title,
body h6.card-title {
    font-family: 'Philosopher', sans-serif;
}

.why .card {
    border: 0;
    border-radius: 0;
}

.why .card-img-top {
    border: 0;
    border-radius: 0;
}

.navbar-brand {
    width: 200px;
    height: auto;
    padding: 0;
}

.navbar-toggler svg {
    fill: #F6E4B2;
}

.bg-dark {
    background-color: #242C2E;
}

.bg-bright {
    background-color: gainsboro;
}

.bg-accent {
    background-color: #717368;
}

.bg-dark-accent {
    background-color: #F6E4B2;
}

.nav-link {
    color: whitesmoke;
    font-size: 20px;
}

.nav-link:focus, .nav-link:hover {
    color: #fff;
    text-decoration: underline;
}

.navbar {
    padding: 0;
}

.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #F6E4B2;
}

.bg-img {
    background-size: cover;
    background-position: bottom;
    height: 75vh;
    width: auto;
    background-image: url(img/teaser_home.jpg);

}

.teaser {
    display: flex;
    justify-content: center;
    align-items: end;
}

.teaser-body {
    width: 100%;
    text-align: center;
}

.teaser-body h1 {
    font-size: 48px;
    color: whitesmoke;
    filter: drop-shadow(2px 2px 6px #000);
}

.teaser-body h1 em {
    color: #F6E4B2;
    filter: drop-shadow(1px 1px 2px rgba(0,0,0, .5));
}

@media screen and (max-width: 767px) {
    .teaser-body h1 {
        font-size: 32px;
    }

    .teaser-body h1 span {
        display: block;
    }
}

/* Guesty shit */


.iframe-wrapper {
    background-color: rgb(33, 37, 41);
    width: 100%;
    text-align: center;
    height: 77px;
}


@media screen and (max-width: 650px) {
    .iframe-wrapper {
        height: 94px;
    }
}


.iframe-wrapper #guesty-search-widget__datepicker > :first-child {
    border-right: 1px solid #ccc;
}

.guesty-root-element.guesty-widget__container {
    display: flex;
    padding-bottom: 0;
    flex-direction: row !important;
    flex-wrap: wrap;
    height: auto !important;
    margin: 15px 4px 4px 4px;
    max-width: calc(100% - 8px);
    justify-content: center;
    align-items: flex-start;
    --guesty-brand-primary: #F6E4B2 !important;
}

/* unused city dropdown */
[id^="search-widget_"] > .guesty-widget__item:nth-of-type(1) { display: none !important; overflow: hidden; clip: rect(0,0,0,0); }

@media screen and (max-width: 650px) {

    .guesty-root-element.guesty-widget__container {
        margin-top: 4px;
        justify-content: space-between;
        align-items: center;
    }

    /* start-end date picker */
    [id^="search-widget_"] > .guesty-widget__item:nth-of-type(2) { width: calc(64% - 4px); margin: 0 !important; }

    /* num guests */
    [id^="search-widget_"] > .guesty-widget__item:nth-of-type(3) { width: calc(36% - 4px) !important; margin: 0 !important; }

    /* submit */
    [id^="search-widget_"] > .guesty-widget__item:nth-of-type(4),
    [id^="search-widget_"] > .guesty-widget__item:nth-of-type(4) > button {
        width: 100% !important; margin: 2px 0 0 0 !important;
    }
}

/* submit */
[id^="search-widget_"] > .guesty-widget__item:nth-of-type(4) > button { color: #111; }


.guesty-root-element.small-size.guesty-widget__container .guesty-widget__item .selectr-container,
#guesty-search-widget__datepicker {
    margin: 0 !important;
    width: 100% !important;
}

.section {
    padding-top: 88px;
    padding-bottom: 88px;
}

@media screen and (max-width: 767px) {
    .section {
        padding-top: 25px;
        padding-bottom: 25px;
    }

    .section h2 {
        font-size: calc(1.2rem + .9vw);
    }
}


.locations h2 {
    font-size: 2.5rem;
}

.about-us {
}

.about-us span {
    font-family: 'Dancing Script', cursive;
    font-size: 28px;
}

.why {
    background-color: #F6E4B2;
}

.why .card {
    height: 550px;
}

@media screen and (max-width: 767px) {
    .why .card {
        height: auto;
        margin-bottom: 25px;
    }
}

#testimonials {
    background-color: #F6E4B2;
}

/*noinspection CssOverwrittenProperties*/
#testimonials .card {
    border-left: 0;
    border-right: 0;
    border-width: 4px;
    margin: 50px auto;
    border-radius: 0;
    text-align: center;
    width: 50%;
    background-color: transparent;
    border-color: #242C2E;
    color: #242C2E;
}

@media screen and (max-width: 767px) {
    #testimonials .card {
        width: 90vw;
    }
}

#testimonials svg {
    fill: #717368;
}

.highlights img {
    width: 88px;
    height: auto;
    color: ivory;
    padding-bottom: 20px;
}

.highlights h1 {
    text-align: center;
    color: ivory;
}

.highlights p {
    text-align: center;
    font-weight: 400;
    font-size: larger;
    padding-bottom: 30px;
    color: ivory;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media screen and (max-width: 767px) {
    .highlights .highlight-item {
        font-size: 12px;
    }
}

.highlights-details .card-title {
    font-size: 35px;
}

.highlights-details h6.card-title {
    font-size: 20px;
}

.highlights-details .card-text {
    font-size: 20px;
}

.btn-primary {
    background-color: #F6E4B2;
    border: 0;
    color: #000;
    font-weight: 400;
    border-radius: 0 !important;
    clip-path: polygon(4% 0, 100% 0%, 96% 100%, 0% 100%);
    transition: all .25s ease-in-out;
}

.btn-primary:hover {
    background-color: #ab9760;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);
}

.footer {
    color: white;
    padding-top: 55px;
    margin-top: 55px;
}

.footer img {

    width: 200px;
    height: auto;
}

footer a {
    color: whitesmoke;
    text-decoration: none;
}

.page-teaser {
    height: 70vh;
    background: transparent none no-repeat center center;
    background-size: cover;
    width: 100%;
    position: relative;
    margin-bottom: 25px;
}

.page-teaser .container {
    position: relative;
    height: 100%;
}

.page-teaser .page-teaser-text {
    clip-path: polygon(0 20px, 98% 0%, 100% 70%, 0% 100%);
    background-color: rgba(233, 191, 133, .75); /* #e9bf85 */
    position: absolute;
    left: -1000px;
    bottom: 5vh;
    padding:  25px 75px 45px 1000px;
}

@media screen and (max-width: 599px) {
    .page-teaser .page-teaser-text {
        padding-left: 1015px;
    }
}

.photo-gallery img {
    width: 100%;
    height: auto;
    margin: 0 5px;
}

body {
    max-width: 100%;
    width: 100%;
}

.breakout {
    width: 97vw;
    position: relative;
    left: calc(-1 * (97vw - 100%) / 2);
    color: rgba(0,0,0,.6);
}

/* ===== Scrollbar CSS ===== */
/* Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: #000000 #ffffff;
}

/* Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 16px;
}

*::-webkit-scrollbar-track {
    background: #ffffff;
}

*::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
    border: 3px solid #ffffff;
}

.enhanced-gallery {
    display: flex;
    flex-direction: row;
    overflow-x: scroll;
    gap: 5px;
    cursor: all-scroll;
    position: relative;
}

.enhanced-gallery:after,
.enhanced-gallery:before {
    content: "";
    position: sticky;
    top: calc(20vh - 20px);
    width: 40px;
    min-width: 40px;
    height: 40px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(1px 1px 5px black);
}

.enhanced-gallery:after {
    right: 25px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M12 4.5v-3L24 12 12 22.5v-3L18 12z"/%3E%3C/svg%3E');
}

.enhanced-gallery:before {
    left: 25px;
    background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white" width="24px" height="24px"%3E%3Cpath d="M0 0h24v24H0z" fill="none"/%3E%3Cpath d="M12 4.5v-3L0 12l12 10.5v-3L6 12z"/%3E%3C/svg%3E');
}

.enhanced-gallery > * {
    max-height: 40vh;
    margin-bottom: 1vw;
    user-select: none;
}

.enhanced-gallery > img {
    pointer-events: none;
}

.enhanced-gallery > :first-child {
    margin-left: -40px;
}

.masonry-gallery {
    column-count: 4;
    column-gap: 1rem;

}

.image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /*padding-block: 2.75rem;*/
    background-size: cover;
    font-size: 2rem;
    text-decoration: none;
    transition: all .25s ease-in-out;
    text-align: center;
}

.enhanced-gallery .image-link {
    min-width: 333px;
}

.image-link:hover {
    transform: scale(1.05);
}

.image-link > small,
.image-link > span,
.image-link > strong {
    display: block;
    color: #fff;
    text-shadow: 0 2px 2px #000,
    0 5px 5px #000,
    0 7px 7px #000,
    0 9px 9px #111;
}

.image-link > small {
    font-size: 80%;}

.masonry-gallery .image-link,
.masonry-gallery img {
    width: 100%;
    margin-bottom: 1rem;
    break-inside: avoid;
    box-shadow: 0px 10px 13px -7px #000000, 5px 5px 15px 5px rgba(0,0,0,0);
}

.masonry-gallery img {
    display: block;

}

@media (max-width: 992px) {
    .masonry-gallery {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .masonry-gallery {
        column-count: 2;
    }
}

@media (max-width: 576px) {
    .masonry-gallery {
        column-count: 1;
    }
}

#ov {
    width: 100%;
    max-width: 100%;
}

@media screen and (min-width: 992px) {
    #ov {
        max-width: 500px;
    }
}

@media (max-width: 767px) {
    .carousel.carousel--responsive .carousel-inner .carousel-item > div {
        display: none
    }

    .carousel.carousel--responsive .carousel-inner .carousel-item > div:first-child {
        display: block;
        min-width: 100%;
    }
}

@media (min-width: 768px) {
    .carousel.carousel--responsive .carousel-indicators {
        display: none;
    }
}

.carousel.carousel--responsive .carousel-inner .carousel-item.active, .carousel-inner .carousel-item-next, .carousel-inner .carousel-item-prev {
    display: flex
}

@media (min-width: 768px) {
    .carousel.carousel--responsive .carousel-inner .carousel-item-end.active, .carousel-inner .carousel-item-next {
        transform: translateX(25%)
    }

    .carousel.carousel--responsive .carousel-inner .carousel-item-start.active, .carousel-inner .carousel-item-prev {
        transform: translateX(-25%)
    }
}

.carousel.carousel--responsive .carousel-inner .carousel-item-end, .carousel-inner .carousel-item-start {
    transform: translateX(0)
}

.carousel.carousel--responsive .carousel-inner .carousel-item a,
.carousel.carousel--responsive .carousel-inner .carousel-item img {
    aspect-ratio: 100/80;
    object-fit: cover;
    object-position: center;
}

.carousel-control-next, .carousel-control-prev {
    opacity: 1 !important;
    filter: drop-shadow(0px 0px 2px black) drop-shadow(-2px -2px 6px #000)
}

.carousel-indicators [data-bs-target] {
    margin-left: 1px;
    margin-right: 1px;
}

.carousel-indicators .active {
    transform: scaleY(2);
}

@media screen and (min-width: 768px) {
    .carousel-control-next span, .carousel-control-prev span {
        transform: scale(1.76);
    }
}