/* desktop */

/* ms surface pro (912 x 1368) skal vise desktop på begge led */

/* ipad  (768 x 1024) skal kun vise desktop i bredformat */

@media (min-width: 900px) {
    body, html {
        height: initial;
    }
    /**************************/
    /***** FIXED FONTSIZES ****/
    .f-xsmall {
        font-size: var(--HD18px);
    }
    .f-small {
        font-size: var(--HD24px);
    }
    .f-medium {
        font-size: var(--HD30px);
    }
    .f-large {
        font-size: var(--HD36px);
    }
    #offline-dataloader {
        position: fixed;
        right: 0;
        top: 0;
        border-radius: 0 0 0 5px;
        color: rgba(255, 255, 255, .4);
        padding: var(--HD6px) var(--HD9px);
        font-size: var(--HD12px);
        background: rgba(0, 0, 0, .4);
        z-index: 500;
    }
    /*** Home and Siblings nav! ***/
    #home-sibl-nav {
        display: block;
    }
    /********/
    /* LOGO */
    .logo1 {
        width: var(--HD360px);
        height: var(--HD180px);
        bottom: 0;
        right: 0;
        position: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 100% 100%;
    }
    .logo2 {
        width: var(--HD240px);
        height: var(--HD120px);
        bottom: 20%;
        left: calc(50% - var(--HD120px));
        position: fixed;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50% 50%;
    }
    /************************/
    /******* LIST MENU ******/
    #listmenu .content {
        height: 100%;
        width: 100%;
        justify-content: center;
        align-content: center;
    }
    #listmenu .btn {
        position: relative;
        width: 50%;
        height: var(--HD90px);
        display: grid;
        grid-template-columns: 4fr 1fr 1fr;
        grid-template-areas: "title image year";
    }
    #listmenu .btn.active {
        box-sizing: content-box;
        border: var(--HD6px) #fff solid;
        border-radius: var(--HD6px);
        margin-left: calc(0px - var(--HD6px));
    }
    #listmenu .btn.highlight {
        box-sizing: content-box;
        border: var(--HD6px) solid var(--element-text-color-secondary);
        border-radius: var(--HD6px);
        margin-left: calc(0px - var(--HD6px));
    }
    #listmenu .btn .title {
        grid-area: title;
        display: flex;
        justify-content: start;
        align-items: center;
        padding-left: 2em;
        font-size: var(--HD24px);
        font-weight: bold;
    }
    #listmenu .btn-theme .title {
        text-transform: uppercase;
    }
    #listmenu .btn .image {
        grid-area: image;
        overflow: hidden;
        background-size: cover;
        background-position: 50% 0%;
    }
    #listmenu .btn .image.icon {
        padding:20px;
        position: absolute;
        height: 130%;
        width: 100%;
        top: -15%;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: 50% 0%;
    }
    #listmenu .btn .year {
        grid-area: year;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: var(--HD21px);
    }
    #listmenu .btn .year.themetype {
        padding-right: 2em;
    }
    #main .cscroll-pane, #search .cscroll-pane {
        position: absolute;
        background: rgba(255, 255, 255, .2);
        width: 8px;
        right: var(--HD12px);
        bottom: var(--HD15px);
        height: calc(100vh - var(--HD30px));
        /* border: 1px #fff solid; */
    }

    #main .cscroll-pane.horizontal{
        height:8px; 
        width: calc(50vw);
        right: 25vw;
        bottom: calc(var(--HD45px) - 4px);
        
    }

    #main .cscroll-thumb, #search .cscroll-thumb {
        position: absolute;
        background: rgba(255, 255, 255, .8);
        width: 6px;
        left: 1px;
        touch-action: none;
    }

    #main .cscroll-pane.horizontal .cscroll-thumb{
        height: 6px;
        top: 1px;

    }

    /************************/
    /******* TIMELINE*********/
    #timeline h2 {
        position: fixed;
        text-align: left;
        color: var(--background-text-color);
        font-size: var(--HD36px);
        top: var(--HD21px);
        left: var(--HD24px);
        max-width: 50vw;
        text-transform: uppercase;
    }
    /* FULLSCREEN MEDIA */
    #fullscreen {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-wrap: wrap;
    }
    #fullscreen .fsmedia {
        max-width: initial;
        max-height: initial;
        transform: initial;
        top: initial;
        left: initial;
        position: relative;
        object-fit: contain;
    }
    #fullscreen video {
        z-index: 500;
        width: 70%;
        height: 70%;
        /* video skaleres af javascript - dette er kun et midlertidigt udganspunkt */
    }
    #fullscreen .text {
        max-width: initial;
        max-height: initial;
        transform: initial;
        top: initial;
        left: initial;
        position: relative;
        background: none;
        max-width: 40vw;
        padding-bottom: 0;
    }
    #fullscreen .btn-prev, #fullscreen .btn-next {
        font-size: var(--HD36px);
        height: 2em;
        width: 2em;
        border-radius: 50%;
        position: fixed;
        top: 45vh;
        border: #fff 2px solid;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 900;
    }
    #fullscreen .btn-prev {
        left: var(--HD30px);
    }
    #fullscreen .btn-next {
        right: var(--HD30px);
    }
    #fullscreen .count-dots {
        position: fixed;
        top: var(--HD30px);
        width: 100%;
        display: flex;
        justify-content: center;
        height: var(--HD15px);
        z-index: 900;
    }
    #fullscreen .count-dots .dot {
        height: var(--HD15px);
        width: var(--HD15px);
        border: #fff 2px solid;
        border-radius: 50%;
        margin: 0 20px;
        box-shadow: 0 0 0px #fff;
        transition: background .3s, box-shadow .3s;
    }
    #fullscreen .count-dots .dot.active {
        background: #fff;
        box-shadow: 0 0 10px #fff;
        transition: background .3s, box-shadow .3s;
    }
    #fullscreen .linked-sound {
       position:absolute;
       bottom:var(--HD24px);
        width: var(--HD300px);
        height: var(--HD45px);
    }
   
   
    /* MAP */
    #map .map-area {
        width: 100%;
        height: 100%;
    }
    #map .map-title {
        width: initial;
        max-width: 25vw;
        background: rgba(0, 0, 0, .6);
        font-size: var(--HD36px);
        color: var(--background-text-color);
        font-weight: bold;
        padding: var(--HD18px) var(--HD24px);
        text-transform: uppercase;
        /* border-radius: 5px ;
        margin:5px; */
    }
    #map .map-controls {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        background: rgba(0, 0, 0, .6);
    }
    #map .map-controls .btn-control {
        height: var(--HD60px);
        min-width: var(--HD60px);
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 2px;
        margin-left: 0;
        cursor: pointer;
        color: white;
        font-size: var(--HD36px);
    }
    #map .zoomlabel {
        width: initial;
        font-size: var(--HD18px);
        text-align: center;
        padding: 0 1em;
        background: none;
    }
    /* LANGUAGE SELECTOR */
    #language-selector {
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: flex-start;
        z-index: 95;
    }
    #language-selector.intheme {
        left: initial;
        right: 0;
        justify-content: flex-end;
    }
    #language-selector .flag {
        width: var(--HD45px);
        height: var(--HD30px);
        margin: 0 0 var(--HD30px) var(--HD30px);
        background: #000;
        background-size: cover
    }
    #language-selector.intheme .flag {
        margin: 0 var(--HD30px) var(--HD30px) 0;
    }
    /* CONTROLPANEL */
    #controlpanel {
        width: 60vw;
        height: 60vh;
    }
    #controlpanel a, #controlpanel .btn {
        font-size: var(--HD15px);
    }
    /****************************/
    /** TOUCHWALL TOUCH ADVIDE **/
    #tw-touchadvice {
        opacity:0;
        pointer-events: none;
        display: flex;
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
    }

    #tw-touchadvice.active {
        pointer-events:initial;
      
    }
    #tw-touchadvice .title {
        /* opacity:0; */
        color: #fff;
        font-size: var(--HD45px);
        text-transform: uppercase;
        font-weight: bold;
    }
    #tw-touchhand {
        /* opacity:0; */
        width: var(--HD240px);
        height: var(--HD240px);
        text-transform: uppercase;
        background-image: url("../images/touch-hand-white.png");
        background-size: contain;
        background-position: 78% 100%;
        background-repeat: no-repeat;
        margin-top: var(--HD120px);
        margin-left: var(--HD18px);
        z-index: 100;
    }
    #tw-touchdot {
        /* opacity:0; */
        width: var(--HD180px);
        height: var(--HD180px);
        border-radius: 50%;
        position: fixed;
        border: #fff 5px solid;
        left: calc( 50% - var(--HD90px));
        margin-top: calc(0px - var(--HD30px));
        box-shadow: 0 0 100px 20px #fff;
        z-index: 0;
    }
    #tw-touchdot:after {
        content: "";
        position: absolute;
        top: var(--HD30px);
        left: var(--HD30px);
        right: var(--HD30px);
        bottom: var(--HD30px);
        border-radius: 50%;
        /* background: #fff; */
        background: var(--element-text-color-secondary);
        opacity: 0.5;
    }
    /***********************/
    /***** ANIMATIONER *****/
    .blur-in {
        -animation: blur-in .3s;
    }
    @keyframes blur-in {
        100% {
            filter: blur(0px);
            opacity: 1;
        }
        0% {
            filter: blur(100px);
            opacity: 0;
        }
    }
    .blur-out {
        animation: blur-out .3s;
    }
    @keyframes blur-out {
        0% {
            filter: blur(0px);
            opacity: 1;
        }
        100% {
            filter: blur(100px);
            opacity: 0;
        }
    }
}

@media (min-width: 900px) and (orientation: portrait) {
    /*******************************/
    /*****  LISTMENU PORTRAIT  *****/
    #listmenu .btn {
        width: 80%;
    }
}