/* --------------------------------------------
---- #Media Queries
---------------------------------------------*/

@media only screen and (max-width: 1200px) {

}

@media only screen and (min-width: 992px) and (max-width: 1200px) {

}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .banner.featuring {
        background-size: 100%, 100%;
    }
}

@media only screen and (max-width: 991px) {
    .banner .right {
        text-align: left;
    }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {

	.backcolor {
        background: transparent; /* var(--bg-color-dark);*/
    }

    /* no ornaments on small devices */  
    .intro,
    .workflow {
        background-image: none;
    }

    /* navigation */
    .metabar.flex {
        display: block;
    }

    .nav-toggle.active:before {
        font-size: 30px;
        font-family: 'Nunito';
        content: "x";
        font-weight: 300;
        color: var(--text-color-invert);
    }

    nav.nav-collapse ul {
        display: flex;
        flex-direction: column;
    }

    nav.nav-collapse ul li {
        margin-bottom: 1em;
    }

    nav.nav-collapse ul li a {
        border-radius: var(--border-radius-xl);
        border: 1px solid var(--color-1);
        color: var(--color-1);
        margin: 0 auto;
        max-width: 350px;
        padding: 5px 40px;
    }

    nav.nav-collapse ul li a:hover {
        background: var(--color-1);
        color: var(--text-color-invert);
    }

    nav.nav-collapse ul li:last-child a {
        border: 0;
        display: block;
    }

    /* banner */
    .banner {
        padding: 100px 0 70px;
    }
    .banner.featuring {
        background-size: 100%, 100%;
    }
    .right {
        text-align: left;
    }

    /* specific areas */
    .testimonials .flex-row {
        display: block;
    }

    /* feature */
    .featuring .flex-row {
        flex-direction: column;
    }
    
}


/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {

}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {

}