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

/* © 2013 Aline Keller - www.alinekeller.ch */

/* CONTENTS
---------------------- //

01 Structure
02 Global elements
03 Header
04 Homepage
Footer


/* 01 STRUCTURE
-------------------------------------------------------------- */


body { background: #f5f4f3; overflow-x: hidden; }

body > div { overflow-x: hidden; }

.contentcenter { margin: 0 auto; position: relative; width: 1120px; }
#site-content { padding: 100px 0 0; }

.row { margin: 0 0 20px; }

.col { float: left; margin-right: 20px; }
.col:last-child { margin-right: 0; }

/* Column = 75px (* 12) / Gutter = 20px (* 13) => 1160px */

.col1 { width: 75px; }
.col2 { width: 170px; }
.col3 { width: 265px; }
.col4 { width: 360px; }
.col5 { width: 455px; }
.col6 { width: 550px; }
.col7 { width: 645px; }
.col8 { width: 740px; }
.col9 { width: 835px; }
.col10 { width: 930px; }
.col11 { width: 1025px; }
.col12 { width: 1120px; }

/* 02 GLOBAL ELEMENTS
-------------------------------------------------------------- */

/* Classes */

.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: "";
	clear: both;
	height: 0;
}
.clear	{ clear: both; }
.left 	{ float: left; }
.right	{ float: right; }
.center { display: block; margin: 0 auto; }

/* Texts */

a,
p,
input[type=button],
input[type=submit],
h1 a, h2 a, h3 a h4 a,
a h1, a h2, a h3, a h4, li {
	-moz-transition: color 0.2s ease-in-out, background-color 0.3s ease-in-out, border 0.3s ease-in-out;
	-o-transition: color 0.2s ease-in-out, background-color 0.3s ease-in-out, border 0.3s ease-in-out;
	-webkit-transition: color 0.2s ease-in-out, background-color 0.3s ease-in-out, border 0.3s ease-in-out;
	transition: color 0.2s ease-in-out, background-color 0.3s ease-in-out, border 0.3s ease-in-out;
}

.button:hover,
a:hover .button { background-color: #98b438; color: #fff; }

.disabled { opacity: 0.6 ; }

/* Images */
.img img {
  display: block;
  height: auto;
  width: 100%;
}


/* Lists */

.nav { list-style: none; margin: 0; padding: 0; }
.nav li { float: left; }

.nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.nav li {
	background: transparent;
	padding: 0;
}

/* Menus */

.dropdown { display: none; position: absolute; }
li:hover .dropdown { display: block; }

/* Forms */

.form-item,
.select-container {
  box-sizing: border-box;
  margin: 0 0 30px;
  position: relative;
  max-width: 900px;
}

.form-item-small {
	width:445px;
	float:left;
	margin:0 10px 0 0;
	position:relative;
	z-index:1;
}

input[type=button]:hover,
input[type=submit]:hover,
input.form-submit:hover { color: #006476; }

input.cancel {
  background: #ecebea;
  color: #858585;
  margin: 0 0 0 10px;
  text-shadow: none;
}
input.cancel:hover { background: #cd050f; color: #fff; }

input.delete { background: #cd050f; color: #fff; }
input.delete:hover { background: #b1040d; }

select optgroup, select option,
select optgroup option { font: 1em/1.2em 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; }
select optgroup {
	border-top: 1px solid #eeebe8;
  font-style: normal;
  font-weight: 600;
  margin: 10px 0 0;
  padding: 10px 5px 10px;
}
select option { padding: 1px 5px; }
select optgroup option { padding: 1px 0 1px 20px; }
select optgroup option:first-child { margin: 4px 0 0; }

fieldset { border: 0; margin: 0; padding: 0; }
fieldset legend {
  border-bottom: 1px solid #e3e4e5;
  color: #9b9e9f;
  display: block;
  font-weight: 500;
  margin-bottom: 30px;
  padding-bottom: 10px;
  width: 100%;
}

.form-item input,
.form-item textarea,
.form-item select { margin-bottom: 0; }

.form-item span.error {
  border: 0;
  border-radius: 2px;
  color: #fff;
  display: block;
  font-size: 0.875em;
  font-weight: 600;
  line-height: 1.5em;
  margin: 4px 0 0;
  padding: 5px 10px;
  position: relative;
  z-index: 1;
}

form span.error,
form span.error:before {
	background: #dc664b;
}
form span.error:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  border-radius: 1px;
	content: '';
	height: 10px;
	top: -5px;
	position: absolute;
  transform: rotate(45deg);
	width: 10px;
}

/*
.form input[type=button],
.form input[type=submit] { margin: 0 0 0 210px; }
*/

.main-content .form p { font-size: 1em; }

.form label,
.form input { font-size: 0.9375em; }
.form input[type=submit] { font-size: 1em; }

.form span.error:empty { display: none; }


/* 03 HEADER
-------------------------------------------------------------- */

#site-header {
	background: #fff;
	border-top: 4px solid #57b8c8;
	height: 100px;
	position: fixed;
	z-index:99;
	width:100%;
	box-shadow:0px 1px 10px #cccccc;
}

#site-header .contentcenter { padding: 15px 0 0; }
#site-header #logo-container {
	float: left;
	margin: 0;
}

#site-header #logo {
	background: transparent url(../img/layout/logo-dyod.png) no-repeat;
	float: left;
	display: block;
	height: 70px;
	text-indent: -3000px;
	width: 240px;
}

.svg #site-header #logo { background-image: url(../img/layout/logo-dyod.svg?resetnew); }
#site-header #mini-nav {
	float: right;
	height: 22px;
	line-height: 22px;
	list-style-type: none;
	padding: 10px 20px 2px;
	position: absolute;
	right: 0;
	top: -5px;
  white-space: nowrap;
	z-index: 1000;
}

#site-header #mini-nav li {
	line-height: 22px;
}

#site-header #user a { font-weight: 600; }
#site-header #mini-nav a { color: #007d93; }
#site-header #mini-nav a:hover { color: #7DC8D4; }
#site-header #mini-nav .dropdown {
	background: #fff;
	-moz-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 0 rgba(0,0,0,0.1);
	box-shadow: 0 1px 0 rgba(0,0,0,0.1);
	margin: 0;
  padding: 5px 0;
}

#site-header #user {
	color: #9b9e9f;
	float: left;
	font-size: 0.75em;
	text-transform: uppercase;
}
#site-header #user .nav > li {
  font-weight: 600;
  padding-left: 0;
  position: relative;
}
#site-header #user .nav .userpicture {
    background: none repeat scroll 0 0 #ecebea;
    clear: both;
    display: block;
    height: 65px;
    margin: 0 auto 5px;
    padding: 5px;
    width: 65px;
}
#site-header #user .nav .userpicture img { clear: both; margin: 0 auto; }
#site-header #user .dropdown {
  border: 1px solid #e4e0dc;
  margin-top: 21px;
  width: 200px;
  text-transform: none;
}
#site-header #user .dropdown:before {
  background: transparent url("../img/layout/user-dropdown-arrow.png") no-repeat 0 0;
  display: block;
  content: "";
  height: 10px;
  left: 50%;
  margin: 0 0 0 -13px;
  position: absolute;
  top: -10px;
  width: 26px;
}
#site-header #user .dropdown li {
  float: none;
  font-size: 1.167em /* 14px */;
  font-weight: 400;
  padding: 5px 20px;
  text-align: center;
}
#site-header #user .dropdown li.user {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding: 10px 20px;
}
#site-header #user .dropdown li.user .username { font-weight: 800; margin: 0 0 1em; }
#site-header #user .nav > li > a { padding-bottom: 30px; }

#site-header #lang {
	border-left: 1px solid #d5d6d6;
  float: right;
  font-size: 0.75em;
  margin: 0 0 0 20px;
}

#site-header #lang ul { margin: 0 -20px 0 0; padding: 0; }
#site-header #lang li {
	background: #fff url(../img/layout/fl-dropdown.png) no-repeat right 10px top 9px;
	padding: 0 40px 0 20px; position: relative;
	list-style-type:none;
}

.svg #site-header #lang li { background-image: url(../img/layout/fl-dropdown.svg); }
#site-header #lang .dropdown { left: 0; width: 100%; }
#site-header #lang .dropdown li { background: transparent; }

#site-header #menu {
	float: right;
	margin: 30px 0 0;
}

#site-header #menu li {
	background: transparent;
	font-size: 0.875em;
	font-weight: 600;
	height: 33px;
	line-height: 33px;
	margin: 0 0 0 45px;
	padding: 0;
	text-transform: uppercase;
}


#site-header #menu ul {
	float:left;
}

#site-header #menu a {
	color:#007d93;
}


#site-header #menu a:hover {
	color: #7DC8D4;
}

.offcanvas-nav{
	display:none;
}

/* Search */

#search {
	background: #57B8C8;
	height: 40px;
	padding: 20px 0;
	position: relative;
	z-index: 0;
}
.rgba #search { box-shadow: -10px 0px 0px 10px rgba(0,0,0,0.03); }

#site-header + #search { margin-top: 10px; }

#search fieldset {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	background: #fff;
	border: 0;
	border-radius: 3px;
	float: left;
	height: 40px;
	margin: 0 20px 0 120px;
	padding: 0;
	width: 875px;
}
#search input,
#search select {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
}
#search #search-category, #search #distance {
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	background: #f5f5f5 url(../img/layout/fl-dropdown.gif) no-repeat right center;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	float: left;
	height: 40px;
	overflow: hidden;
}
#search #search-category {
	width:260px;
}

#search #distance {
	width:90px;
}

#search #search-category select, #distance select {
	-webkit-appearance: caret;
	font-size: 0.8125em;
	font-weight: 600;
	height: 40px;
	padding: 10px 15px;
	text-transform: uppercase;
	width: 260px;
}

#distance select {
	width:90px;
}

#search #search-category select option { font-size: 1.08em; text-transform: none; }
#search input[type=search] {
  -webkit-appearance: caret;
	float: left;
	height: 40px;
	line-height: 40px;
	margin: 0;
	padding: 0 15px;
	width: 300px;
}
#search input[type=text] {
	-webkit-appearance: caret;
	float: left;
	height: 40px;
	line-height: 40px;
	margin: 0;
	padding: 0 15px;
	width: 180px;
}
#search input[type=submit] {
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	background: rgb(0, 124, 146) url(../img/layout/search.svg) no-repeat right center;
	box-shadow: none;
	float: right;
	height: 40px;
	padding: 0;
	width: 45px;
	cursor:pointer;
}
#search .link {
	background: transparent url(../img/layout/puce.png) no-repeat left center;
	color: #fff;
	font-size: 0.8125em;
	float: left;
	height: 30px;
	line-height: 30px;
	margin: 5px 0 0;
	padding: 0 0 0 20px;
}
#home #search {
	margin-top:10px;
	background:#57B8C8;
	box-shadow:0 10px rgba(0,0,0,0.05);
	padding:25px;
}

#home #search .link {
	color:#323435;
	text-transform:uppercase;
}

.services-button.search-button {
	visibility:hidden;
	position:absolute;
}

/* Header Homepage */

.social {
	float:right;
	margin-left:50px;
	margin-top:3px;
}


/* 04 HOMEPAGE
-------------------------------------------------------------- */

h2 {
	font-family:Oswald, Arial, sans-serif;
  color: #323435;
  font-size: 2.0em;
  font-weight: 400;
  margin: 0 0 30px;
  text-transform:uppercase;
}

h3 {
  color: #464849;
  font-size: 1.45em;
  font-weight: 400;
  margin: 10px 0 10px;
  text-transform:uppercase;
}


/* Carousel */
.image-wrap {
	position:relative;
	width:100%;
	max-height:370px;
}

.text-wrap {
	position:absolute;
	top:40px;
	left:140px;
}

#header-slider #header-carousel h3 {
	font-family:Oswald, Arial, sans-serif;
	text-align:left;
	text-transform:none;
	color:#fff;
	font-size:1.90em;
	margin-bottom:35px;
}

#header-slider #header-carousel p {
	color:#fff;
	font-weight:bold;
	margin-bottom:40px;
}

#header-slider #header-carousel .button {
	background-color:#60a940;
}

#reportage-carousel .item{
	padding:0 20px;
}

#reportages {
	background:#fff;
	padding:50px 0;
}

#reportages h2 {
	font-family:Oswald, Arial, sans-serif;
	font-size:22px;
	margin-bottom:40px;
	border-bottom:3px solid #E2E2E2;
	line-height:0.05em;
}

#reportages h2 span {
	background:#fff;
	padding-right:20px;
}


/* Modal */
.myImg {
  cursor: pointer;
  transition: 0.3s;
  max-width:370px;
  margin:auto;
}

.myImg:hover {opacity: 0.7;}

.modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
}

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

.modal-content {
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.8s;
    animation-name: zoom;
    animation-duration: 0.8s;
}

@-webkit-keyframes zoom {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes zoom {
    from {opacity:0;}
    to {opacity:1;}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}

#home .button {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background: #007d93;
	border-radius: 5px;
	color: #fff;
	padding: 11px 20px;
  text-align: center;
	box-shadow:none;
	text-transform:uppercase;
	font-size: 0.875em;
	font-weight: 600;
	height:auto;
	display:inline-block;
}

#contact {
	padding:110px 0;
	background: linear-gradient(to right, rgba(0,125,147,0.2), rgba(0,125,147,0.9)), url(../img/img-contact.jpg) no-repeat center;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	color:#fff;
}

#contact h2 {
	text-align:center;
	margin-bottom:30px;
	color:#fff;
}

#contact .services-button:hover {
	background:#fff;
}


/* platforme */
#platform {
	padding:80px 0 50px;
	background:#fff;
}

#platform h4 {
	font-family:Oswald, Arial, sans-serif;
	margin-top:20px;
	font-weight:600;
}

#platform p {
	font-size:15px;
}

#platform a {
	color:#464849;
}

#platform img {
	display:block;
	height:50px;
}

/* news */
#news {
	padding:50px 0;
	background:#fff;
}

#news h2 {
	font-family:Oswald, Arial, sans-serif;
	font-size:22px;
	margin-bottom:40px;
	border-bottom:3px solid #E2E2E2;
	line-height:0.05em;
}

#news h2 span {
	background:#ffffff;
	padding-right:20px;
}

#news .news-description {
	padding:20px;
	text-align:center;
}


#news .news-wrapper {
	height:160px;
	overflow:hidden;
	content:"";
	position:relative;
}

#news .news-wrapper:after {
	content:'';
	width:100%;
	height:140px;
	position:absolute;
	left:0;
	top:30px;
	background:linear-gradient(to bottom,rgba(245,244,243,0) 0%,#f5f4f3 100%);
	pointer-events:none;
}

#news .col {
	background:#F5F4F3;
	margin:0 5px;
}

#news h4 {
	margin-bottom:0.5em;
	font-weight:600;
}

#news h5 {
	font-weight:400;
	margin-bottom:5px;
	font-style:italic;
}

#news .news-description .button {
	margin-top:20px;
}

#news .tags {
	color: #9b9e9f;
  font-size: 0.8125em;
  padding-top:20px;
  border-top:1px solid #edeef0;
}

/* services */

#services {
	padding:100px 0 100px;
	text-align:center;
	background:#fff;
}

#services p {
	max-width:750px;
	margin:auto;
}

#services a:first-child {
	color:#464849;
}

#services ul {
	margin-top:40px;
	list-style-type:none;
	padding-left:0;
}

#services ul li {
	float:left;
	width:370px;
	background-image:none;
}

#services ul p {
	min-height:70px;
	margin:auto;
	width:250px;
}

.services-button {
	background:#007d93;
	color:#fff;
	border-radius:5px;
	padding:10px 90px;
	text-transform:uppercase;
	border: 3px solid #007d93;
	font-weight:600;
}

#home li:hover .services-button {
	background-color:inherit;
	border: 3px solid #007d93;
	color:#007d93;
}

.services-button:hover {
	background-color:inherit;
	border: 3px solid #007d93;
}

/* References */
#references {
	padding:110px 0;
	min-height:520px;
}

.reference-description {
	min-height:240px;
}

#references .reference-carousel {
	text-align:center;
}

#references .reference-carousel img {
	max-width:370px;
}

#references .col6:nth-child(2) {
	max-width:480px;
}


/* 06 SERVICE
-------------------------------------------------------------- */
#service-header {
	height:460px;
	text-align:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

.photo {
	background: linear-gradient(to right, rgba(178,223,230,0.7), rgba(178,223,230,0.7)), url(../img/img-mainphoto.jpg) no-repeat center;
}

.redaction {
	background: linear-gradient(to right, rgba(178,223,230,0.7), rgba(178,223,230,0.7)), url(../img/img-mainredaction.jpg) no-repeat center;
}

.reportage {
	background: linear-gradient(to right, rgba(178,223,230,0.7), rgba(178,223,230,0.7)), url(../img/img-mainreportage.jpg) no-repeat center;
}

#service-header .title {
	padding-top:120px;
}


/* Description */
#description {
	padding:100px 0 100px;
}

#description .owl-carousel {
	text-align:center;
	margin-top:12px;
}

#description .owl-carousel img {
	max-height:370px;
}

#description .col6:first-child {
	max-width:490px;
}

#description .owl-theme .owl-controls .owl-buttons .owl-prev{
  left: -20px;
  top: 47%;
}

#description .owl-theme .owl-controls .owl-buttons .owl-next{
  right: -20px;
  top: 47%;
}

#description h3 {
	font-weight:600;
	font-size:17px;
	text-transform:none;
	margin-top:20px;
}

.price-list {
	margin-bottom:50px;
	margin-top:20px;
}

#more {
	text-align:center;
	background:#fff;
	padding:50px 0 50px;
}

#more .col6 {
	list-style-type:none;
	padding:30px 0 0;
	float:left;
}

#more p {
	max-width:280px;
	margin:auto;
	color:#464849;
}

/* ABOUT
-------------------------------------------------------------- */
#about-header {
	text-align:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
}

#about-header .title {
	padding-top:40px;
}

.about-description {
	padding:50px 0;
}

.about-description p {
	max-width:540px;
	padding-right:20px;
}

/* OFFERS
-------------------------------------------------------------- */
.offer-description {
	padding:50px 0;
}

.offer-description .col6 {
	width:540px;
}

.offer-description .col {
	margin-right:40px;
}

.offer-description .col:last-child {
	margin-right:0;
}

.offer-description h4 {
	padding:10px;
	margin-bottom:40px;
	background-color:#57B8C8;
	color:#fff;
	font-family:Oswald, Arial, sans-serif;
	font-size:21px;
	text-align:center;
}

.offer-description .offer-details {
	padding:0 20px;
}

.offer-description h5 {
	color:#57B8C8;
	padding-left:20px;
}

.offer-description img {
	display:block;
	margin:20px auto;
}

.offer-description ul {
	list-style-type:none;
	padding:0 20px;
	width:100%;
}

.offer-description ul li {
	width:32.5%;
	float:left;
}

.offer-description ul li p {
	padding:0 20px 0 0;
	margin-bottom:40px;
}

.offer-description .userpicture img {
	margin:0;
	border-radius:50%;
}

.offer-description .user-content {
	padding:10px 0 0 80px;
}

.offer-description .user-content p:nth-of-type(2) {
	color:#57B8C8;
}

.offer-action {
	clear:both;
	background-color:#E2E2E2;
	padding:10px 10px;
	margin:0 0 40px;

}

.offer-action span {
	font-weight:bold;
	font-family:Oswald, Arial, sans-serif;
	font-size:18px;
}

.offer-action .button {
	display:inline-block;
	background-color:#57B8C8;
	color:#fff;
	border-radius:5px;
	padding:11px 20px;
	margin:10px 0 10px 10px;
	text-transform:uppercase;
	font-size:13px;
	font-weight:bold;
}

.offer-images {
	clear:both;

}
.offer-images h3 {
	text-align:center;
}
.offer-images img {
	width:130px;
	margin:0 auto 40px;
}


/* FOOTER
-------------------------------------------------------------- */

#site-footer {
	color: #fff;
	background: #4c4c4c;
	padding: 30px 0;
}

#site-footer h4 {
	font-family:Oswald, Arial, sans-serif;
	color: #fff;
	text-transform:uppercase;
	font-size:1.35em;
}

#site-footer li {
	opacity:0.5;
	font-size:0.8em;
	text-transform:uppercase;
}

#site-footer a {
	color:#fff;
}

#site-footer ul {
	list-style-type:none;
	padding-left:0;
}

/* Copyright */

#site-footer .copyright {
	clear: left;
	color: #9b9e9f;
	float: left;
	font-size: 0.8125em;
}
#site-footer .copyright span:first-child { margin-left: 0; }
#site-footer .copyright span { color: #9b9e9f; margin: 0 0.25em; }
#site-footer .copyright a { font-weight: 600; }




/*--------------------------------------------------------------

	Media Queries - Desktop from 1000px to 1100px

	Column = 60px (* 12) / Gutter = 20px (* 13) => 980px

--------------------------------------------------------------*/

@media screen and (max-width: 1200px) {

	.contentcenter { width: 940px; }

	.col1 { width: 60px; }
	.col2 { width: 140px; }
	.col3 { width: 220px; }
	.col4 { width: 300px; }
	.col5 { width: 380px; }
	.col6 { width: 460px; }
	.col7 { width: 540px; }
	.col8 { width: 620px; }
	.col9 { width: 700px; }
	.col10 { width: 780px; }
	.col11 { width: 860px; }
	.col12 { width: 940px; }

/* 01 STRUCTURE
-------------------------------------------------------------- */

  body{ background:#464849;}
  #site-content{ background: #f5f4f3; }


/* 02 GLOBAL ELEMENTS
-------------------------------------------------------------- */
   /* Forms */

  .form-item { width: 770px; } /*.select-container  */
  .form-item-small { width:380px; }

  #site-header .contentcenter { position:relative; }


/* 03 HEADER
-------------------------------------------------------------- */

  /* Header homepage */

  #home #site-header .contentcenter { position: relative; }

  #home #site-header #mini-nav {
    background: none;
    box-shadow: none;
  }

  #site-header #user .dropdown {
    border-radius: 2px;
  }
  #home #site-header #user .dropdown {
    margin-top: 12px;
  }
  #home #site-header #user .dropdown li { font-size: 0.875em; }
  #home #site-header #user .dropdown a { color: #323435; }

  #home #site-header #lang {
    border: 0;
    height: 36px;
    line-height: 36px;
    width: auto;
  }
  #home #site-header #lang > ul > li {
    background: transparent url("../img/layout/fl-dropdown.png") no-repeat scroll right 10px top -14px;
    height: 36px;
    line-height: 36px;
    padding: 0px 35px 0px 10px;
    position: relative;
  }
  #home #site-header #lang .nav li,
  #home #site-header #lang .nav li a { float: none; margin: 0; }
  #home #site-header #lang .dropdown {
    background: rgb(255,255,255);
    border-radius: 2px;
    display: none;
    left: 0;
    padding: 3px 0;
    position: absolute;
    width: 100%;
  }
  #home #site-header #lang .dropdown a {
    color: #323435;
    padding: 2px 10px;
  }

  #site-header #lang li {
	padding: 0 40px 0 0; position: relative;
}
  #home #site-header #lang li:hover .dropdown { display: block; }

  #site-header #menu li.new-offer {
    position: absolute;
    top: 0;
    right: 250px;
  }

  /*search*/
  	#search fieldset { margin-left: 0; }

/* 04 HOMEPAGE
-------------------------------------------------------------- */

  #home #site-header .offcanvas-nav { display: none; }

	#header-slider #header-carousel h3 {
		margin-bottom:10px;
	}

	.text-wrap { right:60px; }
	.text-wrap-left { left: 70px; }

	#services ul li { width:50%; margin-bottom:60px; }

	.offer-description .col6 {
		width:100%;
	}

}

/*--------------------------------------------------------------

	Media Queries - Small desktop (under 1000px) & vertical tablets (768px)

	Column = 40px (* 12) / Gutter = 15px (* 13) => 675px

--------------------------------------------------------------*/

@media screen and (max-width: 999px) {

	.contentcenter { width: 645px; }
	.col { margin-right: 15px; }
	.first { margin-left: 15px; }

	.col1 { width: 40px; }
	.col2 { width: 95px; }
	.col3 { width: 150px; }
	.col4 { width: 205px; }
	.col5 { width: 260px; }
	.col6 { width: 315px; }
	.col7 { width: 370px; }
	.col8 { width: 425px; }
	.col9 { width: 480px; }
	.col10 { width: 535px; }
	.col11 { width: 590px; }
	.col12 { width: 645px; }

	#site-content {
		padding-top:85px;
	}

/* 02 GLOBAL ELEMENTS
-------------------------------------------------------------- */

  /* MENU OFF-CANEVAS */
   #site-container{
    position:relative;
    right:0;
    width:100%;
    -moz-transition: right 0.3s ease 0s;
    -webkit-transition: right 0.3s ease 0s;
    transition: right 0.3s ease 0s;
  }
  /* button off-canvas*/
  .offcanvas-nav,.offcanvas-nav-close{
    display: block;
    float: right;
    height: 45px;
    margin-top: 2px;
    text-indent: -3000em;
    width: 45px;
    z-index: 10;
  }

  .offcanvas-nav { background: url("../img/layout/icon-offcanvas.png") no-repeat 0 0 ; }
  .offcanvas-nav.close {
    background-position: -45px 0;
    position: absolute;
    top: 10px;
    right: 4%;
  }
  .svg .offcanvas-nav { background-image: url("../img/layout/icon-offcanvas.svg"); }
  .offcanvas #site-container{ right:40%; }
  #site-header { height: 70px; }


/* 03 HEADER
-------------------------------------------------------------- */

  /*menu*/
  #site-header {
    background: #fff;
    padding: 6px 0;
    width: 100%;
    z-index: 99;
  }
  #home #site-header .offcanvas-nav { display: block; }
  #site-header #logo-container {
    background: transparent !important;
    float: left;
    height: 50px;
    margin: 0;
    position: static;
    width: 130px;
  }
  #site-header #logo-container a {
    background-size: auto 100%;
    height: 50px;
    margin: 0;
    width:140px;
  }
  #home #site-header #mini-nav {
    float: none;
    position: absolute;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
  }

  #site-header #menu {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
    padding: 20px 20px;
    position:absolute;
    text-align: center;
    right:-40%;
    top:20px;
    width:40%;
  }
  #site-header #menu ul {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    float:none;
  }

  #site-header #menu li a {
    border-bottom:1px solid #666;
    margin:0;
    padding:10px;
    height:auto;
    line-height: 1.8em;
    width: 165px;
  }
  #site-header #menu li {
    margin: 0;
    width: 100%;
    margin: 0 0 10px;
  }


  #site-header #menu li:nth-last-child(2) a {
    border:0;
  }

  #site-header #menu li a {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color:#fff;
    display: block;
    font-size: 0.875em;
    height:auto;
    padding: 0 0 10px;
    top: 0;
    width:100%;
  }

  #site-header .contentcenter {
    position: static;
  }
  #home #site-header .contentcenter {
    position: static;
  }
   /*mini nav*/
   #site-header #mini-nav{
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    background:none;
    border-top: 4px solid #57B8C8;
    box-sizing: border-box;
    height:40px;
    right:-40%;
    width:40%;
  }
  .svg #site-header #lang li {
    display: inline-block;
    float: none;
    background: none;
    margin-bottom: 5px;
  }

  #site-header #mini-nav a { color:#fff; }

  #site-container #site-header #user {
  	float:none;
  	text-align:center;
  }

  #site-container #site-header #lang a,
  #site-container #site-header #lang .dropdown li { display: inline-block; }

  #site-container #site-header #lang .dropdown {
    background: transparent;
    box-shadow: none;
    display: inline-block !important;
    padding: 0;
    position: static;
    width: auto;
  }
  #site-container #site-header #lang > ul > li { background: transparent; padding: 0; }
  #site-container #site-header #lang li a { padding: 10px; line-height: 1em; }
  #site-container #site-header #lang > ul > li:first-child { margin-left: -10px; }
  #site-container #site-header #lang .dropdown a { color: rgba(255,255,255,0.5); padding: 10px; }
  #site-header #lang {
    border: 0;
    float:none;
    text-align: center;
    width:100%;
    margin: 0;
  }
  #site-header #lang .nav li a { display: block; float: left; font-weight: bold; }
  #site-header #lang li { background:none; padding: 0 0 0 10px;}
  #site-header #lang .nav > li { padding: 0;}
  #site-header #lang .nav li li a{font-weight:normal;}
  #site-header #lang .dropdown {
    background: none;
    box-shadow: none;
    display: inline-block;
    padding: 0;
    position: static;
    width: auto;
  }

  #site-header .has-dropdown.is-open .dropdown {
    display: block;
  }
  #site-header .has-dropdown > a {
    background: url("../img/layout/arrows-offcanvas.png") no-repeat scroll right center rgba(0, 0, 0, 0);
    background-position: 95% 18px;
  }
  #site-header .has-dropdown.is-open > a {
    background-position: 95% -10px;
  }

  li:hover .dropdown { display: none; }

  #site-header #logo { background-size:70%; }

  .social {
  	float:none;
  	margin-left:0;
  }

	#search { height: auto; }
	#search fieldset { margin: 0 0 10px; width: 645px; height: 80px; }
	#search #search-category { width: 345px; }
	#search #search-category select { padding: 10px; width: 345px; }
	#search #distance, #search #distance select { width:300px; }
	#search input[type=text] { width: 300px; }
	#search .link { line-height: 1.5em; }
	#site-header + #search { margin-top: 0; }

	#home #search .link { color:#323435; text-transform:none; }


/* 04 HOMEPAGE
-------------------------------------------------------------- */

  #home #site-header #lang { margin: 0; }

	#site-footer .social { float: none; margin: 0 0 20px; }

	.text-wrap { top:10px; right:170px; }
	.text-wrap-left { top:90px; left:170px; }

	#services ul li { width:50%; }

	.services-button {
		padding: 10px 65px;
	}


	#services, #contact, #description, .about-description {
		padding:100px 0 50px;
	}

	#references {
		padding:50px 0 100px;
	}

	#description, .about-description {
		padding:50px 0;
	}

	.reference-description {
		height:280px;
	}

	#header-slider #header-carousel h3 {
		margin-bottom:10px;
	}

	#references .reference-carousel img {
		max-width:240px;
	}

	.myImg {
    max-width:240px;
	}

/* 06 GLOBAL SITE CONTENT
-------------------------------------------------------------- */

	.main-content .content-block, .main-content .col8 { width:100%; }

	.form-item { width:auto;
	}
	.form-item-small {
		width:100%;
	}

	.offer-description ul li {
		width:100%;
	}
	.offer-action .button {
		display:block;
		width:100px;
		margin:20px auto 0;
	}
	.offer-action span {
		display:block;
		text-align:center;
	}
}

/*  -----------------------------------------------------------

	Media Queries - Mobile phones & tablet (under 768px)

	Column = 25px / Gutter = 10px => 430px

------------------------------------------------------------ */


@media screen and (max-width: 767px) {

	.contentcenter { width: 410px; }
	.col { float: none; margin: 0 0 20px; }
	.col:last-child { margin: 0; }

	.col1, .col2, .col3, .col4, .col5, .col7, .col8, .col9, .col10, .col11, .col12 { width: 410px; }
	.col6 { float: left; margin: 0 10px 0 0;}



  /* HOMEPAGE */
  #site-header .contentcenter {
    position: static;
}

	#home h2 { font-size: 1.7em; margin-bottom: 0.5em; }
	#home h3 { font-size: 1.25em; }

	.text-wrap, .text-wrap-left { top: 40px; width:350px; }
	.text-wrap h1, .text-wrap-left h1 { font-size:1.6em; width:350px; }
	#services ul li { width:100%; }

  /* HEADER */

  .offcanvas #site-container { right: 78%; }

  #site-header #btn-offcanvas { margin-top: 3px; }
  #site-container #site-header #mini-nav {
    right: -78%;
    width: 78%;
  }

  #site-header.responsive {
  	height:190px;
  }

  #site-header #menu {
    right: -78%;
    width: 78%;
  }

  #header-slider #header-carousel {
  	visibility:hidden;
  }

  #header-slider #header-carousel img {
  	height:200px;
  }

  #references .reference-carousel img {
  	height:300px;
  }

  #header-carousel h2 {
	left:50px;
	top:40px;
	}

  #description .owl-carousel {
  	margin-top:55px;
  }

  #references .services-button, #description .services-button {
		padding: 10px 10px;
	}

	#reportages h2, #news h2 {
		margin-bottom:40px;
	}

	#references .content {
		margin-top:50px;
		text-align:center;
	}

	#home #search {
		margin-top:-200px;
		padding:25px 0;
	}

	#search { height: 160px; }
  #search fieldset {
    width: 100%;
    padding: 0 0 3em 0;
    margin: 0 0 5px 0;
  }

  #search #search-category {
    width: 100%;
    border-bottom-left-radius: 0px;
    border-bottom: 1px solid #efece9;
  }
  #search #search-category select {
    width: 100%;
  }

  #search #distance {width:365px}

  footer .content {
  	margin-bottom:25px;
  }

  .offer-description .user-content {
		margin-bottom:50px;
	}
	.offer-description ul {
		padding:0;
	}
	.offer-images img {
		width:100%;
		margin:0 auto 40px;
	}
}

/*  -----------------------------------------------------------

	Media Queries - Mobile phones (under 480px)

	Column = 15px / Gutter = 10px => 310px

------------------------------------------------------------ */

@media screen and (max-width: 479px) {

	.contentcenter { width: 290px; }
	/*.col { float: none; margin: 0 10px; }*/

	.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { width: 290px; }

	/* HEADER */

	/* HOMEPAGE */
  .offcanvas #site-container { right: 80%; }


	#home h3 { font-size: 1.125em; }

  dl dt {
    width: 100%;
  }

  .reference-description {
		min-height:310px;
	}

  #header-carousel h2 {
		left:20px;
		top:40px;
	}
	#search #distance {width:255px;}
}