@charset "UTF-8";
/* CSS Document */
body{
		margin:0px;
		padding:0px;
		font-size: 100%;
    font-family: "Ubuntu", sans-serif;
    color: #3e3947;}


section{ float: left;
					width: 100%;}

	.retour{
		clear: both;
	}



	#menu{
		float: right;}



	#cssmenu > ul > li > a {
	  padding:20px 10px 0 !important;
	}

	hr {
		width: 90%;
	}


	h1{
		font-size: 44px;
		color: #FFFFFF;
		font-family: "Ubuntu", sans-serif !important;
		font-weight: 400;
		text-shadow: 1px 2px 2px rgba(0,0,0, 0.8);
	}



		h2{
			font-family: 'Merriweather', serif;
			color: #324C97;
			font-size: 45px;
			font-weight: bold;
		}

		h3{
			text-align: center;
			font-weight: 300;
			color: #FFFFFF;
			font-size: 30px;
			font-family: 'Merriweather', serif;
			line-height: 30px;
			font-weight:400;
		}

		h4{
			text-align: center;
			font-weight: 300;
			font-size: 30px;
			font-style : italic;


		}



		h5{
			color:#FFFFFF;
		  font-family:Ubuntu, sans-serif;
		  font-size:20px;
		  font-weight:300;
		  line-height:30px;
		  margin-bottom:20px;
		  text-align:center !important;
			margin-top: -20px;
}


		h6{

			font-family: 'Merriweather', serif;
			color: #324C97;
			text-align: center;
			font-size: 25px;
			line-height: 30px;
			margin-bottom: 20px;

		}

		p{
				text-align: justify;
				font-family: "Ubuntu", sans-serif !important;
				line-height: 28px!important;
				font-size: 18px;

			}

	li{
		float: left;
		list-style-image: none;
		list-style-type: none;
		font-family: 'Lato', sans-serif;
		font-size:16px;
		padding-right:20px;
		font-weight: bold;
		margin-top: 0px;
	}


	a{ color: #378BAE;
		text-decoration:none;}


	#entete{
		position: absolute;
		z-index: 40;
		height: 50px;
		top: 0px;
		font-size: 12px;
		border-top: 1px solid #3a3a3a;
		color: #777;
		background-image:none;
		position: fixed;
		width: 100%;
		background-color: #FFF;
		margin: auto;
		box-shadow: #444 2px 2px 3px;
		margin-top:-1px;
	}


	#fond-route{
		background:url("images/paysage-route.jpg") no-repeat center fixed;
		box-shadow: #444 2px 2px 3px;
		-webkit-background-size: cover; /* pour anciens Chrome et Safari */
		background-size: cover; /* version standardisée */
		margin:0;
		 padding:0;
		}



		#genin-logistique-entete{
 			height: auto;
			max-width: 40%;
			min-width: 280px;
			z-index: 200;
			float: left;
			position: fixed;

		}

	#genin-titre{
		padding-top: 20%;
		width: 100%;
		text-align: center;
		padding-bottom: 20%;

	}

		#block{
			width:100%;
			float: left;}

		#scroll{
			background-image: url(images/scroll.png);
			width: 151px;
			background-repeat: no-repeat;
			height:99px;
			margin: auto;}


		#page-acccueil{
			width: 80%;
			float: left;
			margin-left: 10%;
			margin-right: 10%;
			margin-top: 10%;
			margin-bottom: 10%;
		}


			#camion{
				width: 100%;
				float:left;
				width:50%;
				margin-top: 110px;
				max-width: 500px;
			}



			#texte-camion{
				width: 48%;
				height:auto;
				float: left;
				margin-left:2%;
			}


			#partenaire{
				width: 100%;
				float: left;
				margin-top:-20px;
			}


			tr{
				height: 100px;
			}

			td{
				padding-right: 10px;
				padding-left: 10px;
			}


			table{
				width: 80%;
				margin-top: -15px !important ;
				margin: auto;;
			}


			#partenaire img{
				width: 100%;

			}
			#contenu-section{
				width: 100%;
				margin: auto;
			}

			#service{
				width: 32%;
				height: 680px;
				background:#294775;
				float: left;
				margin-top: 1%;
				margin-right: 1%;
				position: relative;
			}


			#contenu-icone{
				width: 50%;
				margin: auto;
				margin-top: 20px;
			}

			#redimmentonner{
				width: 100%;
			}


			#texte-service{
				width: 90%;
				margin: auto;
			}


			#organisation{
				width: 32%;
				height: 680px;
				background:#1F3763;
				float: left;
				margin-left: 1%;
				margin-top: 1%;
				margin-right: 1%;
				position: relative;
			}

			#contenu-section h3{
				text-align: center;
			}

			#contenu-section p{
				text-align: center;
				color: #FFFFFF;
			}

			#texte-organisation{
				width: 90%;
				margin: auto;
			}


			#notre-force{
				width: 32%;
				height: 680px;
				background:#1E76B6;
				border-radius:3px;
				float: left;
				margin-top: 1%;
				margin-right: 1%;
				position: relative;

			}



			#texte-notre-force{
				width: 90%;
				margin: auto;
			}

			#en-savoir-plus{
				border:1px solid #ffffff;
				width:  50%;
				height: auto;
				padding: 15px;
				text-align: center;
				background-color: rgba(0, 0, 0, 0);
				transition:all 0.5s ease-in-out 0s;
				margin: auto;
				margin-left: 15%;
				bottom:0;
				position: absolute;
				margin-bottom: 30px;
			}


			#en-savoir-plus:hover{
				background-color: rgba(0, 0, 7, 0.4);
			}

			#en-savoir-plus a{
				font-size: 14px;
				color: #ffffff;
			}


			#contenu-section p{
				text-align: center;
				font-size: 18px;
				line-height: 30px;
			}

			#contenu-section h1{
				text-align: center;
				font-size: 30px;
			}

			#portfolio{
				width: 70%;
				margin-left: 15% !important;
				margin-right: 15% !important;
				margin: auto;
				float: left;
				margin-bottom: 5% !important;
				margin-top: 5%;

			}


			.view {
			  border:5px solid #FFFFFF;
				height: auto !important;
			  margin:0px !important;
			  width:47% !important;
			}

			.view .mask, .view .content {
			  width:100% !important;
				height:100% !important;
			}


			#portfolio img{
				width: 100%;

			}

			#a{
				float: left !important;
				margin-top: 3% !important;
			}

			#b{
				float: right !important;
				margin-top: 3% !important;

			}


			#page-logistique {
				background:url("images/logistique.jpg") 50% 50% / cover no-repeat fixed;
				float:right;
				height:auto;
				width:100%;
			}

			#contenu-logistique {
				width: 80%;
				margin: auto;
			}



		#texte-logistique {
				background-color:rgba(255, 255, 255, 0.6);
				box-shadow:#555555 1px 1px 12px;
				float:left;
				margin-bottom:50px;
				padding:1%;
				width:45%;
				margin-right: 3%;
				margin-top: 50px;
				height: 500px;
				}


				#texte-logistique-d{
						background-color:rgba(255, 255, 255, 0.6);
						box-shadow:#555555 1px 1px 12px;
						float:left;
						height: 500px;
						margin-bottom:50px;
						padding:1%;
						width:45%;
						margin-left: 3%;
						margin-top: 50px;
						margin-bottom: 50px;
						}


						#texte-logistique-d p#center {
							text-align: center;
								}



			#texte-logistique h1{
				text-align: center;
			}

			#contenu-formualaire{
					width:70%;
					margin: auto;
					margin-top: 70px;
			}


			#page-contact{
				height: auto;
				box-shadow: #666 2px 5px 10px;
				-moz-box-shadow: 1px 1px 1px #444;
				-webkit-box-shadow: 2px 5px 10px #444;
				background-color: #333;
				float:left;
				width:100%;}



			#contact-gauche{
				width:48%;
				float:left;
				margin-right: 2%;
				margin-top:30px;
				margin-bottom:100px;
			}
			#contact-droit{
				width:48%;
				margin-left: 2%;
				margin-bottom:100px;
				margin-top:10px;
				float:right;

			}


			input {
			  width:87%;
			}

			label{
				display: block;
				width: 28%;
				float: left;
				color: #FFF;
				font-size: 1em;
				text-align: left;
				height: 20px;
				font-family: arial, serif;
				text-shadow: 1px 1px 1px  #666666;
				margin-top: 10px;

			}

			#contact-droit label{
				width: auto;
			}


			input{
				width: 75%;
				font-size:0.9em;
				height: 44px;
				padding-left: 20px;
				margin-left:50px;
					}



			#envoyer{
				height: 80px;
				width: 100%;
				font-size: 0.9em;
				font-family: arial, serif;
				border:none;
				color: #FFF;
				background-color: #294775;
				font-weight: bold;
				margin-top:22px;
				margin-left: 0px;
				transition:all 0.5s ease-in-out 0s;
				text-align: center;
				padding: 0px;
			}

			#envoyer:hover{
				box-shadow: -1px 2px 10px 3px rgba(0, 0, 0, 0.3) inset;
			}


			textarea{
						width:93%;
					  height:122px;
					  margin-top:40px;
						font-size:0.9em;
						margin-left: 0px;
						padding-left:20px;
						padding-top: 20px;
						font-family: "Ubuntu", sans-serif;

}

			#maps-genin{
				width: 100%;
				float: left;
				margin: 0px;
				background-color:#FFFFFF;
				margin-bottom: 40px;
			}

			#maps-vrigne{
				width: 100%;
				float: left;
				margin: 0px;
				background-color:#FFFFFF;
				margin-bottom: 40px;

			}


			#icone-nom{
				height: 50px;
				width: 59px;
				float: left;
				position: absolute;
				background-image:url("images/icone-nom.png");
				background-repeat: no-repeat;
			}



						#icone-telephone{
							height: 50px;
							width: 59px;
							float: left;
							position: absolute;
							background-image:url("images/icone-telephone.png");
							background-repeat: no-repeat;
						}

						#icone-societe{
							height: 50px;
							width: 59px;
							float: left;
							position: absolute;
							background-image:url("images/icone-societe.png");
							background-repeat: no-repeat;
						}



						#icone-email{
							height: 50px;
							width: 59px;
							float: left;
							position: absolute;
							background-image:url("images/icone-email.png");
							background-repeat: no-repeat;
						}

			#contactez-nous{
				width: 100px;
				height: 50px;

			}

			footer{ height:auto;
			  	float: left;
				  height: auto;
					background-color:#333333;
					text-align: center;
					padding-bottom: 1%;
					width:100%;}

				footer hr{
					width: 20%;
				}



			#contenu-footer-gauche{
				width: 49.9%;
				float: left;
				border-right: white solid 1px;
				border-bottom: white solid 1px;
				padding-bottom: 30px;



			}

			#contenu-footer-droit{
				width: 49.9%;
				float: left;
				border-bottom: white solid 1px;
				padding-bottom: 30px;

			}

			#contenu-footer{
				margin-bottom: 50px;
				float: left;
				width: 100%;
			}


				#copyright{
					bottom: 0;
					margin-top: 50px;
					text-align: left;
					padding-left: 30px;
					font-size: 13px;

				}

					footer p{
						color: #fff;
						text-align: center;
					line-height: 10px;}

					footer a{
					color: #BCBCBC;
					text-shadow: 1px 1px 3px rgba(0,0,0, 0.5);

					}

					footer a:hover{
					color: #fff;}


				footer #en-savoir-plus{
					width: 35%;
				margin-top: 10px;
				margin-bottom: 40px;}

					footer #en-savoir-plus a{
						font-size: 27px !important;}



						#telephone-footer{
							border:1px solid #ffffff;
							width:  50%;
							height: auto;
							padding: 15px;
							text-align: center;
							background-color: rgba(0, 0, 0, 0);
							transition:all 0.5s ease-in-out 0s;
							margin: auto;
							margin-left: 25%;
							bottom:0;
						}


						#telephone-footer:hover{
							background-color: rgba(0, 0, 7, 0.4);
						}

						#telephone-footer a{
							font-size: 14px;
							color: #ffffff;
						}



						#Votre-message{
							padding-top: 10%;
							padding-bottom: 20%;
						}



						#container-mentions-legales{
							width: 80%;
							margin-left: 10%;
							margin-right: 10%;
							margin-top: 150px;
							float: left;
							margin-bottom: 50px;
						}

						#mentions-gauche{
							width:48%;
							margin-right:2%;
							float:left;}


							#mentions-droit{
								width:48%;
								margin-left:2%;
								margin-top: 94px;
								float:left;}


						section:nth-child(even){} /*on différencie la couleur 1 section sur 2*/
						/*== H nav ==*/

						#op-horizontalnav .op-v-item .op-v-link:hover, #op-horizontalnav .op-v-link.active {background-color:#fff;color:#171717}
						/*== V nav ==*/


						@media screen and (min-width: 1300px)
						{

						#texte-logistique {
							height: 450px;

								}

								#texte-logistique-d{
									height: 450px;

										}
										#organisation {
											  height:750px;
											}

											#service {
													height:750px;
												}

												#notre-force {
														height:750px;
													}

													textarea {
												  width:95%;
												}



									}