:root {
	--creme: #ccbf9d;
	--darkGreen: #335441;
	--green: #456f47;
	--lightGreen: #a9b782;
	--orange: #deae48;
	--white: #ffffff;
	--black: #000000;
	--gray: #333333;
	--gray-light: #ccc;
	--gray-lighter: #f2f2f2;
	--gray-mid: #bbb;
	--blue-dark: #0400c5;
	--blue: #2563eb;
	--blue-light: #3b82f6;
	--blue-muted: #aab5c8;
	--text-blue: rgba(57, 76, 108, 1);
	--shadow-blue: rgba(57, 76, 108, 0.4);
	--shadow-blue-strong: rgba(57, 76, 108, 0.75);
	--shadow-black: rgb(0 0 0 / 40%);
	--red: #ff533a;
	--red-dark: #800000;
	--red-strong: #f40000;
	--green-bright: #45974a;
	--green-muted: #849b49;
	--yellow-light: #ffedbd;
	--bg-muted: #fafafa;
	--border-blue-light: #e5e7eb;
	--gray-bg: #f0f0f0;
}

body {
	background: url(/images/backgrond.png) center center;
	background-attachment: fixed;
	background-blend-mode: color-burn;
	background-size: contain;
	color: var(--gray);
	font-family: "Trebuchet MS", Calibri, sans-serif;
	font-size: 15px;
	margin: 0;
	padding: 0;
	scrollbar-color: var(--creme) var(--darkGreen);
}

progress { display: none; }

.loadscreen {
	width: -webkit-fill-available;
	height: -webkit-fill-available;
	position: fixed;
	padding: 20% 0 50%;
	text-align: center;
	background: rgba(255, 255, 255, 0.95);
	top: 0;
	z-index: 9999999;
}

.loader {
	border-radius: 50%;
	border-top: 16px solid var(--blue-dark);
	box-shadow: 0 5px 10px var(--shadow-blue);
	width: 100px;
	height: 100px;
	margin: 25px auto;
	background: var(--orange);
	-webkit-animation: spin 2s linear infinite;
	animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

nav, .nav {
	position: fixed;
	font-size: 16px;
	font-weight: bold;
	width: 250px;
	margin: 0;
	z-index: 950;
	overflow-x: hidden;
	overflow-y: auto;
	height: -webkit-fill-available;
	color: var(--text-blue);
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.75);
}
nav li { padding: 10px 15px; }
nav li a, nav li a:hover { color: var(--darkGreen) !important; }

nav:hover {
	height: -webkit-fill-available;
	box-shadow: 0 0 250px var(--shadow-blue-strong);
	background: var(--white) !important;
	backdrop-filter: none !important;
}
nav:hover .submenu { opacity: 100; margin-top: 0; transition-duration: 0.5s; }
nav:hover .menutext { display: unset; }
nav:hover .footerMenu { display: unset; }

nav ul { list-style: none; padding: 0; }

nav .button, .nav .button {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: bounce;
	animation-name: bounce;
	border-radius: 0;
	box-shadow: unset;
}

nav .button .material-icons { vertical-align: bottom !important; }
nav .material-icons { font-size: 35px; line-height: unset; padding-right: 10px; }
nav .menutext { padding: 10px; display: none; }
nav .menuIcon { display: none; }
nav:hover .footerMenu { display: none; }
nav a { border-bottom: 1px solid transparent !important; padding-bottom: 15px; font-weight: normal; }
nav a:hover { border-bottom: 1px solid var(--text-blue) !important; }

.rightmenu {
	padding-top: 3%;
	height: -webkit-fill-available;
	background: var(--creme);
	text-align: center;
	position: fixed;
	right: 0;
	top: 0;
	width: 400px;
	overflow: hidden;
	overflow-y: auto;
	z-index: 999;
	scrollbar-color: var(--creme) var(--darkGreen);
}
.rightmenu .dayCalList {
	background: var(--lightGreen);
	margin: 10px;
	padding: 10px;
	min-width: 50px;
	border-radius: 50px;
	font-style: italic;
}
.rightmenu a .active {
	border-radius: 10px;
	border: 1px solid var(--green);
	font-size: 20px;
}
.rightmenu:hover {
	box-shadow: 0 0 250px var(--shadow-blue-strong);
}
.rightmenu .button { width: -webkit-fill-available; box-shadow: none !important; }
.rightmenu .menutext { display: none; }
.rightmenu:hover .menutext { display: block; }
.rightmenu .border-radius-10 {
	border-radius: 10px;
	margin: 0;
}

.navSettings {
	background: var(--blue-muted);
	border-radius: 25px;
	text-align: center;
	padding: 10px;
	color: var(--text-blue) !important;
	line-height: 70px;
}
.navSettings a,
.navSettings button {
	border: 0;
	background: transparent;
	padding: 20px;
	border-radius: 20px;
	color: var(--text-blue) !important;
}
.navSettings .buttonActief,
.navSettings a:hover,
.navSettings button:hover {
	background: var(--bg-muted);
	font-weight: bold;
}

main, .main {
	min-height: 750px;
	padding: 50px 50px 50px 300px;
	margin: 0 auto;
	max-width: 1250px;
}

/* === Hero === */
.hero {
	text-align: center;
	padding: 60px 20px;
	background: linear-gradient(135deg, var(--blue), var(--blue-light));
	color: var(--white);
	border-radius: 10px;
}

/* === CTA === */
.cta {
	text-align: center;
	padding: 40px;
	background: var(--gray-lighter);
	border-radius: 10px;
}
/* === Features === */
.features {
	text-align: center;
	gap: 20px;
}

.features .feature-icon {
	font-size: 2rem;
	margin-bottom: 10px;
}

/* === Pricing === */
.pricing {
	text-align: center;
	gap: 20px;
}

.pricing .plan {
	flex: 1 1 calc(33.333% - 13px);
	border: 2px solid var(--blue);
	border-radius: 10px;
	padding: 20px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.pricing ul {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
}

/* === FAQ === */
.faq .faq-items p strong {
	display: block;
	margin-top: 10px;
}

/* === Team === */
.team {
	text-align: center !important;
	gap: 20px;
}

.team img {
	border-radius: 50%;
	max-width: 100px;
	margin-bottom: 10px;
}

/* === Footer === */
.footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	padding: 10px 0;
	border-top: 1px solid var(--border-blue-light);
	color: #555;
}

.footer-links a {
	color: var(--blue);
	text-decoration: none;
}

.footer-links a:hover {
	text-decoration: underline;
}

/* === Afbeelding blok === */
.img-wrap img {
	max-width: 100%;
	border-radius: 8px;
}

.img-buttons {
	margin-top: 8px;
	display: flex;
	gap: 8px;
	justify-content: center;
}

.splitBox {
	display: flex;
	flex-wrap: wrap;
	width: -webkit-fill-available;
	overflow: hidden;
	justify-content: space-between;
}
.splitBox .center { text-align: center; }

.splitScreen-1 { max-width: 88%; width: 88%; }
.splitScreen-2 { max-width: 37%; width: 37%; }
.splitScreen-3 { max-width: 20%; width: 20%; }
.splitScreen-4 { max-width: 13%; width: 13%; }
.splitScreen-5 { max-width: 60%; width: 60%; }

.splitScreen-1,
.splitScreen-2,
.splitScreen-3,
.splitScreen-4,
.splitScreen-5 {
	background: rgba(250, 250, 250, 0.85);
	margin: 2%;
	padding: 4%;
	overflow: hidden;
	border-radius: 10px;
	border: 1px solid var(--creme);
}

h2 small {
	color: var(--gray-light);
	font-size: 16px;
}

.splitScreen-low {
	padding: 0 2%;
	margin: 0 2% !important;
}

.splitScreen-small {
	padding: 10px;
	width: -webkit-fill-available;
	margin: 5px;
}

.splitScreen-clean {
	background: transparent !important;
	border: unset !important;
}
.splitScreen-clean:hover,
.blue .splitScreen-2:hover,
.blue .splitScreen-3:hover {
	box-shadow: none;
}

.splitScreen-space-evenly { justify-content: space-evenly !important; }
.splitScreen-space-around { justify-content: space-around !important; }
.splitScreen-align-end { align-items: flex-end; }

.splitScreen-img-max {
	width: -webkit-fill-available;
	margin: 1% !important;
}

.splitBoxEetBox {
	border: 1px solid var(--orange);
	background: var(--creme);
	border-radius: 25px;
}

.splitBoxFood { }

.splitBoxStats {
	display: flex !important;
	width: 90%;
	margin: 5%;
	background: rgba(250, 250, 250, 0.85);
	border-radius: 10px;
	border: 1px solid var(--creme);
}

.splitScreen-img {
	width: 20%;
	padding: 0;
	margin: 0 !important;
}

.foodlistHoverRight { display: none; }
.splitScreen-1:hover .foodlistHoverRight {
	display: unset;
	float: right;
	width: -webkit-fill-available;
	text-align: right;
	background: rgba(250, 250, 250, 0.5);
	margin: -5px;
	margin-top: -35px;
	line-height: 35px;
}


.transparant { background: none; }
.transparant .textshadow {
	color: var(--gray) !important;
	text-shadow: none !important;
}

.whitebox {
	background: rgb(250, 250, 250);
	border-radius: 25px;
}
.whitebox .splitScreen-1,
.whitebox .splitScreen-2,
.whitebox .splitScreen-3,
.whitebox .splitScreen-4,
.whitebox .splitScreen-1:hover,
.whitebox .splitScreen-2:hover,
.whitebox .splitScreen-3:hover,
.whitebox .splitScreen-4:hover {
	background: transparent !important;
	box-shadow: unset !important;
}

.border-only { border: 1px solid var(--creme) !important; }

.kop {
	color: var(--white);
	background: var(--text-blue);
}

table {
	border-radius: 5px;
	border: 1px solid var(--gray);
	overflow: hidden;
	margin: -10px -12px !important;
	width: -webkit-fill-available;
	border-radius: 15px;
}

th {
	background: var(--blue-muted) !important;
	color: var(--text-blue) !important;
	font-size: 16px;
	line-height: 40px;
	font-weight: bold;
	padding-left: 25px;
}
tr:nth-child(odd) { background-color: var(--gray-lighter); }
tr:hover { background-color: var(--yellow-light); }

.img,
.img-big {
	width: 90%;
	height: 90%;
	max-width: 150px;
	max-height: 150px;
	border: 1px solid var(--orange);
	box-shadow: 0 5px 10px var(--shadow-black);
}
.img-big {
	max-width: 300px;
	max-height: 300px;
}

.imgTumb {
	max-height: 200px;
	border-radius: 7px;
	box-shadow: 0 5px 10px var(--shadow-black);
}

.button {
	text-decoration: none;
	line-height: 40px;
	background: var(--orange);
	color: var(--white);
	text-transform: uppercase;
	font-weight: bold;
	padding: 10px 20px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	display: inline-block;
	margin: 1px;
}

.pupup .button { background: var(--darkGreen) !important; }
.button .material-icons { vertical-align: text-bottom; }
.button:hover .material-icons,
.btnfactuurList:hover .material-icons {
	transform: scale(-1, 1);
	transition-duration: 0.5s;
	color: var(--green) !important;
}
.button:hover,
.buttonActief { font-style: italic; }

.search { width: 200px; height: 30px; background: var(--gray-light); }
.search:hover { width: 350px; }

.material-icons-box {
	height: 250px;
	overflow-y: scroll;
	overflow-x: hidden;
}
.material-icons-box .material-icons-list {
	display: inline-block;
	margin: 5px;
}

.red { color: var(--red); }
.redHover:hover { color: var(--red); cursor: pointer; }

.green { color: var(--green-bright); }
.greenHover:hover { color: var(--green-bright); cursor: pointer; }

.yellow { color: var(--orange) !important; }
.yellowHover:hover { color: var(--orange); cursor: pointer; }

.white { color: var(--white); }
.whiteHover:hover { color: var(--white); cursor: pointer; }

.gray { color: var(--gray-mid); }
.grayHover:hover { color: var(--gray-mid); cursor: pointer; }

.black { color: var(--black); }
.blackHover:hover { color: var(--black); cursor: pointer; }

.error .material-icons,
.goed .material-icons {
	line-height: 40px;
	padding: 0 5px 0 0;
}

.textCreme { color: var(--creme) !important; }
.textDarkGreen { color: var(--darkGreen) !important; }
.textGreen { color: var(--green) !important; }
.textLightGreen { color: var(--lightGreen) !important; }
.textOrange { color: var(--orange) !important; }

.bgCreme { background: var(--creme) !important; }
.bgDarkGreen { background: var(--darkGreen) !important; }
.bgGreen { background: var(--green) !important; }
.bgLightGreen { background: var(--lightGreen) !important; }
.bgOrange { background: var(--orange) !important; }

.boxGreen { color: var(--green-bright); background: #b9ffb5; }
.boxBlue { color: var(--blue-dark); background: #bfc0ff; }
.boxYellow { color: var(--orange); background: var(--yellow-light); }
.boxRed { color: var(--red-strong); background: #ffadad; }
.boxGrey { color: var(--orange); background: var(--text-blue); }

.boxGreen,
.boxBlue,
.boxYellow,
.boxRed,
.boxGrey {
	padding: 10px;
	border-radius: 5px;
	width: fit-content;
	line-height: 30px;
	display: inline-block;
}

a {
	text-decoration: none;
	color: var(--gray);
}
a:hover {
	text-decoration: dotted;
	color: var(--gray-light);
}
.link { text-decoration: underline !important; }

.icon-white { padding-left: 10px; }
.material-icons { vertical-align: middle; }
button .material-icons { line-height: 15px !important; }

.smallIcon { font-size: 15px !important; }
.bigIcon { font-size: 45px !important; }

.noScreen { display: none !important; }
.textRight { float: right; }
.line-through { text-decoration: line-through; }

.plantMealList {
	border: 1px solid var(--orange);
	border-radius: 10px;
	padding: 5px;
	color: var(--darkGreen);
	background: var(--gray-lighter);
	font-size: 14px;
	margin: 5px;
	display: inline-block;
}

.point {
	background: var(--darkGreen);
	color: var(--lightGreen);
	border-radius: 50px;
	width: 32px !important;
	line-height: 32px !important;
	text-align: center;
	display: inline-block;
	margin-right: 10px;
}

.small {
	color: var(--gray);
	font-size: 10px !important;
}

/* === Responsiviteit === */
@media (max-width: 768px) {
	.hero, .cta {
		padding: 40px 15px;
	}
}

.editor {
	border: 1px solid var(--gray-light);
	border-radius: 0 0 10px 10px;
	padding: 10px;
	background: var(--white);
}
.editor:hover {
	border: 1px solid var(--gray);
	background: var(--gray-lighter);
}

.editRow {
	background: var(--gray-light);
	border-radius: 10px 10px 0 0;
	margin-top: 10px;
	padding: 10px;
}
.editRow button {
	padding: 10px 20px;
	font-size: 18px;
}

.progressbar {
	background: var(--orange);
	border-radius: 50px;
}
.progressbar .progressbarBody {
	background: var(--darkGreen);
	color: var(--creme);
	height: 10px;
	border-radius: 15px;
	padding-top: 5px;
}

#confetti {
	width: 400px;
	opacity: 1;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 99999999999;
	transition-duration: 1s;
}

#popupscreen {
	position: fixed;
	width: 100%;
	height: -webkit-fill-available;
	background: rgba(0, 0, 0, 0.7);
	z-index: 950;
	top: 0;
	left: 0;
}

.popup, .popupbig, .popupwidth {
	width: 50%;
	min-height: 25%;
	left: 25%;
	top: 20%;
	padding: 0;
	text-align: center;
	position: fixed;
	border: 1px solid var(--darkGreen);
	background: rgba(250, 250, 250, 0.9);
	box-shadow: 3px 3px 5px var(--shadow-black);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	box-shadow: 0 0 100px var(--shadow-black);
	border-radius: 25px;
	z-index: 99999;
}
.popupbig, .popupwidth { width: 80%; left: 10%; }

.popupcontent {
	overflow: hidden;
	overflow-y: auto;
	max-height: 350px;
	padding: 2%;
	margin: 8px;
	min-height: 75%;
	top: 10%;
}
.popup h2, .popupbig h2 {
	padding: 20px;
	margin: -1px;
	background: var(--green);
	border: 1px solid var(--darkGreen);
	border-radius: 25px 25px 0 0;
	color: var(--white) !important;
	font-size: 25px;
}

embed {
	margin-top: 5px;
	width: 100%;
	min-height: 750px;
	border-radius: 10px;
}

code {
	background-color: var(--gray-lighter);
	border: 1px solid var(--gray-mid);
	display: block;
	padding: 20px;
	overflow: scroll;
}

.display-flex { display: flex; }

@supports (-webkit-touch-callout: none) {
	.readShow { display: block; }
	.readHidden { display: none; }
}

.right { float: right; }

.left {
	top: 0;
	margin: 0;
	border-radius: 0;
	width: 20%;
	height: -webkit-fill-available;
	position: fixed;
	overflow-x: hidden;
	overflow-y: auto;
	z-index: 99;
}
.left:hover { width: 30%; }
.left a:hover,
.left p a:hover { color: var(--gray); }
.floatLeft { float: left; }

.alignleft { text-align: left; }

footer {
	background: var(--white) !important;
	font-size: 13px;
	width: -webkit-fill-available;
	padding: 25px;
	text-transform: uppercase;
	max-height: 130px;
	overflow-y: auto;
	z-index: 100;
	bottom: 0;
	position: relative;
}
.footerLeft, .footerRight {
	max-width: 1000px;
	margin: auto;
	text-transform: none;
}
.footerRight {
	text-align: right;
	float: right;
	margin-right: 10px;
}
.footerCenter {
	text-align: center;
	display: none;
}

h1 { text-transform: uppercase; }
h1 a { color: var(--white); }

main h1 {
	padding: 25px 10px;
	text-align: center;
}

.imgzoom {
	cursor: zoom-in;
	transition: transform .2s;
}
.imgzoom:hover { transform: scale(1.5); }

.notificatie {
	color: var(--orange);
	width: -webkit-fill-available;
	top: 0;
	left: 0;
	text-align: center;
	padding: 10px;
	margin: 10px 0;
	border-radius: 25px;
	background: var(--yellow-light);
	z-index: 9999999;
}

.notificatie_green,
.notificatie_red {
	color: var(--white) !important;
	border-radius: 0 !important;
	margin: 0 !important;
	position: absolute !important;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-delay: 4s;
	animation-delay: 4s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeout;
	animation-name: fadeout;
}

.notificatie_green { background: var(--green-muted); }
.notificatie_red { background: var(--red-dark); }

.goed {
	color: var(--green);
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
}

.error {
	color: var(--red);
	padding-left: 10px;
	padding-top: 5px;
	font-weight: bold;
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: error;
	animation-name: error;
}

input .boxGreen {
	background: var(--gray-lighter) !important;
	border: 1px solid #b9ffb5 !important;
	width: unset !important;
}

input, select, button {
	color: var(--gray);
	border-radius: 10px !important;
	border: 1px solid transparent !important;
	background-color: var(--gray-lighter);
	margin: 1px;
	padding: 10px;
	width: -webkit-fill-available;
}

.selAddOrEditSmall { width: 30% !important; }
.button select { height: 38px; }

input .maxSize { max-width: 350px; }

input:hover,
select:hover {
	background-color: var(--gray-lighter);
	border: 1px solid var(--gray) !important;
}

.inputsmall { width: 40% !important; }

.edit {
	background: rgba(22, 123, 0, 0.5);
	padding: 10px;
	width: 35px !important;
	font-weight: bold;
}

input[readonly=readonly] {
	background-color: transparent;
	border: 0 !important;
}

input[type=checkbox],
input[type=radio] {
	width: 25px;
}

input[type=submit],
input[type=button] {
	background-color: var(--darkGreen);
	color: var(--white);
	line-height: 40px;
	padding: 1%;
	width: 100%;
	font-weight: bold;
	cursor: pointer;
	-webkit-appearance: none;
}

button { cursor: pointer !important; }

input[type=radio] img { }

input[type=radio]:checked + label img {
	-ms-transform: scale(1.2); /* IE 9 */
	-webkit-transform: scale(1.2); /* Safari 3-8 */
	transform: scale(1.2);
}

.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--gray-light);
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}

.slider:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: var(--white);
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}

input:checked + .slider { background-color: var(--darkGreen); }
input:focus + .slider { box-shadow: 0 0 1px var(--darkGreen); }

input:checked + .slider:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

.input-hidden { display: none; }

textarea {
	background-color: var(--gray-lighter);
	border-radius: 5px !important;
	border: 1px solid transparent !important;
	margin: 1px;
	padding: 1%;
	width: 98%;
	height: 150px;
}
textarea:hover { border: 1px solid var(--gray) !important; }

fieldset {
	background: var(--white);
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: bounceIn;
	animation-name: bounceIn;
	word-break: break-word;
	border-radius: 10px !important;
	border: 0;
}

.placeholder {
	color: var(--text-blue);
	padding: 1px 10px;
	border: 0;
	border-radius: 5px;
	font-size: 13px;
}

.placeholder-normal {
	color: var(--text-blue);
	font-size: 12px;
}

.boxselect-label {
	display: inline-block;
	padding: 1em 2em;
	cursor: pointer;
	transition: 0.3s;
}
.boxselect-label:active {
	transform: translateY(2px);
	border: 1px solid var(--gray);
}

.boxselect-input:checked + .boxselect-label {
	background: var(--blue-muted);
	color: var(--text-blue) !important;
	border: 1px solid var(--text-blue) !important;
	border-radius: 10px;
}

.blink {
	-webkit-animation: 2s linear infinite condemned_blink_effect;
	animation: 2s linear infinite condemned_blink_effect;
}

/* === Animations === */
@keyframes progressBar {
	0% { width: 0; }
	100% { width: 100%; }
}

@-webkit-keyframes condemned_blink_effect {
	0% { visibility: hidden; }
	50% { visibility: hidden; }
	100% { visibility: visible; }
}

@keyframes condemned_blink_effect {
	0% { visibility: hidden; }
	50% { visibility: hidden; }
	100% { visibility: visible; }
}

@-webkit-keyframes from_top {
	0% { opacity: 1; -webkit-transform: translateY(0); }
	100% { opacity: 0; -webkit-transform: translateY(-200px); }
}

@keyframes from_top {
	0% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(-200px); }
}

@-webkit-keyframes zoomIn {
	0% { opacity: 0; -webkit-transform: scale(0.1); }
	80% { -webkit-transform: scale(1.1); }
	100% { opacity: 1; -webkit-transform: scale(1); }
}

@keyframes zoomIn {
	0% { opacity: 0; transform: scale(0.1); }
	80% { transform: scale(1.1); }
	100% { opacity: 1; transform: scale(1); }
}

@-webkit-keyframes bounceIn {
	0% { opacity: 0; -webkit-transform: translateY(-2000px); }
	60% { -webkit-transform: translateY(30px); }
	80% { -webkit-transform: translateY(-10px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes bounceIn {
	0% { opacity: 0; transform: translateY(-2000px); }
	60% { transform: translateY(30px); }
	80% { transform: translateY(-10px); }
	100% { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes bounce {
	0% { opacity: 0; -webkit-transform: translateY(0); }
	60% { -webkit-transform: translateY(20px); }
	80% { -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes bounce {
	0% { opacity: 0; transform: translateY(0); }
	60% { transform: translateY(20px); }
	80% { transform: translateY(-20px); }
	100% { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes feder {
	0% { opacity: 0; -webkit-transform: translateY(-50px); }
	50% { -webkit-transform: translateY(20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes feder {
	0% { opacity: 0; transform: translateY(-50); }
	50% { transform: translateY(20px); }
	100% { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes error {
	0% { -webkit-transform: translateX(-10px); }
	20% { -webkit-transform: translateX(10px); }
	40% { -webkit-transform: translateX(-10px); }
	60% { -webkit-transform: translateX(10px); }
	80% { -webkit-transform: translateX(-10px); }
	100% { -webkit-transform: translateX(0); }
}

@keyframes error {
	0% { transform: translateX(-10px); }
	20% { transform: translateX(10px); }
	40% { transform: translateX(-10px); }
	60% { transform: translateX(10px); }
	80% { transform: translateX(-10px); }
	100% { transform: translateX(0); }
}

@keyframes lineUp {
	0% { opacity: 0; transform: scale(0) translateY(80%); }
	100% { opacity: 1; transform: scale(1) translateY(0%); }
}

@-webkit-keyframes fadeout {
	0% { -webkit-opacity: 1; top: 0; }
	40% { -webkit-transform: scale(1); }
	100% { -webkit-opacity: 0; -webkit-transform: scale(0); top: -250px; }
}

@keyframes fadeout {
	0% { opacity: 1; top: 0; }
	40% { transform: scale(1); }
	100% { opacity: 0; transform: scale(0); top: -250px; }
}

/* === Responsive adjustments === */
@media only screen and (max-width: 1080px) {
	.container { display: block; }
	.rightmenu {
		padding-top: 5px;
		overflow: hidden;
		width: -webkit-fill-available;
		bottom: 0;
		left: 250px;
		height: 58px;
	}
	.rightmenu:hover { height: unset; }

	main, .main {
		padding: 75px 50px 50px 300px !important;
	}

	#confetti { width: -webkit-fill-available; }
}

@media only screen and (max-width: 600px) {
	header, .header { height: 0; }

	nav, .nav {
		position: fixed;
		width: -webkit-fill-available !important;
		padding: 10px;
		height: 50px !important;
		top: 0;
		overflow: hidden;
	}
	nav ul { line-height: 50px; }
	nav .button { padding: 10px 0; }
	nav img { opacity: 1; height: 90px; width: 90px; margin: -18px; }
	nav ul a, .nav ul a { display: none; width: 10px; }
	nav p { width: auto; }

	nav .menuIcon {
		text-align: center;
		display: block;
		padding: 3px;
		font-size: 30px;
	}

	nav:hover, .nav:hover {
		height: -webkit-fill-available !important;
		overflow: auto;
	}
	nav:hover .menuIcon { display: none !important; }
	nav:hover .menutext { display: inline !important; }
	nav:hover a, .nav:hover a {
		display: block;
		float: left;
		width: 100%;
		z-index: 999;
	}

	.search_form {
		position: fixed;
		bottom: 0;
		z-index: 999;
		background: var(--shadow-blue-strong);
		margin: 0;
		padding: 5px;
		left: 0;
		right: 0;
	}
	.search, .search:hover { width: 80%; }
	.search_form button { width: 17% !important; }

	.noMob { display: none !important; }
	.noScreen { display: block !important; }

	.top {
		display: block;
		float: left;
		padding: 0;
	}

	.left {
		width: 50px;
		overflow-y: hidden;
		z-index: 9;
		height: 40px;
		top: 40%;
		border-radius: 100px;
		left: -40px;
		padding: 15px;
		text-align: right;
	}
	.left section { display: none; }
	.left:hover {
		width: 80%;
		left: 0;
		height: -webkit-fill-available;
		border-radius: 0;
		top: 65px;
		overflow-y: auto;
		text-align: left;
		margin: 0 !important;
	}
	.left:hover section { display: block; }

	main, .main {
		margin: 80px 10px 25px 10px;
		border-radius: 0;
		min-height: 300px;
		overflow-y: hidden;
		overflow-x: scroll;
		padding: 0 !important;
		max-width: -webkit-fill-available !important;
	}

	.rightmenu {
		height: 60px;
		bottom: 0;
		top: unset;
		padding-top: 10px;
		width: -webkit-fill-available;
		left: 0;
		overflow-y: hidden;
	}
	.rightmenu:hover {
		height: unset;
		padding: 10px;
		overflow: scroll;
		top: 70px;
		overflow-y: auto;
	}

	section { padding: 10px; }

	.notificatie {
		bottom: 0 !important;
		top: unset !important;
		left: 0 !important;
	}

	.inputsmall { width: -webkit-fill-available !important; }

	.splitBox {
		display: unset;
		position: unset;
		float: left;
		overflow: unset !important;
	}

	.splitScreen-1,
	.splitScreen-2,
	.splitScreen-3,
	.splitScreen-4,
	.splitScreen-5 {
		width: -webkit-fill-available !important;
		max-width: -webkit-fill-available !important;
		margin: 5% 0 !important;
		border-radius: 10px !important;
	}

	.splitBoxEetBox {
		margin: 0;
		border-radius: 10px;
		display: flex !important;
	}

	.splitScreen-small {
		margin: 3px 2px !important;
	}

	.splitScreen-img-max {
		width: unset;
		max-width: 45% !important;
		margin: 1% !important;
	}

	.popup {
		width: -webkit-fill-available;
		left: 0;
		top: 0;
		margin: 5%;
		position: fixed;
		padding: 5%;
	}
	.popup h2 { margin: -7% -7% 0 -7%; }

	.display-flex { display: block; }

	.calltoactionBox {
		left: 5%;
		top: 5%;
		width: 90%;
		padding: 0;
	}
	.calltoactionBox img { width: 20%; margin: 0 40%; }

	.imgTumb {
		margin-left: 0;
		margin-top: 10px;
	}

	footer {
		bottom: 0;
		padding: 0;
	}
	.footerMenu {
		width: 50%;
		position: relative;
		margin-left: 5%;
	}

	.button {
		margin: 10px 0;
		width: -webkit-fill-available;
	}

	.navSettings {
		height: 70px;
		overflow: hidden;
	}
	.navSettings:hover { height: auto; }
	.navSettings a, .navSettings button {
		display: block;
		padding: 0;
	}

	#confetti { width: -webkit-fill-available; }
}