@font-face {
  font-family: Montserrat-EB;
  src: url(Montserrat-ExtraBold.otf);
}

#hoofdtitel > h1
{
  font-family: Montserrat-EB, Helvetica, sans-serif sans-serif;
  font-weight: 900;
  font-size: 3rem;
}

#container > p
{
  font-family: Helvetica, Arial, sans-serif;
}


#header {
	
  display: -webkit-flex;
	
  display: -ms-flexbox;
	
  display: flex;
	
  -webkit-flex-direction: row;
	
  -ms-flex-direction: row;
	
  flex-direction: row;
	
  -webkit-flex-wrap: nowrap;
	
  -ms-flex-wrap: nowrap;
	
  flex-wrap: nowrap;
	
  -webkit-justify-content: space-between;
	
  -ms-flex-pack: justify;
	
  justify-content: space-between;

}


.headerItem {

  margin: 5px;
}


#buttons {
	
  display: -webkit-flex;
  display: -ms-flexbox;	
  display: flex;	
  -webkit-flex-direction: row;	
  -ms-flex-direction: row;	
  flex-direction: row;	
  -webkit-flex-wrap: wrap;	
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;	
  -ms-flex-pack: center;	
  justify-content: center;	
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: 50px;
  background: #e4003b;
}



.ssprButton {
	
  margin: 10px;
	
  padding: 10px;
	
  width: auto;
	
  height: 190px;
	
  color: #fff;
	
  display: -webkit-flex;
	
  display: -ms-flexbox;
	
  display: flex;
	
  border-top-right-radius: 30px;

  border-bottom-left-radius: 30px;

}


.ssprButton:hover,
.ssprButton:active,
.ssprButton:focus,

.ssprButton:visited {
	
  text-decoration: none;
  color: #fff

}


.ssprButton > div {
  margin: auto;
	font-weight: bold;

  text-align: center;
	
  vertical-align: middle;
	
  font-size: 150%

}


.buttonContainer > div {
	
color: #fff;
	
text-align: center

}


.buttonContainer {
  width: 340px

}


#button1 {

background: url(Reset.jpg);
}


#button2 {

background: url(Register.jpg);
}


#button3 {
	
background: url(Change.jpg);
}