/*
PORTFOLIO SCREEN STYLES
by Rupert Sliwa
[ www.rupertsliwa.com ]

Target screen size 1440px-1680px
--------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');
/*
Regular = 400
Medium = 500
Semibold = 600
Bold = 700
*/

@font-face{
	font-family: 'Brockmann';
	src: url('../fonts/brockmann-medium-webfont.eot');
	src: url('../fonts/brockmann-medium-webfont.eot?#iefix') format('embedded-opentype'),
	url('../fonts/brockmann-medium-webfont.woff') format('woff'),
	url('../fonts/brockmann-medium-webfont.ttf') format('truetype'),
	url('../fonts/brockmann-medium-webfont.svg#webfont') format('svg');
}


html {
	overflow-x: hidden;
	max-width: 100%;
}

body {
	background: #F5F6F6;
	color: #232323;
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.6em;
	margin: 0;
	padding: 0;
	text-align: left;
	text-rendering: optimizeLegibility;
	scroll-behavior: smooth;
	overflow-x: hidden;
	max-width: 100%;
}

table, tr, td {
	border: 0;
	margin: 0;
	padding: 0;
}

img {
	border: 0;
	display: block;
}

::-moz-selection {
	background: #FFD664;
	color: #000;
}
::selection {
	background: #FFD664;
	color: #000;
}

.mobile-only {
	display: none !important;
}


/* Colours
--------------------------------------------- */

.white {
	color: #fff;
}

.near_black {
	color: #232323;
}

.dark_grey {
	color: #333;
}

.mid_grey {
	color: #666;
}

.dark_purple {
	color: #743790;
}

.purple {
	color: #8947A8;
}

.mauve {
	color: #D5B4E4;
}

.pink {
	color: #FFD2E2;
}

.sky {
	background-color: #D2F4FF;
}

.tm_warm_yl_100 {
	background-color: #FFD664;
}

.tm_warm_yl_80 {
	background-color: #FBE28A;
}

.tm_warm_yl_60 {
	background-color: #FFEDB0;
}

.tm_warm_yl_100 {
	background-color: #FFD664;
}

.tm_aqua_30 {
	background-color: #83DFE1;
}

.tm_aqua_10 {
	background-color: #CCEFF0;
}

.tm_dusk_50 {
	background-color: #CBC7EC;
}

.tm_dusk_40 {
	background-color: #DFDDF7;
}

.tm_pink_80 {
	background-color: #FEC1BB;
}

.tm_pink_60 {
	background-color: #F9DCDA;
}

.tm_pink_40 {
	background-color: #FFF1F0;
}

.tm_grey_20 {
  background-color: #F0F0F5;
}


/* Form elements
----------------------------------------------- */

/* NOTE: Google form embedded */

.gform {
	margin: 64px auto 0 auto;
	width: 100%;
	max-width: 720px;
	height: 780px;
}

.privacy-info {
	margin: 40px auto 0 auto;
	padding: 0 24px;
	width: 100%;
	max-width: 648px;
}


/* Cookie consent
--------------------------------------------- */

#cookie-bar {
	background-color: #232323 !important;
	font-family: 'Plus Jakarta Sans' !important;
}

#cookie-bar p {
	font-family: 'Plus Jakarta Sans' !important;
	font-size: 15px;
	margin-top: 6px !important;
}

#cookie-bar p::after {
  content: " These are anonymised.";
}

a#cookie-bar-button {
	color: #000 !important;
	background-color: #FFD2E2 !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	text-align: center;
	padding: 8px 24px;
	margin-left: 16px !important;
}


/* Headings and paragraph text
--------------------------------------------- */

h1 {
	font-family: 'Brockmann', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
	color: #232323;
	font-size: 64px;
	line-height: 80px;
  letter-spacing: -0.5px;
}

h2 {
	font-family: 'Brockmann', Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-style: normal;
  text-transform: none;
	color: #232323;
	font-size: 40px;
	line-height: 52px;
	margin: 0 0 24px 0;
  clear: both;
}

h3 {
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	font-weight: 500;
	color: #232323;
	font-size: 26px;
	line-height: 40px;
	margin: 0 0 16px 0;
}

p {
	display: block;
	font-family: 'Plus Jakarta Sans', Georgia, serif;
	font-size: 19px;
	line-height: 34px;
	font-weight: 400;
  letter-spacing: -0.19px;
	margin: 0 0 16px 0;
	padding: 0;
	color: #333;
  clear: both;
}

p.caption {
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 20px;
	font-weight: 400;
	color: #555;
  text-align: center;
}

p.promo_text {
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	font-size: 20px;
	line-height: 32px;
	font-weight: 400;
}


/* General links and buttons
----------------------------------------------- */

a, a:link, a:visited {
  color: #743790;
}

a.standard, a.standard:link, a.standard:visited {
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	font-weight: 600;
	text-decoration-color: transparent;
  text-decoration-thickness: .2em;
  text-underline-offset: 6px;
	transition: all 0.2s ease-in-out;
	padding-bottom: 4px;
}

a.standard:hover, a.standard:active {
	text-decoration-color: #FFD2E2;
}

a.purple_underline:hover, a.purple_underline:active {
	text-decoration-color: #8947A8;
}

a.no_underline, a.no_underline:link, a.no_underline:visited {
	text-decoration: none;
}

a.no_underline:hover, a.no_underline:active {
	text-decoration: none;
	color: #333;
}

a.link_pink, a.link_pink:link, a.link_pink:visited {
	color: #FFD2E2;
}

a.view-button {
	display: inline-block;
	color: #232323;
	font-size: 19px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	padding: 8px 32px;
	cursor: pointer;
	border: solid #AEAEAE 1px;
	background: linear-gradient(to bottom, #fff 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: bottom left;
	transition: all 0.2s ease-in-out;
  border-radius: 12px;
	margin-top: 8px;
}

a.view-button:hover {
	background-position: top left;
}

a.cta_primary {
	display: block;
	color: #232323;
	font-size: 19px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
	padding: 16px 48px;
	cursor: pointer;
	border: solid #000 2px;
	box-shadow: none;
	background: linear-gradient(to bottom, #DDDEDF 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: bottom left;
	transition: all 0.2s ease-in-out;
  border-radius: 16px;
}

a.cta_primary:hover {
	box-shadow: 0px 12px 32px 0px rgba(0,0,0,0.08);
	background-position: top left;
}

a.cta_primary:active {
	box-shadow: none;
}

a.centred {
	margin: 16px auto;
	width: 33%;
}


/* Main styles
--------------------------------------------- */

.floatLeft {
	float: left;
}
.floatRight {
	float: right;
}

.clearboth {
	clear: both;
	font-size: 1px;
	height: 0;
	line-height: 0;
	overflow: hidden;
}

.nomargin {
	margin: 0;
}

.hide {
	display:none;
}

.nobr {
	white-space: nowrap;
}


/* Header Nav
--------------------------------------------- */

#header {
	max-width: 1864px;
	margin: auto;
}

#header .header-content {
	margin: 40px 32px 0 32px;
	float: left;
}

#header .header-content img {
	width: auto;
	height: 40px;
}

.header-nav {
	margin: 0 32px;
	float: right;
}

.museum-nav {
	margin: 0 auto 48px auto;
	width: 100%;
	height: auto;
}

.header-nav a, .header-nav a:link, .header-nav a:visited, .museum-nav a, .museum-nav a:link, .museum-nav a:visited {
	display: block;
	float: left;
	color: #232323;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	text-decoration: none;
  margin-top: 40px;
	margin-left: 16px;
	padding: 8px 16px 8px 16px;
  border-radius: 12px;
	background: linear-gradient(to bottom, #DDDEDF 50%, transparent 50%);
	background-size: 100% 200%;
	background-position: bottom left;
	transition: all 0.1s ease-in-out;
}

.museum-nav a, .museum-nav a:link, .museum-nav a:visited {
	margin: 0 16px 16px 0;
}

.header-nav a:hover, .header-nav a:active, .museum-nav a:hover, .museum-nav a:active {
	background-position: top left;
}

.header-nav a.selected, .header-nav a.selected:link, .header-nav a.selected:visited, .museum-nav a.selected, .museum-nav a.selected:link, .museum-nav a.selected:visited {
	background: linear-gradient(to bottom, #3E3E3E 50%, #3E3E3E 50%);
	color: #fff;
	cursor: default;
}


/* Homepage and other top-level pages
--------------------------------------------- */

.homepage h1 {
	font-size: 56px;
	line-height: 68px;
}

.contact h2 {
	font-size: 32px;
	line-height: 40px;
	margin: 0 0 16px 0;
}

#container.homepage {
	margin: 48px auto 0 auto;
  width: calc(100% - 64px);
  max-width: 1800px;
}

#container.about, #container.contact {
	margin: 64px auto 0 auto;
  width: calc(100% - 64px);
  max-width: 1800px;
}

.homepage video#heroVideo {
	width: 50%;
	max-width: 900px;
	height: auto;
	min-height: 720px;
	object-fit: cover;
	position: relative;
	z-index: 10;
	background-color: #FFD664;
	margin: 0;
	float: right;
}

#replayBtn {
	z-index: 20;
	position: absolute;
	top: 160px;
	right: 64px;
	width: 24px;
	height: auto;
	cursor: pointer;
	opacity: 0;
	transition: all 0.8s ease-in-out;
}

.promo {
	position: relative;
	width: 100%;
}

.promo img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 64px);
  height: calc(100% - 64px);
  object-fit: contain;
}

.promo .cta {
	margin-top: 24px;
}

.promo .section-content {
	width: 100%;
	max-width: 600px;
	text-align: left;
  margin: 264px auto 0 auto;
}

.bumper {
	height: 160px;
}

.promo-img-right .section-content {
	text-align: right;
}

.promo-img-right .section-1 {
	width: calc(50% - 128px);
  text-align: center;
  gap: 24;
	padding: 0 64px;
	float: left;
	position: relative;
}

.promo-img-right .section-2 {
	width: calc(50% - 64px);
	height: 656px;
  text-align: center;
  padding: 32px;
	float: right;
	position: relative;
}

.promo-img-left .section-1 {
	width: calc(50% - 64px);
	height: 656px;
  text-align: center;
  padding: 32px;
	float: left;
	position: relative;
}

.promo-img-left .section-2 {
	width: calc(50% - 128px);
  text-align: center;
  gap: 24;
	padding: 0 64px;
	float: right;
	position: relative;
}

.promo-1 {
	float: left;
	text-align: center;
	position: relative;
	width: calc(50% - 128px);
  padding: 0 64px;
	height: auto;
	margin-bottom: 0;
}

.promo-1 .section-content {
	margin-top: 96px;
}

.promo-1 p{
	margin-top: 48px;
}

.promo-2 .section-1 {
	background-color: #D5B4E4;
}

.promo-3 .section-2 {
  background-color: #170F57;
}

.promo-4 .section-1 {
	background-color: #7CD2DF;
}

.promo-5 .section-2 {
  background-color: #CCF6E3;
}

.promo-6 .section-1 {
	background-color: #F2D6E0;
	padding-bottom: 0;
}
.promo-6 .section-1 img {
  height: calc(100% - 32px);
	top: 32px;
  transform: translate(-50%, 0);
}

.promo-7 .section-2 {
  background-color: #FFE190;
}

.companies {
	width: 90%;
	max-width: 1300px;
	margin: 0 auto;
	text-align: center;
}
.companies img {
	width: 100%;
	height: auto;
	display: block;
	margin-top: 48px;
}

.about-promo, .museum-promo {
	width: 50%;
	max-width: 600px;
	margin: 0 auto;
	text-align: center;
}
.about-promo img {
	width: 160px;
	height: auto;
	display: block;
	margin: 0 auto;
	margin-bottom: 24px;
}


/* Project pages
--------------------------------------------- */

.project-page {
	background-color: #fff;
}

.project-page a.selected, .project-page a.selected:link, .project-page a.selected:visited {
	cursor: pointer;
}

.ds img {
  border-radius: 4px;
}

#hero {
 margin: 24px auto 48px auto;
 width: calc(100% - 64px);
 max-width: 1800px;
 clear: both;
 overflow: hidden;
}

#hero video, #hero img {
 max-width: 100%;
 margin: 0 auto;
 display: block;
 background-color: #fff;
}

#container.project {
	width: 100%;
  width: calc(100% - 64px);
  max-width: 1800px;
	margin: auto;
}

.project h1 {
	margin: 0 0 16px 0;
}

.project h2 {
	margin: 16px 0 32px 0;
}

.project h1, .project h2, .project h3 {
	text-align: center;
}

.project p, .project ol, .project ul {
	width: calc(100% - 64px);
	max-width: 664px;
	margin: 0 auto 48px auto;
}

.project li {
	margin-bottom: 16px;
	font-size: 19px;
}

.bigger-gap {
  margin-bottom: 80px !important;
}

.info {
  width: 70%;
	margin: 40px auto 48px auto;
	border-top: 1px #DADADA solid;
	padding-top: 24px;
	text-align: center;
}

.info p {
  font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
	font-weight: 400;
	color: #494E52;
  margin: 0 auto 16px auto;
}

.info a.standard {
	font-size: 16px;
  line-height: 24px;
}

.project-background {
  width: calc(100% - 48px);
  padding: 96px 24px 64px 24px;
	margin-top: 40px;
  margin-bottom: 112px;
}

.project img, .project video {
	margin: 80px auto;
	width: 100%;
  max-width: 1200px;
  height: auto;
	display: block;
}

.project video.phone {
	width: 60%;
	max-width: 512px;
}

.project .with-caption {
  margin-bottom: 40px;
}

.project img.img-shadow {
	box-shadow: 0px 16px 40px 0 rgba(0,0,0,0.12);
}

@supports (mask-image: paint(smooth-corners)) {
  .screen_content.is-loaded {
    border-radius: 0;
    mask-image: paint(smooth-corners);
    --smooth-corners: 6;
  }
}


/* About and Museum pages
--------------------------------------------- */

.about {
  margin: 64px auto 0 auto;
}

.about p {
  line-height: 2em;
	margin: 0 auto 40px auto;
  max-width: 664px;
}

.about img {
	width: 100%;
	max-width: 1024px;
	height: auto;
	margin: 64px auto;
}

.museum img {
	width: 100%;
	max-width: 1024px;
	height: auto;
	margin: 80px auto 16px auto;
	display: block;
	box-shadow: 0 12px 32px 0px rgba(0,0,0,0.04);
}

.museum img.smaller {
	width: 50%;
	max-width: 664px;
	box-shadow: none;
}

.museum img.small-app {
	width: auto;
	max-height: 664px;
	border-radius: 36px;
}

.museum p.caption {
  text-align: left;
}


/* Footer
--------------------------------------------- */

#footer {
	width: 100%;
	background-color: #111;
	text-align: center;
	margin-top: 120px;
}

.home #footer {
	margin-top: 160px;
}

#footer p.copyright {
	font-family: 'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #ccc;
	margin-bottom: 0;
}

#footer p.promo_text {
	font-weight: 600;
	margin-bottom: 0;
}

.footer-content {
	padding: 80px 32px 64px 32px;
}

#footer a {
	color: #FFD2E2;
}


/* Responsive resizing
--------------------------------------------- */

/* NOTE: MOBILE */
@media screen and (min-width: 0) and (max-width: 639px)  {
	.not-mobile {
		display: none !important;
	}
	.mobile-only {
		display: block !important;
	}
	input.send-button {
		padding: 24px 0;
		width: 100%;
	}
	a#cookie-bar-button {
		padding: 16px 0 !important;
		width: calc(100% - 48px);
		margin: 16px 26px 24px 24px !important;
	}
	#cookie-bar p {
		margin: 16px 24px 0 24px !important;
	}
	a.cta_primary {
		max-width: 98%;
	}
	h1 {
		font-size: 36px;
		line-height: 44px;
		margin-bottom: 8px;
	}
	h2, .previous h2 {
		font-size: 24px;
		line-height: 32px;
		margin-bottom: 16px;
	}
  h3 {
  	font-size: 20px;
  	line-height: 28px;
  }
  p {
    font-size: 17px;
		line-height: 28px;
	  letter-spacing: 0;
  }
	.project li {
		margin-bottom: 12px;
		font-size: 17px;
	}
	p.promo_text {
		font-size: 17px;
		line-height: 28px;
	}
	a.standard {
			font-size: 18px;
			line-height: 28px;
	}
	#header .header-content img {
		display: none;
	}
	#header .header-content {
		margin: 0;
	}
	.header-nav {
		margin: 0;
		width: 100%;
	}
	.header-nav a, .header-nav a:link, .header-nav a:visited {
		font-size: 16px;
		line-height: 20px;
		margin: 24px 0 0 0;
		padding: 16px 0 16px 0;
		width: 50%;
		text-align: center;
	}
	.header-nav a:hover, .header-nav a:active {
		background-position: bottom left;
	}
  .header-nav a.selected, .header-nav a.selected:link, .header-nav a.selected:visited {
  	background: none;
  	color: #000;
  	cursor: default;
    border-bottom: 3px #000 solid;
    border-radius: 0;
    font-weight: 700;
  }
	.homepage h1 {
		font-size: 42px;
		line-height: 52px;
	}
	#replayBtn {
		visibility: hidden;
	}
	a.centred {
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	a.view-button {
		margin-top: 0;
		font-size: 17px;
		padding: 8px 40px;
	}
	#container.homepage {
		margin: 0 auto 0 auto;
	  width: 100%;
	}
	.promo img {
	  width: calc(100% - 32px);
	  height: calc(100% - 32px);
	}
	.promo .section-content {
		width: calc(100% - 32px);
	  margin: 0 auto;
	}
	.promo-1 .section-content {
		margin-top: 48px;
	}
	.promo-1 {
		width: 100%;
		float: none;
		clear: both;
	  padding: 0;
		margin-bottom: 0;
	}
	.promo-1 p{
		margin-top: 32px;
	}
	.mobile-poster {
		text-align: center;
		background-color: #FFD664;
		background-image: url(../video/rupertsliwa_portfolio_hero@2x.webp);
  	background-repeat: no-repeat;
  	background-size: cover;
		background-position: center;
		height: 544px;
		width: auto;
	}
	.homepage video#heroVideo {
		display: none;
	}
	.bumper {
		height: 64px;
	}
	.promo-img-right, .promo-img-left {
		display:flex;
    flex-flow: column;
	}
	.promo-img-right .section-content {
		text-align: left;
	}
	.promo-img-right .section-1 {
		width: 100%;
		padding: 0;
		margin: 24px 0 0 0;
		float: none;
		clear: both;
		order: 2;
	}
	.promo-img-right .section-2 {
		width: calc(100% - 32px);
		height: 480px;
	  padding: 16px;
		float: none !important;
		clear: both;
		order: 1;
	}
	.promo-img-left .section-1 {
		width: calc(100% - 32px);
		height: 480px;
	  padding: 16px;
		float: none;
		clear: both;
	}
	.promo-img-left .section-2 {
		width: 100%;
		padding: 0;
		margin: 24px 0 0 0;
		float: none;
		clear: both;
	}
	.promo-6 .section-1 {
		padding-bottom: 0;
	}
	.about-promo, .museum-promo, .companies {
		width: calc(100% - 32px);
		text-align: left;
	}
	.about-promo img {
		display: none;
	}
	.companies img {
		width: 90%;
		height: auto;
		margin: 32px auto 0 auto;
	}
	.img-right {
		display: none;
	}
	.home #footer {
		margin-top: 64px;
	}
	#footer {
		margin-top: 64px;
	}
	#footer p.copyright {
		font-size: 14px;
		line-height: 26px;
	}
	#footer a.standard {
		line-height: 40px;
	}
	.footer-content {
		padding: 48px 4% 64px 4%;
	}
	#hero {
	 margin: 0 0 24px 0;
	 width: 100%;
   border-radius: 0;
	}
	#container.project {
		width: calc(100% - 32px);
	}
	.heading-home {
		height: 64px;
	}
	.project h2 {
		font-size: 28px;
		line-height: 36px;
		margin: 8px 0 12px 0;
		text-align: left;
	}
	.project p {
		width: 100%;
		margin: 0 auto 32px auto;
	}
	.project ol, .project ul {
		width: 90%;
		margin: 0 auto 32px auto;
	}
  p.caption {
  	font-size: 14px;
    line-height: 22px;
  }
  .project-background {
    width: 100%;
    padding: 32px 16px 24px 16px;
    margin-bottom: 32px;
    margin-left: -16px;
    border-radius: 0;
  }
	.project img, .project video {
		margin: 40px auto;
	}
  .project .with-caption {
    margin-bottom: 24px;
  }
  .bigger-gap {
    margin-bottom: 40px !important;
  }
	@supports (mask-image: paint(smooth-corners)) {
	  .screen_content.is-loaded {
	    --smooth-corners: 8;
	  }
	}
	.info {
    width: 100%;
		margin: 24px auto 24px auto;
		padding-top: 16px;
		font-size: 14px;
		text-align: left;
	}
  .info p {
    margin-bottom: 12px;
  }
	.contact h1 {
		width: calc(100% - 32px);
		margin: 0 auto 8px auto;
	}
	.contact h2 {
		margin: 0 auto 8px auto;
	}
	#container.previous, #container.about {
		margin: 48px auto 0 auto;
	  width: calc(100% - 32px);
	}
	#container.contact {
		margin: 48px 0 0 0;
	  width: 100%;
	}
	.gform {
		margin: 40px 0 0 0;
		height: 820px;
	}
	.privacy-info {
		margin: 32px auto 0 auto;
		padding: 0;
		width: 90%;
	}
	.project video.phone {
		width: 100%;
	}
	.about {
	  margin-top: 32px;
	}
	.about img {
		margin: 40px 0;
	}
	.museum img {
		margin: 48px 0 8px 0;
	}
	.museum img.smaller {
		width: 80%;
		margin-left: auto;
		margin-right: auto;
	}
	.museum img.small-app {
		width: auto;
		max-height: 664px;
		border-radius: 36px;
	}
	.promo-prev-museum {
		margin-top: 64px;
		text-align: left;
	}
	.promo-prev-agencies {
		margin-top: 64px;
		text-align: left;
	}
	.promo-prev-agencies img {
		margin: 32px auto 16px 0;
		max-width: 400px;
	}
	.museum-nav a, .museum-nav a:link, .museum-nav a:visited {
		margin: 0 8px 16px 0;
		padding: 8px;
	}
	.museum-nav {
		margin: 32px auto 0 auto;
	}
}


/* NOTE: TABLET PORTRAIT */
@media screen and (min-width: 640px) and (max-width: 1023px)  {
	a.cta_primary {
		max-width: 40%;
	}
	h1 {
		font-size: 56px;
		line-height: 68px;
	}
	h2 {
		font-size: 28px;
		line-height: 40px;
	}
  h3 {
  	font-size: 24px;
  	line-height: 32px;
  }
  .previous h2 {
		font-size: 24px;
		line-height: 32px;
	}
  .previous h3 {
  	font-size: 20px;
  	line-height: 28px;
  }
	p {
		font-size: 18px;
		line-height: 32px;
	  letter-spacing: -0.1px;
	}
	.project li {
		margin-bottom: 12px;
		font-size: 18px;
	}
	#header .header-content img {
		height: 38px;
	}
	#container.about, #container.contact {
		margin: 24px auto 0 auto;
	  width: calc(100% - 64px);
	}
	.homepage h1 {
		font-size: 48px;
		line-height: 60px;
	}
  .promo {
		margin-bottom: 40px;
	}
	.promo img {
	  width: calc(100% - 48px);
	  height: calc(100% - 48px);
	}
	.promo-1 .section-content {
		margin: 80px auto 0 auto;
	}
	.promo-1 {
		width: calc(100% - 96px);
		float: none;
		clear: both;
	  padding: 0;
		margin-bottom: 80px;
	}
	.homepage video#heroVideo {
		width: 100%;
		height: auto;
		min-height: 600;
		float: none;
	}
	#replayBtn {
		display: none;
	}
	.promo .section-content {
		margin-top: 96px;
	}
	.bumper {
		height: 96px;
	}
	.promo-img-right .section-1 {
		width: calc(50% - 64px);
		padding: 0 32px;
	}
	.promo-img-right .section-2 {
		width: calc(50% - 48px);
		height: 480px;
	  text-align: center;
	  padding: 24px;
		float: right;
		position: relative;
	}
	.promo-img-left .section-1 {
		width: calc(50% - 48px);
		height: 480px;
	  padding: 24px;
	}
	.promo-img-left .section-2 {
		width: calc(50% - 64px);
		padding: 0 32px;
	}
	.promo-6 .section-1 {
		padding-bottom: 0;
	}
	.about-promo, .museum-promo {
		width: 80%;
	}
	a.centred {
		width: 60%;
		padding-left: 24px;
		padding-right: 24px;
	}
	.description-left {
		width: 50%;
	}
	.description-right {
		width: 50%;
	}
	#footer {
		margin-top: 80px;
	}
	.footer-content {
		padding: 48px 48px 80px 48px;
	}
	#hero {
		width: calc(100% - 48px);
		margin-bottom: 40px;
	}
	#container.project {
		width: calc(100% - 48px);
	}
  .info {
    width: 90%;
  	margin: 24px auto 32px auto;
  }
	.project h1 {
		font-size: 42px;
		line-height: 54px;
	}
	.project h2 {
    font-size: 32px;
		line-height: 40px;
	}
	.project p, .project ol, .project ul {
		width: calc(100% - 96px);
	}
  .project-background {
    width: calc(100% - 80px);
    padding: 48px 40px 24px 40px;
    margin-bottom: 64px;
  }
  .project-background p {
    width: calc(100% - 16px);
  }
	.project img, .project video {
		margin: 80px auto;
		width: 100%;
	}
  .project img.phone {
    width: auto;
    max-width: 80%;
    max-height: 680px;
  }
  .bigger-gap {
    margin-bottom: 64px !important;
  }
	.heading-home {
		height: 88px;
	}
	.about p {
	  margin: 0 0 40px 0;
	}
}


/* NOTE: Tablet landscape and small desktop */
@media screen and (min-width: 1024px) and (max-width: 1440px)  {
	#header .header-content {
		margin-right: 48px;
	}
	#container.about, #container.contact {
		margin: 24px auto 0 auto;
	  width: calc(100% - 64px);
	}
	a.cta_primary {
		max-width: 30%;
	}
	h2 {
		font-size: 34px;
		line-height: 40px;
	}
  h3 {
  	font-size: 24px;
  	line-height: 32px;
  }
  .previous h2 {
		font-size: 28px;
		line-height: 36px;
	}
  .previous h3 {
  	font-size: 22px;
  	line-height: 30px;
  }
	a.centred {
		width: 50%;
		padding-left: 24px;
		padding-right: 24px;
	}
	.homepage h1 {
		font-size: 52px;
		line-height: 64px;
	}
	#replayBtn {
		top: 164px;
	}
	#footer {
		margin-top: 80px;
	}
	#hero {
		width: calc(100% - 64px);
		margin-bottom: 48px;
	}
	#container.project {
		width: calc(100% - 64px);
	}
  .info {
  	margin: 32px auto 40px auto;
  }
	.project h1 {
		font-size: 50px;
		line-height: 62px;
	}
	.project h2 {
		font-size: 32px;
		line-height: 40px;
	}
	.project img, .project video {
		margin: 80px auto;
		width: 90%;
	}
  .project img.phone {
    width: auto;
    max-width: 80%;
    max-height: 680px;
  }
  .project-background {
    padding: 56px 24px 24px 24px;
  }
  .bigger-gap {
    margin-bottom: 64px !important;
  }
	.heading-home {
		height: 88px;
	}
}


/* NOTE: Tablet only - homepage h1 fix */
@media screen and (min-width: 1024px) and (max-width: 1280px)  {
	.homepage h1 {
		font-size: 44px;
		line-height: 56px;
	}
}


/* NOTE: This is the default breakpoint */
@media screen and (min-width: 1441px) and (max-width: 1800px)  {
	a.cta_primary {
		max-width: 20%;
	}
	.project img.phone {
    width: auto;
    max-height: 720px;
  }
}


/* NOTE: Large desktop */
@media screen and (min-width: 1864px)  {
	.project img, .project video {
		width: 80%;
	}
  .project img.phone {
    width: auto;
    max-height: 800px;
  }
	#replayBtn {
		right: auto;
		left: 50%;
		margin-left: 830px;
	}
}