body, html{font-family: CalibreLight, Roboto, Calibri, Sans-Serif; overflow:hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 99%;
    box-sizing: border-box;
 }

*{margin:0!important; padding:0!important; box-sizing:inherit;}

.loading {height: 30px!important; padding:10px!important; width: 200px!important;}

.index-block {border:solid red; width:100%; }

#main-container{
	position:absolute;
	width:99%;	
	height:96%; 
	}
#top-halve {
	position: absolute;
	top:0;
	width:100%;
	height:40%;
	background-color:black;
}
#bottom-halve { 
background:white; 
position:absolute;
top:50%;
height:60%; 
width:100%;
background-color:white; 
}

.padding-top { position:absolute; width:100%;  top:10px;  text-align:center; }

/*
	#footer { position:absolute; min-height:50px;  width:100%;   }	
	#footer { position:absolute; height:75px; min-height:50px;  width:100%;  padding-bottom:50px; z-index:2;  }	
	.footerLinks { padding-top:15px;  font-size:0.95em; margin-bottom:-5px; margin-top:-15px;    }
	.bottom_border {     border-bottom: 1px dotted #dddddd !important;   padding-bottom:20px;}	
*/




#red, .tophalve-aligner-1, .bothalve-aligner-1 {
	position:absolute;
	left:15%;	
	top:25%; /* ##### VERTICAL ALIGNMENT ##### */
	width:60%;
	height:1px;/*
	background-color:red;*/
}
#green, .tophalve-box-1, .bothalve-box-1 {
	position:absolute;
	top:-10px;
	left:0;
	width:100%;
	height:10px;/*
	background-color:green ;*/
}
#red2, .tophalve-aligner-2, .bothalve-aligner-2 {
	position:absolute;
	left:15%;
	bottom:25%;  /* ##### VERTICAL ALIGNMENT ##### */
	width:60%;
	height:1px;/*
	background-color:red;*/
}
#green2, .tophalve-box-2, .bothalve-box-2 {
	position:absolute;
	top:-10px;
	left:0;
	width:100%;
	height:10px;/*
	background-color:green ;*/
}
p, h1, h2, h3 {
  top:-50px;
	left:0;
	height:10%;
  width:100%;
  text-align:center;
	}

p, h1, h2, h3  { 	border:1px solid yellow!important none; }
.click-box, .title-click-box {padding:10px!important;}

.title-click-box{	display: grid;
	position:absolute;
	height:150px; 
	width:100%; 		
	/*top:-50px;	*/
	left:0;  /*
	border:1px solid blue!important;	*/
}

.click-box {
	display: grid;
	  grid-gap: 0px;
	position:absolute;  
	height:150px; 
	width:100%;  
	top:-38px;
	left:0; /*
	display:none;  
	border:1px solid blue!important;*/
}


.kies {padding-top:5%!important;}
.presenteert {height:60px;}
span.dashes, .projecten { color: #777; }
.behang, .projecten {margin-top:1.5%!important;}
h2 { font-weight:bold!important;  }
.italic { font-style: italic!important; font-weight:bold; }
.bold {  font-weight:bold; }
p { font-size:	1.3em!important;}


/*
p{ background-color:yellow; }
h1{ background-color:pink; }
h2{	background-color:red; }
h3{	background-color:blue; }
a {	background-color:red; }
.block {background-color:red; } 
.click-box {background-color:blue; }*/

.titel, .digital 	{ color:#f1f1f1; }
.verzammel { color:#ddd; }
.presenteert, .architectuur, .behang, .kies  {color:#999; }
.ambachtelijk { color:#555; }



@media (min-width: 1401px)  {
h1, .titel 																	{ font-size:3.5em!important;}	
.architectuur, .behang,  .projecten	{ font-size:1.3em!important;}



.kies 															{ font-size:1.1em!important;}
.verzammel													{ font-size:1.2em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.8em!important;}
.tophalve-aligner-1 				{	top:		20%!important;}
.tophalve-aligner-2 				{	bottom:	22%!important;}
.bothalve-aligner-1 				{	top:		15%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}
}


@media (max-width: 1400px)  {
h1, .titel 																	{ font-size:3.1em!important;}
.architectuur, .behang,  .projecten	{ font-size:1.2em!important;}
.index-footer	{ font-size:0.9em!important;}


.kies 															{ font-size:0.9em!important;}
.verzammel													{ font-size:1.2em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.8em!important;}
.tophalve-aligner-1 				{	top:		20%!important;}
.tophalve-aligner-2 				{	bottom:	22%!important;}
.bothalve-aligner-1 				{	top:		15%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}
}


@media (max-width: 1200px)  {
h1, .titel 																	{ font-size:2.8em!important;}
.architectuur, .behang,  .projecten	{ font-size:1.2em!important;}
.index-footer	{ font-size:0.9em!important;}


.kies 															{ font-size:0.9em!important;}
.verzammel													{ font-size:1.2em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.8em!important;}
.tophalve-aligner-1 				{	top:		20%!important;}
.tophalve-aligner-2 				{	bottom:	22%!important;}
.bothalve-aligner-1 				{	top:		15%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}

}


@media (max-width: 650px)  {
h1, .titel 																	{ font-size:2.5em!important;}
.architectuur, .behang,  .projecten, .index-footer	{ font-size:1.0em!important;}
.kies 															{ font-size:0.8em!important;}
.verzammel													{ font-size:1.0em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.5em!important;}
.tophalve-aligner-1 				{	top:		22%!important;}
.tophalve-aligner-2 				{	bottom:	20%!important;}
.bothalve-aligner-1 				{	top:		14%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}
}


@media (max-width: 500px)  {
h1, .titel 																	{ font-size:2.0em!important;  }
.architectuur, .behang,  .projecten, .index-footer	{ font-size:	1.0em!important;}
.kies 															{ font-size:0.85em!important; }
.verzammel													{ font-size:	1.0em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:	1.5em!important;}
.tophalve-aligner-1 				{	top:		20%!important;}
.tophalve-aligner-2 				{	bottom:	22%!important;}
.bothalve-aligner-1 				{	top:		20%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}

.click-box {	height:100px; }
.kies {padding-top:6%!important;}
}




/* ###################*/


@media  (max-height: 800px), (max-width: 800px) {
	
h1, .titel																	{ font-size:2.0em!important;}
.presenteert												{ font-size:1.6em!important;}	
.architectuur, .behang,  .projecten, .index-footer	{ font-size:1.0em!important;}
.kies 															{ font-size:0.8em!important;}
.verzammel													{ font-size:1.0em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.5em!important;}

.tophalve-aligner-1 				{	top:		25%!important;}
.tophalve-aligner-2 				{	bottom:	22%!important;}
.bothalve-aligner-1 				{	top:		20%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}

#red, .tophalve-aligner-1, .bothalve-aligner-1 { left:5%; width:90%; }
#red2, .tophalve-aligner-2, .bothalve-aligner-2 { left:5%; width:90%; }

.click-box, .title-click-box {	height:110px; }

}

@media  (max-height: 600px) {
	
	h1, .titel	 																{ font-size:1.5em!important;}
.presenteert												{ font-size:1.3em!important;}	
.architectuur, .behang,  .projecten, .index-footer { font-size:0.9em!important;}
.kies 															{ font-size:0.7em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.1em!important;}
.verzammel													{ font-size:0.8em!important;}
.presenteert {height:30px!important;}
}


@media  (max-height: 450px) {
h1, .titel																		{ font-size:1.3em!important;}
.presenteert												{ font-size:1.1em!important;}		
.architectuur, .behang,  .projecten, .index-footer { font-size:0.8em!important;}
.kies 															{ font-size:0.7em!important;}
.verzammel													{ font-size:0.8em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:0.9em!important;}

.tophalve-aligner-1 				{	top:		30%!important;}
.tophalve-aligner-2 				{	bottom:	15%!important;}
.bothalve-aligner-1 				{	top:		25%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}

.click-box, .title-click-box {	height:80px; }
.presenteert {height:30px!important;}

}


@media  (max-width: 450px) {
	
	h1, .titel	 																{ font-size:1.5em!important;}
.architectuur, .behang,  .projecten, .index-footer	{ font-size:0.9em!important;}
.kies 															{ font-size:0.8em!important;}
.digital,	.ambachtelijk,  .projecten             {	font-size:1.0em!important;}

.tophalve-aligner-1 				{	top:		23%!important;}
.tophalve-aligner-2 				{	bottom:	18%!important;}
.bothalve-aligner-1 				{	top:		20%!important;}
.bothalve-aligner-2 				{	bottom:	25%!important;}

.click-box, .title-click-box  {	height:100px; }
.kies {padding-top:10%!important;}
}

@media  (max-height: 400px) {
.bothalve-aligner-1 				{	top:		27%!important;}
}

@media  (max-height: 350px) {
.bothalve-aligner-1 				{	top:		30%!important;}
}



@media (min-width: 500px), (min-height: 500px)    {
*	{   }
}