@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
 
    @font-face {
    font-family: 'MyFont';
    src: url('/i/count/font.ttf');
    }
    .class_timer{width: 973px;  margin:0 auto 10px;}
.counter{display: flex; width: 100%;height: 100px;}
.left{
    background: linear-gradient(180deg, rgba(239,128,84,1) 0%, rgba(150,53,18,1) 100%);
    
    width: 380px;
    
    display: flex;
    align-items: center;
    border-radius: 10px 0 0 10px;
    padding: 0 18px;
	padding-bottom: 10px;
    
    }
    
    .left p{
        text-transform: uppercase;
        color:#FFF;
        font-size:34px;
        font-family: MyFont;
        line-height: 44px;
        margin:0;
    }
    .left p span{font-family: MyFont;
        font-size: 42px;
        text-decoration: underline;
    }

    .timer-clock{
        background: linear-gradient(180deg, rgba(122,128,137,1) 0%, rgba(47,50,55,1) 98%);
       display: flex;
      
       align-items: center;
       padding: 0 10px;border-radius: 0 10px 10px 0;
    }
    #counter{
        background:url("/i/count/fon6.png") no-repeat center; 
        display: flex;
        align-items: center;width: 550px;height: 76px; justify-content: center;
    }
    #counter span{
        color: #FFF;
        font-size: 48px;
        margin-bottom: 20px;
        letter-spacing: 12px;
        text-indent: 12px;
        font-family: "Roboto Mono", monospace;
    }
    
    
    
    
    
    
    
    
    
    
    /********Мобильная версия**********/
     .mob_class_timer{width: 100%;  margin:10px auto 0;}
.mob_counter{display: flex; width: 100%;height: auto;}
.mob_left{
    background: #CC1414;
    width: 40%;
    display: flex;
    align-items: center;
    border-radius: 5px 0 0 5px;
    padding: 5px;
    
    }
    
    .mob_left p{
        text-transform: uppercase;
        color:#FFF;
        font-size:clamp(11px, 2vw, 10px);
        font-family: MyFont;
        line-height: 18px;
        margin:0;
    }
    .mob_left p span{font-family: MyFont;
        font-size: clamp(13px, 2vw, 15px);
        text-decoration: underline;
    }

    .mob_timer-clock{
        background: #363b4e;
       display: flex;
      width:60%;
       align-items: stretch;
       padding: 5px ;border-radius: 0 5px 5px 0;
    }
    #mob_counter{
        width: 100%; /* На меньших экранах делаем блок на всю ширину */
        height: auto; /* Высота может быть автоматически рассчитана или задана конкретным значением */
        background:url("/i/count/fon7.png") no-repeat center; 
        background-size: contain;
        display: flex;
        align-items: center; 
        justify-content: center;
    }
    #mob_counter span{
        color: #FFF;
        font-size: clamp(16px, 2vw, 18px);;
        margin-bottom: 10px;
        letter-spacing: 5px;
        text-indent: 5px;
        font-family: "Roboto Mono", monospace;
    } 
    
   @media (min-width:1025px) {
        .mob_class_timer{display: none;}
   }   
  
 @media (max-width: 1024px) AND (min-width:431px) {   
      .mob_class_timer{width: 700px;}
      #mob_counter span{
       font-size: clamp(28px, 2vw, 18px);
    margin-bottom: 15px;
    letter-spacing: 12px;
    text-indent: 11px;
  }
  
  .mob_left p{
        font-size:clamp(25px, 2vw, 20px);
        line-height: 28px;
        padding:0 5px;
  
    }
    .mob_left p span{font-family: MyFont;
        font-size: clamp(27px, 2vw, 25px);
       
    }
      
      
}

 @media (max-width: 425px)  {   
      .mob_class_timer{width: 340px;}
       #mob_counter span{
       text-indent: 6px;
  }
}

 @media (max-width: 430px) AND (min-width:426px) {
     .mob_class_timer{width: 370px;}
     
      .mob_left p{
         font-size:clamp(12px, 2vw, 10px);
      }
      .mob_left p span{
        font-size: clamp(14px, 2vw, 25px);
       
    }
     
 }