@media(orientation:landscape){
    #menu-secondaire a{
        display: none;
    }

    #titre{
        width: calc(100vw - 20vh);
        text-align: center;
        margin: 0px;
        line-height: 1;
        background-color: rgba(255, 255, 255, 0.629);
        position: fixed;
        padding: 10vh;
        padding-top: 1vw;
        padding-bottom: 10vh;
        top: 0px;
        z-index: -1;
        line-height: 1;
    }

    #titre h1{
        padding-top: 1vw;
        font-size: var(--fs4);
        text-transform: uppercase;
        margin-bottom: 1vh;
        margin: 0px;
    }

    #categorie{
        width: 100%;
        text-align: center;
        /* text-transform: uppercase; */
        margin-top: 7vh;
        font-size: var(--fs1);
        line-height: 1;
        opacity: 20%;
        position: relative;
        z-index: -1;
    }

    #sous-titre{
        width: 100%;
        text-align: center;
        /* text-transform: uppercase; */
        margin: 0px;
        font-size: var(--fs2);
        line-height: 1;
        margin-bottom: 3vh;
        position: relative;
        z-index: -1;
    }

    #images-videos{
        z-index: 999999;
        position: relative;

        padding-top: 1vh;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    #images-videos .wraper-img, #images-videos .wraper-vdo{
        overflow: hidden;
        border-radius: 1000px;
        transition: .2s ease-in-out;
    }

    .wraper-img:hover{
        border-radius: 1vw;
        /* transform: rotate(10deg); */
    }

    #images, #videos{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    #images{
        padding-bottom: 5vh;
    }

    #images .wraper-img{
        width: 28vw;
        height: 28vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 1vw;
    }

    #images .wraper-img img{
        height: 100%;
    }

    #videos .wraper-vdo{
        width: 75vw;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #videos .wraper-vdo video{
        width: 100%;
    }

    #videos div:hover{
        border-radius: 2vw;
    }

    #videos div{
        transition: .2s ease-in-out;
    }

    #presentation{
        z-index: 999999;
        position: relative;

        background-color: white;
        margin-top: 4vh;
        padding-top: 1vh;
    }

    #presentation p:last-of-type{
        /* border-bottom: dotted .3vw black; */
        padding-bottom: 5vh;
    }

    #credits p:first-of-type{
        border-top: .3vw dotted black;
        padding-top: 3vw;
        margin-top: 2vw;
    }

    #credits{
        z-index: 999999;
        position: relative;

        padding-bottom: 15vh;
        padding-top: 5vh;
        background-color: white;
    }

    #presentation, #credits{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #presentation p, #credits p{
        width: 70%;
        font-size: var(--fs1);
        font-family: BDO-bold;
    }

    blockquote p{
        border-bottom: none !important;
        padding-bottom: 0px !important;
        text-align: center;
    }

    blockquote{
        width: 60%;
        display: flex;
        justify-content: center;
        margin-bottom: 2em;
        margin-top: 2em;
    }

    a{
        color: black;
        text-decoration: underline dotted;
    }

    #credits strong{
        margin-top: .5em;
    }



    

    #logo-titre{
        position: relative;
        /* filter: !important; */
        z-index: 0;
    }

    #logo-titre img{
        position: relative;
        /* filter: !important; */
        z-index: 0;
        height: 4vw;
    }

    #pro-cross{
        position: fixed;
        height: 3vw;
        width: 3vw;
        filter: invert(1);
        top: 0px;
        right: 0px;
        margin: 2vw;
        z-index: 99999999;
        transition: .1s ease-in-out;
    }

    #pro-cross:hover{
        cursor: pointer;
        opacity: 50%;
    }

    #cal{
        width: 70%;
        font-size: var(--fs1);
        left: 50%;
        transform: translateX(-50%);
        position: relative;

        /* border-top: .3vw dotted black;
        border-bottom: .3vw dotted black; */

        background-color: black;
        color: white;

        padding: 1vw;
    }

    .annee{
        margin-bottom: 2vw;
    }

    h4{
        margin: 0px;
        padding: 0px;
        width: 100%;
        text-align: start;
        border-bottom: .2vw dotted;
        font-size: var(--fs1);
        font-family: BDO-bold;
        padding: .1vw;
    }

    .evenement{
        display: flex;
        flex-direction: row;
        padding: .1vw;
        padding-top: .25vw;
        border-top: .2vw  dotted white;
    }

    .evenement:last-of-type{
        border-bottom: .2vw  dotted white;
    }

    .evenement div{
        text-align: start;
    }

    .evenement div:last-of-type{
        right: 0px;
    }

    .evenement:hover{
        background-color: white;
        color: black;
    }

    .evenement a{
        text-decoration: none;
    }

    .evenement:hover a{
        color: black;
    }

    .evenement a:hover{
        text-decoration: underline dotted;
    }

    .cal-date{
        width: 25%;
        font-family: BDO-bold;

    }

    .cal-lieu{
        width: 35%;
        font-family: BDO-bold;
    }

    .cal-adre{
        width: 40%;
        text-align: end !important;
        font-family: BDO-bold;

    }

    .inf-2-imgs{
        width: calc(100vw/2.7) !important;
        height: calc(100vw/2.7)  !important;
    }

    .sup-2-imgs{
        width: calc(100vw/2.7) !important;
        height: calc(100vw/2.7)  !important;
    }

    .t1{
        transform: translate(0%);
    }

    .t2{
        transform: translate(20%);
    }

    .t3{
        transform: translate(-20%);
    }
}


@media(orientation: portrait){
    #menu-secondaire a{
        display: none;
    }

    #titre{
        width: calc(100vw - 22vh);
        text-align: center;
        margin: 0px;
        line-height: 1;
        background-color: rgba(255, 255, 255, 0.629);
        position: fixed;
        padding: 11vh;
        padding-top: 1vw;
        padding-bottom: 3vh;
        top: 0px;
        z-index: -1;
        line-height: 1;
    }

    #titre h1{
        padding-top: 1vw;
        padding-bottom: 2vw;
        font-size: var(--fs5);
        text-transform: uppercase;
        margin-bottom: 1vh;
        margin: 0px;
        font-weight: normal;
    }

    #categorie{
        font-weight: normal;
        width: 100%;
        text-align: center;
        /* text-transform: uppercase; */
        margin-top: 5vh;
        font-size: var(--fs1);
        line-height: 1;
        opacity: 20%;
        position: relative;
        z-index: -1;
    }

    #sous-titre{
        width: 100%;
        text-align: center;
        /* text-transform: uppercase; */
        margin: 0px;
        font-size: var(--fs4);
        line-height: 1;
        margin-top: 1vh;
        position: relative;
        z-index: -1;
        font-weight: normal;
    }

    #images-videos{
        z-index: 999999;
        position: relative;

        padding-top: 1vh;
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
    }

    #images-videos .wraper-img, #images-videos .wraper-vdo{
        overflow: hidden;
        border-radius: 1000px;
        transition: .2s ease-in-out;
    }

    .wraper-img:hover{
        border-radius: 1vw;
        /* transform: rotate(10deg); */
    }

    #images, #videos{
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    #images{
        padding-bottom: .8vh;
    }

    #images .wraper-img{
        width: 28vw;
        height: 28vw;
        display: flex;
        flex-direction: row;
        justify-content: center;
        margin: 1vw;
    }

    #images .wraper-img img{
        height: 100%;
    }

    #videos .wraper-vdo{
        width: 90vw;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    #videos .wraper-vdo video{
        width: 100%;
    }

    #videos div:hover{
        border-radius: 2vw;
    }

    #videos div{
        transition: .2s ease-in-out;
    }

    #presentation{
        z-index: 999999;
        position: relative;

        background-color: white;
        margin-top: 4vh;
        padding-top: 1vh;
    }

    #presentation p:last-of-type{
        /* border-bottom: dotted .3vw black; */
        padding-bottom: 5vh;
    }

    #credits p:first-of-type{
        border-top: .3vw dotted black;
        padding-top: 3vw;
        margin-top: 2vw;
    }

    #credits{
        z-index: 999999;
        position: relative;

        padding-bottom: 15vh;
        padding-top: 5vh;
        background-color: white;
    }

    #presentation, #credits{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #presentation p, #credits p{
        width: 92%;
        font-size: var(--fs1);
        font-family: BDO-bold;
    }

    blockquote p{
        border-bottom: none !important;
        padding-bottom: 0px !important;
        text-align: center;
    }

    blockquote{
        width: 60%;
        display: flex;
        justify-content: center;
        margin-bottom: 2em;
        margin-top: 2em;
    }

    a{
        color: black;
        text-decoration: underline dotted;
    }

    #credits strong{
        margin-top: .5em;
    }



    

    #logo-titre{
        position: relative;
        /* filter: !important; */
        z-index: 0;
    }

    #logo-titre img{
        position: relative;
        /* filter: !important; */
        z-index: 0;
        height: 4vw;
    }

    #pro-cross{
        position: fixed;
        height: 6.5vw;
        width: 6.5vw;
        filter: invert(1);
        top: 0px;
        right: 0px;
        margin: 3vw;
        z-index: 99999999;
        transition: .1s ease-in-out;
    }

    #pro-cross:hover{
        cursor: pointer;
        opacity: 50%;
    }

    #cal{
        width: 92%;
        font-size: var(--fs1);
        left: 50%;
        transform: translateX(-50%);
        position: relative;

        /* border-top: .3vw dotted black;
        border-bottom: .3vw dotted black; */

        background-color: black;
        color: white;

        padding: 1vw;
    }

    .annee{
        margin-bottom: 2vw;
    }

    h4{
        margin: 0px;
        padding: 0px;
        width: 100%;
        text-align: start;
        border-bottom: .2vw dotted;
        font-size: var(--fs1);
        font-family: BDO-bold;
        padding: .1vw;
    }

    .evenement{
        display: flex;
        flex-direction: row;
        padding: 1vw;
        padding-top: 1.25vw;
        border-top: .7vw  dotted white;
    }

    .evenement:last-of-type{
        border-bottom: .7vw  dotted white;
    }

    .evenement div{
        text-align: start;
    }

    .evenement div:last-of-type{
        right: 0px;
    }

    .evenement:hover{
        background-color: white;
        color: black;
    }

    .evenement a{
        text-decoration: none;
    }

    .evenement:hover a{
        color: black;
    }

    .evenement a:hover{
        text-decoration: underline dotted;
    }

    .cal-date{
        width: 25%;
        font-family: BDO-bold;

    }

    .cal-lieu{
        width: 35%;
        font-family: BDO-bold;
    }

    .cal-adre{
        width: 40%;
        text-align: end !important;
        font-family: BDO-bold;

    }   
    strong{
        font-weight: normal;
    }

    .inf-2-imgs{
        width: calc(100vw/1.2) !important;
        height: calc(100vw/1.2)  !important;
    }

    .sup-2-imgs{
        width: calc(100vw/1.2) !important;
        height: calc(100vw/1.2)  !important;
    }

    .t1{
        transform: translate(0%);
    }

    .t2{
        transform: translate(7%);
    }

    .t3{
        transform: translate(-7%);
    }
}