/* Настройки шаблона */
@font-face {
	font-family: "Montserrat-Regular";
	src: url("/templates/rostsayt-4/fonts/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
	font-family: "Montserrat-Medium";
	src: url("/templates/rostsayt-4/fonts/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
    font-family: "Montserrat-SemiBold";
    src: url("/templates/rostsayt-4/fonts/Montserrat-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Unbounded-SemiBold";
	src: url("/templates/rostsayt-4/fonts/Unbounded-SemiBold.ttf") format("truetype");
}

@font-face {
	font-family: "Unbounded-ExtraBold";
	src: url("/templates/rostsayt-4/fonts/Unbounded-ExtraBold.ttf") format("truetype");
}

:root, body {font-size: 10px;}
@media screen and (min-width: 576px) {
	:root, body {font-size: 12px;}
}
@media screen and (min-width: 768px) {
	:root, body {font-size: 12px;}
}
@media screen and (min-width: 992px) {
	:root, body {font-size: 14px;}
}
@media screen and (min-width: 1200px) {
	:root, body {font-size: 16px;}
}

/* Переменные */
:root {
	--success: #B0EB02;
    --primary: #004CD1;
	--blue: #1283B7;
	--white: #fff;
	--black: #000;
}

/* Элементы */
html {width: calc(100% + calc(100vw - 100%)); overflow-x: hidden;}
body {display: flex; flex-direction: column; margin: 0 auto; max-width: 1920px; font-family: 'Montserrat-Regular', sans-serif; color: var(--primary); outline: 1px solid #ddd; overflow-x: hidden;}
#middle main  {overflow: inherit;}
*::before {pointer-events: none;}
@media (min-width: 1680px) {.container {max-width: 1296px;}}
@media (min-width: 1920px) {.bg-color::before {margin-left: -960px;}}

h1, .h1 {font-size: 4.6875rem !important; font-family: 'Unbounded-SemiBold', sans-serif !important; margin: 0;}
h2, .h2 {font-size: 3.75rem !important; font-family: 'Unbounded-SemiBold', sans-serif !important; margin: 0;}
h3, .h3 {font-size: 3.125rem !important; font-family: 'Unbounded-SemiBold', sans-serif !important; margin: 0;}
h4, .h4 {font-size: 1.875rem !important; font-family: 'Montserrat-SemiBold', sans-serif !important; margin: 0;}
h5, .h5 {font-size: 1.5rem !important; font-family: 'Montserrat-SemiBold', sans-serif !important; margin: 0;}
h6, .h6 {font-size: 1.125rem !important; font-family: 'Montserrat-SemiBold', sans-serif !important; margin: 0;}

a {text-decoration: none;}

.montserrat-medium{font-family: 'Montserrat-Medium', sans-serif !important;}
.montserrat-semibold{font-family: 'Montserrat-SemiBold', sans-serif !important;}
.unbounded-extrabold{font-family: 'Unbounded-ExtraBold', sans-serif !important;}

.border-success {border-color: var(--success) !important;}
.box-success {box-shadow: 0px 4px 4px 0px rgba(176, 235, 2, 0.20) !important;}

/* кнопки */
.btn-success {background-color: var(--success) !important; border-color: var(--success) !important; color: var(--primary) !important;}
.btn-primary {background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--white) !important;}
.btn-outline-success {border-color: var(--success) !important; color: var(--primary); background-color: var(--white);}
.btn.btn-outline-success:active, .btn.btn-outline-success:hover, .btn.btn-outline-success.active {border-color: var(--success) !important; background-color: var(--success); color: var(--primary);}

/* фон */
.bg-primary {background-color: var(--primary) !important;}
.bg-success {background-color: var(--success) !important;}

/* Текст */
.text-success {color: var(--success) !important;}
.text-primary, .text-primary::placeholder {color: var(--primary) !important;}
.text-blue {color: var(--blue) !important;}
.text-blue::placeholder {color: var(--blue) !important;}
/* Адаптация */

/* Анимации */

.delay-1 {-webkit-animation-delay:200ms;animation-delay:200ms}
.delay-2 {-webkit-animation-delay:400ms;animation-delay:400ms}
.delay-3 {-webkit-animation-delay:600ms;animation-delay:600ms}
.delay-4 {-webkit-animation-delay:800ms;animation-delay:800ms}
.delay-5 {-webkit-animation-delay:1000ms;animation-delay:1000ms}
.delay-6 {-webkit-animation-delay:1200ms;animation-delay:1200ms}
.delay-7 {-webkit-animation-delay:1400ms;animation-delay:1400ms}
.delay-8 {-webkit-animation-delay:1600ms;animation-delay:1600ms}
.delay-9 {-webkit-animation-delay:1800ms;animation-delay:1800ms}
.delay-10 {-webkit-animation-delay:2000ms;animation-delay:2000ms}

/* Шапка */
#navbar-content #top_menu ul {display: flex; flex: 1 1 0; justify-content: space-between;}
#navbar-content #top_menu ul li {}
#navbar-content #top_menu ul li a {padding: 0.625rem 2rem; font-family: 'Montserrat-SemiBold', sans-serif; font-size: 1.5rem; color: var(--primary);}
#navbar-content #top_menu ul li a:hover {background-color: var(--success); border-radius: 30px;}
#header_items .mod-header-button > button {box-shadow: 0px 4px 4px 0px rgba(0, 76, 209, 0.20);}

header #logo > img {box-shadow: 0px 4px 4px 0px rgba(0, 76, 209, 0.20); border-radius: 58px;}


/* Главный баннер */
.telegram-banner-1 {top: -22rem; left: -29%;}
.telegram-banner-2 {top: 5rem; left: -13rem;}
.telegram-banner-3 {bottom: -80%; left: -40%;}
.telegram-banner-4 {top: -10rem; right: -20rem;}
.telegram-banner-5 {bottom: -80%; right: -30rem;}


/* Почему мы */

.mod-choise .choise_item {background-color: #fff7; box-shadow: 0px 0px 33.3px 0px #C0D7FF inset, 0px 0px 13.9px 0px rgba(198, 199, 201, 0.25); backdrop-filter: blur(15px); border-radius: 150px; width: 306px; height:410px;}
.mod-choise .choise_item.key {position:absolute; top: -45%; right: -5%; background-color: #fff7; box-shadow: 0px 0px 33.3px 0px #C0D7FF inset, 0px 0px 13.9px 0px rgba(198, 199, 201, 0.25); backdrop-filter: blur(15px); border-radius: 9.375rem; width: 306px; height:410px; animation: move 10s linear infinite;}

.mod-choise .image_item {height: 185px; width: 175px;}

.mod-choise .owl-item {display: flex; justify-content: center;}
.mod-choise .owl-stage-outer {overflow: visible;}
/* .choise-carousel.owl-carousel .owl-item.transition {transition: transform 10s ease-out;} */

/* .mod-choise .svg_line_anim {margin-left: -31.5rem; margin-right: -33rem; margin-top: -4.5rem;} */
.anim-img {overflow: hidden;}
.mod-future .anim-img img {display: block; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  transition: clip-path 1.5s ease-out;}
.mod-future .anim-img img.revealed {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}

.mod-start .anim-img img {display: block;  clip-path: polygon(0 100%, 0 100%, 100% 100%, 100% 100%); transition: clip-path 1.5s ease-out;}

.mod-start .anim-img img.revealed {clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);}
.mod-choise .svg_line_anim {margin-top: -10rem;}
.choise_container {margin-left: -31.5rem; margin-right: -33rem; margin-top: -4.5rem;}
@keyframes move {
	0% { top: -45%; right: -5%;} 
	40% { top: 20%; right: 25%; }
	80%	{ top: 18%; right: 68%; }
	95% { top: 75%; right: 95%; }
	100% { top: 75%; right: 95%; }
}

.mod-choise .choise_item:nth-child(1) {animation-delay: 0s}
.mod-choise .choise_item:nth-child(2) {animation-delay: 2s;}
.mod-choise .choise_item:nth-child(3) {animation-delay: 4s}
.mod-choise .choise_item:nth-child(4) {animation-delay: 6s;}
.mod-choise .choise_item:nth-child(5) {animation-delay: 8s;}


/* .anim-img img {display: block; clip-path: polygon(0 0, 0 0, 100% 0, 100% 0);
  transition: clip-path 1.5s ease-out;}
.anim-img img.revealed {clip-path: polygon(0 0,0 100%, 100% 100%, 100% 0);} */


/* Профессия */
.mod-profession .right_block_image {margin-top: -5.2rem; margin-left: -26.7rem;}
.mod-profession .ladder_image_1 {bottom: 4rem; left: 12rem;}
.mod-profession .ladder_image_2 {bottom: 8rem; left: 22rem;}
.mod-profession .ladder_image_3 {bottom: 12rem; left: 32rem;}
.mod-profession .ladder_image_4 {bottom: 20.5rem; right: -3rem;}
.mod-profession .ladder_image_4 > div {padding-top: 4.8rem !important; padding-bottom: 4.8rem !important; padding-left: 1.1rem !important; padding-right: 1.1rem !important; border-radius: 50% !important; font-size: 1.875rem !important;}


/* Обо мне */
.mod-about .bg_circle {left: -21rem; animation: rotate 20s linear infinite; transform-origin: center center;}
@keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}


/* Курсы */
.mod-courses .courses_items {margin-top: -2rem;}
.mod-courses .bg_circle_container {left: -20.3rem; border-radius: 50px 0 0 0; z-index: -1;}
.mod-courses .bg_circle {left: -19rem; top: -6rem; animation: rotate 20s linear infinite; transform-origin: center center;}
/* @keyframes rotate {from {transform: rotate(0deg);} to {transform: rotate(360deg);}} */

.mod-courses .blue_bg-fon {left: 50%; margin-left: -50vw; width: 100vw; overflow: hidden; border-radius: 50px; z-index: -1; height:110%;}
.mod-courses .blue_bg-fon > img {width: 100vw; height: 100%; object-fit: cover;}

/* Отзывы */
.mod-reviews .video_item {background-color: #fff7; box-shadow: 0px 0px 33.3px 0px #C0D7FF inset, 0px 0px 13.9px 0px rgba(198, 199, 201, 0.25); backdrop-filter: blur(15px); aspect-ratio: 1 / 1;}
.videootzyvy-carousel .owl-item {display: flex !important;}


.mod-reviews .up-btn-video{display: flex;}




/* Тариф */
.mod-tariff::before {background: var(--bg-image) no-repeat center #ffffff; border-radius: 0 0 50px 50px; background-size: cover; top: 0; margin-top: 0; z-index: -1;}
.mod-tariff .tariffs_bg {border-radius: 1.5rem; border: 1px solid #FFF; background: rgba(255, 255, 255, 0.30); box-shadow: 0px 4px 17.9px 0px rgba(0, 76, 209, 0.40); backdrop-filter: blur(6.5px);}

.mod-tariff .bg_circle {right: -30rem; top: -16rem; animation: rotate 20s linear infinite; transform-origin: center center; z-index: -1;}


/* Реклама */
.mod-advertising .adv_images {margin-top: -5rem; margin-left: -5rem; margin-right: 1rem;}


/* Будущее */
.mod-future .future_image {margin-left: -28rem; margin-right: -25rem; margin-top: 12.5rem;}
.mod-future .future_cloud {margin-top: -24.4rem; top: 0; margin-left: 9.8rem; margin-right: -13rem;}



/* Уже на старте */
.mod-start .start_image {margin-top: -2rem; margin-right: -9rem; margin-left: -6rem;}
.mod-start .start_vector {margin-right: -11rem;}

/* Подвал */
footer .footer_items ul {display: flex; flex: 1 1 0; justify-content: space-between; padding: 0 3rem;}
footer .footer_items ul li a {font-family: 'Montserrat-SemiBold', sans-serif; font-size: 1.5rem; color: var(--primary);}

/* Всплывающие окна */
#bonusInfo .container, #programmCourses .container {width: 100vw; max-width: 1344px;}

.scroll-up {z-index: 10;}

#bonusInfo .modal-content::beffore {content: ''; background-image: url('/images/all/001.png'); top: 0; bottom: 0; left: 0; right: 0;}

@media screen and (max-width: 1400px) {
	
	.mod-future .future_image {margin-left: -23.4rem; margin-top: 13.5rem; margin-right: -40rem;}
	.mod-future .future_cloud {margin-top: -24.3rem; margin-left: 9.8rem;}
	.mod-advertising .adv_images {margin-left: -5rem; margin-right: -2rem; margin-top: 0;}
	
	#navbar-content #top_menu ul li a {padding: 0.625rem 1.2rem; font-size: 1.3rem;}
}

@media screen and (max-width: 1200px) {
	.h1 {font-size: 4rem !important;}
	.mod-profession .right_block_image {margin-top: 0;}
	
	.mod-advertising .adv_bg-image {position: static !important;}
	.mod-advertising .adv_bg-image .adv_images {position: static !important; margin: 0 !important;}

	.mod-future .future_image {margin-left: -23.4rem; margin-top: 13.5rem; margin-right: -40rem;}
	.mod-future .future_cloud {margin-top: -27.8rem; margin-left: 11.2rem;}

	.mod-start .start_bg-image {z-index: -1;}
	.mod-start .start_image {margin-right: -12rem; margin-left: -4rem;}

	/* .mod-tariffs .tariff_item-carousel {height: 500px !important;} */
	.tarrifs-carousel.owl-carousel .owl-stage {display: flex;}
	.tarrifs-carousel.owl-carousel .owl-stage .owl-item {display: flex; flex: 1 0 auto;}

	header #top_menu {width: 100%; border: none !important; box-shadow: none !important;}
	header #navbar-content #top_menu ul {display: block; text-align: center;}
	#navbar-content {position: absolute; width: 100%; left: 0; top: 0; border: #B0EB02 1px solid; box-shadow: 0px 4px 4px 0px rgba(176, 235, 2, 0.20) !important; width: 100%; border-radius: 30px; backdrop-filter: blur(6.5px);}
	#navbar-content #top_menu ul li a {font-size: 2rem; margin-bottom: 1rem;}
}

@media screen and (min-width: 992px) {
	/* Отзывы */
	.mod-reviews .owl-stage {display: flex !important; align-items: center !important;}
	/* .mod-reviews .owl-stage .owl-item.active.one-item {width: 10.4% !important;} */
	.mod-reviews .owl-stage .owl-item.active .one-item {width: 118.22% !important;}
	.mod-reviews .owl-stage .owl-item.active .two-item {width: 81.78% !important;}
	.mod-reviews .owl-stage.active {min-height: 900px !important;}
	/* .mod-reviews .main_reviews-item {height: 1000px;} */
	.mod-reviews .main_reviews-item.active {height: 261px; background-color: var(--primary) !important; color: var(--white) !important;}
	.mod-reviews .main_reviews-item.active .reviews_full_text {display: -webkit-box; -webkit-line-clamp: 3; overflow:hidden; max-height: 100px; -webkit-box-orient: vertical;}
	/* .mod-reviews .main_reviews-item{transition: height 2s ease-out;} */
	/* .mod-reviews .main_reviews-item.active{transition: height 0s ease-out;} */
	
	.mod-reviews .up-btn-otzivy{display: none;};
}

@media screen and (max-width: 992px) {
	.mod-profession .profession_bg-image {position: static !important;}
	.mod-profession .profession_bg-image > div {position: static !important; margin-left: 0;}

	.mod-profession .ladder_image_1 {bottom: 8rem; left: 14rem;}
	.mod-profession .ladder_image_2 {bottom: 13rem; left: 26rem;}
	.mod-profession .ladder_image_3 {bottom: 17rem; left: 37rem;}
	.mod-profession .ladder_image_4 {bottom: 26.5rem; right: 1rem;}

	
	.mod-reviews .reviews_full_text{display: block !important;}
	.mod-future .future_image {margin-left: -22rem; margin-right: -60rem;}
	.mod-future .future_cloud {margin-top: -32rem; margin-left: 13.1rem;}

	.mod-start .start_image {position: static !important; margin: 0;}
	.mod-start .start_vector {margin-right: -3rem;}

	footer .footer_items ul {display: block;}
	footer .footer_items ul li {font-size: 24px !important; margin-bottom: 40px; text-align: center;}
	footer .footer_items ul li a {font-size: 20px !important;}	
	footer #logo > img {margin-bottom: 40px;}
	footer .mod-header-button > button {font-size: 20px !important; border-radius: 30px !important;}

	.bg_circle > img {width: 32rem;}
	.mod-tariff .bg_circle {right: -22rem;}
	.mod-reviews .up-btn-otzivy{display: flex;};

}

@media screen and (max-width: 768px) {
	.h1 {font-size: 3rem !important;}

	.mod-banner .banner_bg-image {position: static !important;}
	.mod-banner .banner_bg-image > div {position: static !important; margin-left: 0 !important; width: 75%}

	.mod-profession .ladder_image_1 {bottom: 6.3rem; left: 10rem;}
	.mod-profession .ladder_image_2 {bottom: 9.5rem; left: 19rem;}
	.mod-profession .ladder_image_3 {bottom: 12.8rem; left: 27.4rem;}
	.mod-profession .ladder_image_4 {bottom: 20.5rem; right: -3rem;}

	
	.mod-courses .banner_bg-image {width: 75%; margin: auto !important;}

	.mod-advertising .adv_bg-image .adv_images {width: 75% !important; margin: auto !important;}

	.mod-future .future_image {margin: 0; z-index: -1; width: 160%;}
	.mod-future .future_cloud {margin-top: -19.7rem; margin-left: 7rem;}

	.mod-start .start_text-fs {font-size: 18px !important;}

	.mod-future .future_bg-image {margin-top: -50%;}

	header #navbar-content #top_menu ul {margin-top: 10rem;}
	.mod-tariff .tariffs_bg {border-radius: 30px !important;}

	
	.telegram-banner-1 {top: 26rem; left: -38%;}
	.telegram-banner-2 {top: 0; left: 65%;}
	.telegram-banner-3 {display: none;}
	.telegram-banner-4 {top: 15%; right: -38%;}
	.telegram-banner-5 {display: none;}
}

@media screen and (max-width: 576px) {
	
	/* .mod-tariffs .tariff_item-carousel {height: 600px !important;} */

	.video_item video {max-width: 290px !important;}

	#programmCourses .programmCourses_title {font-size: 3rem !important; font-family: 'Unbounded-SemiBold', sans-serif !important;}
	.mod-tariff .bg_circle {right: -18rem;}

	#fos .modal-body .h3 {font-size: 2.5rem !important;}
	.telegram-banner-1 {top: 22rem; left: -45%;}
	.telegram-banner-1 {max-width: 300px;}
	.telegram-banner-2 {max-width: 155px;}
	.telegram-banner-2 {top: 0; left: 53%;}
	.telegram-banner-2 > img {left: 21px !important; top: -66px !important;}
	.telegram-banner-3 {display: none;}
	.telegram-banner-4 {max-width: 134px;}
	.telegram-banner-4 {top: 30%; right: -18%;}

}

@media screen and (max-width: 344px) {
	.nav-videootzyvy {display: flex; flex: 1 1 0;}
	.nav-otzyvy {display: flex; flex: 1 1 0; margin-right: 0 !important;}
}