html {
    scroll-behavior: smooth;
}

body {
    margin: 0 auto;
    font-family: arial;
    letter-spacing: 1.2px;

}

a,
a:link,
a:visited {
    text-decoration: none;
    color: #fff;
}

/*######### lille default #################*/
BODY {
    background-color: #333;
    color: white;
}

.main_image_mobile {
    display: block;
}

.main_image_default {
    display: none;
}

.mailbutton {
    text-shadow: black 1px 1px;
}

table {
    width: 100%;
    padding: 2% 4%
}

#wrap1 .tekster table td {
    font-size: 0.45rem;
    width: 30vw;
    text-align: left;
}

a,
a:link,
a:visited {
    text-decoration: none;
    color: #aaa;
}

p {
    font-family: arial;
    font-size: 1rem;
    letter-spacing: 2px;
}

small {
    font-size: 1rem;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 1.7rem;
    font-family: arial;
    letter-spacing: 0.1rem;
    opacity: 0.8
}

select,
input[type=text],
input[type=tel],
input[type=date],
input[type=submit] {
    width: 100%;
    font-size: 1rem;
    padding: 8px 8px 8px 8px;
    margin: 0%;
    border-radius: 0px;
    color: #000;
    margin: 0 0 2% 0;
    box-shadow: 0px 0px 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px 0px 0px transparent;
}

input[type=submit] {
    width: 100%;
    height: 50px;
    background-color: #888;
    color: #000;
    font-size: 1.2rem;
    letter-spacing: 5px;
    margin: 0;
    box-shadow: 0px 0px 0px transparent;
    border: 0px solid transparent;
    text-shadow: 0px 0px 0px transparent;
    cursor: pointer;
}

textarea {
    font-size: 1rem;
    width: 100%;
    height: 50px;
    border-radius: 0px;
    padding: 8px;
    color: #000;
}

.def {
    opacity: 0;
    position: absolute;
    top: 3px;
    left: -600px;
    height: 0;
    width: 0;
    z-index: -1;
}

#wrap {
    background-color: #333;
    color: #ddd;
}

#wrap1 {
    color: white;
    width: 92%;
    background-color: #333;
    padding-left: 4%;
    text-align: left;
    margin: auto;
}

#menu {
    padding: 5px 5px;
    margin: 0;
}

.menu_item {
    border: 2px solid #000;
    border-radius: 8px;
    background-color: #888
}

#menu h1 {
    font-size: 120%;
    margin: 1% 4%;
}

#wrap1 .kommuner {
    margin: auto;
    width: 80%;
    float: right;
    color: white;
    margin: 0 0% 0 0;
    padding: 0 12%;
    text-align: center;
}

#wrap1 .tekster {
    background-color: #333
}

#mobile_icon {
    display: block;
    position: fixed;
    width: 30%;
    z-index: 1000;
    right: -15%;
    top: 1%;
}

#menu .menu_item #mailform img {
    width: 22vw;
}

body {
    margin: auto;
}

/* ######### Scroll to top LOGO ########## */
#mobile_icon_0 {
    display: none;
    position: fixed;
    width: 30%;
    right: -15%;
    z-index: 1000;
    bottom: 0%;
}

/*########## MELLEM ###############*/
@media (min-width:778px) {
    body {
        margin: 0 20%;
        background-color: #444;
    }

    #mobile_icon {
        display: none;
        position: fixed;
        width: 20%;
        z-index: 1000;
        right: -10%;
        top: 1%;
    }

    .main_image_mobile {
        display: block;
    }
}

/*########## STOR ###############*/
@media (min-width:992px) {
    BODY {
        background-color: #fff;
        color: #000;
        margin: 0 auto;
    }

    .main_image_mobile {
        display: none;
    }

    .main_image_default {
        display: block;
    }

    #wrap1 .tekster table td {
        font-size: 80%;
        width: 50%
    }

    a,
    a:link,
    a:visited {
        text-decoration: none;
        color: #444;
    }

    p {
        font-family: arial;
        font-size: 0.8vw;
        letter-spacing: 2px;
    }

    small {
        font-size: 0.8rem;
    }

    #wrap {
        max-width: 3000px;
        background-color: #999;
    }

    #wrap1 {
        background-color: #999;
        color: black;
        padding-top: 0%;
        margin: 0;
        text-align: left;
    }

    
    #menu {
        width: 30%;
        color: white;
        right: 0;
        margin: 0 auto;
        padding: 0 2% 0 0;
        position: absolute;
        top: 3%;
        background-color: transparent;
    }

    #wrap #menu .menu_item {
        border: 1px solid #fff;
        border-radius: 10px;
        background-color: #777;
        margin: 4% 4% 0 0;
        box-shadow: 3px 3px 2px 1px rgba(88, 88, 200, .2);
    }

    .menu_item {
        opacity: 0.93;
    }

    #menu .menu_item #mailform img {
        width: 8vw;
    }

    #menu h1 {
        font-size: 2vw;
    }

    .tekster p {
        font-size: 1.3vw;
    }

    .kommuner p {
        font-size: 1.3vw;
    }

    #bil_full_screen {
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center top;
        height: 99.5vh;
        width: 100%;
        margin: auto 0;
        outline: 0.5vh dotted red;
    }

    #wrap1 .tekster {
        width: 70%;
        color: black;
        float: left;
        padding: 0 0% 0 2%;
        background-color: white;
    }

    #wrap1 .kommuner {
        margin: auto;
        width: 22%;
        float: right;
        color: black;
        padding: 0;
        text-align: center;
    }

    #mobile_icon {
        display: none;
        position: fixed;
        width: 30%;
        z-index: 1000;
    }

    select,
    textarea,
    input[type=text],
    input[type=tel],
    input[type=date],
    input[type=submit] {
        width: 20vw;
        border-radius: 0px;
        margin: 0 auto;
        margin-top: 4px;
    }

    input[type=submit] {
        background-color: #777;
    }

    /* ######### Scroll to top LOGO ########## */
    #mobile_icon_0 {
        display: none;
        position: fixed;
        width: 30%;
        right: -15%;
        z-index: 1000;
        bottom: 0%;
    }
}

.footer {
    text-align: center;
    margin: 1% auto;
    width: 100%;
    float: left;
    margin-bottom: 25%;
}

/* ########## Toggle down mail form ###########*/
#mailform,
#priser,
#om_mig,
#betalingsservice{
    width: 100%;
    overflow: hidden;
    max-height: 0px;
    transition: max-height 1.2s cubic-bezier(0, 1, 0, 1) -.1s;
}

/*a[href='#hover-mailform']:hover + #mailform,*/
#mailform:target,
#priser:target,
#om_mig:target,
#betalingsservice:target
{
    max-height: 9999px;
    transition-timing-function: cubic-bezier(0.5, 0, 1, 0);
    transition-delay: 0s;
}