*{
	margin:0;
	padding:0;
	outline:none;
	box-sizing:border-box;
}
html,body{
	height:100%;
	width:100%;
	min-height:100%;
	background:rgba(255,255,255,1.00);
	font:100% Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;	/* устанавливаем размер для rem по умолчанию в 100% */
}
body *{	/* Отменить синий фон при клике на тачпад */
	-webkit-tap-highlight-color:transparent;	/* убераем синий фон дива во время клика ро тачпаду */
}
/* Для адаптивных сайтов используй rem! 1rem всегда равно 16px */
.wrapper{
	position:relative;
	min-height:100%;
	height:100%;
	width:100%;
	min-width:325px; /* Минимальная ширина после которой ссылку начинают рушаться и сайт сыпится */
	margin:0 auto;
}
@media screen and (max-width: 1000px){	/* если сайт меньше 1000px, делаем обёртку сайта на весь экран */
	#wrapper{
		width:100%;
		position:relative;
	}
}
:root{	/* Создаём две переменные. С помощью :root мы так объявляем переменные в CSS*/
  --header-height:4rem;	/* Создаём первую переменную */
  --margin-left-right:7%;	/* Создаём вторую переменную */
}
header{
	position:relative;
	height:var(--header-height);
	width:100%;
	background:rgba(15,15,15,1.00);
	overflow:hidden;
	color:rgba(255,255,255,1.00);
	z-index:1;
}
.logo{
	position:relative;
	overflow:hidden;
	width:18.75rem;
	height:var(--header-height);
	float:left;
	line-height:var(--header-height);
	left:var(--margin-left-right);
}
header ul{
	position:absolute;
	right:var(--margin-left-right);
	float:right;
	list-style:none;
	font-size:1rem;
}
header ul li{
	position:relative;
	display:inline-block;
	line-height:var(--header-height);
	padding:0 0.9375rem;
	color:#747474;
	cursor:pointer;
	transition:all 0.3s ease;
	text-shadow:0 0 0.0625rem rgba(255,255,255,0);
}
header ul li:nth-of-type(1){
	animation:text_color 5s ease infinite;
}
@keyframes text_color{
	0%{
		color:#7EF6FC;
		text-shadow:0 0 0.7rem #7EF6FC, 0 0 0.1rem #7EF6FC;
	}
	33.333%{
		color:#39FF3D;
		text-shadow:0 0 0.5rem #39FF3D,0 0 0.1rem #39FF3D;
	}
	66.666%{
		color:#FFFF00;
		text-shadow:0 0 0.5rem #FFFF00,0 0 0.1rem #FFFF00;
	}
	99.999%{
		color:#7EF6FC;
		text-shadow:0 0 0.5rem #7EF6FC,0 0 0.1rem #7EF6FC;
	}
}
/* Делаем наведение на элемент только для компьютера. То есть после клика, на андроид - элемент не будет висеть как активный. */
@media(pointer: fine){	/* Означает наведение только для компьтера. Это не сделает элемент списка всё время наведённым после клика по нему на тачпаде. Как убрать hover на мобильных устройствах, отменить наведение тач. */
	header ul li:hover{
		animation:text_color 5s ease infinite;
	}
}
/* Первый блок. */
header *, .content_box_1 *{
	user-select:none;
}
.content_box_1{
	padding:1.875rem;
	position:relative;
	overflow:hidden;
	height:calc(100% - var(--header-height));
	min-height:calc(100% - var(--header-height));
	z-index:1;
}
.content_box_1 .background{
	position:absolute;
	pointer-events:none;
	left:0;
	top:0;
	height:100%;
	width:100%;
	background:url(../files/images/1.jpg) center no-repeat #000;
	opacity:1;
	z-index:1;
}
.background_blue{	/* Анимируемые прямоугольники */
	pointer-events:none;
	left:0;
	top:0;
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
	background:rgba(10,33,50,0.75);
}
.smoke{	/* Canvas на котором рисуется след от мышки */
	position:absolute;
	pointer-events:none;
	left:0;
	top:0;
	height:100%;
	width:100%;
	z-index:2;
}
.content_box_1 .table{
	padding:1.875rem;
	position:relative;
	color:#fff;
	display:table;
	height:100%;
	width:100%;
	z-index:3;
}
.content_box_1 .cell{
	display:table-cell;
	text-align:center;
	vertical-align:middle;
}
.content_box_1 h2{
	font-size:1.9rem;
	line-height:2.8rem;
	color:rgba(255,255,255,1.00);
}
.content_box_1 .info{
	font-size:1.6rem;
}
.content_box_1 .info{
	padding:0.8em 0 2.5rem 0;
	background:rgba(255, 255, 255, 0.5) url("../files/service/bg.png") -100px 0 no-repeat;
	background-size:100px 100%;	/* Делаем картику блика на 100px в ширину как она есть и на 100% в высота. Высота родителья может меняться от размера дивайса и при маленьком экране текст растянется по экрану и чтобы вместе с ним растянуть картинку нужно задать ей размер по высоте 100%.  */
	animation:animation_gradient 15s 2s ease-in infinite;
	-webkit-text-fill-color:transparent;
	-webkit-background-clip:text;
}
@keyframes animation_gradient{
	0%{
		background-position:-100px 0%;
	}
	40%{
		background-position:calc(100% + 100px) 0;
	}
	100%{
		background-position:calc(100% + 100px) 0;
	}
}
.content_box_1 .button{
	margin-bottom:2rem;
	display:inline-block;
	padding:0.9375rem 2.1875rem;
	border:0.0625rem solid #fff;
	cursor:pointer;
	position:relative;
	z-index:4;
	color:#fff;
	transition:0.6s ease;
	font-size:1.2rem;
	opacity:0.5;
}
.content_box_1 .button:hover{
	opacity:1;
}
.content_box_1 .content{
	position:relative;
}
.content_box_1 button{
	position:relative;
	padding:0.3125rem 0.625rem;
}

/* Второй бок */
.content_box_2{
	position:relative;
	padding:1.875rem 1.875rem 3rem 1.875rem;
	display:table;
	min-height:100%;
	height:100%;
	z-index:2;
	overflow:hidden;
}
.content_box_2 .content_wrap{
	display:table-cell;
	vertical-align:middle;
}
.content_box_2 .title, .content_box_3 .title, .content_box_4 .title{	/* Отступы всех заголовков. */
	font:bold italic 1.8rem Verdana;
	padding:1rem 0 1.5rem 0;
	text-align:center;
}
.content_box_2 .title, .content_box_3 .title, .content_box_4 .title, .content_box_2 ul li b{	/* Всем заголовкам и тёмным элементам цвет. */
	color:rgba(50,65,77);
}
.content_box_2 ul{
	font-size:0;	/* Сбрасываем размер шрифта, чтобы убрались пробельные символы между блоками, для того чтобы элементы с display:inline-block; выровнялись в две колонки и не вылетали из столбцов. */
	list-style-type:none;
	margin:0 auto;
}
.content_box_2 ul, .content_box_3 ul, .content_box_4 .wrap{	/* Ширина всех родителей коннента. */
	width:90%;
}
.content_box_2 ul li{
	position:relative;
	width:50%;
	display:inline-block;
	vertical-align:top;
	margin:1.5rem auto;
}
.content_box_2 ul li b{
	display:inline-block;
	font:bold italic 1.1rem Verdana, "sans-serif";
	padding:0 1.5rem 0.5rem 1.5rem;
}
.content_box_2 ul li span, .content_box_3 ul li span{
	font-size:1.1rem;
}
.content_box_2 ul li span{
	display:inline-block;
	padding:0 1.75rem;
}
.content_box_2 ul li span:before{
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:0.3125rem;
	background:rgba(10,33,50,0.5);
}
.content_box_2 ul li span:after{
	content:'';
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	width:0.3125rem;
	animation:active_background 1s ease infinite;
	opacity:0;
	transition:1s ease;
}
@keyframes active_background{
	0%{
		background:#7EF6FC;
	}
	33.333%{
		background:#39FF3D;
	}
	66.666%{
		background:#FFFF00;
	}
	99.999%{
		background:#7EF6FC;
	}
}
.content_box_2 ul:hover li.active span:after{	/* По наведению на ul скрываем все активные светящиеся бордюры по левой стороне у псевдо элементов. */
	opacity:0;
}
.content_box_2 ul li:hover span:after{	/* По наведению на один из элементов li, показываем его дочерний псевдо элемент с бордюром по левую сторону. */
	opacity:0.9 !important;
}
.content_box_2 ul li.active span:after{	/* Элемент li который имеет класс .active включит свечение дочернему элементу и даст ему доступ в javascript. */
	opacity:0.9;
}

/* По наведению на ul скрываем все li, но показываем только наведённый li. */
.content_box_2 ul, .content_box_2 ul li, .content_box_3 ul, .content_box_3 ul li{
	transition:0.6s ease;
}
.content_box_2 ul:hover li, .content_box_3 ul:hover li{
	opacity:0.6;
}
.content_box_2 ul li:hover, .content_box_3 ul li:hover{
	opacity:1;
}



/* Третий бок */
.content_box_3{
	position:relative;
	padding:1.875rem;
	background:rgba(13,29,41,1);
	display:table;
	min-height:100%;
	height:100%;
	color:#fff;
	z-index:1;
	overflow:hidden;
}
.content_box_3 .content_wrap{
	position: relative;
	z-index:3;
	display:table-cell;
	vertical-align:middle;
}
.content_box_3 .title{
	color:#fff;
}
.content_box_3 .title, .content_box_4 .title{
	padding-bottom:0;
}
.content_box_3 .info{
	width:80%;
	margin:2rem auto 1rem;
	text-align:center;
	font:bold italic 1.2rem Verdana;
	color:lightgrey;
}
.content_box_3 ul{
	margin:0 auto;
}
.content_box_3 ul li{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	margin:1.5rem 0;
	list-style-type:none;
}
.content_box_3 ul span:before{
	content:'-';
	float:left;
	padding:0 7px;
}
.content_box_3 ul li span{
	display:inline-block;
	color:rgba(172,172,172,1.00);
}



/* Четвёртый бок */
.content_box_4{
	position:relative;
	display:table;
	min-height:100%;
	height:100%;
	width:100%;
	z-index:2;
	padding:1.875rem;
	overflow:hidden;
}
.content_box_4 .content_wrap{
	display:table-cell;
	vertical-align:middle;
	position:relative;
}
.content_box_4 .wrap{
	margin:0 auto;
	color:rgba(63,63,63,0.7);
}
.content_box_4 .wrap a,  .content_box_4 .wrap span, .content_box_4 .wrap b{
	color:rgba(10,33,50,1);
	padding-right:0.625rem;
	display:inline-block;
	overflow:hidden;
	text-overflow:ellipsis; /* Добавляем многоточие */
	vertical-align:bottom;	/* Выравниваем текст с тем что в диве по низу */
}
.content_box_4 .wrap div:not(.title){
	max-width:100%;
	width:100%;
	font-size:1rem;
	line-height:1.6rem;
}
.content_box_4 .info{
	font:1rem Verdana;
	margin:2rem 0 1rem 0;
}
.content_box_4 .wrap div:not(.info):not(.title){
	padding:0.4rem 0;
	font:1rem Verdana;
}
.content_box_4 h1{
	text-align:center;
	font:normal 0.9rem/1.2rem Verdana;
	padding:1rem 0 0 0;
}
.content_box_4 .nowrap span{
	padding:0;
}
/* Меняем курсаор у некоторых элементов */
h2, .info, .title{
	cursor:default;
}

/* стилизуем главный скролл всего сайта */
body::-webkit-scrollbar{	/* обозначение скролбара (вертикальный и горизонтальный), у этого правила, всгда должно быть хоть одно свойство, таким образом мы даём обозревателю понять что стилизуем скроллбыры, тоесть правила всгда должно быть хоть одно свойство, например хотябы белый фон, иначе если ни одного свойства не пропишем, то все остальные стили не схватяться к этому элементу */
    background:#FFFFFF;	/* припысываем хотябы одно свойство, чтобы все остальные приминились к этому элементу */
}
body::-webkit-scrollbar:vertical{	/* родитель вертикального скролбара */
	width:15px;	/* ширина столбца скролбара */
	background-color:#606060;		/* фон правого родительского скролбара */
}
body::-webkit-scrollbar-thumb:vertical{	/* бегунок в правом, вертикальном скролбаре */
	-webkit-box-shadow:inset 0 0 7px rgba(0,0,0,0.2);	/* внутреняя тень у бегунка */
    background:rgba(255,255,255,0.5);	/* цвет бегунка */
	border:5px solid #606060;	/* бордюры со всех сторон того же цвета что и фон этого родительскоро вертикального скролбара */
	border-radius:15px;	/* закругляем уголки таким-же радиусом как ширина самого родительского вертикального скролбара */
	transition:all 0.6s ease;
	cursor:pointer !important;
}
body::-webkit-scrollbar-thumb:vertical:hover{	/* родитель вертикального скролбара */
	 background:rgba(255,255,255,0.8);	/* цвет бегунка */
}



	


	
/* Делаем сайт адаптивным 

Порядок написания стилей для пк и для девайсов при изменении окна или обозревателя. Сначала прописываем все стили для пк когда изменяются размеры
обозревателя таким образом: 

*/
/* изменяем менюшку когда сужаем и расширяем браузер ПК */
@media screen and (max-width:975px), (max-height: 500px){	/* если меньше либо равно 60.9375rem в ширину пикселей на пк или меньше либо равно 500px по высоте. Запятая служит оператором или (or) */
	.content_box_1{	/* Блок приветствия */
		height:auto;	/* Растягиваем главный блок вниз */
	}
	.content_box_2 ul li, .content_box_3 ul li{	/* Все списки и элементы списка всегда видны. */
		opacity:1 !important;
	}
}
@media screen and (max-width: 840px){
	.content_box_2 ul li{
		width:100%;
	}
}
@media screen and (max-width: 1025px){
	header ul li:nth-of-type(1){
		display:none;
	}
	header ul li:nth-of-type(2){
		animation:text_color 5s ease infinite;
	}
}
@media screen and (max-width: 850px){
	header ul li:nth-of-type(2){
		display:none;
	}
	header ul li:nth-of-type(3){
		animation:text_color 5s ease infinite;
	}
}
@media screen and (max-width: 700px){
	header ul li:nth-of-type(3){
		display:none;
	}
	header ul li:nth-of-type(4){
		animation:text_color 5s ease infinite;
	}
	.content_box_4 .nowrap span{	/* Скрываем слова там где ссылки: "в контакте" и "канал". */
		display:none;
	}
}
/* Уменьшаем паддинги у всех родительских блоков по бокам */
@media screen and (max-width: 1250px){
	.content_box_2 ul, .content_box_3 ul, .content_box_3 .info, .content_box_4 .content_wrap{
		width:90%;
	}
}
/* Уменьшаем ссылки в самом низу */
@media screen and (max-width:786px){
	.content_box_4 .wrap a{
		width:300px;
	}
}
@media screen and (max-width:636px){
	.content_box_4 .wrap a{
		width:200px;
	}
}
@media screen and (max-width:465px){
	.content_box_4 .wrap a{
		width:100px;
	}
}
/* Масштабируем бля больших экранов 1920x1080, для телевизоров. */
@media screen and (min-width: 1920px){
	.content_box_1 h2{
		font-size:2rem;
	}
	.content_box_2 .title, .content_box_3 .title, .content_box_4 .title{
		font-size:3rem;
	}
	.content_box_1 .info, .content_box_1 .button{
		font-size:1.6rem;
	}
	.content_box_2 ul li span, .content_box_3 ul li span, .content_box_4 .wrap a,  .content_box_4 .wrap span, .content_box_4 .wrap b{
		font-size:1.2rem;
	}
	.content_box_3 .info, .content_box_4 .info, .content_box_4 .wrap div:not(.info):not(.title){
		font-size:1.2rem !important;
	}
}


/* Масштабируем для телефонов. Здесь включается команда -device- межу max-width, max-height и так далее. */
@media screen and (max-device-width: 1250px){
	.content_box_2 ul, .content_box_3 ul, .content_box_3 .info, .content_box_4 .wrap{
		width:90%;
	}
	.content_box_1 h2{
		margin-top:-0.2rem;
	}
	.content_box_2 ul li, .content_box_3 ul li{	/* Все списки и элементы списка всегда видны. */
		opacity:1 !important;
	}
}
@media screen and (max-device-width: 1250px) and (orientation: portrait){	/* Если девайс меньше либо равно 1250px и если он находится в вертикальном положении. */
	.content_box_1 .info{
		padding:2rem 0 3rem 0 !important;
	}
	.content_box_1 h2{
		font-size:1.8rem;
	}
}
@media screen and (max-device-width: 346px){
	.content_box_2 ul, .content_box_3 ul, .content_box_3 .info, .content_box_4 .wrap{
		width:98%;
	}
}
@media screen and (max-device-width: 325px){
	.content_box_2 ul, .content_box_3 ul, .content_box_3 .info, .content_box_4 .wrap{
		width:100%;
	}
}
/* Когда уменьшаем сайт на телефоне, стилизуем первый блок с заголовком */
@media screen and (max-device-width: 975px), (max-device-height: 500px){	/* если меньше либо равно 975px в ширину пикселей на пк или меньше либо равно 500px по высоте. Запятая служит оператором или (or) */
	.content_box_1{	/* Блок приветствия */
		height:calc(100% - var(--header-height));	/* Растягиваем главный блок вниз */
		max-height:auto;
	}
	.content_box_4{	/* Блок приветствия */
		height:calc(100% + var(--header-height));	/* Растягиваем главный блок вниз */
	}
}
@media screen and (max-device-width: 485px){
	.content_box_1 h2{
		font-size:1.4rem !important;
		line-height:2rem !important;
	}
	.content_box_1 .info{
		font-size:1.2rem !important;
		padding:1em 0 2rem 0 !important;
	}
	.content_box_1 .button{
		font-size:1rem !important;
	}
}
@media screen and (max-device-width: 360px){
	.content_box_1 h2{
		font-size:1.2rem !important;
		line-height:1.8rem !important;
		padding-bottom:1.5rem !important;
	}
	.content_box_1 .info{
		display:none;
	}
}

@media screen and (max-device-width: 700px){	/* если меньше либо равно 60.9375rem в ширину пикселей на пк или меньше либо равно 500px по высоте. Запятая служит оператором или (or) */
	:root{	/* Создаём две переменные. С помощью :root мы так объявляем переменные в CSS*/
	  --header-height:6rem;	/* Увеличиваем высоту шапки сайта */
	}
}
@media screen and (max-device-width: 600px){	/* если меньше либо равно 60.9375rem в ширину пикселей на пк или меньше либо равно 500px по высоте. Запятая служит оператором или (or) */
	header ul{
		display:none;
	}
	.logo{
		margin:0 auto;
		float:none;
		left:0;
		transform:scale(1.3);
	}
}
@media screen and (max-device-width: 1024px){	/* Если зашли с телефона, то скрываем кисть рисования. */
	.painting{
		display:none;
	}
}
/* Если планшет стоит горизонтально и мы уменьшаем размеры. */
@media screen and (max-device-height:700px){	/* если меньше либо равно 460px в ширину пикселей на пк или меньше либо равно 500px по высоте. Запятая служит оператором или (or) */
	.content_box_1 h2{
		font-size:1.7rem;
		line-height:2.5rem;
	}
	.content_box_1 .info{
		font-size:1.2rem;
		padding-bottom:2rem;
		opacity:0.7;
	}
	.content_box_1 .button{
		font-size:1.2rem;
	}
}
@media screen and (max-device-height:420px){	/* если меньше либо равно 420px в ширину пикселей на пк или меньше либо равно 500px по высоте. Запятая служит оператором или (or) */
	.content_box_1{
		height:420px;
		max-height:420px;
	}
}















/* Анимация логотипа. */
.wrap_svg .wrap_svg{
	position:relative;
	width:18.75rem;
	height:var(--header-height);
	background:hsla(0,0%,0%,1.00);
	text-align:center;
}
.wrap_svg svg{
	cursor:pointer;
	position:absolute;
	left:0;
	width:18.75rem;
	height:var(--header-height);
	transform:scale(0.8);
}
.wrap_svg svg path{
	fill:none;
	stroke-width:0.1875rem;
	stroke-linecap:round;	/* форма на концах линии, так же имеет значения square квадратная с внутреним отступом, butt - квадратная без отступа, round - круглая */
	stroke-linejoin:round;	/* это форма в углах на изгибах, например: round - это углы будут закруглёнными, miter - углы во врямя изгиба будут острыми, none - означает что углы во время изгиба будут обрубленными */
}
.wrap_svg svg path{
	stroke:inherit;	/* Все path берут свой цвет от родтелей, от тега g или от use.  */
}
.wrap_svg svg .text_bg{
	stroke:#333;	/* Основной цвет Букв. То есть те буквы стоят которые как фон. */
}
.wrap_svg svg use:nth-of-type(1){	/* Добавляем размытие дальнему слою path */
	filter:url(#blur);
}
.wrap_svg svg use{	/* Каждые 3 секунды 3 раза меняем цвет для родителей path, которые берут цвет у этих родителей. */
	 animation:color 9s infinite;	/* Так как анимация всех буква 3 секунды, то цвет мы меняем 3 раза в течении 9 секунд. */
}
@keyframes color{
	0%{
		stroke:#7EF6FC;
	}
	33.3%{
		stroke:#7EF6FC;
	}
	33.34%{
		stroke:#39FF3D;
	}
	66.6%{
		stroke:#39FF3D;
	}
	66.67%{
		stroke:#FFFF00;
	}
	100%{
		stroke:#FFFF00;
	}
}

/*

	100% длится анимация, делим её на 14 анимаций = 7.14 в среднем одна намация для каждой буквы.

*/

/* Анимируем буквы */

/* Буква B */
.wrap_svg svg .animation .path_1{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_1 3s ease infinite;
}
@keyframes move_text_1{
	0%{
		stroke-dashoffset:80px;
	}
	7%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква B продолжение (она состоит из двух анимаций) */
.wrap_svg svg .animation .path_2{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_2 3s ease infinite;
}
@keyframes move_text_2{
	7%{
		stroke-dashoffset:80px;
	}
	14%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква A */
.wrap_svg svg .animation .path_3{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_3 3s ease infinite;
}
@keyframes move_text_3{
	14%{
		stroke-dashoffset:80px;
	}
	21%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква H */
.wrap_svg svg .animation .path_4{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_4 3s ease infinite;
}
@keyframes move_text_4{
	21%{
		stroke-dashoffset:80px;
	}
	28%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква U */
.wrap_svg svg .animation .path_5{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_5 3s ease infinite;
}
@keyframes move_text_5{
	28%{
		stroke-dashoffset:80px;
	}
	35%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква R */
.wrap_svg svg .animation .path_6{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_6 3s ease infinite;
}
@keyframes move_text_6{
	35%{
		stroke-dashoffset:80px;
	}
	42%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква T первая часть */
.wrap_svg svg .animation .path_7{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_7 3s ease infinite;
}
@keyframes move_text_7{
	42%{
		stroke-dashoffset:80px;
	}
	49%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква T вторая часть */
.wrap_svg svg .animation .path_8{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_8 3s ease infinite;
}
@keyframes move_text_8{
	49%{
		stroke-dashoffset:80px;
	}
	56%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква S */
.wrap_svg svg .animation .path_9{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_9 3s ease infinite;
}
@keyframes move_text_9{
	56%{
		stroke-dashoffset:80px;
	}
	63%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква E */
.wrap_svg svg .animation .path_10{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_10 3s ease infinite;
}
@keyframes move_text_10{
	63%{
		stroke-dashoffset:80px;
	}
	70%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква V */
.wrap_svg svg .animation .path_11{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_11 3s ease infinite;
}
@keyframes move_text_11{
	70%{
		stroke-dashoffset:80px;
	}
	77%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Точка */
.wrap_svg svg .animation .path_12{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_12 3s ease infinite;
}
@keyframes move_text_12{
	77%{
		stroke-dashoffset:80px;
	}
	84%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква R */
.wrap_svg svg .animation .path_13{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_13 3s ease infinite;
}
@keyframes move_text_13{
	84%{
		stroke-dashoffset:80px;
	}
	91%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}
/* Буква U */
.wrap_svg svg .animation .path_14{
	stroke-dasharray:80px 200px;	/* первое длина пунктира, второе длина отступа */
	stroke-dashoffset:80px;	/* чем больше значение тем больше смещаем назад, в левую сторону, установим значение на ноль */
	animation:move_text_14 3s ease infinite;
}
@keyframes move_text_14{
	91%{
		stroke-dashoffset:80px;
	}
	98%{
		stroke-dashoffset:-80px;
	}
	100%{
		stroke-dashoffset:-80px;
	}
}