@media all and (max-width: 2560px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 2560px;
	}

	#main-page {
		padding-bottom: 12em;
	}

	.main-mini-list {
		padding-top: 10px;
	}

	.container {
		padding: 50px;
		padding-top: 0;
	}

	.grid-1 {
		grid-template-columns: .7fr .7fr .7fr .7fr .7fr .7fr 7fr .8fr;
	}

	#landing-cut {
		margin-top: 21.3%;
	}

	.main-copy {
		font-size: 265px;
		letter-spacing: -3px;
		line-height: 1.07em;
	}

	p {
		font-size: 11px;
		letter-spacing: .6px;
		line-height: 2.5em;
	}

	ul {
		line-height: 1.1em;
	}

	li a {
		font-size: 11px;
		letter-spacing: .8px;
		line-height: 1.8em;
	}

	.home-button {
		font-size: 32px;
		letter-spacing: .6px;
	}

	.timer-container {
		right: 4.5em;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.setList {
		font-size: 36px;
		letter-spacing: -.3px;
		left: -2.55em;
		margin-top: 35%;
	}

	#bottom-list {
		margin-top: 3%;
	}

	.volume-number {
		height: 17.5em;
	}

	.chunk {
		font-size: 450px;
		line-height: 115px;
		letter-spacing: -2px;
		top: 50%;
	}

	.theVolume {
		position: relative;
		/*top: -2.5em;*/
	}

	.chunk-number {
		font-size: 10px;
		letter-spacing: 1.5px;
		line-height: 9px;
		padding-bottom: 1.8em;
	}

	.bottom-list-line {
		position: relative;
		/*top: -2.7em;*/
		left: -10em;
	}

	.chunk-list a {
		font-size: 16px;
		letter-spacing: .8px;
		line-height: 1.8em;
	}

	.video-list {
		left: -5.5em;
		top: 1em;
	}

	.hover-copy a {
		font-size: 12px;
		letter-spacing: .6px;
		line-height: 0;
	}

	.vol-under-giorgio {
		margin-top: 1em;
	}

	#volume-prologue {
		position: relative;
		top: -1em;
	}

	#volume-two {
		position: relative;
		top: -.5em;
	}

	#volume-three {
		position: relative;
		top: -.6em;
	}

	#volume-intermission, #volume-epilogue {
		position: relative;
		top: -1em;
	}

	.under-prologue {
		top: .5em;
	}

	.under-intermission {
		top: 1.4em;
	}

	.portrait-container {
		top: 2%;
		right: 50px;
		height: 100%;
	}

	.portrait-container.tapped {
		top: 0;
	}

	.designer-portrait {
		max-height: 96%;
	}

	.volume-description {
		width: 100%;
		margin-top: .5em;
	}

	.volume-description p {
		font-size: 48px;
		letter-spacing: .2px;
		line-height: 1.1em;
	}

	#openbtn2 {
		left: -5.45em;
		bottom: -7em;
	}

	.small-description {
		width: 40%;
		margin-top: 2em;
		left: 10em;
	}

	.volume-description-small {
		font-size: 14px;
		line-height: 1.5em;
	}

	.chunk-number-small {
		font-size: 10px;
		letter-spacing: 1.5px;
		line-height: 9px;
		padding-bottom: .8em;
	}

	/*.description-3 {
		width: 58%;
	}*/

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.legacy-button {
		font-size: 10px;
		letter-spacing: 2px;
		top: 5em
		right: 2em;
	}

	.button {
		font-size: 14px;
		letter-spacing: 2px;
		padding-top: 5px;
		padding-bottom: .3em;
	}

	.designer-button {
		font-size: 10px;
		letter-spacing: 2px;
		padding-top: 15px;
	}

	#legacy-content {
		top: 0;
		padding: 20px;
	}

	.legacy-name p {
		font-size: 14px;
		letter-spacing: .7px;
		line-height: 1.6em;
		padding: .247em;
		top: -2em;
	}

	.legacy-row1 {
		top: .3em;
		left: 1.7em;
	}

	.fs-toggle p {
		font-size: 14px;
		letter-spacing: -0.1px;
		margin-right: 1em;
	}

	.list-header {
		left: 38%;
		margin-left: 1.9em;
		margin-top: .3em;
	}

	.list-header p {
		font-size: 9px;
		letter-spacing: 1.7px;
	}

	.designer-header p {
		letter-spacing: 2px;
		font-size: 12px;
		top: -6em;
		padding-left: .3em;
	}

	.grid-9 .volume-number {
		height: 17em;
	}

	#legacy .chunk {
		font-size: 414px;
		line-height: 100px;
		letter-spacing: -2px;
		outline: 0;
		top: 53%;
	}

	.legacy-year {
		letter-spacing: -5px;
	}

	.legacy-link {
		top: 8px;
		right: 2em;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 7em;
	}

	.legacy-line {
		width: 107%;
		/*margin-left: -1.5em;*/
	}

	#legacy-list1 {
		position: fixed;
		left: 40%;
		margin-top: 8em;
	}

	#legacy-list2 {
		position: fixed;
		left: 55%;
		margin-top: 8em;
	}

	#legacy-list3 {
		position: fixed;
		left: 70%;
		margin-top: 8em;
	}

	#legacy-list4 {
		position: fixed;
		left: 85%;
		margin-top: 8em;
	}

	.line-container {
		position: relative;
		top: -.1em;
		left: -2.5em;
	}

	hr {
	    width: 90%;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -1.2em;
	}

/**************************************************
	CREDITS
**************************************************/
	.credits {
		font-size: 10px;
		letter-spacing: 2px;
	}

	.exit-link {
		font-size: 12px;
		letter-spacing: 1.2px;
		margin-top: .9em;
		right: 2em;
	}

	#credits-container {
	    width: 47.5em;
	    height: 89vh;
	    left: 1em;
	}

	.bts-box {
		top: 0;
	}

	.member-info {
		margin-top: 1em;
	}

	.name {
		font-size: 20px;
		line-height: 1.5em;
	}

	.roles {
		font-size: 14px;
		letter-spacing: .7px;
	}

	.location {
		font-size: 12px;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 93em;
		height: 70vh;
	}

	#bts-container {
		margin-top: 9em;
	}

	.bts-footer {
		margin-top: 0em;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE - NAVIGATION
//////////////////// ///////////////////////*/
	#film {
		padding: 10px;
	}

	.top-right {
		top: 0;
		right: 5em;
	}

	.program {
		padding-left: 10px;
	}

	.controls {
		z-index: 2147483647;
	}

/*//////////////////// ///////////////////////
	VIDEO PLAYER
//////////////////// ///////////////////////*/
	#video_player_box {
		margin: 0px auto;
		max-width: 100%;
	}

	#video_player_box video {
		min-width: 100%;
		max-height: 98vh;
		/*left: 50%;*/
	}

	#video_controls_bar {
		font-size: 10px;
		letter-spacing: 1.5px;

		padding: 5px;
		bottom: 1.5em;
		width: 100%;
	}

	button {
		font-size: 10px;
		letter-spacing: 2px;
	}

	#playpausebtn {
		width: 5%;
	}

	#seekslider {
		width: 79%;
		left: -5em;
		margin-right: 1.6em;
	}

	#fullscreenbtn {
		width: 10%;
		right: 0;
	}

	/* SLIDER BAR */
	input[type='range'] {
	    height: .4em;
	    top: -0.1em;
	}

	/* SLIDER KNOB */
	input[type='range']::-webkit-slider-thumb {
	    width: 1em;
	    height: .4em;
	}

	.transcript-link {
		margin-left: 2.7em;
		margin-top: .1em;
	}

/*//////////////////// ///////////////////////
	VIDEO PLAYER - TRIGGER
//////////////////// ///////////////////////*/
	.watch {
		top: 53%;
		left: 50%;
		transform: translate(-50%, -75%);
	}

	.watch .volume-number {
		height: 6em;
		width: 52em;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		top: 27%;
		font-size: 100px;
	}

	.watch .chunk:hover {
		top: -12%;
	}

	.film-title {
		top: .3em;
	}

	.play-indicator {
		margin-top: .7em;
	}

/**************************************************
	.watch .chunk TOP DEPTH
**************************************************/
	#stefano .chunk, #toan .chunk, #boggeri .chunk,
	#aldo .chunk, #giorgio .chunk, #andrea .chunk,
	#sean .chunk, #whatisdesign .chunk, #craft .chunk,
	#jekyll .chunk {
		top: 27%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover {
		top: -3%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover, #whatisdesign .chunk:hover,
	#craft .chunk:hover {
		top: -15%;
	}

/**************************************************
	EXTENDED CONTENT - BUTTON
**************************************************/
	.to-extended {
		height: 4em;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		max-width: 100%;
		left: 20px;
		bottom: 75px;
	}

	#forFjord {
		left: 17px;
		bottom: 3.5em;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 60px;
		letter-spacing: .2px;
		position: relative;
		top: 32%;
		opacity: .5;
		letter-spacing: -.2px;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: -5%;
		opacity: 1;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	#fjord-scroll {
		top: 60%;
	}

/**************************************************
	EXTENDED CONTENT - INTRO
**************************************************/
	.extended-title {
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 24%;
		left: 20px;
	}

	.extended-intro .maestro {
		font-size: 40px;
		line-height: 1.3em;
		margin-top: -.2em;
		margin-bottom: 0em;
	}

	.intro-bio {
		width: 100%;
	}

	.intro-bio p {
		font-size: 18px;
		letter-spacing: 3px;
		line-height: 27px;
	}

	.intro-bio-line {
		position: fixed;
		width: 100%;
		top: 22em;
		left: 20px;
	}

	.intro-bio-line hr {
		width: 75%;
		margin: 0;
	}

	#designer-anecdotes {
		position: absolute;
		left: 20px;
		top: 35%;
	}

	#designer-anecdotes .anecdotes-header {
		margin-bottom: 1.5em;
	}

	#designer-anecdotes .maestro {
		font-size: 80px;
		letter-spacing: -.5px;
		margin-bottom: 1.1em;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	#designer-anecdotes .maestro:hover {
		opacity: .3;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	.individual-chapter {
		margin-bottom: .5em;
	}

	.scroll-hint {
		position: absolute;
		top: 60%;
		left: 20px;
		margin-top: 2em;
		cursor: pointer;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		font-size: 12px;
		letter-spacing: 2px;
		line-height: .3em;
	}

	.scroll-hint:hover {
		opacity: .3;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	#section01-scroll-hint {
		top: 42%;
	}

	#section02-scroll-hint {
		top: 52%;
	}

/**************************************************
	EXTENDED CONTENT - SECTIONS
**************************************************/
	.chapter-container {
		width: 100%;
		position: relative;
		top: 25%;
		left: 20px;
	}

	.project-quote-header .maestro {
		font-size: 36px;
		letter-spacing: -.1px;
		margin-bottom: -.2em;
	}

	.designer-quote {
		width: 65%;
	}

	.designer-quote p {
		font-size: 20px;
		letter-spacing: .7px;
		line-height: 2em;
	}

	.who-said-it p {
		font-size: 20px;
		margin-top: 1em;
	}

/**************************************************
	OUTRO CONTAINER
**************************************************/
	#outro-container {
		bottom: 0em;
		left: 50%;
		width: 65%;

		-webkit-transform: translate(-50%, 0px);
		-moz-transform: translate(-50%, 0px);
		-o-transform: translate(-50%, 0px);
		-ms-transform: translate(-50%, 0px);
		transform: translate(-50%, 0px);
	}

	.citation-button {
		top: 1em;
		right: 3em;
	}

	.next-film-volume {
		margin-bottom: .5em;
	}

	.next-film-volume-title {
		margin-bottom: 2em;
	}

	.next-quote {
		font-size: 48px;
		letter-spacing: -.3px;
		line-height: 1.4em;
	}

	.next-quote strong {
		letter-spacing: -.9px;
	}

	.vl {
	    border-left: 1px solid;
	    height: 7em;
	    top: 5em;
	    left: 50%;
	    margin-left: -3px;
	}

	.next-film-container {
		width: 100%;
		height: 12em;
		bottom: 75px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.next-quote-container {
		bottom: 30em;
		opacity: 0;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 35em;
		opacity: 1;
	}

	.next-film {
		margin-top: 3em;
	}

	.next-film:hover {
		margin-top: .3em;
	}

	.next-up {
		font-size: 14px;
		margin-bottom: -4em;
	}

	.next-film-name {
		font-size: 120px;
		letter-spacing: -3px;
	}

	#enterVolume {
		margin-top: 4.1em;
	}

	#enterVolume:hover {
		margin-top: 2.5em;
	}

	#enterNextVol {
		margin-top: .3em;
	}

	#nextVolContainer {
		height: 14em;
		bottom: -11.7em;
	}

	#enterVolume {
		margin-top: 4.2em;
	}

	#enterVolume:hover {
		margin-top: 1.5em;
	}

	#enterNextVol {
		margin-top: .3em;
	}

/*//////////////////// ///////////////////////
	OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	#letter-quote {
		width: 52%;
	}

	#seanNext {
		width: 58%;
	}

	#whatNext, #kazuyoNext,
	#toanNext, #jekyllNext {
		width: 60%;
	}

	#odoNext, #armandoNext, #fjordNext {
		width: 65%;
	}

	#boggeriNext,
	#burnkitNext, #civNext {
		width: 70%;
	}

	#stefanoNext {
		width: 75%;
	}

	#elenaNext{
		width: 80%;
	}

/**************************************************
	EXTENDED CONTENT - IMAGES
**************************************************/
	.project-image-container, .fjord-image-container {
		right: 10px;
		max-width: 100%;
		height: 92vh;
		top: 10px;
	}

	.project-image-container img {
		min-width: 100%;
		min-height: 100%;
	}

	.fjord-image-container img {
		max-width: 100%;
	}

	.extended-video {
		min-width: 100%;
		min-height: 100%;
	}

	.extended-caption {
		position: relative;
		bottom: 9em;
		right: 25px;
		font-size: 14px;
		text-align: right;
		letter-spacing: .4px;
	}

	.video-caption {
		bottom: 9em;
	}

	.white-caption {
		color: #EFF1E4;
	}

/**************************************************
	SLIDE ANCHORS
**************************************************/
	.quote-anchor {
	    top: 23%;
	    left: 38.3%;
	}

	.fp-bottom ul .slide-anchor {
		margin-bottom: .5em;
	}

	.slide-anchor-number {
		width: 4em;
		height: 2.5em;
		overflow: hidden;
	}

	.slide-anchor-number p {
		font-family: 'NHaasGroteskDSPro-65Md', sans-serif;
		font-size: 36px;
		line-height: .7em;
		position: relative;
		margin-top: 22%;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	.slide-anchor-number p:hover {
		margin-top: 7%;
		opacity: 1;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	.slide-anchor-line hr {
		width: 190%;
		position: relative;
		margin-top: .1em;
		margin-bottom: 0;
		z-index: 0;
	}

/**************************************************
	EXTENDED CONTENT - QUOTE WIDTH
**************************************************/
	#qeeboo-quote03, #uoma-quote01, #identity-quote02 {
		width: 46%;
	}

	#biscuit-quote, #ballet02-quote {
		width: 49%;
	}

	#merdolino-quote, #identity-quote01 {
		width: 50%;
	}

	#primates-quote03, #studio02-quote {
		width: 51%;
	}

	#dual-quote, #frida02-quote, #identity-quote03 {
		width: 52%;
	}

	#honest01-quote, #primates-quote01 {
		width: 53%;
	}

	#qeeboo-quote01, #uoma-quote02 {
		width: 54%;
	}

	#ino-quote, #maestro-quote01, #ballet-quote,
	#africa-quote, #heritage-quote02, #heritage-quote03  {
		width: 55%;
	}

	#kazuyo-quote01, #kazuyo-quote03, #maestro-quote03 {
		width: 56%;
	}

	#biscuit-quote, #qeeboo-quote02, #kazuyo-quote02 {
		width: 57%;
	}

	#honest03-quote, #radical-quote, #uomamoda-quote01,
	#dalisi01-quote, #hidden-quote01, #achille-illustrious01-quote,
	#practice-quote01, #practice-quote03 {
		width: 58%;
	}

	#sans-quote01 {
		width: 59%;
	}

	#studio01-quote, #heritage-quote01 {
		width: 60%;
	}

	#canon-quote, #hidden-quote02 {
		width: 61%;
	}

	#frida02-quote {
		width: 62%;
	}

	#frida01-quote {
		width: 63%;
	}

	#honest02-quote {
		width: 64%;
	}

	#maestro-quote02, #practice-quote02 {
		width: 65%;
	}

	#primates-quote02, #sans-quote02 {
		width: 66%;
	}

	#around-quote {
		width: 72%;
	}

	#steiner-quote {
		width: 75%;
	}

/**************************************************
	VIDEO PLAYER - HEADER WIDTH
**************************************************/

	#giorgio .volume-number {
		width: 40.5em;
	}

	#stefano .volume-number {
		width: 52em;
	}

	#elena .volume-number {
		width: 46em;
	}

	#kazuyo .volume-number {
		width: 43.5em;
	}

	#toan .volume-number {
		width: 35em;
	}

	#odo .volume-number {
		width: 38.5em;
	}

	#boggeri .volume-number {
		width: 39em;
	}

	#armando .volume-number {
		width: 40.7em;
	}

	#sean .volume-number {
		width: 35.5em;
	}

	#andrea .volume-number {
		width: 19.2em;
	}

	#jekyll .volume-number {
		width: 35em;
	}

	#aldo .volume-number {
		width: 51.2em;
	}

	#whatisdesign .volume-number {
		width: 38.3em;
	}

	#civilization .volume-number {
		width: 28.3em;
	}

	#burnkit .volume-number {
		width: 19.5em;
	}

	#craft .volume-number {
		width: 39em;
	}

/*//////////////////// ///////////////////////
    FJORD
//////////////////// ///////////////////////*/
	.grid-18 {
		grid-template-columns: 8fr 3fr 1fr;
	}

	.fjord-content {
		top: 26em;
		padding: 10px;
	}

	.fjord-audio {
		margin-top: -.3em;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 16px;
		letter-spacing: .5px;
		line-height: 3em;
	}

	.fjord-main-copy {
		font-size: 200px;
		letter-spacing: -2.5px;
		line-height: 60px;
		margin-top: .3em;
		margin-bottom: .5em;
		margin-left: -5px;
	}

	#fjord-copy .chunk-number {
		font-size: 14px;
		margin-bottom: 7em;
	}

	#fjord-header {
		max-width: 48%;
		top: 0;
		left: 1.2em;
	}

	#seb-header, #lidia-header, #amedeo-header {
		left: 1.2em;
	}

	#fjord-header .fjord-blurb{
		max-width: 79%;
	}

	#seb-copy {
		max-width: 40%;
	}

	#seb-copy02, #lidia-header  {
		max-width: 50%;
	}

	#lidia-copy02 {
		max-width: 85%;
	}

	#amedeo-copy {
		max-width: 55%;
	}

	#amedeo-copy02 {
		max-width: 60%;
	}

	#lidia-header .fjord-blurb, #amedeo-header .fjord-blurb  {
		max-width: 65%;
	}

	.fjord-designer-copy {
		font-size: 80px;
		line-height: 1.2em;
		letter-spacing: -.7px;
		padding-top: .3em;
		padding-bottom: .3em;
	}

	.fjord-blurb {
		font-size: 22px;
		letter-spacing: 0.5px;
		line-height: 1.7em;
	}

	.fjord-list {
		top: 0em;
	}

	.audio-headers {
		font-size: 10px;
		letter-spacing: 1.5px;
		line-height: 9px;
		margin-bottom: 2.5em;
	}

	.audio-time {
		right: 13.5em;
		margin-top: -.8em;
	}

	.fjord-portrait-container {
		top: 0;
		left: 0;
		max-width: 100%;
		max-height: 100%;
		padding: 10px;
	}

	.fjord-portrait {
		width: 150%;
	}

	.fjord-overlay, .designer-overlay {
		top: 0;
		width: 200%;
		height: 100%;
	}

	#lidia-container, #amedeo-container {
		margin-top: 3em;
	}

	.audio-list {
		margin-top: -2em;
	}

	.fjord-player {
		bottom: 0em;
		width: 100%;
	}

	#audio-player {
		width: 100%;
		left: 10px;
		bottom: 1em;
		padding: 10px;
	}

	#audio-player nav {
		z-index: 2147483647;
		color: #F1F0E4;
		font-size: 10px;
		letter-spacing: 1.5px;
	}

	#progressBar {
		width: 85%;
		left: 1em;
		margin-right: 3em;
	}

	#muteButton {
		margin-left: 1em;
		width: 7em;
		height: 2em;
		right: 5em;
	}

	.fjord-transcript-link {
		margin-top: .4em;
	}

	#fjord-intro-quote {
		margin-top: -.5em;
		line-height: 1.2em;
		width: 65%;
		font-size: 65px;
	}

	#playButton {
		width: 5em;
		height: 2em;
	}

	.fjord-anecdotes #chapter-list {
		max-width: 100%;
	}

	#fp-nav ul li a span, .fp-slidesNav ul li a span {
		display: none;
	}

	#fjord-slide01 .chapter-container,
	#fjord-slide02 .chapter-container,
	#fjord-slide03 .chapter-container,
	#fjord-extended-title, #fjord-scroll {
		left: 30px;
	}

	.fjord-anecdotes {
		left: 30px !important;
	}

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.prologue-anchor {
		top: 10px;
		left: 154em;
		right: 1.8em;
	}

	.prologue-container {
		margin-top: 45%;
		transform: translate(0, -75%);
	}

	.prologue-intro-quote {
		font-size: 95px;
		line-height: 1.2em;
		letter-spacing: -.7px;
		padding-top: .3em;
		padding-bottom: .3em;
		width: 80%;
	}

	.prologue-intro-copy {
		font-size: 26px;
		letter-spacing: 0.5px;
		line-height: 1.7em;
		width: 75%;
	}

	#prologue-scroll {
		margin-top: 5em;
	}

	.prologue-title {
		margin-bottom: .5em;
	}

	.prologue-quote {
		font-size: 36px;
		line-height: 1.8em;
		margin-top: 1em;
	}

	#prologue-quote01 {
		width: 65%;
	}

	#prologue-quote02 {
		width: 57%;
	}

	.prologue-vl {
		border-left: 1px solid;
	    height: 7em;
	    top: 2em;
	    left: 50%;
	    margin-left: -3px;
	}

	.epilogue-vl {
		border-left: 1px solid;
	    height: 5em;
	    top: 2em;
	    left: 50%;
	    margin-left: -3px;
	}

/*//////////////////// ///////////////////////
    EPILOGUE EPILOGUE EPILOGUE EPILOGUE
//////////////////// ///////////////////////*/
	.epilogue-quote {
		font-size: 36px;
		letter-spacing: -.3px;
		line-height: 1.8em;
		width: 70%;
	}

	.epilogue-quote strong {
		letter-spacing: -1px;
	}

/*//////////////////// ///////////////////////
    ABOUT THE FILM ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-container {
		position: relative;
		top: 25%;
		left: 20px;
	}

	.documentary {
		margin-bottom: 1em;
	}

	.doc-name {
		margin-bottom: 1em;
	}

	.doc-name p {
		font-size: 70px;
		letter-spacing: -.5px;
		line-height: 1.2em;
	}

	.doc-name p span {
		font-size: 32px;
		letter-spacing: -.3px;
		line-height: 1.2em;
	}

	.doc-description p {
		font-size: 29px;
		line-height: 2em;
	}

	#boggeri-wrapper {
		width: 37%;
	}

	#cimitero-wrapper {
		width: 31%;
	}

	#craft-wrapper {
		width: 32%;
	}
}


@media all and (max-width: 1920px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1920px;
	}

	#main-page {
		padding-bottom: 10em;
	}

	.container {
		padding: 20px;
		padding-top: 0;
	}

	.grid-1 {
		grid-template-columns: .9fr .9fr .9fr .9fr .9fr .9fr .9fr 4.6fr 2fr;
	}

	#landing-cut {
		margin-top: 17.9%;
	}

	.main-copy {
		font-size: 201px;
		letter-spacing: -3.5px;
		line-height: 1.07em;
	}

	p {
		font-size: 12px;
		letter-spacing: .6px;
		line-height: 2.5em;
	}

	ul {
		line-height: 1.1em;
	}

	.top-chunk {
		font-size: 11px;
		letter-spacing: .5px;
		line-height: 2.5em;
	}

	li a {
		font-size: 11px;
		letter-spacing: .8px;
	}

	.home-button {
		font-size: 21px;
		letter-spacing: .8px;
	}

	.grid-3 {
		margin-top: 3%;
	}

	.timer-container {
		right: 2em;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.setList {
		font-size: 30px;
		letter-spacing: -.3px;
		left: -5.15em;
		margin-top: 40%;
	}

	#bottom-list {
		margin-top: 1.5%;
	}


	.volume-number {
		height: 10em;
	}

	.chunk {
		font-size: 260px;
		line-height: 115px;
		letter-spacing: -2px;
		top: 36%;
	}

	.theVolume {
		position: relative;
		/*top: -2.5em;*/
	}

	.chunk-number {
		font-size: 10px;
		letter-spacing: 1.5px;
		line-height: 9px;
		padding-bottom: .8em;
	}

	.bottom-list-line {
		position: relative;
		/*top: -2.7em;*/
		left: -7em;
	}

	.chunk-list a {
		font-size: 12px;
		letter-spacing: .8px;
		line-height: 20px;
	}

	.video-list {
		left: -9.5em;
		top: 1em;
	}

	.hover-copy a {
		font-size: 12px;
		letter-spacing: .6px;
		line-height: 0;
	}

	.vol-under-giorgio {
		margin-top: 0;
	}

	#volume-prologue {
		position: relative;
		top: -.3em;
	}

	#volume-two {
		position: relative;
		top: -.5em;
	}

	#volume-three {
		position: relative;
		top: -.6em;
	}

	#volume-intermission, #volume-epilogue {
		position: relative;
		top: -1em;
	}

	.under-prologue {
		top: .5em;
	}

	.under-intermission {
		top: .8em;
	}

	.portrait-container {
		top: 2%;
		right: 15px;
		height: 100%;
	}

	.portrait-container.tapped {
		top: 0;
	}

	.designer-portrait {
		max-height: 96%;
	}

	.volume-description {
		width: 75%;
		margin-top: 0;
	}

	.volume-description p {
		font-size: 28px;
		letter-spacing: .2px;
		line-height: 35px;
	}

	#openbtn2 {
		left: -9.4em;
		bottom: -7em;
	}

	.small-description {
		width: 52%;
		margin-top: 1.1em;
		left: 0;
	}

	.volume-description-small {
		font-size: 14px;
		line-height: 1.5em;
	}

	.chunk-number-small {
		font-size: 10px;
		letter-spacing: 1.5px;
		line-height: 9px;
		padding-bottom: .8em;
	}

	.description-1 {
		max-width: 70%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.legacy-button {
		font-size: 10px;
		letter-spacing: 2px;
		top: 5em
		right: 2em;
	}

	.button {
		font-size: 10px;
	}

	.designer-button {
		font-size: 10px;
		letter-spacing: 2px;
		padding-top: 15px;
	}

	#legacy-content {
		top: 0;
		padding: 20px;
	}

	.legacy-name p {
		font-size: 12px;
		letter-spacing: .7px;
		line-height: 1.3em;
		padding: .247em;
		top: -2em;
	}

	.legacy-row1 {
		top: .3em;
		left: 1.7em;
	}

	.fs-toggle p {
		font-size: 14px;
		letter-spacing: -0.1px;
		margin-right: 1em;
	}

	.list-header {
		left: 38%;
		margin-left: 1.9em;
		margin-top: .3em;
	}

	.list-header p {
		font-size: 9px;
		letter-spacing: 1.7px;
	}

	.designer-header p{
		letter-spacing: 2px;
		font-size: 10px;
		top: -6em;
		padding-left: .3em;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 10em;
	}


	.grid-9 .volume-number {
		height: 10em;
	}

	#legacy .chunk {
		font-size: 260px;
		line-height: 100px;
		letter-spacing: -2px;
		outline: 0;
		top: 40%;
	}

	.legacy-year {
		letter-spacing: -5px;
	}

	.legacy-link {
		top: 8px;
		right: 2em;
	}

	.legacy-line {
		width: 95%;
	}

	#legacy-list1 {
		position: fixed;
		left: 35%;
		margin-top: 4.2em;
	}

	#legacy-list2 {
		position: fixed;
		left: 47%;
		margin-top: 4.2em;
	}

	#legacy-list3 {
		position: fixed;
		left: 59%;
		margin-top: 4.2em;
	}

	#legacy-list4 {
		position: fixed;
		left: 71%;
		margin-top: 4.2em;
	}

	.line-container {
		position: relative;
		top: -.1em;
		left: -5.5em;
	}

	hr {
	    width: 90%;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -.7em;
	}

/**************************************************
	CREDITS
**************************************************/
	.credits {
		font-size: 10px;
		letter-spacing: 2px;
	}

	.exit-link {
		font-size: 12px;
		letter-spacing: 1.2px;
		margin-top: .9em;
		right: 2em;
	}

	#credits-container {
	    width: 32.2em;
	    height: 85vh;
	    left: 1em;
	}

	.bts-box {
		top: 0;
	}

	.member-info {
		margin-top: 1.2em;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 80em;
		height: 85vh;
	}

	#bts-container {
		margin-top: 0em;
	}

	.bts-footer {
		margin-top: 0em;
	}

/*//////////////////// ///////////////////////
	VIDEO PLAYER
//////////////////// ///////////////////////*/
	#video_player_box video {
		max-width: 100%;
		max-height: 96.5vh;
	}

	#video_controls_bar {
		bottom: 1em;
	}

	#seekslider {
		width: 75.5%;
		left: -3em;
		margin-right: 1.6em;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE - NAVIGATION
//////////////////// ///////////////////////*/
	#designer-anecdotes {
		top: 38%;
	}

	.extended-title {
		top: 23%;
	}

	.extended-intro .maestro {
		font-size: 30px;
	}

	.intro-bio p {
		font-size: 16px;
	}

	.intro-bio-line {
		top: 15.5em;
	}

	#designer-anecdotes .maestro {
		font-size: 70px;
		letter-spacing: -.5px;
		margin-bottom: 1em;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		font-size: 10px;
		letter-spacing: 2px;
		line-height: 1em;
	}

	.scroll-hint {
		top: 66%;
	}

	#section02-scroll-hint {
		top: 56%;
	}

	#section01-scroll-hint {
		top: 46%;
	}

	.designer-quote p {
		font-size: 18px;
	}

/**************************************************
	.watch .chunk TOP DEPTH
**************************************************/
	.watch .chunk, #elena .chunk, #stefano .chunk,
	 #aldo .chunk, #sean .chunk, #andrea .chunk,
	 #toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	 #craft .chunk, #boggeri .chunk, #giorgio .chunk,
	 #whatisdesign .chunk {
		font-size: 85px;
		top: 29%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: 9%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover, #whatisdesign .chunk:hover,
	#craft .chunk:hover  {
		top: -3%;
	}

/**************************************************
	WATCH LINE WIDTH
**************************************************/
	#burnkit .volume-number {
		width: 16.5em;
	}

	#civilization .volume-number {
		width: 24.3em;
	}

	#toan .volume-number {
		width: 29.5em;
	}

	#jekyll .volume-number, #sean .volume-number {
		width: 30em;
	}

	#odo .volume-number, #whatisdesign .volume-number {
		width: 32.5em;
	}

	#boggeri .volume-number, #craft .volume-number {
		width: 33em;
	}

	#giorgio .volume-number {
		width: 34em;
	}

	#armando .volume-number {
		width: 34.5em;
	}

	#kazuyo .volume-number {
		width: 37em;
	}

	#elena .volume-number {
		width: 39em;
	}

	#andrea .volume-number {
		width: 16.5em;
	}

	#stefano .volume-number {
		width: 44em;
	}

	#aldo .volume-number {
		width: 45em;
	}

/**************************************************
	EXTENDED CONTENT - BUTTON
**************************************************/
	.to-extended {
		height: 3em;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		max-width: 100%;
		bottom: 65px;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 50px;
		position: relative;
		top: 24%;
		opacity: .5;
		letter-spacing: -.2px;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: -12%;
		opacity: 1;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	.chapter-container {
		top: 28%;
	}

	.project-image-container {
		height: 91vh;
	}

	.project-image-container img {
		position: relative;
		top: -5em;
		max-width: 100%;
		max-height: 100%;
	}

	.extended-video {
		max-width: 100%;
	}

	.extended-caption {
		bottom: 10.5em;
		right: 20px;
	}

	.video-caption {
		bottom: 10.5em;
	}

	.quote-anchor {
		top: 27%;
		left: 37.1%;
	}

	.fp-bottom ul .slide-anchor {
		margin-bottom: .3em;
	}

	.slide-anchor-number p {
		font-size: 30px;
		margin-top: 29%;
	}

	.slide-anchor-number p:hover {
		margin-top: 14%;
	}

/**************************************************
	OUTRO CONTAINER
**************************************************/
	#outro-container {
		bottom: 0em;
	}

	.next-up {
		font-size: 12px;
	}

	.next-quote-container {
		bottom: 20em;
	}

	.next-film-container {
		height: 12em;
		bottom: 65px;
	}

	.next-film {
		margin-top: 3.5em;
	}

	.next-film:hover {
		margin-top: .5em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 25em;
	}

	.vl {
		height: 5em;
		top: 2em;
	}

	#nextVolContainer {
		height: 14em;
		bottom: -5em;
	}

	#enterVolume {
		margin-top: 5.2em;
	}

	#enterVolume:hover {
		margin-top: 2.4em;
	}

/*//////////////////// ///////////////////////
	OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	.next-quote {
		font-size: 36px;
	}

	#kazuyoNext {
		width: 50%;
	}

	#toanNext {
		width: 55%;
	}

	#seanNext {
		width: 58%;
	}

	#whatNext, #jekyllNext {
		width: 60%;
	}

	#odoNext, #fjordNext {
		width: 65%;
	}

	#boggeriNext, #stefanoNext,
	#burnkitNext, #civNext, #sans-quote01 {
		width: 70%;
	}

	#armandoNext {
		width: 75%;
	}

	#elenaNext{
		width: 80%;
	}

/**************************************************
	EXTENDED CONTENT - QUOTE RAGS
**************************************************/
	#around-quote {
		width: 80%;
	}

	#heritage-quote01 {
		width: 72%
	}

	#hidden-quote02, #dalisi01-quote,
	#maestro-quote02, #burnkitNext, #breaking-quote {
		width: 71%;
	}

	#achille-illustrious01-quote, #radical-quote,
	#practice-quote01 {
		width: 70%;
	}

	#africa-quote, #breaking-quote, #honest03-quote {
		width: 69%;
	}

	#biscuit-quote, #lecture-quote, #kazuyo-quote01,
	#primates-quote02 {
		width: 68%;
	}

	#practice-quote02 {
		width: 67%;
	}

	#ino-quote, #kazuyo-quote02, #heritage-quote03,
	#beyond-quote, #qeeboo-quote02, #africa-quote {
		width: 66%;
	}

	#merdolino-quote, #honest02-quote {
		width: 65%;
	}

	#letter-quote, #primates-quote01,
	#heritage-quote02 {
		width: 64%;
	}

	#uomamoda-quote01, #studio01-quote, #studio03-quote,
	#sans-quote, #honest01-quote, #uoma-quote02,
	#ballet-quote {
		width: 63%;
	}

	#dual-quote, #hidden-quote01, #studio02-quote,
	#frida01-quote, #identity-quote03{
		width: 62%;
	}

	#frida02-quote, #primates-quote03, #qeeboo-quote01 {
		width: 61%;
	}

	#beyond-quote, #maestro-quote01 {
		width: 60%;
	}

	#maestro-quote03, #identity-quote01, #ballet02-quote {
		width: 59%;
	}

	#qeeboo-quote03, #identity-quote02 {
		width: 55%;
	}

	#uoma-quote01 {
		width: 54%;
	}

	#kazuyo-quote03 {
		width: 53%;
	}

/**************************************************
	FJORD FJORD FJORD
**************************************************/
	.fjord-content {
		top: 18em;
	}

	#fjord-copy .chunk-number {
		margin-bottom: 4em;
	}

	.fjord-main-copy {
		font-size: 150px;
		margin-bottom: .4em;
	}

	.fjord-blurb {
		font-size: 16px;
	}

	.fjord-designer-copy {
		font-size: 60px;
	}

	#progressBar {
		width: 79.5%;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 3em;
	}

	.audio-headers {
		margin-bottom: 1.5em;
	}

	.audio-time {
		right: 8.5em;
		margin-top: -.8em;
	}

	.fjord-portrait {
		max-width: 118.7%;
	}

	#designer-anecdotes #fjord-intro-quote {
		font-size: 60px;
	}

	#identity-quote01 {
		width: 56%;
	}

	#identity-quote03 {
		width: 69%;
	}

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.prologue-anchor {
		left: 114.4em;
	}

	.prologue-intro-quote {
		font-size: 70px;
	}

	.prologue-intro-copy {
		font-size: 20px;
	}

	.prologue-title {
		margin-bottom: .5em;
	}

	.prologue-quote {
		font-size: 27px;
		line-height: 1.5em;
	}

/*//////////////////// ///////////////////////
    EPILOGUE EPILOGUE EPILOGUE EPILOGUE
//////////////////// ///////////////////////*/
	.epilogue-quote {
		line-height: 1.6em;
	}

/*//////////////////// ///////////////////////
    ABOUT THE FILM ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-description p {
		font-size: 22px;
	}

	.who-said-it p {
		font-size: 18px;
	}

	.doc-name p {
		font-size: 60px;
	}

	#boggeri-wrapper {
		width: 32%;
	}

	#cimitero-wrapper, #craft-wrapper {
		width: 40%;
	}
}


@media all and (max-width: 1782px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1782px;
	}

	#landing-cut {
		margin-top: 20.7%;
	}

	.main-copy {
		font-size: 190px;
	}

	.home-button {
		font-size: 20px;
		letter-spacing: .8px;
	}

	.grid-3 {
		margin-top: 3%;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/

	.setList {
		left: -4.35em;
	}

	#openbtn2 {
		left: -7.9em;
	}

	.video-list {
		left: -8em;
	}

	.volume-description {
		width: 80%;
	}

	.small-description {
		width: 55%;
	}

/**************************************************
	EXTENDED CONTENT - INTRO
**************************************************/
	.project-image-container img {
		top: 0;
	}

	.quote-anchor {
		left: 37.6%;
	}

	.extended-caption {
		right: 15px;
		bottom: 6.5em;
	}

	#radical-quote {
		width: 73%;
	}

	#biscuit-quote {
		width: 70%;
	}

	#merdolino-quote {
		width: 63%;
	}

	#qeeboo-quote01 {
		width: 72%;
	}

	#qeeboo-quote02 {
		width: 70%;
	}

	#qeeboo-quote03 {
		width: 57%;
	}

	#seekslider {
		width: 74.5%;
	}
}

@media all and (max-width: 1680px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1680px;
	}

	.grid-1 {
		grid-template-columns: .9fr .9fr .9fr .9fr .9fr .9fr 5.6fr 1fr;
	}

	#landing-cut {
		margin-top: 22.5%;
	}

	.main-copy {
		font-size: 180px;
	}

	.home-button {
		font-size: 19px;
		letter-spacing: .75px;
	}

	.grid-3 {
		margin-top: 3%;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.setList {
		left: -3.25em;
	}

	#openbtn2 {
		left: -5.9em;
	}

	.video-list {
		left: -6em;
	}

	.volume-description {
		width: 85%;
	}

	.description-3 {
		width: 90%;
	}

	.small-description {
		width: 60%;
	}

	.description-3-small {
		width: 60%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.fs-toggle p {
		font-size: 16px;
	}
	.line-container {
		left: -5em;
	}

	.legacy-line {
		width: 106%;
	}

	#legacy-list1 {
		left: 38%;
	}

	#legacy-list2 {
		left: 53%;
	}

	#legacy-list3 {
		left: 68%;
	}

	#legacy-list4 {
		left: 83%;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE
//////////////////// ///////////////////////*/
	#video_player_box video {
		max-height: 97vh;
	}

	#seekslider {
		width: 73%;
		left: -1em;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		top: 24%;
	}

	.intro-bio-line {
		top: 15.5em;
	}

	.project-image-container {
		height: 89vh;
	}

	.extended-caption {
		bottom: 5em;
		font-size: 12px;
	}

	.slide-anchor-number p {
		margin-top: 28%;
	}

	.quote-anchor {
		top: 22%;
		left: 36.4%;
	}

	.chapter-container {
		top: 23%;
	}

	.who-said-it p {
		font-size: 17px;
	}

	#progressBar {
		width: 77.5%;
	}

/*//////////////////// ///////////////////////
	WATCH CHUNK DEPTH
//////////////////// ///////////////////////*/
	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		top: 30%;
	}

/**************************************************
	WATCH LINE WIDTH
**************************************************/
	#aldo .volume-number {
		width: 43.1em;
	}

/*//////////////////// ///////////////////////
	QUOTE WIDTH
//////////////////// ///////////////////////*/
	.designer-quote p {
		font-size: 17px;
	}

	#qeeboo-quote03, #kazuyo-quote02,
	#kazuyo-quote03 {
		width: 60%;
	}

	#uoma-quote01 {
		width: 61%;
	}

	#honest03-quote, #practice-quote01,
	#identity-quote02 {
		width: 62%;
	}

	#maestro-quote03, #heritage-quote01 {
		width: 63%;
	}

	#qeeboo-quote01, #maestro-quote01,
	#ballet02-quote {
		width: 65%;
	}

	#frida02-quote, #primates-quote03,
	#merdolino-quote, #beyond-quote {
		width: 66%;
	}

	#frida01-quote, #hidden-quote01,
	#honest01-quote, #studio02-quote, #studio03-quote {
		width: 67%;
	}

	#dual-quote, #uoma-quote02, #studio01-quote,
	#heritage-quote02, #letter-quote {
		width: 68%;
	}

	#honest02-quote, #primates-quote01 {
		width: 70%;
	}

	#dalisi01-quote, #ino-quote, #practice-quote02 {
		width: 71%;
	}

	#heritage-quote03, #sans-quote01 {
		width: 72%;
	}

	#biscuit-quote, #kazuyo-quote01,
	#dalisi01-quote, #africa-quote {
		width: 73%;
	}

	#primates-quote02, #qeeboo-quote02,
	#ballet-quote {
		width: 74%;
	}

	#achille-illustrious01-quote {
		width: 75%;
	}

	#radical-quote, #hidden-quote02 {
		width: 77%;
	}

/*//////////////////// ///////////////////////
    OUTRO OUTRO OUTRO OUTRO OUTRO OUTRO
//////////////////// ///////////////////////*/
	.next-film-name {
		font-size: 100px;
	}

	.next-film {
		margin-top: 5.2em;
	}

	.next-film:hover {
		margin-top: 3em;
	}

/*//////////////////// ///////////////////////
    OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	#stefanoNext {
		width: 77%;
	}

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.prologue-container {
		margin-top: 50%;
	}

	.prologue-anchor {
		left: 99.5em;
	}

	.prologue-intro-quote {
		font-size: 60px;
	}

	.prologue-intro-copy {
		font-size: 18px;
	}

	.prologue-title {
		margin-bottom: .5em;
	}

	.prologue-quote {
		font-size: 24px;
		line-height: 1.7em;
	}

	.next-quote {
		font-size: 32px;
	}

	#prologue-quote02 {
		width: 75%;
	}

/*//////////////////// ///////////////////////
    EPILOGUE EPILOGUE EPILOGUE EPILOGUE
//////////////////// ///////////////////////*/
	.epilogue-quote {
		font-size: 30px;
		width: 88%;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	#designer-anecdotes #fjord-intro-quote {
		font-size: 55px;
	}

	#seb-copy {
		max-width: 45%;
	}

	#seb-copy02 {
		max-width: 55%;
	}

	#lidia-header {
		max-width: 58%;
	}

	#fjord-caption {
		bottom: 4em;
	}

/*//////////////////// ///////////////////////
    ABOUT THE FILM ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-name p {
		font-size: 55px;
		line-height: 1em;
	}

	.doc-description p {
		font-size: 20px;
		line-height: 1.9em;
	}

	#boggeri-wrapper {
		width: 33%;
	}

	#cimitero-wrapper {
		width: 42%;
	}

	#craft-wrapper {
		width: 34%;
	}
}

@media all and (max-width: 1591px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1591px;
	}

	#landing-cut {
		margin-top: 25.1%;
	}

	.main-copy {
		font-size: 170px;
		letter-spacing: -3px;
	}

	.home-button {
		font-size: 18px;
		letter-spacing: .65px;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.setList {
		left: -2.5em;
	}

	#openbtn2 {
		left: -4.4em;
	}

	.video-list {
		left: -4.5em;
	}

	.volume-description {
		width: 90%;
	}

	.description-3 {
		width: 85%;
	}

	.small-description {
		width: 70%;
	}

	.description-3-small {
		width: 65%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.line-container {
		left: -2.5em;
	}

	.legacy-line {
		width: 106%;
	}

	#legacy-list1 {
		left: 40%;
	}

	#legacy-list2 {
		left: 55%;
	}

	#legacy-list3 {
		left: 70%;
	}

	#legacy-list4 {
		left: 85%;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE
//////////////////// ///////////////////////*/
	.project-image-container {
		height: 84vh;
	}

	#designer-anecdotes .maestro {
		margin-bottom: .95em;
	}

	.scroll-hint {
		top: 65%;
	}

	.chapter-container {
		top: 24%;
	}

	.quote-anchor {
		top: 21.5%;
		left: 37%;
	}

	.extended-caption {
		bottom: 4em;
	}

	#radical-quote {
		width: 81%;
	}

	#biscuit-quote {
		width: 69%;
	}

	#merdolino-quote {
		width: 70%;
	}

	#qeeboo-quote01 {
		width: 79%;
	}

	#qeeboo-quote02 {
		width: 76%;
	}

	#qeeboo-quote03 {
		width: 64%;
	}

	/*#video_controls_bar {
		bottom: -3em;
	}*/
}

@media all and (max-width: 1555px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1555px;
	}

	.main-copy {
		font-size: 165px;
	}

	#outro-container {
		width: 70%;
	}
}

@media all and (max-width: 1512px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1512px;
	}

	#landing-cut {
		margin-top: 29.4%;
	}

	.main-copy {
		font-size: 160px;
	}

	li a {
		font-size: 11px;
		letter-spacing: 1px;
	}

	.home-button {
		font-size: 17px;
	}

	.grid-3 {
		margin-top: 3%;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.setList {
		left: -1.9em;
	}

	#openbtn2 {
		left: -3.45em;
	}

	.video-list {
		left: -3.5em;
	}

	.description-1, .description-2 {
		width: 95%;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE
//////////////////// ///////////////////////*/
	#seekslider {
		width: 72%;
	}

	.project-image-container {
		height: 79vh;
	}

	.extended-caption {
		bottom: 5em;
	}

	.slide-anchor-number p {
		margin-top: 33%;
	}

	.slide-anchor-number p:hover {
		margin-top: 20%;
	}

	#radical-quote {
		width: 82%;
	}

	#biscuit-quote {
		width: 81%;
	}

	#merdolino-quote {
		width: 74%;
	}

	#qeeboo-quote01 {
		width: 71%;
	}

	#qeeboo-quote02 {
		width: 66%;
	}

	#qeeboo-quote03 {
		width: 63%;
	}
}

@media all and (max-width: 1440px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1440px;
	}

	.grid-1 {
		grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 5fr 1fr;
	}

	#landing-cut {
		margin-top: 20.6%;
	}

	.main-copy {
		font-size: 150px;
		letter-spacing: -2.5px;
	}

	p {
		font-size: 10px;
	}

	.top-chunk {
		font-size: 9px;
		letter-spacing: .8px;
	}

	li a {
		font-size: 9px;
		letter-spacing: .8px;
		line-height: 1em;
	}

	.home-button {
		font-size: 16.6px;
		letter-spacing: .3px;
	}

	.grid-3 {
		margin-top: 4.5%;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	#bottom-list {
		margin-top: 3%;
	}

	.volume-number {
		height: 9em;
	}

	.chunk {
		font-size: 230px;
		top: 31%;
	}

	.bottom-list-line {
		left: -5em;
	}

	.setList {
		left: -2.5em;
	}

	.video-list {
		left: -4.5em;
	}

	.volume-description {
		width: 90%;
	}

	#openbtn2 {
		left: -4.4em;
	}

	.small-description, .description-2-small, .description-3-small {
		width: 70%;
	}

	.description-1-small {
		width: 65%;
	}

	.description-1 {
		max-width: 100%;
	}

	.description-2 {
		width: 100%;
	}

	.description-3 {
		width: 105%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-9 .volume-number {
		height: 9em;
	}

	#legacy .chunk {
		font-size: 230px;
		top: 36%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 6.5em;
	}

	.legacy-line {
		width: 107%;
	}

	#legacy-list1 {
		left: 40%;
		margin-top: 3.5em;
	}

	#legacy-list2 {
		left: 55%;
		margin-top: 3.5em;
	}

	#legacy-list3 {
		left: 70%;
		margin-top: 3.5em;
	}

	#legacy-list4 {
		left: 85%;
		margin-top: 3.5em;
	}

	.line-container {
		left: -2.5em;
	}

/**************************************************
	CREDITS
**************************************************/
	.credits {
		font-size: 10px;
		letter-spacing: 2px;
	}

	.exit-link {
		font-size: 12px;
		letter-spacing: 1.2px;
		margin-top: .9em;
		right: 2em;
	}

	#credits-container {
	    width: 27em;
	    height: 85vh;
	    left: 1em;
	}

	.bts-box {
		top: 0;
	}

	.member-info {
		margin-top: .7em;
	}

	.name {
		font-size: 17px;
		line-height: 1.3em;
	}

	.roles {
		font-size: 12px;
		letter-spacing: .2px;
	}

	.location {
		font-size: 10px;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 65em;
		height: 85vh;
	}

	#bts-container {
		margin-top: 0em;
	}

	.bts-footer {
		margin-top: 0em;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE - NAVIGATION
//////////////////// ///////////////////////*/
	#film {
		padding: 10px;
	}

	.program {
		padding-left: 10px;
	}

	.controls {
		z-index: 2147483647;
	}

	.mini-headers {
		font-size: 9px;
		letter-spacing: .5px;
		line-height: 2.5em;
	}

	.mini-list {
		font-size: 10px;
		letter-spacing: .8px;
	}

/*//////////////////// ///////////////////////
	VIDEO PLAYER
//////////////////// ///////////////////////*/
	#video_player_box {
		margin: 0px auto;
		max-width: 100%;
	}

	#video_player_box video {
		max-width: 100%;
		max-height: 100vh;
		/*left: 50%;*/
	}

	#video_controls_bar {
		font-size: 10px;
		letter-spacing: 1.5px;

		padding: 5px;
		bottom: 1.5em;
		width: 100%;
	}

	button {
		font-size: 10px;
		letter-spacing: 2px;
	}

	#playpausebtn {
		width: 5%;
	}

	#seekslider {
		width: 70%;
		left: -1em;
		margin-right: 1.6em;
	}

	#fullscreenbtn {
		width: 10%;
		right: 2em;
	}

	/* SLIDER BAR */
	input[type='range'] {
	    height: .4em;
	    top: -0.1em;
	}

	/* SLIDER KNOB */
	input[type='range']::-webkit-slider-thumb {
	    width: 1em;
	    height: .4em;
	}

	.transcript-link {
		margin-left: 2.7em;
	}

/*//////////////////// ///////////////////////
	VIDEO PLAYER - TRIGGER
//////////////////// ///////////////////////*/
	.watch {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -75%);
	}

	.watch .volume-number {
		height: 5em;
		width: 36em;
	}

	.film-title {
		top: .3em;
	}

	.play-indicator {
		margin-top: .7em;
	}

/**************************************************
	.watch .chunk TOP DEPTH
**************************************************/
	.watch .chunk {
		font-size: 85px;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		top: 16%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: -10%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover, #whatisdesign .chunk:hover,
	#craft .chunk:hover {
		top: -23%;
	}

/**************************************************
	EXTENDED CONTENT - BUTTON
**************************************************/
	.to-extended {
		height: 3em;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		max-width: 100%;
		left: 20px;
		bottom: 60px;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 50px;
		position: relative;
		top: 24%;
		opacity: .5;
		letter-spacing: -.2px;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: -12%;
		opacity: 1;

		-webkit-transition: .4s ease;
		-moz-transition: .4s ease;
		-o-transition: .4s ease;
		transition: .4s ease;
	}

/**************************************************
	EXTENDED CONTENT - INTRO
**************************************************/
	.extended-title {
		max-width: 100%;
		max-height: 100%;
		position: absolute;
		top: 27.5%;
		left: 20px;
	}

	#fjord-extended-title {
		left: 30px;
	}

	.extended-intro .maestro {
		font-size: 30px;
		letter-spacing: -.5px;
		margin-top: -.2em;
		margin-bottom: -.1em;
	}

	.intro-bio {
		width: 100%;
	}

	.intro-bio p {
		font-size: 11px;
		letter-spacing: 1.5px;
		line-height: 27px;
	}

	.intro-bio-line {
		position: fixed;
		width: 100%;
		top: 15em;
		left: 20px;
	}

	.intro-bio-line hr {
		width: 75%;
		margin: 0;
	}

	#designer-anecdotes {
		position: absolute;
		left: 20px;
		top: 41%;
	}

	.fjord-anecdotes {
		left: 30px !important;
	}

	#designer-anecdotes .anecdotes-header {
		margin-bottom: 1.5em;
	}

	#designer-anecdotes .maestro {
		font-size: 60px;
		letter-spacing: -.5px;
		margin-bottom: 1em;
	}

	#designer-anecdotes .maestro:hover {
		opacity: .3;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	.individual-chapter {
		margin-bottom: 3.5em;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		font-size: 9px;
		letter-spacing: 1.5px;
		line-height: 1em;
	}

	.scroll-hint {
		position: absolute;
		top: 67%;
		left: 22px;
		margin-top: 2em;
		cursor: pointer;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	.scroll-hint:hover {
		opacity: .3;

		transition: opacity .4s;
		-webkit-transition: opacity .4s;
		-moz-transition: opacity .4s;
		-ms-transition: opacity .4s;
		-o-transition: opacity .4s;
	}

	#fjord-scroll {
		left: 30px;
	}

	#section01-scroll-hint {
		top: 47%;
	}

	#section02-scroll-hint {
		top: 57%;
	}

/**************************************************
	EXTENDED CONTENT - SECTIONS
**************************************************/
	.quote-anchor {
		left: 37.4%;
	}

	.chapter-container {
		width: 100%;
		position: relative;
		top: 12.9em;
		left: 20px;
	}

	.project-quote-header .maestro {
		font-size: 30px;
		letter-spacing: -.1px;
		margin-bottom: .3em;
		line-height: 1.5em;
	}

	.designer-quote {
		width: 65%;
	}

	.designer-quote p {
		font-size: 14px;
		letter-spacing: .5px;
		line-height: 1.9em;
	}

	.project-image-container, .fjord-image-container {
		height: 89.5vh;
	}

/**************************************************
	EXTENDED CONTENT - IMAGES
**************************************************/
	.project-image-container {
		position: fixed;
		right: 10px;
		max-width: 57%;
		height: 89vh;
	}

	.project-image-container img {
		max-width: 100%;
		max-height: 100%;
	}

	.extended-caption {
		position: relative;
		bottom: 4em;
		right: 15px;
		font-size: 10px;
		text-align: right;
		letter-spacing: .4px;
	}

	.white-caption {
		color: #EFF1E4;
	}

	.video-caption {
		bottom: 4em;
	}

/**************************************************
	OUTRO CONTAINER
**************************************************/
	#outro-container {
		bottom: 0em;
		left: 50%;
		width: 60%;

		-webkit-transform: translate(-50%, 0px);
		-moz-transform: translate(-50%, 0px);
		-o-transform: translate(-50%, 0px);
		-ms-transform: translate(-50%, 0px);
		transform: translate(-50%, 0px);
	}

	.next-film-volume {
		margin-bottom: .5em;
	}

	.next-film-volume-title {
		margin-bottom: 2em;
	}

	.next-quote {
		font-size: 28px;
		letter-spacing: -.3px;
		line-height: 1.4em;
	}

	.next-quote strong {
		letter-spacing: -.9px;
	}

	.vl {
	    border-left: 1px solid;
	    height: 5em;
	    top: 2em;
	    left: 50%;
	    margin-left: -3px;
	}

	.next-film-container {
		height: 8em;
		bottom: 60px;
	}

	.next-quote-container {
		bottom: 17em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 20em;
		opacity: 1;
	}

	.next-film {
		margin-top: 3.4em;
	}

	.next-film:hover {
		margin-top: 1.5em;
	}

	.next-up {
		font-size: 10px;
		margin-bottom: -4em;
	}

	.next-film-name {
		font-size: 70px;
		letter-spacing: -2px;
	}

	#nextVolContainer {
		height: 11em;
		bottom: 6em;
	}

	#enterVolume {
		margin-top: 4.45em;
	}

	#enterVolume:hover {
		margin-top: 1.4em;
	}

	#enterNextVol {
		margin-top: .3em;
	}

/*//////////////////// ///////////////////////
	OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	#kazuyoNext {
		width: 55%;
	}

	#toanNext {
		width: 65%;
	}

	#jekyllNext, #seanNext {
		width: 70%;
	}

	#odoNext, #burnkitNext {
		width: 75%;
	}

	#boggeriNext, #stefanoNext, #armandoNext,
	#burnkitNext, #whatNext {
		width: 80%;
	}

	#civNext {
		width: 85%;
	}

	#elenaNext, #fjordNext  {
		width: 90%;
	}

/**************************************************
	SLIDE ANCHORS
**************************************************/
	.quote-anchor {
	    top: 26.5%;
	    left: 37.5%;
	}

	.fp-bottom ul .slide-anchor {
		margin-bottom: .2em;
	}

	.slide-anchor-number {
		height: 2.5em;
		overflow: hidden;
	}

	.slide-anchor-number p {
		font-family: 'NHaasGroteskDSPro-65Md', sans-serif;
		font-size: 28px;
		line-height: .7em;
		position: relative;
		margin-top: 23%;

		-webkit-transition: .3s ease;
		-moz-transition: .3s ease;
		-o-transition: .3s ease;
		transition: .3s ease;
	}

	.slide-anchor-number p:hover {
		margin-top: 10%;
		opacity: 1;

		-webkit-transition: .3s ease;
		-moz-transition: .3s ease;
		-o-transition: .3s ease;
		transition: .3s ease;
	}

	.slide-anchor-line hr {
		width: 170%;
		position: relative;
		margin-top: .1em;
		margin-bottom: 0;
		z-index: 0;
	}

	.citation-button {
		padding-bottom: 0em;
	}

/**************************************************
	EXTENDED CONTENT - QUOTE WIDTH
**************************************************/
	#qeeboo-quote03, #ballet-quote, #practice-quote03 {
		width: 55%;
	}

	#uomamoda-quote01, #ballet02-quote,
	#uoma-quote01 {
		width: 58%;
	}

	#primates-quote02, #identity-quote02 {
		width: 59%;
	}

	#identity-quote01 {
		width: 60%;
	}

	#studio01-quote, #canon-quote, #merdolino-quote {
		width: 61%;
	}

	#frida02-quote {
		width: 62%;
	}

	#africa-quote, #frida01-quote,
	#studio02-quote, #beyond-quote {
		width: 63%;
	}

	#dual-quote, #studio01-quote, #studio03-quote,
	#identity-quote03 {
		width: 64%;
	}

	#studio03-quote, #sans-quote, #whatNext,
	#hidden-quote01, #breaking-quote {
		width: 65%;
	}

	#honest01-quote, #letter-quote {
		width: 66%;
	}

	#primates-quote03 {
		width: 67%;
	}

	#primates-quote01, #kazuyo-quote02, #kazuyo-quote03,
	#lecture-quote, #beyond-quote, #ino-quote,
	#heritage-quote03, #practice-quote02 {
		width: 68%;
	}

	#honest03-quote, #maestro-quote02, #uoma-quote02 {
		width: 69%;
	}

	#primates-quote01, #kazuyo-quote01,
	#kazuyo-quote01, #honest02-quote {
		width: 70%;
	}

	#qeeboo-quote02, #breaking-quote, #maestro-quote03 {
		width: 71%;
	}

	#achille-illustrious01-quote,
	#hidden-quote02, #practice-quote01 {
		width: 72%;
	}

	#radical-quote, #dalisi01-quote, #qeeboo-quote01 {
		width: 73%;
	}

	#honest03-quote, #africa-quote, #heritage-quote01 {
		width: 74%;
	}

	#biscuit-quote, #steiner-quote {
		width: 75%;
	}

	#around-quote {
		width: 89%;
	}

/**************************************************
	VIDEO PLAYER - HEADER WIDTH
**************************************************/

	#giorgio .volume-number {
		width: 34em;
	}

	#stefano .volume-number {
		width: 44em;
	}

	#elena .volume-number {
		width: 39em;
	}

	#kazuyo .volume-number {
		width: 37em;
	}

	#toan .volume-number {
		width: 29.5em;
	}

	#odo .volume-number {
		width: 32.5em;
	}

	#boggeri .volume-number {
		width: 33em;
	}

	#armando .volume-number {
		width: 34.3em;
	}

	#sean .volume-number {
		width: 30em;
	}

	#jekyll .volume-number {
		width: 29.5em;
	}

	#aldo .volume-number {
		width: 43.1em;
	}

	#whatisdesign .volume-number {
		width: 32.3em;
	}

	#civilization .volume-number {
		width: 24em;
	}

	#burnkit .volume-number {
		width: 16em;
	}

	#craft .volume-number {
		width: 32.7em;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	#forFjord {
		bottom: 3em;
	}

	.fjord-content {
		top: 14em;
	}

	.fjord-audio {
		margin-top: -.3em;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		letter-spacing: .5px;
		line-height: 1.8em;
	}

	.fjord-main-copy {
		font-size: 126px;
		letter-spacing: -2.5px;
		line-height: 60px;
		margin-top: .3em;
		margin-bottom: .4em;
		margin-left: -5px;
	}

	#fjord-header {
		max-width: 48%;
		top: 0;
		left: 1.2em;
	}

	#seb-header, #lidia-header, #amedeo-header {
		left: 1.2em;
	}

	#fjord-header .fjord-blurb{
		max-width: 66%;
	}

	#seb-copy  {
		max-width: 45%;
	}

	#seb-copy02  {
		max-width: 55%;
	}

	#lidia-header {
		max-width: 52%;
	}

	#amedeo-copy {
		max-width: 55%;
	}

	#amedeo-copy02 {
		max-width: 60%;
	}

	#lidia-header .fjord-blurb, #amedeo-header .fjord-blurb  {
		max-width: 65%;
	}

	.fjord-designer-copy {
		font-size: 50px;
		line-height: 1.2em;
		letter-spacing: -.7px;
		padding-top: .3em;
		padding-bottom: .3em;
	}

	.fjord-blurb {
		font-size: 14px;
		letter-spacing: 0.5px;
		line-height: 1.7em;
	}

	.fjord-list {
		top: 0em;
	}

	.audio-headers {
		font-size: 10px;
		letter-spacing: 1.5px;
		line-height: 9px;
		margin-bottom: 1.5em;
	}

	.fjord-portrait {
		width: 100%;
	}

	#lidia-container, #amedeo-container {
		margin-top: 3em;
	}

	.audio-list {
		margin-top: -2em;
	}

	#audio-player {
		width: 100%;
		left: 10px;
		bottom: 1em;
		padding: 10px;
	}

	#audio-player nav {
		z-index: 2147483647;
		color: #F1F0E4;
		font-size: 10px;
		letter-spacing: 1.5px;
	}

	#progressBar {
		width: 73%;
		left: 1em;
		margin-right: 3em;
	}

	#muteButton {
		margin-left: 1em;
	}

	#fjord-intro-quote {
		margin-top: -.5em;
		line-height: 1.2em;
		width: 65%;
		font-size: 45px;
	}

	.audio-time {
		right: 1.5em;
		margin-top: -.2em;
	}

	#designer-anecdotes #fjord-intro-quote {
		font-size: 45px;
	}

	#fjord-caption {
		bottom: 5.5em;
	}

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.prologue-anchor {
		top: 10px;
		left: 85.5em;
		right: 1.8em;
	}

	.prologue-container {
		margin-top: 50%;
		transform: translate(0, -75%);
	}

	.prologue-intro-quote {
		font-size: 50px;
		line-height: 1.2em;
		letter-spacing: -.7px;
		padding-top: .3em;
		padding-bottom: .3em;
		width: 80%;
	}

	.prologue-intro-copy {
		font-size: 16px;
		letter-spacing: 0.5px;
		line-height: 1.7em;
		width: 75%;
	}

	#prologue-scroll {
		margin-top: 5em;
	}

	.prologue-title {
		margin-bottom: .5em;
	}

	.prologue-quote {
		font-size: 20px;
		line-height: 1.8em;
		width: 85%;
		margin-top: 1em;
	}

/*//////////////////// ///////////////////////
    EPILOGUE EPILOGUE EPILOGUE EPILOGUE
//////////////////// ///////////////////////*/
	.epilogue-quote {
		font-size: 28px;
		letter-spacing: -.3px;
		line-height: 1.4em;
		width: 85%;
	}

/*//////////////////// ///////////////////////
    ABOUT THE FILM ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-container {
		position: relative;
		top: 25%;
		left: 20px;
	}

	.documentary {
		margin-bottom: 1em;
	}

	.doc-name {
		margin-bottom: 1em;
	}

	.doc-name p {
		font-size: 50px;
		letter-spacing: -.5px;
		line-height: .8em;
	}

	.doc-name p span {
		font-size: 22px;
		letter-spacing: -.1px;
		line-height: 1.2em;
	}

	.doc-description p, .who-said-it p {
		font-size: 16px;
		line-height: 1.8em;
	}

	.who-said-it p {
		margin-top: 1em;
		font-size: 14px;
	}

	#boggeri-wrapper {
		width: 31%;
	}

	#cimitero-wrapper {
		width: 40%;
	}

	#craft-wrapper {
		width: 38%;
	}
}

@media all and (max-width: 1391px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25, .grid-26 {
		max-width: 1391px;
	}

	.main-copy {
		font-size: 145px;
		letter-spacing: -3px;
	}

	#seekslider {
		width: 69%;
	}
}

@media all and (max-width: 1366px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1366px;
	}

	#landing-cut {
		margin-top: 23.5%;
	}
}

@media all and (max-width: 1350px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1350px;
	}

	.grid-1 {
		grid-template-columns: 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr 1.1fr 4.4fr 1fr;
	}

	.grid-5 {
		grid-template-columns: 3.5fr 5fr 4.5fr;
	}

	#landing-cut {
		margin-top: 23.5%;
	}

	.main-copy {
		font-size: 140px;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.video-list {
		left: -3em;
	}

	.setList {
		left: -1.7em;
	}

	#openbtn2 {
		left: -2.95em;
	}

	.small-description {
		width: 75%;
	}

/*/////////////////// ///////////////////////
    DESIGNER
//////////////////// ///////////////////////*/
	/*#video_controls_bar {
		bottom: -4em;
	}*/

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 4em;
	}

	#designer-anecdotes {
		top: 40%;
	}

	#designer-anecdotes .maestro {
		margin-bottom: 1.05em;
	}

	.next-film-container {
		bottom: 4em;
	}

	.scroll-hint {
		top: 65%;
	}

	.project-image-container {
		height: 83vh;
	}

	.project-quote-header .maestro {
		font-size: 26px;
	}

	.extended-caption {
		bottom: 4.5em;
		right: 10px;
	}

	.video-caption {
		bottom: 6.5em;
	}

	.quote-anchor {
		top: 21%;
		left: 38.5%;
	}

	#radical-quote {
		width: 75%;
	}

	#merdolino-quote {
		width: 65%;
	}

	#qeeboo-quote01 {
		width: 76%;
	}

	#qeeboo-quote02 {
		width: 74%;
	}

	#qeeboo-quote03 {
		width: 60%;
	}

/*/////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-portrait-container {
		max-width: 97.8vw;
		max-height: 97.5vh;
		overflow: hidden;
	}

	.fjord-portrait {
		min-width: 108%;
		height: 100%;
	}

	#fjord-header .fjord-blurb {
		max-width: 98%;
	}

	.fjord-designer-copy {
		font-size: 45px;
	}

	#amedeo-header {
		max-width: 50%;
	}

	#amedeo-header .fjord-blurb {
		max-width: 85%;
	}
}

@media all and (max-width: 1280px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22, .grid-23,
	.grid-24, .grid-25 {
		max-width: 1280px;
	}

	#landing-cut {
		margin-top: 17.4%;
	}

	.main-copy {
		font-size: 132px;
		letter-spacing: -2px;
	}

	.video-list {
		left: -2em;
	}

	.setList {
		left: -1.1em;
	}

	#openbtn2 {
		left: -1.95em;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 3.5em;
	}

	.legacy-name p {
		font-size: 11px;
	}

	#legacy-list1, #legacy-list2, #legacy-list3, #legacy-list4 {
		margin-top: 3em;
	}

	#credits-container {
		width: 22em;
		height: 80vh;
	}

	.location {
		margin-top: 3em;
	}

	.box {
		width: 57.3em;
	}

	.grid-9 .volume-number {
		height: 8em;
	}

	#legacy .chunk {
		font-size: 190px;
		top: 34%;
	}

/*/////////////////// ///////////////////////
	DESIGNER DESIGNER DESIGNER DESIGNER
//////////////////// ///////////////////////*/
	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 75px;
		top: 17.5%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover, #whatisdesign .chunk:hover,
	#craft .chunk:hover {
		top: -16%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: -2%;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 50px;
	}

	#forFjord {
		bottom: 3em;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 45px;
		top: 32%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 2%;
	}

	#seekslider {
		width: 67%;
	}

	#video_player_box video {
		max-height: 96vh;
	}

	.intro-bio-line {
		top: 15em;
	}

	#designer-anecdotes {
		top: 41%;
	}

	#designer-anecdotes .maestro {
		font-size: 55px;
	}

	.extended-title {
		left: 21px;
	}

	.extended-intro .maestro {
		font-size: 26px;
	}

	.scroll-hint {
		top: 68%;
		left: 22px;
	}

	#fp-nav.fp-left {
		left: 21px;
	}

	#fp-nav.fjord-menu {
		left: 30px;
	}

	.project-image-container, .fjord-image-container {
		height: 90vh;
	}

	.extended-video {
		margin-top: -5%;
	}

	.extended-caption {
		bottom: 3em;
	}

	.quote-anchor {
		top: 32%;
		left: 36.8%;
	}

	.slide-anchor-number p {
		margin-top: 24%;
	}

/*/////////////////// ///////////////////////
	OUTRO CONTAINER
//////////////////// ///////////////////////*/
	#outro-container {
		width: 60%;
	}

	.next-quote {
		font-size: 24px;
		letter-spacing: 0px;
	}

	.next-quote-container {
		bottom: 15em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 17em;
	}

	.next-film-name {
		font-size: 70px;
	}

	.next-film {
		margin-top: 3.5em;
	}

	.next-film-container {
		bottom: 50px;
	}

	.next-film:hover {
		margin-top: 1em;
	}

	#enterVolume {
		margin-top: 5.5em;
	}

	#enterVolume:hover {
		margin-top: 3.5em;
	}

	.vl {
		top: 1.5em;
	}

	#video_controls_bar {
		bottom: 1em;
	}

/*/////////////////// ///////////////////////
	OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	#whatNext {
		width: 65%;
	}

	#odoNext {
		width: 74%;
	}

	#jekyllNext {
		width: 75%;
	}

	#fjordNext {
		width: 80%;
	}

/*/////////////////// ///////////////////////
	QUOTE WIDTH
//////////////////// ///////////////////////*/
	#studio03-quote {
		width: 55%;
	}

	#kazuyo-quote03 {
		width: 60%;
	}

	#honest01-quote, #uoma-quote01 {
		width: 61%;
	}

	#kazuyo-quote01, #kazuyo-quote02,
	#identity-quote02 {
		width: 64%;
	}

	#primates-quote02, #qeeboo-quote03, #practice-quote03 {
		width: 65%;
	}

	#primates-quote01, #maestro-quote03 {
		width: 66%;
	}

	#honest03-quote, #hidden-quote02,
	#qeeboo-quote02, #practice-quote01 {
		width: 67%;
	}

	#frida01-quote, #dalisi01-quote, #merdolino-quote {
		width: 68%;
	}

	#maestro-quote01, #heritage-quote01 {
		width: 69%;
	}

	#biscuit-quote {
		width: 70%;
	}

	#frida02-quote, #hidden-quote01,
	#qeeboo-quote01, #dual-quote, #beyond-quote {
		width: 71%;
	}

	#achille-illustrious01-quote, #studio01-quote,
	#lecture-quote {
		width: 72%;
	}

	#letter-quote, #sans-quote02 {
		width: 73%;
	}

	#honest02-quote, #around-quote {
		width: 75%;
	}

	#ino-quote, #maestro-quote02,
	#heritage-quote03, #sans-quote01 {
		width: 76%;
	}

	#africa-quote {
		width: 77%;
	}

	#radical-quote {
		width: 78%;
	}

/*/////////////////// ///////////////////////
	FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-main-copy {
		font-size: 120px;
	}

	.fjord-content {
		top: 12.5em;
	}

	.grid-18 {
		grid-template-columns: 8fr 3.5fr .5fr;
	}

	#fjord-header {
		max-width: 50%;
	}

	#fjord-header .fjord-blurb {
		max-width: 78%;
	}

	#seb-header {
		max-width: 95%;
	}

	#seb-header .fjord-blurb {
		max-width: 80%;
	}

	#lidia-header .fjord-blurb {
		max-width: 75%;
	}

	#amedeo-header {
		max-width: 100%;
	}

	#audio-player {
		bottom: .5em;
	}

	#progressBar {
		width: 70%;
	}

	.audio-time {
		right: 5em;
	}

	#fjord-intro-quote {
		font-size: 40px;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 12px;
	}

	#designer-anecdotes #fjord-intro-quote {
		font-size: 40px;
	}

	#fjord-caption {
		bottom: 7em;
	}

/*/////////////////// ///////////////////////
	WATCH CHUNK WIDTH
//////////////////// ///////////////////////*/

	#giorgio .volume-number {
		width: 29.8em;
	}

	#odo .volume-number {
		width: 28.5em;
	}

	#elena .volume-number {
		width: 34em;
	}

	#stefano .volume-number {
		width: 38.5em;
	}

	#toan .volume-number {
		width: 26em;
	}

	#kazuyo .volume-number {
		width: 32.2em;
	}

	#boggeri .volume-number {
		width: 29em;
	}

	#armando .volume-number {
		width: 30.2em;
	}

	#jekyll .volume-number {
		width: 26em;
	}

	#andrea .volume-number {
		width: 14.5em;
	}

	#sean .volume-number {
		width: 26.5em;
	}

	#aldo .volume-number {
		width: 37.8em;
	}

	#craft .volume-number {
		width: 28.7em;
	}

	#burnkit .volume-number {
		width: 14em;
	}

	#civilization .volume-number {
		width: 21em;
	}

	#whatisdesign .volume-number {
		width: 28.3em;
	}

/*/////////////////// ///////////////////////
	PROLOGUE PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.prologue-container {
		margin-top: 50%;
	}

	.prologue-intro-quote {
		font-size: 45px;
	}

	.prologue-intro-copy {
		font-size: 14px;
	}

	.prologue-vl, .epilogue-vl {
		height: 3.5em;
	}

	#prologue-scroll {
		margin-top: 4em;
	}

	.prologue-quote {
		font-size: 17px;
		width: 83%;
	}

	.prologue-anchor {
		left: 75.5em;
	}

/*//////////////////// ///////////////////////
    ABOUT THE FILM ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-name p {
		font-size: 40px;
	}

	#boggeri-wrapper {
		width: 35%;
	}

	#cimitero-wrapper {
		width: 34%;
	}

	#craft-wrapper {
		width: 36%;
	}
}

@media all and (max-width: 1270px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1270px;
	}

	.grid-5 {
		grid-template-columns: 3.5fr 5fr 3.5fr;
	}

	#landing-cut {
		margin-top: 25.9%;
	}

	.main-copy {
		font-size: 130px;
	}

	.small-description {
		width: 70%;
	}

	.description-1-small {
		width: 75%;
	}

	.description-2-small {
		width: 80%;
	}

	.description-3-small {
		width: 70%;
	}

	.description-1, .description-2 {
		width: 95%;
	}

	.description-3 {
		width: 90%;
	}

/*/////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-9 {
		grid-template-columns: 5fr 2fr 2fr 2fr 1fr;
	}

	.grid-9 .volume-number {
		height: 8.5em;
	}

	#legacy .chunk {
		font-size: 210px;
		margin-top: 32%;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -1em;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 11%;
	}

/*/////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	.watch {
		top: 57%;
	}

	#seekslider {
		width: 67%;
		left: 0;
		margin-top: -.3em;
	}

	.project-image-container {
		position: fixed;
		max-width: 57.5%;
		height: 77.5vh;
	}

	.extended-video {
		margin-top: 0;
	}

	.extended-caption {
		bottom: 5.3em;
	}

	.video-caption {
		bottom: 6.3em;
	}

	.quote-anchor {
		left: 37.7%;
	}

	#radical-quote {
		width: 79%;
	}

	#biscuit-quote {
		width: 70%;
	}

	#merdolino-quote {
		width: 69%;
	}

	#qeeboo-quote01 {
		width: 70%;
	}

	#qeeboo-quote02 {
		width: 67%;
	}

	#qeeboo-quote03 {
		width: 65%;
	}

/*/////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-main-copy {
		font-size: 115px;
	}

	.grid-18 {
		grid-template-columns: 8fr 3.5fr .5fr;
	}

	#fjord-header {
		max-width: 50%;
	}

	#seb-header {
		max-width: 55%;
	}

	#seb-header .fjord-blurb {
		max-width: 62%;
	}

	.fjord-designer-copy {
		font-size: 40px;
	}

	#lidia-header {
		max-width: 48%;
	}

	#lidia-header .fjord-blurb {
		max-width: 80%;
	}

	.fjord-portrait {
		min-width: 115%;
	}
}

@media all and (max-width: 1230px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1230px;
	}

	.main-copy {
		font-size: 125px;
	}

	.project-image-container {
		position: fixed;
		max-width: 57.5%;
		height: 75.5vh;
	}

	.extended-caption {
		bottom: 5em;
		right: 15px;
	}

	.video-caption {
		bottom: 6.3em;
	}

	#radical-quote {
		width: 82%;
	}

	#merdolino-quote {
		width: 73%;
	}

	#qeeboo-quote02 {
		width: 67%;
	}

	#fjord-header .fjord-blurb {
		max-width: 100%;
	}

	#progressBar {
		width: 77%;
	}

	.audio-time {
		right: 2em;
	}

	.fjord-portrait {
		min-width: 119%;
	}

	#seekslider {
		width: 66%;
	}
}

@media all and (max-width: 1200px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1200px;
	}

	.grid-3 {
		margin-top: 7.7%;
	}

	.grid-5 {
		grid-template-columns: 3.5fr 5.5fr 2.5fr;
	}

	#landing-cut {
		margin-top: 26.2%;
	}

	.main-copy {
		font-size: 7.5em;
	}

	#openbtn2 {
		left: -3em;
	}

	.legacy-name p {
		font-size: 11px;
	}

	.small-description {
		width: 75%;
	}

	.description-3-small {
		width: 70%;
	}

	#openbtn2 {
		left: -2em;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-7 .legacy-line {
		width: 110%;
		margin-left: -2em;
		top: -1.9em;
	}

	.legacy-name p {
		font-size: 11px;
	}

	.grid-9 .volume-number {
		height: 7.5em;
	}

	#legacy .chunk {
		font-size: 190px;
		top: 30%;
	}

	#legacy-list1, #legacy-list2, #legacy-list3, #legacy-list4 {
		margin-top: 3em;
	}

	#legacy-list1 {
		left: 39.5%;
	}

	.line-container {
		top: 1.9em;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -.5em;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#video_player_box {
		margin-top: 5%;
	}

	#designer-anecdotes .maestro {
		margin-bottom: 1.1em;
	}

	.individual-chapter {
		margin-bottom: 3.4em;
	}

	.scroll-hint {
		top: 65%;
	}

	.project-quote-header .maestro {
		font-size: 24px;
	}

	.project-image-container {
		height: 75.5vh;
		max-width: 50%;
		margin-top: 6em;
	}

	.extended-video {
		margin-top: -6%;
	}

	.quote-anchor {
		top: 27%;
		left: 43.4%;
	}

	.extended-caption {
		bottom: 3em;
	}

	.video-caption {
		bottom: 7em;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		line-height: .7em;
	}

	.extended-intro .maestro {
		font-size: 24px;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 40px;
		top: 37%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 0;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover, #whatisdesign .chunk:hover,
	#craft .chunk:hover {
		top: -26%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: -10%;
	}

	#seekslider {
		width: 66%;
	}

/*//////////////////// ///////////////////////
    QUOTE RAGS
//////////////////// ///////////////////////*/
	#radical-quote {
		width: 77%;
	}

	#biscuit-quote {
		width: 74%;
	}

	#qeeboo-quote01 {
		width: 73%;
	}

	#qeeboo-quote02 {
		width: 71%;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-blurb {
		font-size: 13px;
	}

	#fjord-header .fjord-blurb {
		max-width: 98%;
	}

	.fjord-designer-copy {
		font-size: 35px;
	}

	#seb-header {
		max-width: 49%;
	}

	#seb-header .fjord-blurb {
		max-width: 70%;
	}

	#lidia-header, #amedeo-header {
		max-width: 45%;
	}

	#amedeo-header .fjord-blurb {
		max-width: 90%;
	}

	.fjord-portrait {
		min-width: 121.5%;
	}
}

@media all and (max-width: 1129px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1129px;
	}

	.main-copy {
		font-size: 7.3em;
	}

	#seekslider {
		width: 64%;
	}

	.next-film-name {
		font-size: 60px;
	}

	.next-film {
		margin-top: 4.3em;
	}

	.next-film:hover {
		margin-top: 3em;
	}

	#video_player_box {
		margin-top: 6%;
	}

	.extended-video {
		margin-top: -9%;
	}

	.video-caption {
		bottom: 8em;
	}

	.quote-anchor {
		left: 43%;
	}
}

@media all and (max-width: 1100px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1100px;
	}

	.grid-1 {
		grid-template-columns: 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 1.2fr 3.8fr 1fr;
	}

	.grid-3 {
		margin-top: 7.7%;
	}

	.grid-5 {
		grid-template-columns: 4fr 5.5fr 2.5fr;
	}

	#landing-cut {
		margin-top: 28.1%;
	}

	.main-copy {
		font-size: 7em;
	}

	.mini-list {
		font-size: 9px;
		letter-spacing: 1px;
		line-height: 1em;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.volume-description {
		width: 100%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-7 .legacy-line {
		width: 120%;
	}

	.legacy-name p {
		font-size: 10px;
	}

	#legacy .chunk {
		font-size: 180px;
		top: 31%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 15%;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -1em;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#seekslider {
		width: 62%;
	}

	#fullscreenbtn {
		right: 4em;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 80px;
	}

	.individual-chapter {
		margin-bottom: 2.5em;
	}

	.chapter-container {
		top: 11.5em;
	}

	#outro-container{
		width: 70%;
	}

	#designer-anecdotes {
		top: 40%;
	}

	.project-image-container {
		height: 67vh;
		top: 15%;
		margin-top: 0;
	}

	.designer-quote p {
		font-size: 13px;
		line-height: 2em;
	}

	.watch {
		top: 59%;
	}

	.extended-video {
		margin-top: -5%;
	}

	.video-caption {
		bottom: 5.5em;
	}

/*//////////////////// ///////////////////////
    QUOTE RAGS
//////////////////// ///////////////////////*/
	#radical-quote {
		width: 85%;
	}

	#merdolino-quote {
		width: 75%;
	}

	#qeeboo-quote03 {
		width: 70%;
	}

/*//////////////////// ///////////////////////
    DESIGNER NAME WIDTH
//////////////////// ///////////////////////*/
	#giorgio .volume-number {
		width: 32.3em;
	}

	#odo .volume-number {
		width: 30.5em;
	}

	#elena .volume-number {
		width: 36.5em;
	}

	#stefano .volume-number {
		width: 41.5em;
	}

	#toan .volume-number {
		width: 28em;
	}

	#kazuyo .volume-number {
		width: 34.5em;
	}

	#boggeri .volume-number {
		width: 31em;
	}

	#armando .volume-number {
		width: 32.2em;
	}

	#jekyll .volume-number {
		width: 28em;
	}

	#andrea .volume-number {
		width: 15.5em;
	}

	#sean .volume-number {
		width: 28.5em;
	}

	#aldo .volume-number {
		width: 40.5em;
	}

	#craft .volume-number {
		width: 30.7em;
	}

	#burnkit .volume-number {
		width: 15.5em;
	}

	#civilization .volume-number {
		width: 22.5em;
	}

	#whatisdesign .volume-number {
		width: 30.3em;
	}

/*//////////////////// ///////////////////////
    FJOR FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-main-copy {
		font-size: 100px;
	}

	#fjord-header .fjord-blurb {
		max-width: 89%;
	}

	.fjord-designer-copy {
		font-size: 35px;
	}

	#seb-header {
		max-width: 54%;
	}

	#seb-header .fjord-blurb {
		max-width: 80%;
	}

	#lidia-header, #amedeo-header {
		max-width: 49%;
	}

	.fjord-portrait {
		min-width: 133%;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 13px;
	}

	.audio-time {
		right: 0em;
	}

	#progressBar {
		width: 65%;
	}

	#lidia-header .fjord-blurb {
		max-width: 85%;
	}

	#amedeo-header {
		max-width: 52%;
	}
}

@media all and (max-width: 1065px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1065px;
	}

	.grid-1 {
		grid-template-columns: 1.3fr 1.3fr 1.3fr 1.3fr 1.3fr 1.3fr 3.2fr 1fr;
	}

	.grid-5 {
		grid-template-columns: 4fr 5.7fr 2.3fr;
	}

	#landing-cut {
		margin-top: 32%;
	}

	.main-copy {
		font-size: 7em;
	}

/*//////////////////// ///////////////////////
    BOTTOM LIST
//////////////////// ///////////////////////*/
	.video-list {
		left: -2em;
	}

	.setList {
		left: -1.15em;
	}

	#openbtn2 {
		left: -1.85em;
	}

	.small-description {
		width: 80%;
	}

	.description-3-small {
		width: 75%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-7 .legacy-line {
		top: -1.8em;
	}

	.grid-9 .volume-number {
		height: 7em;
	}

	#legacy .chunk {
		font-size: 175px;
		top: 26%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 17%;
	}

	#legacy-list1, #legacy-list2, #legacy-list3, #legacy-list4 {
		margin-top: 2.5em;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -.5em;
	}

	.line-container {
		top: 1.8em;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#openbtn3 .maestro, #forFjord .maestro, #openbtn5 .maestro,
	#openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 35px;
		top: 47%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover, #openbtn5 .maestro:hover,
	#openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 20%;
	}

	.project-image-container {
		height: 64vh;
	}

	.extended-intro .maestro {
		font-size: 22px;
	}

	#video_player_box {
		margin-top: 8%;
	}

	#seekslider {
		width: 60%;
	}

	.extended-title {
		top: 24%;
	}

	.intro-bio-line {
		top: 13.2em;
	}

	#designer-anecdotes {
		top: 37%;
	}

	.scroll-hint {
		top: 63%;
	}

	.quote-anchor {
		left: 42.6%;
	}

	#designer-anecdotes .maestro {
		margin-bottom: 1em;
	}

	.extended-video {
		margin-top: -4%;
	}

	.video-caption {
		bottom: 5em;
	}
}

@media all and (max-width: 1054px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1054px;
	}

	.main-copy {
		font-size: 6.7em;
	}
}

@media all and (max-width: 1024px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1024px;
	}

	.grid-1 {
		grid-template-columns: 1.3fr 1.3fr 1.3fr 1.3fr 1.3fr 1.3fr 3.2fr 1fr;
	}

	.grid-5 {
		grid-template-columns: 4.3fr 6fr 1.7fr;
	}

	#landing-cut {
		margin-top: 19.6%;
	}

	.main-copy {
		font-size: 6.7em;
	}

	.portrait-container.tapped {
		left: 0;
	}

	.description-2-small {
		width: 75%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	#legacy-content {
		padding: 10px;
	}

	.legacy-row1 {
		left: 1.2em;
	}

	.grid-7 .legacy-line {
		top: -1.7em;
	}

	#legacy .chunk {
		font-size: 170px;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 15%;
	}

	#legacy-list1, #legacy-list2, #legacy-list3, #legacy-list4 {
		margin-top: 2.2em;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -1em;
	}

	.line-container {
		top: 1.6em;
	}

	.designer-header p {
		top: -5.5em;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
	    width: 24em;
	    height: 75vh;
	    left: 1em;
	}

	.bts-box {
		top: 3.5em;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 59em;
		height: 75vh;
	}

	.grid-20 {
		grid-template-columns: 2.5fr 8.5fr 1fr;
	}

	#bts-container {
		margin-top: 3.5em;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	.project-image-container {
		height: 77vh;
	}

	#video_controls_bar {
		bottom: 1.5em;
	}

	#seekslider {
		left: 1em;
		width: 58%;
		margin-right: 3em;
	}

	.watch {
		top: 62%;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 55px;
	}

	#designer-anecdotes .maestro {
		font-size: 45px;
	}

	.quote-anchor {
		left: 42.3%;
	}

	.chapter-container {
		top: 12.3em;
	}

	.designer-quote p {
		font-size: 12px;
	}

	.scroll-hint {
		top: 60%;
	}

	.intro-bio p {
		font-size: 10px;
	}

	.extended-title {
		top: 26%;
	}

	.intro-bio-line {
		top: 14em;
	}

	#designer-anecdotes {
		top: 37%;
	}

	.individual-chapter {
		margin-bottom: 3em;
	}

	#section02-scroll-hint {
		top: 45%;
	}

	.extended-video {
		margin-top: -15%;
	}

	.extended-caption {
		right: 10px;
	}

	.video-caption {
		bottom: 11em;
		right: 10px;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-content {
		top: 11em;
	}

	#progressBar {
		width: 63%;
	}

	.fjord-designer-copy {
		font-size: 30px;
	}

	#lidia-header {
		max-width: 44%;
	}

	#lidia-header .fjord-blurb {
		max-width: 100%;
	}

	.grid-18 {
		grid-template-columns: 7.5fr 3.5fr 1fr;
	}

	#seb-header {
		max-width: 75%;
	}

	#amedeo-header {
		max-width: 80%;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 35px;
		top: 48%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 18%;
	}

	.fjord-main-copy {
		font-size: 95px;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 12px;
	}

	.fjord-portrait {
		min-width: 113%;
	}

	#designer-anecdotes #fjord-intro-quote {
		font-size: 32px;
	}

	#fjord-caption {
		bottom: 3em;
	}

	#fjord-final {
		margin-top: -2em;
	}

/*/////////////////// ///////////////////////
	WATCH CHUNK WIDTH
//////////////////// ///////////////////////*/
	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 70px;
		top: 18%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: -2%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover,
	#whatisdesign .chunk:hover, #craft .chunk:hover {
		top: -15%;
	}

	#giorgio .volume-number {
		width: 27.7em;
	}

	#odo .volume-number {
		width: 26.5em;
	}

	#elena .volume-number {
		width: 31.7em;
	}

	#stefano .volume-number {
		width: 36em;
	}

	#toan .volume-number {
		width: 24.1em;
	}

	#kazuyo .volume-number {
		width: 30em;
	}

	#boggeri .volume-number {
		width: 26.8em;
	}

	#armando .volume-number {
		width: 28em;
	}

	#jekyll .volume-number {
		width: 24em;
	}

	#andrea .volume-number {
		width: 13.5em;
	}

	#sean .volume-number {
		width: 24.5em;
	}

	#aldo .volume-number {
		width: 35.3em;
	}

	#craft .volume-number {
		width: 26.7em;
	}

	#burnkit .volume-number {
		width: 13.5em;
	}

	#civilization .volume-number {
		width: 19.5em;
	}

	#whatisdesign .volume-number {
		width: 26.3em;
	}

/*/////////////////// ///////////////////////
	PROLOGUE PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.prologue-container {
		margin-top: 50%;
	}

	.prologue-intro-quote {
		font-size: 40px;
	}

/*/////////////////// ///////////////////////
	OUTRO CONTAINER
//////////////////// ///////////////////////*/
	.next-film-name {
		font-size: 60px;
	}

	.next-film {
		margin-top: 4.3em;
	}

	.next-film:hover {
		margin-top: 3em;
	}

	.next-quote-container {
		bottom: 18em;
	}

	.next-film-container {
		bottom: 55px;
	}

	.next-quote-container {
		bottom: 14em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 17em;
	}

	.next-quote {
		font-size: 20px;
	}

	#enterVolume {
		margin-top: 4.6em;
	}

	#enterVolume:hover {
		margin-top: 3em;
	}

	#nextVolContainer {
		height: 8.5em;
		bottom: 10em;
	}

	.vl {
		top: 2em;
		height: 2.5em;
	}

/*/////////////////// ///////////////////////
	OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	#toanNext {
		width: 55%;
	}

	#stefanoNext {
		width: 75%;
	}

	#elenaNext {
		width: 80%;
	}

/*/////////////////// ///////////////////////
	ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-description p, .who-said-it p {
		font-size: 13px;
	}

	.doc-name p {
		font-size: 32px;
	}
}

@media all and (max-width: 1008px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 1008px;
	}

	#landing-cut {
		margin-top: 20.5%;
	}

	.main-copy {
		font-size: 6.5em;
	}

	.extended-video {
		margin-top: -16%;
	}
}

@media all and (max-width: 985px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 985px;
	}

	#landing-cut {
		margin-top: 36.6%;
	}

	.main-copy {
		font-size: 6.2em;
	}

	.grid-5 {
		grid-template-columns: 4.5fr 6.5fr 1fr;
	}

	.bottom-list-line {
		left: -1.5em;
	}

	hr {
		width: 120%;
	}

	.video-list {
		left: -2.5em;
	}

	.setList {
		left: -1.4em;
	}

	#openbtn2 {
		left: -2.4em;
	}

	.description-3 {
		width: 95%;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-9 {
		grid-template-columns: 8fr 2fr;
	}

	.grid-7 .legacy-line {
		top: -1.6em;
	}

	.grid-9 .volume-number {
		height: 9em;
	}

	#legacy-list1 {
		left: 39%;
	}

	#legacy .chunk {
		font-size: 230px;
		line-height: 115px;
		top: 30%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 11%;
	}

	#legacy-list1, #legacy-list2, #legacy-list3, #legacy-list4 {
		display: none;
	}

	#site-2012, #site-2014, #site-2016,
	#site-2013, #site-2015, #site-2017 {
		margin-top: -.5em;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#fullscreenbtn {
		width: 12%;
	}

	#seekslider {
		width: 56%;
		left: 1em;
		margin-right: 3em;
	}

	.project-image-container {
		top: 17%;
	}

	.extended-video {
		margin-top: -17%;
	}

	.video-caption {
		bottom: 11.5em;
	}

	.fjord-portrait {
		min-width: 148%;
	}

	#progressBar {
		width: 72%;
	}

	#video_player_box {
		margin-top: 12%;
	}

	.quote-anchor {
		left: 42%;
	}
}

@media all and (max-width: 945px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 945px;
	}

	#landing-cut {
		margin-top: 31%;
	}

	.main-copy {
		font-size: 6em;
	}

	.grid-1 {
		grid-template-columns: 1.4fr 1.4fr 1.4fr 1.4fr 1.4fr 1.4fr 2.6fr 1fr;
	}

	.grid-5 {
		grid-template-columns: 4.7fr 6.5fr .8fr;
	}

	.grid-3 {
		margin-top: 6%;
	}

	#seekslider {
		width: 55%;
	}

	.extended-caption {
		bottom: 3em;
	}

	.video-caption {
		bottom: 12.5em;
	}

	.fjord-main-copy {
		font-size: 90px;
	}

	#seb-header {
		max-width: 54%;
	}

	#lidia-header {
		max-width: 49%;
	}

	#amedeo-header {
		max-width: 50%;
	}

	#openbtn3 .maestro, #forFjord .maestro, #openbtn5 .maestro,
	#openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 30px;
		top: 54%;
	}

	#outro-container {
		width: 80%;
	}

	.next-up {
		margin-bottom: -2em;
	}

	.next-film-name {
		font-size: 55px;
	}

	.next-film {
		margin-top: 3.5em;
	}

	.next-film:hover {
		margin-top: 2em;
	}

	.quote-anchor {
		top: 23.5%;
		left: 41.6%;
	}

	.project-image-container {
		max-width: 50%;
	}

	#video-container {
		top: -4%;
	}

	.extended-video {
		margin-top: 13%;
	}
}

@media all and (max-width: 912px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 912px;
	}

	#landing-cut {
		margin-top: 31%;
	}

	.main-copy {
		font-size: 5.8em;
	}

	.grid-5 {
		grid-template-columns: 4.7fr 6.7fr .6fr;
	}
	.extended-video {
		min-width: 100%;
		min-height: 100%;
		margin-top: 19%;
	}

	.video-caption {
		bottom: 13em;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 60px;
	}

	.next-film-container {
		bottom: 60px;
	}

	#seekslider {
		width: 53%;
	}

	.project-image-container {
		top: 21%;
	}

	.quote-anchor {
		top: 25.5%;
	}

	.watch {
		top: 65%;
	}
}

@media all and (max-width: 895px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 895px;
	}

	.grid-1 {
		grid-template-columns: 1.7fr 1.7fr 1.7fr 1.7fr 1.7fr 1.7fr 1fr .8fr;
	}

	.grid-5 {
		grid-template-columns: 5fr 7fr;
	}

	#landing-cut {
		margin-top: 34.5%;
	}

	.main-copy {
		font-size: 5.5em;
	}

	.description-1-small {
		width: 75%;
	}

	.description-3-small {
		width: 70%;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
	    width: 20.7em;
	    height: 65vh;
	    left: 1em;
	}

	.bts-box {
		top: 5em;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 51.2em;
		height: 65vh;
	}

	#bts-container {
		margin-top: 5em;
	}
	.grid-20 {
		grid-template-columns: 2.5fr 8.5fr 1fr;
	}

	.name {
		font-size: 14px;
	}

	.roles {
		font-size: 11px;
	}

	.main-mini-list {
		visibility: hidden;
	}

	.mini-program {
		display: none;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/

	.fjord-main-copy {
		font-size: 80px;
	}

	.fjord-designer-copy {
		font-size: 25px;
	}

	#fjord-header .fjord-blurb {
		max-width: 96%;
	}

	#seb-header {
		max-width: 48%;
	}

	#seb-header .fjord-blurb {
		max-width: 97%;
	}

	#lidia-header {
		max-width: 44%;
	}

	#amedeo-header {
		max-width: 46%;
	}

	#progressBar {
		width: 67%;
	}

	.video-caption {
		bottom: 13.5em;
	}
}

@media all and (max-width: 840px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 840px;
	}

	.grid-55 {
		grid-template-columns: 3.5fr 8.5fr;
	}

	#landing-cut {
		margin-top: 39.2%;
	}

	.main-copy {
		font-size: 5em;
		letter-spacing: -1px;
	}

	.video-list {
		left: -1.5em;
	}

	.setList {
		left: -0.9em;
	}

	#openbtn2 {
		left: -1.4em;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 12%;
	}

	.description-2 {
		width: 95%;
	}

 	.description-3 {
 		width: 90%;
 	}

	.volume-description p {
		font-size: 25px;
	}

	.small-description {
		width: 80%;
	}

	.description-3-small {
 		width: 75%;
 	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
 	#video_player_box {
 		margin-top: 17%;
 	}

 	#seekslider {
 		margin-right: 2em;
 	}

 	#fullscreenbtn {
 		right: 3em;
 	}

 	.extended-video {
 		margin-top: 17%;
	}

	.video-caption {
		bottom: 14.5em;
	}

	.next-film-container {
		bottom: 11em;
	}

	.next-quote-container {
		bottom: 19em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 22em;
	}

	#seekslider {
		width: 53%;
	}

	.quote-anchor {
		left: 40.6%;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	#progressBar {
		width: 64%;
	}

	.fjord-main-copy {
		font-size: 75px;
	}

	#fjord-header {
		max-width: 58%;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		top: -10em;
	}

	#audio-container {
		position: absolute;
		left: 20px;
		top: 6em;
		width: 27%;
	}

	.fjord-designer-copy {
		font-size: 30px;
	}

	/*#forFjord {
		bottom: -28em;
	}*/

	.audio-time {
		right: -11em;
	}

	#fjord-header .fjord-blurb {
		max-width: 83%;
	}

	#seb-header {
		max-width: 47%;
	}

	#lidia-header {
		max-width: 43%;
	}

	#amedeo-header {
		max-width: 46%;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro. #openbtn7 .maestro {
		font-size: 30px;
		top: 54%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 30%;
	}

	.fjord-portrait-container {
		padding: 0;
		max-width: 100%;
		max-height: 100%;
	}

	.fjord-portrait {
		min-width: 191.5%;
		margin-left: -20em;
	}

	#seb-copy .fjord-designer-copy,
	#lidia-copy .fjord-designer-copy,
	#amedeo-copy .fjord-designer-copy {
		margin-bottom: .5em;
	}
}

@media all and (max-width: 805px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 805px;
	}

	#landing-cut {
		margin-top: 51.6%;
	}

	.main-copy {
		font-size: 4.9em;
	}

	.grid-1 {
		grid-template-columns: 1.8fr 1.8fr 1.8fr 1.8fr 1.8fr 1.8fr .6fr .6fr;
	}

	.video-list {
		left: -.5em;
	}

	.setList {
		left: -.35em;
	}

	#openbtn2 {
		left: -.55em;
	}

	.description-2 {
		width: 100%;
	}

	.description-1-small, .description-2-small {
		width: 85%;
	}

	.description-3-small {
		width: 80%;
	}

	#fullscreenbtn {
		width: 13%;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 55px;
	}

	.project-quote-header .maestro {
		font-size: 22px;
	}

	.video-caption {
		bottom: 7.3em;
	}

	.extended-video {
		margin-top: 13%;
	}

	.video-caption {
		bottom: 17em;
	}

	.project-image-container {
		max-width: 45%;
	}

	.quote-anchor {
		left: 45.2%;
	}

	#biscuit-quote {
		width: 93%;
	}

	#seekslider {
		width: 50%;
	}
}

@media all and (max-width: 768px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 768px;
	}

	#landing-cut {
		margin-top: 42.2%;
	}

	.main-copy {
		font-size: 4.5em;
	}

	.video-list {
		left: 0em;
	}

	.setList {
		left: -.08em;
	}

	#openbtn2 {
		left: .1em;
	}

	.volume-description p {
		font-size: 24px;
	}

	.grid-55 {
		grid-template-columns: 4.5fr 7.5fr;
	}

	#bottom-list {
		margin-top: 5%;
	}

	.description-2-small {
		width: 90%;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
	    width: 17.5em;
	    height: 55vh;
	    left: 1em;
	}

	.bts-box {
		top: 7em;
	}

	.location {
		font-size: 9px;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 43.5em;
		height: 55vh;
	}

	.grid-20 {
		grid-template-columns: 2.5fr 8.5fr 1fr;
	}

	#bts-container {
		margin-top: 7em;
	}

	.name {
		font-size: 14px;
	}

	.roles {
		font-size: 11px;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#video_player_box {
		margin-top: 20%;
	}

	#seekslider {
		left: 1.5em;
		width: 48.5%;
	}

	#video-container {
		top: 46%;
	}

	.extended-video {
		margin-top: -3em;
	}

	.video-caption {
		bottom: 8.3em;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		top: 54%;
	}

	.watch {
		top: 68%;
	}

	.project-image-container {
		left: 20px;
		top: 39%;
	}

	.slide .grid-12 {
		grid-template-columns: 11fr 1fr;
	}

	.designer-quote {
		width: 100%;
	}

	.chapter-container {
		top: 8em;
	}

	#radical-quote {
		width: 90%;
	}

	.project-image-container {
		max-width: 50%;
		max-height: 50vh;
		top: 46%;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03,
	#radical-quote, #biscuit-quote, #merdolino-quote,
	#ballet-quote, #uomamoda-quote01, #ballet02-quote,
	#primates-quote02, #studio01-quote, #canon-quote,
	#frida02-quote, #africa-quote, #frida01-quote,
	#studio02-quote, #dual-quote, #studio03-quote,
	#sans-quote, #honest01-quote, #letter-quote,
	#honest02-quote, #primates-quote03, #primates-quote01,
	#kazuyo-quote02, #kazuyo-quote03, #lecture-quote,
	#beyond-quote, #honest03-quote, #hidden-quote01,
	#primates-quote01, #ino-quote, #kazuyo-quote01,
	#breaking-quote, #hidden-quote02, #steiner-quote, #around-quote {
		width: 53%;
	}

	.extended-video {
		margin-top: -2em;
	}

	#slideAnchor {
		top: 1.5% !important;
		left: 91%;
		z-index: 1;
	}

	.video-caption {
		bottom: 5.9em;
	}

	.next-film:hover {
		margin-top: 2em;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	#progressBar {
		width: 64%;
	}

	.fjord-main-copy {
		font-size: 75px;
	}

	#fjord-header {
		max-width: 58%;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		top: -11em;
	}

	#audio-container {
		position: absolute;
		left: 20px;
		top: 6em;
		width: 35%;
	}

	/*#forFjord {
		bottom: -28em;
	}*/

	.audio-time {
		right: -9em;
	}

	#seb-header {
		max-width: 67%;
	}

	#lidia-header {
		max-width: 59%;
	}

	#amedeo-header {
		max-width: 60%;
	}

	#fjord-header .fjord-blurb {
		max-width: 91%;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 30px;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 20%;
	}

	.fjord-portrait-container {
		padding: 0;
		max-width: 100%;
		max-height: 100%;
	}

	.fjord-portrait {
		min-width: 191.5%;
		margin-left: -20em;
	}
}

@media all and (max-width: 750px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 750px;
	}

	#landing-cut {
		margin-top: 43.4%;
	}

	.video-list {
		left: 1em;
	}

	.setList {
		left: .45em;
	}

	#openbtn2 {
		left: 1em;
	}

	.volume-description p {
		font-size: 22px;
		line-height: 32px;
	}

	.description-2 {
		width: 90%;
	}

	.description-1-small, .description-2-small {
		width: 90%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 15%;
	}

	.watch .volume-number {
		height: 4em;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 70px;
		top: -5%;
	}

	.watch .chunk:hover {
		top: -25%;
	}

	.title-line hr {
		width: 86.5%;
	}

	#fullscreenbtn {
		width: 15%;
	}

	#designer-anecdotes .maestro {
		font-size: 50px;
		margin-bottom: 1.05em;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03,
	#radical-quote, #biscuit-quote, #merdolino-quote {
		width: 55%;
	}

	.scroll-hint {
		top: 63%;
	}

	#seekslider {
		width: 46.5%;
	}
}

@media all and (max-width: 730px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 730px;
	}

	#landing-cut {
		margin-top: 47.6%;
	}

	.main-copy {
		font-size: 4.4em;
		letter-spacing: -1px;
	}

	.video-list {
		left: 1.5em;
	}

	.setList {
		left: .75em;
	}

	#openbtn2 {
		left: 1.55em;
	}

	.volume-description {
		width: 90%;
	}

	.volume-description p {
		font-size: 21px;
		line-height: 32px;
	}

	.description-3-small {
		width: 90%;
	}

	.project-image-container {
		top: 44.5%;
	}

	.video-caption {
		bottom: 6.9em;
	}

	.extended-video {
		margin-top: -2.5em;
	}

	#outro-container {
		bottom: 0;
	}

	#seekslider {
		width: 45.5%;
	}
}

@media all and (max-width: 705px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 705px;
	}

	#landing-cut {
		margin-top: 50%;
	}

	.main-copy {
		font-size: 4.2em;
	}

	.grid-5 {
		grid-template-columns: 4.5fr 7.5fr;
	}

	.volume-number {
		height: 8em;
	}

	.chunk {
		font-size: 200px;
		top: 26%;
	}

	.chunk-list a {
		font-size: 11px;
		line-height: 19px;
	}

	.volume-description p {
		font-size: 20px;
		line-height: 30px;
	}

	.video-list {
		left: 1em;
	}

	.setList {
		left: .45em;
	}

	#openbtn2 {
		left: 1.05em;
	}

	.description-1-small {
		width: 110%;
	}

	.description-2-small {
		width: 85%;
	}

	.description-3-small {
		width: 100%;
	}

	.description-3 {
		width: 80%;
	}

	.watch {
		top: 70%;
	}

	#video_player_box {
		margin-top: 25%;
	}

	#seekslider {
		width: 44%;
	}

	.project-image-container {
		top: 48.5%;
	}

	.extended-video {
		margin-top: -1.5em;
	}

	.video-caption {
		bottom: 7.9em;
		right: 10px;
	}

	.watch {
		top: 72%;
	}

	.top-right {
		right: 4em;
	}

	.fjord-blurb {
		font-size: 12px;
	}

	#seb-header {
		max-width: 71%;
	}

	#lidia-header {
		max-width: 61%;
	}

	#amedeo-header {
		max-width: 62%;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 2.2em;
	}

	#audio-container {
		top: 5em;
	}

	#progressBar {
		width: 62%;
	}
}

@media all and (max-width: 685px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 685px;
	}

	#landing-cut {
		margin-top: 41.5%;
	}

	.main-copy {
		font-size: 3.8em;
	}

	.theVolume {
		top: .7em;
	}

	.video-list {
		top: 1.5em;
		left: 1em;
	}

	.setList {
		left: .45em;
	}

	#openbtn2 {
		left: 1.05em;
	}

	.bottom-list-line {
		top: .5em;
	}

	.grid-5 {
		grid-template-columns: 4.7fr 7.3fr;
	}

	.grid-55 {
		grid-template-columns: 3.5fr 8.5fr;
	}

	.description-1-small, .description-2-small {
		width: 105%;
		font-size: 12px;
	}

	.description-3-small {
		width: 90%;
	}

	.description-3 {
		width: 80%;
	}

	#progressBar {
		width: 60%;
	}

	#lidia-header {
		max-width: 62%;
	}

	#amedeo-header {
		max-width: 64%;
	}

	.fjord-portrait {
		min-width: 215.5%;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 28px;
		top: 56%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover, #openbtn7 .maestro:hover {
		top: 32%;
	}

	.audio-time {
		right: -8em;
	}

	#seekslider {
		width: 42.5%;
	}

	#designer-anecdotes .maestro {
		font-size: 45px;
	}

	.scroll-hint {
		top: 59%;
	}
}

@media all and (max-width: 675px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 675px;
	}

	.container {
		padding: 10px;
	}

	#landing-cut {
		margin-top: 39.2%;
	}

	.main-copy {
		font-size: 3.7em;
	}

	.home-button {
		font-size: 17px;
		letter-spacing: .6px;
	}

	.empty-space {
		display: none;
	}

	.setList {
		left: 0;
		margin-top: 25%;
	}

	.volume-number {
		height: 4em;
		left: -.03em;
	}

	.chunk {
		font-size: 100px;
		letter-spacing: -2px;
		top: -17%;
	}

	#bottom-list {
		margin-top: 5%;
	}

	.video-list {
		left: 0;
	}

	#openbtn2 {
		left: 0;
	}

	.grid-5 {
		grid-template-columns: 12fr;
	}

	.grid-7 {
		grid-template-columns: 12fr;
	}

	.chunk-list a {
		font-size: 20px;
		letter-spacing: .3px;
		line-height: 35px;
	}

	#volume-one, #volume-two, #volume-three {
		margin-top: 1.5em;
	}

	.volume-preview {
		position: relative;
		top: -1em;
		z-index: 10;
	}

	.iso-preview {
		top: 0;
		z-index: 10;
	}

	.chunk-list {
		position: relative;
		top: -.5em;
	}

	.volume-description {
		width: 70%;
	}

	.volume-description p {
		font-size: 26px;
		line-height: 35px;
	}

	.small-description {
		margin-top: -.5em;
	}

	.volume-description-small {
		width: 60%;
	}

	.description-1-small .volume-description-small {
		width: 50%;
	}

	.portrait-container {
		top: 0;
		left: 0;
		right: 0;
	}

	.designer-portrait {
		max-width: 110%;
		max-height: 110%;
	}

	.bottom-list-line {
		top: 0;
		left: -1em;
	}

	.mobile-line {
		display: block;
		top: 1.5em;
	}

	.before-epilogue {
		display: block;
		top: -.5em;
	}

	.grid-55 {
		grid-template-columns: 3.4fr 8.6fr;
	}

	.theLine {
		top: -12.5em;
	}

	.theLastLine {
		top: -10.3em;
	}

	.iso-film1, .iso-film2, .iso-film3, .iso-hover-copy {
		margin-top: .5em;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/
	.grid-9 {
		grid-template-columns: 1fr;
	}

	.grid-12 {
		grid-template-columns: 2fr 2fr;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
	    width: 27em;
	    height: 85vh;
	    left: 1em;
	}

	.bts-box {
		top: 0;
	}

	.location {
		font-size: 10px;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.box {
		width: 65em;
		height: 85vh;
	}

	.grid-20 {
		grid-template-columns: 11fr 1fr;
	}

	#bts-container {
		margin-top: 0em;
	}

	.name {
		font-size: 17px;
	}

	.roles {
		font-size: 12px;
	}

	.bts-text {
		display: none;
	}

	#designer-anecdotes .maestro {
		font-size: 45px;
	}

	#video_player_box {
		margin-top: 28%;
	}

	#slideAnchor {
		top: 4%;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 2.2em;
	}

	#lidia-header {
		max-width: 64%;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	.watch .chunk, #elena .chunk, #stefano .chunk, #aldo .chunk,
	#sean .chunk, #andrea .chunk, #toan .chunk, #jekyll .chunk,
	#kazuyo .chunk, #craft .chunk, #boggeri .chunk,
	#giorgio .chunk, #whatisdesign .chunk {
		font-size: 62px;
	}

	.watch .chunk:hover, #stefano .chunk:hover,
	#andrea .chunk:hover, #sean .chunk:hover,
	#aldo .chunk:hover, #elena .chunk:hover {
		top: -25%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover,
	#whatisdesign .chunk:hover, #craft .chunk:hover {
		top: -40%;
	}
}

@media all and (max-width: 644px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 644px;
	}

	.main-copy {
		font-size: 3.6em;
	}

	.grid-55 {
		grid-template-columns: 3.6fr 8.4fr;
	}

	.volume-description-small {
		width: 60%;
	}

	.description-1-small .volume-description-small {
		width: 52%;
	}

	.description-2 {
		width: 70%;
	}

	#seekslider {
		width: 38%;
	}

	#fullscreenbtn {
		width: 17%;
	}

	#video_player_box {
		margin-top: 31%;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 53px;
		top: 0;
	}

	.watch .chunk:hover {
		top: -20%;
	}

	.title-line hr {
		width: 73.5%;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03, #radical-quote, #biscuit-quote, #merdolino-quote {
		width: 56%;
	}

	.extended-video {
		margin-top: -4em;
	}

	.video-caption {
		bottom: 8.2em;
	}

	.fjord-main-copy {
		font-size: 65px;
	}

	#fjord-header .fjord-blurb {
		max-width: 83%;
	}

	#seb-header, #lidia-header, #amedeo-header {
		max-width: 50%;
	}

	.fjord-designer-copy {
		font-size: 20px;
		line-height: 1.4em;
		letter-spacing: -.5px;
	}

	#amedeo-header .fjord-blurb {
		max-width: 100%;
	}
}

@media all and (max-width: 613px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 613px;
	}

	#landing-cut {
		margin-top: 41%;
	}

	.main-copy {
		font-size: 3.4em;
	}

	.chunk {
		top: -16%;
	}

	.grid-55 {
		grid-template-columns: 3.8fr 8.2fr;
	}

	.volume-description {
		width: 75%;
	}

	.description-1-small .volume-description-small {
		width: 55%;
	}

	.description-3-small .volume-description-small {
		width: 70%;
	}

	#video_player_box {
		margin-top: 34%;
	}

	.project-image-container {
		top: 52.5%;
	}

	#designer-anecdotes .maestro {
		font-size: 40px;
	}

	.scroll-hint {
		top: 58%;
	}

	.next-film-name {
		font-size: 70px;
	}

	.next-film {
		margin-top: 2.2em;
	}

	.next-film:hover {
		margin-top: .5em;
	}

	#outro-container {
		width: 85%
	}

	#progressBar {
		width: 55%;
	}

	.audio-time {
		margin-top: -.5em;
	}

	#banner-header .chunk-number {
		font-size: 9px;
	}

	#seb-header, #lidia-header, #amedeo-header {
		max-width: 53%;
	}

	#seekslider {
		width: 36%;
	}

	.extended-video {
		margin-top: -1em;
	}

	.video-caption {
		bottom: 9em;
	}
}

@media all and (max-width: 595px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 595px;
	}

	.main-copy {
		font-size: 3.3em;
	}

	.extended-caption {
		color: #F1F0E4;
		bottom: 0.3em;
		right: 0;
	}

	.watch {
		top: 76%;
	}

	.video-caption {
		bottom: 6.9em;
		right: 0;
	}

	#seekslider {
		width: 34%;
	}
}

@media all and (max-width: 580px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 580px;
	}

	#landing-cut {
		margin-top: 43%;
	}

	.main-copy {
		font-size: 3.8em;
	}

	.volume-description {
		width: 80%;
	}

	.description-1-small .volume-description-small {
		width: 60%;
	}

	.description-2-small .volume-description-small {
		width: 70%;
	}

	.grid-55 {
		grid-template-columns: 4fr 8fr;
	}

	.chunk-list a {
		font-size: 18px;
		line-height: 30px;
	}

	.theLine {
		top: -11em;
	}

	.theLastLine {
		top: -9em;
	}

	.designer-portrait {
		max-width: 120%;
	}

	#seekslider {
		width: 29%;
		margin-right: 3em;
	}

	#fullscreenbtn {
		width: 20%;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 2.2em;
	}

	.fjord-portrait {
		min-width: 255.5%;
	}

	.fjord-designer-copy {
		font-size: 18px;
	}

	#audio-container {
		top: 7em;
	}

	.fjord-blurb {
		font-size: 14px;
	}
}

@media all and (max-width: 576px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 576px;
	}

	.grid-55 {
		grid-template-columns: 3.8fr 8.2fr;
	}

	#landing-cut {
		margin-top: 43.3%;
	}

	.main-copy {
		font-size: 3.3em;
		letter-spacing: -1.5px;
	}

	.extended-video {
		margin-top: -4.5em;
	}
}

@media all and (max-width: 555px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 555px;
	}

	#landing-cut {
		margin-top: 45.3%;
	}

	.main-copy {
		font-size: 3.6em;
	}

	.chunk-list a {
		font-size: 17px;
		letter-spacing: .5px;
		line-height: 28px;
	}

	.volume-description {
		width: 85%;
	}

	.description-1-small .volume-description-small {
		width: 65%;
	}

	.theLine {
		top: -10.3em;
	}

	.theLastLine {
		top: -8.5em;
	}

	.extended-video {
		margin-top: -1.5em;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 2.2em;
	}

	.fjord-portrait {
		min-width: 255.5%;
	}

	.fjord-designer-copy {
		font-size: 24px;
	}

	#audio-container {
		top: 7em;
	}

	.fjord-blurb {
		font-size: 14px;
	}

	#playlist {
		width: 15em;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		max-width: 69%;
	}

	.audio-time {
		right: -10.9em;
	}

	#fjord-header .fjord-blurb {
		max-width: 85%;
	}

	#progressBar {
		width: 50%;
	}
}

@media all and (max-width: 539px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 539px;
	}

	#landing-cut {
		margin-top: 46.6%;
	}

	.main-copy {
		font-size: 3.5em;
		letter-spacing: -1px;
	}

	.grid-55 {
		grid-template-columns: 3.8fr 8.2fr;
	}

	.volume-description {
		width: 85%;
	}

	.description-3-small .volume-description-small {
		width: 75%;
	}

	#video_player_box {
		margin-top: 43%;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 44.5px;
	}

	.title-line hr {
		width: 60%;
	}

	#seekslider {
		width: 26%;
	}

	#designer-anecdotes {
		top: 36%;
	}

	#designer-anecdotes .maestro {
		font-size: 35px;
	}

	.individual-chapter {
		margin-bottom: 2em;
	}

	.scroll-hint {
		top: 54%;
	}

	.project-image-container {
		top: 56%;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		font-size: 9px;
	}

	.extended-intro .maestro {
		letter-spacing: -.1px;
	}

	#odoNext, #elenaNext, #stefanoNext, #toanNext, #kazuyoNext,
	#boggeriNext, #armandoNext, #jekyllNext, #andreaNext, #seanNext,
	#aldoNext, #craftNext, #fjordNext, #burnkitNext, #civNext,
	#whatNext {
		width: 85%;
	}

	.fjord-portrait {
		min-width: 275.5%;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		max-width: 72%;
	}
}

@media all and (max-width: 520px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 520px;
	}

	#landing-cut {
		margin-top: 49.4%;
	}

	.main-copy {
		font-size: 3.2em;
	}

	.chunk-list a {
		font-size: 16px;
	}

	#legacy .chunk {
		font-size: 220px;
		top: 32%;
	}

	#seekslider {
		width: 23%;
		left: 2em;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 2.2em;
	}

	#audio-container {
		top: 6em;
	}

	.fjord-designer-copy {
		font-size: 22px;
	}

	.audio-time {
		right: -9.5em;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		max-width: 68%;
	}
}

@media all and (max-width: 504px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 539px;
	}

	#landing-cut {
		margin-top: 50%;
	}

	.main-copy {
		font-size: 3.2em;
		letter-spacing: -1px;
	}

	.description-2-small .volume-description-small {
		width: 75%;
	}

	.description-3-small .volume-description-small {
		width: 80%;
	}

	.volume-description {
		width: 90%;
	}

	#legacy .chunk {
		font-size: 215px;
		top: 32%;
	}

	#seekslider {
		width: 21%;
		left: 3em;
		margin-right: 4em;
	}

	#fullscreenbtn {
		width: 21%;
	}

	/*#video_controls_bar {
		bottom: -27em;
	}*/

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 4em;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03, #radical-quote, #biscuit-quote, #merdolino-quote {
		width: 80%;
	}

	.project-image-container {
		top: 46%;
		max-width: 74%;
	}

	.extended-video {
		margin-top: -2em;
	}

	.video-caption {
		bottom: 3.5em;
	}

	.next-film {
		margin-top: 3em;
	}

	.next-film-name {
		font-size: 60px;
	}

	.next-film-container {
		bottom: 6.8em;
	}

	#outro-container {
		bottom: 3em;
	}

	#slideAnchor {
		left: 63.5%;
	}

	.project-image-container {
		top: 45%;
	}

	.next-film-volume-title {
		margin-bottom: 0;
	}

	.next-quote {
		margin-top: .5em;
	}

	.next-quote-container {
		margin-bottom: -2em;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		max-width: 76%;
	}

	#progressBar {
		width: 43%;
	}
}

@media all and (max-width: 475px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 475px;
	}

	#landing-cut {
		margin-top: 60.5%;
	}

	.main-copy {
		font-size: 3em;
	}

	.portrait-container {
		left: -5em;
		right: -7em;
	}

	.designer-portrait {
		max-width: 150%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 35%;
	}

	.grid-9 .volume-number {
		height: 8em;
	}

	#legacy .chunk {
		font-size: 200px;
		top: 26%;
	}

	.volume-description p {
		font-size: 24px;
		line-height: 32px;
		margin-top: .2em;
	}

	.description-1-small .volume-description-small {
		width: 75%;
	}

	.description-2-small .volume-description-small {
		width: 80%;
	}

	.chunk-list a {
		font-size: 14px;
		line-height: 25px;
	}

	.theLine {
		top: -9.3em;
	}

	.theLastLine {
		top: -7.75em;
	}

	.designer-name:hover ~ .timer-container {
		display: none;
	}

	#video_player_box {
		margin-top: 50%;
	}

	.watch {
		top: 85%;
	}

	#designer-anecdotes .maestro {
		font-size: 30px;
	}

	.individual-chapter {
		margin-bottom: 2em;
	}

	.scroll-hint {
		top: 53%;
	}

	.project-image-container {
		top: 48.5%;
	}

	.extended-video {
		margin-top: -3em;
	}

	.video-caption {
		bottom: 4.5em;
	}

	.next-quote {
		font-size: 24px;
	}

	#lidia-container, #amedeo-container {
		margin-top: 2.5em;
	}

	#fjord-header, #seb-header, #lidia-header, #amedeo-header {
		max-width: 80%;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 13px;
	}

	.fjord-portrait {
		min-width: 330%;
		margin-left: -37em;
	}

	#amedeo-portrait img {
		margin-left: -21em;
	}

	#odoNext, #elenaNext, #stefanoNext, #toanNext, #kazuyoNext,
	#boggeriNext, #armandoNext, #jekyllNext, #andreaNext, #seanNext,
	#aldoNext, #craftNext, #fjordNext, #burnkitNext, #civNext,
	#whatNext {
		width: 90%;
	}

	#seekslider {
		width: 16%;
	}
}

@media all and (max-width: 446px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 446px;
	}

	#landing-cut {
		margin-top: 67.5%;
	}

	.main-copy {
		font-size: 2.9em;
	}

	.grid-55 {
		grid-template-columns: 3.8fr 8.2fr;
	}

	.volume-description p {
		font-size: 22px;
		line-height: 30px;
	}

	.small-description {
		width: 75%;
		margin-top: -1.5em;
	}

	.grid-9 .volume-number {
		height: 7.5em;
	}

	#legacy .chunk {
		font-size: 190px;
		top: 24%;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 40px;
	}

	.title-line hr {
		width: 47.5%;
	}

	#seekslider {
		width: 11%;
	}

	#fullscreenbtn {
		width: 25%;
		right: 2em;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03, #radical-quote, #biscuit-quote, #merdolino-quote {
		width: 82%;
	}

	.project-image-container {
		top: 47.5%;
		max-width: 75%;
	}
}

@media all and (max-width: 431px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 401px;
	}

	#landing-cut {
		margin-top: 72.3%;
	}

	.main-copy {
		font-size: 2.7em;
	}

	.portfolio-container {
		left: 15;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 40%;
	}

	.grid-9 .volume-number {
		height: 7em;
	}

	#legacy .chunk {
		font-size: 180px;
		top: 19%;
	}

	.designer-name:hover ~ .hover-copy {
		display: none;
	}

	.small-description {
		display: none;
	}

	/*#outro-container {
		bottom: 2em;
	}*/

	#video_player_box {
		margin-top: 61%;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03, #radical-quote, #biscuit-quote, #merdolino-quote {
		width: 100%;
	}

	.project-image-container {
		top: 45.5%;
		max-width: 86%;
	}

	#slideAnchor {
		left: 73.5%;
	}

	.video-caption {
		bottom: 3.5em;
	}

	.fjord-main-copy {
		font-size: 50px;
		letter-spacing: -1.5px;
	}

	.fjord-designer-copy {
		font-size: 20px;
	}

	.audio-time {
		right: -8.5em;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk, #aldo .chunk, #sean .chunk, #andrea .chunk, #toan .chunk, #jekyll .chunk, #kazuyo .chunk, #craft .chunk, #boggeri .chunk, #giorgio .chunk, #whatisdesign .chunk {
		font-size: 36px;
	}
}

@media all and (max-width: 414px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 414px;
	}

	.chunk {
		letter-spacing: -1px;
	}

	.designer-name:hover ~ .portrait-container {
		display: none;
	}

	#main-page {
		padding-bottom: 10em;
	}

	.home-button {
		font-size: 17px;
		letter-spacing: -.1px;
	}

	#landing-cut {
		margin-top: 55%;
	}

	.main-copy {
		letter-spacing: -1px;
		line-height: 1.07em;
		margin-top: .5em;
	}

	#bottom-list {
		margin-top: 5%;
	}

	.grid-55 {
		grid-template-columns: 4.7fr 7.3fr;
	}

	.portrait-container.tapped {
		/*top: 5em;*/
		left: -5em;
	}

	.designer-portrait {
		max-width: 100%;
		height: 100%;
	}

	.chunk-list a {
		font-size: 17px;
		line-height: 29px;
	}

	.theLine {
		top: -10.65em;
	}

	.theLastLine {
		top: -8.8em;
	}

	.description-1 {
		max-width: 100%;
	}

	.top-right {
		top: 1em;
	}

/*//////////////////// ///////////////////////
    LEGACY
//////////////////// ///////////////////////*/

	#italia-legacy, #dutch-legacy {
		margin-top: 40%;
	}

	.fs-toggle {
		margin-left: .5em;
	}

	.fs-toggle p {
		font-size: 14px;
		margin-right: 1em;
	}

	#legacy-content {
		padding: 10px;
	}

	.legacy-row1 {
		left: 10px
	}

	#legacy .chunk {
		font-size: 170px;
		line-height: 65px;
	}

	.grid-9 .volume-number {
		height: 6.5em;
	}

	#legacy .chunk {
		top: 40%;
	}

	.line-container {
		top: 1.8em;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		top: 3em;
		width: 25em;
	}

	.bts-box {
	    width: 90%;
	    height: 70vh;
	    display: inline-block;
	    position: relative;
	    margin-right: 2px;
	}

	.bts-text {
		display: none;
	}

	#credits-body, #bts-page {
		padding-bottom: 0;
		overflow-y: hidden;
	}

	#credits-container {
		top: 0;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.bts-box {
	    -webkit-scroll-snap-type: mandatory;
	    -webkit-scroll-snap-points-x: repeat(100%);
	}

	.grid-20 {
		grid-template-columns: 1fr;
		grid-gap: 5px;
	}

	.header {
		width: 95%;
	}

	.bts-footer {
		left: 0;
		padding: 10px;
	}

	.header {
		background-color: transparent;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	.name-on-mobile {
		display: block;
		position: absolute;
		top: 1em;
		left: 10px;
		font-family: 'NHaasGroteskDSPro-65Md', sans-serif;
		font-size: 10px;
		color: #EFF1E4;
		letter-spacing: 2px;
	}

	.threshold, .mobile_top,
	.mobile-padding, .overlay-content {
		padding-left: 15px;
		padding-right: 15px;
	}

	#video_controls_bar {
		display: none;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		position: fixed;
		bottom: 3em;
		left: 10px;
	}

	.film-title p {
		font-size: 9px;
	}

	.extended-title, #designer-anecdotes {
		left: 30px;
	}

	.extended-title {
		top: 3em;
	}

	.intro-bio p {
		font-size: 10px;
	}

	.intro-bio-line {
		top: 5em;
		left: 30px;
	}

	.intro-bio-line hr {
		width: 100%;
	}

	.who-said-it {
		display: none;
	}

	#designer-anecdotes {
		top: 16%;
	}

	#designer-anecdotes .maestro {
		font-size: 40px;
		line-height: 1.1em;
	}

	.extended-video {
		margin-top: -1em;
	}

	.video-caption {
		bottom: 3.5em;
	}

	.individual-chapter {
		margin-bottom: -1.5em;
	}

	.scroll-hint {
		top: 49%;
		left: 30px;
	}

	#section01-scroll-hint {
		top: 35%;
	}

	#section02-scroll-hint {
		top: 53%;
	}

	#fp-nav.fp-left {
		left: 10px !important;
		top: 15px !important;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		font-size: 10px;
		line-height: 1em;
	}

	.chapter-container {
		left: 30px;
		top: 3em;
		width: 95%;
	}

	.project-quote-header .maestro {
		font-size: 22px;
	}

	.designer-quote p {
		font-size: 16px;
		line-height: 1.5em;
	}

	.project-image-container {
		max-width: 88%;
		left: 30px;
		top: 43%;
		max-height: 52vh;
	}

	#video-container {
		top: 40%;
	}

/*//////////////////// ///////////////////////
    OUTRO CONTAINER
//////////////////// ///////////////////////*/
	#outro-container {
		width: 100%;
		/*bottom: -5em;*/
	}

	.next-film-container {
		bottom: 9em;
	}

	.next-up {
		margin-bottom: -1.5em;
	}

	.next-film-name {
		font-size: 36px;
		letter-spacing: -.5px;
	}

	.next-film {
		margin-top: 4.75em;
	}

	.next-film:hover {
		margin-top: 4em;
	}

	.next-quote-container {
		max-width: 95%;
		bottom: 20em;
		/*left: .75em;*/
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 22em;
	}

	.next-quote {
		font-size: 20px;
		line-height: 1.7em;
	}

	.vl {
		top: 2em;
	}

	#theMenu .chunk-number {
		display: none;
	}


	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		top: 1%;
		font-size: 40px;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03,
	#radical-quote, #biscuit-quote, #merdolino-quote,
	#ballet-quote, #uomamoda-quote01, #ballet02-quote,
	#primates-quote02, #studio01-quote, #canon-quote, #africa-quote,
	#studio02-quote, #dual-quote, #studio03-quote,
	#sans-quote, #honest01-quote, #letter-quote,
	#honest02-quote, #primates-quote03, #primates-quote01,
	#kazuyo-quote02, #kazuyo-quote03, #lecture-quote,
	#beyond-quote, #honest03-quote, #hidden-quote01,
	#primates-quote01, #ino-quote, #kazuyo-quote01,
	#breaking-quote, #hidden-quote02, #steiner-quote,
	#around-quote, #achille-illustrious01-quote, #dalisi01-quote,
	#identity-quote01, #identity-quote02, #identity-quote03,
	#maestro-quote01, #maestro-quote02, #maestro-quote03,
	#heritage-quote01, #heritage-quote02, #heritage-quote03,
	#uoma-quote01, #uoma-quote02, #around-quote, #studio01-quote,
	#studio02-quote, #studio03-quote, #practice-quote01,
	#practice-quote02, #practice-quote03, #letter-quote,
	#sans-quote01, #sans-quote02, #ballet-quote, #ballet02-quote,
	#lecture-quote, #beyond-quote, #breaking-quote {
		width: 89.5%;
	}

	#frida01-quote {
		width: 82.5%;
	}

	#frida02-quote {
		width: 90.5%;
	}

/*//////////////////// ///////////////////////
	OUTRO QUOTE WIDTH
//////////////////// ///////////////////////*/
	#seanNext, #whatNext, #kazuyoNext, #toanNext, #jekyllNext,
	#odoNext, #armandoNext, #fjordNext, #boggeriNext,
	#burnkitNext, #civNext, #stefanoNext, #elenaNext{
		width: 90%;
	}

/*//////////////////// ///////////////////////
    WATCH CHUNK
//////////////////// ///////////////////////*/
	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: -15%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover,
	#whatisdesign .chunk:hover, #craft .chunk:hover {
		top: -20%;
	}

	.title-line {
		margin-top: -.25em;
	}

	.film-title {
		top: 0;
	}

	#giorgio .volume-number {
		width: 33.5em;
	}

	#odo .volume-number {
		width: 32em;
	}

	#elena .volume-number {
		width: 38.3em;
	}

	#stefano .volume-number {
		width: 43em;
	}

	#toan .volume-number {
		width: 29em;
	}

	#kazuyo .volume-number {
		width: 36em;
	}

	#boggeri .volume-number {
		width: 32.5em;
	}

	#armando .volume-number {
		width: 34em;
	}

	#jekyll .volume-number {
		width: 29em;
	}

	#andrea .volume-number {
		width: 16em;
	}

	#sean .volume-number {
		width: 29.5em;
	}

	#aldo .volume-number {
		width: 42.3em;
	}

	#burnkit .volume-number {
		width: 15.5em;
	}

	#civilization .volume-number {
		width: 23.3em;
	}

	#whatisdesign .volume-number {
		width: 31.5em;
	}

/*//////////////////// ///////////////////////
	MOBILE SECTION ANCHORS
//////////////////// ///////////////////////*/
	#slideAnchor {
		display: none;
	}

	.slide .grid-12 {
		grid-template-columns: 12fr;
	}

	.mobile-anchor {
		display: block;
		width: 1em;
		height: 8.5em;
	}

	#fp-nav ul, .fp-slidesNav ul {
		position: fixed;
		top: 2.5em;
		left: .1em;
		/*transform: rotate(180deg);*/
	}

	#fp-nav ul li {
		display: inline;
	}

	#fp-nav ul li a span {
		display: inline-block;
		width: 2.5px;
		height: 6.5em;

	    background: #EFF1E4;
	    left: 0;
	    top: 0;
	    padding-bottom: 1em;
	    /*opacity: 1;*/

	    -webkit-transition: all 0.1s ease-in-out;
	    -moz-transition: all 0.1s ease-in-out;
	    -o-transition: all 0.1s ease-in-out;
	    transition: all 0.1s ease-in-out;
	}

	/*#fp-nav .section02-anchor {
		top: -12em;
		left: 12.5em;
	}

	#fp-nav .section02-anchor li a .mobile-anchor {
		height: 22em;
	}

	#fp-nav .section02-anchor li a .mobile-anchor span {
		height: 19.5em;
	}

	#fp-nav .section03-anchor {
		top: -12em;
		left: 12em;
	}

	#fp-nav .section03-anchor li a .mobile-anchor {
		height: 14em;
	}

	#fp-nav .section03-anchor li a .mobile-anchor span {
		height: 12em;
	}

	#fp-nav .section04-anchor {
		top: -12em;
		left: 12em;
	}

	#fp-nav .section04-anchor li a .mobile-anchor {
		height: 11em;
	}

	#fp-nav .section04-anchor li a .mobile-anchor span {
		height: 9em;
	}*/

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/

	.grid-26 {
		grid-template-columns: .5fr 11fr .5fr;
	}

	.prologue-container {
		margin-top: 40%;
		transform: translate(0, 0);
	}

	.prologue-quote {
		width: 100%;
	}

	.prologue-intro-copy {
		width: 100%;
		font-size: 16px;
	}

	.prologue-intro-quote {
		width: 100%;
		font-size: 39px;
	}

	#prologue-quote01, #prologue-quote02 {
		width: 100%;
	}

	.epilogue-quote {
		font-size: 17px;
		line-height: 1.8em;
		width: 110%;
		margin-top: .8em;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	.fjord-audio a, .fjord-name p {
		font-size: 14px;
	}

	#progressBar {
		width: 27%;
	}

	.fjord-portrait {
		min-width: 350%;
	}

	.fjord-image-container {
		max-width: 85%;
		left: 30px;
		top: 7em;
	}

	.fjord-designer-copy {
		font-size: 22px;
	}

	#fjord-header {
		max-width: 100%;
		top: -9em;
	}

	#seb-header, #amedeo-header {
		max-width: 100%;
		top: -7em;
	}

	#lidia-header {
		max-width: 80%;
		top: -7em;
	}

	#seb-copy {
		max-width: 65%;
	}

	#seb-copy02, #amedeo-copy {
		max-width: 80%;
	}

	#amedeo-copy02 {
		max-width: 90%;
	}

	#fjord-intro-quote {
		width: 95%;
	}

	#designer-anecdotes #fjord-intro-quote {
		font-size: 30px;
		line-height: 1.3em;
	}

	#fjord-final {
		margin-top: -8em;
	}

	#fjord-caption {
		bottom: 0em;
	}

	#video-container #fjord-caption {
		bottom: 12em;
	}

	#fjord-slide01 .chapter-container, #fjord-slide02 .chapter-container,
	#fjord-slide03 .chapter-container, #fjord-extended-title, #fjord-scroll {
		left: 30px;
	}

	.fjord-anecdotes {
		left: 30px;
	}

	#muteButton {
		display: none;
	}

	.fjord-main-copy {
		margin-bottom: .2em;
	}

	.fjord-blurb {
		font-size: 16px;
	}

/*//////////////////// ///////////////////////
    ABOUT THE FILM ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-container {
		position: relative;
		top: 25%;
		left: 30px;
	}

	.documentary {
		margin-bottom: 1em;
	}

	.doc-name {
		margin-bottom: 1em;
	}

	.doc-name p {
		font-size: 33px;
		letter-spacing: -.5px;
		line-height: 1.2em;
	}

	.doc-name p span {
		font-size: 18px;
		letter-spacing: -.1px;
		line-height: 1.2em;
	}

	.doc-description p, .who-said-it p {
		font-size: 14px;
		line-height: 2em;
		width: 87%;
	}

	.who-said-it p {
		margin-top: 1em;
	}

	#boggeri-wrapper, #cimitero-wrapper {
		width: 100%;
	}

	#craft-wrapper {
		width: 102%;
	}
}

@media all and (max-width: 375px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 375px;
	}

	#landing-cut {
		margin-top: 55%;
	}

	.main-copy {
		font-size: 2.3em;
		letter-spacing: -.7px;
		line-height: 1.15em;
	}

	#legacy .chunk {
		font-size: 150px;
		line-height: 55px;
	}

	.grid-55 {
		grid-template-columns: 6.6fr 5.4fr;
	}

	.grid-12 {
		grid-template-columns: 8fr 4fr;
	}

	.portrait-container.tapped {
		left: -5em;
	}

	.designer-portrait {
		width: 100%;
		height: 100%;
	}

	.grid-9 .volume-number {
		height: 6em;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 11em;
	}

	#legacy .chunk {
		font-size: 155px;
		line-height: 60px;
	}

	.chunk-list a {
		font-size: 20px;
		line-height: 32px;
	}

	.theLine {
		top: -11.5em;
	}

	.theLastLine {
		top: -10.5em;
	}

	#volume-three .volume {
		margin-bottom: 1em;
	}

	.volume-description {
		width: 95%;
	}

/*//////////////////// ///////////////////////
    CREDITS + LEGACY
//////////////////// ///////////////////////*/
	#credits-container {
		width: 26.5em;
	}

	.roles {
		letter-spacing: 0.4px;
	}

	.location {
		margin-top: 2.5em;
	}

	.bts-box {
		width: 96%;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#video_player_box {
		margin-top: 55%;
	}

	.extended-title {
		top: .6em;
	}

	#designer-anecdotes .maestro {
		font-size: 36px;
	}

	.extended-title, #designer-anecdotes {
		left: 30px;
	}

	.intro-bio p {
		font-size: 9px;
	}

	.intro-bio-line {
		top: 2.2em;
		left: 30px;
	}

	.intro-bio-line hr {
		width: 100%;
	}

	#designer-anecdotes {
		top: 11%;
	}

	.individual-chapter {
		margin-bottom: -1.5em;
	}

	.scroll-hint {
		top: 42%;
		left: 30px;
	}

	#section01-scroll-hint {
		top: 38%;
	}

	#section02-scroll-hint {
		top: 48%;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		line-height: .7em
	}

	#slideAnchor {
		top: 3%;
		right: 10px;
	}

	.chapter-container {
		top: .75em;
		width: 95%;
	}

	.designer-quote p {
		font-size: 13px;
		line-height: 1.6em;
	}

	.extended-caption {
		bottom: .3em;
		color: #F1F0E4;
		right: 0;
	}

	.project-image-container {
		top: 41%;
		max-width: 85%;
	}

	.extended-video {
		margin-top: -2em;
	}

	.video-caption {
		color: #F1F0E4;
		bottom: 6em;
		right: 0;
	}

	.white-caption {
		color: #F1F0E4;
	}

	#openbtn3, #openbtn5, #openbtn6, #openbtn7 {
		bottom: 1.5em;
	}

	#openbtn3.hide, #forFjord.hide, #openbtn5.hide, #openbtn6.hide, #openbtn7.hide {
		opacity: 1;
	}

	/*#video-container {
		margin-top: -2em;
	}
*/
	.citation-button {
		right: 1.3em;
	}

/*//////////////////// ///////////////////////
    OUTRO CONTAINER
//////////////////// ///////////////////////*/
	/*#outro-container {
		bottom: -12em;
	}*/

	#odoNext, #elenaNext, #stefanoNext, #toanNext, #kazuyoNext,
	#boggeriNext, #armandoNext, #jekyllNext, #andreaNext, #seanNext,
	#aldoNext, #craftNext, #fjordNext, #burnkitNext, #civNext, #whatNext {
		width: 85%;
	}

	.next-up {
		margin-bottom: .5em;
	}

	#enterNextVol {
		margin-top: -.5em;
	}

	.next-quote {
		font-size: 18px;
	}

	.vl {
		top: 1.5em;
		height: 3em;
	}

	.next-film-container {
		bottom: 7em;
	}

	.next-quote-container {
		bottom: 16em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 19em;
	}

	.next-film {
		margin-top: 3.5em;
	}

	.next-film:hover {
		margin-top: 2em;
	}

	#nextVolContainer {
		bottom: 10em;
	}

	#enterVolume {
		margin-top: 6.25em;
	}

	#enterVolume:hover {
		margin-top: 5em;
	}

	.doc-container {
		left: 30px;
	}

	.doc-name p {
		font-size: 28px;
	}

/*//////////////////// ///////////////////////
	MOBILE SECTION ANCHORS
//////////////////// ///////////////////////*/
	.mobile-anchor {
		height: 8em;
	}

	#fp-nav ul, .fp-slidesNav ul {
		position: fixed;
		top: .25em;
		left: .1em;
		/*transform: rotate(180deg);*/
	}

	#fp-nav ul li {
		display: inline;
	}

	#fp-nav ul li a span {
		display: inline-block;
		width: 2.5px;
		height: 6.5em;

	    background: #EFF1E4;
	    left: 0;
	    top: 0;
	    padding-bottom: 1em;
	    /*opacity: 1;*/

	    -webkit-transition: all 0.1s ease-in-out;
	    -moz-transition: all 0.1s ease-in-out;
	    -o-transition: all 0.1s ease-in-out;
	    transition: all 0.1s ease-in-out;
	}

/*//////////////////// ///////////////////////
    WATCH CHUNK
//////////////////// ///////////////////////*/
	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		top: 3%;
	}

	.watch .chunk:hover, #stefano .chunk:hover, #andrea .chunk:hover,
	#sean .chunk:hover, #aldo .chunk:hover, #elena .chunk:hover {
		top: -15%;
	}

	#jekyll .chunk:hover, #toan .chunk:hover, #kazuyo .chunk:hover,
	#boggeri .chunk:hover, #giorgio .chunk:hover,
	#whatisdesign .chunk:hover, #craft .chunk:hover {
		top: -20%;
	}

	.title-line {
		margin-top: -.25em;
	}

	.film-title {
		top: 0;
	}

	#giorgio .volume-number {
		width: 33.5em;
	}

	#odo .volume-number {
		width: 32em;
	}

	#elena .volume-number {
		width: 38.3em;
	}

	#stefano .volume-number {
		width: 43em;
	}

	#toan .volume-number {
		width: 29em;
	}

	#kazuyo .volume-number {
		width: 36em;
	}

	#boggeri .volume-number {
		width: 32.5em;
	}

	#armando .volume-number {
		width: 34em;
	}

	#jekyll .volume-number {
		width: 29em;
	}

	#sean .volume-number {
		width: 29.5em;
	}

	#aldo .volume-number {
		width: 42.3em;
	}

	#burnkit .volume-number {
		width: 15.5em;
	}

	#civilization .volume-number {
		width: 23.3em;
	}

	#whatisdesign .volume-number {
		width: 31.5em;
	}

/*//////////////////// ///////////////////////
    FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	#audio-player nav {
		font-size: 9px;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 14px;
		line-height: 2.5em;
	}

	#fjord-header {
		left: 0.5em;
		top: -7.5em;
	}

	#seb-header, #lidia-header, #amedeo-header {
		left: 0.5em;
		top: -8em;
	}

	#fjord-header .fjord-blurb {
		max-width: 95%;
	}

	.fjord-designer-copy {
		font-size: 18px;
		line-height: 1.2em;
		letter-spacing: -0.1px;
		padding-top: 0;
	}

	#seb-copy {
		max-width: 90%;
	}

	#seb-copy02 {
		max-width: 70%;
	}

	#amedeo-copy, #amedeo-copy02 {
		max-width: 100%;
	}

	#lidia-header {
		max-width: 77%;
	}

	.fjord-blurb {
		display: none;
	}

	#amedeo-header {
		max-width: 80%;
	}

	#amedeo-header .fjord-blurb {
		max-width: 100%;
	}

	.audio-time {
		right: -3.5em;
		margin-top: -1em;
	}

	#audio-container {
		left: .5em;
		top: 2em;
	}

	.fjord-main-copy {
		font-size: 55px;
		margin-top: 0;
		margin-bottom: .1em;
		margin-left: -2px;
	}

	#banner-header .chunk-number {
		padding-bottom: 1.2em;
	}

	#playlist {
		top: -3em;
		width: 17em;
	}

	#forFjord {
		left: 0.5em;
		bottom: 3.5em;
	}

	.thePlayButton {
		position: absolute;
		left: 0.2em;
		bottom: 1em;
		width: 100%;
	}

	.thePlayButton .chunk-number {
		font-size: 9px;
	}

	#muteButton {
		display: none;
	}

	.fjord-image-container {
		top: 3em;
	}

	#lidia-container, #amedeo-container {
		margin-top: 1.5em;
	}

	.fjord-name {
		line-height: 1em;
	}

	#progressBar {
		width: 21%;
	}

	#designer-anecdotes #fjord-intro-quote {
		font-size: 28px;
	}

	#fjord-scroll, #fjord-extended-title {
		left: 30px;
	}

	#fjord-scroll {
		top: 47%;
	}

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.grid-26 {
		grid-template-columns: .2fr 10.6fr .2fr;
	}

	.prologue-container {
		margin-top: 17%;
	}

	.prologue-intro-quote {
		font-size: 35px;
	}

	.prologue-intro-copy {
		width: 100%;
		font-size: 14px;
	}

	.prologue-quote {
		font-size: 16px;
	}

	.prologue-vl, .epilogue-vl {
		top: 2em;
	}

	#prologue-scroll {
		margin-top: 4em;
	}

	.epilogue-quote {
		width: 100%;
	}
}

@media all and (max-width: 360px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 360px;
	}

	#landing-cut {
		margin-top: 5%;
	}

	.main-copy {
		font-size: 2.2em;
		letter-spacing: -0.5px;
		line-height: 1.15em;
	}

	.legacy-line {
		margin-top: .7em;
	}

	#legacy .chunk {
		font-size: 150px;
		line-height: 50px;
	}
}

@media all and (max-width: 320px) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 320px;
	}

	#main-page {
		padding-bottom: 9em;
	}

	#landing-cut {
		margin-top: 16%;
	}

	.main-copy {
		font-size: 2em;
		letter-spacing: -.4px;
		line-height: 1.07em;
		margin-top: .5em;
	}

	.grid-55 {
		grid-template-columns: 7.5fr 4.5fr;
	}

	.grid-12 {
		grid-template-columns: 1fr;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 4em;
	}

	.grid-9 .volume-number {
		height: 5em;
	}

	#legacy .chunk {
		font-size: 130px;
		line-height: 35px;
		top: 48%;
	}

	.line-container {
		top: 1.6em;
	}

	.fs-toggle p {
		margin-right: .3em;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	#video_player_box {
		margin-top: 45%;
	}

	.extended-title {
		top: .65em;
	}

	.watch .chunk, #elena .chunk, #stefano .chunk,
	#aldo .chunk, #sean .chunk, #andrea .chunk,
	#toan .chunk, #jekyll .chunk, #kazuyo .chunk,
	#craft .chunk, #boggeri .chunk, #giorgio .chunk,
	#whatisdesign .chunk {
		font-size: 35px;
	}

	.film-title {
		top: 0;
	}

	#openbtn3 .maestro, #forFjord .maestro, #openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		font-size: 22px;
		top: 67%;
	}

	.intro-bio p {
		font-size: 7.5px;
	}

	.intro-bio-line {
		top: 2.5em;
	}

	#designer-anecdotes {
		top: 15%;
	}

	#designer-anecdotes .maestro {
		font-size: 30px;
		margin-bottom: 1.7em;
	}

	.individual-chapter {
		margin-bottom: -2.5em;
	}

	.project-image-container {
		top: 47.5%;
		max-width: 73%;
	}

	#theMenu li a .chunk-number, .scroll-hint a {
		font-size: 9px;
	}

	.chapter-container {
		top: .8em;
	}

/*//////////////////// ///////////////////////
    WATCH CHUNK WIDTH
//////////////////// ///////////////////////*/
	#giorgio .volume-number {
		width: 29em;
	}

	#odo .volume-number {
		width: 27.5em;
	}

	#elena .volume-number {
		width: 33.3em;
	}

	#stefano .volume-number {
		width: 37.5em;
	}

	#toan .volume-number {
		width: 25em;
	}

	#kazuyo .volume-number {
		width: 31.5em;
	}

	#boggeri .volume-number {
		width: 28em;
	}

	#armando .volume-number {
		width: 29em;
	}

	#jekyll .volume-number {
		width: 25em;
	}

	#andrea .volume-number {
		width: 14em;
	}

	#sean .volume-number {
		width: 25.5em;
	}

	#aldo .volume-number {
		width: 36.5em;
	}

	#craft .volume-number {
		width: 27.7em;
	}

	#burnkit .volume-number {
		width: 13.5em;
	}

	#civilization .volume-number {
		width: 20.3em;
	}

	#whatisdesign .volume-number {
		width: 27.5em;
	}

	#qeeboo-quote01, #qeeboo-quote02, #qeeboo-quote03,
	#radical-quote, #biscuit-quote, #merdolino-quote,
	#ballet-quote, #uomamoda-quote01, #ballet02-quote,
	#primates-quote02, #studio01-quote, #canon-quote,
	#frida02-quote, #africa-quote, #frida01-quote,
	#studio02-quote, #dual-quote, #studio03-quote,
	#sans-quote, #honest01-quote, #letter-quote,
	#honest02-quote, #primates-quote03, #primates-quote01,
	#kazuyo-quote02, #kazuyo-quote03, #lecture-quote,
	#beyond-quote, #honest03-quote, #hidden-quote01,
	#primates-quote01, #ino-quote, #kazuyo-quote01,
	#breaking-quote, #hidden-quote02, #steiner-quote,
	#around-quote, #achille-illustrious01-quote,
	#dalisi01-quote, #identity-quote01, #identity-quote02,
	#identity-quote03, #maestro-quote01, #maestro-quote02,
	#maestro-quote03, #heritage-quote01, #heritage-quote02,
	#heritage-quote03, #uoma-quote01, #uoma-quote02,
	#around-quote, #studio01-quote, #studio02-quote,
	#studio03-quote, #practice-quote01, #practice-quote02,
	#practice-quote03, #letter-quote, #sans-quote01,
	#sans-quote02, #ballet-quote, #ballet02-quote,
	#lecture-quote, #beyond-quote, #breaking-quote {
		width: 90.5%;
	}

/*//////////////////// ///////////////////////
	FJORD FJORD FJORD FJORD FJORD FJORD
//////////////////// ///////////////////////*/
	#forFjord {
		bottom: 3em;
		left: .2em;
	}

	#fjord-header {
		top: -8.5em;
	}

	#seb-header, #lidia-header, #amedeo-header {
		top: -8em;
	}

	#fjord-header, #audio-container, #seb-header, #lidia-header, #amedeo-header {
		left: 0.2em;
	}

	#seb-copy {
		max-width: 105%;
	}

	#seb-copy02,
	#lidia-copy, #lidia-copy02,
	#amedeo-copy. #amedeo-copy02 {
		max-width: 100%;
	}

	.fjord-main-copy {
		font-size: 45px;
		margin-left: 0;
	}

	#fjord-header .fjord-blurb {
		max-width: 100%;
	}

	.fjord-blurb {
		display: none;
	}

	.fjord-audio a, .fjord-name p {
		font-size: 12px;
		line-height: 2em;
	}

	#playlist {
		top: -7.5em;
	}

	#audio-player {
		bottom: 0;
	}

	.audio-headers {
		margin-bottom: 1em;
	}

	.audio-time {
		right: -1em;
	}

	#progressBar {
		width: 45%;
		left: .5em;
		margin-right: 1em;
	}

	#muteButton {
		display: none;
	}

	.thePlayButton {
		left: -.5em;
		width: 100%;
	}

	.fjord-portrait {
		margin-left: -23em;
	}

	#lidia-portrait img {
		margin-left: -32em;
	}

	.fjord-designer-copy {
		font-size: 14px;
		line-height: 1.3em;
		letter-spacing: 0.2px;
	}

	#audio-container {
		top: 5.2em;
	}

	#seb-copy .chunk-number,
	#lidia-copy .chunk-number,
	#amedeo-copy .chunk-number,
	#seb-copy02 .chunk-number,
	#lidia-copy02 .chunk-number,
	#amedeo-copy02 .chunk-number {
		width: 105%;
		line-height: 1.7em;
	}

/*//////////////////// ///////////////////////
	DESIGNER PAGE STUFFF
//////////////////// ///////////////////////*/
	#banner-header .chunk-number {
		font-size: 8px;
		padding: 0;
	}

	.scroll-hint {
		top: 50%;
	}

	#section02-scroll-hint {
		top: 32%;
	}

	#section01-scroll-hint {
		top: 22%;
	}

	.designer-quote p {
		font-size: 12px;
	}

	.project-quote-header .maestro {
		margin-bottom: 0;
		font-size: 20px;
	}

	.mobile-anchor {
		height: 6.5em;
	}

	#fp-nav ul, .fp-slidesNav ul {
		top: -9.5em;
		left: 9em;
	}

	#fp-nav ul li a span {
		height: 4.5em;
	}

	.extended-caption {
		display: none;
	}

	.to-extended {
		height: 2em;
	}

	#openbtn3 .maestro, #forFjord .maestro,
	#openbtn5 .maestro, #openbtn6 .maestro, #openbtn7 .maestro {
		top: 49%;
	}

	#openbtn3 .maestro:hover, #forFjord .maestro:hover,
	#openbtn5 .maestro:hover, #openbtn6 .maestro:hover,
	#openbtn7 .maestro:hover {
		top: 22%;
	}

/*//////////////////// ///////////////////////
    FJORD EXTENDED CONTENT
//////////////////// ///////////////////////*/
	#designer-anecdotes #fjord-intro-quote {
		font-size: 24px;
	}

	#fjord-final {
		margin-top: -5em;
	}

	.fjord-image-container {
		top: 2.75em;
		max-width: 60%;
	}

	.fjord-image-container #fjord-final {
		margin-top: -6em;
	}

/*//////////////////// ///////////////////////
    PROLOGUE PROLOGUE PROLOGUE PROLOGUE
//////////////////// ///////////////////////*/
	.chunk-number {
		font-size: 9px;
	}

	.grid-26 {
		grid-template-columns: 12fr;
	}

	.prologue-container {
		margin-top: 20%;
	}

	.prologue-intro-quote {
		font-size: 22px;
	}

	.prologue-intro-copy {
		font-size: 13px;
		width: 97%;
	}

	.prologue-vl, .epilogue-vl {
		height: 2.5em;
		top: 1.5em;
	}

	#prologue-scroll {
		margin-top: 2.5em;
	}

	.prologue-quote {
		font-size: 14px;
		width: 97%;
	}

	.epilogue-quote {
		width: 93%;
		font-size: 15px;
	}

/*//////////////////// ///////////////////////
	MOBILE SECTION ANCHORS
//////////////////// ///////////////////////*/
	.mobile-anchor {
		height: 6.5em;
	}

	#fp-nav ul, .fp-slidesNav ul {
		position: fixed;
		top: .25em;
		left: .1em;
	}

	#fp-nav ul li a span {
		height: 5em;
	}

/*//////////////////// ///////////////////////
	OUTRO CONTAINER
//////////////////// ///////////////////////*/
	.next-film-container {
		bottom: 5em;
	}

	.next-film-name {
		font-size: 32px;
		letter-spacing: -.7px;
	}

	.next-film {
		margin-top: 3.9em;
	}

	.next-film:hover {
		margin-top: 3em;
	}

	.next-up {
		margin-bottom: .5em;
	}

	.next-quote-container {
		bottom: 13em;
	}

	.next-film-container:hover ~ .next-quote-container {
		bottom: 15em;
	}

	.next-quote {
		font-size: 14px;
		letter-spacing: .3px;
		line-height: 1.5em;
	}

	.next-quote strong {
		letter-spacing: -.3px;
	}

	.vl {
		top: 1em;
		height: 2.5em;
	}

	#enterVolume {
		margin-top: 4.1em;
	}

	#enterVolume:hover {
		margin-top: 3.4em;
	}

/*//////////////////// ///////////////////////
	ABOUT THE FILM
//////////////////// ///////////////////////*/
	.doc-container {
		top: 4.3%;
		left: 30px;
	}

	.doc-name p {
		font-size: 22px;
	}

	.doc-description p {
		font-size: 13px;
		line-height: 1.8em;
		width: 85%;
	}
}





/*//////////////////// ///////////////////////
    IPHONE 5 - PORTRAIT
//////////////////// ///////////////////////*/

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		width: 18.7em;
	}

	.roles {
		font-size: 10px;
		letter-spacing: 0.3px;
	}

	.location {
		font-size: 9px;
	}
}





/*//////////////////// ///////////////////////
    IPHONE 6/7/8+ - PORTRAIT
//////////////////// ///////////////////////*/

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {

	.designer-name:hover ~ .timer-container {
		display: none;
	}
/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		width: 24.3em;
	}

	.roles {
		letter-spacing: 0.4px;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.bts-footer {
		bottom: 2.5em;
		left: 0;
		padding: 10px;
	}
}



/*//////////////////// ///////////////////////
    IPHONE 6/7/8 - PORTRAIT
//////////////////// ///////////////////////*/

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	#landing-cut {
		margin-top: 28%;
	}

	#italia-legacy, #dutch-legacy {
		margin-top: 6em;
	}

	.designer-name:hover ~ .timer-container {
		display: none;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		width: 20.7em;
	}

	.roles {
		font-size: 11px;
		letter-spacing: 0.3px;
	}

	.box {
		width: 55.5em;
	}

	.bts-box {
		width: 80%;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.bts-footer {
		bottom: 2.5em;
		left: 0;
		padding: 10px;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	/*#video_player_box {
		margin-top: 45%;
	}

	#openbtn3, #openbtn5, #openbtn6 {
		bottom: -9em;
	}

	.prologue-intro-copy {
		width: 100%;
		font-size: 14px;
	}*/
}


/*//////////////////// ///////////////////////
    IPHONE X - PORTRAIT
//////////////////// ///////////////////////*/

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
	#landing-cut {
		margin-top: 52.2%;
	}

	.volume-description {
		width: 95%;
	}

	.description-2 {
		width: 80%;
	}

	.designer-name:hover ~ .timer-container {
		display: none;
	}

/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		width: 24.5em;
	}

	.roles {
		letter-spacing: 0.4px;
	}

	.bts-box {
		width: 90%;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/
	.bts-footer {
		bottom: 2.5em;
		left: 0;
		padding: 10px;
	}

/*//////////////////// ///////////////////////
    DESIGNER PAGE
//////////////////// ///////////////////////*/
	/*#video_player_box {
		margin-top: 55%;
	}

	#openbtn3, #openbtn5, #openbtn6 {
		bottom: -12em;
	}

	.prologue-intro-copy {
		width: 100%;
		font-size: 14px;
	}*/
}


/*//////////////////// ///////////////////////
    LANDSCAPE MODE
//////////////////// ///////////////////////*/
/*//////////////////// ///////////////////////
    LANDSCAPE MODE
//////////////////// ///////////////////////*/
/*//////////////////// ///////////////////////
    LANDSCAPE MODE
//////////////////// ///////////////////////*/








/*//////////////////// ///////////////////////
    IPHONE X LANDSCAPE
//////////////////// ///////////////////////*/
@media only screen and (min-device-height: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 375px;
	}
/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		top: -5em;
	}

	.bts-box {
	    width: 15em;
	    height: 95vh;
	    display: inline-block;
	    position: relative;
	    margin-right: 2px;
	}

	.bts-text {
		display: none;
	}

	#credits-body, #bts-page {
		padding-bottom: 10px;
		overflow-y: hidden;
	}

	.member-info {
		top: 17.5em;
		left: .5em;
		opacity: .5;
	}

	.roles {
		font-size: 8px;
	}

	.name {
		line-height: 1em;
	}

	.location {
		font-size: 8px;
		margin-top: 1em;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/

	.box {
		width: 33em;
	}

	.bts-box {
	    -webkit-scroll-snap-type: mandatory;
	    -webkit-scroll-snap-points-x: repeat(100%);
	}

	.grid-20 {
		grid-template-columns: 1fr;
		grid-gap: 5px;
	}

	.header {
		width: 95%;
	}

	.bts-footer {
		bottom: 2.5em;
		left: 0;
		padding: 10px;
	}

	.header {
		background-color: transparent;
	}
}


/*//////////////////// ///////////////////////
    IPHONE 6/7/8 PLUS - LANDSCAPE
//////////////////// ///////////////////////*/
@media only screen and (min-device-height: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3)and (orientation: landscape) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 414px;
	}
/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		top: -5em;
	}

	.bts-box {
	    width: 15em;
	    height: 95vh;
	    display: inline-block;
	    position: relative;
	    margin-right: 2px;
	}

	.bts-text {
		display: none;
	}

	#credits-body, #bts-page {
		padding-bottom: 10px;
		overflow-y: hidden;
	}

	#credits-container {
		top: 0;
	}

	.member-info {
		top: 20em;
		left: .5em;
		opacity: .5;
	}

	.roles {
		font-size: 8px;
	}

	.name {
		line-height: 1em;
	}

	.location {
		font-size: 8px;
		margin-top: 1em;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/

	.box {
		width: 36em;
	}

	.bts-box {
	    -webkit-scroll-snap-type: mandatory;
	    -webkit-scroll-snap-points-x: repeat(100%);
	}

	.grid-20 {
		grid-template-columns: 1fr;
		grid-gap: 5px;
	}

	.header {
		width: 95%;
	}

	.bts-footer {
		bottom: 5em;
		left: 0;
		padding: 10px;
	}

	.header {
		background-color: transparent;
	}
}



/*//////////////////// ///////////////////////
    IPHONE 6/7/8 - LANDSCAPE
//////////////////// ///////////////////////*/
@media only screen and (min-device-height: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
	.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-55,
	.grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11,
	.grid-12, .grid-13, .grid-14, .grid-15, .grid-16, .grid-17,
	.grid-18, .grid-19, .grid-20, .grid-21, .grid-22 {
		max-width: 375px;
	}
/*//////////////////// ///////////////////////
    CREDITS
//////////////////// ///////////////////////*/
	#credits-container {
		top: 3em;
	}

	.bts-box {
	    width: 15em;
	    height: 95vh;
	    display: inline-block;
	    position: relative;
	    margin-right: 2px;
	}

	.bts-text {
		display: none;
	}

	#credits-body, #bts-page {
		padding-bottom: 10px;
		overflow-y: hidden;
	}

	#credits-container {
		top: 0;
	}

	.member-info {
		top: 17.5em;
		left: .5em;
		opacity: .5;
	}

	.roles {
		font-size: 8px;
	}

	.name {
		line-height: 1em;
	}

	.location {
		font-size: 8px;
		margin-top: 1em;
	}

/*//////////////////// ///////////////////////
    BEHIND THE SCENES
//////////////////// ///////////////////////*/

	.box {
		width: 33em;
	}

	.bts-box {
	    -webkit-scroll-snap-type: mandatory;
	    -webkit-scroll-snap-points-x: repeat(100%);
	}

	.grid-20 {
		grid-template-columns: 1fr;
		grid-gap: 5px;
	}

	.header {
		width: 95%;
	}

	.bts-footer {
		bottom: 2.5em;
		left: 0;
		padding: 10px;
	}

	.header {
		background-color: transparent;
	}
}