/*KLEUR 9dc633*/

/***********************************************
Example use only - Delete when done..!
***********************************************/
body                                            { margin:20px 0;font-family: 'Hind', sans-serif; font-weight:300}
label, input, submit										{font-family: 'Hind', sans-serif; }
#banner											{ 
	text-align:center;
	height:660px;
	background-size:cover;
	overflow:hidden;
	margin-top:-90px;

}
.eyck											{ width:100%; background-color:rgba(0,0,0,0.6); height:180px;margin-top:160px;padding-top:30px;}
.eyck h3										{color:white; font-family: 'Hind', sans-serif; font-size:50px;}
.eyck p										{color:white; font-family: 'Hind', sans-serif; font-size:30px;padding-top:10px;}
.grid-highlight                                 { margin-bottom:5px; }
.grid-highlight [class^="grid_"]                { line-height:30px; text-align:center; background-color:#F1F1F1; }
#footer	h4										{ font-size:1.4em;padding-top:13px; font-family: 'Hind', sans-serif; }
.food, .food p, .food h3, .food h2, .item, .item h3, .item p		{font-family: 'Hind', sans-serif; }
.food											{text-align:center !important;}
.item											{ margin-top:20px;}
.food div, .mimg									{-webkit-box-shadow: 3px 3px 5px 0px rgba(88, 50, 50, 0.27);
-moz-box-shadow:    3px 3px 5px 0px rgba(88, 50, 50, 0.27);
box-shadow:         3px 3px 5px 0px rgba(88, 50, 50, 0.27);}
#footer											{ height:260px; padding-top:12px; background-repeat:no-repeat; background-position:center 90px; 
	text-align:center;font-size:small;
}
#footer a{text-decoration:none;}

#articlesCol4{
	margin-top:25px;
}
#articlesCol4 h1{
	font-size:x-large;	
	line-height:1em;
}
.articles{
	margin-bottom: 20px;	
}
.pagination ul li{
	list-style-type:none;
	display:inline-block;
}

#logo2{display:none;}
.pagepart h3, .emptypart h3{font-family:'Oswald', sans-serif;
	font-size:1.1em;
	color:black;
}
/***********************************************
Screen 1200px+
***********************************************/
/*
#logo{

	height:120px;
	
}
#logo img{width:190px;
position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);

}
*/
#slogan{
	width:33%;
	height:150px;
	margin-top:100px;
	text-align:left;
	background:rgba(0,0,0,0.4);
	margin-left:-10px;
	padding-left:10px;
	padding-right:10px;
}
#slogan h1 {	
	color:white;
	font-family:'Oswald', sans-serif;
	position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*ALLE SCHERMEN GROTER DAN 960*/

@media only screen and (min-width:950px){

	#articlesCol4 .pagepart, .blogarticle{
		border:1px solid #ccc;
		border-radius:7px;	
		height:550px;
		padding:13px;
		font-size:1em;
		-webkit-box-shadow: -1px -3px 5px 0px rgba(157,198,51,0.2);
		-moz-box-shadow: -1px -3px 5px 0px rgba(157,198,51,0.2);
		box-shadow: -1px -3px 5px 0px rgba(157,198,51,0.2);
	}
	.articles article{
		border:1px solid #ccc;
		border-radius:7px;	
		height:290px;
		padding:13px;
		font-size:1em;
		-webkit-box-shadow: -1px -3px 5px 0px rgba(157,198,51,0.2);
		-moz-box-shadow: -1px -3px 5px 0px rgba(157,198,51,0.2);
		box-shadow: -1px -3px 5px 0px rgba(157,198,51,0.2);
	
	}
	.showdescription{
		height:220px;
		overflow:hidden;	
	}
	
	#articlesCol4 .pagepart .btn{
	
	}
	.splashdiv{position:relative;height:inherit;}
	.splashBtn{position:absolute;bottom:26px;}
}


/***********************************************
Screen Smaller than 1199px
***********************************************/
@media only screen and (min-width:960px) and (max-width: 1199px) {

	#banner{
		background-image:url(http://www.fotografiejoel.be/icarosp/home/banners/2.jpg);	
		height:487px;
		background-repeat:no-repeat;
		margin-top:-70px;
	}
	#logo{
		text-align:center;
		z-index:20;
		background-color:white;
		width:160px;
		height:150px;
		position:relative;
		border:1px solid black;
	}
	#logo img{width:100%;
		position: relative;
		  top: 50%;
		  -webkit-transform: translateY(-50%);
		  -ms-transform: translateY(-50%);
		  transform: translateY(-50%);
		
		}
	#articlesCol4 .pagepart, .blogarticle{
		height:700px;	
	}
}

/***********************************************
Tablet (Smaller than 959px)
***********************************************/
@media only screen and (min-width:768px) and (max-width: 959px) {
	#banner{
		background-image:url(http://www.fotografiejoel.be/icarosp/home/banners/4.jpg);
		height:390px;
		background-repeat:no-repeat;
		margin-top:-60px;
	}
	#slogan{
		width:50%;
	}
	/*
		#logo{
		text-align:center;
		z-index:20;
		background-color:white;
		width:160px;
		height:150px;
		position:relative;
		border:1px solid black;
	}
	#logo img{width:100%;
		position: relative;
		  top: 50%;
		  -webkit-transform: translateY(-50%);
		  -ms-transform: translateY(-50%);
		  transform: translateY(-50%);
		
		}
*/

}

/***********************************************
Mobile (portrait 300px)
***********************************************/
@media only screen and (max-width:767px) {

	#banner{
			background-image:url(http://www.fotografiejoel.be/icarosp/home/banners/5.jpg);
			height:390px;
			background-repeat:no-repeat;
			margin-top:13px;
		}	
	#slogan{
		width:50%;
	}
	#logo{
		display:none;
	}
	#logo2{
		display:block;
		text-align:center;	
	}
	#slogan{
		display:none;
	}

}

/***********************************************
Mobile (landscape 420px)
***********************************************/
@media only screen and (min-width: 480px) and (max-width: 767px) {

.example                                        {  }
	#banner{
		background-image:url(http://www.fotografiejoel.be/icarosp/home/banners/6.jpg);
		height:390px;
		background-repeat:no-repeat;
		margin-top:13px;
	}
	#logo{
		display:none;
	}
	#logo2{
		display:block;
		text-align:center;	
	}
	#slogan{
		display:none;
	}

}


/* In your CSS */
.Collage{

    /* define how much padding you want in between your images */
    padding:10px;

    }

.Collage img{

    /* ensures padding at the bottom of the image is correct */
    vertical-align:bottom;

    /* hide the images until the plugin has run. the plugin will reveal the images*/
    opacity:0;
    }
 .Controleer, .Opnieuw{
 	margin-top:40px !important;	
 } 
 
 .exercise, .meerkeuze, .correct{
 	background-color:#D6FFC2;
 	padding:12px;
 	border-radius:13px;	
 }

.meerkeuze, .correct{
	float:left;	
}
.meerkeuze li{
	border:1px dotted white;	
}
.processingCode{
	margin-bottom:10px;	
}
.pagepart img{
	max-width:100%;	
}






#mibabanner{
	background-image:url(http://www.schoolvoorbeeld.be/icarosp/home/Mon23Feb2015143256GMT_KRISMERCKX_schoolvoorbeeld_foto5.jpg);
	background-position:50% 60%;
	height:310px;	
		background-size:cover;
		border:1px solid #3F3E3E;
}
#footer{
	 background-color:black;
	color:white;	
	height:180px;
}
#footer article{text-align:left;font-size:0.9em;}
#adres{text-align:left;}
#footer h3{color:white;line-height:160px;}
#mibabanner h3{
	color:black;
	background-color:rgba(255,255 ,255, 0.7);	
	margin-top:244px;
	padding:20px;
	font-family:'Open Sans Condensed';
	font-size:30px;
	text-transform: uppercase;

}
#footer a{color:white;text-decoration:none;}
#social{text-align:right;}

#mibacontent{margin-top:13px;margin-bottom:13px;}

#logo{
	background-image:url(http://www.schoolvoorbeeld.be/icarosp/home/logo_miba.jpg);
	background-position:90%;
	background-repeat:no-repeat;
	background-color:black;
	height:100px;
	width:96.7%;
}
.pagepart figcaption{font-size:1.1em !important}

.realsmall, .featherlight-content button{color:white !important}

html {
	    position: relative;
	    min-height: 100%;
	}
	body {
	    margin: 0 0 180px; /* bottom = footer height */
	}
	#footer {
	    position: absolute;
	    left: 0;
	    bottom: 0;
	    width: 100%;
	}
	#social{text-align:right !important;}