*{
	   padding:0px;
	   margin:0px;
	   font-family: 'Eras', Fallback, sans-serif;
	}
	@font-face {
	 font-family: 'Eras';
	 src: url('img/ERASDEMI.ttf'); /* IE9 Compat Modes */
	}
	#background{
	   width: 100%;
	height: 100%;
	z-index: -999;
	position:fixed;

	background: rgb(103,202,223);
	/* background: linear-gradient(240deg, rgba(213,126,46,1) 0%, rgba(58,71,130,1) 100%); */
	/* background: linear-gradient(20deg, rgb(213, 126, 46) 0%, #ffffff 100%); */
	background: linear-gradient(20deg, rgb(255, 141, 87) 0%, #ffffff 100%);
	}
	@keyframes float {
	   0% {
	       transform: translatey(0px);
	   }
	   50% {
	       transform: translatey(-20px);
	   }
	   100% {
	       transform: translatey(0px);
	   }
	}
	@keyframes float {
	   0% {
	       transform: translatey(0px);
	   }
	   50% {
	       transform: translatey(-20px);
	   }
	   100% {
	       transform: translatey(0px);
	   }
	}


	header{
	   position:relative;
	   width:100%;
	   height: calc(100vh - 10px);
	   max-width: 1500px;
	   margin-left:auto;
	   margin-right:auto;
	}
	#eiland1{
	   position: absolute;
	   left:-5%;
	   bottom:-130px;
	   width: 400px;
	   height:auto;
	   transform: translatey(0px);
	   animation: float 8s ease-in-out infinite;
	   z-index: 1;
	   opacity: 0.2;
	}
	#eiland2{
	   position: absolute;
	   right: 750px;
	   bottom:-200px;;
	   width:1200px;
	   height:auto;
	   transform: translatey(0px);
	   animation: float 6s ease-in-out infinite;
	   z-index: 12;
	}
	#eiland3{
	   position: absolute;
	   right: 0%;
	   bottom: 120px;
	   width:700px;
	   height:auto;
	   transform: translatey(0px);
	   animation: float 4s ease-in-out infinite;
	   z-index: 10;
	}
	#me{
	   position: absolute;
	   right: 500px;
	   bottom: 250px;
	   width: 300px;
	   height:auto;
	   transform: translatey(0px);
	   animation: float 12s ease-in-out infinite;
	   z-index: 11;
	}
	#logo{
	   position:absolute;
	   left: 35px;
	   width: 600px;
	   top: 0px;
	   z-index: 99;
	}
	#page1{
	   position:relative;
	   top: 0px;
	   border-top: 10px #3f778b solid;
	   background-color: #0b4c62;
	   width:100%;
	   min-height: 500px;
	   z-index: 995;
	   text-align:center;
	}
	#page2{
	   position:relative;
	   top: 0px;
	   background-color: #011f2d;
	   width:100%;
	   height:auto;
	   min-height: 500px;
	   z-index: 995;
	   text-align:center;
	}
	.maxwidth {
	   max-width: 1500px;
	   min-width: 1000px;
	}
	#cloud1{
	   position: absolute;
	   left: 50px;
	   height: auto;
	   width: 500px;
	   top: 150px;
	   z-index:5;
	}
	#cloud2{
	   position: absolute;
	   right: 150px;
	   height: auto;
	   width: 500px;
	   top: 50px;
	   z-index:5;
	}
	nav{
	   position:fixed;
	   height: 50px;
	   top: 0px;
	   left: 0px;
	   width: 100%;
	   background:#0b4c62;
	   z-index: 999;
	   color:#FFF;
	   display: none;
	}
	#banner {
	   position:absolute;
	   right: 150px;
	   bottom: 150px;
	   width: 275px;
	   height: 350px;
	   z-index: 99;
	   background-image:url(img/Asset%203banner.png);
	   background-size: contain;
	   background-repeat: no-repeat;
	   padding-top: 200px;
	   box-sizing:border-box;
	   
	}
	#myworkTitle {
	   position:relative; 
	   width: auto;
	   margin-left: auto;
	   margin-right:auto;
	   height: auto;
	   font-size: 47px;
	   font-weight: bold;
	   color:#d57e2e;
	   padding-top: 20px;
	}
	#background2 {
	   position: relative;
	   width: 100%;
	   height: 100%;
	   z-index: -999;
	}
	#content1 {
	   position:absolute;
	   height: auto;
	   width: 48%;
	   max-width: 650px;
	   top: 34%;
	   right: 42%;
	   font-size: 18px;
	   color: #09b1ae;
	   text-align:left;
	}
	#content2{
	   height: auto;
	   width: 85%;
	   position: relative;
	   text-align:left;
	   margin-left:auto;
	   margin-right: auto;
	}
	#containerWork{
	   position: relative;
	   height: auto;
	   width: 500px;
	   margin: 10px;
	   display: inline-block;
	   box-sizing: border-box;
	   padding: 10px;
	   vertical-align: top;
	   color:#FFF;
	   overflow:hidden;
	   font-size: 12px;
	}
	#containerWork h2{
	   color:#09b1ae;
	   padding-bottom: 10px;
	   
	}
	h1{
	   color:#d57e2e;
	   padding-bottom: 35px;
	   padding-top: 35px;
	   
	}
	#content2 h1{
	   color:#d57e2e;
	   padding-bottom: 10px;
	   padding-left:20px;
	   padding-top: 35px;
	   
	}
	#contactButton{
	   background-image:url(img/contactButton.png);
	   width: 90%;
	   height: 120px;
	   background-size: 261px 120px;
	   background-size: contain;
	   background-repeat: no-repeat;
	   margin-left: auto;
	   margin-right: auto;
	   
	}
	#contactButton:hover{
	   background-image:url(img/contactButton%20Click.png);
	   width: 90%;
	   height: 120px;
	   background-size: 261px 112px;
	   margin-top: 10px;
	   background-size: contain;
	   background-repeat: no-repeat;
	   transition: margin-top 0.4s;
	   margin-left: auto;
	   margin-right: auto;
	}
	.slider {
  width: 100%;
  text-align: center;
  overflow: hidden;
}

.slides {
  display: flex;
  
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  
  
  
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  
  /*
  scroll-snap-points-x: repeat(300px);
  scroll-snap-type: mandatory;
  */
}
.slides::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.slides::-webkit-scrollbar-track {
  background: transparent;
}
.slides > div {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
  height: auto;
  margin-right: 50px;
  transform-origin: center center;
  transform: scale(1);
  transition: transform 0.5s;
  position: relative;
  background-color: #01151f;
}
.slides > div:target {
/*   transform: scale(0.8); */
}
.author-info {
  background: rgba(0, 0, 0, 0.75);
  color: white;
  padding: 0.75rem;
  text-align: center;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  margin: 0;
}
.author-info a {
  color: white;
}
.slider > a {
  display: inline-flex;
  width: auto;
  height: auto;
  background-color: #d57e2e;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  margin: 40px;
  padding: 20px;
  position: relative;
  color: #ffff;
}
#contactForm{
width: 100%;
height: 100%;
background-color: #160536e0;
position: absolute;
display:none;
z-index: 999;
}
.form-container{
width: 700px;
height: auto;
text-align: left;
position: relative;
margin-left: auto;
margin-right: auto;
color: white;
margin-top: 100px;
}
.form-container input{
padding: 5px;
margin-bottom: 20px;
}