* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 100%;
    font-family: Arial, Helvetica, sans-serif;
}

@media screen and (max-width: 767px) {
    /*body {
        color: tomato;
    }*/
    .galleri{
        grid-template-columns: 100%;
        grid-template-rows: 300px 300px 300px;
    }
    .event {
        grid-template-columns: 100%;
        grid-template-rows: 450px 450px 450px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    /*body {
        color: orange;
    }*/
    .galleri{
        grid-template-columns: 50% 50%;
        grid-template-rows: 300px 300px 300px;
    }
    .event {
        grid-template-columns: 100%;
        grid-template-rows: 450px 450px 450px;
    }
}
@media screen and (min-width: 1024px) {
    /*body {
        color: royalblue;
    }*/
    .galleri {
        grid-template-columns: 33% 34% 33%;
        grid-template-rows: 300px 300px 300px;
    }
    .event {
        grid-template-columns: 50% 50%;
        grid-template-rows: 450px 450px 450px;
    }
}

    body {
        margin: auto;
        max-width: 80em;
        font-size: 1em;
        line-height: 1.4;
    }


    header {
        /*background-color: #6fa8dc;*/
        padding: .25em 0;
    }

        header img {
            /*position: fixed;*/
            float: left;
            padding-left: 1em;
            width: 80em;
            height: auto;
           /* z-index: -1;*/
        }

h1 {
    float: left;

    padding-left: .5em;
    font-size: 2.5em;
    /*z-index: 1;*/
    /*background-color: white;*/
    /*position: relative;*/
}

nav {
    float: left;
    width: 17%;
    text-transform: uppercase;
    /*border: 1px solid black;*/
    /*background-color: white;*/
    padding: 1em 0;
}

    nav ul {
        list-style-type: none;
        padding-left: 1.25em;

    }

    nav li {
        float: left;
        padding-right: 1.5em;
        text-decoration: none !important;
        color: black;
    }
        nav li a {
            text-decoration: none;
            color: black;
        }
            nav li a:hover {
                text-decoration: underline;
            }

    main {
        /*background-color: #b4a7d6;*/
    }

    article {
        float: left;
        padding: 1em;
        /*line-height: 1.5;*/
        width: 62%;
        /*background-color: white;*/
    }

    aside {
        float: left;
        width: 20%;
        padding: 1em;
        /*background-color: #b4a7d6;*/
    }
    /*div div {
    float: left;
    width: 100%;
    padding: .5em;
}*/

    footer {
        background-color: #b6d7a8;
        padding: .25em 1em;
        float: left;
        width: 100%;
    }

    .self-clear::after {
        content: "";
        display: block;
        clear: both;
    }

    p {
        /*background-color: #b6d7a8;*/
    }

    section ul {
        /*padding-left: 1.25em;*/
        /*margin: 1.25em;*/
        /*background-color: #e06666;*/
        list-style-position: inside;
        list-style-image: url(Billeder/pote20.png);
    }

    section li {
        padding-left: 1.5em;
        /*margin: 1.25em;*/
        /*background-color: #b4a7d6;*/
    }

    .galleri {
        display: grid;
        /*grid-template-columns: 33% 34% 33%;*/
        /*grid-template-rows: 300px 300px 300px;*/
        text-align: center;
        margin: auto;
    }
    .event {
        display: grid;
        text-align: center;
        margin: auto;
    }
.booking {
    /*background: #ff0000;*/
    float: left;
    width: 100%;
    border:5px;
    border-radius: 6px;
    border-left-color: deepskyblue;
    border-left-style: inset;
    box-shadow: rgb(209, 213, 215) 0px 2px 2px -1px;
    padding: 2px;
    margin-bottom: 10px;
}
    .booking_periode {
    padding: 10px;
    float: left;
    width: 15%;
    }
        .booking_periode-tekst {
        font-size: 12px;
        color: gray;
        }
        .booking_periode-dato{

        }
        .booking_periode-dato_dag{
            font-size: 20px;
            font-weight: bold;
        }
        .booking_periode-dato_maaned {
            font-size: 12px;
        }
        .booking_periode-tid {
            font-size: 12px;
            color: dimgrey;
        }
    .booking_billede {
        float: left;
        width: 15%;
    }
        .booking_billede img {
            width: 5em;
            height: auto;
            border-radius: 6px;
        }
    .booking_info {
        float: left;
        width: 55%;
        color: dimgrey;
    }
        .booking_info-navn{
            font-weight: bold;
        }
        .booking_info-lokation {

        }
        .booking_info-andre{

        }
        .booking_info-tilgaengelighed_aaben {
            display: inline-block;
            color: green;
            font-weight: bold;
        }
        .booking_info-tilgaengelighed_lukket {
            display: inline-block;
            color: red;
            font-weight: bold;
        }
        .booking_info-kapacitet {
            display: inline-block;
        }
        .booking_info-kapacitet_nummer {
            font-weight: bold;
        }
    .booking_handling {
        float: left;
        width: 15%;
        text-align-last:end;
    }
        .booking_handling-pris {
            color: #265CF2;
            font-weight: bold;
        }
        .booking_handling-knap{
            text-align-last:inherit;
}
    .booking-knap {
        background-color: #265CF2;
        border-radius: 6px;
        border-style:none;
        padding: 5px;
    }
        .booking-knap_indhold{
            color:white;
        }