@media only screen and (max-width:768px){
    

    @font-face {
        font-family: RudaStencil;
        src: url(/fonts/Graviton\ -\ RudaStencil.otf);
    }
     

    
   
     .content{
            max-width: 100%;
            max-height: max-content;
     }

    body{
        max-width: auto;
        max-height: fit-content;
    }

    
    .imger{

        position: relative;
        border: 5px solid #FFFFFF;
        border-radius: 48px;
        padding: 0;
        max-width:50%;
        position: absolute;
        width: 199px;
        height:550px;
        display: block;


    }




    

    .index1{


        position: absolute;
        z-index: 2;
        filter: brightness(0);
        filter: invert(1);
        filter:brightness(100);
        margin:5% 0 0 19%;
        width: 60%;
        
        
       
        

    }

    
    .ecos-soc h1{


        position: absolute;
        z-index: 4;
        font-size: 25px;
        color:#FFFFFF;
        margin: 25% 0 70% 13%;
        font-family:'RudaStencil';
        text-align: center;
        
    }


    .telegram, .vk, .instagram {

       position:center;
        
        width: 163px;
        height: 163px;
        left: 83px;
        top: 257px;
        
        background: url(vk.png);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 44px;
        
        
        /* insta */
        
        position:center;
        position:center;
        width: 179.2px;
        height: 149px;
        left: 75px;
        top: 404px;
        
        background: url(insta.png);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        
        
        /* telegramm */
        
        
        position:center;
        width: 180px;
        height: 180px;
        left: 74px;
        top: 100px;
        
        background: url(telegramm.png);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        
        
    }


  
    .imger{

         margin: 35%  0  0 25%

    }


      .index2{

        position: absolute;
         min-height: 110%;
         display:block;
         filter: brightness(50%);
         max-width: 100%;
         max-height: 100%;
 
     }
    }
  
  


@media only screen and (max-width:320px)
and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 1) {
    

    @font-face {
        font-family: RudaStencil;
        src: url(/fonts/Graviton\ -\ RudaStencil.otf);
    }




    
    .imger{

        position: relative;
        border: 5px solid #FFFFFF;
        border-radius: 48px;
        padding: 0;
        max-width:20%;
        position: absolute;
        width: 199px;
        height: 530px;
        margin:auto;



    }




    

    .index1{


        position: absolute;
        z-index: 2;
        filter: brightness(0);
        filter: invert(1);
        filter:brightness(100);
        margin:2% 0 0 10%;
        width: 80%;
        
       
        

    }

    
    .ecos-soc h1{


        position: absolute;
        z-index: 4;
        font-size: 20px;
        color:#FFFFFF;
        margin: 25% 0 70% 13%;
        font-family:'RudaStencil';
        
    }


    .telegram, .vk, .instagram {

       position:center;
        
        width: 163px;
        height: 163px;
        left: 200px;
        top: 257px;
        
        background: url(vk.png);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        border-radius: 44px;
        
        
        /* insta */
        
        position:center;
        position:center;
        width: 179.2px;
        height: 149px;
        left: 200px;
        top: 404px;
        
        background: url(insta.png);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        
        
        /* telegramm */
        
        
        position:center;
        width: 180px;
        height: 180px;
        left: 200px;
        top: 100px;
        
        background: url(telegramm.png);
        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
        
        
    }


  
    .imger{

         margin: 35%  0  0 25%

    }


    .index2{

        position: absolute;
         min-height: 110%;
         display:block;
         filter: brightness(50%);
         max-width: 100vh;
         max-height: 100vh;
 
     }
    
  
}