/*
PURE RESPONSIVE CSS3 SLIDESHOW GALLERY by Roko C. buljan
http://stackoverflow.com/a/34696029/383904
*/

.CSSgallery {
	position: relative;
	overflow: hidden;
	height: 100%; /* Or set a fixed height */
	/*height: 400px;*/
	/*padding-bottom: 24px;*/
}

/* SLIDER */
.CSSgallery .slider {
	height: 100%;
	white-space: nowrap;
	font-size: 0;
	transition: 0.8s;
	box-sizing: border-box; -webkit-box-sizing: border-box;
	max-width: 1400px;
	margin: 96px auto;
}

/* SLIDES */
.CSSgallery .slider > * {
	font-size: 1rem;
	display: inline-block;
	white-space: normal;
	vertical-align: top;
	height: 100%;
	width: 50%;
	background: none 50% no-repeat;
	background-size: cover;
}

/* PREV/NEXT, CONTAINERS & ANCHORS */
.CSSgallery .prevNext {
	position: absolute;
	z-index: 1;
	top: 50%;
	width: 100%;
	height: 0;
	font-size: 200%;
}

.CSSgallery .prevNext > div+div {
	visibility: hidden; /* Hide all but first P/N container */
}

.CSSgallery .prevNext a {
	background: #fff;
	position: absolute;
	width: 60px;
	height: 60px;
	line-height: 60px; /* If you want to place numbers */
	text-align: center;
	opacity: 0.7;
	-webkit-transition: 0.3s; transition: 0.3s;
	-webkit-transform: translateY(-50%); transform: translateY(-50%);
	left: 0;
}
.CSSgallery .prevNext a{ border-radius: 50% 0 0 50%; }
.CSSgallery .prevNext a:first-of-type{ border-radius: 0 50% 50% 0; }

.CSSgallery .prevNext a:hover {
	opacity: 1;
}
.CSSgallery .prevNext a+a {
	left: auto;
	right: 0;
}

/* NAVIGATION */
.CSSgallery .bullets {
	position: absolute;
	z-index: 2;
	bottom: 0;
	padding: 0;
	width: 100%;
	text-align: center;
	height: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.CSSgallery .bullets > a {
	display: inline-block;
	width: 12px;
	height: 12px;
	line-height: 30px;
	text-decoration: none;
	text-align: center;
	background: rgba(1,33,105,1);
	-webkit-transition: 0.3s;
	transition: 0.3s;
	margin: 0 6px;
}
.CSSgallery .bullets > a+a {
	background: rgba(1,33,105,0.5); /* Dim all but first */
}
.CSSgallery .bullets > a:hover {
	background: rgba(1,33,105,0.7) !important;
}

/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgallery > s:target ~ .bullets > * { background: rgba(1, 33, 105, 0.5); }

/* ACTIVE */
#s1:target ~ .bullets >*:nth-child(1) {background: rgba(1,33,105,1);}
#s2:target ~ .bullets >*:nth-child(2) {background: rgba(1,33,105,1);}
#s3:target ~ .bullets >*:nth-child(3) {background: rgba(1,33,105,1);}
#s4:target ~ .bullets >*:nth-child(4) {background: rgba(1,33,105,1);}
#s5:target ~ .bullets >*:nth-child(5) {background: rgba(1,33,105,1);}
#s6:target ~ .bullets >*:nth-child(6) {background: rgba(1,33,105,1);}
#s7:target ~ .bullets >*:nth-child(7) {background: rgba(1,33,105,1);}
#s8:target ~ .bullets >*:nth-child(8) {background: rgba(1,33,105,1);}
#s9:target ~ .bullets >*:nth-child(9) {background: rgba(1,33,105,1);}
/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgallery > s:target ~ .prevNext >* { visibility: hidden;}

/* ACTIVE: */
#s1:target ~ .prevNext >*:nth-child(1) {visibility: visible;}
#s2:target ~ .prevNext >*:nth-child(2) {visibility: visible;}
#s3:target ~ .prevNext >*:nth-child(3) {visibility: visible;}
#s4:target ~ .prevNext >*:nth-child(4) {visibility: visible;}
#s5:target ~ .prevNext >*:nth-child(5) {visibility: visible;}
#s6:target ~ .prevNext >*:nth-child(6) {visibility: visible;}
#s7:target ~ .prevNext >*:nth-child(7) {visibility: visible;}
#s8:target ~ .prevNext >*:nth-child(8) {visibility: visible;}
#s9:target ~ .prevNext >*:nth-child(9) {visibility: visible;}
/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */
#s1:target ~ .slider {transform: translateX(0%); 	-webkit-transform: translateX(0%);}
#s2:target ~ .slider {transform: translateX(-50%); 	-webkit-transform: translateX(-50%);}
#s3:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
#s4:target ~ .slider {transform: translateX(-150%); -webkit-transform: translateX(-150%);}
#s5:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
#s6:target ~ .slider {transform: translateX(-250%); -webkit-transform: translateX(-250%);}
#s7:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
#s8:target ~ .slider {transform: translateX(-350%); -webkit-transform: translateX(-350%);}
#s9:target ~ .slider {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
/* More slides? Add here more rules */

/* CUSTOM STYLES */
.CSSgallery{ color: #fff; text-align: center; }

.CSSgallery a {
	border-radius: 50%;
	/*margin: 0 3px;*/
	color: rgba(0,0,0,0.8);
	text-decoration: none;
}
.CSSgallery .slider img{ max-width: 100%; max-height: 400px; margin: 0 auto; }
.CSSgallery .slider > div { box-sizing: border-box; -webkit-box-sizing: border-box; padding: 12px; }
.CSSgallery .slider > div > div{ height: 400px; box-sizing: border-box; -webkit-box-sizing: border-box; display: flex; align-items: center; }

/* smaller screens switch to full width slide */
@media only screen and (max-width: 640px) 
{
	.CSSgallery .slider { margin: 0 0 96px 0; }
	.CSSgallery .slider > div { padding: 0; }
	.CSSgallery .slider > * { width: 100%; }
	
	.CSSgallery .prevNext { top: calc(50% - 48px); }
	
	/* SLIDER ANIMATION POSITIONS */
	#s1:target ~ .slider {transform: translateX(   0%); -webkit-transform: translateX(   0%);}
	#s2:target ~ .slider {transform: translateX(-100%); -webkit-transform: translateX(-100%);}
	#s3:target ~ .slider {transform: translateX(-200%); -webkit-transform: translateX(-200%);}
	#s4:target ~ .slider {transform: translateX(-300%); -webkit-transform: translateX(-300%);}
	#s5:target ~ .slider {transform: translateX(-400%); -webkit-transform: translateX(-400%);}
	#s6:target ~ .slider {transform: translateX(-500%); -webkit-transform: translateX(-500%);}
	#s7:target ~ .slider {transform: translateX(-600%); -webkit-transform: translateX(-600%);}
	#s8:target ~ .slider {transform: translateX(-700%); -webkit-transform: translateX(-700%);}
	#s9:target ~ .slider {transform: translateX(-800%); -webkit-transform: translateX(-800%);}
}