html
{
    margin-left: auto;
    margin-right: auto;
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	word-spacing: 1px;
}
@font-face {
	font-family: "Rooble2";
	font-style: normal;
	font-weight: normal;
	src: url("/fonts/Rooble2.ttf") format("truetype");
} 
.vach{
	font-size: 18px;
}
.internet{
	color: blue;
}
.tel1{
	color: red;
	font-size: 30px;
}
.tel2{
	color: red;
	font-size: 30px;
}
.vach1{
	font-size: 23px;
}
p{
	font-size: 15px;
}
.imgce{
text-align: center;

}
.novost{
    font-size: 18px;
}
.a {
    text-align: center;
	font-family: "Rooble2";
    font-size: 30px;
}
.card {
    display: inline-flex;
    margin-left: 50px;
    margin-top: auto;
    font-size: 30px;
 }
body{

    display: flex;
background: #e7e7e7;
justify-content: center;
}
.poloska{
    text-align: left;
    font-family: "Rooble2";
    font-size: 30px;
}
.poloska1{
    text-align: left;
    font-family: "Rooble2";
    font-size: 20px;
}
.med{
    text-align: center;
    font-size: 30px;
}
.med1{
    text-align: left;
    font-size: 18px;
    font-weight: bold;
}
.med2{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}
li{
    text-align: left;
}

.b{
    font-family: "Rooble2";
    position: absolute;
    max-width: 1178px;
    text-align: justify;
    color: black;
    background: white;
padding: 0 30px 10px 30px;
box-shadow: 2px 2px 15px rgba(0,0, 0, 0.5),
-2px -2px 15px  rgba(0,0, 0, 0.5);
  min-height: 100%;
}
.content {
	padding-bottom: auto;
  }
  .footer {
	font-family: "Rooble2";
	position: absolute;
	left: 0;

	width: 100%;

	color: white;
    background: black;
	box-shadow: 2px 2px 15px rgba(90, 17, 207, 0.5),
-2px -2px 15px  rgba(90, 17, 207, 0.5);
padding: 0 30px 10px 30px;
    text-align: center;
  }
  .sait1
  {
	text-align: justify;
  }
.btn-up {

	position: fixed;

	background-color: #ffffff;

	right: 20px;

	bottom: 0;

	border-top-left-radius: 8px;

	border-top-right-radius: 8px;

	cursor: pointer;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 60px;

	height: 50px;
  }
  
  .btn-up::before {
	content: "";
	width: 40px;
	height: 40px;
	background: transparent no-repeat center center;
	background-size: 100% 100%;
	background-image: url("img/strelka_vverh.png");
  }
  
  .btn-up_hide {
	display: none;
  }
  


form {
    color: black;
font-size: 30px;
text-align: center;

}
a{
	text-decoration: none;
	color: black;
}

button {
    line-height: 40px;
    text-transform: uppercase;
    padding: 0px 14px;
    letter-spacing: 1px;
    transition-duration: 500ms;
    background: white;
    border: none;
    color: black;
    text-align: center;
    display: inline-block;
    font-size: 14px;
    margin: 3px 1px;
    cursor: pointer;
    font-family: "Rooble2";
    font-weight: bold;
}
h3{
	text-align: center;
	font-family: "Rooble2";
}


.but {
    line-height: 30px;
    text-transform: uppercase;
    padding: 0px 1px;
    letter-spacing: 1px;
    transition-duration: 500ms;
    background: white;
    border: none;
    color: black;
    text-align: left;
    display: block;
    font-size: 14px;
    margin: 3px 1px;
    cursor: pointer;
    font-family: "Rooble2";
    font-weight: bold;
}
.but:hover {
    top: -10px;
    box-shadow: 0 2px 0px red;
    background-image: none;
    color: blue;
 }


button:hover {
    top: -10px;
    box-shadow: 0 2px 0px red;
    background-image: none;
    color: blue;
 }
 .ac
 {
    color: black;
    box-shadow: 0 2px 0px red;
 }
 

#slider { 
    position: relative;
	text-align: center;
    top: 10px;
}

#slider{ 
	margin: 0 auto;
}

#slides article{ 
	width: 20%;
	float: left;
}

#slides .image{ 
	width: 500%;
	line-height: 0;
}

#overflow{ 
	width: 100%;
	overflow: hidden;
}

article img{ 
	width: 100%;
}

#desktop:checked ~ #slider{ 
	max-width: 600px; 
}


#switch1:checked ~ #controls label:nth-child(5), 
#switch2:checked ~ #controls label:nth-child(1),
#switch3:checked ~ #controls label:nth-child(2),
#switch4:checked ~ #controls label:nth-child(3),
#switch5:checked ~ #controls label:nth-child(4){
	background: url('img/prev.png') no-repeat; 
	float: left;
	margin: -220 -150 -150 -84px; 
	display: block;
	height: 68px;
	width: 68px;
}


#switch1:checked ~ #controls label:nth-child(2), 
#switch2:checked ~ #controls label:nth-child(3),
#switch3:checked ~ #controls label:nth-child(4),
#switch4:checked ~ #controls label:nth-child(5),
#switch5:checked ~ #controls label:nth-child(1){
	background: url('img/next.png') repeat-y; 
	float: right;
	margin: -220 -84px -150 -150; 
	display: block;
	height: 68px;
	width: 68px;
}

.all{
    width: -100px;
}
.all input{ 
	display: none;
}


#switch1:checked ~ #slides .image{
	margin-left: 0;
}

#switch2:checked ~ #slides .image{
	margin-left: -100%;
}

#switch3:checked ~ #slides .image{
	margin-left: -200%;
}

#switch4:checked ~ #slides .image{
	margin-left: -300%;
}

#switch5:checked ~ #slides .image{
	margin-left: -400%;
}

#controls{ 
	margin: -25% 0 0 0;
	width: 100%;
	height: 20px;
}



#active label{ 
	border-radius: 10px; 
	display: inline-block; 
	width: 15px;
	height: 15px;
	background: #bbb;
}

#active{ 
	margin: 23% 0 0;
	text-align: center;
}

#active label:hover{
	background: #76c8ff;
	border-color: #777 !important; 
}


#switch1:checked ~ #active label:nth-child(1),
#switch2:checked ~ #active label:nth-child(2),
#switch3:checked ~ #active label:nth-child(3),
#switch4:checked ~ #active label:nth-child(4),
#switch5:checked ~ #active label:nth-child(5){
	background: #18a3dd;
	border-color: #18a3dd !important;
}

#slides .image{ 
	transition: all 300ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

#controls label:hover{ 
	opacity: 0.6;
}

#controls label{
	transition: opacity 0.2s ease-out;
}
table {
    border: 1px solid grey;
    margin: auto;
 text-align: center;   
 }

 th {
    border: 1px solid black;
 }

 td {
    border: 1px solid black;
}
.str1 {
	padding: 0 15px;
	font-size: 20px;
	color: white;
    border: none;
    margin: auto;
 text-align: left;   
 }
 .str2 {

	text-indent: -15px;
	padding: 0 15px;

	font-size: 17px;
	color: rgb(251, 255, 32);
    border: none;
 text-align: left;   
 }
 .str3 {

	text-indent: 15px;


    border: none;
 text-align: left;   
 }
.del { display: none; }
.del:not(:checked) + label + * { display: none; }
.del:not(:checked) + label,
.del:checked + label {

display: inline-block;
width: 100%;
color: black;
text-align: center;
font-size: 20px;
background: white;
cursor: pointer;
font-family: "Rooble2";
}


#switchn1:checked ~ #controls label:nth-child(5), 
#switchn2:checked ~ #controls label:nth-child(1),
#switchn3:checked ~ #controls label:nth-child(2),
#switchn4:checked ~ #controls label:nth-child(3),
#switchn5:checked ~ #controls label:nth-child(4){
	background: url('img/prev.png') no-repeat; 
	float: left;
	margin: -78 -150 -150 -84px; 
	display: block;
	height: 68px;
	width: 68px;
}


#switchn1:checked ~ #controls label:nth-child(2), 
#switchn2:checked ~ #controls label:nth-child(3),
#switchn3:checked ~ #controls label:nth-child(4),
#switchn4:checked ~ #controls label:nth-child(5),
#switchn5:checked ~ #controls label:nth-child(1){
	background: url('img/next.png') repeat-y; 
	float: right;
	margin: -78 -84px -150 -150; 
	display: block;
	height: 68px;
	width: 68px;
}

#switchn1:checked ~ #slides .image{
	margin-left: 0;
}

#switchn2:checked ~ #slides .image{
	margin-left: -100%;
}

#switchn3:checked ~ #slides .image{
	margin-left: -200%;
}

#switchn4:checked ~ #slides .image{
	margin-left: -300%;
}

#switchn5:checked ~ #slides .image{
	margin-left: -400%;
}
#switchn1:checked ~ #active label:nth-child(1),
#switchn2:checked ~ #active label:nth-child(2),
#switchn3:checked ~ #active label:nth-child(3),
#switchn4:checked ~ #active label:nth-child(4),
#switchn5:checked ~ #active label:nth-child(5){
	background: #18a3dd;
	border-color: #18a3dd !important;
}

















.criterion {
	font-size: 1.6rem;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 0;
	width: 0;
	transform: translate(-20px, -20px);
  }
  
  .text {
	position: absolute;
	width: 40px;
	line-height: 40px;
	opacity: 0;
	overflow: hidden;
  }
  .text::after {
	z-index: -1;
	content: '';
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 40px;
  }
  .text0 {
	left: -300px;
	top: 0;
	-webkit-animation: text-animation0 1s ease-in-out 1s 1 normal forwards, text2-animation0 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation0 1s ease-in-out 1s 1 normal forwards, text2-animation0 2s ease-in-out 5s 1 normal forwards;
  }
  .text0::after {
	-webkit-animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation0 2s ease-in-out 3s 1 normal forwards;
  }
  .text1 {
	left: -260px;
	top: 0;
	-webkit-animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards, text2-animation1 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation1 1s ease-in-out 1.2s 1 normal forwards, text2-animation1 2s ease-in-out 5s 1 normal forwards;
  }
  .text1::after {
	-webkit-animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation1 2s ease-in-out 3s 1 normal forwards;
  }
  .text2 {
	left: -220px;
	top: 0;
	-webkit-animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards, text2-animation2 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation2 1s ease-in-out 1.4s 1 normal forwards, text2-animation2 2s ease-in-out 5s 1 normal forwards;
  }
  .text2::after {
	-webkit-animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation2 2s ease-in-out 3s 1 normal forwards;
  }
  .text3 {
	left: -180px;
	top: 0;
	-webkit-animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards, text2-animation3 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation3 1s ease-in-out 1.6s 1 normal forwards, text2-animation3 2s ease-in-out 5s 1 normal forwards;
  }
  .text3::after {
	-webkit-animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation3 2s ease-in-out 3s 1 normal forwards;
  }
  .text4 {
	left: -140px;
	top: 0;
	-webkit-animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards, text2-animation4 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation4 1s ease-in-out 1.8s 1 normal forwards, text2-animation4 2s ease-in-out 5s 1 normal forwards;
  }
  .text4::after {
	-webkit-animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation4 2s ease-in-out 3s 1 normal forwards;
  }
  .text5 {
	left: -100px;
	top: 0;
	-webkit-animation: text-animation5 1s ease-in-out 2s 1 normal forwards, text2-animation5 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation5 1s ease-in-out 2s 1 normal forwards, text2-animation5 2s ease-in-out 5s 1 normal forwards;
  }
  .text5::after {
	-webkit-animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation5 2s ease-in-out 3s 1 normal forwards;
  }
  .text6 {
	left: -60px;
	top: 0;
	-webkit-animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards, text2-animation6 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation6 1s ease-in-out 2.2s 1 normal forwards, text2-animation6 2s ease-in-out 5s 1 normal forwards;
  }
  .text6::after {
	-webkit-animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation6 2s ease-in-out 3s 1 normal forwards;
  }
  .text7 {
	left: -20px;
	top: 0;
	-webkit-animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards, text2-animation7 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation7 1s ease-in-out 2.4s 1 normal forwards, text2-animation7 2s ease-in-out 5s 1 normal forwards;
  }
  .text7::after {
	-webkit-animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation7 2s ease-in-out 3s 1 normal forwards;
  }
  .text8 {
	left: 20px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 2.6s 1 normal forwards, text2-animation8 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 2.6s 1 normal forwards, text2-animation8 2s ease-in-out 5s 1 normal forwards;
  }
  .text8::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  .text9 {
	left: 60px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 2.8s 1 normal forwards, text2-animation9 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 2.8s 1 normal forwards, text2-animation9 2s ease-in-out 5s 1 normal forwards;
  }
  .text9::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  .text10 {
	left: 100px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 3.0s 1 normal forwards, text2-animation10 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 3.0s 1 normal forwards, text2-animation10 2s ease-in-out 5s 1 normal forwards;
  }
  .text10::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  .text11 {
	left: 140px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 3.2s 1 normal forwards, text2-animation11 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 3.2s 1 normal forwards, text2-animation11 2s ease-in-out 5s 1 normal forwards;
  }
  .text11::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  .text12 {
	left: 180px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 3.4s 1 normal forwards, text2-animation12 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 3.4s 1 normal forwards, text2-animation12 2s ease-in-out 5s 1 normal forwards;
  }
  .text12::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  .text13 {
	left: 220px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 3.6s 1 normal forwards, text2-animation13 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 3.6s 1 normal forwards, text2-animation13 2s ease-in-out 5s 1 normal forwards;
  }
  .text13::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  .text14 {
	left: 260px;
	top: 0;
	-webkit-animation: text-animation8 1s ease-in-out 3.8s 1 normal forwards, text2-animation14 2s ease-in-out 5s 1 normal forwards;
			animation: text-animation8 1s ease-in-out 3.8s 1 normal forwards, text2-animation14 2s ease-in-out 5s 1 normal forwards;
  }
  .text14::after {
	-webkit-animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
			animation: text-after-animation8 2s ease-in-out 3s 1 normal forwards;
  }
  
  
  @-webkit-keyframes text-animation0 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation0 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation1 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation1 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation2 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation2 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation3 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation3 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation4 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation4 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation5 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation5 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation6 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation6 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation7 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation7 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @-webkit-keyframes text-animation8 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation8 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes text-animation9 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation9 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes text-animation10 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation10 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes text-animation11 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation11 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes text-animation12 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation12 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes text-animation13 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation13 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  @-webkit-keyframes text-animation14 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  @keyframes text-animation14 {
	0% {
	  transform: scale(0, 0);
	  opacity: 0;
	}
	50% {
	  transform: scale(3, 3);
	}
	100% {
	  transform: scale(1, 1);
	  opacity: 1;
	}
  }
  
  
  @-webkit-keyframes text2-animation0 {
	0% {
	  left: -300px;
	  opacity: 1;
	}
	50% {
	  left: -260px;
	  opacity: 0;
	}
	100% {
	  left: -260px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation0 {
	0% {
	  left: -300px;
	  opacity: 1;
	}
	50% {
	  left: -260px;
	  opacity: 0;
	}
	100% {
	  left: -260px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation1 {
	0% {
	  left: -260px;
	  opacity: 1;
	}
	50% {
	  left: -220px;
	  opacity: 0;
	}
	100% {
	  left: -220px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation1 {
	0% {
	  left: -260px;
	  opacity: 1;
	}
	50% {
	  left: -220px;
	  opacity: 0;
	}
	100% {
	  left: -220px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation2 {
	0% {
	  left: -220px;
	  opacity: 1;
	}
	50% {
	  left: -180px;
	  opacity: 0;
	}
	100% {
	  left: -180px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation2 {
	0% {
	  left: -220px;
	  opacity: 1;
	}
	50% {
	  left: -180px;
	  opacity: 0;
	}
	100% {
	  left: -180px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation3 {
	0% {
	  left: -180px;
	  opacity: 1;
	}
	50% {
	  left: -140px;
	  opacity: 0;
	}
	100% {
	  left: -140px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation3 {
	0% {
	  left: -180px;
	  opacity: 1;
	}
	50% {
	  left: -140px;
	  opacity: 0;
	}
	100% {
	  left: -140px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation4 {
	0% {
	  left: -140px;
	  opacity: 1;
	}
	50% {
	  left: -100px;
	  opacity: 0;
	}
	100% {
	  left: -100px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation4 {
	0% {
	  left: -140px;
	  opacity: 1;
	}
	50% {
	  left: -100px;
	  opacity: 0;
	}
	100% {
	  left: -100px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation5 {
	0% {
	  left: -100px;
	  opacity: 1;
	}
	50% {
	  left: -60px;
	  opacity: 0;
	}
	100% {
	  left: -60px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation5 {
	0% {
	  left: -100px;
	  opacity: 1;
	}
	50% {
	  left: -60px;
	  opacity: 0;
	}
	100% {
	  left: -60px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation6 {
	0% {
	  left: -60px;
	  opacity: 1;
	}
	50% {
	  left: -20px;
	  opacity: 0;
	}
	100% {
	  left: -20px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation6 {
	0% {
	  left: -60px;
	  opacity: 1;
	}
	50% {
	  left: -20px;
	  opacity: 0;
	}
	100% {
	  left: -20px;
	  opacity: 0;
	}
  }
  
  @-webkit-keyframes text2-animation7 {
	0% {
	  left: -20px;
	  opacity: 1;
	}
	50% {
	  left: 20px;
	  opacity: 0;
	}
	100% {
	  left: 20px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation7 {
	0% {
	  left: -20px;
	  opacity: 1;
	}
	50% {
	  left: 20px;
	  opacity: 0;
	}
	100% {
	  left: 20px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation8 {
	0% {
	  left: 20px;
	  opacity: 1;
	}
	50% {
	  left: 60px;
	  opacity: 0;
	}
	100% {
	  left: 60px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation8 {
	0% {
	  left: 20px;
	  opacity: 1;
	}
	50% {
	  left: 60px;
	  opacity: 0;
	}
	100% {
	  left: 60px;
	  opacity: 0;
	}
  }
  
  @-webkit-keyframes text2-animation9 {
	0% {
	  left: 60px;
	  opacity: 1;
	}
	50% {
	  left: 100px;
	  opacity: 0;
	}
	100% {
	  left: 100px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation9 {
	0% {
	  left: 60px;
	  opacity: 1;
	}
	50% {
	  left: 100px;
	  opacity: 0;
	}
	100% {
	  left: 100px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation10 {
	0% {
	  left: 100px;
	  opacity: 1;
	}
	50% {
	  left: 140px;
	  opacity: 0;
	}
	100% {
	  left: 140px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation10 {
	0% {
	  left: 100px;
	  opacity: 1;
	}
	50% {
	  left: 140px;
	  opacity: 0;
	}
	100% {
	  left: 140px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation11 {
	0% {
	  left: 140px;
	  opacity: 1;
	}
	50% {
	  left: 180px;
	  opacity: 0;
	}
	100% {
	  left: 180px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation11 {
	0% {
	  left: 140px;
	  opacity: 1;
	}
	50% {
	  left: 180px;
	  opacity: 0;
	}
	100% {
	  left: 180px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation12 {
	0% {
	  left: 180px;
	  opacity: 1;
	}
	50% {
	  left: 220px;
	  opacity: 0;
	}
	100% {
	  left: 220px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation12 {
	0% {
	  left: 180px;
	  opacity: 1;
	}
	50% {
	  left: 220px;
	  opacity: 0;
	}
	100% {
	  left: 220px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation13 {
	0% {
	  left: 220px;
	  opacity: 1;
	}
	50% {
	  left: 260px;
	  opacity: 0;
	}
	100% {
	  left: 260px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation13 {
	0% {
	  left: 220px;
	  opacity: 1;
	}
	50% {
	  left: 260px;
	  opacity: 0;
	}
	100% {
	  left: 260px;
	  opacity: 0;
	}
  }
  @-webkit-keyframes text2-animation14 {
	0% {
	  left: 260px;
	  opacity: 1;
	}
	50% {
	  left: 300px;
	  opacity: 0;
	}
	100% {
	  left: 300px;
	  opacity: 0;
	}
  }
  @keyframes text2-animation14 {
	0% {
	  left: 260px;
	  opacity: 1;
	}
	50% {
	  left: 300px;
	  opacity: 0;
	}
	100% {
	  left: 300px;
	  opacity: 0;
	}
  }
  
  /*
  * frame
  */
  .frame {
	position: absolute;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	opacity: 0;
  }
  .frame0 {
	left: -300px;
	top: 0;
	-webkit-animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
			animation: frame-animation0 1s ease-in-out 0ms 1 normal forwards;
	background-color: #eb4747;
  }
  .frame1 {
	left: -260px;
	top: 0;
	-webkit-animation: frame-animation1 1s ease-in-out 250ms 1 normal forwards;
			animation: frame-animation1 1s ease-in-out 250ms 1 normal forwards;
	background-color: #ebc247;
  }
  .frame2 {
	left: -220px;
	top: 0;
	-webkit-animation: frame-animation2 1s ease-in-out 500ms 1 normal forwards;
			animation: frame-animation2 1s ease-in-out 500ms 1 normal forwards;
	background-color: #99eb47;
  }
  .frame3 {
	left: -180px;
	top: 0;
	-webkit-animation: frame-animation3 1s ease-in-out 750ms 1 normal forwards;
			animation: frame-animation3 1s ease-in-out 750ms 1 normal forwards;
	background-color: #47eb70;
  }
  .frame4 {
	left: -140px;
	top: 0;
	-webkit-animation: frame-animation4 1s ease-in-out 1000ms 1 normal forwards;
			animation: frame-animation4 1s ease-in-out 1000ms 1 normal forwards;
	background-color: #47ebeb;
  }
  .frame5 {
	left: -100px;
	top: 0;
	-webkit-animation: frame-animation5 1s ease-in-out 1250ms 1 normal forwards;
			animation: frame-animation5 1s ease-in-out 1250ms 1 normal forwards;
	background-color: #4770eb;
  }
  .frame6 {
	left: -60px;
	top: 0;
	-webkit-animation: frame-animation6 1s ease-in-out 1500ms 1 normal forwards;
			animation: frame-animation6 1s ease-in-out 1500ms 1 normal forwards;
	background-color: #9947eb;
  }
  .frame7 {
	left: -20px;
	top: 0;
	-webkit-animation: frame-animation7 1s ease-in-out 1750ms 1 normal forwards;
			animation: frame-animation7 1s ease-in-out 1750ms 1 normal forwards;
	background-color: #eb47c2;
  }
  .frame8 {
	left: 20px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 2000ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 2000ms 1 normal forwards;
	background-color: #d4c324;
  }
  .frame9 {
	left: 60px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 2250ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 2250ms 1 normal forwards;
	background-color: #23b63b;
  }
  .frame10 {
	left: 100px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 2500ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 2500ms 1 normal forwards;
	background-color: #18798a;
  }
  .frame11 {
	left: 140px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 2750ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 2750ms 1 normal forwards;
	background-color: #271079;
  }
  .frame12 {
	left: 180px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 3000ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 3000ms 1 normal forwards;
	background-color: #8e1cc4;
  }
  .frame13 {
	left: 220px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 3250ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 3250ms 1 normal forwards;
	background-color: #598b20;
  }
  .frame14 {
	left: 2600px;
	top: 0;
	-webkit-animation: frame-animation8 1s ease-in-out 3500ms 1 normal forwards;
			animation: frame-animation8 1s ease-in-out 3500ms 1 normal forwards;
	background-color: #301985;
  }
  
  @-webkit-keyframes frame-animation1 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation1 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation2 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation2 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation3 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation3 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation4 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation4 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation5 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation5 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation6 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation6 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation7 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation7 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation8 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation8 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation9 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation9 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation10 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation10 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation11 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation11 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation12 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation12 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation13 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation13 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @-webkit-keyframes frame-animation14 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  @keyframes frame-animation14 {
	0% {
	  transform: translateY(-1000px);
	  opacity: 1;
	}
	50% {
	  opacity: 0.8;
	}
	100% {
	  transform: translateY(0);
	  opacity: 0;
	}
  }
  
  #menu__toggle {
	opacity: 0;
	
  }
  #menu__toggle:checked + .menu__btn > span {
	transform: rotate(90deg);
	
  }
  #menu__toggle:checked + .menu__btn > span::before {
	top: 0;
	transform: rotate(0deg);
	background-color: #c91616;
  }
  #menu__toggle:checked + .menu__btn > span::after {
	top: 0;
	transform: rotate(90deg);
	background-color: #c91616;
  }
  #menu__toggle:checked ~ .menu__box {
	left: 0 !important;
	
  }
  .menu__btn {
	position: fixed;
	top: 20px;
	left: 20px;
	width: 26px;
	height: 26px;
	cursor: pointer;
	z-index: 1;
  }
  .menu__btn > span,
  .menu__btn > span::before,
  .menu__btn > span::after {
	display: block;
	position: absolute;
	width: 100%;
	height: 4px;
	background-color: #2816c9;
	transition-duration: .40s;
  }
  .menu__btn > span::before {
	content: '';

	top: -8px;
  }
  .menu__btn > span::after {
	content: '';

	top: 8px;
  }
  .menu__box {
	display: block;
position: absolute;
	top: 0;
	left: -100%;
	width: 20%;
	height: 100%;
	margin: 0;
	padding: 80px 0;
	list-style: none;
	background-color: #ECEFF1;
	box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
	transition-duration: .25s;

  }

  .menu__item {
	display: block;
	padding: 8px 8px;
	color: #333;
	font-size: 14px;
	font-weight: 600;
	transition-duration: .25s;
	text-transform: uppercase;
	font-weight: 900;
	text-align: left;
  }
  .menu1__item1 {
	display: block;
	padding: 8px 8px;
	color: #333;
	background-color: #CFD8DC;
	font-size: 14px;
	font-weight: 600;
	transition-duration: .25s;
	text-transform: uppercase;
	font-weight: 900;
	text-align: left;
  }
  .menu__item:hover {
	background-color: #CFD8DC;
  }
.vyb{
	color: blue;
}
a:hover{
	color: red;
}

nav {
    margin: 40px 0;
    background-color: #ffffff;
	text-align: center;
}


nav ul {
    padding:0;
    margin:0;
    list-style: none;
    position: relative;
    }


nav ul li {
    margin: 0px -7px 0 0;
    display:inline-block;
    background-color: #ffffff;
    }


	nav a {
		display:block;
		padding:0 10px;
		color:rgb(0, 0, 0);

		text-decoration:none;
		line-height: 30px;
		text-transform: uppercase;
		padding: 0px 14px;
		letter-spacing: 1px;
		transition-duration: 1500ms;
		background: white;
		border: none;
		text-align: center;
		font-size: 14px;
		cursor: pointer;
		font-family: "Rooble2";
		font-weight: bold;
	}


nav a:hover {
    top: -10px;
    box-shadow: 0 2px 0px red;
    background-image: none;
    color: blue;
}
.but:hover {
    top: -10px;
    box-shadow: 0 2px 0px red;
    background-image: none;
    color: blue;
 }

 nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
}


nav ul li:hover > ul {
    display:inherit;
}


nav ul ul li {
    min-width:300px;
    display:list-item;
    position: relative;
}