body {
    background-image: url(../Content/dessert-pattern-2.png);
    background-size: 500px;
    background-position: 0px, 0px;
    margin:0;
    padding:0;
}

.source-sans-3-regular {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.artifika-regular {
    font-family: "Artifika", serif;
    font-weight: 400;
    font-style: normal;
}

.the-nautigal-regular {
    font-family: "The Nautigal", cursive;
    font-weight: 400;
    font-style: normal;
}

.the-nautigal-bold {
    font-family: "The Nautigal", cursive;
    font-weight: 700;
    font-style: normal;
}

.my-navbar {
    z-index: 100;
    position: fixed;
    height: 90px;
    width: 100%;
    background-image: linear-gradient(to right, #197150, #035437);
    margin: 0px;
    padding: 0px;
    border-radius: 0px 0px 0px 150px;
}

@media (max-width: 992px) {
    .my-navbar {
        height: 60px;
    }
}

@media (max-width: 600px) {
    .my-navbar {
        height: 50px;
    }
}

@media (min-width: 1400px) {
    .my-navbar {
        height: 130px;
    }
}

.navbar-fulham-logo-div {
    position: absolute;
    padding: 0px;
    border: 0px;
    margin: 0px;
    left: 0;
    top: 0;
    user-select: none;
}

@media (max-width: 992px) {
    .navbar-fulham-logo-div { 
        height: 96px;
        width: auto;
    }
}

@media (max-width: 600px) {
    .navbar-fulham-logo-div {
        height: 80px;
        width: auto;
    }
}

@media (min-width: 1400px) {
    .navbar-fulham-logo-div {
        height: 208px;
    }
}

.navbar-options-div {
    position: absolute;
    top: 0px;
    left: 266px;
    margin: 0;
    padding: 0;
    width: calc(100% - 266px);
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

@media (max-width: 992px) {
    .navbar-options-div {
        width: calc(100% - 185px);
        left: 185px;
    }
}

@media (max-width: 600px) {
    .navbar-options-div {
        display: none;
    }
}

@media (min-width: 1400px) {
    .navbar-options-div {
        width: calc(100% - 390px);
        left: 390px;
    }
}

.navbar-options-div > button {
    font-size: 17px;
    font-family: "Artifika", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    text-shadow: 4px 4px 4px rgba(0,0,0,0.4);
    margin: 0px;
    padding: 5px;
    line-height: 1.2;
    border: none;
    text-decoration: none;
    background: transparent;
    user-select: none;
}

.navbar-options-div > button:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .navbar-options-div > button {
        font-size: 12px;
    }
}

@media (min-width: 1400px) {
    .navbar-options-div > button {
        font-size: 24px;
    }
}

.navbar-facebook-logo-div {
    width: 40px;
    height: 40px;
    margin: 0px;
    padding: 5px;
    background-image: url(../Content/facebook.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 992px) {
    .navbar-facebook-logo-div {
        width: 25px;
        height: 25px;
    }
}

@media (min-width: 1400px) {
    .navbar-facebook-logo-div {
        width: 50px;
        height: 50px;
    }
}

.navbar-hamburger-menu-button {
    position: absolute;
    width: 25px;
    height: 20px;
    margin: 0px;
    padding: 0px;
    top: 15px;
    right: 10px;
    display: none;
    background-color: transparent;
    border: none;
    text-decoration: none;
    user-select: none;
}

@media (max-width: 600px) {
    .navbar-hamburger-menu-button {
        display: block;
    }
}

.navbar-hamburger-menu-line { /* Each line within the div */
    position: absolute;
    width: 100%;
    height: 2px;
    margin: 0px;
    padding: 0px;
    background-color: white;
    border-radius: 5px 5px 0px 0px;
}

.close-sidebar-button {
    position: absolute;
    width: 25px;
    height: 26px;
    margin: 0px;
    padding: 0px;
    top: 12px;
    right: 10px;
    display: none;
    background-color: transparent;
    border: none;
    text-decoration: none;
    user-select: none;
}

.my-sidebar {
    z-index: 100;
    margin: 0px;
    padding: 0px;
    position: fixed;
    top: 50px;
    right: 0;
    height: 100%;
    width: 0px;
    background-color: rgba(0,0,0,0.8);
    transition: width 0.5s;
    overflow: hidden;
}

.sidebar-options-div {
    position: absolute;
    top: 30px;
    right: 10px;
    margin: 0;
    padding: 0;
    width: 150px;
    height: calc(100% - 30px);
    display: flex;
    flex-direction: column;
    align-items: end;
    user-select: none;
}

.sidebar-options-div > button {
    font-size: 12px;
    font-family: "Artifika", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    text-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    margin: 0px;
    padding: 0px;
    line-height: 1.2;
    border: none;
    text-decoration: none;
    background: transparent;
    margin-bottom: 30px;
}

.empty-div-for-space-at-top {
position: relative;
width: 100%;
height: 105px;
padding:0;
margin:0;
}

@media (max-width: 992px) {
    .empty-div-for-space-at-top {
        height: 75px;
    }
}

@media (max-width: 600px) {
    .empty-div-for-space-at-top {
        height: 60px;
    }
}

@media (min-width: 1400px) {
    .empty-div-for-space-at-top {
        height: 155px;
    }
}


.main-body-div {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.div-for-image-at-top {
    position: relative;
    overflow-x: hidden;
    width: 100%;
    height: 396px;
    border-top: 15px solid rgba(172,0,0,255);
    border-bottom: 15px solid rgba(172,0,0,255);
    padding: 0;
    margin: 0;
    margin-bottom: 70px;
    user-select: none;
}

@media (max-width: 992px) {
    .div-for-image-at-top {
        height: 264px;
        margin-bottom: 40px;
        border-top: 10px solid rgba(172,0,0,255);
        border-bottom: 10px solid rgba(172,0,0,255);
    }
}

@media (max-width: 600px) {
    .div-for-image-at-top {
        height: 280px;
        margin-bottom: 30px;
        border-top: 8px solid rgba(172,0,0,255);
        border-bottom: 8px solid rgba(172,0,0,255);
    }
}

@media (min-width: 1400px) {
    .div-for-image-at-top {
        margin-bottom: 80px;
    }
}

.sliding-image-at-top {
    position: absolute;
    width: 7284px; /* background size times 3 */
    height: 100%;
    background: url(../Content/NewBakedGoodsPic-Seamless-Edited.jpg) repeat-x;
    background-size: 809.3px; /* a third the size of the original image's width of 2428px (the height is adjusted automatically), as I wanted the image to be more "zoomed out" */
    top: 0px;
    left: 0px;
    animation: slide 50s linear infinite;
}

@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }

    100% {
        transform: translate3d(-809.3px, 0, 0); /* 809.3px, same as the background-size */
    }
}

.text-at-top {
    background-color: rgba(0,0,0,0.3); /* darkened background for greater legibility */
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0px;
    top: 0px;
    color: white;
    line-height: 1.2;
    font-family: "The Nautigal", cursive;
    font-weight: 700;
    font-style: normal;
    font-size: 110px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

@media (max-width: 992px) {
    .text-at-top {
        font-size: 60px;
    }
}

@media (max-width: 600px) {
    .text-at-top {
        font-size: 56px;
    }
}

@media (min-width: 1400px) {
    .text-at-top {
        font-size: 140px;
    }
}

.about-div {
    position: relative;
    left: 5%;
    width: 90%;
    height: 596px;
    padding: 0;
    margin: 0;
    margin-bottom: 70px;
}

@media (max-width: 992px) {
    .about-div {
        height: 546px;
        margin-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .about-div {
        display: none
    }
}

@media (min-width: 1400px) {
    .about-div {
        height: 695px;
        margin-bottom: 80px;
    }
}

.about-div-for-mobile {
    position: relative;
    left: 10%;
    width: 80%;
    height: 579px;
    padding: 0;
    margin: 0;
    margin-bottom: 30px;
    display: none;
    scroll-margin-top: 50px;
}

@media (max-width: 600px) {
    .about-div-for-mobile {
        display: block;
    }
}

.about-title-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    padding: 0;
    margin: 0;
    background-image: linear-gradient(to right, #ac0000, #7a0000);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    scroll-margin-top: 100px;
}

@media (max-width: 992px) {
    .about-title-block {
        height: 36px;
        scroll-margin-top: 70px;
    }
}

@media (max-width: 600px) {
    .about-title-block {
        height: 30px;
    }
}

@media (min-width: 1400px) {
    .about-title-block {
        scroll-margin-top: 140px;
    }
}

.about-title-block > p {
    font-family: "The Nautigal", cursive;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

@media (max-width: 992px) {
    .about-title-block > p {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .about-title-block > p {
        font-size: 20px;
    }
}

@media (min-width: 1400px) {
    .about-title-block > p {
        font-size: 40px;
    }
}

.about-main-block {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 529px;
    padding: 0;
    margin: 0;
    border-radius: 0px 0px 100px 0px;
    background-image: linear-gradient(to right, #ac0000, #7a0000);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

@media (max-width: 992px) {
    .about-main-block {
        height: 500px;
        border-radius: 0px 0px 200px 0px;
    }
}

@media (max-width: 600px) {
    .about-main-block {
        width: 100%;
        height: 374px;
        border-radius: 0px 0px 100px 0px;
    }
}

@media (min-width: 1400px) {
    .about-main-block {
        height: 625px;
    }
}

.about-left-div { 
    position: absolute;
    top: 0;
    left: 0;
    width: 55%;
    height: 100%;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    .about-left-div {
        width: 53.5%;
    }
}

.about-right-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 45%;
    height: 100%;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    .about-right-div {
        width: 46.5%;
    }
}

.about-text-div {
    position: absolute;
    top: 50px;
    left: 40px;
    width: calc(100% - 80px);
    height: auto;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    .about-text-div {
        top: 30px;
        left: 30px;
        width: calc(100% - 60px);
    }
}

@media (max-width: 600px) {
    .about-text-div {
        top: 0px;
        left: 20px;
        width: calc(100% - 40px);
        min-height: 284px;
    }
}

@media (min-width: 1400px) {
    .about-text-div {
        top: 50px;
        left: 50px;
        width: calc(100% - 100px);
    }
}

.about-text-div > p {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    min-height: 100%;
    color: white;
    font-size: 18px;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

@media (max-width: 800px) {
    .about-text-div > p {
        font-size: 16px;
    }
}

@media (max-width: 660px) {
    .about-text-div > p {
        font-size: 15px;
    }
}

@media (max-width: 600px) {
    .about-text-div > p {
        font-size: 15px;
        text-align: center;
    }
}

@media (max-width: 500px) {
    .about-text-div > p {
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .about-text-div > p {
        font-size: 12px;
    }
}

@media (max-width: 300px) {
    .about-text-div > p {
        font-size: 10px;
    }
}

@media (min-width: 1400px) {
    .about-text-div > p {
        font-size: 24px;
    }
}

.show-location-button {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 95px);
    width: 190px;
    height: 50px;
    background-color: white;
    border-radius: 50px;
    color: #197150;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    font-size: 17px;
    padding: 0;
    margin: 0;
    border: none;
    text-decoration: none;
    user-select: none;
}

@media (max-width: 992px) {
    .show-location-button {
        left: calc(50% - 65px);
        height: 34px;
        width: 130px;
        bottom: 30px;
        font-size: 12px;
    }
}

/*
@media (max-width: 600px) {
    .show-location-button {
        left: calc(50% - 55px);
        height: 24px;
        width: 110px;
        bottom: 36px;
        font-size: 10px;
    }
}
*/

@media (max-width: 600px) {
    .show-location-button {
        bottom: 36px;
    }
}

@media (max-width: 300px) {
    .show-location-button {
        left: calc(50% - 45px);
        height: 20px;
        width: 90px;
        bottom: 30px;
        font-size: 8px;
    }
}

@media (min-width: 1400px) {
    .show-location-button {
        left: calc(50% - 125px);
        height: 60px;
        width: 250px;
        bottom: 50px;
        font-size: 20px;
    }
}

.about-image-outer-div {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 460px;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

@media (max-width: 992px) {
    .about-image-outer-div {
        height: 360px;
    }
}

@media (min-width: 1400px) {
    .about-image-outer-div {
        height: 543px;
    }
}

.about-image-div {
    position: absolute;
    width: 100%;
    height: 100%;
    top: -12px;
    right: -12px;
    border-radius: 100px 0px 100px 100px;
    border: 12px solid white;
    background-image: url(../Content/Fulham-Sign-Photo.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    .about-image-div {
        top: -10px;
        right: -10px;
        border: 10px solid white;
        border-radius: 50px 0px 50px 100px;
    }
}

@media (max-width: 600px) { /* Note: Outer image div no longer in use at this width; just image div alone*/
    .about-image-div {
        top: 40px;
        right: 0;
        width: 100%;
        height: 155px;
        border: none;
        border-radius: 0;
    }
}

@media (max-width: 800px) {
    .about-image-div {
        background-image: url('../content/1to1RatioSignPicture.jpg');
    }
}

.red-line-upper {
    position: relative;
    width: 100%;
    height: 15px;
    margin: 0px;
    padding: 0px;
    margin-bottom: 8px;
    background-color: #ac0000;
    scroll-margin-top: 100px;
}

@media (max-width: 992px) {
    .red-line-upper {
        height: 10px;
        margin-bottom: 5px;
        scroll-margin-top: 70px;
    }
}

@media (max-width: 600px) {
    .red-line-upper {
        scroll-margin-top: 50px;
    }
}

@media (min-width: 1400px) {
    .red-line-upper {
        margin-bottom: 12px;
        scroll-margin-top: 140px;
    }
}


.our-offerings-title-div {
    position: relative;
    left: calc(50% - 143px);
    width: 286px;
    height: 42px;
    margin: 0px;
    padding: 0px;
    margin-bottom: 60px;
    background-color: transparent;
    border-bottom: 2px solid #ac0000;
    justify-content: center;
    align-items: start;
    text-align: center;
    font-family: "The Nautigal", cursive;
    font-weight: 1000;
    font-style: normal;
    font-size: 32px;
    color: #ac0000;
    line-height: 1.2;
}

@media (max-width: 992px) {
    .our-offerings-title-div {
        left: calc(50% - 107.5px);
        width: 215px;
        height: 30px;
        margin-bottom: 40px;
        border-bottom: 1px solid #ac0000;
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .our-offerings-title-div {
        left: calc(50% - 81px);
        width: 162px;
        height: 24px;
        margin-bottom: 30px;
        font-size: 20px;
    }
}

@media (min-width: 1400px) {
    .our-offerings-title-div {
        left: calc(50% - 178px);
        width: 356px;
        height: 53px;
        margin-bottom: 60px;
        font-size: 40px;
    }
}

.carousel-and-arrows-div {
    position: relative;
    width: 100%;
    height: 440px;
    margin: 0px;
    padding: 0px;
    margin-bottom: 60px;
}

@media (max-width: 992px) {
    .carousel-and-arrows-div {
        height: 350px;
        margin-bottom: 35px;
    }
}

/*
@media (max-width: 600px) {
    .carousel-and-arrows-div {
        height: 310px;
        margin-bottom: 30px;
    }
}

*/

@media (min-width: 1400px) {
    .carousel-and-arrows-div {
        height: 510px;
    }
}

.left-arrow-button {
    z-index: 90;
    position: absolute;
    top: calc(50% - 30px);
    left: 70px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #ac0000, #7a0000);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    font-size: 50px;
    padding: 0;
    margin: 0;
    border: none;
    text-decoration: none;
    user-select: none;
}

@media (max-width: 992px) {
    .left-arrow-button {
        top: calc(50% - 18px);
        left: 40px;
        width: 36px;
        height: 36px;
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .left-arrow-button {
        left: 6px;
    }
}

@media (min-width: 1400px) {
    .left-arrow-button {
        height: 80px;
        width: 80px;
        left: 8.33%;
        font-size: 70px;
    }
}

.left-fading-block {
    z-index: 89;
    position: absolute;
    top: 0;
    left: 0px;
    /* width: 145px; */
    height: 100%;
    background-image: linear-gradient(to left, transparent, white);
    display: none;
    /*
    background-image: url(../Content/dessert-pattern-2.png);
    background-size: 500px;
    background-position-y: -35px;
    margin: 0;
    padding: 0;
    */
}

@media (max-width: 700px) {
    .left-fading-block {
        width: 90px;
        display: block;
    }
}

.right-arrow-button {
    z-index: 90;
    position: absolute;
    top: calc(50% - 30px);
    right: 70px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #ac0000, #7a0000);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    font-size: 50px;
    padding: 0;
    margin: 0;
    border: none;
    text-decoration: none;
    user-select: none;
}

@media (max-width: 992px) {
    .right-arrow-button {
        top: calc(50% - 18px);
        right: 40px;
        width: 36px;
        height: 36px;
        font-size: 30px;
    }
}

@media (max-width: 600px) {
    .right-arrow-button {
        right: 6px;
    }
}

@media (min-width: 1400px) {
    .right-arrow-button {
        height: 80px;
        width: 80px;
        right: 8.33%;
        font-size: 70px;
    }
}

.right-fading-block {
    z-index: 89;
    position: absolute;
    top: 0;
    right: 0px;
    /* width: 145px; */
    height: 100%;
    background-image: linear-gradient(to right, transparent, white);
    display: none;
    /*
    background-image: url(../Content/dessert-pattern-2.png);
    background-size: 500px;
    background-position-y: -35px;
    background-position-x: -135px;
    margin: 0;
    padding: 0;
    */
}

@media (max-width: 700px) {
    .right-fading-block {
        width: 90px;
        display: block;
    }
}

.carousel-div-outer {
    position: relative;
    top: 0;
    left: calc(50% - 495px);
    width: 990px; /* The 'window' into the carousel. If we are to show 3 cards of width 290px (and 4 spaces of 30px) at a time, then that means a 990px window. */
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

@media (max-width: 992px) {
    .carousel-div-outer {
        left: calc(50% - 307px);
        width: 614px;
    }
}

@media (min-width: 1400px) {
    .carousel-div-outer {
        left: calc(50% - 584px);
        width: 1168px;
    }
}

.carousel-div-inner {
    position: relative;
    top: 0;
    left: 0;
    width: calc(4640px + 480px + 30px); /* 16 cards times 290px = 4640px ... 16 "left-margins" times 30px = 480px ... plus 30px for right-hand-side of final card */
    height: 100%;
    margin: 0px;
    padding: 0px;
    transition: transform 0.5s ease-in-out;
}

@media (max-width: 992px) {
    .carousel-div-inner {
        width: calc(2848px + 320px + 20px); /* 16 cards times 178px = 2848px ... 16 "left-margins" times 20px = 320px ... plus 20px for right-hand-side of final card */
    }
}

@media (min-width: 1400px) {
    .carousel-div-inner {
        width: calc(5376px + 640px + 40px); /* 16 cards times 336px = 5376px ... 16 "left-margins" times 40px = 640px ... plus 40px for right-hand-side of final card */
    }
}

.carousel-card-back-rectangle {
    position: relative;
    height: 440px;
    width: 290px;
    top: 0px;
    left: 0px;
    background-color: transparent;
    border: 20px solid #ac0000;
    border-radius: 55px;
    float: left;
    margin: 0;
    padding: 0;
    margin-left: 30px;
}

@media (max-width: 992px) {
    .carousel-card-back-rectangle {
        height: 350px;
        width: 178px;
        border: 10px solid #ac0000;
        border-radius: 30px;
        margin-left: 20px;
    }
}

/*
@media (max-width: 600px) {
    .carousel-card-back-rectangle {
        height: 310px;
    }
}
*/

@media (min-width: 1400px) {
    .carousel-card-back-rectangle {
        height: 510px;
        width: 336px;
        margin-left: 40px;
    }
}

.carousel-card-main-rectangle {
    position: absolute;
    height: 430px;
    width: 280px;
    top: -15px;
    left: -15px;
    background-color: rgba(0,0,0,0.3);
    border: 20px solid white;
    border-radius: 50px;
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .carousel-card-main-rectangle {
        top: -5px;
        left: -5px;
        height: 340px;
        width: 168px;
        border: 10px solid white;
        border-radius: 25px;
    }
}

/*
@media (max-width: 600px) {
    .carousel-card-main-rectangle {
        height: 300px;
    }
}
*/

@media (min-width: 1400px) {
    .carousel-card-main-rectangle {
        height: 500px;
        width: 326px;
    }
}


.carousel-card-top-rectangle {
    position: absolute;
    height: 60px;
    width: 100%;
    top: -20px;
    left: 0;
    background-color: white;
    border-radius: 50px 50px 0px 0px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    color: #ac0000;
    font-size: 16px;
}

@media (max-width: 992px) {
    .carousel-card-top-rectangle {
        top: -10px;
        height: 36px;
        border-radius: 25px 25px 0px 0px;
        font-size: 12px;
    }
}

/* Note: carousel-card-top-rectangle does not change at 600px, so no media query needed for that */

@media (min-width: 1400px) {
    .carousel-card-top-rectangle {
        font-size: 18px;
    }
}

.carousel-card-image-div-outer {
    position: absolute;
    height: 228px;
    width: 100%;
    top: 40px;
    left: 0px;
    background-color: transparent;
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .carousel-card-image-div-outer {
        top: 26px;
        height: 148px;
    }
}

/*
@media (max-width: 600px) {
    .carousel-card-image-div-outer {
        height: 158px;
    }
}
*/

@media (min-width: 1400px) {
    .carousel-card-image-div-outer {
        height: 279px;
    }
}

.carousel-card-image-div-inner {
    position: absolute;
    height: 200px;
    width: 200px;
    top: 14px;
    left: 20px;
    background-color: transparent;
    margin: 0;
    padding: 0;
    user-select: none;
}

@media (max-width: 992px) {
    .carousel-card-image-div-inner {
        height: 128px;
        width: 128px;
        top: 10px;
        left: 10px;
    }
}

/*
@media (max-width: 600px) {
    .carousel-card-image-div-inner {
        height: 138px;
        width: 138px;
        left: 5px;
    }
}
*/

@media (min-width: 1400px) {
    .carousel-card-image-div-inner {
        height: 230px;
        width: 230px;
        top: 24.5px;
        left: 28px;
    }
}

.carousel-card-bottom-rectangle {
    position: absolute;
    height: 142px;
    width: 100%;
    bottom: -20px;
    left: 0;
    background-color: white;
    border-radius: 0px 0px 50px 50px;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.2;
    color: #197150;
    font-size: 14px;
}

@media (max-width: 992px) {
    .carousel-card-bottom-rectangle {
        bottom: -10px;
        height: 156px;
        border-radius: 0px 0px 25px 25px;
        font-size: 12px;
    }
}

/*
@media (max-width: 600px) {
    .carousel-card-bottom-rectangle {
        height: 106px;
        font-size: 10px;
    }
}
*/

@media (min-width: 1400px) {
    .carousel-card-bottom-rectangle {
        height: 161px;
        font-size: 16px;
    }
}

.menu-button {
    position: relative;
    width: 272px;
    height: 50px;
    margin: 0px;
    padding: 0px;
    left: calc(50% - 136px);
    background-image: linear-gradient(to right, #197150, #035437);
    border-radius: 50px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 17px;
    font-family: "Artifika", serif;
    font-weight: 400;
    font-style: normal;
    color: white;
    line-height: 1.2;
    border: none;
    text-decoration: none;
    user-select: none;
}

.menu-button:hover {
    color: white;
}

@media (max-width: 992px) {
    .menu-button {
        left: calc(50% - 81px);
        width: 162px;
        height: 34px;
        margin-bottom: 40px;
        font-size: 12px;
    }
}

/*
@media (max-width: 600px) {
    .menu-button {
        left: calc(50% - 67px);
        width: 134px;
        height: 24px;
        margin-bottom: 30px;
        font-size: 10px;
    }
}
*/

@media (max-width: 300px) {
    .menu-button {
        left: calc(50% - 50px);
        height: 20px;
        width: 110px;
        font-size: 8px;
    }
}

@media (min-width: 1400px) {
    .menu-button {
        left: calc(50% - 150px);
        height: 60px;
        width: 300px;
        font-size: 20px;
        margin-bottom: 60px;
    }
}

.red-line-lower {
    position: relative;
    width: 100%;
    height: 15px;
    margin: 0px;
    padding: 0px;
    margin-bottom: 70px;
    background-color: #ac0000;
}

@media (max-width: 992px) {
    .red-line-lower {
        height: 10px;
        margin-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .red-line-lower {
        margin-bottom: 30px;
    }
}

@media (min-width: 1400px) {
    .red-line-lower {
        margin-bottom: 80px;
    }
}

.contact-us-div {
    position: relative;
    left: 5%;
    width: 90%;
    height: 496px;
    padding: 0;
    margin: 0;
    margin-bottom: 70px;
}

@media (max-width: 992px) {
    .contact-us-div {
        height: 356px;
        margin-bottom: 40px;
    }
}

@media (max-width: 600px) {
    .contact-us-div {
        height: 484px;
        margin-bottom: 30px;
    }
}

@media (min-width: 1400px) {
    .contact-us-div {
        height: 570px;
        margin-bottom: 80px;
    }
}

.contact-us-title-block {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    padding: 0;
    margin: 0;
    background-image: linear-gradient(to right, #ac0000, #7a0000);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
    scroll-margin-top: 100px;
}

@media (max-width: 992px) {
    .contact-us-title-block {
        height: 36px;
        scroll-margin-top: 70px;
    }
}

@media (max-width: 600px) {
    .contact-us-title-block {
        height: 30px;
        scroll-margin-top: 50px;
    }
}

@media (min-width: 1400px) {
    .contact-us-title-block {
        scroll-margin-top: 140px;
    }
}

.contact-us-title-block > p {
    font-family: "The Nautigal", cursive;
    font-weight: 700;
    font-style: normal;
    font-size: 32px;
    color: white;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

@media (max-width: 992px) {
    .contact-us-title-block > p {
        font-size: 24px;
    }
}

@media (max-width: 600px) {
    .contact-us-title-block > p {
        font-size: 20px;
    }
}

@media (min-width: 1400px) {
    .contact-us-title-block > p {
        font-size: 40px;
    }
}

.contact-us-main-block {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 426px;
    padding: 0;
    margin: 0;
    border-radius: 0px 0px 0px 100px;
    background-image: linear-gradient(to right, #ac0000, #7a0000);
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);
}

@media (max-width: 992px) {
    .contact-us-main-block {
        height: 310px;
    }
}

@media (max-width: 600px) {
    .contact-us-main-block {
        height: 444px;
    }
}

@media (min-width: 1400px) {
    .contact-us-main-block {
        height: 500px;
    }
}

.contact-us-text-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 66%;
    height: 100%;
    padding: 0;
    margin: 0;
}

@media (max-width: 992px) {
    .contact-us-text-div {
        width: 59%;
    }
}

@media (max-width: 600px) {
    .contact-us-text-div {
        width: 100%;
        height: 174px;
    }
}

@media (min-width: 1400px) {
    .contact-us-text-div {
        width: 70%;
    }
}

.contact-us-text-div > p{
    position: absolute;
    top: 40px;
    left: 40px;
    width: calc(100% - 80px);
    height: calc(100% - 120px);
    padding: 0;
    margin: 0;
    color: white;
    font-size: 20px;
    padding: 0;
    margin: 0;
    line-height: 1.2;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 992px) {
    .contact-us-text-div > p {
        font-size: 16px;
        top: 30px;
        left: 30px;
        width: calc(100% - 60px);
        height: calc(100% - 90px);
    }
}

@media (max-width: 600px) {
    .contact-us-text-div > p {
        text-align: center;
        font-size: 14px;
        top: 0px;
        left: 20px;
        width: calc(100% - 40px);
        height: 100%;
    }
}

@media (min-width: 1400px) {
    .contact-us-text-div > p {
        font-size: 24px;
        top: 50px;
        left: 50px;
        width: calc(100% - 100px);
        height: calc(100% - 150px);
        justify-content: start;
    }
}

.contact-us-map-div {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 34%;
    height: 100%;
    padding: 0;
    margin: 0;
    user-select: none;
}

@media (max-width: 992px) {
    .contact-us-map-div {
        width: 41%;
    }
}

@media (max-width: 600px) {
    .contact-us-map-div {
        height: 270px;
        width: 100%;
    }
}

@media (min-width: 1400px) {
    .contact-us-map-div {
        width: 30%;
    }
}

.contact-us-map-square {
    position: absolute;
    top: 40px;
    right: 40px;
    width: calc(100% - 40px);
    height: calc(100% - 80px);
    padding: 0;
    margin: 0;
    background-color: lightgrey;
    border: 15px solid white;
    border-radius: 10px;
}

@media (max-width: 992px) {
    .contact-us-map-square {
        top: 30px;
        right: 30px;
        width: calc(100% - 30px);
        height: calc(100% - 60px);
        border: 10px solid white;
    }
}

@media (max-width: 600px) {
    .contact-us-map-square {
        top: 0px;
        left: 15%;
        width: calc(100% - 30%);
        height: calc(100% - 70px);
        border: 10px solid white;
    }
}

@media (min-width: 1400px) {
    .contact-us-map-square {
        top: 50px;
        right: 50px;
        width: calc(100% - 50px);
        height: calc(100% - 100px);
    }
}

.footer-div {
    position: relative;
    width: 100%;
    height: 418px;
    margin: 0px;
    padding: 0px;
}

@media (max-width: 992px) {
    .footer-div {
        height: 261px;
    }
}

@media (max-width: 600px) {
    .footer-div {
        height: 202px;
    }
}

@media (min-width: 1400px) {
    .footer-div {
        height: 444px;
    }
}

.footer-upper-section {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 62px;
    width: 100%;
    height: 356px;
    background-image: linear-gradient(to bottom right, #197150, #035437);
    margin: 0px;
    padding: 0px;
}

@media (max-width: 992px) {
    .footer-upper-section {
        height: 223px;
    }
}

@media (max-width: 600px) {
    .footer-upper-section {
        height: 160px;
    }
}

@media (min-width: 1400px) {
    .footer-upper-section {
        height: 380px;
    }
}

.footer-list-div {
    position: absolute;
    top: 0;
    left: 5%;
    width: auto;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: start;
    line-height: 1.2;
    margin: 0;
    padding: 0;
    user-select: none;
}

.footer-list-div > * {
    border: none;
    text-decoration: none;
    background: transparent;
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    color: white;
    font-size: 20px;
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .footer-list-div > * {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .footer-list-div > * {
        font-size: 12px;
    }
}

@media (min-width: 1400px) {
    .footer-list-div > * {
        font-size: 22px;
    }
}

.footer-image-div {
    position: absolute;
    top: 49px;
    right: 5%;
    height: 258px;
    width: 227px;
    background-image: url('../content/tart_illustration.png');
    background-position: right;
    background-size: contain;
    background-repeat: no-repeat;
}

@media (max-width: 992px) {
    .footer-image-div {
        top: 26.5px;
        height: 170px;
        width: 150px;
    }
}

@media (max-width: 600px) {
    .footer-image-div {
        top: 10px;
        height: 140px;
        width: 115px;
    }
}

@media (min-width: 1400px) {
    .footer-image-div {
        top: 30px;
        height: 320px;
        width: 280px;
    }
}

.footer-external-link-icon {
    position: absolute;
    height: 14px;
    width: 14px;
    margin-top: 3px;
    margin-left: 6px;
    background-image: url('../content/External_Link_Icon.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@media (max-width: 992px) {
    .footer-external-link-icon {
        height: 11px;
        width: 11px;
        margin-top: 2px;
        margin-left: 6px;
    }
}

@media (max-width: 600px) {
    .footer-external-link-icon {
        height: 8px;
        width: 8px;
        margin-top: 1px;
        margin-left: 4px;
    }
}

.footer-bottom-section {
    position: absolute;
    left: 0px;
    bottom: 0;
    width: 100%;
    height: 62px;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .footer-bottom-section {
        height: 38px;
    }
}

@media (max-width: 600px) {
    .footer-bottom-section {
        height: 42px;
    }
}

@media (min-width: 1400px) {
    .footer-bottom-section {
        height: 64px;
    }
}

.footer-bottom-section > p {
    color:white;
    font-size:20px;
    line-height: 1.2;
    margin: 0;
    padding: 0;
}

@media (max-width: 992px) {
    .footer-bottom-section > p {
        font-size: 16px
    }
}

@media (max-width: 600px) {
    .footer-bottom-section > p {
        font-size: 12px
    }
}

@media (min-width: 1400px) {
    .footer-bottom-section > p {
        font-size: 22px;
    }
}