h1, h2, h3{
	margin:0px;
	padding:0px;
}
header, nav, main, section, article, aside, footer{
	display:block;
}

body{
	font-family:Arial, sans-serif;
	font-size:14px;
	max-width:100%;
	margin:0 auto;
	background:#fff;
}
.box{
  background: white;
  width: 30px;
  height: 30px;
  position: relative;
  margin-left:  6px;
  top: 632px;
  transition-property: all;
  transition-duration: 1s;
  transition-timing-function: ease-in;
}

.box:hover{
  background: brown;
  border-radius: 50%;
  transform: rotateY(180deg);
}
.topnav{
	overflow: hidden;
	background-color: rgba(255,255,255,0.9);
	position: fixed;
	top:0;
	width: 100%;
}
.topnav a{
	float: right;
	color:#333;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	font-size: 17px;
}
.topnav a:hover {
	background-color: #adacac;
	color: #fff;
}
.topnav a.active{
	float: left;
	background-color:rgba(255,255,255,0.0);
	color:#333;
	font-size:20;
}

main{
	max-width:100%;
	float:left;
}

*{
  box-sizing: border-box;
}

body{
  background:#fff;  /*92bde7;*/
  color:#485e74;
  line-height:1.6;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  /*padding:1em;*/
}

.container{
  max-width:1170px;
  margin-left:auto;
  margin-right:auto;
  padding:1em;
}

ul{
  list-style: none;
  padding:0;
}

.brand{
  text-align: center;
}

.brand span{
  color:#e6844;
}

.wrapper{
  box-shadow: 0 0 20px 0 rgba(51,51,51,07);  /*(72,94,116,0.7);*/
}

.wrapper > *{
  padding: 1em;
}

.company-info{
  background:#bbbbbb  /*#c9e6ff;*/
}

.company-info h3, .company-info ul{
  text-align: center;
  margin:0 0 1rem 0;
}

.contact{
  background:#ebeced;
}

/* FORM STYLES */
.contact form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap:20px;
}

.contact form label{
  display:block;
}

.contact form p{
  margin:0;
}

.contact form .full{
  grid-column: 1 / 3;
}

.contact form button, .contact form input, .contact form textarea{
  width:100%;
  padding:1em;
  border:1px solid #bbbbbb /*#c9e6ff;*/
}

.contact form button{
  background:#c9e6ff;
  border:0;
  text-transform: uppercase;
}

.contact form button:hover,.contact form button:focus{
  background:#92bde7;
  color:#fff;
  outline:0;
  transition: background-color 2s ease-out;
}

/* LARGE SCREENS */
@media(min-width:700px){
  .wrapper{
    display: grid;
    grid-template-columns: 1fr 2fr;
  }

  .wrapper > *{
    padding:2em;
  }

  .company-info h3, .company-info ul, .brand{
    text-align: left;
  }
}
/*  EIND FORMULIER*/

aside{
	max-width:25%;
	float:right;
	background:#BBBBBB;
}
footer{
	clear:both;
}
img{
	max-width:100%;
}
h1, h2, h3{
	font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, 'sans-serif'
}
h1{
	font-size:26px;
	margin-left: 15px;
	padding-top: 55px;
	color:#333;
}
h2{
	font-size:26px;
	background:#BBBBBB;
}
h3{
	font-size:21px;
}
p{
	padding:10px;
	text-align:justify;
	margin:0px;
}
ul{
	list-style:none;
}
nav ul li{
	display:inline;
}
nav li a{
	padding-right:8px;
}
a{
	text-decoration:none;
}
a:hover{
	color:brown;
}
h1
article img{
	margin-right:25px;
	margin-bottom:15px;
	float:left;
}
article{
	background:#fff;
}

/* POP-UP */
/*:root{
	--modal-duration: 1s;
    --modal-color:#428bca;
}

body{
	font-family: "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif"
	font-size: 17px;
	line-height: 1.6;

/*  background: #f4f4f4;*//*
	display:flex;
	height:100vh;
	align-items: center;
	justify-content: center;*/
/*}
.button{
	background:coral /*#428bca;*/
	/*padding: 1em 2em;
	color: #fff;
	border: 0;
	
	/*border-radius: 5px;
	cursor: pointer;
}*/

/*.button:hover {
	background: #333 /*#3876ac;*/
/*}
.modal{
	display:none;
	/*position:fixed;
	z-index: 1;
	left: 0;
	top: 0;
	height: 100%;
	/*width: 100%*/
	/*overflow: auto;
	background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
    /* background-color:f4f4f4;
	margin: 20% auto;
    padding:20%;
	width: 70%
	box-shadow: 0 5px 8px 0 rgba(0, 0, 0, 0.2), 
				0 7px 20px 0 rgba(0, 0, 0, 0.17);
	animation name: modalopen;
	animation-duration: 1s; /*var(-modal-duration);*/
/*}

.closeBtn{
color:#ccc;
float:right;
font-size:30px;
}

.modal-header h2;
.modal-footer h3{
	margin: 0;
}
.modal-header {
	background: var(--modal color);
	padding: 15px;
	color: #fff;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.modal-body{
	padding: 10px 20px;
	background: #fff;
}	
.modal-footer{
	background: var (-modal-color);
	padding:10px;
	color: #fff;
	text-align: center;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
.close{
	color: #ccc;
	float: right;
	font-size: 30px;
	color: #fff;
}	

.close:hover,
.close:focus {
	color: #000;
	text-decoration: none;
	cursor: pointer;
}
keyframes modalopen {
	from {opacity: 0;}
	to {opacity: 1;}
}

// GET MODAL ELEMENT
var modal = document.getElementById('simple Modal');

//get open modal button
var modalBtn = document.getElementById('modalBtn');

//Get close button
var closeBtn = document.getElementById('closeBtn');




const modal = document.querySelector('#my-modal');
conts modalBtn=
document.querySelector ('#Modal-btn');
const closeBtn=
document.querySelector('.close');

//EVENTS
modalBtn.addEventListener(click, openModal);
closeBtn.addEventListener(click, closeModal);
window.addEventListener(click, outsideclick);

//OPEN
function openModal(){
	modal.style.display = 'block';
}

//CLOSE
function closeModal(){
	modal.style.display ='none';
}
//Click if Outside click
function outsideClick(e){
	if(e.target == modal) {
		modal.style.display - 'none';
	}
}
conts modal = document.querySelection('#my-modal');
const modalBtn = document.querySelection ('#modal-btn');
const closeBtn =
document.querySelector('.close');

//Events
modalBtn.addEventlistener('click', openModal);
closeBtn.addEventListener (click', closeModal);
window:addEventListener('click, outsideclick');

//Open
function openModal() {
modal.style.display = 'block';
}

//Close
function closeModal(){
modal.style.display = 'none';
}

// Close if Outside Click
function outsideClick(e) {
if (e.target ==modal) {
modal.style.display = 'none'
 }
}
/*EIND POP-UP*/



footer{
	background:#B3B3A7;
}


@media(max-width:992px){
	main{
	float:none;
	max-width:90%;
	margin:0 auto;
	}
	aside{
	float:none;
	max-width:90%;
	margin:0 auto;
	}
}
@media(max-width:768px){
	#bannerPane{display:none;}
}