*,
*:before,
*:after {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	box-sizing:border-box;
}

*{
  max-width:100%;
  	padding:0;
	margin:0;    
}                                                                                      

.ajax {

}

.hidden {
	display:none;
}


.out .navigation,
.out #mainContent,
.out .footer {
	transition:all 0.4s ease;
}

.out .navigation,
.out #mainContent,
.out .footer {
	opacity:0;
}


strong {
	font-weight:600;
}

h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
	font-weight:inherit;
}


.mobile .desktop_only, 
.desktop .mobile_only {
	display:none;
}

iframe {
	border:none;
}
.fullFrame {
    background: black none repeat scroll 0 0;
    height: 100vh;
    left: 0;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 30000;
} 

.fullFrame iframe{
    height: 540px;
    left: 50%;
    margin-left: -480px;
    margin-top: -270px;
    max-height: 100%;
    max-width: 100%;
    padding: 0;
    position: absolute;
    top: 50%;
    width: 960px;
    z-index: 30000;
}
#closeFrame {
    background: rgba(0, 0, 0, 0) url("../img/bg-fermer-menu2.png") no-repeat scroll center center / 100% auto;
    cursor: pointer;
    height: 30px;
    margin-right: -15px;
    position: fixed;
    right: 50%;
    top: 35px;
    width: 30px;
    z-index: 30001;
}
.video-container {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}
.video-container iframe, .video-container object, .video-container embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.formBody:after, .clearfix:after {
	content:" ";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
.formBody, .clearfix {display: block;}
html[xmlns] .clearfix, html[xmlns]  .formBody,  {display: block;}
* html .clearfix, * html .formBody  {height: 1%;}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,                                                                                            
nav,
section {
	display: block;
}
audio,
canvas,
video {
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
audio:not([controls]) {
	display: none;
}
html {
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
a:focus {
	outline: none;
	outline: none;
	outline-offset: -2px;
}
a:hover,
a:active {
	outline: 0;
}
img {
	max-width: 100%;
	width: auto \9;
	height: auto;
	vertical-align: middle;
	border: 0;
	-ms-interpolation-mode: bicubic;
}
.element-textarea p img {
	margin: 0 auto;
	display:block;
	width:auto;
}
button,
input,
select,
textarea {
	margin: 0;
	font-size: 100%;
	vertical-align: middle;
}
button,
input {
	*overflow: visible;
	line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
	padding: 0;
	border: 0;
}
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
	-webkit-appearance: button;
	cursor: pointer;
}
label,
select,
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
input[type="radio"],
input[type="checkbox"] {
	cursor: pointer;
}
input[type="search"] {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
	-webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}
textarea {
	overflow:auto;
	vertical-align:top;
}
#map_canvas img,
.google-maps img,
.gm-style img {
	max-width: none;
}
a {
	color:inherit;
	text-decoration:none;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
body {
    min-height:200vh;
	background:#fff;
    color: #000000;
    font-weight:400;
    font-size: 1em;
    padding: 0px;
    text-align: center;   
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width:100%;
    overflow-x:hidden;
	overflow-y:auto;
	font-family: 'Raleway', sans-serif;
}
body {
	/*background:url('../img/loading.gif') no-repeat center center fixed;  */

}
body.loaded {
	background:white;
}
#outbar {
	background:white;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;	
	width:100%;
	height:2px;}
#bar {
	background:#F63440;
	width:0%;
	height:2px;
}

h1, .h1 {
	text-transform:uppercase;
	font-size:2.4em!important;
	font-weight:900;
	line-height:1em;
}
h2,.h2 {
	text-transform:uppercase;
	margin-top:1em;
	font-size:1.6em!important;
	font-weight:800;
	line-height:1em;
}
h3,.h3 {
	margin-top:1em;	
	text-transform:uppercase;
	font-size:1.2em!important;
	font-weight:800;
	line-height:1em;
}
#contentReal h1, .punch {
	text-transform:uppercase;
	font-size:2.2em!important;
	font-weight:100;
	line-height:1em;
}
#contentReal h1 {
	color:#000000;
}
#title_group a {
    background: hsl(0, 0%, 0%) none repeat scroll 0 0;
    color: hsl(0, 0%, 100%);
    padding: 10px;
    text-decoration: none;
}

#title_group .item_subtitle.h2{
	color:#F63440;
	font-size:1.2em!important;
}
p , .item ul li{
	margin:1em 0;
	font-size:1.1em;
	font-weight:400;
	line-height:1.3em;
}
.item a {
	text-decoration:underline;
}
#reseaux_real a {
	text-decoration:none;
}
.component ul li {
	list-style-type:default;
	margin-left:20px;
}

#pageTitle h2,
.title_group .h2{
	margin-top:10px;
} 
#pageTitle p  {
	margin-top:0;	
}

@media print {
	* {
		text-shadow: none !important;
		color: #000 !important;
		background: transparent !important;
		box-shadow: none !important;
	}
	a,
	a:visited {
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	.ir a:after,
	a[href^="javascript:"]:after,
	a[href^="#"]:after {
		content: "";
	}
	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}
	thead {
		display: table-header-group;
	}
	tr,
	img {
		page-break-inside: avoid;
	}
	img {
		max-width: 100% !important;
	}
	@page {
		margin: 0.5cm;
	}
	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}
	h2,
	h3 {
		page-break-after: avoid;
	}
}


body.playing #container {
	opacity:0;
}
#system-messages {
	/*cursor: url('../img/plus_infos.png') 4 12, auto;*/
	position:fixed;
	top:50%;
	left:50%;
	z-index:200;
	-moz-transform:translate3d(-50%, -50%, 0);
	-webkit-transform:translate3d(-50%, -50%, 0);
	-ms-transform:translate3d(-50%, -50%, 0);
	transform:translate3d(-50%, -50%, 0);
	text-align:center;
	padding:50px 20px;
	background:white;
	color:#C00025;
	-webkit-box-shadow:0 0 3px black;
	box-shadow:0 0 3px black;
}
#close-message {
	margin-bottom:20px;
	cursor:pointer;
	color:black;	
}
body.contentpane {
	width:auto;
	margin:10px;
	text-align: left;
}


#burger, .hide {
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;	
	color:white;
	font-weight:800;
	font-size:1.7em;
	cursor:pointer;
	position:absolute;
	padding:5px;      
	display:block;
}
#burger {
	-webkit-transform:rotate(90deg);
	-moz-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	top:14px;
	right:14px;
	 z-index:6;
	letter-spacing:1px;
	width:45px;
	height:47px;
	color:white;
	/*background:black;*/
}
#burger > span {
    background: white none repeat scroll 0 0;
    -webkit-box-shadow:0 0 2px #999;
    box-shadow:0 0 2px #999;
    color: rgba(0, 0, 0, 0);
    font-size: 0.5em;
    margin: 0 3px;
    padding: 8px 0 2px;
}
#burger:hover {
	-webkit-transform:rotate(0deg);
	transform:rotate(0deg);
} 

#burger:after {
	opacity:0;
	-webkit-transition:opacity 0s ease 0s;
	transition:opacity 0s ease 0s;
	display:block;
	content:"MENU";
	font-size:0.4em;
	margin-left:0px;
	color:inherit;

}
#burger:hover:after {
	transition:opacity 0.5s ease 0.3s;
	transition:opacity 0.5s ease 0.3s;
	opacity:1;

}
.desktop #burger:hover span {
	background:#f63440;
	box-shadow: 0 0 0 #999;
}

.hide{
	z-index:3;
	color:white;
	opacity:0;
	top:20px;
	right:20px;
	line-height:1;
	height:35px;
	width:35px;
	}
.playing .hide {

	opacity:1;
}
.hide span {
	position:absolute;
	top:50%;
	left:50%;
	display:block;
	z-index:1;	
	-webkit-transform-origin:center;
	-moz-transform-origin:center;
	-ms-transform-origin:center;
	transform-origin:center;
	text-indent:-9999px;
	overflow:hidden;
	background:white;
	height:0px;
	width:0px;
	transition:all 0.9s;
}
.playing .hide span {
	height:35px;
	width:6px;	
}
.hide span#bar1 {
	-webkit-transform:translate3d(-50%,-50%,0) rotate(45deg);
	-moz-transform:translate3d(-50%,-50%,0) rotate(45deg);
	-ms-transform:translate3d(-50%,-50%,0) rotate(45deg);
	transform:translate3d(-50%,-50%,0) rotate(45deg);
}
.hide span#bar2 {
	-webkit-transform:translate3d(-50%,-50%,0) rotate(-45deg);
	-moz-transform:translate3d(-50%,-50%,0) rotate(-45deg);
	-ms-transform:translate3d(-50%,-50%,0) rotate(-45deg);
	transform:translate3d(-50%,-50%,0) rotate(-45deg);
}

.playing #burger {
	display:none;
}
#menu {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;	
	width:0%;
	opacity:0;
	overflow:hidden;
	height:100%;
	position:absolute;  
	right:0%;
	top:0;
	-webkit-transition:all 0.3s;
	-moz-transition:all 0.3s;
	-ms-transition:all 0.3s;
	transition:all 0.3s;
	z-index:300;
	text-align:center;
	background:#f73442;
	color:white;
	text-transform:uppercase;
    font-size: 1em;    
	text-align: center;
	border-left:1px solid white;
	-webkit-box-shadow:0 0 1px black;
	box-shadow:0 0 1px black;
}
.playing #menu {
	right:0%;
	width:100%;	
	opacity:1;
}


#menu ul li {
    list-style-type: none;
    padding: 0 5px;
    width: auto;
}
#menu ul.menu > li {
	font-weight:800;
	margin-top:20px;
}
#menu  ul.nav-child li {
	font-size:0.9em;
	font-weight:400;
	margin-top:5px;
}
#menu ul li a {
	display:inline-block;
	padding:5px;
}
#menu ul li a:hover {
	background:black;
}

#menu  h6 {
display:none;
}

#logo, .brand{
	cursor:pointer;
	position:absolute;
	top:16px;
	left:10px;
	z-index:200;

}
#logo a,.brand a {
	padding:5px;
	display:block;
}
.toBlack:before {
	transition: all 0.4s; 	
	-webkit-transition:all 0.4s;
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	position:absolute;
	bottom:0;
	left:0%;
	width:100%;
	height:0%;
	background:rgba(0,0,0,0);
	display:block;
	content:"";
	z-index:-1;
}
 
 
 header,main,#container,aside,footer {
 	overflow-y:initial;
 	overflow-x:hidden;
 }

 header.header {
    position: absolute;
    top:0;
    left:0;
    width:100%;
    z-index:5;
    padding:10px;
    text-align:left;
    height:80px;
    background:black;
}
#mainContent {
		padding-top:80px;
	}
#container {
	-webkit-transition:all 0.6s;
	-moz-transition:all 0.6s;
	-ms-transition:all 0.6s;
	transition:all 0.6s;
	position:relative;
	
}


footer {
	background:black;
	color:white;
	position:relative;
	z-index:2; 
}

.crop900 {
	width:700px;
	margin:0 auto;
}
.crop1200 {
	width:1200px;
	margin:0 auto;
}
.crop1500 {
	width:1500px;
	margin:0 auto;
}
.crop1600 {
	width:1600px;
	margin:0 auto;
}
.footer	.demi {
	padding:20px;
}
#back-top {
	display:inline-block;
	padding:10px;
	margin:20px auto;
	background:white;
	color:black;
	position:relative;
}
.desktop #back-top:after {
	-webkit-transition:bottom 0s, opacity 1.9s;
	-moz-transition:bottom 0s, opacity 1.9s;
	-ms-transition:bottom 0s, opacity 1.9s;
	transition: bottom 0s, opacity 1.9s;
	position:absolute;
	bottom:-800px;
	opacity:0; 
	display:block;
	content:" ";
}
.desktop #back-top:hover:after {
	opacity:1;
	bottom:150%;
	content:"Remontez dans mon bateau !";
	left:50%;
	margin-left:-150px;
	width:300px;
	z-index:3;
	background:white;
	padding:20px;
	font-size:1.5em;
}

/*navigation simili */
.desktop.simili #yoo-zoo {
	transition:all 0.4s;
	opacity:0;	
}

.tongfies .teaser-item {
	margin:10px 5px;
	padding:15px;
	background:#eee;
}
.yoo-zoo.rating div.rating-container {
	margin:0 auto;
}



/*pages de base accueil service agence realisations*/


/*accueil*/

#pageHead > img, #pageHead video {
	height:auto;
	display:block;
	width:100%;
	margin-bottom:0px;
}

#pageTitle,
.pages-custom #pageTitle {
	color:black;
	background:#f9f9f9;
	padding:25px 15px 15px 15px;
}

#pageTitle strong {
	font-weight:inherit;
}



#homeServices {

}

.aielateur {
    text-transform: uppercase;
    width: 100%;
    cursor:pointer;
    color:white;
    padding:15px; 
	font-size:2em;  
	display:block;
	background:black;
	border-bottom:1px solid white;
	  
}

#homeContent {
	background:#efefef;
	text-align:center;
}
 .next.transformHead {
	display:block;
	height:40px;
	margin:0 auto;
	background:url('../img/bot.png') no-repeat center center;
	text-indent:-99999px;
	overflow:hidden;
	color:rgba(255,255,255,0);
	width:40px;
}

.scrolled .next.transformHead {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
}
#homeContent article {
	padding:50px 20px;
	width:930px;
	margin:0 auto;
}

.animTexte {

}	
.minuscules {
	text-transform:none!important;
}

#homeContent .h3 a, 
.bouton a,
a.bouton,
.NewsletterForm .formSend input#Envoyer{
	display:inline-block;
	padding:7px 15px;
	width:auto!important;
	margin:0;
	border:1px solid; 
	font-weight:800;
	line-height:1.45em;	
	text-transform:uppercase;
	position:relative;
	z-index:1;
	background:none!important;
	transition:all 0.6s;
		text-decoration:none!important;
}


.textilate #homeContent .h3 a {
	opacity:0;
	transition:all 0s;
}

#homeContent .h3 a:after, 
a.bouton:after,  
.bouton a:after,
.NewsletterForm .formSend input#Envoyer:after{
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	width:0%;
	transition:all 0.4s;
	height:100%;
	background:#f63440;
	content:"";
}
#homeContent .h3 a:hover, 
a.bouton:hover,
.bouton a:hover,
.NewsletterForm .formSend input#Envoyer:hover{
	color:white!important;
	border:1px solid #f63440;
}
#homeContent .h3 a:hover:after, 
a.bouton:hover:after,  
.bouton a:hover:after,
.NewsletterForm .formSend input#Envoyer:hover:after {
	width:100%;
}

#pageTitle .bouton {
	color:#f63440;
}
#homeReals {
	text-transform:uppercase;
	background:white;
	color:white;
}
#homeReals .element-itemname {
	color:white;
	font-size:1.5em;
	font-weight:900;
}
#homeReals .element-text {
	color:#f73442;
	margin-top:1em;
	font-size:1.2em;
	font-weight:800;
}


#homeReals #petitesReals .floatbox ,
#homeReals #grandesReals .floatbox {
    padding: 50px 12px 25px;
}
#homeReals .floatbox .element-image {
	border:1px solid #f0f0f0;
}
#homeReals .floatbox img{
	display:block;
	width:100%;
} 
  
#petitesReals {
    padding-bottom: 50px;
}
#petitesReals, #grandesReals {
	overflow:hidden;
	padding-left:25px;
	padding-right:25px;
}
 #homeReals #petitesReals:hover .floatbox ,
 #homeReals #grandesReals:hover .floatbox {

   /*-webkit-transform:scale(0.95);
	transform:scale(0.95);  */
	opacity:0.85;
}
#homeReals #petitesReals .floatbox,
#homeReals #grandesReals .floatbox {
    -webkit-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

 #homeReals #petitesReals .floatbox:hover,
#homeReals #grandesReals .floatbox:hover {
    /*-webkit-transform:scale(1);
	transform:scale(1); */
	opacity:1;
    position:relative;
    z-index:1;
}
 #homeReals #petitesReals .floatbox ,
#homeReals #grandesReals .floatbox {
    position: relative;
}
#homeReals  .floatbox .pos-content {
	width:100%;
	height:auto;
	color:black;
	padding:15px;
}
 #homeReals .floatbox .pos-content {
	opacity:1;
	-webkit-transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	transition:all 0.3s ease; 
} 
#homeReals #serviceReals .floatbox .pos-content {
	background:white;
}


#homeReals .floatbox .pos-media {
}  
#homeReals .floatbox img {
	position:relative;
} 
#homeReals .element-itemname {
	font-size:1.5em;
	font-weight:900;
	color:inherit!important;
}

#homeReals .element-text {
	color:#f73442;
	font-size:1em;
	font-weight:800;
	-webkit-transition:all 0.2s ease;
	-moz-transition:all 0.2s ease;
	-ms-transition:all 0.2s ease;
	transition:all 0.2s ease;
	margin-top:0;
}

#homeReals #petitesReals .element-itemname {
	font-size:1.3em;

}
 #homeReals #petitesReals .element-text {
	font-size:0.8em;
}



#allReals {
	color:white;
	text-align:center;	
	font-size:2em;
	margin:0;
	background-image:url('../../../images/sweetshome.jpg');
	background-repeat:no-repeat;
	background-position:center center ;
	-webkit-background-size: cover;
	background-size: cover;
}

#allReals a {
	display:block;
	color:#222;
	padding:110px 30px;
}

#allReals a,
#allReals a span.h2,
#allReals a:hover span.thin {
	-webkit-transition:all 0.4s;	
	-moz-transition:all 0.4s;
	-ms-transition:all 0.4s;
	transition:all 0.4s;
	
}

.desktop #allReals a:hover{
	background:rgba(0,0,0,0.3); 
	color:white;
}
#allReals span {
	display:inline-block;
	position:relative;
	z-index:1;
}
#allReals span.thin {
	font-weight:100;
	font-size:3em;
}
.desktop #allReals a:hover span.thin {
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	-ms-transform:rotate(180deg);
	transform:rotate(180deg);
}
#allReals span.h2 {
	font-size:1em!important;
	display:block;
}

#clients {
	text-align:center!important;
	background:#282828;
	color:white;
	padding:50px 0;
}
#clients .crop1600 {
	width:1200px;
}
#clients img {
	margin-top:30px;
	margin-bottom:20px;
}
#homeEnd {
	display:none;
}

/*.accueil #clients {
	display:none;
} 

#homeEnd {
	overflow:hidden;
	height:24vw;
}
#homeEnd{
	-webkit-transition:height 0.9s ease 60s, opacity 0.6s;
	-moz-transition:height 0.9s ease 60s, opacity 0.6s;
	-ms-transition:height 0.9s ease 60s, opacity 0.6s;
	transition:height 0.9s ease 60s, opacity 0.6s;
}

#homeEnd img {
	-webkit-transition:margin 0.9s ease 60s, transform 0.9s ease 60s, opacity 0.6s;
	-moz-transition:margin 0.9s ease 60s, transform 0.9s ease 60s, opacity 0.6s;
	-ms-transition:margin 0.9s ease 60s, transform 0.9s ease 60s, opacity 0.6s;
	transition:margin 0.9s ease 60s, transform 0.9s ease 60s, opacity 0.6s;
}
#homeEnd:hover,
#homeEnd:hover img {
	-webkit-transition:all 1.9s;
	-moz-transition:all 1.9s;
	-ms-transition:all 1.9s;
	transition:all 1.9s;
}
#homeEnd:hover {
	height:26vw;
}

#homeEnd:hover img {
	margin:-18vw 0 0 -30%;
	transform:scale(1.8);
} */
#homeEnd img{
	display:block;
	width:100%;
}
footer {
	padding-top:50px;
	padding-bottom:50px;
}
footer .crop900 {
	width:900px;
}
#foot_nav {
	text-align:left;
}
#foot_nav .bouton {
	color:#f63440;
	margin-top:16px;
}

.footMenu .menu{
	display:block;
	width:100%;
	position:relative;
	color:#999;	
	clear:both;
}
.footMenu .menu:after {
	position:absolute;
	z-index:0;
	top:50%;
	left:0;
	width:100%;
	border-bottom:1px solid;
	content:" ";	
}

.footMenu .menu li  {
	display:inline-block;
	
	background:black;
	padding:5px 3px;
	position:relative;
	z-index:1;
}
.footMenu .menu li a:after {
	content:" - ";
}
.footMenu .menu li:last-child a:after {
	content:"";
}
.footMenu .menu li:last-child {
	padding-right:20px;
}

.tel {
	color:#f63440;
	font-weight:900;
	font-size:2em;
	margin: 0;
}


#reseaux-sociaux li{
    display: block;
    float: left;      
    height: 44px;
    width:44px;
    list-style: outside none none;
    padding: 0;
    margin-right:22px;   
}
#reseaux-sociaux li a {
    display: block;
    text-indent: 9999px;
    width: 100%;
    border-radius:50%;
    border:1px solid #666;
    width:44px;
    height:44px;
    background-color:black;
    background-repeat:no-repeat;
    background-position:center center;
	}
.reseaux_real a {
    display:inline-block;
	text-indent: 9999px;
    border-radius:50%;
    border:1px solid #666;
    width:44px;
    height:44px;
    background-color:white;
    background-repeat:no-repeat;
    background-position:center center;
    
}
#reseaux-sociaux li a#facebook {
    background-image:url("../img/reseaux-sociaux/facebook.png");
}
#reseaux-sociaux li a#twitter {
    background-image:url("../img/reseaux-sociaux/twitter.png");
}
#reseaux-sociaux li a#vimeo {
    background-image:url("../img/reseaux-sociaux/vimeo.png");
}
#reseaux-sociaux li a#pinterest {
    background-image:url("../img/reseaux-sociaux/pinterest.png");
}

.reseaux_real  a#ico_facebook {
    background-image: url("../img/reseaux-sociaux/facebook-noir.png");
}
.reseaux_real  a#ico_tweeter {
    background-image:url("../img/reseaux-sociaux/twitter-noir.png");
}
.reseaux_real  a#ico_google {
    background-image:url("../img/reseaux-sociaux/google-noir.png");
}
.reseaux_real a#ico_pinterest {
    background-image:url("../img/reseaux-sociaux/pinterest-noir.png");
}
.reseaux_real  a:hover,
#reseaux-sociaux li a:hover {
	border:1px solid #F63440;
	background-color:#F63440;	
}
/*Agence*/
.module_agence_clients {
	padding-bottom:20px;
}

.pages-custom-creation #demi1-2 img{
	filter:hue-rotate(0deg);
	-webkit-filter:hue-rotate(0deg);
	animation: tick-tock 6s linear infinite;
	-webkit-animation: tick-tock 6s linear infinite;
}

@keyframes tick-tock {
  to {
	-webkit-filter:hue-rotate(360deg);
  }
}

@-webkit-keyframes tick-tock {
  to {
	-webkit-filter:hue-rotate(360deg);
  }
}

#part1 {

}
#part2 {

}
#part3 {

}
#agenceModule3 {

}
#agenceModule4 {

}
#services {

}
.paragraphe_video a.video-full {
    display: block;
    height: 100%;
    width: 100%;
    position:relative;
}
.paragraphe_video .thumb.video-full::after, 
.paragraphe_video .thumb.video-full.sans_play::after {
    background: rgba(0, 0, 0, 0) url("../img/play.png") no-repeat scroll center center;
    content: " ";
    display: block;
    height: 70px;
    left: 50%;
    margin: -35px 0 0 -35px;
    opacity: 1;
    position: absolute;
    top: 50%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
	transform: rotate(0deg);
    -webkit-transition:all 0.3s  linear 0s;
	-moz-transition:all 0.3s  linear 0s;
	-ms-transition:all 0.3s  linear 0s;
    transition: all 0.3s linear 0s;
    width: 70px;
    z-index: 2;
}


/*services*/
#serviceReals {
	
}
/*page de base*/

.pages-custom {
	text-align:left;
}

.pages-custom #baseContent
{
	padding:15px 15px 50px 15px;
}
#baseContent h2,
#baseContent h3 {
	margin-top:1.5em;
}
#baseContent li {
	margin-left:20px;
}
#baseModule1 {
	background:#f63440;
	padding:45px 40px 105px 40px;
	color:white;
}
#baseModule1 article > h3 {
	font-size:2.4em!important;
	font-weight:100;
	text-align:left;
	padding:15px 5px 12px 21px;
}

.pages-custom-nos-realisations #baseModule1 article > h3 {
	padding-top:0;
}
#baseModule1 .itemALaUne {
	text-align:center;
	padding:0 5px 20px 0;
	
} 
.itemALaUne .box,
.desktop #homeReals #serviceReals .floatbox{
	position:relative;
}
.desktop #homeReals #serviceReals .floatbox {
	margin:15px;
}
.itemALaUne .pos-content,
.desktop #homeReals #serviceReals  .pos-content{
	align-items: center;
    align-content:center;
    justify-content:center;
    background: hsla(0, 0%, 0%, 0) none repeat scroll 0 0;
    display: flex;
    flex-direction:column;
    overflow:hidden;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
    height:100%;
    color:rgba(255,255,255,0);
    transition:height 0.4s linear 0.1s, color 0.3s linear 0s;
    opacity:0;
    pointer-events:none;
}
.itemALaUne:hover .pos-content ,
.desktop #homeReals #serviceReals .floatbox:hover .pos-content{
	background: hsla(0, 0%, 0%, 0.8) none repeat scroll 0 0;
	color:rgba(255,255,255,1);
	-webkit-transition:background 0.4s, color 0.4s linear, opacity 0.3s;
	transition:background 0.4s, color 0.3s linear, opacity 0.3s;
	opacity:1;
}
.itemALaUne .pos-media,
.desktop #homeReals #serviceReals .pos-media {
	overflow:hidden;
}
.itemALaUne .pos-media img,
.desktop #homeReals #serviceReals .pos-media img {
	-webkit-transition:-webkit-transform 0.4s;
	transition:transform 0.4s;	
}
.itemALaUne:hover .pos-media img 
.desktop #homeReals #serviceReals .floatbox:hover .pos-media img{
	transform:scale(1.1);
	-webkit-transform:scale(1.1);
}
#baseModule2 {
	padding:0 15px 15px 15px;
}
#baseModule3 {

}

/*actus*/
.teaser-actu {
	padding-bottom:30px;
	margin-bottom:30px;

}
.teaser-actu:after{
	content:" ... ";
	text-align:center;
	font-family:"Times New Roman";
	color:#f63440;
	font-size:4em;
	
}
.teaser-actu .pos-media img {
	box-shadow:0 0 03px #999;
}
.teaser-actu:nth-child(2n+1) .pos-media img {
	box-shadow:0 0 3px #999,200px 60px 0px rgba(0,0,0,0.035);
}
.teaser-actu:nth-child(2n) .pos-media img {
	box-shadow:0 0 3px #999,-200px 60px 0px rgba(0,0,0,0.035);
}
.teaser-actu .pos-content .element-text {
	color:#f63440;
	margin-top:10px;
	font-weight:800;
}
#actu_full #contentReal{
    /*-webkit-box-shadow:0 0 3px #999;
	box-shadow:0 0 3px #999; */
	padding:0 15px 15px 15px;
	margin-bottom:50px;
	/*margin-top:calc(100vh - 263px);*/
	position:relative;
	z-index:2;
	background:white;
} 
#actu_full .backReals {
	position:relative;
	z-index:2;
}
#actu_full .backReals a.bouton.ajax {
    background: white!important;
}

#actu_full .element-image img {
	-webkit-box-shadow:0 0 2px #999;
	box-shadow:0 0 2px #999;
	margin-top:50px;
	margin-bottom:10px;
	max-height:60vh;
	width:auto;
}


.pages-custom-contact #baseModule1 {
	padding:50px 0px;
	background: rgba(0, 0, 0, 0) url("../img/black_denim.png") repeat fixed 0 0;
}
.pages-custom-contact #baseModule2 {
	padding:0;
}
#userForm .crop900 {
	margin:0px auto!important;
	width:500px;
}
#userForm .crop900 {
	margin: 0px auto;
    padding: 50px 5px;
    width:100%;
}
#userFrom {
	padding:50px 0;
}
.formResponsive .formHorizontal .rsform-block {
	margin:0 auto;
}
#userForm h3 {
	font-weight:100;
	font-size:2.3em!important;
	padding:12px;
	margin-top:0!important
}
@media(min-width:960px) {
	#userForm .crop900 {
	    
	    margin: 50px auto;
	    padding: 40px 0px;
	    width: 850px;
	}
	.formResponsive .formHorizontal .rsform-block {
		width:450px;
	}
	#userForm h3 {
		font-size:4.2em!important;
	}
}

.formResponsive .formHorizontal .formControlLabel {
	padding-top:10px;
}
.formResponsive .formHorizontal .formControls {
	width:304px;
}
.rsform-block-projet .formControls {
    padding-top: 7px;
}
#userForm .formRequired {
	display:none;
}
#userForm .formError {
	background:white;
	padding-right:5px;
}
#userForm .rsform-block-message {
    padding: 8px 0 10px;
}
#userForm .rsform-block.rsform-block-envoyer {
    margin-top: -11px;
}
.rsform-block-projet .formControls input {
    margin-left: 70px;
    margin-top: 8px;
}
.formResponsive select{
	width:294px;
	padding:5px;
	font-family:"Raleway",sans-serif;
}

#userForm .rsfp-skinHtml5 .irs-bar {
    background: #ff3333 none repeat scroll 0 0;
    border-bottom: 1px solid #990000;
    border-top: 1px solid #990000;
    height: 13px;
    top: 32px;
}
#userForm .rsfp-skinHtml5 .irs-from, 
#userForm .rsfp-skinHtml5 .irs-to, 
#userForm .rsfp-skinHtml5 .irs-single {
	color:black;
	background:white;
}
#userForm .rsfp-skinHtml5 .irs-grid-text,
.rsfp-skinHtml5 .irs-min, 
.rsfp-skinHtml5 .irs-max {
	background:none;
	color:white;
}
#userForm .rsfp-skinHtml5 .irs-grid-pol.small,
#userForm .rsfp-skinHtml5 .irs-grid-pol {
    background: #fff none repeat scroll 0 0;
}
.formResponsive textarea, 
.formResponsive input[type="text"], 
.formResponsive input[type="number"], 
.formResponsive input[type="email"], 
.formResponsive input[type="tel"], 
.formResponsive input[type="url"], 
.formResponsive input[type="password"] {
	-moz-box-sizing:border-box!important;
	box-sizing:border-box!important;
	width:304px;
	height:38px;
	padding:10px;
	font-family:"Raleway",sans-serif;
}
.formResponsive textarea {
	height:108px;
}
.formResponsive input[type="button"], 
.formResponsive button[type="button"], 
.formResponsive input[type="submit"], 
.formResponsive button[type="submit"], 
.formResponsive input[type="reset"], 
.formResponsive button[type="reset"],
.formResponsive input[type="button"]:hover, 
.formResponsive button[type="button"]:hover, 
.formResponsive input[type="submit"]:hover, 
.formResponsive button[type="submit"]:hover, 
.formResponsive input[type="reset"]:hover, 
.formResponsive button[type="reset"]:hover {
	-moz-box-sizing:border-box!important;
	box-sizing:border-box!important;
	width:304px;
	height:38px;
	padding:10px;
	font-family:"Raleway",sans-serif;
    background-color: rgba(255,255,255,0);
    background-image: none;
    background-repeat: repeat-x;
	border:1px solid white;
    -webkit-box-shadow: none;
	text-shadow: none;
	-webkit-text-shadow: none;
    color: white;
    text-transform:uppercase;
    cursor: pointer;
    display: inline-block;
    font-size: 1em;
    line-height: 18px;
    margin-bottom: 0;
    vertical-align: middle;
}
.formResponsive input[type="button"]:hover, 
.formResponsive button[type="button"]:hover, 
.formResponsive input[type="submit"]:hover, 
.formResponsive button[type="submit"]:hover, 
.formResponsive input[type="reset"]:hover, 
.formResponsive button[type="reset"]:hover {
	background:white;
	color:#f63440;
}

#CV, #LM {
	width:300px!important;
}
#baseModule3{
	border:50px solid white;
	overflow:hidden
}


/*nos realisations*/
.uk-subnav.uk-subnav-pill.uk-flex-left {
	padding-top:40px!important;
	padding-bottom:35px!important;
	margin-bottom:0!important;
	margin-top:0!important;
}
ul.uk-subnav-pill > li > a {
	padding:7px 12px;
	font-weight:800;
	text-transform:uppercase;
	border:1px solid black!important;
	border-radius:0;
	font-size:1.2em;
}

.uk-subnav-pill > .uk-active > *,
.uk-subnav-pill > .uk-active > a,
ul.uk-subnav-pill > li > a:hover {
	color:#f63440;
	border:1px solid #f63440!important;	
	background:none;
}

.uk-panel figure ,
.uk-panel figure img{
	/*width:100%; */
}

.uk-overlay-background {
	background:rgba(0,0,0,0.85)!important;
}
.projets-blog {
	margin-top:50px;
}
.projets-blog h1 {
	text-align:center;
	font-size:1.6em!important;
}
.projets-blog .item,
.submission {
	width:800px;
	margin:150px auto!important;
	padding:40px!important;;
	background:#efefef;
	border:1px solid #ccc;
	text-align:left;	
}
#tinymce {
	text-align:left;
}
#tinymce img {
	max-width:100%;
}

.projets-blog .item section {
	padding:15px;
}


.projets-blog .teaser-item {
	border-top:1px solid #999;
	padding:20px ;
	width:300px;
	margin:0 auto;
}
.submission .element-textarea > strong {
	font-size : 2em;
	font-weight:bold;
	display:block;
	margin:20px 0;
	float:none!important;
	width:100%!important;
	
} 

.projets-blog .item .blog_content > h2{
	border-bottom:1px solid #aaa;
	margin:100px 0 30px 0;
	padding:0px 0 10px 0;
	font-weight:bold;
}
#yoo-zoo.projets-blog .item .blog_content h3 {
	margin-top:50px;
}
.projets-blog .item .blog_content ul li {
	margin-left:50px;
}
.projets-blog .item .blog_contentp, 
.projets-blog .item .blog_contentul li  {
	font-size:1em!important;
}

#beforeSide ul {
	padding-top:50px;
	width:300px;

	border-bottom:1px solid;
	margin:20px auto;	
}
#beforeSide ul  li {
	display:block;
	text-align:center;
	list-style-type:none;
	border-top:1px solid;
	border-left:1px solid;
	border-right:1px solid;	}
#beforeSide ul  li a {
	display:block;
	padding:5px;

}

.jmapcolumn  {
	width:600px;
	padding:30px;
	margin:30px auto;
	background:#eee;
}
/*REal*/
.video-16-9 {
	text-align:center;
}
.video-16-9 iframe {

}

#contentReal {
	width:1240px;
	margin:0 auto;
}

#title_group {
	width:1200px;
	margin:0 auto;
	padding:40px 15px;
}
#texteContent {
	width:520px;
	margin:0 auto;
	padding:15px;
}
#texteContent p {
	text-align:left;
	line-height:1.4em!important;
	margin:1.5em 0 2.5em 0!important;
}
#texteContent p > img ,
#texteContent p > iframe{
	-webkit-box-shadow:0 0 3px #ccc;
	box-shadow:0 0 3px #ccc;   
	
} 
.desktop #texteContent p > img {	
	transition:all 0.8s ease 0.5ss;
	-webkit-transition:all 0.8s ease 0.5s;
}
.desktop #texteContent p > img:hover   {
    -webkit-box-shadow:0 0 12px #ccc;
    box-shadow:0 0 12px #ccc;     

}
#texteContent p {
	line-height:1.6em!important;
}
#texteContent p a.bouton {
	line-height:1em!important;
	padding:6px 11px!important;
	text-transform:none;
}
.desktop #texteContent p {
	-webkit-transition:all 0.8s ease 0s;
	transition:all 0.8s ease 0s;
	transform-origin:center center;
	-webkit-transform-origin:center center;
	perspective:800px;
	-webkit-perspective:800px;
	transform-style:preserve3d;
	-webkit-transform-style:preserve3d;
}



hr.sep {
	clear:both;
	color:#999;
	border-bottom:none;
	border-top:1px solid #999;
	border-right:none;                     
	
	border-left:none;
}
.backReals {
	padding:40px 0;
}

#itemLie > h3 {
    padding: 50px 0 40px;
    color:white;
}
#itemLie .pos-content {
    background: hsl(0, 0%, 100%) none repeat scroll 0 0;
    border: 1px solid hsl(0, 0%, 90%);
	padding: 30px;
}


#itemLie {
    padding-bottom: 100px;
    position: relative;
    background:#333;
    margin-top:70px;
}
#itemLie .element-itemname a {
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}


/*service*/

.tranche {
	padding:15px;
	text-align:left;
} 
.tranche h3 {
	font-weight:100;
	font-size:2.5em!important;
}

.tranche h3 + h2,
.tranche h3 + .h2 {
	margin-top:0!important;
}
.tranche p {
	line-height:1.2em;
	margin-top:1.6em!important;
}
#tranche1 {

}   
#tranche1 h3 {
	color:#f63440;
}
#tranche2 {
	color:white;

}
#autresServices, #homeReals {
	text-align:center;
}
.type_service #homeReals {
	padding-top:50px;
	padding-bottom:50px;
	background:white;
}
.type_service #homeReals h3 {

}

#autresServices h3, #homeReals h3 {
	font-size:2.5em!important;
	font-weight:100;
	margin:50px auto;
	color:black;
}
.autreService {
	width:100%;
	display:inline-block;
	text-align:center;
	color:#f63440;
	padding:30px 0;
}
.autreService .nomAutre {
	text-transform:uppercase;
	font-size:1.2em;
}
.autreService img {
	display:inline-block;
	margin:10px auto;
}
.autreService .bouton {
	margin-top: 20px;
	color:#f63440;
}


/*agence 

*/
.thumb.video-full.sans_play span {
	display:none;
}
#tranche2 {
	background:#f63440;
}
#tranche3 {
	padding-bottom:93px;
}
#tranche3 > img {
    display: block;
}
.tiers {
	width:540px;
	float:left;
}
.double-tiers {
	width:1060px;
	float:right;
}
.flexfloat {
	display:flex;
	align-items:center;
}
#services-agence .flexfloat {
	display:block;
}
#demi3-1 {
	text-align:right;
	display:flex;
	padding:20px;
	flex-direction:column;
	justify-content:center;		
}
#demi3-1 * {
	text-align:right!important;
}
#demi3-2 {
	padding-right:50px;
}
.module_agence_clients {
	margin-top:50px;
}
#demi4-2 {
	text-align:center;
	display:flex;
	padding:20px;
	flex-direction:column;
	justify-content:center;			
}
.acces-services {
		margin-top:30px;
	}
.acces-services > a {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin-top:20px;
}
.acces-services > a span {
	font-weight:800;
	text-transform:uppercase;
	margin-top:10px;
	font-size:1.4em;
}


/*login*/
.login form {
    background: hsl(0, 0%, 93%) none repeat scroll 0 0;
    margin: 50px auto;
    padding: 50px 15px;
    width: 300px;
}
.login form fieldset{
	border:none;
}

/*Newsletter*/

.NewsletterForm {
	border:none;
	color:white;
}

.NewsletterForm .formMail {
	display:inline-block;
	width:200px;
}

.NewsletterForm .formSend {
	display:inline-block;
	width:140px;
	margin-left:2px;
}

.NewsletterForm input {
	font-family:"Raleway",sans-serif;
	border:1px solid!important;
	padding:5px 10px!important;
	color:#ffffff;
	display:block!important;
	width:100%!important;	
	background:black!important;
    font-weight: 800!important;
    line-height: 1.45em!important;
    text-align:center!important;
    margin-bottom:5px;
    height:42px!important;
} 
.NewsletterForm .formSend input#Envoyer {
	color:#F63440;
	text-transform:uppercase!important;
}


/* MEDIA QUERIES
*********************************************/

/* Extra small devices (phones, less than 768px) */
/* No media query -> mobile first strategy */


@media (min-height:640px) {
	#menu {
	    font-size: 1.25em;    
	}
	#menu .menu_principal h6 {
		font-size:3em!important;
		font-weight:900;
		display:block;
	}
	#menu ul.menu > li {
		margin-top:20px;
	}

}
@media (min-width: 640px) {
	header.header {
		background:none;
	}
	#mainContent {
		padding-top:0;
	}
	#burger.book {
		color:#f63440;
	}
	#burger.book span {
		background:#f63440;
		box-shadow: 0 0 0 #999;
	}
	.footer .demi {
		float:left;
		width:50%;
	}
	#reseaux-sociaux {
	    margin: 10px auto 10px;
	    position: relative;
	    width: 320px; 
		float:left;
		text-align:right;  
	}
	#itemLie .pos-content {
	    bottom: 40px;
	    left: 50%; 
		z-index: 2;
	    position: absolute;
	    text-align: left;
	    display: inline-block;
	}
	#itemLie .element-image img {
		margin-left: 0;
	    margin-right: 30%;
	    width: 400px;
	    box-shadow:70px 35px 0 black;
		-webkit-box-shadow:70px 35px 0 black;
		transition: all 0.4s;
		-webkit-transition: all 0.4s;
	}
	#itemLie .element-image img:hover {
	    box-shadow:35px 35px 0 black;
		-webkit-box-shadow:35px 35px 0 black;	
	}  
	#itemLie .element-itemname a:hover {
		color:#f63440;
	}
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) {
	.desktop #homeReals #grandesReals {
		padding-top:20px;
	}
	.desktop #homeReals #petitesReals .floatbox ,
	.desktop #homeReals #grandesReals .floatbox {
	    padding: 30px 25px 0px;
	}
	h1, .h1 {
		font-size:3.1em!important;
	}
	h2,.h2 {
		font-size:1.7em!important;
	}
	h3,.h3 {
		font-size:1.25em!important;
	}
	#contentReal h1, .punch {
		font-size:4.3em!important;
	}
	#homeContent article p{
		font-size:2.1em;
	}
	#allReals span.thin {
		font-size:4em;
	}

	.playing #menu{
		width:33.33%;
	}
	#pageHead {
		background: black;
	    color: hsl(0, 0%, 100%);
	    height: 93vh;
	    overflow: hidden;
	    position: relative;
	    text-align: left;
	    z-index:1;
	} 
	#pageHead::after,
	#pageHead::before {
	    border-left: 1px solid white;
	    content: "";
	    height: 100%;
	    opacity:0.4;
	    position: absolute;
	    top: 50%;
	    width:0px;
	    z-index:2;
		pointer-events:none; 
		-webkit-transition:all 0.6s;
		-moz-transition:all 0.6s; 
		-ms-transition:all 0.6s; 
		transition:all 0.6s;
		display:block;
		background:black;
		-webkit-transform:translateY(-50%);
		-moz-transform:translateY(-50%);
		-ms-transform:translateY(-50%);
		transform:translateY(-50%);
	}    
	#pageHead::after {
	   left: 66.66%;
	}
	
	#pageHead::before {
	    left: 33.33%;
	}
	
	#pageHead.in-view.clicked video {
		opacity:1;
	}
	#pageHead > img {
	    left: 50%;
	    max-width: none;
	    max-height:none; 
		min-width: 100%;
	    min-height:100%;  
	    width:auto;
	    position: absolute;
	    top: 50%;
	    z-index:1;
	    -webkit-transform: translate3d(-50%, -50%, 0);
	    -moz-transform: translate3d(-50%, -50%, 0);
	    -ms-transform: translate3d(-50%, -50%, 0);
	    transform: translate3d(-50%, -50%, 0);
	}
	#pageHead > video {
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  z-index:1;
	  max-width:none;
	}
	#pageHead, #pageHead.blanc {
		color:#FFFFFF;
	}
	#pageHead.noir {
		color:#000000;
	}
	#pageHead.rouge {
		color:#f63440;
	}
	#pageTitle,
	.pages-custom #pageTitle {
		background:none;
	}
	#pageTitle {
	    left: 10%;
	    width: 60%;
	    position: absolute;
	    top: 50%;
	    -webkit-transform: translate3d(0, -50%, 0);
	    -moz-transform: translate3d(0, -50%, 0);
	    -ms-transform: translate3d(0, -50%, 0);
	    transform: translate3d(0, -50%, 0);
	    z-index:2;
	    overflow:hidden;
		-webkit-transition:all 0.4s;
		-moz-transition:all 0.4s;
		-ms-transition:all 0.4s;
		transition:all 0.4s;
		background:none;	
	}	
	
	#pageHead #pageTitle,
	#pageHead.blanc #pageTitle{
		text-shadow:0 0 3px  rgba(0,0,0,0.5);
		-webkit-text-shadow:0 0 3px rgba(0,0,0,0.5);
		color:#FFFFFF;
	}
	#pageHead.rouge #pageTitle{
		text-shadow:none;
		-webkit-text-shadow:none;
		color:#f63440;
		
	}
	#pageHead.noir #pageTitle{
		text-shadow:0 0 3px  rgba(255,255,255,0.5);
		-webkit-text-shadow:0 0 3px rgba(255,255,255,0.5);
		color:#000000;
	}	

	#pageTitle > * {
		max-width:none;
		width:60vw;
	}
	
	#pageHead, 
	#pageHead img,
	#pageHead video,
	.item_header,
	#contentReal{

	} 
	.desktop #pageHead {
		-webkit-perspective:800px;
		-moz-perspective:800px;
		-ms-perspective:800px;
		perspective:800px;
		-webkit-transform-style:preserve3d;
		-moz-transform-style:preserve3d;
		-ms-transform-style:preserve3d;
		transform-style:preserve3d;

	}
	.desktop #pageHead.vidHead {
		cursor:url('../img/focus_blanc.png') 8 8, pointer;
	} 
    .desktop #pageHead.clicked #pageTitle {
		-webkit-transform-origin:left center 50px;
		-moz-transform-origin:left center 50px;
		-ms-transform-origin:left center 50px;
		transform-origin:left center 50px;
		filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='4');
		-ms-filter:blur(4px);
		-webkit-filter:blur(4px);
		filter:blur(4px);
		opacity:0.75;
		left:10%;
		overflow:visible;
	}
	.desktop.playing #pageHead #pageTitle {
		-webkit-transform-origin:left center 50px;
		-moz-transform-origin:left center 50px;
		-ms-transform-origin:left center 50px;
		transform-origin:left center 50px;
		opacity:0.4;
		left:10%;
		overflow:visible;		
	}
	.desktop #pageHead.clicked::before/*,
	.desktop.playing #pageHead::before */{
		height:33%;
		left:37%
	}
	.desktop #pageHead.clicked::after/*,
	.desktop.playing #pageHead::after */ {
		height:33%;
		left:63%;
	}
	.desktop #pageHead #pageTitle .bouton,
	.desktop #pageHead #pageTitle h2,
	.desktop #pageHead #pageTitle h3,
	.desktop #pageHead #pageTitle p {
		-webkit-transition: all 0.4s ease 0.4s;
		-moz-transition: all 0.4s ease 0.4s;
		-ms-transition: all 0.4s ease 0.4s;
		transition: all 0.4s ease 0.4s;
	}
    .desktop #pageHead.clicked #pageTitle .bouton,
	.desktop #pageHead.clicked #pageTitle h2,
	.desktop #pageHead.clicked #pageTitle h3,
	.desktop #pageHead.clicked #pageTitle p{
    	
		-webkit-transition: all 0s ease 0s;
		-moz-transition: all 0s ease 0s;
		-ms-transition: all 0s ease 0s;
		transition: all 0s ease 0s;
		opacity:0;
	}
	/*.desktop #pageHead video {
		-webkit-transform:scale(1.2);
		-moz-transform:scale(1.2);
		-ms-transform:scale(1.2);
		transform:scale(1.2); 
	}
	.desktop #pageHead.clicked video {
		-webkit-transform:scale(1);
		-moz-transform:scale(1);
		-ms-transform:scale(1);
		transform:scale(1);
	}  */
	.desktop #pageHead #pageTitle a.bouton:hover,
	.desktop #pageHead #pageTitle .bouton a:hover {
		-webkit-transition: all 0.3s ease 0s;
		-moz-transition: all 0.3s ease 0s;
		-ms-transition: all 0.3s ease 0s;
		transition: all 0.3s ease 0s;		
	}
	
	
	
	.ajax-is-waiting #pageHead img,
	.ajax-is-waiting #pageHead video,
	.ajax-is-waiting .item_header {
		opacity:0;	
		filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='300');
		-ms-filter:blur(300px);
		-webkit-filter:blur(300px);
		filter:blur(300px);
	}
	.ajax-is-waiting #contentReal {
		opacity:0;
	}
	.ajax-is-waiting #pageTitle{
		width:0;
		opacity:0;	
		left:35%;
	}  

	.service {
		position:absolute;
		width:33.333%; 
		width:calc(100% / 3); 
		z-index:3;
		height:50px;
		bottom:0;
		border-bottom:0px solid #f73442; 
        -webkit-transition:height 0.5s,  background 0.3s linear 0.3s;
		-moz-transition:height 0.5s,  background 0.3s linear 0.3s;
		-ms-transition:height 0.5s,  background 0.3s linear 0.3s;
		transition:height 0.5s,  background 0.3s linear 0.3s;	
		text-align:center;
	}		
		
	.service:first-child {
		left:0;
	} 
	.service:nth-child(2) {
		left:33.333%;
		left:calc( 1/3 * 100%);	
	}
	.service:nth-child(3) {
		left:66.666%;
		left:calc( 2/3 * 100%);	
	}	
	
	.aielateur {
	    bottom: 30px;
	    left: 50%;
	    margin-left: -90px;
	    position: absolute;
	    text-transform: uppercase;
	    width: 180px;
	    z-index: 3;
	    cursor:pointer;
	    padding:5px; 
		font-size:1.5em;  
		background:none;
		border:none;  
		font-weight:900;
		-webkit-text-shadow:0px 0px 2px black; 
		text-shadow:0px 0px 2px black;
	}
	.service .hidden {
		-moz-transform:translate3d(-50%,-50%,0);
		-webkit-transform:translate3d(-50%,-50%,0);
		-ms-transform:translate3d(-50%,-50%,0);
		transform:translate3d(-50%,-50%,0);
		top:80%;
		position:absolute;
		left:50%;
		width:300px;
		z-index:2;
		color:white;
		display:block;
		padding:20px;
		font-size:1.4em;
		opacity:0;
	}
	/*.desktop .service .hidden {
		display:none;
	} */
	.servOpen #homeServices .custom {
		height:100%;	
	}
	.highlight.service {
		background:#f73442;
		height:100%;
		height:100vh;
	}
	.playing .highlight.service {
		background:black;
	}
	

	.highlight.service .hidden {
		-webkit-transition: opacity 0.4s ease 0.6s, top 0.9s ease;
		-moz-transition: opacity 0.4s ease 0.6s, top 0.9s ease;
		-ms-transition: opacity 0.4s ease 0.6s, top 0.9s ease;
		transition: opacity 0.4s ease 0.6s, top 0.9s ease;
		display:block;
		top:50%;

		opacity:1;

	}      

	highlight.service .aielateur,.aielateur:hover{
		background:black;
		color:rgba(255,255,255,0); 
		-webkit-transition:all 0.3s ease 0.3s;
		-moz-transition:all 0.3s ease 0.3s;
		-ms-transition:all 0.3s ease 0.3s;
		transition:all 0.3s ease 0.3s;
		text-decoration:none!important;
	}
	
	.highlight.service .aielateur:after,
	.highlight.service .aielateur:hover:after {
		content:attr(data-replace);
		display:block;
		background:black;
		color:white;   
		opacity:1;
		padding:5px;
		position:absolute;
		top:0;
		left:0;
		height:100%;
		width:100%;
		cursor:pointer;
	}
	section {
		background:white;
		position:relative;
		z-index:4;
	}

    #serviceReals .floatbox {
		margin-top:20px;
		text-align:center; 
		width:45%;
	}

	#petitesReals .floatbox {
		/*float:left;*/
		width:50%;   
		text-align:center;
	}
	
	#homeContent article {
		padding:100px 20px 150px 20px;
	}	
	
	#grandesReals,#petitesReals,#serviceReals{
		background:white;
		display:flex;
		justify-content:center;
		flex-wrap:wrap;
	}	
	#serviceReals{
		background:white;
	}
	#services-agence .flexfloat {
		display:flex;
	}
}


@media (max-width: 767px) and (max-aspect-ratio: 16/9) {
	#pageHead > video, 
	.video-16-9 iframe {
	   width:100%;
	   height:calc(100vw / (16/9));
	}
}

@media (min-width: 768px) and (min-aspect-ratio: 16/9) {
	#pageHead > video,
	.video-16-9 iframe {
	   height:80vh;
	   width:calc((16/9) * 80vh);
	}
}
@media (min-width: 768px) and (max-aspect-ratio: 16/9) {
	/* 1. Pas de support d'object-fit */
	#pageHead > video {
		width: 300%;
		left: -100%;
	}
	.video-16-9 iframe {
	   width:100%;
	   height:calc(100vw / (16/9));
	}
}

@media (min-width: 768px) and (min-aspect-ratio: 16/9) {
	#pageHead > video {
		height: 300%;
		top: -100%;
	}
	.video-16-9 iframe {
	   height:80vh;
	   width:calc((16/9) * 80vh);
	}
}
@media (min-width: 768px) and (max-aspect-ratio: 16/9) {
	#pageHead > video {
		width: 300%;
		left: -100%;
	}
	.video-16-9 iframe {
	   width:100%;
	   height:calc(100vw / (16/9));
	}
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */
@supports (object-fit: cover) {
  .desktop #pageHead > video {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
  }
}


/* Medium devices (desktops, 992px and up) */
@media (min-width: 960px) {
	
	
	.pages-custom #pageTitle
	{
		padding:15px;
	}	
	h1, .h1 {
		font-size:6.2em!important;
	}

	.news {
		padding:50px;
	}
	#baseModule1 article > h3 {
		font-size:4.2em!important;
		font-weight:100;
		text-align:left;
		padding:60px 15px 50px 83px;
	}
	#grandesReals .floatbox {
		/*float:left;*/
		width:50%;    
		text-align:center;
	}
	#serviceReals .floatbox {
		width:30%;
		margin:45px 22px 0 22px;
	}
	
	#petitesReals .floatbox {
		width:33%;
	}	
	#homeReals #petitesReals .floatbox {
		width:25%;
		padding:25px;
	}
	.demi {
		float:left;
		width:50%;
		padding:20px;
	}
	.tranche h3 {
		font-weight:100;
		font-size:3em!important;
	}

	#tranche1 {
		padding:23px 32px 32px 67px;
	}   

	#tranche2 {
		color:white;
		padding:27px 32px 32px 67px;	
	}
	#demi2-1 {
	    padding-left: 25px;
	}
	#demi1-2 {
	    padding-right: 25px;
	}
	#demi1-1 {
	    padding-left: 85px;
	    padding-right: 40px;
	}
	#demi2-2 {
	    padding-right: 100px;
	}
	#demi2-1 {
	    text-align: right;
	}
	#demi2-1 img {
		position:relative;
		top:-60px;
		display:inline-block;
	}
	
	#demi1-2,
	#demi4-2{
	 	position:relative;
	 	left:150px;
	 	opacity:0.5;

	 }
	#demi2-1,
	#demi3-1 {
	 	position:relative;
	 	left:-150px;
	 }
	#demi1-1,
	#demi2-2,
	#demi4-1 {
	 	opacity:0;
	 	left:50px;
	 	position:relative;
	 }
	 
	.acces-services {
		margin-top:50px;
	    align-items: center;
	    display: flex;
	    justify-content: space-around;
	}
	.acces-services > a {
	    align-items: center;
	    display: flex;
	    flex-direction: column;
	    margin-top:0;
	}
	.acces-services > a span {
		font-weight:800;
		text-transform:uppercase;
		margin-top:30px;
		font-size:1.4em;
	}	 
	 
	 
	 
	 #tranche3 > img {
	 	position:relative;
	 	top:80px;
	 }
	 .demi,
	 .tiers,
	 .double-tiers,
	 #tranche3 > img {
	 	transition: all 1.2s ease;
	 	-webkit-transition:all 1.2s ease;
	 }  
	 #tranche3.in-view > img {
	 	top:0;
	 }
	.in-view .demi,
	.in-view .tiers,
	.in-view .double-tiers {
	 	left:0!important;
		top:0!important;
	 	opacity:1!important;
	 }
		 
	.desktop section, 
	.desktop footer .container/*, 
	.desktop header*/ {
		opacity:0;
	}
	header.in-view {
		opacity:1;
		-webkit-transition:all 0.6s ease 1.5s;
		-moz-transition:all 0.6s ease 1.5s;
		-ms-transition:all 0.6s ease 1.5s;
		transition:all 0.6s ease 1.5s;
	}
	.desktop #pageHead {
		-webkit-transition:all 0.6s ease 0s;
		-moz-transition:all 0.6s ease 0s;
		-ms-transition:all 0.6s ease 0s;
		transition:all 0.6s ease 0s;		
	    height:100vh;
	}

	.desktop #pageHead.in-view {
		height:93vh;
	
	}
	
	 #pageHead > img,
	 #pageHead video,
	.item_header
	{
		opacity:0;	
		/*filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
		-ms-filter:f(0px);
		-webkit-filter:blur(0px);
		filter:blur(0px); */
		-webkit-transition:all 0.6s ease 0s;
		-moz-transition:all 0.6s ease 0s;
		-ms-transition:all 0.6s ease 0s;
		transition:all 0.6s ease 0s;	
	}
	 #pageHead > img{
		-webkit-transform:translate3d(-50%, -50%, 0px) scale(1);
		-moz-transform:translate3d(-50%, -50%, 0px) scale(1);
		-ms-transform:translate3d(-50%, -50%, 0px) scale(1);
		transform:translate3d(-50%, -50%, 0px) scale(1);
	}
	#pageHead.in-view video	{
		opacity:1;
		/*filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
		-ms-filter:blur(3px);	
	-webkit-filter:blur(3px);
		filter:blur(3px); */
	}
	#pageHead.in-view > img {
		opacity:1;	
		-ms-filter:blur(0px);
		-webkit-filter: blur(0px);
		filter:blur(0px);
		-webkit-transform:translate3d(-50%, -50%, 0px) scale(1);
		-moz-transform:translate3d(-50%, -50%, 0px) scale(1);
		-ms-transform:translate3d(-50%, -50%, 0px) scale(1);
		transform:translate3d(-50%, -50%, 0px) scale(1);  
	}
	.in-view.item_header {
		opacity:1;	
		filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
		-ms-filter:blur(0px);
		-webkit-filter:blur(0px);
		filter:blur(0px);	
	}	
	#pageHead.clicked > img,
	#pageHead.in-view.clicked > img
	{
		-ms-filter:blur(8px);
		-webkit-filter: blur(8px);
		filter:blur(8px);
		-webkit-transform:translate3d(-50%, -50%, 0px) scale(1.6);
		-moz-transform:translate3d(-50%, -50%, 0px) scale(1.6);
		-ms-transform:translate3d(-50%, -50%, 0px) scale(1.6);
		transform:translate3d(-50%, -50%, 0px) scale(1.6);
	}
	.playing #pageHead,
	.playing #pageHead.in-view {
		background:black;
	}
    .playing #pageHead video,
	.playing #pageHead.in-view video
	 {
	    /*filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='8');
		-ms-filter:blur(8px);
		-webkit-filter:blur(8px);
		filter:blur(8px); */
		opacity:0.4;
	}  
	
	#contentReal {
		opacity:0;   
	}
	.in-view#contentReal {
		opacity:1;  
	}	
	 #pageTitle{
		width:0;
		opacity:0;	
		left:35%;
	} 
	.in-view #pageTitle{
		width:60%;
		opacity:1;	
		left:20%;
	} 
	/*OUPS
	.in-view #pageTitle{
		opacity:0.4;
	}   */
	.servOpen .in-view #pageTitle{
		opacity:0;	
	} 	
	
	section.in-view {
		opacity:1;
		-webkit-transition:all 0.6s ease 0s;
		-moz-transition:all 0.6s ease 0s;
		-ms-transition:all 0.6s ease 0s;
		transition:all 0.6s ease 0s;
	}
	footer.in-view .container{
		opacity:1;
		-webkit-transition:all 3s ease -0.3s;
		-moz-transition:all 3s ease -0.3s;
		-ms-transition:all 3s ease -0.3s;
		transition:all 3s ease -0.3s;
	}
	
	.desktop #mainContent .pages-custom,
	.desktop #mainContent .caterory,
	.desktop #pageHead,
	.desktop #pageHead.in-view,
	.desktop #pageHead #homeServices,
	.desktop #pageHead #pageTitle,
	 .desktop #pageHead #pageTitle h2,
	 .desktop #pageHead #pageTitle h3,
	 .desktop #pageHead #pageTitle p,
	 .desktop #mainContent .pages-custom{
		
		-webkit-transition:all 0.3s ease 0s;
		-moz-transition:all 0.3s ease 0s;
		-ms-transition:all 0.3s ease 0s;
		transition:all 0.3s ease 0s;
	} 	

	
	#baseModule1 {
		padding:15px 15px 40px 15px;
	}
	#baseModule2 {
		padding:0 70px 40px 70px;
	}
	#texteContent {
		overflow:visble
	}
	#texteContent p > img,
	#texteContent p > iframe {
	    left: -140px;
	    max-width: none;
	    position: relative;
	    width: 800px;
	}
	#texteContent p > iframe {
	    height:450px;
	    border:1px solid black;
	}
		
	.autreService {
		width:30%;
	}	
    #tranche3 > img {
	    margin: -70px auto 30px;
	}
	.gris,
	p.gris,
	.desktop #texteContent p.gris,
	.desktop #texteContent p.gris.in-view{
		position:relative;
		left:-135px;
		background:#1a1a1a;
		padding:40px!important;
		color:white;
	}
	.desktop #texteContent p {
		opacity:0;
		padding-top:4.25em!important;
	}
	.desktop #texteContent p.in-view {
		padding-top:0em!important;
		opacity:1;
	}
	.desktop #texteContent p img{
		opacity:0;
	}
	.desktop #texteContent p:nth-child(2n) img{
		margin-left:-200px;
		transform:rotateY(5deg);
		-webkit-transform:rotateY(5deg);
	}
	.desktop #texteContent p:nth-child(2n+1) img{
		margin-left:200px;
		transform:rotateY(-5deg);
		-webkit-transform:rotateY(-5deg);
	}
	
	.desktop #texteContent p.in-view img{
		opacity:1;
		margin-left:0;
		transform:rotateY(0deg);
		-webkit-transform:rotateY(0deg);
	}	
	/*
	.desktop #texteContent p:nth-child(2n) {
		position:relative;
		left:70px;
	}
	.desktop #texteContent p:nth-child(2n+1) {
		position:relative;
		left:-70px;
	}  */

	
}              

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
	#baseModule1 .itemALaUne {
		float:left;
		width:50%;
		
	} 
	.desktop #texteContent {
		width:1200px;
		font-size:1.3em;
	}
	.desktop #texteContent > * {
		width:640px;
		margin-left:auto!important;
		margin-right:auto!important;
		margin-top:1.9em!important;
	}
	#texteContent p > img, 
	#texteContent p > iframe {
		width:800px;
		left:-80px;	
	}
}



@media (min-width:1600px) {
	#menu {
		position:fixed;
	}
	#logo, .brand,
	#burger {
		position:fixed;
	}
    #autresServices h3,
	#homeReals h3 {
		font-size:4.2em!important;
	}
	.tranche h3 {
		font-size:4.2em!important;
	}

	#tranche1 {
		padding:0px 65px 65px 125px;    
		margin-top:56px;  
	}   

	#tranche2 {
		padding:55px 65px 65px 125px;	
	}
	#demi2-1 {
	    padding-left: 50px;
	}
	#demi1-2 {
	    padding-right: 50px;
	}
	#demi1-1 {
	    padding-left: 170px;
	    padding-right: 80px;
	}
	#demi2-2 {
	    padding-right: 200px;
	}

	#demi2-1 img {
		top:-120px;
	}
	
	.item_header,
	#homeContent,
	#contentReal, 
	#baseContent, 
	#baseModule1,
	#baseModule3,
	#homeReals,
	#content,
	#autresServices,
	footer {
		-webkit-transition:all 0.6s;
		-moz-transition:all 0.6s;
		-ms-transition:all 0.6s;
		transition:all 0.6s;
		margin-left:auto;
		margin-right:auto;
		width:100%;
	} 
	#autresServices {
		width:700px;
	}
	#contentReal {
		width:1240px;
	}
	.pages-custom-nos-realisations #baseModule2 {
		width:66.66%;	
		margin-left:auto;
		margin-right:auto;
		-webkit-transition:all 0.6s;
		-moz-transition:all 0.6s;
		-ms-transition:all 0.6s;
		transition:all 0.6s;
	}
	
	.playing .item_header,
	.playing #contentReal,
	.playing #homeContent, 
	.playing #baseContent, 
	.playing #baseModule1, 
	.playing #baseModule2, 
	.playing #baseModule3,
	.playing #homeReals,
	.playing #content,
	.playing #autresServices, 
	.playing #clients,
	.playing #services-agence,
	.playing footer {
		margin-left:0;
		width:66.66%;
	} 
	
	
	
	.playing .demi {
		padding-left:20px!important;
		padding-right:20px!important;
	}
	#texteContent p > iframe {
	    left: -320px;
	    max-width: none;
	    position: relative;
	    width: 1160px;
	    height:652px;
	    border:1px solid black;
	}
	#clients .crop1600 {
		width:1600px;
	}
	
	
}

/* for higher resolutions (android and retina) */
@media screen and (-webkit-min-device-pixel-ratio: 1.5), screen and (max--moz-device-pixel-ratio: 1.5) {
  
}     


.img404 {
	background:url('../images/img404.jpg') no-repeat fixed center center;
	background-size:cover;
	-webkit-background-size:cover;
	min-height:100vh!important;
	padding:1px;
	
}

#c404 {
	font-size:1.3em!important;
	position:absolute;
	top:50%;
	left:50%;
	width:600px;
	transform:translate3D(-50%,-50%, 0);
	z-index:1;
	line-height:2.5em;  color:white;
}

.degrade {
	line-height:100vh;
	font-size:40vw;
	color:rgba(0,0,0,0.7);
	z-index:0;
	-webkit-filter:blur(45px);
	filter:blur(45px);
	-webkit-filter:blur(2.5vw);
	filter:blur(2.5vw);
}
@media(max-width:640px) {
#c404 {
	font-size:0.85em!important;
}	
}