/* Reset */
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{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

/* Clearfix */
.clearfix:after {
	content: "";
	display: table;
	clear: both;
}


/*.post img+img {
	margin-top: -20px;
}*/

/* Base */
html,body {
	min-height: 100%;
}


body {
	font: 16px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #666666;
	font-size: 100%;
	font-family: helvetica neue, helvetica, sans-serif;
	font-weight: 400;
	margin: 0 auto;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	position: relative;
}

strong, b { font-weight: bold }
i { font-style: italic; font-weight: 500 !important; }

.center { text-align: center; }


#wrapper {
	max-width: 1200px;
	width: 80%;
	margin: 0 auto 2em;
	padding: 0 0 2em 0;
	-webkit-transition: width 0.3s ease-in-out;
	-moz-transition: width 0.3s ease-in-out;
	-o-transition: width 0.3s ease-in-out;
	-ms-transition: width 0.3s ease-in-out;
	transition: width 0.3s ease-in-out;
}

#wrapper.post {
	width: 90%;
	/*max-width: 1200px;*/
}
]

@media (max-width:30em) {
	 #wrapper { width: 94%; }
}

@media (max-width:40em){
	 #wrapper { width: 90%; }
}

@media (min-width: 40.1em) {
	#wrapper { width: 80%; max-width: 1200px; }
}


/*@media (max-width:47.9em) and (min-width: 37em) {
	#wrapper {}

}*/


/* Spacing */
.post p,.post ul {
	max-width: 760px;
	font-size: 1.1em;
	margin: 0 auto;
}

.post p {
	margin-bottom: 20px;
}

.post img {
	margin: 40px auto;
	position: relative;
	/*max-width: 800px;*/
	width: 100%;
}


/* images in new gallery style */
.img-gallery figcaption {
	display: none;
}
.img-gallery figure img {
	margin: 0;
}


.clear{
	clear: both;
}


/* header */

header{
	width: 100%;
	margin: 0 auto 0;
	font-size: 1em;
	color: #726d6d;
	padding: 2em 0;
}

header .logo {
	float: left;
	font-weight: 400;
	color: #444;
}
header .logo a { color: #444 !important; }

header .topnav {
	float: right;
}

header .topnav ul li {
	text-decoration: none;
	list-style: none;
	float: left;
	margin-right: 2em;
}

header .topnav ul li:last-child {
	margin-right:0;
}

header .topnav ul li a {
	color: #726d6d;
	font-size: 18px;
}

header .topnav ul li .selected { color: #444; } /* font-weight: 500; */

.work header .topnav ul li a.work,
.info header .topnav ul li a.info,
.projects header .topnav ul li a.projects {
	color: #202020;
}

header .topnav ul li a:hover {
	color: #202020;
}

@media (max-width:30em){
	header .logo { margin: 0 auto; float: none; display: block; margin-bottom: 1em; }
	header .topnav { margin: 0 auto; float: none; display:block; text-align: center;}
	header .topnav ul { text-align: center; display: block; }
}


img {
	max-width: 100%;
}

#thumbnails {
	margin: 0 auto 2em;
	text-align: center;
}

#thumbnails a.homepage-thumbs {
	/*width: 49%;*/
	float: left;
	position: relative;
	overflow: hidden;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover !important;
	background-repeat: no-repeat;
	display:block;
	height: 260px;
	width: 32.6666666666666667%;
	margin-right: 1%;
	margin-top: 1%;
}


#thumbnails a,#thumbnails a span {
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#thumbnails a img {
	display: block;
	background: #fff;
	width: 100%;
	height: auto;
}

#thumbnails a h2 {
	opacity: 0;
	color: #fff;
	position: absolute;
	text-align: left;
	bottom: 0;
	left: 0;
	width: 100%;
	font-size: 1.2em;
	font-weight: 400;
	padding: 1.5em 1em 1em;
	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,.6))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,.6) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* IE10+ */
	background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); /* W3C */
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
	bottom: -3em;
}

#thumbnails a:hover {
	opacity: .9;
}

#thumbnails a:hover h2 {
	opacity: 1;
	bottom: 0;
	visibility: visible;
}


/* Type */
/* Accent color */
a {
	color: #000;
	text-decoration: none;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;
}
a:hover	{
	cursor: pointer;
	text-decoration: none;
	color: #5694f1;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;

}

ul 	{ margin: 0; padding: 0; }
li	{ list-style-type: none; list-style-position: inside; }
ul.list-style-none li { list-style-type: none; }

ol { margin: 0; padding:0;}

ol li {
	list-style-type: none;
	padding-left: 5%;
}

/* Line Height */
.post-body,
p {
	line-height:1.7;
}

h1 {
	display: -block;
	line-height: 100%;
	color: #222;
	font-weight: 500;
	font-size: 19px;
	margin: 0;
	padding-bottom: 20px;
}

.post-body h2.inside {
	font-size:28px;
	font-weight: 500;
	color: #222;
	margin-top: 50px;
	margin-bottom: 10px;
	margin-left:40px;
	letter-spacing: 1%;
}

h3 {
	font-size: 13px;
	font-weight: bold;
	color: #fff;
	margin-bottom: 6px;
}

h4 {
	font-size: 13px;
	font-weight: bold;
	color: #666;
	margin-bottom: 6px;
}

.post-body ul.bullet li {
	list-style-type: disc;
	margin-left: 40px;
	margin-bottom: .5em;
	list-style-position: outside;
}


p.small {
	color: #bbb;
	font-size: 14px;
	line-height: 1.5;
	display: block;
}


hr {
	display: block;
  -webkit-margin-before: 0.5em;
  -webkit-margin-after: 0.5em;
  -webkit-margin-start: auto;
  -webkit-margin-end: auto;
  border-style: inset;
  border: 1px solid #eee;
}



/* Post Page */


.post {
	margin-bottom: 60px;
}

#post-meta {
	font-size: 13px;
	font-weight: bold;
	line-height: 1.4;
	margin-bottom: 2em;
	margin-top: 2em;
/*	border-top: 1px solid #eee; */
	color: #444;
}

#post-meta div {
	display: inline-block;
	width: 100%;
}

#post-meta div span {
	color: #aaa;
	font-weight:5 00;
	display: block;
	margin-bottom: 2px;
}

#post-meta div.date {
	float: right;
	text-align: right;
	position: relative;
	top: 1px;
	font: 300 20px/1.8 "Helvetica Neue",helvetica,Arial,sans-serif;
	color: #aaa;
}

#sharing {
	float: right;
	margin: -2px;
}

#sharing a {
	font-size: 23px;
	margin-left: 2px;
	margin-top: 4px;
	color: #d4d4d4;
	display: inline-block;
	vertical-align: middle;
}

#sharing a:hover {
	color: #444;
}

/* Post Navigation */
#post-nav {
  border-top: 1px solid #eee;
	text-align: center;
	padding-top: 3%;
	font-size: 100%;
	font-weight: 500;
}

#post-nav a {
	text-decoration: none;
	color: #5694f1;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}

#post-nav span {
	-webkit-transition: all 0.1s linear;
	-moz-transition: all 0.1s linear;
	-ms-transition: all 0.1s linear;
	-o-transition: all 0.1s linear;
	transition: all 0.1s linear;
	position: relative;
}

#post-nav span.prev {
	float: left;
}

#post-nav span.next {
	float: right;
}

#post-nav span .arrow {
	position: relative;
	padding: 1px;
}

#post-nav span.prev:hover .arrow {
	left: -4px;
}

#post-nav span.next:hover .arrow {
	right: -4px;
}

#post-nav span.prev:hover {
	left: -3px;
}

#post-nav span.next:hover {
	right: -3px;
}



/* bottom nav */

#nav {
	color: #333;
	margin: 2% auto 2em;
}

#nav .nav-column {
	float: left;
	background-color: #fafafa;
	width: 32.6666666667%;
	margin: 1% 1% 0 0;
	padding: 1em;
	/*min-height: 21em; i still use this but have it inside a min-width media query so i can turn it off for 1-column*/

}


#nav .nav-list {
	padding: 1em;
	min-height: 15em;

}


#nav .nav-column ul li {
	text-decoration: none;
	list-style: none;
	font-weight: normal;
	line-height: 1.4;
	/* margin-bottom: 0.3em; */
	font-size: 0.95rem;
	/* font-size: 115%; */
}



#nav .nav-column ul li a, a:visited {
	text-decoration: none;
	color: #333;
	cursor: pointer !important;
	display: block;
	padding: .15em 0em;
}


#nav .nav-column ul li a:hover {
	text-decoration: none;
	color: #5694f1;
}

#nav .nav-column ul li.selected a {
	text-decoration: none;
	color: #5694f1 !important;
}


#nav .nav-column ul .li-title{
	font-weight: 700;
	letter-spacing: .05em;
	margin-bottom: .25em;
}

footer .left-nav { float: left; }
footer .left-nav ul li {
	text-decoration: none;
	list-style: none;
	display: block;
	float: left;
	margin-right: 2em;
}
footer .left-nav ul li a:hover{ color: #5694f1; }
footer .left-nav ul li:last-child { margin-right: 0;}
footer .right-nav {
	float: right;
	font-size: 0.9em;
	color: #777;
}

/* this block is the actual real working breakpoints */

/* BREAKPOINT: thumbnails getting squished, increase width of site wrapper */
@media screen and (max-width: 74em) {
	/*#wrapper { border-top: 4px solid cyan; } // so you can tell which breakpoint is active */
	#wrapper {
		width: 90%;
	}
	#thumbnails a.homepage-thumbs {
		height: 250px;
	}
}

/* BREAKPOINT: go from 3 col to 2 col */
@media screen and (max-width: 54em) {
/*	#wrapper { border-top: 4px solid blue; } */
	#wrapper {
		width: 92%;
	}
	#thumbnails a.homepage-thumbs {
		width: 49%; // 2 cols
		margin-right: 2%;
		margin-top: 1%;
	}
	#thumbnails a:nth-child(1), #thumbnails a:nth-child(2) {
		margin-top: 0;
	}
	#thumbnails a:nth-child(2n) {
		margin-right: 0;
	}
	#nav .nav-column {
		width: 49%;
	}
	#nav .nav-column:nth-child(even){
		margin-right: 0;
	}
}

@media (min-width: 54.01em) {
	/*only use when wide enough for 3 column, past 54em*/
	#thumbnails a:nth-child(3n) {
		margin-right: 0;
	}
	#nav .nav-column:nth-child(3n){
		margin-right: 0;
	}
}

@media (min-width: 28.01em) {
	#wrapper #nav .nav-column {
		min-height: 21em;
	}
}

/* BREAKPOINT: go from 2 col to 1 col */
@media screen and (max-width: 32em) {
/*	#wrapper { border-top: 4px solid green; } */
	#wrapper {
		width: 94%;
	}
	#thumbnails a.homepage-thumbs {
		width: 100%;
		height: 250px;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 2%;
	}
}

/* BREAKPOINT: go from 2 col to 1 col FOR FOOTER. since it can go narrower  */
@media screen and (max-width: 28em) {
	#wrapper #nav .nav-column {
		width: 100%;
		float: none;
		margin: 0 0 2% 0;
	}

	#wrapper footer.post-footer .left-nav, #wrapper footer.post-footer .right-nav {
		float: none;
	}
	#wrapper footer.post-footer .right-nav {
		margin-top: 1em;
	}

}



/* all my old breakpoints that aren't being used because the above ones actually work:

/* me trying to make this responsive maybe need to add back.
@media (min-width:50.1em) {
	#thumbnails a.homepage-thumbs:nth-child(3n) {
		margin-right: 0;
	}
}

@media (max-width:50em) and (min-width: 30.1em) {
	#thumbnails a.homepage-thumbs:nth-child(even) {
		margin-right: 0;
	}
}

@media (max-width:30em){
	#thumbnails a.homepage-thumbs {
		margin-right: 0;
	}
}
*/

/* turn off for now, maybe add back if you can't find it elsewhere

@media (min-width: 60em) {

	#nav .nav-column:nth-child(3n){
		margin-right: 0;
	}
}

@media (max-width: 60em) {

	#nav .nav-column {
		width: 49%;
	}
	#nav .nav-column:nth-child(even){
		margin-right: 0;
	}
}

@media (max-width:30em){

	#nav .nav-column {
		width: 100%;
	}
	#nav .nav-column:nth-child(even){
		margin-right: 0;
	}
}
*/

/* moved somewhere else maybe re-comment if you don't find it

@media screen and (max-width: 540px) {
	#wrapper { padding: 20px 40px; }
	#header { margin-bottom: 40px; }
	h1 { font-size: 17px; }
	#footer { margin-top: 40px; padding-bottom: 20px; }
}

@media screen and (max-width:440px) {
	#thumbnails a:nth-child(n) {
		width: 100%;
		max-width: 300px;
		margin: 0 auto;
		margin-top: 20px;
		display: inline-block;
		float: none;
	}

	a#docs { display: none; }
	#thumbnails a:first-child { margin-top: 0; }
	#header { text-align: center; margin-bottom: 0; }
	#wrapper { padding: 20px 20px 40px 20px; }
	.post { margin-bottom: 40px; }
	#footer { text-align: center; padding-bottom: 15px; }
}

end of nonfunctioning breakpoints
*/





/* footer moved higher up. */



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

.clearfix:after {
    clear: both;
}

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


/* page content */


article.post {
	width: 100%;
	margin: 0 auto 3em;
}

article.post .grid {
	width: 32.5%;
	float: left;
	margin: 0 0.5em 0.5em 0;
	height: 5em;
	display: block;
	overflow: hidden;
}

article.post .grid img {
	width: 100%;
	float: left;
	margin: 0 0.5em 0.5em 0;
	min-height: 100%;

}

@media (min-width:50.1em) {
	article.post .grid:nth-child(3n) {
		margin-right:0;
	}
}

@media (max-width:50em) and (min-width: 30.1em) {
	article.post .grid {
	  width: 48%;
	 }
	 article.post .grid:nth-child(even){
	 	margin-right: 0;
	 }
}

@media (max-width:30em){
	article.post .grid {
	  width: 100%;
	  margin-bottom: 1em;
	  margin-right: 0;
	 }
}






/* PROJECTS PAGE - blogs */

.post-body .project-item {
	margin-bottom: 3em;
}
.post-body .project-item:last-child {
	margin-bottom: 0;
}

.post-body .proj-img {
width: auto;
	margin: 0;
}


@media (min-width:50.01em) {
	.proj-img {
	width: 56% !important;
	margin: 0 0 2% 0;
	float: left;
	}

	.proj-text {
		width: 39% !important;
		float: left;
	  margin: 1% 0 2% 4%;
/*		border-top: 2px cyan solid; */
	}
}

.proj-text p {
	font-size: 100%;
	line-height: 1.6;
	margin-bottom: .8em;
}


.proj-text h1 {
	text-transform: uppercase;
	letter-spacing: 0.03em;
	line-height: 1;
	font-size: 140%;
	color: rgb(102, 102, 102);
	font-weight: 400;
}

.proj-text h3 {
	font-size: 120%;
	margin-bottom: 0.5em;
	letter-spacing: .03em;
	font-weight: 400;
}
.proj-text h3 a { color: #444; }
.proj-text h3 a:hover {color: #5694f1; }

.proj-text img:hover {
		opacity: 0.5;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		-ms-transition: all 0.2s ease;
		-o-transition: all 0.2s ease;
		transition: all 0.2s ease;
	}

/*
.icon {
	width: 6.5%;
	float: left;
	margin: 0 3% 0 0;
}*/

.proj-text .caption {
	font-size: 80%;
	color: #999;
}

.proj-text .caption a{
	color: #999;
}

.proj-text .caption a:hover{
	color: #666;
}


@media (max-width:50em) and (min-width: 37em) {

	.proj-img {
		width: 100% !important;
		margin: 0;
		float: left
	}

	.proj-text {
		width: 80%;
		float: left;
		margin: 5% auto;
	/*	border-top: 2px green solid; */
	}
}

@media (max-width:36.9em){

	.proj-img {
		width:100%;
		margin: 0 auto;
		float: left;
	}

	.proj-text{
		width: 100%;
		margin: 7% auto 0.2em;
		float: left;
		border-bottom: 1px #e1e1e1 solid;
	/*	border-top: 2px red solid; */
	}

	.icon {
		width: 5%;
		float: left;
		margin: 0 3% 0 0;
	}

	.proj-text .caption{
		margin-bottom: 5%;
	}

}


/* INFO PAGE - bio */


.post img.portrait {
	width: auto;
	margin: 0;
}


.bio p {
	line-height: 1.6;
	margin-bottom: 1em;
}


.bio h1 {
	color: #666;
	font-weight: 500;
	font-size: 100%;
	margin: 0;
	padding-bottom: 20px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.bio strong, .bio b { font-weight: bold; color: #000; }



span.larger {
	font-size: 1.2em;
}

.connect-list {
	margin: 7% 0 7% 0;
}

.connect-list table {
	display: block;
	float:left;
}

.connect-list img:hover {
	opacity: 0.5;
	cursor: pointer !important;
	-webkit-transition: all 0.2s ease;
	-moz-transition: all 0.2s ease;
	-ms-transition: all 0.2s ease;
	-o-transition: all 0.2s ease;
	transition: all 0.2s ease;
}


.ico-cnct {
	width: 2em !important;
	margin: 0 0.75em -.3em 0 !important;
}

.ico-proj {
	width: 1.1em !important;
	margin: 2% 1% 0 0 !important;
}

.column-text {
	font-size: 82%;
}

.column-text table {
	display: block;
	float: left;
	width: 100%;
}

.column-text td {
  width: 50%;
	padding: 0 5% 4% 0;
}

.column-text td:last-child {
	padding-right: 0;
	padding-left: 5%;
}

span.bio-caption {
	font-size: 65%;
	color: #999;
	margin-top: 5%;
	margin-bottom: 2%;
}



/*
.ico-proj:hover {

	opacity: 0.5;
	}

*/

@media (min-width:60.01em) {
	.portrait {
		width: 46% !important;
		margin: 0 0 2% 2%;
		float: right;
	}

	.bio {
		width: 48% !important;
		float: left;
		margin: 0 2% 5% 0;
		/* border-top: solid 2px cyan; */
	}
}

@media (max-width:60em) and (min-width: 40.01em) {

	.portrait {
		width: 48% !important;
		margin: 0 0 2% 1%;
		float: right;
	}

	.bio {
		width: 48%;
		float: left;
		margin: 0 1% 5% 0;
	/*	border-top: solid 2px red; */
	}

}


@media (max-width:40em){
	.portrait {
		width: 100% !important;
		margin: 0 auto 2%;
		float: right;
	}

	.bio {
		width: 90%;
		float: left;
		margin: 0 auto 5%;
	/*	border-top: solid 2px blue; */
	}
}


/* WORK-PROJECT PAGES - portfolio project stories, posts */
a:hover	{
	cursor: pointer;
	text-decoration: none;
	color: #5694f1;
	-webkit-transition: all 0.1s ease;
	-moz-transition: all 0.1s ease;
	-ms-transition: all 0.1s ease;
	-o-transition: all 0.1s ease;
	transition: all 0.1s ease;

}

@media (min-width:63em) {

	.row {
	  width: 100%;
		clear: both;
	}

	/* text styles */

	.tfull {
   	width: 70%;
		margin: 0 auto 5%;
		line-height: 1.6;
		padding-top: 1em;
	}

	.tlhalf {
		width: 40%;
		margin: 4% 0 0 4%;
		float: left;
		line-height: 1.6;
	}

	.trhalf {
		width: 40%;
		margin: 4% 4% 0 0;
		float: right;
		line-height: 1.6;
	}

	.tlhalf h1,
	.trhalf h1,
	.tfull h1 {
		text-transform: uppercase;
		letter-spacing: 0.03em;
		font-size: 140%;
		margin-bottom: 1em;
		color: rgb(102, 102, 102);
	}

	/* image styles */

	img.full {
		width: 100%;
		margin: 0 auto 2%;
		float: left;
	}

	img.lhalf {
		width: 49.25%;
		margin: 0 0.25% 2% 0;
		float: left;
	}

	img.rhalf {
		width: 49.25%;
		margin: 0 0 2% 0.25%;
		float: right;
	}

	img.lthird {
		width: 33%;
		margin: 0 0.25% 2% 0;
		float: left;
	}

	img.mthird {
		width: 33%;
		margin: 0 0.25% 2% 0.25%;
		float: left;
	}

	img.rthird {
		width: 33%;
		margin: 0 0 2% 0.25%;
		float: right;

	}

	img.r2thirds {
		width: 66%;
		margin: 0 0 2% 0.25%;
		float: right;
	}

	img.l2thirds {
		width: 66%;
		margin: 0 0.25% 2% 0;
		float: left;

	}



}

@media (max-width:63em) and (min-width: 48em) {

	.row {
		width: 100%;
		clear: both;
	}

	/* text styles */

	.tfull {
		width: 80%;
		margin: 0 auto 5%;
		line-height: 1.6;
		/*text-align: center;*/
		font-size: 83%;
		clear: both;
		padding-top: 1em;
	}


	.tlhalf {
		width: 40%;
		margin: 4% 0 0 4%;
		float: left;
		line-height: 1.6;
		font-size: 83%;
	}

	.trhalf {
		width: 40%;
		margin: 4% 4% 0 0;
		float: right;
		line-height: 1.6;
		font-size: 83%;
	}

	.tlhalf h1,
	.tlrhalf h1,
	.tfull h1 {
		text-transform: uppercase;
		letter-spacing: 0.03em;
		font-size: 135%;
		margin-bottom: 1em;
	}


	/* image styles */

	img.full {
		width: 100%;
		margin: 0 auto 2%;
		float: left;
	}

	img.lhalf {
		width: 49.25%;
		margin: 0 0.25% 2% 0;
		float: left;
	}

	img.rhalf {
		width: 49.25%;
		margin: 0 0 2% 0.25%;
		float: right;
	}

	img.lthird {
		width: 33%;
		margin: 0 0.25% 2% 0;
		float: left;
	}

	img.mthird {
		width: 33%;
		margin: 0 0.25% 2% 0.25%;
		float: left;
	}

	img.rthird {
		width: 33%;
		margin: 0 0 2% 0.25%;
		float: right;

	}

	img.r2thirds {
		width: 66%;
		margin: 0 0 2% 0.25%;
		float: right;
	}

	img.l2thirds {
		width: 66%;
		margin: 0 0.25% 2% 0;
		float: left;

	}


}

@media (max-width:48em){


	.row {
		width: 100%;
		clear: both;
	}

	/* text styles */

	.tfull {
		width: 100%;
		margin: 0 auto 2em;
		line-height: 1.6;
		font-size: 100%;
		padding-top: 1em;
	}

	.tlhalf {
		width: 100%;
		margin: 0 auto 2em;
		line-height: 1.6;
		font-size: 100%;
		padding-top: 1em;
	}

	.trhalf {
		width: 100%;
		margin: 0 auto 2em;
		line-height: 1.6;
		font-size: 100%;
		padding-top: 1em;
	}

	.tlhalf h1,
	.tlrhalf h1,
	.tfull h1 {
		text-transform: uppercase;
		letter-spacing: 0.03em;
		font-size: 135%;
		margin-bottom: 1em;
		text-align: center;
	}


	/* image styles */

	img.full {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.lhalf {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.rhalf {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.lthird {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.mthird {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.rthird {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.r2thirds {
		width: 100%;
		margin: 0 auto 2%;
	}

	img.l2thirds {
		width: 100%;
		margin: 0 auto 2%;

	}

}

/* INFO PAGE - bio */

@media (min-width:48em) {
	.portrait {
		width: 50%;
		margin: 0 auto 2%;
		float: right;
	}

	.bio {
		width: 46%;
		float: left;
		margin: 0 auto 5%;
	}
}
/*
.bio p {
	font-size: 97%;
	line-height: 1.6;
	margin-bottom: 1em;
}
*/

.more-top-bottom-margin {
	margin-top: 1em;
	margin-bottom: 3em;
}

/* ****************** GALLERY CSS  ******************** */
.gallery-mobile {
	width: 78%;
	margin: 0 auto;
	margin-bottom: 3em;
}
.gallery-mobile .gallery {
	float: left;
	max-width: 400px;
}
.gallery-mobile .gallery .item img {
	width: 100%;
	margin: 0;
	/* max-width: 320px;*/
}
.gallery-mobile .trhalf {
	float: left;
	margin-right: 0;
	margin-left: 6.5%;
	margin-top: 1%;
	width: 47.5%;
}

.gallery-mobile .gallery-right {
	float: right;
}

.gallery-mobile .tlhalf {
	float: right;
	width: 47.5%;
	margin-left: 0;
	margin-right: 6.5%;
	margin-top: 1%;
}


@media screen and (max-width: 78.5em) {
	.gallery-mobile {
		width: 90%;
	}
}

@media screen and (max-width: 68em) {
	.gallery-mobile .trhalf {
		margin-left: 2em;
		margin-right: 0;
	}
	.gallery-mobile .tlhalf {
		margin-right: 2em;
		margin-left: 0;
	}
}

@media screen and (max-width: 65em) {
	.gallery-mobile .gallery .item img {
		width: 90%;
	}
	.gallery-mobile .trhalf {
		margin-left: 3%;
		margin-right: 0;
		width: 40%;
	}
	.gallery-mobile .tlhalf {
		margin-right: 3%;
		margin-left: 0;
		width: 40%;
	}
}
@media screen and (max-width: 56em) {
	.gallery-mobile {
		width: 90%;
		margin: 0 auto;
		margin-bottom: 3em;
	}
	.gallery-mobile .gallery {
		width: 50%;
	}
	.gallery-mobile .trhalf {
		margin-left: 4%;
		margin-right: 0;
		width: 40%;
	}
	.gallery-mobile .tlhalf {
		margin-right: 4%;
		margin-left: 0;
		width: 40%;
	}
}

@media screen and (max-width: 50em) {
	.gallery-mobile .gallery {
		float: none;
		margin: 0 auto;
		width: 100%;
		max-width: 400px;
	}
	.gallery-mobile .trhalf, .gallery-mobile .tlhalf{
		margin: 1em auto;
		width: 100%;
		float: none;
		display: block;
	}
}

.gallery .control-operator:target ~ .controls .control-button {
/*  color: #ccc;
  color: rgba(204, 204, 255, 0.4); */
	color: #BD10E0;
	color: rgba(189, 16, 224, 0.4);
}

.gallery .control-button:first-of-type,
.gallery .control-operator:nth-of-type(1):target ~ .controls .control-button:nth-of-type(1),
.gallery .control-operator:nth-of-type(2):target ~ .controls .control-button:nth-of-type(2),
.gallery .control-operator:nth-of-type(3):target ~ .controls .control-button:nth-of-type(3),
.gallery .control-operator:nth-of-type(4):target ~ .controls .control-button:nth-of-type(4),
.gallery .control-operator:nth-of-type(5):target ~ .controls .control-button:nth-of-type(5),
.gallery .control-operator:nth-of-type(6):target ~ .controls .control-button:nth-of-type(6),
.gallery .control-operator:nth-of-type(7):target ~ .controls .control-button:nth-of-type(7),
.gallery .control-operator:nth-of-type(8):target ~ .controls .control-button:nth-of-type(8) {
  /* color: white;
  color: rgba(255, 255, 255, 0.8); */
	color: #BD10E0;
	color: rgba(189, 16, 224, 0.8);

}

.gallery .item:first-of-type {
  position: static;
  pointer-events: auto;
  opacity: 1;
}

.gallery .item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity .5s;
  -o-transition: opacity .5s;
  transition: opacity .5s;
}

.gallery .control-operator {
  display: none;
}

.gallery .control-operator:target ~ .item {
  pointer-events: none;
  opacity: 0;
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
}

.gallery .control-operator:target ~ .controls .control-button {
  -webkit-animation: none;
  -o-animation: none;
  animation: none;
}

/* two items */

@-webkit-keyframes controlAnimation-2 {
  0% {
  /*  color: #ccc;
    color: rgba(255, 255, 255, 0.4); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.4);
  }

  14.3%, 50% {
  /*  color: white;
    color: rgba(255, 255, 255, 0.8); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.8);
  }

  64.3%, 100% {
  /*  color: #ccc;
    color: rgba(255, 255, 255, 0.4); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.4);
  }
}

@-o-keyframes controlAnimation-2 {
  0% {
  /*  color: #ccc;
    color: rgba(255, 255, 255, 0.4); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.4);
  }

	14.3%, 50% {
	/*  color: white;
		color: rgba(255, 255, 255, 0.8); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.8);
	}

	64.3%, 100% {
	/*  color: #ccc;
		color: rgba(255, 255, 255, 0.4); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.4);
	}
}

@keyframes controlAnimation-2 {
  0% {
  /*  color: #ccc;
    color: rgba(255, 255, 255, 0.4); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.4);
  }

  14.3%, 50% {
  /*  color: white;
    color: rgba(255, 255, 255, 0.8); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.8);
  }

  64.3%, 100% {
  /*  color: #ccc;
    color: rgba(255, 255, 255, 0.4); */
		color: #BD10E0;
		color: rgba(189, 16, 224, 0.4);
  }
}

@-webkit-keyframes galleryAnimation-2 {
  0% {
    opacity: 0;
  }

  14.3%, 50% {
    opacity: 1;
  }

  64.3%, 100% {
    opacity: 0;
  }
}

@-o-keyframes galleryAnimation-2 {
  0% {
    opacity: 0;
  }

  14.3%, 50% {
    opacity: 1;
  }

  64.3%, 100% {
    opacity: 0;
  }
}

@keyframes galleryAnimation-2 {
  0% {
    opacity: 0;
  }

  14.3%, 50% {
    opacity: 1;
  }

  64.3%, 100% {
    opacity: 0;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  pointer-events: auto;
  opacity: 1;
}

.items-2.autoplay .control-button {
  -webkit-animation: controlAnimation-2 8s infinite;
  -o-animation: controlAnimation-2 8s infinite;
  animation: controlAnimation-2 8s infinite;
}

.items-2.autoplay .item {
  -webkit-animation: galleryAnimation-2 8s infinite;
  -o-animation: galleryAnimation-2 8s infinite;
  animation: galleryAnimation-2 8s infinite;
}

.items-2 .control-button:nth-of-type(1),
.items-2 .item:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.items-2 .control-button:nth-of-type(2),
.items-2 .item:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

/* three items */

@-webkit-keyframes controlAnimation-3 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  9.5%, 33.3% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  42.9%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-o-keyframes controlAnimation-3 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  9.5%, 33.3% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  42.9%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@keyframes controlAnimation-3 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  9.5%, 33.3% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  42.9%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-webkit-keyframes galleryAnimation-3 {
  0% {
    opacity: 0;
  }

  9.5%, 33.3% {
    opacity: 1;
  }

  42.9%, 100% {
    opacity: 0;
  }
}

@-o-keyframes galleryAnimation-3 {
  0% {
    opacity: 0;
  }

  9.5%, 33.3% {
    opacity: 1;
  }

  42.9%, 100% {
    opacity: 0;
  }
}

@keyframes galleryAnimation-3 {
  0% {
    opacity: 0;
  }

  9.5%, 33.3% {
    opacity: 1;
  }

  42.9%, 100% {
    opacity: 0;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  pointer-events: auto;
  opacity: 1;
}

.items-3.autoplay .control-button {
  -webkit-animation: controlAnimation-3 12s infinite;
  -o-animation: controlAnimation-3 12s infinite;
  animation: controlAnimation-3 12s infinite;
}

.items-3.autoplay .item {
  -webkit-animation: galleryAnimation-3 12s infinite;
  -o-animation: galleryAnimation-3 12s infinite;
  animation: galleryAnimation-3 12s infinite;
}

.items-3 .control-button:nth-of-type(1),
.items-3 .item:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.items-3 .control-button:nth-of-type(2),
.items-3 .item:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.items-3 .control-button:nth-of-type(3),
.items-3 .item:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

/* four items */


@-webkit-keyframes controlAnimation-4 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-o-keyframes controlAnimation-4 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@keyframes controlAnimation-4 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-webkit-keyframes galleryAnimation-4 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

@-o-keyframes galleryAnimation-4 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

@keyframes galleryAnimation-4 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
  pointer-events: auto;
  opacity: 1;
}

.items-4.autoplay .control-button {
  -webkit-animation: controlAnimation-4 16s infinite;
  -o-animation: controlAnimation-4 16s infinite;
  animation: controlAnimation-4 16s infinite;
}

.items-4.autoplay .item {
  -webkit-animation: galleryAnimation-4 16s infinite;
  -o-animation: galleryAnimation-4 16s infinite;
  animation: galleryAnimation-4 16s infinite;
}

.items-4 .control-button:nth-of-type(1),
.items-4 .item:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.items-4 .control-button:nth-of-type(2),
.items-4 .item:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.items-4 .control-button:nth-of-type(3),
.items-4 .item:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.items-4 .control-button:nth-of-type(4),
.items-4 .item:nth-of-type(4) {
  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

/* five items */

@-webkit-keyframes controlAnimation-5 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  5.7%, 20% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  25.7%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-o-keyframes controlAnimation-5 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  5.7%, 20% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  25.7%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@keyframes controlAnimation-5 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  5.7%, 20% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  25.7%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-webkit-keyframes galleryAnimation-5 {
  0% {
    opacity: 0;
  }

  5.7%, 20% {
    opacity: 1;
  }

  25.7%, 100% {
    opacity: 0;
  }
}

@-o-keyframes galleryAnimation-5 {
  0% {
    opacity: 0;
  }

  5.7%, 20% {
    opacity: 1;
  }

  25.7%, 100% {
    opacity: 0;
  }
}

@keyframes galleryAnimation-5 {
  0% {
    opacity: 0;
  }

  5.7%, 20% {
    opacity: 1;
  }

  25.7%, 100% {
    opacity: 0;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
  pointer-events: auto;
  opacity: 1;
}

.items-5.autoplay .control-button {
  -webkit-animation: controlAnimation-5 20s infinite;
  -o-animation: controlAnimation-5 20s infinite;
  animation: controlAnimation-5 20s infinite;
}

.items-5.autoplay .item {
  -webkit-animation: galleryAnimation-5 20s infinite;
  -o-animation: galleryAnimation-5 20s infinite;
  animation: galleryAnimation-5 20s infinite;
}

.items-5 .control-button:nth-of-type(1),
.items-5 .item:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.items-5 .control-button:nth-of-type(2),
.items-5 .item:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.items-5 .control-button:nth-of-type(3),
.items-5 .item:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.items-5 .control-button:nth-of-type(4),
.items-5 .item:nth-of-type(4) {
  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.items-5 .control-button:nth-of-type(5),
.items-5 .item:nth-of-type(5) {
  -webkit-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

/* six items */


@-webkit-keyframes controlAnimation-6 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-o-keyframes controlAnimation-6 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@keyframes controlAnimation-6 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-webkit-keyframes galleryAnimation-6 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

@-o-keyframes galleryAnimation-6 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

@keyframes galleryAnimation-6 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(6):target ~ .item:nth-of-type(6) {
  pointer-events: auto;
  opacity: 1;
}

.items-6.autoplay .control-button {
  -webkit-animation: controlAnimation-4 24s infinite;
  -o-animation: controlAnimation-4 24s infinite;
  animation: controlAnimation-4 24s infinite;
}

.items-6.autoplay .item {
  -webkit-animation: galleryAnimation-4 24s infinite;
  -o-animation: galleryAnimation-4 24s infinite;
  animation: galleryAnimation-4 24s infinite;
}

.items-6 .control-button:nth-of-type(1),
.items-6 .item:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.items-6 .control-button:nth-of-type(2),
.items-6 .item:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.items-6 .control-button:nth-of-type(3),
.items-6 .item:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.items-6 .control-button:nth-of-type(4),
.items-6 .item:nth-of-type(4) {
  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.items-6 .control-button:nth-of-type(5),
.items-6 .item:nth-of-type(5) {
  -webkit-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

.items-6 .control-button:nth-of-type(6),
.items-6 .item:nth-of-type(6) {
  -webkit-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}


/* seven items */


@-webkit-keyframes controlAnimation-7 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-o-keyframes controlAnimation-7 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@keyframes controlAnimation-7 {
  0% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }

  7.1%, 25% {
    color: white;
    color: rgba(255, 255, 255, 0.8);
  }

  32.1%, 100% {
    color: #ccc;
    color: rgba(255, 255, 255, 0.4);
  }
}

@-webkit-keyframes galleryAnimation-7 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

@-o-keyframes galleryAnimation-7 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

@keyframes galleryAnimation-7 {
  0% {
    opacity: 0;
  }

  7.1%, 25% {
    opacity: 1;
  }

  32.1%, 100% {
    opacity: 0;
  }
}

.gallery .control-operator:nth-of-type(1):target ~ .item:nth-of-type(1) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(2):target ~ .item:nth-of-type(2) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(3):target ~ .item:nth-of-type(3) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(4):target ~ .item:nth-of-type(4) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(5):target ~ .item:nth-of-type(5) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(6):target ~ .item:nth-of-type(6) {
  pointer-events: auto;
  opacity: 1;
}

.gallery .control-operator:nth-of-type(7):target ~ .item:nth-of-type(7) {
  pointer-events: auto;
  opacity: 1;
}

.items-7.autoplay .control-button {
  -webkit-animation: controlAnimation-4 28s infinite;
  -o-animation: controlAnimation-4 28s infinite;
  animation: controlAnimation-4 28s infinite;
}

.items-7.autoplay .item {
  -webkit-animation: galleryAnimation-4 28s infinite;
  -o-animation: galleryAnimation-4 28s infinite;
  animation: galleryAnimation-4 28s infinite;
}

.items-7 .control-button:nth-of-type(1),
.items-7 .item:nth-of-type(1) {
  -webkit-animation-delay: 0s;
  -o-animation-delay: 0s;
  animation-delay: 0s;
}

.items-7 .control-button:nth-of-type(2),
.items-7 .item:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}

.items-7 .control-button:nth-of-type(3),
.items-7 .item:nth-of-type(3) {
  -webkit-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

.items-7 .control-button:nth-of-type(4),
.items-7 .item:nth-of-type(4) {
  -webkit-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

.items-7 .control-button:nth-of-type(5),
.items-7 .item:nth-of-type(5) {
  -webkit-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}

.items-7 .control-button:nth-of-type(6),
.items-7 .item:nth-of-type(6) {
  -webkit-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}


.items-7 .control-button:nth-of-type(7),
.items-7 .item:nth-of-type(7) {
  -webkit-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}

/* end */




.gallery .control-button {
/*  color: #ccc;
  color: rgba(255, 255, 255, 0.4); */
	color: #BD10E0;
	color: rgba(189, 16, 224, 0.4);
}

.gallery .control-button:hover {
  /* color: white;
  color: rgba(255, 255, 255, 0.8); */
	color: #BD10E0;
	color: rgba(189, 16, 224, 0.8);
}






/*
	Theme controls how everything looks in Gallery CSS.
*/

.gallery {
  position: relative;
	margin-bottom: 1%;
}

.gallery .item {
  height: 100%;
	margin: 0;
  overflow: hidden;
  /*text-align: center;*/
  /* background: #4d87e2; */
}

.gallery .controls {
  /*position: absolute;*/
  /*bottom: 0; */
  width: 100%;
  text-align: center;
}

.gallery .control-button {
  display: inline-block;
  margin: 0em auto 0em;
	color: #000000;
	line-height: 0.8;
  font-size: 2.8em;
  text-align: center;
  text-decoration: none;
  -webkit-transition: color .1s;
  -o-transition: color .1s;
  transition: color .1s;
}




/* photoset CSS */
/* General photoset style */
.photoset {
	overflow: hidden;
	width: 100%;
	margin-bottom:20px;
}
.photoset .photoset-row {
	margin-bottom: .5rem;
	overflow: hidden;
  width: 150%;
}
.photoset .photoset-row:last-child { margin: 0; }
.photoset .photoset-item {
	display: block;
	float: left;
	margin: 0 .25rem;
}
.photoset .photoset-item:first-child { margin-left: 0; }
.photoset .photoset-item:last-child  { margin-right: 0; }
.photoset figure {
	margin: 0;
	overflow: hidden;
	position: relative;
  -webkit-backface-visibility: hidden; /* To fix webkit 1px rendering bug */
}

/* This commented out CSS enables on-hover captions inside the photoset */
.photoset figcaption {
	display: none;
	/*background-color: rgba(255, 255, 255, .75);
	box-sizing: border-box;
  font-size: .75rem;
	padding: .5rem;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
	transition: all .5s ease-in-out;*/
}
.photoset-item a {
  border: 0;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}
.photoset .photoset-item:hover a + figcaption {
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.photoset img {
	display: block;
  max-width: 100%;
	transition: all .25s ease-in-out;
	margin: 0 !important;
}



/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
/*
	Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
*/
/* pswp = photoswipe */
.pswp {
  display: none;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
  z-index: 1500;
  -webkit-text-size-adjust: 100%;
  /* create separate layer, to avoid paint on window.onscroll in webkit/blink */
  -webkit-backface-visibility: hidden;
  outline: none; }
  .pswp * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box; }
  .pswp img {
    max-width: none; }

/* style is added when JS option showHideOpacity is set to true */
.pswp--animate_opacity {
  /* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
  opacity: 0.001;
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--open {
  display: block; }

.pswp--zoom-allowed .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-zoom-in;
  cursor: -moz-zoom-in;
  cursor: zoom-in; }

.pswp--zoomed-in .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab; }

.pswp--dragging .pswp__img {
  /* autoprefixer: off */
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing; }

/*
	Background is added as a separate element.
	As animating opacity is much faster than animating rgba() background-color.
*/
.pswp__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  will-change: opacity; }

.pswp__scroll-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; }

.pswp__container,
.pswp__zoom-wrap {
  -ms-touch-action: none;
  touch-action: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0; }

/* Prevent selection and tap highlights */
.pswp__container,
.pswp__img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
      user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; }

.pswp__zoom-wrap {
  position: absolute;
  width: 100%;
  -webkit-transform-origin: left top;
  -ms-transform-origin: left top;
  transform-origin: left top;
  /* for open/close transition */
  -webkit-transition: -webkit-transform 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp__bg {
  will-change: opacity;
  /* for open/close transition */
  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

.pswp--animated-in .pswp__bg,
.pswp--animated-in .pswp__zoom-wrap {
  -webkit-transition: none;
  transition: none; }

.pswp__container,
.pswp__zoom-wrap {
  -webkit-backface-visibility: hidden; }

.pswp__item {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden; }

.pswp__img {
  position: absolute;
  width: auto;
  height: auto;
  top: 0;
  left: 0; }

/*
	stretched thumbnail or div placeholder element (see below)
	style is added to avoid flickering in webkit/blink when layers overlap
*/
.pswp__img--placeholder {
  -webkit-backface-visibility: hidden; }

/*
	div element that matches size of large image
	large image loads on top of it
*/
.pswp__img--placeholder--blank {
  background: #222; }

.pswp--ie .pswp__img {
  width: 100% !important;
  height: auto !important;
  left: 0;
  top: 0; }

/*
	Error message appears when image is not loaded
	(JS option errorMsg controls markup)
*/
.pswp__error-msg {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 16px;
  margin-top: -8px;
  color: #CCC; }

.pswp__error-msg a {
  color: #CCC;
  text-decoration: underline; }


	/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
	/*

		Contents:

		1. Buttons
		2. Share modal and links
		3. Index indicator ("1 of X" counter)
		4. Caption
		5. Loading indicator
		6. Additional styles (root element, top bar, idle state, hidden state, etc.)

	*/
	/*

		1. Buttons

	 */
	/* <button> css reset */
	.pswp__button {
	  width: 44px;
	  height: 44px;
	  position: relative;
	  background: none;
	  cursor: pointer;
	  overflow: visible;
	  -webkit-appearance: none;
	  display: block;
	  border: 0;
	  padding: 0;
	  margin: 0;
	  float: right;
	  opacity: 0.75;
	  -webkit-transition: opacity 0.2s;
	          transition: opacity 0.2s;
	  -webkit-box-shadow: none;
	          box-shadow: none; }
	  .pswp__button:focus,
	  .pswp__button:hover {
	    opacity: 1; }
	  .pswp__button:active {
	    outline: none;
	    opacity: 0.9; }
	  .pswp__button::-moz-focus-inner {
	    padding: 0;
	    border: 0; }

	/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
	.pswp__ui--over-close .pswp__button--close {
	  opacity: 1; }

	.pswp__button--arrow--left:before {
	  background: url('/static/images/icn-left.png') 50% 50% no-repeat;
	}
	.pswp__button--arrow--right:before {
		background: url('/static/images/icn-right.png') 50% 50% no-repeat;
	}

	.pswp__button--close {
	  background-position: 0 -44px; }

	.pswp__button--share {
	  background-position: -44px -44px; }

	.pswp__button--fs {
	  display: none; }

	.pswp--supports-fs .pswp__button--fs {
	  display: block; }

	.pswp--fs .pswp__button--fs {
	  background-position: -44px 0; }

	.pswp__button--zoom {
	  display: none;
	  background-position: -88px 0; }

	.pswp--zoom-allowed .pswp__button--zoom {
	  display: block; }

	.pswp--zoomed-in .pswp__button--zoom {
	  background-position: -132px 0; }

	/* no arrows on touch screens */
	.pswp--touch .pswp__button--arrow--left,
	.pswp--touch .pswp__button--arrow--right {
	  visibility: hidden; }

	/*
		Arrow buttons hit area
		(icon is added to :before pseudo-element)
	*/
	.pswp__button--arrow--left,
	.pswp__button--arrow--right {
	  background: none;
	  top: 50%;
	  margin-top: -50px;
	  width: 70px;
	  height: 100px;
	  position: absolute; }

	.pswp__button--arrow--left {
	  left: 0; }

	.pswp__button--arrow--right {
	  right: 0; }

	.pswp__button--arrow--left:before,
	.pswp__button--arrow--right:before {
	  content: '';
	  top: 35px;
	  background-color: rgba(0, 0, 0, 0.35);
	  height: 50px;
	  width: 50px;
		background-size: 60%;
		border-radius: 4px;
	  position: absolute; }

	.pswp__button--arrow--left:before {
	  left: 10px;
	}

	.pswp__button--arrow--right:before {
	  right: 10px;
	}

	/*

		2. Share modal/popup and links

	 */
	.pswp__counter,
	.pswp__share-modal {
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	      user-select: none; }

	.pswp__share-modal {
	  display: block;
	  background: rgba(0, 0, 0, 0.5);
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  padding: 10px;
	  position: absolute;
	  z-index: 1600;
	  opacity: 0;
	  -webkit-transition: opacity 0.25s ease-out;
	          transition: opacity 0.25s ease-out;
	  -webkit-backface-visibility: hidden;
	  will-change: opacity; }

	.pswp__share-modal--hidden {
	  display: none; }

	.pswp__share-tooltip {
	  z-index: 1620;
	  position: absolute;
	  background: #FFF;
	  top: 56px;
	  border-radius: 2px;
	  display: block;
	  width: auto;
	  right: 44px;
	  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
	  -webkit-transform: translateY(6px);
	      -ms-transform: translateY(6px);
	          transform: translateY(6px);
	  -webkit-transition: -webkit-transform 0.25s;
	          transition: transform 0.25s;
	  -webkit-backface-visibility: hidden;
	  will-change: transform; }
	  .pswp__share-tooltip a {
	    display: block;
	    padding: 8px 12px;
	    color: #000;
	    text-decoration: none;
	    font-size: 14px;
	    line-height: 18px; }
	    .pswp__share-tooltip a:hover {
	      text-decoration: none;
	      color: #000; }
	    .pswp__share-tooltip a:first-child {
	      /* round corners on the first/last list item */
	      border-radius: 2px 2px 0 0; }
	    .pswp__share-tooltip a:last-child {
	      border-radius: 0 0 2px 2px; }

	.pswp__share-modal--fade-in {
	  opacity: 1; }
	  .pswp__share-modal--fade-in .pswp__share-tooltip {
	    -webkit-transform: translateY(0);
	        -ms-transform: translateY(0);
	            transform: translateY(0); }

	/* increase size of share links on touch devices */
	.pswp--touch .pswp__share-tooltip a {
	  padding: 16px 12px; }

	a.pswp__share--facebook:before {
	  content: '';
	  display: block;
	  width: 0;
	  height: 0;
	  position: absolute;
	  top: -12px;
	  right: 15px;
	  border: 6px solid transparent;
	  border-bottom-color: #FFF;
	  -webkit-pointer-events: none;
	  -moz-pointer-events: none;
	  pointer-events: none; }

	a.pswp__share--facebook:hover {
	  background: #3E5C9A;
	  color: #FFF; }
	  a.pswp__share--facebook:hover:before {
	    border-bottom-color: #3E5C9A; }

	a.pswp__share--twitter:hover {
	  background: #55ACEE;
	  color: #FFF; }

	a.pswp__share--pinterest:hover {
	  background: #CCC;
	  color: #CE272D; }

	a.pswp__share--download:hover {
	  background: #DDD; }

	/*

		3. Index indicator ("1 of X" counter)

	 */
	.pswp__counter {
	  position: absolute;
	  left: 0;
	  top: 0;
	  height: 44px;
	  font-size: 13px;
	  line-height: 44px;
	  color: #FFF;
	  opacity: 0.75;
	  padding: 0 10px; }

	/*

		4. Caption

	 */
	.pswp__caption {
	  position: absolute;
	  left: 0;
	  bottom: 0;
	  width: 100%;
	  min-height: 44px; }
	  .pswp__caption small {
	    font-size: 11px;
	    color: #BBB; }

	.pswp__caption__center {
	  text-align: left;
	  max-width: 420px;
	  margin: 0 auto;
	  font-size: 13px;
	  padding: 10px;
	  line-height: 20px;
	  color: #CCC; }

	.pswp__caption--empty {
	  display: none; }

	/* Fake caption element, used to calculate height of next/prev image */
	.pswp__caption--fake {
	  visibility: hidden; }

	/*

		5. Loading indicator (preloader)

		You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR

	 */
	.pswp__preloader {
	  width: 44px;
	  height: 44px;
	  position: absolute;
	  top: 0;
	  left: 50%;
	  margin-left: -22px;
	  opacity: 0;
	  -webkit-transition: opacity 0.25s ease-out;
	          transition: opacity 0.25s ease-out;
	  will-change: opacity;
	  direction: ltr; }

	.pswp__preloader__icn {
	  width: 20px;
	  height: 20px;
	  margin: 12px; }

	.pswp__preloader--active {
	  opacity: 1; }
	  .pswp__preloader--active .pswp__preloader__icn {
	    /* We use .gif in browsers that don't support CSS animation */
	    background: url('/static/images/preloader.gif') 0 0 no-repeat; }

	.pswp--css_animation .pswp__preloader--active {
	  opacity: 1; }
	  .pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
	    -webkit-animation: clockwise 500ms linear infinite;
	            animation: clockwise 500ms linear infinite; }
	  .pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
	    -webkit-animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite;
	            animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }

	.pswp--css_animation .pswp__preloader__icn {
	  background: none;
	  opacity: 0.75;
	  width: 14px;
	  height: 14px;
	  position: absolute;
	  left: 15px;
	  top: 15px;
	  margin: 0; }

	.pswp--css_animation .pswp__preloader__cut {
	  /*
				The idea of animating inner circle is based on Polymer ("material") loading indicator
				 by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
			*/
	  position: relative;
	  width: 7px;
	  height: 14px;
	  overflow: hidden; }

	.pswp--css_animation .pswp__preloader__donut {
	  -webkit-box-sizing: border-box;
	          box-sizing: border-box;
	  width: 14px;
	  height: 14px;
	  border: 2px solid #FFF;
	  border-radius: 50%;
	  border-left-color: transparent;
	  border-bottom-color: transparent;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background: none;
	  margin: 0; }

	@media screen and (max-width: 1024px) {
	  .pswp__preloader {
	    position: relative;
	    left: auto;
	    top: auto;
	    margin: 0;
	    float: right; } }

	@-webkit-keyframes clockwise {
	  0% {
	    -webkit-transform: rotate(0deg);
	            transform: rotate(0deg); }
	  100% {
	    -webkit-transform: rotate(360deg);
	            transform: rotate(360deg); } }

	@keyframes clockwise {
	  0% {
	    -webkit-transform: rotate(0deg);
	            transform: rotate(0deg); }
	  100% {
	    -webkit-transform: rotate(360deg);
	            transform: rotate(360deg); } }

	@-webkit-keyframes donut-rotate {
	  0% {
	    -webkit-transform: rotate(0);
	            transform: rotate(0); }
	  50% {
	    -webkit-transform: rotate(-140deg);
	            transform: rotate(-140deg); }
	  100% {
	    -webkit-transform: rotate(0);
	            transform: rotate(0); } }

	@keyframes donut-rotate {
	  0% {
	    -webkit-transform: rotate(0);
	            transform: rotate(0); }
	  50% {
	    -webkit-transform: rotate(-140deg);
	            transform: rotate(-140deg); }
	  100% {
	    -webkit-transform: rotate(0);
	            transform: rotate(0); } }

	/*

		6. Additional styles

	 */
	/* root element of UI */
	.pswp__ui {
	  -webkit-font-smoothing: auto;
	  visibility: visible;
	  opacity: 1;
	  z-index: 1550; }

	/* top black bar with buttons and "1 of X" indicator */
	.pswp__top-bar {
	  position: absolute;
	  left: 0;
	  top: 0;
	  height: 44px;
	  width: 100%; }

	.pswp__caption,
	.pswp__top-bar,
	.pswp--has_mouse .pswp__button--arrow--left,
	.pswp--has_mouse .pswp__button--arrow--right {
	  -webkit-backface-visibility: hidden;
	  will-change: opacity;
	  -webkit-transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	          transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }

	/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
	.pswp--has_mouse .pswp__button--arrow--left,
	.pswp--has_mouse .pswp__button--arrow--right {
	  visibility: visible; }

	.pswp__top-bar,
	.pswp__caption {
	  background-color: rgba(0, 0, 0, 0.5); }

	/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
	.pswp__ui--fit .pswp__top-bar,
	.pswp__ui--fit .pswp__caption {
	  background-color: rgba(0, 0, 0, 0.3); }

	/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
	.pswp__ui--idle .pswp__top-bar {
	  opacity: 0; }

	.pswp__ui--idle .pswp__button--arrow--left,
	.pswp__ui--idle .pswp__button--arrow--right {
	  opacity: 0; }

	/*
		pswp__ui--hidden class is added when controls are hidden
		e.g. when user taps to toggle visibility of controls
	*/
	.pswp__ui--hidden .pswp__top-bar,
	.pswp__ui--hidden .pswp__caption,
	.pswp__ui--hidden .pswp__button--arrow--left,
	.pswp__ui--hidden .pswp__button--arrow--right {
	  /* Force paint & create composition layer for controls. */
	  opacity: 0.001; }

	/* pswp__ui--one-slide class is added when there is just one item in gallery */
	.pswp__ui--one-slide .pswp__button--arrow--left,
	.pswp__ui--one-slide .pswp__button--arrow--right,
	.pswp__ui--one-slide .pswp__counter {
	  display: none; }

	.pswp__element--disabled {
	  display: none !important; }

	.pswp--minimal--dark .pswp__top-bar {
	  background: none; }


/* UNSLIDER SLIDESHOW CSS */
.unslider{overflow:auto;margin:0;padding:0}
.unslider-wrap{position:relative}
.unslider-wrap.unslider-carousel>li{float:left}
.unslider-vertical>ul{height:100%}
.unslider-vertical li{float:none;width:100%}
.unslider-fade{position:relative}
.unslider-fade .unslider-wrap li{position:absolute;left:0;top:0;right:0;z-index:8}
.unslider-fade .unslider-wrap li.unslider-active{z-index:10}
.unslider li,.unslider ol,.unslider ul{list-style:none;margin:0;padding:0;border:none}
.unslider-arrow{position:absolute;left:20px;z-index:2;cursor:pointer}
.unslider-arrow.next{left:auto;right:20px}

/**
 *   Here's where everything gets included. You don't need
 *   to change anything here, and doing so might break
 *   stuff. Here be dragons and all that.
 */
/**
 *   Default variables
 *
 *   While these can be set with JavaScript, it's probably
 *   better and faster to just set them here, compile to
 *   CSS and include that instead to use some of that
 *   hardware-accelerated goodness.
 */
.unslider-nav ol {
  list-style: none;
  text-align: center;
}
.unslider-nav ol li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 6px;
	margin-bottom: 10px;
  background: transparent;
  border-radius: 10px;
  overflow: hidden;
  text-indent: -999em;
  border: 1px solid rgba(0,0,0,0.2);
  cursor: pointer;
}
.unslider-nav ol li.unslider-active {
  background: #5694f1;
	border: 1px solid #5694f1;
  cursor: default;
}

.inline-gallery {

}

.inline-gallery ul {
	max-width: 100% !important;
}