body{  font-family: system, -apple-system,'Helvetica Neue', Helvetica, sans-serif; 
	margin: 0px; 
	padding:0px; 
	//padding-left: 20px;
	//padding-right: 20px;
	font-weight:400; 
	font-size: 18;
	color: black;
	height: 100%;
	box-sizing: border-box;

	
	background-color: #F5F5F7;
	background-color-dark: #1D1D1F;
	//background-color: white;
	//background: -webkit-linear-gradient(55deg, #009785, #245aa5, #b800e9);
	
	-webkit-text-size-adjust: none; 
	-webkit-tap-highlight-color: rgba(0,0,0,0);
//       -webkit-user-select: none; 
	-webkit-touch-callout: none; 
	
	text-decoration: none;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;   
	 
		
}

@charset "UTF-8";:root {
 --border-radius-small: 5px;
 --border-radius-regular: 10px;
 --border-radius-medium: 20px;
 --border-radius-large: 30px;
 --color-app-fibaro: #000;
 --color-app-philips-hue: #f4af2e;
 --color-app-twitter: #1c98ef;
 --color-app-discord: #5a65ea;
 --color-mono-000: #fff;
 --color-mono-010: #fbfbfd;
 --color-mono-025: #f4f4fa;
 --color-mono-050: #eaeaf1;
 --color-mono-100: #dadae2;
 --color-mono-200: #c8c8d0;
 --color-mono-300: #b1b1b9;
 --color-mono-400: #93939a;
 --color-mono-500: #7a7a7f;
 --color-mono-600: #626265;
 --color-mono-700: #49494b;
 --color-mono-800: #303031;
 --color-mono-900: #1c1c1c;
 --color-mono-1000: #000;
 --color-mono-A05: rgba(0,0,0,0.05);
 --color-mono-A10: rgba(0,0,0,0.1);
 --color-mono-A20: rgba(0,0,0,0.2);
 --color-mono-A50: rgba(0,0,0,0.5);
 --color-mono-A60: rgba(0,0,0,0.6);
 --color-mono-A70: rgba(0,0,0,0.7);
 --color-white: #fff;
 --color-white-A00: hsla(0,0%,100%,0);
 --color-white-A50: hsla(0,0%,100%,0.5);
 --color-black: #000;
 --color-black-A00: transparent;
 --color-black-A50: rgba(0,0,0,0.5);
 --color-ice-white: #f4f4fa;
 --color-ice-white-A00: rgba(244,244,250,0);
 --color-night-black: #111218;
 --color-night-black-A00: rgba(17,18,24,0);
 --color-blue-050: #e6f3ff;
 --color-blue-100: #cce6fe;
 --color-blue-200: #99cdfd;
 --color-blue-300: #66b4fc;
 --color-blue-400: #339bfb;
 --color-blue-500: #0082fa;
 --color-blue-600: #0068c8;
 --color-blue-700: #004e96;
 --color-blue-800: #003464;
 --color-blue-900: #001a32;
 --color-blue-A05: rgba(0,130,250,0.05);
 --color-blue-A10: rgba(0,130,250,0.1);
 --color-blue-A20: rgba(0,130,250,0.2);
 --color-blue-A30: rgba(0,130,250,0.3);
 --color-blue-A40: rgba(0,130,250,0.4);
 --color-blue-A50: rgba(0,130,250,0.5);
 --color-blue-A60: rgba(0,130,250,0.6);
 --color-blue-A70: rgba(0,130,250,0.7);
 --color-blue-A80: rgba(0,130,250,0.8);
 --color-blue-A90: rgba(0,130,250,0.9);
 --color-blue: var(--color-blue-500);
 --color-blue-hover: var(--color-blue-400);
 --color-blue-active: var(--color-blue-600);
 --color-green-050: #ecfae6;
 --color-green-100: #d9f4cc;
 --color-green-200: #b2e999;
 --color-green-300: #8cdd66;
 --color-green-400: #65d233;
 --color-green-500: #3fc700;
 --color-green-600: #329f00;
 --color-green-700: #267700;
 --color-green-800: #195000;
 --color-green-900: #0d2800;
 --color-green-A05: rgba(63,199,0,0.05);
 --color-green-A10: rgba(63,199,0,0.1);
 --color-green-A20: rgba(63,199,0,0.2);
 --color-green-A30: rgba(63,199,0,0.3);
 --color-green-A40: rgba(63,199,0,0.4);
 --color-green-A50: rgba(63,199,0,0.5);
 --color-green-A60: rgba(63,199,0,0.6);
 --color-green-A70: rgba(63,199,0,0.7);
 --color-green-A80: rgba(63,199,0,0.8);
 --color-green-A90: rgba(63,199,0,0.9);
 --color-green: var(--color-green-500);
 --color-green-hover: var(--color-green-400);
 --color-green-active: var(--color-green-600);
 --color-purple-500: #7500fb;
 --color-purple-A05: rgba(117,0,251,0.05);
 --color-purple-A10: rgba(117,0,251,0.1);
 --color-purple-A20: rgba(117,0,251,0.2);
 --color-purple-A30: rgba(117,0,251,0.3);
 --color-purple-A40: rgba(117,0,251,0.4);
 --color-purple-A50: rgba(117,0,251,0.5);
 --color-purple-A60: rgba(117,0,251,0.6);
 --color-purple-A70: rgba(117,0,251,0.7);
 --color-purple-A80: rgba(117,0,251,0.8);
 --color-purple-A90: rgba(117,0,251,0.9);
 --color-purple: var(--color-purple-500);
 --color-red-050: #fce9e9;
 --color-red-100: #f7d2d2;
 --color-red-200: #efa4a5;
 --color-red-300: #e87777;
 --color-red-400: #e0494a;
 --color-red-500: #d81c1d;
 --color-red-600: #ad1617;
 --color-red-700: #821111;
 --color-red-800: #560b0c;
 --color-red-900: #2b0606;
 --color-red-A05: rgba(216,28,29,0.05);
 --color-red-A10: rgba(216,28,29,0.1);
 --color-red-A20: rgba(216,28,29,0.2);
 --color-red-A30: rgba(216,28,29,0.3);
 --color-red-A40: rgba(216,28,29,0.4);
 --color-red-A50: rgba(216,28,29,0.5);
 --color-red-A60: rgba(216,28,29,0.6);
 --color-red-A70: rgba(216,28,29,0.7);
 --color-red-A80: rgba(216,28,29,0.8);
 --color-red-A90: rgba(216,28,29,0.9);
 --color-red: var(--color-red-500);
 --color-red-hover: var(--color-red-400);
 --color-red-active: var(--color-red-600);
 --color-yellow-050: #fef7e6;
 --color-yellow-100: #fdf0cd;
 --color-yellow-200: #fbe09c;
 --color-yellow-300: #f9d16a;
 --color-yellow-400: #f7c139;
 --color-yellow-500: #f5b207;
 --color-yellow-600: #c48e06;
 --color-yellow-700: #936b04;
 --color-yellow-800: #624703;
 --color-yellow-900: #312401;
 --color-yellow-A05: rgba(245,178,7,0.05);
 --color-yellow-A10: rgba(245,178,7,0.1);
 --color-yellow-A20: rgba(245,178,7,0.2);
 --color-yellow-A30: rgba(245,178,7,0.3);
 --color-yellow-A40: rgba(245,178,7,0.4);
 --color-yellow-A50: rgba(245,178,7,0.5);
 --color-yellow-A60: rgba(245,178,7,0.6);
 --color-yellow-A70: rgba(245,178,7,0.7);
 --color-yellow-A80: rgba(245,178,7,0.8);
 --color-yellow-A90: rgba(245,178,7,0.9);
 --color-yellow: var(--color-yellow-500);
 --color-yellow-hover: var(--color-yellow-400);
 --color-yellow-active: var(--color-yellow-600);
 --color-orange: #ff9713;
 --color-orange-A05: rgba(255,151,19,0.05);
 --color-orange-A20: rgba(255,151,19,0.2);
 --color-beta: #fa6400;
 --color-logic-boolean: #d76700;
 --color-logic-boolean-hover: #bd5b00;
 --color-logic-image: #d600c4;
 --color-logic-image-hover: #bd00ad;
 --color-logic-number: #00abd6;
 --color-logic-number-hover: #0097bd;
 --color-logic-string: #75d600;
 --color-logic-string-hover: #68bd00;
 --color-gradient-razzmatazz-carnation-start: #ef1684;
 --color-gradient-razzmatazz-carnation-end: #f9516f;
 --color-gradient-electric-indigo-start: #7800ff;
 --color-gradient-electric-indigo-end: #9c47fc;
 --color-gradient-blue-active: #005cd5;
 --color-gradient-blue-start: #367cff;
 --color-gradient-blue-end: #52baff;
 --color-gradient-blue-hover: #52deff;
 --color-gradient-pink-active: #c70076;
 --color-gradient-pink-start: #e90090;
 --color-gradient-pink-end: #fc6767;
 --color-gradient-pink-hover: #fc6767;
 --color-gradient-green-active: #329b00;
 --color-gradient-green-start: #3dc000;
 --color-gradient-green-end: #45d900;
 --color-gradient-green-hover: #4eff00;
 --color-gradient-blue-green-active: #306cfa;
 --color-gradient-blue-green-start: #2ebaf3;
 --color-gradient-blue-green-end: #21f1d6;
 --color-gradient-blue-green-hover: #00ff8d;
 --color-gradient-orange-active: #ff7623;
 --color-gradient-orange-start: #ff8a24;
 --color-gradient-orange-end: #ff9d24;
 --color-gradient-orange-hover: #ffb125;
 --color-gradient-purple-active: #751fff;
 --color-gradient-purple-start: #881fff;
 --color-gradient-purple-end: #d41dff;
 --color-gradient-purple-hover: #e81dff;
 --color-system-account: #294ec1;
 --color-system-alarms: #e3292f;
 --color-system-api-keys: #452fb2;
 --color-system-apps: #7538bc;
 --color-system-audio: #ff6e4d;
 --color-system-backups: #00aef5;
 --color-system-co-processor: #948682;
 --color-system-date-time: #da2724;
 --color-system-devices: #a244e1;
 --color-system-energy: #10c56e;
 --color-system-experiments: #8a988c;
 --color-system-family: #ff7f33;
 --color-system-feedback: #00c4d9;
 --color-system-flow: #3bcb18;
 --color-system-general: #7c8892;
 --color-system-homey-bridge: #8156ff;
 --color-system-homeyscript: #2c1e32;
 --color-system-insights: #3b5cc1;
 --color-system-language: #1aceaf;
 --color-system-led-ring: #f79128;
 --color-system-location: #7cd516;
 --color-system-logic: #2aa733;
 --color-system-moods: #5c5ad7;
 --color-system-premium: #f4317b;
 --color-system-presence: #ade127;
 --color-system-push-notifications: #235b7d;
 --color-system-reminders: #e01310;
 --color-system-review: #ef0048;
 --color-system-safety: #ef1965;
 --color-system-security: #8a988c;
 --color-system-settings: #948682;
 --color-system-speech: #2ca5b8;
 --color-system-support: #3c85c3;
 --color-system-timeline-notifications: #eac324;
 --color-system-updates: #bc1ab6;
 --color-system-zwave: #20365e;
 --color-system-zigbee: #e82249;
 --color-system-zone: #494949;
 --color-random-amber: #fa6400;
 --color-random-amethyst: #b620e0;
 --color-random-apatite: #32c5ff;
 --color-random-citrine: #f7b500;
 --color-random-emerald: #6dd400;
 --color-random-lolite: #6236ff;
 --color-random-ruby: #e02020;
 --color-random-sapphire: #0091ff;
 --color-social-facebook-messenger: #1877f2;
 --color-social-whatsapp: #34b344;
 --color-social-twitter: #1d9cea
}

:root .darkmode {
 --color-mono-000: #000;
 --color-mono-010: #09090c;
 --color-mono-025: #111218;
 --color-mono-050: #1f2029;
 --color-mono-100: #2b2c36;
 --color-mono-200: #3b3d4a;
 --color-mono-300: #4f515f;
 --color-mono-400: #666875;
 --color-mono-500: #80818e;
 --color-mono-600: #999aa3;
 --color-mono-700: #b2b3b8;
 --color-mono-800: #cacace;
 --color-mono-900: #e4e4e7;
 --color-mono-1000: #fff;
 --color-mono-A05: hsla(0,0%,100%,0.05);
 --color-mono-A10: hsla(0,0%,100%,0.1);
 --color-mono-A20: hsla(0,0%,100%,0.2);
 --color-mono-A50: hsla(0,0%,100%,0.5);
 --color-mono-A70: hsla(0,0%,100%,0.7)
}

:root {
 --color-text: var(--color-mono-900);
 --color-text-hover: var(--color-mono-1000);
 --color-text-disabled: var(--color-mono-100);
 --color-text-medium: var(--color-mono-700);
 --color-text-light: var(--color-mono-400);
 --color-text-light-hover: var(--color-mono-500);
 --color-text-light-active: var(--color-mono-600);
 --color-text-body-light: var(--color-mono-500);
 --color-text-body-light-hover: var(--color-mono-600);
 --color-text-body-light-active: var(--color-mono-700);
 --color-text-white: var(--color-white);
 --color-text-inverted: var(--color-mono-000);
 --color-text-green: var(--color-green-600);
 --color-text-orange: var(--color-orange);
 --color-text-heading: var(--color-mono-900);
 --color-text-paragraph: var(--color-mono-900);
 --color-link: var(--color-blue);
 --color-link-hover: var(--color-blue-hover);
 --color-link-active: var(--color-blue-active);
 --color-highlight: var(--color-blue);
 --color-highlight-hover: var(--color-blue-hover);
 --color-highlight-active: var(--color-blue-active);
 --color-line: var(--color-mono-100);
 --color-line-disabled: var(--color-mono-050);
 --color-line-hover: var(--color-mono-300);
 --color-line-active: var(--color-mono-400);
 --color-line-light: var(--color-mono-050);
 --color-line-medium: var(--color-mono-200);
 --color-line-medium-hover: var(--color-mono-300);
 --color-line-medium-active: var(--color-mono-400);
 --color-background-hover: var(--color-mono-025);
 --color-background-active: var(--color-mono-050);
 --color-body: var(--color-ice-white);
 --color-body-A00: var(--color-ice-white-A00);
 --color-body-light: var(--color-mono-010);
 --color-component: var(--color-mono-000);
 --color-icon-light: var(--color-mono-200);
 --color-icon-light-hover: var(--color-mono-300);
 --color-icon-light-active: var(--color-mono-400);
 --color-icon-light-body: var(--color-mono-300);
 --color-icon-light-body-hover: var(--color-mono-400);
 --color-icon-light-body-active: var(--color-mono-500);
 --color-icon-medium: var(--color-mono-500);
 --color-icon-dark: var(--color-mono-800);
 --color-icon-dark-hover: var(--color-mono-1000);
 --color-icon-disabled: var(--color-mono-100);
 --color-icon-white: var(--color-white);
 --color-icon-green: var(--color-green);
 --color-icon-red: var(--color-red);
 --color-icon-blue: var(--color-blue);
 --color-icon-orange: var(--color-orange)
}

:root .darkmode {
 --color-text: var(--color-mono-1000);
 --color-text-medium: var(--color-mono-600);
 --color-text-light: var(--color-mono-500);
 --color-text-light-hover: var(--color-mono-600);
 --color-text-light-active: var(--color-mono-700);
 --color-text-heading: var(--color-mono-1000);
 --color-text-paragraph: var(--color-mono-600);
 --color-line: var(--color-mono-200);
 --color-line-hover: var(--color-mono-300);
 --color-line-active: var(--color-mono-400);
 --color-line-light: var(--color-mono-100);
 --color-body: var(--color-night-black);
 --color-body-A00: var(--color-night-black-A00);
 --color-component: var(--color-mono-050);
 --color-background-hover: var(--color-mono-100);
 --color-icon-light: var(--color-mono-500);
 --color-icon-light-hover: var(--color-mono-700);
 --color-icon-medium: var(--color-mono-300);
 --color-icon-dark: var(--color-mono-800);
 --color-icon-dark-hover: var(--color-mono-1000)
}

:root {
 --box-shadow: 0 10px 44px 0 rgba(0,0,0,0.07),0 2px 12px 0 rgba(0,0,0,0.1),0 2px 4px 0 rgba(0,0,0,0.04);
 --box-shadow-light: 0 5px 22px 0 rgba(0,0,0,0.035),0 2px 6px 0 rgba(0,0,0,0.05),0 2px 2px 0 rgba(0,0,0,0.02);
 --box-shadow-float: 0 10px 10px 0 rgba(0,0,0,0.1),0 60px 60px 20px rgba(0,0,0,0.05),0 20px 20px 10px rgba(0,0,0,0.05);
 --box-shadow-highlight: 0 0 5px 0 var(--color-blue)
}

:root .darkmode {
 --box-shadow: 0 10px 44px 0 rgba(0,0,0,0.07),0 2px 12px 0 rgba(0,0,0,0.1),0 2px 4px 0 rgba(0,0,0,0.04),0 0px 0px 1px hsla(0,0%,100%,0.05);
 --box-shadow-float: 0 10px 10px 0 rgba(0,0,0,0.1),0 60px 60px 20px rgba(0,0,0,0.05),0 20px 20px 10px rgba(0,0,0,0.05),0 0px 0px 1px hsla(0,0%,100%,0.05)
}

:root {
 --font-roboto-capheight: 0.7;
 --font-roboto-xheight: 0.528;
 --font-size-medium: 18px;
 --font-size-default: 16px;
 --font-size-small: 14px;
 --font-size-micro: 12px;
 --font-size-hero-0: clamp(50px,calc(20px + 6vw),96px);
 --font-size-hero-1: clamp(40px,calc(20px + 5vw),80px);
 --font-size-hero-2: clamp(30px,calc(20px + 3vw),60px);
 --font-size-hero-3: clamp(20px,calc(11px + 2.5vw),36px);
 --font-size-hero-4: clamp(18px,calc(6px + 3vw),24px);
 --font-size-hero-5: clamp(18px,calc(6px + 2vw),20px);
 --font-size-heading-1: 36px;
 --font-size-heading-2: 28px;
 --font-size-heading-3: 18px;
 --font-size-body-large: clamp(20px,calc(16px + 0.6vw),24px);
 --font-size-body-medium: clamp(18px,calc(16px + 0.4vw),20px);
 --font-size-body-default: var(--font-size-default);
 --font-weight-thin: 100;
 --font-weight-light: 300;
 --font-weight-regular: 400;
 --font-weight-medium: 500;
 --font-weight-bold: 700;
 --font-weight-black: 900;
 --gradient-degree: 30deg;
 --gradient-razzmatazz-carnation: linear-gradient(var(--gradient-degree),var(--color-gradient-razzmatazz-carnation-start),var(--color-gradient-razzmatazz-carnation-end));
 --gradient-electric-indigo: linear-gradient(var(--gradient-degree),var(--color-gradient-electric-indigo-start),var(--color-gradient-electric-indigo-end));
 --gradient-blue: linear-gradient(var(--gradient-degree),var(--color-gradient-blue-start),var(--color-gradient-blue-end));
 --gradient-pink: linear-gradient(var(--gradient-degree),var(--color-gradient-pink-start),var(--color-gradient-pink-end));
 --gradient-blue-green: linear-gradient(var(--gradient-degree),var(--color-gradient-blue-green-active),var(--color-gradient-blue-green-end));
 --interactive-gradient-position-default: 33% top;
 --interactive-gradient-position-hover: 66% top;
 --interactive-gradient-position-active: 15% top;
 --interactive-gradient-size: 200% 100%;
 --interactive-gradient-blue: linear-gradient(var(--gradient-degree),var(--color-gradient-blue-active),var(--color-gradient-blue-start) 33%,var(--color-gradient-blue-end) 66%,var(--color-gradient-blue-hover));
 --interactive-gradient-pink: linear-gradient(var(--gradient-degree),var(--color-gradient-pink-active),var(--color-gradient-pink-start) 33%,var(--color-gradient-pink-end) 66%,var(--color-gradient-pink-hover));
 --interactive-gradient-green: linear-gradient(var(--gradient-degree),var(--color-gradient-green-active),var(--color-gradient-green-start) 33%,var(--color-gradient-green-end) 66%,var(--color-gradient-green-hover));
 --interactive-gradient-blue-green: linear-gradient(var(--gradient-degree),var(--color-gradient-blue-green-active),var(--color-gradient-blue-green-start) 33%,var(--color-gradient-blue-green-end) 66%,var(--color-gradient-blue-green-hover));
 --interactive-gradient-orange: linear-gradient(var(--gradient-degree),var(--color-gradient-orange-active),var(--color-gradient-orange-start) 33%,var(--color-gradient-orange-end) 66%,var(--color-gradient-orange-hover));
 --interactive-gradient-purple: linear-gradient(var(--gradient-degree),var(--color-gradient-purple-active),var(--color-gradient-purple-start) 33%,var(--color-gradient-purple-end) 66%,var(--color-gradient-purple-hover));
 --icon-size-small: 12px;
 --icon-size-regular: 16px;
 --icon-size-medium: 20px;
 --icon-size-large: 24px;
 --icon-size-xlarge: 32px;
 --icon-size-xxlarge: 48px;
 --sticky-top-below-header: 90px;
 --duration-fast: 200ms;
 --duration-normal: 350ms;
 --duration-slow: 500ms;
 --curve-fast-in: cubic-bezier(.25,0,.5,1);
 --transition-normal: all var(--duration-normal) ease-in-out;
 --transition-fast: all var(--duration-fast) var(--curve-fast-in)
}

.darkmode-fade-in,.darkmode-fade-out {
 --transition-darkmode: background-color 500ms ease-in-out,color 500ms ease-in-out,box-shadow 500ms ease-in-out,border-color 500ms ease-in-out,stroke 500ms ease-in-out
}


.main-nav {
 position: fixed;
 margin-bottom: 20px;
 top: 0;
 right: 0;
 left: 0;
 z-index: 400
}

.main-nav__back {
    margin-right: 20px; /* Afstand tussen de backknop en het logo */
}

.main-nav__back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 36px;
    height: 36px;
}

.main-nav__back-icon {
    margin-left: 35px;
    width: 18px;
    height: 18px;
}

.main-nav__back {
    margin-right: 10px; /* Afstand tussen de backknop en het logo */

}

.main-nav__back-text {
    margin-left: 5px; /* Afstand tussen de backknop en de tekst "Back" */
    color: #7a7a7f;
    font-size: 16px;
}

html.is-active-popup .main-nav {
 opacity: 0
}

.main-nav.sticky,html.is-active-popup:not([data-popup-scroll-y="0"]) .main-nav {
 top: 0;
 right: 0;
 left: 0
}

.main-nav__bar {
 position: relative;
 z-index: 10;
 display: grid;
 grid-template-areas: "bar-primary bar-home bar-secondary";
 grid-template-columns: 1fr auto 1fr;
 grid-gap: 16px;
 align-items: center;
 height: 60px;
 margin-right: -16px;
 margin-left: -16px;
 padding: 0 16px;
 border-radius: 0;
 background: #F5F5F7;
 box-shadow: var(--box-shadow)
}


.main-nav__bar-dark {
 position: relative;
 z-index: 10;
 display: grid;
 grid-template-areas: "bar-primary bar-home bar-secondary";
 grid-template-columns: 1fr auto 1fr;
 grid-gap: 16px;
 align-items: center;
 height: 60px;
 margin-right: -16px;
 margin-left: -16px;
 padding: 0 16px;
 border-radius: 0;
 background: #111218;
 box-shadow: var(--box-shadow)
}

@keyframes logo-spin {
 0% {
	 transform: rotate(0deg)
 }

 to {
	 transform: rotate(360deg)
 }
}

.main-nav__home {
 grid-area: bar-home;
 z-index: 102;
 display: flex;
 justify-content: flex-start;
 pointer-events: none
}

.main-nav__home-button {
 display: flex;
 align-items: center;
 pointer-events: auto
}

.main-nav__home-icon-wrapper {
 position: relative;
 width: 36px;
 height: 36px;
 transform-origin: center center;
 transition: transform var(--duration-fast) var(--curve-fast-in)
}

.main-nav__home-icon-wrapper-dark {
 position: relative;
 width: 36px;
 height: 36px;
 transform-origin: center center;
 transition: transform var(--duration-fast) var(--curve-fast-in); /* Puntkomma toegevoegd */
 background-color: #111218; /* Achtergrondkleur instellen voor dark mode */
}
.top-section {
 background-color: #1D1D1F; /* Achtergrondkleur instellen voor dark mode */
}

.main-nav__home-icon-wrapper.loading {
 animation: logo-spin 1s infinite
}

.main-nav__home-icon-wrapper:active {
 transform: scale(0.95)
}

.main-nav___home-icon {
 display: block;
 height: 100%
}

.main-nav__home-text {
 margin-left: 8px;
 font-size: 20px;
 font-weight: var(--font-weight-medium);
 color: var(--color-text);
 transition: color var(--duration-fast) var(--curve-fast-in)
}

.main-nav__home-text-dark {
 margin-left: 8px;
 font-size: 20px;
 font-weight: var(--font-weight-medium);
 color: #ffffff;
 transition: color var(--duration-fast) var(--curve-fast-in)
}

.main-nav__primary {
 grid-area: bar-primary
}

.main-nav__secondary {
 grid-area: bar-secondary;
 display: grid;
 grid-auto-flow: column;
 grid-gap: 8px;
 align-items: center;
 justify-content: end
}

.main-nav__search {
 position: absolute;
 z-index: 101;
 top: 60px;
 right: 0;
 left: 0;
 display: block;
 height: 50px;
 opacity: 0;
 visibility: hidden;
 pointer-events: none
}

html.is-active-mobile-menu .main-nav__search {
 opacity: 1;
 visibility: visible;
 pointer-events: auto
}

.main-nav__mobile-menu {
 position: absolute;
 z-index: 2;
 top: 60px;
 left: 0;
 display: none;
 width: 100vw;
 padding-top: 50px;
 background-color: var(--color-component)
}

html.is-active-mobile-menu .main-nav__mobile-menu {
 display: block
}

.main-nav__mobile-overlay {
 position: absolute;
 z-index: 1;
 top: 60px;
 right: 0;
 left: 0;
 height: 100vh;
 background: rgba(0,0,0,0.7);
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--duration-fast),visibility 0s var(--duration-fast);
 transition-delay: 0s;
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px)
}

.main-nav__mobile-overlay-dark {
 position: absolute;
 z-index: 1;
 top: 60px;
 right: 0;
 left: 0;
 height: 100vh;
 background: #000000;
 opacity: 0;
 visibility: hidden;
 transition: opacity var(--duration-fast),visibility 0s var(--duration-fast);
 transition-delay: 0s;
 -webkit-backdrop-filter: blur(10px);
 backdrop-filter: blur(10px)
}

html.is-active-mobile-menu .main-nav__mobile-overlay {
 opacity: 1;
 visibility: visible;
 transition: opacity var(--duration-fast)
}

.main-nav__toggle {
 position: relative;
 z-index: 102;
 display: block;
 box-sizing: initial;
 width: 36px;
 height: 36px;
 margin: -12px;
 padding: 12px
}

.main-nav__toggle:after,.main-nav__toggle:before {
 content: "";
 position: absolute;
 top: 50%;
 left: 50%;
 display: block;
 width: 24px;
 height: 2px;
 margin-top: -1px;
 margin-left: -12px;
 border-radius: 2px;
 background: var(--color-mono-1000);
 transition: transform var(--duration-fast) var(--curve-fast-in)
}

.main-nav__toggle:before {
 transform: translateY(-5px)
}

.main-nav__toggle:after {
 transform: translateY(5px)
}

html.is-active-mobile-menu .main-nav__toggle:before {
 transform: translateY(0) rotate(-45deg)
}

html.is-active-mobile-menu .main-nav__toggle:after {
 transform: translateY(0) rotate(45deg)
}

.main-nav__menu {
 display: flex;
 flex: 1 1 auto;
 flex-direction: row;
 align-items: center;
 align-self: stretch;
 order: 2
}

.main-nav__search-button,.website[data-hy-cart-count="0"] .main-nav__cart {
 display: none
}

.main-nav__country-button {
 position: relative;
 z-index: 3;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 36px;
 height: 36px;
 border-top-left-radius: 5px;
 border-top-right-radius: 5px
}

.main-nav__country-button:active img {
 transform: scale(0.95)
}

.main-nav__country-button img {
 transform-origin: center center;
 transition: transform var(--duration-fast) var(--curve-fast-in)
}

.main-nav__user-login,.website[data-hy-logged-in=true] .main-nav__user-login {
 display: none
}

html.is-active-mobile-menu .main-nav__user-login {
 display: block
}

.main-nav__call-to-action {
 margin-left: 8px;
 white-space: nowrap
}

.main-nav__user,.website[data-hy-logged-in=true] .main-nav__call-to-action,html.is-active-mobile-menu .main-nav__call-to-action {
 display: none
}

.website[data-hy-logged-in=true] .main-nav__user {
 display: block
}

html.is-active-mobile-menu .website[data-hy-logged-in=true] .main-nav__user {
 display: none
}


a {
outline: 0;
text-decoration: none;
color:#3478F6;
}

/* unvisited link */
a:link {
 text-decoration: none;
 color:#3478F6;
}

/* visited link */
a:visited {
 text-decoration: none;
 color:#3478F6;
}

/* mouse over link */
a:hover {
 text-decoration: none;
 color:#3478F6;
}

/* selected link */
a:active {
 text-decoration: none;
 color:#3478F6;
}         


#ventilator{cursor: pointer;}

#mydiv{display: none;}


.symbol {
 font-family: '.SF Symbols Fallback';
 font-weight: normal;
 font-style: normal;
}

.symbol-margin {
 margin-right: 4px;
}

.icon-symbol{
 font-family: '.SF Symbols Fallback';
 font-weight: normal;
 font-style: normal;
 //margin-left: 65px;
 margin-right: 14px;
 width: 25px;
 display: inline-block;
 //background-color: red;
 text-align: center;
 }


.sfmono {
 font-family: '.SFMono';
 font-weight: normal;
 font-style: normal;
}



.wrapper-row{
 margin:0 auto;
 //background-color: red;
 padding-top: 0px;
 width: 374px; 
 display:inline-block;	
 margin-left: 80px;
 margin-top: 30px;
 vertical-align: top;	
}




.store-wrapper{
background-color: none;
margin: 14px;
margin-top: 0px;
padding-top: 14px;
z-index: 9999;
}

.store-name{
 font-size: 13px;
 font-weight: 600;
 margin-bottom: 5px;
}

.day-title{
 font-size: 40px;
 font-weight: 300;
 margin-bottom: 5px;
 margin-top: -5px;
 color: #F9D872;
}

.day-title-center{
 font-size: 40px;
 font-weight: 300;
 margin-bottom: 5px;
 margin-top: -5px;
 //width: auto;
 width: 44px;
 background-color: grey;
 text-align: center;
}

.day-subtitle{
 font-size: 13px;
 font-weight: 600;
 margin-bottom: 5px;
 color: #E27330;
 position: relative;
 margin-top: -4px;
}


.date-text{
 position: absolute;
 font-weight: 600;
 font-size: 15px;
 left: 12;
 bottom: 13;
 display:block;
 background-color: none;
 //z-index: 0;
 //border: solid black 1px;
 color: #F9D872;
}

.widget-small{
 bottom: 28;
}


.textgradient{
   background: -webkit-linear-gradient(#E27330 20%, #F9D872 80%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
 font-size: 17px;
}

.date-subtext{
 //color: #E27330;
 color: #F9D872;
 font-weight: 500;
 font-size: 13px;
}

.blueback{
 background-color: #F5F5F7;
 background-position: right center;
 background-image: url(./img/apple-logo.png);
 background-size: 170px 170px;
 background-repeat:no-repeat;
}


.apple-logo{
 position: absolute;
 font-weight: 600;
 font-size: 22px;
 right: 14;
 top: 9;
 display:block;
 background-color: none;
 //z-index: 0;
 //border: solid black 1px;
}

.item-status{
 font-size: 12px;
 font-weight: normal;
 color: #8A8A8D;
}

.item-picture{
 position: absolute;
 right: 0;
 top: 0;
 display:block;
 height: 100%;
 max-height: 170px;
 width: auto;
 background-color: none;
 z-index: 1;
 //border: solid black 1px;
}


.item-picture-v2{
 position: absolute;
 right: 10;
 top: 10;
 display:block;
 height: 100%;
 max-height: 149px;
 width: auto;
 background-color: none;
 z-index: -1;
 //border: solid black 1px;
}


.icon-store{
 position: absolute;
 right: 12;
 bottom: 12;
 display:block;
 height: 29px;
 width: 29px;
 background-color: none;
 z-index: 0;
 //border: solid black 1px;
 background-image: url(./img/icon-store.png);
 background-size: 29px 29px;
 background-repeat: none;
}


.delivery-name{
 font-size: 11px;
 font-weight: 600;
 background-color: none;
}

.delivery-status{
 font-size: 11px;
 font-weight: normal;
 color: #8A8A8D;
}



.widget-wrapper2{
 position: relative;
 margin: auto;
 //background-color: red;
 padding-top: 0px;
 width: 360px; 
 height: 169px;
 border-radius: 22px;
 display:inline-block;	
 //margin-left: 80px;
 //margin-top: 30px;
 vertical-align: top;	
 background-color: none;
 border: solid lightgrey 1px;
 overflow: hidden;
}



   
   
.refresh{
 //margin-left: 65px;
 //margin-right: 14px;
 width: 25px;
 display: block;
 //background-color: red;
 text-align: center;
 position: relative;
 //bottom: 40px;
 text-align: center;
 width: 100%;
 margin-top: 300px;
 }   
 
 
 
.button {
font-family: system, -apple-system,'Helvetica Neue', Helvetica, sans-serif; 	
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 15px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 10px;
}

.button4 {
background-color: white;
color: #505050;
font-weight: 500;
border: 1px solid #e7e7e7;
box-shadow: 0px 5px 30px rgba(135, 135, 135, 0.2);
}

.button4:hover {
 //background-color: #e7e7e7;
 box-shadow: 0px 5px 20px rgba(135, 135, 135, 0);transform: scale(1.06);}	
 
 

 
 

.widget-wrapper{
 position: relative;
 margin: auto;
 //background-color: red;
 padding-top: 0px;
 width: 360px; 
 height: 169px;
 border-radius: 22px;
 display:inline-block;	
 //margin-left: 80px;
 //margin-top: 30px;
 vertical-align: top;	
 background-color: none;
 border: solid lightgrey 1px;
 overflow: hidden;
 box-shadow: 0px 5px 30px rgba(135, 135, 135, 0.2);
}


   .center-me {
	 display: flex;
	 justify-content: center;
	 align-items: center;

	 //height: 100%;
	 height: calc(100% - 110px);
   }
   
.refresh{
 //margin-left: 65px;
 margin-right: 14px;
 width: 25px;
 //display: inline-block;
 display: none;
 //background-color: red;
 text-align: center;
 position: fixed;
 bottom: 40px;
 text-align: center;
 width: 100%;
 }         

.nothidden{display: inline-block;}
.hidden{display: none;}

.nothidden1{display: inline-block;}
.hidden1{display: none;}



.scene {
//width: 200px;
//height: 200px;
//border: 1px solid #CCC;
display: inline-block;
 width: 364px; 
 height: 170;
//margin: 60px 60px 60px 0;
perspective: 600px;
}


 .scene-full {
 width: 100%; 
 //height: 169px;
}

 .scene-small {
 width: 360px; 
 //height: 169px;
}

.panel {
width: 100%;
height: 100%;
//background: hsla(0, 100%, 50%, 0.7);
//line-height: 200px;
//text-align: center;
}


.panel--rotate-x {
transform: rotateX(45deg);
}

.panel--rotate-y {
transform: rotateY(45deg);
}


.front{z-index: 100;}	

.spinner{
 -webkit-animation-name: spinner;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-duration: 20s;
 //-webkit-transform-style: preserve-3d;
 -webkit-transform: perspective(600);
 border: none;
 box-shadow: 0px 10px 40px rgba(135, 135, 135, 0.4);
}

@-webkit-keyframes spinner {
 0%   { -webkit-transform: rotateY(0deg) rotateX(12deg);}
 25%  { -webkit-transform: rotateY(12deg) rotateX(0deg);} 
 50%  { -webkit-transform: rotateY(0deg) rotateX(-12deg);} 
 75%  { -webkit-transform: rotateY(-12deg) rotateX(0deg);}     
 100% { -webkit-transform: rotateY(0deg) rotateX(12deg);}    
 
}





.daycount{color:black;}  
.daysubtitle{color:black; opacity: 0.5;}    
.titletop{color:black;}   
.titlebottom{color:black; opacity: 0.5;}   

 
.header-title{font-size: 22px; font-weight: bold; margin-bottom: 10px;}  
.mail-text{font-size: 17px; line-height: 24px; font-weight: normal;} 






.mail-wrapper{
  margin: 24px;
}


.logo-header {
  //display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  //align-items: center;
  //justify-content: center;
  height: 50px;
  background-color: white;
  box-shadow: 0 0.5px 0px 0 rgba(0,0,0,.2);
  z-index: 10;
  }

.logo-header-dark {
  //display: flex;
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  //align-items: center;
  //justify-content: center;
  height: 50px;
  background-color: #1D1D1F;
  box-shadow: 0 0.5px 0px 0 rgba(0,0,0,.2);
  z-index: 10;
  }

.logo-content {
  margin: 0 auto;
  max-width: 980px;
  padding: 0 22px;
  position: relative;
  display: block;
  //z-index: 2;
  //padding-left: calc(22px + constant(safe-area-inset-left));
  //padding-right: calc(22px + constant(safe-area-inset-right));
  background-color: red;
  }

.logo-content-dark {
  margin: 0 auto;
  max-width: 980px;
  padding: 0 22px;
  position: relative;
  display: block;
  color: white;
  //z-index: 2;
  //padding-left: calc(22px + constant(safe-area-inset-left));
  //padding-right: calc(22px + constant(safe-area-inset-right));
  background-color: #111218;
  }

.logo-title {
 font-size: 21px;
 line-height: 1.14286;
 font-weight: 600;
 letter-spacing: .011em;
 //font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
 cursor: default;
 display: block;
 float: left;
 margin: 14px 0 -14px;
 padding: 0;
 height: 52px;
 white-space: nowrap;
 } 




 .menu-button {
 background-color: #00D959;
 color: #1d1d1f;
 transition-property: background-color, color;
 transition-duration: 0.1s;
 }
 .menu-button {
 background: #1d1d1f;
 color: #fff;
 }
 .menu-button {
 cursor: pointer;
 display: inline-block;
 text-align: center;
 white-space: nowrap;
 //background-color: #00D959;
 background-color: black;
 color: white;
 font-size: 12px;
 line-height: 1.33337;
 font-weight: 400;
 letter-spacing: -.01em;
 //font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
 min-width: 23px;
 padding-left: 11px;
 padding-right: 11px;
 padding-top: 4px;
 padding-bottom: 4px;
 border-radius: 12px;
 float: right;
 margin-top: 14px;
 } 

.menu-button:hover {
	background-color: #00D959;
	color: black;
	cursor: pointer;
  }


.dropdown{
 position: relative;
 background-color: #fff;
 height: 65px;
 width: 100%;
 padding: 0 20px;
 border-radius: 4px;
 border: 1px solid #001489;
 cursor: pointer;
 background-image: linear-gradient(45deg,transparent 50%,rgba(0,0,0,.4) 0),linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 0);
 background-position: calc(100% - 25px) calc(1em + 14px),calc(100% - 20px) calc(1em + 14px),calc(100% - 2.5em) .5em;
 background-size: 5px 5px,5px 5px,1px 1.5em;
 background-repeat: no-repeat;
 box-shadow: 0 2px 10px rgba(0,0,0,.05);
 color: #001489;
 } 

.dropdown-text{background-image: none; cursor:inherit;} 

button, input, select, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  height: auto;
  width: auto;
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  background-color: transparent;
  outline: none;
  }

.label-text{  
font-size: 20px;
margin-bottom: 40px;
font-weight: 700;
color: #001489;

display: block;
//font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}



.send-button {
 position: relative;
 color: white;
 font-weight: 700;
 width: 100%;
 padding: 10px;
 box-shadow: 0 2px 10px rgba(0,0,0,.2);
 background-color: #ff8200;
 position: relative;
 //background-color: #fff;
 border-radius: 55px;
 height: 55px;
 display: flex;
 align-items: center;
 justify-content: center;
 cursor: pointer;
 }


.action-container {
	 margin: 0 auto;
	 margin-top: 40px;
	 padding: 0px 15px;
	 padding-top: 50px;
	 max-width: 500px;

 }  


.intro {
 position: relative;
 margin-bottom: 40px;
 background-color: #fff;
 padding: 30px;
 border-radius: 6px;
 box-shadow: 0 8px 12px 0 rgba(98,181,229,.2);
 text-align: center;
 color: #54585a;
 }




.wrapper-container {
 //height: 100%;
 height: calc(100% - 50px);
 //width: 100%;
	margin: 0px; 
	padding:0px; 
	//margin-top: 50px;
	//margin-top: 50px;
	//padding-bottom: -50px;
	display: flex; /* or inline-flex */
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	overflow: scroll;
	//background-color: red;
	position: relative;
	top: 50px;
  }



.boxwrap {
 max-width: 560px;
 box-sizing: border-box;
 position: relative;
 //margin-bottom: 40px;
 background-color: #fff;
 //padding: 50px;
 border-radius: 20px;
 //box-shadow: 0 8px 12px 0 rgba(98,181,229,.2);
 text-align: center;
 color: rgb(29, 29, 31);
 font-size: 64px;
 line-height: 1.0625;
 font-weight: 600;
 letter-spacing: -.009em;
 margin:15px;
 overflow: hidden;
 }
 

.textwrap {
 max-width: 560px;
 min-height: 600px;
 box-sizing: border-box;
 position: relative;
 //margin-bottom: 40px;
 //background-color: #fff;
 padding: 60px;
 //border-radius: 20px;
 //box-shadow: 0 8px 12px 0 rgba(98,181,229,.2);
 text-align: center;
 //color: rgb(29, 29, 31);
 font-size: 64px;
 line-height: 1.0625;
 font-weight: 600;
 letter-spacing: -.009em;
 //margin:20px;
 display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   word-break: normal;
}


.green{background-color: green;}




.logo-action {
 width: 140px;

}  


.button-link{
 font-size: 17px;
 line-height: 1.47059;
 font-weight: 400;
 letter-spacing: -.022em;
 //font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
 font-weight: 600;
 border: solid 2px #1d1d1f;
 border-radius: 999px;
 padding: .4em 1.15em;
 color: #1d1d1f;
 transition-property: background-color, color;
 transition-duration: 250ms;
 //align-self: center;
 box-sizing: content-box;
 width: auto;
 margin: 0 20 60 20;
 display: inline-block;
}


.button-link:hover {
   background-color: #1d1d1f;
   color: white;
   cursor: pointer;
 }

.button-link-light{
 border: solid 2px white;
 color: white;
}

.button-link-light:hover {
   background-color: white;
   color: #1d1d1f;
   cursor: pointer;
 }
 
 
 
.button-link-light-disabled{
 border: solid 2px rgba(255, 255, 255, 0.3);
 color: rgba(255, 255, 255, 0.3);
}

.button-link-light-disabled:hover {
   border: solid 2px rgba(255, 255, 255, 0.3);
 color: rgba(255, 255, 255, 0.3);
   cursor: not-allowed;
 }
 
 
 
 
.button-link-disable-disable{
 border: solid 2px black;
 //color: white;
 opacity: 0.1;
}

.button-link-disable:hover {
   background-color: white;
   color: #1d1d1f;
   cursor: not-allowed;
 }	

.dark{
 background-color: 1D1D1F;
 color: white;
}




.text-small {
 font-size: 21px;
 line-height: 1.19048;
 font-weight: 600;
 letter-spacing: .011em;
 margin-top: 40px;
 }



.homeyblock {
width: 660px;
height: auto;
box-sizing: border-box;
position: relative;
background-color: #fff;
color: rgb(255, 255, 255);
border-radius: 20px;
box-shadow: 0 8px 12px 0 rgba(226, 226, 226, 0.2);
text-align: center;
margin:15px;
overflow: hidden;
background-image: linear-gradient(236deg, #FC6767 0%, #EC008C 100%);
//padding: 20px;
font-family: Roboto, system, -apple-system,'Helvetica Neue', Helvetica, sans-serif; 
font-weight: 500;
}


.homeyblock-light {
background-color: #fff;
box-shadow: 0 8px 12px 0 rgba(226, 226, 226, 0.2);
background-image: none;
color: black;
}


.homey-33 {
width: 33%;
//height: 420px;
//box-sizing: border-box;
position: relative;
//background-color: green;
border-radius: 20px;
//box-shadow: 0 8px 12px 0 rgba(98,181,229,.2);
text-align: center;
//margin:15px;
padding-top: 40px;
padding-bottom: 40px;
overflow: hidden;
display: inline-block;
//background-image: linear-gradient(236deg, #FC6767 0%, #EC008C 100%);
}

.homey-100 {
width: 100%;
//height: 420px;
//box-sizing: border-box;
position: relative;
//background-color: green;
border-radius: 20px;
//box-shadow: 0 8px 12px 0 rgba(98,181,229,.2);
text-align: center;
//margin:15px;
padding-top: 40px;
padding-bottom: 40px;
overflow: hidden;
display: inline-block;
//background-image: linear-gradient(236deg, #FC6767 0%, #EC008C 100%);
}



.shadow {
-webkit-filter: drop-shadow( 0px 4px 7px rgba(0, 0, 0, .1));
filter: drop-shadow( 0px 4px 7px rgba(0, 0, 0, .1));
//box-shadow: 0 4px 7px 0 rgba(0,0,0,0.04);
/* Similar syntax to box-shadow */
}





.container {
 width: 100%;
 height: 343px;
 background: url('./img/device-icons.png') repeat-x;
 background-size: 200% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.container-wa {
 width: 100%;
 height: 343px;
 background: url('./img/wa-back.png') repeat-x;
 background-size: 200% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

.container-ios {
	width: 100%;
	height: 343px;
	background: url('./img/ios-back.png') repeat-x;
	background-size: 200% 343px;
	animation: scroll-anim 60s linear infinite;
	position: absolute;
	top: 0;
	z-index: 1;
   }


.container-zoek {
	width: 100%;
	height: 343px;
	background: url('./img/zoek-icons.png') repeat-x;
	background-size: 200% 343px;
	animation: scroll-anim 60s linear infinite;
	position: absolute;
	top: 0;
	z-index: 1;
   }
@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.container-donate {
 width: 100%;
 height: 343px;
 background: url('./img/donate-back.png') repeat-x;
 background-size: 200% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.container-devs {
 width: 100%;
 height: 343px;
 background: url('./img/devs-back.png') repeat-x;
 background-size: 200% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.container-devs2 {
 width: 100%;
 height: 343px;
 background: url('./img/devs2-back.png') repeat-x;
 background-size: 200% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.container-jarvis {
 width: 100%;
 height: 343px;
 background: url('./img/jarvis-back.png') repeat-x;
 background-size: 200% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.container-birthdays {
 width: 100%;
 height: 100%;
 background: url('./img/birthdays-back.png') repeat-x;
 background-size: 150% 343px;
 animation: scroll-anim 60s linear infinite;
 position: absolute;
 top: 0;
 z-index: 1;
}

@keyframes scroll-anim {
 100% {
	 background-position: 200% 0;
 }
}

.app-wrapper-bunq {
 //transform: scale(0.9);
 width: 400px;
 height: 536px;
 box-sizing: border-box;
 position: relative;
 background-color: #563ACC;
 color: rgb(255, 255, 255);
 border-radius: 20px;
 box-shadow: 0 8px 12px 0 rgba(226, 226, 226, 0.2);
 text-align: center;
 margin:15px;
 overflow: hidden;
 background-image: linear-gradient(236deg, #FC6767 0%, #EC008C 100%);
 //padding: 20px;
 font-family: -apple-system,'Helvetica Neue', Helvetica, sans-serif; 
 font-weight: 500;
 box-shadow: 0 10px 40px 0 rgba(0,0,0,0.20);
background-size: 100%;
background-position: top;
 }


.app-wrapper {
//transform: scale(0.9);
width: 400px;
height: 536px;
box-sizing: border-box;
position: relative;
background-color: #563ACC;
color: rgb(255, 255, 255);
border-radius: 20px;
box-shadow: 0 8px 12px 0 rgba(226, 226, 226, 0.2);
text-align: center;
margin:15px;
overflow: hidden;
//background-image: linear-gradient(236deg, #FC6767 0%, #EC008C 100%);
//padding: 20px;
font-family: -apple-system,'Helvetica Neue', Helvetica, sans-serif; 
font-weight: 500;
box-shadow: 0 10px 40px 0 rgba(0,0,0,0.20);
}


.app-content {
//background-color: green;
box-sizing: border-box;
position:absolute;
bottom:0px;
right:0px;
left:0px;
margin: 24px;
z-index: 3;
}

 /*.app-wrapper:first-child {
	 margin-top: 30px;
 }*/
 
.app-header {
opacity: 0.5;
font-size: 16px;
font-weight: 600;
color: #FFFFFF;
letter-spacing: 0;
text-align: left;
//background-color: blue;
}

.app-header-dark {
opacity: 0.5;
font-size: 16px;
font-weight: 600;
color: #1C1C1E;
letter-spacing: 0;
text-align: left;
//background-color: blue;
}

.app-title {
font-size: 22px;
font-weight: 550;
color: #FFFFFF;
letter-spacing: 0;
line-height: 27px;
text-align: left;
margin-top:2px;
//padding-bottom:2px;
//background-color: red;
}

.app-title-dark {
font-size: 22px;
font-weight: 550;
color: #1C1C1E;
letter-spacing: 0;
line-height: 27px;
text-align: left;
margin-top:2px;
//padding-bottom:2px;
//background-color: red;
}

.app-subtitle {
opacity: 0.7;
font-weight: 450;
font-size: 19px;
color: rgba(255, 255, 255, 1);
letter-spacing: 0;
line-height: 27px;
text-align: left;
margin-top:2px;
//mix-blend-mode:hue;
//background-color: blue;
}

.app-subtitle-dark {
opacity: 0.7;
font-weight: 450;
font-size: 19px;
color: #1C1C1E;
letter-spacing: 0;
line-height: 27px;
text-align: left;
margin-top:2px;
//mix-blend-mode:hue;
//background-color: blue;
}

.search-subtitle {
	opacity: 0.7;
	font-weight: 450;
	font-size: 19px;
	color: rgba(255, 255, 255, 1);
	letter-spacing: 0;
	line-height: 27px;
	text-align: left;
	margin-top:2px;
	//mix-blend-mode:hue;
	//background-color: blue;
	}
.search-title {
	font-size: 22px;
	font-weight: 550;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 27px;
	text-align: left;
	margin-top:2px;
	//padding-bottom:2px;
	//background-color: red;
	}
.app-button {
width: 150px;
height: 42px;
line-height: 42px;
font-weight: 700;
font-size: 19px;
color: #144182;
letter-spacing: 0;
text-align: center;
background-color: white;
//padding: 10px;
border-radius: 21px;
margin-top: 22px;
transition-property: background-color, color;
transition-duration: 250ms;
}

.app-button-dark {
width: 150px;
height: 42px;
line-height: 42px;
font-weight: 700;
font-size: 19px;
color: #1C1C1E;
letter-spacing: 0;
text-align: center;
background-color: #1C1C1E;
//padding: 10px;
border-radius: 21px;
margin-top: 22px;
transition-property: background-color, color;
transition-duration: 250ms;
}

.app-button-back-dark {
color: #fefefe;
}

.app-button-blue {
color: #0C1733;
}

.app-button-kmi {
color: #0055ef;
}

.app-button-anwb {
color: #ffcb00;
}
.app-button-radio {
color: #f72d55;
}
.app-button-days {
color: #045ddb
}

.app-button-devs {
 color: #42a0dd;
 }



 .app-button-at5 {
	color: #d10d27
	}
 .app-button-ds {
	color: #d1080e
	}
	.app-button-iculture {
		color: #1f2024;
		}
	.app-button-gld {
		color: #662583
		}
		.app-button-bright {
			color: #2fcbfe
			}	
 .app-button-112 {
	color: #000000;
	}

 .app-button-devs2 {
	 color: #030c34;
	 }

.app-button-p2000 {
color: #ce011c;
}

.app-button-abrp {
color: #65b8da;
}

.app-button-flow-utilities {
color: #ea951c;
}

.app-button-light-triggers {
color: #88ACA1;
}

.app-button-ios {
color: #0f3ad5;
}


.app-button-MyAudi {
color: #f22534;
}

.app-button-cupra {
color: #153b48;
}

.app-button-seat {
color: #74a7d2;
}

.app-button-skoda {
color: #509031;
}

.app-button-niu {
color: #df001f;
}

.app-button-powerview {
color: #b3bb3c;
}


.app-button-eufy-home {
color: #13dfd0;
}

.app-button-power-hour {
color: #df5020;
}

.app-button-eufy-sec {
	color: #2a6185;
	}

.app-button-works {
	color: #f2f2f9;
	}


.app-button-nld {
	color: #057ebb;
	}

.app-button-patreon {
color: #000000;
}

.app-button-mapmy {
color: #ffffff;
}

.app-button-yt {
color: #e62d28;
}

.app-button-ideal {
 color: #cc0266;
 }

.app-button-custom {
 color: #ff0000;
 }




 .app-button-pp {
	 color: #003085;
	 }

.app-button-jarvis {
 color: #0ccbe5;
 }

.app-button-birthdays {
 color: #000000;
 }

.app-button-lifeliner {
color: #ce011c;
}

.app-button-party {
color: #ef35aa;
}

.app-button-better-lights {
color: #1b0732;
}

.app-button-rtl {
color: #35a7d6;
}

.app-button-rss {
color: #f5f3f4;
}

.app-button-converter {
color: #f83134;
}

.app-button-nasa {
color: #0e3a97;
}

.app-button-amber {
color: #ed6d22;
}

.app-button-mail {
color: #1e9eff;
}

.app-button-up {
color: #6dd179;
}

.app-button-f1tv {
color: #15151f;
}
.app-button-forum {
 color: #1C1C1E;
 }

.app-button-homey {
 color: #fe00bf;
 }
 .app-button-homey-pro {
	 color: #000000;
	 }
	 .app-button-con {
		 color: #000000;
		 }
		 .app-button-wa {
			 color: #65d072;
			 }
.app-button:hover {
background-color: rgba(255, 255, 255, 0.3);
color: white;
cursor: pointer;
}

.app-button-dark:hover {
background-color: rgba(28, 28, 30, 0.3);
color: #1C1C1E;
cursor: pointer;
}
.app-button-disabled {
width: 150px;
height: 42px;
line-height: 42px;
font-weight: 700;
font-size: 19px;
color: rgba(255, 255, 255, 0.5);
letter-spacing: 0;
text-align: center;
background-color: rgba(255, 255, 255, 0.3);;
//padding: 10px;
border-radius: 21px;
margin-top: 22px;
transition-property: background-color, color;
transition-duration: 250ms;
cursor: not-allowed;
}

.app-button-disabled-dark {
	width: 150px;
	height: 42px;
	line-height: 42px;
	font-weight: 700;
	font-size: 19px;
	color: white;
	letter-spacing: 0;
	text-align: center;
	background-color: rgba(28, 28, 30, 0.3);
	//padding: 10px;
	border-radius: 21px;
	margin-top: 22px;
	transition-property: background-color, color;
	transition-duration: 250ms;
	cursor: not-allowed;
	}
	


.app-background {
width: 100%;
height: 343px;
//background-color: blue;
position: relative;
background-image: url( './img/mastodon-back.png');
background-repeat: no-repeat;
background-size: 100%;
background-position: top;
}

.app-overlay {
width: 100%;
height: 60px;
background-image: linear-gradient(180deg, rgba(86,58,204,0.00) 0%, #144182 100%);
position:absolute;
bottom:0px;
right:0px;
left:0px;
z-index: 2;
}

.app-overlay-dark {
width: 100%;
height: 60px;
background-image: linear-gradient(180deg, rgba(86,58,204,0.00) 0%, #1C1C1E 100%);
position:absolute;
bottom:0px;
right:0px;
left:0px;
z-index: 2;
}

.app-icon-wrap {
//background-color: red;
display: flex;
justify-content: center;
align-items: center;
height: 332px;
}


.app-icon {
width: 140px;
height: 140px;
border-radius: 50%;
background-color: #6364FF;
background-image: url( './img/mastodon-icon.svg');
background-repeat: no-repeat;
background-size: 60% auto;
background-position: center;
border: solid 4px white
}


/* Stijlen voor de pop-up */
.popup {
    display: none; /* Verberg de pop-up standaard */
    position: fixed;
	border-radius: 20px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #F5F5F7;
    padding: 20px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 9999;
    font-family: 'Arial', sans-serif;
	color: black;
    max-width: 400px;
    width: 100%;
}

/* Stijlen voor het invulformulier */
.popup form {
    display: flex;
    flex-direction: column;
}

.popup input,
.popup textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

.popup textarea {
    resize: vertical;
    min-height: 100px;
}

.popup button {
	width: 150px;
	height: 42px;
	line-height: 42px;
	font-weight: 700;
	font-size: 19px;
	color: #ffffff;
	letter-spacing: 0;
	text-align: center;
	background-color: #000000;
	//padding: 10px;
	border-radius: 21px;
	margin-top: 22px;
	transition-property: background-color, color;
	transition-duration: 250ms;
}

.popup button:hover {
	width: 150px;
	height: 42px;
	line-height: 42px;
	font-weight: 700;
	font-size: 19px;
	color: #1e9eff;
	letter-spacing: 0;
	text-align: center;
	background-color: 000000;
	//padding: 10px;
	border-radius: 21px;
	margin-top: 22px;
	transition-property: background-color, color;
	transition-duration: 250ms;
}

.popup h2 {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

select {
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	font-size: 16px;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 15px;
}

select option[disabled]:first-child {
    color: #999;
}

/* Stijl voor het sluitkruisje */
.close-button {
    font-size: 24px; /* Basisgrootte van het kruisje */
    color: #1e9eff; /* Homey-blauwe kleur */
    cursor: pointer; /* Verander de cursor in een handje wanneer erover wordt gehoverd */
    transition: font-size 0.3s ease; /* Vloeiende overgang van grootte bij hover */
}

.close-button:hover {
    font-size: 34px; /* Grootte van het kruisje bij hover */
}



/* Stijlen voor het bestandsinvoerelement */
.file-input {
    margin-bottom: 15px;
}

.file-input input[type="file"] {
    display: none; /* Verberg het werkelijke bestandsinvoerelement */
}

.file-input label {
    display: inline-block;
    padding: 10px 15px;
    background-color: #1e9eff; /* Homey-blauwe kleur */
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease; /* Vloeiende overgang van kleur bij hover */
}

.file-input label:hover {
    background-color: #00796b; /* Verander kleur bij hover */
}

    .image-container {
        text-align: center; /* Zet de afbeelding in het midden */
        margin-top: 20px; /* Plaats de afbeelding bovenaan de popup */
    }

    .image-container img {
        width: 300px; /* Pas de breedte van de afbeelding aan */
        height: auto; /* Behoud de verhoudingen van de afbeelding */
    }

@media (max-width: 1000px) {
 //.logo-header{height: 45px;}
 
 .action-container {
	 //margin-top: 40px;
	 padding-top: 20px;

 }  
 
 .logo-action {
	 width: 110px;
 
 }  
 



.textwrap {
 font-size: 40px;
 line-height: 1.0625;
 min-height: 350px;
}	
 
 .text-small {
	 font-size: 19px;
	 line-height: 1.19048;
	 font-weight: 600;
	 letter-spacing: .011em;
	 margin-top: 20px;
	 }
	 

.wrapper-container{
 //margin: 10px; 
 //padding-top: 50px;
}		
 
 footer {
    background-color: #F5F5F7;
    margin-top: 80px;
}



footer .footer-title {
 margin-left: 8px;
 font-size: 20px;
 font-weight: var(--font-weight-medium);
 color: var(--color-text);
 transition: color var(--duration-fast) var(--curve-fast-in)
}

 footer .footer-dark {
    background-color: #111218;
}

footer .footer-title-dark {
 margin-left: 8px;
 font-size: 20px;
 font-weight: var(--font-weight-medium);
 color: #ffffff;
 transition: color var(--duration-fast) var(--curve-fast-in)
}



.boxwrap {
 margin:30px;
 }	
 
.boxlast {
 margin-top: 0px;
}		

	 .rotating-image {
		 position: absolute; /* Zorg ervoor dat de afbeelding absoluut gepositioneerd is binnen de logo-content */
		 top: 0;
		 left: 0;
		 width: 100%;
		 height: 100%;
		 animation: rotate 4s linear infinite;
	 }
 
	 @keyframes rotate {
		 from {
			 transform: rotate(0deg);
		 }
		 to {
			 transform: rotate(360deg);
		 }
	 }

	 .text-preset-hero-0, .text-preset-hero-1 {
		margin-bottom: 0.6em;
		font-weight: var(--font-weight-bold);
		line-height: 1.1;
		letter-spacing:-1.5px
	}
	
	.text-preset-hero-1 {
		margin-top: 0.6em;
		font-size:var(--font-size-hero-1)
	}

	.text-preset-hero-1 {
        line-height:1.05
    }

	[class * =gradient-text], [class^=gradient-text] {
		padding: 0.05em 0;
		background: linear-gradient(30deg, var(--start), var(--end));
		-webkit-background-clip: text;
		-webkit-text-fill-color:transparent
	}
	
	[class * =gradient-text] span:not([class]), [class^=gradient-text] span:not([class]) {
		background: var(--color-text);
		-webkit-background-clip: text;
		-webkit-text-fill-color:transparent
	}
	
	.gradient-text-blue {
		--start: #367cff;
		--end:#52deff
	}
	
	.gradient-text-pink {
		--start: #f01585;
		--end:#f85a74
	}
	
	.gradient-text-blue-green {
		--start: #0bbdfc;
		--end:#07e28d
	}
	
	.gradient-text-green {
		--start: #3fc700;
		--end:#a6ec4a
	}
	
	.gradient-text-mountain-meadow {
		--start: #0fa781;
		--end:#10d266
	}
	
	.gradient-text-electric-purple {
		--start: #c300ff;
		--end:#ff00b8
	}
	
	.gradient-text-purple {
		--start: #6236ff;
		--end:#b488ff
	}
	
	.gradient-text-purple-pink {
		--start: #6236ff;
		--end:#b038ff
	}
	
	.gradient-text-electric-indigo {
		--start: #7800ff;
		--end:#9c47fc
	}
	
	.gradient-text-salmon {
		--start: #fd518c;
		--end:#ff7b7b
	}
	
	.gradient-text-razzmatazz-carnation {
		--start: var(--color-gradient-razzmatazz-carnation-start);
		--end:var(--color-gradient-razzmatazz-carnation-end)
	}
	
	.gradient-text-orange {
		--start: #ff4200;
		--end:#ffa200
	}
	
	.gradient-text-yellow {
		--start: #fd9a1f;
		--end:#ffce01
	}

	
	
/* CSS that should be displayed if width is equal to or less than 800px goes here */
}



/*


@media screen and (width: 364px) {
.scene {height: 170px;}
}    

@media screen and (width: 360px) {
.scene {height: 169px;}
}  

@media screen and (width: 348px) {
.scene {height: 159px;}
} 

@media screen and (width: 338px) {
.scene {height: 158px;}
} 

@media screen and (width: 329px) {
.scene {height: 155px;}
} 

@media screen and (width: 321px) {
.scene {height: 148px;}
} 

@media screen and (width: 292px) {
.scene {height: 141px;}
} 


*/