@import url('fonts/Inter-Regular.woff2');
@import url('fonts/Inter-Italic.woff2');
* {
	border: 0;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	font-size: 0px;
	line-height: 1.1;
	color: black;
}
img {
	width: 100%;
    height: auto;
    padding: 0px;
    margin: 0px;
}
br, p, img {
	margin: 0px;
	border: 0px;
	padding: 0px;
}
a, a p, a span{
    color: black;
    text-decoration: none;
}
a:hover, a:hover p, a:hover span {
    color: blue;
    text-decoration: none;
}
.mobile-top a:hover  {
    color: black;
    text-decoration: none;
}
.active-site {
	color: blue;
}
#wrapper {
	width: 100%;
	height: auto;
	padding: 50px;
	padding-top: 150px;
}
#navi {
	top: 150px;
	right: 50px;
	margin-top: 6px;
	padding-bottom: 5px;
	position: fixed;
	font-size: 30px;
}
.footer {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	text-align: right;
	font-size: 30px;
}
.element {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 5px;
	border-bottom: 2px solid black;
}
.element-site {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 7px;
}
.element-solo {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 5px;
	border-bottom: 2px solid black;
	font-size: 30px;
}
.element-solo-site {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 7px;
	font-size: 30px;
}
.element-arrow {
	width: 30px;
	margin-left: -30px;
	margib-right: 0px;
	font-size: 30px;
	opacity: 0;
	display: inline-block;
	transition: all 0.15s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element:hover .element-arrow {
	width: 30px;
	margin-left: 0px;
	margin-right: 10px;
	opacity: 1;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element:hover .element-client {
	width: 310px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element-client {
	width: 350px;
	display: inline-block;
	font-size: 30px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element-project {
	width: 450px;
	display: inline-block;
	margin-left: 0;
	font-size: 30px;
}
.element-images {
	width: auto;
	display: inline-block;
	margin-left: 0;
}
.element img {
	width: 22px;
	height: auto;
	padding: 0px;
	margin: 0px;
	margin-right: 3px;
	filter: grayscale(100%);
	filter: brightness(0%);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element-client-site {
	width: 350px;
	display: inline-block;
	font-size: 30px;
	position: fixed;
}
.element-project-site {
	width: 500px;
	margin-left: 350px;
	display: inline-block;
	font-size: 30px;
	padding-bottom: 50px;
	position: fixed;
}
.element-title-site-scroll {
	width: 350px;
	display: inline-block;
	font-size: 30px;
}
.element:hover img {
	width: 150px;
	height: auto;
	padding: 0px;
	padding-top: 5px;
	margin: 0px;
	margin-right: 10px;
	filter: grayscale(0%);
	filter: brightness(100%);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.project-description {
	max-width: 700px;
	height: 500px;
	padding: 0px;
	padding-top: 72px;
	margin: 0px;
	margin-left: 0px;
	font-size: 15px;
	line-height: 1.3;
	position: fixed;
}
.project-credits {
	display: inline-block;
	margin-left: 25px;
	margin-top: 25px;
	font-style: italic;
}
.project-media {
	width: calc(100% - 800px + 25px);
	margin-left: 800px;
	margin-top: -9px;
}
.site-description {
	max-width: 700px;
	min-height: 368px;
	padding: 0px;
	padding-top: 39px;
	margin: 0px;
	margin-left: 0px;
	font-size: 15px;
	line-height: 1.3;
}
.site-credits {
	display: inline-block;
	margin-left: 25px;
	margin-top: 25px;
}
.project-img {
	width: 100%;
	margin-bottom: 25px;
	padding-right: 25px;
	position:relative;
}
.project-img-half {
	width: 50%;
	margin-bottom: 25px;
	padding-right: 25px;
	position:relative;
	float: left;
}
.project-img-third {
	width: 33.333%;
	margin-bottom: 25px;
	padding-right: 25px;
	position:relative;
	float: left;
}
.project-video-16-9 {
	width: calc(100% - 25px);
	padding-top:56.25%;
	padding-right: 25px;
	position:relative;
	margin-bottom: 25px;
}
.project-video-schmal {
	width: calc(100% - 25px);
	padding-top:48.75%;
	padding-right: 25px;
	position:relative;
	margin-bottom: 25px;
}
.half-video-4-5 {
	width: calc( 50% - 25px );
	padding-top: calc( ( 124% / 2 ) - 25px);
	margin-bottom: 25px;
	margin-right: 25px;
	position:relative;
	float: left;
}
.half-video-vetements {
	width: calc( 50% - 25px );
	padding-top: calc( ( 196% / 2 ) - 25px);
	margin-bottom: 25px;
	margin-right: 25px;
	position:relative;
	float: left;
}
.project-video-half-1-1 {
	width: calc( 50% - 25px );
	padding-top: calc( ( 100% / 2 ) - 25px);
	margin-bottom: 25px;
	margin-right: 25px;
	position:relative;
	float: left;
}
.project-video-1-1 {
	width: calc( 100% - 25px );
	padding-top: calc( ( 100% / 1 ) - 25px);
	margin-bottom: 25px;
	margin-right: 25px;
	position:relative;
	float: left;
}
.project-video-xx-xx {
	width: calc(100% - 25px);
	padding-top: 169.14%;
	margin-bottom: 25px;
	padding-right: 25px;
	position:relative;
}
@media (max-width:1600px) {
.element:hover img {
	width: 110px;
}
}
@media (max-width:1400px) {
#wrapper {
	padding-top: 100px;
}
#navi {
	top: 100px;
	margin-top: 6px;
	padding-bottom: 5px;
	position: fixed;
	font-size: 20px;
}
.footer {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	text-align: right;
	font-size: 20px;
}
.element {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 3.5px;
	border-bottom: 1.5px solid black;
}
.element-site {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 7px;
}
.element-solo {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 5px;
	border-bottom: 1.5px solid black;
	font-size: 20px;
}
.element-solo-site {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	padding-bottom: 7px;
	font-size: 20px;
}
.element-arrow {
	width: 20px;
	margin-left: -20px;
	margib-right: 0px;
	font-size: 20px;
	opacity: 0;
	display: inline-block;
	transition: all 0.15s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element:hover .element-arrow {
	width: 20px;
	margin-left: 0px;
	margin-right: 7px;
	opacity: 1;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element:hover .element-client {
	width: 213px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element-client {
	width: 240px;
	display: inline-block;
	font-size: 20px;
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element-project {
	width: 285px;
	display: inline-block;
	margin-left: 0;
	font-size: 20px;
}
.element-images {
	width: auto;
	display: inline-block;
	margin-left: 0;
}
.element img {
	width: 13px;
	height: auto;
	padding: 0px;
	margin: 0px;
	margin-right: 3px;
	filter: grayscale(100%);
	filter: brightness(0%);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.element-client-site {
	width: 230px;
	display: inline-block;
	font-size: 20px;
	position: fixed;
}
.element-project-site {
	width: 285px;
	margin-left: 240px;
	display: inline-block;
	font-size: 20px;
	padding-bottom: 50px;
	position: fixed;
}
.element-title-site-scroll {
	width: 230px;
	display: inline-block;
	font-size: 20px;
}
.element:hover img {
	width: 80px;
	height: auto;
	padding: 0px;
	padding-top: 3px;
	margin: 0px;
	margin-right: 10px;
	filter: grayscale(0%);
	filter: brightness(100%);
	transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.project-description {
	max-width: 460px;
	height: 500px;
	padding: 0px;
	padding-top: 51px;
	margin: 0px;
	margin-left: 0px;
	font-size: 12px;
	line-height: 1.3;
	position: fixed;
}
.project-credits {
	display: inline-block;
	margin-left: 25px;
	margin-top: 25px;
	font-style: italic;
}
.project-media {
	width: calc(100% - 525px + 15px);
	margin-left: 525px;
	margin-top: -8px;
}
.site-description {
	max-width: 700px;
	min-height: 260px;
	padding: 0px;
	padding-top: 30px;
	margin: 0px;
	margin-left: 0px;
	font-size: 12px;
	line-height: 1.3;
}
.site-credits {
	display: inline-block;
	margin-left: 25px;
	margin-top: 25px;
}
.project-img {
	width: 100%;
	margin-bottom: 15px;
	padding-right: 15px;
	position:relative;
}
.project-img-half {
	width: 50%;
	margin-bottom: 15px;
	padding-right: 15px;
	position:relative;
	float: left;
}
.project-img-third {
	width: 33.333%;
	margin-bottom: 15px;
	padding-right: 15px;
	position:relative;
	float: left;
}
.project-video-16-9 {
	width: calc(100% - 15px);
	padding-top:56.25%;
	padding-right: 15px;
	position:relative;
	margin-bottom: 15px;
}
.project-video-schmal {
	width: calc(100% - 15px);
	padding-top:48.75%;
	padding-right: 15px;
	position:relative;
	margin-bottom: 15px;
}
.half-video-4-5 {
	width: calc( 50% - 15px );
	padding-top: calc( ( 124% / 2 ) - 15px);
	margin-bottom: 15px;
	margin-right: 15px;
	position:relative;
	float: left;
}
.half-video-vetements {
	width: calc( 50% - 15px );
	padding-top: calc( ( 196% / 2 ) - 15px);
	margin-bottom: 15px;
	margin-right: 15px;
	position:relative;
	float: left;
}
.project-video-half-1-1 {
	width: calc( 50% - 15px );
	padding-top: calc( ( 100% / 2 ) - 15px);
	margin-bottom: 15px;
	margin-right: 15px;
	position:relative;
	float: left;
}
.project-video-1-1 {
	width: calc( 100% - 15px );
	padding-top: calc( ( 100% / 1 ) - 15px);
	margin-bottom: 15px;
	margin-right: 15px;
	position:relative;
	float: left;
}
.project-video-xx-xx {
	width: calc(100% - 15px);
	padding-top: 169.14%;
	margin-bottom: 15px;
	padding-right: 15px;
	position:relative;
}	
}
@media (max-width:1000px) {
a:hover, a:hover p, a:hover span {
    color: black;
    text-decoration: none;
}
#wrapper {
	width: 100%;
	height: auto;
	padding: 30px;
	padding-top: 60px;
}
#navi {
	top: 34.5px;
	right: 30px;
	margin-top: 6px;
	padding-bottom: 5px;
	position: fixed;
	font-size: 15px;
	z-index: 99999;
}
.footer {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 6px;
	text-align: right;
	font-size: 15px;
}
.element {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 4.5px;
	padding-bottom: 3.5px;
	border-bottom: 1.3px solid black;
}
.element-site {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 4.5px;
	padding-bottom: 7px;
}
.element-solo {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 20.5px;
	padding-bottom: 3.5px;
	border-bottom: 1.3px solid black;
	font-size: 15px;
}
.mobile-top {
	border-top: 1.3px solid black;
	padding-top: 4.5px;
}
.element-solo-site {
	width: 100%;
	height: auto;
	margin-top: 0px;
	padding-top: 20.5px;
	padding-bottom: 3.5px;
	border-bottom: 1.3px solid black;
	font-size: 15px;
}
.element-arrow {
	width: 0px;
	margin-left: 0px;
	margib-right: 0px;
	font-size: 0px;
	opacity: 0;
}
.element:hover .element-arrow {
	width: 0px;
	margin-left: 0px;
	margin-right: 0px;
	opacity: 0;
}
.element-client, .element:hover .element-client {
	width: 100%;
	display: inline-block;
	font-size: 15px;
	margin-right: 20px;
}
.element-project {
	width: 100%;
	display: inline-block;
	font-size: 15px;
}
.element-images {
	width: 100%;
	display: inline-block;
	margin-left: 3px;
	padding-right: 1px;
	text-align: right;
	margin-top: -33.5px;
}
.element img, .element:hover img {
	width: 23px;
	height: auto;
	padding: 0px;
	padding-top: 3px;
	margin: 0px;
	margin-right: 2px;
	filter: grayscale(0%);
	filter: brightness(100%);
}
.element-client-site {
	width: 100%;
	display: inline-block;
	font-size: 15px;
	position: static;
}
.element-project-site {
	width: auto;
	margin-left: 0px;
	display: inline-block;
	font-size: 15px;
	padding-bottom: 0px;
	position: static;	
}
.element-title-site-scroll {
	width: 230px;
	display: inline-block;
	font-size: 15px;
}
.project-description, .site-description {
	max-width: 100%;
	height: auto;
	padding: 0px;
	padding-top: 20px;
	margin: 0px;
	margin-left: 0px;
	font-size: 10px;
	line-height: 1.3;
	position: static;
}
.project-credits {
	display: inline-block;
	margin-left: 25px;
	margin-top: 25px;
	font-style: italic;
}
.project-media {
	width: calc(100% - 0px);
	margin-left: 0px;
	margin-top: 25px;
}
.site-credits {
	display: inline-block;
	margin-left: 25px;
	margin-top: 25px;
}
.project-img, .project-img-half, .project-img-third {
	width: 100%;
	margin-bottom: 7px;
	padding-right: 0px;
	position:relative;
}
.project-video-16-9 {
	width: calc(100% - 0px);
	padding-top:56.25%;
	padding-right: 0px;
	position:relative;
	margin-bottom: 7px;
}
.project-video-schmal {
	width: calc(100% - 0px);
	padding-top:50%;
	padding-right: 0px;
	position:relative;
	margin-bottom: 7px;
}
.half-video-4-5 {
	width: calc( 100% - 0px );
	padding-top: calc( ( 124% / 1 ) - 0px);
	margin-bottom: 7px;
	margin-right: 0px;
	position:relative;
	float: left;
}
.half-video-vetements {
	width: calc( 100% - 0px );
	padding-top: calc( ( 196% / 1 ) - 0px);
	margin-bottom: 7px;
	margin-right: 0px;
	position:relative;
	float: left;
}
.project-video-half-1-1 {
	width: calc( 100% - 0px );
	padding-top: calc( ( 100% / 1 ) - 0px);
	margin-bottom: 7px;
	margin-right: 0px;
	position:relative;
	float: left;
}
.project-video-1-1 {
	width: calc( 100% - 0px );
	padding-top: calc( ( 100% / 1 ) - 0px);
	margin-bottom: 7px;
	margin-right: 0px;
	position:relative;
	float: left;
}
.project-video-xx-xx {
	width: calc(100% - 0px);
	padding-top: 169.14%;
	margin-bottom: 7px;
	padding-right: 0px;
	position:relative;
}	
}