﻿.subscribeHide {
    display: none;
}

.ClientsList {
    position: absolute;
    top: 0px;
    text-indent: -2500px;
    letter-spacing: normal;
    color: #fff;
}

/* Styles pour A/B */
.testBimg {
    display: none;
}

.HeaderText {
    margin-bottom: 0 !important;
}

#HeaderArchitect h1 {
    font-size: 4.4em;
    margin: 0.15em 0;
}

.ButtonArchitect img {
    margin: 0 auto;
}

.ButtonArchitect a.button-turquoise {
    font-size: 1.2em;
    padding: 0.8em 2.5em;
}

@media (min-width: 1000px) {
    .ImageMobileAnim {
        position: absolute;
        left: 7em;
    }

    .ImageHeaderAnim {
        left: 0;
        right: auto;
        position: fixed;
        z-index: -1;
    }

    .ButtonArchitect {
        margin-bottom: 32em;
    }
}

@media (min-width: 2000px) {
    .ImageHeaderAnim {
        width: 100% !important;
        height: auto !important;
    }
}

@media (min-width: 2000px) {
    .ImageHeaderAnim {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 999px) {
    .ImageHeaderAnim {
        position: fixed;
        right: -200px;
        top: -100px;
        min-height: 100%;
        min-width: 100%;
        min-width: calc(100% + 200px);
        z-index: -1;
    }
}

@media (max-width: 48em) {
    .ButtonArchitect {
        margin-bottom: 0px;
    }

    #HeaderArchitect h1 {
        font-size: 2.5em;
    }

    .ButtonArchitect a.button-turquoise {
        padding: 0.8em 1em;
    }
}

.AccueilAnim, .AccueilAnim .AccueilAnimImg {
    display: none;
}


@media (min-width: 500px) {
    .AccueilAnim {
        width: 452px;
        height: 370px;
        background: url("/img/accueil-anim/AccueilAnimFond1.png") no-repeat left top, url("/img/accueil-anim/AccueilAnimFond2.png") no-repeat left top;
        position: relative;
        display: block;
    }

        .AccueilAnim .AccueilAnimImg {
            position: absolute;
            left: 80px;
            top: 59px;
            display: block;
        }
}


/* Animation CSS / format large seulement ==  */

@media screen and (min-width: 64em) {

    .fondFemmeTabletteJaune {
        height: 890px;
    }

    .fondPersonneOrdiBleu {
        height: 1108px;
    }


        .fondPersonneOrdiBleu > .pure-g,
        .SectionAide > .pure-g,
        .TextAndImages > .pure-g,
        .fondFemmeTabletteJaune > .pure-g {
            transition: opacity 0.75s ease;
            -webkit-transition: opacity 0.75s ease;
            opacity: 0;
        }

            .fondPersonneOrdiBleu > .pure-g:nth-of-type(1) {
                height: 141px;
            }

            .fondFemmeTabletteJaune > .pure-g:nth-of-type(1) {
                height: 199px;
            }

            .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(1),
            .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(1) {
                animation-name: slideDown;
                -webkit-animation-name: slideDown;
            }

            .fondPersonneOrdiBleu > .pure-g:nth-of-type(2) {
                height: 677px;
                opacity: 1;
            }

            .fondFemmeTabletteJaune > .pure-g:nth-of-type(2) {
                height: 402px;
                opacity: 1;
            }

                .fondPersonneOrdiBleu > .pure-g:nth-of-type(2) .pure-u-1,
                .fondFemmeTabletteJaune > .pure-g:nth-of-type(2) .pure-u-1 {
                    opacity: 0;
                }

            .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1,
            .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1 {
                opacity: 1;
                animation-name: slideUp;
                animation-duration: 0.9s;
                animation-fill-mode: both;
                transition: opacity 2s ease;
                -webkit-animation-name: slideUp;
                -webkit-animation-duration: 0.9s;
                -webkit-animation-fill-mode: both;
                -webkit-transition: opacity 2s ease;
            }


                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(1),
                .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(1) {
                    animation-delay: 0.15s;
                    -webkit-animation-delay: 0.15s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(2),
                .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(2) {
                    animation-delay: 0.30s;
                    -webkit-animation-delay: 0.30s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(3),
                .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(3) {
                    animation-delay: 0.45s;
                    -webkit-animation-delay: 0.45s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(4),
                .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(4) {
                    animation-delay: 0.6s;
                    -webkit-animation-delay: 0.6s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(5),
                .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(5) {
                    animation-delay: 0.75s;
                    -webkit-animation-delay: 0.75s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(6),
                .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(6) {
                    animation-delay: 0.90s;
                    -webkit-animation-delay: 0.90s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(7) {
                    animation-delay: 1.05s;
                    -webkit-animation-delay: 1.05s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(8) {
                    animation-delay: 1.2s;
                    -webkit-animation-delay: 1.2s;
                }

                .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(9) {
                    animation-delay: 1.35s;
                    -webkit-animation-delay: 1.35s;
                }

            .fondPersonneOrdiBleu > .pure-g:nth-of-type(3),
            .fondFemmeTabletteJaune > .pure-g:nth-of-type(3) {
                height: 50px;
            }

            .fondPersonneOrdiBleu > .pure-g.open:nth-of-type(3)
            .fondFemmeTabletteJaune > .pure-g.open:nth-of-type(3) {
                animation-name: slideUp;
                animation-delay: 0.90s;
                -webkit-animation-name: slideUp;
                -webkit-animation-delay: 0.90s;
            }

    .SectionAide {
        height: auto;
    }

    .home-ekomi {
        background: url(https://www.webself.net//file/app/7/comment-creer-site/third-bg.png) no-repeat center;
        background-size: cover;
        padding: 60px 0px;
        background-attachment: fixed;
    }

    .ekomi-widget-container {
        width: 100%;
        overflow: hidden;
    }

    .TextAndImages {
        height: 562px;
    }

    .SectionAide > .pure-g:nth-of-type(1) {
        height: 154px;
    }

    .TextAndImages > .pure-g:nth-of-type(1) {
        height: 402px;
    }

    .TextAndImages > .pure-g.open:nth-of-type(1) .pure-u-1:nth-of-type(1) {
        animation-name: slideLeft;
        animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-name: slideLeft;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;
    }

    .TextAndImages > .pure-g.open:nth-of-type(1) .pure-u-1:nth-of-type(2) {
        animation-name: slideRight;
        animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-name: slideRight;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;
    }

    .SectionAide > .pure-g.open:nth-of-type(1) {
        animation-name: slideDown;
        -webkit-animation-name: slideDown;
    }

    .SectionAide > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(1) {
        animation-name: slideLeft;
        animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-name: slideLeft;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;
    }

    .SectionAide > .pure-g.open:nth-of-type(2) .pure-u-1:nth-of-type(2) {
        animation-name: slideRight;
        animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-name: slideRight;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;
    }

    .SectionAide > .pure-g.open,
    .fondPersonneOrdiBleu > .pure-g.open,
    .fondFemmeTabletteJaune > .pure-g.open,
    .TextAndImages > .pure-g.open {
        opacity: 1;
        animation-duration: 1s;
        animation-fill-mode: both;
        -webkit-animation-duration: 1s;
        -webkit-animation-fill-mode: both;
    }
}

@-webkit-keyframes slideUp {
    0% {
        transform: translate3d(0px, 100%, 0px);
    }

    100% {
        transform: translate3d(0px, 0, 0px);
    }
}

@keyframes slideUp {
    0% {
        transform: translate3d(0px, 100%, 0px);
    }

    100% {
        transform: translate3d(0px, 0, 0px);
    }
}

@-webkit-keyframes slideDown {
    0% {
        transform: translate3d(0px, -50%, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes slideDown {
    0% {
        transform: translate3d(0px, -50%, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        transform: translate3d(-100%, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes slideLeft {
    0% {
        transform: translate3d(-100%, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@-webkit-keyframes slideRight {
    0% {
        transform: translate3d(100%, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

@keyframes slideRight {
    0% {
        transform: translate3d(100%, 0px, 0px);
    }

    100% {
        transform: translate3d(0px, 0px, 0px);
    }
}

/* Classes spéciales régions */

header.quebec:before {
    width: 100%;
    position: absolute;
    height: 100%;
    background-image: url("/img/tag-quebec.png");
    background-position: 20% 300px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    content: "";
    left: 0;
    top: 0;
}

header.canada:before {
    width: 100%;
    position: absolute;
    height: 100%;
    background-image: url("/img/tag-canada.png");
    background-position: 18% 320px;
    background-size: 200px 200px;
    background-repeat: no-repeat;
    content: "";
    left: 0;
    top: 0;
}

header.canada.en:before {
    background-image: url("/img/tag-canada-en.png");
}


@media (max-width: 98em) {
    header.canada:before,
    header.quebec:before {
        background-position: 10% 370px;
    }
}

@media (max-width: 68em) {
    header.canada:before,
    header.quebec:before {
        background-position: 10% 425px;
        background-size: 150px 150px;
    }

    .home-ekomi {
        padding: 0px 0px;
        background-size: 500%;
    }
}

@media (max-width: 48em) {
    header.canada:before,
    header.quebec:before {
        background-position: 10% 265px;
        background-size: 100px 100px;
    }

    .home-ekomi {
        background-attachment: local;
        background-position-y: top;
        background-size: cover;
    }
}

@media (max-width: 38em) {
    header.canada:before,
    header.canada.en:before,
    header.quebec:before {
        background-image: none !important;
    }
}

.SectionCanada,
.SectionQuebec {
    display: none !important;
}

    .SectionQuebec.quebec {
        display: block;
        background-image: url("/img/fond-section-quebec.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .SectionCanada.canada {
        display: block;
        background-image: url("/img/fond-section-canada.jpg");
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
    }
