/* GENERAL */

#hexagones-stripes-container-stripeter{
    display: none;
}
.bqglobalrgpd-table{ width: 100%; }
*{
    box-sizing: border-box;
}
html, body{
    font-family: 'Work Sans', sans-serif;
    font-size: 14px;
    background: #f7f6f2;
}
body{
    overflow: hidden;
}
.valign-table{
    display: table;
    width: 100%;
    height: 100%
}
.valign-row{
    display: table-row;
}
.valign-cell{
    display: table-cell;
    vertical-align: middle;
}
.left{
    float: left;
}
.right{
    float: right;
}
.clearfix{
    clear: both;
    height: 0;
}
.wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.list-container{
    position: relative;
    display: inline-block;
    width: 100%;
}
.contact-cta{
    cursor: pointer;
}
#frame{
    width: 100%;
    height: 100%;
}
#frame #basaltiq{
    position: absolute;
    left: 50px;
    top: 18px;
    height: 30px;
}
#frame #basaltiq a{
    font-size: 34px;
    line-height: 34px;
}
#frame #basaltiq img{
    height: 30px
}
#frame #basaltiq a.home-link{
    font-size: 0px;
    color: #000;
    text-decoration: none;
    height: 0;
}
#frame #menu-desktop{
    display: inline-block;
    float: right;
    height: 100%;
    padding-right: 50px;
}
#frame #menu-desktop ul li{
    display: inline-block;
    color: #8b8883;
    margin-right: 20px;
    font-size: 16px;
    line-height: 20px;
}
#frame #menu-desktop ul li a{
    color: #8b8883;
    text-decoration: none;
}
#frame #menu-desktop ul li.backgrounded{
    position: relative;
    right: -10px;
}
#frame #menu-desktop ul li.backgrounded a{
    background-color: #000;
    color: #FFF;
    text-transform: uppercase;
    padding: 2px 6px;
    font-weight: 600;
    position: relative;
}
#frame #menu-desktop ul li.backgrounded a:hover:before{ content: ''; width: 100%; height: 3px; background-color: #ff8980; display: inline-block; position: absolute; left: 0; bottom: -2px; }
#frame #menu-desktop ul li.blog{
    margin-left: 45px;
    margin-bottom: -10px;
    margin-right: 0;
}
#frame #menu-desktop ul li.blog a{
    display: inline-block;
}
#frame #menu-button{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 15;
    cursor: pointer;
    display: inline-block;
    height: 70px;
    width: 70px;
    text-align: center;
    display: none;
}
#frame #menu-button svg{
    -webkit-transition: all linear .4s; -moz-transition: all linear .4s; -ms-transition: all linear .4s; -o-transition: all linear .4s; transition: all linear .4s;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.format-mobile .under-frame{
    background-color: rgb(255, 137, 128);
}
.format-mobile .home-landing{
    background-color: #FFFFFF;
}
.format-mobile .home-landing{
    background-color: #FFFFFF;
}
.format-tablet-landscape .under-frame{
    background-color: #ff8980;
}
.home-landing.format-tablet{
    padding: 50px;
    background: #f7f6f2 ;
}

#see-more-picto{
    position: absolute;
    bottom: 130px;
    left: 50%;
    opacity: 0;
    cursor: pointer;
    margin-left: -17.5px;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    width: 35px;
    height: 35px;
}
#see-more-picto.shown{
    opacity: 1;
}
#see-more-picto svg{
    position: absolute;
    top: 0;
    left: 0;
}
#see-more-picto svg:first-of-type{
    /*animation: sixemeDeTour 2s infinite;*/
    animation-delay: 4.5s;
    animation-timing-function: ease-out;
}
#see-more-picto svg:last-of-type{
    -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);
}
#see-more-picto polyline{
    transform: translateX(22px) translateY(22px) scale(0.12) rotate(-180deg);
}
@keyframes squeezy{
    0%{ bottom: 130px; opacity: 0; }
    50%{ bottom: 130px; opacity: 0; }
    60%{ opacity: 1; }
    66%{ bottom: 155px; opacity: 1; }
    90%{ bottom: 128px; opacity: 1; }
    100%{ bottom: 130px; opacity: 1; }
}
@keyframes sixemeDeTour{
    0%{ transform: rotate(90deg); }
    30%{ transform: rotate(150deg); }
    100%{ transform: rotate(150deg); }
}
@keyframes fadeIn{
    0%{ opacity: 0; }
    20%{ opacity: 1; }
    100%{ opacity: 1; }
}
#menu-button, #nav-tribar, #top-header{
    -webkit-transition: all .4s ease-out;
    -moz-transition: all .4s ease-out;
    -ms-transition: all .4s ease-out;
    -o-transition: all .4s ease-out;
    transition: all .4s ease-out;
}
#menu-button.active{
    /*background-color: #c3c1ba;*/
}
#menu-button.active svg path{
    fill: #e1dfd9 !important;
}
#menu-button #nav-tribar.active + svg{
    -webkit-transform: rotate(150deg); -moz-transform: rotate(150deg); -ms-transform: rotate(150deg); -o-transform: rotate(150deg); transform: rotate(150deg);
}
#nav-tribar.active span{
    background-color: #6c6c6c;
    transform: rotate(0);
}
#nav-tribar.active span:nth-child(2).active{
    opacity: 0;
}
#nav-tribar.active span:first-of-type{
    animation: crossFirst 0.5s 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 1;
}
#nav-tribar.active span:last-of-type{
    animation: crossLast 0.5s 1;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
    opacity: 1;
}
@keyframes crossFirst{
    0%{ top: 29px; transform: rotate(0deg) }
    50%{ top: 33px; transform: rotate(0deg) }
    100%{ top: 33px; transform: rotate(-45deg); }
}
@keyframes crossLast{
    0%{ top: 37px; transform: rotate(0deg) }
    50%{ top: 33px; transform: rotate(0deg) }
    100%{ top: 33px; transform: rotate(45deg); }
}
#nav-tribar{
    right: 0;
    top: 0;
    position: absolute;
    z-index: 15;
    cursor: pointer;
}
#nav-tribar span{
    background-color: #c3c1ba;
    display: inline-block;
    position: absolute;
    top: 29px;
    right: 28px;
    width: 14px;
    height: 1px;
    opacity: 0;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}
#nav-tribar span:nth-child(2){
    top: 33px;
    opacity: 0;
}
#nav-tribar span:nth-child(3){
    top: 37px;
    opacity: 0;
}
/*When top-bar has appeared*/

#nav-tribar.active span{
    background-color: #c3c1ba;
    height: 2px;
}
#nav-tribar span.active.active{
    opacity: 1;
}
#nav-tribar span:nth-child(2).active{
    opacity: 1;
}
#nav-tribar span:nth-child(3).active{
    opacity: 1;
}
/* Transition between views */

.fade.ng-enter{
    transition: 0.5s linear all;
    opacity: 0;
    transition-delay: 0.25s;
}
.fade.ng-enter.ng-enter-active{
    opacity: 1;
}
.fade.ng-leave{
    transition: 0.25s linear all;
    opacity: 1;
}
.fade.ng-leave.ng-leave-active{
    opacity: 0;
}
.main{
    height: 100%;
    padding-top: 70px;
}
.home .main{
    height: 100%;
    padding-top: 0;
}
.home #top-header{
    top: -70px;
}
#top-header{
    top: -70px;
}
.view-section{
    height: 100%;
}
.main-directive{
    height: 100%;
    display: block;
}
.section-framed{
    padding: 0 50px;
}
.separator .losange{
    display: inline-block;
    background-color: #FFFFFF;
    width: 10px;
    height: 10px;
    position: relative;
    left: -2px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.separator .losange:first-of-type{
    left: 0;
}
.separator .losange:nth-child(3){
    left: -5px;
}
.clear{
    clear: both;
    display: block;
    width: 100%;
    height: 0;
}

/* HEADER */

#menu-modal{
    visibility: hidden;
    z-index: 45;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: #FFF;
    opacity: 0;
}
#menu-modal.active{
    visibility: visible;
}
#main-header{
    z-index: 50;
    position: fixed;
    top: 120px;
    left: 0;
    display: block;
    width: 100%;
    text-align: center;
    -webkit-transition: all .4s linear;
    -moz-transition: all .4s linear;
    -ms-transition: all .4s linear;
    -o-transition: all .4s linear;
    transition: all .4s linear;
    opacity: 0;
    visibility: hidden;
}
#main-header.active{
    display: block;
    opacity: 1;
    visibility: visible;
}
#main-header #basaltiq{
    padding: 20px 0;
}
#main-header #basaltiq a{
    font-size: 40px;
    text-decoration: none;
    color: #000;
}
#main-header ul{
    margin: 0 auto;
    padding-bottom: 15px;
    z-index: 2;
    position: relative;
    top: 19%;
    height: 70%;
    text-align: center;
    opacity: 0;
}
#main-header ul li{
    padding: 0 5px;
    height: 20%;
    position: relative;
    top: -25px;
    z-index: 1;
    display: block;
    width: auto;
}
#main-header ul li a:hover + span{
    opacity: 1;
    -webkit-transition: all .1s ease-out;
    -moz-transition: all .1s ease-out;
    -ms-transition: all .1s ease-out;
    -o-transition: all .1s ease-out;
    transition: all .1s ease-out;
}
#main-header ul li span{
    display: block;
    position: relative;
    top: -44px;
    font-size: 14px;
    line-height: 28px;
    z-index: -1;
    opacity: 0;
}
#main-header #nav ul li span svg{
    top: -30px;
    padding-left: 40px;
    padding-bottom: 64px;
    left: 50%;
    right: 50%;
    position: absolute;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}
#main-header ul li a{
    display: inline-block;
    padding-top: 40px;
    text-decoration: none;
    color: #8b8883;
    font-size: 18px;
    line-height: 22px;
    z-index: 2;
    font-weight: 300;
}
#main-header ul li a:hover{
    color: #000;
    font-weight: 800;
    text-transform: uppercase;
}
#main-header #nav{
    background-color: #555555;
    color: #8b8883;
    text-align: center;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -ms-transition: all .3s linear;
    -o-transition: all .3s linear;
    transition: all .3s linear;
}
#main-header #nav .blog{ margin-top: 50px; }
#main-header #nav .blog img{ width: 58px; }
#main-header #nav .backgrounded a{ background-color: #000; color: #FFF; font-size: 14px; padding: 4px 12.5px; text-transform: uppercase; font-weight: 600; line-height: 27px; }
#main-header #nav .hexagone-wrapper > svg{
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    opacity: 0;
}
#main-header #nav.active{
    top: 50px !important;
}
#main-header #nav .hexagone-wrapper{
    height: 600px;
    width: 600px;
    position: absolute;
}
#top-header{
    background-color: #FFF;
    position: fixed;
    top: -70px;
    left: 0;
    z-index: 60;
    display: block;
    height: 70px;
    width: 100%;
}
#top-header.opened{
    background-color: #c3c1ba;
}
#top-header h1{
    -webkit-transition: opacity .2s linear;
    -moz-transition: opacity .2s linear;
    -ms-transition: opacity .2s linear;
    -o-transition: opacity .2s linear;
    transition: opacity .2s linear;
}
#top-header.opened h1{ opacity: 0; }
#top-header.active{
    display: block;
}

/* HOME PAGE */

.home-title{
    font: 28px 'Anaheim', sans-serif;
    margin: 122px auto 53px;
    padding: 0 0 37px 100px;
    position: relative;
    color: #000;
    text-align: left;
    width: 100%;
    margin-left: -50px;
}
.home-title em{
    font-family: 'Work Sans', sans-serif;
    font-weight: 800;
}
.home-title:after{
    content: "";
    position: absolute;
    background: url(../img/home/arrow-title.png) no-repeat;
    width: 24px;
    height: 12px;
    bottom: 0;
    left: 282px;
}
.home-landing{
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    padding: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
}
.home-landing.loaded{
    padding: 50px;
    background: #f7f6f2;
}
.home-landing .under-frame{
    height: 100%;
    overflow: hidden;
}
.home-agence{
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 70px auto 100px;
}
.home-agence #home-agence-content{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}
.home-agence #home-agence-content .list-container{
    height: 100%;
}
.home-agence #home-agence-content .hexagones-stripes-container{
    background-color: #ff8880;
    margin-left: -100px;
}
.home-agence .backgrounded{
    padding: 0 160px;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 12;
}
.home-agence .backgrounded .wrap{
    width: 100%;
    max-width: 1068px;
    height: 100%;
    margin: 0 auto;
}
.home-agence .backgrounded .agence-title{
    position: relative;
    font-size: 72px;
    line-height: 60px;
    margin-top: 120px;
}
.home-agence .backgrounded .agence-title ul{
    height: 180px;
}
.home-agence .backgrounded .agence-title ul li{
    height: 70px;
    position: relative;
    overflow: hidden;
}
.home-agence .backgrounded .agence-title ul li:last-child{
    height: 75px;
}
.home-agence .backgrounded .agence-title ul li span{
    position: absolute;
    font-weight: 800;
    color: #fff;
    top: 75px;
    height: 100%;
}
.home-agence .backgrounded .agence-title em{
    color: #000;
}
.home-agence .backgrounded .agence-content{
    max-width: 67%;
    padding-top: 134px;
    position: relative;
}
.home-agence .backgrounded .agence-content p{
    font-size: 18px;
    line-height: 28px;
    color: #fff;
    font-weight: 300;
    padding-left: 5px;
    opacity: 0;
}
.home-agence .backgrounded .agence-content .list-chips{
    position: absolute;
    left: -11px;
    top: 104px;
}
.home-agence .backgrounded .agence-content .list-chips ul{
    position: relative;
}
.home-agence .backgrounded .agence-content .list-chips li{
    float: left;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotateZ(45deg);
    margin-left: 4px;
    opacity: 0;
}
.home-agence .backgrounded .agence-content .list-chips li:first-child{
    margin-left: 0;
}
.hexagones-stripes-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    overflow: hidden;
    z-index: 0;
}
.hexagones-stripe{
    position: absolute;
    top: -70px;
    right: -100%;
    z-index: 10;
    margin-right: -50px;
}
#stripe-pattern svg path{
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1px;
}
#stripebis-pattern svg path{
    fill: transparent;
    stroke: rgba(113, 113, 113, 0.4);
    stroke-width: 1px;
}
#mask-pattern-stripe, #mask-pattern-stripebis{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.hexagones-stripebis{
    position: absolute;
    top: 0;
    right: -100%;
}
.hexagones-stripeter{
    position: absolute;
    top: 365px;
    left: -372px;
    transform-origin: top right;
    transform: rotateZ(26.6deg);
}
.home-presentation{
    position: relative;
    left: 0;
    top: 0 !important;
    z-index: 10;
}
.home-presentation .list-container{
    padding-top: 120px;
    padding-bottom: 65px;
}
.home-presentation .list-container .left{
}
.home-presentation .list-container .left:first-child{
    padding-right: 90px;
    width: calc(50% - 50px);
}
.home-presentation .list-container .left:first-child h5{
    font-size: 38px;
    font-weight: 300;
    text-align: right;
    padding-top: 30px;
}
.home-presentation .list-container .left:first-child h5 span{
    display: block;
}
.home-presentation .list-container .left:first-child h5 span:first-child{
    padding-right: 75px;
}
.home-presentation .list-container .left:last-child{
    position: relative;
    width: calc(50% + 50px);
    max-width: 480px;
    padding-left: 35px;
}
.home-presentation .list-container .left:last-child .deco{
    position: absolute;
    display: inline-block;
    top: -35px;
    margin-left: -18px;
}
.home-presentation .list-container .left:last-child .deco li{
    float: left;
    width: 10px;
    height: 10px;
    background: #acaba5;
    transform: rotateZ(45deg);
    margin: 0 2px;

}
.home-presentation p{
    font-weight: 400;
    line-height: 22px;
    font-size: 16px;
    margin-bottom: 20px;
    color: #626058;
}
.home-presentation p strong{
    font-weight: 700;
}
.home-presentation p:last-of-type{
    margin-bottom: 50px;
}
.linked-in-button-wrapper{
    text-align: center;
    margin-top: 50px;
}
.mandatory-field{
    color: red;
}
.directive-home #logo{
    height: 100%;
    text-align: center;
}
.directive-home #logo #logo-basaltiq{
    position: relative;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.directive-home #logo #logo-main{
    position: relative;
    margin: 0 auto;
    display: block;
}
.directive-home #logo #logo-main svg path{
    stroke-linecap: round;
}
.directive-home #logo #logo-wrapper{
    position: absolute;
}
.directive-home #logo #logo-container{
    position: relative;
    margin: 0 auto;
}
.directive-home #logo #logo-container #logo-sub-container{
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    transform-origin: bottom right;
}
.directive-home #logo #logo-container svg{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4
}
.directive-home #logo #logo-container svg#hex0{ z-index: 1; opacity: 0; }
.directive-home #logo #logo-container svg#hex0.displayed{ opacity: 1; }
.directive-home #logo #logo-container svg#hex1{ z-index: 0; }
.directive-home #logo #logo-container svg#hex2{ z-index: 0; }
.directive-home #logo #logo-container svg#hex3{ z-index: 0; }
.directive-home #logo #letters-main{
    position: relative;
}
.directive-home #logo #letters-wrapper{
    position: absolute;
    width: 100%;
    left: 0;
}
.directive-home #logo #letters-container{
    position: relative;
    margin: 0 auto;
}
.directive-home #logo #letters-container svg{
    position: absolute;
    bottom: 0;
    opacity: 0;
    fill: #fff;
}
.directive-home #logo #letters-container svg#letter-7 g path:first-child{
    opacity: 0;
}
.home-slider .home-title-container {
    max-width: 1366px;
    margin: 0 auto;
}
.home-slider .portfolio-link{ position: absolute; right: 50px; top: 92px; }
.home-slider .cb-slide-block .portfolio-link{ right: 0; top: auto; bottom: -35px; }
.home-slider .portfolio-link a{ display: inline-block; background-color: #000; color: #FFF; text-transform: uppercase; padding: 2px 6px; font-weight: 600; text-decoration: none; font-size: 14px; line-height: 20px; }
.home-slider .portfolio-link a:before{ content: ''; display: block; position: absolute; left: -22px; top: 8px; height: 7px; width: 7px; border-right: 2px solid #acaaa5; border-bottom: 2px solid #acaaa5; transform: rotate(-45deg); }
.home-slider .portfolio-link a:hover:after{ content: ''; width: 100%; height: 3px; background-color: #ff8980; display: inline-block; position: absolute; left: 0; bottom: -2px; }
#home-slider{
    width: 100%;
    position: relative;
    /*overflow: hidden;*/
}
#home-slider .cb-slider-wrapper{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
#home-slider .cb-slider-wrapper .cb-slide{
    position: relative;
    width: 100%;
    height: 100%;
    padding-bottom: 160px;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-image{
    width: 100%;
    height: 100%;
    background: #000;
    position: relative;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-image .cb-slide-image-holder{
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: cover;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block{
    position: absolute;
    width: 80%;
    max-width: 740px;
    height: 200px;
    bottom: 20px;
    right: 0%;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-container{
    position: relative;
    width: 100%;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-title{
    height: 60px;
    line-height: 60px;
    position: relative;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-title-container{
    width: 100%;
    background: #fff;
}
#home-slider .cb-slider-wrapper .cb-slide-chips{
    position: absolute;
    top: 0;
    right: 0;
    display: inline-block;
    height: 12px;
    margin: 24px 20px;
}
#home-slider .cb-slider-wrapper .cb-slide-chips li{
    float: left;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotateZ(45deg);
    border: 1px solid #adaba5;
    margin: 0 7px;
    -webkit-transition: background 0.3s ease;
    -moz-transition: background 0.3s ease;
    -ms-transition: background 0.3s ease;
    -o-transition: background 0.3s ease;
    transition: background 0.3s ease;
}
#home-slider .cb-slider-wrapper .cb-slide-chips li.active, #home-slider.original .cb-slider-wrapper .cb-slide-chips li:first-child{
    background: #a8a6a0;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-title h3{
    font-size: 26px;
    font-weight: 700;
    color: #f3bd00;
    padding: 0 20px;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-title h3 em{
    font-size: 18px;
    font-weight: 400;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-title h3 span{
    font-size: 18px;
    font-weight: 500;
    color: #808080;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content{
    background: #efede8;
    height: 140px;
    overflow: hidden;
    position: relative;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content .cb-slide-block-content-text{
    height: 105px;
    padding: 0 20px;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content .cb-slide-block-content-text p, #home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content .cb-slide-block-content-text p a{
    font-size: 15px;
    color: #626058;
    line-height: 22px;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content ul{
    position: absolute;
    display: inline-block;
    width: 100%;
    left: 20px;
    bottom: 20px;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content ul li{
    float: left;
    margin-left: 8px;
    background: #f3bd00;
    color: #fff;
    font-size: 15px;
    font-weight: 400;
    padding: 0 3px;
}
#home-slider .cb-slider-wrapper .cb-slide .cb-slide-block .cb-slide-block-content ul li:first-child{
    margin-left: 0;
}
#home-slider .cb-slider-controls{
    position: absolute;
    width: 100%;
    height: 0;
    top: calc(50% - 105px);
    left: 0;
    margin-top: 0;
    z-index: 5;
}
#home-slider .cb-slider-controles .cb-slider-controls-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
    display: inline-block;
}
#home-slider .cb-slider-controls .cb-arrow{
    width: 50px;
    height: 50px;
    position: relative;
    float: left;
    margin: 0 0 0 25px;
}
#home-slider .cb-slider-controls .cb-arrow svg{
    position: absolute;
}
#home-slider .cb-slider-controls .cb-arrow svg:first-child{
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
#home-slider .cb-slider-controls .cb-arrow svg:first-child path{
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    fill: #efede8;
}
#home-slider .cb-slider-controls .cb-arrow:hover{
    cursor: pointer;
}
#home-slider .cb-slider-controls .cb-arrow:hover svg:first-child path{
    fill: #fff;
}
#home-slider .cb-slider-controls .cb-arrow svg:last-child{
    height: 15px;
    width: 10px;
    top: 17.5px;
    left: 20px;
    opacity: 1;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
#home-slider .cb-slider-controls.transition .cb-arrow svg:last-child{
    opacity: 0;
}
#home-slider .cb-slider-controls .cb-arrow:last-child{
    float: right;
    margin: 0 25px 0 0;
}
#home-slider .cb-slider-controls .cb-arrow:first-child svg:last-child{
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

/* OFFRE */

.container-parallax{
}
.sub-container-parallax{
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1266px;
    margin: 0 auto;
}
.container-parallax .parallax-left{
    width: 45%;
    padding: 120px 75px 120px 100px;
}
.container-parallax .parallax-left .title{
    font-size: 80px;
    line-height: 68px;
    margin-bottom: 80px;
    font-weight: 800;
}
.container-parallax .parallax-left .title ul li{
    height: 80px;
    position: relative;
    overflow: hidden;
}
.container-parallax .parallax-left .title ul li:first-child{
    margin-top: 0;
}
.container-parallax .parallax-left .title ul li span{
    position: absolute;
    top: 95px;
}
.container-parallax .parallax-left .presentation{
    font-size: 18px;
    line-height: 28px;
    font-weight: 300;
}
.container-parallax .parallax-right{
    position: absolute;
    width: 55%;
    top: 110%;
    right: 1.5%;
}
.container-parallax .parallax-right .container-cells{
    display: inline-block;
    width: 100%;
    padding: 55px 0;
}
#scene-customers.container-parallax .parallax-right .container-cells{
    display: block;
    padding: 0;
    position: relative;
    min-height: 200px;
}
#scene-customers.container-parallax .parallax-customers-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}
.container-parallax .parallax-right .container-cells .cell-row{
    display: block;
    width: 100%;
    padding: 0 7px;
    border-bottom: 1px solid #fff;
}
.container-parallax .parallax-right .container-cells .cell-row:last-child{
    border-bottom: 0;
}
.container-parallax .parallax-right .container-cells .cell-row .cell-item{
    height: 100%;
    border-left: 1px solid #fff;
}
.container-parallax .parallax-right .container-cells .cell-row .cell-item:first-child{
    border-left: 0;
    padding-right: 40px;
}
.container-parallax .parallax-right .container-cells .cell-row .cell-item:last-of-type{
    padding-left: 40px;
}
.section-parallax .home-title-container{
    max-width: 1366px;
    margin: 0 auto;
}
.section-parallax .home-title{
    margin-top: 206px;
    margin-bottom: 90px;
}
#expertise{
    color: #FFF;
    margin: 50px 0 120px;
}
#expertise .parallax-right .container-cells{
    padding: 82px 35px 96px;
    height: 100%;
}
#expertise .wrapper{
    background-color: #ffc600;
    position: relative;
}
#expertise .parallax-left .separator{
    position: relative;
    left: -16px;
    margin-bottom: 18px;
}
#expertise .black{
    color: #000;
}
#expertise .parallax-left{
    background-color: #ffc600;
}
#expertise .parallax-right{
    background-color: #f4bb00;
}
#expertise .parallax-right .separator.top-deco{
    position: absolute;
    top: -7px;
    right: 50%;
    margin-right: -7px;
}
#expertise .parallax-right .separator.top-deco .losange{
    border: 1px solid #ffdd3e;
    box-sizing: content-box;
}
#expertise .parallax-right .cell-row{
    height: 310px;
}
#expertise .parallax-right .cell-item{
    float: left;
    width: 50%;
}
#expertise .parallax-right .cell-row:nth-child(1) .cell-item:nth-child(1) svg{ width: 112px; }
#expertise .parallax-right .cell-row:nth-child(1) .cell-item:nth-child(2) svg{ width: 81px; }
#expertise .parallax-right .cell-row:nth-child(2) .cell-item:nth-child(1) svg{ width: 109px; }
#expertise .parallax-right .cell-row:nth-child(2) .cell-item:nth-child(2) svg{ width: 166px; }
#expertise .parallax-right .cell-item .img-wrapper{
    text-align: center;
}
#expertise .parallax-right .cell-item p{
    text-align: left;
    font-size: 16px;
    font-weight: 300;
    line-height: 20px;
}
#expertise .parallax-right .cell-item p.title{
    font-weight: 700;
    font-size: 22px;
    padding-top: 38px;
    padding-bottom: 7px;
}

/* CLIENTS */

#customers{
    color: #FFF;
    margin: 50px 0 120px;
    position: relative;
}
#customers .wrapper{
    background-color: #ced919;
    position: relative;
}
#customers .parallax-left .separator{
    position: relative;
    left: -16px;
    margin-bottom: 18px;
}
#customers .black{
    color: #000;
}
#customers .parallax-left{
    background-color: #ced919;
}
#customers .parallax-right{
    width: 592px;
    right: 80px;
}
#customers .container-parallax .parallax-right .container-cells .cell-column{
    display: block;
    width: 180px;
    float: left;
}
#customers .container-parallax .parallax-right .container-cells .cell-column:nth-child(2){
    left: 206px;
}
#customers .container-parallax .parallax-right .container-cells .cell-column:nth-child(3){
    left: 412px;
}
#customers .parallax-right #container-customers-cell{
    padding: 50px 0;
    display: inline-block;
    width: 100%;
}
#customers .parallax-right .container-cells .cell-row{
    height: 200px;
    padding: 0;
}
#customers .parallax-right .separator.top-deco{
    position: absolute;
    top: -7px;
    right: 50%;
    margin-right: -7px;
}
#customers .parallax-right .separator.top-deco .losange{
    border: 1px solid #dae251;
    box-sizing: content-box;
}
#customers .parallax-right .cell-item{
    width: 100%;
    height: 180px;
    position: relative;
    background: #fff;
    margin: 25px 0;
}
#customers .parallax-right .cell-item img{
    max-width: 100%;
    height: auto;
}
#customers .parallax-right .cell-item:nth-last-child(-n+3){
    border-bottom: none;
}
#customers .parallax-right .cell-item .img-wrapper{
    text-align: center;
}
#customers .parallax-right .cell-item p.title{
    font-size: 18px;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 10px;
}
#customers .parallax-right .cell-item p{
    text-align: left;
    font-size: 16px;
    line-height: 20px;
}
#customers .hexagones-line{
    position: absolute;
    width: 100%;
    z-index: 0;
    left: 0;
    top: 0;
    margin-top: 163px;
}
#customers .hexagones-line svg path{
    fill: #d9d8d4;
}

/* AGENCE */

#agence{
    color: #FFF;
    margin: 50px 0 180px;
}
#agence .wrapper{
    background-color: #19c9d9;
    position: relative;
}
#agence .parallax-left .separator{
    position: relative;
    left: -16px;
    margin-bottom: 18px;
}
#agence .black{
    color: #000;
}
#agence .parallax-left{
    background-color: #19c9d9;
}
#agence .parallax-right{
    background-color: #02baca;
}
#agence .parallax-right .valign-table{
    position: relative;
    padding: 0 45px;
    overflow: hidden;
}
@-moz-document url-prefix() {
    #agence .parallax-right .valign-table{
        overflow-x :hidden;
        overflow-y: hidden;
    }
}
#agence .parallax-right .separator.top-deco{
    position: absolute;
    top: -7px;
    right: 50%;
    margin-right: -7px;
}
#agence .parallax-right .separator.top-deco .losange{
    border: 1px solid #40d2df;
    box-sizing: content-box;
}
#agence .parallax-right .text{
    font-weight: 100;
}
#agence .parallax-right .text .title{
    font-size: 32px;
    line-height: 38px;
    font-weight: 200;
    padding: 90px 0 70px;
    display: inline-block;
}
#agence .parallax-right .text .title span{
    display: inline-block;
    width: 80px;
}
#agence .parallax-right .text{
    font-size: 18px;
    line-height: 28px;
    font-weight: 400;
    padding-bottom: 80px;
    text-align: center;
}
#agence .parallax-right .text p{
    text-align: left;
    font-weight: 300;
}
#agence .parallax-right .hexagone-wrapper{
    text-align: center;
    padding-bottom: 90px;
    position: relative;
    z-index: 1;
}
#agence .parallax-right .hexagone-wrapper img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 60%;
}
#agence .hexagones-grid{
    position: absolute;
    z-index: 0;
    top: 55%;
    left: 0;
}
#agence .linked-in-button{
    display: inline-block;
    margin: 15px auto 0;
    text-decoration: none;
    border: 1px solid #FFF;
    color: #FFFFFF;
    padding: 5px 10px 5px 36px;
    background-color: #02baca;
    font-size: 15px;
    position: relative;
    font-weight: 300;
}
#agence .linked-in-button:hover{
    background-color: #19c9d9;
}
#agence .linked-in-button svg{
    position: absolute;
    height: 18px;
    top: 10px;
    left: 9px;
}

/* ACHIEVMENTS */

#realisations{
    position: relative;
}
#realisations .home-title{ margin-top: 132px; }
#achievements-grid-container{
    width: 100%;
    max-width: 1366px;
    text-align: center;
    margin: 0 auto;
}
#achievements-grid{
    display: inline-block;
    width: 100%;
    background: #fff;
    position: relative;
}
#achievements-grid .grid-container{
    display: inline-block;
    width: 100%;
}
#achievements-grid .achievement-element{
    width: 25%;
    float: left;
    position: relative;
    -webkit-transition: all 0.5s ease-out;
    -moz-transition: all 0.5s ease-out;
    -ms-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
    opacity: 1 !important;
    top: 0;
    overflow: hidden;
}
#achievements-grid .achievement_on_content{
    font-family: 'Work Sans', sans-serif;
    padding-right: 60px;
    font-size: 16px;
}
#grid-wrapper{
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;
}
#achievements-grid .achievement-element.borderlessTop{
    /*border-top: 0;*/
}
#achievements-grid .achievement-element.borderlessBot{
    border-bottom: 0;
}
#achievements-grid .achievement-element.borderlessLeft{
    /*border-left: 0;*/
}
#achievements-grid .achievement-element.borderlessRight{
    border-right: 0;
}
#achievements-grid .achievement-element .achievement-link{
    width: 100%;
    height: 100%;
    display: block;
    height: 100%;
    text-decoration: none;
}
#achievements-grid .achievement-element .achievement-image{
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    position: absolute;
    transform-origin: center;
    -webkit-transition: transform 0.3s ease-out;
    -moz-transition: transform 0.3s ease-out;
    -ms-transition: transform 0.3s ease-out;
    -o-transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
}
#achievements-grid .achievement-element:hover .achievement-image{
    transform: scale(1.15);
}
#achievements-grid .achievement-element .achievement-cartridge{
    position: absolute;
    bottom: 35px;
    left: 9px;
    background: #000;
    font: 22px 'Anaheim', sans-serif;
    color: #fff;
    height: 23px;
    line-height: 23px;
    padding: 0 4px;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
}
#achievements-grid .achievement-element .achievement-projecttype{
    position: absolute;
    bottom: 15px;
    left: 9px;
    font-size: 16px;
    color: #fff;
}
#achievements-grid .achievement-element .achievement-description{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition: opacity 0.3s ease-out;
    -ms-transition: opacity 0.3s ease-out;
    -o-transition: opacity 0.3s ease-out;
    transition: opacity 0.3s ease-out;
    padding: 15px 20px;
}
#achievements-grid .achievement-element .achievement-description .achievement-title{
    color: #fff;
    font: 22px 'Anaheim', sans-serif;
    line-height: 22px;
    margin-bottom: 9px;
}
#achievements-grid .achievement-element .achievement-description .achievement-content{
    color: #fff;
    font-size: 16px;
    font-weight: 100;
    line-height: 22px;
}
#achievements-grid .achievement-element .achievement-description .valign-cell{
    vertical-align: bottom;
}
#achievements-grid .achievement-element .achievement-description .valign-cell .achievement-description-content{
    position: relative;
    display: inline-block;
    width: 100%;
}
#achievements-grid .achievement-element .achievement-description .valign-cell .right{
    position: absolute;
    height: 100%;
    right: -3px;
    bottom: 0;
}
#achievements-grid .achievement-element .achievement-description-container{
    height: 100%;
    text-align: center;
}
#achievements-grid .achievement-element .achievement-description-content{
    display: inline-block;
    font: 24px 'Anaheim', sans-serif;
    line-height: 28px;
    color: #fff;
    text-align: left;
    position: relative;
}
#achievements-grid .achievement-element .achievement-description-content svg{
    position: absolute;
    right: 0;
    bottom: 0;
}
#achievements-grid .achievement-element .achievement-description-content strong{
    font-family: 'Work Sans', sans-serif;
    font-weight: 700;
}
#achievements-grid .achievement-element .achievement-linker{
    position: absolute;
    width: 15px;
    height: 15px;
    transform: rotateZ(45deg);
    top: 0;
    left: 0;
    background: #fff;
    border: 1px solid;
    z-index: 2;
}

/* Setting achievements individually */

#achievements-grid .achievement-description svg.ipad{
    width: 46px;
    height: 66px;
}
#achievements-grid .achievement-description svg.multiscreen{
    width: 77px;
    height: 61px;
}
#achievements-grid .achievement-description svg.qrcode{
    width: 46px;
    height: 46px;
}
#achievements-grid .achievement-description svg.desktop{
    width: 66px;
    height: 53px;
}
#achievements-grid #achievement-bouygues-description .achievement-description-content{
    padding-right: 79px;
}
#achievements-grid #achievement-bouygues-description svg{
    width: 62px;
    height: 84px;
    top: 19px;
    right: 0;
}
#achievements-grid #achievement-bouygues-description .achievement-linker{
    top: 50%;
    left: -8px;
    margin-top: -8px;
}
#achievements-grid #achievement-libella-description svg{
    width: 66px;
    height: 163px;
    left: 0;
    top: 0;
}

#achievements-grid #achievement-libella-description .achievement-linker{
    right: -8px;
    left: inherit;
    top: 50%;
    margin-top: -8px;
}
#achievements-grid #achievement-sabre-france-description .achievement-description-content{
    padding-top: 0;
}
.achievement-description-content-bloc {
    text-align: center;
}

#achievements-grid #achievement-sabre-france-description svg{
    height: 40px;
    width: 47px;
    margin-left: -28px;
    top: -10px;
    left: 50%;
}
#achievements-grid #achievement-sabre-france-description .achievement-linker{
    top: -8px;
    left: 50%;
    margin-left: -8px;
}
#achievements-grid #achievement-tf1-description svg{
    width: 83px;
    height: 40px;
    top: 0;
    left: 50%;
    margin-left: -42px;
}
#achievements-grid #achievement-tf1-description .achievement-description-content{
    padding-top: 50px;
}
#achievements-grid #achievement-tf1-description .achievement-linker{
    right: -8px;
    left: inherit;
    top: 50%;
    margin-top: -8px;
}
#grid-pattern svg path{
    fill: transparent;
    stroke: rgba(255, 255, 255, 0.6);
    stroke-width: 1px;
}

/* CONTACT */

.form-el{
    display: inline-block;
    width: 100%;
}
.form-el label{
    display: block;
    padding: 5px 0;
    font-weight: 600;
}
.form-el .form-input{
    display: block;
    width: 100%;
    height: 25px;
    line-height: 25px;
    padding: 5px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}
.form-el textarea.form-input{
    line-height: 20px;
    height: 75px;
}
button[type="submit"].form-el{
    width: auto;
    height: 25px;
}
.form-el .form-input.ng-invalid.ng-dirty{
    background: rgba(255, 0, 0, 0.3);
}

/* PORTFOLIO */

.directive-portfolio .article{
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.directive-portfolio .article:after{
    content: "";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    height: 1px;
    background: #ddd;
}
.directive-portfolio .article:last-child:after{
    display: none;
}
.directive-portfolio .article h2{
    font-size: 20px;
}
.directive-portfolio .article .article-title-link{
    text-decoration: none;
    color: #555
}
.directive-portfolio .article .article-date{
    padding: 5px 0 10px;
    font-style: italic;
}
.directive-portfolio .readmore{
    text-decoration: underline;
    padding-top: 15px;
    color: #555;
}
.single-article .article-image{
    max-width: 40%;
    padding-right: 30px;
}
.single-article .article-content{
    max-width: 60%;
}
.directive-portfolio .projects{ padding: 80px 0; margin: 0 auto; max-width: 1366px; }

/* #medela20ans */
#medela20ans{ font-family: "Work sans", sans-serif; background-color: #efeeeb; }
#medela20ans .header{ font-size: 70px; line-height: 70px; color: #FFF; }
#medela20ans .header .img-wrapper{ height: 625px; position: relative; }
#medela20ans .header img{ display: block; max-width: 100%; width: 100%; height: auto; position: absolute; top: 0; }
#medela20ans .header .wrapper{ max-width: 1266px; position: relative; }
#medela20ans .header h1{ position: absolute; bottom: 150px; left: 70px; font-weight: 900; }
#medela20ans .header .presentation{ position: relative; font: 18px/28px "Work sans", sans-serif; font-weight: 400; color: #FFF; }
#medela20ans .header .presentation .mask{ position: absolute; z-index: 0; left: 0; top: 0; width: 100%; height: 100%; }
#medela20ans .header .presentation .mask .left{ background-color: #FFF; }
#medela20ans .header .presentation .mask .right{ background-color: #ffd958; }
#medela20ans .header .presentation .mask .left,
#medela20ans .header .presentation .mask .right{ width: 50%; height: 100%; display: inline-block; }
#medela20ans .header .presentation svg{ height: 35px; min-width: 180px; margin-bottom: 20px; }
#medela20ans .header .presentation .wrapper{ max-width: 975px; margin: 0 auto; z-index: 0; position: relative; }
#medela20ans .header .presentation .wrapper .left{ padding: 100px 100px 0 0; text-align: right; }
#medela20ans .header .presentation .wrapper .left p{ font-size: 18px; line-height: 34px; }
#medela20ans .header .presentation .wrapper .left p.purpose{ color: #000; }
#medela20ans .header .presentation .wrapper .left p.link{ margin-bottom: 26px; font-size: 0; }
#medela20ans .header .presentation .wrapper .left p.link a{ text-decoration: none; font-size: 0; color: #ee6200; font-weight: 600; }
#medela20ans .header .presentation .wrapper .left .hashtags{ max-width: 250px; }
#medela20ans .header .presentation .wrapper .left .hashtags p{ display: inline-block; background-color: #ffd958; font-size: 15px; line-height: 15px; font-weight: 500; padding: 1px 4px 2px; }
#medela20ans .header .presentation .wrapper .right{ max-width: 620px; padding: 100px 0 80px 100px; background-color: #ffd958; }
#medela20ans .header .presentation .wrapper .right p{ margin-bottom: 20px; }
#medela20ans .header .presentation .wrapper .right p:last-of-type{ margin-bottom: 0; }
#medela20ans .header .presentation .wrapper .right p b{ font-weight: 600; }
#medela20ans .capture-parallax{ text-align: center; padding: 160px 0 0; margin: 0 auto -180px; position: relative; }
#medela20ans .capture-parallax p{ font-size: 14px; line-height: 28px; color: #8b8883; font-weight: 500; }
#medela20ans .capture-parallax .motif{ background: url("../img/portfolio/medela20ans/motif-medela-demi.png") repeat top center; background-size: auto; width: 100%; height: 350px; position: absolute; top: 50%; margin-top: -200px; z-index: 0; }
#medela20ans .capture-parallax .capture{ position: relative; right: auto; z-index: 1; width: 100%; }
#medela20ans .content .wrapper{ max-width: 1024px; margin: 0 auto; }
#medela20ans .content .floating{ text-align: center; max-width: 450px; margin: 0 auto 160px; }
#medela20ans .content .floating p{ font-size: 16px; line-height: 28px; color: #000; }
#medela20ans .content .illustration{ margin-left: 55px; text-align: center; display: inline-block; opacity: 0; }
#medela20ans .content .illustration p{ font-size: 14px; line-height: 28px; color: #8b8883; font-weight: 500; }
#medela20ans .content .hexa-text{ text-align: left; opacity: 0; float: right; display: inline-block; margin-top: 140px; position: relative; }
#medela20ans .content .hexa-text .text{ position: absolute; padding: 140px 50px 0 55px; top: 0; }
#medela20ans .content .hexa-text .text p{ font-size: 24px; line-height: 28px; color: #f17e0d; font-weight: 800; }
#medela20ans .content .hexa-bg{ position: relative; opacity: 0; text-align: center; left: -40px; margin-bottom: 160px; }
#medela20ans .content .hexa-bg p{ position: relative; top: -50px; font-size: 14px; line-height: 28px; color: #8b8883; font-weight: 500;}
#medela20ans .content .video{ margin-bottom: 160px; position: relative; text-align: center; }
#medela20ans .content .video .motif{ background: url("../img/portfolio/medela20ans/motif-medela-demi.png") repeat top center; background-size: auto; width: 100%; height: 350px; position: absolute; top: 50%; margin-top: -180px; z-index: 0; }
#medela20ans .content .video video{ position: relative; z-index: 1; max-width: 710px; }
#medela20ans .content .motif-triptique{ text-align: center; margin-bottom: 100px; }
#medela20ans .content .motif-triptique svg{ width: 40px; min-height: 13px; }
#medela20ans .content .description{ margin-bottom: 180px; position: relative; }
#medela20ans .content .description .bandeau-parallax{ height: 285px; width: 100%; z-index: 0; left: 0; bottom: 0; position: absolute; background-color: #ffdf66; }
#medela20ans .description .left,
#medela20ans .description .right{ display: inline-block; width: 50%; position: relative; z-index: 1; }
#medela20ans .description .left h3{ font-size: 36px; line-height: 42px; font-weight: 800; max-width: 80%; margin-bottom: 30px; }
#medela20ans .description .left svg{ width: 40px; min-height: 13px; margin-bottom: 30px; }
#medela20ans .description .left svg path{ fill: #FFF; }
#medela20ans .description .left p{ font-size: 16px; line-height: 28px; font-family: "Karla", sans-serif; max-width: 78%; margin-bottom: 30px; }
#medela20ans .description .left .socials{ margin-bottom: 65px; }
#medela20ans .description .left .socials a{ text-decoration: none; display: inline-block; margin-right: 12px; }
#medela20ans .description .left .socials img{ display: inline-block; height: auto; width: 100%; }
#medela20ans .description .right{ padding-top: 90px; padding-left: 20px; }
#medela20ans .description .right img{ margin-bottom: 85px; }
#medela20ans .description .right p{ margin-left: 10px; font-size: 28px; line-height: 38px; color: #ef7d08; font-weight: 600; }
#medela20ans .description .right p span{ background-color: #FFF; padding: 2px 8px; }
#medela20ans .description .right.conclusion p{ opacity: 0; }
#medela20ans .project-footer{ text-align: center; }
#medela20ans .project-footer .visuel{ margin-bottom: 70px; opacity: 0; position: relative; top: 0; }
#medela20ans .project-footer .visuel p{ font-size: 14px; line-height: 28px; color: #8b8883; font-weight: 500;position: relative; top: -60px; }
#medela20ans .project-footer > svg{ margin-bottom: 30px; }
#medela20ans .project-footer h3{ font-size: 24px; line-height: 32px; font-weight: 800; }
#medela20ans .project-footer p{ font-size: 15px; line-height: 24px; font-weight: 300; }
#medela20ans .project-footer p:first-of-type{ margin-top: 10px; }
#medela20ans .project-footer p:last-of-type{ margin-bottom: 18px; }
/*#medela20ans .project-footer .contact-button{ background-color: #ff8980; color: #FFF; }*/
#medela20ans .project-footer .contact-button{ font-size: 14px; line-height: 26px; font-weight: 600; padding: 0 7px; color: #000; text-transform: uppercase; position: relative; display: inline-block; margin: 18px auto 60px; }
#medela20ans .project-footer .contact-button span{ position: absolute; top: -15px; left: calc(50% - 3px); display: block; }
#medela20ans .project-footer .contact-button span:before{ content: ""; height: 1px; width: 7px; background-color: #000; position: absolute; top: 0; transform: rotate(-45deg); left: 2px; }
#medela20ans .project-footer .contact-button span:after{ content: ""; height: 1px; width: 7px; background-color: #000; position: absolute; top: 0; left: -2px; transform: rotate(45deg); }
#medela20ans .footer-nav{ background-color: #FFF; height: 150px; text-align: center; }
#medela20ans .footer-nav a{ color: inherit; text-decoration: none; text-transform: uppercase; display: table-cell; vertical-align: middle; }
#medela20ans .footer-nav .middle{ background-color: #b6b3ab; width: 325px; display: inline-block; height: 100%; }
#medela20ans .footer-nav .middle a p{ color: #FFF; font-size: 14px; line-height: 20px; background-color: #000; display: inline-block; text-transform: uppercase; padding: 2px 6px; font-weight: 600; position: relative; }
#medela20ans .footer-nav .middle a:hover p:after{ content: ''; width: 100%; height: 3px; background-color: #ff8980; display: inline-block; position: absolute; left: 0; bottom: -2px; }
#medela20ans .footer-nav .side{ width: 100%; max-width: calc(50% - 162.5px); display: inline-block; height: 100%; }
#medela20ans .footer-nav .side a{ color: #8b8883; font-size: 14px; line-height: 26px; font-weight: 700; }
#medela20ans .footer-nav p{ position: relative; display: inline-block; }
#medela20ans .footer-nav p span{ position: absolute; top: -15px; left: calc(50% - 3px); display: block; }
#medela20ans .footer-nav p span:before{ content: ""; height: 1px; width: 7px; background-color: #8b8883; position: absolute; top: 0; transform: rotate(-45deg); left: 2px; }
#medela20ans .footer-nav p span:after{ content: ""; height: 1px; width: 7px; background-color: #8b8883; position: absolute; top: 0; left: -2px; transform: rotate(45deg); }
#medela20ans .footer-nav .middle p span:before,
#medela20ans .footer-nav .middle p span:after{ background-color: #FFF; }
#medela20ans .footer-nav .side.left p span{ top: 10px; left: -25px; transform: rotate(90deg); }
#medela20ans .footer-nav .side.right p span{ top: 16px; left: auto; right: -25px; transform: rotate(-90deg); }
/* AGENCE */

/* Moving tile */

.js-3dheader{
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
    margin: 50px 0;
}
.small-header{
    height: 573px;
    width: 100%;
    position: relative;
    margin-bottom: 0px;
    margin-top: 54px;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
}
.small-header--wrapper{
    height: 100%;
    width: 100%;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-perspective: 800px;
    -webkit-perspective: 800px;
    perspective: 800px;
    -moz-transform-origin: 50% 50% 0;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}
.small-header--background{
    height: 100%;
    top: 0;
    left: 0px;
    right: 0px;
    position: absolute;
    z-index: 0;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.small-header--background-image{
    background-image: url(../img/agence/tile.jpg);
    background-size: cover;
    height: 100%;
    top: 0;
    left: 0px;
    right: 0px;
    position: absolute;
    z-index: 0;
    background-color: rgba(0, 0, 0, 0.1);
}
.small-header--title{
    z-index: 9;
    position: relative;
    width: 100%;
    margin-left: -20px;
    -moz-transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    -ms-transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    -webkit-transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -moz-transform-origin: 50% 50% 0;
    -webkit-transform-origin: 50% 50% 0;
    transform-origin: 50% 50% 0;
}
.js-3dheader .js-title-anim{
    font-size: 80px;
    font-weight: 600;
    font-style: normal;
    font-stretch: normal;
    line-height: 0.87;
    letter-spacing: 0.9px;
    color: #000000;
    margin-top: 7px;
    transform: translateY(0) scale(1);
    transition: transform 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0.3s, opacity 0.6s cubic-bezier(0.6, 0.2, 0.1, 1) 0.3s;
}
.small-header--portraits{
    display: inline-block;
    width: 700px;
    -moz-transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    -ms-transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    -webkit-transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    transform: translateZ(200px) translateY(100px) scale(0.5, 0.5);
    margin-left: 150px;
}
.portrait{
    width: 200px;
    float: left;
    margin-left: 50px;
}
.portrait:first-child{
    margin-left: 0;
}
.portrait img{
    width: 100%;
}
.cube-wrapper{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}
.cube{
    position: relative;
    width: 100%;
    transform-style: preserve-3d;
}
.cube div{
    position: absolute;
    width: 100%;
    height: 60px;
    background: #fff;
    -webkit-transition: background 0.5s ease-out;
    -moz-transition: background 0.5s ease-out;
    -ms-transition: background 0.5s ease-out;
    -o-transition: background 0.5s ease-out;
    transition: background 0.5s ease-out;
}
.cube .top{
    transform: rotateX(-270deg) translateY(-30px);
    transform-origin: top center;
}
.cube .bottom{
    transform: rotateX(-90deg) translateY(30px);
    transform-origin: bottom center;
}
.cube .front{
    transform: translateZ(30px);
}

/* FOOTER */

#footer{
    position: relative;
    font-family: 'Work Sans', sans-serif;
    font-weight: 600;
    background-color: #000000;
    font-size: 28px;
    line-height: 20px;
    color: #FFF;
    -webkit-transition: background .4s ease-out;
    -moz-transition: background .4s ease-out;
    -ms-transition: background .4s ease-out;
    -o-transition: background .4s ease-out;
    transition: background .4s ease-out;
}
#footer a{
    color: #ffffff;
    text-decoration: none;
}
#footer a, #footer a *{
    -webkit-transition: color .2s ease-out;
    -moz-transition: color .2s ease-out;
    -ms-transition: color .2s ease-out;
    -o-transition: color .2s ease-out;
    transition: color .2s ease-out;
}
#footer a svg path{
    -webkit-transition: fill .2s ease-out;
    -moz-transition: fill .2s ease-out;
    -ms-transition: fill .2s ease-out;
    -o-transition: fill .2s ease-out;
    transition: fill .2s ease-out;
}
#footer a:hover{
    color: #ff8980;
}
#footer a:hover svg path{
    fill: #ff8980 !important;
}
#footer .block{
    position: relative;
    display: inline-block;
    float: left;
    text-align: center;
}
#footer .blocks-container{
    width: 100%;
    max-width: 1310px;
    height: 186px;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}
#footer .blocks-list{
    display: inline-block;
}
#footer .block, #footer .block .valign-table{
    min-height: 186px;
}
@-moz-document url-prefix() {

    #footer .block, #footer .block .valign-table{
        min-height: 186px;
        height: 186px;
    }
}
#footer .block p{
    display: inline-block;
}
#footer > .separator{
    position: absolute;
    width: 100%;
    text-align: center;
    top: -13px;
}
#footer > .separator .losange{
    box-sizing: content-box;
    border: 1px solid #ff8980;
}
#footer .block .separator{
    margin-top: -6px;
}
#footer .block .separator .losange{
    background-color: #ff8980;
    -webkit-transition: background-color .2s ease-out;
    -moz-transition: background-color .2s ease-out;
    -ms-transition: background-color .2s ease-out;
    -o-transition: background-color .2s ease-out;
    transition: background-color .2s ease-out;
}
#footer.onLink .block .separator .losange{
    background-color: #fff;
}
#footer .blocks-list .block:nth-child(1){ width: 142px; }
#footer .blocks-list .block:nth-child(2){ width: 263px; }
#footer .blocks-list .block:nth-child(3){ width: 100px; }
#footer .blocks-list .block:nth-child(4){ width: 196px; }
#footer .blocks-list .block:nth-child(5){ width: 100px; }
#footer .blocks-list .block:nth-child(6){ width: 236px; }
#footer .blocks-list .block:nth-child(7){ width: 100px; }
#footer .blocks-list .block:nth-child(2){
    font-weight: 300;
    font-size: 16px;
    line-height: 30px;
    margin-left: 83px;
}
#footer .blocks-list .block:nth-child(2) img{
    padding-right: 5px;
    position: relative;
    top: 3px;
}
#footer .blocks-list .block:nth-child(7){
    margin-left: 83px;
}
#footer .blocks-list .block:nth-child(7) svg{
    width: 26px;
}
#footer .blocks-list .block:nth-child(7) a{
    float: left;
}
#footer .blocks-list .block:nth-child(7) a{
    margin-left: 10px;
}
#footer .blocks-list .block:nth-child(7) a:first-child{
    margin-left: 0;
}
#footer .blocks-list .block-separator{
    text-align: center;
    width: 95px;
}
#footer .last-links{
    font-size: 12px;
    position: absolute;
    bottom: 10px;
    left: 0;
    text-align: center;
    display: block;
    width: 100%;
}
#footer .last-links a, #footer .last-links p{
    font-weight: 200;
    display: inline;
    margin: 0 4px;
}
.portfolio .home-title{ z-index: 1; }
.portfolio .agence-hexagones-containers{ z-index: 0; max-height: 692px; left: auto; right: calc(50% - 956px) !important; margin-right: 0; width: 1920px !important; }
.portfolio #hexagones-stripes svg{ width: 1920px !important; }
.portfolio #mask-pattern-stripe svg{ width: 1920px !important; }
.portfolio #mask-pattern-stripe svg path:nth-child(2){ display: none; }
.portfolio #achievements{ overflow: hidden; position: relative; }
.portfolio .hexagones-stripe{ right: calc(50% - 956px) !important; /*right: 0 !important;*/ width: 100%; margin-right: 0; }

.portfolio #hexagones-stripe{ width: 1920px !important; }

/*.portfolio .hexagones-stripe,
.portfolio #mask-pattern-stripe,
.portfolio #mask-pattern-stripe svg{ width: 100% !important; }*/
.portfolio #stripe-pattern svg path{ stroke: #d7d5d0; }
.portfolio #mask-pattern-stripe svg path{ fill: #f7f6f2 !important; }
.portfolio .introduction{ max-width: 600px; margin-bottom: 100px; text-align: left; margin-left: 50px; position: relative; z-index: 1; }
.portfolio .introduction p{ font-size: 16px; line-height: 25px; color: #626058; font-weight: 300; }
.portfolio .introduction p:last-of-type{ margin-top: 12px; }
.portfolio .introduction p b{ font-weight: 600; }
.portfolio .introduction p a{ color: inherit; }
.portfolio .projects{ max-width: 560px; margin: 0 auto; }
.portfolio .projects .separator{ margin-bottom: 35px; }
.portfolio .projects .separator svg{ max-width: 42px; max-height: 20px; }
.portfolio .projects .project{ margin-bottom: 52px; }
.portfolio .projects .project h2{ position: relative; }
.portfolio .projects .project h2:before{ content: ''; width: 20px; height: 2px; background-color: #ff8980; display: inline-block; position: absolute; top: 14px; left: -45px; }
.portfolio .projects .project h2 a{ display: inline-block; font-size: 20px; line-height: 25px; font-weight: 800; color: #000; text-decoration: none; margin-bottom: 10px; }
.portfolio .projects .project p{ font-size: 14px; line-height: 22px; color: #626058; margin-bottom: 10px; }
.portfolio .projects .project p a{ color: inherit; }
.portfolio .projects .project a.see-more{ display: inline-block; color: #FFF; text-transform: uppercase; text-decoration: none; font-weight: 600; font-size: 14px; line-height: 14px; padding: 5px 8px; background-color: #b6b3ab; }
.portfolio .projects .project a.see-more:hover{ background-color: #d4d1ca; }

.portfolio .center-footer{ text-align: center; padding: 45px 25px; background-color: #FFF; }
.portfolio .center-footer h3{ font-size: 24px; line-height: 32px; font-weight: 800; }
.portfolio .center-footer p{ font-size: 15px; line-height: 24px; font-weight: 300; }
.portfolio .center-footer p:first-of-type{ margin-top: 10px; }
.portfolio .center-footer p:last-of-type{ margin-bottom: 18px; }
/*.portfolio .center-footer .contact-button{ background-color: #ff8980; color: #FFF; }*/
.portfolio .center-footer .contact-button{ font-size: 14px; line-height: 26px; font-weight: 600; padding: 0 7px; color: #000; text-transform: uppercase; position: relative; display: inline-block; margin: 18px auto 0; }
.portfolio .center-footer .contact-button span{ position: absolute; top: -15px; left: calc(50% - 3px); display: block; }
.portfolio .center-footer .contact-button span:before{ content: ""; height: 1px; width: 7px; background-color: #000; position: absolute; top: 0; transform: rotate(-45deg); left: 2px; }
.portfolio .center-footer .contact-button span:after{ content: ""; height: 1px; width: 7px; background-color: #000; position: absolute; top: 0; left: -2px; transform: rotate(45deg); }
#mentions-legales{ margin: 30px 25px; }
#mentions-legales .alinea{ padding-left: 25px; }
#mentions-legales p.bold{ font-weight: 600; }
#mentions-legales .cookie-table{ border: 1px solid #000; }
#mentions-legales .cookie-table tr{ border-top: 1px solid #000; }
#mentions-legales .cookie-table tr.alternate{ background-color: #eaeaea; }
#mentions-legales .cookie-table tr:first-of-type{ border-top: none; }
#mentions-legales .cookie-table tr:first-of-type td{ border-top: none;}
#mentions-legales .cookie-table td{ border-left: 1px solid #000; border-top: 1px solid #000; padding: 6px; margin: 0; }
#mentions-legales .cookie-table td:first-of-type{ border-left: none; }