@charset "utf-8";
/*******************************************
small reset
*******************************************/
* {
	box-sizing: border-box;
	margin: 0;
}
html {
	font-family: sans-serif;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}
body {
	overflow-y: scroll;
	overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 400;
}
img {
	max-width: 100%;
}
nav ul {
	padding: 0;
}
/*******************************************
small framework
*******************************************/
.flex {
	display: flex;
}
.align-center {
	align-items: center;
}
.justify-center {
	justify-content: center;
}
.space-between {
	justify-content: space-between;
}
.relative {
	position: relative;
}
/*******************************************
cursor magic
*******************************************/
.mask-layer {
	clip-path: circle(120px at 50% 50%);
	left: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	transform: translateZ(0);
	width: 100%;
	will-change: clip-path;
	z-index: 100;
}
/*******************************************
pointer
*******************************************/
h1 {
	cursor: default;
	/*pointer-events: none;*/
}
/*******************************************
vars & globals
*******************************************/
:root {
	--color-bright: #dbdbdb;
	--color-dark: #282828;
}
section {
	min-height: 60vh;
	overflow: hidden;
}
/*******************************************
z-index
*******************************************/
header {
	z-index: 1000;
}
#nav-wrap {
	z-index: 1;
}
/*******************************************
font
*******************************************/
@font-face {
	font-family: 'Segoe UI Regular';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe UI Regular'), 
	url('/assets/fonts/segoe_ui/segoe_ui.woff') format('woff');
}
@font-face {
	font-family: 'Segoe UI Bold';
	font-style: normal;
	font-weight: normal;
	src: local('Segoe UI Bold'), 
	url('/assets/fonts/segoe_ui/segoe_ui_bold.woff') format('woff');
}
@font-face {
	font-family: "pacificoregular";
	font-style: normal;
	font-weight: 400;
	src: url(/assets/fonts/pacifico/pacifico_0-webfont.woff2) format("woff2"), 
	url(/assets/fonts/pacifico/pacifico_0-webfont.woff) format("woff");
}
input,
textarea {
	font: inherit;
}
/* color */
a,
a:visited {
	color: inherit;
}
body {
	color: var(--color-dark);
}
nav,
.nav-open .logo {
	color: var(--color-bright);
}
#hero h1 span.web,
#hero-faux h1 span.web {
	/*color: #f22613;*/
	color: #be7abf;
	color: #d78dcf;
}
#hero-faux h1 {
	color: #fff;
}
/* font-family */
body {
	font-family: 'Segoe UI Regular', sans-serif;
}
.bold {
	font-family: 'Segoe UI Bold', sans-serif;
}
.logo {
	font-family: "pacificoregular", sans-serif;
}
/* font-size */
.logo {
	font-size: 25px;
}
nav a {
	font-size: 40px;
}
h1 {
	font-size: 140px;
}
/* line-height */
h1 {
	line-height: 1;
}
.logo {
	line-height: 40px;
}
/* text-decoration */
a,
a:visited {
	text-decoration: none;
}

/*******************************************
hero
*******************************************/
#hero {
	background-color: #fff;
}
#hero-faux {
	background-color: var(--color-dark); 
}
#hero h1,
#hero-faux h1 {
	padding-bottom: 44px;
}
#hero h1 span,
#hero-faux h1 span {
	display: inline-block;
}
/*******************************************
intro
*******************************************/
#intro {
	background-color: #42503e;
}
#intro h1 {
	color: #ffd4af;
}
#intro-faux {
	background-color: #ffd4af;
}
#intro-faux h1 {
	color: #545454;
}
/*******************************************
section-1
*******************************************/
#section-1 {
	background-color: #3e4550;
}
#section-1 h1 {
	color: #ffd4af;
}
#section-1-faux {
	background-color: #efefef;
}
#section-1-faux h1 {
	color: #3e4550;
}
/*******************************************
section-2
*******************************************/
#section-2 {
	background-color: #191919;
}
#section-2 h1 {
	color: #b274bb;
}
#section-2-faux {
	background-color: #b274bb;
}
#section-2-faux h1 {
	color: #e15252;
}

@media screen and (max-width: 480px) {
	h1 {
		font-size: 60px;
	}
}