@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
/*
Theme Name: Docks de Saint-Ouen
Theme URI: http://underscores.me/
Author: Agence 4août
Author URI: http://4aout.fr
Description: Theme Wordpress pour les Docks de Saint-Ouen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dso
Tags:

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Docks de Saint-Ouen is based on Underscores http://underscores.me/, (C) 2012-2016 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# Accessibility
# Alignments
# Clearings
# Widgets
# Content
	## Posts and pages
	## Asides
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
html {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust:     100%;
}

body {
	margin: 0;
}

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

audio,
canvas,
progress,
video {
	display: inline-block;
	vertical-align: baseline;
}

audio:not([controls]) {
	display: none;
	height: 0;
}

[hidden],
template {
	display: none;
}

a {
	background-color: transparent;
}

a:active,
a:hover {
	outline: 0;
}

abbr[title] {
	border-bottom: 1px dotted;
}

b,
strong {
	font-weight: bold;
}

dfn {
	font-style: italic;
}

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

mark {
	background: #ff0;
	color: #000;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sup {
	top: -0.5em;
}

sub {
	bottom: -0.25em;
}

img {
	border: 0;
}

svg:not(:root) {
	overflow: hidden;
}

figure {
	margin: 1em 40px;
}

hr {
	box-sizing: content-box;
	height: 0;
}

pre {
	overflow: auto;
}

code,
kbd,
pre,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
	color: inherit;
	font: inherit;
	margin: 0;
}

button {
	overflow: visible;
}

button,
select {
	text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}

button[disabled],
html input[disabled] {
	cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input {
	line-height: normal;
}

input[type="checkbox"],
input[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

legend {
	border: 0;
	padding: 0;
	    display: none;
}

textarea {
	overflow: auto;
}

optgroup {
	font-weight: bold;
}

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

td,
th {
	padding: 0;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
button,
input,
select,
textarea {
	color: #404040;
	font-size: 16px;
	font-size: 1rem;
	line-height: 1.333;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
	text-transform: uppercase;
	font-weight: 700;
}

h2 {font-size: 33px}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", Courier, monospace;
	font-size: 15px;
	font-size: 0.9375rem;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
	font-size: 15px;
	font-size: 0.9375rem;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
	box-sizing: border-box;
}

*,
*:before,
*:after { /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
	box-sizing: inherit;
}

body {
	background: #fff; /* Fallback for when there is no custom background color defined. */
}

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

blockquote,
q {
	quotes: "" "";
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
	list-style-position: inside;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: bold;
}

dd {
	margin: 0 1.5em 1.5em;
}

img {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
}

button:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="submit"]:focus,
button:active,
input[type="button"]:active,
input[type="reset"]:active,
input[type="submit"]:active {
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
}

select {
	border: 1px solid #ccc;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
	color: #004f9f;
	text-decoration: none
}

a:visited {
	color: #004f9f;
}

a:hover,
a:focus,
a:active {
	text-decoration: underline
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
	clear: both;
	display: block;
	float: left;
	width: 100%;
	z-index: 60;
}

.main-navigation ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	text-decoration: none;
}

.main-navigation ul ul {
}

.main-navigation ul ul ul {
}

.main-navigation ul ul a {
}

.main-navigation ul ul li {

}

.main-navigation li:hover > a,
.main-navigation li.focus > a {
}

.main-navigation ul ul :hover > a,
.main-navigation ul ul .focus > a {
}

.main-navigation ul ul a:hover,
.main-navigation ul ul a.focus {
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	left: 100%;
}

.main-navigation .current_page_item > a,
.main-navigation .current-menu-item > a,
.main-navigation .current_page_ancestor > a,
.main-navigation .current-menu-ancestor > a {
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {
	.menu-toggle {
		display: none;
	}
	.main-navigation ul {
		display: block;
	}
}

.site-main .comment-navigation,
.site-main .posts-navigation,
.site-main .post-navigation {
	margin: 0 0 1.5em;
	overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	float: left;
	width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	float: right;
	text-align: right;
	width: 50%;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: bold;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
	outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
	display: inline;
	float: left;
	margin: 5px 20px 20px 0;
}

.alignright {
	display: inline;
	float: right;
	margin: 5px 0 20px 20px;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
	content: "";
	display: table;
	table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
	clear: both;
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
	margin: 0 0 1.5em;
}

/* Make sure select elements fit in widgets. */
.widget select {
	max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
	display: block;
}

.hentry {
	margin: 0 0 1.5em;
}

.byline,
.updated:not(.published) {
	display: none;
}

.single .byline,
.group-blog .byline {
	display: inline;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Asides
--------------------------------------------------------------*/
.blog .format-aside .entry-title,
.archive .format-aside .entry-title {
	display: none;
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation, /* Older / Newer Posts Navigation (always hidden) */
.infinite-scroll.neverending .site-footer { /* Theme Footer (when set to scrolling) */
	display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 0 5px rgba(0,0,0,0.4)
}

.wp-caption .wp-caption-text {
	margin: 10px 0;
}

.wp-caption-text {
	text-align: left;
	font-style: italic;
	font-size: 14px
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
	margin-bottom: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	vertical-align: top;
	width: 100%;
}

.gallery-columns-2 .gallery-item {
	max-width: 50%;
}

.gallery-columns-3 .gallery-item {
	max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

.gallery-columns-5 .gallery-item {
	max-width: 20%;
}

.gallery-columns-6 .gallery-item {
	max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
	max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
	max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
	max-width: 11.11%;
}

.gallery-caption {
	display: block;
}



/*--------------------------------------------------------------
# DSO Styles HTML
--------------------------------------------------------------*/

/*  --- GENERAL --- */


body {font-family: 'Roboto Condensed', sans-serif}
.inner {max-width: 1280px; margin: 0 auto}
.overhidden,
.overflowhidden {overflow: hidden; height: 100%}


.exergue {
    font-size: 22px;
    color: #b4883c;
    margin: 20px 0;
    font-weight: 400
}

/* owl carrousel */
.owl-carousel .animated {-webkit-animation-duration: 1000ms;animation-duration: 1000ms; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.owl-carousel .owl-animated-in { z-index: 0;}
.owl-carousel .owl-animated-out { z-index: 1;}
.owl-carousel .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut;}
@-webkit-keyframes fadeOut { 0% {   opacity: 1; }
 100% {   opacity: 0; }}
@keyframes fadeOut { 0% {   opacity: 1; }
 100% {   opacity: 0; }}
.owl-height { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out;}
.owl-carousel { display: none; width: 100%; -webkit-tap-highlight-color: transparent; /* position relative and z-index fix webkit rendering fonts issue */ position: relative; z-index: 1;}
.owl-carousel .owl-stage { position: relative; -ms-touch-action: pan-Y;}
.owl-carousel .owl-stage:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.owl-carousel .owl-stage-outer { position: relative; overflow: hidden; /* fix for flashing background */ -webkit-transform: translate3d(0px, 0px, 0px);}
.owl-carousel .owl-controls .owl-nav .owl-prev,
.owl-carousel .owl-controls .owl-nav .owl-next,
.owl-carousel .owl-controls .owl-dot { cursor: pointer; cursor: hand; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.owl-carousel.owl-loaded { display: block;}
.owl-carousel.owl-loading { opacity: 0; display: block;}
.owl-carousel.owl-hidden { opacity: 0;}
.owl-carousel .owl-refresh .owl-item { display: none;}
.owl-carousel .owl-item { position: relative; min-height: 1px; float: left; -webkit-backface-visibility: hidden; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}

.owl-carousel.owl-text-select-on .owl-item { -webkit-user-select: auto; -moz-user-select: auto; -ms-user-select: auto; user-select: auto;}
.owl-carousel .owl-grab { cursor: move; cursor: -webkit-grab;cursor: -o-grab; cursor: -ms-grab; cursor: grab;}
.owl-carousel.owl-rtl { direction: rtl;}
.owl-carousel.owl-rtl .owl-item { float: right;}
.no-js .owl-carousel {display: block;}
.owl-dot {display: inline-block; height: 14px; width: 14px; background: #fff; border-radius: 50%; margin: 5px}
.owl-dot.active {background: #e30613}
.owl-nav {display: none}
.owl-carousel .owl-wrapper-outer {
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}
#content {padding-left: 40px}

/* header */
.home #masthead {position: absolute; z-index: 50; width: 100%}
.home .site-title {margin: 0; padding: 0}
.home .site-title a {text-indent: -9999em; position: absolute; top: 40px; left: 80px; width: 260px; height: 130px; background: url(images/logo.png) center no-repeat; background-size: 100%}


.site-header {width: 100%; position: fixed; top: 0; background: #fff; height: 95px; padding: 15px 60px; box-shadow: 0 0 5px rgba(0,0,0,0.3); z-index: 50}
.admin-bar .site-header {top: 32px}


.site-header .site-title {width: 130px; float: left}
.site-header .site-title a {text-indent: -9999em; width: 112px; height: 55px; background: url(images/logo_int.png) center no-repeat; background-size: 100%; display: block;}

.site-header .description {width: 490px; float: left; font-size: 24px; text-transform: uppercase; line-height: 1; color: #b5873c; padding-top: 10px; margin-left: 10px; font-weight: 300;}
.site-header .description img {float: right;     margin: -7px 0 0 10px;}
.site-header .links {width: 360px; float: right; text-align: right}
.site-header .links a {color: #b5873c; display: inline-block; padding: 10px; font-size: 30px; vertical-align: middle; text-align: center; line-height: 20px; text-decoration: none}
.site-header .links a span {font-size: 14px; color: #000; text-decoration: none; text-transform: uppercase}
.site-header .links a:hover span {text-decoration: underline;}
.site-header .links .separator {background: #b5873c; width: 1px; height: 95px; margin: -15px 5px; display: inline-block; vertical-align: top; }


.home .site-header {margin-top: -95px; opacity: 0; transition: all 500ms}
.home.sticky .site-header {opacity: 1; margin-top: 0}
.home.sticky .site-title a {position: relative; top: auto; left: auto; width: 112px; height: 55px; background: url(images/logo_int.png) center no-repeat; background-size: 100%}

.site-branding .links {width: 360px; float: right; text-align: right}
.site-branding .links a {color: #000; display: inline-block; padding: 10px; font-size: 30px; vertical-align: middle; text-align: center; line-height: 20px; text-decoration: none; margin-top: 30px}
.site-branding .links a span {font-size: 14px; color: #000; text-decoration: none; text-transform: uppercase}
.site-branding .links a:hover span {text-decoration: underline;}

/* menu */

#site_navigation {position: fixed; height: 100vh; left: -310px; top: 0; width: 350px; padding-right: 40px; background: #004f9f}
#close_nav,
#open_nav {width: 40px; height: 100vh; vertical-align: middle; display: flex; color: #fff; text-align: center; position: absolute; top: 0; right: 0; align-items: center; text-align: center; justify-content: center; cursor: pointer; font-size: 24px;}
#open_nav .hover {display: none; line-height: 1; font-size: 20px; background: #004f9f; padding: 0 5px;}
#open_nav:hover .hover {display: block}
#open_nav .menu_icon {font-size: 30px}

#open_nav:hover .menu_icon {display: none}

#open_nav_inner {
    height: 100%;
    width: 100%;
    position: absolute;
}

#site_navigation.close #open_nav{display: flex}
#site_navigation.close #close_nav{display: none}
#site_navigation.open #open_nav{display: none}
#site_navigation.open #close_nav{display: flex}

#site_navigation .logo {width: 100%; max-width: 190px; margin: 80px 35px; padding-bottom: 32%; background: url(images/logo.png) center no-repeat; background-size: 100%; float: right}

#site_navigation ul {padding: 60px 35px; overflow: scroll; max-height: 50vh;}
#site_navigation ul li {display: block; text-align: right; margin-bottom: 15px}
#site_navigation ul li a {color: #fff; text-transform: uppercase; font-size: 18px}
#site_navigation ul ul li a {color: #fff; text-transform: none; font-size: 14px}

#site_navigation ul li.current_page_ancestor {font-style: italic}
#site_navigation ul li.current_page_ancestor ul li {font-style: normal}

#site_navigation ul ul {padding: 0 0 20px; overflow: visible; max-height: none;}
#site_navigation ul ul li {display: block; text-align: right; margin-bottom: 0}

#site_navigation ul ul li.current-menu-item a {border-bottom: 2px solid #b5873c; position: relative}
#site_navigation ul ul li.current-menu-item a:after {content:"\f2ca"; display: block; font-family: "Ionicons"; position: absolute; top: -3px; right: -20px; color: #b5873c; font-size: 20px}

#menu_mask {z-index: 59;content: '';top: 0;right: 0;bottom: 0;left: 0;background-color: #000;opacity: .7; position: fixed; height: 100%; width: 100%; display: none}


#site_navigation ul li ul.sub-menu {display: none}
#site_navigation ul li.current_page_item ul.sub-menu {display: block}








/*  */
#cta {position: fixed; top: 50vh; right: 0; z-index: 50; width: 70px; margin-top: -71px}
#cta a {color: #fff; font-size: 44px; display: block; height: 70px; margin-bottom: 2px; background: #e40613; text-align: center; line-height: 70px}

/* breadcrumb */
.breadcrumb {padding: 10px 40px; font-size: 14px;}
.breadcrumb a {font-size: 14px; color: #000; text-decoration: none}
.breadcrumb a:hover {text-decoration: underline}

/* --- HOME --- */

#diaporama {height: 100vh}
#diaporama .slide {height: 100vh; width: 100%; background-repeat:no-repeat;background-position:50%; background-size: cover}
#diaporama .caption {position: absolute; bottom: 90px; right: 150px; background: rgba(18,25,46, 0.6); width: 220px; color: #fff; padding: 20px; font-size: 16px}
#diaporama .caption strong {font-size: 17px; text-transform: uppercase}

#diaporama .caption p {margin: 0}
#diaporama .caption .titre{color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; text-decoration: none}
#diaporama .caption a.lien {display: inline-block; padding: 5px 20px; color: #fff; border: 3px solid #fff; text-decoration: none; margin-top: 10px}

#diaporama .owl-controls {position: absolute; bottom: 35px; width: 100%; text-align: center;}



#ecoquartier {height:416px; width: 66.666%; float: left; background-repeat:no-repeat;background-size:cover; background-position: 50%; display:flex;align-items:center; text-align: center; justify-content:center; position: relative; overflow: hidden}
#ecoquartier a {display: inline-block; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; padding: 15px 40px; font-size: 20px; border: 3px solid rgba(255,255,255,.8); background: rgba(0,0,0,0.4); position: relative; z-index: 2}
#ecoquartier .background {position: absolute; top: -100%; left: -1px; width: 100%; height: 100%; background-image: url(images/hover_ecoquartier.png); background-size: cover; background-position: 0 600%; background-repeat: no-repeat; transition: all 500ms ease, opacity 1.2s; opacity: 0}
#ecoquartier.hover .background {background-position: 0 10%; top: 0; opacity: .8}

#video {height:416px; width: 33.333%; float: left;  background-image: url(images/bg_home_video.png); background-size: cover; background-position: left; padding: 15px 3%}
#video .video_embed {margin: 20px auto;}
#video a.button {color: #004f9f; display: inline-block; text-decoration: none; padding: 0 0 0 15px; font-size: 14px; border: 3px solid #004f9f; vertical-align: middle; height: 42px; transition: all 200ms ease}
#video a.button span {display: inline-block; padding: 0 5px; font-size: 36px; height: 36px; line-height: 36px; border-left: 3px solid #004f9f; vertical-align: middle; margin-left: 15px}

#video a.button:hover {background: #004f9f; color: #fff}

#projet {height:416px; width: 33.333%; float: left; background-repeat:no-repeat;background-size:cover; background-position: 50%; display:flex;align-items:center; text-align: center; justify-content:center; position: relative; overflow: hidden}
#projet a {display: inline-block; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; padding: 15px 20px; font-size: 20px; border: 3px solid rgba(255,255,255,.8); background: rgba(19,25,48,0.6); position: relative; z-index: 2;}
#projet .background {position: absolute; top: -300px; left: -1px; width: 100%; height: 100%; background-image: url(images/hover_projet.png); background-size: cover; background-position: -500% 600%; background-repeat: no-repeat; transition: all 500ms ease-in-out, opacity 1s; opacity: 0}
#projet.hover .background {background-position: 10% -100%; top: -20px; opacity: .8}


#carte {height:416px; width: 33.333%; float: left; background-repeat:no-repeat;background-size:cover; background-position: 50%; display:flex;align-items:center; text-align: center; justify-content:center; position: relative; overflow: hidden}
#carte a {display: inline-block; font-weight: 700; color: #fff; text-transform: uppercase; text-decoration: none; padding: 15px 20px; font-size: 20px; border: 3px solid rgba(255,255,255,.8); background: rgba(180,136,60,0.7); position: relative; z-index: 2}
#carte .background {position: absolute; bottom: -100%; left: 100%; width: 240%; height: 240%; background-image: url(images/hover_carte.png); background-size: 100% 100%; background-position: bottom left; background-repeat: no-repeat; transition: all 500ms ease-in-out, opacity 1s; opacity: 0}
#carte.hover .background {background-position: bottom left; bottom: 0; left: -20%; opacity: .8}

#publication {height:416px; width: 33.333%; float: left; background-image: url(images/bg_home_publication.png); background-size: cover; background-position: left; padding: 60px 50px 30px 30px; position: relative}
#publication img {display: block;}
#publication .titre {max-width: 45%; float: left; color: #fff}
#publication h3 {color: #fff; margin: 30px 10px 15px 0}
#publication .titre a {color: #fff; font-style: italic; font-size: 14px}
#publication a.button {color: #fff; display: inline-block; text-decoration: none; padding: 0 0 0 15px; font-size: 14px; border: 3px solid #fff; vertical-align: middle; height: 42px; transition: all 200ms ease; position: absolute; bottom: 40px; left: 30px;}
#publication a.button span {display: inline-block; padding: 0 5px; font-size: 36px; height: 36px; line-height: 36px; border-left: 3px solid #fff; vertical-align: middle; margin-left: 15px}
#publication a.button:hover {background: #fff; color: #004f9f}
#publication .publication_visuel {max-width: 50%; float: left;  background-size: 100%; background-repeat: no-repeat; background-position: -350px;}
#publication .publication_visuel:hover {background-position: 0;}
#publication .publication_visuel img {opacity: 1; /*transition: all 100ms;*/}
#publication .publication_visuel img:hover {opacity: 0}


h2.actu_h2 {color: #e30613; max-width: 1100px; margin: 60px auto 10px; padding: 0 1%;}
#actualites {max-width: 1100px; margin: 0 auto 20px}
#actualites .actu_content {padding: 15px}
#actualites .actu_content p {padding: 0; margin: 0}
#actualites .actu {margin: 5px 5%; border: 1px solid #ccc; box-shadow: 0 0 3px rgba(0,0,0,0.2); min-height: 390px; position: relative;     max-width: 300px;}
#actualites .actu .date {font-weight: 700; font-size: 13px; color: #d51624}
#actualites .actu .photo {display: block; padding-bottom: 67%; background-position: 50%; background-size: cover}
#actualites .actu a.titre {font-weight: 700; font-size: 18px; color: #000; text-decoration: none}
#actualites .actu .lien {text-align: right; position: absolute; bottom: 5px; right: 15px}
#actualites .actu .lien a {text-decoration: none; font-size: 18px; font-weight: 700; color: #b4883c; text-transform: uppercase; vertical-align: middle}
#actualites .actu .lien a i {font-size: 26px; vertical-align: middle}
#actualites .owl-nav {display: block}
#actualites .owl-dots {display: none!important}
#actualites .owl-next,
#actualites .owl-prev {position: absolute; top: 50%; left: -70px; width: 40px; height: 40px; background: #fff; border: 3px solid #b4883c; color: #b4883c; font-size: 33px; text-align: center; line-height: 32px; transition: all 300ms ease; margin-top: -20px}
#actualites .owl-next {right: -70px; left: auto}
#actualites .owl-next:hover,
#actualites .owl-prev:hover {background: #b4883c; color: #fff}

.button_actus_wrapper {max-width: 1100px; margin: 0 auto 90px; text-align: right}
a.button_actus {color: #004f9f; display: inline-block; text-decoration: none; padding: 10px 20px; font-size: 14px; border: 3px solid #004f9f; vertical-align: middle; margin-right: 1.333%; transition: all 200ms ease}
a.button_actus:hover {background: #004f9f; color: #fff}


/* page edito */
.inner_edito {max-width: 850px; margin: 0 auto}
.bandeau {height: 480px; background-size: cover; background-position: 50%; display: flex; align-items:center; text-align: center; justify-content:center; position: relative; margin-top: 95px}
.bandeau h1 {margin: 0; text-align: center; display: inline-block; font-weight: 400; color: #fff; text-transform: uppercase; padding: 8px 30px; font-size: 35px; border: 3px solid rgba(255,255,255,.8); background: rgba(0,0,0,0.4); line-height: 1; max-width: 700px;}
.bandeau.thin {height: auto; padding: 30px 0}
.chapo {font-size: 24px; font-style: italic; color: #b4883c; text-align: center; max-width: 620px; margin: 40px auto 60px}


/* page entreprises */
.entreprise {margin: 25px 0}
.entreprise .logo {width: 200px; height: 170px; float: left; margin: 0 20px 20px 0; display: flex; align-items:center; text-align: center; justify-content:center; border: 3px solid #b4883c}
.entreprise .logo img {vertical-align: middle; max-width: 100%; max-height: 100%;}
.entreprise .titre {font-weight: 700; font-size: 20px; line-height: 1}
.entreprise .date {font-size: 16px; color: #e30613; line-height: 1.2; margin-bottom: 5px}
.entreprise .description {}
.entreprise .lien a {color: #004f9f; font-style: italic; text-decoration: none}


/* page videos */
.espace-video .breadcrumb {background: #e8e7e3;     margin-top: 30px;}
.video {margin: 25px 0}
.video .video_embed {width: 50%; float: left; margin: 0 20px 20px 0}
.embed {position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; height: auto;} 
.embed iframe,
.embed object,
.embed embed {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.video .titre {font-weight: 700; font-size: 20px; line-height: 1.2; }
.video .date {font-size: 16px; color: #e30613; line-height: 1; margin-bottom: 10px}
.video .description {}
.inner_video.inner_edito.item-1 {background: #e8e7e3; max-width: 100%; padding: 20px 0 30px; border-bottom: 3px solid #b4883c; margin-bottom: 60px;     margin-top: 55px;}
.inner_video.inner_edito.item-1 .video {max-width: 850px; margin: 30px auto}
.inner_video.inner_edito.item-1 .video_embed {width: 70%; float: left; margin: 0 20px 20px 0}

/* page espace doc */
.grid {border-left: 1px solid #eee3d2;}
.grid:after {content:""; position: absolute; bottom: 0; width: 100%; height: 1px; background: #fff}
.document {width: 33.333%; height: 450px; padding: 20px 30px; border-right: 1px solid #eee3d2; border-bottom: 1px solid #eee3d2 }
.document .visuel {display: flex; align-items:center; text-align: center; justify-content:center; height: 290px}
.document .titre {text-align: center; font-style: italic}
.document a.button {color: #e2001a; display: inline-block; text-decoration: none; padding: 0 0 0 15px; font-size: 14px; border: 3px solid #e2001a; vertical-align: middle; height: 42px}
.document a.button span {display: inline-block; padding: 0 5px; font-size: 36px; height: 37px; line-height: 36px; border-left: 3px solid #e2001a; vertical-align: middle; margin-left: 15px}
.document .lien {margin-top: 15px; opacity: 0; transition: all 500ms ease}


.document .visuel {display: flex; align-items:center; text-align: center; justify-content:center; height: 290px;  background-size: 100%; background-repeat: no-repeat; background-position: 50%}
.document img {opacity: 1; transition: all 500ms;background: #fff; width: 100%;}
.document:hover img {opacity: 0}

.document:hover .lien {opacity: 1}
ul.filters {text-align: center; list-style: none; margin: 40px 0 60px; padding: 0; color: #00519e;}
ul.filters li {text-align: center; list-style: none; display: inline-block; margin: 0 8px; border: 3px solid #00519e; color: #00519e; padding: 4px 8px; cursor: pointer; vertical-align: middle}
ul.filters li i{display: inline-block; margin-left: 5px; font-size: 18px;}
ul.filters li i.ion-android-checkbox-outline {display: none}
ul.filters li.active i.ion-android-checkbox-outline-blank{display: none}
ul.filters li.active i.ion-android-checkbox-outline{display: inline-block;}


/* pages actualites */
.titre_actus {padding: 32px; width: 100%; text-align: center; background: url(images/bg_actus.png) top center no-repeat; position: absolute; top: 95px; z-index: 40; margin-left: -40px;}
.admin-bar .titre_actus {top: 127px}
.titre_actus h1 {margin: 0; text-align: center; display: inline-block; font-weight: 400; color: #fff; text-transform: uppercase; padding: 8px 30px; font-size: 35px; border: 3px solid rgba(255,255,255,.8);  line-height: 1}

#diaporama_actus {height: 100vh; overflow: hidden}
#diaporama_actus .diapo_actu  {height: 100vh; width: 100%; background-size: cover;}
#diaporama_actus .actu_content {position: absolute; bottom: 70px; right: 150px; padding: 20px; width: 220px; background: rgba(18,25,46, 0.6); color: #fff;}
#diaporama_actus .actu_content p {margin: 0}
#diaporama_actus .actu_content a.titre{color: #fff; font-weight: 700; font-size: 18px; text-transform: uppercase; text-decoration: none}
#diaporama_actus .actu_content .lien a {display: inline-block; padding: 5px 20px; color: #fff; border: 3px solid #fff; text-decoration: none; margin-top: 10px}
#diaporama_actus .owl-dots {margin-top: -50px; text-align: center; z-index: 70; position: relative;}


.page_actu .post {margin: 5px 1.5% 20px; border: 1px solid #ccc; box-shadow: 0 0 3px rgba(0,0,0,0.2); min-height: 550px; position: relative; width: 47%; float: left}
.page_actu .post .photo {display: block; padding-bottom: 67%; background-position: 50%; background-size: cover;}
.page_actu .post .entry-content {padding: 20px; margin: 0}
.page_actu .post .entry-content h3 {padding: 10px 0 0; font-size: 18px; text-transform: none; margin: 0}
.page_actu .post .entry-content p {margin: 0}
.page-template-template-blog .lien {text-align: right; position: absolute; bottom: 5px; right: 15px}
.page-template-template-blog .lien a {text-decoration: none; font-size: 18px; font-weight: 700; color: #b4883c; text-transform: uppercase; vertical-align: middle}
.page-template-template-blog .lien a i {font-size: 26px; vertical-align: middle}

.navigation {margin: 30px 0 20px}
.navigation ul {margin: 0; padding: 0; text-align: center; list-style: none}
.navigation ul li {display: inline-block; width: 30px; border: 3px solid #004f9e; text-align: center; height: 30px; line-height: 26px; border-right: none; padding-left: 3px; vertical-align: middle;}
.navigation ul li:last-child {border-right: 3px solid #004f9e}
.navigation ul li a {color: #004f9e; text-decoration: none; display: block}
.navigation .ion-android-arrow-forward,
.navigation .ion-android-arrow-back {font-size: 26px; line-height: 26px; display: block;}

.navigation ul li.active,
.navigation ul li:hover {background: #004f9e;}

.navigation ul li.active a,
.navigation ul li:hover a {color: #fff;}



.titre_actu {padding: 200px 0; width: 100%; text-align: center; margin-top: 95px; background-size: cover; background-position: 50%}
.titre_actu h1 {margin: 0; text-align: center; display: inline-block; font-weight: 400; color: #fff; text-transform: uppercase; padding: 8px 30px; font-size: 35px; border: 3px solid rgba(255,255,255,.8);  line-height: 1; background: rgba(18,25,46, 0.6); max-width: 700px;}

.content-actu .date {color: #e40613; margin: 40px 0 0}
.inner_edito .gallery {width: 50%; float: left; margin: 20px 20px 20px 0}
.inner_edito .gallery figure {margin: 0;}
.inner_edito .gallery  .owl-controls {}
.inner_edito .gallery  .owl-nav {}
.inner_edito .gallery  .owl-dots {position: absolute; top: 80%; text-align: center; width: 100%}
.inner_edito .gallery  .owl-next,
.inner_edito .gallery  .owl-prev {display: none}
.inner_edito .gallery  .owl-next {right: -70px; left: auto}
.inner_edito .gallery  .owl-next:hover,
.inner_edito .gallery  .owl-prev:hover {background: #b4883c; color: #fff}

.article-navigation {text-align: center; margin: 40px 0 20px}
.article-navigation a.tous {display: inline-block; color: #e40613; padding: 5px 15px; border: 3px solid #e40613; text-decoration: none; transition: all 300ms ease; margin-top: -4px}
.article-navigation a.tous:hover {color: #fff; background: #e40613;}

.prev_actu {float: left; width: 130px;text-align: left;}
.prev_actu a {color: #e40613; text-decoration: none; text-transform: uppercase; font-size: 14px; line-height: 1.2; display: block}
.prev_actu a i {display: block; float: left; width: 35px; height: 35px; text-align: center; line-height: 32px; background: #fff; border: 3px solid #e40613; margin-right: 10px; margin-top: -2px; font-size: 30px; transition: all 300ms ease}
.prev_actu a:hover i {background: #e40613; color: #fff}

.next_actu {float: right; width: 130px;}
.next_actu a {color: #e40613; text-decoration: none; text-transform: uppercase; font-size: 14px; line-height: 1.2; display: block;     text-align: right;}
.next_actu a i {display: block; float: right; width: 35px; height: 35px; text-align: center; line-height: 32px; background: #fff; border: 3px solid #e40613; margin-left: 10px; margin-top: -2px; font-size: 30px; transition: all 300ms ease}
.next_actu a:hover i {background: #e40613; color: #fff}



/* home cartes */
.carte_chantiers {float: left; background: url(images/bg_carte_gauche_hover.jpg) center no-repeat; background-size:cover; height: 600px; width: 50%;  position: relative; display: flex; align-items: center; text-align: center; justify-content: center;}
.carte_chantiers_inner {background: url(images/bg_carte_gauche.jpg) center no-repeat; background-size:cover; height: 600px; width: 100%; position: absolute; top:0; left: 0; opacity: 1; transition: all 500ms}
.hover .carte_chantiers_inner {opacity: 0}

.carte_chantiers .picto {position: relative; z-index: 10; padding-top: 130px; background: url(images/picto_gauche.png) top center no-repeat; transition: all 500ms}
.carte_chantiers.hover .picto {position: relative; z-index: 10; padding-top: 130px; background: url(images/picto_gauche_hover.png) top center no-repeat}

.carte_prog {float: left; background: url(images/bg_carte_droite_hover.jpg) center no-repeat; background-size:cover; height: 600px; width: 50%;  position: relative; display: flex; align-items: center; text-align: center; justify-content: center;}
.carte_prog_inner {background: url(images/bg_carte_droite.jpg) center no-repeat; background-size:cover; height: 600px; width: 100%; position: absolute; top:0; left: 0; opacity: 1; transition: all 500ms}
.hover .carte_prog_inner {opacity: 0}
.carte_prog .picto {position: relative; z-index: 10}

.carte_prog .picto {position: relative; z-index: 10; padding-top: 130px; background: url(images/picto_droite.png) top center no-repeat; transition: all 500ms}
.carte_prog.hover .picto {position: relative; z-index: 10; padding-top: 130px; background: url(images/picto_droite_hover.png) top center no-repeat}

.carte_prog .picto a,
.carte_chantiers .picto a {display: inline-block; font-weight: 700; color: #b4883c; text-transform: uppercase; text-decoration: none; padding: 10px 30px; font-size: 20px; border: 3px solid #fff; background: #fff; position: relative; z-index: 2; transition: all 500ms}
.carte_prog .picto a:hover,
.carte_chantiers .picto a:hover {color: #fff; border: 3px solid #fff; background: #b4883c}

/* --- FOOTER --- */
footer#colophon {margin-top: 60px}
#logos {background: url(images/bg_logos.png) top left repeat; text-align: center; margin-left: 40px;}

.logo_grandparis,
.logo_mairie,
.logo_sequano,
.logo_plaine,
.logo_repu_france,
.logo_idf {width:16%;display: flex; padding: 20px 50px; border-left: 1px solid #fff; height: 130px; vertical-align: middle; align-items: center; text-align: center; justify-content: center; float: left}
.logo_idf {border-right: 1px solid #fff;}

.logo_mairie img {height: 90px}
.logo_sequano {padding: 20px 33px;}
#logos img {max-height: 100%; vertical-align: middle; max-width: 180px}

#footer {background: #004f9f; padding: 40px}

#footer .inner-logos,
#footer .inner-texte,
#footer .inner-menu,
#footer .inner-logo-site {float:left; padding: 0 10px; font-size: 13px}

#footer .inner-texte,
#footer .inner-menu-1,
#footer .inner-menu-2,
#footer .inner-menu-3  {width: 17%; float: left}

#footer .inner-logos {width:30%; padding: 20px 40px 0 0}
#footer .inner-texte {color:#fff;}
#footer .inner-logo-site {width:14%;margin:2% auto;float: right;}   
#footer p {margin: 0 0 15px}
ul#menu-menu-footer-1,
ul#menu-menu-footer-2,
ul#menu-menu-footer-3 {margin: 0 0 15px; padding: 0}

ul#menu-menu-footer-1 li,
ul#menu-menu-footer-2 li,
ul#menu-menu-footer-3 li {list-style:none; font-size: 13px;}

ul#menu-menu-footer-1 li a,
ul#menu-menu-footer-1 li a:active,
ul#menu-menu-footer-1 li a:hover,
ul#menu-menu-footer-1 li a:visited,

ul#menu-menu-footer-2 li a,
ul#menu-menu-footer-2 li a:active,
ul#menu-menu-footer-2 li a:hover,
ul#menu-menu-footer-2 li a:visited,

ul#menu-menu-footer-3 li a,
ul#menu-menu-footer-3 li a:active,
ul#menu-menu-footer-3 li a:hover,
ul#menu-menu-footer-3 li a:visited {text-decoration:none;color:#fff;}

#recherche {position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background: #fff; z-index: 60; margin-left: 40px; display: flex; align-items: center; text-align: center; justify-content: center;}

#recherche form.search-form {padding: 10px 20px; border: 3px solid #b4883d; position: relative; width: 50%;}
#recherche input.search-field {border: none; border-bottom: 1px solid #b4883d; color: #b4883d; font-size: 22px; width: 100%;}
#recherche .close {position: absolute; top: 20px; right: 60px; font-size: 40px; color: #b4883d; cursor: pointer}
#recherche label {position: relative; }
#recherche label i {position: absolute; font-size: 30px; color: #b4883d; right: 5px; top: -12px}

.searchresults {font-size: 24px; font-style: italic; color: #b4883d; text-align: center; margin: 20px 0 40px}

.inner_search {margin-top: 160px; max-width: 850px}

.inner_search form.search-form {padding: 10px 20px; border: 3px solid #b4883d; position: relative; width: 100%; margin: 50px 0}
.inner_search input.search-field {border: none; border-bottom: 1px solid #b4883d; color: #b4883d; font-size: 22px; width: 100%;}
.inner_search .close {position: absolute; top: 20px; right: 60px; font-size: 40px; color: #b4883d; cursor: pointer}
.inner_search label {position: relative; }
.inner_search label i {position: absolute; font-size: 30px; color: #b4883d; right: 5px; top: -12px}

.inner_search h3 {margin: 0; padding: 0; text-transform: none}
.inner_search h3 a {color: #000}
.inner_search .date {color: #e30613}
.inner_search .entry-summary, .inner_search .entry-summary p{margin: 0}

#contact {position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background: #fff; z-index: 60; margin-left: 40px; display: flex; align-items: center; text-align: center; justify-content: center;}
#contact input.search-field {border: none; border-bottom: 1px solid #b4883d; color: #b4883d; font-size: 22px; width: 100%;}
#contact .close {position: absolute; top: 20px; right: 60px; font-size: 40px; color: #b4883d; cursor: pointer}

.frm_form_field label,
.frm_ajax_loading {display: none}
.frm_forms {width: 70%}
#frm_field_12_container {padding: 0 8px}

.form_left, .form_right {width: 50%; float: left; padding: 8px}
.frm_form_field input {width: 100%;padding: 10px; border: 3px solid #01509f; color: #01509f; margin-bottom: 10px}
.frm_form_field textarea {width: 100%; max-width: 100%; max-height: 500px;padding: 10px; border: 3px solid #01509f; color: #01509f; margin-bottom: 10px; height: 161px}
.frm_submit input {background: #fff; border: 3px solid #e30713; color: #e30713; padding: 5px 20px; border-radius: 0; transition: all 500ms}
.frm_submit input:hover {background: #e30713; border: 3px solid #e30713; color: #fff;}
.frm_submit {text-align: left}
#frm_field_12_container.frm_form_field input {margin-bottom: 2px;}
.frm_description {padding-left: 120px; font-size: 22px; text-align: left; font-style: italic; color: #b4883c; position: relative}
.frm_description i {color: #b4883c; font-size: 30px; position: absolute; top: 0; left: 10px}

.frm_form_field input::-webkit-input-placeholder {color: #01509f;}
.frm_form_field input:-moz-placeholder {color: #01509f;}
.frm_form_field input::-moz-placeholder {color: #01509f;}
.frm_form_field input:-ms-input-placeholder {color: #01509f;}
.frm_form_field textarea::-webkit-input-placeholder {color: #01509f;}
.frm_form_field textarea:-moz-placeholder {color: #01509f;}
.frm_form_field textarea::-moz-placeholder {color: #01509f;}
.frm_form_field textarea:-ms-input-placeholder {color: #01509f;}

.frm_error {margin-top: -10px; margin-bottom: 10px; text-align: left; color: #e30613; font-size: 13px}
#mandatory {font-size: 12px; color: #01509f;    float: left;}
#share {position: fixed; top: 0; left: 0; height: 100vh; width: 100%; background: #fff; z-index: 60; margin-left: 40px; display: flex; align-items: center; text-align: center; justify-content: center; font-size: 20px}
#share .close {position: absolute; top: 20px; right: 60px; font-size: 40px; color: #b4883d; cursor: pointer}
#share a {font-size: 40px; display: inline-block; padding: 10px; margin: 0 0 0 20px; color:#b4883d}

.page-template-template-cartes #cta,
.page-template-template-documents #cta,
.page-template-template-videos #cta,
.page-template-template-carte #cta,
.page-template-template-carte-chantier #cta {display:none;}

#wrapper_grey {background: #ebecea}
#carte_wrapper {max-width: 940px; margin: 0 auto;}
#carte_p {max-width: 940px; padding-bottom: 71%; background-repeat: no-repeat; background-size: 100% auto; position: relative;}
.marker {position: absolute; width: 30px; height: 30px; margin-left: -15px; margin-top: -30px}
.marker .icone {display: block; text-align: center; height: 30px; line-height: 30px; font-size: 30px}

.marker .icone.livre,
.marker .icone.construction {color: #014fa1; background: url(images/pin_bleu.png) top center no-repeat}
.marker .icone.encours,
.marker .icone.demolition {color: #e40611; background: url(images/pin_rouge.png) top center no-repeat}
.marker .icone.avenir {color: #4c785f; background: url(images/pin_vert.png) top center no-repeat}

.marker .tooltip {visibility: hidden; opacity: 0; transition: all 200ms ease; position: absolute; top: 30px; left: 0px; background: #fff; width: 160px;     box-shadow: -2px 5px 10px rgba(0,0,0,0.5);     z-index: 48;}
.marker .tooltip .titre {padding: 10px; background: #01509f; color: #fff; text-transform: uppercase; font-size: 16px}
.marker .tooltip .content {padding: 10px; font-size: 14px; color: #000}
.marker .tooltip .visuel {height: 80px; background-size: cover; background-position: 50%}
.marker:hover .tooltip {display: block; opacity: 1; visibility: visible;}

.marker .tooltip .link {font-size: 18px; color: #b4883c; text-transform: uppercase; cursor: pointer}
.marker .tooltip .link i {font-size: 24px; vertical-align: middle}

.popup {position: absolute; top: 0; right: -100px; background: #fff; width: 305px; z-index: 50;}
.popup .titre {padding: 10px 25px 10px 10px; background: #01509f; color: #fff; text-transform: uppercase; font-size: 16px}
.popup .content {padding: 0 10px; font-size: 14px}
.popup .visuel {height: 160px; background-size: cover; background-position: 50%; width: 100%!important;}
.popup .close {position: absolute; top: 0; right: 10px; width: 20px; height: 20px; font-size: 28px; color: #fff; cursor: pointer}
.popup_diapo {height: 160px; width: 100%}
.popup_diapo_wrapper {height: 160px; width: 100%; position: relative}
.prev2,
.next2 {width: 29px; height: 29px; color: #fff; font-size: 22px; line-height: 32px; position: absolute; bottom: 0; left: 0; z-index: 49; background: #000; text-align: center;}
.next2 {left: auto; right: 0}

/* filtres */
.marker.hidden {display: none}

/* legende */

.prog .legende {width: 26%; float: left; border: 3px solid #b4883c; border-right: 0; height: 187px}
.legende img {display: block;}
.legende h3 {color: #fff; background: #b4883c; margin: 0; padding: 10px}

.prog .filtres {width: 74%; float: left; border: 3px solid #004f9f; height: 187px}
.filtres form.statut {width: 17%; float: left; border-right: 3px solid #004f9f;height: 138px; padding: 15px 15px 5px}
.filtres form.secteur {width: 30%; float: left; border-right: 3px solid #004f9f;height: 138px; padding: 15px 15px 5px;-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
.filtres form.programme {width: 50%; float: left; height: 138px; padding: 15px 15px 5px;-webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}
.filtres h3 {color: #fff; background: #004f9f; margin: 0; padding: 10px}

.chantiers .legende {width: 16%; float: left; border: 3px solid #b4883c; border-right: 0; height: 187px}
.legende img {display: block;}
.legende h3 {color: #fff; background: #b4883c; margin: 0; padding: 10px}

.chantiers .filtres {width: 84%; float: left; border: 3px solid #004f9f; height: 187px; margin-bottom: 40px}
.filtres form.statut {width: 17%; float: left; border-right: 3px solid #004f9f;height: 138px; padding: 15px 15px 5px}
.filtres form.secteur {width: 30%; float: left; border-right: 3px solid #004f9f;height: 138px; padding: 15px 15px 5px;-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}
.filtres form.programme {width: 50%; float: left; height: 138px; padding: 15px 15px 5px;-webkit-column-count: 3; -moz-column-count: 3; column-count: 3;}
.filtres h3 {color: #fff; background: #004f9f; margin: 0; padding: 10px}

.filtres input[type="checkbox"] {visibility: hidden; position: absolute;}
.filtres input[type="checkbox"] + label {cursor: pointer; font-size: 14px;}
.filtres input[type="checkbox"] + label:before {content: "\f372"; display: inline-block; font-family: "Ionicons"; padding-right: 5px; color: #b4883c; font-size: 17px}
.filtres input[type="checkbox"]:checked + label:before {content: "\f373";}

.intro_carte_programmation {max-width: 750px; margin: 30px auto}
.intro_carte {max-width: 650px; padding-left: 130px; background: url(images/bg_texte_chantier.png) top left no-repeat; margin: 30px auto}
.titre_carte {max-width: 195px; border-top: 3px solid #e1001a; padding: 15px 20px 0 0; float: left; font-size: 23px; color: #e1001a; font-weight: 600; text-transform: uppercase}
.texte_carte {max-width: 320px; border-top: 3px solid #e1001a; padding: 15px 0 0; float: left; font-size: 16px; font-weight: 600;}
.inner_video.item-1 .breadcrumb {display: block!important}


@media only screen and (max-width: 1200px) {
	.site-header .description {display:none;}
	.site-header {padding: 15px 20px 15px 80px;}
	.titre_actu h1 {max-width: 80%}
	.inner,
	.inner_edito {padding: 0 40px;}
	.page .site-header .description,
	.page a.ion-android-print, .page a.ion-android-print span,
	.page .site-header .links span,
	.page .site-header .links .separator {display:none;}
	.page .site-header .links {float: right;width:60%;margin-top:0%;}
	.page #cta {border:none;}
	.page .inner_edito {}
	.prog .legende,
	.prog .filtres {height: 237px;}
	.filtres form.statut,
	.filtres form.programme,
	.filtres form.secteur {height: 188px;}
	.filtres input[type="checkbox"] + label {font-size: 12px;}
	.chantiers .filtres form {height: 138px;}
}
@media only screen and (max-width: 1020px) {
	#cta {display:none;}
	#actualites .owl-next, #actualites .owl-prev {display: none!important}
	.document .lien {opacity: 1; text-align: center;}
	.document a.button {padding: 0 5px; font-size: 13px;     line-height: 37px;}
	.document a.button span {margin-left: 5px;}
	.document a.button span {padding: 0 4px;font-size: 20px;}
	.document a.button span {display: none;}
	.document {height: 480px;}
	#video a.button {padding: 0 5px; line-height: 36px}
	#publication a.button {padding: 0 5px; left: 20px; line-height: 36px}
	#video a.button span,
	#publication a.button span {margin-left: 5px; display: none}
	#publication {padding: 40px 10px 30px 20px;}
	ul.filters li {margin-bottom: 5px; display: block;}
	.logo_mairie img {height: auto;}
	.logo_mairie, .logo_sequano, .logo_plaine, .logo_repu_france, .logo_idf {padding: 20px 30px;}
	.logo_sequano, .logo_idf {padding: 20px 10px;}
	#actualites .actu {min-height: 420px;}
	.filtres form.secteur {column-count: 1;}
	.filtres form.statut, .filtres form.programme, .filtres form.secteur {height: 230px; padding: 5px}
	.prog .legende, .prog .filtres, .chantiers .legende, .chantiers .filtres {height: 277px;}
	.filtres form.programme {column-count: 2;}
	#diaporama .caption {}
}

@media only screen and (max-width: 800px) {
	#diaporama .caption {display: none}
}

@media only screen and (max-width: 620px) {
	.page .site-header .description, #cta {display:none;}
	.page .site-header .links {float: none;width: 90%;}
	.page .bandeau h1 {padding: 8px 12px;font-size: 25px;}
	.site-header {height: 60px}
	.site-header .site-title a,
	.home.sticky .site-title a {width: 80px; height: 41px;}
	.titre_actu {margin-top: 60px;}
	.site-header .links {width: auto;}
	#diaporama .caption,
	.site-header .links a.ion-android-print,
	.site-header .links .separator {display:none;}
	.next_actu {width: 35px;text-align: right;}
	.prev_actu {width: 35px;text-align: left;}
	.site-header .links a {padding: 10px 5px; font-size: 25px;}
	.site-header .links a span,
	.site-branding .links a span {display: none}
	.menu-menu-dso-container {clear: both}
	#site_navigation ul {padding: 30px 0 0 35px; text-align: center; max-height: 65vh;}
	.bandeau {    height: 260px; margin-top: 60px;}
	#site_navigation ul ul li,
	#site_navigation ul li {text-align: center;}
	#content {padding-left: 0;}
	#close_nav, #open_nav {right: -60px; background: #004f9f; width: 60px;     height: 60px;}
	#open_nav .menu_icon {font-size: 40px;}
	#close_nav {right: 0;}
	#site_navigation {left: -100%;width: 100%;}
	#site_navigation.close {left: -100%!important;width: 100%;}
	#site_navigation .logo {width: 100%; max-width: 100px;    height: 50px; margin: 20px 20px 10px; padding-bottom: 10px; float: left;}
	#open_nav:hover .hover {display: none}
	#open_nav:hover .menu_icon {display: block}
	.home .site-title a {top: 0px; left: 90px; width: 110px; height: 65px;}
	.site-branding .links a {margin-top: 10px;}
	#actualites .owl-next, #actualites .owl-prev {display: none!important}
	#video,
	#projet,
	#carte,
	#publication,
	#ecoquartier {width: 100%; float: none}
	#logos {margin-left: 0}
	#logos .inner {padding: 10px 0}
	#footer {padding: 40px 0;}
	.logo_mairie, .logo_sequano, .logo_plaine, .logo_repu_france, .logo_idf {width: 100%;}
	.logo_plaine {padding: 20px 80px;}
	.logo_sequano {padding: 20px 140px;}
	.logo_idf {padding: 20px 130px;}
	#footer .inner-texte, #footer .inner-menu-1, #footer .inner-menu-2, #footer .inner-menu-3,
	#footer .inner-logos {width: 100%; float: none;padding: 0 0 10px;}
	#footer .inner-logo-site {width: 50%; margin: 10px auto; float: none;}
	.entreprise .logo {width: 100%; float: none}
	#diaporama_actus .actu_content {bottom: 60px; right: 20px; padding-bottom: 60px;}
	#diaporama_actus .actu_content p {display: none}
	.page_actu .post {margin: 5px 0 20px;min-height: 200px; height: auto; width: 100%;float: none;}
	.document {width: 100%; height: auto; padding: 20px 30px;}
	.document:hover img {opacity: 1}
	.inner_video.inner_edito.item-1 .video_embed {width: 100%; float: none;}
	.inner_video.inner_edito.item-1 .video {padding: 0 20px;}
	.video .video_embed {width: 100%; float: none; margin: 0 0 20px 0;}
	#contact {margin-left: 0;overflow: scroll;padding-top: 20px;}
	.frm_description {padding-left: 50px;}
	.form_left, .form_right {width: 100%; float: none; padding: 8px;}
	#mandatory {display: none}
	#share {margin-left: 0; font-size: 16px; }
	#recherche {margin-left: 0;}
	.carte_chantiers, .carte_prog {float: none;height: 300px;width: 100%;}
	.carte_chantiers_inner, .carte_prog_inner {height: 300px}
	.popup {right: 20px;z-index: 50;}
	.chantiers .legende {width: 100%; float: none;height: 167px; border-right: 3px solid #b4883c; margin-bottom: 10px}
	.prog .legende {width: 100%; float: none;height: 187px; border-right: 3px solid #b4883c; margin-bottom: 10px}
	.chantiers .filtres,
	.prog .filtres {width: 100%; float: none; border: 3px solid #004f9f; height: auto; margin-bottom: 40px;}
	.filtres form.secteur,
	.filtres form.programme,
	.filtres form.statut {width: 100%; float: none; height: auto; border-right: 0}
	.intro_carte {margin: 30px;}
	.titre_carte {max-width: 335px; min-height: 100px}
	#share a {font-size: 30px; padding: 7px; margin: 0;}
	.marker .tooltip {left: -90px;}
	#contact .close {right: 20px;}
	.frm_description {padding-left: 0; font-size: 13px;}
	.frm_form_field textarea {height: 75px; margin-bottom: 5px;}
	.frm_description .ion-android-mail {display: none}
	.document .visuel {background: none!important; max-height: 100%; max-width: 100%}
	.document img {width: auto; max-height: 100%; max-width: 100%}
	.document .lien {opacity: 1; text-align: center;}
	.filtres form.programme {column-count: 2;}
	.espace-video .breadcrumb {margin-top: 10px}
	.titre_actus {top: 55px;margin-left: 0;}
	.page_actu .post .entry-content {padding: 20px 20px 50px;}
	.next_actu a,
	.prev_actu a {font-size: 7px;}
	.inner_edito .gallery {width: 100%; float: none; margin: 20px 0}
	#video {height: 485px;}
	#actualites .owl-next, #actualites .owl-prev {display: none}
	#logos .logo_mairie img {max-height: 100px;}
}

@media only screen and (max-width: 400px) {
	.menu-menu-dso-container {clear: both}
	#site_navigation ul {padding: 30px 0 0 35px; text-align: center; max-height: 65vh;}
	#site_navigation ul ul li,
	#site_navigation ul li {text-align: center;}
	.home .site-header {padding:4% 0 0 12%;}
	.home .site-header .links {}
	.site-header .site-title,
	.home .site-header .site-title  {width:38%;}
	.site-header .site-title a,
	.home .site-title a {top: 0;left: 70px;}
	.home.sticky .site-title a {left: 70px}
	.page .site-header {padding:10px 0;}
	.site-header .site-title  {width:32%; }
	.logo_plaine {padding: 20px 40px;}
	.logo_sequano {padding: 20px 40px;}
	.logo_idf {padding: 20px 40px;}
	.inner_edito .gallery .owl-dots {top: 70%;}
	.frm_form_field input {padding: 3px;}
	.form_left {padding: 8px 8px 0 8px;}
	.form_right {padding-top: 0;}
	
}


@media only screen and (max-width: 320px) {
	.site-header .site-title {width: 32%; }
}

#logos img { 
    display: inline-block;}