/* !FILE BASE IMPORTING
---------------------------------------------- */
@import "base/boilerplate";
@import "base/mixins";
@import "base/settings";
@import "base/calculations";
@import "base/base";

//-------------------------------- end ------


/* ! ---------------------------------------------------------------------
----------------------------------------------- */
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }

html { background-color: #706859; }

body { 
	background-image: url(../../img/background.jpg) fixed top right no-repeat;
	padding: @row * 6 0; 
}

h1 {
	@fontratio: 2.3;
	
	font-size: @fontsize;
	margin: 0;
	letter-spacing: normal;
	line-height: @row;
	font-weight: normal;
	color: darken(@primary, 8%);
		
	strong {
		@fontratio: .6;
		@parentfont: 2.4;
		
		font-size: @fontsize;
		font-weight: 500;
		line-height: @row;
		font-family: @current;
		text-transform: uppercase;
		display: block;
		letter-spacing: .5em;
		
		color: lighten(@primary, 28%);
		position: relative;
		z-index: 1;
		margin-right: -.5em;
	}
		
}

h2 {
	@fontratio: 1.2;

	line-height: @row;	
	font-size: @fontsize;
	margin-bottom: @row;
	margin-top: @row * .25;
	color: @primary;
		color: lighten(@primary, 28%);
	font-weight: normal;
	letter-spacing: .1em;
	text-align: left;
		
}

h3 {
	@fontratio: 1;
	
	line-height: @row;
	font-size: @fontsize;
	font-weight: 100;
	font-style: italic;
	color: darken(@secondary, 30%);
	
	em { font-size: .7em; font-style: normal; }
}


/* !BASIC STRUCTURE ---------------------------------------------------------------------
----------------------------------------------- */
	section.primary {
		@columns: 4;
		@spacer: 3;
		
		width: @width;
		position: relative;
		margin: @row @gutter;

	&#residentiel {
		float: left;
		left: @spacing + @gutter;
		}
	
	&#commercial {
		margin-right: 0;
		float: right;
		}
			
	&.bio {
		@columns: 3;
		@parentpadding: 2;
		
		width: @width;
		margin: @row @gutter;
		margin-left: 0;
		text-align: right;
		left: 0;
		top: @row * 8;
		position: fixed;
		
		&#english { display: none; }
		
		h3 { 
			@parentcolumns: 3;
			@columns: 2.5;
			@spacer: .5;
			@parentpadding: 0;
			
			width: @width;
			left: @spacing + @gutters;
			z-index: 1999;
			position: relative; 
		}
		
		p { 
			@fontratio: .8;
			
			font-size: @fontsize;
			line-height: @row;
			opacity: 0;
			width: 100%;
			position: relative;
			
		 	.transition(opacity);
		}

	&:hover {
			p { opacity: 1; .transition(opacity); }
		}
	}
		
	&.work {
		margin-top: @row * 3;
		
		h2 { 
			@fontratio: 1.2;
			
			position: relative; 
			top: -@row * 2.25; 
/* 			border-bottom: 3px double lighten(@primary, 26%); */
		}
		
		a {
			@columns: 1.33;
			@parentcolumns: 4;
			
			width: @width;
			float: left;
			margin-bottom: @gutters;
			position: relative;
			background: lighten(@primary, 10%);
			display: block;
			text-decoration: none;	
			
		&:hover {
			img { opacity: 1; .transition(); }
			}
		}
		
		img { 
			opacity: .5; 
			width: 100%;
			
			.transition();
		}
	}
}
	
	header.primary {		 
		width: @row * 40;
		position: fixed;
		right: 70%;
		top: -@row * 20;
		height: 100%;
		
		h1 {
			@columns: 3;
			@parentpadding: 2;
			@fontratio: 2.3;
			
			width: @width;
			text-align: right;
			position: fixed;
			left: 0;
			top: @row * 2.5;
			padding-bottom: @row * 2.5;
/* 			border-bottom: 3px double lighten(@primary, 26%); */
			z-index: 2000;
			
		}
	}
	
	footer.primary {
		@columns: 3;
		@parentpadding: 2%;
		
	
		width: @width;
		position: fixed;
		left: 0;
		bottom: @row;
		
		span, a {
			@fontratio: .8 ;
			font-size: @fontsize;
		}
		
		.coords {
			text-align: right;
			margin-bottom: 0;
		}
		
		.street-address, city {
			line-height: @row;
			font-style: italic;
		}
		
		.tel {
			@fontratio: .8;
			font-size: @fontsize;
			line-height: @row;
			font-family: Helvetica, Arial, verdana, sans-serif;
			letter-spacing: .1em;
		color: lighten(@primary, 28%);
			
			font-weight: 400;
		
		}
		
		.mail-address {
/*
			display: block;
			margin-top: @row;
*/
		color: lighten(@primary, 28%);
/* 			color: darken(@secondary, 30%); */
			font-style: italic;
			text-transform: lowercase;
			
		&:hover {
				text-decoration: none;
			}

		}
	}


/* !SUPPORT AND ADDITIONAL FILES IMPORTING
----------------------------------------------- */
@import "additional/ie-specifics";
@import "additional/media-queries";