/*** Make nav arrows always visible (optional) ***/
.envirabox-nav {
	visibility: visible !important;
}

/* Remove default navigation arrow background images */
.envirabox-nav span {
	display: none !important;
}

/* Make the clickable nav area larger */
.envirabox-nav {
	width: 30% !important;
	height: 100% !important;
}

/* Add custom Dashicons nav arrows */
.envirabox-nav::before {
	display: block;
	font-family: 'Dashicons';
	position: absolute;
	top: 50%;
/*** Color of the icons, modify as desired ***/
	color: #fff !important;
/*** Font size of the icons, modify as desired ***/
	font-size: 50px;
/*** Background transparent ***/
	background: rgba(21,20,22,0.5);
}

.envirabox-nav:hover::before {
	background: rgba(21,20,22,0.8);
}

/* Prev nav arrow */
.envirabox-prev {
	left: 2% !important;
}

.envirabox-prev::before {
/*** Replace with the Dashicons icon unicode you want to use ***/
	content: '\f341';
	left: 0 !important;
	-webkit-transform: translate(0%,-75%);
	-moz-transform: translate(0%,-75%);
	transform: translate(0%,-75%);
	padding: 5px 5px 5px 0;
}

.envirabox-next {
	right: 2% !important;
}

.envirabox-next::before {
/*** Replace with the Dashicons icon unicode you want to use ***/
	content: '\f345';
	right: 0 !important;
	-webkit-transform: translate(0%,-75%);
	-moz-transform: translate(0%,-75%);
	transform: translate(0%,-75%);
	padding: 5px 0 5px 5px;
}

/* Custom background and padding */
.envirabox-wrap {
	background-color: #151416 !important;
	padding: 35px 0 5px !important;
	margin-top: -30px !important;
}

/* Remove image shadow */
.envirabox-opened .envirabox-skin {
	-webkit-box-shadow: none !important;
	box-shadow: none !important;
	background: transparent;
}

#envirabox-loading {
	background: rgba(21,20,22,0.5) !important;
	opacity: 1 !important;
}

/** Customize the Envira Gallery lightbox close button **/
.envirabox-wrap a.envirabox-close {
	background: none !important;
	width: 30px !important;
	height: 30px !important;
	top: -30px !important;
	right: calc(2% - 5px);
}

.envirabox-wrap a.envirabox-close:before {
	content: "\f335";
	font-size: 28px;
	font-family: dashicons;
	color: #878687;
}

.envirabox-wrap a.envirabox-close:hover:before {
	color: #CCC;
}

.envirabox-title-outside-wrap {
	color: #dedede !important;
	font-size: 14px !important;
	width: 96% !important;
	margin: auto !important;
	margin-top: -2% !important;
	padding-bottom: 5px !important;
}

.envirabox-image {
	max-width: 96% !important;
	max-height: 96% !important;
	margin: auto !important;
}