@media (min-width: 1200px) {
	#featured-blocks {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}
}


.featured-block {
	cursor: pointer;
	transform: perspective(1000px);
	perspective-origin: 0;

	.featured-block-text {
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.content h2 {
			font-family: "Neue Frutiger W01", "Open Sans", sans-serif;
			font-weight: 700 !important;
			margin-top: .4em;
			font-size: 1.4em;
		}

	}


	&:after {
		content: '';
		display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		background: hsl(0, 0%, 100%);
		opacity: 0;
		z-index: 60;
	}

	&.active-narrow {

		height: auto !important;

		&:after {
			opacity: 1;
		}

		.plus-symbol {
			display: none;
		}

		.featured-block-close {
			display: block;
		}

		.featured-block-inner {
			opacity: .3 !important;
		}

	}
}

/* this will affect for both the narrow and wide sizes */
.active {

	h2, h3 {
		font-weight: 800;
	}
}

#featured-blocks-long-popup.active {
	display: flex;
}

.long-nav {
	width: 25%;
	background-color: hsl(170, 76%, 30%);

	a {
		display: block;
		padding: 1.5em;
		text-transform: uppercase;
		font-weight: 600;
		font-size: .9em;
		letter-spacing: .9px;
		position: relative;
		color: hsl(0, 0%, 85%);
		border: none;

		&:hover {
			border: none;
			color: hsl(0, 0%, 100%);
		}
	}

	.current {
		color: hsl(49, 93%, 74%);

		&:after {
			content: '';
			position: absolute;
			height: 0;
			width: 0;
			right: 0;
			top: 1em;
			border-color: transparent;
			border-style: solid;
			border-width: 1em;

			border-left-width: 0;
			border-right-color: #fff;

		}
	}
}

.long-content {
	width: 75%;
	border: 2px solid hsl(0, 0%, 90%);
	border-left: 0;
	box-sizing: border-box;
	padding: 0 1em 0 2em;

	.featured-block-close {
		display: block;

		svg {
			fill: hsl(350, 78%, 30%);
		}
	}

	@media (min-width: 550px) {
		overflow: auto;
	}
}

.long-title {
	border-bottom: 2px solid hsl(0, 0%, 87%);
	padding-bottom: .5em;
	color: #444 !important;
	font-family: "Neue Frutiger W01", "Open Sans", sans-serif;
	font-weight: 700 !important;

	@media (min-width: 64em) {
		margin-top: .8em;
		font-size: 1.6em;
	}
}

.long-inner-content {
	overflow: visible;
	max-height: 100%;
	padding: 1em 1em 1em 0;

	.content > h2:first-of-type,
	.content > h3:first-of-type {
		margin-top: 0;
		margin-bottom: 1em;
	}

	.content h2 {
		font-family: "Neue Frutiger W01", "Open Sans", sans-serif;
		font-weight: 700 !important;
	}

}

.featured-block-text .content ul li:before,
.long-inner-content .content ul li:before {
	color: orange;
}