*{
	margin:0;
	padding:0;
	cursor: url('cursor.png'), auto;
	cursor: url('cursor.svg'), auto;
}

body{
	cursor: url('cursor.png'), auto;
	cursor: url('cursor.svg'), auto;
}

h1 a{
	color:blue;
	text-decoration: none;
	font-family: sans-serif;
	font-weight:normal;
	right:0px;
	margin-top:-15px;
	padding:30px;
	font-size:2vw;
	position:fixed;
	z-index:1;
	cursor:pointer;
}

h3{
	color:blue;
	text-decoration: none;
	font-family: sans-serif;
	font-weight:normal;
	float:left;
	margin-top:-15px;
	padding:30px;
	font-size:2vw;
	position:fixed;
	z-index:2;
}

h3 a{
	text-decoration: none;
	color:blue;
	
}

h3 a:hover{
	text-decoration: none;
	color:red;
	cursor:pointer;
}

h1 a:hover{
	color:red;
}

ul{
	right:0px;
	position:fixed;
	bottom:0px;
	font-size:2vw;
	margin:30px;
	list-style: none;
	z-index:2;
}

li a{
	color:blue;
	text-decoration: none;
	font-family: sans-serif;
	font-weight: normal;
	float:right;
	padding-top:10px;
	cursor:pointer;
}

li a:hover{
	color:red;
}

/* homepage animatie
	Bron:https://www.youtube.com/watch?v=Mx9kwLgAhAI
	Scrolling Banner Text Animation Effects Using Html & CSS, Online Tutorials
*/

section{
	position:fixed;
	width:100%;
	height:100vh;
	display:flex;
	overflow:hidden;
	z-index:0;
}

section div{
	position:relative;
	width:50%;
	background:#fff;
	overflow:hidden;
}

section div:nth-child(1){
	position:relative;
	width:50%;
	background:url("IMG_4522_3.jpg");
	background-size:cover;
	overflow:hidden;
}

section div:nth-child(1) h2{
	-webkit-text-stroke:2px;
	-webkit-text-stroke-color:#fff;
	-webkit-text-fill-color:transparent;
	left:100%;
}

section div h2{
	position:absolute;
	white-space:nowrap;
	font-size:12em;
	line-height:100vh;
	font-family:sans-serif;
	animation:animate 60s linear infinite;
	cursor:default;
}

@keyframes animate{
	0%{
		transform:translateX(0);
	}
	100%{
		transform:translateX(-100%);
	}
}

/* Contact */

.contact p{
	color:blue;
	text-decoration: none;
	font-family: sans-serif;
	font-weight:normal;
	float:left;
	bottom:-5px;
	margin:30px;
	line-height:2;
	font-size:2vw;
	position:fixed;
}
.contact a{
	color:red;
	text-decoration: none;
	font-family: sans-serif;
	font-weight:normal;
	cursor:pointer;
}

/* About */

.aboutText{
	width:80%;
}

.aboutText p{
	color:blue;
	text-decoration: none;
	font-family: sans-serif;
	font-weight:normal;
	float:left;
	margin-top:60px;
	padding:30px;
	font-size:2vw;
	position:relative;
}

span{
	position:relative;
	color:#FF0000;
	cursor:none;
}

.aboutText p span .aboutImg{
 	position:absolute;
 	transform:translate(-50%,-50%);
 	visibility:hidden;
 	pointer-events: none;
 	z-index:1;
 	width:300px;
 }

  p span:hover .aboutImg{
 	visibility: visible;

 }


/* Work */

.square {
    float:left;
    position: relative;
    width: 30%;
    padding-bottom : 31%; /* = width for a 1:1 aspect ratio */
    margin:1.66%;
    overflow:hidden;
 
}

.content {
    position:absolute;
    height:80%; /* = 100% - 2*10% padding */
    width:90%; /* = 100% - 2*5% padding */
    padding: 10% 5%;
}
.table{
    display:table;
    height:100%;
    width:100%;
    transition: 1s;

}
.table-cell{
    display:table-cell;
    vertical-align:middle;
    height:100%;
    width:100%;

   
}

div img{
	display:block;
	margin-left: auto;
  	margin-right: auto;
	height:auto;
	width:100%;
	cursor:pointer;
}

.table:hover{
	transform: rotate(5deg);
}

/* Showcase */

.showcase img{
	margin-left: auto;
	margin-right: auto;
	width:40%;
	padding-top:40px;
	padding-bottom:40px;
}

#video{
	display:flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	width:40%;
	padding-top:40px;
	padding-bottom:40px;
}

#horizontaal{
	margin-left: auto;
	margin-right: auto;
	width:60%;
	padding-top:0px;
	padding-bottom:0px;
}

#dive{
	margin-left: auto;
	margin-right: auto;
	width:40%;
	padding-top:0px;
	padding-bottom:0px;
}

.showcase p{
	color:blue;
	text-decoration: none;
	font-family: sans-serif;
	font-weight:normal;
	float:left;
	margin-top:60px;
	padding:30px;
	font-size:2vw;
	position:relative;
	margin-left: auto;
	margin-right: auto;
	width:28%;
	font-size:1.1vw;
	position:fixed;
	bottom:0px;
	opacity: 0;
	transition: all 1s;
}

.showcase p.visible{
	opacity:1;
}

 @media only screen and (max-width: 800px) {

 	h1 a{
 			font-size:5vw;
 			margin-top:-7px;
 			padding:15px;
 	}

 	h3{
 		font-size:5vw;
 		margin-top:-7px;
 		padding:15px;
 	}

 	ul{
 		font-size:5vw;
 		margin:15px;
 	}

	section div h2{
		font-size:20em;
		animation:animate 120s linear infinite;
		top:-5%;
	}

.square {
    float:left;
    margin-left:5%;
    position: relative;
    width: 90%;
    padding-bottom : 90%; /* = width for a 1:1 aspect ratio */
    overflow:hidden;
}

.table:hover{
	transform: rotate(0deg);
}

	/* Showcase */

	.showcase p{
	width:80%;
	top:0px;
	position:relative;
	font-size:4vw;
	opacity:1;
}

	.showcase img{
	margin-left: auto;
	margin-right: auto;
	width:80%;
	padding-top:10px;
}

	#video{
	display:flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
	width:80%;
	padding:10px 0px 0px 0px;

}

	#horizontaal{
	margin-left: auto;
	margin-right: auto;
	width:80%;
	padding-top:10px;
	padding-bottom:0px;
}

	#dive{
	margin-left: auto;
	margin-right: auto;
	width:80%;
	padding-top:0px;
	padding-bottom:0px;
}
/* About */

.aboutText{
	width:100%;
}

.aboutText p{
	font-size:4vw;
	margin-top:40px;

}

span{
	position:relative;
	color:#FF0000;
	cursor:none;
}

.aboutText p span .aboutImg{
 	visibility:hidden;
 
 }

  p span:hover .aboutImg{
 	visibility: hidden;

 }

 .contact p{
	font-size:5vw;
 	margin:15px;
 	bottom:-10px;

	
}

 }