html {
    font-size: 62.5%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overscroll-behavior: contain;
}
body {
    min-width:320px;
}
div, p, img {
    margin:0;
    padding:0;
    border:0;
}
a {
    text-decoration:none;
}

/*
#cursor {
    height: 40px;
    width: 40px;
    border-radius: 40px;
    border: solid 1px #333;
    position: absolute;
    z-index:50000;
}*/


.indexImg {
    display:flex;
    position:absolute;
    top:-50%;
    bottom:-50%;
    left:-50%;
    right:-50%;
    width:100%;
    max-width:500px;
    height:390px;
    margin:auto;
    text-align:center;
}
.indexImg a {
    width:100%;
    height:100%;
}
.indexImg img {
    width:272px;
    margin:0 auto;
}
.index .ui_work, .index .ui_about {
    top:-50%;
    bottom:-50%;
    margin-top:auto;
    margin-bottom:auto;
}
.index h1 {
    position:relative;
    font-family:'Roboto Slab', serif;
    font-weight:100;
    font-size:2.8rem;
    line-height:2rem;
    color:#333;
    margin:auto;
    margin-top:60px;
}
.index h1 span:first-child {
    margin-right:34px;
}
.slash {
    display:block;
    position:absolute;
    height:57px;
    width:1px;
    margin:0;
    top:-8px;
    left:186px;
    background:#8400ff;
    transform:rotate(22deg);
    filter:drop-shadow(3px 5px 0px #0ddeff);
}
.slash:after {
    content:'';
    display:block;
    position:absolute;
    height:57px;
    width:1px;
    margin-left:10px;
    top:-27px;
    background:#8400ff;
}











/* INTERFACE TOP */

.wrapper {
    display:flex;
    justify-content:center;
    width:100%;
    max-width:1200px;
    margin:0 auto 90px auto;
}
.wrapper#header {
    margin-bottom:0;
}
#logo {
    display:flex;
    position:fixed;
    top:44px;
    width:100%;
    z-index:-1;
    justify-content:center;
}
#logo svg {
    height:78px;
    width:108px;
}
.ui_work, .ui_about {
    display:flex;
    position:fixed;
    z-index:500;
    top:50px;
    height:65px;
    width:55px;
}
.ui_work {
    justify-content: left;
    left:45px;
}
.ui_about {
    right:45px;
    justify-content: right;
}
.ui_work svg {
    margin:0 0 0 10px;
    height:36px;
    width:36px;
    fill:#333;
    filter: drop-shadow(-3px 3px 0px #0ddeffcc);
}
.ui_about svg {
    margin:0 0 0 5px;
    height:32px;
    width:40px;
    fill:#333;
    filter: drop-shadow(3px 3px 0px #0ddeffcc);
}
.liste_da .ui_work svg, .liste_da .ui_about svg, .liste_ui .ui_work svg, .liste_ui .ui_about svg, .liste_plus .ui_work svg, .liste_plus .ui_about svg {transition: filter 1000ms ease-in, fill 1000ms ease-in;}
.ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #0ddeffcc);}
.ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #0ddeffcc);}
.ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #0ddeffcc);}
.ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #0ddeffcc);}
.uisvgcolor.ui_work svg, .uisvgcolor.ui_about svg {fill:#fff;}
.uisvgcoloroff.ui_work svg, .uisvgcoloroff.ui_about svg {fill:#333; }
.ui_work div {
    display:flex;
    justify-content: left;
}
.ui_about div {
    display:flex;
    justify-content: right;
}
.ui_work div p, .ui_about div p {
    font-family:'Roboto Slab', serif;
    font-size:1.4rem;
    color:#333;
}
.uisvgcolor.ui_work div p, .uisvgcolor.ui_about div p {color:#fff;}
.uisvgcoloroff.ui_work div p, .uisvgcoloroff.ui_about div p {color:#333;}
.ui_work div p {
    margin:9px 0 0 5px;
}
.ui_about div p {
    margin:13px 5px 0 0;
}
.mainlink {
    width:100%;
}
.ui_work .mainlink div, .ui_about .mainlink div {
    display:flex;
    flex-direction:column;
    width:55px;
    height:66px
}
.ui_work .mainlink div {
    justify-content:left;
}
.ui_about .mainlink div {
    justify-content:right;
}
.ariane_work, .ariane_about {
    font-weight:700;
}
.ariane_work_snd, .ariane_about_snd {
    width:0;
    margin-top:36px;
}
.ariane_about_snd {
    position:absolute;
    margin-right:54px;
}
.ariane_work_rub, .ariane_about_rub {
    font-weight:400;
    white-space:nowrap;
}
.ariane_work_snd p.ariane_work_rub, .ariane_about_snd p.ariane_about_rub {
    margin:9px 5px 0 0;
}
.arrowup {
    display:flex;
    position:fixed;
    justify-content: center;
    z-index:200;
    bottom:17px;
    right:30px;
    width:80px;
    height:80px;
}
.arrowup svg {
    fill:#333;
    width:40px;
}
.arrowup.hide {
    display:none;
}
.mouseScroll_wrapper {
    display:flex;
    position:absolute;
    justify-content: center;
    z-index:500;
    bottom:50px;
    width:100%;
    pointer-events: none;
}
.mouseScroll_wrapper.hide {display:none;}
.mouseScroll {
    display:flex;
    position:relative;
    width:20px;
    height:40px;
    margin:0 auto;
    border:solid 1px #ffffff99;
    border-radius:15px;
}
.mouseScroll:after {
    content:" ";
    position:relative;
    width:10px;
    height:10px;
    margin:7px auto;
    background-color:#fff;
    border-radius:5px;
    animation: 5s ease infinite slidein;
}
@keyframes slidein {
    0% {margin-top:7px;}
    8% {margin-top:23px;}
    16% {margin-top:7px;}
    100% {margin-top:7px;}
}


/* BURGER MENU */

.burger, #burgermodal a.close {
    display:flex;
    position:fixed;
    justify-content: center;
    align-items: center;
    z-index:200;
    right:28px;
    top:23px;
    width:80px;
    height:80px;
}
.burger {
    display:none;
    cursor:pointer;
    filter: drop-shadow(3px 3px 0px #0ddeffcc);
}
.burger svg {
    fill:#333;
    width:45px;
}
.burger.uisvgcolor svg{
    fill:#fff;
}
.burger.uisvgcoloroff svg {fill:#333;}
.burger.hide {
    display:none;
}
.burgermodalwrapper {
    position:fixed;
    width:100%;
    height:100%;
    z-index:-500;
    overflow:hidden;
}
#burgermodal {
    display:flex;
    position:absolute;
    justify-content: center;
    align-items:center;
    left:100%;
    height:100%;
    width:100%;
    background-color: rgba(0, 0, 0, 0.85);
    transition: left 200ms;
}
.burgermodalwrapper.zindex {
    z-index:500;
    top:0;
}
.burgermodalwrapper.active #burgermodal {
    left:0%;
}
#burgermodal .links {
    text-align:center;
}
#burgermodal a.burgerCurrentPage {
    text-decoration:line-through 10px;
    pointer-events:none;
}
#burgermodal .links a {
    position: relative;
    overflow: hidden;
    display:block;
    color:#fff;
    font-family:'Roboto Slab', serif;
    font-weight:700;
    font-size:6rem;
    line-height:6rem;
    margin:30px auto;
    padding:20px 0;
}
#burgermodal .links a::after {
    content: '';
    position: absolute;
    margin-bottom:0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    transition: transform 300ms;
    transform: translate3d(-101%, 0, 0);
    background-color: #ffc846;
}
#burgermodal .links a:hover::after {
    transform: translate3d(0, 0, 0);
}
#burgermodal a.close {
    display:flex;
    position:absolute;
    z-index:800;
    cursor:pointer;
}
#burgermodal .close svg {
    fill:#fff;
    width:45px;
}
#burgermodal a.subLink {
    font-size: 4rem;
    border-left: dotted 5px #ffffff66;
    margin: -30px auto 60px 20px;
}


/* ANIMATION LIENS HEADER/FOOTER */

.ui_work a.mainlink div, .ui_about a.mainlink div, .email a, .social p a {
    display: block;
    position: relative;
    overflow: hidden;
    padding: 0;
}
.ui_work a.mainlink div::after, .ui_about a.mainlink div::after, .email a::after, .social p a::after {
    content: '';
    position: absolute;
    margin-bottom:0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transition: transform 300ms;
    transform: translate3d(-101%, 0, 0);
}
.ui_work a.mainlink div::after {
    width: 90%;
}
.ui_work a.mainlink div::after, .ui_about a.mainlink div::after {
    background-color: #0ddeffcc;
    height: 2px;
}
.ui_work a.mainlink .ariane_work, .ui_about a.mainlink .ariane_about {
    transition: filter 300ms;
}
.email a::after, .social p a::after {
    background-color: #333;
}
.email a:hover::after, .social p a:hover::after, .ui_work div p a:focus::after, .ui_about div p a:focus::after, .email a:focus::after, .social p a:focus::after {
    transform: translate3d(0, 0, 0);
}
.ui_about a.mainlink div:hover::after {
    transform: translate3d(-9%, 0, 0);
}
.ui_work a.mainlink div:hover::after {
    transform: translate3d(0, 0, 0);
}

.listeprojets .links {
    margin-bottom:53px;
}
.listeprojets .links a {
    display:block;
    color:#8400ff;
    position: relative;
    overflow: hidden;
    padding: 0;
}
.listeprojets .links a::after {
    content: '';
    position: absolute;
    margin-bottom:0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    transition: transform 300ms;
    transform: translate3d(-101%, 0, 0);
    background-color: #8400ff;
}
.listeprojets .links a:hover::after {
    transform: translate3d(0, 0, 0);
}

/* HEADER */

#header {
    position:relative;
    width:100%;
    height:787px;
    overflow:hidden;
}
#header_grad {
    position:absolute;
    z-index:-2;
    width:100%;
    min-width:320px;
    height: 534px;
}
.header_item1, .header_item2, .header_item3, .header_item4 {
    position:absolute;
    left:-50%;
    right:-50%;
    margin:0 auto;
}



/* LISTE PROJETS */
.listeprojets.wrapper {
    margin-bottom:120px;
}
.listeprojets h1 {
    font-size:4rem;
    line-height:4rem;
    text-align:left;
    margin:54px 0 10px 0;
}
.listeprojets p.role {
    font-family:'Roboto', sans-serif;
    font-weight:700;
    font-size:1.8rem;
    line-height:1.8rem;
    margin:-2px 0 23px 0;
    text-align:left;
}
.listeprojets p {
    width:auto;
    margin:10px 0 0 0;
    text-align:left;
}
.listeprojets .colg h1 {
    text-align:right;
}
.listeprojets .colg p.role {
    text-align:right;
}
.listeprojets .colg p {
    text-align:right;
    margin-left:auto;
}
.listeprojets img {
    flex-shrink: 0;
    width:100%;
    height:100%;
    transition: width 300ms ease-out, height 300ms ease-out;
}
.listeprojets img:hover {
    width:110%;
    height:110%;
}
.listeprojets .main img:hover {
    width:105%;
    height:105%;
}
.listeprojets .main {
    margin-bottom:38px;
}
.listeprojets .colg {
    position:relative;
    width:588px;
    text-align:right;
}
.listeprojets .img {
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
    height:100%;
}
.listeprojets .colg a {
    display:inline-block;
    margin-left:auto;
}
.listeprojets .cold a {
    display:inline-block;
    margin-right:auto;
}
.listeprojets .cold {
    position:relative;
    width:487px;
    text-align:left;
}
.listeprojets .content {
    display:flex;
    justify-content:space-between;
    align-items:start;
}
.listeprojets .fondfilet {
    position:absolute;
    border:1px solid;
    z-index:-1;
    top:38px;
    opacity:1;
    transition: top 300ms ease, left 300ms ease, right 300ms ease, background-color 300ms ease, opacity 300ms ease;
}
.listeprojets .colg .fondfilet {
    right:20px;
}
.listeprojets .cold .fondfilet {
    left:20px;
}
.listeprojets .img:hover .fondfilet {
    top:10px;
    opacity:0.4;
}
.listeprojets .cold .img:hover .fondfilet {
    left:10px;
}
.listeprojets .colg .img:hover .fondfilet {
    right:10px;
}
#projet_arcadia {margin-top:242px;}
#projet_arcadia .image1 {width:466px; height:620px;}
#projet_arcadia .image2 {width:384px; height:182px;}
#projet_arcadia .fondfilet {width:464px; height:618px; background-color:#f8692b00; border-color:#f8692b;}
#projet_arcadia .img:hover .fondfilet {background-color:#f8692bff;}
#projet_onelanshow .image1 {width:467px; height:700px;}
#projet_onelanshow .image2, #projet_onelanshow .image3, #projet_onelanshow .image4 {width:146px; height:146px;}
#projet_onelanshow .image3 {margin:0 24px;}
#projet_onelanshow .tripics {height:100%; overflow:auto;}
#projet_onelanshow .fondfilet {width:465px; height:698px; background-color:#ff660000; border-color:#ff6600ff;}
#projet_onelanshow .img:hover .fondfilet {background-color:#ff6600ff;}
#projet_fenwick .image1 {width:568px; height:602px;}
#projet_fenwick .image2 {width:282px; height:244px;}
#projet_fenwick .fondfilet {width:566px; height:600px; background-color:#00baff00; border-color:#ff0004ff;}
#projet_fenwick .img:hover .fondfilet {background-color:#ff0004ff;}
#projet_pollutec .image1 {width:467px; height:600px;}
#projet_pollutec .fondfilet {width:465px; height:598px; background-color:#a5dd4700; border-color:#a5dd47ff;}
#projet_pollutec .img:hover .fondfilet {background-color:#a5dd47ff;}
#projet_won .image1 {width:466px; height:466px;}
#projet_won .image2 {width:282px; height:352px;}
#projet_won .fondfilet {width:464px; height:464px; background-color:#21cdcf00; border-color:#21cdcfff;}
#projet_won .img:hover .fondfilet {background-color:#21cdcfff;}
#projet_oscar {margin-top:242px;}
#projet_oscar .image1 {width:568px; height:500px;}
#projet_oscar .image2 {width:282px; height:282px;}
#projet_oscar .fondfilet {width:566px; height:498px; background-color:#0054ff00; border-color:#0054ff;}
#projet_oscar .img:hover .fondfilet {background-color:#0054ffff;}
#projet_maif .image1 {width:467px; height:700px;}
#projet_maif .image2 {width:486px; height:306px;}
#projet_maif .fondfilet {width:465px; height:698px; background-color:#00b18500; border-color:#00b185;}
#projet_maif .img:hover .fondfilet {background-color:#00b185ff;}
#projet_doodling {margin-top:242px;}
#projet_doodling .image1 {width:466px; height:620px;}
#projet_doodling .image2 {width:384px; height:204px;}
#projet_doodling .fondfilet {width:464px; height:618px; background-color:#ff3e8700; border-color:#ff3e87ff;}
#projet_doodling .img:hover .fondfilet {background-color:#ff3e87ff;}
#projet_photoartistique .image1 {width:467px; height:700px;}
#projet_photoartistique .image2 {width:282px; height:244px;}
#projet_photoartistique .fondfilet {width:465px; height:698px; background-color:#43fff800; border-color:#43fff8ff;}
#projet_photoartistique .img:hover .fondfilet {background-color:#43fff8ff;}





/* CONTENT */

.content {
    display:flex;
    justify-content:center;
    width:1200px;
    margin:0 auto;
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size:1.8rem;
    line-height: 2.8rem;
    color:#333;
}
.content.between {
    justify-content: space-between;
    align-items: start;
}
h1 {
    font-family:'Roboto Slab', serif;
    font-weight:900;
    font-size:8rem;
    line-height:8rem;
    text-align:center;
    margin:-14px auto 111px auto;
    max-width:792px;
}
h2 {
    font-family:'Roboto Slab', serif;
    font-weight:700;
    font-size:4rem;
    line-height:4rem;
    margin:-6px 0 30px 0;
    padding:30px 0 0 0;
}
.content h2 {
    width:792px;
}
p {
    width:792px;
    margin-bottom:-8px;
}
p.col3 {
    width:282px;
}
p.col4 {
    width:384px;
}
p.linebreak {
    margin-bottom:28px;
}
p.role {
    font-family:'Roboto Slab', serif;
    font-weight:900;
    font-size:2.1rem;
    line-height:3.1rem;
    margin:0 0 28px 0;
}
.col2 {width:180px; max-width:180px;}
.col2.ombre {width:160px; max-width:160px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col3 {width:282px; max-width:282px;}
.col3.ombre {width:262px; max-width:262px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col4 {width:384px; max-width:384px;}
.col4.ombre {width:364px; max-width:364px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col5 {width:486px; max-width:486px;}
.col6 {width:588px; max-width:588px;}
.col6.ombre {width:568px; max-width:568px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col7 {width:690px;}
.col7.ombre {width:670px; max-width:670px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col8 {width:792px; max-width:792px;}
.col8.ombre {width:772px; max-width:772px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col9 {width:894px; max-width:894px;}
.col9.ombre {width:874px; max-width:874px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col10 {width:996px; max-width:996px;}
.col10.ombre {width:976px; max-width:976px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.col12 {width:1200px; max-width:1200px;}
.col12.ombre {width:1180px; max-width:1180px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-left:10px; margin-right:10px;}
.content.between .ombre {margin-left:auto; margin-right:auto;}
.content.between.maif_emailings .ombre {margin-left:10px; margin-right:10px;}
.mobile_part1, .mobile_part2 {
    display:none;
}
.img_fullscreen_resize {
    max-width:100%;
}
.img_fullscreen_resize div {
    width:100%;
    overflow: hidden;
}
.img_fullscreen_resize img {
    width:100%;
    height:auto;
    align-self: start;
}
.img_fullscreen {
    position:relative;
    align-items:center;
    max-width:100%;
}
.img_fullscreen img {
    width:100%;
    height:100%;
}
.img_fullscreen .img_fullscreen_bg {
    position:absolute;
    left:0;
    z-index:-1;
    width:100%;
    min-width:320px;
}
.img_fullwidth img {
    width:1200px;
    height:auto;
    align-self: start;
}
#colorsection, .greysection  {
    padding:90px 0;
    display:block;
    text-align:center;
    max-width:100%;
}
.greysection {
    background:#eee;
}
#colorsection .content, .greysection .content {
    margin:0 auto;
    color:#fff;
    text-align:left;
}
.greysection h2, .greysection p {color:#333;}
.tripleimg, .quadimg, .penimg, .heximg {
    display:flex;
    position:relative;
    justify-items:center;
    align-items: start;
    width:100%;
}
.tripleimg div, .quadimg div, .penimg div, .heximg div {
    position:absolute;
    left:-50%;
    right:-50%;
    margin:0 auto;
    text-align:center;
}


/* EN VOIR PLUS */

.voirplus {
    width:100%;
    text-align:center;
    margin-bottom:90px;
}
.voirplus svg {
    width:198px;
    height:6px;
    margin:30px 0 90px 0;
    fill:#999;
}
.voirplus h2 {
    margin-bottom:85px;
}
.plusprojets {
    position:relative;
    display:flex;
    justify-content: space-between;
    width:1200px;
    height:362px;
    margin:0 auto;
}
.projet1, .projet2 {
    position:relative;
    width:588px;
    height:350px;
}
.projet1 {
    text-align:left;
}
.projet2 {
    text-align:right;
}
.projet1 .fondfilet, .projet2 .fondfilet {
    position:absolute;
    z-index:-1;
    width:566px;
    height:322px;
    top:38px;
    left:20px;
    border:1px solid;
    transition: top 300ms ease, left 300ms ease, right 300ms ease, background-color 300ms ease, opacity 300ms ease;
}
.projet2 .fondfilet {
    left:auto;
    right:20px;
}
.projet1:hover .fondfilet, .projet2:hover .fondfilet {
    top:10px;
    left:10px;
    opacity:0.4;
}
.projet2:hover .fondfilet {
    left:auto;
    right:10px;
}
.voirplus .imgPlus {
    display:flex;
    align-items:center;
    justify-content:center;
    width:568px;
    height:324px;
    overflow:hidden;
}
.voirplus .projet2 .imgPlus {
    margin-left:20px;
}
.voirplus img {
    flex-shrink: 0;
    width:100%;
    height:100%;
    transition: width 300ms ease, height 300ms ease;
}
.projet1:hover img, .projet2:hover img {
    width:105%;
    height:105%;
}
.voirplus h4 {
    position:absolute;
    top:30px;
    left:40px;
    margin:0;
    font-family:'Roboto Slab', serif;
    font-weight:300;
    font-size:2.8rem;
    line-height:2rem;
}
.voirplus .projet2 h4 {
    left:60px;
}
.voirplus a {
    color:#fff;
}


/* FOOTER */

.footer_stroke {
    width:100%;
    height:1px;
    background-color:#ccc;
    margin-bottom:2px;
}
footer {
    width:100%;
    background-color:#eee;
    padding:86px 0 90px 0;
}
footer .content.between {
    align-items: baseline;
}
footer .contact {
    display:flex;
    justify-content:left;
    align-items:start;
}
footer .email {
    width:384px;
    margin-right:24px;
}
footer .social {
    width:282px;
}
footer h5 {
    font-family:'Roboto Slab', sans-serif;
    font-weight:900;
    font-size:2.8rem;
    line-height:2.8rem;
    margin:0 0 14px 0;
    color:#333;
}
.social p {
    width:7rem;
}
.email a{
    width:19rem;
}
.behance {
    margin-bottom:0px;
}
footer a {
    color:#333;
}


/* INTERFACE OUI */

.projet_oui #logo svg {fill:#ffdc88;}
.projet_oui .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ffc846cc);}
.projet_oui .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffc84600);}
.projet_oui .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ffc846cc);}
.projet_oui .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffc84600);}
.projet_oui .burger {filter: drop-shadow(3px 3px 0px #ffc846);}
.projet_oui #burgermodal .close {filter: drop-shadow(3px 3px 0px #ffc846);}
.projet_oui .ui_work svg {filter: drop-shadow(-3px 3px 0px #ffdc88cc);}
.projet_oui .ui_about svg {filter: drop-shadow(3px 3px 0px #ffdc88cc);}
.projet_oui #header_grad {background:url(../img/oui_grad.jpg); background-size:100% 100%;}
.projet_oui .header_item1, .projet_oui .header_item1 img {width:484px;}
.projet_oui .header_item2, .projet_oui .header_item2 img {width:575px;}
.projet_oui .header_item3, .projet_oui .header_item3 img {width:702px;}
.projet_oui .header_item1 {z-index:3; margin-top:137px;}
.projet_oui .header_item2 {z-index:2; margin-top:184px;}
.projet_oui .header_item3 {z-index:1; margin-top:134px;}
.projet_oui .header_item1 img {margin-left:-173px;}
.projet_oui .header_item2 img {margin-left:186px;}
.projet_oui .header_item3 img {margin-left:-205px;}
.projet_oui .img_oui_billets {margin-bottom:0;}
.projet_oui .img_oui_billets.img_fullscreen_resize {max-height: 673px;}
.projet_oui .img_oui_billets_mobile.img_fullscreen_resize {max-height: 673px; padding-top:20px; background-color:#af063c;}
.projet_oui .img_oui_gui.img_fullscreen_resize {max-height: 790px;}
.projet_oui .img_oui_parcours.img_fullscreen img {max-width:1647px;}
.projet_oui .img_oui_parcours .img_fullscreen_bg {height:600px; background-color:#eee; position:absolute; top:0; bottom:0; margin-top:auto; margin-bottom:auto;}
.projet_oui .img_oui_monvoyage_mobile.img_fullscreen {min-height:656px; align-items:start;}
.projet_oui .img_oui_monvoyage_mobile.img_fullscreen div:first-child {text-align:center;}
.projet_oui .img_oui_monvoyage_mobile.img_fullscreen img {display:block; max-width:976px; margin-left:auto; margin-right:auto; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_oui .img_oui_monvoyage_mobile.img_fullscreen img:first-child {max-width:1680px; margin-bottom:20px; filter:none;}
.projet_oui .img_oui_monvoyage_mobile div.img_fullscreen_bg {height:564px; margin-top:92px; background-color:#ffc95e;}
.projet_oui #colorsection {background-color:#af063c;}
.projet_oui #colorsection img {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-top:30px;}
.projet_oui #colorsection .content.between {align-items:start; margin-top:60px;}
.projet_oui #colorsection .content.between div {width:568px;}
.liste_da .projet1 .fondfilet {border-color:#f15a3d; background-color:#f15a3d00;}
.liste_da .projet2 .fondfilet {border-color:#d21eff; background-color:#d21eff00;}
.liste_da .projet1:hover .fondfilet {border-color:#f15a3d; background-color:#f15a3dff;}
.liste_da .projet2:hover .fondfilet {border-color:#d21eff; background-color:#d21effff;}
.liste_ui .projet1 .fondfilet {border-color:#0aa0f3; background-color:#0aa0f300;}
.liste_ui .projet2 .fondfilet {border-color:#d21eff; background-color:#d21eff00;}
.liste_ui .projet1:hover .fondfilet {border-color:#0aa0f3; background-color:#0aa0f3ff;}
.liste_ui .projet2:hover .fondfilet {border-color:#d21eff; background-color:#d21effff;}
.liste_plus .projet1 .fondfilet {border-color:#f15a3d; background-color:#f15a3d00;}
.liste_plus .projet2 .fondfilet {border-color:#0aa0f3; background-color:#0aa0f300;}
.liste_plus .projet1:hover .fondfilet {border-color:#f15a3d; background-color:#f15a3dff;}
.liste_plus .projet2:hover .fondfilet {border-color:#0aa0f3; background-color:#0aa0f3ff;}



/* FULLPAGE */

.fullpage {
    display:flex;
    position:fixed;
    top:0;
    width:100%;
    height:100%;
    transition: top 1000ms ease;
}
.fullpage#scrollableContent {
    display:block;
    overflow:auto;
    scroll-behavior:smooth;
}
.fullpage.active {top:0;}
.fullpage.posup {top:-100%;}
.fullpage.posdown {top:100%;}
.fullpage .description {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    transition: left 200ms ease, top 200ms ease;
}
#projet1 h1, #projet2 h1 {
    font-size:3.8rem;
    line-height:3.8rem;
    text-align:left;
    margin:0;
    color:#fff;
}
#projet1 p, #projet2 p {
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size:1.6rem;
    line-height: 2.4rem;
    color:#fff;
    margin:0;
    text-align:left;
}
#projet1 p.role, #projet2 p.role {
    font-family:'Roboto', sans-serif;
    font-weight:700;
    font-size:1.6rem;
    line-height:2.4rem;
    margin:4px 0 24px 0;
    text-align:left;
}
.squarelinePlus_wrapper {
    display:flex;
    position:relative;
    margin:4px 0 0 0;
    z-index: 200;
}
.squarePlus_wrapper {
    filter: drop-shadow(0 0 0 #00ffcc00);
    transition: filter 300ms ease;
    margin:0 0 0 auto;
}
.squarePlus {
    width:51px;
    height:51px;
    border:solid 1px #fff;
    border-radius:0%;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: transform 300ms ease, -webkit-transform 300ms ease, -ms-transform 300ms ease, border-radius 300ms ease;
}
.squarePlus:before {
    content: " ";
    position:absolute;
    display:block;
    background-color:#fff;
    margin:0;
    top:26%;
    left:49%;
    width:1px;
    height:25px;
    z-index:100;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.squarePlus:after {
    content: " ";
    position:absolute;
    display:block;
    background-color:#fff;
    margin:0;
    top:49%;
    left:26%;
    width:25px;
    height:1px;
    z-index:100;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.linePlus {
    position:absolute;
    right:0;
    width:105%;
    height:1px;
    margin:26px 63px 0 0;
    background-color:#fff;
}
.linePlus:before {
    content: " ";
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:1px;
    margin:16px 0 0 0;
    transition: margin 300ms ease, width 300ms ease, background-color 300ms ease;
}
.linePlus:after {
    content: " ";
    position:absolute;
    top:0;
    left:0;
    width:20px;
    height:1px;
    margin:8px 0 0 0;
    transition: margin 300ms ease, width 300ms ease, background-color 300ms ease;
}
.circlePlus {
    position:absolute;
    width:14px;
    height:14px;
    right:105%;
    border:solid 1px #fff;
    border-radius:14px;
    margin:19px 63px 0 0;
}
.circlePlus:after {
    content: " ";
    position:absolute;
    display:block;
    width:6px;
    height:6px;
    background-color:#fff;
    margin:4px;
    border-radius:3px;
}
.description:hover .linePlus:before, a.linkfullpage:hover ~ .description .linePlus:before {
    width:100px;
    margin:16px 0 0 30px;
}
.description:hover .linePlus:after, a.linkfullpage:hover ~ .description .linePlus:after {
    width:150px;
    margin:8px 0 0 60px;
}
.description:hover .squarePlus, a.linkfullpage:hover ~ .description .squarePlus {
    -ms-transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.liste_da #projet1 .description {width:260px; height:219px;}
.liste_da #projet1 .description h1 {margin-top:17px;}
.liste_da #projet1 .description h1, .liste_da #projet1 .description p, .liste_da #projet1 .description .squarelinePlus_wrapper {margin-left:350px;}
.liste_da #projet1 p {width:200px;}
.liste_da #projet1 p.role {color:#00ffcc;}
.liste_da #projet1 .squarelinePlus_wrapper {width:260px;}
.liste_da #projet1 .linePlus:before {background-color:#00ffcc00;}
.liste_da #projet1 .linePlus:after {background-color:#00ffcc00;}
.liste_da #projet1 .description:hover .linePlus:before, .liste_da #projet1 a.linkfullpage:hover ~ .description .linePlus:before {background-color:#00ffcc66;}
.liste_da #projet1 .description:hover .linePlus:after, .liste_da #projet1 a.linkfullpage:hover ~ .description .linePlus:after {background-color:#00ffcccc;}
.liste_da #projet1 .description:hover .squarePlus_wrapper, .liste_da #projet1 a.linkfullpage:hover ~ .description .squarePlus_wrapper {filter: drop-shadow(6px 0px 0px #00ffcccc);}

.liste_da #projet2 .description {z-index:6; width:240px; height:219px;}
.liste_da #projet2 .description h1 {margin-top:115px;}
.liste_da #projet2 .description h1, .liste_da #projet2 .description p, .liste_da #projet2 .description .squarelinePlus_wrapper {margin-left:400px;}
.liste_da #projet2 p {width:190px;}
.liste_da #projet2 p.role {color:#00fff0;}
.liste_da #projet2 .squarelinePlus_wrapper {width:240px;}
.liste_da #projet2 .linePlus:before {background-color:#00fff000;}
.liste_da #projet2 .linePlus:after {background-color:#00fff000;}
.liste_da #projet2 .description:hover .linePlus:before, .liste_da #projet2 a.linkfullpage:hover ~ .description .linePlus:before {background-color:#00fff066;}
.liste_da #projet2 .description:hover .linePlus:after, .liste_da #projet2 a.linkfullpage:hover ~ .description .linePlus:after {background-color:#00fff0cc;}
.liste_da #projet2 .description:hover .squarePlus_wrapper, .liste_da #projet2 a.linkfullpage:hover ~ .description .squarePlus_wrapper {filter: drop-shadow(6px 0px 0px #00fff0cc);}

.liste_ui #projet1 .description {width:260px; height:219px; z-index:100;}
.liste_ui #projet1 .description h1 {margin-top:84px;}
.liste_ui #projet1 .description h1, .liste_ui #projet1 .description p {margin-left:456px;}
.liste_ui #projet1 .description h1 {width:260px;}
.liste_ui #projet1 p {width:220px;}
.liste_ui #projet1 p.role {color:#ffc846;}
.liste_ui #projet1 .squarelinePlus_wrapper {width:464px; margin-left:276px;}
.liste_ui #projet1 .linePlus:before {background-color:#ffc84600;}
.liste_ui #projet1 .linePlus:after {background-color:#ffc84600;}
.liste_ui #projet1 .description:hover .linePlus:before {margin-left:40px; width:170px;}
.liste_ui #projet1 .description:hover .linePlus:after {margin-left:100px; width:240px;}
.liste_ui #projet1 a.linkfullpage:hover ~ .description .linePlus:before {margin-left:40px; width:170px;}
.liste_ui #projet1 a.linkfullpage:hover ~ .description .linePlus:after {margin-left:100px; width:240px;}
.liste_ui #projet1 .description:hover .linePlus:before, .liste_ui #projet1 a.linkfullpage:hover ~ .description .linePlus:before {background-color:#ffc84666;}
.liste_ui #projet1 .description:hover .linePlus:after, .liste_ui #projet1 a.linkfullpage:hover ~ .description .linePlus:after {background-color:#ffc846cc;}
.liste_ui #projet1 .description:hover .squarePlus_wrapper, .liste_ui #projet1 a.linkfullpage:hover ~ .description .squarePlus_wrapper {filter: drop-shadow(6px 0px 0px #ffc846cc);}

.liste_ui #projet2 .description {z-index:6; width:240px; height:219px;}
.liste_ui #projet2 .description h1 {margin-top:108px;}
.liste_ui #projet2 .description h1, .liste_ui #projet2 .description p {margin-left:378px;}
.liste_ui #projet2 .description h1 {width:260px;}
.liste_ui #projet2 p {width:230px;}
.liste_ui #projet2 p.role {color:#ff35c8;}
.liste_ui #projet2 .squarelinePlus_wrapper {width:220px; margin-left:440px}
.liste_ui #projet2 .linePlus:before {background-color:#ff35c800;}
.liste_ui #projet2 .linePlus:after {background-color:#ff35c800;}
.liste_ui #projet2 .description:hover .linePlus:before, .liste_ui #projet2 a.linkfullpage:hover ~ .description .linePlus:before {background-color:#ff35c866;}
.liste_ui #projet2 .description:hover .linePlus:after, .liste_ui #projet2 a.linkfullpage:hover ~ .description .linePlus:after {background-color:#ff35c8cc;}
.liste_ui #projet2 .description:hover .squarePlus_wrapper, .liste_ui #projet2 a.linkfullpage:hover ~ .description .squarePlus_wrapper {filter: drop-shadow(6px 0px 0px #ff35c8cc);}

.liste_plus #projet1 .description {width:260px; height:219px; z-index:100;}
.liste_plus #projet1 .description h1 {margin-top:-42px;}
.liste_plus #projet1 .description h1, .liste_plus #projet1 .description p {margin-left:416px;}
.liste_plus #projet1 .description h1 {width:260px;}
.liste_plus #projet1 p {width:150px;}
.liste_plus #projet1 p.role {color:#ff3e87;}
.liste_plus #projet1 .squarelinePlus_wrapper {width:194px; margin-left:416px;}
.liste_plus #projet1 .linePlus:before {background-color:#ff3e8700;}
.liste_plus #projet1 .linePlus:after {background-color:#ff3e8700;}
.liste_plus #projet1 .description:hover .linePlus:before {margin-left:10px; width:80px;}
.liste_plus #projet1 .description:hover .linePlus:after {margin-left:40px; width:120px;}
.liste_plus #projet1 a.linkfullpage:hover ~ .description .linePlus:before {margin-left:10px; width:80px;}
.liste_plus #projet1 a.linkfullpage:hover ~ .description .linePlus:after {margin-left:40px; width:120px;}
.liste_plus #projet1 .description:hover .linePlus:before, .liste_plus #projet1 a.linkfullpage:hover ~ .description .linePlus:before {background-color:#ff3e8766;}
.liste_plus #projet1 .description:hover .linePlus:after, .liste_plus #projet1 a.linkfullpage:hover ~ .description .linePlus:after {background-color:#ff3e87cc;}
.liste_plus #projet1 .description:hover .squarePlus_wrapper, .liste_plus #projet1 a.linkfullpage:hover ~ .description .squarePlus_wrapper {filter: drop-shadow(6px 0px 0px #ff3e87cc);}

.liste_plus #projet2 .description {z-index:6; width:240px; height:219px;}
.liste_plus #projet2 .description h1 {margin-top:10px;}
.liste_plus #projet2 .description h1, .liste_plus #projet2 .description p {margin-left:454px;}
.liste_plus #projet2 .description h1 {width:260px;}
.liste_plus #projet2 p {width:220px;}
.liste_plus #projet2 p.role {color:#43fff8;}
.liste_plus #projet2 .squarelinePlus_wrapper {width:380px; margin-left:310px}
.liste_plus #projet2 .linePlus:before {background-color:#43fff800;}
.liste_plus #projet2 .linePlus:after {background-color:#43fff800;}
.liste_plus #projet2 .description:hover .linePlus:before, .liste_plus #projet2 a.linkfullpage:hover ~ .description .linePlus:before {background-color:#43fff866;}
.liste_plus #projet2 .description:hover .linePlus:after, .liste_plus #projet2 a.linkfullpage:hover ~ .description .linePlus:after {background-color:#43fff8cc;}
.liste_plus #projet2 .description:hover .squarePlus_wrapper, .liste_plus #projet2 a.linkfullpage:hover ~ .description .squarePlus_wrapper {filter: drop-shadow(6px 0px 0px #43fff8cc);}

#logo svg {
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    transition: opacity 1000ms ease-in, fill 1000ms ease-in;
}
#logo.zindex {
    z-index:5;
}
#logoGrad {
    opacity:0;
}
#logoFlat {
    opacity:1;
    fill:#333;
}
.liste_da .burger svg {
    transition: fill 1000ms ease-in;
}
.liste_da .burger {
    transition: filter 1000ms ease-in;
}
.liste_da .ui_work a.mainlink p, .liste_da .ui_about a.mainlink p {
    transition: filter 300ms ease-in, color 1000ms ease-in;
}
.liste_da .ui_work div p, .liste_da .ui_about div p {
    transition: color 1000ms ease-in;
}
.liste_da.activeprojet1 #logoFlat {fill:#00ffcc;}
.liste_da.activeprojet1 .burger {filter: drop-shadow(3px 3px 0px #00ffcccc);}
.liste_da.activeprojet1 .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #00ffcccc);}
.liste_da.activeprojet1 .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffcc00);}
.liste_da.activeprojet1 .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #00ffcccc);}
.liste_da.activeprojet1 .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffcc00);}
.liste_da.activeprojet1 .ui_work svg {filter: drop-shadow(-3px 3px 0px #00ffcccc);}
.liste_da.activeprojet1 .ui_about svg {filter: drop-shadow(3px 3px 0px #00ffcccc);}
.liste_da.activeprojet1 .ui_work a.mainlink div::after, .liste_da.activeprojet1 .ui_about a.mainlink div::after {background-color: #00ffcc;}
.liste_da.activeprojet2 #logoFlat {fill:#00fff0;}
.liste_da.activeprojet2 .burger {filter: drop-shadow(3px 3px 0px #00fff0cc);}
.liste_da.activeprojet2 .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #00fff0cc);}
.liste_da.activeprojet2 .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #00fff000);}
.liste_da.activeprojet2 .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #00fff0cc);}
.liste_da.activeprojet2 .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #00fff000);}
.liste_da.activeprojet2 .ui_work svg {filter: drop-shadow(-3px 3px 0px #00fff0cc);}
.liste_da.activeprojet2 .ui_about svg {filter: drop-shadow(3px 3px 0px #00fff0cc);}
.liste_da.activeprojet2 .ui_work a.mainlink div::after, .liste_da.activeprojet2 .ui_about a.mainlink div::after {background-color: #00fff0;}
.liste_ui.activeprojet1 #logoFlat {fill:#ffc846;}
.liste_ui.activeprojet1 .burger {filter: drop-shadow(3px 3px 0px #ffc846cc);}
.liste_ui.activeprojet1 .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ffc846cc);}
.liste_ui.activeprojet1 .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffc84600);}
.liste_ui.activeprojet1 .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ffc846cc);}
.liste_ui.activeprojet1 .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffc84600);}
.liste_ui.activeprojet1 .ui_work svg {filter: drop-shadow(-3px 3px 0px #ffc846cc);}
.liste_ui.activeprojet1 .ui_about svg {filter: drop-shadow(3px 3px 0px #ffc846cc);}
.liste_ui.activeprojet1 .ui_work a.mainlink div::after, .liste_ui.activeprojet1 .ui_about a.mainlink div::after {background-color: #ffc846;}
.liste_ui.activeprojet2 #logoFlat {fill:#ff35c8;}
.liste_ui.activeprojet2 .burger {filter: drop-shadow(3px 3px 0px #ff35c8cc);}
.liste_ui.activeprojet2 .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ff35c8cc);}
.liste_ui.activeprojet2 .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff35c800);}
.liste_ui.activeprojet2 .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ff35c8cc);}
.liste_ui.activeprojet2 .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff35c800);}
.liste_ui.activeprojet2 .ui_work svg {filter: drop-shadow(-3px 3px 0px #ff35c8cc);}
.liste_ui.activeprojet2 .ui_about svg {filter: drop-shadow(3px 3px 0px #ff35c8cc);}
.liste_ui.activeprojet2 .ui_work a.mainlink div::after, .liste_ui.activeprojet2 .ui_about a.mainlink div::after {background-color: #ff35c8;}
.liste_plus.activeprojet1 #logoFlat {fill:#ff3e87;}
.liste_plus.activeprojet1 .burger {filter: drop-shadow(3px 3px 0px #ff3e87cc);}
.liste_plus.activeprojet1 .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ff3e87cc);}
.liste_plus.activeprojet1 .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.liste_plus.activeprojet1 .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ff3e87cc);}
.liste_plus.activeprojet1 .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.liste_plus.activeprojet1 .ui_work svg {filter: drop-shadow(-3px 3px 0px #ff3e87cc);}
.liste_plus.activeprojet1 .ui_about svg {filter: drop-shadow(3px 3px 0px #ff3e87cc);}
.liste_plus.activeprojet1 .ui_work a.mainlink div::after, .liste_plus.activeprojet1 .ui_about a.mainlink div::after {background-color: #ff3e87;}
.liste_plus.activeprojet2 #logoFlat {fill:#43fff8;}
.liste_plus.activeprojet2 .burger {filter: drop-shadow(3px 3px 0px #43fff8cc);}
.liste_plus.activeprojet2 .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #43fff8cc);}
.liste_plus.activeprojet2 .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #43fff800);}
.liste_plus.activeprojet2 .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #43fff8cc);}
.liste_plus.activeprojet2 .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #43fff800);}
.liste_plus.activeprojet2 .ui_work svg {filter: drop-shadow(-3px 3px 0px #43fff8cc);}
.liste_plus.activeprojet2 .ui_about svg {filter: drop-shadow(3px 3px 0px #43fff8cc);}
.liste_plus.activeprojet2 .ui_work a.mainlink div::after, .liste_plus.activeprojet2 .ui_about a.mainlink div::after {background-color: #43fff8;}
.activeprojet2 .ariane_work, .activeprojet2 .ariane_about {filter: drop-shadow(3px 3px 0px #43fff8cc);}
.activeprojet3 #logoFlat, .about.scrolled #logoFlat {opacity:0;}
.activeprojet3 #logoGrad, .about.scrolled #logoGrad {opacity:1;}

.animvisu_wrapper {
    display:flex;
    position:relative;
    width:100%;
    height:100%;
    justify-content: center;
    align-items: center;
}
.animvisu {
    position:absolute;
    top:-50%;
    bottom:-50%;
    left:-50%;
    right:-50%;
    margin:auto;
    transition: left 200ms ease, top 200ms ease;
}
.animvisu img {
    position:absolute;
    top:0;
    left:0;
    transition: left 200ms ease, top 200ms ease;
}
.item1 {z-index:5;}
.item2 {z-index:4;}
.item3 {z-index:3;}
.item4 {z-index:2;}
.animvisu_fond {
    position:absolute;
    z-index:-20;
    width:100%;
    height:100%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow:hidden;
}
.animvisu_fond img {
    margin-left:-10%;
    width:120%;
    height:100%;
    transition: margin-left 200ms ease;
}

.liste_da #projet1 .item1, .liste_da #projet1 .item1 img {width:335px; height:339px;}
.liste_da #projet1 .item2, .liste_da #projet1 .item2 img {width:413px; height:395px;}
.liste_da #projet1 .item3, .liste_da #projet1 .item3 img {width:263px; height:237px;}
.liste_da #projet1 .item4, .liste_da #projet1 .item4 img {width:511px; height:98px;}
.liste_da #projet1 .item1 img {margin-top:46px; margin-left:52px;} /*top+50*/
.liste_da #projet1 .item2 img {margin-top:-12px; margin-left:-49px;}
.liste_da #projet1 .item3 img {margin-top:109px; margin-left:92px;}
.liste_da #projet1 .item4 img {margin-top:260px; margin-left:0px;}
.liste_da #projet2 .item1, .liste_da #projet2 .item1 img {width:469px; height:334px;}
.liste_da #projet2 .item2, .liste_da #projet2 .item2 img {width:456px; height:358px;}
.liste_da #projet2 .item3, .liste_da #projet2 .item3 img {width:883px; height:374px;}
.liste_da #projet2 .item4, .liste_da #projet2 .item4 img {width:850px; height:658px;}
.liste_da #projet2 .item1 img {margin-top:149px; margin-left:46px;}/*top+50 left-20*/
.liste_da #projet2 .item2 img {margin-top:206px; margin-left:-96px;}
.liste_da #projet2 .item3 img {margin-top:-99px; margin-left:56px;}
.liste_da #projet2 .item4 img {margin-top:43px; margin-left:-113px;}
.liste_ui #projet1 .item1, .liste_ui #projet1 .item1 img {width:505px; height:596px;}
.liste_ui #projet1 .item2, .liste_ui #projet1 .item2 img {width:475px; height:504px;}
.liste_ui #projet1 .item3, .liste_ui #projet1 .item3 img {width:754px; height:490px;}
.liste_ui #projet1 .item1 img {margin-top:49px; margin-left:-308px;}/*T50+left-206*/
.liste_ui #projet1 .item2 img {margin-top:54px; margin-left:83px;}
.liste_ui #projet1 .item3 img {margin-top:-4px; margin-left:-356px;}
.liste_ui #projet2 .item1, .liste_ui #projet2 .item1 img {width:789px; height:553px;}
.liste_ui #projet2 .item2, .liste_ui #projet2 .item2 img {width:412px; height:356px;}
.liste_ui #projet2 .item3, .liste_ui #projet2 .item3 img {width:394px; height:160px;}
.liste_ui #projet2 .item1 img {margin-top:108px; margin-left:-147px;}/*T+50 L-116*/
.liste_ui #projet2 .item2 img {margin-top:-107px; margin-left:103px;}
.liste_ui #projet2 .item3 img {margin-top:-152px; margin-left:-83px;}
.liste_plus #projet1 .item1, .liste_plus #projet1 .item1 img {width:765px; height:516px;}
.liste_plus #projet1 .item3, .liste_plus #projet1 .item3 img {width:857px; height:578px;}
.liste_plus #projet1 .item1 img {margin-top:46px; margin-left:-68px;}/*T70 L-98*/
.liste_plus #projet1 .item3 img {margin-top:70px; margin-left:-98px;}
.liste_plus #projet2 .item1, .liste_plus #projet2 .item1 img {width:651px; height:578px;}
.liste_plus #projet2 .item3, .liste_plus #projet2 .item3 img {width:685px; height:513px;}
.liste_plus #projet2 .item1 img {margin-top:93px; margin-left:42px;}/*T+100 L-100*/
.liste_plus #projet2 .item3 img {margin-top:139px; margin-left:-226px;}









/* PAGES PROJET */
.projet_oui .ui_work a.mainlink div::after, .projet_oui .ui_about a.mainlink div::after {background-color: #ffc846;}
.projet_oui .projet1 .fondfilet {border-color:#e1d8cd; background-color:#e1d8cd00;}
.projet_oui .projet2 .fondfilet {border-color:#c339ff; background-color:#c339ff00;}
.projet_oui .projet1:hover .fondfilet {border-color:#e1d8cd; background-color:#e1d8cdff;}
.projet_oui .projet2:hover .fondfilet {border-color:#c339ff; background-color:#c339ffff;}
.projet_oui .content.between {align-items: center;}
.projet_oui footer .content.between {align-items: start;}
.projet_oui .voirplus a .projet1 {color:#333;}
.projet_oui .oui_evol .content.between {align-items: start;}

.projet_anserak #logo svg {fill:#00ffcc;}
.projet_anserak .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #00ffcccc);}
.projet_anserak .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffcc00);}
.projet_anserak .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #00ffcccc);}
.projet_anserak .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffcc00);}
.projet_anserak .ui_work a.mainlink div::after, .projet_anserak .ui_about a.mainlink div::after {background-color: #00ffcc;}
.projet_anserak .burger {filter: drop-shadow(3px 3px 0px #00ffcc);}
.projet_anserak #burgermodal .close {filter: drop-shadow(3px 3px 0px #00ffcc);}
.projet_anserak .ui_work svg {filter: drop-shadow(-3px 3px 0px #00ffcccc);}
.projet_anserak .ui_about svg {filter: drop-shadow(3px 3px 0px #00ffcccc);}
.projet_anserak .header_item1, .projet_anserak .header_item1 img {width:335px; height:339px;}
.projet_anserak .header_item2, .projet_anserak .header_item2 img {width:413px; height:395px;}
.projet_anserak .header_item3, .projet_anserak .header_item3 img {width:263px; height:237px;}
.projet_anserak .header_item4, .projet_anserak .header_item4 img {width:511px; height:98px;}
.projet_anserak .header_item1 {z-index:4; margin-top:285px;}
.projet_anserak .header_item2 {z-index:3; margin-top:200px;}
.projet_anserak .header_item3 {z-index:2; margin-top:418px;}
.projet_anserak .header_item4 {z-index:1; margin-top:640px;}
.projet_anserak .header_item1 img {margin-left:52px;}
.projet_anserak .header_item2 img {margin-left:-49px;}
.projet_anserak .header_item3 img {margin-left:92px;}
.projet_anserak .header_item4 img {margin-left:0;}
.projet_anserak #header_grad {background:url(../img/da_anserak_fullpage_fond.jpg); background-size:100% 100%;}
.projet_anserak #colorsection {background-color:#222222;}
.projet_anserak #colorsection img {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.8)); margin-top:30px;}
.projet_anserak .img_fullscreen_resize.img_anserak_mockup {margin-bottom:0;}
.projet_anserak .img_fullwidth img {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_anserak #colorsection .content.between {align-items:start; margin-top:60px;}
.projet_anserak .projet1 .fondfilet {border-color:#27e1e3; background-color:#27e1e300;}
.projet_anserak .projet2 .fondfilet {border-color:#3797f0; background-color:#3797f000;}
.projet_anserak .projet1:hover .fondfilet {border-color:#27e1e3; background-color:#27e1e3ff;}
.projet_anserak .projet2:hover .fondfilet {border-color:#3797f0; background-color:#3797f0ff;}

.projet_arcadia #logo svg {fill:#fff43c;}
.projet_arcadia .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #fff43ccc);}
.projet_arcadia .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #fff43c00);}
.projet_arcadia .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #fff43ccc);}
.projet_arcadia .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #fff43c00);}
.projet_arcadia .ui_work a.mainlink div::after, .projet_arcadia .ui_about a.mainlink div::after {background-color: #fff43c;}
.projet_arcadia .burger {filter: drop-shadow(3px 3px 0px #fff43c);}
.projet_arcadia #burgermodal .close {filter: drop-shadow(3px 3px 0px #fff43c);}
.projet_arcadia .ui_work svg {filter: drop-shadow(-3px 3px 0px #fff43ccc);}
.projet_arcadia .ui_about svg {filter: drop-shadow(3px 3px 0px #fff43ccc);}
.projet_arcadia .header_item1, .projet_arcadia .header_item1 img {width:883px; height:449px;}
.projet_arcadia .header_item2, .projet_arcadia .header_item2 img {width:82px; height:83px;}
.projet_arcadia .header_item3, .projet_arcadia .header_item3 img {width:673px; height:42px;}
.projet_arcadia .header_item1 {z-index:4; margin-top:240px;}
.projet_arcadia .header_item2 {z-index:3; margin-top:154px;}
.projet_arcadia .header_item3 {z-index:2; margin-top:641px;}
.projet_arcadia .header_item1 img {margin-left:0px;}
.projet_arcadia .header_item2 img {margin-left:193px;}
.projet_arcadia .header_item3 img {margin-left:-61px;}
.projet_arcadia #header_grad {background:url(../img/arcadia_grad.jpg); background-size:100% 100%;}
.projet_arcadia #colorsection {background-color:#222222;}
.projet_arcadia #colorsection img {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.8)); margin-top:30px;}
.projet_arcadia .img_fullscreen_resize.img_arcadia_mockup {margin-bottom:0;}
.projet_arcadia .img_fullwidth img {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_arcadia #colorsection .content.between {align-items:start; margin-top:60px;}
.projet_arcadia .projet1 .fondfilet {border-color:#3797f0; background-color:#3797f000;}
.projet_arcadia .projet2 .fondfilet {border-color:#f98230; background-color:#f9823000;}
.projet_arcadia .projet1:hover .fondfilet {border-color:#3797f0; background-color:#3797f0ff;}
.projet_arcadia .projet2:hover .fondfilet {border-color:#f98230; background-color:#f98230ff;}

.projet_micron #logo svg {fill:#ff3e87;}
.projet_micron .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ff3e87cc);}
.projet_micron .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.projet_micron .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ff3e87cc);}
.projet_micron .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.projet_micron .ui_work a.mainlink div::after, .projet_micron .ui_about a.mainlink div::after {background-color: #ff3e87;}
.projet_micron .burger {filter: drop-shadow(3px 3px 0px #ff3e87);}
.projet_micron #burgermodal .close {filter: drop-shadow(3px 3px 0px #ff3e87);}
.projet_micron .ui_work svg {filter: drop-shadow(-3px 3px 0px #ff3e87cc);}
.projet_micron .ui_about svg {filter: drop-shadow(3px 3px 0px #ff3e87cc);}
.projet_micron .header_item1, .projet_micron .header_item1 img {width:756px; height:516px;}
.projet_micron .header_item2, .projet_micron .header_item2 img {width:857px; height:578px;}
.projet_micron .header_item1 {z-index:4; margin-top:197px;}
.projet_micron .header_item2 {z-index:3; margin-top:190px;}
.projet_micron .header_item1 img {margin-left:-20px;}/* L-50 */
.projet_micron .header_item2 img {margin-left:-50px;}
.projet_micron #header_grad {background:url(../img/plus_micron_fullpage_fond.jpg); background-size:100% 100%;}
.projet_micron .greysection img {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin-top:90px; margin-bottom:60px;}
.projet_micron .img_fullscreen_resize.img_micron_mockup {margin-bottom:0;}
.projet_micron .greysection .content.between {align-items:start;}
.projet_micron .greysection .content.between img {filter:none; margin-bottom:0;}
.projet_micron .projet1 .fondfilet {border-color:#007bf3; background-color:#007bf300;}
.projet_micron .projet2 .fondfilet {border-color:#c339ff; background-color:#c339ff00;}
.projet_micron .projet1:hover .fondfilet {border-color:#007bf3; background-color:#007bf3ff;}
.projet_micron .projet2:hover .fondfilet {border-color:#c339ff; background-color:#c339ffff;}

.projet_doodling #logo svg {fill:#ff3e87;}
.projet_doodling .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ff3e87cc);}
.projet_doodling .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.projet_doodling .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ff3e87cc);}
.projet_doodling .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.projet_doodling .ui_work a.mainlink div::after, .projet_doodling .ui_about a.mainlink div::after {background-color: #ff3e87;}
.projet_doodling .burger {filter: drop-shadow(3px 3px 0px #ff3e87);}
.projet_doodling #burgermodal .close {filter: drop-shadow(3px 3px 0px #ff3e87);}
.projet_doodling .ui_work svg {filter: drop-shadow(-3px 3px 0px #ff3e87cc);}
.projet_doodling .ui_about svg {filter: drop-shadow(3px 3px 0px #ff3e87cc);}
.projet_doodling .header_item1, .projet_doodling .header_item1 img {width:792px; height:411px;}
.projet_doodling .header_item2, .projet_doodling .header_item2 img {width:829px; height:457px;}
.projet_doodling .header_item1 {z-index:4; margin-top:190px;}
.projet_doodling .header_item2 {z-index:3; margin-top:236px;}
.projet_doodling .header_item1 img {margin-left:9px;}
.projet_doodling .header_item2 img {margin-left:0;}
.projet_doodling #header_grad {background:url(../img/plus_micron_fullpage_fond.jpg); background-size:100% 100%;}
.projet_doodling .projet1 .fondfilet {border-color:#007bf3; background-color:#007bf300;}
.projet_doodling .projet2 .fondfilet {border-color:#c339ff; background-color:#c339ff00;}
.projet_doodling .projet1:hover .fondfilet {border-color:#007bf3; background-color:#007bf3ff;}
.projet_doodling .projet2:hover .fondfilet {border-color:#c339ff; background-color:#c339ffff;}
.projet_doodling .doodimg {flex-wrap: wrap; margin-bottom:48px;}
.projet_doodling .doodimg img {margin-bottom:42px;}

.projet_photoreport #logo svg {fill:#43fff8;}
.projet_photoreport .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #43fff8cc);}
.projet_photoreport .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #43fff800);}
.projet_photoreport .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #43fff8cc);}
.projet_photoreport .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #43fff800);}
.projet_photoreport .ui_work a.mainlink div::after, .projet_photoreport .ui_about a.mainlink div::after {background-color: #43fff8;}
.projet_photoreport .burger {filter: drop-shadow(3px 3px 0px #43fff8);}
.projet_photoreport #burgermodal .close {filter: drop-shadow(3px 3px 0px #43fff8);}
.projet_photoreport .ui_work svg {filter: drop-shadow(-3px 3px 0px #43fff8cc);}
.projet_photoreport .ui_about svg {filter: drop-shadow(3px 3px 0px #43fff8cc);}
.projet_photoreport .header_item1, .projet_photoreport .header_item1 img {width:651px; height:578px;}
.projet_photoreport .header_item2, .projet_photoreport .header_item2 img {width:685px; height:513px;}
.projet_photoreport .header_item1 {z-index:4; margin-top:190px;}
.projet_photoreport .header_item2 {z-index:3; margin-top:268px;}
.projet_photoreport .header_item1 img {margin-left:142px;}
.projet_photoreport .header_item2 img {margin-left:-126px;}
.projet_photoreport #header_grad {background:url(../img/plus_photoreportage_fullpage_fond.jpg); background-size:100% 100%;}
.projet_photoreport .projet1 .fondfilet {border-color:#c339ff; background-color:#c339ff00;}
.projet_photoreport .projet2 .fondfilet {border-color:#007bf3; background-color:#007bf300;}
.projet_photoreport .projet1:hover .fondfilet {border-color:#c339ff; background-color:#c339ffff;}
.projet_photoreport .projet2:hover .fondfilet {border-color:#007bf3; background-color:#007bf3ff;}
.projet_photoreport .content.between img {width:588px;}
.projet_photoreport .photoimg {flex-wrap: wrap; margin-bottom:66px;}
.projet_photoreport .photoimg img {margin-bottom:24px;}

.projet_photoart #logo svg {fill:#43fff8;}
.projet_photoart .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #43fff8cc);}
.projet_photoart .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #43fff800);}
.projet_photoart .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #43fff8cc);}
.projet_photoart .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #43fff800);}
.projet_photoart .ui_work a.mainlink div::after, .projet_photoart .ui_about a.mainlink div::after {background-color: #43fff8;}
.projet_photoart .burger {filter: drop-shadow(3px 3px 0px #43fff8);}
.projet_photoart #burgermodal .close {filter: drop-shadow(3px 3px 0px #43fff8);}
.projet_photoart .ui_work svg {filter: drop-shadow(-3px 3px 0px #43fff8cc);}
.projet_photoart .ui_about svg {filter: drop-shadow(3px 3px 0px #43fff8cc);}
.projet_photoart .header_item1, .projet_photoart .header_item1 img {width:490px; height:426px;}
.projet_photoart .header_item2, .projet_photoart .header_item2 img {width:455px; height:420px;}
.projet_photoart .header_item3, .projet_photoart .header_item3 img {width:977px; height:112px;}
.projet_photoart .header_item1 {z-index:4; margin-top:202px;}
.projet_photoart .header_item2 {z-index:3; margin-top:190px;}
.projet_photoart .header_item3 {z-index:3; margin-top:529px;}
.projet_photoart .header_item1 img {margin-left:143px;}/* -50 */
.projet_photoart .header_item2 img {margin-left:-110px;}
.projet_photoart .header_item3 img {margin-left:-50px;}
.projet_photoart #header_grad {background:url(../img/plus_photoreportage_fullpage_fond.jpg); background-size:100% 100%;}
.projet_photoart .projet1 .fondfilet {border-color:#c339ff; background-color:#c339ff00;}
.projet_photoart .projet2 .fondfilet {border-color:#007bf3; background-color:#007bf300;}
.projet_photoart .projet1:hover .fondfilet {border-color:#c339ff; background-color:#c339ffff;}
.projet_photoart .projet2:hover .fondfilet {border-color:#007bf3; background-color:#007bf3ff;}
.projet_photoart .content.between img {width:588px;}
.projet_photoart .photoimg {flex-wrap: wrap; margin-bottom:66px;}
.projet_photoart .photoimg img {margin-bottom:24px;}

.projet_won #logo svg {fill:#008aff;}
.projet_won .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #008affcc);}
.projet_won .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #008aff00);}
.projet_won .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #008affcc);}
.projet_won .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #008aff00);}
.projet_won .ui_work a.mainlink div::after, .projet_won .ui_about a.mainlink div::after {background-color: #008aff;}
.projet_won .burger {filter: drop-shadow(3px 3px 0px #008aff);}
.projet_won #burgermodal .close {filter: drop-shadow(3px 3px 0px #008aff);}
.projet_won .ui_work svg {filter: drop-shadow(-3px 3px 0px #008affcc);}
.projet_won .ui_about svg {filter: drop-shadow(3px 3px 0px #008affcc);}
.projet_won .header_item1, .projet_won .header_item1 img {width:677px; height:515px;}
.projet_won .header_item2, .projet_won .header_item2 img {width:747px; height:490px;}
.projet_won .header_item1 {z-index:4; margin-top:180px;}
.projet_won .header_item2 {z-index:3; margin-top:256px;}
.projet_won .header_item1 img {margin-left:14px;}
.projet_won .header_item2 img {margin-left:0;}
.projet_won #header_grad {background:url(../img/da_won_grad.jpg); background-size:100% 100%;}
.projet_won .projet1 .fondfilet {border-color:#2e9eac; background-color:#2e9eac00;}
.projet_won .projet2 .fondfilet {border-color:#0aa0f3; background-color:#0aa0f300;}
.projet_won .projet1:hover .fondfilet {border-color:#2e9eac; background-color:#2e9eacff;}
.projet_won .projet2:hover .fondfilet {border-color:#0aa0f3; background-color:#0aa0f3ff;}
.projet_won .img_fullscreen_resize {margin-bottom:0;}
.projet_won .greysection img {margin:90px 12px 0 12px; align-self:flex-start;}
.projet_won .greysection .content {flex-wrap: wrap;}

.projet_pollutec #logo svg {fill:#41ffdd;}
.projet_pollutec .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #41ffddcc);}
.projet_pollutec .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #41ffdd00);}
.projet_pollutec .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #41ffddcc);}
.projet_pollutec .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #41ffdd00);}
.projet_pollutec .ui_work a.mainlink div::after, .projet_pollutec .ui_about a.mainlink div::after {background-color: #41ffdd;}
.projet_pollutec .burger {filter: drop-shadow(3px 3px 0px #41ffdd);}
.projet_pollutec #burgermodal .close {filter: drop-shadow(3px 3px 0px #41ffdd);}
.projet_pollutec .ui_work svg {filter: drop-shadow(-3px 3px 0px #41ffddcc);}
.projet_pollutec .ui_about svg {filter: drop-shadow(3px 3px 0px #41ffddcc);}
.projet_pollutec .header_item1, .projet_pollutec .header_item1 img {width:703px; height:396px;}
.projet_pollutec .header_item2, .projet_pollutec .header_item2 img {width:544px; height:306px;}
.projet_pollutec .header_item1 {z-index:4; margin-top:215px;}
.projet_pollutec .header_item2 {z-index:3; margin-top:265px;}
.projet_pollutec .header_item1 img {margin-left:-73px;}
.projet_pollutec .header_item2 img {margin-left:152px;}
.projet_pollutec #header_grad {background:url(../img/da_pollutec_grad.jpg); background-size:100% 100%;}
.projet_pollutec .projet1 .fondfilet {border-color:#ff0004; background-color:#ff000400;}
.projet_pollutec .projet2 .fondfilet {border-color:#27e1e3; background-color:#27e1e300;}
.projet_pollutec .projet1:hover .fondfilet {border-color:#ff0004; background-color:#ff0004ff;}
.projet_pollutec .projet2:hover .fondfilet {border-color:#27e1e3; background-color:#27e1e3ff;}
.projet_pollutec #colorsection {background-color:#2e9eac;}
.projet_pollutec #colorsection img {margin-top:90px; align-self:flex-start;}

.projet_fenwick #logo svg {fill:#ffe13c;}
.projet_fenwick .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ffe13ccc);}
.projet_fenwick .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffe13c00);}
.projet_fenwick .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ffe13ccc);}
.projet_fenwick .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffe13c00);}
.projet_fenwick .ui_work a.mainlink div::after, .projet_fenwick .ui_about a.mainlink div::after {background-color: #ffe13c;}
.projet_fenwick .burger {filter: drop-shadow(3px 3px 0px #ffe13c);}
.projet_fenwick #burgermodal .close {filter: drop-shadow(3px 3px 0px #ffe13c);}
.projet_fenwick .ui_work svg {filter: drop-shadow(-3px 3px 0px #ffe13ccc);}
.projet_fenwick .ui_about svg {filter: drop-shadow(3px 3px 0px #ffe13ccc);}
.projet_fenwick .header_item1, .projet_fenwick .header_item1 img {width:813px; height:409px;}
.projet_fenwick .header_item2, .projet_fenwick .header_item2 img {width:351px; height:473px;}
.projet_fenwick .header_item1 {z-index:4; margin-top:219px;}
.projet_fenwick .header_item2 {z-index:3; margin-top:150px;}
.projet_fenwick .header_item1 img {margin-left:62px;}
.projet_fenwick .header_item2 img {margin-left:-294px;}
.projet_fenwick #header_grad {background:url(../img/da_fenwick_grad.jpg); background-size:100% 100%;}
.projet_fenwick .projet1 .fondfilet {border-color:#f98230; background-color:#f9823000;}
.projet_fenwick .projet2 .fondfilet {border-color:#2e9eac; background-color:#2e9eac00;}
.projet_fenwick .projet1:hover .fondfilet {border-color:#f98230; background-color:#f98230ff;}
.projet_fenwick .projet2:hover .fondfilet {border-color:#2e9eac; background-color:#2e9eacff;}
.projet_fenwick #colorsection {background-color:#b90825;}
.projet_fenwick #colorsection img {margin-top:90px;}
.projet_fenwick #colorsection img.col12, .projet_fenwick .img_fenwick_emailings img {margin-bottom:90px;}
.projet_fenwick #colorsection .img_fenwick_experiencetour {flex-wrap: wrap;}
.projet_fenwick #colorsection .content.img_fenwick_experiencetour img {align-self:flex-start;}
.projet_fenwick .wrapper.img_fullscreen_resize, .projet_fenwick .img_fenwick_emailings {margin-bottom:0;}

.projet_oniryk #logo svg {fill:#00fff0;}
.projet_oniryk .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #00fff0cc);}
.projet_oniryk .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #00fff000);}
.projet_oniryk .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #00fff0cc);}
.projet_oniryk .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #00fff000);}
.projet_oniryk .ui_work a.mainlink div::after, .projet_oniryk .ui_about a.mainlink div::after {background-color: #00fff0;}
.projet_oniryk .burger {filter: drop-shadow(3px 3px 0px #00fff0);}
.projet_oniryk #burgermodal .close {filter: drop-shadow(3px 3px 0px #00fff0);}
.projet_oniryk .ui_work svg {filter: drop-shadow(-3px 3px 0px #00fff0cc);}
.projet_oniryk .ui_about svg {filter: drop-shadow(3px 3px 0px #00fff0cc);}
.projet_oniryk .header_item1, .projet_oniryk .header_item1 img {width:375px; height:267px;}
.projet_oniryk .header_item2, .projet_oniryk .header_item2 img {width:365px; height:286px;}
.projet_oniryk .header_item3, .projet_oniryk .header_item3 img {width:706px; height:299px;}
.projet_oniryk .header_item4, .projet_oniryk .header_item4 img {width:680px; height:526px;}
.projet_oniryk .header_item1 {z-index:4; margin-top:368px;}
.projet_oniryk .header_item2 {z-index:3; margin-top:403px;}
.projet_oniryk .header_item3 {z-index:2; margin-top:160px;}
.projet_oniryk .header_item4 {z-index:1; margin-top:173px;}
.projet_oniryk .header_item1 img {margin-left:13px;}
.projet_oniryk .header_item2 img {margin-left:-121px;}
.projet_oniryk .header_item3 img {margin-left:11px;}
.projet_oniryk .header_item4 img {margin-left:-134px;}
.projet_oniryk #header_grad {background:url(../img/da_oniryk_fullpage_fond.jpg); background-size:100% 100%;}
.projet_oniryk .projet1 .fondfilet {border-color:#0aa0f3; background-color:#0aa0f300;}
.projet_oniryk .projet2 .fondfilet {border-color:#f8692b; background-color:#f8692b00;}
.projet_oniryk .projet1:hover .fondfilet {border-color:#0aa0f3; background-color:#0aa0f3ff;}
.projet_oniryk .projet2:hover .fondfilet {border-color:#f8692b; background-color:#f8692bff;}
.projet_oniryk #colorsection {background-color:#005591;}
.projet_oniryk .wrapper.img_fullscreen_resize.img_oniryk_sitemockup {margin-bottom:0;}
.projet_oniryk #colorsection .content.between img {margin-top:90px;}
.projet_oniryk #colorsection .tripleimg {height:1222px;}
.projet_oniryk #colorsection .tripleimg img.col8.ombre {margin-right:auto;}
.projet_oniryk #colorsection .tripleimg .img1 img.col8.ombre {margin-top:90px; margin-left:-408px;}
.projet_oniryk #colorsection .tripleimg .img2 img.col8.ombre {margin-top:415px; margin-left:10px}
.projet_oniryk #colorsection .tripleimg .img3 img.col8.ombre {margin-top:740px; margin-left:214px;}

.projet_onelanshow #logo svg {fill:#ffff29;}
.projet_onelanshow .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ffff29cc);}
.projet_onelanshow .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffff2900);}
.projet_onelanshow .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ffff29cc);}
.projet_onelanshow .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffff2900);}
.projet_onelanshow .ui_work a.mainlink div::after, .projet_onelanshow .ui_about a.mainlink div::after {background-color: #ffff29;}
.projet_onelanshow .burger {filter: drop-shadow(3px 3px 0px #ffff29);}
.projet_onelanshow #burgermodal .close {filter: drop-shadow(3px 3px 0px #ffff29);}
.projet_onelanshow .ui_work svg {filter: drop-shadow(-3px 3px 0px #ffff29cc);}
.projet_onelanshow .ui_about svg {filter: drop-shadow(3px 3px 0px #ffff29cc);}
.projet_onelanshow .header_item1, .projet_onelanshow .header_item1 img {width:189px; height:314px;}
.projet_onelanshow .header_item2, .projet_onelanshow .header_item2 img {width:293px; height:262px;}
.projet_onelanshow .header_item3, .projet_onelanshow .header_item3 img {width:261px; height:284px;}
.projet_onelanshow .header_item4, .projet_onelanshow .header_item4 img {width:219px; height:350px;}
.projet_onelanshow .header_item1 {z-index:4; margin-top:319px;}
.projet_onelanshow .header_item2 {z-index:3; margin-top:340px;}
.projet_onelanshow .header_item3 {z-index:2; margin-top:317px;}
.projet_onelanshow .header_item4 {z-index:1; margin-top:170px;}
.projet_onelanshow .header_item1 img {margin-left:4px;}
.projet_onelanshow .header_item2 img {margin-left:-180px;}
.projet_onelanshow .header_item3 img {margin-left:192px;}
.projet_onelanshow .header_item4 img {margin-left:0;}
.projet_onelanshow #header_grad {background:url(../img/da_onelanshow_grad.jpg); background-size:100% 100%;}
.projet_onelanshow .projet1 .fondfilet {border-color:#f8692b; background-color:#f8692b00;}
.projet_onelanshow .projet2 .fondfilet {border-color:#ff0004; background-color:#ff000400;}
.projet_onelanshow .projet1:hover .fondfilet {border-color:#f8692b; background-color:#f8692bff;}
.projet_onelanshow .projet2:hover .fondfilet {border-color:#ff0004; background-color:#ff0004ff;}
.projet_onelanshow #colorsection {background-color:#f58220;}
.projet_onelanshow .wrapper.img_fullscreen_resize.img_onelanshow_video {margin-bottom:0;}
.projet_onelanshow #colorsection .tripleimg {height:1017px;}
.projet_onelanshow #colorsection .tripleimg img.col5 {margin-right:auto; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_onelanshow #colorsection .tripleimg .img1 img.col5 {margin-top:90px; margin-left:-714px;}
.projet_onelanshow #colorsection .tripleimg .img2 img.col5 {margin-top:210px; margin-left:0;}
.projet_onelanshow #colorsection .tripleimg .img3 img.col5 {margin-top:330px; margin-left:357px;}
.projet_onelanshow .img_onelanshow_incollables {align-items: center;}
.projet_onelanshow .img_onelanshow_incollables img {margin-right:24px;}

.projet_visionclient #logo svg {fill:#ff35c8;}
.projet_visionclient .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ff35c8cc);}
.projet_visionclient .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff35c800);}
.projet_visionclient .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ff35c8cc);}
.projet_visionclient .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff35c800);}
.projet_visionclient .ui_work a.mainlink div::after, .projet_visionclient .ui_about a.mainlink div::after {background-color: #ff35c8;}
.projet_visionclient .burger {filter: drop-shadow(3px 3px 0px #ff35c8);}
.projet_visionclient #burgermodal .close {filter: drop-shadow(3px 3px 0px #ff35c8);}
.projet_visionclient .ui_work svg {filter: drop-shadow(-3px 3px 0px #ff35c8cc);}
.projet_visionclient .ui_about svg {filter: drop-shadow(3px 3px 0px #ff35c8cc);}
.projet_visionclient .header_item1, .projet_visionclient .header_item1 img {width:631px; height:442px;}
.projet_visionclient .header_item2, .projet_visionclient .header_item2 img {width:330px; height:285px;}
.projet_visionclient .header_item3, .projet_visionclient .header_item3 img {width:315px; height:128px;}
.projet_visionclient .header_item1 {z-index:4; margin-top:244px;}
.projet_visionclient .header_item2 {z-index:3; margin-top:150px;}
.projet_visionclient .header_item3 {z-index:2; margin-top:192px;}
.projet_visionclient .header_item1 img {margin-left:-25px;}
.projet_visionclient .header_item2 img {margin-left:175px;}
.projet_visionclient .header_item3 img {margin-left:26px;}
.projet_visionclient #header_grad {background:url(../img/ui_visionclient_fullpage_fond.jpg); background-size:100% 100%;}
.projet_visionclient .projet1 .fondfilet {border-color:#f15a3d; background-color:#f15a3d00;}
.projet_visionclient .projet2 .fondfilet {border-color:#007bf3; background-color:#007bf300;}
.projet_visionclient .projet1:hover .fondfilet {border-color:#f15a3d; background-color:#f15a3dff;}
.projet_visionclient .projet2:hover .fondfilet {border-color:#007bf3; background-color:#007bf3ff;}
.projet_visionclient #colorsection {background-color:#562173;}
.projet_visionclient .penimg {height:608px;}
.projet_visionclient .penimg img {margin-right:auto; width:252px; max-width:252px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_visionclient .penimg .img1, .projet_visionclient .penimg .img2, .projet_visionclient .penimg .img3, .projet_visionclient .penimg .img4, .projet_visionclient .penimg .img5 {width:252px; max-width:252px;}
.projet_visionclient .penimg .img1 img {margin-top:0; margin-left:-928px;}
.projet_visionclient .penimg .img2 img {margin-top:40px; margin-left:-464px;}
.projet_visionclient .penimg .img3 img {margin-top:80px; margin-left:0;}
.projet_visionclient .penimg .img4 img {margin-top:120px; margin-left:232px;}
.projet_visionclient .penimg .img5 img {margin-top:160px; margin-left:464px;}
.projet_visionclient .greysection img, .projet_visionclient #colorsection img {margin-top:90px;}
.projet_visionclient .img_visionclient_desktopmockup, .projet_visionclient .visionclient_settings {margin-bottom:0;}

.projet_oscar #logo svg {fill:#00ffff;}
.projet_oscar .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #00ffffcc);}
.projet_oscar .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffff00);}
.projet_oscar .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #00ffffcc);}
.projet_oscar .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffff00);}
.projet_oscar .ui_work a.mainlink div::after, .projet_oscar .ui_about a.mainlink div::after {background-color: #00ffff;}
.projet_oscar .burger {filter: drop-shadow(3px 3px 0px #00ffff);}
.projet_oscar #burgermodal .close {filter: drop-shadow(3px 3px 0px #00ffff);}
.projet_oscar .ui_work svg {filter: drop-shadow(-3px 3px 0px #00ffffcc);}
.projet_oscar .ui_about svg {filter: drop-shadow(3px 3px 0px #00ffffcc);}
.projet_oscar .header_item1, .projet_oscar .header_item1 img {width:730px; height:513px;}
.projet_oscar .header_item1 {z-index:4; margin-top:184px;}
.projet_oscar .header_item1 img {margin-left:50px;}
.projet_oscar #header_grad {background:url(../img/ui_oscar_grad.jpg); background-size:100% 100%;}
.projet_oscar .projet1 .fondfilet {border-color:#c339ff; background-color:#c339ff00;}
.projet_oscar .projet2 .fondfilet {border-color:#e1d8cd; background-color:#e1d8cd00;}
.projet_oscar .projet1:hover .fondfilet {border-color:#c339ff; background-color:#c339ffff;}
.projet_oscar .projet2:hover .fondfilet {border-color:#e1d8cd; background-color:#e1d8cdff;}
.projet_oscar #colorsection {background-color:#004ca6;}
.projet_oscar .img_oscar_chatbotmockup {margin-bottom:0;}
.projet_oscar #colorsection img {margin-top:90px;}
.projet_oscar .quadimg {height:635px;}
.projet_oscar .quadimg img {margin-right:auto; width:315px; max-width:315px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_oscar .quadimg .img1, .projet_oscar .quadimg .img2, .projet_oscar .quadimg .img3, .projet_oscar .quadimg .img4 {width:315px; max-width:315px;}
.projet_oscar .quadimg .img1 img {margin-top:0; margin-left:-864px;}
.projet_oscar .quadimg .img2 img {margin-top:25px; margin-left:-288px;}
.projet_oscar .quadimg .img3 img {margin-top:50px; margin-left:144px;}
.projet_oscar .quadimg .img4 img {margin-top:75px; margin-left:432px;}
.projet_oscar .voirplus a .projet2 {color:#333;}

.projet_maif #logo svg {fill:#0edeaa;}
.projet_maif .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #0edeaacc);}
.projet_maif .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #0edeaa00);}
.projet_maif .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #0edeaacc);}
.projet_maif .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #0edeaa00);}
.projet_maif .ui_work a.mainlink div::after, .projet_maif .ui_about a.mainlink div::after {background-color: #0edeaa;}
.projet_maif .burger {filter: drop-shadow(3px 3px 0px #0edeaa);}
.projet_maif #burgermodal .close {filter: drop-shadow(3px 3px 0px #0edeaa);}
.projet_maif .ui_work svg {filter: drop-shadow(-3px 3px 0px #0edeaacc);}
.projet_maif .ui_about svg {filter: drop-shadow(3px 3px 0px #0edeaacc);}
.projet_maif .header_item1, .projet_maif .header_item1 img {width:598px; height:526px;}
.projet_maif .header_item2, .projet_maif .header_item2 img {width:724px; height:253px;}
.projet_maif .header_item1 {z-index:4; margin-top:164px;}
.projet_maif .header_item2 {z-index:3; margin-top:281px;}
.projet_maif .header_item1 img {margin-left:12px;}
.projet_maif .header_item2 img {margin-left:0;}
.projet_maif #header_grad {background:url(../img/ui_maif_grad.jpg); background-size:100% 100%;}
.projet_maif .projet1 .fondfilet {border-color:#007bf3; background-color:#007bf300;}
.projet_maif .projet2 .fondfilet {border-color:#f15a3d; background-color:#f15a3d00;}
.projet_maif .projet1:hover .fondfilet {border-color:#007bf3; background-color:#007bf3ff;}
.projet_maif .projet2:hover .fondfilet {border-color:#f15a3d; background-color:#f15a3dff;}
.projet_maif #colorsection {background-color:#0c9c78;}
.projet_maif .greysection img {margin-top:90px;}
.projet_maif .maif_emailresponsive, .projet_maif .maif_emailresponsive {margin-bottom:0;}
.projet_maif .maif_mainpres_desktop, .projet_maif .maif_mainpres_mobile {filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25)); margin:0 10px;}
.projet_maif .wrapper.maif_charte {margin-bottom:50px;}
.projet_maif .maif_charte .content.between {flex-wrap:wrap;}
.projet_maif .maif_charte img.col6.ombre {margin:0 10px 40px 10px}
.projet_maif .maif_email_mainpres img.col7.ombre {margin-right:20px;}
.projet_maif .maif_email_mainpres img.col3.ombre {margin-left:20px;}
.projet_maif .maif_email_mainpres img {margin-top:90px;}
.projet_maif .heximg {height:794px;}
.projet_maif .heximg img {margin-right:auto; width:568px; max-width:568px; filter: drop-shadow(0px 7px 10px rgba(0, 0, 0, 0.25));}
.projet_maif .heximg .img1, .projet_maif .heximg .img2, .projet_maif .heximg .img3, .projet_maif .heximg .img4, .projet_maif .heximg .img5, .projet_maif .heximg .img6 {width:568px; max-width:568px;}
.projet_maif .heximg .img1 img {margin-top:0; margin-left:-530px;}
.projet_maif .heximg .img2 img {margin-top:270px; margin-left:-530px;}
.projet_maif .heximg .img3 img {margin-top:540px; margin-left:-530px;}
.projet_maif .heximg .img4 img {margin-top:20px; margin-left:265px;}
.projet_maif .heximg .img5 img {margin-top:290px; margin-left:265px;}
.projet_maif .heximg .img6 img {margin-top:560px; margin-left:265px;}
.projet_maif #colorsection .maif_inter {margin:90px auto;}
.projet_maif #colorsection .content.between {margin:90px auto;}
.projet_maif #colorsection .content.between.col10 {align-items:center;}
.projet_maif #colorsection .content.between div.col3 {background:#ede9e2; height:212px; display:flex; justify-content:center; align-items:center; overflow:hidden;}
.projet_maif #colorsection .content.between.maif_emailings {margin:90px auto 0 auto;}

.work #logo {z-index:100;}
.work #logo svg {fill:#40ffff; transition: fill 300ms ease-in;}
.work .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ffc846cc);}
.work .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffc84600);}
.work .ui_work a.mainlink div::after {background-color: #ffc846;}
.work .ui_work svg {filter: drop-shadow(-3px 3px 0px #ffc846cc);}
.work .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ff3e87cc);}
.work .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.work .ui_about a.mainlink div::after {background-color: #ff3e87;}
.work .ui_about svg {filter: drop-shadow(3px 3px 0px #ff3e87cc);}
.work .burger {filter: drop-shadow(3px 3px 0px #ff3e87);}
.work #burgermodal .close {filter: drop-shadow(3px 3px 0px #ff3e87);}

.work #work_da .item1, .work #work_da .item1 img {width:301px; height:306px;}
.work #work_da .item2, .work #work_da .item2 img {width:372px; height:356px;}
.work #work_da .item3, .work #work_da .item3 img {width:237px; height:213px;}
.work #work_da .item4, .work #work_da .item4 img {width:460px; height:88px;}
.work #work_da .item1 img {margin-top:-4px; margin-left:47px;}
.work #work_da .item2 img {margin-top:-56px; margin-left:-44px;}
.work #work_da .item3 img {margin-top:53px; margin-left:83px;}
.work #work_da .item4 img {margin-top:189px; margin-left:0;}
.work #work_ui .item1, .work #work_ui .item1 img {width:404px; height:476px;}
.work #work_ui .item2, .work #work_ui .item2 img {width:380px; height:403px;}
.work #work_ui .item3, .work #work_ui .item3 img {width:603px; height:392px;}
.work #work_ui .item1 img {margin-top:1px; margin-left:-131px;}/*L-50*/
.work #work_ui .item2 img {margin-top:2px; margin-left:181px;}
.work #work_ui .item3 img {margin-top:-43px; margin-left:-170px;}
.work #work_plus .item1, .work #work_plus .item1 img {width:612px; height:412px;}
.work #work_plus .item3, .work #work_plus .item3 img {width:686px; height:462px;}
.work #work_plus .item1 img {margin-top:-19px; margin-left:4px;}/*L-20*/
.work #work_plus .item3 img {margin-top:0; margin-left:-20px;}

.work .fullpage {width:34%; height:100%; overflow:hidden; margin:0 auto;}
.work #work_da {width:100%;}
.work #work_ui {left:-34%; z-index:2;}
.work #work_plus {right:-34%; z-index:2;}
#work_ui, #work_da {left:0;}
#work_plus, #work_da {right:0;}
.work .animvisu_wrapper {
    opacity:0.5;
    transition: opacity 500ms ease;
}
.work .voile {
    position:absolute;
    width:100%;
    height:100%;
    z-index:50;
    pointer-events:none;
    opacity:0.4;
    transition: opacity 500ms ease;
}
#work_ui .voile {background:#ff8a4a;}
#work_da .voile {background:#0072ff;}
#work_plus .voile {background:#bb13e0;}
.work .fullpage a {
    display:flex;
    position:absolute;
    width:100%;
    height:100%;
    z-index:60;
}
.work .squarePlus_wrapper {
    position:absolute;
    left:0;
    right:0;
    bottom:60px;
    width:53px;
    margin:0 auto;
    opacity:0;
    transition: opacity 500ms ease, filter 500ms ease;
}
.work h1 {
    position:absolute;
    left:0;
    right:0;
    bottom:160px;
    margin:0 auto;
    text-align:center;
    color:#fff;
    font-family:'Roboto Slab', serif;
    font-weight:100;
    font-size:4rem;
    line-height:4.2rem;
    filter:drop-shadow(0px 2px 0px rgba(0, 0, 0, 0.25));
    transition: opacity 500ms ease, filter 500ms ease;
}
.work .fullpage#work_ui h1 {filter:drop-shadow(-0 2px 0px #ffc84600);}
.work .fullpage#work_da h1 {filter:drop-shadow(0px 2px 0px #00ffcc00);}
.work .fullpage#work_plus h1 {filter:drop-shadow(0 2px 0px #ff3e8700);}
.work em {
    font-family:'Chicle';
    font-style:normal;
    font-weight:400;
    letter-spacing:3px;
    font-size:4.6rem;
}
.work .fullpage:hover .voile {opacity:0;}
.work .fullpage:hover .squarePlus_wrapper {opacity:1;}
.work .fullpage:hover .animvisu_wrapper {opacity:1;}
.work .fullpage#work_ui:hover h1 {filter:drop-shadow(-10px 10px 0px #ffc84688);}
.work .fullpage#work_da:hover h1 {filter:drop-shadow(0px 10px 0px #00ffcc44);}
.work .fullpage#work_plus:hover h1 {filter:drop-shadow(10px 10px 0px #ff3e8788);}
.work .fullpage#work_ui:hover .squarePlus_wrapper {filter: drop-shadow(-10px 3px 0px #ffc846cc);}
.work .fullpage#work_da:hover .squarePlus_wrapper {filter: drop-shadow(0px 10px 0px #00ffcccc);}
.work .fullpage#work_plus:hover .squarePlus_wrapper {filter: drop-shadow(10px 3px 0px #ff3e87cc);}

#work_ui {animation: 1s ease 0s 1 workUIIntro; animation-fill-mode: forwards;}
#work_plus {animation: 1s ease 0s 1 workPLUSIntro; animation-fill-mode: forwards;}
@keyframes workUIIntro {
    0% {left:-34%;}
    100% {left:0%;}
}
@keyframes workUIOutro {
    0% {left:0%;}
    100% {left:-68%;}
}
@keyframes workUIFull {
    0% {width:34%; left:0%;}
    100% {width:100%; left:0%;}
}
@keyframes workPLUSIntro {
    0% {right:-34%;}
    100% {right:0%;}
}
@keyframes workPLUSOutro {
    0% {right:0%;}
    100% {right:-68%;}
}
@keyframes workPLUSFull {
    0% {width:34%; right:0%;}
    100% {width:100%; right:0%;}
}
@keyframes workDARight {
    0% {left:0%; width:100%; opacity:1;}
    100% {left:100%; width:34%; opacity:1;}
}
@keyframes workDALeft {
    0% {left:0%; right:0%; width:100%; opacity:1;}
    100% {left:-67%; right:67%; width:34%; opacity:1;}
}
.work.selectUI #logo svg {fill:#ffc846;}
.work.selectUI #work_ui {animation: 1s ease 0s 1 workUIFull; animation-fill-mode: forwards;}
.work.selectUI #work_da {animation: 1s ease 0s 1 workDARight; animation-fill-mode: forwards;}
.work.selectUI #work_plus {animation: 1s ease 0s 1 workPLUSOutro; animation-fill-mode: forwards;}
.work.selectUI .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #ffc846cc);}
.work.selectUI .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #ffc84600);}
.work.selectUI .ui_about a.mainlink div::after {background-color: #ffc846;}
.work.selectUI .ui_about svg {filter: drop-shadow(3px 3px 0px #ffc846cc);}
.work.selectUI #work_ui h1, .work.selectUI #work_ui .squarePlus_wrapper {opacity:0;}

.work.selectDA #work_ui {animation: 1s ease 0s 1 workUIOutro; animation-fill-mode: forwards;}
.work.selectDA #work_plus {animation: 1s ease 0s 1 workPLUSOutro; animation-fill-mode: forwards;}
.work.selectDA .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #00ffcccc);}
.work.selectDA .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffcc00);}
.work.selectDA .ui_work a.mainlink div::after {background-color: #00ffcc;}
.work.selectDA .ui_work svg {filter: drop-shadow(-3px 3px 0px #00ffcccc);}
.work.selectDA .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #00ffcccc);}
.work.selectDA .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #00ffcc00);}
.work.selectDA .ui_about a.mainlink div::after {background-color: #00ffcc;}
.work.selectDA .ui_about svg {filter: drop-shadow(3px 3px 0px #00ffcccc);}
.work.selectDA #work_da h1, .work.selectDA #work_da .squarePlus_wrapper {opacity:0;}

.work.selectPLUS #logo svg {fill:#ff3e87;}
.work.selectPLUS #work_ui {animation: 1s ease 0s 1 workUIOutro; animation-fill-mode: forwards;}
.work.selectPLUS #work_da {animation: 1s ease 0s 1 workDALeft; animation-fill-mode: forwards;}
.work.selectPLUS #work_plus {animation: 1s ease 0s 1 workPLUSFull; animation-fill-mode: forwards;}
.work.selectPLUS .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #ff3e87cc);}
.work.selectPLUS .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #ff3e8700);}
.work.selectPLUS .ui_work a.mainlink div::after {background-color: #ff3e87;}
.work.selectPLUS .ui_work svg {filter: drop-shadow(-3px 3px 0px #ff3e87cc);}
.work.selectPLUS #work_plus h1, .work.selectPLUS #work_plus .squarePlus_wrapper {opacity:0;}

.work .animvisu, .work .animvisu img {transition: width 1000ms ease, height 1000ms ease, margin-top 1000ms ease, margin-left 1000ms ease;}

.work, .liste_ui, .liste_da, .liste_plus {background-color:#333;}

#voileIntro, #voileOutro {
    position:fixed;
    width:100%;
    height:100%;
    background:#333;
    transition:opacity 1000ms ease;
}
#voileIntro {
    z-index:1000;
    opacity:1;
    animation: 1s ease forwards 0s 1 pageIntro;
}
#voileOutro {
    z-index:-1000;
    opacity:0;
}
@keyframes pageIntro {
    0% {opacity:1; z-index:1000}
    99% {opacity:0; z-index:1000}
    100% {opacity:0; z-index:-1000}
}
@keyframes pageOutro {
    0% {opacity:0; z-index:-1000}
    1% {opacity:0; z-index:1000}
    100% {opacity:1; z-index:1000}
}
.bodyOutro #voileOutro {
    animation: 1s ease forwards 0s 1 pageOutro;
}


.about #logo svg {fill:#0ddeff;}
.about .ui_work a.mainlink p {filter: drop-shadow(-5px 5px 0px #0ddeffcc);}
.about .ui_work a.mainlink:hover p {filter: drop-shadow(0 0 0 #0ddeff00);}
.about .ui_about a.mainlink p {filter: drop-shadow(5px 5px 0px #0ddeffcc);}
.about .ui_about a.mainlink:hover p {filter: drop-shadow(0 0 0 #0ddeff00);}
.about .ui_work a.mainlink div::after, .about .ui_about a.mainlink div::after {background-color: #00ffff;}
.about .burger {filter: drop-shadow(3px 3px 0px #0ddeff);}
.about #burgermodal .close {filter: drop-shadow(3px 3px 0px #0ddeff);}
.about .ui_work svg {filter: drop-shadow(-3px 3px 0px #0ddeffcc);}
.about .ui_about svg {filter: drop-shadow(3px 3px 0px #0ddeffcc);}
.about .projet1 .fondfilet {border-color:#f15a3d; background-color:#f15a3d00;}
.about .projet2 .fondfilet {border-color:#0aa0f3; background-color:#0aa0f300;}
.about .projet1:hover .fondfilet {border-color:#f15a3d; background-color:#f15a3dff;}
.about .projet2:hover .fondfilet {border-color:#0aa0f3; background-color:#0aa0f3ff;}
.about #header_grad {background:url(../img/about_grad.jpg); background-size:100% 100%; min-height:857px; height:100%;}
.about #header {
    display:block;
    color:#fff;
    text-align:center;
    min-height:857px;
    height:100%;
    max-width:100%;
}
.about #header_grad {
    position:absolute;
    z-index:-20;
    width:100%;
    height:100%;
    left:0;
    right:0;
    top:0;
    bottom:0;
    overflow:hidden;
    background:none;
}
.about #header_grad img {
    position:absolute;
    top:0;
    left:-20%;
    right:20%;
    width:140%;
    height:100%;
    transition: margin-left 200ms ease;
}
.about #header div.triD {
    position: absolute;
    top:-50%;
    bottom:-50%;
    left:-50%;
    right:-50%;
    margin: auto;
    height:480px;
    width:1000px;
    transition: transform 100ms ease;
    transform-style: preserve-3d;
    transform: perspective(75em) rotateX(0deg) rotateY(0deg) translateZ(0);
}
.about #header h1 {
    font-family:'Chicle';
    font-size:9.4rem;
    line-height: 7.0rem;
    font-weight:400;
    color:#fff;
    margin:0 auto 92px auto;
    height:auto;
    text-align:center;
    transform: translateZ(-80px);
}
.about #header .shadow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-left:auto;
    margin-right:auto;
    color: #0ddeff;
    transform: translateZ(-100px);
}
.about #header h1.shadow {
    bottom:auto;
    margin-top: 0px;
}
.about #header h2.shadow {
    bottom:auto;
    margin-top: 355px;
}
.about #header h2 {
    font-family:'Chicle';
    font-size:5.0rem;
    line-height: 4.5rem;
    font-weight:400;
    color:#fff;
    margin:49px auto 0 auto;
    text-align:center;
    transform: translateZ(-80px);
}
.about #header p {
    margin-left:auto;
    margin-right:auto;
    margin-top:0;
    font-family:'Roboto', sans-serif;
    font-weight:100;
    font-size:2.4rem;
    line-height: 3.8rem;
    text-align:left;
    transform-style: preserve-3d;
}
.about #header em {
    font-weight:700;
    font-style:normal;
    background:#8400ff;
    color:#fff;
}
.about #header .email {
    text-align:center;
    margin-top:14px;
    transform-style: preserve-3d;
}
.about #header .email a {
    width:245px;
    margin:0 auto;
    color:#fff;
    transition:filter 500ms ease;
    transform-style: preserve-3d;
}
.about #header .email a::after {
    background-color:#0ddeff;
    filter: none;
    height:5px;
}


.timeline .dotLine {
    display:flex;
    flex-direction: column;
    justify-content: center;
    width:50px;
}
.timeline .dot, .timeline .dotSquare {
    display:flex;
    width:4px;
    height:4px;
    border-radius:4px;
    border:solid 1px #0ddeff;
    margin:5px auto;
}
.timeline .dot.mobile {
    display:none;
}
.milestone {
    position:relative;
    width:50px;
    margin:0 auto;
    transition:500ms ease;
}
.about h3 {
    font-family:'Roboto Slab', serif;
    font-weight:900;
    font-size:2.1rem;
    line-height:3.1rem;
    margin:0 0 20px 0;
}
.milestone p {
    width:100%;
}
.milestone .dotSquare {
    transition:500ms ease;
    filter: drop-shadow(3px 3px 0 #0ddeff00);
}
.milestone .description {
    display:flex;
    position:absolute;
    align-items:center;
    top:-50%;
    bottom:-50%;
    left:auto;
    right:auto;
    height:250px;
    margin:auto auto auto 95px;
    transition:500ms ease;
    opacity:0;
}
.milestone .description em {
    font-style: normal;
    font-weight:700;
    color:#8400ff;
}
.milestone.left .description {
    flex-direction:row-reverse;
    height:320px;
    margin:auto auto auto -372px;
}
.milestone.left .description .dot {
    margin-left:38px;
}/*
.milestone.left .description .dot:before {
    margin-left:-15px;
}
.milestone.left .description .dot:after {
    margin-left:-18px;
}*/
.milestone .description .dot {
    border-color:#8400ff;
    margin-right:38px;
}/*
.milestone .description .dot:before {
    content: " ";
    position:absolute;
    border:none;
    background:#0ddeff;
    height:100px;
    width:1px;
    border-radius:0;
    margin:-48px 0 0 15px;
}
.milestone .description .dot:after {
    content: " ";
    position:absolute;
    border:none;
    background:#8400ff;
    height:160px;
    width:1px;
    border-radius:0;
    margin:-78px 0 0 18px;
}*/
.timeline/*:hover*/ .milestone {
    margin:5px auto 10px auto;
}
.timeline/*:hover*/ .description {
    opacity:1;
}
.timeline/*:hover*/ .milestone .dotSquare {
    width:23px;
    height:23px;
    border-radius:0px;
    border:solid 1px #8400ff;
    filter: drop-shadow(3px 3px 0 #0ddeffff);
    transform:rotate(45deg);
}
.timeline .col3 {text-align:center;}
.timeline .col3 h3, .timeline .col3 p {text-align:left;}
.icowl1, .icowl2, .icowl3 {margin:0 auto 20px auto;}
.icowl1 {margin-top:65px; width:119px;}
.icowl2 {margin-top:130px; width:98px;}
.icowl3 {margin-top:93px; width:172px;}

.parcours h2 {
    margin-top:204px;
    text-align:center;
}
.expertise h2 {
    text-align:center;
}
.expertise .col4 {
    margin:60px 0 90px 0;
    padding:0 30px;
    text-align:center;
}
.expertise .col4 img {
    height:125px;
    margin:0 auto 52px auto;
}

.wrapper.expertise {
    flex-direction:column;
    overflow:hidden;
}/*
.expertise h2 {
    transform: rotateX(-53deg) rotateZ(-43deg) translate3d(0px, -20px, 0);
    font-size: 5rem;
}*/
.expertise h3, .expertise p {width:auto; position:relative; text-align: left;}
.expertise h3 {
    margin-bottom:30px;
}
.expertise h3:after {
    content:" ";
    position:absolute;
    left:-10px;
    top:17px;
    width:284px;
    height:20px;
    background:#0ddeff;
    z-index:-1;
}
.expertise .last {
    margin-top:200px
}
.expertise .content.item1, .expertise .content.item2, .expertise .content.item3 {
    z-index:auto;
    margin-top:-310px;
}
.expertise .content.item1 {margin-left:160px; margin-top:0px;}
.expertise .content.item3 {margin-left:-160px; margin-bottom:20px;}
.diagBg, .diagBg2 {
    position:relative;
}
.diagBg div, .diagBg2 div {
    position:absolute;
    z-index:-1;
    top:0;
    bottom:0;
    width:100%; 
    height:800px;
    margin-top:100px;
    background:#eee;
    transform: skewY(34deg);
}
.diagBg2 div {
    margin-top:840px;
    background:#fff;
    transform: skewY(-30deg);
    height:2000px;
}
.tile:first-child {
    margin:0;
}
.tile {
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin:100px 0 0 -50px;
    width:200px;
    height:200px;
    background:#fff;
    transform:
      rotateX(-51deg)
      rotateZ(-43deg);
    transform-style: preserve-3d;
    border-radius: 20px;
    box-shadow:
      -3px 3px 0 1px #ddd,
      -1px 0 28px 0 rgba(34, 33, 81, 0.01),
      -28px 28px 28px 0 rgba(34, 33, 81, 0.25);
    transition:
      .4s ease-out transform,
      .4s ease-out box-shadow;
} 
.tile img {
    width:100px;
    height:100px;
}
.tile:hover {
      transform:
        translate3d(0px, -16px, 0px)
        rotateX(-51deg)
        rotateZ(-43deg);
      box-shadow:
        -3px 3px 0 1px #0ddeff,
        -1px 0 28px 0 rgba(34, 33, 81, 0.01),
        -54px 54px 28px -10px rgba(18, 236, 219, 0.15),
        -54px 54px 28px -10px rgba(34, 33, 81, 0.15);
}
.tile div {
    margin:30px;
}
.tileText {
    display:flex;
    justify-content: center;
    align-items: center;
    margin:300px 0 0 -50px;
    width:200px;
    height:200px;
    transform:
      rotateX(-51deg)
      rotateZ(-43deg);
    transform-style: preserve-3d;
    font-family:'Roboto', sans-serif;
    font-weight:300;
    font-size:2.1rem;
    line-height: 3.4rem;
}
.tile span {
    margin-top:0px;
    overflow:hidden;
    height:0px;
    transition:height 400ms ease, margin-top 400ms ease;
}
.tile:hover span {
    margin-top:10px;
    height:25px;
}
.software {
    width:198px;
    height:6px;
    margin:30px auto 90px auto;
    fill:#999;
}

.fullScreen3D .fullpage#fullScreen3D, .scrollableContent .fullpage#scrollableContent {top:0;}
.fullScreen3D .fullpage#scrollableContent {top:100%;}
.scrollableContent .fullpage#fullScreen3D {top:-100%;}
.fullScreen3D #logoFlat {opacity:1;}
.fullScreen3D #logoGrad {opacity:0;}
.scrollableContent #logoFlat {opacity:0;}
.scrollableContent #logoGrad {opacity:1;}


.about .ui_work svg, .about .ui_about svg,
.liste_da .ui_work svg, .liste_da .ui_about svg,
.liste_ui .ui_work svg, .liste_ui .ui_about svg,
.liste_plus .ui_work svg, .liste_plus .ui_about svg {transition:fill 1000ms ease;}
.about .ui_work div p, .about .ui_about div p,
.liste_da .ui_work div p, .liste_da .ui_about div p,
.liste_ui .ui_work div p, .liste_ui .ui_about div p,
.liste_plus .ui_work div p, .liste_plus .ui_about div p {transition:color 1000ms ease;}
.about .ui_work a.mainlink .ariane_work, .about .ui_about a.mainlink .ariane_about,
.liste_da .ui_work a.mainlink .ariane_work, .liste_da .ui_about a.mainlink .ariane_about,
.liste_ui .ui_work a.mainlink .ariane_work, .liste_ui .ui_about a.mainlink .ariane_about,
.liste_plus .ui_work a.mainlink .ariane_work, .liste_plus .ui_about a.mainlink .ariane_about {transition:color 1000ms ease, filter 300ms ease;}
.about .voirplus .owlabout img {display:flex; width:547px; max-width:547px; margin:30px auto 90px auto;}
.about .voirplus .svg {margin:30px auto 90px auto;}

.about .ui_about div p.ariane_about_rub {position:fixed; top:95px; right:106px; left:auto; bottom:auto; margin:auto; width:55px;}

.projet_oui .mobile_part1 img,
.projet_oui .mobile_part2 img,
.projet_visionclient .content img.col10,
.projet_visionclient #colorsection img.col12.ombre,
.projet_maif .content img.col8,
.projet_maif #colorsection .content.maif_email_mainpres img,
.projet_oniryk .content img.col10,
.projet_onelanshow .content img.col10.ombre,
.projet_fenwick #colorsection .content img.col12.ombre,
.projet_micron img {align-self: start;}

.projet_oui #burgermodal .links a::after {background-color:#ffc846;}
.projet_anserak #burgermodal .links a::after {background-color:#00ffcc;}
.projet_arcadia #burgermodal .links a::after {background-color:#fff43c;}
.projet_micron #burgermodal .links a::after {background-color:#ff3e87;}
.projet_doodling #burgermodal .links a::after {background-color:#ff3e87;}
.projet_photoreport #burgermodal .links a::after {background-color:#43fff8;}
.projet_photoart #burgermodal .links a::after {background-color:#43fff8;}
.projet_won #burgermodal .links a::after {background-color:#008aff;}
.projet_pollutec #burgermodal .links a::after {background-color:#41ffdd;}
.projet_fenwick #burgermodal .links a::after {background-color:#ffe13c;}
.projet_oniryk #burgermodal .links a::after {background-color:#00fff0;}
.projet_onelanshow #burgermodal .links a::after {background-color:#ffff29;}
.projet_visionclient #burgermodal .links a::after {background-color:#ff35c8;}
.projet_oscar #burgermodal .links a::after {background-color:#00ffff;}
.projet_maif #burgermodal .links a::after {background-color:#0edeaa;}
.index #burgermodal .links a::after,
.about #burgermodal .links a::after,
.work #burgermodal .links a::after,
.liste_da #burgermodal .links a::after,
.liste_ui #burgermodal .links a::after,
.liste_plus #burgermodal .links a::after {background-color:#0ddeff;}
.index #burgermodal .close,
.liste_da #burgermodal .close,
.liste_ui #burgermodal .close,
.liste_plus #burgermodal .close {filter: drop-shadow(3px 3px 0px #0ddeff);}