:root {
    --background-color: rgba(255, 255, 255, 1);
    --text-color: rgba(0, 0, 0, 1);
    --border-color: rgba(0, 0, 0, 1);
    --link-color: #B82121;
    --visited-color: #B82121;
    --target-color: rgba(255, 248, 151, 1);

    --font-size: 1rem;
    --h1: 2.4rem;
    --h2: 2rem;
    --font-line-height: 1.8rem;
    --font-weight: 300;
    
    --section-header-margin: 0 8vw 32px 8vw;
	
	--client-logo-margin: 0 2vw 32px 2vw;
}


html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* Layout */

body {
/*     background-color: var(--background-color); */
    font-family: "Helvetica", sans-serif;
    font-size: var(--font-size);
    font-weight: var(--font-weight);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

.header {
	margin-top: 2vw;
	margin-bottom: 7vw;
/* 	margin-bottom: calc(16vh * 1.25); */
}
.header-logo {
	margin: 0 0 16px 0;
	display: inline-block;
	max-width: 35vw;
}
.header-text {
	display: inline-block;
	margin-left: 16px;
	padding: 2px;
	background: white;
}
.hero-content {
	margin: auto;
	padding: 16px;
	text-align: center;
	max-width: 528px;
	background: rgba(255,255,255,0.85);
	align-self: center;
}
.section-header {
	border-bottom: 1px solid;
	border-color: black;
	margin-bottom: 16px;
	padding-bottom: 32px;
}
.section-title {
	display: inline;
	float: left;
}
.nav-top {
	display: none;
}
.nav {
	display: inline;
	float: right;
}
.nav-item {
	display: inline;
	margin-left: 4vw;
}

.nav-item:hover svg path,
.nav-item:hover {
  fill:red;
  color:red;
}


/* Grid */

.area1 { /* Header and Hero */
	grid-area: area1;
	background: url("assets/herobackground.png"); 
	background-repeat: repeat-x;
	background-position: center bottom;
	background-size: 192px 334px;
	height: 100vh;
	margin-bottom: 48px;
	margin-top: 16px;
}
.area14 { /* Clients Section Header */
	grid-area: area14;
	margin: var(--section-header-margin);
}
.area15 { /* Thayer Investment Partners Client Logo */
	grid-area: area15;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area16 { /* Alo Index Client Logo */
	grid-area: area16;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area17 { /* LO3 Energy Client Logo */
	grid-area: area17;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area18 { /* Traxo Client Logo */
	grid-area: area18;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area19 { /* AdVini Client Logo */
	grid-area: area19;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area20 { /* PBOT Client Logo */
	grid-area: area20;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area21 { /* Holiday Extras Client Logo */
	grid-area: area21;
	margin: var(--client-logo-margin);
	text-align: center;
}
.area25 { /* Contact Us Section Header */
	grid-area: area25;
	margin: var(--section-header-margin);
}
.area26 { /* Contact Us CTA */
	grid-area: area26;
	margin: 0 8vw 32px 8vw;
}
.area27 { /* Footer */
	grid-area: area27;
	margin: 0 8vw 32px 8vw;
}


.clients {
  padding: 50px 20px;
  text-align: center;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(192px, auto));
  gap: 128px;
  justify-content: center;
  align-items: center;
/*   place-items: center; */
/*   max-width: 1200px; */
  margin: 0 auto;
}

.clients-grid img {
  max-width: 192px;
  max-height: 192px;
  height: auto;
  object-fit: contain;
  padding: 10px;
}



/* Mobile widths default */

.wrapper {
	font-size: var(--font-size);
	display: grid;
	grid-gap: 32px;
	grid-template-areas: 
	"area1"
	"area14"
	"area15"
	"area25"
	"area26"
	"area27";
}



/* iPhone SE widths */

@media only screen 
  and (min-width: 320px) 
  and (-webkit-min-device-pixel-ratio: 1) {

	.area2 { /* Most Recent Section Header */
		grid-area: area2;
		margin: 4vw;
	}

	.area14 { /* Clients Section Header */
		grid-area: area14;
		margin: 4vw;
	}
	
	.area25 { /* Contact Us Section Header */
		grid-area: area25;
		margin: 4vw;
	}

}



/* Desktop widths */

@media only screen 
  and (min-width: 1025px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {
	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 64px;
		grid-template-areas: 
		"area1	area1"
		"area14	area14"
		"area15	area15"
		"area25	area25"
		"area26	area26"
		"area27	area27";
	}
	h1 {
		font-weight: 700;
		font-size: 3rem;
		text-align: center;
		margin: 0;
	}
	.header-logo {
		max-width: 235px;
		margin-right: 5vw;
		margin-left: 3vw;
		display: inline-block;
		vertical-align: top;
		padding: 0;
	}
	.header-text {
		display: inline-block;
		vertical-align: top;
	}
	.nav-top {
		display: inline-block;
		float: right;
		margin-right: 3vw;
		vertical-align: top;
		padding-top: 18px;
	}
	.nav-item {
		display: inline;
		margin-left: 2vw;
	}
	.hero-content {
		margin: auto;
		padding: 24px;
		text-align: center;
		max-width: 528px;
		background: rgba(255,255,255,0.85);
	}
	.area1 { /* Header and Hero */
		grid-area: area1;
		background: url("assets/herobackground.png"); 
		background-repeat: repeat-x;
		background-position: center bottom;
		background-size: 192px 334px;
		height: 100vh;
		margin-bottom: 32px;
	}
	.area14 { /* Clients Section Header */
		grid-area: area14;
		margin: var(--section-header-margin);
	}
	.area15 { /* Logos */
		grid-area: area15;
		margin: var(--section-header-margin);
	}
	.area25 { /* Contact Us Section Header */
		grid-area: area25;
		margin: var(--section-header-margin);
	}
	.area26 { /* Contact Us CTA */
		grid-area: area26;
		margin: 0 8vw 32px 8vw;
	}
	.area27 { /* Footer */
		grid-area: area27;
		margin: 0 8vw 32px 8vw;
	}
}


/* Type */

body,
h1,
h2,
h3,
p,
input,
textarea,
button {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.img-caption {
	max-width: 528px;
	padding-left: 16px;
	padding-right: 16px;
}

.img-caption1column {
	max-width: 624px;
	margin: auto;
}

.img-caption-subtitle {
	font-weight: bold;
	color: black;
}

.img-caption-copy {
	font-weight: 300;
	color: #9B9B9B;
}

p {
	line-height: var(--font-line-height);
	font-weight: 300;
	font-size: var(--font-size);
}

br {
	margin-bottom:1.5em;
}


/* Headings */

h1 {
	font-weight: 700;
	font-size: var(--h1);
	text-align: center;
	margin: 0;
}
h2 {
	font-size: var(--h2);
    font-weight: 600;
    margin: 0;
}
h3 {
	font-size: var(--font-size);
	font-weight: 600;
	margin: 0;
}
h4 {
	font-size: var(--font-size);
	font-weight: 600;
	margin: 0;
	color: #9B9B9B;
}


/* Dividers */

/*
hr {
    margin: calc(var(--margin) * 2) 0;
    padding: 0;
    border: none;
    height: 1px;
    background: var(--border-color);
}
*/



/* Lists */

ul,
ol {
/*     margin: calc(var(--margin) / 2) 0; */
	list-style-type: square;
	line-height: var(--font-line-height);
	font-size: var(--font-size);
	font-weight: 300;
	padding-left: 18px;
	margin: 8px 0 8px 0;
	list-style-image: url('assets/redsquare.png');
}



/* Links */

a {
	color: #B82121;
	text-decoration: none;
	cursor: pointer;
	font-weight: 600;
	font-size: var(--font-size);
}

a:hover {
	color: #FF0000;
}

a.anchor {
    display: block;
    position: relative;
    top: -48px;
    visibility: hidden;
}

.button {
	background-color: #B82121;
	border-radius: 8px;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: var(--font-size);
	font-weight: 600;
	width: 256px;
	height: 48px;
}

img.icon {
	fill: white;
	display: inline;
	max-width: 12px;
	vertical-align: inherit;
	transform: rotate(228deg);
}

.icon {
	display: inline-block;
	width: 12px;
	height: 12px;
	background-size: cover;
}

.arrow-down {
	background-image: url("assets/navarrow.svg");
}

.arrow-down:hover {
	background-image: url("assets/navarrow-hover.svg");
}

.arrow-up {
	background-image: url("assets/navarrow.svg");
	transform: rotate(180deg);
}

.arrow-up:hover {
	background-image: url("assets/navarrow-hover.svg");
	transform: rotate(180deg);
}

/*
svg:hover {
  fill: red;
}
*/

/* Images */

img {
	width: 100%;
	height: auto;
}

.video {
	box-shadow: 0 6px 14px 0 rgba(153,153,153,0.50);
	max-width: 624px;
}

.player {
	max-width: 624px;
	max-height: 100%;
	position: relative;
	overflow: hidden;
}

.player__video {
	max-width: 100%;
	max-height: 100%;
}

.player__button {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0;
	cursor: pointer;
}


.player__button::before {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0;
	cursor: pointer;
}

.player__button.playing::before {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0;
	cursor: pointer;
}


.toggle::before {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0;
	cursor: pointer;
}

.toggle.playing::before {
	position: absolute;
	height: 100%;
	width: 100%;
	border: 0;
	cursor: pointer;
}

.player__controls {
	
}