/* Настройки шаблона */ :root { --black: #1C1C1C; --dark: #292929; --yellow: #FEC864; --white: #FFFFFF; } :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;} } /* Элементы */ html {width: calc(100% + calc(100vw - 100%)); overflow-x: hidden;} body {display: flex; flex-direction: column; margin: 0 auto; max-width: 1920px; font-family: Source Sans Pro; color: #1C1C1C; outline: 1px solid #ddd; overflow: hidden;} #middle main {overflow: inherit;} *::before {pointer-events: none;} @media (min-width: 1560px) {.container {max-width: 1560px;}} @media (min-width: 1920px) {.bg-color::before {margin-left: -960px;}} h1, .h1 { font-family: Playfair Display SC; font-size: 6.25rem; font-weight: 400; line-height: 100%;} h2, .h2 { font-family: Playfair Display SC; font-size: 5rem; font-weight: 400; line-height: 100%;} h3, .h3 { font-family: Playfair Display SC; font-size: 3.75rem; font-weight: 400; line-height: 100%; } .h3s2 { font-family: Source Sans Pro; font-size: 3.75rem; font-style: normal; font-weight: 300; line-height: 100%;} h4, .h4 { font-family: Playfair Display SC; font-size: 2.5rem; font-weight: 400; line-height: 100%;} .h4s2 { font-family: Source Sans Pro; font-size: 2.5rem; font-weight: 400; line-height: 100%;} h5, .h5 { font-family: Source Sans Pro; font-size: 1.875rem; font-weight: 400; line-height: 100%;} h6, .h6 { font-family: Source Sans Pro; font-size: 1.5rem; font-weight: 400; line-height: 100%;} .h6s2 { font-family: Playfair Display SC; font-size: 1.5rem; font-weight: 400; line-height: 100%; } .s1 { font-family: Source Sans Pro; font-size: 1.25rem; font-weight: 400; line-height: 100%;} .s2 { font-family: Source Sans Pro; font-size: 1rem; font-weight: 400; line-height: 100%;} .text-yellow {color: var(--yellow)!important;} .text-dark {color: var(--dark)!important;} .text-white {color: var(--white)!important;} .btn-yellow { border-radius: 1.25rem; padding: 1.5rem 4rem; background-color: var(--yellow); background-image: url('/images/elements/btn_bg.png'); background-repeat: no-repeat; background-size: cover; box-shadow: -3px -4px 2px 0px rgba(0, 0, 0, 0.50) inset; font-family: Source Sans Pro; font-size: 1.25rem; font-weight: 600; text-transform: uppercase; display: flex; align-items: center; transition: 0.4s; cursor: pointer; border: none; color: black!important;} .btn-yellow:hover { box-shadow: -3px -4px 2px 3px rgba(0, 0, 0, 0.50) inset; } .topbottom__circle::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='50' viewBox='0 0 1920 50' fill='none'%3E%3Cpath d='M0 0H1920C1920 0 1325 50 960.5 50C579 50 0 0 0 0Z' fill='white'/%3E%3C/svg%3E"); position: absolute; top: -1px; width: 100vw; height: 3.125rem; background-repeat: no-repeat; background-position: center; z-index: 20;} .topbottom__circle::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='50' viewBox='0 0 1920 50' fill='none'%3E%3Cpath d='M1920 50H0C0 50 595 0 959.5 0C1341 0 1920 50 1920 50Z' fill='white'/%3E%3C/svg%3E"); position: absolute; bottom: -1px; width: 100vw; height: 3.125rem; background-repeat: no-repeat; background-position: center; z-index: 20;} /* .form-control:focus { background-color: unset; border: solid 1px #F5F5F5; box-shadow: none; } */ .modal .modal-content {border-radius: 1.875rem; } .modal .modal-body {padding: 1.75rem;} .modal .modal-header {border-bottom: 0;} .modal .modal-header .btn-close { position: absolute; right: 2rem; top: 3rem; width: 10px; height: 10px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: contain; opacity: 1; } #videoyoutube .modal-header .btn-close { top: 2rem; } #smoglavideo .modal-header .btn-close { top: 2rem; } #smoglavideo .modal-header { display: flex; padding: 3rem 11.25rem 0 11.25rem; flex-direction: column; border-bottom: 0; } #videoyoutube .modal-header { display: flex; padding: 3rem 11.25rem 0 11.25rem; flex-direction: column; border-bottom: 0; } .play_btn {cursor: pointer;} a {text-decoration: none;} .owl-carousel .owl-dots {bottom: 0;} .owl-carousel .owl-dots .owl-dot {width: 0.9375rem; height: 0.9375rem; border: solid 1px var(--black)!important; background: transparent!important; transition: 0.7s; } .owl-carousel .owl-dot.active { background: var(--black)!important; } /*====================== 404 page =======================*/ .page404 .error-container { text-align: center; font-size: 106px; font-family: 'Catamaran', sans-serif; font-weight: 800; margin: 70px 15px; } .page404 .error-container > span { display: inline-block; position: relative; } .page404 .error-container > span.four { width: 136px; height: 43px; border-radius: 999px; background: linear-gradient(140deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 43%, transparent 44%, transparent 100%), linear-gradient(105deg, transparent 0%, transparent 40%, rgba(0, 0, 0, 0.06) 41%, rgba(0, 0, 0, 0.07) 76%, transparent 77%, transparent 100%), linear-gradient(to right, #EBC173, #FEC864); } .page404 .error-container > span.four:before, .page404 .error-container > span.four:after { content: ''; display: block; position: absolute; border-radius: 999px; } .page404 .error-container > span.four:before { width: 43px; height: 156px; left: 60px; bottom: -43px; background: linear-gradient(128deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 40%, transparent 41%, transparent 100%), linear-gradient(116deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.07) 50%, transparent 51%, transparent 100%), linear-gradient(to top, #B8A47F, #EBC173, #FFE5B5, #FFD382, #FEC864); } .page404 .error-container > span.four:after { width: 137px; height: 43px; transform: rotate(-49.5deg); left: -18px; bottom: 36px; background: linear-gradient(to right, #B8A47F, #EBC173, #FFE5B5, #FFD382, #FEC864); } .page404 .error-container > span.zero { vertical-align: text-top; width: 156px; height: 156px; border-radius: 999px; background: linear-gradient(-45deg, transparent 0%, rgba(0, 0, 0, 0.06) 50%, transparent 51%, transparent 100%), linear-gradient(to top right, #665a45, #8f7f63, #B8A47F, #EBC173, #FFE5B5, #FFD382, #FEC864); overflow: hidden; animation: bgshadow 5s infinite; } .page404 .error-container > span.zero:before { content: ''; display: block; position: absolute; transform: rotate(45deg); width: 90px; height: 90px; background-color: transparent; left: 0px; bottom: 0px; background: linear-gradient(95deg, transparent 0%, transparent 8%, rgba(0, 0, 0, 0.07) 9%, transparent 50%, transparent 100%), linear-gradient(85deg, transparent 0%, transparent 19%, rgba(0, 0, 0, 0.05) 20%, rgba(0, 0, 0, 0.07) 91%, transparent 92%, transparent 100%); } .page404 .error-container > span.zero:after { content: ''; display: block; position: absolute; border-radius: 999px; width: 70px; height: 70px; left: 43px; bottom: 43px; background: #FDFAF5; box-shadow: -2px 2px 2px 0px rgba(0, 0, 0, 0.1); } .page404 .screen-reader-text { position: absolute; top: -9999em; left: -9999em; } @keyframes bgshadow { 0% { box-shadow: inset -160px 160px 0px 5px rgba(0, 0, 0, 0.4); } 45% { box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1); } 55% { box-shadow: inset 0px 0px 0px 0px rgba(0, 0, 0, 0.1); } 100% { box-shadow: inset 160px -160px 0px 5px rgba(0, 0, 0, 0.4); } } .page404 .title { text-align: center; margin: 30px 15px; } .page404 .link-container { text-align: center; } .page404 {padding: 5rem 0;} .page404 .btn-yellow {width: fit-content;} /* Шапка */ header .logo img { filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } header .mod-menu li.nav-item { font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 110%; text-transform: uppercase; } header .mod-menu li.nav-item a { color: var(--black) !important; transition: 0.4s;} header .mod-menu li.nav-item:hover a { color: var(--yellow) !important; } header .mod-menu.mod-list.nav { gap: 5rem; } header #top_menu { display: flex; width: 100%; justify-content: space-between; align-items: center; padding-top: 3rem;} /* Баннер */ .mod-banner {background: url('/images/modules/mod-banner/bg.jpg')!important; background-repeat: no-repeat!important; margin-bottom: 12rem;} .mod-banner .left { position: relative; z-index: 1; } .mod-banner .cover { position: absolute; bottom: -20%; z-index: 3;} .mod-banner .social__icon img {filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));} .mod-banner .list_social {display: flex; flex-direction: column; gap: 1.875rem; position: absolute; left: 2%; top: 50%; transform: translateY(-50%); z-index: 4;} .mod-banner .right {align-self: center; position: relative; z-index: 5; display: flex; flex-direction: column; gap: 6rem;} .mod-banner .radial_bg { position: absolute; z-index: -1; left: 50%; top: 50%; transform: translate(-50%, -50%); } .mod-banner .title p:nth-child(2) {margin-left: 4rem;} .mod-banner .title p:nth-child(3) {margin-left: 13rem;} .mod-banner .arrow { display: flex; align-items: flex-end; margin-left: 3rem;} .mod-banner .bottom { display: flex; flex-direction: column; gap: 1rem; } .mod-banner .btn-yellow {padding: 1.5rem 2rem; width: fit-content;} .mod-banner .author { display: flex; flex-direction: column; margin-bottom: 1.5rem; margin-left: -3rem; } .mod-banner .author span:last-child {margin-left: 4.5rem; white-space: nowrap;} .mod-banner .logo__mobile {display: none;} /* Голосовед */ .mod-golosoved {} .mod-golosoved {margin-bottom: 13rem;} .mod-golosoved .circle { position: relative; } .mod-golosoved .circle img.person { width: 100%; height: auto; border-radius: 50%; } .mod-golosoved .circle .animation__circletext img { width: 100%; height: 100%; } .mod-golosoved .animation__circletext { height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 25; animation: rotateText2 10s linear infinite; } @keyframes rotateText { from { transform: scale(1.5) rotate(0deg); } to { transform: scale(1.5) rotate(360deg); } } @keyframes rotateText2 { from { transform: scale(1.4) rotate(0deg); } to { transform: scale(1.4) rotate(360deg); } } .mod-golosoved .left { align-self: center; display: flex; flex-direction: column; gap: 3.75rem; } .mod-golosoved .left .author {text-align: end;} .mod-golosoved .right { display: flex; justify-content: flex-end; position: relative; z-index: 25;} /* Обо мне */ .mod-about {background: var(--dark)!important; padding-top: 7rem;} .mod-about .element_design1 { position: absolute; left: 0; top: -15%; z-index: 21; } .mod-about .element_design2 { position: absolute; right: 0; bottom: -10%; z-index: 21; } .mod-about .left {align-self: flex-end;} .mod-about .left .person { position: relative; z-index: 1; } .mod-about .bg_effect { position: absolute; top: 0; z-index: 0; height: 100%;} .mod-about .bg_effect img {height: 100%; object-fit: cover;} .mod-about .right {position: relative; z-index: 2;} .mod-about .right .bottom .list {color: white!important; margin-top: 2.5rem; padding-bottom: 5rem;} .mod-about .right .title { margin-right: 6rem; text-align: center; } .mod-about .right .author { text-align: end; margin-bottom: -3rem; } .mod-about .right .list ul { display: flex; flex-direction: column; gap: 1.8rem; } .mod-about .right .list ul li { list-style: none; color: #FFF; font-family: Source Sans Pro; font-size: 1.875rem; font-style: normal; font-weight: 300; line-height: 110%; position: relative; padding-left: 1.88rem;} .mod-about .right .list ul li::before { content: ""; width: 1.875rem; height: 1.875rem; position: absolute; left: -5%; top: 0; background: linear-gradient(135deg, #FFF 0%, var(--yellow) 67.71%, #FFAE17 100%); border-radius: 50%; } /* СМИ ОБО МНЕ */ .mod-cmi {margin-top: 13rem; margin-bottom: 12rem; background: transparent!important;} .mod-cmi .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 8rem;} .mod-cmi .item {position: relative; height: 100%;} .mod-cmi .item img {height: 100%; border-radius: 10px; object-fit: cover;} .mod-cmi .owl-carousel .owl-stage {display: flex;} .mod-cmi .item .play_btn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .mod-cmi .item .play_btn img {width: 80px;} .mod-cmi .owl-item .item {transform: scale(0.9); transition: 0.4s;} .mod-cmi .owl-item .item:has(.play_btn:hover) {transform: scale(1);} /* ПОДХОД К РАБОТЕ */ .mod-approach {margin-top: 2.5rem;} .mod-approach .technology__video {position: relative;} .mod-approach .item {position: relative;} .mod-approach .item .item__desc { font-family: Source Sans Pro; font-size: 1.875rem; font-weight: 400; line-height: 110%;} .mod-approach .list__item .three_block:nth-child(1) {display: flex; flex-direction: column; gap: 6.5rem; justify-content: center; text-align: right;} .mod-approach .list__item .three_block:nth-child(3) {display: flex; flex-direction: column; gap: 6.5rem; justify-content: center; text-align: left;} .mod-approach .list__item .three_block:nth-child(1) .item:nth-child(2) {margin-right: 3rem;} .mod-approach .list__item .three_block:nth-child(3) .item:nth-child(2) {margin-left: 3rem;} .mod-approach .list__item .three_block:nth-child(1) .item::before { content: ""; width: 1.875rem; height: 1.875rem; position: absolute; background: radial-gradient(70.71% 70.71% at 50% 50%, #FFAE17 0%, rgba(255, 255, 255, 0.40) 63.02%, rgba(255, 255, 255, 0.00) 100%); right: -10%; top: 50%; transform: translateY(-50%); } .mod-approach .list__item .three_block:nth-child(3) .item::before { content: ""; width: 1.875rem; height: 1.875rem; position: absolute; background: radial-gradient(70.71% 70.71% at 50% 50%, #FFAE17 0%, rgba(255, 255, 255, 0.40) 63.02%, rgba(255, 255, 255, 0.00) 100%); left: -10%; top: 50%; transform: translateY(-50%); } .mod-approach .title { max-width: 290px; font-size: 3.4rem; margin-top: -1rem; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Мои клипы */ .mod-clip {margin: 13rem 0; background: transparent!important;} .mod-clip .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 5.8rem;} .mod-clip .item {position: relative; height: 100%;} .mod-clip .item img {height: 100%; border-radius: 10px; object-fit: cover;} .mod-clip .owl-carousel .owl-stage {display: flex;} .mod-clip .item .play_btn {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .mod-clip .item .play_btn img {width: 80px;} .mod-clip .owl-item .item {transform: scale(0.9); transition: 0.4s;} .mod-clip .owl-item .item:has(.play_btn:hover) {transform: scale(1);} /* я на шоу голос */ .mod-golos {background: var(--dark)!important; padding-top: 5rem; padding-bottom: 7rem;} .mod-golos .oblaka { position: absolute; height: 100%; top: 0; z-index: 0; } .mod-golos .container { position: relative; z-index: 2; } .mod-golos .title { margin-bottom: 4rem; } .mod-golos .row { justify-content: center; } .mod-golos .video__player { position: relative; } .mod-golos .video__player .play_btn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; } .mod-golos .video__player .poster { border-radius: 50px; width: 100%; } /* МОИ ПЕСНИ */ .mod-songs {margin-top: 13rem;} .mod-songs .top { display: flex; align-items: center; margin-bottom: 6rem; justify-content: flex-end; } .mod-songs .playPauseBtn.play { border: none; background: url('/images/modules/mod-songs/play.svg'); background-repeat: no-repeat; width: 3.75rem; height: 3.75rem; transition: 0.4s; align-self: center; background-size: cover;} .mod-songs .playPauseBtn.pause { border: none; background: url('/images/modules/mod-songs/pause.svg'); background-repeat: no-repeat; width: 3.75rem; height: 3.75rem; transition: 0.4s; align-self: center; position: relative;} .mod-songs .playPauseBtn.pause::before { content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--yellow); opacity: 0.1; animation: outlinebtn 2s ease-in-out infinite; border-radius: 50%; } @keyframes outlinebtn { 0% { transform: translate(-50%, -50%) scale(0); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(0); } } .mod-songs .muteBtn.unmute { width: 30px; height: 30px; background: url('/images/modules/mod-songs/volume.svg'); border: none; background-size: contain; background-repeat: no-repeat; transition: 0.4s;} .mod-songs .muteBtn { width: 30px; height: 30px; background: url('/images/modules/mod-songs/volume.svg'); border: none; background-size: contain; background-repeat: no-repeat; transition: 0.4s;} .mod-songs .muteBtn.mute { width: 30px; height: 30px; background: url('/images/modules/mod-songs/volumemute.svg'); border: none; background-size: contain; background-repeat: no-repeat; transition: 0.4s;} .mod-songs .player-controls { border-radius: 0.625rem; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.15); display: flex; padding: 0.75rem 1.25rem; align-items: flex-end; gap: 1.5625rem; justify-content: space-between; } .mod-songs .timeline_wrap {width: 60%;} .mod-songs .audio-info {margin-bottom: 1.25rem;} .mod-songs .timeline__wrapper { display: flex; gap: 0.5rem; align-items: center;} .mod-songs input.timeline { width: 80%; } .mod-songs .list { gap: 1.5rem; height: 570px; overflow-y: scroll; padding: 0 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; } .mod-songs .volume__wrap input.volume {width: 50%;} .mod-songs .list::-webkit-scrollbar { width: 7px; } .mod-songs .list::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.10);; border-radius: 20px; } .mod-songs .list::-webkit-scrollbar-thumb { background-color: var(--yellow); border-radius: 20px; border: 3px solid transparent; } .mod-songs .volume__wrap { display: flex; align-items: center; width: 20%; } .mod-songs .input::-webkit-progress-value { background: var(--yellow); } .mod-songs .right {align-self: center;} .mod-songs input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; overflow: hidden; height: 5px; border-radius: 20px; } .mod-songs input[type=range]::-webkit-slider-runnable-track { border-radius: 20px; height: 5px; border: none; background-color: rgba(0, 0, 0, 0.10); } .mod-songs input[type=range]::-webkit-slider-thumb { background: transparent; border: none; border-radius: 20px; cursor: pointer; width:15px; height: 15px; -webkit-appearance: none; margin-top: -4px; } /* Круг анимация */ .mod-songs .person { position: relative; width: fit-content;} .mod-songs .person img { width: fit-content; border-radius: 50%; } .mod-songs .top_text { top: -20%; position: absolute; z-index: 25; left: 50%; color: #fff; font-weight: bold; transform-origin: center center; } .mod-songs .animation__circletext { height: 100%; width: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 25; animation: rotateText 15s linear infinite; } /* СМОГЛА Я СМОЖЕТЕ И ВЫ */ .mod-smogla {background: transparent!important;} .mod-smogla .bg {margin: 6.5rem 0;} .mod-smogla .container { position: absolute; z-index: 2; top: 50%; transform: translateY(-50%) translateX(-50%); left: 50%; } .mod-smogla .container { margin-left: 14rem; } .mod-smogla .text p:nth-child(1) {} .mod-smogla .text p:nth-child(2) {margin-left: 7rem;} .mod-smogla .text p:nth-child(3) {margin-left: 11rem} .mod-smogla .text p:nth-child(4) {margin-left: 27rem;} .mod-smogla .btn-play { position: absolute; top: 15%; left: -5%; z-index: 3; } .mod-smogla #gear65 { position: absolute; bottom: -50%; left: -5%; } /* Сказочный канал */ .mod-channel {background: var(--dark)!important;} .mod-channel .element1 { position: absolute; top: -10%; left: 0; z-index: 21; } .mod-channel .element2 { position: absolute; right: 0; bottom: -17%; z-index: 21; } .mod-channel .bg__effect { position: absolute; left: 0; top: 0; z-index: 0; } .mod-channel .person { position: absolute; left: 0; bottom: 0; z-index: 1; } .mod-channel .container { position: relative; z-index: 30; padding-top: 6rem; padding-bottom: 6rem; } .mod-channel .container .row { justify-content: flex-end; } .mod-channel .title {text-align: end;} .mod-channel .subtitle {color: white;} .mod-channel .song { display: flex; gap:1.25rem; align-items: center; } .mod-channel .books__wrapper {position: relative;} .mod-channel .books__wrapper .element {position: absolute;} .mod-channel .books__wrapper .element_book1 { top: 20%; left: -5%; } .mod-channel .books__wrapper .element_book2 { top: 10%; left: 50%; } .mod-channel .books__wrapper .element_book3 { right: 0; top: 0; } .mod-channel .books__wrapper .element_book4 { left: 20%; top: 13%; } .mod-channel .books__wrapper .element_book5 { right: 25%; top: -5%; } .mod-channel .playPauseBtn.play { border: none; background: url('/images/modules/mod-songs/play.svg'); background-repeat: no-repeat; width: 3.75rem; height: 3.75rem; transition: 0.4s; align-self: center; background-size: cover;} .mod-channel .playPauseBtn.pause { border: none; background: url('/images/modules/mod-songs/pause.svg'); background-repeat: no-repeat; width: 3.75rem; height: 3.75rem; transition: 0.4s; align-self: center; background-size: cover;} .mod-channel .muteBtn.unmute { width: 30px; height: 30px; background: url('/images/modules/mod-songs/volume.svg'); border: none; background-size: contain; background-repeat: no-repeat; transition: 0.4s;} .mod-channel .muteBtn { width: 30px; height: 30px; background: url('/images/modules/mod-songs/volume.svg'); border: none; background-size: contain; background-repeat: no-repeat; transition: 0.4s;} .mod-channel .muteBtn.mute { width: 30px; height: 30px; background: url('/images/modules/mod-songs/volumemute.svg'); border: none; background-size: contain; background-repeat: no-repeat; transition: 0.4s;} .mod-channel .player-controls { border-radius: 0.625rem; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10), 0px 0px 4px 0px rgba(0, 0, 0, 0.15); display: flex; padding: 0.75rem 1.25rem; align-items: flex-end; gap: 1.5625rem; justify-content: space-between; } .mod-channel .timeline_wrap {width: 60%;} .mod-channel .timeline__wrapper { display: flex; gap: 0.5rem; align-items: center;} .mod-channel input.timeline { width: 80%; } .mod-channel .volume__wrap input.volume {width: 50%;} .mod-channel .volume__wrap { display: flex; align-items: center; width: 20%; } .mod-channel .input::-webkit-progress-value { background: var(--yellow); } .mod-channel .right {align-self: center;} .mod-channel input[type=range] { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; overflow: hidden; height: 5px; border-radius: 20px; } .mod-channel input[type=range]::-webkit-slider-runnable-track { border-radius: 20px; height: 5px; border: none; background-color: rgba(0, 0, 0, 0.10); } .mod-channel input[type=range]::-webkit-slider-thumb { background: transparent; border: none; border-radius: 20px; cursor: pointer; width:15px; height: 15px; -webkit-appearance: none; margin-top: -4px; } /* Курс на любой вкус */ .mod-curse {background: transparent!important; margin-top: 13.75rem; } .mod-curse .btn__wrap {margin-top: auto;} .mod-curse .item {border-radius: 0.9375rem;box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), -7px 17px 41px 0px rgba(0, 0, 0, 0.10), -28px 70px 75px 0px rgba(0, 0, 0, 0.09), -63px 157px 101px 0px rgba(0, 0, 0, 0.05), -113px 279px 120px 0px rgba(0, 0, 0, 0.01), -176px 435px 131px 0px rgba(0, 0, 0, 0.00);display: flex;padding: 5.818rem 2.8125rem 1.875rem 2.8125rem;flex-direction: column;align-items: flex-start;gap: 1.682rem; height: 100%; position: relative;} .mod-curse .owl-carousel .item .title { position: relative; display: flex; align-items: center; justify-content: center; width: 80%; position: absolute; top: -2%; left: 50%; transform: translateX(-50%); } .mod-curse .owl-carousel .item .title .title__text { color: #4E4855; font-weight: 700; position: relative; z-index: 1; } .mod-curse .owl-carousel .item .title .title__background {width: 100%;height: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 0;padding: 1.7rem 1.2rem;border-radius: 1.25rem;background: rgba(255, 255, 255, 0.25);backdrop-filter: blur(23px);} .mod-curse .owl-carousel .owl-stage {display: flex;} .mod-curse .owl-carousel .owl-stage-outer {padding-top: 5rem; padding-bottom: 13rem;} .mod-curse .owl-carousel .owl-item .item {filter: blur(6px); transition: 0.4s;} .mod-curse .owl-carousel .owl-item.center .item {filter: unset;} .mod-curse .owl-carousel .owl-item.center + .owl-item .item {filter: blur(2px);} .mod-curse .owl-carousel .owl-item:has(+ .owl-item.center) .item {filter: blur(2px);} /* Что дает каждый курс */ .mod-give { position: relative; margin-bottom: 13.75rem; } .mod-give .element1 { position: absolute; left: -34%; bottom: -20%; z-index: -1; } .mod-give .element2 { position: absolute; top: -5%; right: -14%; z-index: -1; } .mod-give .title { margin-bottom: 8rem; text-align: center;} .mod-give .row { display: flex; justify-content: center; row-gap: 6rem;} .mod-give .col_wrap:nth-child(2) {margin-top: -2rem; margin-bottom: 2rem;} .mod-give .col_wrap {padding: 0 3rem;} .mod-give .item { border: solid 4px var(--yellow); border-radius: 20px; text-align: center; display: flex; flex-direction: column; height: 100%; z-index: -2; position: relative; } .mod-give .item .item__title { position: relative; font-weight: 600; width: fit-content; margin: -1rem auto; } .mod-give .item .item__title::before { content: ""; width: 100%; height: 100%; position: absolute; background: white; z-index: -1; } .mod-give .item .item__title img { position: absolute; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: -1; top: 50%; } .mod-give .item .subtitle { padding: 5rem 1.5rem 5rem 1.5rem; margin: 0 auto; } /* Фотогалерея */ .mod-gallery {margin-top: 13rem; padding: 5rem 0; background: var(--dark)!important;} .mod-gallery .container {position: relative; z-index: 100;} .mod-gallery {display: block;} .mod-gallerym {display: none;} .mod-gallery .top {display: flex; justify-content: space-between; align-items: center;} .mod-gallery .bg_effect { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translateX(-50%) translateY(-50%); } .mod-gallery .bg_effect img {width: 100%; height: 100%; object-fit: cover;} .mod-gallery .owl-item.center {display: flex; justify-content: center;} .mod-gallery .owl-item .item {transition: 1s} .mod-gallery .owl-carousel {padding: 0 2rem;} .mod-gallery .owl-item.center .item { width: 21.875rem; height: 37.5rem; } .mod-gallery .owl-item .item .item__image { width: 100%; height: 100%; } .mod-gallery .owl-item .item .item__image img{ width: 100%; height: 100%; object-fit: cover; border-radius: 20px;} .mod-gallery .owl-item.center + .owl-item .item, .mod-gallery .owl-item:has(+ .owl-item.center) .item {width: 100%; height: 18.75rem;} .mod-gallery .owl-carousel .owl-stage {display: flex; align-items: center; margin: -14rem 0px;} .mod-gallery .owl-carousel .owl-nav {max-width: 30%} #galleryall .modal-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px; } #galleryall .modal-body .item {height: 400px;} #galleryall .modal-body .item .item__image {height: 100%;} #galleryall .modal-body .item .item__image img {height: 100%; object-fit: cover; object-position: center; width: 100%;} #galleryall .modal-header {display: flex;padding: 3rem 11.25rem 0 11.25rem;flex-direction: column;border-bottom: 0; margin-bottom: 3rem;} #galleryall .modal-body { padding: 2rem 5rem; } #galleryall .modal-header .btn-close { position: absolute; right: 2rem; top: 3rem; width: 10px; height: 10px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: contain; opacity: 1; } /* Мобильная фотогалерея */ .mod-gallerym {margin-top: 13rem; padding: 5rem 0; background: var(--dark)!important;} .mod-gallerym .container {position: relative; z-index: 100;} .mod-gallerym .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 5rem;} .mod-gallerym .bg_effect { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; transform: translateX(-50%) translateY(-50%); } .mod-gallerym .bg_effect img {width: 100%; height: 100%; object-fit: cover;} .mod-gallerym .owl-item .item {height: 450px; width: 100%} .mod-gallerym .owl-item .item__image {height: 100%; width: 100%} .mod-gallerym .owl-item .item__image img {height: 100%; object-fit: cover; border-radius: 1rem;} /* Метод */ .mod-metod {background: transparent!important;} .mod-metod .bg { position: absolute; z-index: -1; padding: 11rem 0; } .mod-metod .container {padding-top: 20rem;} .mod-metod .title {margin-bottom: 1.8rem;} .mod-metod .svg_element1 { position: absolute; right: -13%; top: 2%;} .mod-metod .svg_element2 { position: absolute; bottom: 28%; left: -14%; } .mod-metod .right {position: relative;} .mod-metod .list .item { border-radius: 1.25rem; background: rgba(255, 255, 255, 0.40); /* backdrop-filter: blur(2.5px); */ display: flex; padding: 1.25rem 2.1875rem 1.25rem 2.8rem; align-items: flex-start; gap: 0.625rem; position: relative; } .mod-metod .list {display: flex; flex-direction: column; gap: 1.88rem;} .mod-metod .list .item::before { content: ""; background: radial-gradient(70.71% 70.71% at 50% 50%, #FFAE17 0%, rgba(255, 255, 255, 0.40) 63.02%, rgba(255, 255, 255, 0.00) 100%); width: 1.875rem; height: 1.875rem; position: absolute; left: 1%; top: 0; margin-top: 1.25rem; } .mod-metod .introtext p {margin-bottom: 2rem;} .mod-metod .play_btn--purple { position: absolute; top: 15rem; left: 5rem; z-index: 3; cursor: pointer;} .mod-metod .play_btn--purple::before { content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #FFAACB; opacity: 0.1; animation: outlinebtn 4s ease-in-out infinite; border-radius: 50%; } .mod-metod .play_btn--yellow { position: absolute; bottom: -11%; right: 6%; z-index: 2; cursor: pointer;} .mod-metod .play_btn--yellow::before { content: ""; width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--yellow); opacity: 0.1; animation: outlinebtn 4s ease-in-out infinite; border-radius: 50%; } /* Отзывы */ .mod-otzyvy { margin: 13.75rem 0; background: transparent!important;} .mod-otzyvy .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 5rem;} .mod-otzyvy .item {border-radius: 1.25rem; background: #FFF; box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.10), 0px 0px 5px 0px rgba(0, 0, 0, 0.10); display: flex; padding: 2.5rem; flex-direction: column; align-items: flex-start; gap: 1.25rem; flex: 1 0 0; height: 100%;} .mod-otzyvy .owl-carousel .owl-stage {display: flex;} .mod-otzyvy .owl-carousel .owl-stage-outer {padding: 1rem 0;} #otzyvyall .mod-otzyvy {row-gap: 2rem;} #otzyvyall .modal-header {display: flex;padding: 3rem 11.25rem 0 11.25rem;flex-direction: column;border-bottom: 0; margin-bottom: 3rem;} #otzyvyall .modal-body { padding: 0 5rem; } /* До после */ .mod-beforeafter {background: transparent!important; margin-top: 13rem;} .mod-beforeafter .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 4.5rem;} .mod-beforeafter .element1 {left: 0; top: -25%; position: absolute;} .mod-beforeafter .element2 {right: 0; top: 15%; position: absolute;} .mod-beforeafter .owl-carousel .owl-stage-outer {padding: 2rem 0;} .mod-beforeafter .owl-item .item { transition: 1s; border-radius: 1.25rem; border: 4px solid var(--yellow); display: flex; padding: 1.875rem; align-items: center; gap: 0.625rem; height: 100%; transform: scale(0.8); } .mod-beforeafter .owl-item .item .item__video { width: 100%; height: 100%; } .mod-beforeafter .owl-item .item .item__video video { width: 100%; height: 100%; object-fit: contain; border-radius: 1.25rem; background-color: var(--black); } .mod-beforeafter .owl-item.center .item {transform: scale(1)} .mod-beforeafter .owl-carousel .owl-stage {display: flex;} .mod-beforeafter .owl-carousel .owl-nav { max-width: 40%; } /* .mod-beforeafter .owl-item .item {transition: 1s; border-radius: 1.25rem; border: 4px solid var(--yellow); display: flex; padding: 1.875rem; align-items: center; gap: 0.625rem;} .mod-beforeafter .owl-nav {max-width: 35%;} .mod-beforeafter .owl-carousel .owl-stage {display: flex;} .mod-beforeafter .owl-item .item {height: 800px; width: 100%} .mod-beforeafter .owl-item .item__video {height: 100%; width: 100%} .mod-beforeafter .owl-item .item__video video {height: 100%; width: 100%; object-fit: cover;} */ #beforeafterall .row {row-gap: 2rem;} #beforeafterall .item {width: 100%; height: 100%} #beforeafterall .item .item__video {width: 100%; height: 100%} #beforeafterall .item .item__video video {width: 100%; height: 100%; object-fit: cover;} #beforeafterall .modal-header {display: flex;padding: 3rem 11.25rem 0 11.25rem;flex-direction: column;border-bottom: 0; margin-bottom: 3rem;} #beforeafterall .modal-body { padding: 2rem 5rem; } #beforeafterall .modal-header .btn-close { position: absolute; right: 2rem; top: 3rem; width: 10px; height: 10px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: contain; opacity: 1; } /* До после мобилка */ .mod-beforeafter {display: block;} .mod-beforeafterm {display: none;} .mod-beforeafterm {background: transparent!important; margin-top: 13rem;} .mod-beforeafterm .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 4.5rem;} .mod-beforeafterm .element1 {left: 0; top: -25%; position: absolute;} .mod-beforeafterm .element2 {right: 0; top: 15%; position: absolute;} .mod-beforeafterm .owl-item .item {height: 450px; width: 100%} .mod-beforeafterm .owl-item .item__video {height: 100%; width: 100%} .mod-beforeafterm .owl-item .item__video video {height: 100%; width: 100%; object-fit: cover; border-radius: 1rem;} /* НАСТАВНИЦА */ .mod-mentor {background: var(--dark)!important;} .mod-mentor .person { position: absolute; left: 0; bottom: 0; z-index: 2;} .mod-mentor .bg_effect { position: absolute; top: 0; left: 0; z-index: 1; height: 100%;} .mod-mentor .bg_effect img {height: 100%; object-fit: cover;} .mod-mentor .ball { display: flex; flex-direction: column; align-items: flex-end; position: absolute; right: 0; } .mod-mentor .right {padding-top: 5rem; padding-bottom: 5rem; position: relative; z-index: 3;} .mod-mentor .ball__item1 { margin-top: -3rem; animation: flytopbottom 3s ease infinite;} .mod-mentor .ball__item2 { animation: flybottomtop 3s ease infinite; } .mod-mentor .subtitle { margin-top: 1.38rem; } .mod-mentor ul.list { display: flex; flex-direction: column; gap: 2rem; margin-top: 1.38rem; } .mod-mentor .list .item { list-style: none; position: relative; } .mod-mentor .list .item::before { content: ""; width: 1.875rem; height: 1.875rem; position: absolute; left: -5%; top: 0; background: linear-gradient(135deg, #FFF 0%, var(--yellow) 67.71%, #FFAE17 100%); border-radius: 50%; } .mod-mentor .btn__wrap { display: flex; align-items: center; gap: 1.25rem; justify-content: flex-end; } .mod-mentor .btn__wrap .btn-yellow {padding: 1.5rem 6rem;} @keyframes flytopbottom { 0% { transform: translateY(0); } 50% { transform: translateY(-15%); } 100% { transform: translateY(0); } } @keyframes flybottomtop { 0% { transform: translateY(0); } 50% { transform: translateY(20%); } 100% { transform: translateY(0); } } /* Свяжитесь со мной */ .mod-fos {padding: 13rem 0;} .mod-fos::before { background: linear-gradient(7deg, #C5B4AA 5.8%, rgba(219, 206, 199, 0.78) 50.57%, #FFF 91.76%), url(), lightgray 50% / cover no-repeat; filter: blur(40px); } .mod-fos .bg__effect {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; z-index: -1;} .mod-fos .element1 {position: absolute; top: 50%; transform: translateY(-50%); right: -20%;} .mod-fos .container { display: flex; flex-direction: column; gap: 5.8rem; } .mod-fos form { border-radius: 1.25rem; border: 3px solid var(--yellow); background: #FFF; display: flex; padding: 3.125rem; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; margin: auto; } .mod-fos form input, .mod-fos form textarea { border-radius: 1.875rem; background: #F5F5F5; display: flex; padding: 1.875rem 0rem 1.875rem 1.875rem; align-items: flex-start; gap: 0.625rem; align-self: stretch; border: none;} .mod-fos form input::placeholder, .mod-fos form textarea::placeholder { color: #1C1C1C; font-family: Source Sans Pro; font-size: 1.25rem; font-weight: 400; line-height: 110%; border: 0; } .mod-fos .btn-yellow { padding: 1.2rem 6rem; } .mod-fos .row {justify-content: center;} /* Фос модалка */ #fos form { background: #FFF; display: flex; padding: 3.125rem; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; margin: auto; padding-top: 0; } #fos form input, #fos form textarea { border-radius: 1.875rem; background: #F5F5F5; display: flex; padding: 1.875rem 0rem 1.875rem 1.875rem; align-items: flex-start; gap: 0.625rem; align-self: stretch; border: none;} #fos form input::placeholder, #fos form textarea::placeholder { color: #1C1C1C; font-family: Source Sans Pro; font-size: 1.25rem; font-weight: 400; line-height: 110%; border: 0; } #fos .btn-yellow { padding: 1.2rem 6rem; } #fos .modal-header {border: none; display: flex; justify-content: center; padding-top: 2rem; } #fos .modal-header .btn-close { position: absolute; right: 2rem; top: 3rem; width: 10px; height: 10px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: contain; opacity: 1; } #fos .modal-content { border-radius: 1.25rem; border: 3px solid var(--yellow); background: #FFF; } /* Курсы модалки */ .cursemodal .modal-header {display: flex;padding: 3rem 11.25rem 0 11.25rem;flex-direction: column;border-bottom: 0;} .cursemodal .modal-body { overflow-y: auto; padding: 2rem 5rem; height: 29rem; overflow-y: scroll; margin-bottom: 3rem; } .cursemodal .modal-body::-webkit-scrollbar { width: 7px; } .cursemodal .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.10);; border-radius: 20px; } .cursemodal .modal-body::-webkit-scrollbar-thumb { background-color: var(--yellow); border-radius: 20px; border: 3px solid transparent; } .cursemodal .modal-header .btn-close { position: absolute; right: 2rem; top: 3rem; width: 10px; height: 10px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: contain; opacity: 1; } .cursemodal .btn__wrap { margin-bottom: 4.5rem; padding: 0 4.5rem;} /* Сказки модалка */ #taleall .modal-body { display: flex; padding: 3.125rem; flex-direction: column; justify-content: flex-start; align-items: center; gap: 2rem; height: 590px; } #taleall .modal-body::-webkit-scrollbar { width: 7px; } #taleall .modal-body::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.10);; border-radius: 20px; } #taleall .modal-body::-webkit-scrollbar-thumb { background-color: var(--yellow); border-radius: 20px; border: 3px solid transparent; } #taleall .modal-bottom { display: flex; justify-content: flex-end; gap: 2rem; align-items: center; padding: 3.125rem; padding-top: 0.5rem; } #taleall .btn-yellow { padding: 1.2rem 3rem; } #taleall .modal-header {border: none; display: flex; justify-content: center; padding-top: 2rem; } #taleall .modal-header .btn-close { position: absolute; right: 2rem; top: 3rem; width: 10px; height: 10px; background: url('data:image/svg+xml,'); background-repeat: no-repeat; background-size: contain; opacity: 1; } #taleall .modal-content { border-radius: 1.25rem; background: #FFF; } /* Видеоотзывы */ .mod-videootzyv {margin-top: 13rem; background: transparent!important;} .mod-videootzyv .top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3rem; } .mod-videootzyv .item {position: relative; height: 100%;} .mod-videootzyv .owl-carousel .owl-stage-outer {padding: 2rem 0;} .mod-videootzyv .owl-item .item { transition: 1s; border-radius: 1.25rem; border: 4px solid var(--yellow); display: flex; padding: 1.875rem; align-items: center; gap: 0.625rem; height: 100%; transform: scale(0.8); } .mod-videootzyv .owl-item .item .item__video { width: 100%; height: 100%; } .mod-videootzyv .owl-item .item .item__video video { width: 100%; height: 100%; object-fit: contain; border-radius: 1.25rem; background-color: var(--black); } .mod-videootzyv .owl-item.center .item {transform: scale(1)} .mod-videootzyv .owl-carousel .owl-stage {display: flex;} .mod-videootzyv .owl-carousel .owl-nav { max-width: 40%; } .mod-videootzyv {position: relative;} .mod-videootzyv .element_design { position: absolute; left: -20%; } .mod-videootzyv .element_design2 { position: absolute; right: -7%; bottom: -10%; } /* Футер */ footer {background-color: var(--dark)!important; padding-top: 4rem; padding-bottom: 2.5rem;} .mod-footer .top { display: flex; justify-content: space-between; margin-bottom: 6rem; position: relative;} .mod-footer .nav ul { display: flex; align-items: center; gap: 5rem; } .mod-footer .nav ul li { font-family: Source Sans Pro; font-size: 1.875rem; font-style: normal; font-weight: 400; line-height: 110%; text-transform: uppercase; list-style: none;} .mod-footer .nav ul li a {color: #FFF; transition: 0.4s;} .mod-footer .nav ul li:hover a {color: var(--yellow);} .mod-footer .bottom { display: flex; align-items: center; justify-content: space-between; } .mod-footer .bottom .social__list { display: flex; gap: 1.875rem; } .mod-footer {position: relative;} .mod-footer .element_design1 { position: absolute; left: -12%; bottom: -11%; } .mod-footer .element_design2 { position: absolute; right: -12%; bottom: -10%; } .mod-footer .element_design3 { position: absolute; left: 10%; bottom: 0; } .mod-footer .element_design4 { position: absolute; left: 16%; bottom: -50%; } /* Адаптация */ @media screen and (max-width: 1560px) { .mod-about .right .title {margin-right: 12rem;} .mod-approach .technology__video {align-self: center;} .mod-smogla .btn-play {left: 2%;} .mod-smogla .text {margin-left: 10rem;} .mod-smogla .container {margin-left: unset;} .mod-smogla #gear65 {left: 0;} .mod-channel .btn-yellow {white-space: nowrap;} .mod-give {margin-bottom: 0;} .mod-give .element1 {left: -25%;} .mod-footer .nav ul {gap: 3rem; position: relative; z-index: 30;} .mod-mentor .list .item {padding-left: 2rem;} .mod-gallery .owl-carousel .owl-stage { margin: -9rem 0; } } @media screen and (max-width: 1400px) { .mod-banner .row .left {align-self: end;} header .mod-menu.mod-list.nav {gap: 2rem;} .mod-banner .title p:nth-child(3) {margin-left: 10rem;} .mod-golosoved .circle {transform: scale(0.9); z-index: 20; } .mod-about .bg_effect img {object-fit: cover;} .mod-approach .list__item .three_block:nth-child(1) {justify-content: space-between;} .mod-footer .top {align-items: center;} .mod-footer .nav ul li {font-size: 1.4rem;} .mod-songs .person {transform: scale(0.9);} .mod-gallery .owl-carousel .owl-stage { margin: -6rem 0; } .mod-give .element1 { left: -40%; } .mod-metod { margin-top: 20rem; } .mod-metod .play_btn--purple {top: 0rem; left: 1rem;} .mod-metod .bg {z-index: -5; padding: 0;} .mod-metod .left {align-self: center;} .mod-metod .container {padding-top: 4rem;} .mod-metod .title {font-size: 2.75rem;} .mod-metod .introtext { font-size: 1.2rem; } .mod-metod .svg_element1 { position: absolute; right: -18%; top: 2%; } .mod-metod .svg_element2 { position: absolute; bottom: 28%; left: -19%; } .mod-metod .list .item .item__subtitle { font-size: 1rem; } .mod-give .item .subtitle {padding: 3rem 1.5rem 3rem 1.5rem;} } @media screen and (max-width: 1200px) { .mod-gallery {display: none;} .mod-gallerym {display: block;} .mod-beforeafter {display: none;} .mod-beforeafterm {display: block;} .mod-banner .row .left {align-self: end;} .mod-banner .title p:nth-child(3) { margin-left: 9rem; } .mod-golosoved .circle { width: 100%; transform: scale(0.8); } .mod-approach .list__item .three_block:nth-child(1) {justify-content: space-between;} .mod-about .right .title {margin-right: 0;} .mod-about .right .list {padding-left: 3rem;} .mod-about .row { display: flex; flex-direction: column-reverse; } h3, .h3 { font-family: Playfair Display SC; font-size: 2.75rem; font-weight: 400; line-height: 100%; } .mod-songs .person {transform: scale(0.8);} .mod-channel .right .title {text-align: center;} .mod-channel .subtitle {text-align: center;} .mod-channel .person {display: none;} .mod-give .col_wrap {padding: 0 2rem;} .mod-give .element1 { left: -45%; } .mod-mentor .person {filter: brightness(0.9);} .mod-mentor .ball {right: unset; left: 0; top: 15%;} .mod-mentor .ball__item2 {display: none;} .mod-fos .element1 { right: -20%; } .mod-footer .element_design2 {right: -20%;} .mod-footer .bottom { display: flex; text-align: center; justify-content: space-between; flex-direction: column; align-items: center; gap: 2rem; } .mod-metod .svg_element1 {display: none;} .mod-metod .svg_element2 {display: none;} .mod-metod .play_btn--yellow {width: 100px; bottom: 0;} .mod-metod .play_btn--purple {width: 100px;} .mod-footer .top {gap: 2rem; flex-direction: column; align-items: center;} } @media screen and (max-width: 992px) { .mod-approach .item .item__desc {font-size: 1.1rem;} .mod-approach .list__item .three_block:nth-child(3) .item::before {left: -15%;} .mod-approach .list__item .three_block:nth-child(1) .item::before {right: -15%;} .mod-videootzyv .owl-carousel .owl-nav { max-width: 65%; } } @media screen and (max-width: 768px) { .mod-banner .right .title {filter: drop-shadow(2px 4px 6px #0000005e);} .mod-golosoved .right {align-self: center;} .mod-approach .list__item .three_block:nth-child(1) .item:nth-child(2) {margin-right: unset;} .mod-approach .list__item .three_block:nth-child(3) .item:nth-child(2) {margin-left: unset;} h1, .h1 { font-family: Playfair Display SC; font-size: 4rem; font-weight: 400; line-height: 100%;} h2, .h2 { font-family: Playfair Display SC; font-size: 3rem; font-weight: 400; line-height: 100%; } h3, .h3 { font-family: Playfair Display SC; font-size: 2.75rem; font-weight: 400; line-height: 100%; } .h3s2 { font-family: Source Sans Pro; font-size: 1.75rem; font-style: normal; font-weight: 300; line-height: 100%;} h4, .h4 { font-family: Playfair Display SC; font-size: 1.5rem; font-weight: 400; line-height: 100%;} .h4s2 { font-family: Source Sans Pro; font-size: 1.5rem; font-weight: 400; line-height: 100%;} h5, .h5 { font-family: Source Sans Pro; font-size: 1.175rem; font-weight: 400; line-height: 100%;} h6, .h6 { font-family: Source Sans Pro; font-size: 1rem; font-weight: 400; line-height: 100%;} .h6s2 { font-family: Playfair Display SC; font-size: 1rem; font-weight: 400; line-height: 100%; } .s1 { font-family: Source Sans Pro; font-size: 1rem; font-weight: 400; line-height: 100%;} .s2 { font-family: Source Sans Pro; font-size: 1rem; font-weight: 400; line-height: 100%;} .mod-golosoved .circle {transform: scale(0.7);} .mod-banner .row .left {margin-left: -12rem;} .mod-banner .right .title {filter: drop-shadow(2px 4px 6px #0000002e);} .mod-banner .arrow .svg_arrow {display: none;} .mod-banner .author span:last-child {margin-left: 0;} .mod-banner .author {text-align: center;} .mod-about .element_design1 {display: none;} .mod-banner .cover {bottom: -10%;} .mod-banner .right { position: absolute; left: 50%; bottom: 25%; padding-right: 1rem; display: flex; transform: translateX(-50%); justify-content: space-between; flex-direction: column; align-items: flex-end; } .mod-cmi .top {margin-bottom: 4rem;} .mod-approach .list__item .three_block:nth-child(1) {display: flex; text-align: left;} .mod-approach .item { position: relative; padding-left: 2rem; } .mod-approach .technology__video { display: flex; justify-content: center; margin: 2rem 0; } .mod-approach .technology__video img {width: 50%;} .mod-approach .list__item .three_block:nth-child(1) .item::before {left: -5%;} .mod-approach .list__item .three_block:nth-child(3) .item::before {left: -5%;} .mod-songs .left { margin-bottom: 5rem; display: flex; justify-content: center; } .mod-smogla #gear65 { width: 193px!important; height: 160px!important;} .mod-channel .element1 {display: none;} .mod-channel .element2 {display: none;} .mod-channel .song {flex-wrap: wrap; justify-content: center;} .topbottom__circle::before {height: 4.125rem;} .topbottom__circle::after {height: 4.125rem;} .mod-channel .books__wrapper .book__list {transform: scale(0.8);} .mod-smogla .btn-play { left: 0%; } .mod-smogla .text {margin-left: unset;} .mod-smogla .btn-play img { width: 100px; height: 100px; } .mod-give .col_wrap:nth-child(2) {margin: 0;} .mod-give .element1 { left: -35%; bottom: -10%; } .mod-give .element1 img {width: 50%} .mod-beforeafter .element1 {display: none;} .mod-beforeafter .element2 {display: none;} .mod-mentor .ball { display: flex; align-items: flex-start; } .mod-mentor .ball .ball__item1 { width: 50%; } .mod-videootzyv .owl-carousel .owl-nav { max-width: 70%; } .mod-fos .element1 { right: -15%; width: 50%; } .mod-footer .nav ul {column-gap: 2rem; flex-wrap: wrap; justify-content: center; } .mod-footer .bottom {flex-direction: column; gap: 2rem; text-align: center;} .mod-footer .element_design2 {display: none;} .mod-metod { background: #efe6ea!important; } .mod-metod .container { padding-top: 5rem; padding-bottom: 5rem; } .mod-mentor .ball {display: none;} .mod-metod .play_btn--yellow {bottom: 6%; right: 6%;} .mod-metod .play_btn--yellow img {width: 75px; height: 75px;} .mod-metod .play_btn--purple {top: 7rem; left: 19rem;} .mod-metod .play_btn--purple img {width: 75px; height: 75px;} .mod-beforeafter {margin-top: 6rem;} .mod-give .element2 {right: -25%;} .mod-curse {margin-top: 6.75rem;} .mod-songs {margin-top: 6.5rem;} .mod-clip {margin: 6.5rem 0;} .mod-golosoved .row {row-gap: 2rem;} .mod-metod .svg_element2 {display: none;} .mod-metod .svg_element1 {display: none;} .mod-about .element_design2 {display: none;} .mod-metod::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='50' viewBox='0 0 1920 50' fill='none'%3E%3Cpath d='M0 0H1920C1920 0 1325 50 960.5 50C579 50 0 0 0 0Z' fill='white'/%3E%3C/svg%3E"); position: absolute; top: -1px; width: 100vw; height: 4.125rem; background-repeat: no-repeat; background-position: center; z-index: 20;} .mod-metod::after { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='50' viewBox='0 0 1920 50' fill='none'%3E%3Cpath d='M1920 50H0C0 50 595 0 959.5 0C1341 0 1920 50 1920 50Z' fill='white'/%3E%3C/svg%3E"); position: absolute; bottom: -1px; width: 100vw; height: 4.125rem; background-repeat: no-repeat; background-position: center; z-index: 20;} .mod-golosoved {margin-bottom: 6rem;} } @media screen and (max-width: 576px) { .mod-banner .leaf {display: none;} .mod-smogla .btn-play { left: 20%; top: 40%; } .mod-smogla .text { margin-left: 10rem; } .mod-smogla #gear65 { left: 3%; } .mod-smogla .bg img { height: 300px; object-fit: cover; } .mod-smogla .bg { margin: 0.5rem 0; } .mod-smogla .text p:nth-child(3) { margin-left: 7rem; } .mod-smogla .text p:nth-child(4) { margin-left: 15rem; } .mod-golos .title {text-align: center; padding-top: 2rem;} .mod-banner .right {gap: 3rem;} .mod-songs .person { transform: scale(0.7); } .mod-songs .list { height: 360px; } .topbottom__circle::before { left: 50%; transform: translateX(-50%); height: 5.125rem; top: -3px; width: 100%;} .topbottom__circle::after { left: 50%; transform: translateX(-50%); height: 5.125rem; bottom: -3px; width: 100%;} .mod-about .right .author {padding-right: 2rem; margin-bottom: -2rem;} .mod-about .right .list {padding-left: 1rem;} .mod-banner .list_social {left: 4%;} /* .container .moduletable.fullbg {padding-left: unset!important; padding-right: unset!important;} */ .mod-approach .list__item .three_block:nth-child(3) .item:nth-child(2) {margin-left: unset;} .mod-approach .list__item .three_block:nth-child(1) { padding: 0 3rem; text-align: center;} .mod-approach .list__item .three_block:nth-child(3) { padding: 0 3rem; text-align: center;} .mod-approach .list__item .three_block:nth-child(1) .item:nth-child(2) {margin-right: unset;} .mod-give .row {row-gap: 3rem;} .btn-yellow {padding: 1rem 2rem;} .mod-channel .player-controls {align-items: center;} .mod-channgel .tg img {width: 30px;} h2, .h2 { font-family: Playfair Display SC; font-size: 2.5rem; font-weight: 400; line-height: 100%; } .mod-golos .video__player .play_btn {width: 50px;} .mod-give .element1 {display: none;} .mod-give .element2 {display: none;} .mod-approach .list__item .three_block:nth-child(1) {gap: 3rem;} .mod-approach .list__item .three_block:nth-child(3) {gap: 3rem;} .mod-approach .title {font-size: 2rem; margin-top: -0.5rem;} .mod-songs .top { display: flex; align-items: center; margin-bottom: 2rem; justify-content: center; } .mod-songs .muteBtn.unmute, .mod-songs .muteBtn.mute, .mod-channel .muteBtn.unmute, .mod-channel .muteBtn.mute {width: 20px; height: 20px;} .mod-channel .books__wrapper .element_book4 {display: none;} .mod-channel .books__wrapper .element_book5 {display: none;} .mod-channel .books__wrapper .element_book1 { top: 20%; left: -10%; } .mod-channel .books__wrapper .element_book2 { top: 10%; right: -30%; } .mod-channel .books__wrapper .element_book3 { right: -30%; top: -20%; } .mod-curse .btn__wrap { margin-top: auto; margin-left: auto; margin-right: auto; } .mod-curse .owl-carousel .item .btn__wrap .btn-yellow {border-radius: 1rem;} .mod-give .title {margin-bottom: 5rem;} .mod-give .item .subtitle { padding: 3rem 1rem 2rem 1rem; font-size: 1.3rem!important; } .mod-gallerym .owl-item .item { height: 250px;} .mod-beforeafterm .owl-item .item {height: 350px;} .mod-mentor .list { font-size: 1.2rem; } .mod-mentor .right {padding-top: 7rem; padding-bottom: 0;} .mod-mentor .btn__wrap {padding-top: 2rem;} .mod-mentor .btn__wrap img {width: 40px;} .mod-mentor .row { display: flex; flex-direction: column-reverse; } .mod-mentor .left { margin: 0 -2rem; } .mod-mentor .left .person {width: 800px; position: unset;} .mod-videootzyv .owl-carousel .owl-nav svg {width: 30px;} .mod-videootzyv .owl-item .item {padding: 1rem;} .mod-metod::before {left: 50%; transform: translateX(-50%); height: 5.125rem;} .mod-metod::after {left: 50%; transform: translateX(-50%); height: 5.125rem;} .mod-metod .play_btn--yellow { bottom: 0%; right: 6%; z-index: 50; } .mod-metod .play_btn--purple { top: 8rem; left: 30rem; } .mod-banner .logo__mobile {display: block; position: absolute; right: 8%; top: -20%; filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25)); } #mod-custom111 {display: none;} header #top_menu { row-gap: 1rem; display: flex; align-items: flex-start; padding-top: 1rem; } .mod-banner {padding-top: 125px!important;} header.navbar {position: absolute;} header .mod-menu.mod-list.nav { gap: 0rem; width: 100%; display: flex; justify-content: space-between; } header .mod-menu li.nav-item {font-size: 1.6rem;} } /* Анимации */ .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} .pulse::after, .pulse::before { content: ''; position: absolute; border: 2px solid #fec864; left: -20px; opacity: 0; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: pulse 2.5s linear infinite; } .pulse::after { animation-delay: 1.25s; } @keyframes pulse{ 0% { transform: scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }