@charset "UTF-8";

@font-face {
font-family: gteestiprodisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-bold.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: gteestiprodisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-regular.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: gteestiprodisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay_medium.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay_medium.woff2) format("woff2");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: gteestiprodisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-thin.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-thin.woff2) format("woff2");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: icons;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/icons.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/icons.woff2) format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: gteestiprodisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-ultrabold.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/gteestiprodisplay-ultrabold.woff2) format("woff2");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: SFProDisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SF-Pro-Display-Bold.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SF-Pro-Display-Bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: SFProDisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SF-Pro-Display-Regular.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SF-Pro-Display-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SFUIDisplay-bold.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SFUIDisplay-bold.woff2) format("woff2");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: SFUIDisplay;
font-display: swap;
src: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SFUIDisplay-regular.woff) format("woff"), url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/fonts/SFUIDisplay-regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
}
[class^=icon-]:before,
[class*=" icon-"]:before {
font-family: "icons";
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[class^=icon-]:before,
[class*=" icon-"]:before {
display: block;
}
.icon-arrow-left:before {
content: "\e90b";
}
.icon-arrow-right:before {
content: "\e90c";
}
.icon-down:before {
content: "\e90a";
}
.icon-close:before {
content: "\e909";
}
.icon-viber:before {
content: "\e907";
}
.icon-whatsapp:before {
content: "\e908";
}
.icon-location:before {
content: "\e904";
}
.icon-mail:before {
content: "\e905";
}
.icon-phone:before {
content: "\e906";
}
.icon-next:before {
content: "\e902";
}
.icon-prev:before {
content: "\e903";
}
.icon-cam:before {
content: "\e901";
}
.icon-search:before {
content: "\e900";
}
body {
font-family: "gteestiprodisplay", "Arial", sans-serif;
color: #afafa9;
line-height: 1.625;
background-color: #111111;
}
body.modal-lock {
overflow: hidden;
}
body.lock-menu {
overflow: hidden;
}
.wrapper {
position: relative;
width: 100%;
min-height: 100%;
overflow: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
[class*=__container] {
margin: 0 auto;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 0 0.9375em;
max-width: 992px;
}
.modal {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
z-index: 999;
overflow-y: auto;
overflow-x: hidden;
background: rgba(0, 0, 0, 0.75);
opacity: 0;
visibility: hidden;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
}
.modal .examples {
position: relative;
z-index: 1;
background: #faf9f6;
color: #282828;
}
.modal .examples::before {
content: "";
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
border-radius: 50%;
opacity: 0.52;
width: 1395px;
height: 1395px;
background: -o-linear-gradient(307deg, #9b9af7 8.37%, rgba(155, 154, 247, 0) 91.49%);
background: linear-gradient(143deg, #9b9af7 8.37%, rgba(155, 154, 247, 0) 91.49%);
-webkit-filter: blur(100px);
filter: blur(100px);
pointer-events: none;
z-index: -1;
}
.modal .examples .examples__title {
color: #282828;
}
.modal.open {
opacity: 1;
visibility: visible;
}
.modal.open .modal__content {
margin: 5em 0em 0em 0em;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.modal.open > .modal__close {
opacity: 1;
visibility: visible;
}
.modal.open .modal__form {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.modal > .modal__close {
position: fixed;
top: 20px;
right: 20px;
opacity: 0;
visibility: hidden;
}
.modal#modal-request {
padding: 0.25rem 0;
}
.modal.modal-video {
z-index: 9999;
}
.modal__video {
max-width: 800px;
width: 100%;
margin: auto;
}
.modal__video-block {
width: 100%;
}
.modal__close {
position: absolute;
top: 20px;
right: 20px;
z-index: 2;
border-radius: 50%;
width: 40px;
height: 40px;
color: #afafa9;
-webkit-transition: color 0.3s ease 0s, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
-o-transition: color 0.3s ease 0s, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
transition: color 0.3s ease 0s, opacity 0s ease 0.5s, visibility 0s ease 0.5s;
background: #faf9f6;
}
.modal__close path {
stroke: currentColor;
}
.modal__content {
-webkit-transition: -webkit-transform 0.5s ease 0s;
transition: -webkit-transform 0.5s ease 0s;
-o-transition: transform 0.5s ease 0s;
transition: transform 0.5s ease 0s;
transition: transform 0.5s ease 0s, -webkit-transform 0.5s ease 0s;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
width: 100%;
}
.modal__content .feedback {
position: relative;
z-index: 2;
background: rgba(17, 17, 17, 0.98);
border-radius: 32px 32px 0 0;
margin-top: -32px;
padding-top: 70px;
}
.modal__form {
position: relative;
background: #faf9f6;
color: #111111;
margin: auto;
padding: 1.75em 0.9375em 2.5em;
border-radius: 20px;
max-width: 992px;
width: 100%;
-webkit-transition: -webkit-transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
}
.case {
line-height: normal;
color: #282828;
background: #faf9f6;
border-radius: 32px 32px 0 0;
padding: 3.75em 0em 2em 0em;
}
.case__container {
max-width: 1200px;
}
.case__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
gap: 1.5rem;
}
.case__info-name {
margin-top: 0.5em;
font-size: 24px;
}
.case__info-subtitle {
margin-top: 0.375em;
font-size: 16px;
font-weight: 300;
}
.case__contacts {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.case__description {
margin-top: 1.6666666667em;
font-size: 20px;
}
.case__steps {
margin-top: 2.5rem;
display: -ms-grid;
display: grid;
}
.case__step {
position: relative;
z-index: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
counter-increment: num;
padding: 3.75rem 0 2.5rem;
}
.case__step::before {
content: "0" counter(num);
position: absolute;
opacity: 0.2;
top: 0;
left: 0;
font-size: 180px;
font-weight: 900;
line-height: normal;
background: -webkit-gradient(linear, left top, left bottom, from(#9b9af7), color-stop(77.7%, rgba(155, 154, 247, 0)));
background: -o-linear-gradient(top, #9b9af7 0%, rgba(155, 154, 247, 0) 77.7%);
background: linear-gradient(180deg, #9b9af7 0%, rgba(155, 154, 247, 0) 77.7%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
pointer-events: none;
z-index: -1;
}
.case__step:nth-child(3)::after {
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/case-decor.svg) center/contain no-repeat;
}
.case__step-title {
font-size: 24px;
}
.case__step-desc {
margin-top: 0.5em;
font-size: 16px;
font-weight: 300;
max-width: 23.75rem;
}
.case__step-desc ul li {
position: relative;
padding-left: 1.5em;
}
.case__step-desc ul li::before {
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0.5em;
width: 0.15em;
height: 0.15em;
border-radius: 50%;
background: currentColor;
display: block;
}
.case__stats {
display: -ms-grid;
display: grid;
}
.case__stats.spec-list {
border-bottom: 0;
}
.case__stats.spec-list .spec-list__row {
border-top: 0;
border-bottom: 1px solid rgba(175, 175, 169, 0.3);
}
.examples {
padding: 3.75em 0em 2em 0em;
line-height: normal;
}
.examples__title {
color: #faf9f6;
}
.examples__title.title span {
color: #111;
}
.examples__title.title span::before {
background: #ef8bf8;
}
.examples__items {
margin-top: 20px;
gap: 20px;
display: -ms-grid;
display: grid;
padding-bottom: 6.25rem;
}
.examples__column:nth-child(odd) .examples__item-vertical {
margin-left: auto;
}
.examples__column:nth-child(even) .examples__item-vertical {
margin-right: auto;
}
.examples__column:nth-child(even) .video__block-shadow {
left: auto;
right: -12px;
-webkit-transform: rotate(1.083deg);
-ms-transform: rotate(1.083deg);
transform: rotate(1.083deg);
}
.examples__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.examples__item:not(:last-child) {
margin-bottom: 2.5rem;
}
.examples__item.examples__item-vertical {
max-width: 375px;
}
.examples__item.examples__item-vertical .video__block {
aspect-ratio: 0.5639097744;
}
.examples__name {
margin-top: 0.75rem;
font-size: 24px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.examples__desc {
margin-top: 0.75rem;
font-size: 16px;
font-weight: 300;
}
.examples__person {
margin-top: 12px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12px;
}
.examples__person-thumb {
border: 1px solid #ef8bf8;
border-radius: 50%;
-ms-flex-negative: 0;
flex-shrink: 0;
padding: 4px;
width: 59px;
height: 59px;
flex-shrink: 0;
}
.examples__person-thumb img {
border-radius: 50%;
}
.examples__person-column {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.examples__person-name {
color: #e4fc71;
font-size: 18px;
-webkit-text-decoration-line: underline;
text-decoration-line: underline;
}
.examples__desc {
margin-top: 12px;
color: #faf9f6;
font-size: 16px;
font-weight: 300;
}
.video__block {
position: relative;
aspect-ratio: 1.7777777778;
width: 100%;
display: block;
}
.video__block video {
border-radius: 0.25rem;
position: absolute;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.video__block-shadow {
opacity: 0.3;
position: absolute;
top: 6px;
left: -12px;
-webkit-transform: rotate(-1.854deg);
-ms-transform: rotate(-1.854deg);
transform: rotate(-1.854deg);
z-index: -1;
width: 95%;
height: auto;
}
.video__block-shadow img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
border-radius: 4px;
}
.contacts,
.header__menu-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
font-weight: 300;
font-size: 14px;
line-height: 1.1875;
}
.contacts__item:not(:last-child) {
margin: 0em 0.25em 0em 0em;
}
.contacts__item:not(:last-child)::after {
margin: 0em 0em 0em 0.25em;
content: "/";
}
.blogger-caption {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.blogger-caption__thumb {
border: 1px solid #ef8bf8;
border-radius: 50%;
width: 78px;
height: 78px;
margin: 0em 0.625em 0em 0em;
padding: 0.3125em;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.blogger-caption__title {
margin: 0.375em 0em 0em 0em;
font-weight: 300;
line-height: 1.1875;
font-size: 14px;
}
.blogger-caption__nick {
font-size: 18px;
line-height: 1.1666666667;
-webkit-transition: color 0.3s ease 0s;
-o-transition: color 0.3s ease 0s;
transition: color 0.3s ease 0s;
}
.spec-list {
border-bottom: 1px solid rgba(175, 175, 169, 0.3);
}
.spec-list__row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.625em 1.5em 1.1875em;
border-top: 1px solid rgba(175, 175, 169, 0.3);
}
.spec-list__stat {
padding: 0.625em 0em 0em 0em;
line-height: 1.1666666667;
-webkit-box-flex: 0;
-ms-flex: 0 0 55%;
flex: 0 0 55%;
}
.spec-list__value {
font-size: 30px;
line-height: 1.175;
}
.spec-list__value._precent::after {
content: "%";
display: inline-block;
margin: 0em 0em 0em 0.1875em;
padding: 0.1875em 0em 0em 0em;
font-size: 0.4em;
font-weight: 300;
vertical-align: top;
}
.spec-list__value._rub::after {
content: "₽";
display: inline-block;
margin: 0em 0em 0em 0.1875em;
padding: 0.1875em 0em 0em 0em;
font-size: 0.4em;
font-weight: 300;
vertical-align: top;
}
.title {
position: relative;
text-transform: uppercase;
text-align: center;
font-size: 40px;
gap: 0.875rem;
font-weight: 700;
line-height: 1.1625;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.title span {
position: relative;
font-size: 0.3em;
line-height: 1.1666666667;
padding: 0 2.5em;
text-transform: none;
}
.title span::before {
content: "";
position: absolute;
top: -15%;
left: -5px;
width: calc(100% + 6px);
height: calc(100% + 4px);
background: #e4fc71;
border-radius: 2px;
-webkit-transform: rotate(-0.51deg);
-ms-transform: rotate(-0.51deg);
transform: rotate(-0.51deg);
z-index: -1;
}
.price {
position: relative;
z-index: 1;
font-size: 24px;
line-height: 1.1666666667;
}
.price::before {
content: "";
position: absolute;
top: -15%;
left: -5px;
width: calc(100% + 6px);
height: calc(100% + 4px);
background: #e4fc71;
border-radius: 2px;
-webkit-transform: rotate(-0.51deg);
-ms-transform: rotate(-0.51deg);
transform: rotate(-0.51deg);
z-index: -1;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #fff;
}
::-webkit-scrollbar-thumb {
background: #e4fc71;
border-radius: 8px;
}
.hidden {
position: absolute;
clip: rect(0 0 0 0);
width: 1px;
height: 1px;
margin: -1px;
}
.cover-image {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.form {
position: relative;
}
.form__caption {
font-weight: 700;
line-height: 1.15;
font-size: 30px;
padding: 0em 0.5em 0em 0em;
}
.form__subtitle {
margin: 0.75em 0em 0em 0em;
font-size: 14px;
font-weight: 300;
line-height: 1.1875;
}
.form__service {
margin: 1.5em 0em 2em 0em;
border-top: 1px solid #afafa9;
border-bottom: 1px solid #afafa9;
padding: 1.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.form__fields {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
margin-top: 1.25rem;
gap: 1.25rem;
}
.form__input {
background: rgba(228, 252, 113, 0.05);
border: 1px solid rgba(17, 17, 17, 0.5);
border-radius: 4px;
width: 100%;
padding: 1em;
font-size: 18px;
line-height: 1.1666666667;
-webkit-transition: border-color 0.3s ease 0s;
-o-transition: border-color 0.3s ease 0s;
transition: border-color 0.3s ease 0s;
}
.form__input:focus {
border-color: #111;
}
.form__textarea {
background: rgba(228, 252, 113, 0.05);
border: 1px solid rgba(17, 17, 17, 0.5);
border-radius: 4px;
width: 100%;
height: 9.375rem;
resize: none;
padding: 1em;
font-size: 18px;
line-height: 1.1666666667;
-webkit-transition: border-color 0.3s ease 0s;
-o-transition: border-color 0.3s ease 0s;
transition: border-color 0.3s ease 0s;
}
.form__textarea:focus {
border-color: #111;
}
.form__btn {
margin: 1.6666666667em 0em 0em 0em;
width: 100%;
background: #e4fc71;
-webkit-box-shadow: 0px 5px 0px -2px #111111;
box-shadow: 0px 5px 0px -2px #111111;
border-radius: 4px;
padding: 1em;
font-size: 18px;
line-height: 1.1666666667;
text-align: center;
}
.btn {
position: relative;
z-index: 1;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
white-space: nowrap;
text-align: center;
line-height: normal;
padding: 1em 1.4583333333em;
border-radius: 4px;
}
.btn::before {
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
font-size: 1.45em;
}
.btn.btn-primary {
background: #e4fc71;
color: #111;
-webkit-box-shadow: 0px 5px 0px -2px #111;
box-shadow: 0px 5px 0px -2px #111;
}
.btn:disabled,
.btn[aria-disabled=true] {
cursor: default;
color: #fff;
background: #dfe0e1;
pointer-events: none;
}
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
color: #e4fc71;
}
.header.scroll {
color: #111111;
}
.header.scroll .header__wrapper .header__logo-top {
fill: #111111;
}
.header.scroll .header__wrapper .icon-menu {
color: #111111;
}
.header__wrapper {
padding: 1.25em 0em 0em 0em;
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 10;
}
.header__container {
max-width: 1320px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__logo {
position: relative;
z-index: 11;
margin-right: 2.1875rem;
max-width: 27%;
}
.header__logo svg {
width: 100%;
height: auto;
}
.header__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #282828;
-webkit-transition: -webkit-transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
overflow-x: hidden;
overflow-y: auto;
z-index: 10;
padding: 8rem 0.75rem;
}
.header__body.active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
}
.header__menu-list {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
border-top: 1px solid rgba(175, 175, 169, 0.3);
}
.header__logo-top {
fill: #faf9f6;
}
.header__contacts {
margin-top: 2.5rem;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 1.1875rem;
}
.header__contacts .contacts__item:not(:last-child) {
margin: 0 0 1rem 0;
}
.header__contacts .contacts__item:not(:last-child)::after {
display: none;
}
.icon-menu {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-flow: column nowrap;
flex-flow: column nowrap;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 0;
-webkit-box-ordinal-group: 2;
-ms-flex-order: 1;
order: 1;
min-width: 2.5625rem;
height: 2.5625rem;
z-index: 11;
color: #fff;
margin: 0em 0em 0em auto;
}
.icon-menu span {
display: block;
padding: 0.1875rem 0.25rem;
-webkit-transition: opacity 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
transition: opacity 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
-o-transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s;
transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s;
transition: transform 0.4s ease 0.4s, opacity 0.4s ease 0.4s, -webkit-transform 0.4s ease 0.4s;
will-change: transform;
}
.icon-menu span::before {
content: "";
display: block;
height: 0.125rem;
width: 1.5rem;
background: currentColor;
-webkit-transition: -webkit-transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
will-change: transform;
}
.icon-menu.active {
color: #fff;
}
.icon-menu.active span {
-webkit-transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.icon-menu.active span::before {
-webkit-transition: width 0.3s ease 0s, -webkit-transform 0.45s ease 0.35s;
transition: width 0.3s ease 0s, -webkit-transform 0.45s ease 0.35s;
-o-transition: transform 0.45s ease 0.35s, width 0.3s ease 0s;
transition: transform 0.45s ease 0.35s, width 0.3s ease 0s;
transition: transform 0.45s ease 0.35s, width 0.3s ease 0s, -webkit-transform 0.45s ease 0.35s;
}
.icon-menu.active span:first-child {
-webkit-transform: translateY(0.5rem);
-ms-transform: translateY(0.5rem);
transform: translateY(0.5rem);
}
.icon-menu.active span:first-child::before {
-webkit-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.icon-menu.active span:nth-child(2) {
opacity: 0;
}
.icon-menu.active span:nth-child(3) {
-webkit-transform: translateY(-0.5rem);
-ms-transform: translateY(-0.5rem);
transform: translateY(-0.5rem);
}
.icon-menu.active span:nth-child(3)::before {
-webkit-transform: rotate(-225deg);
-ms-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.footer {
position: relative;
padding: 5rem 0 2rem;
text-align: center;
color: #afafa9;
font-size: 16px;
font-weight: 300;
}
.footer::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: 100% auto;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg width='1440' height='48' viewBox='0 0 1440 48' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='1501.11' y1='17.0385' x2='-60.8025' y2='0.500031' stroke='%23282828'/%3E%3Cline x1='1500.82' y1='44.0371' x2='-61.0884' y2='27.4986' stroke='%23282828'/%3E%3Cline y1='-0.5' x2='1560.97' y2='-0.5' transform='matrix(-0.999755 -0.0221283 0.135907 -0.990722 1500.23 46.5469)' stroke='%23282828'/%3E%3C/svg%3E%0A");
pointer-events: none;
}
.page {
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
}
.main {
padding: 0em 0em 2.75em 0em;
}
.main__header {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
max-width: 1440px;
margin: 0 auto;
-webkit-box-sizing: content-box;
box-sizing: content-box;
padding: 0 0.9375em;
}
.main__thumbs {
display: none;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
padding-bottom: 2.1875rem;
-webkit-transform: rotate(-3.692deg);
-ms-transform: rotate(-3.692deg);
transform: rotate(-3.692deg);
}
.main__thumbs:last-child {
padding-bottom: 5rem;
}
.main__thumbs:last-child .main__thumb-text {
top: auto;
bottom: calc(100% + 2.5rem);
}
.main__thumbs:last-child .main__thumb-text::before {
top: 95%;
bottom: auto;
right: calc(100% + 20px);
width: 59px;
height: 43px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='59' height='43' viewBox='0 0 59 43' fill='none'%3E%3Cpath d='M57.3896 1.37476C32.5524 8.75502 16.9181 22.9964 1.26036 41.7728M1.26036 41.7728L7.32779 23.0729M1.26036 41.7728L17.6744 33.5167' stroke='%23AFAFA9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.main__thumb {
position: relative;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 3.75rem;
height: 3.75rem;
}
.main__thumb-text {
color: #afafa9;
font-size: 16px;
line-height: 1;
font-weight: 300;
position: absolute;
left: 6.5rem;
-webkit-transform: rotate(3.692deg);
-ms-transform: rotate(3.692deg);
transform: rotate(3.692deg);
white-space: nowrap;
top: calc(100% + 5rem);
}
.main__thumb-text::before {
content: "";
position: absolute;
bottom: calc(100% + 8px);
right: calc(100% + 10px);
width: 40px;
height: 63px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='63' viewBox='0 0 40 63' fill='none'%3E%3Cpath d='M38.4521 61.4823C18.7337 44.6734 10.2086 25.3195 3.49933 1.80986M3.49933 1.80986L1.47148 21.3646M3.49933 1.80986L15.1618 16.0074' stroke='%23AFAFA9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.main__logo {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transform: translateX(2rem);
-ms-transform: translateX(2rem);
transform: translateX(2rem);
padding-right: 1.25rem;
}
.main__logo-desc {
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 1rem;
color: #faf9f6;
}
.main__logo-num {
font-weight: 700;
text-transform: uppercase;
line-height: 1;
font-size: 35px;
}
.main__logo-text {
line-height: normal;
font-size: 14px;
}
.main__logo-image img {
height: 100%;
width: auto;
max-height: 53vh;
}
.main__container {
margin-top: 1.25rem;
}
.main__body {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-align: center;
max-width: 520px;
margin: 0 auto;
}
.main__tagline,
.about__body-caption {
color: #9b9af7;
line-height: normal;
}
.main__title {
margin: 0.25em 0 0 0em;
font-weight: 700;
color: #faf9f6;
line-height: normal;
font-size: 26px;
}
.main__btn {
margin: 0.8333333333em 0em 0em 0em;
}
.about {
padding: 32px 0;
}
.about__list {
position: relative;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.about__item {
counter-increment: num;
}
.about__item-card {
border-radius: 4px;
border: 1px solid rgba(250, 249, 246, 0.05);
background: rgba(250, 249, 246, 0.03);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
gap: 10px;
position: relative;
z-index: 1;
overflow: hidden;
cursor: pointer;
backdrop-filter: blur(48px);
-webkit-backdrop-filter: blur(48px);
-webkit-transition: border-color 0.3s ease 0s;
-o-transition: border-color 0.3s ease 0s;
transition: border-color 0.3s ease 0s;
min-height: 153px;
padding: 18px;
height: 100%;
}
.about__item-card::after {
content: "0" counter(num);
background-image: -webkit-gradient(linear, left top, left bottom, from(#282828), color-stop(77.7%, rgba(40, 40, 40, 0)));
background-image: -o-linear-gradient(top, #282828 0%, rgba(40, 40, 40, 0) 77.7%);
background-image: linear-gradient(180deg, #282828 0%, rgba(40, 40, 40, 0) 77.7%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: normal;
font-weight: 900;
position: absolute;
z-index: -1;
font-size: 80px;
top: 12px;
left: 12px;
}
.about__item-card::before {
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
right: -23px;
width: 46px;
height: 46px;
background: #ef8bf8;
opacity: 0;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
border-radius: 50%;
z-index: -1;
-webkit-filter: blur(24px);
filter: blur(24px);
}
.about__item-text {
color: #afafa9;
line-height: normal;
-webkit-transition: color 0.3s ease 0s;
-o-transition: color 0.3s ease 0s;
transition: color 0.3s ease 0s;
font-size: 16px;
}
.about__item-desc {
position: absolute;
left: 0;
right: 0;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
padding: 24px;
border-bottom: 1px solid #ef8bf8;
border-top: 1px solid #ef8bf8;
background: #111;
z-index: 2;
}
.about__item-desc::before {
content: "";
position: absolute;
bottom: 100%;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 35.5px 16px 35.5px;
border-color: transparent transparent #111 transparent;
-webkit-filter: drop-shadow(0px -1px 0px #ef8bf8);
filter: drop-shadow(0px -1px 0px #ef8bf8);
}
.about__body {
position: relative;
margin-top: 10.5rem;
}
.about__body::before {
content: "";
position: absolute;
top: 15%;
left: 50%;
-webkit-transform: translate(-50%, 0);
-ms-transform: translate(-50%, 0);
transform: translate(-50%, 0);
width: 702.857px;
height: 702.857px;
-ms-flex-negative: 0;
flex-shrink: 0;
pointer-events: none;
border-radius: 702.857px;
background: -o-linear-gradient(307deg, #9b9af7 8.37%, rgba(155, 154, 247, 0) 91.49%);
background: linear-gradient(143deg, #9b9af7 8.37%, rgba(155, 154, 247, 0) 91.49%);
-webkit-filter: blur(100px);
filter: blur(100px);
z-index: -1;
opacity: 0.5;
}
.about__body-text {
margin: 0.5em 0em 0em 0em;
color: #faf9f6;
font-weight: 700;
line-height: normal;
font-size: 24px;
}
.about__body-text span {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
background-image: -o-linear-gradient(0.03deg, #ef8bf8 18.99%, #9b9af7 53.47%);
background-image: linear-gradient(89.97deg, #ef8bf8 18.99%, #9b9af7 53.47%);
}
.cases {
padding: 3.125em 0em;
}
.cases__title {
color: #faf9f6;
}
.cases__title span {
color: #111;
}
.cases__items {
margin: 2.5em 0em 0em 0em;
display: -ms-grid;
display: grid;
gap: 1.5rem;
}
.cases__item {
border-radius: 4px;
border: 1px solid rgba(250, 249, 246, 0.05);
background: rgba(250, 249, 246, 0.03);
padding: 1.25em 1.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
color: #faf9f6;
}
.cases__item-name {
margin-top: 0.75rem;
font-size: 24px;
line-height: normal;
}
.cases__item-desc {
margin-top: 0.375rem;
font-weight: 300;
}
.cases__item-link {
margin-top: 0.5rem;
font-weight: 300;
text-decoration: underline;
text-underline-offset: 4px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 12.5px;
}
.cases__item-link::after {
content: "";
width: 30px;
height: 18px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='18' viewBox='0 0 30 18' fill='none'%3E%3Cpath d='M20.9995 16.8335L28.833 9.00004L20.9995 1.16654M0.499512 9.00004L28.4363 9.00004' stroke='%23FAF9F6' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
-webkit-transition: -webkit-transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.clients {
padding: 3.125em 0em 3.75em 0em;
}
.clients__title {
color: #faf9f6;
}
.clients__title span {
color: #111;
}
.clients__list {
margin-top: 24px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 32px;
}
.company {
padding: 30px 0 48px;
}
.company__title {
color: #faf9f6;
}
.company__list {
margin-top: 45px;
display: -ms-grid;
display: grid;
gap: 48px;
}
.company__item {
border-radius: 4px;
border: 1px solid rgba(250, 249, 246, 0.06);
background: rgba(250, 249, 246, 0.03);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
gap: 24px;
padding: 24px 24px 12px 24px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.company__item-image {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 16px;
}
.company__item-image img {
aspect-ratio: 1;
border-radius: 4px;
width: 100%;
}
.company__item-image figcaption {
color: #faf9f6;
font-size: 24px;
line-height: normal;
}
.company__itemd-desc {
color: #faf9f6;
font-size: 16px;
line-height: normal;
font-weight: 300;
}
.team {
position: relative;
z-index: 2;
padding: 2.5em 0em 1em 0em;
background: rgba(250, 249, 246, 0.98);
color: #111111;
border-radius: 32px;
}
.team__label {
font-weight: 300;
line-height: 1.1875;
text-align: center;
}
.team__title {
margin: 0.0875em auto 0;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
}
.team__title span {
padding: 0;
}
.team__subtitle {
margin: 0.8333333333em auto 0em;
max-width: 750px;
line-height: 1.1666666667;
text-align: center;
}
.team__filters {
margin: 2em 0em 0em 0em;
}
.team__options {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
max-width: 51.875rem;
margin: 0 auto;
gap: 0.5rem;
}
.team__option:nth-child(9n+1) {
--option-border: rgba(175, 175, 169, 0.3);
--option-background: #e1e1df;
--option-color: #3b3e45;
}
.team__option:nth-child(9n+2) {
--option-border: #f4e4f2;
--option-background: #f4e4f2;
--option-color: #ef8bf8;
}
.team__option:nth-child(9n+3) {
--option-border: #9b9af7;
--option-background: #9b9af7;
--option-color: #fff;
}
.team__option:nth-child(9n+4) {
--option-border: #ecece2;
--option-background: #ecece2;
--option-color: #9fac63;
}
.team__option:nth-child(9n+5) {
--option-border: #dcf0f2;
--option-background: #dcf0f2;
--option-color: #04cdf7;
}
.team__option:nth-child(9n+6) {
--option-border: #f5dce3;
--option-background: #f5dce3;
--option-color: #f51369;
}
.team__option:nth-child(9n+7) {
--option-border: #efdbec;
--option-background: #efdbec;
--option-color: #bf0dc3;
}
.team__option:nth-child(9n+8) {
--option-border: #e4f2dc;
--option-background: #e4f2dc;
--option-color: #56df26;
}
.team__option:nth-child(9n+9) {
--option-border: #efe9e4;
--option-background: #efe9e4;
--option-color: #c18c6f;
}
.team__option-input:checked + .team__option-content {
-webkit-box-shadow: inset 0 0 0 2px var(--option-background), inset 0 0 0 4px var(--option-color);
box-shadow: inset 0 0 0 2px var(--option-background), inset 0 0 0 4px var(--option-color);
}
.team__option-content {
display: block;
cursor: pointer;
border-radius: 1.5rem;
opacity: 0.7;
border: 1px solid var(--option-border, rgba(175, 175, 169, 0.3));
background: var(--option-background, rgba(59, 62, 69, 0.15));
padding: 0.25rem 0.9rem;
color: var(--option-color, #3b3e45);
font-size: 0.875rem;
font-weight: 500;
-webkit-transition: -webkit-box-shadow 0.3s ease 0s;
transition: -webkit-box-shadow 0.3s ease 0s;
-o-transition: box-shadow 0.3s ease 0s;
transition: box-shadow 0.3s ease 0s;
transition: box-shadow 0.3s ease 0s, -webkit-box-shadow 0.3s ease 0s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.team__option-content img {
width: 1.25rem;
vertical-align: middle;
}
.team__items {
margin: 3em 0em 0em 0em;
display: -ms-grid;
display: grid;
gap: 24px;
}
.team__item {
background: #faf9f6;
border: 1px solid rgba(175, 175, 169, 0.3);
border-radius: 4px;
-webkit-transition: border-color 0.3s ease 0s;
-o-transition: border-color 0.3s ease 0s;
transition: border-color 0.3s ease 0s;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.team__item-list {
color: rgba(40, 40, 40, 0.8);
}
.team__item-labels {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.375rem;
padding: 0.875em 1.5em 0em;
margin-bottom: auto;
}
.team__item-label {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-column-gap: 0.5rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
padding: 0.1875rem 0.5rem;
border-radius: 24px;
background: var(--label-background);
color: var(--label-color);
--label-background: #e1e1df;
--label-color: #3b3e45;
}
.team__item-label.label-gray {
--label-background: #e1e1df;
--label-color: #3b3e45;
}
.team__item-label.label-pink {
--label-background: #f4e4f2;
--label-color: #ef8bf8;
}
.team__item-label.label-blue {
--label-background: rgba(155, 154, 247, 0.15);
--label-color: #9b9af7;
}
.team__item-label.label-light-green {
--option-background: #ecece2;
--option-color: #9fac63;
}
.team__item-label.label-light-blue {
--label-background: #dcf0f2;
--label-color: #04cdf7;
}
.team__item-label.label-pink {
--label-background: #f5dce3;
--label-color: #f51369;
}
.team__item-label.label-violet {
--label-background: #efdbec;
--label-color: #bf0dc3;
}
.team__item-label.label-green {
--label-background: #e4f2dc;
--label-color: #56df26;
}
.team__item-label.label-brown {
--label-background: #efe9e4;
--label-color: #c18c6f;
}
.team__item-icon {
width: 0.875rem;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.team__item-text {
font-weight: 500;
font-size: 0.75rem;
}
.team__item-header {
padding: 0.625em 1.125em 1.125em 1.125em;
}
.team__item-footer {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 1.125em;
-webkit-transition: background-color 0.3s ease 0s;
-o-transition: background-color 0.3s ease 0s;
transition: background-color 0.3s ease 0s;
}
.team__item-more {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-weight: 300;
line-height: 1.1875;
font-size: 12px;
}
.team__item-more span {
text-decoration: underline;
text-underline-offset: 3px;
}
.team__item-more::after {
content: "";
margin: -0.1875em 0em 0em 0.78125em;
width: 1.75em;
height: 1em;
-ms-flex-negative: 0;
flex-shrink: 0;
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/arrow.svg) center/contain no-repeat;
-webkit-transition: -webkit-transform 0.3s ease 0s;
transition: -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s;
transition: transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.team__more {
margin-top: -64px;
position: relative;
width: 100%;
background: rgba(250, 249, 246, 0.05);
padding: 5.5rem 0 1.5rem;
text-align: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 0 0 32px 32px;
}
.team__more-link {
text-decoration: underline;
font-weight: 300;
line-height: 1.1875;
text-underline-offset: 4px;
color: #faf9f6;
}
.blogger {
padding: 3.75em 0em 0em 0em;
color: #282828;
background: #faf9f6;
border-radius: 32px 32px 0 0;
}
.blogger-header__container {
max-width: 1200px;
}
.blogger-header__top {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
.blogger-header__top-caption {
margin: 0.625em 0em 0em 0em;
}
.blogger-header__labels {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 0.25rem;
margin: 0.75em 0em 0em 0em;
}
.blogger-header__contacts {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.blogger-header__stats {
margin: 2.5em 0em 0em 0em;
max-width: 1024px;
display: -ms-grid;
display: grid;
border-bottom: 0;
}
.blogger-body {
margin: 4.75em 0em 0em 0em;
}
.blogger-body__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.blogger-body__item:not(:last-child) {
margin: 0em 0em 1.25em 0rem;
}
.blogger-body__item:nth-child(3n+2) .blogger-body__item-value::before {
background: #9b9af7;
}
.blogger-body__item:nth-child(3n+3) .blogger-body__item-value::before {
background: #ef8bf8;
}
.blogger-body__item-image {
margin: 0em 0em 1.25em 0rem;
}
.blogger-body__item-text {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0em 0em 3.75em 0em;
}
.blogger-body__item-value {
position: relative;
z-index: 1;
font-size: 40px;
font-weight: 700;
line-height: 1.1625;
white-space: nowrap;
padding: 0 0.2em 0 0.325em;
margin: 0em 0.9375rem 0em 0em;
color: #111111;
text-align: center;
}
.blogger-body__item-value::before {
content: "";
position: absolute;
top: -3%;
left: 0;
width: 100%;
height: 90%;
background: #e4fc71;
border-radius: 2px;
-webkit-transform: rotate(-1.5deg);
-ms-transform: rotate(-1.5deg);
transform: rotate(-1.5deg);
z-index: -1;
}
.blogger-body__item-info {
color: rgba(40, 40, 40, 0.8);
padding: 0em 0em 1em 0em;
font-size: 16px;
font-weight: 300;
line-height: 1.1875;
}
.blogger-body__item-info span {
display: block;
font-weight: 400;
font-size: 18px;
line-height: 1.1666666667;
margin: 0em 0em 0.2777777778em 0rem;
}
.blogger-stats {
position: relative;
z-index: 1;
margin: 2.5em 0em 0em 0em;
padding: 5em 0 7.5em 0;
border-radius: 32px 32px;
background: -o-linear-gradient(top, #111 calc(100% - 264px), transparent calc(100% - 264px));
background: linear-gradient(180deg, #111 calc(100% - 264px), transparent calc(100% - 264px));
}
.blogger-stats::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%) rotate(4deg);
-ms-transform: translateX(-50%) rotate(4deg);
transform: translateX(-50%) rotate(4deg);
width: 2027px;
height: 334px;
background: rgba(17, 17, 17, 0.5);
border-radius: 0 0 64px 0;
z-index: -1;
}
.blogger-stats::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-50%) rotate(-5.5deg);
-ms-transform: translateX(-50%) rotate(-5.5deg);
transform: translateX(-50%) rotate(-5.5deg);
width: 1725px;
height: 170px;
border-radius: 0 0 64px 0;
background: #161615;
z-index: -1;
}
.blogger-stats__body {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.blogger-stats__precent {
position: relative;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
line-height: 1.1666666667;
padding: 0.625rem 0em 0em 0em;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
font-size: 12px;
-webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-o-transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s;
transition: transform 0.3s ease 0s, opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.blogger-stats__precent strong {
margin: -0.625rem 0.5rem 0em 0em;
font-size: 60px;
line-height: 1.1625;
}
.blogger-stats__precent.top-precent {
color: #fff;
}
.blogger-stats__precent.bottom-precent {
margin-left: auto;
color: #fff;
}
.blogger-stats__image path {
-webkit-transition: fill 0.3s ease 0s;
-o-transition: fill 0.3s ease 0s;
transition: fill 0.3s ease 0s;
}
.blogger-stats__grid {
margin: 1.875em 0em 0em 0em;
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.blogger-stats__grid-item {
position: relative;
z-index: 1;
overflow: hidden;
display: block;
border-radius: 4px;
padding: 2.125em;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
background: #000;
}
.blogger-stats__grid-item::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
opacity: 0;
z-index: 1;
}
.blogger-stats__grid-item:nth-child(4n+1) {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #e4fc71;
-ms-grid-column-span: 2;
grid-column: span 2;
-ms-grid-row-span: 2;
grid-row: span 2;
}
.blogger-stats__grid-item:nth-child(4n+2) {
position: relative;
-ms-grid-column-span: 2;
grid-column: span 2;
background: #9b9af7;
}
.blogger-stats__grid-item:nth-child(4n+2) .blogger-stats__picture {
position: absolute;
top: 30px;
right: 30px;
}
.blogger-stats__grid-item:nth-child(4n+3) {
background: #ef8bf8;
}
.blogger-stats__grid-item:nth-child(4n+4) {
background: #afafa9;
}
.blogger-stats__hover {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
opacity: 0;
-webkit-transition: opacity 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s;
transition: opacity 0.3s ease 0s;
z-index: -1;
}
.blogger-stats__hover img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: center;
object-position: center;
}
.blogger-stats__country {
font-size: 18px;
line-height: 1.1666666667;
}
.blogger-stats__value {
font-size: 40px;
font-weight: 700;
line-height: 1.1625;
}
.blogger-stats__value::after {
content: "%";
display: inline-block;
vertical-align: top;
font-size: 24px;
font-weight: 400;
line-height: 1.1666666667;
}
.blogger-stats__picture {
margin-top: auto;
margin-left: -2.375em;
margin-bottom: -2.1875em;
}
.blogger-footer {
padding: 5.625em 0em 3.125em 0em;
}
.blogger-footer__container {
max-width: 1100px;
}
.blogger-footer__title span {
text-transform: none;
}
.blogger-footer__title span::before {
background: #ef8bf8;
}
.blogger-footer__list {
margin: 4.6875em auto 0em;
max-width: 880px;
border-bottom: 1px solid #afafa9;
}
.blogger-footer__item {
border-top: 1px solid #afafa9;
padding: 1.3125em 1.5em;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.blogger-footer__item-title {
font-size: 18px;
line-height: 1.1666666667;
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
margin: 0em 0em 1.25em 0rem;
}
.blogger-footer__item-order {
font-size: 16px;
font-weight: 300;
line-height: 1.1875;
border-bottom: 1px solid;
}
.stats {
position: relative;
}
.stats__column {
-webkit-transition: opacity 0.2s ease 0s;
-o-transition: opacity 0.2s ease 0s;
transition: opacity 0.2s ease 0s;
}
.stats__precent {
position: absolute;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
line-height: 1.1666666667;
padding: 0.625rem 0em 0em 0em;
max-width: -webkit-fit-content;
max-width: -moz-fit-content;
max-width: fit-content;
font-size: 12px;
color: #fff;
opacity: 0;
visibility: hidden;
pointer-events: none;
-webkit-transform: translateY(50%);
-ms-transform: translateY(50%);
transform: translateY(50%);
-webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
-o-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s;
transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s, transform 0.3s ease 0s, -webkit-transform 0.3s ease 0s;
}
.stats__precent.visible {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.stats__precent strong {
margin: -0.625rem 0.5rem 0em 0em;
font-size: 60px;
line-height: 1.1625;
}
.stats__precent[id=stat-1] {
top: 31%;
left: 20%;
}
.stats__precent[id=stat-2] {
top: 12%;
left: 32%;
}
.stats__precent[id=stat-3] {
top: 3%;
left: 45%;
}
.stats__precent[id=stat-4] {
top: 16%;
left: 61%;
}
.stats__precent[id=stat-5] {
top: 24%;
left: 74%;
}
.feedback {
padding: 2.8125rem 0 3.75rem;
}
.feedback__title {
color: #faf9f6;
text-align: center;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
font-size: 40px;
}
.feedback__contacts {
color: #e4fc71;
margin-top: 0.6666666667em;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.feedback__form {
max-width: 780px;
margin: 2.5rem auto 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
gap: 0.5rem;
}
.feedback__form .form__input,
.feedback__form .form__textarea {
border-radius: 4px;
border: 1px solid rgba(250, 249, 246, 0.1);
background: rgba(250, 249, 246, 0.1);
color: #fff;
padding: 1.625rem;
}
.feedback__form::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 521.683px;
height: 610.772px;
border-radius: 610.772px;
background: -o-linear-gradient(307deg, #ef8bf8 8.37%, rgba(239, 139, 248, 0) 91.49%);
background: linear-gradient(143deg, #ef8bf8 8.37%, rgba(239, 139, 248, 0) 91.49%);
-webkit-filter: blur(100px);
filter: blur(100px);
opacity: 0.3;
z-index: -1;
pointer-events: none;
}
@media (min-width: 575.98px) {
.case__header {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.case__steps {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}
.examples__column:nth-child(even) .examples__item:first-child {
margin-top: 136px;
}
.contacts,
.header__menu-list {
font-size: 16px;
}
.blogger-caption__thumb {
width: 92px;
height: 92px;
margin: 0em 1.25em 0em 0em;
}
.blogger-caption__title {
font-size: 16px;
}
.blogger-caption__nick {
font-size: 24px;
}
.spec-list__stat {
font-size: 18px;
}
.spec-list__value {
font-size: 40px;
}
.title {
font-size: 60px;
}
.btn {
font-size: 18px;
}
.header__logo {
max-width: 104px;
}
.main__body::before {
content: "";
position: absolute;
top: -1.5rem;
right: 4rem;
width: 31px;
height: 47px;
background-position: center;
background-size: contain;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='47' viewBox='0 0 31 47' fill='none'%3E%3Cpath d='M15.2927 0L19.4231 16.9501L30.5854 23.2223L19.4231 29.4944L15.2927 46.4445L11.1623 29.4944L0 23.2223L11.1623 16.9501L15.2927 0Z' fill='%23EF8BF8'/%3E%3C/svg%3E");
}
.main__body::after {
content: "";
position: absolute;
bottom: 4rem;
left: 0rem;
width: 21px;
height: 31px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='31' viewBox='0 0 21 31' fill='none'%3E%3Cpath d='M10.1951 0L12.9487 11.1623L20.3903 15.2927L12.9487 19.4231L10.1951 30.5854L7.44152 19.4231L0 15.2927L7.44152 11.1623L10.1951 0Z' fill='%239B9AF7'/%3E%3C/svg%3E");
}
.about__item-text {
font-size: 18px;
}
.company__item {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.company__item-image {
-webkit-box-flex: 0;
-ms-flex: 0 0 136px;
flex: 0 0 136px;
}
.team__subtitle {
font-size: 18px;
}
.team__item-header {
padding: 0.875em 1.5em 1.5em 1.5em;
}
.team__item-footer {
padding: 1.5em;
}
.team__item-more {
font-size: 16px;
}
.blogger-header__top {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.blogger-header__top-caption {
margin: 0em 1.25em 0em 0em;
}
.blogger-body__item-value {
font-size: 60px;
}
.blogger-stats__value {
font-size: 60px;
}
.blogger-footer__item {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.blogger-footer__item-title {
margin: 0em auto 0em 0em;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
}
.blogger-footer__item-order {
margin: 0em 0em 0em 2.5em;
}
.feedback__title {
font-size: 60px;
}
}
@media (min-width: 629.98px) {
body.lock-menu {
overflow: visible;
}
.header__body {
position: static;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
top: auto;
left: auto;
width: auto;
height: auto;
padding: 0;
background: none;
-webkit-transition: none;
-o-transition: none;
transition: none;
-webkit-transform: none;
-ms-transform: none;
transform: none;
overflow-x: visible;
overflow-y: visible;
margin-left: auto;
max-width: 55%;
text-align: right;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.header__menu-list {
border-top: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.header__menu-item:not(:last-child) {
margin: 0em 0.4375em 0em 0em;
}
.header__menu-item:not(:last-child)::after {
margin: 0em 0em 0em 0.4375em;
content: "/";
}
.header__contacts {
font-size: 0.875rem;
margin-top: 0;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.header__contacts .contacts__item:not(:last-child) {
margin: 0em 0.25em 0em 0em;
}
.header__contacts .contacts__item:not(:last-child)::after {
display: inline;
}
.icon-menu {
display: none;
}
}
@media (min-width: 767.98px) {
.modal__content .feedback {
padding-top: 140px;
margin-top: -64px;
border-radius: 64px 64px 0 0;
}
.modal__form {
border-radius: 40px;
padding: 3.5em 5em 5em;
}
.case {
padding: 3.75em 0em 4em 0em;
border-radius: 64px 64px 0 0;
}
.case__description {
font-size: 24px;
}
.case__steps {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.case__step {
padding: 7.8125rem 0 5rem;
}
.case__step::before {
font-size: 240px;
}
.case__step:first-child {
-webkit-box-flex: 0;
-ms-flex: 0 0 calc(100% - 23.75rem);
flex: 0 0 calc(100% - 23.75rem);
}
.case__step:first-child::after {
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/arrow-1.svg) center/contain no-repeat;
content: "";
position: absolute;
top: 106px;
right: 20px;
width: 60px;
height: 35px;
}
.no-webp .case__step:nth-child(2){
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/case-decor.png) 0 40px/95% auto no-repeat, url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/case-decor-2.png) 0 calc(100% + 20px)/95% auto no-repeat; }
.case__step:nth-child(2) {
-webkit-box-flex: 0;
-ms-flex: 0 0 23.75rem;
flex: 0 0 23.75rem;
}
.case__step:nth-child(2)::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 69px;
height: 54px;
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/arrow-2.svg) center/contain no-repeat;
}
.case__step:nth-child(3) {
padding: 7.8125rem 0 7.8125rem 2.1875rem;
-webkit-box-flex: 0;
-ms-flex: 0 0 25.9375rem;
flex: 0 0 25.9375rem;
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/star.svg) 0 35px/30px 46px no-repeat;
}
.case__step:nth-child(3)::before {
left: 25px;
}
.case__step:nth-child(3)::after {
content: "";
position: absolute;
top: -16px;
width: 150px;
height: 60px;
right: calc(100% + 25px);
}
.case__stats {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 5rem;
-moz-column-gap: 5rem;
column-gap: 5rem;
}
.examples {
padding: 3.75em 0em 4em 0em;
}
.examples__items {
margin-top: 40px;
gap: 40px;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}
.examples__person-name {
font-size: 21px;
}
.title {
font-size: 80px;
}
.form__caption {
font-size: 40px;
}
.form__input {
font-size: 24px;
}
.form__textarea {
font-size: 24px;
}
.form__btn {
font-size: 24px;
}
.main {
padding: 0em 0em 5.5em 0em;
}
.main__logo-num {
font-size: 45px;
}
.main__logo-text {
font-size: 16px;
}
.main__logo-image img {
max-height: 60vh;
}
.main__tagline,
.about__body-caption {
font-size: 18px;
}
.main__title {
font-size: 30px;
}
.about__body-text {
font-size: 40px;
}
.cases {
padding: 5em 0em;
}
.cases__items {
gap: 3rem;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}
.clients {
padding: 4.0625em 0em 7.5em 0em;
}
.company {
padding: 40px 0 94px;
}
.team {
padding: 4.0625em 0em 2em 0em;
border-radius: 64px;
}
.team__subtitle {
font-size: 24px;
}
.team__options {
gap: 1rem;
}
.team__option-content {
font-size: 1.15rem;
}
.team__items {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}
.team__item-icon {
width: 1.25rem;
}
.team__item-text {
font-size: 1.125rem;
}
.team__more {
border-radius: 0 0 64px 64px;
}
.blogger {
border-radius: 64px 64px 0 0;
}
.blogger-header__labels {
-ms-flex-item-align: center;
-ms-grid-row-align: center;
align-self: center;
margin: 0em auto 0em 0em;
}
.blogger-header__contacts {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.blogger-header__stats {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
}
.blogger-body__item {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.blogger-body__item:not(:last-child) {
margin: 0em 0em 5em 0rem;
}
.blogger-body__item-image {
-webkit-box-flex: 0;
-ms-flex: 0 0 240px;
flex: 0 0 240px;
margin: 0em 2.625em 0em 0em;
}
.blogger-stats {
border-radius: 64px 64px;
}
.blogger-stats__precent {
font-size: 18px;
}
.blogger-stats__precent strong {
font-size: 80px;
}
.blogger-stats__precent.top-precent::before {
content: "";
position: absolute;
top: 100%;
left: 20%;
width: 60px;
height: 36px;
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/top-arrow.svg) center/contain no-repeat;
}
.blogger-stats__precent.bottom-precent::before {
content: "";
position: absolute;
bottom: 50%;
right: calc(100% + 20px);
width: 72px;
height: 56px;
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/bottom-arrow.svg) center/contain no-repeat;
}
.blogger-stats__grid {
margin: 3.75em 0em 0em 0em;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
row-gap: 25px;
-webkit-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
-ms-grid-columns: (1fr)[4];
grid-template-columns: repeat(4, 1fr);
}
.blogger-stats__country {
font-size: 24px;
}
.blogger-stats__value {
font-size: 80px;
}
.blogger-footer {
padding: 11.25em 0em 9.375em 0em;
}
.blogger-footer__list {
margin: 8.4375em auto 0em;
}
.stats__precent strong {
font-size: 80px;
}
.stats__precent {
font-size: 18px;
}
.stats__precent::before {
content: "";
position: absolute;
top: 100%;
left: 20%;
width: 60px;
height: 36px;
-webkit-transform: scale(1, -1) rotate(-90deg);
-ms-transform: scale(1, -1) rotate(-90deg);
transform: scale(1, -1) rotate(-90deg);
background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/top-arrow.svg) center/contain no-repeat;
}
.feedback {
padding: 5.75rem 0 7.5rem;
}
.feedback__contacts {
font-size: 24px;
}
.feedback__form {
position: relative;
}
.feedback__form .form__input,
.feedback__form .form__textarea {
padding: 2.25rem 18.125rem 2.25rem 1.625rem;
}
}
@media (min-width: 991.98px) {
.case__steps {
padding: 0 5.3125rem;
}
.case__step:first-child::after {
width: 119px;
height: 77px;
}
.case__step:nth-child(3)::after {
right: calc(100% + 55px);
width: 209px;
height: 125px;
}
.form__subtitle {
font-size: 16px;
}
.form__fields {
margin-top: 2.5rem;
gap: 2.5rem;
}
.btn {
font-size: 20px;
}
.header__body {
margin-left: 0;
max-width: 100%;
text-align: left;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.header__menu {
padding-right: 10.625rem;
}
.header__menu-list {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.header__contacts {
margin-left: auto;
padding-left: 10.625rem;
}
.main__thumbs {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.main__logo {
margin-top: -4rem;
padding-right: 0rem;
-ms-flex-negative: 0;
flex-shrink: 0;
}
.main__logo-desc {
padding: 0;
}
.main__logo-image img {
max-height: 65vh;
}
.main__container {
margin-top: 2.7rem;
}
.main__tagline,
.about__body-caption {
font-size: 20px;
}
.main__title {
font-size: 35px;
}
.about__list {
gap: 40px;
-ms-grid-columns: (1fr)[3];
grid-template-columns: repeat(3, 1fr);
}
.about__item:nth-child(3n+1) .about__item-desc::before {
left: 12.5%;
}
.about__item:nth-child(3n+2) .about__item-desc::before {
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
.about__item:nth-child(3n+3) .about__item-desc::before {
right: 12.25%;
}
.about__item-card {
padding: 24px;
min-height: 253px;
}
.about__item-card::after {
top: 32px;
left: 22px;
font-size: 120px;
}
.about__item-text {
font-size: 24px;
}
.about__body-text {
position: relative;
z-index: 2;
}
.company__list {
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
}
.team__items {
margin: 4em 0em 0em 0em;
gap: 48px;
}
.blogger-header__stats {
-webkit-column-gap: 80px;
-moz-column-gap: 80px;
column-gap: 80px;
}
.blogger-body__item-image {
margin: 0em 5.125em 0em 0em;
-webkit-box-flex: 0;
-ms-flex: 0 0 307px;
flex: 0 0 307px;
}
.blogger-body__item-value {
font-size: 80px;
}
.blogger-stats {
margin: 23.625em 0em 0em 0em;
padding: 0.0625em 0 5.625em 0;
}
.blogger-stats__body {
margin: -13.75em 0em 0em 0em;
}
.blogger-stats__precent {
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
visibility: hidden;
}
.blogger-stats__precent.visible {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
.blogger-stats__precent.top-precent {
margin-bottom: -2.5em;
color: #111;
}
.blogger-stats__precent.bottom-precent {
margin-top: -1.25em;
}
.feedback__title {
font-size: 80px;
}
}
@media (min-width: 1199.98px) {
.modal > .modal__close {
top: 100px;
right: 80px;
}
.modal__close {
top: 40px;
right: 40px;
}
.case__step:first-child::after {
right: 100px;
}
.examples__person-name {
font-size: 24px;
}
.main__thumbs:last-child .main__thumb-text {
left: 10rem;
}
.main__thumb {
width: 5.625rem;
height: 5.625rem;
}
.main__thumb-text {
top: calc(100% + 7rem);
}
.main__logo {
margin-top: -3rem;
}
.team__item-labels {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.team__item-labels .team__item:last-child .team__item-text {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
.blogger-body__content {
padding: 0em 0em 0em 4.0625em;
}
}
@media (min-width: 1399.98px) {
.btn {
font-size: 24px;
}
.main__thumbs {
padding-bottom: 3.625rem;
}
.main__thumbs:last-child {
padding-bottom: 7.5rem;
}
.main__logo {
-webkit-transform: translateX(4.25rem);
-ms-transform: translateX(4.25rem);
transform: translateX(4.25rem);
}
.main__logo-num {
font-size: 70px;
}
.main__logo-text {
font-size: 20px;
}
.main__tagline,
.about__body-caption {
font-size: 24px;
}
.main__title {
font-size: 40px;
}
.main__btn {
margin: 1.1666666667em 0em 0em 0em;
}
}
@media (min-width: 1599.98px) {
.header__wrapper {
padding: 5em 0em 0em 0em;
}
.main__logo-num {
font-size: 80px;
}
.main__logo-text {
font-size: 24px;
}
.main__logo-image img {
max-height: none;
height: auto;
width: auto;
}
}
@media (max-width: 991.98px) {
.about__item-desc {
display: none;
}
}
@media (max-width: 630px) {
.header__menu-link {
text-align: center;
font-size: 2rem;
width: 100%;
display: block;
padding: 1rem 0;
font-weight: 700;
border-bottom: 1px solid rgba(175, 175, 169, 0.3);
}
}
@media (any-hover: hover) {
.modal__close:hover {
color: #9b9af7;
}
.examples__name:hover {
text-decoration: none;
color: #e4fc71;
}
.examples__person:hover .examples__person-name {
text-decoration: none;
}
.contacts__item-link:hover,
.header__menu-link:hover {
text-decoration: underline;
}
.blogger-caption__nick:hover {
color: #ef8bf8;
}
::-webkit-scrollbar-thumb:hover {
background: #dbfb3f;
}
.btn.btn-primary:hover {
background: #dbfb3f;
}
.about__item:hover .about__item-card {
border: 1px solid rgba(239, 139, 248, 0.25);
}
.about__item:hover .about__item-card .about__item-text {
color: #fff;
}
.about__item:hover .about__item-card::after {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(239, 139, 248, 0.17)), color-stop(77.7%, rgba(239, 139, 248, 0)));
background-image: -o-linear-gradient(top, rgba(239, 139, 248, 0.17) 0%, rgba(239, 139, 248, 0) 77.7%);
background-image: linear-gradient(180deg, rgba(239, 139, 248, 0.17) 0%, rgba(239, 139, 248, 0) 77.7%);
}
.about__item:hover .about__item-card::before {
opacity: 0.24;
}
.about__item:hover .about__item-desc {
opacity: 1;
visibility: visible;
-webkit-transform: translateY(32px);
-ms-transform: translateY(32px);
transform: translateY(32px);
}
.cases__item-link:hover {
text-decoration: none;
}
.cases__item-link:hover::after {
-webkit-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
.team__item:hover {
border-color: #111111;
}
.team__item:hover .team__item-footer {
background: rgba(175, 175, 169, 0.1);
}
.team__item-more:hover::after {
-webkit-transform: translateX(5px);
-ms-transform: translateX(5px);
transform: translateX(5px);
}
.team__more-link:hover {
text-decoration: none;
}
.blogger-stats__image .big-part:hover {
fill: #e85bf5;
}
.blogger-stats__image .small-part:hover {
fill: #dbfb3f;
}
.blogger-stats__grid:hover .blogger-stats__grid-item::after {
opacity: 1;
}
.blogger-stats__grid:hover .blogger-stats__grid-item:hover {
opacity: 1;
}
.blogger-stats__grid:hover .blogger-stats__grid-item:hover::after {
opacity: 0;
}
.blogger-stats__grid:hover .blogger-stats__grid-item:hover .blogger-stats__on-hover {
opacity: 0.5;
}
.blogger-stats__grid-item:hover::after {
opacity: 1;
}
.blogger-stats__grid-item:hover .blogger-stats__hover {
opacity: 0.5;
}
.blogger-footer__item-order:hover {
border-color: transparent;
}
.stats__columns:hover .stats__column {
opacity: 0.6;
}
}
@media (any-hover: hover) and (any-hover: hover) {
.stats__columns:hover .stats__column:hover {
opacity: 1;
}
}
@media (min-width: 767.98px){
.webp .case__step:nth-child(2){ background: url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/case-decor.webp) 0 40px/95% auto no-repeat, url(//krasnovmedia.ru/wp-content/themes/astra-child/assets/img/v3/cases/case-decor-2.webp) 0 calc(100% + 20px)/95% auto no-repeat; }
}