@import url('https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap');
@main-color:#8eab51;
@second-color:#f5f5f5;
@highlight:#503047;
@wit:#fff;
@zwart:#000;
@title-font:'Odibee Sans', cursive;


body{background-color:@main-color;}
.highlight, .het-is-pasen, .website-title, h1,h2,h3,h4,h5,h6{font-family:@title-font;}
.highlight{color:@highlight;}
.highlighted{background-color:darken(@main-color,20%);padding:5px;}
.website-title{font-size:40px;line-height:42px;}
.maintitle{font-family:@title-font;font-size:32px;line-height:34px;
	f
	a, a:hover, a:active, a:visited{
		color:#000!important;
		text-decoration:none;
	}
	
}

.normal-link{
	a, a:active, a:visited{
		color:#fff;
		font-size:120%;
		font-weight:700;
	}
}

.cta-holder{background-color:fade(@second-color,40%);padding:40px;}
.subtitle{font-style:italic;font-size:22px;line-height:34px;padding-left:20px;color:@highlight;text-shadow: 2px 2px 2px @second-color;}
.het-is-pasen{background-color:@highlight;font-size:36px;line-height:60px;padding:20px;margin-bottom:20px;margin-top:-40px;}
.het-is-pasen-tekst{color:@wit;}
.cta{margin-bottom:90px;background-image:url('/resources/afbeeldingen/cta-wat-is-pasen.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;padding-top:20vh;padding-bottom:20vh;}

.wat-vieren-wij-met-pasen .cta{background-image:url('/resources/afbeeldingen/wat-vieren-wij-met-pasen.jpg')}

.wolken{margin-top:-20px;background-image:url('/resources/afbeeldingen/wolken-wat-is-pasen.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;padding-top:30vh;padding-bottom:30vh;}
header{margin-top:20px;margin-bottom:20px}
footer{padding:20px;margin:10px;
	a, a:active, a:visited, a:hover{
		color:@zwart;
	}
	color:@zwart;
}
.modal-body{max-height:700px;overflow-y:scroll}
.uitleg{cursor:pointer;border-bottom:1px dashed @highlight;}
.uitlegtekst h2{font-size: 1.5rem}
.uitlegtekst img{float:left; max-width:300px;padding-right:20px;padding-bottom:20px;padding-top:10px;}
/* timeline */
ul.timeline a{color:@highlight;text-decoration:none}
ul.timeline { list-style-type: none; position: relative;}
ul.timeline:before {content: ' ';background: @second-color;    display: inline-block;position: absolute;left: 29px;width: 2px;height: 100%;z-index: 400;}
ul.timeline > li {margin: 20px 0;padding-left: 20px;}
ul.timeline > li:before {content: ' ';background: @second-color;display: inline-block;position: absolute;border-radius: 50%;border: 3px solid @highlight;left: 20px;width: 20px;height: 20px;z-index: 400;}
/* timeline */

/*wat is er te doen?*/
.wat-is-er-te-doen{background-color:@highlight;padding-top:40px;padding-bottom:40px;margin-top:20px;margin-bottom:20px;color:@wit;}
.wat-kun-je-doen .holder{color:@wit;transition:ease-in-out all 300ms;padding:20px;border-right:1px solid @second-color;}
.wat-kun-je-doen .holder a{color:@wit;text-decoration:underline}
.wat-kun-je-doen .holder:last-child{border-right:0px}
.wat-kun-je-doen .row:nth-child(1){border-bottom:1px solid @second-color;}
.wat-kun-je-doen .holder:hover{background-color:@second-color;color:@zwart;}
.wat-kun-je-doen .holder:hover a,.wat-kun-je-doen .holder:hover .genre, .wat-kun-je-doen .col:hover .datum{color:@zwart}
.wat-kun-je-doen .holder p{min-height:160px;max-height:160px;padding-bottom:10px;}
.genre, .datum{color:@main-color;border-bottom:1px solid @main-color; margin-bottom:13px;}
/*wat is er te doen?*/

/* overzicht komende paasen */
#opkomende-pasen .blok{background-color:fade(@highlight,20%);padding:20px;}
.overzicht-paasdagen{
	
	.jaar, .dag, .maand{
		display:block;color:@second-color;text-align:center;
	}
		.jaar{font-size:30px;}
		.maand{font-size:20px;}
		.dag{background-color:@main-color;color:@highlight}
}
/* overzicht komende paasen */


input, textarea, select, submit{
	min-width:100%;
	padding:8px;
	margin:5px;
}
textarea{
	min-height:150px;
}


.paddingrow{padding-top:35px}