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

/** 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			---------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/

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;}
	


/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Hero Image			-------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/



.hero {
	width: 100%;
  	position: relative;
	overflow: hidden;
}

.heroImage {
	width: 100%;
	max-height: 400px;
	display:flex;
	flex-basis: 80%;
	object-fit: cover;
	background: no-repeat center top;
    background-size: 100%;
}
/** https://www.youtube.com/watch?v=SFrPyuVSdqQ this saved me so badly, bless this man **/

/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Student Card			---------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/
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%);

}


.studentcard {
	display: grid;
	grid-template-areas: 
	'img img article article article article'
	'img img article article article article'
	'img img article article article article';
	grid-gap: 5px;
	grid-column-start: 1;
	padding-top: 20px;
	background-color: #343232;
	box-shadow: 5px 5px rgba(139,0,0,0.5);
	margin: 50px;
	width: 35%;
	margin-left: 30%;
	height: 50%;
	margin-bottom: 3%;
	position:relative;
	top:-100px;
}

.studentcard > img {
	border-radius: 100%;
	width: 350px;
	height: 350px;
	padding: 10px;
}

.studentcard > article {
	float: right;
	margin-left: 0px;
	margin-bottom: 10px;
}

.studentcard > article > h1 {
	color: white;
	margin: 0px;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
}

.studentcard > article > h3 {
	color: white;
	margin: 0px;
	font-size: 25px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
}

.studentcard > article > h2 {
	color: #A51919;
	margin: 0px;
	font-size: 35px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
}

.studentcard > article > a {
	color: white;
	background: linear-gradient(90deg, rgba(165,25,25,1) 0%, rgba(113,24,24,1) 100%);
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	font-family: Verdana;
	padding: 12px 14px;
	margin-top: 70%;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 500;
	font-style: normal;
	letter-spacing: 1px;
	float: left;
	margin-top: 150px;
	/** met 	border-radius: x;	kan je een vlak een ronde edge geven. **/
}


/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Main Content			---------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/
.MainContent-h3 {
	color:white;
	margin-top: 0%;
	padding-left: 10%;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
}

.homepageContent{
	background-color: rgb(52,50,50);
	min-height: 400px;
	margin-left:10%;
	margin-right: 20%;
}


.homepageContentNav ul {
	background-color: rgb(52,50,50);
	min-height: 600px;
	width: 80%;
	padding-left:10%;
	margin-right: 20%;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 10px;
	box-shadow: 3px 3px rgba(139,0,0,0.5);
}

.homepageContentNav a {
	color: white;
	padding-right: 140px;
	text-align: left;
	font-size: 25px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 400;
	font-style: normal;
	float:left;
	position:relative;
	margin-top:55%
}

.GridBox {
	min-height: 700px;
}

.contentcardImages {
	flex-basis:60%;
	object-fit:cover;
	margin:0px;
	position:relative;
	max-width:300px;
	max-height:300px;
	height:auto;
	padding-left:20%;
	padding-right:20%;
	background-color:rgb(40,40,40);
}

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

.homepageContentNav p {
	color:white;
	position: absolute;
	word-wrap: normal;
	font-size:25px;
	font-family:itc-officina-sans-pro,sans-serif;
	padding-top: 60px;
	max-width: 500px;
}

/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Main Content Highlights			-------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/

.homepageHighlights { 
	min-height: 650px;
	margin-left: 10%;
	margin-right: 20%;
	display:grid;
	grid-template-areas: 
	'donut donut poster conceptmap' ;
	grid-gap: 20px;
	grid-column-start: 1;
	
}

.donut {
	height: 500px;
	width: auto;
}

.poster {
	height: 500px;
	width: auto;
}

.conceptmap {
	height: 500px;
	width: auto;
}

.homepageHighlights > h3 {
	color:white; 
	margin-left: 10%;
	font-size: 60px;
	font-family: itc-officina-sans-pro,sans-serif;
	font-weight: 700;
	font-style: normal;
}


/**------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------         Call-to Action (Blender)			---------------------------------------------------------------------------
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------**/


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;
}

/**
 .grid{
	display: grid;
	grid-template-columns: repeat(4) 1fr;
	grid-column-gap: 10px;
	color:red;
	min-height: 150px;
}
**/

.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. **/