@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Black.eot);
    src: url(../fonts/Gotham-Black.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Black.woff2) format("woff2"), url(../fonts/Gotham-Black.woff) format("woff"), url(../fonts/Gotham-Black.ttf) format("truetype"), url(../fonts/Gotham-Black.svg#Gotham-Black) format("svg");
    font-weight: 900;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-BlackItalic.eot);
    src: url(../fonts/Gotham-BlackItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-BlackItalic.woff2) format("woff2"), url(../fonts/Gotham-BlackItalic.woff) format("woff"), url(../fonts/Gotham-BlackItalic.ttf) format("truetype"), url(../fonts/Gotham-BlackItalic.svg#Gotham-BlackItalic) format("svg");
    font-weight: 900;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Bold.eot);
    src: url(../fonts/Gotham-Bold.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Bold.woff2) format("woff2"), url(../fonts/Gotham-Bold.woff) format("woff"), url(../fonts/Gotham-Bold.ttf) format("truetype"), url(../fonts/Gotham-Bold.svg#Gotham-Bold) format("svg");
    font-weight: 700;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham Extra;
    src: url(../fonts/Gotham-ExtraLightItalic.eot);
    src: url(../fonts/Gotham-ExtraLightItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-ExtraLightItalic.woff2) format("woff2"), url(../fonts/Gotham-ExtraLightItalic.woff) format("woff"), url(../fonts/Gotham-ExtraLightItalic.ttf) format("truetype"), url(../fonts/Gotham-ExtraLightItalic.svg#Gotham-ExtraLightItalic) format("svg");
    font-weight: 200;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham Book;
    src: url(../fonts/Gotham-BookItalic.eot);
    src: url(../fonts/Gotham-BookItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-BookItalic.woff2) format("woff2"), url(../fonts/Gotham-BookItalic.woff) format("woff"), url(../fonts/Gotham-BookItalic.ttf) format("truetype"), url(../fonts/Gotham-BookItalic.svg#Gotham-BookItalic) format("svg");
    font-weight: 400;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham Extra;
    src: url(../fonts/Gotham-ExtraLight.eot);
    src: url(../fonts/Gotham-ExtraLight.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-ExtraLight.woff2) format("woff2"), url(../fonts/Gotham-ExtraLight.woff) format("woff"), url(../fonts/Gotham-ExtraLight.ttf) format("truetype"), url(../fonts/Gotham-ExtraLight.svg#Gotham-ExtraLight) format("svg");
    font-weight: 200;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-LightItalic.eot);
    src: url(../fonts/Gotham-LightItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-LightItalic.woff2) format("woff2"), url(../fonts/Gotham-LightItalic.woff) format("woff"), url(../fonts/Gotham-LightItalic.ttf) format("truetype"), url(../fonts/Gotham-LightItalic.svg#Gotham-LightItalic) format("svg");
    font-weight: 300;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham Ultra;
    src: url(../fonts/Gotham-UltraItalic.eot);
    src: url(../fonts/Gotham-UltraItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-UltraItalic.woff2) format("woff2"), url(../fonts/Gotham-UltraItalic.woff) format("woff"), url(../fonts/Gotham-UltraItalic.ttf) format("truetype"), url(../fonts/Gotham-UltraItalic.svg#Gotham-UltraItalic) format("svg");
    font-weight: 400;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-MediumItalic.eot);
    src: url(../fonts/Gotham-MediumItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-MediumItalic.woff2) format("woff2"), url(../fonts/Gotham-MediumItalic.woff) format("woff"), url(../fonts/Gotham-MediumItalic.ttf) format("truetype"), url(../fonts/Gotham-MediumItalic.svg#Gotham-MediumItalic) format("svg");
    font-weight: 500;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-BoldItalic.eot);
    src: url(../fonts/Gotham-BoldItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-BoldItalic.woff2) format("woff2"), url(../fonts/Gotham-BoldItalic.woff) format("woff"), url(../fonts/Gotham-BoldItalic.ttf) format("truetype"), url(../fonts/Gotham-BoldItalic.svg#Gotham-BoldItalic) format("svg");
    font-weight: 700;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Medium.eot);
    src: url(../fonts/Gotham-Medium.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Medium.woff2) format("woff2"), url(../fonts/Gotham-Medium.woff) format("woff"), url(../fonts/Gotham-Medium.ttf) format("truetype"), url(../fonts/Gotham-Medium.svg#Gotham-Medium) format("svg");
    font-weight: 500;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-ThinItalic.eot);
    src: url(../fonts/Gotham-ThinItalic.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-ThinItalic.woff2) format("woff2"), url(../fonts/Gotham-ThinItalic.woff) format("woff"), url(../fonts/Gotham-ThinItalic.ttf) format("truetype"), url(../fonts/Gotham-ThinItalic.svg#Gotham-ThinItalic) format("svg");
    font-weight: 100;
    font-style: italic;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Thin.eot);
    src: url(../fonts/Gotham-Thin.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Thin.woff2) format("woff2"), url(../fonts/Gotham-Thin.woff) format("woff"), url(../fonts/Gotham-Thin.ttf) format("truetype"), url(../fonts/Gotham-Thin.svg#Gotham-Thin) format("svg");
    font-weight: 100;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham;
    src: url(../fonts/Gotham-Light.eot);
    src: url(../fonts/Gotham-Light.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Light.woff2) format("woff2"), url(../fonts/Gotham-Light.woff) format("woff"), url(../fonts/Gotham-Light.ttf) format("truetype"), url(../fonts/Gotham-Light.svg#Gotham-Light) format("svg");
    font-weight: 300;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham Ultra;
    src: url(../fonts/Gotham-Ultra.eot);
    src: url(../fonts/Gotham-Ultra.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Ultra.woff2) format("woff2"), url(../fonts/Gotham-Ultra.woff) format("woff"), url(../fonts/Gotham-Ultra.ttf) format("truetype"), url(../fonts/Gotham-Ultra.svg#Gotham-Ultra) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display:swap
}

@font-face {
    font-family: Gotham Book;
    src: url(../fonts/Gotham-Book.eot);
    src: url(../fonts/Gotham-Book.eot?#iefix) format("embedded-opentype"), url(../fonts/Gotham-Book.woff2) format("woff2"), url(../fonts/Gotham-Book.woff) format("woff"), url(../fonts/Gotham-Book.ttf) format("truetype"), url(../fonts/Gotham-Book.svg#Gotham-Book) format("svg");
    font-weight: 400;
    font-style: normal;
    font-display:swap
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform:rotate(1turn)
    }
}

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

    to {
        -webkit-transform: rotate(1turn);
        transform:rotate(1turn)
    }
}


body, html {
    overflow-x: hidden;
    font-family:Gotham
}

.page-template {
    padding-top:100vh
}

.no-margin {
    margin:0
}

p {
    color: #000;
    font-size: 16px;
    font-weight:300
}

@media screen and (max-width: 768px) {
    p {
        font-size:12px
    }
}

p strong {
    font-weight:400
}

a, a:hover {
    text-decoration:none
}

.center-block {
    display: block;
    margin:auto
}

.t-center {
    text-align:center
}

.above {
    position: relative;
    z-index:9997
}

@-webkit-keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform:translateX(0)
    }

    to {
        -webkit-transform: translateX(-1750px);
        transform:translateX(-1750px)
    }
}

@keyframes scroll {
    0% {
        -webkit-transform: translateX(0);
        transform:translateX(0)
    }

    to {
        -webkit-transform: translateX(-1750px);
        transform:translateX(-1750px)
    }
}

.hidden {
    display:none !important
}

.navbar {
    margin-top: 60px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index:9998
}

@media screen and (max-width: 768px) {
    .navbar {
        margin-top:30px
    }
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content:space-between
}

.navbar .logo-baseline {
    transition:opacity .4s ease-in-out
}

@media screen and (max-width: 768px) {
    .navbar .logo-baseline {
        width:82px
    }
}

.navbar .menu-icon {
    cursor: pointer;
    will-change: transform;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-animation: rotating 6s linear infinite;
    animation:rotating 6s linear infinite
}

@media screen and (max-width: 768px) {
    .navbar .menu-icon {
        width:69px
    }
}

.menu {
    position: fixed;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    overflow-y: auto;
    justify-content: center;
    align-items: center;
    background: #000;
    bottom: -100dvh;
    right: -100dvh;
    z-index: 9999;
  	transition:right .6s cubic-bezier(.435,0,0,1)
}

@media screen and (max-width: 768px) {
    .menu .offset-sm-0 {
        margin-left:0
    }
}

.menu--open {
    bottom:0
}

.menu--head {
    padding-bottom:4vh
}

@media screen and (max-width: 768px) {
    .menu--head {
        padding:3vh 0
    }
}

.menu--head .col {
    display: flex;
    align-items: center;
    justify-content:space-between
}

.menu--head .col .breadcrumb-custom a {
    font-weight: 300;
    color: #ff5472;
    font-size: 30px;
    letter-spacing: 0;
    text-transform:uppercase
}

@media screen and (max-width: 991px) {
    .menu--head .col .breadcrumb-custom a {
        font-size:20px
    }
}

.menu--head .col .close-menu {
    cursor:pointer
}

.menu--links {
    padding-bottom:10vh
}

@media screen and (max-width: 991px) {
    .menu--links {
        padding-bottom:5vh
    }
}

.menu--links .nav-custom li {
    list-style: none;
    padding-bottom:30px
}

.menu--links .nav-custom li a {
    font-weight: 300;
    text-transform: uppercase;
    color: #fff;
    font-size: 60px;
    transition:font-weight .3s ease-in
}

@media screen and (max-width: 1200px) {
    .menu--links .nav-custom li a {
        font-size:40px
    }
}

@media screen and (max-width: 991px) {
    .menu--links .nav-custom li a {
        font-size:20px
    }
}

.menu--links .nav-custom li a:hover {
    font-weight:400
}

.menu--links .nav-custom li:first-child a:hover {
    color:#00e5ad
}

.menu--links .nav-custom li:nth-child(2) a:hover {
    color:#ff0
}

.menu--links .nav-custom li:nth-child(3) a:hover {
    color:#4bc3f4
}

.menu--links .nav-custom li:nth-child(4) a:hover {
    color:#fff
}

.menu--links .logo-box {
    display: flex;
    align-items: center;
    justify-content:center
}

.menu--links .logo-box svg {
    transition: all .3s ease-in;
    fill:#ff5472
}

.menu--footer {
    display: flex;
    align-items: center;
    justify-content:space-between
}

@media screen and (max-width: 991px) {
    .menu--footer {
        display:block
    }
}

@media screen and (max-width: 991px) {
    .menu--footer .logo {
        margin-bottom:12px
    }
}

@media screen and (max-width: 768px) {
    .menu--footer .logo {
        width:86%
    }
}

.menu--footer .contact-details {
    display: flex;
    align-items: center;
    justify-content:space-between
}

@media screen and (max-width: 991px) {
    .menu--footer .contact-details {
        display:block
    }
}

.menu--footer .contact-details a, .menu--footer .contact-details p {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    color:#fff
}

@media screen and (max-width: 991px) {
    .menu--footer .contact-details a, .menu--footer .contact-details p {
        margin-bottom: 12px;
        font-size:11px
    }
}

.menu--footer .socials {
    display: flex;
    justify-content:flex-end
}

@media screen and (max-width: 991px) {
    .menu--footer .socials {
        justify-content: flex-start;
        margin-bottom:35px
    }
}

.menu--footer .socials a {
    margin-left:10px
}

@media screen and (max-width: 991px) {
    .menu--footer .socials a {
        margin-left: 0;
        margin-right:10px
    }
}

.menu--footer .socials a svg {
    transition: fill .3s ease-in-out;
    fill:#ff5472
}

.menu--footer .socials a svg:hover {
    fill:#fff !important
}

footer {
    background: #000;
    padding: 144px 0;
    position: relative;
    z-index:9996
}

@media screen and (max-width: 991px) {
    footer {
        padding:50px 0 32px
    }
}

footer .footer-links {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding:46px 0 102px
}

@media screen and (max-width: 991px) {
    footer .footer-links {
        padding: 13px 0 55px;
        flex-direction: column;
        justify-content:inherit
    }
}

footer .footer-links .contact-details a, footer .footer-links .contact-details p {
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0;
    color: #fff;
    display: block;
    margin-bottom:12px
}

@media screen and (max-width: 768px) {
    footer .footer-links .contact-details a, footer .footer-links .contact-details p {
        font-size: 10px;
        margin-bottom:5px
    }
}

footer .footer-links .socials {
    padding-top:10px
}

@media screen and (max-width: 768px) {
    footer .footer-links .socials {
        padding-top:3px
    }
}

footer .footer-links .socials a {
    margin-right:10px
}

@media screen and (max-width: 768px) {
    footer .footer-links .socials a {
        margin-right:5px
    }
}

@media screen and (max-width: 768px) {
    footer .footer-links .socials a img {
        width: 19px;
        height:19px
    }
}

footer .footer-links .links-block {
    padding:0 15px
}

@media screen and (max-width: 991px) {
    footer .footer-links .links-block {
        padding:13px 0 19px 100px
    }
}

footer .footer-links .links-block a {
    font-weight: 300;
    font-size: 14px;
    color: #fff;
    margin-bottom: 12px;
    display: block;
    transition:color .3s ease-in-out
}

@media screen and (max-width: 768px) {
    footer .footer-links .links-block a {
        font-size: 12px;
        margin-bottom:4px
    }
}

footer .footer-links .links-block a:hover {
    color:#ff5472
}

footer .footer-links .links-block .title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 12px;
    text-transform: uppercase;
    display: block;
    color:#fff
}

@media screen and (max-width: 768px) {
    footer .footer-links .links-block .title {
        font-size: 10px;
        margin-bottom:4px
    }
}

footer .newsletter {
    padding-bottom:77px
}

footer .newsletter--title {
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    margin-bottom:12px
}

@media screen and (max-width: 768px) {
    footer .newsletter--title {
        font-size: 10px;
        text-transform:uppercase
    }
}

footer .newsletter form {
    margin:0 !important
}

footer .newsletter form .form-group {
    display: flex;
    align-content:center
}

footer .newsletter form .form-group .form-control {
    padding: 3px 0;
    background: transparent;
    border: 1px solid #fff;
    border-radius: 0 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color:#fff !important
}

@media screen and (max-width: 768px) {
    footer .newsletter form .form-group .form-control {
        font-size:12px !important
    }
}

footer .newsletter form .form-group .form-control::-webkit-input-placeholder {
    font-weight: 400 !important;
    font-size: 14px !important;
    color:#fff !important
}

footer .newsletter form .form-group .form-control:-ms-input-placeholder {
    font-weight: 400 !important;
    font-size: 14px !important;
    color:#fff !important
}

footer .newsletter form .form-group .form-control::-ms-input-placeholder {
    font-weight: 400 !important;
    font-size: 14px !important;
    color:#fff !important
}

footer .newsletter form .form-group .form-control::placeholder {
    font-weight: 400 !important;
    font-size: 14px !important;
    color:#fff !important
}

footer .newsletter form .form-group .submit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 39px !important;
    border-radius: 0 !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    color: #000 !important;
    background: #fff !important;
    margin: 0 !important;
    padding:0 30px !important
}

footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content:space-between
}

footer .footer-bottom a, footer .footer-bottom p {
    font-weight: 300;
    font-size: 14px;
    color: #fff;
    margin:0
}

@media screen and (max-width: 768px) {
    footer .footer-bottom a, footer .footer-bottom p {
        font-size:10px
    }
}

footer .footer-bottom a span, footer .footer-bottom p span {
    text-transform:uppercase
}

footer a {
    transition:color .3s ease-in-out
}

footer a:hover {
    color:#ff5472
}

.presentation {
    background: #ff5472;
    padding:157px 0 110px
}

@media screen and (max-width: 768px) {
    .presentation {
        padding:34px 0 92px
    }
}

.presentation .h2 {
    font-weight: 900;
    font-size: 143px;
    color: #fff;
    z-index: 10;
    position:relative
}

@media screen and (max-width: 991px) {
    .presentation .h2 {
        font-size:60px
    }
}

.presentation .simpleParallax {
    width: 90%;
    height: 692px;
    display: block;
    margin: -275px auto 0;
    z-index:0
}

@media screen and (max-width: 991px) {
    .presentation .simpleParallax {
        height: auto;
        width: 100%;
        margin:-115px auto 0
    }
}

.presentation .struct-block {
    margin: 100px 0 55px;
    padding: 75px 0 70px;
    position:relative
}

.presentation .struct-block:before {
    content: "";
    position: absolute;
    height: 100%;
    left: 50%;
    width: 2px;
    background: #000;
    top: 0;
    z-index:1
}

.presentation .struct-block h3 {
    color: #fff;
    font-style: italic;
    font-weight: 300;
    font-size: 60px;
    line-height: 60px;
    margin-bottom:30px
}

@media screen and (max-width: 991px) {
    .presentation .struct-block h3 {
        font-size: 30px;
        line-height: normal;
        margin-bottom:20px
    }
}

.presentation .struct-block h3 strong {
    display: block;
    font-style:normal
}

.presentation .struct-block p {
    font-weight: 300;
    font-size:16px
}

@media screen and (max-width: 991px) {
    .presentation .struct-block p {
        font-size:12px
    }
}

.presentation .struct-block p strong {
    font-weight:700
}

.presentation .struct-block .right {
    padding-left: 30px;
    margin-top:165px
}

@media screen and (max-width: 768px) {
    .presentation .struct-block .right {
        padding-left:15px
    }
}

.presentation .struct-block .left {
    padding-right: 30px;
    text-align:right
}

@media screen and (max-width: 768px) {
    .presentation .struct-block .left {
        padding-right:15px
    }
}

.equipe {
    background: #fff;
    padding:260px 0 95px
}

@media screen and (max-width: 991px) {
    .equipe {
        padding:92px 0 101px
    }
}

.equipe .title-mobile {
    color: #ff5472;
    font-style: italic;
    font-weight: 300;
    font-size: 60px;
    line-height: 60px;
    text-transform: uppercase;
    display:none
}

@media screen and (max-width: 991px) {
    .equipe .title-mobile {
        display:block
    }
}

.equipe .title-mobile strong {
    font-style: normal;
    font-weight:900
}

.equipe .title-mobile span {
    display:block
}

.equipe .mosaic-mobile {
    display:none
}

@media screen and (max-width: 991px) {
    .equipe .mosaic-mobile {
        display:block
    }
}

.equipe .mosaic-mobile .row-custom {
    margin-right: -5px;
    margin-left:-5px
}

.equipe .mosaic-mobile .row-custom .col-custom {
    padding:5px
}

.equipe .mosaic {
    position: relative;
    margin-bottom:65px
}

@media screen and (max-width: 991px) {
    .equipe .mosaic {
        display:none
    }
}
.equipe .mosaic .line {
    display: flex;
    align-items: center; /* Centrer verticalement les éléments */
    justify-content: space-between; /* Ajouter de l'espace entre les éléments si nécessaire */
    padding: 25px 0;
    position: relative;
    grid-gap: 14px;
}

.equipe .mosaic .line .title {
    color: #ff5472;
    font-style: italic;
    font-weight: 300;
    font-size: 130px;
    text-transform: uppercase;
    margin: 0; /* Supprimer les marges */
}

@media screen and (max-width: 1400px) {
    .equipe .mosaic .line .title {
        font-size: 108px;
    }
}

@media screen and (max-width: 1200px) {
    .equipe .mosaic .line .title {
        font-size: 85px;
    }
}

@media screen and (max-width: 991px) {
    .equipe .mosaic .line .title {
        display: none;
    }
}

.equipe .mosaic .line .dot, .equipe .mosaic .line .title strong {
    font-style: normal;
    font-weight: 900;
}

.equipe .mosaic .line .dot {
    color: #ff5472;
    font-size: 130px;
    text-transform: uppercase;
    line-height: 0;
    margin: 0;
    position: relative;
}

@media screen and (max-width: 991px) {
    .equipe .cta-svg--desktop {
        display:none
    }
}

.clients {
    background: #fff;
    padding:95px 0 175px
}

@media screen and (max-width: 991px) {
    .clients {
        padding:102px 0 114px
    }
}

.clients h2 {
    font-weight: 900;
    font-size: 60px;
    color: #ff5472;
    text-transform: uppercase;
    text-align:center
}

@media screen and (max-width: 991px) {
    .clients h2 {
        font-size:40px
    }
}

.clients .grid {
    margin: 55px 0 75px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-column-gap:30px
}

@media screen and (max-width: 1200px) {
    .clients .grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows:repeat(5, 1fr)
    }
}

@media screen and (max-width: 768px) {
    .clients .grid {
        grid-column-gap: 45px;
        margin:55px 0 75px
    }
}

.clients .grid img {
    display: block;
    margin:auto
}

.slider-track {
    -webkit-animation: scroll 40s linear infinite;
    animation: scroll 40s linear infinite;
    display: flex;
    width: 11200px;
    background:#fff
}

.slider-track p {
    font-weight: 900;
    font-size: 100px;
    color: #ff5472;
    margin: 0;
    line-height:60px
}

@media screen and (max-width: 991px) {
    .slider-track p {
        font-size: 50px;
        line-height:25px
    }
}

.linkedin-section {
    background: #ff5472;
    padding:275px 0
}

@media screen and (max-width: 991px) {
    .linkedin-section {
        padding:45px 0 101px
    }
}

.linkedin-section .linkedin-content {
    margin-bottom:95px
}

@media screen and (max-width: 991px) {
    .linkedin-section .logo-linkedin img {
        width:30px
    }
}

.linkedin-section p {
    font-weight: 900;
    font-size: 28px;
    color: #fff;
    margin-top:27px
}

@media screen and (max-width: 991px) {
    .linkedin-section p {
        font-size:15px
    }
}

.blog-section {
    background: #fff;
    padding:113px 0 145px
}

.blog-section .title-slide-up {
    margin-bottom:130px
}

@media screen and (max-width: 1200px) {
    .blog-section .title-slide-up {
        margin-bottom:50px
    }
}

.blog-section .title-slide-up div:first-child .h2 {
    line-height:135px !important
}

.blog-section .title-slide-up .h2 {
    font-weight: 900;
    font-size: 100px;
    text-align: center;
    text-transform: uppercase;
    color: #000;
    line-height: 90px;
    margin-bottom:0
}

@media screen and (max-width: 1200px) {
    .blog-section .title-slide-up .h2 {
        font-size: 33px;
        line-height:normal
    }
}

.blog-section .title-slide-up .h2 span {
    display: block;
    font-size: 380px;
    line-height:330px
}

@media screen and (max-width: 1200px) {
    .blog-section .title-slide-up .h2 span {
        font-size: 128px;
        line-height:108px
    }
}

@media screen and (max-width: 768px) {
    .blog-section .desktop {
        display:none
    }
}

.blog-section .mobile {
    display:none
}

@media screen and (max-width: 768px) {
    .blog-section .mobile {
        display:block
    }
}

.blog-section .mobile--post {
    margin-bottom:45px
}

.blog-section .post--img {
    width: 100%;
    height: 361px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:50%
}

.blog-section .post h3 {
    font-weight: 900;
    font-size: 20px;
    color: #000;
    margin:36px 0 20px
}

@media screen and (max-width: 991px) {
    .blog-section .post h3 {
        font-size: 15px;
        margin:23px 0 15px
    }
}

.blog-section .post--excerpt p {
    font-weight: 300;
    font-size: 14px;
    color:#000
}

@media screen and (max-width: 991px) {
    .blog-section .post--excerpt p {
        font-size:12px
    }
}

.blog-section .post .date {
    font-weight: 700;
    font-size: 14px;
    color: #000;
    text-transform: capitalize;
    margin-top:20px
}

@media screen and (max-width: 991px) {
    .blog-section .post .date {
        margin-top:0
    }
}

.blog-section .blog-list.isFixed {
    top:var(--offsetTop, 0) !important
}

.blog-section .blog-list #blog-locker-container {
    display: flex;
    flex-flow: row;
    width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content;
    gap:121px
}

.blog-section .blog-list #blog-locker-container > * {
    width:404px
}

.expertise {
    background: linear-gradient(180deg, #000 78%, #fff 0);
    padding:250px 0 93px
}

@media screen and (max-width: 991px) {
    .expertise {
        padding:34px 0 0
    }
}

.expertise .separator {
    background: #000;
    height:124px
}

@media screen and (max-width: 991px) {
    .expertise .separator--green {
        height:72px
    }
}

.expertise .separator--white {
    display: none;
    position: absolute;
    top: -36px;
    height: 72px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform:translateX(-50%)
}

@media screen and (max-width: 991px) {
    .expertise .separator--white {
        display:block
    }
}

.expertise .introduction {
    padding-bottom:40px
}

@media screen and (max-width: 991px) {
    .expertise .introduction {
        padding-bottom:85px
    }
}

.expertise .introduction p {
    font-weight: 300;
    font-size: 30px;
    text-align: center;
    color:#00e5ad
}

@media screen and (max-width: 991px) {
    .expertise .introduction p {
        font-size:15px
    }
}

.expertise .introduction p strong {
    font-weight:700
}

.expertise h2 {
    font-weight: 900;
    font-size: 60px;
    color: #00e5ad;
    text-align: center;
    text-transform: uppercase;
    margin:48px 0 76px
}

@media screen and (max-width: 991px) {
    .expertise h2 {
        font-size: 40px;
        margin:85px 0 0
    }
}

.expertise .line-expertise .content {
    padding:0 20px
}

@media screen and (max-width: 1200px) {
    .expertise .line-expertise .content {
        margin-top: 90px;
        padding:0 30px
    }
}

.expertise .line-expertise .content img {
    display: block;
    margin:0 auto 88px
}

@media screen and (max-width: 991px) {
    .expertise .line-expertise .content img {
        margin:0 auto 35px
    }
}

.expertise .line-expertise .content h3, .expertise .line-expertise .content h4 {
    font-weight: 400;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    margin:0 0 15px
}

@media screen and (max-width: 991px) {
    .expertise .line-expertise .content h3, .expertise .line-expertise .content h4 {
        text-align: center;
        font-size:15px
    }
}

.expertise .line-expertise .content p {
    font-weight: 300;
    font-size: 23px;
    color:#fff
}

@media screen and (max-width: 991px) {
    .expertise .line-expertise .content p {
        text-align: center;
        font-size:12px
    }
}

.expertise .line-expertise .content p strong {
    font-weight:700
}

.expertise .expertise-card {
    margin-top: 75px;
    background: #00e5ad;
    padding: 151px 80px;
    position:relative
}

@media screen and (max-width: 991px) {
    .expertise .expertise-card {
        margin: 125px -15px 0;
        padding:120px 15px
    }
}

.expertise .expertise-card .title {
    font-weight: 300;
    font-size: 60px;
    line-height: 70px;
    color: #fff;
    text-align: center;
    padding:0 60px
}

@media screen and (max-width: 1200px) {
    .expertise .expertise-card .title {
        font-size: 45px;
        padding:0
    }
}

@media screen and (max-width: 991px) {
    .expertise .expertise-card .title {
        font-size: 30px;
        text-align: left;
        line-height:normal
    }
}

.expertise .expertise-card .title strong {
    font-weight:700
}

.expertise .expertise-card .registres {
    border-bottom: 4px solid #fff;
    border-top: 4px solid #fff;
    padding:40px 0
}

@media screen and (max-width: 991px) {
    .expertise .expertise-card .registres {
        border: 0;
        padding:30px 0 0
    }
}

.expertise .expertise-card .registres .line {
    display: flex;
    align-items: center;
    padding:11px 0
}

@media screen and (max-width: 991px) {
    .expertise .expertise-card .registres .line {
        padding:11px 18px
    }
}

.expertise .expertise-card .registres .line .img-container {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    margin-right:20px
}

.expertise .expertise-card .registres .line p {
    font-weight: 400;
    font-size: 17px;
    color: #fff;
    margin:0
}

@media screen and (max-width: 991px) {
    .expertise .expertise-card .registres .line p {
        font-size:12px
    }
}

.slider-section {
    background: #fff;
    padding:95px 0 204px
}

@media screen and (max-width: 991px) {
    .slider-section {
        padding:95px 0
    }
}

.slider-section .decorator {
    position: relative;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin:auto
}

.slider-section .decorator:before {
    content: "";
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 17px;
    display: block;
    height: 38px;
    width: calc(100% + 35px);
    background: #00e5ad;
    z-index:0
}

@media screen and (max-width: 991px) {
    .slider-section .decorator:before {
        height:17px
    }
}

.slider-section .decorator .title-slide-up {
    z-index:1
}

.slider-section .decorator .title-slide-up div {
    display: inline-block;
    margin-right:7px
}

.slider-section .decorator .h2 {
    font-weight: 900;
    font-size: 60px;
    color: #000;
    text-align: center;
    display: block;
    text-transform: uppercase;
    z-index:1
}

@media screen and (max-width: 991px) {
    .slider-section .decorator .h2 {
        font-size:30px
    }
}

.slider-section .slider {
    margin-top:60px
}

.slider-section .slider .swiper-wrapper {
    padding:0 100px
}

@media screen and (max-width: 1200px) {
    .slider-section .slider .swiper-wrapper {
        padding:0
    }
}

.slider-section .slider .swiper {
    width: 100%;
    height:100%
}

@media screen and (max-width: 1200px) {
    .slider-section .slider .swiper .swiper-slide {
        padding:0 80px
    }
}

@media screen and (max-width: 768px) {
    .slider-section .slider .swiper .swiper-slide {
        padding:0 40px
    }
}

.slider-section .slider .swiper .swiper-slide .number-slide {
    font-weight: 900;
    font-size: 150px;
    line-height: 125px;
    color: #00e5ad;
    padding:30px 0 0
}

@media screen and (max-width: 1400px) {
    .slider-section .slider .swiper .swiper-slide .number-slide {
        font-size: 100px;
        line-height: 90px;
        padding:0
    }
}

@media screen and (max-width: 1200px) {
    .slider-section .slider .swiper .swiper-slide .number-slide {
        font-size: 70px;
        line-height: normal;
        padding: 0;
        margin:0
    }
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .number-slide {
        font-size: 50px;
        padding: 0 0 14px;
        text-align:center
    }
}

.slider-section .slider .swiper .swiper-slide .number-slide--desktop {
    display:block
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .number-slide--desktop {
        display:none
    }
}

.slider-section .slider .swiper .swiper-slide .number-slide--mobile {
    display:none
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .number-slide--mobile {
        display:block
    }
}

.slider-section .slider .swiper .swiper-slide .title {
    font-weight: 700;
    font-size: 25px;
    color: #00e5ad;
    margin-bottom:16px
}

@media screen and (max-width: 1400px) {
    .slider-section .slider .swiper .swiper-slide .title {
        font-size:20px
    }
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .title {
        font-size: 15px;
        line-height: 25px;
        margin:15px 0 12px
    }
}

.slider-section .slider .swiper .swiper-slide .cta-svg--desktop {
    display: flex;
    margin:unset
}

@media screen and (max-width: 1200px) {
    .slider-section .slider .swiper .swiper-slide .cta-svg--desktop {
        width: 30px;
        height:30px
    }
}

@media screen and (max-width: 1200px) {
    .slider-section .slider .swiper .swiper-slide .cta-svg--desktop svg {
        width:15px
    }
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .cta-svg--desktop {
        display:none
    }
}

.slider-section .slider .swiper .swiper-slide .cta-svg--mobile {
    display:none
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .cta-svg--mobile {
        display:flex
    }
}

.slider-section .slider .swiper .swiper-slide .text p {
    font-weight: 400;
    font-size: 20px;
    color: #000;
    margin-top:76px
}

@media screen and (max-width: 1200px) {
    .slider-section .slider .swiper .swiper-slide .text p {
        margin-top:15px
    }
}

@media screen and (max-width: 991px) {
    .slider-section .slider .swiper .swiper-slide .text p {
        margin: 0 0 27px;
        line-height: 25px;
        font-size: 16px;
        font-weight:300
    }
}

.slider-section .slider .swiper-button-next:after, .slider-section .slider .swiper-button-prev:after {
    color:#00e5ad
}

@media screen and (max-width: 768px) {
    .slider-section .slider .swiper-button-next:after, .slider-section .slider .swiper-button-prev:after {
        font-size:30px
    }
}

@media screen and (max-width: 768px) {
    .slider-section .slider .swiper-button-next, .slider-section .slider .swiper-button-prev {
        top:37%
    }
}

@media screen and (max-width: 768px) {
    .slider-section .slider .swiper-button-next {
        right:-5px
    }
}

@media screen and (max-width: 768px) {
    .slider-section .slider .swiper-button-prev {
        left:-5px
    }
}

.slider-section .slider .swiper-button-disabled {
    opacity:1
}

.book {
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    padding:280px 0 243px
}

@media screen and (max-width: 768px) {
    .book {
        padding: 92px 0 517px;
        background-image:url(../../img/book-background-mobile.png) !important
    }
}

.book .title-slide-up {
    margin-bottom:32px
}

@media screen and (max-width: 768px) {
    .book .title-slide-up {
        margin-bottom:18px
    }
}

.book .title-slide-up .h2 {
    font-weight: 300;
    font-size: 60px;
    font-style: italic;
    color: #00e5ad;
    text-transform:uppercase
}

@media screen and (max-width: 768px) {
    .book .title-slide-up .h2 {
        font-size:40px
    }
}

.book .title-slide-up .h2 strong {
    font-weight: 900;
    font-style:normal
}

.book .text {
    margin-bottom:19px
}

@media screen and (max-width: 768px) {
    .book .text {
        margin-bottom:23px
    }
}

.book .text p {
    font-weight: 300;
    line-height: 30px;
    font-size: 20px;
    color:#fff
}

@media screen and (max-width: 768px) {
    .book .text p {
        font-size: 16px;
        line-height:22px
    }
}

.book a {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 20px;
    color:#fff
}

@media screen and (max-width: 768px) {
    .book a {
        font-size:15px
    }
}

@media screen and (min-width: 1200px) {
    .book a .first {
        display:block
    }
}

.book a .cta-svg {
    margin:0 24px 0 0
}

@media screen and (max-width: 768px) {
    .book a .cta-svg {
        margin:0 15px 0 0
    }
}

.partners {
    padding: 148px 0 218px;
    background:#000
}

@media screen and (max-width: 768px) {
    .partners {
        padding:92px 0 101px
    }
}

.partners .title-slide-up {
    margin-bottom:81px
}

@media screen and (max-width: 768px) {
    .partners .title-slide-up {
        margin-bottom:62px
    }
}

.partners .title-slide-up .h2 {
    font-weight: 300;
    font-size: 60px;
    font-style: italic;
    color: #00e5ad;
    text-transform:uppercase
}

@media screen and (max-width: 768px) {
    .partners .title-slide-up .h2 {
        font-size:40px
    }
}

.partners .title-slide-up .h2 strong {
    display: block;
    font-weight: 900;
    font-style:normal
}

.partners h3, .partners h4 {
    font-weight: 300;
    font-size: 30px;
    font-style: italic;
    line-height: 40px;
    color: #fff;
    margin-bottom:31px
}

@media screen and (max-width: 768px) {
    .partners h3, .partners h4 {
        font-size: 15px;
        line-height: 25px;
        font-style: normal;
        margin-bottom:12px
    }
}

.partners h3 strong, .partners h4 strong {
    font-weight: 700;
    font-style:normal
}

.partners .text p {
    font-weight: 300;
    line-height: 50px;
    font-size: 23px;
    color:#fff
}

@media screen and (max-width: 768px) {
    .partners .text p {
        font-size: 12px;
        line-height:22px
    }
}

.partners--structures {
    padding:30px 0 60px
}

@media screen and (max-width: 768px) {
    .partners--structures {
        padding:25px 0 90px
    }
}

.partners--structures .block {
    padding-top:0
}

@media screen and (max-width: 991px) {
    .partners--structures .block {
        padding-top:50px
    }
}

.partners--structures .block .logo-box {
    min-height: 216px;
    display: flex;
    align-items:flex-end
}

@media screen and (max-width: 991px) {
    .partners--structures .block .logo-box {
        min-height:unset
    }
}

.partners--structures .block .logo-box img {
    margin-bottom:50px
}

@media screen and (max-width: 768px) {
    .partners--structures .block .logo-box img {
        margin-bottom:30px
    }
}

.partners .separator {
    background: #000;
    height:109px
}

@media screen and (max-width: 768px) {
    .partners--logos {
        padding-top:16px
    }
}

.partners--logos .sub-title {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color: #00e5ad;
    margin-bottom: 69px;
    text-align:center
}

@media screen and (max-width: 768px) {
    .partners--logos .sub-title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom:48px
    }
}

.partners--logos .line {
    padding-top:100px
}

@media screen and (max-width: 768px) {
    .partners--logos .line {
        padding-top:67px
    }
}

.partners--logos .line--logos {
    display: flex;
    align-items: center;
    justify-content:center
}

.partners--logos .line--logos img {
    display: block;
    margin:auto
}

@media screen and (max-width: 768px) {
    .partners--logos .line--logos img {
        max-width:80%
    }
}

.timeline {
    padding: 130px 0 120px;
    background:#fff
}

@media screen and (max-width: 768px) {
    .timeline {
        padding:83px 0 92px
    }
}

.timeline .title-slide-up {
    margin-bottom:29px
}

@media screen and (max-width: 768px) {
    .timeline .title-slide-up {
        margin-bottom:72px
    }
}

.timeline .title-slide-up .h2 {
    font-weight: 300;
    font-size: 60px;
    font-style: italic;
    color: #00e5ad;
    text-transform: uppercase;
    text-align:center
}

@media screen and (max-width: 768px) {
    .timeline .title-slide-up .h2 {
        font-size:35px
    }
}

.timeline .title-slide-up .h2 strong {
    display: block;
    font-weight: 900;
    font-style:normal
}

.timeline .steps {
    padding: 30px 0 50px;
    position:relative
}

@media screen and (max-width: 768px) {
    .timeline .steps {
        padding:110px 0 50px
    }
}

.timeline .steps:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    height: 100%;
    width: 4px;
    z-index: 1;
    background:#00e5ad
}

.timeline .steps .left .block {
    text-align: right;
    padding-right:22px
}

@media screen and (max-width: 768px) {
    .timeline .steps .left .block {
        padding-right:7px
    }
}

.timeline .steps .right .block {
    padding-left:22px
}

@media screen and (max-width: 768px) {
    .timeline .steps .right .block {
        padding-left:7px
    }
}

.timeline .steps .block {
    padding-bottom:38px
}

@media screen and (max-width: 768px) {
    .timeline .steps .block {
        padding-bottom:60px
    }
}

.timeline .steps .block .date {
    font-weight: 900;
    font-size: 60px;
    line-height: 70px;
    color: #00e5ad;
    margin-bottom:10px
}

@media screen and (max-width: 768px) {
    .timeline .steps .block .date {
        font-size: 30px;
        line-height: 30px;
        margin-bottom:7px
    }
}

.timeline .steps .block .text {
    font-size: 20px;
    font-weight: 300;
    color:#000
}

@media screen and (max-width: 768px) {
    .timeline .steps .block .text {
        font: size 16px;
    }
}

.presentation-equipe {
    padding: 250px 0 0;
    background:#000
}

.presentation-equipe .title {
    font-weight: 700;
    font-size: 30px;
    line-height: 50px;
    color: #ff0;
    text-align: center;
    margin: 0 0 73px;
    padding:0 200px
}

@media screen and (max-width: 1200px) {
    .presentation-equipe .title {
        padding:0
    }
}

@media screen and (max-width: 768px) {
    .presentation-equipe .title {
        font-size: 15px;
        line-height:25px
    }
}

.presentation-equipe .number {
    font-weight: 900;
    font-size: 400px;
    line-height: 330px;
    color: #ff0;
    text-align: center;
    margin:75px 0 0
}

@media screen and (max-width: 768px) {
    .presentation-equipe .number {
        font-size: 258px;
        line-height: normal;
        margin:30px 0 0
    }
}

.presentation-equipe .number-title {
    font-weight: 300;
    font-size: 50px;
    line-height: 70px;
    color: #fff;
    text-align:center
}

@media screen and (max-width: 768px) {
    .presentation-equipe .number-title {
        font-size: 30px;
        line-height:40px
    }
}

.presentation-equipe .number-title strong {
    font-weight: 700;
    font-style:italic
}

.presentation-equipe .text {
    padding:73px 0 100px
}

@media screen and (max-width: 768px) {
    .presentation-equipe .text {
        padding:36px 0 80px
    }
}

.presentation-equipe .text p {
    font-weight: 300;
    font-size: 20px;
    line-height: 20px;
    color: #ff0;
    text-align:center
}

@media screen and (max-width: 768px) {
    .presentation-equipe .text p {
        font-size: 15px;
        line-height:20px
    }
}

.presentation-equipe .text p strong {
    font-weight: 700;
    font-size: 30px;
    line-height:40px
}

@media screen and (max-width: 768px) {
    .presentation-equipe .text p strong {
        font-size: 20px;
        line-height:25px
    }
}

.presentation-equipe .separator {
    height:137px
}

@media screen and (max-width: 768px) {
    .presentation-equipe .separator {
        height:90px
    }
}

.presentation-equipe .separator--light {
    height:78px
}

@media screen and (max-width: 768px) {
    .presentation-equipe .separator--light {
        height:90px
    }
}

.team {
    background: linear-gradient(180deg, #000 8%, #fff 0);
    padding:130px 0 287px
}

@media screen and (max-width: 1200px) {
    .team {
        background:linear-gradient(180deg, #000 10%, #fff 0)
    }
}

@media screen and (max-width: 991px) {
    .team {
        background:linear-gradient(180deg, #000 4%, #fff 0)
    }
}

@media screen and (max-width: 768px) {
    .team {
        background: linear-gradient(180deg, #000 5%, #fff 0);
        padding:70px 0 150px
    }
}

.team .title-slide-up {
    text-align:center
}

.team .title-slide-up div {
    display: inline-block;
    margin-right:15px
}

.team .title-slide-up .h2 {
    font-weight: 900;
    font-size: 60px;
    color: #ff0;
    text-align: center;
    text-transform:uppercase
}

@media screen and (max-width: 991px) {
    .team .title-slide-up .h2 {
        font-size:40px
    }
}

.team--grid {
    padding-top:123px
}

@media screen and (max-width: 768px) {
    .team--grid {
        padding-top:57px
    }
}

.team--grid--desktop {
    display:block
}

@media screen and (max-width: 991px) {
    .team--grid--desktop {
        display:none
    }
}

.team--grid--mobile {
    display:none
}

@media screen and (max-width: 991px) {
    .team--grid--mobile {
        display:block
    }
}

.team--grid .custom-row {
    margin-right: -8px;
    margin-left:-8px
}

.team--grid .custom-col {
    padding:0 8px 16px
}

.team--grid .member-block {
    position: relative;
    cursor:pointer
}

.team--grid .member-block:after {
    content: "";
    width: 100%;
    height: 100%;
    background: #ff0 0 0 no-repeat padding-box;
    mix-blend-mode: multiply;
    opacity: 1;
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    transition:.3s ease-in-out
}

.team--grid .member-block img {
    width:100%
}

.team--grid .member-block .content {
    position: absolute;
    bottom: 18px;
    left:20px
}

.team--grid .member-block .content .name {
    font-weight: 400;
    font-size: 14px;
    color: #ff0;
    margin:0
}

@media screen and (max-width: 991px) {
    .team--grid .member-block .content .name {
        font-size:12px
    }
}

.team--grid .member-block .content .job {
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    margin:0
}

@media screen and (max-width: 991px) {
    .team--grid .member-block .content .job {
        font-size:12px
    }
}

.team--grid .member-block[aria-expanded=true]:after {
    display:block
}

.team--grid .member-block[aria-expanded=true] .content {
    display:none
}

.team--grid .collapse-content {
    background: #ff0;
    padding: 30px 16px 20px;
    position: relative;
    margin-bottom:16px
}

@media screen and (max-width: 991px) {
    .team--grid .collapse-content {
        padding:52px 16px 42px
    }
}

.team--grid .collapse-content .close-desc {
    position: absolute;
    top: 10px;
    right: 30px;
    cursor:pointer
}

@media screen and (max-width: 768px) {
    .team--grid .collapse-content .close-desc {
        right:15px
    }
}

.team--grid .collapse-content p {
    font-weight: 300;
    font-size: 14px;
    color:#000
}

@media screen and (max-width: 991px) {
    .team--grid .collapse-content p {
        font-size:12px
    }
}

.team--grid .collapse-content p strong {
    font-weight:700
}

.team--grid .word-block {
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 100%;
    position: relative;
    cursor:pointer
}

@media screen and (max-width: 991px) {
    .team--grid .word-block {
        height:340px
    }
}

@media screen and (max-width: 768px) {
    .team--grid .word-block {
        height:220px
    }
}

.team--grid .word-block:hover .card-text {
    opacity:1
}

.team--grid .word-block .plus {
    margin-top:12px
}

.team--grid .word-block .word {
    font-weight: 900;
    font-size: 60px;
    color: #ff0;
    text-align: center;
    text-transform: uppercase;
    margin:0
}

@media screen and (max-width: 1400px) {
    .team--grid .word-block .word {
        font-size:40px
    }
}

@media screen and (max-width: 991px) {
    .team--grid .word-block .word {
        font-size:36px
    }
}

@media screen and (max-width: 768px) {
    .team--grid .word-block .word {
        font-size:25px
    }
}

.team--grid .word-block .word strong {
    font-weight:900
}

.team--grid .word-block--1 .word {
    font-weight: 300;
    letter-spacing:10px
}

.team--grid .word-block--2 .word {
    font-weight: 700;
    font-style:italic
}

.team--grid .word-block--4 .word {
    font-weight: 300;
    text-transform:capitalize
}

.team--grid .word-block--4 .word strong {
    font-size:100px
}

@media screen and (max-width: 768px) {
    .team--grid .word-block--4 .word strong {
        font-size: 30px;
        font-weight:300
    }
}

.team--grid .word-block .card-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ff0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 105px;
    opacity: 0;
    transition:all .4s ease-in
}

@media screen and (max-width: 1400px) {
    .team--grid .word-block .card-text {
        padding:15px 30px
    }
}

@media screen and (max-width: 991px) {
    .team--grid .word-block .card-text {
        padding:15px
    }
}

.team--grid .word-block .card-text p {
    font-weight: 300;
    line-height: 24px;
    font-size: 14px;
    color: #000;
    text-align:center
}

@media screen and (max-width: 991px) {
    .team--grid .word-block .card-text p {
        font-size: 12px;
        line-height:normal
    }
}

.model {
    background: #000;
    padding: 363px 0 305px;
    position:relative
}

@media screen and (max-width: 768px) {
    .model {
        padding:105px 0 100px
    }
}

.model .separator {
    height: 274px;
    position: absolute;
    left: 50%;
    top:-137px
}

@media screen and (max-width: 768px) {
    .model .separator {
        height: 72px;
        top:-36px
    }
}

.model .title-slide-up {
    margin-bottom:32px
}

@media screen and (max-width: 768px) {
    .model .title-slide-up {
        margin-bottom:48px
    }
}

.model .title-slide-up .h2 {
    font-weight: 300;
    font-size: 100px;
    line-height: 110px;
    font-style: italic;
    color:#ff0
}

@media screen and (max-width: 768px) {
    .model .title-slide-up .h2 {
        font-size: 32px;
        line-height:35px
    }
}

.model .title-slide-up .h2 strong {
    font-weight: 900;
    font-style:normal
}

.model .text {
    margin-bottom:69px
}

.model .text p {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    color:#ff0
}

@media screen and (max-width: 768px) {
    .model .text p {
        font-size: 12px;
        line-height:18px
    }
}

.model .card-yellow {
    background: #ff0;
    margin-bottom: 35px;
    padding: 15px;
    height: 119px;
    display: flex;
    align-items: center;
    justify-content:center
}

@media screen and (max-width: 768px) {
    .model .card-yellow {
        height:103px
    }
}

.model .card-yellow .content p {
    font-weight: 300;
    font-size: 14px;
    line-height: 20px;
    color: #000;
    text-align: center;
    margin-bottom:0
}

@media screen and (max-width: 768px) {
    .model .card-yellow .content p {
        font-size: 15px;
        line-height:20px
    }
}

.model .card-yellow .content .title {
    font-weight: 700;
    font-size: 30px;
    line-height: 20px;
    text-transform: uppercase;
    color: #000;
    margin-bottom:11px
}

@media screen and (max-width: 768px) {
    .model .card-yellow .content .title {
        font-size: 20px;
        line-height: 20px;
        margin-bottom:7px
    }
}

.join {
    background: #ff0;
    padding:342px 0 306px
}

@media screen and (max-width: 768px) {
    .join {
        padding:101px 0
    }
}

.join .track-text {
    -webkit-animation: scroll 40s linear infinite;
    animation: scroll 40s linear infinite;
    display: flex;
    width: 11200px;
    margin-bottom:97px
}

@media screen and (max-width: 768px) {
    .join .track-text {
        margin-bottom:72px
    }
}

.join .track-text p {
    font-weight: 900;
    font-size: 100px;
    line-height: 80px;
    color: #000;
    margin:0
}

@media screen and (max-width: 991px) {
    .join .track-text p {
        font-size: 50px;
        line-height:normal
    }
}

@media screen and (max-width: 768px) {
    .join .text {
        padding:0 20px
    }
}

.join .text p {
    font-weight: 400;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color: #000;
    margin-bottom:94px
}

@media screen and (max-width: 768px) {
    .join .text p {
        font-size: 12px;
        line-height: 18px;
        margin-bottom:60px
    }
}

.join .email {
    font-weight: 900;
    font-size: 60px;
    line-height: 70px;
    text-align: center;
    display: block;
    width: 100%;
    color:#000
}

@media screen and (max-width: 768px) {
    .join .email {
        font-size: 42px;
        line-height:normal
    }
}

.presentation-customers {
    padding: 250px 0 266px;
    background: #000;
    position:relative
}

@media screen and (max-width: 768px) {
    .presentation-customers {
        padding:34px 0 136px
    }
}

.presentation-customers .text {
    margin-bottom: 100px;
    padding:0 40px
}

@media screen and (max-width: 1200px) {
    .presentation-customers .text {
        padding:0
    }
}

.presentation-customers .text p {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color: #4bc3f4;
    text-align:center
}

@media screen and (max-width: 768px) {
    .presentation-customers .text p {
        font-size: 15px;
        line-height:normal
    }
}

.presentation-customers .content {
    margin-top:45px
}

@media screen and (max-width: 768px) {
    .presentation-customers .content {
        margin-top:100px
    }
}

.presentation-customers .content h2 {
    font-weight: 700;
    font-size: 50px;
    line-height: 50px;
    color: #4bc3f4;
    text-align: right;
    margin-bottom:68px
}

@media screen and (max-width: 768px) {
    .presentation-customers .content h2 {
        font-size: 20px;
        line-height: normal;
        margin-bottom:27px
    }
}

.presentation-customers .content .cta-svg {
    margin: unset;
    float:right
}

.presentation-customers .separator {
    height:138px
}

@media screen and (max-width: 768px) {
    .presentation-customers .separator {
        height:72px
    }
}

.presentation-customers .separator--bottom {
    position: absolute;
    left: 50%;
    bottom:-69px
}

@media screen and (max-width: 768px) {
    .presentation-customers .separator--bottom {
        bottom:-36px
    }
}

.customers {
    padding: 146px 0 157px;
    background:#fff
}

.customers .title-slide-up {
    text-align:center
}

.customers .title-slide-up div {
    display: inline-block;
    margin-right:15px
}

.customers .title-slide-up .h2 {
    font-weight: 900;
    font-size: 60px;
    color: #4bc3f4;
    text-align: center;
    margin:0
}

@media screen and (max-width: 768px) {
    .customers .title-slide-up .h2 {
        font-size: 40px;
        line-height:normal
    }
}

.customers .accordion {
    margin-top: 70px;
    padding: 111px 0;
    border-top: 5px solid #4bc3f4;
    border-bottom: 7px solid #4bc3f4;
    position:relative
}

@media screen and (max-width: 768px) {
    .customers .accordion {
        margin-top:50px
    }
}

.customers .accordion .accordion-item {
    border:0
}

.customers .accordion .cta-container {
    position: absolute;
    z-index: 9998;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: -54px;
    border: 25px solid #fff;
    border-radius:50px
}

@media screen and (max-width: 768px) {
    .customers .accordion .cta-container {
        border: 18px solid #fff;
        bottom:-37px
    }
}

.customers .accordion .cta-container .cta-svg {
    cursor: pointer;
    display:none
}

.customers .accordion .cta-container .show-load-more {
    display:flex
}

.customers .accordion .grid-customers {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-column-gap: 80px;
    justify-items: center;
    align-items:center
}

@media screen and (max-width: 991px) {
    .customers .accordion .grid-customers {
        grid-column-gap: 40px;
        grid-template-columns:repeat(3, 1fr)
    }
}

.blog {
    padding: 200px 0 150px;
    background:#000
}

@media screen and (max-width: 768px) {
    .blog {
        padding:15px 0 80px
    }
}

.blog .filters {
    margin-bottom:158px
}

@media screen and (max-width: 991px) {
    .blog .filters {
        margin-bottom: 98px;
        padding-top:34px
    }
}

.blog .filters a {
    font-weight: 300;
    font-size: 11px;
    color: #fff;
    margin-right: 23px;
    transition:color .3s ease-in-out
}

@media screen and (max-width: 991px) {
    .blog .filters a {
        display: block;
        font-size: 15px;
        margin:0 0 17px
    }
}

.blog .filters a:hover {
    color: #ff5472;
    text-decoration:none
}

.blog .filters .active {
    font-weight:700
}

.blog .articles .row .separator {
    margin: 72px 0 97px;
    height:83px
}

@media screen and (max-width: 991px) {
    .blog .articles .row .separator {
        display:none
    }
}

.blog .articles .row:nth-child(3) .separator {
    display:none
}

@media screen and (max-width: 991px) {
    .blog .articles .row .post {
        margin-bottom:136px
    }
}

.blog .articles .row .post--img {
    width: 100%;
    height: 361px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position:50%
}

.blog .articles .row .post h3 {
    font-weight: 900;
    font-size: 20px;
    color: #fff;
    margin:23px 0 30px
}

@media screen and (max-width: 991px) {
    .blog .articles .row .post h3 {
        font-size: 20px;
        margin:23px 0 15px
    }
}

.blog .articles .row .post--excerpt p {
    font-weight: 300;
    font-size: 20px;
    color:#fff
}

@media screen and (max-width: 991px) {
    .blog .articles .row .post--excerpt p {
        font-size:16px
    }
}

.blog .articles .row .post .date {
    font-weight: 700;
    font-size: 11px;
    color: #fff;
    text-transform:capitalize
}

@media screen and (max-width: 991px) {
    .blog .articles .row .post .date {
        font-size:12px
    }
}

.blog .pagination {
    margin-top: 249px;
    display: flex;
    justify-content:center
}

@media screen and (max-width: 991px) {
    .blog .pagination {
        margin-top:0
    }
}

.blog .pagination .arrow-pagination {
    width: 14px;
    height: 16px;
    background-color: #fff;
    display: inline-block;
    position: relative;
    top:2px
}

.blog .pagination .arrow-pagination--left {
    -webkit-clip-path: polygon(100% 100%, 100% 0, 0 50%);
    clip-path: polygon(100% 100%, 100% 0, 0 50%);
    position: relative;
    left:-10px
}

.blog .pagination .arrow-pagination--right {
    -webkit-clip-path: polygon(0 0, 0 100%, 100% 50%);
    clip-path:polygon(0 0, 0 100%, 100% 50%)
}

.blog .pagination .page-numbers {
    font-weight: 300;
    font-size: 20px;
    color:#fff
}

@media screen and (max-width: 768px) {
    .blog .pagination .page-numbers {
        font-size:16px
    }
}

.blog .pagination .page-numbers span {
    margin:0 10px
}

.blog .pagination .current {
    font-weight:700
}

.single {
    padding-bottom:187px
}

@media screen and (max-width: 991px) {
    .single {
        padding-bottom:136px
    }
}

.single--header {
    padding:90px 0 150px
}

@media screen and (max-width: 991px) {
    .single--header {
        padding:90px 0
    }
}

.single--header .title {
    font-weight: 900;
    font-size: 65px;
    color: #000;
    text-align: center;
    text-transform:uppercase
}

@media screen and (max-width: 1200px) {
    .single--header .title {
        font-size:40px
    }
}

@media screen and (max-width: 768px) {
    .single--header .title {
        display: none;
        font-size:15px
    }
}

.single .wp-block-columns {
    margin:75px 0
}

@media screen and (max-width: 991px) {
    .single .wp-block-columns {
        margin:35px 0
    }
}

.single h2 {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color: #000;
    margin:0 0 40px
}

@media screen and (max-width: 768px) {
    .single h2 {
        font-size: 20px;
        line-height: 28px;
        margin:0 0 16px
    }
}

.single p {
    font-weight: 300;
    font-size: 16px;
    color:#000
}

@media screen and (max-width: 768px) {
    .single p {
        font-size:12px
    }
}

.single img {
    max-width: 100%;
    height:auto
}

.single a, .single a:hover {
    color:#ff5472
}

.single video {
    width: 100%;
    height:auto
}

.page-simple {
    padding: 100px 0;
    background:#fff
}

.page-simple h2 {
    font-weight: 700;
    font-size: 40px;
    color: #000;
    margin:0 0 40px
}

@media screen and (max-width: 768px) {
    .page-simple h2 {
        font-size: 20px;
        margin:0 0 16px
    }
}

.page-simple h3 {
    font-weight: 700;
    font-size: 30px;
    color: #000;
    margin:0 0 20px
}

@media screen and (max-width: 768px) {
    .page-simple h3 {
        font-size: 20px;
        margin:0 0 16px
    }
}

.page-simple h4 {
    font-weight: 700;
    font-size: 20px;
    color: #000;
    margin:0 0 10px
}

@media screen and (max-width: 768px) {
    .page-simple h4 {
        font-size: 18px;
        margin:0 0 10px
    }
}

.page-simple p {
    font-weight: 300;
    font-size: 17px;
    color:#000
}

@media screen and (max-width: 768px) {
    .page-simple p {
        font-size:12px
    }
}

.page-simple img {
    max-width: 100%;
    height:auto
}

.page-simple a, .page-simple a:hover {
    color:#ff5472
}

.header {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    background: #000;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content:center
}

.header--video {
    cursor:none
}

.header--video .play {
    cursor: pointer;
    display:none
}

@media screen and (max-width: 768px) {
    .header--video .play {
        display:block
    }
}

.header--video .play img {
    display: block;
    margin:0 auto 28px
}

.header--video .play p {
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    color:#fff
}

@media screen and (max-width: 768px) {
    .header--video .video-container {
        display:none
    }
}

.header--video .video-container .video-home {
    width: 100%;
    height: calc(100vh - 300px);
    position: relative;
    top:50px
}

.header--video .video-container .video-home--desktop {
    display: block;
    cursor:url(../../img/play-video.png) 128 128, pointer
}

@media screen and (max-width: 768px) {
    .header--video .video-container .video-home--desktop {
        display:none
    }
}

.header--video .video-container .video-home--desktop--unmuted {
    cursor:url(../../img/stop-video.png) 128 128, pointer
}

.header--video .video-container .video-home--mobile {
    display:none
}

@media screen and (max-width: 768px) {
    .header--video .video-container .video-home--mobile {
        display:block
    }
}

.header-page {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content:center
}

.header-page h1 {
    font-weight: 900;
    font-size: 143px;
    text-align: center;
    text-transform:uppercase
}

@media screen and (max-width: 991px) {
    .header-page h1 {
        font-size:70px
    }
}

.header-page--black {
    background:#000
}

.header-page--black h1 {
    font-weight: 900;
    font-size: 90px;
    line-height: 120px;
    text-align: center;
    text-transform: uppercase;
    color: #fff;
    margin-top:50px
}

@media screen and (max-width: 991px) {
    .header-page--black h1 {
        font-size: 30px;
        line-height:normal
    }
}

.header-page--green {
    background:#00e5ad
}

.header-page--green h1 {
    color:#fff
}

.header-page--yellow {
    background:#ff0
}

.header-page--yellow h1 {
    color:#000
}

.header-page--blue {
    background:#4bc3f4
}

.header-page--blue h1 {
    color:#fff
}

.header-page--white {
    background:#fff
}

.header-page--white h1 {
    color: #000;
    font-weight: 900;
    line-height: 300px;
    font-size: 380px;
    text-align: center;
    text-transform:uppercase
}

@media screen and (max-width: 1200px) {
    .header-page--white h1 {
        font-size: 250px;
        line-height:200px
    }
}

@media screen and (max-width: 991px) {
    .header-page--white h1 {
        font-size: 124px;
        line-height:normal
    }
}

.header-page--white h1 span {
    display: block;
    font-size: 100px;
    line-height:170px
}

@media screen and (max-width: 991px) {
    .header-page--white h1 span {
        font-size: 32px;
        line-height:normal
    }
}

.separator {
    position: relative;
    background: #fff;
    z-index: 9997;
    height:148px
}

@media screen and (max-width: 991px) {
    .separator {
        height:72px
    }
}

.separator:after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    height: 100%;
    width: 2px;
    z-index:1
}

@media screen and (max-width: 991px) {
    .separator--desktop {
        display:none
    }
}

.separator--pink:after {
    background:#ff5472
}

.separator--green {
    background: #fff;
    height:221px
}

.separator--green:after {
    background:#00e5ad
}

.separator--white {
    background:transparent
}

.separator--white:after {
    background:#fff
}

.separator--yellow {
    background:transparent
}

.separator--yellow:after {
    background:#ff0
}

.separator--blue {
    background:transparent
}

.separator--blue:after {
    background:#4bc3f4
}

.cta-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 51px;
    height: 51px;
    border-radius: 50px;
    margin: auto;
    z-index: 9997;
    background: #ff5472;
    transition:background-color .2s ease-in-out
}

@media screen and (max-width: 768px) {
    .cta-svg {
        width: 30px;
        height:30px
    }
}

.cta-svg svg {
    fill: #fff;
    transition:fill .2s ease-in-out
}

@media screen and (max-width: 768px) {
    .cta-svg svg {
        width:15px
    }
}

.cta-svg--pink {
    background:#fff
}

.cta-svg--pink svg {
    fill:#ff5472
}

.cta-svg--green {
    background:#00e5ad
}

.cta-svg--green svg {
    fill:#fff
}

.cta-svg--blue {
    background:#4bc3f4
}

.cta-svg--blue svg {
    fill:#fff
}

.cta-svg--hover-green:hover {
    background:#00e5ad
}

.cta-svg--hover-green:hover svg {
    fill:#fff
}

.cta-svg--hover-blue:hover {
    background:#4bc3f4
}

.cta-svg--hover-yellow:hover {
    background:#ff0
}

.cta-svg--hover-yellow:hover svg {
    fill:#000
}

.arrow {
    position: absolute;
    bottom: 50px;
    left: 50%;
    -webkit-transform: translate(-50%);
    transform:translate(-50%)
}

@media screen and (max-width: 768px) {
    .arrow svg {
        width:23px
    }
}

.arrow--pink svg {
    fill:#ff5472
}

.arrow--white svg {
    fill:#fff
}

@-webkit-keyframes slide-up {
    0% {
        -webkit-transform: translateY(200px);
        transform:translateY(200px)
    }

    to {
        -webkit-transform: translateY(0);
        transform:translateY(0)
    }
}

@keyframes slide-up {
    0% {
        -webkit-transform: translateY(200px);
        transform:translateY(200px)
    }

    to {
        -webkit-transform: translateY(0);
        transform:translateY(0)
    }
}

.title-slide-up div {
    overflow: hidden;
    -webkit-animation-delay: .1s;
    animation-delay:.1s
}

.header-article-block {
    margin-bottom:46px
}

@media screen and (max-width: 991px) {
    .header-article-block {
        margin-bottom:26px
    }
}

.header-article-block .col-text {
    display: flex;
    flex-direction: column;
    justify-content:space-between
}

.header-article-block .intro {
    padding:84px 0 0
}

@media screen and (max-width: 768px) {
    .header-article-block .intro {
        padding:0
    }
}

.header-article-block .intro p {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    color:#000
}

@media screen and (max-width: 768px) {
    .header-article-block .intro p {
        font-size: 20px;
        line-height:28px
    }
}

.header-article-block .hashtags .return {
    font-weight: 700;
    font-size: 20px;
    color: #000;
    text-align: right;
    margin-bottom: 44px;
    display:block
}

@media screen and (max-width: 991px) {
    .header-article-block .hashtags .return {
        display:none
    }
}

.header-article-block .hashtags .categories-link p {
    text-align: right;
    margin-bottom:7px
}

@media screen and (max-width: 768px) {
    .header-article-block .hashtags .categories-link p {
        display: inline-block;
        margin-right:7px
    }
}

.header-article-block .hashtags .categories-link p a {
    font-weight: 300;
    font-size: 17px;
    color: #000;
    transition:color .2s ease-in-out
}

@media screen and (max-width: 991px) {
    .header-article-block .hashtags .categories-link p a {
        font-size:10px
    }
}

.header-article-block .hashtags .categories-link p a:hover {
    color:#ff5472
}

.header-article-block .hashtags .title {
    font-weight: 900;
    font-size: 25px;
    color: #000;
    text-transform: uppercase;
    display: none;
    text-align: left;
    margin:0
}

@media screen and (max-width: 768px) {
    .header-article-block .hashtags .title {
        display:block
    }
}

.header-article-block h1 {
    font-weight: 900;
    font-size: 40px;
    line-height: 50px;
    color: #000;
    text-align: right;
    margin:0
}

@media screen and (max-width: 991px) {
    .header-article-block h1 {
        font-size: 25px;
        line-height:40px
    }
}

@media screen and (max-width: 768px) {
    .header-article-block .desktop {
        display:none
    }
}

.header-article-block .mobile {
    display: none;
    text-align:left
}

@media screen and (max-width: 768px) {
    .header-article-block .mobile {
        display:block
    }
}

.header-article-block .img-content {
    background-size: cover;
    background-position: 50%;
    background-repeat: no-repeat;
    height:60vh
}

@media screen and (max-width: 768px) {
    .header-article-block .img-content {
        height: 40vh;
        margin:31px 0
    }
}

@-webkit-keyframes opcacityLogo {
    0% {
        opacity:1
    }

    49% {
        opacity:1
    }

    50% {
        opacity:0
    }

    75% {
        opacity:1
    }

    to {
        opacity:0
    }
}

@keyframes opcacityLogo {
    0% {
        opacity:1
    }

    49% {
        opacity:1
    }

    50% {
        opacity:0
    }

    75% {
        opacity:1
    }

    to {
        opacity:0
    }
}

@-webkit-keyframes changeBackgroundColorFix {
    0% {
        background-color:#000
    }

    25% {
        background-color:#000
    }

    50% {
        background-color:#7bbcdb
    }

    55% {
        background-color:#82d7b2
    }

    65% {
        background-color:#cb8f8e
    }

    70% {
        background-color:#ff5472
    }

    75% {
        background-color:#000
    }

    to {
        background-color:#000
    }
}

@keyframes changeBackgroundColorFix {
    0% {
        background-color:#000
    }

    25% {
        background-color:#000
    }

    50% {
        background-color:#7bbcdb
    }

    55% {
        background-color:#82d7b2
    }

    65% {
        background-color:#cb8f8e
    }

    70% {
        background-color:#ff5472
    }

    75% {
        background-color:#000
    }

    to {
        background-color:#000
    }
}

@-webkit-keyframes slideSectionColor {
    0% {
        background-color: #00e5ad;
        width:0
    }

    25% {
        background-color: #76e9bb;
        width:0
    }

    50% {
        background-color: #90ec90;
        width:100%
    }

    75% {
        background-color: #ff0;
        width:0
    }

    to {
        width:0
    }
}

@keyframes slideSectionColor {
    0% {
        background-color: #00e5ad;
        width:0
    }

    25% {
        background-color: #76e9bb;
        width:0
    }

    50% {
        background-color: #90ec90;
        width:100%
    }

    75% {
        background-color: #ff0;
        width:0
    }

    to {
        width:0
    }
}

@-webkit-keyframes show {
    0% {
        opacity:1
    }

    99% {
        opacity:1
    }

    to {
        opacity:0
    }
}

@keyframes show {
    0% {
        opacity:1
    }

    99% {
        opacity:1
    }

    to {
        opacity:0
    }
}

.transition {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    z-index: 9999;
    -webkit-animation: show 2s;
    animation:show 2s
}

.transition .animation {
    width: 100%;
    height: 100%;
    position:relative
}

.transition .animation .background-fix {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-animation: changeBackgroundColorFix 2s;
    animation: changeBackgroundColorFix 2s;
    z-index:5
}

.transition .animation .background-moove {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    -webkit-animation: slideSectionColor 2s;
    animation: slideSectionColor 2s;
    z-index:8
}

.transition .animation .logo {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -webkit-animation: opcacityLogo 2s;
    animation: opcacityLogo 2s;
    z-index:6
}

.transition .animation .logo svg {
    fill: #fff
}
/* <on masque la langue courante */

#miaou li.current-lang {
    display: none !important;
    padding: 2em;
    list-style: none !important;
}

#miaou li.lang-item {
    background: #FF5472 !important;
    padding: 0.5em;
    border-radius: 6px;
    list-style: none !important;
    margin-top: 26px;
    margin-bottom: 2px;
    margin-left: -4px;
}

#miaou:after {
    content: "";
    right: 50%;
    margin-top: 50px;
    width: 0;
    height: 0;
    border-top: 10px solid #FF5472;
    border-right: 13px solid transparent;
    border-left: 13px solid transparent;
}