/* 
    Table of Contents:
   
    Base
    Helper classes
    Form
    Layout
*/

/* Base
--------------------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,200;0,300;0,400;0,500;0,600;1,200;1,300;1,400;1,500;1,600&display=swap');

html {
    font-size: 16px;
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 300;
    line-height: 1.3;
    color: #000000;
}

h1, h2 {
    font-style: normal;
    line-height: 1.3;
    margin: 0.6em 0px 1em;
    text-align: center;
}

h1 {
    font-size: 35px;
    font-weight: 500;
}

.subH1 {
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

h2 {
    font-size: 25px;
    font-weight: 300;
}

h3 {
    font-size: 16px;
    font-weight: 300;
}

/* 
    For desctop browser  window_width = html_width + scrollbar_width (18~15px)
    for FF min-width = html width
    for Chrome min-widht = browser window width

    For mobile browser scrolbar_width is absent
*/
@media (min-width: 1000px) {
    html {
        font-size: 17px;
    }
        h1 {
        font-size: 70px;
    }

    .subH1 {
        font-size: 40px;
    }

    h2 {
        font-size: 50px;
    }

    h3 {
        font-size: 18px;
    }
}

a {
    text-decoration: none;
    color: #0488E0;
}

    a:hover, a:focus {
        text-decoration: none;
        color: #0488E0;
    }

/* Helper classes
   ---------------------------------------------------------------------- */
.u-accent {
    color: #fa8669;
}

.u-aux {
    color: #828282;
}


/*  Form 
    ------------------------------------------------------------------------- */
/**
 * Remove increment and decrement buttons in number inputs.
 */

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number] {
    -moz-appearance: textfield;
}

.textbox {
    background-color: #ffffff;
    background-clip: padding-box;
    outline: none;
    height: 40px;
    padding: 5px 10px;
    width: 100%;
    box-sizing: border-box;
    color: #535353;
    border: 1px solid #B8C0C6;
    border-radius: 3px;
}

    .textbox::placeholder {
        color: #828282;
        font-size: 15px;
    }

.dropdown {
    height: 40px;
    padding: 0 10px;
    width: 100%;
    color: #535353;
    border: 1px solid #B8C0C6;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.999999 1.87805C2.95262 3.44015 4.04738 4.31595 6 5.87805L11 1.87799' stroke='%23828282' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-color: #FFFFFF;
}

    .dropdown[disabled] {
        background-color: #f4f4f6;
        color: #828282;
    }

select optgroup {
    color: #828282;
    /*font-style: normal;*/
    font-size: 12px;
    font-weight: 400;
}

select option {
    color: #535353;
    font-size: 15px;
}

.datebox {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='%23CCCCCC' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.1358 1.36401C7.1358 0.811729 6.68809 0.364014 6.1358 0.364014C5.58352 0.364014 5.1358 0.811729 5.1358 1.36401V2.29565H4.20434C2.58514 2.29565 1.27252 3.60827 1.27252 5.22747V16.8184C1.27252 18.4376 2.58514 19.7502 4.20434 19.7502H15.7952C17.4144 19.7502 18.7271 18.4376 18.7271 16.8184V5.22747C18.7271 3.60827 17.4144 2.29565 15.7952 2.29565H14.8633V1.36401C14.8633 0.811729 14.4156 0.364014 13.8633 0.364014C13.3111 0.364014 12.8633 0.811729 12.8633 1.36401V2.29565H7.1358V1.36401ZM4.20434 4.29565H5.1358V5.22765C5.1358 5.77993 5.58352 6.22765 6.1358 6.22765C6.68809 6.22765 7.1358 5.77993 7.1358 5.22765V4.29565H12.8633V5.22765C12.8633 5.77993 13.3111 6.22765 13.8633 6.22765C14.4156 6.22765 14.8633 5.77993 14.8633 5.22765V4.29565H15.7952C16.3099 4.29565 16.7271 4.71284 16.7271 5.22747V8.09155H3.27252V5.22747C3.27252 4.71284 3.68971 4.29565 4.20434 4.29565ZM7.00006 11.9993C7.00033 12.5516 6.55283 12.9995 6.00055 12.9998L4.00006 13.0007C3.44778 13.001 2.99984 12.5535 2.99957 12.0012C2.9993 11.4489 3.4468 11.001 3.99908 11.0007L5.99957 10.9998C6.55186 10.9995 6.99979 11.447 7.00006 11.9993ZM7.00006 15.9998C7.00006 16.552 6.55235 16.9998 6.00006 16.9998H4.00006C3.44778 16.9998 3.00006 16.552 3.00006 15.9998C3.00006 15.4475 3.44778 14.9998 4.00006 14.9998H6.00006C6.55235 14.9998 7.00006 15.4475 7.00006 15.9998ZM16.0005 16.9998C16.5528 16.9998 17.0005 16.552 17.0005 15.9998C17.0005 15.4475 16.5528 14.9998 16.0005 14.9998H14.0005C13.4483 14.9998 13.0005 15.4475 13.0005 15.9998C13.0005 16.552 13.4483 16.9998 14.0005 16.9998H16.0005ZM12.0001 11.9998C12.0001 12.552 11.5523 12.9998 11.0001 12.9998H9.00006C8.44778 12.9998 8.00006 12.552 8.00006 11.9998C8.00006 11.4475 8.44778 10.9998 9.00006 10.9998H11.0001C11.5523 10.9998 12.0001 11.4475 12.0001 11.9998ZM11.0001 16.9998C11.5523 16.9998 12.0001 16.552 12.0001 15.9998C12.0001 15.4475 11.5523 14.9998 11.0001 14.9998H9.00006C8.44778 14.9998 8.00006 15.4475 8.00006 15.9998C8.00006 16.552 8.44778 16.9998 9.00006 16.9998H11.0001ZM17.0001 11.9998C17.0001 12.552 16.5523 12.9998 16.0001 12.9998H14.0001C13.4478 12.9998 13.0001 12.552 13.0001 11.9998C13.0001 11.4475 13.4478 10.9998 14.0001 10.9998H16.0001C16.5523 10.9998 17.0001 11.4475 17.0001 11.9998Z' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center right 10px;
    background-size: 20px 20px;
}

.textarea {
    padding: 6px 7px;
    color: #535353;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #B8C0C6;
    border-radius: 3px;
}

.btn {
    background-color: #fa8670;
    color: #FFFFFF;
    padding: 9px 15px;
    border: none;
    font-size: 15px;
    cursor: pointer;
    border-radius: 3px;
}

a.btn {
    display: inline-block;
}

    a.btn:hover,
    a.btn:visited,
    a.btn:active {
        color: #FFFFFF;
    }

.altbtn {
    color: inherit;
    background: none;
    background-color: #ffffff;
    border: 1px solid #B8C0C6;
    border-radius: 3px;
    padding: 8px 14px;
}

a.altbtn:hover,
a.altbtn:visited,
a.altbtn:active {
    color: inherit;
}
/* hack: for checkbox like  
        <input type='checkbox' id='chk' class='checkbox' /><label for='chk'>Lablel<label>
*/

.checkbox:checked,
.checkbox:not(:checked),
.radio:checked,
.radio:not(:checked) {
    position: absolute;
    left: -9999px;
}

    .checkbox:checked + label,
    .checkbox:not(:checked) + label,
    .radio:checked + label,
    .radio:not(:checked) + label {
        display: inline-block;
        position: relative;
        padding-left: 28px;
        line-height: 20px;
        cursor: pointer;
    }

        .checkbox:checked + label:before,
        .checkbox:not(:checked) + label:before,
        .radio:checked + label:before,
        .radio:not(:checked) + label:before {
            content: "";
            position: absolute;
            left: 0px;
            top: 0px;
            width: 18px;
            height: 18px;
            border: 1px solid #B8C0C6;
            background-color: #ffffff;
        }

        .checkbox:checked + label:before {
            border: 1px solid #EC7200;
        }

        .checkbox:checked + label:before,
        .checkbox:not(:checked) + label:before {
            border-radius: 2px;
        }

        .radio:checked + label:before,
        .radio:not(:checked) + label:before {
            border-radius: 100%;
        }

        .checkbox:checked + label:after,
        .checkbox:not(:checked) + label:after,
        .radio:checked + label:after,
        .radio:not(:checked) + label:after {
            content: "";
            position: absolute;
            -webkit-transition: all 0.2s ease;
            -moz-transition: all 0.2s ease;
            -o-transition: all 0.2s ease;
            transition: all 0.2s ease;
        }

        .checkbox:checked + label:after,
        .checkbox:not(:checked) + label:after {
            left: 4px;
            top: 4px;
            width: 10px;
            height: 5px;
            border-radius: 1px;
            border-left: 3px solid #EC7200;
            border-bottom: 3px solid #EC7200;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .radio:checked + label:after,
        .radio:not(:checked) + label:after {
            left: 5px;
            top: 5px;
            width: 10px;
            height: 10px;
            border-radius: 100%;
            background-color: #e145a3;
        }

        .checkbox:not(:checked) + label:after,
        .radio:not(:checked) + label:after {
            opacity: 0;
        }

        .checkbox:checked + label:after,
        .radio:checked + label:after {
            opacity: 1;
        }

.form-group, .form-group2, .form-group3 {
    margin-bottom: 10px;
}

/*  Layout
    -------------------------------------------------------------------------------------- */
/* sticky footer */
html, body {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    background-color: white;
}

.lMain {
    flex: 1 0 auto;
}

.content {
    margin: 0 auto;
    max-width: 1200px;
    padding-left: 15px;
    padding-right: 15px;
}

@media (min-width: 1200px) {
    .content {
        padding-left: 70px;
        padding-right: 70px;
    }
}

/* Header */
.lHeader {
    padding: 15px 0;
}

.lHeader-container {
    display: flex;
    align-items: center;
    height: 100%;
}

.lHeader-left,
.lHeader-right {
    width: 310px;
}
    .lHeader-right{
        text-align: right;
    }
    .lHeader-right .lHeader-btnOrder {
        margin-left: 10px;
        display: none;
    }

.lHeader-center {
    flex: 1;
}

.lHeader-logo img {
    height: 40px;
}

@media(min-width: 1100px) {
    .lHeader {
        padding: 20px 0;
    }

    .lHeader-logo img {
        height: 40px;
    }
    .lHeader-right .lHeader-btnOrder {
        display: initial;
    }
}

/* Footer */
.lFooter {
    background: #000000;
    padding-top: 40px;
    padding-bottom: 35px;
    color: #CCCCCC;
}

    .lFooter a {
        color: inherit;
    }


.lFooter-about {
    margin-bottom: 25px;
}

.lFooter-service {
    margin-bottom: 25px;
}

.lFooter-copyright {
    font-size: 12px;
    text-align: right;
}

.lFooter-nameText {
    margin-bottom: 20px;
    text-align: right;
}


@media(min-width: 1000px) {
    .lFooter-container {
        display: grid;
        grid-template-columns: 2fr 1fr 2fr;
        column-gap: 20px;
    }

    .lFooter-about,
    .lFooter-service {
        margin-bottom: 0px;
    }
}

/* Sections
----------------------------------------------------------------------------------------------*/

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

    .section h2 {
        margin: 0.1em 0 1.5em;
    }

/* Cover */

.sCover {
    min-height: 40vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-bottom: 200px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}

    .sCover h1 {
        margin: 0;
        font-weight: 700;
    }

    .sCover .subH1 {
        color: #FFFFFF;
    }

.bg-beach {
    background-image: url(/img/widget/website/beach.jpg);
   
}

.bg-borabora {
    background-image: url(/img/widget/website/borabora.webp);
    color: white;
}

.bg-star {
    background-image: url(/img/widget/website/star.jpg);
    color: white;
}


/* Contacts */
.tripOperator {
    margin-bottom: 30px;
}

.operatorDetails-map {
    min-height: 400px;
}

.operatorDetails-name {
    margin-bottom: 20px;
}

.operatorDetails h3 img {
    margin-right: 10px;
}

.operatorDetails-orderBtn {
    margin-left: 15px;
}

.operatorDetails-office {
    padding-bottom: 20px;
}

    .operatorDetails-office address {
        font-style: normal;
        font-weight: 500;
    }

    .operatorDetails-office .workinghours {
        margin: 10px 0;
    }

.workinghours .days {
    width: 70px;
}

.operatorDetails-phones {
    list-style: none;
    padding-left: 0px;
    line-height: 1.4;
    margin: 0;
}

    .operatorDetails-phones li {
        margin-bottom: 5px;
    }

    .operatorDetails-phones a {
        color: inherit;
        margin-bottom: 3px;
    }

.js-listExtender {
    cursor: pointer;
    color: #0488E0;
    fill: #0488E0;
}

.operatorDetails-call {
    margin: 0;
}

.operatorDetails-callDesc {
    margin-bottom: 15px;
    color: #828282;
}

/* Order section*/
.sOrder {
    background-color: #f8f8f8;
}

    .sOrder .content {
        max-width: 800px;
    }

.extendedOrderForm > div {
    margin-bottom: 15px;
}

.extendedOrderForm label {
    display: block;
    margin-bottom: 3px;
}

.extendedOrderForm .btn {
    width: 100%;
    font-size: 20px;
}

.extendedOrderForm-comments {
    grid-column: span 2;
}

.extendedOrderForm-success {
    padding: 10px 15px;
    background-color: #e9f8dd;
}

.extendedOrderForm-error {
    padding: 10px 15px;
    background-color: #ffeded;
}

.tripOperator-helpOrder {
    color: #828282;
    font-style: italic;
    margin-bottom: 10px;
}

@media screen and (min-width: 670px) {
    .tripOperator {
        display: grid;
        grid-template-columns: 6fr 6fr;
        gap: 15px;
    }

    .operatorDetails-office {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: start;
        column-gap: 20px;
    }

    .operatorDetails-phones {
        grid-row: 1 / 3;
        grid-column: 2/3;
    }

    .extendedOrderForm {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
    }

        .extendedOrderForm .btn {
            margin-top: 22px;
        }
}