@-webkit-keyframes loaderRotation {
    0% {
        transform: rotate(0deg)
    }

    90%,
    to {
        transform: rotate(180deg)
    }
}

@keyframes loaderRotation {
    0% {
        transform: rotate(0deg)
    }

    90%,
    to {
        transform: rotate(180deg)
    }
}

@-webkit-keyframes heroArgumentsBar {

    0%,
    30%,
    to {
        transform: translateY(0)
    }

    33%,
    63% {
        transform: translateY(200%)
    }

    66%,
    96% {
        transform: translateY(400%)
    }
}

@keyframes heroArgumentsBar {

    0%,
    30%,
    to {
        transform: translateY(0)
    }

    33%,
    63% {
        transform: translateY(200%)
    }

    66%,
    96% {
        transform: translateY(400%)
    }
}

@-webkit-keyframes heroArgumentsParagraph {

    0%,
    30%,
    to {
        transform: translateY(-24px);
        opacity: 0
    }

    33%,
    63% {
        transform: translateY(0);
        opacity: 1
    }

    66%,
    96% {
        transform: translateY(24px);
        opacity: 0
    }
}

@keyframes heroArgumentsParagraph {

    0%,
    30%,
    to {
        transform: translateY(-24px);
        opacity: 0
    }

    33%,
    63% {
        transform: translateY(0);
        opacity: 1
    }

    66%,
    96% {
        transform: translateY(24px);
        opacity: 0
    }
}

@-webkit-keyframes handDownAnimation {

    0%,
    80%,
    to {
        transform: rotate(180deg) rotateY(180deg) translateY(-.425em) translateY(0)
    }

    40% {
        transform: rotate(180deg) rotateY(180deg) translateY(-.425em) translateY(-20%)
    }
}

@keyframes handDownAnimation {

    0%,
    80%,
    to {
        transform: rotate(180deg) rotateY(180deg) translateY(-.425em) translateY(0)
    }

    40% {
        transform: rotate(180deg) rotateY(180deg) translateY(-.425em) translateY(-20%)
    }
}

@font-face {
    font-family: 'Mont';
    src: url(../fonts/mont_book-webfont.woff2) format('woff2'), url(../fonts/mont_book-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Mont';
    src: url(../fonts/fontfabric_-_mont_bold-webfont.woff2) format('woff2'), url(../fonts/fontfabric_-_mont_bold-webfont.woff) format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Mont';
    src: url(../fonts/fontfabric_-_mont_book_italic-webfont.woff2) format('woff2'), url(../fonts/fontfabric_-_mont_book_italic-webfont.woff) format('woff');
    font-weight: 400;
    font-style: italic;
    font-display: swap
}

@font-face {
    font-family: 'Mont';
    src: url(../fonts/fontfabric_-_mont_heavy-webfont.woff2) format('woff2'), url(../fonts/fontfabric_-_mont_heavy-webfont.woff) format('woff');
    font-weight: 900;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Pixer';
    src: url(../fonts/pixer-regular-webfont.woff2) format('woff2'), url(../fonts/pixer-regular-webfont.woff) format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

p {
    margin: 0 0 4px;
    line-height: 1.6
}

body.about section.partners h3,
body.home section.partners h3,
p.highlight {
    font-weight: 700
}

p.italic {
    font-style: italic
}

code {
    font-family: 'Pixer', sans-serif
}

h2,
h3 {
    font-size: 6rem;
    font-weight: 900;
    margin: 0
}

h3 {
    font-size: 3rem;
    margin: 16px 0
}

h4,
h5,
h6 {
    font-weight: 400
}

h2,
h4 {
    letter-spacing: .5rem
}

h4 {
    font-size: 2rem;
    text-transform: uppercase;
    margin: 8px 0
}

h5,
h6 {
    margin: 0
}

h3,
h5 {
    letter-spacing: .25rem
}

h5 {
    font-size: 1.5rem
}

h6 {
    font-style: italic
}

@media screen and (max-width:560px) {

    h2,
    h4 {
        font-size: 5rem;
        letter-spacing: .42rem
    }

    h4 {
        font-size: 1.5rem
    }

    h5 {
        font-size: 1.2rem;
        letter-spacing: .2rem
    }
}

@media screen and (max-width:450px) {
    h2 {
        font-size: 4rem;
        letter-spacing: .33rem
    }
}

a {
    color: #fff;
    text-decoration: none
}

.startButton,
a.discoverButton {
    font-weight: 900;
    text-transform: uppercase
}

a.discoverButton {
    padding: 16px 32px;
    background: rgba(255, 255, 255, .33);
    border-radius: 40px;
    letter-spacing: 4px;
    text-shadow: 0 1px 10px rgba(255, 255, 255, .33);
    box-shadow: 0 1px 10px rgba(255, 255, 255, .33);
    transition: opacity .3s cubic-bezier(.77, 0, .18, 1), transform .3s cubic-bezier(.77, 0, .18, 1)
}

a.discoverButton:hover {
    opacity: .8;
    transform: scale(1.05)
}

.startButton {
    -webkit-appearance: none;
    border: 0;
    position: relative;
    padding: 8px 32px;
    font-size: 1.5rem;
    letter-spacing: .2em;
    border-radius: 32px;
    background: #09090b;
    color: #fc957e
}

.startButton .mousePointer {
    position: absolute;
    top: calc(100% - 8px);
    left: calc(50% - 40px);
    height: 80px;
    width: 80px;
    background: url(../images/general/mousePointer.svg) no-repeat center;
    background-size: contain
}

button[type=submit].startButton {
    cursor: pointer;
    padding: 12px 32px;
    font-size: 1rem;
    background: #fff;
    color: #09090b
}

button[type=submit].startButton .mousePointer {
    background: url(../images/general/mousePointerPink.svg) no-repeat center;
    background-size: contain
}

.gaxIcon {
    background: url(../images/general/logo_gax_studio.svg) no-repeat center;
    background-size: contain
}

.gaxIcon.black {
    background: url(../images/general/logo_gax_studio_black.svg) no-repeat center;
    background-size: contain
}

.gaxIcon.gaxIconTag {
    width: 64px;
    height: 32px;
    background-color: #fff;
    background-size: 80%;
    transform: rotate(-90deg)
}

.imaginaryIcon {
    background: url(../images/general/imaginary.svg) no-repeat center;
    background-size: contain
}

.digitalIcon {
    background: url(../images/general/digital.svg) no-repeat center;
    background-size: contain
}

.brandingIcon {
    background: url(../images/general/branding.svg) no-repeat center;
    background-size: contain
}

body,
html {
    margin: 0;
    padding: 0
}

html {
    font-size: 15px
}

body {
    background: #09090b;
    color: #fff;
    font-family: "Mont", sans-serif;
    font-size: 1rem;
    overflow-x: hidden
}

main {
    min-height: 50vh
}

.taglineBlock {
    font-size: 12rem
}

.taglineBlock .row {
    height: .9em;
    line-height: .9em
}

.taglineBlock .row:last-of-type {
    margin-left: 1.16em;
    margin-right: .5em
}

.taglineBlock span {
    font-weight: 900;
    text-transform: uppercase
}

.taglineBlock span.detail {
    line-height: normal;
    padding-left: 1.5em;
    display: inline-block;
    font-size: .13em;
    vertical-align: super;
    transform: translateX(-40%) translateY(140%) rotate(90deg);
    position: absolute
}

.scrollBanner {
    transform: rotate(-2deg) skew(-12deg);
    width: 100vw
}

.scrollBanner h2 {
    font-size: 9rem;
    width: 5000vw;
    white-space: nowrap;
    text-shadow: 0 3px 15px rgba(255, 255, 255, .3);
    color: rgba(0, 0, 0, .7);
    -webkit-text-stroke: 2px #fff;
    text-transform: uppercase
}

.contentContainer {
    height: 100vh;
    width: 100vw;
    position: fixed;
    overflow: hidden
}

.contentContainer .contentBox {
    will-change: transform, opacity
}

#js-contentBox {
    transition: opacity .4s cubic-bezier(.77, 0, .18, 1);
    opacity: 1
}

body.about section.whoWeAre .studio .sliderBox .sliderPoints .point.current::after,
body.digital .howWeDo .playground p.specifications span.textLine span,
body.home section.whoWeAre .studio .sliderBox .sliderPoints .point.current::after,
html.is-animating #js-contentBox {
    opacity: 0
}

@media screen and (max-width:960px) {
    .startButton .mousePointer {
        width: 64px;
        height: 64px
    }
}

@media screen and (max-width:560px) {
    .startButton .mousePointer {
        width: 40px;
        height: 40px
    }
}

@media (pointer:coarse) {
    .startButton .mousePointer {
        transform: translateX(-60%) translateY(-20%) rotate(-20deg) !important;
        left: 100%
    }
}

@media screen and (max-width:740px) {
    body {
        font-size: .95rem
    }
}

@media screen and (max-width:560px) {
    body {
        font-size: .9rem
    }
}

@media (pointer:coarse) {
    .contentContainer {
        height: auto;
        position: static
    }

    .contentContainer .contentBox {
        transform: none !important;
        will-change: opacity
    }

    .js-static {
        transform: none !important;
        position: fixed !important
    }
}

body.digital footer,
body.digital section.footerCallToAction,
body.digital section.projects .controlPointBox .controlPoint::after {
    background: red!important;
}

body.digital footer .startButton,
body.digital section.footerCallToAction .startButton,
body.digital section.projects .twoRowSection .info h4 {
    color: red!important;
}

body.branding footer,
body.branding section.footerCallToAction,
body.branding section.projects .controlPointBox .controlPoint::after {
    background: #ffb8c8
}

body.branding b,
body.branding footer .startButton,
body.branding section.footerCallToAction .startButton,
body.branding section.projects .twoRowSection .info h4 {
    color: #ffb8c8
}

body.imaginary footer,
body.imaginary section.footerCallToAction,
body.imaginary section.projects .controlPointBox .controlPoint::after {
    background: #c5a8d2
}

body.imaginary footer .startButton,
body.imaginary section.footerCallToAction .startButton,
body.imaginary section.projects .twoRowSection .info h4 {
    color: #c5a8d2
}

footer {
    background: #fc957e;
    padding: 160px 80px;
    display: flex;
    align-items: center
}

footer .companyInformations {
    color: #09090b;
    padding-right: 80px;
    border-right: 1px solid #09090b
}

footer .companyLogo {
    width: 80px;
    margin-right: 40px
}

footer .linksLibrary {
    display: flex;
    flex-direction: column;
    padding-left: 80px;
    flex-wrap: wrap
}

footer .linksLibrary a {
    padding: 2px 0;
    margin: 2px 0;
    font-weight: 700
}

footer .linksLibrary.black a {
    color: #09090b
}

footer .socialLinks {
    flex: 1;
    justify-content: flex-end
}

section.footerCallToAction {
    position: relative;
    background: #fc957e;
    padding: 160px 80px 0
}

body.digital .howWeDo .playground .uiBuilder .row .block .ui-only,
nav ul.sections>li.js-menuLinkWithSublinks ul.sublinks,
section.footerCallToAction .socialLinks {
    display: none
}

section.footerCallToAction .localisation {
    position: absolute;
    left: -40px;
    top: -240px;
    width: 400px;
    height: 400px;
    mix-blend-mode: overlay;
    opacity: .33;
    background-position: left center
}

section.footerCallToAction a.startButton {
    position: absolute;
    right: 160px;
    top: 240px
}

header {
    position: fixed;
    z-index: 100;
    top: 0;
    left: 0;
    right: 0;
    padding: 24px 40px 16px;
    justify-content: space-between
}

header.miniaturized {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

header.miniaturized .gax span.tagline {
    opacity: 0;
    transform: translateX(-8px)
}

header,
header .gax {
    display: flex;
    align-items: center
}

header .gax .logo {
    width: 56px
}

header .gax span.tagline {
    margin-left: 20px;
    padding-left: 20px;
    border-left: 1px solid #fff;
    transition: opacity .3s cubic-bezier(.77, 0, .18, 1), transform .3s cubic-bezier(.77, 0, .18, 1)
}

header .services {
    position: absolute;
    left: calc(50vw - (1.5*44px))
}

header .services a {
    padding: 8px 4px;
    margin: 0 4px
}

header .services a img {
    width: 16px;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

header .services a:nth-of-type(1):hover img {
    transform: rotateZ(45deg) translateY(4px)
}

header .services a:nth-of-type(2):hover img {
    transform: translateY(-2px) rotate(-45deg)
}

header .services a:nth-of-type(3):hover img {
    transform: rotateZ(-20deg) translateX(4px)
}

header .menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 4px
}

header .menu .row {
    width: 100%;
    height: 3px;
    margin: 3px 0;
    will-change: transform;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

header .menu .row:nth-of-type(1) {
    transform-origin: left top
}

header .menu .row:nth-of-type(2) {
    transform-origin: center
}

header .menu .row:nth-of-type(3) {
    transform-origin: right bottom
}

header .menu .row.plain {
    background: #fff
}

header .menu .row.group {
    display: flex;
    justify-content: space-between
}

header .menu .row .part {
    background: #fff;
    height: 100%;
    will-change: transform;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

header .menu .row .part:nth-of-type(1) {
    width: 12px;
    transform-origin: left center
}

header .menu .row .part:nth-of-type(2) {
    width: 20px;
    transform-origin: right center
}

header .menu:hover .row .part:nth-of-type(1) {
    transform: scaleX(1.5)
}

header .menu:hover .row .part:nth-of-type(2) {
    transform: scaleX(.66)
}

nav,
nav ul {
    flex-direction: column
}

nav {
    pointer-events: none;
    position: fixed;
    z-index: 50;
    right: 0;
    top: 0;
    bottom: 0;
    padding: 120px 40px 64px 64px;
    box-sizing: border-box;
    background: rgba(0, 0, 0, .5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transform: translateX(40px);
    opacity: 0;
    will-change: transform, opacity;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79), opacity .3s cubic-bezier(.48, -.07, .52, 1.79)
}

nav ul {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: right
}

nav ul li {
    font-weight: 900;
    font-size: 4rem;
    text-transform: uppercase;
    letter-spacing: 8px;
    padding: 24px 0 0 48px
}

nav ul.sections>li {
    cursor: pointer
}

nav ul.sections>li::after {
    content: '';
    display: block;
    margin-left: auto;
    margin-top: 24px;
    width: 120px;
    height: 1px;
    background: rgba(255, 255, 255, .6)
}

nav,
nav ul,
nav ul.sections>li.js-menuLinkWithSublinks.open ul.sublinks {
    display: flex
}

nav ul.sections>li.js-menuLinkWithSublinks ul.sublinks>li {
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 4px
}

nav ul.sections>li.js-menuLinkWithSublinks ul.sublinks>li:first-of-type {
    padding-top: 8px
}

nav .navFooter {
    display: flex;
    align-items: center;
    justify-content: space-between
}

nav .navFooter img.logo {
    width: 64px
}

body.menuOpen header .menu .row:nth-of-type(1) {
    transform: scaleX(0)
}

body.menuOpen header .menu .row:nth-of-type(2) {
    transform: rotate(-45deg)
}

body.menuOpen header .menu .row:nth-of-type(3) {
    transform: rotate(45deg) translateY(8px) translateX(-2px)
}

body.menuOpen header .menu .row .part:nth-of-type(1) {
    transform: scaleX(3)
}

body.menuOpen header .menu .row .part:nth-of-type(2) {
    transform: scaleX(0)
}

body.menuOpen nav {
    pointer-events: auto;
    transform: translateX(0);
    opacity: 1
}

html.is-animating header {
    pointer-events: none
}

html.is-animating .contentContainer {
    filter: blur(15px) brightness(.8);
    transform: translateZ(0);
    transition: filter .3s cubic-bezier(.77, 0, .18, 1)
}

html.is-animating .loader {
    opacity: 1;
    transition: opacity .3s cubic-bezier(.77, 0, .18, 1)
}

.contentContainer {
    transition: filter 1s .5s cubic-bezier(.77, 0, .18, 1)
}

.loader {
    pointer-events: none;
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 1s .5s cubic-bezier(.77, 0, .18, 1)
}

.loader .loaderBackground {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: url(../images/home/gax_colors.jpg) no-repeat center;
    background-size: 200% auto;
    opacity: .56
}

.loader,
.loader .loaderLogo,
.quote {
    display: flex
}

.loader .loaderLogo .main,
.loader .loaderLogo .x {
    background: url(../images/general/logo_gax_studio_black.svg) no-repeat center;
    background-size: auto 100%;
    height: 36px
}

.loader .loaderLogo .main {
    width: 76.8px;
    background-position: left
}

.loader .loaderLogo .x {
    width: 32.4px;
    background-position: right;
    -webkit-animation: loaderRotation 2s cubic-bezier(.77, 0, .18, 1) infinite backwards;
    animation: loaderRotation 2s cubic-bezier(.77, 0, .18, 1) infinite backwards
}

section.projects {
    padding: 80px 0 240px
}

section.projects .twoRowSection {
    display: flex;
    align-items: center
}

section.projects .twoRowSection .info {
    height: 100%;
    width: 35vw;
    padding: 0 80px 80px;
    box-sizing: border-box
}

section.projects .twoRowSection .info h4 {
    color: #fc957e;
    font-weight: 700;
    font-size: 2.5rem
}

section.projects .twoRowSection .projectsBox {
    position: relative;
    width: 65vw;
    padding-left: 120px;
    overflow: hidden
}

section.projects .twoRowSection .projectsBox .projectArrow {
    cursor: pointer;
    width: 160px;
    position: absolute;
    z-index: 5;
    top: 0;
    bottom: 0;
    background: linear-gradient(to right, rgba(9, 9, 11, 0) 0, #09090b 100%)
}

section.projects .twoRowSection .projectsBox .projectArrow::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/general/arrow.svg) no-repeat center;
    background-size: 40px 40px
}

section.projects .twoRowSection .projectsBox .projectArrow.right {
    right: 0
}

section.projects .twoRowSection .projectsBox .projectArrow.left {
    left: 0;
    transform: rotate(180deg)
}

section.projects .twoRowSection .projectsBox .projectsContainer {
    display: inline-flex;
    height: 29.124000000000002vw;
    will-change: transform;
    transition: transform .5s cubic-bezier(.77, 0, .18, 1)
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 18vw;
    height: 100%;
    margin-right: 20px
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project:hover::after {
    opacity: .4
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project:hover .content {
    transform: translateY(-8px)
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project:hover .content .serviceIcon {
    transform: rotateY(180deg)
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project .projectImage,
section.projects .twoRowSection .projectsBox .projectsContainer a.project::after {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project::after {
    z-index: -1;
    content: '';
    background: #09090b;
    opacity: .3;
    will-change: opacity;
    transition: opacity .3s cubic-bezier(.48, -.07, .52, 1.79)
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project .projectImage {
    z-index: -2;
    -o-object-fit: cover;
    object-fit: cover
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project .content {
    text-align: center;
    will-change: transform;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project .content .serviceIcon {
    width: 20px;
    margin: 0 auto 16px;
    will-change: transform;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

section.projects .twoRowSection .projectsBox .projectsContainer a.project .content .title {
    width: calc(100% - 32px);
    text-align: center;
    padding: 16px 0;
    margin: 0 16px;
    border-top: 1px solid #fff
}

section.projects .controlPointBox {
    margin-top: 80px;
    position: relative
}

section.projects .controlPointBox .controlLine {
    width: 100%;
    height: 1px;
    background: #fff
}

section.projects .controlPointBox .controlPoint {
    position: absolute;
    left: -24px;
    top: -24px;
    padding: 16px;
    will-change: transform;
    transition: transform .5s cubic-bezier(.77, 0, .18, 1)
}

section.projects .controlPointBox .controlPoint::after {
    content: '';
    display: block;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #fc957e
}

.quote {
    position: relative;
    justify-content: flex-end
}

.quote p {
    position: absolute !important;
    z-index: 5;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    font-style: italic;
    letter-spacing: 2px
}

.quote p::after,
.quote p::before {
    content: '';
    display: block;
    width: 48px;
    height: 32px;
    background: url(../images/home/quote.svg) no-repeat center;
    background-size: 100%
}

.quote p::before {
    transform: translate(-125%, -25%)
}

.quote p::after {
    opacity: .7;
    margin-left: auto;
    transform: translate(125%, 25%) scale(-1)
}

.socialLinks {
    display: flex;
    align-items: center
}

.socialLinks a {
    padding: 8px;
    margin: 0 4px
}

.socialLinks a img {
    height: 20px;
    display: block;
    will-change: transform;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

.socialLinks a:hover img,
body.about section.whoWeAre .person .description .links a:hover img,
body.about section.whoWeAre .studio .description .links a:hover img,
body.home section.whoWeAre .person .description .links a:hover img,
body.home section.whoWeAre .studio .description .links a:hover img {
    transform: translateY(-4px)
}

@media screen and (max-width:1140px) {
    footer {
        flex-wrap: wrap;
        justify-content: center
    }

    footer .companyInformations {
        order: 5;
        width: 100%;
        text-align: center;
        margin: 32px 0 0;
        font-size: .8rem;
        border: 0;
        padding-right: 0
    }

    footer .linksLibrary.services {
        border-left: 1px solid #09090b
    }
}

@media screen and (max-width:960px) {
    footer .linksLibrary {
        padding-left: 40px
    }
}

@media screen and (max-width:850px) {
    footer .socialLinks {
        display: none
    }
}

@media screen and (max-width:740px) {
    footer {
        padding: 80px 40px
    }
}

@media screen and (max-width:560px) {
    footer .companyLogo {
        width: 64px
    }

    footer .linksLibrary {
        font-size: .8rem
    }

    footer .linksLibrary a {
        font-weight: 400
    }
}

@media screen and (max-width:450px) {
    footer {
        padding: 40px 24px
    }

    footer .companyLogo {
        width: 48px;
        margin-right: 24px
    }

    footer .linksLibrary {
        padding-left: 24px
    }
}

@media screen and (min-width:1480px) {
    footer {
        padding: 160px 120px
    }

    footer .companyInformations {
        padding-right: 120px
    }

    footer .linksLibrary {
        padding-left: 120px
    }
}

@media screen and (min-width:1660px) {
    footer {
        padding: 160px
    }

    footer .companyInformations {
        padding-right: 140px
    }

    footer .linksLibrary {
        padding-left: 140px
    }
}

@media screen and (min-width:1840px) {
    footer {
        padding: 160px 200px
    }

    footer .companyInformations {
        padding-right: 160px
    }

    footer .linksLibrary {
        padding-left: 160px
    }
}

@media screen and (max-width:1320px) {
    section.footerCallToAction .taglineBlock {
        font-size: 10rem
    }
}

@media screen and (max-width:1140px) {
    section.footerCallToAction .taglineBlock {
        font-size: 8rem
    }

    section.footerCallToAction a.startButton {
        right: 80px
    }
}

@media screen and (max-width:960px) {
    section.footerCallToAction .localisation {
        top: -200px;
        width: 320px;
        height: 320px
    }

    section.footerCallToAction .taglineBlock {
        font-size: 6rem
    }
}

@media screen and (max-width:850px) {
    section.footerCallToAction .taglineBlock {
        font-size: 4rem
    }

    section.footerCallToAction a.startButton {
        top: 200px
    }
}

@media screen and (max-width:740px) {
    section.footerCallToAction {
        padding: 80px 40px 0
    }

    section.footerCallToAction .localisation {
        top: -160px;
        width: 240px;
        height: 240px
    }

    section.footerCallToAction a.startButton {
        top: 120px
    }
}

@media screen and (max-width:560px) {
    section.footerCallToAction {
        padding: 80px 40px 40px
    }

    section.footerCallToAction .localisation {
        width: 280px;
        height: 280px
    }

    section.footerCallToAction .socialLinks {
        display: flex;
        justify-content: center;
        margin-bottom: 40px
    }

    section.footerCallToAction .taglineParent {
        display: flex;
        justify-content: center
    }

    section.footerCallToAction .taglineParent .taglineBlock {
        font-size: 16vw
    }

    section.footerCallToAction .contactZone {
        display: flex;
        justify-content: center;
        margin-top: 40px
    }

    section.footerCallToAction .contactZone a.startButton {
        position: relative;
        top: unset;
        right: unset;
        display: block
    }
}

@media screen and (max-width:450px) {
    section.footerCallToAction .localisation {
        width: 240px;
        height: 240px
    }
}

@media screen and (min-width:1480px) {
    section.footerCallToAction {
        padding: 160px 120px 0
    }

    section.footerCallToAction .taglineBlock {
        font-size: 12vw
    }

    section.footerCallToAction a.startButton {
        right: 200px;
        font-size: 1.5vw;
        padding: 12px 48px
    }

    section.footerCallToAction a.startButton .mousePointer {
        width: 6vw;
        height: 6vw
    }
}

@media screen and (min-width:1660px) {
    section.footerCallToAction {
        padding: 160px 160px 0
    }

    section.footerCallToAction a.startButton {
        right: 240px
    }
}

@media screen and (min-width:1840px) {
    section.footerCallToAction {
        padding: 200px 200px 0
    }

    section.footerCallToAction a.startButton {
        right: 280px
    }
}

@media screen and (max-width:850px) {
    header .services {
        display: none
    }
}

@media screen and (max-width:740px) {
    nav {
        left: 0
    }
}

@media screen and (max-width:560px) {
    nav {
        padding: 120px 40px 64px
    }

    nav ul li {
        padding-left: 0
    }
}

@media screen and (max-width:450px) {
    nav ul li {
        font-size: 3rem
    }

    header .gax .tagline {
        display: none
    }
}

@media (orientation:portrait) {
    .loader .loaderBackground {
        background-size: auto 200%
    }
}

@media screen and (max-width:960px) {
    section.projects .twoRowSection .info h4 {
        font-size: 2rem
    }
}

@media screen and (max-width:850px) {
    section.projects .twoRowSection {
        flex-direction: column;
        align-items: flex-start
    }

    section.projects .twoRowSection .info {
        width: auto;
        padding: 0 40px 40px
    }

    section.projects .twoRowSection .projectsBox {
        width: 100vw;
        padding: 0 40px 0 120px;
        box-sizing: border-box
    }

    section.projects .twoRowSection .projectsBox .projectsContainer {
        height: 40.45vw
    }

    section.projects .twoRowSection .projectsBox .projectsContainer a.project {
        width: 25vw
    }
}

@media screen and (max-width:740px) {
    section.projects .twoRowSection .projectsBox .projectsContainer {
        height: 48.540000000000006vw
    }

    section.projects .twoRowSection .projectsBox .projectsContainer a.project {
        width: 30vw
    }
}

@media screen and (max-width:560px) {
    section.projects .twoRowSection .projectsBox {
        padding-left: 80px
    }

    section.projects .twoRowSection .projectsBox .projectArrow {
        width: 80px
    }

    section.projects .twoRowSection .projectsBox .projectsContainer {
        height: 64.72vw
    }

    section.projects .twoRowSection .projectsBox .projectsContainer a.project {
        width: 40vw
    }
}

@media screen and (max-width:450px) {
    section.projects .twoRowSection .projectsBox .projectsContainer {
        height: 97.08000000000001vw
    }

    section.projects .twoRowSection .projectsBox .projectsContainer a.project {
        width: 60vw
    }
}

@media screen and (min-width:1480px) {
    section.projects .twoRowSection .info {
        padding: 0 0 160px 120px
    }
}

@media screen and (min-width:1660px) {
    section.projects .twoRowSection .info {
        padding: 0 0 200px 160px
    }

    section.projects .twoRowSection .projectsBox .projectsContainer {
        height: 25.888vw
    }

    section.projects .twoRowSection .projectsBox .projectsContainer a.project {
        width: 16vw
    }
}

@media screen and (min-width:1840px) {
    section.projects .twoRowSection .info {
        padding: 0 0 240px 200px
    }

    section.projects .twoRowSection .projectsBox .projectsContainer {
        height: 22.652vw
    }

    section.projects .twoRowSection .projectsBox .projectsContainer a.project {
        width: 14vw
    }
}

body.about section.hero,
body.home section.hero {
    position: relative;
    z-index: 10;
    height: 100vh;
    width: 100vw;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center
}

body.about section.hero h2,
body.home section.hero h2 {
    margin-right: 80px;
    mix-blend-mode: soft-light;
    order: -1
}

body.about section.hero h2 span,
body.home section.hero h2 span {
    height: 7rem;
    display: block
}

body.about section.hero h2 span:nth-of-type(n+2),
body.home section.hero h2 span:nth-of-type(n+2) {
    text-align: right
}

body.about section.hero h2 span:last-of-type,
body.home section.hero h2 span:last-of-type {
    position: relative
}

body.about section.hero h2 span:last-of-type::after,
body.home section.hero h2 span:last-of-type::after {
    content: '.';
    position: absolute;
    left: 100%
}

body.about section.hero .arguments,
body.home section.hero .arguments {
    position: relative;
    display: flex;
    align-items: center;
    height: 16vh;
    margin-left: 40px;
    width: 20vw
}

body.about section.hero .arguments::after,
body.about section.hero .arguments::before,
body.home section.hero .arguments::after,
body.home section.hero .arguments::before {
    content: '';
    display: block;
    position: absolute;
    border-radius: 2px;
    background: #fff
}

body.about section.hero .arguments::before,
body.home section.hero .arguments::before {
    left: -41px;
    width: 2px;
    height: 100%;
    mix-blend-mode: soft-light
}

body.about section.hero .arguments::after,
body.home section.hero .arguments::after {
    left: -42px;
    width: 4px;
    top: 10%;
    height: 15%;
    -webkit-animation: heroArgumentsBar 10s infinite;
    animation: heroArgumentsBar 10s infinite
}

body.about section.hero .arguments p,
body.home section.hero .arguments p {
    position: absolute;
    opacity: 0;
    left: 0;
    mix-blend-mode: soft-light;
    transform: translateY(-24px);
    -webkit-animation: heroArgumentsParagraph 10s infinite;
    animation: heroArgumentsParagraph 10s infinite
}

body.about section.hero .arguments p strong,
body.about section.mainServices .serviceView .content h2 span,
body.about section.welcomeToGax .welcome span,
body.home section.hero .arguments p strong,
body.home section.mainServices .serviceView .content h2 span,
body.home section.welcomeToGax .welcome span {
    display: block
}

body.about section.hero .arguments p span,
body.home section.hero .arguments p span {
    font-style: italic
}

body.about section.hero .arguments p:first-of-type,
body.home section.hero .arguments p:first-of-type {
    -webkit-animation-delay: -3.3s;
    animation-delay: -3.3s
}

body.about section.hero .arguments p:last-of-type,
body.home section.hero .arguments p:last-of-type {
    -webkit-animation-delay: 3.3s;
    animation-delay: 3.3s
}

body.about section.hero .Colors,
body.home section.hero .Colors {
    pointer-events: none;
    position: absolute;
    z-index: -1;
    width: max(100vw, 100vh);
    height: max(100vw, 100vh);
    top: calc((max(100vw, 100vh) - 100vh)/-2);
    left: calc((max(100vw, 100vh) - 100vw)/-2);
    filter: blur(5px);
    transform: translateZ(0);
    will-change: transform
}

body.about section.hero .Colors img,
body.home section.hero .Colors img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
    object-fit: contain
}

body.about section.hero .gaxIconTag,
body.home section.hero .gaxIconTag {
    position: absolute;
    right: 40px;
    top: calc(50% - 16px)
}

body.about section.hero .mouseIcon,
body.home section.hero .mouseIcon {
    opacity: .5;
    width: 20px;
    height: 36px;
    border-radius: 18px;
    position: absolute;
    left: calc(50% - 10px);
    bottom: 40px;
    border: 2px solid #fff
}

body.about section.hero .mouseIcon:hover::after,
body.home section.hero .mouseIcon:hover::after {
    transform: translateY(4px)
}

body.about section.hero .mouseIcon::after,
body.home section.hero .mouseIcon::after {
    content: '';
    display: block;
    width: 2px;
    height: 8px;
    border-radius: 1px;
    background: #fff;
    position: absolute;
    top: 10px;
    left: 9px;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

body.about section.hero .socialLinks,
body.home section.hero .socialLinks {
    opacity: .7;
    flex-direction: column-reverse;
    position: absolute;
    left: 40px;
    bottom: 40px
}

body.about section.hero .socialLinks a,
body.home section.hero .socialLinks a {
    margin: 8px 0
}

body.about section.hero .socialLinks a:nth-of-type(1),
body.home section.hero .socialLinks a:nth-of-type(1) {
    opacity: 1
}

body.about section.hero .socialLinks a:nth-of-type(2),
body.home section.hero .socialLinks a:nth-of-type(2) {
    opacity: .7
}

body.about section.hero .socialLinks a:nth-of-type(3),
body.home section.hero .socialLinks a:nth-of-type(3) {
    opacity: .4
}

body.about section.mainServices,
body.home section.mainServices {
    height: 450vh
}

body.about section.mainServices .serviceView,
body.home section.mainServices .serviceView {
    pointer-events: none;
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

body.about section.mainServices .serviceView .branding,
body.about section.mainServices .serviceView .digital,
body.about section.mainServices .serviceView .imaginary,
body.home section.mainServices .serviceView .branding,
body.home section.mainServices .serviceView .digital,
body.home section.mainServices .serviceView .imaginary {
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px);
    transition: transform .3s cubic-bezier(.77, 0, .18, 1), opacity .3s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView .branding.background,
body.about section.mainServices .serviceView .digital.background,
body.about section.mainServices .serviceView .imaginary.background,
body.home section.mainServices .serviceView .branding.background,
body.home section.mainServices .serviceView .digital.background,
body.home section.mainServices .serviceView .imaginary.background {
    transition: opacity .7s 0s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-1,
body.about section.mainServices .serviceView.step-1 .branding.infobar,
body.about section.mainServices .serviceView.step-2,
body.about section.mainServices .serviceView.step-3,
body.home section.mainServices .serviceView.step-1,
body.home section.mainServices .serviceView.step-1 .branding.infobar,
body.home section.mainServices .serviceView.step-2,
body.home section.mainServices .serviceView.step-3 {
    pointer-events: auto
}

body.about section.mainServices .serviceView.step-1 .sideIcons,
body.about section.mainServices .serviceView.step-2 .sideIcons,
body.about section.mainServices .serviceView.step-3 .sideIcons,
body.home section.mainServices .serviceView.step-1 .sideIcons,
body.home section.mainServices .serviceView.step-2 .sideIcons,
body.home section.mainServices .serviceView.step-3 .sideIcons {
    opacity: 1
}

body.about section.mainServices .serviceView.step-1 .branding,
body.home section.mainServices .serviceView.step-1 .branding {
    opacity: 1;
    transform: translateY(0);
    transition: transform .3s .5s cubic-bezier(.77, 0, .18, 1), opacity .3s .5s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-1 .branding.background,
body.home section.mainServices .serviceView.step-1 .branding.background {
    pointer-events: auto;
    transition: opacity .7s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-1 .brandingSign,
body.home section.mainServices .serviceView.step-1 .brandingSign {
    opacity: 1;
    filter: drop-shadow(0 1px 10px #fff)
}

body.about section.mainServices .serviceView.step-1 .brandingSign svg path,
body.about section.mainServices .serviceView.step-2 .imaginarySign svg path,
body.about section.mainServices .serviceView.step-3 .digitalSign svg path,
body.home section.mainServices .serviceView.step-1 .brandingSign svg path,
body.home section.mainServices .serviceView.step-2 .imaginarySign svg path,
body.home section.mainServices .serviceView.step-3 .digitalSign svg path {
    fill: #fff
}

body.about section.mainServices .serviceView.step-2 .branding,
body.home section.mainServices .serviceView.step-2 .branding {
    opacity: 0;
    transform: translateY(-16px)
}

body.about section.mainServices .serviceView.step-2 .imaginary,
body.home section.mainServices .serviceView.step-2 .imaginary {
    opacity: 1;
    transform: translateY(0);
    transition: transform .3s .5s cubic-bezier(.77, 0, .18, 1), opacity .3s .5s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-2 .imaginary.infobar,
body.home section.mainServices .serviceView.step-2 .imaginary.infobar {
    pointer-events: auto
}

body.about section.mainServices .serviceView.step-2 .imaginary.background,
body.home section.mainServices .serviceView.step-2 .imaginary.background {
    pointer-events: auto;
    transition: opacity .7s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-2 .imaginarySign,
body.home section.mainServices .serviceView.step-2 .imaginarySign {
    opacity: 1;
    filter: drop-shadow(0 1px 10px #fff)
}

body.about section.mainServices .serviceView.step-3 .imaginary,
body.home section.mainServices .serviceView.step-3 .imaginary {
    opacity: 0;
    transform: translateY(-16px)
}

body.about section.mainServices .serviceView.step-3 .digital,
body.home section.mainServices .serviceView.step-3 .digital {
    opacity: 1;
    transform: translateY(0);
    transition: transform .3s .5s cubic-bezier(.77, 0, .18, 1), opacity .3s .5s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-3 .digital.infobar,
body.home section.mainServices .serviceView.step-3 .digital.infobar {
    pointer-events: auto
}

body.about section.mainServices .serviceView.step-3 .digital.background,
body.home section.mainServices .serviceView.step-3 .digital.background {
    pointer-events: auto;
    transition: opacity .7s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView.step-3 .digitalSign,
body.home section.mainServices .serviceView.step-3 .digitalSign {
    opacity: 1;
    filter: drop-shadow(0 1px 10px #fff)
}

body.about section.mainServices .serviceView.step-4 .digital,
body.home section.mainServices .serviceView.step-4 .digital {
    opacity: 0;
    transform: translateY(-16px)
}

body.about section.mainServices .serviceView .sideIcons,
body.home section.mainServices .serviceView .sideIcons {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 80px;
    bottom: 80px;
    left: 40px;
    opacity: 0;
    transition: opacity .5s cubic-bezier(.77, 0, .18, 1)
}

body.about section.mainServices .serviceView .sideIcons div,
body.home section.mainServices .serviceView .sideIcons div {
    height: 24px;
    width: 24px;
    margin: 40px 0;
    opacity: .5
}

body.about section.mainServices .serviceView .background iframe,
body.about section.mainServices .serviceView .background video,
body.about section.mainServices .serviceView .sideIcons div svg,
body.home section.mainServices .serviceView .background iframe,
body.home section.mainServices .serviceView .background video,
body.home section.mainServices .serviceView .sideIcons div svg {
    width: 100%;
    height: 100%
}

body.about section.mainServices .serviceView .content,
body.home section.mainServices .serviceView .content {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 160px;
    width: calc(50vw - 160px)
}

body.about section.mainServices .serviceView .content.digital h2,
body.home section.mainServices .serviceView .content.digital h2 {
    font-family: 'Pixer', sans-serif;
    line-break: strict
}

body.about section.mainServices .serviceView .content.digital h2 span.digital,
body.home section.mainServices .serviceView .content.digital h2 span.digital {
    font-size: 1.1em
}

body.about section.mainServices .serviceView .content h2,
body.home section.mainServices .serviceView .content h2 {
    text-transform: uppercase;
    letter-spacing: 0;
    font-size: calc(9.5vw - 36.8px);
    line-break: strict;
    line-height: calc(9vw - 35px)
}

body.about section.mainServices .serviceView .content h5,
body.about section.mainServices .serviceView .content p,
body.home section.mainServices .serviceView .content h5,
body.home section.mainServices .serviceView .content p {
    margin-left: 4px
}

body.about section.mainServices .serviceView .content p,
body.home section.mainServices .serviceView .content p {
    margin-top: 40px;
    font-style: italic;
    max-width: 480px;
    letter-spacing: 2px;
    opacity: .7
}

body.about section.mainServices .serviceView .infobar,
body.home section.mainServices .serviceView .infobar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    z-index: 2;
    bottom: 48px;
    left: 40px;
    right: 40px
}

body.about section.mainServices .serviceView .infobar .tags,
body.home section.mainServices .serviceView .infobar .tags {
    pointer-events: none;
    display: flex;
    align-items: center
}

body.about section.mainServices .serviceView .infobar .tags span,
body.home section.mainServices .serviceView .infobar .tags span {
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-right: 40px;
    font-size: .65rem
}

body.about section.mainServices .serviceView .infobar .tags span:not(.highlight)::before,
body.home section.mainServices .serviceView .infobar .tags span:not(.highlight)::before {
    content: '#'
}

body.about section.mainServices .serviceView .infobar .tags span.highlight,
body.home section.mainServices .serviceView .infobar .tags span.highlight {
    font-size: 1.5rem;
    font-weight: 900;
    margin-right: 80px
}

body.about section.mainServices .serviceView .background,
body.home section.mainServices .serviceView .background {
    position: absolute;
    z-index: 1;
    top: -80px;
    right: 0;
    bottom: -80px;
    left: 0;
    background-color: #09090b
}

body.about section.mainServices .serviceView .background video,
body.home section.mainServices .serviceView .background video {
    -o-object-fit: cover;
    object-fit: cover
}

body.about section.mainServices .serviceView .background video::-webkit-media-controls,
body.about section.mainServices .serviceView .background video::-webkit-media-controls-panel,
body.about section.mainServices .serviceView .background video::-webkit-media-controls-play-button,
body.about section.mainServices .serviceView .background video::-webkit-media-controls-start-playback-button,
body.home section.mainServices .serviceView .background video::-webkit-media-controls,
body.home section.mainServices .serviceView .background video::-webkit-media-controls-panel,
body.home section.mainServices .serviceView .background video::-webkit-media-controls-play-button,
body.home section.mainServices .serviceView .background video::-webkit-media-controls-start-playback-button {
    display: none !important;
    -webkit-appearance: none !important
}

body.about section.partners,
body.home section.partners {
    padding: 80px 0 160px;
    text-align: center
}

body.about section.partners p,
body.home section.partners p {
    opacity: .7;
    margin: 0 auto
}

body.about section.partners .partnersBoard,
body.home section.partners .partnersBoard {
    width: 50vw;
    margin-top: 40px
}

body.about section.servicesByIcon,
body.home section.servicesByIcon {
    height: 500vh
}

body.about section.servicesByIcon .servicesView,
body.home section.servicesByIcon .servicesView {
    pointer-events: none;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0
}

body.about section.servicesByIcon .servicesView.service-0,
body.about section.servicesByIcon .servicesView.service-1,
body.about section.servicesByIcon .servicesView.service-2,
body.about section.servicesByIcon .servicesView.service-3,
body.about section.servicesByIcon .servicesView.service-4,
body.about section.servicesByIcon .servicesView.service-5,
body.about section.servicesByIcon .servicesView.service-6,
body.about section.servicesByIcon .servicesView.service-7,
body.home section.servicesByIcon .servicesView.service-0,
body.home section.servicesByIcon .servicesView.service-1,
body.home section.servicesByIcon .servicesView.service-2,
body.home section.servicesByIcon .servicesView.service-3,
body.home section.servicesByIcon .servicesView.service-4,
body.home section.servicesByIcon .servicesView.service-5,
body.home section.servicesByIcon .servicesView.service-6,
body.home section.servicesByIcon .servicesView.service-7 {
    pointer-events: auto
}

body.about section.servicesByIcon .servicesView.service-0 .servicesDescription,
body.about section.servicesByIcon .servicesView.service-0 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-0 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-0 .servicesIconsBox .serviceSelector {
    transform: translateX(0)
}

body.about section.servicesByIcon .servicesView.service-1 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-1 .servicesIconsBox .serviceSelector {
    transform: translateX(150%)
}

body.about section.servicesByIcon .servicesView.service-1 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-1 .servicesDescription {
    transform: translateX(-50vw)
}

body.about section.servicesByIcon .servicesView.service-2 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-2 .servicesIconsBox .serviceSelector {
    transform: translateX(300%)
}

body.about section.servicesByIcon .servicesView.service-2 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-2 .servicesDescription {
    transform: translateX(-100vw)
}

body.about section.servicesByIcon .servicesView.service-3 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-3 .servicesIconsBox .serviceSelector {
    transform: translateX(450%)
}

body.about section.servicesByIcon .servicesView.service-3 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-3 .servicesDescription {
    transform: translateX(-150vw)
}

body.about section.servicesByIcon .servicesView.service-4 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-4 .servicesIconsBox .serviceSelector {
    transform: translateX(600%)
}

body.about section.servicesByIcon .servicesView.service-4 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-4 .servicesDescription {
    transform: translateX(-200vw)
}

body.about section.servicesByIcon .servicesView.service-5 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-5 .servicesIconsBox .serviceSelector {
    transform: translateX(750%)
}

body.about section.servicesByIcon .servicesView.service-5 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-5 .servicesDescription {
    transform: translateX(-250vw)
}

body.about section.servicesByIcon .servicesView.service-6 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-6 .servicesIconsBox .serviceSelector {
    transform: translateX(900%)
}

body.about section.servicesByIcon .servicesView.service-6 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-6 .servicesDescription {
    transform: translateX(-300vw)
}

body.about section.servicesByIcon .servicesView.service-7 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-7 .servicesIconsBox .serviceSelector {
    transform: translateX(1050%)
}

body.about section.servicesByIcon .servicesView.service-7 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-7 .servicesDescription {
    transform: translateX(-350vw)
}

body.about section.servicesByIcon .servicesView.service-8 .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView.service-8 .servicesIconsBox .serviceSelector {
    transform: translateX(1200%)
}

body.about section.servicesByIcon .servicesView.service-8 .servicesDescription,
body.home section.servicesByIcon .servicesView.service-8 .servicesDescription {
    transform: translateX(-400vw)
}

body.about section.servicesByIcon .servicesView.service-8,
body.home section.servicesByIcon .servicesView.service-8 {
    pointer-events: none
}

body.about section.servicesByIcon .servicesView .colorCircle,
body.home section.servicesByIcon .servicesView .colorCircle {
    position: absolute;
    z-index: -2;
    left: 10vw;
    right: 10vh;
    width: 80vw;
    height: 80vh;
    -o-object-fit: contain;
    object-fit: contain
}

body.about section.servicesByIcon .servicesView .servicesIconsBox,
body.home section.servicesByIcon .servicesView .servicesIconsBox {
    position: relative;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center
}

body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector {
    width: 80px;
    height: 80px;
    margin: 20px;
    border-radius: 20px;
    box-sizing: border-box
}

body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector,
body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector {
    border: 2px solid #fff;
    position: absolute;
    z-index: 5;
    top: 0;
    left: 0;
    box-shadow: inset 0 0 8px #fff;
    will-change: transform;
    transition: transform .4s cubic-bezier(.77, 0, .18, 1);
    transform: translateX(-150%)
}

body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon {
    background: rgba(255, 255, 255, .25);
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px)
}

body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon img,
body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon img {
    height: 56px;
    width: 56px;
    margin: 12px;
    display: block
}

body.about section.servicesByIcon .servicesView .servicesDescription,
body.home section.servicesByIcon .servicesView .servicesDescription {
    display: flex;
    font-size: 2.5rem;
    font-weight: 900;
    letter-spacing: 4px;
    margin: 24px 0 24px 25vw;
    will-change: transform;
    transition: transform .4s cubic-bezier(.77, 0, .18, 1);
    transform: translateX(50vw)
}

body.about section.servicesByIcon .servicesView .servicesDescription span,
body.home section.servicesByIcon .servicesView .servicesDescription span {
    flex: 0 0 50vw;
    display: block;
    text-align: center
}

body.about section.welcomeToGax,
body.home section.welcomeToGax {
    position: relative;
    overflow: hidden;
    height: 250vh
}

body.about section.welcomeToGax .background,
body.home section.welcomeToGax .background {
    position: relative;
    z-index: -3;
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

body.about section.welcomeToGax .gaxFilter,
body.home section.welcomeToGax .gaxFilter {
    pointer-events: none;
    position: absolute;
    z-index: -2;
    top: 0;
    left: 0;
    background: url(../images/home/gax_filter.svg) no-repeat center;
    background-size: 110% auto;
    width: 100vw;
    height: 100vh
}

body.about section.welcomeToGax .gaxFilter::after,
body.about section.welcomeToGax .gaxFilter::before,
body.home section.welcomeToGax .gaxFilter::after,
body.home section.welcomeToGax .gaxFilter::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: calc(50vh - 25vw);
    background: #09090b
}

body.about section.welcomeToGax .gaxFilter::before,
body.home section.welcomeToGax .gaxFilter::before {
    top: 0
}

body.about section.welcomeToGax .gaxFilter::after,
body.home section.welcomeToGax .gaxFilter::after {
    bottom: 0
}

body.about section.welcomeToGax .welcome,
body.home section.welcomeToGax .welcome {
    position: absolute;
    top: 100vh;
    left: 0;
    right: 0;
    text-align: center
}

body.about section.welcomeToGax .weCreate,
body.home section.welcomeToGax .weCreate {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 0;
    right: 0
}

body.about section.welcomeToGax .weCreate .weCreateFilter,
body.home section.welcomeToGax .weCreate .weCreateFilter {
    display: block;
    width: 100%
}

body.about section.welcomeToGax .weCreate .content,
body.home section.welcomeToGax .weCreate .content {
    text-align: center;
    background: #fc957e;
    padding: 0 80px 240px
}

body.about section.welcomeToGax .weCreate .content span,
body.about section.whoWeAre .parallaxBox img,
body.home section.welcomeToGax .weCreate .content span,
body.home section.whoWeAre .parallaxBox img {
    display: block
}

body.about section.whoWeAre .promise,
body.home section.whoWeAre .promise {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 160px
}

body.about section.whoWeAre .promise .gaxIconTag,
body.home section.whoWeAre .promise .gaxIconTag {
    position: absolute;
    z-index: 5;
    left: calc(50% - 16px);
    top: calc(50% - 32px)
}

body.about section.whoWeAre .promise .content,
body.about section.whoWeAre .promise .quote,
body.contact main.contact form.contactForm,
body.home section.whoWeAre .promise .content,
body.home section.whoWeAre .promise .quote {
    width: 40%
}

body.about section.whoWeAre .promise .quote p::after,
body.home section.whoWeAre .promise .quote p::after {
    opacity: .15
}

body.about section.whoWeAre .promise .content h4,
body.home section.whoWeAre .promise .content h4 {
    font-weight: 700;
    margin-bottom: 40px
}

body.about section.whoWeAre .promise .content p,
body.home section.whoWeAre .promise .content p {
    font-size: .75rem;
    letter-spacing: 3px;
    opacity: .7;
    margin-top: 16px;
    max-width: 480px
}

body.about section.whoWeAre .promise .quote img,
body.home section.whoWeAre .promise .quote img {
    width: 45vh;
    height: 60vh;
    -o-object-fit: cover;
    object-fit: cover;
    filter: brightness(.66)
}

body.about section.whoWeAre .person,
body.home section.whoWeAre .person {
    position: relative;
    display: flex;
    align-items: flex-end;
    margin: 160px
}

body.about section.whoWeAre .studio,
body.home section.whoWeAre .studio {
    display: flex
}

body.about section.whoWeAre .person:nth-of-type(2n+0),
body.about section.whoWeAre .studio:nth-of-type(2n+0),
body.home section.whoWeAre .person:nth-of-type(2n+0),
body.home section.whoWeAre .studio:nth-of-type(2n+0) {
    margin-left: calc(40vw - 160px)
}

body.about section.whoWeAre .person p.italic,
body.about section.whoWeAre .studio p.italic,
body.home section.whoWeAre .person p.italic,
body.home section.whoWeAre .studio p.italic {
    position: absolute;
    left: 0;
    bottom: 0;
    letter-spacing: 2px;
    transform-origin: left bottom;
    transform: rotate(-90deg)
}

body.about section.whoWeAre .person .profilPic,
body.about section.whoWeAre .studio .profilPic,
body.home section.whoWeAre .person .profilPic,
body.home section.whoWeAre .studio .profilPic {
    width: 30vw;
    height: 40vw;
    max-width: 420px;
    max-height: 560px
}

body.about section.whoWeAre .person .description,
body.about section.whoWeAre .studio .description,
body.home section.whoWeAre .person .description,
body.home section.whoWeAre .studio .description {
    margin-left: 5vw;
    width: 25vw
}

body.about section.whoWeAre .person .description .light,
body.home section.whoWeAre .person .description .light {
    width: 33%;
    height: 3px;
    background: #fc957e;
    box-shadow: 0 1px 20px #fc957e, 0 1px 10px #fff;
    transform-origin: left center
}

body.about section.whoWeAre .studio .description .light,
body.home section.whoWeAre .studio .description .light {
    width: 33%;
    height: 3px;
    background: #fc957e;
    transform-origin: left center
}

body.about section.whoWeAre .person .description h3,
body.about section.whoWeAre .studio .description h3,
body.home section.whoWeAre .person .description h3,
body.home section.whoWeAre .studio .description h3 {
    font-size: 4rem;
    margin-bottom: 8px;
    line-height: 1
}

body.about section.whoWeAre .person .description h5,
body.about section.whoWeAre .studio .description h5,
body.home section.whoWeAre .person .description h5,
body.home section.whoWeAre .studio .description h5 {
    font-size: 1rem
}

body.about section.whoWeAre .person .description h5,
body.about section.whoWeAre .person .description p,
body.about section.whoWeAre .studio .description h5,
body.about section.whoWeAre .studio .description p,
body.home section.whoWeAre .person .description h5,
body.home section.whoWeAre .person .description p,
body.home section.whoWeAre .studio .description h5,
body.home section.whoWeAre .studio .description p {
    opacity: .6;
    font-style: italic
}

body.about section.whoWeAre .person .description p,
body.about section.whoWeAre .studio .description p,
body.home section.whoWeAre .person .description p,
body.home section.whoWeAre .studio .description p {
    margin: 40px 0;
    max-width: 360px
}

body.about section.whoWeAre .person .description .turing,
body.about section.whoWeAre .studio .description .turing,
body.home section.whoWeAre .person .description .turing,
body.home section.whoWeAre .studio .description .turing {
    width: 100px
}

body.about section.whoWeAre .person .description .links,
body.about section.whoWeAre .studio .description .links,
body.home section.whoWeAre .person .description .links,
body.home section.whoWeAre .studio .description .links {
    display: flex;
    margin-top: 40px
}

body.about section.whoWeAre .person .description .links a,
body.about section.whoWeAre .studio .description .links a,
body.home section.whoWeAre .person .description .links a,
body.home section.whoWeAre .studio .description .links a {
    margin: 0 16px
}

body.about section.whoWeAre .person .description .links a img,
body.about section.whoWeAre .studio .description .links a img,
body.home section.whoWeAre .person .description .links a img,
body.home section.whoWeAre .studio .description .links a img {
    height: 24px;
    display: block;
    will-change: transform;
    transition: transform .3s cubic-bezier(.48, -.07, .52, 1.79)
}

body.about section.whoWeAre .person:nth-of-type(4) .description .light,
body.home section.whoWeAre .person:nth-of-type(4) .description .light {
    background: #c5a8d2;
    box-shadow: 0 1px 20px #c5a8d2, 0 1px 10px #fff
}

body.about section.whoWeAre .person:nth-of-type(5) .description .light,
body.home section.whoWeAre .person:nth-of-type(5) .description .light {
    background: red !important;
    box-shadow: 0 1px 20px #50cea0, 0 1px 10px #fff
}

body.about section.whoWeAre .studio,
body.home section.whoWeAre .studio {
    position: relative;
    margin: 240px 160px !important;
    align-items: center;
    justify-content: center
}

body.about section.whoWeAre .studio .sliderBox,
body.home section.whoWeAre .studio .sliderBox {
    flex: 1;
    max-width: 40vw
}

body.about section.whoWeAre .studio .sliderBox .sliderContainer,
body.home section.whoWeAre .studio .sliderBox .sliderContainer {
    overflow: hidden;
    height: 25vw
}

body.about section.whoWeAre .studio .sliderBox .sliderContainer .slides,
body.home section.whoWeAre .studio .sliderBox .sliderContainer .slides {
    width: 500%;
    height: 100%;
    display: flex;
    will-change: transform;
    transition: transform .5s cubic-bezier(.77, 0, .18, 1)
}

body.about section.whoWeAre .studio .sliderBox .sliderContainer .slides img,
body.home section.whoWeAre .studio .sliderBox .sliderContainer .slides img {
    display: block;
    width: 20%;
    -o-object-fit: cover;
    object-fit: cover
}

body.about section.whoWeAre .studio .sliderBox .sliderPoints,
body.home section.whoWeAre .studio .sliderBox .sliderPoints {
    display: flex;
    justify-content: center
}

body.about section.whoWeAre .studio .sliderBox .sliderPoints .point,
body.home section.whoWeAre .studio .sliderBox .sliderPoints .point {
    cursor: pointer;
    position: relative;
    height: 8px;
    width: 8px;
    padding: 8px;
    margin: 8px;
    border-radius: 50%
}

body.about section.whoWeAre .studio .sliderBox .sliderPoints .point::after,
body.about section.whoWeAre .studio .sliderBox .sliderPoints .point::before,
body.home section.whoWeAre .studio .sliderBox .sliderPoints .point::after,
body.home section.whoWeAre .studio .sliderBox .sliderPoints .point::before {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    border-radius: 50%
}

body.about section.whoWeAre .studio .sliderBox .sliderPoints .point::before,
body.home section.whoWeAre .studio .sliderBox .sliderPoints .point::before {
    background: #fecb00
}

body.about section.whoWeAre .studio .sliderBox .sliderPoints .point::after,
body.home section.whoWeAre .studio .sliderBox .sliderPoints .point::after {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    background: #fff
}

body.about section.whoWeAre .studio .backgroundSliderContainer,
body.home section.whoWeAre .studio .backgroundSliderContainer {
    z-index: -10;
    position: absolute;
    transform: translateZ(0);
    filter: brightness(.33) blur(32px);
    top: -160px;
    right: -160px;
    bottom: -160px;
    left: -160px
}

body.about section.whoWeAre .studio .backgroundSliderContainer::after,
body.home section.whoWeAre .studio .backgroundSliderContainer::after {
    content: '';
    display: block;
    background: url(../images/home/studio_shape.svg) no-repeat center;
    background-size: cover;
    position: absolute;
    z-index: 2;
    top: 0;
    height: 90%;
    width: 60%;
    right: 10%;
    mix-blend-mode: multiply
}

body.about section.whoWeAre .studio .backgroundSliderContainer .backgroundSlides img,
body.home section.whoWeAre .studio .backgroundSliderContainer .backgroundSlides img {
    display: block;
    position: absolute;
    opacity: 0;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: opacity .5s cubic-bezier(.77, 0, .18, 1)
}

body.about section.whoWeAre .studio .backgroundSliderContainer .backgroundSlides img.current,
body.home section.whoWeAre .studio .backgroundSliderContainer .backgroundSlides img.current {
    opacity: 1
}

body.about section.whoWeAre .studio .description .light,
body.home section.whoWeAre .studio .description .light {
    background: #fecb00;
    box-shadow: 0 1px 20px #fecb00, 0 1px 10px #fff
}

body.about section.whoWeAre .studio .description h5::before,
body.home section.whoWeAre .studio .description h5::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/home/place-icon.svg) no-repeat center;
    background-size: 100%;
    vertical-align: sub;
    margin-right: 8px
}

body.about section.whoWeAre .parallaxBox,
body.branding .howWeDo .debrief h3 span,
body.home section.whoWeAre .parallaxBox {
    position: relative
}

@media screen and (max-width:960px) {

    body.about section.hero,
    body.home section.hero {
        height: auto;
        min-height: 100vh;
        flex-direction: column
    }

    body.about section.hero h2,
    body.home section.hero h2 {
        margin: 0
    }

    body.about section.hero .arguments,
    body.home section.hero .arguments {
        margin: 80px 0 0 40px;
        width: 50vw
    }
}

@media screen and (max-width:740px) {

    body.about section.hero .gaxIconTag,
    body.about section.hero .mouseIcon,
    body.about section.hero .socialLinks,
    body.home section.hero .gaxIconTag,
    body.home section.hero .mouseIcon,
    body.home section.hero .socialLinks {
        display: none
    }

    body.about section.hero .arguments,
    body.home section.hero .arguments {
        width: 70vw
    }
}

@media screen and (max-width:560px) {

    body.about section.hero h2 span,
    body.home section.hero h2 span {
        height: 6rem
    }
}

@media screen and (max-width:450px) {

    body.about section.hero h2 span,
    body.home section.hero h2 span {
        height: 5rem
    }
}

@media screen and (min-width:1480px) {

    body.about section.hero h2 span,
    body.home section.hero h2 span {
        font-size: 8vw;
        height: 8vw
    }

    body.about section.hero .arguments,
    body.home section.hero .arguments {
        font-size: 1.33rem;
        max-width: 320px
    }
}

@media screen and (max-width:1230px) {

    body.about section.mainServices .serviceView .infobar,
    body.home section.mainServices .serviceView .infobar {
        flex-direction: column
    }

    body.about section.mainServices .serviceView .infobar .tags,
    body.home section.mainServices .serviceView .infobar .tags {
        flex-wrap: wrap;
        justify-content: center;
        margin-bottom: 8px
    }

    body.about section.mainServices .serviceView .infobar .tags span,
    body.home section.mainServices .serviceView .infobar .tags span {
        margin: 0 16px 16px
    }

    body.about section.mainServices .serviceView .infobar .tags .highlight,
    body.home section.mainServices .serviceView .infobar .tags .highlight {
        display: none
    }
}

@media screen and (max-width:850px) {

    body.about section.mainServices .serviceView .content,
    body.home section.mainServices .serviceView .content {
        width: calc(100vw - 320px)
    }

    body.about section.mainServices .serviceView .content h2,
    body.home section.mainServices .serviceView .content h2 {
        font-size: 6rem;
        line-height: 5rem
    }
}

@media screen and (max-width:740px) {

    body.about section.mainServices .serviceView .sideIcons,
    body.home section.mainServices .serviceView .sideIcons {
        flex-direction: row;
        top: 96px;
        right: 40px;
        bottom: unset
    }

    body.about section.mainServices .serviceView .sideIcons div,
    body.home section.mainServices .serviceView .sideIcons div {
        margin: 0 24px
    }

    body.about section.mainServices .serviceView .content,
    body.home section.mainServices .serviceView .content {
        width: calc(100vw - 80px);
        left: 40px;
        bottom: 0
    }

    body.about section.mainServices .serviceView .content p,
    body.home section.mainServices .serviceView .content p {
        margin-top: 8px
    }

    body.about section.mainServices .serviceView .infobar .tags,
    body.home section.mainServices .serviceView .infobar .tags {
        display: none
    }
}

@media screen and (max-width:560px) {

    body.about section.mainServices .serviceView .sideIcons div,
    body.home section.mainServices .serviceView .sideIcons div {
        height: 16px;
        width: 16px;
        margin: 0 16px
    }

    body.about section.mainServices .serviceView .content h2,
    body.home section.mainServices .serviceView .content h2 {
        font-size: 5rem;
        line-height: 4.16rem
    }
}

@media (pointer:coarse) {

    body.about section.mainServices .serviceView .background,
    body.home section.mainServices .serviceView .background {
        pointer-events: none
    }
}

@media screen and (min-width:1480px) {

    body.about section.mainServices .serviceView .content,
    body.home section.mainServices .serviceView .content {
        left: 200px
    }

    body.about section.mainServices .serviceView .infobar .tags span.highlight,
    body.home section.mainServices .serviceView .infobar .tags span.highlight {
        margin-right: 120px
    }
}

@media screen and (min-width:1660px) {

    body.about section.mainServices .serviceView .content,
    body.home section.mainServices .serviceView .content {
        left: 240px
    }

    body.about section.mainServices .serviceView .content h2,
    body.home section.mainServices .serviceView .content h2 {
        font-size: 6rem;
        line-height: 5rem;
        margin-bottom: 8px
    }

    body.about section.mainServices .serviceView .infobar,
    body.home section.mainServices .serviceView .infobar {
        right: 80px
    }

    body.about section.mainServices .serviceView .infobar .tags span,
    body.home section.mainServices .serviceView .infobar .tags span {
        margin-right: 56px
    }

    body.about section.mainServices .serviceView .infobar .tags span.highlight,
    body.home section.mainServices .serviceView .infobar .tags span.highlight {
        margin-right: 160px
    }
}

@media screen and (min-width:1840px) {

    body.about section.mainServices .serviceView .infobar,
    body.home section.mainServices .serviceView .infobar {
        right: 80px
    }

    body.about section.mainServices .serviceView .infobar .tags span,
    body.home section.mainServices .serviceView .infobar .tags span {
        margin-right: 80px
    }
}

@media screen and (max-width:960px) {

    body.about section.partners .partnersBoard,
    body.home section.partners .partnersBoard {
        width: 70vw
    }
}

@media screen and (max-width:740px) {

    body.about section.partners .partnersBoard,
    body.home section.partners .partnersBoard {
        width: 85vw
    }
}

@media screen and (max-width:560px) {

    body.about section.partners,
    body.home section.partners {
        padding: 40px 0 80px
    }

    body.about section.partners h3,
    body.home section.partners h3 {
        font-size: 2rem
    }

    body.about section.partners .partnersBoard,
    body.home section.partners .partnersBoard {
        width: 100vw
    }
}

@media screen and (max-width:1140px) {

    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector {
        width: 64px;
        height: 64px;
        margin: 16px
    }

    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon img,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon img {
        height: 48px;
        width: 48px;
        margin: 8px
    }
}

@media screen and (max-width:850px) {

    body.about section.servicesByIcon .servicesView .servicesIconsBox,
    body.home section.servicesByIcon .servicesView .servicesIconsBox {
        flex-wrap: wrap;
        max-width: calc(96px*4)
    }

    body.about section.servicesByIcon .servicesView.service-4 .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView.service-4 .servicesIconsBox .serviceSelector {
        transform: translateX(0) translateY(150%)
    }

    body.about section.servicesByIcon .servicesView.service-5 .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView.service-5 .servicesIconsBox .serviceSelector {
        transform: translateX(150%) translateY(150%)
    }

    body.about section.servicesByIcon .servicesView.service-6 .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView.service-6 .servicesIconsBox .serviceSelector {
        transform: translateX(300%) translateY(150%)
    }

    body.about section.servicesByIcon .servicesView.service-7 .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView.service-7 .servicesIconsBox .serviceSelector {
        transform: translateX(450%) translateY(150%)
    }

    body.about section.servicesByIcon .servicesView.service-8 .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView.service-8 .servicesIconsBox .serviceSelector {
        transform: translateX(600%) translateY(150%)
    }
}

@media screen and (max-width:740px) {

    body.about section.servicesByIcon .servicesView .servicesDescription,
    body.home section.servicesByIcon .servicesView .servicesDescription {
        font-size: 2rem
    }
}

@media screen and (max-width:560px) {

    body.about section.servicesByIcon .servicesView .servicesDescription,
    body.home section.servicesByIcon .servicesView .servicesDescription {
        margin-left: 0
    }

    body.about section.servicesByIcon .servicesView .servicesDescription span,
    body.home section.servicesByIcon .servicesView .servicesDescription span {
        flex: 0 0 100vw
    }

    body.about section.servicesByIcon .servicesView.service-0 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-0 .servicesDescription {
        transform: translateX(0)
    }

    body.about section.servicesByIcon .servicesView.service-1 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-1 .servicesDescription {
        transform: translateX(-100vw)
    }

    body.about section.servicesByIcon .servicesView.service-2 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-2 .servicesDescription {
        transform: translateX(-200vw)
    }

    body.about section.servicesByIcon .servicesView.service-3 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-3 .servicesDescription {
        transform: translateX(-300vw)
    }

    body.about section.servicesByIcon .servicesView.service-4 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-4 .servicesDescription {
        transform: translateX(-400vw)
    }

    body.about section.servicesByIcon .servicesView.service-5 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-5 .servicesDescription {
        transform: translateX(-500vw)
    }

    body.about section.servicesByIcon .servicesView.service-6 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-6 .servicesDescription {
        transform: translateX(-600vw)
    }

    body.about section.servicesByIcon .servicesView.service-7 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-7 .servicesDescription {
        transform: translateX(-700vw)
    }

    body.about section.servicesByIcon .servicesView.service-8 .servicesDescription,
    body.home section.servicesByIcon .servicesView.service-8 .servicesDescription {
        transform: translateX(-800vw)
    }
}

@media screen and (max-width:450px) {

    body.about section.servicesByIcon .servicesView .servicesIconsBox,
    body.home section.servicesByIcon .servicesView .servicesIconsBox {
        max-width: calc(72px*4)
    }

    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector {
        width: 48px;
        height: 48px;
        margin: 12px
    }

    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon img,
    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector img,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon img,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceSelector img {
        width: 32px;
        height: 32px
    }
}

@media screen and (max-width:560px) {

    body.about section.welcomeToGax .weCreate .content,
    body.home section.welcomeToGax .weCreate .content {
        padding-bottom: 180px
    }
}

@media screen and (max-width:1140px) {

    body.about section.whoWeAre .person,
    body.about section.whoWeAre .promise,
    body.home section.whoWeAre .person,
    body.home section.whoWeAre .promise {
        margin: 160px 80px
    }

    body.about section.whoWeAre .person .description,
    body.home section.whoWeAre .person .description {
        width: 35vw
    }

    body.about section.whoWeAre .person:nth-of-type(2n),
    body.home section.whoWeAre .person:nth-of-type(2n) {
        margin-left: calc(30vw - 80px)
    }

    body.about section.whoWeAre .studio,
    body.home section.whoWeAre .studio {
        margin: 240px 80px !important
    }

    body.about section.whoWeAre .studio .description,
    body.home section.whoWeAre .studio .description {
        width: 40vw
    }
}

@media screen and (max-width:850px) {

    body.about section.whoWeAre .person,
    body.about section.whoWeAre .promise,
    body.home section.whoWeAre .person,
    body.home section.whoWeAre .promise {
        margin: 160px 40px
    }

    body.about section.whoWeAre .person .description,
    body.home section.whoWeAre .person .description {
        width: calc(65vw - 80px)
    }

    body.about section.whoWeAre .person:nth-of-type(2n),
    body.home section.whoWeAre .person:nth-of-type(2n) {
        margin-left: 40px
    }

    body.about section.whoWeAre .studio,
    body.home section.whoWeAre .studio {
        flex-direction: column
    }

    body.about section.whoWeAre .studio .sliderBox,
    body.home section.whoWeAre .studio .sliderBox {
        margin-right: 0;
        max-width: 80vw
    }

    body.about section.whoWeAre .studio .sliderBox .sliderContainer,
    body.home section.whoWeAre .studio .sliderBox .sliderContainer {
        height: 50vw
    }

    body.about section.whoWeAre .studio .description,
    body.home section.whoWeAre .studio .description {
        margin: 40px 80px 0;
        width: auto
    }
}

@media screen and (max-width:740px) {

    body.about section.whoWeAre .promise,
    body.home section.whoWeAre .promise {
        flex-direction: column
    }

    body.about section.whoWeAre .promise .content,
    body.home section.whoWeAre .promise .content {
        width: calc(100% - 160px);
        text-align: center;
        margin-bottom: 80px
    }

    body.about section.whoWeAre .promise .quote,
    body.home section.whoWeAre .promise .quote {
        width: 100%
    }

    body.about section.whoWeAre .promise .quote img,
    body.home section.whoWeAre .promise .quote img {
        width: 30vh;
        height: 40vh
    }

    body.about section.whoWeAre .promise .gaxIconTag,
    body.home section.whoWeAre .promise .gaxIconTag {
        display: none
    }

    body.about section.whoWeAre .person,
    body.home section.whoWeAre .person {
        flex-direction: column;
        align-items: center
    }

    body.about section.whoWeAre .person p.italic,
    body.home section.whoWeAre .person p.italic {
        bottom: unset;
        top: calc((100vw - 320px)*4/3);
        left: 108px
    }

    body.about section.whoWeAre .person .description,
    body.about section.whoWeAre .person .profilPic,
    body.home section.whoWeAre .person .description,
    body.home section.whoWeAre .person .profilPic {
        width: calc(100vw - 320px);
        height: auto
    }

    body.about section.whoWeAre .person .parallaxBox,
    body.home section.whoWeAre .person .parallaxBox {
        transform: none !important;
        margin-bottom: 40px
    }

    body.about section.whoWeAre .person .description,
    body.home section.whoWeAre .person .description {
        position: relative;
        margin-left: 0
    }

    body.about section.whoWeAre .person .description .signatures,
    body.home section.whoWeAre .person .description .signatures {
        display: block;
        margin-left: auto
    }

    body.about section.whoWeAre .person .description .links,
    body.home section.whoWeAre .person .description .links {
        position: absolute;
        top: -12px;
        right: 0;
        margin-top: 0
    }

    body.about section.whoWeAre .studio,
    body.home section.whoWeAre .studio {
        margin: 240px 40px !important
    }
}

@media screen and (max-width:560px) {

    body.about section.whoWeAre .promise .content,
    body.home section.whoWeAre .promise .content {
        width: calc(100% - 80px)
    }

    body.about section.whoWeAre .promise .quote,
    body.home section.whoWeAre .promise .quote {
        justify-content: center
    }

    body.about section.whoWeAre .person p.italic,
    body.home section.whoWeAre .person p.italic {
        display: none
    }

    body.about section.whoWeAre .person .description,
    body.about section.whoWeAre .person .profilPic,
    body.home section.whoWeAre .person .description,
    body.home section.whoWeAre .person .profilPic {
        width: calc(100vw - 80px)
    }

    body.about section.whoWeAre .person .description h3,
    body.about section.whoWeAre .person .profilPic h3,
    body.home section.whoWeAre .person .description h3,
    body.home section.whoWeAre .person .profilPic h3 {
        margin-top: 32px
    }

    body.about section.whoWeAre .person .description .links a,
    body.about section.whoWeAre .person .profilPic .links a,
    body.home section.whoWeAre .person .description .links a,
    body.home section.whoWeAre .person .profilPic .links a {
        margin: 0 8px
    }

    body.about section.whoWeAre .person .description .links a img,
    body.about section.whoWeAre .person .profilPic .links a img,
    body.home section.whoWeAre .person .description .links a img,
    body.home section.whoWeAre .person .profilPic .links a img {
        height: 20px
    }

    body.about section.whoWeAre .studio .description,
    body.home section.whoWeAre .studio .description {
        margin: 40px 0 0
    }

    body.about section.whoWeAre .person .description h3,
    body.about section.whoWeAre .studio .description h3,
    body.home section.whoWeAre .person .description h3,
    body.home section.whoWeAre .studio .description h3 {
        font-size: 2.5rem
    }
}

@media screen and (min-width:1660px) {

    body.about section.whoWeAre .person,
    body.about section.whoWeAre .promise,
    body.home section.whoWeAre .person,
    body.home section.whoWeAre .promise {
        width: 1280px;
        margin: 160px auto
    }
}

body.contact main.contact {
    position: relative;
    margin-top: 92px;
    display: flex;
    align-items: center;
    padding: 80px 80px 160px
}

body.contact main.contact .preview {
    width: 20%;
    -o-object-fit: cover;
    object-fit: cover
}

body.contact main.contact .informations {
    width: 30%;
    margin: 0 5%
}

body.contact main.contact .informations .taglineBlock {
    font-size: 4.75vw;
    margin-top: 32px;
    margin-bottom: 48px
}

body.contact main.contact .informations p {
    margin-right: 20%
}

body.contact main.contact .informations .signatures {
    margin-top: 16px;
    margin-left: 20%;
    width: 80%
}

body.contact main.contact form.contactForm h3 {
    text-align: center;
    font-size: 1rem;
    margin: 80px 0 40px;
    display: none
}

body.contact main.contact form.contactForm .doubleInputsBox {
    display: flex;
    align-items: center;
    justify-content: space-between
}

body.contact main.contact form.contactForm .inputBox {
    margin: 0 0 32px
}

body.contact main.contact form.contactForm .inputBox.half {
    width: calc(50% - 16px)
}

body.contact main.contact form.contactForm .inputBox.withError label .error {
    display: inline
}

body.contact main.contact form.contactForm .inputBox.withError input,
body.contact main.contact form.contactForm .inputBox.withError select,
body.contact main.contact form.contactForm .inputBox.withError textarea {
    border-left: 8px solid #fc957e
}

body.contact main.contact form.contactForm .inputBox label {
    display: block;
    font-style: italic;
    font-size: .85rem
}

body.contact main.contact form.contactForm .inputBox label .error {
    color: #fc957e;
    display: none
}

body.contact main.contact form.contactForm .inputBox input,
body.contact main.contact form.contactForm .inputBox select,
body.contact main.contact form.contactForm .inputBox textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 8px;
    border: 1px solid #fff;
    color: #fff;
    background: 0 0;
    padding: 8px;
    resize: none;
    border-radius: 0;
    -webkit-appearance: none
}

body.contact main.contact form.contactForm .inputBox input:focus,
body.contact main.contact form.contactForm .inputBox select:focus,
body.contact main.contact form.contactForm .inputBox textarea:focus {
    outline: 0;
    border-color: #fc957e
}

body.contact main.contact form.contactForm .inputBox textarea {
    height: 120px
}

body.contact main.contact form.contactForm .buttonBox {
    display: flex;
    justify-content: flex-end
}

body.contact main.contact form.contactForm .buttonBox button[type=submit].startButton {
    font-size: .85rem
}

body.contact main.contact .successOverlay {
    pointer-events: none;
    position: absolute;
    z-index: 10;
    top: -92px;
    right: 0;
    left: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: url(../images/home/gax_colors.jpg) no-repeat center;
    background-size: cover;
    opacity: 0;
    transition: opacity .3s cubic-bezier(.77, 0, .18, 1)
}

body.contact main.contact .successOverlay.visible {
    opacity: .95;
    pointer-events: auto
}

body.contact main.contact .successOverlay p {
    font-weight: 900
}

body.contact main.contact .successOverlay .reward {
    display: flex;
    align-items: center;
    mix-blend-mode: overlay
}

body.contact main.contact .successOverlay .reward img {
    height: 160px
}

body.contact main.contact .successOverlay .reward .info {
    margin-left: 40px;
    text-transform: uppercase
}

body.contact main.contact .successOverlay .reward .info h3 {
    margin: 0
}

body.contact main.contact .successOverlay .followUs {
    margin: 40px 0
}

body.contact main.contact .successOverlay .followUs .socialLinks {
    justify-content: center
}

@media screen and (max-width:1140px) {
    body.contact main.contact .preview {
        width: 10%
    }

    body.contact main.contact .informations,
    body.contact main.contact form.contactForm {
        width: 40%
    }

    body.contact main.contact .successOverlay {
        background-size: 150%
    }
}

@media screen and (max-width:960px) {
    body.contact main.contact {
        padding: 80px 80px 160px;
        flex-wrap: wrap
    }

    body.contact main.contact .preview {
        width: 30%
    }

    body.contact main.contact .informations {
        width: 60%
    }

    body.contact main.contact form.contactForm {
        width: 100%;
        padding: 0 80px
    }

    body.contact main.contact form.contactForm h3 {
        display: block
    }

    body.contact main.contact form.contactForm .inputBox input,
    body.contact main.contact form.contactForm .inputBox select {
        width: 100%
    }
}

@media screen and (max-width:740px) {
    body.contact main.contact {
        padding: 40px 40px 80px
    }

    body.contact main.contact .successOverlay {
        background-size: 200%
    }
}

@media screen and (max-width:560px) {
    body.contact main.contact {
        padding: 24px 24px 40px
    }

    body.contact main.contact .preview {
        width: 60%;
        margin: 0 20%
    }

    body.contact main.contact .informations {
        width: 100%;
        margin: 0
    }

    body.contact main.contact .informations .socialLinks {
        justify-content: center;
        margin-top: 40px
    }

    body.contact main.contact form.contactForm {
        padding: 0
    }

    body.contact main.contact form.contactForm .buttonBox {
        justify-content: center
    }

    body.contact main.contact .successOverlay .reward {
        flex-direction: column;
        text-align: center
    }

    body.contact main.contact .successOverlay .reward .info {
        margin: 16px 0 0
    }
}

@media screen and (min-width:1480px) {
    body.contact main.contact .informations {
        margin-right: 10%
    }

    body.contact main.contact form.contactForm {
        width: 35%
    }
}

@media screen and (min-width:1660px) {
    body.contact main.contact {
        padding: 80px 120px 160px
    }

    body.contact main.contact .informations .taglineBlock {
        font-size: 4.25rem
    }
}

@media screen and (min-width:1840px) {
    body.contact main.contact {
        padding: 80px 160px 160px
    }

    body.contact main.contact .informations {
        width: 25%;
        margin-left: 7.5%;
        margin-right: 12.5%
    }
}

body.digital {
    background: #09070a
}

body.branding header .services a,
body.digital header .services a,
body.imaginary header .services a {
    opacity: .33
}

body.digital header .services a:nth-of-type(3) {
    opacity: 1;
    filter: sepia(1) brightness(.6) saturate(2000%) hue-rotate(95deg)
}

body.branding header .services a:nth-of-type(2) img,
body.digital header .services a:nth-of-type(3) img,
body.imaginary header .services a:nth-of-type(1) img {
    transform: none
}

body.digital .projects {
    background: #020d13
}

body.digital .projects .twoRowSection .projectsBox .projectArrow {
    background: linear-gradient(to right, rgba(2, 13, 19, 0) 0, #020d13 100%)
}

body.digital .howWeDo .playground p.specifications span.textLine span.visible,
body.digital section.footerCallToAction .localisation {
    opacity: 1
}

body.digital .hero .catchBox {
    justify-content: flex-end !important;
    padding-bottom: 120px;
    box-sizing: border-box
}

body.digital .hero .catchBox h1 {
    font-family: 'Pixer', sans-serif;
    color: #26ae0c !important;
}

body.digital .hero .catchBox h1 .gaxIcon {
    background: url(../images/general/logo_gax_studio_green_empty.svg) no-repeat center;
    background-size: contain !important;
    height: .1em !important;
    width: .2em !important;
    margin-left: 8px !important
}

body.digital .hero .computerScreen {
    height: 40vh;
    width: 60vw;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: 80px;
    left: 20vw
}

body.digital .hero .background {
    position: fixed;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    filter: blur(50px);
    transform: translateZ(0)
}

body.digital .hero .background .bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, #f06202, rgba(240, 98, 2, 0.5), rgba(240, 98, 2, 0.2), rgba(230, 231, 230, 0));
    opacity: 1;
    border-radius: 50%
}


body.digital .hero .background .bubble {
    position: absolute;
    top: 0;
    left: 0;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, #f06202, rgba(240, 98, 2, 0.5), rgba(240, 98, 2, 0.2), rgba(230, 231, 230, 0));
    opacity: 1;
    border-radius: 50%
}





@media not all and (-webkit-min-device-pixel-ratio:0),
not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        body.digital section.footerCallToAction .localisation {
            opacity: .33
        }
    }
}

body.digital .howWeDo .scrollBanner h2 {
    -webkit-text-stroke: 2px #50cea0
}

body.digital .howWeDo .stepsRow {
    position: relative;
    margin: 160px 160px 0
}

body.digital .howWeDo .stepsRow .progressBar {
    width: 2px;
    background: #50cea0;
    transform-origin: top;
    position: absolute;
    z-index: -1;
    top: 0;
    height: 600vh;
    left: 31px
}

body.digital .howWeDo .stepsRow .step {
    display: flex;
    height: 100vh;
    align-items: flex-start
}

body.digital .howWeDo .stepsRow .step.active .iconBox {
    opacity: 1;
    box-shadow: 0 2px 50px #50cea0
}

body.digital .howWeDo .stepsRow .step.short {
    height: 33vh
}

body.digital .howWeDo .stepsRow .step .iconBox {
    width: 64px;
    height: 64px;
    border-radius: 32px;
    margin-right: 64px;
    opacity: .3;
    transition: box-shadow .3s cubic-bezier(.48, -.07, .52, 1.79), opacity .3s cubic-bezier(.48, -.07, .52, 1.79)
}

body.digital .howWeDo .stepsRow .step:nth-of-type(1) .iconBox {
    background: url(../images/digital_process/digital_step_1.svg) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step:nth-of-type(2) .iconBox {
    background: url(../images/digital_process/digital_step_2.svg) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step:nth-of-type(3) .iconBox {
    background: url(../images/digital_process/digital_step_3.svg) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step:nth-of-type(4) .iconBox {
    background: url(../images/digital_process/digital_step_4.svg) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step:nth-of-type(5) .iconBox {
    background: url(../images/digital_process/digital_step_5.svg) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step:nth-of-type(6) .iconBox {
    background: url(../images/digital_process/digital_step_6.svg) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step:nth-of-type(7) .iconBox {
    background: url(../images/digital_process/digital_step_7.html) no-repeat center;
    background-size: 92%;
    background-color: #50cea0
}

body.digital .howWeDo .stepsRow .step .content {
    flex: 1;
    max-width: calc(50vw - 160px - 128px - 80px)
}

body.digital .howWeDo .stepsRow .step .content h4,
body.digital .howWeDo .stepsRow .step .content p {
    max-width: 400px
}

body.digital .howWeDo .stepsRow .step .content h4 {
    margin-bottom: 2rem;
    font-weight: 700
}

body.digital .howWeDo .stepsRow .step .content p {
    opacity: .7;
    letter-spacing: 3px;
    font-size: .9rem
}

body.digital .howWeDo .playground {
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    height: 100vh;
    width: 50vw;
    display: flex;
    align-items: center;
    justify-content: center
}

body.digital .howWeDo .playground p.specifications {
    font-family: 'Pixer', sans-serif;
    color: #50cea0;
    transition: transform .3s cubic-bezier(.77, 0, .18, 1), opacity .3s cubic-bezier(.77, 0, .18, 1)
}

body.digital .howWeDo .playground p.specifications.hidden {
    opacity: 0;
    transform: translateY(-40px)
}

body.digital .howWeDo .playground p.specifications span.textLine,
body.digital .introduction h2 span {
    display: block
}

body.digital .howWeDo .playground p.specifications span.textLine:first-of-type {
    margin-bottom: .5rem
}

body.digital .howWeDo .playground .uiBuilder {
    position: absolute;
    top: 0;
    right: 40px;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center
}

body.digital .howWeDo .playground .uiBuilder .row {
    margin-bottom: 16px
}

body.digital .howWeDo .playground .uiBuilder .row .block {
    position: relative;
    font-family: 'Pixer', sans-serif;
    text-align: center;
    border: 1px solid #50cea0;
    background: rgba(80, 206, 160, .1);
    transition: all .3s cubic-bezier(.77, 0, .18, 1)
}

body.digital .howWeDo .playground .uiBuilder .row .block pre {
    font-family: 'Pixer', sans-serif;
    pointer-events: none;
    text-align: left;
    line-height: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 5;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    padding: 1rem;
    margin: 0;
    font-size: .75rem;
    color: #fff;
    background: #09070a;
    border: 2px solid #fff;
    opacity: 0;
    transform: scale(1, 0);
    transition: opacity .3s cubic-bezier(.48, -.07, .52, 1.79), transform .3s cubic-bezier(.77, 0, .18, 1)
}

body.digital .howWeDo .playground .uiBuilder .row .block::before {
    content: '+';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #50cea0
}

body.digital .howWeDo .playground .uiBuilder .row .block div,
body.digital .howWeDo .playground .uiBuilder .row .block p,
body.digital .howWeDo .playground .uiBuilder .row .block::after {
    opacity: 0;
    transition: all .3s cubic-bezier(.77, 0, .18, 1)
}

body.digital .howWeDo .playground .uiBuilder .row .block.zoning {
    opacity: 1 !important;
    transform: translate(0, 0) scaleX(1) scaleY(1) !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.wireframe div,
body.digital .howWeDo .playground .uiBuilder .row .block.wireframe p,
body.digital .howWeDo .playground .uiBuilder .row .block.wireframe::after,
body.digital .howWeDo .playground .uiBuilder .row .block.zoning::before {
    opacity: 1 !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.wireframe::before {
    opacity: 0 !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui {
    border-color: #fff;
    color: #09070a;
    background: #fff;
    border-radius: 4px;
    font-family: 'Mont', sans-serif
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui .ui-only {
    display: block !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui .ui-hidden,
body.digital .howWeDo .playground .uiBuilder .row .block.ui.navigationBlock .filter span {
    display: none
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui .manifyingglass .line,
body.digital .howWeDo .playground .uiBuilder .row .block.ui .menu .line {
    background: red !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui .manifyingglass .circle,
body.digital .howWeDo .playground .uiBuilder .row .block.ui .menu .circle {
    border-color: red !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.navigationBlock {
    background: #09070a !important;
    color: #fff
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.navigationBlock .title,
body.digital .introduction .frame p strong {
    font-weight: 900
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.navigationBlock .selectors p {
    border-radius: 8px;
    background: 0 0 !important;
    color: #50cea0;
    margin-bottom: 16px
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.navigationBlock .filter {
    width: 100%;
    padding: 8px;
    border-radius: 8px;
    box-sizing: border-box;
    font-weight: 900;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .2)
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.navigationBlock .filter::after {
    content: '';
    display: inline-block;
    height: 12px;
    width: 12px;
    margin-left: 8px;
    background: url(../images/digital/filter_arrow.svg) no-repeat center;
    background-size: 100%
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.articleBlock {
    margin-top: 80px
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.articleBlock pre {
    padding: .5rem
}

body.digital .howWeDo .playground .uiBuilder .row .block.ui.articleBlock::after {
    display: block;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    bottom: -20px !important;
    right: calc(50% - 20px) !important;
    background: red !important
}

body.digital .howWeDo .playground .uiBuilder .row .block.dev pre {
    opacity: 1;
    transform: scale(1, 1)
}

body.digital .howWeDo .playground .uiBuilder .row .block.dev .ui-only.productPreview,
body.digital .howWeDo .playground .uiBuilder .row .block.dev.ui.articleBlock::after {
    opacity: 0 !important;
    transition: opacity .3s cubic-bezier(.77, 0, .18, 1)
}

body.digital .howWeDo .playground .uiBuilder .row .block.production {
    transform: scale(1.2) !important;
    opacity: 0 !important
}

body.digital .howWeDo .playground .uiBuilder .row.header,
body.digital .howWeDo .playground .uiBuilder .row.navigation {
    width: calc(31.25vw - 20px);
    margin: 0 0 16px auto
}

body.digital .howWeDo .playground .uiBuilder .row.header .block,
body.digital .howWeDo .playground .uiBuilder .row.navigation .block {
    padding: 8px 16px
}

body.digital .howWeDo .playground .uiBuilder .row.header .block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translate(0, 0) scaleX(.5) scaleY(0)
}

body.digital .howWeDo .playground .uiBuilder .row.header .block .manifyingglass,
body.digital .howWeDo .playground .uiBuilder .row.header .block .menu {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    width: 32px;
    height: 32px
}

body.digital .howWeDo .playground .uiBuilder .row.header .block .menu .line {
    height: 2px;
    width: 100%;
    background: #fff
}

body.digital .howWeDo .playground .uiBuilder .row.header .block .manifyingglass {
    transform: rotate(-45deg)
}

body.digital .howWeDo .playground .uiBuilder .row.header .block .manifyingglass .circle {
    width: 50%;
    height: 50%;
    border-radius: 50%;
    border: 2px solid #fff
}

body.digital .howWeDo .playground .uiBuilder .row.header .block .manifyingglass .line {
    width: 2px;
    flex: 1;
    background: #fff;
    transform: translateY(-2px)
}

body.digital .howWeDo .playground .uiBuilder .row.header .logo {
    height: 32px;
    -o-object-fit: contain;
    object-fit: contain
}

body.digital .howWeDo .playground .uiBuilder .row.navigation .block {
    transform-origin: right center;
    transform: translate(160px, 0) scaleX(0) scaleY(.5)
}

body.digital .howWeDo .playground .uiBuilder .row.navigation .block p.subtitle {
    color: #50cea0;
    text-align: left;
    margin: 16px 0 0
}

body.digital .howWeDo .playground .uiBuilder .row.navigation .block p.title {
    font-size: 2rem;
    text-align: left;
    margin-bottom: 1rem
}

body.digital .howWeDo .playground .uiBuilder .row.navigation .block .selectors {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px
}

body.digital .howWeDo .playground .uiBuilder .row.navigation .block .selectors p {
    padding: 8px 0;
    border: 1px solid #50cea0;
    background: rgba(80, 206, 160, .1);
    width: calc(33.33% - 12px)
}

body.digital .howWeDo .playground .uiBuilder .row.articles {
    display: flex;
    justify-content: space-between
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(12.5vw - 12px - 10px);
    height: calc(12.5vw - 12px - 10px);
    transform: translate(0, 80px) scaleX(1) scaleY(.5);
    opacity: 0
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block:nth-of-type(0) .productPreview {
    filter: hue-rotate(0deg)
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block:nth-of-type(1) .productPreview {
    filter: hue-rotate(60deg)
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block:nth-of-type(2) .productPreview {
    filter: hue-rotate(120deg)
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block:nth-of-type(3) .productPreview {
    filter: hue-rotate(180deg)
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block .productPreview {
    height: 120px;
    width: 100%;
    -o-object-fit: contain;
    object-fit: contain;
    position: absolute;
    top: -80px;
    left: 0
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block p.main {
    text-transform: uppercase;
    font-weight: 700;
    margin-bottom: 0
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block p.small {
    font-size: .75rem;
    color: rgba(9, 7, 10, .7)
}

body.digital .howWeDo .playground .uiBuilder .row.articles .block::after {
    content: '+';
    font-size: 2rem;
    position: absolute;
    right: 8px;
    bottom: 0
}

body.digital .introduction h2 {
    padding: 240px 24px;
    font-size: 4rem;
    text-align: center
}

body.digital .introduction h2 .pixer {
    font-family: 'Pixer', sans-serif
}

body.digital .introduction h2 .light {
    font-weight: 700;
    text-transform: uppercase;
    color: #50cea0;
    text-shadow: 0 0 30px rgba(80, 206, 160, .6)
}

body.digital .introduction .offers {
    position: relative;
    margin: 160px 40px
}

body.digital .introduction .offers .offer {
    max-width: 520px;
    margin: 80px auto;
    display: flex;
    opacity: .5;
    will-change: opacity;
    transition: opacity .8s cubic-bezier(.77, 0, .18, 1)
}

body.digital .introduction .offers .offer:hover {
    opacity: 1
}

body.digital .introduction .offers .offer img {
    width: 80px;
    height: 80px;
    margin-right: 40px
}

body.digital .introduction .offers .offer .content h3 {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .3rem;
    margin: 0 0 24px
}

body.digital .introduction .offers .offer .content p {
    letter-spacing: 2px
}

body.digital .introduction .offers .sky {
    position: absolute;
    top: 50%;
    left: 50%
}

body.digital .introduction .offers .sky .skyLayer {
    opacity: .3;
    will-change: opacity;
    transition: .8s opacity cubic-bezier(.77, 0, .18, 1)
}

body.digital .introduction .offers .sky .skyLayer img {
    position: absolute;
    width: 16px;
    height: 16px;
    top: -8px;
    left: -8px;
    transform: scale(.5);
    transition: .8s transform cubic-bezier(.77, 0, .18, 1)
}

body.digital .introduction .offers .sky.skyLayer-0 .skyLayer:nth-of-type(1),
body.digital .introduction .offers .sky.skyLayer-1 .skyLayer:nth-of-type(2),
body.digital .introduction .offers .sky.skyLayer-2 .skyLayer:nth-of-type(3) {
    opacity: 1
}

body.digital .introduction .offers .sky.skyLayer-0 .skyLayer:nth-of-type(1) img,
body.digital .introduction .offers .sky.skyLayer-1 .skyLayer:nth-of-type(2) img,
body.digital .introduction .offers .sky.skyLayer-2 .skyLayer:nth-of-type(3) img {
    transform: scale(1);
    filter: drop-shadow(0 1px 10px #fff)
}

body.digital .introduction .frame {
    height: 80em;
    display: flex;
    align-items: center;
    justify-content: center
}

body.digital .introduction .frame p {
    transform: rotate(90deg);
    letter-spacing: 6px;
    font-size: 1.5rem;
    flex: 0 0 80em;
    text-align: center;
    font-weight: 700
}

body.digital .introduction .frame p strong::after {
    content: '';
    display: inline-block;
    margin-left: 16px;
    height: 1.1rem;
    width: 2.2rem;
    background: url(../images/general/logo_gax_studio_black.svg) no-repeat center;
    background-size: 80% auto;
    background-color: #fff
}

body.digital section.weGaxYou {
    background: linear-gradient(to bottom, #09070a, #020d13)
}

body.digital section.weGaxYou video {
    pointer-events: none;
    display: block;
    max-height: 720px;
    height: 100vh;
    max-width: 100vw;
    -o-object-fit: cover;
    object-fit: cover;
    margin: 0 auto
}

@media screen and (max-width:560px) {
    body.digital .hero .computerScreen {
        top: 120px
    }
}

@media screen and (min-width:1480px) {
    body.digital .hero .computerScreen {
        top: 20vh
    }

    body.digital .hero .background .bubble:last-of-type {
        top: -20vh
    }
}

@media screen and (max-width:1320px) {
    body.digital .howWeDo .stepsRow {
        margin: 160px 80px 0
    }

    body.digital .howWeDo .stepsRow .step .content {
        max-width: calc(50vw - 80px - 128px - 80px)
    }
}

@media screen and (max-width:960px) {
    body.digital .howWeDo .stepsRow {
        margin: 160px 40px 0
    }

    body.digital .howWeDo .stepsRow .step .content {
        max-width: calc(50vw - 40px - 128px - 80px)
    }
}

@media screen and (max-width:850px) {
    body.digital .howWeDo .stepsRow {
        margin: 160px 24px 0
    }

    body.digital .howWeDo .stepsRow .step {
        background: linear-gradient(to bottom, #09090b 0, transparent 50%, transparent 80%, #09090b 100%)
    }

    body.digital .howWeDo .stepsRow .step .iconBox {
        margin-right: 32px
    }

    body.digital .howWeDo .stepsRow .step .content {
        max-width: none
    }

    body.digital .howWeDo .stepsRow .step .content h4 {
        margin-bottom: 1rem
    }

    body.digital .howWeDo .playground {
        z-index: -1;
        width: calc(100vw - 40px);
        height: 70vh;
        top: 30vh
    }

    body.digital .howWeDo .playground .uiBuilder .row.header,
    body.digital .howWeDo .playground .uiBuilder .row.navigation {
        width: calc(62.5vw - 20px)
    }

    body.digital .howWeDo .playground .uiBuilder .row.articles .block {
        width: calc(20vw - 12px - 10px);
        height: calc(20vw - 12px - 10px)
    }
}

@media screen and (max-width:560px) {
    body.digital .howWeDo .playground .uiBuilder .row.articles .block p.small {
        display: none !important
    }
}

@media screen and (max-width:450px) {
    body.digital .howWeDo .stepsRow .progressBar {
        left: 23px
    }

    body.digital .howWeDo .stepsRow .step .iconBox {
        width: 48px;
        height: 48px;
        margin-right: 24px
    }
}

@media screen and (min-width:1660px) {
    body.digital .howWeDo .stepsRow {
        width: 1440px;
        margin: 160px auto 0
    }

    body.digital .howWeDo .playground {
        right: 5vw
    }
}

@media screen and (max-width:960px) {
    body.digital .introduction h2 {
        padding: 160px 24px;
        font-size: 3rem
    }
}

@media screen and (max-width:560px) {
    body.digital .introduction h2 {
        font-size: 2rem
    }

    body.digital .introduction .offers .offer {
        flex-direction: column
    }

    body.digital .introduction .offers .offer img {
        margin-right: 0
    }

    body.digital .introduction .offers .offer .content {
        margin: 32px 16px 0
    }
}

@media screen and (min-width:1660px) {
    body.digital .introduction h2 {
        font-size: 5rem
    }
}

@media screen and (min-width:1840px) {
    body.digital .introduction h2 {
        font-size: 6rem
    }
}

@media screen and (max-width:740px) {
    body.digital section.projects {
        padding-top: 160px
    }
}

@media screen and (min-width:1660px) {
    body.digital section.weGaxYou video {
        margin: 80px auto
    }
}

@media screen and (min-width:1840px) {
    body.digital section.weGaxYou video {
        margin: 160px auto
    }
}

body.branding,
body.branding .projects {
    background: #101010
}

body.branding header .services a:nth-of-type(2) {
    opacity: 1;
    filter: sepia(1) brightness(1) saturate(5000%) hue-rotate(-73deg) brightness(1.1)
}

body.branding .projects .twoRowSection .projectsBox .projectArrow {
    background: linear-gradient(to right, rgba(16, 16, 16, 0) 0, #101010 100%)
}

body.branding section.footerCallToAction .localisation {
    mix-blend-mode: normal;
    opacity: .15;
    transform: translateY(20%)
}

body.branding .hero {
    position: relative;
    background: url(../images/branding/branding_cover.jpg) no-repeat center;
    background-size: cover;
    overflow: hidden
}

body.branding .hero .catchBox h1 {
    color: #ffb8c8;
    mix-blend-mode: overlay;
    transform: skew(-12deg);
    height: 1em;
    margin-bottom: 24px !important
}

body.branding .hero .catchBox p.tag {
    margin-top: 32px !important
}

body.branding .hero .decoImage {
    position: absolute;
    z-index: 5;
    will-change: transform
}

body.branding .hero .decoImage.logoPath {
    width: 22.5vw;
    top: 20vh;
    left: -7.5vw
}

body.branding .hero .decoImage.logoCircle {
    width: 15vw;
    bottom: 10vh;
    right: 10vh
}

body.branding .hero .decoImage.bottomWave {
    right: 0;
    bottom: -1px;
    left: 0;
    height: 20vh;
    background: url(../images/branding/branding_hero_shape.svg) no-repeat top center;
    background-size: 100% 100%;
    transform-origin: bottom
}

body.branding .howWeDo .scrollBanner h2 {
    -webkit-text-stroke: 2px #ffb8c8
}

body.branding .howWeDo h5,
body.branding .howWeDo h6 {
    border-bottom: 1px solid rgba(255, 255, 255, .6);
    margin: 160px 80px;
    font-size: .75rem
}

body.branding .howWeDo h5 {
    padding: 16px
}

body.branding .howWeDo h6 {
    border-bottom-style: dashed;
    width: 50%;
    padding: 8px 16px;
    box-sizing: border-box;
    font-style: normal;
    letter-spacing: .125rem
}

body.branding .howWeDo .content p {
    color: rgba(255, 255, 255, .6);
    max-width: 480px
}

body.branding .howWeDo .content p.body {
    font-size: .8rem;
    letter-spacing: 3px
}

body.branding .howWeDo .content p.subtitle {
    margin-bottom: 2rem !important;
    letter-spacing: .25rem;
    font-style: italic
}

body.branding .howWeDo .content .description p.subtitle {
    margin-bottom: .5rem !important;
    color: #fff
}

body.branding .howWeDo .spacedSubtitle {
    font-size: .6rem;
    letter-spacing: 12px;
    opacity: .55
}

body.branding .howWeDo .decoration {
    display: block;
    font-size: 16vw;
    color: transparent;
    font-weight: 700;
    letter-spacing: 2.75vw;
    white-space: nowrap;
    transform: translateX(-5vw) skew(-12deg)
}

body.branding .howWeDo .decoration.decorationTrends {
    position: relative;
    width: 100%;
    -webkit-text-stroke: 1px #fff
}

body.branding .howWeDo .decoration.decorationVibesFest {
    background: url(../images/branding/vibes_fest.svg) no-repeat left;
    background-size: contain;
    width: 200vw;
    height: 12vw;
    margin: 160px 0 0
}

body.branding .howWeDo .brief .festContainer {
    display: flex;
    position: relative;
    margin: 240px 160px 0 80px;
    justify-content: space-between
}

body.branding .howWeDo .brief .festContainer::before {
    content: 'BRANDING';
    display: block;
    padding-top: 24px;
    font-size: .8rem;
    letter-spacing: 2px;
    background: url(../images/general/branding.svg) no-repeat top;
    background-size: 16px;
    filter: sepia(1) brightness(1) saturate(5000%) hue-rotate(-73deg) brightness(1.1);
    position: absolute;
    top: -160px;
    right: -80px
}

body.branding .howWeDo .brief .festContainer::after {
    content: '';
    display: block;
    width: 72px;
    height: 12px;
    background: url(../images/general/logo_gax_studio.svg) no-repeat center;
    background-size: contain;
    position: absolute;
    right: -80px;
    top: calc(50% - 6px);
    transform: rotate(-90deg)
}

body.branding .howWeDo .brief .festContainer .spacedSubtitle {
    position: absolute;
    bottom: -80px;
    right: -40px
}

body.branding .howWeDo .brief .festContainer .visual {
    position: relative;
    flex: 1
}

body.branding .howWeDo .brief .festContainer .visual .imageBox {
    overflow: hidden;
    width: 60%;
    height: 100%;
    margin-left: 40%
}

body.branding .howWeDo .brief .festContainer .visual .imageBox img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    will-change: transform
}

body.branding .howWeDo .brief .festContainer .visual .tag {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    font-size: 10rem;
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    transform: translate(70%, -65%)
}

body.branding .howWeDo .brief .festContainer .visual .festBox {
    position: absolute;
    z-index: 5;
    width: 100%;
    text-align: center;
    top: 50%;
    left: -25%;
    transform-origin: top center;
    transform: rotate(90deg) translateY(-25%)
}

body.branding .howWeDo .brief .festContainer .visual .festBox span {
    display: block;
    font-size: 8rem;
    letter-spacing: 2rem;
    line-height: .9em;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    transform-origin: center
}

body.branding .howWeDo .brief .festContainer .visual .festBox span.dashed {
    background: url(../images/branding/fest.svg) no-repeat center;
    background-size: auto 75%;
    -webkit-text-stroke: 1px transparent
}

body.branding .howWeDo .brief .festContainer .visual .festBox span:last-of-type {
    color: #fff
}

body.branding .howWeDo .brief .festContainer .visual .festBox span:nth-of-type(2n+1) {
    transform: rotate(180deg) translateX(.05em)
}

body.branding .howWeDo .brief .festContainer .visual .festBox span:nth-of-type(1) {
    opacity: .76
}

body.branding .howWeDo .brief .festContainer .visual .festBox span:nth-of-type(2) {
    opacity: .52
}

body.branding .howWeDo .brief .festContainer .visual .festBox span:nth-of-type(3) {
    opacity: .28
}

body.branding .howWeDo .brief .festContainer .visual .festBox span:nth-of-type(4) {
    opacity: .04
}

body.branding .howWeDo .brief .festContainer .content {
    width: 40%;
    margin: 80px 0 80px 80px
}

body.branding .howWeDo .brief .festContainer .content p {
    max-width: 400px
}

body.branding .howWeDo .debrief h3 {
    text-align: center;
    margin: 0 24px;
    font-size: 2rem
}

body.branding .howWeDo .debrief h3 span::before {
    content: '';
    display: block;
    width: 1em;
    height: .66em;
    background: url(../images/home/quote.svg) no-repeat center;
    filter: brightness(10000%);
    background-size: 100%;
    position: absolute;
    top: -.33em;
    left: -1.5em
}

body.branding .howWeDo .debrief .content {
    position: relative;
    text-align: center;
    margin: 160px 0
}

body.branding .howWeDo .debrief .content p {
    margin: 0 auto
}

body.branding .howWeDo .debrief .content .side {
    position: absolute;
    top: 50%
}

body.branding .howWeDo .debrief .content .side p {
    margin: 0 !important;
    font-size: .6rem;
    line-height: 1;
    letter-spacing: 12px
}

body.branding .howWeDo .debrief .content .side p.main {
    font-weight: 700;
    font-size: 4rem;
    color: #fff
}

body.branding .howWeDo .debrief .content .side.left {
    left: 40px;
    transform: translateY(-50%) rotate(-90deg)
}

body.branding .howWeDo .debrief .content .side.right {
    right: 40px;
    transform: translateY(-50%) rotate(90deg)
}

body.branding .howWeDo .debrief .details {
    perspective: 800px;
    display: flex;
    justify-content: space-evenly;
    align-items: center
}

body.branding .howWeDo .debrief .details .detail {
    text-align: center
}

body.branding .howWeDo .debrief .details .detail.focus {
    filter: drop-shadow(0 0 10px #ffb8c8)
}

body.branding .howWeDo .debrief .details .detail img {
    width: 64px;
    height: 64px
}

body.branding .howWeDo .debrief .details .detail p {
    font-size: .9rem;
    margin-top: 16px;
    text-transform: uppercase;
    color: #ffb8c8;
    letter-spacing: .25rem
}

body.branding .howWeDo .trends .spacedSubtitle {
    margin: -80px 80px 120px;
    text-align: right;
    line-height: 2
}

body.branding .howWeDo .trends p.info {
    text-align: center;
    color: rgba(255, 255, 255, .6);
    font-size: .5rem;
    letter-spacing: .25rem
}

body.branding .howWeDo .trends .displays {
    margin: 16px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

body.branding .howWeDo .trends .displays .displayBox {
    width: calc((100vw - 160px)*.2 - 8px);
    height: calc(((100vw - 160px)*.2 - 8px)*4/3);
    overflow: hidden
}

body.branding .howWeDo .trends .displays .display {
    height: 100%;
    width: 100%
}

body.branding .howWeDo .trends .decoration {
    font-size: 7vw
}

body.branding .howWeDo .trends .content {
    margin: 80px 160px 240px;
    display: flex;
    align-items: center;
    position: relative
}

body.branding .howWeDo .trends .content .number {
    font-size: 8rem;
    margin-right: 40px;
    color: #ffb8c8
}

body.branding .howWeDo .trends .content .indicators {
    position: absolute;
    top: 85%;
    right: -80px;
    filter: sepia(1) brightness(1) saturate(5000%) hue-rotate(-73deg) brightness(1.1)
}

body.branding .howWeDo .trends .content .indicators img {
    width: 12px;
    height: 12px;
    margin: 8px 0;
    display: block
}

body.branding .howWeDo .inspiration .waitingBackground {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    opacity: 0;
    background: url(../images/branding/branding_texture.jpg) no-repeat center;
    background-size: cover;
    will-change: opacity, transform;
    transition: opacity .8s cubic-bezier(.77, 0, .18, 1)
}

body.branding .howWeDo .inspiration .waitingBackground.visible {
    opacity: .6
}

body.branding .howWeDo .inspiration .colors .colorsRow {
    display: flex;
    margin: 0 160px;
    justify-content: space-around
}

body.branding .howWeDo .inspiration .colors .colorsRow .color {
    width: 25%
}

body.branding .howWeDo .inspiration .colors .colorsRow .color.blue .colorItem {
    background: #0422af
}

body.branding .howWeDo .inspiration .colors .colorsRow .color.pink .colorItem {
    background: #feb8c8
}

body.branding .howWeDo .inspiration .colors .colorsRow .color h4 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    font-weight: 700
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine {
    width: 100%;
    display: flex
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine .colorItem {
    width: 20%;
    height: calc(4px + max(1vw, 2vh))
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine .colorItem:nth-of-type(0) {
    opacity: 1.2
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine .colorItem:nth-of-type(1) {
    opacity: 1
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine .colorItem:nth-of-type(2) {
    opacity: .8
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine .colorItem:nth-of-type(3),
body.branding .howWeDo .inspiration .daughters .brands .backgroundStack.focus-0 img:nth-of-type(1),
body.branding .howWeDo .inspiration .daughters .brands .backgroundStack.focus-1 img:nth-of-type(2),
body.branding .howWeDo .inspiration .daughters .brands .backgroundStack.focus-2 img:nth-of-type(3),
body.branding .howWeDo .inspiration .daughters .brands .backgroundStack.focus-3 img:nth-of-type(4) {
    opacity: .6
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorLine .colorItem:nth-of-type(4) {
    opacity: .4
}

body.branding .howWeDo .inspiration .colors .colorsRow .color .colorItem {
    width: 100%;
    height: calc(12px + max(3vw, 6vh))
}

body.branding .howWeDo .inspiration .colors .colorsRow .color span {
    display: block;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .25rem;
    margin: 2px 0
}

body.branding .howWeDo .inspiration .colors .colorsRow .color span:first-of-type {
    margin-top: 16px
}

body.branding .howWeDo .inspiration .colors .operation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 160px
}

body.branding .howWeDo .inspiration .colors .operation span {
    font-size: 2rem;
    letter-spacing: .5rem;
    text-transform: uppercase
}

body.branding .howWeDo .inspiration .colors .operation span.symbol {
    font-size: 8rem;
    margin: 0 40px;
    color: transparent;
    -webkit-text-stroke: 1px #fff
}

body.branding .howWeDo .inspiration .logo h5 {
    margin-bottom: 80px
}

body.branding .howWeDo .inspiration .logo .logoDisplay {
    position: relative
}

body.branding .howWeDo .inspiration .logo .logoDisplay::before {
    content: '';
    display: block;
    position: absolute;
    top: -8px;
    right: 60px;
    width: 72px;
    height: 36px;
    background: url(../images/general/logo_gax_studio.svg) no-repeat bottom;
    background-size: auto 16px;
    border-right: 1px solid #fff;
    transform-origin: center right;
    transform: rotate(-90deg)
}

body.branding .howWeDo .inspiration .logo .logoDisplay .logoAnnexe {
    margin: 0 80px;
    font-weight: 700;
    letter-spacing: 2px;
    font-size: .9rem;
    color: rgba(255, 255, 255, .6)
}

body.branding .howWeDo .inspiration .logo .logoDisplay .logoImage {
    display: block;
    margin: 160px auto;
    width: 20vw
}

body.branding .howWeDo .inspiration .logo .logoDisplay .content {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0 160px 160px
}

body.branding .howWeDo .inspiration .logo .logoDisplay .info p,
body.branding .howWeDo .inspiration .logo .logoDisplay .info span {
    color: #ffb8c8
}

body.branding .howWeDo .inspiration .logo .logoDisplay .info p {
    letter-spacing: .25rem;
    text-transform: uppercase
}

body.branding .howWeDo .inspiration .logo .logoDisplay .info .activities {
    transform-origin: top left;
    transform: rotate(-90deg) translateX(-85%)
}

body.branding .howWeDo .inspiration .logo .logoDisplay .info .activities span {
    font-size: .9rem;
    line-height: 1.8;
    display: block
}

body.branding .howWeDo .inspiration .logo .grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 50vw);
    grid-template-rows: repeat(2, 50vw)
}

body.branding .howWeDo .inspiration .logo .grid::before {
    content: '';
    display: block;
    position: absolute;
    opacity: .05;
    top: -8vw;
    left: -6vw;
    width: 20vw;
    height: 20vw;
    background: url(../images/branding/branding_logo_circle_filled.svg) no-repeat center;
    background-size: cover;
    transform: rotate(-10deg)
}

body.branding .howWeDo .inspiration .logo .grid .square {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden
}

body.branding .howWeDo .inspiration .logo .grid .square:first-of-type {
    filter: sepia(1) brightness(1) saturate(5000%) hue-rotate(-73deg) brightness(1.1)
}

body.branding .howWeDo .inspiration .logo .grid .square.smallImage img {
    width: 50%
}

body.branding .howWeDo .inspiration .logo .grid .square img {
    max-width: 100%;
    max-height: 100%
}

body.branding .howWeDo .inspiration .declinations {
    padding: 16px 0 0;
    background: red !important
}

body.branding .howWeDo .inspiration .declinations .guidesDisplay {
    margin: 0 160px 80px;
    display: flex;
    justify-content: space-evenly
}

body.branding .howWeDo .inspiration .declinations .guidesDisplay .logo {
    position: relative;
    width: 50%;
    max-width: 640px;
    display: flex;
    align-items: center;
    justify-content: center
}

body.branding .howWeDo .inspiration .declinations .guidesDisplay .logo.circle img {
    display: block;
    width: 40%;
    z-index: 2
}

body.branding .howWeDo .inspiration .declinations .guidesDisplay .logo.circle::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 1;
    height: 100vh;
    width: 60%;
    top: 50%;
    left: 20%;
    transform: translateY(-50%);
    background: url(../images/branding/circle_guidelines.svg) no-repeat center;
    background-size: contain
}

body.branding .howWeDo .inspiration .declinations .guidesDisplay .logo.singleLine img {
    width: calc(100% - 80px)
}

body.branding .howWeDo .inspiration .daughters h5,
body.branding .howWeDo .inspiration .graphicElements h5 {
    margin-bottom: 40px
}

body.branding .howWeDo .inspiration .daughters .content,
body.branding .howWeDo .inspiration .graphicElements .content {
    margin: 0 96px
}

body.branding .howWeDo .inspiration .graphicElements {
    position: relative
}

body.branding .howWeDo .inspiration .graphicElements .background {
    position: absolute;
    z-index: -1;
    top: -160px;
    right: 0;
    left: 0;
    bottom: -80px;
    background: url(../images/branding/grunge.png) no-repeat bottom;
    background-size: cover;
    opacity: .15
}

body.branding .howWeDo .inspiration .graphicElements .content .body {
    max-width: 560px
}

body.branding .howWeDo .inspiration .graphicElements .grid {
    margin: 0 120px;
    display: grid;
    grid-template-columns: repeat(3, 1fr)
}

body.branding .howWeDo .inspiration .graphicElements .grid .wave {
    margin: 80px 40px 40px
}

body.branding .howWeDo .inspiration .graphicElements .grid .wave img {
    width: 100%;
    display: block;
    margin-bottom: 16px
}

body.branding .howWeDo .inspiration .graphicElements .grid .wave p {
    text-align: center;
    font-size: .8rem
}

body.branding .howWeDo .inspiration .animatedLogo svg {
    width: 100%;
    height: auto;
    margin-top: 80px
}

body.branding .howWeDo .inspiration .daughters .content p {
    max-width: 960px
}

body.branding .howWeDo .inspiration .daughters .brands {
    position: relative;
    margin: 160px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

body.branding .howWeDo .inspiration .daughters .brands .backgroundStack {
    position: absolute;
    left: 37.5%;
    top: 50%;
    width: 25%;
    height: 0;
    z-index: -1;
    will-change: transform
}

body.branding .howWeDo .inspiration .daughters .brands .backgroundStack img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    will-change: opacity;
    transition: opacity .8s cubic-bezier(.77, 0, .18, 1)
}

body.branding .howWeDo .inspiration .daughters .brands .backgroundStack img:nth-of-type(2n) {
    transform: translate(0, -55%)
}

body.branding .howWeDo .inspiration .daughters .brands .backgroundStack img:nth-of-type(2n+1) {
    transform: translate(0, -45%)
}

body.branding .howWeDo .inspiration .daughters .brands .brand {
    width: 25%;
    text-align: center
}

body.branding .howWeDo .inspiration .daughters .brands .brand .logo {
    width: 25%;
    display: block;
    margin: 0 auto 16px
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox {
    position: relative;
    width: calc(min(90vh, 90vw));
    height: calc(min(74.7vh, 74.7vw));
    margin: 0 auto
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox.step-0 .name span:nth-of-type(1) {
    opacity: 1;
    transform: translateY(0)
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox.step-1 .name span:nth-of-type(2) {
    opacity: .5;
    transform: translateY(0)
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox.step-2 .name span:nth-of-type(3) {
    opacity: .333333333333333;
    transform: translateY(0)
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .logo,
body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .name,
body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .preview {
    will-change: transform
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .preview {
    width: 100%;
    height: 100%
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .logo {
    transform: translateY(-30vh);
    position: absolute;
    width: 20%
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .backVisual {
    position: absolute;
    -o-object-fit: contain;
    object-fit: contain
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .name {
    position: absolute
}

body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .name span {
    display: block;
    font-size: 6rem;
    line-height: .8;
    text-transform: uppercase;
    color: transparent;
    -webkit-text-stroke: 2px #feb8c8;
    opacity: 0;
    transform: translateY(-20%);
    will-change: opacity, transform;
    transition: opacity .5s cubic-bezier(.48, -.07, .52, 1.79), transform .5s cubic-bezier(.77, 0, .18, 1)
}

body.branding .howWeDo .inspiration .brandDisplay:nth-of-type(2n+1) .name span {
    -webkit-text-stroke: 2px #fff
}

body.branding .howWeDo .inspiration .music.brandDisplay .brandDisplayBox .logo {
    top: 0;
    left: 15%
}

body.branding .howWeDo .inspiration .music.brandDisplay .brandDisplayBox .name {
    bottom: 0;
    right: 0
}

body.branding .howWeDo .inspiration .music.brandDisplay .brandDisplayBox .name span {
    text-shadow: 0 0 20px rgba(255, 255, 255, .3)
}

body.branding .howWeDo .inspiration .music.brandDisplay .brandDisplayBox .backVisual {
    width: 35vw;
    height: 35vw;
    top: 95%;
    left: calc(50vw + (min(90vh, 90vw)/2) - 30vw)
}

body.branding .howWeDo .inspiration .food.brandDisplay .brandDisplayBox .logo {
    top: 10%;
    right: 22.5%;
    width: 17.5%
}

body.branding .howWeDo .inspiration .food.brandDisplay .brandDisplayBox .name {
    bottom: 0;
    left: 0
}

body.branding .howWeDo .inspiration .dance.brandDisplay .brandDisplayBox .name,
body.branding .howWeDo .inspiration .exhibit.brandDisplay .brandDisplayBox .name {
    top: 0;
    right: 0
}

body.branding .howWeDo .inspiration .exhibit.brandDisplay .brandDisplayBox .logo {
    bottom: 25%;
    right: 8%
}

body.branding .howWeDo .inspiration .exhibit.brandDisplay .brandDisplayBox .backVisual {
    width: 10vw;
    height: auto;
    top: -80px;
    left: calc(-1*(50vw - min(90vh, 90vw)/2 + 3.3vw))
}

body.branding .howWeDo .inspiration .dance.brandDisplay .brandDisplayBox .logo {
    top: 10%;
    left: 30%
}

body.branding .howWeDo .inspiration .dance.brandDisplay .brandDisplayBox .backVisual {
    width: 100vw;
    left: calc(-1*(50vw - min(90vh, 90vw)/2));
    top: 5%;
    z-index: -1
}

body.branding .howWeDo .inspiration .app {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 160px 10vw;
    height: 60vw;
    border-radius: 30vw;
    overflow: hidden
}

body.branding .howWeDo .inspiration .app .landingPage {
    display: block;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

@media not all and (-webkit-min-device-pixel-ratio:0),
not all and (min-resolution:.001dpcm) {
    @supports (-webkit-appearance:none) {
        body.branding .howWeDo .inspiration .app .landingPage {
            transform: none !important
        }
    }
}

body.branding section.introduction .explanation {
    padding: 240px 160px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

body.branding section.introduction .explanation .quote {
    width: calc(45% - 80px)
}

body.branding section.introduction .explanation .quote p {
    font-size: 1.25rem
}

body.branding section.introduction .explanation .quote p::after,
body.branding section.introduction .explanation .quote p::before {
    filter: hue-rotate(340deg) brightness(1.225)
}

body.branding section.introduction .explanation .content {
    width: calc(55% - 160px)
}

body.branding section.introduction .explanation .content p {
    font-size: .75rem;
    letter-spacing: 2px;
    opacity: .7;
    margin-top: 16px
}

body.branding section.introduction .example {
    font-size: 1.25rem;
    text-align: center;
    margin-bottom: 80px
}

body.branding section.introduction .example::after {
    content: '';
    display: block;
    width: 80px;
    height: 80px;
    margin: 16px auto 0;
    background: url(../images/branding/branding_next_hand.svg) no-repeat center;
    background-size: contain
}

@media screen and (max-width:1140px) {
    body.branding .howWeDo .inspiration .colors .operation {
        flex-direction: column;
        margin: 80px 0
    }

    body.branding .howWeDo .inspiration .daughters .brands {
        margin: 80px 160px
    }
}

@media screen and (max-width:960px) {
    body.branding .howWeDo .brief .festContainer {
        margin: 160px 80px 0
    }

    body.branding .howWeDo .brief .festContainer::before {
        top: -80px;
        right: -40px
    }

    body.branding .howWeDo .brief .festContainer::after,
    body.branding .howWeDo .trends .content .indicators,
    body.branding .howWeDo .trends .spacedSubtitle {
        display: none
    }

    body.branding .howWeDo .trends .content {
        margin: 80px 80px 0
    }

    body.branding .howWeDo .inspiration .colors .colorsRow {
        margin: 0 80px
    }

    body.branding .howWeDo .inspiration .logo .logoDisplay .logoImage {
        width: 25vw
    }

    body.branding .howWeDo .inspiration .logo .logoDisplay .logoAnnexe {
        margin: 0 40px;
        font-size: .7rem
    }

    body.branding .howWeDo .inspiration .logo .logoDisplay .content {
        margin: 0 80px 160px
    }

    body.branding .howWeDo .inspiration .declinations .guidesDisplay {
        margin: 0 80px 80px
    }

    body.branding .howWeDo .inspiration .daughters .content,
    body.branding .howWeDo .inspiration .graphicElements .content {
        margin: 0 56px
    }

    body.branding .howWeDo .inspiration .graphicElements .grid {
        margin: 0 40px
    }

    body.branding .howWeDo .inspiration .daughters .brands {
        margin: 80px
    }

    body.branding .howWeDo h5 {
        margin: 160px 40px 80px
    }

    body.branding .howWeDo h6 {
        margin: 160px 40px
    }
}

@media screen and (max-width:850px) {
    body.branding .howWeDo .debrief h3 {
        display: none
    }
}

@media screen and (max-width:740px) {
    body.branding .howWeDo .decoration.decorationVibesFest {
        margin-top: 80px
    }

    body.branding .howWeDo .brief .festContainer {
        flex-direction: column
    }

    body.branding .howWeDo .brief .festContainer::before {
        display: none
    }

    body.branding .howWeDo .brief .festContainer .visual .imageBox {
        width: 85%;
        margin-left: 15%
    }

    body.branding .howWeDo .brief .festContainer .visual .festBox span {
        font-size: 6rem;
        letter-spacing: 1.5rem
    }

    body.branding .howWeDo .brief .festContainer .visual .festBox span.dashed {
        background-size: auto 70%
    }

    body.branding .howWeDo .brief .festContainer .content {
        margin: 80px auto 0;
        width: auto
    }

    body.branding .howWeDo .debrief .content {
        margin: 80px 40px;
        text-align: left
    }

    body.branding .howWeDo .debrief .content .side.left {
        position: static;
        transform: none
    }

    body.branding .howWeDo .debrief .content .side.right {
        display: none
    }

    body.branding .howWeDo .debrief .content .side.left,
    body.branding .howWeDo .debrief .content h4 {
        max-width: 480px;
        margin: 8px auto
    }

    body.branding .howWeDo .debrief .details {
        flex-direction: column
    }

    body.branding .howWeDo .debrief .details .detail {
        margin-bottom: 80px
    }

    body.branding .howWeDo .debrief .details .detail:last-of-type {
        margin-bottom: 0
    }

    body.branding .howWeDo .trends .displays {
        margin: 16px -40px
    }

    body.branding .howWeDo .trends .displays .displayBox {
        width: calc((100vw + 80px)*.2 - 8px);
        height: calc(((100vw + 80px)*.2 - 8px)*4/3)
    }

    body.branding .howWeDo .inspiration .colors .colorsRow,
    body.branding .howWeDo .inspiration .declinations .guidesDisplay {
        flex-direction: column
    }

    body.branding .howWeDo .inspiration .colors .colorsRow .color {
        width: auto
    }

    body.branding .howWeDo .inspiration .colors .colorsRow .color:first-of-type,
    body.branding .howWeDo .inspiration .declinations .guidesDisplay .logo:first-of-type {
        margin-bottom: 80px
    }

    body.branding .howWeDo .inspiration .declinations .guidesDisplay .logo {
        width: 100%
    }

    body.branding .howWeDo .inspiration .graphicElements .grid {
        grid-template-columns: repeat(1, 1fr)
    }

    body.branding .howWeDo .inspiration .daughters .brands {
        margin: 80px 40px;
        flex-wrap: wrap
    }

    body.branding .howWeDo .inspiration .daughters .brands .brand {
        width: 50%;
        margin-bottom: 40px
    }

    body.branding .howWeDo .inspiration .app {
        margin: 80px 10vw
    }
}

@media screen and (max-width:560px) {
    body.branding .howWeDo h5 {
        margin: 80px 40px
    }

    body.branding .howWeDo .brief .festContainer {
        margin: 160px 40px 120px
    }

    body.branding .howWeDo .brief .festContainer .content {
        margin-top: 24px
    }

    body.branding .howWeDo .brief .festContainer .spacedSubtitle {
        bottom: -40px;
        right: 0
    }

    body.branding .howWeDo .brief .festContainer .visual .imageBox {
        margin-left: 0;
        width: 100%
    }

    body.branding .howWeDo .brief .festContainer .visual .tag {
        font-size: 4rem;
        right: 24px
    }

    body.branding .howWeDo .brief .festContainer .visual .festBox {
        left: -40%
    }

    body.branding .howWeDo .brief .festContainer .visual .festBox span {
        font-size: 3rem;
        letter-spacing: 1rem
    }

    body.branding .howWeDo .brief .festContainer .visual .festBox span.dashed {
        background-size: auto 80%
    }

    body.branding .howWeDo .trends .content {
        margin: 40px 40px 0
    }

    body.branding .howWeDo .trends .displays .displayBox {
        width: calc((100vw + 80px)*1/3 - 8px);
        height: calc(((100vw + 80px)*1/3 - 8px)*4/3)
    }

    body.branding .howWeDo .trends .displays .displayBox:first-of-type,
    body.branding .howWeDo .trends .displays .displayBox:last-of-type {
        display: none
    }

    body.branding .howWeDo .inspiration .colors .colorsRow {
        margin: 0 40px
    }

    body.branding .howWeDo .inspiration .logo .logoDisplay .logoImage {
        width: 35vw
    }

    body.branding .howWeDo .inspiration .logo .logoDisplay::before {
        display: none
    }

    body.branding .howWeDo .inspiration .logo .grid {
        grid-template-columns: repeat(1, 100vw);
        grid-template-rows: repeat(4, 100vw)
    }

    body.branding .howWeDo .inspiration .logo .grid .square:nth-of-type(3) {
        order: 5
    }

    body.branding .howWeDo .inspiration .declinations .guidesDisplay,
    body.branding .howWeDo .inspiration .logo .logoDisplay .content {
        margin: 0 40px 80px
    }

    body.branding .howWeDo .inspiration .animatedLogo {
        transform: scale(1.5)
    }

    body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .name span {
        font-size: 4rem
    }
}

@media screen and (max-width:450px) {
    body.branding .howWeDo .inspiration .brandDisplay .brandDisplayBox .name span {
        font-size: 3rem
    }

    body.branding .howWeDo .inspiration .animatedLogo {
        transform: scale(2)
    }
}

@media (pointer:coarse) {
    body.branding .howWeDo .inspiration .app .landingPage {
        transform: none !important
    }
}

@media screen and (min-width:1480px) {
    body.branding .howWeDo h4 {
        font-size: 2.2rem
    }

    body.branding .howWeDo p.subtitle {
        font-size: 1.1rem
    }

    body.branding .howWeDo .content p.body {
        font-size: .9rem
    }
}

@media screen and (min-width:1660px) {

    body.branding .howWeDo h5,
    body.branding .howWeDo h6 {
        margin: 240px 80px 160px
    }

    body.branding .howWeDo h4 {
        font-size: 2.4rem
    }

    body.branding .howWeDo p.subtitle {
        font-size: 1.2rem
    }

    body.branding .howWeDo .content p.body {
        font-size: 1rem
    }

    body.branding .howWeDo .debrief .details .detail img {
        width: 80px;
        height: 80px
    }

    body.branding .howWeDo .inspiration .daughters .brands {
        margin: 240px 160px 320px
    }
}

@media screen and (max-width:1230px) {
    body.branding section.introduction .explanation {
        padding: 160px 80px
    }
}

@media screen and (max-width:960px) {
    body.branding section.introduction .explanation {
        padding: 40px 160px 160px;
        flex-direction: column
    }

    body.branding section.introduction .explanation .quote {
        width: auto;
        margin-bottom: 80px
    }

    body.branding section.introduction .explanation .quote p {
        position: relative !important;
        left: 0;
        top: 0;
        transform: none
    }

    body.branding section.introduction .explanation .content {
        width: auto;
        text-align: center
    }
}

@media screen and (max-width:740px) {
    body.branding section.introduction .explanation {
        padding: 40px 80px 80px
    }
}

@media screen and (max-width:450px) {
    body.branding section.introduction .explanation {
        padding: 40px 40px 80px
    }
}

@media screen and (min-width:1660px) {
    body.branding section.introduction .explanation {
        width: 1280px;
        padding: 320px 0;
        margin: 0 auto
    }
}

@media screen and (min-width:1840px) {
    body.branding section.introduction .explanation {
        width: 1280px;
        margin: 0 auto
    }
}

body.imaginary,
body.imaginary section.projects {
    background: #140f26
}

body.imaginary .gallery {
    background: #140f26;
    padding-bottom: 160px
}

body.imaginary .gallery .galleryRow {
    position: relative;
    display: flex;
    align-items: center
}

body.imaginary .gallery .galleryRow.dragging .contextualViewBox .slider,
body.imaginary .gallery .galleryRow.dragging .largeViewBox .slider {
    transition: none
}

body.imaginary .gallery .galleryRow:nth-of-type(2n+1) .overlay {
    left: 0
}

body.imaginary .gallery .galleryRow:nth-of-type(2n+2) .overlay {
    right: 0
}

body.imaginary .gallery .galleryRow:nth-of-type(2n+2) .largeViewBox {
    order: -1
}

body.imaginary .gallery .galleryRow .overlay {
    position: absolute;
    z-index: 100;
    width: 60vw;
    bottom: 0
}

body.imaginary .gallery .galleryRow .overlay .content {
    padding: 40px
}

body.imaginary .gallery .galleryRow .overlay .content .themeIcon {
    width: 48px;
    height: 48px
}

body.imaginary .gallery .galleryRow .overlay .content h5 {
    margin: 8px 0;
    text-transform: uppercase;
    font-size: 1.3rem
}

body.imaginary .gallery .galleryRow .overlay .content p,
body.imaginary .introduction .row .content p {
    color: rgba(255, 255, 255, .6);
    font-size: .9rem;
    letter-spacing: 2px;
    max-width: 560px
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints {
    position: relative;
    display: flex;
    width: 60%;
    padding: 0 20%;
    justify-content: space-evenly
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #fff
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints .navPoint {
    position: relative;
    cursor: pointer;
    padding: 16px;
    transform: translateY(-24px)
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints .navPoint::after,
body.imaginary .gallery .galleryRow .overlay .navigationPoints .navPoint::before {
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints .navPoint::before {
    background: #fff
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints .navPoint::after {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #e14e3a !important;
    opacity: 0;
    will-change: opacity;
    transition: opacity .4s cubic-bezier(.77, 0, .18, 1)
}

body.imaginary .gallery .galleryRow .overlay .navigationPoints .navPoint.selected::after {
    opacity: 1
}

body.imaginary .gallery .galleryRow .contextualViewBox,
body.imaginary .gallery .galleryRow .largeViewBox {
    height: calc(100vh - 80px);
    overflow: hidden
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider,
body.imaginary .gallery .galleryRow .largeViewBox .slider {
    display: flex;
    height: 100%;
    will-change: transform;
    transition: transform .4s cubic-bezier(.77, 0, .18, 1)
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider .slide,
body.imaginary .gallery .galleryRow .largeViewBox .slider .slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider .slide img,
body.imaginary .gallery .galleryRow .largeViewBox .slider .slide img {
    display: block
}

body.imaginary .gallery .galleryRow .contextualViewBox {
    width: 60vw;
    position: relative
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider {
    position: absolute;
    top: 0;
    left: 0
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider:nth-of-type(2) {
    transition-delay: .05s
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider:nth-of-type(3) {
    transition-delay: .15s
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider .slide {
    position: relative
}

body.imaginary .gallery .galleryRow .contextualViewBox .slider .slide img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover
}

body.imaginary .gallery .galleryRow .largeViewBox {
    width: 40vw
}

body.imaginary .gallery .galleryRow .largeViewBox .slider {
    transition-delay: .1s
}

body.imaginary header .services a:nth-of-type(1) {
    opacity: 1;
    filter: sepia(1) brightness(.7) saturate(450%) hue-rotate(220deg)
}

body.imaginary section.projects .twoRowSection .projectsBox .projectArrow {
    background: linear-gradient(to right, rgba(20, 15, 38, 0) 0, #140f26 100%)
}

body.imaginary .hero .catchBox {
    color: #140f26;
    height: 70vh !important;
    margin-bottom: 30vh
}

body.imaginary .hero .catchBox h1 .gaxIcon {
    background: url(../images/general/logo_gax_studio_black_empty.svg) no-repeat center;
    background-size: contain !important;
    margin-left: -8px !important
}

body.imaginary .hero .catchBox .tag {
    color: #fff
}

body.imaginary .hero .parallaxBackground,
body.imaginary .hero .parallaxBackground img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh
}

body.imaginary .hero .parallaxBackground {
    pointer-events: none
}

body.imaginary .hero .parallaxBackground img {
    z-index: -1;
    -o-object-fit: cover;
    object-fit: cover
}

body.imaginary .hero .parallaxBackground img.light {
    z-index: 5;
    -o-object-fit: contain;
    object-fit: contain;
    top: 50vh
}

body.imaginary .introduction {
    padding: 160px 0;
    background: #140f26
}

body.imaginary .introduction .row {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 160px 160px
}

body.imaginary .introduction .row .content,
body.imaginary .introduction .row .illustration {
    width: 50%
}

body.imaginary .introduction .row .content .heartBeatBox,
body.imaginary .introduction .row .illustration .heartBeatBox {
    position: relative
}

body.imaginary .introduction .row .content .heartBeatBox img,
body.imaginary .introduction .row .illustration .heartBeatBox img {
    display: block;
    width: 100%
}

body.imaginary .introduction .row .content .heartBeatBox picture:last-of-type img,
body.imaginary .introduction .row .illustration .heartBeatBox picture:last-of-type img {
    position: absolute;
    top: 0;
    left: 0
}

body.imaginary .introduction .row .content .heartBeatBox .js-live,
body.imaginary .introduction .row .illustration .heartBeatBox .js-live {
    will-change: opacity
}

body.imaginary .introduction .row .content h5 {
    margin-bottom: 40px;
    font-weight: 700;
    font-size: 2rem
}

body.imaginary .introduction .row .content p.vibrate {
    position: relative;
    color: #fff;
    letter-spacing: 5px;
    line-height: 2;
    max-width: 400px;
    transform: translateY(-24px);
    font-weight: 700
}

body.imaginary .introduction .row .content p.vibrate::after,
body.imaginary .introduction .row .content p.vibrate::before {
    content: '';
    position: absolute;
    display: block;
    width: 60px;
    height: 40px;
    background: url(../images/general/quote-dashed.svg) no-repeat center;
    background-size: cover
}

body.imaginary .introduction .row .content p.vibrate::before {
    bottom: -56px;
    left: -68px
}

body.imaginary .introduction .row .content p.vibrate::after {
    top: -48px;
    right: -68px;
    transform: rotate(180deg)
}

body.imaginary .introduction .row .content .heartBeatBox {
    width: 90%;
    transform: translateX(-20%)
}

body.imaginary .introduction .row .illustration img {
    display: block;
    margin: 0 auto;
    width: 25vw
}

body.imaginary .introduction .row .illustration .heartBeatBox {
    margin: 0 auto;
    width: 25vw
}

body.imaginary .introduction .row:last-of-type {
    justify-content: space-between
}

body.imaginary .introduction .row:last-of-type .content,
body.imaginary .introduction .row:last-of-type .illustration {
    width: 45%
}

body.imaginary .tableOfContents {
    background: #140f26
}

body.imaginary .tableOfContents .headline {
    display: flex;
    align-items: center;
    justify-content: space-evenly
}

body.imaginary .tableOfContents .headline .handDown,
body.imaginary .tableOfContents .headline .taglineBlock {
    font-size: 12rem
}

body.imaginary .tableOfContents .headline .taglineBlock span.detail {
    opacity: .35
}

body.imaginary .tableOfContents .headline .handDown {
    width: 8vw;
    height: 8vw;
    margin-right: 80px;
    background: url(../images/general/mousePointer.svg) no-repeat center;
    background-size: contain;
    transform: rotate(180deg) rotateY(180deg) translateY(-.425em);
    -webkit-animation: handDownAnimation 2s cubic-bezier(.48, -.07, .52, 1.79) infinite;
    animation: handDownAnimation 2s cubic-bezier(.48, -.07, .52, 1.79) infinite
}

body.imaginary .tableOfContents .linksGallery {
    position: relative;
    padding: 160px;
    display: flex;
    flex-wrap: wrap
}

body.imaginary .tableOfContents .linksGallery::after,
body.imaginary .tableOfContents .linksGallery::before {
    content: '';
    display: block;
    position: absolute
}

body.imaginary .tableOfContents .linksGallery::before {
    height: 56px;
    width: 56px;
    background: url(../images/general/imaginary.svg) no-repeat center;
    background-size: 100%;
    filter: sepia(1) brightness(.7) saturate(450%) hue-rotate(220deg);
    left: 52px;
    top: calc(50% - 28px)
}

body.imaginary .tableOfContents .linksGallery::after {
    right: -5vw;
    bottom: 2.5vw;
    height: 20vw;
    width: 20vw;
    background: url(../images/imaginary/claws.svg) no-repeat center;
    background-size: 100%
}

body.imaginary .tableOfContents .linksGallery .themeLink {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 40px;
    isolation: isolate
}

body.imaginary .tableOfContents .linksGallery .themeLink:hover::before {
    opacity: 0
}

body.imaginary .tableOfContents .linksGallery .themeLink::after,
body.imaginary .tableOfContents .linksGallery .themeLink::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    left: 0;
    right: 0
}

body.imaginary .tableOfContents .linksGallery .themeLink::before {
    pointer-events: none;
    background: #140f26;
    height: 100%;
    z-index: 100;
    mix-blend-mode: color;
    transition: opacity .3s cubic-bezier(.48, -.07, .52, 1.79)
}

body.imaginary .tableOfContents .linksGallery .themeLink::after {
    height: 8vw;
    border-radius: 0 0 6vw 6vw;
    top: 8vw;
    background: linear-gradient(to top, #140f26 0, rgba(20, 15, 38, 0) 100%)
}

body.imaginary .tableOfContents .linksGallery .themeLink .previewImage {
    width: 12vw;
    height: 16vw;
    border-radius: 6vw;
    -o-object-fit: cover;
    object-fit: cover
}

body.imaginary .tableOfContents .linksGallery .themeLink .previewIcon {
    position: absolute;
    z-index: 10;
    top: calc(16vw - 20px);
    left: calc(50% - (20px));
    height: 40px;
    width: 40px
}

body.imaginary .tableOfContents .linksGallery .themeLink .themeName {
    margin-top: 24px;
    letter-spacing: 4px;
    text-transform: uppercase
}

@media screen and (max-width:740px) {
    body.imaginary .gallery .galleryRow {
        flex-direction: column;
        height: 90vh;
        height: calc(100vh - 80px)
    }

    body.imaginary .gallery .galleryRow .overlay {
        width: 100vw
    }

    body.imaginary .gallery .galleryRow .overlay .content {
        display: none
    }

    body.imaginary .gallery .galleryRow .contextualViewBox {
        width: 100vw;
        height: 60%
    }

    body.imaginary .gallery .galleryRow .largeViewBox {
        width: 100vw;
        height: 40%;
        order: -1
    }
}

@media screen and (max-width:1140px) {
    body.imaginary .introduction .row {
        margin: 0 80px 160px
    }
}

@media screen and (max-width:850px) {
    body.imaginary .introduction .row {
        margin: 0 40px 160px
    }
}

@media screen and (max-width:740px) {
    body.imaginary .introduction .row {
        flex-direction: column
    }

    body.imaginary .introduction .row:last-of-type {
        margin-bottom: 0
    }

    body.imaginary .introduction .row:last-of-type .content {
        width: 50%
    }

    body.imaginary .introduction .row:last-of-type .illustration {
        width: 100%
    }

    body.imaginary .introduction .row .content {
        width: auto
    }

    body.imaginary .introduction .row .content.description {
        order: 2;
        text-align: center;
        margin-top: 40px
    }

    body.imaginary .introduction .row .content .heartBeatBox {
        width: 100%;
        transform: none
    }

    body.imaginary .introduction .row .content p.vibrate {
        display: none
    }

    body.imaginary .introduction .row .illustration .heartBeatBox,
    body.imaginary .introduction .row .illustration img {
        width: 50vw
    }
}

@media screen and (min-width:1660px) {
    body.imaginary section.introduction .row {
        width: 1280px;
        margin: 0 auto 160px
    }
}

@media screen and (max-width:1230px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 10rem
    }
}

@media screen and (max-width:1140px) {
    body.imaginary .tableOfContents .linksGallery {
        padding: 160px 80px
    }

    body.imaginary .tableOfContents .linksGallery::before {
        left: 32px
    }
}

@media screen and (max-width:960px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 8rem
    }
}

@media screen and (max-width:850px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 6rem
    }

    body.imaginary .tableOfContents .headline .handDown {
        margin-right: 40px
    }

    body.imaginary .tableOfContents .linksGallery {
        padding: 160px 40px
    }

    body.imaginary .tableOfContents .linksGallery::before {
        height: 32px;
        width: 32px;
        left: 24px;
        top: calc(50% - 16px)
    }
}

@media screen and (max-width:740px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 5rem
    }

    body.imaginary .tableOfContents .linksGallery {
        padding: 80px 0 160px
    }

    body.imaginary .tableOfContents .linksGallery::after,
    body.imaginary .tableOfContents .linksGallery::before {
        display: none
    }

    body.imaginary .tableOfContents .linksGallery .themeLink {
        max-width: calc(50vw - 80px)
    }

    body.imaginary .tableOfContents .linksGallery .themeLink::after {
        height: 12vw;
        border-radius: 0 0 9vw 9vw;
        top: 12vw
    }

    body.imaginary .tableOfContents .linksGallery .themeLink .previewImage {
        width: 18vw;
        height: 24vw;
        border-radius: 9vw
    }

    body.imaginary .tableOfContents .linksGallery .themeLink .previewIcon {
        top: calc(24vw - 20px)
    }
}

@media screen and (max-width:560px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 4rem
    }

    body.imaginary .tableOfContents .linksGallery .themeLink {
        margin: 40px 24px;
        width: calc(50vw - 48px);
        max-width: calc(50vw - 48px)
    }

    body.imaginary .tableOfContents .linksGallery .themeLink::after {
        height: 16vw;
        border-radius: 0 0 12vw 12vw;
        top: 16vw
    }

    body.imaginary .tableOfContents .linksGallery .themeLink .previewImage {
        width: 24vw;
        height: 32vw;
        border-radius: 12vw
    }

    body.imaginary .tableOfContents .linksGallery .themeLink .previewIcon {
        top: calc(32vw - 20px)
    }
}

@media screen and (max-width:450px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 3rem
    }
}

@media screen and (min-width:1480px) {

    body.imaginary .tableOfContents .headline .handDown,
    body.imaginary .tableOfContents .headline .taglineBlock {
        font-size: 14vw
    }
}

@media screen and (min-width:1660px) {
    body.imaginary .tableOfContents .linksGallery {
        width: 1280px;
        padding: 160px auto;
        margin: 0 auto
    }

    body.imaginary .tableOfContents .linksGallery::before {
        left: 0
    }
}

body.digital .hero .catchBox {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center
}

body.branding .hero .catchBox {
    height: 100vh
}

body.branding .hero .catchBox,
body.imaginary .hero .catchBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center
}

body.branding .hero .catchBox h1,
body.digital .hero .catchBox h1,
body.imaginary .hero .catchBox h1 {
    font-size: 10rem;
    margin: 0;
    text-transform: uppercase;
    display: flex;
    align-items: baseline
}

body.digital .hero .catchBox h1 .gaxIcon {}

body.branding .hero .catchBox h1 .gaxIcon {
    margin-left: 16px;
    background-size: 80%;
    width: 48px;
    height: 24px
}

body.imaginary .hero .catchBox h1 .gaxIcon {
    width: 48px;
    height: 24px
}

body.branding .hero .catchBox p span,
body.digital .hero .catchBox p span,
body.imaginary .hero .catchBox p span {
    display: block;
    font-size: 1.25rem;
    font-style: italic
}

body.digital .hero .catchBox p.tag {
    margin-top: 56px
}

body.branding .hero .catchBox p.tag,
body.digital .hero .catchBox p.tag,
body.imaginary .hero .catchBox p.tag {
    text-transform: uppercase;
    letter-spacing: .9rem;
    font-size: .6rem
}

body.imaginary .hero .catchBox p.tag {
    margin-top: 56px
}

@media screen and (max-width:960px) {

    body.branding .hero .catchBox h1,
    body.digital .hero .catchBox h1,
    body.imaginary .hero .catchBox h1 {
        font-size: 8rem
    }
}

@media screen and (max-width:850px) {

    body.branding .hero .catchBox h1,
    body.digital .hero .catchBox h1,
    body.imaginary .hero .catchBox h1 {
        font-size: 6rem
    }
}

@media screen and (max-width:740px) {

    body.branding .hero .catchBox h1,
    body.digital .hero .catchBox h1,
    body.imaginary .hero .catchBox h1 {
        font-size: 5rem
    }

    body.branding .hero .catchBox h1 .gaxIcon,
    body.digital .hero .catchBox h1 .gaxIcon,
    body.imaginary .hero .catchBox h1 .gaxIcon {
        margin-left: 0 !important
    }
}

@media screen and (max-width:560px) {

    body.branding .hero .catchBox h1,
    body.digital .hero .catchBox h1,
    body.imaginary .hero .catchBox h1 {
        font-size: 4rem
    }

    body.branding .hero .catchBox h1 .gaxIcon,
    body.digital .hero .catchBox h1 .gaxIcon,
    body.imaginary .hero .catchBox h1 .gaxIcon {
        width: 40px;
        height: 20px
    }
}

@media screen and (max-width:450px) {

    body.branding .hero .catchBox h1,
    body.digital .hero .catchBox h1,
    body.imaginary .hero .catchBox h1 {
        font-size: 3rem
    }

    body.branding .hero .catchBox h1 .gaxIcon,
    body.digital .hero .catchBox h1 .gaxIcon,
    body.imaginary .hero .catchBox h1 .gaxIcon {
        width: 32px;
        height: 16px
    }
}

body.terms_and_conditions main {
    width: calc(100vw - 40px);
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 0 80px
}

body.terms_and_conditions main h4 {
    margin: 32px 0 16px
}

body.terms_and_conditions main h4 h5 {
    margin: 16px 0 8px
}

@media screen and (max-width:560px) {

    body.about section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
    body.home section.servicesByIcon .servicesView .servicesIconsBox .serviceIcon,
    header.miniaturized,
    nav {
        -webkit-backdrop-filter: none;
        backdrop-filter: none
    }

    nav {
        background: rgba(0, 0, 0, .75)
    }

    html.is-animating .contentContainer {
        filter: brightness(.8)
    }

    body.about section.hero .Colors,
    body.home section.hero .Colors {
        filter: none
    }

    body.about section.whoWeAre .studio .backgroundSliderContainer,
    body.home section.whoWeAre .studio .backgroundSliderContainer {
        filter: brightness(.15)
    }
}

/*# sourceMappingURL=main.min.css.map */

    .row1 {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-around;
        margin-right: -15px;
        margin-left: -15px;
    }

    .col-4 {
        flex: 0 0 auto;
        width: 33.3333333333%;
        max-width: 33.3333333333%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .container {
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
        text-align: center;
    }


    .startButton1 {
        /* Estilos normales */
        transition: transform 0.3s ease;
    }

    .startButton1:hover {
        /* Estilos al pasar el mouse */
        transform: scale(1.1);
        /* Ajusta el valor según sea necesario */
    }


    .smiley {
        width: 8em;
        height: 8em;
    }

    .smiley__eye1,
    .smiley__eye2,
    .smiley__mouth1,
    .smiley__mouth2 {
        animation: eye1 3s ease-in-out infinite;
    }

    .smiley__eye1,
    .smiley__eye2 {
        transform-origin: 64px 64px;
    }

    .smiley__eye2 {
        animation-name: eye2;
    }

    .smiley__mouth1 {
        animation-name: mouth1;
    }

    .smiley__mouth2 {
        animation-name: mouth2;
        visibility: hidden;
    }

    /* Dark theme */
    @media (prefers-color-scheme: dark) {
        :root {
            --bg: hsl(var(--hue), 90%, 10%);
            --fg: hsl(var(--hue), 90%, 90%);
        }
    }

    /* Animations */
    @keyframes eye1 {
        from {
            transform: rotate(-260deg) translate(0, -56px);
        }

        50%,
        60% {
            animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1);
            transform: rotate(-40deg) translate(0, -56px) scale(1);
        }

        to {
            transform: rotate(225deg) translate(0, -56px) scale(0.35);
        }
    }

    @keyframes eye2 {
        from {
            transform: rotate(-260deg) translate(0, -56px);
        }

        50% {
            transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
        }

        52.5% {
            transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1, 0);
        }

        55%,
        70% {
            animation-timing-function: cubic-bezier(0, 0, 0.28, 1);
            transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
        }

        to {
            transform: rotate(150deg) translate(0, -56px) scale(0.4);
        }
    }

    @keyframes eyeBlink {

        from,
        25%,
        75%,
        to {
            transform: scaleY(1);
        }

        50% {
            transform: scaleY(0);
        }
    }

    @keyframes mouth1 {
        from {
            animation-timing-function: ease-in;
            stroke-dasharray: 0 351.86;
            stroke-dashoffset: 0;
        }

        25% {
            animation-timing-function: ease-out;
            stroke-dasharray: 175.93 351.86;
            stroke-dashoffset: 0;
        }

        50% {
            animation-timing-function: steps(1, start);
            stroke-dasharray: 175.93 351.86;
            stroke-dashoffset: -175.93;
            visibility: visible;
        }

        75%,
        to {
            visibility: hidden;
        }
    }

    @keyframes mouth2 {
        from {
            animation-timing-function: steps(1, end);
            visibility: hidden;
        }

        50% {
            animation-timing-function: ease-in-out;
            visibility: visible;
            stroke-dashoffset: 0;
        }

        to {
            stroke-dashoffset: -351.86;
        }
    }

    body.digital .introduction h2 .light {
        font-weight: 700;
        text-transform: uppercase;
        color: #F06202 !important;
        text-shadow: 0 0 30px rgba(80, 206, 160, .6);


    }



    .howWeDo .scrollBanner h2 {
        -webkit-text-stroke: 2px white !important;
    }

    body.digital footer .startButton,
    body.digital section.footerCallToAction .startButton,
    body.digital section.projects .twoRowSection .info h4 {
        color: #26ae0c !important;


    }

    body.digital footer,
    body.digital section.footerCallToAction,
    body.digital section.projects .controlPointBox .controlPoint::after {
        background: #F06202 !important;
    }


    body.digital footer,
    body.digital section.footerCallToAction,
    body.digital section.projects .controlPointBox .controlPoint::after {
        background: #F06202 !important
    }


    body.digital .howWeDo .playground .uiBuilder .row .block.ui.articleBlock::after {
        display: block;
        height: 40px;
        width: 40px;
        border-radius: 50%;
        bottom: -20px !important;
        right: calc(50% - 20px) !important;
        background: #F06202 !important
    }

    .whatsapp-button {
        position: fixed;
        bottom: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        background-color: #25D366;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
        animation: pulse 1.5s infinite;
    }

    .ondas {
        background-color: white !important;
    color: #F06202 !important;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    animation: pulse1 1.5s infinite;
    }


    .whatsapp-button img {
        width: 30px;
        height: 30px;
    }

    @keyframes pulse {
        0% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.75);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        }
    }

    @keyframes pulse1 {
        0% {
            box-shadow: 0 0 0 0 rgba(251, 251, 251, 0.75);
        }

        70% {
            box-shadow: 0 0 0 20px rgba(37, 211, 102, 0);
        }

        100% {
            box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
        }
    }


    body.digital .introduction .offers .offer img {
        width: 215px;
        height: 252px !important;
        margin-top: -15%;
        margin-right: 0px;
    }

    /* Mantiene tus estilos originales para el body */




    .particle {
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        /* Ignorar el puntero */
        opacity: 0.7;
    }

    .brandingIcon {
        background: url('assets/images/general/iconofo.png') no-repeat center !important;
        background-size: contain;
    }

    .wrapper {
        max-width: 1000px;
        margin: 0 auto;
        padding: 32px;
    }

    /* a partir de aqui el CSS de las animaciones */

    @keyframes anim-fade-in {
        from {
            opacity: 0;
        }

        to {
            opacity: 1
        }
    }

    @keyframes anim-up {
        from {
            opacity: 0;
            transform: translateY(100px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    @keyframes anim-down {
        from {
            opacity: 0;
            transform: translateY(-100px);
        }

        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }

    @keyframes anim-left {
        from {
            opacity: 0;
            transform: translateX(100px);
        }

        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    @keyframes anim-right {
        from {
            opacity: 0;
            transform: translateX(-100px);
        }

        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }

    .anim-up,
    .anim-down,
    .anim-left,
    .anim-right,
    .anim-fade-in {
        animation-duration: 2s;
        /* la animacion dura X segundos */
        animation-delay: 1s;
        /* esperamos X segundos antes de hacer la animacion */
        animation-fill-mode: both;
        /* aplica estilos de la animacion antes y despues de reproducirla */
    }

    .anim-up {
        animation-name: anim-up;
    }

    .anim-down {
        animation-name: anim-down;
    }

    .anim-left {
        animation-name: anim-left;
    }

    .anim-right {
        animation-name: anim-right;
    }

    .anim-fade-in {
        animation-name: anim-fade-in;
    }

    .anim-pause-2 {
        animation-delay: 2s;
    }

    /* la animacion empieza en 2 seg. */
    .anim-pause-3 {
        animation-delay: 3s;
    }

    /* la animacion empieza en 3 seg. */
    .anim-pause-4 {
        animation-delay: 4s;
    }

    /* la animacion empieza en 4 seg. */
    .anim-pause-5 {
        animation-delay: 5s;
    }

    /* la animacion empieza en 5 seg. */

    /* todas las animaciones pausadas */
    .paused * {
        animation-play-state: paused;
    }

    .container1 {
        position: relative;
        width: 320px;
        margin: 100px auto 0 auto;
        perspective: 1000px;
    }

    .carousel {
        position: absolute;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        animation: rotate360 60s infinite forwards linear;
    }

    .carousel__face {
        position: absolute;
        width: 300px;
        height: 187px;
        top: 20px;
        left: 10px;
        right: 10px;
        background-size: cover;
        box-shadow:none;
        display: flex;
    }
    body.digital .projects {
background: #09070a;
}




    .carousel__face:nth-child(1) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(0deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(2) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(40deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(3) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(80deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(4) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(120deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(5) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(160deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(6) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(200deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(7) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(240deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(8) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(280deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(9) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(320deg) translateZ(430px);
        background-size: cover;
    }

    .carousel__face:nth-child(10) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(320deg) translateZ(430px);
        background-size: contain;
    }

    .carousel__face:nth-child(11) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(0deg) translateZ(430px);
    }

    .carousel__face:nth-child(12) {
        background-image: url("assets/images/general/unoweb.png");
        transform: rotateY(40deg) translateZ(430px);
    }

    .carousel__face:nth-child(13) {
        background-image: url("");
        transform: rotateY(80deg) translateZ(430px);
    }

    .carousel__face:nth-child(14) {
        background-image: url("");
        transform: rotateY(120deg) translateZ(430px);
    }

    .carousel__face:nth-child(15) {
        background-image: url("");
        transform: rotateY(160deg) translateZ(430px);
    }

    .carousel__face:nth-child(16) {
        background-image: url("");
        transform: rotateY(200deg) translateZ(430px);
    }

    .carousel__face:nth-child(17) {
        background-image: url("");
        transform: rotateY(240deg) translateZ(430px);
    }

    .carousel__face:nth-child(18) {
        background-image: url("");
        transform: rotateY(280deg) translateZ(430px);
    }

    .carousel__face:nth-child(19) {
        background-image: url("");
        transform: rotateY(320deg) translateZ(430px);
    }

    .carousel__face:nth-child(20) {
        background-image: url("");
        transform: rotateY(320deg) translateZ(430px);
    }

    .carousel__face:nth-child(21) {
        background-image: url("");
        transform: rotateY(0deg) translateZ(430px);
    }

    .carousel__face:nth-child(22) {
        background-image: url("");
        transform: rotateY(40deg) translateZ(430px);
    }

    .carousel__face:nth-child(23) {
        background-image: url("");
        transform: rotateY(80deg) translateZ(430px);
    }

    .carousel__face:nth-child(24) {
        background-image: url("");
        transform: rotateY(120deg) translateZ(430px);
    }

    .carousel__face:nth-child(25) {
        background-image: url("");
        transform: rotateY(160deg) translateZ(430px);
    }

    .carousel__face:nth-child(26) {
        background-image: url("");
        transform: rotateY(200deg) translateZ(430px);
    }

    .carousel__face:nth-child(27) {
        background-image: url("");
        transform: rotateY(240deg) translateZ(430px);
    }

    .carousel__face:nth-child(28) {
        background-image: url("");
        transform: rotateY(280deg) translateZ(430px);
    }

    .carousel__face:nth-child(29) {
        background-image: url("");
        transform: rotateY(320deg) translateZ(430px);
    }

    .carousel__face:nth-child(30) {
        background-image: url("");
        transform: rotateY(320deg) translateZ(430px);
    }




    @keyframes rotate360 {
        from {
            transform: rotateY(0deg);
        }

        to {
            transform: rotateY(-360deg);
        }
    }

    body.digital .howWeDo .stepsRow .step:nth-of-type(1) .iconBox {
        background: url('assets/images/general/lg1.png') no-repeat center;
        background-size: 92%;
        background-color: white;
    }

    body.digital .howWeDo .stepsRow .step:nth-of-type(2) .iconBox {
        background: url('assets/images/general/lg2.png') no-repeat center;
        background-size: 92%;
        background-color: white;
    }

    body.digital .howWeDo .stepsRow .step:nth-of-type(3) .iconBox {
        background: url('assets/images/general/lg3.png') no-repeat center;
        background-size: 92%;
        background-color: white;
    }

    body.digital .howWeDo .stepsRow .step:nth-of-type(4) .iconBox {
        background: url('assets/images/general/lg4.png') no-repeat center;
        background-size: 92%;
        background-color: white;
    }

    body.digital .howWeDo .stepsRow .step:nth-of-type(5) .iconBox {
        background: url('assets/images/general/lg5.png') no-repeat center;
        background-size: 92%;
        background-color: white;
    }

    body.digital .howWeDo .stepsRow .step:nth-of-type(6) .iconBox {
        background: url('assets/images/general/lg6.png') no-repeat center;
        background-size: 92%;
        background-color: white;
    }

    body.digital .howWeDo .stepsRow .step.active .iconBox {
opacity: 1;
box-shadow: 0 2px 50px white;
}

    .cursor-trail {
        position: absolute;
        width: 20px;
        height: 20px;
        background: radial-gradient(circle, rgba(255, 165, 0, 1) 0%, rgba(255, 165, 0, 0) 100%);
        border-radius: 50%;
        pointer-events: none;
        transform: scale(1);
        transition: transform 0.1s, opacity 0.5s;
        opacity: 1;
    }

    body.digital .howWeDo .playground .uiBuilder .row .block.ui.articleBlock pre {
        padding: .5rem;
        background: WHITE;
    }

    section.footerCallToAction .localisation {

        top: -200px !important;

    }

    body.digital .hero .catchBox {
        height: 100vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    body.digital .introduction .offers {
        position: relative;
        margin: 60px 40px;
    }

    body.digital .introduction h2 {
        padding: 0;
        font-size: 4rem;
        text-align: center;
    }



    @media (max-width: 767px) {
        .responsivetitulo {
            color: #Fff !important;
            font-family: 'Mont', sans-serif !important;
            font-size: 45px !important;

        }
    }


    @media (max-width: 767px) {
        .responsivelogo {
            margin-bottom: 30px !important;
            width: 100% !important;
            margin-top: -20% !important;

        }
    }


    @media (max-width: 767px) {
        body.digital .hero .catchBox {
            height: 100vh;

        }
    }

    @media (max-width: 767px) {
        .anim-right {
            font-size: 30px !important;

        }
    }

    @media (max-width: 767px) {
        .responsivetext {
            font-size: 24px !important;

        }
    }

    @media (max-width: 767px) {
        .responsivep {
            width: 339px !important;
            font-size: 20px !important;


        }
    }


    @media (max-width: 767px) {
        .responsiveh {
            width: 368px !important;
            margin-left: -100px !important;


        }
    }

    @media (max-width: 767px) {
        .responsivecontact {
            width: 350px !important;
            margin-left: -100% !important;


        }
    }

    @media (max-width: 767px) {
        .responsivecontact2 {
            width: 350px !important;
            margin-left: -10% !important;


        }
    }
    @media (max-width: 767px) {
        .responsivecontact1 {
            margin-top: 30% !important;
            color: white !important;
            width: 20px !important;
            margin-left: 160px !important;
        }

        @media (max-width: 767px) {
        .responsivecontact2{
            width: 550px !important;
            margin-left: -45% !important;
        
        }



        @media (max-width: 767px) {
            .container1 {
                width: 161px !important;
                margin: 65px auto auto !important;
                perspective: 3000px !important;
                padding: 0% 0% 50% 0% !important;
                margin-top: -30% !important;
            }

            @media (max-width: 767px) {
                .responsivetop {
                    margin-top: -60% !important;
                }

                @media screen and (max-width: 450px) {
                    .footerCallToAction .localisation {
                        width: 240px;
                        height: 240px;
                        display: none !important;
                    }
                }

                @media screen and (max-width: 450px) {
                    .text1 {
                    font-size: 15px !important;
                    }
                }