@media (orientation: landscape){
    #frame{
        top: 0px;
        width: 78%;
        height: 90%;
        position: relative;
        overflow: hidden;
    }
    
    .rub{
        margin-left: 2vw;
        background-color: lightgray;
        color: black;
        width: fit-content;
        padding: .3vw;
        border-radius: 100px;
        margin-top: 0px;
        font-size: var(--font-size-project) !important;
    }
    
    .gray{
        opacity: 50%;
    }
    
    #main-img{
        position: absolute;
        width: 100%;
        height: auto;
        top: 0%;
        left: 0%;
    }
    
    #main-video{
        position: absolute;
        width: 100% !important;
        height: auto !important;
        top: 0% !important;
        left: 0% !important;
    }
    
    #column-img{
        display: flex;
        flex-direction: column;
        width: 20%;
        overflow: scroll;
        height: 90%;
    }
    
    #column-img > img{
        margin-bottom: .5vw;
        opacity: 50%;
    }
    
    #column-img > img:hover{
        opacity: 100%;
        transition: .2s;
        cursor: pointer;
    }
    
    #column-img > video{
        margin-bottom: .5vw;
        opacity: 50%;
    }
    
    #column-img > video:hover{
        opacity: 100%;
        transition: .2s;
        cursor: pointer;
    }
    
    #descriptif, #prod{
        margin-top: 0px !important;
        margin: 2vw;    
        font-size: var(--font-size-project);
        line-height: 1.15;   
        
        text-align: justify;
        hyphens: auto;
    }
    
    h1{
        font-weight: 550;
        font-size: var(--font-size-big);
        margin: 2vw;
        margin-bottom: 1vw !important;
        margin-top: 0vw !important;
        font-family: roboto !important;
    }
    
    #right{
        height: 100vh;
        display: flex;
        flex-direction: column;
    }
    
    #header-right{
        margin-top: 2vw;
        margin-left: -2vw;
        height: calc(var(--margin-top-window));
    }
    
    #imgs{
        height: calc(100vh - (2vw + var(--margin-top-window)));
        overflow: hidden !important;
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        position: relative;
    }    
}

@media (orientation: portrait){
    #left{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #frame{
        display: none;
    }
    
    /* #buttonsInfos{
        display: none !important;
    } */
    .rub{
        background-color: lightgray;
        color: black;
        width: fit-content;
        padding: 1vw;
        border-radius: 100px;
        margin-top: 0px;
        font-size: var(--font-size-little);
    }

    #right{
        /* top: 70vh !important; */
        position: relative;
        overflow: scroll !important;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* justify-content: space-between; */
    
        height: auto !important;
        /* padding-bottom: 5vh; */
    }

    #header-right{
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: var(--background);
        margin-bottom: 4% !important;
    }

    #header-right p{
        text-align: center;
    }
    
    #column-img{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    
        background-color: var(--background);
    }
    
    #column-img > img{
        margin: 2vw;
        margin-bottom: 7vw;
        width: 90%;
    }

    
    #column-img > video{
        margin: 2vw;
        margin-bottom: 7vw;
    
        width: 90%;
    }

    #descriptifBtn{
        display: block !important;
        width: fit-content !important;
        padding: 2vw;
        background-color: black;
        color: white;

    }
    
    #descriptif{
        display: flex;
        flex-direction: column;

        position: fixed !important;
        z-index: 10000 !important;
        padding-top: 0vw;

        width: 100vw;
        height: auto;
        max-height: 60vh;


        font-size: var(--font-size-big);
        line-height: 1.15; 
        text-align: start;
        position: fixed;
        /* hyphens: auto; */

    }

    #descriptif > section{
        border-top: 3px solid black;
        background-color: var(--background);
        overflow: scroll;
    }
    
    
    #prod{    
        margin-top: 0px !important;
        margin: 2vw;    
        font-size: 3vw;
        line-height: 1.15;    
        width: 75%;
        text-align: center;
        margin-bottom: 4vw;
    }
    
    h1{
        text-align: center;
        line-height: 1;
        font-weight: 550;
        font-size: var(--font-size-big);
        margin: 2vw;
        margin-bottom: 4vw !important;
        margin-top: 0vw !important;
        font-family: roboto !important;
        width: 90%;
    }
/* 
    .video{
        display: none;
    } */

    .close{
        padding: 0vw;
        height: 0vw;
    } 

    .active{
        height: 100%;
        padding: 2vw;
        padding-top: 2vw;
    } 
}