#MainMenu{
    display: block;
    position: sticky;
    top: 0;
    background-color: white;
}

#filter{
    margin: var(--longmarge);
    margin-bottom: 0;
    display: block;
    position: relative;
}

.filter{
    display: inline-block;
    vertical-align: top;
    padding-top: var(--marge);
}

#topic{
    display: inline-block;
    vertical-align: top;
    padding: var(--marge) 0;
    font-weight: bold;
}

#arrow{
    display: block;
    position: absolute;
    padding: 0 var(--marge);
    transform-origin: center;
    top: calc(var(--marge) + 2px);
    right: 0;
    height: var(--longmarge);
}



#arrow img{
    height: 100%;
    width: auto;
    display: block;
}


#projetImageContent{
    display: block;
    position: absolute;
    padding: var(--longmarge);
    top: 100%;
    right: 0;
    width: 25%;
    background-color: transparent;
    height: 100vh;
}

#projetImageContent img{
    display: block;
    position: relative;
    width: 100%;
    height: auto;
}

#selectOpt{
    display: inline-block;
    position: absolute;
    font-weight: normal;
    margin-left: var(--longmarge);
    background: var(--color);
    overflow: hidden;
    min-width: 200px;
    max-height: calc(var(--longmarge) + 28px);
}

@media (orientation: landscape){

    #selectOpt:hover #arrow{
    transform: rotate(180deg);
}
    #selectOpt:hover{
    padding-bottom: var(--longmarge);
    max-height: unset !important;
}

}

hr{
    display: block;
    height: 1px;
    margin: 0 var(--marge);
    background-color: black;
    border: none;
}

#currentTopic{
    font-weight: bold;
    display: block;
    padding: var(--marge) 0;
    margin: 0 var(--marge);
    border-bottom: 1px solid black;
}

.optionTopic{
    cursor: pointer;
    display: block;
    border-bottom: 1px solid black;
    padding: var(--marge) 0;
    margin: 0 var(--marge);
}

.optionTopic:first-of-type{
    font-weight: bold;
}



.optionTopic:hover{
    font-weight: bold;
}

main{
    margin: 0 var(--longmarge);
}

.sortP{
    cursor: pointer;
    font-weight: bold;
}



.line{
    width: 100%;
    padding: var(--marge) 0;
    border-bottom: 1px solid black;
    display: block;
}

.lineSelect{
    border-top: 1px solid black;
    margin: 0 var(--longmarge);
    width: calc(100% - (2 * var(--longmarge)));
}

.project{
    font-family: Signifier;
}

.project:hover{
    background: var(--color);
}


.sortP:hover::after{
    content: "";
    background : url(../img/fleche/up.svg);
    background-size:  var(--longmarge)  var(--longmarge);
    background-repeat: no-repeat;
    height: var(--longmarge);
    width:var(--longmarge);
    display: inline-block;
    margin-left: var(--marge);
}

.sUp:hover::after{
    content: "";
    background : url(../img/fleche/down.svg);
    background-size:  var(--longmarge)  var(--longmarge);
    background-repeat: no-repeat;
    height: var(--longmarge);
    width:var(--longmarge);
    display: inline-block;
    margin-left: var(--marge);
}

.sUp::after{
        content: "";
        background : url(../img/fleche/up.svg);
        background-size:  var(--longmarge)  var(--longmarge);
        background-repeat: no-repeat;
        height: var(--longmarge);
        width:var(--longmarge);
        display: inline-block;
        margin-left: var(--marge);

}

.sDown::after{
     content: "";
    background : url(../img/fleche/down.svg);
    background-size:  var(--longmarge)  var(--longmarge);
    background-repeat: no-repeat;
    height: var(--longmarge);
    width:var(--longmarge);
    display: inline-block;
    margin-left: var(--marge);
}






.line span{
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.title{
    width: 20%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.artist{
    width: 15%;
}

.client{
    width: 15%;
}
.type{
    width: 15%;
}
.year{
    width: 10%;
}


@media (orientation:portrait){


    #projetImageContent{
        display: none;
    }
    
    #topic{
        width: 20%;
    }

    #selectOpt{
        right: 0;
        width: 70%;
         max-height: calc(var(--longmarge) + (var(--rfs) *1.3));

    }


    .sOp #arrow{
        transform: rotate(180deg);
    }
  

    .sOp{
        padding-bottom: var(--longmarge);
        max-height: unset !important;
    }

    .title{
    width: 100%;
   
    }

    #arrow{
        height: var(--rfs);
    }


    .artist{
        display: none !important;
    }
    .client{
        display: none !important;
    }
    .type{
        display: none !important;
    }
    .year{
        display: none !important;
    }


       .sortP:hover::after{
        background-size:  var(--marge)  var(--marge);
        height: var(--marge);
        top: 2px;
        width:var(--marge);
        margin-left: var(--marge);
    }

    .sUp:hover::after{
        background-size:  var(--marge)  var(--marge);
        top: 2px;
        height: var(--marge);
        width:var(--marge);
        margin-left: var(--marge);
    }

    .sUp::after{
        background-size:  var(--marge)  var(--marge);
        height: var(--marge);
        width:var(--marge);
        margin-left: var(--marge);

    }

    .sDown::after{
        background-size:  var(--marge)  var(--marge);
        top: 2px;
        height: var(--marge);
        width:var(--marge);
        margin-left: var(--marge);
    }




}