/* Global styles */

body, html { margin: 0; padding: 0; }

body { font-family: 'EB Garamond', serif; color: #333; font-size: 120%; }

a { color: #555; text-decoration: none; border-bottom: 1px solid #ccc; }
	a.no_underline { border: 0; }
a:hover { color: #111; border-color: #00aaff; }

h1 a, h2 a, h3 a { text-decoration: none; }

a {
	-webkit-transition: border-color 200ms ease;
	-moz-transition: border-color 200ms ease;
	-o-transition: border-color 200ms ease;
	-ms-transition: border-color 200ms ease;	
	transition: border-color 200ms ease;
}
/* Width limit */

#width_limitter { max-width: 1050px; margin: 0 auto; }

/* Page header */

#header { padding: 55px 115px 45px 80px; }
	#header h1 img { height: 75px; }

/* CSS transitions to change the size of the header */

#header {
	-webkit-transition: padding 400ms ease-in-out;
	-moz-transition: padding 400ms ease-in-out;
	-o-transition: padding 400ms ease-in-out;
	-ms-transition: padding 400ms ease-in-out;	
	transition: padding 400ms ease-in-out;
}

#header img {
	-webkit-transition: height 200ms ease-in-out;
	-moz-transition: height 200ms ease-in-out;
	-o-transition: height 200ms ease-in-out;
	-ms-transition: height 200ms ease-in-out;	
	transition: height 200ms ease-in-out;
}

#navigation {
	-webkit-transition: font-size 200ms ease-in-out;
	-moz-transition: font-size 200ms ease-in-out;
	-o-transition: font-size 200ms ease-in-out;
	-ms-transition: font-size 200ms ease-in-out;	
	transition: font-size 200ms ease-in-out;
}

#header.small { padding: 8px 115px 0 80px; background-color: #f9f9f9; }
	#header.small h1 { font-size: 11px; }
		#header.small h1 img { height: 35px; }
	#header.small #navigation { font-size: 1em; margin-top: 0.3em; }

#header_content { max-width: 850px; margin: 0 auto; }

/* Main logo */

h1 { position: relative; padding: 0 4px; font-size: 2.7em; letter-spacing: 9px; display: inline-block; margin: 0;  }
	h1 span { position: absolute; left: 0; z-index: 10; color: transparent; }
	h1 a {  text-decoration: none; display: block; }

/* Navigation menu in header */

#navigation { font-size: 1.4em; color: #999; margin: 0.65em 0 0; float: right; }
	#navigation a { text-decoration: none; padding: 3px 5px; }

/* Page content */

#content { padding: 0 45px; }

/* CSS animations for unloading/loading content */

#container {
	-webkit-transition: opacity 500ms ease-in;
	-moz-transition: opacity 500ms ease-in;
	-o-transition: opacity 500ms ease-in;
	-ms-transition: opacity 500ms ease-in;	
	transition: opacity 500ms ease-in;
}

#fade_out {
	-webkit-transition: opacity  150ms ease-out;
	-moz-transition: opacity 150ms ease-out;
	-o-transition: opacity 150ms ease-out;
	-ms-transition: opacity 150ms ease-out;	
	transition: opacity 150ms ease-out;
}

#fade_out.out, #container.out { opacity: 0; }

/* featured projects */

.featured { margin: 10px 0 20px; display: inline-block; }
.featured .project_preview { display: inline-block; }
.featured .project_info { display: inline-block; vertical-align: top; }

/* Featured project in home page */

.featured.full_page { margin: 20px 0 95px; }
.featured.full_page img { width: 400px; }
	.featured.full_page .project_preview { margin-right: 40px; }
	.featured.full_page .project_info { max-width: 400px; }
	.featured.full_page h2 { font-size: 3em; margin: 0; }
		.featured.full_page h2 a { color: #333; }
	.featured.full_page .project_subtitle { margin: 10px 0; color: #666; font-size: 1.3em; }

/* Not so featured projects in the home page */

.featured.secondary { width: 30%; opacity: 0.6; margin-right: 1.6%; margin-left: 1.6%; min-width: 255px; }
.featured.secondary:hover { opacity: 1; }
	.featured.secondary h2 { margin: 0; }
	.featured.secondary p { margin: 0; }
	.featured.secondary .project_preview { padding: 10px 10px 0; }
	.featured.secondary img { width: 100%; }

.featured.secondary 
{
	-webkit-transition: opacity 200ms ease-in-out;
	-moz-transition: opacity 200ms ease-in-out;
	-o-transition: opacity 200ms ease-in-out;
	-ms-transition: opacity 200ms ease-in-out;	
	transition: opacity 200ms ease-in-out;
}

/* Project lists (used in category projects) */

.project_list h2 { margin-left: 40px; margin-top: 20px; font-size: 50px; }
	.project_list h2 img { height: 45px; margin-bottom: -5px; border-radius: 3px; margin-right: 9px; }
	.project_list .project_item { margin: 15px 0 75px; }

/* Items in project lists */

.project_list .project_preview { width: 300px; display: inline-block; vertical-align: top; margin-right: 40px; }
.project_list .project_info { max-width: 500px; display: inline-block; vertical-align: top; }
	.project_list .project_info h3 { font-size: 30px; margin: 0; }

/* Long texts */

.long_text { max-width: 650px; margin: 0 auto; font-size: 1.2em; }
	.long_text p { line-height: 140%; }