.menu-toggle {
    display: none;
}
.menu-toggle {
    z-index: 10001;
}
@media only screen and (max-width: 760px) {
    section, footer {
        padding: 0 20px;
    }

    .menu-toggle {
        display: block;
    }

    .menu-items {
        display: none;
    }

    .menu-items.open {
        display: block;
    }

    .menu-items {
        display: block;
        position: fixed;
        top: 50px;
        bottom: 50px;
        min-height: 300px;
        right: 0;
        width: 230px;
        background-color: rgba(255, 255, 255, .85);
        backdrop-filter: hue-rotate(45deg) blur(3px);
        -webkit-backdrop-filter: hue-rotate(45deg) blur(3px);
        border-top-left-radius: 1rem;
        border-bottom-left-radius: 1rem;
        z-index: 10000;
        transform: translateX(230px);
        transition: 200ms;
        display: none;
    }

    .menu-items.open {
        transform: translateX(0px);
        display: inline;
    }

    .mobile-hidden {
        display: inline-flex;
    }

    .menu-items a {
        display: flex;
        align-items: center;
        height: 80px;
        padding-left: 1rem;
    }

    .menu-items a:first-child {
        border-top-left-radius: 1rem;
    }

    .menu-items a img {
        padding-right: 1rem;
    }

    .menu-items .hi2 {
        display: none;
    }

    .menu-items.open .hi2 {
        display: inline;
    }

    .menu-items.open .hi1 {
        display: none;
    }

    .menu-items .handle {
        display: block;
    }
    html .w-mb-100 {
        width: 100%;
    }
    html .card-row .card {
        width: 90%;
    }
    html .card-row.vertical-full .card {
        width: 100%;
    }
    .card-row.vertical-full .card .card-content { 
        display: block!important;
    }
    #footerline {
        display: block;
    }
    .contact-button {
        background-color: transparent !important;
        color: var(--primary-color) !important;
        font-weight: 900;
        text-shadow: 0 0 12px #FFA;
    }
}
@media only screen and (max-width: 998px) {
    section, footer {
        padding: 0 40px;
    }

    .menu .logo-text {
        display: none;
    }

    .hero-text h1 {
        font-size: calc(22px + 0.390625vw);
    }

    body {
        font-size: calc(15px + 0.390625vw);
    }
    
    html .card-row.vertical-full .card .card-content { 
        grid-template-columns: auto; 
        grid-template-rows: auto 1fr auto; 
        grid-template-areas: "title"
                             "image"
                             "body"
        ;
    }

    section#hero{
        position: relative;
        /* overflow: hidden; */
        height: 33vh;
    }
    section#hero>div:nth-child(2) {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    section#hero>div:nth-child(2) img
    {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
    }
    section#hero>div:nth-child(1) {
        z-index: 1;
        text-shadow: #005a9c 3px;
        text-align: center;
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
        background-color: rgba(255, 255, 255, .3);
        border-radius: 1rem;
        font-size: calc(7px + 2vw);
        text-shadow: #FFF 2px 0 12px;
    }
    section#hero h1, section#hero h2 {
        color: #000;
    }

}
@media only screen and (max-width: 1350px) {
    html .card-row.vertical-full.title-100 .card .card-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas:
            "title"
            "image"
            "body";
    }
    html .card-row.vertical-full.title-100 .card .card-content .card-image {
        width: 65%;
    }
    footer {
        flex-direction: column;
    }
    footer img {
        max-width: 220px;
    }
    .footer .footer-menu {
        row-gap: 1rem;
    }

    .card-row {
        --justify-content: center;
    }
}
@media only screen and (min-width: 1350px)  {
    section#hero>div {
        flex: 1;
    }
}