.slick-slider
{
position: relative;
display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list
{
position: relative;
display: block;
overflow: hidden;
margin: 0;
padding: 0;
}
.slick-list:focus
{
outline: none;
}
.slick-list.dragging
{
cursor: pointer;
cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track
{
position: relative;
top: 0;
left: 0;
display: block;
margin-left: auto;
margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
display: table;
content: '';
}
.slick-track:after
{
clear: both;
}
.slick-loading .slick-track
{
visibility: hidden;
}
.slick-slide
{
display: none;
float: left;
height: 100%;
min-height: 1px;
}
[dir='rtl'] .slick-slide
{
float: right;
}
.slick-slide img
{
display: block;
}
.slick-slide.slick-loading img
{
display: none;
}
.slick-slide.dragging img
{
pointer-events: none;
}
.slick-initialized .slick-slide
{
display: block;
}
.slick-loading .slick-slide
{
visibility: hidden;
}
.slick-vertical .slick-slide
{
display: block;
height: auto;
border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
display: none;
}html {
color: #222;
font-size: 1em;
line-height: 1.4;
} ::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
} hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
} audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
} fieldset {
border: 0;
margin: 0;
padding: 0;
} textarea {
resize: vertical;
} *{
font-family: proxima-nova,sans-serif;
font-weight: 400;
font-style: normal;
}
p{
font-size: 1.125em;
color: #2a2a2a;
}
body{
position: relative;
}
.logo.white{
fill:#FFF;
z-index: 999;
position: relative;
}
.logo.white .cls-1{
filter: #FFF!important;
}
.header-container{
padding: 1em;
display: flex;
justify-content: space-between;
}
header h1{
margin: 0;
}
header .menu ul{
display: flex;
}
header .menu li{
display: block;
}
header .menu a{
padding: 1em 0;
margin: 0 1em;
text-decoration: none;
color:  #2a2a2a;
font-weight:bold;
letter-spacing: 1px;
font-size:14px;
text-transform: uppercase;
position: relative;
}
header .menu a:after{
content: "";
width: 0;
position: absolute;
height: 10px;
background: #E5CCAF;
bottom: 40%;
left: 0;
transition: 500ms;
z-index: -1;
}
header .menu a:hover:after{
width: 100%;
transition: 500ms;
}
header .menu .current-menu-item a:after{
width: 100%;
}
header .menu .current-menu-item a{
font-family: kepler-std, serif;
font-weight: 400;
font-style: italic;
text-transform: lowercase;
font-size: 1.3em;
position: relative;
bottom: 4px;
}
header .menu > li:last-child a{
background-color: #000;
color: #FFF;
margin-left: 1em;
padding-left: 1.5em!important;
padding-right: 1.5em!important;
font-family: proxima-nova,sans-serif!important;
font-size: 14px!important;
font-style: normal!important;
text-transform: uppercase;
font-weight:bold;
bottom: 0!important;
}
header .menu li:last-child a:after{
background-color: transparent;
}
header.home h1 svg{
display: none;
}
.container{
max-width: 1240px;
}
.h1{
font-weight: 700;
font-size: 3em;
line-height: 1em;
font-family: proxima-nova,sans-serif;
color: #000;
margin-top: 0;
}
.h1 p{
margin: 0;
}
.h1 em{
font-family: kepler-std, serif;
font-weight: 400;
font-style: italic;
font-size: 1.10em;
position: relative;
} 
.h1 em:after{
position: absolute;
bottom: 20px;
content: "";
left: 0;
right: 0;
background-color: #FCFAB9;
z-index: -1;
height: 15px;
transform: rotate(-2deg);
}
.dark .h1 em:after{
opacity: .5;
}
img{
border-radius:30px;
}
.project__image img{
border-radius:0;
}
.dark .h1{
color: #F3F3F3;
}
.hero{
align-items: center;
text-align: center;
padding: 6em 0em 4em;
}
.hero .container{
max-width:800px;
}
.hero img{ 
width: 100%;
height: auto;
margin-bottom: 1em;
display: block;
}
.hero h1{
max-width: 794px;
font-weight: 500;
font-size: 2.5em;
line-height: 1.2em;
margin: 0 auto;
text-align: center;
display: block;
}
.hero h1 span{
position: relative;
display: inline-block;
font-family: kepler-std, serif;
font-weight: 400;
font-style: italic;
font-size: 1.2em;
}
.hero h1 span:before{
content: "";
display: block;
background-color: #ffe664;
width: 100%;
z-index: -1;
position: absolute;
left: 0;
top:35px;
bottom: 25px;
}
.hero h1 svg{
display: block;
margin: 0 auto;
width: 8em;
margin-bottom: 1em;
}
section{
padding: 6em 0;
}
.service--link{
padding: 1em;
border:1px solid #000;
margin-bottom: 30px;
transition: 300ms;
display: block;
border-radius: 30px;
cursor: pointer;
}
.service--link:hover{
border-color: #86d1d1;
border-width: 2px;
transition: 500ms;
}
.tiles{
margin-bottom: 2em;
text-align: center;
}
.tiles ul{
text-align: left;
}
.tiles img{
width: 40%;
height: auto;
margin: 0 auto;
display: block;
}
.tiles__content{
padding: 0 1em;
}
.tiles--img img{
width: 60%;
}
.tiles__content p{
margin: 0;
}
.dark .tiles ul{
color: #FFF;
}
.encadre .tiles{
border: 1px solid #FFF;
border-radius: 30px;
}
.tiles h2{
font-size:2em;
margin: 0;
color: #000;
font-weight: 700;
margin-bottom: 0.5em;
}
.dark .tiles h2 {
color: #FCFAB9;
text-transform: uppercase;
letter-spacing: 1px;
text-align: center;
font-size: 1.75em;
}
.dark .tiles{
color: #000;
background-color: transparent;
}
.services a{
text-decoration: none;
color: #000;
position: relative;
bottom: 0;
transition: 500ms;
cursor: pointer;
}
.services a:hover{
bottom: 5px;
transition: 500ms;
}
.tuile{
display: block;
margin-bottom: 1em;
display: flex;
align-items: center;
padding: 1em;
font-size: 1.125em;
background: #FFF;
color: #000;
border-radius: 30px;
box-shadow: 1px 1px 23px 1px rgba(0,0,0,0.17);
-webkit-box-shadow: 1px 1px 23px 1px rgba(0,0,0,0.17);
-moz-box-shadow: 1px 1px 23px 1px rgba(0,0,0,0.17);
}
.tuile svg{
margin-right: 1em;
width: 40px;
}
.tuile p{
margin: 0.3em;;
}
.tuile a{
color: #000;
font-weight: bold;
text-transform: uppercase;
font-size: 0.875rem;
}
.dark{
background-color:  #000;
color: #FFF;
}
.call h1{
display: block;
margin: 0 auto;
max-width: 810px;
text-align: center;
font-weight: 700;
margin-bottom: 2rem;
}
.call .btn{
text-align: center;
display: block;
margin: 0 auto;
}
.call__text{
font-size: 1.35em;
}
.button {
position: relative;
outline: none;
text-decoration: none;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
text-transform: uppercase;
height: 60px;
width: 260px;
opacity: 1;
letter-spacing: 1px;
color: #000;
margin: 0 auto;
background-color: #EDCDC2;
font-size: 0.9rem;
}
.button span {
color: #000;
font-size: 0.875em;
font-weight: 700;
letter-spacing: 0.7px;
}
.button:hover {
animation: rotat 0.7s ease-in-out both;
}
.button:hover span {
animation: storm 0.7s ease-in-out both;
animation-delay: 0.06s;
}
.dark .button{
color: #FFF;
border
}
@keyframes rotat {
0% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
25% {
transform: rotate(3deg) translate3d(0, 0, 0);
}
50% {
transform: rotate(-3deg) translate3d(0, 0, 0);
}
75% {
transform: rotate(1deg) translate3d(0, 0, 0);
}
100% {
transform: rotate(0deg) translate3d(0, 0, 0);
}
}
@keyframes storm {
0% {
transform: translate3d(0, 0, 0) translateZ(0);
}
25% {
transform: translate3d(4px, 0, 0) translateZ(0);
}
50% {
transform: translate3d(-3px, 0, 0) translateZ(0);
}
75% {
transform: translate3d(2px, 0, 0) translateZ(0);
}
100% {
transform: translate3d(0, 0, 0) translateZ(0);
}
}
.row{
align-items: center;
}
.text p{
font-size: 1.75em;
}
.text{
max-width: 900px;
margin: 0 auto;
}
.gd .row{
align-content: center;
}
.gd a{
color: #000;
font-weight: bold;
}
.gd .button{
margin:0;
}
.gd img{
width: 100%;
height: auto;
}
.imagefull img{
width: 100%;
height: auto;
}
.big-image{
padding: 6em 0;
}
.big-image img{
width: 100%;
height: auto;
border-radius: 30px;
}
.grande_image__text{
text-align: center;
max-width: 841px;
margin: 0 auto;
}
#cursor {
position: absolute;
border: solid 1px #E1A306;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
transition: transform 300ms;
z-index: 99999999999;
}
#cursor.active {
background-color: #ECE96F;
border-color: #ECE96F;
transform: scale(8);
opacity: 1;
transition: transform 600ms;
mix-blend-mode: exclusion;
}
#cursor.play{
width: 0;
height: 0;
border-style: solid;
border-width: 75px 0 75px 120px;
border-color: transparent transparent transparent #ECE96F;
border-radius: 0;
transition: border-width 600ms;
opacity: 1;
transition: width 600ms; 	  
mix-blend-mode: exclusion;
transform: translateX(-38px) translateY(-60px);
}
.projectthumb{
padding: 3em;
transition: 500ms;
}
.projectthumb img{
width: 100%;
height: auto;
transition: 500ms;
border-radius:30px;
}
.projectthumb a{
text-decoration: none;
color: #000;
bottom: 0;
position: relative;
transition: 500ms;
display: block;
overflow: hidden;
}
.projectthumb a:hover{
transition: 2500ms;
}
.projectthumb a:hover img{
transition: 2500ms;
}
.projectthumb h2{
font-size: 2em;
}
.project{
padding: 0;
}
.project h1{
font-size:5em;
margin: 0;
}
.project__image img{
width: 100%;
height: auto;	
}
.link {
width: 10rem;
height: 10rem;
display: inline-block;
font: 300 1.55rem/1.4 "Josefin Sans";
text-transform: uppercase;
letter-spacing: 0.1175em;
word-spacing: 0.3em;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.link__svg {
width: 100%;
height: auto;
transform-box: fill-box;
fill: #FFF;
stroke: #FFF;
stroke-width: 0.05em;
stroke-linecap: round;
stroke-linejoin: round;
}
.link__cloud {
transform-origin: 50% 50%;
-webkit-animation: rotate normal infinite 60s linear;
animation: rotate normal infinite 60s linear;
}
.link__face, .link__arrow {
transform-origin: 50% 50%;
transition: transform 0.15s cubic-bezier(0.32, 0, 0.67, 0);
}
.link:hover .link__face, .link:hover .link__arrow {
transform: scale(1.1);
transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.link__arrow {
stroke-width: 0.075em;
}
.link__text {
-webkit-animation: rotateReverse normal infinite 20s linear;
animation: rotateReverse normal infinite 20s linear;
transform-origin: 50% 50%;
}
.link:hover .link__text {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.link--alt {
font-size: 1.15rem;
letter-spacing: 0;
word-spacing: 0;
}
@-webkit-keyframes rotate {
to {
transform: rotate(360deg);
}
}
@keyframes rotate {
to {
transform: rotate(360deg);
}
}
@-webkit-keyframes rotateReverse {
to {
transform: rotate(-360deg);
}
}
@keyframes rotateReverse {
to {
transform: rotate(-360deg);
}
}
.burger {
position: absolute;
top: 2rem;
right: 2rem;
width: 35px;
height: 34px;
transition: .3s ease-in-out;
z-index: 9999999999999;
display: none;
}
.burger span{
position: absolute;
height: 2px;
border-radius: 0;
width: 100%;
background: #3d4146;
top: 0;
transition: transform .2s ease-in-out, opacity .2s ease-in-out;
}
.burger span:nth-child(1){
top: -5px;
}
.burger span:nth-child(2),
.burger span:nth-child(3){
top: 5px;
}
.burger span:nth-child(4){
top: 15px;
}
.burger.active span{
background: #fff;
}
.burger.active span:nth-child(1),
.burger.active span:nth-child(4){
opacity: 0;
}
.burger.active span:nth-child(2){
transform: rotate(45deg);
}
.burger.active span:nth-child(3){
transform: rotate(-45deg);
} .overlay{
position: fixed;
background: #000;
top: 0;
left: 0;
width: 100vw;
height: 0;
opacity: 0;
visibility: hidden;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .3s, visibility .3s, height .3s;
z-index: 99999;
}
.overlay nav {
font-size: 3rem;
font-family: 'Roboto', Arial, Helvetica, sans-serif;
text-align: center;
z-index: 99;
position: relative;
}
.overlay nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.overlay nav ul li{
opacity: 0;
margin: 1rem 0;
}
.overlay nav ul li a{
color: #fff;
text-decoration: none;
transition: opacity .2s ease;
opacity: 1;
}
.overlay nav ul li a:hover{
opacity: 1;
} @keyframes fadeInLeft {
0% {
opacity: 0;
transform: translate3d(-25%, 0, 0);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
.overlay.visible{
opacity: 1;
visibility: visible;
height: 100%;
}
.overlay.visible li {
animation: fadeInLeft .3s ease forwards;
}
.overlay.visible li:nth-of-type(1){
animation-delay: .23s;
}
.overlay.visible li:nth-of-type(2){
animation-delay: .26s;
}
.overlay.visible li:nth-of-type(3){
animation-delay: .29s;
}
.overlay.visible li:nth-of-type(4){
animation-delay: .32s;
}
.overlay.visible li:nth-of-type(5){
animation-delay: .35s;
}
.grandtitre h1{
font-size: 3em;
text-align: center;
max-width: 800px;
margin: 0 auto;
padding: 3em 0 0;
}
.messagedefilant {
display: block;
padding: 0;
overflow: hidden;
position: relative;
width: 100%;
height: 280px;
padding-top: 2em;
}
.messagedefilant div {
position: absolute;
min-width: 100%; }
.dark .messagedefilant div span, 
.dark .messagedefilant div:after {
color: #FFF;
}
.messagedefilant div span, 
.messagedefilant div:after {
position: relative;
display: inline-block;
font-size: 9rem;
font-weight: bold;
white-space: nowrap;
top:0;
color: #000;
}
.messagedefilant div span {
animation: defilement 35s infinite linear;
}
.messagedefilant div span{
font-family: kepler-std, serif;
font-weight: 400;
font-style: italic;
}
.messagedefilant div:after {
position: absolute;
top:0; left:0;
content:attr(data-text);
animation: defilement2 35s infinite linear;
font-family: kepler-std, serif;
font-weight: 400;
font-style: italic;
}
@keyframes defilement {
0% { margin-left: 0; }
100% { margin-left: -100%; }
}
@keyframes defilement2 {
0% { margin-left: 100%; }
100% { margin-left: 0%; }
}
.footer{
background-color:  #f3f3f3;
color: #000;
padding: 6em 0 3em;
}
.footer a{
display: block;
color: #000;
text-decoration: none;
font-size: 1.25em;
}
.logo-footer{
fill:#000;
display: block;
max-width: 100%;
width: 400px;
margin: 0 auto 6em ;
}
.footer ul{
padding: 0;
margin: 0;
}
.footer li{
display: block;
padding: 0.3em 0;
}
.footer h2{
display: none;
}
.project-home{
position: relative;
overflow: hidden;
clip-path: inset(0 0 0 0);
text-align: center;
}
.project-home h1{
text-align: center;
}
.project-home.dark a h2{
color: #FFF;
}
.eye path{
fill:#FFF;
}
.reel{
width: 100%;
height: auto;
}
.services .row{
align-items: flex-start;
justify-content: center;
}
.services h1 {
text-align: center;
}
.clients{
}
.clients h1{
text-align: center;
}
.slider img{
width: 100%;
height: auto;
}
.slick-slide{
padding: 1em;
}
.points h1{
text-align: center;
max-width: 814px;
margin: 0 auto 1em;
}
.points h2{
font-weight: bold;
color: #000;
font-size: 2em;
}
.points ul{
position: relative;
padding: 0;
}
.points img{
width: 100%;
height: auto;
}
.points .container>ul:before{
content: "";
display: block;
position: absolute;
left: 50%;
top:0;
bottom: 0;
width:2px;
background: #bae8e8;
}
.points.dark h2{
color: #F3F3F3;
}
.points li span{
background: #000;
color: #bae8e8;
display: block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
position: absolute;
left: 100%;
margin-left: -30px;
font-weight: bold;
font-size: 1.2em;
border-radius:100%;
}
.points.dark li span{
background: #bae8e8;
color: #000;
}
.points .img-container {
padding: 2em;
}
.points .text-container{
padding: 3em;
}
.point:nth-child(even) .point__text{
order: 2;
}
.point__img{
order: 1;
}
.points .point:nth-child(even) span{
left: 0;
}
.points .point span{
top:41%;
}
.slick-slider{
padding-left: 0;
}
.project--description{
padding: 6em 0;
}
.project--description .description a{
color: #000;
font-weight: bold;
}
.project--description h2{
text-transform: uppercase;
font-size: 16px;
letter-spacing: 2px;
color: #8a8a8a;
}
.project--description li{
//font-size: 1.125em;
margin-bottom: 0.5em;
}
.subtitle{
text-transform: uppercase;
letter-spacing: 1px;
color: #adadad;
font-size: 1em;
}
.single__image img{
width: 100%;
height: auto;
margin-bottom: 1em;
}
.single .container{
max-width: 850px;
}
.single h1{
font-size: 4em;
font-weight: bold;
margin: 0 0 0.3em;
}
.date{
font-size: 0.85em;
color: #a1a1a1;
text-transform: uppercase;
letter-spacing: 1px;
}
.news img{
width: 100%;
border-radius: 30px 30px 0 0 ;
height: auto;
}
.deuximages img{
width: 100%;
height: auto;
}
.other-projects img{
width: 100%;
height: auto;
}
.other-projects a{
text-decoration: none;
color: #000;
}
.other-projects.dark a{
color: #FFF;
}
.bottom{
background-color: #f3f3f3;
color: #000;
font-size: 1.15em;
}
.bottom a{
color: #000;
text-decoration: none;
display: block;
}
.bottom .row{
align-items: top;
}
.bottom .container{
border-top:1px solid #D9D5D5;
padding-top: 2em;
padding-bottom: 2em;
}
.footer .description{
font-size: 24px;
max-width: 380px;
color: #000;
margin-top: 0;
}
.footer .description em{
font-family: kepler-std, serif;
font-style: italic;
font-size: 1.1em;
}
.news a{
text-decoration: none;
color: #000;
font-weight: bold;
display: block;
}
.news h2{
font-style: 2.25em;
font-weight: bold;
line-height: 1em;
margin-top: 0;
}
.news .datum{
font-size: 14px;
text-transform: uppercase;
margin-top: 1em;
color:  #a1a1a1;
font-weight: 400;
letter-spacing: 1px;
}
.contact{
font-size: 1.25em;
text-align: center;
}
.contact h2{
font-family: kepler-std, serif;
font-style: italic;
font-size: 1.4em;
margin: 0;
}
.contact span{
display: block;
}
.contact a{
display: block;
text-decoration: none;
color: #000;
}
.contact h1{
font-size: 5em;
}
.loading-screen {
position: relative;
padding-left: 0;
padding-right: 0;
padding-top: 0;
background-color: #ECE96F;
width: 100%;
height: 100%;
transform: scaleY(0) skewX(0);
transform-origin: top left;
z-index: 99999;
}
.loading-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 99999;
pointer-events: none;
}
.single-projet section, .single-projet .big-image{
padding: 0;
}
.project_details{
padding: 6em 0;
background: #080809;
}
.dark p{
color: #FFF;
}
h1, h2, h3, h4, h5, h6{
line-height: 1em;
}
.filtre{
padding: 0;
}
.filtre li{
display: inline-block;
}
.filtre a{
display: block;
padding: 1em 2em;
text-decoration: none;
color: #000;
text-decoration: uppercase;
letter-spacing: 1px;
text-transform: uppercase;
}
.check .button{
margin: 0;
}
.check ul{
padding: 0;
}
.services .button{
position: relative;
outline: none;
text-decoration: none;
cursor: pointer;
text-transform: uppercase;
font-size: 0.875em;
color: #000;
}
.project_details>div, .project_details>section{
padding: 1em 0!important;
}
.taxonomy__content{
text-align: left;
max-width: 800px;
margin: 0 auto 6em;
}
.project-list{
column-count:3;
}
.project-list>div{
break-inside: avoid-column;
}
.portfolio{
text-align: center;
}
.portfolio .projectthumb{
padding: 1em;
}
.cat{
margin-top: 1em;
display: inline-block;
}
.cat a{
text-decoration: none;
color: #8a8a8a;
text-transform: uppercase;
font-size: 0.875em;
letter-spacing: 1px;
border:1px solid #8a8a8a;
display: inline-block;
padding: 0.3em 1em;
border-radius: 30px;
margin: 0.3em;
transition: 500ms;
}
.cat a:hover{
background-color: #000;
color: #FFF;
transition: 500ms;
}
.relation{
padding: 0;
}
.relation li{
display: block;
}
.relation li img{
width: 100%;
height: auto;
}
.relation h2{
color: #000;
}
.relation a{
text-decoration: none;
}
.video-container {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 56.25%; 
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.sublink{
text-transform: uppercase;
font-size: 0.875em;
font-weight: bold;
display: block;
margin: 0 auto;
text-align: center;
}
.sublink em{
position: relative;
left: 0;
transition: 300ms;
}
.service--link:hover .sublink em{
left:5px;
transition: 500ms;
}
.faq .container{
max-width: 700px;
}
.accordion .accordion-item {
border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded=true] {
border-bottom: 1px solid #525252;
}
.accordion button {
position: relative;
display: block;
text-align: left;
width: 100%;
padding: 1em 0;
color: #7288a2;
font-size: 1.15rem;
font-weight: 400;
border: none;
background: none;
outline: none;
}
.accordion button:hover, .accordion button:focus {
cursor: pointer;
color: #525252;
}
.accordion button:hover::after, .accordion button:focus::after {
cursor: pointer;
color: #525252;
border: 1px solid #525252;
}
.accordion button .accordion-title {
padding: 0;
margin: 0;
display: block;
}
.accordion button .icon {
display: inline-block;
position: absolute;
top: 18px;
right: 0;
width: 22px;
height: 22px;
border: 1px solid;
border-radius: 22px;
}
.accordion button .icon::before {
display: block;
position: absolute;
content: "";
top: 9px;
left: 5px;
width: 10px;
height: 2px;
background: currentColor;
}
.accordion button .icon::after {
display: block;
position: absolute;
content: "";
top: 5px;
left: 9px;
width: 2px;
height: 10px;
background: currentColor;
}
.accordion button[aria-expanded=true] {
color: #000;
}
.accordion button[aria-expanded=true] .icon::after {
width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
opacity: 1;
max-height: 9em;
transition: all 200ms linear;
will-change: opacity, max-height;
margin-bottom: 3em;
}
.accordion .accordion-content {
opacity: 0;
max-height: 0;
overflow: hidden;
transition: opacity 200ms linear, max-height 200ms linear;
will-change: opacity, max-height;
}
.accordion .accordion-content p {
font-size: 1rem;
font-weight: 300;
margin: 2em 0;
}
.bloctexte h2{
font-weight: bold;
margin-top: 2em;
}
.formulaire{
text-align: center;
}
.formulaire .h1{
max-width: 841px;
margin: 0 auto 1em;
}
.form{
max-width: 600px;
margin: 0 auto;
text-align: left;
}
.form p {
margin: 0 0 0.5em;
}
.form label{
text-transform: uppercase;
font-size: 0.75em;
letter-spacing: 1px;
color: #727272;
}
.form input, .form textarea{
width: 100%;
padding: 1em;
border-radius: 10px;
border-style: solid;
border-color:#000;
border-width: 1px;
}
.form input[type="submit"]{
background-color: #EDCDC2;
border: none;
text-transform: uppercase;
}
.form .wpcf7-not-valid-tip{
font-size: 0.75em;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
background-color: #ffb900;
padding: 2em;
max-width: 600px;
margin: 0 auto;
border-radius: 30px;
}
.wpcf7 form.sent .wpcf7-response-output {
background-color: #46b450;
padding: 2em;
max-width: 600px;
margin: 0 auto;
border-radius: 30px;
color: #FFF;
}
.grecaptcha-badge { 
visibility: hidden;
}
header .menu .sub-menu{
position: absolute;
background-color: #f4f4f4;
display: block;
padding: 0;
border-radius: 15px;
display: none;
z-index: 99;
}
header .sub-menu li{
display: block;
}
header .sub-menu li a{
padding: 0.5em;
display: block;
font-family: kepler-std, serif;
font-style: italic;
text-transform: inherit;
font-size:1.25em;
}
header .menu .menu-item-has-children:hover .sub-menu{
display: block;
}
footer .menu .sub-menu{
display: none;
}
.belleimage{
position: relative;
background-size: cover;
background-position: center center;
}
.belleimage:before{
content:"";
width: 65%;
position: absolute;
bottom: 0;
left: 0;
top: 0;
background: rgb(255,255,255);
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0.8) 70%, rgba(255,255,255,0) 100%);
z-index: 1;
}
.belleimage .container{
position: relative;
z-index: 2;
}
.belleimage .button{
margin: 0;
}
.slick-track{
display: flex;
align-items: center;
}
.legend{
text-align: center;
color: #8f8f8f;
display: block;
font-size: 0.875em;
margin: 0.3em;
}
.slick-arrow, .slick-dots{
display: none!important;
}
.job .button{
margin: 0 auto 0 0;
}
.jobs{
text-align: center;
}
.job-item a{
color: #000;
text-decoration: none;
}
.job ul{
font-size:1.125rem;
}
.job ul li {
margin: 0.3em;
}
.job .bloctexte .container{
max-width: 800px;
}
.project--description .row{
align-items: flex-start;
}
.edc{
padding: 0;
}
.edc img{
width: 100%;
height: auto!important:
}
.points .container > ul{
background: #f3f3f3;
padding: 1em;
border-radius:50px;
}
.points.dark .container > ul{
background: transparent;
padding: 1em;
border-radius:50px;
}
.story img{
width: 100%;
height: auto;
}
.story .row{
align-items:flex-start;
}
.story__content{
max-width: 841px;
margin: 0 auto;
text-align: center;
margin-bottom: 2em;
}
.story a{
display: block;
position: relative;
bottom: 0;
transition: 500ms;
}
.story a:hover{
bottom: 15px;
transition: 500ms;
} .story a:hover:after{
transform: scale(1.1);
transition: 500ms;
}
.image_heroo{
width: 50%;
margin-bottom: -5px;
}
.image_heroo img{
border-radius: 0;
}
.heroo{ 
padding: 0;
display: flex;
align-items: center;
justify-content: space-between;
}
.text-heroo{
width: 50%;
padding: 6em;
}
.equipe img{
max-width: 100%;
}
.equipe a{
display: block;
color: #000;
text-decoration: none;
margin-bottom: 1em;
}
.point__text ul {
padding-left: 1.5em;
}
.iframecontainer {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 177%; border-radius: 30px;
} .short {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.postitem {
margin-bottom: 2em;
border: 1px solid #f1f1f1;
border-radius: 30px;
}
.postitem--content{
padding: 1em 2em;
}
.video-hero {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: 9;
}
.project__image{
position: relative;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 80vh;
}
.project__image h1{
color: #FFF;
z-index: 11;
position: relative;
text-align: center;
font-size: 3rem;
}
.project__image img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
min-width: 100%;
min-height: 100%;
object-fit: cover;
z-index: 8;
}
.single__image {
background-image: url(//www.agencevoila.be/wp-content/themes/voila/<?php echo esc_url($image_url[0]); ?>');
background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; height: 40vh; }
.single{
padding: 0;
background-color: #f7f7f7;
padding-bottom: 3em;
}
.single .container{
padding: 3em;
background-color: #FFF;
margin: -6em auto 0;
border-radius: 16px;
}
.single .container img{
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
.single h2{
font-size: 2em;
}
.single h3{
font-size: 1.5em;
margin-bottom: 0;
}
.single h4{
font-size: 1.25em;
}
.single li{
font-size: 1.125em;	
}
.nav-links img{
width: 100%;
height: auto;
}
.nav-links a{
text-decoration: none;
color: #000;
font-size: 1.5em;
bottom: 0;
position: relative;
transition: 500ms;
}
.nav-links a:hover{
bottom: 5px;
transition: 500ms;
}
.nav-links a span{
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 1px;
display: block;
margin: 1em 0 0.5em;
}
.description h3{
font-weight:bold;
font-weight: bold;
font-size: 1.5rem;
margin-bottom: 0;
margin-top: 2em;
} .nopadding{
padding: 0!important;
} .hidden,
[hidden] {
display: none !important;
} .sr-only {
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px; } .sr-only.focusable:active,
.sr-only.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
white-space: inherit;
width: auto;
} .invisible {
visibility: hidden;
} .clearfix::before,
.clearfix::after {
content: " ";
display: table;
}
.clearfix::after {
clear: both;
} @media only screen and (max-width: 960px) {
.project-list{
column-count:2;
}
.points ul{
padding-left: 3em;
}
.points ul:before{
display: none;
}
.points li span{
left: 0;
}
.points .text-container{
padding-top: 0;
padding-bottom: 0;
}
.point__text{
order:1;
}
.point__img{
order:2;
}
.belleimage:before{
background:rgba(255,255,255,.8);
width: 100%;
}
.project h1{
font-size: 3em;
}
.heroo{
display: block;
}
.text-heroo, .image_heroo{
width: 100%;
}
.points .text-container, .points .img-container {
padding: 1em;
}
.story .col{
flex: 0 0 33%;
max-width: 33%;
margin-bottom: 2em;
}
.single h1{
font-size: 2.6em;
}
.single .container{
padding: 3em 1em;
}
.nav-links a {
padding: 1em 0;
display: block;
}
}
@media only screen and (max-width: 720px) {
.burger{
display: block;
}
.project-list{
column-count:1;
}
header .menu{
display: none;
}
.projectthumb{
padding: 1em;
}
.messagedefilant div span, .messagedefilant div:after{
font-size: 5rem;
}
.messagedefilant{
height: 170px;
}
#cursor{
display: none;
}
.overlay .sub-menu{
display: none;
} 
.gd .row .col-md-6:first-child{
order:2;
}
.points li .number{
display: none;
}
.text-heroo{
padding: 6em 1em;
}
.h1{
font-size: 2rem;
}
.story .col{
flex: 0 0 50%;
max-width: 50%;
margin-bottom: 2em;
}
.contact h1 {
font-size: 3em;
}
.contact .col-md-6{
margin-bottom: 3em;
}
.contact{
padding-bottom: 0;
}
.project_details>div, .project_details>section{
padding: 0!important;
}
.project_details img, .project_details .iframecontainer{
margin: 0.5em 0;
}
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) { } @media print {
*,
*::before,
*::after {
background: #fff !important;
color: #000 !important; box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]::after {
content: " (" attr(href) ")";
}
abbr[title]::after {
content: " (" attr(title) ")";
} a[href^="#"]::after,
a[href^="javascript:"]::after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
} thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}