/*! HTML5 Boilerplate v5.3.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Dixxit
   ========================================================================== */


@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');
}

html {overflow-y: scroll;}
html, body, #site {width:100%;height:100%; min-height:100%;}
body {background-position: top left;background-repeat: no-repeat; background-attachment: fixed; background-size: cover}
svg path {transition: fill .4s ease;}
p, blockquote {margin:0;}
h1, h2, h3, h4 {font-weight: normal;margin:0;}
ul, ul li {margin:0;padding:0;list-style-type: none;}

ol {list-style: none;counter-reset: item;}
ol li {counter-increment: item;margin-bottom: 5px;}
ol li:before {margin-right: 10px;content: counter(item);background:#0293b2;border-radius: 100%;color: white;width: 1.5em;text-align: center;display: inline-block;margin-left: -2.0em;}

/* --- STRUCTURE --- */
#site {transition:400ms transform ease-in;}
#site.visiblemenu {transform:translateX(-100%);}
#site > section:first-of-type {z-index: 1;position: relative;}
#site > section:not(:first-of-type) {z-index: 2;position: relative;}
#header {position:absolute;top:0;width:100%;z-index:4;}
/* --- FIN STRUCTURE --- */

/* --- TOOLS --- */
.cell, .person {float:left;}
.w25 {width:25%;}
.w33 {width:33%;}
.w40 {width:40%;}
.w50 {width:50%;}
.w60 {width:60%;}
.w75 {width:75%;}
.center {text-align: center;}
.next-button, .plus-button, .download-button, .landing-button, .ext-button {font-family: 'FSLolaRegular';position:relative;margin:0 auto;background:#0090B5;color:#fff !important;padding:8px 60px 8px 20px;text-decoration:none;box-sizing:border-box;border:solid 1px #fff;font-size:24px;outline: 0;}
.next-button::after, .plus-button::after, .download-button::after, .landing-button:after, .ext-button:after {font-family: 'BlissProExtraLight';display:flex;justify-content:center;align-items:center;content:' > ';width:40px;position:absolute;right:0;top:0;padding:0;font-size:26px;margin:0;height:100%;border-left:1px solid #FFFFFF;}
.plus-button::after {content: ' + '}
.download-button {padding-right:70px}
.download-button::after {content: url(i/download.png);padding-top:5px;height:100%;width:50px}
.ext-button:after {content: url("i/external-link.svg");padding:0 15px 0 15px;height:100%;width:20px}
.next-button span, .plus-button span, .download-button span, .landing-button span, .ext-button span {position: relative;display:inline-block}
.next-button .toleft, .plus-button .toleft, .download-button .toleft, .landing-button .toleft, .ext-button .toleft {transition: all 0.3s linear 0s;width: 0;height: 100%;position: absolute;left: 0;bottom: 0;}
.next-button .toleft {background-color: #201c3f;}
.plus-button .toleft, .download-button .toleft, .landing-button .toleft, .ext-button .toleft {background-color: #007ca0;}
.ext-button:hover {cursor:pointer;}
.next-button:hover .toleft, .plus-button:hover .toleft,.download-button:hover .toleft, .landing-button:hover .toleft, .ext-button:hover .toleft {width: 100%;}
.color-white, .color-white a, .color-white p, .color-white li {color:#fff;}
.color-black, .color-black a, .color-black p, .color-black li {color:#4b4b4b;}
.h1-container,.h2-container, .h3-container {text-align: center;padding-bottom:60px;}
.h1-container h1,.h2-container h2 {font-family: 'BlissProExtraLight';border-bottom:solid 3px #fff;display: inline-block;text-transform: uppercase;font-size:1.5vw;padding-top:60px;padding-bottom:3px;clear:both}
.color-black .h2-container h2 {border-color:#4b4b4b;}
.h1-container.arrow,.h2-container.arrow {max-width: 800px;margin:auto;}
.h1-container.arrow h2,.h2-container.arrow h2 {font-family: 'BlissProExtraLight';font-size:3.3vw;text-transform: uppercase;border: none;}
.h3-container h3 {display: inline-block;}
.screen-height {height:100%;min-height: 640px; position: relative;box-sizing: border-box;}
.screen-height-x2 {height:200%;}
.screen-height-x2 .screen-height {height:50%;}
.screen-height-x3 {height:300%;}
.screen-height-x3 .screen-height {height:33.3333%;}
.screen-height-x4 {height:400%;}
.screen-height-x4 .screen-height {height:25%;}
.screen-height-x5 {height:500%;}
.screen-height-x5 .screen-height {height:20%;}
.screen-height-x6 {height:600%;}
.screen-height-x6 .screen-height {height:16.6666%;}
.screen-height-x7 {height:700%;}
.screen-height-x7 .screen-height {height:14.2857%;}
.screen-height-x8 {height:800%;}
.screen-height-x8 .screen-height {height:12.5%;}
.sided-contents {position: relative;background-size:100% auto;background-repeat:repeat-y;padding-top:4vw;padding-bottom:5vw;}
.sided-contents .h2-container {position:absolute;top:0;width:100%;}
.sided-contents .h3-container {position:absolute;width:100%;}
.sided-content h3 {font-size:2vw;font-family: 'BlissProExtraLight';text-transform: uppercase;text-align: left;display:inline-block;}
.sided-contents .h3-container h3 {background:none;padding-bottom:20px;}
.sided-content .txt-cell {padding-left:11%;box-sizing: border-box;padding-right:3%;position: relative;}
.sided-content .w50 + .txt-cell {padding-left:3%;}
.sided-content h3 strong {font-family: 'BlissProMedium';display:block;text-align: left;line-height:0.8em;}
.sided-content .txt-cell p {font-family: 'FSLolaRegular';font-size:1.3vw;margin-top:2vw;padding-right:10%}
.sided-content .txt-cell p strong {font-family: 'FSLolaMedium'}
.sided-content .title {font-family: "BlissProExtraLight";font-size:1.9vw;text-transform: uppercase;margin-bottom:50px;}
.sided-content .left-cell {float:left; box-sizing: border-box}
.sided-content .right-cell {float:right;box-sizing: border-box}
.sided-content .txt-cell svg {float: none;position: absolute !important;right: 0;top: 0;width: 24%}
.sided-content .left-cell.txt-cell svg {left: 0;}
.sided-content small {font-family: 'FSLolaRegular';font-size:0.9vw;display: block;text-align:center}
.sided-content verysmall {font-family: 'FSLolaRegular';font-size:0.6vw;display: block;text-align:right}
.sided-content .number {font-family: "BlissProExtraLight";font-size:3vw;font-weight: normal;}
.sided-content .number:after {content:".";}
#simple #site, #formation #site {background:url(i/bg5.jpg) repeat}
#simple #top, #formation #top, #recrutement #top, #annonce top {text-align: center;}
#simple h1, #formation h1, #actualite h1, #recrutement h1, #annonce h1,#blogarticle h1 {color: #fff;font-family: "BlissProMedium";line-height: 1.2em;text-align: center;text-transform: uppercase;margin:0;padding:0;letter-spacing:0.2vw;position:relative;top: 7vw;font-size:5em;}
#simple h1 .surtitre, #formation h1 .surtitre, #actualite h1 .surtitre, #recrutement h1 .surtitre, #annonce h1 .surtitre,#blogarticle h1 .surtitre  {font-family: "BlissProExtraLight";font-size:.3em;letter-spacing:0.3vw;line-height: .7em;}
#simple #content, #formation #content, #actualite #content, #recrutement #content, #annonce #content {font-family: 'FSLolaRegular';color:#4b4b4b; background:#fff; font-size:1.5em; padding :100px 20% 100px 20%; box-sizing: border-box}
#simple #content p, #actualite #content p, #recrutement #content p, #annonce #content p,#blogarticle #content p {margin-bottom:1vw}
#simple #content a, #formation #content a, #actualite #content a, #recrutement #content a, #annonce #content a,#blogarticle #content a {color:#0293b2}
#simple #content a:hover, #formation #content a:hover, #actualite #content a:hover, #recrutement #content a:hover, #annonce #content a:hover,#blogarticle #content a:hover {color:#201c3f}
#simple #top, #recrutement #top, #annonce #top {height:45% !important;min-height:320px}
#formation #top{height:60% !important;min-height:320px}
#simple ul, #formation ul, #actualite ul, #recrutement ul, #annonce ul,#blogarticle ul,#etude ul,methde ul {margin-bottom:2vw;margin-left:2vw}
#simple ul li, #formation ul li, #actualite ul li, #recrutement ul li, #annonce ul li,#blogarticle ul li,#etude ul li,#methode ul li  {list-style-type: square;}
#simple h2, #actualite h2, #formation h2, #recrutement h2, #annonce h2,#blogarticle h2 {color:#0090B5;margin-bottom:1vw}
#feuilles-graph1 {position:fixed;width:300px;height:auto;right:11%;top:20%;}
#feuilles-graph1 .st0{fill:none;stroke:#EB5961;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.scroll-section-down {cursor:pointer;background:url(i/scroll.png) no-repeat top left;width:82px;height:20px;position: absolute;bottom: 30px;left:50%;margin-left:-41px;}
.scroll-section-down:hover {opacity: 0.8;}
.linkable {cursor: pointer;}
.category {font-family: 'BlissProExtraLight';font-size:1.3em;background:#007CA2;display:inline-block;padding:3px 10px;margin-bottom:10px;border-radius: 3px;}
.purple .category {background:#98338F;}
.blue-dark .category {background:#293658;}
.green .category {background:#10401A;}
.red .category {background:#FC6061;}
time {font-family: 'fs_lola_italic';padding:20px 0 5px 0;display:inline-block;font-size:1.15em;z-index:2;}
/* --- FIN TOOLS --- */

/* --- NAVIGATIONS --- */
#nav-sections {position: fixed;top: 50%;right: 1.6%;z-index: 4;margin-top: -142px;}
#nav-sections a {display: block;width: 7px;height: 40px;border: 1px solid #fff;margin-bottom: 10px;position: relative;transition: all 300ms ease;}
#nav-sections a.active, #nav-sections a:hover {background:#fff;}
nav a {	position: relative;display: inline-block;outline: none;	color: #fff;text-decoration: none;font-weight: 400;text-shadow: 0 0 1px rgba(255,255,255,0.3);}
#nav-main {font-family: 'BlissProMedium';text-transform: uppercase;position: fixed;top:0;right:0;width:100%;text-align: right;padding-right:40px;padding-bottom:10px;background:none;transition:300ms all linear;font-size: 20px}
#nav-main ul {margin:10px 0 0 0;padding: 0;}
#nav-main li {margin:0;padding: 0;position: relative}
#nav-main li {display:inline-block;height:/* 35px*/3vw;}
#nav-main a {text-decoration: none;color:#fff;padding:0 10px;/*margin-left:10px;*/line-height: 30px;}
#nav-main .cursor1 {display: block;content:" ";position: absolute;top:40px;left:0;background:#fff;height:3px;}
#nav-main.scrolled {background:#fff;}
#nav-main.scrolled a {color:#4b4b4b;}
#nav-main.scrolled .cursor1 {background:#4b4b4b;}
#nav-main.ishidden {opacity:0;}
#nav-main .home-link {position: relative}
#nav-main .home-link a {padding-right: 18px}
#nav-main .home-link img {position: relative;top: -5px;width: 28px;height: 27px}
#nav-main.scrolled .home-link:after {position: absolute;top: 0;left: 10px;z-index: 1;content: "";width: 28px;height: 27px;background: url(../images/home-icon-dark.svg);background-repeat: no-repeat}
#nav-main .mega-sub-menu {display:none;position:absolute;top:33px;font-size: 18px; text-transform:none;text-align: left;padding:15px;background-color: #fff;-webkit-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);-moz-box-shadow:0 0 4px rgba(0, 0, 0, 0.3);box-shadow:0 0 4px rgba(0, 0, 0, 0.3)}
#nav-main li:hover .mega-sub-menu {display:block}
#nav-main .mega-sub-menu ul {margin-top:0}
#nav-main .mega-sub-menu li {display: block;height:auto}
#nav-main .mega-sub-menu a {color:#4B4B4B; box-sizing: border-box;line-height:1.2;padding:10px;}
#nav-main .mega-sub-menu a:hover, #nav-main .mega-sub-menu a:active {background-color:#ededed}
#nav-main .expertises {width:860px;right:-350px;/*background:#fff url(i/bg_mega-sub-menu-expertises.png) no-repeat 262px 175px;*/}
#nav-main .expertises ul {display: flex;flex-wrap: wrap;}
#nav-main .expertises ul>* {flex: 1 1 25%;display: block}
#nav-main .expertises li {height: 150px}
#nav-main .expertises a {display: flex;align-items: center;height: 100%; background-repeat: no-repeat; background-size:contain; background-position: 5px 0 ;padding-left: 45%;padding-right: 0; line-height: 20px}
#nav-main .expertises .conseil {background-image: url(i/picto-identite.svg)}
#nav-main .expertises .production {background-image: url(i/picto-narrations.svg)}
#nav-main .expertises .assistance {background-image: url(i/picto-ingenierie.svg)}
#nav-main .expertises .activation {background-image: url(i/picto-activation-diffusion.svg)}
#nav-main .expertises .refonte {background-image: url(i/picto-refonte.svg)}
#nav-main .expertises .pageslowcontent {background-image: url(i/picto-slowcontent.svg)}
#nav-main .projet {width:240px;left:10px}
#nav-main .projet li {height:auto}
#nav-main .projet li a {background:url(i/item_mega-sub-menu-projet.png) no-repeat  10px center;display: block;padding:3px 15px 3px 25px}
#burger-button {display: none}

#nav-social {position:absolute;top:0;left:80px;}
#nav-social a {margin-left: 15px;display: inline-block;margin-top: 9px;}
#nav-social a:after {pointer-events: none;position: absolute;width: 100%;height: 100%;border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;top: 0;left: 0;padding: 0;z-index: -1;box-shadow: 0 0 0 2px rgba(255,255,255,0.1);opacity: 0;-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}
#nav-social a:hover:after {	-webkit-animation: sonarEffect 1.3s ease-out 75ms;-moz-animation: sonarEffect 1.3s ease-out 75ms;animation: sonarEffect 1.3s ease-out 75ms;}
#nav-social img {/*height:2vw;width:auto;*/padding-top:0.2vw;}
#nav-footer {float:right;padding-right:50px;}
#nav-footer a:hover { text-decoration: underline}


/***** MENU *****/
#site.visiblemenu {transform: none}
#nav-main.visiblemenu {right:0;}
#nav-main.visiblemenu {z-index: 5;display:block}

@media screen and (max-width: 1440px) {

}
@media screen and (max-width: 1280px) {
	#nav-main {font-size: 18px;}
    #nav-main .mega-sub-menu {font-size: 16px;}
    #nav-main .expertises {background-position:262px 125px;}
    #nav-main .expertises li {height: 150px}
    #nav-main .expertises a {padding-left: 40%}
}
@media screen and (max-width: 1023px) {
    #burger-button {position: fixed;top:15px;right:17px;cursor: pointer;background:url(i/burger-button.png) no-repeat top left;width: 37px;height: 38px;display: block;background-size:cover;z-index:3;}
    #burger-close {background:url(i/burger-close.jpg) no-repeat top left;width: 39px;height: 40px;position: absolute;top: 15px;right: 17px;cursor: pointer;background-size: cover;}
    #burger-close {z-index: 6;top: 13px;right: 17px;width: 24px;height: 24px;background: url(i/burger-close.png) no-repeat;background-size: cover}
    #nav-main {background: #fff; width:300px;text-align: left;padding:15px}
    #nav-main ul {margin-top:40px}
    #nav-main li {display: block; padding: 3px 0;position: relative;height: auto}
    #nav-main li.sub::after {display:block;content: ' ';border:1px solid #fff;height:14px;width:8px;position: absolute;right:0;top:8px;background: url(i/plus.svg) no-repeat  0 0}
    #nav-main a {color:#4B4B4B}
    #nav-main .mega-sub-menu {display:block;position:relative;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none; width: auto;right: auto;left:auto; top:0;background: none;padding: 0 0 0 15px}
    #nav-main .mega-sub-menu li {height: auto}
    #nav-main .mega-sub-menu li a, #nav-main .projet li a,#nav-main .projet li a {padding-right: 0; padding-left: 15px;padding-top: 0;padding-bottom: 0;background-position: 0 center;line-height: 30px;}
    #nav-main .mega-sub-menu li .conseil, #nav-main .mega-sub-menu li .production, #nav-main .mega-sub-menu li .assistance, #nav-main .mega-sub-menu li .refonte, #nav-main .mega-sub-menu li .activation, #nav-main .mega-sub-menu li .pageslowcontent {background:url(i/item_mega-sub-menu-projet.png) no-repeat  0 center;}
    #nav-main .expertises ul {display:block}
 }
@media screen and (max-width: 767px) {

}
/* --- FIN NAVIGATIONS --- */

/* --- BLOCS --- */
#logo-link {position:fixed;top:20px;left:20px;width:10vw;display: block;transition:all 250ms linear;z-index: 3;}
#logo-link.smaller {width: 6vw;top: 10px;left: 10px;}
#logo-link img {width:100%;height:auto;}
.huge-title {color: #fff;font-family: "BlissProExtraLight";line-height: 1.7em;text-align: center;text-transform: uppercase;width: 100%;margin:0;padding:0;font-weight: bold;letter-spacing:0.6vw;position:relative;top: 9vw;}
.huge-title.twolines {padding-top:3vw;}
.huge-title .line1 {display: block;font-size: 5.7vw;line-height: 0.7em;}
.huge-title .line2 {display: block;font-size: 5.2vw;line-height: 1em;}
.huge-title .line3 {display: block;font-size: 6.6vw;line-height: 0.8em;}
.huge-title .line4 {display: block;font-size: 8.4vw;line-height: 0.9em;}
.huge-title > span {opacity: 0;}
.huge-title .nobold {font-family: 'BlissProExtraLight';font-weight: 100;}
.hide-but-tablet {display:none;}
/*.home-banner {overflow: hidden;}*/
#encart {font-family: 'FSLolaRegular';padding:9vw 1vw 2vw 1vw;background: url(i/encart.png);background-size:auto 100%;background-repeat:no-repeat;position: absolute;bottom:0;left:0;width:100%;box-sizing:border-box;background-position:bottom center;text-align: center;}
#encart p {max-width: 60%;margin: auto;font-size: 1.45vw;margin-bottom: 1vw;line-height: 1.6;color:#4b4b4b;}
#encart p:last-child {margin-bottom: 0;}
#encart p small {line-height: 1.3;display: block}
#encart a {color:#0395b5;text-decoration: none;}
#encart a:hover {text-decoration: underline;}
/* Triptyque Références */
#references-box {margin-top:-7vw; clip-path: url(i/biseaux.svg#middle);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));z-index:3 !important;overflow: hidden;background:url(i/bg-violet.jpg);}
#references-box .h2-container {position: absolute;top:10%;left:42%;z-index: 4;}
#references-box .h2-container h2 {color:#fff;}
#references-box .reference {width:33.333%;float:left;height:100%;display:table;background-repeat:no-repeat;background-size:cover;}
#references-box .reference > div {vertical-align:middle;display:table-cell;text-align:center;transition:all 500ms;}
#references-box .reference:hover > div {background:rgba(31,27,62,0.7);}
#references-box .reference > div > a {display:inline-block;background:#221e41 url(i/bg9.jpg);padding:50px 25px 100px 25px;color:#fff;margin:auto;max-width:360px;text-align:left;color:#fff;text-decoration:none;position:relative;transition:all 500ms;box-sizing: border-box}
#references-box .reference:hover > div > a {box-shadow: inset 0 0 0 10px #007ca0;}
#references-box .reference .ref-title {text-transform:uppercase;font-size:1.7vw;margin-bottom:14px;font-family: 'BlissProMedium'}
#references-box .reference .ref-title + p {margin-bottom:20px;font-size:1vw;font-family: 'FSLolaRegular';}
#references-box .reference > div > a::after {display:block;content: ' ';border:1px solid #fff;height:40px;width:40px;position: absolute;right:30px;bottom:30px;background: url(i/arrow-link.png) no-repeat 50% 50%}
#contact-block-new {background-color:#F5F5F5}
#contact-block-inner {width:80%;margin:0 10% 0 10%;padding:1rem 0 .5rem 0}
#contact-block-inner h2 {font-size: 3vw;font-family: 'BlissProExtraLight';text-transform: uppercase;color:#4B4B4B}
.contact-cta-actions {text-align:right;padding-top:15px}
.contact-cta-actions .contact-button {font-family: 'FSLolaRegular';position:relative;margin:0 auto;background:#93328e;color:#fff;padding:20px 40px;text-decoration:none;box-sizing:border-box;border:solid 1px #fff;font-size:30px;outline: 0}
.contact-cta-actions .contact-button span {position: relative;display:inline-block}
.contact-cta-actions .contact-button .toleft{background-color: #007ca0;transition: all 0.3s linear 0s;width: 0;height: 100%;position: absolute;left: 0;bottom: 0;}
.contact-cta-actions .contact-button:hover .toleft {width: 100%;}
/* MODALES */
@keyframes contact-cta-modal-slide-down {
    0% {transform: translateY(-2rem);opacity: 0}
    to {transform: translateY(0);opacity: 1}
}
.contact-cta-modal {display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: #000000bf; z-index: 1000}
.contact-cta-modal-content {position: relative;max-width: 850px;box-sizing: border-box;margin:6em auto;animation-name: contact-cta-modal-slide-down;animation-duration: .5s;color: #000}
.contact-cta-modal .submitted-message p{margin:0 !important}
@media (min-width: 768px) {.contact-cta-modal-content {padding: 1rem}}
.contact-cta-modal-close-button {position: absolute;padding: 1rem !important;left: inherit;right: 2rem;top: 2rem;border-radius: 2rem;transform: none;font-size: .8em}
.contact-cta-modal-close-button:hover,.contact-cta-modal-close-button:focus {color: #242424;border: 2px solid #242424}



#footer {background:#F5F5F5;padding:0 0 20px 0;border-bottom: solid 1px #fff;position: relative;z-index:1}
#footer .footer-inner {width:80%;margin:0 auto}
#footer a {font-family: 'FSLolaRegular';color:#4B4B4B;text-decoration: none;}
#footer a:hover {text-decoration: underline;}
#footer #footer-link {text-align:right;padding:10px 0}
#footer #footer-link ul {display:inline-block;text-align:left}
#footer #footer-link li a::before {content:'▪';margin:0 10px;display: inline-block;}
#footer #social-link a {display:flex;align-items:center;margin-bottom:20px;margin-left: 25%;}
#footer #social-link a span {margin-left:10px}
#footer #footer-link li {list-style-type: none;}
#etude #footer path,#methode #footer path {fill:none !important}
@media screen and (max-width: 767px) {#contact-block-inner h2 {font-size: 30px;}}
@media screen and (max-width: 420px) {
	.w50 {width:100%}
	.contact-cta-actions,#footer #footer-link {text-align:left}
	#footer #social-link a {margin-left:0}
	#contact-block-inner h2 {display:none}
}

/* --- FIN BLOCS --- *

/*  - HOMEPAGE -  */

#accueilOld {background-image:url(i/video-hp.jpg);}
#accueilOld #top {display: flex;align-items: center;}
#accueilOld video#bgvid {position: fixed; top: 50%; left: 50%;min-width: 100%; min-height: 100%;width: auto; height: auto; z-index: -100;transform: translateX(-50%) translateY(-50%);background: url(i/video-hp.jpg) no-repeat;background-size: cover;object-fit: cover}
#accueilOld .CondensedIntro {width:80%;margin:auto;}
#accueilOld .CondensedIntro h1 {width:60%;text-transform:uppercase;font-size: 4vw;font-family: "BlissPro";line-height: 1em;}
#accueilOld .CondensedIntro p {width:60%;font-size: 2.1vw;font-family: 'FSLolaRegular';color:#FFF;line-height: 1em;padding-top: 1em;}
#accueilOld .CondensedIntro p a {color:#ffffff}
#accueilOld .CondensedIntro p strong {font-family: 'FSLolaMedium'}
#accueilOld #expertises .projects {padding-top:0}
#accueilOld #expertises .projects p {font-size: 1vw}
#accueilOld #actualites  {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%);padding-top: 7vw;}
#accueilOld .CondensedIntro .hp-slider {margin-top:30px}
#accueilOld .CondensedIntro .hp-slider h4 {color: #fff; text-transform: uppercase;font-size: .8vw;}
#accueilOld .CondensedIntro .hp-slider a {color: #fff; font-family: 'FSLolaRegular';font-size: 1.8vw;text-decoration:none;border-bottom:#fff 1px solid;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
#accueilOld .CondensedIntro .hp-slider a:hover, #accueilOld .CondensedIntro .hp-slider a:active, #accueilOld .CondensedIntro .hp-slider a:focus {color: #fff;border-bottom:#fff 3px solid}
#accueilOld .CondensedIntro .hp-slider .slick-arrow {display:none !important}
#accueilOld .CondensedIntro .hp-slider .slick-dotted.slick-slider {margin:30px 0;}
#accueilOld .CondensedIntro .hp-slider .slick-dots{position: absolute;bottom: -35px;display: block;padding: 0;margin:20px 0 0 0;list-style: none;text-align: center;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li{position: relative;display: inline-block;width: 20px;height: 20px;margin: 0 5px;padding: 0;cursor: pointer;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li button{font-size: 0;line-height: 0;display: block;width: 20px;height: 20px;padding: 5px;cursor: pointer;color: transparent;border: 0;outline: none;background: transparent;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li button:hover,#accueilOld .CondensedIntro .hp-slider .slick-dots li button:focus{outline: none;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li button:hover:before,#accueilOld .CondensedIntro .hp-slider .slick-dots li button:focus:before{opacity: 1;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li button:before{font-size: 50px;line-height: 20px;position: absolute;top: 0;left: 0;width: 20px;height: 20px;content: '•';text-align: center;opacity: 1;color: white;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li.slick-active button:before{color: white;}
#accueilOld .CondensedIntro .hp-slider .slick-dots li{}
#accueilOld .CondensedIntro .hp-slider .slick-dots li button:before{font-size: 36px;}
#accueilOld .CondensedIntro .hp-slider li.slick-active button:before{font-size: 50px;}
#accueil #nav-main .home-link img {top:0}

#promo {background:url(i/bg-violet.jpg);color:#fff;padding-bottom:10px;padding-top:10%;margin-top:-7vw}
#promo .promo {width:80%;margin:auto;color:#fff;transition:all 500ms;position:relative;}
#promo .promo .actualite {height:730px; margin-bottom:100px;width:100%;float:none;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;background-size: cover;background-position: right;}
#promo .promo .actualite::before {display:block;content: ' ';height:10px;width:100%;background:#007ca0;transform: skew(0deg, 4.35deg);position: absolute;top:0;left:0;transition:all 500ms;}
#promo .promo .actualite:hover::before {top:3vw}
#promo .promo .actualite .bottom {transition:all 500ms;}
#promo .actualite a {color:#fff; height: 100%;transition:all 500ms;}
#promo .actualite > a {display: block;}
#promo .actualite a:hover {box-shadow: inset 0 0 0 10px #007ca0;background:rgba(31,27,62,0.7);}
#promo .actualite > div {height:100%;position: relative;z-index: 1;}
#promo .actualite .bottom {position:absolute;bottom:10px;left:0;width:100%;padding:5px 30px 20px 30px;box-sizing:border-box;z-index:2;transition:all 500ms;}
#promo .actualite a:hover .bottom {transform: translateY(-2vw);}
#promo .actualite .actu-title {font-size:1.7vw;font-family: 'BlissProExtraLight';line-height: 1.2;text-transform:uppercase;max-width:700px;width:100%;}
#promo .actualite .actu-title strong {font-family: 'BlissProMedium';}
#actualites {background:url(i/bg-violet.jpg);color:#fff;padding-bottom:100px;}
#actualites > div {position:relative}
#more-actus {margin-top: 90px;clear: both;}
#more-articles {margin-top: 90px;clear: both;}
#actualites .list-actu, #actualites .list-twitter {width:80%;margin:0 auto;}
#actualites .list-twitter {margin-bottom:50px;margin-top:10px;}
#actualites .actualite {box-sizing:border-box;height:340px;position:relative;float:left;width:50%;background-repeat:no-repeat;background-size:cover;background-position:center center;}
#actualites .actualite a {color:#fff; height: 100%;transition:all 500ms;}
#actualites .actualite > a {display: block;background: linear-gradient(to top, #201c3f,30%, transparent);}
#actualites .actualite a:hover {box-shadow: inset 0 0 0 10px #007ca0;background-color:rgba(31,27,62,0.7);}
#actualites .actualite.purple a:hover {box-shadow: inset 0 0 0 10px #98338F;}
#actualites .actualite.blue-dark a:hover {box-shadow: inset 0 0 0 10px #293658;}
#actualites .actualite.green a:hover {box-shadow: inset 0 0 0 10px #10401A;}
#actualites .actualite.red a:hover {box-shadow: inset 0 0 0 10px #FC6061;}
#actualites .actualite.not {display:none;}
#actualites .actualite > div {height:100%;position: relative;z-index: 1;}
#actualites .actualite.full {width:100%;float:none;}
#actualites .actualite time {margin-left:30px;}
#actualites .actualite time.bot {position:absolute;top:40px;left:100px;}
#actualites .actualite .tweet {position:absolute;bottom:40px;left:40%; height:auto; text-decoration: none;color: #330d32;font-family: 'fs_lola_italic';
font-size: 1.15em;border: 1px solid #330d32;padding: 8px 20px 8px 20px;transition: all 500ms; opacity:0}
#actualites .actualite:hover .tweet {opacity:1;transform: translateY(-2vw);}
#actualites .actualite .tweet:hover {border-color: #fff; background: none; box-shadow:none}
#actualites .actualite .bottom {position:absolute;bottom:10px;left:0;width:100%;padding:5px 30px 20px 30px;box-sizing:border-box;z-index:2;transition:all 500ms;}
#actualites .actualite a:hover .bottom {transform: translateY(-2vw);}
#actualites .actualite .actu-title {font-size:1.7vw;font-family: 'BlissProExtraLight';line-height: 1.2;text-transform:uppercase;max-width:700px;width:100%;}
#actualites .actualite .actu-title strong {font-family: 'BlissProMedium';}
#actualites .actualite .centered-vertical {display:table;font-family: 'fs_lola_italic';font-size:1.5vw;line-height:1.4em;height:80%;padding:0 40px 0 40px}
#actualites .actualite .centered-vertical p {display:table-cell;vertical-align:middle;}
#actualites .actualite .centered-vertical a {color:#330d32;text-decoration:none;}
#actualites .actualite .centered-vertical a:hover {text-decoration:underline;box-shadow: none;}
#actualites .actualite .centered-vertical p span {display:inline-block;}
#actualites .actualite .top-left {position:absolute;top:30px;left:30px;}
#actualites .actualite .top-right {position:absolute;top:30px;right:30px;}
#actualites .actualite .link img {margin-right:1%;float:left;width:15%;height:auto;display:block;}
#actualites .actualite .link em {font-family: 'fs_lola_italic';font-size:1.8vw;color:#fff;text-decoration:none;display:block;float:right;width:80%;padding-top:5px;}
#actualites .plus-button,
#actualites .plus-button::after {background:none;}
#actualites .actualite .bg {background:rgb(53,20,67);position:absolute;opacity: 0.7;content: ' ';display:block;width:100%;height:100%;left:0;top:0;}
#actualites .actutweet {background-color:#0091b4;transition: all 500ms;}
#actualites .actutweet:hover {box-shadow: inset 0 0 0 10px #293658;}
#actualites .actutweet > div,#actualites .actutweet p span {transition: all 500ms}
#actualites .actutweet:hover > div {background: rgba(31,27,62,0.3);}
#actualites .actutweet:hover p span {transform: translateY(-2vw);}
#actualites .actutweet + .actutweet {background-color:#009fc5}
#actualites .actutweet a:hover {color:#fff;}
#actualites .actutweet .icon {position: relative; display: block; height: 70px;width:70px}
#actualites .actutweet .icon:after {pointer-events: none;position: absolute;width: 100%;height: 100%;border-radius: 50%;content: '';-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;top: 30px;left: 30px;padding: 0;z-index: -1;box-shadow: 0 0 0 2px rgba(255,255,255,0.1);opacity: 0;-webkit-transform: scale(0.9);-moz-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}
#actualites .actutweet .icon:hover {box-shadow: none;background:none}
#actualites .actutweet .icon:hover:after {	-webkit-animation: sonarEffect 1.3s ease-out 75ms;-moz-animation: sonarEffect 1.3s ease-out 75ms;animation: sonarEffect 1.3s ease-out 75ms;}
/*  - FIN HOMEPAGE -  */

/*  - AGENCE -  */
#agence {background-image:url(i/agence.jpg)}
#agence .huge-title .line1 {font-size: 8.8vw; letter-spacing:0.15em }
#agence .huge-title .line2 {font-size: 3vw;letter-spacing:0.23em}
#agence .huge-title .line3 {font-size: 5.3vw;}
#agence .huge-title .line4 {font-size: 7.2vw;}
#agence #arbre-graph {position:absolute;max-height:300px;max-width:300px;right:18%;top:-5%;}
#agence #arbre-graph .drawing {fill:none;stroke:#EB5961;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
#portrait {height:auto !important;background:rgba(4,129,161,0.6);}
.agence-graph text {color:#fff}
.agence-graph .graph-corail {fill:#EB5961;}
.agence-graph .graph-line-corail {fill:none;stroke:#EB5961;stroke-linecap:round;stroke-miterlimit:10;}
.agence-graph .graph-white {fill:#FFFFFF;}
.agence-graph .graph-line-white {fill:none;stroke:#FFFFFF;stroke-linecap:round;stroke-miterlimit:10;}
.agence-graph .graph-title {font-family: 'BlissProExtraLight'}
.agence-graph .graph-text {font-family: 'FSLolaRegular'}
.agence-graph .graph-28 {font-size:28px;}
.agence-graph .graph-16 {font-size:16px;}
.agence-graph .graph-12 {font-size:12px;}
.agence-graph .graph-8 {font-size:8px;}
.agence-graph .graph-st0{fill:none;stroke:#FFFFFF;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
.agence-graph .graph-st1{opacity:0.5;fill:none;stroke:#FFFFFF;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;enable-background:new    ;}
.agence-graph .graph-st2{opacity:0.1;fill:#FFFFFF;enable-background:new    ;}
.agence-graph .graph-st4{fill:none;stroke:#FFFFFF;stroke-width:1;stroke-miterlimit:10;}
#expertises {background-image:url(i/fleuve.jpg);background-size:cover;background-position:center center;padding-bottom:0;padding-top:0;clear: both;}
#expertises section {position: relative;}
#expertises article h1 {font-size:3vw;font-family: 'BlissProExtraLight';text-transform: uppercase;line-height: 1em;transition: all 300ms ease}
#expertises article h1 strong { display: block;font-family: 'BlissProMedium' }
#expertises article svg {stroke:#fff;}
#expertises .projects article {text-align: center;padding:0 15% 10vw 15%}
#expertises .projects .h3-container {margin-top:-100px;margin-bottom: 30px;}
#expertises .projects {padding-top: 250px; background:rgba(32,28,63,0.8)}
#expertises .projects article a {text-decoration:none;position: relative; display: block;}
#expertises .projects article a:hover .svg, #expertises .projects article a:hover h1, #expertises .projects article a:hover p{transform:translate(0, -20px);}
#expertises .projects article h1::after {display:block;content: ' ';background:#fff;height:1px;width:100px;margin:20px auto 0 auto;transition: all 300ms ease;}
#expertises .projects article p {padding:20px 0 30px 0;max-width:320px;margin:auto;transition: all 300ms ease;font-family: 'FSLolaRegular'; }
#expertises .projects .other p {max-width: 100%}
#expertises .projects article .svg {display: block;height:340px;position:relative;transition: all 300ms ease;}
#expertises .plus-button { background: none;padding-right:20px}
#expertises .projects article a:hover .plus-button .toleft {width: 100%;}
#expertises .skills {padding-top: 250px;}
#expertises .skills article {text-align: center;margin:0 10% 10vw 10%;padding:40px 20px 40px 20px;background:rgba(32,28,63,0.6) }
#expertises .skills .h3-container {top:110px}
#expertises .skills article h1 {font-size:2.5vw;margin-top:2vw; line-height: 1.1em}
#expertises .skills article p {padding-top:30px;max-width:270px;margin:auto;font-family: 'FSLolaRegular';min-height: 5vw}
#expertises .skills .drawing {fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#valeurs {background:url(i/bg1.png) repeat top left;padding-bottom:40px;text-align: center;}
#valeurs h3 {font-family: 'BlissProExtraLight';font-size:5.2vw;text-transform: uppercase;line-height: 1.1em; }
#valeurs h3 + p {font-family: 'FSLolaRegular';font-size:1.5vw;margin-bottom:2vw;}
#equipe {background:#0194b3 url(i/bg5.jpg);width:100%;overflow: hidden;}
#equipe > .clearfix {width:100%;background:#fff;}
#equipe .person {background:#fff;box-sizing: border-box;float:left;padding:2px 2px 0 0;}
#equipe .person > div {background:#0194b3 url(i/bg5.jpg);height:100%;transition:all 450ms ease-out;}
#equipe .person:hover > div,
#equipe .person:focus > div{background:#015D74 url(i/bg6.jpg)}
#equipe .person:hover .name p:first-child,
#equipe .person:focus .name p:first-child{opacity: 0;} 
#equipe .person:hover .name .off,
#equipe .person:focus .name .off{opacity: 1;} 
#equipe .person.w25 + .w25 {padding-right: 1px;}
#equipe .person img {position:absolute;bottom:0;right:10%;max-width: 90%;height:auto;max-height: 100%;}
#equipe .person .name {position: absolute;top:10%;left:7%;text-align: left;min-width:82%;z-index:1;}
#equipe .person canvas {display:none;position:absolute;left:0;top:4.5vw;width:74%;z-index: 1;}
#equipe .person h3 {font-family: 'BlissProExtraLight';font-size:2vw;text-transform: uppercase;}
#equipe .person div {position: relative;font-family: 'FSLolaRegular';font-size:1.3vw;line-height:1.2}
#equipe .person:hover div p{font-family: 'fs_lola_italic';}
#equipe .person div p {position:absolute;top:0;left:0;transition:all 450ms ease-out;}
#equipe .person div .off {opacity: 0;}
#equipe .w25 {width:calc(25% - 1px);}
#equipe .w50 {width:calc(50% - 1px)}
#equipe .format1 {height:30vw}
#equipe .format2 {height:26vw}
#equipe .format3 {height:34vw;}
#equipe .format3 img {right:13%;}
#equipe .format3 .name {top:4%;left:10%;}
#equipe .img-to-left img {right:auto;left:0;}
#equipe .img-to-left .name {left:50%;}
#equipe .img-to-left canvas {transform: rotateY(180deg);transform-origin: left top;left: auto;right:-31px;}
#equipe .join-us img {top:50%;left:50%;margin-top:-114px;margin-left:-101px}
#equipe .fake div {background:#015D74;}
/*  - FIN AGENCE -  */

/*  - OFFRES -  */
#offre .sided-contents {padding-top: 0;}
#offre .sided-content {overflow: hidden;display:flex;flex-direction: column; justify-content: center;/*padding-top: 7vw;*/}
#offre .sided-content h3:not(.titre__article){line-height: .85em;padding-bottom:50px;background:url(i/zigouigoui3.png) no-repeat bottom center;/*padding-top:7.5vw;*/text-indent:-8%;font-size:3.1vw;}
#offre .sided-content h3 strong {font-size:3.8vw;}
#offre .sided-content .txt-cell {margin-top: 6vw}
#offre .sided-content .txt-cell p {padding-right:0}
#offre .sided-content.first {clip-path: url(i/biseaux.svg#first);-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));}
#offre .sided-content.middle {margin-top:-7vw; clip-path: url(i/biseaux.svg#middle);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));}
#offre .sided-content.last {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%);}
#offre .sided-content .line-drawing {max-height:850px;display: block}
#offre .sided-content .fullIE {height:100%}
#offre .sided-content .drawing {fill:none;stroke:#EB5961;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
#offre .footer-blocks {margin-top:-7vw;}
#offre .huge-title .line2 {font-size: 6.12vw; font-weight:normal}

#offre.strategie-communication-responsable {background-image:url(i/identite.jpg)}
#offre.strategie-communication-responsable .sided-contents{background:#394f20 url(i/bg-vert.jpg) repeat;}
#offre.strategie-communication-responsable #detail2, #offre.strategie-communication-responsable #detail4{background: url(i/bg-vert-pattern.jpg) repeat;padding-top:0;}
#offre.strategie-communication-responsable #detail2 .txt-cell, #offre.strategie-communication-responsable #detail4 .txt-cell {/*margin-top: 10vw;*/padding-left:2%;padding-right:12%;}
#offre.creation-contenus-utiles {background-image:url(i/narrations-bg.jpg)}
#offre.creation-contenus-utiles .sided-contents{background:#3e5124 url(i/bg-violet.jpg) repeat;}
#offre.creation-contenus-utiles #detail2, #offre.creation-contenus-utiles #detail4 {background: url(i/bg-violet-pattern.jpg) repeat;padding-top:0;}
#offre.creation-contenus-utiles #detail2 .txt-cell, #offre.creation-contenus-utiles #detail4 .txt-cell {margin-top: 10vw;padding-left:2%;padding-right:12%;}
#offre.engagement-onboarding {background-image:url(i/ingenierie-bg.jpg);background-position: top right}
#offre.engagement-onboarding .sided-contents{background:#3e5124 url(i/bg-bleu-middle.jpg) repeat;}
#offre.engagement-onboarding #detail2, #offre.engagement-onboarding #detail4 {background: url(i/bg-bleu-middle-pattern.jpg) repeat;padding-top:0;}
#offre.engagement-onboarding #detail2 .txt-cell, #offre.engagement-onboarding #detail4 .txt-cell {margin-top: 10vw;padding-left:2%;padding-right:12%;}
#offre.publication-diffusion-inclusives {background-image:url(i/activation-bg.jpg)}
#offre.publication-diffusion-inclusives .sided-contents{background:#201c3f url(i/bg-marine.jpg) repeat;}
#offre.publication-diffusion-inclusives #detail2, #offre.publication-diffusion-inclusives #detail4{background: url(i/bg-marine-pattern.jpg) repeat;padding-top:0;}
#offre.publication-diffusion-inclusives #detail2 .txt-cell, #offre.publication-diffusion-inclusives #detail4 .txt-cell {margin-top: 10vw;padding-left:2%;padding-right:12%;}

/* anciens noms */
#offre.conseil {background-image:url(i/identite.jpg)}
#offre.conseil .sided-contents{background:#394f20 url(i/bg-vert.jpg) repeat;}
#offre.conseil #detail2, #offre.conseil #detail4{background: url(i/bg-vert-pattern.jpg) repeat;padding-top:0;}
#offre.conseil #detail2 .txt-cell, #offre.conseil #detail4 .txt-cell {/*margin-top: 10vw;*/padding-left:2%;padding-right:12%;}
#offre.production {background-image:url(i/narrations.jpg)}
#offre.production .sided-contents{background:#3e5124 url(i/bg-violet.jpg) repeat;}
#offre.production #detail2, #offre.production #detail4 {background: url(i/bg-violet-pattern.jpg) repeat;padding-top:0;}
#offre.production #detail2 .txt-cell, #offre.production #detail4 .txt-cell {margin-top: 10vw;padding-left:2%;padding-right:12%;}
#offre.assistance {background-image:url(i/ingenierie.jpg);background-position: top right}
#offre.assistance .sided-contents{background:#3e5124 url(i/bg-bleu-middle.jpg) repeat;}
#offre.assistance #detail2, #offre.assistance #detail4 {background: url(i/bg-bleu-middle-pattern.jpg) repeat;padding-top:0;}
#offre.assistance #detail2 .txt-cell, #offre.assistance #detail4 .txt-cell {margin-top: 10vw;padding-left:2%;padding-right:12%;}


#offre .txt-cell.right-cell .line-drawing {max-height:120px;float: right;padding-right:50px;}
#offre .txt-cell.left-cell .line-drawing {max-height:120px;float: left;padding-left:11%;}
#offre .footer-blocks {background:#fff;}
#offre .footer-blocks h2 {display:none;}
#offre .footer-blocks article {width:50%;float:left;position: relative;margin-top:2px;box-sizing: border-box;}
#offre .footer-blocks a {overflow: hidden;display: block;}
#offre .footer-blocks article:nth-child(odd) {padding-right:2px;}
#offre .footer-blocks article img {width:100%;height: auto;display: block;transition: all 2250ms ease;transform-origin: center center;}
#offre .footer-blocks h3 {margin: 0;padding:0;position: absolute; top:20%;right:20%;font-family: "BlissProExtraLight";text-transform: uppercase;font-size: 60px;line-height: 1em;background:url(i/zigouigoui2.png) no-repeat bottom center;padding-bottom:50px;font-weight:100;z-index:1;opacity:0.8;text-align: center}
#offre .footer-blocks h3 strong {color:#fff;display: block;}
#offre .footer-blocks a h3 {transition:all 0.5s ease;}
#offre .footer-blocks article {}
#offre .footer-blocks a:hover img {transform:scale(1.1);}
#offre .footer-blocks a:hover h3 {opacity: 1;}
/*  - FIN OFFRES -  */

/*  - REFERENCES -  */
#references {background-image:url(i/references.jpg)}
#references .home-banner.screen-height {height:80%  !important;min-height: 512px;}
#references .realisation .link a {color:#4b4b4b;text-transform:uppercase;position:relative;float:right;margin:40px 1vw auto 25px;text-decoration:none;font-size:1vw;display:block;padding-bottom: 8px}
#references .realisation .link a::before {display:block;content: ' ';background:#0090B5;height:2px;width:15px;margin:auto;position:absolute;left:-25px;bottom:16px;}
#references .realisation .link a:after {content: "";position: absolute;width: 100%;height: 2px;bottom: 0;left: 0;background-color:#0090B5;visibility: hidden;-webkit-transform: scaleX(0);transform: scaleX(0);-webkit-transition: all 0.3s ease-in-out 0s;transition: all 0.3s ease-in-out 0s;}
#references .realisation .link a:hover:after {visibility: visible;-webkit-transform: scaleX(1);transform: scaleX(1);}
#references .realisations-block {background:#d8d9db}
#references .realisations-block h2 {color:#0090B5;border-bottom-color: #0090B5}
#references .realisation {margin-top:-7vw;padding-top:7vw; clip-path: url(i/biseaux.svg#middle);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));z-index:3 !important;overflow: hidden;background:url(i/bg1.png);}
#references .realisation:nth-child(odd) {background:#d8d9db}
#references .realisation .visuals {float:left;width:50%;position:relative;box-sizing:border-box;height:70%;margin-left:5%}
#references .realisation .visuals::before,
#references .realisation .visuals::after {width:45px;height:45px;display:block;position:absolute;}
#references .realisation .visuals::before {border-top:solid 1px #999999;border-right:solid 1px #999999;top:0;right:0;}
#references .realisation .visuals::after {border-bottom:solid 1px #999999;border-left:solid 1px #999999;bottom:-1%;left:0;}
#references .realisation .visuals img {display:none;width:100%;height:auto;}
#references .realisation .visuals img:first-child {display:block;}
#references .realisation .infos {float:right;width:37%;box-sizing:border-box;padding:100px 100px 50px 0px;}
#references .realisation .infos h3 {font-family: 'BlissProExtraLight';color:#0090B5;text-transform: uppercase;font-size:2vw;}
#references .realisation .infos .sub-title {font-family: 'FSLolaRegular';color:#0090B5;font-size:1.5vw;background: url(i/zigouigoui4.png) no-repeat bottom left;padding-bottom:20px;margin-bottom:20px;}
#references .realisation .infos p {font-family: 'FSLolaRegular';color:#4b4b4b;font-size:1.2vw;}
#references .realisation .visuals-nav {width:60%;position:absolute;bottom:-80px;left:50px;}
#references .realisation .visuals-nav .arrows {}
#references .realisation .visuals-nav .arrows span {font-size:2.7vw; box-sizing: border-box;padding-top: 2px; display:inline-block;border:solid 1px #9A9A9A;color:#9A9A9A;width:55px;height:55px;text-align: center;}
#references .realisation .visuals-nav .arrows span:hover {cursor:pointer;opacity:0.8;}
#references .realisation .visuals-nav .arrows span:first-child + span {margin-left:-2px;}
#references .realisation .visuals-nav .line {font-size:1.4vw;position:absolute;bottom:20px;left:150px;border-bottom:solid 1px #999;width:100%;text-align:center;padding-bottom:5px;} 
#references .realisation .visuals-nav .line span {font-family: 'BlissProExtraLight';} 
#references .realisation .visuals-nav .line .n {color:#0090B5;font-weight: bold;} 
#references .realisation .visuals-nav .line em {display:block;content: ' ';height:4px;background:#0090B5;position: absolute;bottom:-2px;left:0;}
#references .secteurs {max-width:1140px;margin:auto;text-align:center;line-height: 1.2em;padding:50px 0 15px 0;color:#646464;font-family: 'FSLolaRegular';font-size:1.2vw}
#references .clients-block {background:url(i/bg10.png);margin-top:-7vw;}
#references .clients-block h2 {color:#0090B5;border-color:#0090B5;}
#references .clients-block .hcontainer {max-width:1140px;margin:auto;}
#references .clients-block .logos > div {float:left;width:25%;height:180px;text-align: center;display:table;}
#references .clients-block .logos > div > div {display:table-cell;vertical-align: middle;}
#references .clients-block .logos > div img {width:60%;height:auto;}
#references .clients-block .list {padding:50px 0 50px 50px;column-count: 4;-moz-column-count: 4;-webkit-column-count: 4;}
#references .clients-block .list p {line-height: 1.2em; margin:0;padding:0 0 15px 0;color:#646464;font-family: 'FSLolaRegular';font-size:1.2vw;text-transform:uppercase;}
#references .clients-block .list p.active {color:#0090B5;}
/*  - FIN REFERENCES -  */

/*  - CASE STUDY -  */
#etude {}
#etude .home-banner.screen-height {height:80%  !important;min-height: 512px;}
#etude #top {text-align: left; }
#etude #top .visual {float:left;width:43%;height:100%; position: relative; overflow: hidden}
#etude #top .visual  img {float:left;height: 100%}
#etude #top .title {float:right;background: url(i/bg9.jpg) repeat;width:57%; height: 100%; padding:7vw 4vw 4vw 5vw; box-sizing: border-box}
#etude #top .title h1 {font-size: 4em; text-align: left; line-height: 1em;top:0;color: #FFFFFF; text-transform: uppercase;font-family: "BlissProMedium";/* letter-spacing:.5vw;padding-bottom: 30px*/}
#etude #top .title .surtitre {margin-top:2vw;margin-bottom:2vw;color: #FFFFFF;text-transform: uppercase; font-family: 'BlissProExtraLight';font-size: 1.6em;display:inline-block;border-bottom:2px solid #FFF}
#etude #top .title .chapo {font-family: 'FSLolaRegular';color:#ffffff;font-size:1.2em;}
#etude .sided-content {padding-top:7vw ;background-color: #ebebeb;}
#etude .first, #etude .last {position: relative; margin-top:-8vw;padding-bottom:8vw; 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;}
#etude .last {background:url(i/bg1.png) repeat;padding-bottom:0}
#etude .bottom {padding-bottom: 8vw}
#etude .sided-content h2 {font-family: 'BlissProExtraLight';text-transform: uppercase; color:#0093b2;font-size: 2.5em;padding-bottom:20px; background:url(i/zigouigoui4.png) no-repeat left bottom; margin-left: 11%}
#etude .sided-content.last h2 {font-size: 2em; }
#etude h3 {font-family: 'FSLolaRegular';color:#0093b2;font-size: 2em; text-transform: none}
#etude #contenu ul {font-family: 'FSLolaRegular';color:#393838;font-size: 1.2em;}
#etude p {font-family: 'FSLolaRegular';color:#393838;font-size: 1.2em;padding-top: 1vw;}
#etude .infos {box-sizing: border-box; position: relative;padding:3vw 20% 3vw 22%}
#etude .citation {box-sizing: border-box; background:url(i/quote.png) no-repeat; background-size: contain; font-style: italic; padding-left:130px;  margin-top: 3vw}
#etude .citation.right {padding-right:11%}
#etude .videoYoutube iframe {margin:0 0 3vw 22%}
#etude .citation {margin-left: 11%;}
#etude .first div div:nth-child(2) .citation {margin-left: 0;margin-right:20%;padding-right:11%}
#etude .first div div:nth-child(2) .citation.externe {padding-left:0}
#etude .center {margin:3vw 10% 0 10%}
#etude .sided-content img {width:100%; height: auto } 
#etude .citation p {font-size: 1.4em;}
#etude .citation .autor {color:#0093b2;font-size: 1em; text-transform: uppercase; font-style: normal; text-align: right; position: relative}
#etude .citation .autor:before {display:block;content: ' ';height:4px;width:100px;background:#0093b2;position: absolute;top:0;right:0;}
#etude .citation .autor strong { font-size: 1.2em}
#etude .citation.externe {background: none;width:90%; margin-bottom: 3vw}
#etude .citation.externe .cell {position: relative; height: 100%}
#etude .citation.externe blockquote {width:80%; padding-right:10%; box-sizing: border-box;position: relative;}
#etude .citation.externe blockquote p {background: url(i/quote-left-dark.png) no-repeat 0 15px;padding-left:50px;}
#etude .citation.externe blockquote .autor {background:none;color: #393838;}
#etude .citation.externe blockquote img {position: absolute;right: 0; bottom: 90px;}
#etude .citation.interne blockquote img {width:auto;margin-right:10px}
#etude .fivestar {}
#etude .fivestar span{display: inline-block;background: url(i/star-off.png) no-repeat center center;width: 30px;height: 28px;margin-right: 10px;}
#etude .fivestar span.active{background-image: url(i/star-on.png)}
#etude .avis-container { text-align: center;color:#1c183b; box-sizing: border-box; padding:5vw 10% 5vw 10%}
#etude .avis {margin-bottom: 3vw}
#etude .avis-container h4 {font-family: 'FSLolaRegular';font-size: 1.6em; text-transform: none; line-height: 1.2em; margin-bottom: 3vw;}
#etude .avis-container h4 strong {display: block;clear:both}
#etude .avis-container p {padding:0; font-size: 1.4em; font-style: italic; }
#etude .avis-container p.autor {font-size: .8vw; font-style: normal; }
#etude .chiffre { text-align: center; padding:0 3% 30px 3%; box-sizing: border-box; font-family: 'BlissPro'; text-transform: uppercase; line-height: 1.3em}
#etude .chiffre.center {margin-left:25%; margin-right: 25%}
#etude .chiffre span {display: block;font-family: 'BlissProMedium'; font-size: 3em; color:#ff585d; padding-bottom: 10px}
#etude .legende { font-size:1vw; color:#a09f9f}
#etude .chiffres-cle .legende {padding: 0 10%}
#etude .chiffre img {width:160px}
#etude #content.middle { margin-top: 0}
#etude .last ul {margin:3vw 11% 3vw 11%;font-family: 'FSLolaRegular'; text-transform: uppercase;color:#383838;column-count: 3;-moz-column-count: 3;-webkit-column-count: 3; text-align: center;font-size: 1.2em}
#etude .last li {background:url(i/zigouigoui5.png) no-repeat bottom center;padding:50px 0 30px 0; display: inline-block; width:100%}
#etude path {fill:#ff585d}
#etude .citation.externe.special {padding-left:0;margin-top: 5vw;}
#etude .w50 .citation.externe img {right:-200px; bottom:0; width: 250px}
#etude .w40 .infos {padding-right:0}
/*  - FIN CASE STUDY -  */


/*  - METHODES -  */
#methode {}
#methode .home-banner.screen-height {height:80%  !important;min-height: 512px;}
#methode #top {text-align: left; }
#methode #top .visual {float:left;width:43%;height:100%; position: relative; overflow: hidden}
#methode #top .visual  img {float:left;height: 100%}
#methode #top .title {float:right;background: url(i/bg9.jpg) repeat;width:57%; height: 100%; padding:7vw 4vw 4vw 5vw; box-sizing: border-box}
#methode #top .title h1 {font-size: 4.5em; text-align: left; line-height: 1em;top:0;color: #FFFFFF; text-transform: uppercase;font-family: "BlissProMedium"; letter-spacing:.5vw;padding-bottom: 30px}
#methode #top .title .surtitre {margin-top:2vw;margin-bottom:2vw;color: #FFFFFF;text-transform: uppercase; font-family: 'BlissProExtraLight';font-size: 1.6em;display:inline-block;border-bottom:2px solid #FFF}
#methode #top .title .chapo {font-family: 'FSLolaRegular';color:#ffffff;font-size:1.2em;}
#methode .sided-content {padding-top:7vw ;}
#methode .first, #methode .last {position: relative; margin-top:-8vw;padding-bottom:8vw; 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;}
#methode .last {background:url(i/bg1.png) repeat;padding-bottom:0}
#methode .bottom {padding-bottom: 8vw}
#methode .sided-content h2 {font-family: 'BlissProExtraLight';text-transform: uppercase; color:#0093b2;font-size: 2.5em;padding-bottom:20px; background:url(i/zigouigoui4.png) no-repeat left bottom; margin-left: 11%}
#methode .sided-content h2.largeurtotale {max-width:1080px;margin:2vw auto 1vw auto}
#methode .sided-content.last h2 {font-size: 2em; }
#methode h3 {font-family: 'FSLolaRegular';color:#0093b2;font-size: 2em; text-transform: none}
#methode #contenu ul {font-family: 'FSLolaRegular';color:#393838}
#methode p, #methode #contenu li {font-family: 'FSLolaRegular';color:#393838;font-size: 1.2em;padding-top: 1vw;max-width:1080px;margin:auto}
#methode .infos {box-sizing: border-box; position: relative;padding:3vw 20% 3vw 22%}
#methode .citation {box-sizing: border-box; background:url(i/quote.png) no-repeat; background-size: contain; font-style: italic; padding-left:130px;  margin-top: 3vw}
#methode .citation.right {padding-right:11%}
#methode .videoYoutube iframe {margin:0 0 3vw 22%}
#methode .citation {margin-left: 11%;}
#methode .first div div:nth-child(2) .citation {margin-left: 0;margin-right:20%;padding-right:11%}
#methode .first div div:nth-child(2) .citation.externe {padding-left:0}
#methode .center {margin:3vw 10% 0 10%}
#methode .sided-content img {width:100%; height: auto } 
#methode .citation p {font-size: 1.4em;}
#methode .citation .autor {color:#0093b2;font-size: 1em; text-transform: uppercase; font-style: normal; text-align: right; position: relative}
#methode .citation .autor:before {display:block;content: ' ';height:4px;width:100px;background:#0093b2;position: absolute;top:0;right:0;}
#methode .citation .autor strong { font-size: 1.2em}
#methode .citation.externe {background: none;width:90%; margin-bottom: 3vw}
#methode .citation.externe .cell {position: relative; height: 100%}
#methode .citation.externe blockquote {width:80%; padding-right:10%; box-sizing: border-box;position: relative;}
#methode .citation.externe blockquote p {background: url(i/quote-left-dark.png) no-repeat 0 15px;padding-left:50px;}
#methode .citation.externe blockquote .autor {background:none;color: #393838;}
#methode .citation.externe blockquote img {position: absolute;right: 0; bottom: 90px;}
#methode .citation.interne blockquote img {width:auto;margin-right:10px}
#methode .fivestar {}
#methode .fivestar span{display: inline-block;background: url(i/star-off.png) no-repeat center center;width: 30px;height: 28px;margin-right: 10px;}
#methode .fivestar span.active{background-image: url(i/star-on.png)}
#methode .avis-container { text-align: center;color:#1c183b; box-sizing: border-box; padding:5vw 10% 5vw 10%}
#methode .avis {margin-bottom: 3vw}
#methode .avis-container h4 {font-family: 'FSLolaRegular';font-size: 1.6em; text-transform: none; line-height: 1.2em; margin-bottom: 3vw;}
#methode .avis-container h4 strong {display: block;clear:both}
#methode .avis-container p {padding:0; font-size: 1.4em; font-style: italic; }
#methode .avis-container p.autor {font-size: .8vw; font-style: normal; }
#methode .chiffre { text-align: center; padding:0 3% 30px 3%; box-sizing: border-box; font-family: 'BlissPro'; text-transform: uppercase; line-height: 1.3em}
#methode .chiffre.center {margin-left:25%; margin-right: 25%}
#methode .chiffre span {display: block;font-family: 'BlissProMedium'; font-size: 3em; color:#ff585d; padding-bottom: 10px}
#methode .legende { font-size:1vw; color:#a09f9f}
#methode .chiffres-cle .legende {padding: 0 10%}
#methode .chiffre img {width:160px}
#methode #content.middle { margin-top: 0}
#methode .last ul {margin:3vw 11% 3vw 11%;font-family: 'FSLolaRegular'; text-transform: uppercase;color:#383838;column-count: 3;-moz-column-count: 3;-webkit-column-count: 3; text-align: center;font-size: 1.2em}
#methode .last li {background:url(i/zigouigoui5.png) no-repeat bottom center;padding:50px 0 30px 0; display: inline-block; width:100%}
#methode path {fill:#ff585d}
#methode .citation.externe.special {padding-left:0;margin-top: 5vw;}
#methode .w50 .citation.externe img {right:-200px; bottom:0; width: 250px}
#methode .w40 .infos {padding-right:0}
#methode #section-modal{z-index: 1000 !important;}
#methode #section-modal .dixxitcontact-modal{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.4);}
#methode #section-modal .dixxitcontact-modal-content{position: relative;max-width: 850px;height: 100%;box-sizing: border-box;margin: auto;padding: 1rem;text-align: center;animation-name: landing-modal-slide-down;animation-duration: 0.5s;}
#methode #section-modal .dixxitcontact-close-schedule-button{width: 3rem;height: 3rem;margin: auto;color: #999;border: 2px solid #999;border-radius: 50%;background: #fff;font-size: 2rem;font-weight: bold;text-decoration: none;}
#methode #section-modal .dixxitcontact-close-schedule-button:hover,#methode #section-modal .dixxitcontact-close-schedule-button:focus{color: #000;border: 2px solid #000;cursor: pointer;text-decoration: none;}
/*  - FIN METHODE -  */

/*  - ACTUALITE -  */
#actualite {}
#actualite .home-banner.screen-height {height:80%  !important;min-height: 512px;}
#actualite #top {text-align: left; }
#actualite #top .visual {float:left;width:43%;height:100%; position: relative; overflow: hidden}
#actualite #top .visual  img {float:left;height: 100%}
#actualite #top .title {float:right;background: url(i/bg5.jpg) repeat;width:57%; height: 100%; padding:7vw 4vw 4vw 5vw; box-sizing: border-box}
#actualite #top .title h1 {font-size: 4.5em; text-align: left; line-height: 1em;top:0}
#actualite #top .title .category, #actualite #top .title time {color: #FFFFFF}
#actualite #top .title .category {margin-top:4vw}
#actualite .biseau {position: relative; margin-top:-8vw; clip-path: url(i/biseaux.svg#middle);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));z-index:3 !important;background-color:#FFFFFF;}
#actualite .biseau div {padding-top:3vw; }
/*  - FIN ACTUALITE -  */

/*  - CONTACT -  */
#contactsection .icons div span {font-size:1vw;font-family: 'FSLolaRegular';}
#contact {background:none;}
#contact #nav-sections {display:none;}
#contactsection {position:relative;width:auto;background-size:cover;background-position:center center;background-attachment: fixed}
#contactsection h1 {font-size:3.5vw;font-family: 'BlissProExtraLight';text-transform: uppercase;color:#fff;text-align:center;background-size:100%;margin-top:4vw;display:inline-block;clear:both;}
#contactsection h2 {font-family: 'BlissProExtraLight';text-transform: uppercase;color:#fff;font-size: 1.5vw}
#contactsection .w50 {text-align:left;color:#fff;margin-top: 50px;font-size:1vw;line-height:2em;font-family: 'FSLolaRegular';}
#contactsection .w50.left-cell {margin-right:100px;width:40%}
#contactsection .w50.right-cell {}
#contactsection .w50 form {line-height:1.2em;}
#contactsection .w25 figure {overflow:hidden;width:100px;height:100px;margin:auto}
#contactsection .w25, #contactsection .w25 a {color:#FFF}
#contactsection .icons {width: 80%;margin:auto}
#contact-overlay {background:url(i/bg2.jpg) repeat;z-index:20;text-align: center;}
#contactsection #contact-overlay h2 {text-align:left !important}
#itinerary {display: block; z-index: 3;padding:5px 10px;}
#itinerary input[type="text"] {border:1px solid #fff;background:none;outline: 0;font-family: 'FSLolaRegular';font-size:1vw;padding:10px;width:80%; margin-top:10px; color:#fff}
#itinerary input[type="submit"] {border:1px solid #fff;font-size:1vw;padding:10px;outline: 0;color:#fff;background:none;}
#itinerary input[type="submit"]:hover {opacity:0.7;}
#contactmap {height:600px}
#map {position:relative;z-index:1;height:100%}
#geo .left {width:39%;float:left;}
#geo .right {width:61%;float:right;}
/*  - FIN CONTACT -  */

/*  - RECRUTEMENT -  */
#recrutement #site {background:url(i/bg5.jpg) repeat}
#recrutement .convictions.screen-height {height:100%;min-height:640px}
.convictions blockquote {background:url(i/quote-left.png) no-repeat left 3px;position:relative;z-index:1;padding-left:60px;}
.convictions blockquote p {display: inline; background:url(i/quote-right.png) no-repeat right 6px;font-family: 'fs_lola_italic';font-size: 43px;color:#fff;font-size:3.3vw;line-height: 1em;padding-right:60px;}
.convictions blockquote footer {font-family: 'FSLolaMedium';font-size:20px;color:#fff;}
.convictions .item {width:52%;position:absolute;padding:30px 30px 30px 3px;padding:1vw 1vw 1vw 0.1vw;top:28.4%;left:13%;}
.convictions .shape-container {height: 107%;left: -26%;position: absolute;top: -5%;width: 153%;perspective: 8543px;transform-style: preserve-3d;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.convictions .shape {outline: 1px solid transparent;background:url(i/trans-blue.png);transform:rotateY(45deg);width:100%;height:100%;display:block;-webkit-transition: all 0.3s ease-in-out;-moz-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;transition: all 0.3s ease-in-out;}
.convictions .shape-container.active {height: 100%;width: 100%;left: 0;perspective: 0px;top: 0;}
.convictions .shape-container.active .shape {transform: rotate(0);}
.convictions .item.right {left:auto;right:13%;}
.convictions .txt {position:relative;z-index:1;margin-top:-15%;}
.convictions .txt p {font-family: 'FSLolaMedium';font-size:15px;font-size:1.17vw;color:#fff;position:relative;z-index:1;margin-left:44%;margin-bottom:15px;}
.convictions .txt p.bottomline {font-family: 'FSLolaMedium';font-size:19px;font-size:1.5vw;color:#fff;text-align:center;margin-left:0;margin-top:25px;}
.convictions h2 {color:#FFF !important;text-transform: uppercase; font-family: 'BlissProExtraLight';font-size:26px;font-size:1.32vw;color:#fff;position:absolute;top:100px;text-align: center;margin:0;z-index:1;width:100%;}
.convictions h2 span {border-bottom:3px solid #fff;padding-bottom:2px;display:inline-block;}
#conviction1 {background:url(i/fond2.jpg) no-repeat center fixed;background-size: cover;-webkit-background-size: cover;}
#conviction2 {background:url(i/fond3.jpg) no-repeat center fixed;background-size: cover;-webkit-background-size: cover;}
#conviction3 {background:url(i/fond4.jpg) no-repeat center fixed;background-size: cover;-webkit-background-size: cover;}
/*  - FIN RECRUTEMENT -  */

/*  - ANNONCE -  */
#annonce #site {background:url(i/bg-bleu-middle.jpg) repeat}
/*  - FIN ANNONCE -  */


/*  - 404 -  */
#error {background-image:url(i/404_bg.jpg);background-size:cover;background-position:center center;}
#error .line1 {line-height:1em}
#error .line2 {font-size:2vw}
#error .line3 {font-family: 'FSLolaMedium';font-size:26px;text-transform:none;font-weight:normal; letter-spacing:normal;line-height:3em}
#error .huge-title {top:0;padding-top:9vw;padding-bottom:2vw}
#error .btn { text-align:center}
/*  - FIN 404 -  */

/*  - Refonte -  */
#refonte {background-image:url(i/refonte.jpg)}
#refonte .ressources {background:#0194b3 url(i/bg5.jpg);width:100%;overflow: hidden}
#refonte .huge-title {top:12vw}
#refonte .list-ressources {width: 80%;margin: 60px auto;position:relative}
#refonte .list-ressources article {box-sizing: border-box;float:left;margin:1px;overflow:hidden}
#refonte .list-ressources article:nth-child(even) {background:#fff}
#refonte .list-ressources article:nth-child(odd) {background:#eeeeee}
#refonte .list-ressources article.big {width:48%}
#refonte .list-ressources article.small {width:25%}
#refonte .list-ressources article a img {width:100%;transition:all 500ms;}
#refonte .list-ressources article .ressource-title {color:#007ca0}
#refonte .list-ressources article .description {font-family: 'FSLolaRegular';font-size:1vw}
#refonte .list-ressources article .bottom {padding:30px;transition:all 500ms;}
#refonte .list-ressources article .category {color:#FFF}
#refonte .list-ressources a {color:#4b4b4b; text-decoration:none; height: 100%;}
#refonte .list-ressources .ressource-title{font-family: 'FSLolaRegular';font-size: 1.5vw;line-height: 1.3em;}
#refonte .list-ressources article a:hover .bottom {padding-top:20px;padding-bottom:40px}
#refonte .list-ressources div.center {margin-top:20px}

/*  - FIN Refonte -  */

/*
.home-img1 {position:relative;}
.home-img1 .oiseau {display:block;margin:auto;width:60%;position:absolute;bottom:100px;left:50%;margin-left:-30%;}*/
	
@media screen and (min-width: 1440px) {
    body {background-size: calc(100% + 50px);}
	#actualites .actualite {height:430px;}
	.angled-banner p {max-width:1280px;}
    
    #portrait {overflow: hidden;position: relative;background:none;}
    #portrait .h2-container {position: absolute;top:0;left:47%;z-index: 3;}
    #portrait .sided-content h3 {text-align: right;max-width: 435px;}
    #portrait .sided-content h3 strong {font-weight: normal;line-height: 0.9em;}
    #portrait .slider-item .txt-cell {padding-left:5%;}
    #portrait .sided-content .txt-cell p {font-size:1.2vw;}
    #portrait .slider-item,
    #portrait .slider-item * {transition:550ms all ease;}
    #portrait .slider-item {width:33.24%;float:left;overflow: hidden;position: relative;background:rgba(4,129,161,0.6);margin-right: 0.1333%;overflow: hidden;}
    #portrait .slider-item:last-child {margin-right: 0;}
    #portrait .slider-item .sided-content {padding-top:3vw;position: absolute;top:0;right:0;width:100%;padding-top:10vw;box-sizing: border-box;min-width: 600px}
    #portrait .slider-item.small {text-align: center;}
    #portrait .slider-item.small .txt-cell p {display: none;}
    #portrait .slider-item.small .w50 {float:none;width:auto;}
    #portrait .slider-item.small svg {width:85%;display: block;margin:auto;}
    #portrait .slider-item.small .sided-content h3 {height:170px}
    #portrait .slider-item.full {width:69.72%;}
    #portrait .slider-item.verysmall {width:15%;}
    #portrait .text {display: none;}
    #portrait article:hover .text { display:block}
    #portrait svg+p {font-family: 'FSLolaRegular'; text-transform: none; font-size: 1vw;line-height: 1.5em;margin-top:40px;text-align: left;}
    #portrait svg+p {box-sizing: border-box;padding-left:50px;padding-right:50px;padding-top:50px}
    #portrait svg+p strong {font-weight:normal;text-transform:uppercase; font-size:2.5vw}
    #portrait svg {width:70%;margin-top:50px;}
}

@media screen and (max-width: 1440px) {
    .huge-title .line1 {font-size:6.9vw;}
    .huge-title .line2 {font-size:6.3vw;}
    .huge-title .line3 {font-size:8vw;}
    .huge-title .line4 {font-size:10.1vw;} 
    #portrait .h2-container {top:0;}
    /*.sided-content .txt-cell {padding-left:5%;}*/
    .sided-content .txt-cell p {font-size:1.7vw;}
    .sided-content .title + * {width:84%;}
    .sided-content h3 {padding-bottom:30px;}
	#references .realisation .visuals {width: 45%}
	#references .realisation .infos {width: 45%;padding-right: 30px}
	#references .realisation .infos h3 {font-size:2.3vw;}
    #references .realisation .infos .sub-title {font-size:2vw;}
	#references .realisation .infos p, #references .secteurs,#references .clients-block .list p {font-size:1.7vw;}
	#references .realisation .link a {font-size:1.5vw;}
	#references .clients-block .list {column-count: 3;-moz-column-count: 3;-webkit-column-count: 3;}
    /*#ours {height:19%;}*/
    #encart {padding:10.5vw 1vw 2vw 1vw}
    #references-box .reference .ref-title + p {font-size:1.2vw;}
	@-moz-document url-prefix() {#actualites {margin-top:-9vw}
	#references {margin-top:-9vw;}
	#promo .promo .actualite:hover::before {top:3.2vw;transform: skew(0deg,4.8deg);}
}
#equipe .person img {height:90%;width:auto;}
#equipe .person div {font-size:17px;}
#equipe .person canvas {top:5.2vw;}
#equipe .format3 img {height:82%;}    
#equipe .person .name {top: 6%;left: 22px;}
#equipe .img-to-left .name {left:50%;}
#equipe .join-us {text-align: center;}
#equipe .join-us img {width:150px;height: auto;margin-left:-75px;margin-top:-82px;}
#contact-block .icons a span {font-size:2vw;}
.convictions .item {width:50%;}
.convictions blockquote {background-size:30px;padding-left: 42px;}
.convictions blockquote p {background-size:30px;padding-right: 42px;font-size: 33px;}
.convictions .txt p.bottomline {font-family: 'FSLolaMedium';font-size:18px;text-align:center;}
.convictions .txt p {margin-left:39%;font-size:15px;}
.convictions .item {top: 27.4%;}
#conviction1 {background-image:url(i/fond2-1440.jpg);}
#conviction2 {background-image:url(i/fond3-1440.jpg);}
#conviction3 {background-image:url(i/fond4-1440.jpg);}
}

@media screen and (max-width: 1280px) {
    .h2-container h2 {font-size:1.5vw;}
	.h2-container.arrow h2 {font-size:4.6vw;}
	.h1-container.arrow h1 {font-size:4.6vw;}
    .huge-title.twolines {padding-top:100px;}
	.sided-content small {font-size:1.2vw}
	.sided-content verysmall {font-size:.95vw}
	.footer-blocks h3 {font-size:3.5vw}
	.h2-container.arrow {max-width:400px}
    #arbre-graph {width:200px;}
    /*.production {background-image:url(i/bg8-1280.jpg)}
	.assistanceriale {background-image:url(i/bg3-1280.jpg)}
	.conseil {background-image:url(i/bg7-1280.jpg)}*/
    #contact-block .icons a:hover {transform:none;}
    #contact-block .icons a span {display: none;}
    #contact-block .icons a span + span {display: block;}
	#offre .huge-title .line2 {font-size: 7.3vw}
	#agence-graph1, #agence-graph2, #agence-graph3 {margin-left:50px;}
	#agence-graph1 .st7, #agence-graph2 .st8, #agence-graph3 .st7 {font-size:2.3vw;}
	#agence-graph1 .st8, #agence-graph2 .st7, #agence-graph3 .st4 {font-size:2vw;}
	#agence-graph3 .st8 {font-size:1.8vw;}
	#references-box .reference > div > div {width:70%;}
	.angled-banner p {font-size:22px;}
	#simple h1, #formation h1, #actualite #top .title h1, #etude h1,  #etude #top .title h1,, #methode h1,  #methode #top .title h1, #recrutement h1, #annonce h1, #blogarticle #top .title h1 {font-size: 50px}
	#simple #content, #formation #content, #actualite #content, #recrutement #content, #annonce #content, #etude p, #methode p {font-size: 1.2em}
	#simple h2, #formation h2, #actualite h2, #recrutement h2, #annonce h2, #etude h2, #methode h2, #blogarticle h2 { line-height: 1.2}
	#etude .citation,#methode .citation {margin-bottom: 3vw;padding-left:0}
	#etude .citation.externe blockquote,#methode .citation.externe blockquote {width:100%}
	#etude .infos,,#methode .infos  {padding: 3vw 11% 3vw 11%}
	#etude .sided-content h2,#methode .sided-content h2 {margin-left:5.5%}
	#etude .chiffre img,#methode .chiffre img {width:100px}
	#etude .chiffre span,#methode .chiffre span  {font-size:3vw;}
	#etude .videoYoutube iframe,#methode .videoYoutube iframe {margin-left: 11%}
	.mauticform-radiogrp-label {font-size:1.2em}
}

@media screen and (max-width: 1023px) {

    .hide-but-tablet {display:block;}
    #nav-sections,    
    #nav-main {display: none;}
    .h2-container h2 {font-size:16px;}
    .h2-container.arrow h2 {font-size:5.5vw;}
    .h2-container.arrow h2 + img {display: block;margin:auto;}
	.h2-container.arrow {max-width:400px; /*padding-bottom:100px*/}
	.huge-title.twolines {padding-top:100px;}
    .huge-title {padding-top:30px !important;}
    .huge-title .line1 {font-size:57px;}
    .huge-title .line2 {font-size:52px;}
    .huge-title .line3 {font-size:66px;}
    .huge-title .line4 {font-size:71px;}
    #agence .huge-title .line1 {font-size:70px;}
    #agence .huge-title .line2 {font-size:23px;}
    #agence .huge-title .line3 {font-size:42px;}
    #agence .huge-title .line4 {font-size:58px;}
	.huge-title.twolines .line1, .huge-title.twolines .line2 {font-size:70px;}
	#contact-block {padding-bottom:50px}
    /*.production {background-image:url(i/bg8-1024.jpg)}
	.assistanceriale {background-image:url(i/bg3-1024.jpg)}
	.conseil {background-image:url(i/bg7-1024.jpg)}*/
    #logo-link {width:140px;}
    #logo-link.smaller {width:100px;}
    /*#formation.sided-content .txt-cell, #webmastering.sided-content .txt-cell, #conceptionux.sided-content .txt-cell, #production.sided-content .txt-cell, #edition.sided-content .txt-cell {padding-right:8%;}*/
    #encart {padding:110px 30px 27px 30px;}
    #encart p {font-size:16px;max-width: 81%;}
	#offre .huge-title .line1 {font-size: 11vw}
	#offre .huge-title .line2 {font-size: 12vw}
	#offre .sided-content .drawing {stroke-width:3;}
    .sided-content {padding-top:100px;}
    .sided-content .txt-cell p {font-size:2vw;}
    .sided-content .number {font-size:30px;}
    .sided-content small {font-size:14px;}
    .footer-blocks article {width:auto;float:none;}
    .footer-blocks h3 {font-size:6vw;background-size: 20px;background-position: bottom 18px center;}
    #equipe .person img,
    #equipe .format3 img,
    #equipe .img-to-left img {height: 145%;width: auto;top: 0;bottom: auto;right:3%;left:auto;}
    #equipe .person div {font-size:15px;}
    #equipe .person canvas {display:none !important}
    #equipe .person .name,
    #equipe .img-to-left .name {left:5%;width:40%;min-width:40%;}
    #equipe .format1,
    #equipe .format2,
    #equipe .format3 {width:50%;float:left;height:24vw;overflow: hidden;}
    #equipe .join-us {text-align: center;}
    #equipe .join-us a {text-align: center;display: block;height:100%;}
    #equipe .join-us img {width:118px;height:auto;margin:20px 0 0 0;left:auto;right:auto;position: relative;}
    #equipe .img-to-left canvas {transform: none;transform-origin: center center;left:0;}
    #equipe .person.w25 + .w25 {padding-right:2px;}
	#agence-graph1, #agence-graph2, #agence-graph3 {width:100%;margin-left:10px;}
	#contactsection .icons {width:600px}
	#contactsection .icons div span, #contactsection .w50 {font-size:1.5vw}
	#itinerary input[type="text"] {width:70%}
	#burger-button {background-size: cover;width: 30px;height: 31px;display:block;}
    #burger-menu {display:block;}
    #offre li:nth-child(3) {margin-top:5%;}
	#offre #burger-links li:nth-child(3) {margin-top:0;}
    .convictions blockquote {background-size:19px;padding-left: 29px;}
    .convictions blockquote p {background-size:19px;padding-right: 29px;}
    .convictions .item {top: 211px;left: 8%;width: 80%;}
    #conviction1 {background-image:url(i/fond2-960.jpg);}
    #conviction2 {background-image:url(i/fond3-960.jpg);}
    #conviction3 {background-image:url(i/fond4-960.jpg);}
	#references-box {clip-path:none;}
	#references-box .h2-container {left:38%;top:0}
	#references-box .h2-container h2 {color:#0090B5; border-color: #0090B5}
	#references-box {clip-path:none;background: #d8d9db;}
	#references-box .reference .ref-title + p {font-size:1;5vw;}
	#references-box .reference .ref-title {font-size:26px;}
	#references-box .reference a {font-size:14px;}
	#references-box .reference .ref-title + p {font-size:2vw;}
	#references .realisation {clip-path:none;margin-top: 0}
	#references .realisation .infos {padding-right:20px;padding-top:7vw}
	#references .realisation .infos h3 {font-size: 3vw}
	#references .realisation .infos .sub-title {font-size: 2vw}
	#references .realisation .infos p,#references .realisation .link a {font-size: 1.8vw}
	#promo .promo .actualite {height:400px}
	@-moz-document url-prefix() { 
	  #actualites {margin-top: -12vw}		
	  #promo .promo .actualite:hover::before {top:2.6vw;transform: skew(0deg,3.9deg);}
	  #references {margin-top:-12vw}	
	}
	#actualites .list {width:90%;}
	#actualites .actualite time {font-size:14px;}
	#actualites .actualite .category, #refonte .list-ressources .category {font-size:14px;}
	#actualites .actualite .actu-title,#promo .actualite .actu-title {font-size:22px;}
	.next-button, .plus-button {font-size:16px;}
	#actualites .actualite .centered-vertical {font-size:18px;}
    .realisation {padding-top:3vw;}
    .realisation .visuals,
    .realisation .infos {width:auto;float:none;}
    .realisation .infos {padding-left:100px;padding-top:20px;}
    .realisation .link a {float:none;}
    #references-box .reference a, .realisation .link a {margin-top:20px;}
	#references-box .reference > div > a {max-width:300px;}
	#references .realisation .visuals::after {display:none;}
	#references .realisation .visuals {margin-right: 20px;}
	#references .realisation .visuals-nav {position: relative;top:auto;bottom:auto;left:auto;}
	#references .realisation .visuals img {top:7vw;position:relative}
	#references .realisation .visuals-nav .arrows span {height: 41px;width: 41px;font-size: 25px;}
	#references .realisation .visuals::before {top:50px;}
	#references .secteurs {font-size:1.8vw}
	#references .clients-block {margin-top: 0}
    .realisation .visuals-nav .line {font-size:1.8vw;}
	#etude .last ul,#methode .last ul {column-count: 2;-moz-column-count:2;-webkit-column-count:2;}
	#etude .citation.externe blockquote img,#methode .citation.externe blockquote img {bottom: 120px}
	#etude .sided-content h2,#methode .sided-content h2 {margin-top:3vw}
	#error .line3 {font-size:16px;line-height:2em}
	#refonte .list-ressources article .bottom {padding:10px}
	#refonte .list-ressources .ressource-title{font-size: 18px}
	#refonte .list-ressources article .description {font-size: 2vw}
	#refonte .list-ressources article a:hover .bottom {padding-top:5px;padding-bottom:15px}
	#refonte .list-ressources article.big {width:100%}
	#refonte .list-ressources article.small {width:100%}
	#contact-block .w50 {width:100%}
	
	#etude .home-banner,#methode .home-banner {height:auto}
    #etude #top .title,#methode #top .title {float:none;padding: 100px 50px 50px 50px;width:100%}
    #etude #top .visual,#methode #top .visual {display:none}

	
}

@media screen and (max-height: 640px) {
    .huge-title {padding-top:0;}
    .sided-content {padding-top:100px;}
    .h2-container h2 {padding-top:25px;}
    .values h3 {font-size:4.2vw;}
    .h2-container {padding-bottom:40px}
	#references-box.sided-content {padding-top:0;}
}

@media screen and (max-width: 767px) {
    .hide-but-tablet {display:none;}
    #burger-button {background-size: cover;width: 50px;height: 31px;display:block;}
    #burger-menu {display:block;}
    .huge-title {padding-top:100px;}
    .huge-title.twolines {padding-top:150px;}
    #arbre-graph {opacity: 0.9;right: -10%;top:25%}  
    #logo-link {width:100px;left:10px;top:10px;}
    #logo-link.smaller {width:80px;}
   /* .screen-height {min-height: 0;}*/
    .sided-content verysmall {font-size:10px}
    .values h3 {font-size:40px;}
    .values h3 + p {font-size: 18px;margin-bottom: 20px;}
	.huge-title.twolines .line1, .huge-title.twolines .line2 {font-size:50px;}
    .home-banner {height:100%;}
	/* .screen-height {height:135%;}	
   #offre .home-banner {height:135%;}*/
	#offre .sided-content h3 {padding-left:5%}
    #portrait .h2-container {position: relative;top:auto;padding-bottom:15px;}
    .sided-content .cell {float:none;width:auto;}
    .sided-content h3, #offre .sided-content h3 {font-size:25px;}
    .sided-content h3 strong {font-size:30px;}
    .sided-content .txt-cell p {font-size:18px;margin-top:24px;}
    .sided-content .title {font-size:6vw;}
    .sided-content .title + * {width: 84%;display: block;margin: 50px auto;}
    .sided-content .cell > img,
	.sided-content .cell > svg {width:97%;height:auto;margin-left:auto;margin-right:auto;}
	/* #formation.sided-content .txt-cell, #webmastering.sided-content .txt-cell, #conceptionux.sided-content .txt-cell, #production.sided-content .txt-cell, #edition.sided-content .txt-cell {padding-right:5%;padding-left:5%}*/
    #encart {padding:155px 10px 30px 10px;}
    #encart p, #accueilOld #encart p {font-size:18px;max-width: 90%;}
    .download-button, .landing-button {font-size: 18px}
	.h2-container.arrow {max-width:250px;padding-bottom:50px}
	#contactsection .icons {max-width:280px;}
	#contact .h2-container.arrow {margin-top:50px}
	.h2-container.arrow h2, #contactsection .h2-container.arrow h2 {font-size:30px}
    /*.production {background:url(i/bg8-768.jpg) repeat}
	.assistanceriale {background:url(i/bg3-768.jpg) repeat}
	.conseil {background:url(i/bg7-768.jpg) repeat}
	#contactsection, #contactsection #contact-overlay*/ {height:100% !important;}
	#contactsection .icons div span, #contactsection .w50, #itinerary input[type="text"], #itinerary input[type="submit"] {font-size:14px;}
	#contactsection .w50 {width:100%}
	#expertises article h1, #expertises .skills article h1 {font-size:22px;}
    #equipe {display:none !important;opacity:0;visibility:hidden;}
    #equipe .format1,
    #equipe .format2,
    #equipe .format3 {width:100%;float:none;height:150px;overflow: hidden;}
    #equipe .person {display:none;opacity:0;}
    #equipe .person .name, #equipe .img-to-left .name {padding-top:30px;}
    #equipe .person canvas {display: none;}
    #equipe .person h3 {font-size:22px;}
    #equipe .person div {font-size:14px;}
    #equipe .join-us {height:175px;}
	#valeurs h3 {font-size:40px;}
	#valeurs h3 + p {font-size:14px ; color}
    #agence-graph1, #agence-graph2, #agence-graph3 {margin-left:0}
    #contact-block .icons a span {font-size:14px;}
    #nav-social img {height: 23px;width: auto;padding-top: 11px;}
    #nav-footer {padding:30px 10px;font-size: 14px;float:none;}
    .sided-content .w50 {padding:5% !important}
	#texte > text tspan {font-size:35px;}
 	#agence-graph1 .st7, #agence-graph2 .st8, #agence-graph3 .st7 {font-size:35px;}
	#agence-graph1 .st8, #agence-graph2 .st7, #agence-graph3 .st4 {font-size:30px;}
	#agence-graph3 .st8 {font-size:30px;}
    #agence-graph2 .st7,
    #agence-graph3 .st4{font-size:26px;}
    #agence-graph3 .st8 {font-size:23px;}
    #agence-graph3 .st7 {font-size:28px;}
    #simple #content, #actualite content, #formation content, #recrutement content, #annonce #content {padding:20px;font-size:16px }
    #simple h1, #formation h1, #actualite h1, #recrutement h1, #annonce h1, #blogarticle h1 {font-size:36px; top:20vw}
    .convictions .txt {margin-top:15px;}
    .convictions .txt p {margin-left:0;font-size:15px;}
    .convictions blockquote p {font-size:27px;}
    .convictions .item {position: relative;width: 75%;margin-top: 73px;}
    .convictions .item.right {right:-13%;}
    .convictions blockquote footer {font-size:13px;}
    #conviction1 {background-image:url(i/fond2-640.jpg);}
    #conviction2 {background-image:url(i/fond3-640.jpg);}
    #conviction3 {background-image:url(i/fond4-640.jpg);}
    .convictions blockquote {clear:both;}
    .convictions h2 {font-size:14px;}
    #riviere .txt {margin-top:5%;}
	#references, #accueil {height:auto !important;}
	#references-box .reference {float:none;width:100%;}
	#references-box .reference .ref-title {font-size:22px;}
	#references-box .reference .ref-title + p,#refonte .list-ressources article .description {font-size:16px;}
	#references-box .reference > div > div {padding:20px;margin:30px auto;}
	#actualites {padding-top:30px;}
	#actualites .actualite {float:none;width:100%;height:270px;}
    .realisations-block .h2-container {padding-top:20px;}
    .realisation .infos {padding:20px}
    .realisation .infos h3 {font-size:20px;}
    .realisation .infos p {font-size:14px;}
    .realisation .infos .sub-title {font-size:16px;}
    .realisation .visuals-nav .line {left:110px;font-size:14px;}
    .realisation .visuals {height:300px;}
    .clients-block .logos > div {width:33.3333%;height:80px;}
    .clients-block .list {column-count: 3;padding:20px 10px 40px 10px;}
    .clients-block .list p {font-size:14px;}
	#references .realisation .infos h3 {font-size:20px}
	#references .realisation .infos .sub-title, #references .realisation .infos p, #references .realisation .link a, #references .secteurs,#references .clients-block .list p {font-size:16px}
	#actualite .biseau, #blogarticle .biseau {clip-path:none;}
	#actualite #top .visual, #etude #top .visual, #methode #top .visual,#blogarticle #top .visual, {width:100%;float:none}
	#actualite #top .title, #etude #top .title,, #methode #top .title,#blogarticle #top .title, {width:100%;float:none;height:auto}
	#references .realisation .visuals, #references .realisation .infos {width:90%}
	#references .clients-block .list {padding:0 20px 0 20px;column-count: 2;-moz-column-count: 2;-webkit-column-count: 2;}
	#etude .sided-content .cell > svg,#methode .sided-content .cell > svg {width:auto;}
	#etude .sided-content .chiffres-cle .cell,#methode .sided-content .chiffres-cle .cell {float:left;}
	#etude .sided-content .chiffres-cle .w50,#methode .sided-content .chiffres-cle .w50 {width:50%;}
	#etude .sided-content .chiffres-cle .w25,#methode .sided-content .chiffres-cle .w25 {width:25%;}
	#etude .sided-content .chiffres-cle .w33,#methode .sided-content .chiffres-cle .w33 {width:33%;}
	#etude .center,#methode .center {margin-left: 10%; margin-right: 10%}
	#etude .citation.externe,#methode .citation.externe {padding-left:0; margin-left:10%}
	#etude .citation.externe blockquote,#methode .citation.externe blockquote {width:90%}
	#etude .citation.externe blockquote img,#methode .citation.externe blockquote img {bottom:0; width:150px; height:150px}
	#etude .citation.externe blockquote p,#methode .citation.externe blockquote p {padding-right : 60px}
	#etude .citation.externe .autor:before,#methode .citation.externe .autor:before {right :60px}
	#actualite #top .visual img, #etude #top .visual  img, #methode #top .visual  img,#blogarticle #top .visual img, {width:100%; height: auto}
	#error .line2 {font-size:24px;line-height:2em}
	
	#accueil #expertises .projects article {padding-bottom:100px}
	#accueil #expertises .projects p {font-size:20px}
	#accueil .CondensedIntro h1 {width:80%;font-size:40px}
	#accueil .CondensedIntro p  {width:90%;font-size:20px}
	#accueil .CondensedIntro .hp-slider h4 {font-size:10px}
	#accueil .CondensedIntro .hp-slider a {font-size:18px}
	
	

}
@media screen and (max-width: 420px) {
	#recrutement #content, #annonce #content {padding: 20px}
	#simple #content, #formation #content, #actualite #content, #recrutement #content, #annonce #content, #etude p, #methode p {font-size: 18px}
	#offre .sided-content .drawing {stroke-width:4;}
	#references-box .h2-container {display:none}
	#references-box {margin-top: 0;padding-top:0}
	#references .realisation {padding-top: 0}
	#references .realisation .infos {float:none; width: 90%;padding:20px;font-size:18px}
	#references .realisation .infos h3 {font-size:30px}
	#references .realisation .infos .sub-title {font-size:22px}
	#references .realisation .infos p, #references .realisation .link a, #references .secteurs,#references .clients-block .list p {font-size:18px}
	#etude #top .title .surtitre,#methode #top .title .surtitre  {margin-top:70px}
	#etude .citation,#methode .citation {padding-left:0; padding-right:11%; margin-left: 10%}
	#etude .citation.externe blockquote img,#methode .citation.externe blockquote img {display: none}
	#etude .citation.externe blockquote, #etude .citation.externe blockquote p,#methode .citation.externe blockquote, #methode .citation.externe blockquote p {padding-right:0}
	#etude .citation.externe .autor,#methode .citation.externe .autor {margin-top:20px}
	#etude .citation.externe .autor:before,#methode .citation.externe .autor:before {right :0}
	#contact-block {padding-left:30px; padding-right:30px}
	.h2-container.arrow {padding-bottom:0}
	.mauticform-label-large { font-size:22px}
	#mauticform_wrapper_dixxitformulairecontact::before {display:none;}
	.mauticform-label, .mauticform-radiogrp-label,.mauticform-button-wrapper .mauticform-button.btn-default, .mauticform-pagebreak-wrapper .mauticform-pagebreak.btn-default {font-size:16px}
	.mauticform-errormsg, .mauticform-errormsg2 {font-size:14px}
	.next-button, .plus-button, .download-button, .landing-button {padding-bottom:12px}
	#references .home-banner.screen-height {display: flex;align-items: center}
	#references .huge-title.twolines .line2 {font-size:42px;}
	#references .realisation .visuals {float:none; width: 100%}
	time, .category {font-size:14px}
	#accueil .screen-height.banner {display: flex;align-items: center}
	#contact .h2-container.arrow { margin-top: 0}
	#contact-block .location img {width:100%}
	#contactsection .icons .w25 {width:100%;font-size: 14px !important;margin-bottom:30px}
	#contactsection .w50.left-cell { margin-right: 0; width:100%}
}
@-webkit-keyframes sonarEffect {
	0% {opacity: 0.3}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5)}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);-webkit-transform: scale(1.5);opacity: 0;}
}
@-moz-keyframes sonarEffect {
	0% {opacity: 0.3}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5)}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);-moz-transform: scale(1.5);opacity: 0}
}
@keyframes sonarEffect {
	0% {opacity: 0.3}
	40% {opacity: 0.5;box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5)}
	100% {box-shadow: 0 0 0 2px rgba(255,255,255,0.1), 0 0 10px 10px #3851bc, 0 0 0 10px rgba(255,255,255,0.5);transform: scale(1.5);opacity: 0}
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {display: none !important}
.visuallyhidden {border: 0;clip: rect(0 0 0 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px}
/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {clip: auto;height: auto;margin: 0;overflow: visible;position: static;width: auto}
/*
 * Hide visually and from screen readers, but maintain layout
 */
.invisible {visibility: hidden}
/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clearfix:before,
.clearfix:after {content: " ";display: table}
.clearfix:after {clear: both}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {background: transparent !important;color: #000 !important;box-shadow: none !important;text-shadow: none !important}
    a,
    a:visited {text-decoration: underline}
    a[href]:after {content: " (" attr(href) ")"}
    abbr[title]:after {content: " (" attr(title) ")"}
    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
    a[href^="#"]:after,
    a[href^="javascript:"]:after {content: ""}
    pre,
    blockquote {border: 1px solid #999;page-break-inside: avoid}
    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */
    thead {display: table-header-group}
    tr,
    img {page-break-inside: avoid}
    img {max-width: 100% !important}
    p,
    h2,
    h3 {orphans: 3;widows: 3}
    h2,
    h3 {page-break-after: avoid}
}



/***** COVER *****/
#offre .offer-cover {text-align: center}
#offre .huge-title {z-index: 0;top: 120px;display: inline-block;width: auto;overflow: hidden}
#offre .huge-title:before {content: "";position: absolute;z-index: 1;top: 0;left: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.4)}
#offre .huge-title .blurred-bg {content: "";position: absolute;z-index: 0;top: -120px;left: 0;width: 100vw;height: 100vh;background-position: top left;background-size: cover;background-attachment: fixed;filter: blur(10px)}
#offre .huge-title span {z-index: 3;color: #023f4f;letter-spacing: 0}
#offre .huge-title.twolines {padding: 30px 120px}
#offre .huge-title .line1 {line-height: 1em;font-family: 'BlissProMedium'}
#offre .parallax-layer {position: absolute;z-index: 0;bottom: 0;right: 70px}
#offre .parallax-layer img {max-width: 471px;max-height: 100vh;height: auto}
#offre #encart a {color: #023f4f;text-decoration: underline;font-weight: 700;font-family: "FSLolaMedium"}
#offre #encart p {max-width: 55%;margin-bottom: 2vw}
#offre #encart strong {font-family: 'FSLolaMedium'}

/** Les anciens noms **/ 
/** OFFRE 01 **/
#offre.conseil,
#offre.conseil .huge-title .blurred-bg {background-image: url(i/identite-bg.jpg)}
#offre.conseil .huge-title .line1 {letter-spacing: .8vw}
#offre.conseil .parallax-layer {right: 0;bottom: 20vh}
#offre.conseil .parallax-layer img {max-width: 40vw}
#offre.conseil .huge-title span,
#offre.conseil #encart a {color: #394f20}
/** OFFRE 02 **/
#offre.production,
#offre.production .huge-title .blurred-bg {background-image: url(i/narrations-bg.jpg)}
#offre.production .parallax-layer {right: 5vw;top: -10vh}
#offre.production .parallax-layer img {max-width: 30vw}
#offre.production .huge-title span,
#offre.production #encart a {color: #391238}
#offre.production .huge-title .line2 {letter-spacing: .1vw;font-family: 'BlissProMedium'}
#offre.production .huge-title .line3 {letter-spacing: 1.3vw;font-weight: 400}
/** OFFRE 03 **/
#offre.assistance,
#offre.assistance .huge-title .blurred-bg {background-image: url(i/ingenierie-bg.jpg)}
#offre.assistance .huge-title .line1 {letter-spacing: 20px}
#offre.assistance .parallax-layer {bottom: 10vh}
#offre.assistance .parallax-layer img {max-width: 27vw}




/** Les nouveaux noms **/ 
/** OFFRE 01 **/
#offre.strategie-communication-responsable .huge-title .line1 {letter-spacing: .8vw}
#offre.strategie-communication-responsable .parallax-layer {right: 0;bottom: 20vh}
#offre.strategie-communication-responsable .parallax-layer img {max-width: 40vw}
#offre.strategie-communication-responsable .huge-title span,
#offre.strategie-communication-responsable #encart a {color: #394f20}
/** OFFRE 02 **/
#offre.creation-contenus-utiles .parallax-layer {right: 5vw;top: -10vh}
#offre.creation-contenus-utiles .parallax-layer img {max-width: 30vw}
#offre.creation-contenus-utiles .huge-title span,
#offre.creation-contenus-utiles #encart a {color: #391238}
#offre.creation-contenus-utiles .huge-title .line2 {letter-spacing: .1vw;font-family: 'BlissProMedium'}
#offre.creation-contenus-utiles .huge-title .line3 {letter-spacing: 1.3vw;font-weight: 400}
/** OFFRE 03 **/
#offre.engagement-onboarding .huge-title .line1 {letter-spacing: 20px}
#offre.engagement-onboarding .parallax-layer {bottom: 10vh}
#offre.engagement-onboarding .parallax-layer img {max-width: 27vw}
/** OFFRE 04 **/
#offre.publication-diffusion-inclusives .huge-title .line1 {}
#offre.publication-diffusion-inclusives .parallax-layer {bottom: 50vh;right:0}
#offre.publication-diffusion-inclusives .parallax-layer img {}
#offre.publication-diffusion-inclusives .huge-title span,
#offre.publication-diffusion-inclusives #encart a {color: #201c3f}

/***** RESPONSIVE *****/
@media screen and (max-width: 1440px) {
	#offre .huge-title .line1,#offre .huge-title .line2,#offre .huge-title .line3 {font-size: 5.3vw}
	/** Les nouveaux noms **/ 
    #offre .huge-title .line1,#offre .huge-title .line2,#offre .huge-title .line3 {font-size: 5.3vw}
    /** OFFRE 02 **/
    #offre.production .huge-title .line1 {letter-spacing: 1vw}
    #offre.production .huge-title .line2 {letter-spacing: .7vw}
    /** OFFRE 03 **/
    #offre.assistance .huge-title .line2 {letter-spacing: 1vw}
    #offre.assistance .huge-title .line3 {letter-spacing: 1.5vw}
	/** Les nouveaux noms **/
	/** OFFRE 02 **/
    #offre.creation-contenus-utiles .huge-title .line1 {letter-spacing: 1vw}
    #offre.creation-contenus-utiles .huge-title .line2 {letter-spacing: .7vw}
    /** OFFRE 03 **/
    #offre.engagement-onboarding .huge-title .line2 {letter-spacing: 1vw}
    #offre.engagement-onboarding .huge-title .line3 {letter-spacing: 1.5vw}
}
@media screen and (max-width: 1280px) {
	/** Les nouveaux noms **/ 
    /** OFFRE 01 **/
    #offre.conseil .huge-title .line2 {font-size: 6.3vw}
    /** OFFRE 02 **/
    #offre.production .huge-title .line1 {letter-spacing: .9vw}
    #offre.production .huge-title .line2 {letter-spacing: 0}
    /** OFFRE 03 **/
    #offre.assistance .huge-title .line2 {letter-spacing: .2vw}
    #offre.assistance .huge-title .line3 {letter-spacing: 1.5vw}
	/** Les nouveaux noms **/
    /** OFFRE 01 **/
    #offre.strategie-communication-responsable .huge-title .line2 {font-size: 6.3vw}
    /** OFFRE 02 **/
    #offre.creation-contenus-utiles .huge-title .line1 {letter-spacing: .9vw}
    #offre.creation-contenus-utiles .huge-title .line2 {letter-spacing: 0}
    /** OFFRE 03 **/
    #offre.engagement-onboarding .huge-title .line2 {letter-spacing: .2vw}
    #offre.engagement-onboarding .huge-title .line3 {letter-spacing: 1.5vw}
}
@media screen and (max-width: 1023px) {
    #offre.huge-title.twolines {padding: 30px 5vw}
    #offre #encart p {max-width: 81%}
    /** Les nouveaux noms **/ 
	/** OFFRE 01 **/
    #offre.conseil .parallax-layer {bottom: 0;top: auto}
    #offre.conseil .huge-title .line1 {letter-spacing: 2.6vw}
    /** OFFRE 02 **/
    #offre.production .huge-title .line1 {letter-spacing: 1.7vw}
    /** OFFRE 03 **/
    #offre.assistance .huge-title .line3 {letter-spacing: 5.6vw}
	/** Les nouveaux noms **/
	/** OFFRE 01 **/
    #offre.strategie-communication-responsable .parallax-layer {bottom: 0;top: auto}
    #offre.strategie-communication-responsable .huge-title .line1 {letter-spacing: 2.6vw}
    /** OFFRE 02 **/
    #offre.creation-contenus-utiles .huge-title .line1 {letter-spacing: 1.7vw}
    /** OFFRE 03 **/
    #offre.engagement-onboarding .huge-title .line3 {letter-spacing: 5.6vw}
}
@media screen and (max-width: 767px) {
    #offre .parallax-layer img {display: none}
    /** Les nouveaux noms **/ 
	/** OFFRE 03 **/
    #offre .assistance .huge-title .line3 {letter-spacing: 2.2vw}
	/** Les nouveaux noms **/
	/** OFFRE 03 **/
    #offre .engagement-onboarding .huge-title .line3 {letter-spacing: 2.2vw}
}
@media screen and (max-width: 420px) {
	#offre .huge-title .line1,#offre .huge-title .line2,#offre .huge-title .line3,#offre.conseil .huge-title .line2 {font-size: 42px}
	#offre.assistance .huge-title .line1,#offre.production .huge-title .line1,#offre.conseil .huge-title .line1 {letter-spacing: normal}
	#offre.strategie-communication-responsable .huge-title .line1,#offre.creation-contenus-utiles .huge-title .line1,#offre.engagement-onboarding .huge-title .line1 {letter-spacing: normal}
	#offre .sided-content h3:not(.titre__article), #offre .sided-content h3 strong {font-size:30px}
	#offre .huge-title.twolines {padding-right:30px;padding-left:30px;}
}

/***** PROJECTS / FORMATIONS *****/
#projets .projets-block {padding: 100px 0;background: url(i/bg-violet.jpg);color: #fff}
#projets .projets-block + #contact-block {border-top: 0}
#projets .projets-block__title {margin-bottom: 130px;text-align: center;text-transform: uppercase;font-family: "BlissPro";font-size: 80px;letter-spacing: 10px}
#projets .list-projets {width: 80%;margin: 0 auto;max-width:1600px}
#projets .projet {box-sizing: border-box;height: 265px;position: relative;float: left;width: 50%}
#projets .projet .item {background: #0093b2;transition:all 500ms;margin:5px}
#projets .projet:after {content: "";position: absolute;z-index: 0;top: 0;left: 0;width: 100%;height: 100%;transition: all 500ms}
#projets .projet:hover:after {background: rgba(32, 28, 63, 0.6)}
#projets .projet a {position: relative;z-index: 1;display: flex;height: 255px;padding: 0 40px;align-items: center;color: #fff;text-decoration: none;transition: all 500ms}
#projets .projet a:hover {box-shadow: inset 0 0 0 10px #ffffff}
#projets .projet a > div {position: relative;transition: all 500ms}
#projets .projet a:hover > div {margin-top: -20px}
#projets .projet img {max-width: 190px;max-height: 200px;width: auto;height: auto;margin-right: 40px}
#projets .projet-title {line-height: 35px;font-family: "BlissPro";font-size: 36px;text-transform: uppercase;letter-spacing: 5px}
#projets .sub-title {font-family: "FSLolaRegular";font-size: 18px}
/***** RESPONSIVE *****/
@media screen and (max-width: 1023px) {
    #projets .projet {width: 100%;float: none}
}
@media screen and (max-width: 768px) {
    #projets .projet {height: auto}
    #projets .projet a {display: block;height: auto;padding: 40px;text-align: center}
    #projets .projet img {margin-right: 0;margin-bottom: 10px;transition: all 500ms}
    #projets .projet a:hover>div {margin-top: 0px}
    #projets .projet a:focus img,
    #projets .projet a:hover img {position: relative;margin-top: -10px;margin-bottom: 20px}
}
@media screen and (max-width: 420px) {
    #projets .projets-block__title {font-size: 57px;letter-spacing:normal;margin-bottom: 30px;}
	#projets .projets-block {padding-right:30px;padding-left:30px}
	#projets .list-projets {width:100%}
	#projets .projet-title {letter-spacing:normal;}
}
/***** GLOBAL *****/
#projet .container, #formations .container, #methodes .container {max-width: 1170px;margin: auto;}
#projet .centerer, #formations .centerer, #methodes .centerer {text-align: center;}
#projet .w1--3 {max-width: 450px;}
#projet .w2--3 {max-width: 620px;}
#projet .w1--4 {max-width: 370px;}
#projet .w3--4 {width: 800px;margin-bottom: 100px;}
#projet .cell--last {margin-left: 100px;}
#projet .first, #formations .first, #methodes .first {background: #fff;}
#projet .last-content, #formations .last-content, #methodes .last-content {overflow: hidden;}
#projet p, #formations p,#methodes p {font-family: 'FSLolaRegular'}
#projet h3 {color: #0093b2;}
/***** COVER *****/
#projet .home-banner.screen-height, #formations .home-banner.screen-height, #methodes .home-banner.screen-height {height: 80%!important;min-height: 512px;background: url(i/bg10.jpg) repeat;}
#projet #top .title, #formations #top .title, #methodes #top .title {float: right;width: 60%;height: 100%;padding: 7vw 4vw 4vw 5vw;box-sizing: border-box;}
#projet #top .visual, #formations #top .visual, #methodes #top .visual {display: flex;width: 40%;height: 100%;position: relative;overflow: hidden;}
#projet #top .visual img, #formations #top .visual img, #methodes #top .visual img {position: absolute;z-index: 1;float: left;height: 100%;}
#projet path, #formations path, #methodes path {fill: none;}
#projet #top .visual svg, #formations #top .visual svg, #methodes #top .visual svg {position: absolute;z-index: 2;top: 25%;right: 0;max-width: 80%;width: 400px;max-height: 60%;opacity: 0;}
#projet #top .visual svg.set, #formations #top .visual svg.set, #methodes #top .visual svg.set {display: block;opacity: 1;}
#projet #top .title h1, #formations #top .title h1, #methodes #top .title h1 {margin-top: 20vh;margin-bottom: 0;padding-bottom: 8px;font-size: 4.5em;text-align: left;line-height: 1em;top: 0;color: #FFF;text-transform: uppercase;font-family: "BlissProMedium";letter-spacing: .5vw;}
#projet #top .title .surtitre, #formations #top .title .surtitre, #methodes #top .title .surtitre  {margin-top: 0;margin-bottom: 2vw;color: #FFF;text-transform: uppercase;font-family: 'BlissProExtraLight';font-size: 1.6em;display: inline-block;border-bottom: 2px solid #FFF;}
/***** CONTENT *****/
#projet .first, #formations .first, #methodes .first {margin-top: -8vw;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;}
#projet .content, #formations .content, #methodes .content {padding-top: 48px;}
#projet .content.liens, #formations .content.liens, #methodes .content.liens {margin-bottom: 0;padding-top: 0;}
#projet .content.liens h2, #formations .content.liens h2, #methodes .content.liens h2{margin-top: 10vh;}
#projet .intro, #formations .intro, #methodes .intro {padding-top: 127px;padding-bottom: 92px;background: url(i/bg1-alt.jpg) repeat;}
#projet .intro p, #formations .intro p, #methodes .intro p {line-height: 34px;font-size: 28px;color: #4b4b4b;display:inline-block;}
#projet .content .list-itle, #formations .content .list-itle, #methodes .content .list-itle {margin-bottom:10px;padding-bottom:25px;padding-top:0;line-height:34px;text-transform:uppercase;font-family:BlissPro;font-size:36px;color:#0090b5;background:url(i/zigouigoui4.png) no-repeat bottom left}
#projet .content ul, #formations .content ul, #methodes .content ul {padding-left: 20px;}
#projet .content ul li, #formations .content ul li, #methodes .content ul li {position: relative;margin-bottom: 13px;padding-left: 10px;color: #4b4b4b;font-size: 24px;font-family: 'FSLolaRegular';letter-spacing: 0.2px;}
#projet .content ul li:before, #formations .content ul li:before, #methodes .content ul li:before {position: absolute;z-index: 1;top: 13px;left: -19px;content: "";width: 5px;height: 5px;border-radius: 50%;background: #4b4b4b;}
#projet .last-content, #formations .last-content, #methodes .last-content {z-index: 3 !important;margin-bottom: 0;padding-top: 8vw;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%);background: #e5e5e5;}
#projet .last-content img, #formations .last-content img, #methodes .last-content img {width: 549px;height: auto;}
#projet .last-content .sub-title, #formations .last-content .sub-title, #methodes .last-content .sub-title {margin-bottom: 20px;text-transform: uppercase;font-size: 31px;font-family: 'BlissPro';background-size: 148px;color: #0093b2;}
#formations .h2-container h2, #methodes .h2-container h2 {border-color:#4b4b4b;}
#formations #description, #methodes #description {background: url(i/bg10.png);color: #4b4b4b;padding-bottom:60px}
.masonry-block {margin: 0 auto;position:relative}
#formations #description .masonry-block ,#methodes #description .masonry-block {width: 80%;max-width:1600px}
.masonry-block article {box-sizing: border-box;float:left;margin:1px;overflow:hidden}
#formations #description .masonry-block article, #methodes #description .masonry-block article {width:33%}
.masonry-block article .item {margin:5px;transition:all 500ms;}
#formations #description .masonry-block article .item,#methodes #description .masonry-block article .item {background: #0093b2}
.masonry-block article a {text-decoration:none;display:block;position:relative;transition:all 500ms;overflow:hidden}
#formations #description .masonry-block article a, #methodes #description .masonry-block article a {padding: 50px 25px 100px 25px}
.masonry-block article h3 {text-transform: uppercase;font-size:36px;font-family: 'BlissPro';line-height:40px}
#formations #description .masonry-block article h3,#methodes #description .masonry-block article h3 {color: #fff;letter-spacing:5px}
.masonry-block article p {font-size:18px;padding-top:10px}
#formations #description .masonry-block article p, #methodes #description .masonry-block article p {color: #fff}
.masonry-block article .item:hover a {}
#formations #description .masonry-block article .item:hover a,#methodes #description .masonry-block article .item:hover a {box-shadow: inset 0 0 0 10px #fff;background: rgba(32, 28, 63, 0.6)}
.masonry-block article .item div {transition:all 500ms;}
#formations #description .masonry-block article .item div,#methodes #description .masonry-block article .item div {}
.masonry-block article .item:hover div {}
#formations #description .masonry-block article .item:hover div,#methodes #description .masonry-block article .item:hover div {transform:translate(0,-20px)}
.masonry-block article a::after {}
#formations #description .masonry-block article a::after,#methodes #description .masonry-block article a::after {display:block;content: ' ';border:1px solid #fff;height:40px;width:40px;position: absolute;right:30px;bottom:30px;background: url(i/arrow-link.png) no-repeat 50% 50%}
#formations #description .perso,#methodes #description .perso {width: 60%;margin: 0 auto;position:relative; color:#4b4b4b;text-align:center;font-size:2em;padding-top:2vw}
#formations #reference .h2-container h2, #methodes #reference .h2-container h2 {color:#0090B5;border-color:#0090B5}
/***** SLIDER *****/
.slider-content{margin-bottom:0}
.slider-left{width:47%}
.slider-right{width:53%}
.img-slider{position:relative;margin-bottom:100px;min-height:350px}
.img-slider .slick-arrow{position:absolute;bottom:-66px;width:66px;height:66px;border:1px solid #999;background:0 0;outline:0;text-indent:-999px;overflow:hidden;background:url(i/arrow-slider.png) no-repeat center center;transition:all .2s ease-in-out}
.img-slider .slick-prev{left:72px}
.img-slider .slick-next{left:137px;transform:rotate(180deg)}
.img-slider .slick-arrow:hover,.img-slider .slick-arrow:active,.img-slider .slick-arrow:focus{background-color:#e5e5e5}
.img-slider:after,
.img-slider:before{content:"";width:50px;height:60px;display:block;position:absolute}
.img-slider:before{border-top:solid 1px #999;border-right:solid 1px #999;top:0;right:0}
.img-slider:after{border-bottom:solid 1px #999;border-left:solid 1px #999;bottom:-1%;left:0}
.text-slider .infos{padding:0 0 0 9%;box-sizing:border-box;position:relative}
.text-slider h3{padding-bottom:5px;line-height:34px;text-transform:uppercase;font-family:BlissPro;font-size:36px;color:#0090b5}
.text-slider p{line-height:34px;font-size:24px}
.text-slider .sub-title{margin-bottom:10px;padding-bottom:25px;padding-top:0;font-family:FSLolaRegular;color:#0090b5;font-size:28px;line-height:32px;background:url(i/zigouigoui4.png) no-repeat bottom left}
.slider-progress{position:relative;top:-109px;left:-33px;clear:both;max-width:646px;margin:0 auto;text-align:center}
.slider-progress__index{margin-bottom:8px;font-size:25px;font-family:BlissProExtraLight}
.slider-progress__index .current-index{color:#0093b2}
.slider-progress__bar{position:relative;left:-10px;width:calc(100% + 20px);height:1px;background:#434343}
.slider-progress__bar-index{position:absolute;z-index:1;top:-2px;left:10px;content:"";width:100px;height:5px;background:#0093b2;transition:left .3s ease-in-out}
/***** RESPONSIVE *****/
@media screen and (max-width: 1280px) {
	#projet h1,#projet #top .title h1,#formations #top .title h1,#methodess #top .title h1 {font-size: 50px;}
}
@media screen and (max-width: 1023px) {
    #projet .container, #formations .container, #methodes .container {padding: 0 30px}
	#projet .content, #formations .content, #methodes .content {padding-top: 48px}
    #projet .w1--3,
    #projet .w1--3,
    #projet .w1--4,
    #projet .w3--4 {width:100%}
    #projet .cell {margin-bottom:50px}
    #projet .cell--last {margin-left:0}
    #projet .huge-title {padding-top:30px !important}
    #projet .parallax-layer img {max-width: 300px}
	#formations #description .masonry-block article,#methodes #description .masonry-block article {width:100%}
}
@media screen and (max-width: 767px) {
	#projet #top .title, #formations #top .title, #methodes #top .title {width: 100%;float: none;height: auto;padding: 22vw 4vw 4vw 5vw;}
	#projet #top .title h1, #formations #top .title h1, #methodes #top .title h1 {margin-top: 0;}
	#projet #top .title .surtitre {font-size: 1.2em}
	#formations #top .title .surtitre,#methodes #top .title .surtitre {border:none}
    #projet #top .visual, #formations #top .visual, #methodes #top .visual {width: 100%;float: none;display: block}
	#projet #top .visual img, #formations #top .visual img, #methodes #top .visual img {width: 100%;height: auto;}
    #projet #top .visual svg, #formations #top .visual svg, #methodes #top .visual svg {top: 0;left: 5%;width: 250px;	}
    #projet .home-banner.screen-height, #formations .home-banner.screen-height, #methodes .home-banner.screen-height {height: 55% !important;min-height: 440px;}
    #projet .intro, #formations .intro, #methodes .intro {padding: 60px 0;}
    #projet .intro p, #formations .intro p, #methodes .intro p {font-size: 18px;line-height:1.6}
    #projet .content {margin-bottom:0}
    #projet .slider-content {margin-bottom:50px}
    #projet .content ul li,
    #projet .text-slider p {font-size: 1.2em}
    #projet .cell.w1--4 {display: none}
	#formations #description .formations-block article h3,#methodes #description .formations-block article h3 {font-size:25px}
	.img-slider {min-height: 100px}
    .slider-left,
    .slider-right {width: 100%;margin-bottom: 20px}
    .slider-progress {top: 0;left: 0;padding-bottom:40px}
	#formations #description .masonry-block article h3,#methodes #description .masonry-block article h3 {letter-spacing:normal}
	#formations #description .perso,#methodes #description .perso {font-size:18px}
    .text-slider h3{line-height:normal;font-size:30px}
    .text-slider p{line-height:1.6;font-size:16px}
    .text-slider .sub-title{font-size:22px;line-height:normal}  
}
@media screen and (max-width: 420px) {
	#projet .content .list-itle, #formations .content .list-itle, #methodes .content .list-itle {font-size:30px;}
	#projet h1,#projet #top .title h1,#formations #top .title h1,#methodes #top .title h1 {font-size: 42px;}
	.masonry-block .category {font-size:14px}
	.masonry-block article h3 {font-size:22px;line-height:normal}
}
/***** SLOW CONTENT *****/
/***** GLOBAL *****/
#pageslowcontent .container {max-width: 1170px;margin: auto;}
#pageslowcontent .centerer {text-align: center}
#pageslowcontent p {font-family: 'FSLolaRegular';color: #393838;font-size: 1.2em}
#pageslowcontent h3 {color: #0093b2}
#pageslowcontent small {font-family: 'FSLolaRegular';font-size:0.9vw;display: block;text-align:center;margin-top: 2vw;}
/***** COVER *****/
#pageslowcontent .home-banner.screen-height {height: 80%!important;min-height: 512px;}
#pageslowcontent #top .title {float: right;background: url(i/bg-violet-light.jpg) repeat;width: 60%;height: 100%;padding: 7vw 4vw 4vw 5vw;box-sizing: border-box}
#pageslowcontent #top .visual {display: flex;justify-content: center;align-items: center;width: 40%;height: 100%;position: relative;overflow: hidden}
#pageslowcontent #top .visual img {position: absolute;z-index: 1;float: left;height: 100%}
#pageslowcontent path {fill: none}
#pageslowcontent #top .visual svg {position: relative;z-index: 2;top: 0;left: 0;max-width: 80%;width: 400px;max-height: 60%;opacity: 0}
#pageslowcontent #top .visual svg.set {display: block;opacity: 1}
#pageslowcontent #top .title h1 {    margin-top: 15vh;margin-bottom: 0;padding-bottom: 8px;font-size: 4.5em;text-align: left;line-height: 1em;top: 0;color: #FFF;text-transform: uppercase;font-family: "BlissProMedium";letter-spacing: .5vw}
/***** CONTENT *****/
#pageslowcontent .first {margin-top: -8vw;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}
#pageslowcontent .content {margin-bottom: 10vh;padding-top: 48px;background: #fff}
#pageslowcontent .intro {padding-top: 127px;padding-bottom: 92px;background: url(i/bg1-alt.jpg) repeat}
#pageslowcontent .intro p {line-height: 34px;font-size: 28px;color: #4b4b4b;display:inline-block}
#pageslowcontent .arguments-block {background:#d8d9db}
#pageslowcontent .arguments-block h2 {color:#0090B5;border-bottom-color: #0090B5}
#pageslowcontent .argument {padding-top:7vw; clip-path: url(i/biseaux.svg#middle);-webkit-clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 6vw, 100% 100%, 0 calc(100% - 6vw));z-index:3 !important;overflow: hidden;background:url(i/bg1.png);padding-bottom:9vw; }
#pageslowcontent .argument:nth-child(odd) {background:#d8d9db}
#pageslowcontent .argument:nth-child(2) {clip-path: url(i/biseaux.svg#first);-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));}
#pageslowcontent .argument:last-child {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%);}
#pageslowcontent .argument .visuals {float:left;width:50%;position:relative;box-sizing:border-box;height:70%;margin-left:5%}
#pageslowcontent .argument .visuals::before,
#pageslowcontent .argument .visuals::after {width:45px;height:45px;display:block;position:absolute;}
#pageslowcontent .argument .visuals::before {border-top:solid 1px #999999;border-right:solid 1px #999999;top:0;right:0;}
#pageslowcontent .argument .visuals::after {border-bottom:solid 1px #999999;border-left:solid 1px #999999;bottom:-1%;left:0;}
#pageslowcontent .argument .visuals img {display:none;width:100%;height:auto;}
#pageslowcontent .argument .visuals img:first-child {display:block;}
#pageslowcontent .argument .infos {float:right;width:37%;box-sizing:border-box;padding:100px 100px 50px 0px;}
#pageslowcontent .argument .infos h3 {font-family: 'BlissProExtraLight';color:#0090B5;text-transform: uppercase;font-size:2vw;}
#pageslowcontent .argument .infos .sub-title {font-family: 'FSLolaRegular';color:#0090B5;font-size:1.5vw;background: url(i/zigouigoui4.png) no-repeat bottom left;padding-bottom:20px;margin-bottom:20px;}
#pageslowcontent .argument .infos p {font-family: 'FSLolaRegular';color:#4b4b4b;font-size:1.2vw;}
#pageslowcontent .slider-content {padding-top: 100px;}
/***** RESPONSIVE *****/
@media screen and (max-width: 1440px) {
	#pageslowcontent .argument .visuals {width: 45%}
	#pageslowcontent .argument .infos {width: 45%;padding-right: 30px}
	#pageslowcontent .argument .infos h3 {font-size:2.3vw;}
    #pageslowcontent .argument .infos .sub-title {font-size:2vw;}
	#pageslowcontent .argument .infos p {font-size:1.7vw;}
}
@media screen and (max-width: 1280px) {
	#pageslowcontent h1,#pageslowcontent #top .title h1 {font-size: 50px}
}
@media screen and (max-width: 1023px) {
    #pageslowcontent .container {padding: 0 30px}
	#pageslowcontent .content {padding-top: 48px}
	#pageslowcontent .argument {clip-path:none;margin-top: 0;padding-top:3vw}
	#pageslowcontent .argument .infos {padding-right:20px;padding-top:7vw}
	#pageslowcontent .argument .infos h3 {font-size: 3vw}
	#pageslowcontent .argument .infos .sub-title {font-size: 2vw}
	#pageslowcontent .argument .infos p,#references .realisation .link a {font-size: 1.8vw}
    #pageslowcontent .argument .visuals, #pageslowcontent .argument .infos {width:auto;float:none;}
    #pageslowcontent .argument .infos {padding-left:100px;padding-top:20px;}
	#pageslowcontent .argument .visuals::after {display:none;}
	#pageslowcontent .argument .visuals {margin-right: 20px;}
	#pageslowcontent .argument .visuals-nav {position: relative;top:auto;bottom:auto;left:auto;}
	#pageslowcontent .argument .visuals img {top:7vw;position:relative}
	#pageslowcontent .argument .visuals-nav .arrows span {height: 41px;width: 41px;font-size: 25px;}
	#pageslowcontent .argument .visuals::before {top:50px;}
    #pageslowcontent .argument .visuals-nav .line {font-size:1.8vw;}
}
@media screen and (max-width: 767px) {
    #pageslowcontent #top .title {width: 100%;float: none;height: auto;padding: 22vw 4vw 4vw 5vw}
    #pageslowcontent #top .title h1 {margin-top: 0}
    #pageslowcontent #top .visual {width: 100%;float: none;display: block}
	#pageslowcontent #top .visual img {width: 100%;height: auto}
    #pageslowcontent #top .visual svg {display: none}
    #pageslowcontent .home-banner.screen-height {height: 55% !important;min-height: 440px}
    #pageslowcontent .intro {padding: 60px 0}
    #pageslowcontent .intro p {font-size: 18px;line-height:1.6}
	#pageslowcontent .argument .infos {padding:20px}
    #pageslowcontent .argument .infos h3 {font-size:20px;}
    #pageslowcontent .argument .infos p {font-size:14px;}
    #pageslowcontent .argument .infos .sub-title {font-size:16px;}
    #pageslowcontent .argument .visuals-nav .line {left:110px;font-size:14px;}
    #pageslowcontent .argument .visuals {height:300px;}
	#pageslowcontent .argument .infos .sub-title, #pageslowcontent .argument .infos p {font-size:16px}
	#pageslowcontent .argument .visuals, #pageslowcontent .argument .infos {width:90%}
    #pageslowcontent .content {margin-bottom: 0}
    #pageslowcontent .slider-content {margin-bottom: 50px}
}
@media screen and (max-width: 420px) {
	#pageslowcontent .argument {padding-top: 0}
	#pageslowcontent .argument .infos{float:none; width: 90%;padding:20px}
	#pageslowcontent .argument .visuals {float:none; width: 100%}
	#pageslowcontent .argument .infos h3 {font-size:30px}	
	#pageslowcontent .argument .infos .sub-title{font-size:20px}
	#pageslowcontent .argument .infos p {font-size:16px}
	#pageslowcontent h1, #pageslowcontent #top .title h1 {font-size:42px}
	#pageslowcontent small {font-size:14px}
	#pageslowcontent .argument .visuals::before, #pageslowcontent .argument .visuals::after {display:none}
	#references .realisation .link a {font-size:18px}
	#references .realisation .visuals::before, #references .realisation .visuals::after {display:none}
	}
/***** CROSS LINKING *****/
.cross-linking {display: flex;flex-flow: row;position: relative}
.cross-linking .cross-linking__project {flex-grow: 1;flex-basis: 0;box-sizing: border-box;height: 320px;position: relative;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.cross-linking .cross-linking__project:after {content: "";position: absolute;z-index: 0;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 143, 174, 0.5);transition: all 500ms}
.cross-linking .cross-linking__project:hover:after {background: rgba(32, 28, 63, 0.6)}
.cross-linking .cross-linking__project a {position: relative;z-index: 1;display: flex;flex-flow: column wrap;align-items: center;justify-content: center;text-align: center;height: 320px;padding: 0 10px;align-items: center;color: #fff;text-decoration: none;transition: all 500ms}
.cross-linking .cross-linking__project a:hover {box-shadow: inset 0 0 0 10px #007ca0}
.cross-linking .cross-linking__project a>div {position: relative;transition: all 500ms}
.cross-linking .cross-linking__project a:hover>div {margin-top: -20px;margin-bottom: 20px}
.cross-linking .cross-linking__project img {max-height: 160px;width: auto;height: auto;margin-bottom: 30px}
.cross-linking .cross-linking__project-title {line-height: 28px;font-family: "BlissPro";font-size: 24px;text-transform: uppercase;letter-spacing: 5px}

/***** RESPONSIVE *****/
@media screen and (max-width: 1400px) {
    .cross-linking .cross-linking__project,
    .cross-linking .cross-linking__project a {height: 270px}
    .cross-linking .cross-linking__project a {padding: 0 5px}
    .cross-linking .cross-linking__project img {max-height: 100px;margin-bottom: 20px}
    .cross-linking .cross-linking__project-title {line-height: 25px;font-size: 16px}
}
@media screen and (max-width: 1023px) {
    .cross-linking {flex-flow: row wrap}
    .cross-linking .cross-linking__project {flex: 0 1 calc(25%);flex-grow: 1}
}
@media screen and (max-width: 768px) {
    .cross-linking .cross-linking__project {flex: 0 1 calc(50%)}
}
@media screen and (max-width: 768px) {
    .cross-linking .cross-linking__project {flex: 0 1 calc(100%)}
    .cross-linking .cross-linking__project,
    .cross-linking .cross-linking__project a {height: 170px}
    .cross-linking .cross-linking__project img {max-height: 100px;margin-bottom: 10px}
    .cross-linking .cross-linking__project-title {line-height: 17px;font-size: 17px}
}
/***** FORMATION ****/
#formation .container {width: 100% ;margin: auto}
#formation .main {width: 60%;float:left;box-sizing: border-box;padding-right:50px;}
#formation .second {width: 40%;float:left;background:#f1f1f1;padding:30px;box-sizing: border-box;}
#formation p {font-family: 'FSLolaRegular';color: #393838;padding-bottom: 1vw}
#formation .second p, #formation .second li{font-size:.8em}
#formation h1 span {font-family:"BlissPro";font-size:.5em;display:block}
#formation h3 {color: #0093b2}
#formation #section-modal{z-index: 1000 !important;}
#formation #section-modal .dixxitcontact-modal{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.4);}
#formation #section-modal .dixxitcontact-modal-content{position: relative;max-width: 850px;height: 100%;box-sizing: border-box;margin: auto;padding: 1rem;text-align: center;animation-name: landing-modal-slide-down;animation-duration: 0.5s;}
#formation #section-modal .dixxitcontact-close-schedule-button{width: 3rem;height: 3rem;margin: auto;color: #999;border: 2px solid #999;border-radius: 50%;background: #fff;font-size: 2rem;font-weight: bold;text-decoration: none;}
#formation #section-modal .dixxitcontact-close-schedule-button:hover,#formation #section-modal .dixxitcontact-close-schedule-button:focus{color: #000;border: 2px solid #000;cursor: pointer;text-decoration: none;}
/***** responsive ****/
@media screen and (max-width: 1280px) {
	#formation h1 {font-size: 50px}
}
@media screen and (max-width: 1023px) {
    #formation #content {padding: 30px}
	#formation .content {padding-top:0}
	#formation .main{width:100%;float:none;padding:0}
	#formation .second {width:100%;float:none}
	#formation h2 {padding-top:20px}
    #formation .parallax-layer img {max-width: 300px}
}
@media screen and (max-width: 420px) {
	#formation .second p, #formation .second li{font-size:16px}
	#formation h1 {font-size: 42px;}
}
/* BLOG */


/*  - PAGE DE TELECHARGEMENT -  */
#download #title {background: url(i/bg9.jpg) repeat;padding: 140px 0;clip-path: url(i/biseaux.svg#first);-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));}
#download .container {max-width: 1440px; margin: auto;padding-left: 130px; box-sizing: border-box;position: relative;transition: all 500ms}
#download #title h1 {text-transform: uppercase;font-family: BlissPro;font-size: 50px;color: #fff;line-height: 50px; max-width: 590px}
#download #title .category {color:#fff}
#download #title .cat1 {background-color:#98338f }
#download #title .cat2 {background-color:#007CA2 }
#download #title .cat3 {background-color:#eb5a61 }
#download #hero {width: 100%;position:absolute;z-index:  99; top:100px;right: 0;transition: all 500ms}
#download #content {margin-top:-30px;font-family: 'FSLolaRegular';color:#4b4b4b; font-size:20px;overflow: visible;z-index: 3}
#download .mockup {position: absolute;top:0;right: 0;width:680px;transition: all 500ms}
#download #content .description {width: 810px; padding-right: 80px; padding-bottom: 40px; box-sizing: border-box;transition: all 500ms}
#download #content .viewer {width: 810px; padding-right: 80px;box-sizing: border-box;transition: all 500ms}
#download #content .viewer>* {width: 100% }
#download #content p {padding-top: 20px}
#download #content ul {margin-left:15px}
#download #content li {box-sizing: border-box;position: relative;padding-left: 15px;color: #4b4b4b;font-size: 20px;font-family: 'FSLolaRegular'}
#download #content li::before {position: absolute;z-index: 1;top: 13px;left: 0;content: "";width: 5px;height: 5px;border-radius: 50%;background: #4b4b4b;}
#download #content #blog {background: #ededed; width: 500px; overflow: hidden; position: absolute;right: 0;bottom: 0;padding:15px; box-sizing: border-box;transition: all 500ms}
#download #content #blog h2 {text-transform: uppercase;font-family: BlissPro;font-size: 20px;color:#007CA2;line-height: 20px; }
#download #content #blog article {padding-top: 15px;}
#download #content #blog article .container-img { width: 180px; height: 110px; overflow: hidden;position: relative;display: flex;justify-content: center;}
#download #content #blog article .container-img img { height: 100%}
#download #content #blog article .container-img::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}
#download #content #blog article a {display: flex;color:#4B4B4B;text-decoration: none;}
#download #content #blog article a:hover .container-img::after {background: rgba(32, 28, 63, 0)}
#download #content #blog article a .container {transition: all 500ms}
#download #content #blog article a:hover .container {transform:translate(0,-10px)}
#download #content #blog article .container {width: 290px;padding-left: 10px;text-align: left}
#download #content #blog article .category {color:#fff; font-size: 16px;font-family: 'BlissPro'}
#download #content #blog article .cat1 {background-color:#394f20 }
#download #content #blog article .cat2 {background-color:#391238 }
#download #content #blog article .cat3 {background-color:#023f4f }
#download #content #blog article .cat4  {background:#201c3f}
#download #content #blog article .cat5  {background:#98338f}
#download #content #blog article p {padding-top: 0}
#download #content #blog article h3 {color:#4B4B4B;text-transform: uppercase;font-family: BlissPro;font-size: 20px;line-height: 20px;}
#download #form {margin-top:-100px;padding-top:200px;padding-bottom:50px;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%);box-sizing: border-box;background: url(i/bg5.jpg) repeat}
#download #form .form-content {max-width: 600px;margin: auto}
#download #form .form-content h2 {font-family: FSLolaRegular;margin-bottom: 20px;padding-bottom: 25px;line-height: 34px;font-size: 34px;color: #4b4b4b; font-weight: bold;color: #fff;background: url(i/zigouigoui6.png) no-repeat bottom center;text-align: center }
#download #form .form-content .mauticform-page-wrapper{padding:0 40px;margin: auto;}
#download #form .input.mauticform-row {position:relative;z-index:1;display:inline-block;width:100%;vertical-align:top;margin-top:10px;margin-bottom:10px;font-family: FSLolaRegular;}
#download #form .input__field{position:relative;display:block;width:60%;border:none;border-radius:0;background:#f0f0f0;color:#4B4B4B;font-family: 'FSLolaRegular';-webkit-appearance:none}
#download #form .input__field:focus{outline:0}
#download #form .input__label{display:inline-block;float:right;padding:0 1em;width:40%;color:#696969;font-size:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
#download #form .input__label-content{position:relative;display:block;padding:1.6em 0;width:100%}
#download #form .input__field--up{width:100%;background-color:#fff;border:2px solid transparent;-webkit-transition:background-color .25s,border-color .25s;transition:background-color .25s,border-color .25s}
#download #form .input__label--up{width:100%;text-align:left;position:absolute;bottom:55%;left:10px;pointer-events:none;overflow:hidden;padding:0;-webkit-transform:translate3d(0,1.2em,0);transform:translate3d(0,1.2em,0);-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}
#download #form .input__label-content--up{color:#8b8c8b;padding:.25em 0;-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}
#download #form .input__label-content--up::after{content:attr(data-content);position:absolute;bottom:120%;left:0;height:45%;color:#fff;padding:0 .25em .1em .25em;background:#201c3f;font-size:16px;border-radius:3px}
#download #form .input--filled .input__label--up,
#download #form .input__field--up:focus+#download #form .input__label--up{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
#download #form .input--filled .input__label-content--up,
#download #form .input__field--up:focus+#download #form .input__label--up .input__label-content--up{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
#download #form .error { border-color: #ff585d; }
#download #form .input--filled .input__field--up,
#download #form .input__field--up:focus+#download #form .input__field--up{border-color:#201c3f}
#download #form .input--filled .input__field--up.error,
#download #form .input__field--up.error:focus+#download #form .input__field--up.error{border-color:#e00d59}
#download #form .consent {color:#FFF;box-sizing: border-box;font-size: 12px}
#download #form .consent a {color:#fff}
#download #form .mauticform-row.mauticform-required .mauticform-label::after {display:none}
#download #form .submit {text-align: center;margin-top:10px}
#download #form .download-button {background: #201c3f;border:none;padding-right:70px}
#download #form .download-button::after {box-sizing: border-box;width:50px;padding-top:8px}
#download #form .download-button .toleft {background-color: #93328e}
#download #form .mauticform-innerform {margin-top:-40px}
#download #form .mauticform-errormsg { color:#201c3f}
#download #form .mauticform-message {padding:0}
#download #form .mauticform-message:not(:empty) + .mauticform-innerform {display: none}
#download #form .input-wrapper { position: relative; }
#download #form .field {  margin: 6px 0 18px 0; position: relative; }
#download #form [data-type='validator-error'] { font-size: 12px; position: absolute; right: 0; z-index: 10; margin-top: -2px; color: #ffffff; background: rgb(147, 50, 142); padding: 4px 10px; border-radius: 1px; pointer-events: none; }
#download #form [data-type='validator-error']:before { content: ''; width: 0; height: 0; top: -5px; position: absolute; left: 6px; border-left: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0); border-bottom: 5px solid #93328e; }
#download #form .mauticform-button-wrapper .mauticform-button.btn-default[disabled],#download #form .mauticform-button-wrapper .mauticform-button.btn-default[disabled] .toleft {background-color:#aaaaaa}
/***** responsive ***
@media screen and (max-width: 1400px) {
	#download #form {padding-top:6vw}
	#download #content {width: 50%}
	#download #content .mockup {width:40%}
	#download #content h1,#download #content .intro {padding-right: 40%}
	#download #form {width:50%}
	#download #form .form-content {width:50%}
	#download #content .intro, #download #content .first {padding-right: 0}
}
*/
@media screen and (max-width: 1280px) {
    #download .container {padding-left:30px}
    #download #content #blog {width: 350px;}
    #download #content .description, #download #content .viewer {width: 710px}
    #download .mockup {width: 580px}
}

@media screen and (max-width: 1024px) {
    #download .container {max-width: 600px;}
    #download #hero {position: relative;top:-100px;right: auto}
    #download #content #blog {position: relative;top:auto;right:auto;margin-top: 40px;width:auto;max-width:  710px}
    #download .mockup {position: relative;top:auto;right:auto}
    #download #content .description,#download #content .viewer {padding-right: 0;width: 100% }
    
}
@media screen and (max-width: 420px) {
    #download .mockup {width: 280px}
    #download .container {padding-right: 30px}
    
}

/*  - LANDING PAGE -  */
#landing #title {background: url(i/bg-violet.jpg) repeat;padding: 140px 0;clip-path: url(i/biseaux.svg#first);-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 6vw));}
#landing #contact-link {position:absolute;right:0;top:-100px;z-index:99}
#landing #contact-link a:link {color:#fff}
#landing #contact-link .next-button {padding-right:20px;border:none;background:#ff585d;font-size:30px}
#landing #contact-link .next-button .toleft {background-color: #0093b2}
#landing #contact-link .next-button::after {display:none}
#landing .container {max-width: 1440px; margin: auto;padding-left: 130px; box-sizing: border-box;position: relative;transition: all 500ms;display:flex}
#landing #title h1 {text-transform: uppercase;font-family: BlissPro;font-size: 50px;color: #fff;line-height: 60px;width:55%}
#landing #title h1 strong {position:relative}
#landing #title h1 strong::before {position: absolute;z-index: -1;top: 30px;left: 0;content: "";width: 100%;height: 25px;background: #0093b2;}
#landing #hero {width: 100%;position:absolute;z-index:  99; top:100px;right: 0;transition: all 500ms}
#landing #content {margin-top:-30px;font-family: 'FSLolaRegular';color:#4b4b4b; font-size:20px;overflow: visible;z-index: 3}
#landing #content .h2-container {padding-bottom:30px}
#landing #content .h2-container h2 {border-color:#4b4b4b;padding-top:0;font-size: 30px;}
#landing #content .description h2 {color: #0093b2}
#landing #content .reference .h2-container h2{border:none;padding-top:60px}
#landing .mockup {position: absolute;top:0;left:58%;width:400px;transition: all 500ms}
#landing #content .description {width: 810px; padding-right: 80px; box-sizing: border-box;transition: all 500ms}
#landing #content .presentation {padding:30px 80px;font-size: 80%;background: #EBEBEB;}
#landing #content .reference {width: 810px; padding-right: 80px; padding-bottom: 80px; box-sizing: border-box;transition: all 500ms}
#landing #content .reference .slider-progress {top: 10px;left: -100px;width:100px}
#landing #content .reference .img-slider {min-height: 250px;margin-bottom:0}
#landing #content .reference .text-slider p {line-height: 1.4;font-size: 20px;padding-top: 10px}
#landing #content .reference .text-slider h3 {font-size: 30px}
#landing #content .reference .ext-button {display:inline-block}
#landing #content .details-produit,#landing #content .benefices-produit {background: url(i/bg10.png);padding:30px;position:relative}
#landing #content .details-produit {margin-top:30px}
#landing #content .details-produit .details {display:flex}
#landing #content .details-produit .details .detail {flex:1;padding-right:30px;text-align:center}
#landing #content .details-produit .details .detail h3 {background: url(i/zigouigoui5.png) no-repeat bottom center;padding-bottom:20px;text-transform:uppercase;color:#0093b2;font-weight:bold}
#landing #content .details-produit .details .detail p {padding-top:10px;font-size:18px}
#landing #content .expert {background:#201c3f;padding:30px}
#landing #content .expert h2 {border:none;color:#fff;text-align:left;padding-top:0;}
#landing #content .expert p {color:#fff}
#landing #content .expert a {display:block;color:#fff;font-size:16px}
#landing #content .expert .autor {display:flex;flex-wrap:wrap;justify-content:center}
#landing #content .expert .autor .portrait-container {margin:0 20px}
#landing #content .expert .autor .bio-container {min-width:200px;flex:1}
#landing #content .viewer {width: 810px; padding-right: 80px;box-sizing: border-box;transition: all 500ms}
#landing #content .viewer>* {width: 100% }
#landing #content p {padding-top: 20px}
#landing #content .benefices-produit::after {position: absolute;z-index: 3;bottom:-10px;right:10px;content:url('i/main.png')}
#landing #content .benefices-produit .h2-container {border-color:#fff; background:#93328e;padding: 30px}
#landing #content .benefices-produit .h2-container h2 {color:#fff;border-color:#fff}
#landing #content .benefices {background:#93328e;padding: 0 80px 30px 80px}
#landing #content .benefices p {color:#fff;box-sizing: border-box;position: relative;padding-left: 15px;font-size: 20px;font-family: 'FSLolaRegular';padding-bottom:10px;padding-top:10px;border-bottom:1px solid #FFF}
#landing #content .benefices p:last-child {border:none;padding-bottom:0;padding-right: 40px;}
#landing #content .benefices p::before {position: absolute;z-index: 1;top: 23px;left: 0;content: "";width: 5px;height: 5px;border-radius: 50%;background: #fff;}
#landing #content .argument {flex:2}

#landing #form {padding:50px;box-sizing: border-box;background: url(i/bg5.jpg) repeat;margin-top:-80px}
#landing #form .form-content {max-width: 600px;margin: auto;position:-webkit-sticky; position:sticky; top:25%;}
#landing #form .form-content h2 {font-family: FSLolaMedium;margin-bottom: 20px;padding:45px 10px 25px 10px;color: #fff;background: url(i/zigouigoui6.png) no-repeat bottom center;text-align: center }
#landing #form .form-content .mauticform-page-wrapper{padding:0;margin: auto;}
#landing #form .input.mauticform-row {position:relative;z-index:1;display:inline-block;width:100%;vertical-align:top;margin-top:10px;margin-bottom:10px;font-family: FSLolaRegular;}
#landing #form .input__field{position:relative;display:block;width:60%;border:none;border-radius:0;background:#f0f0f0;color:#4B4B4B;font-family: 'FSLolaRegular';-webkit-appearance:none;font-size: 20px;}
#landing #form .input__field:focus{outline:0}
#landing #form .input__label{display:inline-block;float:right;padding:0 1em;width:40%;color:#696969;font-size:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
#landing #form .input__label-content{position:relative;display:block;padding:1.6em 0;width:100%}
#landing #form .input__field--up{width:100%;background-color:#fff;border:2px solid transparent;-webkit-transition:background-color .25s,border-color .25s;transition:background-color .25s,border-color .25s}
#landing #form .input__label--up{width:100%;text-align:left;position:absolute;bottom:55%;left:10px;pointer-events:none;overflow:hidden;padding:0;-webkit-transform:translate3d(0,1.2em,0);transform:translate3d(0,1.2em,0);-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}
#landing #form .input__label-content--up{color:#8b8c8b;padding:.25em 0;-webkit-transition:-webkit-transform .25s;transition:transform .25s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out}
#landing #form .input__label-content--up::after{content:attr(data-content);position:absolute;bottom:120%;left:0;height:45%;color:#fff;padding:0 .25em .1em .25em;background:#201c3f;font-size:16px;border-radius:3px}
#landing #form .input--filled .input__label--up,
#landing #form .input__field--up:focus+#landing #form .input__label--up{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
#landing #form .input--filled .input__label-content--up,
#landing #form .input__field--up:focus+#landing #form .input__label--up .input__label-content--up{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}
#landing #form .error { border-color: #ff585d; }
#landing #form .input--filled .input__field--up,
#landing #form .input__field--up:focus+#landing #form .input__field--up{border-color:#201c3f}
#landing #form .input--filled .input__field--up.error,
#landing #form .input__field--up.error:focus+#landing #form .input__field--up.error{border-color:#e00d59}
#landing #form .consent {color:#FFF;box-sizing: border-box;font-size: 12px}
#landing #form .consent a {color:#fff}
#landing #form .mauticform-row.mauticform-required .mauticform-label::after {display:none}
#landing #form .submit {text-align: center;margin-top:10px}
#landing #form .landing-button {background: #201c3f;border:none;padding-right:70px}
#landing #form .landing-button::after {box-sizing: border-box;width:50px}
#landing #form .landing-button .toleft {background-color: #93328e}
#landing #form .mauticform-errormsg { color:#201c3f}
#landing #form .mauticform-message {padding:0}
#landing #form .mauticform-message:not(:empty) + .mauticform-innerform {display: none}
#landing #form .input-wrapper { position: relative; }
#landing #form .field {  margin: 6px 0 18px 0; position: relative; }
#landing #form [data-type='validator-error'] { font-size: 12px; position: absolute; right: 0; z-index: 10; margin-top: -2px; color: #ffffff; background: rgb(147, 50, 142); padding: 4px 10px; border-radius: 1px; pointer-events: none; }
#landing #form [data-type='validator-error']:before { content: ''; width: 0; height: 0; top: -5px; position: absolute; left: 6px; border-left: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0); border-bottom: 5px solid #93328e; }
#landing #form .mauticform-button-wrapper .mauticform-button.btn-default[disabled],#landing #form .mauticform-button-wrapper .mauticform-button.btn-default[disabled] .toleft {background-color:#aaaaaa}
#landing #form #open-form-link {color: #fff;cursor: pointer;display: block;text-align: center;}
#landing #form #open-form-link span {text-decoration: underline;}
#landing #form #open-form-link svg {width: 1rem;height: 1rem;border: 1px solid #fff;border-radius: 50%;padding: 4px;margin-left: 0.5rem;transition: 0.5s;}
#landing #form #contact-form {display: none;animation-name: landing-modal-slide-down;animation-duration: 0.5s;padding: 1rem;background-color: #fff9;margin-top: 1rem;}
#landing #form #contact-form .legal-notice{font-size: 0.7rem;}
#landing #section-modal{z-index: 1000 !important;}
#landing #section-modal .dixxitcontentfactory-modal{display: none;position: fixed;left: 0;top: 0;width: 100%;height: 100%;overflow: auto;background-color: rgb(0, 0, 0);background-color: rgba(0, 0, 0, 0.4);}
#landing #section-modal .dixxitcontentfactory-modal-content{position: relative;max-width: 850px;height: 100%;box-sizing: border-box;margin: auto;padding: 1rem;text-align: center;animation-name: landing-modal-slide-down;animation-duration: 0.5s;}
#landing #section-modal .dixxitcontentfactory-close-schedule-button{width: 3rem;height: 3rem;margin: auto;color: #999;border: 2px solid #999;border-radius: 50%;background: #fff;font-size: 2rem;font-weight: bold;text-decoration: none;}
#landing #section-modal .dixxitcontentfactory-close-schedule-button:hover,#landing #section-modal .dixxitcontentfactory-close-schedule-button:focus{color: #000;border: 2px solid #000;cursor: pointer;text-decoration: none;}


/***** responsive ****/
@media screen and (max-width: 1280px) {
    #landing .container {padding-left:30px}

    #landing .mockup {}
}

@media screen and (max-width: 1024px) {
    #landing #hero {position: relative;top:-100px;right: auto}
    #landing #title h1 {width:100%;font-size:40px;line-height:50px}
    #landing .mockup {position: relative;left:0}
   #landing #content .h2-container h2 {font-size:30px}
	#landing .container  {display:block}
	#landing #form {margin-top:0}
    
}
@media screen and (max-width: 420px) {
    #landing .mockup {display:none}
    #landing .container {padding-top:15px;display:block}
	#landing #title .container {padding-right: 30px}
	#landing #content .container {padding-right: 0;padding-left:0}
	#landing #title {padding-top:80px;padding-bottom:80px}
    #landing #content .details-produit .details {display:block}
	#landing #contact-link {top:-120px}
	#landing #content .h2-container h2 {}
	#landing #content .description,#landing #content .reference { width: 100%; padding:0 15px 20px 15px;}
	#landing #content .details-produit, #landing #content .benefices-produit {padding:10px}
	#landing #content .details-produit .details .detail {padding-right:0}
	#landing #content .benefices {margin-left:0px;padding: 0 10px 10px 10px}
	#landing #content .reference .slider-progress {display:none}
	#landing #content .reference .slider-left {margin-bottom: 80px}
	#landing #content .reference p {padding-top:0}
	#landing #content .expert {display:block}
	#landing #form {padding: 0}
	#landing #form .landing-button::after {padding-top:0}
	#landing #content .benefices-produit::after {display:none}
	#landing #contact-link .next-button {font-size:20px}
	#landing .portrait {width:100px}
	#landing #form .form-content button span {font-size:1.6rem !important}
	#landing #form .form-content div {position:fixed;bottom: 0px;
    margin-bottom: 0 !important;
    padding: 10px;
    background: url(i/bg5.jpg) repeat;
    width: 100%;}
	#landing #form .form-content p {margin-top:50px}
}

@keyframes landing-modal-slide-down {
	0% {
		transform: translateY(-2rem);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

/**** Fix Blog FF ****/
#blog article.masonry {
	//overflow: visible}
a.category:before, p.category:before {content: "#"}
.bottom p.category:before, a.category.cat0:before {content: ""}
.list-actu .bottom p.category:before {content: "#"}
/****************/
#blog .item-ressource {position: relative}
#blog .item-ressource .rescontent {position: absolute;top: 0}
#blog .item-ressource h3 {color: #fff!important;padding: 30px 100px 30px 30px}
#blog .item .imgcover {}
#blog .item-ressource p.cta {font-family: "BlissPro";color: #fff;margin-left: 30px;display: inline-block;background: #0090b5;padding: 7px 30px;font-size: 22px}
#blogarticle .video-wrapper {position: relative;overflow: hidden;width: 100%;padding-top: 56.25% !important; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */}
#blogarticle .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
/* Bloc Téléchargement */
#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}
/** Ressources maillage **/
.ressources__wrapper {display: flex;flex-flow: row wrap;justify-content: space-between;width: 1600px;margin: 0 auto;max-width: 100%}
.ressources__ressources {flex-basis: 66%}
.ressources__ressources #ressources .masonry-block {width: 100%!important}
.ressources__blogs {flex-basis: 33%;width: 33%;margin-top: 47px;position: relative}
@media screen and (max-width: 1410px) {
    .ressources__ressources, .ressources__blogs {flex-basis: 50%;width: 50%}
    #ressources .masonry-block article {width: 100%!important}
    .ressources__blogswrapper {width: 40vw;margin-left: 20px}
}
.ressources__blogs h2 {font-family: BlissPro, sans-serif;text-align: center;text-transform: uppercase}
.ressources__blogs h3 {color: #fff!important}
.ressources__blogs img {text-align:center}
.ressources__blogswrapper {background: #0090b5;padding: 20px}
@media screen and (max-width: 768px) {
    .ressources__ressources, .ressources__blogs {flex-basis: 100%}
    .ressources__blogs {left: 0}
    .ressources__blogswrapper {width: 80%;margin-left: 7%}
}
.ressources__blogs article {padding-top: 15px;}
.ressources__blogs article .container-img { width: 180px; height: 110px; overflow: hidden;position: relative;display: flex;justify-content: center;}
.ressources__blogs article .container-img img { height: 100%}
.ressources__blogs article .container-img::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}
.ressources__blogs article a {display: flex;color:#4B4B4B;text-decoration: none;}
.ressources__blogs article a:hover .container-img::after {background: rgba(32, 28, 63, 0)}
.ressources__blogs article a .container {transition: all 500ms}
.ressources__blogs article a:hover .container {transform:translate(0,-10px)}
.ressources__blogs article .container {width: 290px;padding-left: 10px;text-align: left}
.ressources__blogs article .category {color:#fff; font-size: 16px;font-family: 'BlissPro'}
.ressources__blogs article .cat1 {background-color:#394f20 }
.ressources__blogs article .cat2 {background-color:#391238 }
.ressources__blogs article .cat3 {background-color:#023f4f }
.ressources__blogs article .cat4  {background:#201c3f}
.ressources__blogs article .cat5  {background:#98338f}
.ressources__blogs article p {padding-top: 0}
.ressources__blogs article h3 {color:#4B4B4B;text-transform: uppercase;font-family: BlissPro;font-size: 20px;line-height: 20px;}