/***********************************************************************************************************************
 * HTML TAGS
 **********************************************************************************************************************/
body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: 'Nunito', sans-serif;
	font-size: 20px;
	color: rgba(0,0,0,0.7);
	line-height: 30px;
	font-weight: 100;
}
pre {
	overflow-x: hidden;
	overflow-y: auto;
	width: calc(100% - 40px);
	margin: 10px;
	padding: 10px;
	border: 1px solid #999;
	border-radius: 3px;
	background-color: #ddd;
	font-size: 10px;
	line-height: 15px;
	font-family: monospace;
}

h1 {
	font-size: 30px;
	line-height: 30px;
	margin: 0;
}

h3 {
	font-size: 20px;
	line-height: 30px;
	margin: 0;
}
q {
	display: block;
	margin: 0 60px;
	font-style: italic;
}
q::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	content: '\f10d';
	color: #EC175C;
	margin-right: 30px;
}

p {
	margin: 30px 0;
}

img {
	width: 100%;
	height: auto;
}

a,
a:visited,
a:focus
{
	text-decoration: none;
}

p a,
p a:visited,
p a:focus,
li > a,
li > a:visited,
li > a:focus
{
	color: #009887;
	text-decoration: underline;
}

i + a,
i + span
{
	margin-left: 15px;
}

/***********************************************************************************************************************
 * HELIX CONTAINER
 **********************************************************************************************************************/
#helix {
	position: fixed;
	top: 60px;
	width: 100%;
	height: calc(100% - 60px);
	overflow-y: auto;
}

/***********************************************************************************************************************
 * PROGRESS - The progress bar
 **********************************************************************************************************************/
.progress {
	margin-top: 15px;
	position: relative;
	border: 1px solid rgba(0, 0, 0, 0.3);
	background-color: rgba(0, 0, 0, 0.1);
	border-radius: 3px;
	height: 30px;
}
.progress > div {
	position: absolute;
	background-color: rgba(0, 0, 0, 0.2);
	height: 30px;
}

.progress > span {
	display: block;
	position: absolute;
	text-align: center;
	width: 100%;
	color: rgba(255, 255, 255, 0.9);
}

/***********************************************************************************************************************
 * ANCHOR BUTTON - e.g. Naar project
 **********************************************************************************************************************/
.anchor-btn {
	display: inline-block;
	padding: 0 10px;
	background-color: #EC175C;
	border: 0;
	margin: 0;
	border-radius: 15px;
	line-height: 30px;
	color: white;
	font-size: 15px;
	text-decoration: none;
}

.anchor-btn i {
	margin-right: 5px;
}
/***********************************************************************************************************************
 * DONATE BUTTON 1 - Gewoon a href
 **********************************************************************************************************************/
a.inputBtn {
	display: inline-block;
	padding: 0 15px;
	border: 0;
	margin: 0;
	border-radius: 15px;
	line-height: 30px;
	color: white;
	background-color: #EC175C;
	font-size: 17px;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
}
a.inputBtn > i {
	margin-right: 10px;
}
/***********************************************************************************************************************
 * DONATE BUTTON 2- button.inputBtn zit IN form.paypall
 **********************************************************************************************************************/
form.paypall img {
	width: 1px;
	height: 1px;
}
form.paypal {
	margin-bottom: -5px;
	padding: 0;
	display: inline-block;
	height: 30px;
	overflow: hidden;
}
button.inputBtn:hover {
	cursor: pointer;
}
button.inputBtn {
	display: block;
	padding: 0 10px;
	border: 0;
	margin: 0;
	border-radius: 15px;
	line-height: 30px;
	background-color: #EC175C;
	font-size: 15px;
	color: white;
}

button.inputBtn i {
	margin-right: 5px;
}

/***********************************************************************************************************************
 * GRID - Used by ALL block types. A content-block, for example exists of one grid column to keep the content centered.
 **********************************************************************************************************************/
.grid {
	margin: 0 10%;
	background-color: inherit;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	grid-column-gap: 30px;
	grid-row-gap: 30px;
}

ul.grid {
	list-style-type: none;
}

/***********************************************************************************************************************
 * TITLE - This is a special kind of template. It sets the page title on the browser tab as a side effect but it does
 * not have to be displayed in the page. A template must return a html tag though, because the nr of direct tags under
 * the #helix element must match the nr of items in the page data array.
 **********************************************************************************************************************/
.title {
	display: none;
}

/***********************************************************************************************************************
 * BLOCKS - Dignus blocks come in 4 flavours, white, gray, pink and green
 **********************************************************************************************************************/
.white-block {
	background-color: white;
}
.white-block h1,
.white-block h3
{
	color: #EC175C;
}

.grey-block {
	background-color: #ccc;
}
.grey-block h1,
.grey-block h3
{
	color: #EC175C;
}

.pink-block p a,
.pink-block p a:visited,
.pink-block p a:focus {
	color: white
}
.pink-block {
	background-color: #EC175C;
}
.pink-block h1,
.pink-block h3
{
	color: white;
}

.green-block {
	background-color: #009887;
}
.green-block h1,
.green-block h3
{
	color: white;
}

/***********************************************************************************************************************
 * BLOCK - Shared block styling
 **********************************************************************************************************************/
.content-block h1,
.progress-block h1,
.list-block h1,
.edit-block h1
{
	margin-top: 30px;
}

.content-block > div,
.progress-block > div,
.list-block > div,
.edit-block > div
{
	margin: 0 10%;
}

/***********************************************************************************************************************
 * EDIT BLOCK - A block for editing entities like project etc.
 **********************************************************************************************************************/
.edit-block h1 {
	float: left;
	width: calc(100% - 201px);
}

.edit-block .edit-tools {
	float: right;
	width: 200px;
	margin-top: 30px;
}
.edit-block .edit-tools button:first-child {
	margin-right: 0;
}
.edit-block .edit-tools button {
	display: block;
	outline: none;
	cursor: pointer;
	float: right;
	color: #EC175C;
	background-color: transparent;
	border: none;
	line-height: 30px;
	font-size: 30px;
	margin: 0 10px 0 0;
	padding: 0;
}

/***********************************************************************************************************************
 * PROGRESS BLOCK - The progress block is part of the project page where the progress of the project is shown
 **********************************************************************************************************************/
.progress-block {
	padding: 30px 0;
	text-align: center;
}

.progress-block form.paypal button.inputBtn {
	background-color: white;
	color: #009887;
}

.progress-block h1 {
	margin-top: 0;
	text-align: center;
}
.progress-block .progress {
	margin-bottom: 30px;
}
/***********************************************************************************************************************
 * FIRST CONTENT BLOCK - A content block that overlays the carousel
 **********************************************************************************************************************/
.first-content-block > div {
	background-color: inherit;
	position: relative;
	padding: 30px 30px 0 30px;
	margin: -200px calc(10% - 30px) 0 calc(10% - 30px);
}
.first-content-block > div > h1 {
	margin-top: 0;
}

/***********************************************************************************************************************
 * GRID BLOCK - Like the projects
 **********************************************************************************************************************/
.grid-block {
	padding: 30px 0;
}

.grid-block > h1:first-child {
	margin: 0 0 30px 10%;
}

.grid-block h1,
.grid-block h3
{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/***********************************************************************************************************************
 * CARD BLOCK - A persons details usually, like a dignus vriend or a dignus team member
 **********************************************************************************************************************/
.grid-block.card-block .grid {
	grid-template-columns: repeat(auto-fill, minmax(600px, 1fr));
}

/***********************************************************************************************************************
 * CARD CELL - A persons details usually, like a dignus vriend or a dignus team member
 **********************************************************************************************************************/
.grid-block.card-block .card-cell h3 {
	margin-top: 0;
}
.grid-block.card-block .card-cell img {
	width: calc(25% - 15px);
	float: left;
	object-fit: contain;
	object-position: top;
}

.grid-block.card-block .card-cell div {
	margin-left: 30px;
	width: calc(75% - 15px);
	float: left;
}

/***********************************************************************************************************************
 * PROJECT CELL - How projects are displayed in a grid
 **********************************************************************************************************************/
.project-cell > div,
.nieuws-cell > div,
.wensput-cell > div
{
	position: relative;
	margin-bottom: 8px;
}
.project-cell > div > h3,
.nieuws-cell > div > h3,
.wensput-cell > div > h3
{
	padding: 15px;
	margin-bottom: 8px;
	position: absolute;
	left: 0;
	bottom: 0;
	width: calc(100% - 30px);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	/*background-color: rgba(0, 0, 0, 0.3);*/
	background-color: rgba(236, 23, 92, 0.5);
	color: white
}

.pink-block .project-cell > div > h3 {
	background-color: rgba(236, 23, 92, 0.8);
	color: white;
}

.green-block .project-cell > div > h3 {
	background-color: rgba(0, 152, 135, 0.8);
	color: white;
}

.project-cell .anchor-btn {
	position: absolute;
	right: 0;
	top: 0;
	margin: 15px 15px 0 0;
	background-color: white;
	-webkit-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
	-moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
	box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.15);
}
.pink-block .project-cell .anchor-btn {
	color: #EC175C;
}
.green-block .project-cell .anchor-btn {
	color: #009887;
}

.project-cell img,
.nieuws-cell img,
.wensput-cell img
{
	width: calc(100%);
	/* height wordt gezet in modules/helix init functie */
	height: auto;
	object-fit: cover;
	object-position: top;
	background-color: rgba(0, 0, 0, 0.5);
}

.project-cell .progress
{
	margin: 0 0 15px 0;
}

/***********************************************************************************************************************
 * FOOTER - The two columns on the bottom
 **********************************************************************************************************************/
.footer {
	padding-top: 30px;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.footer .bank-tnv {
	margin-left: 33px;
}