/*
Description : This file is used for all animations on the website
*/

:root {
    --gris-fonce: #161616;
    --rouge-creaprime: #E90310;
    --bleu-gris-clair: #f2f2f2;
    --blanc: #fff;
    --bu-web: #32C0CA;
    --bu-rs: #F2274C;
    --bu-seo: #FFBD00;
    --bleu-enjin-eclairci: #1f63a7;
    --vert-crea: #8eb43b;
    --error-color: #F2274C;
}

/* || Components */

/* … */

/* || Header & Footer */

#wrapper #masthead {
    -webkit-animation: Header-fadeInTop 1s cubic-bezier(.77,0,.57,1) both .5s;
            animation: Header-fadeInTop 1s cubic-bezier(.77,0,.57,1) both .5s;
    opacity: 1;
}

@-webkit-keyframes Header-fadeInTop {
    from {
        opacity: 0;
        top: -50px;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

@keyframes Header-fadeInTop {
    from {
        opacity: 0;
        top: -50px;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

/* - Item de menus - */

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li:hover {
    z-index: 5;
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a:first-child {
    position: relative;
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a > span:nth-child(odd) {
    position: relative;
    z-index: 0;
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a > span:nth-child(even) {
    position: relative;
    z-index: 2;
} 

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li:nth-child(1) > a > svg {
    stroke: var(--bu-seo);
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li:nth-child(3) > a > svg {
    stroke: var(--bu-rs);
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li:nth-child(4) > a > svg {
    stroke: var(--bu-web);
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li:nth-child(2) > a > svg,
#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li:nth-child(5) > a > svg {
    stroke: var(--bleu-enjin);
}


#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a > svg {
    position: absolute;
    left: -10px;
    top: 13px;
    -webkit-transform: translateY(0%);
        -ms-transform: translateY(0%);
            transform: translateY(0%);
    display: block;
    width: calc(100% + 20px);
    overflow: hidden;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    -webkit-transition: stroke-dashoffset .7s cubic-bezier(.77,0,.57,1);
    -o-transition: stroke-dashoffset .7s cubic-bezier(.77,0,.57,1);
    transition: stroke-dashoffset .7s cubic-bezier(.77,0,.57,1);
    -webkit-transform: scaleY(-1);
        -ms-transform: scaleY(-1);
            transform: scaleY(-1);
    -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
            transform-origin: center center;
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a:hover > svg,
#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a.is-active > svg {
    stroke-dashoffset: 0;
    -webkit-transition: stroke-dashoffset .7s cubic-bezier(.77,0,.57,1);
    -o-transition: stroke-dashoffset .7s cubic-bezier(.77,0,.57,1);
    transition: stroke-dashoffset .7s cubic-bezier(.77,0,.57,1);
}

#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li.current-menu-item > a > svg,
#wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li.current-menu-parent > a > svg {
    stroke-dashoffset: 0;
}

/* -- */

/* … */

/* || Specific Pages */

/* - Page d'accueil - */

/* -- Hero (Vidéo) -- */

#wrapper footer .vertical-text.vertical-text--right {
    -webkit-animation: slideInRight .5s cubic-bezier(.77,0,.57,1) both 1s;
            animation: slideInRight .5s cubic-bezier(.77,0,.57,1) both 1s;
}

@-webkit-keyframes slideInRight {
    from {
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
    }

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

@keyframes slideInRight {
    from {
        -webkit-transform: translateX(50px);
                transform: translateX(50px);
    }

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

/* ---- */

/* || col creasite creaprime */


@-webkit-keyframes fadeInBottomToTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

@keyframes fadeInBottomToTop {
    from {
        opacity: 0;
        -webkit-transform: translateY(50px);
                transform: translateY(50px);
    }
    to {
        opacity: 1;
        -webkit-transform: translateY(0);
                transform: translateY(0);
    }
}

#wrapper .section-title-center .col-creasite-home, #wrapper .section-title-center .col-creaprime-home {
    -webkit-animation: fadeInBottomToTop 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
            animation: fadeInBottomToTop 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}



/* -- Cartes d'expérience -- */

#wrapper #titre-xp-home .reveal-effect {
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition: all 1s cubic-bezier(.62,-0.01,.24,1.43);
    -o-transition: all 1s cubic-bezier(.62,-0.01,.24,1.43);
    transition: all 1s cubic-bezier(.62,-0.01,.24,1.43);
}

#wrapper #titre-xp-home .reveal-effect.is-animated {
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 1;
}

#wrapper #xp-home .reveal-effect {
    position: relative;
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition: all 1s cubic-bezier(.62,-0.01,.24,1.43);
    -o-transition: all 1s cubic-bezier(.62,-0.01,.24,1.43);
    transition: all 1s cubic-bezier(.62,-0.01,.24,1.43);
}

#wrapper #xp-home .reveal-effect.is-animated {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
}

#wrapper #xp-home .row-child > .row-inner > .reveal-effect:nth-child(2) {
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

#wrapper #xp-home .row-child > .row-inner > .reveal-effect:nth-child(3) {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

#wrapper #xp-home .row-child > .row-inner > .reveal-effect:nth-child(4) {
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
}

#wrapper #xp-home .row-child > .row-inner > .reveal-effect:nth-child(5) {
    -webkit-transition-delay: .8s;
         -o-transition-delay: .8s;
            transition-delay: .8s;
}

#wrapper #xp-home .row-child > .row-inner > .reveal-effect:nth-child(6) {
    -webkit-transition-delay: 1s;
         -o-transition-delay: 1s;
            transition-delay: 1s;
}

/* ---- */

/* -- Nos références -- */

#wrapper #ref-home .reveal-effect .tmb {
    position: relative;
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper #ref-home .reveal-effect.is-animated .tmb {
    opacity: 1;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper #ref-home .big-grid .tmb:nth-of-type(1) {
    position: relative;
    -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
            transform: translateX(-50px);
    -webkit-transition-delay: 0;
         -o-transition-delay: 0;
            transition-delay: 0;
}

#wrapper #ref-home .big-grid .tmb:nth-of-type(2) {
    position: relative;
    -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

#wrapper #ref-home .big-grid.is-animated .tmb:nth-of-type(1),
#wrapper #ref-home .big-grid.is-animated .tmb:nth-of-type(2) {
    position: relative;
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
}

#wrapper #ref-home .small-grid .tmb:nth-of-type(1),
#wrapper #ref-home .small-grid .tmb:nth-of-type(2),
#wrapper #ref-home .small-grid .tmb:nth-of-type(3) {
    position: relative;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition-delay: 0;
         -o-transition-delay: 0;
            transition-delay: 0;
    -webkit-transition: all 1.5s cubic-bezier(.62,-0.01,.24,1.43);
    -o-transition: all 1.5s cubic-bezier(.62,-0.01,.24,1.43);
    transition: all 1.5s cubic-bezier(.62,-0.01,.24,1.43);
}

#wrapper #ref-home .small-grid .tmb:nth-of-type(2) {
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

#wrapper #ref-home .small-grid .tmb:nth-of-type(3) {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

#wrapper #ref-home .small-grid.is-animated .tmb:nth-of-type(1),
#wrapper #ref-home .small-grid.is-animated .tmb:nth-of-type(2),
#wrapper #ref-home .small-grid.is-animated .tmb:nth-of-type(3) {
    position: relative;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
}

/* ---- */

/* -- Avis clients -- */

#wrapper #reassu-home .reveal-effect:nth-child(1),
#wrapper #reassu-home .reveal-effect:nth-child(2) {
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper #reassu-home .reveal-effect.is-animated:nth-child(1),
#wrapper #reassu-home .reveal-effect.is-animated:nth-child(2) {
    opacity: 1;
}

#wrapper #reassu-home .reveal-effect:nth-child(2) {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
}

#wrapper #reassu-home .reveal-effect.is-animated:nth-child(2) {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

/* ---- */

/* -- */

/* - Page Internes - */

#header-pages .uncont {
    position: relative;
    -webkit-animation: fadeInTop 1s cubic-bezier(.77,0,.57,1) both .7s;
            animation: fadeInTop 1s cubic-bezier(.77,0,.57,1) both .7s;
    opacity: 1;
}

#bloc_header {
    -webkit-animation: fadeInTop 1s cubic-bezier(.77,0,.57,1) both .8s;
            animation: fadeInTop 1s cubic-bezier(.77,0,.57,1) both .8s;
    opacity: 1;
}

@-webkit-keyframes fadeInTop {
    from {
        opacity: 0;
        top: -30px;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        top: -30px;
    }

    to {
        opacity: 1;
        top: 0;
    }
}

/* -- Bloc - Redirection références -- */

#ref-wrap .col-txt-ref.reveal-effect {
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#ref-wrap .col-txt-ref.reveal-effect.is-animated {
    opacity: 1;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
}

#wrapper #ref-wrap .col-screen-ref .uncont::before {
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper #ref-wrap:hover .col-screen-ref .uncont::before {
    -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
            transform: translateX(-50px);
}

/* -- Bloc - Nos autres expertises -- */

#grid-xp-wrap .wpb_column.reveal-effect {
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#grid-xp-wrap .wpb_column.reveal-effect.is-animated {
    opacity: 1;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
}

#grid-xp-wrap .wpb_column.reveal-effect:nth-of-type(2) {
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
}

#grid-xp-wrap .wpb_column.reveal-effect:nth-of-type(3) {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

#grid-xp-wrap .wpb_column.reveal-effect:nth-of-type(4) {
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
}


/* -- Icons Pages -- */

#wrapper .icons-page-wrap .icon-page.reveal-effect {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper .icons-page-wrap .icon-page.reveal-effect.is-animated {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}

#wrapper .icons-page-wrap .icon-page:nth-of-type(2) {
    -webkit-transition-delay: .2s;
         -o-transition-delay: .2s;
            transition-delay: .2s;
} 

#wrapper .icons-page-wrap .icon-page:nth-of-type(3) {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

#wrapper .icons-page-wrap .icon-page:nth-of-type(4) {
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
}

/* - Page Agence - */

#expertises > div > div > div:first-child .tt-seo.reveal-effect,
#expertises > div > div > div:first-child .tt-marketing.reveal-effect,
#expertises > div > div > div:first-child .tt-seo.reveal-effect::after,
#expertises > div > div > div:first-child .tt-marketing.reveal-effect::after,
#expertises > div > div > div:first-child .tt-seo.reveal-effect + .uncode_text_column.reveal-effect,
#expertises > div > div > div:first-child .tt-marketing.reveal-effect + .uncode_text_column.reveal-effect {
    -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#expertises > div > div > div:first-child .tt-seo.reveal-effect + .uncode_text_column.reveal-effect {
    -webkit-transition-delay: .1s;
         -o-transition-delay: .1s;
            transition-delay: .1s;
}

#expertises > div > div > div:first-child .tt-marketing.reveal-effect {
    -webkit-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s;
}

#expertises > div > div > div:first-child .tt-marketing.reveal-effect + .uncode_text_column.reveal-effect {
    -webkit-transition-delay: .20s;
         -o-transition-delay: .20s;
            transition-delay: .20s;
}

#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect,
#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect,
#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect::after,
#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect::after,
#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect + .uncode_text_column.reveal-effect,
#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect + .uncode_text_column.reveal-effect {
    -webkit-transform: translateX(-50px);
        -ms-transform: translateX(-50px);
            transform: translateX(-50px);
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect{
    -webkit-transition-delay: .25s;
         -o-transition-delay: .25s;
            transition-delay: .25s;
}

#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect + .uncode_text_column.reveal-effect {
    -webkit-transition-delay: .30s;
         -o-transition-delay: .30s;
            transition-delay: .30s;
}

#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect {
    -webkit-transition-delay: .35s;
         -o-transition-delay: .35s;
            transition-delay: .35s;
}

#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect + .uncode_text_column.reveal-effect {
    -webkit-transition-delay: .40s;
         -o-transition-delay: .40s;
            transition-delay: .40s;
}

#expertises > div > div > div:first-child .tt-seo.reveal-effect.is-animated,
#expertises > div > div > div:first-child .tt-marketing.reveal-effect.is-animated,
#expertises > div > div > div:first-child .tt-seo.reveal-effect.reveal-effect.is-animated::after,
#expertises > div > div > div:first-child .tt-marketing.reveal-effect.is-animated::after,
#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect.is-animated,
#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect.is-animated,
#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect.is-animated::after,
#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect.is-animated::after,
#expertises > div > div > div:first-child .tt-seo.reveal-effect + .uncode_text_column.reveal-effect.is-animated,
#expertises > div > div > div:first-child .tt-marketing.reveal-effect + .uncode_text_column.reveal-effect.is-animated,
#expertises > div > div > div:nth-child(2) .tt-web.reveal-effect + .uncode_text_column.reveal-effect.is-animated,
#expertises > div > div > div:nth-child(2) .tt-formation.reveal-effect + .uncode_text_column.reveal-effect.is-animated {
    -webkit-transform: translateX(0px);
        -ms-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 1;
}

#expertises > div > div > div:last-child-child .tt-web.reveal-effect {
    -webkit-transition-delay: .4s;
         -o-transition-delay: .4s;
            transition-delay: .4s;
}

#expertises > div > div > div:last-child-child .tt-formation.reveal-effect {
    -webkit-transition-delay: .6s;
         -o-transition-delay: .6s;
            transition-delay: .6s;
}

#wrapper .recrutement-wrap .col-img .uncode-single-media.reveal-effect {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper .recrutement-wrap .col-img .uncode-single-media.reveal-effect.is-animated {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}

#wrapper #connect .col-txt.reveal-effect {
    opacity: 0;
    -webkit-transform: translateY(-50px);
        -ms-transform: translateY(-50px);
            transform: translateY(-50px);
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper #connect .col-txt.reveal-effect.is-animated {
    opacity: 1;
    -webkit-transform: translateY(0px);
        -ms-transform: translateY(0px);
            transform: translateY(0px);
}

#wrapper .partenariats .reveal-effect {
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper .partenariats .reveal-effect.is-animated {
    opacity: 1;
}

#wrapper .partenariats .uncode-single-media.reveal-effect {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    opacity: 0;
    -webkit-transition: all 1s cubic-bezier(.77,0,.18,1);
    -o-transition: all 1s cubic-bezier(.77,0,.18,1);
    transition: all 1s cubic-bezier(.77,0,.18,1);
}

#wrapper .partenariats .uncode-single-media.reveal-effect.is-animated {
    -webkit-transform: scale(1);
        -ms-transform: scale(1);
            transform: scale(1);
    opacity: 1;
}


/* ================================================== 
RESPONSIVE
================================================== */

@media screen and (max-width: 959px) {
    #wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a > svg {
        top: 10%;
    }
}

@media screen and (max-width: 479px) {
    #wrapper #menu-menu-principal-1 .menu-item-1625 > .drop-menu > li > a > svg {
        top: 1px;
    }
}