body, html{
	margin: 0px;
	background-color: #000000;
	color: #FFFFFF;
	font-family: 'Oswald', sans-serif;
	font-weight: 200;
	letter-spacing: 0.03vw;
}

a{
	color: #FFFFFF;
	text-decoration: none;
}

a.grijs{
	color: #666666;
}

a.zwart{
	color: #000000;
}

div#katholiek{
	color: #CCCCCC;
	position: absolute;
	top: 10%;
	margin-left: auto; 
	margin-right: auto; 
	text-align: center;
	width: 100%;
	font-size: 1.5vw;
	word-spacing: 0.3vw;
}

div#logo{
	width: 15%;
	height: 15%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

div#knop{
	position: absolute;
	bottom: 10%;
	left: 0; 
	right: 0; 
	margin-left: auto;
	margin-right: auto;	
	width: 3%;
}

div#selecteer{
	color: #CCCCCC;
	position: absolute;
	padding-top: 2%;
	top: 105%;
	right: 17%;
	text-align: right;
	font-size: 1vw;
	font-weight: 300;
	word-spacing: 0.2vw;
}

/* Logo wanneer naar beneden gescrolled */
div#logoindex{
	position: absolute;
	top: 114%;
	width: 18%;
	left: 17%;
	float: left;
	cursor: pointer;
}

div#menu{
	position: absolute;
	top: 116%;
	right: 17%;
	width: 48%;
	font-weight: 300;
}

ul {  
    list-style-type: none;  
	display: flex;
    justify-content: space-between;
}

li.bullet{
	padding-left: 3%;
	background: url("screens/opsomming.svg");
	background-repeat: no-repeat;
	background-size: 0.6vw;
	background-position: left center;
	cursor: pointer;
}

li.bullet:hover{
	background: url("screens/opsomming2.svg");
	background-repeat: no-repeat;
	background-size: 0.6vw;
	background-position: left center;
}

li.bullet:focus{
	background: url("screens/opsomming2.svg");
	background-repeat: no-repeat;
	background-size: 0.6vw;
	background-position: left center;
	outline: 0px solid transparent;
}

li {
	color: #CCCCCC;
    float: right;
	font-size: 1vw;
} 

li a {
	color: #CCCCCC;
	text-decoration: none;
}	

div#keuzes{
	position: absolute;
	top: 130%;
	width: 70%;
	height: 60%;
	left: 15%;
}

div.container{
	position: relative;
	width: 19%;
	height: 45%;
	margin: 0 3% 2% 3%;
	float: left;
	cursor: pointer;	
}

div#kouterbasis{
	background: url("screens/kouter.svg");
	background-repeat: no-repeat;

}
div#kleuterkouter{
	background: url("screens/kleuterkouter.svg");
	background-repeat: no-repeat;
}

div#vlinderboom{
	background: url("screens/vlinderboom.svg");
	background-repeat: no-repeat;
}

div#piusxbasis{
	background: url("screens/piusxbasis.svg");
	background-repeat: no-repeat;
}

div#heikant{
	background: url("screens/heikant.svg");	
	background-repeat: no-repeat;
}

div#zonnewijzer{
	background: url("screens/zonnewijzer.svg");	
	background-repeat: no-repeat;
}

div#piusxsecundair{
	background: url("screens/olvipiusx.svg");
	background-repeat: no-repeat;
}

div#algemeenbestuur{
	background: url("screens/bestuur.svg");
	background-repeat: no-repeat;
}

div#kouterbasis:hover{
	background: url("screens/kouter1.svg");
	background-repeat: no-repeat;
}
div#kleuterkouter:hover{
	background: url("screens/kleuterkouter1.svg");
	background-repeat: no-repeat;
}

div#vlinderboom:hover{
	background: url("screens/vlinderboom1.svg");
	background-repeat: no-repeat;
}

div#piusxbasis:hover{
	background: url("screens/piusxbasis1.svg");
	background-repeat: no-repeat;
}

div#heikant:hover{
	background: url("screens/heikant1.svg");
	background-repeat: no-repeat;
}

div#zonnewijzer:hover{
	background: url("screens/zonnewijzer1.svg");
	background-repeat: no-repeat;
}

div#piusxsecundair:hover{
	background: url("screens/olvipiusx1.svg");
	background-repeat: no-repeat;
}

div#algemeenbestuur:hover{
	background: url("screens/bestuur1.svg");
	background-repeat: no-repeat;
}

div#footer{
	position: absolute;
	bottom: -100%;
	margin-bottom: 0.5%;
	right: 10%;
	display: block;
	width: 73%;
	visibility: visible;
}

div#footerresponsive{
	visibility: hidden;
}

span#wit{
	color: #CCCCCC;
}

a#footer{
	color: #666666;
}

img#footerlogopagina{
	width: 100%;
}

table{
	vertical-align: middle;
	font-size: 0.9vw;
	color: #666666;
}

table#indextable{
	vertical-align: middle;
	font-size: 0.9vw;
	color: #666666;
	width: 90%;
}

table#footertable{
	font-size: 1.4vw;
}

td#logo{
	padding-right: 3%;
	vertical-align: middle;
	width:20%;
}

td#tekst{
	padding-left:5%;
	vertical-align: center;
	padding-bottom:0.5%;
}

div#pagina{
	position: absolute;
	width: 100%;
}

/* Tonen zwarte banner boven op schoolpagina's, wanneer responsive */
div#zwartebanner{
	position: fixed;
	width: 100%;
	height: 28%;
	background-color: black;
	visibility: hidden;
}	

div#hoofdlogopagina{
	position: absolute;
	top: 14%;
	width: 20%;
	left: 10%;
	float: left;
}

div.slogan{
	position: absolute;
	top: 16%;
	left: 60%;
	font-size: 1.5vw;
	font-weight: 400;
	word-spacing: 0.3vw;
}

div#sloganpaginakouterbasis{
	color: #1AAE92;
}
div#sloganpaginakleuterkouter{
	color: #00B0EA;
}
div#sloganpaginavlinderboom{
	color: #752377;
}
div#sloganpaginapiusxbasis{
	color: #D1007F;
}
div#sloganpaginaheikant{
	color: #E20613;
}
div#sloganpaginazonnewijzer{
	color: #F18B1B;
}
div#sloganpaginaolvipiusx{
	color: #F3E606;
}

div#sluitpagina{
	position: absolute;
	top: 30%;
	left: 92%;
	width: 3%;
}

/* Logo school */
div#logopagina{
	position: absolute;
	top: 35%;
	width: 20%;
	left: 10%;
}

div#tekstpagina{
	position: absolute;
	top: 33%;
	width: 30%;
	left: 35%;
	font-size: 1.2vw;
	font-weight: 300;
	word-spacing: 0.2vw;
	text-align: justify;
}

div.tekstpaginazwart{
	color: #000000;
}

div#contactpagina{
	position: absolute;
	top: 33%;
	width: 25%;
	height: 50%;
	left: 70%;
	font-size: 1.1vw;
	font-weight: 300;
	word-spacing: 0.2vw;
}

div.contactpaginazwart{
	color: #000000;
}

div.contactpaginagrijs{
	color: #666666;
}

h1{
	font-size: 1.3vw;
}

h1#kouterbasis{
	color: #004A25;
	}
h1#kleuterkouter{
	color:  #282B72;
	}
h1#vlinderboom{
	color: #120B27;
	}
h1#piusxbasis{
	color: #620738;
	}
h1#heikant{
	color: #590606;
	}
h1#zonnewijzer{
	color: #952121;
	}
h1#olvipiusx{
	color: #808080;
	}
h1#bestuur{
	color: #666666;
	}
	
img#contact{
	width: 1vw;
	margin-right: 5%;
}
	
div#footerpagina{
	position: absolute;
	bottom: 0;
	margin-bottom: 5%;
	right: 10%;
	display: block;
	width: 80%;
	font-size: 1vw;
}

/* Footer pagina bij responsive */
div#footerpaginaresponsive{
	position: fixed;
	visibility: hidden;
}

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

div#katholiek{
	font-size: 3vw;
}

div#logo{
	width: 30%;
	height: 30%;
}

div#knop{	
	width: 7%;
}

div#logoindex{
	left: 20%;
	top: 104%;
}

/* Werkt bij desktopversie */
div#selecteer{
	visibility: hidden;
}

div#menu{
	position: absolute;
	top: 102%;
	left: 45%;
	width: 50%;
	font-weight: 300;
}

ul {   
	display: block;
}

li {
	color: #CCCCCC;
    float: none;
	font-size: 2vw;
} 

li.bullet{
	padding-left: 10%;
	margin-top: 5%;
	background-size: 1vw;	
}

li.bullet:hover{
	background-size: 1vw;
}

li.bullet:focus{
	background-size: 1vw;
}

div#keuzes{
	position: absolute;
	top: 125%;
	width: 60%;
	left: 20%;
}

div.container{
	position: relative;
	width: 44%;
	height: 25%;
}

div#footer{
	left: 15%;
	width: 70%;
	padding-bottom: 5%;
}

table#indextable{
	font-size:1.5vw;
}

img#logofooterresponsive{
	width:15%;
}

div#footer{
visibility: hidden;}


div#footerresponsive{
	visibility: visible;
	position: absolute;
	bottom: -100%;
	left: 7%;
	width: 90%;
	visibility: visible;
}

td#logo{
	width:20%;
	vertical-align: top;
}

div#logopagina{
	position: absolute;
	top: 35%;
	width: 30%;
	left: 5%;
}

/* Tonen van zwarte banner */
div#zwartebanner{
	position: absolute;
	visibility: visible;
}

/* Tonen van schoolontwerp */
img.show{
		visibility: hidden;
}

div#tekstpagina{
	position: absolute;
	top: 50%;
	width: 50%;
	left: 5%;
	font-size: 2vw;
}

div#tekstpaginazwart{
	position: absolute;
	top: 35%;
	width: 25%;
	left: 40%;
	font-size: 1vw;
	color: #000000;
}

h1{
	font-size: 2.3vw;
}

div#contactpagina{
	position: absolute;
	top: 35%;
	width: 35%;
	left: 60%;
	font-size: 2vw;
	height: 120%;
}

div#contactpaginazwart{
	position: absolute;
	top: 35%;
	width: 20%;
	height: 50%;
	left: 70%;
	font-size: 1vw;
	color: #000000;
}

div#contactpaginagrijs{
	color: #666666;
	position: absolute;
	top: 35%;
	width: 20%;
	height: 50%;
	left: 70%;
	font-size: 1vw;
	color: #000000;
}

img#contact{
	width: 2vw;
}

div#footerpagina{
	visibility: hidden;
}

html#vlinderboom{
	background-color: #752377;
}
body#vlinderboom{
	background-color: #752377;
}

html#kouterbasis{
	background-color: #1AAE92;
}
body#kouterbasis{
	background-color: #1AAE92;
}

html#kleuterkouter{
	background-color: #00B0EA;
}
body#kleuterkouter{
	background-color: #00B0EA;
}

html#piusxbasis{
	background-color: #D1007F;
}
body#piusxbasis{
	background-color: #D1007F;
}

html#heikant{
	background-color: #E20613;
}
body#heikant{
	background-color: #E20613;
}

html#zonnewijzer{
	background-color: #F18B1B;
}
body#zonnewijzer{
	background-color: #F18B1B;
}

html#olvipiusx{
	background-color: #F3E606;
}
body#olvipiusx{
	background-color: #F3E606;
}

html#bestuur{
	background-color: #FFFFFF;
}
body#bestuur{
	background-color: #FFFFFF;
}

div#footerpaginaresponsive{
	position: absolute;
	top:135%;
	left: 5%;
	width: 90%;
	visibility: visible;
}

img#logoresponsive{
	width:25%;
}



table{
	padding: 4%;
	font-size: 1.5vw;
	background-color: #000000;
	border-radius: 6px;
}