/* Element styles specific to gallery.php */

/* Page banner */
.banner {
	background-color: rgba(195,207,167,1);
	position:fixed;
	height:135px;
	width:100%;
	z-index: 999;
	margin-bottom: 10px;
}
/* Stack all banner elements horizontally */
.banner * {
	float:left;
}
/* Style page header */
.banner h1 {
	font-size: 6vw;
	font-weight: 400;
	position:relative;
	left:1em;
	top: calc(50% - .75em);
}
/* Set page logo */
.banner #logo {
	background-image: url(/_images/logo-phone.png);
	background-repeat: no-repeat;
	height:100px;
	width:136px;
	margin-top: 15px;
	margin-left:4%;
}
/* Content container */
#scrollViewer {
	position:relative;
	top:135px;
}
/* Image thumbnail container */
#contentWrapper .tiles {
	position:relative;
	top:10px;
	width: 100%;
	margin: 1em auto 2em auto;
}
/* Image and caption */
#contentWrapper .tiles figure {
	position:relative;
	float:left;
	width: 270px;
	margin: 0px 15px 15px 0px;
	cursor:default;
}
#contentWrapper .tiles figure figcaption {
	background: rgba(43,69,102,1);
	color: rgba(255,255,161,1);
	font-weight: 600;
	height: auto;
	line-height: 1.75em;
	margin:0;
	padding: 0px 7px 7px 7px; 
	transition: color .3s linear, background-color .3s linear;
	width:100%;
}
#contentWrapper .tiles figure figcaption button {
	background: rgba(43,69,102,1);
	border:none;
	color: rgba(255,255,161,1);
	cursor:pointer;
	float:right;	
	font-size:2em;
	font-weight: 400;
	margin: 4px 1px 0 0;
	padding: 0;
	outline:none;
	height: 45px;
	width: 45px;
}
#contentWrapper .tiles figure figcaption button:after {
	font-family: FontAwesome;
	content: "\f067";
	font-size: 1em;
}
#contentWrapper .tiles figure figcaption button.active:after {
	font-family: FontAwesome;
	content: "\f068";
	font-size: 1em;
}
#contentWrapper .tiles figure.active figcaption {
	background-color: rgba(255,255,161,1);
	color: rgba(19,38,65,.9);
}
#contentWrapper .tiles figure .content {
	clear:right;
  overflow: hidden;
	max-height: 0;
  transition: max-height 0.2s ease-out;
}
#contentWrapper .tiles figure .content .text {
	margin-top:10px;
	padding:5px;
	background: rgba(43,69,102,1);
	color: rgba(255,255,161,1);
	font-weight: 600;
	font-size:.9rem;
}
/* Default (phone) styles */

/* Gallery slide show start button */
#contentWrapper .tiles figure .slidesButton {
	position:absolute;
	left:0px;
	top:0px;
	width:270px;
	font-size:1.15em;
	color: rgba(255,255,161,1);
	border: 4px dotted rgba(255,255,161,1);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	background: rgba(43,69,102,1);
	cursor:pointer;
}
#contentWrapper .tiles figure .slidesButton:before {
	content:"Tap ";
}

#contentWrapper .tiles img {
	width: 270px;
	height: 180px;
	margin: 0;
	box-shadow: none;
	border: 4px solid rgba(43,69,102,1);
	transition: border-color .3s linear;
}
#contentWrapper .tiles figure.active img {
	border-color: rgba(255,255,161,1);
}
/* Slide show panel */
#slideShow {
	display:none;
	position:fixed;
	height:100vh;
	width:100vw;
	left:0px;
	top:0px;
	margin:0;
	padding:0;
	color: rgba(195,207,167,1);
	background-color: rgba(46,57,43,1);
	z-index:9999;
}
/* Show slide panel when activated */
#slideShow.active {
	display:block;
}
/* Slide show close button */
#slideShow #closeButton {
	color: rgba(255,255,161,1);
	background-color: rgba(43,69,102,1);
	border: 3px solid rgba(255,255,161,1);
	font-size:2em;
	position:absolute;
	top: 10px;
	right: 10px;
	cursor:pointer;
	transition: color .3s linear, background-color .3s linear, border-color .3s linear;
}
#slideShow #slides {
	position:absolute;
	height:400px;
	width:600px;
	left:100px;
	top:100px;
}
#slideShow #slides figure {
	width:100%;
	height:100%;
	margin:0 1px;
}
#slideShow #slides figure img {
	width:100%;
	height:auto;
	border:none;
	margin:0px;
	box-shadow:none;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;			
}
#slideShow #slides figure figcaption {
	width: 100%;
	color: rgba(195,207,167,1);
	line-height: 1.15rem;
	font-size: 1rem;
	height: 2.7rem;
	overflow: hidden;
	font-weight: 400;
	padding: .20em 0;
	padding: 4px;			
	margin:0;
}
/* Slide show subject text */
#slideShow #subject {
	position:absolute;
	left:1em;
	top:7px;
	width:93%;
  color:rgba(195,207,167,1);
	font-size:.75rem;
	line-height:1rem;
	font-weight:600;
	overflow:hidden;
}
#slideShow #thumbs {
	position: absolute;
	height:100px;
}
#slideShow #thumbs figure {
	border:solid transparent 3px;
	margin:0 5px;
	transition: border-color .3s linear;
}
#slideShow #thumbs figure.slick-current {
	border-color:rgba(255,255,161,1);
}
#slideShow #thumbs figure img {
	width:100%;
	height:auto;
}
/* Slide show navigation dots (appear below thumbnails) */
.slick-dots
{
  top:7em;
	left: .5em;
	margin:0 auto;
}
.slick-dots li
{
	width: 45px;
	height: 45px;
	margin: 0 5px;
}
.slick-dots li button
{
	width: 45px;
	height: 45px;
	padding: 10px;
}
.slick-dots li button:before
{
	font-family: 'slick';
	font-size: 14px;
	line-height: 20px;
	width: 45px;
	height: 45px;
	color: rgba(195,207,167,.4);
}
.slick-dots li.slick-active button:before
{
	color: rgba(195,207,167,1);
	opacity:1;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
	color: rgba(195,207,167,.6);
}
/* Slideshow navigation arrows (appear within slide container) */
/* Size arrows and center vertically withing slide */
.slick-prev, .slick-next
{
	top: calc(50% - 20px);
	height:60px;
	width:35px;;
	visibility:visible;
}
/* Move arrows horizontally to place inside slide and place on top in z-order */
.slick-prev
{
	left: 15px;
	z-index:2;
}
.slick-next
{
	right: 20px;
	z-index:2;
}
/* Set arrow images */
.slick-prev:before
{
	color:rgba(255,255,161,.6);
	font-family: FontAwesome;
	font-size:60px;
	content: "\f0d9";
	transition: color .2s linear;
}
.slick-next:before
{
	color:rgba(255,255,161,.6);
	font-family: FontAwesome;
	font-size:60px;
	content: "\f0da";
	transition: color .3s linear;
}
/* Highlight navigation arrows on slide show mouse over */
#slides:hover .slick-prev:before,
#slides:hover .slick-next:before
{
	color: rgba(255,255,161,.8);
}
/* Highlight navigation arrows even more on arrow mouse over */
#slides .slick-prev:hover:before,
#slides .slick-next:hover:before
{
	color: rgba(255,255,161,1);
}
/* Large phone styles */
@media only screen and (min-width: 321px) {
/* Use smaller heading font */
	#slideShow #subject {
		font-size:1rem;
		line-height:1.25rem;
	}
}
/* Tablet styles */
@media only screen and (min-width: 780px) {
/* Use smaller heading and subject fonts */
	.banner h1 {
		font-size: 4vw;
		top: calc(50% - .65em);
	}
	#slideShow #subject {
		font-size:1.25rem;
		line-height:1.5rem;
	}
}
/* Desktop styles */
@media only screen and (min-width: 1025px) {
	/* Gallery slide show start button */
	#contentWrapper .tiles figure .slidesButton {
		visibility:hidden;
		opacity:0;
		transition: opacity .3s linear;
	}
	#contentWrapper .tiles figure.active .slidesButton {
		visibility: visible;
		opacity:1;
	}
	#contentWrapper .tiles figure.active .slidesButton:before {
		content:"Click ";
	}
	/* Slide show close button */
	#slideShow #closeButton {
		color: rgba(195,207,167,.6);
		background-color: rgba(195,207,167,.4);
		border: 3px solid rgba(195,207,167,.6);
		font-size:2em;
		position:absolute;
		top: 10px;
		right: 10px;
		cursor:pointer;
		transition: color .3s linear, background-color .3s linear, border-color .3s linear;
	}
	#slideShow #closeButton:hover {
		border-color: rgba(255,255,161,1);
		color: rgba(255,255,161,1);
		background-color: rgba(43,69,102,1);
	}
}