.wrapper {
overflow: clip
}
img,
svg {
vertical-align: top
}
.indent-bottom {
margin-bottom: 100px
}
.indent-bottom-medium {
margin-bottom: 40px
}
.indent-top {
margin-top: 100px
}
.indent-top-medium {
margin-top: 40px
}
.colored-section {
padding: 100px 0
}
.new-container {
padding: 0 20px
}
.new-brand-photos .item {
padding-top: 56%;
position: relative;
z-index: 20;
background-color: #1a1a1c;
overflow: hidden;
max-width: 100vw
}
.new-brand-photos .item>img:not(.animation) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.new-brand-photos .animation,
.new-brand-photos .numbers-list {
position: absolute;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center
}
.new-brand-photos .numbers-list {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
z-index: 20
}
.new-brand-photos .numbers-list li {
width: 90px
}
.new-brand-photos .numbers-list img {
width: 90px;
height: 90px
}
.new-brand-photos .animation {
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 5;
-webkit-animation: lightPulse 4s infinite linear both;
animation: lightPulse 4s infinite linear both;
will-change: transform
}
.new-brand-photos .animation img {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: auto;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%)
}
.new-project-head {
margin-top: -13px;
padding-top: 59px
}
.new-project-head .h1,
.new-project-head h1 {
font-size: 28px;
line-height: 36px;
letter-spacing: 0
}
.new-project-name {
font-size: 18px;
line-height: 28px;
letter-spacing: -1px;
display: block;
margin-bottom: 20px
}
.new-project-poster {
position: relative;
z-index: 20;
overflow: hidden
}
.new-project-poster img {
width: 100%;
height: auto;
vertical-align: top;
-webkit-transition: -webkit-transform .15s ease;
transition: transform .15s ease;
transition: transform .15s ease, -webkit-transform .15s ease
}
.new-columns-heading {
font-size: 16px;
line-height: 24px;
color: #0c0c0c;
font-weight: 400
}
.new-columns-heading .h3,
.new-columns-heading h3 {
margin-bottom: 24px
}
.new-columns-heading .button,
.new-columns-heading p+p {
margin-top: 25px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) {
border-left: 3px solid #e23;
margin-top: 50px;
padding-left: 24px;
padding-top: 72px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block)::before {
width: 50px;
height: 50px;
top: 0;
left: 32px;
background-image: url(//kuaping.cn/zh/wp-content/themes/kuaping2026beta/dist/images/bloomfire-quote.svg);
background-size: cover
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) p {
font-weight: 400;
margin-bottom: 24px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) cite {
color: rgba(10, 10, 10, .6);
font-size: 12px;
font-weight: 400;
line-height: 20px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) cite strong {
display: block;
margin-bottom: 2px;
font-size: 16px;
font-weight: 700;
line-height: 24px;
color: #0a0a0a
}
.new-columns-heading .button:not(.white) svg path {
stroke: #fff;
-webkit-transition: stroke .3s ease-in-out;
transition: stroke .3s ease-in-out
}
.no-touch .new-columns-heading .button:not(.white):hover svg path { }
.new-columns-heading .intro {
font-size: 22px;
line-height: 30px
}
.new-columns-heading .overview-table {
position: relative;
z-index: 20;
margin-top: 29px;
padding-top: 46px;
font-size: 16px;
line-height: 28px
}
.new-columns-heading .overview-table:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 160px;
height: 8px;
background-color: #e23
}
.new-columns-heading .overview-table .row {
border-bottom: 1px solid rgba(0, 0, 0, .2);
padding-bottom: 20px;
margin-bottom: 20px
}
.new-columns-heading .overview-table .row:last-child {
margin-bottom: 0
}
.new-columns-heading .overview-table .name {
font-size: 18px;
line-height: 28px
}
.new-columns-heading .overview-table .name+div a,
.no-touch .next-case-study .intro a:hover,
.no-touch .next-case-study .photo:hover+.title a {
text-decoration: underline
}
.no-touch .new-columns-heading .overview-table .name+div a:hover {
text-decoration: none
}
.new-challenges-photo {
padding-bottom: 4px
}
.new-challenges-photo img {
width: 100%;
height: auto;
vertical-align: top
}
.new-challenges-info,
.photo-parallax-on-scroll {
position: relative;
overflow: hidden
}
.new-challenges-info .bg img {
width: 100%
}
.photo-parallax-on-scroll {
z-index: 20;
padding-top: 100%
}
.photo-parallax-on-scroll .parallax {
position: absolute;
left: -8%;
top: -8%;
max-width: 120%;
max-height: 120%;
width: 120%;
height: 120%;
-o-object-fit: cover;
object-fit: cover;
-o-object-position: 0 0;
object-position: 0 0;
-webkit-transition: -webkit-transform .01s linear;
transition: transform .01s linear;
transition: transform .01s linear, -webkit-transform .01s linear;
will-change: transform
}
.video-ipad-holder {
position: relative;
z-index: 20;
background-repeat: no-repeat;
background-size: cover;
background-position: 0 45px
}
.video-ipad-holder>img {
width: 100%;
display: block;
position: relative;
z-index: 1
}
.video-ipad-holder .video-holder {
position: absolute;
top: 0;
padding-top: 1.15%;
left: 50%;
width: 71.35vw;
height: 47.3vw;
-webkit-transform: translateX(-49.1%);
transform: translateX(-49.1%);
z-index: 40;
min-width: 174.398px;
min-height: 120.671px
}
.video-ipad-holder video {
border-top-left-radius: 3px;
border-top-right-radius: 3px
}
.visual-elements .left-column {
position: relative;
z-index: 20;
padding: 55% 0;
min-height: 414px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
background: -webkit-gradient(linear, left bottom, left top, from(#1d1d1f), to(#1d1d1f));
background: linear-gradient(0deg, #1d1d1f 0%, #1d1d1f 100%)
}
.video-ipad-holder video,
.visual-elements .left-column .bg img,
.visual-elements .right-column .bg>img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.visual-elements .right-column {
background: #f3f4f6;
position: relative;
z-index: 20;
overflow: hidden;
padding: 55% 0;
min-height: 414px
}
.visual-elements .left-column .bg,
.visual-elements .right-column .bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0
}
.visual-elements .right-column .bg .bg-animation {
display: block;
width: 100%;
white-space: nowrap;
overflow: hidden;
position: absolute;
top: 15%;
left: 0
}
.visual-elements .right-column .bg .bg-animation div {
-webkit-animation: scroll 25s infinite linear;
animation: scroll 25s infinite linear;
background-size: cover;
width: 217.3vw;
height: 14.7vw;
margin-left: -5px;
display: inline-block;
padding-left: 100%
}
.visual-elements-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 4px;
margin: 0 15px
}
.visual-elements-item {
position: relative
}
.parallax-on-mouse img,
.visual-elements-item video {
position: absolute;
left: 0;
-o-object-fit: cover;
object-fit: cover
}
.visual-elements-item video {
width: 100%;
top: 0;
height: 100%
}
.visual-elements-item.has-video {
aspect-ratio: 16/9
}
.visual-elements-item img {
width: 100%
}
.parallax-on-mouse {
padding-top: 100%;
-webkit-transition: -webkit-transform .01s linear;
transition: transform .01s linear;
transition: transform .01s linear, -webkit-transform .01s linear
}
.parallax-on-mouse img {
top: -40px;
max-width: 200%;
max-height: 200%;
width: 120vw;
margin-left: -10vw;
height: 120%
}
.no-touch .parallax-on-mouse img {
top: 0;
width: 130vw;
height: 130%;
margin-left: -30vw;
margin-top: -15%;
-webkit-transition: -webkit-transform .1s linear;
transition: transform .1s linear;
transition: transform .1s linear, -webkit-transform .1s linear
}
.parallax-on-mouse,
.responsive-design-section {
position: relative;
z-index: 20;
overflow: hidden
}
.responsive-design-section .decor,
.responsive-design-section:after {
position: absolute;
left: 50%;
bottom: 0;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
.responsive-design-section:after {
content: "";
width: 100vw;
height: 387px;
background: rgba(52, 72, 99, .06)
}
.responsive-design-section .decor {
max-height: 387px
}
.responsive-design-section .responsive-design-element {
position: absolute;
z-index: 2;
left: 50%;
max-width: 70px
}
.responsive-design-section .responsive-design-bg {
position: absolute;
bottom: 0;
left: 50%;
-webkit-transform: translateX(-47.5%);
transform: translateX(-47.5%);
width: 550px;
height: 272px;
z-index: 2
}
.responsive-design-section .responsive-design-bg img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain
}
.responsive-design-section .responsive-design-phone-mask {
width: 252px;
height: 421px;
position: relative;
z-index: 10;
margin: 0 auto;
pointer-events: none
}
.responsive-design-section .mobile-photo {
position: absolute;
left: 50%;
top: 6px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
height: 350px;
-o-object-fit: cover;
object-fit: cover;
border-radius: 10px
}
.outcomes {
position: relative;
z-index: 20;
padding: 227px 20px 50px
}
.outcomes .outcomes-bg,
.outcomes img {
position: absolute;
left: 0;
top: 0;
height: 100%
}
.outcomes .outcomes-bg {
right: 0;
z-index: -1
}
.outcomes img {
width: 100%;
-o-object-fit: cover;
object-fit: cover;
z-index: 0
}
.aside-nav a,
.outcomes .wrap {
position: relative;
z-index: 1
}
.outcomes .button {
min-width: 232px;
min-height: 59px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content
}
.outcomes .button svg {
margin: -2px 0 0 10px;
display: inline-block;
vertical-align: top
}
.counter-slider {
margin: 0 -20px 15px 0;
background: #c18f57
}
.counter-item {
padding: 40px 0 24px 42px;
color: #fff;
font-weight: 400;
font-size: 16px;
line-height: 24px
}
.counter-item .number {
font-size: 70px;
letter-spacing: -1px;
margin-bottom: -1px;
font-weight: 500;
line-height: 1.1;
color: #fff
}
.counter-item p {
margin-top: 5px
}
.no-touch .next-case-study .photo:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1)
}
.no-touch .next-case-study .intro a:hover svg,
.no-touch .next-case-study .photo:hover+.title a svg {
-webkit-transform: translateX(20px);
transform: translateX(20px)
}
.next-case-study .intro svg,
.next-case-study img {
-webkit-transition: -webkit-transform .8s ease-in-out;
transition: transform .8s ease-in-out;
transition: transform .8s ease-in-out, -webkit-transform .8s ease-in-out
}
.next-case-study img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.next-case-study .intro svg {
display: inline-block;
vertical-align: top;
margin-top: 12px
}
.next-case-study .photo {
margin-bottom: 40px;
height: 320px;
width: 100%;
position: relative;
z-index: 20;
overflow: hidden
}
.next-case-study .name {
display: block;
font-size: 18px;
font-weight: 700;
line-height: 28px;
letter-spacing: -1px;
margin-bottom: 12px
}
.next-case-study .intro {
font-size: 28px;
font-weight: 700;
line-height: 36px
}
.aside-nav {
display: none
}
.aside-nav li+li {
margin-top: 8px
}
.aside-nav li.active a,
.no-touch .aside-nav a:hover {
-webkit-box-shadow: inset 0 0 0 5px #fc0;
box-shadow: inset 0 0 0 5px #fc0
}
.aside-nav li.active span {
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
opacity: 1
}
.aside-nav a {
display: block;
width: 8px;
height: 8px;
border-radius: 50%;
-webkit-box-shadow: inset 0 0 0 1.5px rgba(12, 12, 12, .2);
box-shadow: inset 0 0 0 1.5px rgba(12, 12, 12, .2);
-webkit-transition: -webkit-box-shadow .5s ease-in-out;
transition: box-shadow .5s ease-in-out;
transition: box-shadow .5s ease-in-out, -webkit-box-shadow .5s ease-in-out;
z-index: 20
}
.aside-nav span {
pointer-events: none;
position: absolute;
top: 50%;
left: 100%;
margin-left: 16px;
-webkit-transform: translate(-10px, -50%);
transform: translate(-10px, -50%);
opacity: 0;
color: #0c0c0c;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 14px;
background-color: #fff;
-webkit-box-shadow: 0 3px 9px rgba(27, 37, 70, .12);
box-shadow: 0 3px 9px rgba(27, 37, 70, .12);
padding: 10px;
border-radius: 10px;
white-space: nowrap;
-webkit-transition: opacity .5s ease-in-out, -webkit-transform .5s ease-in-out;
transition: opacity .5s ease-in-out, transform .5s ease-in-out;
transition: opacity .5s ease-in-out, transform .5s ease-in-out, -webkit-transform .5s ease-in-out
}
.aside-nav span:before {
content: "";
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background: url(//kuaping.cn/zh/wp-content/themes/kuaping2026beta/dist/images/ico-aside-nav.svg) no-repeat;
z-index: -1
}
.nuts-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
row-gap: 40px;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 30px
}
.nuts-item {
width: 218px;
height: 218px;
position: relative;
opacity: 0;
-webkit-transition: opacity .9s ease .3s;
transition: opacity .9s ease .3s
}
.nuts-item:nth-child(2) {
-webkit-transition: opacity .9s ease .8s;
transition: opacity .9s ease .8s
}
.nuts-item:nth-child(3) {
-webkit-transition: opacity .9s ease 1.3s;
transition: opacity .9s ease 1.3s
}
.nuts-item::after {
content: '';
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
z-index: 0;
background-color: #e9be92
}
.animated .nuts-item,
.animated .nuts-item img {
opacity: 1
}
.nuts-item img {
position: absolute;
bottom: 0;
right: 50%;
opacity: 0;
-webkit-transition: all 1s;
transition: all 1s;
-webkit-transform: translate3d(-50%, 0, 1px);
transform: translate3d(-50%, 0, 1px);
margin: 0;
-o-object-fit: contain;
object-fit: contain
}
.nuts-item img.origin-img {
position: static;
width: 100%!important;
height: 100%!important;
max-height: none;
max-width: none!important;
opacity: 1;
z-index: 1;
visibility: visible;
-webkit-transform: translate(-8px, 0) rotate(0deg) scale(.97)!important;
transform: translate(-8px, 0) rotate(0deg) scale(.97)!important;
-webkit-transition: opacity .4s linear, -webkit-transform 1s linear;
transition: opacity .4s linear, transform 1s linear;
transition: opacity .4s linear, transform 1s linear, -webkit-transform 1s linear;
-webkit-animation: none!important;
animation: none!important;
-o-object-fit: contain!important;
object-fit: contain!important
}
@media (min-width:568px) {
.responsive-design-section .responsive-design-element {
max-width: 100px
}
.nuts-list {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
gap: 40px;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
}
@media (min-width:744px) {
.counter-slider {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.counter-item {
-webkit-box-flex: 1;
-ms-flex: 1 1 0px;
flex: 1 1 0;
padding: 24px;
margin-right: 0
}
}
@media (min-width:768px) {
.new-brand-photos {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: 4px
}
.new-brand-photos .item {
padding-top: 50%;
width: calc(50% - 4px);
margin: 4px 0 0 4px
}
.new-brand-photos .item:nth-child(5) {
width: 100%
}
.photo-parallax-on-scroll {
padding-top: 60%
}
.visual-elements .right-column {
height: 600px
}
.parallax-on-mouse {
padding-top: 62.2%
}
.outcomes {
padding-left: 50px
}
.next-case-study .photo {
height: 360px
}
.nuts-list {
padding: 90px 30px
}
}
@media (min-width:1024px) {
.colored-section.color-gray {
background-color: #f3f4f6
}
.new-challenges,
.new-columns-heading,
.new-columns-heading .overview-table .row {
display: -webkit-box;
display: -ms-flexbox;
display: flex
}
.new-columns-heading .title-wrap {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
padding-right: 25px
}
.new-columns-heading .info-wrap {
-ms-flex-negative: 0;
flex-shrink: 0;
width: 65%
}
.new-columns-heading .overview-table .row {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.new-columns-heading .overview-table .name+div {
text-align: right;
padding-left: 50px
}
.new-challenges {
margin-left: 10px;
margin-right: 10px;
gap: 15px
}
.new-challenges-photo {
position: relative;
z-index: 20;
width: calc(50% - 7.5px);
padding-bottom: 0;
-ms-flex-negative: 0;
flex-shrink: 0
}
.new-challenges-photo img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover
}
.new-challenges-info {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.video-ipad-holder>img {
width: 68.3%;
margin: 0 auto
}
.video-ipad-holder .video-holder {
padding-top: .7%;
width: 48.85%;
height: 71.3%
}
.video-ipad-holder video {
border-top-left-radius: 5px;
border-top-right-radius: 5px
}
.visual-elements {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between
}
.visual-elements .left-column {
min-height: 600px;
height: auto;
-ms-flex-negative: 0;
flex-shrink: 0;
width: calc(50% - 5px);
margin-right: 10px;
padding: 80px 44px 80px 0
}
.visual-elements .right-column {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
height: auto;
padding: 0
}
.visual-elements .right-column .bg .bg-animation div {
width: 927px;
height: 63px
}
.visual-elements-list {
gap: 10px;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap
}
.visual-elements-item {
width: calc(50% - 5px)
}
.visual-elements-item.small {
width: calc((100% - 33.3%)/2 - 8px)
}
.visual-elements-item.medium {
width: calc(47% - 6px)
}
.visual-elements-item img {
-o-object-fit: cover;
object-fit: cover;
height: 100%
}
.responsive-design-section .responsive-design-element {
max-width: 150px
}
.next-case-study {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center
}
.next-case-study .photo {
margin-bottom: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
width: 45%;
margin-right: 50px
}
.nuts-list {
height: 100%;
padding: 10px;
gap: 55px
}
.nuts-item {
width: 121px;
height: 121px
}
}
@media (min-width:1200px) {
.indent-bottom { }
.indent-bottom-medium {
margin-bottom: 60px
}
.indent-top {
margin-top: 175px
}
.indent-top-medium {
margin-top: 60px
}
.colored-section {
padding: 135px 0
}
.new-container {
width: 100%;
max-width: 1085px;
margin: 0 auto
}
.new-brand-photos {
margin-right: 15px
}
.new-brand-photos .item {
margin: 15px 0 0 15px;
padding-top: 25.9%
}
.new-brand-photos .item:nth-child(1) {
width: calc(39.2% - 15px)
}
.new-brand-photos .item:nth-child(2) {
width: calc(60.8% - 15px)
}
.new-brand-photos .item:nth-child(3),
.new-brand-photos .item:nth-child(4),
.new-brand-photos .item:nth-child(5) {
width: calc(33.33% - 15px);
padding-top: 32.3%
}
.new-brand-photos .numbers-list li {
margin: 0 14px
}
.new-project-head {
padding-top: 60px
}
.new-project-head .h1,
.new-project-head h1 {
font-size: 60px;
line-height: 66px
}
.new-project-name {
margin-bottom: 42px
}
.new-project-poster {
margin-left: 15px;
margin-right: 15px
}
.new-columns-heading {
font-size: 20px;
line-height: 28px
}
.new-columns-heading .info-wrap {
width: 59.2%
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) {
padding-left: 32px;
padding-top: 96px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block)::before {
width: 64px;
height: 64px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) p {
margin-bottom: 32px
}
.new-columns-heading .intro { }
.new-columns-heading .overview-table {
font-size: 18px;
line-height: 28px;
margin-top: 60px;
padding-top: 70px
}
.new-columns-heading .overview-table:before {
width: 284px
}
.new-columns-heading .overview-table .row {
padding-bottom: 30px;
margin-bottom: 30px
}
.new-challenges {
margin-left: 15px;
margin-right: 15px
}
.photo-parallax-on-scroll {
padding-top: 49.5%
}
.video-ipad-holder video {
border-top-left-radius: 7px;
border-top-right-radius: 7px
}
.visual-elements {
min-height: calc(100vw*.571)
}
.visual-elements .left-column {
padding: 100px 75px 100px 0
}
.visual-elements .right-column .bg .bg-animation div {
width: 1158px;
height: 77px
}
.responsive-design-section {
padding-top: 50px
}
.responsive-design-section:after {
height: 520px
}
.responsive-design-section .decor {
max-height: 520px
}
.responsive-design-section .responsive-design-element {
max-width: 200px
}
.responsive-design-section .responsive-design-bg {
width: 785px;
height: 384px
}
.responsive-design-section .responsive-design-phone-mask {
width: 359px;
height: 600px
}
.responsive-design-section .mobile-photo {
top: 8px;
height: 500px
}
.outcomes {
padding-left: 41.6%;
min-height: 640px;
margin-left: 15px;
margin-right: 15px
}
.outcomes .wrap {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.outcomes .button {
min-width: 219px
}
.counter-slider {
margin-bottom: 18px
}
.counter-item {
padding: 40px
}
.counter-item .number {
font-size: 76px;
letter-spacing: -3.8px
}
.next-case-study .intro svg {
margin-top: 30px
}
.next-case-study .photo {
width: 39%
}
.next-case-study .name {
margin-bottom: 30px
}
.next-case-study .intro {
font-size: 40px;
line-height: 46px
}
.aside-nav {
display: block;
position: sticky;
left: 0;
top: 50vh;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
border-radius: 4px;
background: #fff;
-webkit-box-shadow: 0 3px 9px 0 rgba(27, 37, 70, .12);
box-shadow: 0 3px 9px 0 rgba(27, 37, 70, .12);
width: 24px;
padding: 8px;
z-index: 100;
pointer-events: all
}
.nuts-item {
width: 141px;
height: 141px
}
}
@media (min-width:1440px) {
.new-container {
padding: 0;
max-width: 1250px
}
.new-challenges {
gap: 10px
}
.new-challenges-photo {
width: calc(50% - 5px)
}
.video-ipad-holder video {
border-top-left-radius: 10px;
border-top-right-radius: 10px
}
.visual-elements .right-column .bg .bg-animation div {
width: 1312px;
height: 87px
}
.outcomes {
min-height: calc(100vh + 13px);
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
padding-bottom: 80px
}
.nuts-item {
width: 171px;
height: 171px
}
}
@media (min-width:1800px) {
.indent-bottom { }
.indent-bottom-medium {
margin-bottom: 80px
}
.indent-top {
margin-top: 250px
}
.indent-top-medium {
margin-top: 80px
}
.colored-section {
padding: 185px 0
}
.new-container {
max-width: 1570px
}
.new-project-head {
padding-top: 60px
}
.new-project-head .h1,
.new-project-head h1 {
font-size: 60px;
line-height: 66px;
padding-right: 200px
}
.new-columns-heading blockquote:not(.fact):not(.marked-block) { }
.new-columns-heading blockquote:not(.fact):not(.marked-block) p { }
.new-columns-heading .overview-table .row {
padding-bottom: 38px;
margin-bottom: 41px;
padding-right: 15px
}
.video-ipad-holder {
background-position-y: 60px
}
.video-ipad-holder video {
border-top-left-radius: 13px;
border-top-right-radius: 13px
}
.visual-elements .right-column .bg .bg-animation div {
width: 1550px;
height: 105px
}
.responsive-design-section:after {
height: 800px
}
.responsive-design-section .decor {
max-height: 800px
}
.responsive-design-section .responsive-design-element {
max-width: 300px
}
.responsive-design-section .responsive-design-bg {
width: 1172px;
height: 579px
}
.responsive-design-section .responsive-design-phone-mask {
width: 538px;
height: 899px
}
.responsive-design-section .mobile-photo {
height: 745px;
top: 14px
}
.outcomes {
min-height: 960px
}
.counter-slider {
padding-right: 95px
}
.counter-item .number {
font-size: 100px;
line-height: 1;
letter-spacing: -1px
}
.next-case-study .photo {
height: 440px;
margin-right: 110px
}
.next-case-study .intro {
font-size: 60px;
line-height: 66px;
font-weight: 400
}
.nuts-item {
width: 218px;
height: 218px
}
}
@media (min-width:2400px) {
.nuts-item {
width: 268px;
height: 268px
}
}
@media (max-width:1023px) {
.new-columns-heading .overview-table .name {
opacity: .4;
margin-bottom: 12px
}
.visual-elements .right-column {
margin-top: 4px
}
}
@media (max-width:767px) {
.new-brand-photos .item+.item {
margin-top: 4px
}
.video-ipad-holder {
margin-bottom: 160px
}
}
@media (max-width:743px) {
.counter-item {
min-width: 242px;
max-width: 242px
}
}