/**
*
*  .c31
*  2 column text, logo and booking link right
*
**/

/*======= 320  padding l,r  15  = 290 ===*/
.c31 {
    margin-bottom: 2.5em;
    position: relative;
}

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

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

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


.c31 .leftCol {
    padding-left: 4.687%;
    /* 15 / 320 */
    padding-right: 4.687%;
    /* 15 / 320 */
    padding-bottom: 1.5em;
}

.c31 h2 {
    margin: 0 0 0.6em;
    font-size: 32px;
}

.c31 .rightCol {
    padding-left: 4.687%;
    /* 15 / 320 */
    padding-right: 4.687%;
    /* 15 / 320 */
    padding-bottom: 1.5em;
    padding-top: 1.5em;
    text-align: center;
    background-color: rgba(234, 243, 247, 0.41);
}

.c31 .c31-logo {
    display: block;
    width: 70%;
    max-width: 240px;
    height: auto;
    margin: 0 auto 2em;
}

.c31 .c31-booking {
    display: inline-block;
    position: relative;
    max-width: 100%;
}

.c31 .general-booking-btn {
    width: 290px;
    max-width: 100%;
    height: 35px;
    border: solid 2px #9CBFD1;
    color: #9CBFD1;
    background-color: #fff;
    font-size: 18px;
    cursor: pointer;
}

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

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

@media only screen and (min-width: 576px) {
    .c31 .leftCol {
        padding-left: 2.60417%;
        /*15px/576px*/
    }

    .c31 .rightCol {
        padding-right: 2.60417%;
        /*15px/576px*/
    }
}

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

@media only screen and (min-width: 768px) {
    .c31 .container {
        display: flex;
        align-items: stretch;
    }


    .c31 .bodytext {
        display: flex;
        flex-direction: row;
    }


    .c31 .bodytext::before {
        content: "";
        display: block;
        width: 30px;
        height: 1em;
        margin-right: 10px;
        border-bottom: solid 1px var(--colored-line);
    }

    .c31 .bodytext-inner {
        flex: 1;
    }

    .c31 .leftCol {
        width: 74.43%;
        padding-bottom: 5em;
        padding-left: 1.95%;
    }

    .c31 h2 {
        font-size: 40px;
    }

    .c31 .rightCol {
        display: flex;
        width: 25.56%;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        padding-bottom: 6em;
        padding-left: 1em;
        padding-right: 1.95%;
    }
}

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

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

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

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



    .c31 .leftCol {
        width: calc(((100vw - 1338px) / 2) + 996px);
        padding-left: calc(((100vw - 1338px) / 2) + 84px);
        margin-right: 30px;
    }

    .c31 .rightCol {
        width: calc(((100vw - 1338px) / 2) + 312px);
        padding-right: calc((100vw - 1338px) / 2);
    }





    .c31.bottomLine::after {
        width: calc(((100vw - 1338px) / 2) + 1110px);
    }
}

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

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

/*END- .c31*/