/*--------------------------------------------------------------
# Lightbox
--------------------------------------------------------------*/

.fiveam-lightbox{

	position:fixed;
	inset:0;

	display:flex;
	align-items:center;
	justify-content:center;

	background:rgba(0,0,0,.85);

	backdrop-filter:blur(10px);
	-webkit-backdrop-filter:blur(10px);

	opacity:0;
	visibility:hidden;

	transition:all .3s ease;

	z-index:999999;

}

.fiveam-lightbox.is-open{

	opacity:1;
	visibility:visible;

}

/*------------------------------------
# Image
------------------------------------*/

.fiveam-lightbox__image{

	display:block;

	width:auto;
	height:auto;

	max-width:80vw;
	max-height:80vh;

	object-fit:contain;

	border-radius:12px;

	box-shadow:0 20px 60px rgba(0,0,0,.45);

	background:#fff;

}

/*------------------------------------
# Buttons
------------------------------------*/

.fiveam-lightbox__close,
.fiveam-lightbox__prev,
.fiveam-lightbox__next{

	position:absolute;

	width:56px;
	height:56px;
	display:flex;
	align-items:center;
	justify-content:center;
	border:none;
	
	cursor:pointer;
	font-size:28px;
	font-weight:700;
	color:#fff;
	background:rgba(255,255,255,.12);
	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);
	border:1px solid rgba(255,255,255,.2);
	transition:all .25s ease;

	z-index:2;

}

.fiveam-lightbox__close:hover,
.fiveam-lightbox__prev:hover,
.fiveam-lightbox__next:hover{

	background:#f58220;

	border-color:#f58220;

	color:#fff;

	transform:scale(1.08);

}

/*------------------------------------
# Close
------------------------------------*/

.fiveam-lightbox__close{

	top:30px;
	right:30px;

}

/*------------------------------------
# Previous
------------------------------------*/

.fiveam-lightbox__prev{

	left:6%;
	top:50%;

	transform:translateY(-50%);

}

/*------------------------------------
# Next
------------------------------------*/

.fiveam-lightbox__next{

	right:6%;
	top:50%;

	transform:translateY(-50%);

}

.fiveam-lightbox__prev:hover{

	transform:translateY(-50%) scale(1.08);

}

.fiveam-lightbox__next:hover{

	transform:translateY(-50%) scale(1.08);

}
/*------------------------------------
# Counter
------------------------------------*/

.fiveam-lightbox__counter{

	position:absolute;

	bottom:30px;
	left:50%;

	transform:translateX(-50%);

	color:#fff;

	font-size:16px;

	font-weight:600;

	background:rgba(255,255,255,.12);

	backdrop-filter:blur(8px);
	-webkit-backdrop-filter:blur(8px);

	padding:8px 18px;

	border-radius:30px;

	border:1px solid rgba(255,255,255,.2);

	letter-spacing:.5px;

}

.fiveam-lightbox__counter .current{

	color:#f58220;

}
/*------------------------------------
# Mobile
------------------------------------*/

@media (max-width:991px){

	.fiveam-lightbox__image{

		max-width:92vw;
		max-height:75vh;

	}

	.fiveam-lightbox__prev{

		left:15px;

	}

	.fiveam-lightbox__next{

		right:15px;

	}

}

@media (max-width:767px){

	.fiveam-lightbox__close{

		top:15px;
		right:15px;

		width:48px;
		height:48px;

		font-size:24px;

	}

	.fiveam-lightbox__prev,
	.fiveam-lightbox__next{

		width:48px;
		height:48px;

		font-size:24px;

	}

	.fiveam-lightbox__image{

		max-width:95vw;
		max-height:70vh;

		border-radius:8px;

	}

}