@font-face
{
    font-family: "Hind-Regular.ttf";
    src: url('../FONTS/Hind-Bold.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');
}

@keyframes grow {
    0%{transform: scale(0);}
    100%{transform: scale(1);}
}
    
    
@keyframes reveal {
    0%{
        opacity:0;
        transform: translateY(40px);
    }
    100%{opacity:1;
    transform: translateY(0px);}
}

@keyframes fadeOut {
    0%
    {
        opacity:1;
        z-index: 1000;
    }
    99%
    {
        opacity:0;
    }
    100%
    {
        opacity:0;
        z-index: -1000;
    }
}

@keyframes scaleIntro {
    0%
    {
        transform: scaleY(0);
    }

    100%
    {
        transform: scaleY(1);
    }
}



@media screen and (min-width: 0px)  {
  .bloc 
  {
    display:block;
    clear:both;
    }
    
    #introReveal
    {
        background-color: #121212;
        position: absolute;
        display: flex;
        width: 100%;
        height: 100%;
        z-index: 1000;
        opacity:1;
        animation: fadeOut 0.6s ease forwards;
        animation-delay: 0.8s;
    }
    
    #introReveal svg
    {
        width: 80px;
        position: absolute;
        left:50%;
        top:50%;
        margin-left:-40px;
        margin-top:-31px;
        
    }
    
    #rect1Intro
    {
        animation: scaleIntro 0.5s ease-in-out forwards;
        transform: scaleY(0);
    }
    
    #rect2Intro
    {
        animation: scaleIntro 0.5s ease-in-out forwards;
        animation-delay: 0.1s;
        transform: scaleY(0);
    }
    
    #rect3Intro
    {
        animation: scaleIntro 0.5s ease-in-out forwards;
        animation-delay: 0.2s;
        transform: scaleY(0);
    }
    
    header
    {
        position:absolute;
        z-index:10;
    }
    
    #logosClients
    {
        position: absolute;
        opacity: 0;
        animation: reveal 1s forwards;
        animation-delay: 0.9s;
        right:20px;
        width: 20em;
        z-index: 50;
        margin-top: 20px;
    }
    
    .borderCategory
    {
        display: none;
    }
    
    body 
    {
        background: #000;
        overflow:hidden;
    }
    
    .categoryTitle
    {
        color:white;
        font: "Hind-Light.ttf";
        line-height: 55px;
    }
    
    #videoCategory
    {
        
    }
    
    #soundCategory
    {
        
    }

    
    
    p
    {
        color:white;
        font-family: "Hind-Regular.ttf";
        font-size: 2vw;
    }

    
    #mainContainer
    {
        width:100%;
        height:100vh;
        display:flex;
        flex-direction: row;
        position:relative;
        
        z-index:5;
    }
    
    .category
    {
        height:100%;
        width: 25%;
        opacity:20%;
        position: relative;
        overflow:hidden;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:0.3s ease-in-out;
        cursor:pointer;
        
        filter: blur(1em);
    }
    
    .borderCategory
    {
        position: relative;
        overflow:hidden;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition:0.3s ease-in-out;
    }

    
    .category:hover
    {
        width:30%;
        opacity:100%;
        filter: blur(0);
    }
    
    .category video
    {
        height: 100vh;
    }
    
    .categoryTitle
    {
        position:relative;
        z-index:30;
        font-size: 4vw;
        opacity: 0;
        
    }
    
    
    
    #logo
    {
        position:absolute;
        width:4em;
        left:0;
        right:0;
        
        bottom:5em;
        margin-left:auto;
        margin-right:auto;
        
        z-index:35 !important;
        cursor:pointer;
        animation: grow 1s forwards, hithere 2s ease infinite;
    }
    
    #logo svg
    {
        width:4em !important;
        min-width: 4em;
         
    }
    
    #muteDiv
    {
        width:3em !important;
        margin:20px !important;
        animation: reveal 1s forwards;

        animation-delay: 0.7s;
    }
    
    #logo:hover
    {
        
    }

    @keyframes hithere 
    {
      30% { transform: scale(1.08); }
      40%, 60% { transform: rotate(-10deg) scale(1.08); }
      50% { transform: rotate(10deg) scale(1.08); }
      70% { transform: rotate(0deg) scale(1.08); }
      100% { transform: scale(1); }
    }
    

}







@media screen and (max-width: 750px)  
{
  .bloc 
  {
    display:block;
    clear:both;
    }
    
    body::-webkit-scrollbar {
        display: none;
    }  
    
    body
    {

        overflow:visible;
    }
    
    #logosClients
    {
        position: fixed;
        
        right:20px;

        width: 20em;
        z-index: 50;
        margin-top: 20px;
    }


    #logo
    {
        position:fixed;
        opacity: 1;
        animation: hithere 2s ease infinite;

    }
    
    @keyframes hithere 
    {
      30% { transform: scale(1.08); }
      40%, 60% { transform: rotate(-10deg) scale(1.08); }
      50% { transform: rotate(10deg) scale(1.08); }
      70% { transform: rotate(0deg) scale(1.08); }
      100% { transform: scale(1); }
    }
    
    #muteDiv
    {
        position: fixed;
        width: 3em !important;
    }
    
    #logo svg
    {
        width:3em !important;
    }
    
    #mainContainer
    {
        width:100%;
        height:auto;
        flex-direction: column;
    }
    
    #webCategory
    {
        height:400px;
        opacity: 1;
    }
    
    .category
    {
        width:100%;
        opacity:100%;
        height:250px;
        position: relative;
        overflow:hidden;
        text-align: center;
        transition: 0.4s ease-in-out;
        filter: blur(0em);
        opacity: 0.3;
        min-height:150px;
    }
    
    .category:hover
    {
        
    }
    
    .borderCategory
    {
        display:flex;
        width:100%;
        opacity: 0.1;
        height: 150px;
    }
    
    .borderCategory video
    {
        width:100%;
        height: auto;
    }
    
    .category video
    {
        width:100%;
        height: auto;
    }
    
    .category h2
    {
        width:100%;
    }
    
    .categoryTitle
    {
        opacity: 1;
        font-size: 2.5em; 
    }
    
    #footer
    {
        position: fixed;
    }
    
    .category:hover
    {
        width:100%;
        opacity:100%;
        filter: blur(0);
    }
    
    
}



@media screen and (max-width: 450px)  
{
  .bloc 
  {
    display:block;
    clear:both;
    }
    
    #logosClients
    {
        margin-top: 25px;
        width: 15em;
    }
    
    #socialPictosContainer 
    {
        margin-top:40px;
    }
    
    #socialPictosContainer a
    {
        margin: 5px;
    }
    
    
}


@media screen and (min-width: 1500px)  
{
  .bloc 
  {
    display:block;
    clear:both;
    }
    
    #muteDiv
    {
        width:3.2vw !important;
        margin:2vw !important;
    }
    
    #logo
    {
        width:3.2vw;
    }
    
    #logosClients
    {
        right: 2.2vw;
        width: 22vw;
        margin-top: 2vw;
    }  
    
    #socialPictosContainer
    {
        width:100%;
    }
    
    
    
    
}