.red { color: #C9123a; 	}
.test-screen { display: none; width: 150px; background: rgba(255, 255, 255, 0.9); border: 1px solid #333; padding: 16px; position: absolute; z-index: 10; top: 66px; right: 6px;
  /*
  animation-name: anime;
  animation-duration: 0.3s;
  */
	}
	
.form-group.verplicht { font-size: 80%; color: #C9123a; }
#contactForm p.text-danger { color: #C9123a; font-size: 90%; padding-left: 5px; }

#app article .container .row .col #contactForm { border-radius: .25rem !important;
	border: 1px solid #8AA8E6;
	padding: 8px;
	background-color: #F7F7F7;
}

.ECLG #app article .container .row .col #contactForm { border-radius: .25rem !important;
	border: 1px solid #739e21;
	padding: 8px;
	background-color: #F7F7F7;
}

#contactForm .control-group p.alinea {
	font-size: 80%;
	margin-bottom: 0px;
	font-weight: bold;
	padding-left: 4px;
}

#contactForm .control-group .form-group.floating-label-form-group.controls.floating-label-form-group-with-value.keuze-certificering p.alinea {
	font-size: 90%;

}

#contactForm .control-group .form-group.floating-label-form-group.controls.floating-label-form-group-with-value.keuze-certificering h3 {
	margin-left: 10px;
	margin-top: 0px;
	font-size: 105%;
}

#contactForm .control-group .form-group.floating-label-form-group.controls.floating-label-form-group-with-value.keuze-certificering h4 {
	margin-left: 10px;
	margin-top: 0px;
	font-size: 100%;
	color: #4676da;
	margin-bottom: 0px;
	padding-bottom: 0px;
}


#contactForm .control-group .form-group.floating-label-form-group.controls.floating-label-form-group-with-value p.alinea {
	margin-bottom: 0px;
	margin-left: 5px;
	font-weight: bold;
	font-size: 100%;
}

#contactForm .control-group .form-group.floating-label-form-group.controls.floating-label-form-group-with-value p.op_locatie {
	margin-bottom: 0px;
	margin-left: 5px;
	font-weight: bold;
	font-size: 100%;
	margin-top: 10px;
}


input, select { font-size: 95%; position: relative; z-index: 1; padding: 5px; resize: none; background: 0 0; box-shadow: none !important; font-family: 'Ridley Grotesk W00','Times New Roman',serif; border-radius: .25rem !important; border: 1px solid #999; }
input[type="radio"] { border-radius: 8px; border: 1px solid #333; }
input[type="radio"]:checked { background-color: #333; }
input#name { width: 90%; background-color: #FFF; }
input#lastname { width: 90%; background-color: #FFF; }
input#name2 { width: 90%; background-color: #FFF; }
input#name3 { width: 90%; background-color: #FFF; }
input#name4 { width: 90%; background-color: #FFF; }
input#name5 { width: 90%; background-color: #FFF; }
input#email  { width: 90%; background-color: #FFF; }
input#email2  { width: 90%; background-color: #FFF; }
input#email3  { width: 90%; background-color: #FFF; }
input#email4  { width: 90%; background-color: #FFF; }
input#email5  { width: 90%; background-color: #FFF; }
input#school { width: 90%; background-color: #FFF; }
input#plaats { width: 90%; background-color: #FFF; }
input#phone { width: 90%; background-color: #FFF; }
input#organisatie { width: 90%; background-color: #FFF; }
input#bestuur { width: 90%; background-color: #FFF; }
input#Naam_kind { width: 90%; background-color: #FFF; }
input#datum { width: 60%; background-color: #FFF; }
input#woonplaats { width: 90%; background-color: #FFF; }
select#praktijk { width: 90%; background-color: #FFF; }

select#aantal {
	font-size: 95%;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 3px;
}
select#cursus { font-size: 90%; padding-top: 4px; padding-bottom: 4px; padding-left: 3px; }

.floating-label-form-group {
	font-size: 85%;
	position: relative;
	margin-bottom: 0px;
	margin-top: 0px;
}

.floating-label-form-group-with-value.keuze-opleiding { font-size: 78%; position: relative; margin-bottom: 0px; margin-top: 0px; }
.floating-label-form-group-with-value.keuze-certificering { font-size: 90%; position: relative; margin-bottom: 0px; margin-top: 0px; }

.btn { font-size: 14px; font-weight: 400; padding: 15px 25px; letter-spacing: 1px; text-transform: uppercase; border-radius: 0; border: none; font-family: 'Ridley Grotesk W00','Helvetica Neue',Helvetica,Arial,sans-serif; }
.btn-primary { color: #fff; border-color: #0085a1; background-color: #0085a1; border-radius: .5rem;	cursor: pointer; margin-top: 10px; }

/* Media Querie Iphone 5 Hamburgermenu Portrait*/
@media only screen and (max-width: 369px) and (orientation: portrait) {
.floating-label-form-group { font-size: 75%;}
.btn { font-size: 80%; padding: 10px 15px; }
#contactForm p.form-group.verplicht { font-size: 75%;  }
.floating-label-form-group-with-value.keuze-opleiding { font-size: 68%; }
input { font-size: 85%; }
}
/* Media Querie Iphone 5 Hamburgermenu landscape */
@media only screen and (max-width: 599px) and (orientation: landscape) {
.floating-label-form-group { font-size: 80%; }
.btn { font-size: 80%; font-weight: 400; padding: 10px 15px; }
.form-group.verplicht { font-size: 75%; color: #C9123a; }
#contactForm p.text-danger { font-size: 90%; }	
.floating-label-form-group-with-value.keuze-opleiding { font-size: 68%; }
input { font-size: 85%; }	
}
/* Media Querie Iphone 6/7/8 Hamburgermenu Portrait*/
@media only screen and (min-width: 370px) and (max-width: 599px) and (orientation: portrait) {
.floating-label-form-group { font-size: 80%; }
.btn { font-size: 85%; font-weight: 400; padding: 12px 18px; }
.form-group.verplicht { font-size: 75%; }
#contactForm p.text-danger { font-size: 90%; }	
.floating-label-form-group-with-value.keuze-opleiding { font-size: 70%; }
input { font-size: 85%; }
}
/* Media Querie iPad Samsung tablets  Windows RT tablet Microsoft Surface Pro Hamburgermenu Portrait*/
@media only screen and (min-width: 600px) and (max-width: 799px) and (orientation: portrait) {
.floating-label-form-group { font-size: 80%;}
.btn { font-size: 80%; font-weight: 400; padding: 10px 15px; }	
.form-group.verplicht { font-size: 75%;  }
#contactForm p.text-danger { font-size: 90%; }	
.floating-label-form-group-with-value.keuze-opleiding { font-size: 72%; }
}
@media only screen and (min-width: 600px) and (max-width: 800px) and (orientation: landscape) {
.floating-label-form-group { font-size: 80%; }
.btn { font-size: 80%; font-weight: 400; padding: 10px 15px; }	
.form-group.verplicht { font-size: 75%; }
#contactForm p.text-danger { font-size: 90%; }
.floating-label-form-group-with-value.keuze-opleiding { font-size: 72%; }
input { font-size: 90%; }	
}
@media only screen and (min-width: 801px) and (max-width: 880px) and (orientation: landscape) {
.floating-label-form-group { font-size: 80%; }
.btn { font-size: 80%; font-weight: 400; padding: 10px 15px; }
.form-group.verplicht { font-size: 75%; }	
#contactForm p.text-danger { font-size: 90%; }
.floating-label-form-group-with-value.keuze-opleiding { font-size: 74%; }	
}

.LZ .thank-you { display: block; border: 1px solid #8AA8E6; border-radius: .25rem; color: #555; background-color: #EAEFFB; padding: 16px 20px 20px; margin-top: 30px; font-size: 90%; max-width: 90%; }	
.thank-you { display: block; border: 1px solid #739e21; border-radius: .25rem; color: #555; background-color: #F4FBEA; padding: 16px 20px 20px; margin-top: 30px; font-size: 90%; max-width: 90%; }
.form-control input { display: block; width: 100%; padding: .5rem .75rem; font-size: 1rem; line-height: 1.25; color: #495057; background-color: #fff;    background-image: none; background-clip: padding-box; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }
textarea { font-size: 95%; position: relative; z-index: 1; padding: 0; resize: none; border-radius: .25rem !important; 	border: 1px solid #999; background: #FFF; box-shadow: none !important; font-family: 'Ridley Grotesk W00','Times New Roman',serif; }
label {
	font-size: 0.85em;
	line-height: 1em;
	position: relative;
	z-index: 0;
	top: 2em;
	display: block;
	margin: 0;
	-webkit-transition: top .3s ease,opacity .3s ease;
	-moz-transition: top .3s ease,opacity .3s ease;
	-ms-transition: top .3s ease,opacity .3s ease;
	transition: top .3s ease,opacity .3s ease;
	vertical-align: middle;
	vertical-align: baseline;
	opacity: 0;
}


@keyframes anime { 0%   {opacity: 0;} 100% {opacity: 1;} }

input:active, input:focus, .btn:active, .btn:focus { outline: 0; box-shadow: 0; color: #666; }
textarea { outline: 0; box-shadow: 0; color: #333; width: 90%; padding: 5px; }

/* test met label */

.form-label { fieldset { position: relative; &:first-child input { border-radius: 4px 4px 0 0; }
&:last-child input { border-radius: 0 0 4px 4px; box-shadow: 0 2px 0 rgba(0,0,0,0.15); }
& + fieldset { border-top: 1px solid #ddd; }
}
  
label {
	position: absolute;
	top: 15px;
	left: 8px;
	color: #909090;
	transform: translate3d(0, 0, 0);
	transition: all 0.2s ease-in-out;
}


}

// Animation on <label>
.form-css-label { input { &[data-empty="false"], &:valid, &:focus { padding: 22px 8px 10px; }
&:focus { outline: 0; background: rgba(255,255,255,1); }
&[data-empty="false"] + label, &:valid + label, &:focus + label { color: #5856D6; font-weight: 700; font-size: 12px; transform: translate3d(0, -10px, 0); }
  }
}

.form-js-label { input { &[data-empty="false"], &:focus { padding: 22px 8px 10px;  }
&:focus { outline: 0; background: rgba(255,255,255,1); }
&[data-empty="false"] + label, &:focus + label { color: #5856D6; font-weight: 700; font-size: 12px; transform: translate3d(0, -10px, 0); }
  }
}

.invalid input { color: #464646; }


}
.notification-enter, .notification-enter-leave-to { opacity: 0; transform: rotateY(50deg); }
.notification-enter-to, .notification-leave { opacity: 0; transform: rotateY(50deg); }
.notification-enter-active, .notification-leave-active { transition: opacity, transform 300ms ease-out; }
#sendMessageButton { margin-top: 16px; cursor: pointer; }
button:disabled { opacity: 0.5; }
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { background: transparent !important; }
}

}