@import url(font-awesome.min.css);
@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,800,800italic");
@import url(http://weloveiconfonts.com/api/?family=zocial);

#page-wrapper{
		
		Padding-left:70px;
		padding-right: 70px;
	}





/**************************************************************************défaut ****************************************************************************/

	html, body, div, span, object, h1, h2, h3, p, a, address, em, img, q, s, strong, var, b, u, i, center, ol, ul, li, fieldset, form, label,table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figure, figcaption, footer, header, menu, nav, section {
		margin: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		
	}

	body {
		-webkit-text-size-adjust: none;
	}

/************************************************************************ Box Model ***************************************************************************/

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

/* **************************************************************************Grille ***************************************************************************/

	.row {
		border-bottom: solid 1px transparent;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row > * {
		float: left;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.row:after, .row:before {
		content: '';
		display: block;
		clear: both;
		height: 0;
	}


	.\31 2u, .\31 2u\24 {
		width: 100%;
		clear: none;  /* objet,ima*/
		margin-left: 0;
	}

	.\31 0u, .\31 0u\24 {
		width: 83.3333333333%;  /* adresse*/
		clear: none;
		margin-left: 0;
	}

	

	.\36 u, .\36 u\24 { 
		width: 50%;
		clear: none; /*importnattttttttt*/
		margin-left: 0;
	}


	
/* ************************************************************************************Base********************************************************************/

	@-ms-viewport {
		width: device-width;
	}

	body {
		background: #f7f8fa;
		
	}

		body.is-loading *, body.is-loading *:before, body.is-loading *:after {
		
			animation: none !important;
			transition: none !important;  /* chargement avec animation */
		}

	body, select{
		color: #fff;
		font-family: "Open Sans", Helvetica, sans-serif;
		font-weight: 500;
		line-height: 1.65em;
	}
	input, textarea{
		color:#111;
	}
	

	

		@media screen and (max-width: 1680px) {

			body, input, select, textarea {
				font-size: 13pt;
			}
			#page-bloc{
		
		Padding-left:1px;
		padding-right: 1px;
	}

		}

		@media screen and (max-width: 1280px) {

			body, input, select, textarea {
				font-size: 12pt;
			}
			#page-bloc{
		
		Padding-left:1px;
		padding-right: 1px;
	}

		}

		@media screen and (max-width: 736px) {

			body, input, select, textarea {
				font-size: 11pt;
				letter-spacing: 0.0375em;
			}
			#page-wrapper{
		
		Padding-left:1px;
		padding-right: 1px;
	}

		}

	a {
		
		color: inherit;
		text-decoration: none;
	}

		a:hover {
			border-bottom-color: transparent;
		}

	strong, b {
		color: #fff;
		font-weight: 600;
	}
	 b {
		color: #111;
		font-weight: 600;
	}

	em, i {
		font-style: italic;
	}
	

	p {
		margin: 1em 1em 1em 1em;
		font-weight: 550;
		
		line-height: 2em;
	}

	h1, h2, h3{ /****************************************************************style de texte*************************************************/
		
		font-weight:700;
		letter-spacing: 0;
		line-height: 0.9em;
		margin-bottom:1em;
		

	}

		h1 a, h2 a, h3 a,a {
			color: inherit;
			text-decoration: none;
			
		    
		    margin-bottom:1em;
		}

	h2 {
		font-size: 1.35em;
		line-height: 1.75em;
	}

		@media screen and (max-width: 736px) {

			h2 {
				font-size: 1.1em;
				line-height: 1.65em;
			}

		}

	h3 {
		font-size: 1.15em;
		line-height: 1.75em;
	}

		@media screen and (max-width: 736px) {

			h3 {
				font-size: 1em;
				line-height: 1.65em;
			}

		}


	

/* *********************************************************************Section/Article **********************************************************************/

	section.special, article.special {
		font-size: 1.1em;
		text-align: center;
	}
	
	section.features{
		
		text-align: justify;
	}

	header p {
		color: rgba(255, 255, 255, 0.5);
		position: relative;
		top: -0.25em;
	}

	header h3 + p {
		font-size: 1.1em;
	}

	header.major {
		margin: 0 0 3.5em 0;
	}

		header.major h2 {
			border-bottom: solid 2px #fff;
			display: inline-block;
			padding-bottom: 1em;
			position: relative;
		}

			header.major h2:after, header.major h3:after {
				content: '';
				display: block;
				height: 1px;
			}

		header.major p {
			color: black;
			top: 0;
		}

		@media screen and (max-width: 736px) {

			header.major {
				margin: 0 0 2em 0;
				border:solid;
			}


     form {
		margin: 0 0 2em 0;
	      }
		}

/* *********************************************************************************Formulaire ***************************************************************/	 
/*div.row{
    border-radius: 5px;
    background-color: #f2f2f2;      boudure exterieur de formulaire de contacte
    padding: 20px;
}*/                                     


 .row input[type="text"],
	input[type="email"],
	select,
	textarea {

		appearance: none;
		background: rgba(144, 144, 144, 0.25);
		border-radius: 2px;
		border: none;
		color: inherit;
		display: block;
		outline: 0;
		padding: 0 1em;
		text-decoration: none;
		width: 100%;
	}


		input[type="text"]:focus,
		input[type="email"]:focus,
		select:focus,
		textarea:focus {
			box-shadow: 0 0 0 2px #21b2a6;
		}

 .row input[type="text"],
	input[type="password"],
	input[type="email"],
	select {
		height: 2em;
	}

	textarea {
		padding: 0.75em 1em;
	}


/**********************************************************************************Image *********************************************************************/

	
.image.fit {
			display: block;
			margin: 0 0 2em 0;
			width: 100%;
		}

			.image.fit img {
				width: 100%;
			}
		
			

		

			

/*********************************************************************************Listes ********************************************************************/

	ol {
		list-style: decimal;
		margin: 0 0 2em 0;
		padding-left: 1.25em;
	}

		ol li {
			padding-left: 0.5em;
		}

	ul {
		list-style: disc;
		margin: 0 0 2em 0;
		padding-left: 3em;
	}

		ul li {
			padding-left: 0.5em;
		}

		ul.alt {
			list-style: none;
			padding-left: 0;
		}

			ul.alt li {
				border-top: solid 1px #fff;
				padding: 0.5em 0;
			}

				ul.alt li:first-child {
					border-top: 0;
					padding-top: 0;
				}

		ul.icons {
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

			ul.icons li {
				display: inline-block;
				padding: 0 1em 0 0;
			}

				ul.icons li:last-child {
					padding-right: 0 !important;
				}

			ul.icons.major {
				padding: 1em 0;
			}

				ul.icons.major li {
					padding-right: 3.5em;
				}

					@media screen and (max-width: 736px) {

						ul.icons.major li {
							padding: 0 1em !important;
						}

					}

		ul.actions {
			cursor: default;
			list-style: none;
			padding-left: 0;
		}

			ul.actions li {
				display: inline-block;
				padding: 0 1.5em 0 0;
				vertical-align: middle;
			}

				ul.actions li:last-child {
					padding-right: 0;
				}

			ul.actions.small li {
				padding: 0 0.75em 0 0;
			}

			ul.actions.vertical li {
				display: block;
				padding: 1.5em 0 0 0;
			}

				ul.actions.vertical li:first-child {
					padding-top: 0;
				}

				ul.actions.vertical li > * {
					margin-bottom: 0;
				}

			ul.actions.vertical.small li {
				padding: 0.75em 0 0 0;
			}

				ul.actions.vertical.small li:first-child {
					padding-top: 0;
				}

			ul.actions.fit {
				display: table;
				margin-left: -1.5em;
				padding: 0;
				table-layout: fixed;
				width: calc(100% + 1.5em);
			}

				ul.actions.fit li {
					display: table-cell;
					padding: 0 0 0 1.5em;
				}

					ul.actions.fit li > * {
						margin-bottom: 0;
					}

				ul.actions.fit.small {
					margin-left: -0.75em;
					width: calc(100% + 0.75em);
				}

					ul.actions.fit.small li {
						padding: 0 0 0 0.75em;
					}

			@media screen and (max-width: 736px) {

				ul.actions li {
					display: block;
					padding: 1em 0 0 0;
					text-align: justify;
					width: 100%;
				}

					ul.actions li:first-child {
						padding-top: 0;
					}

					ul.actions li > * {
						margin: 0 auto !important;
						max-width: 30em;
						width: 100%;
					}

						ul.actions li > *.icon:before {
							margin-left: -1em;
						}

				ul.actions.small li {
					padding: 0.5em 0 0 0;
				}

					ul.actions.small li:first-child {
						padding-top: 0;
					}

			}

	dl {
		margin: 0 0 2em 0;
	}


/*************************************************************************Button ****************************************************************************/

	.row input[type="submit"],
	input[type="reset"],
	input[type="button"],
	button,
	.button {
		-moz-appearance: none;
		-webkit-appearance: none;
		-ms-appearance: none;
		appearance: none;
		-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
		
		border-radius: 3px;
		border: 0;
		box-shadow: inset 0 0 0 2px #fff;
		color: #fff;
		cursor: pointer;
		display: inline-block;
		font-size: 0.8em;
		font-weight: 600;
		height: 3.125em;
		letter-spacing: 0.225em;
		line-height: 3.125em;
		padding: 0 2.75em;
		text-align: center;
		text-decoration: none;
		
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

		.row input[type="submit"]:hover,
		input[type="reset"]:hover,
		input[type="button"]:hover,
		button:hover,
		.button:hover {
			background-color: rgba(144, 144, 144, 0.25);
		}

		.row input[type="submit"]:active,
		input[type="reset"]:active,
		input[type="button"]:active,
		button:active,
		.button:active {
			background-color: rgba(144, 144, 144, 0.5);
		}

	

		input[type="submit"].fit,
		input[type="reset"].fit,
		input[type="button"].fit,
		button.fit,
		.button.fit {
			display: block;
			margin: 0 0 1em 0;
			width: 100%;
		}

		input[type="submit"].small,
		input[type="reset"].small,
		input[type="button"].small,
		button.small,
		.button.small {
			font-size: 0.8em;
		}

		

		input[type="submit"].special,
		input[type="reset"].special,
		input[type="button"].special,
		button.special,
		.button.special {
			background-color: #ed4933;
			box-shadow: none !important;
			color: #ffffff !important;
		}

			input[type="submit"].special:hover,
			input[type="reset"].special:hover,
			input[type="button"].special:hover,
			button.special:hover,
			.button.special:hover {
				background-color: #ef5e4a !important;
			}

			input[type="submit"].special:active,
			input[type="reset"].special:active,
			input[type="button"].special:active,
			button.special:active,
			.button.special:active {
				background-color: #eb341c !important;
			}

	

		@media screen and (max-width: 736px) {

			input[type="submit"],
			input[type="reset"],
			input[type="button"],
			button,
			.button {
				height: 3.75em;
				line-height: 3.75em;
			}

		}



/* partie0 */

    .partie1 {
		text-align: center;
		background-color: #f7f8fa;
		color: black;
		padding: 10px;
		font-size: 0.85em;
		
		
	}
	  .partie1 h2 {
	
		text-align: justify;
		color: black;
		}
		
	  .partie1 p{
	
		text-align: justify;
		color: black;
	}
	 


	.partie0  {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		background-color: white;
		color: black;
		font-size: 0.85em;
		
	}
	
	.partie0 .image {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			border-radius: 0;
			width: 45%
			
		}
		
	.partie2  {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		background-color: white;
		color: black;
		font-size: 0.85em;
	}

		.partie2 .image {
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			border-radius: 0;
			width: 45%
		}
		.partie2 .content {
			padding: 2em 4em 0.1em 0em;
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			max-width: 48em;
			width: 55%;
		}
		.partie2 .image img {
				border-radius: 0;
				width: 100%;
			}
			.partie0 .image img {
				border-radius: 0;
				width: 100%;
			}

		.partie0 .content {
			padding: 2em 4em 0.1em 4em;
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			max-width: 48em;
			width: 55%;
		
		}
		
		
		

		@media screen and (max-width: 1280px) {

			.partie0 .image {
				width: 45%;
			}

			.partie0 .content {
				width: 55%;
			}

		}

		@media screen and (max-width: 980px) {

			.partie0 {
				display: block;
			}

				

				.partie0 .image {
					width: 100%;
				}

				.partie0 .content {
					padding: 0em 1em 0em 0em ;
					max-width: none;
					text-align: justify;
					width: 100%;
				}

		}
		
		@media screen and (max-width: 736px) {

			.partie1 .fadein {
			     display:none;  
			}
			.partie1 p{
				
	             text-align:center;
				
			}

		}

		@media screen and (max-width: 736px) {

			.partie2 .content {
				padding: 3em 2em 1em 2em ;
			}

		}
		@media screen and (max-width: 1280px) {

			.partie2 .image {
				width: 45%;
			}

			.partie2 .content {
				width: 55%;
			}

		}

		@media screen and (max-width: 980px) {

			.partie2 {
				display: block;
			}


				.partie2 .image {
					width: 100%;
				}

				.partie2 .content {
					padding: 4em 3em 2em 3em ;
					max-width: none;
					text-align: justify;
					width: 100%;
				}

		}

		@media screen and (max-width: 736px) {

			.partie2 .content {
				padding: 3em 2em 1em 2em ;
			}

		}
		
		
		/* Spotlight */

	.spotlight {
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		background-color: white;
		color: black;
		font-size: 0.85em;
		padding-bottom:0;
		border-style: solid;
	    border-color: #f7f8fa;
		border-width: 5px;

	}

		.spotlight .image {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			border-radius: 0;
			width: 45%;
		}

			.spotlight .image img {
				border-radius: 0;
				width: 100%;
			}

		.spotlight .content {
			background: url("mages/IC.jpg");
			padding: 2em 4em 0.1em 4em;
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			max-width: 48em;
			width: 55%;
		}

		.spotlight:nth-child(2n) {
			-moz-flex-direction: row-reverse;
			-webkit-flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
			flex-direction: row-reverse;/********************************************************************************importnat pour renverser l'image et le texte*****/
		}
        .spotlight .trigger {
			
			border-style: solid;
            border-width: 5px;
			border-color: #f7f8fa;
			background-color:#f7f8fa;
			border-radius:5px;
			
		}
		

		@media screen and (max-width: 1280px) {

			.spotlight .image {
				width: 45%;
			}

			.spotlight .content {
				width: 55%;
			}

		}

		@media screen and (max-width: 980px) {

			.spotlight {
				display: block;
			}

				.spotlight .image {
					width: 100%;
				}

				.spotlight .content {
					padding: 4em 3em 2em 3em ;
					max-width: none;
					text-align: justify;
					width: 100%;
				}

		}

		@media screen and (max-width: 736px) {

			.spotlight .content {
				padding: 0em 0em 1em 2em ;
		
			}

		}


/********************************************************************************Wrapper ********************************************************************/

	.wrapper {
		padding: 6em 0 4em 0 ;
	}

		.wrapper > .inner {
			width: 60em;
			margin: 0 auto;
		}

			@media screen and (max-width: 1280px) {

				.wrapper > .inner {
					width: 90%;
				}

			}

			@media screen and (max-width: 980px) {

				.wrapper > .inner {
					width: 100%;
				}

			}

		.wrapper.alt {
			/* entreprise ressources planning*/
			padding:0;
		}

		

		#one strong{
				color: #ffffff;
			}

		#one header.major h2, #one  header.major h3{
				border-color: rgba(0, 0, 0, 0.125);/* couleur de bordeur de qui nous sommes*/
			}

			@media screen and (max-width: 736px) {

				#one.features li {
					border-top-color: rgba(0, 0, 0, 0.125);
				}

			}

		.wrapper.style2 {
			background-color: #f7f8fa;/*  index spolight*/
		}

		.wrapper.style3 {
			background-color: #f7f8fa; /*   index section chiffres...etc*/
			color: #d3d4e4;
		}

			@media screen and (max-width: 736px) {

				.wrapper.style3 .features li {
					border-top-color: rgba(0, 0, 0, 0.125);
				}

			}

		

		.wrapper.style5 {
			background-color: #ffffff;
			color: #4E4852;
			
		}

			
			

			.wrapper.style5 h2, .wrapper.style5 h3{
				color: #2E3842;
			}

		

		@media screen and (max-width: 736px) {

				.wrapper.style5 .features li {
					border-top-color: #dfdfdf;
				}

			}

		@media screen and (max-width: 980px) {

			.wrapper {
				padding: 4em 3em 2em 3em ;
			}

		}

		@media screen and (max-width: 736px) {

			.wrapper {
				padding: 3em 2em 1em 2em ;
			}

		}

/* **********************************************************************************Page Wrapper + Menu ****************************************************/

	#page-wrapper {
		-moz-transition: opacity 0.5s ease;
		-webkit-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
		opacity: 1;
		padding-top: 0em; /*********************************************************padding top************************************************************************************/
	}

	#page-wrapper:before {
			background: transparent;
			content: '';
			display: block;
			display: none;
			height: 100%;
			left: 0;
			position: fixed;
			top: 0;
			z-index: 10001;
		
		            }

	

/****************************************************************************************Header **************************************************************/

	#header {
		-moz-transition: background-color 0.2s ease;
		-webkit-transition: background-color 0.2s ease;
		-ms-transition: background-color 0.2s ease;
		 transition: background-color 0.2s ease;
		 background:#111111;
		 left: 0;
		 padding-left: 20px;
		 position: relative;
		 top: 0;
		 width: 100%;
		 z-index: 10000;
		 display: flex;
         justify-content: space-between;
         align-items: flex-end;
	     }
		 #logo
{
    display: flex;
    flex-direction: row;
    align-items: baseline;
}
		  .header p{
		 text-align:center;
		  }
	       .header h2{
		 
		    font-size:400px;
			opacity: 1;
			line-height: 1.1px;
			font-weight: 300;
			min-width: 0px;
            max-height: none;
            max-width: none;
			z-index: 1;
			
		 }
		#header h1 {
			-moz-transition: opacity 0.2s ease;
			-webkit-transition: opacity 0.2s ease;
			-ms-transition: opacity 0.2s ease;
			transition: opacity 0.2s ease;
			height: inherit;
			left: 1.25em;
			line-height: inherit;
			position: absolute;
			top: 0;
		}

			#header h1 a {
				border: 0;
				display: block;
				height: inherit;
				line-height: inherit;
			}

				
				#barre_nav #search {
                background-color: #fff;   /* Couleur de fond */
                border: none;   /* Supprime les bordures par défaut */
                border-bottom-style: solid;   /* Style de la bordure */
                border-bottom-width: 1px;   /* Epaisseur de la bordure */
                border-bottom-color: #ffffff;   /* Couleur de la bordure */
                padding: 5px 5px 5px 5px;   /* Espace autour du texte du champ de saisie : haut droite bas gauche */
				height: 1.50em;
                                  }
			
		    	/* Bouton valider */
                #barre_nav #search-btn {
                    /* Couleur de fond */
				border-bottom-style: solid;   /* Style de la bordure */
                border-bottom-width: 1px; 
                border: none;   /* Supprime les bordures par défaut */
                 /* Style de la bordure */
                 /* Epaisseur de la bordure */
                border-bottom-color: #ffffff;   /* Couleur de la bordure */
                  /* Espace autour du texte du champ de saisie : haut droite bas gauche */
				height: 1.5em;
			
}

                   /* Bouton valider au survol de la souris */
                   #barre_nav #search-btn:hover {
                   /* Couleur de fond */
                    color: #fff;   / * Couleur de la police */
}

	
	#header nav > ul > li > a:hover{
		color:blue;
	}
				.recherche_p	{
					display:inline-block;
				}	
				

					#zone_recherche {
	width: 260px;
	position: relative;
}

#texte_recherche {
	width: 200px;
	padding: 1px 50px 0px 1px;
	background-color: rgba(0.6,0.6,0.6,0.6);
	border: solid 1px #7a5440;
	-moz-border-radius: 0px;
	-webkit-border-radius: 0px;
	-o-border-radius: 0px;
	border-radius: 0px;
	font-family: arial, verdana, sans-serif;
	font-size: 18px;
	color: #7a5440;
}

#texte_recherche:focus {
	background-color: rgba(0,0,0,0.8);
	outline: 0 none; /* Pour enlever la "bordure" jaune qu'ajoute Google Chrome au focus */
	color: #fff;
}

#bouton_recherche {
	margin-top: -17px;
	position: absolute;
	top: 55%;
	
	right: 60px;
}

					

					

		#header.alt {
			background: transparent;
		}

			#header.alt h1 {
				-moz-pointer-events: none;
				-webkit-pointer-events: none;
				-ms-pointer-events: none;
				pointer-events: none;
				opacity: 0;
			}

/* ******************************************************************************Banner *********************************************************************/


	#banner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: column;
		-webkit-flex-direction: column;
		-ms-flex-direction: column;
		flex-direction: column;
		-moz-justify-content: center;
		-webkit-justify-content: center;
		-ms-justify-content: center;
		justify-content: center;
		cursor: default;
		height: 100vh;
		min-height: 35em;
		overflow: hidden;
		position: relative;
		text-align: center;
	}

		#banner h2 {
		
			font-size:70px;
			opacity: 1;
			line-height: 100px;
			font-weight: 300;
			min-width: 0px;
            max-height: none;
            max-width: none;
			z-index: 1;
		}
		#banner h1 {
			z-index: 6;
    visibility: inherit;
    transition: none;
    line-height: 100px;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    font-weight: 300;
    font-size: 85px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    opacity: 1;
	text-shadow: -1px -1px 0 #444;;
		}

        #banner h3 {
			
		z-index: 6;
   
    visibility: inherit;
    transition: none;
    line-height: 42px;
    border-width: 0px;
    margin: 0px;
    padding: 0px;
    letter-spacing: 0px;
    font-weight: 300;
    font-size: 31px;
    min-height: 0px;
    min-width: 0px;
    max-height: none;
    max-width: none;
    opacity: 1;	
	text-shadow: -1px -1px 0 #444;
		}
		
			
			
			#banner h2:before, #banner h2:after {
				-moz-transition: width 0.85s ease;
				-webkit-transition: width 0.85s ease;
				-ms-transition: width 0.85s ease;
				transition: width 0.85s ease;
				-moz-transition-delay: 0.25s;
				-webkit-transition-delay: 0.25s;
				-ms-transition-delay: 0.25s;
				transition-delay: 0.25s;
				background: #fff;
				content: '';
				display: block;
				height: 2px;
				position: absolute;
				width: 100%;
			}

			#banner h2:before {
				top: 0;
				left: 0;
			}

			#banner h2:after {
				bottom: 0;
				right: 0;
			}

		#banner p {
			letter-spacing: 0.225em;
			color:#fff;
			
		}

			#banner p a {
				color: inherit;
			}

		
			
	

		@media screen and (max-width: 736px) {

			

				#banner h2 {
					font-size: 1.25em;
					
				}
				
				#banner h1 {
					font-size:12vw;
					
				}
				#banner h3{
					font-size: 8vw;
					
				}

				

		}

	body.is-loading #banner h2 {
		-moz-transform: scale(0.95);
		-webkit-transform: scale(0.95);
		-ms-transform: scale(0.95);
		transform: scale(0.95);
		opacity: 0;
	}

		body.is-loading #banner h2:before, body.is-loading #banner h2:after {
			width: 0;
		}

	body.is-loading #banner .more {
		-moz-transform: translateY(8.5em);
		-webkit-transform: translateY(8.5em);
		-ms-transform: translateY(8.5em);
		transform: translateY(8.5em);
		opacity: 0;
	}

	body.is-loading #banner:after {
		opacity: 1;
	}

/* ********************************************************************************CTA **********************************************************************/
  
  

	#cta .inner {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		justify-content:center;
		max-width: 45em;
	}


		#cta .inner header {
			-moz-order: 1;
			-webkit-order: 1;
			-ms-order: 1;
			order: 1;
			padding-right: 4em;
			width: 50%;
		}

			#cta .inner header p {
				color: inherit;
			}

		#cta .inner .actions {
			-moz-order: 2;
			-webkit-order: 2;
			-ms-order: 2;
			order: 2;
			width: 50%;
		}

		@media screen and (max-width: 980px) {

			#cta .inner {
				display: block;
				text-align: justify;
			}

				#cta .inner header {
					padding-right: 0;
					width: 100%;
				}

				#cta .inner .actions {
					margin-left: auto;
					margin-right: auto;
					max-width: 20em;
					width: 100%;
				}

		}

		@media screen and (max-width: 736px) {

			#cta .inner .actions {
				max-width: none;
			}

		}
		
		
		
		
		
		#banner1>section{
		padding: 12em 0 10em 0 ;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;	
		
			
		}

/******************************************************************************* Main ************************************************************************/

	#main > header {
		padding: 12em 0 10em 0 ;
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/piccont1.jpg");
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		text-align: center;
	}

		#main > header h2 {
			font-size: 2em;
		
		}

		#main > header p {
			color: inherit;
			font-size: 1em;
			
			top: 0;
		}

			#main > header p a {
				color: inherit;
			}

		@media screen and (max-width: 1680px) {

			#main > header {
				padding: 10em 0 8em 0 ;
			}

		}

		@media screen and (max-width: 1280px) {

			#main > header {
				padding: 8em 3em 6em 3em ;
			}

		}

		@media screen and (max-width: 980px) {

			#main > header {
				padding: 10em 3em 8em 3em ;
			}

		}

		@media screen and (max-width: 736px) {

			#main > header {
				padding: 5em 3em 3em 3em ;
			}

				#main > header h2 {
					font-size: 1.25em;
					margin: 0 0 1em 0;
				}

		}

	body.is-mobile #main > header {
		background-attachment: scroll;
	}
	
	section.cont{
	display:flex;
	justify-content:space-between;
	text-align:center;
}

@media screen and (max-width: 736px) {

section.cont{
	display:flex;
	flex-direction: column;
	text-align:center;	
}
}
/*.........................................................................................................................................*/
/* **************************************************************************Footer *************************************************************************/

[data-icon]:before {
    font-family: 'zocial';
    content: attr(data-icon);
    -webkit-font-smoothing: antialiased;
}
a {
    text-decoration: none;

    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -ms-transition: all .2s linear;
    -o-transition:  all .2s linear;
    transition: all .2s linear;
}
.clear {
    clear: both;
}

footer {
    background-color: #2E3639;
    position: relative;
    z-index: 1;
}

footer > ul {
    list-style: none outside none;
    margin: 0 auto;
    max-width: 1200px;
    overflow: hidden;
    padding: 25px 0;
    position: relative;
    width: 95%;
}
footer > ul li {
    float: left;
    padding: 20px 15px;
    width: 33.3%;

    box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
}
footer > ul li:first-child {
    padding-left: 0;
}
footer > ul li:nth-child(3) {
    padding-right: 0;
}
footer > ul li .icon {
    color: #999999;
    float: left;
    font-size: 80px;
    line-height: 80px;
}
footer > ul li .text {
    color: #848889;
    font-size: 13px;
    line-height: 20px; /************************************************style de text*/
    margin-left: 105px;
    position: relative;
    text-align: justify;
}
.text h4 {
    color: #FFFFFF;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}
.text a {
    border-bottom: 1px dotted transparent;
    color: #FFDD00;
    font-weight: bold;
}
.text a:hover {
    border-color: #FFDD00;
}
footer .bar {
    background-color: #1E2629;
    padding: 20px 0;
}
footer .bar-wrap {
    font-size: 12px;
    margin: 0 auto;
    max-width: 1200px;
    position: relative;
    width: 95%;
}
.links {
    float: left;
    list-style: none outside none;
    position: relative;
}
.links li {
    float: left;
    margin-right: 10px;
}
.links a {
    color: #778888;
}
.links a:hover {
    color: #FFFFFF;
}
.social {
    position: absolute;
    right: 0;
    top: 0;
}
.social a {
    color: #778888;
    margin-left: 20px;
}
.social a:hover {
    color: #FFFFFF;
}
.social .icon {
    display: inline-block;
    font-size: 36px;
    margin-right: 5px;
    vertical-align: middle;

    -webkit-transition: -webkit-transform .3s linear;
    -moz-transition: -moz-transform .3s linear;
    -ms-transition: -ms-transform .3s linear;
    -o-transition:  -o-transform .3s linear;
    transition: transform .3s linear;
}
.social a:hover  .icon {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
}
.social .info {
    display: inline-block;
    vertical-align: middle;
}
.social .info .follow {
    display: block;
}
.social .info .num {
    display: block;
}
.copyright {
    color: #778888;
    margin-top: 5px;
}
@media screen and (max-width: 1000px){
    .links, .social, .copyright{
        float:none;
        text-align:center;
    }
    .social {
        position:relative;
        margin:10px 0;
    }
    .links li {
        display:inline-block;
        float:none;
    }
    .bar {
        position:relative;
    }
    .bar-wrap {
        margin-bottom:0;
    }
}

@media screen and (max-width: 835px)  {
    footer > ul li {
        float:none;
        width:auto;
    }
}

@media screen and (max-width: 768px)  {
    .links li {
        margin-right:5px;
    }
}




	
				

/*************************************** Landing ........................................   font..............................................................*/




	body.is-mobile.landing #banner1,
	body.is-mobile.landing .wrapper.style4 { /* image de font de la banniere et style 4 en versions mobile*/
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner1.jpg");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner1.jpg");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner1.jpg");
		background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner1.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	
	
	/***********************************************************************************************************************/
	
	
	
	
	body.landing .obj{
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/obj.jpg");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/obj.jpg");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/obj.jpg");
		background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/obj.jpg");
		animation: animatedBackground 40s linear infinite;
		background-attachment: fixed;
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-position: 0px 0px;
	    background-repeat: repeat-x;
        animation: animatedBackground 40s linear infinite;
		padding-top: 0;
		
		@keyframes animatedBackground {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}
	}


	

	body.is-mobile.landing #banner1,
	body.is-mobile.landing .wrapper.style4 { /* image de font de la banniere et style 4 en versions mobile*/
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner2.jpg");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner2.jpg");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner2.jpg");
		background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/banner2.jpg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	body.landing .wrapper.style4 { /* image de font de la banniere et style 4 en versions mobile*/
		background-image: -moz-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/info.jpeg");
		background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/info.jpeg");
		background-image: -ms-linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/info.jpeg");
		background-image: linear-gradient(top, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("../../images/info.jpeg");
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		background-attachment: fixed;
	}
	
	
	
	/***********************************************************************************************************************/
	
	@media screen and (max-width: 1680px) {

		.row > * {
			padding: 0 0 0 1.5em;
		}

		.row {
			margin: 0 0 -1px -1.5em;
		}

		.row.uniform > * {
			padding: 1.5em 0 0 1.5em;
		}

		.row.uniform {
			margin: -1.5em 0 -1px -1.5em;
		}
		
		@media screen and (max-width: 1280px) {

		.row > * {
			padding: 0 0 0 1.5em;
		}

		.row {
			margin: 0 0 -1px -1.5em;
		}

		.row.uniform > * {
			padding: 1.5em 0 0 1.5em;
		}

		.row.uniform {
			margin: -1.5em 0 -1px -1.5em;
		}
		
		@media screen and (max-width: 980px) {

		.row > * {
			padding: 0 0 0 1.5em;
		}

		.row {
			margin: 0 0 -1px -1.5em;
		}

		.row.uniform > * {
			padding: 1.5em 0 0 1.5em;
		}

		.row.uniform {
			margin: -1.5em 0 -1px -1.5em;
		}
		@media screen and (max-width: 736px) {

		.row > * {
			padding: 0 0 0 1.5em;
		}

		.row {
			margin: 0 0 -1px -1.5em;
		}

		.row.uniform > * {
			padding: 1.5em 0 0 1.5em;
		}

		.row.uniform {
			margin: -1.5em 0 -1px -1.5em;
		}