@media screen and (min-width:769px){
body
{
background-image: url("Images/achtergrond1.jpg");
background-repeat:no-repeat;
background-size:100%;

font-family: Tahoma, Arial, Helvetica, Sans-Serif;
}
h1
{
font-size:3em;
color:darkblue;
font-style:oblique;
}
h2
{
text-align:center;
}
table{
border:none;
width:95%;
margin:10px;
border-spacing: 10px;
}
table td
{
width:40%;
height:40%;
margin:10%;
}
#omschrijving
{
position:relative;
}
table td img
{
width:100%;
max-height:90%;
}
table a
{
color:green;
}
#wrapper
{
min-width:98%;
margin-left:auto;
margin-right:auto;
}
.header {
  border-width: 5px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  border-radius: 10px;
  background-color:white;
  position: relative;
  margin-right:auto;
  margin-left:auto;
  width: 98%;
  
  z-index: 4;
  padding:4px;
  text-align:center;
}
.header img
{
max-width:200px;
max-height:100px;
float:left;
}

.sidebar {

  border-width: 5px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  border-radius: 10px;
  background-color:#02224a;
  position: relative;
  width: 15.882175227%;
  margin-top:20px;
  margin-bottom:20px;
  padding:2px;
  float:left;
  margin-right:2px;
}
.content {
  border-width: 5px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  border-radius: 10px;
  background-color:#02224a;
  position: relative;
  float:right;
  width: 75.528700906%;
  margin-top:20px;
  margin-bottom:20px;
 
  
  padding:10px;
  color:white;
}
.footer {
  border-width: 5px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  border-radius: 10px;
  background-color:#02224a;
  clear:both;
  width: 98%;
  margin-left:auto;
  margin-right:auto;
  z-index: 3;
  padding:5px;
  text-align:center;
  color:white;
  font-size:0.875em;
  
}

.sidebar ul
{
padding-left:0px;
width:100%;
}
.sidebar ul li
{
  background-color:darkblue;
  list-style: none;
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  width:99%;
  border-width:1px;
  border-color:black;
  border-style:solid;
  border-bottom: none;
  
}
.sidebar ul li:last-child
{
border: 1px solid black;
}
.sidebar li a
{
display: block;
line-height: 30px;
padding: 4px 8px;
color: white;
font-size:90%;
font-weight: bold;
text-decoration: none;
}
.sidebar ul li a:hover
{
color:green;
}
#googleMap
{
max-width:100%;
height:300px;
}
#googleMap
{
color:black;
}
.content a
{
color:white;
}
.content a:hover
{
color:green;
}

.headerMobile,.mobileNav,.contentMobile
{
display:none;
}
.contentProducten
{
border-width: 5px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  border-radius: 10px;
  background-color:#02224a;
  position: relative;
  float:right;
  width: 75.528700906%;
  margin-top:20px;
  margin-bottom:20px;
 
  
  padding:10px;
  color:white;
}
.img
{
  margin: 5px;
  margin-right:10px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: 142px;
  width: auto;
  float: left;
  text-align: center;
  background-color:darkblue;
}	
.img img
{
height: 90px;
width: 110px;
}
.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
  color:white;
}
}



@media screen and (max-width:768px){
body
{
background-image: url("Images/achtergrond1.jpg");
background-repeat:no-repeat;
background-size:100%;
font-family: Tahoma, Arial, Helvetica, Sans-Serif;


}
.sidebar,.header,.contentProducten{
display:none;
}
.content{
width:100%;
border:none;
border-radius:none;
border-style:none;
  background-color:#02224a;
  position: relative;
  margin-right:auto;
  margin-left:auto;
  margin-bottom:10px;
  padding:10px;
  color:white;
  margin-top:10px;
  max-height:100%;
  min-height:500px;
  
}
.footer {
  border-width: 2px;
  border-color: rgb( 0, 0, 0 );
  border-style: solid;
  
  background-color:#02224a;
  clear:both;
  width: 100%;
  margin-left:auto;
  margin-right:auto;
  
  padding:5px;
  text-align:center;
  color:white;
  font-size:0.875em;
}

.mobileNav img {
max-height:90px;
float:left;
}
.mobileNav
{
width: 100%;
	height: 100px;
display:inline-block;
}
.mobileNav ul
{
margin:0;
padding:0;

}
.mobileNav ul li
{
float:left;
list-style:none;
font-size:24px;
 
  
}
.mobileNav ul li a
{
display: block;
padding: 30px 25px 25px;
margin: 5px 5px;
height: 60px;
color: #fff;
text-decoration: none;
z-index:1;
}
.img
{
  margin: 5px;
  margin-right:10px;
  padding: 5px;
  border: 1px solid #0000ff;
  height: 142px;
  width: auto;
  float: left;
  text-align: center;
  background-color:darkblue;
}	
.img img
{
height: 90px;
width: 110px;
}
.desc
{
  text-align: center;
  font-weight: normal;
  width: 120px;
  margin: 5px;
  color:white;
}
table{
border:none;
width:95%;
margin:10px;
border-spacing: 10px;
}
table td
{
width:40%;
height:40%;
margin:10%;
}
#omschrijving
{
position:relative;
}
table td img
{
width:100%;
max-height:90%;
}
table a
{
color:green;
}
h2
{
text-align:center;
}
.contentMobile{
width:100%;
border:none;
border-radius:none;
border-style:none;
  background-color:#02224a;
  position: relative;
  margin-right:auto;
  margin-left:auto;
  margin-bottom:10px;
  padding:10px;
  color:white;
  margin-top:10px;
  max-height:100%;
  min-height:500px;
  
}
.content a
{
color:white;
}
.content a:hover
{
color:green;
}
}