/* CSS Document */

/* - - - - */


._btn
{
	font-weight: 100;
	border: 1px dashed #888;
	padding: 4px 8px;
	justify-self: center;
	transition: background-color 0.2s ease;
	grid-row: 1;
}

._btn:hover
{
	cursor: pointer;
	background-color:#C8C8C8;
}


.gal-next
{
	justify-self: end;
}

.gal-prev
{
	justify-self: start;
}





#set_album_view
{
	font-weight: 100;
	border: 1px dashed #888;
	padding: 4px 8px;
	
	
	margin: 0;
	-webkit-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
	font-weight: 100;
	font-size: 22px;	
}

#set_album_view:hover
{
	cursor:pointer;
	background-color:#C8C8C8;
}

/* - */

#fb_gallery_title
{
	margin: 0;
}

/* - */

#fb-lightbox
{
	display:none;
	position:fixed;
	
	width:100vw;
	height:100vh;
	
	z-index: 99999;
	
	top:0;
	left:0;
	
	background-color:rgba(0,0,0,0.75);
}

#fb-lightbox-img
{
	max-width:80%;
	max-height:80%;
	
	top:50%;
	left:50%;
	
	transform:translate(-50%,-50%);
	-webkit-transform: translate(-50%, -50%); /* Safari */	
	
	border: solid 16px #fff;
	position:relative;
}

/* - */

.album_name
{
	grid-row: 1;
	grid-column: 1;
	align-self: end;
	justify-self: center;
	font-size: 14px;
	margin: 0 0 16px;
	color: #ccc !important;
	font-weight: 100;
	background-color: #222;
	padding: 4px 32px;
}












.gal_img_container
{
	display: grid;
	overflow:hidden;
	background-color:#fff;
	
	width:100%;
	height:200px;
}














.gal_img_container:hover
{
	cursor:pointer;	
}

.gal_img_container:hover .gal_img
{
	opacity:0.5;	
}

.gal_img
{	
	grid-row: 1;
	grid-column: 1;
	min-width: 100%;
    min-height: 100%;
    transition: opacity 0.2s ease;
}
























/* - */

#fb-gallery
{
	display: grid;
	grid-gap: 8px;
}

@media (min-width: 768px)
{
	#fb-gallery
	{
		grid-template-columns: repeat( 2, auto );
		grid-gap: 16px;
	}
}

@media (min-width: 992px)
{
	#fb-gallery
	{
		grid-template-columns: repeat( 3, auto );
	}
}

@media (min-width: 1200px)
{
	#fb-gallery
	{
		grid-template-columns: repeat( 4, auto );
	}
}


/* - */


#fb_gal_topbar
{
	display: grid;
	justify-content: start;
}

@media (min-width: 768px)
{
	#fb_gal_topbar
	{
		grid-column: 1 / span 2;
	}
}

@media (min-width: 992px)
{
	#fb_gal_topbar
	{
		grid-column: 1 / span 3;
	}
}

@media (min-width: 1200px)
{
	#fb_gal_topbar
	{
		grid-column: 1 / span 4;
	}
}

/* - */

#gallery-content
{
	display: grid;
    grid-gap: 8px;
}

@media (min-width: 768px)
{
	#gallery-content
	{
		grid-column: 1 / span 2;		
	    grid-template-columns: repeat( 2, 50% );
	}
}

@media (min-width: 992px)
{
	#gallery-content
	{
		grid-column: 1 / span 3;		
	    grid-template-columns: repeat( 3, 33% );
	}
}

@media (min-width: 1200px)
{
	#gallery-content
	{
		grid-column: 1 / span 4;		
	    grid-template-columns: repeat( 4, 25% );
	}
}

/* - */

.gal-nav-container
{
	display: grid;
    grid-gap: 8px;
}

@media (min-width: 768px)
{
	.gal-nav-container
	{
		grid-column: 1 / span 2;		
	}
}

@media (min-width: 992px)
{
	.gal-nav-container
	{
		grid-column: 1 / span 3;		
	}
}

@media (min-width: 1200px)
{
	.gal-nav-container
	{
		grid-column: 1 / span 4;		
	}
}