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

* {	margin:0; padding:0; -webkit-text-size-adjust: none; box-sizing:border-box;-moz-box-sizing:border-box;}

a { text-decoration:none; color:#49c2d1;}

ul { list-style:none;}

img { border:0; height:auto; max-width:100%; vertical-align: bottom;}

body { font:300 18px 'Montserrat', Arial, Helvetica, sans-serif; font-display: auto;color:#000;}

@font-face {
    font-family: 'king_basil_literegular';
    font-display: swap;
    src: url('../font/king-basil-lite-webfont.eot');
    src: url('../font/king-basil-lite-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/king-basil-lite-webfont.woff2') format('woff2'),
    url('../font/king-basil-lite-webfont.woff') format('woff'),
    url('../font/king-basil-lite-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

a, a:hover,
nav a:hover::after, nav a::after,
.demarrons a:hover::before, .demarrons a::before,
.realisations figure:hover figcaption, .realisations figure figcaption,
.liste-categorie li label:hover::after , .liste-categorie li label::after,
.bnt-retour a:hover::after, .bnt-retour a::after,
.autres-pages li a:hover span, .autres-pages li a span,
.page-contact input[type=submit]:hover, .page-contact input[type=submit],
.page-modelisation .video a img, .page-modelisation .video a:hover img,
.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_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,
.page-votre-projet .gform_wrapper .gform_page_footer .button.gform_button,
body .gform_wrapper .gform_footer input.button, body .gform_wrapper .gform_footer input[type=submit],
body .gform_wrapper .gform_footer input.button:hover, body .gform_wrapper .gform_footer input[type=submit]:hover
{ -webkit-transition: all 0.5s ease-in-out ; -moz-transition: all 0.5s ease-in-out ; -ms-transition: all 0.5s ease-in-out ; -o-transition: all 0.5s ease-in-out ; transition: all 0.5s ease-in-out ;}

.flex, .logiciels ul
{ display: flex; display: -webkit-box;  display: -ms-flexbox; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;}



/* animation des blocs */
.js .presentation.anim, .bloc.anim .img-metier img,
.js .bloc.anim .texte-metier,
.js .points:nth-child(odd) .bloc.anim .texte-metier,
.js .livres-blanc .anim,
.js .adresse .anim,
.js .page-modelisation .anim.intro .bloc,
.js .page-modelisation .intro.anim .bloc:first-child::before,
.js .page-modelisation .presentation-modelisation.anim::before,
.js .page-modelisation .presentation-modelisation .anim .bloc,
.js .page-modelisation .video.anim,
.js .page-modelisation .methodologie.anim,
.js .page-modelisation .projets.anim,
.js .page-web .anim.intro .bloc,
.js .page-web .intro.anim .bloc:first-child::before,
.js .page-web .presentation-web.anim::before,
.js .page-web .presentation-web .anim .bloc,
.js .page-web .video.anim,
.js .page-web .methodologie.anim,
.js .page-mobile .anim.intro .bloc,
.js .page-mobile .intro.anim .bloc:first-child::before,
.js .page-mobile .intro .bloc:nth-child(2)::after,
.js .page-mobile .presentation-mobile .anim .bloc,
.js .page-mobile .video.anim,
.js .page-mobile .methodologie.anim,
.js .page-notre-agence article > div:nth-child(6n + 1).anim .bloc,
.js .page-notre-agence article > div:nth-child(6n + 1).anim h2,
.js .page-notre-agence article > div:nth-child(6n + 2).anim .bloc,
.js .page-notre-agence article > div:nth-child(6n + 3).anim .bloc,
.js .page-notre-agence article > div:nth-child(6n + 4).anim .bloc,
.js .page-notre-agence article > div:nth-child(6n + 6).anim .bloc,
.js .page-notre-agence article > div:nth-child(6n + 5).anim .bloc,
.js .page-notre-agence article > div:nth-child(6n + 5).anim h2,
.js .page-notre-agence .references.anim,
.js .page-notre-agence .rencontrons-nous .anim,
.js .page-hebergement .anim,
.js .main-texte-libre.anim .bloc,
.js .single-case .anim .bloc,
.js .single-case .anim
{ opacity: 0; -moz-transition: all 900ms ease; -webkit-transition: all 900ms ease; -o-transition: all 900ms ease; transition: all 900ms ease; -moz-transform: translate3d(0px, 100px, 0px); -webkit-transform: translate3d(0px, 100px, 0px); -o-transform: translate(0px, 100px); -ms-transform: translate(0px, 100px); transform: translate3d(0px, 100, 0px);  -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;}

/* plus lent */
.js .page-modelisation .presentation-modelisation .anim .bloc:nth-child(2),
.js .page-modelisation .anim.intro .bloc,
.js .page-web .presentation-web .anim .bloc:nth-child(2),
.js .page-web .anim.intro .bloc,
.js .page-mobile .presentation-mobile .anim .bloc:nth-child(2),
.js .page-mobile .anim.intro .bloc
{-moz-transition: all 1200ms ease; -webkit-transition: all 1200ms ease; -o-transition: all 1200ms ease; transition: all 1200ms ease;}

/* encore plus lent */
.js .bloc.anim .img-metier img { -moz-transition: all 2000ms ease; -webkit-transition: all 2000ms ease; -o-transition: all 2000ms ease; transition: all 2000ms ease;}

/* bloc venant de la gauche */
.js .bloc.anim .texte-metier,
.js .page-modelisation .intro.anim .bloc:first-child::before,
.js .page-web .intro.anim .bloc:first-child::before,
.js .page-mobile .intro.anim .bloc:first-child::before,
.js .page-notre-agence article > div:nth-child(6n + 1).anim .bloc:nth-child(1),
.js .page-notre-agence article > div:nth-child(6n + 5).anim .bloc:nth-child(1),
.js .page-notre-agence article > div:nth-child(6n + 2).anim .bloc:first-child
{-moz-transform: translate3d(-100px, 0, 0px); -webkit-transform: translate3d(-100px, 0, 0px); -o-transform: translate(-100px, 0); -ms-transform: translate(-100px, 0); transform: translate3d(-100px, 0, 0px);}

/* bloc venant de la droite */
.js .points:nth-child(odd) .bloc.anim .texte-metier,
.js .page-modelisation .presentation-modelisation.anim::before,
.js .page-web .presentation-web.anim::before,
.js .page-mobile .intro .bloc:nth-child(2)::after,
.js .page-notre-agence article > div:nth-child(6n + 1).anim h2,
.js .page-notre-agence article > div:nth-child(6n + 5).anim h2,
.js .page-notre-agence article > div:nth-child(6n + 3).anim .bloc:nth-child(2),
.js .page-notre-agence article > div:nth-child(6n + 4).anim .bloc:nth-child(2),
.js .page-notre-agence article > div:nth-child(6n + 6).anim .bloc:nth-child(2)
{-moz-transform: translate3d(100px, 0, 0px); -webkit-transform: translate3d(100px, 0, 0px); -o-transform: translate(100px, 0); -ms-transform: translate(100px, 0); transform: translate3d(100px, 0, 0px);}


.js .presentation.anim.active,
.js .bloc.anim.active .img-metier img,
.js .bloc.anim.active .texte-metier,
.js .points:nth-child(odd) .bloc.anim.active .texte-metier,
.js .livres-blanc .anim.active,
.js .adresse .anim.active,
.js .page-modelisation .anim.active.intro .bloc,
.js .page-modelisation .intro.anim.active .bloc:first-child::before,
.js .page-modelisation .presentation-modelisation.anim.active::before,
.js .page-modelisation .presentation-modelisation .anim.active .bloc,
.js .page-modelisation .video.anim.active,
.js .page-modelisation .methodologie.anim.active,
.js .page-web .anim.active.intro .bloc,
.js .page-web .intro.anim.active .bloc:first-child::before,
.js .page-web .presentation-web.anim.active::before,
.js .page-web .presentation-web .anim.active .bloc,
.js .page-web .video.anim.active,
.js .page-web .methodologie.anim.active,
.js .page-mobile .anim.active.intro .bloc,
.js .page-mobile .intro.anim.active .bloc:first-child::before,
.js .page-mobile .intro.anim.active .bloc:nth-child(2)::after,
.js .page-mobile .presentation-mobile .anim.active .bloc,
.js .page-mobile .video.anim.active,
.js .page-mobile .methodologie.anim.active,
.js .page-modelisation .projets.anim.active,
.js .page-notre-agence article > div:nth-child(6n + 1).anim.active .bloc,
.js .page-notre-agence article > div:nth-child(6n + 1).anim.active h2,
.js .page-notre-agence article > div:nth-child(6n + 2).anim.active .bloc,
.js .page-notre-agence article > div:nth-child(6n + 3).anim.active .bloc,
.js .page-notre-agence article > div:nth-child(6n + 4).anim.active .bloc,
.js .page-notre-agence article > div:nth-child(6n + 6).anim.active .bloc,
.js .page-notre-agence article > div:nth-child(6n + 5).anim.active .bloc,
.js .page-notre-agence article > div:nth-child(6n + 5).anim.active h2,
.js .page-notre-agence .references.anim.active,
.js .page-notre-agence .rencontrons-nous .anim.active,
.js .page-hebergement .anim.active,
.js .main-texte-libre.anim.active .bloc,
.js .article-cases .anim.active .bloc,
.js .single-case .anim.active
{ opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px);}

/* les animations */
@keyframes stickAnim {
    0% { transform: translateY(-90px);}
    100% {transform: translateY(0);}}

@keyframes slideInLeft {
    0% { transform: translate3d(-100%,0,0); visibility: visible;}
    100% { transform: translate3d(0,0,0);}}

/* styles par defaut */
.bnt-retour a { font:400 26px 'Abhaya Libre', Arial, Helvetica, sans-serif; font-display: auto;position: relative; margin-bottom: 60px; display: block;}
.bnt-retour a::after,
.page-blog article h2::after,
.page-base article h2::after,
.page-hebergement article h2::after,
.page-modelisation h2::after,
.page-web h2::after,
.page-mobile h2::after,
.page-notre-agence h2::after, .article-cases h2::after
{content: ""; width: 0; background: #53bdcd; position: absolute; bottom:-3px; left: 0; height: 2px;}

.bnt-retour a:hover::after,
.page-blog article h2::after,
.page-base article h2::after,
.page-hebergement article h2::after,
.page-modelisation h2::after,
.page-web h2::after,
.page-mobile h2::after,
.article-cases h2::after
{ width: 20px;}