@media only screen and (max-width:1240px) {
    .flex-item-left {
        width: 38%;
    }
    .flex-item-right {
        width: 52%;
    }
    .herocontainerleft {
        height: 25em;
    }
    .herocontainerright {
        height: 25em;
    }
    .flex-container1 > div1 {
        width: 250px;
        background-color: blue;
    }
}

.logowhitesmall {
    display:none;
}
.logowhitetiny {
    display: none;
}

@media screen and (max-width:940px) {
    .herocontainerleft {
        flex: 90%;
        height: fit-content;
        font-size: 0.8em;
        justify-content: center;
        padding: none;
    }
    .herocontainerright {
        flex: 90%;
        height: fit-content;
        justify-content: center;
        margin:none;
        padding:0 6em 2em 6em;
        }
    }



@media only screen and (max-width:768px) {
    .logo2 {
        display: none;
    }
    .logowhitesmall {
        display: flex;
        justify-content: center;
    }
    .flex-container{
        flex-direction:column;
        align-items: center;
    }
    .flex-container > div {
        box-shadow: black 0.625em 0.625em 0.625em;
        padding: 5px;
        margin: 1.2em 0 1.2em 0;
    }
    .flex-item-left {
        flex: 50%;
        width: fit-content;
        height:fit-content;
        border-radius: 1em;
    }
    .flex-item-right {
        flex: 50%;
        font-size: 0.5em;
        text-align: center;
        height: fit-content;
        border-radius: 1em;
    }
    .topnav {
        margin: 1.5em 0;
    }

/*FOR GALLERY SECTION*/
@media only screen and (max-width: 700px) {
    .responsive {
        width: 49.99999%;
        margin: 0.383em 0;
    }
}
    
@media only screen and (max-width: 500px) {
    .responsive {
        width: 100%;
    }
}
    
/*FOR SECOND GALLERY SECTION*/
@media screen and (max-width: 800px) {
    .column {
        flex: 50%;
        max-width: 50%;
    }
}

@media screen and (max-width: 600px) {
    .column {
        flex: 100%;
        max-width: 100%;
    }
        .col-25, .col-75, input[type=submit] {
          width: 100%;
          margin-top: 0;
        }
}


@media only screen and (max-width:480px) {
    h1 {
        font-size: 1.5em;
    }
    .logo2 {
        display: none;
    }
    .logowhitesmall {
        display: none;
    }
    .logowhitetiny {
        display: flex;
        justify-content: center;
    }
    .flex-container{
        flex-direction:column;
        align-items: center;
    }
    .flex-container > div {
        box-shadow: black 0.625em 0.625em 0.625em;
        margin: 1em 0 1em 0;
        padding: none;
    }
    .flex-item-right {
        width: fit-content;
        font-size: 0.7em;
    }
    .hero-flex-container > div {
        width: 100%;
        box-shadow: none;
        margin: none;
    }
    .heroimage {
        width: 90%;
        border: #af816a solid 0.25em;
        margin-left: none;
        margin-right: none;
        margin-top: none;
        padding: none;
    }
    .herocontainerleft {
        flex: 90%;
        font-size: 0.8em;
        justify-content: center;
        padding: none;
    }
    .herocontainerright {
        flex: 90%;
        justify-content: center;
        margin:none;
        padding:0 3em 1em 3em;
    }
    .container {
        flex: 90%;
    }
    .topnav {
        margin: 1em 0;
    }
    .topnav a {
        font-weight: 400;
        padding: 10px 12px;
        font-size: 16px;
      }
      .dropdown .dropbtn {
        font-size: 16px;
        font-weight: 400;
        padding: 10px 12px;
      }
}

/*FOOTER SECTION*/

window.onscroll = function() {myFunction()};
var footer = document.getElementById("footer");
var sticky = footer.offsetBottom;
function myFunction() {
    if (window.pageYOffset > sticky) {
        footer.calssList.add("sticky");
    } else {
        footer.classList.remove("sticky");
    }
}

/*END OF FOOTER SECTION*/