@import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Dancing+Script:400,700');

html {
	scroll-behavior: smooth;
	height: -webkit-fill-available;
}

body{
	font-family: 'Poppins', sans-serif;
	font-weight: 300;
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
	background-color: #1f2029;
	overflow: hidden;
	height: 100vh;
	min-height: 100vh;
	min-height: -webkit-fill-available;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
	perspective: 800px;
}
p {
	color: white;
}
a {
	cursor: pointer;
}
a:hover {
	text-decoration: none;
}
::selection {
	color: #c4c3ca;
	background-color: #000;
}
::-moz-selection {
	color: #c4c3ca;
	background-color: #000;
}
/* Scrollbar */
::-webkit-scrollbar {
	width: 6px;
    background-color: transparent;
  }
  ::-webkit-scrollbar-track{
	background-color: transparent;
  }
  ::-webkit-scrollbar-thumb {
	background:#c67409;
    width:10px;
	border-radius: 10px;
  }

  #loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 4;
    width: 120px;
    height: 120px;
    margin: -76px 0 0 -76px;
    border: 10px solid #33333338;
    border-radius: 50%;
    border-top: 10px solid #ff7b00;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
  }
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Add animation to "page content" */
  .animate-bottom {
    position: relative;
    -webkit-animation-name: animatebottom;
    -webkit-animation-duration: 0.5s;
    animation-name: animatebottom;
    animation-duration: 0.5s
  }
  
  @-webkit-keyframes animatebottom {
    from { bottom:-100px; opacity:0 } 
    to { bottom:0px; opacity:1 }
  }
  
  @keyframes animatebottom { 
    from{ bottom:-100px; opacity:0 } 
    to{ bottom:0; opacity:1 }
  }
  
  #myDiv {
    display: block;
    text-align: center;
  }

  .background-blur {
    position: relative;
    background-color: #000000;
    min-height: 100%;
    min-width: 1024px;
    position: fixed;
    filter: blur(200px);
    top: 0;
    left: 0;
    width: -webkit-fill-available;
    height: auto;
    z-index: 3;
    display: none;
}

/* #Cursor
================================================== */

.cursor,
.cursor2,
.cursor3{
	position: fixed;
	border-radius: 50%;	
	transform: translateX(-50%) translateY(-50%);
	pointer-events: none;
	left: -100px;
	top: 50%;
	mix-blend-mode: difference;
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
}
.cursor{
	background-color: #fff;
	height: 0;
	width: 0;
	z-index: 99999;
}
.cursor2,.cursor3{
	height: 36px;
	width: 36px;
	z-index:99998;
	-webkit-transition:all 0.3s ease-out;
	transition:all 0.3s ease-out
}
.cursor2.hover,
.cursor3.hover{
	-webkit-transform:scale(2) translateX(-25%) translateY(-25%);
	transform:scale(2) translateX(-25%) translateY(-25%);
	border:none
}
.cursor2{
	border: 2px solid #fff;
}
.cursor2.hover{
	background: rgba(255,255,255,0);
	border-color: transparent;
}

@media screen and (max-width: 1200px){
	.cursor,.cursor2,.cursor3{
		display: none
	}
}

/* #Primary style
================================================== */

.hero-section {
    position: relative;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
	background-image: url('/images/testing.png');
	background-size: cover;
	background-position: center;
	transform: scale(1) rotateX(0);
	box-shadow: 0 0 40px rgba(0,0,0,0.2);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
	-webkit-transition-delay: 400ms;
	transition-delay: 400ms;
	transform-origin: center top;
}
.hero-section h1{
    color: #fff;
	font-size: 5vw;
	line-height: 1;
	font-weight: 900;
	transition: transform .5s;
}
.hero-section h1:hover{
	-ms-transform: scale(1.1); /* IE 9 */
	-webkit-transform: scale(1.1); /* Safari 3-8 */
	transform: scale(1.1);
}
.hero-section h1:hover {
	text-shadow:
	0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 
    0 3px 0 #bbb, 
    0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 
    0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
}

.hero-section .dancing{
	position: left;
    font-family: 'Dancing Script', cursive;
	letter-spacing: 0px;
	color: #c67409;
	font-size: 26px;
	position: relative;
	line-height: 1;
	font-weight: 700;
}

.input {
    font-size: 26px;
}

@media screen and (max-width: 576px){
	.hero-section .dancing{
		font-size: 20px;
		text-align: center;
	}
	.hero-section h1 {
		font-size: 35px;
	}
	.input {
		font-size: 20px;
	}
}

.hero-section p {
	display: block;
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
	margin-right: 26px;
}
.hero-section .Mobile {
	display: none;
	font-size: 15px;
	line-height: 20px;
	font-weight: 500;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
	margin-left: 30px;
}
@media screen and (max-width: 576px) {
	.hero-section p {
		display: none;
	}
	.hero-section .Mobile {
		display: block;
	}
}

.hero-section p span {
	margin-left: 15px;
	margin-right: 15px;
	position: relative;
	display: inline-block;
	cursor: pointer;
	padding-bottom: 35px;
}
.hero-section p span:before {
	position: absolute;
	content: '';
	bottom: 10px;
	left: 50%;
	height: 30px;
	width: 30px;
	margin-left: -15px;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	background-image: url('http://www.ivang-design.com/svg-load/portfolio/down.svg');
	opacity: 0.2;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.hero-section p span:hover:before {
	opacity: 1;
	bottom: 5px;
}

body.about-on .hero-section {
	transform: scale(0.75);
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
}
body.contact-on .hero-section {
	transform: scale(0.75);
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
}
body.travel-on .hero-section {
	transform: rotateX(-10deg);
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
}
body.wildlife-on .hero-section {
	transform: rotateX(-10deg);
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
}
body.nature-on .hero-section {
	transform: rotateX(-10deg);
	-webkit-transition-delay: 0ms;
	transition-delay: 0ms;
}
.about-text {
	display: block;
    position: absolute;
	font-size: 17px;
	line-height: 20px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 2px;
	top: 50%;
	left: 40px;
	cursor: pointer;
	z-index: 2;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	transform: translateY(-50%);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.Mobile-About {
	display: none;
}
.about-text:before {
	position: absolute;
	content: '';
	top: 50%;
	left: -25px;
	height: 30px;
	width: 30px;
	margin-top: -15px;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
	opacity: 0.2;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.about-text:hover:before {
	opacity: 1;
	left: -30px;
}

.about-section {
    position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
	background-color: rgba(31,32,41,1);
	transform: translateX(-100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
	z-index: 10;
}
body.about-on .about-section {
	transform: translateX(0);
	-webkit-transition-delay: 400ms;
	transition-delay: 400ms;
}
.about-close {
    position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	display: block;
	overflow: hidden;
	height: 30px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 36px 36px;
	background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
	cursor: pointer;
	z-index: 11;
}
.about-close:hover {
    transform: rotate(90deg);
}
.section-center {
    position: absolute;
	width: 100%;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
}
.about-section img {
    width: 100px;
	height: 150px;
	transition: transform .3s;
	border-radius: 6px;
	display: block;
	margin: 0 auto;
	box-shadow: 0 0 20px rgba(0,0,0,0.15);
	
}
.about-section img:hover {
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.);
}
.about-section p span {
    font-family: 'Dancing Script', cursive;
	letter-spacing: 1px;
	color: #c67409;
	font-size: 25px;
	font-weight: 400;
}

.contact-text {
	display: block;
    position: absolute;
	font-size: 17px;
	line-height: 20px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 2px;
	top: 50%;
	right: 40px;
	cursor: pointer;
	z-index: 2;
	-webkit-writing-mode: vertical-lr;
	writing-mode: vertical-lr;
	transform: translateY(-50%) rotate(180deg);
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.Mobile-Contact {
	display: none;
}
.contact-text:before {
	position: absolute;
	content: '';
	top: 50%;
	left: -25px;
	height: 30px;
	width: 30px;
	margin-top: -15px;
	z-index: -1;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 30px 30px;
	background-image: url('http://www.ivang-design.com/svg-load/portfolio/left.svg');
	opacity: 0.2;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
}
.contact-text:hover:before {
	opacity: 1;
	left: -30px;
}
.contact-section {
    position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	overflow: hidden;
	height: 100vh;
	background-color: rgba(31,32,41,1);
	transform: translateX(100%);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
	z-index: 10;
}
body.contact-on .contact-section {
	transform: translateX(0);
	-webkit-transition-delay: 400ms;
	transition-delay: 400ms;
}
.contact-close {
    position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	display: block;
	overflow: hidden;
	height: 30px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 36px 36px;
	background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
	cursor: pointer;
	z-index: 11;
}
.contact-close:hover {
    transform: rotate(90deg);
}
.contact-section a{
    margin: 0 auto;
	transition: transform .4s;
	font-size: 32px;
	font-weight: 900;
	letter-spacing: 1px;
	color: #fff;
  	display: inline-block;
	
}
.contact-section a:hover {
	transform: scale(1.1);
}
.contact-section .social a{
    margin-left: 8px;
	margin-right: 8px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #c67409;
}
@media screen and (max-width: 580px){
	.contact-section a{
		font-size: 17px;
	}
	.contact-section .social a{
		margin-left: 3px;
		margin-right: 3px;
		font-size: 13px;
		letter-spacing: 0;
	}
	.contact-text {
		display: none;
		right: 40px;
		top: 55%;
	}
	.Mobile-Contact {
		display: block;
	}
	
	.about-text {
		display: none;
		left: 40px;
		top: 55%;
	}
	.Mobile-About {
		display: block;
	}
}

/* Pages */
.skillbar {
	position: relative;
	display:block;
	margin-bottom:15px;
	width:100%;
	background:#3b3d4f;
	height:35px;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-transition:0.4s linear;
	-moz-transition:0.4s linear;
	-ms-transition:0.4s linear;
	-o-transition:0.4s linear;
	transition: 0.4s linear;
	-webkit-transition-property:width, background-color;
	-moz-transition-property:width, background-color;
	-ms-transition-property:width, background-color;
	-o-transition-property:width, background-color;
	transition-property:width, background-color;
}

.skillbar-title {
	position:absolute;
	top:0;
	left:0;
	width:110px;
	font-weight:bold;
	font-size:13px;
	color:#ffffff;
	background:#6adcfa;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:4px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}

.skillbar-title span {
	display:block;
	background:rgba(0, 0, 0, 0.1);
	padding:0 20px;
	height:35px;
	line-height:35px;
	-webkit-border-top-left-radius:3px;
	-webkit-border-bottom-left-radius:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-bottomleft:3px;
	border-top-left-radius:3px;
	border-bottom-left-radius:3px;
}
.skillbar-bar {
	height:35px;
	width:0px;
	background:#6adcfa;
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.skill-bar-percent {
	position:absolute;
	right:10px;
	top:0;
	font-size:11px;
	height:35px;
	line-height:35px;
	color:#ffffff;
	color:rgb(255, 255, 255);
}

#slider {
	-webkit-transition: all 300ms linear;
	transition: transform .3s;
	width: 720px;
	height: 400px;
	overflow: hidden;
	border-radius: 20px;
	margin: 20px auto;
	box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  }
  
  /*the sildeer div has a defined width and height which acts as a screen inside another screen*/
  
  #slider .slides {
	display: block;
	width: 6000px;
	height: 400px;
	margin: 0;
	padding: 0;
  }
  /*the list inside has a greater width and height to cover all the slideX with a display block type*/
  
  #slider .slide {
	
	float: left;
	list-style-type: none;
	width: 720px;
	height: 400px;
	text-align: center;
	font-size: 30px;
	color: lightblue;
  }
  
  #slider .slide h1, 
  #slider .slide h3 {
	position: relative;
	font-size: 40px;
	text-align: center;
	top: 170px;
	color: white;
	transition: 0.3s
  }

#slider:hover {
	transform: scale(1.2);
}
#slider:hover .slide h1, #slider:hover .slide h3 {
	top: 300px;
}

#slider .slide h1:hover, 
#slider .slide h3:hover {
	color: #ffffff;
	text-shadow:
	0 1px 0 #ccc, 
    0 2px 0 #c9c9c9, 
    0 3px 0 #bbb, 
    0 4px 0 #b9b9b9, 
    0 5px 0 #aaa, 
    0 6px 1px rgba(0,0,0,.1), 
    0 0 5px rgba(0,0,0,.1), 
    0 1px 3px rgba(0,0,0,.3), 
    0 3px 5px rgba(0,0,0,.2), 
    0 5px 10px rgba(0,0,0,.25), 
    0 10px 10px rgba(0,0,0,.2), 
    0 20px 20px rgba(0,0,0,.15);
}
  
@media screen and (max-width: 576px) {
	#slider {
		width: 100%;
	}
	#slider .slide h1, 
	#slider .slide h3 {
		font-size: 30px;
		text-align: center;
		padding-right: 50%;
	}
	.slide1, .slide2, .slide3, .slide3, .slide4, .slide5, .slide6, .slide7 {
		background-size: cover;   /* i.p.v. cover */
	}
}

  /*Each slid has the same width as that of the slider hence covering the whole span*/
  
.slide1 {
	background-image: url("/images/auto.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
  
	.slide2,
	.slide5 {
	position: relative;
	background: none;
	overflow: hidden;
	}

	/* Video alleen in slide2 en slide5 */
	.slide2 .bg-video,
	.slide5 .bg-video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 1;
	pointer-events: none;
	}

	/* Tekst boven de video */
	.slide2 h1,
	.slide5 h1 {
	position: relative;
	z-index: 2;
	}

  .slide3 {
	background-image: url("/images/gym.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }
  
  .slide4 {
	background-image: url("/images/vakantie.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

  .slide5 {
	background-image: url("/images/vacation.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }
  .slide6 {
	background-image: url("/images/testing2.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }
  .slide7 {
	background-image: url("/images/setup.jpg");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
  }

.travel-section,
.wildlife-section,
.nature-section {
    position: fixed;
	top: 100%;
	left: 0;
	padding: 100px 0;
	width: 100%;
	height: 100vh;
	display: block;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: rgba(31,32,41,1);
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear;
	z-index: 10;
}
.travel-close,
.wildlife-close,
.nature-close {
    position: absolute;
	top: 20px;
	right: 20px;
	width: 30px;
	display: block;
	overflow: hidden;
	height: 30px;
	-webkit-transition: all 200ms linear;
	transition: all 200ms linear;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 36px 36px;
	background-image: url('http://www.ivang-design.com/svg-load/portfolio/close.svg');
	cursor: pointer;
	z-index: 11;
}
.travel-close:hover,
.wildlife-close:hover,
.nature-close:hover {
    transform: rotate(90deg);
}
body.travel-on .travel-section {
	top: 0;
	-webkit-transition-delay: 400ms;
	transition-delay: 400ms;
}
body.wildlife-on .wildlife-section {
	top: 0;
	-webkit-transition-delay: 400ms;
	transition-delay: 400ms;
}
body.nature-on .nature-section {
	top: 0;
	-webkit-transition-delay: 400ms;
	transition-delay: 400ms;
}
.travel-section img,
.wildlife-section img,
.nature-section img {
	margin-top: 30px;
    width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
	box-shadow: 0 0 20px rgba(0,0,0,0.4);
	transition: transform .3s;
}
.travel-section h3,
.wildlife-section h3,
.nature-section h3 {
	font-size: 44px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 1px;
	color: #fff;
}
.travel-section img:hover,
.wildlife-section img:hover,
.nature-section img:hover {
  -ms-transform: scale(1.05); /* IE 9 */
  -webkit-transform: scale(1.05); /* Safari 3-8 */
  transform: scale(1.);
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.wildlife-section .Portfolio-Text {
	font-family: Poppins;
	text-align: center;
	position: relative;
	margin-top: 30px;
    width: 100%;
	height: auto;
}
.travel-section p,
.wildlife-section p,
.nature-section p {
	font-size: 14px;
	line-height: 1.7;
	letter-spacing: 1px;
}
.travel-section p span,
.wildlife-section p span,
.nature-section p span {
	font-size: 20px;
	line-height: 1.3;
	font-weight: 700;
	color: #c67409;
}
/* #Link to page
================================================== */

.link-to-portfolio {
position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 200;
  cursor: pointer;
  width: 50px;
  height: 50px;
  text-align: center;
  border-radius: 3px;
  background-position: center center;
  background-size: 65%;
  background-repeat: no-repeat;
  background-image: url('/images/codeaura.png');
  box-shadow: 0 0 0 2px rgba(255,255,255,.1);
  transition: opacity .2s, border-radius .2s, box-shadow .2s;
  transition-timing-function: ease-out;
}
.link-to-portfolio:hover {
  opacity: 0.8;
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(255,255,255,.1);
}