@media(max-width: 1190px) {
    .header .primary ul, nav.primary ul {
        margin: 30px 10px 10px 10px;
        width: calc(100% + -20px);
    }

    .typography h1 {
        margin: 0 10px 25px 10px;
    }

    .serviceLayout {
        justify-content: center;
    }
}

@media(max-width: 1100px) {
    .childProducts .product, .childProductList .product {
        height: 300px;
    }
}

@media(max-width: 1000px) {
    .videoWrapper span h1 {
        font-size: 50px;
        max-width: 430px;
    }

    .productCover h1, .genLayout h1 {
        font-size: 85px;
    }
}

@media(max-width: 940px) {
    .serviceLayout {
        width: 100%;
        justify-content: center;
        margin: 0;
    }

    .serviceLayout .serviceImage {
        margin: 0 10px 20px 10px;
    }

    .MyProduct .productContainer {
        flex-direction: column;
    }

    .MyProduct .productContainer .productImage {
        height: 280px;
        margin: 0 auto 30px auto;
    }

    .MyProduct .productContainer .productInfo {
        width: 100%;
        max-width: 430px;
        margin: 0 auto;
    }
}

@media(max-width: 850px) {
    .productCover h1, .genLayout h1 {
        font-size: 60px;
    }
}

@media(max-width: 720px) {
    .team tr td {
        display: inline-block;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
    }

    .team tr td:last-child {
        margin-top: 20px;
        padding-top: 0;
    }

    .teamImage {
        margin: 0 auto;
    }
}

@media(max-width: 700px) {
    .videoWrapper span h1 {
        font-size: 32px;
        max-width: 275px;
    }

    .introText p, .footer .middle p, .footer .middle p a {
        font-size: 18px;
    }

    .serviceLayout .serviceImage .name p {
        font-size: 32px;
    }

    .twoImages {
        display: block;
    }

    .twoImages > div {
        width: 100%;
        margin-top: 50px;
    }

    .breadImg, .farmersMarketImg {
        height: 40vw;
    }

    .twoImages div p, .twoImages div h2 {
        text-align: left;
    }

    .twoImages .address p, .twoImages .openHours p {
        text-align: center;
    }

    .twoImages form {
        margin: 20px 10px;
    }
}

@media(max-width: 640px) {
    .introText {
        width: 100%;
    }

    .header .primary ul li a {
        width: 100%;
        display: inline-block;
    }

    .header .primary li i {
        font-size: 26px;
        display: block;
        position: absolute;
        top: 0;
        right: 10px;
        width: 30px;
        z-index: 4;
        height: 30px;
        color: white;
        text-align: center;
        padding: 10px 0;
        transition: 2s all;
        line-height: 30px;
    }

    .header .primary li.hassub .nestedLinks {
        left: 0 !important;
        top: 0;
        width: 100%;
        background: white;
        border-radius: 0;
    }

    .header .primary li.hassub .nestedLinks li {
        text-align: left;
    }

    .header .primary li {
        background-color: #008676;
    }

    .header .primary li a {
        color: white;
    }

    .header .primary .nestedLinks li a, .header .primary .nestedLinks li {
        background-color: white !important;
        color: #008676;
    }

    .videoWrapper {
        margin-top: 60px;
    }

    .typography p, .typography li, .team tr td p, .team tr td li {
        font-size: 14px;
        line-height: 23px;
    }
}

@media(max-width: 600px) {
    .footer .primary li, .topNav .primary li {
        margin: 0 10px;
    }

    .productCover h1, .genLayout h1 {
        font-size: 40px;
    }
}

@media(max-width: 580px) {
    .productCategories .product {
        margin: 0 0 20px 0;
    }

    .childProducts .product, .childProductList .product {
        height: 260px;
    }
}

@media(max-width: 576px) {
    .footer .primary li {
        width: 125px;
    }
}

@media(max-width: 560px) {
    .product-range ul {
        width: 100%;
    }
}

@media(max-width: 490px) {
    .serviceLayout .serviceImage {
        width: 100%;
        height: 60vw;
    }
}

@media(max-width: 480px) {
    .MyProduct .productContainer .productImage {
        width: 100%;
        margin: 0 0 30px 0;
    }

    .productInfo h1 {
        font-size: 32px;
    }

    .productInfo h2, .productInfo ul li {
        font-size: 18px;
    }
}

@media(max-width: 462px) {
    .footer .middle {
        width: 100%;
    }
}

@media(max-width: 450px) {
    .videoWrapper span h1 {
        font-size: 22px;
        max-width: 190px;
    }

    .introText p, .footer .middle p, .footer .middle p a {
        font-size: 16px;
    }

    .serviceLayout .serviceImage .name p {
        font-size: 28px;
    }
}

@media(max-width: 430px) {
    .header .inner .brand h1.logo {
        height: 70px;
        width: 180px;
    }
}

@media(max-width: 380px) {
    .productInfo h1 {
        font-size: 28px;
    }

    .class {
        width: 100%;
        min-width: unset;
        height: 60vw;
    }

    .class p {
        top: 62vw;
    }
}