/**
 * @file
 * Global styling.
 */


/*COLORS	R	G	B	#
Cyan		0	158	224	009EE0
Blue		0	56	130	003882
Blue2		0	88	141	00588D
Red			226	0	26	E2001A
Red2		197	14	31	C50E1F
*/

/*RESETS*/
*, :before, :after {
	margin:0; padding:0; box-sizing:border-box;}
tbody {
	border-top:0 none;}

/*TYPE*/
body {
	margin:0; font:14px/1.4em 'Roboto', sans-serif; color:#00588D; text-rendering:optimizeLegibility; letter-spacing:.01em;}
a {
	color:#E2001A; text-decoration:none; outline-style:none; cursor:pointer;}
a:hover, a.active {
	color:#C50E1F;}
address {
	font-style:normal;}
p {
	margin:0 0 1.2em;}

h1,h2,h3,h4,h5,h6,
.field--name-field-functie {
	font-family:'Montserrat', sans-serif;}
h1,
.path-frontpage article h2 /*styling with chapeau*/ {
	font-size:1.8em; text-transform:none; line-height: 1.1; display:table-cell; vertical-align:middle; height:70px;}
.path-node h1, 
.path-user h1,
.path-taxonomy h1,
.path-frontpage article h2 /*styling with chapeau*/ {
	margin:0; padding:.5em 0; color:#003882; font-weight:300; display:table-cell; /*multi-line fix*/}
.path-frontpage article h2 /*styling with chapeau*/ {
	padding:0 0 .9em;}
h2, h3,
.field--type-webform>.field__label {
	font-size:1.2em; padding:0.8em 0;}
.path-frontpage h1 /*styling with chapeau*/ {
	font-size:1.2em; padding:0.8em 0 0;}
h3,
.field--type-webform>.field__label {
	color:#B73224;}
h2,
.path-frontpage h1 /*styling with chapeau*/ {
	text-transform:uppercase; font-size:1.15em; color:#009EE0;}
h4, h5, h6 {
	font-size:1em; margin:0;}

.region-content ul,
.region-content ol {
	margin-left:1.2em; margin-bottom:1em;}



/*DIVS*/

/*mobile (default)*/

header, main, footer {
	width:calc(100% - 40px); margin-left:20px; margin-right:20px; clear:both;}

/*Header*/
header {
	height:150px; padding:0; margin:0 20px -150px;}
.site-name, .site-slogan {
	display:none;}
.site-logo {
	float:right; height:150px; margin:0 3% -150px 0; width:150px /*fallback*/; width:calc(50px + 20%);}
.site-logo img {
	width:100%; height:auto; position:relative; z-index:5;}

/*Navigation*/
header nav {position:relative; z-index:20;}

label.show-menu, input#show-menu {
	height:30px; margin:195px 0 0 20px; z-index:5;}
label.show-menu {
	display:inline-block; padding:5px 10px 7px; background:#003882; font-size:1.2em; color:#FFF; cursor:pointer;}
input#show-menu {
	display:none;}

.region-primary-menu {
	width:14.5em; overflow:hidden; margin:195px 20px 0 0; float:right; position:relative; z-index:5; height:0; transition:height 1s;}
input#show-menu:checked ~ .region-primary-menu {
	display:block; height:auto;}
ul.menu {
	margin-left:0;} /*override menu.css*/
.region-primary-menu ul,
.region-primary-menu ul li {
	list-style:none; list-style-type:none; padding:0;}
.region-primary-menu ul li {
	clear:both; font-weight:550; font-size:1.1em; text-align:right;}
.region-primary-menu ul li a, #block-contact-header a {
	display:inline-block; padding:.2em .5em .3em; font-weight:bold;}
.region-primary-menu ul li a {
	color:#00588D; background:#FFF;}
.region-primary-menu ul li a:hover,
.region-primary-menu ul.menu a.is-active {
	color:#E2001A;}

#block-contact-header {
	text-align:right; margin-top:1.5em;}
#block-contact-header a {
	background:#009EE0; color:#FFF;}
#block-contact-header a:hover {
	background:#003882;}

/*Content*/
.region-content {
	padding:2em 0 0;} /*space for img, menu & quote*/
.region-content article {
	margin:0 0 2em;}

main article .field--name-field-image {
	overflow:hidden; width:100%; margin:0 0 0 -20px; height:150px; position:absolute; top:0;
	border-left:20px solid #FFF; border-right:20px solid #FFF;}
main article .field--name-field-image img {
	width:100%; height:auto; position:absolute; left:50%; top:50%;
	-webkit-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);}

.region-highlighted {
	clear:both; position:relative; top:15px;}
.video-wrapper {
	display:flex; flex:1; overflow:hidden; position:relative; padding-bottom:56.25%; height:0;}
.video-wrapper iframe {
	position:absolute; top:0; left:0; width:100%; height:100%;}

article .trainer-portrait {
	width:100%; max-width:300px;}
.trainer-portrait img {
	width:100%; height:auto;}
article hr {
	clear:both; margin:2em 0; border:1px solid transparent;}
#block-experts-2 figure.trainer-portrait {
	width:32%; height:auto; margin:.5em 9% 1.5em 0; float:left;}
#block-experts-2 p {
	clear:both;}

.region-content-lower {
	clear:left; margin:0 0 2em;}
.layout-content-lower #block-experts figure.trainer-portrait {
	width:150px; height:auto; margin:.5em 1em 1.5em 0; float:left;}
#block-experts p {
	clear:left;}

.region-sidebar-second {
	margin:2em 0;}


/*contact form*/
.field--name-field-webform {
	margin:2em 0;}
form>.webform-required {
	display:none;}
form label {
	clear:right; display:block; margin:.2em 0;}
form input, form textarea {
	padding:.5em .7em; border:1px solid #009EE0;}
input.button {
	width:auto; padding:.6em .8em .7em; font-size:1em; background:#009EE0; color:#FFF;}
input.button:hover {
	background:#00588D; cursor:pointer;}

/*Footer*/
footer {
	background:#E0E0E0; margin-top:2em; overflow:hidden; padding:20px;}
footer nav,
footer #block-contact-footer {
	display:block; width:49%; float:left;}
footer address, footer a {
    color:#555;}
footer .menu-item {
    padding-top:0;} /*override menu.css*/


@media screen and (min-width:651px) { /*intermediate*/
	header {
		height:200px; margin:0 20px -200px;}
	.site-logo {
		height:200px; margin:0 30px -200px 0; overflow:visible;}
	main article .field--name-field-image {
		height:200px;}
	.region-highlighted {
		top:210px;}
	.region-content {
		padding:220px 0 0;} /*space for img & quote*/
	label.show-menu, input#show-menu {
		display:none;}
	.region-primary-menu {
		height:auto; margin:22px 225px -272px 0 /*right margin fallback*/; margin-right:calc(100px + 22%);}
}

@media screen and (min-width:851px) { /*wide*/
	header {
		height:270px; margin:0 20px -270px;}
	.site-logo {
		height:270px; margin:0 3% -270px 0;}
	h1 {
		margin:1em 0;}
	main article .field--name-field-image {
		height:270px;}
	.region-highlighted {
		top:280px;}
	.region-content, .layout-sidebar-second {
		padding:290px 0 0;} /*space for img & quote*/
	.layout-content {
		width:100%; margin:0 -100% 2em 0; float:left;}
	.layout-content-upper article,
	.layout-content-lower {
		width:60%;}
	article .trainer-portrait {
		width:25%; height:250px; margin:.5em 1.5em 0 0; float:left;}

	form label {
	    clear:none; width:30%; display:inline-block;}
	form input,
	form .intl-tel-input {
	    width:69%;}
	form .form-type-checkbox label,
	form .form-type-checkbox input {
		width:auto;}
	form .form-type-tel,
		form input.form-tel {
		width:100%;}

	.layout-sidebar-second {
		width:33%; float:right;}
	.region-sidebar-second {
		margin:70px 0;}
}

@media screen and (min-width:1101px) { /*very wide*/
	header {
		height:350px; margin:0 20px -350px;}
	.site-logo {
		height:250px; margin:0 3% -250px 0;}
	main article .field--name-field-image {
		height:350px;}
	.region-highlighted {
		top:360px;}
	.region-content, .layout-sidebar-second {
		padding:370px 0 0;} /*space for img & quote*/
	main #block-classy-odc-page-title {
		padding-left:6.3%;} /*10.5% x 60%*/
	main article .field--name-body,
	main article .field--type-webform,
	.region-content-lower #block-experts {
		padding-left:10.5%;}
	main #block-classy-odc-page-title {
		width:80%;}
	.layout-sidebar-second {
		width:27%; margin-right:6%;}
	footer {
		padding-left:6%;}
}



/*Font Awesome icons
.field--name-field-linkedin a::before,
.field--name-field-website a::before,
.path-node.page-node-type-quote .field--name-body::before {
	font:normal normal normal 14px/1 FontAwesome; font-size:inherit; text-rendering:auto; -moz-osx-font-smoothing:grayscale; padding-right:.2em;}

.field--name-field-linkedin a::before {content:"\f08c";}
.field--name-field-website a::before {content:"\f14c";}
.path-node.page-node-type-quote .field--name-body::before {
	content:"\f10d"; font-size:1.6em; float:left; height:.3em; position:relative; top:-.4em;}

One Day Change gebruikt uw gegevens alleen voor het behandelen van uw bericht of aanvraag, of bij eventuele opdrachten die hieruit voortvloeien. Uw gegevens worden niet verstrekt aan derden, tenzij dat noodzakelijk is bij het uitvoeren van zo'n opdracht.
*/



/*UI IMPROVEMENTS*/

.form-required::after {
	content:'*'; color:#D00; background-image:none;}