::selection { background: rgba(192,255,0,0.75); }
::-moz-selection { background: rgba(192,255,0,0.75); }


html {background: none;}
body {background: none;}

section {background-color: #fff;	}
section.notwhite {background-color: #efefed;}



header {
	height: 400px;
    position: relative;
}

header video {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.header-content h1 {
	position: absolute;
	right: 12%;
	bottom: 7%;
	color:  rgba(255,255,255,1);
	font-size: 120px;
	line-height: 105px;
	letter-spacing: -0.075em;
	text-align: right;
}

.header-content .return {
	position: absolute;
	margin: 6% 12% 0 6%;
	padding: 0;
	margin-top: calc(6% - 14.63px);
}

h4 a {
	color: #fff;
}


.full-col {
	padding: 6% 12%;
	}


.full-col {
	padding-bottom: 3%;
}

section#first {
	padding-top: 3%;
}

section#last {
	padding-bottom: 6%;
}


.dark {
	background: #999;
	border: 1px solid #dcdcdc;
}

.dark video {
	opacity: .95;
}


a.tag {
	display: inline;
	background: rgba(0,0,0,0.15);
	margin-right: 2px;
	padding: 3px 6px;
	font-size: 13px;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	transition: all .1s ease;
	cursor: pointer;

}

a.tag:hover {
	background: #222;
	color: #fff ;
}


p.large.desc {
	width: 87%;
	max-width: 840px;
	padding-top: 3%;
	margin-bottom: 10px;
}



@media only screen and (min-width: 681px) and (max-width: 10000px) {
	.show-200to680 {
		display: none !important;
	}
}


@media only screen and (min-width: 200px) and (max-width: 680px) {
	.hide-200to680 {
		display: none !important;
	}
	.show-200to680 {
		display: inline-block !important;
	}
}

@media only screen and (min-width: 681px) and (max-width: 920px) {
	p.large.desc {
		width: 88%;
	}
		section {
		padding: 0 0 3% 0;
	}
}



@media only screen and (min-width: 375px) and (max-width: 680px) {
	p.large.desc {
		width: 95%;
	}
	section {
		padding: 3% 0 1% 0;
	}
}


@media only screen and (min-width: 551px) and (max-width: 768px) {
	.full-col {
		padding: 6%;
	}
	header {
		height: 350px;
	}
	.header-content h1 {
		font-size: 90px;
		line-height: 85px;
		letter-spacing: -0.06em;
	}
	.header-content h1 {
		right: 6%;
	}
	section#first {
		padding-top: 3%;
	}
}


@media only screen and (min-width: 200px) and (max-width: 550px) {
	.full-col {
		padding: 6%;
	}
	header {
		height: 290px;
	}
	.header-content h1 {
		font-size: 65px;
		line-height: 62px;
		letter-spacing: -0.06em;
	}
	.header-content h1 {
		right: 6%;
	}
	section#first {
		padding-top: 6%;
	}
	.header-content .return {
		margin: 6% 6% 0 6%;
		padding: 0.25% 0 5% 0;
	}
}


@media only screen and (min-width: 200px) and (max-width: 599px) {
	.header-content .return {
		margin: 6% 6% 0 6%;
		padding: 0.25% 0 5% 0;
	}
}


@media only screen and (min-width: 200px) and (max-width: 374px) {
	section {
		padding: 3% 0 6% 0;
	}
	.header-content h1 {
		font-size: 55px;
		line-height: 52px;
		letter-spacing: -0.06em;
	}

}


@media only screen and (min-width: 200px) and (max-width: 375px) {
	p.large.desc {
		width: 100%;
	}
	section {
		padding: 6% 0 9% 0;
	}

}


@media only screen and (min-width: 640px) and (max-width: 10000px) {
	.prev {
		grid-column: start / 12;
		margin-bottom: 0;
	}

	.next {
		grid-column: 17 / end;
		margin-bottom: 0;
	}
}


@media only screen and (min-width: 200px) and (max-width: 639px) {
	.prev {
		display: none !important;
	}
	.next {
		grid-column: start / end;
		margin-bottom: 0;
	}
}


@media only screen and (min-width: 200px) and (max-width: 340px) {
	.prevnext a {
		font-size: 45px;
		line-height: 48px;
	}
}