/* Mobile, portrait */
@media (max-aspect-ratio: 8/10) {
    #bgwrapper_worldmap {
        margin-top: 15vh !important;
        height: 70vh !important;
    }
   
    #title {
        /* padding: none !important; */
        width: 95vw !important;
        /* border: 1px solid red; */
    }

    #title h3 {
        margin-top: 0 !important;
    }

    .overlaynew {
        width: 80vw;
        margin: auto;
        height: 100vh;
        /* border: 2px solid blue !important; */
    }

    .overlayhome {
        width: 80vw !important;
        margin: auto;
        height: 90vh;
        /* border: 2px solid brown !important; */
    }

    #infobuttons {
        width: 100vw !important;
        margin: 0 !important;
        bottom: 20px !important;
        /* border: 2px solid red; */
    }

    .infobutton {
        letter-spacing: 0 !important;
        margin-top: 0;
        margin-bottom: 0;
        margin: auto;
        text-align: center;
    }

    .slideimage {
        /* border: 2px solid red; */
        bottom: 33% !important;
        width: 70% !important;
        z-index: 40 !important;
    }

    .tekstwrapper {      
        width: 95% !important;
    }

    .titlewrapper {
        /* border: 1px solid orange; */
        margin-top: 0em !important;
        height: 4.5em !important;
    }

    .overlayflexer { 
        flex-direction: column !important;
    }
    .overlayflexer > div {
        width: 100% !important;
    }

    .extraspace {
        height: 6.5em !important;
    }
}


/* Ipad, portrait */
@media (min-aspect-ratio: 8/10) {

    #title {
        width: 50vw !important;
        /* border: 1px solid orange !important; */
    }
    #title h3 {
        margin-top: 0.5em !important;
        /* border: 2px solid red; */
    }

    #title:hover{
        width: 80vw !important;
    }

    .overlaynew {
        width: 70vw;
        margin: auto;
        height: 100vh;
        /* border: 2px solid orange !important; */
    }

    .overlayhome {
        width: 60vw;
        margin: auto;
        height: 80vh;
        /* border: 2px solid green !important; */
    }

    #infobuttons {
        bottom: 30px !important;
        /* border: 2px solid green; */
    }

    .titlewrapper {
        /* border: 1px solid green; */
        margin-top: 0.5em !important;
        height: 6.0em !important;
    }

    .overlayflexer { 
        flex-direction: column !important;
    }
    .overlayflexer > div {
        width: 100% !important;
    }
}

/* Normal computer screens */
@media (min-aspect-ratio: 13/10) and (max-aspect-ratio: 10/5) and (orientation: landscape) {
    #bgwrapper {
        margin-top: 0vh !important;
        height: 100vh !important;
        width: 100vw !important;
        /* border: 2px solid yellow !important; */
    }

    #title {
        /* padding: none !important; */
        width: 30vw !important;
        /* border: 1px solid rgb(255, 0, 242) !important; */
        /* border: none !important; */
    }

    #title:hover{
        /* visibility: visible; */

        width: 90vw !important;
    }

    .overlaynew {
        width: 60vw;
        margin: auto;
        height: 100vh;
        /* border: 2px solid green !important; */
    }
    .overlayhome {
        width: 60vw;
        margin: auto;
        height: 80vh;
        /* border: 2px solid rgb(112, 112, 107) !important; */
    }

    #infobuttons {
        bottom: 50px !important;
        /* border: 2px solid blue; */
    }

    .titlewrapper {
        /* border: 1px solid green; */
        margin-top: 1.0em !important;
        height: 2.9em !important;
    }

    .overlayflexer { 
        flex-direction: row !important;
    }
}

/* Widescreen computer screens */
@media (min-aspect-ratio: 10/5) and (orientation: landscape) {
    #bgwrapper {
        width: 80vw !important;
    }

    #title {
        /* padding: none !important; */
        width: 19vw !important;
        /* border: 1px solid blue !important; */
    }

    .overlaynew {
        width: 50vw;
        margin: auto;
        margin-right: 30vw !important;
        height: 100vh;
        /* border: 2px solid brown !important; */
    }

    .overlayhome {
        width: 60vw;
        margin: auto;
        height: 80vh;
        /* border: 2px solid brown !important; */
    }

    #infobuttons {
        bottom: 50px !important;
        /* border: 2px solid blue; */
    }

    .titlewrapper {
        /* border: 1px solid green; */
        margin-top: 1.0em !important;
        height: 2.9em !important;
    }

    .overlayflexer { 
        flex-direction: row !important;
    }
    /* .overlayflexer > div {
        width: 49% !important;
    } */
}


@media only screen and (max-height: 400px) {

    #bgwrapper_worldmap {
        margin-top: 10vh !important;
        height: 90vh !important;
        /* border: 3px solid purple; */
    }
    #infobuttons {
        bottom: 0px !important;
    }

    .titlewrapper {
        /* border: 1px solid purple; */
        margin-top: 0em !important;
        height: 5.9em !important;
    }

}