/* 
* Skeleton V1.0.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 5/20/2011
*/


/* Table of Content
==================================================
	#Reset & Basics
	#Basic Styles
	#Site Styles
	#Typography
	#Links
	#Lists
	#Images
	#Buttons
	#Tabs
	#Forms
	#Misc */


/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4,  h6, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline; }
	html, body{
	background-color: #292929;
	}
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }
	blockquote, q {
		quotes: none; }
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none; }
	table {
		border-collapse: collapse;
		border-spacing: 0; }
		
		
/* #Basic Styles
================================================== */
	body { 
		font: 16px/21px 'Open Sans', Arial, sans-serif;
		color: #e4e4e4; 
		-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
		-webkit-text-size-adjust: none;
 }
	
.container{
		background: #545454;
}
/* #Typography
================================================== */
	h1, h2, h3, h4, h6 { 
		color: #eeeeee; 
		font-family:  Helvetica, Arial, sans-serif;
		font-weight: normal; }
	h1 a, h2 a, h3 a, h4 a, h6 a { font-weight: inherit; }
	h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
	h2 { font-size: 35px; line-height: 40px; margin-bottom: 10px; }
	h3 { font-size: 28px; line-height: 34px; margin-bottom: 8px; }
	h4 { font-size: 21px; line-height: 30px; margin-bottom: 4px; }
.titre_1{
		padding-left: 144px;
	}
.titre_2{
		padding-left: 142px;
	}
	h5 { font-size: 20px;
	padding: 10px 0 20px 0;
	margin: 0;
	  }
	h6 { font-size: 14px; line-height: 21px; }
	.subheader { color: #777; }

	p { margin: 0 0 20px; }
	p img { margin: 0; }
	p.lead { font-size: 21px; line-height: 27px; color: #777;  }
	
	em { font-style: italic; }
	strong { font-weight: bold; color: #333; }
	small { font-size: 80%; }
	
/*	Blockquotes  */
	blockquote, blockquote p { font-size: 17px; line-height: 24px; color: #777; font-style: italic; }
	blockquote { margin: 0 0 20px; padding: 9px 20px 0 19px; border-left: 1px solid #ddd; }
	blockquote cite { display: block; font-size: 12px; color: #555; }
	blockquote cite:before { content: "\2014 \0020"; }
	blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; }
	
	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }

/* #Links
================================================== */
	a, a:visited {  text-decoration: none; outline: 0; }
	a:hover, a:focus { color: #b4b4b4; }
	p a, p a:visited { line-height: inherit; }
	

/* #Lists
================================================== */
/*
	ul, ol { margin-bottom: 20px; }
	ul { list-style: none outside; }
	ol { list-style: decimal; }
	ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
	ul.square { list-style: square outside; }
	ul.circle { list-style: circle outside; }
	ul.disc { list-style: disc outside; }
	ul ul, ul ol,
	ol ol, ol ul { margin: 4px 0 5px 30px; font-size: 90%;  }
	ul ul li, ul ol li,
	ol ol li, ol ul li { margin-bottom: 6px; }
	li { line-height: 18px; margin-bottom: 12px; }
	ul.large li { line-height: 21px; }
	li p { line-height: 21px; }
	
/* #Images
================================================== */
/*
	The purpose of the below declaration is to make sure images don't 
	exceed the width of columns they are put into when resizing window. 
	Unfortunately, this declaration breaks certain lightbox, slider or other plugins,
	so the best solution is to individually call these properties on images that 
	are children of the grid that you want to resize with grid. 

	img { 
		max-width: 100%;
		height: auto; }
		
*/


/* #Buttons
================================================== */
	
	a.button, 
	button,
	input[type="submit"],
	input[type="reset"],
	input[type="button"] {
		background: #eee; /* Old browsers */
		background: -moz-linear-gradient(top, rgba(255,255,255,.2) 0%, rgba(0,0,0,.2) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.2)), color-stop(100%,rgba(0,0,0,.2))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* IE10+ */
		background: linear-gradient(top, rgba(255,255,255,.2) 0%,rgba(0,0,0,.2) 100%); /* W3C */
	  border: 1px solid #aaa;
	  border-top: 1px solid #ccc;
	  border-left: 1px solid #ccc;
	  padding: 4px 12px;
	  -moz-border-radius: 3px;
	  -webkit-border-radius: 3px;
	  border-radius: 3px;
	  color: #444;
	  display: inline-block;
	  font-size: 11px;
	  font-weight: bold;
	  text-decoration: none;
	  text-shadow: 0 1px rgba(255, 255, 255, .75);
	  cursor: pointer;
	  margin-bottom: 20px;
	  line-height: 21px;
	  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
	  
	a.button:hover, 
	button:hover,
	input[type="submit"]:hover,
	input[type="reset"]:hover,
	input[type="button"]:hover {
		color: #222;
		background: #eee; /* Old browsers */
		background: -moz-linear-gradient(top, rgba(255,255,255,.3) 0%, rgba(0,0,0,.3) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.3)), color-stop(100%,rgba(0,0,0,.3))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* Opera11.10+ */
		background: -ms-linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* IE10+ */
		background: linear-gradient(top, rgba(255,255,255,.3) 0%,rgba(0,0,0,.3) 100%); /* W3C */
	  border: 1px solid #888;
	  border-top: 1px solid #aaa;
	  border-left: 1px solid #aaa; }
	  
  a.button:active, 
  button:active,
	input[type="submit"]:active,
	input[type="reset"]:active,
	input[type="button"]:active {
    background: #eee; /* Old browsers */
    background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,.3) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,.3))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,.3) 100%); /* W3C */
    border: 1px solid #888;
    border-bottom: 1px solid #aaa;
    border-right: 1px solid #aaa; }
	
	.button.full-width, 
	button.full-width,
	input[type="submit"].full-width,
	input[type="reset"].full-width,
	input[type="button"].full-width { 
		width: 100%;
		padding-left: 0 !important;
		padding-right: 0 !important;
		text-align: center; }
	
	
/* #Tabs (activate in app.js)
================================================== */
	ul.tabs { 
		display: block;
		margin: 0 0 20px 0;
		padding: 0;
		border-bottom: solid 1px #ddd; }
	ul.tabs li { 
		display: block;
		width: auto;
		height: 30px;
		padding: 0;
		float: left;
		margin-bottom: 0; }
	ul.tabs li a { 
		display: block; 
		text-decoration: none;
		width: auto; 
		height: 29px; 
		padding: 0px 20px; 
		line-height: 30px; 
		border: solid 1px #ddd;
		border-width: 1px 0 0 1px; 
		margin: 0;  
		background: #f5f5f5;
		font-size: 13px; }
	ul.tabs li a.active { 
		background: #fff; 
		height: 30px;
		position: relative;
		top: -4px;
		padding-top: 4px;
		border-right-width: 1px;
		margin: 0 -1px 0 0;
		color: #111;
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	ul.tabs li:first-child a {
		-moz-border-radius-topleft: 2px;
		-webkit-border-top-left-radius: 2px;
		border-top-left-radius: 2px; }
	ul.tabs li:last-child a {
		border-width: 1px 1px 0 1px;
		-moz-border-radius-topright: 2px;
		-webkit-border-top-right-radius: 2px;
		border-top-right-radius: 2px; }
	
	ul.tabs-content { margin: 0; display: block; }
	ul.tabs-content > li { display:none; }
	ul.tabs-content > li.active { display: block; }
		
	/* Clearfixing tabs for beautiful stacking */
	ul.tabs:before,
	ul.tabs:after {
	  content: '\0020';
	  display: block;
	  overflow: hidden;
	  visibility: hidden;
	  width: 0;
	  height: 0; }
	ul.tabs:after {
	  clear: both; }
	ul.tabs {
	  zoom: 1; }
			
			
/* #Forms
================================================== */

	form { 
		margin-bottom: 20px; }
	fieldset { 
		margin-bottom: 20px; }
	input[type="text"], 
	input[type="password"],
	input[type="email"],
	textarea, 
	select {
		border: 1px solid #ccc;
		padding: 6px 4px;
		outline: none;
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		font: 13px "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
		color: #777;
		margin: 0;
		width: 210px;
		max-width: 100%;
		display: block;
		margin-bottom: 20px;
		background: #fff; }
	select { 
		padding: 0; }
	input[type="text"]:focus,
	input[type="password"]:focus,
	input[type="email"]:focus, 
	textarea:focus {
		border: 1px solid #aaa;
 		color: #444;
 		-moz-box-shadow: 0 0 3px rgba(0,0,0,.2);
		-webkit-box-shadow: 0 0 3px rgba(0,0,0,.2);
		box-shadow:  0 0 3px rgba(0,0,0,.2); }
	textarea {
		min-height: 80px;
		padding-left: 0px;}
	label,
	legend { 
		display: block;
		font-weight: bold;
		font-size: 13px;  }
	select { 
		width: 220px; }
	input[type="checkbox"] {
		display: inline; }
	label span,
	legend span {
		font-weight: normal;
		font-size: 13px;
		color: #444; }
		
/* #Misc
================================================== */
#drapeau{
	position: relative;
	top: -90px;
	left: 896px;
}
.infobulle3{
color: #161616;
text-align: center;
	cursor: pointer;
	width: 60px;
	height: 20px;
	padding: 3px 10px;
	position: absolute;
   top: 40px;
   right: 20px;
   opacity: 0;
	background-color: #eaeaea;
	color: #3c3c3c;
	border: solid 1px black;
}

	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 10px !important; }
	.add-bottom { margin-bottom: 20px !important; }

	#menu{
		border-bottom: 1px solid grey;
	}
div#navigation{
		background: #545454;
	border-radius: 4px;
text-align: center;
}
#navigation ul {
list-style:none;
padding:0 ;
margin:0px;
display:inline-block; }
#navigation li { 
list-style:none; padding:0; margin:0; display:inline; }
#navigation ul li{ float:left; position:relative; }
#navigation ul li a{ 
color: #dcdcdc;
	display:inline-block; 
	padding:8px 12px; 
	margin:1px; 
	font-size:18px; 
	white-space:nowrap; 
	border-radius:3px; 
}
#navigation ul li a:hover{ 
color: white;
}
#navigation ul li a span{ 
color: white;
}
#navigation ul ul{ 
	position:absolute; 
	top:-99999px; 
	left:0px;
	opacity: 0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	z-index:497; 
	background:#333; 
	padding: 2px; 
	border:1px solid #444; 
	border-top:none; 
	box-shadow:#111 0 3px 4px; 
	border-bottom-left-radius:6px; 
	border-bottom-right-radius:6px; 
}
#navigation ul ol{ 
	position:absolute; 
	top:-99999px; 
	left:0px;
	opacity: 0;
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	z-index:497; 
	background:#333; 
	padding: 2px; 
	border:1px solid #444; 
	border-top:none; 
	box-shadow:#111 0 3px 4px; 
	border-bottom-left-radius:6px; 
	border-bottom-right-radius:6px; 
}
#navigation ul ol ul { 
	position:absolute; 
	top:-99999px; 
	left:100%; 
	opacity: 0; 
	-webkit-transition: opacity .5s ease-in-out;
	-moz-transition: opacity .5s ease-in-out;
	-o-transition: opacity .5s ease-in-out;
	border-radius:6px;
	border:1px solid #444;
}
#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul li:hover>ol{ opacity: 1; position:absolute; top:99%; left:0; }
#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#333; }
#navigation ul li ol li:hover ul{ position:absolute; top:200%; left:0%; opacity: 1; z-index:497; background:#333
}
#navigation ul li ol li:nth-child(2):hover ul{ position:absolute; top:100%; left:0%; opacity: 1; z-index:497; background:#333
}
#navigation ul ul li:nth-child(2):hover>ul{ position:absolute; top:100%; left:0%; opacity: 1; z-index:497; background:#333; }
 #slider {
    width: 1024px; /* important to be same as image width */
    height: 375px; /* important to be same as image height */
    position: relative; /* important */
	overflow: hidden; /* important */
}
#sliderContent {
    width: 1024px; /* important to be same as image width or wider */
    height: 375px;
    position: absolute;
	top: 0;
	margin-left: 0;
}
.sliderImage {
    float: left;
    position: relative;
	display: none;
}
.sliderImage span {
    position: absolute;
	font: 10px/15px Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 1024px;
    background-color: #000;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
	-khtml-opacity: 0.7;
    opacity: 0.7;
    color: #fff;
    display: none;
}
.clear {
	clear: both;
}
.sliderImage span strong {
    font-size: 14px;
}
.top {
	top: 0;
	left: 0;
}
.bottom {
	bottom: 0;
    left: 0;
}
ul { list-style-type: none;}
 
#intro_services{
padding-top: 20px;
text-align: center;
}
#intro_services ul{
	font-size: 14px;
	font-weight: bold;
	display: table;
	margin-top: 80px;
	margin-left: 90px;
	opacity: 0;
		-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
	-o-transition: all 0.4s ease-in-out;
	-ms-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
	
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}
#intro_services ul li{
vertical-align: top;
display: inline-block;
padding-left: 0px;
	width: 200px;
}
#intro_services ul li:last-of-type{
padding-left: 130px;
}


.view-tenth img {
   -webkit-transform: scaleY(1);
   -moz-transform: scaleY(1);
   -o-transform: scaleY(1);
   -ms-transform: scaleY(1);
   transform: scaleY(1);
   -webkit-transition: all 0.7s ease-in-out;
   -moz-transition: all 0.7s ease-in-out;
   -o-transition: all 0.7s ease-in-out;
   -ms-transition: all 0.7s ease-in-out;
   transition: all 0.7s ease-in-out;
}

.mask{
	width: 440px;
	float: right;
	margin: 0;
	padding: 0px 20px 0 0;
}
.view-tenth p {
   color: #333;
}

.view {
   width: 420px;
   height: 260px;
   margin: 0px 0px 20px 26px;
   float: left;
   border: 1px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
}

zview h5 {
   text-transform: uppercase;
	color: #abd546;
   text-align: center;
   position: relative;
   font-size: 17px;
   padding: 10px;
   background: rgba(0, 30, 30, 0.5);
   margin: 0px 0 0 0;
}
.view p {
float: right;
   font-style: italic;
   font-size: 14px;
   aposition: relative;
   color: #eeeeee;
   padding: 0px 20px 0px;
   text-align: center;
}
.view a.info {
   font-size: 12px;
   display: inline-block;
   text-decoration: none;
   padding: 5px 14px;
   background: #535353;
   color: #fff;
   text-transform: uppercase;
   -webkit-box-shadow: 0 0 1px #000;
   -moz-box-shadow: 0 0 1px #000;
   box-shadow: 0 0 1px #000;
}

.sixteen.columns .view:nth-last-child(odd){
margin: 0 0 20px 40px;
}
#compo {
padding-top: 50px;
	width: auto;
	height: 450px;
	position: relative;
	color: black;
	font-size: 14px;
}
.module_index {
background-color: #363636;
	border: 1px white;
	padding: 20px;
	width: 880px;
	float: left;
	display: inline;
	margin: 0 0 10px 20px;
	border-radius: 5px;
}
.module_index img{
padding: 0;
margin: 0;
	width: 380px;
	height: 220px;
}
.module_index p{
padding: 0;
margin: 0;
}
.module_index a{
	color: rgb(228, 228, 228);
}
.module_index a:hover{
	color: white;
}
.box_infos	{
font-size: 90%;
			position:absolute;
			top:20%;
			left:30%;
			width:380px;
			height:340px;
			background-color: rgba(255,255,255,0.8);
			z-index:51;
			padding:10px;
			-moz-box-shadow:0px 0px 5px #333333;
			-webkit-box-shadow: 0px 0px 5px #333333;
			box-shadow:0px 0px 5px #333333;
			display:none;
		}
.box_video1	{
			position:absolute;
			top:20%;
			left:30%;
			width:640px;
			height:360px;
			background-color: rgba(255,255,255,0.8);
			z-index:51;
			-moz-box-shadow:0px 0px 5px #333333;
			-webkit-box-shadow: 0px 0px 5px #333333;
			box-shadow:0px 0px 5px #333333;
			display:none;
		}
		.box_video2	{
			position:absolute;
			top:20%;
			left:30%;
			width:640px;
			height:360px;
			background-color: rgba(255,255,255,0.8);
			z-index:51;
			-moz-box-shadow:0px 0px 5px #333333;
			-webkit-box-shadow: 0px 0px 5px #333333;
			box-shadow:0px 0px 5px #333333;
			display:none;
		}
		.box_video3	{
			position:absolute;
			top:20%;
			left:30%;
			width:640px;
			height:360px;
			background-color: rgba(255,255,255,0.8);
			z-index:51;
			-moz-box-shadow:0px 0px 5px #333333;
			-webkit-box-shadow: 0px 0px 5px #333333;
			box-shadow:0px 0px 5px #333333;
			display:none;
		}
.close{
		color: #383838;
			float:right;
			cursor:pointer;
			font-size: 1.2em;
			padding: 0 20px 0 0;
		}
#txt_infos{
		padding: 50px 0 0 30px;
		width: 300px;
		text-align: left;
		color: #383838;
 		font-size: 100%;
 		afloat: right;
 		}
.box_contact	{
			position:absolute;
			top:20%;
			left:30%;
			width:600px;
			height:580px;
			background-color: rgba(255,255,255,0.8);
			z-index:51;
			padding:10px;
			-moz-box-shadow:0px 0px 5px #333333;
			-webkit-box-shadow: 0px 0px 5px #333333;
			box-shadow:0px 0px 5px #333333;
			display:none;
		}
.box_produits	{
			color: #292929;
			padding-top: 20px;
			position:absolute;
			top:20%;
			left:30%;
			width:240px;
			height:210px;
			background-color: rgba(255,255,255,0.5);
			z-index:51;
			text-align: center;
			font-size: 2em;
			-moz-box-shadow:0px 0px 5px #333333;
			-webkit-box-shadow: 0px 0px 5px #333333;
			box-shadow:0px 0px 5px #333333;
			display:none;
		}
.box_produits p:first-of-type{
	padding-top: 60px;
		}
.box_produits a:link,.box_produits a:visited{
			color: #292929;
		}
.box_produits a:hover{
			color: #8fb629;
		}
#content_contact{
	padding: 20px 0 0 30px;
	color: #545454;
}
#formulaire{
			width: 420px;
			padding: 10px 0 0 60px;
		}
fieldset.champs {
	background-color: #8fb629;
	padding:30px 30px 30px 0;
	width:100%;
}
input, textarea, select {
	border: thin;
	border-color: black;
	border-style: inset;
	padding: 0;
	width: 250px;
	margin-left: 4px;
	}
#submit {
color: #f5f5f5;
margin-top: 30px;
margin-left: 45%;
border: none;
	cursor: pointer;
	width: 80px;
	height: 34px;
	border:1px solid #2e0031;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
	background-color: #57b0fd;
	}
label {
	color: #222222;
}
label.opt {
	font-weight:normal;
}
dt {
	float:left;
	text-align:right;
	width:140px;
	line-height:25px;
	margin:0 10px 10px 0;
}
dd {
	float:left;
	width:240px;
	line-height:25px;
	margin:0 0 10px 0;
}