html {
	margin: 0;
	padding: 0;
}


body {
	margin: 0;
	padding: 0;
	font-family: 'Spartan', sans-serif;
	font-weight: 300;
	font-size: 0.8em;
	background-color: #f3f3f3;
	color: #313131;
}





#content {
	margin: 0;
	padding: 0;
	overflow: hidden;
	position: relative;
	background-color: #7D7D7D;
	color: #fff;
}


#header {
	margin: 0;
	padding: 0;

	position: relative;
}

#header>div {
	margin: 0 2em 2em 2em;
	padding: 0;
	text-align: center;
	font-weight: normal;
	font-size: 1.2em;


	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}
#header h1 {
	margin: 0 0 1em 0;
	padding: 0;
	text-align: center;
	font-weight: 200;
	font-size: 1.2em;
	line-height: 1.4em;
}
#header h2 {
	margin: 0 0 1em 0;
	padding: 0;
	text-align: center;
	font-weight: 200;
	font-size: 1em;

	
}
#header p {
	margin: 0;
	line-height: 1.3em;
	padding: 0;
	text-align: center;
	font-weight: normal;
	font-size: 1em;
}

#header p a, #header p a:active, #header p a:visited,#header p a:hover  {
	color: #fff;
}


ul.articlelist {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
ul.articlelist li {
	margin: 0 0 0.5em 0;
	padding: 0;
	font-size: 0.8em;
}
ul.articlelist li a,
ul.articlelist li a:visited,
ul.articlelist li a:active,
ul.articlelist li a:hover
 {
	color: white;
	text-decoration: none;
}


#projectlist {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
}

#projectlist ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

#projectlist li {
	margin: 0;
	padding: 0;

	display: block;
	float: left;
}

#projectlist a {
	margin: 0;
	padding: 0;
	display: block;
	color: #fff;
	text-decoration: none;
	background-image: linear-gradient(115deg, rgba(0,0,0,0.07), rgba(0,0,0,0), rgba(0,0,0,0.15));
	background-size: cover;
	background-repeat: no-repeat;
	transition: background-image 0.2s;
}

#projectlist a:hover, #projectlist a:active {
	background-image: linear-gradient(115deg, rgba(0,0,0,0.14), rgba(0,0,0,0.07), rgba(0,0,0,0.21));
	transition: background-image 0.2s;
}

#projectlist a > span {
	display: block;
	padding: 1em;

}

#projectlist a strong {
	font-size: 1.2em;
	font-weight: normal;
	display: block;
	line-height: 1.4em;
	margin-bottom: 0.6em;
}



/* ---- article section ---- */


#articleheader {
	margin: 0;
	padding: 1.4em 3.2em 1em 3.2em;
	background-color: #717171;
	color: white;
	position: relative;
	/*
	box-shadow: 0 0 50px 0px rgba(50, 50, 50, 0.7);

	position: fixed;
	top: 0;
	left: 0;
	right: 0;*/
}




#articleheader h1 {
	margin: 2em 0 0 0;
	padding: 0 10% 0 0;
	font-size: 20px;
	font-weight: 200;
	text-align: center;
}

#articleheader p {
	margin: 1em 0 0 0;
	padding: 0;
}

#articleheader a.back {
	display: block;
	position: absolute;
	top: 0.6em;
	right: 1em;
	text-indent: -3000px;


-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

#articleheader a.back span {
	margin: 0 0.2em 0 0;
	padding: 0;
	width: 0.7em;
	height: 0.7em;
	display: block;
	float: left;
}


#contentnav {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #313131;
	z-index: 1;


-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Old versions of Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}
#contentnav ul {
	margin: 0;
	padding: 1em 2em;
	list-style-type: none;
	overflow: hidden;
}
#contentnav li {
	margin: 0 1em 0 0;
	padding: 0;
	display: block;
	float: left;
}
#contentnav li a {
	margin: 0;
	padding: 0;
	display: block;
	background-color: #f7f7f7;
	width: 10px;
	height: 10px;
	text-indent: -4000px;
	background-image: linear-gradient(115deg, rgba(0,0,0,0.07), rgba(0,0,0,0), rgba(0,0,0,0.15));

}

#contentnav li.current a {
	background-color: #A4589D;
}

/* -------------------------------------------------------------- */
/* content styles */


section {
	margin: 1em 2em;
	padding: 1em 0 2em 0em;

	min-height: 100%;

	background-image: url(border.png);
	background-repeat: repeat-x;
	background-position: bottom;
	overflow: hidden;


	xxscroll-snap-align: start;

}

section.introduction {
	xxscroll-snap-align: none;
}
header {
	xxscroll-snap-align: start;
}

html {
	xxscroll-snap-type: y proximity;
}


section div.content {
	padding-top: 1.6em;
}
section div.content h2 {
	margin: 0 2em 1em 0;
	font-size: 1.6em;
	font-weight: normal;

}
section div.content p {
	margin: 0 2em 1em 0;
	line-height: 1.5em;
}
section div.content {
	overflow: hidden;
}

section div.content li {
	margin: 0 0 1em 0;
	font-size: 0.9em;
}



section div.imageblock {
	background-color: #fff;
	margin-top: 1.6em;

}

section div.imageblock ul {
	margin: 0;
	padding: 0;
	border-left: 10px solid white;
	border-bottom: 10px solid white;
	list-style-type: none;
	overflow: hidden;
}

section div.imageblock li {
	margin: 0;
	padding: 0;
	border-top: 10px solid white;
	border-right: 10px solid white;
	list-style-type: none;
	position: relative;
	display: block;
	cursor: pointer;
}
section div.imageblock li div {
	float: none;
}
section div.imageblock li img {
	width: 100%;
	display: block;
	}

section div.imageblock li.half {
	float: left;
	width: calc(50% - 10px);
}

section div.imageblock li.half img {
}


section div.imageblock li.thumbgrid {
	float: left;
	width: calc(33.3% - 10px);
	overflow: hidden;
}

section div.imageblock li.hthumbgrid {
	float: left;
	width: calc(33.3% - 10px);
	overflow: hidden;
}


section div.imageblock li.half img {
}














li.shade span {
	position: absolute;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	background-image: linear-gradient(115deg, rgba(0,0,0,0.07), rgba(0,0,0,0), rgba(0,0,0,0.15));

}


section div.imageblock li.textcontent div {
	padding: 2em;
	overflow: hidden;
}
section div.imageblock li.textcontent p {
	margin: 0;
	padding: 0 0 2em 0;
	font-size: 1.1em;
	font-style: italic;
}
section div.imageblock li.textcontent p  strong {
	font-style: normal;
}


/* responsive */
body.landscape section div.content {
	width: 45%;
	float: left;
}

body.landscape section div.imageblock {
	width: 55%;
	float: left;
}

body.portrait #header h1 {
	margin-top: 2em;
}


/* article theme styling; */
#projectlist .theme1 a,
span.theme1,
body.theme1 #contentnav li.current a

{ /* magenta */
	background-color: #A4589D;
}

#projectlist .theme2 a,
span.theme2,
body.theme2 #contentnav li.current a

{ /* blue */
	background-color: #5893A7;
}

#projectlist .theme3 a,
span.theme3,
body.theme3 #contentnav li.current a

{ /* green */
	background-color: #58A76A;
}

#projectlist .theme4 a,
span.theme4 ,
body.theme4 #contentnav li.current a

{ /* purple */
	background-color: #6C49C4;
}

#projectlist .theme5 a,
span.theme5 ,
body.theme5 #contentnav li.current a

{ /* yellow */
	background-color: #CFC511;
}

#projectlist .theme6 a,
span.theme6 ,
body.theme6 #contentnav li.current a

{ /* yellow */
	background-color: #E6A242;
}


body.theme1 section div.imageblock ul,
body.theme1 section div.imageblock li {
	border-color: #A4589D;
}
body.theme2 section div.imageblock ul,
body.theme2 section div.imageblock li {
	border-color: #5893A7;
}
body.theme3 section div.imageblock ul,
body.theme3 section div.imageblock li {
	border-color: #58A76A;
}
body.theme4 section div.imageblock ul,
body.theme4 section div.imageblock li {
	border-color: #6C49C4;
}
body.theme5 section div.imageblock ul,
body.theme5 section div.imageblock li {
	border-color: #CFC511;
}

body.theme6 section div.imageblock ul,
body.theme6 section div.imageblock li {
	border-color: #E6A242;
}



section.introduction {
	margin: 0;
	background-color: #717171;
	color: #fff;
	background-image: none;
	padding: 1.4em 3.2em 1em 3.2em;

}

body.about {
	background-color: #717171;
}

body.landscape section.introduction div.content {
	margin: 0 auto 0 auto;
	padding-bottom: 2em;
	width: 60%;
	float: none;
}
body.portrait section.introduction div.content {
	margin: 0 auto 0 auto;
	width: 90%;
	float: none;
}

section.introduction p {
	font-size: 1.2em;
	line-height: 1.6em;
}

section.closer {
	background-image: none;
	padding: 1.4em 3.2em 1em 3.2em;

	bxackground-color: #e0e0e0;
	baxckground-image: linear-gradient(115deg, rgba(0,0,0,0.14), rgba(0,0,0,0.07), rgba(0,0,0,0.21));
	background-size: cover;
	background-repeat: no-repeat;
}

body.landscape section.closer div.content {
	margin: 2em auto 0 auto;
	width: 60%;
	float: none;
}

body.portrait section.closer {
	padding: 0;
}
body.portrait section.closer div.content {
	margin: 2em auto 0 auto;
	width: 90%;
	float: none;
}

section.closer h2 {
	font-size: 1.6em;
	line-height: 1.6em;
	font-weight: normal;
	text-align: center;
}

section.closer p {
	font-size: 1.2em;
	line-height: 1.6em;
	text-align: center;
}


section.withflower {
	background-image: url(border.png), url(../content/rc/flower.svg);
	background-repeat: repeat-x, no-repeat;
	background-position: bottom, bottom right;
	background-size: auto, contain;


style="background-image: url(content/rc/flower.svg); background-repeat: no-repeat; background-position: bottom right; background-size: contain"
}



a, a:visited, a:active {
	color: #717171;
	text-decoration: underline;
}

.introduction a,
.introduction a:visited,
.introduction a:active {

	color: #f1f1f1;
	text-decoration: underline;

}




div#lightbox {
	margin: 0;

	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

	background: rgba(255,255,255,0.95);

	display: none;

	transition: opacity 0.2s;
	opacity: 0;
}

div#lightbox.lbOn {
	opacity: 1;
}

div#lightbox div.image {
	margin: 0;

	position: absolute;
	top: 40px;
	left: 20px;
	bottom: 40px;
	right: 20px;


	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;

	opacity: 1;
	transition: opacity 0.1s;
	cursor: pointer;
}

div#lightbox div.fading {
	opacity: 0;
}

/*
body.theme1 section {background-image: url(border1.png);}
body.theme2 section {background-image: url(border2.png);}
body.theme3 section {background-image: url(border3.png);}
body.theme4 section {background-image: url(border4.png);}
body.theme5 section {background-image: url(border5.png);}
*/