/*body{
	background-color: red;
}*/
html{max-width: 100%;
		height: 100%;
}
body{max-width: 100%;
		min-height: 100%;
}

header{
	/*text-align: center;*/	
	/*margin: 5px;*/
	/*background-color:#232224;*/
	/*background-color: #212529;*/
	/*background-color: #000080;*/
	/*background-color: #1F58C6;*/
	/*background-color: whitesmoke;*/
	background-color: #007bff;
	background-color: #212529;
	top: 0;
	z-index: 88888;
	width: 100%;
	margin: 0px;
}
footer {
    position:relative;
    bottom:0;
    width: 100%;
    color: white;
    margin-top: 175px;
}
.navbar{
	text-align: center;
}
#navTitle{
    text-decoration: none;
	text-align: center;
	padding: 10px;
	font-family: "Times New Roman", Times, serif;
	/*color: gold;*/
	font-size: 400%;
	width: 50%;
	margin: auto;
	color: rgba(176,213,118,1);
	text-shadow: 2px 2px 4px #000000;

}

.container{
	margin-top: 20px;
}
#containermain{
	/*color: #00006f;*/
	/*background-color: #8AAAE5;*/
	/*background-color: #fef9f8;*/
	background-color: #87CEFA;
	color: white;
	top: 24px;
	padding-top: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	position: relative;
	width: 100%;
}

/*.container.row.col{
	padding: 0px;
}
.row.col{
	padding: 0px;
}*/

a.nav-link{
	text-decoration: none;
	color: white;
	text-shadow: 2px 2px 4px #000000;

}
a.nav-link:hover{
	color: rgba(176,213,118,1);
}
a.nav-link:active{
	color: rgba(176,213,118,1);
}
.banner{
	/*background-color: #1E90FF;*/
	margin-top: 10px;
	position: absolute;
	top: 0px;
	width: 100%;
}
.bannertext{
	background-color: red;
	margin: 0px;
	padding: 0px 0px 30px 0px;
	padding-top: 0px;
	width: 100%;
	position: static;
}
#bannertext1{
	float: left;
	padding: 5px 15px 5px 15px;
	color: white;
	font-size: large;
	background-color: #5F76A8;
	width: 25%;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: white;
	border-radius: 20px;
}
#bannertext1 a{
	text-decoration: none;
	color: white;
}
#bannertext1 a:hover{
	color: #ffff7f;
	background-color: #556a97;

}
#bannertext2{
	float: right;
	text-align: right;
	padding: 5px 15px 5px 15px;
	color: white;
	font-size: large;
	background-color: #5F76A8;
	width: 20%;
	text-decoration: none;
	border-style: solid;
	border-width: 2px;
	border-color: white;
	border-radius: 20px;
}
#bannertext2 a{
	text-decoration: none;
	color: white;
}
#bannertext2 a:hover{
	color: #ffff7f;
	background-color: #556a97;

}
#bannertext1:hover{
	background-color: #556a97;
}

#bannertext2:hover{
	background-color: #556a97;
}

a {text-decoration: none;}
#bannerimg{
	width: 100%;
	/*z-index: -2;*/
	position: relative;
	top: 0px;
	margin: 0px;
	padding: 0px;
/*	 border-style: solid;
  	border-color: #00006f;
  	border-width: 3px 0px;*/
}
/*	F8E9A1 GEEL
	F76C6C ORANJE ACHTIG
	A8D0E6 LICHTS
	374785 LICHTER
	24305E DONKER BLAUW*/

#overlaytext{
	position: absolute;
	top: 5%;
	right: 5%;
	background-color: #A8D0E6;
	padding: 15px;
	margin: 5px;
	border-style: solid;
	border-width: 2px;
	border-radius: 15px;
	border-color: white;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	opacity: 0.9;
}
#overlaytext ul {
	padding: 0px;
	margin: 0px;

}
#overlaytext ul li{
	list-style-type: none;
	/*list-style: none;*/
}
#overlaytext ul li i{
	font-size: 120%;
	padding: 15px;
	margin-left: 0px;
}


#imgdiv{
  position: relative;
  width: 100%;

}

#image {
	display: block;
 	width: 100%;
 	height: auto;
/*	position: relative;
	width: 100%;*/

}

.overlay {
  position: absolute;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;

}


.portofolio{
	margin: auto;
	width: 50%;
	/*border: 2px solid black;*/
 	/*margin-bottom: 100px;*/
 	opacity: 0.7;
 	position: relative;
}
#portofolio{
	max-width: 200px;
	padding: 20px;
	/*float: right;*/

}
#overlay2{
	position: relative;
	background-color: #A8D0E6;
	padding: 15px;
	margin: auto;
	border-style: solid;
	border-width: 2px;
	border-radius: 15px;
	border-color: white;
	color: white;
	text-shadow: 2px 2px 4px #000000;
	opacity: 0.9;
	display: none;
	text-decoration: none;
}

/*.card:hover{
	background-color: black;
	color: white;
}
*/

.mapouter{ 
	max-width:100% 
}
.prijzentext img{
	max-width: 100%;
}
.portofolio{
	loat: right; 
	width: 30%;
	position: relative; 
	margin: 0px;
}

@media screen and (max-width: 200px) {

}

@media screen and (max-width: 300px) {

}

@media screen and (max-width: 400px) {

}

@media screen and (max-width: 500px) {

}

@media screen and (max-width: 600px) {

}

@media screen and (max-width: 700px) {
	#bannertext1{ width: 50%; font-size: medium; display: none;}
	#bannertext2{ width: 50%; font-size: medium; display: none;}
	#bannerimg{max-width: 100%;}
	.gmap_canvas{max-width: 350px; max-height: 350px;}


		
	#navTitle{ font-size: 130%; }
	body{ max-width: 100%; }
/*	#col{
		padding: 0px;
	}*/
}

@media screen and (max-width: 800px) {

}

@media screen and (max-width: 900px) {

}

@media screen and (max-width: 1000px) {

}

@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 1200px) {
	.overlay{
		display: none;
	}
	#overlay2{
				display: block;
				margin: 20px;
	}
	.container{
		padding-bottom: 20px;
	}
	.portofolio { width: 100%; }

	.portofolio img{ width: 120%; }
}

@media screen and (max-width: 1300px) {

}

@media screen and (max-width: 1400px) {

}
@media screen and (max-width: 1600px) {
}