/***********************************************************************************************************************
 * HTML TAGS
 **********************************************************************************************************************/
:root {
	--black: #04123A;
	--grey: #bcbcbc;
	--white: white;
	--info: #5d98d5;
	--failure: #E80A58;
	--success: #17ef89;
	--warning: #f3e633;
}

html {
	font-size: 100%;
}

body {
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	font-family: 'Nunito', sans-serif;
	font-size: 125%;
	color: var(--black);
	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;
	font-weight: normal;
	margin: 0;
}

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

p {
	margin: 30px 0;
}

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

a,
a:visited,
a:focus
{
	color: var(--info);
	text-decoration: none;
}

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

/***********************************************************************************************************************
 * HELIX CONTAINER
 **********************************************************************************************************************/
#helix {
	position: fixed;
	top: 3rem;
	width: 100%;
	height: calc(100% - 9rem);
	overflow-y: auto;
	padding: 3rem 0;
}
/***********************************************************************************************************************
 * 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 a,
.pink-block a:visited,
.pink-block 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 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-top: 10px;
	margin-left: 15px;
	width: calc(75% - 15px);
	float: left;
}

/***********************************************************************************************************************
 * PROJECT CELL - How projects are displayed in a grid
 **********************************************************************************************************************/
.project-cell {
	position: relative;
}
.project-cell .anchor-btn {
	position: absolute;
	right: 0;
	margin: 15px 15px 0 0;
	background-color: white;
	color: #009887;
}

.project-cell img,
.nieuws-cell img,
.wensput-cell img
{
	width: 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 h3 {
	margin-bottom: 15px;
}

/***********************************************************************************************************************
 * 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;
}