@font-face {
    font-family: 'BlissProExtraLight';
    src: url('f/BlissProExtraLight.eot');
    src: url('f/BlissProExtraLight.eot') format('embedded-opentype'),
         url('f/BlissProExtraLight.woff2') format('woff2'),
         url('f/BlissProExtraLight.woff') format('woff'),
         url('f/BlissProExtraLight.ttf') format('truetype'),
         url('f/BlissProExtraLight.svg#BlissProExtraLight') format('svg');
}
@font-face {
    font-family: 'BlissProMedium';
    src: url('f/BlissProMedium.eot');
    src: url('f/BlissProMedium.eot') format('embedded-opentype'),
         url('f/BlissProMedium.woff2') format('woff2'),
         url('f/BlissProMedium.woff') format('woff'),
         url('f/BlissProMedium.ttf') format('truetype'),
         url('f/BlissProMedium.svg#BlissProMedium') format('svg');
}
@font-face {
    font-family: 'BlissPro';
    src: url('f/blisspro-regular.eot');
    src: url('f/blisspro-regular.eot') format('embedded-opentype'),
         url('f/blisspro-regular.woff2') format('woff2'),
         url('f/blisspro-regular.woff') format('woff'),
         url('f/blisspro-regular.ttf') format('truetype'),
         url('f/blisspro-regular.svg#BlissProMedium') format('svg');
}
@font-face {
    font-family: 'fs_lola_italic';
    src: url('f/fs_lola_italic.eot');
    src: url('f/fs_lola_italic.eot') format('embedded-opentype'),
         url('f/fs_lola_italic.woff2') format('woff2'),
         url('f/fs_lola_italic.woff') format('woff'),
         url('f/fs_lola_italic.ttf') format('truetype'),
         url('f/fs_lola_italic.svg#fs_lola_italic') format('svg');
}
@font-face {
    font-family: 'FSLolaRegular';
    src: url('f/FSLolaRegular.eot');
    src: url('f/FSLolaRegular.eot') format('embedded-opentype'),
         url('f/FSLolaRegular.woff2') format('woff2'),
         url('f/FSLolaRegular.woff') format('woff'),
         url('f/FSLolaRegular.ttf') format('truetype'),
         url('f/FSLolaRegular.svg#FSLolaRegular') format('svg');
}
@font-face {
    font-family: 'FSLolaMedium';
    src: url('f/fs_lola_medium.eot');
    src: url('f/fs_lola_medium.eot') format('embedded-opentype'),
         url('f/fs_lola_medium.woff2') format('woff2'),
         url('f/fs_lola_medium.woff') format('woff'),
         url('f/fs_lola_medium.ttf') format('truetype'),
         url('f/fs_lola_medium.svg#FSLola_medium') format('svg');
}




/*  - EXPERTISES -  */
#offres {background-image: url(i/offres.jpg);}
#offres .home-banner.screen-height {height: 50% !important;min-height: 512px;}
#offres #expertises .projects {margin-top:-7vw;clip-path: url(i/biseaux.svg#last);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);overflow: hidden}
#offres #expertises .projects .refonte {background-image: url(i/bg-refonte.jpg); background-repeat: no-repeat;background-size: cover;padding: 5vw 15% 5vw 15%;}
#offres #expertises .projects .slowcontent {background-image: url(i/bg-slowcontent.jpg); background-repeat: no-repeat;background-size: cover;padding: 5vw 15% 5vw 15%;}
#offres #fleur-graph {position:absolute;max-height:200px;max-width:200px;left:25%;top:7%;}
#offres #fleur-graph .drawing {fill:none;stroke:#EB5961;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
@media screen and (max-width: 767px) {
    #offres .sided-content .w50 {padding: 0 !important} 
}
@media screen and (max-width: 420px) {
    #offres .home-banner.screen-height {display:flex;align-items: center;}
	#offres .huge-title {padding-top:0}
}
/*  - FIN EXPERTISES -  */

/*  - BLOG - RESSOURCES -  */
#blog {background:url(i/blog.jpg)}
#ressources {background:url(i/ressources.jpg)}
#blog #blog-section, #ressources #blog-section {width:100%;overflow: hidden;margin-top:-7vw;padding-top:7vw;padding-bottom:7vw;clip-path: url(i/biseaux.svg#last);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);overflow: hidden}
#blog #blog-section {background:#0194b3 url(i/bg5.jpg)}
#ressources #blog-section {background:#F1F1F1 url(i/bg1.png)}
#blog #blog-section .list-blog {}
#blog .home-banner.screen-height, #ressources .home-banner.screen-height {height: 50% !important;min-height: 512px;}
#blog .masonry-block {width: 60%;max-width:1280px}
#blog .masonry-block article {width:49.7%}
#offre #blog .masonry-block article {width:100%}
#blog .masonry-block article .item {background: #fff}
#blog .masonry-block article .item .content, #ressources .masonry-block article .item .content {padding:20px;background: #fff}
#blog .masonry-block article .item a:hover .content {transform:translate(0,-40px)}
#blog .masonry-block time {background: #f1f1f1;position: absolute;top:0;left:0;font-size: 16px;color:#4b4b4b;padding:10px}
#blog .masonry-block h3, #ressources .masonry-block h3 {color:#4b4b4b;display: block}
#blog .masonry-block .category, #ressources .masonry-block .category {border-radius: 3px;padding-top:3px;color:#FFF; text-transform:none}
#blog .masonry-block .description {color:#4b4b4b;font-family:"FSLolaRegular";opacity: 0;height: 0;transition: all 500ms}
#blog .masonry-block article .item a:hover .description {opacity: 1;}
#blog .masonry-block .readtime {color:#4b4b4b; opacity: .8;font-family:"FSLolaRegular";font-size: 16px;padding:15px 20px}
#blog .masonry-block article .item .imgcover {position: relative;display: block;width:100%; text-align: center;overflow:hidden;min-height:auto}
#blog .masonry-block article .item .imgcover img {width:100%}
#blog .masonry-block article .item .imgcover::after, #ressources .masonry-block article .item .imgcover::after {content: "";position: absolute;z-index: 0;top: 0;left: 0;width: 100%;height: 100%;background: rgba(32, 28, 63, 0.1);transition: all 500ms}
#blog .masonry-block article .item a:hover .imgcover::after, #ressources .masonry-block article .item a:hover .imgcover::after {background: rgba(32, 28, 63, 0)}
#blog .masonry-block .big {width:100%}
#blog .masonry-block .big .item a {display: flex}
#blog .masonry-block .big .item .imgcover {flex-basis: 60%}
#blog .masonry-block .big .item .container {flex-basis: 40%}
#blog .masonry-block .big .description {opacity:1;height: auto}
#blog .masonry-block .big .item a:hover .content {transform:translate(0,-10px)}
#ressources .masonry-block {width: 80%;max-width:1600px}
#ressources .masonry-block article {width:49.7%}
#ressources .masonry-block .big {width:100%}
#ressources .masonry-block h3 {margin-bottom:60px}
#ressources .masonry-block article .item {background: #fff}
#ressources .masonry-block article .item .imgcover {position: relative;display: block;width:100%; overflow:hidden}
#ressources .masonry-block article .item .imgcover img {width:100%;height:auto}
#ressources .masonry-block article .download-button { display: inline;position: absolute;right:20px;bottom: 20px}
#ressources .masonry-block article .item a:hover .toleft {width: 100%;}
#ressources .masonry-block article .item a:hover .content {transform:translate(0,-20px)}
#blog .categories {width: 60%;max-width:1280px;margin: auto}
#ressources .categories {width: 80%;max-width:1600px;margin: auto}
#blog .categories li,#ressources .categories li {display: inline-block;font-size: 14px}
#blog .categories li a, #ressources .categories li a {text-decoration: none;color:#fff;border-radius: 3px;transition: all 500ms;text-transform:none}
#blog .categories .category.cat0, #blog .masonry-block .cat0 .category,#ressources .categories .category.cat0 {background:#4b4b4b}
#blog .categories .category.cat1, #blog .masonry-block .cat1 .category, .cat1 .category {background:#394f20}
#blog .categories .category.cat2, #blog .masonry-block .cat2 .category, .cat2 .category {background:#391238}
#blog .categories .category.cat3, #blog .masonry-block .cat3 .category, .cat3 .category {background:#023f4f}
#blog .categories .category.cat4, #blog .masonry-block .cat4 .category, .cat4 .category {background:#201c3f}
#blog .categories .category.cat5, #blog .masonry-block .cat5 .category, .cat5 .category {background:#98338f}
#blog .categories .category:hover,#blog .categories .category.active {background:#FFF;color:#4b4b4b}
#ressources .categories .category.cat1, #ressources .masonry-block .cat1 .category {background:#98338f}
#ressources .categories .category.cat2, #ressources .masonry-block .cat2 .category {background:#201c3f}
#ressources .categories .category.cat3, #ressources .masonry-block .cat3 .category {background:#eb5a61}
#blog #colibri{position:absolute;max-height:200px;max-width:200px;right:25%;top:15%;}
#ressources #colibri {position:absolute;max-height:200px;max-width:200px;right:20%;top:30%;}
#blog #colibri .drawing,#ressources #colibri .drawing {fill:none;stroke:#EB5961;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
/***** responsive ****/
@media screen and (max-width: 1280px) {
    #blog .masonry-block,#blog .categories {width: 80%;}
    #blog .masonry-block .big .item .imgcover {}
    #blog .masonry-block .big .item .imgcover img {width:auto;height:100%}
}
@media screen and (max-width: 1023px) {
    #blog .masonry-block .big .item a {display:block}
    #blog .masonry-block .big .item .imgcover {flex-basis: 100%}
	#blog .masonry-block .big .item .imgcover img {width:100%}
    #blog .masonry-block .big .item .container {flex-basis: 100%}
}
@media screen and (max-width: 945px) {
    #blog .masonry-block article,#ressources .masonry-block article,#ressources .masonry-block .big {width:100%}
    #blog .masonry-block .big .item .imgcover {}
    #blog .masonry-block .big .item .imgcover img {width:100%}
}
@media screen and (max-width: 420px) {
    #blog .masonry-block time, #blog .masonry-block .readtime {font-size: 14px;}
}
/*  - FIN RESSOURCES -  */


/*  - BLOG ARTICLE -  */
#blogarticle {}
#blogarticle .home-banner {display: flex;flex-direction: row-reverse;}
#blogarticle #top {text-align: left; }
#blogarticle #top .visual {flex-basis: 43%;position: relative; display: flex;overflow: hidden}
#blogarticle #top .visual div {width: 100%;background-size: cover;background-position: center;}
#blogarticle #top .visual div img {height:100%; position:absolute;left:-30%}
#blogarticle #top .title {flex-basis: 57%;background: url(i/bg5.jpg) repeat;height: 100%; padding:140px 0 200px 70px; box-sizing: border-box}
#blogarticle #top .title>div {max-width: 1000px; padding-right: 100px; box-sizing: border-box}
#blogarticle #top .title h1 {font-size: 70px; text-align: left; line-height:70px;top:0}
#blogarticle #top .title .category, #blogarticle #top .title time {color: #FFFFFF}
#blogarticle #top .title .category {margin-top:40px}
#blogarticle #content {font-family: 'FSLolaRegular';color:#4b4b4b; background:#fff; font-size:20px; padding :150px 0 100px 0; box-sizing: border-box}
#blogarticle .biseau {position: relative; margin-top:-200px; clip-path: url(i/biseaux.svg#last);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);/*z-index:3 !important;*/background-color:#FFFFFF;}
#blogarticle #content>div {max-width:1080px;margin:auto;padding-right: 100px;padding-left: 100px; box-sizing: border-box}
#blogarticle .chapo {font-family: 'FSLolaMedium';font-weight:bold;font-size: larger;}
#blogarticle .imgleft,#blogarticle .imgright {padding-bottom: 2vw}
#blogarticle .imgleft img {float: left;width: 60%;padding-right: 30px; box-sizing: border-box}
#blogarticle .imgleft div {float: right;width: 40%}
#blogarticle .imgright img {float: right;width: 60%;padding-left: 30px; box-sizing: border-box}
#blogarticle .imgright div {float: left;width: 40%}
#blogarticle #top .category {border-radius: 3px}
#blogarticle #top .cat1 .category {background:#394f20}
#blogarticle #top .cat2 .category {background:#391238}
#blogarticle #top .cat3 .category {background:#023f4f}
#blogarticle #top .cat4 .category {background:#201c3f}
#blogarticle #top .cat5 .category {background:#98338f}
.ressources-bloc-small {width: 80%;background: #f1f1f1; overflow: hidden; padding: 0 20px 0 20px;box-sizing: border-box;margin-bottom: 2vw}
.ressources-bloc-small .infos {float:right;width:80%;padding-left: 30px;box-sizing: border-box}
.ressources-bloc-small .infos h2 {line-height: 1.2em;}
.ressources-bloc-small .infos .sub-title {text-transform:uppercase;font-family: 'BlissProExtraLight';margin-top:20px;margin-bottom:0 !important}
.ressources-bloc-small .visuals {float:left;width:20%;}
.ressources-bloc-small .visuals img {margin-top:20px; margin-bottom:20px}
#blogarticle .citation p {font-size: 1.2em;}
#blogarticle .citation .autor {color:#0093b2;font-size: 1em; text-transform: uppercase; font-style: normal; text-align: right; position: relative}
#blogarticle .citation .autor:before {display:block;content: ' ';height:4px;width:100px;background:#0093b2;position: absolute;top:0;right:0;}
#blogarticle .citation .autor strong { font-size: 1.2em}
#blogarticle .citation.externe {background: none;width:90%; margin-bottom: 3vw}
#blogarticle .citation.externe .cell {position: relative; height: 100%}
#blogarticle .citation.externe blockquote {box-sizing: border-box;position: relative;}
#blogarticle .citation.externe blockquote p {background: url(i/quote-left-dark.png) no-repeat 0 15px;padding-left:50px;}
#blogarticle .citation.externe blockquote .autor {background:none;color: #393838;padding-top: 10px;}
#blogarticle .citation.externe blockquote img {position: absolute;right: 0; bottom: 90px;}
#blogarticle .citation.interne blockquote img {width:auto;margin-right:10px}
@media screen and (max-width: 1440px) {
    #blogarticle #top .title h1 {font-size: 50px;line-height: 50px}
    #blogarticle #top .visual div img {margin-left: -50%}
}
@media screen and (max-width: 1023px) {
    .ressources-bloc-small {width: 100%}
    #blogarticle .home-banner {flex-direction: column;}
    #blogarticle #top .title {flex-basis: auto;height:auto;padding: 100px 0 50px 70px}
    #blogarticle #top .visual {flex-basis: auto}
    #blogarticle #top .visual div {width: 100%}
    #blogarticle #top .visual div img {height: auto;width: 100%;margin-left:0}
    #blogarticle .biseau {margin-top:-100px; }
    #blogarticle #content {padding-top :100px}
}
@media screen and (max-width: 767px) {
    #blogarticle .home-banner {height: auto}
	#blogarticle #top .title {padding: 70px 0 100px 50px}
    #blogarticle #content>div {padding-left: 50px;padding-right: 50px}
    #blogarticle .imgleft div, #blogarticle .imgright div,#blogarticle .imgleft img, #blogarticle .imgright img {float:none;width:100%;}
    .ressources-bloc-small {padding-bottom:20px;}
	.ressources-bloc-small .visuals {float:none;width:100%}
	.ressources-bloc-small .infos {float: none;width: 100%;padding-left: 0}
}
@media screen and (max-width: 420px) {
    #blogarticle #top .title h1 {font-size: 42px;line-height:normal}
	#blogarticle #top .title {padding-left: 20px}
	#blogarticle #content {font-size:18px}
	#blogarticle #content>div {padding-left: 20px;padding-right: 20px}
	#blogarticle h2 {margin-bottom: 20px}
    
}
/*  - FIN BLOG ARTICLE -  */

/*  - REFONTE -  */
#offre.refonte {background-image:url(i/refonte.jpg)}
#offre.refonte h1 {text-align: center}
#offre.refonte h1 span {color:#fff}
#offre.refonte .huge-title .line2{letter-spacing:1vw }
#offre.refonte .huge-title::before {background: rgba(62, 65, 40, 0.6);}
#offre.refonte #ressources-bloc {background:#d8d9db;padding-top:7vw;padding-bottom:10vw}
#ressources-bloc .argument .visuals {float:left;width:50%;position:relative;box-sizing:border-box;height:70%;margin-left:5%}
#ressources-bloc .argument .visuals::before,
#ressources-bloc .argument .visuals::after {width:45px;height:45px;display:block;position:absolute;}
#ressources-bloc .argument .visuals::before {border-top:solid 1px #999999;border-right:solid 1px #999999;top:0;right:0;}
#ressources-bloc .argument .visuals::after {border-bottom:solid 1px #999999;border-left:solid 1px #999999;bottom:-1%;left:0;}
#ressources-bloc .argument .visuals img {display:none;width:100%;height:auto;}
#ressources-bloc .argument .visuals img:first-child {display:block;}
#ressources-bloc .argument .infos {float:right;width:37%;box-sizing:border-box;padding:100px 100px 50px 0px;}
#ressources-bloc .argument .infos h2 {font-family: 'FSLolaRegular';color:#0090B5;font-size:2vw;}
#ressources-bloc .argument .infos .sub-title {font-family: 'BlissProExtraLight';color:#0090B5;font-size:1.5vw;background: url(i/zigouigoui4.png) no-repeat bottom left;padding-bottom:20px;margin-bottom:20px;text-transform:uppercase;}
#ressources-bloc .argument .infos p {font-family: 'FSLolaRegular';color:#4b4b4b;font-size:20px;}
#ressources-bloc .link {text-align: right}
#ressources-bloc .download-button {margin-top:20px; display: inline-block}

#offre.refonte #clients {background:#fff;margin-top:-7vw;padding-top:5vw;clip-path: url(i/biseaux.svg#last);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 100%);}
#offre.refonte #clients.sided-contents .h2-container {position: relative}
#offre.refonte #clients.sided-contents .h2-container h2 {border-bottom: solid 3px #4B4B4B;}
#offre.refonte #clients .s, #offre.refonte #clients .collabs {width: 80%;max-width:1600px;margin: auto}
#offre.refonte #clients .key-figure {text-align:center;width:33%;float: left;font-family: 'FSLolaRegular'; font-size: 20px;color:#4B4B4B;padding: 0 30px 0 30px; box-sizing: border-box}
#offre.refonte #clients .key-figure .number {font-size:64px; display: block;text-transform: uppercase;font-family: 'BlissPro';}
#offre.refonte #clients .key-figure strong {color:#FF585d; display: block;text-transform: uppercase;font-family: 'BlissPro';font-size: 30px;}
#offre.refonte #clients .collab {width:33%;float: left;font-family: 'FSLolaRegular';text-align: center;padding:0 5% 0 5%; box-sizing: border-box}
#offre.refonte #clients .collab h3 {color:#0093b2; font-size: 36px;line-height: 40px; padding: 20px 0 10px 0}
#offre.refonte #clients .collab p {font-size: 20px;color:#4B4B4B;}
#offre.refonte #clients .collab .date {color:#0093b2; font-size: 36px; padding-top: 0}
#offre.refonte #clients .collab .date time {padding-top: 0;font-style:normal}
#offre.refonte #clients .collab ul {font-size: 1.2vw; text-align: left;color:#4B4B4B}
#offre.refonte #clients .collab li {list-style-type: square}
#offre.refonte .skills {color:#fff;width: 80%;max-width:1600px;margin: auto;padding-bottom: 7vw}
#offre.refonte .skills article {background: rgba(32,28,63,0.8);margin: 5%;padding:40px 20px 40px 20px; text-align: center;min-height: 20vw}
#offre.refonte .skills article h1 {font-size: 2.5vw;margin-top: 2vw;line-height: 1.1em;font-family: 'BlissPro';text-transform: uppercase}
#offre.refonte .skills article p {padding-top: 30px;max-width: 270px;margin: auto;font-family: 'FSLolaRegular'}
#offre.refonte .connexe {background: url(i/bg5.jpg) repeat; padding-bottom: 7vw}
#references .connexe,
#blogarticle .connexe,
#formation .connexe {background: url(i/bg5.jpg) repeat !important;padding-bottom: 7vw}
#references .connexe {padding-bottom: 16vw}
#references .connexe h2,
#blogarticle .connexe h2,
#formation .connexe h2 {color: #fff}
#formation .masonry-block article p {padding-bottom: inherit}
#formation .masonry-block .category {padding-bottom: 0}
#offre.refonte .skills .h2-container h2, #offre.refonte #blog .h2-container h2{padding-top: 0;color:#FFF}
/***** responsive ****/
@media screen and (max-width: 1440px) {
    #ressources-bloc .argument .infos {width: 45%;padding-right: 30px;padding-top: 30px}
    #ressources-bloc .argument .infos h2 {font-size: 2.3vw}
    #ressources-bloc .argument .infos .sub-title {font-size: 2vw}
    #ressources-bloc .argument .infos p,#offre.refonte #clients .collab ul {font-size: 1.7vw}
    #ressources-bloc .argument .visuals {width: 45%}
}
@media screen and (max-width: 1023px) {
    #offre.refonte #clients .key-figures, #offre.refonte #clients .collabs {width: 90%}
    #offre.refonte #clients .key-figure {font-size: 24px}
    #offre.refonte #clients .key-figure .number {font-size: 34px}
    #offre.refonte #clients .collab {width: 100%;margin-bottom: 50px}
    #offre.refonte li:nth-child(3) {margin-top: 0}
    #offre.refonte #clients .collab h3,#offre.refonte #clients .collab .date {font-size: 30px}
    #ressources-bloc .argument .infos p,#offre.refonte #clients .collab ul {font-size: 1.8vw}
    #offre.refonte #clients .collab ul {text-align:center}
}
@media screen and (max-width: 767px) {
    #offre.refonte .sided-content h3 {padding-left:0}
}
@media screen and (max-width: 420px) {
    #ressources-bloc .argument .visuals {width: 100%;float:none;margin-left:0}
	#ressources-bloc .argument .infos {width: 100%;float:none;padding:0 30px 0 30px}
	#ressources-bloc .argument .visuals::before, #ressources-bloc .argument .visuals::after {display:none}
	#ressources-bloc .argument .infos .sub-title {font-size: 30px}
	#ressources-bloc .argument .infos h2 {font-size:22px;line-height:22px}
	#ressources-bloc .argument .infos p, #offre.refonte #clients .collab ul {font-size:16px;}
	#offre.refonte #clients .key-figures, #offre.refonte #clients .collabs {width: 100%}
	#offre.refonte #clients .key-figure {width: 100%;float:none}
	#offre.refonte #clients .key-figure {font-size:16px;padding-bottom:60px}
	#offre.refonte #clients .key-figure strong {font-size:22px}
	#offre.refonte #clients .collab h3, #offre.refonte #clients .collab .date {font-size:22px}
	#offre.refonte #clients .collab p {font-size:16px}
	#offre.refonte .skills article h1 {font-size:30px}
	 #blogarticle .connexe {padding-top:0}
	#blogarticle #top .title>div {padding-right:20px}
	#blog .home-banner.screen-height, #ressources .home-banner.screen-height{display: flex;align-items: center}
}
/*  - FIN REFONTE -  */