@font-face{
    font-family: Roboto;
    src: url(font/Roboto-Regular.ttf);
}
html:not(.w3-container)
{
	height:100%;
	margin:0;
	padding:0;
}

body:not(.w3-container)
{
	margin:0;
	padding:0;
	height:100%;
	font-size:20px;
	background-color:#f5f5f0;
	font-family:'Roboto',sans-serif;
}
/*w3.css*/
.w3-card-4,.w3-hover-shadow:hover{
	box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);!important
}
.w3-container{
	padding:0.01em 16px;
	line-height: 1.5;
}
.w3-container:after,.w3-panel:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after{
	content:"";
	display:table;
	clear:both;
}
h2,h5{
	font-family:'Segoe UI',Arial,sans-serif;
	font-weight: 400;
	margin: 10px 0;
}
h2{
	font-size: 30px;	
}
h5{
	font-size: 18px;
}
/*styling div in activiteiten*/
.afbeelding {
	float: left;
	width: 50%;
}
.beschrijving {
	float: right;
	width: 50%;
}
#wrapper
{
	min-height:100%;
	height:100%;
	position:relative;
	width:100%
}

#homepagina
{
	background-color:#155f48
}

#homepagina img
{
	background-image:url(afbeeldingen/9Y4B6188-169.jpg);
	background-repeat:no-repeat;
	background-size:cover;
	max-width:100%;
}

nav
{
	margin:0
}

nav.menu
{
	z-index:1000;
	list-style:none;
	background-color:#155f48;
	overflow:auto;
	width:100%;
	margin:0;
	padding:0;
	overflow-y:hidden;
	font-family:Calibri;
	font-style:italic;
	font-weight:700;
	color:#fff
}

nav.menu ul li a img#logo
{
	padding:0;
	margin:0;
	height:48px;
	padding-top:3px
}

#logo a
{
	padding:0;
	margin:0
}

#logo a:hover
{
	background-color:#155f48
}

ul
{
	margin:0;
	padding:0
}

li
{
	float:left;
	list-style:none;
	background-color:#155f48;
	width:12.5%;
	text-align:center
}

li a,.dropbtn
{
	display:block;
	color:#fff;
	padding:16px;
	text-decoration:none
}

li a:hover,.dropdown:hover .dropbtn
{
	background-color:#fff;
	color:#155f48
}

li.dropdown
{
	display:inline-block
}

.dropdown-content
{
	display:none;
	position:absolute;
	background-color:#fff;
	width:inherit;
	margin:0;
	box-shadow:0 8px 16px 0 rgba(0,0,0,0.2)
}

.dropdown-content a
{
	color:#000;
	padding:12px 16px;
	text-decoration:none;
	display:block;
	text-align:left
}

.dropdown-content a:hover
{
	background-color:#f1f1f1
}

.dropdown:hover .dropdown-content
{
	display:block
}

.route
{
	height:calc(100% - 143px)
}

.map
{
	display:block;
	width:55%;
	height:440px;
	float:left
}

iframe
{
	width:100%;
	min-height:100%;
	display:block
}

.map2
{
	color:#000;
	font-size:16px;
	display:block;
	width:35%;
	margin-right:5%;
	float:right
}

#in_de_buurt_img
{
	margin-left:35%;
	margin-right:35%;
	width:30%
}

#omgeving_wrap
{
	min-height:100%;
	font-size:16px;
	color:#000;
	margin:0;
	margin-bottom:50px
}

#omgeving
{
	margin-left:5%;
	margin-right:5%;
	width:20%;
	float:left
}

#omgeving2
{
	margin-left:5%;
	margin-right:5%;
	width:25%;
	float:left
}

.omgeving_img
{
	width:100%;
	display:block
}

#omgeving3
{
	margin-left:5%;
	margin-right:5%;
	width:25%;
	float:right
}

#omgeving a
{
	color:#000;
	text-decoration:none
}

#omgeving a:hover
{
	color:#155f48
}

.read-more-state
{
	display:none
}

h3
{
	text-align:center;
	color:#000
}

script
{
	z-index:-1
}

#achtergrond
{
	width:100%
}

.kamer td
{
	background-color:#eee;
	padding:5px;
	margin:0
}

table
{
	border-collapse:collapse
}

#kamers
{
	height:100%
}

.kamertabel
{
	width:50%;
	float:left
}

#kamergalerij
{
	width:50%;
	float:right
}

#contact
{
	color:#000;
	margin:0;
	font-size:18px;
	position:relative;
	z-index:-1;
	height:calc(100% - 120px)
}

.contact_r
{
	width:50%;
	float:right;
	margin-top:10px
}

.contact_r img
{
	width:90%;
	margin-left:5%
}

#contact_l
{
	width:50%;
	float:left;
	text-align:center
}

.contact_l h3
{
	text-align:center
}

.contact_r h2
{
	text-align:center
}

#gastenboek
{
	color:#000;
	margin:0;
	margin-left:5%;
	margin-right:5%;
	font-size:16px;
	height:calc(100% - 138px);
}

.footer:not(.w3-container)
{
	font-size:15px;
	background-color:#155f48;
	float:left;
	width:100%;
	font-family:Calibri;
	font-weight:700;
	color:#fff;
	display:block;
	height:66px
}

.footer a
{
	color:#fff
}

.footer span
{
	float:left;
	width:33.3%;
	text-align:center;
	padding:0;
	padding-top:10px;
	padding-bottom:10px;
	display:block;
	margin:0
}

#facebook
{
	background-image:url(afbeeldingen/facebook_highreslogo.png);
	z-index:10000;
	display:inline-block;
	height:40px;
	width:40px;
	margin:auto;
	margin-right:10px
}

#facebook:hover
{
	background-image:url(afbeeldingen/facebook_highreslogoinverted.png);
	z-index:100000
}

#instagram
{
	background-image:url(afbeeldingen/instagram.jpg);
	z-index:10000;
	display:inline-block;
	height:40px;
	width:40px;
	text-align:center;
	margin:auto;
	margin-left:10px
}

#instagram:hover
{
	background-image:url(afbeeldingen/instagram%20inverted.jpg);
	z-index:100000
}
#English
{
	background-image:url(afbeeldingen/United_Kingdom.png);
	z-index:10000;
	display:inline-block;
	height:40px;
	width:40px;
	text-align:center;
	margin:auto;
	margin-left:10px
}
#German
{
	background-image:url(afbeeldingen/Germany.png);
	z-index:10000;
	display:inline-block;
	height:40px;
	width:40px;
	text-align:center;
	margin:auto;
	margin-left:10px
}

#inloggen
{
	background-image:url(afbeeldingen/inloggen.png);
	z-index:10000;
	display:inline-block;
	height:40px;
	width:40px;
	text-align:center;
	margin:auto;
	margin-left:10px
}

#inloggen:hover
{
	background-image:url(afbeeldingen/inloggen_hover.png);
	z-index:100000
}

.w3-card-4
{
	width:80%;
	margin-left:10%;
	margin-bottom:70px;
	background-color:#e6e6e6
}

#activiteiten
{
	min-height:calc(100% - 148px)
}

.w3-container img
{
	width:90%;
	height:90%
}

footer.w3-container
{
	background-color:#ccc
}

header.w3-container
{
	background-color:#ccc
}

.w3-container p
{
	width:100%;
	float:left
}

.gastenboek
{
	float:left;
	width:35%;
	display:inline
}

.galleryThumbnails img
{
	transition:all 150ms linear;
	-webkit-transition:all 150ms linear;
	-moz-transition:all 150ms linear
}

.galleryContainer
{
	margin:40px auto;
	width:90%
}

.galleryPreviewContainer
{
	position:relative
}

.galleryPreviewImage img
{
	display:none;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	box-shadow:5px 5px 0 0 #c1c1c1;
	position:relative;
	top:0;
	left:0
}

img.previewImage1
{
	display:block;
	margin: auto;
}

.galleryPreviewArrows a
{
	font-family:Arial;
	font-size:30px;
	background:rgba(0,0,0,0.3);
	width:70px;
	height:70px;
	line-height:70px;
	display:block;
	text-align:center;
	color:#FFF;
	text-decoration:none;
	border-radius:100px;
	-webkit-border-radius:100px;
	-moz-border-radius:100px;
	position:absolute;
	left:20px;
	top:50%;
	margin-top:-35px
}

a.nextSlideArrow
{
	right:20px;
	left:auto
}

.galleryPreviewArrows a:hover
{
	background:#000;
	margin-top:-40px
}

.galleryNavigationBullets
{
	text-align:center;
	margin-top:20px;
	margin-bottom:60px
}

.galleryNavigationBullets span
{
	display:none
}

.galleryNavigationBullets a
{
	width:20px;
	height:20px;
	display:inline-block;
	margin-right:5px;
	background:#ddd
}

.galleryNavigationBullets a:hover,.galleryNavigationBullets a.active
{
	background:#555
}

.galleryThumbnailsContainer
{
	width:90%;
	overflow-x:auto;
	margin-top:30px;
	margin-bottom:40px;
	padding:20px 0
}

.galleryThumbnails
{
	width:500px
}

.galleryThumbnails img
{
	border-radius:10px;
	-webkit-border-radius:20px;
	-moz-border-radius:10px;
	margin-right:10px;
	border:4px solid #e0e0e0;
	position:relative;
	top:0
}

.galleryThumbnails a:hover img
{
	top:-5px;
	border:4px solid #999
}

.galleryThumbnails a.active img
{
	border:4px solid red
}

#reserveren
{
	text-align:center;
	width:100%;
	display:table;
	height: calc(100% - 64px);
}

#links
{
	display:inline-block;
	width:50%
}

table:not(.kamertabel)
{
	margin:0 auto
}

#rechts
{
	float:right;
	width:49%;
	min-height:100%;
	margin:0;
	padding:0
}

#rechts img
{
	display:block;
	width:95%;
	margin-right: 5%;
	margin-top: 5%;
}

#gastenboek_wrap
{
	padding-bottom:50px;
	min-height:100%
}

#waarom
{
	width:40%;
	float:left;
	margin-left:5%;
	margin-right:5%;
	padding-bottom:50px
}

#over
{
	width:40%;
	float:right;
	margin-left:5%;
	margin-right:5%;
	padding-bottom:50px
}

#over_ons
{
	height:calc(100% - 120px);
	font-size:16px
}

input[type="text"]
{
	width:95%;
	text-align:center
}

input[type="number"]
{
	width:95%;
	text-align:center
}

#submittable
{
	width:100%;
	text-decoration:none;
	background-color:#4CAF50;
	color:#fff;
	padding:10px 20px;
	margin:8px 0;
	border:none;
	border-radius:4px;
	cursor:pointer;
	text-align:center
}

#submittable:hover
{
	background-color:#155f48
}

#text
{
	width:100%;
	padding:0;
	margin:0;
	border-radius:4px;
	width:95%;
	text-align:center;
	height:50%
}

textarea
{
	width:100%;
	padding:20px;
	margin:8px 0;
	display:inline-block;
	border:1px solid #ccc;
	border-radius:4px;
	box-sizing:border-box;
	height:100px;
	border-radius:4px
}

input:not([type=checkbox]):not([type=file]):not([type=radio]),select
{
	display:inline-block;
	border:1px solid #ccc;
	border-radius:4px;
	box-sizing:border-box;
	width:95%
}

@media screen and (max-width : 760px) {
	#wrapper
	{
		min-height:100%;
		position:relative;
		padding-bottom:210px
	}
	
	ul
	{
		position:static;
		text-align:center
	}
	
	li
	{
		margin-bottom:1px;
		width:100%;
		text-align:center
	}
	
	#homepagina
	{
		background-image:url(afbeeldingen/9Y4B6188-169-min.jpg);
		background-repeat:no-repeat;
		background-size:100%;
		padding:0;
		margin:auto
	}
	
	#waarom
	{
		width:90%;
		float:left
	}
	
	#over
	{
		width:90%;
		float:right
	}
	/*styling div in activiteiten*/
	.afbeelding {
		float: left;
		width: 100%;
	}
	.beschrijving {
		float: right;
		width: 100%;
	}
	.kamer td
	{
		background-color:#eee;
		padding:5px;
		margin:0
	}
	
	table
	{
		border-collapse:collapse
	}
	
	#kamers
	{
		height:100%;
		width:90%
	}
	
	.kamertabel
	{
		width:90%;
		margin-right:5%;
		margin-left:5%
	}
	
	#kamergalerij:not(#galerij)
	{
		width:90%
	}
	
	#galerij {
		width: 100%;
	}
	
	#omgeving
	{
		width:90%;
		float:none
	}
	
	#omgeving2
	{
		width:90%;
		float:none
	}
	
	.omgeving_img
	{
		width:100%;
		display:block
	}
	
	#omgeving3
	{
		width:90%;
		float:none
	}
	
	#omgeving a
	{
		color:#000;
		text-decoration:none
	}
	
	#omgeving a:hover
	{
		color:#155f48
	}
	
	#links
	{
		width:100%
	}
	#rechts
	{
		float:none;
		width:100%;
		min-height: auto;
	}
	.gastenboek
	{
		float:left;
		width:83%;
		display:inline
	}
	
	.route
	{
		height:100%
	}
	
	.map
	{
		width:100%;
		float:none
	}
	
	.map2
	{
		width:95%;
		margin-right:5%;
		float:right
	}
	
	#in_de_buurt_img
	{
		margin-left:35%;
		margin-right:35%;
		width:30%
	}
	
	table:not(.kamertabel)
	{
		margin:0 auto
	}
	
	
	
	#contact
	{
		height:100%
	}
	
	.contact_r
	{
		width:100%;
		float:none
	}
	
	#contact_l
	{
		width:100%;
		float:none
	}
	
	.footer span
	{
		background-color:#155f48;
		overflow:hidden;
		padding-bottom:20px;
		width:100%
	}
	
	#submittable
	{
		width:100%;
		text-decoration:none;
		background-color:#4CAF50;
		color:#fff;
		padding:5px 10px;
		margin:4px 0;
		border:none;
		border-radius:4px;
		cursor:pointer;
		text-align:center
	}
	#rechts img{
		width:100%;
		margin-right:0;
	}
}
@media screen and (min-width : 1921px){
	#achtergrond{
		height: 100%;
		width: 100%;
	}	
}