* { margin: 0px; padding: 0px; border: 0;} *,*::before, *::after {box-sizing: border-box;} ::selection {background: #fb8c77; color: #fff;} ::-moz-selection {background: #fb8c77; color: #fff;} table {border-collapse: collapse; border-spacing: 0;} html,body {height: 100%;} a > img {border: none;} input, button, textarea, select, a, img {outline: none;} body {width: 100%; color: #55555E; background-color: #FFFFFF; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: normal; font-style: normal; font-size: 18px; overflow-x: hidden; min-width: 320px; position: relative; max-height: 99999px; -webkit-overflow-scrolling: touch; -webkit-text-size-adjust:none;} .wrap {min-height: 100%; position: relative; overflow-x: hidden;} #main {padding-bottom: 220px;} footer {min-height: 220px; margin-top: -220px; position: relative; background-color: #F1F1F1; padding: 50px 0 40px; z-index: 2;} .inline {width: 100%; position: relative; display: inline-block;} .align_center {position: relative; width: 100%;} .align_center:after {content: ''; display: block; clear: both;} .align_center_to_left {position: relative; right: 50%; float: right;} .align_center_to_right {position: relative; z-index: 1; right: -50%;} .tbl {display: table; width: 100%;} .tbl > div {display: table-cell;} .clearfix:after {content: ''; display: table; clear: both;} .flex {display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;} .flex > div {display: -webkit-flex; display: -ms-flexbox; display: flex;} .no_select {-moz-user-select: none; -khtml-user-select: none; user-select: none;} .bg {position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-size: cover; background-position: 50% 50%;} .bg > img, .bg video {position: absolute; top: 0; width: 100%; height: 100%; max-width: none; max-height: none; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; font-family: 'object-fit: cover;';} .ratio-inner {position: relative; height: 0; border: none;} .ratio-content {position: absolute; top: 0; right: 0; bottom: 0; left: 0;} .ratio-1-1 {padding-top: 100%;} .ratio-2-3 {padding-top: 64%;} .ratio-3-2 {padding-top: 140%;} .flex2, .flex3 {display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%;} .flex2 > div, .flex3 > div {display: -webkit-flex; display: -ms-flexbox; display: flex;} .flex2 > div:first-child, .flex3 > div:last-child {height: auto; align-self: stretch;} .flex2 > div:last-child {align-self: stretch; flex-grow: 1; overflow: hidden; position: relative; align-items: flex-end; -webkit-box-align: end; -ms-flex-align: end;} .flex3 > div:first-child {align-self: stretch; flex-grow: 1; overflow: hidden; position: relative; align-items: flex-start; -webkit-box-align: start; -ms-flex-align: start;} img.imgborder {max-height: 100%; max-width: 100%; height: auto; width: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);} .stickySide {position: sticky; top: 20px; min-height: 32px; margin: 0 0 0px;} .marginTop-80 {margin-top: 80px;} .marginTop-88 {margin-top: 88px;} .marginTop-100 {margin-top: 100px;} .marginTop-24 {margin-top: 24px;} .marginTop-16 {margin-top: 16px;} .marginTop-8 {margin-top: 8px;} .marginTop-32 {margin-top: 32px;} .marginTop-40 {margin-top: 40px;} .marginTop-48 {margin-top: 48px;} .marginTop-56 {margin-top: 56px;} .marginTop-64 {margin-top: 64px;} .marginTop-120 {margin-top: 120px;} .centered {width: 1540px; margin: 0 auto; position: relative;} #top {position: relative; z-index: 2; padding: 16px 0;} #topBody > div {align-items: center; position: relative;} #topBody > div > div {width: 100%;} #topBody > div:nth-child(2) {width: 176px;} #topBody > div:nth-child(2) a {position: relative; display: block; width: 100%; height: auto;} #topBody > div:nth-child(2) a > img:first-child {position: relative; z-index: 1; width: 100%; height: auto;} #topBody > div:nth-child(2) a > img:nth-child(2) {position: absolute; z-index: 2; width: 40px; height: 40px; left: 100px; top: 38px;} #topBody > div:first-child, #topBody > div:last-child {width: calc((100% - 176px) / 2);} #topBody > div:first-child {padding-right: 32px;} #topBody > div:first-child ul {list-style: none;} #topBody > div:first-child ul > li {float: left; margin: 0px 32px 0px 0;} #topBody > div:first-child ul > li a {color: #353535; text-decoration: none; font-weight: 500; transition: all 0.1s linear; padding: 8px 0px; display: block;} #topBody > div:first-child ul > li a:visited {color: #6B6B76;} #topBody > div:first-child ul > li a:hover, #topBody > div:first-child ul > li a:visited:hover {text-decoration: underline; color: #000 !important; transition: all 0.1s linear;} #topBody > div:last-child > .flex > div {width: 50%; justify-content: flex-end; align-items: center; padding-left: 32px;} #topBody > div:last-child .call {cursor: pointer; text-decoration: underline; transition: all 0.1s linear; font-weight: 500;} #topBody > div:last-child .call:hover {color: #000; transition: all 0.1s linear;} #topBodySearch {float: left; cursor: pointer; width: 20px; height: 20px; margin-right: 32px;} #topBodySearch svg {width: 100%; height: 100%;} #topBodySearch svg .stroke {stroke: #353535; transition: all 0.1s linear;} #topBodySearch svg .fill {fill: #353535; transition: all 0.1s linear;} #topBodySearch:hover svg .stroke {stroke: #000; transition: all 0.1s linear;} #topBodySearch:hover svg .fill {fill: #000; transition: all 0.1s linear;} .topBodyMenu {float: left; cursor: pointer; } .topBodyMenu > div {align-items: center;} .topBodyMenu > div:last-child {width: 20px; position: relative;} .topBodyMenu > div:last-child svg {width: 20px; height: 20px;} .topBodyMenu > div:last-child .fill {fill: #353535; transition: all 0.1s linear;} .topBodyMenu > div:first-child {padding-right: 10px; font-size: 18px; color: #353535; transition: all 0.1s linear; font-weight: 500;} .topBodyMenu:hover > div:first-child {color: #000; transition: all 0.1s linear;} .topBodyMenu:hover > div:last-child .fill {fill: #000; transition: all 0.1s linear;} .marginTop-140 {margin-top: 140px;} .block {position: relative; z-index: 2;} .block:last-child {margin-bottom: 180px;} #mpBlock1Text h1 {text-align: center; width: 70%; margin: 0 auto; font-size: 72px; line-height: 1; font-weight: 500; color: #FF3DD2; background-image: -webkit-linear-gradient(315deg, #FF3DD2 16%, #F7DC1B 70%, #FF3DD2 100%); background-clip: text; -webkit-background-clip: text; text-fill-color: transparent; -webkit-text-fill-color: transparent; padding-bottom: 16px; -moz-user-select: none; -khtml-user-select: none; user-select: none;} #mpBlock1Text p {width: 46%; margin: 0 auto; margin-top: 40px; font-weight: 500; font-size: 22px; line-height: 1.2; text-align: center;} .slickWrp {overflow: hidden;} .slickWrpBody {width: calc(100% + 20px); margin-left: -20px; position: relative;} .slickWrpBody .slick-slide {margin-left: 20px;} .mpBlock1ClientsEl {display: block; width: 100%; height: auto; position: relative;} .mpBlock1ClientsEl .ratio {width: 100%;} #mpBlock1Clients {margin-top: 80px;} .columns > div {position: relative; align-items: flex-start;} .columns-2-50 > div {width: 50%;} .columns-2-50 > div:first-child {padding-right: 10px;} .columns-2-50 > div:last-child {padding-left: 10px;} .columns-2-50-left > div:last-child {padding-left: 8.5%;} .txt h2 {font-size: 40px; line-height: 1.05; font-weight: 500; color: #353535; margin-bottom: 40px; margin-top: 48px;} .txt h2:last-child {margin-bottom: 0px;} .txt h2:first-child {margin-top: 0px;} .txt p {line-height: 1.3; margin-top: 24px;} .txt p:first-child {margin-top: 0px;} #mpBlock2 .txt p {width: 80%;} #mpBlock2 .flex2 > div:last-child {padding-top: 56px;} #mpBlock2 .flex2 {width: 100%; height: 100%;} #mpBlock2 .columns-2-50 > div:first-child > div {height: 100%;} #mpBlock2Thesis > div {float: left; width: calc(100% / 3); padding-right: 24px; position: relative; margin-top: 24px;} #mpBlock2Thesis > div > p:first-child {line-height: 1; font-size: 56px; color: #353535;} #mpBlock2Thesis > div > p:last-child {line-height: 1.2; margin-top: 10px; width: 95%;} #mpBlock2Slider {width: 100%; height: 100%; border-radius: 10px; overflow: hidden; position: relative; background: url('../img/gradient-bg1.png') no-repeat; background-size: cover; padding-top: 80px; padding-left: 38%;} #mpBlock2SliderSafari {position: relative; width: 100%; height: 100%; background: url('../img/safari-2406.png') no-repeat; background-position: 0% 0%; background-size: 838px 494px;} .mpBlock2SliderSafariEl {width: 340px; position: absolute; border-radius: 10px; background-color: #fff; padding: 16px; -webkit-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); -moz-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); bottom: -40px; right: 20px; z-index: 1; opacity: 0; transition: all 0.3s linear;} .mb2sse1 {bottom: 20px; right: 20px; z-index: 3; opacity: 1; transition: all 0.3s linear;} .mb2sse2 {bottom: 120px; right: -40px; z-index: 2; opacity: 0.8; transition: all 0.3s linear;} .mpBlock2SliderSafariEl > div {align-items: center;} .mpBlock2SliderSafariEl > div:first-child {width: 48px;} .mpBlock2SliderSafariEl > div:last-child {width: calc(100% - 48px); padding-left: 16px;} .mpBlock2SliderSafariEl > div:first-child > div {width: 48px; height: 48px; border-radius: 50%; font-size: 24px; line-height: 48px; text-align: center; -webkit-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16); -moz-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16); box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16);} .mpBlock2SliderSafariEl > div:last-child p {font-size: 20px; line-height: 1.2; color: #353535; display: block; width: 100%;} .mpBlock2SliderSafariEl > div:last-child img {display: block; width: 108px; height: auto; margin-top: 4px;} .blockTop > div {align-items: flex-end; width: 50%;} .blockTop > div:last-child {justify-content: flex-end;} .button {height: 48px; position: relative; cursor: pointer; border: 1px solid #55555E; border-radius: 6px; padding: 0 24px; font-size: 18px; color: #353535; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: 500; background-color: transparent; transition: all 0.1s linear; text-decoration: none;} .button-icon {padding: 0 0; width: 48px;} .button > div {height: 100%; width: 100%; align-items: center;} .button-icon > div {justify-content: center;} .blockTop > div:last-child .button {float: left; margin-left: 20px;} .button:not(:nh):hover {border-color: #353535; background-color: #353535; color: #fff;} .button-icon svg .fill {fill: #353535; transition: all 0.1s linear;} .button-icon:hover svg .fill {fill: #fff; transition: all 0.1s linear;} .button-primary {background-color: #353535; border-color: #353535; color: #fff; transition: all 0.1s linear;} .button-primary:hover {background-color: #55555E; border-color: #55555E; color: #fff; transition: all 0.1s linear;} .servicesEl {width: 100%; height: auto; position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 10px; padding: 32px; color: #fff;} .servicesEl .bg {z-index: 1; transition: all 0.1s linear;} .servicesEl:hover .bg {transform: scale(1.1,1.1); transition: all 0.1s linear;} .servicesEl .ratio {position: relative; z-index: 5; width: 100%;} .servicesEl .ratio-inner {padding-top: 113%;} .servicesEl .flex3 > div:last-child {padding-top: 32px;} .servicesEl .flex3 > div:last-child p {font-size: 16px; line-height: 1.2; font-weight: 500; text-shadow: 0px 0px 6px rgba(0,0,0,0.4);} .txt h3 {font-size: 32px; line-height: 1.05; font-weight: 500; color: #353535; margin-top: 32px;} .txt h3:first-child {margin-top: 0px;} .servicesEl .txt h3 {font-size: 26px; color: #fff; text-shadow: 0px 0px 6px rgba(0,0,0,0.4);} .servicesEl:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; background-color: #353535; opacity: 0.32;} /*.servicesEl:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0.72; background: rgba(53, 53, 53, 0.4); background: radial-gradient(at center, rgba(53, 53, 53, 0.4), rgba(53, 53, 53, 1.0));} .servicesEl:after {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 0.2; background: rgba(255, 62, 210, 1.0); background: linear-gradient(45deg, rgba(255, 62, 210, 1.0), rgba(240, 215, 28, 1.0));}*/ .servicesElBody.flex3 > div, .servicesElBody.flex3 > div .txt {width: 100%;} .txt a, .advantagesBlockEl a {color: #353535; font-weight: 500; transition: all 0.1s linear;} .txt a:visited, .advantagesBlockEl a:visited {color: #6B6B76;} .txt a:hover, .advantagesBlockEl a:hover {color: #000 !important; transition: all 0.1s linear;} .columns-2-50-right > div:first-child {padding-right: 8.5%;} .columns .ratio {width: 100%;} .parallaxWrp {border-radius: 10px; overflow: hidden;} .parallax_scroll {height: 130%; top: -15%;} .cardsEl .parallax_scroll {height: 140%; top: -20%;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 105%;} .columns-2-50 > div > img {width: 100%; height: auto; border-radius: 10px; overflow: hidden;} .sblock100 {width: 100%; border-radius: 10px; overflow: hidden; justify-content: center; position: relative;} .sblock100 > div {height: 100%; align-items: center; position: relative; z-index: 2;} #casesBlock {background: linear-gradient(to right, rgba(229,131,169,1) 0%,rgba(244,189,80,1) 72%,rgba(229,131,169,1) 100%); text-decoration: none; color: #fff; height: 300px; } #casesBlock > div:last-child {width: 140px;} #casesBlock > div:last-child img {display: block; width: 140px; height: 140px;} #casesBlock > div:first-child {padding-right: 48px;} #casesBlock > div:first-child h2 {font-size: 120px; line-height: 1; font-weight: normal;} #casesBlock:before {content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0px; left: 0px; background-color: #000000; opacity: 0; transition: all 0.1s linear;} #casesBlock:hover:before {opacity: 0.1; transition: all 0.1s linear;} .marginTop-20 {margin-top: 20px;} .sblock50 > div {width: calc((100% - 20px) / 2); margin-left: 20px; margin-top: 20px; position: relative; border-radius: 10px; padding: 32px;} .sblock50 > div:nth-child(2n+1) {margin-left: 0px;} .sblock50 > div:nth-child(-n+2) {margin-top: 0px;} .bg-FCF8F8 {background-color: #FCF8F8;} .bg-F1F1F1 {background-color: #F1F1F1;} #sblock50-contacts > div:first-child p:first-child {font-size: 24px; line-height: 1.2; width: 80%;} #sblock50-contacts > div:first-child p:nth-child(2) {margin-top: 20px; line-height: 1; font-size: 40px; font-weight: 500;} #sblock50-contacts > div:first-child p:nth-child(2) a {text-decoration: none; color: #353535;} #sblock50-contacts > div:last-child {margin-top: 56px;} #sblock50-contacts > div:last-child a {display: block; float: left; margin-right: 16px; width: 48px; height: 48px; position: relative;} #sblock50-faq .txt {width: 80%;} #locations > div:first-child p {width: 80%;} #locationsSide {width: 100%; position: relative;} #locationsSide > div {align-items: flex-start; position: relative;} #locationsSide > div:first-child {width: 45%;} #locationsSide > div:last-child {width: 55%; padding-left: 80px;} #locationsSide > div:first-child > div {width: 100%; height: 100%; position: relative;} #locationsSide > div:first-child .ratio {width: 100%; border-radius: 10px; overflow: hidden;} #locationsSide .ratio-inner {padding-top: 108%;} .locationsSideEl {width: 100%; margin-top: 20px; cursor: default;} .locationsSideEl:first-child {margin-top: 0px;} .locationsSideEl > div {align-items: flex-start;} .locationsSideEl > div:last-child {visibility: hidden; height: 0px;} .locationsSideEl > div:first-child h3 {font-size: 26px; line-height: 1.05; font-weight: normal; color: #55555E; transition: all 0.1s linear;} .locationsSideEl--active > div:first-child h3 {font-weight: 500; color: #353535; transition: all 0.1s linear;} #line {padding: 28px 0; position: relative;} .marquee_left a {font-size: 26px; margin-right: 32px; line-height: 1.4;} .marquee_left a:after {content: '•'; margin-left: 32px;} #footerTopBody > div {align-items: center;} #footerTopBody > div:last-child {width: 140px; justify-content: flex-end;} #footerTopBody > div:first-child {width: calc(100% - 140px); padding-right: 40px;} #footerTopBody > div:first-child ul {list-style: none;} #footerTopBody > div:first-child ul > li {float: left; margin: 0px 32px 0px 0;} #footerTopBody > div:first-child ul > li a {color: #353535; text-decoration: none; font-weight: 500; transition: all 0.1s linear; display: block; padding: 6px 0;} #footerTopBody > div:first-child ul > li a:visited {color: #6B6B76; transition: all 0.1s linear;} #footerTopBody > div:first-child ul > li a:hover, #footerTopBody > div:first-child ul > li a:hover {text-decoration: underline; color: #000 !important; transition: all 0.1s linear;} #footerBottomBody {margin-top: 18px; padding-top: 32px; border-top: 1px solid #55555E;} #footerBottomBody > div {align-items: flex-start; position: relative;} #footerBottomBody > div:nth-child(2) {width: 80px;} #footerBottomBody > div:nth-child(2) img {width: 80px; height: 80px; display: block; /*position: absolute; top: 0px; left: 0px;*/} #footerBottomBody > div:first-child {width: calc((100% - 80px) / 2); padding-right: 40px;} #footerBottomBody > div:last-child {width: calc((100% - 80px) / 2); padding-left: 40px; justify-content: flex-end;} #footerBottomBody > div:first-child > div > p:first-child {font-size: 16px; line-height: 1;} #footerBottomBody > div:first-child > div > div > p {margin-top: 8px; font-size: 16px;} #footerBottomBody > div:first-child > div > div > p:first-child {margin-top: 0px;} #footerBottomBody > div:first-child > div > div > p a {color: #353535; font-weight: 500; transition: all 0.1s linear;} #footerBottomBody > div:first-child > div > div > p a:visited {color: #6B6B76;} #footerBottomBody > div:first-child > div > div > p a:hover, #footerBottomBody > div:first-child > div > div > p a:visited:hover {color: #000; transition: all 0.1s linear;} #footerBottomBody > div:last-child > div > p:first-child {font-size: 40px; line-height: 1; font-weight: 500; text-align: right;} #footerBottomBody > div:last-child > div > p:first-child a {color: #353535; text-decoration: none;} #footerBottomBody > div:last-child > div > div a {font-size: 16px; color: #353535; font-weight: 500; float: right; margin-left: 20px; transition: all 0.1s linear;} #footerBottomBody > div:last-child > div > div a:visited {color: #6B6B76;} #footerBottomBody > div:last-child > div > div a:hover, #footerBottomBody > div:last-child > div > div a:visited:hover {color: #000; transition: all 0.1s linear;} .rotate1 { animation: rotate 10s linear infinite; transform-box: fill-box; transform-origin: center; } @keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #fibonachiBg {position: absolute; top: -270px; left: 50%; margin-left: -810px; z-index: 1;} .rotate2 { animation: rotatebg 40s linear infinite; transform-box: fill-box; transform-origin: center; } @keyframes rotatebg { from {transform: rotate(0deg);} to {transform: rotate(360deg);} } #breadcrumbs {list-style: none; margin-bottom: 8px;} #breadcrumbs > li {float: left; margin-right: 10px; margin-bottom: 10px; font-size: 15px; line-height: 1; color: #55555E;} #breadcrumbs > li a, #breadcrumbs > li a:visited {color: #55555E; transition: all 0.1s linear;} #breadcrumbs > li a:hover {color: #000; transition: all 0.1s linear;} #innerTop .txt {margin-top: 16px; width: 90%;} .txt h1 {font-size: 56px; line-height: 1.05; font-weight: 500; color: #353535;} .block100 {width: 100%; height: auto; border-radius: 10px; overflow: hidden; position: relative;} .block100 .ratio-inner {padding-top: 25%;} .width80 {width: 80%;} .width80 h2, .width80 h3 {width: 65%;} .txt b, .txt strong {font-weight: 500; color: #353535;} .txt ul{margin-top: 24px; list-style: none;} .txt ol {margin-top: 24px; list-style-position: inside;} .txt ul:first-child, .txt ol:first-child {margin-top: 0px;} .txt ul li {margin-top: 10px; position: relative; padding-left: 24px;} .txt ul li:before {content: ''; width: 16px; height: 16px; background: url('../img/bullet-icon.svg') no-repeat; background-size: 16px 16px; position: absolute; left: 0px; top: 4px; display: block;} .txt ol li {margin-top: 10px;} .txt ul li:first-child, .txt ol li:first-child {margin-top: 0px;} .thesisBlock > div {width: calc(100% / 5); margin-top: 32px; position: relative;} .thesisBlockEl {width: 80%;} .thesisBlockEl > p:first-child {line-height: 1; font-size: 56px; color: #353535;} .thesisBlockEl > p:last-child {line-height: 1.2; margin-top: 10px;} .quote {width: 100%; border-radius: 10px; overflow: hidden;} .quote > div {align-items: center;} .quote > div:first-child {width: 80px; background: linear-gradient(to bottom, rgba(229,131,169,1) 0%,rgba(244,189,80,1) 67%,rgba(229,131,169,1) 100%);} .quote > div:last-child {width: calc(100% - 80px); padding: 40px;} .quote > div:last-child p, .quote > div:last-child h2, .quote > div:last-child h3 {width: 80%; font-size: 32px; line-height: 1.1; font-weight: normal; color: #353535;} .quote > div:last-child a {color: #353535; transition: all 0.1s linear;} .quote > div:last-child a:visited {color: #6B6B76; transition: all 0.1s linear;} .quote > div:last-child a:hover, .quote > div:last-child a:visited:hover {color: #000; transition: all 0.1s linear;} .advantagesBlock > div {width: calc((100% - 60px) / 4); margin-left: 20px; margin-top: 32px;} .advantagesBlock > div:nth-child(4n+1) {margin-left: 0px;} .advantagesBlockEl {width: 100%; height: 100%;} .advantagesBlockEl > div:first-child {line-height: 1; color: #353535; border-bottom: 1px solid #55555E; padding-bottom: 16px; font-weight: 500;} .advantagesBlockEl > div:last-child {align-items: flex-start; padding-top: 14px; line-height: 1.2; width: 90%;} .cards > div, .cards4-sliderBody .slick > div {position: relative;} .cards4 > div {width: calc((100% - 60px) / 4); margin-left: 20px; margin-top: 20px; position: relative;} .cards4 > div:nth-child(4n+1) {margin-left: 0px;} .cards4 > div:nth-child(-n+4) {margin-top: 0px;} .cards3 > div {width: calc((100% - 40px) / 3); margin-left: 20px; margin-top: 20px; position: relative;} .cards3 > div:nth-child(3n+1) {margin-left: 0px;} .cards3 > div:nth-child(-n+3) {margin-top: 0px;} .cards2 > div {width: calc((100% - 20px) / 2); margin-left: 20px; margin-top: 20px; position: relative;} .cards2 > div:nth-child(2n+1) {margin-left: 0px;} .cards2 > div:nth-child(-n+2) {margin-top: 0px;} .cardsEl {width: 100%; height: auto; position: relative; display: block; text-decoration: none; overflow: hidden; border-radius: 10px; color: #55555E; background-color: #F1F1F1; transition: all 0.1s linear;} a.cardsEl:hover {background-color: #EBEBEB; transition: all 0.1s linear;} .cardsElImg {color: #fff;} .cards4 .cardsEl .ratio-inner, .cards4-sliderBody .ratio-inner {padding-top: 113%;} .cards3 .cardsEl .ratio-inner {padding-top: 72%;} .cards2 .cardsEl .ratio-inner {padding-top: 56.25%;} .cardsEl .bg {z-index: 1; transition: all 0.1s linear;} a.cardsEl:hover .bg {transform: scale(1.1,1.1); transition: all 0.1s linear;} .cards4 .cardsEl .flex3, .cards4-sliderBody .cardsEl .flex3 {padding: 32px;} .cards3 .cardsEl .flex3 {padding: 40px;} .cards2 .cardsEl .flex3, .cards2 .cardsInfo {padding: 48px;} /*.cardsElImg .flex3:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0.72; background: rgba(53, 53, 53, 0.4); background: radial-gradient(at center, rgba(53, 53, 53, 0.4), rgba(53, 53, 53, 1.0));} .cardsElImg .flex3:after {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 0.2; background: rgba(255, 62, 210, 1.0); background: linear-gradient(45deg, rgba(255, 62, 210, 1.0), rgba(240, 215, 28, 1.0));}*/ .cardsElImg .flex3:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; background-color: #353535; opacity: 0.5;} .cards2 .cardsElImg:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; background-color: #353535; opacity: 0.5;} .cardsEl .ratio, .cardsEl .cardsInfo {position: relative; z-index: 5; width: 100%;} .cardsEl .flex3 > div {position: relative; z-index: 4;} .cardsEl .flex3 > div:first-child .txt h3, .cardsEl .flex3 > div:first-child .txt h2, .cardsEl .flex3 > div:first-child .txt p {font-size: 26px; line-height: 1.1; font-weight: 500; color: #353535;} .cardsElImg.cardsEl .flex3 > div:first-child .txt h3, .cardsElImg.cardsEl .flex3 > div:first-child .txt h2, .cardsElImg.cardsEl .flex3 > div:first-child .txt p, .cardsElImg .cardsInfoT1 h2, .cardsElImg .cardsInfoT1 h3, .cardsElImg .cardsInfoT1 p {color: #fff;} .cardsEl .flex3 > div:last-child {padding-top: 32px;} .cardsEl .flex3 > div:last-child p {font-size: 16px; line-height: 1.4; font-weight: 500;} .cards3 .cardsEl .flex3 h3, .cards3 .cardsEl .flex3 p {width: 95%;} .cardsEl .flex3 > div > div {width: 100%;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 18px;} .cardsInfoT2 {width: 80%; margin-top: 48px;} .cardsInfoT2:first-child {margin-top: 0px;} .cardsInfoT2 p {font-size: 18px; line-height: 1.4; font-weight: 500;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 32px;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 32px; line-height: 1.1; font-weight: 500; color: #353535;} .cards2 .cardsEl .flex3 h3, .cards2 .cardsEl .flex3 p, .cardsInfoT1 {width: 75%;} .galleryEl {width: 100%; border-radius: 10px; overflow: hidden;} .galleryEl .bg {transition: all 0.1s linear;} .galleryEl:hover .bg {transform: scale(1.1,1.1); transition: all 0.1s linear;} .advantageBlock {display: block; background: linear-gradient(to right, rgba(229,131,169,1) 0%,rgba(244,189,80,1) 72%,rgba(229,131,169,1) 100%); text-decoration: none; color: #fff; padding: 64px 0; text-align: center;} .advantageBlock p {font-size: 40px; font-weight: normal; line-height: 1.05; text-align: center; display: block; width: 70%; margin: 0 auto;} .accordeon {border: 1px solid #55555E; border-radius: 10px; margin-top: 20px;} .accordeon:first-child {margin-top: 0px;} .accordeonTop {padding: 20px 20px 20px 32px; cursor: pointer;} .accordeonTop > div {align-items: center;} .accordeonTop > div:last-child {width: 48px;} .accordeonTop > div:first-child {width: calc(100% - 48px); padding-right: 32px;} .accordeonTop > div:first-child .txt h3 {font-size: 26px;} .accordeonTop > div:first-child .txt h2, .accordeonTop > div:first-child .txt h4 {font-size: 26px; line-height: 1.05 !important; margin-top: 0px; margin-bottom: 0px;} .accordeonTop > div:first-child .txt p {font-size: 26px; line-height: 1.05 !important; font-weight: 500; color: #353535;} .accordeonTop > div:last-child .button-icon > div p {font-size: 32px; font-weight: normal; line-height: 1;} .accordeonTop .button-icon:hover {background: transparent;} .accordeonTopP {opacity: 1; transition: all 0.15s linear;} .accordeonTopM {opacity: 0; transition: all 0.15s linear;} .accordeonBody {padding: 12px 20px 32px 32px; display: none;} .accordeon--open .accordeonTopP {opacity: 0; transition: all 0.15s linear;} .accordeon--open .accordeonTopM {opacity: 1; transition: all 0.15s linear;} .block100.parallaxWrp .parallax_scroll {height: 140%; top: -20%;} .columns > div img {max-width: 100%;} #panel {width: 40%; display: block; position: fixed; background-color: #FCF8F8; top: 0px; bottom: 0px; right: -40%; z-index: 25; transition: all 0.2s linear; height: 100%;} .panel--open #panel {transition: all 0.2s linear; right: 0px !important;} .panel--open:after {content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 24;} #panelTop {width: 100%; height: 56px; padding: 8px;} #panelTop > .flex {height: 100%;} #panelTop > .flex > div:first-child {width: calc(100% - 40px);} #panelTop > .flex > div:last-child {width: 40px;} .panelClose {cursor: pointer; width: 40px; padding: 8px; position: relative;} .panelClose svg {width: 100%; height: 100%; display: block;} .panelClose svg path, .panelClose svg rect {stroke: #353535; transition: all 0.1s linear;} .panelClose:hover svg path {stroke: #000; transition: all 0.1s linear;} .panelClose:hover svg rect {stroke: #000; transition: all 0.1s linear;} #panelBody {width: 100%; height: calc(100% - 88px); } #panelBody > div {height: 100%; width: 100%; overflow-y: auto; padding: 40px;} .panelBodyEl {width: 100%; margin-top: 24px;} .panelBodyEl:first-child {margin-top: 0px;} .panelBodyEl p {font-size: 24px; font-weight: 500;} .panelBodyEl p a {color: #353535; text-decoration: none; transition: all 0.1s linear;} .panelBodyEl p a:visited {color: #898994;} .panelBodyEl ul {list-style: none; margin-top: 12px; margin-bottom: 8px;} .panelBodyEl ul li {margin-top: 8px; font-size: 20px;} .panelBodyEl ul li a {color: #55555E; text-decoration: none; transition: all 0.1s linear;} .panelBodyEl ul li a:visited {color: #9F9FA8;} .panelBodyEl p a:hover, .panelBodyEl ul li a:hover, .panelBodyEl p a:visited:hover, .panelBodyEl ul li a:visited:hover {color: #000 !important; text-decoration: underline; transition: all 0.1s linear;} .txt img {max-width: 100%; height: auto; border-radius: 10px;} a.advantageBlock {color: #fff; text-decoration: none;} a.advantageBlock p {position: relative; z-index: 2;} a.advantageBlock:before, #sblock50-cases:before {content: ''; width: 100%; height: 100%; position: absolute; z-index: 1; top: 0px; left: 0px; background-color: #000000; opacity: 0; transition: all 0.1s linear;} a.advantageBlock:hover:before, #sblock50-cases:hover:before {opacity: 0.1; transition: all 0.1s linear;} #sblock50-cases {width: 100%; height: 100%; color: #fff; text-decoration: none; padding: 32px;} #sblock50-cases > div {width: 100%; align-items: center; justify-content: center; position: relative; z-index: 2;} .bg-gradient {background: linear-gradient(to right, rgba(229,131,169,1) 0%,rgba(244,189,80,1) 72%,rgba(229,131,169,1) 100%);} #sblock50-cases .txt h2 {font-size: 80px; font-weight: normal; color: #fff;} #sblock50-casesWrp {padding: 0px;} #mdl {display: none; width: 680px; padding: 48px; background-color: #fff; color: #55555E;} .conf {font-size: 13px;} .input {height: 48px; position: relative; border: 1px solid #55555E; border-radius: 6px; padding: 0 24px; font-size: 18px; color: #353535; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: normal; background-color: transparent; transition: all 0.1s linear; width: 100%;} .input--two {width: calc((100% - 20px) / 2); float: left; margin-left: 20px;} .input--two:nth-child(2n+1) {margin-left: 0px;} .textarea {height: 120px; position: relative; border: 1px solid #55555E; border-radius: 6px; padding: 16px 24px; font-size: 18px; color: #353535; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: normal; background-color: transparent; transition: all 0.1s linear; width: 100%;} .red--color {border-color: #DD4055; transition: all 0.1s linear;} #loader {display: block; width: 56px; height: 56px; position: relative;} #loader img {width: 100%; height: 100%;} #mdlSearchWrp > div:first-child {padding-right: 20px; flex: 1 1 0;} .width-50 {width: calc(50% - 10px);} #searchTop > div {align-items: center;} #searchTop > div:first-child {flex: 1 1 0; padding-right: 20px;} .innerSearchBodyEl {margin-top: 24px;} .innerSearchBodyEl:first-child {margin-top: 0px;} .innerSearchBodyEl h2 {font-size: 24px;} .innerSearchBodyEl h2 a {color: #353535; transition: all 0.1s linear;} .innerSearchBodyEl h2 a:hover {color: #000; transition: all 0.1s linear;} pre {border-radius: 10px; overflow: hidden; width: 70%; white-space:pre-wrap;} .scrollTracking, .scrollTracking3 {opacity: 0;} .scrollTracking.scrollTracking--active, .scrollTracking3.scrollTracking--active {opacity: 1; -webkit-transition: all 0.6s 0.2s ease; -moz-transition: all 0.6s 0.2s ease; -o-transition: all 0.6s 0.2s ease; transition: all 0.6s 0.2s ease;} .scrollTracking2 {-moz-transform: translate(0px, 80px); -webkit-transform: translate(0px, 80px); -o-transform: translate(0px, 80px); -ms-transform: translate(0px, 80px); transform: translate(0px, 80px); opacity: 0; -webkit-transition: all 0.3s 0.2s ease; -moz-transition: all 0.3s 0.2s ease; -o-transition: all 0.3s 0.2s ease; transition: all 0.3s 0.2s ease;} .scrollTracking2.scrollTracking--active {-moz-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); opacity: 1; -webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;} .pic100 .bg {z-index: 1;} .pic100 .flex {width: 100%; height: 100%; position: relative; z-index: 3; padding: 48px;} /*.pic100 .flex:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0.72; background: rgba(53, 53, 53, 0.4); background: radial-gradient(at center, rgba(53, 53, 53, 0.4), rgba(53, 53, 53, 1.0));} .pic100 .flex:after {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 3; opacity: 0.2; background: rgba(255, 62, 210, 1.0); background: linear-gradient(45deg, rgba(255, 62, 210, 1.0), rgba(240, 215, 28, 1.0));}*/ .pic100 .flex:before {content: ''; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; z-index: 2; background-color: #353535; opacity: 0.32;} .pic100 .flex > div {width: 100%; height: 100%; align-items: center; justify-content: center; position: relative; z-index: 4;} .pic100 .flex .txt {text-align: center;} .pic100 .flex .txt, .pic100 .flex .txt h1, .pic100 .flex .txt h2, .pic100 .flex .txt h3, .pic100 .flex .txt h4, .pic100 .flex .txt p {color: #fff;} .pic100-nop img {width: 100%; height: auto; display: block; position: relative; z-index: 1;} .pic100-nop .flex {position: absolute; z-index: 2; width: 100%; height: 100%; top: 0px; left: 0px;} #innerTopCard {margin-top: 16px;} .cardsElImg p, .cardsElImg h2, .cardsElImg h3, .pic100 h1, .pic100 h2, .pic100 p {text-shadow: 0px 0px 10px rgba(0,0,0,0.44);} #editUiPanel {width: 100%; padding: 16px 0; background-color: #F1F1F1; position: relative; z-index: 8;} #editUiPanelBody {width: 100%;} #editUiPanelBody > div {align-items: center;} #editUiPanelBody > div:first-child {flex: 1 1 0; padding-right: 40px; font-size: 20px; font-weight: 500;} #editUiPanelBody > div:last-child .button {float: left; margin-left: 16px; width: 40px; height: 40px; padding: 0 0;} #editUiPanelBody > div:last-child .button:hover {background-color: #fff; border-color: #fff;} #editUiPanel.topStickyShow {position: fixed; top: 0px; left: 0px;} .editUiPanel--block {position: absolute; z-index: 5; top: -10px; left: 0px; width: 100%; padding-top: 10px; border-top: 1px dashed #353535;} .editUiPanel--block .button {float: right; margin-right: 10px; width: 32px; height: 32px; padding: 0px;} .editUiPanel--block .button:hover {background-color: #F1F1F1; border-color: #F1F1F1;} #panelOverlay {width: 60%; height: 100%; display: none; position: absolute; top: 0px; left: 0px; z-index: 25; cursor: pointer;} .panel--open #panelOverlay {display: block !important;} #innerBody > .block:first-child {margin-top: 0px !important;} .bcards > div {width: calc((100% - 80px) / 5); margin-left: 20px; margin-top: 32px; position: relative;} .bcards > div:nth-child(-n+5) {margin-top: 0px;} .bcards > div:nth-child(5n+1) {margin-left: 0px;} .bcardsEl {width: 100%; height: 100%; position: relative; display: block; text-decoration: none; color: #55555E;} .bcardsEl .ratio {display: block; width: calc(100% - 32px); margin: 0 auto; position: relative;} .bcardsEl .txt {text-align: center; width: 100%; padding: 0 8px;} .bcardsEl .txt p:not(.bcardsElTitle) {margin-top: 12px; font-size: 16px; line-height: 1.2;} .bcardsEl .txt p:first-child {margin-top: 0px;} .txt h4, p.bcardsElTitle {font-size: 22px; line-height: 1.05; font-weight: 500; color: #353535; margin-top: 24px;} .txt h4:first-child, p.bcardsElTitle:first-child {margin-top: 0px;} .bgP20 {width: calc(100% - 48px); margin-left: 24px; height: calc(100% - 48px); margin-top: 24px;} a.cardsEl {cursor: pointer !important;} /**/ .emojiCategory {margin-top: 56px;} .emojiCategory:first-child {margin-top: 0px;} .emojiCategoryBody > div {width: calc((100% - 112px) / 8); margin-left: 16px; margin-top: 16px; float: left; padding: 8px 16px 16px; background-color: #f1f1f1; /*der: 1px solid #55555E;*/ border-radius: 8px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 0px;} .emojiCategoryBodyEl > .flex > div {width: 100%; align-items: center;} .emojiCategoryBodyEl > .flex > div:first-child {font-size: 40px; justify-content: center; padding: 8px 0;} .emojiCategoryBodyEl > .flex > div:nth-child(2) input {background-color: #fff; height: 32px; padding: 0px; text-align: center; font-size: 14px;} .emojiCategoryBodyEl > .flex > div:nth-child(2), .emojiCategoryBodyEl > .flex > div:last-child {margin-top: 8px;} .emojiCategoryBodyElBottom {width: 100%;} .emojiCategoryBodyElBottom .button {min-height: 32px; height: auto; padding: 4px 6px; font-size: 14px; justify-content: center; align-items: center;} .emojiCategoryBodyElBottom .button > div {justify-content: center; text-align: center; align-items: center;} .emojiCategoryBodyElBottom > div:first-child {/*flex: 1 1 0; padding-right: 8px;*/ width: 100%;} .emojiCategoryBodyElBottom > div:last-child {/*width: 32px;*/ display: none !important;} .emojiCategoryBodyElBottom > div:last-child .button:hover {background-color: #fff; border-color: #fff;} .emojiCategoryBodyElBottom > div:first-child div {width: 100%; position: relative;} /*.emojiCategoryBodyElBottom > div:first-child .button {padding: 0 0; width: 100%; justify-content: center;}*/ .emojiCategoryBodyElBottom > div:first-child .button > div {justify-content: center;} .emojiCategory .txt h2, .emojiCategory .txt p.likeH2 {font-size: 32px;} #emojiPageBody > div {align-items: flex-start;} #emojiCopy {padding: 16px; border-radius: 8px; border: 1px solid #55555e; float: left;} #emojiCopy > div {align-items: center;} #emojiCopy > div:first-child {padding-right: 24px; justify-content: center; font-size: 40px;} .label {float: left; margin-right: 8px; margin-top: 8px; height: auto; padding: 4px 8px;} #emojiPageBodyLabels .labels {margin-top: 24px;} /*#emojiPageBodyLabels .label {cursor: auto;}*/ #emojiPageBodyParamsTable > .flex {width: 100%;border-bottom: 1px solid #55555e; padding: 8px 0;} #emojiPageBodyParamsTable > .flex:first-child {padding-top: 0px;} #emojiPageBodyParamsTable > .flex:last-child {padding-bottom: 0px; border-bottom: none;} #emojiPageBodyParamsTable > .flex > div {width: 50%;} #emojiPageBodyParamsTable > .flex > div:first-child {width: 60%; padding-right: 24px;} #emojiPageBodyParamsTable > .flex > div:last-child {width: 40%; justify-content: flex-end;} .emojiCategoryBody > div {width: calc((100% - 112px) / 8); margin-left: 16px; margin-top: 16px; float: left; padding: 8px 16px 16px; background-color: #f1f1f1; /*der: 1px solid #55555E;*/ border-radius: 8px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 0px;} .emojiCategoryBodyEl2 {display: block; float: left; margin-right: 8px; margin-bottom: 8px; text-decoration: none; padding: 8px; background-color: #f1f1f1; border-radius: 8px; font-size: 24px;} #emojiSearch #searchTop {width: 100%;} #emojiSearch > div:last-child {justify-content: flex-end;} #emojiThemePage .labels {margin-top: -8px;} #emojiGallery > div {width: calc((100% - 40px) / 3); margin-left: 20px; margin-top: 20px; position: relative;} #emojiGallery > div:nth-child(3n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 0px;} .emojiGalleryEl {width: 100%; height: 100%; /*border: 1px solid #55555e;*/ border-radius: 8px; padding: 16px; background-color: #fcf8f8;} .emojiGalleryEl .ratio {width: 100%; padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 24px; width: 100%; margin-bottom: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 24px;} #emojiPageBody > div > div {width: 100%;} #emojiGalleryTxt.txt h2 {font-size: 32px;} .select {height: 48px; position: relative; border: 1px solid #55555E; border-radius: 6px; padding: 0 24px; font-size: 18px; color: #353535; font-family: "Inter Tight", sans-serif; font-optical-sizing: auto; font-weight: normal; background-color: transparent; transition: all 0.1s linear; width: 100%;} .emojiCategoryBodyEl {position: relative; width: 100%; height: 100%;} .emojiCategoryBodyEl > .flex {position: relative; z-index: 2;} /*.ecbe-y:before {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 20px; height: 20px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 20px 20px;} .ecbe-g:not(.ecbe-all) {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 20px; height: 20px; background: url('../img/icon-google.svg') no-repeat; background-size: 20px 20px;} .ecbe-g.ecbe-all:after {content: ''; position: absolute; z-index: 1; left: 8px; top: 32px; display: block; width: 20px; height: 20px; background: url('../img/icon-google.svg') no-repeat; background-size: 20px 20px;}*/ .ecbe-y:before {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 20px; height: 20px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 20px 20px;} .ecbe-g:after {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 20px; height: 20px; background: url('../img/icon-google.svg') no-repeat; background-size: 20px 20px;} .ecbe-all:before {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 20px; height: 20px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 20px 20px;} .ecbe-all:after {content: ''; position: absolute; z-index: 1; left: 8px; top: 32px; display: block; width: 20px; height: 20px; background: url('../img/icon-google.svg') no-repeat; background-size: 20px 20px;} @media screen and (max-width: 1620px) { .centered {width: 1440px;} #fibonachiBg {position: absolute; top: -220px; left: 50%; margin-left: -730px; z-index: 1; width: 1460px; height: 1460px;} #mpBlock2Slider {padding-left: 32%;} #innerTop .txt {margin-top: 16px; width: 100%;} .advantageBlock p {width: 80%;} #locationsSide .ratio-inner {padding-top: 115%;} } @media screen and (max-width: 1480px) { .centered {width: 1260px;} #topBody > div:nth-child(2) {width: 150px;} #topBody > div:first-child, #topBody > div:last-child {width: calc((100% - 150px) / 2);} #topBody > div:nth-child(2) a > img:nth-child(2) {position: absolute; z-index: 2; width: 33px; height: 33px; left: 86px; top: 34px;} #mpBlock1Text h1 {width: 75%; font-size: 64px;} #mpBlock1Text p {width: 46%; margin-top: 40px; font-size: 20px;} #fibonachiBg {position: absolute; top: -200px; left: 50%; margin-left: -640px; z-index: 1; width: 1280px; height: 1280px;} .columns-2-50-left > div:last-child {padding-left: 70px;} .txt h2 {font-size: 35px; margin-bottom: 40px;} .txt h2:last-child {margin-bottom: 0px;} #mpBlock2 .txt p {width: 80%;} #mpBlock2Thesis > div {float: left; width: calc(100% / 3); padding-right: 16px; position: relative; margin-top: 24px;} #mpBlock2Thesis > div > p:first-child {line-height: 1; font-size: 52px; color: #353535;} #mpBlock2Thesis > div > p:last-child {line-height: 1.2; margin-top: 10px; width: 95%;} .servicesEl {padding: 24px;} .servicesEl .txt h3 {font-size: 24px;} .servicesEl .ratio-inner {padding-top: 140%;} #mpBlock2Slider {padding-left: 24%;} .columns-2-50-right > div:first-child {padding-right: 70px;} #casesBlock > div:first-child h2 {font-size: 110px;} #casesBlock > div:last-child {width: 120px;} #casesBlock > div:last-child img {width: 120px; height: 120px;} #casesBlock {height: 280px;} #sblock50-contacts > div:first-child p:first-child {font-size: 22px;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 36px;} .txt h3 {font-size: 28px;} #locations > div:first-child p {width: 80%;} #locationsSide > div:last-child {width: 55%; padding-left: 64px;} .locationsSideEl > div:first-child h3 {font-size: 24px;} .locationsSideEl {margin-top: 20px;} .locationsSideEl:first-child {margin-top: 0px;} .block:last-child {margin-bottom: 160px;} #panel {width: 45%; right: -45%;} .panel--open #panel {right: 0px !important;} .marginTop-48 {margin-top: 40px;} .txt h1 {font-size: 52px;} .thesisBlockEl {width: 100%; padding-right: 24px;} .thesisBlockEl > p:first-child {font-size: 52px;} .quote > div:last-child p, .quote > div:last-child h2, .quote > div:last-child h3 {width: 90%; font-size: 28px;} .cards4 .cardsEl .flex3 {padding: 24px;} .cards4-sliderBody .cardsEl .flex3 {padding: 24px;} .cards4 .cardsEl .ratio-inner {padding-top: 134%;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards3 .cardsEl .flex3 {padding: 32px;} .cards3 .cardsEl .ratio-inner {padding-top: 80%;} .cards2 .cardsEl .flex3 {padding: 40px;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 28px;} .cards2 .cardsEl .flex3 p {width: 85%;} .cards2 .cardsEl .ratio-inner {padding-top: 64%;} .advantageBlock p {width: 80%; font-size: 36px;} .innerSearchBodyEl h2 {font-size: 24px;} #locationsSide .ratio-inner {padding-top: 118%;} .cards2 .cardsInfo {padding: 40px;} .cardsInfoT2 {width: 90%; margin-top: 40px;} .cardsInfoT2:first-child {margin-top: 0px;} #panelOverlay {width: 55%;} .bcards > div {width: calc((100% - 60px) / 4); margin-left: 20px; margin-top: 32px; position: relative;} .bcards > div:nth-child(-n+6) {margin-top: 32px;} .bcards > div:nth-child(6n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+5) {margin-top: 32px;} .bcards > div:nth-child(5n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+4) {margin-top: 0px;} .bcards > div:nth-child(4n+1) {margin-left: 0px;} /**/ .emojiCategoryBody > div {width: calc((100% - 80px) / 6); margin-left: 16px; margin-top: 16px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 16px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 16px;} .emojiCategoryBody > div:nth-child(6n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+6) {margin-top: 0px;} #emojiGallery > div {width: calc((100% - 32px) / 3); margin-left: 16px; margin-top: 16px; position: relative;} #emojiGallery > div:nth-child(3n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 0px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 22px; margin-bottom: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 22px;} #emojiGalleryTxt.txt h2 {font-size: 28px;} } @media screen and (max-width: 1320px) { .centered {width: 100%; padding: 0 48px;} .marginTop-140 {margin-top: 120px;} #mpBlock1Text p {width: 50%;} #mpBlock2Thesis > div {float: left; width: calc(100% / 2); padding-right: 24px; position: relative; margin-top: 24px;} #fibonachiBg {position: absolute; top: -140px; left: 5%; margin-left: 0px; z-index: 1; width: 90%; height: auto;} #mpBlock2Slider {padding-left: 18%;} #mpBlock2 .flex2 > div:last-child {padding-top: 40px;} .blockTop > div:last-child {width: 40%;} .blockTop > div:first-child {width: 60%;} .servicesEl .ratio-inner {padding-top: 72%;} .servicesEl {padding: 32px;} #sblock50-contacts > div:first-child p:first-child {font-size: 20px;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 32px;} .marginTop-80 {margin-top: 72px;} .marquee_left a {font-size: 24px; margin-right: 24px;} .marquee_left a:after {content: '•'; margin-left: 24px;} .block:last-child {margin-bottom: 120px;} .marginTop-120 {margin-top: 100px;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards2 .cardsEl .flex3 > div:last-child p {width: 90%;} .cards2 .cardsEl .flex3 h3, .cards2 .cardsEl .flex3 h2, .cards2 .cardsEl .flex3 p {width: 85%;} pre {width: 80%;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 28px;} .cardsInfoT1 {width: 85%;} .txt h2 {margin-bottom: 32px; margin-top: 40px;} .txt h2:last-child {margin-bottom: 0px;} .txt h2:first-child {margin-top: 0px;} } @media screen and (max-width: 1220px) { #mpBlock1Text h1 {width: 80%; font-size: 62px;} #mpBlock1Text p {width: 60%;} #fibonachiBg {top: -120px;} #topBody > div:first-child ul > li {margin: 0px 24px 0px 0;} #panel {width: 50%; right: -50%;} .panel--open #panel {right: 0px !important;} .txt h2 {font-size: min(max(26px, calc(1.625rem + (34 - 26) * ((100vw - 320px) / (1220 - 320)))), 34px); min-height: 0vw;} .columns-2-50-left > div:last-child {padding-left: 46px;} .servicesEl .ratio-inner {padding-top: 80%;} .columns-2-50-right > div:first-child {padding-right: 46px;} .txt h3 {font-size: min(max(21px, calc(1.3125rem + (25 - 21) * ((100vw - 320px) / (1220 - 320)))), 25px); min-height: 0vw;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 85%;} .txt h1 {font-size: min(max(34px, calc(2.125rem + (48 - 34) * ((100vw - 320px) / (1220 - 320)))), 48px); min-height: 0vw;} #breadcrumbs > li {margin-right: 8px; margin-bottom: 8px; font-size: 14px;} #innerTop .txt {margin-top: 12px;} .thesisBlock > div {width: calc(100% / 3); margin-top: 32px; position: relative;} .thesisBlockEl {width: 80%; padding-right: 0px;} .quote > div:last-child p, .quote > div:last-child h2, .quote > div:last-child h3 {width: 100%; font-size: min(max(22px, calc(1.375rem + (26 - 22) * ((100vw - 320px) / (1220 - 320)))), 26px); min-height: 0vw;} .quote > div:last-child {width: calc(100% - 72px); padding: 32px;} .quote > div:first-child {width: 72px;} .advantagesBlock > div {width: calc((100% - 40px) / 3); margin-left: 20px; margin-top: 32px;} .advantagesBlock > div:nth-child(4n+1) {margin-left: 20px;} .advantagesBlock > div:nth-child(3n+1) {margin-left: 0px;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards4 .cardsEl .ratio-inner {padding-top: 148%;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards4-sliderBody .ratio-inner {padding-top: 148%;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 26px;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 17px;} .advantageBlock p {width: 100%; font-size: min(max(28px, calc(1.75rem + (34 - 28) * ((100vw - 320px) / (1220 - 320)))), 34px); min-height: 0vw;} .advantageBlock {padding: 56px;} .accordeonTop > div:first-child .txt h3, .accordeonTop > div:first-child .txt h2, .accordeonTop > div:first-child .txt h4, .accordeonTop > div:first-child .txt p {font-size: 24px;} .accordeon .button-icon {width: 40px; height: 40px;} .accordeon .button-icon svg {width: 18px; height: 18px;} .accordeonTop > div:last-child {width: 40px;} .accordeonTop > div:first-child {width: calc(100% - 40px); padding-right: 32px;} .accordeonBody {padding: 8px 20px 32px 32px;} .width-50 {width: 60%;} .innerSearchBodyEl h2 {font-size: 22px;} #locationsSide .ratio-inner {padding-top: 130%;} #innerTop #innerTopCard .txt {margin-top: 0px;} #innerTopCard {margin-top: 12px;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 26px;} .cardsInfoT2 p {font-size: 17px;} #panelOverlay {width: 50%;} /**/ .emojiCategoryBody > div {width: calc((100% - 64px) / 5); margin-left: 16px; margin-top: 16px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 16px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 16px;} .emojiCategoryBody > div:nth-child(6n+1) {margin-left: 16px;} .emojiCategoryBody > div:nth-child(-n+6) {margin-top: 16px;} .emojiCategoryBody > div:nth-child(5n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+5) {margin-top: 0px;} #emojiGalleryTxt.txt h2 {font-size: min(max(21px, calc(1.3125rem + (25 - 21) * ((100vw - 320px) / (1220 - 320)))), 25px); min-height: 0vw;} } @media screen and (max-width: 1180px) { #mpBlock2Slider {padding-left: 56px;} #mpBlock2Thesis > div > p:first-child {font-size: 48px;} #mpBlock2 .txt p {width: 90%;} .servicesEl .ratio-inner {padding-top: 113%;} .blockTop > div:last-child {width: 30%;} .blockTop > div:first-child {width: 70%;} .servicesEl .txt h3 {font-size: 26px;} .servicesEl .ratio-inner {padding-top: 80%;} #locations > div:first-child p {width: 90%;} #locationsSide > div:last-child {width: 55%;padding-left: 40px;} .locationsSideEl > div:first-child h3 {font-size: 22px;} .width80 {width: 90%;} .width80 h2, .width80 h3 {width: 75%;} .thesisBlockEl > p:first-child {font-size: 48px;} .servicesEl .ratio-inner {padding-top: 100%;} .cards3 .cardsEl .ratio-inner {padding-top: 100%;} .cards2 .cardsEl .flex3 {padding: 32px;} .cards2 .cardsEl .flex3 h3, .cards2 .cardsEl .flex3 p {width: 90%;} pre {width: 90%;} .cards2 .cardsInfo {padding: 32px;} .cardsInfoT2 {width: 100%; margin-top: 32px;} .cardsInfoT2:first-child {margin-top: 0px;} .cardsInfoT1 {width: 90%;} /**/ #emojiSearch > div:first-child {padding-right: 0px;} #emojiGallery > div {width: calc((100% - 32px) / 3); margin-left: 16px; margin-top: 16px; position: relative; } #emojiGallery > div:nth-child(3n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 0px;} .emojiGalleryEl {padding: 8px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 20px; margin-bottom: 6px; padding-top: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 20px;} } @media screen and (max-width: 1120px) { /*#emojiGallery > div {width: calc((100% - 16px) / 2); margin-left: 16px; margin-top: 16px; position: relative; } #emojiGallery > div:nth-child(3n+1) {margin-left: 16px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 16px;} #emojiGallery > div:nth-child(2n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+2) {margin-top: 0px;} .emojiGalleryEl {padding: 8px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 20px; margin-bottom: 6px; padding-top: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 20px;}*/ .emojiGalleryEl .txt {text-align: center; font-size: 18px; margin-bottom: 6px; padding-top: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 17px;} } @media screen and (max-width: 1080px) { #mpBlock1Text h1 {width: 90%; font-size: 60px;} #mpBlock1Clients {margin-top: 64px;} #mpBlock1Text p {margin-top: 32px; font-size: 19px;} #fibonachiBg {top: -100px;} body {font-size: 17px;} .topBodyMenu > div:first-child {padding-right: 10px; font-size: 17px;} #topBody > div:nth-child(2) {width: 140px;} #topBody > div:first-child, #topBody > div:last-child {width: calc((100% - 140px) / 2);} #topBody > div:nth-child(2) a > img:nth-child(2) {position: absolute; z-index: 2; width: 30px; height: 30px; left: 80px; top: 33px;} .columns-2-50-left > div:last-child {width: 380px; padding-left: 0px;} .columns-2-50-left > div:first-child {width: calc(100% - 380px); padding-right: 56px;} .columns-2-50-left > div:last-child {padding-left: 0px;} #mpBlock2Slider {padding-left: 32px; padding-top: 56px;} .mpBlock2SliderSafariEl > div:first-child {width: 40px;} .mpBlock2SliderSafariEl > div:last-child {width: calc(100% - 40px); padding-left: 16px;} .mpBlock2SliderSafariEl > div:first-child > div {width: 40px; height: 40px; border-radius: 50%; font-size: 20px; line-height: 40px; text-align: center; -webkit-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16); -moz-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16); box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16);} .mpBlock2SliderSafariEl > div:last-child p {font-size: 19px; line-height: 1.2; color: #353535; display: block; width: 100%;} #mpBlock2 .txt p {width: 80%;} #mpBlock2 .flex2 > div:last-child {padding-top: 20px;} .mpBlock2SliderSafariEl {width: 300px; position: absolute; border-radius: 10px; background-color: #fff; padding: 12px; -webkit-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); -moz-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); bottom: -40px; right: 20px; z-index: 1; opacity: 0; transition: all 0.3s linear;} .mb2sse1 {bottom: 20px; right: 20px; z-index: 3; opacity: 1; transition: all 0.3s linear;} .mb2sse2 {bottom: 104px; right: -40px; z-index: 2; opacity: 0.8; transition: all 0.3s linear;} .button {font-size: 17px;} .columns-2-50-right > div:first-child {width: 380px; padding-right: 0px;} .columns-2-50-right > div:last-child {width: calc(100% - 380px); padding-left: 56px;} .columns-2-50-right > div:first-child > div {padding-right: 0px;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 140%;} #casesBlock > div:first-child h2 {font-size: 90px;} #casesBlock > div:last-child {width: 110px;} #casesBlock > div:last-child img {width: 110px; height: 110px;} #casesBlock > div:first-child {padding-right: 40px;} #casesBlock {height: 220px;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 90%;} #locations > div:first-child p {width: 80%;} #locationsSide > div:first-child {width: 160px;} #locationsSide > div:last-child {width: calc(100% - 160px); padding-left: 32px;} #locationsSide .ratio-inner {padding-top: 160%;} .locationsSideEl {margin-top: 16px;} .locationsSideEl:first-child {margin-top: 0px;} .block100 .ratio-inner {padding-top: 32%;} .cards4 > div {width: calc((100% - 20px) / 2); margin-left: 20px; margin-top: 20px; position: relative;} .cards4 > div:nth-child(4n+1) {margin-left: 20px;} .cards4 > div:nth-child(-n+4) {margin-top: 20px;} .cards4 > div:nth-child(2n+1) {margin-left: 0px;} .cards4 > div:nth-child(-n+2) {margin-top: 0px;} .cards4 .cardsEl .flex3 {padding: 32px;} .cards4 .cardsEl .ratio-inner {padding-top: 72%;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 26px;} .cards4 .cardsEl .txt {width: 90%;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 16px;} .cards4-sliderBody .cardsEl .flex3 {padding: 32px;} .cards4-sliderBody .ratio-inner {padding-top: 72%;} .cards4-sliderBody .cardsEl .txt {width: 90%;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 16px;} .servicesEl .ratio-inner {padding-top: 72%;} .cards3 > div {width: calc((100% - 20px) / 2);} .cards3 > div:nth-child(3n+1) {margin-left: 20px;} .cards3 > div:nth-child(2n+1) {margin-left: 0px;} .cards3 > div:nth-child(-n+3) {margin-top: 20px;} .cards3 > div:nth-child(-n+2) {margin-top: 0px;} .cards3 .cardsEl .ratio-inner {padding-top: 72%;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 26px;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 16px; width: 100%;} .cards2 .cardsEl .ratio-inner {padding-top: 72%;} .cards2 .cardsEl .flex3 h3, .cards2 .cardsEl .flex3 h2, .cards2 .cardsEl .flex3 p {width: 100%;} .input, .textarea, .select {font-size: 17px;} .pic100 .flex {padding: 40px;} .cardsInfoT1 {width: 100%;} .cardsInfoT2 p {font-size: 16px;} .bcards > div {width: calc((100% - 60px) / 4); margin-left: 20px; margin-top: 32px; position: relative;} .bcards > div:nth-child(-n+6) {margin-top: 32px;} .bcards > div:nth-child(6n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+5) {margin-top: 32px;} .bcards > div:nth-child(5n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+4) {margin-top: 0px;} .bcards > div:nth-child(4n+1) {margin-left: 0px;} } @media screen and (max-width: 1020px) { #topBody > div:last-child > .flex > div:first-child {display: none;} #topBody > div:last-child > .flex > div:last-child {width: 100%; padding-left: 0px;} .marginTop-140 {margin-top: 100px;} #mpBlock1Text h1 {width: 90%; font-size: 56px;} #fibonachiBg {top: -80px;} .panelBodyEl p {font-size: 22px;} .panelBodyEl ul li {font-size: 19px;} #topBody > div:first-child {padding-right: 24px;} #mpBlock2 .txt p {width: 90%;} #locations > div:first-child p {width: 90%;} #footerBottomBody > div:last-child > div > p:first-child {font-size: 36px;} #footerBottomBody > div:last-child {padding-left: 32px;} .marginTop-120 {margin-top: 88px;} /**/ .emojiCategoryBodyElBottom > div:last-child {display: none;} .emojiCategoryBodyElBottom > div:first-child {width: 100%; padding-right: 0px;} .emojiCategoryBodyEl > .flex > div:first-child {font-size: 36px;} } @media screen and (max-width: 960px) { #mpBlock1Text h1 {width: 100%; font-size: 56px;} #mpBlock1Text p {margin-top: 32px; font-size: 18px; width: 70%;} #topBody > div:first-child ul > li a, #topBody > div:first-child ul > li a:visited {padding: 6px 0px;} .centered {padding: 0 40px;} #fibonachiBg {position: absolute; top: -56px; left: 2%; margin-left: 0px; z-index: 1; width: 96%; height: auto;} #mpBlock1Clients {margin-top: 56px;} #mpBlock2 .txt p {width: 100%;} .servicesEl .ratio-inner {padding-top: 100%;} .servicesEl .txt h3 {font-size: 24px;} #casesBlock > div:first-child h2 {font-size: 80px;} #casesBlock > div:last-child {width: 100px;} #casesBlock > div:last-child img {width: 100px; height: 100px;} #casesBlock > div:first-child {padding-right: 32px;} #casesBlock {height: 200px;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 100%;} #sblock50-contacts > div:first-child p:first-child {font-size: 19px;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 30px;} #sblock50-contacts > div:last-child {margin-top: 48px;} #locations > div:first-child p {width: 100%;} .marginTop-80 {margin-top: 64px;} #line {padding: 20px 0;} .marquee_left a {font-size: 22px; margin-right: 20px;} .marquee_left a:after {content: '•'; margin-left: 20px;} .block:last-child {margin-bottom: 100px;} #breadcrumbs > li {margin-right: 8px; margin-bottom: 8px; font-size: 13px;} #innerBody {margin-top: 56px;} .width80 {width: 100%;} .width80 h2, .width80 h3 {width: 70%;} .thesisBlockEl {width: 100%; padding-right: 24px;} .thesisBlock > div {margin-top: 24px;} .quote > div:last-child {width: calc(100% - 56px); padding: 32px;} .quote > div:first-child {width: 56px;} .advantagesBlock > div {width: calc((100% - 20px) / 2); margin-left: 20px; margin-top: 32px;} .advantagesBlock > div:nth-child(4n+1) {margin-left: 20px;} .advantagesBlock > div:nth-child(3n+1) {margin-left: 20px;} .advantagesBlock > div:nth-child(2n+1) {margin-left: 0px;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .advantageBlock {padding: 48px;} .width-50 {width: 80%;} .innerSearchBodyEl h2 {font-size: 20px;} pre {width: 100%;} .marginTop-40 {margin-top: 32px;} .txt h1 {font-size: min(max(28px, calc(1.75rem + (38 - 28) * ((100vw - 320px) / (960 - 320)))), 38px); min-height: 0vw;} #editUiPanel {padding: 10px 0;} #editUiPanelBody > div:first-child {flex: 1 1 0; padding-right: 24px; font-size: 19px; font-weight: 500;} #editUiPanelBody > div:last-child .button {float: left; margin-left: 10px; width: 32px; height: 32px; padding: 0 0;} .txt h4, p.bcardsElTitle {font-size: 20px;} .bcards > div {width: calc((100% - 40px) / 3); margin-left: 20px; margin-top: 24px; position: relative;} .bcards > div:nth-child(-n+6) {margin-top: 24px;} .bcards > div:nth-child(6n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+5) {margin-top: 24px;} .bcards > div:nth-child(5n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+4) {margin-top: 24px;} .bcards > div:nth-child(4n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+3) {margin-top: 0px;} .bcards > div:nth-child(3n+1) {margin-left: 0px;} /**/ .emojiCategory .txt h2, .emojiCategory .txt p.likeH2 {font-size: 28px;} /*.ecbe-y:before {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 16px; height: 16px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 16px 16px;} .ecbe-g:not(.ecbe-all):after {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;} .ecbe-g.ecbe-all:after {content: ''; position: absolute; z-index: 1; left: 8px; top: 28px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;}*/ .ecbe-y:before {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 16px; height: 16px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 16px 16px;} .ecbe-g:after {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;} .ecbe-all:before {content: ''; position: absolute; z-index: 1; left: 8px; top: 8px; display: block; width: 16px; height: 16px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 16px 16px;} .ecbe-all:after {content: ''; position: absolute; z-index: 1; left: 8px; top: 28px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;} } @media screen and (max-width: 920px) { .columns-2-50 > div:first-child {width: 100%; padding-right: 0px;} .columns-2-50 .txt h2 {width: 70%;} #mpBlock2Thesis > div {float: left; width: calc(100% / 3);} #mpBlock2Thesis {width: 100%;} #mpBlock2 .flex2 > div:last-child {padding-top: 8px;} .columns-2-50 > div:last-child {width: 100%; padding-left: 0px;} .columns-2-50-left > div:last-child {margin-top: 56px;} #mpBlock2Slider {height: 300px; padding-left: 40px; padding-top: 40px;} .mpBlock2SliderSafariEl {width: 340px; padding: 16px;} .mb2sse1 {bottom: 20px; right: 20px; z-index: 3; opacity: 1; transition: all 0.3s linear;} .mb2sse2 {bottom: 112px; right: -40px; z-index: 2; opacity: 0.8; transition: all 0.3s linear;} #mpBlock2 .txt p {width: 100%;} .mpBlock2SliderSafariEl > div:last-child p {font-size: 20px;} /*.columns-2-50-right > div:first-child {order: 2; margin-top: 56px;} .columns-2-50-right > div:lastst-child {order: 1;}*/ .columns-2-50-right > div:first-child {order: 1;} .columns-2-50-right > div:last-child {order: 2; margin-top: 56px;} .columns-2-50-left > div:first-child {order: 2; margin-top: 56px;} .columns-2-50-left > div:last-child {order: 1; margin-top: 0px;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 40%;} #locationsSide > div:first-child {width: 50%;} #locationsSide > div:last-child {width: 50%; padding-left: 40px;} #locationsSide .ratio-inner {padding-top: 62%;} #footerBottomBody > div:nth-child(2) {width: 64px; order: 3; margin-left: calc((100% - 64px) / 2); margin-top: 32px;} #footerBottomBody > div:first-child {width: 50%; padding-right: 24px; order: 1;} #footerBottomBody > div:last-child {width: 50%; padding-left: 24px; order: 2;} footer {padding: 26px 0 32px;} .marginTop-16 {margin-top: 12px;} #footerBottomBody > div:first-child > div > div > p {margin-top: 4px; font-size: 15px;} #footerBottomBody > div:first-child > div > p:first-child {font-size: 15px;} #footerBottomBody > div:last-child > div > div a {font-size: 15px; margin-left: 16px;} #footerBottomBody {margin-top: 12px; padding-top: 24px;} #footerBottomBody > div:nth-child(2) img {width: 64px; height: 64px;} .cards4 .cardsEl .txt {width: 100%;} .cards4-sliderBody .cardsEl .txt {width: 100%;} .cards2 > div {width: 100%; margin-left: 0px;} .cards2 > div:nth-child(2n+1) {margin-left: 0px;} .cards2 > div:nth-child(-n+2) {margin-top: 20px;} .cards2 > div:nth-child(-n+1) {margin-top: 0px;} .cards2 .cardsEl .ratio-inner {padding-top: 56.25%;} .cards2 .cardsEl .flex3 {padding: 40px;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 17px; width: 80%;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 28px;} .cards2 .cardsEl .flex3 h3, .cards2 .cardsEl .flex3 h2, .cards2 .cardsEl .flex3 p {width: 85%;} .advantageBlock p {font-size: min(max(24px, calc(1.5rem + (32 - 24) * ((100vw - 320px) / (920 - 320)))), 32px); min-height: 0vw;} .cards2 .cardsEl .ratio-inner {padding-top: 56.25%;} .cards2 .cardsInfo {padding: 40px;} .cardsInfoT2 {width: 80%; margin-top: 40px;} .cardsInfoT2:first-child {margin-top: 0px;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 28px;} .cardsInfoT1 {width: 80%;} .cardsInfoT2 p {font-size: 17px;} /**/ .marginTop-32 {margin-top: 24px;} .emojiCategory {margin-top: 48px;} #emojiPageBodyLabels .labels {margin-top: 16px;} #emojiPageBody .marginTop-56 {margin-top: 48px;} #emojiPageBodyCategories.marginTop-32 {margin-top: 24px;} #emojiSearch > div:first-child {flex: 1 1 0; padding-right: 20px;} #emojiSearch > div:last-child {width: auto; margin-top: 0px;} #emojiPageBody.columns-2-50-left > div:first-child {order: 1 !important; margin-top: 0px;} #emojiPageBody.columns-2-50-left > div:last-child {order: 2 !important; margin-top: 56px;} #emojiGalleryTxt.txt h2 {font-size: min(max(26px, calc(1.625rem + (34 - 26) * ((100vw - 320px) / (1220 - 320)))), 34px); min-height: 0vw;} #emojiGallery > div {width: calc((100% - 48px) / 4); margin-left: 16px; margin-top: 16px; position: relative;} #emojiGallery > div:nth-child(3n+1) {margin-left: 16px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 16px;} #emojiGallery > div:nth-child(4n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+4) {margin-top: 0px;} .emojiGalleryEl {padding: 16px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 22px; width: 100%; margin-bottom: 8px; padding-top: 0px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 22px;} } @media screen and (max-width: 820px) { #mpBlock1Text h1 {width: 100%; font-size: 52px;} #mpBlock1Text p {margin-top: 32px; font-size: 18px; width: 80%;} #fibonachiBg {top: -40px;} #panel {width: 60%; right: -60%;} .panel--open #panel {right: 0px !important;} #mpBlock2Thesis > div > p:first-child {font-size: 40px;} .blockTop > div:last-child {width: 140px;} .blockTop > div:first-child {width: calc(100% - 140px); padding-right: 20px;} .thesisBlockEl > p:first-child {font-size: 40px;} .cards4 .cardsEl .ratio-inner {padding-top: 100%;} .cards4-sliderBody .ratio-inner {padding-top: 100%;} .cards3 .cardsEl .ratio-inner {padding-top: 100%;} .advantageBlock {padding: 40px;} .accordeonTop > div:first-child .txt h3, .accordeonTop > div:first-child .txt h2, .accordeonTop > div:first-child .txt h4, .accordeonTop > div:first-child .txt p {font-size: 22px;} #locationsSide .ratio-inner {padding-top: 72%;} #panelOverlay {width: 40%;} /**/ .emojiCategoryBody > div {width: calc((100% - 32px) / 5); margin-left: 8px; margin-top: 8px; padding: 8px 8px 8px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(6n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+6) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(5n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+5) {margin-top: 0px;} .emojiCategoryBodyEl > .flex > div:first-child {font-size: 32px; padding: 0 0 4px;} } @media screen and (max-width: 760px) { #mpBlock2Thesis > div {float: left; width: calc(100% / 2);} .columns-2-50 .txt h2 {width: 80%;} #sblock50-contacts > div:first-child p:first-child {font-size: 18px;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 28px; margin-top: 16px;} #footerBottomBody > div:first-child {width: 250px; padding-right: 0px;} #footerBottomBody > div:last-child {width: calc(100% - 250px);} .width80 h2, .width80 h3 {width: 80%;} .thesisBlock > div {width: calc(100% / 2);} .thesisBlockEl {width: 80%; padding-right: 0px;} #locationsSide .ratio-inner {padding-top: 80%;} #emojiGallery > div {width: calc((100% - 32px) / 3); margin-left: 16px; margin-top: 16px; position: relative;} #emojiGallery > div:nth-child(4n+1) {margin-left: 16px;} #emojiGallery > div:nth-child(-n+4) {margin-top: 16px;} #emojiGallery > div:nth-child(3n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 0px;} .emojiGalleryEl {padding: 16px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 22px; width: 100%; margin-bottom: 8px; padding-top: 0px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 22px;} } @media screen and (max-width: 740px) { #mpBlock1Text h1 {width: 100%; font-size: min(max(32px, calc(2rem + (48 - 32) * ((100vw - 320px) / (740 - 320)))), 48px); min-height: 0vw;} #mpBlock1Text p {margin-top: 24px; font-size: 18px; width: 80%;} .marginTop-140 {margin-top: 88px;} #topBody > div:first-child ul {display: none;} #topBody > div:first-child {padding-right: 0px;} #topBody > div:nth-child(2) {width: 120px;} #topBody > div:first-child, #topBody > div:last-child {width: calc((100% - 120px) / 2);} #topBody > div:nth-child(2) a > img:nth-child(2) {position: absolute; z-index: 2; width: 25px; height: 25px; left: 69px; top: 28px;} #mpBlock1Clients {margin-top: 48px;} .panelBodyEl p {font-size: 20px;} .panelBodyEl ul li {font-size: 17px;} .columns-2-50 .txt h2 {width: 90%;} .servicesEl .ratio-inner {padding-top: 113%;} .servicesEl {padding: 24px;} .servicesEl .flex3 > div:last-child p {font-size: 15px;} #casesBlock > div:first-child h2 {font-size: 72px;} #casesBlock > div:last-child {width: 90px;} #casesBlock > div:last-child img {width: 90px; height: 90px;} #casesBlock > div:first-child {padding-right: 32px;} #casesBlock {height: 180px;} #footerBottomBody > div:last-child > div > div a:last-child {margin-left: 0px;} .marginTop-120 {margin-top: 72px;} .width80 h2, .width80 h3 {width: 90%;} .cards4 .cardsEl .ratio-inner {padding-top: 110%;} .cards4 .cardsEl .flex3 {padding: 24px;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards4-sliderBody .cardsEl .flex3 {padding: 24px;} .cards4-sliderBody .ratio-inner {padding-top: 110%;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards3 .cardsEl .flex3 {padding: 24px;} .cards3 .cardsEl .ratio-inner {padding-top: 110%;} .cards3 .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards2 .cardsEl .ratio-inner {padding-top: 56.25%;} .cards2 .cardsEl .flex3 {padding: 32px;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 17px; width: 90%;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 26px;} .accordeonTop {padding: 16px 16px 16px 24px;} .accordeonBody {padding: 8px 16px 24px 24px;} .accordeon .button-icon {width: 32px; height: 32px;} .accordeon .button-icon svg {width: 16px; height: 16px;} .accordeonTop > div:last-child {width: 32px;} .accordeonTop > div:first-child {width: calc(100% - 32px); padding-right: 24px;} #mdl {width: 520px; padding: 40px;} .input--two {width: 100%; margin-left: 0px;} .width-50 {width: 90%;} .cardsInfoT2 {width: 90%; margin-top: 32px;} .cardsInfoT2:first-child {margin-top: 0px;} .cards2 .cardsInfo {padding: 32px;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 26px;} /**/ #emojiSearch > div:first-child {flex: 1 1 0; padding-right: 0px; width: 100%;} #emojiSearch > div:last-child {display: none;} } @media screen and (max-width: 720px) { .sblock50 > div {width: 100%; margin-left: 0px; margin-top: 20px;} .sblock50 > div:nth-child(-n+2) {margin-top: 20px;} .sblock50 > div:nth-child(-n+1) {margin-top: 0px;} #sblock50-contacts > div:last-child {margin-top: 40px;} #sblock50-faq > div:last-child {margin-top: 40px;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 32px;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 80%;} #locationsSide .ratio-inner {padding-top: 84%;} /**/ .emojiCategoryBody > div {width: calc((100% - 24px) / 4); margin-left: 8px; margin-top: 8px; padding: 8px 8px 8px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(6n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+6) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(5n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+5) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(4n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+4) {margin-top: 0px;} } @media screen and (max-width: 660px) { #fibonachiBg {position: absolute; top: -56px; left: -10%; margin-left: 0px; z-index: 1; width: 120%; height: auto;} .button:not(.label) {height: 40px; padding: 0 20px;} .button-icon {width: 40px; padding: 0 0 !important;} .blockTop > div:last-child .button {margin-left: 16px;} .blockTop > div:last-child {width: 120px;} .blockTop > div:first-child {width: calc(100% - 120px);} .servicesEl .txt h3 {font-size: 22px;} .servicesEl .ratio-inner {padding-top: 150%;} #sblock50-contacts > div:last-child a {margin-right: 16px; width: 40px; height: 40px;} #sblock50-contacts > div:last-child a img {width: 100%; height: 100%;} #locationsSide .ratio-inner {padding-top: 100%;} #footerBottomBody > div:last-child {width: 100%; order: 1; justify-content: flex-start; padding-left: 0px;} #footerBottomBody > div:first-child {order: 2; margin-top: 32px;} #footerBottomBody > div:last-child > div > p:first-child {text-align: left;} #footerBottomBody > div:nth-child(2) {width: 64px; order: 3; margin-left: 0; margin-top: 32px; position: relative;} #footerBottomBody > div:first-child {width: calc(100% - 64px); align-items: center !important;} #footerBottomBody > div:nth-child(2) img {display: block; width: 64px; height: 64px; position: absolute; top: 50%; margin-top: -32px;} .quote > div:last-child p, .quote > div:last-child h2, .quote > div:last-child h3 {font-size: min(max(20px, calc(1.25rem + (24 - 20) * ((100vw - 320px) / (760 - 320)))), 24px); min-height: 0vw;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards4 .cardsEl .ratio-inner {padding-top: 130%;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards4-sliderBody .ratio-inner {padding-top: 130%;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards3 .cardsEl .ratio-inner {padding-top: 130%;} .advantageBlock p {font-size: min(max(20px, calc(1.25rem + (24 - 20) * ((100vw - 320px) / (760 - 320)))), 24px); min-height: 0vw;} .input, .select {height: 40px; padding: 0 20px;} .textarea {height: 120px; padding: 12px 20px;} .width-50 {width: 100%;} /**/ #emojiCopy {padding: 16px;} #emojiCopy > div:first-child {padding-right: 20px; font-size: 30px;} /*.emojiCategoryBodyElBottom .button {height: 32px;}*/ #emojiGallery > div {width: calc((100% - 32px) / 3); margin-left: 16px; margin-top: 16px; position: relative;} #emojiGallery > div:nth-child(4n+1) {margin-left: 16px;} #emojiGallery > div:nth-child(-n+4) {margin-top: 16px;} #emojiGallery > div:nth-child(3n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 0px;} .emojiGalleryEl {padding: 8px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 20px; width: 100%; margin-bottom: 6px; padding-top: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 20px;} } @media screen and (max-width: 620px) { body {font-size: 16px;} #topBodySearch {display: none;} #mpBlock1Text p {font-size: 17px; width: 90%;} #mpBlock1Text h1 {font-size: min(max(32px, calc(2rem + (44 - 32) * ((100vw - 320px) / (620 - 320)))), 44px); min-height: 0vw;} #mpBlock1 {margin-top: 64px;} #mpBlock1Clients {margin-top: 40px;} .marginTop-140 {margin-top: 80px;} .topBodyMenu > div:first-child {padding-right: 10px; font-size: 16px;} #panel {width: 70%; right: -70%;} .panel--open #panel {right: 0px !important;} .mpBlock2SliderSafariEl {width: 300px; position: absolute; border-radius: 10px; background-color: #fff; padding: 12px; -webkit-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); -moz-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); bottom: -40px; right: 20px; z-index: 1; opacity: 0; transition: all 0.3s linear;} .mb2sse1 {bottom: 20px; right: 20px; z-index: 3; opacity: 1; transition: all 0.3s linear;} .mb2sse2 {bottom: 96px; right: -40px; z-index: 2; opacity: 0.8; transition: all 0.3s linear;} .mpBlock2SliderSafariEl > div:last-child p {font-size: 18px;} .mpBlock2SliderSafariEl > div:first-child {width: 32px;} .mpBlock2SliderSafariEl > div:last-child {width: calc(100% - 32px); padding-left: 12px;} .mpBlock2SliderSafariEl > div:first-child > div {width: 32px; height: 32px; border-radius: 50%; font-size: 16px; line-height: 32px; text-align: center; -webkit-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16); -moz-box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16); box-shadow: 0px 0px 8px 0px rgba(34, 60, 80, 0.16);} #mpBlock2Slider {height: 260px; padding-left: 32px; padding-top: 32px;} .columns-2-50 .txt h2 {width: 100%;} .txt h2 {margin-bottom: 32px;} .txt h2:last-child {margin-bottom: 0px;} /*.columns-2-50-left > div:last-child {margin-top: 48px;}*/ .columns-2-50-left > div:first-child {margin-top: 48px;} .columns-2-50-left > div:last-child {margin-top: 0px;} .blockTop > div:last-child .button {margin-left: 12px;} .blockTop > div:last-child .button:first-child {margin-left: 0px;} .button-icon {width: 32px; height: 32px;} .blockTop > div:last-child {width: 80px;} .blockTop > div:first-child {width: calc(100% - 80px);} .marginTop-48 {margin-top: 32px;} .servicesEl .ratio-inner {padding-top: 64%;} .servicesEl {padding: 32px;} .servicesEl .flex3 > div:last-child p {font-size: 16px;} .servicesEl .txt h3 {font-size: 24px;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 48%;} /*.columns-2-50-right > div:first-child {margin-top: 48px;}*/ .columns-2-50-right > div:last-child {margin-top: 48px;} #casesBlock > div:first-child h2 {font-size: 64px;} #casesBlock > div:last-child {width: 80px;} #casesBlock > div:last-child img {width: 80px; height: 80px;} #casesBlock > div:first-child {padding-right: 24px;} #casesBlock {height: 160px;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 90%;} .button {font-size: 16px;} #locationsSide .ratio-inner {padding-top: 110%;} #locationsSide > div:first-child {width: 220px;} #locationsSide > div:last-child {width: calc(100% - 220px); padding-left: 32px;} .locationsSideEl > div:first-child h3 {font-size: 20px;} .marginTop-80 {margin-top: 64px;} .marquee_left a {font-size: 20px; margin-right: 16px;} .marquee_left a:after {content: '•'; margin-left: 16px;} #footerTopBody > div:first-child {display: none;} #footerTopBody > div:last-child {width: 100%;} #footerBottomBody {margin-top: 24px; padding-top: 24px;} footer {padding: 32px 0 24px;} #innerTop {margin-top: 48px;} #breadcrumbs > li {margin-right: 6px; margin-bottom: 6px; font-size: 12px;} #innerBody {margin-top: 48px;} .block100 .ratio-inner {padding-top: 40%;} .marginTop-120 {margin-top: 80px;} .width80 h2, .width80 h3 {width: 100%;} .txt p, .txt ul, .txt ol {margin-top: 20px;} .txt p:first-child, .txt ul:first-child, .txt ol:first-child {margin-top: 0px;} .thesisBlockEl {width: 100%; padding-right: 24px;} .quote > div:first-child {width: 40px;} .quote > div:last-child {width: calc(100% - 40px); padding: 24px;} .advantagesBlockEl > div:last-child {width: 95%;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 14px;} .cards4 .cardsEl .txt h3 {font-size: 20px;} .cardsEl .flex3 > div:last-child {padding-top: 24px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 14px;} .cards4-sliderBody .cardsEl .txt h3 {font-size: 20px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child {padding-top: 24px;} .cards4-sliderBody .cardsEl .txt {width: 100%;} .servicesElBody.flex3 > div .txt {width: 90%;} .cards3 > div {width: 100%; margin-left: 0px;} .cards3 > div:nth-child(3n+1) {margin-left: 0px;} .cards3 > div:nth-child(2n+1) {margin-left: 0px;} .cards3 > div:nth-child(-n+3) {margin-top: 20px;} .cards3 > div:nth-child(-n+2) {margin-top: 20px;} .cards3 > div:nth-child(-n+1) {margin-top: 0px;} .cards3 .cardsEl .ratio-inner {padding-top: 56%;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards3 .cardsEl .flex3 {padding: 32px;} .cards3 .cardsEl .flex3 > div:last-child p {font-size: 16px;} .cards2 .cardsEl .ratio-inner {padding-top: 56%;} .cards2 .cardsEl .flex3 {padding: 32px;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 16px; width: 100%;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 24px;} .cards2 .cardsEl .flex3 h3, .cards2 .cardsEl .flex3 h2, .cards2 .cardsEl .flex3 p {width: 100%;} .slickWrpBody {width: calc(100% + 16px); margin-left: -16px; position: relative;} .slickWrpBody .slick-slide {margin-left: 16px;} .advantageBlock {padding: 32px;} .accordeonTop > div:first-child .txt h3, .accordeonTop > div:first-child .txt h2, .accordeonTop > div:first-child .txt h4, .accordeonTop > div:first-child .txt p {font-size: 20px;} .marginTop-20 {margin-top: 16px;} .marginTop-32 {margin-top: 24px;} .marginTop-40 {margin-top: 32px;} #mdl {width: 100%; padding: 32px;} .input, .textarea, .select {font-size: 16px;} .conf {font-size: 12px;} #mdlSearchWrp > div:first-child {padding-right: 16px;} #searchTop > div:first-child {padding-right: 16px;} .innerSearchBodyEl h2 {font-size: 19px;} .innerSearchBodyEl {margin-top: 16px;} .innerSearchBodyEl:first-child {margin-top: 0px;} .marginTop-40 {margin-top: 24px;} .pic100 .flex {padding: 32px;} .cardsInfoT2 {width: 100%; margin-top: 32px;} .cardsInfoT2:first-child {margin-top: 0px;} .cards2 .cardsInfo {padding: 32px;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 24px;} .cardsInfoT2 p {font-size: 16px;} .cardsInfoT1 {width: 100%;} #editUiPanelBody > div:first-child {flex: 1 1 0; padding-right: 20px; font-size: 18px; font-weight: 500;} #panelOverlay {width: 30%;} .txt h2 {margin-bottom: 24px; margin-top: 32px;} .txt h2:last-child {margin-bottom: 0px;} .txt h2:first-child {margin-top: 0px;} .bcards > div {width: calc((100% - 20px) / 2); margin-left: 20px; margin-top: 24px; position: relative;} .bcards > div:nth-child(-n+6) {margin-top: 24px;} .bcards > div:nth-child(6n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+5) {margin-top: 24px;} .bcards > div:nth-child(5n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+4) {margin-top: 24px;} .bcards > div:nth-child(4n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+3) {margin-top: 24px;} .bcards > div:nth-child(3n+1) {margin-left: 20px;} .bcards > div:nth-child(-n+2) {margin-top: 0px;} .bcards > div:nth-child(2n+1) {margin-left: 0px;} .txt h4 {font-size: 19px;} .bcardsEl .txt p {margin-top: 8px;} .bcardsEl .txt p:first-child {margin-top: 0px;} /**/ .emojiCategory {margin-top: 40px;} .emojiCategory:first-child {margin-top: 0px;} .emojiCategory .txt h2, .emojiCategory .txt p.likeH2 {font-size: 24px;} .emojiCategory .marginTop-32 {margin-top: 20px;} .emojiCategoryBodyElBottom .button {font-size: 13px;} .emojiCategoryBodyEl > .flex > div:nth-child(2) input {font-size: 13px;} #emojiPageBody .marginTop-56 {margin-top: 40px;} .label {padding: 3px 8px;} .button-icon {width: 32px !important; height: 32px !important;} #emojiPageBody.columns-2-50-left > div:last-child {margin-top: 48px;} /*.ecbe-y:before {content: ''; position: absolute; z-index: 1; left: 4px; top: 4px; display: block; width: 16px; height: 16px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 16px 16px;} .ecbe-g:not(.ecbe-all):after {content: ''; position: absolute; z-index: 1; left: 4px; top: 4px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;} .ecbe-g.ecbe-all:after {content: ''; position: absolute; z-index: 1; left: 4px; top: 24px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;}*/ .ecbe-y:before {content: ''; position: absolute; z-index: 1; left: 4px; top: 4px; display: block; width: 16px; height: 16px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 16px 16px;} .ecbe-g:after {content: ''; position: absolute; z-index: 1; left: 4px; top: 4px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;} .ecbe-all:before {content: ''; position: absolute; z-index: 1; left: 4px; top: 4px; display: block; width: 16px; height: 16px; background: url('../img/icon-yandex2.svg') no-repeat; background-size: 16px 16px;} .ecbe-all:after {content: ''; position: absolute; z-index: 1; left: 4px; top: 24px; display: block; width: 16px; height: 16px; background: url('../img/icon-google.svg') no-repeat; background-size: 16px 16px;} } @media screen and (max-width: 560px) { #fibonachiBg {position: absolute; top: -48px; left: -15%; margin-left: 0px; z-index: 1; width: 130%; height: auto;} .cards4 .cardsEl .ratio-inner {padding-top: 140%;} .cards4-sliderBody .ratio-inner {padding-top: 140%;} /**/ .emojiCategoryBodyEl > .flex > div:nth-child(2) {display: none;} } @media screen and (max-width: 520px) { #fibonachiBg {position: absolute; top: -40px; left: -20%; margin-left: 0px; z-index: 1; width: 140%; height: auto;} #mpBlock1Text p {width: 100%;} #panel {width: 80%; right: -80%;} .panel--open #panel {right: 0px !important;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 28px;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 90%;} #footerBottomBody > div:last-child > div > p:first-child {font-size: 32px;} #footerBottomBody > div:first-child {padding-right: 24px;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 13px;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 18px;} .cardsEl .flex3 > div:last-child {padding-top: 16px;} .cards4 .cardsEl .flex3 {padding: 20px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 13px;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 18px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child {padding-top: 16px;} .cards4-sliderBody .cardsEl .flex3 {padding: 20px;} .cards3 .cardsEl .ratio-inner {padding-top: 64%;} .cards2 .cardsEl .ratio-inner {padding-top: 64%;} #locationsSide .ratio-inner {padding-top: 135%;} #locationsSide > div:first-child {width: 180px;} #locationsSide > div:last-child {width: calc(100% - 180px); padding-left: 24px;} #innerTopCard .txt h1 {font-size: min(max(26px, calc(1.625rem + (30 - 26) * ((100vw - 320px) / (520 - 320)))), 30px); min-height: 0vw;} .pic100 .flex {padding: 24px;} #panelOverlay {width: 20%;} /**/ .emojiCategoryBody > div {width: calc((100% - 16px) / 3); margin-left: 8px; margin-top: 8px; padding: 8px 8px 8px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(6n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+6) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(5n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+5) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(4n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+4) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(3n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+3) {margin-top: 0px;} .emojiCategoryBodyEl > .flex > div:first-child {font-size: 28px;} #emojiGallery > div {width: calc((100% - 16px) / 2); margin-left: 16px; margin-top: 16px; position: relative;} #emojiGallery > div:nth-child(4n+1) {margin-left: 16px;} #emojiGallery > div:nth-child(-n+4) {margin-top: 16px;} #emojiGallery > div:nth-child(3n+1) {margin-left: 16px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 16px;} #emojiGallery > div:nth-child(2n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+2) {margin-top: 0px;} .emojiGalleryEl {padding: 8px;} .emojiGalleryEl .ratio {padding: 8px;} .emojiGalleryEl .txt {text-align: center; font-size: 20px; width: 100%; margin-bottom: 6px; padding-top: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 20px;} } @media screen and (max-width: 480px) { #topBody > div:first-child {display: none;} #topBody > div:last-child {width: calc(100% - 120px);} .centered {padding: 0 32px;} #mpBlock1Text h1 {font-size: min(max(30px, calc(1.875rem + (38 - 30) * ((100vw - 320px) / (480 - 320)))), 38px); min-height: 0vw;} #mpBlock1Text p {font-size: 16px; margin-top: 16px;} .marginTop-140 {margin-top: 72px;} #top {padding: 10px 0;} #panelBody > div {padding: 32px;} #fibonachiBg {position: absolute; top: -40px; left: -25%; margin-left: 0px; z-index: 1; width: 150%; height: auto;} #mpBlock1 {margin-top: 56px;} .txt h2, #emojiGalleryTxt.txt h2 {font-size: min(max(23px, calc(1.4375rem + (27 - 23) * ((100vw - 320px) / (520 - 320)))), 27px); min-height: 0vw;} #mpBlock2Thesis > div > p:first-child {font-size: 36px;} .mpBlock2SliderSafariEl {width: 270px; position: absolute; border-radius: 10px; background-color: #fff; padding: 12px; -webkit-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); -moz-box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); box-shadow: 0px 0px 12px 0px rgba(34, 60, 80, 0.04); bottom: -40px; right: 20px; z-index: 1; opacity: 0; transition: all 0.3s linear;} .mb2sse1 {bottom: 20px; right: 20px; z-index: 3; opacity: 1; transition: all 0.3s linear;} .mb2sse2 {bottom: 96px; right: -40px; z-index: 2; opacity: 0.8; transition: all 0.3s linear;} .servicesEl {padding: 24px;} .servicesEl .flex3 > div:last-child p {font-size: 15px;} .servicesEl .txt h3 {font-size: 22px;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 56%;} #casesBlock > div:first-child h2 {font-size: min(max(40px, calc(2.5rem + (56 - 40) * ((100vw - 320px) / (480 - 320)))), 56px); min-height: 0vw;} #casesBlock > div:last-child {display: none;} #casesBlock > div:first-child {padding-right: 0px;} #casesBlock {height: auto; padding: 40px 0;} #sblock50-faq .txt, #sblock50-contacts > div:first-child p:first-child {width: 100%;} #sblock50-contacts > div:last-child, #sblock50-faq > div:last-child {margin-top: 32px;} .sblock50 > div {padding: 24px;} #sblock50-contacts > div:first-child p:first-child {font-size: 17px;} .txt h3 {font-size: min(max(20px, calc(1.25rem + (24 - 20) * ((100vw - 320px) / (480 - 320)))), 24px); min-height: 0vw;} /*#locationsSide .ratio-inner {padding-top: 100%;} #locationsSide > div:first-child {width: 45%;} #locationsSide > div:last-child {width: 55%; padding-left: 24px;}*/ #locationsSide .ratio-inner {padding-top: 168%;} #locationsSide > div:first-child {width: 140px;} #locationsSide > div:last-child {width: calc(100% - 140px); padding-left: 24px;} .locationsSideEl > div:first-child h3 {font-size: 19px;} #line {padding: 18px 0;} .marquee_left a {font-size: 18px; margin-right: 12px;} .marquee_left a:after {content: '•'; margin-left: 12px;} /*.txt h1 {font-size: min(max(32px, calc(2rem + (40 - 32) * ((100vw - 320px) / (480 - 320)))), 40px); min-height: 0vw;}*/ .marginTop-80 {margin-top: 56px;} #innerBody {margin-top: 40px;} .marginTop-120 {margin-top: 72px;} .thesisBlockEl > p:first-child {font-size: 36px;} .quote > div:last-child p, .quote > div:last-child h2, .quote > div:last-child h3 {font-size: min(max(18px, calc(1.125rem + (22 - 18) * ((100vw - 320px) / (480 - 320)))), 22px); min-height: 0vw;} .cards4 > div {width: 100%; margin-left: 0px; margin-top: 20px;} .cards4 > div:nth-child(4n+1) {margin-left: 0px;} .cards4 > div:nth-child(-n+4) {margin-top: 20px;} .cards4 > div:nth-child(3n+1) {margin-left: 0px;} .cards4 > div:nth-child(-n+3) {margin-top: 20px;} .cards4 > div:nth-child(2n+1) {margin-left: 0px;} .cards4 > div:nth-child(-n+2) {margin-top: 20px;} .cards4 > div:nth-child(-n+1) {margin-top: 0px;} .cards4 .cardsEl .flex3 {padding: 24px;} .cards4 .cardsEl .ratio-inner {padding-top: 72%;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards4 .cardsEl .txt {width: 90%;} .servicesElBody.flex3 > div .txt {width: 100%;} .cards4-sliderBody .cardsEl .flex3 {padding: 24px;} .cards4-sliderBody .ratio-inner {padding-top: 72%;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 15px !important;} .cards4-sliderBody .cardsEl .txt {width: 90%;} .cards3 .cardsEl .flex3 {padding: 24px;} .cards3 .cardsEl .ratio-inner {padding-top: 72%;} .cards3 .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .cards2 .cardsEl .flex3 {padding: 24px;} .cards2 .cardsEl .ratio-inner {padding-top: 72%;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 15px;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 22px;} .advantageBlock {padding: 24px;} .advantageBlock p {font-size: min(max(18px, calc(1.125rem + (22 - 18) * ((100vw - 320px) / (480 - 320)))), 22px); min-height: 0vw;} .accordeonTop {padding: 12px 12px 12px 20px;} .accordeonBody {padding: 6px 12px 20px 20px;} .innerSearchBodyEl h2 {font-size: 19px;} .cardsInfoT2 {width: 100%; margin-top: 24px;} .cardsInfoT2:first-child {margin-top: 0px;} .cards2 .cardsInfo {padding: 24px;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 22px;} .cardsInfoT2 p {font-size: 15px;} #editUiPanel, .editUiPanel--block {display: none !important;} } @media screen and (max-width: 440px) { .bcards > div {width: 100%; margin-left: 0px; margin-top: 24px; position: relative;} .bcards > div:nth-child(-n+6) {margin-top: 24px;} .bcards > div:nth-child(6n+1) {margin-left: 0px;} .bcards > div:nth-child(-n+5) {margin-top: 24px;} .bcards > div:nth-child(5n+1) {margin-left: 0px;} .bcards > div:nth-child(-n+4) {margin-top: 24px;} .bcards > div:nth-child(4n+1) {margin-left: 0px;} .bcards > div:nth-child(-n+3) {margin-top: 24px;} .bcards > div:nth-child(3n+1) {margin-left: 0px;} .bcards > div:nth-child(-n+2) {margin-top: 24px;} .bcards > div:nth-child(2n+1) {margin-left: 0px;} .bcards > div:nth-child(-n+1) {margin-top: 0px;} } @media screen and (max-width: 420px) { #panel {width: 100%; right: -100%;} .panel--open #panel {right: 0px !important;} #topBody > div:nth-child(2) {width: 100px;} #topBody > div:last-child {width: calc(100% - 100px);} #topBody > div:nth-child(2) a > img:nth-child(2) {position: absolute; z-index: 2; width: 21px; height: 21px; left: 57px; top: 24px;} #mpBlock1Clients {margin-top: 32px;} #mpBlock1Text p {font-weight: normal;} #mpBlock1 {margin-top: 48px;} #mpBlock2Thesis > div {padding-right: 16px;} #mpBlock2Slider {height: 236px; padding-left: 20px; padding-top: 20px;} .mpBlock2SliderSafariEl {width: 340px; position: absolute; border-radius: 10px; background-color: #fff; padding: 12px; bottom: -20px; right: auto; left: 20px; z-index: 1; opacity: 0; transition: all 0.3s linear;} .mb2sse1 {bottom: 20px; right: auto; left: 20px; z-index: 3; opacity: 1; transition: all 0.3s linear;} .mb2sse2 {bottom: 86px; right: auto; left: 40px; z-index: 2; opacity: 0.8; transition: all 0.3s linear;} /*.columns-2-50-left > div:last-child {margin-top: 40px;}*/ .columns-2-50-left > div:first-child {margin-top: 40px;} .columns-2-50-left > div:last-child {margin-top: 0px;} .mpBlock2SliderSafariEl > div:last-child p {font-size: 17px;} .servicesEl .ratio-inner {padding-top: 100%;} /*.columns-2-50-right > div:first-child {margin-top: 40px;}*/ .columns-2-50-right > div:last-child {margin-top: 40px;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 64%;} #casesBlock {height: auto; padding: 32px 0;} #sblock50-contacts > div:first-child p:nth-child(2) {font-size: 26px;} /*#locationsSide .ratio-inner {padding-top: 100%;} #locationsSide > div:first-child {width: 140px;} #locationsSide > div:last-child {width: calc(100% - 140px); padding-left: 24px;}*/ #locationsSide .ratio-inner {padding-top: 164%;} #locationsSide > div:first-child {width: 140px;} #locationsSide > div:last-child {width: calc(100% - 140px); padding-left: 24px;} .locationsSideEl > div:first-child h3 {font-size: 18px;} .marginTop-140 {margin-top: 64px;} .block:last-child {margin-bottom: 88px;} #footerBottomBody > div:nth-child(2) {width: 56px; order: 3; margin-left: 0; margin-top: 32px; position: relative;} #footerBottomBody > div:first-child {width: calc(100% - 56px); align-items: center !important;} #footerBottomBody > div:nth-child(2) img {display: block; width: 56px; height: 56px; position: absolute; top: 50%; margin-top: -28px;} #footerBottomBody > div:last-child > div > div a {float: left; margin-left: 0px; margin-right: 12px; margin-top: 8px;} #footerBottomBody > div:last-child .marginTop-16 {margin-top: 0px;} #innerTop {margin-top: 40px;} #breadcrumbs > li {margin-right: 5px; margin-bottom: 5px; font-size: 11px;} .block100 .ratio-inner {padding-top: 48%;} .block100.parallaxWrp .parallax_scroll {height: 160%; top: -30%;} .parallax_scroll {height: 150%; top: -25%;} .marginTop-120 {margin-top: 64px;} .thesisBlockEl {width: 100%; padding-right: 16px;} .quote > div:first-child {width: 24px;} .quote > div:last-child {width: calc(100% - 24px); padding: 20px;} .advantagesBlock > div {width: 100%; margin-left: 0px; margin-top: 24px;} .advantagesBlock > div:nth-child(4n+1) {margin-left: 0px;} .advantagesBlock > div:nth-child(3n+1) {margin-left: 0px;} .advantagesBlock > div:nth-child(2n+1) {margin-left: 0px;} .advantagesBlockEl > div:first-child {padding-bottom: 12px;} .advantagesBlockEl > div:last-child {padding-top: 12px;} .cards4 .cardsEl .ratio-inner {padding-top: 80%;} .cards4 .cardsEl .txt {width: 100%;} .cards4-sliderBody .ratio-inner {padding-top: 80%;} .cards4-sliderBody .cardsEl .txt {width: 100%;} .cards3 .cardsEl .ratio-inner {padding-top: 80%;} .cards3 .cardsEl .txt {width: 100%;} .cards2 .cardsEl .ratio-inner {padding-top: 80%;} .cards2 .cardsEl .txt {width: 100%;} .accordeonTop > div:first-child .txt h3, .accordeonTop > div:first-child .txt h2, .accordeonTop > div:first-child .txt h4, .accordeonTop > div:first-child .txt h4, .accordeonTop > div:first-child .txt p {font-size: 18px;} .accordeon {margin-top: 16px;} .accordeon:first-child {margin-top: 0px;} #mdl {padding: 24px;} .clearfix .button:not(.button-icon) {width: 100%; justify-content: center;} .clearfix .button:not(.label) {width: 100%; justify-content: center;} .clearfix .button > div:not(.label) {width: 100%; justify-content: center;} .conf {font-size: 11px;} #mdlSearchWrp > div:first-child {padding-right: 0px; width: 100%;} #mdlSearchWrp > div:last-child {width: 100%; margin-top: 16px;} #mdlSearchWrp > div:last-child > div {width: 100%;} #searchTop > div:first-child {padding-right: 0px; width: 100%;} #searchTop > div:last-child {width: 100%; margin-top: 16px;} #searchTop > div:last-child > div {width: 100%;} #sblock50-faq > div:last-child > div {width: 100%;} #innerTopCard .txt h1 {font-size: min(max(25px, calc(1.5625rem + (28 - 25) * ((100vw - 320px) / (420 - 320)))), 28px); min-height: 0vw;} #panelOverlay {width: 0%;} .cardsEl .parallax_scroll {height: 150%; top: -25;} .txt h4, p.bcardsElTitle {font-size: 18px;} .emojiGalleryEl .txt {text-align: center; font-size: 18px; width: 100%; margin-bottom: 6px; padding-top: 8px;} .emojiGalleryEl .txt h3, .emojiGalleryEl .txt h2 {font-size: 18px;} #emojiPageBody.columns-2-50-left > div:last-child {margin-top: 40px;} } @media screen and (max-width: 380px) { #fibonachiBg {position: absolute; top: -48px; left: -40%; margin-left: 0px; z-index: 1; width: 180%; height: auto;} #mpBlock2Thesis > div {width: 90%; padding-right: 0px;} .centered {padding: 0 24px;} .servicesEl .txt h3 {font-size: 21px;} .button-icon {width: 28px !important; height: 28px !important;} .columns-2-50 .parallaxWrp .ratio-inner {padding-top: 72%;} #sblock50-contacts > div:first-child p:first-child {font-size: 16px;} /*#locationsSide > div:first-child {width: 120px;} #locationsSide > div:last-child {width: calc(100% - 120px); padding-left: 24px;} #locationsSide .ratio-inner {padding-top: 120%;}*/ #locationsSide .ratio-inner {padding-top: 190%;} #locationsSide > div:first-child {width: 120px;} #locationsSide > div:last-child {width: calc(100% - 120px); padding-left: 20px;} .thesisBlock > div {width: 90%; padding-right: 0px;} .cards4 .cardsEl .ratio-inner {padding-top: 100%;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 21px;} .cards4 .cardsEl .flex3 > div:last-child p {font-size: 14px;} .cards4-sliderBody .ratio-inner {padding-top: 100%;} .cards4-sliderBody .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 21px;} .cards4-sliderBody .cardsEl .flex3 > div:last-child p {font-size: 14px;} .cards3 .cardsEl .ratio-inner {padding-top: 100%;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 21px;} .cards3 .cardsEl .flex3 > div:last-child p {font-size: 14px;} .cards2 .cardsEl .ratio-inner {padding-top: 100%;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 21px;} .cards2 .cardsEl .flex3 > div:last-child p {font-size: 14px;} .blockTop > div:last-child .button {margin-left: 10px;} .blockTop > div:last-child .button:first-child {margin-left: 0px;} .button-icon {width: 28px; height: 28px;} .button-icon svg {width: 16px; height: 16px;} .blockTop > div:last-child {width: 68px;} .blockTop > div:first-child {width: calc(100% - 68px);} .slickWrpBody {width: calc(100% + 10px); margin-left: -10px; position: relative;} .slickWrpBody .slick-slide {margin-left: 10px;} .accordeon .button-icon {width: 28px; height: 28px;} .accordeon .button-icon svg {width: 14px; height: 14px;} .accordeonTop > div:last-child {width: 28px;} .accordeonTop > div:first-child {width: calc(100% - 28px); padding-right: 20px;} .accordeon {margin-top: 10px;} .accordeon:first-child {margin-top: 0px;} #mdlSearchWrp > div:last-child {margin-top: 10px;} #searchTop > div:last-child {margin-top: 10px;} .pic100 .flex {padding: 20px;} #innerTopCard .block100 .ratio-inner {padding-top: 56%;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 21px;} .cardsInfoT2 p {font-size: 14px;} /**/ .emojiCategoryBody > div {width: calc((100% - 8px) / 2); margin-left: 8px; margin-top: 8px; padding: 8px 8px 8px;} .emojiCategoryBody > div:nth-child(8n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+8) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(6n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+6) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(5n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+5) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(4n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+4) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(3n+1) {margin-left: 8px;} .emojiCategoryBody > div:nth-child(-n+3) {margin-top: 8px;} .emojiCategoryBody > div:nth-child(2n+1) {margin-left: 0px;} .emojiCategoryBody > div:nth-child(-n+2) {margin-top: 0px;} .emojiCategoryBodyEl > .flex > div:first-child {font-size: 24px;} #emojiGallery > div {width: calc((100% - 8px) / 2); margin-left: 8px; margin-top: 8px; position: relative;} #emojiGallery > div:nth-child(4n+1) {margin-left: 8px;} #emojiGallery > div:nth-child(-n+4) {margin-top: 8px;} #emojiGallery > div:nth-child(3n+1) {margin-left: 8px;} #emojiGallery > div:nth-child(-n+3) {margin-top: 8px;} #emojiGallery > div:nth-child(2n+1) {margin-left: 0px;} #emojiGallery > div:nth-child(-n+2) {margin-top: 0px;} } @media screen and (max-width: 360px) { #mpBlock1Text h1 {font-size: 29px;} #mpBlock2Slider {height: 230px; padding-left: 16px; padding-top: 16px;} .servicesEl .txt h3 {font-size: 20px;} /*.columns-2-50 .parallaxWrp .ratio-inner {padding-top: 80%;}*/ #locationsSide > div:first-child {width: 110px;} #locationsSide > div:last-child {width: calc(100% - 110px); padding-left: 20px;} .locationsSideEl > div:first-child h3 {font-size: 17px;} .locationsSideEl {margin-top: 12px;} .locationsSideEl:first-child {margin-top: 0px;} .cards4 .cardsEl .flex3 > div:first-child .txt h3, .cards4 .cardsEl .flex3 > div:first-child .txt h2, .cards4 .cardsEl .flex3 > div:first-child .txt p {font-size: 20px;} .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h3, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt h2, .cards4-sliderBody .cardsEl .flex3 > div:first-child .txt p {font-size: 20px;} .cards3 .cardsEl .flex3 > div:first-child .txt h3, .cards3 .cardsEl .flex3 > div:first-child .txt h2, .cards3 .cardsEl .flex3 > div:first-child .txt p {font-size: 20px;} .cards2 .cardsEl .flex3 > div:first-child .txt h3, .cards2 .cardsEl .flex3 > div:first-child .txt h2, .cards2 .cardsEl .flex3 > div:first-child .txt p {font-size: 20px;} #locationsSide .ratio-inner {padding-top: 182%;} .cardsInfoT1 p, .cardsInfoT1 h2, .cardsInfoT1 h3 {font-size: 20px;} } @media screen and (max-width: 340px) { #mpBlock1Text h1 {font-size: 28px;} }