@charset "UTF-8";

@charset "UTF-8";

body, html, section, .container, .row {
	height:100%;
}

		body
		{
	background-color: #FAFAF2;
	/*padding: 1.25em; /* 20 */
	/*background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;*/
	
	
		}
		
		a {
    color: #222;
	text-decoration:none
}
		nav h2 {
			font-size: 2.0rem;
    line-height: 1.25;
    letter-spacing: .1rem;
	color: #CCC;
	font-weight:400;
			
		}
		.renverse {
			color:#fff;
			font-weight:300;
			
		}
		.floatleft {
			float:left;
		}
		ul ul {
			margin:0px;
		}
		.container {
			width: 100%;
			padding-top: 60px;
				padding-left: 10px;
		}
		.logo {
			margin-left:0px;
			width: 15em; 
			
			
		}
		.logo1 {
			margin-left:0px;
			
			margin-top:100px;
			float:left;
		 
		}
		.logo1 img {
			width:100%;
			/*display:block;
			margin-top:3px;*/
		}
		.blockimg {
			
			margin-top:3px;
			width:240px;
			
		}
		.contact {
			width:260px;
			float:left;
			margin-left: 20px;
		}
		.profil {
					display:block;
					width:160px;
				}
		.signature {
			float:left;
		}
		.block {
	margin: 0px;
	height: 200px;
	width: 300px;
	padding-top: 90px;
	padding-right: 10px;
	padding-bottom: 40px;
	padding-left: 10px;
	float: left;
	background-color: #CCC;
	text-align: center;
	vertical-align: middle;
	display: table-cell;
		}
		a .block {
			display:block;
			color:#333;
		}
		.block:hover{
			opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
		}
		
		.colorblock1 {
	background-color: #FFFFFF;
		}
		.colorblock2 {
	background-color: #4D4D4D;
		}
		.colorblock3 {
	background-color: #E5E5E5;
		}
		.colorblock4 {
	background-color: #999;
		}
		.colorblock5 {
	background-color: #666;
		}
		
		
		
		.vline {
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: #333;
    height: 60px;
    display: inline;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: -15px;
}
		.wrap-accueil {
	height: 100%;
	background-image: url(../images/background.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right -100px;
		}
		.wrap-pages {
	height: 100%;
	background-image: url(../images/background2.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right bottom;
		}
		.logo img {
			width:100%
		}
		.brand {
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    padding-top: 26px;
	padding-left:14px;
}
.brand h2 {
			font-size: 2.0rem;
    line-height: 1.25;
    letter-spacing: .1rem;
	color: #CCC;
	font-weight:400;
			
		}
		
		.brand2 {
    width: 100%;
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    margin-top: 20px;
    padding-top: 30%;
    padding-left: 20px;
    float:left;
}
.brand2 h2 {
	font-size: 2.0rem;
    line-height: 1.25;
    letter-spacing: .1rem;
	color: #CCC;
	font-weight:400;
			
		}

		#nav
		{
			width: 20em;/* 1000 */
			font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
			font-weight: 400;
			/*position: absolute;
			top: 25%;
			left: 50%;
			margin-left: -30em; /* 30 480 */
			padding-top: 26px;
			font-size:14px;
		}

			#nav > a
			{
				display: none;
			}

			#nav li
			{
				position: relative;
			}
				#nav li a
				{
					color: #555;
					display: block;
				}
				#nav li a:active
				{
					background-color: #FAFAF2 !important;
				}

			#nav span:after
			{
				width: 0;
				height: 0;
				border: 0.313em solid transparent; /* 5 */
				border-bottom: none;
				border-top-color: #efa585;
				content: '';
				vertical-align: middle;
				display: inline-block;
				position: relative;
				right: -0.313em; /* 5 */
			}

			/* first level */

			#nav > ul
			{
				height: 3.75em;/* 60 */
				background-color: none;
			}
				#nav > ul > li
				{
					width: 30%;
					height: 100%;
					float: left;
					list-style-type: none;
				}
					#nav > ul > li > a
					{
						height: 100%;
						font-size: 1.1em;/* 24 */
						line-height: 2.3em;/* 60 (24) */
						text-align: left;
						text-decoration:none;
					}
						#nav > ul > li:not( :last-child ) > a
						{
							/* border-right: 1px solid #cc470d; */
						}
						#nav > ul > li:hover > a,
						#nav > ul:not( :hover ) > li.active > a
						{
							background-color: #fff;
							background-color: rgba(255, 255, 255, 0.0);
							color:#000;
						}


				/* second level */

				#nav li ul {
						background-color: #fff;
						display: none;
						position: absolute;
						top: 34px;
						padding: 0px;
						list-style-type: none;
						width:100%;
						padding-right:18px;
					}
					#nav li:hover ul
					{
						display: block;
						left: 0;
						right: 0;
					}
						#nav li:not( :first-child ):hover ul
						{
							left: -1px;
						}
						#nav li ul a
						{
					  font-size: 1.1em;/* 20 */
					  /* border-top: 1px solid #e15a1f;*/
					  padding: 0.0em;/* 15 (20) */
					  list-style-type: none;
					  text-decoration: none;
					  padding-left: 12px;
					  padding-right:4px;
					 }
						
						#nav li ul li a
						{
					
					  list-style-type: none;							
						}
							#nav li ul li a:hover,
							#nav li ul:not( :hover ) li.active a
							{
								background-color: none;
							}
							
/*NAV DISPLAY*/
#nav-desktop {
	display: block;
		}

#cmenu{
	display:none;
	float:left;
	z-index:200;
}
#cmenu1{
	display:none;
	float:left;
	z-index:200;
}
#nav2 {
    width: 20em;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    padding-top: 26px;
    font-size: 14px;
}

/*MENU desktop*/
.three.columns.navcontent {
	width:300px;
	margin-left:20px;
	}
#menu-accordeon {
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
  /*width: 180px;*/
}
#menu-accordeon ul {
  padding:0;
  margin:0;
  list-style:none;
  text-align: left;
}
/*pour li vertical*/
/*#menu-accordeon li {
 margin-bottom:2px; 
}
*/

#menu-accordeon li {
    margin-bottom: 2px;
    
    display: block;
    float: left;
    width: 78px;
}
#menu-accordeon li li {
   max-height:0;
   overflow: hidden;
   transition: all .5s;
   border-radius:0;
   background: #fff;
   padding-left:6px;
   padding-right: 6px;
   
   margin:0
}
#menu-accordeon a {
  display:block;
  text-decoration: none;
  color: #555;
  padding: 8px 0;
  font-size:14px;
}
#menu-accordeon ul li a, #menu-accordeon li:hover li a {
  font-size:14px;
 
}
#menu-accordeon li:hover {
   color:#ccc;
}
#menu-accordeon li li:hover {
   background: #ccc;
   color: #fff;
}
#menu-accordeon ul li:last-child {
   
   border:none;
}
#menu-accordeon li:hover li {
  max-height: 15em;
}
/*/MENU pad*/
				 
							
							.thumbs img {
								
								max-width:100%;
								 height: auto;
								 margin-top:10px;


							}
							.wrap-portfolio {
						border-left-width: 1px;
						border-left-style: solid;
						border-left-color: #999;
						max-width:800px;
						/*height:100%;*/
						position: absolute;
						left:230px;
						top: 60px;
						bottom:0px;
						padding-top: 0px;								
							}
							
							.wrap-portfolio p {
				  margin-bottom: 0px;
				  margin-left: 0px;
				  
							}
							.wrap-portfolio h3 {
				  margin-bottom: 10px;
				  margin-left: 0px;
				  font-weight:700;
				  color:#555;
				  font-size:16px;
				  
							}
							.deco {
				  height: 11px;
				  width: 11px;
				  border: 1px solid #999;
				  position: relative;
				  left: -7px;
				  top: -12px;								
							}
							
	.description {
    margin-left: 20px;
    font-weight: 300;
	margin-bottom:20px;
   
}
.wrap-intro {
	padding-top: 9px;
	
} 
.wrap-contact {
	padding-top: 9px;
	
} 
.pad-l10 {
	padding-left:10px;
}
.leftborder {
	border-left-width: 1px;
	border-left-style: solid;
	border-left-color: #999;
	padding-left:20px
}
								
		.wrapimage{display: table; height: 600px;}
							
	.blocimage{
		display: table-cell;
        vertical-align: middle;
	}
/*/////////SLIDER////////*/	
	.flexslider .slides img {
  width: 100%;
    display: block;
}

.flex-control-paging li a {
    width: 12px;
    height: 12px;
    display: block;
    background: #666;
    background: rgba(0, 0, 0, 0.3);
    cursor: pointer;
    text-indent: -9999px;
    -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 0px;
}
.flex-control-nav {
    width: 100%;
    position: absolute;
    bottom: -40px;
    text-align: left;
	margin-left:10px;
}

/*//////////////////////*/
.one-third.column { 
width: 220px; 

}
.block {position:relative;}
.block p {
	font-size:14px;
	/*position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%) */
	}


	
	
							
							@media only screen and ( max-width: 1024px )
		{
			.container {
    width: 100%;
    padding-top: 20px;
    padding-left: 10px;
}
			
			.wrap-accueil {
	
	background-position: right -20px;
		}
			
			.flexslider {
    width: 600px;
			}
		.flexslider .slides img {
    max-width: 600px;
    display: block;
}
.flex-viewport {
    max-height: 580px;
			
		}
		.wrap-portfolio {
    
    left: 230px;
    top: 20px;
    bottom: 0px;
    padding-top: 0px;
}
		.wrapimage {
    display: table;
    height: 500px;
}



		@media only screen and ( max-width: 62.5em ) /* 1000 */
		{
			
			
			
			
			
			#nav
			{
				width: 100%;
				position: static;
				margin: 0;
			}
		}
		
		@media only screen and ( max-width: 768px ) 
		{
			html
			{
				font-size: 75%; /* 12 */
			}
			
.flexslider .slides img {
    max-width: 680px;
    display: block;
}
			.brand h2 {
    font-size: 1.4rem;
    line-height: 1.25;
    letter-spacing: .1rem;
    color: #CCC;
    font-weight: 400;
}
			.container {
    
			padding-top: 10px;
			padding-left: 10px;
			}
			
.flex-direction-nav {
	display:none;
   
}
.flex-viewport {
    max-height: 700px;
}
.three.columns.navcontent {
    width: 300px;
    margin-left: 70px;
}
.description {
   margin-left: 0px; 
    font-weight: 300;
    margin-bottom: 10px;
}
			
			.wrap-portfolio {
			border-left-width: 0px;
			
			max-width: 800px;
			height: 100%;
			position: absolute;
			left: 50px;
			padding-top: 0px;
			top: 100px;
				}
			.deco {
   				display:none;
				}
			#cmenu {
	display: block;
	position: absolute;
	top: 31px;
	right: 70px;
			  }
			  #cmenu1 {
			  display: block;
			  position: absolute;
			  top: 134px;
			  right: 30px;
			  }
				#nav-desktop {
				display: none;
					}
					.wrap-intro {
    padding-top: 7px;
    margin-left: 0px;
    width: 700px;
}
					.one-third.column {
    			width: 200px;
				}
				.one-third.column p{
    			font-size:12px;
				}
				
				
				
				.block {
			margin: 0px;
			height: 100px;
			width: 180px;
			padding-top: 40px;
			padding-right: 10px;
			padding-bottom: 30px;
			padding-left: 10px;
			float: left;
			
			text-align: center;
			vertical-align: middle;
			display: table-cell;
		}
		.blockimg {
    margin-top: -2px;
    width: 200px;
}
.contact {
			width:210px;
			float:left;
			margin-left: 20px;
			margin-top: 20px;
		}
		.contact p{
			font-size:14px;
		}
		.leftborder {
    border-left-width: 0px;
    border-left-style: solid;
    border-left-color: #999;
    padding-left: 0px;
}
		

		}

		@media only screen and ( max-width: 40em ) /* 640 */
		{
			html
			{
				font-size: 75%; /* 12 */
			}
			.container {
    
			padding-top: 10px;
			padding-left: 10px;
			}
			.signature {
			float:none;
		}
		

		
		.flexslider {
    width: 320px;
			}
		.flexslider .slides img {
    max-width: 320px;
    display: block;
}
.flexslider .slides img {width: auto; height: auto;  max-height: 200px; margin: 0 auto; vertical-align: middle;}
.flex-control-nav {
    display:block;
	margin-left:0px;
}
.flex-control-nav li {
    margin: 0 5px;
    display: inline-block;
    zoom: 1;
}
.flex-control-paging li a {
    width: 6px;
    height: 6px;
   
}
.flex-viewport {
    max-height: 240px;
}
.blocimage {
    display: table-cell;
    vertical-align: top;
}
.description {
    margin-left: 0px;
    font-weight: 300;
    margin-bottom: 10px;
	font-size:12px;
}
		.three.columns.navcontent {
    width: 300px;
    margin-left: 24px;
     }
		.blockimg {
    margin-top: -2px;
    width: 200px;
    margin-bottom: 10px;
}
			
			.wrap-portfolio {
    border-left-width: 0px;
    max-width: 800px;
    height: 100%;
    position: absolute;
    left: 10px;
    padding-top: 0px;
    top: 40px;
}
			.deco {
   				display:none;
				}
			#cmenu {
				  display:block;
				  position: absolute;
				  top: 20px;
				  right:10px;
				}
				#nav-desktop {
				display: none;
					}
					.wrap-intro {
    padding-top: 7px;
    margin-left: 60px;
    width: 500px;
}
					.one-third.column {
    			width: 150px;
				}
				
				
				.block {
			margin: 0px;
			height: 100px;
			width: 180px;
			padding-top: 40px;
			padding-right: 10px;
			padding-bottom: 30px;
			padding-left: 10px;
			float: left;
			
			text-align: center;
			vertical-align: middle;
			display: table-cell;
		}
		.wrap-intro {
    padding-top: 7px;
    margin-left: 30px;
}

			#nav
			{
				position: relative;
				top: auto;
				left: auto;
			}
				#nav > a
				{
					width: 3.125em; /* 50 */
					height: 3.125em; /* 50 */
					text-align: left;
					text-indent: -9999px;
					background-color: #e15a1f;
					position: relative;
				}
					#nav > a:before,
					#nav > a:after
					{
						position: absolute;
						border: 2px solid #fff;
						top: 35%;
						left: 25%;
						right: 25%;
						content: '';
					}
					#nav > a:after
					{
						top: 60%;
					}

				#nav:not( :target ) > a:first-of-type,
				#nav:target > a:last-of-type
				{
					display: block;
				}


			/* first level */

			#nav > ul
			{
				height: auto;
				display: none;
				position: absolute;
				left: 0;
				right: 0;
			}
				#nav:target > ul
				{
					display: block;
				}
				#nav > ul > li
				{
					width: 100%;
					float: none;
				}
					#nav > ul > li > a
					{
						height: auto;
						text-align: left;
						padding: 0 0.833em; /* 20 (24) */
					}
						#nav > ul > li:not( :last-child ) > a
						{
							border-right: none;
							border-bottom: 1px solid #cc470d;
						}


				/* second level */

				#nav li ul
				{
					position: static;
					padding: 1.25em; /* 20 */
					padding-top: 0;
				}
				.brand h2 {
					font-size: 1.5rem;
					line-height: 1.2;
					letter-spacing: .1rem;
					color: #CCC;
					font-weight:400;
					display:block;
					width:200px;
			
		}
				.vline {
					display:none;
				}
				.brand {
					padding-top:0px;
					
				}
				
				#nav {
    width: 20em;
    font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    padding-top: 10px;
    font-size: 14px;
}
				
			
				.logo1 {
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 20px;
    width: 550px;
    left: 20px;
}
  #cmenu1 {
    display: block;
    position: absolute;
    top: 0px;
    right: 10px;
}


.brand2 {
    width: 320px;
    font-family: 'Open Sans', sans-serif;
	font-size:14px;
    font-weight: 400;
    margin-top: 20px;
    padding-top: 0px;
    padding-left: 20px;
    float:left;
}
}
		}
		
		@media only screen and ( max-width: 400px ) /* phone*/
		
		
		
		{
			.wrap-accueil {
    background-position: right -0px;
}
.wrap-pages {
    height: 100%;
    background-image: url(../images/background-mob.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right bottom;
}
			
			.one-third.column {
    			width: 130px;
				}
				.three.columns.navcontent {
    width: 300px;
    margin-left: 20px;
     }
	 .flexslider {
    width: 260px;
    margin-left: 20px;
}
.flex-control-nav {
    display:block;
	margin-left:0px;
}
.flex-control-nav li {
    margin: 0 5px;
    display: inline-block;
    zoom: 1;
}
.flex-control-paging li a {
    width: 6px;
    height: 6px;
   
}
		
.flex-viewport {
    max-height: 480px;
}
.description {
    margin-left: 0px;
    font-weight: 300;
    margin-bottom: 10px;
    font-size: 12px;
	max-width:260px;
}
.description2 {
    margin-left: 20px;
    font-weight: 300;
    margin-bottom: 10px;
    font-size: 12px;
	max-width:260px;
}
wrap-portfolio p {
    margin-bottom: 0px;
    margin-left: 0px;
    
}
	 
				.block {
			margin: 0px;
			height: 100px;
			width: 180px;
			padding-top: 0px;
			padding-right: 10px;
			padding-bottom: 0px;
			padding-left: 10px;
			float: left;
			
			text-align: center;
			vertical-align: top;
			display: table-cell;
			
		}
		.block p {
    font-size: 12px;
	margin-top: 40px;
	line-height:16px;
}
		.logo1 {
    margin-left: 0px;
    margin-top: 0px;
    position: absolute;
    top: 20px;
    width: 320px;
    left: 20px;
		}
		.logo {
    margin-left: 0px;
    width: 15em;
}
		.wrap-intro {
    padding-top: 30px;
    margin-left: 20px;
    width: 320px;
}
				#cmenu {
			  display: block;
			  position: absolute;
			  top: 20px;
			  right: 10px;
			  }
			  #cmenu1 {
			  display: block;
			  position: absolute;
			  top: 0px;
			  right: 10px;
			  }
			  .brand2 {
    width: 300px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    margin-top: 100px;
    padding-top: 20px;
    padding-left: 20px;
    float: left;
}
.flexslider .slides img {width: auto; height: auto; max-width: 260px; max-height: 440px; margin: 0 auto; vertical-align: middle;}
			
		}
		@media only screen and ( max-width: 340px ) /* phone*/
		{
			
			
		}


	


.section-wrap {
	height: 100%;
	width: 100%;
}

.fond {
  background-color: #fff;
  background-position: 0% 0%;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-image: url(../images/background.jpg);
  display: table;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  vertical-align: middle;
  z-index: 1;
}
.parallax-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../images/pattern.png);
  background-repeat: repeat;
  background-color: rgba(44,62,80,0.1);
  z-index: 2;
}