@charset "utf-8";
/* CSS Document */

/*Table of contents

	BODY
	PARAMETER
	HOME - HEADER
	HOME - PRESENTATION
	HOME - PORTFOLIO
	HOME - REFERENCES
	HOME - CLIENTS

	WATT WE ARE - HEADER
	WATT WE ARE - GROUPE SNEF
	WATT WE ARE - WATT EXPERIENCE

	WATT WE DO - HEADER
	WATT WE DO - METIERS
	WATT WE DO - PALETTE METIER
	WATT WE DO - 360
	WATT WE DO - CITATION
	WATT WE DO - DEVELOPPEMENT DURABLE

	WATT LAB - HEADER
	WATT LAB - REALITE VIRTUELLE
	WATT LAB - EVOLUTION
	WATT LAB - DIGITAL ET NUMERIQUE

	WATT JOB - TESTIMONIAL
	WATT JOB - RSE COLLABORATEUR
	WATT JOB - ENGAGMENTS

/* ===================================
	BODY
====================================== */
body {
	font-family: 'century gothic','CenturyGothic';
	-webkit-font-smoothing: antialiased;
	font-size:14px;
	color:#626262;
	line-height:23px;
	letter-spacing: 0.02em;
	margin: 0;
	padding:0;
	background-color: #fff;
	overflow-x: hidden!important;
}
/* ===================================
	PARAMETER
====================================== */
/* 	TEXT */
h1 {
	font-size:35px;
	font-weight:normal;
	line-height: 40px;
	text-transform: uppercase;
	letter-spacing: -0.02em;
	color: #434343;
}
h2 {
	font-size:25px;
	line-height: 30px;
	color: #7d6e63;
	text-transform: uppercase;
	margin-bottom:20px;
	text-align: left !important;
}
h3 {
	font-size:18px;
	line-height: 25px;
	color: #888888;
}
h4 {
	text-transform:none;
	font-size:24px;
	line-height: 26px;
}
h5 {
	font-weight:600;
	font-size:14px;}
h6 {letter-spacing:0.02em;
	font-size: 14px;
	font-weight:bold;
	line-height: 16px;
}
p {
	font-size: 14px;
}
a {
	text-decoration: none;
	outline: none;
	color:#626262;
}
a:hover {
	color:#998f88;
}
/* MARGIN */
.margin-10 {
	margin-top: 10px;
	margin-bottom: 10px;
}
.margin-25 {
	margin-top: 25px;
	margin-bottom: 25px;
}
.margin-50 {
	margin-top: 50px!important;
	margin-bottom: 50px!important;
}
.margin-100 {
	margin-top: 100px!important;
	margin-bottom: 100px!important;
}
.margin-150 {
	margin-top: 100px!important;
	margin-bottom: 100px!important;
}
.margin-200 {
	margin-top: 100px!important;
	margin-bottom: 100px!important;
}
.margin-top-15 {
	margin-top: 15px;
}
.margin-top-20 {
	margin-top: 20px;
}
.margin-top-25 {
	margin-top: 25px;
}
.margin-top-30 {
	margin-top: 30px;
}
.margin-top-40 {
	margin-top: 40px;
}
.margin-top-45 {
	margin-top: 45px;
}
.margin-top-50 {
	margin-top: 50px;
}
.margin-top-100 {
	margin-top: 100px;
}
.margin-top-150 {
	margin-top: 150px;
}
.margin-top-200 {
	margin-top: 200px;
}
.margin-top-250 {
	margin-top: 250px;
}
.margin-bottom-25 {
	margin-bottom: 25px;
}
.margin-bottom-50 {
	margin-bottom: 50px;
}
.margin-bottom-100 {
	margin-bottom: 100px;
}
.margin-bottom-150 {
	margin-bottom: 150px;
}
.margin-bottom-200 {
	margin-bottom: 200px;
}
.margin-bottom-250 {
	margin-bottom: 250px;
}
/* 	BACKGROUND */
.bg-blue {
	background-color:#3C5974;
}
.bg-sand {
	background-color:#998f88;
}
.bg-light-gray {
	background : #F3F3F3;
}
.bg-middle-gray {
	background: #e8e8e8;
}
.bg-gray{ 
	background-color: #dadad9;}
.bg-black {
	background : #000000;
}
/* 	COLOR TEXT */
.blue-text {
	color: #3C5974;
}
.sand-text {
	color: #998f88;
}
.white-text {
	color: #ffffff;
}
/* 	SEPARATOR LINE */
.separator-line-sand-left {
	border-bottom: 2px solid #998f88;
	margin: 25px 0 50px;
	width: 100px;
}
.separator-line-blue-left {
	border-bottom: 2px solid #998f88;
	margin: 25px 0 50px;
	width: 100px;
}
.separator-line-green-left {
	border-bottom: 2px solid #24604f;
	margin: 25px 0 50px;
	width: 100px;
}
.separator-line-sand {
	border-bottom: 2px solid #998f88;
	margin: 10px auto;
	width: 100px;
}
.separator-line-blue {
	border-bottom: 2px solid #998f88;
	margin: 10px auto;
	width: 100px;
}
.separator-line-green {
	border-bottom: 2px solid #24604f;
	margin: 10px auto;
	width: 100px;
}
.separator-line-yellow {
	border-bottom: 2px solid #ffd700;
	margin: 10px auto;
	width: 100px;
}.separator-line-yellow-left {
	border-bottom: 2px solid #ffd700;
	margin: 25px 0 50px;
	width: 100px;
}
.separator-line-news {
	border-bottom: 2px solid #998f88;
	margin: 50px 0;
	width: 50px;
}
.separator-line-sand-news {
	border-bottom: 2px solid #998f88;
	margin: 50px 0;
	width: 50px;
}
.separator-line-footer {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
/* BTN Header */

.btn-header-white {
	border: 2px solid #fff;
	background-color: transparent;
	border-radius:0;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing:0.1em !important;
	color: #fff;
	padding: 10px 20px;
}
.btn-header-white:hover {
	background-color: #fff;
	color: #000;
}
.btn-header-white:focus,
.btn-header-white:active,
.btn-header-white:visited {
	text-decoration: none;
	outline: 0;
	box-shadow:none;
}
/* ===================================
	HOME - HEADER
====================================== */
#home-header {
	height: 670px;
}
#home-header-es {
	height: 700px;
}
#home-header, #home-header-es {
	background: url("../images/wattdesignbuild_skyline_header.jpg") no-repeat bottom center;
}

#home-header .logo-header, #home-header-es .logo-header {
	width: 180px;
	margin: 120px auto 0;
}
#home-header .logo-header img, #home-header-es .logo-header img{
	width: 100%;
}
#home-header #title, #home-header-es #title  {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color:#998f88;
	margin: 40px auto 25px;
}
#home-header #subtitle, #home-header-es #subtitle {
	font-size: 16px;
	color: #888;
}
/* ===================================
	HOME - PRESENTATION
====================================== */
#cities {
	font-size: 10px;
	font-weight: bold;
}
.icon-pres {
	margin:auto;
	width: 100px;
	height: 100px;
}
.icon-bottom {
	margin-top: 50px;
}
.chiffres {
	margin: 50px 0 20px;
	font-size: 50px;
	color:#998f88;
	text-align: center;
}
.chiffres-description {
	text-align: center;
	line-height: 15px;
}
/* ===================================
	HOME - PORTFOLIO -
====================================== */
#portfolio img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    overflow: hidden;
}

/* Conteneur principal */
.overlay-image {
	position: relative;
	width: 100%;
	height: 400px;
	margin: 0!important;
	padding: 0!important;
	border:4px solid #fff;
}

/* Image originale */
.overlay-image .image {
	 display: block;
	 width: 100%;
	 height: auto;
}

/* Texte original */
.overlay-image .text {
	color: #533823;
	font-size: 20px;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: bold;
	line-height: 1.5em;
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

/********* Hover image et texte *******/

/* Overlay */
.overlay-image .hover {
	position: absolute;
	top: 0;
	height: 100%;
	width: 100%;
	opacity: 0;
	transition: .5s ease;
	background-color: rgba(255,255,255,0.80);
}

/* Apparition overlay sur passage souris */
.overlay-image:hover .hover {
	 opacity: 1;
}

.gallery-title
{
    font-size: 36px;
    color: #42B32F;
    text-align: center;
    font-weight: 500;
    margin-bottom: 70px;
}
.gallery-title:after {
    content: "";
    position: absolute;
    width: 7.5%;
    left: 46.5%;
    height: 45px;
    border-bottom: 1px solid #888;
}
.filter-button{
    font-size: 14px;
    border: 1px solid #998f88;
    text-align: center;
    color: #998f88;
	background-color: #fff;
	padding:5px 15px;
    margin: 10px 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.filter-button:hover
{
    font-size: 14px;
    color: #ffffff;
    background-color: #998f88;

}
.active
{
    background-color: #998f88;
    color: white;
}

.port-image
{
    width: 100%;
}
.gallery_product
{
    margin-bottom: 30px;
	-webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.block{
    opacity: 0;
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
/* ===================================
	HOME - PORTFOLIO - REFERENCE
====================================== */

#reference .title {
	margin: 150px auto 20px;
	text-align: center;
}
#reference h2 {
	font-size:25px;
	line-height: 20px;
	color: #000;
	text-transform: uppercase;
	font-weight: bold;
	letter-spacing: 2px;
	margin-bottom: 10px;

}
#reference h3 {
	font-size:15px;
	line-height: 15px;
	color: #998f88;
	letter-spacing: 2px;
}
#reference .indicateurs {
	font-size: 30px;
	line-height: 40px;
	color:#998f88;
	margin-top: 50px;
}
#reference .description {
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 1px;
	margin-top: 50px;
}
#reference .description a {
	color:#998f88;
	text-decoration: underline;
}
#reference .bouton {
	font-size: 14px;
    border: 1px solid #998f88;
    text-align: center;
    color: #998f88;
	background-color: #fff;
	padding:5px 15px;
    margin: 10px 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#reference .bouton:hover
{
    color: #ffffff;
    background-color: #998f88;
}
#reference .logo-client {
	width: 300px;
	height: 200px;
	margin: auto;
}
/* ===================================
	HOME - CLIENTS
====================================== */

#clients img {
	width: 100%;
	margin: auto;
	object-fit: cover;
	filter: saturate(0);
}
#clients img:hover {
	filter: saturate(1);
}
#clients .title {
	margin-top: 175px;
}
#clients .logo {
	margin-top:100px;
}

/* ===================================
	WATT WE ARE - HEADER
====================================== */

#wattweare {
	margin:150px auto 100px;
}
#wattweare img {
	width:100%;
}
#wattweare #title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
		color: #7d6e63;
	margin: 150px 0 20px;
}
#wattweare .subtitle {
	font-size: 16px;
	color: #000;
}

#contenu {
	display: table;
	width: 100%;
	height: 100%;
	font-size: 16px;
	color: #000;
}
#v-align {
        display: table-cell;
        vertical-align: middle!important;
}
#wattweare .citation {
	font-size: 16px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 50px auto;
}

/* ===================================
	WATT WE ARE - GROUPE SNEF
====================================== */

#groupesnef .subtitle {
	font-size: 16px;
	color: #000;
	margin-bottom: 25px;
}
#groupesnef .margin {
	margin: 100px auto;
}
#groupesnef img {
	width: 100%;
}

/* ===================================
	WATT WE ARE - WATT EXPERIENCE
====================================== */
#wattexperience img {
	width: 100%;
}
#wattexperience #title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 25px 0 20px;
}
#wattexperience .subtitle {
	font-size: 16px;
	color: #888;
	padding-right: 20px;
}
#wattexperience .bouton {
	font-size: 14px;
    border: 1px solid #998f88;
    text-align: center;
    color: #998f88;
	background-color: #fff;
	padding:10px 25px;
    margin: 20px 0;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#wattexperience .bouton:hover
{
    color: #ffffff;
    background-color: #998f88;
}

#wattexperience .icon {
	width: 150px;
	height: 150px;
	margin: auto;
}
#wattexperience .icon img {
	width: 100%;
}
#wattexperience .title-icon {
	font-size: 14px;
	line-height: 18px;
	font-weight: bold;
    text-align: center;
    color: #998f88;
	text-transform: uppercase;
}
#wattexperience .description-icon {
	font-size: 12px;
	line-height: 14px;
    text-align: center;
    color: #888;
	padding: 10px;
}
.quotes {
	width: 60px;
	height: 40px;
	margin: auto;
}
#wattexperience .citation {
	font-style: italic;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 1px;
	color: #000;
	text-align: center;
	padding: 20px 50px;
}
#wattexperience .auteur  {
	text-align: center;
	margin: auto;
}
#wattexperience .trait-left,
#wattexperience .trait-right{
	width: 25px;
	height: 2px;
	margin: 12px 10px 0;
	background-color:#998f88;
}
#wattexperience .trait-left,
#wattexperience .trait-right,
#wattexperience .name{
	float: left;
}
#wattexperience .name {
	color: #000;
	font-size: 14px;
}

.logo-snef {
	width: 100%;
	margin: 5px auto 25px;
	padding-right:25px;
}
/* ===================================
	WATT WE DO - HEADER
====================================== */

#wattwedo {
	margin:150px auto 100px;
}
#wattwedo img {
	width:100%;
}
#wattwedo #title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 150px 0 20px;
}
#wattwedo .subtitle {
	font-size: 16px;
	color: #000;
}
#wattwedo .citation {
	font-size: 16px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 50px auto;
}
/* ===================================
	WATT WE DO - metiers
====================================== */
.title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 0 0 20px;
	text-align: center;
}
.cap {
	text-transform: uppercase!important;
}
#metiers .title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 0 0 20px;
	text-align: center;
}
#metiers p {
	font-size: 16px;
	color: #888;
}

#metiers .metiers {
	color: #7f7f7f;
	font-size: 18px;
	font-weight: bold;
	border-bottom: 1px solid #7f7f7f;
	text-align: center;
	padding-bottom: 10px;
	margin-top: 50px;
}
#metiers .cat-00, #metiers .cat-01, #metiers .cat-02, #metiers .cat-03 {
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	padding: 20px 0 10px;
}
#metiers .cat-00 {
	color:#bfbfbf;
}
#metiers .cat-01 {
	color: #bfbfbf;
}
#metiers .cat-02 {
	color: #998f88;
}
#metiers .cat-03 {
	color: #7d6e63;
	text-transform: uppercase;
}
#metiers .bloc-01,
#metiers .bloc-02,
#metiers .bloc-03 {
	text-align: center;
	color: #fff;
	padding: 10px;
	margin: 10px 0;
	font-weight: bold;
	border-radius: 50px;
	height: 60px;
	vertical-align: middle;
	line-height: 40px;
}
#metiers .bloc-00 {
	text-align: center;
	color: #bfbfbf;
	padding: 10px;
	margin: 10px 0;
	font-weight: bold;
	border-radius: 50px;
	height: 60px;
	vertical-align: middle;
	line-height: 40px;
	border : solid 1px #bfbfbf;
}
#metiers .bloc-01 {
	background-color: #bfbfbf;
}
#metiers .bloc-02 {
	background-color: #998f88;
}
#metiers .bloc-03 {
	background-color: #7d6e63;
}
/*===================================
	WATT WE DO - 360
====================================== */
#watt-circle {
	background-color: #fff;
	background: url("../images/wattwedo/wattdesignbuild_wattwedo_360.svg");
	background-repeat: no-repeat;
	background-position: center;
}
#watt-circle img {
	width: 100%;
}
#watt-circle .margin {
	margin: 100px 0 100px;
}
#watt-circle .title, #watt-circle .subtitle, #watt-circle .watt-rem {
	text-align: right;
	padding-right: 28px;
}

#watt-circle .title {
	margin-top: 150px;
	font-size:85px;
	line-height: 120px;
	color: #000;
	text-transform: uppercase;
}
#watt-circle .subtitle {
	font-size:21px;
	line-height: 25px;
	color: #58595B;
	text-transform: uppercase;
}
#watt-circle .expertises {
	font-size: 18px;
	color: #000;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#watt-circle ul, #watt-circle li {
	padding: 0;
	margin: 0;
}
#watt-circle li {
	color:#58595B;
	font-style: italic;
	font-weight: normal;
	font-size: 16px;
	line-height: 20px;
	text-transform: none;
	list-style: none;
	
}
#watt-circle .watt-rem {
	margin-top: 20px;
	font-size:16px;
	line-height: 21px;
	color: #58595B;
}
#watt-circle .align-bouton {
	text-align: right;
	padding-right: 28px;
}
#watt-circle .bouton {
	font-size: 14px;
    text-align: center;
    color: #998f88;
    background-color: transparent;
	border: 1px solid #998f88;
	padding:10px 25px;
    margin: 20px auto;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#watt-circle .bouton:hover {
   background-color: #998f88;
   color:#fff;
}

/* ===================================
	WATT WE DO - CITATION
====================================== */

#citation {
	background: url("../images/wattwedo/wattdesignbuild_wattwedo_citation.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#citation .citation {
	font-style: italic;
	font-size: 24px;
	line-height: 34px;
	letter-spacing: 1px;
	color: #fff;
	text-align: center;
	padding: 20px 50px;
}
#citation .auteur  {
	text-align: center;
	margin: auto;
}
#citation .trait-left,
#citation .trait-right{
	width: 25px;
	height: 2px;
	margin: 12px 10px 0;
	background-color:#998f88;
}
#citation .trait-left,
#citation .trait-right,
#citation .name{
	float: left;
}
#citation .name {
	color: #fff;
	font-size: 14px;
}

/* ===================================
	WATT WE DO - DEVELOPPEMENT DURABLE
====================================== */
#developpement-durable .margin {
	margin: 150px 0;
}
#developpement-durable img {
	width: 100%;
}
#developpement-durable .title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 20px 0 30px;
	text-align: center;
}
#developpement-durable .little-title {
	font-size: 18px;
	color: #000;
	text-align: left;
	margin-bottom: 15px;
}
#developpement-durable ul {
	padding: 0;
	margin: 0px 0 20px;
}
#developpement-durable li {
	padding-left: 10px;
	margin: 10px 0 10px 10px;
	font-size: 10px;
	list-style: disc;
	color: #888;
}
#developpement-durable li span {
	font-size: 14px;
	line-height: 16px;
	color: #888;
}

/* ===================================
	WATT LAB - HEADER
====================================== */
#wattlab {
	background: url("../images/wattlab/wattdesignbuild_wattlab_header.jpg") center no-repeat;
	height:700px;
}
#wattlab img {
	width: 100%;
}
#wattlab #title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 300px 0 20px;
}
#wattlab .subtitle {
	font-size: 16px;
	color: #888;
}
/* ===================================
	WATT LAB - REALITE VIRTUELLE
====================================== */
#realite-virtuelle img {
	width: 100%;
}
#realite-virtuelle .bouton {
	font-size: 14px;
    text-align: center;
    color: #000;
    background-color: #FFD700;
	border: none!important;
	padding:10px 25px;
    margin: 20px auto;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#realite-virtuelle .bouton:hover{
    background-color: #000;
	color: #FFD700;
}
#realite-virtuelle {
	background: url("../images/wattlab/wattdesignbuild_wattlab_realité_virtuelle.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#realite-virtuelle .margin {
	margin: 150px 0;
}
#realite-virtuelle .title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 0 0 20px;
	text-align: center;
}
#realite-virtuelle .subtitle {
	font-size: 16px;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}
.spacer {
	margin-bottom: 100px;
}
/* ===================================
	WATT LAB - EVOLUTION
====================================== */
#evolution img {
	width: 100%;
}
#evolution .title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 0px 0 20px;
}
#evolution .subtitle {
	font-size: 16px;
	color: #888;
}
#evolution .margin {
	margin-top:50px;
}
#evolution ul {
	padding: 0;
	margin: 15px;
}
#evolution li {
	padding-left: 10px;
	margin: 5px 0;
	font-size: 10px;
	list-style: disc;
	color: #888;
}
#evolution li span {
	font-size: 14px;
	line-height: 16px;
	color: #888;
}
/* ===================================
	WATT LAB - DIGITAL & NUMERIQUE
====================================== */
#digital img {
	width: 100%;
}
#digital .title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 0px 0 20px;
}
#digital .subtitle {
	font-size: 16px;
	color: #888;
}
#digital ul {
	padding: 0;
	margin: 15px;
}
#digital li {
	padding-left: 10px;
	margin: 5px 0;
	font-size: 10px;
	list-style: disc;
	color: #888;
}
#digital li span {
	font-size: 14px;
	line-height: 16px;
	color: #888;
}
#digital .margin {
	margin-top:150px;
}
/* ===================================
	RSE - HEADER
====================================== */

#rse #title {
	font-size: 80px;
	line-height: 80px;
	margin: 200px auto 40px;
	font-family: 'Reenie Beanie', cursive;
	color: #24604f;
}
#rse #subtitle {
	font-size: 15px;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 100px;
}
/* ===================================
	RSE - FAIR WATT
====================================== */
#fairwatt img {
	width:100%;
}
#fairwatt .title {
	font-size: 60px;
	line-height: 60px;
	font-family: 'Reenie Beanie', cursive;
	color: #24604f;
	letter-spacing: 2px;
	margin: 20px 0 20px;
	text-align: left;
}
#fairwatt .subtitle {
	font-size: 16px;
	color: #888;
}
#fairwatt .little-title {
	font-size: 16px;
	color: #000;
}
#fairwatt ul {
	padding: 0;
	margin: 15px;
}
#fairwatt li {
	padding-left: 10px;
	margin: 5px 0;
	font-size: 10px;
	list-style: disc;
	color: #888;
}
#fairwatt li span {
	font-size: 14px;
	line-height: 16px;
	color: #888;
}
#fairwatt .margin {
	margin: 50px 0;
}
.united-nations {
	width: 200px;
	margin: 20px 0;
}
.united-nations img {
	width: 100%;
}

/* ===================================
	WATT JOB - TESTIMONIAL
====================================== */
#testimonial {
	margin:150px auto 0;
}
#testimonial .citation {
	font-style: italic;
	font-size: 18px;
	line-height: 28px;
	letter-spacing: 1px;
	color: #000;
	text-align: center;
	margin-top:30px;
	padding: 0 20px;
}
#testimonial .quotes {
	width: 40px;
	height: 20px;
	margin: auto;
}
#testimonial .auteur{
	text-align: center;
	margin: 20px auto 80px;
}

#testimonial .name {
	color: #888;
	font-size: 14px;
	line-height: 18px;
}
#testimonial .name span {
	color: #000;
}
.logo-asso {
	margin:20px 0;
	width: 220px;
}
.logo-b, .logo-emplois {
	width: 100px;
	height: 100px;
}
.logo-b {
	float: right;
	margin-left: 20px;
}
/* ===================================
	WATT JOB - JOIN US
====================================== */
#join-us img {
	width: 100%;
}
#join-us .bouton {
	font-size: 14px;
	border:0px!important;
    text-align: center;
    color: #fff;
    background-color: #998f88;
	padding:10px 25px;
    margin: 20px auto;
	text-transform: uppercase;
	letter-spacing: 1px;
}
#join-us .bouton:hover {
    color: #998f88;
    background-color: #fff;
}
#join-us {
	background: url("../images/wattjob/wattdesignbuild_wattjob_join_us.jpg");
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
#join-us .margin {
	margin: 150px 0;
}
#join-us .title {
	font-size: 30px;
	line-height: 35px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
	margin: 0 0 20px;
	text-align: center;
}
#join-us .subtitle {
	font-size: 16px;
	color: #fff;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: center;
}
.spacer {
	margin-bottom: 100px;
}
/* ===================================
	WATT JOB - JOIN US
====================================== */
#engagements .margin {
	margin: 150px 0;
}
#engagements img {
	width: 100%;
}
#engagements .title {
	font-size: 30px;
	line-height: 35px;
	text-transform: uppercase;
	color: #7d6e63;
	margin: 20px 0 30px;
}
#engagements .little-title {
	font-size: 18px;
	color: #000;
	text-transform: uppercase;
}
#engagements ul {
	padding: 0;
	margin: 15px;
}
#engagements li {
	padding-left: 10px;
	margin: 5px 0;
	font-size: 10px;
	list-style: disc;
	color: #888;
}
#engagements li span {
	font-size: 14px;
	line-height: 16px;
	color: #888;
}
/* ===================================
    CONTACT
====================================== */

#contact .title {
	font-size: 25px;
	line-height: 35px;
	text-transform: uppercase;
	color: #998f88;
	margin: 100px auto 50px;
}
#contact .subtitle {
	font-size: 17px;
	color: #888;
}
#contact a {
	text-decoration: underline;
}
#contact a:hover {
	text-decoration: none;
}
#contact .adresse {
	margin-top: 10px;
}
#contact .phone {
	margin: 10px 0;
}
#contact span {
	color: #998f88;
	font-weight: bold;
}

.logo-contact {
	margin:0 0 50px;
}
.adress {
	font-size: 16px;
	margin: 20px 0;
}
#mail {
	font-size: 16px!important;
	margin-top: 20px;
	text-decoration: underline;
}
#mail:hover, #mail-agence:hover {
	color: #998f88!important;
	text-decoration: none;
}
#mail-agence {
	font-size: 12px!important;
	margin-top: 20px;
	text-decoration: underline;
}
.logo-contact {
	margin: 0 auto 50px ;
}
.logo-contact img{
	width: 60%;
}
.valider-watt {
	text-align: center;
	background-color:#998f88;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	padding:10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	box-shadow:none;
	border: none;
}
.valider-watt:hover {
	background-color:#000;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
}

/* ===================================
    FOOTER
====================================== */
footer {
	margin-top: 100px;
	padding-top: 50px;
	background-color: #f2f2f2;
}
footer .skyline img {
	width: 100%;
}
footer .desk {
	margin: 100px auto 10px;
}
footer .mobile {
	display: none;
	margin: 50px auto 20px;
}
footer h5 {
	margin-bottom: 20px;
	color: #000;
}
footer .bloc-footer-text {
	padding-right:50px;
}
footer .footer-text { 
	line-height:22px;
	text-align:justify;
}

footer .footer-text a:hover {
	color: #998f88;
}
footer .footer-middle {
	padding-bottom: 20px;
}

footer ul li {
	padding: 1px 0;
}
footer ul li a {
	color: #626262;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1px;
}
footer ul li a:hover {
	color: #998f88;
	text-decoration: none;
}
footer ul.list-inline li a {
	color: #000;
	font-weight: 600;
}
footer ul.list-inline li a:hover {
	color: #998f88;
	font-weight: 600;
}
footer ul.list-inline li:first-child {
	padding-left: 6px;
}
.footer-middle ul, .footer-middle ul {
	margin: 0;
	padding: 0;
	
}
.spacing-line { 
	margin-top: 20px;
}
.margin-footer{
	margin: 10px auto;
}
.logo-societe a:hover {
	opacity:0.7!important;
}
.footer-social {
	text-align: right;
}
.footer-social i {
	font-size: 20px;
}
.footer-social a {
	margin: 0 5px;
	border: solid 1px #000;
	border-radius: 100%;
	padding:10px;
}
.footer-social a:hover {
	background-color: #000;
}
.footer-social a:last-child {
	margin-right: 0;
}
.footer-social a i {
	color: #000;
}
.footer-social a:hover i {
	color: #fff;
}
.footer-social img {
	width: 35px;
	height: 35px;
}
.footer-social .padding-facebook {
	padding: 0 2px;
}
.copyright {
	margin-top: 15px;
	font-size: 11px;
	color: #000;
}
.footer-signature img{
	width: 140px;
	height: 44px;
}
.footer-bottom {
	margin-top: 30px;
	margin-bottom: 30px;
}
.container-wattuid {margin-top: 0!important; padding-top: 0!important;}


/* ===================================
	MENTIONS LEGALES
====================================== */

#mentions {
	text-align: justify;
}

/* ===================================
    SCROLL TO TOP
====================================== */

#scroll_to_top {
	cursor: pointer;
	opacity: 0;
}
.scrollToTop {
	display: none;
	font-weight: bold;
	padding: 0;
	position: fixed;
	right: 45px;
	text-align: center;
	text-decoration: none;
	top: 91%;
	width: 40px;
	height: 40px;
	background-color:#998f88;
	z-index: 555;
	-webkit-transition: color .5s, background .5s, height .5s;
	-moz-transition: color .5s, background .5s, height .5s;
	-o-transition: color .5s, background .5s, height .5s;
	-ms-transition: color .5s, background .5s, height .5s;
	transition: color .5s, background .5s, height .5s
}
.scrollToTop i {
	color:#fff;
	font-size:20px;padding: 5px 0 0;
}
.scrollToTop:hover {
	background-color:#998f88;
}