/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline; }

html {
line-height: 1; }

ol, ul {
list-style: none; }

table {
border-collapse: collapse;
border-spacing: 0; }

caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle; }

q, blockquote {
quotes: none; }
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none; }

a img {
border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block; }

@font-face {
font-family: 'ralewaybold';
src: url("../fonts/raleway/raleway-bold-webfont.woff2") format("woff2"), url("../fonts/raleway/raleway-bold-webfont.woff") format("woff");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'ralewayitalic';
src: url("../fonts/raleway/raleway-italic-webfont.woff2") format("woff2"), url("../fonts/raleway/raleway-italic-webfont.woff") format("woff");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'ralewayregular';
src: url("../fonts/raleway/raleway-regular-webfont.woff2") format("woff2"), url("../fonts/raleway/raleway-regular-webfont.woff") format("woff");
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'droid_serifitalic';
src: url("../fonts/droid/droidserif-italic-webfont.woff2") format("woff2"), url("../fonts/droid/droidserif-italic-webfont.woff") format("woff");
font-weight: normal;
font-style: normal; }
html {
background-color: #ededed;
width: 100%;
height: 100%; }

body {
position: relative;
font-family: "ralewayregular";
width: 100%;
max-width: 125em;
margin: 0 auto;
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12);
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.12); }

a {
text-decoration: none; }

.hidden {
position: absolute;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px); }

.hiddenReplace {
text-indent: 100%;
white-space: nowrap;
overflow: hidden; }

.no-js #loader {
display: none; }

.js #loader {
display: block;
position: absolute;
left: 100px;
top: 0; }

.loaderPage {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(../img/loading_icon.gif) center no-repeat #333;
background-size: 400px auto; }

/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp {
padding: 0;
margin: 0;
border: 0;
outline: none;
vertical-align: top; }

.fancybox-wrap {
position: absolute;
top: 0;
left: 0;
z-index: 8020; }

.fancybox-skin {
position: relative;
color: #444;
height: 0;
width: 0; }

.fancybox-opened {
z-index: 8030; }

.fancybox-outer, .fancybox-inner {
position: relative; }

.fancybox-inner {
overflow: hidden;
position: relative; }
@media screen and (max-width: 666px) {
.fancybox-inner:after, .fancybox-inner:before {
content: "";
background-color: rgba(0, 0, 0, 0.2);
height: 100%;
width: 50px;
position: absolute;
display: block;
top: 0;
z-index: 1000;
background-position: center;
background-repeat: no-repeat;
background-size: 22px; }
.fancybox-inner:after {
right: 0;
background-image: url("../img/next.png"); }
.fancybox-inner:before {
left: 0;
background-image: url("../img/previous.png"); } }

.fancybox-type-iframe .fancybox-inner {
-webkit-overflow-scrolling: touch; }

.fancybox-error {
color: #444;
font: 14px/20px "ralewayregular";
margin: 0;
padding: 15px;
white-space: nowrap; }

.fancybox-image, .fancybox-iframe {
display: block;
width: 100%;
height: 100%; }

.fancybox-image {
max-width: 100%;
max-height: 100%; }

.fancybox-close, .fancybox-prev span, .fancybox-next span {
background-image: url("../img/fancybox_sprite.png"); }

#fancybox-loading {
position: fixed;
height: 100%;
width: 100%;
top: 50%;
left: 50%;
right: 50%;
bottom : 50%;
cursor: pointer;
z-index: 8060; }

#fancybox-loading div {
height: 100%;
width: 100%;
background-size: 200px 200px;
background: url("../img/loading_icon.gif") center center no-repeat;
}

.fancybox-close {
position: absolute;
top: -40px;
right: 0;
width: 36px;
height: 36px;
cursor: pointer;
z-index: 8040; }

.fancybox-nav {
position: absolute;
top: 0;
width: 40%;
height: 100%;
cursor: pointer;
text-decoration: none;
background: transparent url("../img/blank.gif");
-webkit-tap-highlight-color: transparent;
z-index: 8040; }

.fancybox-prev {
left: 0px;
}
@media screen and (max-width: 666px) {
.fancybox-prev {
opacity: 0;
left: 0; } }

.fancybox-next {
right: 0px; }
@media screen and (max-width: 666px) {
.fancybox-next {
opacity: 0;
right: 0; } }

.fancybox-nav span {
position: absolute;
top: 50%;
width: 36px;
height: 34px;
margin-top: -18px;
cursor: pointer;
z-index: 8040;
visibility: hidden; }

.fancybox-prev span {
left: 10px;
background-position: 0 -36px; }
@media screen and (max-width: 640px) {
.fancybox-prev span {
display: none; } }

.fancybox-next span {
right: 10px;
background-position: 0 -72px; }
@media screen and (max-width: 640px) {
.fancybox-next span {
display: none; } }

.fancybox-nav:hover span {
visibility: visible; }

.fancybox-tmp {
position: absolute;
top: -99999px;
left: -99999px;
visibility: hidden;
max-width: 99999px;
max-height: 99999px;
overflow: visible !important; }

.fancybox-lock {
overflow: hidden !important;
width: auto; }

.fancybox-lock body {
overflow: hidden !important; }

.fancybox-lock-test {
overflow-y: hidden !important; }

.fancybox-overlay {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
display: none;
z-index: 8010;
background-color: rgba(30, 30, 30, 0.98); }

.fancybox-overlay-fixed {
position: fixed;
bottom: 0;
right: 0; }

.fancybox-lock .fancybox-overlay {
overflow: auto;
overflow-y: scroll; }

.fancybox-title {
visibility: hidden;
font: normal 13px/20px "ralewayregular";
position: relative;
text-shadow: none;
z-index: 8050; }

.fancybox-opened .fancybox-title {
visibility: visible; }

.fancybox-title-float-wrap {
position: absolute;
bottom: 0;
right: 50%;
margin-bottom: -35px;
z-index: 8050;
text-align: center; }

.fancybox-title-float-wrap .child {
display: inline-block;
margin-right: -100%;
padding: 2px 20px;
background: transparent;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
text-shadow: 0 1px 2px #222;
color: #FFF;
font-weight: bold;
line-height: 24px;
white-space: nowrap; }

.fancybox-title-outside-wrap {
position: relative;
margin-top: 10px;
color: #fff; }

.fancybox-title-inside-wrap {
padding-top: 10px; }

.fancybox-title-over-wrap {
position: absolute;
bottom: 0;
left: 0;
color: #fff;
padding: 10px;
background: #000;
background: rgba(0, 0, 0, 0.8); }

@font-face {
font-family: 'icomoon';
src: url("../fonts/icons/icomoon.eot?r4go7g");
src: url("../fonts/icons/icomoon.eot?r4go7g#iefix") format("embedded-opentype"), url("../fonts/icons/icomoon.ttf?r4go7g") format("truetype"), url("../fonts/icons/icomoon.woff?r4go7g") format("woff"), url("../fonts/icons/icomoon.svg?r4go7g#icomoon") format("svg");
font-weight: normal;
font-style: normal; }
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; }

.icon-light:before {
content: "\e900"; }

.icon-options:before {
content: "\e901"; }

.icon-team:before {
content: "\e902"; }

.icon-instagram:before {
content: "\e1"; }

.icon-google:before {
content: "\ea88"; }

.icon-facebook:before {
content: "\e2"; }

.icon-twitter:before {
content: "\e3"; }

.icon-youtube:before {
content: "\e4"; }

.icon-flickr:before {
content: "\e6"; }

.icon-behance:before {
content: "\e7"; }

.icon-linkedin2:before {
content: "\eaca"; }

.icon-pinterest:before {
content: "\ead1"; }

.darkHeader {
background-color: #333;
z-index: 8000;
-moz-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);
box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1); }
.darkHeader h1 {
background-image: url(../img/wauthier-architecture-logo.png);
background-size: 25px auto; }
@media screen and (max-width: 800px) {
.darkHeader {
background-color: transparent; } }

header {
width: 100%;
max-width: 125em;
height: 5em;
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
-moz-transition: background 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: background 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: background 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: background 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955), box-shadow 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
header:after {
content: "";
display: block;
clear: both; }
@media screen and (max-width: 800px) {
header {
display: none; } }
header h1 {
width: 19.57983%;
height: 5em;
float: left;
margin-left: 4.95798%;
background-image: url(../img/wauthier-architecture-logo2.png);
background-size: 140px auto;
background-position: left center;
background-repeat: no-repeat; }
header h1 a {
height: 100%;
width: 60px;
display: block; }
header nav {
float: right;
top: 0;
right: 0;
margin-right: 4.95798%; }
header nav:after {
content: "";
display: block;
clear: both; }
@media screen and (max-width: 800px) {
header nav {
display: none; } }
header nav a {
position: relative;
display: block;
float: left;
padding: 0 1.25em;
font-family: "ralewaybold";
font-size: 0.75em;
line-height: 6.66667em;
letter-spacing: 0.25em;
color: #fff;
text-transform: uppercase; }
header nav a:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content: "";
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: 1.66667em;
width: 0;
height: 2px;
background-color: #CBB974;
-moz-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955); }
header nav a:hover:after {
width: 80%; }

.background-home {
position: fixed;
top: 0;
display: block;
width: 100%;
height: 100%;
max-width: 125em;
background-image: url(../img/wauthier-architecture-background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
z-index: -200; }

.home {
height: 55em;
width: 100%;
background: transparent; }
.home:after {
content: "";
display: block;
clear: both; }
@media screen and (max-width: 768px) {
.home {
height: 64em; } }
@media screen and (max-width: 414px) {
.home {
height: 46em; } }
@media screen and (max-width: 375px) {
.home {
height: 41.6875em; } }
@media screen and (max-width: 360px) {
.home {
height: 40em; } }
@media screen and (max-width: 320px) {
.home {
height: 35.5em; } }
.home p {
width: 60%;
margin-right: 12.26891%;
margin-top: 400px;
float: right;
color: #fff;
text-align: right;

font-family: "droid_serifitalic";
letter-spacing: 0.05em;
font-size: 28px;
line-height: 40px;
}

@media screen and (max-width: 1180px) {
.home p {
width: 70%; } }
@media screen and (max-width: 800px) {
.home p {
width: 80%;
margin: 0 auto 0 auto;
padding-top: 400px;
float: none;
text-align: center;
line-height: 40px; } }
@media screen and (max-width: 414px) {
.home p {
padding-top: 11em; } }
@media screen and (max-width: 375px) {
.home p {
padding-top: 10em; } }
@media screen and (max-width: 320px) {
.home p {
padding-top: 6em; } }
.home p span {
display: block;
width: 100%;
text-align: right;
color: #CBB974;
font-family: "ralewaybold";
text-transform: uppercase;
letter-spacing: 0.4em;
font-size: 14px;
line-height: 30px;
padding-top: 10px;
}
@media screen and (max-width: 800px) {
.home p span {
text-align: center;
margin-top: 10px; } }
.home p cite {
display: inline;
position: relative;
font-family: "ralewayregular";
line-height: 2.5em; }
.home p span:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
content: "";
position: absolute;
left: -50px;
margin-left: auto;
margin-right: auto;
top: 0.625em;
width: 40px;
height: 2px;
background-color: #CBB974; }
@media screen and (max-width: 800px) {
.home p cite:after {
display: none; } }

.services {
width: 100%;
background-color: #fff; }
.services .wrapperService {
width: 70.7563%;
margin: 0 auto; }
.services .wrapperService:after {
content: "";
display: block;
clear: both; }
.services .contentLeft {
margin-right: 3.32542%; }
.services .content {
float: left;
width: 48.33729%;
padding-top: 9em;
padding-bottom: 0.625em;
text-align: center; }
@media screen and (max-width: 770px) {
.services .content {
padding-top: 5em;
float: none;
width: 100%; } }
.services .content figure {
height: 13.75em;
width: 100%;
background-color: #fff;
overflow: hidden;
position: relative; }
.services .content figure img {
position: absolute;
width: 100%;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%); }
@media screen and (max-width: 1320px) {
.services .content figure img {
height: 100%;
width: auto; } }
@media screen and (max-width: 770px) {
.services .content figure img {
height: auto;
width: 100%; } }
@media screen and (max-width: 678px) {
.services .content figure img {
height: 100%;
width: auto; } }
.services .content h2 {
text-transform: uppercase;
font-family: "ralewaybold";
font-size: 0.9375em;
letter-spacing: 0.2em;
line-height: 4.66667em;
margin-top: 1.33333em;
position: relative; }
.services .content h2:after {
content: "";
position: absolute;
top: -2.5em;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 2px;
height: 40px;
background-color: #CBB974; }
.services .content p {
font-family: "ralewayregular";
font-size: 0.875em;
line-height: 1.71429em; }

.apropos {
width: 100%;
background-color: #fff; }
.apropos .whiteBorder {
padding-top: 9.375em;
width: 100%;
height: 600px;
position: relative; }
@media screen and (max-width: 995px) {
.apropos .whiteBorder {
padding-top: 5.625em; } }
@media screen and (max-width: 768px) {
.apropos .whiteBorder {
height: auto; } }
.apropos .whiteBorder .imgDynamic {
position: absolute;
display: block;
width: 50%;
height: 100%;
right: 0;
top: 0;
background-color: transparent;
background-image: url(../img/wauthier-architecture-dynamic.png);
background-repeat: no-repeat;
background-position: right top;
background-size: 500px;
}
@media screen and (max-width: 1230px) {
.apropos .whiteBorder .imgDynamic {
background-size: 90%;
background-position: right top; } }
@media screen and (max-width: 880px) {
.apropos .whiteBorder .imgDynamic {
background-size: 90%;
background-position: right bottom; } }
@media screen and (max-width: 768px) {
.apropos .whiteBorder .imgDynamic {
display: none; } }
.apropos .whiteBorder .aboutContent {
display: block;
width: 100%;
height: 100%;
background-color: #333; }
@media screen and (max-width: 768px) {
.apropos .whiteBorder .aboutContent {
position: relative; }
.apropos .whiteBorder .aboutContent .imgDynamic2 {
position: absolute;
width: 100%;
height: 100%;
background-image: url(../img/wauthier-architecture-dynamic.png);
background-repeat: no-repeat;
background-position: right;
opacity: 0.1; } }
.apropos .whiteBorder .aboutContent h1, .apropos .whiteBorder .aboutContent p, .apropos .whiteBorder .aboutContent a {
display: block;
width: 34.20168%;
margin-left: 12.26891%;
text-align: center;
color: white; }
@media screen and (max-width: 768px) {
.apropos .whiteBorder .aboutContent h1, .apropos .whiteBorder .aboutContent p, .apropos .whiteBorder .aboutContent a {
width: 70.7563%;
margin: 0 auto; } }
.apropos .whiteBorder .aboutContent h1 {
font-family: "droid_serifitalic";
font-size: 1.25em;
line-height: 1.5em;
position: relative;
padding-top: 8.5em;
margin-bottom: 1em; }
@media screen and (max-width: 1350px) {
.apropos .whiteBorder .aboutContent h1 {
padding-top: 7em; } }
@media screen and (max-width: 940px) {
.apropos .whiteBorder .aboutContent h1 {
padding-top: 6em; } }
@media screen and (max-width: 768px) {
.apropos .whiteBorder .aboutContent h1 {
padding-top: 6em; } }
.apropos .whiteBorder .aboutContent h1:after {
content: "";
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: -1em;
width: 56px;
height: 2px;
background-color: #CBB974; }
.apropos .whiteBorder .aboutContent p {
font-family: "ralewayregular";
font-size: 1.125em;
line-height: 1.55556em;
margin-top: 2.22222em; }
.apropos .whiteBorder .aboutContent p span {
color: #CBB974; }
.apropos .whiteBorder .aboutContent a {
position: relative;
border: 2px solid #CBB974;
font-family: "ralewaybold";
font-size: 0.75em;
line-height: 4.5em;
letter-spacing: 0.25em;
color: #fff;
text-transform: uppercase;
margin-top: 4em;
margin-bottom: 8em;
overflow: hidden;
z-index: 10;
-moz-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@media screen and (max-width: 768px) {
.apropos .whiteBorder .aboutContent a {
margin-bottom: 8.33333em; } }
.apropos .whiteBorder .aboutContent a:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #2d2d2d;
left: -800px;
-moz-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
z-index: -1; }
.apropos .whiteBorder .aboutContent a:hover:before, .apropos .whiteBorder .aboutContent a:focus:before {
left: 0; }
.apropos .engagements {
width: 100%;
background-color: #CBB974;
color: #fff;
text-align: center; }
.apropos .engagements ul {
width: 85.37815%;
margin: 0 auto; }
.apropos .engagements ul:after {
content: "";
display: block;
clear: both; }
@media screen and (max-width: 980px) {
.apropos .engagements ul {
width: 100%; } }
.apropos .engagements ul li {
float: left;
width: 31.49606%;
margin-right: 2.75591%;
margin-bottom: 5.25em; }
@media screen and (max-width: 980px) {
.apropos .engagements ul li {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0 40px; } }
@media screen and (max-width: 800px) {
.apropos .engagements ul li {
float: none;
width: 82.87402%;
padding: 0;
margin: 0 auto; } }
.apropos .engagements ul li p {
font-family: "ralewayregular";
font-size: 0.875em;
line-height: 1.71429em; }
.apropos .engagements ul li h3 {
text-transform: uppercase;
font-family: "ralewaybold";
font-size: 0.9375em;
letter-spacing: 0.2em;
line-height: 2.66667em;
margin-top: 1.6em;
margin-bottom: 0.66667em;
position: relative; }
.apropos .engagements ul li h3:before {
content: "";
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top: -0.8em;
width: 56px;
height: 2px;
background-color: #E6D288; }
.apropos .engagements ul li span {
height: 80px;
display: block;
line-height: 80px;
margin-top: 50px; }
@media screen and (max-width: 800px) {
.apropos .engagements ul li:first-child {
padding-top: 50px; } }
.apropos .engagements ul li:last-child {
margin-right: 0; }
@media screen and (max-width: 800px) {
.apropos .engagements ul li:last-child {
margin: 0 auto;
padding-bottom: 100px; } }

.icon-light {
font-size: 5em; }

.icon-options {
font-size: 6.25em; }

.icon-team {
font-size: 6.25em; }

.projets {
width: 100%; }
.projets:after {
content: "";
display: block;
clear: both; }
.projets ul li {
width: 25%;
height: 18.75em;
overflow: hidden;
position: relative;
float: left;
margin: 0; }
@media screen and (max-width: 940px) {
.projets ul li {
width: 50%; } }
@media screen and (max-width: 500px) {
.projets ul li {
width: 100%; } }
.projets ul li a {
width: 100%;
height: 100%; }
.projets ul li a:before {
content: 'Voir le projet';
display: block;
position: absolute;
right: 10.71429em;
bottom: 1.5em;
font-family: "ralewayregular";
text-transform: uppercase;
font-size: 0.875em;
color: #fff;
z-index: 90;
opacity: 0;
-moz-transition: right 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: right 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: right 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: right 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.projets ul li a:after {
content: '';
display: block;
position: absolute;
right: 23.33333em;
bottom: 1.66667em;
height: 2px;
width: 2.5em;
background-color: #CBB974;
z-index: 90;
opacity: 0;
-moz-transition: right 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: right 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: right 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: right 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955), opacity 0.5s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.projets ul li a:hover:before, .projets ul li a:focus:before {
right: 2.22222em;
opacity: 1; }
.projets ul li a:hover:after, .projets ul li a:focus:after {
right: 10em;
opacity: 1; }
.projets ul li a:hover img, .projets ul li a:focus img {
-webkit-filter: grayscale(0%);
filter: grayscale(0%); }
.projets ul li img {
position: absolute;
width: 100%;
left: 50%;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-moz-transition: filter 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: filter 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: filter 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: filter 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@media screen and (max-width: 1220px) {
.projets ul li img {
width: auto;
height: 100%; } }
@media screen and (max-width: 940px) {
.projets ul li img {
width: 100%;
height: auto; } }
@media screen and (max-width: 617px) {
.projets ul li img {
width: auto;
height: 100%; } }
@media screen and (max-width: 500px) {
.projets ul li img {
width: 100%;
height: auto; } }
@media screen and (max-width: 315px) {
.projets ul li img {
width: auto;
height: 100%; } }
.projets ul li span {
position: absolute;
display: block;
height: 100%;
width: 100%;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF000000', endColorstr='#FF363636');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjAiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC42NSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.65)));
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
z-index: 80;
opacity: 0;
-moz-transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.projets ul li span:hover {
opacity: 0.8; }

.contact {
position: relative;
background-color: #fff; }
.contact:after {
content: "";
display: block;
clear: both; }

.infoContact {
width: 50%;
float: right;
text-align: center; }
@media screen and (max-width: 860px) {
.infoContact {
width: 100%;
float: none; } }
.infoContact h1 {
padding: 6em 0 1.46667em 0;
font-family: "ralewaybold";
font-size: 0.9375em;
line-height: 1.66667em;
letter-spacing: 0.16667em;
text-transform: uppercase;
background-color: #fff; }
.infoContact p {
width: 40.05906%;
margin: 0 auto;
font-family: "droid_serifitalic";
font-size: 0.875em;
line-height: 1.6em;
color: #979797;
-moz-transition: 0.3s, ease-in-out-quad;
-o-transition: 0.3s, ease-in-out-quad;
-webkit-transition: 0.3s, ease-in-out-quad;
transition: 0.3s, ease-in-out-quad; }
@media screen and (max-width: 860px) {
.infoContact p {
width: 74.31102%; } }
.infoContact .adresse a, .infoContact .telephone a {
margin: 0 auto;
font-family: "droid_serifitalic";
font-size: 1em;
line-height: 1.625em;
color: #333; }
.infoContact .adresse a:hover, .infoContact .adresse a:focus, .infoContact .telephone a:hover, .infoContact .telephone a:focus {
color: #877b4d; }
.infoContact .telephone {
width: 65.74803%;
margin: 2em auto 3.125em auto;
position: relative; }
.infoContact .telephone a {
margin: 8px auto;
display: block; }
.infoContact .telephone:after {
content: "";
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
bottom: -1.5em;
width: 56px;
height: 2px;
background-color: #CBB974; }
.infoContact .adresse {
width: 65.74803%;
margin: 0 auto; }
.infoContact .adresse span {
display: block; }
.infoContact .email a {
width: 48.62205%;
margin: 0 auto;
position: relative;
border: 2px solid #CBB974;
color: #333;
display: block;
font-family: "ralewayregular";
font-size: 0.875em;
line-height: 3.85714em;
margin-top: 3.42857em;
margin-bottom: 6.42857em;
overflow: hidden;
z-index: 10;
-moz-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955); }
@media screen and (max-width: 860px) {
.infoContact .email a {
width: 74.31102%; } }
.infoContact .email a:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-color: #f4f4f4;
left: -800px;
-moz-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: 0.2s, cubic-bezier(0.455, 0.03, 0.515, 0.955);
z-index: -1; }
.infoContact .email a:hover:before, .infoContact .email a:focus:before {
left: 0; }

.map {
width: 50%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
@media screen and (max-width: 860px) {
.map {
position: relative;
width: 100%;
height: 24.375em; } }

footer {
background-color: #333;
width: 100%;
height: 10em;
position: relative; }
footer .infoFooter {
width: 85.37815%;
height: 6.25em;
margin: 0 auto;
border-bottom: 1px #4E4E4E solid;
position: relative; }
footer .infoFooter .hiddenReplace {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 40.05906%;
background-image: url(../img/wauthier-architecture-logo2.png);
background-size: 140px auto;
background-position: left center;
background-repeat: no-repeat; }
@media screen and (max-width: 620px) {
footer .infoFooter .hiddenReplace {
display: none; } }
footer .infoFooter .socialNetwork {
position: absolute;
top: 0;
right: 0;
height: 100%; }
@media screen and (max-width: 620px) {
footer .infoFooter .socialNetwork {
margin: 0 auto;
position: relative;
text-align: center; } }
footer .infoFooter .socialNetwork a {
float: left;
width: 2.125em;
height: 2.125em;
margin: 2.0625em 0.625em;
color: #fff; }
@media screen and (max-width: 620px) {
footer .infoFooter .socialNetwork a {
display: inline-block;
float: none;
text-align: center;
margin: 0 auto; } }
footer .infoFooter .socialNetwork a:before {
display: block;
text-align: center;
margin: 0 auto;
line-height: 2.42857em;
font-size: 0.875em; }
footer .infoFooter .socialNetwork a:hover {
color: #CBB974; }
@media screen and (max-width: 800px) {
footer .infoFooter .socialNetwork a {
margin: 2.0625em 0.25em; } }
footer .infoFooter .socialNetwork .icon-behance:before {
font-size: 1.0625em;
line-height: 2em; }
footer .infoFooter .socialNetwork .icon-pinterest:before {
font-size: 1.125em;
line-height: 1.88889em; }
footer .legal {
width: 85.37815%;
height: 3.75em;
margin: 0 auto;
position: relative; }
footer .legal:after {
content: "";
display: block;
clear: both; }
footer .legal p {
display: inline-block;
margin: 2.18182em 2.72727em 2.18182em 0em;
font-size: 0.6875em;
font-family: "ralewayregular";
text-transform: uppercase; }
@media screen and (max-width: 320px) {
footer .legal p {
width: 100%;
text-align: center; } }
footer .legal p, footer .legal a {
color: #727272;
-moz-transition: color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-o-transition: color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
-webkit-transition: color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955);
transition: color 0.2s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
footer .legal a:hover {
color: #CBB974; }
@media screen and (max-width: 520px) {
footer .legal .cook {
display: none; } }
footer .legal .kwac {
float: right;
position: relative;
margin: 2.18182em 0em 2.18182em 0em;
text-indent: -150px; }
@media screen and (max-width: 720px) {
footer .legal .kwac {
text-indent: -9999px;
color: #333; } }
@media screen and (max-width: 320px) {
footer .legal .kwac {
display: none; } }

footer .legal .kwac a:hover {
opacity: 0.8; }

.slicknav_btn {
position: fixed;
z-index: 1000;
display: block;
width: 21.875em;
height: 5em;
top: 0;
right: 0;
cursor: pointer; }
.slicknav_btn .slicknav_icon-bar + .slicknav_icon-bar {
margin-top: 0.188em; }

.slicknav_menu {
display: none;
*zoom: 1;
z-index: 900;
position: fixed;
top: 0;
width: 100%;
height: 5em;
background-color: #282828; }
.slicknav_menu:after {
content: "";
display: block;
position: absolute;
width: 6.25em;
height: 5em;
margin-left: 1.875em;
top: 0;
left: 0;
background-image: url(../img/wauthier-architecture-logo.png);
background-repeat: no-repeat;
background-position: center left;
background-size: 25px auto; }
@media screen and (max-width: 800px) {
.slicknav_menu {
display: block; } }
.slicknav_menu .slicknav_menutxt {
display: block;
float: right;
margin-right: 5.375em;
line-height: 5em;
letter-spacing: 0.3125em;
color: #979797;
font-family: "ralewaybold"; }
.slicknav_menu .slicknav_icon {
position: absolute;
top: 1.9375em;
right: 0;
width: 5em;
height: 2px; }
.slicknav_menu .slicknav_icon:before {
background: transparent;
width: 1.125em;
height: 2px;
display: block;
content: "";
position: absolute;
color: #fff; }
.slicknav_menu .slicknav_no-text {
margin: 0; }
.slicknav_menu .slicknav_icon-bar {
display: block;
width: 1.5em;
height: 2px;
-webkit-box-shadow: 0 2px 0 white;
-moz-box-shadow: 0 2px 0 white;
box-shadow: 0 1px 0 white; }
.slicknav_menu:before {
content: " ";
display: table; }
.slicknav_menu:after {
content: " ";
display: table;
clear: both; }

.slicknav_nav {
clear: both;
position: fixed;
top: 5em;
right: 0;
background-color: #fff;
width: 100%;
padding: 3.75em 0 5.625em 0;
z-index: 900;
-moz-box-shadow: -1px 2px 4px 0px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: -1px 2px 4px 0px rgba(0, 0, 0, 0.1);
box-shadow: -1px 2px 4px 0px rgba(0, 0, 0, 0.1); }
.slicknav_nav ul {
display: block; }
.slicknav_nav li {
display: block; }
.slicknav_nav .slicknav_arrow {
font-size: 0.8em;
margin: 0 0 0 0.4em; }
.slicknav_nav .slicknav_item {
cursor: pointer; }
.slicknav_nav .slicknav_item a {
display: inline; }
.slicknav_nav .slicknav_row {
display: block; }
.slicknav_nav a {
text-align: center;
display: block;
text-transform: uppercase;
font-family: "ralewaybold";
font-size: 0.8125em;
line-height: 3.84615em;
color: #333;
letter-spacing: 0.3125em; }
.slicknav_nav a:hover, .slicknav_nav a:focus {
color: #CBB974; }
.slicknav_nav .slicknav_parent-link a {
display: inline; }

.slicknav_brand {
float: left; }

.slicknav_open .slicknav_icon {
position: relative; }
.slicknav_open .slicknav_icon:after {
content: "";
background-image: url(../img/close.png);
background-repeat: no-repeat;
background-size: 20px 20px;
width: 1.5em;
height: 1.5em;
position: absolute;
right: -18.4em;
top: -0.2em; }
.slicknav_open .slicknav_icon span {
display: none; }