/*******************************************
* TABLE OF CONTENT

1 RESET
----------------------------------------


2 TOOLS
----------------------------------------


3 TYPOGRAPHY 
----------------------------------------
	3.1 Header
	3.2 Main
	3.3 Footer


4 POSITIONING
----------------------------------------
	4.1 Header
	4.2 Main Content
	4.3 Footer


5 NAVIGATION 
----------------------------------------
	5.1 Primary
	5.2 Secondary
	5.3 Scrolling


6 LINKS 
----------------------------------------
	6.1 Header Links
	6.2 Main Links
	6.3 Footer Links


7 FORMS 
----------------------------------------
	7.1 Contact Form


8 PRINT 
----------------------------------------


9 404 PAGE 
----------------------------------------


10 VISIBILITY
----------------------------------------


11 IMAGES 
----------------------------------------


12 MEDIA QUERIES 
----------------------------------------

	line 


********************************************/

/* Mobile device with a mini width of px */
/*@media only screen and (min-width : ) {*/

	/* 03 TYPOGRAPHY ------------ */
		/* 3.1 Header */
		/* 3.2 Main */
		/* 3.3 Footer*/

	/* 04 POSITIONING ----------- */
		/* 4.1 Header */
		/* 4.2 Main */
		/* 4.3 Footer*/

	/* 04 NAVIGATION ------------ */
		/* 5.1 Header */
		/* 5.2 Main */
		/* 5.3 Footer*/

	/* 05 LINKS ----------------- */
		/* 6.1 Header */
		/* 6.2 Main */
		/* 6.3 Footer*/

	/* 06 FORMS ----------------- */
		/* 7.1 Header */
		/* 7.2 Main */
		/* 7.3 Footer*/

	/* 07 404 PAGE -------------- */
		/* 8.1 Header */
		/* 8.2 Main */
		/* 8.3 Footer*/

	/* 08 PRINT ----------------- */
		/* 9.1 Header */
		/* 9.2 Main */
		/* 9.3 Footer*/

	/* 09 VISIBILITY ------------ */
		/* 10.1 Header */
		/* 10.2 Main */
		/* 10.3 Footer*/

	/* 10 IMAGES ---------------- */
		/* 11.1 Header */
		/* 11.2 Main */
		/* 11.3 Footer*/

/*}*/


/* MOBILE FIRST FOUNDATION */

/*
1 RESET
----------------------------------------
	http://meyerweb.com/eric/tools/css/reset/ 
   	v2.0 | 20110126
   	License: none (public domain)
*/

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;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a {
	text-decoration: none;
}

/*
02 TOOLS
----------------------------------------
*/

body {
	background-color: rgba(255,255,255, .8);
	/*background-color: olive;*/
}


/**
 * CLEARFIX
 * http://nicolasgallagher.com/micro-clearfix-hack/
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

/**
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */
.cf {
    *zoom: 1;
}


/*
3 TYPOGRAPHY 
----------------------------------------
	3.1 Header
	3.2 Main
	3.3 Footer

	TYPOGRAPHY FOUNDATION

	Set default values 
	font-size: 16px;
	line-heigth:1;

	By eye find the sweet spot combiantion
	font-size and line-heigth in a average paragraph

	Sweet spot values
	font-size: 18px;
	line-hegith: 24px;

	Convert sweet spot values to em
	font-size = 1.125em			 	18px / 16px
	line heigth = 1.50				24px / 16px
	
	Set new deafult values
	p {
		font-size: 1.12em;			
		line-heigth: 1.50;
	}

	Rule of thumb
	h1 heading 3x larger than body text font-size
	h2 heading 2x larger than body text font-size

	h1 3.36em 	3 x 1.12
	h2 2.24em 	2 x 1.12

	h1 {
		font-size: 3.36em;
		line-heigth: 1.5;
	}

	h2 {
		font-size: 2.24em;
		line-heigth: 1.5;
	}

	Rule
	Determine font-size first
	Next experiment with line-height values from the accurate line height formuala

*/

	/* Typography Foundation */
	html {
		font-size: 100%;
		line-height: 1;
		-moz-text-size-adjust: 100%;	/* disable mobile text-auto-scale */
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}

	body {
	/*font-family: 'Open Sans', sans-serif;*/
	font-family: 'Roboto', sans-serif;
	}

	p, h3, h4 {
		font-size: 1.12em;				/* 18px/16px = 1.125em */
		line-height: 1.5;				/* 24px /16px = 1.5 unitless  */
	}

	h1, h2, h3, h4, h5, h6 {
		font-weight: 300;
	}

	h1 {
		font-size: 3.36em;				/* 1.12em * 3 */
	}

	h2 {
		font-size: 2.25em;				/* 1.12em * 2 */
	}

	/* 3.1 Header Section Font Styles */
	
	header h1 {
		font-size: 1.3em;
		font-weight: 400;
		color: #333;
	}

	header nav ul {
		color: #333;

	}

	header h5 {
		font-size: .75em;
		color:hsla(360, 100%, 100%, 0.60);
		/*color: #999;*/
	}	

	/* 3.2 Main Section Font Styles */

	/* portfolio-nav fonts */
	.headline {
		padding-top: 5px;
	}

	.portfolios h3,
	.gallery h3,
	.statement h3,
	.exhibition h3,
	.contact--form h3 {
		font-weight: 500;
		color: hsla(0, 0%, 35%, 1);
		padding: 0 5px;
	}

	.gallery span,
	.statement span {
		font-weight: 300;
	}

	.notions,
	.statement {
		font-weight: 300;
	}

	.notions p,
	.statement p,
	.exhibition ul {
		font-size: .96em;
		width: 90%;
		margin: 0 auto;
	}

	.notions h4 {
		width: 90%;
		margin: 0 auto;
		font-size: 1em;
		font-weight: 500;
		padding: 10px 0 0 0;
	}

	.notions-series {
		font-weight: 700 !important;
		color: hsla(0, 0%, 35%, 1);
	}

	.notions-caption {
		font-style: italic;
		font-size: 1em;
		color: hsla(0, 0%, 35%, 1);
		padding-top: 2px !important;

	}

	#exhibition-headline {
		display: none;
	}

	#exhibition-subheading {
		font-size: 1.12em;
	}

	ul.exhibition {
		font-size: 1.12em;				/* 18px/16px = 1.125em */
		line-height: 1.5;				/* 24px /16px = 1.5 unitless  */
	}

	.exhibition li {
		font-weight: 300;
		line-height: 1.5;
	}

	li.year {
		font-weight: 400;
	}

	.exhibit br {
		display: none;
	}

	/* hide exhibition headline-segment */
	#headline-segment {
		display: none;
	}

	/* 3.3 Footer */
	.contact-form a {
		font-size: .96em;
	}

/*
4 POSITIONING 
----------------------------------------
	4.1 Header
	4.2 Main Content
	4.3 Footer
*/

.container {
	width: 100%;
	margin: 0 auto;
	max-width: 1680px;
	/*background-color: orange;*/
}

html {
	/*background-color: teal;*/
}

article {
	/*background-color: teal;*/
}


.line {
	border-bottom: 2px solid #666666;
	margin: 10px 29px 25px 29px;
}

.line1 {
	border-bottom: 4px solid #666666;
	margin-bottom: 35px;
	margin-top: 20px;
}

.line p, .line5 p, .line6 p {
	font-size: .9em;
	color: #333;
}

.line p {
	padding-bottom: 30px;
}

.line5, .line6 {
	margin: 10px 29px 25px 29px;
}	

.works {
	/*background-color: brown;*/
}

/* horizontal ruler style */

.first-line {
	width: 100%;
	margin: 8px auto 10px auto;
}

hr {	
	color: rgba(0,0,0,0.3);
	width: 96%;
	margin: 50px auto 5px auto; 
}

	/* 4.1 Header positioning */

	.wraper {
		position: relative;
		width: 100%;
	}

	header h1 {
		position: absolute;
		top: 5%;
		left:11px;
		width: auto;			
	}

	header nav ul {
		list-style-type: none;
		position: absolute;
		top: 35%;
		left:11px;
		width: auto;
	}

	header nav li {
		padding: 2px 0; 
	}

	header h5 {
		position: absolute;
		top: 89%;
		left:11px;
		width: 100%
	}

 	/* 4.2 Main Element positioning  */
	section main {
		padding-top: 3px;
	}

	.portfolios h3 {
		margin-top: 10px;
	}

	.portfolio-nav {
		margin-bottom: -3px;
	}


	/* div element positioning */
	.notions,
	.headline {
		padding-bottom: 20px;	 
	}

	.HSR-2009,
	.HSR-2010,
	.title-line {
		padding-bottom: 0;
	}

	.HSR-2009 h4 {
		padding-bottom: 25px;
	}	
	
	/* works on paper */
	.portfolio-nav span {
		display: block;
	}

	.notions-caption {
		padding-bottom: 3px !important;
	}

 	.notions p {
		padding-top: 0.63em;
	}

	.notions-statement {
		padding-bottom: 25px;
	}	
	
	.exhibit h4 {
		padding-top: .63em;
	}

	li.year {
		padding-top: 20px;
	}

	div.exhibition {
		padding-bottom: 1.12em;
	}

	article.artwork {
			padding: 10px 0;
		}	

	/* 4.3 Footer Element Positioning */

	footer {
		margin-bottom: 45px;
	}
				
/*

5 NAVIGATIOM 
----------------------------------------
	5.1 Header
	5.2 Manin
	5.3 Scrolling
*/


	/* 5.3 Scrolling */
	
	/* scrolling arrow */
	.top-arrow {
		padding-top: 3px;
		width: 80%;
	}

	.headline a {
		display: inline-block;
		float: right;
	}

	.headline h3 {
		display: inline-block;
	}
	

/*
6 LINKS 
----------------------------------------
	6.1 Header Links
	6.2 Main Links
	6.3 Footer Links
*/

	/* 6.1 Header Links */
	header nav a:link {
		color: #333;
	}

	header nav a:visited {
		color: #333;
	}

	header nav a:hover {
		color: #de4e00;
	}

	header nav a:active {
		color: #333;
	}	

	/* 6.2 Main Links */
	
	/* portfolio-nav button styles */

	article h4 a {
		padding: 12px 0;
		font-size: .9em;
		font-weight: 400;
		padding-left: 25px;
	}

	article h4 span {
		font-weight: 300;
		font-size: .8em;
	}

	article {
		text-align: left;
	}

	article h4 {
		padding: 4px 0;
	}

	article h4 a:link {
		color: #666666;
		background-color: #e6e6e6;
		display: block;
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
	}

	article h4 a:visited {
		color: #666666;
		background-color: #e6e6e6;
		display: block;		
	}

	article h4 a:hover {
		color: white;
		background-color:#cccccc;
		display: block;
	}

	article h4 a:active {
		color: #666666;
		background-color: #e6e6e6;
		display: block;
	}

	/* 	6.3 Footer Links */
	.contact-form a:hover {
		text-decoration: underline;
	}


	/*
7 FORMS 
----------------------------------------
	7.1 Contact Form
*/

	/* 7.1 Contact Form */

	footer h4 {
		padding-left: 5px;
	}

	form {
		width: 95%;
		margin: 0 auto;
	}

	/* Styles the text boxes */
	input, textarea, file {
		font-family: 'Open Sans', sans-serif;
		/*box model*/
	    box-sizing: border-box;
	    -moz-box-sizing: border-box;
	    -webkit-box-sizing: border-box;
		width:100%;
		height:45px;
		background-color:#fff;
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		border:1px solid #dedede;
		padding:10px;
		margin-top:3px;
		font-size:0.9em;
		color:#3a3a3a;
	}

	#cancel, #submit {
		height: 45px;
	}

	input:focus, textarea:focus {
		border:1px solid #97d6eb;
	}

	/* Styles the text are box */	
	textarea {
		height:215px;
		background-color: #fff;
		font-size: 0.9em;
	}

	/* Styles the submit button */
	#submit {
		text-align: center;
		border:1px solid #dedede;
		cursor:pointer;
		color: #3a3a3a;
	}

	/* Styles the submit hover */	
	#submit:hover {
		color:#fff;
		background-color: #cccccc;
		opacity:0.9;
	}

	/* Styles the cancel button*/	
	#cancel {
		text-align: center;
		border:1px solid #dedede;
		cursor:pointer;
		color: #3a3a3a;
	}

	/* Styles the cancel hover */
	#cancel:hover {
		color:#fff;
		background-color: #cccccc;
		opacity:0.9;
	}

/*
7 PRINT
----------------------------------------
*/



/*
8 PRINT 
----------------------------------------
*/


/*
9 404 PAGE 
----------------------------------------
*/

/*
9 404 PAGE 
----------------------------------------
*/

	#error-msg {
		background: rgba(225, 225, 225, .8);
		position: absolute;
		top: 40%;
		left: 13%;
/*		border: 1px solid #ccc;
		border-radius: 2px;*/

	}

	#error-msg p {
		font-size: 1em;
		font-weight: 300;
		color: #de4e00;
		border-top: 1.5px solid #cccccc;
		border-bottom: 1.5px solid #cccccc;
		padding: 5px 0;
		margin: 10px 20px;		
	}

/*
10 VISIBILITY 
----------------------------------------
	Show/Hide html elements

	9.1 Header
	9.2 Main
	9.3 Footer
*/

	/* 9.2 Main */
	
	/* hide br tage portfolio-nav Landscape */
	.portfolio-nav br {
		display: none;
	}

	/* hide portfolio-nav thumbnail */
	figure img {
		display: none;
	}

/*
11 IMAGES 
----------------------------------------
*/

img {
	width: 100%;
}

.spacer img {
	display: none;
}

/*
12 MEDIA QUERIES 
----------------------------------------
*/


/* Mobile device with a mini width of 568 px */
@media only screen and (min-width : 568px) {

/* horizontal ruller style */
hr {	
	width: 97.5%;
	margin: 30px auto 10px auto;
}

	/* 03 TYPOGRAPHY ------------ */
	
		/* 3.1 Header Section Font Styles */
		
		header h1 {
			font-size: 2em;
		}

		header nav ul {
			font-size: 1.3em;

		}
	
		/* 3.2 Main */
		/* Portfolio-nav */
		article h4 a {
			font-size: 1em;
		}

		.headline h3 {
			font-size: 1.4em;
		}

			
		#exhibition-subheading {
		    font-size: 1.4em;
		}

		.exhibition-list-wraper li {
			width: 70%;
		}	

		/* 3.3 Footer*/

	/* 04 POSITIONING ----------- */

		/* 4.1 Header positioning */
		header  nav ul {
			top:31%
		}

		header nav ul li {
			padding: 4px 0;
		}

		/* 4.2 Main */

		.line {
			margin: 20px 50px 25px 50px;
		}

		.line1 {
			margin-bottom: 35px;
			margin-top: 20px;
		}

		.line p, .line5 p, .line6 p {
			font-size: .9em;
		}

		.line p {
			padding-bottom: 30px;
		}

		.line5, .line6 {
			margin: 10px 50px 25px 49px;
		}		

		/* 4.3 Footer*/

	/* 05 NAVIGATION ------------ */
		/* 5.1 Header */
		/* 452 Main */

		/* scrolling arrow */

		.top-arrow {
			padding-top: 8px;
		}

		.contact-form img {
			padding-top: 8px;
		}				
		/* 5.3 Footer*/


	/* 07 FORMS ----------------- */
		/* 7.1 Header */
		/* 7.2 Main */
		/* 7.3 Footer*/
		.contact-form h4 {
			padding-left: 0;
		}

		form, footer h4 {
			width: 50%;
			margin: 0 auto;
			padding-bottom: 25px;
		}

/*
9 404 PAGE 
----------------------------------------
*/

	#error-msg {
		background: rgba(225, 225, 225, .8);
		position: absolute;
		top: 33%;
		left: 25%;
/*		border: 1px solid #ccc;
		border-radius: 2px;*/

	}

	#error-msg p {
		font-size: 1.5em;
		font-weight: 300;
		color: #de4e00;
		border-top: 1.5px solid #cccccc;
		border-bottom: 1.5px solid #cccccc;
		padding: 5px 0;
	}


/* Mobile device with a mini width of 768 px */
@media only screen and (min-width : 768px ) {

.container {
	width: 100% !important;
	}

/* horizontal ruller style */
hr, .first-line {	
	width: 95.3%;
	margin: 40px auto 15px auto !important;
	}

	/* 02 TYPOGRAPHY ------------ */
		/* 2.1 Header */
		header h1 {
			font-size: 2.7em;
		}

		header ul li {
			font-size: 1em;
		}


		/* 2.2 Main */

		.spheres span {
			font-weight: normal;
			margin-left: 100px;
		}

		/* portfolio nav */
		.portfolio-nav {
			padding-top: 20px;
		}

		.portfolio-nav article {
			padding: 10px 10px;
		}

		.statement p {
			padding-top: 20px;
		}

		.notions h4 {
			padding-top: 0;
		}

		.statement p,
		.notions p {
			width: 82%;
			/*text-indent: 2em;*/
		}			

		.headline {
			padding: 0 11px;
		}

		/* project title */
		.headline h3 {
			font-size: 1.5em;
			margin-left: 5px;
		}

		.portfolio-nav article {
			width: 27%;
			padding: 10px 10px 0 10px;
		}

		.notions-series {
			font-size: 1.4em !important;
			font-weight: 500 !important;
		}

		.notions-caption {
			font-size: 1.1em !important;
		}

		.notions h4 {
			line-height: 1.2;
		}

		.notions p,
		.statement p,
		.exhibition ul {
			font-size: 1.1em;
		}

		.list-left,
		.list-right {
			width: 40%;
			display: inline-block;
			vertical-align: top;
			padding-left: 25px;
		}
	
		/* 2.3 Footer*/

	/* 03 POSITIONING ----------- */
		.container {
			width: 100%;
			margin: 0 auto;
		}
		/* 3.1 Header */

		header h1 {
			left: 20px;
			top: 15%;
			width: auto;
		}

		header nav ul {
			left: 23px;
			top: 40%;
			width: auto;
		}

		header h5 {
			top:95%;
			left: 23px;
			width: auto;
		}

		/* 3.2 Main */

		.line {
			border-bottom: 2px solid #999;
			margin: 0 35px 15px 15px;
		}

		.line1 {
			border-bottom: 4px solid #999;
			margin-top: 20px;
		}

		.line p, .line5 p, .line6 p {
			font-size: .9em;
			color: #555;
			margin-bottom: 25px;
		}

		.line p {
			padding-bottom: 30px;
		}

		.line5, .line6 {
			margin: 10px 29px 25px 15px;
		}

		/* portfolio nav */
		article h4 a {
			text-align: center;
			padding: 9px 0;
		}

		.statement p {
			padding-top: 20px;
		}			

		.headline {
			padding: 0 11px;
		}

		.portfolio-nav article {
			width: 27%;
			padding: 0 0 0 0;
		}

		.portfolio-nav {
			text-align: center;
		}

		.reliefs-2010 {
			position: relative;
			top: 23px;
		}

		.HSR-2009 h4 {
			padding-bottom: 0;
		}		

		/* centering workaround */
		.works {
			margin-left: 15px;
		}

		hr {
			margin: 30px 0 20px 0;
		}

		/* image container width */
		article {
			width: 32%;
			display: inline-block;
			margin-top: 10px;
			text-align: center;
		}

		/* image container width */
		.spheres article {
			width: 24%;
		}

		.gallery h3,
		.gallery p {
			padding-bottom: 10px;
		}

		.portfolio-nav {
			margin-bottom: 30px;
		}

		.exhibition-list-wraper {
			width: 100%;
			text-align: center;
		}

		.exhibition-list-wraper li {
			width: 90%;
		}

		.exhibition-list-wraper article {
			vertical-align: top;
		}

		.exhibition-list-wraper #left {
			margin-right: 50px;
		}

		.exhibition-list-wraper #right {
			margin-left: 50px;
		}
		
		/* 3.3 Footer*/

	/* 04 NAVIGATION ------------ */
		/* 4.1 Header */
		/* 4.2 Main */
		.top-arrow {
			padding-top: 10px;
		}

		.contact-form img {
			padding-top: 10px;
		}

		/*45.3 Scrolling */
		
		/* scrolling arrow */
		.top-arrow {
			padding-top: 10px;
		}

		/* 4.3 Footer*/

	/* 05 LINKS ----------------- */
		/* 5.1 Header */
		
		/* 5.2 Main */

		article h4 a:visited {
			color: #666666;	
		}

		article h4 a:hover {
			color: #333;
		}

		article h4 a:active {
			color: #666666;

		}

	/* portfolio-nav button styles */

	article h4 a {
		padding: px 0;
		font-size: .9em;
		font-weight: 400;
	}
	
	article {
		text-align: left;
	}

	article h4 {
		padding: 4px 0;
	}

	article h4 a:link {
		/*color: #666666;*/
		color: #999999;
		/*background-color: #e6e6e6;*/
		background-color: rgba(225,225,225, .4);
		display: block;
	    /*round corners*/
		border-radius:3px;
		-moz-border-radius:3px;
		-webkit-border-radius:3px;
		/*padding-left: 8%;*/
	}

	article h4 a:visited {
		color: #666666;
		background-color: #e6e6e6;
		display: block;		
	}

	article h4 a:hover {
		color: white;
		background-color:#cccccc;
		display: block;
	}

	article h4 a:active {
		color: #666666;
		background-color: #e6e6e6;
		display: block;
	}

	/* 5.3 Footer*/						

	/* 06 FORMS ----------------- */
		/* 6.1 Header */
		/* 6.2 Main */
		/* 6.3 Footer*/
		form, footer h4 {
			width: 45%;
		}

	/* 07 404 PAGE -------------- */
		#error-msg {
			background: rgba(225, 225, 225, .9);
			position: absolute;
			top: 42%;
			left: 25%;
	/*		border: 1px solid #ccc;
			border-radius: 2px;*/

		}

		#error-msg p {
			font-size: 2em;
			font-weight: 300;
			color: #de4e00;
			border-top: 1.5px solid #cccccc;
			border-bottom: 1.5px solid #cccccc;
			padding: 5px 0;
			margin:  20px 30px;
		}

	/* 08 PRINT ----------------- */
		/* 8.1 Header */
		/* 8.2 Main */
		/* 8.3 Footer*/

	/* 09 VISIBILITY ------------ */
		/* 9.1 Header */

		/* 9.2 Main */
		/* hide br tage portfolio-nav Landscape */
		.portfolio-nav br {
			display: inline;
		}

		/* reveal portfolio-nav thumbnail */
		figure img {
			display: inline;
		}

		#exhibition-subheading {
			display: none;
			/*padding-left: 20px;*/
		}

		#headline-segment {
			display: inline;
		}		

		/* 9.3 Footer*/

	/* 10 IMAGES ---------------- */
		/* 10.1 Header */
		/* 10.2 Main */
		.sphers-group img {
			width: 80%;
		}
		/* 10.3 Footer*/

}


@media only screen and (min-width : 768px ) and (max-width : 1023px) {

hr, .first-line {	
	width: 96.5%;
	}	

	/* 02 TYPOGRAPHY ------------ */
		/* 2.1 Header */
		header h1 {
			font-size: 2.9em;
		}

		header ul li {
			font-size: 1.1em;
		}

		article h4 span {
			font-size: .9em;
		}
		

}


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

	/* 04 POSITIONING ----------- */
		/* 4.1 Header */

		/* 4.2 Main */
		.line {
			margin: 20px 25px 15px 17px;
		}

		.line P {
			margin-top: -20px;
		}

		/* image container width */
		article {
			width: 32.5%;
		}

		/* image container width */
		.spheres article {
			width: 24.4%;
		}

		/* 4.3 Footer*/

}


/* Mobile device with a mini width of px */
@media only screen and (min-width : 1024px ) {

/* horizontal ruler style */
hr, .first-line {	
	width: 96.5%;
	margin: 40px auto 20px auto !important;
}	

	/* 02 TYPOGRAPHY ------------ */
		/* 2.1 Header */
		header h1 {
			font-size: 3.6em;
		}

		header ul li {
			font-size: 1.3em;
		}		

		/* 3.2 Main */

		article h4 span {
			font-size: .9em;
		}

		/* notions statement */
		.notions-statement {
			padding-bottom: 25px !important;
		}

		.notions-caption {
			padding-bottom: 10px !important;
		}

		.exhibition-list-wraper {
			width: 100%;
			text-align: center;
		}

		.exhibition-list-wraper li {
			width: 80%;
		}

		.exhibition-list-wraper article {
			vertical-align: top;
		}
		
		/* 3.3 Footer*/

	/* 04 POSITIONING ----------- */
		/* 4.1 Header */

		/* 4.2 Main */
		.line {
			border-bottom: 2px solid #999;
			margin: 0 35px 15px 22px;
		}

		.line1 {
			border-bottom: 4px solid #999;
			margin-top: 20px;
		}

		.line p, .line5 p, .line6 p {
			font-size: .9em;
			color: #555;
			margin-bottom: 25px;
		}

		.line p {
			padding-bottom: 15px;
			margin-top: -5px;
		}

		.line5, .line6 {
			margin: 0 29px 25px 20px;
		}

		/* image container width */
		article {
			width: 32.5%;
		}

		/* image container width */
		.spheres article {
			width: 24.4%;
		}

		/* 4.3 Footer*/

	/* 04 NAVIGATION ------------ */
		
		/* 4.3 Scrolling */
		.portfolios img {
			margin-top: 10px;
		}

		/* 5.3 Footer*/
	/* 05 LINKS ----------------- */

		/* 6.2 Main */
		article h4 a {
			padding: 12px 0;
		}
		/* 6.3 Footer*/

	/* 06 FORMS ----------------- */

		/* 7.3 Footer*/
		form, footer h4 {
			width: 40%;
		}

	/* 07 404 PAGE -------------- */
		#error-msg {
			background: rgba(225, 225, 225, .9);
			position: absolute;
			top: 42.5%;
			left:28%;
	/*		border: 1px solid #ccc;
			border-radius: 2px;*/

		}

		#error-msg p {
			font-size: 2.2em;
			font-weight: 300;
			color: #de4e00;
			border-top: 1.5px solid #cccccc;
			border-bottom: 1.5px solid #cccccc;
			padding: 5px 0;
			margin:  20px 30px;
		}		

	/* 10 IMAGES ---------------- */
		/* 11.1 Header */
		/* 11.2 Main */
		.works img {
			padding: 10px 0;
		}

		/* 11.3 Footer*/

}

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

/* horizontal ruler style */
hr, .first-line {	
	width: 97.5%;
	margin: 0 auto;
}

	/* 03 TYPOGRAPHY ------------ */
		/* 3.1 Header */

		header h1 {
			font-size: 4em;
		}

		header ul li {
			font-size: 1.4em;
		}

		article h4 span {
			font-size: .9em;
		}			
	
		/* 3.2 Main */		
		.artist-statement,
		.notions-statement {
			width: 95%;
			margin: 0 auto;
		}

		.spheres span {
			font-weight: normal;
			margin-left: 148px;
		}		

		.statement p,
		.notions p {
			font-size: 1.3em;
			line-height: 1.6;
			font-style: italic;
			width: 38.5%;
			display: inline-block;
			vertical-align: top;
			padding: 30px 0 0 100px;
		}

		.notions-series {
			font-size: 1.8em !important;
			color: hsla(0, 0%, 35%, 1);
			font-weight: 400 !important
		}

		.notions-caption {
			font-size: 1.6em !important;
			font-weight: 400 !important;
		}

		.headline h3 {
			font-size: 2em;
		}

		li.year,
		li.item {
			font-size: 1.1em;
			color: #333;
		}


	/* 04 POSITIONING ----------- */
		/* 4.1 Header */
		header h1 {
			top: 18%;
		}

		/* 4.2 Main */
		.portfolio-nav article {
			padding-bottom: 50px;
		}

		.portfolio-nav article img,
		.portfolio-nav article a {
			width: 85%;
			margin: 0 auto;
			text-align: center;
		}

		.line {
			border-bottom: 2px solid #999;
			margin: 0 47px 15px 26px;
		}

		.line1 {
			border-bottom: 4px solid #999;
			margin-top: 20px;
		}

		.line p, .line5 p, .line6 p {
			font-size: 1em;
			color: #555;
			margin-bottom: 25px;
		}

		.line p {
			padding-bottom: 15px;
			margin-top: -5px;
		}

		.line5, .line6 {
			margin: 0 29px 25px 27px;
		}

		.exhibition-list-wraper {
			width: 100%;
			text-align: center;
		}

		.exhibition-list-wraper li {
			width: 80%;
		}

		.exhibition-list-wraper article {
			vertical-align: top;
		}

		.exhibition-list-wraper #left {
			margin-right: 35px;
		}

		.exhibition-list-wraper #right {
			margin-left: 35px;
		}		

	/* 04 NAVIGATION ------------ */
		/* 5.2 Main */

		/* scrolling arrow */
		.top-arrow,
		.contact-form img {
			width: 100%;
			padding-top: 15px;
		}

		/* 5.3 Footer*/	

	/* 05 LINKS ------------ */
		/* 5.2 Main */		

		article h4 a {
			padding: 10px 0;
		}


	/* 06 FORMS ----------------- */
		/* 7.3 Footer*/
			form, footer h4 {
				width: 28%;
			}

	/* 07 404 PAGE -------------- */
	#error-msg {
		background: rgba(225, 225, 225, .9);
		position: absolute;
		top: 40%;
		left:35%;
/*		border: 1px solid #ccc;
		border-radius: 2px;*/

	}

	#error-msg p {
		font-size: 2.2em;
		font-weight: 300;
		color: #de4e00;
		border-top: 1.5px solid #cccccc;
		border-bottom: 1.5px solid #cccccc;
		padding: 5px 0;
		margin:  20px 30px;
	}		


}


@media only screen and (min-width : 1600px ) {

/* horizontal ruler style */
hr, .first-line {	
	width: 98%;
	margin: 0 auto;
}	

		/* 02 TYPOGRAPHY ------------ */
			/* 2.1 Header */
			header h1 {
				font-size: 4.4em;
			}

			header nav li {
				font-size: 1.6em;
			}

			article h4 span {
				font-size: .9em;
			}			

			.spheres span {
				font-weight: normal;
				margin-left: 238px;
			}


		/* 04 POSITIONING ----------- */
			/* 4.1 Header Element Positioning */
			header h1 {
				top: 20%;
				left: 40px;
			}

			header nav ul {
				left: 40px;

			}

			header h5 {
				top: 97% !important;
				left: 40px;
			}

			/* 4.2 Main */

			.line {
				/*border-bottom: 2px solid #ccc;*/
				margin: 20px 63px 15px 35px;
			}

			.line p, .line5 p, .line6 p {
				font-size: 1em;
				/*margin-top: -25px;*/
				color: #777;
			}

			.line p {
				margin: -25px 0 25px 0;
			}

			.line5 p, .line6 p {
				margin: -5px 0 0 7px;
			}

			/* image container width */
			article {
				width: 32.7%;
			}

			/* image container width */
			.spheres article {
				width: 24.4%;
			}

			/* 4.3 Footer*/			

		/* 06 FORMS ----------------- */
			/* 7.3 Footer*/
				form, footer h4 {
					width: 25%;
				}

		/* 07 404 PAGE -------------- */
		#error-msg {
			background: rgba(225, 225, 225, .9);
			position: absolute;
			top: 37%;
			left:28%;
	/*		border: 1px solid #ccc;
			border-radius: 2px;*/

		}

		#error-msg p {
			font-size: 3.3em;
			font-weight: 300;
			color: #de4e00;
			border-top: 1.5px solid #cccccc;
			border-bottom: 1.5px solid #cccccc;
			padding: 5px 0;
			margin:  30px 50px;
		}


}

@media only screen and (min-width : 1920px ) {
	
		/* 02 TYPOGRAPHY ------------ */
			/* 2.1 Header */
			header h1 {
				font-size: 5.3em;
			}

			header ul li {
				font-size: 1.9em;
			}

			/* 3.2 Main */
			.statement p {
				/*width: 55%;*/
				font-size: 1.3em;
				line-height: 1.6;
				font-style: italic;
				color: #4c4c4c;
			}			



		/* 04 POSITIONING ----------- */
			/* 4.1 Header Element Positioning */
			header h1 {
				top: 20%;
			}

			header nav ul {
				top: 39%;
			}

			header h5 {
				top: 96.5%
			}



}