/* For width smaller than 700px: */
body {
	background-color: black;
  	background-repeat: no-repeat;
}

/* For width 700px and larger: */
@media only screen and (min-width: 700px) {
    body { 
    background-color: black;
  	background-repeat: no-repeat;
  	background-image: url("afbeeldingen/relite.jpg");
    }
}

* {
    box-sizing: border-box;
}

/* Add a black background color to the top navigation */
.topnav {
    background-color: #4f4c4c;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    font-family: "Poiret One"
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color: #ddd;
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

/* When the screen is less than 700 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 700px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

#parentDiv{
  	position: relative;
  	margin: 0px;
  	padding: 0px;
}

.responsive-img{
	float: right;
	max-width:100%;
	height:auto;
}

a:link{
	background-color:#4f4c4c;
	z-index:2;
	font-size:large;
	color:#f2f2f2;
	font-family:"Poiret One";	
}

a:visited{
	background-color:#4f4c4c;
	z-index:2;
	font-size:large;
	color:#FFFFFF;
	font-family:"Poiret One";
}

a:hover{
	background-color:#4f4c4c;
	z-index:2;
	font-size:large;
	color:black;
	font-family:"Poiret One";
}

a:active{
	background-color:#4f4c4c;
	z-index:2;
	font-size:large;
	color:black;
	font-family:"Poiret One";
}

h1{
	position:absolute;
	background-color:#FFFFFF;
	left:2%;
	top:5%;
	z-index:2;
	font-size:large;
	color:#4f4c4c;
	font-family:"Poiret One";
	padding:10px;
	border-style:none;
	border-width:1px;
	text-align:right;
	border-radius:1px;
	-moz-border-radius:1px;
	fixed:0;
	opacity:0.500000;
	filter:alpha(opacity=50.000000);
	box-shadow: 0px 0px 0.000000px #000000;
	shadowOpacity:0.000000;
	shadowRadius:0.000000;
	shadowOffSetY:0;
	textAlpha:0.500000;
	indentFlag:0;
	text-indent:0px;
	shapeFlag:0;
	groupNumber:-99;
	line-height:normal;
}

h2{
	background-color: black;
    right:0px;
	font-size:large;
	color:#4f4c4c;
	width:30%;
	height:32px;
	font-family:"Poiret One";
	padding:10px;
	border-style:none;
	border-width:1px;
	text-align:right;
}

h3{
    position: absolute;
    right: 0px;
	font-size:large;
	color:white;
	width:30%;
	height:32px;
	font-family:"Poiret One";
	padding:10px;
	border-style:none;
	border-width:1px;
	text-align:right;
}

h4{
	background-color:#FFFFFF;
	z-index:2;
	font-size:large;
	color:#4f4c4c;
	font-family:"Poiret One";
	padding:10px;
	border-style:none;
	border-width:1px;
	text-align:right;
	border-radius:1px;
	-moz-border-radius:1px;
	fixed:0;
	opacity:0.500000;
	filter:alpha(opacity=50.000000);
	box-shadow: 0px 0px 0.000000px #000000;
	shadowOpacity:0.000000;
	shadowRadius:0.000000;
	shadowOffSetY:0;
	textAlpha:0.500000;
	indentFlag:0;
	text-indent:0px;
	shapeFlag:0;
	groupNumber:-99;
	line-height:normal;
}

p{
	font-family:Arial, Helvetica, sans-serif;
	font-size:small;
}

img {
	align="top";
	max-width: 100%;
	height: auto;
}

ul {
    float: left;
    width: 100%;
    padding: 0;
    margin :0;
    list-style-type: none;
}


blackbox{
   	/***  CSS Box Model  ***/
	float: right;
	top:10%;
   	max-width: 100%;
   	max-height:800px;
   	margin:10px;
   	padding:20px;
   	overflow:auto;

   	/***  CSS Borders  ***/
   	border:1px solid rgb(192, 192, 192);

   	/***  CSS Text and Font  ***/
   	font-family:"Poiret One";
   	color: #f2f2f2;
   	background-color:#4f4c4c;
   	text-align:justify;

   	/***  CSS Rounded Corners  ***/
   	border-radius:5px;
   	-webkit-border-radius:5px;
   	-moz-border-radius:5px;
   	
   	/***  CSS Box Shadow  ***/
   	box-shadow: 5px 5px 8px 0px rgba(192, 192, 192, 1.000) ;

   	-webkit-box-shadow: 5px 5px 8px 0px rgba(192, 192, 192, 1.000) ;

   	-moz-box-shadow: 5px 5px 8px 0px rgba(192, 192, 192, 1.000) ;
   	
}

/* For width 700px and larger: */
@media only screen and (min-width: 700px) {
blackbox{
   	/***  CSS Box Model  ***/
	float: right;
	top:10%;
   	max-width: 570px;
   	max-height:800px;
   	margin:10px;
   	padding:20px;
   	overflow:auto;

   	/***  CSS Borders  ***/
   	border:1px solid rgb(192, 192, 192);

   	/***  CSS Text and Font  ***/
   	font-family:"Poiret One";
   	color: #f2f2f2;
   	background-color:#4f4c4c;
   	text-align:justify;

   	/***  CSS Rounded Corners  ***/
   	border-radius:5px;
   	-webkit-border-radius:5px;
   	-moz-border-radius:5px;
   	
   	/***  CSS Box Shadow  ***/
   	box-shadow: 5px 5px 8px 0px rgba(192, 192, 192, 1.000) ;

   	-webkit-box-shadow: 5px 5px 8px 0px rgba(192, 192, 192, 1.000) ;

   	-moz-box-shadow: 5px 5px 8px 0px rgba(192, 192, 192, 1.000) ;
   	
}
}
/* 
Generic Styling, for Desktops/Laptops 
*/
table { 
  width: 100%; 
  border-collapse: collapse; 
}

td { 
  width: 12, *;
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table, td, tr { 
		display: block; 
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
	}
	

}