@charset "utf-8";
/* CSS Document */

.wrap {
    margin: 0 auto;
    width: 880px;
}

.page-modelisation .wrap {
    margin: 0 auto;
    width: 1130px;
}


.presentation .wrap,
.page-hebergement .wrap,
.page-modelisation .en-tete .wrap,
.page-notre-agence .en-tete .wrap,
.page-web .en-tete .wrap,
.page-mobile .en-tete .wrap,
.references .wrap {
    margin: 0 auto;
    width: 1030px;
}

.listing-blog .wrap,
.presentation-modelisation .wrap,
.presentation-web .wrap,
.presentation-mobile .wrap {
    margin: 0 auto;
    width: 1200px;
}

.page-contact .wrap,
.zone-formulaire-recrutement .wrap {
    margin: 0 auto;
    width: 530px;
}

#menu-header a:hover {
    text-decoration: underline;
}

body .mejs-container {
    background: none;
}

@media all {

    /*************************************** HEADER ****************************************************/
    header {
        padding: 18px 3%;
        max-height: 101px;
        position: relative;
        background: #fff;
        z-index: 9;
        align-items: center;
        -webkit-align-items: center;
    }

    nav {
        margin-left: auto
    }

    .nav-is-stuck #header {
        /* z-index: 99;*/
        animation: stickAnim 0.5s;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
        padding: 10px 3%;
    }

    .nav-is-stuck #header #logo svg {
        width: 200px;
    }

    .call {
        margin-left: 30px;
        cursor: pointer
    }

    .num_call {
        visibility: hidden;
        display: none;
    }

    .img_call.selected+.num_call {
        visibility: visible;
        padding-left: 5px;
    }

    .call a {
        color: #021622
    }

    /*** MENU ***/
    nav {
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 400
    }

    nav li {
        display: inline;
        padding: 0 5px;
    }

    nav a {
        color: #252525;
        display: inline-block;
        padding: 13px 18px;
        position: relative;
    }

    nav li:last-child a {
        background: #49c2d1;
        color: #fff;
        border: 2px solid #49c2d1
    }

    nav li:last-child a:hover {
        background: transparent;
        color: #49c2d1;
    }

    header nav a::after {
        content: "";
        width: 0;
        background: #49c2d1;
        position: absolute;
        bottom: 5px;
        left: 20px;
        height: 2px;
    }

    header nav a:hover::after,
    header nav .current_page_item a::after {
        width: 20px;
    }

    header nav li:last-child a::after {
        content: none;
    }


    /*************************************** 404 ****************************************************/
    .page-404 {
        position: relative;
        font: 400 35px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #151a2f;
    }

    .custom-header-media {
        height: calc(100vh - 101px);
        max-height: 100%;
        overflow: hidden;
    }

    .wp-custom-header {
        height: 100%
    }

    .page-404 .wp-custom-header img,
    .diaporama .custom-header-media img {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }

    .page-404 .wp-custom-header video,
    .diaporama .custom-header-media video {
        width: 100%;
        height: auto;
        overflow: hidden;
        background: url(../jpg/images-creations-agence-web-mobile.jpg) no-repeat scroll 0 0 / cover;
    }

    .page-404 .main-erreur {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url(../jpg/images-creations-agence-web-mobile.jpg);
        color: #fff;
        text-align: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .page-404 .main-erreur .wrap {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    .page-404 h1 {
        font: 400 123px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        background: url(../png/bison-blanc.png) no-repeat top center;
        padding-top: 20px;
        border-bottom: 1px solid #fff;
        display: inline-block
    }

    .page-404 h2 {
        font-weight: 400;
        font-size: 35px;
        margin: 15px 0 80px;
    }

    .page-404 p {
        margin-bottom: 35px;
    }

    .page-404 li {
        display: inline-block;
        margin: 0 10px
    }

    .page-404 li a {
        display: inline-block;
        margin-top: 30px;
        text-transform: uppercase;
        font: 300 12px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        background: #49c2d1;
        padding: 12px 25px;
        font-weight: 400;
        color: #fff;
        position: relative;
        border: 2px solid #49c2d1
    }

    .page-404 li a:hover {
        color: #49c2d1;
        background: transparent;
    }



    /*************************************** ACCUEIL ****************************************************/
    /* diaporama */
    .diaporama {
        position: relative;
        font: 400 48px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        color: #fff;
    }

    .custom-header-media {
        height: calc(100vh - 101px);
        max-height: 100%;
        overflow: hidden;
    }

    .diaporama .wp-custom-header img {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }

    .site-branding {
        letter-spacing: -1px;
        position: absolute;
        top: 45%;
        height: 200px;
        transform: translateY(-50%) translateX(-50%);
        left: 50%;
        /* right: 0; margin-left: auto; margin-right: auto; */
        width: 400px
    }

    .titre-agence {
        display: inline-block;
        /*background: url(images/bison-images-creations.png) no-repeat right top 0;*/
        padding: 20px 110px 0 0;
        ;
    }

    .titre-web,
    .titre-mobile {
        font-size: 88px;
        line-height: 88px
    }

    .titre-web {
        margin-top: -12px;
    }

    .titre-web::after,
    .titre-mobile::after {
        content: '';
        display: block;
        clear: both
    }

    .titre-mobile {
        position: absolute;
        bottom: -20px;
        right: 0;
    }

    .letter-box {
        vertical-align: middle;
        float: left;
        overflow: hidden;
    }

    .js .slideInLeft {
        animation-name: slideInLeft;
    }

    .js .animated {
        animation-duration: 1.3s;
        animation-fill-mode: both;
        animation-timing-function: cubic-bezier(.86, 0, .07, 1);
        animation-delay: .1s;
    }

    .space {
        width: 20px;
        display: inline-block;
    }

    /* logos */
    .logos {
        background: #f4f4f4;
    }

    .logos .flex,
    .references .flex {
        justify-content: center;
        align-items: center;
    }

    .logos .flex>*,
    .references .flex>* {
        margin: 0 35px;
    }

    .logos .flex img,
    .references li img {
        -webkit-filter: grayscale(100%);
        filter: grayscale(100%);
    }

    /* presentation */
    .presentation {
        padding: 100px 0 85px;
        text-align: center;
        font: 400 21px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
    }

    .presentation h1 {
        font-weight: 600;
        font-size: 40px;
        line-height: 43px;
        margin-bottom: 30px
    }

    .presentation .wrap>* {
        text-align: left;
    }

    .presentation .wrap h1,
    .presentation .wrap p:last-child {
        text-align: center
    }

    .presentation .lien-bleu {
        margin-top: 60px;
    }

    .lien-bleu,
    .category-recrutement .more-link {
        font: 400 12px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: swap;
        text-transform: uppercase;
        display: inline-block;
        border: 1px solid #49c2d1;
        padding: 12px 17px;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    .lien-bleu::before,
    .category-recrutement .more-link::before {
        content: '';
        z-index: -1;
        position: absolute;
        top: 50%;
        right: 100%;
        margin: -15px 0 0 1px;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #49c2d1;
        -webkit-transform-origin: left;
        transform-origin: left;
        -webkit-transform: scale3d(1, 2, 1);
        transform: scale3d(1, 2, 1);
        -webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
        transition: transform 0.3s, opacity 0.3s;
        -webkit-transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
        transition-timing-function: cubic-bezier(0.7, 0, 0.9, 1);
    }

    .lien-bleu:hover::before,
    .category-recrutement .more-link:hover::before {
        -webkit-transform: scale3d(9, 9, 1);
        transform: scale3d(9, 9, 1);
    }

    .lien-bleu:hover,
    .category-recrutement .more-link:hover {
        color: #fff;
        border: 1px solid #fff
    }

    .lien-bleu:hover a {
        color: #fff;
    }

    /* blocs métiers */
    /*.nos-metiers { overflow: hidden;}*/
    .nos-metiers .points {
        background: url(../png/bkg-points.png);
        margin-bottom: 60px;
        margin-right: 10%;
        padding: 12px 12px 0 0;
        position: relative;
        font-size: 14px;
        font-weight: 300
    }

    .nos-metiers .bloc {
        background: #f6f6f6;
        padding: 80px 200px;
        justify-content: space-between;
        align-items: center;
    }

    .nos-metiers .points:nth-child(even) {
        margin-right: 0;
        margin-left: 10%;
        padding: 12px 0 0 12px
    }

    .nos-metiers .points:first-child::before {
        content: url(../png/tampon-ic.png);
        position: absolute;
        width: 120px;
        right: 90px;
        top: -60px;
        /* -ms-transform: rotate(7deg); -webkit-transform: rotate(7deg); transform: rotate(7deg);*/
    }

    .nos-metiers .flex {
        flex-wrap: nowrap;
    }

    .nos-metiers .titre {
        font: 700 55px/45px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        margin-bottom: 20px;
        color: #021622;
        position: relative;
        padding-left: 40px;
        word-wrap: break-word;
        -webkit-hyphens: auto;
        -moz-hyphens: auto;
        -ms-hyphens: auto;
        -o-hyphens: auto;
        hyphens: auto;
    }

    .nos-metiers .titre::before,
    .page-contact .en-tete h1::before {
        content: "_";
        color: #49c2d1;
        position: absolute;
        top: -4px;
        left: 0
    }

    .nos-metiers h2 {
        font: 400 26px/27px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        color: #021622;
        margin-bottom: 15px;
    }

    .nos-metiers p {
        line-height: 22px
    }

    .nos-metiers .bloc>* {
        width: 43%
    }

    .nos-metiers .metier-mobile .img-metier,
    .nos-metiers .metier-hebergement .img-metier {
        order: 1;
        -webkit-order: 1;
    }

    .nos-metiers .metier-mobile .texte-metier,
    .nos-metiers .metier-hebergement .texte-metier {
        order: 0;
        -webkit-order: 0;
    }

    .nos-metiers .lien-bleu,
    .category-recrutement .more-link {
        margin-top: 25px
    }

    .points:first-child .img-metier,
    .points:nth-child(3) .img-metier {
        text-align: right;
    }

    .points:first-child .img-metier img {
        margin-top: -180px;
    }

    .points:nth-child(2) .img-metier img {
        margin-top: -180px;
    }

    .points:nth-child(3) .img-metier img {
        margin-top: -130px;
    }

    .page-contact .bandeau {
        height: 450px;
        overflow: hidden;
        position: relative;
    }

    .page-contact .bandeau img {
        top: 50%;
        position: absolute;
        transform: translateY(-50%);
        left: 0;
    }

    /* livres blanc */
    .livres-blanc {
        background: url(../png/bkg-livres-blanc.png) center center;
        color: #fff;
        text-align: center;
        padding: 70px 0
    }

    .livres-blanc h2 {
        font: 400 42px/45px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        margin-bottom: 45px;
    }

    .livres-blanc li {
        display: inline-block;
        margin: 0 18px;
    }

    .livres-blanc li a {
        text-transform: uppercase;
        font-size: 17px;
        display: inline-block;
        background: #49c2d1;
        padding: 15px 60px;
        font-weight: 400;
        color: #fff;
        position: relative;
        border: 2px solid #49c2d1
    }

    .livres-blanc li a:hover {
        color: #49c2d1;
        background: transparent;
    }


    /* réalisations */
    .realisations {
        margin-top: 75px;
    }

    .realisations .titre,
    .references .titre {
        font: 400 42px/42px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        margin-bottom: 50px;
        color: #021622;
        text-align: center
    }

    .realisations .flex {
        flex-direction: row-reverse;
        align-items: flex-start;
        overflow: hidden
    }

    .realisations .flex .bloc:first-child,
    .realisations .flex .bloc:nth-child(3) {
        width: 40%
    }

    .realisations .flex .bloc:nth-child(2) {
        width: 20%
    }

    .realisations .flex .bloc:first-child img,
    .realisations .flex .bloc:nth-child(2) img,
    .realisations .flex .bloc:nth-child(3) img:first-child {
        width: 100%
    }

    .realisations .flex .bloc:nth-child(3) figure:nth-child(2),
    .realisations .flex .bloc:nth-child(3) figure:nth-child(3) {
        width: 50%;
        float: left;
    }

    .realisations figure {
        position: relative;
        overflow: hidden;
    }

    .realisations figure img {
        object-fit: cover;
        width: 100%;
    }

    .realisations figcaption {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 100%;
        color: #fff;
        opacity: 0;
        background: rgba(21, 26, 47, 0.6);
    }

    .realisations figure:hover figcaption {
        opacity: 1;
    }

    .realisations figcaption .intro {
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        position: relative;
        text-align: center;
        font-size: 18px;
    }

    .realisations figcaption strong {
        color: #fff;
        font: 400 25px/28px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        display: block;
    }

    /* projet */
    .demarrons {
        background: url(../png/bkg-livres-blanc.png) center center;
        color: #fff;
        padding: 65px 5%;
        position: relative;
        text-align: right;
        overflow: hidden
    }

    .demarrons::before {
        content: "";
        background: url(../png/bison-blanc.png) no-repeat center;
        background-size: 50px 34px;
        position: absolute;
        width: 50px;
        height: 34px;
        margin-left: auto;
        margin-right: auto;
        left: 0;
        right: 0
    }

    .demarrons a {
        display: inline-block;
        font: 400 25px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        color: #fff;
        padding-right: 60px;
        position: relative;
    }

    .demarrons a::before {
        position: absolute;
        width: 24px;
        height: 21px;
        content: url(../svg/fleche.svg);
        right: 0;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
    }

    .demarrons a:hover {
        padding-right: 0
    }

    .demarrons a:hover::before {
        right: -100%
    }

    /*************************************** PAGE DE BASE ****************************************************/

    /***** fil d'ariane ****/
    #breadcrumbs,
    .yoast-breadcrumbs {
        padding: 20px 0;
        font-size: 12px;
        color: #c5c5c5;
        font-weight: 300
    }

    #breadcrumbs div,
    .yoast-breadcrumbs div {
        float: left;
        padding: 0 2px;
    }

    #breadcrumbs a,
    .yoast-breadcrumbs a {
        color: #c5c5c5;
    }


    /** contenu **/
    .page-base .en-tete {
        padding: 160px 0;
        font-size: 26px;
        line-height: 31px;
    }

    .page-base .en-tete h1,
    .page-landing-gut h1,
    .page-hebergement .en-tete h1,
    .page-contact .en-tete h1,
    .page-modelisation .en-tete h1,
    .page-mobile .en-tete h1,
    .page-notre-agence .en-tete h1,
    .page-web .en-tete h1 {
        font: 700 55px/55px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        margin-bottom: 15px;
    }

    .page-base .en-tete ul,
    .page-hebergement .en-tete ul,
    .page-modelisation .en-tete ul,
    .page-notre-agence .en-tete ul,
    .page-web .en-tete ul,
    .page-mobile .en-tete ul {
        margin-top: 25px;
    }

    .page-base .en-tete li,
    .page-hebergement .en-tete li,
    .page-modelisation .en-tete li,
    .page-web .en-tete li,
    .page-mobile .en-tete li {
        display: inline-block;
        margin: 0 25px 0 0
    }

    .page-base .en-tete li a {
        display: inline-block;
        font-weight: 400;
        background: #fff;
        text-transform: uppercase;
        padding: 6px 26px;
        font-size: 12px;
        position: relative;
        border: 2px solid #fff;
    }

    .page-base .en-tete li a:hover {
        background: rgba(255, 255, 255, 0.4);
        border: 2px solid #49c2d1;
    }

    .page-base article {
        padding: 50px 0
    }

    .page-base article .titre {
        display: block;
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: swap;
        text-align: center;
        margin-bottom: 45px;
    }

    .page-blog article h2,
    .page-web h2,
    .page-base article h2,
    .page-hebergement article h2,
    .page-modelisation h2,
    .page-mobile h2,
    .page-contact.landing h2 {
        color: #021622;
        font-size: 20px;
        font-weight: 400;
        line-height: 27px;
        margin-bottom: 35px;
        position: relative;
    }

    .page-blog article h2::after,
    .article-cases h2::after,
    .page-mobile article h2::after,
    .page-base article h2::after,
    .page-hebergement article h2::after,
    .page-modelisation h2::after,
    .page-web h2::after {
        bottom: -15px;
    }

    .page-base article h3 {
        color: #53bdcd;
        font-size: 18px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 10px;
    }

    .page-blog article h3,
    .article-cases h3 {
        color: #53bdcd;
        line-height: 30px;
        margin-bottom: 10px;
        font-size: 24px;
        font-weight: bold;
    }

    article .lien {
        text-align: center;
        width: 100%;
    }

    article .lien a {
        display: inline-block;
        margin-top: 30px;
        text-transform: uppercase;
        font-size: 12px;
        background: #49c2d1;
        padding: 10px 35px;
        font-weight: 400;
        color: #fff;
        position: relative;
        border: 2px solid #49c2d1
    }

    article .lien a:hover {
        color: #49c2d1;
        background: transparent;
    }

    article p {
        line-height: 24px;
    }

    article li {
        line-height: 24px;
    }

    .page article li::before {
        content: "\2022\ ";
        color: #021622;
        padding-right: 5px;
        font-weight: 700;
    }

    .page article .gform_wrapper li::before {
        content: none;
    }

    .alignright {
        float: right;
        margin-left: 30px;
    }

    .alignleft {
        float: left;
        margin-right: 30px;
    }

    .aligncenter {
        display: block;
        margin: 0 auto;
    }

    .fond_bleu {
        margin-top: 50px;
        padding: 60px 90px;
        background-color: #49c2d1;
        color: white;
    }

    .fond_bleu h2 {
        color: white !important;
    }

    .fond_bleu h2::after {
        background: white !important;
    }

    .fond_bleu h2.has-text-align-center::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .fond_bleu h2.has-text-align-right::after {
        left: initial;
        right: 0;
    }

    blockquote {
        position: relative;
        margin-top: 50px;
        margin-left: 110px;
        padding: 55px;
        background-color: #f6f6f6;
    }

    blockquote::before {
        content: '“';
        position: absolute;
        left: -30px;
        top: 80px;
        color: #49c2d1;
        font: 400 200px/42px 'Abhaya Libre', Arial, Helvetica, sans-serif
    }

    blockquote p {
        padding-bottom: 30px;
        border-bottom: 4px solid #49c2d1;
        font: 400 38px/42px 'Abhaya Libre', Arial, Helvetica, sans-serif
    }

    blockquote p:last-child::after {
        content: '”';
        color: #49c2d1;
        margin-left: 5px;
    }


    /*************************************** PAGE EXPERTISE - 4 métiers ****************************************************/
    .page-agence {
        position: relative;
    }

    .page-agence .nos-metiers {
        height: calc(100vh - 90px);
        max-height: 100%;
        overflow: hidden;
    }

    .page-agence .nos-metiers figure {
        height: 100%;
        width: 25%;
        position: relative;
        overflow: hidden;
    }

    .page-agence .nos-metiers figure img {
        width: 100%;
        object-fit: cover;
        height: 100%;
        opacity: 1;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s
    }

    .page-agence .nos-metiers figure:hover img {
        opacity: 0.2;
        -webkit-transition: opacity 0.35s;
        transition: opacity 0.35s
    }

    .page-agence .nos-metiers figcaption {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .page-agence .nos-metiers figcaption>div {
        position: absolute;
        padding: 0 10%;
        top: 30%;
        text-align: center;
        width: 100%;
    }

    .page-agence .nos-metiers .titre {
        padding: 0;
        margin-bottom: 50px;
    }

    .page-agence .nos-metiers .titre::before {
        top: inherit;
        bottom: -20px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto
    }

    .page-agence .nos-metiers figcaption p {
        color: #021622;
        opacity: 0;
        -webkit-transition: opacity 0.2s, -webkit-transform 0.35s;
        transition: opacity 0.2s, transform 0.35s;
        -webkit-transform: translate3d(0, 40px, 0);
        transform: translate3d(0, 40px, 0);
        font: 400 26px/28px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .page-agence .nos-metiers figcaption a {
        color: #021622;
    }

    .page-agence .nos-metiers figure:hover figcaption p {
        opacity: 1;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-transition-delay: 0.05s;
        transition-delay: 0.05s;
        -webkit-transition-duration: 0.35s;
        transition-duration: 0.35s;
    }

    .page-agence article {
        padding: 50px 0 140px;
    }

    .page-agence h1 {
        text-align: center;
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        margin-bottom: 20px;
    }

    .page-agence h1+p {
        text-align: center;
        margin: 0 auto;
        max-width: 5600px;
        font: 400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
    }

    .page-template-page-expertise .listing-blog {
        padding-bottom: 0;
    }

    .page-agence .nos-metiers figcaption a.cta {
        text-transform: uppercase;
        font-size: 15px;
        display: inline-block;
        background: #49c2d1;
        margin-top: 30px;
        padding: 15px 40px;
        font-family: 'Montserrat', Arial, Helvetica, sans-serif;
        font-weight: 400;
        color: #fff;
        position: relative;
        border: 2px solid #49c2d1
    }

    .page-agence .nos-metiers figcaption a.cta:hover {
        color: #49c2d1;
        background: transparent;
    }

    /*************************************** PAGE MODELISATION ****************************************************/
    .page-modelisation .en-tete .bkg {
        position: absolute;
        background: url(../png/modelisation-3d-images-creations-page.png) no-repeat top;
        width: 644px;
        height: 600px;
        right: -230px;
        bottom: -320px
    }

    .page-modelisation article,
    .page-web article,
    .page-mobile article {
        padding: 80px 0 35px;
    }

    .page-modelisation .titre,
    .page-web .titre,
    .page-mobile .titre {
        text-align: center;
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        margin-bottom: 20px;
    }

    .page-modelisation .titre+p,
    .page-web .titre+p,
    .page-mobile .titre+p {
        text-align: center;
        margin: 0 auto;
        max-width: 590px;
        font: 400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .page-web .titre+p,
    .page-mobile .titre+p {
        max-width: 860px;
    }

    .page-modelisation .intro.anim,
    .page-web .intro.anim,
    .page-mobile .intro.anim {
        padding: 170px 0 0;
        overflow: hidden;
    }

    .page-modelisation .intro .bloc:first-child,
    .page-web .intro .bloc:first-child,
    .page-mobile .intro .bloc:first-child {
        width: 52%;
        position: relative
    }

    .page-mobile .intro .bloc:first-child img {
        width: 100%;
    }

    .page-modelisation .intro .bloc:first-child::before,
    .page-web .intro .bloc:first-child::before,
    .page-mobile .intro .bloc:first-child::before {
        content: "modéli-";
        position: absolute;
        left: -25px;
        top: -122px;
        font: 700 190px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #04141e;
    }

    .page-web .intro .bloc:first-child::before {
        content: "sites"
    }

    .page-mobile .intro .bloc:first-child::before {
        content: "appli-"
    }

    .page-modelisation .intro img,
    .page-modelisation .projets img,
    .page-modelisation .presentation-modelisation .wrap img,
    .page-modelisation .video img,
    .page-notre-agence .section-1 .bloc:first-child img,
    .page-notre-agence .section-2 .bloc:nth-child(2) img,
    .page-web .intro img,
    .page-web .projets img,
    .page-web .presentation-web .wrap img,
    .page-web .video img,
    .page-mobile .video img {
        width: 100%;
    }

    .page-modelisation .intro .bloc:nth-child(2),
    .page-web .intro .bloc:nth-child(2),
    .page-mobile .intro .bloc:nth-child(2) {
        width: 48%;
        /* max-width: 625px;*/
        padding: 0 10% 0 5%;
    }

    .page-modelisation h2 {
        font-size: 35px;
        line-height: 38px;
        max-width: 290px;
        position: relative
    }

    .page-modelisation article p,
    .page-modelisation .presentation-modelisation,
    .page-web article p,
    .page-mobile article p,
    .page-web .presentation-web,
    .page-mobile .presentation-mobile {
        font-size: 17px;
        line-height: 28px;
        text-align: justify;
    }


    .page-modelisation .presentation-modelisation,
    .page-web .presentation-web,
    .page-mobile .presentation-mobile {
        position: relative;
        padding: 150px 0 95px;
        overflow: hidden;
    }

    .page-modelisation .presentation-modelisation::before,
    .page-web .presentation-web::before {
        content: "sation";
        position: absolute;
        right: -25px;
        top: 0;
        font: 700 190px/143px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #04141e;
    }

    .page-web .presentation-web::before {
        content: "web";
    }

    .page-modelisation .presentation-modelisation .wrap,
    .page-web .presentation-web .wrap,
    .page-mobile .presentation-mobile .wrap {
        justify-content: space-between;
    }

    .page-modelisation .presentation-modelisation .wrap>*,
    .page-web .presentation-web .wrap .bloc {
        width: 47%;
    }

    .page-modelisation .presentation-modelisation h2 {
        text-align: right;
        margin-left: auto;
        max-width: 400px;
        margin-bottom: 75px;
    }

    .page-modelisation .presentation-modelisation h2::after {
        right: 0;
        left: inherit;
    }

    .page-modelisation .presentation-modelisation .bloc:nth-child(2) img,
    .page-web .presentation-web .bloc:nth-child(2) img {
        margin-bottom: 55px;
    }

    .page-modelisation .presentation-modelisation .bloc:nth-child(2) p+p,
    .page-web .presentation-web .bloc:nth-child(2) p+p {
        max-width: 420px;
    }

    article .video,
    .page-modelisation .projets .bloc:first-child {
        margin-bottom: 90px;
        position: relative;
    }

    .page-web .video .btn-video,
    .page-modelisation .projets .bloc:first-child .btn-video {
        z-index: 9;
        content: url(../png/play.png);
        width: 48px;
        height: 48px;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .page-web .video a,
    .page-modelisation .projets .bloc:first-child a {
        display: block;
        width: 100%;
        height: 100%;
    }

    .page-web .video a:hover,
    .page-modelisation .projets .bloc:first-child a:hover {
        background: #021622;
    }

    .page-modelisation .video a:hover img,
    .page-web .video a:hover img,
    .page-modelisation .projets .bloc:first-child a img {
        opacity: 0.90;
    }

    article .galerie-modelisation {
        margin-bottom: 90px;
        position: relative;
        overflow: hidden;
    }

    .page article .galerie-modelisation li::before {
        content: none;
    }

    .page article .galerie-modelisation li {
        line-height: inherit;
    }

    .page-modelisation .methodologie {
        padding-bottom: 90px;
    }

    .page-modelisation .methodologie .flex {
        justify-content: space-between;
        align-items: flex-start;
    }

    .page-modelisation .methodologie .flex>* {
        width: 22%;
    }

    .page-modelisation .methodologie h2 {
        max-width: 135px;
        word-wrap: break-word;
    }

    .page-modelisation .methodologie .bloc {
        font-size: 20px;
        color: #021622;
        line-height: 26px;
        font-weight: 400;
        position: relative;
        padding-top: 90px;
    }

    .page-modelisation .methodologie .bloc p {
        text-align: left;
    }

    .page-modelisation .methodologie .bloc strong {
        font-weight: 400;
        color: #53bdcd;
    }

    .page-modelisation .methodologie .bloc::before {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 55px;
    }

    .page-modelisation .methodologie .bloc:nth-of-type(2)::before {
        content: "1."
    }

    .page-modelisation .methodologie .bloc:nth-of-type(3)::before {
        content: "2."
    }

    .page-modelisation .methodologie .bloc:nth-of-type(4)::before {
        content: "3."
    }

    .page-modelisation .projets {
        padding-bottom: 60px;
        justify-content: space-between;
    }

    .page-modelisation .projets>* {
        width: 48%;
    }

    .page-modelisation .projets .bloc:nth-child(2) {
        width: 48%;
        padding: 100px 2% 0;
    }

    .page-modelisation .projets .bloc:nth-child(2) p {
        max-width: 570px;
    }

    .page-modelisation .projets .bloc:nth-child(2) h2 {
        margin-left: -150px;
        max-width: 585px;
        margin-bottom: 60px;
    }

    .page-modelisation .projets .bloc:nth-child(2) h2::after {
        bottom: -33px;
        left: 26%;
    }

    .page-modelisation article p.lien,
    .page-web article p.lien,
    .page-mobile article p.lien {
        text-align: center;
    }

    .page-modelisation article p.lien a,
    .page-web article p.lien a,
    .page-mobile article p.lien a {
        letter-spacing: 2px;
        font-size: 20px;
        padding: 18px 40px
    }

    .page-modelisation .realisations .titre,
    .page-web .realisations .titre {
        margin-bottom: 45px;
    }


    /*************************************** PAGE HEBERGEMENT ****************************************************/
    .page-hebergement .en-tete,
    .page-modelisation .en-tete,
    .page-notre-agence .en-tete,
    .page-web .en-tete,
    .page-mobile .en-tete {
        background: #f6f6f6;
        padding: 150px 0;
        font-size: 26px;
        line-height: 31px;
        position: relative;
    }

    .page-hebergement .en-tete .wrap,
    .page-modelisation .en-tete .wrap,
    .page-notre-agence .en-tete .wrap,
    .page-web .en-tete .wrap,
    .page-mobile .en-tete .wrap {
        position: relative;
    }

    .page-hebergement .en-tete p,
    .page-modelisation .en-tete p,
    .page-notre-agence .en-tete p {
        max-width: 530px
    }

    .page-hebergement .en-tete li a,
    .page-modelisation .en-tete li a,
    .page-notre-agence .en-tete li a,
    .rencontrons-nous a,
    .page-web .en-tete li a,
    .page-mobile .en-tete li a {
        display: inline-block;
        font-weight: 400;
        background: #49c2d1;
        color: #fff;
        text-transform: uppercase;
        padding: 6px 26px;
        font-size: 12px;
        position: relative;
        border: 2px solid #49c2d1;
    }

    .page-hebergement .en-tete li a:hover,
    .page-modelisation .en-tete li a:hover,
    .page-notre-agence .en-tete li a:hover,
    .rencontrons-nous a:hover,
    .page-web .en-tete li a:hover,
    .page-mobile .en-tete li a:hover {
        background: transparent;
        color: #49c2d1;
    }

    .page-hebergement .en-tete .bkg {
        position: absolute;
        background: url("../png/serveur-site-ic2-1.png") no-repeat top;
        width: 505px;
        height: 500px;
        right: -130px;
        bottom: -320px
    }

    .page-hebergement article {
        padding: 110px 0 80px
    }

    .page-hebergement .flex {
        justify-content: space-between;
    }

    .page-hebergement .flex .bloc {
        width: 46%;
        margin-bottom: 60px;
    }

    .page-hebergement .flex .bloc p {
        text-align: justify;
        font-size: 17px;
        line-height: 28px;
    }

    .page-hebergement article h2 {
        font: 400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .page-hebergement article h2 strong {
        font: 400 30px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        display: block;
    }

    .page-hebergement .flex .bloc:nth-child(4) {
        background: #f6f6f6;
        padding: 55px 60px;
    }

    .page-hebergement .bloc li {
        position: relative;
        padding-left: 45px;
    }

    .page-hebergement .bloc li::before {
        content: url(../png/checkbox.png);
        height: 20px;
        width: 24px;
        position: absolute;
        left: 0;
        top: 0;
    }

    .page-hebergement .bloc li strong {
        font-weight: 400
    }

    .page-hebergement .bloc li+li {
        margin-top: 20px
    }

    .page-hebergement .bloc li a {
        border-bottom: 1px solid #49c2d1;
    }

    .page-hebergement article .lien a {
        font-size: 20px;
        letter-spacing: 2px;
        padding: 18px 35px;
    }

    .page-hebergement .logiciels {
        background: #f6f6f6;
        padding: 45px 3%;
    }

    .page-hebergement .logiciels ul {
        justify-content: center;
        align-items: center
    }

    .page-hebergement .logiciels li {
        margin: 10px 25px;
    }

    .serenite {
        padding: 110px 0;
        background: url(../png/bkg-serenite.png) no-repeat;
        background-size: cover;
    }

    .serenite .bloc,
    .adresse .bloc {
        background: #fff;
        width: 460px;
        margin-left: auto;
        margin-right: 15%;
        position: relative;
        padding: 110px 50px 70px;
        color: #021622;
        font: 400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .serenite .bloc .titre,
    .adresse .bloc .titre {
        position: absolute;
        font: 400 55px 'king_basil_literegular', Arial, Helvetica, sans-serif;
        font-display: auto;
        top: 30px;
        left: -60px;
    }

    .serenite .bloc p,
    .adresse .bloc p {
        position: relative
    }

    .serenite .bloc p::after,
    .adresse .bloc p:nth-of-type(2)::after {
        content: "";
        width: 30px;
        background: #53bdcd;
        position: absolute;
        bottom: -20px;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        height: 2px;
    }



    /*************************************** PAGE WEB ****************************************************/
    .page-web .en-tete .bkg {
        position: absolute;
        background: url(../png/realisation-site-images-creations.png) no-repeat top;
        width: 797px;
        height: 600px;
        right: -265px;
        bottom: -365px
    }

    .page-web .en-tete p {
        max-width: 410px
    }

    .page-web .en-tete li:first-child a,
    .page-mobile .en-tete li:first-child a {
        background: #fff;
        border: 2px solid #fff;
        color: #49c2d1;
    }

    .page-web .en-tete li:first-child a:hover,
    .page-mobile .en-tete li:first-child a:hover {
        background: transparent;
        border: 2px solid #49c2d1;
    }

    .page-web .presentation-web h2,
    .page-mobile .presentation-mobile h2 {
        text-align: right;
        margin-left: auto;
        max-width: 420px;
        margin-bottom: 35px;
    }

    .page-web .presentation-web .bloc:nth-child(2) h2,
    .page-mobile .presentation-mobile .bloc:nth-child(2) h2 {
        text-align: left;
        margin-left: 0;
    }

    .page-web .presentation-web .bloc:first-child h2::after,
    .page-mobile .presentation-mobile .bloc:first-child h2::after {
        right: 0;
        left: inherit;
    }

    .page-web .presentation-web .bloc:nth-child(2) h2::after,
    .page-mobile .presentation-mobile .bloc:nth-child(2) h2::after {
        left: 0;
        right: inherit;
    }

    .page-web h2,
    .page-mobile h2 {
        font-size: 35px;
        line-height: 38px;
        max-width: 360px;
        position: relative
    }

    /* zone de textes */
    .main-texte-libre {
        justify-content: space-between;
        margin-bottom: 80px;
    }

    .main-texte-libre .bloc:first-child {
        width: 43%
    }

    .main-texte-libre .bloc:first-child h2 {
        max-width: 100%;
    }

    .main-texte-libre .bloc:nth-child(2) {
        width: 53%
    }

    .main-texte-libre+.main-texte-libre {
        margin-top: 80px;
    }



    /*************************************** PAGE MOBILE ****************************************************/
    .page-mobile .en-tete .bkg {
        position: absolute;
        background: url(../png/application-mobile-images-creations.png) no-repeat top;
        width: 797px;
        height: 600px;
        right: -265px;
        bottom: -365px
    }

    .page-mobile .intro.anim {
        align-items: flex-start;
    }

    .page-mobile .en-tete p {
        max-width: 420px
    }

    .page-mobile .intro .bloc:nth-child(2) {
        position: relative;
    }

    .page-mobile .intro .bloc:nth-child(2) p,
    .page-web .intro .bloc:nth-child(2) p,
    .page-modelisation .intro .bloc:nth-child(2) p {
        max-width: 420px;
    }

    .page-mobile .intro .bloc:nth-child(2)::after {
        content: "cation";
        position: absolute;
        right: -30px;
        bottom: -200px;
        font: 700 190px/143px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #04141e;
    }

    .page-mobile .presentation-mobile {
        padding: 0 0 95px;
    }

    .page-mobile .presentation-mobile .bloc:first-child {
        margin-top: 80px;
    }

    .page-mobile .presentation-mobile .wrap .bloc {
        width: 45%;
    }


    /*************************************** PAGE PRESENTATON AGENCE ****************************************************/





    .references {
        padding-bottom: 100px;
    }

    .rencontrons-nous {
        text-align: center;
        padding: 150px 5%;
        background: url(../jpg/bkg-rencontrons-nous.jpg) no-repeat center;
        background-size: cover;
        font: 400 30px/43px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .rencontrons-nous p{
        color: white;
    }

    .rencontrons-nous a {
        font: 400 20px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        letter-spacing: 2px;
        padding: 18px 40px;
        margin-top: 50px;
    }

    .rencontrons-nous a:hover {
        background-color: #fff;
    }



    /*************************************** PAGE CONTACT ****************************************************/
    .page-contact .en-tete {
        text-align: center;
        padding: 110px 0 25px;
        margin: 0 auto;
        width: 880px;
    }

    .page-contact.landing .en-tete {
        text-align: left;
    }

    .page-contact.landing h2:after {
        content: "";
        width: 20px;
        background: #53bdcd;
        position: absolute;
        bottom: -15px;
        left: 0;
        height: 2px;
    }

    .page-contact .en-tete h1 {
        position: relative;
        margin-bottom: 45px;
        color: #101937;
        padding-left: 40px;
        display: inline-block;
    }

    .page-contact.landing .en-tete h1 {
        text-align: center;
        padding-left: 0;
    }

    .page-contact.landing .en-tete h1::before {
        display: none;
    }

    .page-contact .en-tete p {
        font: 400 26px/27px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .page-contact.landing .en-tete p {
        font: 300 18px 'Montserrat', Arial, Helvetica, sans-serif;
    }

    .page-contact .en-tete .tel-contact {
        font-size: 22px;
        color: #53bdcd;
        margin: 35px 0 10px;
        position: relative;
    }

    .page-contact.landing .en-tete .tel-contact {
        text-align: center;
    }

    .page-contact .en-tete .tel-contact svg {
        width: 20px;
        height: 20px;
        fill: #53bdcd;
        position: absolute;
        margin-left: -26px;
        margin-top: 3px;
    }

    .page-contact .en-tete .reseaux-sociaux {
        text-align: right;
        margin: 0 30px;
    }

    .page-contact article,
    .zone-formulaire-recrutement {
        padding: 65px 0;
        background: #f6f6f6;
    }

    body .gform_wrapper .gform_footer input.button,
    body .gform_wrapper .gform_footer input[type=submit] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        width: auto;
        border: 0;
        display: block;
        margin: 0 auto;
        margin-top: 15px;
        text-transform: uppercase;
        background: #49c2d1;
        padding: 12px 35px;
        font: 400 12px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #fff;
        position: relative;
        border: 2px solid #49c2d1
    }

    body .gform_wrapper .gform_footer input.button:hover,
    body .gform_wrapper .gform_footer input[type=submit]:hover {
        color: #49c2d1;
        background: transparent;
        cursor: pointer;
    }

    .page-contact input[type=text],
    .page-contact input[type=email],
    .page-contact input[type=submit] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
    }

    input[type=email]::-webkit-input-placeholder,
    input[type=text]::-webkit-input-placeholder,
    textarea::-webkit-input-placeholder {
        color: #021622;
    }

    input[type=email]::-moz-placeholder,
    input[type=text]::-moz-placeholder,
    textarea::-moz-placeholder {
        color: #021622;
    }

    input[type=email]:-ms-input-placeholder,
    input[type=text]:-ms-input-placeholder,
    textarea:-ms-input-placeholder {
        color: #021622;
    }

    input[type=email]:-moz-placeholder,
    input[type=text]:-moz-placeholder,
    textarea:-moz-placeholder {
        color: #021622;
    }

    .page-contact article .gform_wrapper input[type=email],
    .zone-formulaire-recrutement .gform_wrapper input[type=email],
    .page-contact article .gform_wrapper input[type=text],
    .zone-formulaire-recrutement .gform_wrapper input[type=text],
    .page-contact article .gform_wrapper textarea,
    .zone-formulaire-recrutement .gform_wrapper textarea,
	.afnic-template .gform_wrapper input[type=text],
	.afnic-template .gform_wrapper input[type=tel],
	.afnic-template .gform_wrapper input[type=email],
    .afnic-template .gform_wrapper textarea {
        border: 0;
        width: 100% !important;
        height: auto;
        padding: 15px 25px !important;
        background: #fff;
        margin-bottom: 15px;
        border-radius: 0;
        color: #021622;
        font: 400 20px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .zone-formulaire-recrutement .gform_wrapper select,
    article .gform_wrapper select {
        background: url(../png/bkg-select.png) no-repeat center right 20px #fff;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        border: 0;
        width: 100% !important;
        cursor: pointer;
        height: auto;
        padding: 15px 25px !important;
        margin-bottom: 15px;
        border-radius: 0;
        color: #021622;
        font: 400 20px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .afnic-template .gform_wrapper .top_label .gfield_label,
    .page-contact article .gform_wrapper .top_label .gfield_label,
    .zone-formulaire-recrutement .gform_wrapper .top_label .gfield_label {
        border: 0;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    article .gform_wrapper #extensions_message {
        display: block;
        font-size: 13px;
        text-align: center;
    }

    .ginput_container.ginput_recaptcha>div {
        margin: 0 auto;
        margin-top: 25px;
    }

    .zone-formulaire-recrutement p:last-of-type {
        font-size: 12px;
    }

    .gform_wrapper .gfield_required {
        color: #fff;
    }

    /* réglages génériques du Gravity */
    body .page-contact .gform_wrapper .top_label div.ginput_container,
    body .page-contact .gform_wrapper ul li.gfield {
        margin-top: 0;
    }

    body .gform_wrapper div.validation_error {
        display: none;
    }

    .adresse {
        padding: 100px 0;
        background: url(../png/bkg-adresse.png) no-repeat;
        background-size: cover;
    }

    .adresse .bloc {
        text-align: center;
        padding: 100px 50px 70px;
        width: 460px;
    }

    .adresse .bloc p:nth-of-type(2) {
        font-size: 18px;
        margin-top: 10px;
    }

    .adresse .bloc .titre {
        left: -95px;
        top: 20px;
    }



    /*************************************** DEMARRONS PROJET ****************************************************/
    .page-votre-projet {
        background: #49c2d1;
        height: calc(100vh - 119px);
        max-height: 100%;
        overflow: hidden;
        align-items: center;
    }

    .page-votre-projet h1 {
        font: 700 55px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        margin-bottom: 15px;
        color: #fff;
        text-align: center;
    }

    .page-votre-projet .gform_wrapper label.gfield_label {
        font: 300 26px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #021622;
        display: block;
        margin-bottom: 15px;
    }

    .page-votre-projet a {
        color: #021622;
    }

    .page-votre-projet article .gform_wrapper input[type=text],
    .page-votre-projet article .gform_wrapper textarea {
        border: 0;
        width: 100% !important;
        height: auto;
        padding: 15px 25px !important;
        background: #fff;
        margin-bottom: 15px;
        border-radius: 0;
        color: #a6a6a6;
        font: 300 20px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .page-votre-projet article .gform_wrapper textarea {
        height: 150px
    }

    /* fourchette de prix */
    .irs-from,
    .irs-to,
    .irs-single {
        background: #021622;
    }

    .irs-bar {
        border-bottom: 0;
        background: #021622;
        background: linear-gradient(to top, rgba(2, 22, 34, 1) 0%, rgba(2, 22, 34, 1) 100%);
    }

    .irs-slider {
        border: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
        box-shadow: none;
    }

    .irs-grid-text {
        color: #000;
    }

    .gform_wrapper li.gfield.gfield_error,
    .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {
        border: 0;
    }

    .page-votre-projet #gform_confirmation_message_2 a {
        color: #021622;
        text-decoration: underline
    }

    .page-votre-projet .image-choices-field .image-choices-choice-image-wrap {
        width: 120px;
        height: 95px;
        margin: 0 auto;
    }

    .page-votre-projet .image-choices-field .image-choices-choice-text {
        display: block;
    }

    .page-votre-projet .image-choices-field .image-choices-choice {
        width: 20%;
        margin: 0 !important;
        padding: 15px !important;
        border: 0;
    }

    .page-votre-projet .image-choices-field .image-choices-choice.image-choices-choice-selected {
        background: #021622;
        color: #fff;
    }

    .page-votre-projet .gform_wrapper .gf_progressbar_percentage span {
        display: none;
    }

    /* navigation des boutons */
    .page-votre-projet .gform_wrapper .gform_page_footer {
        border: 0;
        padding: 0;
    }

    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_previous_button,
    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_next_button,
    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_button {
        cursor: pointer;
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        background: #fff;
        border: 2px solid #fff;
        color: #49c2d1;
        display: inline-block;
        text-transform: uppercase;
        padding: 10px 26px;
        font: 400 12px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        position: relative;
    }

    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_previous_button:hover,
    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_next_button:hover,
    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_button:hover {
        color: #fff;
        background: transparent;
        border: 2px solid #fff;
    }

    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_next_button,
    .page-votre-projet .gform_wrapper .gform_page_footer .button.gform_button {
        float: right;
    }

    .page-votre-projet .gform_wrapper .gf_progressbar_wrapper h3.gf_progressbar_title {
        text-align: center;
    }

    .page-votre-projet .gform_wrapper .gf_progressbar {
        box-shadow: none;
        background: none;
    }

    .page-votre-projet .gform_wrapper .gf_progressbar_percentage {
        font-size: 10px !important;
        height: 15px;
    }

    .page-votre-projet .gform_wrapper .gf_progressbar:after {
        height: 15px;
        margin-top: -15px;
    }




    /*************************************** CATEGORIE ****************************************************/

    .listing-blog .en-tete,
    .page-blog .en-tete {
        background: #f6f6f6;
        padding: 85px 3%;
        text-align: center;
    }

    .listing-blog .en-tete h1,
    .page-blog .en-tete .titre,
    .participez .titre {
        font: 400 55px 'king_basil_literegular', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #021622;
        display: inline-block;
        position: relative;
    }

    .listing-blog .en-tete h1::after,
    .page-blog .en-tete .titre::after {
        content: "";
        background: url(../png/bison-blog.png) no-repeat center;
        background-size: 91px 62px;
        width: 91px;
        height: 62px;
        position: absolute;
        top: 2px;
    }

    .listing-blog h2.titre {
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #021622;
        margin-bottom: 5px;
        padding: 0 20px
    }

    .listing-blog h2.titre span.bluetxt {
        color: #53bdcd;
    }

    .liste-categorie {
        text-align: center;
        padding: 25px 0 50px;
    }

    .liste-categorie .searchandfilter li {
        display: inline-block;
        font: 400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        padding: 0 25px
    }

    .liste-categorie .searchandfilter li label {
        color: #021622;
        position: relative;
        cursor: pointer;
        padding: 0;
    }

    .liste-categorie li label::after {
        content: "";
        width: 0;
        background: #53bdcd;
        position: absolute;
        bottom: -7px;
        left: 0;
        height: 2px;
    }

    .liste-categorie li label:hover,
    .liste-categorie li.sf-option-active input[type="radio"]+label,
    .liste-categorie li input[checked=checked]+label {
        color: #53bdcd;
    }

    .liste-categorie li label:hover::after,
    .liste-categorie li.sf-option-active input[type="radio"]+label::after,
    .liste-categorie li input[checked=checked]+label::after {
        width: 20px;
    }

    .liste-categorie .searchandfilter input[type=radio] {
        appearance: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        opacity: 0;
    }

    .listing-blog .flex {
        align-items: flex-start;
    }

    .grid-sizer,
    .grid-item {
        width: 31%;
    }

    .grid-item {
        margin-bottom: 15px;
    }

    .gutter-sizer {
        width: 2%;
    }

    .content-blog {
        border: 1px solid #e6e9ed;
        padding: 30px 40px 40px;
    }

    .content-blog h2 {
        font-weight: 400;
        font-size: 16px;
        margin-bottom: 8px;
    }

    .content-blog h2 a {
        color: #021622;
    }

    .content-blog p {
        font-size: 12px;
        color: #53bdcd;
        font-weight: 300;
        position: relative;
    }

    .content-blog p a:hover {
        text-decoration: underline;
    }

    .content-blog p::after {
        content: "";
        width: 30px;
        background: #dadada;
        position: absolute;
        bottom: -13px;
        left: 0;
        height: 3px;
    }

    .listing-blog .pagination {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 30px;
    }

    .listing-blog .pagination .wp-pagenavi span.current,
    .listing-blog .pagination .wp-pagenavi a:hover {
        background-color: #53bdcd;
        color: #fff;
        border: 1px solid #53bdcd;
    }

    .listing-blog .pagination .wp-pagenavi a,
    .listing-blog .pagination .wp-pagenavi span {
        padding: 8px 5px;
        width: 40px;
        display: inline-block;
    }

    /*************************************** Bloc newsletter ****************************************************/
    .newsletter {
        margin-top: 50px;
        padding-top: 50px;
        padding-bottom: 50px;
        background: url(../png/bkg-newsletter-pattern.png) #49C2D1 center center;
    }

    .newsletter .col-6 {
        max-width: 600px;
        margin: auto;
        padding-left: 15px;
        padding-right: 15px;
    }

    .newsletter .gform_description,
    .newsletter .gform_confirmation_message {
        color: #FFF;
        font: 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
    }

    .newsletter .gform_wrapper.gravity-theme {
        margin: 0;
    }

    .newsletter .gform_wrapper.gravity-theme .gform_heading {
        margin-bottom: 20px;
    }

    .newsletter .gform_wrapper.gravity-theme .gform_body {
        width: 66%;
        display: inline-block;
    }

    .newsletter .gform_wrapper.gravity-theme span.gform_description {
        margin-bottom: 0;
    }

    .newsletter .gform_wrapper.gravity-theme .field_description_below .gfield_description:not(.validation_message) {
        color: #FFF;
        font: 300 12px Montserrat, Arial, Helvetica, sans-serif;
        padding-top: 8px;
    }

    .newsletter .gform_wrapper.gravity-theme input::placeholder {
        color: #000;
    }

    .newsletter .gform_wrapper.gravity-theme input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="image"]):not([type="file"]) {
        padding: 15px;
        border: none;
    }

    .newsletter .gform_wrapper.gravity-theme .gform_footer {
        position: relative;
        width: 33%;
        float: right;
        margin-top: 12px;
        padding: 0 0 0 20px;
    }

    .newsletter .gform_wrapper.gravity-theme .gform_footer::after {
        position: absolute;
        width: 24px;
        height: 21px;
        content: url(../svg/fleche.svg);
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
    }

    .newsletter .gform_wrapper.gravity-theme .gform_footer>input[type="submit"] {
        margin: 0;
        padding: 0;
        border: none;
        text-transform: none;
        font: 25px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        text-align: right;
    }

    .newsletter .gform_wrapper.gravity-theme .gform_footer>input[type="submit"]:hover {
        color: #fff;
    }

    @media all and (max-width: 555px) {
        .newsletter .gform_wrapper.gravity-theme .gform_body {
            width: 100%;
        }

        .newsletter .gform_wrapper.gravity-theme .gform_footer {
            width: 100%;
            float: none;
        }

        .newsletter .gform_wrapper.gravity-theme .gform_footer>input[type="submit"] {
            margin-left: auto;
            margin-right: 50px;
        }
    }

    /*************************************** ARTICLE BLOG ****************************************************/
    .page-blog article {
        padding: 25px 25px 60px;
    }

    .page-blog article h1 {
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        position: relative;
        margin-bottom: 55px;
        text-align: center
    }

    .page-blog article .lien-bleu {
        text-align: center
    }

    .page-blog article li,
    .article-blog li,
    .page-contact.landing li {
        padding-left: 15px;
        position: relative;
    }

    .page-contact.landing .reseaux-sociaux li {
        padding-left: 7px;
    }

    .page-blog article li::before,
    .article-blog li::before,
    .page-contact.landing li::before {
        position: absolute;
        left: 0;
        content: "\2022\ ";
        color: #49c2d1;
        font-weight: 700;
    }

    .page-blog article>p:first-of-type::first-letter {
        padding-top: 5px;
        color: #49c2d1;
        font-size: 600%;
        float: left;
        font-family: 'Abhaya Libre', Arial, Helvetica, sans-serif;
        line-height: .6;
        font-weight: normal;
    }

    .page-contact.landing .reseaux-sociaux li::before {
        display: none;
    }

    .single-post .fa-thumbs-up {
        display: none;
    }

    .single-post .hidden-xs {
        display: none;
    }



    .participez {
        background: url(../jpg/bkg-participez.jpg) no-repeat;
        background-size: cover;
        background-position: center;
        padding: 120px 0
    }

    .participez .titre {
        position: relative;
        padding-left: 50px;
    }

    .participez .titre::before {
        content: "_";
        color: #49c2d1;
        position: absolute;
        top: -20px;
        left: 0
    }

    .participez .textwidget>p {
        font: 400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
    }

    .participez a {
        display: inline-block;
        margin-top: 30px;
        text-transform: uppercase;
        font: 400 12px 'Montserrat', Arial, Helvetica, sans-serif;
        font-display: auto;
        background: #49c2d1;
        padding: 12px 35px;
        color: #fff;
        position: relative;
        border: 2px solid #49c2d1
    }

    .participez a:hover {
        color: #49c2d1;
        background: transparent;
    }

    .autres-pages {
        background: #f6f6f6;
        padding: 50px 0;
        font-size: 12px;
        font-weight: 400
    }

    .autres-pages .flex {
        justify-content: center
    }

    .autres-pages li {
        width: 50%
    }

    .autres-pages li+li {
        border-left: 1px solid #dadada;
    }

    .autres-pages strong {
        display: block;
        font: 600 40px/35px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        margin-bottom: 8px;
    }

    .autres-pages li:first-child {
        text-align: right
    }

    .autres-pages li a {
        color: #021622;
        display: block;
        padding: 50px 100px;
    }

    .autres-pages li a span {
        text-transform: uppercase;
        position: relative;
        display: block;
    }

    .autres-pages li:first-child a span::before {
        content: url(../svg/fleche-bleue.svg);
        width: 17px;
        height: 15px;
        position: absolute;
        -ms-transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        margin: 0 0 0 -30px;
    }

    .autres-pages li:nth-child(2) a span::after {
        content: url(../svg/fleche-bleue.svg);
        width: 17px;
        height: 15px;
        position: absolute;
        margin-left: 15px;
    }

    .autres-pages li a:hover {
        color: #fff;
        background: #49c2d1;
    }

    .autres-pages li a:hover span {
        color: #fff;
    }

    .autres-pages li:nth-child(2) a:hover span {
        padding-left: 30px;
    }

    .autres-pages li:first-child a:hover span {
        padding-right: 30px;
    }


    /*************************************** ARTICLE RECRUTEMENT *********************************************/
    .category-recrutement .liste-categorie h2 {
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #021622;
        margin-bottom: 5px;
    }

    .category-recrutement .liste-categorie h2 span.bluetxt {
        color: #53bdcd;
    }

    .category-recrutement .article-blog {
        background: #f6f6f6;
        width: 80%;
        padding: 50px;
        margin: 0 auto;
    }

    .category-recrutement .article-blog+.article-blog {
        margin-top: 50px;
    }

    .category-recrutement .article-blog h2 {
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #53bdcd;
        margin-bottom: 5px;
    }

    .category-recrutement .article-blog p {
        font-size: 16px;
        line-height: 22px;
    }


    /*************************************** PAGE CASES ****************************************************/
    .page-case h2.titre {
        font: 600 40px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        color: #021622;
        margin-bottom: 5px;
        padding: 0 20px
    }

    .page-case h2.titre span.bluetxt {
        color: #53bdcd;
    }

    .article-cases .en-tete img,
    .page-contact .bandeau img {
        width: 100%
    }

    .article-cases article {
        padding-bottom: 80px;
    }

    .article-cases h1 {
        font: 600 40px/35px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        text-align: center;
        color: #021622;
        margin-bottom: 35px;
        width: 880px;
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .article-cases h2,
    .page-blog article h2 {
        font-size: 28px;
        font-weight: bold;
        line-height: 36px;
        margin-bottom: 35px;
        position: relative;
    }

    .article-cases article .bloc,
    .article-cases .galerie-cases {
        margin-bottom: 35px;
    }

    .article-cases .renseignement-client {
        margin-bottom: 50px;
    }

    .article-cases article .renseignement-client li {
        line-height: 28px;
    }

    .article-cases article .bloc p {
        font-size: 17px;
        line-height: 28px;
    }

    .article-cases .galerie-cases img {
        width: 100%;
    }

    .article-cases article .bloc li {
        line-height: 28px;
        font-size: 17px;
    }

    .article-cases article .bloc li::before {
        content: "\2022\ ";
        color: #021622;
        padding-right: 5px;
        font-weight: 700;
    }

    /**.article-blog { padding: 35px 30px; background:#f2f2f2;}
	.article-blog + .article-blog { margin-top:35px;}
	.img-blog { float:left; margin-right:3%;}
	.texte-blog { overflow:auto;}
	.article-blog p.readmore a { margin-top:35px;}

	/* pagination */
    /**.pagination { margin-top:40px; text-align:center;}
	.pagination ul{display:table; margin:auto; border-collapse: separate; }
	.pagination li{display:table-cell; padding-right: 15px; width:55px; height:55px;}
	.pagination li span, .pagination li span.current, .pagination li a{ padding:12px 20px; border-radius:50%;  font-weight: 700; font-size: 20px; line-height:22px; text-align: center;}
	.pagination li a{ background:#f0eee6; color:#000;-webkit-transition: all 500ms ease-in-out; -o-transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;}
	.pagination li a:hover, .pagination li span, .pagination li span.current{background:#404040; color:#fff;}
	article .pagination li:before { content:none;}


	/* contact erreur */
    /**article .gform_wrapper .gfield_required, article .gform_wrapper div.validation_error, article .gform_wrapper .gfield_error .gfield_label, article .gform_wrapper .validation_message, .gform_wrapper li.gfield_error div.ginput_complex.ginput_container label, .gform_wrapper li.gfield_error ul.gfield_checkbox, .gform_wrapper li.gfield_error ul.gfield_radio { color:#ea0853;}
	.gform_wrapper li.gfield_error input[type=text], .gform_wrapper li.gfield_error input[type=url], .gform_wrapper li.gfield_error input[type=email], .gform_wrapper li.gfield_error input[type=tel], .gform_wrapper li.gfield_error input[type=number], .gform_wrapper li.gfield_error input[type=password], .gform_wrapper li.gfield_error textarea {border: 1px solid #dbdbdb;}
	.gform_wrapper li.gfield.gfield_error, .gform_wrapper li.gfield.gfield_error.gfield_contains_required.gfield_creditcard_warning {background-color: #f8f8f8;border-top: 1px solid #f3f3f3;border-bottom: 1px solid #f3f3f3;}
	.gform_wrapper div.validation_error { border:0;}

/*************************************** PIED DE PAGE ****************************************************/
    footer {
        padding: 35px 14% 35px 3%;
        font-size: 11px;
        align-items: center;
        position: relative;
        overflow: hidden
    }

    .reseaux-sociaux {}

    .reseaux-sociaux li {
        display: inline-block;
        padding: 0 7px;
    }

    .reseaux-sociaux li:first-child {
        padding-left: 0;
    }

    .reseaux-sociaux li:last-child {
        padding-right: 0;
    }

    .reseaux-sociaux li img {
        max-height: 19px;
    }

    #menu-footer {
        margin: 0 auto
    }

    #menu-footer li {
        display: inline;
        padding: 0 10px;
    }

    #menu-footer li#menu-item-7239 {
        display: none;
    }

    .archive.category-recrutement.category-17 #menu-footer li#menu-item-7239 {
        display: inline-block;
    }

    #menu-footer a {
        color: #021622;
        font-weight: 400
    }

    #menu-footer a:hover {
        color: #49c2d1;
    }

    .recrutement {
        position: absolute;
        bottom: 10px;
        right: 3%;
        font: 400 25px/28px 'Abhaya Libre', Arial, Helvetica, sans-serif;
        font-display: auto;
        -ms-transform: rotate(-4deg);
        -webkit-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }

    .recrutement a {
        background: #53bdcd;
        color: #fff;
        padding: 18px 22px;
        border-radius: 3px;
    }

    .recrutement a:hover {
        background: #021622;
    }

}

@media all and (max-width: 1595px) {
    .page-notre-agence .en-tete .bkg {
        right: -200px;
    }

    .page-web .en-tete .bkg,
    .page-mobile .en-tete .bkg {
        background-size: 80%;
        right: -200px;
    }
}


@media all and (max-width: 1520px) {
    .page-modelisation .en-tete .bkg {
        right: -130px;
    }

    nav a {
        padding: 13px 10px;
    }
}

@media all and (max-width: 1450px) {
    .page-notre-agence .en-tete .bkg {
        width: 600px;
        right: -80px;
        background-size: 100%
    }

    .page-notre-agence .section-3 .bloc:nth-child(2) {
        top: 100px;
    }

    .page-web .en-tete .bkg,
    .page-mobile .en-tete .bkg {
        background-size: 100%;
        right: -100px;
        width: 450px;
    }

    .nos-metiers .titre {
        font-size: 50px;
    }

    .call {
        margin-left: auto;
        margin-top: 5px;
        margin-right: 5px;
    }
}

@media all and (max-width: 1330px) {
    .nos-metiers .points {
        margin-right: 5%;
    }

    .nos-metiers .points:nth-child(even) {
        margin-left: 5%;
    }

    .nos-metiers .bloc {
        padding: 80px 120px;
    }

    .page-modelisation .en-tete .bkg {
        right: -80px;
        background-size: 100%;
        width: 450px;
        height: 500px;
    }

    .page-web .en-tete .bkg,
    .page-mobile .en-tete .bkg {
        right: 0;
    }
}

@media all and (max-width: 1245px) {
    nav a {
        padding: 13px 5px;
    }

    header nav a::after {
        left: 5px;
    }

    .logos .flex>*,
    .references .flex>* {
        width: 15%;
        margin: 0;
        padding: 0 1%;
        text-align: center;
    }
}

@media all and (max-width: 1225px) {
    .listing-blog .wrap {
        width: 96%;
    }

    .page-modelisation .en-tete .bkg {
        right: -10px;
    }

    .page-notre-agence .en-tete .bkg {
        width: 450px;
        right: 0;
    }

    .page-notre-agence .section-4 .bloc:first-child {
        top: 36%;
    }


}

@media all and (max-width: 1155px) {

    .presentation-modelisation .wrap,
    .page-modelisation .wrap,
    .page-web .wrap,
    .page-mobile .wrap {
        width: 96%;
    }
}

@media all and (max-width: 1180px) {
    .call {
        margin-left: auto;
        margin-right: 45px;
        margin-top: 13px;
    }
}

@media all and (max-width: 1150px) {
    .page-hebergement .en-tete .bkg {
        right: 30px;
    }

    .page-modelisation .intro .bloc:first-child::before,
    .page-web .intro .bloc:first-child::before {
        font-size: 110px;
        top: -70px
    }

    .page-modelisation .presentation-modelisation::before,
    .page-web .presentation-web::before {
        font-size: 110px;
    }

}


@media all and (max-width: 1110px) {
    nav a {
        padding: 13px 18px;
    }
}

@media all and (max-width: 1080px) {
    .points:first-child .img-metier img {
        margin-top: -180px;
    }

    .nos-metiers .bloc>* {
        width: 47%;
    }

    .nos-metiers .bloc {
        padding: 80px 60px;
    }

    .page-notre-agence .section-3 .bloc:nth-child(2) {
        top: 50px;
    }
}

@media all and (max-width: 1055px) {

    .presentation .wrap,
    .references .wrap,
    .page-hebergement .wrap,
    .page-modelisation.page-modelisation .en-tete .wrap,
    .page-mobile .en-tete .wrap,
    .page-notre-agence .en-tete .wrap,
    .page-web .en-tete .wrap {
        width: 96%;
    }

    footer {
        padding: 35px 3%;
    }

    #menu-footer {
        margin: inherit;
    }

    .page-agence .nos-metiers {
        height: inherit;
        max-height: inherit;
        overflow: inherit;
    }

    .page-agence .nos-metiers figure {
        height: auto;
        width: 50%;
    }

    .nos-metiers .titre {
        font-size: 47px;
    }

    .page-votre-projet {
        overflow: auto;
    }
}

@media all and (max-width: 975px) {

    .nos-metiers .points,
    .nos-metiers .points:nth-child(even) {
        margin: 0 3%;
        padding: 12px;
        margin-bottom: 40px;
    }

    .page-hebergement .en-tete,
    .page-modelisation .en-tete,
    .page-notre-agence .en-tete,
    .page-web .en-tete,
    .page-mobile .en-tete {
        padding: 80px 0 130px;
        text-align: center;
    }

    .page-modelisation .en-tete,
    .page-notre-agence .en-tete,
    .page-web .en-tete,
    .page-mobile .en-tete {
        padding: 80px 0 180px
    }

    .page-hebergement .en-tete p,
    .page-modelisation .en-tete p,
    .page-notre-agence .en-tete p,
    .page-web .en-tete p,
    .page-mobile .en-tete p {
        max-width: inherit;
        text-align: center
    }

    .page-hebergement .en-tete .bkg {
        right: 0;
        left: 0;
        margin: auto;
        background-size: 50%;
        bottom: -475px;
        max-width: 100%;
    }

    .page-modelisation .en-tete .bkg {
        right: 0;
        left: 0;
        margin: auto;
        bottom: -475px;
        max-width: 100%;
        width: 350px;
    }

    .page-notre-agence .en-tete .bkg,
    .page-web .en-tete .bkg,
    .page-mobile .en-tete .bkg {
        right: 0;
        left: 0;
        margin: auto;
        bottom: -575px;
        max-width: 100%;
    }

    .nos-metiers {
        height: inherit;
        max-height: inherit;
    }

    .nos-metiers figure {
        height: inherit;
        width: 50%;
        max-height: 400px
    }

    /* page agence */
    .page-notre-agence article {
        width: 100%;
        margin: 0 auto;
        padding: 175px 25px 130px 25px;
    }

    .page-notre-agence .section-1,
    .page-notre-agence .section-3 {
        margin-bottom: 75px;
    }

    .page-notre-agence .section-1 {
        text-align: left;
    }

    .page-notre-agence .section-1 h2::before {
        left: 0;
        top: -110px;
    }

    .page-notre-agence .section-1 .bloc:first-child,
    .page-notre-agence .section-1 .bloc:nth-child(2),
    .page-notre-agence .section-4 .bloc:first-child,
    .page-notre-agence .section-4 .bloc:nth-child(2),
    .page-notre-agence .section-3 .bloc:first-child,
    .page-notre-agence .section-3 .bloc:nth-child(2),
    .page-notre-agence .section-5 .bloc:first-child,
    .page-notre-agence .section-5 .bloc:nth-child(2),
    .page-notre-agence .section-6 .bloc:first-child,
    .page-notre-agence .section-6 .bloc:nth-child(2) {
        width: 100%;
    }

    .page-notre-agence .section-2 .bloc:nth-child(2),
    .page-notre-agence .section-6 .bloc:nth-child(2) {
        width: 100%;
        order: 1;
    }

    .page-notre-agence .section-2 .bloc:first-child {
        width: 100%;
        position: relative;
        order: 2;
        left: inherit;
        top: 24px;
    }

    .page-notre-agence .section-3 .flex,
    .page-notre-agence .section-5 .flex {
        justify-content: center
    }

    .page-notre-agence .section-3 .bloc:nth-child(2) {
        width: 100%;
        position: relative;
        right: inherit;
        top: -50px;
    }

    .page-notre-agence .section-5 h2 {
        left: inherit;
        position: relative;
        top: inherit;
    }

    .page-notre-agence .section-5 h2::before,
    .page-notre-agence .section-3 h2::before,
    .page-notre-agence .section-6 h2::before {
        left: 0;
        top: -110px;
    }

    .page-notre-agence .section-6 .bloc:first-child {
        width: 100%;
        position: relative;
        order: 2;
        left: 5%;
        top: 24px;
        max-width: inherit;
    }

    .participez {
        padding: 100px 40px;
    }

    .autres-pages li a {
        padding: 50px;
    }

    /* page expertise */
    .page-agence .nos-metiers figcaption>div {
        top: 15%;
    }

    .page-agence .nos-metiers figcaption>div .titre {
        margin-bottom: 30px;
    }

    .page-agence .nos-metiers figcaption>div p {
        font-size: 20px;
        opacity: 1;
        -webkit-transition: none;
        transition: none;
        -webkit-transform: none;
        transform: none;
    }

    .page-agence .nos-metiers figure img {
        opacity: 0.2
    }

    .page-mobile .intro .bloc:first-child,
    .page-mobile .intro .bloc:nth-child(2) {
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
    }

    .page-mobile .intro .bloc:nth-child(2) {
        padding-bottom: 115px;
    }

    .page-mobile .intro .bloc:nth-child(2)::after {
        bottom: 0;
        font-size: 110px;
        right: -15px;
    }

    .page-mobile .intro .bloc:first-child::before {
        font-size: 110px;
        top: -70px;
    }

    /* Landing page */
    div.landing,
    div.page-votre-projet article {
        padding: 0 25px 0 25px;
    }

}

@media all and (max-width: 915px) {

    .wrap,
    .page-contact .en-tete {
        width: 96%;
    }

    .livres-blanc li a {
        padding: 18px 35px
    }

    .article-cases article .flex .bloc:first-child,
    .article-cases article .flex .bloc:nth-child(2) {
        width: 48%;
    }
}

@media all and (max-width: 880px) {
    .nos-metiers .img-metier {
        display: none;
    }

    .nos-metiers .texte-metier {
        width: 100%
    }

    .nos-metiers .bloc {
        padding: 50px 70px;
    }

    .page-hebergement .flex .bloc {
        width: 90%;
        margin: 0 auto 60px
    }
}

@media all and (max-width: 835px) {
    .img-blog {
        float: none;
        margin: 0 0 20px;
    }

    .alignright,
    .alignleft {
        float: none;
        display: block;
        margin: 0 auto 20px;
    }

    .realisations .flex .bloc:first-child,
    .realisations .flex .bloc:nth-child(2),
    .realisations .flex .bloc:nth-child(3) {
        width: 100%
    }

    .demarrons::before {
        left: 25px;
        right: inherit;
    }

    header .reseaux-sociaux,
    .page-modelisation .intro .bloc:first-child,
    .page-web .intro .bloc:first-child {
        width: 100%;
        margin-bottom: 20px;
    }

    .grid-sizer,
    .grid-item {
        width: 47%;
    }

    .custom-header-media {
        height: inherit;
        max-height: 100%;
        overflow: auto;
    }

    /*.diaporama .wp-custom-header img { height: initial; object-fit: inherit;}*/
    #breadcrumbs {
        display: none;
    }

    .page-mobile .presentation-mobile .wrap .bloc {
        width: 94%;
        margin: 0 auto;
        margin-top: 25px;
    }

    .page-mobile .presentation-mobile .wrap .bloc:nth-child(2) img {
        margin: 0 auto;
        display: block;
    }

    .article-cases article {
        padding: 80px 20px;
    }

    .page-votre-projet .image-choices-field .image-choices-choice {
        width: 33%;
    }

    .page-modelisation .intro.anim,
    .page-web .intro.anim {
        padding: 120px 0 0;
    }

    .page-modelisation .intro .bloc:nth-child(2),
    .page-web .intro .bloc:nth-child(2) {
        width: 100%;
        padding: 25px 5% 0;
    }

    .page-blog picture,
    .page-blog picture .align-left {
        text-align: center
    }

    #menu-footer li:first-child {
        padding-left: 0;
    }

    #menu-footer li:last-child {
        padding-right: 0;
    }
}

@media all and (max-width: 790px) {

    .page-modelisation .methodologie .flex div:first-child,
    .page-modelisation .projets>*,
    .page-modelisation .projets .bloc:nth-child(2),
    .page-web .projets>*,
    .page-web .projets .bloc:nth-child(2),
    .main-texte-libre .bloc:first-child,
    .main-texte-libre .bloc:nth-child(2),
    .category-recrutement .article-blog {
        width: 100%;
    }

    .page-modelisation .methodologie h2 {
        max-width: 90%;
        margin: 0 auto;
        margin-bottom: 45px;
    }

    .page-modelisation .methodologie .flex>* {
        width: 31%;
    }

    .page-modelisation .methodologie .bloc::before {
        top: 15px;
    }

    .page-modelisation .projets .bloc:nth-child(2),
    .page-web .projets .bloc:nth-child(2) {
        padding: 50px 5% 0;
    }

    .page-modelisation .projets .bloc:nth-child(2) h2,
    .page-modelisation .projets .bloc:nth-child(2) p,
    .page-web .projets .bloc:nth-child(2) h2,
    .page-web .projets .bloc:nth-child(2) p {
        margin-left: 0;
        max-width: 100%;
    }

    .page-modelisation .projets .bloc:nth-child(2) h2::after,
    .page-web .projets .bloc:nth-child(2) h2::after {
        left: 0;
    }

    .fond_bleu {
        padding: 40px 30px;
    }

    .page-blog article>p:first-of-type::first-letter {
        font-size: 400%;
    }

    blockquote {
        margin-left: 0;
        padding: 35px;
        background-color: #f6f6f6;
    }

    blockquote::before {
        left: -30px;
        top: 80px;
    }

    blockquote p {
        padding-bottom: 30px;
        font-size: 30px;
        line-height: 34px;
    }

}

@media all and (max-width: 725px) {
    .livres-blanc {
        padding: 80px 0
    }

    .livres-blanc li {
        display: block;
        margin: 18px 0;
    }

    .livres-blanc li a {
        display: block
    }

    .recrutement,
    .logos {
        display: none;
    }

    .listing-blog .en-tete h1::after,
    .page-blog .en-tete .titre::after {
        content: none
    }

    .page-notre-agence .section-4 {
        margin-bottom: 115px;
    }

    .page-notre-agence .section-4 .bloc:first-child {
        width: 100%;
        position: relative;
        left: inherit;
        top: -50px;
        order: 2;
    }

    .page-notre-agence .section-4 .bloc:nth-child(2) {
        order: 1;
    }
}

@media all and (max-width: 690px) {

    .page-modelisation .presentation-modelisation .wrap>*,
    .page-modelisation .presentation-modelisation .bloc:nth-child(2) p+p,
    .page-web .presentation-web .wrap .bloc,
    .page-web .presentation-web .bloc:nth-child(2) p+p,
    .article-cases article .flex .bloc:first-child,
    .article-cases article .flex .bloc:nth-child(2) {
        width: 100%
    }

    .page-modelisation .presentation-modelisation h2,
    .page-web .presentation-web h2,
    .page-web .presentation-web .wrap .bloc:first-child {
        margin-bottom: 40px;
    }

    .article-cases article .flex .bloc:nth-child(2) {
        margin-top: 40px;
    }
}

@media screen and (max-height: 650px) {
    .page-votre-projet {
        height: 100%;
        max-height: inherit;
        overflow: visible
    }

    .page-votre-projet .wrap {
        padding: 40px 0
    }

    .liste-categorie .searchandfilter li {
        padding: 0;
    }
}

@media all and (max-width: 650px) {
    .page-contact .en-tete {
        padding: 60px 0 25px;
    }

    .serenite .bloc,
    .adresse .bloc {
        margin: 0 5%;
        width: 90%;
    }

    .serenite .bloc .titre {
        left: -10px;
        top: 10px;
    }

    .adresse .bloc .titre {
        left: -10px;
        top: -35px;
        line-height: 57px;
    }

    .page-modelisation .methodologie .flex>* {
        width: 90%;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .autres-pages li a {
        padding: 40px 35px;
    }

    .presentation {
        padding: 50px 0 85px;
    }

    .presentation h1 {
        font-size: 30px;
        line-height: 33px;
    }

    .points:nth-child(odd) .bloc.anim .texte-metier {
        -moz-transform: translate3d(50px, 0, 0px);
        -webkit-transform: translate3d(50px, 0, 0px);
        -o-transform: translate(50px, 0);
        -ms-transform: translate(50px, 0);
        transform: translate3d(50px, 0, 0px);
    }

    .page-votre-projet .image-choices-field .image-choices-choice {
        width: 50%;
    }

    .liste-categorie .searchandfilter .sf-field-category li.sf-level-0 {
        padding: 0 10px;
    }
}

@media all and (max-width: 600px) {
    body {
        overflow-x: hidden;
    }

    .call {
        margin-right: 0px;
        margin-top: 5px;
    }
}

@media all and (max-width: 555px) {

    /*.article-cases .en-tete , .page-contact .bandeau  {height : 250px;}*/
    .page-id-14 .article-cases .en-tete,
    .page-contact .bandeau {
        height: 0px !important;
    }

    .page-id-2651 .page-contact .bandeau {
        height: 180px;
    }

    .article-cases .en-tete img,
    .page-contact .bandeau img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }

    #logo {
        width: 100%;
        text-align: center;
        padding-top: 6px;
    }

    #logo svg {
        width: 195px;
        padding-top: 10px;
    }

    .diaporama {
        /*background: url(images/images-creations-agence-web-mobile.jpg) no-repeat scroll right -230px top -50px;*/
        min-height: inherit;
        background-size: 198%;
    }

    .diaporama .custom-header-media video {
        display: none;
    }

    .custom-header-media {
        height: 330px;
        max-height: inherit;
    }

    .diaporama .custom-header-media video {
        margin-left: -170px;
    }

    .diaporama .site-branding .titre-agence {
        background-size: 65px;
        background-position: right 30px top 12px;
    }

    .diaporama .site-branding .titre-web .letter-box:nth-last-child(2) {
        width: 12px;
    }

    .diaporama .site-branding .titre-mobile {
        left: 0;
        right: inherit;
        bottom: -5px;
    }

    .presentation {
        padding: 30px 0 85px;
    }

    section.presentation h1 {
        font-size: 26px;
    }

    section.presentation p {
        -moz-text-align-last: center;
        font-size: 19px;
    }

    .presentation .wrap>* {
        text-align: center;
    }

    section.presentation .lien-bleu {
        margin-top: 30px;
    }

    .page-contact .wrap,
    .zone-formulaire-recrutement .wrap {
        width: 96%;
    }

    .page-contact article,
    .zone-formulaire-recrutement {
        padding-top: 10px;
    }

    .nos-metiers figure {
        width: 100%;
        max-height: 350px
    }

    .page-agence .nos-metiers figure,
    .autres-pages li {
        width: 100%;
    }

    .autres-pages li+li {
        border-left: 0;
        border-top: 1px solid #dadada;
    }

    .autres-pages li:first-child,
    .autres-pages li {
        text-align: center;
    }

    .diaporama {
        font-size: 40px;
    }

    .titre-web {
        margin-top: -5px;
    }

    .page-votre-projet {
        height: auto;
    }

    .grid-sizer,
    .grid-item {
        width: 98%;
    }
}

@media all and (max-width: 525px) {

    .listing-blog .flex>*,
    .listing-blog .flex .bloc img {
        width: 100%;
    }

    .page-hebergement .logiciels li {
        display: block;
        text-align: center;
        width: 100%;
        margin: 15px 0;
    }

    .page-hebergement .flex .bloc:nth-child(4) {
        padding: 55px 20px;
    }

    .page-web .en-tete li {
        margin: 0 0 25px 0
    }

    .nos-metiers .titre {
        font-size: 38px;
        line-height: 30px;
        padding-left: 33px;
    }

}

@media all and (max-width: 485px) {
    header {
        padding: 15px 3% 25px 3%;
    }

    .call {
        margin-right: 7px;
        margin-top: 0;
        width: 100%;
    }

    .call .img_call {
        margin-left: auto;
    }

    .cd-nav-trigger {
        top: 13px;
    }
}

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

    .realisations .flex .bloc:nth-child(3) figure:nth-child(2),
    .realisations .flex .bloc:nth-child(3) figure:nth-child(3) {
        width: 100%;
    }

    .demarrons a {
        padding-right: 40px;
    }

    .demarrons::before {
        content: none;
    }

    .nos-metiers .bloc {
        padding: 50px 40px;
		overflow:hidden;
    }

    .presentation .wrap {
        width: 90%;
    }

    .page-notre-agence .en-tete .bkg {
        width: 100%;
    }

    .reseaux-sociaux {
        width: 100%;
        text-align: center;
    }

    .participez .titre {
        font-size: 42px;
    }

    .titre-web,
    .titre-mobile {
        font-size: 60px;
        line-height: 60px;
    }

    .page-contact .en-tete .reseaux-sociaux {
        margin: 0;
    }

    #menu-footer {
        width: 100%;
        margin-top: 15px;
        text-align: center;
    }

    #menu-footer li:first-child {
        display: block;
    }

    #menu-footer a {
        display: inline-block;
        padding: 20px 10px;
    }
}

@media all and (max-width: 435px) {
    .site-branding {
        width: 86%;
        margin: 0 auto;
        height: 150px;
    }

    .nos-metiers .titre {
        font-size: 33px;
    }


	ul#menu-pied-de-page {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#menu-footer li:first-child {
		padding: 0 10px;
	}

	#menu-footer a {
		padding: 10px;
	}
    /*.diaporama { background: url(images/images-creations-agence-web-mobile.jpg) no-repeat scroll 0 0 / cover; min-height: 250px;}*/
}

@media all and (max-width: 375px) {

    /*#logo { width:230px;}
	#logo svg { width:100%;}*/
    .custom-header-media {
        height: 250px;
    }

    .titre-agence {
        background-size: 60px;
        background-position: right 30px center;
    }

    .titre-web,
    .titre-mobile {
        font-size: 50px;
        line-height: 50px;
    }

    .titre-mobile {
        right: 20px;
        bottom: 5px;
    }
}

@media all and (max-width: 320px) {
    #menu-footer li {
        display: block;
        padding: 10px 0;
        text-align: center;
    }

    /*#logo { width:200px;}*/
}




/* TEMPLATE AFNIC */

:root{
	--afnic-darkblue: #2A2360;
	--afnic-blue: #2d2e86;
	--afnic-lightblue: #D5DBEE;
	--afnic-lightblue-20percent: #d5dbee5a;
	--afnic-lightpurple: #EAEBF4;
	--afnic-red: #FF1E44;
	--ic-blue: #49C2D1;
}

.afnic-template{
	*{
		font-family: Montserrat, sans-serif;
	}
	.afnic-btn:not(:is(.wp-block-button)){
		font-family: Montserrat, sans-serif;
		font-weight: 600;
		font-size: 14px;
		line-height: 1;
		text-align: center;
		text-transform: uppercase;
		padding: 12px 20px;
		@media screen and (max-width: 600px){
				padding: 10px 16px;
				font-size: 12px;

		}
	}
	.afnic-btn:is(.wp-block-button){
		> a{
			font-family: Montserrat, sans-serif;
			font-weight: 600;
			font-size: 14px;
			line-height: 1;
			text-align: center;
			text-transform: uppercase;
			padding: 12px 20px;
			@media screen and (max-width: 600px){
				padding: 10px 16px;
				font-size: 12px;

			}
		}
	}

	.wp-block-separator{
		border-width: 0;
		height: 1px;
		background: linear-gradient(122deg, #2A2360 0%, #EAEBF4 50%, #2A2360 100%);
	}

	.afnic-btn--secondary{
		color: var(--afnic-blue);
		background-color: #fff;
		> a{
			color: var(--afnic-blue);
			background-color: #fff;
		}
	}

	.afnic-btn--main{
		color: #fff;
		background-color: var(--ic-blue);
		> a {
			color: #fff;
			background-color: var(--ic-blue);

		}
	}

	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: sticky;
    	top: 0;
		@media screen and (max-width: 600px){
			padding: 8px 20px;
		}
		#logo{
			@media screen and (max-width: 600px){
				max-width: 180px !important;
				svg,a{
					padding: 0 !important;
					width: 100% !important;
				}
			}
		}
	}



	.page-blog{
		> *:not(.alignfull){
			max-width: 1100px;
			margin-left: auto;
			margin-right: auto;
		}


		> .alignfull:not(.wp-block-cover, .wp-block-group){
			> *:not(.alignfull, .alignwide){
				max-width: 1100px;
				margin-left: auto;
				margin-right: auto;
			}
			> .alignwide{
				max-width: 1300px;
				margin-left: auto;
				margin-right: auto;
			}
		}
		> .alignfull.wp-block-cover{
			.wp-block-cover__inner-container > *:not(.alignfull, .alignwide){
				max-width: 1100px;
				margin-left: auto;
				margin-right: auto;
			}
			.wp-block-cover__inner-container > .alignwide{
				max-width: 1300px;
				margin-left: auto;
				margin-right: auto;
			}
		}
		> .alignfull.wp-block-group{
			.wp-block-group__inner-container > *:not(.alignfull, .alignwide){
				max-width: 1100px;
				margin-left: auto;
				margin-right: auto;
			}
			.wp-block-group__inner-container > .alignwide{
				max-width: 1300px;
				margin-left: auto;
				margin-right: auto;
			}
		}

		.hero-head{
			padding-top: 104px;
			padding-bottom: 32px;
			@media screen and (max-width: 600px){
				padding-top: 32px;
				padding-bottom: 16px;

			}
			.wp-block-cover__inner-container{
				z-index: 2;
				.tag{
					display: inline-block;
					width: fit-content;
					font-family: Montserrat, sans-serif;
					font-weight: 500;
					font-size: 14px;
					color: var(--afnic-blue);
					background-color: var(--afnic-lightblue-20percent);
					padding: 6px 12px;
					border-radius: 2rem;
				}

				h1{
					font-family: Montserrat, sans-serif;
					font-weight: 600;
					font-size: 108px;
					color: var(--afnic-darkblue);
					margin: 8 0 18px 0;
					> mark{
						color: var(--afnic-darkblue) !important;
						font-weight: 300 !important;
					}
					@media screen and (max-width: 600px){
						font-size: 52px;
					}
				}
				.intro{
					font-family: Montserrat, sans-serif;
					font-weight: 300;
					font-style: Light;
					font-size: 20px;
					color: var(--afnic-darkblue);
					strong{
						font-weight: 500;
					}
					@media screen and (max-width: 600px){
						font-size: 18px;
					}
				}
			}
			&::before{
				content: '';
				max-width: 616px;
				width: 90%;
				aspect-ratio: 616/297;
				background-image: url("data:image/svg+xml,%3Csvg width='616' height='297' viewBox='0 0 616 297' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='mask0_3314_335' style='mask-type:alpha' maskUnits='userSpaceOnUse' x='0' y='0' width='616' height='297'%3E%3Crect width='616' height='297' fill='%23F1F4F9'/%3E%3C/mask%3E%3Cg mask='url(%23mask0_3314_335)'%3E%3Ccircle opacity='0.7' cx='339.5' cy='-28.5' r='325.5' fill='%23D5DBEE'/%3E%3C/g%3E%3C/svg%3E%0A");
				background-repeat: no-repeat;
				background-size: cover;
				display: block;
				position: absolute;
				top: 0;
				right: 0;
				z-index: 1;
			}
			&::after{
				content: '';
				width: 100%;
				aspect-ratio: 1508/13;
				background-image: url("data:image/svg+xml,%3Csvg width='1508' height='13' viewBox='0 0 1508 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H168.404L176.444 13H0V0Z' fill='%232A2360'/%3E%3Cpath d='M166.444 0H334.464L342.889 13H174.485L166.444 0Z' fill='%23FF000F'/%3E%3Cpath d='M332.889 0H501.293L509.333 13H340.929L332.889 0Z' fill='%23EAEBF4'/%3E%3Cpath d='M499.333 0H667.737L675.778 13H507.374L499.333 0Z' fill='%23FF5E76'/%3E%3Cpath d='M665.778 0H834.182L842.222 13H673.818L665.778 0Z' fill='%232D2E88'/%3E%3Cpath d='M832.222 0H1000.63L1008.67 13H840.263L832.222 0Z' fill='%2300C0EC'/%3E%3Cpath d='M998.667 0H1167.46L1175.11 13H1006.32L998.667 0Z' fill='%23FF1E44'/%3E%3Cpath d='M1165.11 0H1333.52L1341.56 13H1173.15L1165.11 0Z' fill='%230F0043'/%3E%3Cpath d='M1331.56 0H1508V13H1339.6L1331.56 0Z' fill='%23A7C3FF'/%3E%3C/svg%3E%0A");
				background-repeat: no-repeat;
				background-size: cover;
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				@media screen and (max-width: 600px){
					aspect-ratio: 375/6;
				}
			}
		}

		h2{
			font-family: Montserrat, sans-serif;
			font-weight: 600;
			font-size: 52px;
			@media screen and (max-width: 600px){
				font-size: 28px;
			}
			&.has-ico{
				&::after{
					content: '';
					background-repeat: no-repeat;
					background-size: contain;
					display: inline-block;
                    vertical-align: super;
				}
			}
			&.has-ico-heart{
				&::after{
					width: 16px;
					height: 18px;
					background-image: url("data:image/svg+xml,%3Csvg width='16' height='18' viewBox='0 0 16 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.67713 5.89031C8.76072 5.48131 9.52401 4.35258 10.8407 2.90119C11.6703 1.98662 12.7823 2.10366 13.587 2.10674C13.9625 2.10817 14.2686 2.19116 14.4975 2.39773C16.7992 4.47462 10.6532 12.0786 8.31676 14.524C7.89774 14.9791 7.58875 15.4485 7.29597 15.8229C7.0032 16.1972 6.736 16.4621 6.46071 16.7351' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M8.7352 5.6245C8.16796 4.23031 7.61079 3.24489 7.03618 2.64488C6.36089 1.93973 5.40991 1.39416 4.28518 1.37734C3.76262 1.36952 3.38362 1.83221 3.08849 2.47074C1.73415 5.40099 4.11734 10.2457 5.02161 12.9838C5.20624 13.3992 5.4294 13.8709 5.61527 14.2882C5.80114 14.7054 6.3146 16.1092 6.46071 16.4683' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
					translate: 8px -8px;
				}
			}
			&.has-ico-ticks{
				&::after{
					width: 17px;
					height: 21px;
					background-image: url("data:image/svg+xml,%3Csvg width='20' height='23' viewBox='0 0 20 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 6.66878L2.70063 1' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M12.3376 11.2037L17.4395 6.6687' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M13.4713 21.4076L18.5732 21.9745' stroke='white' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
					translate: 8px -8px;
				}
			}
			&.has-ico-star{
				&::after{
					width: 11px;
					height: 19px;
					background-image: url("data:image/svg+xml,%3Csvg width='13' height='21' viewBox='0 0 13 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.06629 1C6.16643 4.52623 3.99436 8.67737 1 10.9092C3.00141 11.6085 4.52186 12.3078 5.46827 14.1378C6.41467 15.9679 6.84908 18.0063 7.2835 20C7.53173 16.5482 9.45557 12.3673 12 9.91229C9.23836 8.08222 6.98872 4.21378 7.06629 1Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
					translate: 8px -8px;
				}
			}
			&.h2-custom-1{
				font-weight: 400;
				font-style: Italic;
				font-size: 52px;
				line-height: 68px;
				@media screen and (max-width: 600px){
					font-size: 28px;
					line-height: 0.5;
				}
			}
			&.h2-custom-2{
				font-weight: 600;
				font-size: 52px;
				line-height: 68px;
				@media screen and (max-width: 600px){
					font-size: 28px;
				}
			}
		}

		.checkmark-row{
			gap: 20px;
			> figure{
				flex-basis: 34px !important;
				flex-shrink: 0 !important;
			}
		}

		.border-custom{
			border: 1px solid transparent;
			padding: 2rem !important;
			border-radius: 0;
			background-image: linear-gradient(#2a2360, #2a2360), linear-gradient(145deg, rgb(255, 255, 255), rgba(255, 255, 255, 0) 35%);
			background-origin: border-box;
			background-clip: padding-box, border-box;
			height: 100%;
			.card-title{
				margin-bottom: 1.75rem;
				font-family: Montserrat, sans-serif;
				font-weight: 300;
				font-size: 28px;
				line-height: 36px;
				@media screen and (max-width: 600px){
					font-size: 20px;
					margin-bottom: 18px !important;
					line-height: 28px;
				}
			}
			.card-text{
				@media screen and (max-width: 600px){
					font-size: 16px !important;
				}
			}
		}

		.wp-block-columns{
			@media screen and (max-width: 600px){
				&.is-gap-0-mobile{
					gap: 0 !important;
				}
				&.reverse-mobile{
					flex-direction: column-reverse !important;
				}
			}
		}

		p{
			&.number{
				font-weight: 300;
				font-size: 60px;
				color: var(--afnic-blue);
				background-color: var(--afnic-lightpurple);
				width: fit-content;
				line-height: 1;
				padding: 8px 12px;
				@media screen and (max-width: 600px){
					font-size: 44px;
				}
			}
			&.custom-underline-mark{
				margin-top: 1rem;
				font-weight: 300;
				font-size: 28px;
				@media screen and (max-width: 600px){
					font-size: 20px;
				}
				mark{
					white-space: nowrap;
					position: relative;
					&::after{
						content: '';
						max-width: 100%;
						width: 128px;
						height: 5px;
						background-image: url("data:image/svg+xml,%3Csvg width='128' height='5' viewBox='0 0 128 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.00001 3.79963C1.83918 3.54011 2.67836 3.28058 9.7716 2.63929C16.8649 1.998 30.1867 0.982801 50.7077 1.07562C71.2286 1.16844 98.545 2.40005 126.689 3.66897' stroke='%23FF1E44' stroke-linecap='round'/%3E%3C/svg%3E%0A");
						background-repeat: no-repeat;
						background-size: cover;
						position: absolute;
						bottom: -0.5rem;
						left: 50%;
						translate: -50% 50%;
					}
				}
			}
			&.is-14-mobile{
				@media screen and (max-width: 650px){
					font-size: 14px !important;
				}
			}
		}

		.wp-block-image{
			*{
				display: block;
			}
			&.is-100-mobile{
				@media screen and (max-width: 650px){
					max-width: 100px !important;
					*{
						width: 100% !important;
					}
				}
			}
			&.is-60-mobile{
				@media screen and (max-width: 650px){
					max-width: 60px !important;
					*{
						width: 100% !important;
					}
				}
			}
			&.is-215-mobile{
				@media screen and (max-width: 650px){
					margin: 0 auto;
					max-width: 215px !important;
					*{
						width: 100% !important;
					}
				}
			}
		}

		.wp-block-group{
			&.has-64-top-mobile{
				@media screen and (max-width: 650px){
					padding-top: 64px !important;
				}
			}
		}

		.gform_wrapper{
			input, textarea, select{
				&::placeholder{
					color: var(--afnic-darkblue);
					font-weight: 300;
					font-size: 18px ;
				}
			}
			.gform-footer{
				padding: 0 !important;
				margin-top: 0 !important;
				input[type="submit"]{
					font-size: 14px !important;
				}
			}
			.gform_required_legend{
				display: none !important;
			}
		}

	}
}