/* ==========================================================================
	 Base (Dark) Theme Styles
	 ========================================================================== */

.envirabox-overlay.overlay-supersize.overlay-base_dark {
	background-image: none;
	background-color: rgba(0, 0, 0, 0.85);
	overflow:hidden;
	overflow-y: hidden;

	& .envira-supersize .envirabox-outer {
		background: none;
		background-color: transparent;
	}

	& .envirabox-wrap {

		& .envirabox-close {
			display: none;
		}

		& .envirabox-inner {

			& .envirabox-position-overlay {
				bottom: 15px;
				width: auto;
			}


			& .envirabox-position-overlay.envira-gallery-top-left,
			& .envirabox-position-overlay.envira-gallery-top-right {
				top: 0;
			}

		}

		/**
		 * Caption
		 */
		& .envirabox-title {
			background: rgba(0, 0, 0, 0.35);
		}

	}
}

.envirabox-thumbs.overlay-base_dark {
	.envirabox-wrap {

		& .envirabox-theme-base_dark {
			/** 
			 * Navigation
			 */
			a.envirabox-nav {
				height: auto;
			}

		}

	}
}

.overlay-base_dark {
	
	& .envirabox-wrap {

		& .envirabox-theme-base_dark {
			/** 
			 * Navigation
			 */
			a.envirabox-nav { 
				position:fixed;
				top: 0;
				bottom: 0;

				&:hover span {
					background-color: rgba(0, 0, 0, 0.35);
				}

				& span {
					
					background-color: rgba(0, 0, 0, 0.25);
					background-image: none;
					visibility: visible;
					width: 35px;
					height: 70px;
					margin-top: -35px;

					&:before {
						font-size: 16px;
					}
				}

				/**
				 * Previous Navigation
				 */
				&.envirabox-prev {

					span {

						&:before {
							content: "\e909";
							padding: 0 7px;
							text-align: left;
							line-height: 70px;
						}

						left: 0px;
						visibility: visible;
						-webkit-border-radius: 0 5px 5px 0;
						   -moz-border-radius: 0 5px 5px 0;
								border-radius: 0 5px 5px 0;
						
					}
				}

				/**
				 * Next Navigation
				 */
				&.envirabox-next {

					span {

						&:before {
							content: "\e905";
							padding: 0 7px;
							text-align: right;
							line-height: 70px;
						}

						right: 0px;
						visibility: visible;
						-webkit-border-radius: 5px 0 0 5px;
						   -moz-border-radius: 5px 0 0 5px;
								border-radius: 5px 0 0 5px;
					}
				}
				
			}

			/** 
			 * Close Button
			 */
			& .envirabox-close {

				&:before {
					content: "\e900";
					font-size: 13px;
					padding: 8.5px;
					font-weight:bold;
				}

				background-color: #2d2d2f;
				background-image:none;
				cursor: pointer;
				top: -15px;
				right: -15px;
				width: 30px;
				height: 30px;
				outline: none;
				-webkit-border-radius: 50%;
				   -moz-border-radius: 50%;
						border-radius: 50%;
			}
		}

		/**
		 * Caption
		 */
		& .envirabox-title {
			position:fixed;
			top:0;
			left:0;
			right:0;
			width:100%;
			min-height: 36px;
			padding: 10px;
			box-sizing: border-box;
			background: #000;
			color: #fff;
			margin: 0;
			text-align: left;
			font-size: 13px;
			z-index: 988060 !important;
			visibility: visible;
			line-height: 16px;

			& span.child {
				color: #FFF;
				margin:0;
				padding:0;
				background: none;
				-webkit-border-radius: 0;
				-moz-border-radius: 0;
				border-radius: 0;
				text-shadow: none;
			}

		}

		/**
		 * Actions
		 */
		& .envirabox-actions {
			position:fixed;
			top:10px;
			right:10px;
			z-index: 988061;
			height: 16px;

			& > div {
				display: inline-block;
				margin-left: 9px;
				width: 16px;
				height: 16px;
				text-indent: -9999px;
				position:relative;

				&:before {
					font-size: 16px;
					text-indent: 0;
					position: absolute;
					top: 0;
					right: 0;
				}

				& a {
					display:block;
					width: 16px;
					height: 16px;
					position: relative;
					z-index: 1;
					background: none;
				}

			}

			& a {
				outline: none;
			}

			& .envira-close-button {

				&:before {
					content: "\e900";
				}

			}

			& .envira-download-button {

				&:before {
					content: "\e90d";
				}

			}

			& .envira-printing-button {

				&:before {
					content: "\e90e";
				}

			}

			& .envira-fullscreen-button {

				&:before {
					content: "\e903";
				}

			}

			& .envirabox-slideshow-button {

				&:before {
					content: "\e908";
				}

				&.playing:before {
					content: "\e906";
				}

			}

			& .envira-zoom-button {

				&:before {
					content: "\e90c";
				}
				
				& a {

					&:before {
						content: '';
					}

				}

				&.zoom-on:before {
					content: "\e90b";
				}

			}

		}

		/** 
		 * Social icons
		 */
		.envirabox-inner .envirabox-position-overlay,
		.envirabox-inner {
			width: 100%;
			text-align: center;
			bottom: -38px;
			top: inherit;

			.envira-social-buttons-exterior {
				bottom: 15px;
				width: 100%;
				position: absolute;
			}

			.envira-social-buttons {
				display: inline-block;
				float: none;
				padding: 5px;
				height: 45px;
				background: rgba(0, 0, 0, 0.35);
				-webkit-border-radius: 5px;
				   -moz-border-radius: 5px;
						border-radius: 5px;

				&.orientation-horizontal.outside {
					position: relative;
					bottom: 0;
					min-width: inherit;
					max-width: inherit;
				}

				&.orientation-vertical.outside {
					position: relative;
					left: 0;
					min-width: inherit;
					max-width: inherit;
				}

				& .envira-social-network {
					clear: none;

					a.envira-social-button {
						margin: 5px;
						width: 25px;
						height: 25px; 
						line-height: 25px;
						background-image: none;
						background-color: transparent;
						border-radius: inherit;
						-webkit-border-radius: inherit;
						-moz-border-radius: inherit;
						text-indent: -9999px;
						display:block;
						outline: none;
						position:relative;

						& span {
							display:none;
						}

						&:after {
							font-size: 25px;
							text-indent: 0;
							position: absolute;
							top: 0;
							left: 0;
						}
					}

				}

				/**
				* Buttons for each Social Network
				*/
				div.facebook {
					a { 
						&:after {
							content: "\e902";
						}
					}
				}
				div.twitter {
					a { 
						&:after {
							content: "\e90a";
						}
					}
				}
				div.pinterest {
					a { 
						&:after {
							content: "\e907";
						}
					}
				}
				div.google {
					a { 
						&:after {
							content: "\e904";
						}
					}
				}
				div.email {
					a { 
						&:after {
							content: "\e901";
						}
					}
				}

			}

		}
		
	}
}

#envirabox-thumbs.envirabox-thumbs-base_dark.thumbs-supersize {
	background: rgba(0, 0, 0, 0.35);
}

.envirabox-wrap.envira-supersize {

	& .envirabox-close {
		top: 10px;
		right: 10px;
	}

	& .envirabox-inner {

		& .envirabox-position-overlay {
			bottom: 15px;
		}

		& img {
			vertical-align: middle;
		}
	}
}

.envirabox-overlay.overlay-video {

	& .envirabox-inner {

		& .envirabox-position-overlay {
			/* pointer-events: none; */
			.envira-social-buttons {
				pointer-events: auto;
			}
		}
	}
}

/**
* Lightbox
*/
.envirabox-skin {

	&.envirabox-theme-base_dark {
		-moz-border-radius: 2px;
		-webkit-border-radius: 2px;
		border-radius: 2px;
		padding: 4px !important;
		background: none;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
	}

	.envira-supersize & {
		&.envirabox-theme-base_dark {
			-moz-border-radius: none;
			-webkit-border-radius: none;
			border-radius: none;
			padding: 0 !important;
			-webkit-box-shadow: none;
			-moz-box-shadow: none;
			box-shadow: none;
		}
	}
}

#envirabox-buttons.envirabox-buttons-base_dark {
	display:none;
}

#envirabox-thumbs.envirabox-thumbs-base_dark {
	background: none;

	ul li a {
		border: none;
	}

	ul li {
		margin: 16px 8px;
		border: 3px solid transparent;
	}

	ul li.active {
		border: 3px solid #fff;
		opacity: 1;
	}

	&.bottom {
		bottom: 0;
	}

	& ul.mobile li {
		margin: 10px 5px;
	}

}

@font-face {
	font-family: 'envira-icons';
	src:  url('../fonts/envira-icons.eot?gy81ju');
	src:  url('../fonts/envira-icons.eot?gy81ju#iefix') format('embedded-opentype'),
		url('../fonts/envira-icons.ttf?gy81ju') format('truetype'),
		url('../fonts/envira-icons.woff?gy81ju') format('woff'),
		url('../fonts/envira-icons.svg?gy81ju#envira-icons') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="envira-icons-"], 
[class*=" envira-icons-"], 
.envirabox-theme-base_dark .envirabox-close:before, 
.envirabox-theme-base_dark .envirabox-nav span:before, 
.envirabox-theme-base_dark .envira-close-button:before, 
.envirabox-theme-base_dark .envira-fullscreen-button:before, 
.envirabox-theme-base_dark .envira-zoom-button:before, 
.envirabox-theme-base_dark .envirabox-slideshow-button:before,
.envirabox-theme-base_dark .envira-social-network a:after,
.envirabox-theme-base_dark .envira-download-button:before,
.envirabox-theme-base_dark .envira-printing-button:before {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'envira-icons' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: #fff;
	display:block;
}

.envirabox-icon-close:before {
	content: "\e900";
}
.envirabox-icon-email:before {
	content: "\e901";
}
.envirabox-icon-facebook:before {
	content: "\e902";
}
.envirabox-icon-fullscreen:before {
	content: "\e903";
}
.envirabox-icon-google_plus:before {
	content: "\e904";
}
.envirabox-icon-next:before {
	content: "\e905";
}
.envirabox-icon-pause:before {
	content: "\e906";
}
.envirabox-icon-pinterest:before {
	content: "\e907";
}
.envirabox-icon-play:before {
	content: "\e908";
}
.envirabox-icon-previous:before {
	content: "\e909";
}
.envirabox-icon-twitter:before {
	content: "\e90a";
}
.envirabox-icon-zoom_plus:before {
	content: "\e90b";
}
.envirabox-icon-zoom:before {
	content: "\e90c";
}
.envira-icons-download:before {
	content: "\e90d";
}
.envira-icons-print:before {
	content: "\e90e";
}