/* Hallo, kijk gerust eens rond. Heb je vragen, contacteer mij dan via webdev [at] felixvandyck.be */

.main-image {
	background-image: url('../images/pexels-monicore-1087893.jpg');
	background-size: cover;
	background-position: bottom center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

@media (min-width: 400px) {
	.container {
		width: 85%;
	}
}

/* cascade, media query onder default definitie, niet voor */
.main-title-div {
	position: absolute;
	left: 50%;
	top: 20%;
	transform: translate(-50%, -50%);
}

.main-title {
	font-size: 5rem;
	padding-top: 20%;
	font-family: 'MateSC';
	margin: auto;
}

.sub-title-div {
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
}

.sub-title {
	font-family: 'GrapeNuts';
	font-size: 5rem;
	transform: rotateZ(350deg);
	white-space:nowrap;
}

.openingstijden>tbody>tr>td {
	padding: 0 0;
	line-height: 1.6;
	font-weight: 600;
}

.openingstijden-div {
	margin-left: 10px;
	bottom: 10px;
	left: 10px;
	position: absolute;
}

.openingstijden {
	font-family: 'GrapeNuts';
	font-size: 1.7rem;
	--border-color-softer: white;
}

.promo-footer {
	position: absolute;
	bottom: 12px;
	right: 10px;
	font-size: 1.2rem;
	margin-bottom: 1.5rem;
}

.header {
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 15px;
	font-size:1.7rem;
}

/* Larger than mobile (default point when grid becomes active) */
@media (min-width: 600px) {
	.main-title-div {
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translate(-50%, -50%);
	}

	.main-title {
		font-size: 8rem;
	}

	.sub-title-div {
		position: absolute;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
	}

	.sub-title {
		font-size: 6.8rem;
	}

	.promo-footer {
		font-size: 2rem;
	}
	
	.header {
		font-size:2rem;
	}
}

/* Larger than phablet */
@media (min-width: 900px) {
	.main-title-div {
		position: absolute;
		left: 50%;
		top: 20%;
		transform: translate(-50%, -50%);
	}

	.main-title {
		font-size: 9rem;
	}

	.sub-title-div {
		position: absolute;
		left: 50%;
		top: 45%;
		transform: translate(-50%, -50%);
	}

	.sub-title {
		font-size: 9rem;
	}
}

/* Larger than tablet */
@media (min-width: 1200px) {
	.main-title-div {
		position: absolute;
		left: 50%;
		top: 30%;
		transform: translate(-50%, -50%);
	}

	.main-title {
		font-size: 10rem;
	}

	.sub-title-div {
		position: absolute;
		left: 70%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.sub-title {
		font-size: 8rem;
	}
}