@font-face {
	font-family: Artifika-Regular;
	src: url("../style/fonts/Artifika-Regular.ttf") format('truetype');;
}

body {background: url(images/wallpaper.jpg) 0 0 repeat;
	font-size: 18px; 
	font-family: Artifika-Regular;
	src: url("../style/fonts/Artifika-Regular.ttf") format('truetype');
}

wrapper, header, menu, main, text, nav {
	z-index: 1000;
	display: block;
}

#menubuttonactive {
  pointer-events: none;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none;   /* Chrome/Safari/Opera */
  -khtml-user-select: none;    /* Konqueror */
  -moz-user-select: none;      /* Firefox */
  -ms-user-select: none;       /* Internet Explorer/Edge */
  user-select: none;    
	
}

/* Structuur */
#wrapper {
	padding-top:25px;
	width: 96%;
	max-width: 1600px;
	margin: auto;
	position:relative;
	min-height:100%;
	height:100%;
	border-radius: 50px 50px 50px 0px;
	}
#menu {
	padding-top:15px;
	padding-bottom:15px;
	margin-top:5px;
	margin-left:-5px;
	width:24%;
	max-width:250px;
	float:left;
	font-size:2vw;
	border-radius: 0px 0px 25px 25px;
}
#wrapper, #menu {
	background-color: rgba(242, 242, 242, 0.0);
	border: 5px solid;
	border-color: rgba(242, 242, 242, 0.0);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

#footer {
	width:100%;
	height:100px;
	background-color: rgba(255, 255, 255, 0.6);
	margin-top:100px;
	overflow:hidden;
	float:left;
	border:5px solid rgba(255, 255, 255, 0.6);
	border-radius: 25px 25px 0px 0px;
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	text-align:center;
}
#footer2 {
	width:100%;
	height:100px;
	background-color: rgba(255, 255, 255, 0.6);
	margin-top:450px;
	overflow:hidden;
	float:left;
	border:5px solid rgba(255, 255, 255, 0.6);
	border-radius: 25px 25px 0px 0px;
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
	text-align:center;
}
	
/* Header */
#headerlogo {
	width:70%;
	font-size:6vw;
	color: rgba(61, 175, 203, 1.0);
	text-decoration: none;
}

#headerlogo img {
	width:18%;
	float:bottom;
    vertical-align: bottom;
	margin-right:-3%;
}

#headerlogo a {
	color: inherit;
	text-decoration: none;
}

#webshoplink {
	padding:15px;
	position:absolute;
	width:18%;
	top:7%;
	right: 0%;
	font-size:2vw;
	color: rgba(61, 175, 203, 1.0);
	border:0px solid rgba(255, 255, 255, 0.6);
	border-radius:25px;
	overflow:hidden;
	background-color: rgba(255, 255, 255, 0.6);
}
#webshoplink img {
	max-width:10%;
	max-height:60px;
	margin-bottom:-2%;
	margin-right:2%;
}

/* Content */

#main {
	width:75%;
	float:left;
}

#text {
	width:100%;
	float:left;
	font-size:1.2vw;
	text-align:center;
	color: rgba(0, 82, 102, 1.0);
}

#gallery {
	width:100%;
	float:left;
	display: inline-block;
}

#fotorij {
	width:100%;
	display: inline-block;
}

#foto {
	float:left;
	width:18%;
	padding:5px;
	transition: all 0.5s ease-out;
}

#foto img {
	float:left;
	max-height:100%;
	max-width:100%;
}
#foto:hover, active {
	max-width:100%;
    -webkit-transform: scale(2);
    -moz-transform: scale(2);
    -o-transform: scale(2);
    -ms-transform: scale(2);
}

/* Menubuttons */
#menubutton {
	width:90%;
	border:5px solid red;
	border-radius:50px;
	border-color:  rgba(174, 222, 234, 1.0);
	float:left;
	padding:5px;
	margin:5px;
	background-color: rgba(61, 175, 203, 1.0);
	color: white;
}
#menubuttonactive {
	width:90%;
	border:5px solid red;
	border-radius:50px;
	border-color: rgba(0, 82, 102, 1.0);
	float:left;
	padding:5px;
	margin:5px;
	background-color: rgba(154, 213, 228, 1.0);
	color: white;
	pointer-events: none;
}
#menubutton:hover {
	background-color: rgba(154, 213, 228, 1.0);
	color: black;
	transition: all 0.5s ease-in;
}

#contactfoto {
	width: 20%;
	float: left;
	margin:1%;
	border:5px solid rgba(154, 213, 228, 1.0);
	background-color:  rgba(154, 213, 228, 1.0);
	border-radius:15px;
	text-align:center;
}

#contactfoto img {
	width: 100%;
}

/* Responsive */
@media screen and (max-width: 420px) {
#menu {
		width: 100%;
		font-size:18px;
}
}

@media screen and (min-width: 1200px) {
#menu {
	font-size:1.2vw;
}
}