@charset "utf-8";
/* CSS Document */


/* Ik heb "a" gebruikt in nav bar zodat ik het maar 1 keer hoefden te doen, omdat het dan ook bij de rest met die selectors naam werd toegepast. Hierdoor staat er soms geen uitleg bij, omdat hij dan bij de zonder/met a staat. (dat zijn dezelfde code.) 
Hover heb ik gebruikt om een hover effect toe te voegen, hier heb ik alleen de kleur veranderd en verder niets

font-size: 45px; 
	text-align: center;
	letter-spacing: 2px;
	color: #2E120B;
	font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: normal;*/

nav {
    background-color: #FEFEF7;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;	
}
body {
    background-color: #FEFEF7;
	font-family: montserrat, sans-serif;
	

    	
}
article{
   margin: 0px;
	padding: 0px;
	color: #2E120B;
    font-family: montserrat, sans-serif;
    font-style: normal;
	list-style-type: none;
    text-decoration: none;
}

.inwerking {
    background-image: url(../images/inwerking.png);
	background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
}

.box { 
	background-image: url("../images/Header.jpg");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: left top;
	height: 555px;
	margin-top:80px;
}
.boxinner {
	max-width: 650px;
	position:relative;
	display:block;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -72%);
	background: rgba(255,255,255,.6);
	padding: 15px;
	text-align: center; 
	letter-spacing: 2px;
}
.boxinnerikke{
	font-size: 45px;
	color: #2E120B;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: bold;
	max-width: 650px;
	position:relative;
	display:block;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -31%);
	background: rgba(255,255,255,.6);
	padding: 15px;
	text-align: center; 
	letter-spacing: 2px;
}
.boxinner p{
	margin: 10px;
	font-size: 10px;
}

section{
    background-image: url("../images/BackgroundOne.png");
    background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: left center;
    height: 700px;
	margin-bottom: 70px;
	margin-top: 70px; 

}

.blokken{
    align-items: center;
    justify-content: center;
    display: flex;
    font-weight: normal;
    text-decoration: none;
	color: #2E120B;
}
.sectionhead{
    font-size: 45px;
    text-align: center;
    letter-spacing: 2px;
    color: #2E120B;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: bold;
    padding-top: 20px;
}
.button {
    font-weight: normal;
    text-decoration: none;
	color: #2E120B;
    margin-top: 20px;
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;
    width: 1920px;
	box-shadow: rgba(17, 12, 46, 0.12)
	   0px 48px 100px 0px;
}
.button a:hover{
    font-weight: normal;
    text-decoration: none;
    color: #2E120B;
  
}

h2{
	font-weight: normal;
    text-decoration: inherit;
	color: #2E120B;
}
p{font-weight: normal;
    text-decoration: inherit;
	color: #2E120B;}
img { 
width: 325px;
height: 235;
postion: absolute;
}



footer{
	background-image: url("../images/BackgroundTwo.png");
	background-size: cover;
    background-attachment: local;
    background-repeat: no-repeat;
    background-position: left bottom;
    height: 180px;
}

.sociaal {
	align-items: center;
    justify-content: center;
    text-align: right;
    position: static;
    float: right;
    letter-spacing: 2px;
    color: #2E120B;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: lighter;
	padding-top: 40px;
	padding-right: 70px;
}
.socials {
	 font-weight: bold;	
}
.logos {
	width: 50px;
	padding-left: 15px;
}




.tekst{
	align-items: center;
    justify-content: center;
    text-align: left;
    position: static;
    float: left;
    letter-spacing: 2px;
    color: #2E120B;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: lighter;
	padding-top: 40px;
	padding-bottom: 40px;
	padding-left: 70px;
	
}
.contact {
    font-weight: bold;	
}
.mail{
    text-decoration: underline;	
}

.navlist {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    font-size: large;
	/* De margin in padding staan op 0 zodat het dicht om woorden blijft en het niet 1 groot blok wordt. Daarnaast heb ik de "list-style-type" op none staan, omdat er anders nog puntjes bij staan, dit vind ik persoonlijk niet in een navigatie bar passen. Dan heb ik een overflow toegevoegd en die op hidden gezet als soort safety feature. Zo zal als de tekst niet op de pagina past, niet meer zichtbaar zijn, anders zou er een scroll bar de hele tijd onderstaan, wat best hinderlijk is voor het oog.  */
}

.navlistitemname {
    float: left;
    list-style-type: none;
    text-decoration: none;
    color: #2E120B;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: bold;
	/* Ik heb mijn naam helemaal links neergezet, dit is namelijk een vaste plaats voor een logo of thuis knop en dit leek mij dan ook het gebruiksvriendelijkst. De style-type en text-decoration staan op none omdat er anders een puntje voor zou staan en een lijn eronder van een link, dit is hinderlijk voor het oog en lijdt af. Verder heb ik nog mijn lettertype toegevoegd.  */
}
.navlistitemprofiel {
    float: right;
    list-style-type: none;
    text-decoration: none;
    color: #2E120B;
    padding-top: 28px;
    padding-right: 16px;
    padding-bottom: 28px;
    padding-left: 16px;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: normal;
	/* Ik heb mijn profiel helemaal rechts neergezet, dit is namelijk een bekende plaats voor profiel knop en dit leek mij dan ook het gebruiksvriendelijkst. De style-type en text-decoration staan op none omdat er anders een puntje voor zou staan en een lijn eronder van een link, dit is hinderlijk voor het oog en lijdt af. Dan heb ik nog padding toegevoegd, zodat het netjes gelijk stond met de andere knoppen (dezelfde hoeveelheid pixels) en zodat het niet helemaal in de hoek stond gepropt. Verder heb ik nog mijn lettertype toegevoegd.  */
}
.navlistitemname a {
    color: #2E120B;
    float: left;
    text-decoration: none;
    list-style-type: none;
    padding-right: 16px;
    padding-left: 16px;
	
}
.navlistitemprofiel a {
    color: #2E120B;
    list-style-type: none;
    padding-top: 28px;
    padding-right: 16px;
    padding-bottom: 28px;
    padding-left: 16px;
    text-indent: 0px;
    text-decoration: none;
}


.navlistitem a {
    text-decoration: none;
    display: block;
    padding-top: 28px;
    padding-right: 16px;
    padding-bottom: 28px;
    padding-left: 16px;
    color: #2E120B;
    float: left;
    font-family: montserrat, sans-serif;
    font-style: normal;
    font-weight: normal;	
	/* Ik heb mijn knoppen links neergezet, dit omdat het overzichtelijkst eruit ziet. De style-type en text-decoration staan op none omdat er anders een puntje voor zou staan en een lijn eronder van een link, dit is hinderlijk voor het oog en lijdt af. Verder heb ik nog padding toegevoegd, zodat het niet te dicht op elkaar stond of te ver van elkaar af. En dan heb ik nog mijn lettertype toegevoegd.  */
}
.navlistitem a:hover {
    color: #523024;
    background-color: #FDFDE1;
    float: left;
	
}

.navlistitemprofiel a:hover {
    background-color: #FDFDE1;
    color: #523024;
    padding-top: 28px;
    padding-right: 16px;
    padding-bottom: 28px;
}