@media only screen and (max-width: 37.500em) {

    body {
        display: grid;
        background: rgba(187, 193, 193, 1);
        background: linear-gradient(90deg, rgba(187, 193, 193, 1) 0%, rgba(196, 189, 171, 1) 100%);
    }


    .heroImg {
        grid-row: 1;
        height: unset;
        width: 100%;
        position: relative;
    }

    nav {
        grid-row: 2;
        position: relative;
    }

        nav li {
            text-align: center;
        }

        nav ul {
            grid-column: 2;
            padding: 0 0 0 12px;
            max-width: unset;
            right: unset;
            top: unset;
        }

    .twospan {
        grid-column: span 1;
    }

    .threespan {
        grid-column: span 1;
    }
    .product {
        padding: 2em 1.15em;
    }
    .pastProductsArea {
        display: grid;
        grid-template-columns: 100%;
        color: #fff;
        background: rgb(253,204,126);
        background: linear-gradient(148deg, rgb(226 237 255) 0%, rgb(175 181 191) 93%);
        border-radius: 8px;
        padding: 1em;
        grid-gap: 0.5em;
    }
    .orderInputs {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
    }

    .shopStage {
        grid-template-columns: 100%;
    }
    .group {
        display:block;
        margin-bottom:0.5em;
        text-align:center;
    }

    .slider .sectionContent,
    .sliderAbout .sectionContent,
    .shopSlider .sectionContent {
        padding: 0.75rem;
        margin: 0;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 0.5rem;
        margin-top: 5em;
    }

    .successSlider .sectionContent {
        padding: 2rem;
        margin: 0;
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1rem;
        margin-top: 0;
    }

    .cdImage {
        width: 100% !important;
        border-radius:4px;
    }
    .shopArea {
        padding: 0.75em;
    }

    .mobile-break {
        display: inline;
    }

    .addToBasketBox {
        grid-template-columns: 55px minmax(auto, 300px);
    }
    .addToBasketBox .form-control {
        width: 45px;
    }
    .addToBasket {
        grid-template-columns: 60% 5% 35%;
        padding: 0 0.75em;
    }
    .sliderAbout .sectionContent p {
        font-size: 0.9em;
    }

    .headline {
        font-size: 3.0rem;
    }

    .hero {
        width: 100%;
        height: 45%;
        position: relative;
    }

    .heroImg {
        display: inline;
    }

    .heroAboutImg {
        width: 100%;
        grid-row: 2;
    }

    .slider {
        grid-row: 3;
        position: relative;
        background: none;
    }

    .sliderAbout {
        grid-row: 2;
        position: relative;
        background: none;
    }

    .shopSlider {
        grid-row: 2;
        /*position: relative;*/
        background: none;
    }

    .aboutContent {
        grid-row: 3;
    }

    .heroAboutArea {
        grid-row: 2;
    }

    .focusPoints {
        grid-template-columns: 1fr;
    }

    .content {
        grid-template-columns: 5% 90% 5%;
    }

    .contentTitle {
        grid-column: 2;
    }

    .contentText {
        grid-column: 2;
    }
    .myOrder {
        padding: 1.75em;
    }

    .sectionDetailImages img {
        margin-top: 0;
        margin-bottom: 1em;
    }


    .contentTextR {
        grid-column: 2;
    }


    input.fullInput {
        width: 100%;
    }

    input.hugeInput {
        width: 100%;
    }

    input.largeInput {
        width: 100%;
    }

    input.middleInput {
        width: 50%;
    }

    input.mediumInput {
        width: 50%;
    }

    input.smallerInput {
        width: 80%;
    }

    input.smallestInput {
        width: 10%;
    }

    input.microInput {
        width: 5%;
    }
    textarea {
    width:100%;
    }

    .myBasket, .myOrder, .successOrder {
        padding: 1.75em;
    }

    .finishOrder, .saveOrder, .backBtn {
        display: block; 
        width: 100%;
    }

    .overlayContent {
        position: absolute;
        background-color: #fff;
        top: 0;
        height: 100%;
        font-size: 16px;
        color: black;
        transform: none;
        -ms-transform: none;
        border-radius: 5px;
        zoom: 0.7;
        padding: 0;
        left: -20px;
    }

    .totalCostsField {
        width: 200px;
    }

    .basketItem {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
        background-color: #d6eeff;
        padding: 1em;
        border-radius: 10px;
        margin-bottom: 1em;
    }
    .shoppingCosts, .totalCosts {
        display: grid;
        grid-template-columns: 100%;
        grid-gap: 1em;
        background-color: #d6eeff;
        padding: 1em;
        border-radius: 10px;
        margin-bottom: 1em;
    }

    .stickArea {
        border-radius: 8px;
        box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 20px -10px;
        background: rgb(249, 249, 249);
        background: -moz-linear-gradient(140deg, rgba(249,249,249,1) 0%, rgba(228,251,255,1) 100%);
        background: -webkit-linear-gradient(140deg, rgba(249, 249, 249, 1) 0%, rgba(228, 251, 255, 1) 100%);
        background: linear-gradient(140deg, rgba(249, 249, 249, 1) 0%, rgba(228, 251, 255, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f9f9f9",endColorstr="#e4fbff",GradientType=1);
        padding: 1.5em;
    }
}