/* KLEUREN 

geel 		#fade62
oranje	#dc812e
blauw 	#2e57a4
roze		#df8fb8
zwart		#292a28

*/

html {
  scroll-behavior: smooth;
}

body {
	background-color: white;

}


/* ALGEMEEN */

a button {

	padding-left: 20px;
	padding-right: 20px;
	border: solid 2px;
	border-radius: 100px;
	cursor: pointer;
	height: 40px;
	margin: auto;
	margin-top: 30px;
	padding: 0px;
	color: white;
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 12pt;
}



div.intro {
	float: left;
	width: 60%;
	padding-right: 40px;
}

div.intro h1 {
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 38pt;
}

div.intro p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 15pt;
}

#illustratie div.intro, #boekomslagen div.intro, #ontwerp-en-dtp div.intro {
	color: white;
}

#content {
	background-color: white;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
}

#content img {
	width: 100%;
}


#content h4 {
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 13pt;
}

#content h5 {
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 10pt;
	color: #2e57a4;
}

#content p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 11pt;
}

#content div.kolom1van3, #content div.kolom2van3, #content div.kolom3van3, #content div.kolom1van2, #content div.kolom2van2 {
	text-align: center;
}

div.kolom1van3, div.kolom2van3, div.kolom3van3 {
	width: 30%;
	float: left;
}

div.kolom1van2, div.kolom2van2 {
	width: 48%;
	float: left;
}

div.kolom1van1 {
	width: 100%;
	float: left;
}

div.tussen {
	width: 100%;
	float: left;
	height: 50px;
}






/* HEADER */

header {
	background-color: #fade62;
	width: 100%;
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 16pt;
}

img.logo {
	width: 200px;
}


@media screen and (max-width: 1000px) {
	header {
		font-size: 12pt;
	}

}

@media screen and (min-width: 800px) {
	header {
		height: 150px;
	}
	img.logo {
		width: 130px;
		float: left;
		margin-left: 10%;
		margin-top: 10px;
	}
	div.topnav {
		padding-top: 60px;
		float: right;
		margin-right: 10%;
	}

}


.topnav {
	overflow: hidden;
}

.topnav a {
	color: black;
	text-align: center;
	padding: 14px;
	text-decoration: none;
}


.topnav a.oranjeon, li a.oranjeon {
	color: #dc812e ;
}


.oranje:hover {
	color: #dc812e ;
}

.topnav a.rozeon, li a.rozeon {
	color: #df8fb8 ;
}

.roze:hover {
	color: #df8fb8 ;
}

.topnav a.blauwon, li a.blauwon {
	color: #2e57a4 ;
}

.blauw:hover {
	color: #2e57a4 ;
}


.topnav a.witon, li a.witon {
	color: white ;
}

.wit:hover {
	color: white ;
}






.topnav .icon {
	display: none;
}

/*hamburger menu gesloten */
@media screen and (max-width: 800px) {
  .topnav a {
  	display: none;
  }
  .topnav a.icon {
 	float: right;
    display: block;
  }

}

/*hamburger menu geopend */
@media screen and (max-width: 800px) {
  .topnav.responsive {
  	position: relative;
  }
  .topnav.responsive a.icon {
    position: absolute;
 	right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
  }
}


/* animated icon */

.container {
	display: inline-block;
	cursor: pointer;
/*	position: fixed;
	top: 10px;
	right: 10px; */
}

.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: #000000;
	margin: 6px 0;
	transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}







/* HOMEPAGE INTRO */

#homepage {
	background-color: white;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	height: auto;
}

#homepage img, #illustratie img, #boekomslagen img, #ontwerp-en-dtp img {
	width: 40%;

}

#homepage button{
	border-color: #dc812e;
	background-color: #dc812e;
	width: 150px;
}

#homepage button:hover {
	border-color: #292a28;
	background-color: #292a28;
}




/* HOMEPAGE PORTFOLIO */

#portfolio {
	background-color: #df8fb8;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#portfolio h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	padding-bottom: 20px;
}

#portfolio img {
	width: 100%;
}

#portfolio button {
	border-color: #2e57a4;
	background-color: #2e57a4;
	width: 135px;
}

#portfolio a button:hover {
	border-color: white;
	background-color: white;
	color: #2e57a4;
}




/* HOMEPAGE SAMENWERKINGEN */

#samenwerkingen {
	background-color: #292a28;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 100px;
}

#samenwerkingen h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	color: white;
	padding-bottom: 20px;
}


/* SAMENWERKINGEN LOGOS */


@keyframes slide {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}

.logos {
	overflow: hidden;
	padding-top: 50px;
	white-space: nowrap;
	position: relative;
}

.logos:hover .logos-slide {
	animation-play-state: paused;
}

.logos:before, .logos:after {
	position: absolute;
	top: 0px;
	width: 18%;
	height: 100%;
	content: "";
	z-index: 2;
}

.logos:before {
	left: 0px;
	background:  linear-gradient(to left, rgba(41, 42, 40, 0), rgba(41, 42, 40, 1));
}

.logos:after {
	right: 0px;
	background:  linear-gradient(to right, rgba(41, 42, 40, 0), rgba(41, 42, 40, 1));
}



.logos-slide {
	display: inline-block;
	
	animation: 19s slide infinite linear;

}

.logos-slide img {
	height: 100px;
	margin: 0 30px;
}







/* HOMEPAGE CONTACT */

#contact {
	background-color: #2e57a4;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#contact h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	color: white;
	padding-bottom: 20px;
}

#contact p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 13pt;
	text-align: center;
	color: white;
}

#contact button {
	border-color: #dc812e;
	background-color: #dc812e;
	width: 180px;
}

#contact a button:hover {
	border-color: white;
	background-color: white;
	color: #dc812e;
}







/* FOOTER */

footer {
	background-color: #fade62;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
}


div.credits {
	width: 25%;
	height: auto;
	float: left;
	text-align: center;
}


img.logofooter {
	width: 60%;
	margin: auto;
	
}

p.credits {
	font-family: "Avenir Next";
	font-weight: bold;
}

div.footernav {
	width: 75%;
	height: auto;
	float: left;
}

footer nav {
	float: left;
	width: 30%;
}

nav.portfolio {
	margin-left: 10%;
}

nav.contact {
}

nav.volg {
}

h3.footernav {
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 17pt;
}

ul {
	list-style: none;
	padding-left: 0;

}

li  {
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 12pt;
	margin-top: 20px;
}

li a {
	text-decoration: none;
}

a.portfolio {
	text-decoration: none;
}

li a:hover {
	color: white;
}







/* ILLUSTRATIE PAGINA */

#illustratie {
	background-color: #dc812e;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	height: auto;
}



#illustratie button{
	border-color: #292a28;
	background-color: #292a28;
	width: 210px;
}

#illustratie button:hover {
	border-color: white;
	background-color: white;
	color: #292a28;
}

#illustratie-contact {
	background-color: #292a28;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#illustratie-contact h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	color: white;
	padding-bottom: 20px;
}

#illustratie-contact p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 13pt;
	text-align: center;
	color: white;
}

#illustratie-contact button {
	border-color: #dc812e;
	background-color: #dc812e;
	width: 180px;
}

#illustratie-contact a button:hover {
	border-color: white;
	background-color: white;
	color: #dc812e;
}






/* BOEKOMSLAGEN PAGINA */

#boekomslagen {
	background-color: #df8fb8;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	height: auto;
}

#boekomslagen button{
	border-color: #292a28;
	background-color: #292a28;
	width: 210px;
}

#boekomslagen button:hover {
	border-color: white;
	background-color: white;
	color: #292a28;
}

#boekomslagen-contact {
	background-color: #292a28;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#boekomslagen-contact h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	color: white;
	padding-bottom: 20px;
}

#boekomslagen-contact p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 13pt;
	text-align: center;
	color: white;
}

#boekomslagen-contact button {
	border-color: #df8fb8;
	background-color: #df8fb8;
	width: 180px;
}

#boekomslagen-contact a button:hover {
	border-color: white;
	background-color: white;
	color: #df8fb8;
}





/* ONTWERP EN DTP PAGINA */

#ontwerp-en-dtp {
	background-color: #2e57a4;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	height: auto;
}

#ontwerp-en-dtp button{
	border-color: #292a28;
	background-color: #292a28;
	width: 210px;
}

#ontwerp-en-dtp button:hover {
	border-color: white;
	background-color: white;
	color: #292a28;
}

#ontwerp-en-dtp-contact {
	background-color: #292a28;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#ontwerp-en-dtp-contact h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	color: white;
	padding-bottom: 20px;
}

#ontwerp-en-dtp-contact p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 13pt;
	text-align: center;
	color: white;
}

#ontwerp-en-dtp-contact button {
	border-color: #2e57a4;
	background-color: #2e57a4;
	width: 180px;
}

#ontwerp-en-dtp-contact a button:hover {
	border-color: white;
	background-color: white;
	color: #2e57a4;
}




/* OVER MIJ */

#over-mij {
	background-color: white;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
}

#over-mij div.kolom2van2 {
	text-align: center;
}

#over-mij img {
	width: 100%;
}


#over-mij h4 {
	font-family: "Avenir Next";
	font-weight: bold;
	font-size: 13pt;
}

#over-mij p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 11pt;
}


#over-mij ul {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 10pt;
}

#over-mij button {
	border-color: #292a28;
	background-color: #292a28;
	width: 140px;
}

#over-mij a button:hover {
	border-color: #dc812e;
	background-color: #dc812e;
	color: white;
}

/* KLEUREN 

geel 		#fade62
oranje	#dc812e
blauw 	#2e57a4
roze		#df8fb8
zwart		#292a28

*/


#over-mij-contact {
	background-color: #dc812e;
	width: 100%;
	margin: 0px;
	float: left;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 50px;
	padding-bottom: 50px;
	text-align: center;
}

#over-mij-contact h2 {
	text-align: center;
	font-family: "Avenir Next";
	font-weight: bold;
	color: white;
	padding-bottom: 20px;
}

#over-mij-contact p {
	font-family: "Avenir Next";
	font-weight: normal;
	font-size: 13pt;
	text-align: center;
	color: white;
}

#over-mij-contact button {
	border-color: #2e57a4;
	background-color: #2e57a4;
	width: 180px;
}

#over-mij-contact a button:hover {
	border-color: white;
	background-color: white;
	color: #dc812e;
}












/* DIVERSE SCHERMFORMATEN */


@media screen and (max-width: 1350px) { /* iets kleiner scherm */
	#homepage {
		height: auto;
	}
	div.intro {
		width: 50%;
		padding-right: 40px;
	}

	div.intro h1 {
		font-size: 32pt;
	}

	#homepage img, #illustratie img, #boekomslagen img, #ontwerp-en-dtp img {
		width: 50%;
		padding-top: 50px;
	}

	h3.footernav {
		font-size: 15pt;
	}

	li {
		font-size: 11pt;
	}

}




@media screen and (max-width: 1000px) { /* klein scherm */
	div.intro h1 {
		font-size: 28pt;
	}

	div.intro p {
		font-size: 13pt;
	}

	#portfolio h2, #samenwerkingen h2, #contact h2 {
		font-size: 18pt;
	}

	h3.footernav {
		font-size: 13pt;
	}

	li {
		font-size: 9pt;
	}

}



@media screen and (min-width: 800px) { /* alles groter dan telefoon */
	div.kolom1van3 {
	margin-right: 5%;
	}
	div.kolom3van3 {
	margin-left: 5%;
	}

	div.kolom1van2 {
	margin-right: 2%;
	}
	div.kolom2van2 {
	margin-left: 2%;
	}


}




@media screen and (max-width: 800px) { /* telefoon */
	#homepage {
		height: auto;
	}

	div.intro {
		float: left;
		width: 100%;
	}

	div.intro h1 {
		font-size: 30pt;
	}

	div.intro p {
		font-size: 15pt;
		margin-top: 50px;
		margin-bottom: 50px;
	}

	#homepage img, #illustratie img, #boekomslagen img, #ontwerp-en-dtp img {
		width: 100%;
		margin-top: 70px;
		margin-bottom: 50px;
	}

	#portfolio {
		height: auto;
	}

	div.kolom1van3, div.kolom2van3, div.kolom3van3, div.kolom1van2, div.kolom2van2 {
		float: left;
		width: 100%;
		margin-bottom: 50px;
	}

	#portfolio button {
		margin-bottom: 50px;
	}

	#portfolio h2 {
		font-size: 20pt;
	}

	footer { 
	text-align: center;
	}

	div.credits {
		width: 100%;
		height: auto;
	}

	img.logofooter {
		width: 50%;
	}

	div.footernav {
		width: 100%;
		margin: auto;
	}

	footer nav {
		float: left;
		width: 100%;
		margin-top: 50px;
	}
	nav.portfolio {
		margin-left: 0%;
	}

	h3.footernav {
			font-size: 17pt;
	}

	li {
		font-size: 12pt;
	}


}