@media screen and (min-width: 0px)  {
  .bloc 
  {
    display:block;
    clear:both;
    }
    
        @font-face
    {
        font-family: "Hind-Regular.ttf";
        src: url('../FONTS/Hind-Regular.ttf');
    }

    @font-face
    {
        font-family: "Hind-Bold.ttf";
        src: url('../FONTS/Hind-Bold.ttf');
    }

    @font-face
    {
        font-family: "Hind-Light.ttf";
        src: url('../FONTS/Hind-Light.ttf');
    }
    
        @font-face
    {
        font-family: "Hind-SemiBold.ttf";
        src: url('../FONTS/Hind-SemiBold.ttf');
    }
    
    @font-face
    {
        font-family: "futura-bold";
        src: url('../FONTS/unicode.futurab.ttf');
    }
    
    
    h1
    {
        z-index: -10;
        font-size: 0.01vw;
    }
    
    #nav
    {
        display: none;
        align-content: center;
        align-items: center;
        height:100vh;
        width: 100%;
        transition: .5s;
        opacity: 0;
        z-index: 10;
        position:absolute;
        background-color: rgba(0, 0, 0, .95);
        cursor: url('../IMG/crossCursor.png'), auto;
    }
    
    .workLinksContainer
    {
        display: flex;
        flex-direction: column;
        align-items: center;
        width:100%;
    }
    
    .workLinks
    {
        padding: 2vw;
        letter-spacing: 0.15vw;
        font-size: 2vw;
        opacity: .4;
        transition: all .2s ease-in-out;
        position:relative;
    }
    
    .workLinks:hover
    {
        padding: 2vw;
        transform: scale(1.05);
        opacity: 1;
        letter-spacing: 0.15vw;
    }
    
    video
    {
        z-index: 20;
        position: absolute;
        background: cover;
    }
    
    .projectLink
    {
        position: relative;
        font-family: "Hind-bold.ttf";
        color:white;
        font-size: 15px;
        line-height: 19px;
        display: flex;
        text-decoration: none;
        border: 2px solid white;
        text-transform: uppercase;
        background-color:none;
        overflow: hidden;
        z-index: 15;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 5px;
        padding-bottom: 2px;
        transition: 0.25s all ease;
    }
    
    .projectLink:hover
    {
        border-color: #ffb743;
    }
    
    .projectLinkBlack
    {
        color:#121212;
        border: 2px solid #121212;
        margin-top: 20px;
    }
    
    .projectLinkBlack:hover
    {
        border-color: #ffb743;
    }
    
    
    footer
    {
        width:100vw;
        height:50vh;
        position: absolute;
        bottom: 0;
        z-index: 0;
        display: flex;
        align-content: flex-end;
        align-items:flex-end;
        text-align:center;
    }
    
    
    #footerTxtPictosContainer
    {
        display: flex;
        align-content:center;
        align-items: center;
        flex-direction: column;
        z-index: 50;    
        
        position: absolute;
        
        top:5vh;
    }
    
    #socialPictosContainer
    {
        display: flex;
        align-content:center;
        align-items: center;
        flex-direction: row;
        z-index: 50;
        width:100%;
    }
    
    #txtFooterContainer
    {
        z-index: 50;
        width: 60%;
        margin-bottom: 3vw;
        display:flex;
        align-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
    }
    
    #txtFooterContainer h2
    {
        font-size: 2.663vw;
        line-height: 2.5vw;
        text-shadow: none;
        color:#191919;
        letter-spacing: normal;
        margin-bottom: 1vw;
    }
    
    #nameSocialContainer
    {
        width:auto;
    }
    
    .txtContainerVisible
    {
        opacity: 0.8;
        transition: 0.25s ease-in-out;
    }
    
    .txtContainerInvisible
    {
        opacity: 0;
        transition: 0.25s ease-in-out;
    }
    
    #nameSocialContainer h2
    {
        color:#191919;
        text-shadow: none;
        font-family: 'hind-bold';
        letter-spacing: normal;
        font-size: 2em;
        margin-bottom: 0.5em;
    }
    
    #txtFooterContainer p
    {
        font-size: 1em;
        text-align: justify;
        color:#191919;
        line-height: 1.2em;
        font-family: 'Hind-Regular.ttf';
    }
    
    #socialPictosContainer
    {
        position:fixed;
        right:20px;
        top:auto;
        bottom:20px;
        left:auto;
        z-index: 500;
        display:flex;
        flex-direction: column;
        align-items: center;
        width:auto;
        opacity: 0;
        transition: 0.25s ease-in-out;
    }
    
    .socialPictosContainerVisible
    {
        opacity: 1 !important;
        transition: 0.25s ease-in-out;
    }
    
    #socialPictosContainer a
    {
        width:25px;
        margin-top:5px;
        margin-bottom:5px;
        opacity: 1;
        transition: 0.2s;
    }

    
    #socialPictosContainer a:hover
    {
        opacity: 1;
    }
    
    h2
    {
        color:white;
        font-family: "Hind-Bold.ttf";
        font-size: 1vw;
        line-height: 1.3vw;
        letter-spacing: 0.7vw;
        margin-bottom: 1vw;
        z-index: 5;
        text-shadow: 4px 4px 17px black;
    }
    
    h3
    {
        color:#121212;
        font-family: "Hind-Bold.ttf";
        font-size: 2vw;
        line-height: 2vw;
        letter-spacing: .8vw;
        
    }
    
    h4
    {
        color:white !important;
        font-family: "Hind-Bold.ttf";
        text-transform: uppercase;
        font-size: 1vw;
        line-height: 1.3vw;
        letter-spacing: 0.5vw;
        margin-bottom: 1vw;
        z-index: 5;
        text-shadow: 4px 4px 17px rgba(150, 150, 150, 0.70);
        transition: 0.5s;
    }
    
    h4 a
    {
        color:white;
    }
    
     h4:hover
    {
        opacity: 70%;
        color:white;
        
    }

    

    
    a
    {
        text-decoration: none;  
        color: #121212;
    }
    
    
    p
    {
        color:white;

        opacity:1;
        font-family: "Hind-Regular.ttf";
        font-size: 2vw;
        -webkit-margin-before: 0 !important;
        -webkit-margin-after: 0 !important;
        -webkit-margin-start: 0px !important;
        -webkit-margin-end: 0px !important;
    }
    


    #logo svg
    {
        width:3em;
    }

    #logo img
    {
        height:100%;
    }
    
    
    #muteDiv
    {
        display: flex;
        flex-direction: row;
        align-content: center;
        align-items: center;
        width:3em;
        cursor: pointer;
        margin:2em;
    }
    
    #muteLogo
    {
        width:100%;
        height:100%;
    }
    
    #muteTxt
    {
        font-family: "Hind-Regular.ttf";
        font-size: 1.5vw;
        line-height: 2vw;
        letter-spacing: .5vw;
    }   
    



    

    
    
    #mouseOverLinks
    {
        display: flex;
        flex-direction: row;
        height:10vw;
    }


    
    #animatedDivs
    {
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        flex-direction: column;
    }
    
    #animatedDiv2
    {
        transition-delay: 0.1s;
    }
    
    #animatedDiv1
    {
        transition-delay: 0.2s;
    }

    .closedDivs
    {
        background:white;
        width: 0%;
        height: 33%;
        transition:0.5s  ease-in-out;
    }

    .openedDivs
    {
        background:white;
        width: 100%;
        height: 33%;
        transition:0.5s ease-in-out;
    }
    

    



    
}




@media screen and (max-width: 700px)  
{
  .bloc 
  {
    display:block;
    clear:both;
    }
    
     #nav
    {
        display: none;
        flex-direction: column;
        align-content: center;
        align-items: center;
        width:100%;
        Height:100%;
        transition: .5s;
        position:absolute;
        justify-content: center;
    }
    
    .navHidden
    {
        z-index:-50;
        opacity:0;
        transition: 0.5s;
        background-color: "rgba(0,0,0,0)";
    }
    
    .navShown
    {
        z-index:5;
        opacity:1;
        transition: 0.5s;
        background-color: "rgba(0,0,0,0.95)";
    }
    
    .workLinks
    {
        font-size: 1.3em;
        padding:1.5em;
        line-height: 1em;
    }
    
    .workLinks:hover
    {
        font-size: 1.3em;
        line-height: 1em;
        padding:1.5em;
    }
    
    #txtFooterContainer
    {
        width:80%;  
        margin-bottom: 8vw;
    }
    
    
    #txtFooterContainer h2
    {
        font-size: 20px;
        margin-bottom: 20px;
        line-height: 20px;
    }
    
    #txtFooterContainer p
    {
        font-size: 18px;
        line-height: 22px;
    }

    
    #nameSocialContainer h2
    {
        font-size: 4.5vw;
        margin-bottom: 2vw;
    }
    
    #nameSocialContainer
    {
        
    }
    
    
    
    #muteDiv
    {
       
    }
    
    #muteLogo
    {
        width:100%;
        height:100%;
    }
    
    
    
    #logo svg
    {
        width:3em;
    }
    

    
    h1
    {
        text-align: center;
        font-size: 0.001vw;
        z-index: -10;
        width: 100%;
        text-shadow: 4px 4px 17px rgba(150, 150, 150, 0.56);
    }
    
    h2
    {
        font-size: 3.7vw;
        margin-bottom: 5vw;
    }
    
    h3
    {
        color:#121212;
        font-family: "Hind-Bold.ttf";
        font-size: 6vw;
        line-height: 2vw;
        letter-spacing: .8vw;
    }
    
    
    h4
    {
        color:white !important;
        font-family: "Hind-Bold.ttf";
        text-transform: uppercase;
        font-size: 3vw;
        line-height: 1.3vw;
        letter-spacing: 0.5vw;
        margin-bottom: 1vw;
        z-index: 5;
        text-shadow: 4px 4px 17px rgba(150, 150, 150, 0.70);
        transition: 0.5s;
    }
    
    
    
    
    header
    {
         z-index: 15;
    }
    
    footer
    {
        height:80vh;
    }
    
    #muteDiv
    {
        width: 3em;
        height:3em;
    }
    
    #muteLogo
    {
        width:100%;
        height:100%;
        padding-bottom: 0.5em;
    }
    
    #muteTxt
    {
        
        font-size: 5vw;
        line-height: 2vw;
        letter-spacing: .5vw;
    }
    
    
    
    #animatedDivs
    {
        width: 100%;
        height: 100%;
        z-index: 2;
        display: flex;
        flex-direction: column;
    }
    
    .closed
    {
        background:white;
        width: 0%;
        height: 33%;
        transition:0.25s;
    }
    
    .opened
    {
        background:white;
        width: 100%;
        height: 33%;
        transition:0.25s;
    }
    
    #animatedDiv2
    {
        transition-delay: 0.2s;
    }
    
    #animatedDiv1
    {
        transition-delay: 0.4s;
    }
    
    #socialPictosContainer
    {
        display: flex;
        flex-direction: row;
        align-content: center;
        
        position: absolute; 
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; 
        width: 160px; /* Need a specific value to work */
    }
    
    .socialPictosContainerVisible
    {
        opacity: 1 !important;
        transition: 0.25s ease-in-out;
    }
    
    #socialPictosContainer a
    {
        width:30px;
        margin: 5px;
    }
    
    #nameSocialContainer
    {
        display: flex;
        align-content: center;
        align-items: baseline;
        
    }
    
    
}



@media screen and (max-width: 400px)  
{
  .bloc 
  {
    display:block;
    clear:both;
    }
    
    #txtFooterContainer p
    {
        font-size: 16px;
        line-height: 20px;
    }
    
    #txtFooterContainer
    {
        width:90%;  
    }
    
    #txtFooterContainer h2
    {
        font-size: 25px;
        line-height: 25px;
    }
    
}


@media screen and (min-width: 1500px)
{
  .bloc 
  {
    display:block;
    clear:both;
    }
    
    .projectLinkBlack
    {
        margin-top: 2vw;
    }

    #txtFooterContainer p
    {
        font-size: 1.2vw;
    }
    
    #nameSocialContainer
    {
        width:16vw;
    }
    
    #nameSocialContainer h2 
    {
         font-size: 2.2vw;
         margin-bottom: 0.7vw;
    }
    
    #logo svg 
    {
        width: 4vw !important;
        min-width: 4vw;
    }
    
    #logo
    {
        bottom:5vw;
    }
    
    #socialPictosContainer a
    {
        width:1.8vw;
        margin-top:0.5vw;
        margin-bottom:0.5vw;
    }
}