/** ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- **/

/** Om een drop schadow aan dingen toe te voegen geldt het als volgt 	box-shadow: 5px 5px rgba(x,x,x) 	De '5px' geeft aan welke kanten de schaduw wordt toegevoegd, in dit geval dus rechts en onderaan en de RGB geeft aan welke kleur je hier wilt **/
/** Lettertypes voor mijn webpagina
	Offica Sans ITC Pro Bold
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
	
	Offica Sans ITC Pro Book
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;

	Offica Sans ITC Pro Medium
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	**/


	body{
		background: linear-gradient(90deg, rgba(17, 17, 17, 1) 0%, rgba(38, 36, 36, 1) 35%, rgba(38, 36, 36, 1) 82%, rgba(68, 67, 67, 1) 100%);
	}
		
	/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
	---------------------------------------------------------------------------         Main Nav bar			---------------------------------------------------------------------------------------
	------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/
	
	#siteHeader{
		min-height: 150px;
	}

	ul{
		list-style-type: none;
	}
	
	.main-nav li {
		display:inline; 
		font-size: 50px;
		font-family: itc-officina-sans-pro,sans-serif;
		font-weight: 700;
		font-style: normal;
		min-height: 150px;
		width: 100%;
		margin: 0px 0px 0px 0px;
		background: linear-gradient(90deg, rgba(17, 17, 17, 1) 0%, rgba(38, 36, 36, 1) 35%, rgba(38, 36, 36, 1) 82%, rgba(68, 67, 67, 1) 100%);
		
	}
	
	.main-nav a {
		color: white;
		float: right;
		margin-right: 40px;
		margin-top: 65px;
		text-decoration: none;
	}
	
	
	/* Dropdown Button */
	.dropbtn {
		background-color:transparent;
		color: white;
		float: right;
		text-decoration: none;
		font-size: 50px;
		font-family: itc-officina-sans-pro,sans-serif;
		font-weight: 700;
		font-style: normal;
		border: none;
        padding-top:20%;
		}
		
		/* de container <div> - is nodig om de positie van de content te plaatsen  */
	.dropdown {
		position: relative;
		float: right;
		color: white;
		text-decoration: none;
		font-size: 50px;
		font-family: itc-officina-sans-pro,sans-serif;
		font-weight: 700;
		font-style: normal;
		}
		
		/* Dropdown Content */
	.dropdown-content {
		display: none;
		position: absolute;
		background-color: rgb(49,47,47);
		min-width: 100px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
		}
		
	.dropdown-content a {
		color: white;
		padding-right: 30%;
		padding-bottom: 10%;
		text-align: left;
		text-decoration: none;
		display: block;
		}
		
		/* Kleur verandering dropwdown links wanneer je hovered */
	.dropdown-content a:hover {background-color: rgb(49,47,47);}
		
		/* Dit laat het dropdown menu zien wanneer je hovered */
	.dropdown:hover .dropdown-content {display: block;}

	

/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Ontdekken!			-------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/

.MainText {
	position:relative;
	background-color: #343232;
	box-shadow: 5px 5px rgba(139,0,0,0.5);
	margin: 50px;
	width: 80%;
	margin-left: 10%;
	min-height:300px;
	height: 100%;
	margin-bottom: 7%;
    text-align:center;
}

.MainText article {
	max-width:100%;
    display:block;
}

.MainText h3 {
	float:left; 
    color:white;
	margin-top: 20px;
	margin-bottom: 45px;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
    max-width:100%;
    padding-left:865px;
}

.MainText h4 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
    padding-top: 100px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	position:absolute;
	left: 20%;
	top: 0px;
}

.MainText h5 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
    padding-top: 100px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	position:absolute;
	left: 30%;
	top: 60%;
}

.MainText p {
	color:white;
	position: absolute;
	word-wrap: normal;
	font-size:25px;
	font-family:itc-officina-sans-pro,sans-serif;
	max-width:100%;
    padding: 5% 10% 0% 10%;
}

.MainText a {
	text-decoration:none;
}

.image1 {
	width: auto;
	height: 500px;
	padding: 10px;
	position:absolute;	
	top:0px;
	left:0px;
}

.image2 {
	width: auto;
	height: 250px;
	padding: 10px;
	position:absolute;	
	top:0px;
	left:400px;    
}

.image3 {
	width: auto;
	height: 350px;
	padding: 10px;
	position:absolute;	
	top:0px;
	left:0px;
}

.image4 {
	width: auto;
	height: 350px;
	padding: 10px;
	position:absolute;	
	top:400px;
	left:150px;
}

/**--------------------------------------------------------------------------------------------------------         Subtext           ---------------------------------------------------------------------------------- **/

.SubtextIllustrator {
	position:relative;
	background-color: #343232;
	box-shadow: 5px 5px rgba(139,0,0,0.5);
	margin: 50px;
	width: 80%;
	margin-left: 10%;
	min-height:800px;
	height: 100%;
	margin-bottom: 7%;
}


.SubtextIllustrator article {
	padding-right: 25%;
	max-width:1000px;
	}

.SubtextIllustrator h3 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
	position:absolute;
	left: 32%;
	top: 0px;
}

.SubtextIllustrator h4 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
    padding-top: 100px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	position:absolute;
	left: 22%;
	top: 0px;
    text-decoration: underline;
}

.SubtextIllustrator h5 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
    padding-top: 100px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	position:absolute;
	left: 32%;
	top: 35%;
    text-decoration: underline;
}

.SubtextIllustratorP1 {
	color:white;
	position: absolute;
	word-wrap: normal;
	font-size:25px;
	font-family:itc-officina-sans-pro,sans-serif;
	padding-top: 60px;
	max-width: 1200px;
	left: 32%;
	top: 8%;
}

/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/


.SubtextPhotoshop {
	position:relative;
	background-color: #343232;
	box-shadow: 5px 5px rgba(139,0,0,0.5);
	margin: 50px;
	width: 80%;
	margin-left: 10%;
	min-height:800px;
	height: 100%;
	margin-bottom: 7%;
}


.SubtextPhotoshop article {
	padding-right: 25%;
	max-width:1000px;
	}

.SubtextPhotoshop h3 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
	position:absolute;
	left: 32%;
	top: 0px;
}

.SubtextPhotoshop h4 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
    padding-top: 100px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	position:absolute;
	left: 22%;
	top: 0px;
    text-decoration: underline;
}

.SubtextPhotoshop h5 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
    padding-top: 100px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	position:absolute;
	left: 32%;
	top: 35%;
    text-decoration: underline;
}

.SubtextPhotoshopP1 {
	color:white;
	position: absolute;
	word-wrap: normal;
	font-size:25px;
	font-family:itc-officina-sans-pro,sans-serif;
	padding-top: 60px;
	max-width: 1200px;
	left: 32%;
	top: 5%;
}


/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Call-to Action (About Me)			---------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/


h4 {
	color:white; 
	padding-top: 5%;
	margin-left: 10%;
	margin-bottom: 0px;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
}

.CallToAction {
	min-height:450px;
	background-color: rgb(52,50,50);
}

.CallToAction > p {
	color: white;
	margin-left: 10%;
	font-size: 25px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.CallToAction > a {
	color: white;
	background: linear-gradient(90deg, rgba(165,25,25,1) 0%, rgba(113,24,24,1) 100%);
	margin-top: 150px;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	padding: 15px 30px;
	float:left;
	margin-top: 30px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 1px;
	margin-left: 10%;
}

/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------- 			Footer 			---------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/

#siteFooter {
	min-height: 300px;
	text-align: left;
	
}


/** https://blog.hubspot.com/website/blog/tabid/6307/bid/19727/easy-html-tricks-for-the-non-technical-marketer.aspx    Deze website legt uit hoe je die horizontale lijn hieronder kan maken met CSS **/

#siteFooter > article {
	float:left;
	margin-left: 10%;
}

#siteFooter > article > hr {
	margin-top: 20%;
	height: 5px;
	width: 400px;
	background-color:white;
}

#siteFooter > article > h3 {
	float:left; 	
	color:white;
	margin-top: 5px;
	margin-bottom: 45px;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
	position:absolute;
}

.p1 {
	color:white;
	margin-top:25%;
	margin-bottom: 10px;
	font-size: 25px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.p2 {
	color:white;
	margin-top:7%;
	margin-bottom: 10px;
	font-size: 25px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
}

#siteFooter > article> a {
	float:left;
	position: relative;
	margin-top: 35%;
	text-decoration: none;
}
/** https://www.w3schools.com/howto/howto_css_social_media_buttons.asp <----- ridder op het witte paard in lastige tijden **/

.fa-instagram {
	background:transparent;
	color: white;
	text-align: left;
	font-size:50px !important;
	padding-right:50px;
}

.fa-twitter {
	background:transparent;
	color: white;
	font-size:50px !important;
	padding-right:50px;
}

/** Ik gebruik hier de 		!imporant 	rule, hiermee kan ik de font-size die in de stylesheet die bovenaan de pagina gelinkt wordt overwriten en dus aanpassen. Ik heb dit gedaan omdat de stylesheet niet kond downloaden, maar deze wel nodig heb voor de pictogrammen. **/