/*
Theme Name: Groeier
Text Domain: Groeier
Version: 1.0
Description: Groeier scherm WordPress thema
Tags: groeier, komverder
Author: Jarmo Roos
Author URI: https://www.groeier.nl
*/

#groeier {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0px;
	left: 0px;
}
#groeier .background {
	position: relative;
	background-color: black;
}
#groeier .background img {
	width: 100%;
}
#groeier .customer {
	height: 45vh;
	background-color: black;
	/*background-image: url(https://scherm.groeier.dev/wp-content/uploads/2023/01/6.jpg);*/
    background-position: bottom;
    background-size: 800px;
    background-repeat: no-repeat;
	padding: 5%;
}
#groeier .customer h2 {
	color: white;
	font-size: 2.5rem;
	line-height: 2.5rem;
	font-family: sofia-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
}
#groeier .customer h2.groeier {
	position: absolute;
	left: 5%;
	bottom: 5%;
}

#afspraak {
	z-index: 10;
	position: fixed;
	width: 100%;
	left: 0px;
	top: 0px;
}
#afspraak .background {
	position: relative;
	background-color: #d5333e;
	height: 55vh;
	background-size: cover;
	background-repeat: no-repeat;
}

#afspraak .background #groeier_animation {
	z-index: 10;
	width: 450px;
	position: absolute;
  	top: 50%;
  	left: 50%;
  	/* bring your own prefixes */
  	transform: translate(-50%, -50%);
}
#afspraak #overlay {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
}
#afspraak .customer {
	height: 45vh;
	background-color: black;
	/*background-image: url(https://scherm.groeier.dev/wp-content/uploads/2023/01/6.jpg);*/
    background-position: bottom;
    background-size: 800px;
    background-repeat: no-repeat;
	padding: 5%;
}
#afspraak .customer h2 {
	color: white;
	font-size: 2.5rem;
	line-height: 2.5rem;
	font-family: sofia-pro, sans-serif;
    font-weight: 700;
    font-style: normal;
}
#afspraak .customer h2.groeier {
	position: absolute;
	left: 5%;
	bottom: 5%;
}

.check_scherm {
	position: absolute !important;
	width: 600px !important;
	height: 894px !important;
}
.check_scherm .background {
	height: 600px !important;
}
.check_scherm .background #groeier_animation {
	width: 300px !important;
}
.check_scherm .customer {
	height: 450px !important;
}
.check_scherm .customer h2 {
	font-size: 60px !important;
	line-height: 60px !important;
}
.check_scherm .customer h2.groeier {
	bottom: -50px !important;
}
.check_groeier {
	position: absolute !important;
	width: 500px !important;
	height: 895px !important;
}
.check_groeier .customer {
	height: 485px !important;
}
.check_scherm .customer h2.groeier {
	bottom: -125px !important;
}