body, .custom-scroll {   scrollbar-color: rgba(24, 165, 0, 1) transparent; }
body::-webkit-scrollbar-track, .custom-scroll::-webkit-scrollbar-track {
background-color: transparent; }
@media (max-width: 991px) {
#sc-menu-header-fake {
display: none;
}
}
#head-block {
user-select: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: rgba(53, 227, 59, 1);
position: relative;
gap: 6%;    background-image: radial-gradient(circle at 30% 52%, rgba(135, 199, 0, 1), rgba(53, 227, 59, 1)); justify-content: center;
align-items: center;
width: 100%;
overflow: hidden;  flex-direction: column;
}
#head-block > #background-emotocin {
display: block;
content: " ";
position: absolute;
max-width: 100%;
width: fit-content;
height: 100%;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
overflow: visible;
height: 110%;
top: -10%;
}
#head-block > #background-emotocin > .light {
display: flex;
z-index: -1;
position: absolute;
max-height: 100%;
min-height: 100%;
height: fit-content;
width: 100%;
overflow: visible;
align-items: flex-end;
justify-content: center;
bottom: -25%;
overflow: visible;
}
#head-block > #background-emotocin > .light::before {
display: block;
content: " ";
position: absolute;
height: 100vh;
width: 100vh;
min-height: 60em;
min-width: 60em;
z-index: -1;
overflow: visible;
background-image: radial-gradient(circle at 50% 50%, rgba(255, 255, 200, 1) 0%, rgba(255, 255, 200, 0.6) 50%, transparent 66%);
transform: scale(2);
-moz-transform: scale(2);
-webkit-transform: scale(2);
}
#head-block > #background-emotocin > .light > svg,
#head-block > #background-emotocin > .light > img {
position: absolute;
display: block;
z-index: -1;
max-width: 100%;
object-fit: cover;
}
#head-block > #background-emotocin > .light > img {
height: fit-content;
min-width: 100%;
}
#head-block > #background-emotocin > .woman-knight {
display: flex;
position: relative;
height: 100%;
width: auto;
align-content: flex-end;
justify-content: center;
align-items: flex-end;
}
#head-block > #background-emotocin > .woman-knight > img {
position: relative;
display: block;
height: auto;
max-height: 100%;
object-fit: cover;
max-width: 100%;
overflow: visible;
filter: drop-shadow(0 0 2em rgba(255, 255, 200));
-moz-filter: drop-shadow(0 0 2em rgba(255, 255, 200));
-webkit-filter: drop-shadow(0 0 2em rgba(255, 255, 200));
}
#head-block > #background-emotocin > .woman-knight > img:not([loaded="true"]) {
min-height: 100%;
min-width: 100%;
}
#head-block > *:not(#background-emotocin) {
z-index: 2;
}
#head-block > .text-1,
#head-block > .image {
position: relative;
max-width: 42%;
}
#head-block > .text-1 {
display: flex;
position: relative;
letter-spacing: -0.02em;
color: rgba(15, 15, 15, 1);
text-align: right; flex-direction: column;
justify-content: flex-end;
font-size: 3em;
flex-basis: 25%;
padding-top: 1.5em;
}
@media (max-width: 1439px) {
#head-block > .text-1 {
font-size: 3em;
}
}
@media (max-width: 1349px) {
#head-block > .text-1 {
font-size: 2.9em;
}
#head-block {
gap: 5%;
}
}
@media (max-width: 1115px) {
#head-block {
gap: 4%;
}
}
#head-block > .image {
display: flex;
flex-basis: max-content;
height: max-content;
min-width: 18%;
max-height: max-content;
width: fit-content;
flex-grow: 1;
padding-bottom: 3%;
}
#head-block > .image > img {
max-width: 100%;
width: 100%;
height: fit-content;
object-fit: contain;
min-width: 100%;
}
#head-block > .text-1 {
font-weight: 500;
}
#head-block > .text-1 > span {
display: inline-flex;
flex-direction: row;
flex-wrap: nowrap;
}
#head-block > .text-1 > span:nth-of-type(1) { letter-spacing: 0.01em;
gap: 0.4em;
justify-content: flex-end;  letter-spacing: -0.0425em;
}
#head-block > .text-1 > span:nth-of-type(2) {  letter-spacing: -0.04em;
gap: 0.4em;    position: relative;
justify-content: flex-end;    letter-spacing: -0.0425em;
}
#head-block > .text-1 > span:nth-of-type(3) {
justify-content: flex-end;
gap: 0.3em;
}
#head-block > .text-1 > span:nth-of-type(3) > span:nth-of-type(1) {
font-weight: 300;
letter-spacing: 0.01em; }
#head-block > .text-1 > span:nth-of-type(3) > span:nth-of-type(2) { letter-spacing: 0.0;
}
#head-block > .text-1 > span:nth-of-type(2)::after { display: none;
content: " ";
height: 128%;
background-color: rgba(253, 175, 0, 1);
width: 103.4%;
position: absolute;
left: -1%;
top: -5%;
right: 0;
bottom: 0;
z-index: -1;
}
#head-block > .text-1 .logo {
position: relative;
display: inline-flex;
content: " ";
background-repeat: no-repeat;
background-position: 50% 63%;
background-size: 100% auto;
background-image: url(//emotocin.ru/wp-content/themes/emotocin/img/logo/logo-emotocin-dna.svg);
height: auto;
order: 0;
width: 1.8em;
min-width: 1.8em; filter: opacity(0.9);
-moz-filter: opacity(0.9);
-webkit-filter: opacity(0.9);
}
#head-block .appearing:not(.animate),
#head-block .appearing-slow:not(.animate) {
transition: opacity 0s ease!important;
-moz-transition: opacity 0s ease!important;
-webkit-transition: opacity 0s ease!important;
opacity: 0!important;
}
@media (max-width: 991px) {
#head-block .appearing[animator]:not(.animate) {
opacity: 0!important;
}
#head-block .appearing[animator].inanimate {
transition: opacity 0.25s ease!important;
-moz-transition: opacity 0.25s ease!important;
-webkit-transition: opacity 0.25s ease!important;
}
#head-block .appearing-slow[animator]:not(.animate) {
opacity: 0!important;
}
#head-block .appearing-slow[animator].inanimate {
transition: opacity 0.6s ease!important;
-moz-transition: opacity 0.6s ease!important;
-webkit-transition: opacity 0.6s ease!important;
}
#head-block .appearing-up[animator]:not(.animate) {
transform: translateY(0.8em)!important;
-moz-transform: translateY(0.8em)!important;
-webkit-transform: translateY(0.8em)!important;
opacity: 0!important;
}
#head-block .appearing-up[animator].inanimate {
transition: transform 0.3s ease-out, opacity 0.3s ease!important;
-moz-transition: transform 0.3s ease-out, opacity 0.3s ease!important;
-webkit-transition: transform 0.3s ease-out, opacity 0.3s ease!important;
}
#head-block .appearing-right[animator]:not(.animate) {
transform: translateX(0.6em)!important;
-moz-transform: translateX(0.6em)!important;
-webkit-transform: translateX(0.6em)!important;
opacity: 0!important;
}
#head-block .appearing-right[animator].inanimate {
transition: transform 0.3s ease, opacity 0.3s ease!important;
-moz-transition: transform 0.3s ease, opacity 0.3s ease!important;
-webkit-transition: transform 0.3s ease, opacity 0.3s ease!important;
}
}
@-webkit-keyframes light-1 {
0% {
transform: rotate(-30deg) scale(1.75);
-moz-transform: rotate(-30deg) scale(1.75);
-webkit-transform: rotate(-30deg) scale(1.75);
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
40% {
transform: rotate(-10deg) scale(1.85);
-moz-transform: rotate(-10deg) scale(1.85);
-webkit-transform: rotate(-10deg) scale(1.85);
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
100% {
transform: rotate(5deg) scale(1.9);
-moz-transform: rotate(5deg) scale(1.9);
-webkit-transform: rotate(5deg) scale(1.9);
}
}
@keyframes light-1 {
0% {
transform: rotate(-30deg) scale(1.75);
-moz-transform: rotate(-30deg) scale(1.75);
-webkit-transform: rotate(-30deg) scale(1.75);
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
40% {
transform: rotate(-10deg) scale(1.85);
-moz-transform: rotate(-10deg) scale(1.85);
-webkit-transform: rotate(-10deg) scale(1.85);
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
100% {
transform: rotate(5deg) scale(1.9);
-moz-transform: rotate(5deg) scale(1.9);
-webkit-transform: rotate(5deg) scale(1.9);
}
}
@-webkit-keyframes light-2 {
0% {
transform: rotate(70deg) scale(1.85);
-moz-transform: rotate(70deg) scale(1.85);
-webkit-transform: rotate(70deg) scale(1.85);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
45% {
transform: rotate(90deg) scale(1.75);
-moz-transform: rotate(90deg) scale(1.75);
-webkit-transform: rotate(90deg) scale(1.75);
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
100% {
transform: rotate(115deg) scale(1.65);
-moz-transform: rotate(115deg) scale(1.65);
-webkit-transform: rotate(115deg) scale(1.65);
}
}
@keyframes light-2 {
0% {
transform: rotate(70deg) scale(1.85);
-moz-transform: rotate(70deg) scale(1.85);
-webkit-transform: rotate(70deg) scale(1.85);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
45% {
transform: rotate(90deg) scale(1.75);
-moz-transform: rotate(90deg) scale(1.75);
-webkit-transform: rotate(90deg) scale(1.75);
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
100% {
transform: rotate(115deg) scale(1.65);
-moz-transform: rotate(115deg) scale(1.65);
-webkit-transform: rotate(115deg) scale(1.65);
}
}
@-webkit-keyframes light-3 {
0% {
transform: rotate(-130deg) scale(1.55);
-moz-transform: rotate(-130deg) scale(1.55);
-webkit-transform: rotate(-130deg) scale(1.55);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
65% {
transform: rotate(-105deg) scale(1.8);
-moz-transform: rotate(-105deg) scale(1.8);
-webkit-transform: rotate(-105deg) scale(1.8);
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
100% {
transform: rotate(-85deg) scale(1.9);
-moz-transform: rotate(-85deg) scale(1.9);
-webkit-transform: rotate(-85deg) scale(1.9);
}
}
@keyframes light-3 {
0% {
transform: rotate(-130deg) scale(1.55);
-moz-transform: rotate(-130deg) scale(1.55);
-webkit-transform: rotate(-130deg) scale(1.55);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
65% {
transform: rotate(-105deg) scale(1.8);
-moz-transform: rotate(-105deg) scale(1.8);
-webkit-transform: rotate(-105deg) scale(1.8);
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
100% {
transform: rotate(-85deg) scale(1.9);
-moz-transform: rotate(-85deg) scale(1.9);
-webkit-transform: rotate(-85deg) scale(1.9);
}
}
@-webkit-keyframes light-4 {
0% {
transform: rotate(170deg) scale(1.55);
-moz-transform: rotate(170deg) scale(1.55);
-webkit-transform: rotate(170deg) scale(1.55);
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
70% {
transform: rotate(145deg) scale(1.45);
-moz-transform: rotate(145deg) scale(1.45);
-webkit-transform: rotate(145deg) scale(1.45);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
100% {
transform: rotate(125deg) scale(1.4);
-moz-transform: rotate(125deg) scale(1.4);
-webkit-transform: rotate(125deg) scale(1.4);
}
}
@keyframes light-4 {
0% {
transform: rotate(170deg) scale(1.55);
-moz-transform: rotate(170deg) scale(1.55);
-webkit-transform: rotate(170deg) scale(1.55);
animation-timing-function: ease-in;
-webkit-animation-timing-function: ease-in;
}
70% {
transform: rotate(145deg) scale(1.45);
-moz-transform: rotate(145deg) scale(1.45);
-webkit-transform: rotate(145deg) scale(1.45);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
100% {
transform: rotate(125deg) scale(1.4);
-moz-transform: rotate(125deg) scale(1.4);
-webkit-transform: rotate(125deg) scale(1.4);
}
}
@-webkit-keyframes light-5 {
0% {
transform: rotate(195deg) scale(1.9);
-moz-transform: rotate(195deg) scale(1.9);
-webkit-transform: rotate(195deg) scale(1.9);
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
50% {
transform: rotate(220deg) scale(1.8);
-moz-transform: rotate(220deg) scale(1.8);
-webkit-transform: rotate(220deg) scale(1.8);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
100% {
transform: rotate(240deg) scale(1.7);
-moz-transform: rotate(240deg) scale(1.7);
-webkit-transform: rotate(240deg) scale(1.7);
}
}
@keyframes light-5 {
0% {
transform: rotate(195deg) scale(1.9);
-moz-transform: rotate(195deg) scale(1.9);
-webkit-transform: rotate(195deg) scale(1.9);
animation-timing-function: ease;
-webkit-animation-timing-function: ease;
}
50% {
transform: rotate(220deg) scale(1.8);
-moz-transform: rotate(220deg) scale(1.8);
-webkit-transform: rotate(220deg) scale(1.8);
animation-timing-function: ease-out;
-webkit-animation-timing-function: ease-out;
}
100% {
transform: rotate(240deg) scale(1.7);
-moz-transform: rotate(240deg) scale(1.7);
-webkit-transform: rotate(240deg) scale(1.7);
}
}
#head-block > #background-emotocin > .light > svg,
#head-block > #background-emotocin > .light > img {
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-direction: alternate-reverse;
-webkit-animation-direction: alternate-reverse;
animation-play-state: running;
-webkit-animation-play-state: running;
animation-fill-mode: both;
-webkit-animation-fill-mode: both;
}
#head-block > #background-emotocin > .light > svg {
filter: sepia(1) blur(0.7em);
-moz-filter: sepia(1) blur(0.7em);
-webkit-filter: sepia(1) blur(0.7em);
}
#head-block > #background-emotocin > .light > img {
filter: sepia(1) hue-rotate(10deg) contrast(1.5) saturate(1.5);
-moz-filter: sepia(1) hue-rotate(10deg) contrast(1.5) saturate(1.5);
-webkit-filter: sepia(1) hue-rotate(10deg) contrast(1.5) saturate(1.5);
}
#head-block > #background-emotocin > .light > *:nth-of-type(2n+1) {
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-duration: 20s;
-webkit-animation-duration: 20s;
animation-play-state: paused; -webkit-animation-play-state: paused; }
#head-block > #background-emotocin > .light > *:nth-of-type(2n) {
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
animation-duration: 16s;
-webkit-animation-duration: 16s;
}
#head-block > #background-emotocin > .light > *:nth-of-type(5n+1) {
animation-name: light-1;
-webkit-animation-name: light-1;
}
#head-block > #background-emotocin > .light > svg:nth-of-type(5n+1) {
animation-play-state: paused; -webkit-animation-play-state: paused; }
#head-block > #background-emotocin > .light > *:nth-of-type(5n+2) {
animation-name: light-2;
-webkit-animation-name: light-2;
}
#head-block > #background-emotocin > .light > *:nth-of-type(5n+3) {
animation-name: light-3;
-webkit-animation-name: light-3;
}
#head-block > #background-emotocin > .light > svg:nth-of-type(5n+3) {
animation-play-state: paused; -webkit-animation-play-state: paused; }
#head-block > #background-emotocin > .light > *:nth-of-type(5n+4) {
animation-name: light-4;
-webkit-animation-name: light-4;
}
#head-block > #background-emotocin > .light > *:nth-of-type(5n+5) {
animation-name: light-5;
-webkit-animation-name: light-5;
}
@media (orientation: landscape) {
#head-block {
min-height: 50vw !important;
}
#head-block > .text-1,
#head-block > .image {
align-self: flex-start;
left: 7%;
}
#head-block > .text-1 {
align-items: flex-start;
}
#head-block > #background-emotocin { max-width: 45%;
}
#head-block > #background-emotocin > .woman-knight > img[loaded="true"] { height: 100%;
}
#head-block > .text-1 > span {
}
#head-block > .text-1 > span:nth-of-type(1) {  text-align: left;
justify-content: flex-start; justify-content: flex-end;
}
#head-block > .text-1 > span:nth-of-type(2) {  justify-content: flex-start; justify-content: flex-end;
}
#head-block > .text-1 > span:nth-of-type(3) {  }
#head-block > .text-1 > span:nth-of-type(4) {  }
#head-block > .text-1 .logo {
order: 2;
}
}
@media (orientation: portrait) {
#head-block {
flex-direction: row;
align-items: flex-end; gap: 0.5rem; min-height: 140vw !important;
}
#head-block::before {
position: absolute;
display: block;
content: " ";
bottom: 0;
width: 100%;
height: 19%;
border-radius: 40% 40% 0 0 / 15%;
user-select: none;
background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 -0.2em 2em 3em rgba(0, 0, 0, 0.1);
transform: scale(1.2);
}
#head-block > .text-1,
#head-block > .image {
min-height: 40%;
height: 40%;
justify-content: center;
padding-bottom: 20%;
}
#head-block > .text-1 {
padding-top: 0;
font-size: 2.5em;
font-weight: 800;
flex-basis: calc(55% - 0.5rem / 2 - 0.75rem);
width: calc(55% - 0.5rem / 2 - 0.75rem);
min-width: calc(55% - 0.5rem / 2 - 0.75rem);
}
#head-block > .text-1 > span {
color: rgba(255, 255, 255, 1);
}
#head-block > .text-1 .logo {
filter: invert(1);
-moz-filter: invert(1);
-webkit-filter: invert(1);
}
#head-block > .image { align-items: center;
flex-basis: calc(45% - 0.5rem / 2 - 0.75rem);
width: calc(45% - 0.5rem / 2 - 0.75rem);
min-width: calc(45% - 0.5rem / 2 - 0.75rem);
}
#head-block > .image > img {
filter: drop-shadow(0.1em -0.2em 0.2em rgba(0, 0, 0, 0.2));
-moz-filter: drop-shadow(0.1em -0.2em 0.2em rgba(0, 0, 0, 0.2));
-webkit-filter: drop-shadow(0.1em -0.2em 0.2em rgba(0, 0, 0, 0.2));
}
#head-block > .text-1 > span {
text-transform: uppercase;
}
#head-block > #background-emotocin {  top: -50%;
border-bottom: 0.8vw solid white;
overflow: hidden;
min-width: 100%;
width: 100%;
}
#head-block > #background-emotocin > .woman-knight { }
#head-block > #background-emotocin > .light {
}
a.scrolldown-button::before {
background-color: rgba(255, 255, 255, 1);
}
a.scrolldown-button::after {
border: 2px solid rgba(255, 255, 255, 1);
}
}
@media (min-width: 992px) {
#head-block {
padding-top: calc(6.7em - 2.8em); }
#head-block > .text-1:not(.animate) {
opacity: 0;
}
#head-block > .image:not(.animate) {
transition: opacity 0s ease!important;
-moz-transition: opacity 0s ease!important;
-webkit-transition: opacity 0s ease!important;
}
#head-block > .image:not(.animate) > img {
opacity: 0;
}
}
@media (max-width: 991px) {
#head-block > #background-emotocin > .light > * {
animation-play-state: paused !important; -webkit-animation-play-state: paused !important; }
#head-block > .text-1 {
font-size: 2.5em;
}
}
@media (max-width: 991px) and (orientation: landscape) {
}
@media (max-width: 991px) and (orientation: portrait) {
#head-block {  }
#head-block > .text-1 {
font-size: 1.8em;
}
a.scrolldown-button {
bottom: 2rem;
}
}
@media (max-width: 849px) {
#head-block > .text-1 {
font-size: 2.2em;
}
}
@media (max-width: 849px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 1.6em;
}
}
@media (min-width: 768px) {
}
@media (max-width: 767px) {
#head-block > .text-1 {
font-size: 2.1em;
}
}
@media (max-width: 767px) and (orientation: landscape) {
#head-block > #background-emotocin > .light > svg {
filter: sepia(1) blur(2.1vh);
-moz-filter: sepia(1) blur(2.1vh);
-webkit-filter: sepia(1) blur(2.1vh);
}
}
@media (max-width: 767px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 1.45em;
}
#head-block > #background-emotocin > .light > svg {
filter: sepia(1) blur(1.64vw);
-moz-filter: sepia(1) blur(1.64vw);
-webkit-filter: sepia(1) blur(1.64vw);
}
}
@media (max-width: 699px) and (orientation: landscape) {
#head-block > .text-1 { font-size: 1.6em;
padding-top: 1.8em;
}
}
@media (max-width: 699px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 1.25em;
}
}
@media (max-width: 599px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 1.1em;
}
}
@media (max-width: 549px) and (orientation: landscape) {
#head-block > .text-1 { font-size: 1.5em;
padding-top: 1.8em;
}
}
@media (max-width: 549px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 1em;
}
}
@media (max-width: 499px) and (orientation: landscape) {
#head-block > .text-1 { font-size: 1.25em;
}
}
@media (max-width: 499px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 0.95em;
}
}
@media (max-width: 449px) and (orientation: portrait) {
#head-block > .text-1 {
flex-basis: calc(62% - 0.5rem / 2 - 0.75rem);
width: calc(62% - 0.5rem / 2 - 0.75rem);
min-width: calc(62% - 0.5rem / 2 - 0.75rem);
}
#head-block > .image {
flex-basis: calc(38% - 0.5rem / 2 - 0.75rem);
width: calc(38% - 0.5rem / 2 - 0.75rem);
min-width: calc(38% - 0.5rem / 2 - 0.75rem);
}
}
@media (max-width: 424px) and (orientation: landscape) {
#head-block > .text-1 { font-size: 1.15em;
}
}
@media (max-width: 424px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 0.85em;
}
}
@media (max-width: 399px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 0.82em;
}
}
@media (max-width: 374px) and (orientation: portrait) {
#head-block > .text-1 {
font-size: 0.8em;
}
}
#benefits {
display: flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap; align-items: center;
padding-top: 5em;
padding-bottom: 7em;
gap: 3em;
}
#benefits::after {
display: block;
position: absolute;
content: " ";
z-index: -1;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url(//emotocin.ru/wp-content/themes/emotocin/img/chemical-bg.webp);
background-repeat: no-repeat;
background-position: 100% 50%;
background-size: auto 100%;
opacity: 0.55;
transition: opacity 0.2s ease;
-moz-transition: opacity 0.2s ease;
-webkit-transition: opacity 0.2s ease;
filter: hue-rotate(50deg); }
@media (min-width: 992px) {
#benefits[animator]:not(.animate)::after {
opacity: 0!important;
}
}
#benefits > .pre-header,
#benefits > .header {
text-transform: unset;
width: auto;
text-align: center;
padding-top: 0;
font-size: 3em;
}
#benefits > .pre-header > h1,
#benefits > .header > h1 {
font-size: 1em;
width: auto;
padding-top: 0;
padding-bottom: 0;
line-height: inherit;
text-transform: unset;
color: inherit;
text-align: center;
}
#benefits > .pre-header {
color: rgba(15, 15, 15, 1);
}
#benefits > .header {
color: rgba(15, 15, 15, 1);
font-weight: 600;
}
#benefits > .benefits,
#benefits > .limitations {
display: flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
#benefits > .limitations {
gap: 3em 6em;
padding-bottom: 2em;
}
#benefits > .benefits {
gap: 3em 10em;
}
#benefits > .limitations > *,
#benefits > .benefits > * {
padding: 0;
margin: 0;
}
#benefits > .limitations > *,
#benefits > .benefits > * {
display: inline-flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap;
align-content: center;
height: auto;
gap: 1em;
justify-content: center;
}
#benefits > .limitations > * {
flex-basis: 19em;
max-width: 22em;
flex-grow: 1;
background-color: rgba(243, 154, 24, 1);
background-repeat: no-repeat;
background-position: 0.75em 1.5em, 100% 100%;
background-size: 2.5em auto, 100% 100%; background-image: url(//emotocin.ru/wp-content/themes/emotocin/img/exclamation.svg), radial-gradient(circle at 0% 0%, rgba(255, 85, 49, 1), rgba(255, 231, 106, 1));
padding: 4em 2em;
border-radius: 2.5em;
letter-spacing: -0.03em;
}
#benefits > .limitations > * > .text {
display: block;
position: relative;
height: auto;
width: 100%;
font-size: 1.3em;
text-align: center;
line-height: 1.3;
font-weight: 500;
color: rgba(15, 15, 15, 1);
filter: drop-shadow(0 0 1px rgba(255, 255, 140, 0.4));
-moz-filter: drop-shadow(0 0 1px rgba(255, 255, 140, 0.4));
-webkit-filter: drop-shadow(0 0 1px rgba(255, 255, 140, 0.4));
}
#benefits > .benefits > * {
flex-basis: 12.5em;
max-width: 15em;
min-width: 12.5em;
flex-grow: 1;
}
#benefits > .benefits > * > .image {
width: 100%;
min-height: 12.5em;
display: flex;
flex-grow: 1;
}
#benefits > .benefits > * > .image > img {   filter: drop-shadow(0 0 0.9em rgba(180, 237, 89, 1)) drop-shadow(0 0 0.6em rgba(125, 209, 90, 1));
-moz-filter: drop-shadow(0 0 0.9em rgba(180, 237, 89, 1)) drop-shadow(0 0 0.6em rgba(125, 209, 90, 1));
-webkit-filter: drop-shadow(0 0 0.9em rgba(180, 237, 89, 1)) drop-shadow(0 0 0.6em rgba(125, 209, 90, 1)); transition: filter .7s ease, opacity 0.5s ease;
-moz-transition: filter .7s ease, opacity 0.5s ease;
-webkit-transition: filter .7s ease, opacity 0.5s ease;
user-select: none;
pointer-events: none;
}
#benefits > .benefits > * > .text {
text-align: center;
width: auto;
max-width: 100%; font-size: 1.5em;
font-weight: 700;
filter: drop-shadow(0 0 1em rgba(255, 255, 255, 1)) drop-shadow(0 0 2em rgba(255, 255, 255, 1));
-moz-filter: drop-shadow(0 0 1em rgba(255, 255, 255, 1)) drop-shadow(0 0 2em rgba(255, 255, 255, 1));
-webkit-filter: drop-shadow(0 0 1em rgba(255, 255, 255, 1)) drop-shadow(0 0 2em rgba(255, 255, 255, 1));
}
@media (min-width: 992px) {
#benefits > .benefits > * > .image:not(.animate) > img {
opacity: 0;
filter: drop-shadow(0 0 0em rgba(255, 200, 0, 0)) drop-shadow(0 0 0em rgba(220, 150, 30, 0));
-moz-filter: drop-shadow(0 0 0em rgba(255, 200, 0, 0)) drop-shadow(0 0 0em rgba(220, 150, 30, 0));
-webkit-filter: drop-shadow(0 0 0em rgba(255, 200, 0, 0)) drop-shadow(0 0 0em rgba(220, 150, 30, 0));
}
}
@media (max-width: 991px) {
#benefits {
padding-top: 4em;
padding-bottom: 5.5em;
}
#benefits::after {
display: none;
}
#benefits > .pre-header,
#benefits > .header {
font-size: 2.5em;
}
#benefits > .limitations {
gap: 2em 4vw;
padding-bottom: 1em;
}
#benefits > .benefits {
gap: 2em 7vw;
}
#benefits > .limitations > * > .text {
font-size: 1.2em;
}
}
@media (max-width: 767px) {
#benefits {
padding-top: 3.5em;
padding-bottom: 4em;
}
#benefits > .pre-header,
#benefits > .header {
font-size: 2.3em;
}
#benefits > .limitations > * {
max-width: unset;
background-size: 2em auto, 100% 100%;
background-position: 0.75em 1em, 100% 100%;
padding: 3em 1.75em;
}
#benefits > .benefits > * > .text {
font-size: 1.4em;
font-weight: 600;
}
}
@media (max-width: 424px) {
#benefits {
gap: 2.5em;
}
#benefits > .pre-header,
#benefits > .header {
font-size: 2em;
}
#benefits > .benefits > * {
flex-basis: 11em;
max-width: 11em;
}
}
@media (max-width: 374px) {
#benefits > .pre-header,
#benefits > .header {
font-size: 1.8em;
}
}
#about {
display: flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap; align-items: center;
padding-top: 5em;
padding-bottom: 5em;
gap: 5em;  background-color: rgba(229, 255, 221, 1); }
#about > h2 {
font-weight: 400;
width: auto;
text-transform: unset;
text-align: center;
}
#about > .substances {
display: flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
width: 100%;
gap: 2em 3em;
}
#about > .substances > div {
display: grid;
position: relative;
grid-template-rows: 2em max-content auto max-content;
flex-basis: 25em;
max-width: 35em;
flex-grow: 1;
flex-shrink: 1;
gap: 0.2em;
}
#about > .substances > div > .icon {
max-height: 2em;
height: 100%;
width: auto;
user-select: none;
pointer-events: none;
grid-row: 1;
margin-left: 3%;
}
#about > .substances > div > h3 {
display: block;
position: relative;
grid-row: 2;
text-transform: unset;
font-size: 1.6em;
font-weight: 500;
text-align: center;
padding-bottom: 0.7em;
transition: color 1s ease!important;
-moz-transition: color 1s ease!important;
-webkit-transition: color 1s ease!important;
}
#about > .substances > div > h3::after {
display: block;
position: relative;
content: " ";
height: 0.1em;
width: 100%;  background-image: radial-gradient(circle at 50% 50%, rgba(150, 255, 0, 1), rgba(126, 209, 87, 1)); margin-top: 0.3em;
transition: width 0.8s ease!important;
-moz-transition: width 0.8s ease!important;
-webkit-transition: width 0.8s ease!important;
}
@media (min-width: 992px) {
#about > .substances > div > h3[animator]:not(.animate) {
color: rgba(255, 255, 255, 0)!important;
}
#about > .substances > div > h3[animator]:not(.animate)::after {
width: 0%!important;
}
}
#about > .substances > div > .text {
grid-row: 3;
font-size: 0.8rem;
}
#about > .substances > div > .text > .content {
margin-bottom: 1.5em;
}
#about > .substances > div > .article-link {
align-self: end;
grid-row: 4;
justify-self: center;
}
@media (max-width: 1279px) {
}
@media (max-width: 991px) {
#about {
padding-bottom: 3em;
}
#about > .substances {
gap: 2em 2em;
}
}
@media (max-width: 767px) {
#about {
gap: 4em;
}
#about > .substances > div {
grid-template-rows: 1.75em max-content auto max-content;
}
#about > .substances > div > h3 {
font-size: 1.55em;
}
}
@media (max-width: 424px) {
#about > h2 {
font-size: 1.6em;
}
}
#usefulness {
display: flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap; align-items: center;
padding-top: 5em;
padding-bottom: 5em;
gap: 5em;   background-color: rgba(206, 255, 193, 1); }
#usefulness > h2 {
}
#usefulness > h3 {
font-weight: 400;
width: auto;
text-align: center;
padding-top: 0.5em;
}
#usefulness > .windows {
display: flex;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
max-width: calc(24em * 4 - 1px);
}
#usefulness .windows > * {   flex-basis: calc(100% / 3 + 1px);
flex-grow: 1;   max-width: 24em;
display: inline-flex;
height: 24em;
overflow: hidden;
}
#usefulness .windows > *,
#usefulness > .carouselWindows {
min-height: 24em;
}
#usefulness > .carouselWindows {
width: 100%;
}
#usefulness > .carouselWindows .flip-block {
flex-basis: 24em;
}
#usefulness > .windows {
gap: 0 2em;
}
#usefulness .sc-carousel {
gap: 0 1.5em;
}
#usefulness .windows > .flip-block {
padding-top: 1em;
padding-bottom: 1em;
}
#usefulness .windows > .flip-block > * {
}
#usefulness .windows > .flip-block > * > div:nth-child(1) {
background-color: rgba(255, 255, 255, 1);
display: grid;
grid-template-rows: 55% auto;
gap: 7.5%;
padding: 10% 10%;
justify-items: center;
}
#usefulness .windows > .flip-block > * > div:nth-child(1) > * {
display: inline-flex;
text-align: center;
}
#usefulness .windows > .flip-block > * > div:nth-child(1) > .icon {
grid-row: 1;
align-self: end;
width: 100%;
height: 100%;
}
#usefulness .windows > .flip-block > * > div:nth-child(1) > h4 {
grid-row: 2;
align-self: start;
font-size: 1.4em;
text-transform: lowercase;
}
#usefulness .windows > .flip-block > * > div:nth-child(2) {
background-color: rgba(255, 255, 255, 1);
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: center;
padding: 1.5em 1.5em;
}
#usefulness .windows > .flip-block > * > div:nth-child(2) > .text {
text-align: center;
}
#usefulness .windows > .flip-block > * > div:nth-child(1):after {
display: flex;
position: absolute;  content: " ";
background-repeat: no-repeat;
background-position: center center;
background-size: 75% auto;  background-image: url(//emotocin.ru/wp-content/themes/emotocin/img/icons/three-dots.svg); bottom: 2em;
flex-direction: column;
justify-content: center;
text-align: center;
text-transform: lowercase;
width: 2em;
right: 0em;
top: calc(65% / 2 - 4em / 2);
height: 4em;        width: 2em;
right: 1em;
top: 1.2em;
height: 1em;
filter: invert(0.8);
-moz-filter: invert(0.8);
-webkit-filter: invert(0.8);
}
@media (min-width: 1440px) {
#usefulness > .carouselWindows {
display: none;
}
}
@media (max-width: 1439px) {
#usefulness {
gap: 4em;
padding-bottom: 1em;
}
#usefulness > .windows {
display: none;
}
}
@media (max-width: 1279px) {
#usefulness {
gap: 3em;
padding-top: 3.5em; }
}
@media (min-width: 992px) {
#usefulness > .windows {  }
}
@media (max-width: 991px) {
#usefulness {
padding-top: 3em; }
#usefulness > h3 {
font-size: 1.6em;
}
}
@media (max-width: 499px) {
#usefulness {
gap: 2em;
}
#usefulness > h3 {
font-size: 1.3em;
}
}
@media (max-width: 425px) {
#usefulness > .carouselWindows .flip-block {
flex-basis: 100%;
max-width: 100%;
}
}
@media (max-width: 374px) {
#usefulness {
gap: 1.5em;
}
#usefulness > h3 {
font-size: 1.1em;
}
}
#effect {
display: flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap;
padding-top: 5em;
padding-bottom: 1em; gap: 3em;
}
#effect > h2 {
}
#effect .effects-carousel { height: 100%;
}
#effect .effects-carousel > div { min-width: 22em;
max-width: calc(100% / 3 - 0.2rem * 2 / 3);
flex-grow: 1;
height: 100%;
padding-bottom: 1em; }
#effect .effects-carousel .effect {
display: grid;
position: relative;
grid-template-rows: minmax(calc(9em + 2vw), 11vw) minmax(3em, max-content) auto;
justify-items: center;
justify-content: center;
width: 100%;
height: 100%;  padding: 0 calc(1em + 1.5vw);
gap: 0.75em;
transition: filter 0.3s ease;
-moz-transition: filter 0.3s ease;
-webkit-transition: filter 0.3s ease;
}
#effect .effects-carousel .effect > * {
text-align: center;
}
#effect .effects-carousel .effect > .icon {
grid-row: 1;
min-height: calc(9em + 2vw);
height: 11vw;
max-height: 100%;
width: auto;
transition: filter 0.3s ease, transform 0.3s ease;
-moz-transition: filter 0.3s ease, transform 0.3s ease;
-webkit-transition: filter 0.3s ease, transform 0.3s ease;
filter: hue-rotate(50deg) saturate(1);
-moz-filter: hue-rotate(50deg) saturate(1);
-webkit-filter: hue-rotate(50deg) saturate(1);
}
#effect .effects-carousel .effect > h3 {
display: block;
grid-row: 2;
font-size: 1.4em;
line-height: 1.1;
align-self: center;
}
#effect .effects-carousel .effect > .text {
grid-row: 3;
}
@media (min-width: 426px) {
#effect .effects-carousel > div:not(.selected) > .effect {
filter: opacity(0.5);
-moz-filter: opacity(0.5);
-webkit-filter: opacity(0.5);
}
#effect .effects-carousel > div:not(.selected) > .effect > .icon {
filter: hue-rotate(50deg) saturate(0);
-moz-filter: hue-rotate(50deg) saturate(0);
-webkit-filter: hue-rotate(50deg) saturate(0);
transform: scale(0.75);
-moz-transform: scale(0.75);
-webkit-transform: scale(0.75);
}
}
@media (max-width: 425px) {
#effect .effects-carousel > div {
flex-basis: 100%;
min-width: 100%;
max-width: 100%;
}
}
#regimen {
display: flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap;
padding-top: 5em;
padding-bottom: 5em;
gap: 3em;
background-color: rgb(217 217 217);
background-image: radial-gradient(rgb(251 251 251) 0%, transparent);
}
#regimen > h2 {
}
#regimen > .instruction {
display: flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2em;
}
#regimen > .instruction > * {
display: inline-flex;
position: relative;
flex-direction: column;
flex-wrap: nowrap;  }
#regimen > .instruction > .info {
padding: 2em; background-color: rgba(255, 255, 255, 1);
border-radius: 3em;
flex-grow: 1;
min-width: 18em;
flex-basis: 18em; max-width: 24em;
box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.02);
}
#regimen > .instruction > .info > * {
display: inline-flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;
}
#regimen > .instruction > .info > .text {
font-size: 1.3em;
}
#regimen > .instruction > .info > .text > .content {
margin-bottom: 1em;
}
#regimen > .instruction > .info > a {
width: max-content;
}
#regimen > .instruction > .image { width: auto;
}
#regimen > .instruction > .image > img {
height: max-content; width: auto;
max-height: 24vw;
min-height: 15em;
filter: drop-shadow(0 0 1em rgba(0, 0, 0, 0.04));
}
@media (max-width: 991px) {
#regimen > .instruction > .info > .text {
font-size: 1.2em;
}
}
@media (max-width: 767px) {
#regimen > .instruction > .info > .text {
font-size: 1.1em;
}
}
@media (max-width: 559px) {
#regimen > .instruction {
flex-direction: column;
flex-wrap: nowrap;
}
#regimen > .instruction > .info {
order: 2;
flex-basis: unset;
}
}
#buy {
display: flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;
gap: 2em;
align-items: center;
justify-content: space-between;   background-color: rgba(206, 255, 193, 1); padding-top: 3em;
padding-bottom: 3em;
}
#buy > h2 {
flex-basis: max-content;
max-width: max-content;
flex-grow: 1;
width: max-content;
text-align: center;
font-weight: 700;
color: rgba(51, 51, 51, 1);
}
#buy > .marketplaces {
display: inline-flex;
position: relative;
flex-direction: row;
flex-wrap: wrap;  max-width: 100%;
width: 100%;
width: max-content; gap: 1.4em;
justify-content: center;
}
#buy > .marketplaces > a {
display: inline-flex;
position: relative;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.4em;
border-radius: 0.75em;
min-width: 14em;
padding: 1.1em 1.3em;
background-repeat: no-repeat;
background-size: 100% auto;
background-position: 50% 50%;
align-items: center;
justify-content: space-between;
}
#buy > .marketplaces > a::after {
display: block;
position: relative;
content: " ";
width: 1.25em;
height: 1.25em;
right: 0;
border-radius: 1em;
line-height: 1;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: 90% auto;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20128%20128%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23fff%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22li-circle-red%22%3E%3Cpolygon%20class%3D%22cls-1%22%20points%3D%2232%20128%2032%200%2096%2064%2032%20128%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
transition: background-color 0.075s ease-out, filter 0.075s ease-out, transform 0.18s ease, background-size 0.3s ease;
-moz-transition: background-color 0.075s ease-out, filter 0.075s ease-out, transform 0.18s ease, background-size 0.3s ease;
-webkit-transition: background-color 0.075s ease-out, filter 0.075s ease-out, transform 0.18s ease, background-size 0.3s ease;
}
#buy > .marketplaces > a > img {
display: inline-flex;
position: relative;
left: 0;
line-height: 1;
font-size: 1em;
font-weight: 500;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: 0% 50%;
width: auto;
height: 1.1em;
user-select: none;
pointer-events: none;
}
@media (hover: hover) {
#buy > .marketplaces > a:hover {
}
#buy > .marketplaces > a:hover::after {
transform: translateX(0.4em);
-moz-transform: translateX(0.4em);
-webkit-transform: translateX(0.4em);
}
}
#buy > .marketplaces > a.wildberries {
background-image: linear-gradient(90deg, rgba(191, 31, 129, 1) 0%, rgba(77, 50, 124, 1) 100%)
}
#buy > .marketplaces > a.ozon {
background-color: rgba(4, 91, 255, 1);
}
#buy > .marketplaces > a.wildberries > img { }
#buy > .marketplaces > a.ozon > img { }
#buy > .marketplaces > a.leka-pharm {
background-color: rgba(185, 179, 131, 1);
padding: calc(1.1em - 1.8em / 2) 1.3em;
}
#buy > .marketplaces > a.leka-pharm > img {
height: calc(1.1em + 1.8em);
}
#buy > .marketplaces > a.planeta-zdorovya {
background-color: rgba(186, 247, 242, 1);
padding: calc(1.1em - 1.1em / 2) 1.3em;
}
#buy > .marketplaces > a.planeta-zdorovya > img {
height: calc(1.1em + 1.1em);
}
#buy > .marketplaces > a.vita {
background-color: rgba(164, 216, 255, 1);
padding: calc(1.1em - 0.5em / 2) 1.3em;
}
#buy > .marketplaces > a.vita > img {
height: calc(1.1em + 0.5em);
}
#buy > .marketplaces > a.farmani {
background-color: rgba(255, 255, 255, 1);
padding: calc(1.1em - 0.6em / 2) 1.3em;
}
#buy > .marketplaces > a.farmani > img {
height: calc(1.1em + 0.6em);
}
#buy > .marketplaces > a.farmani::after {
filter: invert(1) opacity(0.3);
-moz-filter: invert(1) opacity(0.3);
-webkit-filter: invert(1) opacity(0.3);
}
#buy > .marketplaces > a.maxavit {
background-color: rgba(236, 29, 36, 1);
padding: calc(1.1em - 0.8em / 2) 1.3em;
}
#buy > .marketplaces > a.maxavit > img {
height: calc(1.1em + 0.8em);
}
#buy > .marketplaces > a.apteka-ru {
background-color: rgba(245, 246, 252, 1);
padding: calc(1.1em - 0.8em / 2) 1.3em;
}
#buy > .marketplaces > a.apteka-ru > img {
height: calc(1.1em + 0.8em);
}
#buy > .marketplaces > a.apteka-ru::after {
filter: invert(1) opacity(0.3);
-moz-filter: invert(1) opacity(0.3);
-webkit-filter: invert(1) opacity(0.3);
}
#buy > .marketplaces > a.sklad-zdorovya {
background-color: rgba(94, 47, 148, 1);
padding: calc(1.1em - 0.0em / 2) 1.3em;
}
#buy > .marketplaces > a.sklad-zdorovya > img {
height: calc(1.1em + 0.0em);
}
@media (max-width: 991px) {
#buy {
justify-content: center;
}
#buy > h2 {
width: 100%;
flex-basis: 100%;
max-width: 100%;
min-width: 100%;
}
}