/* ==========================================================================
   HTML5 Boilerplate styles - h5bp.com (generated via initializr.com)
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #1e1e1e;
	background: none;
}

body {
    font-size: 16px;
    line-height: 1.1;
	background-color: #fff;
	font-family: 'Raleway', helvetica, arial, sans-serif;
	font-weight: normal;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

hr {	
	width: 100%;
	float: left;
	color: #666;
	border-left: none;
	border-right: none;
	clear: both;
}

a {
	text-decoration: none;
	color: #000;	
}

img {
    vertical-align: middle;
}

textarea {
    resize: vertical;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* -------- Structure ---------- */

section {
	background-origin: padding-box;
	background-position: center center;
	background-size: cover;
	width: 100%;
	padding: 0 0 50px 0;
	}
	.gray {
		background-color: #f2f2f2;
	}
	.beige {
		background-color: #fafcf4;	
	}
	.wrapper {
		max-width: 1024px;
		margin: 0 auto;
		}
		
	.col1, .col2, .col3, .col4 {
		float: left;
		}
		.col1 {width: 96%; margin:0 2%;}
		.col2 {width: 46%; margin:0 2%;}
		.col3 {width: 29.3%; margin:0 2%;}
		.col4 {width: 21%; margin:0 2%;}


/* -------- Header ---------- */

header {
	margin-top: 35px;
    padding: 10px 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
	}
	header .wrapper {
		background: none repeat scroll 0 0 #FFFFFF;
		max-width: 1150px;
		padding: 10px 50px 10px 20px;
	}
	#logo img{
		height: 80px;
	}
	nav {
		float:right;
		
		}
		nav > ul {
			padding: 0;
			margin-top: 34px;
		}
		nav > ul > li {
			display: block;
			float: left;
			text-transform: uppercase;
			margin-left: 20px;
			padding-left: 20px;
			color : #98c330;
			}
			nav > ul > li > a {
				color:#98c330;
				text-decoration: none;
				font-weight: bold;
				font-size: 18px;
				}
				nav > ul > li > a:hover {
					color:#ccc;
				}
				nav > ul > li > a.active {
					color:#6ac3d9;
				}

		
/* -------- Page ---------- */

h1 {
	padding-top: 160px;
	text-align: center;
	color: #fff;
	font-weight: 900;
	font-size: 4em;
	margin-bottom: 20px;
	text-decoration: underline;
	text-transform: uppercase; 
	}
	
h2 {
	font-weight: bold;
	font-size: 22px;
	text-transform: uppercase;
	}
	
h3 {
	font-weight: bold;
	text-transform: uppercase;
	font-size: 16px;	
}
	
.arrowDown {
	display: block;
	width: 100px;
	padding: 60px 0;
	margin: 0 auto;
	}

.right {
	text-align: right;
}

.center {
	text-align: center;
}

.whithebox {
	padding: 16px;
	background-color: #FFF;
	color: #73C2DD;
	font-size: 20px;
	text-align: center;
	}
	
.whithebox2 {
	padding: 14px 20px;
	background-color: #FFF;
	color: #000;
	width: 240px;
	letter-spacing: 2px;
	margin: 10px 0;
	}
	.whithebox2 > p {
		color: #333;
		line-height: 18px;
		}
		.whithebox2 > p > a {
		color: #333;
		}

/* -------- Valeurs ---------- */

.historySlider {
	background-color: #a0d3e6;
	padding-bottom: 0;
	max-height: 800px;
	overflow: hidden;
	}
	.lt-ie8 .historySlider {
		max-height: none;
	}
	.historySlider .col1 h2 {
		color: #FFF;
		margin-top: 0;
	}
	.sliderWrapper {
		position: relative;
		}
		.sliderControls {
			position: absolute;
			bottom: 5%; left: 0;
			width: 100%;
			}
			ul.captions {
				list-style: none;
				color: #fff;
				margin-bottom: 100px;
				}
				.captions li {
					display: none;
					}
					.captions li:first-child {
						display: block;
					}
				
					.lt-ie8 .flex-control-nav li {
						padding-right: 2px;
						display: inline;
						zoom: 1;
					}
					flex-control-nav {
					    margin: 7px 0 0;
					    text-align: center;
					}
					.flex-control-nav li {
					    display: inline;
					    margin: 0 7px;
					}
					.flex-control-nav li a {
					    background: none repeat scroll 0 0 padding-box #b8afa7;
					    border-radius: 300px;
					    display: inline-block;
					    height: 0;
					    overflow: hidden;
					    padding-top: 20px;
					    text-align: center;
					    width: 20px;
					}
					.flex-control-nav li.flex-active a {
						background: none repeat scroll 0 0 padding-box #FFFFFF;	
					}
					.flex-control-nav li a:after {
					    border: 100px solid #FF0000;
					    border-radius: 20px;
					    content: "";
					    display: inline-block;
					    height: 0;
					    margin-top: 2px;
					    overflow: hidden;
					    padding-top: 4px;
					    width: 4px;
					}
					.flex-control-nav li a.flex-active, .flex-control-nav li:hover a {
					    background-color: #293F67;
					}
					
	.valeur p {
		text-transform: uppercase;
		font-size: 20px;
		font-weight: 900;	
	}
	
#accueil_texte {
	 position: absolute; 
	 top: 20%;	
}

#accueil_texte p {
	font-size: 1.5em;
	font-weight: bold;
	text-align: center;
	color: #fff;
}

/* -------- Présentation ---------- */

#presentation p {
	font-weight: 300;	
}

/* -------- Services ---------- */

#services ul {
	margin: 40px 0;	
}

#services ul li {
	font-weight: 900;
	text-transform: uppercase;
	color: #98c330;
	margin: 15px 0;
}
		
/*--------------------- Galerie -----------------*/

 .box {
	cursor: pointer;
	position: absolute;
	overflow: hidden;
}

/* Caption Common Style */
 .box .caption {
	background-color: rgba(152,195,48,0.7);
	position: absolute;
	margin: 20px;
	color: #fff;
	z-index: 100;
		-webkit-transition: all 300ms ease-out;
		-moz-transition: all 300ms ease-out;
		-o-transition: all 300ms ease-out;
		-ms-transition: all 300ms ease-out;	
		transition: all 300ms ease-out;
	left: 0;
	text-align: center;
	text-transform: uppercase;
	font-weight: bold;
	text-decoration: underline;
}

 .box .fade-caption {
	opacity: 0;
	padding: 15px;
}

/** Fade Caption :hover Behaviour **/
.box:hover .fade-caption {
	opacity: 1;
}

.gallery {
	padding-bottom: 0;
	overflow: hidden;
	}
	.lt-ie8 .gallery {
		padding-top: 115px;
	}
	.gallery a.gal_thumb {
		width: 25%;
		height: 25%;
		display: block;
		float: left;
		position: relative;
		background-color: #000;
		cursor: pointer;
		text-decoration: none;
		-webkit-transition: all .2s ease-out;
		-moz-transition: all .2s ease-out;
		-ms-transition: all .2s ease-out;
		-o-transition: all .2s ease-out;
		transition: all .2s ease-out;
		}
		.lt-ie8 .gallery a.gal_thumb {
			width: 24.95%;
			height: 24.95%;
		}
		.gallery .gal_thumb:hover {
			background-color: #FFF;
		}
		.gallery .gal_thumb > img {
			width: 100%;
			opacity: .4;
			filter: alpha(opacity=40);
			-webkit-transition: all .2s ease-out;
			-moz-transition: all .2s ease-out;
			-ms-transition: all .2s ease-out;
			-o-transition: all .2s ease-out;
			transition: all .2s ease-out;
		  }
		  .gallery .gal_thumb:hover > img {
			  opacity: 1;
			  margin: 10%;
			  width: 80%;
			 -webkit-border-radius: 300px;
					 border-radius: 300px;
		  	}
			.lt-ie9 .gallery .gal_thumb:hover > img {
				filter: alpha(opacity=100);
				margin: 0;
			  	width: 100%;
		  		}
		  
		  .gallery .gal_thumb > div.cover_text {
			  display: block;
			  width: 100%;
			  position: absolute;
			  bottom: 0;
			  left: 0;
			  text-align: right;
			  opacity: 0;
			  }
			  .gallery .gal_thumb > div.cover_text > img {
				  float: right;
				  padding: 10px;  
			  }
			  .gallery .gal_thumb > div.cover_text > h4 {
				  float: right;
				  padding: 24px 0;
				  text-decoration: none;
			  }
			  .gallery .gal_thumb:hover > div.cover_text {
				  opacity: 1;
			  }
		.gal_thumb > div.caption_text {
			display: none;
		}

#bigImage {
	overflow: hidden;
	width: 100%;
	position: absolute;
	z-index: 1;
	display: none;
	}

	#loadingCache {
		position:absolute;
		top:0; left:0;
		background-color:#000;
		width: 100%;
		height: 100%;
		text-align: center;
		}
		#loadingCache img {
			margin-top:300px;
	}
	#bigImage #caption {
		position: absolute;
		left: 0; top: 10%;
		width: 100%;
		}
		#bigImage #caption h3 {
			font-weight: normal;
			margin-bottom: 0;
		}

	#bigImage > img {
		width: 100%;
	}
	#bigImage .close {
		cursor: pointer;
	}
/* Contact */

.contactForm {
		margin-top: 50px;
	}
	.no-boxshadow .contactForm {
		border: 1px solid #e2e2e2;
	}
	.contactForm label {
		float:left;
		font-size: 16px;
		text-transform: uppercase;
		font-weight: bold;
		width: 15%;
		margin: 30px 0 15px 0;
	}
	#name, 
	#firstname, 
	#email,
	#entreprise,
	#regions,
	#clients,
	#concurrents,
	#objectifs {
		display:block;
		margin: 36px 0 15px 0;
		border: 0;
		line-height: 2em;
		padding: 0;
		width: 85%;
		float: left;
	}
	.contactForm hr {
		margin:0;
		border-top-color: #e2e2e2;
	}
	.contactForm textarea {
		border: none;
		width: 100%;
		height: 30px;
		resize: none;
		line-height: 1.5em;
	}
	.contactForm input.button {
		background: url('../img/btn_envoyer.png');
		width: 220px;
		height: 70px;
		border: none;
	}


/* --------- Footer ---------- */

footer {
	padding: 70px 0;	
}

	footer .address > * {
		float: right;	
	}
	
	footer .address img {
			
	}
	
	footer .address p {
			margin-right: 15px;
			line-height: 2em;
			font-weight: bold;
			font-size: 16px;
	}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (max-width: 1050px) {
	
	header { 
		padding-left: 2%;
		padding-right: 2%; 
		width: 96%;
	}

}

@media screen and (max-width: 800px) {
	
	/* -------- News---------- */	
	.news { padding: 20px;}
				
	img.circle {border-radius: 140px;}
	
	h1 {font-size: 70px;}
}

@media screen and (max-width: 650px) {
	
	#logo img {
		display: block;
		height: 30px;
		height: auto;
		width: 50%;
	}
	nav {
		float: none;
		}
		nav > ul {
			display: table;
			margin-bottom: 0;
    		width: 100%;
		}
		nav > ul > li {
			display: table-cell;
			vertical-align: middle;
			float: none;
			font-size: 14px;
			width: 25%;
			padding: 0;
			margin: 0;
			text-align: center;
		}
}


@media screen and (max-width: 360px) {
	
	/* -------- News---------- */	
	.news { padding: 6px;} 
	.news > h4 { visibility: hidden;}  
	.news > h6 {display: none; height: 0;}
				
	img.plus { float: none; display: block; padding: 20%; width: 60%;}
	
	
	h1 {
		font-size: 50px;
		padding-top: 100px;
		}
	
	h2 {font-size: 22px;}
	
	h4 {line-height: 18px;}
	
	.arrowDown {
		padding: 30px 0 0;
		width: 50px;
		}
		.arrowDown img {
			width: 100%;
		}
	
	.col4 {
		width: 46%;
	}
	
	section.info_bottom > div.wrapper > div.withebox2 {width: 94%; margin: 0; padding: 0 2%; position: absolute; bottom: 0; left: 0;}
	
}


@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .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; /* h5bp.com/t */
    }

    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;
    }
}