@charset "UTF-8";
/*#logo_animation {
	display:none;
}
*/
.w3-black {
	transition: all .3s ease-out;
	color: white!important;
	background-color: #000!important;
}
.w3-hover-black:hover {
	opacity: 0.5;
	transition: all .3s ease-out;
	color: white!important;
	background-color: #000!important;
	border:none;
}
.w3-left-align {
	text-align: center!important;
}
.w3-block {
	display: block;
	width: 100%;
}
.w3-button:hover{
	color: #fff!important;
	background-color: #000!important;
	opacity: 0.5;
	transition: all 0.3s ease-out;
	border:none;
}
.w3-red, .w3-red a:active, a:visited{
	background-color: #000!important;
	border:none;
}
.w3-button, .w3-block, .w3-black, .w3-left-align {
	transition: all .3s ease-out;
	text-align: center;
	font-size: 1.5rem;
	letter-spacing: 0.15rem;
	color: white;
	font-weight: 700;
	cursor:pointer;
}
.w3-container, .w3-panel {
	padding: 0;
}
#menulinks {
	-webkit-grid-column-start: 4;
	grid-column-start: 4;
	-webkit-grid-column-end: 11;
	grid-column-end: 11;
	justify-items: top;
	text-align: center;
	margin-top: 3rem;
}
.topnavi {
	-webkit-grid-column-start: 14;
	grid-column-start: 14;
	-webkit-grid-column-end: 13;
	grid-column-end: 13;
	-webkit-grid-row-start: 2;
	grid-row-start: 2;
	-webkit-grid-row-end: 3;
	grid-row-end: 3;
	position: sticky;
	-webkit-position: sticky;
	top: 0px;
}
.topnavi a {
	top: 10rem;
	bottom: 10rem;
	margin-top: 60rem;
}
#logo_animation img {
	position: sticky;
	-webkit-position: sticky;
	top: 0px;
}
.top_anker{
	height: 1px;
	width: 1px;
	background-color: #f1f1f1;
	color: #f1f1f1;
	font-size:1px;
}
#box-right-bottom img, #box-left-top img{
	transform: rotate(90deg);
	transition: all 0.2s ease-in-out;
	margin-top: -2rem;
	margin-right: -2rem;
}
#box-left-top img{
	margin-top: 1rem;
	margin-left: -1rem;
}
#works-container p, #works-container_hover p{
	margin-top: -19.7rem;
	padding-bottom: 1rem;
	color: black;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	font-family: 'Raleway', sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.05rem;
	text-align: center;
	width: 100%;
}
section {
	-webkit-grid-template-rows:unset;
	grid-template-rows: unset;
	    padding-bottom: 10rem;
}
#menu_logo_link{
	height: fit-content;
}
#works-container, #works-container_hover {
	display: grid;
	-webkit-grid-template-columns: 1fr ;
	grid-template-columns: 1fr ;
	align-items: center;
	justify-items: center;
	padding-top: 5rem;
	margin-top: 5rem;
	margin-bottom: 5rem;
	-webkit-grid-column-start: 2;
	grid-column-start: 2;
	-webkit-grid-column-end: 13;
	grid-column-end: 13;
	-webkit-grid-row-start: 1;
	-webkit-grid-row-end: 2;
	grid-row-start: 1;
	grid-row-end: 2;
	transition: all 1s ease-in-out;
}
#works-container_hover img {
	opacity:0;
}
#works-container a, #works-container_hover a {
	text-decoration: none;
}
#works-container_hover a:hover{
	opacity: 0;
}
#works-container img, #works-container_hover img{
	width: 100%;
	padding-top: 0.8rem;
}
#works {
	height:10rem;
	overflow: hidden;
	padding-top: 3rem;
}
#menulinks a {
	transition: all 2.5s ease-in-out;
	text-align: center;
	font-size: 1rem;
	letter-spacing: 0.15rem;
	color: white;
	font-weight: 700;
	cursor:pointer;
}
#menulinks a:hover {
	opacity: 0.5;
	transition: all 2.5s ease-in-out;
}
@media screen and (max-height: 450px) {
	#menulinks {
		margin-top: 0;
	}
}
@media screen and (min-width: 440px) {
	#works {
		height:auto;
		overflow: hidden;
		padding-top: 0rem;
	}
	#works-container_hover img {
		opacity:1;
	}
	#works-container p, #works-container_hover p{
		width: 90%;
	}
	#works-container p, #works-container_hover p{
		margin-top: -1.6rem;
		padding-bottom: 1.6rem;
		color: white;
		text-transform: uppercase;
		font-weight: 700;
		text-decoration: none;
		font-family: 'Raleway', sans-serif;
		font-size: 0.7rem;
		letter-spacing: 0.05rem;
		text-align:center;
		width: 90%;
	}
	#box-right-bottom img, #box-left-top img{
		transform: rotate(0deg);
		margin-top: 0rem;
		margin-right: 0rem;
	}
	#box-left-top img{
		margin-top: 0rem;
		margin-left: 0rem;
	}
	#works-container img, #works-container_hover img{
		width: 90%;
	}
	#works-container_hover a p{
		text-decoration: none;
		opacity:0;
	}
	#works-container, #works-container_hover {
		-webkit-grid-template-columns: 1fr 1fr 1fr;
		grid-template-columns: 1fr 1fr 1fr;
		-webkit-grid-column-start: 2;
		grid-column-start: 2;
		-webkit-grid-column-end: 13;
		grid-column-end: 13;
	}
}
@media screen and (min-width: 640px) {
}