.container { margin: 0 auto; max-width: 1252px; } .container-2nd { margin: 0 auto; max-width: 1172px; } .title, .chapter { font-weight: 500; font-size: 35px; line-height: 1.4; } .sub-title { font-size: 28px; font-weight: 500; } .text { font-size: 18px; font-weight: 400; line-height: 25.2px; } .add-text { font-size: 18px; font-weight: 300; line-height: 22px; } :root { --orange-color: var(--red); --white-color: #FFFFFF; --gray-color: #111111; --brown-color: #673E3E; } .first_block { background-image: url('/images/order_music/firstblock.webp'); background-repeat: no-repeat; padding: 120px 0; min-height: 819px; background-size: cover; background-position: right center; } .first_block-inner { text-align: center; } h2.first_block-title { color: var(--white-color); text-transform: uppercase; margin-bottom: 40px; } .first_block-subtitle { margin-bottom: 80px; line-height: 24px; font-size: 20px; font-weight: 400; color: var(--white-color); text-transform: uppercase; } .first_block-text_before_buttons { color: var(--white-color); margin-bottom: 12px; } .first_block-buttons { display: flex; justify-content: center; align-items: center; margin-bottom: 60px; gap: 18px; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 20; } .first_block-button-opacity { display: flex; justify-content: center; align-items: center; background: transparent; padding: 16px 40px; color: var(--white-color); border: 1px solid var(--white-color); border-radius: 5px; width: auto; height: auto; cursor: pointer; gap: 5px; } .first_block-button-opacity i { font-size: 18px; } .first_block-button-opacity-left-arrow { transform: rotate(180deg); } .first_block-button-opacity:hover { color: var(--orange-color); background-color: var(--white-color); cursor: pointer; transition: 0.8s; } .first_block-personal-text { font-size: 52px; font-weight: 500; opacity: 50%; color: var(--white-color); text-transform: uppercase; margin-bottom: 60px; } .first_block-button-main { color: var(--white-color); background-color: var(--orange-color); padding: 16px 40px; border-radius: 5px; border: none; width: 290px; height: 58px; cursor: pointer; } .first_block-button-main:hover { opacity: 0.8; transition: 0.8s; } @media screen and (max-width: 780px) { .first_block { background-image: url('/images/order_music/firstblock780.webp'); background-size: cover; padding: 40px 60px; min-height: 600px; } .first_block-title { width: 660px; max-width: 100%; margin: 0 auto; margin-bottom: 32px; } .first_block-subtitle { margin-bottom: 32px; } .first_block-buttons { margin-bottom: 40px; } .first_block-button-opacity { padding: 10px 24px; max-width: 100%; } .first_block-button-main { width: 302px; padding: 16px 46px; } .first_block-personal-text { margin-bottom: 40px; } } @media screen and (max-width:420px) { .first_block-button-main { width: 258px; height: 42px; padding: 16px 24px; max-width: 100%; } } @media screen and (max-width: 380px) { .first_block { background-image: url('/images/order_music/firstblock380.webp'); padding: 40px 16px; min-height: 585px; } .first_block-title { width: 348px; max-width: 100%; margin: 0 auto; margin-bottom: 16px; font-size: 28px; line-height: normal; } .first_block-subtitle { font-size: 18px; margin-bottom: 16px; font-weight: 300; line-height: 25.2px; text-transform: none; } .first_block-text_before_buttons { margin-bottom: 20px; } .first_block-buttons { margin-bottom: 32px; } .first_block-personal-text { text-transform: none; margin-bottom: 32px; font-size: 35px; line-height: 1.4; } .first_block-button-opacity { padding: 10px 24px; max-width: 100%; } .first_block-button-main { width: 258px; height: 42px; padding: 8px 24px; max-width: 100%; } } @media screen and (max-width: 360px) { .first_block-buttons { flex-direction: column; } .first_block-button-white { margin-bottom: 15px; } } .reviews_banner_tariffs { min-height: auto; background-image: url('/images/order_music/razdel.webp'); background-size: cover; } .reviews_banner_tariffs .reviews { padding: 50px 0; min-height: auto; } .reviews-header { display: flex; justify-content: space-between; margin-bottom: 25px; } .reviews-header-arrows { display: flex; justify-content: center; align-items: center; gap: 20px; } .reviews-header-arrow { cursor: pointer; opacity: 0.45; } .reviews-header-arrow:hover { color: var(--red); opacity: 1; transition: 0.8s; } .reviews-scroll { width: 100%; display: block; } .owl-nav { position: absolute; top: -78px; right: 0; width: auto; height: auto; display: flex; align-items: center; justify-content: center; gap: 20px; } .reviews-scroll .owl-prev, .reviews-scroll .owl-next, .get_slider_tariffs .owl-prev, .get_slider_tariffs .owl-next { width: 45px; height: 16px; display: block; background: none !important; position: relative; top: auto; left: auto; right: auto; text-indent: unset; } .reviews-scroll .owl-prev svg, .reviews-scroll .owl-next svg, .get_slider_tariffs .owl-prev svg, .get_slider_tariffs .owl-next svg { fill: var(--brown-color); } .reviews-scroll::-webkit-scrollbar { display: none; } .reviews-scroll-video { width: 272px; height: 475px; flex-shrink: 0; position: relative; border-radius: 20px; overflow: hidden; } .reviews-scroll-video::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 15px #A08771; pointer-events: none; } .reviews-scroll-video iframe { width: 100%; height: 100%; border-radius: 25px; } @media screen and (max-width: 1900px) { .reviews-scroll { width: 1300px; margin: 0 auto; } } @media screen and (max-width: 1420px) { .reviews-scroll { width: 1100px; margin: 0 auto; } } @media screen and (max-width: 1120px) { .reviews-scroll { width: 950px; margin: 0 auto; } } @media screen and (max-width: 970px) { .reviews-scroll { width: 750px; margin: 0 auto; } } @media screen and (max-width: 780px) { .reviews_banner_tariffs { padding: 0px; background-image: url('/images/order_music/videobanner780.webp'); } .reviews { margin-top: 0px; padding: 0px; min-height: auto; justify-content: flex-start; align-items: flex-start; } .container-reviews { margin-left: 60px; padding: 0 20px; } .reviews-header { height: auto; display: table; } .reviews-scroll { width: 92vw; margin: 0; } .reviews-header-text { margin: 0; margin-top: 77px; margin-bottom: 20px; line-height: auto; } .reviews-header-arrows { display: none; } .reviews-scroll-video-780px-hidden { display: none; } } @media screen and (max-width:750px) { .reviews-scroll { width: 80vw; } } @media screen and (max-width: 380px) { .reviews { padding-left: 16px; min-height: 396px; } .owl-nav { top: -25px; left: 0; } .reviews_banner_tariffs { background-image: url('/images/order_music/videobanner380.webp'); } .reviews-scroll-video { width: 100%; height: 248px; } .reviews-scroll-video::before { box-shadow: inset 0 0 0 10px #A08771; } .container-reviews { margin-left: 0px; } .reviews-scroll { width: 100%; gap: 12px; } .reviews-header-text { text-transform: uppercase; font-size: 28px; line-height: auto; text-align: center; margin-top: 20px; } @media screen and (max-width: 370px) { .reviews-scroll { width: 290px; } } } .banner { padding: 60px 0; background-color: rgba(103, 62, 62, 0.7); } .banner_inner { background-color: var(--brown-color); display: flex; justify-content: space-between; border-radius: 20px; overflow: hidden; } .banner_left { padding: 42px 0; color: var(--white-color); margin: 0 auto; } .banner_left_title { text-align: center; margin-bottom: 60px; } .banner_list { margin-bottom: 60px; list-style: none; padding: 0 50px; } .banner_list p { margin-bottom: 24px; } .banner_list p:last-child { margin-bottom: 0px; } .banner_pay-form { display: flex; justify-content: center; align-items: center; flex-direction: column; } .banner_pay-form-button { color: var(--white-color); background-color: var(--orange-color); padding: 16px 40px; border-radius: 5px; border: none; width: 160px; height: 58px; margin-bottom: 40px; cursor: pointer; } .banner_pay-form-button:hover { opacity: 0.8; transition: 0.8s; } .button_pay-form-text { color: var(--orange-color) } @media screen and (max-width: 1280px) { .banner { padding: 60px 20px; } .banner_left { padding: 42px 20px; } .banner_right-img { min-width: 50%; min-height: 100%; } } @media screen and (max-width: 960px) { .banner_list_elem { width: 400px; } } @media screen and (max-width: 780px) { .banner { padding: 60px; } .banner_inner { width: 660px; height: 581px; } .banner_left_title { margin-bottom: 32px; } .banner_right-img { min-width: 284px; content: url('/images/order_music/banner_right780.webp'); } .banner_list_elem { width: 352px; margin-bottom: 16px; } .banner_list { list-style: none; padding: 20px 0; margin: 0; } .banner_pay-form-button { margin-bottom: 25px; } .banner_left { padding: 12px; } .button_pay-form-text { width: 320px; text-align: center; } } @media screen and (max-width: 750px) { .banner { padding: 40px; margin-top: 20px; } .banner_inner { width: auto; height: auto; } .banner_right-img { min-width: auto; content: url('/images/order_music/banner_right780.webp'); } .button_pay-form-text { width: auto; text-align: center; } .banner_list_elem { width: auto; margin-bottom: 16px; } } @media screen and (max-width: 380px) { .banner { margin-top: 30px; padding: 0 16px; background-color: transparent; } .banner_left { padding: 0; } .banner_left_title { width: 100%; margin: 0; } .banner_right-img { display: none; } .banner_inner { width: 348px; padding: 45px 16px 40px; background-image: url('/images/order_music/banner_right380.webp'); background-size: cover; } .button_pay-form-text { width: 320px; text-align: center; } .banner_list_elem { width: 316px; } } @media screen and (max-width: 371px) { .banner { display: flex; justify-content: center; align-items: center; margin: 0 auto; margin-top: 0; } .banner_left_title { text-align: center; font-size: 28px; width: 220px; margin: 0 auto; } .banner_inner { width: 300px; margin: 0 auto; } .banner-left { width: auto; } .banner_list_elem { margin: 0 auto; font-size: 14px; width: auto; text-align: center; } .button_pay-form-text { width: 200px; text-align: center; } } .tariffs { min-height: 730px; padding-top: 60px; padding-bottom: 100px; } .tariffs-header { display: flex; justify-content: space-between; margin-bottom: 60px; } .tarrifs-header-arrows { display: flex; justify-content: center; align-items: center; gap: 20px; } .tarrifs-header-arrow { cursor: pointer; opacity: 0.45; } .tarrifs-header-arrow:hover { color: var(--red); opacity: 1; transition: 0.8s; } .tariffs-scroll { width: 100%; display: block; } .tariffs-scroll-card { background-image: url('/images/order_music/tarifback.webp'); position: relative; width: 572px; height: 510px; flex-shrink: 0; } .tariffs-scroll-card-content { padding: 40px; position: relative; z-index: 2; } h3.tariffs-scroll-card-title { margin-bottom: 40px; text-align: left; } .tariffs-scroll-card-list { display: flex; flex-direction: column; list-style: none; gap: 12px; margin-bottom: 54px; min-height: 102px; text-align: left; } .tariffs-scroll-card-list-item { color: rgba(17, 17, 17, 0.45); } .tariffs-scroll-card-block-price { margin-bottom: 22px; } .tariffs-scroll-card-block-price * { text-align: left; } .tariffs-scroll-card-block-old-price { text-decoration: line-through; color: rgba(17, 17, 17, 0.45); } .tariffs-scroll-card-block-new-price { color: var(--red); } .tariffs-scroll-card-block-button { padding: 16px 40px; background-color: var(--red); color: white; cursor: pointer; border-radius: 5px; float: left; display: flex; align-items: center; gap: 5px; justify-content: center; } .tariffs-scroll-card-block-button:hover { opacity: 0.8; transition: 0.8s; } .tariffs-scroll-card-img { position: absolute; bottom: 0; right: 0; z-index: 1; pointer-events: none; max-width: 270px; } @media screen and (max-width: 1900px) { .tariffs { padding-left: 15px; padding-right: 15px; } .tariffs-scroll { width: 1300px; margin: 0 auto; } } @media screen and (max-width: 1420px) { .tariffs-scroll { width: 1100px; margin: 0 auto; } } @media screen and (max-width: 1120px) { .tariffs-scroll { width: 950px; margin: 0 auto; } } @media screen and (max-width: 970px) { .tariffs-scroll { width: 750px; margin: 0 auto; } } @media screen and (max-width: 780px) { .tariffs { padding: 30px 60px 80px; min-height: 2667px; } .tariffs-header { margin-bottom: 40px; } .tariffs-scroll-card-content { padding: 40px 60px; } .tariffs-scroll { overflow-x: visible; overflow-y: visible; width: auto; display: grid; grid-template-columns: repeat(1, 1fr); gap: 40px } .tariffs-header-text { line-height: auto; } .tarrifs-header-arrows { display: none; } .tariffs-scroll-card { width: 660px; height: 461px; border: 1px solid var(--red); border-radius: 5px; } } @media screen and (max-width:770px) { .tariffs-scroll-card { margin: 0 auto; width: 600px; } } @media screen and (max-width:700px) { .tariffs-scroll-card { width: 500px; } } @media screen and (max-width:600px) { .tariffs-scroll-card { width: 348px; height: 417px; } .tariffs-scroll-card-block-button { padding: 6px 24px; background-color: var(--red); } .tariffs-scroll-card-img { width: auto !important; height: 150px; } .tariffs-scroll-card-content { padding: 40px 16px; height: auto; } .tariffs-scroll-card-title { margin-bottom: 24px; } } @media screen and (max-width:480px) { .tariffs-header-text { display: none; } .tariffs { padding: 0px 16px 40px; } } @media screen and (max-width:380px) { .tariffs { padding: 0 20px; min-height: auto; margin-top: 30px; margin-bottom: 30px; overflow: hidden; } .tariffs-header { margin-bottom: 0px; } .tariffs-scroll-card { width: 100%; height: auto; } .tariffs-header-text { display: none; } .tariffs-scroll-card-block { display: table; } .tariffs-scroll-card-list { margin-bottom: 20px; } .tariffs-scroll-card-block-price { margin-bottom: 0; } } @media screen and (max-width:370px) { .tariffs-scroll-card-img { width: 140px; height: 150px; } .tariffs-scroll-card { width: auto; height: auto; } } .text-chapter { padding: 100px 0; background-color: #FFE9DC; min-height: 834px; } .text-chapter-container { background-image: url('/images/order_music/text-background.webp'); background-color: rgba(255, 194, 194, 0.3); padding: 40px; border-radius: 50px; } .text-chapter-header { display: flex; justify-content: space-between; margin-bottom: 55px; } .text-chapter-header_left { width: 572px; height: 217px; padding-top: 20px; padding-bottom: 20px; padding-left: 40px; } .text-chapter-header_left-text { width: 490px; } .text-chapter-header_right { padding: 20px 36px 24px; background-color: var(--orange-color); border-radius: 10px; } .text-chapter-header_right-text { width: 400px; color: var(--white-color); font-size: 26.75px; line-height: 43.2px; font-weight: 300; } .text-chapter-footer { margin-left: 42px; } .text-chapter-footer-title { width: 1052px; height: 87px; text-align: center; font-size: 24px; font-weight: 700; margin: 0 auto; margin-bottom: 23px; } .text-chapter-footer-middle { text-align: center; margin-bottom: 23px; } .text-chapter-footer-lower { text-align: center; margin-bottom: 43px; } .text-chapter-footer-buttons { display: flex; justify-content: space-between; width: 514px; margin: 0 auto; } .text-chapter-footer-button1, .text-chapter-footer-button2 { background-color: var(--orange-color); color: var(--white-color); border: none; padding: 16px 46px; border-radius: 5px; cursor: pointer; } .text-chapter-footer-button1 { width: 237px; } .text-chapter-footer-button2 { width: 247px; } .text-chapter-footer-button1:hover, .text-chapter-footer-button2:hover { opacity: 0.8; transition: 0.8s; } @media screen and (max-width: 1280px) { .text-chapter-footer-title { width: auto; height: auto; } .text-chapter-header { justify-content: center; } .text-chapter-header_right { padding: 25px; width: 300px; } .text-chapter-header_right-text { width: 200px; color: var(--white-color); font-size: 20px; line-height: 25.2px; font-weight: 400; } } @media screen and (max-width: 780px) { .text-chapter { min-height: 724px; padding: 80px 60px; background-color: transparent; background-image: url('/images/order_music/text780.webp'); } .text-chapter-container { padding: 0px; background-image: none; background-color: transparent; } .text-chapter-header { margin-bottom: 27px; justify-content: center; } .text-chapter-header_left { padding: 0px; width: 436px; height: 202px; } .text-chapter-header_left-text { width: 436px; } .text-chapter-header_right { width: 211px; height: 217px; } .text-chapter-header_right-text { font-size: 18px; width: 171px; } .text-chapter-footer-title { width: 660px; margin-bottom: 20px; } .text-chapter-footer { margin-left: 0; } .text-chapter-br { display: none; } .text-chapter-footer-lower { width: 660px; margin: 0 auto; margin-bottom: 24px; } .text-chapter-footer-middle { margin: 0 auto; width: 640px; margin-bottom: 20px; } } @media screen and (max-width: 740px) { .text-chapter-footer-title { width: 450px; margin-bottom: 20px; } .text-chapter-footer-middle { width: 450px; } .text-chapter-header { height: 300px; } .text-chapter-header_left { max-width: 100%; width: 350px; } .text-chapter-header_left-text { width: auto; margin-right: 10px; } .text-chapter-footer-lower { width: 450px; } .text-chapter-footer-buttons { flex-direction: column; width: auto; align-items: center; gap: 15px; } } @media screen and (max-width: 611px) { .text-chapter-header { flex-direction: column; align-items: center; gap: 15px; margin-bottom: 20px; height: 600px; justify-content: space-between; } .text-chapter-footer-buttons { flex-direction: column; } .text-chapter-header_left { width: 100%; min-width: 0; max-width: 100%; } .text-chapter-header_left-text { max-width: 100%; width: 100%; min-width: 0; } .text-chapter-header_right { max-width: 100%; width: 100%; min-width: 0; } .text-chapter-header_right-text { max-width: 100%; width: auto; min-width: 0; } .text-chapter-footer-title { width: auto; min-width: 0; } .text-chapter-footer-lower { width: auto; min-width: 0; } .text-chapter-footer-middle { width: auto; min-width: 0; } } @media screen and (max-width: 380px) { .text-chapter { padding: 15px 16px 40px; } .text-chapter-header { justify-content: space-evenly; max-width: 100%; min-width: 348px; height: 380px; margin-bottom: 24px; } .text-chapter-header_left { width: 348px; margin-bottom: 20px; } .text-chapter-header_left-text { line-height: 22px; width: 348px; text-align: center; font-weight: 300; } .text-chapter-header_right { height: 141px; } .text-chapter-header_right-text { text-align: center; width: 308px; height: 101px; } .text-chapter-footer-lower { width: 270px; margin-bottom: 40px; } .text-chapter-footer-buttons { gap: 0px; } .text-chapter-footer-button1, .text-chapter-footer-button2 { width: 348px; height: 42px; display: flex; justify-content: center; align-items: center; } .text-chapter-footer-button1 { margin-bottom: 24px; } } @media screen and (max-width: 365px) { .text-chapter-header { min-width: 0; flex-direction: column; align-items: center; margin-bottom: 20px; height: 600px; justify-content: space-around; } .text-chapter-footer-buttons { flex-direction: column; } .text-chapter-header_left { width: 250px; min-width: 0; max-width: 100%; } .text-chapter-header_left-text { max-width: 100%; width: 250px; min-width: 0; } .text-chapter-header_right { padding: 10px; max-width: 100%; width: 250px; min-width: 0; } .text-chapter-header_right-text { max-width: 100%; width: auto; min-width: 0; } .text-chapter-footer-title { width: auto; min-width: 0; } .text-chapter-footer-lower { width: auto; min-width: 0; } .text-chapter-footer-middle { width: auto; min-width: 0; } .text-chapter-footer-button1, .text-chapter-footer-button2 { width: 250px; } } .questions { color: var(--white-color); padding: 100px 0; background-image: url('/images/order_music/question.webp'); background-size: cover; min-height: auto; } .container-questions { margin: 0 auto; padding: 40px; border-radius: 20px; background-color: #673E3E; } .questions-header { margin-bottom: 35px; display: flex; align-items: center; justify-content: space-between; } .questions-header-text-title { margin-bottom: 20px; } .questions-header-text-p { text-align: right; } .questions_main-card { padding: 12px 0; border: 1px solid var(--white-color); border-radius: 5px; margin-bottom: 12px; } .questions-toggle { display: none; } .questions_main-card-header { padding: 0 24px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .questions_main-card-ico { cursor: pointer; transition: transform 0.3s ease; } .questions_main-card-text { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 60px; } .questions-toggle:checked~.questions_main-card-text { max-height: 800px; padding: 16px 20px 20px; } .questions-toggle:checked+.questions_main-card-header .questions_main-card-ico { content: url('/images/order_music/close.svg') } .questions-buttons { margin-left: auto; display: flex; justify-content: flex-end; gap: 40px; } .questions-button-opacity { background-color: transparent; padding: 16px 50px; border: 1px solid white; border-radius: 5px; color: white; cursor: pointer; } .questions-button-opacity:hover { color: #673E3E; background-color: white; border-radius: 5px; cursor: pointer; transition: 0.8s; } @media screen and (max-width: 780px) { .questions { background-image: url('/images/order_music/questions780.webp'); } .questions-header { margin-bottom: 40px; } .container-questions { max-width: 660px; } .questions-header-ico { width: 90px; height: 90px; } .questions-header-text-title { text-align: right; } .questions_main-card-text { padding: 0 24px; } .questions_main-card-title { margin-bottom: 0; } .card-780px-height75 { min-height: 75px; } .card-780px-height58 { min-height: 58px; } } @media screen and (max-width: 660px) { .questions_main-card { margin: 0 auto; } .questions_main-card-text { width: auto; } .card-780px-height75 { height: auto; } .card-780px-height58 { height: auto; } } @media screen and (max-width: 550px) { .questions-buttons { flex-direction: column; gap: 10px; margin: 0 auto; } } @media screen and (max-width: 380px) { .questions { padding: 0; background-image: url('/images/order_music/questions380.webp'); } .container-questions { background-color: transparent; padding: 40px 16px; } .questions-header-text-title { text-transform: uppercase; font-size: 28px; line-height: normal; } .questions_main-card { margin-bottom: 12px; background-color: var(--brown-color); } .questions-buttons { margin: 0; margin-right: auto; flex-direction: column; gap: 24px; width: 250px; } .questions-button-opacity { background-color: var(--brown-color); padding: 16px 48px; } .card-380px-height125 { min-height: 125px; } .card-380px-height75 { min-height: 75px; } .questions_main-card-title { width: 266px; } } @media screen and (max-width: 365px) { .questions_main-card { width: 290px; } .questions-header-ico { width: 89px; height: 89px; } .card-380px-height125 { height: auto; } .card-380px-height75 { height: auto; } }