.popup-container {
	display: none;
}

	.popup-container.visible {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1031; /* Above top bar. */
	}

.popup-screen {
	background: #000;
	color: #fff;
	opacity: 0.75;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.popup {
	background: #fff;
	color: #4a4a4a;
	line-height: 1.2;
	margin: 0 auto;
	position: relative;
	top: 0;
	max-width: 510px;
}

	.popup .sticker {
		background-image: url(/custom/popups/membership/members-go-free-85-x2.png);
		background-size: cover;
		width: 85px;
		height: 85px;
		position: absolute;
		top: 7px;
		right: 14px;
		z-index: 1;
	}

	.popup .image-panel {
		padding: 49px 0 32px;
		position: relative;
	}

	.popup .image {
		background-image: url(/custom/popups/membership/banner-landscape.jpg?d=20180731);
		background-size: cover;
		box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5);
		width: 100%;
		padding-top: 51.5%;
	}

	.popup .close {
		background-color: transparent;
		border: none;
		outline: none;
		padding: 0;
		position: absolute;
		right: 15px;
		top: 15px;
	}

	.popup .text {
		padding: 0 25px;
	}

		.popup .text .title {
			font-size: 1.125rem;
			font-weight: 300;
			margin-bottom: 20px;
		}

		.popup .text .subtitle {
			font-size: 1rem;
			font-weight: 300;
			margin-bottom: 34px;
			max-width: 200px;
		}

	.popup .buttons {
		margin: 0 auto;
		width: 190px;
	}

	.popup .button {
		display: block;
	}

	.popup .btn {
		box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
		margin-bottom: 30px;
		width: 190px;
	}

	.popup a.btn-secondary {
		color: #fff;
	}

@media (min-width: 370px) {
	.popup .text .subtitle {
		max-width: unset;
	}
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
	.popup {
		margin-top: 26px;
	}

		.popup .sticker {
			background-image: url(/custom/popups/membership/members-go-free-170.png);
			width: 120px;
			height: 120px;
			top: 18px;
			right: 18px;
		}

		.popup .image-panel {
			padding: 78px 0 52px;
		}

		.popup .text {
			padding: 0 45px;
		}

			.popup .text .title {
				font-size: 1.75rem;
				margin-bottom: 39px;
			}

			.popup .text .subtitle {
				font-size: 1.3755rem;
				margin-bottom: 80px;
				max-width: 350px;
			}

		.popup .buttons {
			padding-bottom: 15px;
		}
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
	.popup {
		margin-top: 47px;
		max-width: 932px; /* "unset" and "initial" don't work in IE */
		width: 932px;
		height: 672px;
	}

		.popup .sticker {
			height: 155px;
			width: 155px;
			top: 23px;
			right: 35px;
		}

		.popup .image-panel {
			float: left;
			padding: 0;
			width: 475px;
			height: 672px;
		}

		.popup .image {
			background-image: url(/custom/popups/membership/banner-portrait.jpg?d=20180731);
			background-size: cover;
			box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.5);
			width: 100%;
			height: 100%;
		}

		.popup .text-panel {
			float: left;
			width: 456px;
			height: 672px;
		}

		.popup .text {
			padding: 215px 45px 0 25px;
		}

			.popup .text .title {
				font-size: 1.625rem;
				margin-bottom: 39px;
			}

			.popup .text .subtitle {
				font-size: 1.25rem;
				margin-bottom: 77px;
				max-width: 350px;
			}

		.popup .buttons {
			margin: 0 0 0 222px;
		}

		.popup .btn {
			margin-bottom: 45px;
		}
}