@font-face {
            font-family: 'Play', sans-serif; 
            /*src: url("fonts/playbold.ttf"); */
           }
           h1 {    font-family: 'Play', sans-serif;      color: #1B5D89;}
           button {    font-family: 'Play', sans-serif; font-kerning: none;  }

           @font-face {
              font-family: 'Play', sans-serif;
             /* src: url("fonts/playregular.ttf");*/
           }
           body {    font-family: 'Play', sans-serif;;  
                margin: 0;
                font-kerning: none;
                }


  .animated-line {
           /* transition: all 2.2s; */
    transition-duration: 2.2s;
    transition-timing-function: ease;
    transition-delay: 0s;
  }



.box0 {  
     display: flex;  
    align-items: stretch;
    font-kerning: none;
    margin-bottom: -14%; /*наложение на следующий блок, точнее отричательный отступ от него*/
}
.in_block0 {  
    text-align: center;
    z-index: 1;
   /* border-style:dotted;*/
}



    .head_text {  /*Заголовок*/
      /*font-size: 1.5vw;*/
      color: #1B5D89;
      text-align: left;
      text-shadow:  white 2px 2px 2px, white -2px -2px 2px, 
                    white -2px 2px 2px, white 2px -2px 2px;
      position: absolute;
      top:14.2vw;
      left: 10.4%;
    }
    .head_text2 {     /* ПОД Заголовок*/
      /*font-size: 1.53vw;*/
      color: #1B5D89;
      text-align: left;
      text-shadow:  white 1px 1px 1px, white -1px -1px 1px, 
                    white -1px 1px 1px, white 1px -1px 1px;
      position: absolute;
      top: 20.0vw;
      left: 10.4%;
    }

  .head_text {              font-size: 1.7vw;              }              /*текст заголовка Основной*/
  .head_text2 {              font-size: 1.9vw;              }         /*текст подзаголовка*/

















.box1 {  
  display: flex;  
  position: relative;
  justify-content: space-between;
  width: 80%;       /* общая ширина блоков, где круги и текстовка  */
    align-items: stretch;
           /* border-style:solid; */
    margin-left: auto;  /*Центровка всего блока*/
    margin-right: auto;
}

.in_block1 {  
  font-size: 0.9vw;
  width: 50%;  
   
    text-align: center;
    z-index: 3;
    /*margin-left: 5%;*/
 
    margin: auto;

   /* border-style: dotted;*/
}
.in_block1_krug img {
    width: 31.3vw;
    padding-left: 2.92vw;
}


.in_block1 h1 {
  font-size: 1.2vw;
  font-kerning: none;  /*Исправил сбойное расстояние между буквами шрифта PLAY*/
  padding-left: 4vw;
  padding-right: 4vw; 
}

.in_block1_img-------- { /*картинки в блоках отступаем от левой стороны*/
  padding-left: 7%;
}



.in_block1_krug {  
  font-size: 0.9vw;
  width: 50%;  
    /*text-align: center;*/
    z-index: 3;
    margin: auto;
   /* border-style: dotted;*/
}
.img_to_left {text-align: left;}
.img_to_right {text-align: right;}









.po_shirine {
		/* font-kerning: initial; */
		/* letter-spacing: 0.01em; */
		font-kerning: none;  /*Исправил сбойное расстояние между буквами шрифта PLAY*/
		text-align: justify;
    padding-left: 4vw;   /*текст в блоках отступаем от левой стороны*/
    padding-right: 4vw;   /*текст в блоках отступаем от левой стороны*/
		/* font-variant-ligatures: contextual;*/
}

















.box3 {   /*дорожки*/
  width: 100%;
  display: flex;  
  text-align: center;
    align-items: stretch;
    margin-top: -8%; /*наложение на следующий блок, точнее отричательный отступ от него*/
      /*border-style:dotted;*/
  align-items: center;
  justify-content: center;  /*отцентрировал все внутренние блоки в этом блоке по центру*/
}

.in_block3 {
 width: 35%; 
    /*border-style:solid; */
    text-align: center;

    z-index: 2; 

}





.box4 {     /*Контакты, общий блок*/
  display: flex;  
  position: relative;
  /*top:-280px;  */
  justify-content: space-between;
  width: 100%;
  /*height:3vw;*/
    background: #adcbe3;
    align-items: stretch;
}
.in_block4 {               /* контакты - внутренние блоки как делить        внизу странички*/
 width: 33%; 
         /*border-style:solid; */
    /*text-align: center;*/

    z-index: 1; 
}
.in_block4 h1 {
  font-size: 1.2vw;     
   color:#003366;
    padding-left: 5%;   
}
.in_block4 .text_footer {
  font-size: 0.9vw;     
   color:black;
}
.in_block4 .ikonka_footer { /*размеры иконок внизу в футере*/
   width: 50%;
}
.in_block4 .logo{  /*логотип ИКТ*/
    position: relative;
    right: -50%;  /*отступ справа внутри блока*/
}



.in_block_logo{
  /*position: relative;*/
  /* border-style:solid; */
  /*align-items: bottom;*/
  position:absolute; /* добавили */
  bottom:8%;   /*отступ от низа*/
  
}



.dva_bloka {  /**/
    /* border-style:solid;*/
  display: flex;  
  position: relative;
  margin-top: 2%;
  justify-content: space-between;
  width: 100%;
  align-items: center;
       /*font-size: 1vw;*/
      font-kerning: none;  /*Исправил сбойное расстояние между буквами шрифта PLAY*/

}



 /*.show_on {}*/

.show_on { position: absolute; } /*картинка над картинкой, при наведении исчезать*/
.show_on:hover { position: absolute; opacity: 0;}




   /*   https://ictech.com.ua/new_site/fontsplaybold.ttf */

   

.buttons {border: 1px solid #e34761; color: #e34761; }


            button {  /*Наведение на кнопку, оживляем*/
                   margin-top: 2%;
                   font-size: 0.9vw; 
                   /*width: 37%; */
                   height:2.4vw; 
                   border: 3px solid #B70031; 
                   color: #B70031; 
                   border-radius: 3px; 
                   background-color: white; 
                   padding-left: 12px;
                    padding-right: 12px;
                    }
            button:hover {
                    border: 4px solid;
                    cursor: pointer;
                    /*margin-left:1px; margin-top:1px;*/
                    }
        	@media screen and (max-width:980px) {    /*кнопка в мобильной версии чуть крупнее и текст больше*/
        			button { font-size: 2.4vw;  height: 5vw;}
        }











/* <!-- =====   Круги и градиент при наведении   ========================================  --> */


        .gradient_left {
          display: inline-block;
          position: relative;    
          line-height: 0;
        }
        .gradient_left:after {   /*квадрат заливки занимает весь блок, накладывается на картинку*/
          content: "";
          display: block;  
            margin:auto;  
            width: 24.86vw;  /* 74% */
            height: 24.86vw;  /* 86%  */
                top: 2.2vw;
                left: 5.3vw;   /*16%*/
            border-radius: 50%;  
                                      /*border:dotted;*/
           position: absolute;  
           /*top: 0;        left: 0;  */
          background: transparent;
          background-image: linear-gradient(to left, transparent, white); /*левый градиент*/
          opacity: 0.7;
            transition: opacity 1s; /*при смене прозрачности использовать плавность в 1 секунду*/
            box-shadow: -9px 0 7px 2px #fffffff2;  /*теть со смещением влево белая распушенная, чтоб резкого края не было у круглого градиента*/

        }  
          .gradient_left:hover:after {              opacity: 0;               }  /*при наведении градиенту стать прозрачным*/





        .gradient_right {
          display: inline-block;
          position: relative;    
          line-height: 0;
        }
        .gradient_right:after {   /*квадрат заливки занимает весь блок, накладывается на картинку*/
          content: "";
          display: block;  
            margin:auto;  
            width: 24.86vw;  /* 74% */
            height: 24.86vw;  /* 86%  */
                top: 2.35vw;
                left: 5.5vw;   /*16%*/
           border-radius: 50%;  
                          /*border:dotted;*/
           position: absolute;  
           /*top: 0;        left: 0;  */
          background: transparent;
          background-image: linear-gradient(to right, transparent, white); /*левый градиент*/
          opacity: 0.7;
            transition: opacity 1s; /*при смене прозрачности использовать плавность в 1 секунду*/
            box-shadow: 9px 0 7px 2px #fffffff2;

        }  
          .gradient_right:hover:after {             opacity: 0;               }  /*при наведении градиенту стать прозрачным*/





  .language_button{
    position: absolute;
    top:0.5vw;
    right: 1vw;
    font-size: 1.1vw;
        /*color: white;
        background: #1B5D89;*/
        /*padding-left: 0.5%;
        padding-right: 0.5%;*/
        cursor: pointer;
    z-index: 4;
  }







@media screen and (max-width:980px) {   /*Для мобильной версии - оставляем только заголовки, заголовко делаем больше*/
  .po_shirine { display: none; }
  .in_block1 {
              margin-top: auto;
              margin-bottom: auto;
            }
  .box1 {  
            display: flex;  
            position: relative;
            justify-content: space-between;
            width: 92%;       /* общая ширина блоков, где круги и текстовка  */
              align-items: stretch;
                     /* border-style:solid; */
              margin-left: auto;  /*Центровка всего блока*/
              margin-right: auto;
        }
  .in_block1 h1{
              font-size: 3vw;
              font-kerning: none;  /*Исправил сбойное расстояние между буквами шрифта PLAY*/
              }
  .in_block4  h1{             font-size: 1.8vw;              }   /*Текст Контакты и Соц сети*/            
  .in_block4 .text_footer {font-size: 1.5vw;               }    /*Текст в ФУТЕРЕ, под заголовками*/



.in_block1_krug img {  /*Размер кругов больше, для моб версии*/
                width: 55.3vw;
                padding-left: 0;
}
.gradient_left:after {  background-image:none; box-shadow: none; }
.gradient_right:after {  background-image: none; box-shadow: none; }

.in_block1_krug {                 width: 60%;  }
.in_block1 {                 width: 40%;  }


.in_block3 { width: 28%;}
.head_text {  font-size: 2.2vw;top:15.2vw;}
.head_text2 { font-size: 2.6vw;top: 22vw;}
  .language_button{   font-size: 1.7vw; right: 1.5vw; }



}





/*Переключение языков*/
.dropbtn {  background-color: #388ed4;  color: white;  padding: 7px;  font-size: 16px;  border: none;  cursor: pointer;}
.dropdown {  /*position: relative;*/  position: absolute;    top: 0.5vw;    right: 1vw;    font-size: 1.1vw;    cursor: pointer;    z-index: 4;  display: inline-block;}
.dropdown-content {  display: none;  position: absolute;  background-color: #f9f9f9;  min-width: 160px;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);  z-index: 1;}
.dropdown-content a {  color: black;  padding: 12px 16px;  text-decoration: none;  display: block;}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {  display: block;}
.dropdown:hover .dropbtn {  background-color: #297abc;}