/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Vendor-prefixed and regular ::selection selectors cannot be combined:
 * https://stackoverflow.com/a/16982510/7133471
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #ccc;
  text-shadow: none;
}

::selection {
  background: #ccc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

/*hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}*/

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}



/* ==========================================================================
   prompt - Browser Upgrade & Cookies
   ========================================================================== */

#prompt {
	position: fixed;
	bottom: 0;
	z-index: 999;
	width: 100%;
	background: #ccc;
	text-align: center;
	font-size: 1.2rem;
	opacity: .95;
	box-shadow: 0px 0px 5px 0px rgba(90,90,90,0.25);
}

#prompt > div {
	  border-top: 1px solid #666;
	  padding: 0.5em 2rem;
}

#prompt .browserupgrade {
	background-color: #feed79;
}

#prompt .cookies-prompt-button {
	text-transform: uppercase;
	font-weight: 400;
	letter-spacing: .2rem;
	display: block;
	width: 8rem;
	padding: .1rem 1rem 0;
	margin: 0 auto;
	margin-top: .8rem;
	margin-bottom: .4rem;
	border: 1px solid var(--black);
	opacity: .8;
	cursor: pointer;
	transition: color .2s;
}

#prompt .cookies-prompt-button:hover {
	background-color: var(--black);
	color: var(--off-white);
}


/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/

/* ==========================================================================
   Main CSS
   ========================================================================== */


:root {
  --bg-color: #ededed;
  --black: #1e1e1e;
  --off-white: #d2d2d2;
  --turquoise: #46bdd4;
  --violet: #774a97;
}

html {
	color: var(--black);
	font-family: 'Roboto Condensed', sans-serif;
	font-weight: 300;
	font-size: 62.5%;
	line-height: 1.4;
	background-color: var(--bg-color);
}


/* >>>>>>>>>>>>>>> COMMON <<<<<<<<<<<<<<< */

strong {
	font-weight: 400;
}

em {
	font-style: italic;
}

a {
	color: inherit;
}

.sr-only {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /* 1 */
}

.resize-animation-stopper * {
  animation: none !important;
  transition: none !important;
}

.cta a {
	display: inline-block;
	border: .1rem solid #333;
	text-decoration: none;
	text-transform: uppercase;
	font-size: 1.2rem;
	letter-spacing: .1rem;
	font-weight: 400;
	padding: .3rem 1.5rem .2rem;
	
	background-color: var(--bg-color);
	transform: scale(1);
	transition: transform .25s ease-out;
}
.cta a:hover {
	color: #fff;
	background-color: var(--turquoise);
	border-color: var(--turquoise);
	transform: scale(1.1);
	box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.36);
}
.cta a::before,
.cta a::after {
  content: " – ";
}

.base-block {
	width: 90%;
	margin: 5rem 5%;
	padding: 1rem 0;
	font-size: 1.4rem;
	line-height: 1.6rem;
	text-align: center;
}
.base-block h2,
.base-block h3 {
	font-family: 'Oswald', sans-serif;
	font-size: 2.8rem;
	line-height: 3rem;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0;
}
.base-block p {
	margin: .4rem 0;
}
.base-block br {
	display: none;
}
.base-block .cta {
	margin-top: 1rem;
}
.base-block img {
	margin-top: 4rem;
}
.base-block.with-separator::after {
	content: " ";
	display: block;
	width: 50%;
	max-width: 25rem;
	margin: 0 auto;
	margin-top: 3rem;
	margin-bottom: -2rem;
	border-top: 1px solid var(--black);
}

.crypt {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  border: 0;
  background-color: transparent;
}

.img-border {
	border: 1px solid var(--off-white);
}


/* >>>>>>>>>>>>>>> HEADER <<<<<<<<<<<<<<< */

header {
	position: fixed;
	top: 0;
	height: 4.4rem;
	line-height: 4.4rem;
	width: 100%;
	background-color: var(--black);
	opacity: .98;
	box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
	z-index: 99;
}

header div#logo a {
	display: block;
	width: 16rem;
	margin-top: 1.7rem;
	margin-left: 1.7rem;
}

header #logo img {
	display: block;
}

header #isotype {
	display: none;
}

header nav {
	color: var(--off-white);
}

header nav .hamburger {
	transform: scale(.5) translateY(-.2rem);
	position: fixed;
	right: 0;
	top: -.4rem;
	z-index: 99;
}

header nav ul {
	font-family: 'Oswald', sans-serif;
	font-size: 3.6rem;
	font-weight: 400;
	text-transform: uppercase;
	list-style-type: none;
	
	background-color: var(--black);
	z-index: 99;

	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	opacity: .97;
	padding: 0;
	margin: 0;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
	
	transform: translateX(100%);
	transition: transform .25s ease-out;
}

header nav ul.is-active {
	transform: translateX(0);
}

header nav ul li {
	text-align: center;
	margin-bottom: 2rem;
}

header nav ul li a {
	text-decoration: none;
	border-bottom: .5rem solid rgba(69, 189, 212, 0);
	transition: border .25s ease-out;
}

header nav ul li a.current,
header nav ul li a:hover {
	border-bottom: .5rem solid rgba(69, 189, 212, 1);
}


/* >>>>>>>>>>>>>>> MAIN <<<<<<<<<<<<<<< */

section.main {
	padding-top: 2rem;
}


/* >>>>>>>>>>>>>>> ABOUT <<<<<<<<<<<<<<< */

#home-fold {
	width: 100%;
	height: 100vw;
	margin-top: 2.4rem;
	position: relative;
}

/*** home header video ***/

#home-fold #bg-video {
    position: relative;
    top: 0;
	left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
	background-image: url(/img/home/vw-home-squared.jpg);
	background-size: cover;
	background-position: center;
}

#home-fold #bg-video video {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/*** video overlay ***/

#home-fold .block {
	position: absolute;
	top: 0;
	overflow: hidden;
	color: var(--off-white);
	width: 100%;
	height: 100%;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
}

#home-fold .base-block {
	background-color: rgba(10, 10, 10, 0.8);
	border-radius: 50%;
	position: absolute;
	width: 90%;
	height: 90%;
	padding: 10%;
	margin: 0 auto;
	margin-left: -5%;
	text-shadow: 0px 0px 2px #000;
	
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* */

#home-fold .cta a {
	background-color: rgba(255, 255, 255, 0.1);
	border-color: var(--off-white);
	white-space: nowrap;
}

#home-fold .cta a:hover {
	background-color: var(--turquoise);
	border-color: var(--turquoise);
}

#bold-thinkers img {
	width: 15%;
	margin: 3rem .03% 0;
}

#a-great-team img {
	width: 25rem;
}

#branding img {
	width: 100%;
	max-width: 60rem;
	display: block;
	margin: 0 auto;
	border-left: none;
	border-right: none;
}

#luxury-lifestyle img {
	width: 100%;
	max-width: 80rem;
	opacity: .7;
	margin-top: 5rem;
	margin-bottom: -5rem;
}


/* >>>>>>>>>>>>>>> WORK <<<<<<<<<<<<<<< */

#work .grid {
	width: 90%;
	margin: 0 auto;
	display: grid;
	grid-gap: 1vw;
	grid-template-columns: repeat( 2, 1fr );
	margin-top: -4rem;
	margin-bottom: 8rem;
}

#work .sub-grid {
	position: relative;
	padding-top: 100%;
}

#work .sub-grid .inner {
	width: 100%;
	height: 100%;
	display: grid;
	grid-gap: 1vw;
	..grid-template-columns: 	1fr 1fr;
	..grid-template-rows:		1fr 1fr;
	grid-template-columns: 	repeat( 2, 1fr );
	grid-template-rows:		repeat( 2, 1fr );
	position: absolute;
	top: 0;
}

#work .sub-grid .item {
	padding-top: 100%;
	overflow: hidden;
	position: relative;
	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
	background-color: #ccc;
}

#work .grid .i_2x2 {
	grid-row-end: span 2;
	grid-column-end: span 2;
}

#work .grid .i_1x2 {
	grid-row-end: span 2;
	padding-top: calc(200% + 1vw);
}

#work .grid .i_2x1 {
	grid-row-end: span 1;
	width: calc(200% + 1vw );
}

.i_2x1 + .i_2x1 {
	grid-row-start: 2;
}

.i_2x1 + .i_1x1,
.i_2x1 + .i_1x1 + .i_1x1 {
	grid-row-start: 2;
}

#work .grid a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}

#work .grid img {
	width: 100%;
	transform: scale(1.05);
	transition: transform .25s ease-out;
}

#work .grid a:hover img {
	transform: scale(1.2);
}

#work .grid h3 {
	position: absolute;
	background-color: rgba(30, 30, 30, 0.7);
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin: 0;
	
	text-transform: uppercase;
	text-align: center;
	color: white;
	font-weight: normal;
	font-size: 1.1rem;
	line-height: 1.2;
	
	display: flex;
	justify-content: center;
	align-items: center;
	
	transform: scale(1);
	transition: opacity .25s ease-out;
	z-index: 9;
	opacity: 0;
}

#work .grid .i_1x1 a h3 {
	font-size: .9rem;
}

#work .grid h3 span {
	border: 1px solid #fff;
	width: 50%;
	padding: 1rem .5rem;
	overflow: hidden;
}

#work .grid .i_1x1 h3 span,
#work .grid .i_1x2 h3 span  {
	width: 70%;
}

#work .grid a:hover h3 {
	opacity: 1;
}


/* >>>>>>>>>>>>>>> SINGLE <<<<<<<<<<<<<<< */

#single .base-block {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

#single h2 {
	font-size: 3rem;
	line-height: 1.1;
	margin-bottom: 2rem;
}

#single .base-block ul {
	list-style: none;
	padding: 0;
}

#single .base-block ul li {
	display: inline;
	margin: 0 .3rem;
}

#single .base-block ul li a {
	text-decoration: none;
}

#single .base-block ul li a:hover {
	text-decoration: underline;
}

/*** grid ***/

#single .grid {
	list-style: none;
	padding: 0;
	width: 90%;
	margin: 0 auto;
	margin-top: -4rem;
	display: grid;
	grid-gap: 1.5vw;
	grid-template-columns: repeat( 4, 1fr );
}

#single .grid .item {
	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.5);
}

#single .grid .i_2 {
	grid-column-end: span 2;
}

#single .grid .i_3 {
	grid-column-end: span 3;
}

#single .grid .i_4 {
	grid-column-end: span 4;
}

#single .grid img {
	width: 100%;
	..height: 100%;
	..object-fit: cover;
}

#single .grid .video {
	position: relative;
	padding-bottom: 56.25%;
	..padding-top: 25px;
	height: 0;
}

#single .grid .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/*** bt-back ***/

.bt-back {
	font-family: 'Oswald', sans-serif;
	font-size: 2.4rem;
	text-transform: uppercase;
	font-weight: 400;
	margin: 0 auto;
	text-align: center;
	margin-bottom: 6rem;
	margin-top: 4rem;
	..display: none;
}

.bt-back::before {
	content: "";
	display: block;
	width: 50%;
	margin: 0 auto;
	margin-bottom: 3rem;
	border-top: 1px solid var(--black);
}

.bt-back a {
	text-decoration: none;
}

.bt-back a:before {
    content: "";
    display: block;
    background: url(/img/arrow-back.svg) no-repeat;
    width: 20px;
    height: 20px;
    margin: 0 6px 0 0;
	width: 2.4rem;
	display: inline-block;
	margin-bottom: -.2rem;
	margin-right: 1.2rem;
}

.bt-back.wide {
	display: none;
}



/* >>>>>>>>>>>>>>> SERVICES <<<<<<<<<<<<<<< */

#services .base-block h3 {
	font-size: 3rem;
	line-height: 2.8rem;
	margin-bottom: .8rem;
}

#services .base-block img {
	width: 20rem;
	margin: 0;
	margin-bottom: 2rem;
}

#services .base-block.sub2 p {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
}

#services .base-block#strategy-shopper img {
	margin-bottom: 1rem;
}

#services .base-block#experiental img,
#services .base-block#art-direction img {
	margin-bottom: 3rem;
}

#services .base-block#digital img {
	margin-top: -1rem;
}


/* >>>>>>>>>>>>>>> CONTACT <<<<<<<<<<<<<<< */

section#contact .social a {
	text-align: center;
	display: block;
	text-decoration: none;
}

section#contact .social a:hover {
	text-decoration: underline;
	text-decoration-color: var(--turquoise);
}

section#contact .social a.mail {
	font-size: 2.6rem;
	margin-bottom: 2rem;
}

section#contact .social a.instagram,
section#contact .social a.linkedin {
	font-size: 2rem;
	text-decoration: none;
}

section#contact .social a.instagram::before,
section#contact .social a.linkedin::before {
	content: " ";
	display: inline-block;
	width: 2.8rem;
	height: 2.8rem;
	background: url(/img/social.svg) no-repeat;
	background-size: cover;
	transform: translateY(.9rem);
}

section#contact .social a.linkedin::before {
	background-position-x: -2.8rem;
	transform: translateY(.65rem);
	margin-top: -1rem;
}

section#contact .origami-isotype {
	width: 30rem;
	display: block;
	margin: 6rem auto 10rem;
}



/* >>>>>>>>>>>>>>> LEGAL <<<<<<<<<<<<<<< */

section#legal {
	width: 90%;
	max-width: 60rem;
	margin: 0 auto;
	padding-bottom: 12rem;
}



/* >>>>>>>>>>>>>>> 404 <<<<<<<<<<<<<<< */

section#not-found img {
	display: block;
	width: 80%;
	max-width: 60rem;
	margin: 0 auto;
	margin-bottom: 6rem;
}



/* >>>>>>>>>>>>>>> FOOTER <<<<<<<<<<<<<<< */

#content {
	min-height: calc(100vh - 19rem);
}

footer {
	background-color: var(--black);
	color: var(--off-white);
	height: 19rem;
	text-align: center;
	text-transform: uppercase;
}

footer::before {
	content: "";
	display: block;
	background-color: var(--violet);
	height: .5rem;
}

footer a {
	text-decoration: none;
}

footer .social {
	margin-top: 3rem;
	margin-bottom: 2rem;
}

footer .social a {
	background: url(/img/social.svg) no-repeat;
	background-color: var(--off-white);
	background-size: cover;
	display: inline-block;
	width: 2.8rem;
	height: 2.8rem;
	text-indent: -999rem;
	margin: 0 1rem;
	opacity: .8;
	transition: opacity .25s;
}

footer .social a:hover {
	opacity: 1;
}

footer .social a.linkedin {
	background-position-x: -2.8rem;
}

footer .social a.mail {
	background-position-x: -5.6rem;
}

footer nav {
	font-size: 1.4rem;
	font-weight: 400;
	margin-bottom: 1.2rem;
}

footer nav a {
	margin: 0 1rem;
}

footer h6 {
	font-size: 1.4rem;
	font-weight: 300;
	margin-top: 0;
	margin-bottom: .6rem;
}

footer h6 span {
	background: url(../img/heart.svg) 0 .2rem no-repeat;
	width: 1.4rem;
	display: inline-block;
	text-indent: -9999rem;
}

footer small {
	font-size: 1.1rem;
	margin: 0;
}


/*!
 * Hamburgers
 * @description Tasty CSS-animated hamburgers
 * @author Jonathan Suh @jonsuh
 * @site https://jonsuh.com/hamburgers
 * @link https://github.com/jonsuh/hamburgers
 */
.hamburger {
  padding: 1rem 1rem;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
  .hamburger:hover {
    opacity: 0.7; }
  .hamburger.is-active:hover {
    opacity: 0.7; }
  .hamburger.is-active .hamburger-inner,
  .hamburger.is-active .hamburger-inner::before,
  .hamburger.is-active .hamburger-inner::after {
    background-color: var(--off-white);
}

.hamburger:focus {
	outline: none;
}

.hamburger-box {
  width: 4rem;
  height: 2.4rem;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -.2rem; }
  .hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
    width: 4rem;
    height: .4rem;
    background-color: var(--off-white);
    .border-radius: .4rem;
    position: absolute;
    transition-property: transform;
    transition-duration: 0.15s;
    transition-timing-function: ease;
  }
  .hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block;
  }
  .hamburger-inner::before {
    top: -1rem;
  }
  .hamburger-inner::after {
    bottom: -1rem;
  }

/*
   * Spring
   */
.hamburger--spring .hamburger-inner {
  top: .2rem;
  transition: background-color 0s 0.13s linear; }
  .hamburger--spring .hamburger-inner::before {
    top: 1rem;
    transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  .hamburger--spring .hamburger-inner::after {
    top: 2rem;
    transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
  .hamburger--spring.is-active .hamburger-inner::before {
    top: 0;
    transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 1rem, 0) rotate(45deg); }
  .hamburger--spring.is-active .hamburger-inner::after {
    top: 0;
    transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 1rem, 0) rotate(-45deg); } 

/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/

/* >>>>>>>>>>>>>>> MEDIA QUERIES <<<<<<<<<<<<<<< */

/*Very small devices (phones, 260px and up)*/
@media only screen and (min-width: 16.25em) {
	
	header div#logo a {
		width: 18rem;
		margin-top: 1.6rem;
	}
	
	#home-fold .block {
		background-color: transparent;
	}
	
	#home-fold .base-block {
		background-color: rgba(10, 10, 10, 0.8);
		width: 64%;
		height: 64%;
		margin-left: 8%;
		border-radius: 50%;
		
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/*Small devices (landscape phones, 448px and up)*/
@media only screen and (min-width: 28em) { 

	.base-block br:not(#home-fold .base-block br) {
		display: block;
	}
	
	/* video overlay*/
	
	#home-fold .base-block {
		padding: 5%;
		margin-left: 13%;
	}

}

/*Small devices (landscape phones, 576px and up)*/
@media only screen and (min-width: 36em) { 
	
	/* about */
	
	.base-block br {
		display: block;
	}
	
	#home-fold {
		height: 33.33vw;
	}
	
	#home-fold #bg-video video {
		width: 100%;
		height: auto;
	}
	
	#home-fold .block {
		width: 100vw;
		height: 33.33vw;
	}
	
	#branding img {
		border: 1px solid var(--off-white);
	}
	
	/* video overlay*/
	
	#home-fold .base-block {
		padding: 0;
		width: 64%;
		height: 200%;
		margin-left: 18%;
	}
	
	/* services */
	
	#services .base-block img {
		width: 25rem;
	}
	
	#services .base-block.sub2 {
		font-size: 1.4rem;
		line-height: 1.2;
	}
	
	/* work */

	#work .grid h3 {
		font-size: 1.3rem;
	}
	
	#work .grid .i_1x1 a h3 {
		font-size: 1.1rem;
	}
	
}

/*Medium devices (tablets, 768px and up)*/
@media only screen and (min-width: 48em) {
	
	/*/************************/
	/*/**** D E S K T O P *****/
	/*/************************/
	
	/*** MENU ***/
	
	.hamburger {
		display: none;
	}
	
	header {
		margin: 0 auto;
	}
	
	header div#logo {
		margin: 0 auto;
	}
	
	header div#logo a {
		position: relative;
		z-index: 9;
		width: 20rem;
	}
	
	header nav ul {
		display: block;
		position: static;
		margin: 0 auto;
		margin-top: 1.5rem;
		
		background-color: transparent;
		opacity: 1;
		
		font-size: 1.6rem;
		text-align: right;
		
		transform: translateY(-4.5rem);
		transition: none;
	}
	
	header nav ul li {
		display: inline-block;
		margin-bottom: 0rem;
		margin-right: 1.2rem;
		text-align: left;
	}
	
	header nav ul li:last-child {
		margin-right: 2rem;
	}
	
	header nav ul li a {
		border-bottom-width: .2rem;
	}
	
	header nav ul li a.current,
	header nav ul li a:hover {
		border-bottom-width: .2rem;
	}
	
	
	/* base-block */
	
	.base-block {
		font-size: 1.6rem;
		line-height: 1.9rem;
	}
	
	.base-block h2,
	.base-block h3 {
		font-size: 3.5rem;
		line-height: 1.1;
		margin: 1rem;
	}
	.base-block p {
		margin: .4rem 0;
	}
	.base-block .cta {
		margin-top: 1rem;
	}
	.base-block img {
		margin-top: 4rem;
	}
	.base-block.with-separator::after {
		margin: 3rem auto 0;
	}
	
	.cta a {
		font-size: 1.4rem;
	}
	
	/* services */
	
	section#services .base-block h3 {
		font-size: 3rem;
	}
	
	/* contact */
	
	section#contact .origami-isotype {
		width: 54rem;
	}
	
	/* video overlay*/
	
	#home-fold .base-block {
		width: 50%;
		height: 150%;
		margin-left: 25%;
	}
	
	/* works grid */
	
	#work .grid {
		grid-template-columns: repeat( 3, 1fr );
		grid-gap: 1vw;
		margin-top: -2rem;
	}
	
	#work .grid img {
		transform: scale(1);
	}
	
	/* single */
	
	#single {
		display: flex;
		width: 90%;
		max-width: 96rem;
		margin: 15rem auto 8rem;
		padding: 0;
	}
	
	#single .grid {
		margin-top: 0;
		grid-gap: 1vw;
		height: 100%;
	}
	
	#single .base-block {
		width: 50%;
		
		text-align: left;
		margin-top: 0;
	}
	
	#single .base-block h2 {
		margin: 0;
		margin-bottom: 1rem;
		margin-right: 5%;
	}
	
	#single .base-block p {
		margin-right: 5%;
	}
	
	#single .base-block ul li {
		display: block;
	}
	
	.bt-back.narrow {
		display: none;
	}
	
	.bt-back.wide {
		display: block;
		text-align: left;
	}
	
	.bt-back.wide::before {
		text-align: left;
		margin-left: 0;
	}
	
}

/*Large devices (desktops, 992px and up)*/
@media only screen and (min-width: 62em) { 
	
	/*** MENU ***/
	
	header {
		height: 10rem;
		transition: height .25s ease-in-out;
	}
	
	header #logo {
		width: 23rem;
		transform: translate(-38em, 2.6rem);
		transition: transform .25s ease-in-out;
		position: relative;
		z-index: 999;
	}
	
	header #isotype {
		display: block;
		position: absolute;
		width: 7.2rem;
		transform: translateX(50vw);
		margin-left: -3.6rem;
		top: 2.5rem;
		opacity: .9;
		transition: top .25s ease-out, opacity .25s ease-out;
	}
	
	header nav {
		z-index: -99999;
	}
	
	header nav ul {
		width: 99.2rem;
		transform: translateY(-2rem);
		transition: transform .25s ease-in-out;
	}
	
	section.main {
		padding-top: 7.6rem;
	}
	
	/* expanded menu */
	
	header.collapsed {
		height: 4.4rem	
	}
	
	header.collapsed #logo {
		transform: translate(-38em, 0rem);
	}
	
	header.collapsed #isotype {
		top: 0;
		opacity: 0;
	}
	
	header.collapsed nav ul {
		transform: translateY(-4.5rem);
	}
	

	/*** HOME ***/
	
	#bold-thinkers img {
		width: 12.5rem;
		margin-left: .2rem;
		margin-right: .2rem;
	}
	
	
	/*** SERVICES ***/
	
	.base-block.sub2 {
		position: relative;
		width: 40rem;
		position: relative;
		left: 50%;
		margin-left: 2rem;
		text-align: left;
		padding: 0;
		margin-top: 10rem;
		margin-bottom: 10rem;
	}
	
	.base-block.sub2:nth-child(even) {
		text-align: right;
		margin-left: -42rem;
	}
	
	.base-block.sub2 p,
	.base-block.sub2 h3 {
		margin: 0;
		margin-bottom: .7rem;
	}
	
	#brand-communication {
		margin-top: 15rem;
		margin-bottom: 15rem;
	}
	
	.base-block.sub2 img {
		display: block;
		position: absolute;
	}
	
	.base-block.sub2:nth-child(even) img {
		margin-left: 44rem!important;
	}
	
	.base-block.sub2:nth-child(odd) img {
		margin-left: -29rem!important;
	}
	
	#strategy-shopper img {
		margin-top: -3rem!important;
	}
	
	#global-travel img {
		margin-top: -2rem!important;
	}
	
	#experiental img {
		margin-top: -1rem!important;
	}
	
	#digital img {
		margin-top: -6rem!important;
		margin-left: -26rem!important;
	}
	
	#brand-communication img {
		margin-top: -6rem!important;
	}
	
	#art-direction img {
		margin-top: -4rem!important;
	}
	
	/* WORK */
	
	#work .grid {
		width: 96rem;
		grid-gap: 1rem;
	}
	
	#work .sub-grid .inner {
		grid-gap: 1rem;
	}
	
	#work .grid .i_1x2 {
		padding-top: calc(200% + 1rem);
	}
	
	#work .grid .i_2x1 {
		width: calc(200% + 1rem );
	}
	
	/* single */
	
	#single .grid {
		grid-gap: 1rem;
	}

}

/*Extra large devices (large desktops, 1200px and up)*/
@media only screen and (min-width: 75em) {
	
	/*** home-block ***/
	
	#home-fold .base-block {
		font-size: 1.8rem;
		line-height: 2.2rem;
	}
	
	#home-fold .base-block h2 {
		font-size: 4rem;
		margin-bottom: 1.5rem;
	}
	
	
	#home-fold .cta a {
		font-size: 1.6rem;
		margin-top: .4rem;
	}
	
	/* video overlay*/
	
	#home-fold .base-block {
		width: 40%;
		height: 120%;
		margin-left: 30%;
	}
		
}

 
 
 
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
/**/
 



/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre {
    white-space: pre-wrap !important;
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  /*
     * Printing Tables:
     * https://web.archive.org/web/20180815150934/http://css-discuss.incutio.com/wiki/Printing_Tables
     */
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}