@font-face {
    font-family: 'PT Sans Condensed bold';
    src: local('PT Sans Condensed bold'), url('../../fonts/NotoSans-CondensedBold.ttf');
}
@font-face {
    font-family: 'Jo PT Sans Condensed Bold';
    src: local('Jo PT Sans Condensed Bold'), url('../../fonts/JoNotoSans-CondensedBold.ttf');
}


@font-face {
    font-family: 'Jo PT Sans Condensed';
    src: local('Jo PT Sans Condensed'), url('../../fonts/JoNotoSans-Condensed.ttf');
}



@font-face {
    font-family: 'Literata';
    src: local('Literata'), url('../../fonts/Literata-Regular.ttf');
}
@font-face {
    font-family: 'Literata bold';
    src: local('Literata bold'), url('../../fonts/Literata-Bold.ttf');
}
@font-face {
    font-family: 'Jo Literata';
    src: local('Jo Literata'), url('../../fonts/JoLiterata-Regular.ttf');
}
@font-face {
    font-family: 'Jo Literata bold';
    src: local('Jo Literata bold'), url('../../fonts/JoLiterata-Bold.ttf');
}



@font-face {
    font-family: 'PT Sans';
    src: local('PT Sans'), url('../fonts/PTSans.ttf');
}
@font-face {
    font-family: 'Jo PT Sans';
    src: local('Jo PT Sans'), url('../fonts/JoPTSans.ttf');
}


@font-face {
    font-family: 'PT Sans Bold';
    src: local('PT Sans Bold'), url('../fonts/PTSans-Bold.ttf');
}
@font-face {
    font-family: 'Jo PT Sans Bold';
    src: local('Jo PT Sans Bold'), url('../fonts/JoPTSans-Bold.ttf');
}



.yo_body {
    background-image: url("../img/triatex.png");
	background-repeat: repeat-x repeat-y;
	background-position: center;
    background-size: 500px;
}

.yo_p_head_1 {
	display: inline-block; 
	text-decoration: none;
	font-family: 'Jo PT Sans Condensed bold', 'Jo PT Sans Mono', sans-serif;
	font-weight: bold;
	font-size: min(3.4Vmax, 30pt);
	line-height: 150%;
	letter-spacing: 3;
	text-align: center;
	margin: 15px;
	/*border: 1px solid yellow;*/
}
.yo_head_pic {
	height: 8Vmax;
}

.yo_p_head_2 {
	text-decoration: none;
	font-family: 'Jo PT Sans Condensed bold', 'Jo PT Sans Mono', sans-serif;
	font-weight: bold;
	font-size: min(2.6Vmax, 23pt);
	letter-spacing: 2;
}


UL { 
    list-style-type: square; /* Маркеры в виде квадрата */
    list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */
}
li { 
	list-style: square;
    list-style-type: square; /* Маркеры в виде квадрата */
    list-style-position: outside; /* Маркеры размещаются за пределами текстового блока */
}


centered_table {
	margin: 5px;
	text-align: center;
	padding-top: 1.5%;
	padding-bottom: 1.5%;
	padding-left: 5%;
	padding-right: 5%;
}


.yo_menu_1 {
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: 10%; 
	margin-right: 10%; 
	padding: 2%; 
	padding-left: 15%; 
	padding-right: 15%; 
	list-style: none; /*убираем маркеры списка*/
	text-align:center;
}
.yo_menu_1 a {
	padding: 2px;  padding-left: 10px;  padding-right: 10px; 
	margin: 5px;  margin-left: 5px;  margin-right: 10px; 
	text-decoration: none; /*убираем подчеркивание текста ссылок*/
	background:#fff; /*добавляем фон к пункту меню*/
	color:#111; /*меняем цвет ссылок*/
	font-family: 'Jo PT Sans Condensed bold', sans-serif;
	line-height: 150%;
	letter-spacing: 2;
	font-weight: bold;
	font-size: min(3Vmax, 26pt);
}
.yo_menu_1 a:hover {
	background:#bbb;/*добавляем эффект при наведении*/
}
.yo_menu_1 li {
	float:left; /*Размещаем список горизонтально для реализации меню*/
}
.yo_menu_1 a.current{
	background: #ecf;
}
.yo_menu_1 a.menu_1 a:hover{
	background: #def;
}



.yo_menu_2 {
	margin-top: 0px; 
	margin-bottom: 0px; 
	margin-left: 10%; 
	margin-right: 10%; 
	padding: 2%; 
	padding-left: 15%; 
	padding-right: 15%; 
	list-style: none; /*убираем маркеры списка*/
	text-align:center;
}
.yo_menu_2 a {
	padding: 2px;  padding-left: 10px;  padding-right: 10px; 
	margin: 5px;  margin-left: 5px;  margin-right: 10px; 
	text-decoration: none; /*убираем подчеркивание текста ссылок*/
	background:#fff; /*добавляем фон к пункту меню*/
	color:#222; /*меняем цвет ссылок*/
	font-family: 'Jo PT Sans Condensed bold', sans-serif;
	line-height: 150%;
	letter-spacing: 2;
	font-size: min(2.5Vmax, 21pt);
}
.yo_menu_2 a:hover {
	background:#bbb;/*добавляем эффект при наведении*/
}
.yo_menu_2 li {
	float:left; /*Размещаем список горизонтально для реализации меню*/
}
.yo_menu_2 a.current{
	background: #ecf;
}
.yo_menu_2 a.menu_2 a:hover{
	background: #def;
}



.yo_p_step {
	display: inline-block; 
	float: left;	
	padding: 5px; 
	text-decoration: none; /*убираем подчеркивание текста ссылок*/
	font-family: 'Jo PT Sans', sans-serif;
	font-size: min(2.6Vmax, 23pt);
	background:#ffc; /*добавляем фон к пункту меню*/
	color:#222; /*меняем цвет ссылок*/
}
.yo_p_step a:hover {
	background:#bbb;/*добавляем эффект при наведении*/
}
.yo_p_step, .p_step:visited {color: #black;}
.yo_p_step a.p_step a:hover{
	background: #def;
}

.yo_p_left {
	float: right;
	margin-left: auto; 
	margin-right: 0px; 
}
.yo_p_midl {
	width: 99%;
	margin: 0px; 
	vertical-align: middle;
	align: center;
	text-align: center;
}
.yo_p_righ {
	float: left;
	margin-left: 0px; 
	margin-right: auto; 
}
.yo_p_stop {
	color:#AAA; /*меняем цвет ссылок*/
	background:#AAA;/*добавляем эффект при наведении*/
}



.yo_p_letter {
	font-family: 'Literata bold';
}
.yo_p_letter_jo {
	font-family: 'Jo Literata bold';
}

.yo_p_text {
	font-family: 'Literata', sans-serif;
	position: relative; 
	margin: 15px 35px 5px 100px;
	font-size: min(2Vmax, 17pt);
	line-height: 1.5;
}

.yo_p_quote {
	width: 90%;
	font-family: 'Literata', sans-serif;
	position: relative; 
	margin: 15px 35px 5px 100px;
	font-size: min(2Vmax, 17pt);
	color: #440044;
	background-color: #FFEECC;
	line-height: 1.5;
}

.yo_p_text_list {
	width: 90%;
	font-family: 'Literata', sans-serif;
	position: relative; 
	margin: 5px 35px 5px 100px;
	text-indent: 100px;
	font-size: min(2Vmax, 17pt);
	line-height: 1.5;
}




.yo_p_title_jo {
	position: relative; 
	font-family: 'Jo Literata bold', sans-serif;
	margin: 50px 60px 20px 60px;
	font-size: min(3Vmax, 26pt);
}
.yo_p_title2_jo {
	font-family: 'Jo Literata bold', sans-serif;
	position: relative; 
	margin: 40px 70px 15px 70px;
	font-size: min(2.5Vmax, 21pt);
}
.yo_p_title2_sub_jo {
	font-family: 'Jo Literata', sans-serif;
	position: relative; 
	margin: 30px 70px 15px 70px;
	font-size: min(2.5Vmax, 21pt);
}
.yo_p_title3_jo {
	position: relative; 
	font-family: 'Jo Literata bold', sans-serif;
	margin: 20px 80px 7px 80px;
	font-size: min(2.1Vmax,18pt);
}
.yo_p_title3_sub_jo {
	position: relative; 
	font-family: 'Jo Literata', sans-serif;
	margin: 20px 80px 7px 80px;
	font-size: min(2.1Vmax,18pt);
}
.yo_p_title4_jo {
	position: relative; 
	font-family: 'Jo Literata bold', sans-serif;
	margin: 15px 90px 5px 90px;
	font-size: min(1.9Vmax,16pt);
}
.yo_p_title4_sub_jo {
	position: relative; 
	font-family: 'Jo Literata', sans-serif;
	margin: 10px 90px;
	font-size: min(1.9Vmax,16pt);
}




.yo_p_caption_jo {
	position: relative; 
	padding-left: 5%;  padding-right: 5%; 
	font-family: 'Jo Literata', sans-serif;
	font-style: italic;
	margin: 2px;
	font-size: min(1.7Vmax,17pt);
	text-align: center;
	line-height: 1.5;
	margin: 5px 10%;
}

.yo_p_warn_jo {
	font-family: 'Jo Literata', sans-serif;
	font-size: min(2.2Vmax, 20pt);
	background:#ffe; /*добавляем фон к пункту меню*/
	color:#a00; /*меняем цвет ссылок*/
	position: relative; 
	margin: 5px 35px 10px 20px;
	padding: 0px; padding-left: 2%; padding-right: 2%;
	text-align: center;
	line-height: 1.5;
}

.yo_p_text_jo {
	position: relative; 
	margin: 15px 35px 5px 100px;
	font-family: 'Jo Literata', sans-serif;
	font-size: min(2Vmax, 17pt);
}

.yo_p_code_jo {
	position: relative; 
	margin: 15px 35px 15px 130px;
	font-family: 'PT Sans', sans;
	font-size: min(2Vmax, 16pt);
}

.yo_p_quote_jo {
	position: relative; 
	margin: 15px 35px 5px 100px;
	font-family: 'Jo Literata', sans-serif;
	font-size: min(2Vmax, 17pt);
	color: #440044;
	background-color: #FFEECC;
	line-height: 1.5;
}

.yo_p_text_list_jo {
	position: relative; 
	margin: 5px 35px 5px 40px;
	font-family: 'Jo Literata', sans-serif;
	text-indent: 100px;
	font-size: min(2Vmax, 17pt);
	line-height: 1.5;
}




.yo_p_caption {
	position: relative; 
	padding-left: 5%;  padding-right: 5%; 
	font-family: 'Literata', sans-serif;
	font-style: italic;
	margin: 2px;
	font-size: min(1.7Vmax,17pt);
	text-align: center;
	line-height: 1.5;
	margin: 5px 10%;
}

.yo_p_image_base {
	margin: auto;
	position: relative; 
	padding: 10px; 
	display: block;
	max-width: 99%;
}

.yo_p_image {
	margin: auto;
	position: relative; 
	padding: 10px;
	display: block;
	width: auto;
	max-width: 99%;
}

.yo_p_image_magnify {
	margin: auto;
	display: block;
	max-width: 800;
	width: 800;
	border: 4px double black;
}

.yo_a_download {
	margin-left: 20px;
	font-size: min(1.7Vmax,17pt);
	font-family: 'Jo Literata', sans-serif;
	width: 90%;
}


.yo_text_quote {
	color: #000000;
	background-color: #FFEECC;
}
.yo_text_gray {
	color: #888888;
}
.yo_text_light {
	color: #FF0000;
	background-color: #FFFFDD;
}
.yo_text_red {
	color: #880000;
	background-color: #FFFFBB;
}
.yo_text_yellow {
	color: #000000;
	background-color: #FFFF00;
}
.yo_text_green {
	color: #005500;
	background-color: #DDFFDD;
}
.yo_text_blue {
	color: #0000FF;
	background-color: #DDFFFF;
}
.yo_text_shame {
	color: #554433;
}



.yo_unborder_img {
	border: 10px solid #ddd;
	margin: 8px 0 0 0.5Vmin;
    max-inline-size: 90%;
    block-size: auto;
}
.yo_border_img {
	border: 12px solid #ddd;
	margin: 8px 0 0 0.5Vmin;
    max-inline-size: 90%;
    block-size: auto;
}
.yo_border_img:hover {
	border: 12px solid #ebf;
	margin: 8px 0 0 0.5Vmin;
    max-inline-size: 90%;
    block-size: auto;
}

.yo_bord_img_sm {
	border: 12px solid #ddd;
	margin: 8px 0 0 0.5Vmin;
    max-inline-size: 90%;
}
.yo_bord_img_sm:hover {
	border: 12px solid #ebf;
	margin: 8px 0 0 0.5Vmin;
    max-inline-size: 90%;
}


.yo_p_warn {	
	margin: 10px; margin-left: 100px; margin-right: 50px;
	padding: 2.5%;
	padding-left: 3%;
	text-align: left;
	position: relative; 
	font-size: min(1.8Vmax, 18pt);
	font-family: 'Literata', sans-serif;
	color:#a00;
	border-left-color: #a00;
	border-left-width: 7px;
	border-left-style: double ;
	background:#ffc; /*добавляем фон*/
	line-height: 1.5;
}
.yo_p_message {
	margin: 10px; margin-left: 100px; margin-right: 50px;
	padding: 2.5%;
	padding-left: 3%;
	text-align: left;
	position: relative; 
	font-size: min(1.8Vmax, 18pt);
	font-family: 'Literata', sans-serif;
	color:#00a;
	border-left-color: #00a;
	border-left-width: 7px;
	border-left-style: double ;
	background:#ffc; /*добавляем фон*/
	line-height: 1.5;
}
.yo_p_message_jo {
	margin: 10px; margin-left: 100px; margin-right: 50px;
	padding: 2.5%;
	padding-left: 3%;
	text-align: left;
	position: relative;
	font-size: min(1.8Vmax, 18pt);
	font-family: 'Jo Literata', sans-serif;
	color:#00a;
	border-left-color: #00a;
	border-left-width: 7px;
	border-left-style: double ;
	background:#ffc; /*добавляем фон*/
	line-height: 1.5;
}








/* Галлерея картинок */
.yo_gal-pic {
	display:inline-block;
}


/* Оформление панели */
#side-checkbox {
    display: none;
}
.side-panel {
    position: fixed;
    z-index: 99999;
    top: 0;
    left: -600px;
    background: #FFFFFF;
    transition: all 0.5s;   
    width: 400px;
    height: 100vh;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #000;
    font-weight: normal;
    padding: 0px 10px 0px 60px;

	margin: 0 auto;
	white-space: wrap;
	overflow-x: auto;
	overflow-y: scroll;
	scrollbar-color: #FFF #99BDDB;
	scrollbar-width: auto;          /* "auto" или "thin"  */
}/*
.side-title {
	font-family: 'Jo Literata', sans-serif;
	font-size: min(5Vmax, 22pt);
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #111;
    font-family: 'Roboto', Тahoma, sans-serif;
}*/


/* Оформление кнопки на странице */
.side-button-1-wr {
	color: #337AB7;
    text-align: left; /* Контейнер для кнопки, чтобы было удобнее ее разместить */
    z-index: 999999;
}
.side-button-1 {
    display: inline-block;
}
.side-button-1 .side-b {
    margin: 0;
    text-decoration: none;
	font-size: min(5Vmax, 22pt);
    line-height: 20px;
    padding: 20px 20px;
    color: #FFF;
    font-weight: normal;
    text-transform: uppercase; 
    font-family: 'Roboto', Тahoma, sans-serif;
    background: #337AB7;
    cursor: pointer; 
    border: 2px solid #BFE2FF;
    position: fixed;
    left: 0px;
    top: 0px; 
    z-index: 999999;
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
    color: #CFC;
}
/*
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
    position: absolute;
    height: 4px;
    left: 50%;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}
.side-button-1 .side-open:after,
.side-button-1 .side-open:before {
    background: green;
}
.side-button-1 .side-close:after,
.side-button-1 .side-close:before {
    background: red;
}
.side-button-1 .side-b:before {
    top: -6px;
}
.side-button-1 .side-b:hover:after,
.side-button-1 .side-b:hover:before {
    width: 100%;
    left: 0;
} */
/* Переключатели кнопки 1 */
.side-button-1 .side-close {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {
    display: block;
}
#side-checkbox:checked + .side-panel {
    left: 0;
}
/* Оформление кнопки на панеле 
.side-button-2 {
	margin: 5px 15px 0 0;
	font-family: 'Jo Literata', sans-serif;
	font-size: min(5.5Vmax, 22pt);
    font-weight: bold;
	
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px;
    cursor: pointer;
    color: #222;    
    transition: all 280ms ease-in-out;    
}
.side-button-2:hover {
    color: #000;
}*/

.side_div {
	line-height: 2;
}

.side-item-1 {
	margin: 10px 30px 10px 30px;
	font-family: 'Jo Literata', sans-serif;
	font-size: min(8Vmax, 16pt);
    font-weight: bold;
	color: black;
	
    position: relative;
    z-index: 1;
    top: 8px;
    left: 5px;
    cursor: pointer;
    color: #222;    
    transition: all 280ms ease-in-out;
	text-decoration: none;
}
.side-item-2 {
	margin: 10px 30px 10px 30px;
	font-family: 'Jo Literata', sans-serif;
	font-size: min(8Vmax, 16pt);
    font-weight: regular;
	color: black;
	
    position: relative;
    z-index: 1;
    top: 8px;
    left: 25px;
    cursor: pointer;
    color: #222;    
    transition: all 280ms ease-in-out; 
	text-decoration: none;   
}
.side-item-3 {
	margin: 10px 30px 10px 30px;
	font-family: 'Jo Literata', sans-serif;
	font-size: min(7Vmax, 14pt);
    font-weight: regular;
	color: black;
	
    position: relative;
    z-index: 1;
    top: 8px;
    left: 45px;
    cursor: pointer;
    color: #222;    
    transition: all 280ms ease-in-out; 
	text-decoration: none;   
}