@charset "utf-8";

body
{
background-color: #b3e6ff;
}

header
{
background-image: url(https://cerebro.chirolore.be/images/daily-planet.svg);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
margin-left: 33vw;
margin-right: 33vw;
margin-top: 2rem;
margin-bottom: 2rem;
height: 20vw;
position: relative;
display: block;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}

.btnNav
{
position: relative;
padding: 0;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}

.btnNav ul
{
padding: 0;
margin: 0;
list-style-type: none;
width: 100%;
}

.btnNav ul li
{
padding: 0;
margin: 0 0 1rem 0;
display: inline-block;
width: 100%;
}

.btnNav ul li a
{
font-weight: 700;
color: rgb(255,255,255);
background-color: rgb(225,20,60);
margin: 0;
padding: 1rem;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0.75rem;
-moz-border-radius: 0.75rem;
border-radius: 0.75rem;
text-decoration: underline;
cursor: pointer;
font-size: 1.00rem;
border: 0;
}

.btnNav ul li a:hover
{
color: rgb(10,142,202);
}

h1
{
text-align: center;
max-width: none;
margin-top: 1rem;
}

h2
{
text-transform: none!important;
background-color: rgba(255,255,255,0.8);
padding: 0.2rem;
display: inline-block;
}

h3
{
font-family: Arial, Helvetica, sans-serif;
letter-spacing: normal;
text-align: left;
}

h3 strong
{
color: rgb(0,18,77);
background-color: rgba(255,255,255,0.8);
padding: 0.2rem;
}

p
{
text-align: left;
}

img
{
max-width: 100%;
}

li
{
text-align: left;
}

.bold
{
font-weight: bolder;
}

.center
{
text-align: center;
}

.clrRibbel
{
color: rgba(65,38,130,0.75)!important;
}

.clrSpeelclub
{
color: rgba(255,228,0,0.75)!important;
text-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.75);
}

.clrRakwi
{
color: rgba(0,139,108,0.75)!important;
}

.clrTito
{
color: rgba(229,49,56,0.75)!important;
}

.clrKeti
{
color: rgba(0,113,185,0.75)!important;
}

.clrAspi
{
color: rgba(243,153,16,0.75)!important;
}

.clrLeiding, .clrVvb, .clrHulpleiding, .clrKeuken, .clrTechnische
{
color: rgba(228,208,150,0.65)!important;
}

.btnRibbel
{
background-color: rgba(65,38,130,0.75)!important;
}

.btnSpeelclub
{
background-color: rgba(255,228,0,0.75)!important;
}

.btnRakwi
{
background-color: rgba(0,139,108,0.75)!important;
}

.btnTito
{
background-color: rgba(229,49,56,0.75)!important;
}

.btnKeti
{
background-color: rgba(0,113,185,0.75)!important;
}

.btnAspi
{
background-color: rgba(243,153,16,0.75)!important;
}

.btnLeiding, .btnVvb, .btnHulpleiding, .btnKeuken, .btnTechnische
{
background-color: rgba(228,208,150,0.65)!important;
}

.btnAsketi, .btnAske, .btnAsti
{
background: -webkit-linear-gradient(left, rgba(0,113,185,0.75) , rgba(243,153,16,0.75))!important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(0,113,185,0.75), rgba(243,153,16,0.75))!important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(0,113,185,0.75), rgba(243,153,16,0.75))!important; /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(0,113,185,0.75), rgba(243,153,16,0.75))!important; /* Standard syntax */
}

.btnKetito
{
background: -webkit-linear-gradient(left, rgba(229,49,56,0.75) , rgba(0,113,185,0.75))!important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(229,49,56,0.75), rgba(0,113,185,0.75))!important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(229,49,56,0.75), rgba(0,113,185,0.75))!important; /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(229,49,56,0.75), rgba(0,113,185,0.75))!important; /* Standard syntax */
}

.btnRibbel:hover
{
background-color: rgba(65,38,130,1)!important;
color: rgb(250,250,250)!important;
}

.btnSpeelclub:hover
{
background-color: rgba(255,228,0,1)!important;
}

.btnRakwi:hover
{
background-color: rgba(0,139,108,1)!important;
color: black!important;
}

.btnTito:hover
{
background-color: rgba(229,49,56,1)!important;
}

.btnKeti:hover
{
background-color: rgba(0,113,185,1)!important;
}

.btnAspi:hover
{
background-color: rgba(243,153,16,1)!important;
}

.btnLeiding:hover, .btnVb:hover, .btnHulpleiding:hover, .btnKeuken:hover, .btnTechnische:hover
{
background-color: rgba(228,208,150,1)!important;
}

.btnAsketi:hover, .btnAske:hover, .btnAsti:hover
{
background: -webkit-linear-gradient(left, rgba(0,113,185,1) , rgba(243,153,16,1))!important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(0,113,185,1), rgba(243,153,16,1))!important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(0,113,185,1), rgba(243,153,16,1))!important; /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(0,113,185,1), rgba(243,153,16,1))!important; /* Standard syntax */
}

.btnKetito:hover
{
background: -webkit-linear-gradient(left, rgba(229,49,56,1) , rgba(0,113,185,1))!important; /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, rgba(229,49,56,1), rgba(0,113,185,1))!important; /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, rgba(229,49,56,1), rgba(0,113,185,1))!important; /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, rgba(229,49,56,1), rgba(0,113,185,1))!important; /* Standard syntax */
}

.leidingNav
{
}

.leidingNav ul
{
text-align: center;
}

.leidingNav ul li
{
width: 8rem;
height: 8rem;
margin-right: 1rem;
}

.leidingNav ul li:last-of-type
{
margin-right: 0;
}

.leidingNav ul li a
{
text-indent: -9999em;
background-color: transparent;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: contrast(0.75);
-webkit-filter: contrast(0.75);
-moz-filter: contrast(0.75);
-o-filter: contrast(0.75);
-ms-filter: contrast(0.75);
transition: filter 0.5s ease-in-out;
-moz-transition: filter 0.5s ease-in-out;
-webkit-transition: filter 0.5s ease-in-out;
-o-transition: filter 0.5s ease-in-out;
-ms-transition: filter 0.5s ease-in-out;
}

.leidingNav ul li a:hover
{
filter: contrast(1);
-webkit-filter: contrast(1);
-moz-filter: contrast(1);
-o-filter: contrast(1);
-ms-filter: contrast(1);
}

.mailtekst
{
font-family: Arial, Helvetica, sans-serif;
background-color: white;
margin: 0 0.8rem 0.8rem 0.8rem;
padding: 0.8rem 0.8rem .2rem 0.8rem;
}

.mailtekst p
{
font-size: 0.8rem; /*12.8px;*/
padding: initial;
margin-top: initial;
margin-right: initial;
margin-bottom: 0.8rem; /*12.8px;*/
margin-left: initial;
line-height: initial;
max-width: none;
}

.mailtekst li
{
font-size: 0.8rem; /*12.8px;*/
line-height: initial;
margin-top: initial;
margin-right: initial;
margin-bottom: initial;
margin-left: 0.938rem; /*15px;*/
}

.mailtekst ul
{
font: Arial, Helvetica, sans-serif;
font-size: 0.8rem; /*12.8px;*/
padding-top: initial;
padding-right: initial;
padding-bottom: initial;
padding-left: 0.938rem; /*15px;*/
line-height: initial;
margin-top: initial;
margin-right: initial;
margin-bottom: 0.8rem; /*12.8px;*/
margin-left: initial;
}

.mailtekst span
{
font-size: 0.625rem; /*x-small;*/
margin-bottom: 0.625rem; /*x-small;*/
}

.mailtekst a
{
color: #0071b9;
}

.handtekening
{
width: 6.250rem!important;
height: 4.375rem!important;
float: none!important;
box-shadow: none!important;
border: 0!important;
max-width: none;
}

.mailtekst p::selection, .mailtekst ul::selection, .mailtekst a::selection, .mailtekst img::selection, .mailtekst li::selection, .mailtekst ol::selection, .mailtekst span::selection
{
background: rgb(51, 144, 255)!important;
color: white!important;
}

.mailtekst p::moz-selection, .mailtekst ul::moz-selection, .mailtekst a::moz-selection, .mailtekst img::moz-selection, .mailtekst li::moz-selection, .mailtekst ol::moz-selection, .mailtekst span::moz-selection
{
background: rgb(51, 144, 255)!important;
color: white!important;
}

.lijst-onbetaald
{
background-color: rgba(228,208,150,0.65);
cursor: pointer;
}

.lijst-onbetaald:hover
{
background-color: rgba(228,208,150,1);
}

.lijst-betaald
{
background-color: rgba(0,139,108,0.65);
cursor: pointer;
}

.lijst-betaald:hover
{
background-color: rgba(0,139,108,1);
}

label
{
font-weight: bold;
padding: 1rem 0 0.5rem 0;
display: block;
}

.boodschap
{
background-color: rgb(228,208,150);
border: 1px black solid;
margin: 1rem 0;
padding: 1rem 1rem 0 1rem;
}

.voorbeeldprogramma
{
background-color: rgba(255,255,255,0.8);
padding: 1rem;
max-width: 75ch;
}

.btnForm
{
display: inline-block;
}

.btnAdmin
{
background-color: rgb(0,139,108)!important;
}

.btnAdmin:hover
{
color: black!important;
}

input, textarea, select
{
color: rgb(0,113,185);
width: 100%;
margin: 0 auto;
font-size: 1rem;
}

input[type=text], textarea, input[type=date], input[type=email], input[type=number], input[type=datetime-local], input[type=url]
{
font-family: Courier New, monospace;
max-width: 100%;
min-width: 100%;
min-height: 2rem;
padding: 0.25rem 0.5rem;
color: black;
box-sizing: border-box;
}

select
{
font-size: 1rem;
padding: 0.25rem 0.5rem;
min-height: 2rem;
box-sizing: border-box;
}

.materiaalgetal
{
display: inline-block;
min-width: 0!important;
width: 6rem;
margin-left: 0.2rem;
transform: translate(0,-2px);
}

.materiaalgroep
{
display: inline-block;
}

.datum
{
background-color: rgba(255,255,255,0.75);
padding: 0 1rem 1rem 1rem;
margin-bottom: 1rem;
}

input[type=radio], input[type=checkbox]
{
display: table-cell;
width: auto;
min-width: 1rem;
margin: 0;
height: 1rem;
transform: translate(0,-0.5rem);
}

.opties
{
display: table;
padding-left: 1rem;
margin: 1rem 0 0 0;
}

.optie
{
display: table-cell;
max-width: 75ch;
font-weight: normal;
}

.optierij
{
display: table-row;
padding: 0;
}

.optierij input
{
margin: 0 0.5rem 0 0!important;
display: table-cell!important;
}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color: #CCCCCC;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
color: #CCCCCC;
opacity: 1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
color: #CCCCCC;
opacity: 1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color: #CCCCCC;
}

input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */

.item
{
background-color: rgba(255,255,255,0.3);
margin: 0 0.8rem 0.8rem 0.8rem;
padding: 0.1rem 0.8rem 0.8rem 0.8rem;
box-sizing: border-box;
}

.itemtoevoegen, .itemverwijderen
{
background-color: rgb(0,113,185);
color: white;
margin: 0 0.8rem 0.8rem 0.8rem;
padding: 0;
display: inline-block;
cursor: pointer;
}

.itemtoevoegen p, .itemverwijderen p
{
text-decoration: underline;
font-weight: bold;
padding: 0.8rem;
margin: 0;
}

.itemtoevoegen p:hover, .itemverwijderen p:hover
{
color: rgb(225, 20, 60);
}

.numbercenter
{
padding: 0.1rem;
margin-bottom: 0.5rem;
text-align: center;
}

input[type=radio], input[type=checkbox]
{
display: table-cell;
width: auto;
min-width: 1rem;
margin: 0 0.5rem 0 0;
background-color: purple;
vertical-align: top;
height: 1rem;
margin-bottom: 0.5rem;
}

.opties
{
display: table;
padding-left: 1rem;
}

.optie
{
display: table-cell;
vertical-align: top;
max-width: 75ch;
font-weight: normal;
}

.optierij
{
display: table-row;
}

.btntxt
{
font-size: 1rem !important;
color: rgb(225,20,60) !important;
background-color: transparent !important;
font-weight: normal !important;
margin: 0 !important;
padding: 0 !important;
display: inline !important;
cursor: pointer;
border: 0;
text-decoration: underline;
}

.btntxt:hover
{
color: rgb(0,113,185) !important;
}

@media only screen and (max-width: 599px)
{
	nav, section, header
	{
	margin: 0 1rem;
	}

	input[type=checkbox] {
	  outline: none;
	  width: 58px;
	  height: 23px;
	  font-size: 11px;
	  line-height: 2;
	  display: block;
	  font-weight: bold;
	  border-radius: 3px;
	  border: 1px solid #B9B9B9;
	  -webkit-appearance: none;

	  background-image: -webkit-gradient( 
		linear, left top, left bottom,
		color-stop(0, #E8E8E8),
		color-stop(0.5, #E8E8E8),
		color-stop(0.5, #FDFDFD),
		color-stop(1, #FDFDFD)
	  );
	  box-shadow: 0px 1px 2px #AFAFAF inset;
	  color: #7F7F7F;
	}

	input[type=checkbox]:checked {
	  background-image: -webkit-gradient( 
		linear, left top, left bottom,
		color-stop(0, #367EF8),
		color-stop(0.5, #367EF8),
		color-stop(0.5, #66A3F8),
		color-stop(1, #66A3F8)
	  );
	  box-shadow: 0px 1px 2px #1449A3 inset;
	  color: #fff;
	  text-shadow: 0px -1px 1px #000;
	  border: 1px solid #99B9E8;
	}

	input[type=checkbox]:before {
	  content: 'NEE';
	  border-radius: 3px;
	  border-top: 1px solid #F7F7F7;
	  border-right: 1px solid #999999;
	  border-bottom: 1px solid #BABABA;
	  border-left: 1px solid #BDBDBD;
	  background-image: -webkit-gradient( 
		linear, left top, left bottom,
		color-stop(0, #D8D8D8),
		color-stop(1, #FBFBFB)
	  );
	  height: 20px;
	  width: 22px;
	  display: inline-block;
	  text-indent: 27px;
	}

	input[type=checkbox]:checked:before {
	  content: 'JA';
	  text-indent: -25px;
	  margin-left: 33px;
	}


}

@media only screen and (min-width: 600px)
{
	nav
	{
	margin: 0 33vw;
	}

	section, header
	{
	margin: 0 25vw;
	}

	#map
	{
	height: 40vw;
	}

}

@media only screen and (min-width: 2000px)
{
	html
	{
	font-size: 160%;
	}
}

.btnSingleownwidth
{
display: inline-block;
margin-right: 1rem;
}

.btnSingleownwidth a, input[type=submit]
{
font-weight: 700;
color: rgb(255,255,255);
background-color: rgb(225,20,60);
margin: 0;
padding: 1rem;
display: inline-block;
width: 100%;
height: 100%;
text-align: center;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-border-radius: 0.5rem;
-moz-border-radius: 0.5rem;
border-radius: 0.5rem;
text-decoration: underline;
cursor: pointer;
font-size: 1.00rem;
border: 0;
}

input[type=submit]
{
display: inline-block;
width: auto;
padding: 1.2rem;
margin-right: 0.8rem;
}

input[type=submit]:hover, #adrestoevoegen:hover
{
color: rgb(10,142,202);
}

.btns p a
{
background-color: rgb(180,180,180);
}

.btnSingleownwidth span
{
color: green;
}

.btnSingleownwidth a:hover, .btnSingleownwidth a:focus, #fullframe p:hover
{
color: rgb(10,142,202);
}

#gap .btnSingleownwidth
{
margin: 0 0.5rem;
}

.formgroup
{
margin-top: 1rem;
}

.formgrouplabel
{
width: 20%;
display: inline-block;
vertical-align:top
}

.formgrouplabel label
{
padding-top: 0;
}

.formgroupinput
{
width: 80%;
display: inline-block;
vertical-align:top
}

@media (max-width: 600px)
	{
		.formgrouplabel
		{
		width: 100%;
		}

		.formgroupinput
		{
		width: 100%;
		}
	}

input[name="titelh1"]
{
font-family: Oswald, Impact, Charcoal, sans-serif;
font-size: 3rem;
line-height: 3.5rem;
color: #e4d096;
font-weight: normal;
background-color: #00124d;
}

.viewArtikelinhoud
{
color: #ffffff;
font-family: Arial, Helvetica, Verdana;
font-size: 1.00rem;
line-height: 1.5rem;
background-color: #00124d;
}

input[name="titelartikel"]
{
font-family: Oswald, Impact, Charcoal, sans-serif;
font-size: 1.6rem;
line-height: 1.9rem;
color: #ffe400;
font-weight: normal;
background-color: #00124d;
}

textarea[name="beschrijving"]
{
color: #ffffff;
font-family: Arial, Helvetica, Verdana;
font-size: 1.00rem;
line-height: 1.5rem;
background-color: #00124d;
}

textarea[name="lokzin"]
{
font-family: Arial, Helvetica, Verdana;
font-size: 1.4rem;
color: rgb(224,75,103);
font-weight: normal;
text-decoration: underline;
background-color: #00124d;
}

input[name="titelsocialmedia"]
{
font-family: Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.25rem;
color: rgb(29, 33, 41);
font-weight: 600;
background-color: #f2f3f5;
}

textarea[name="descriptionsocialmedia"]
{
font-family: Helvetica, Arial, sans-serif;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgb(96, 103, 112);
background-color: #f2f3f5;
}

input[name="titelpagina"]
{
font-family: Arial, sans-serif;
font-size: 1.125rem;
line-height: 1.49625rem;
color: rgb(26, 13, 171);
font-weight: 400;
}

textarea[name="description"]
{
font-family: Arial, sans-serif;
font-size: 0.8125rem;
line-height: 1.25125rem;
font-weight: 400;
color: rgb(84, 84, 84);
}

.urlbox
{
background-color: white;
}

.url
{
background-color: white;
display: inline-block;
padding: 0.42rem 0 0.42rem 0.5rem;
font-size: 1rem;
}

input[name="url"]
{
min-width: auto;
width: calc(100% - 15rem);
display: inline-block;
padding-left: 0;
}

input[name="urlshort"]
{
min-width: auto;
width: calc(100% - 15rem);
display: inline-block;
padding-left: 0;
}

.disabled
{
background-color: rgb(180,180,180)!important;
}

.invalid
{
border: rgb(225,20,60) 0.2rem solid;
}

form h2
{
margin-top: 1.5rem;
}

@media only screen and (max-width: 599px)
{
	.tabelformulier th:nth-of-type(n+3), .tabelformulier tr td:nth-of-type(n+3), .mobile
	{
	display: none;
	}
	
	.tabelformulier th:nth-of-type(5), .tabelformulier tr td:nth-of-type(5)
	{
	display: table-cell;
	}
}