@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/v2.0 | 20110126License: none (public domain)*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	font-size: 3.9vw;
	line-height: 1.4;
}
hr {
	display: block;
	height: 1px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-right-color: currentcolor;
	border-bottom-color: currentcolor;
	border-left-color: currentcolor;
	-moz-border-top-colors: none;
	border-top-colors: none;
	-moz-border-right-colors: none;
	border-right-colors: none;
	-moz-border-bottom-colors: none;
	border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-left-colors: none;
	border-image-source: none;
	border-image-slice: 100% 100% 100% 100%;
	border-image-width: 1 1 1 1;
	border-image-outset: 0 0 0 0;
	border-image-repeat: stretch stretch;
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #cccccc;
	margin-top: 1em;
	margin-right: 0px;
	margin-bottom: 1em;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
audio, canvas, iframe, img, svg, video {
	vertical-align: middle;
}
fieldset {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-color: currentcolor;
	border-right-color: currentcolor;
	border-bottom-color: currentcolor;
	border-left-color: currentcolor;
	-moz-border-top-colors: none;
	border-top-colors: none;
	-moz-border-right-colors: none;
	border-right-colors: none;
	-moz-border-bottom-colors: none;
	border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-left-colors: none;
	border-image-source: none;
	border-image-slice: 100% 100% 100% 100%;
	border-image-width: 1 1 1 1;
	border-image-outset: 0 0 0 0;
	border-image-repeat: stretch stretch;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
textarea {
	resize: vertical;
}
.browserupgrade {
	margin-top: 0.2em;
	margin-right: 0px;
	margin-bottom: 0.2em;
	margin-left: 0px;
	background-color: #000000;
	background-image: none;
	background-repeat: repeat;
	background-attachment: scroll;
	background-clip: border-box;
	background-origin: padding-box;
	background-position-x: 0%;
	background-position-y: 0%;
	background-size: auto auto;
	color: black;
	padding-top: 0.2em;
	padding-right: 0px;
	padding-bottom: 0.2em;
	padding-left: 0px;
}
html, body {
	background-color: #f1f1f1;
	font-family: 'Raleway', sans-serif;
	scroll-behavior: smooth;
	font-weight: 400;
	height: 100%;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin: inherit
}
*, ::before, ::after {
	box-sizing: border-box;
}
body, header, section, footer {
	display: grid;
	-webkit-grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 2fr;
	box-sizing: border-box;
}
body {
	display: grid;
	-webkit-grid-template-rows: 8rem 1fr 8em;
	grid-template-rows: 8rem 1fr 8em;
}
header {
	height: 7rem;
	z-index: 1;
	position: fixed;
	top: 0px;
	width:100vw;
	display: grid;
	transition: opacity 1s ease-in-out;
	-webkit-grid-template-rows: 1fr 4fr;
	grid-template-rows: 1fr 4fr;
}
section {
	z-index: 0;
	display: grid;
	-webkit-grid-template-rows: 1fr 4fr;
	grid-template-rows: 1fr 4fr;
	-webkit-grid-column-start: 1;
	grid-column-start: 1;
	-webkit-grid-column-end: 14;
	grid-column-end: 14;
	-webkit-grid-row-start: 2;
	grid-row-start: 2;
	-webkit-grid-row-end: 3;
	grid-row-end: 3;
}
#logo_animation {
	display: grid;
	-webkit-grid-column-start: 4;
	grid-column-start: 4;
	-webkit-grid-column-end: 11;
	grid-column-end: 11;
}
#logo_animation img {
	width:103%;
	justify-self: center;
	align-self: center;
}
#menu_logo, #menu_logo_top {
	display: grid;
	-webkit-grid-column-start: 4;
	grid-column-start: 4;
	-webkit-grid-column-end: 11;
	grid-column-end: 11;
	-webkit-grid-row-start: 1;
	-webkit-grid-row-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
}
#menu_logo img, #menu_logo_top img {
	transition: all 2.5s ease-in-out;
	width:103%;
	justify-self: center;
	align-self: center;
}
#menu_logo_top a:hover{
	transition: opacity 2.5s ease-in-out;
	opacity: 0;
}
footer a, header a, #menu_logo a, #menu_logo_top a, #works-container_hover a{
	transition: all 1s ease-in;
}
footer a:visited, header a:visited {
	opacity: 1;
}
footer {
	background-color: f1f1f1;
	z-index: 1;
	position: fixed;
	bottom: 0px;
	width:100vw;
	display: grid;
	-webkit-grid-column-start: 1;
	grid-column-start: 1;
	-webkit-grid-column-end: 14;
	grid-column-end: 14;
	-webkit-grid-row-start: 3;
	grid-row-start: 3;
	-webkit-grid-row-end: 3;
	grid-row-end: 3;
}
#box-left-top, #box-right-top, #box-left-bottom, #box-right-bottom {
	opacity: 0.9;
}
#box-right-top, #box-right-bottom {
	justify-self: end;
}
#box-left-bottom, #box-right-bottom {
	align-self: end;
	margin-bottom: 1.7rem;
}
#box-left-bottom img, #box-right-top img {
	width: 0.7rem;
}
#box-left-top img, #box-right-bottom img {
	height: 0.7rem;
}
/*#box-left-bottom img:hover, #box-right-top img:hover {
	height: 0.76rem;
	transition: all 0.7s ease-in-out;
}
#box-left-top img:hover, #box-right-bottom img:hover {
	width: 0.76rem;
	transition: all 0.7s ease-in-out;
}
*/
#box-left-bottom, #box-left-top {
	margin-left: 1.7rem;
}
#box-left-top, #box-right-top {
	margin-top: 1.7rem;
}
#box-right-top, #box-right-bottom {
	-webkit-grid-column-start: 14;
	grid-column-start: 14;
	-webkit-grid-column-end: 13;
	grid-column-end: 13;
	margin-right: 1.7rem;
}
@media screen and (max-height: 640px) {
	#logo_animation img {
		width: unset;
		max-height: 100%;
		max-width: 103%;
	}
}
@media screen and (min-width: 440px) {
	html {
		font-size: 1rem;
		line-height: 1.4;
	}
	footer a:hover, header a:hover {
		opacity: 0.2;
	}
}
@media screen and (min-width: 700px) {
	html {
	}
	footer, header {
		background-color: transparent;
	}
}
@media screen and (min-width: 1440px) {
	html {
		display: flex;
		justify-content: center
}
	footer, header {
		background-color: transparent;
	}
	body, header, section, footer {
		width: 1440px;
		-webkit-grid-template-columns: 2fr 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 2fr;
		grid-template-columns: 2fr 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 6rem 2fr;
	}
	body {
	}
}
/*#ankerlink {
	background-color: white;
}
#footer {
	perspective: 50px;
	transform-origin: 30% 50% 0px;
	perspective-origin: 10% 50%;
	transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
*/