@font-face {
font-family: open;
src:url(../font/open.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: ultra;
src:url(../font/ultra.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: arialn;
src:url(../font/arialn.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: verd;
src:url(../font/Verdana.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: gross;
src:url(../font/gross.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: wau;
src:url(../font/wau.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: pagan;
src:url(../font/pagan.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: wiz;
src:url(../font/wizard.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: vik;
src:url(../font/vik.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: robo;
src:url(../font/robo.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}

@font-face {
font-family: roboto;
src:url(../font/Roboto.ttf) format('truetype');
font-weight: normal;
src:local(?^);
}



* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}

* a  {
  text-decoration: none;
}



body {
 /*background: url(http://subtlepatterns.com/patterns/use_your_illusion.png);*/
 /*background: url(../img/2.jpg);*/
  font: 1.3em 'open', sans-serif;
  margin: 0 auto;
     }

.fakt0 {
    position: relative;
 margin: 0 auto;
min-height: 100%;
}





.equipment-image {
    float: right;     
    width: 380px;     
    margin-left: 30px;
    margin-top: 0px;
    
    shape-outside: polygon(
        220px 0px,
        150px 100px,
        210px 180px,
        110px 180px,
        0px 320px,
        120px 320px,
        210px 600px,
        500px 600px
    );
    
    shape-margin: 0px;
}




/* 2. Фикс для родительского блока: Предотвращение схлопывания */
#grey2 {
    overflow: hidden; 
    /* Убедитесь, что здесь нет padding-right, который может "задавить" float */
}





.clearfloat {
clear: both;
}

html, body {
width: 100%;
height: 100%;
}

* html body .fakt0 {
height: 100%;
}


     .clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

/* IE6/7 support */
.clearfix {
    *zoom: 1;
}

.fon {
    
background: url(../img/132.jpg);
background-repeat: no-repeat;
height: 219px;
width: 1000px;
margin: 10px auto;
}











/* Эффект при наведении курсора */
.telegram-link:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Фон станет темнее */
}

.ah1 {
    letter-spacing: -1px;
     word-spacing: -2px;
    
    color: #fff;
   }

.ah {
  text-decoration: none;
  color: #fff;
}

div.povorot {
float: right;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
display: inline-block;
vertical-align: text-top;
text-indent: 0px;
cursor: pointer;
background-color: #F9F9F9;
line-height: 39px;
margin-right: -105px;
padding-right: 20px;
padding-left: 20px;
margin-top: 40px;
}

div.povorot a{
text-decoration: none;
}

div.povorot a:hover {
  color: red;
}

a:hover {
  color: red;
}


@font-face {
  font-family: 'beastvs'; /* Рекомендуется писать имена в кавычках */
  src: url('../font/beastvs.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'hux';
  src: url('../font/hux.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'bankir';
  src: url('../font/bankir.ttf') format('truetype');
  font-weight: normal;
}

@font-face {
  font-family: 'open';
  src: url('../font/open.ttf') format('truetype');
  font-weight: normal;
}



::selection {
  background-color: #4EC6DE;
}


.tabbed {
  width: 1000px;
  margin: 0 auto;
  padding-top: 7px;
   }


.tabbed > input {
  display: none;
}

.tabbed > label {
  display: block;
  float: left;
  padding: 4px 20px;
  margin-right: 5px;
  cursor: pointer;
  -webkit-transition: background-color .3s;
  -moz-transition: background-color .3s;
  -o-transition: background-color .3s;
  transition: background-color .3s;

}

.vk {
 margin-top: 4px;
  margin-left: 640px;
}

.vk a {
  text-decoration: none;
  color: #000000;
}

.vk a:hover {
  color: #0000FF;
}

.koloni {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}


/* мой код пошел /////////////////////////////////////*/
.header {
font-family: bankir, beastvs; 
font-size: 32px;
color: #fff;
margin: 0px 0 0px 0px;
PADDING-TOP: 5px;
PADDING-LEFT: 15px;
background-color: rgba(0,0,0,0.4);
width: 300px;
height: 50px;
word-spacing: 0px;
letter-spacing: -1px; 
}



.subheader {
font-family: hux, beastvs;
font-size: 22px;
color: #fff;
margin: 0px 0px 0 0px;
PADDING-TOP: 0px;
background-color: rgba(0,0,0,0.4);
width: 300px;
letter-spacing:1px;
height: 40px;
PADDING-BOTTOM:0px;
text-align: center;
}

.kurs {
  position: relative; /* Абсолютное позиционирование */
    left: 730px; right: 0px; bottom: 219px;
    height: 276px;
    width:263px;
 }

.video {
  float: right;
    margin-top: 30px;
  /*border: 1px solid; /* Параметры границы */
    /*background: #F9F9F9; /* Цвет фона */
    height: 315px;
    width: 500px;
    /*padding: 10px; /* Поля вокруг текста */

   }

   .iframe {

   }



.partnerka {
  float: right;
    margin-top: 20px;
  border: 1px dotted; /* Параметры границы */
  background: #F9F9F9; /* Цвет фона */
   width: 480px;
   height: 105px;
    padding: 20px 20px; /* Поля вокруг текста */
    font-variant: small-caps;
    margin-right: 20px;

}

.hark {
  float: left;
  margin-top: 10px;
  line-height: 20px;
  background-color: #E0F9F9;
  padding: 15px;
  width: 317px;
}

.hark2 {
  float: left;
  margin-top: 10px;
  line-height: 20px;
  background-color: #97FF6A;
  padding: 15px;
  width: 317px;
}


.hara {
margin-top: 10px;
float: left;
line-height: 20px;
background-color: #FFFFCC;
padding: 15px;
width: 317px;


}

.haraup {
  text-transform: uppercase;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin: 0;
  display: block;
}



.hagen51 {

  margin: 0;
  padding: 0;
  border: 0;
}


.p12 {
position: relative;
color: #000000;
font-family: open, hux, bankir, beastvs;
letter-spacing: -1px;
font-size: 36px;
padding: 0;
border: 0;
text-align: center;
}

.p12v {
margin-bottom: 15px;
line-height: 0.6em;
text-align: center;
color: #000000;
font-family: open, hux, bankir, beastvs;
letter-spacing: -1px;
font-size: 38px;
line-height: 0px;
}

.p13 {
text-align: left;
color: #000000;
font-family: hux, bankir, beastvs;
letter-spacing: 3px;
font-size: 34px;
margin-bottom: -23px;
padding-top: 120px;
line-height: 0.9em;
color: blue;
}

.p14 {
text-align: left;
color: #000000;
font-family: hux, bankir, beastvs;
letter-spacing: 3px;
font-size: 34px;
margin-bottom: -23px;
padding-top: 0px;
line-height: 0.9em;
color: blue;
}

/*.jbenz {
  width: 49.5%;
  height: 49.5%;

}

.jbenz2 {
  width: 49.5%;
  height: 49.5%;
}*/

.benz3 {
  float: right;
  color: #0000FF;
  padding-left: 190px;
  line-height: 0px;
}

.benz2 {
  float: left;
  PADDING-LEFT: 50px;
  color: #FF0000;
  line-height: 0px;
}

.land {
color: #FF0000;
}

/*.jvesa {
 width: 50%;
 height: 50%;
}*/

.vesa {
  float: left;
  margin: 8px 0;
  line-height: 22px;

}

.juha {
  float: right;
  margin: 8px 0;
  line-height: 22px;
  padding-right: 122px;

}

.linel {
  float: right;
  margin: 8px 0;
  line-height: 22px;
  padding-right: 65px;

}

.cof {
 float: left;
  margin: 8px 0;
  line-height: 22px;

  }

  .cof2 {
  float: right;
  margin: 8px 0;
  line-height: 22px;
  padding-right: 65px;

}

/*.jjuha {
 width: 45.7%;
 height: 45.7%;
}*/

.hagen {
 float: left;
  margin: 8px 0;
  line-height: 22px;
}

/*.jhagen {
 width: 49%;
 height: 49%;
}*/

/*.jjohan {
width: 49%;
 height: 49%;
}*/

/*.jcof {
width: 49.5%;
 height: 49.5%;
}*/

#jkjel {
width: 317px;
height: 222px;
}

.goran {
width: 317px;
height: 222px;
}

.old {
   width: 317px;
height: 222px;
}

.old2 {
   width: 46%;
  height: 46%;
}

.old3 {
   width: 50%;
  height: 40%;
}

.old4 {
   width: 48%;
  height: 48%;
}

.phead{
font-weight: bold;
}

.ptxt {
font-size: 20px;
}

.grey {
color: #808080;
font-size: 16px;
word-spacing:-1px;
letter-spacing:-0.1px;

}

.grey1 {
font-family: open, hux;
color: #fff;
font-size: 25px;
word-spacing:-1px;
letter-spacing:0px;
line-height:26px;
margin: 0 0 0px 0px;
padding: 0;
background-color: rgba(0,0,0,0.4);
width: 300px;
height: 129px;
PADDING-TOP: 0px;
PADDING-LEFT: 20px;
}

#grey2 {
line-height:22px;
overflow: hidden;
}

.grey3 {
    text-align: center;
  font-family: open, hux;
  
font-size: 25px;
word-spacing:-1px;
letter-spacing:-0.1px;
line-height: 5px;


}


.lime {
color: #00FF00;
font-size: 120%;
font-family: hux, arial;
letter-spacing:2px;
word-spacing: -6px;
line-height:30px;
}

.p {
text-align: center;
color: #000000;
line-height:0px;
font-family: bankir, beastvs;
letter-spacing:-2px;
font-size: 26px;
}

.goroda {
text-align: center;
color: #000000;
font-family: bankir, beastvs;
letter-spacing:-2px;
font-size: 36px;
padding: 5px;
line-height:0.6em;
  margin-bottom:0;
  margin-top:25px;
  padding:0;
}

#p1 {
text-align: left;
color: #000000;
line-height:26px;
font-family: bankir, open, beastvs;
letter-spacing:-1px;
word-spacing: 0px;
font-size: 26px;
padding: 0px 0px 0px 0px;
margin: 20px 0 0 0;
}


.nemogu {
  float: right;
   position: relative; /* Абсолютное позиционирование */
    left: 0px; right: 0px; bottom: 0px; top: 0px;
    margin: 0;
    padding: 0;
    width: 470px;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
margin-right: 10px;
background-color: #E0F9F9;
padding: 20px 20px 20px 20px;
  }
  
.nemogu4 {
    float: left;
    position: relative;
    width: 250px; 
    height: 185px; 
    line-height: 165%;
    margin: 30px 15px 0px 0;
    padding: 15px;
    background-color: #FFFFFF;
}



  .nemogu3 {
  float: right;
   position: relative; /* Абсолютное позиционирование */
    left: 0px; right: 0px; bottom: 0px;
    margin: 0;
    padding: 0;
    width: 477px;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 20px;
margin-right: 23px;
background-color: #FFFFFF;
padding: 20px 20px 20px 20px;
margin-top: 20px;
text-align: justify;
  }

.pad2 a {
      
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
     
   }

   .pad2 a:hover {
  color: #FF0000;
}

.pad2 a:active {
  color: #AF0F00;
}

.pad2 {
  -webkit-column-count:5;
  -moz-column-count:5;
  -o-column-count:5;
  column-count:5;
  line-height: 16px;
}

.spisok {
  -webkit-column-count:3;
  -moz-column-count:3;
  -o-column-count:3;
  column-count: 3;
  line-height: 22px;
  font-size: 19px;
  color: black;
  background-color: #E0F9F9;
  padding-left: 15px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  word-spacing: -1px;


   padding-top: 10px;

   margin-left: 0px;
   margin-right: 5px;
}

.text23 {
  line-height:22px;
 margin-right: 10px;

  text-align: justify;


}



.donobl {
  line-height: 25px;
  font-size: 30px;
  text-align: left;
  font-family: hux;
  letter-spacing: 5px;
  margin-top: 0px;
  margin-bottom: 5px;
  padding: 0 auto;
  background-color: #E0F9F9;
}



.druzj {
	 width: 400px;
     height: 400px;
    
    	float: left;
	margin-right: 20px;
	-webkit-transition: all 0.6s linear; /*Чтобы начался транзишион - обратная анимация нужно в тег самой картинки добавить тоже транзишион и в ховер тоже транзишион, но уже с добавлением шедов*/
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

   .druzj:hover {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

.druzj2 {
	
		
	margin-right: 1px;
	-webkit-transition: all 0.6s linear; /*Чтобы начался транзишион - обратная анимация нужно в тег самой картинки добавить тоже транзишион и в ховер тоже транзишион, но уже с добавлением шедов*/
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

   .druzj2:hover {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}


.gasifi {
margin-top: -42px;

}


.maptxt {
  padding: 0px 0px 10px 0px;
     line-height:28px;
    font-size: 27px;
    margin-top: -35px;
   
    
}


.donobl:hover {
  background: #D0F9F9;
}




.druz {
  text-align: center;
color: #000000;
line-height:0px;
font-family: bankir, beastvs;
letter-spacing:-2px;
font-size: 42px;

}

.fakt p {
margin-top: 25px;
margin-bottom: 0;
padding: 0;
line-height: 0.6em;
}


.iopis {
font-size: 0.85em;
text-align: center;
padding: 0px;
margin: 0px;
border: 0px;
}

.iopis2 {
font-size: 0.85em;
text-align: center;
padding: 0px;
margin: 0px;
border: 0px;
margin-bottom: 15px;
}

.p1 {
text-align: center;
color: #000000;
/*line-height:0px;*/
font-family: bankir, beastvs;
letter-spacing:-2px;
font-size: 26px;
}

.fakt2 {
margin: 0 15px 0 0;
}

.text2 {
  line-height:24px;
}

.text3 {
  line-height:24px;
  float: left;
  margin:10px 0;

}

 .nemogu2 {
  float: right;
   position: relative; /* Абсолютное позиционирование */
    left: 0px; right: 0px; bottom: 0px;
        width: 320px;
    height: 110px;
    margin-left: 10px;
    margin-bottom: 0px;
    margin-top: 0px;
margin-right: 10px;
background-color: #CBF9F9;
padding: 20px 20px 20px 20px;
line-height:24px;
  }



#grey2 a {
    text-decoration: none; /* Отменяем подчеркивание у ссылки */
   }

   .balon {
    width: 188px;
    height: 300px;
   }


.fakt img {
width: 600px;
height: 386px;
}

.f1 {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .f1:hover::after {
    content: attr(data-text); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0px; right: 0; bottom: 7px; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(0,0,0,0.85); /* Полупрозрачный цвет фона */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    font-family: open, sans-serif, beastvs, Arial; /* Гарнитура шрифта */
    font-size: 20px; /* Размер текста подсказки */
    padding: 10px 5px; /* Поля */
    word-spacing: -1px;
    /*border: 1px solid #333;  Параметры рамки */
    margin: 0;
   }

   .f11 {
    display: inline-block; /* Строчно-блочный элемент */
    position: relative; /* Относительное позиционирование */
   }
   .f11:hover::after {
    content: attr(data-text); /* Выводим текст */
    position: absolute; /* Абсолютное позиционирование */
    left: 0px; right: 0; bottom: 0px; /* Положение подсказки */
    z-index: 1; /* Отображаем подсказку поверх других элементов */
    background: rgba(0,0,0,0.85); /* Полупрозрачный цвет фона */
    color: #fff; /* Цвет текста */
    text-align: center; /* Выравнивание текста по центру */
    font-family: open, sans-serif, beastvs, Arial; /* Гарнитура шрифта */
    font-size: 18px; /* Размер текста подсказки */
    padding: 0px 0px; /* Поля */
    word-spacing: -1px;
    /*border: 1px solid #333;  Параметры рамки */
    margin: 0;
   }


/* мой код end ///////////////////////////*/

.tabbed > label:hover,
.tabbed > input:checked + label {
  background: #7FFF00;
}

.tabs {
  clear: both;
  /*-webkit-perspective: 600px;
  -o-perspective: 600px;
  -moz-perspective: 600px;
  perspective: 600px;*/
}

.tabs > div {
  width: 1000px;
  position: absolute;
  border: 2px dotted #7FFF00;
  padding: 0px 15px 10px 20px;
  /*line-height: 1.4em;*/
  opacity: 0;
  display: none;
  /*-webkit-transform: rotateX(-20deg);
  -webkit-transform-origin: top center;
  -webkit-transition: opacity .3s, transform 1s;
  -o-transform: rotateX(-20deg);
  -o-transform-origin: top center;
  -o-transition: opacity .3s, transform 1s;
  -moz-transform: rotateX(-20deg);
  -moz-transform-origin: top center;
  -moz-transition: opacity .3s, transform 1s;
   transform: rotateX(-20deg);
  transform-origin: top center;
  transition: opacity .3s, transform 1s;
  z-index: 0;*/
}

#tab-nav-1:checked ~ .tabs > div:nth-of-type(1),
#tab-nav-2:checked ~ .tabs > div:nth-of-type(2),
#tab-nav-3:checked ~ .tabs > div:nth-of-type(3),
#tab-nav-4:checked ~ .tabs > div:nth-of-type(4),
#tab-nav-5:checked ~ .tabs > div:nth-of-type(5){
  -webkit-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
    opacity: 1;
    display: block;
  z-index: 1;
}



#tab-nav-1, #tab-nav-2, #tab-nav-3, #tab-nav-4, #tab-nav-5 ~ .tabs > div {
  background-color: #FFFFFF;
}

@media screen and (max-width: 700px) {
  .tabbed { width: 400px }
  .tabbed > label { display: none }
  .tabs > div {
    width: 400px;
    border: none;
    padding: 0;
    opacity: 1;
    display: block;
    position: relative;
     -webkit-transform: none;
    -o-transform: none;
    -moz-transform: none;
    transform: none;
      margin-bottom: 60px;
  }
  .tabs > div h2 {
    border-bottom: 2px dotted #7FFF00;
    padding-bottom: .5em;
  }
}


.eko {
float: left;
margin-right: 10px;
}

.ekor {
 width: 33%;
  height: 33%;
  float: right;
margin-left: 14px;
margin-top:14px;
}

.ekol {
 width: 33%;
  height: 33%;
  float: left;
margin-left: 14px;
margin-top:14px;
}

.ptext2 {
  line-height:24px;
  margin-right: 10px;
  text-align: justify;
}

.ikrom {
  line-height: 23px;
  margin-right: 10px;
  text-align: justify;

}

.ikrom2 {
  line-height: 24px;
  margin-right: 10px;
  text-align: center;
}

.ikromb {
  line-height: 23px;
  margin-right: 10px;
  text-align: justify;
  font-weight: bold;
}

#ikromj {
	width:120px;
	height:109px;
	float: left;
	margin-right: 10px;
	margin-top: 5px;
}

#ikromj2 {
	width:120px;
	height:109px;
	float: left;
	margin-right: 10px;
	margin-top: 5px;
}


.val {
  width: 33%;
  height: 33%;
  float: right;
margin-left: 14px;
margin-top:14px;
}

.nemogu11 {
  background-color:#E0F9F9;
  bottom:0;
  float:right;
  left:0;
  line-height:22px;
  margin:0 10px;
  padding:20px;
  position:relative;
  right:0;
  width:350px;
}

.kursk {
    margin-left: 105px;
}

  .kup {
    color: white;
    font-size: 39px;
    position: absolute;
    margin-left: 160px;
    margin-top: -30px;
    background-color: #FF9000;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    padding-bottom: 17px;

  }

    .kup2 {
    color: red;
    font-size: 46px;
    position: absolute;
    margin-left: 130px;
    margin-top: -445px;
    background-color: ;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 9px;
    padding-bottom: 17px;

  }

.lime2 {
color: #00FF00;
font-size: 65%;
font-family: hux, arial;
letter-spacing:2px;
word-spacing: -6px;
line-height:30px;
margin-top: 10px;
}

.andrey {
    padding-left: 10px;
}


.perv {
    text-align: center;
}

.perv2 {
    text-align: center;
}

.eotz {
	color: blue;
}

.vk1 {
	padding-left: 40px;
}

#nazim {
    height: 250px;
    width: 188px;
    margin: 0px;
    padding: 0px;
}

#anat {
    height: 250px;
    width: 333px;
    margin: 0px;
    padding: 0px;
}

#anat3 {
    height: 250px;
    width: 280px;
    margin: 0px;
    padding: 0px;
}

.ja {
	height:550px;
	float: left;
	margin-left: 20px;
    margin-top: 30px;
	margin-right: 20px;
	-webkit-transition: all 0.6s linear; /*Чтобы начался транзишион - обратная анимация нужно в тег самой картинки добавить тоже транзишион и в ховер тоже транзишион, но уже с добавлением шедов*/
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

   .ja:hover {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

.ja2 {
	
		margin-left: 20px;
	margin-right: 1px;
	-webkit-transition: all 0.6s linear; /*Чтобы начался транзишион - обратная анимация нужно в тег самой картинки добавить тоже транзишион и в ховер тоже транзишион, но уже с добавлением шедов*/
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

   .ja2:hover {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
transition: all 0.6s linear;
}

.huaspanja {
    font-weight: bold;
    font-family: roboto;
    font-weight: lighter;
    font-size: 20px;
    line-height: 9px;
    color: darkblue;
    margin-left: 20px;
}


.whoi {
    font-family: ultra;
    
    }

.belarus {
    width: 475px; 
   }
   
   .belarus1 {
    width: 317px; 
   }
   

.fa-globe {
    /* Меняет цвет иконки (для примера — на темно-синий) */
    color: #1a5c9a; 
    
    /* Задает размер иконки */
    font-size: 20px;
  }


.fa-telegram-plane {
    color: #0088cc; /* Официальный синий цвет Telegram */
    font-size: 24px;
}

.fa-youtube {
    color: #ff0000; /* Официальный красный цвет YouTube */
    font-size: 24px; /* Увеличиваем размер */
    
}


.trenn22 {
    padding: 20px;
    font-size: 21px;
    line-height: 24px;
    font-family: ultra;
    letter-spacing: 0.5px;
    background-color: #FFFFFF;
    color: #000000;
    border: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}


/* Убираем белые поля только для третьей вкладки Кто я*/

#tab-nav-3:checked ~ .tabs > div:nth-of-type(3) {
    padding: 0 !important;
}

#tab-nav-3:checked ~ .tabs > div:nth-of-type(3) .whoi {
    margin: 0;
    padding: 0;
}

#tab-nav-3:checked ~ .tabs > div:nth-of-type(3) #about {
    margin: 0;
    padding: 0;
}