:root {
  --sectionGap: 3rem;
}

body {
	font-size: 1.125rem;
}

.inner, .inner.narrow, .inner.medium, content, sidebar, footer ul.nav, .page-title .inner, .page-title h1, .page-title p, .project-intro .inner, .project-details, .project-description, .inner.skinny {
	width: auto;
	display: block;
}

content {
	font-size: 1.125rem;
}

sidebar, content {
	margin: 0 0 calc(var(--sectionGap)/2);
}

.page-title {
	padding-left: 1rem;
	padding-right: 1rem;
}

.page-title p {
	font-size: 1.125rem;
}

nav {
	width: auto;
}

.inner {
	padding-left: 2vw;
	padding-right: 2vw;
}

.logo-collection-slide {

}


.logo-collection-image {
	width: 100%;
	height: 66vw;

 margin-top: -25vw;

	margin-bottom: 0;
	
	background: url(../images/logo-collection.svg) left center / 200vw 74.698vw repeat-x;
}

.logo-collection-content {
	padding: 0 4vw;
}

.logo-collection-slide .button {
  background: black;
  color: white;
  font-size: 1.25rem;
  border-radius: 2.5rem;
  padding: .625rem 2rem;
}

nav {
	align-items: stretch;
}

.page {
	padding-top: 84px;
}

header {
	padding: 0;
	border-top: 1px solid black;
}

header ul.nav {
	display: none;
}

.logo img {
	margin: 0;
}

.menu-toggle {
	display: block;
	width: calc((100vw - 84px)/2);
		width: calc((100vw - 84px) * .4);
	margin: 0;
	border-right: 1px solid black;
	align-content: center;
	order: 2;
}

header ul.nav.visible {
	display: block;
	position: fixed;
	top: 5.25rem;
	left: 0;
	bottom: 0;
	right: 0;
	background: var(--red);
	color: white;
	z-index: 999;
	padding: 0;
	margin: 0;
}

header ul.nav > li {
	margin: 0;
	padding: 1rem 2rem;
	border-bottom: 1px solid white;
	position: relative;
}

header ul.nav > li > a {
	border: none !important;
	padding: 0;
}

header ul.nav li a.toggler  {
	display: block;
	background: url(../images/icon-toggle.svg) center top 30px / .875rem .5rem no-repeat;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	padding: 0 2rem;
	cursor: pointer;
}

ul.social-links {
	width: calc((100vw - 84px)/2);
		width: calc((100vw - 84px) * .6);
	align-items: center;
	justify-content: center;
	order: 3;
}

ul.social-links  li.social-link {
	margin: 0 .5rem;
}


header ul.nav ul {
	display: none;
}

header ul.nav ul.visible {
	display: block;
}


.menu-toggle img {
	width: 4rem;
	margin: 0 auto;
}




footer .inner {
	display: block;
}

footer ul.nav {
display: none;
}

.footer-logo {
	margin: 0 auto;
}

header ul.nav > li {
	margin: 0;
	padding: 1rem 2rem;
	border-bottom: 1px solid white;
	position: relative;
}







/* home ///////////// */

h1 {
	font-size: 3.5rem;
}

h1 em {
	display: block;
}

h2, .contact-section h2 {
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

.home content h2 {
	margin: 0 0 1.25rem;
}

.contact-section p {
	font-size: 1.125rem;
}

.subnav {
	font-size: 1.25rem;
	padding: 1rem;
}





/* headings ////////// */


.logo-collection-slide h1 {
	font-size: 2.5rem;
}

.logo-collection-slide p {
	font-size: 1.125rem;
}


/* work thumbnails /////// */


ul.work-thumbnails li {
	width: 47vw;
	
	width: 49%; /* for some reason, the vws don't allow two "columns" on narrow desktop? */
}

.case-studies {
	padding: 2%;
}

/*

.hero-image-thumbnail {
	display: block;
}

.hero-image-banner {
	display: none;
}

*/

.project-image {
	width: 100%;
}

.project-hero img {
	width: 150%;
}

.project-details {
	display: none;
}




.font-image {
	margin: 0 0 calc(var(--sectionGap)/2);
}



body.about sidebar {
	display: none;
}





ul.work-thumbnails h2 {
  font-size: 1rem;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: white;
}


.hero h1 {
  font-size: 2rem;
  width: 100%;
}




@keyframes horizontalScroll {
	 0% {background-position: left center;}
    100% {background-position: -200vw center;}
}