@charset "UTF-8";
/* CSS Document */

/* ---------------------------------------------------------------- fader */

.fader{
	position: fixed;
	top: 50%;
	left: 50%;
	width: 70vw;
	height: 70vh;
	background: #000;
	opacity: 0;
	pointer-events: none;
	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	z-index: 1000;
}

.fader-open {
	-webkit-animation-name: fader-open-anim; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 0.5s; /* Safari 4.0 - 8.0 */
	-webkit-animation-fill-mode: forwards; /* Safari 4.0 - 8.0 */
	animation-fill-mode: forwards;
 	animation-name: fader-open-anim;
 	animation-duration: 0.5s;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes fader-open-anim {
	0% {
		opacity: 0;
		width: 70vw;
		height: 70vh;
	}
	20% {
		opacity: 1;
		width: 70vw;
		height: 70vh;
	}
	100% {
		opacity: 1;
		width: 100%;
		height: 100%;
	}
}

/* Standard syntax */
@keyframes fader-open-anim {
  	0% {
		opacity: 1;
		width: 70vw;
		height: 70vh;
	}
	20% {
		opacity: 1;
		width: 70vw;
		height: 70vh;
	}
	100% {
		opacity: 1;
		width: 100%;
		height: 100%;
	}
}

/* ---------------------------------------------------------------- homepage */

.container {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
}

.work-list {
	position: absolute;
	top: 2%;
	left: 1%;
	width: 96%;
	margin: 0;
	padding: 0;
	font-family: 'Graphik Web', 'Work Sans', 'Helvetica', arial, sans-serif;
	font-weight: 300;
	font-size: 62px;
	line-height: 1.2;
	color: #fff;
	list-style-type: none;
	mix-blend-mode: exclusion;
	z-index: 1;
}

.work-list a:hover  {
	margin-left: 80px;
}

ul li{
  /* display: inline; */
}

.mobile_img_cont {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 96%;
	margin: 0;
	padding: 0;
	display: none;
	z-index: 0;
}

.mobile_img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 16vw;
	height: 20vw;
	margin: 0;
	padding: 0;
	background: #ccc;
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

.contact{
	position: fixed;
	bottom: 2vw;
	right: 2vw;
	width: 16px;
	height: 16px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background-color: #fff;
	mix-blend-mode: exclusion;
	z-index: 1;
}

.project-img {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 400px;
	height: 500px;
  	display: inline-block;
	pointer-events: none;
	background-image: none;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	-webkit-transition: width 0.3s, height 0.3s; /* Safari */
    transition: width 0.3s, height 0.3s;
	opacity: 1;
	z-index: 0;
	
	-webkit-animation: fadein 0.5s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 0.5s; /* Firefox < 16 */
        -ms-animation: fadein 0.5s; /* Internet Explorer */
         -o-animation: fadein 0.5s; /* Opera < 12.1 */
            animation: fadein 0.5s;
}


@media only screen and (max-width: 768px) { /*----------------------------------------------------------------- mobile */

	.work-list {
		font-size: 6.5vw;
		line-height: 3;
		font-weight:  300;
	}
	
	.work-list a:hover  {
		margin-left: 0px;
	}
	
	.mobile_img_cont{
		display: inline;
	}
	
	.contact{
		bottom: 4vw;
		right: 4vw;
	}
	
	.project-img {
	 	display: none;	
	}
	
}