@font-face {
    font-family:"Self Modern";
    src:url("../fonts/bretagne_self-modern_regular.woff2") format("woff2"),
    url("../fonts/bretagne_self-modern_regular.woff") format("woff"),
    url("../fonts/bretagne_self-modern_regular.otf") format("opentype");
    font-style:normal;font-weight:400;
}

@font-face {
    font-family:"Self Modern Italic";
    src:url("../fonts/bretagne_self-modern_italic.woff2") format("woff2"),
    url("../fonts/bretagne_self-modern_italic.woff") format("woff"),
    url("../fonts/bretagne_self-modern_italic.otf") format("opentype");
    font-style:normal;font-weight:400;
}     

*,
*:after, 
*:before {
	margin: 0;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-family: "Self Modern", Times New Roman, serif;
}

*::selection {
  background: transparent;
  color: #c15d36;
}

body {
	background-color: #465D6D;
}

a {
	text-decoration: none;
	color: inherit;
}

.alpha {
	font-size: 7.5vw;
	line-height: 1;
}

.beta {
	font-size: 2.5vw;
}

.gamma {
	font-size: 1.5vw;
}

.zeta {
	font-size: 1.15vw;
}

.sans {
	font-size: 1.5vw;
	font-family: 'HelveticaNeueLTStd-LtEx', Helvetica, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.07rem;
}

.text a,
.footer a {
	font-family: "Self Modern Italic", Times New Roman, serif;
	font-style: normal;
	color: inherit;
	transition: color 0.3s ease-in-out, border-bottom 0.2s ease-in-out;
	border-bottom: 1px solid #fff;
}

.text a:hover,
.footer a:hover {
	color: #c15d36;
	border-bottom: 1px solid transparent;
}

i {
	font-family: "Self Modern Italic", Times New Roman, serif;
	font-style: italic;	
}

.pattern {
	position: absolute;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.shape-1 {
	width: 14%;
	position: absolute;
	top: 1%;
	left: 0;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-2 {
	width: 12%;
	position: absolute;
	top: 80%;
	right: 50%;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-3 {
	width: 12%;
	position: absolute;
	top: 55%;
	left: 12%;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-4 {
	width: 12%;
	position: absolute;
	top: 5%;
	right: 35%;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-5 {
	width: 10%;
	position: absolute;
	top: 35%;
	right: 29%;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-6 {
	width: 15%;
	position: absolute;
	top: -10%;
	left: 25%;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-7 {
	width: 15%;
	position: absolute;
	top: 65%;
	right: 0;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-8 {
	width: 12%;
	position: absolute;
	top: 0;
	right: 0;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.shape-9 {
	width: 12%;
	position: absolute;
	top: 75%;
	right: 22%;
	transition: transform 0.2s ease-in-out;
	z-index: 1;
}

.text {
	padding: 4%;
	color: #fff;
	z-index: -1;
	min-height: 75vh;
}

.intro {
	min-height: 90vh;
}

.intro img:hover {
	mix-blend-mode: lighten;
}

.shape-1:hover
.shape-2:hover,
.shape-3:hover,
.shape-4:hover,
.shape-5:hover,
.shape-6:hover,
.shape-7:hover,
.shape-8:hover,
.shape-9:hover {
	transform: scale(1.2) rotate(2deg);
}

.text-sm {
	color: #fff;
	display: flex;
	padding: 7% 2% 2%;
}

.text-sm div {
	width: 33.33333%;
	padding: 0 1%;
}

.header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	padding: 2%;
}

.header a {
	color: #fff;
}

.wrapper {
	transition: background .5s ease;
}

.project {
	padding-top: 10%;
	margin-bottom: 10%;
}

.sticky {
	position: sticky;
	top: 0;
	padding: 2%;
	z-index: 99;
}

.one-up {
	padding: 1%;
	width: 100%;
}

.one-up img,
.one-up video  {
	width: 100%;
}

.two-up {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1%;
	width: 100%;
}

.two-up div {
	padding: 1%;
	width: 50%;
}

.two-up div img,
.two-up div video,
.two-up div div {
	width: 100%;
}

.three-up {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 1%;
	width: 100%;
}

.three-up div {
	padding: 1%;
	width: 33.333%;
}

.three-up div img,
.three-up div video {
	width: 100%;
}

.third {
	width: 66.666%;
}

.third img,
.third video, 
.third div {
	width: 100%;
}

.align-right {
	margin-left: 22%;
}

.spacer-s {
	width: 100%;
	padding-bottom: 5%;
}

.spacer-m {
	width: 100%;
	padding-bottom: 10%;
}

.spacer-l {
	width: 100%;
	padding-bottom: 20%;
}

.pad-xs {
	padding: 3%;
}

.pad-s {
	padding: 5%;
}

.pad-m {
	padding: 10%;
}

.pad-l {
	padding: 20%;
}

.caption {
	display: block;
	padding-top: 0.5%;
	text-transform: none;
	letter-spacing: 0;
}

.footer {
	display: flex;
	align-items: flex-end;
	padding: 20% 2% 2%;
	margin-top: 35vh;
	color: #fff;
}

.footer a {
	color: inherit;
	border-bottom: 1px solid #fff;

}

.two-third {
	width: 66.666%;
	padding: 0 1%;
}

.one-third {
	width: 33.333%;
	padding: 0 1%;
}

#devacurl,
#dogtv {
	color: #000 !important;
}

#hermit {
	color: #ec9f79 !important;
}

#collective-voice,
#new-bellweathers,
#minidoc,
#blkopl,
#absolut,
#going-through-it,
#reel {
	color: #fff !important;
}


@media only screen and (max-width : 800px) {

	.shape-1
	.shape-2,
	.shape-3,
	.shape-4,
	.shape-5,
	.shape-6,
	.shape-7,
	.shape-8,
	.shape-9 {
		width: 21%;
	}

	.shape-2 {
		display: none;
	}

	.shape-3 {
		left: 6%;
	}

	.shape-4 {
		top: 15%;
	}

	.shape-7 {
		width: 28%;
	}

	.shape-9 {
		right: 52%;
	}

	.alpha {
		font-size: 9.75vw;
		line-height: 1.1;
	}

	.beta {
		font-size: 5.5vw;
	}

	.gamma {
		font-size: 3.5vw;
	}

	.zeta {
		font-size: 2.5vw;
	}

	.text {
		align-items: center;
		height: 70vh;
		flex-wrap: wrap;
		hyphens: none;
		padding: 3%;
	}

	.text-sm {
		font-size: 6vw;
		flex-direction: column;
		padding: 3%;
	}

	.text-sm div {
		width: 100%;
		padding: 5% 0;
	}

	.sticky {
		position: relative;
	}

	.footer {
		flex-direction: column;
	}

	.two-up,
	.three-up {
		flex-direction: column;
		padding: 0;
	}

	.one-up div,
	.two-up div,
	.three-up div {
		width: 100%;
		padding: 0;
	}

	.third {
		width: 100%;
	}

	.align-right {
		margin: 0;
	}

	.pad-xs,
	.pad-s,
	.pad-m,
	.pad-l,
	.third div,
	.two-up div {
		padding: 4%;
	}

	.pad-xs img,
	.pad-xs video,
	.pad-s img,
	.pad-s video,
	.pad-m img,
	.pad-m video,
	.pad-l img,
	.pad-l video {
		padding: 0;
	}

	.two-third,
	.one-third {
		width: 100%;
	}

	.one-third {
		padding-top: 9%;
	}
}