@media (max-width: 900px) 
{

        /* ====================================BURGER================================= */

    .ham {
        display: block;
        position: fixed;
        /* always keep ham on top of everything */
        z-index: 1000;
        top: 20px;
        right: 20px;
        width: 36px;
        height: 36px;
        border: none;
        cursor: pointer;
        background-color: rgb(33, 60, 95);
        border-radius: 1em;
        /* show the menu image */
        background-image: url("https://ljc-dev.github.io/testing0/ham.svg");
        background-size: 100%;
    }
    
    .showClose {
        background-image: url("https://ljc-dev.github.io/testing0/ham-close.svg");
    }
    
    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        background: #000;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        color: white;
        /* hide the menu above the screen by default */
        transform: translateY(-100%);
        /* transition adds a little animation when sliding in and out the menu */
        transition: transform 0.2s ease;
    }
    
    .menuLink {
        color: white;
        border-bottom: 2px solid rgb(33, 60, 95);
        text-decoration: none;
        font-family: 'Open Sans', sans-serif;
        font-size: 1em;
    }
    
    .menuLink:hover, .menuLink:focus {
        border-bottom: 2px solid white;
    }
    .showNav {
        /* show the menu */
        transform: translateY(0);
    }
    
    html
    {
        width: 95vw;
    }

    .container
    {
        width: 95vw;
    }

    /* ====================================LEFT================================= */
    .container--left
    {
        height: 100vh;
        box-shadow:11px 0px 13px 0px rgb(33, 60, 95) ;
    }
    .container--left-nav-img > img
    {
        filter: grayscale(100%);
        width: 8em;
        margin: 0 auto;
    }
    .container--left-nav-img
    {
        margin-bottom: 1em;
    }
    /* ====================================RIGTH================================= */
    .container--rigth
    {
        width: 100vw;
        margin-left: 0;
    }
    .container--rigth-main > div
    {
        max-height: fit-content;
        margin-top: 2em;
        padding: 1em 1em;
    }

    .container--rigth-main_experience_flex
    {
        flex-flow: column nowrap;
        margin-top: 0;
    }
    .container--rigth-main_experience_flex_active
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.5em;
        grid-auto-rows: minmax(4em, auto);
        
    }
    
    .container--rigth-main_experience_flex_active > li
    {
        width: 10em;
        height: 9em;
    }
    #pompier 
    {
        grid-column: 1 / 2;
        grid-row: 1;
        
    }
    #mcdo 
    {
        grid-column: 2 / 2;
        grid-row: 1;
    }
    #marine 
    {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    #indigo 
    {
        grid-column: 2 / 2;
        grid-row: 2;
    }

    .container--rigth-main_experience_flex  > li 
    {
        width: 20em;
        height: 15em;
        margin:0.2em auto;
        border-radius: 1em;
       background-color: #fff;
       background-position: center;
     }
    .main_experience_div
    {
    font-family: 'Press Start 2P';
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
    width: 100%;
    height: 100%;
    border-radius: 0.9em;
    background-color: rgba(26, 88, 156, 0.9);
    }
    
    .display_experience
    {
        width: 90%;
        margin: auto;
        padding-bottom: 1em;
    }

    .display_experience> div
    {
        margin-left: 0;
    }
    
    #competence
    {
        bottom: 3em;
    }
    
    .container--rigth-main_presentation
    {
    font-size: 1em;
    }
}


@media (max-width: 400px) 
{
    .container--rigth-main_experience_flex_active > li
    {
        width: 7em;
        height: 6em;
        border-radius: 0.7em;
    }

    .container--rigth-main_experience_flex_active > li > .main_experience_div
    {
        font-size: 0.7em;
    }
    .display_experience
    {
        text-align: center;
    }
}
@media (max-width: 751px) 
{
    .container--rigth-main_experience_flex  > li 
    {
        width: 18em;
    }
}

@media (min-width: 901px) and (max-width: 930px) 
{
    /* ====================================LEFT================================= */
    .container--left
    {
        width: 15em ;
    }

    /* ====================================RIGTH================================= */
    .container--rigth
    {
        /* width: 100vw; */
        margin-left:15em;
    }


    
    .cv-div
    {
        margin-bottom:3em ;
    }

    .container--rigth-main_experience_flex
    {
        flex-flow: column nowrap;
        margin-top: 0;
    }
    .container--rigth-main_experience_flex_active
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.5em;
        grid-auto-rows: minmax(4em, auto);
        
    }
    
    #pompier 
    {
        grid-column: 1 / 2;
        grid-row: 1;
        
    }
    #mcdo 
    {
        grid-column: 2 / 2;
        grid-row: 1;
    }
    #marine 
    {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    #indigo 
    {
        grid-column: 2 / 2;
        grid-row: 2;
        margin-bottom: 4em;
    }


    .display_experience
    {
        width: 100%;
    }
    .display_experience > div
    {
        width: 80%;
        margin: 1.5em auto;
        padding-bottom: 1.5em;
    }


}

@media (min-width: 930px) and (max-width: 1550px) 
{

    .container--left
    {
        width: 15em ;
    }

    .container--rigth
    {
        /* width: 100vw; */
        margin-left:15em;
    }

    .container--rigth-main_presentation,
    .container--rigth-main_experience_flex
    {
        margin-bottom: 4em;
    }

    .container--rigth-main_experience_flex
    {
        
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.5em;
        grid-auto-rows: min-content;
        
    }
    
    .container--rigth-main_experience_flex > li
    {
        width: 20em;
        height: 15em;
    }

    .container--rigth-main_experience_flex_active
    {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 0.5em;
        grid-auto-rows: minmax(4em, auto);
        
    }
    
    .container--rigth-main_experience_flex_active > li
    {
        width: 12em;
        height: 11em;
    }

    #pompier 
    {
        grid-column: 1 / 2;
        grid-row: 1;       
    }
    #mcdo 
    {
        grid-column: 2 / 2;
        grid-row: 1;
    }
    #marine 
    {
        grid-column: 1 / 2;
        grid-row: 2;
    }
    #indigo 
    {
        grid-column: 2 / 2;
        grid-row: 2;
    }

    #pompier,
    #marine
    {
        margin-right: 0em;
    }

    #indigo,
    #mcdo
    {
        margin-left: 0em;   
    }
    .display_experience > div
    {
        width: 80%;
        margin: 1.5em auto;
        padding-bottom: 1.5em;
    }
}