/* Poptrox */

.poptrox-popup {
	-moz-box-sizing: content-box;
	-webkit-box-sizing: content-box;
	-ms-box-sizing: content-box;
	box-sizing: content-box;
	background: #000000;
	padding-bottom: 3em;
	box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.15);
}

	.poptrox-popup .loader {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -1em 0 0 -1em;
		width: 2em;
		height: 2em;
		display: block;
		font-size: 2em;
	}

		.poptrox-popup .loader:before {
			-moz-animation: spinner-rotate 0.75s infinite linear !important;
			-webkit-animation: spinner-rotate 0.75s infinite linear !important;
			-ms-animation: spinner-rotate 0.75s infinite linear !important;
			animation: spinner-rotate 0.75s infinite linear !important;
			-moz-osx-font-smoothing: grayscale;
			-webkit-font-smoothing: antialiased;
			font-family: FontAwesome;
			font-style: normal;
			font-weight: normal;
			text-transform: none !important;
			color: #e5e6e7;
			content: '\f1ce';
			cursor: default;
			display: block;
			height: 2em;
			left: 0;
			line-height: 2em;
			position: absolute;
			text-align: center;
			top: 0;
			width: 2em;
		}

	.poptrox-popup .caption {
		position: absolute;
		bottom: 0;
		left: 0;
		background: #000000;
		width: 100%;
		height: 3em;
		line-height: 2.8em;
		text-align: center;
		cursor: default;
		z-index: 1;
		font-size: 0.9em;
	}

	.poptrox-popup .nav-next,
	.poptrox-popup .nav-previous {
		-moz-transition: opacity 0.2s ease-in-out;
		-webkit-transition: opacity 0.2s ease-in-out;
		-ms-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		opacity: 0;
		cursor: pointer;
		background: rgba(0, 0, 0, 0.01);
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

	.poptrox-popup .nav-next:before,
	.poptrox-popup .nav-previous:before {
		content: '';
		position: absolute;
		width: 96px;
		height: 64px;
		background: url("images/poptrox-nav.svg");
		background-color: rgba(100, 100, 100, 0.3);
		top: calc(50% - 1.5em);
		margin: -32px 0 0 0;
	}

	.poptrox-popup:hover .nav-next,
	.poptrox-popup:hover .nav-previous {
		opacity: 0.5;
	}

	.poptrox-popup:hover .nav-next:hover,
	.poptrox-popup:hover .nav-previous:hover {
		opacity: 1.0;
	}

	.poptrox-popup .nav-previous:before {
		-moz-transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		transform: scaleX(-1);
		-ms-filter: "FlipH";
		filter: FlipH;
	}

	.poptrox-popup .nav-next {
		right: 0;
	}

		.poptrox-popup .nav-next:before {
			right: 0;
		}

	.poptrox-popup .nav-previous {
		left: 0;
	}

		.poptrox-popup .nav-previous:before {
			left: 0;
		}

	.poptrox-popup .closer {
		-moz-transition: opacity 0.2s ease-in-out;
		-webkit-transition: opacity 0.2s ease-in-out;
		-ms-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
		position: absolute;
		top: 0;
		right: 0;
		width: 64px;
		height: 64px;
		text-indent: -9999px;
		z-index: 2;
		opacity: 0;
		-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
	}

		.poptrox-popup .closer:before {
			content: '';
			display: block;
			position: absolute;
			right: 16px;
			top: 16px;
			width: 40px;
			height: 40px;
			border-radius: 100%;
			box-shadow: inset 0 0 0 2px #fff;
			background: url("images/poptrox-closer.svg") center center;
			background-color: rgba(100, 100, 100, 0.3);
			color: #ffffff !important;
		}

	.poptrox-popup:hover .closer {
		opacity: 0.5;
	}

		.poptrox-popup:hover .closer:hover {
			opacity: 1.0;
		}

	body.is-touch .poptrox-popup .nav-next,
	body.is-touch .poptrox-popup .nav-previous,
	body.is-touch .poptrox-popup .closer {
		opacity: 1.0 !important;
	}

	@media screen and (max-width: 736px) {

		.poptrox-popup .nav-next:before,
		.poptrox-popup .nav-previous:before {
			width: 48px;
			height: 32px;
			background-size: contain;
			margin: -16px 0 0 0;
		}

		.poptrox-popup .closer:before {
			right: 12px;
			top: 12px;
			width: 20px;
			height: 20px;
			box-shadow: inset 0 0 0 1px #fff;
			background-size: contain;
			opacity: 0.65;
		}

	}