/* BASICS */

HTML, BODY {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
} 

SPAN {
  vertical-align: middle;
  line-height: normal;
  padding: 5px 5px;
}

/* ELEMENTEN */
#CONTAINER {
   max-height: 100%;
   position: relative;
	}
   
#CONTENT {
  height: 100%; 		/*100% - Height of the footer */
  background-image: url("../images/skyline.png");
  background-repeat: no-repeat;
  background-blend-mode: dodge;
  background-position: center top;
  font-family: Arial, Helvetica, sans-serif;
	}

#FOOTER {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 10%; /* Height of the footer */
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  background-color: #a7b6be;
  background-image: url("../images/skyline.png");
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center center;
  /*background: linear-gradient(180deg, rgba(255,255,255,1) 17%, rgba(91,155,213,1) 67%, rgba(131,58,180,1) 100%);*/
  }


/* HEADINGS*/

H1 {
  font-size: 30px
  color: #80800;
 }


H2 {
  font-size: 20px;
  color: #80800;
 }


P {
  font-size: 15px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
 }


IMG {
  width: 70%;
  height: auto;
}


/* LINKS */

A {
  text-decoration: none;
  color: black;
}


A:link {
  text-decoration: none;
  color: black;
}

A:visited {
  text-decoration: none;
  color: black;
  
}

A:hover {
  text-decoration: none;
  color: orange;
}

A:active {
  text-decoration: none;
  color: dark-orange;
}

   
/* CLASSES */

  
.buttonbox {
  background-color: #5B9BD5;
  color: black;
  border: 2px solid grey;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  border-radius: 5px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.alignleft {
	float: left;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 10px;
	padding-left: 100px;
}
.alignright {
	float: right;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 100px;
	padding-left: 10px;