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


body{background-color:@main-color;}
.highlight, .het-is-hemelvaart, .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;}
.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-hemelvaart{background-color:@highlight;font-size:36px;line-height:60px;padding:20px;margin-bottom:20px;margin-top:-40px;}
.het-is-hemelvaartsdag-tekst{color:@wit;}
.cta{margin-bottom:90px;background-image:url('/resources/afbeeldingen/cta-wat-is-hemelvaart.jpg');background-size:cover;background-repeat:no-repeat;background-position:center center;padding-top:20vh;padding-bottom:20vh;}
.wolken{margin-top:-20px;background-image:url('/resources/afbeeldingen/wolken-wat-is-hemelvaart.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{background-color: @second-color;position:absolute;padding:20px;margin:10px;}
.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;}
.wat-kun-je-doen .holder{transition:ease-in-out all 300ms;padding:20px;border-right:1px solid @second-color;}
.wat-kun-je-doen .holder a{color:@zwart;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;}
.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 hemelvaartsdagen */
#opkomende-hemelvaart .blok{background-color:fade(@highlight,20%);padding:20px;}
.overzicht-hemelvaartsdagen{
	
	.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 hemelvaartsdagen */