/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */*{box-sizing:border-box}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none;max-width:100%}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*! HTML5 Boilerplate v7.3.0 | MIT License | https://html5boilerplate.com/ */::-moz-selection{background:#b3d4fc;text-shadow:none}::selection{background:#b3d4fc;text-shadow:none}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}audio,canvas,iframe,img,svg,video{vertical-align:middle}fieldset{border:0;margin:0;padding:0}textarea{resize:vertical}.browserupgrade{margin:.2em 0;background:#ccc;color:inherit;padding:.2em 0}.hidden{display:none!important}.sr-only{border:0;clip:rect(0,0,0,0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sr-only.focusable:active,.sr-only.focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;white-space:inherit;width:auto}.invisible{visibility:hidden}.clearfix:after,.clearfix:before{content:" ";display:table}.clearfix:after{clear:both}@media print{*,:after,:before{background:0 0!important;color:#000!important;box-shadow:none!important;text-shadow:none!important}a,a:visited{text-decoration:underline}a[href]:after{content:" (" attr(href) ")"}abbr[title]:after{content:" (" attr(title) ")"}a[href^="#"]:after,a[href^="javascript:"]:after{content:""}pre{white-space:pre-wrap!important}blockquote,pre{border:1px solid #999;page-break-inside:avoid}thead{display:table-header-group}img,tr{page-break-inside:avoid}h2,h3,p{orphans:3;widows:3}h2,h3{page-break-after:avoid}}
/*! CUSTOM STYLES */


/*---------- GENERAL ----------*/

:root {
	--bghex: #171923;
	--shadow: 0 0 50px #000;
}

html {font-size: 10px;}
body {background: #0c0d12 url(/img/bkg.png); color: rgba(255,255,255,.5); font-family: Montserrat, sans-serif; font-size: 1.6rem; line-height: 1.5;}

h1, h2, h3 {font-size: inherit; font-weight: 600; text-transform: uppercase; letter-spacing: .15em; color: rgba(255,255,255,.8);}
a:not([class]) {color: inherit;}
a:not([class]):hover {color: #fff;}
a.button {position: relative; display: inline-block; padding: 1.25em 2.5em; background: none; border: 2px solid rgba(255,255,255,.1); color: #fff; font-size: 1.2rem; font-weight: 600; letter-spacing: .05em; text-align: center; text-decoration: none; text-transform: uppercase; border-radius: 2px; overflow: hidden;}
a.button:hover {background: rgba(255,255,255,.05);}

#preload {display: none;}
.text-center {text-align: center;}
.large {font-size: 1.1em;}


/*---------- SECTIONS, HEADLINES, LISTS ----------*/

section {padding: calc(10vw + 5rem) 8vw 10vw;}
.container {width: 100%; max-width: 100rem; margin: 0 auto;}
.container > :first-child {margin-top: 0;}
.container > :last-child {margin-bottom: 0;}

section:not(#about) h2 {font-size: 3rem; color: #fff; text-align: center;}
section:not(#about) ul {margin: 1em 0 2em; padding: 0; list-style: none;}
section:not(#about) li {position: relative; margin: 0 0 1em 1em; padding: 0; color: rgba(255,255,255,.5);}
section:not(#about) li:before {content: ''; position: absolute; left: -.8em; top: .6em; width: .25em; height: .25em; background: rgba(255,255,255,.5); border-radius: 5px;}

@media (min-width: 560px) {
	section:not(#about) ul.cols-2 {column-count: 2;}
	section:not(#about) ul.cols-3 {column-count: 3;}
	section:not(#about) ul.[class*="cols-"] li {break-inside: avoid;}
}

@media (min-width: 1025px) {
	section {padding: 7vw 10vw;}
}


/*---------- ABOUT ----------*/

#about {background: var(--bghex); text-transform: uppercase; text-align: center; z-index: 2;}

#about ul, #about li {margin: 0; padding: 0; list-style: none;}
#about ul {display: flex; flex-wrap: wrap; justify-content: center; max-width: 130rem; margin: 3rem auto 0; font-size: 1.2rem;}
#about li {letter-spacing: .1em;}
#about li:not(:last-child):after {content: '\2022'; padding: 0 1em;}

#about nav ul {margin: 0 !important; font-weight: 600; color: rgba(255,255,255,.8); font-size: 1.4rem;}
#about nav a {text-decoration: none; margin: -.25em -.5em; padding: .25em .5em; border: 2px solid transparent;}
#about nav a:hover {border-color: rgba(255,255,255,.2);}

header {position: fixed; left: 0; top: 0; width: 100%; padding: 0 2rem; background: var(--bghex); box-shadow: var(--shadow); z-index: 100;}
header .container {height: 5rem; display: flex; align-items: center; justify-content: space-between;}
#logo {display: block; width: 200px;}
#logo span {position: absolute; left: -100vw; top: -100vh;}
#logo:after {content: ''; position: relative; display: block; height: 0; padding-bottom: 10%; background: url(/img/logo.svg); background-size: 100% auto; z-index: 2;}

#tagline {margin-top: 3vw; text-align: center;}
#tagline span {display: block;}
#tagline span:first-child {font-size: 1.25em; margin-bottom: 1em;}
#tagline span:last-child {font-weight: 400; text-transform: none; font-size: 1.4rem;}

@media (max-width: 559px) {
	nav a {display: inline-block; margin-top: 0; margin-bottom: 0;}
}
@media (max-width: 767px) {
	#menu-icon {content: ''; position: absolute; top: 0; right: 0; width: 50px; height: 50px; cursor: pointer; background: url(/img/menu.svg) center center no-repeat; background-size: 50px 50px;}
	#about nav ul {position: fixed; top: 5rem; right: -100%; bottom: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(12,13,18,.97) url(/img/bkg.png); font-size: 1.8rem; transition: right .5s;}
	#about nav ul.show {right: 0%;}
	#about nav li {min-width: 20rem;}
	#about nav li:not(:last-child) {border-bottom: 2px solid rgba(255,255,255,.2);}
	#about nav li:after {display: none;}
	#about nav a {display: block; margin: 0; padding: 2em; border: 0;}
}
@media (max-width: 1024px) {
	#about #services li:not(:last-child):after {padding: 0 .5em;}
}
@media (min-width: 1200px) {
	#tagline span:first-child {font-size: 1.75em; margin-bottom: .5em;}
}


/*---------- PORTFOLIO ----------*/

#portfolio section {border-top: 2px solid transparent;}
#portfolio section + section {border-color: rgba(255,255,255,.02);}

.video {position: relative; height: 0; padding-bottom: 56.25%; box-shadow: var(--shadow);}
.video iframe {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.image {padding: 50px; box-shadow: var(--shadow);}
.video + *, .image + * {margin-top: 5rem;}

@media (min-width: 768px) {
	.image {padding: 100px;}
}


/*---------- RESUME ----------*/

#resume {background: rgba(255,255,255,.01);}
#resume h3 {margin-top: 7rem;}


/*---------- CONTACT ----------*/

#contact {min-height: 100vh; display: flex; flex-direction: column; justify-content: center;}

form {width: 100%; max-width: 60rem; margin: 0 auto;}
.field {margin: 1em 0; border: 2px solid rgba(255,255,255,.2);}

input:not([type="checkbox"]):not([type="radio"]), select, textarea, button {position: relative; display: block; width: 100%; padding: 1rem; background: rgba(255,255,255,.1); font-size: 1.8rem; font-weight: inherit; line-height: inherit; border: 0; color: #fff;}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus, button:focus {outline: none; background: rgba(255,255,255,.2);}
textarea {height: 10rem;}
button, input[type="button"], input[type="submit"] {text-transform: uppercase; font-weight: 600 !important; letter-spacing: .35em; cursor: pointer;}

label {display: block; padding: 1rem; text-transform: uppercase; letter-spacing: .35em; font-size: 1.2rem; font-weight: 600;}
input[type="checkbox"] + label, input[type="radio"] + label {display: inline; margin: 0;}

.error div {display: none; background: rgba(255,255,255,.6); font-weight: 600; font-size: 1.4rem; padding: 1rem; color: #0c0d12;}
.message div {display: none; background: #fff; color: #0c0d12; font-weight: 600; padding: 1.5rem; text-align: center; font-size: 1.3rem; text-transform: uppercase;}

.spinner {position: absolute; left: 1rem; top: calc(50% - 10px); border-radius: 50%; border: 5px solid rgba(255,255,255,.3); border-top-color: transparent; width: 20px; height: 20px; animation: spin 2s linear infinite;}
@keyframes spin {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}