/**
*
*  c27
*  swiper image slider
*  image, div caption
*  2 column text with swiper image slider
*
**/

/*======= 320  padding l,r  15  = 290 ===*/

.c27 {
    margin-bottom: 2em;
    position: relative;
}

.c27 .leftCol {
    margin-bottom: 2em;
}

.c27 .leftCol>ul,
.c27 .leftCol>ol {
    list-style: none;
    padding-left: 0;
    margin-bottom: 2em;
}

.c27 .leftCol>ul li,
.c27 .leftCol>ol li {
    position: relative;
    margin-left: calc(1ch + 15px);
}

.c27 .leftCol>ul li::before,
.c27 .leftCol>ol li::before {
    content: ">";
    position: absolute;
    right: 100%;
    margin-right: 15px;
    color: var(--colored-line);
}


/*booking button*/
.c27 .c27-booking {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.c27 .c27-booking .menu-popup {
    left: 0;
    right: auto;
    max-width: min(310px, calc(100vw - 30px));
}

.c27 .general-booking-btn {
    display: inline-block;
    text-align: center;
    width: 290px;
    max-width: 100%;
    height: 35px;
    border: solid 2px #9CBFD1;
    color: #9CBFD1;
    background-color: #fff;
    font-size: 18px;
    cursor: pointer;
}


/* overwrite default swiper styles */
.c27.swiper {
    width: 100%;
    height: 100%;
}

.c27 .swiper-slide {
    overflow: hidden;
}

.c27 .swiper-button-prev,
.c27 .swiper-button-next {
    color: #9cbfd1;
}


.c27.bottomLine::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    width: 82.959%;
    /*10 grid elements*/
    height: 1px;
    border-bottom: solid 1px var(--colored-line);
}

.c27.ltr.bottomLine::after {
    left: 0;
}

.c27.rtl.bottomLine::after {
    right: 0;
}


/*======= 576 ========= MEDIA QUERIES ======= border 15 = 546 ===*/

@media only screen and (min-width: 576px) {}

/*======= 768 ========= MEDIA QUERIES ======= border 15 = 738 ===*/

@media only screen and (min-width: 768px) {}

/*======= 990 ======== MEDIA QUERIES ======== border 15 = 960 ===*/

@media only screen and (min-width: 990px) {
    .c27 {
        display: flex;
        align-items: flex-start;
    }

    .c27 .leftCol {
        flex: 0 0 33%;
        padding-right: 30px;
    }

    .c27 .swiper {
        flex: 1 1 0;
        min-width: 0;
    }
}

/*======= 1398 ======= MEDIA QUERIES ======== border 30 = 1338 ==*/

@media only screen and (min-width: 1398px) {

    .c27 .leftCol {
        flex: 0 0 446px;
        margin-left: calc((100% - 1338px) / 2);
        padding-right: 30px;
    }

    .c27.bottomLine::after {
        width: calc(((100vw - 1338px) / 2) + 1110px);
        /*10 grid elements*/
    }
}

/*======= 2512 ======= MEDIA QUERIES ==== border 151-45 = 2396 ==*/

@media only screen and (min-width: 2512px) {}

/*END- .c27*/