.section_main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
        "section_subproducts"
        "section_articles"
        "section_products"
        "section_articles_description"
        "section_links"
        "section_searchresult";
    outline: solid 2px white;
}

.section_products {
    display: grid;
    grid-template-columns: 100%;
    grid-template-areas:
        "section_products"
        "section_links"
        "section_searchresult"
        "section_articles"
        "section_options";
}

.section_options {
    grid-area: section_options;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
        "btnCalc"
        "btnCalcPrice"
        "btnFindUs";
    padding: 30px 0px 0px 0px;
    justify-content: center;
}

.section_subproducts {
    grid-area: section_subproducts;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 250px 250px 1fr;
    grid-template-rows: 200px 200px;
    grid-template-areas:
        ". cellProduct1 cellProduct2 ."
        ". cellProduct3 cellProduct4 .";
    grid-gap: 15px;
    margin: auto;
    padding-bottom:50px;
}

.cellLinkArea {
    height: 100%;
    width: 100%;
}

.cellCommon {
    border: solid 1px darkgray;
    box-shadow: 0 0 7px #333333, 0 0 1px #333333;
    border-radius: 5px;
    height: 100%;
    width: 100%;
    position:relative;
}

.cellProduct1 {
    grid-area: cellProduct1;
}

.cellProduct2 {
    grid-area: cellProduct2;
}

.cellProduct3 {
    grid-area: cellProduct3;
}

.cellProduct4 {
    grid-area: cellProduct4;
}

.section_products {
    grid-area: section_products;
    padding-bottom: 20px;
}

.section_articles_description {
    grid-area: section_articles_description;
    padding-bottom: 20px;
}

.section_links {
    grid-area: section_links;
    display: grid;
    padding-top: 10px;
    grid-template-columns: 100%;
    grid-template-areas:
        "cellTitle"
        "cellProductGroups"
        "cellTitle_search"
        "cellSearch";
    text-align: center;
    background-image: linear-gradient(lightgray, whitesmoke);
    border-radius: 5px;
}

.section_productgroups {
    grid-area: section_links;
    display: grid;
    padding-top: 10px;
    grid-template-columns: 100%;
    grid-template-areas:
        "cellProductGroups";
    text-align: center;
}

.section_searchresult {
    grid-area: section_searchresult;
    visibility: hidden;
}

.section_articles {
    grid-area: section_articles;
    padding: 20px;
    background-image: linear-gradient(transparent, white 80%);
    border-radius: 0 0 5px 5px;
}

.hide {
    display: none;
}

/* productgroups only on main productpage */
.productgroup_container {
    width: 90%;
    max-width: 800px;
    display: flex;
    margin: auto;
}

    .productgroup_container ul {
        list-style-type: none;
        display: flex;
        align-items: unset;
        justify-content: space-evenly;
        align-content: center;
        width: 100%;
        margin: 0;
        padding: 0;
        flex-wrap: wrap;
    }

        .productgroup_container ul li {
            width: 260px;
            height: 160px;
            border-radius: 5px;
            border: solid 1px darkgray;
            box-shadow: 0 0 7px #333333, 0 0 1px #333333;
            margin-bottom: 25px;
        }

.cellTitle {
    grid-area: cellTitle;
    padding-bottom: 25px;
    padding-left: 10px;
}

.cellSearch {
    visibility: hidden;
}
 
.cellButton {
    width: 100%;
    text-align: right;
    outline: solid 1px red;
}

.cellProductGroups {
    grid-area: cellProductGroups;
    width: 100%;
    display: flex;
    margin: auto;
    margin-left: -5px;
}

    .cellProductGroups ul {
        list-style-type: none;
        display: flex;
        align-items: unset;
        justify-content: space-evenly;
        align-content: center;
        width: 100%;
        margin: 0px;
        padding: 0px;
        flex-wrap: wrap;
    }

        .cellProductGroups ul li {
            width: 200px;
            height: 150px;
            border-radius: 5px;
            border: solid 1px darkgray;
            box-shadow: 0 0 7px #333333, 0 0 1px #333333;
            margin-bottom: 25px;
            margin-left: 10px;
        }

/* search input */
.inputSearch {
    max-width: 255px;
    transition: all ease-in-out 0.3s;
}

    .inputSearch:hover {
        border-bottom: solid 5px darkgreen;
        transition: all ease-in 0.3s;
    }

    .inputSearch:focus {
        border-bottom: solid 5px lightgreen;
        transition: all ease-in 0.3s;
    }

/* productgroup selection */
.productGroup {
    width: 100%;
    height: 100%;
    background-size: auto;
    position: relative;
}

    .productGroup:hover .productGroupTitle {
        background-color: darkgreen;
        transition: all 0.3s ease-in;
    }

.productGroupTitle {
    position: absolute;
    left: -8px;
    bottom: 5px;
    background: #923027;
    border: solid 1px darkgray;
    width: 90%;
    min-width: 180px;
    height: 30px;
    text-align: left;
    padding-left: 5px;
    border-radius: 5px;
    box-shadow: 0 0 2px #ffffff, 0 0 2px #333333;
    color: white;
}

    .productGroupTitle:hover {
        background-color: darkgreen;
        transition: all 0.3s ease-in;
    }


.productGroup_granitskaerver {
    background-image: url('../../images/productimages/productgroups/granitskaerver.jpg');
}

.productGroup_grus {
    background-image: url('../../images/productimages/productgroups/grus_sand.jpg');
}

.productGroup_sten {
    background-image: url('../../images/productimages/productgroups/sten.jpg');
}

.productGroup_jordmuld {
    background-image: url('../../images/productimages/productgroups/jord_muld.jpg');
}

.productGroup_traeflisbark {
    background-image: url('../../images/productimages/productgroups/traeflis_bark.jpg');
}

.productGroup_genbrugsmaterialer {
    background-image: url('../../images/productimages/productgroups/genbrugsmaterialer.jpg');
}

.productGroup_granitskaerver_sorte {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_sorte.jpg');
}

.productGroup_granitskaerver_grae {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_grae.jpg');
}

.productGroup_granitskaerver_hvide {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_hvide.jpg');
}

.productGroup_granitskaerver_roede {
    background-image: url('../../images/productimages/productgroups/Granitskaerver_roede.jpg');
}



@media screen and (min-width: 1000px) {
    .section_links {
        text-align: left;
    }

    .cellSearch {
        grid-area: cellSearch;
        display: grid;
        grid-template-columns: 320px auto;
        grid-template-areas:
            "ctrlSearch .";
        gap: 20px;
        padding: 0px 20px 0px 10px;
    }


        .cellSearch .cellSearchControls {
            width: 100%;
            display: flex;
            padding: 5px;
            transition: all ease-in 0.5s;
        }


    .inputSearch {
        max-width: 400px;
    }

    .cellSearch .btnSearch {
        border: none;
        background-color: transparent;
        cursor: pointer;
        height: 15px;
        margin-top: -10px;
    }

    .section_options {
        grid-area: section_options;
        display: grid;
        grid-template-columns: 342px 342px 342px;
        grid-template-areas:
            "btnCalc btnCalcPrice btnFindUs";
        gap: 10px;
        padding: 0px 20px 0px 10px;
        justify-content: center;
    }

    .section_articles {

        grid-area: section_articles;
        padding-top: 20px;
        padding-left: 10px;
        background-image: linear-gradient(transparent, white 80%);
        border-radius: 0 0 5px 5px;
    }
}

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


    .section_subproducts {
        grid-area: section_subproducts;
        width: 100%;
        max-width: 800px;
        display: grid;
        grid-template-columns: 1fr 250px 1fr;
        grid-template-rows: 250px 250px 250px 250px;
        grid-template-areas:
            ". cellProduct1 ."
            ". cellProduct2 ."
            ". cellProduct3 ."
            ". cellProduct4 .";
        grid-gap: 15px;
        margin: auto;
        padding: 10px;
        border-radius: 5px;
    }
}