:root {
	/* fonts */
	--font-regular: 'Avenir Next', Helvetica, sans-serif;
	--font-medium: 'Avenir Next Medium', Helvetica, sans-serif;
	--font-demi: 'Avenir Next Demi', Helvetica, sans-serif;
	--font-bold: 'Avenir Next Bold',Helvetica,sans-serif;
	--fontsize-small: 14px;
	--fontsize-body: 16px;
	--fontsize-text: 20px;
	--fontsize-big: 24px;
	--fontsize-bigger: 26px;
	--fontsize-large: 33px;

	/* colors */
	--color-darkblue: #004B54; /* #012776 */
	--color-darkgreen: #004B54;
	--color-green: #72C3B8;
	--color-lightgreen: #F5F9ED;
	--color-lightengreen: #F6F9ED;
	--color-grey: #575651;
	--color-darkgrey: #ABA9A9;
	--color-black: #000;
	--color-white: #fff;
	--color-text: #000;
	--color-transparent: rgba(255,255,255,0);
	--color-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0) 0.39%, rgba(255, 255, 255, 0.86) 7.15%, rgba(255, 255, 255, 0.92) 92.19%, rgba(255, 255, 255, 0) 100%);
	


	/* max-widths */
	--maxwidth-body: 1920px;
	--maxwidth-site: 1280px;
	--maxwidth-intro: 1100px;
	--maxwidth-content: 850px;

	/* mixed */
	--border-radius: 0px;
	--margin-xl: 80px;
	--margin-big: 40px;
	--margin-medium: 25px;
	--margin-small: 15px;
	--aspect-ratio-header: 50%;
	--aspect-ratio-teaser: 66.67%;
	--aspect-ratio-16-9: 56.25%;

	/*
	Aspect Ratios
	1:1 = 100%
	2:1 = 50%;
	3:2 = 66.66%
	4:3 = 75%
	16:9 = 56.25%
	16:10 = 62,5%
	*/

	/* apps */
	--plyr-color-main: #72C3B8;
	--animate-delay: 0.5s;
}


@media (max-width: 768px) {
	:root {
		/* fontsizes */
		--fontsize-mobile: 17px;
		--fontsize-big: 19px;
		--fontsize-bigger: 21px;
		--fontsize-large: 28px;
	}
}