html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	max-width: var(--ratio_display);
	/* max-width: 2100px!important; */
	background-color: white;
	font-family: 'Montserrat', sans-serif!important; /* Убедитесь, что скролл не мешает */
}
:root {
	--vh: 100vh;
	--vw: 100vw;
}
.hidden {
	display: none!important;
}

html {
    background-image: url('/staticfiles/img/catalog/background.jpg') !important;
    background-size: cover; /* Это свойство позволяет изображению покрывать всю область */
    background-repeat: no-repeat; /* Это свойство предотвращает повторение изображения */
    background-attachment: fixed; /* Это свойство фиксирует изображение при прокрутке */
}

/* .size_changed{
	max-width: 2100px!important;

} */
 html{
	max-width: 100%;
	/* background-image: none!important; */
	background-image: url('/staticfiles/img/catalog/background.jpg') !important;
	background-position: center;
	background-size: cover; /* Это свойство позволяет изображению покрывать всю область */
	background-repeat: no-repeat; /* Это свойство предотвращает повторение изображения */
	background-attachment: fixed; /* Это свойство фиксирует изображение при прокрутке */
 }
 @media (min-width: 768px) {
	html{
		background-image: url('/staticfiles/img/black.webp') !important;

	}
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
	--index: calc(1vw + 1vh);
	--transition: 1.5s cubic-bezier(.05, .5, 0, 1);
	--ratio_display: calc(100vh*2);
}

body {
	display: flex;
	position: relative;
	background-color: #000;
	color: #fff;
	font-family: 'Montserrat', sans-serif!important;
	overflow: hidden;
	max-width: var(--ratio_display);
	margin-left: auto!important;
	margin-right: auto!important;

}


.main-wrapper{
	background-color: transparent;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center!important; /* Центрирование изображения по горизонтали и вертикали */

}
.street-background{
	background-image: url('/staticfiles/img/street/background_street.webp');
}
.interactive_panels{
	height: 100%;
	width: 100%;
	min-height: 500px;
	position: absolute;
	background-size: cover;
	background-position: bottom;
	display: flex;
	align-items: center;
	justify-content: center;
	scale: 1;
	transform: translateZ(1px);
	pointer-events: none;
	z-index: 999999;
}
@keyframes scaleAnimation {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(0.95);
	}
	100% {
	  transform: scale(1);
	}
  }

.hover_hands{
	animation: scaleAnimation 1s infinite;
	height: 100%;
	width: 100%;
	min-height: 500px;
	position: absolute;
	background-size: cover;
	background-position: center;
	display: none;
	align-items: center;
	justify-content: center;
	scale: 1;
	transform: translateZ(1px);
	pointer-events: none;
	z-index: 999999;
}
@keyframes fadeOutBackground {
    to {
        background-color: black;
    }
}
@keyframes fadeOutBackgroundImage {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}
@keyframes fadeOutScreen {
    0% {
		background-color: none;
        opacity: 1;
    }
	30%{
		background-color: black;
        opacity: 1;
	}
    100% {
		background-color: black;
    }
}
.fade-out {
	opacity: 0!important;
	transition: opacity 2s;
}
.fading_background{
	animation: fadeOutBackground 0.4s forwards;
}
.fading_backgroundImage{
	animation: fadeOutBackgroundImage 0.4s forwards;
}
.fading_screen{
	animation: fadeOutScreen 2s forwards;
}
.first_background{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1000;
}
.logo {
	--logo-size: calc(var(--index) * 7.8);
	width: var(--logo-size);
	height: var(--logo-size);
	background-repeat: no-repeat;
	position: absolute;
	left: calc(51% - calc(var(--logo-size) / 2));
	top: calc(var(--index) * 2.8);
	z-index: 1;
}
.hidden{
	display: none!important;
}
.kino-background{
	background-image: none!important;
	background-color: black;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center!important; /* Центрирование изображения по горизонтали и вертикали */
}
.street_08{
	background-size: cover!important;
}
.back_size{
	background-size: cover!important;
	background-position: top!important;
}
@-webkit-keyframes icon_town_appear {
    from {
       opacity: 0;
      }
      to {
        opacity: 1;
    }
}
@-moz-keyframes icon_town_appear {
    from {
       opacity: 0;
      }
      to {
        opacity: 1;
    }
}
@keyframes icon_town_appear {
    from {
       opacity: 0;
      }
      to {
        opacity: 1;
    }
}
@-webkit-keyframes icon_town_disappear {
    from {
       opacity: 1;
      }
      to {
        opacity: 0;
		display: none;
    }
}
@-moz-keyframes icon_town_disappear {
    from {
       opacity: 1;
      }
      to {
        opacity: 0;
		display: none;
    }
}
@keyframes icon_town_disappear {
    from {
       opacity: 1;
      }
      to {
        opacity: 0;
		display: none;
    }
}
@-webkit-keyframes icon_town_appear_low {

    from {
       opacity: 0;
      }
      to {
        opacity: 1;
    }
}
@-moz-keyframes icon_town_appear_low {
	

    from {
       opacity: 0;
      }
      to {
        opacity: 1;
    }
}
@keyframes icon_town_appear_low {

    from {
       opacity: 0;
      }
      to {
        opacity: 1;
    }
}
@-webkit-keyframes icon_town_disappear_low {

    from {
       opacity: 1;
      }
      to {
        opacity: 0;
		display: none;
    }
}
@-moz-keyframes icon_town_disappear_low {

    from {
       opacity: 1;
      }
      to {
        opacity: 0;
		display: none;
    }
}
@keyframes icon_town_disappear_low {
    from {
       opacity: 1;
      }
      to {
        opacity: 0;
		display: none;
    }
}

@-webkit-keyframes icon_town_moving {
	0% {
		transform: translateY(-0.5rem);
		/* top: -5rem; */
	  }
	
	  50% {
		transform: translateY(0.5rem);
		/* top: -4rem; */
	
	  } 
	  100% {
		transform: translateY(-0.5rem);
		/* top: -5rem; */
	  }
}
@-moz-keyframes icon_town_moving {
	0% {
		transform: translateY(-0.5rem);
		/* top: -5rem; */
	  }
	
	  50% {
		transform: translateY(0.5rem);
		/* top: -4rem; */	
	  } 
	  100% {
		transform: translateY(-0.5rem);
		/* top: -5rem; */
	  }
}
@keyframes icon_town_moving {
	0% {
		/* top: -5rem; */
		transform: translateY(-0.5rem);
	  }
	
	  50% {
		/* top: -4rem; */
		transform: translateY(0.5rem);
	
	  } 
	  100% {
		/* top: -5rem; */
		transform: translateY(-0.5rem);
	  }
}

@-webkit-keyframes icon_town_moving_appear {
	0% {
		transform: translateY(5rem);
	  }
	
	  50% {
		transform: translateY(0.5rem);
	
	  } 
	  100% {
		transform: translateY(-0.5rem);
	  }
}
@-moz-keyframes icon_town_moving_appear {
	0% {
		transform: translateY(5rem);
	  }
	
	  50% {
		transform: translateY(0.5rem);
	
	  } 
	  100% {
		transform: translateY(-0.5rem);
	  }
}
@keyframes icon_town_moving_appear {
	0% {
		transform: translateY(5rem);
	  }
	
	  50% {
		transform: translateY(0.5rem);
	
	  } 
	  100% {
		transform: translateY(-0.5rem);
	  }
}
.black-background{
	background-color: black;
	background-image: none!important;
}
.layer_for_min100px_92to96 video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
}
.layer_for_min150px_92to100 video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;

}
.layer_for_min100px_92to96_text video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
}
.layer_for_min100px video{
    display: flex;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
    z-index: 9999!important;
	background-color: transparent !important;
}
.width96_static video{
    display: flex;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
    z-index: 9999!important;
	background-color: transparent !important;
}
.layer_for_min100px img{
    display: flex;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
    z-index: 9999!important;
}
.display_div {
	width: 100%;
	height: auto;
	overflow: visible;
	inset: 0!important;
	scale: 1!important;
}
.car2_div {
	width: 100%;
	height: auto;
	overflow: visible;
	inset: 0!important;
	scale: 1!important;
}
.background_display {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-image: url('/staticfiles/img/street/display-2.webp');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.text_overlay_spinner {
	position: fixed;
	top: 40%;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	color: rgb(66, 66, 66)!important;
	font-size: 0.9rem;
	text-align: center;
	z-index: 9999;
}
.spinner_button {
	color: rgb(66, 66, 66)!important;
	text-decoration: underline;
	cursor: pointer;
	margin-top: 10px;
	z-index: 10000;
	pointer-events: all;
}
.icon_town_appear_class {
    animation: icon_town_appear 0.7s forwards ease-in-out!important;
    -moz-animation: icon_town_appear 0.7s forwards ease-in-out!important;
    -webkit-animation: icon_town_appear 0.7s forwards ease-in-out!important;
}
.icon_town_disappear_class {
    animation: icon_town_disappear 0.7s forwards ease-in-out!important;
    -moz-animation: icon_town_disappear 0.7s forwards ease-in-out!important;
    -webkit-animation: icon_town_disappear 0.7s forwards ease-in-out!important;
}
.icon_town_appear_class_low {
    animation: icon_town_appear 0.4s forwards ease-in-out!important;
    -moz-animation: icon_town_appear 0.4s forwards ease-in-out!important;
    -webkit-animation: icon_town_appear 0.4s forwards ease-in-out!important;
}
.icon_town_disappear_class_low {
    animation: icon_town_disappear 0.4s forwards ease-in-out!important;
    -moz-animation: icon_town_disappear 0.4s forwards ease-in-out!important;
    -webkit-animation: icon_town_disappear 0.4s forwards ease-in-out!important;
}

.icon_town_moving_class_appear {
    animation: icon_town_moving_appear 1.5s forwards ease-in-out!important;
    -moz-animation: icon_town_moving_appear 1.5s forwards ease-in-out!important;
    -webkit-animation: icon_town_moving_appear 1.5s forwards ease-in-out!important;
}
.layer_for_min100px_animation{
	backface-visibility: hidden;
    transform: translateZ(0);
    will-change: opacity, transform;
}
.layer_for_min100px_animation-50px{
	backface-visibility: hidden;
    transform: translateZ(-50px);
    will-change: opacity, transform;
}

.main_background{
	z-index: -1;
}
.icon_town_moving_class {
    animation: icon_town_moving 1.5s infinite linear;
    -moz-animation: icon_town_moving 1.5s infinite linear;
    -webkit-animation: icon_town_moving 1.5s infinite linear;
}
.main_navbar{
	display: none;
}


.layers {
	perspective: 1000px;
	overflow: hidden;
	-webkit-backface-visibility: hidden;
    backface-visibility: hidden;
	-moz-backface-visibility:hidden;
}


.layers__container {
	height: 100vh;
	min-height: 500px;
	transform-style: preserve-3d;
	transform: rotateX(var(--move-y)) rotateY(var(--move-x));
	will-change: transform;
	transition: transform var(--transition);
}
.layers__item {
	position: absolute;
	inset: -5vw;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	scale: 1;
}

.layer-8, .layer-6, .width92{
	scale: 0.92;
	pointer-events: none;
}

.hero-content1 {
	position: absolute;
	width: 220px;
	height: 120px;
	margin-top: calc(var(--index) * 11.2);
	margin-left: calc(var(--index) * -8.5);
	cursor: pointer;
	}
.hero-content2 {
	position: absolute;
	width: 200px;
	height: 100px;
	margin-top: calc(var(--index) * 2.2);
	margin-left: calc(var(--index) * 2.5);
	margin-right: calc(var(--index) * -6);
	cursor: pointer;
}

.hero-content3 {
	position: absolute;
	width: 220px;
	height: 120px;
	margin-top: calc(var(--index) * 14.2);
	margin-left: calc(var(--index) * 23.5);
	cursor: pointer;
	}
/* .button-start {
	background-color: blue;
	color: chocolate;
	font-family: Arial;
	font-weight: 600;
	text-transform: uppercase;
	font-size: calc(var(--index) * .71);
	letter-spacing: -.02vw;
	padding: calc(var(--index) * 1) calc(var(--index) * 4.25);
	background-color: transparent;
	color: transparent;
	border-radius: 10em;
	border: transparent 3px solid;
	outline: none;
	cursor: pointer;
	margin-top: calc(var(--index) * 2.5);
} */
.hero-content2 .button-start{
	margin-bottom: calc(var(--index) * 4.5);
	margin-top: 0;
}
.layer-4, .layer-5, .layer-6 {
	pointer-events: none;
}
.bottom_text {
	transform: translateY(-100px);
	filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 3));
	pointer-events: none;
	}
#icon_hover1{
	z-index: 9999!important;
	display: none;
	scale: 0.94;
	transform: translateZ(-39px)!important;
}
#icon_hover2{
	z-index: 9999!important;
	display: none;
	scale: 0.94;
	transform: translateZ(-39px)!important;

}
#icon_hover3{
	z-index: 9999!important;
	display: none;
	scale: 0.92;
	transform: translateZ(-39px)!important;

}

.first_background {
	display: flex;
	position: absolute;
	width: 100vw;
	height: 100%;
	inset: 0;
	scale: 1;
    background-color: transparent !important;
	pointer-events: none;
}
@media (max-width: 768px) {
	.first_background {
		width: 100vh;
		}
}
.video_street_begin_parent {
	width: 100%;
    height: 100%;
	z-index: 9999!important;
    align-items: center;
    justify-content: center;
    display: none;
    position: absolute;
    inset: 0vw;
    background-color: transparent !important;
	pointer-events: none;
}
.video_street_begin_parent video{
display: flex;
height: 100%;
width: 100%;
object-fit: cover;
inset: 0vw;
z-index: 9999!important;
background-color: transparent !important;
}
.street_begin_div{
    width: 100%;
    height: 100%;
    overflow: hidden;
	background-color: transparent !important;
}
.video_street_spinner_div {
	display: flex;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background-color: transparent !important;
	align-items: center;
	justify-content: center;
	}

.video_street_spinner_div video{
    display: flex;
    height: 100%;
	height: 100vh!important;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
    z-index: 9999!important;
	background-color: transparent !important;
}


.div_street_end_education {
    height: 100%;
	width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    display: none;
    position: absolute;
    inset: 0vw;
	z-index: 9999!important;
}


.div_street_end_education video{
    display: flex;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
	z-index: 9999!important;

}
.div_street_end_media {
	display: none;
    height: 100%;
	width: 100%;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    display: none;
    position: absolute;
    inset: 0vw;
	z-index: 9999!important;
}


.div_street_end_media video{
    display: flex;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
	z-index: 9999!important;

}
.div_street_end_business {
	display: none;
    height: 100%;
	width: 100%;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0vw;
	z-index: 9999!important;
}


.div_street_end_business video{
    display: flex;
    inset: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
	z-index: 9999!important;

}
#background_fon{
	z-index: 1;
	height: 100%;
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0vw;
}
#background_startchoice {
    z-index: 999999999 !important;
	height: 100vh;
    width: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    background-size: cover; /* чтобы фоновое изображение покрывало весь элемент */
    background-position: center; /* чтобы фоновое изображение было центрировано */
    background-repeat: no-repeat; /* чтобы фоновое изображение не повторялось */
	transition: opacity 2s ease-in-out;
}
.button-container {
	position: absolute;
	bottom: 5%; /* Нижняя треть экрана */
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px; /* Расстояние между кнопками */
}

/* Стили кнопок */
.custom-button {
	flex: 1;
	height: 60px; /* Уменьшенная высота кнопок */
	width: 150px; /* Уменьшенная ширина кнопок */
	border: 2px solid white; /* Толщина контура кнопки */
	border-radius: 15px;
	background-color: transparent;
	position: relative;
	color: white;
	text-align: center;
	line-height: 60px; /* Центрирование текста по вертикали */
	transition: all 0.3s ease;
	margin: 6px;
	font-size: 18px;
}
.custom-button_begin {
	flex: 1;
	height: 50px;
	width: 200px;
	border: 2px solid white;
	border-radius: 15px;
	position: relative;
	color: white;
	text-align: center;
	line-height: 50px;
	transition: all 0.3s ease;
	margin: 6px;
	font-size: 18px;
	background-color: #222421;
	color: white;
	}
.custom-button::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 10%;
	width: 10%; /* Исходная ширина зеленой линии */
	height: 2px; /* Толщина зеленой линии */
	background-color: #01EA75;
	transition: width 0.3s ease;
}

.custom-button:hover::before {
	width: 80%; /* Ширина зеленой линии при наведении */
}

.custom-button:hover {
	background-color: rgba(255, 255, 255, 1);
	color: #000;
}

.btn-green {
	background-color: #01EA75!important;
	color: white!important;
	border: none!important;
}

.green_color {
	color: #01EA75!important;
}

.text-secondary {
	color: white !important;
}

.custom-button.btn-outline-primary.active, .custom-button.btn-outline-primary.dropdown-toggle.show {
	color: #000000;
	background-color: #ffffff;
	border-color: #ffffff;
}

.custom-button.btn.btn-primary, .custom-button.btn.btn-outline-primary:hover {
	color: #000000;
}
.hidden_startchoise {
	display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out; /* Анимация изменения прозрачности */
}
.visible_startchoise {
	display: flex;
	opacity: 1;
}

.prev_page {
    display: flex;
    --logo-size: calc(var(--index) * 5);
    width: calc(var(--logo-size)*1.3);
    height: calc(var(--logo-size)/1.7);
    background-repeat: no-repeat;
    position: absolute;
    left: calc(15% - calc(var(--logo-size) / 2));
    bottom: calc(var(--index)*2);
    z-index: 1;
    pointer-events: all;
    cursor: pointer;
    background-size: contain;
}
.ring_button {
    display: flex;
    --logo-size: calc(var(--index) * 5);
    width: 10rem;
    height: 2.5rem;
    background-repeat: no-repeat;
    position: absolute;
    right: calc(15% - calc(var(--logo-size) / 2));
    top: calc(var(--index)*4);
    z-index: 1;
    pointer-events: all;
    cursor: pointer;
    background-size: contain;
}
.mail_background{
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    flex-wrap: nowrap;
    visibility: visible;
    overflow: hidden;
    position: absolute;
    background: rgba(0,0,0,0.8);
    transform: translateZ(3px);
    left: 0; right: 0; margin: auto;
    opacity: 1;
	z-index: 99999999999!important;
}
.mail_div{
    width: 431px;
    height: 259px;
    background-color: aqua;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

        /* Стиль для формы */
        .mail_background .form-container {
            background-color: #fff;
            padding: 20px;
            border-radius: 8px;
            position: relative;
            width: 300px;
        }

        /* Стиль для кнопки закрытия */
        .mail_background .close-button {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 20px;
            color: #333;
            background: none;
            border: none;
            cursor: pointer;
        }

        /* Стиль для заголовка */
        .mail_background .form-container h2 {
            margin: 0 0 20px;
            font-size: 18px;
        }
		.mail_background h1, h2, button {
			font-family: 'Europa', sans-serif!important;
		}
        /* Стиль для полей ввода */
        .mail_background .form-container input {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
			border: 1px solid;
			border-color: #45a049;
			padding-left: 20px;
			border-radius: 5px;
        }
        .mail_background input:focus:not([readonly]) {
            box-shadow: none;
            outline: none;
            }
        /* Стиль для кнопки отправки */
        .mail_background .form-container button {
            padding: 8px;
			padding-bottom: 2px;
			padding-top: 2px;
            background-color: #45a049;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }

        .form-container button:hover {
            background-color: #295b2b;
        }

.icon1svg, .icon2svg, .icon3svg{
	filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 3));
}


.layer-z10px {
	transform: translateZ(10px);
}
.layer-z20px {
	transform: translateZ(20px);
}
.layer-z30px {
	transform: translateZ(30px);
}
.layer-z40px {
	transform: translateZ(40px);
}
.layer-z50px {
	transform: translateZ(50px);
}
.layer-z60px {
	transform: translateZ(60px);
}
.layer-z70px {
	transform: translateZ(70px);
}
.layer-z80px {
	transform: translateZ(80px);
}
.layer-z90px {
	transform: translateZ(90px);
}
.layer-z100px {
	transform: translateZ(100px);
}
.layer-z110px {
	transform: translateZ(110px);
}
.layer-z120px {
	transform: translateZ(120px);
}
.layer-z130px {
	transform: translateZ(130px);
}
.layer-z140px {
	transform: translateZ(140px);
}
.layer-z150px {
	transform: translateZ(150px);
}
.layer-z160px {
	transform: translateZ(160px);
}
.layer-z170px {
	transform: translateZ(170px);
}
.layer-z180px {
	transform: translateZ(180px);
}
.layer-z190px {
	transform: translateZ(190px);
}
.layer-z200px {
	transform: translateZ(200px);
}
.layer-z210px {
	transform: translateZ(210px);
}
.layer-z220px {
	transform: translateZ(220px);
}
.layer-z230px {
	transform: translateZ(230px);
}
.layer-z240px {
	transform: translateZ(240px);
}
.layer-z250px {
	transform: translateZ(250px);
}
.layer-z260px {
	transform: translateZ(260px);
}
.layer-z270px {
	transform: translateZ(270px);
}
.layer-z280px {
	transform: translateZ(280px);
}
.layer-z290px {
	transform: translateZ(290px);
}
.layer-z300px {
	transform: translateZ(300px);
}

.layer-z-10px {
	transform: translateZ(-10px);
}
.layer-z-20px {
	transform: translateZ(-20px);
}
.layer-z-30px {
	transform: translateZ(-30px);
}
.layer-z-40px {
	transform: translateZ(-40px);
}
.layer-z-50px {
	transform: translateZ(-50px);
}
.layer-z-60px {
	transform: translateZ(-60px);
}
.layer-z-70px {
	transform: translateZ(-70px);
}
.layer-z-80px {
	transform: translateZ(-80px);
}
.layer-z-90px {
	transform: translateZ(-90px);
}
.layer-z-100px {
	transform: translateZ(-100px);
}

@keyframes z-100px_92to96key{
	from {
		scale: 0.92;
	}
	to {
		scale: 0.96!important;
	}
}

.z-100px_92to96{
	animation: z-100px_92to96key 1.2s forwards;
}
.layer-z-110px {
	transform: translateZ(-110px);
}
.layer-z-120px {
	transform: translateZ(-120px);
}
.layer-z-130px {
	transform: translateZ(-130px);
}
.layer-z-140px {
	transform: translateZ(-140px);
}
.layer-z-150px {
	transform: translateZ(-150px);
}
.layer-z-160px {
	transform: translateZ(-160px);
}
.layer-z-170px {
	transform: translateZ(-170px);
}
.layer-z-180px {
	transform: translateZ(-180px);
}
.layer-z-190px {
	transform: translateZ(-190px);
}
.layer-z-200px {
	transform: translateZ(-200px);
}
.layer-z-210px {
	transform: translateZ(-210px);
}
.layer-z-220px {
	transform: translateZ(-220px);
}
.layer-z-230px {
	transform: translateZ(-230px);
}
.layer-z-240px {
	transform: translateZ(-240px);
}
.layer-z-250px {
	transform: translateZ(-250px);
}
.layer-z-260px {
	transform: translateZ(-260px);
}
.layer-z-270px {
	transform: translateZ(-270px);
}
.layer-z-280px {
	transform: translateZ(-280px);
}
.layer-z-290px {
	transform: translateZ(-290px);
}
.layer-z-300px {
	transform: translateZ(-300px);
}
.scale0-5{
	scale: 0.5;
}
.scale0-6{
	scale: 0.6;
}
.scale0-7{
	scale: 0.7;
}
.scale0-8{
	scale: 0.8;
}
.scale0-9{
	scale: 0.9;
}
.scale1-0{
	scale: 1.0;
}
.scale1-1{
	scale: 1.1;
}
.scale1-2{
	scale: 1.2;
}
.scale1-3{
	scale: 1.3;
}
.scale1-4{
	scale: 1.4;
}
.scale1-5{
	scale: 1.5;
}
.pointer_events_none{
	pointer-events: none;
}
.text_street_animation{
	opacity: 0;
}
@keyframes slideIn_obrazovanie {
	from {
		transform: translate(-500px, 200px);
		opacity: 1;
		scale: 1;
	}
	to {
		transform: translate(0, 0);
		opacity: 1;
		scale:0.9;
	}
}
@keyframes ZIn_obrazovanie {
	from{
		scale: 0.9;
	}
	to {
		transform: translateZ(-40px);
		scale: 0.93;
	}
}
.text_street_animation_slide_obrazovanie{
	animation: slideIn_obrazovanie 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
    -moz-animation: slideIn_obrazovanie 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
    -webkit-animation: slideIn_obrazovanie 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
}
@keyframes slideIn_razvlechenie {
    from {
        transform: translate(400px,50px);
		opacity: 1;
		scale:1;
    }
    to {
        transform: translate(0, 0);
		opacity: 1;
		scale:0.9;
    }
}
.text_street_animation_slide_razvlechenie{
	animation: slideIn_razvlechenie 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
    -moz-animation: slideIn_razvlechenie 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
    -webkit-animation: slideIn_razvlechenie 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
}
@keyframes slideIn_business {
    from {
        transform: translate(600px,200px);
		opacity: 1;
		scale:1;
    }
    to {
        transform: translate(0, 0);
		opacity: 1;
		scale:0.9;
    }
}
.text_street_animation_slide_business{
	animation: slideIn_business 1.2s forwards 0.4s, ZIn_obrazovanie 1s forwards 1.6s;
}

.hover_button_business{
	opacity: 0;
	pointer-events: none;
	display: flex;
	z-index: 9999!important;
}
.hover_button_media{
	opacity: 0;
	pointer-events: none;
	display: flex;
	z-index: 9999!important;

}
.hover_button_education{
	opacity: 0;
	pointer-events: none;
	display: flex;
	z-index: 9999!important;

}

.width110{
	width: 110%;
	scale: 1;
	position: absolute;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}
.width120{
	width: 120%;
	scale: 1;
	position: absolute;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

@keyframes z-20px_key {
    to {
        transform: translateZ(-20px);
		scale: 1.01;
    }
}
.z-20px {
	animation: z-20px_key 5s forwards;
    -moz-animation: z-20px_key 5s forwards;
    -webkit-animation: z-20px_key 5s forwards;
}
@keyframes z-50px_key {
    to {
        transform: translateZ(-50px);
		scale: 1.02;

    }
}
.z-50px {
	animation: z-50px_key 5s forwards;
    -moz-animation: z-50px_key 5s forwards;
    -webkit-animation: z-50px_key 5s forwards;
}
@keyframes z-100px_key {
    to {
        transform: translateZ(-100px);
		scale: 1.05;
    }
}
@keyframes z-100px_yandex_key {
    to {
        transform: translateX(-50%) translateY(-50%) translateZ(-100px) scale(1.05);
    }
}
.z-100px {
	animation: z-100px_key 5s forwards;
    -moz-animation: z-100px_key 5s forwards;
    -webkit-animation: z-100px_key 5s forwards;
}
.z-100px_yandex {
    animation: z-100px_yandex_key 5s forwards;
    -moz-animation: z-100px_yandex_key 5s forwards;
    -webkit-animation: z-100px_yandex_key 5s forwards;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
}
@keyframes z-100px_key_screen {
	from{
		scale: 1;
        transform: translateZ(0px);
	}
    to {
        transform: translateZ(-100px);
		scale: 0.95!important;
    }
}
.z-100px_screen {
	animation: z-100px_key_screen 5s forwards;
    -moz-animation: z-100px_key_screen 5s forwards;
    -webkit-animation: z-100px_key_screen 5s forwards;
}

@keyframes z-150px_yandex_key {
    to {
        transform: translateX(-50%) translateY(-50%) translateZ(-150px) scale(1.1);
    }
}
@keyframes z-150px_key {
    to {
        transform: translateZ(-150px);
		scale: 1.1;
    }
}
.z-150px {
	animation: z-150px_key 3s forwards;
    -moz-animation: z-150px_key 3s forwards;
    -webkit-animation: z-150px_key 3s forwards;
}
.z-150px_yandex {
    animation: z-150px_yandex_key 5s forwards;
    -moz-animation: z-150px_yandex_key 5s forwards;
    -webkit-animation: z-150px_yandex_key 5s forwards;
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
}
@keyframes z-200px_key {
    to {
        transform: translateZ(-200px);
		scale: 1.2;
    }
}

.layer_for_min150px_92to96 video{
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
}
.layer_for_min150px video{
    display: flex;
    height: 100%;
    width: 100%;
    object-fit: cover;
    inset: 0vw;
    z-index: 9999!important;
	background-color: transparent !important;
}

@keyframes z-150px_92to96key{
	from {
		scale: 0.92;
	}
	to {
		scale: 0.96!important;
	}
}
@keyframes z-150px_92to100key{
	from {
		scale: 0.92;
	}
	to {
		scale: 1!important;
	}
}

@keyframes z-150px_key_screen {
	from{
		scale: 1;
        transform: translateZ(0px);
	}
    to {
        transform: translateZ(-150px);
		scale: 0.95!important;
    }
}
.z-150px_screen {
	animation: z-150px_key_screen 5s forwards;
    -moz-animation: z-150px_key_screen 5s forwards;
    -webkit-animation: z-150px_key_screen 5s forwards;
}

.z-200px {
	animation: z-200px_key 2s forwards;
    -moz-animation: z-200px_key 2s forwards;
    -webkit-animation: z-200px_key 2s forwards;
}
@keyframes z20px_key {
    to {
        transform: translateZ(20px);
    }
}
.z20px {
	animation: z20px_key 5s forwards;
    -moz-animation: z20px_key 5s forwards;
    -webkit-animation: z20px_key 5s forwards;
}
@keyframes z50px_key {
    to {
        transform: translateZ(50px);
    }
}
.z50px {
	animation: z50px_key 5s forwards;
    -moz-animation: z50px_key 5s forwards;
    -webkit-animation: z50px_key 5s forwards;
}
@keyframes z100px_key {
    to {
        transform: translateZ(100px);
    }
}
.z100px {
	animation: z100px_key 5s forwards;
    -moz-animation: z100px_key 5s forwards;
    -webkit-animation: z100px_key 5s forwards;
}
@keyframes width96_key {
	from {
		scale: 0.92;
	}
	to {
		scale: 0.96;
		transform: translateZ(-100px);
	}
}

@keyframes width100_from150px_key {
	from {
		scale: 0.92;
	}
	to {
		scale: 1;
		transform: translateZ(-150px);
	}
}

@keyframes width96_3s_key {
	from {
		scale: 0.92;
	}
	to {
		scale: 0.96;
	}
}
.width96 {
	animation: width96_key 5s forwards;
    -moz-animation: width96_key 5s forwards;
    -webkit-animation: width96_key 5s forwards;
}
.width100_from150px {
	animation: width100_from150px_key 0.1s forwards;
    -moz-animation: width100_from150px_key 0.1s forwards;
    -webkit-animation: width100_from150px_key 0.1s forwards;
}
.width96_3sec {
	animation: width96_3s_key 3s forwards;
    -moz-animation: width96_3s_key 3s forwards;
    -webkit-animation: width96_3s_key 3s forwards;
}

.width96_static {
	scale: 0.96;
	transform: translateZ(-100px);
}

#people {
	transform: translateZ(-100px);
}
.width96_static_no_animation{
	scale: 0.96;
	transform: translateZ(0px);
}

/* #car1{
	right: 1px;
} */
.education-background{
	background-image: url('/staticfiles/img/education/background_education_begin.webp')!important;
}
@media (max-width: 768px) {
	.education-background{
		background-image: url('/staticfiles/img/mobile/education/background_education_begin.webp')!important;
	}
}
.media-background{
	background-image: url('/staticfiles/img/media/background_media_begin.webp')!important;
}
@media (max-width: 768px) {
	.media-background{
		background-image: url('/staticfiles/img/mobile/media/background_media_begin.webp')!important;
	}
}
.business-background{
    background-image: url('/staticfiles/img/business/background_business_begin.webp')!important;
}
@media (max-width: 768px) {
	.ring_button{
		display: none!important;
	}
	.business-background{
		background-image: url('/staticfiles/img/mobile/business/background_business_begin.webp')!important;
	}
	.background_education_begin{
		background-image: url('/staticfiles/img/mobile/education/background_education_begin.webp')!important;
	}
	.background_media_begin{
		background-image: url('/staticfiles/img/mobile/media/background_media_begin.webp')!important;
	}
	.background_business_begin{
		background-image: url('/staticfiles/img/mobile/business/background_business_begin.webp')!important;
	}
	.background_street_begin{
		background-image: url('/staticfiles/img/mobile/street/background_street_begin.webp')!important;
	}
	.street_07-2{
		background-image: url('/staticfiles/img/mobile/street/01_улица_07-2.webp')!important;
	}
	.street_06-2{
		background-image: url('/staticfiles/img/mobile/street/01_улица_06-2.webp')!important;
	}
	.street_05-3{
		background-image: url('/staticfiles/img/mobile/street/01_улица_05-3.webp')!important;
	}
	.street_05-2_transparent{
		background-image: url('/staticfiles/img/mobile/street/01_улица_05-2_transparent.webp')!important;
	}
	.street_08{
		background-image: url('/staticfiles/img/mobile/street/01_улица_08.webp')!important;
	}
	.street_02-2{
		background-image: url('/staticfiles/img/mobile/street/01_улица_02-2.webp')!important;
	}
	.street_03-2{
		background-image: url('/staticfiles/img/mobile/street/01_улица_03-2.webp')!important;
	}
	.text_video_img{
		background-image: url('/staticfiles/img/mobile/street/text_video_img.webp')!important;
	}
	.street_02-2{
		background-image: url('/staticfiles/img/mobile/street/01_улица_02-2.webp')!important;
	}
	.icon_hover{
		background-image: url('/staticfiles/img/mobile/street/icon_hover.webp')!important;
	}
	.icon_hover2{
		background-image: url('/staticfiles/img/mobile/street/icon_hover2.webp')!important;
	}
	.icon_hover3{
		background-image: url('/staticfiles/img/mobile/street/icon_hover3.webp')!important;
	}
}

.size_changed{
	max-width: var(--ratio_display);
}

@media (max-width: 768px) {
	:root {
		--ratio_display: calc(100vh*2);
		--ratio_display_rotated: calc(100vw*2)
	}
	body.rotated {
		transform: rotate(90deg);
		width: 100%;
		height: 100%;
		max-height: var(--ratio_display_rotated);
		overflow: hidden!important;
	}
	.rotated{
		transform: rotate(90deg);
		width: 100%;
		height: 100%;
		max-height: var(--ratio_display_rotated);
		overflow: hidden!important;
	}
	html{
		height: 100%;
		overflow: hidden;
	}
	.main-wrapper {
		width: 100%;
		height: 100%;

		/* height: 100vh; */
		overflow: hidden;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	.layers__container {
		height: 100vw!important;
		}
	.size_changed{
		max-width:var(--ratio_display_rotated);
		/* max-width: none!important; */
	}
	.layers__container {
		min-height: 0;
	}
}