/*

	BASIC CSS
	---------

	2. General Hacks & Styles
	  - 2.1 display
	  - 2.2 float
	  - 2.3 form

	3. Typography

	4. Layout
	  - 4.1 general
	  - 4.2 lists
	  - 4.3 images

	6. Print


	CUSTOM CSS
	----------

	7. Layout
	  - 7.1 media queries
	  - 7.2 default widths
	  - 7.3 grids
	  - 7.4 horizontal scrolling

	8. Styling

	9. Typography

	10. Snippets
	  - 10.1 navigation
	  - 10.2 logo banner
	  - 10.3 recommendations

	  - 10.5 footer

*/


/* 1. CSS Variables
----------------------------------------------------------------------------- */

/* ----- 7.x spacing units ----- */
:root{
	--co-background: #143B4F;
	--co-background-tint: #164157;
	--co-background-shade: #123547;
	--co-text-heading: #F7F7F7;
	--co-text-heading: #F0F0F0;
	--co-text-paragraph: rgba(247,247,247,.8);
	--co-watermark: rgba(247,247,247,.1);
	--co-link: #5CE6B8;
	--co-border-subtle: #396074;

	--sp-tiny:   .50rem;
	--sp-small:  .75rem;
	--sp-medium: 1.0rem;
	--sp-large:  2.0rem;
	--sp-huge:   3.0rem;
	--sp-sides:  1.0rem;
}

@media (min-width: 32em){
	:root{
		--sp-tiny:   0.5rem;
		--sp-small:  1.0rem;
		--sp-medium: 2.0rem;
		--sp-large:  3.0rem;
		--sp-huge:   4.0rem;
		--sp-sides:  2.0rem;
	}
}

@media (min-width: 40em){
	:root{
		--sp-sides: 3rem;
	}
}

@media (min-width: 56em){
	:root{
		--sp-tiny:   0.50rem;
		--sp-small:  1.50rem;
		--sp-medium: 3.00rem;
		--sp-large:  4.50rem;
		--sp-huge:   6.00rem;
	}
}

@media (min-width: 60em){
	:root{
		--co-background-tint: #17455C;
	}
}

@media (min-width: 72em){
	:root{
		--sp-sides: 6rem;
	}
}
	


/* 9. Typography
----------------------------------------------------------------------------- */

	/* ----- 9.1 general -------------------------------------------------------- */
	html{
		box-sizing: border-box;
		font-size: 100%;
		font-family: 'Avenir', sans-serif;
		line-height: 1.5;
		color: var(--co-text-paragraph);
	}

	@media (min-width: 20.0625em) and (max-width: 30em){
		body{
			font-size: 112.5%
		}
	}

	@media (min-width: 80.0625em){
		body{
			font-size: 112.5%
		}
	}

	*,
	*:before,
	*:after{
		box-sizing: inherit;
		margin: 0;
		padding: 0;
	}

	body{
		background-color: var(--co-background);
		text-rendering: optimizeLegibility;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	h1,
	.pri-heading{
		font: 700 2.25rem/1.2 'PT Serif', serif;
		color: var(--co-text-heading);
		padding: 0 0 var(--sp-small);
		opacity: 0;
		animation:
			fadeIn .6s .3s forwards,
			slideInLeft .9s .3s forwards;
	}

	h2,
	.sec-heading{
		font: 700 1.75rem/1.2 'PT Serif', serif;
		color: var(--co-text-heading);
		padding: 0 0 var(--sp-small);
	}

	h3,
	.ter-heading{
		font: 700 1.5rem/1.333 'PT Serif', serif;
		color: var(--co-text-heading);
		padding: 0 0 var(--sp-tiny);
	}

	h4,
	.qua-heading{
		font: 700 1.25rem/1.5 'PT Serif', serif;
		color: var(--co-text-heading);
		letter-spacing: .02rem;
	}

	h5,
	.qui-heading{
		font: 700 .875rem/1.4285714286 'PT Serif', serif;
		color: var(--co-text-heading);
		letter-spacing: .03rem;
	}

	h6,
	.sen-heading{
		font: 700 .75rem/1.333 'PT Serif', serif;
		color: var(--co-text-heading);
		letter-spacing: .05rem;
	}

	small,
	.small-text{
		font-size: .875rem;
		line-height: 1.4285714286;
	}

	a{
		color: var(--co-link);
		transition: opacity .25s;
		opacity: .8;
	}

	a:hover,
	a:focus,
	[aria-current=page]{
		opacity: 1;
	}

	/* Display links when the <a> element has no text value but the href
	attribute has a link: */
	a[href^="http"]:empty::before {
		content: attr(href);
	}

	.text-decoration-none,
	.text-decoration-none a{
		text-decoration: none!important;
	}

	p,
	.paragraph{
		margin-bottom: var(--sp-small);
	}

	.intro{
		font-size: 1.125rem;
	}

	mark{
		background-color: transparent;
		background: url('../images/mark.svg') center left;
		background-size: auto 100%;
		color: var(--co-background);
		padding: 0 .125rem 0;
	}

	@media (min-width: 28em){

		h1,
		.pri-heading{
			font-size: 3rem;
		}

		h2,
		.sec-heading{
			font-size: 2rem;
		}

		h3,
		.ter-heading{
			font-size: 1.6875rem;
			line-height: 1.1851851852;
		}

	}

	@media (min-width: 40em){

		h1,
		.pri-heading{
			font-size: 3.25rem;
			line-height: 1.23;
		}

		h2,
		.sec-heading{
			font-size: 2.5rem;
		}

	}


/* x. Custom inline elements
----------------------------------------------------------------------------- */

/* ----- z.1 call to action ------------------------------------------------- */
.call-to-action{
	display: inline-block;
	opacity: 1; /* overrule default link opacity */
	padding-right: 2.25rem;
	margin-top: var(--sp-tiny);
	background:
		url('../images/icons/arrow_right-small.svg')
		no-repeat center right .25rem;
	transition: background-position .25s;
	text-decoration: none;
}

.call-to-action:hover{
	background-position: center right;
}

.call-to-action[target=_blank]{
	padding-right: 0;
	padding-left: 2rem;
	background:
		url('../images/icons/arrow_top_right-small.svg')
		no-repeat center left;
}

.call-to-action[target=_blank]:hover{
	background-position: top -4px left .25rem;
}

/* ----- z.2 styled list ---------------------------------------------------- */
ol.styled-list{
	margin-top: 1.75rem; /* 1.5em + .25em to compensate negative margin on li */
	counter-reset: counter;
	border-left: 1px solid var(--co-watermark);
	padding-left: 1.2rem;
}

ol.styled-list li{
	position: relative;
	counter-increment: counter;
	padding-left: 2rem;
}

@supports (transition: opacity .6s, transform .6s){
	ol.styled-list{
		opacity: 0;
		transform: scaleY(0);
		transform-origin: top left;
	}

	ol.styled-list.visible{
		opacity: 1;
		transform: none;
		transition: opacity .6s, transform .6s;
	}

	ol.styled-list li{
		opacity: 0;
		transform: translateY(var(--sp-small));
		transition: opacity .6s, transform .6s;
		transition-delay: .4s;
	}

	ol.styled-list.visible li{
		opacity: 1;
		transform: none;
	}
}

.styled-list li:nth-child(2){ transition-delay:  .55s; }
.styled-list li:nth-child(3){ transition-delay:  .70s; }
.styled-list li:nth-child(4){ transition-delay:  .85s; }
.styled-list li:nth-child(5){ transition-delay: 1.00s; }
.styled-list li:nth-child(6){ transition-delay: 1.15s; }
.styled-list li:nth-child(7){ transition-delay: 1.35s; }
.styled-list li:nth-child(8){ transition-delay: 1.75s; }
.styled-list li:nth-child(9){ transition-delay: 2.10s; }

ol.styled-list li:not(:last-of-type){
	padding-bottom: 1.5rem;
}

ol.styled-list li::before{
	position: absolute;
	top: -.25rem;
	left: 0;
	z-index: -1;
	content: counter(counter);
	font: 700 1.5rem/1.333 'PT Serif';
	color: var(--co-text-heading);
}

/* ----- z.3 stats ---------------------------------------------------------- */
.stats .number{
	position: relative; /* to absolutely position the sub */
	display: inline-block;
	animation: none;
	opacity: 1;
	margin: var(--sp-small) .25rem 0 0;
	padding-bottom: .25rem;
}

.stats .number sup{
	position: absolute;
	top: .75rem;
	right: -1.5rem;
	font-size: 1.5rem;
	margin: -.25rem 0 0 .25rem;
}

.stats figcaption{
	margin: -.25rem 0 .25rem;
}

@media (min-width: 28em){
	.stats figcaption{
		display: inline-block;
		margin: 0;
	}
}

.stats .track,
.stats .progress{
	height: 4px;
	border-radius: 2px;
	background: var(--co-watermark);
}

.stats.green .progress{
	background-color: #51CCA3;
}

.stats.orange .progress{
	background-color: #E6A15C;
}

@supports (transition: transform .6s){
	.stats .progress{
		transform: scaleX(0);
		transition: transform .6s .6s;
		transform-origin: center left;
	}

	.stats.visible .progress{
		transform: none;
	}
}


/* ----- z.4 frames ---------------------------------------------------------- */
.tablet-frame .image,
.mobile-frame .image{
	display: block;
	position: relative; /* to absolutely position the .shadow */
	overflow: hidden;
	border-radius: 1rem;
	align-self: flex-start;
	box-shadow:
		-24px 48px 48px 0 rgba(0,0,0,0.08),
		-12px 24px 24px 0 rgba(0,0,0,0.08),
		-4px 12px 12px 0 rgba(0,0,0,0.16),
		-1px 2px 4px 0 rgba(0,0,0,0.16);
}

.tablet-frame .shadow,
.mobile-frame .shadow{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 1rem;
	background-color: transparent;
	border: .25rem solid #ffffff;
	box-shadow: inset 0 1px 3px 0 rgba(0,0,0,0.08);
}

@media (min-width: 60em){
	.tablet-frame .image,
	.tablet-frame .shadow{
		border-width: .5rem;
		border-radius: 2rem;
	}
}


/* 4. Layout
----------------------------------------------------------------------------- */

/* ----- 4.1 general -------------------------------------------------------- */
ul,
ol,
.indent{
	padding-left: 0;
	margin-left: 1.5rem;
}

.no-indent,
.no-indent ul,
.no-indent ol{
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

figure,
img,
video{
	max-width: 100%;
}

img[class*=icon]{
	display: inline-block;
	vertical-align: top;
	margin-left: .125rem;
}

[hidden]{
	display: none!important;
}

.sr-only:not(.show):not(:focus):not(:active) {
	clip: rect(0 0 0 0); 
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
	opacity: 0;
	transition: opacity 0s;
}

/* ----- 4.2 maximum widths ------------------------------------------------- */
.reading-width{
	max-width: 37.5rem;
}

.reduced-width{
	max-width: 64.5rem;
	margin: 0 auto;
}

.page-width{
	max-width: 80rem;
	margin: 0 auto;
}

.spacing-sides{
	padding: 0 var(--sp-sides);
}

.section-spacing{
	padding: var(--sp-huge) var(--sp-sides);
}

.standalone.section-spacing,
.standalone .section-spacing{
	padding-bottom: 0;
}

.standalone + .section.section-spacing,
.standalone + .section .section-spacing{
	padding-top: 0;
}

.full-width{
	max-width: none;
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}

@media (max-width: 32em){
	.full-width-mobile:not([class*=frame]){
		max-width: none;
		width: 100vw;
		position: relative;
		left: 50%;
		right: 50%;
		margin-left: -50vw;
		margin-right: -50vw;
	}
}

/* ----- 4.4 grids ---------------------------------------------- */
.grid{
	display: grid;
	gap: var(--sp-large) var(--sp-medium);
}

	/* ----- 7.3.1 two columns ----- */
	.two-columns{
		grid-gap: var(--sp-small);
	}

	@media (min-width: 50em){
		.two-columns{
			grid-template-columns: 1fr 1fr;
			grid-gap: var(--sp-medium);
		}
		.two-columns.bleeding-left{
			padding-left: 0;
		}

		.two-columns.bleeding-right{
			padding-right: 0;
		}
	}

	@media (min-width: 67.5em){
		.two-columns{
			grid-template-columns: minmax(auto, 30rem) 1fr;
			grid-gap: var(--sp-large);
		}

		.two-columns.small-right,
		.two-columns.large-left{
			grid-template-columns: minmax(50%, 40rem) minmax(25rem, 29.5rem);
		}

		.two-columns.huge-top,
		.two-columns.small-left,
		.two-columns.large-right{
			grid-template-columns: minmax(25rem, 29.5rem) minmax( 50%, 40rem);
		}

		.two-columns.tiny-right,
		.two-columns.huge-left{
			grid-template-columns: minmax(50%, 40rem) minmax(18rem, 25rem);
		}

		.two-columns.tiny-left,
		.two-columns.huge-right{
			grid-template-columns: minmax(18rem, 25rem) minmax(50%, 40rem);
		}
	}

	/* ----- 7.3.1 three columns ----- */
	@supports (transition: opacity .9s, transform .6s){
		.three-columns li{
			opacity: 0;
			transform: translateX(var(--sp-small));
			transition: opacity .9s, transform .6s;
		}
	}

	.three-columns.visible li{
		opacity: 1;
		transform: none;
	}

	.three-columns li:nth-child(2){ transition-delay: .15s }
	.three-columns li:nth-child(3){ transition-delay: .30s }

	@media (min-width: 46em) and (max-width: 57.99em){
		.three-columns.images{
			grid-template-columns: 1fr 1fr;
		}

		.three-columns.images .column:nth-child(3){
			grid-column: 1 / span 2;
		}

		.three-columns.images .column:nth-child(3) img{
			width: calc(50% - (var(--sp-medium) / 2));
			float: left;
			margin: 0 var(--sp-medium) var(--sp-medium) 0;
		}
	}

	@media (min-width: 58em){
		.three-columns{
			grid-template-columns: repeat(3, 1fr);
		}
	}

	.three-columns.numbers{
		counter-reset: counter;
		grid-row-gap: 0;
	}

	.three-columns.numbers .column{
		position: relative;
		counter-increment: counter;
		padding: 4.2rem 0 0 var(--sp-small);
	}

	.three-columns.numbers .column::before{
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		content: '0' counter(counter);

		font: 700 7.5rem/1.2 'PT Serif';
		color: var(--co-watermark);
	}

	.three-columns.numbers h3{
		padding-top: var(--sp-small);
	}

	.three-columns.images .image{
		margin-bottom: var(--sp-small);
		width: 100%;
		vertical-align: bottom;
		box-shadow: 0 1px 4px rgba(0,0,0,.08);
		border-radius: 4px;
	}


/* ----- 4.3 sections ------------------------------------------------------- */

	/* ----- X.3.1 genearl ----- */
	.section{
		position: relative; /* to absolutely position the gradient border */
		z-index: 0; /* to make the ::before for .three-columns.numbers visible*/
	}

	.section.lighter{
		background-image: linear-gradient(90deg, var(--co-background) 0%, var(--co-background-tint) 100%);
	}

	/* ----- X.3.2 separation border ----- */
	.section:not(:first-of-type)::before{
		content: '';
		position: absolute;
		right: 0;
		top: 0;
		left: 0;
		height: 1px;
		background-image: linear-gradient(90deg, var(--co-background) 0%, var(--co-border-subtle) 100%);
	}

	.section:not(.lighter) + .section.lighter + .section.lighter::before{
		background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 100%);
	}

	.section.lighter + .section:not(.lighter) + .section:not(.lighter)::before{
		background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.15) 50%, rgba(255,255,255,0) 100%);
	}

	.section.standalone + .section::before{
		display: none;
	}

	body > *:not(.navigation-header) {
		opacity: 0;
		animation:
			fadeIn .6s .3s forwards,
			slideInBottom .9s .3s forwards;
	}

/* 10. Snippets
----------------------------------------------------------------------------- */

	/* ----- 10.1 navigation header ------------------------------------------- */

	/* ----- 10.1.1 logo ----- */
	.logo{
		display: inline-block;
		transform: scale(.8);
		opacity: 1;
		margin: var(--sp-medium) 0 0 var(--sp-sides);
		transform-origin: bottom left; /* to prevent weird spacing when transform */
	}

	@media (min-width: 50em){
		.logo{
			transform: none; /* reset the scaling on mobile*/
		}
	}

	/* ----- 10.1.2 navigation ----- */
	.navigation{
		overflow-x: scroll;
		white-space: nowrap;
		padding-left: var(--sp-sides);
		margin: var(--sp-medium) 0 var(--sp-large);
		border-bottom: 1px solid var(--co-border-subtle);
	}

	.navigation::-webkit-scrollbar{
		display: none;
	}

	.navigation a{
		display: inline-block;
		padding: var(--sp-tiny) 0;
		border-bottom: 1px solid transparent;
		margin-right: 1.5rem;
		text-decoration: none;
		color: var(--co-text-heading);
		transition: border-color .25s;
	}

	.navigation a:last-of-type{
		margin-right: var(--sp-sides);
	}

	.navigation [aria-current=page],
	.navigation a:hover{
		border-color: currentColor;
	}

	/* ----- 10.1.3 tablet & desktop ----- */
	@media (min-width: 37em){
		.navigation-header{
			overflow: auto;
		}

		.navigation{
			float: right;
			overflow-x: initial;
			white-space: normal;
			padding-left: 0;
		}

		.navigation a{
			margin-bottom: -1px;
		}
	}

	/* ----- 10.2 homepage header --------------------------------------------- */
	.homepage-header{
		position: relative;
		/* Max-width is 840px so that the H1 is aligned nicely */
		max-width: calc(52.5rem + ( 2 * var(--sp-sides) ));
		min-height: calc(24rem + 20vw);
		margin: 0 auto;

		background: url('../images/homepage-header-visual@2x.jpg') no-repeat bottom left 1em;
		background-size: 135%;
	}

	.callout{
		display: inline-block;
		padding: .5rem 1.25rem .5rem 1rem;
		background-color: #284F5A;
		box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
		border-radius: 25px;
		line-height: 1.5rem;
		color: #5CE6B8;
		white-space: nowrap;
	}

	.callout .dot{
		display: inline-block;
		height: .5rem;
		width: .5rem;
		margin-right: .25rem;
		border-radius: .25rem;
		background-color: #5CE6B8;
	}

	@media (min-width: 48em){
		.callout {
			position: absolute;
			z-index: 1;
			left: 50%;
			bottom: -1.5rem;
			right: auto;
			transform: translateX(-50%);
			padding: .75rem 2rem .75rem 1.5rem;
			background-color: rgba(88,182,151,0.16);
			-webkit-backdrop-filter: blur(.75rem);
			backdrop-filter: blur(.75rem);
		}
	}

	@media (min-width: 28em){ /* same brake point as h1 */
		.homepage-header{
			min-height: calc(30rem + 20vw);
			background-size: 600px;
		}
	}

	@media (min-width: 36em){
		.homepage-header{
			min-height: calc(52.5rem - 36vw);
			background-position: bottom center;
		}
	}

	@media (min-width: 60em){
		.homepage-header{
			min-height: 30rem;
		}
	}

	/* ----- 10.2 project header --------------------------------------------- */
	.project-header .grid{
		padding-bottom: var(--sp-large);
		background: url('../images/project-header-visual@2x.jpg') no-repeat bottom left 4rem;
		background-size: 37.5rem;
	}

	.project-header .image{
		align-self: flex-end;
	}

	.project-header .label{
		margin-bottom: .75rem;
		font-size: 0.6875rem;
		font-weight: 500;
		text-transform: uppercase;
		letter-spacing: .05rem;
		animation:
			fadeIn .6s .3s forwards,
			slideInLeft .9s .3s forwards;
	}

	.project-header .label span{
		padding-bottom: .25em;
		border-bottom: 1px solid var(--co-border-subtle);
		clear: both;
	}

	.project-header dt{
		opacity: .8;
	}

	.project-header span{
		float: left;
		margin-right: var(--sp-medium);
	}

	@media (min-width: 37.5em){
		.project-header .grid{
			background-position: bottom right;
		}
	}


	/* ----- 10.2 logo banner ------------------------------------------------- */
	.logo-banner .horizontal-scroll{
		overflow-x: scroll;
		white-space: nowrap;
		/* add padding to the container being scrolled so the logos stay visible on
		the entire screen width */
		padding: var(--sp-medium) 0 var(--sp-medium) var(--sp-sides);
	}

	.logo-banner li{
		display: inline-block;
		max-width: 80px;
	}

	.logo-banner .horizontal-scroll::-webkit-scrollbar{
		display: none;
	}

	@media (min-width: 30em){
		.logo-banner .horizontal-scroll{
			overflow-x: hidden;
			text-align: center;
			padding-left: 0;
		}

		.logo-banner li{
			max-width: calc(18% - var(--sp-small));
		}

		.logo-banner li:not(:nth-of-type(-n+5)){
			display: none;
		}

		.logo-banner li:not(:first-of-type){
			margin-left: var(--sp-small);
		}
	}

	@media (min-width: 64em){
		.logo-banner li{
			max-width: 10rem;
		}
	}


/* ----- 10.4 image and text ------------------------------------------------ */

	/* ----- 10.4.1 background image ----- */
	.text-and-image[class*=background]{
		min-height: 70vh;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}

	.text-and-image[class*=background] .grid{
		width: 100%;
	}

	@media (max-width: 60em){
		.text-and-image[class*=background]{
			background-image: none!important; /* overrule inline CSS */
		}
	}

	@media (min-width: 50em){
		.text-and-image[class*=background] .image{
			display: none;
		}

		.text-and-image.text-left{
			background-position: right;
			align-items: left;
		}

		.text-and-image.text-right{
			background-position: left;
		}
	}

	
	@media (max-width: 50em){
		/* On mobile, the images separate the different sections, so emove the
		section styling */
		.text-and-image.section{
			background-image: none;
		}

		.text-and-image .grid{
			padding-top: 0;
		}

		.text-and-image::before{
			display: none;
		}
	}

	/* ----- 10.4.1 frame ----- */
	@media (max-width: 50em){
		.tablet-frame .image,
		.mobile-frame .image{
			line-height: 0;
			margin-bottom: var(--sp-medium);
		}
	}

	@media (min-width: 50em){
		/* Add negative margin, to let mockup overlap previous .section */
		.tablet-frame + .tablet-frame .image,
		.mobile-frame + .mobile-frame .image{
			margin-top: calc( -1 * var(--sp-medium) - var(--sp-huge));
		}
	}

	/* ----- 10.4.1 responsive ----- */
	@media (min-width: 50em){

		/* Change position of the image to the right with css */
		.text-and-image[class*=right] .image{
			grid-column: 2;
		}

		.text-and-image[class*=right] .text{
			grid-row: 1;
			grid-column: 1;
		}

		/* ----- image on top ----- */
		.text-and-image[class*=top] .image{
			grid-column: 1 / span 2;
			margin-bottom: calc( -2 * var(--sp-large) );
			border-radius: .5rem;
			overflow: hidden;
			font-size: 0;
			clip-path:
				polygon(
					0 0,
					100% 0,
					100% 100%,
					calc(31rem + var(--sp-medium)) 100%,
					calc(31rem + var(--sp-medium)) calc(100% - 7.5rem),
					0 calc(100% - 7.5rem));
		}

	}


	/* ----- 10.3 recommendations ----------------------------------------------------- */
	.recommendations{
		/* Add a bit of extra spacing to the top of this section because of the spacing the
		.recommendation-nav creates at the bottom */
		padding-top: calc(var(--sp-huge) + var(--sp-small));
	}

	/* If transitions are supported, add them (.visible added by JS)*/
	@supports (transition: opacity .6s, transform .6s){
		.recommendation,
		.recommendation.sr-only{
			opacity: 0;
			transform: translateX(var(--sp-tiny));
			transition: opacity .4s, transform .4s;
		}

		.recommendations.visible .recommendation:not(.sr-only){
			opacity: 1;
			transform: none;
		}
	}

	.quote{
		position: relative; /* to place the quote visual absolutely */
		margin-bottom: var(--sp-small);

		font-family: Avenir-LightOblique;
		color: var(--co-text-heading);
	}

	.recommendation .avatar{
		float: left;
		margin: 0 1rem 0 0;
	}

	.recommendation .name{
		padding-top: var(--sp-small);
	}

	.recommendation .position{
		font-family: Avenir-LightOblique;
	}

	.recommendation-nav{
		margin-top: var(--sp-small);
		float: right;
	}

	.recommendation-nav button{
		border: none;
		background-color: transparent;
		vertical-align: middle;
	}

	.recommendation-nav small{
		margin: 0 .5rem;
	}

	.recommendation-nav .count{
		font-family: 'PT Serif', serif;
	}

	@media (min-width: 30em){
		.recommendation blockquote{
			margin: var(--sp-small) auto;
			padding-left: var(--sp-large);
		}

		.quote::before{
			content: '';
			display: block;
			position: absolute;
			top: -.9rem;
			left: -2rem;
			width: 1.5rem;
			height: 1.5rem;
			background: transparent url(../images/quote-visual.svg) no-repeat center;
		}
	}

	@media (min-width: 35em){
		.quote{
			font-size: 1.125rem;
			line-height: 32px;
		}
	}

	@media (min-width: 60em){
		/* this media query is corresponding with the .grid.two-columns class */
		.recommendation blockquote{
			margin: 0;
			padding-left: 0;
		}
	}


/* ----- 10.5 project items ------------------------------------------------- */
@media (min-width: 48em){
	.projects ul{
		
	}

	.projects li{
		grid-template-columns: 26rem 24rem;
		grid-gap: 0;
		justify-content: center;
	}

	.projects .info{
		padding-top: var(--sp-medium);
	}

	.projects .info p{
		margin-bottom: 0;
	}
}


/* ----- 10.5 footer -------------------------------------------------------- */
.footer{
	background-color: var(--co-background-shade);
	padding: var(--sp-large) var(--sp-sides);
}

.footer .grid{
	grid-template-columns: auto 1fr;
}

.footer .social{
	grid-column: 2;
}

.footer p{
	margin-bottom: 0;
}

.social a:not(:first-of-type) img{
	margin-left: 1rem;
}

@media (min-width: 24em){
	.footer .grid{
		align-items: center;
		grid-row-gap: 0;
	}
}

@media (min-width: 45em){
	.footer .grid{
		grid-template-columns: auto 1fr auto;
	}

	.footer .social{
		grid-column: 3;
	}
}










.contact::after{
	min-height: 20vh;
	display: block;
	position: absolute;
	bottom: 0;
	z-index: -1;
	content: '';
	width: 100%;
	background-color: var(--co-background-shade);
}


/* 6. Animations
----------------------------------------------------------------------------- */
@keyframes slideInBottom {
	from{
		transform: translateY( calc( var(--sp-small) ) );
	} to{
		transform: none;
	}
}

@keyframes slideInLeft{
	from{
		transform: translate( calc( -1 * var(--sp-small) ), calc( var(--sp-small) * -1 ));
	}to {
		transform: none;
	}
}

@keyframes fadeIn {
	from{
		opacity: 0;
	}to {
		opacity: 1;
	}
}


















/* 6. Print
----------------------------------------------------------------------------- */

@media print {

	body{
		color: #333;
		background: #fff;
	}

	nav,
	aside,
	.no-print{
		display: none;
	}

	body,
	article{
		width: 100%;
		margin: 0;
		padding: 0;
		float: none;
	}

	@page{
		margin: 2cm;
	}

	h2,
	h3{
		page-break-after: avoid;
	}

	article{
		page-break-before: always;
	}

	ul,
	ol,
	img{
		page-break-inside: avoid;
	}

	img{
		max-width: 100%;
	}

	article a[href^="http"]:after{
		content: " <" attr(href) "> ";
	}

	article a[href^="#"]:after{
		content: "";
	}

}