/* @override 
	https://superdajk.xyz/newsite/assets/css/main.css */

	@charset "UTF-8";

	/*
	
	Theme:    Gamma
	Author:   Christopher Boutillé
	URL:      http://www.starck.io
	Twitter:  @starckio
	
	*/
	
	
	/* Inter UI
	
	@import url('https://rsms.me/inter/inter-ui.css');
	-------------------------------------------------- */
	
	/* Webfonts
	---------------------------------------------------*/
	@import url('assets/fonts/webfonts/Fabrikat.css');
	@import url('assets/fonts/webfonts/mononoki.css');
	
	
	
	/* Reset
	-------------------------------------------------- */
	*, *:before, *:after {
		margin: 0;
		padding: 0;
		border: none;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		list-style: none;
	}
	article, aside, details, figcaption, figure,
	footer, header, hgroup, main, nav, section, summary {
		display: block;
	}
	::-moz-selection {
		background: #5856D6;
		color: #fff;
	}
	::selection {
		background: #5856D6;
		color: #fff;
	}
	
	
	/* Browser Update
	-------------------------------------------------- */
	.browserupdate {
		display: block;
		margin-bottom: 3em;
		padding: 2em;
		color: #fff;
		background-color: red;
		text-align: center;
	}
	.browserupdate a {
		color: #fff;
	  border: none;
		text-decoration: underline;
	  letter-spacing: .5px;
	}
	.browserupdate a:hover {
		color: #fff;
		font-weight: 700;
	  border: none;
	  letter-spacing: normal;
	}
	
	
	/* Media
	-------------------------------------------------- */
	img {
		max-width: 100%;
		height: auto;
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.img-left {
		float: left;
	}
	.img-right {
		float: right;
	}
	figcaption {
		font-size: .75rem;
		line-height: 1.5rem;
		color: #999;
	}
	iframe { max-width: 100% }
	figure.video {
		margin: 0 0 4%;
		position: relative;
		padding-bottom: 55%;
		height: auto;
		overflow: hidden;
	}
	figure.video iframe {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	
	
	/* Links
	-------------------------------------------------- */
	a {
		color: #fff;
		text-decoration: none;
		border-bottom: 3px solid rgba(255, 255, 255, 0.2);
		transition: border .3s
	}
	a:hover {
		color: #fff;
		border-color: #fff;
	}
	
	
	/* Clearfix
	-------------------------------------------------- */
	.cf:after {
		content: "";
		display: block;
		height: 0;
		overflow: hidden;
		clear: both;
	}
	
	
	/* Site
	-------------------------------------------------- */
	html {
		height: 101%;
		font-family: 'mononoki-Regular', monospace;
		-webkit-text-size-adjust: 100%;
		-ms-text-size-adjust: 100%;
	}
	body {
		margin: 0 auto;
		font-size: 100%;
		line-height: 1.5em;
		background: #000000;
		color: #ffffff;
	  padding: 0;
	}
	.wrapper {
	  margin: 0 auto;
	  padding: 0 1.5em;
	  max-width: 60em;
	}
	
	@media screen and (min-width: 51em) {
		body {
			font-size: 130%;
		}
	}
	
	
	/* Header
	-------------------------------------------------- */
	.header {
	  background: #000000;
	  color: #fff;
	  padding: 1.5em 0;
	}
	.logo {
		display: block;
		margin: 0;
		font-size: 2em;
		word-wrap: break-word;
		text-align: left;
	}
	
	@media screen and (min-width: 51em) {
		.header {
		  padding: 3em 0;
		}
	}
	
	
	/* Headings
	-------------------------------------------------- */
	h1, h4 {
		font: 2em 'Fabrikat-Black';
		line-height: 1.3;
		font-weight: 200;
		margin-bottom: 2rem;
		word-wrap: break-word;
		color: rgb(201, 202, 201);
		background: url(topo2.png) repeat;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	h4 {
		color: rgba(255, 255, 255, 0.43);
		font-size: 1em;
		/*font-weight: 700;*/
		text-transform: uppercase;
		letter-spacing: 1px;
		font-family: 'Fabrikat-Medium';
	}
	@media screen and (min-width: 51em) {
	  h1:not(.logo) {
		  font-size: 3em;
	  }
	}
	
	
	
	/* General Typography + Main
	-------------------------------------------------- */
	hr {
		margin: 2em 0;
		height: 2px;
		background: #000;
	}
	i, em {
		font-weight: 400;
		font-style: italic;
	}
	b, strong {
		font-weight: 700;
	}
	mark {
		padding: .1em .4em .2em;
		margin: 0;
		font-style: italic;
		background: #fcf1be;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
	}
	section p,
	section figure {
		margin-bottom: 1.5em;
	}
	
	@media screen and (min-width: 51em) {
		section p,
		section figure {
			margin-bottom: 2.5em;
		}
	}
	
	
	/* Footer
	-------------------------------------------------- */
	.footer {
		padding: 0em 0 2em;
	  color: #fff;
	}
	.footer .line {
	  border-top: 1px solid rgba(255, 255, 255, 0.15);
	  padding-top: 2em;
	}
	.copyright,
	.colophon {
	  text-transform: uppercase;
	  font-size: .6em;
	  font-weight: 600;
	  letter-spacing: .1em;
	}
	.copyright {
		float: left;
	}
	.colophon {
		float: right;
	}
	.colophon a b {
		color: #f40000;
		padding-left: .25em;
	}
	
	
	/* Section Home
	-------------------------------------------------- */
	section#home {
		padding-top: 2em;
		background: #000000;
	}
	section#home h1 {
		margin: 0;
	}
	@media screen and (min-width: 51em) {
	  section#home {
		  padding-top: 6em;
	  }
	}
	
	
	/* Section Projects
	-------------------------------------------------- */
	section#projects {
		padding: 2em 0;
		background: #000000;
	}
	.grid {
	  display: grid;
	  grid-gap: 2rem;
	  grid-template-columns: repeat(1, 1fr);
	}
	.grid li {
	  list-style: none;
	}
	
	@media screen and (min-width: 30em) {
	  .grid {
		grid-template-columns: repeat(2, 1fr);
	  }
	}
	
	@media screen and (min-width: 51em) {
	  section#projects {
		  padding: 6em 0;
	  }
	}
	
	@media screen and (min-width: 70em) {
	  .grid {
		grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	  }
	}
	
	showcase {
		position: relative;
	}
	.showcase-item {
		list-style: none;
		margin-bottom: 2rem;
		position: relative;
	}
	.showcase-link {
		display: block;
		position: relative;
		padding-top: 100%;
		z-index: 0;
		border-bottom: 0 !important;
	}
	.showcase-caption {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.41);
		color: #eafded;
		opacity: 1;
		transition: opacity 0.33s ease-in-out 0s;
	}
	.showcase-title {
		margin-bottom: 0;
		text-align: left;
		padding: 1rem 1.5rem;
		/* Vertically center the caption */
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translateY(-50%) translateX(-50%);
		transform: translateY(-50%) translateX(-50%);
		font: 2.75rem Fabrikat-Bold;
		background-color: #000000;
		mix-blend-mode: hard-light;
		color: #fffdaf;
		text-transform: uppercase;
	}
	.showcase-image {
		display: block;
		position: absolute;
		left: 0;
		top: 0;
	}
	.showcase-link:hover .showcase-caption,
	.showcase-link:focus .showcase-caption {
		opacity: 0;
		transition: opacity 0.33s ease-in-out 0s;
	}
	
	@media (any-hover: none) {
		.showcase-caption {
			/* The media query, enclosing these rules matches only
				 touch-screen devices that do not support hover due
				 to the lack of a pointing device like a mouse.
				 It does not work in all mobile browsers, but
				 progressively enhances the experience on supported
				 devices. Tested in Safari (iOS) 9.3 */
			opacity: 1.0;
			/* Reset will-change property to keep it from eating
				 up unneccessary resources on touch-only devices */
			will-change: auto;
		}
		.showcase-title {
			font-size: .85em;
		}
	}
	
	@media screen and (min-width: 51em) {
	  .showcase-title {
		  font-size: 2.25rem;
	  }
	}
	
	
	/* Section About
	-------------------------------------------------- */
	section#about {
		padding: 0 0 2em;
	  background: #000000;
	}
	section#about .line {
		border-top: 1px solid rgba(255, 255, 255, 0.5);
		padding-top: 2em;
	}
	@media screen and (min-width: 51em) {
	  section#about {
		  padding: 0 0 6em;
	  }
	  section#about .line {
		  padding-top: 6em;
	  }
	  section#about figure {
		  width: 30%;
		float: left;
	  }
	  section#about .text {
		  width: 70%;
		float: right;
		padding-left: 5%;
	  }
	}
	
	
	/* Section contact
	-------------------------------------------------- */
	section#contact {
	  padding: 2em 0;
	  color: #fff;
	}
	@media screen and (min-width: 51em) {
	  section#contact {
		padding: 6em 0;
	  }
	}
	.field {
	  margin: 1em 0;
	}
	label {
	  display: block;
	  margin-top: 2em;
	  margin-bottom: 0.5em;
	  color: #fff;
	  font-size: .9rem;
	  font-weight: 500;
	  text-transform: uppercase;
	  letter-spacing: 2px;
	}
	abbr {
		color: rgba(255, 255, 255, 0.4);
		font-weight: 700;
		text-decoration: none;
		border: none;
		outline: none;
	}
	input {
	  width: 100%;
	  padding-bottom: 0.5em;
	  font-size: 2rem;
	  color: #fff;
	  background: transparent;
	  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	  outline: none;
	}
	textarea {
	  width: 100%;
	  height: 170px;
	  padding-bottom: 0.5em;
	  font-size: 2rem;
	  line-height: 2.5rem;
	  color: #fff;
	  background: transparent;
	  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	  outline: none;
	}
	input:focus, textarea:focus {
	  border-bottom: 1px solid #fff;
	  box-shadow: 0 1px 0 #fff;
	}
	button {
	  display: inline-block;
	  border: none;
	  font-size: 2rem;
	  padding: .7em 1em;
	  width: 100%;
	  background: url(topo2.png);
	background-size: cover;
	  color: #000;
	  font-weight: 400;
	  margin: 1.5rem 0 0;
	  font-family: 'Fabrikat-Black';
	}
	button:hover, button:focus {
	  opacity: 0.7;
	  cursor: pointer;
	}
	button:active {
	  opacity: 1;
	}
	.success,
	.error {
	  padding: 1em;
	  margin-bottom: 0.75rem;
	  color: #fff;
	}
	.success {
	  background-color: #4ab260;
	}
	.error {
	  background-color: #c9514f;
	}
	
	
	/* Section error
	-------------------------------------------------- */
	section#error {
		padding: 2em 0;
		background: #fff;
	}
	section#error h1 {
		margin: 0;
	}
	section#error p:last-of-type {
		margin: 0;
	}
	@media screen and (min-width: 51em) {
	  section#error {
		  padding: 6em 0;
	  }
	}