/* container photos */
.container {
	width: 90%;
	position: relative;
	margin: 0 auto;
	padding-bottom: 15px;
	padding-top: 15px;
}

.container img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	border-radius: 10px;
	box-shadow: 10px 10px 16px 4px var(--grayverydark);
}

/* container thumbnails */
.outer-gridncu {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
	margin: 0 auto;
	padding-top: 6px;
}

/* thumbnails */
.inner-gridncu {
	flex: 0 0 12.5%; /* Fixes uneven sizing */
    max-width: 12.5%; /* Ensures equal width distribution */
	display: flex;
	height: auto;
	padding: 2px;
}

/* arrows */
.prev, .next {
    cursor: pointer;
    position: absolute;        
    top: 50%;
    transform: translateY(-50%);
    width: 200px;
    height: 200px;
    border-radius: 100%;	
    display: flex;
    align-items: center;
    justify-content: center; /* important for centering the arrow */
    color: var(--graydark);
    font-size: 100px !important;
    line-height: 1; /* avoid vertical squishing */
    background-color: transparent;
    transition: background-color 0.6s ease, color 0.6s ease, opacity 0.6s ease;
    opacity: 0.5;
    text-decoration: none;
}

.prev { left: 0%; }
.next { right: 0%; }

.prev:hover, .next:hover {
    background-color: transparent;
    color: var(--orange);
    opacity: 1;
}

/* numbering, caption */
.slide-index, .slide-text {
	color: var(--white);
	font-size: 20px;
	position: absolute;
	top: 5px;
}

.slide-index {
	left: 5px;
	width: 70px;
}

.slide-text {
	left: 70px;
	width: 200px;
}

/* thumbnails and transparency effect */
.slide-thumbnailncu {
	width: 100%;
	opacity: 0.6;
	-webkit-filter: grayscale(100%); /* safari 6.0 - 9.0 */
	filter: grayscale(100%);
	cursor: pointer;
	transition: .6s ease;
}

.slide-thumbnailncu:hover {
	opacity: 1;
	-webkit-filter: grayscale(0%); /* safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

.active {
	opacity: 1;
	-webkit-filter: grayscale(0%); /* safari 6.0 - 9.0 */
	filter: grayscale(0%);
}

/* iphone portrait */
@media only screen and (max-width: 450px) {
	.inner-gridncu {
		flex: 0 0 25%; /* fixes uneven sizing */
    	max-width: 25%; /* ensures equal width distribution */
	}
	.prev, .next {
		width: 50px;
    	height: 50px;
    	font-size: 50px !important;
	}
}
	
/* iphone landscape */
@media only screen and (min-width: 450px) and (max-width: 900px) { 
	.inner-gridncu {
		flex: 0 0 20%; /* fixes uneven sizing */
    	max-width: 20%; /* ensures equal width distribution */
	}
	.prev, .next {
		width: 50px;
    	height: 50px;
    	font-size: 50px !important;
	}
}
	
/* ipad portrait */
@media only screen and (min-width: 900px) and (max-width: 1100px) { 
	.inner-gridncu {
		flex: 0 0 16.666%; /* fixes uneven sizing */
    	max-width: 16.666%; /* ensures equal width distribution */
	}
	.prev, .next {
		width: 150px;
    	height: 150px;
    	font-size: 80px !important;
	}
}
	
/* ipad landscape */
@media only screen and (min-width: 1100px) and (max-width: 1400px) { 
	.inner-gridncu {
		flex: 0 0 16.666%; /* fixes uneven sizing */
    	max-width: 16.666%; /* ensures equal width distribution */
	}
	.prev, .next {
		width: 150px;
    	height: 150px;
    	font-size: 80px !important;
	}
}