/* ---------------------------------------------------------------- fade animation */

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------------------------------------------------------------- general */

html, body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
	background: #fff;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	font-family: 'Graphik Web', 'Work Sans', 'Helvetica', arial, sans-serif;
	font-weight: 300;
	font-size: 18px;
	letter-spacing: 1.2px;
	line-height: 1.6;
	cursor: none;
}

a {
	text-decoration: none;
	color: #fff;
	cursor: none;
}

a:hover {
	border-bottom: solid 1px #fff;
}

p {
	margin: 0px;
	margin-bottom: 15px;
}

.pointer{
	position: absolute;
	top: 0;
	left: 0;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: solid #fff 2px;
	mix-blend-mode: exclusion;
  	display: inline-block;
	pointer-events: none;
	-webkit-transition: width 0.3s, height 0.3s; /* Safari */
    transition: width 0.3s, height 0.3s;
	opacity: 0;
	z-index: 100;
}

.pointer-device {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	font-family: 'Graphik Web', 'Work Sans', 'Helvetica', arial, sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 1.3;
	color: #fff;
	mix-blend-mode: exclusion;
	-ms-transform: translate(-50%, -50%);
  	transform: translate(-50%, -50%);
	opacity: 0;
}

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

html, body {
	cursor: auto;
}
	
a {
	cursor: auto;
}
	
}