* {
	        margin: 0;
	        border: 0;
	        padding: 0;
}

body {
	
	background-image:url('../bg/bg.jpg');
	background-repeat: repeat-x;
	overflow: auto;
	}

p {
	padding: 1%;
	/*color: #788598;*/
	}
img {
	text-align: center;
	max-width: 100%;
	height: auto;
	width: auto;
	}

hr {
	
    height: 3px;
    width: 45%;
   margin: 4% auto;
    background: #788598;
    
}	
#wrapper {
	margin: 0 auto;
	max-width: 960px;
	width: 98%;
	-webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain;
	background-image:url('../bg/bgheader.png');
	background-repeat: no-repeat;
   }
	
/* HEADER */

.mainHeader {
	width: 100%;
	
	max-height: 335px;
	text-align: center;
	/*border: 1px solid red;*/
    position: relative;/* nodig om position absolute in de container te houden*/
	}

.mainHeader img {
 	width: 25%;
 	height: auto;
 	margin: 0;
 	float: left;	 	
 	
}

center {
	font-family: 'Architects Daughter', cursive;
	width: 72%;
	float: right;
	margin: 5% 0 0 0;
	text-align: left;
	font-size: 2.6em;
	line-height: 24px;
	font-weight: inherit;
    color: #fff;
    
   
	
}
.clear {
	clear: both;
}

/*.mainnav {
	background-image:url('../bg/navbg.jpg');
    height: 83px;
    color: #000;
    
   
}*/


.navheader {
	width: 24%;
	float: left;
	text-align: center;
	font-size: 1.2em;
	margin: 2% 0 ;
	padding-top: 2%;
	border-right: 1px solid black;
	background-image:url('../bg/navbg.jpg');
    height: 50px;

	
	}
/* CONTENT */
.navcontent {
	font-size: 12px;
	font-style: italic;
}
.navphone {
	font-size: 18px;
	padding-top: 4%;
}
main ul li {
	padding: 0.3%;
	list-style: circle;
	list-style-position: inside;/*markering bullets in het onderdeel*/
}
ul.social li {
	display: inline;/* now theyline up horizontally*/
}

ul.social li img {
	height: 10%;/* smaller size */
}


article {
	float: left;
	margin: 1.5% 1% 0 1%;
	width: 60%;
	padding: 0 2% 2% 2%;
	background-color: #f6f5f2;	
	border: 3px solid whitesmoke;
	text-align: left;
	color: #000;
}

aside {
	float: right;
	margin: 1.5% auto;
	width: 30%;
	height: auto;
}
.video {
	text-align: center;
	
}
.snelcontact {
	float: right;
	width: 25%;
	}
	
.returnbutton {
	float: right;
	width: 45%;
	height: 25px;
	background-color: #9c6c21;
	color: #fff;
	text-align: center;
    border-radius: 5px;
	padding-top: 1%;
	margin: 5% 0;
	}

.returnbutton a:link  {
	font-size: 1.0em;
	color: #FFF;
}
.returnbutton a:visited  {
	font-size: 1.1em;
	color: #FFF;
}
.returnbutton a:hover {
	color: #a6c5f9;
}
.belbutton {
	float: right;
	background-color: #9c6c21;
		/*background-image:url('../p/telefoon1.png');*/
	border-radius: 5px ;
	width: 99%;
	height: 40px;
	color: #fff;
	text-align: center;
	margin: 4% 0 2% 0;	
	
}

.belbutton a:link {
	color: #fff;
}
.belbutton a:visited {
	color: #fff;
}
.belbutton a:active {
	color: #a6c5f9;
}
.belbutton a:hover {
	color: #a6c5f9;
}


/*----END CONTENT---- */	

/* FOOTER */

footer {
	width: 100%;
	overflow: hidden; /* get rid of the grey section above */
	opacity: 0.90;
}

footer.bottom {
   font-size: 0.8em;
	max-height: 58px;
	text-align: center;
	
}
.footersection {
	width: 29%;
	float: left;
	margin: 2% ;
	text-align: left;
	font-size: 1.0em; 
	border-right: 2px solid #9c6c21;
	}
.footersection table tr td {
	
	text-align: center;
}
footer h3 {
	color: #9c6c21;
	text-align: center;
	}
footer p {
	font-size: 1.0em;
	color: #000;
}
footer li {
	list-style: none;
}

.openingstijden{
	
	width: 100%;
	padding: 0.5% 0;
    font-size: 1.0em;
     background-color: whitesmoke;
}
.openingstijden h3 {
	text-align: center;
}

/*footer p a {
	font-size: 0.8em;
	color: #788598;
	text-decoration: none;
}*/
/* style the social media icons .style them horizontal*/

/*--END FOOTER --*/

.navwebshop {
	font-size: 1.2em;
	margin: 0 5%;
	border: 1px solid red;
}
	
@media only screen and (min-width: 646px) and (max-width: 770px){
	
.navheader {
	font-size: 1.0em;
	margin: 2% 0 ;
	padding-top: 2%;
	}
.navphone {
	font-size: 14px;
	padding-top: 4%;
}

	}

@media only screen and (min-width: 150px) and (max-width: 645px){
	
article {
	width: 95%;
	}
aside {
	width: 95%;
	margin-right: 3%;
	}
.navheader {
	width: 45%;
	margin:  1% 2% ;
	padding-top: 1%;
	border-right: 0;
	
	}
.navphone {
	font-size: 14px;
	padding-top: 1%;
	
}


.footersection {
	width: 99%;
	margin: 1% 0 ;
	text-align: center;
	border-bottom: 1px solid #000;
	border-right: 0;
	}

	}
@media only screen and (min-width: 150px) and (max-width: 359px){

.navheader {	
	font-size: 1.0em;
	height: 25px;
	}
.navcontent  {
	display:none;
}	
.navphone {
	display:none;
}
	}