/* - FB CSS V5 - */

#fb-gallery
{
	display: grid;
}

#fb-gallery p
{
	color: #000;
	margin: 4px 0 0;
	text-align: center;
}

.album-thmb
{
	display: grid;
}

.pagination
{
	display: grid;
	justify-content: center;
	grid-gap: 8px;
}

/* - */

.pagination-previous, .pagination-next
{
	grid-row: 1;
	transition: opacity ease .1s;
}

/* - */

.pagination-previous
{
	justify-self: start;
	border-right: solid 1px #ccc;
	padding-right: 8px;
}

.pagination-next
{
	justify-self: end;
	border-left: solid 1px #ccc;
	padding-left: 8px;
}

/* - */

.pagination-previous:hover, .pagination-next:hover
{
	cursor: pointer;
	opacity: 0.2;
}

/* - */










/* - */

.album-thumbs
{
	display: grid;
	
	
	grid-gap: 16px;
}

@media ( min-width: 768px )
{
	.album-thumbs
	{
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 992px )
{
	.album-thumbs
	{
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1200px )
{
	.album-thumbs
	{
		grid-template-columns: repeat( 4, 1fr );
	}
}



.thmb-container
{
	display: grid;
	width: 100%;
	height: 200px;
	align-content: center;
	justify-content: center;
	background-color: #1c1c1c;
	overflow: hidden;
}

.thmb-img
{
	/*max-width: 100%;*/
	transition: opacity ease .2s;
}

.thmb-img:hover
{
	cursor: pointer;
	opacity: 0.2;
}

/* - */

.thmb-outer-container {

    display: grid;
    grid-gap: 0px;

}

@media ( min-width: 512px )
{
	.thmb-outer-container
	{
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 992px )
{
	.thmb-outer-container
	{
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( min-width: 1200px )
{
	.thmb-outer-container
	{
		grid-template-columns: repeat( 4, 1fr );
	}
}







.img-thmb-container
{
	display: grid;
    width: 100%;
    overflow: hidden;
    height: 256px;	
	align-content: center;
	justify-content: center;
}

.landscape-img
{
	/*max-height: 100%;
	max-width: 1024px;*/
	justify-self: center;
	align-self: center;
}

.portrait-img
{
	max-width: 100%;
	max-height: 1024px;
	justify-self: center;
	align-self: center;
}

/* - */

.gal-img-thmb
{
	transition: opacity ease .3s;
}

.gal-img-thmb:hover
{
	cursor: pointer;
	opacity: 0.2;
}

/* - */

.preview-frame
{
	position: fixed;
	display: none;
	
	z-index: 9999999999;
	
	width: 100%;
	height: 100%;
	
	top: 0;
	left: 0;
	
	background-color: rgba(0,0,0,0.9);
}

#preview-img
{
	max-width: 80vw;
	max-height: 80vh;
	align-self: center;
	justify-self: center;
	border: solid 16px #fff;
}

.show-preview
{
	display: grid!important;
}

/* - */


.back-btn
{
	transition: opacity ease .2s;
}

.back-btn:hover
{
	cursor: pointer;
	opacity: 0.4;
}