/*Navigation with flexbox mobile first*/
html {
    height: 100%;
    box-sizing: border-box;
}

body {
    background-image: url(../images/background.png);
    background-size: cover;
    background-repeat: repeat;
}

* {
    padding: 0;
    border: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* header */

header {
    background-image: url(../images/header.png);
    background-size: cover;
    width: 100%;
    height: 210px;
}

#logo-burger {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: .6em;
}

#logo img {
    width: 45%;
    align-content: center;
    margin: 0 auto;
    display: block;
    margin-left: 10px
}

#logo,
#main-nav a {
    color: white;
    text-decoration: none;
}

#main-nav {
    margin-right: .5em;
    list-style: none;
}

#main-nav a {
    display: block;
    margin-left: 1em;
    font-size: 1.4em;
    line-height: 1.4em;
}

#main-nav a:hover {
    color: white;
}

#main-nav1 a {
    color: white;
    text-decoration: none;
}

#main-nav1 {
    margin-right: .5em;
    list-style: none;
}

#main-nav1 a {
    display: block;
    font-size: 1.4em;
    line-height: 1.4em;
}

#main-nav1 a:hover {
    color: white;
}

.active {
    color: white;
}

.hidden {
    display: none;
}

.topnav {
    overflow: hidden;
    background-color: #0a5c18;
    width: 45px;
}

.topnav input[type=text] {
    background-color: #152a69;
}

/* Dropdown content*/
ul li a:hover,
.dropdown:hover {
    background-color: #152a69;
}

ul li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #0a5c18;
    min-width: 160px;
    z-index: 1;
}

.dropdown-content a {
    font-size: 16px;
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

/*main forside*/

slideshow {
    display: block;
}

.mySlides {

    margin: auto;
    border: 5px solid white;
    width: 60%
}

.content section {
    max-width: 100%;
}

/* main*/
h1 {
    text-align: center;
    color: white;
    margin-bottom: 5%;
}

/* sidebar */
.sidebar-wrapper {
    width: 200px;
}

.sidebar {
    display: flex;
    flex-direction: column;
    height: 100%;
    height: 799px;
    background-image: url(../images/header%20computer.png);
    z-index: -1;
    margin-top: -296px;
}


/*Sidebar Navigation*/
.sidebar__nav {
    flex-grow: 1;
    list-style: none;
    padding-top: 70%;
    display: block;
}

.sidebar__nav li {
    cursor: pointer;
}

.sidebar__nav li.active,
.sidebar__nav li:hover {

    color: white;
}

.sidebar__nav li i {
    width: 25px;
    display: inline-block;
    text-align: center;
}

.sidebar li {
    color: white;
}


/* OM containersec */
.dividersec {
    height: 40px;
    width: 75%;
    margin-left: 20%;
    background-color: #021b1f;
    text-align: center;
    box-shadow: 0 0 5px 2px #181818;
}

.dividersec h2 {
    color: #fcfcfc;
    font-size: 80%;
    padding: 8px 0;
}

#omsec {
    background-color: #0c2428;
    color: #fcfcfc;
    height: 250px;
    width: 75%;
    margin-left: 20%;
}

#omsec iframe {
    width: 60%;
}

#omsec1 {
    background-color: #0c2428;
    color: #fcfcfc;
    height: 250px;
    width: 75%;
    margin-left: 20%;
}

#omsec1 iframe {
    width: 60%;
}

#textimage-containersec {
    width: 50%;
    float: left;
    margin-left: 10px;
}

#textimage-containersec1 {
    width: 50%;
    float: left;
    margin-left: 10px;
}

#om-image-containersec {
    height: 50%;
    float: left;
}

#om-textboxleft {
    float: left;
    width: 80%;
}

#om-textboxleft h2 {
    color: #fcfcfc;
}

#om-textboxleft p {}

#skewedpicoverlay {
    height: 250px;
    width: 100px;
    position: absolute;
    left: 60%;
    transform: skewX(-15deg);
    background-color: #021b1f;
}

#skewedpicoverlay1 {
    height: 250px;
    width: 100px;
    position: absolute;
    left: 60%;
    transform: skewX(-15deg);
    background-color: #021b1f;
}

#piccontainer {
    height: 100%;
    width: 40%;
    float: right;
    background-image: url(../images/wunderdeko.jpg);
    background-size: cover;

}

#piccontainer2 {
    height: 100%;
    width: 40%;
    float: right;
    background-image: url(../images/sortiment.jpg);
    background-size: cover;

}

/* OM container */
.divider {
    height: 40px;
    width: 100%;
    background-color: #021b1f;
    text-align: center;
    box-shadow: 0 0 5px 2px #181818;
}

.divider h2 {
    color: #fcfcfc;
    font-size: 20px;
    padding: 8px 0;
}

#om {
    background-color: #0c2428;
    color: #fcfcfc;
    height: 250px;
}

#om iframe {
    height: 100%;
}

#textimage-container {
    width: 58%;
    height: 100%;
    float: left;
}

#om-image-container {
    height: 100%;
    float: left;
    padding: 20px;
}

#om-textbox {
    float: left;
    width: 50%;
    padding: 20px 0;
}

#om-textbox h2 {
    color: #fcfcfc;
}

#om-textbox p {}


#mapcontainer {
    height: 100%;
    width: 40%;
    float: right;
    background-image: url(../images/wunderdeko.jpg);
    background-size: cover;

}

/*produkter*/
.produkt-container {
    display: flex;
    justify-content: center;
}

.produkt-container img {
    display: flex;
    width: 65%;
    margin: auto;
    border: 5px solid white;
    justify-content: center;
}

.produkt-container p {
    display: flex;
    width: 11%;
    color: white;
    justify-content: center;
}

.produkt-container2 {
    display: flex;
    justify-content: center;
}

.produkt-container2 img {
    display: flex;
    width: 65%;
    margin: auto;
    border: 5px solid white;
    justify-content: center;
}

.produkt-container2 p {
    display: flex;
    color: white;
    text-align: center;
    width: 12%;
    justify-content: center;
}

/*galleri*/
.galleri-container {
    display: flex;
    justify-content: center;
}

.galleri-container img {
    display: flex;
    width: 35%;
    margin: auto;
    border: 5px solid white;
    justify-content: center;
}

.galleri-container p {
    display: flex;
    width: 33%;
    color: white;
    justify-content: center;
}

#mobile-searchbox {
    float: right;
    background-color: #0a5c18;
    width: 20%;
    text-align: center;
}

/*Footer*/
footer {
    background-image: url(../images/footer.png);
    background-size: cover;
    width: 100%;
    background-position: bottom;
    height: 80px;
}

footer section {
    width: 12.5%;
    float: left;
    text-align: center;

    align-items: center;



}

footer p {
    color: white;

}


footer img {
    width: 30.5px;
    padding-top: 45px;
    justify-content: space-between;
    align-items: center;
}

#sec8 {

    visibility: hidden;
}



#sec8 p {
    color: green;
}

#foot {}


footer ul {
    margin: 0;
    padding: 0;
}

main {
    min-height: 500px;
}

#flextextbox {
    display: block;
    width: 100%;
    text-align: center;
}

#flextextbox p {
    padding: 1%;
    text-align: center;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: white;
    
}

#flextextbox img {
    display: flex;
    align-items: center;
    margin-left: 40%;
    margin-right: 40%;
    width: 20%;
    border: 5px solid white;

}

#flextextbox ul {
    text-align: center;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
    background-color: white
}

footer {
    bottom: 0;
}

/*animation*/
.rotate:hover {
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

.grow:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

/*MEDIA QUERY MOBILE */


@media all and (max-width: 1172px) {
    
    #mobilevid{
        display: block;
    width: 90%;
    margin-right: 5%;
    margin-left: 5%;
    }
    /*HEADER NAV*/
    header {
        display: block;
        height: 200px;
    }

    #logo-burger {
        justify-content: space-between;
        align-items: center;

    }

    #logo img {
        width: 45%;
        align-content: center;
        margin: 0 auto;
        display: block;
    }

    .topnav input[type=text] {
        display: none;
    }

    #mobile-search {
        justify-content: center;
        width: 100%;
    }


    #mobile-search input[type=text] {
        width: 80%;
        text-align: center;
    }

    #mobilesearch-button {
        width: 20%;
        background-color: #0a5c18
    }

    #search-button {
        display: none
    }


    #logo-burger label {
        display: block;
        font-size: 2.5em;
        cursor: pointer;
        color: #152a69;
        position: absolute;
        top: 0;


    }

    #toggle:checked + #main-nav {
        display: block;
    }

    #toggle1:checked + #main-nav {
        display: block;
    }

    #main-nav {
        display: none;
    }

    #main-nav li {
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);

    }

    #flextextbox p {
        text-align: left;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        background-color: white;
        padding: 10%;

    }

    #flextextbox ul {
        text-align: left;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        background-color: white;
        padding: 10%;
        padding-left: 20%;

    }

    #flextextbox img {
        display: flex;
        align-items: center;
        margin-left: 5%;
        margin-right: 5%;
        width: 90%;
        border: 5px solid white;
    }

    #flextextbox textarea {
        padding: 10px;
        width: 90%;
    }

    /* OM containersec */
    .dividersec {
        display: none;
    }

    .dividersec h2 {
        color: #fcfcfc;
        font-size: 80%;
    }

    #omsec1 {
        background-color: #0c2428;
        color: #fcfcfc;
        height: 350px;
        ;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        text-align: center;

    }

    #omsec1 {
        background-color: #0c2428;
        color: #fcfcfc;
        height: 350px;
        ;
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
        text-align: center;

    }


    #textimage-containersec {
        width: 90%;
    }

    #textimage-containersec1 {
        width: 90%;
    }

    #om-image-containersec {
        height: 50%;
        float: left;
    }

    #om-textboxleft {
        float: left;
        width: 100%;
    }

    #om-textboxleft h2 {
        color: #fcfcfc;
    }


    #skewedpicoverlay {
        display: none
    }

    #skewedpicoverlay1 {
        display: none
    }

    #piccontainer {
        display: none
    }

    #piccontainer2 {
        display: none;

    }

    #om {
        display: flex;
        justify-content: center;
    }

    #main-nav a {
        margin: 0;
    }

    #main-nav li:last-of-type {
        border-bottom: none;
    }

    .slideshow a {
        display: none;
    }

    .sidebar {
        display: none;

    }

    /*produkter*/
    .produkt-container {
        display: flex;
        justify-content: center;
    }

    .produkt-container img {
        display: flex;
        width: 80%;
        margin: auto;
        border: 5px solid white;
        justify-content: center;
    }

    .produkt-container p {
        display: flex;
        width: 33%;
        color: white;
        justify-content: center;
    }

    .produkt-container2 {
        display: flex;
        justify-content: center;
    }

    .produkt-container2 img {
        display: flex;
        width: 80%;
        margin: auto;
        border: 5px solid white;
        justify-content: center;
    }

    .produkt-container2 p {
        display: flex;
        color: white;
        text-align: center;
        width: 50%;
        justify-content: center;
    }

    /*galleri*/
    .galleri-container {
        display: flex;
        justify-content: center;
    }

    .galleri-container img {
        display: flex;
        width: 90%;
        margin: auto;
        border: 5px solid white;
        justify-content: center;
    }

    .galleri-container p {
        display: flex;
        width: 33%;
        color: white;
        justify-content: center;
    }



    #om {
        display: none;
    }

    main {
        min-height: 646px;
    }

}



/*MEDIA QUERY TABLET AND ABOVE*/

@media all and (min-width: 600px) {

    HEADER NAV
    header {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
    
    }

    #logo-burger {
        margin: 0;

    }

    #logo {
        margin-top: .3em;
    }

    a#logo {
        width: 20%
    }

    #main-nav {
        justify-content: space-between;
        width: 100%;
        margin: 0;
    }

    #main-nav a {
        margin: 0 .5em;
    }

    .hidden {
        display: none;
    }

    label {
        display: none;
    }

    .slideshow a {
        display: none;
    }

    .sidebar {
        display: none;
    }

}


/*MEDIA QUERY LAPTOP AND ABOVE*/

@media all and (min-width: 1173px) {
    

    /*HEADER*/
    header {
        background-image: none;
        flex-direction: column;
        align-items: center;
        background-size: cover;
        width: 100%;
        height: 120px;
        margin-bottom: 10%
    }


    .computer-subelement {
        font-size: 50%
    }

    .flex-header {
        width: 100%
    }

    #logo img {
        margin-left: 10px;
    }

    .topnav {
        overflow: hidden;
        background-color: #0a5c18;
        width: 85%;
        margin-right: 5%;
    }

    .topnav input[type=text] {
        background-color: #152a69;
        width: 85%;


    }

    #search-button {
        width: 15%;
    }

    #mobile-search {
        display: none;
    }

    #mobilesearch-button {

        display: none;
    }

    #search-button a {
        background-color: grey;
    }


    .mobil-nav {
        display: none !important;
    }

    .mySlides {

        margin: auto;
        border: 5px solid white;
        width: 20%
    }

    .content section {
        max-width: 100%;
    }

    .slideshow a {
        display: inline;
    }

    .flex-container {
        display: flex;
        justify-content: center;

    }

    .flex-container img {
        display: flex;
        width: 33.3%;
        margin: auto;
        border: 5px solid white;
        justify-content: center
    }




    .sidebar {
        display: flex;
    }


    main {
        margin-top: -700px;
        margin-bottom: 0px;
        min-height: 700px;
    }

    .galleri-container {
        padding-top: 5%;
        padding-left: 10%;
    }

    .submenu {
        font-size: 60% !important;

    }
#mobilevid{
        display: none;
    }
    
    
}


    @media all and (max-width:200px) {
        main {
            min-height: 200px;
        }
    }
}

@media all and (max-width: 400px) {
    main {
        min-height: 530px;
    }
}

@media all and (min-width: 500px) {
    main {
        min-height: 700px;
    }
}

@media all and (min-width: 1000px) {
    main {
        min-height: 750px;
    }
}