@import url('https://fonts.googleapis.com/css?family=Amaranth:700,400&display=swap');

/* The component will reset browser's styles of link */

.r-link{
	color: var(--uirLinkTextColor) !important;
	text-decoration: var(--uirLinkTextDecoration) !important;
}

/* The component will reset browser's styles of titles */

.r-title{
    margin-top: var(--uirTitleMarginTop) !important;
	margin-bottom: var(--uirTitleMarginBottom) !important;
}

/*

=====
LEVEL "ANIMATED UNDERLINE TEXT EFFECT"
=====
*/

.animated-underline{
	--uiAnimatedUnderlineWidth: var(--animatedUnderlineWidth, 100%);
	--uiAnimatedUnderlineHeight: var(--animatedUnderlineHeight, 2px);
	--uiAnimatedUnderlineBgColor: var(--animatedUnderlineBgColor, currentColor);
	--uiAnimatedUnderlinePositionX: var(--animatedUnderlinePositionX, 0);
	--uiAnimatedUnderlinePositionY: var(--animatedUnderlinePositionY, bottom);

	/*
		1. For multi-line animated underline the "inline" value for the display property is compulsory.
		2. Adds opportunity to create multi-line padding
	*/

	--rLinkDisplay: inline; /* 1 */

	background-image: linear-gradient(0, var(--uiAnimatedUnderlineBgColor) 0, var(--uiAnimatedUnderlineBgColor));
	background-size: var(--uiAnimatedUnderlineWidth) var(--uiAnimatedUnderlineHeight);
	background-position: var(--uiAnimatedUnderlinePositionX) var(--uiAnimatedUnderlinePositionY);
	background-repeat: no-repeat;
	
	-webkit-box-decoration-break: clone; /* 2 */
	box-decoration-break: clone; /* 2 */
	
	will-change: background-size;
	transition: background-size .25s cubic-bezier(0.785, 0.135, 0.15, 0.86);
}

:root{
	--animatedUnderlineHeight: 1rem;
	--animatedUnderlineBgColor: var(--accentColor);
}	



/*
=====
LEVEL "DEMO"
=====
*/

:root{
	--mainColor: #cd286e;
	--accentColor: #ffd700;
	--accentColorDark: #ffd700;
	--blackColor: #cd286e;
	--whiteColor: #fff;
	--rLinkTextColor: var(--blackColor);
}	

body{
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
	color: var(--blackColor);
	background-color: #f0f0f0;
}

.page{	
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}

.page__section:nth-child(n+2){
	margin-top: 5rem;
}

.page__group{
	margin-top: 2rem;
}

.news{
	position: relative;
	padding: 70px 6%;
	border-top: 6px solid var(--mainColor);
	border-radius: 4px;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
	background-color: var(--whiteColor);
}

.news:nth-child(n+2){
	margin-top: 3rem;
}

.news__date{
	font-size: 0.9375rem;
	font-weight: 700;
}

.news__title{
	font-family: 'Amaranth', sans-serif;
	line-height: 1.25;
}

.news__link::after{
	content: "";
	width: 100%;
	height: 100%;

	
	top: 0;
	left: 0;
}

.news__content{
	margin-top: 1.875rem;
}

.news__content p{
	margin-top: 0;
	margin-bottom: 0;
	line-height: 1.78;
}

@media (max-width: 640px){

	html{
		font-size: 93.75%;
	}
}

@media (min-width: 641px) and (max-width: 768px){

	html{
		font-size: 100%;
	}
}

@media (min-width: 769px) and (max-width: 960px){

	html{
		font-size: 106.25%;
	}
}

@media (min-width: 961px){

	html{
		font-size: 112.5%;
	}
}

@media (max-width: 960px){

	.page{
		padding-top: 50px;
		padding-bottom: 50px;
	}

	.page__name-effect{
		padding-left: .625rem;
		padding-right: .625rem;
	}

	.news__title{
		--rTitleMarginTop: .75rem;
		font-size: 1.75rem;
	}
}

@media (min-width: 961px){

	.page{
		padding: 80px 50px;
	}

	.news__header{
		display: flex;
		align-items: flex-start;

		padding-left: 1.5rem;
		padding-right: 2.5rem;
	}

	.news__date{
		flex-shrink: 0;
		font-family: 'Amaranth', sans-serif;

		margin-right: 40px;
		text-align: center;
	}

	.news__day{
		line-height: 1;
		display: block;
		font-size: 4.333rem;
		color: var(--accentColorDark);
	}

	.news__year{
		display: block;
		font-size: 1rem;
		margin-top: 5px;
	}

	.news__title{
		font-size: 2.5rem;
	}	
}

@media (min-width: 1301px){

	.page__group{
		padding-left: 190px;
		padding-right: 100px;
	}
}

 .news__content p {
 color: black;
 }

 .buttonBevestiging a{
  text-decoration: none;  
  border-style: none;
  background-color: #ffd700;  
  color: #cd286e;
  text-align: center;  
  font-size: 28px;  
  width: 200px;
  transition: all 0.5s;
  cursor: pointer;  
 }