@import "_variables.scss";
html,
body,
#mainContainer {
    height: 100vh;
    color: #fff;
}

body {
    font-family: "PT Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-font-smoothing: unset;
    -moz-osx-font-smoothing: grayscale;
    font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    @media (max-width: 767px) {
        font-size: 15px;
    }
}

.bookingTag {
    padding: 7.5px 15px;
    position: fixed;
    font-size: 22px;
    top: 2%;
    right: 2%;
    z-index: 999;
    color: #dec363; //background-color: #5b5b5b;
    font-weight: 700;
    letter-spacing: 0.05em;
    border: 1px solid #dec363;
    border-radius: 2px;
    img {
        width: 50px;
        padding: 5px;
        @media (max-width: 767px) {
            width: 30px;
        }
    }
    @media (max-width: 767px) {
        position: absolute;
        top: 1%;
        right: 1%;
        padding: 6px 12px;
        font-size: 11px;
        background-color: transparent;
        border: none;
    }
    @media (min-width: 768px) {
        //padding: 0;
        //background-color: transparent;
    }
}

.oddTag {
    border: 1px solid #fff;
}

.evenTag {
    color: #333;
    border: 1px solid #333;
}

.section {
    position: relative;
}

#sectionHome {
    height: inherit;
    #homeFirstPart {
        position: absolute;
        top: 0;
        left: 0;
        height: 40vh;
        width: 100%;
        background-color: $homeFirstSectionBackground;
        z-index: 222;
        margin: 0;
        padding: 0;
        #logo {
            text-align: center;
            position: absolute;
            bottom: 100px;
            width: 100%;
            @media (max-width: 767px) {
                bottom: 60px;
            }
            img {
                width: 250px;
                height: auto;
                margin: auto;
                text-align: center;
                @media (max-width: 767px) {
                    width: 160px;
                }
            }
        }
    }
    #homeSecondPart {
        padding: 0;
        margin: 0;
        width: 100%;
        height: 60%;
        position: absolute;
        bottom: 0;
        left: 0;
        overflow: hidden;
        background-color: #eec667;
        img {
            //height: 150%;
            // width: 100%;
            //height: 100%;
        }
        #text {
            position: absolute;
            left: 0;
            bottom: 40px;
            padding: 10px 10px 10px 20px;
            display: inline-block;
            box-sizing: border-box;
            h1 {
                line-height: 90%;
                letter-spacing: 0.025em;
                padding: 0;
                margin: 0; // background-color: rgba(255, 255, 255, .5);
                color: $alternateBackgroundColor;
                display: table;
                padding: 5px; //text-shadow: 1px 2px 2px $alternateBackgroundColor;
                @media (max-width: 767px) {
                    font-size: 23px;
                }
                @media (min-width: 1500px) {
                    font-size: 50px;
                }
            }
        }
    }
}

#sectionAbout {
    height: auto;
    .aboutContent {
        color: #2b2b2b;
        p {
            margin-top: 2px;
        }
    }
}

#sectionAmenities {
    background-color: $alternateBackgroundColor;
    height: auto;
    ul {
        list-style: none;
        font-size: 21px;
        padding: 0;
        li {
            span {
                margin: 0;
                padding: 0;
                display: table-cell;
            }
            .bullet {
                color: $bulletColor;
                padding: 0;
                padding-right: 10px;
                font-weight: 700;
                display: table-cell;
                float: left;
            }
        }
    }
    @media (max-width: 767px) {
        ul {
            font-size: 15px;
        }
    }
}

#sectionPackages {
    color: #2b2b2b;
    .contentDivs {
        display: table-cell;
    }
    .left {
        box-sizing: border-box;
        padding: 30px;
        padding-left: 0px;
        @media (max-width: 767px) {
            padding: 20px 2px;
        }
    }
    .right {
        box-sizing: border-box;
        padding: 30px;
        padding-right: 0px;
        @media (max-width: 768px) {
            padding: 20px 2px;
        }
    }
    .firstLine {
        @media (min-width: 768px) {
            height: 480px !important;
        }
        @media (min-width: 1200px) {
            height: 340px !important;
        }
    }
    .secondLine {
        @media (min-width: 768px) {
            height: 760px !important;
        }
        @media (min-width: 1000px) {
            height: 550px !important;
        }
        @media (min-width: 1200px) {
            height: 440px !important;
        }
    }
    .content {
        border: 2px solid #222;
        width: 100%;
        height: auto;
        padding: 15px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        transition: 0.3s;
        box-sizing: border-box;
        background-color: $alternateBackgroundColor;
        h3 {
            text-align: center;
            color: #dec363;
        }
        p {
            text-align: left;
            width: auto;
            margin: auto;
        }
        .item {
            display: inline-block;
            color: white;
            padding: 0;
            font-size: 15px;
            margin: -3px 0;
            .bulletItem {
                img {
                    height: 13px;
                    margin: 0;
                    margin-right: -0.15px;
                    padding: 0;
                }
                margin:0;
                margin-right: -0.45px;
                padding:0;
                color:#dec363;
                font-size:48px;
                line-height:.005em;
                letter-spacing: -0.10em;
            }
            .textItem {
                margin: 0;
                padding: 0;
            }
        }
    }
    .content:hover {
        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
}

#sectionGallery {
    width: 100%;
    height: auto;
    #gallery {
        padding: 20px 0px 0px 0px;
        position: absolute;
        top: 0;
        left: 0;
        height: 590px;
        width: 100%;
        position: relative;
        width: 100%;
        @media (max-width: 767px) {
            height: auto;
        }
    }
    .pics {
        display: none;
        overflow: hidden;
    }
    .one {
        display: block;
    }
    .picSmall {
        width: 40%;
        height: 150px;
        margin: auto;
        position: relative;
        overflow: hidden;
        overflow: hidden;
        @media (max-width: 767px) {
            height: 30%;
            width: 90%;
        }
        img {
            width: 61%;
            z-index: 120;
            height: 100%;
            position: relative;
            margin: auto;
            /* -moz-box-shadow: 0 0 5px 5px #222;
                        -webkit-box-shadow: 0 0 5px 5px#222;
                        box-shadow: 0 0 5px 5px #222;
                        border: 1px solid #222;*/
        }
        .galleryArrow {
            background-color: rgba(0, 0, 0, 0.4);
            cursor: pointer;
            position: absolute;
            text-align: center;
            height: 85%;
            margin-top: 2.05%;
            width: 25%; //padding-top:35%;
            overflow: hidden;
            a {
                height: 100%;
                img {
                    height: 100%;
                    width: auto;
                    z-index: 90;
                    object-fit: cover;
                    object-position: center;
                }
            }
        }
        .leftArrow {
            left: 0;
        }
        .rightArrow {
            right: 0;
        }
    }
    .picLarge {
        width: 100%;
        height: 480px;
        padding: 0;
        margin: 20px 0px 0px 0px;
        position: relative;
        overflow: hidden;
        @media (max-width: 767px) {
            height: 68%;
        }
        img {
            width: 100%;
            height: 100%;
            position: relative;
            object-fit: cover;
            object-position: center;
        }
    }
}

#sectionContactInformation {
    background-color: $alternateBackgroundColor;
    width: 100%;
    padding-bottom: 25px !important;
    .iconContact {
        display: inline-block;
        width: 20px;
        img {
            width: 14px;
            height: 12px;
            float: right
        }
        .port {
            width: 12px;
            height: 14px;
            float: right
        }
    }
}

#mapSection {
    width: 100%;
    height: 270px;
    @media (max-width: 767px) {
        height: 180px;
    }
}

#sectionContact {
    height: auto;
    form {
        color: #000;
        margin-left: 0.8em;
        margin-top: 25px;
        font-size: 16px;
        width: 100%;
        label {
            text-align: left;
        }
        input,
        textarea {
            border: none;
            padding-left: 0; //border-top:1.5px solid #eee;
            border-bottom: 1.5px solid #eee;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.74);
        }
        button {
            margin-left: 0;
            margin-top: 15px;
            color: #fff;
            background-color: $alternateBackgroundColor;
        }
        .pure-control-group {
            margin-bottom: 3px;
        }
    }
}

.centeredSection {
    width: 70% !important;
    margin: auto;
    @media (max-width: 767px) {
        width: 96% !important;
        margin: auto;
    }
}

#credits {
    font-size: 14px;
    padding: 20px;
    margin: auto;
    margin-top: 90px;
    text-align: center;
    color: $bulletColor;
    display: block;
    @media (max-width: 767px) {
        font-size: 11px;
    }
    p {
        padding: 0;
        margin: 0;
    }
}

.mainAreaPadding {
    padding-top: $sectionTopPaddingPc;
    padding-bottom: $sectionBottomPaddingPc;
    @media (max-width: 767px) {
        padding-top: $sectionTopPaddingMob;
        padding-bottom: $sectionBottomPaddingMob;
    }
}

.sectionHead {
    width: 100%;
    text-align: left;
    margin-top: 10vh;
    letter-spacing: 0.02em;
    color: inherit;
    font-weight: 400;
    font-size: 25px;
    @media (max-width: 767px) {
        font-size: 19px;
    }
}

.blur {
    -webkit-filter: blur(1px);
    filter: blur(1px);
}

.contrast {
    filter: contrast(90%);
    -webkit-filter: contrast(90%);
}

.contrastLow {
    filter: contrast(90%);
    -webkit-filter: contrast(90%);
    -webkit-filter: brightness(90%);
    filter: brightness(90%);
    -webkit-transition: all 1.8s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 1.8s ease;
}

.contrastHigh {
    filter: contrast(120%);
    -webkit-filter: contrast(120%);
    -webkit-filter: brightness(120%);
    filter: brightness(120%);
    -webkit-transition: all 1.8s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    transition: all 1.8s ease;
}

.imagePositionCenter {
    object-fit: cover;
    object-position: center;
}

.fadeInLeft {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

.pc {
    display: none;
    @media (min-width: 768px) {
        display: inline-block;
    }
}

.mobile {
    display: none;
    @media (max-width: 767px) {
        display: inline-block;
    }
}