/* style.css */

@font-face { font-family: "Inter"; src: url(../fonts/Inter-Regular.woff); font-weight: 400; font-style: normal; } @font-face { font-family: "Cinzel"; src: url(../fonts/Cinzel-Regular.woff); font-weight: 400; font-style: normal; } :root{ --bg-color: #DCDFE4; --container-color: rgba(0, 29, 63, 0.03); --text-color: rgba(0, 29, 63, 0.6); --title-color: #001D3F; --text-alternative: #FFFFFF; --btn-bg: #F8EAAC; --btn-color: #08182B; --bg-color-primary: #001D3F; --bg-color-secondary: #004993; --bg-color-tertiary: #7E008E; --header-font: "Cinzel"; --text-font: "Inter"; --container-width: 86vw; --max-width: 1660px; --column-gap: 50px; } body{ background-color: var(--bg-color); font-family: var(--text-font); font-size: 17px; font-weight: 400; margin: 0; } div{ box-sizing: border-box; } h1, h2, h3, h4, h5{ font-family: var(--header-font); text-transform: uppercase; font-weight: 400; line-height: 1.1; } h1{ font-size: 78px; letter-spacing: -1.5px; } h3{ font-size: 54px; letter-spacing: -1.6px; color: var(--title-color); margin: 0 0 20px 0; } h4{ font-size: 26px; letter-spacing: 0; margin: 0; } .text-page h4{ margin: 20px 0; } p, .text-page{ font-size: 17px; font-family: var(--text-font); color: var(--text-color); line-height: 1.6; margin: 0 0 20px 0; } .text-page p{ margin: 7px 0; } .left{ text-align: left; } .center{ text-align: center; } a.btn, button.btn, input[type="submit"], div.btn{ text-decoration: none; display: inline-block; color: var(--btn-color); font-size: 16px; font-weight: 700; font-family: var(--header-font); text-transform: none; background: var(--btn-bg); border: 2px solid var(--btn-bg); padding: 20px 30px; border-radius: 100px; } a.btn:hover, button.btn:hover, input[type="submit"]:hover, div.btn:hover{ background: var(--bg-color-primary); color: #F8EAAC; transition: background 0.25s linear; } div.btn:hover{ cursor: pointer; } img{ width: 100%; } input[type="text"], input[type="email"], input[type="tel"], input[type="date"], textarea { background-color: var(--text-alternative); padding: 27px 30px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px; width: 100%; box-sizing: border-box; margin-bottom: 10px; font-size: 18px; } form .checkbox label{ display: flex; column-gap: 5px; color: rgba(255, 255, 255, 0.6); margin-bottom: 10px; } form .checkbox label p a{ color: var(--text-color); } form .checkbox label p a:hover{ color: var(--btn-bg); } input[type="checkbox"]:hover{ cursor: pointer; } input[type="checkbox"]{ appearance: none; margin: 0; } input[type="checkbox"]::before { content: ""; display: block; width: 22px; height: 22px; background: var(--text-alternative); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 4px; } input[type="checkbox"]:checked::before{ content: "\2713"; display: flex; align-items: center; justify-content: center; font-size: 19px; font-weight: 700; color: var(--bg-color-primary); } input[type="submit"]{ padding: 18px 31px; margin-top: 30px; } input[type="text"].error, input[type="email"].error, input[type="tel"].error, input[type="date"].error, textarea.error, input[type="checkbox"].error::before{ border-color: red; } header{ width: 100%; position: fixed; top: 0; left: 0; background: linear-gradient(180deg, #001C41 0%, rgba(0, 28, 65, 0) 100%), url(../images/header-bg.jpg); background-repeat: no-repeat; background-size: cover; z-index: 10; } .home header{ background: linear-gradient(180deg, #001C41 0%, rgba(0, 28, 65, 0) 100%); } header.sticky{ background: linear-gradient(180deg, #001C41 0%, rgba(0, 28, 65, 0) 100%), url(../images/header-bg.jpg); background-repeat: no-repeat; background-size: cover; } header .header-main{ width: var(--container-width); max-width: var(--max-width); min-height: 34px; margin: 22px auto; display: flex; align-items: center; justify-content: center; position: relative; } header .header-main .logo{ position: absolute; left: 0; top: 0; width: 34px; height: 34px; } header .header-main nav .mob-btn{ display: none; } header .header-main nav ul{ display: flex; column-gap: 70px; justify-content: center; list-style: none; margin: 0; padding: 0 0 0 50px; } header .header-main nav ul li a{ text-decoration: none; font-family: var(--header-font); font-size: 16px; text-transform:uppercase; color: var(--text-alternative); } header .header-main nav ul li a:hover{ color: var(--btn-bg); } main{ width: 100%; overflow: hidden; } main .container{ width: var(--container-width); max-width: var(--max-width); margin: 0 auto; padding: 58px 0; } main .container.bg-section{ width: 100%; max-width: 100vw; position: relative; overflow: hidden; padding: 0; } main .container.bg-section .bg-img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } main .container.bg-section .bg-img img{ width: 100%; height: 100%; object-fit: cover; object-position: center; } main .container.bg-section .content{ width: var(--container-width); margin: 0 auto; z-index: 5; padding: 17vh 0; } main .flex{ display: flex; align-items: center; } main .container.flex .col-2{ flex-basis: 50%; max-width: 50%; } main .container.flex .col-3{ flex-basis: calc(100%/3); max-width: calc(100%/3); } main .container.flex .col-2.padding-right{ padding-right: 4%; } main .container.banner{ min-height: 80vh; align-items: center; justify-content: flex-start; } main .container.banner .content{ flex-basis: var(--container-width); max-width: var(--max-width); } main .container.banner .content> *{ max-width: 700px; } main .container.banner h1{ color: var(--text-alternative); } .grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 16px; } .card{ background: var(--container-color); padding: 40px; border-radius: 40px; column-gap: 30px; align-items: flex-start!important; } .card img{ width: 200px; height: 200px; object-fit: cover; border-radius: 20px; } .card h4{ margin-bottom: 10px; } .tarifs{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 50px 10px; } .tarif{ position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; } .tarif.hide{ display: none; } .tarif > .box{ width: 100%; height: 100%; min-height: 400px; background: #001D3F; border-radius: 100px; padding: 40px 20px; } .tarif img{ width: 110px; height: 100px; } .tarif p{ color: var(--text-alternative); } .tarif p.title{ font-family: var(--header-font); font-size: 25px; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; margin: 15px 0; } .tarif p.description{ opacity: 0.7; max-width: 360px; margin: 0 auto; } .tarif p.price{ font-family: var(--header-font); font-size: 35px; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; color: var(--title-color); margin: 0 0 15px 0; } .tarif p.price-before{ font-family: var(--header-font); font-size: 30px; line-height: 1.4; letter-spacing: 0; text-transform: uppercase; text-decoration: line-through; color: var(--text-color); margin: 24px 0 0 0; min-height: 1.4em; } .tarif div.btn{ padding: 20px 30px; font-family: var(--text-font); box-shadow: 0px 0px 150px 0px #F8EAACB2; } .tarif div.btn:hover{ cursor: pointer; } .btn.show-all{ margin: 60px auto 0; } .btn.show-all.hide{ display: none; } .slider .flex{ justify-content: space-between; } .slider .slider-nav{ display: flex; column-gap: 10px; } .slider .slider-nav>div{ background: var(--container-color); border-radius: 100%; border: 1px solid rgba(0, 29, 63, 0.05); width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; } .slider .slider-nav>div img{ width: 25px; height: auto; } .slider .slider-content{ width: calc(var(--container-width) + 8vw); display: flex; align-items: stretch; column-gap: 20px; transition: margin-left 0.5s ease; } .slider .slider-content .slide{ width: 540px; background: var(--container-color); border-radius: 30px; padding: 32px; } .slider .slider-content .slide.active{ background: var(--bg-color-primary); } .slide p{ color: var(--title-color); } .slide .name{ font-size: 40px; font-family: var(--header-font); margin-bottom: 10px; line-height: 1.1; } .slide.active .name{ color: var(--btn-bg); } .slide .age{ font-size: 20px; line-height: 1.1; margin-bottom: 30px; text-transform: capitalize; } .slide.active .age{ color: var(--text-alternative); } .slide .text{ border-top: 1px solid rgba(0, 29, 63, 0.2); padding-top: 30px; opacity: 0.6; margin-bottom: 0; } .slide.active .text{ border-top: 1px solid rgba(255, 255, 255, 0.2); color: var(--text-alternative); } .slide img{ width: 50px; height: 50px; } .accordion .item{ margin-bottom: 10px; } .accordion .item-title{ display: flex; justify-content: space-between; align-items: center; column-gap: 30px; background: var(--container-color); padding: 40px; border: 1px solid rgba(0, 29, 63, 0.1); border-radius: 30px; } .accordion .item-title p{ margin: 0; font-size: 24px; font-family: var(--header-font); line-height: 1; } .accordion .item-title img{ width: 15px; } .accordion .item .item-text{ height: 0; overflow: hidden; margin-top: -30px; margin-bottom: 10px; padding: 15px 40px; border-width: 0 1px 1px 1px; border-style: solid; border-color: rgba(0, 29, 63, 0.1); border-radius: 0 0 30px 30px; opacity: 0; transition: all 1s ease-out; } .accordion .item.active .item-text{ opacity: 1; margin-bottom: 0; padding: 45px 40px 20px 40px; transition: all 1s ease-out; } footer{ margin-top: 62px; overflow: hidden; } body:not(.home) footer{ border-top: 1px solid #CECECE; } .footer-main{ position: relative; display: flex; } .footer-main .bg-img{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .footer-main .bg-img img{ width: 100%; height: 100%; object-fit: cover; } .footer-main .footer-container{ flex-basis: var(--container-width); max-width: var(--max-width); margin: 100px 7vw 100px 50%; z-index: 5; } .footer-main h2{ font-family: var(--header-font); font-size: 54px; letter-spacing: -1.2px; color: var(--text-alternative); margin: 0 0 20px 0; } .footer-main p{ color: var(--text-alternative); opacity: 0.7; margin: 0; } .footer-main form{ margin-top: 55px; } .footer-main form a{ color: rgba(255, 255, 255, 0.6); } .footer-main form a:hover{ color: var(--btn-bg); } footer .socket{ display: flex; justify-content: space-between; align-items: center; width: var(--container-width); max-width: var(--max-width); margin: 0 auto; padding: 20px 0; } footer .socket .flex{ display: flex; align-items: flex-start; column-gap: 5px; } footer .socket p{ margin: 0; } footer .socket a{ text-decoration: none; color: var(--bg-color-primary); } footer .socket a:hover{ color: var(--btn-color); text-decoration: underline; } footer .socket .social{ display: flex; align-items: center; column-gap: 10px; } footer .socket .social a{ border: 1px solid #001D3F1A; border-radius: 100%; width: 44px; height: 44px; display: flex; justify-content: center; align-items: center; } footer .socket .social a.facebook{ align-items: flex-end; } .mobile{ display: none; } .container.breadcrumb{ display: flex; column-gap: 7px; margin-top: 100px; margin-bottom: 20px; padding: 0; } .container.breadcrumb >*{ margin: 0; padding: 0; font-size: 14px; line-height: 1; } .container.breadcrumb img.separator{ display: block; width: 5px } .container.breadcrumb a{ color: var(--text-color); text-decoration: none; } .container.breadcrumb a:hover{ color: var(--text-color); text-decoration: underline; } .order-info{ background: var(--bg-color-primary); padding: 40px; border-radius: 40px; column-gap: 10px; } .order-info.important{ margin-top: 30px; background-color: #FFE1E1; padding: 20px 40px; } .order-info p{ color: var(--text-alternative); font-size: 38px; font-family: var(--header-font); text-transform: uppercase; margin: 0; } .order-info p .price{ color: var(--btn-bg); } .order-info.important p{ font-size: 20px; color: var(--title-color); } form.order{ margin-top: 30px; display: flex; column-gap: 20px; } form.order >div{ width: 100%; background: var(--container-color); padding: 40px; border-radius: 40px; } form.order >div.left-col{ width: calc(40% - 10px) } form.order >div.right-col{ width: calc(60% - 10px) } form.order .left-col{ background: var(--text-alternative); padding: 40px; border-radius: 40px; } form.order .form-title{ font-size: 28px; font-family: var(--header-font); margin-bottom: 13px; color: var(--title-color); text-transform: uppercase; } form.order label.checkbox{ display: flex; align-items: center; column-gap: 7px; padding: 27px 30px; border-radius: 12px; margin-bottom: 10px; font-size: 18px; font-family: var(--text-font); } form.order input[type="checkbox"]{ accent-color: #001D3F; width: 24px; height: 24px; margin: 0; } form.order label.checkbox[for="dvasingumas"]{ background: rgba(199, 0, 225, 0.05); } form.order label.checkbox[for="asmenybė"]{ background: rgba(134, 215, 255, 0.15); } form.order label.checkbox[for="įgyvendinimas"]{ background: rgba(0, 123, 255, 0.1); } form.order label.checkbox[for="santykiai"]{ background: rgba(216, 51, 33, 0.1); } form.order label.checkbox[for="sveikata"]{ background: rgba(125, 116, 101, 0.1); } form.order .checkbox label{ display: flex; } form.order .right-col{ background: var(--container-color); padding: 40px; border-radius: 40px; } form.order .row-3{ display: grid; gap: 10px; margin-bottom: 10px; grid-template-columns: 1fr 1fr 1fr; } form.order .row-3 .full-row{ grid-column: 1 / 4; display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; } form.order label{ display: block; margin-bottom: 5px; } form.order input[type="text"], form.order input[type="email"], form.order input[type="tel"], form.order input[type="date"], form.order textarea{ padding-left: 64px; } form.order input#first-name, form.order input#last-name, form.order input#first-name-partner, form.order input#last-name-partner{ background-image: url(../images/user.svg); background-position: 30px center; background-size:24px 24px; background-repeat:no-repeat; } form.order input[type="date"]{ position: relative; } form.order ::-webkit-inner-spin-button { display:none; } form.order ::-webkit-calendar-picker-indicator{ background-image: url(../images/calendar.svg); background-position:left center; background-size:24px 24px; background-repeat:no-repeat; position: absolute; left: 28px; width: 24px; } form.order input#email{ background-image: url(../images/mail.svg); background-position: 30px center; background-size:24px 24px; background-repeat:no-repeat; } form.order input#phone{ background-image: url(../images/smartphone.svg); background-position: 30px center; background-size:24px 24px; background-repeat:no-repeat; } form.order input#instagram{ background-image: url(../images/instagram-icon.svg); background-position: 30px center; background-size:24px 24px; background-repeat:no-repeat; } form.order textarea{ background-image: url(../images/message-circle.svg); background-position: 30px 27px; background-size:24px 24px; background-repeat:no-repeat; min-height: 120px; } .popup{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 20; background: var(--text-color); } .popup-container{ max-width: 440px; background: var(--bg-color); border-radius: 40px; padding: 30px; } .close-popup{ text-align: right; margin-bottom: 10px; } .close-popup:hover{ cursor: pointer; } .close-popup img{ width: 18px; height: auto; } .popup-container p{ text-align: center; } .popup-container p.popup-title{ text-align: center; font-size: 24px; font-family: var(--header-font); text-transform: uppercase; margin-bottom: 10px; } .popup-container form input[type="date"]{ margin-bottom: 15px; } .popup-container form .checkbox label{ color: var(--text-color); } .popup-container form input[type="submit"]{ width: 100%; margin-top: 15px; } .popup.open{ display: flex; align-items: center; justify-content: center; } .symptoms>p{ font-size: 20px; } .symptoms .grid{ grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .symptoms .grid> div{ background: var(--container-color); padding: 20px 40px; border-radius: 40px; border: 1px solid var(--text-color); display: flex; align-items: center; } .symptoms .grid> div:hover{ cursor: pointer; background: var(--btn-bg); color: var(--btn-color); } .symptoms .grid> div p{ width: 100%; text-align: center; margin: 0; } .free-star .star-box, .free-star .triangle{ position: relative; } .free-star .star-box .star-bg{ width: 500px; height: 500px; position: absolute; top: 0; left: calc((100% - 500px)/2); } .free-star .star-box .star-numbers{ position: relative; width: 500px; height: 500px; margin: 0 auto; } .free-star .star-box .star-numbers p, .triangle-numbers p{ font-size: 30px; color: var(--title-color); position: absolute; } .triangle-numbers p{ font-size: 20px; margin: 0 } .star-numbers p.main-1{ left: 0; top: 160px; } .star-numbers p.main-2{ left: 230px; top: 0; } .star-numbers p.main-3{ right: 0; top: 163px; } .star-numbers p.main-4{ right: 90px; bottom: -3px; } .star-numbers p.main-5{ left: 70px; bottom: 0; } .star-numbers p.main-6{ left: 235px; top: 250px; } .star-numbers p.more-1{ left: 165px; top: 155px; color: var(--text-color)!important; } .star-numbers p.more-2{ right: 170px; top: 158px; color: var(--text-color)!important; } .star-numbers p.more-3{ right: 130px; top: 290px; color: var(--text-color)!important; } .star-numbers p.more-4{ left: 230px; bottom: 60px; color: var(--text-color)!important; } .star-numbers p.more-5{ left: 130px; top: 290px; color: var(--text-color)!important; } .free-star .sphere{ margin-top: 50px; } .free-star p.sphere-title{ font-size: 30px; font-weight: 700; color: var(--title-color); } .free-star p.sphere-title.number{ margin-top: 2em; } .free-star.sphere-description.margin-bottom{ margin-bottom: 3.5em; } .free-star .flex{ align-items: flex-start; } .free-star .triangle{ min-width: 275px; } .free-star .triangle .triangle-bg{ position: absolute; top: 0; left: calc((100% - 245px)/2); width: 245px; height: 300px; } .free-star .triangle-numbers{ width: 245px; height: 300px; margin: 0 auto; } .triangle-numbers p.main-1{ left: 125px; top: 0; } .triangle-numbers p.main-2{ left: 20px; bottom: 0; } .triangle-numbers p.main-3{ right: 20px; bottom: 0; } .triangle-numbers p.main-4{ left: 125px; bottom: 0; color: red } .triangle-numbers p.main-5{ left: 50px; top: 130px; color: red; } .triangle-numbers p.main-6{ right: 60px; top: 130px; color: red; } .triangle-numbers p.more-1{ left: 105px; top: 125px; color: var(--text-color)!important; } .triangle-numbers p.more-2{ right: 105px; top: 125px; color: var(--text-color)!important; } .free-star .triangle-description{ display: flex; column-gap: 20px; align-items: flex-start; margin-top: 30px; } .free-star .triangle-description img{ width: 150px; height: auto; } .free-star p.title{ color: var(--title-color); text-transform: uppercase; } .free-star li{ color: var(--text-color); } .free-star .order-info{ margin-top: 80px; } .modal-overlay{ display: none; } .modal-overlay.show{ display: flex; justify-content: center; align-items: center; position: fixed; background: rgba(2, 8, 25, .3); top: 0; left: 0; width: 100%; height: 100%; z-index: 150; } .modal-overlay .modal{ background: #ffffff; padding: 40px 60px 60px; border-radius: 40px; position: relative; max-width: 550px; font-size: 20px; text-align: center; } .modal-overlay .modal .close:not(.btn){ background-color: transparent; border: none; position: absolute; right: 30px; top: 15px; font-size: 60px; color: var(--title-color); font-family: var(--header-font); line-height: 1; } .modal-overlay .modal h2{ margin-bottom: 35px; } @media (max-width: 1920px){ .tarif img{ margin-bottom: 20px; } .tarif p.title{ font-size: 25px; margin-top: 0; margin-bottom: 10px; } .tarif p.description{ font-size: 16px; } .tarif p.price{ font-size: 25px; } .tarif p.price-before{ font-size: 20px; } } @media (max-width: 1440px) { header .header-main nav ul{ column-gap: 20px; } h1{ font-size: 60px; } h3, .footer-main h2{ font-size: 40px; } main .container.banner .content> *{ max-width: 50%; } .card img{ width: 100px; height: 100px; } .tarifs{ flex-wrap: wrap; justify-content: center; row-gap: 50px; column-gap: 10px; } .tarif{ min-height: 400px; } .slide .name{ font-size: 30px; } .slide.active .age{ font-size: 18px; } form.order .row-3{ grid-template-columns: 1fr 1fr; } form.order .row-3 .full-row{ grid-template-columns: 1fr; grid-column: unset; } } @media (max-width: 950px){ :root{ --container-width: calc(100vw - 40px); --max-width: calc(100vw - 40px); } header .header-main{ justify-content: flex-end; } header .header-main nav .mob-btn{ display: block; } header .header-main nav{ position: relative; } header .header-main nav ul{ position: absolute; top: 60px; right: -460px; padding: 20px; flex-direction: column; align-items: center; row-gap: 20px; transition: right 1s linear; width: 360px; background: var(--bg-color); } header .header-main nav.open ul{ right: -20px; transition: right 1s linear; } header .header-main nav.open ul li a{ color: var(--btn-color); font-size: 24px; } nav .mob-btn .close{ display: none; width: 18px; height: auto; } nav .mob-btn .open{ display: block; width: 22px; height: auto; } nav.open .mob-btn .close{ display: block; } nav.open .mob-btn .open{ display: none; } main .container{ padding: 24px 0; } main .container.banner{ align-items: flex-end; justify-content: flex-end; } main .container.bg-section .content{ padding: 25vh 0 50px; } main .container.banner .content> *{ max-width: 100%; } main .flex{ flex-direction: column; row-gap: 60px; } main .container.flex .col-2{ flex-basis: 100%; max-width: 100%; } .grid{ grid-template-columns: 1fr; } .tarifs{ grid-template-columns: 1fr 1fr; margin-bottom: 30px; } .slider .flex{ display: block; } .slider .slider-nav{ display: none; } .slider .slider-content .slide{ width: var(--container-width); } .footer-main .bg-img img{ width: 210%; height: auto; position: relative; } .footer-main .bg-img::before{ content: ''; display: block; width: 100%; height: 120vw; position: absolute; top: 0; left: 0; background: linear-gradient(0deg, #00143D 30%, rgba(0, 20, 61, 0) 60%); z-index: 2; } .footer-main .bg-img{ background: var(--bg-color-primary); } .footer-main .footer-container{ margin: 100vw auto 50px; } form.order{ flex-direction: column; row-gap: 20px; } form.order >div.left-col, form.order >div.right-col{ width: 100%; } .order-info p{ font-size: 30px; } .symptoms .grid{ grid-template-columns: 1fr 1fr; } .symptoms .grid> div{ padding: 10px 20px; } .symptoms .grid> div:last-child{ min-height: 76px; grid-column: 1/3; } } @media (max-width: 600px){ h1{ font-size: 40px; } h3, .footer-main h2{ font-size: 34px; } h4, .order-info p{ font-size: 24px; } p{ font-size: 15px; } main .flex{ row-gap: 30px; } .card{ padding: 24px; row-gap: 20px!important; } .grid{ gap: 10px; } .tarifs{ grid-template-columns: 1fr; gap: 30px; } .tarif p.title, .tarif p.price, .slide .name{ font-size: 20px; } .tarif p.price-before{ font-size: 18px; } .tarif p.description{ font-size: 15px; } .slide.active .age{ font-size: 15px; margin-bottom: 20px; } .slide .text{ padding-top: 20px; } .accordion .item-title{ padding: 20px; } input[type="text"], input[type="email"], input[type="tel"]{ padding: 20px; } footer .socket{ flex-direction: column; row-gap: 30px; justify-content: center; align-items: center; } footer .socket> div:first-child{ order: 3; align-items: flex-end; } footer .socket p{ line-height: 1.3; } .mobile{ display: block; } .desktop{ display: none; } .mobile.number{ margin-top: 25px; } .mobile.number .flex{ display: flex; flex-direction: row; align-items: flex-end; column-gap: 10px; margin-bottom: 18px; } .mobile.number p{ margin: 0; } form.order .form-title{ font-size: 20px; } form.order .row-3{ grid-template-columns: 1fr; } .symptoms .grid{ grid-template-columns: 1fr; } .symptoms .grid> div{ min-height: 70px; } .symptoms .grid> div:last-child{ min-height: 70px; grid-column: 1/2; } .free-star .star-box .star-bg{ width: 280px; height: 280px; left: calc((100% - 300px)/2); } .free-star .star-box .star-numbers{ position: relative; width: 280px; height: 280px; } .free-star .star-box .star-numbers p, .triangle-numbers p{ font-size: 18px; } .triangle-numbers p{ font-size: 16px; } .star-numbers p.main-1{ left: 0; top: 80px; } .star-numbers p.main-2{ left: 120px; top: 0; } .star-numbers p.main-3{ right: 20px; top: 83px; } .star-numbers p.main-4{ right: 50px; bottom: 0; } .star-numbers p.main-5{ left: 30px; bottom: 0; } .star-numbers p.main-6{ left: 120px; top: 140px; } .star-numbers p.more-1{ left: 75px; top: 80px; } .star-numbers p.more-2{ right: 100px; top: 80px; } .star-numbers p.more-3{ right: 70px; top: 165px; } .star-numbers p.more-4{ left: 120px; bottom: 20px; } .star-numbers p.more-5{ left: 50px; top: 165px; } .free-star p.sphere-title{ font-size: 20px; } .free-star .triangle-description img{ display: none; } .free-star .order-info{ margin-top: 80px; } .modal-overlay .modal{ padding: 20px 40px 40px; max-width: 90%; font-size: 18px; } .modal-overlay .modal .close:not(.btn){ right: 20px; top: 5px; } .modal-overlay .modal h2{ margin-bottom: 20px; } }