@import url('reset.css');
@import url("font-awesome.min.css");
@import url("http://fonts.googleapis.com/css?family=Lato:300,400,900");


/* Basic starting from small size layout*/
	html, body {
		height: 100%; /*html: android fixed background workaround*/
		/*height: 5000px!important;*/
	}
	html {
		/*overflow-y: hidden; /*android fixed background workaround*/
	}
	body {
		overflow-y: scroll; /*android fixed background workaround*/
		background-image:url(../images/main-background.jpg);
		background-size: 100%;
		background-attachment:fixed;
		background-repeat:no-repeat; /*???? - repeat weird on smartphone*/
		font-family: 'Lato', sans-serif;
		font-weight: 300;
		line-height: normal;
		min-width: 320px;
		font-size: 8px; /*EMs are multiple of this - this is changed for bigger size layouts*/
	}
	
	/*body.loading * {
		-moz-animation: none !important;
		-webkit-animation: none !important;
		-o-animation: none !important;
		-ms-animation: none !important;
		animation: none !important;
		-moz-transition: none !important;
		-webkit-transition: none !important;
		-o-transition: none !important;
		-ms-transition: none !important;
		transition: none !important;
	}*/


/*	.container {
		height: 100%;
	}*/
	.content-wrap {
		max-width: 1100px;
		margin: 0 auto;
		padding-top: 0;  /* nav-wrap is position absolute: margin-top = nav-wrap_height */
/*		background-color:rgb(0,0,0);	*/	

	}
	.content {
		padding: 20px;
	}
	.content.left {
		padding: 40px 0px 40px 30px;
		float: left;
		width: 73%;
		/*border: 1px solid green;*/
	}
	.sidebar-wrap {	
		position: relative;
		padding: 40px 30px 40px 15px;	
		width: 25%;
		height: 100%;
		float: left;
		/*border: 1px solid red;*/
	}
	.sidebar {	
		padding: 20px 15px;	
		background: rgba(0,0,0,0.1);
		border-radius: 0px;
	}
	
	

	strong, b {
		font-weight: 900;
	}
	
	em {
		font-style: italic;
	}

	h1, h2, h3 {
		text-align: left;
		color: rgb(0,0,0);
	} 
	
	h1 {
		font-size: 2.8em;
		letter-spacing: 0.1em;
		margin-bottom: 15px;
		line-height: 1.2em;
	}	
	h2 {
		font-size: 2em;
		letter-spacing: 0.04em;
		margin-bottom: 6px;
		line-height: 1.2em;
	}
	h2 span {
		font-size: 1.4em;
	}

	h3 {
		font-size: 1.7em;
		letter-spacing: 0.025em;
		margin-bottom: 8px;
		line-height: 1.2em;
	}
	h4 {
		font-size: 1.2em;
		letter-spacing: 0.025em;
		margin-bottom: 8px;
		line-height: 1.2em;
	}	
	p {
		text-align: left;
		color: rgb(0,0,0);
		font-size: 1.5em;
		margin-bottom: 0.5em;
		/*line-height: 1.3em;*/
	}	
	.no-margin-bottom {
		margin-bottom: 3px!important;
	}
	p.comment {
		margin-bottom: 1.5em!important;
	}	
	h1:last-child, h2:last-child, h3:last-child, p:last-child {
		margin-bottom: 0px;
	}
	h1.center, h2.center, h3.center, p.center {
		text-align: center!important;
	}
		
	a {
		-moz-transition: all 0.3s ease-in-out;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		-ms-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
		color: rgb(0,51,255);
		text-decoration: none;
		border-bottom: solid 3px;
		border-bottom-color: transparent;
		padding-right: 3px;
	}
	a:hover {
		border-bottom-color: rgb(100,100,155);
		border-bottom-color: rgba(0,51,255,.4); /*rgb(0,51,255);*/
    	-webkit-background-clip: padding-box; /* for Safari */
    	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	}
	a.no-hover {
		border-bottom: none!important;
	}
	
	ul { 
		list-style-type: disc;
		margin: 0 1.8em;
		margin-bottom: 0.5em;	
	}
		ul li { 
			margin-bottom: 0.3em;	
			font-size: 1.5em; /* it can't be styled with p, use default p styling, or override including in the h tag */
			line-height: 1.1em;
		}
	ul.big { 
		list-style-type: disc;
		margin-left: 2em;
		margin-bottom: 0.5em;	
	}
		ul.big li { 
			margin-bottom: 0.4em;	
			font-size: 2em; /* it can't be styled with p, use default p styling, or override including in the h tag */
			line-height: 1.125em;
		}
	
		ul.big li.comment {
		margin-bottom: 0.2em!important;
	}
	
	sub {
		font-size: 0.8em;
		position: relative;
		top: 0.5em;
	}
	sup {
		font-size: 0.8em;
		position: relative;
		top: -0.5em;
	}
	hr {
		border: none;
    	height: 1px;
		color: rgb(150,150,150); /* old IE */
		background-color: rgb(150,150,150); /* Modern Browsers */
		margin: 15px 0;
	}
	blockquote {
		border-left: solid 0.5em rgba(124, 128, 129, 0.2);
		font-style: italic;
		padding: 10px 0 10px 30px;
	}
	blockquote.top {
		margin: 0 0 20px auto!important;
		width: 70%!important;
		border-left: none!important;
		padding: 0 0 5px 0!important;
	}
	blockquote .author{
		font-size: 1.5em;
		text-align: right;
		font-style: normal;
	}

 	section {
		overflow:hidden;
		margin-bottom: 40px;
	}
	section.projects-links {
		/*margin: 0px auto 40px auto!important;
		width: 100%;*/
		margin: 0px 0px 40px 0px!important; /*not working very well when resizing window...*/
		padding: 1em;	
		background: rgba(0,0,0,0.1);
		border-radius: 0px;
		display: none;
	}
	section.projects-links p {
		text-align: center;
	}
	section.special, article.special {
		text-align: center;
	}
	
	.clr {
		clear:both
	}
	.border {
		border: 1px solid rgb(0,0,0);
	}
	
	footer > :last-child {
		margin-bottom: 0;
	}
	footer.major {
		padding-top: 3em;
	}

/*	.sticky {
		position:fixed;
		top: 0;
	}*/
		

/* Header - tag-header */
.header-big {
	width: 100%;
	margin: 0 auto;
	background: rgb(255,255,255);
	background-image: url(../images/header.jpg);
	background-repeat: no-repeat;
	background-position: top center;
	height: 300px;
	z-index: 100;

	display: none;
}
.header-big h1 {
	margin: 0;
	color: rgb(20,20,20);
	width: 60%;
	text-align:center;
	position:relative;
	font-size: 2.4em;
	padding: 100px 0 0 30px; 
	letter-spacing: 1.3em;
	line-height:normal;
	text-transform: lowercase;
}
.header-big h2 {
	color: rgb(122,122,122);
	width: 60%;
	text-align: center;
	position: relative;
	font-size: 1.8em;
	padding: 0 0 0 120px; 
	letter-spacing: 1.8em;
	line-height: normal;	
	text-transform: lowercase;
}
.header-big a:hover {
	-moz-transition: ;
	-webkit-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
	color: rgb(50,50,50);
	border: none;
}
.header-big a {
	color: rgb(50,50,50);
	border: none;
}
.header-collapse {
	float: left;	
	display: block;
}
.header-collapse h1{
	text-align:left; /*for small layout*/

	margin: 0;
	color: rgb(20,20,20);
	width: 100%;
	position:relative;
	font-size: 2em;
	padding: 10px 0px 0px 20px; 
	letter-spacing: 0.75em;
	line-height:normal;
	text-transform: lowercase;
}
.header-collapse h2{
	color: rgb(122,122,122);
	text-align: center;
	position: relative;
	font-size: 1.4em;
	padding: 0 0 0 80px; 
	letter-spacing: 1.6em;
	line-height: normal;	
	text-transform: lowercase;
}
.header-collapse a, .header-collapse a:hover {
	-moz-transition: none;
	-webkit-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
	color: rgb(50,50,50);
	border: none;
}



/* web-kit animations - tag-animations */	
	
.letters-animation a {
	-webkit-animation: letters-animation 1s;
    animation: letters-animation 1s;
}
@-webkit-keyframes letters-animation {
	0%   { letter-spacing: -2em; }
	100% { letter-spacing: 1.3em; }
}
@keyframes letters-animation {
	0%   { letter-spacing: -2em; }
	100% { letter-spacing: 1.3em; }
}
.fade-in {
	-moz-animation: reveal-div 1s 0.25s ease-in-out;
	-webkit-animation: reveal-div 1s 0.25s ease-in-out;
	-o-animation: reveal-div 1s 0.25s ease-in-out;
	-ms-animation: reveal-div 1s 0.25s ease-in-out;
	animation: reveal-div 1s 0.25s ease-in-out;
	-moz-animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	-o-animation-fill-mode: forwards;
	-ms-animation-fill-mode: forwards;
	animation-fill-mode: forwards;	
	opacity: 0;
}
@-moz-keyframes reveal-div { 0% { opacity: 0; } 100% { opacity: 1; } }
@-webkit-keyframes reveal-div { 0% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes reveal-div { 0% { opacity: 0; } 100% { opacity: 1; } }
@-ms-keyframes reveal-div { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes reveal-div { 0% { opacity: 0; } 100% { opacity: 1; } }







/*****************************************/
/*tag-image*/
.image-left-half {
	margin-top: 10px;	
	max-width: 49.5%;
	margin-right: 1%;
	float: left;
}
.image-left-third {
	margin-top: 10px;	
	max-width: 33%;
	margin-right: 1%;
	float: left;
}
.image-right-half {
	margin-top: 10px;	
	max-width: 49.5%;
	margin-left: 1%;
	float: right;
}
.image-right-third {
	margin-top: 10px;	
	max-width: 33%;
	margin-left: 1%;
	float: right;
}
.image-left-half img, .image-left-third img, .image-right-half img, .image-right-third img  {
	width:100%;
}
@media screen and (max-width: 900px) {
.image-left-third {
}
}
@media screen and (max-width: 600px) {
.image-left-third {
	margin-top: 10px;	
	max-width: 49%;
	margin-right: 1%;
	float: left;
}
.image-right-third {
	margin-top: 10px;	
	max-width: 49%;
	margin-left: 1%;
	float: right;
}
}
/*****************************************/


/*****************************************/
/* gallery - tag-gallery*/ 

/* For photo gallery with irregular size items use columns, for item gallery with same size items like project links with 
clickable images use rows. Rows keep the order or the items from left to right when they are repositioned for small layouts 
on top of each other.
*/

/* for all breakpoints */
.gallery-two-columns, .gallery-three-columns, .gallery-four-columns {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0% 10px -1%;
}
.gallery-two-columns .column, .gallery-three-columns .column, .gallery-four-columns .column {
	margin-left: 1%;
}
/* after closing the gallery div apply these attributes, like clearfix */
.gallery-two-columns:after, .gallery-three-columns:after, .gallery-four-columns:after {
  content: "";
  display: table;
  clear: both;
}
.gallery-two-columns .item, .gallery-three-columns .item, .gallery-four-columns .item {
	margin-bottom: 10px;
}
.gallery-two-columns .item img, .gallery-three-columns .item img, .gallery-four-columns .item img {
    /*margin-bottom: 3px;*/
	vertical-align: middle;
	width: 100%;
}


.gallery-two-columns .row, .gallery-three-columns .row, .gallery-four-columns .row  {
	width: 100%;
}
.gallery-two-columns .row:after, .gallery-three-columns .row:after, .gallery-four-columns .row:after {
  content: "";
  display: table;
  clear: both;
}
.gallery-two-columns .row a, .gallery-three-columns .row a, .gallery-four-columns .row a {
	padding: 0; /*chenge global styling for a*/
}
.gallery-two-columns .row .item, .gallery-three-columns .row .item, .gallery-four-columns .row .item{
	margin-left: 1%;
	/*margin-right: 0%;*/
	opacity: 1;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
.gallery-two-columns .row .item:hover, .gallery-three-columns .row .item:hover, .gallery-four-columns .row .item:hover{				
	opacity:0.6;
	filter:alpha(opacity=40); /* For IE8 and earlier */
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}
.gallery-two-columns .row .item .text, .gallery-three-columns .row .item .text, .gallery-four-columns .row .item .text {
	padding: 8px;
	background: rgba(255,255,0,0.1)
}



/* small layout */
.gallery-two-columns .column, .gallery-three-columns .column, .gallery-four-columns .column {
    flex: 100%;
    max-width: 100%;
	margin-right: 0%;
	float: none;
}
.gallery-two-columns .row .item, .gallery-three-columns .row .item, .gallery-four-columns .row .item {
    flex: 100%;
    max-width: 100%;
	float: none;
}	


/* medium layout */
@media screen and (min-width: 600px) {
.gallery-two-columns .column, .gallery-three-columns .column, .gallery-four-columns .column {
	float: left;
    flex: 49%;
    max-width: 49%;
}

.gallery-two-columns .row .item, .gallery-three-columns .row .item, .gallery-four-columns .row .item  {
	float: left;
	flex: 49%;
	max-width: 49%;
}
}

/* big layout */
@media screen and (min-width: 900px) {
/* Create two equal columns that sits next to each other */
.gallery-two-columns .column {
	flex: 49%;
	max-width: 49%;
}

/* Create three equal columns that sits next to each other */
.gallery-three-columns .column {
	flex: 32.33%;
	max-width: 32.33%;
}

.gallery-four-columns .column {
	flex: 23%.75; /*wrong*/
	max-width: 23.75%;
}	
	
.gallery-two-columns .row .item {
	flex: 49%;
	max-width: 49%;
}
.gallery-three-columns .row .item {
	flex: 32.33%;
	max-width: 32.33%;
}

}

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



/*********************** audio entry */

.audio-entry {
	width: 100%;
	margin: 0px 0px;
	/*border: 1px solid black;*/
}
.audio-entry:first-child {
	margin: 0;
}
.audio-entry .player {
	margin-bottom: 8px;
}
.audio-entry .comment {
	margin-bottom: 10px;
	font-size: 1.5em;
}

#playlist {
	background:#666;
	width:340px;
	padding:20px;
	margin: 0;
}
#playlist audio {
	margin-bottom:20px;
}
#playlist li {
	list-style-type:none; 
	margin-bottom: 0.25em;
}
#playlist li:last-child {
	margin-bottom: 0em;
}
#playlist .active a {
	color:#5DB0E6;
	text-decoration:none;
}
#playlist li a {
	color:#eeeedd;
	background:#333;
	padding:0.5em;
	display:block;
	border: none;
}
#playlist li a:hover {
	color:rgb(255,255,0);
	text-decoration:none;
}

@media screen and (max-width: 450px) {
#playlist {
	background:none;
	width:300px;
	padding:20px 0px;
	margin: auto;
}
}


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





/* video background */
	
video#bgvid {
	position: fixed; 
	right: 0; 
	top: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto; 
	z-index: -100; /*lower layer*/
	background: url(../images/main-background.jpg) no-repeat;
	background-size: cover;
}

	



/* work pages */
img.background { /* JS - also styled in 900px screen*/
    position: absolute;
    left: 0;
    top: 330px; /* = header-big + nav-wrap*/
    width: 100%;
    height: auto;
    opacity: 1;
	z-index: -1;
	
	display: none;
}

img.background.fixed { /* for JS when scroll past header */
    position: fixed!important;
	top: 29px!important; /* = nav-wrap(- border-top)*/
}
	/*.content-background {
		background-image:;
		background-repeat:no-repeat;
		background-size: 100% auto;
		background-position: top right;
		background-attachment: scroll;
		background-color: transparent;
		width: 100%;
		height: auto; /* whatever, it's changed via js 
	}
	.content-background.fixed {
		background-attachment: fixed!important;
	}*/
	
	.work .content-wrap {
		position: relative;
		overflow: hidden;	
		
	}
	.work .content-background-wrap { /*for JS*/
	}

	.work .content {
		margin: 10px;
		padding: 10px;
		background: rgba(255,255,255,0.0);
		border-radius: 0px;
		width: auto;
		float: none;
	}
	.work .content.full-width {
	}
	.work .content h1, .work .content h2, .work .content h3, .work .content p {
		color: rgb(0,0,0);
	}
	.work .sidebar {
		margin: 80px 0px 30px 0px;
		background: rgba(255,255,255,0.87);
		border: 0px solid black;
		border-radius: 0px;
		width: 25%;
		padding: 15px;
		float: left;
	}
	.work .sidebar .img-entry {
		margin-bottom: 30px;
	}
	.work .sidebar .img-entry:last-child {
		margin-bottom: 0px;
	}
	.work .sidebar img {
		width: 100%;
		border: 1px solid black;
		margin-bottom: 8px;
	}



		
/* pages */

	
.news .entry {
	margin-top: 10px;
/*		border: 1px solid green; */
}
.news .entry:first-child {
	margin-top: 0px;
/*		border: 1px solid green; */
}
/*
.news .tour {
	margin-bottom: 10px;
}
.news .tour h2 {
	margin-bottom: 10px;
	
}

.news .tour-name {
	margin-bottom: 6px;
	padding-left: 60px;
}*/
/*.news .tour .entry {
	margin: 0px;
}*/
.news .entry-date {
	width: 100px;
	font-size: 1.25em;
	font-weight: normal;
	text-align: right;
	float: left;
	padding-right: 5px;  
	color: rgb(204,0,0);
}
.news .entry-content {
	border-left: 1px dotted;
	overflow: hidden; /* IMPORTANT!!!! */
	padding: 0 20px 0 5px;
}
.news h2 {
	text-align:left!important;
	padding-bottom: 2px; 
	margin-bottom: 0px;
}
.news h3 {
	padding-bottom: 2px; 
}
.news p {
	padding-bottom: 2px; 
}





/*********************** video entry */

.video-entry {
	width: 100%;
	max-width: none;
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	margin-bottom: 5%;
	/*max-width: 896px;
	max-height: 504px;*/
}
.video-entry.fixed {
	margin-bottom: 20px;
	/*max-width: 896px;
	max-height: 504px;*/
}
.video-entry iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important; /* just in case you leave the width from the youtube cut and paste */
	height: 100%!important;
}

	 
.links {
	margin: 10px 0;
}
.links h1 {
	font-size: 20px;
	margin: 10px 0 2px 0;
}
.links p {
}




/*cover entries 360px screen */
	.image-entry.text-right {
		margin: 0 auto;
		width: 100%;
		/*border: 1px solid red;*/
	}
	.image-entry.text-right .profile, 
	.image-entry.text-right .album, 
	.image-entry.text-right .book {
		width: 100%;
		margin: 0 auto 20px auto;
	}
	.image-entry.text-right .profile:first-child, 
	.image-entry.text-right .album:first-child, 
	.image-entry.text-right .book:first-child {
	}
	
	.image-entry.text-right .profile .img-wrap,
	.image-entry.text-right .album .img-wrap
	.image-entry.text-right .book .img-wrap
	{
		float: none;
	}
	.image-entry.text-right .profile img {
		width: 100%;
		height: 100%;	
	}
	.image-entry.text-right .album img {
		width: 100%;
		height: 100%;
	}
	.image-entry.text-right .book img {
		width: 100%;
		height: 100%;
	}
	.image-entry.text-right img {
		float:none;
		border: 1px solid black;		
		margin: 0; /*??? */
	}
	.image-entry .copyright {
		font-size: 1.2em;
	}

	.image-entry.text-right .text {
		overflow: hidden; /*MAAAAGICCCCCCCCC!!!! */
		padding: 10px 3px;
	}
	.image-entry.text-right .album h1, 
	.image-entry.text-right .album h2,
	.image-entry.text-right .album p,
	.image-entry.text-right .book h1, 
	.image-entry.text-right .book h2,
	.image-entry.text-right .book p {
		text-align: left;
	}

/* image gallery */
	.image-entry.gallery {
		margin: 0 auto;
		width: 100%;
		/*border: 1px solid red;*/
	}
	.image-entry.gallery .profile, .image-entry.gallery .album, .image-entry.gallery .book {
		width: 100%;
		margin: 0 auto 20px auto;
	}
	.image-entry.gallery .profile img, .image-entry.gallery .album img, .image-entry.gallery .book img {
		width: 100%;
		border: 1px solid black;
	}
	.image-entry.gallery img {
		float:none;
	}
	.image-entry.gallery .text {
		overflow: hidden; /*MAAAAGICCCCCCCCC!!!! */
		padding: 10px 3px;
	}
	.image-entry.gallery .profile h1, 
	.image-entry.gallery .profile h2,
	.image-entry.gallery .profile p,	
	.image-entry.gallery .album h1, 
	.image-entry.gallery .album h2,
	.image-entry.gallery .album p,
	.image-entry.gallery .book h1, 
	.image-entry.gallery .book h2,
	.image-entry.gallery .book p {
		text-align: left;
	}





/* Footer */

	#footer {
		position: fixed;
    	left: 0;
    	bottom: 0;
		width: 100%;
		background: transparent; /*#e8eef4;*/
		color: #7c8081;
/*		padding: 10px 10px 30px 10px;*/
		text-align: left;
		z-index: 50;
	}

		#footer .copyright {
	
			font-size: 0.8em;
		}

			#footer .copyright a {
				color: inherit;
			}





/* Table */

.table-wrap {
	margin-bottom: 30px;
	border: 1px solid #666;
}

table {
	border-collapse: collapse;
	font-size: 1.5em;	
}

th {
	background: #666;
	color:#FFF;	
	padding: 5px 8px;
	/*text-align: left;*/
	font-size: 1.1em;
}
	
tr.yellow td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background: #FFC;
}
	
tr.green td {
	border-top: 1px solid #FB7A31;
	border-bottom: 1px solid #FB7A31;
	background:#CFF;
}
	
td.description {
	border-bottom: 1px solid #CCC;
	padding: 5px 8px;
	text-align: justify;
	line-height: normal;
}	

td {
	border-bottom: 1px solid #CCC;
	padding: 5px 8px;
	text-align: center;
}

td:nth-child(1) {
	width:15%;	
}
td:nth-child(2) {
	width:4%;	
}
td:nth-child(3) {
	width:9%;	
}
td:nth-child(4) {
	width:8%;		
}
td:nth-child(5) {
	width:64%;	
}

td+td {
	border-left: 1px solid #CCC;
	text-align: center;
}
	











/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  position: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-decoration: none;
  text-indent: -999px;
  position: relative;
  overflow: hidden;
  width: 70px;
  height: 55px;
  float: right; /* */
}

a.nav-toggle {
border-bottom-color: transparent;
}

.nav-toggle:before {
  color: rgb(204,0,0); /* Edit this to change the icon color */
  font-family: "responsivenav", sans-serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 28px;
  text-transform: none;
  position: absolute;
  content: "≡";
  text-indent: 0;
  text-align: center;
  line-height: 55px;
  speak: none;
  width: 100%;
  top: 0;
  left: 0;
}

.nav-toggle.active::before {
  font-size: 24px;
  content:"x";
}





.nav-wrap { /*changed in 900px screen */
   	border-bottom: 1px solid black; 
	background-color: rgb(255,255,255);

}



/* NAVIGATION */

.nav-collapse,
.nav-collapse * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse {
  list-style: none;
  width: 100%;
  float: left;
}

.nav-collapse ul {
	list-style: none;
  	margin: 0;
  	padding: 0;
  	width: 100%;
  	display: block;
    float: left;

	padding: 0;
	color: #063;
	letter-spacing: 0.075em;
	

}

.nav-collapse li {
  float: left; 
  width: 100%;
}

.nav-collapse a {
  color: #000;
  text-decoration: none;
  width: 100%;
  background: transparent;
  padding: 1em 1em;
  float: left;
  border-bottom: 1px solid black;
  
  font-size: 15px; /*not em, looks better fixed on different screens*/
}



.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  
}

nav ul, nav li, nav a{ /*there was some top space in the dropdown menu... this solves it*/
	margin:0;
	padding:0;
}

nav li a:hover {
	-moz-transition: none;
	-webkit-transition: none;
	-o-transition: none;
	-ms-transition: none;
	transition: none;
	/*border-bottom: solid 1px #00FFFF;*/
}
nav li:nth-child(1) a:hover, nav li:nth-child(1).current {
	background: rgba(255,0,0,0.25);
}
nav li:nth-child(2) a:hover, nav li:nth-child(2).current {
	background: rgba(0,100,0,0.25);
}
nav li:nth-child(3) a:hover, nav li:nth-child(3).current {
	background: rgba(255,255,0,0.25);
}
nav li:nth-child(4) a:hover, nav li:nth-child(4).current {
	background: rgba(100,0,55,0.25);
}
nav li:nth-child(5) a:hover, nav li:nth-child(5).current {
	background: rgba(0,255,0,0.25);
}
nav li:nth-child(6) a:hover, nav li:nth-child(6).current {
	background: rgba(255,100,200,0.25);
}
nav li:nth-child(7) a:hover, nav li:nth-child(7).current {
	background: rgba(0,100,100,0.25);
}
nav li:nth-child(8) > a:hover, nav li:nth-child(8).current {
	background: rgba(0,100,250,0.25);
}
nav li:nth-child(9) > a:hover, nav li:nth-child(9).current {
	background: rgba(0,0,255,0.25);
}
nav li:nth-child(10) > a:hover, nav li:nth-child(10).current {
	background: rgba(50,102,33,0.25);
}
nav li:nth-child(11) > a:hover, nav li:nth-child(11).current {
	background: rgba(204,51,0,0.25);
}

nav li.current > a {
	/*font-weight:900;*/
}

.sticky-nav{ /*changed in big layout*/
}























/* small layout */
@media screen and (min-width: 500px) { /*em is relative to the browser default here? 16px usually*/
body {
	font-size: 10px;
}
.content {
	/*padding: 20px 30px;*/
}
p {
	text-align: justify;
}

.header-collapse h1{
/*	text-align:left; 
	margin: 0;
	color: rgb(20,20,20);
	width: 100%;
	position:relative;
	font-size: 2em;*/
	padding: 8px 0px 0px 20px; 
	/*letter-spacing: 0.75em;
	line-height:normal;
	text-transform: lowercase;*/
}
.header-collapse h2{
	/*color: rgb(122,122,122);
	text-align: center;
	position: relative;
	font-size: 1.4em;*/
	padding: 0 0 0 100px; 
	letter-spacing: 1.6em;
	line-height: 0.6;	
	/*text-transform: lowercase;*/
}


@media screen and (min-width: 700px) { /*em is relative to the browser default here? 16px usually*/


	section.projects-links {
		margin: 0 0px 20px 0px!important; /*changed from global*/
		display: block; /*changed from global*/
	}



	.image-entry.text-right {	
	}
	.image-entry.text-right .profile, 	
	.image-entry.text-right .album, 
	.image-entry.text-right .book {
		margin-top: 20px;
	}
	.image-entry.text-right .profile:first-child, 
	.image-entry.text-right .album:first-child, 
	.image-entry.text-right .book:first-child {
		margin-top: 0px;
	}
	.image-entry.text-right .profile .img-wrap,
	.image-entry.text-right .album .img-wrap,
	.image-entry.text-right .book .img-wrap
	{
		float:left;
	}
	.image-entry.text-right img {
	}
	.image-entry.text-right .profile img {
		width: 450px;
		height: 300px;		
	}
	.image-entry.text-right .album img {
		width: 300px;
		height: 300px;
	}
	.image-entry.text-right .book img {
		width: 300px;
		height:400px;
	}
	.image-entry.text-right .text {
		padding: 3px 10px;
	}
/*	.image-entry.text-right h2 {
		font-size: 20px;
	}
	.image-entry.text-right h2 span{
		font-size: 14px;
	}*/
	.image-entry a {
	}
	.image-entry.text-right .player {
		text-align: center;
	}
	.image-entry.text-right .line {
		width: 460px;
		float: left;
		margin: 20px 0 0 0;
	}
	.image-entry.text-right .line:first-child {
		width: 460px;
		float: left;
		margin: 0;
	} 





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


/* image gallery */

	.image-entry.gallery {
	}
	.image-entry.gallery .profile, .image-entry.gallery .album, .image-entry.gallery .book {
		margin: 0 2% 20px 2%;
		width: 46%;
		float: left;
		/*border: 1px solid black;*/
	}
	.image-entry.gallery .profile img, .image-entry.gallery .album img, .image-entry.gallery .book img {
		border: 1px solid black;
	}
	.image-entry.gallery img {
		float:none;
	}
	.image-entry.gallery .text {
	}
	.image-entry.gallery .profile h1, 
	.image-entry.gallery .profile h2,
	.image-entry.gallery .profile p,	
	.image-entry.gallery .album h1, 
	.image-entry.gallery .album h2,
	.image-entry.gallery .album p,
	.image-entry.gallery .book h1, 
	.image-entry.gallery .book h2,
	.image-entry.gallery .book p {
	}
}



@media screen and (min-width: 900px) { /*em is relative to the browser default here? 16px usually*/


section.projects-links {
	margin: 0 0px 40px 0px!important; /*changed from global*/
	display: block; /*changed from global*/
}


.content-wrap {
	padding-top: 30px;  /* nav-wrap is position absolute: margin-top = nav-wrap_height */
}
.content {
	padding: 40px 60px;
}
.content.margin{
	margin: 0 3em;
}
.content.margin-top {
	margin: 0;
}
.work img.background { /* uses JS, for works*/
	display: block;
}
.work .content {
	margin: 80px 10px 30px 30px;
	background: rgba(255,255,255,0.87);
	width: 67%;
	padding: 10px;
	float: left;
}
.work .content.full-width {
	width: 98%!important;
	margin: 80px 10px 30px 10px!important;
	/*float: none!important;*/
}



.header-big {
	display: block;
}
.header-collapse {
	display: none;
}








.nav-wrap {
/*
  -moz-box-shadow:    3px 3px 15px 10px #ccc;
  -webkit-box-shadow: 3px 3px 15px 10px #ccc;
  box-shadow:         3px 3px 15px 10px #ccc;
*/	
  	height: 30px; /* IMPORTANT for content background positioning with JS */
  	position: absolute; /* don't push down the divs*/ 
  	left: 0;
  	width: 100%;
  	z-index: 200;
			
   	border-bottom: 1px solid black;
	border-top: 1px solid black;
}



.nav-collapse ul {
	list-style: none; /*list-style-type: none; ???*/
	margin: 0;
	padding: 0;
	/*width: 100%;*/
	display: block;
	float: none;
 
	width: 860px; /* changed from global --------- change for more li*/ 
	margin: 0 auto;
	
	/*border: 1px solid black; */ 
}

.nav-collapse li {
  	float: left; /* duplicate in global*/
  	width: auto; /* changed from global*/
		
	display: block;
	line-height: normal;
}
	/*
  .nav-collapse li {
    width: 25%; 
    *width: 24.9%;  
    _width: 19%;  
  }*/
.nav-collapse a {
	margin: 0;
  	padding: 5px 14.5px; /* 12.6 good for nav=810px - changed from global */
  	float: left;
  	text-align: center;
	border-bottom: none;  /* changed from global */
  	
	color: rgb(0,0,0);
  	display: inline-block;
  	text-decoration: none;  
}
  
.nav-collapse ul ul a {
	display: none;
}



.js .nav-collapse {
	position: relative; 
}
.js .nav-collapse.closed {
	max-height: none;
}
.nav-toggle {
	display: none;
}



.nav-collapse ul ul a {
  	background: #ca3716;
  	padding-left: 2em;
}

/*@media screen and (min-width: 1000px) { /*em is relative to the browser default here! 16px usually*/
.nav-collapse ul ul a {
	display: none;
}

.sticky-nav{
	top: 0!important;
	position: fixed!important;	/* override nav-wrap */
	background-color: rgb(255,255,255)!important; /* override nav-wrap */
	border-top: none!important;/* override nav-wrap */
  	height: 29px!important; /* override nav-wrap - correct border-top */
}







/*	
			.nav-wrap.fixed {
				position: fixed;
				top: 0;
				border-bottom: 1px solid black;
			}
			
			.nav-wrap.always-fixed {
				position: fixed;
				top: 0;
				border-bottom: 1px solid black;
			}*/
		
		/*nav { see nav-collapse
			width: 810px;
			margin: 0 auto;
			padding: 0;
			color: #063;
			letter-spacing: 0.075em;
			text-transform: uppercase;
		}
			
			nav ul {
				font-size: 15px;
				margin: 0;
				list-style-type: none;
			}*/
/*
			nav ul li {
				float: left;
				display: block;
				line-height: normal;
			}		*/	
/*
				nav ul li > ul {
					display: none;
				}*/
/*
				nav ul li a {
					border: solid 0px transparent;
					color: rgb(0,0,0);
					display: inline-block;
					padding: 6px 11px;
					text-decoration: none;
				}*/

/*				nav ul li .button {
					font-size: 1em;
					min-width: 0;
					width: auto;
				} */
/*
				nav ul li.submenu > a:before {
					-moz-osx-font-smoothing: grayscale;
					-webkit-font-smoothing: antialiased;
					font-family: FontAwesome;
					font-style: normal;
					font-weight: normal;
				}

				nav ul li.submenu > a:before {
					content: '\f107';
					margin-right: 0.65em;
				}*/
				



}