@-webkit-keyframes h2{
	0%{left:0}to{left:-247vw}
	}
@keyframes h2{
	0%{left:0}
	to{left:-247vw}}
	
@keyframes blink {
	from { opacity: 1; }
	to { opacity: 0; }}
	
	body,html{
		margin:0;padding:0;overflow:hidden;}
		.level1{
			position:relative;
			
		}
		
		.back{display:none}
		.back.active{display:block;position:fixed;left:0;top:0;right:0;bottom:0;z-index:9;cursor:pointer}
		form,
		form .inner 
		button.again,
		form .inner 
		button.close,
		form .inner 
		button[type=submit]{
			display:flex;
			justify-content:center;
			align-items:center;
			cursor:pointer;
			transition:all .4s ease}
			form,
			form .inner{
				pointer-events:none}
			form{
				position:absolute;
				left:50vw;
				top:50vh;
				overflow:hidden;
				border-radius:1.35vw;
				background:#0129FA;
				transform-origin:center;
				transform:translate(-1.35vw,-1.35vw);
				z-index:10;width:0;height:0}
			form .inner{
				opacity:0;
				transition:all .2s ease;
				padding:20px;
				width:440px;
				height:311px;
				color:#0129FA}
			
			form .inner button.again,
			form .inner button.close,
			form .inner button[type=submit]{
				color:#fff;outline:0;}
			form .inner button.close{
				height:40px;
				text-align:center;
				font-family:Arial,sans-serif;
				background:#000;
				margin:-2% auto 3%;
		
				transform:translateY(0);
				width:40px;
				padding:0;
				font-size:22px;
				border:0}

			form .inner h1{
				text-align:center;
				text-transform:uppercase;
				font-size:20px;
				margin-top:80px}
			form .inner .error{
				background:#5c3f42;
				color:#fff;
				text-align:center;
				margin-bottom:10px;
				margin-top:-5px}
				.level1 .top,
			form .inner label{
				display:flex;
				justify-content:space-between}
			form .inner label{
				margin-bottom:5px;
				font-size:18px;
				flex-wrap:wrap;
				align-items:center}
			form .inner label input,
			form .inner label select,
			form .inner label textarea{
				-moz-box-shadow:0 0 15px #0129FA;
				-webkit-box-shadow:0 0 15px #0129FA;
				box-shadow:0 0 10px #0129FA;
				caret-color:#0129FA;
				color:#0129FA;
				font-family: Lucida Console, System, monospace;
				font-size:13px;
				background:#000000;
				border:0px solid #0129FA;
			
				}
			form .inner label input,
			form .inner label select{
				margin-left:10px;
				color:#0129FA;
				width:280px;
				}
			form .inner label textarea{
				display:block;
				width:100%;
				resize:none;
				overflow:hidden auto;
				margin-top:5px;
				}
			form .inner label select{
				cursor:pointer}
			form .inner button.again,
			form .inner button[type=submit]{
				width:100%;
				padding:10px 15px;
				font-size:11px;
				font-family: Lucida Console, System, monospace;
				border:0px solid #0129FA;
				background:#000000;
				color:#0129FA;
				-moz-box-shadow:0 0 15px #0129FA;
				-webkit-box-shadow:0 0 15px #0129FA;
				box-shadow:0 0 15px #0129FA;
				text-transform:uppercase}
			form .inner button.again:hover,
			form .inner button[type=submit]:hover{background:#000}
			form .inner button.again{margin-top:100px}
			form:hover{
				width:4vw;
				height:4vw;
				border-radius:2vw;
				transform:translate(-2vw,-2vw)}
			form.active{
			position: absolute;
				top: 50%!important;
				left: 50%!important;
				transform: translate(-50%, -50%);
				border:3px solid #0129FA;
				background:#000000;
				color:#0129FA;
				pointer-events:auto;
				width:55%;
				height:50%;
				cursor:default;
				box-shadow:0 0 20vw 5vw #fff;
				transition:all .4s ease;
				}
			form.active .inner{
				display:block;
				pointer-events:auto;
				opacity:1;
				transition:all .4s ease .4s}
			form.active .inner .bubble{
				text-shadow: 1px 1px 5px #0129FA;
				font-size: 13px;
				font-family: Lucida Console, System, monospace;
				color:#0129FA;
				letter-spacing:0.07vw;
				line-height: 15px;
				height: 50px;
				padding: 5% 5%;
			}	
			form.active .inner .contacts{
				text-shadow: 1px 1px 5px #0129FA;
				font-size: 13px;
				font-family: Lucida Console, System, monospace;
				color:#0129FA;
				width:100%;
				display: inline-block;
			}
			form.active .inner .contacts .cont_here{
				-moz-box-shadow:0 0 15px #0129FA;
				-webkit-box-shadow:0 0 15px #0129FA;
				box-shadow:0 0 10px #0129FA;
				caret-color:#0129FA;
				color:#0129FA;
				font-family: Lucida Console, System, monospace;
				font-size:13px;
				background:#000000;
				border:0.1px solid #0129FA;
				width:73%;
			}
			
			form.active .inner .contacts .cont_here:focus{
				outline: none !important;
				-moz-box-shadow:0 0 15px #0129FA;
				-webkit-box-shadow:0 0 15px #0129FA;
				box-shadow:0 0 10px #0129FA;
			}
			
			form.active .inner .cursor .text_here{
				-moz-box-shadow:0 0 15px #0129FA;
				-webkit-box-shadow:0 0 15px #0129FA;
				box-shadow:0 0 10px #0129FA;
				caret-color:#0129FA;
				color:#0129FA;
				font-family: Lucida Console, System, monospace;
				font-size:13px;
				background:#000000;
				border:0.1px solid #0129FA;
				width:100%;
				height:45%;
			}
			form.active .inner .cursor {
				position: relative;
			}
			form.active .inner .cursor	i {
				position: absolute;
				width: 1px;
				height: 20%;
				background-color:#0129FA;
				left: 5px;
				top: 10%;
				animation-name: blink;
				animation-duration: 800ms;
				animation-iteration-count: infinite;
				opacity: 1;
			}
			
			form.active .inner .cursor .text_here:focus{
				outline: none !important;
				-moz-box-shadow:0 0 15px #0129FA;
				-webkit-box-shadow:0 0 15px #0129FA;
				box-shadow:0 0 10px #0129FA;
			}

			form.active .inner .cursor .text_here:focus + i {
				display: none;
}


			
			form.closing,form.move{
				width:2.7vw;height:2.7vw
			    
			}
			form.closing,form.closing:hover{
				border-radius:1.35vw;
				transform:translate(-1.35vw,-1.35vw)
			    
			}
			form.closing{
				pointer-events:none;
			#	transition:all .4s ease .2s
			    
			}
			form.closing:hover{
				width:2.7vw;
				height:2.7vw
			    
			}
			form.move{
				transition:width .4s ease,
				height .4s ease
			    
			}
			.level1{
				font-family:"Times New Roman",sans-serif;
				color:#0129FA;
				display:flex;
				flex-direction:column;
				flex-basis:100vh;
				align-items:stretch;
				height:155vh;}
				
				@media (orientation:portrait){
				    .level1{
				        height:105vh;
				    }
				    .level1 .bottom{margin-bottom:3vw;}
				    .level1 .left-side{
				        margin-bottom:9vw;
				    }
				    form .inner button.close{
				        margin-top:-5vh;
				    }
				    form.active .inner .bubble-1{
				        padding:7px;
				    }
		
				   
				}
			.level1 .top{
				height:calc((100% - 20vw)/2.5);
				flex-basis:calc((100% - 20vw)/2.5);
				flex-grow:1;
				flex-shrink:1;
				align-items:flex-start;
				}
			.level1 .bottom{
			} 
			
			/* Общие стили полос прокрутки */
::-webkit-scrollbar {
    width: 0.1vw; /* Ширина полосы прокрутки */
}

/* Стиль полосы прокрутки */
::-webkit-scrollbar-thumb {
    background-color: #333; /* Цвет полосы прокрутки */
    border-radius: 0.01vw; /* Закругленные углы полосы прокрутки */
}

/* Стиль фона полосы прокрутки */
::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* Цвет фона полосы прокрутки */
}

/* Стиль полосы прокрутки при наведении курсора */
::-webkit-scrollbar-thumb:hover {
    background-color: #f0f0f0; /* Измененный цвет при наведении */
}
			
	@media (max-width:899px){
				.level1 .top{
					padding-left:5px;
		#			box-sizing:border-box
				}
				form.active{
				    height:70%;
				    width:85%;
				    overflow-y:scroll;
				}
	
	}
				.level1 .bottom,
				.level1 .mid,
				.level1 .left-side{
					flex-grow:1;
					flex-shrink:1;
					display:flex}
				

				.level1 .mid{
					height:20vw;
					flex-basis:20vw;
					flex-direction:column;
					cursor:pointer;
					justify-content:center}
				.level1 .mid h1,
				.level1 .mid h2{
					font-weight:400;
					white-space:nowrap}
				.level1 .mid h1{
					margin:-5vw 0 0;
					font-size:12vw;
					letter-spacing:2.21vw}
				.level1 .mid h2{
					font-size:3.15vw;
					letter-spacing:1.07vw;
					margin:0;
					position:relative;
					-webkit-animation:h2 15s linear infinite;
					animation:h2 15s linear infinite}
				.level1 .mid h2.dup{
					transform:translate(247vw,-100%);
					margin-bottom:-2.5vw}
					
	
					
				.level1 .bottom{
					height:calc(((100% - 20vw)/2.5)*1.5);
					flex-basis:calc(((100% - 20vw)/2.5)*1.5);
					align-items:flex-start;
					justify-content:space-between;
					padding-bottom:0px;
					margin-bottom:11%;
		#		margin-bottom:11vw;
					}
				
			@media (max-width:899px){
				    .level1 .bottom{
						padding-left:5px;
		#				box-sizing:border-box}}
				.level1 .col{
					flex-basis:10px;
					flex-grow:1;
					flex-shrink:1;}
				.level1 .col .str{
					font-size:1.1vw;
					position:relative;
					left: 20px;
					overflow:hidden;
					width:100%;
					}
				.level1 .col .str span{		
					position:absolute;
					left:0;
					transform:rotate3d(1,0,0,-90deg);
					transform-origin:top center;
					transition:transform .2s ease;
					text-transform:uppercase}
				.level1 .col .str span.active{
					transform:rotate3d(1,0,0,0)}
				.level1 .col .str span.spent{
					transform-origin:bottom center;
					transform:rotate3d(1,0,0,90deg)}
				@media (max-width:1199px){
					.level1 .col .str{
						font-size:1.3vw}}
				@media (max-width:899px){
					.level1 .col .str{
						font-size:1.8vw}}
				@media (max-width:599px){
					.level1 .col .str{
						font-size:3vw}}
				.level1 .right-side{
					flex-grow:1;
					flex-shrink:1;
					display:flex;
				}
				.level1 .right-side{
					height:calc((100% - 20vw)/2.5);
					flex-basis:calc((100% - 20vw)/2.5);
					flex-grow:1;
					flex-shrink:1;
					align-items:flex-start;
				}

			@media (max-width:899px){
				.level1 .right-side{
				    margin-left:-1vw;
	#				box-sizing:border-box;
				    
				}}
				.level1 .right-side{
					padding-top:0px;
					padding-right:0px;
					transform: rotate(90deg);
					-webkit-transform: rotate(90deg);
					text-align: right;
					position:relative;
					margin-right:0%;
					left: 41%;
					height:5vw;
					flex-basis:20vw;
					flex-direction:column;
                    justify-content:center}
				.level1 .right-side h2{
					font-weight:80;
					white-space:nowrap}
				.level1 .right-side h2{
					font-size:1.35vw;
					letter-spacing:0.5vw;
					margin: 0px;
					position:relative;
					-webkit-animation:h2 35s linear infinite;
					animation:h2 35s linear infinite;
					}
				.level1 .right-side h2.dup1 a{
					cursor: url("pointer.png"), pointer;
					text-decoration: none;
					color: #0129FA;
					}	
				.level1 .right-side h2.dup2 a{
					cursor: url("pointer.png"), pointer;
					text-decoration: none;
					color: #0129FA;
				}						
				.level1 .right-side h2.dup1{
					cursor:pointer;
					animation-direction:reverse;
					transform:translate(1vw,-100%);
				}						
				.level1 .right-side h2.dup2{
					
					cursor:pointer;
					transform:translate(1vw,-100%);
					margin-bottom:5vw;
					-moz-transition: all 1s ease-out;
					-o-transition: all 1s ease-out;
					-webkit-transition: all 1.5s ease-out;
				}
				.level1 .left-side{
					padding-top:0px;
					padding-right:0px;
					transform: rotate(90deg);
					-webkit-transform: rotate(90deg);
					text-align: right;
					position:relative;
					left: -49%;
					height:3vw;
					flex-basis:20vw;
					flex-direction:column;
                    justify-content:center
				}
			
@-webkit-keyframes pacman{
0% {left:0;}to{left:120vw;}
}

#openModal{
	position:relative;
	z-index:2;
	padding-top:0;
	height:2.5vw;
	width:2.5vw;
	
}

.modal {
  display: none;
  position: fixed;
  z-index: 3;
  left: 15%;
  top: 0;
  width: 70%;
  height: 70%;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
}
	@media (max-width:1199px){
	    .modal{
        float:left;
        left:0;
        width:100%;
        height:90%
    }
		}
				@media (max-width:899px){
				    .modal{
        float:left;
        left:0;
        width:100%;
        height:90%;
    }
				}

			    @media (orientation:portrait){
    .modal{
        float:left;
        left:0;
        width:100%;
        height:50%;
    }

    iframe {
    width: 1024px;
    transform: scale(.5);
    transform-origin: 0 0;
    margin-left:-20%;
}

}


.floating-button {
    position: fixed;
    left: 0;
     
    transform: translateY(0); 
    background-color: blue;
    color: white;
    border: none;
    padding: 1vw 1vw;
    text-align: center;
    text-decoration: none;
	border-top-right-radius: 1vw; /* Скругление справа сверху */
    border-bottom-right-radius: 1vw; /* Скругление справа снизу */
    z-index: 1000;
    writing-mode: vertical-rl; /* Вертикальное написание текста */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.7vw; 
}

.floating-button span {
    display: block;
    transform: rotate(180deg); /* Поворот текста, чтобы он был читаем сверху вниз */
}

#button-1{
	top:2vw;
}

#button-2{
	top:29vw;
}

@media (max-width: 600px) {
    .floating-button {
        width: 5vw;; 
        padding: 1vw; 
		top:9vw;
		
    }

    .floating-button span {
        font-size: 3vw; /* Уменьшите размер шрифта на мобильных устройствах */
    }
}