/*
    address a class by .
    address an id by #
*/
/*========================================================================================================================================================*/
/*ALL SCREEN RESOLUTIONS (DEFAULT LAYOUT)*/
/*========================================================================================================================================================*/

.homesection1, .homesection2 {
    width: 100%;
}

.homesection1container {
    background-image: url('../images/home/homesection1background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.homesection1containertop {
    margin-top: 50px;
}

.homesection1containerbottom {
    margin-top: 40px;
    color: white;
}

.homesection1containertop, .homesection1containerbottom {
    width: 450px;
    margin-right: 40px;
}

#btnBookSpotNow {
    text-decoration: none;
}

/*#btnBookSpotNow {
    font-size: 18px;
    font-weight: bold;
    color: red;
    border-color: red;
    border-width: 1px;
    padding: 10px 20px 10px 20px;
    background-color: rgb(255,255,255, 0.6);
    border: solid;
    text-decoration: none;
}

    #btnBookSpotNow:hover {
        box-shadow: rgba(255,255,255,0.8) 0 0 40px;
        background-color: rgb(255,255,255, 1);
        transition: 0.3s;
    }*/

.homesection1containerbottom p {
    font-size: 16px;
}

.homepromosection {
    background-image: url('../images/promo01.jpg');
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;

    display: flex;
    flex-direction: column;
    width:100vw;
    height: 60vh;
    align-items: center;
    justify-content: center;
}

.homesection2container {
    background-image: url('../images/homesection2background.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    height: 60vh;
    align-items: center;
    justify-content: center;
}

    .homesection2container h1 {
        font-size: 25px;
        font-weight: bold;
        color: #fc4444;
    }


    .homesection2container p {
        text-align: center;
        padding: 0 25% 0 25%;
    }

.homesection3 {
    width: 100%;
}

.homesection3container {
    background-image: url('../images/home/homesection3background.jpg');
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    height: 85vh;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .homesection3container h1 {
        position: relative;
        font-size: 25px;
        font-weight: bold;
        color: #fc4444;
        text-shadow: 5px 5px 10px #000000;
    }

.homesection3imgcontainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 60vh;
    position: relative;
}

    .homesection3imgcontainer img {
        width: 600px;
    }

.homesection4 {
    width: 100%;
}

.homesection4container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 40px 0 20px 0;
}

    .homesection4container h1 {
        font-size: 25px;
        font-weight: bold;
        color: #fc4444;
    }

#homesection4carousel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/*=========================================================================================================================*/
.homesection4containerbottom {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

    .homesection4containerbottom div {
        margin: 0 20px 0 20px;
    }

.homesection4divider {
    background-image: url('../images/homesection4background.jpg');
    background-size: cover;
    background-position: center;
    height: 20vh;
    width: 100%;
}

.homesection5 {
    width: 100%;
}

.homesection5container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}


.homesection5map {
    width: 100%;
    margin: 20px;
}

.homesection5map-iframe {
    width: 100%;
    height: 100%;
}

.homesection5contactus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    width: 100%;
}

.homesection5contactusheader {
    width: 100%
}

.homesection5contactusdetails td {
    padding: 5px;
}

.homesection5contactusmessage {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%
}

    .homesection5contactusmessage input {
        width: 400px;
    }

    .homesection5contactusmessage textarea {
        width: 400px;
    }

.ellipsiscontainer {
    position: fixed;
    display: none;
    top: 540px;
    left: 1170px;
    z-index: 600;
    text-align: center;
    vertical-align: middle;
}

.textballoonellipsisbtn {
    border: 1px solid black;
    color: white;
    background-color: red;
    border-radius: 50%;
    transform: scale(0.7);
    /*font-weight:bold;*/
    /*text-align: center;*/
}

.textballoonclosebtn {
    position: absolute;
    font-size: 10px;
    font-weight: bold;
    color: black;
    background-color: red;
    border: 1px solid black;
    left: 800px;
    top: 40px;
    padding: 0 3px 0 3px;
    /*cursor:pointer;*/
}

    .textballoonclosebtn:hover {
        color: red;
        background-color: black;
        border-color: black;
    }

.textballoon {
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 200px;
    color: white;
    background-image: url('../images/textballoonthinkingx.png');
    background-size: contain; /* makes the image cover the entire div */
    background-position: center; /* centers the image */
    background-repeat: no-repeat; /* prevents tiling */
    top: 350px;
    left: 370px;
    padding-bottom: 10px;
    /*border:solid;*/
}

.textballoontop {
    font-weight: bold;
    font-size: 20px;
}

.textballoonbottom {
    /*font-weight: bold;*/
    font-size: 16px;
}

.textballoonrect {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    text-decoration: none;
    width: 420px;
    height: 200px;
    color: white;
    background-image: url('../images/textballoon_1300.png');
    background-size: contain; /* makes the image cover the entire div */
    background-position: center; /* centers the image */
    background-repeat: no-repeat; /* prevents tiling */
    /*top: 350px;*/
    /*left: 370px;*/
    left: 300px;
    padding-bottom: 40px;
}

.thoughtballoon1 {
    font-size:18px;
    font-weight:bold;
}

.thoughtballoon2 {
    font-size: 16px;   
}

.thoughtballoon3 {
    font-size: 18px;
    font-weight: bold;
}

/*overrides*/
.mb-3 {
    display: flex;
    flex-direction: row;
}


/*========================================================================================================================================================*/
/*LARGER SCREENS LANDSCAPE*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 1920px) {
    .homesection1containertop {
        margin-top: 150px;
    }

    .ellipsiscontainer {
        top: 820px;
        left: 1420px;
    }

    .textballoonclosebtn {
        left: 1070px;
        top: 40px;
    }

    .textballoon {
        left: 320px;
        top: 650px;
    }

    .textballoonrect {
        /*width: 300px;*/
        left: 570px;
    }
}

/*========================================================================================================================================================*/
/*BETWEEN LARGE & MEDIUM SCREENS LANDSCAPE*/
/*========================================================================================================================================================*/
@media only screen and (max-width: 1600px) {
    .homesection1containertop {
        margin-top: 80px;
    }

    .ellipsiscontainer {
        top: 510px;
        left: 1190px;
    }

    .textballoonclosebtn {
        left: 920px;
        top: 40px;
    }

    .textballoon {
        left: 370px;
        top: 480px;
    }

    .textballoonrect {
        /*width: 300px;*/
        left: 300px;
    }
}

/*========================================================================================================================================================*/
/*MEDIUM SCREENS LANDSCAPE*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 1366px) {
    .homesection1containertop {
        margin-top: 80px;
    }

    .ellipsiscontainer {
        top: 510px;
        left: 1190px;
    }

    .textballoonclosebtn {
        left: 800px;
        top: 40px;
    }

    .textballoon {
        left: 380px;
        top: 380px;
    }

    .textballoonrect {
        /*width: 300px;*/
        left: 300px;
    }
}

/*========================================================================================================================================================*/
/*TABLET AND LANDSCAPE*/
/*========================================================================================================================================================*/
@media only screen and (max-width: 1280px) {

    .ellipsiscontainer {
        top: 560px;
        left: 1150px;
    }

    .textballoonclosebtn {
        left: 760px;
        top: 40px;
    }

    .textballoon {
        left: 380px;
        top: 380px;
    }

    .textballoonrect {
        /*width: 300px;*/
        left: 300px;
    }
}

/*========================================================================================================================================================*/
/*iPAD AND LANDSCAPE*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 1180px) {
    .ellipsiscontainer {
        top: 620px;
        left: 1070px;
    }

    .textballoonclosebtn {
        left: 720px;
        top: 40px;
    }

    .textballoon {
        left: 340px;
        top: 440px;
    }

    .textballoonrect {
        /*width: 300px;*/
        left: 200px;
    }
}


/*========================================================================================================================================================*/
/*iPAD AND PORTRAIT*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 820px) {
    .homesection1container {
        background-position: left top;
        justify-content: center;
        align-items: center;
    }

    .homesection1containertop, .homesection1containerbottom {
        width: 100%;
        margin-right: unset;
    }

    .homesection1containertop {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top:0;
    }

    .homesection1containerbottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-weight: bold;
        padding: 5px;
    }

        .homesection1containerbottom p {
            margin-left: 60px;
            margin-right: 60px;
            font-size: 22px;
            text-shadow: 1px 2px 10px black;
        }

    .ellipsiscontainer {
        top: 900px;
        left: 660px;
    }

    .textballoonclosebtn {
        left: 540px;
        top: 50px;
    }

    .textballoon {
        left: 110px;
        top: 720px;
    }

    .textballoonrect {
        /*width: 300px;*/
        left: 270px;
        top: 130px;
    }
}




/*========================================================================================================================================================*/
/*TABLET AND PORTRAIT*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 800px) {
    .homesection1container {
        background-position: left top;
        justify-content: center;
    }

    .homesection1containertop {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .homesection1containerbottom {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        font-weight: bold;
        padding: 5px;
    }

        .homesection1containerbottom p {
            margin-left: 150px;
            margin-right: 150px;
            font-size: 22px;
            text-shadow: 1px 2px 10px black;
        }

    .homesection2container {
        height: 40vh;
    }

    .homesection1containertop, .homesection1containerbottom {
        width: 100%;
        margin-right: unset;
    }

    .homesection2container h1 {
        font-size: 25px;
    }

    .homesection2container p {
        padding: 5px 150px 5px 150px;
        font-size: 22px;
    }

    .homesection3container {
        height: 40vh;
    }

        .homesection3container h1 {
            font-size: 25px;
            text-align: center;
        }

    .homesection4containerbottom {
        align-items: start;
    }

    .homesection4containertop h1 {
        font-size: 25px;
        text-align: center;
    }

    .homesection4containerbottom p {
        align-items: start;
        justify-content: start;
        padding: 0 20px;
    }

    .homesection4containerbottom div {
        margin: 0 5px 0 5px;
        width: 100%;
    }

    .homesection4divider {
        background-position: 0 -270px;
        height: 5vh;
    }

    .homesection5container {
        flex-direction: column;
        align-items: center;
    }

    .homesection5map {
        height: 300px;
        margin: unset;
        padding: 10px;
    }


    .homesection5contactus {
        padding: 20px;
    }

    .form-control {
        width: 95vw !important;
    }

    .ellipsiscontainer {
        top: 1000px;
        left: 640px;
    }

    .textballoonellipsisbtn {
    }

    .textballoonclosebtn {
        left: 490px;
        top: 30px;
    }

    .textballoon {
        left: 150px;
        top: 850px;
        height: 150px;
        background-position: center;
        padding-bottom: 20px;
    }

    .textballoontop {
        font-size: 16px;
        /*padding-left: 100px;*/
    }

    .textballoonbottom {
        font-size: 12px;
        /*padding-left: 100px;*/
    }

    .textballoonrect {
        width: 320px;
        left: 270px;
        top: 120px;
    }
}



/*========================================================================================================================================================*/
/*PHONE AND PORTRAIT*/
/*========================================================================================================================================================*/

@media only screen and (max-width: 480px) {
    .homesection1container {
        align-items: center;
        height: 77vh;
        background-position: left top;
    }

    .homesection1containertop {
        margin-top: 30px;
    }

    .homesection1containerbottom {
        justify-content: center;
        margin-top: 20px;
        color: white;
    }

    .homesection1containertop, .homesection1containerbottom {
        margin-left: 0;
        margin-right: 0;
    }

        .homesection1containerbottom div {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .homesection1containerbottom p {
            margin-left: 5px;
            margin-right: 5px;
            font-size: 16px;
        }

    .homesection2container h1 {
        font-size: 25px;
    }

    .homesection2container p {
        font-size: 14px;
        text-align: center;
        padding: 5px;
    }

    .homesection3container h1 {
        font-size: 25px;
    }

    .homesection4containertop h1 {
        font-size: 25px;
    }

    .form-control {
        width: 89vw !important;
    }

    .ellipsiscontainer {
        top: 630px;
        left: 270px;
    }

    .textballoonellipsisbtn {
    }

    .textballoonclosebtn {
        left: 290px;
        top: 30px;
    }

    .textballoon {
        left: -20px;
        top: 540px;
        height: 150px;
        background-position: center;
        padding-bottom: 20px;
    }

    .textballoontop {
        font-size: 14px;
        /*padding-left: 100px;*/
    }

    .textballoonbottom {
        font-size: 12px;
        /*padding-left: 100px;*/
    }

    .textballoonrect {
        width: 320px;
        left: 50px;
    }
}