/*
##################################################
# Project ID    : 20150610-826
# Reference     : Kids-Start.nl - Homepage/Categorie-pagina (beide responsive)
# Latest update : June 26, 2015
##################################################
*/

/* #Site Styles
================================================== */

/* #Font-Face
================================================== */

/* ### general ### */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html,body { font-family: Arial; font-size: 12px; color: #000; }
input,select,textarea { font-family: Arial; font-size: 12px; color: #000; }
body { background: #fff; }
img { border: 0; display: block; }
ul,li { list-style: none; }
:focus { outline: none; }

/* ### global classes ### */
.clear { clear: both; visibility: hidden; line-height: 0; height: 0; }
.center { margin: 0 auto; max-width: 1088px; position: relative; }
h1,h2,h3,h4,h5,h6 { font-family: 'vagroundedbt'; font-weight: 400; padding: 2px; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow-x: hidden; }

	/* ### main container ### */
	#mainCntr { width: 100%; }

	/* ### header container ### */
	#headerCntr { position: relative; width: 100%; height: 510px; background: url(../images/bg1.png) repeat-x center 0; }
	#headerCntr .center { height: 100%; }
	#headerCntr .logo { position: absolute; top: 30px; left: -10px; }
	#headerCntr .logo img { max-width: 100%; }
	#headerCntr .overlay1 { position: absolute; bottom: 30px; left: -50px; }
	#headerCntr .overlay2 { position: absolute; top: 0; left: 325px; }
	#headerCntr .overlay3 { position: absolute; top: 160px; right: -140px; z-index: 100; }

		/* ### tagline box ### */
		.taglineBox { position: absolute; top: 90px; right: 0; }
		.taglineBox img.bg { max-width: 100%; }
		.taglineBox .text { position: absolute; top: 0; left: 0; width: 100%; padding: 60px; }
		.taglineBox h3 { width: 100%; margin-bottom: 15px; font-size: 33px; color: #fff; font-family: 'vagroundedbt'; text-shadow: 3px 3px 2px #000,-3px -3px 0 #000,-3px 3px 0 #000,3px -3px 0 #000,4px 0 0 #000,-4px 0 0 #000,0 4px 0 #000,0 -4px 0 #000; }
		.taglineBox h3 img { max-width: 100%; }
		.taglineBox p { font-size: 18px; line-height: 30px; margin-bottom: 15px; font-family: 'ArboriaMedium'; }
		.taglineBox .button { width: 100%; text-align: center; }
		.taglineBox .button a { font-family: 'ArboriaMedium'; display: inline-block; background: #00b2fc; -webkit-border-radius: 25px; border-radius: 25px; -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.5); box-shadow: 0 2px 5px rgba(0,0,0,0.5); font-size: 21px; color: #fff; text-decoration: none; line-height: 55px; padding: 0 34px; }
		.taglineBox .button a:active { -webkit-box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); box-shadow: inset 0 2px 5px rgba(0,0,0,0.5); }
		#headerCntr .menuBox { position: absolute; top: 40px; right: 30px; }
		#headerCntr .menuBox ul { list-style: none; }
		#headerCntr .menuBox li { float: left; font-size: 18px; font-family: 'vagroundedbt'; margin-left: 25px; }
		#headerCntr .menuBox li a { color: #fff; text-decoration: none; }
		#headerCntr .menuBox li a:hover,#headerCntr .menuBox li.active a { color: #ffe500; text-decoration: underline; }
.mobileMenu { display: none; }

	/* ### content container ### */
	#contentCntr { width: 100%; }

		/* ### menu box ### */
		.categoryBox { background: #5a421a url(../images/bg3.png) repeat-x; padding: 25px 0; }
		.categoryBox ul { list-style: none; float: left; width: 20%; }
		.categoryBox li { font-size: 22px; margin-bottom: 10px; font-family: 'vagroundedbt'; }
		.categoryBox li a { color: #fff; text-decoration: none; display: inline-block; padding: 5px 15px 5px 5px; -webkit-border-radius: 25px; border-radius: 25px; }
		.categoryBox li img { margin-right: 15px; vertical-align: middle; display: inline-block; }
		.categoryBox li a:hover,.categoryBox li.active a { background: #1a150e; -webkit-box-shadow: 1px 1px 2px rgba(128,90,29,0.9); box-shadow: 1px 1px 2px rgba(128,90,29,0.9); }

	/* ### website container ### */
	#websiteCntr { width: 100%; padding: 70px 0 0; overflow: hidden; background: #fff url(../images/bg2.png) repeat-x; }
	#websiteCntr h1 { font-size: 50px; color: #00b4ff; text-align: center; margin-bottom: 30px; }
	#websiteCntr h1 span { color: #000; }
	#websiteCntr .list { overflow: hidden; position: relative; }
	#websiteCntr ul { list-style: none; overflow: hidden; margin-right: -55px; }
	#websiteCntr li { float: left; width: 33.33%; padding: 0 55px 30px 0; }
	#websiteCntr li .photo { width: 100%; margin-bottom: 15px; }
	#websiteCntr li .photo img { width: 100%; -webkit-border-radius: 20px; border-radius: 20px; }
	#websiteCntr li a { text-decoration: none; color: #404041; font-size: 18px; display: block; width: 100%; }
	#websiteCntr li p { font-size: 18px; line-height: 30px; }
	#websiteCntr h3 { color: #00b4ff; font-size: 26px; margin-bottom: 5px; }
	#websiteCntr p { font-size: 22px; line-height: 30px; font-family: 'ArboriaMedium'; margin-bottom: 30px; }
	#websiteCntr .list.school h1 { color: #ff6c00; }
	#websiteCntr .list.school h3 { color: #ff6c00; }
	#websiteCntr .list.kleurplaten h1 { color: #8971c6; }
	#websiteCntr .list.kleurplaten h3 { color: #8971c6; }
	#websiteCntr .list.knutselen h1 { color: #ffb400; }
	#websiteCntr .list.knutselen h3 { color: #ffb400; }
	#websiteCntr .list.spelletjes h1 { color: #00ea0b; }
	#websiteCntr .list.spelletjes h3 { color: #00ea0b; }
	#websiteCntr .list.muziek h1 { color: #e50000; }
	#websiteCntr .list.muziek h3 { color: #e50000; }
	#websiteCntr .list.tekenfilms h1 { color: #00a1de; }
	#websiteCntr .list.tekenfilms h3 { color: #00a1de; }
	#websiteCntr .list.dieren h1 { color: #a1631a; }
	#websiteCntr .list.dieren h3 { color: #a1631a; }
	#websiteCntr .list.pretparken h1 { color: #da29e5; }
	#websiteCntr .list.pretparken h3 { color: #da29e5; }
	#websiteCntr .list.peuter h1 { color: #fea7fb; }
	#websiteCntr .list.peuter h3 { color: #fea7fb; }
	#websiteCntr .list.koken h1 { color: #ea10a0; }
	#websiteCntr .list.koken h3 { color: #ea10a0; }
	#websiteCntr .list.kinderboeken h1 { color: #3da205; }
	#websiteCntr .list.kinderboeken h3 { color: #3da205; }
	#websiteCntr .list.humor h1 { color: #ffea00; }
	#websiteCntr .list.humor h3 { color: #ffea00; }
	#websiteCntr .list.kaartje h1 { color: #9f9f9f; }
	#websiteCntr .list.kaartje h3 { color: #9f9f9f; }
	#websiteCntr .list.kinder h1 { color: #72e6fb; }
	#websiteCntr .list.kinder h3 { color: #72e6fb; }
	#websiteCntr .list.overig h1 { color: #000; }
	#websiteCntr .list.overig h3 { color: #000; }
	#websiteCntr .list.links h1 { color: #00a1de; }
	#websiteCntr .list.links h3 { color: #00a1de; }
	#websiteCntr .list.links h4 { color: #404041; }
	#websiteCntr p a { color: #202020; text-decoration: underline; }
	#websiteCntr p a:hover { text-decoration: none; }
.hidden { display: none; }
.hideme { opacity: 0; }

	/* ### text container ### */
	#textCntr { width: 100%; overflow: hidden; padding: 0 0 50px; }
	#textCntr .holder { overflow: hidden; margin-right: -50px; }
	#textCntr .block { width: 50%; float: left; padding-right: 50px; }
	#textCntr h2 { color: #fff; margin-bottom: 20px; width: 100%; font-size: 33px; line-height: 40px; color: #fff; font-family: 'vagroundedbt'; text-shadow: 3px 3px 2px #000,-3px -3px 0 #000,-3px 3px 0 #000,3px -3px 0 #000,4px 0 0 #000,-4px 0 0 #000,0 4px 0 #000,0 -4px 0 #000; }
	#textCntr h2 img { max-width: 100%; }
	#textCntr p { font-size: 18px; line-height: 30px; }
	#textCntr p a { color: #202020; text-decoration: underline; }
	#textCntr p a:hover { text-decoration: none; }

	/* ### footer container ### */
	#footerCntr { width: 100%; padding: 50px 0; background: #ececec; }
	#footerCntr p { text-align: center; font-size: 20px; color: #202020; }
	#footerCntr p a { color: #202020; text-decoration: none; }
	#footerCntr p a:hover { text-decoration: underline; }
	#footerCntr img.cartoon { position: absolute; bottom: -30px; left: -250px; }

/* #Media Queries
================================================== */

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

	.center { padding: 0 10px; }
	.taglineBox { width: 450px; }
	.taglineBox img.bg { width: 450px; }
	.taglineBox .text { padding: 40px; }
	.taglineBox h3 { font-size: 25px; margin-bottom: 10px; }
	.taglineBox p { font-size: 15px; line-height: 22px; }
	#headerCntr .overlay3 { display: none; }
	#headerCntr .logo img { width: 300px; }
	#websiteCntr ul { margin-right: -20px; }
	#websiteCntr li { padding-bottom: 30px; padding-right: 20px; }
	#contentCntr .menuBox ul { width: 33.33%; }
	#textCntr .holder { margin-right: -20px; }
	#textCntr .block { padding-right: 20px; }
	#textCntr p { font-size: 15px; line-height: 25px; }
	#textCntr h2 { font-size: 25px; }
	#footerCntr p { font-size: 15px; }
	#footerCntr img.cartoon { display: none; }
	.categoryBox ul { width: 33.33%; }

}

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

	.taglineBox { right: auto; left: 50%; margin-left: -225px; top: auto; bottom: 30px; }
	#headerCntr .logo { top: 0; }
	#headerCntr .logo img { width: 220px; }
	#headerCntr .menuBox { display: none; }
	.mobileMenu { display: block; position: absolute; top: 10px; right: 10px; width: 50px; height: 50px; background: #e75a46; -webkit-border-radius: 5px; border-radius: 5px; -webkit-box-shadow: 0 3px 5px rgba(0,0,0,0.2); box-shadow: 0 3px 5px rgba(0,0,0,0.2); }
	.mobileMenu img { margin: 15px; }
	#websiteCntr { background-image: none; padding-top: 30px; }
	#websiteCntr h1 { font-size: 30px; }
	#websiteCntr li { width: 50%; }
	#footerCntr { padding: 20px 0; }
	.categoryBox ul { width: 50%; }

}

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

	.taglineBox .text { padding: 30px 80px; }
	#websiteCntr li { width: 100%; }
	#textCntr .block { width: 100%; margin-bottom: 20px; }
	#textCntr h2 { margin: 0; }
	.categoryBox ul { width: 100%; }
	.taglineBox .button a { font-size: 18px; }

}
img.left { 
    float: left; margin: 0.5em 1em 1em 0; clear: left; 
} 
img.right { 
    float: right; margin: 0.5em 0 1em 1em; clear: right; 
}