@media (orientation: landscape) {


    body {


        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: 100vw;
        height: 100vh;
        padding: 0;
        margin: 0;
        touch-action: manipulation;


    }


    #header {


        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 3.5vh;
        background-color: transparent;
        border-bottom: 1px solid;


    }

    #x {


        height: 1.5vh;
        width: 1.5vh;
        margin-left: 1vh;

    }

    #mode {

        visibility: hidden;
        display: flex;
        align-items: center;
        flex-direction: row-reverse;

        height: 1.7vh;
        width: 50vw;
        margin-right: 1vh;



    }

    #mode_icon {

        height: 1.7vh;
    }

    #mode_text {

        font-family: "rob_light";
        position: relative;
        margin-right: 0.5vh;
    }





    #left_right {
        overflow: hidden;
        display: flex;
        flex-direction: row;
        position: relative;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        background-color: transparent;



    }

    #left {

        z-index: 3;
        justify-content: center;
        min-width: 10%;
        overflow: hidden;
        resize: horizontal;
        display: flex;
        position: relative;
        box-sizing: border-box;
        height: 100%;
        background-color: transparent;
        width: 80%;
        min-width: 5%;
        max-width: 80%;
        transition: width 1s ease-out;

    }

    .shrink {

        width: 30% !important;
    }


    #grabber {
        visibility: hidden;
        position: relative;
        height: 2vw;
        z-index: 100;
        margin-right: 0.5vw;
        pointer-events: none;


    }



    #resize-handle {

        overflow: visible;
        display: flex;
        align-items: center;
        justify-content: right;
        width: 100%;
        height: 100%;
        background-color: transparent;
        border-left: 1px solid;
        border-right: 1px solid;
        position: absolute;
        top: 0;
        right: 0;
    }



    #infos {

        width: 70%;
        margin-right: 5%;

    }


    #title {

        font-family: 'rob_reg';
        font-size: 300%;
        letter-spacing: -0.15vw;
        margin-bottom: 2vh;

    }


    #specs {

        margin-top: 0;
        font-family: 'rob_light';
        font-size: 120%;
        letter-spacing: 0;
    }

    #text {


        font-family: 'rob_light';
        font-size: 100%;
        text-align: justify;
        letter-spacing: 0;

    }



    #right {

        z-index: 10;
        width: 70%;
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
        overflow-x: hidden;
        align-items: center;
        height: 100%;
        background-color: transparent;


    }




    #media {

        margin-top: 1%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 90%;
        max-width: 95%;


    }

    #media img {

        max-height: 100%;
    }

    #media video {
        height: 100%;




    }

    #media-caption {


        width: 100%;
        font-size: 100%;
        pointer-events: none;
        position: absolute;
        font-family: 'rob_light_ital';
        text-align: center;
        margin-top: 0%;
        margin-bottom: 0%;
        margin-left: auto;
        margin-right: auto;
        bottom: 5vh;
        margin-bottom: 5px;

    }

    .controls {

        z-index: 50;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 70%;
        height: 5vh;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 11;


    }

    .controls button {
        background-color: transparent;
        border: none;
        font-size: 3vh;
        color: var(--darkgray);
    }

    button:hover {
        cursor: pointer;
    }

    #prev {
        margin-left: 1vw;

    }

    #next {
        margin-right: 1vw;
    }

    #media-index {

        position: relative;
        font-family: "rob_light";
    }







}