/* Resets
------------------ */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align:  baseline; }
	article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
		display: block; }
	body {
		line-height: 1; }
	ol, ul {
		list-style: none; }


/* Basic Styles
------------------ */
	
	html { font-size: 62.5%;} /* to enable rem font sizing */

	body {
		background: #fff;
		color: rgb(30,30,30);
		
		-webkit-font-smoothing: antialiased;
		-webkit-text-size-adjust: 100%;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		hyphens: auto;
		
		font-family: 'Source Sans Pro', 'Frutiger',Helvetica, Arial, sans-serif;
		font-size: 16px;
		font-size: 1.6rem;
		font-weight: 400;
		line-height: 1.45em;
		border: 15px solid rgb(238,238,238);
		}


/* Typography
------------------ */

	h1, h2, h3, h4, h5, h6 {
		color: rgb(30,30,30);
		letter-spacing: 0.3px;
		font-weight: 400; 
		margin-top: 0;
		padding-top: 0;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
	h1 { font-size: 30px; font-size: 3.0rem; line-height: 1.2em; margin-bottom: 15px;font-weight: 700; }
	h2 { font-size: 52px; line-height: 60px; margin-bottom: 25px; font-weight: 700;color: rgb(238,238,238);}
	h3 { font-size: 26px; line-height: 32px; margin-bottom: 25px; }
	h4 { font-size: 22px; line-height: 30px; margin-bottom: 25px; font-weight:700;  }

	.nextroom {font-weight: 900;line-height: 1.2em;}
	p { margin: 0 0 15px 0; }
	p.intro { }
	.large {
		font-size: 32px; 
		font-weight: 400;
		line-height: 1.4em;
		padding-right: 25px; 
    }
    
    .project-description-noimage {
		font-size: 26px; 
		font-weight: 400;
		line-height: 1.4em; 
    }
    
    .project-sub {
	    margin-bottom: 25px;
    }

	em { font-style: italic; }
	strong { font-weight: bold; }
	small { font-size: 12px; font-size: 1.2rem; }
	hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0; }
	.alignright {text-align: right;}


/* Links
------------------ */
	a, a:visited { color: rgb(30,30,30); text-decoration: underline; outline: 0; }
	a:hover, a:focus { color: rgb(80,80,80); }
	p a, p a:visited { line-height: inherit; }


/* Lists
------------------ */
	ul, ol { margin-bottom: 25px; }
	ul { list-style: none outside; }

	
/* Images
------------------ */

	img.responsive {
		max-width: 100%;
		height: auto; display: block; 
	}


/* Misc
------------------ */
	.remove-bottom { margin-bottom: 0 !important; }
	.half-bottom { margin-bottom: 15px !important; }
	.add-bottom { margin-bottom: 25px !important; }
	.light {color: rgb(200,200,200);}
	.hideifsinglecolumn {
		display: block;
	}

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

/* Header */
	
	#masthead {
		margin-top: 60px;
		margin-bottom: 60px;
		position: relative;	
	}
	

	#masthead .logo span {color: rgb(40,40,40);}
	#masthead ul.menu {margin-top: 10px; font-size: 18px;}
	#masthead ul.menu li {list-style: none; display: inline; padding-left: 10px;}


/* Other sections */

	#intro {margin-bottom: 40px;}
    #projects {margin-bottom: 40px;}
    #services {margin-bottom: 40px;}
    #contact  {margin-bottom: 40px;}


/* Project article */
    
    .project {
		margin-bottom: 20px;

		border-bottom: 1px solid #EEE;
		cursor: pointer;
	}
	
	.project .date {
		font-family: "PT Mono",monospace; 
		font-size: 12px;
		font-size: 1.2rem; 
		line-height: 32px; 
		padding-top: 20px; 
		letter-spacing: 1px;
	}

	.project p.intro {
		font-size: 18px; 
		font-size: 1.8rem;
	}
	
	.project .list {margin-top: 15px;}
	.project .list a.ext {color: rgb(40,40,40);}
	.project .list li { 
		margin-bottom: 5px;
		padding-bottom: 5px;
		border-bottom: 1px solid #EEE;
	}
	
	.project img { margin-bottom: 25px;}
	

/* slider */

	#introslider {position: relative;}
	
	.rslides {
		position: relative;
		list-style: none;
		overflow: hidden;
		width: 100%;
		padding: 0;
		margin: 0;
	}

	.rslides li {
		-webkit-backface-visibility: hidden;
		position: absolute;
		display: none;
		width: 100%;
		left: 0;
		top: 0;
	}

	.rslides li:first-child {
		position: relative;
		display: block;
		float: left;
	}

	.rslides img {
		display: block;
		height: auto;
		float: left;
		width: 100%;
		border: 0;
	}
      
    .transparent-btns_nav {
		background: none repeat scroll 0 0 #FFFFFF;
		display: block;
		height: 91%;
		left: 0;
		opacity: 0;
		overflow: hidden;
		position: absolute;
		text-indent: -9999px;
		top: 0;
		width: 20%;
		z-index: 3;
		cursor: w-resize;
	}
	
	.transparent-btns_nav.next {
		left: auto;
		right: 0;
		cursor: e-resize;
	}

	.transparent-btns_tabs {
		margin-top: 10px;
		text-align: right;
		margin-bottom: 0;
	}

	.transparent-btns_tabs li{
		display: inline;
		float: none;
		margin-right: 8px;
	}

	.transparent-btns_tabs a {
		background: rgb(220,220,220);
		border-radius: 15px 15px 15px 15px;
		display: inline-block;
		height: 10px;
		overflow: hidden;
		text-indent: 9999px;
		width: 10px;
	}

	.transparent-btns_here a {
    	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.8);
    }
 
 
 
 
 /* 
	24 COLUMN - RESPONSIVE GRID SYSTEM
	DEVELOPED BY DENIS LEBLANC
	URL - http://responsive.gs
	VERSION - 2.0
	LICENSED UNDER GPL & MIT
*/


/* 	SET ALL ELEMENTS BOX-SIZING TO BORDER-BOX
	If you need support for IE7 and lower use polyfill: https://github.com/Schepp/box-sizing-polyfill */
	
* { -webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box; }


/* MAIN CONTAINER */
.container { 
	max-width: 95%;
	margin: 0 auto; 
	width: 940px;}

#page_wrap{
	margin-top: 0;
	border-top:1px solid transparent;
}

/* SELF CLEARING FLOATS - CLEARFIX METHOD */
.row:after, .col:after, .clr:after, .group:after { 
	content: ""; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden; }


/* DEFAULT ROW STYLES */
.row { margin-bottom: 20px; } /* set according to preference*/
.project .row { margin-bottom: 0px; }
							  
/* DEFAULT COLUMN STYLES */
.col { 
	display: block;
	float:left;
	width: 100%;
}

@media ( min-width : 768px ) {
	.col {
		margin-left: 2%;
	}
}

/* RESET MARGINS */
.col:first-child { margin-left: 0; } /* all browsers except IE6 and lower */


/* COLUMN WIDTH ON DISPLAYS +768px */
@media ( min-width : 768px ) {
	.span_1 { width: 2.25%; }
	.span_2 { width: 6.5%; }
	.span_3 { width: 10.75%; }
	.span_4 { width: 15.0%; }
	.span_5 { width: 19.25%; }
	.span_6 { width: 23.5%; }
	.span_7 { width: 27.75%; }
	.span_8 { width: 32.0%; }
	.span_9 { width: 36.25%; }
	.span_10 { width: 40.5%; }
	.span_11 { width: 44.75%; }
	.span_12 { width: 49.0%; }
	.span_13 { width: 53.25%; }
	.span_14 { width: 57.5%; }
	.span_15 { width: 61.75%; }
	.span_16 { width: 66.0%; }
	.span_17 { width: 70.25%; }
	.span_18 { width: 74.5%; }
	.span_19 { width: 78.75%; }
	.span_20 { width: 83.0%; }
	.span_21 { width: 87.25%; }
	.span_22 { width: 91.5%; }
	.span_23 { width: 95.75%; }
	.span_24 { width: 100%; }
}
 
/* #Tablet (Portrait)
================================================== */

    /* Note: Design for a width of 768px */

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .container { width: 768px; }
        
        .large {
		    font-size: 26px; 
		    font-weight: 400;
		    line-height: 1.5em; 
		    
		}
    }


/*  #Mobile (Portrait)
================================================== */

    /* Note: Design for a width of 320px */

    @media only screen and (max-width: 767px) {
        .container { width: 300px; }
        
        
		#masthead {
	        margin-bottom: 25px;
		    margin-top: 40px;
		    padding-bottom: 10px;
		    border-bottom: 1px solid rgb(238,238,238);
    	}
		#masthead ul.menu {
	        margin-top: 5px;
		}
		#masthead ul.menu li {
	        padding-left: 0px;
	        padding-right: 10px;
	        font-size: 20px;
   
		}
		.alignright {
	        text-align: left;
		}
		#intro .large {
		    padding-bottom: 25px;
		    margin-bottom: 40px;
		    border-bottom: 1px solid rgb(238,238,238);
		}
		.project {
		    padding-top: 15px;
		}
		  
		h3,h4 {
		    margin-bottom: 15px;
		}
		.large {
		    font-size: 24px; 
		    font-weight: 400;
		    line-height: 1.5em; 
		    padding-right: 0;
		}
		.project .date {
			letter-spacing: 2px;
			line-height: 30px;
		}
		.project p.project-description-noimage {
			font-size: 20px; 
			font-weight: 400;
			line-height: 1.4em; 
		}
		.project p.project-description {
			font-size: 20px; 
			font-weight: 400;
			line-height: 1.4em; 
			margin-bottom: 25px;
			
		}
		.hideifsinglecolumn {
			display: none;
		}

    }


/* #Mobile (Landscape)
================================================== */

    /* Note: Design for a width of 480px */

    @media only screen and (min-width: 480px) and (max-width: 767px) {
        .container { width: 420px; }
        
        #masthead ul.menu {margin-top: 0px; margin-bottom:20px; font-size: 18px;}
        
        p {
        	margin-bottom: 25px;
        }
        .large {
		    font-size: 30px; 
		    font-weight: 400;
		    line-height: 1.5em; 
		}
		.project p.project-description-noimage {
			font-size: 22px; 
			font-weight: 400;
			line-height: 1.4em; 
		}
		.project p.project-description {
			font-size: 22px; 
			font-weight: 400;
			line-height: 1.4em; 
		}
    }