/* @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,200;1,300;1,400&family=Staatliches&display=swap"); */
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@100;200;300;500&display=swap");
* {
    /*orange : #f37024;*/
    /*blue: #1e396e*/
    /*green : #5ab381;*/
    /*gray : #dddde7;*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
::selection {
    background-color: #1e396e;
    color: #fff;
}

/* @charset "UTF-8"; */
a img,
button {
    border: none;
}
a,
abbr,
address,
article,
aside,
audio,
b,
blockquote,
body,
button,
canvas,
caption,
cite,
code,
dd,
del,
details,
/*dfn,*/
div,
dl,
dt,
em,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
mark,
menu,
nav,
object,
ol,
p,
pre,
q,
samp,
section,
small,
span,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
ul,
var,
video {
    padding: 0;
    margin: 0;
}
#top-bar,
body,
html {
    width: 100%;
}
#top-bar {
    position: absolute;
}
/* Originally absolute, so the logo scrolled away with the page content while
   the hamburger toggle next to it (#nav-toggle) stayed fixed — the top bar
   looked like it "disappeared" on scroll because half of it did. Pin it like
   the toggle so the whole bar stays put. */
#logo {
    position: fixed;
}
#logo,
#logo svg,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

/* Manual Edits  */
.text-align-left {
    text-align: left;
}
.text-align-right {
    text-align: right;
}
.text-align-center {
    text-align: center;
}
.align__items {
    align-items: center;
}

#nav-is-open:checked ~ #nav-toggle #nav-toggle__list,
.js #logo,
.js #nav,
.nav-toggle--close #nav-toggle__list {
    visibility: hidden;
}
#ajax-loading-page,
#ajax-loading__outer,
#home-landing__bg,
#home-page,
#main-loading__outer,
.home-screen {
    overflow: hidden;
}
#contact__form input:focus,
#contact__form select:focus,
#contact__form textarea:focus,
#solutions__material__select__input:focus,
.contact__form__subject__item label:focus,
a,
a:active,
a:hover,
button {
    outline: 0;
}
html {
    box-sizing: border-box;
    height: 100%;
}
*,
:after,
:before {
    box-sizing: inherit;
}
li {
    list-style-type: none;
}
@font-face {
    font-family: gt_walsheim;
    src: url(../fonts/GT\ Walsheim\ Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: gt_walsheim;
    src: url(../fonts/GT\ Walsheim\ Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: gt_walsheim;
    src: url(../fonts/GT\ Walsheim\ Pro\ Regular\ Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: roboto;
    src: url(../fonts/Roboto-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: roboto;
    src: url(../fonts/Roboto-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
body {
    min-height: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: roboto, Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1em;
    overflow-x: hidden;
}
a {
    text-decoration: none;
    color: #1e396e;
}
button {
    cursor: pointer;
    background: 0 0;
    border-radius: 0;
}
button:disabled {
    cursor: default;
}
#top-bar {
    top: 0;
    left: 0;
    z-index: 50;
}
#Logo {
    width: auto;
    height: 90px;
    /* border: 1px solid #1e396e; */
    padding: 10px;
    border-radius: 20px;
    object-fit: contain;
}
#logo {
    top: 10px;
    left: 6.28%;
    width: 114px;
    height: 35px;
    max-width: 120px;
    z-index: 60;
    transform-origin: top left;
    transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}
@media only screen and (max-width: 600px) {
    #Logo {
        width: 140px;
        height: 70px;
        /* border: 1px solid #1e396e; */
        /*padding: 10px;*/
        border-radius: 20px;
    }
}
@media screen and (min-width: 1024px) {
    #logo {
        left: 7.23%;
        width: 87px;
        height: 27px;
        max-width: none;
    }
}
@media screen and (min-width: 1280px) {
    #logo {
        left: 8.13%;
        width: 96px;
        height: 30px;
        margin-left: -40px;
    }
    .page-id-home #logo {
        width: 114px;
        height: 35px;
        margin-left: 0;
    }
    .page-id-about #logo,
    .page-id-contact #logo,
    .page-id-terms #logo {
        margin-left: 0;
    }
    #logo.logo--small {
        transform: translateX(-42.11%) scale(0.8772, 0.8772);
    }
}
#logo path {
    fill: #fff;
    transition: fill 0.7s;
}
#logo.logo--dark path,
.page-id-about #logo path,
.page-id-not-found #logo path,
.page-id-process #logo path,
.page-id-solutions #logo path {
    fill: #000;
}
#nav-is-open {
    display: none;
}
#nav-toggle {
    position: fixed;
    top: 0;
    right: 0;
    display: block;
    width: 87px;
    height: auto;
    visibility: inherit;
    z-index: 100;
    cursor: pointer;
}
#nav-toggle__cross,
#nav-toggle__list,
.nav-toggle__cross__line,
.nav-toggle__list__line {
    position: absolute;
    display: block;
}
.is-ie #nav-toggle {
    background-color: rgba(255, 0, 0, 0.001);
}
#nav-is-open:checked ~ #nav-toggle,
#nav-toggle.nav-toggle--close {
    background-color: #f37024;
    transition: background-color 0.4s;
}
.no-touchevents #nav-is-open:checked ~ #nav-toggle:hover,
.no-touchevents #nav-toggle.nav-toggle--close:hover {
    background-color: #f37024;
}
#nav-toggle::before {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 82.69%;
}
#nav-toggle__list {
    top: 50%;
    right: 30.23%;
    width: 30px;
    height: 19px;
    margin-top: -10px;
}
@media screen and (min-width: 1024px) {
    .page-id-contact #logo path,
    .page-id-process #logo path,
    .page-id-projects #logo path,
    .page-id-terms #logo path {
        fill: #000;
    }
    #nav-toggle {
        right: 0.97%;
        width: 86px;
        max-width: none;
        height: 82px;
    }
    #nav:not(.nav--fullscreen) #nav-toggle {
        visibility: hidden;
    }
    #nav-toggle::before {
        content: none;
    }
    #nav-toggle__list {
        right: 42px;
    }
}
.nav-toggle__list__line {
    right: 0;
    width: 100%;
    height: 3px;
    background-color: #fff;
    transition: background-color 0.7s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.line__color {
    background-color: #f48c50 !important;
}
.no-touchevents #nav-toggle:hover .nav-toggle__list__line {
    transition: background-color 0.3s, transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: #d4d4d4;
    transform: translateX(50%);
}
.nav-toggle--dark .nav-toggle__list__line,
.page-id-about .nav-toggle__list__line,
.page-id-not-found .nav-toggle__list__line,
.page-id-process .nav-toggle__list__line,
.page-id-solutions .nav-toggle__list__line {
    background-color: #f48c50;
}
@media screen and (min-width: 1024px) {
    .page-id-contact .nav-toggle__list__line,
    .page-id-terms .nav-toggle__list__line {
        background-color: #000;
    }
}
.no-touchevents #nav-toggle.nav-toggle--dark:hover .nav-toggle__list__line {
    background-color: #6f6f6f;
}
.nav-toggle__list__line:nth-child(1) {
    top: 0;
}
.nav-toggle__list__line:nth-child(2) {
    top: 8px;
}
.nav-toggle__list__line:nth-child(3) {
    top: 16px;
    width: 44.44444%;
}
#nav-toggle__cross {
    top: 50%;
    left: 50%;
    visibility: hidden;
}
#nav-is-open:checked ~ #nav-toggle #nav-toggle__cross,
.nav-toggle--close #nav-toggle__cross {
    visibility: inherit;
}
.nav-toggle__cross__line {
    top: 0;
    left: 0;
    width: 23px;
    height: 3px;
    margin-left: -12px;
    margin-top: -2px;
    background-color: #fff;
}
.nav-toggle__cross__line:nth-child(1) {
    transform: rotate(-45deg);
}
.nav-toggle__cross__line:nth-child(2) {
    transform: rotate(45deg);
}
@media screen and (max-width: 1023px) {
    #nav__content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 90;
        visibility: hidden;
        overflow: hidden;
    }

    #nav-is-open:checked ~ #nav__content {
        visibility: inherit;
    }
}
.nav--fullscreen #nav__content {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 90;
    visibility: hidden;
    overflow: hidden;
}
#nav-is-open:checked ~ .nav--fullscreen #nav__content {
    visibility: inherit;
}
@media screen and (min-width: 1024px) {
    #nav:not(.nav--fullscreen) #nav__content {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 100%;
        padding: 0 7.23%;
        text-transform: uppercase;
        font-weight: 500;
        font-size: 15px;
        font-weight: 500;
        text-align: right;
        z-index: 50;
        overflow: hidden;
    }
}
@media screen and (max-width: 1023px) {
    #nav__content__inner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: center;
        justify-content: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-flow: column;
        flex-flow: column;
        background-color: #f1f1f1;
        text-align: center;
    }
}
.nav--fullscreen #nav__content__inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-flow: column;
    flex-flow: column;
    background-color: #f1f1f1;
    text-align: center;
}
#nav__content__bg {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
}
.js .nav--fullscreen #nav__content__bg {
    display: block;
}
#nav__content__bg svg {
    width: 100%;
    height: 100%;
    display: none;
    background: #dddde7;
}
#nav__content__bg path {
    stroke: #f7f7f7;
}
.nav__list {
    position: relative;
}
@media screen and (max-width: 1023px) {
    .js #nav__content__bg {
        display: block;
    }
    #nav__main-list {
        font-family: gt_walsheim, Helvetica, Arial, sans-serif;
        font-weight: 500;
        font-size: 40px;
        font-size: 8.33vw;
        line-height: 1.46em;
    }
    #nav__main-list .nav__item:last-child {
        margin-bottom: 1.18em;
    }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
    #nav__main-list {
        font-size: 46px;
        font-size: 5.99vw;
        line-height: 1.26em;
    }
}
.nav--fullscreen #nav__main-list {
    font-weight: 500;
    font-size: 30px;
    /* font-size: 8.33vw; */
    line-height: 1.46em;
}
@media screen and (min-width: 768px) {
    .nav--fullscreen #nav__main-list {
        font-size: 2rem;
        /* font-size: 5.99vw; */
        line-height: 1.26em;
    }
}
@media screen and (max-height: 460px) {
    #nav__main-list,
    .nav--fullscreen #nav__main-list {
        font-size: 2rem;
        line-height: 1.26em;
    }
}
@media screen and (min-width: 1024px) {
    #nav:not(.nav--fullscreen) .nav__list {
        display: inline-block;
        height: 82px;
        margin-right: -20px;
    }
    #nav:not(.nav--fullscreen) #nav__main-list {
        margin-right: 11.46%;
    }
    .nav--fullscreen #nav__main-list {
        font-size: 2.3rem;
        /* font-size: 5.47vw; */
        line-height: 1.66em;
    }
}
@media screen and (min-width: 1280px) {
    #nav:not(.nav--fullscreen) #nav__content {
        padding: 0 8.13%;
        /* background-color: #f7f7f7; */
    }
    #nav:not(.nav--fullscreen) #nav__main-list {
        margin-right: 18.75%;
    }
    .nav--fullscreen #nav__main-list {
        font-size: 2rem;
        /* font-size: 5.16vw; */
    }
}
@media screen and (min-width: 1400px) {
    .nav--fullscreen #nav__main-list {
        font-size: 2.2rem;
        line-height: 2.9rem;
    }
}
@media screen and (min-width: 1024px) {
    #nav:not(.nav--fullscreen) .nav__item {
        position: relative;
        display: block;
        float: left;
        height: 100%;
    }
    #nav:not(.nav--fullscreen) .nav__item--selected::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 8px;
        /* background-color: #1e396e; */
    }
    .page-id-home #nav:not(.nav--fullscreen) .nav__item--selected::after {
        content: none;
    }
}
.nav--fullscreen #nav__main-list .nav__item:last-child {
    margin-bottom: 1.18em;
}
@media screen and (max-height: 460px) {
    #nav__main-list .nav__item:last-child,
    .nav--fullscreen #nav__main-list .nav__item:last-child {
        margin-bottom: 0.7em;
    }
}
@media screen and (max-width: 1023px) {
    #nav__side-list .nav__item {
        display: inline-block;
        font-weight: 500;
        font-size: 13px;
        line-height: 1em;
        letter-spacing: 0.15em;
        text-transform: uppercase;
        color: #000;
    }
}
.nav--fullscreen #nav__side-list .nav__item {
    display: inline-block;
    font-weight: 500;
    font-size: 13px;
    line-height: 1em;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000;
}
.nav--fullscreen .nav-link,
.nav-link {
    color: #f37024;
    transition: color 0.2s;
}
.nav__item--selected .nav--fullscreen .nav-link,
.nav__item--selected .nav-link {
    color: #255625;
    cursor: default;
}
.no-touchevents .nav__item:not(.nav__item--selected) .nav--fullscreen .nav-link:hover,
.no-touchevents .nav__item:not(.nav__item--selected) .nav-link:hover {
    color: #255625;
}
@media screen and (min-width: 1024px) {
    #nav:not(.nav--fullscreen) .nav-link {
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        padding: 0 20px;
        color: #f37024;
        transition: color 0.5s;
    }
    .page-id-home #nav:not(.nav--fullscreen) .nav-link {
        color: #ffffff !important;
        font-weight: 500;
        font-size: 13.89px;
    }
    .no-touchevents #nav:not(.nav--fullscreen) .nav-link::after {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0;
        width: 100%;
        height: 0.5rem;
        /* background-color: #f37024; */
        z-index: 999;
        /* opacity: 1; */
        transform-origin: right top;
        transform: scaleX(0);
        transition: transform 0.3s cubic-bezier(0.77, 0, 0.175, 1), color 0.5s;
    }
    .no-touchevents .page-id-home #nav:not(.nav--fullscreen) .nav-link::after {
        /* opacity: 0.4; */
    }
    #nav:not(.nav--fullscreen) .nav-link:hover::after {
        color: #fff;
        transform: scaleX(1);
        transform-origin: left top;
        transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), color 0.5s;
    }
    .no-touchevents #nav.nav--right-dir:not(.nav--fullscreen) .nav-link::after {
        transform-origin: left top;
    }
    #nav.nav--right-dir:not(.nav--fullscreen) .nav-link:hover::after {
        transform-origin: right top;
    }
    #nav:not(.nav--fullscreen) .nav__item--selected .nav-link {
        color: #6c6c6c;
    }
}
#nav:not(.nav--fullscreen) .nav__item--selected .nav-link::after {
    content: none;
}
@media screen and (max-width: 1023px) {
    #nav__side-list .nav-link {
        padding: 0 7px;
        color: #7d7d7d;
    }
    .no-touchevents #nav__side-list .nav-link:hover {
        color: #000;
    }
    #projects__nav__shrink__txt {
        white-space: nowrap;
    }
}
.nav--fullscreen #nav__side-list .nav-link {
    padding: 0 7px;
    color: #255625;
}
.no-touchevents .nav--fullscreen #nav__side-list .nav-link:hover {
    color: #000;
}
@media screen and (min-width: 1024px) {
    #nav:not(.nav--fullscreen) .nav-link__label {
        position: relative;
        display: inline-block;
        z-index: 2;
        letter-spacing: 1px;
    }
}
#footer__credits,
.footer__page__title {
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
#footer {
    padding: 40px 0 40px;
    /* background-color: #ffefe5; */
    color: #fff;
}
@media screen and (min-width: 1024px) {
    #footer {
        padding: 40px 0 50px;
    }
}
.page-id-not-found #footer,
.page-id-projects #footer {
    display: none;
}
#footer__inner {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin: 0 6.52%;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
    #footer__inner {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin: 0 6.25%;
    }
    #footer__inner::after {
        content: "";
        position: absolute;
        top: 97px;
        left: 0;
        width: 100%;
        height: 1px;
        /* background-color: #272727; */
    }
}
#footer__logo {
    width: 133px;
    height: 41px;
}
#footer__logo img {
    width: 100%;
    object-fit: cover;
}
#footer__logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
#footer__logo path {
    fill: #fff;
}
#footer__pages {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 25px 0;
    margin-top: 60px;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    /* border-top: 1px solid #414141; */
    /* border-bottom: 1px solid #414141; */
}
@media screen and (min-width: 1024px) {
    #footer__pages {
        width: 83.14%;
        padding: 0;
        margin-top: 35px;
        -ms-flex-pack: end;
        justify-content: flex-end;
        border: none;
    }
}
@media screen and (min-width: 1280px) {
    #footer {
        /* padding-top: 120px; */
    }
    #footer__inner {
        margin: 0 8.13%;
    }
    #footer__logo {
        width: 160px;
        height: 50px;
    }
    #footer__pages {
        width: 74.79%;
    }
}
#footer__pages::after {
    content: "";
    width: 100%;
    -ms-flex-order: 1;
    order: 1;
}
.footer__page {
    display: inline-block;
    height: 40px;
    -ms-flex-preferred-size: 20%;
    flex-basis: 20%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-order: 1;
    order: 1;
}
@media screen and (min-width: 1024px) {
    .footer__page {
        /* height: auto; */
        min-width: 11.23%;
        padding-left: 20px;
        -ms-flex-preferred-size: auto;
        flex-basis: auto;
    }
}
.footer__page:nth-child(n + 6) {
    -ms-flex-order: 2;
    order: 2;
}
@media screen and (min-width: 1024px) {
    .footer__page:nth-child(n + 6) {
        -ms-flex-order: 1;
        order: 1;
    }
    .footer__page:last-child {
        min-width: 0;
    }
}
#footer__page--contact {
    margin-left: 10.12%;
}
/* Below 1024px .footer__page used a fixed 20% flex-basis sized for a
   5-column row; with fewer footer links (Technology/Projects removed) and
   longer labels like "About us", columns were too narrow and text wrapped
   into neighboring items. Let items size to their own content instead. */
@media screen and (max-width: 1023px) {
    .footer__page {
        flex-basis: auto;
        height: auto;
        padding: 6px 14px;
    }
    #footer__page--contact {
        margin-left: 0;
    }
}
.footer__page__title {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    color: #c4c4c4;
    font-size: 12px;
    line-height: 1em;
    transition: color 0.3s;
    color: #000;
    font-weight: bold;
}
@media screen and (min-width: 1024px) {
    .footer__page__title {
        display: inline-block;
        width: auto;
        height: auto;
        margin-bottom: 135px;
    }
}
.no-touchevents .footer__page__title:hover {
    /* color: #fff; */
    color: #f37024;
}
.footer__page__sections {
    display: none;
}
@media screen and (min-width: 1024px) {
    .footer__page__sections {
        display: block;
    }
}
.footer__page__section__title {
    display: inline-block;
    margin-bottom: 10px;
    color: #868686;
    font-size: 12px;
    line-height: 1em;
    transition: color 0.3s;
}
.no-touchevents .footer__page__section__title:hover {
    color: #f37024;
    padding-left: 5px;
}
#footer__contact {
    margin-top: 70px;
    font-weight: 500;
    font-size: 12px;
    line-height: 2.67em;
    color: #1e396e;
}
#footer__contact strong {
    display: inline-block;
    padding-bottom: 20px;
    font-weight: 600;
    font-size: 2rem;
    color: #f37024;
}
#footer__bottom {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    margin-top: 135px;
    font-size: 12px;
    line-height: 1em;
}
#footer__copyright {
    margin-right: 40px;
    color: #656565;
}
#footer__terms {
    color: #a4a4a4;
}
#footer__credits {
    margin-left: auto;
    font-size: 9px;
    line-height: 1.33em;
}
#footer__credits__txt {
    color: #6c6c6c;
}
#footer__credits__link {
    /* color: #c6c6c6; */
    color: #00c4b1;
    font-weight: bold;
}
.js .page {
    visibility: hidden;
}

.js .page__color {
    /* display: none; */
}
#main-loading-page {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    z-index: 200;
    /* overflow: hidden; */
}
#main-loading__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
}
#ajax-loading__inner,
#ajax-loading__outer,
#main-loading__inner,
#main-loading__outer {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
#ajax-loading__inner,
#main-loading__inner {
    background-color: #fff;
}
#main-loading__lines {
    position: absolute;
    top: 0;
    left: 0;
}
#main-loading__lines svg,
#main-loading__logo svg {
    display: block;
    width: 100%;
    height: 100%;
}
#main-loading__lines path {
    stroke: #f9f9f9;
}
.loading__container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
.anim-line {
    width: 35%;
    height: 2px;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
@media screen and (max-width: 768px) {
    .anim-line {
        width: 35%;
    }
}
.line-left {
    left: 0;
    background: #f37024;
    animation: moveLeft 3s 2s;
}

.line-right {
    right: 0;
    background: #1d386e;
    animation: moveRight 3s 2s;
}
@keyframes moveLeft {
    0% {
        left: 0;
    }
    100% {
        left: -100%;
    }
}
@keyframes moveRight {
    0% {
        right: 0;
    }
    100% {
        right: -100%;
    }
}
#main-loading__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 154px;
    height: 79px;
    margin-top: -40px;
    margin-left: -77px;
}
#main-loading__progress {
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    text-align: center;
    line-height: 1em;
}
#main-loading__progress__value {
    margin-bottom: 20px;
    color: #c8c8c8;
    font-size: 25px;
    font-family: montserrat, Helvetica, Arial, sans-serif;
}
#ajax-loading__txt,
#main-loading__progress__txt {
    font-size: 10px;
    color: #575757;
    text-transform: uppercase;
}
#home-landing__content,
.home-screen__step__content__subtitle,
.home-screen__step__content__title {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
}
#main-loading__progress__txt {
    font-weight: 500;
    letter-spacing: 0.2em;
}
#ajax-loading-page {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    visibility: hidden;
    z-index: 150;
}
#ajax-loading__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
#ajax-loading__anim {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -64px;
    margin-left: -144px;
}
#ajax-loading__txt {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 288px;
    margin-top: 64px;
    margin-left: -144px;
    text-align: center;
}
#home-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f1f1f1;
}
#home-landing {
    color: #fff;
    background-color: #000;
}
.no-js #home-landing {
    visibility: inherit;
}
#home-landing__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.mobile #home-landing__bg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url(../Images/NewImages/Home.jpg);
}
@media screen and (orientation: landscape) {
    .mobile #home-landing__bg {
        background-image: url(../Images/NewImages/Home.jpg);
    }
}
@media screen and (min-width: 768px) {
    .mobile #home-landing__bg {
        background-image: url(../Images/NewImages/Home.jpg);
    }
}
#home-landing__bg::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 42.22%;
    z-index: 2;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), transparent);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#home-landing__bg__video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-color: red;*/
    /* background-image: url("../Images/JPP.jpg"); */
    background-image: url("../Images/NewImages/Home.jpg");
    /* filter: brightness(50%); */
    /* opacity:0.7; */
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    /* min-width: 1600px; */
}
@media (min-aspect-ratio: 16 / 9) {
    #home-landing__bg__video {
        top: -100%;
        height: 300%;
    }
}
@media (max-aspect-ratio: 16 / 9) {
    #home-landing__bg__video {
        left: -100%;
        width: 300%;
    }
}
@supports (object-fit: cover) {
    #home-landing__bg__video {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}
#home-landing__content {
    position: absolute;
    /* bottom: 93px; */
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
}
@media screen and (min-width: 1024px) {
    #footer__contact {
        position: absolute;
        top: 185px;
        left: 0;
        margin-top: 0;
    }
    #footer__contact strong {
        padding-bottom: 0;
    }
    #home-landing__content {
        bottom: 0;
        right: 7.23%;
    }
}
#home-landing__content__text {
    position: relative;
    padding: 35px 13.53%;
}
@media screen and (min-width: 1024px) {
    #home-landing__content__text {
        width: 77.03%;
        padding: 40px 0 40px 7.77%;
        display: flex;
        align-items: center;
    }
    #home-landing__content__text__body,
    #home-landing__content__text__heading {
        display: inline-block;
        width: 45.12%;
        vertical-align: top;
    }
}
#home-landing__content__text__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dddde7;
    z-index: 2;
    transform-origin: right top;
}
#home-landing__content__text__heading {
    position: relative;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    #home-landing__content__text__heading {
        margin-right: 9.66%;
    }
}
@media screen and (min-width: 1280px) {
    #home-landing__content {
        right: 8.13%;
    }
    #home-landing__content__text {
        padding-left: 8.84%;
        display: flex;
        align-items: center;
    }
    #home-landing__content__text__body,
    #home-landing__content__text__heading {
        width: 43.83%;
        padding-left: 5.56%;
    }
    #home-landing__content__text__heading {
        margin-right: 12.25%;
    }
}
#home-landing__content__text__heading__baseline {
    padding-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    /* opacity: 0.5; */
    color: #1c377d;
}
@media screen and (min-width: 1024px) {
    #home-landing__content__text__heading__baseline {
        /* font-size: 1rem; */
    }
}
#home-landing__content__text__heading__title {
    /* max-width: 450px; */
    font-weight: 600;
    font-size: 1.348rem;
    line-height: 1.1em;
    margin-top: 10px;
    color: #1c377d;
}

#home-landing__content__text__heading__subtitle {
    /* max-width: 450px; */
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.1em;
    color: #ff7b2e;
    margin-top: 15px;
}
@media screen and (min-width: 1024px) {
    #home-landing__content__text__heading__title {
        /* font-size: 1rem; */
    }
}
#home-landing__content__text__body {
    position: relative;
    padding-top: 15px;
    font-size: 18px;
    font-weight: 700;
    opacity: 0.8;
    letter-spacing: 0.04em;
    line-height: 1.5em;
    z-index: 2;
    color: #1e396e;
    /* font-family: sam; */
}
@media screen and (min-width: 1024px) {
    #home-landing__content__text__body {
        padding-top: 10px;
        padding-left: 1.57%;
        padding-right: 5.62%;
        margin-left: -4px;
        font-size: 14px;
        line-height: 22px;
    }
}
@media screen and (min-width: 1280px) {
    #home-landing__content__text__body {
        padding-top: 25px;
        padding-right: 10.12%;
        font-size: 14px;
        line-height: 22px;
    }
}
@media screen and (min-width: 1600px) {
    #home-landing__content__text {
        padding-top: 60px;
        padding-bottom: 60px;
    }
    #home-landing__content__text__body {
        font-size: 15px;
    }
}
#home-landing__content__cta,
.home-landing__line {
    display: none;
}
@media screen and (min-width: 1024px) {
    #home-landing__content__cta {
        position: relative;
        display: block;
        min-width: 22.9%;
        font-weight: 700;
        color: #f37024;
        text-align: center;
        font-size: 13px;
    }
}
#home-landing__content__cta__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    transform-origin: right top;
}
#home-landing__content__cta__label {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
}
@media screen and (min-width: 1024px) {
    #home-landing__content__cta__bg::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        background-color: #f37024;
        transform: scaleY(0);
        transform-origin: bottom left;
        transition: transform 0.3s cubic-bezier(0.88, 0.01, 0.15, 0.99);
    }
    .no-touchevents #home-landing__content__cta:hover #home-landing__content__cta__bg::before {
        transform: scaleY(1);
        transform-origin: top left;
    }
    .no-touchevents #home-landing__content__cta:hover #home-landing__content__cta__label {
        animation: home-landing__content__cta__label__roll-over 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    }
}
@keyframes home-landing__content__cta__label__roll-over {
    25% {
        transform: translateY(20px);
    }
    25.001% {
        transform: translateY(-20px);
        color: #fff;
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
        color: #fff;
    }
}
#home-landing__scroll {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 93px;
    fill: #f37024;
    background-color: #fff;
}
@media screen and (min-width: 1024px) {
    #home-landing__scroll {
        bottom: 65px;
        width: 7.23%;
        padding: 20px 0;
        fill: #f37024;
        background-color: transparent;
    }
    .is-ie10 #home-landing__scroll {
        background-color: rgba(0, 0, 0, 0.001);
    }
    .no-touchevents #home-landing__scroll:hover #home-landing__scroll__icon {
        animation: home-landing__scroll__icon__roll-over 0.6s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    }
    .no-touchevents.is-ie #home-landing__scroll:hover #home-landing__scroll__icon {
        fill: #d62323;
    }
}
@media screen and (min-width: 1280px) {
    #home-landing__content__cta {
        font-size: 14px;
    }
    #home-landing__scroll {
        width: 8.13%;
    }
}
#home-landing__scroll__icon {
    /* display: inline-block; */
    display: none;
    width: 20px;
    height: 34px;
}
@keyframes home-landing__scroll__icon__roll-over {
    from {
        transform: translateY(-50px);
        opacity: 0;
        fill: #fff;
    }
    to {
        transform: translateY(0);
        opacity: 1;
        fill: green;
    }
}
@media screen and (min-width: 1024px) {
    .home-landing__line {
        position: absolute;
        display: block;
        width: 1px;
        background-color: #fff;
        opacity: 0.15;
        z-index: 2;
    }
}
.home-screen,
.home-screen__step {
    width: 100%;
    height: 100%;
    visibility: hidden;
}
.home-landing__line:nth-child(1) {
    top: 0;
    bottom: 0;
    left: 7.15%;
    transform-origin: top;
}
@media screen and (min-width: 1024px) {
    .home-landing__line:nth-child(1) {
        left: 4.1%;
    }
}
@media screen and (min-width: 1280px) {
    .home-landing__line:nth-child(1) {
        left: 7.15%;
    }
}
.home-landing__line:nth-child(2) {
    top: 0;
    bottom: 0;
    left: 42.5%;
    transform-origin: top;
}
.home-landing__line:nth-child(3),
.home-screen__step-1__lines__line:nth-child(1) {
    transform-origin: bottom;
    bottom: 0;
}
@media screen and (min-width: 1024px) {
    .home-landing__line:nth-child(2) {
        left: 41.39%;
    }
}
@media screen and (min-width: 1280px) {
    .home-landing__line:nth-child(2) {
        left: 42.5%;
    }
}
.home-landing__line:nth-child(3) {
    top: 96px;
    right: 8.13%;
}
.home-screen,
.home-screen__step,
.home-screen__step-1__bg,
.home-screen__step-1__bg__video {
    top: 0;
    left: 0;
    position: absolute;
}
@media screen and (min-width: 1024px) {
    .home-landing__line:nth-child(3) {
        right: 7.23%;
    }
    #home-screen-1 .home-screen__step__content,
    #home-screen-5 .home-screen__step__content {
        width: 39.26%;
    }
}
@media screen and (min-width: 1400px) {
    #home-screen-1 .home-screen__step__content,
    #home-screen-5 .home-screen__step__content {
        width: 31.22%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-2 .home-screen__step__content {
        width: 35.16%;
    }
}
@media screen and (min-width: 1400px) {
    #home-screen-2 .home-screen__step__content {
        width: 31.22%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-3 .home-screen__step__content {
        width: 46.48%;
    }
}
@media screen and (min-width: 1400px) {
    #home-screen-3 .home-screen__step__content {
        width: 31.22%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-4 .home-screen__step__content {
        width: 39.26%;
    }
}
@media screen and (min-width: 1280px) {
    .home-landing__line:nth-child(3) {
        right: 8.13%;
    }
    #home-screen-4 .home-screen__step__content {
        width: 27.36%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-6 .home-screen__step__content {
        width: 42.38%;
    }
}
@media screen and (min-width: 1400px) {
    #home-screen-6 .home-screen__step__content {
        width: 34.38%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-7 .home-screen__step__content {
        width: 42.38%;
    }
}
.home-screen__step__content__title {
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: 16px;
    overflow-wrap: break-word;
}
.home-screen__step__content__subtitle {
    font-weight: 500;
    font-size: 25px;
    line-height: 1.4em;
    overflow-wrap: break-word;
}
#home-pagination__number,
.projects__nav__index {
    font-family: montserrat, Helvetica, Arial, sans-serif;
}
@media screen and (min-width: 1024px) {
    .home-screen__step__content__subtitle {
        max-width: 650px;
        font-size: 30px;
        line-height: 1.1351em;
    }
}
@media screen and (max-height: 680px) {
    .home-screen__step__content__subtitle {
        font-size: 28px;
    }
}
@media screen and (min-width: 1400px) {
    #home-screen-7 .home-screen__step__content {
        width: 34.38%;
    }
    .home-screen__step__content__subtitle {
        font-size: 30px;
        line-height: 1.4em;
    }
}
.home-screen__step-1__bg {
    width: 100%;
    height: 100%;
    z-index: 2;
    filter: brightness(0.6);
    /* The headline sitting on top of this is white, so it needs a dark
       backdrop to stay readable before the video has decoded a frame, or at
       all if autoplay is blocked / the connection is slow. */
    background-color: #0f1b2d;
}
.home-screen__step-1__bg__video {
    visibility: hidden;
}
.home-screen__step-1__bg__canvas {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
}
.home-screen__step-1__lines__line {
    position: absolute;
    width: 1px;
    background-color: #fff;
    visibility: inherit;
    opacity: 0.15;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-1__lines__line:nth-child(1) {
        top: 12.63%;
        left: 24.8%;
    }
    .home-screen__step-1__lines__line:nth-child(2) {
        right: 13.48%;
    }
}
@media screen and (min-width: 1280px) {
    .home-screen__step-1__lines__line:nth-child(1) {
        top: 10.22%;
        left: 21.46%;
    }
    .home-screen__step-1__lines__line:nth-child(2) {
        right: 10.42%;
    }
}
.home-screen__step-1__lines__line:nth-child(2) {
    top: 0;
    bottom: 0;
    transform-origin: top;
}
.home-screen__step-1__content {
    position: absolute;
    bottom: 18.12%;
    left: 21.74%;
    width: 72.46%;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-1__content {
        top: 36.46%;
        bottom: auto;
        left: 28.91%;
        width: auto;
    }
}
@media screen and (min-width: 1280px) {
    .home-screen__step-1__content {
        top: 37.22%;
        left: 29.17%;
    }
}
.home-screen__step-1__content__title {
    padding-bottom: 20px;
    color: #f37024;
    font-size: 1.2rem;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-1__content__title {
        padding-bottom: 30px;
    }
}
.home-screen__step-1__content__subtitle {
    padding-bottom: 25px;
    color: #fff;
    /* -webkit-text-stroke: 1px rgb(158, 158, 158); */
}
@media screen and (min-width: 1024px) {
    .home-screen__step-1__content__subtitle {
        padding-bottom: 35px;
        transform-origin: left top;
        transform: scale(1.2973, 1.2973);
        /* font-size: 2rem; */
        font-size: 25px;
    }
}
@media screen and (min-height: 1024px) and (max-height: 680px) {
    .home-screen__step-1__content__subtitle {
        transform: scale(1.3214, 1.3214);
    }
}
@media screen and (min-width: 1400px) {
    .home-screen__step-1__content__subtitle {
        padding-bottom: 25px;
        transform: scale(1.5238, 1.5238);
        font-size: 25px;
    }
}
.home-screen__step-2 {
    /* background-color: red; */
    /* background-image: url("../Images/NewImages/OurServices2.jpg"); */
    background-size: 60% 100%;
    background-position: right;
    background-repeat: no-repeat;
}
.home-screen__step-2__img {
    display: none;
    background-color: inherit;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__img {
        position: absolute;
        display: block;
        background-repeat: no-repeat;
        background-position: center center;
        background-size: cover;
    }
    #home-screen-1 .home-screen__step-2__img {
        top: 0;
        right: 0;
        bottom: 0;
        left: 28.91%;
        /* background-image: url(../img/home-screen-2-step-2.jpg); */
        background-image: url(../Images/NewImages/ourvision2.jpg);
    }
    #home-screen-2 .home-screen__step-2__img {
        top: 0;
        right: 0;
        bottom: 0;
        left: 28.91%;
        /* background-image: url(../img/home-screen-2-step-2.jpg); */
        background-image: url(../Images/NewImages/OurServices2.jpg);
    }
    #home-screen-5 .home-screen__step-2__img {
        top: 0;
        right: 0;
        bottom: 0;
        left: 28.91%;
        /* background-image: url(../img/home-screen-2-step-2.jpg); */
        background-image: url(../Images/NewImages/OurServices2.jpg);
    }
}
/* #home-screen-1 .home-screen__step-2__img, */
/* #home-screen-5 .home-screen__step-2__img, */
#home-screen-6 .home-screen__step-2__img,
.home-screen__step-2__lines__line:nth-child(2) {
    /* display: none; */
}
@media screen and (min-width: 1280px) {
    #home-screen-1 .home-screen__step-2__img {
        left: 29.17%;
    }
    #home-screen-2 .home-screen__step-2__img {
        left: 29.17%;
    }
    #home-screen-5 .home-screen__step-2__img {
        left: 29.17%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-3 .home-screen__step-2__img {
        top: 0;
        right: 27.93%;
        bottom: 0;
        left: 0;
        /*background-image: url(../img/home-screen-3-step-2.jpg);*/
        background-image: url(../Images/NewImages/ourvision2.jpg);
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-3 .home-screen__step-2__img {
        right: 28.47%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-4 .home-screen__step-2__img {
        top: 0;
        right: 0;
        bottom: 0;
        left: 71.29%;
        /* background-image: url(../img/home-screen-4-step-2.jpg); */
        background-image: url(../Images/NewImages/ourfacility2.jpg);
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-4 .home-screen__step-2__img {
        left: 64.24%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-7 .home-screen__step-2__img {
        top: 0;
        right: 0;
        bottom: 0;
        left: 49.61%;
        /* background-image: url(../img/home-screen-7-step-2.jpg); */
        background-image: url("../Images/NewImages/ourvision2.jpg");
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-7 .home-screen__step-2__img {
        left: 43.19%;
    }
}
.home-screen__step-2__img__overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: inherit;
    visibility: hidden;
}
.home-screen__step-2__bg {
    position: absolute;
    top: 92px;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: #fff;
    /* background-image: url("/Images/"); */
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__bg {
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
    }
    #home-screen-1 .home-screen__step-2__bg,
    #home-screen-5 .home-screen__step-2__bg {
        bottom: 0;
        left: 0;
        width: 86.72%;
        height: 83.33%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-1 .home-screen__step-2__bg,
    #home-screen-5 .home-screen__step-2__bg {
        width: 84.58%;
        height: 81.11%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-2 .home-screen__step-2__bg {
        bottom: 0;
        left: 0;
        width: 86.72%;
        height: 90.49%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-2 .home-screen__step-2__bg {
        width: 77.57%;
        height: 90.56%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-3 .home-screen__step-2__bg {
        right: 0;
        bottom: 0;
        width: 74.41%;
        height: 85.94%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-3 .home-screen__step-2__bg {
        width: 77.78%;
        height: 80%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-4 .home-screen__step-2__bg {
        left: 3.42%;
        width: 67.87%;
        height: 100%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-4 .home-screen__step-2__bg {
        left: 2.43%;
        width: 61.81%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-6 .home-screen__step-2__bg {
        top: 0;
        right: 13.48%;
        bottom: 13.48vw;
        left: 13.48%;
        width: auto;
        height: auto;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-6 .home-screen__step-2__bg {
        right: 15.14%;
        bottom: 10.07vw;
        left: 10.07%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-7 .home-screen__step-2__bg {
        top: 9.77%;
        right: 13.48%;
        bottom: 9.77%;
        left: 0;
        width: auto;
        height: auto;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-7 .home-screen__step-2__bg {
        top: 9.44%;
        right: 15.14%;
        bottom: 9.44%;
    }
}
.home-screen__step-2__lines__line {
    position: absolute;
    width: 1px;
    background-color: #e6e6e6;
}
@media screen and (max-width: 768px) and (max-height: 450px) {
    .home-screen__step-2__lines__line {
        display: none;
    }
}
.home-screen__step-2__lines__line:nth-child(1) {
    bottom: 18.12%;
    left: 0;
    width: 17.15vw;
    max-width: 138px;
    height: 310px;
    background-color: transparent;
    border-top: 1px solid #e6e6e6;
    border-right: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}
@media screen and (max-height: 480px) {
    .home-screen__step-2__lines__line:nth-child(1) {
        height: 270px;
    }
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__lines__line:nth-child(1) {
        top: 27.78%;
        bottom: 13.48vw;
        left: 13.48%;
        width: 11.43%;
        max-width: none;
        height: auto;
        border-right: none;
        border-left: 1px solid #e6e6e6;
    }
    #home-screen-3 .home-screen__step-2__lines__line:nth-child(1) {
        opacity: 0.2;
    }
}
@media screen and (min-width: 1280px) {
    .home-screen__step-2__lines__line:nth-child(1) {
        bottom: 10.07vw;
        left: 10.07%;
        width: 12.22%;
        max-width: 176px;
    }
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__lines__line:nth-child(2) {
        display: block;
    }
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-3 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-4 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-7 .home-screen__step-2__lines__line:nth-child(2) {
        top: 0;
        left: 24.8%;
        bottom: 13.48vw;
        margin-left: 1px;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-3 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-4 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-7 .home-screen__step-2__lines__line:nth-child(2) {
        left: 22.15%;
        bottom: 10.07vw;
    }
}
@media screen and (min-width: 1440px) {
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-3 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-4 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(2),
    #home-screen-7 .home-screen__step-2__lines__line:nth-child(2) {
        left: calc(10.07% + 176px);
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-2 .home-screen__step-2__lines__line:nth-child(2) {
        top: 9.33%;
        left: 24.8%;
        bottom: 13.48vw;
        margin-left: 1px;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-2 .home-screen__step-2__lines__line:nth-child(2) {
        left: 22.15%;
        bottom: 10.07vw;
    }
}
@media screen and (min-width: 1440px) {
    #home-screen-2 .home-screen__step-2__lines__line:nth-child(2) {
        left: calc(10.07% + 176px);
    }
}
#home-screen-3 .home-screen__step-2__lines__line:nth-child(2) {
    opacity: 0.2;
}
.home-screen__step-2__lines__line:nth-child(3) {
    display: none;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__lines__line:nth-child(3) {
        display: block;
    }
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(3),
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(3) {
        top: 0;
        bottom: 83.33%;
        left: 78.52%;
    }
}
#home-screen-2 .home-screen__step-2__lines__line:nth-child(3),
.home-screen__step-2__lines__line:nth-child(4) {
    display: none;
}
@media screen and (min-width: 1280px) {
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(3),
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(3) {
        bottom: 81.11%;
        left: 73.61%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(3) {
        top: 0;
        right: 17.58%;
        bottom: 13.48vw;
    }
    .home-screen__step-2__lines__line:nth-child(4) {
        display: block;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(3) {
        right: 22.15%;
        bottom: 10.07vw;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(4),
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(4),
    #home-screen-7 .home-screen__step-2__lines__line:nth-child(4) {
        right: 0;
        bottom: 0;
        width: 13.28%;
        height: 51.67%;
        background-color: transparent;
        border-top: 1px solid #e6e6e6;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-1 .home-screen__step-2__lines__line:nth-child(4),
    #home-screen-6 .home-screen__step-2__lines__line:nth-child(4),
    #home-screen-7 .home-screen__step-2__lines__line:nth-child(4) {
        width: 10.49%;
        height: 51.67%;
        border-left: 1px solid #e6e6e6;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-2 .home-screen__step-2__lines__line:nth-child(4) {
        right: 0;
        bottom: 0;
        width: 13.28%;
        height: 51.67%;
        background-color: transparent;
        border-top: 1px solid #e6e6e6;
        opacity: 0.18;
    }
    #home-screen-3 .home-screen__step-2__lines__line:nth-child(4) {
        top: 0;
        bottom: 0;
        right: 13.48%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-2 .home-screen__step-2__lines__line:nth-child(4) {
        width: 10.49%;
        height: 51.67%;
        border-left: 1px solid #e6e6e6;
    }
    #home-screen-3 .home-screen__step-2__lines__line:nth-child(4) {
        right: 10.49%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-4 .home-screen__step-2__lines__line:nth-child(4) {
        top: 39.06%;
        right: 0;
        bottom: 0;
        border: none;
        width: 13.48%;
        background-color: #fff;
        /* background-color: transparent; */
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-4 .home-screen__step-2__lines__line:nth-child(4) {
        top: 33.33%;
        width: 10.49%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(4) {
        right: 0;
        bottom: 0;
        width: 13.28%;
        height: 51.67%;
        background-color: transparent;
        border-top: 1px solid #e6e6e6;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(4) {
        width: 10.49%;
        height: 51.67%;
        border-top: none;
        border-left: 1px solid #e6e6e6;
    }
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(5) {
        width: 15.14%;
    }
}
#home-screen-7 .home-screen__step-2__lines__line:nth-child(4) {
    opacity: 0.2;
}
.home-screen__step-2__lines__line:nth-child(5) {
    display: none;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__lines__line:nth-child(5) {
        display: block;
    }
    #home-screen-5 .home-screen__step-2__lines__line:nth-child(5) {
        top: 48.11%;
        right: 0;
        height: 1px;
    }
}
.home-screen__step-2__corner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 16.91%;
    max-width: 138px;
    height: auto;
    background-color: #f37024;
}
@media screen and (max-width: 768px) and (max-height: 450px) {
    .home-screen__step-2__corner {
        display: none;
    }
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__corner {
        width: 13.48%;
        max-width: none;
    }
    #home-screen-3 .home-screen__step-2__corner {
        visibility: hidden;
    }
}
@media screen and (min-width: 1280px) {
    .home-screen__step-2__corner {
        width: 10.07%;
    }
}
.home-screen__step-2__corner::before {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    padding-top: 119.81%;
}
.home-screen__step-2__content {
    position: absolute;
    top: 92px;
    bottom: 11.23vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__corner::before {
        padding-top: 100%;
        padding-left: auto;
    }
    .home-screen__step-2__content {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        top: auto;
        right: auto;
        bottom: 0;
    }
    #home-screen-1 .home-screen__step-2__content,
    #home-screen-5 .home-screen__step-2__content {
        left: 28.06%;
        height: 83.33%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-1 .home-screen__step-2__content,
    #home-screen-5 .home-screen__step-2__content {
        left: 29.17%;
        /* height: 81.11%; */
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-2 .home-screen__step-2__content {
        left: 28.91%;
        height: 91.15%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-2 .home-screen__step-2__content {
        left: 29.17%;
        height: 90.56%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-3 .home-screen__step-2__content {
        right: 0;
        left: 35.16%;
        height: 85.94%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-3 .home-screen__step-2__content {
        height: 80%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-4 .home-screen__step-2__content {
        left: 27.93%;
        height: 100%;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-4 .home-screen__step-2__content {
        left: 29.17%;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-6 .home-screen__step-2__content {
        top: 0;
        left: 28.91%;
        bottom: 13.48vw;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-6 .home-screen__step-2__content {
        left: 29.17%;
        bottom: 10.07vw;
    }
}
@media screen and (min-width: 1024px) {
    #home-screen-7 .home-screen__step-2__content {
        top: 9.77%;
        left: 28.91%;
        bottom: 9.77%;
    }
}
.home-screen__step-2__content__inner {
    width: 72.46%;
    /* padding-top: 50px; */
    /* padding-bottom: 40px; */
    margin-left: 21.01%;
    overflow: hidden;
}
.home-screen__step-2__content__inner__title {
    position: relative;
    /* padding-bottom: 20px; */
    color: #1d386e;
    /* -webkit-text-stroke: 1px rgb(136, 255, 67); */
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__content__inner {
        width: 100%;
        margin-left: 0;
        height: 85%;
    }
    .home-screen__step-2__content__inner__title {
        padding-bottom: 30px;
    }
}
.home-screen__step-2__content__inner__subtitle {
    position: relative;
    padding-bottom: 25px;
    /* color: #f37024; */
    color: #02a964;
}

.home-screen__step-2__content__inner__subtitle span {
    color: #1d386e;
    margin-bottom: 15px;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__content__inner__subtitle {
        padding-bottom: 35px;
        transform-origin: left top;
    }
}
@media screen and (min-width: 1400px) {
    .home-screen__step-2__content__inner__subtitle {
        padding-bottom: 25px;
    }
}
.home-screen__step-2__content__inner__body {
    padding-bottom: 40px;
    font-size: 14px;
    line-height: 1.4286em;
    color: #999999;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__content__inner__body {
        max-width: 550px;
        padding-bottom: 50px;
        font-size: 14px;
        line-height: 1.7143em;
    }
}
@media screen and (min-width: 1280px) {
    #home-screen-7 .home-screen__step-2__content {
        top: 9.44%;
        left: 29.17%;
        bottom: 9.44%;
    }
    .home-screen__step-2__content__inner__body {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
@media screen and (min-width: 1280px) and (min-height: 800px) {
    .home-screen__step-2__content__inner__body {
        font-size: 1rem;
    }
}
.home-screen__step-2__content__inner__link {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.4em;
    color: #000;
    margin-bottom: 60px;
    font-weight: 500;
    transition: color 0.4s;
}
.no-touchevents .home-screen__step-2__content__inner__link:hover {
    color: #d62323;
}
.home-screen__step-2__content__inner__link::after {
    content: "";
    position: relative;
    top: 7px;
    left: 0;
    display: block;
    width: 80px;
    height: 1px;
    margin-left: 10px;
    background-color: #1c377d;
    transform-origin: top left;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), background-color 0.4s;
}
#home-pagination__nav,
#home-pagination__number {
    left: 50%;
    transform-origin: left top;
    position: absolute;
}
.no-touchevents .home-screen__step-2__content__inner__link:hover::after {
    transform: translateX(-5px) scaleX(0.25);
    background-color: #d62323;
}
@media screen and (min-width: 1024px) {
    .home-screen__step-2__content__inner__link::after {
        width: 130px;
        margin-left: 30px;
    }
    .no-touchevents .home-screen__step-2__content__inner__link:hover::after {
        transform: translateX(-10px) scaleX(0.7);
    }
}
.home-screen__step-2__content__inner__link__label {
    position: relative;
    display: inline-block;
    color: #1d386e;
    font-size: 12px;
    font-weight: 800;
    width: 100%;
}
#home-pagination {
    position: absolute;
    bottom: 18.12%;
    left: 0;
    height: 310px;
    width: 17.15vw;
    max-width: 138px;
    color: #fff;
    transition: color 0.7s;
    visibility: hidden;
    z-index: 3;
}
@media screen and (max-height: 480px) {
    #home-pagination {
        height: 270px;
    }
}
@media screen and (max-width: 768px) and (max-height: 450px) {
    #home-pagination {
        bottom: 0;
    }
}
@media screen and (min-width: 1024px) {
    #home-pagination {
        top: 27.78%;
        bottom: 13.48vw;
        left: 13.48%;
        width: 11.43%;
        max-width: none;
        height: auto;
        max-height: none;
    }
}
@media screen and (min-width: 1280px) {
    #home-pagination {
        bottom: 10.07vw;
        left: 10.07%;
        width: 12.22%;
        max-width: 176px;
    }
}
#home-pagination.home-pagination--dark {
    color: #d7d7d7;
}
@media screen and (min-width: 1024px) {
    #home-pagination.home-pagination--small {
        bottom: auto;
        top: 33.33vh;
    }
}
#home-pagination__number {
    top: 25px;
    margin-left: -0.5em;
    font-size: 59px;
    line-height: 1em;
    font-weight: 700;
    letter-spacing: -0.05em;
    transform: rotate(-90deg) translateX(-100%);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media screen and (max-height: 480px) {
    #home-pagination__number {
        top: 15px;
        font-size: 32px;
    }
}
@media screen and (max-width: 768px) and (max-height: 450px) {
    #home-pagination__number {
        top: auto;
        bottom: 195px;
        font-size: 22px;
    }
}
@media screen and (min-width: 1024px) {
    #home-pagination__number {
        top: 11.86%;
    }
}
@media screen and (min-height: 1024px) and (max-height: 650px) {
    #home-pagination__number {
        top: 8.89%;
        font-size: 30px;
    }
}
@media screen and (min-width: 1400px) {
    #home-pagination__number {
        font-size: 54px;
        /* color: #5ab381; */
        color: lightgray;
    }
}
.home-pagination--small #home-pagination__number {
    top: auto;
    bottom: 205px;
    font-size: 18px;
}
@media screen and (min-width: 1024px) {
    .home-pagination--small #home-pagination__number {
        top: 0;
        bottom: auto;
    }
}
@media screen and (min-width: 1400px) {
    .home-pagination--small #home-pagination__number {
        font-size: 24px;
        color: #fff;
    }
}
#home-pagination__nav {
    bottom: 25px;
    margin-left: -13px;
    font-size: 0;
    line-height: 0;
}
@media screen and (max-height: 480px) {
    #home-pagination__nav {
        bottom: 15px;
    }
}
@media screen and (min-width: 1024px) {
    #home-pagination__nav {
        top: 50.84%;
        bottom: auto;
    }
}
@media screen and (min-height: 1024px) and (max-height: 650px) {
    #home-pagination__nav {
        top: 43.85%;
    }
}
@media screen and (min-width: 1400px) {
    #home-pagination__nav {
        top: 49.41%;
        margin-left: -19px;
        /* background-color: #e0e0ff; */
        border-radius: 4px;
        /* color: red; */
    }
}
@media screen and (min-width: 1024px) {
    .home-pagination--small #home-pagination__nav {
        top: 90px;
    }
}
@media screen and (min-width: 1280px) {
    .home-pagination--small #home-pagination__nav {
        top: 110px;
    }
}
.home-pagination__nav__item {
    position: relative;
    width: 26px;
    height: 20px;
}
@media screen and (min-width: 1400px) {
    .home-pagination__nav__item {
        width: 39px;
        height: 30px;
    }
}
.home-pagination__nav__item__btn,
.home-pagination__nav__item__timer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.home-pagination__nav__item__timer {
    fill: none;
    stroke-width: 2px;
    stroke: #fff;
    visibility: hidden;
}
.home-pagination__nav__item__timer__circle {
    opacity: 0.3;
}
.home-pagination__nav__item__btn::after,
.home-pagination__nav__item__btn::before {
    content: "";
    position: absolute;
    display: block;
    border-radius: 50%;
    background-color: #fff;
}
.home-pagination__nav__item__btn::before {
    top: 50%;
    left: 50%;
    width: 3px;
    height: 3px;
    margin-left: -2px;
    margin-top: -2px;
    opacity: 0.5;
    transition: background-color 0.7s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.home-pagination--dark .home-pagination__nav__item__btn::before {
    background-color: #d7d7d7;
    opacity: 1;
}
.home-pagination__nav__item--selected .home-pagination__nav__item__btn::before {
    opacity: 1;
}
.home-pagination--dark .home-pagination__nav__item--selected .home-pagination__nav__item__btn::before {
    background-color: #1d1d1d;
}
.home-pagination__nav__item__btn::after {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform-origin: center center;
    transform: scale(0.1, 0.1);
}
#projects__nav__expand,
#projects__nav__shrink {
    height: 48px;
    transition: color 0.3s;
    z-index: 10;
    text-transform: uppercase;
}
.home-pagination__nav__item__btn:hover::before {
    background-color: #d62323;
}
#home-scroll-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 11.23vh;
    text-align: center;
    visibility: hidden;
    z-index: 3;
}
@media screen and (min-width: 1024px) {
    #home-scroll-cta {
        right: 0;
        bottom: 6.04vw;
        left: auto;
        width: 13.48%;
    }
}
@media screen and (min-width: 1280px) {
    #home-scroll-cta {
        width: 10.49%;
    }
}
#home-scroll-cta__label {
    display: none;
}
@media screen and (min-width: 1024px) {
    #home-scroll-cta__label {
        position: absolute;
        bottom: 172.04%;
        left: 50%;
        display: block;
        white-space: nowrap;
        color: rgb(255, 255, 255);
        text-transform: uppercase;
        letter-spacing: 0.28em;
        font-size: 0.5rem;
        transform: rotate(-90deg) translateY(50%);
        transform-origin: left bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        font-weight: bold;
    }
}
.home-scroll-cta--dark #home-scroll-cta__label {
    color: #a7a7a7;
    /* color: #fff; */
}
#home-scroll-cta__btn {
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
}
#home-scroll-cta__btn__picto {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    fill: yellow;
    transition: fill 0.5s;
}
@media screen and (min-width: 1024px) {
    #home-scroll-cta__btn__picto {
        fill: #fff;
    }
}
.home-scroll-cta--dark #home-scroll-cta__btn__picto {
    fill: #000;
}
@media screen and (min-width: 1024px) {
    .home-scroll-cta--dark #home-scroll-cta__btn__picto {
        fill: #f48c50;
    }
}
#home-scroll-cta:hover #home-scroll-cta__btn__picto {
    transition: fill 0s 0.12s;
    fill: #000;
    animation: home-scroll-cta__btn__picto__roll-over 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#home-scroll-cta.home-scroll-cta--dark:hover #home-scroll-cta__btn__picto {
    fill: #000;
}
#home-scroll-cta__btn__picto svg {
    display: block;
    width: 18px;
    height: 100%;
}
@keyframes home-scroll-cta__btn__picto__roll-over {
    30% {
        transform: translateY(30px);
        opacity: 0;
    }
    30.001% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
#projects__nav__color-overlay,
#projects__nav__overlay {
    top: 0;
    height: 100%;
    transform-origin: left top;
    width: 100%;
    position: absolute;
}
#projects-page {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
}
#projects-line {
    position: absolute;
    left: 14.49%;
    top: 41.12%;
    width: 1px;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: 12;
}
#projects_media_overlay {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    background-color: #f2f4f6;
    z-index: 1;
    transform-origin: bottom left;
}
#projects__nav {
    position: fixed;
    top: 41.12%;
    bottom: 11.78%;
    left: 0;
    width: 14.49%;
    z-index: 11;
}
@media screen and (min-width: 1024px) {
    #home-scroll-cta:hover #home-scroll-cta__btn__picto {
        fill: #f37024;
    }
    #home-scroll-cta.home-scroll-cta--dark:hover #home-scroll-cta__btn__picto {
        fill: #000;
    }
    #home-scroll-cta__btn__picto svg {
        width: 22px;
    }
    #projects-line {
        top: 0;
        left: 15.14%;
    }
    #projects__nav {
        top: 0;
        display: -ms-flexbox;
        display: flex;
        width: 15.14%;
        height: 100%;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
#projects__nav.projects__nav--expanded {
    top: 0;
    bottom: 0;
    width: 100%;
}
#projects__nav__color-overlay {
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    visibility: hidden;
}
.projects__nav--expanded #projects__nav__color-overlay {
    visibility: inherit;
}
#projects__nav__overlay {
    left: 0;
    background-color: #fff;
    z-index: 9;
    visibility: hidden;
}
#projects__nav__overlay::after {
    content: "";
    position: absolute;
    top: 21.47%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #efefef;
}
.projects__nav--expanded #projects__nav__overlay {
    visibility: inherit;
}
#projects__nav__expand {
    position: relative;
    width: 100%;
    font-weight: 700;
    color: #1c377d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media screen and (min-width: 1024px) {
    #projects__nav.projects__nav--expanded {
        bottom: auto;
    }
    #projects__nav__color-overlay {
        top: 82px;
    }
    #projects__nav__overlay {
        top: 0;
    }
    #projects__nav__overlay::after {
        content: none;
    }
    #projects__nav__expand {
        padding-left: 45.87%;
        text-align: left;
    }
}
.no-touchevents #projects__nav__expand:hover {
    color: #272727;
}
.projects__nav--expanded #projects__nav__expand {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}
#projects__nav__shrink {
    position: absolute;
    top: 13.13%;
    left: 3.62%;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #7d7d7d;
    visibility: hidden;
}
.no-touchevents #projects__nav__shrink:hover {
    color: #272727;
}
.projects__nav--expanded #projects__nav__shrink {
    visibility: inherit;
}
@media screen and (min-width: 1024px) {
    #projects__nav__shrink {
        top: 34.44%;
        left: 0;
        width: 100%;
    }
    .projects__nav--expanded #projects__nav__shrink {
        width: 15.14%;
    }
}
#projects__nav__shrink__txt {
    position: relative;
    display: inline-block;
    padding-right: 10px;
    padding-left: 50px;
    text-align: left;
}
#projects__nav__shrink__txt::before {
    content: "";
    position: absolute;
    top: 7px;
    left: 10px;
    display: block;
    width: 30px;
    height: 2px;
    margin-right: 11px;
    vertical-align: middle;
    background-color: #dfdfdf;
}
#projects__nav__list {
    position: relative;
    display: block;
    width: 100%;
    z-index: 10;
}
@media screen and (min-height: 680px) {
    #projects__nav__list {
        padding-top: 20px;
    }
}
.projects__nav--expanded #projects__nav__list {
    position: absolute;
    top: 23.05%;
    bottom: 0;
    padding-top: 0;
}
@media screen and (min-width: 1024px) {
    #projects__nav__list {
        padding-top: 0;
    }
    .projects__nav--expanded #projects__nav__list {
        position: static;
        display: -ms-flexbox;
        display: flex;
        width: 55.42%;
        height: 100%;
        margin-left: 15.14%;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
    }
    .projects__nav__item {
        margin-bottom: 4px;
    }
}
.projects__nav__item {
    position: relative;
    display: block;
    width: 100%;
    height: 48px;
    z-index: inherit;
}
@media screen and (max-height: 610px) {
    .projects__nav__item {
        height: 40px;
    }
}
@media screen and (max-height: 510px) {
    .projects__nav__item {
        height: 34px;
    }
}
.projects__nav--expanded .projects__nav__item {
    height: 20%;
    max-height: 140px;
    margin-bottom: 0;
    opacity: 0.7;
}
@media screen and (min-width: 1024px) {
    .projects__nav--expanded .projects__nav__item {
        height: 17.07%;
        opacity: 1;
    }
}
.projects__nav--expanded .projects__nav__item--selected {
    opacity: 1;
}
.projects__nav-link {
    display: block;
    height: 100%;
}
.projects__nav--expanded .projects__nav-link {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -ms-flex-align: center;
    align-items: center;
}
.projects__nav__index {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    font-weight: 700;
    color: #1c377d;
    font-size: 12px;
    line-height: 1em;
    transition: color 0.5s;
}
.projects__nav__item--selected .projects__nav__index {
    color: #f48c50;
}
.no-touchevents .projects__nav-link:hover .projects__nav__index {
    color: #272727;
}
.projects__nav--expanded .projects__nav__index {
    width: 14.49%;
    top: -26px;
}
.projects__nav__index__txt {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    color: #f37024;
}
.projects__nav__index__line {
    transform-origin: top left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
@media screen and (min-width: 1024px) {
    .projects__nav__index {
        position: relative;
        padding-left: 45.87%;
        text-align: right;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
    .projects__nav--expanded .projects__nav__index {
        top: -8px;
        width: 11.4%;
        height: 39.29%;
        padding-left: 0;
        margin-right: 1.25%;
        -ms-flex-align: start;
        align-items: flex-start;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
    .projects__nav--expanded .projects__nav__index__txt {
        padding-right: 13.19%;
        /* color: green; */
    }
    .projects__nav__index__line {
        position: absolute;
        top: 0;
        right: 0;
        width: 3px;
        height: 100%;
        background-color: #f48c50;
        visibility: hidden;
    }
    .projects__nav__item--selected .projects__nav__index__line {
        visibility: inherit;
    }
    .projects__nav--expanded .projects__nav__index__line {
        right: auto;
        left: -3px;
    }
}
.projects__nav__infos {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-positive: 2;
    flex-grow: 2;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
    line-height: 1em;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-weight: 500;
    border-bottom: 1px solid #f4f4f4;
    visibility: hidden;
    transform-origin: top left;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.projects__nav--expanded .projects__nav__infos {
    visibility: inherit;
}
.project,
.project__media--fullscreen .project__media__overlay {
    visibility: hidden;
}
.projects__nav__infos__title {
    padding-bottom: 15px;
    font-size: 20px;
    line-height: 1em;
    color: #868686;
    transition: color 0.4s;
}
.no-touchevents .projects__nav-link:hover .projects__nav__infos__title,
.projects__nav__item--selected .projects__nav__infos__title {
    color: #343434;
}
.projects__nav__infos__tags {
    padding-right: 21.74%;
}
@media screen and (min-width: 1024px) {
    .projects__nav__infos__title {
        padding-bottom: 8px;
        font-size: 42px;
    }
    .projects__nav__infos__tags {
        padding-right: 0;
    }
}
.projects__nav__infos__tag {
    display: inline-block;
    margin-right: 20px;
}
.projects__nav__infos__tag div {
    display: inline-block;
}
.projects__nav__infos__tag__name {
    margin-right: 5px;
    text-transform: uppercase;
    font-size: 11px;
    font-family: roboto, Helvetica, Arial, sans-serif;
    color: #575757;
    font-weight: 500;
    opacity: 0.7;
}
.project__tags,
.project__title {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
}
@media screen and (min-width: 1024px) {
    .projects__nav__infos__tag__name {
        font-size: 8px;
        color: silver;
        opacity: 1;
    }
}
.projects__nav__infos__tag__value {
    font-size: 12px;
    color: #575757;
}
.project {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
@media screen and (min-width: 1024px) {
    .projects__nav__infos__tag__value {
        font-size: 11px;
        color: #979797;
    }
    .project__body {
        position: absolute;
        top: 0;
        left: 22.15%;
        display: -ms-flexbox;
        display: flex;
        width: 24.2%;
        height: 100%;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
.project__title {
    position: absolute;
    bottom: 59.1%;
    left: 0;
    padding-right: 14.49%;
    padding-bottom: 30px;
    padding-left: 21.74%;
    color: #f48c50;
    font-size: 43px;
    line-height: 1.07em;
    font-weight: 500;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    .project__title {
        position: static;
        padding-right: 0;
        padding-bottom: 25px;
        padding-left: 0;
        font-size: 38px;
        line-height: 1.09em;
        z-index: auto;
    }
}
@media screen and (min-width: 1280px) {
    .project__title {
        font-size: 53px;
    }
}
.project__desc {
    position: absolute;
    top: 40.76%;
    right: 0;
    bottom: 11.78%;
    left: 14.49%;
    padding-top: 35px;
    padding-right: 16.95%;
    padding-left: 8.47%;
    overflow-y: auto;
    overflow-x: hidden;
    color: #1e396e;
    font-size: 14px;
    line-height: 1.71em;
    text-align: justify;
}
.project__desc__more {
    height: 36px;
    margin-top: 30px;
    font-size: 11px;
    text-transform: uppercase;
    color: #000;
    font-weight: 500;
}
.project__desc__more::after {
    content: "";
    display: inline-block;
    width: 60px;
    height: 1px;
    margin-top: -1px;
    margin-left: 12px;
    vertical-align: middle;
    background-color: #000;
}
@media screen and (min-width: 1024px) {
    .project__desc {
        position: static;
        padding: 0;
        overflow: hidden;
    }
    .project__desc__more {
        display: none;
    }
}
.project__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 41.12%;
}
@media screen and (min-width: 1024px) {
    .project__media {
        top: calc(82px + 6.81%);
        right: 8.13%;
        bottom: 6.81%;
        left: 50.21%;
        display: -ms-flexbox;
        display: flex;
        height: auto;
        width: auto;
        -ms-flex-pack: end;
        justify-content: flex-end;
    }
}
.project__media.project__media--fullscreen {
    height: 100%;
}
@media screen and (min-width: 1024px) {
    .project__media.project__media--fullscreen {
        top: 82px;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        -ms-flex-pack: center;
        justify-content: center;
    }
}
.project__media__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    opacity: 0.6;
    z-index: 1;
    transform-origin: left top;
}
@media screen and (min-width: 1024px) {
    .project__media__overlay {
        position: absolute;
        top: -82px;
        height: 82px;
        background-color: #fff;
        z-index: 51;
        opacity: 1;
        visibility: hidden;
    }
    .project__media--fullscreen .project__media__overlay {
        visibility: inherit;
    }
}
.project__media__close {
    position: absolute;
    top: 0;
    right: 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 82px;
    z-index: 101;
    visibility: hidden;
}
@media screen and (min-width: 1024px) {
    .project__media__close {
        top: -82px;
        right: 14px;
        z-index: 51;
    }
}
.project__media--fullscreen .project__media__close {
    visibility: inherit;
}
.project__media__close__btn {
    position: relative;
    width: 86px;
    height: 100%;
    background-color: #d62323;
    transition: background-color 0.4s;
}
.no-touchevents .project__media__close__btn:hover {
    background-color: #ae181d;
}
.project__media__close__btn__picto {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
}
.project__media__close__btn__picto__line {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 23px;
    height: 3px;
    margin-left: -12px;
    margin-top: -2px;
    background-color: #fff;
}
.project__media__close__btn__picto__line:nth-child(1) {
    transform: rotate(-45deg);
}
.project__media__close__btn__picto__line:nth-child(2) {
    transform: rotate(45deg);
}
.project__media__close__label {
    display: none;
}
@media screen and (min-width: 1024px) {
    .project__media__close__label {
        display: block;
        margin-right: 45px;
        text-transform: uppercase;
        color: #909090;
        font-size: 10px;
        font-weight: 500;
    }
}
.project__media__nav {
    position: absolute;
    bottom: 0;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 10.87%;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    visibility: hidden;
    z-index: 2;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.project__media--fullscreen .project__media__nav {
    visibility: inherit;
}
@media screen and (min-width: 1024px) {
    .project__media__nav {
        position: relative;
        width: 192px;
        height: 67px;
        visibility: inherit;
        display: none;
    }
    .project__media--fullscreen .project__media__nav {
        width: auto;
        padding: 0 91px;
        margin-top: 56px;
    }
}
.project__media__nav__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1e396e;
    transform-origin: left top;
}
.project__media__nav__btn {
    position: absolute;
    top: 0;
    width: 21.74%;
    height: 100%;
}
.project__media__nav__btn--prev {
    left: 0;
    padding-left: 7.25%;
}
.project__media__nav__btn--next {
    right: 0;
    padding-right: 7.25%;
}
@media screen and (min-width: 1024px) {
    .project__media__nav__btn {
        width: 91px;
    }
    .project__media__nav__btn--prev {
        padding-left: 0;
    }
    .project__media__nav__btn--next {
        padding-right: 0;
    }
}
.project__media__nav__btn__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}
.project__media__nav__btn__picto {
    width: 6px;
    height: 6px;
    border-bottom: 1px solid #d8d8d8;
    transition: border-color 0.3s;
}
.project__media__nav__btn--prev .project__media__nav__btn__picto {
    border-left: 1px solid #fff;
    transform: rotate(45deg);
}
.project__media__nav__btn--next .project__media__nav__btn__picto {
    border-right: 1px solid #fff;
    transform: rotate(-45deg);
}
.no-touchevents .project__media__nav__btn:hover .project__media__nav__btn__picto {
    border-color: #fff !important;
}
.project__media__nav__line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 9px;
    margin-top: -4px;
    background-color: #fff;
    font-weight: bold;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    visibility: hidden;
}
.project__media--fullscreen .project__media__nav__line {
    opacity: 0;
}
.project__media__nav__list {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0 15px;
    overflow: hidden;
}
@media screen and (min-width: 1024px) {
    .project__media__nav__line {
        visibility: inherit;
    }
    .project__media__nav__list {
        visibility: hidden;
    }
}
.project__media--fullscreen .project__media__nav__list {
    visibility: inherit;
}
.project__media__nav__item {
    display: inline-block;
    height: 100%;
}
.project__media__nav__item__btn {
    display: block;
    width: 23px;
    height: 100%;
}
.project__media__nav__item__btn__inner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
}
.project__media__nav__item__picto {
    display: block;
    width: 3px;
    height: 3px;
    background-color: #656565;
    border-radius: 50%;
    transition: background-color 0.3s;
}
.project__media__nav__item--selected .project__media__nav__item__picto {
    background-color: #fff;
}
.no-touchevents .project__media__nav__item__btn:hover .project__media__nav__item__picto {
    background-color: #bfbfbf;
}
.project__media__list {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.project__media__img,
.project__media__item {
    -webkit-backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.project__media__item {
    height: 100%;
    overflow: hidden;
    visibility: hidden;
    backface-visibility: hidden;
}
.project__media__img {
    height: auto;
    transform-origin: left top;
    backface-visibility: hidden;
}
.project__media__player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
}
.project__media__more {
    display: none;
}
@media screen and (min-width: 1024px) {
    .project__media__more {
        position: absolute;
        top: 0;
        left: 0;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        height: 100%;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.6s;
        cursor: pointer;
    }
    .project__media__item:hover .project__media__more {
        opacity: 1;
        transition: opacity 0.2s;
    }
    .project__media--fullscreen .project__media__more {
        visibility: hidden;
    }
}
.project__media__more__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    opacity: 0.6;
}
.project__media__more__btn {
    position: relative;
    text-transform: uppercase;
    font-size: 11px;
    color: #fff;
    font-weight: 500;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.project__media__more--img .project__media__more__btn {
    opacity: 0;
    transform: translateX(20px);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s;
}
.project__media__more--img:hover .project__media__more__btn {
    opacity: 1;
    transform: translateX(0);
}
.project__media__more--img:hover .project__media__more__btn:hover {
    transform: translateX(20px);
}
.project__media__more--video .project__media__more__btn {
    width: 85px;
    height: 85px;
    border: 2px solid #fff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.9);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.project__media__more--video:hover .project__media__more__btn {
    opacity: 1;
    transform: scale(1);
}
.project__media__more--video:hover .project__media__more__btn:hover {
    transform: scale(1.05);
}
.project__media__more__btn::after {
    content: "";
}
.project__media__more--img .project__media__more__btn::after {
    display: inline-block;
    width: 69px;
    height: 1px;
    margin-top: -1px;
    margin-left: 25px;
    vertical-align: middle;
    background-color: #fff;
    opacity: 0;
    transform: translateX(-60px) scaleX(0.2);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s;
    transform-origin: top right;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.project__media__more--img:hover .project__media__more__btn::after {
    opacity: 1;
    transform: scaleX(1) translateX(0);
}
.project__media__more--img:hover .project__media__more__btn::after:hover {
    transform: translateX(-20px) scale(0.8);
}
.project__media__more--img:hover .project__media__more__btn:hover::after {
    transform: translateX(-50%) scale(0.6);
}
.project__media__more--video .project__media__more__btn::after {
    position: absolute;
    top: 40px;
    left: 40px;
    display: block;
    width: 0;
    height: 0;
    margin-top: -5px;
    margin-left: -3px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
    opacity: 0;
    transform: translateY(50px);
    transition: transform 0s 0.4s, opacity 0.4s;
}
.project__media__more--video:hover .project__media__more__btn::after {
    opacity: 1;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s;
}
.project__media__more--video:hover .project__media__more__btn::after:hover {
    transform: scale(0.95);
}
.project__tags {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 11.78%;
    color: #fff;
}
@media screen and (min-width: 1024px) {
    .project__tags {
        left: 15.14%;
        width: 47.71%;
        height: 15.56%;
    }
}
.project__tags__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #f48c50;
    z-index: 2;
    transform-origin: left top;
}
.project__tags__inner {
    position: absolute;
    top: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    -ms-flex-align: center;
    align-items: center;
    padding-left: 21.74%;
    z-index: 3;
}
@media screen and (min-width: 1024px) {
    .project__tags__inner {
        padding-left: 5.82%;
        -ms-flex-pack: start;
        justify-content: flex-start;
    }
}
.project__tag {
    height: 34px;
    padding: 0 15px;
    border-right: 1px solid #d6565d;
}
@media screen and (max-width: 1023px) {
    .project__tag:first-child {
        padding-left: 0;
    }
}
.project__tag:last-child {
    border-right: none;
}
@media screen and (min-width: 1024px) {
    .project__tag {
        width: 27.95%;
        padding: 0 10px 0 9.9%;
    }
}
.project__tag__name {
    padding-bottom: 4px;
    font-size: 9px;
    color: #000000;
    letter-spacing: 0.2em;
    font-weight: 700;
    text-transform: uppercase;
}
@media screen and (min-width: 1024px) {
    .project__tag__name {
        font-size: 10px;
    }
}
.project__tag__value {
    font-size: 15px;
}
#projects__scroll-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 14.49%;
    height: 11.78%;
    text-align: center;
    z-index: 3;
}
#projects__scroll-cta__label {
    display: none;
}
@media screen and (min-width: 1024px) {
    .project__tag__value {
        font-size: 16px;
    }
    #projects__scroll-cta {
        right: 0;
        bottom: 10.44%;
        left: auto;
        width: 8.13%;
        height: 93px;
    }
    #projects__scroll-cta__label {
        position: absolute;
        bottom: 120px;
        left: 50%;
        display: block;
        white-space: nowrap;
        color: #1c377d;
        text-transform: uppercase;
        letter-spacing: 0.28em;
        font-weight: 600;
        font-size: 8px;
        transform: rotate(-90deg) translateY(50%);
        transform-origin: left bottom;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }
}
#contact__subtitle,
#contact__title {
    line-height: 1em;
    font-weight: 700;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
}
#projects__scroll-cta__btn {
    text-align: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#projects__scroll-cta__picto {
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    fill: #fff;
    transition: fill 0.5s;
}
#projects__scroll-cta__btn:hover #projects__scroll-cta__picto {
    transition: fill 0s 0.12s;
    fill: #000;
    animation: projects__scroll-cta__picto__roll-over 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#projects__scroll-cta__picto svg {
    display: block;
    width: 18px;
    height: 100%;
}
@keyframes projects__scroll-cta__picto__roll-over {
    30% {
        transform: translateY(30px);
        opacity: 0;
    }
    30.001% {
        transform: translateY(-50px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
#contact-page {
    padding-bottom: 110px;
}
#contact__header {
    position: relative;
}
#contact__header__img-wrapper {
    position: relative;
    overflow: hidden;
}
@media screen and (min-width: 1024px) {
    #projects__scroll-cta__picto {
        fill: #f48c50;
    }
    #projects__scroll-cta__picto svg {
        width: 32px;
    }
    #contact-page {
        padding-bottom: 160px;
    }
    #contact__header {
        margin-top: 82px;
    }
    #contact__header__img-wrapper {
        margin: 0 7.23%;
    }
}
@media screen and (min-width: 1280px) {
    #contact__header__img-wrapper {
        margin: 0 8.13%;
    }
}
#contact__header__img-wrapper::before {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    padding-top: 39.29%;
}
#contact__header__overlay {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f2f4f6;
    z-index: 2;
    transform-origin: center top;
    visibility: hidden;
}
#contact__header__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../Images/Jamjoom-Printing-Press-Office.jpg) center center no-repeat;
    background-size: auto 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
}
#contact__header__txt {
    position: relative;
    padding: 30px 3.62% 60px;
    margin: -28px 6.52% 0;
    text-align: center;
    background-color: #fff;
}
#contact__title {
    margin-bottom: 5px;
    color: #d62323;
    font-size: 13px;
}
@media screen and (min-width: 1024px) {
    #contact__header__img-wrapper::before {
        padding-top: 39.27%;
    }
    #contact__header__txt {
        padding: 55px 14.03% 80px;
        margin: -82px 15.14% 0;
    }
    #contact__title {
        margin-bottom: 10px;
        font-size: 22px;
    }
}
#contact__subtitle {
    padding: 0 8.33%;
    margin-bottom: 15px;
    color: #2e2e2e;
    font-size: 26px;
}
#contact__subtitle span {
    position: relative;
    display: inline-block;
    z-index: 1;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
#contact__subtitle span::after,
#contact__subtitle span::before {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    display: block;
    width: 100%;
    height: 3px;
    z-index: -1;
}
@media screen and (min-width: 1024px) {
    #contact__subtitle {
        padding: 0;
        margin-bottom: 30px;
        font-size: 46px;
    }
    #contact__subtitle span::after,
    #contact__subtitle span::before {
        height: 8px;
    }
}
#contact__subtitle span::before {
    background-color: rgba(122, 132, 146, 0.14);
}
#contact__subtitle span::after {
    background-color: rgba(70, 80, 95, 0.14);
    transform-origin: right top;
    transform: scaleX(0);
    transition: transform 0.5s cubic-bezier(1, 0, 0, 1);
}
.no-touchevents #contact__subtitle span:hover::after {
    transform-origin: left top;
    transform: scaleX(1);
}
#contact__intro {
    color: #949494;
    font-size: 13px;
    line-height: 1.54em;
}
#contact__form {
    padding: 60px 6.52% 85px;
    background-color: rgba(247, 248, 253, 0.64);
}
@media screen and (min-width: 1024px) {
    #contact__intro {
        max-width: 700px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 2em;
    }
    #contact__form {
        padding: 110px 11.88% 100px;
        margin: 0 15.14%;
    }
}
#contact__form__alert {
    display: none;
    padding: 20px;
    margin-bottom: 30px;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
}
.contact__form--success #contact__form__alert {
    display: block;
    background-color: #5cb85c;
    color: #255625;
}
.contact__form--fail #contact__form__alert {
    display: block;
    background-color: #d9534f;
    color: #761c19;
}
.contact__form--fail #contact__form__alert li {
    padding-top: 10px;
}
.contact__form--fail #contact__form__alert li:first-child {
    padding-top: 0;
}
#contact__form fieldset {
    margin-bottom: 25px;
    border: none;
}
#contact__form input,
#contact__form select,
#contact__form textarea,
.contact__form__subject__item label {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: roboto, Helvetica, Arial, sans-serif; */
    font-size: 13px;
    line-height: 1em;
    -webkit-appearance: none;
    border-radius: 0;
}
#contact__form input[type="date"],
#contact__form input[type="email"],
#contact__form input[type="number"],
#contact__form input[type="tel"],
#contact__form input[type="text"],
#contact__form select,
#contact__form textarea {
    padding-left: 30px;
}
#contact__form input[type="date"],
#contact__form input[type="email"],
#contact__form input[type="number"],
#contact__form input[type="tel"],
#contact__form input[type="text"],
#contact__form textarea {
    border: 1px solid #e6e6e6;
    background-color: #fff;
    transition: border-color 0.3s;
    color: #2e2e2e;
}
#contact__form input[type="date"]:focus,
#contact__form input[type="email"]:focus,
#contact__form input[type="number"]:focus,
#contact__form input[type="tel"]:focus,
#contact__form input[type="text"]:focus,
#contact__form textarea:focus {
    border: 1px solid #818383;
}
#contact__form input[type="date"]:-ms-input-placeholder,
#contact__form input[type="email"]:-ms-input-placeholder,
#contact__form input[type="number"]:-ms-input-placeholder,
#contact__form input[type="tel"]:-ms-input-placeholder,
#contact__form input[type="text"]:-ms-input-placeholder,
#contact__form textarea:-ms-input-placeholder {
    color: #aaa;
}
#contact__form input[type="date"]::placeholder,
#contact__form input[type="email"]::placeholder,
#contact__form input[type="number"]::placeholder,
#contact__form input[type="tel"]::placeholder,
#contact__form input[type="text"]::placeholder,
#contact__form textarea::placeholder {
    color: #aaa;
}
#contact__form input[type="date"],
#contact__form input[type="email"],
#contact__form input[type="number"],
#contact__form input[type="tel"],
#contact__form input[type="text"] {
    width: 100%;
    height: 50px;
}
@media screen and (min-width: 1024px) {
    #contact__form fieldset {
        margin-bottom: 40px;
    }
    #contact__form input[type="date"],
    #contact__form input[type="email"],
    #contact__form input[type="number"],
    #contact__form input[type="tel"],
    #contact__form input[type="text"],
    #contact__form select,
    #contact__form textarea {
        padding-left: 40px;
    }
    #contact__form input[type="date"],
    #contact__form input[type="email"],
    #contact__form input[type="number"],
    #contact__form input[type="tel"],
    #contact__form input[type="text"] {
        width: 49.23%;
        height: 68px;
    }
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
#contact__form textarea {
    width: 100%;
    padding-top: 25px;
    overflow: auto;
    resize: vertical;
}
.contact__form__btn {
    margin-top: 35px;
    display: inline-block;
    height: 54px;
    background-color: #343434;
    color: #fff;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-weight: 500;
    vertical-align: top;
    font-size: 13px;
    line-height: 54px;
    cursor: pointer;
    transition: background-color 0.3s;
}
#contact__form__vendor-doc__txt,
#contact__infos__panel__title,
.contact__form__title {
    line-height: 1em;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
}
.contact__form__title {
    display: block;
    padding-bottom: 10px;
    color: #2e2e2e;
    font-weight: 500;
    font-size: 18px;
}
.contact__form__title--required::after {
    content: "*";
    color: #d62323;
    font-size: 15px;
}
.contact__form__label {
    display: block;
    margin-bottom: 20px;
    font-size: 13px;
    line-height: 1.85em;
    color: #a3a4a4;
}
.contact__form__radio {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
}
.contact__form__radio input {
    display: none;
}
.contact__form__radio__picto {
    position: relative;
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    vertical-align: middle;
    cursor: pointer;
}
.contact__form__radio__picto::after,
.contact__form__radio__picto::before {
    display: block;
    border-radius: 50%;
    content: "";
    position: absolute;
}
@media screen and (min-width: 1024px) {
    .contact__form__radio__picto {
        width: 28px;
        height: 28px;
    }
}
.contact__form__radio__picto::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #d9dbdd;
    transform: scale(0, 0);
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.contact__form__radio input:checked + .contact__form__radio__picto::before {
    transform: scale(1, 1);
}
.contact__form__radio__picto::after {
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin-top: -6px;
    margin-left: -6px;
    opacity: 0.18;
    background-color: #343434;
    transition: opacity 0.5s, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media screen and (min-width: 1024px) {
    .contact__form__radio__picto::after {
        width: 18px;
        height: 18px;
        margin-top: -9px;
        margin-left: -9px;
    }
}
.no-touchevents .contact__form__radio:hover .contact__form__radio__picto::after {
    opacity: 0.5;
}
.no-touchevents .contact__form__radio:active .contact__form__radio__picto::after {
    transform: scale(0.8, 0.8);
    opacity: 0.3;
}
.contact__form__radio input:checked + .contact__form__radio__picto::after {
    opacity: 1 !important;
}
.contact__form__radio__label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}
.contact__form__radio input:checked ~ .contact__form__radio__label {
    cursor: default;
}
.contact__form__subject__item {
    display: -ms-flexbox;
    display: flex;
    height: 60px;
    -ms-flex-align: center;
    align-items: center;
    color: #a1a2a4;
    border-bottom: 1px solid #d6d7d9;
}
.contact__form__subject__item:last-child {
    border-bottom: none;
}
.contact__form__subject__item .contact__form__radio__picto {
    margin-right: 15px;
}
@media screen and (min-width: 1024px) {
    .contact__form__subject__item {
        height: 77px;
    }
    .contact__form__subject__item .contact__form__radio__picto {
        margin-right: 30px;
    }
}
#contact__form__info__call {
    display: none !important;
}
.contact__form--project #contact__form__info__call {
    display: block !important;
}
#contact__form__jobs,
#contact__form__salary {
    margin-bottom: 0 !important;
    border: 1px solid red;
    overflow: hidden;
    transition: height 0.5s, opacity 0.4s;
}
#contact__form__jobs.contact__form__jobs--hidden,
#contact__form__salary.contact__form__salary--hidden {
    height: 0 !important;
    visibility: hidden;
    opacity: 0;
    transition: height 0.5s, visibility 0s 0.5s, opacity 0.4s;
}
#contact__form__jobs__select-wrapper,
#contact__form__salary__select-wrapper {
    position: relative;
    display: inline-block;
    width: 60%;
    margin-right: 1.39%;
    margin-bottom: 40px;
    overflow: hidden;
    background-color: #fff;
}
#contact__form__jobs__select-picto,
#contact__form__salary__select-picto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 53px;
    border-left: 1px solid #eaeaea;
}
#contact__form__jobs__select-picto::after,
#contact__form__jobs__select-picto::before,
#contact__form__salary__select-picto::after,
#contact__form__salary__select-picto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    margin-left: -2px;
}
#contact__form__jobs__select-picto::before,
#contact__form__salary__select-picto::before {
    border-width: 0 2.5px 3px;
    border-color: transparent transparent #818383;
    margin-top: -3px;
}
#contact__form__jobs__select-picto::after,
#contact__form__salary__select-picto::after {
    border-width: 3px 2.5px 0;
    border-color: #818383 transparent transparent;
    margin-top: 3px;
}
#contact__form__jobs__select,
#contact__form__salary__select {
    position: relative;
    width: calc(100% + 20px);
    height: 54px;
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #c2c2c2;
    background-color: transparent;
    z-index: 1;
}
#contact__form__jobs__select::-ms-expand,
#contact__form__salary__select::-ms-expand {
    display: none;
}
#contact__form__jobs__detail {
    margin-top: 0;
}
#contact__form__jobs__detail,
#contact__form__salary__detail {
    width: 37.5%;
    margin-left: -4px;
}
.no-touchevents #contact__form__jobs__detail:hover,
.no-touchevents #contact__form__salary__detail:hover {
    background-color: #818383;
}
@media screen and (min-width: 1024px) {
    #contact__form__jobs__select-wrapper,
    #contact__form__salary__select-wrapper {
        width: 49.23%;
    }
    #contact__form__jobs__select-picto,
    #contact__form__salary__select-picto {
        width: 72px;
    }
    #contact__form__jobs__detail,
    #contact__form__salary__detail {
        width: 148px;
    }
    #contact__form__info > div,
    #contact__form__name > div {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
}
#contact__form__info input[type="email"],
#contact__form__info input[type="tel"],
#contact__form__info input[type="text"],
#contact__form__name input[type="email"],
#contact__form__name input[type="tel"],
#contact__form__name input[type="text"] {
    display: block;
    margin-bottom: 10px;
}
#contact__form__info input[type="email"]:last-of-type,
#contact__form__info input[type="tel"]:last-of-type,
#contact__form__info input[type="text"]:last-of-type,
#contact__form__name input[type="email"]:last-of-type,
#contact__form__name input[type="tel"]:last-of-type,
#contact__form__name input[type="text"]:last-of-type {
    margin-bottom: 0;
}
#contact__form__name .contact__form__title--job,
.contact__form--job #contact__form__name .contact__form__title {
    display: none !important;
}
.contact__form--job #contact__form__name .contact__form__title--job {
    display: block !important;
}
#contact__form__name__first,
#contact__form__name__last {
    display: none !important;
}
.contact__form--job #contact__form__name__first,
.contact__form--job #contact__form__name__last {
    display: block !important;
}
.contact__form--job #contact__form__name__company,
.contact__form--job #contact__form__name__personal {
    display: none !important;
}
#contact__form__salary {
    display: none;
}
.contact__form--job #contact__form__salary {
    display: block;
}
#contact__form__edu {
    width: 100%;
}
.js #contact__form__edu {
    display: none;
}
.contact__form__edu__item {
    position: relative;
    padding: 15px;
    margin: 0 -15px 25px;
    border: 1px solid #e6e7ea;
}
.contact__form__edu__item:first-child {
    border: none;
}
#contact__form__edu .contact__form__radio {
    margin-right: 35px;
}
#contact__form__edu .contact__form__radio__picto {
    margin-right: 15px;
}
#contact__form__edu .contact__form__radio__label {
    font-size: 13px;
    color: #262626;
}
.contact__form__edu__studies {
    margin-bottom: 30px;
}
#contact__form__org .contact__form__title,
.contact__form__edu__studies > input:first-child {
    margin-bottom: 10px;
}
@media screen and (min-width: 1024px) {
    .contact__form__edu__studies {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .contact__form__edu__studies > input:first-child {
        margin-bottom: 0;
    }
}
.contact__form__edu__dates {
    margin-bottom: 30px;
}
.contact__form__edu__dates__inputs {
    display: -ms-flexbox;
    display: flex;
}
.contact__form__edu__dates__end,
.contact__form__edu__dates__start {
    width: 160px !important;
    text-align: center;
}
@media screen and (min-width: 768px) {
    .contact__form__edu__dates__end,
    .contact__form__edu__dates__start {
        width: 180px !important;
    }
}
.contact__form__edu__dates__link {
    display: inline-block;
    width: 45px;
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    vertical-align: top;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
    color: #262626;
    text-align: center;
}
.contact__form__edu__item:first-child .contact__form__edu__remove,
.js #contact__form__org,
.no-js #contact__form__file__btn {
    display: none;
}
@media screen and (min-width: 768px) {
    .contact__form__edu__dates__link {
        width: 55px;
    }
}
@media screen and (min-width: 1024px) {
    .contact__form__edu__dates__link {
        height: 68px;
        line-height: 68px;
    }
}
.contact__form__edu__remove {
    position: absolute;
    right: 25px;
    bottom: 25px;
    width: 28px;
    height: 28px;
    background-color: #d62323;
}
#contact__form__edu__add__icon::after,
#contact__form__edu__add__icon::before,
.contact__form__edu__remove::after,
.contact__form__edu__remove::before {
    position: absolute;
    background-color: #fff;
    content: "";
}
.contact__form__edu__remove::after,
.contact__form__edu__remove::before {
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
}
.contact__form__edu__remove::before {
    width: 10px;
    height: 2px;
    margin-top: -1px;
    margin-left: -5px;
}
.contact__form__edu__remove::after {
    width: 2px;
    height: 10px;
    margin-top: -5px;
    margin-left: -1px;
}
#contact__form__edu__add {
    padding: 0 30px;
}
#contact__form__edu__add__icon {
    position: relative;
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 12px;
}
#contact__form__edu__add__icon::before {
    top: 4px;
    left: 0;
    width: 10px;
    height: 2px;
}
#contact__form__edu__add__icon::after {
    top: 0;
    left: 4px;
    width: 2px;
    height: 10px;
}
#contact__form__org .contact__form__radio {
    margin-right: 35px;
}
#contact__form__org .contact__form__radio__picto {
    margin-right: 15px;
}
#contact__form__org .contact__form__radio__label {
    font-size: 13px;
    color: #262626;
}
#contact__form__memberships__input,
#contact__form__org textarea {
    min-height: 200px;
}
#contact__form__exp,
#contact__form__memberships,
#contact__form__prev-address {
    margin-bottom: 45px;
}
#contact__form__eligible,
#contact__form__perform {
    margin-bottom: 40px;
}
fieldset#contact__form__message {
    margin-bottom: 25px;
}
#contact__form__message__input {
    min-height: 360px;
}
#contact__form__submit {
    width: calc(50% - 5px);
    transition: opacity 0.4s background-color 0.3s;
}
.no-touchevents #contact__form__submit:hover {
    background-color: #818383;
}
#contact__form__submit:disabled {
    background-color: #818383;
    pointer-events: none;
    opacity: 0.3;
}
#contact__form__submit__picto {
    display: inline-block;
    width: 15px;
    height: 13px;
    margin-left: -15px;
    fill: #fff;
}
#contact__form__submit__picto svg {
    display: block;
    width: 100%;
    height: 100%;
}
#contact__form__submit__label {
    display: inline-block;
    margin-left: 15px;
}
#contact__form__file {
    position: relative;
    display: inline-block;
    width: calc(50% - 5px);
}
@media screen and (min-width: 1024px) {
    #contact__form__submit {
        width: 224px;
    }
    #contact__form__file {
        width: auto;
        margin-left: 8px;
    }
    #contact__form__file__btn {
        padding: 0 82px 0 54px;
    }
}
#contact__form__file__input {
    display: inline-block;
}
.js #contact__form__file__input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}
#contact__form__file__btn {
    display: block;
    background-color: #d62323;
    text-align: center;
}
.no-touchevents #contact__form__file__btn:hover {
    background-color: #ae181d;
}
#contact__form__file__btn__picto {
    display: inline-block;
    width: 19px;
    height: 10px;
    margin-right: 10px;
    fill: #fff;
}
#contact__form__file__btn__picto svg {
    display: block;
    width: 100%;
    height: 100%;
}
#contact__form__file__btn__label {
    display: inline-block;
}
#contact__form__file-infos {
    margin-top: 20px;
    font-size: 13px;
    line-height: 1.85em;
    color: #a3a4a4;
}
#contact__form__vendor-doc {
    display: none;
    padding-top: 25px;
}
.contact__form--vendor #contact__form__vendor-doc {
    display: block;
}
#contact__form__vendor-doc__txt {
    color: #d62323;
    font-weight: 500;
    font-size: 14px;
}
#contact__form__vendor-doc__link {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 2em;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.4em;
    color: #000;
    font-weight: 500;
}
.no-touchevents #contact__form__vendor-doc__link:hover {
    color: #d62323;
}
#contact__form__vendor-doc__link::after {
    content: "";
    position: relative;
    top: 7px;
    left: 0;
    display: block;
    width: 80px;
    height: 1px;
    margin-left: 10px;
    background-color: #e6e6e6;
    transform-origin: top left;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), background-color 0.4s;
}
.no-touchevents #contact__form__vendor-doc__link:hover::after {
    transform: translateX(-5px) scaleX(0.25);
    background-color: #d62323;
}
#contact__infos {
    position: relative;
    margin-top: 90px;
}
#contact__infos a {
    transition: opacity 0.3s;
}
.no-touchevents #contact__infos a:hover {
    opacity: 0.6;
}
#contact__infos__panel {
    position: relative;
    width: 86.96%;
    padding-bottom: 20px;
    margin-left: 6.52%;
    background-color: #d62323;
    color: #fff;
    z-index: 1;
}
#contact__infos__panel__title {
    font-size: 18px;
    font-weight: 700;
    background-color: #ae181d;
    padding: 30px 16.67%;
}
@media screen and (min-width: 1024px) {
    #contact__form__vendor-doc__link::after {
        width: 130px;
        margin-left: 30px;
    }
    .no-touchevents #contact__form__vendor-doc__link:hover::after {
        transform: translateX(-10px) scaleX(0.7);
    }
    #contact__infos {
        min-height: 710px;
    }
    #contact__infos__panel {
        width: 27.36%;
        padding-bottom: 40px;
        margin-left: 15.14%;
    }
    #contact__infos__panel__title {
        padding: 45px 0 40px 20.3%;
    }
}
@media screen and (min-width: 1280px) {
    #contact__infos__panel__title {
        font-size: 21px;
    }
}
.contact__infos__panel__set {
    padding-bottom: 40px;
    margin-top: 40px;
    margin-right: 33.33%;
    margin-left: 16.67%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 11px;
    line-height: 1.54em;
}
.contact__infos__panel__set:last-child {
    margin-bottom: 0;
    border: none;
}
.contact__infos__panel__subtitle {
    padding-bottom: 25px;
    font-size: 13px;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-weight: 500;
    line-height: 1em;
}
#contact__jobs__title,
.contact__jobs__item__title {
    font-weight: 700;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
}
#contact__infos__address,
#contact__infos__phone {
    padding-bottom: 10px;
}
#contact__infos__careers a,
#contact__infos__email a,
#contact__infos__phone a {
    white-space: nowrap;
    color: #fff;
}
#contact__infos__map {
    height: 405px;
    margin-top: -50px;
    background-color: #eaeaea;
}
#contact__jobs {
    margin-top: 60px;
}
#contact__jobs__cover {
    height: 170px;
    background: url(../Images/Jamjoom-Printing-Press-Living-Room.jpg) center center no-repeat;
    background-size: cover;
}
@media screen and (min-width: 1024px) {
    .contact__infos__panel__set {
        margin-right: 29.19%;
        margin-left: 20.3%;
        font-size: 13px;
    }
    .contact__infos__panel__subtitle {
        font-size: 15px;
    }
    #contact__infos__map {
        position: absolute;
        top: 50px;
        left: 8.13%;
        right: 8.13%;
        height: 660px;
        margin-top: 0;
    }
    #contact__jobs {
        margin-top: 130px;
    }
    #contact__jobs__cover {
        height: 255px;
        margin-right: 15.14%;
        margin-left: 15.14%;
    }
}
#contact__jobs__content {
    padding-top: 55px;
    margin-right: 6.52%;
    margin-left: 6.52%;
    background-color: #fff;
}
#contact__jobs__title {
    font-size: 26px;
    line-height: 1em;
}
@media screen and (min-width: 1024px) {
    #contact__jobs__content {
        margin-top: -35px;
        margin-right: 22.15%;
        margin-left: 22.15%;
        padding: 85px 7.01% 50px;
    }
    #contact__jobs__title {
        font-size: 46px;
    }
}
#contact__jobs__intro {
    padding-bottom: 50px;
    margin-top: 30px;
    font-size: 16px;
    line-height: 1.44em;
    color: #949494;
}
@media screen and (min-width: 1024px) {
    #contact__jobs__intro {
        max-width: 750px;
        padding-bottom: 60px;
        margin-top: 40px;
        font-size: 18px;
        line-height: 1.89em;
    }
}
.contact__jobs__item {
    padding-top: 25px;
    padding-bottom: 30px;
    border-top: 1px solid #eaeaea;
}
@media screen and (min-width: 1024px) {
    .contact__jobs__item {
        max-width: 700px;
        padding-top: 45px;
        padding-bottom: 40px;
    }
}
.contact__jobs__item__title {
    padding-bottom: 25px;
    color: #d62323;
}
.contact__jobs__item__desc {
    position: relative;
    color: #949494;
    font-size: 14px;
    line-height: 1.79em;
    overflow: hidden;
    transition: height 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.contact__jobs__item__desc--truncated .contact__jobs__item__desc__txt {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.7s, visibility 0s 0.7s;
}
.contact__jobs__item__desc--expanded .contact__jobs__item__desc__txt {
    visibility: inherit;
    opacity: 1;
    transition: opacity 0.7s;
}
.contact__jobs__item__desc__truncated-txt {
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
}
.contact__jobs__item__desc--truncated .contact__jobs__item__desc__truncated-txt {
    visibility: inherit;
    transition: opacity 0.7s;
}
.contact__jobs__item__desc--expanded .contact__jobs__item__desc__truncated-txt {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.7s, visibility 0s 0.7s;
}
.contact__jobs__item__close,
.contact__jobs__item__more {
    display: inline-block;
    font-size: 14px;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    transition: color 0.3s;
}
.no-touchevents .contact__jobs__item__close:hover,
.no-touchevents .contact__jobs__item__more:hover {
    color: #d62323;
}
.contact__jobs__item__more {
    margin-left: 10px;
}
.contact__jobs__item__close {
    margin-top: 10px;
    visibility: hidden;
}
.contact__jobs__item__desc--expanded .contact__jobs__item__close {
    visibility: inherit;
}
.contact__jobs__item__apply {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: start;
    justify-content: flex-start;
    margin-top: 2em;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    line-height: 1.4em;
    color: #000;
    font-weight: 500;
}
.no-touchevents .contact__jobs__item__apply:hover {
    color: #d62323;
}
.contact__jobs__item__apply::after {
    content: "";
    position: relative;
    top: 7px;
    left: 0;
    display: block;
    width: 80px;
    height: 1px;
    margin-left: 10px;
    background-color: #e6e6e6;
    transform-origin: top left;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1), background-color 0.4s;
}
.no-touchevents .contact__jobs__item__apply:hover::after {
    transform: translateX(-5px) scaleX(0.25);
    background-color: #d62323;
}
#process-page {
    position: relative;
    margin-top: 120px;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f2f6fb 55%, #eef8f2 100%);
}
@media screen and (min-width: 1024px) {
    .contact__jobs__item__title {
        padding-bottom: 45px;
    }
    .contact__jobs__item__apply::after {
        width: 130px;
        margin-left: 30px;
    }
    .no-touchevents .contact__jobs__item__apply:hover::after {
        transform: translateX(-10px) scaleX(0.7);
    }
    #process-page {
        margin-top: 82px;
        padding-bottom: 245px;
    }
}
#process__header {
    padding-bottom: 80px;
    margin: 0 6.52%;
}
@media screen and (min-width: 1024px) {
    #process__header {
        padding-top: 120px;
        margin-right: 22.15%;
        margin-left: 29.17%;
    }
}
#process__title {
    margin-bottom: 25px;
    font-size: 45px;
    color: #f48c50;
    line-height: 0.95em;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 500;
}
@media screen and (min-width: 1024px) {
    #process__title {
        margin-bottom: 55px;
        font-size: 57px;
    }
    .process__intro__txt {
        display: inline-block;
        width: 48.57%;
        max-width: 380px;
        margin-left: 1.43%;
        vertical-align: top;
        text-align: justify;
    }
    .process__intro__txt:first-child {
        margin-left: 0;
    }
}
#process__intro {
    font-size: 14px;
    line-height: 1.64em;
    color: #b0b0b0;
}
@media screen and (min-width: 1400px) {
    #process__header {
        margin-right: 28.47%;
    }
    .process__intro__txt {
        width: 48.35%;
        margin-left: 1.65%;
    }
}
#process__lines,
.process__step__outer-index {
    display: none;
}
#process__lines > div {
    position: absolute;
    width: 1px;
    background-color: #e9e8e8;
    z-index: 2;
}
#process__lines > div:nth-child(1) {
    top: 130px;
    left: 22.15%;
    height: 32%;
}
#process__lines > div:nth-child(2) {
    top: 44%;
    left: 22.15%;
    height: 33%;
}
#process__lines > div:nth-child(3) {
    bottom: 0;
    left: 22.15%;
    height: 16%;
}
#process__lines > div:nth-child(4) {
    top: 13%;
    right: 22.15%;
    height: 24%;
}
#process__lines > div:nth-child(5) {
    top: 45%;
    right: 22.15%;
    height: 33%;
}
@media screen and (min-width: 1024px) {
    #process__lines {
        display: block;
    }
    .process__step {
        position: relative;
    }
    .process__step:nth-child(2),
    .process__step:nth-child(3) {
        margin-top: 125px;
        margin-left: 30px;
    }
    .process__step:nth-child(4) {
        margin-top: 110px;
    }
    .process__step:nth-child(5) {
        margin-top: 115px;
    }
    .process__step:nth-child(6) {
        margin-top: 145px;
    }
    .process__step::after {
        content: "";
        position: absolute;
        bottom: -83px;
        left: 50%;
        width: 1px;
        height: 73px;
        background-color: #e9e8e8;
    }
    .process__step:last-child::after {
        content: none;
    }
    .process__step__outer-index {
        position: absolute;
        top: 34px;
        display: block;
        font-size: 180px;
        font-weight: 700;
        /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
        font-family: gt_walsheim, Helvetica, Arial, sans-serif;
        /* color: #f5f6fa; */
        color: #9bb8ff;
        line-height: 1em;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
    }
    .process__step:nth-child(odd) .process__step__outer-index {
        left: 53px;
        transform: rotate(-90deg);
        transform-origin: left center;
    }
    .process__step:nth-child(even) .process__step__outer-index {
        right: 53px;
        transform: rotate(-90deg) translateX(100%);
        transform-origin: right center;
    }
}
.process__step__inner {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}
.process__step:nth-child(1) .process__step__inner {
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media screen and (max-width: 1023px) {
    .process__step__inner {
        margin-bottom: 80px;
    }
    .process__step:nth-child(odd) .process__step__txt {
        margin-right: 7.25%;
        margin-left: 6.52%;
    }
}
.process__step__index {
    margin-bottom: 10px;
    font-size: 11px;
    color: #1e396e;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 700;
    line-height: 1em;
}
#about__title,
.about__body__title,
.about__testimonial__ident,
.process__step__title {
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 500;
}
.process__step__txt {
    display: inline-block;
    width: 43.48%;
    vertical-align: top;
}
.process__step:nth-child(even) .process__step__txt {
    -ms-flex-order: 2;
    order: 2;
}
@media screen and (min-width: 1024px) {
    .process__step__index {
        font-size: 15px;
    }
    .process__step__txt {
        width: 19.65%;
    }
    .process__step:nth-child(1) .process__step__txt,
    .process__step:nth-child(3) .process__step__txt,
    .process__step:nth-child(5) .process__step__txt {
        margin-right: 7.71%;
        margin-left: 29.86%;
    }
}
@media screen and (min-width: 1400px) {
    .process__step__txt {
        width: 13.33%;
    }
    .process__step:nth-child(1) .process__step__txt,
    .process__step:nth-child(3) .process__step__txt,
    .process__step:nth-child(5) .process__step__txt {
        margin-left: 36.18%;
    }
}
.process__step__title {
    margin-bottom: 15px;
    font-size: 28px;
    color: #f48c50;
    line-height: 1em;
}
@media screen and (min-width: 1024px) {
    .process__step__title {
        margin-bottom: 35px;
        font-size: 32px;
    }
}
.process__step__body {
    font-size: 14px;
    color: #1c377d;
    line-height: 1.64em;
    text-align: justify;
}
.process__step__img {
    display: inline-block;
    width: 36.23%;
    height: auto;
}
.process__step:nth-child(even) .process__step__img {
    -ms-flex-order: 1;
    order: 1;
}
@media screen and (max-width: 1023px) {
    .process__step__img {
        margin-top: 40px;
    }
    .process__step:nth-child(even) .process__step__img {
        margin-right: 7.25%;
        margin-left: 6.52%;
    }
}
#about-page {
    margin-top: 80px;
}
#about__header {
    position: relative;
    background-color: #ffd8bf;
    line-height: 0;
    overflow: hidden;
}
@media screen and (min-width: 1024px) {
    .process__step:nth-child(1) .process__step__img {
        width: 20.35%;
        margin-right: 22.15%;
    }
    .process__step:nth-child(2) .process__step__img {
        width: 20.35%;
        margin-right: 7.69%;
        margin-left: 29.17%;
    }
    .process__step:nth-child(3) .process__step__img {
        width: 13.33%;
    }
    .process__step:nth-child(4) .process__step__img {
        width: 27.36%;
        margin-right: 7.69%;
        margin-left: 22.15%;
    }
    .process__step:nth-child(5) .process__step__img {
        width: 20.35%;
    }
    .process__step:nth-child(6) .process__step__img {
        width: 21.04%;
        margin-right: 7.01%;
        margin-left: 22.15%;
    }
    #about-page {
        margin-top: 82px;
        padding-bottom: 100px;
        background-color: #fff;
    }
    #about__header {
        margin: 0 7.23% 65px;
    }
}
#about__header__img {
    width: 100%;
    height: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#about__content {
    position: relative;
    margin: 20px 6.52% 80px;
}
#about__title {
    margin-bottom: 15px;
    font-size: 18px;
    line-height: 1.24em;
    color: #f48c50;
}
@media screen and (min-width: 1024px) {
    #about__content {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: start;
        align-items: flex-start;
        margin: 0 0 300px;
    }
    #about__content::before {
        content: "";
        position: absolute;
        top: 0;
        left: 14.44%;
        width: 1px;
        height: 100%;
        background-color: #e9e8e8;
    }
    #about__title {
        width: 24.2%;
        margin-bottom: 0;
        margin-left: 22.15%;
        font-size: 32px;
    }
    #about__body {
        width: 34.38%;
        max-width: 650px;
        padding-top: 15px;
        margin-left: 3.85%;
    }
}
@media screen and (min-width: 1280px) {
    #about__header {
        margin: 0 8.13% 85px;
    }
    #about__title {
        font-size: 41px;
    }
    #about__body {
        padding-top: 70px;
    }
}
#about__body {
    font-size: 14px;
    line-height: 1.64em;
    color: #1c377d;
}
#about__body p {
    margin-bottom: 1.5em;
}
#about__body__intro {
    margin-bottom: 35px;
}
#about__body__img-container {
    margin-bottom: 20px;
}
@media screen and (min-width: 1024px) {
    #about__body__intro {
        margin-bottom: 55px;
    }
    #about__body__img-container {
        position: absolute;
        left: 0;
        width: 43.19%;
        max-width: 750px;
        margin-top: -140px;
        margin-bottom: 0;
    }
    #about__body__img-container::before {
        content: "";
        position: absolute;
        top: -70px;
        right: 0;
        bottom: -60px;
        left: 0;
        background-color: #fff;
    }
    #about__body__img__overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #f2f4f6;
        visibility: hidden;
        transform-origin: right top;
    }
    .js #about__body__img__overlay {
        visibility: inherit;
    }
    #about__body__img__square {
        position: absolute;
        bottom: -60px;
        left: 0;
        width: 18.81%;
        height: auto;
        background-color: #f48c50;
        z-index: 2;
    }
    #about__body__img__square::after {
        content: "";
        display: block;
        width: 100%;
        height: auto;
        padding-bottom: 100%;
    }
}
#about__body__img__mask {
    overflow: hidden;
    line-height: 0;
}
#about__body__img {
    position: relative;
    width: 100%;
    height: auto;
}
.about__body__title {
    color: #2d2d2d;
    font-size: 18px;
    margin-bottom: 15px;
}
.about__body__link {
    position: relative;
    color: #2d2d2d;
    transition: color 0.3s;
}
.about__body__link:hover {
    color: #d62323;
}
.about__body__link::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: currentColor;
}
.about__testimonial {
    margin: 0 6.52% 80px;
}
@media screen and (min-width: 1024px) {
    #about__content__square {
        position: absolute;
        bottom: -150px;
        left: 36.18%;
        width: 6.32%;
        height: auto;
        background-color: #f2f4f6;
    }
    #about__content__square::after {
        content: "";
        display: block;
        width: 100%;
        height: auto;
        padding-bottom: 100%;
    }
    .about__testimonial {
        width: 55.42%;
        margin-bottom: 140px;
        margin-right: 0;
        margin-left: 8.13%;
    }
    .about__testimonial:nth-child(odd) {
        margin-left: 36.18%;
    }
}
.about__testimonial__video {
    position: relative;
    line-height: 0;
}
.about__testimonial__video__cover {
    width: 100%;
    height: auto;
}
.about__testimonial__video__cta {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    cursor: pointer;
    z-index: 2;
}
.about__testimonial__video__cta__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000;
    opacity: 0.5;
    transition: opacity 0.3s;
}
.about__testimonial__video__cta:hover .about__testimonial__video__cta__bg {
    opacity: 0.3;
}
.about__testimonial__video__cta__btn {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 85px;
    height: 85px;
    margin-top: -42px;
    margin-left: -42px;
}
.about__testimonial__video__cta__btn::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    transition: transform 0.3s;
}
.about__testimonial__video__cta__btn:hover::before {
    transform: scale(1.05, 1.05);
}
.about__testimonial__video__cta__btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    margin-top: -5px;
    margin-left: -3px;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}
.about__testimonial__video__player {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.about__testimonial__body {
    margin: 50px 8.33% 0;
}
.about__testimonial__index {
    color: #a9a9a9;
    font-size: 15px;
}
@media screen and (min-width: 1024px) {
    .about__testimonial__body {
        display: -ms-flexbox;
        display: flex;
        margin: 70px 0 0;
    }
    .about__testimonial__index {
        width: 25.31%;
        font-size: 14px;
    }
}
.about__testimonial__body__infos {
    margin-top: 16px;
}
.about__testimonial__quote {
    margin-bottom: 20px;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.2em;
}
@media screen and (min-width: 1024px) {
    .about__testimonial__body__infos {
        width: 74.69%;
        padding-right: 1.25%;
        margin-top: -12px;
    }
    .about__testimonial__quote {
        margin-bottom: 25px;
        font-size: 20px;
        line-height: 1.5em;
    }
}
@media screen and (min-width: 1280px) {
    .about__testimonial__quote {
        margin-bottom: 40px;
        font-size: 26px;
    }
}
.about__testimonial__quote::before {
    content: "“";
}
.about__testimonial__quote::after {
    content: "”";
}
.about__testimonial__quote p {
    display: inline;
}
.about__testimonial__ident {
    position: relative;
    padding-top: 20px;
    margin-bottom: 8px;
    font-size: 16px;
    line-height: 1em;
}
.about__testimonial__ident::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 47px;
    height: 1px;
    background-color: #2d2d2d;
}
.about__testimonial__project {
    font-size: 13px;
    color: #a9a9a9;
}
#solutions__price__title,
#solutions__mission__title,
#solutions__service__title,
#solutions__subtitle {
    /* color: #6672cb; */
    color: #000;
}
#about__anim-in-shape-1,
#about__anim-in-shape-2 {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #f2f4f6;
    transform-origin: left top;
    visibility: hidden;
}
#about__anim-in-shape-2 {
    height: auto;
}
@media screen and (min-width: 1024px) {
    #about__anim-in-shape-2 {
        width: 7.23%;
    }
    #about__anim-in-shape-2::after {
        content: "";
        display: block;
        width: 100%;
        height: auto;
        padding-bottom: 100%;
    }
    .js #about__anim-in-shape-2 {
        visibility: inherit;
    }
}
#solutions__header,
#solutions__intro__body,
#solutions__price__images {
    position: relative;
    color: rgb(255, 255, 255);
    font-size: 1rem;
}
#solutions__title-wrapper {
    position: relative;
    padding-top: 115px;
    padding-bottom: 75px;
    padding-left: 13.77%;
}
@media screen and (min-width: 1024px) {
    #solutions-page {
        margin-top: 82px;
        background-color: #fff;
    }
    #solutions__header::before {
        content: "";
        position: absolute;
        top: 0;
        left: 8.13%;
        width: 1px;
        height: 100%;
        background-color: rgba(193, 193, 193, 0.29);
    }
    #solutions__title-wrapper {
        padding-top: 235px;
        padding-bottom: 185px;
        padding-left: 15.14%;
    }
}
@media screen and (min-width: 1280px) {
    #about__anim-in-shape-2 {
        width: 8.13%;
    }
    #solutions__title-wrapper {
        padding-top: 275px;
    }
}
#solutions__header__img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    line-height: 0;
}
#solutions__header__img,
#solutions__price__img-1,
#solutions__price__img-2 {
    width: 100%;
    height: auto;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#solutions__price__img-1 {
    /* width: 70%; */
}
#solutions__title {
    position: relative;
    margin-bottom: 15px;
    color: #f37024;
    font-size: 11px;
    line-height: 1em;
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 500;
}
@media screen and (min-width: 1024px) {
    #solutions__header__img-wrapper {
        left: 22.15%;
    }
    #solutions__title {
        font-size: 22px;
    }
}
#solutions__subtitle {
    position: relative;
    font-size: 25px;
    line-height: 1.28em;
    font-weight: 700;
}
@media screen and (min-width: 1024px) {
    #solutions__subtitle {
        font-size: 40px;
    }
}
@media screen and (min-width: 1280px) {
    #solutions__subtitle {
        font-size: 58px;
    }
}
@media screen and (min-width: 1400px) {
    #solutions__title-wrapper {
        padding-top: 335px;
    }
    #solutions__subtitle {
        font-size: 74px;
    }
}
#solutions__intro {
    position: relative;
    margin-top: -50px;
    margin-right: 6.52%;
    margin-left: 6.52%;
    font-size: 14px;
    line-height: 186%;
    color: #ababab;
    padding: 45px 14.49%;
}
@media screen and (min-width: 1024px) {
    #solutions__intro {
        max-width: 1000px;
        margin-top: -75px;
        margin-right: 22.15%;
        margin-left: 22.15%;
        padding: 75px 10.25% 65px 7.81%;
    }
}
#solutions__intro__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #f48c50;
    transform-origin: left top;
}
#solutions__intro__title {
    position: relative;
    width: 100%;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 123%;
    text-align: justify;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 600;
    color: #1e396e;
}
#solutions__service {
    padding-top: 75px;
    padding-right: 21.01%;
    padding-left: 13.77%;
    /*background-image: url(../img/solutions-service.jpg);*/
    background-repeat: no-repeat;
    background-position: -45.89% 20px;
    background-size: 70%;
}
@media screen and (min-width: 1024px) {
    #solutions__intro__title {
        font-size: 26px;
    }
    #solutions__service {
        display: -ms-flexbox;
        display: flex;
        min-height: 300px;
        padding-top: 120px;
        padding-right: 14.44%;
        padding-left: 22.15%;
        -ms-flex-align: start;
        align-items: flex-start;
        background-position: 13.19% -100px;
        background-size: auto;
    }
}
#solutions__service__title {
    position: relative;
    padding-bottom: 10px;
    margin-right: 6.11%;
    font-size: 16px;
    line-height: 1.23em;
    font-weight: 500;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    #solutions__service__title {
        width: 27.23%;
        padding-bottom: 30px;
        font-size: 30px;
        color: #f37024;
        border-bottom: 1px solid rgba(190, 190, 190, 0.38);
    }
    #solutions__service__body {
        display: -ms-flexbox;
        display: flex;
        width: 66.67%;
    }
}
#solutions__service__body {
    padding-top: 8px;
    color: #ababab;
    font-size: 14px;
    line-height: 1.86em;
}
#solutions__service__body p:first-child {
    margin-left: 0;
}
#solutions__price {
    margin-top: 10px;
    background: url(../Images/Jamjoom-Printing-Press-03112021_171325.jpg) right 50px no-repeat;
    background-size: 50%;
}
#solutions__price__images__square {
    position: absolute;
    top: 0;
    left: 22.15%;
    width: 8.13%;
    background-color: #f5f6fa;
    visibility: hidden;
    transform-origin: left top;
}
#solutions__price__images__square::after {
    content: "";
    display: block;
    width: 100%;
    height: auto;
    padding-bottom: 100%;
}
#solutions__price__img-1-wrapper,
#solutions__price__img-2-wrapper {
    position: relative;
    line-height: 0;
    background-color: #f5f6fa;
    overflow: hidden;
    transform: rotate(0.0001deg);
}
#solutions__price__img-1-wrapper {
    width: 51.97%;
    margin-left: 6.52%;
}
#solutions__price__img-2-wrapper {
    width: 48.99%;
    margin-left: 64.49%;
}
@media screen and (min-width: 1024px) {
    #solutions__service__body p {
        width: 48.35%;
        max-width: 400px;
        margin-left: 3.3%;
    }
    #solutions__price {
        margin-top: 10px;
        background-size: auto;
        background-position: right 175px;
    }
    .scroll-anim #solutions__price__images__square {
        visibility: inherit;
    }
    #solutions__price__img-1-wrapper {
        width: 41.39%;
        margin-left: 22.15%;
    }
    #solutions__price__img-2-wrapper {
        width: 21.04%;
        margin-left: 63.54%;
    }
}
#solutions__price__img-1-overlay,
#solutions__price__img-2-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #f5f6fa;
    visibility: hidden;
    transform-origin: right top;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
#solutions__price__txt {
    margin-right: 21.01%;
    margin-left: 11.77%;
    text-align: justify;
}
#solutions__price__txt_vision {
    width: 38%;
    text-align: justify;
    margin-right: 21.01%;
    margin-left: 21.77%;
}

@media screen and (min-width: 1024px) {
    .scroll-anim #solutions__price__img-1-overlay,
    .scroll-anim #solutions__price__img-2-overlay {
        visibility: inherit;
    }
    #solutions__price__txt {
        margin-top: -65px;
        margin-right: 43.19%;
        margin-left: 22.17%;
        width: 38%;
    }
}
@media screen and (min-width: 1280px) {
    #solutions__intro {
        padding: 95px 12.15% 85px 9.03%;
    }
    #solutions__price__txt {
        /* margin-top: -135px; */
        margin-top: 25px;
        margin-right: 40.21%;
        margin-left: 22%;
    }
}
#solutions__price__title,
#solutions__mission__title {
    width: 55.56%;
    margin-bottom: 20px;
    font-size: 16px;
    line-height: 1.23em;
    font-weight: 500;
    color: #f48c50;
}
@media screen and (min-width: 1024px) {
    #solutions__price__title,
    #solutions__mission__title {
        width: auto;
        margin-bottom: 25px;
        font-size: 26px;
        margin-top: 10px;
    }
}
#solutions__price__body,
#solutions__mission__body {
    color: #ababab;
    font-size: 14px;
    line-height: 1.86em;
    text-align: justify;
}
#solutions__experts {
    position: relative;
    padding-top: 45px;
    margin-top: 60px;
    color: #fff;
    text-align: center;
}
#solutions__experts__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #1c377d;
    transform-origin: left top;
}
#solutions__experts__title {
    position: relative;
    margin-bottom: 10px;
    font-size: 20px;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    line-height: 1em;
    font-weight: 500;
}
@media screen and (min-width: 1024px) {
    #solutions__experts {
        padding-top: 65px;
        margin-top: 100px;
    }
    #solutions__experts__title {
        font-size: 35px;
    }
    .scroll-anim #solutions__experts__title {
        opacity: 0;
    }
}
#solutions__experts__subtitle {
    position: relative;
    display: inline-block;
    width: 86.96%;
    font-size: 14px;
    line-height: 1.71em;
    font-weight: 500;
}
#solutions__experts__list {
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 40px;
    margin-top: 50px;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
@media screen and (min-width: 1024px) {
    #solutions__experts__subtitle {
        width: 27.36%;
    }
    .scroll-anim #solutions__experts__subtitle {
        opacity: 0;
    }
    #solutions__experts__list {
        margin-top: 120px;
        padding-bottom: 170px;
    }
}
.solutions__experts__item {
    position: relative;
    width: 39.86%;
    padding: 0 2.08%;
    margin-bottom: 40px;
}
@media screen and (min-width: 1024px) {
    .solutions__experts__item {
        width: 17.19%;
        margin-bottom: 0;
    }
    .scroll-anim .solutions__experts__item {
        opacity: 0;
    }
    .solutions__experts__item::after {
        content: "";
        position: absolute;
        top: 105px;
        bottom: 0;
        left: 0;
        width: 1px;
        background-color: #1e396e;
    }
    .solutions__experts__item:first-child::after {
        content: none;
    }
}
.solutions__experts__item__picto {
    display: -ms-flexbox;
    display: flex;
    height: 70px;
    margin-bottom: 20px;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.solutions__experts__item__picto img {
    width: 100px;
}
@media screen and (min-width: 1024px) {
    .solutions__experts__item__picto {
        margin-bottom: 35px;
    }
}
.solutions__experts__item__picto svg {
    display: block;
}
.solutions__experts__item:nth-child(1) .solutions__experts__item__picto svg {
    width: 52px;
    height: 44px;
}
.solutions__experts__item:nth-child(2) .solutions__experts__item__picto svg {
    width: 68px;
    height: 64px;
}
.solutions__experts__item:nth-child(3) .solutions__experts__item__picto svg {
    width: 47px;
    height: 35px;
}
.solutions__experts__item:nth-child(4) .solutions__experts__item__picto svg {
    width: 52px;
    height: 44px;
}
.solutions__experts__item__picto path {
    stroke: #f37024;
}
.solutions__experts__item:nth-child(2) .solutions__experts__item__picto path {
    stroke: none;
    fill: #f37024;
}
.solutions__experts__item__title {
    margin-bottom: 5px;
    color: #fff;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 11px;
    line-height: 1em;
}
.solutions__experts__item__body {
    font-size: 12px;
    line-height: 1.86em;
}
#solutions__clients__title,
#solutions__industries__title,
.solutions__industries__item__label__txt {
    line-height: 1em;
    font-size: 10px;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    color: #2e2e2e;
}
#solutions__industries {
    position: relative;
    padding-top: 100px;
}
@media screen and (min-width: 1024px) {
    .solutions__experts__item__title {
        margin-bottom: 10px;
    }
    .solutions__experts__item__body {
        font-size: 14px;
    }
    #solutions__industries {
        padding-top: 135px;
        padding-bottom: 175px;
    }
}
#solutions__industries__title {
    width: 32.61%;
    margin-bottom: 20px;
    margin-left: 6.52%;
    font-size: 13px;
    font-weight: 700;
}
@media screen and (min-width: 1024px) {
    #solutions__industries__title {
        margin-top: 35px;
        width: 14.03%;
        margin-left: 22.15%;
        font-size: 16px;
    }
}
.solutions__industries__item {
    width: 39.13%;
}
.solutions__industries__item__label {
    position: relative;
    padding-left: 16.67%;
    margin-top: 5px;
    cursor: default;
    z-index: 2;
}
@media screen and (min-width: 1024px) {
    .solutions__industries__item {
        width: 41.39%;
        margin-left: 8.13%;
    }
    .solutions__industries__item__label {
        padding-left: 33.89%;
        margin-top: 10px;
        padding-top: 9px;
    }
}
.solutions__industries__item__label::before {
    content: "";
    position: absolute;
    top: 11px;
    left: 0;
    width: 14.2%;
    height: 1px;
    background-color: #ff7b2e;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left top;
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0s 0.5s;
}
.solutions__industries__item--selected .solutions__industries__item__label::before,
.solutions__industries__item:hover .solutions__industries__item__label::before {
    opacity: 1;
    transform: scaleX(1);
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    transform-origin: right top;
}
.solutions__industries__item__label__txt {
    font-size: 20px;
    font-weight: 500;
    opacity: 0.2;
    cursor: default;
    transition: opacity 0.3s;
}
@media screen and (min-width: 1024px) {
    .solutions__industries__item__label::before {
        top: 23px;
        width: 28.4%;
    }
    .solutions__industries__item__label__txt {
        font-size: 30px;
    }
}
.solutions__industries__item--selected .solutions__industries__item__label__txt,
.solutions__industries__item:hover .solutions__industries__item__label__txt {
    opacity: 1;
}
.solutions__industries__item__img {
    position: absolute;
    top: 70px;
    right: 6.52%;
    width: 50.72%;
    height: auto;
    opacity: 0;
    transition: opacity 0.3s;
    height: 60%;
}
.solutions__industries__item--selected .solutions__industries__item__img,
.solutions__industries__item:hover .solutions__industries__item__img {
    opacity: 1;
    transition: opacity 0.3s 0.2s;
}
#solutions__clients {
    position: relative;
    margin-top: 75px;
    margin-bottom: 90px;
}
@media screen and (min-width: 1024px) {
    .solutions__industries__item__img {
        top: 135px;
        right: 8.13%;
        width: 41.39%;
        max-width: 600px;
        max-height: 500px;
    }
    #solutions__clients {
        margin-top: 55px;
        margin-bottom: 170px;
    }
}
#solutions__clients__title {
    position: relative;
    width: 28.99%;
    margin-left: 10.14%;
    padding-left: 3.62%;
    background-color: #fff;
    font-size: 13px;
    font-weight: 700;
    z-index: 2;
}
#solutions__clients__list {
    display: -ms-flexbox;
    display: flex;
    padding: 25px 7.25% 15px;
    margin-top: -12px;
    margin-left: 6.52%;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    border-left: 1px solid #e4e4e4;
}
.solutions__clients__item {
    margin-bottom: 20px;
    margin-right: 7.75%;
    max-width: 23.26%;
}
@media screen and (min-width: 1024px) {
    #solutions__clients__title {
        width: 17.19%;
        margin-left: 25.31%;
        padding-left: 3.16%;
        font-size: 16px;
    }
    #solutions__clients__list {
        padding: 60px 6.32% 70px;
        margin-top: -10px;
        margin-left: 22.15%;
        -ms-flex-pack: justify;
        justify-content: space-between;
    }
    .solutions__clients__item {
        margin-right: 0;
        margin-bottom: 0;
        max-width: none;
    }
}
.solutions__clients__item__img {
    width: 100%;
    height: auto;
}
#solutions__material {
    margin-top: 150px;
    text-align: center;
}
#solutions__material__title {
    width: 34.38%;
    margin: 0 auto 60px;
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 500;
    color: #2e2e2e;
    font-size: 26px;
    line-height: 1.35em;
}
#solutions__material__download,
#solutions__material__select__input {
    font-family: roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #ababab;
    line-height: 78px;
    position: relative;
}
#solutions__material__download,
#solutions__material__select {
    display: inline-block;
    height: 78px;
    background-color: #f5f6fa;
}
#solutions__material__select {
    position: relative;
    min-width: 23.61%;
    padding-right: 90px;
    margin-bottom: 10px;
    overflow: hidden;
    text-align: left;
    vertical-align: top;
}
#solutions__material__select__input {
    width: calc(100% + 20px);
    height: 100%;
    padding-left: 30px;
    -webkit-appearance: none;
    border-radius: 0;
    border: none;
    background-color: transparent;
    z-index: 1;
}
#solutions__material__select__picto {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 53px;
    border-left: 1px solid #eaeaea;
}
#solutions__material__select__picto::after,
#solutions__material__select__picto::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    margin-left: -2px;
}
#solutions__material__select__picto::before {
    border-width: 0 2.5px 3px;
    border-color: transparent transparent #818383;
    margin-top: -3px;
}
#solutions__material__select__picto::after {
    border-width: 3px 2.5px 0;
    border-color: #818383 transparent transparent;
    margin-top: 3px;
}
#solutions__material__download {
    margin-left: 2px;
    padding: 0 46px 0 36px;
    transition: color 0.3s, opacity 0.4s;
}
#not-found-page,
#terms__title,
.terms__section__title {
    /* font-family: gt_walsheim, Helvetica, Arial, sans-serif; */
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
}
.no-touchevents #solutions__material__download:not(.solutions__material__download--disabled):hover {
    color: #fff;
}
#solutions__material__download::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: scaleY(0);
    transform-origin: left bottom;
    background-color: #2e2e2e;
    transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.no-touchevents #solutions__material__download:not(.solutions__material__download--disabled):hover::before {
    transform: scaleY(1);
    transform-origin: left top;
}
.solutions__material__download--disabled {
    cursor: default;
}
#solutions__material__download__picto {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
    margin-right: 20px;
    vertical-align: middle;
    transition: opacity 0.4s;
}
.solutions__material__download--disabled #solutions__material__download__picto {
    opacity: 0.4;
}
#solutions__material__download__picto svg {
    display: block;
    width: 35px;
    height: 35px;
}
#solutions__material__download__picto path {
    fill: #d2d3d5;
}
.no-touchevents
    #solutions__material__download:not(.solutions__material__download--disabled):hover
    #solutions__material__download__picto
    path {
    fill: #fff;
    animation: solutions__material__download__picto__path__roll-over 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
#solutions__material__download__picto circle {
    stroke: #d2d3d5;
    stroke-dasharray: 126;
    transform-origin: center center;
    transform: rotate(-90deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.no-touchevents
    #solutions__material__download:not(.solutions__material__download--disabled):hover
    #solutions__material__download__picto
    circle {
    stroke: #fff;
    animation: solutions__material__download__picto__circle__roll-over 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}
@keyframes solutions__material__download__picto__path__roll-over {
    0% {
        transform: translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes solutions__material__download__picto__circle__roll-over {
    0% {
        stroke-dashoffset: 126;
    }
    100% {
        stroke-dashoffset: 0;
    }
}
#solutions__material__download__label {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: opacity 0.4s;
}
.solutions__material__download--disabled #solutions__material__download__label {
    opacity: 0.4;
}
#not-found-page {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
}
#not-found__status {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f4f4f4;
    font-size: 40vw;
    font-weight: 700;
}
#not-found__title {
    position: relative;
    width: 86.96%;
    margin-bottom: 50px;
    font-size: 25px;
    line-height: 1.2em;
    text-align: center;
}
@media screen and (min-width: 1024px) {
    #solutions__material__select__input {
        padding-left: 40px;
    }
    #solutions__material__select__picto {
        width: 72px;
    }
    #not-found__title {
        width: 48.4%;
        font-size: 35px;
    }
    #terms-page {
        padding-bottom: 140px;
        margin-top: 82px;
    }
}
@media screen and (min-width: 1280px) {
    #not-found__title {
        font-size: 50px;
    }
}
#not-found__back {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    height: 68px;
    padding: 0 68px;
    -ms-flex-align: center;
    align-items: center;
    background-color: #d62323;
    font-size: 13px;
    color: #fff;
    transition: background-color 0.3s;
}
#not-found__back:hover {
    background-color: #aa1c1c;
}
@media screen and (min-width: 1024px) {
    #terms__header {
        margin: 0 7.23%;
    }
}
@media screen and (min-width: 1280px) {
    #terms__header {
        margin: 0 8.13%;
    }
}
#terms__header::before {
    content: "";
    display: block;
    height: 180px;
    background: url(../Images/JPP.jpg) center center no-repeat;
    background-size: cover;
}
#terms__header__inner {
    padding: 30px 7.25% 0;
    margin: -70px 6.52% 0;
    background-color: #fff;
}
#terms__title {
    margin-bottom: 30px;
    color: #373737;
    font-size: 40px;
    line-height: 1.11em;
    font-weight: 700;
}
@media screen and (min-width: 1024px) {
    #terms__header::before {
        height: 220px;
    }
    #terms__header__inner {
        padding-top: 60px;
        padding-right: 8.4%;
        padding-left: 10.07%;
        margin: -70px 15.97% 0;
    }
    #terms__title {
        margin-bottom: 50px;
        font-size: 70px;
    }
}
#terms__intro {
    color: #949494;
    font-size: 15px;
    line-height: 1.78em;
}
.terms__section {
    padding-bottom: 30px;
    margin: 30px 13.04%;
    border-bottom: 1px solid #eaeaea;
}
@media screen and (min-width: 1024px) {
    #terms__intro {
        font-size: 18px;
    }
    .terms__section {
        padding-bottom: 45px;
        margin-top: 40px;
        margin-right: 28.47%;
        margin-left: 29.86%;
    }
}
.terms__section:last-child {
    border-bottom: none;
}
.terms__section__title {
    margin-bottom: 10px;
    color: #d62323;
    font-size: 17px;
    line-height: 1em;
    font-weight: 700;
}
.terms__section__body {
    color: #949494;
    font-size: 13px;
    line-height: 1.79em;
}
@media screen and (min-width: 1024px) {
    .terms__section__body {
        font-size: 14px;
    }
}
.Logo_Loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-60%, -80%);
    height: 150px;
    object-fit: contain;
}

@media only screen and (max-width: 600px), (max-width: 1100px) {
    .Logo_Loading {
        height: 70px;
    }
}

@media only screen and (max-width: 600px), (max-width: 1100px) {
    #solutions__price__txt_vision {
        width: 74%;
        /* margin: 40px auto; */
        padding-top: 40px;
        margin: 0px auto;
        /* pading-left: 50px; */
    }
}
/* @media only screen and (min-width: 1024px) {
    #solutions__price__txt_vision {
        width: 30%;
        margin-left: 29%;
    }
} */

/* Service Page UI Style Start */
.service-page-footer-content {
    width: 66%;
    height: 25%;
    background-color: #1d386e;
    margin-top: 20px;
    position: absolute;
    bottom: 25px;
    left: 34%;
}
@media only screen and (max-width: 600px) {
    .service-page-footer-content {
        /* background-color: red; */
        display: none;
    }
}
.service-page-footer-content .sp-wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 10px;
    align-items: flex-start;
    justify-content: space-between;
}
.service-page-footer-content .sp-wrapper .sp-items {
    width: 100%;
    border-right: 1px solid rgb(161, 161, 161);
    padding: 10px 30px;
    height: 100px;
    line-height: 17px;
}
.service-page-footer-content .sp-wrapper .sp-items:last-child {
    border-right: none;
}
.sp-items .title {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.sp-items .para {
    font-size: 11px;
    color: #fff;
    margin-top: 15px;
}

@media only screen and (max-width: 1024) {
    .sp-items .para {
        width: 130%;
    }
}
/* Service Page UI Style End */

.video-content {
    width: 100%;
    height: 300px;
    padding-bottom: 30px;
}
.i-frame {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

.home-landing__content__img {
    width: 100px;
    margin-bottom: 10px;
}

/* Color Container Css */
.color__container {
    width: 100%;
    height: 100%;
    margin-top: 6%;
    /* padding: 3% 0; */
    overflow-y: hidden;
    scroll-behavior: smooth;
    background-color: #fef5f0;
    /* font-family: "Work Sans", sans-serif; */
}
.color__content {
    width: 100%;
    margin: 0px auto;
    height: 100%;
    /* padding: 0 6%; */
}
.color__wrapper {
    width: 100%;
    height: 100%;
}
.color__content__header {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3% 0;
    background-color: #fff;
}
.color__content__header .title {
    font-size: 3.4rem;
    letter-spacing: 1px;
    font-weight: lighter;
    color: #37bb85;
}

.color__content__lists {
    height: 100%;
    width: 80%;
    margin-top: 4%;
    display: flex;
    align-items: center;
}
.color__card__items {
    width: 80%;
    /* background: linear-gradient(-45deg, #b05700bf, #e3830edb); */
    background-color: #fac3a129;
    border-radius: 5px;
    margin: 0 1%;
    height: 170px;
    padding: 2%;
    display: flex;
    align-items: flex-start;
    animation: fadeInAnimation ease 6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    box-shadow: 0px 0px 12px #fac3a129;
}

.color__card__items .text {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    color: #e3830edb;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.8rem;
}

.color__card__items .number {
    font-size: 3rem;
    margin-top: 4rem;
    color: #1e396e;
    /* background: -webkit-linear-gradient(green, red);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
}
.color__action__container {
    width: 100%;
    height: 100%;
    margin-top: 1%;
}
.ac__content {
    width: 100%;
    height: 100%;
}
.ac__wrapper {
    width: 100%;
    height: 100%;
}
.ac__lists {
    width: 100%;
    height: 100%;
}
.ac__items__content {
    width: 90%;
    margin: 0px auto;
    display: flex;
    padding: 5% 0;
    /* margin-bottom: 5%; */
    /* align-items: center; */
}
.ac__items2__container {
    width: 100%;
    height: 100%;
    /* background-color: red; */
    background-color: #fff;
    padding: 3% 0;
}
.ac__number__content img {
    height: 130px;
}
.ac__items__left {
    width: 70%;
}
.ac__items__left .head,
.ac__item__header .text .title,
.ac__item3__lists .head {
    font-size: 3rem;
    color: #e3830edb;
    margin-bottom: 4%;
}
.ac__items__left p {
    margin-bottom: 2%;
    font-size: 0.895rem;
    line-height: 28px;
    color: rgb(73, 73, 73);
    text-align: justify;
}
.ac__items__left p span {
    font-size: 2rem;
    color: #e3830edb;
}
.ac__number__content {
    width: 13%;
}
.ac__number__content h6 {
    font-size: 13rem;
    margin-top: 3.5rem;
    color: #e3830edb;
    font-weight: lighter;
}
.ac__items__right {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.ac__items__right img {
    /* width: 200px; */
    height: 400px;
    object-fit: contain;
}

/* Second Extra  */
.ac__item2__content {
    width: 100%;
    height: 100%;
    padding: 3% 0;
}
.ac__item2__wrapper {
    width: 90%;
    margin: 0px auto;
    height: 100%;
}
.ac__item2__wrapper .title {
    font-size: 2rem;
    display: flex;
    /* align-items: center; */
    justify-content: center;
    text-align: center;
    line-height: 2.5rem;
    color: #e3830edb;
}
.ac__item2__lists {
    margin-top: 5%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ac__item2__lists .left {
    /* width: 100%; */
    display: flex;
    flex-direction: column;
}
.ac__item2__lists .text {
    width: 100%;
    line-height: 1.8rem;
    font-size: 1rem;
    color: #e3830edb;
}
.ac__item2__lists img {
    width: 250px;
    object-fit: contain;
    margin-top: 9%;
}
.second__img {
    /* width: 250px !important; */
    margin-top: -27% !important;
}

.ac__item3-4__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -7%;
}
.ac__item3-4__lists {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.ac__item3-4__lists .text {
    font-size: 1.3rem;
    margin-bottom: 5%;
    color: #e3830edb;
    line-height: 30px;
}
.ac__item3-4__lists img {
    width: 400px;
    margin-top: 5%;
}

.ac__items3__content {
    width: 100%;
    margin: 0px auto;
    height: 100%;
    background-color: #fef5f0;
    padding: 5% 0;
}
.ac__item3__wrapper {
    width: 90%;
    margin: 0px auto;
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
}
.ac__item3__lists {
    width: 50%;
}
.ac__item3__lists img {
    width: 450px;
}
.item1__img {
    height: 190px;
}
.item2__img {
    height: 260px !important;
}
.item__3 {
    width: 70px !important;
    margin-top: 4%;
}

.item4__img {
    height: 200px !important;
}

.ac__item4__content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 7% 0;
}
.ac__item4__wrapper {
    width: 90%;
    height: 100%;
    margin: 0px auto;
}
.ac__item__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ac__item__header img {
    width: 300px;
}

.ac__item__header .text {
    width: 50%;
}
.ac__item__header .text img {
    width: 90px;
}
.ac__item4__list {
    width: 100%;
    margin-top: 5%;
}
.ac__item4__list p {
    font-size: 0.895rem;
    line-height: 30px;
    color: rgb(73, 73, 73);
    text-align: justify;
}
.ac__item__footer {
    width: 100%;
    padding: 5% 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ac__item__footer img {
    height: 300px;
    object-fit: contain;
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
    overflow: hidden;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
    overflow: hidden;
}
.ac__number2__items {
    display: none;
}
@media only screen and (max-width: 600px) {
    .color__content__header .title {
        margin-top: 16%;
        line-height: 35px;
        font-size: 2rem;
        margin-left: 3%;
    }
    .color__content__header {
        display: block;
    }
    .color__content__lists {
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        gap: 20px;
        width: 97%;
        margin: 20px auto;
    }
    a.color__card__items {
        width: 100%;
        padding: 3%;
        height: 100%;
    }
    .color__card__items .number {
        margin-right: 2%;
    }
    .ac__items__right {
        display: none;
    }
    .ac__items__left {
        width: 100%;
        /* background-image: url(../Images/Color/1.1.png); */
        background-size: auto 300px;
        background-repeat: no-repeat;
        /* padding-top: 10%; */
    }
    .ac__number__content img {
        height: 70px;
    }
    .ac__items__left .head {
        font-size: 2rem;
    }
    .ac__number2__items {
        display: inline;
    }
    .ac__item2__lists {
        flex-direction: column;
        gap: 70px;
    }
    .ac__item2__lists .left {
        align-items: center;
    }
    .ac__item3-4__content {
        margin-top: 7%;
    }
    .ac__item2__lists img {
        width: 160px;
    }
    .ac__item3__lists {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
    }
    .ac__item3__wrapper {
        flex-direction: column;
    }
    .ac__item3__lists .head {
        font-size: 2rem;
        flex-wrap: wrap;
    }
    .ac__item3__lists img {
        width: 300px;
    }
    .item__3 {
        width: 45px !important;
        margin-bottom: 8%;
    }
    .ac__item__header {
        flex-direction: column;
    }
    .ac__item__header .text {
        margin-top: 5%;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }
    .ac__item__header .text .title {
        font-size: 2rem;
    }
    .ac__item__header .text img {
        width: 50px;
    }
    .ac__item__footer img {
        width: 400px;
    }
}

/* New About Css Start  */
.new__about__container {
    width: 100%;
    height: 100vh;
    margin-top: 7%;
}
.na__content {
    width: 100%;
    height: 100%;
}
.na__wrapper {
    width: 100%;
    height: 100%;
}
.na__action__content {
    width: 100%;
    height: 670px;
    /* background-color: #f7f7f7; */
    background-image: url("../Images/About/1BG.png");
    background-attachment: fixed;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    /* background-position: fixed; */
    padding: 0 5%;
    justify-content: space-between;
    position: relative;
}

.na__action__full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.na__action__full .text {
    font-size: 2rem;
    font-weight: bold;
    line-height: 3.5rem;
    color: #324983;
}

.na__action__full .text span {
    color: #e3830edb;
}

.na__action__full figure {
    width: 50%;
    height: 50%;
    padding: 5%;
}

.na__action__full figure img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.full-slider {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
}

.full-slider .details .title {
    font-size: 1.9rem;
    font-weight: bold;
    margin-bottom: 2rem;
}
.full-slider .details p {
    font-size: 1.2rem;
    line-height: 2.5rem;
}

.na__action__left {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.na__action__left .text {
    font-size: 2rem;
    font-weight: bold;
    /* text-align: right; */
    line-height: 3.5rem;
    color: #324983;
}
.na__action__left .text span {
    color: #e3830edb;
}

.btn__contact {
    width: max-content;
    height: 50px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 4px;
    padding: 0 30px;
    background-color: #324983;
    color: #fff;
    margin-top: 5%;
}
.na__action__left figure {
    width: 100%;
    height: 100%;
    padding: 5%;
}
.na__action__left figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.na__text__bg {
    width: 100%;
    /* height: 100%; */
    background-image: linear-gradient(180deg, rgba(23, 53, 111, 0.05), rgba(4, 168, 101, 0.06)), url("../Images/About/textBG.png");
    background-size: 100% 100%, 125% 200%;
    padding: 6% 0;
    /* margin-bottom: 6%; */
    border-bottom: 1px solid #f2c9b2;
}
.na__text__container {
    width: 100%;
    height: 100%;
    padding: 0 5%;
}

.na__text__content {
    width: 100%;
    height: 100%;
}
.na__text__content p {
    /* font-size: 1.2rem;
    color: #000;
    line-height: 2.5rem;
    text-align: justify; */
    font-family: roboto, Helvetica, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 19.257px;
    line-height: 46px;
    width: 90%;
    text-align: justify;
}
.certificate__container {
    width: 100%;
    /* height: 300px; */
    /* padding: 3% 6%; */
    margin-top: 5%;
    /* background-color: red; */
}
.certi__content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.certi__content figure {
    width: 230px;
}
.certi__content figure img {
    width: 100%;
    object-fit: contain;
}
.certi__content .details .title {
    font-size: 1.9rem;
    font-weight: bold;
    margin-bottom: 2rem;
}
.certi__content .details p {
    font-size: 1.2rem;
    line-height: 2.5rem;
}
.iframe__container {
    width: 100%;
    height: 700px;
    padding: 2% 3%;
    background-color: #f8e8df;
    /* clip-path: polygon(0 20%, 100% 0, 100% 80%, 0 100%); */
}
.iframe__content {
    width: 100%;
    height: 100%;
}
.iframe__wrapper {
    width: 100%;
    height: 100%;
}
.iframe__wrapper figure {
    width: 100%;
    height: 100%;
    position: relative;
}
.iframe__wrapper figure img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 4px;
}
.iframe__wrapper .text {
    font-size: 3rem;
    color: #fff;
    font-weight: bold;
}
.iframe__wrapper .details {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 70%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: space-evenly;
}
.iframe__wrapper .btn-start {
    width: 180px;
    height: 55px;
    color: #fb5c00;
    background-color: #fff;
    font-size: 1.5rem;
    font-weight: bold;
}

.address__container {
    width: 100%;
    height: 500px;
    padding: 3%;
    background-color: #f7f7f7;
}
.add__content {
    width: 100%;
    height: 100%;
}
.add__wrapper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.add__wrapper .add__items {
    width: 100%;
    height: 100%;
    margin: 0 3%;
}
.map__content {
    width: 100%;
    height: 100%;
}
.add__items h5 {
    font-size: 2rem;
    margin-bottom: 2rem;
}
.add__items p {
    font-size: 1rem;
    line-height: 2rem;
}
.add__wrapper .details {
    width: 90%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}
.mySlides {
    display: none;
}
img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
    margin: auto;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.cert_dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-slide,
.dot:hover {
    background-color: #717171;
}

.active-slide,
.cert_dot:hover {
    background-color: #717171;
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
    .prev,
    .next,
    .text {
        font-size: 11px;
    }
}

@media only screen and (max-width: 600px) {
    .new__about__container {
        margin-top: 25%;
    }
    .na__action__content {
        flex-direction: column;
        justify-content: center;
    }
    .na__text__content p {
        width: 100%;
        font-size: 0.675rem;
        line-height: 25px;
    }
    .certificate__container {
        margin-top: 10%;
        height: 300px;
    }
    .certi__content {
        gap: 20px;
    }
    .certi__content .details .title {
        font-size: 1rem;
    }
    .certi__content .details p {
        font-size: 1.4rem;
        line-height: 35px;
    }
    .add__wrapper {
        flex-direction: column;
        gap: 20px;
    }
    .add__items p {
        font-size: 16px;
        line-height: 30px;
    }
    .footer__page__title {
        text-transform: none;
    }
}

/* New About Css End  */
.middle {
    top: 60%;
    left: 50%;
    transform: translate(-50%, -40%);
    position: absolute;
}
.bar {
    width: 10px;
    height: 70px;
    background: #fff;
    display: inline-block;
    transform-origin: bottom center;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    /*   box-shadow:5px 10px 20px inset rgba(255,23,25.2); */
    animation: loader 1.2s linear infinite;
}
.bar1 {
    animation-delay: 0.1s;
}
.bar2 {
    animation-delay: 0.2s;
}
.bar3 {
    animation-delay: 0.3s;
}
.bar4 {
    animation-delay: 0.4s;
}
.bar5 {
    animation-delay: 0.5s;
}
.bar6 {
    animation-delay: 0.6s;
}
.bar7 {
    animation-delay: 0.7s;
}
.bar8 {
    animation-delay: 0.8s;
}

@keyframes loader {
    0% {
        transform: scaleY(0.1);
        background: transparent;
    }
    50% {
        transform: scaleY(1);
        background: #00a964;
    }
    100% {
        transform: scaleY(0.1);
        background: transparent;
    }
}


.photo-title {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 500;
}

.jpp-green {
    color: #04a865 !important;
}

.jpp-blue {
    color: #17356f !important;
}

/* Market / Industries / Product Lines section (process.html) */
#jpp-market {
    position: relative;
    padding: 80px 6.52% 100px;
    background: linear-gradient(135deg, #eef8f2 0%, #f2f6fb 55%, #fdf3ea 100%);
    overflow: hidden;
}

#jpp-market::before {
    content: "";
    position: absolute;
    top: -120px;
    right: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(4, 168, 101, 0.12), rgba(4, 168, 101, 0) 70%);
    pointer-events: none;
}

#jpp-market::after {
    content: "";
    position: absolute;
    bottom: -140px;
    left: -100px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(23, 53, 111, 0.1), rgba(23, 53, 111, 0) 70%);
    pointer-events: none;
}

#jpp-market__header {
    position: relative;
    max-width: 720px;
    margin: 0 auto 56px;
    text-align: center;
}

#jpp-market__eyebrow {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #fb5c00;
    margin-bottom: 10px;
}

#jpp-market__title {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 34px;
    color: #17356f;
    margin-bottom: 18px;
}

#jpp-market__body {
    font-size: 15px;
    line-height: 1.8em;
    color: #4a5568;
}

#jpp-market__grid {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    max-width: 980px;
    margin: 0 auto;
}

.jpp-market__col {
    flex: 1 1 320px;
    max-width: 440px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(23, 53, 111, 0.08);
    backdrop-filter: blur(2px);
}

.jpp-market__col-title {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 19px;
    color: #17356f;
    margin-bottom: 20px;
    text-align: center;
}

.jpp-tag-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.jpp-tag {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    font-weight: 500;
    color: #2d3748;
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    box-shadow: 0 4px 12px rgba(23, 53, 111, 0.06);
}

.jpp-tag__dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.jpp-tag--blue .jpp-tag__dot {
    background: #17356f;
}

.jpp-tag--green .jpp-tag__dot {
    background: #04a865;
}

.jpp-tag--orange .jpp-tag__dot {
    background: #fb5c00;
}

@media only screen and (max-width: 600px) {
    #jpp-market {
        padding: 56px 8% 72px;
    }
    #jpp-market__title {
        font-size: 26px;
    }
    #jpp-market__grid {
        flex-direction: column;
        align-items: stretch;
    }
    .jpp-market__col {
        max-width: 100%;
        padding: 24px;
    }
}

/* The site's page-transition script normally reveals #nav/#logo/.page content
   once its (broken, asset-dependent) loading animation finishes; that never
   resolves reliably in this static export, leaving the nav and page content
   invisible behind a stuck loading screen. Force content visible and drop the
   loading screen so pages and navigation always work. */
.js #nav,
.js #logo,
.js .page {
    visibility: visible !important;
}
#main-loading-page {
    display: none !important;
}

/* The homepage's "story" sections were built for a JS scroll-hijacking
   carousel (GSAP-driven) that pins each section full-screen and reveals one
   at a time as the user scrolls; that controller never initializes in this
   static export, so every section stayed permanently hidden/overlapping.
   Convert it into a normal, natural-scrolling stack of full-height sections
   instead, matching how every other page on this site already works. */
.js #home-page {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 80px;
}
.js .home-screen,
.js .home-screen__step {
    position: relative !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}
/* Nearly every element inside the homepage story sections (video
   backgrounds, images, CTA links, headings) is individually hidden by
   default and meant to be revealed one-by-one by the same broken GSAP
   scroll animation. Rather than chase each rule, force the whole subtree
   visible now that it renders as a normal static stack. */
.js #home-page * {
    visibility: visible !important;
}
/* Below the site's own 1024px breakpoint the decorative side image/cards in
   each "step-2" panel are hidden by design, leaving only a short text block —
   but step-2 was still being forced to a full 100vh box (via the .home-screen
   __step rule above) and its text was absolutely stretched top/bottom to
   fill it, leaving a large blank gap under short text. Let step-2 size to
   its actual content on mobile/tablet instead. */
@media screen and (max-width: 1023px) {
    .js .home-screen__step-2 {
        min-height: 0;
        height: auto !important;
        padding: 90px 0 60px;
    }
    .js .home-screen__step-2__content {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        height: auto !important;
        display: block;
    }
}

/* The homepage story panels now use .reveal (see js/reveal.js) so each one
   fades/slides in as it's scrolled to, restoring the site's scroll-in motion.
   .reveal sets position:relative for its own overflow-hidden mask, which would
   otherwise clobber these panels' position:absolute (needed for their top/
   left/bottom placement within each home-screen section). Win that fight back
   with a more specific selector so the reveal animation applies without
   touching their layout. */
.home-screen__step-1__content.reveal,
.home-screen__step-2__content.reveal {
    position: absolute;
}

/* Homepage story panels were previously listed in #home-pagination, but that
   widget's positioning (percentage offsets meant for a single pinned 100vh
   stage) no longer makes sense now that #home-page is a tall, naturally
   scrolling document, and nothing currently drives it. Hide it rather than
   leave a broken floating counter on the page. */
#home-pagination {
    display: none;
}

/* ------------------------------------------------------------------
   Cinematic homepage scroll (original build for this site, see
   js/cinematic.js). Progressive enhancement only: js/cinematic.js adds
   "cine-mode" to <html> solely on wide viewports when the visitor hasn't
   asked for reduced motion. Without that class every rule above still
   applies untouched, so the plain stacked/reveal homepage (already
   accessible and already verified working) stays the fallback for mobile,
   no-JS and reduced-motion visitors.
   ------------------------------------------------------------------ */
.cine-mode .cine-block {
    position: relative;
}
@media screen and (min-width: 1024px) {
    .cine-mode .cine-block {
        /* The runway each pinned section is scrubbed across. The handover
           occupies about half of it, so a shorter runway is what keeps the
           transition feeling like a transition rather than a slow drag. */
        height: 180vh;
    }
    .cine-mode .cine-sticky.home-screen {
        position: sticky !important;
        /* Pin below the fixed bar, not under it, and take the height that
           is actually left - otherwise each panel is a barful taller than
           the space it has and its bottom edge is permanently cropped. */
        top: var(--nav-h);
        height: calc(100vh - var(--nav-h)) !important;
        min-height: 0 !important;
        overflow: hidden !important;
        /* Mid-crossfade a panel sits at partial opacity, so whatever is behind
           it shows through. Without this that backdrop is the page's near-white
           body, which washes the footage out and drops the white headline on it
           to almost no contrast. Compositing against a dark backdrop instead
           keeps both readable the whole way through the transition. */
        background-color: #0f1b2d;
    }
    .cine-mode .cine-sticky .home-screen__step {
        position: absolute !important;
        inset: 0;
        width: 100%;
        height: 100% !important;
        min-height: 0 !important;
    }
    .cine-mode .cine-sticky .home-screen__step-1 {
        z-index: 1;
    }
    .cine-mode .cine-sticky .home-screen__step-2 {
        z-index: 2;
    }
    /* will-change only on what the timeline actually moves. It was on the
       two full-screen step containers as well, which promoted ten
       viewport-sized compositor layers that nothing ever animated - pure
       GPU memory, and on a laptop that is what makes the scroll stutter. */
    .cine-mode .cine-sticky .home-screen__step-2__img,
    .cine-mode .cine-sticky .home-screen__step-2__bg,
    .cine-mode .cine-sticky .home-screen__step-2__corner,
    .cine-mode .cine-sticky .home-screen__step__content__title,
    .cine-mode .cine-sticky .home-screen__step__content__subtitle {
        will-change: transform;
    }
    /* During the handover the headline and subtitle of each step travel all
       the way to the other step's resting position, which is outside their
       own container. Both of these clip by default (auto / hidden), which
       would cut the type off mid-flight - and, on the oversized subtitles,
       mid-word even at rest. Nothing inside needs a scroll box at this
       width, so let them spill. */
    .cine-mode .cine-sticky .home-screen__step-2__content,
    .cine-mode .cine-sticky .home-screen__step-2__content__inner {
        overflow: visible;
    }
}

/* The story subtitles are sized by a font-size + transform:scale() pair
   (25px scaled 1.2973x, or 1.5238x above 1400px, from transform-origin:
   left top). That means their LAYOUT box stays 25px-text wide while they
   RENDER about half again as wide, deliberately spilling to the right of
   their column - so this container must never clip. It briefly did, when
   these panels carried the sitewide .reveal class (which brings
   overflow:hidden) and cut the scaled text off mid-word. js/cinematic.js
   owns their motion now instead; this guard keeps the spill safe. */
#home-page .home-screen__step__content {
    overflow: visible;
}

/* Narrow screens and reduced-motion visitors skip the pinned timeline and
   read the panels as a normal stacked page, so they get one gentle fade as
   each scrolls in. Gated on a class js/cinematic.js sets, so with no JS the
   content is simply visible. */
.cine-fade #home-page .home-screen__step__content {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.cine-fade #home-page .home-screen__step__content.cine-seen {
    opacity: 1;
    transform: translateY(0);
}
/* ==================================================================
   Corporate top navigation, page offset, and responsive image safety
   ------------------------------------------------------------------
   Everything below was added on top of the original template. It is
   kept in one block at the end of the file so it is obvious what is
   ours and what shipped with the theme.
   ================================================================== */

:root {
    --nav-h: 76px;
    --jpp-blue: #1d386e;
    --jpp-green: #02a964;
    --jpp-orange: #f37024;
}
@media screen and (max-width: 1023px) {
    :root {
        --nav-h: 60px;
    }
}

/* The theme's own logo and hamburger are both left permanently
   visibility:hidden by ".js #logo, .js #nav" near the top of this file -
   they were only ever meant to be revealed by the intro animation, which
   never runs here. Rather than un-hide a nav that has no visible desktop
   links anyway, retire them and use the bar below. */
#logo,
#nav,
#nav-toggle,
#top-bar {
    display: none !important;
}

.site-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
    height: var(--nav-h);
    padding: 0 clamp(16px, 4vw, 56px);
    background-color: #fff;
    border-bottom: 1px solid rgba(29, 56, 110, 0.1);
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
}
.site-nav__brand {
    display: flex;
    align-items: center;
    height: 100%;
    flex: 0 0 auto;
}
.site-nav__brand img {
    display: block;
    width: auto;
    height: calc(var(--nav-h) - 24px);
    max-width: 180px;
    object-fit: contain;
}
.site-nav__links {
    display: flex;
    align-items: center;
    gap: clamp(14px, 2.2vw, 34px);
}
.site-nav__links a {
    position: relative;
    color: var(--jpp-blue);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.25s ease;
}
.site-nav__links a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -7px;
    left: 0;
    height: 2px;
    background-color: var(--jpp-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav__links a:hover,
.site-nav__links a[aria-current="page"] {
    color: var(--jpp-green);
}
.site-nav__links a:hover::after,
.site-nav__links a[aria-current="page"]::after {
    transform: scaleX(1);
}
.site-nav__links a.site-nav__cta {
    padding: 10px 22px;
    color: #fff;
    background-color: var(--jpp-orange);
    border-radius: 999px;
    transition: background-color 0.25s ease;
}
.site-nav__links a.site-nav__cta::after {
    display: none;
}
.site-nav__links a.site-nav__cta:hover {
    color: #fff;
    background-color: #d95f14;
}

/* Hamburger. Checkbox-driven so the menu opens with no JavaScript. */
.site-nav__switch,
.site-nav__burger {
    display: none;
}
@media screen and (max-width: 1023px) {
    .site-nav__burger {
        position: relative;
        display: block;
        width: 30px;
        height: 22px;
        cursor: pointer;
        flex: 0 0 auto;
    }
    .site-nav__burger span {
        position: absolute;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--jpp-blue);
        border-radius: 2px;
        transition: transform 0.3s ease, opacity 0.2s ease;
    }
    .site-nav__burger span:nth-child(1) { top: 0; }
    .site-nav__burger span:nth-child(2) { top: 10px; }
    .site-nav__burger span:nth-child(3) { top: 20px; }
    .site-nav__switch:checked ~ .site-nav__burger span:nth-child(1) {
        transform: translateY(10px) rotate(45deg);
    }
    .site-nav__switch:checked ~ .site-nav__burger span:nth-child(2) {
        opacity: 0;
    }
    .site-nav__switch:checked ~ .site-nav__burger span:nth-child(3) {
        transform: translateY(-10px) rotate(-45deg);
    }
    /* Animated with opacity/transform rather than by transitioning
       max-height. A menu must not depend on a transition completing in
       order to be usable: if transitions are unavailable or interrupted,
       the checked state here still shows the panel instantly. */
    .site-nav__links {
        position: fixed;
        top: var(--nav-h);
        right: 0;
        left: 0;
        display: block;
        max-height: calc(100vh - var(--nav-h));
        padding: 0 24px 8px;
        overflow-y: auto;
        background-color: #fff;
        border-bottom: 1px solid rgba(29, 56, 110, 0.1);
        box-shadow: 0 14px 28px -18px rgba(29, 56, 110, 0.5);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity 0.26s ease, transform 0.26s ease,
            visibility 0s linear 0.26s;
    }
    .site-nav__switch:checked ~ .site-nav__links {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s;
    }
    .site-nav__links a {
        display: block;
        padding: 16px 0;
        font-size: 17px;
        border-bottom: 1px solid rgba(29, 56, 110, 0.07);
    }
    .site-nav__links a::after {
        display: none;
    }
    .site-nav__links a.site-nav__cta {
        display: inline-block;
        margin: 18px 0 24px;
        border-bottom: 0;
    }
}

/* Every page's content now starts below the fixed bar. The theme used to
   push only the homepage down, with a hard-coded 80px margin that did not
   match anything, which is what left the hero video 80px taller than the
   space it had and cut its bottom off. */
#page-container {
    padding-top: var(--nav-h);
}
.js #home-page {
    margin-top: 0;
}
/* The hero is "one screenful" - which is the screen minus the bar, not the
   whole screen, or its bottom edge is always under the fold. */
#home-landing {
    height: calc(100vh - var(--nav-h)) !important;
    min-height: 480px;
}
/* Cover, never letterbox or crop to one side: the video and every
   background image in the story sections should fill their box from the
   centre at any aspect ratio. */
#home-landing__bg,
#home-landing__bg__video,
.home-screen__step-1__bg__video,
.home-screen__step-1__bg__canvas {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center center;
}

/* Scroll anchoring tries to keep a "stable" element still when content
   above it changes size. With sticky sections whose children are being
   transformed every frame it picks a moving element and corrects the
   scroll position to compensate - which reads as the page flickering and
   snapping backwards while you scroll. */
html {
    overflow-anchor: none;
}
#page-container,
.cine-block,
.home-screen {
    overflow-anchor: none;
}

/* No image anywhere may exceed its column. This is the single most common
   cause of the horizontal overflow that crops images on phones. */
img,
video,
canvas {
    max-width: 100%;
}
/* "clip", not "hidden". overflow-x:hidden turns the element into a scroll
   container, which changes the containing block for position:sticky - it
   silently stopped the homepage's pinned story panels from pinning at all.
   "clip" crops the same overflow without creating a scroll container.
   Where it is unsupported the page simply behaves as before; nothing
   actually overflows any more in any case. */
html,
body {
    overflow-x: clip;
}

/* ------------------------------------------------------------------
   Typography pass
   ------------------------------------------------------------------ */

/* Body copy across the site was set in very light greys (#999, #ababab,
   #a9a9a9) which look washed out and fail contrast against white. These
   are the same greys, darkened to something legible - still quiet, but
   readable on a phone in daylight. */
.home-screen__step-2__content__inner__body,
#solutions__price__body,
#solutions__mission__body,
#solutions__intro__body,
#solutions__service__body p,
.process__step__body,
.na__text p,
.about__body p {
    color: #5a6472;
}

/* Justified text opens rivers of white space in narrow columns, which is
   the single most common way a corporate site reads as sloppy. */
#solutions__price__body,
#solutions__mission__body,
.process__step__body,
[style*="text-align: justify"] {
    text-align: left;
}

/* Long words, product codes and URLs must never punch out of their column. */
h1, h2, h3, h4, p, li, .title, .para, .details {
    overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
   Responsive corrections
   ------------------------------------------------------------------ */

@media screen and (max-width: 1023px) {
    /* This wrapper was positioned at margin-left:64.49% while being
       48.99% wide - 113% of the row - so on a phone its right-hand
       third was simply cut off the screen. */
    #solutions__price__img-2-wrapper {
        margin-left: 51%;
    }

    /* The hero has to fit the screen it is on. Its text block was
       absolutely positioned against a box sized for a desktop window,
       so on a phone the bottom of the copy ran past the fold. */
    #home-landing__content {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        max-height: 100%;
        overflow: visible;
    }
    #home-landing__content__text {
        box-sizing: border-box;
        max-width: 100%;
    }
    #home-landing__content__text__body {
        font-size: 13px;
        line-height: 1.55em;
    }

    /* Anything relying on a fixed pixel height crops its own picture at
       phone aspect ratios. Let these size to the space they have. */
    .process__step__img,
    .na__img,
    figure img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* Every photo in a fixed-ratio frame should fill it from the centre
   rather than being squashed or anchored to one edge. */
.myCertSlides figure img,
.process__step__img img,
#solutions__price__img-1,
#solutions__price__img-2,
#about__header__img,
#solutions__header__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
/* Certificates are documents - fit the whole page in, never crop it. */
.myCertSlides figure img {
    height: auto;
    max-height: 70vh;
    object-fit: contain;
}

/* These two sit in auto-height wrappers, so stretching them to height:100%
   collapses them to nothing - they size from their own aspect instead. */
#solutions__price__img-1,
#solutions__price__img-2 {
    height: auto;
}
/* Lazy-loaded images have no height until they arrive, which would let
   these panels collapse and then jump. Hold the space. */
#solutions__price__img-1-wrapper,
#solutions__price__img-2-wrapper {
    min-height: 120px;
}
.myCertSlides figure {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46vh;
}
.myCertSlides figure img {
    width: auto;
    max-width: 100%;
}

/* ------------------------------------------------------------------
   Mobile corrections, continued
   ------------------------------------------------------------------ */

@media screen and (max-width: 1023px) {
    /* The process timeline is a two-column row: text beside a picture.
       Below about 1024px there is no room for two columns, so the picture
       was simply pushed off the right of the screen - every one of the six
       step images was half off-canvas on a phone. Stack them instead. */
    .process__step__inner {
        display: block;
    }
    .process__step__txt,
    .process__step:nth-child(odd) .process__step__txt,
    .process__step:nth-child(even) .process__step__txt {
        width: auto;
        margin-right: 6.5%;
        margin-left: 6.5%;
    }
    .process__step__img,
    .process__step:nth-child(even) .process__step__img,
    .process__step:nth-child(odd) .process__step__img {
        display: block;
        box-sizing: border-box;
        width: 87%;
        max-width: 87%;
        height: auto;
        margin: 26px 6.5% 0;
        border-radius: 4px;
    }
    /* The sidebar step numerals are positioned with desktop pixel offsets
       and only stick out past the edge at this width. */
    .process__step__outer-index {
        display: none;
    }
}

/* The industry thumbnails sit in a 50.72% x 60% box while the artwork is
   16:9, so they were being squashed into a near-square rather than
   cropped. Fix the distortion without disturbing the placement. */
.solutions__industries__item__img {
    object-fit: cover;
    object-position: center center;
}
@media screen and (max-width: 1023px) {
    /* These images are revealed on hover - which does not exist on a
       phone, so on mobile the industries list was labels and nothing
       else. Show them inline underneath each label instead. */
    .solutions__industries__item {
        width: auto;
    }
    .solutions__industries__item__img {
        position: relative;
        top: auto;
        right: auto;
        box-sizing: border-box;
        width: 87%;
        height: auto;
        margin: 12px 6.5% 28px;
        opacity: 1;
        border-radius: 4px;
    }
}

/* Small inline diagrams should keep their proportions rather than being
   squeezed into whatever box they land in. */
.page__color img:not([id]) {
    object-fit: contain;
}

/* The numbered step marks on the colour page are drawn from a tall
   artwork squeezed into a small square - keep their proportions. */
.ac__number__content img,
.ac__number2__items img,
.ac__items__right img.item2__img {
    object-fit: contain;
    object-position: center center;
}

/* ------------------------------------------------------------------
   Scroll-in reveals: fail visible, never invisible
   ------------------------------------------------------------------
   ".reveal" starts at opacity:0 and is brought in by js/reveal.js. If
   that script does not run - no JavaScript, a blocked file, an error
   earlier on the page - whole sections of copy stay permanently blank.
   js/reveal.js now stamps "reveal-js" on <html> as its very first act,
   so the hidden starting state only ever applies when something is
   there to undo it. */
html:not(.reveal-js) .reveal {
    transform: none;
    opacity: 1;
}
/* 150px is a long way to travel and reads as sluggish. Half that, on a
   curve that decelerates, matches the rest of the site's motion. */
.reveal {
    transform: translateY(64px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}
.reveal.active {
    will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
    .reveal {
        transform: none;
        opacity: 1;
        transition: none;
    }
}

/* ------------------------------------------------------------------
   Replaces w3.css (was loaded from w3schools.com on the colour page)
   ------------------------------------------------------------------
   That stylesheet was pulled in from a third-party tutorial site on
   every visit purely for the three animation classes below, and it set
   the whole page in Verdana - which is why the colour page read in a
   different typeface from the rest of the site. These are the same
   three animations, defined locally.
   ------------------------------------------------------------------ */
.w3-animate-top {
    position: relative;
    animation: jpp-animate-top 0.4s;
}
@keyframes jpp-animate-top {
    from { top: -300px; opacity: 0; }
    to { top: 0; opacity: 1; }
}
.w3-animate-right {
    position: relative;
    animation: jpp-animate-right 0.4s;
}
@keyframes jpp-animate-right {
    from { right: -300px; opacity: 0; }
    to { right: 0; opacity: 1; }
}
.w3-animate-zoom {
    animation: jpp-animate-zoom 0.6s;
}
@keyframes jpp-animate-zoom {
    from { transform: scale(0); }
    to { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .w3-animate-top,
    .w3-animate-right,
    .w3-animate-zoom {
        animation: none;
    }
}

/* Section headings in the hand-built sections (certificates, service
   cards, colour steps) were falling back to the body face, so the brand
   display face only appeared on the template's own pages. */
.title,
.na__action__content .details .title,
.sp-items .title {
    font-family: gt_walsheim, Helvetica, Arial, sans-serif;
    letter-spacing: 0.01em;
}

/* The chat bubble sits bottom-right on top of the hero copy on a phone.
   Leave it room rather than letting it cover the last line. */
@media screen and (max-width: 1023px) {
    #home-landing__content__text {
        padding-bottom: 56px;
    }
}

/* The oversized decorative step numeral is rotated about its right edge,
   which pushed it past the right of the page. */
@media screen and (min-width: 1024px) {
    .process__step:nth-child(even) .process__step__outer-index {
        right: 92px;
    }
}

/* ------------------------------------------------------------------
   No justified body copy
   ------------------------------------------------------------------
   Eleven blocks across the site set text-align:justify. In narrow
   columns - which is every column on a phone - forced justification
   stretches word spacing into visible rivers of white, and it is the
   fastest way to make otherwise good typography look amateur. Ragged
   right throughout instead.
   ------------------------------------------------------------------ */
.project__desc,
.process__intro__txt,
.process__step__body,
#solutions__intro__title,
#solutions__price__txt,
#solutions__price__txt_vision,
#solutions__price__body,
#solutions__mission__body,
.ac__items__left p,
.ac__item4__list p,
.na__text__content p {
    text-align: left;
}