:root
{		
    --text-color:					hsla(200, 100%, 20%, 1);

    --button-color:					hsla(202, 100%, 50%, 1);
    --button-color-hover:			hsla(202, 100%, 60%, 1);
    --button-color-active:			hsla(202, 100%, 40%, 1);
    
    --pointmap-color:  				hsla(200, 100%, 40%, 1);
    --pointmap-color-a08:  			hsla(200, 100%, 40%, 0.8);
    --pointmap-color-a06:  			hsla(200, 100%, 40%, 0.6);
    --pointmap-color-a04:  			hsla(200, 100%, 40%, 0.4);
    --pointmap-color-a02:  			hsla(200, 100%, 40%, 0.2);

    --pointmap-color-darker:  		hsla(200, 100%, 30%, 1);
    --pointmap-color-darker-a09:  	hsla(200, 100%, 30%, 0.9);
    --pointmap-color-darker-a08:  	hsla(200, 100%, 30%, 0.8);
    --pointmap-color-darker-a06:  	hsla(200, 100%, 30%, 0.6);
    --pointmap-color-darker-a04:  	hsla(200, 100%, 30%, 0.4);
    --pointmap-color-darker-a02:  	hsla(200, 100%, 30%, 0.2);

    --pointmap-color-lighter:  		hsla(200, 100%, 50%, 1);
    --pointmap-color-lighter-a08:  	hsla(200, 100%, 50%, 0.8);
    --pointmap-color-lighter-a06:  	hsla(200, 100%, 50%, 0.6);
    --pointmap-color-lighter-a04:  	hsla(200, 100%, 50%, 0.4);
    --pointmap-color-lighter-a02:  	hsla(200, 100%, 50%, 0.2);

    --tile-color-1:  				hsla(200, 100%, 95%, 1);
    --tile-color-2:  				hsla(200, 100%, 90%, 1);
    --tile-color-3:  				hsla(200, 100%, 85%, 1);


	--map-filter-brightness: 			80%;
	--map-adressbox-background-color: 	#888;
    --impressum-background-color: 		#777;
    --dse-background-color: 			#666; 

	--icon-play:	url('data:image/svg+xml;utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="white" d="M73 39c-14.8-9.1-33.4-9.4-48.5-.9S0 62.6 0 80V432c0 17.4 9.4 33.4 24.5 41.9s33.7 8.1 48.5-.9L361 297c14.3-8.7 23-24.2 23-41s-8.7-32.2-23-41L73 39z"/></svg>');
}

body
{
    margin: 		0;
    padding: 		0;
    height: 		100%;
    width: 			100%;
    font-size: 		calc(12px + 0.5vw);
    font-family: 	"sourcesanspro-light";
    color:			var(text-color);
    overflow: 		hidden;  /* will be set to overflow-y:scroll after splashscreen */
    -moz-osx-font-smoothing: grayscale;
}
@media (max-width: 640px)
{
    body
    {
        font-size: calc(12px);
    }
}
@media (min-width: 1000px)
{
    body
    {
        font-size: 20px;
    }
}

*
{
    color:			var(--text-color);
	box-sizing: 	border-box;
	user-select: 	none;
	cursor:			default;
}

p
{
    margin:		5px;
}

a
{
    cursor: 			pointer;
    font-family:		"sourcesanspro-regular";
    text-decoration:	none;
}
a:hover
{
    text-decoration: 	underline;
}


/* ====== splashscreen ======= */
.splashscreen
{
    position: 	fixed;
    left: 		0px;
    top: 		0px;
    height: 	100%;
    width: 		100%;
    display: 	flex;
    align-items: center;
    justify-content: center;
	background: linear-gradient(var(--pointmap-color), #FFF);
    transition: opacity 1s ease-in-out;
    z-index:	10000;
}
.splashscreen.fadeout
{
    opacity: 0;
}

.splashscreen img
{
    width: 		40vw;
    max-width:	500px;
    opacity: 	0;
    transition: all .5s ease-in-out;
}
.splashscreen img.fadein
{
    opacity: 1;
}
.splashscreen img.fadeout
{
    opacity: 0;
}
@media (max-width: 480px)
{
    .splashscreen img
    {
        width: 80vw;
    }
}

/* ====== overlay ======= */

.overlay
{
	display:		flex;
    position: 		fixed;
    left: 			0px;
    top: 			0px;
    height: 		100%;
    width: 			100%;
    z-index:		-1;
    opacity:		0;
	background: 	var(--pointmap-color-darker-a09);
    align-items: 	center;
    justify-content:center;
    transition: 	0.5s;
}
.overlay.visible
{
    z-index:	10000;
    opacity: 	1;
}

.overlay video
{
	width:	80%;
}

/* ====== logo ======= */
.logo
{
    position: 		fixed;
    left: 			20px;
    top: 			10px;
    height: 		60px;
    z-index: 		1000;
}
@media (max-width: 800px)
{
    .logo
    {
        left: 	10px;
        top: 	10px;
    }
}
@media (max-width: 480px)
{
    .logo
    {
        left: 		10px;
        top: 		10px;
        max-width:	50vw;
    }
}



/* ====== hero video ======== */

.herovideo
{
    position: 	relative;
    width: 		100vw;
	height:		calc(50vh - 10px);
    overflow: 	hidden;
	background:	rgba(0,162,255,1);
}
.herovideo .gradient
{
    position: 	absolute;
    width: 		100vw;
    height: 	25vh;
    bottom: 	0px;
    background:	linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
}
.herovideo video
{
    width: 		100vw;
	height:		50vh;
	object-fit: cover;
    z-index: 	-1;
	opacity:	0.7;
}
.herovideo video:before
{
	background:	red;
}
.herovideo video:after
{
	background:	green;
}


/* ===== intro text animation ===== */

.intro-message
{
    position: 		absolute;
    top: 			65vh;
    left: 			0px;
    width:			100vw;
    height:			160px;
    overflow: 		hidden;
}


.intro-message .separator
{
    position: 	absolute;
	height:		160px;
	width:		5px;
	left:		-20px;
	background:	var(--pointmap-color-darker);
    transition: 1s;
}

.intro-message .text.left
{
    position: 		absolute;
    right:			calc(50vw + 20px);
    width: 			0px;
    height:			100%;
    text-align: 	right;
	overflow: 		hidden;
    transition: 	1s;
	display:		flex;
	flex-direction: column;
    justify-content:center;
}
.intro-message .text.left h1
{
    font-size: 		290%;
    font-family: 	"nasalization";
    color: 			var(--pointmap-color-darker);
    white-space: 	nowrap;
	margin:			5px;
}
.intro-message .text.left h2
{
    font-size: 		160%;
	font-family: 	"sourcesanspro-thin";
    color: 			var(--pointmap-color);
    white-space: 	nowrap;
	margin:			5px;
}

.intro-message .text.right
{
    position: 		absolute;
    left:			calc(50vw + 30px);
    width: 			0px;
    height:			100%;
	overflow: 		hidden;
    transition: 	1s;
	display:		flex;
	flex-direction: column;
    justify-content:center;
}
.intro-message .text.right h1
{
    font-size: 		190%;
    font-family:	"sourcesanspro-regular";
    color: 			var(--pointmap-color-darker);
    white-space: 	nowrap;
	margin:			0px;
}
.intro-message .text.right h2
{
    font-size: 		160%;
	font-family: 	"sourcesanspro-thin";
    color: 			var(--pointmap-color);
    white-space: 	nowrap;
	margin:			0px;
}

.intro-message .text.right button
{
	font-size:	100%;
	margin-top: 10px;
	width:		160px;
}

.intro-message .separator.show
{
    left: 		50vw;
}
.intro-message .text.left.show
{
    width: 		400px;
}
.intro-message .text.right.show
{
    width: 		500px;
}


/* =========== spaces =========== */

.space
{
    position: relative;
    width: 100vw;
}

/* === cover space  */
.space.cover
{
    height: 100vh;
}

/* === main space  */
.space.main
{
}

/* ===== footer space */
.space.footer
{
    height: 	fit-content;
    margin-top:	20vh;
}


/* === contact space with map */
.space.contact
{
    font-size: 			120%;
    width: 				100vw;
    height: 			60vh;
    min-height: 		400px;
    clip-path: 			polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
    -webkit-clip-path:	polygon(0% 10%, 100% 0%, 100% 100%, 0% 100%);
}
.space.contact #map
{
    position: absolute;
    right: 0px;
    width: 75vw;
    max-width: calc(100vw - 180px);
    min-width: calc(100vw - 350px);
    height: 100%;
}
.space.contact #map .leaflet-tile-pane
{
  -webkit-filter: grayscale(100%) brightness(var(--map-filter-brightness));
  filter: grayscale(100%) brightness(var(--map-filter-brightness));
}
.space.contact #map-adressbox
{
    position: absolute;
    height: 100%;
    width: 25vw;
    min-width: 180px;
    max-width: 350px;
    bottom: 0px;
    float: left;
    text-align: right;
    padding: 10vh 2vw 0vh 0vw;
    z-index: 1000;
    overflow: hidden;
	background-color: var(--map-adressbox-background-color);
}
.space.contact #map-adressbox img
{
    width: 70%;
    max-width: 200px;
}
.space.contact #map-adressbox *
{
	color: #FFF;
    font-size: 80%;
    line-height: 100%;
}
.space.contact #map-adressbox a
{
    font-family: "sourcesanspro-regular";
    display: block;
    line-height: 140%;
}


/* === impressum space */
.space.impressum
{
    padding: 0 5vw 0 7vw;
    width: 100vw;
	max-height: 0px;
	overflow: hidden;
	transition-duration: 0.5s;
	background-color: var(--impressum-background-color);
	margin-top: -2px;
}
.space.impressum *
{
    color: #FFF;
    font-size: 90%;
}

.space.impressum p
{
    margin-left: 0px;
    margin-right: 0px;
}

.space.impressum h1
{
    font-family: "sourcesanspro-regular";
    font-size: 120%;
    margin-bottom: 10px;
    margin-left: -2vw;
}
.space.impressum h2
{
    font-family: "sourcesanspro-regular";
}

.space.impressum.open
{
    padding: 1vh 5vw 1vh 7vw;
    max-height: 700px;
}

/* === dse space */
.space.dse
{
    padding: 0 5vw 0 7vw;
    width: 100vw;
	max-height: 0px;
	overflow: hidden;
	transition-duration: 0.5s;
	background-color: var(--dse-background-color);
}
.space.dse p
{
    color: #FFF;
    font-size: 90%;
}
.space.dse h1
{
    color: #FFF;
    font-size: 120%;
    font-family: "sourcesanspro-regular";
    margin-bottom: 10px;
    margin-left: -2vw;
}
.space.dse h2
{
    color: #FFF;
    font-size: 100%;
    font-family: "sourcesanspro-regular";
}
.space.dse h3
{
    color: #FFF;
    font-size: 90%;
    font-family: "sourcesanspro-regular";
    text-align: left;
}

.space.dse h2:first-child
{
    margin-left: -2vw;
}
.space.dse ul h2:first-child
{
    margin-left: unset;
}

.space.dse.open
{
    padding: 1vh 5vw 1vh 7vw;
    max-height: 2000px;
}




/* ========== blocks =========== */

.block
{
    position: 		relative;
    height: 		auto;
    width: 			90vw;
	margin-left:	5vw;
    margin-bottom: 	5vh;
}

.block p
{
    margin-bottom: 	10px;
}
.block .label
{
    padding: 2vh 2vw 10vh 2vw;
    margin: 0 1vw 1vh 5px;
    float: left;
    width: fit-content;
    height: fit-content;
    background-color: var(--label-background-color);
    color: var(--label-text-color);
    font-size: 140%;
    font-family: mosk-regular;
}
.block .label.right
{
    margin: 0 5px 1vh 1vw;
    float: right;
}

/* == blocks headlines == */

.block.headline
{
    position: 		relative;
    width: 			100vw;
    margin:			10vh 0 0 0;
    text-align: 	center;
    color: 			var(--pointmap-color-darker);
    font-size: 		400%;
    font-family: 	nasalization;
    background-color: 	transparent;
    clear: 			both;		
}

.block.subheadline
{
    position: 		relative;
    width: 			100vw;
    margin:			0 0 5vh 0;
    text-align: 	center;
    font-size: 		160%;
    color: 			var(--pointmap-color);
    background-color: 	transparent;		
}

/* == features block == */


/* == usecases block == */


/* == prices block == */
.block.prices img
{
	position:	relative;
	left:		calc(50% - 27vw);
	width:		54vw;
	margin: 	10px 0px 10px 0px;
}

/* == dataprotection block == */



/* ========== boxes =========== */

.box
{
	position: 		relative;
	width:			60vw;
	border-radius:	20px;
	padding:		2vh 4vw 2vh 4vw;
	margin-bottom: 	calc(2vh + 7vw);
	background:		var(--pointmap-color-lighter-a02);
	min-height:		600px;
}
.box.left
{
	left:			0px;
}
.box.right
{
	right:			-30vw;
}

.box-headline
{
	font-family: 	"sourcesanspro-regular";
	font-size:		200%;
	margin:			2vh 0px 4vh 0px;
}
.box.right .box-headline
{
	text-align: right;
}

.box-image img
{
	width: 			100%;
	max-width:		800px;
	border-radius:	10px;
    box-shadow: 	5px 5px 20px rgba(0,0,0,0.4);
}
.box.left .box-image
{
	width:		45vw;
	float:		right;
	margin:		10px -25vw 10px 30px;
}
.box.right .box-image
{
	width:		45vw;
	float:		left;
	margin:		10px 30px 10px -25vw;
}

.box-text
{
	text-align: 		justify;
    hyphens: 			auto;
	-webkit-hyphens:	auto;
}


@media (max-width: 640px)
{
	.box
	{
		left:		0px !important;
		width:		100% !important;
		min-height:	0px !important;
	}
	.box-image
	{
		width:		calc(100% - 40px) !important;
		float:		none !important;
		margin:		20px !important;
	}
}


/* ========== panel =========== */

.panel
{
	position: 		relative;
	width:			25vw;
	max-width:		300px
	height:			70vh;
	border-radius:	20px;
	padding:		4vh 2vw 1vh 2vw;
	margin: 		0px 0.5vw 0px 0.5vw;
	text-align: 	center;
	background:		var(--pointmap-color-lighter-a02);
    overflow-y:		scroll;
}

.panel img
{
	width:		15vw;
	max-width:	130px;
}

.panel h1
{
	font-size:	160%;
	margin:		10px 0px 10px 0px;
}

.panel text
{
	width:				100%;
	text-align: 		justify;
	word-wrap: 			break-word;
    hyphens: 			auto;
	-webkit-hyphens:	auto;
}

.panel-row
{
	display: 			flex;
    justify-content: 	center;
    margin:				2vw;
}


/* ========== tags =========== */

.tag
{
	position: 			absolute;
	height:				200px;
	width:				200px;
	color:				white;
	text-align: 		center;
    font-size: 			30px;
    line-height:		90%;
	border-radius: 		50%;
	display:			flex;
    align-items: 		center;
	justify-content:	center;
	box-shadow: 		5px 5px 10px rgba(0,0,0,0.2);
    backdrop-filter:			blur(3px);
    -webkit-backdrop-filter:	blur(3px);
}
.tag:hover
{
	margin:						-2px 0px 0px -2px;
	box-shadow: 				10px 10px 10px rgba(0,0,0,0.2);
    backdrop-filter:			blur(5px);
    -webkit-backdrop-filter:	blur(5px);
}
.tag:active
{
	margin:						0px;
	box-shadow: 				5px 5px 10px rgba(0,0,0,0.2);
    backdrop-filter:			blur(3px);
    -webkit-backdrop-filter:	blur(3px);
}

.tag#seeitinaction
{
	top:				calc(40vh - 100px);
	left:				calc(100vw - 15vw - 100px);
	padding-bottom: 	70px;
	background:			hsla(202, 100%, 50%, 0.7);
    background-image:		var(--icon-play);
	background-size: 		50px;
	background-position: 	80px 100px;
    background-repeat:		no-repeat;
	xanimation: 			pulse 16s infinite;
}

.tag#callforaction
{
	top:			calc(40vh - 100px);
	left:			calc(15vw - 100px);
	background:		hsla(42, 100%, 50%, 0.8);
}

@keyframes pulse {
	0% {
		box-shadow: 0 0 0 0px hsla(202, 100%, 50%, 1);
	}

	80% {
		box-shadow: 0 0 0 0px hsla(202, 100%, 50%, 1);
	}

	90% {
		box-shadow: 0 0 0 120px hsla(202, 100%, 50%, 0);
	}

	100% {
		box-shadow: 0 0 0 0px hsla(202, 100%, 50%, 0);
	}
}


/* ============================================ */
/* ============== GUI Elements ================ */
/* ============================================ */


/* ====== buttons ======= */

button
{
	display: 			inline-block;
    position: 			relative;
    padding: 			2px 20px 2px 20px;
    font-size:			120%;
    white-space: 		nowrap;
    border-radius:		12px;
    border:				0px;
    color:				white;
	background-color:	var(--button-color);
}
button:hover
{
	background-color:	var(--button-color-hover);
}
button:active
{
	background-color:	var(--button-color-active);
}

button.close
{
	position: 		absolute;
	right:			10px;
	top:			10px;
	width:			40px;
	height:			40px;
	border-radius: 	50%;
	background:		rgba(255,255,255,0.2);
	padding: 		0px;
}
button.close::before
{
	content: 	 "X";
	font-family: "sourcesanspro-bold";
}
button.close:hover
{
	background:		rgba(255,255,255,0.4);
}
button.close:active
{
	background:		rgba(255,255,255,0.6);
}


/* ====== menu ======= */

.menu
{
    display: 			flex; 
    flex-direction: 	row;
    position: 			fixed;
    right: 				20px;
    top: 				10px;
    padding: 			2px 20px 2px 20px;
    font-size: 			90%;
    z-index: 			1000;
    border-radius:		8px;
    background-color: 	var(--pointmap-color-a04);
    backdrop-filter:	blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
.menu *
{
    color: rgba(255,255,255,1);
    font-family: sourcesanspro-regular;
}
.menu .item
{
    position: relative;
    display: inline-block;
    width: fit-content;
    margin: 0px 10px 0px 10px;
    float: right;
    cursor: pointer;
}
.menu .item:hover
{
    text-decoration: underline;
}
.menu .item.selected
{
    border-bottom: 2px solid white;
}
.menu .item.selected:hover
{
     text-decoration: none;
}
.menu-button
{
    position: 	fixed;
    top: 		0px;
    right: 		0px;
    display: 	none;
    height: 	40px;
    width: 		40px;
    z-index: 	1001;
    color: 		white;
    cursor: 	pointer;
    border-radius:		8px;
    background-color: 	var(--pointmap-color-a04);
}
@media (max-width: 640px)
{
    .menu-button
    {
        display: block;
    }
    .menu
    {
        flex-direction: column;
        top: 40px;
        right: -200px;
        transition: all 0.5s;
    }
    .menu.open
    {
        right: 0px;
    }
    .menu .item
    {
        margin: 3px 10px 3px 10px;
    }
}

/* menu icon animation */

.hamburger {
  padding: 8px 5px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: #FFF;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible; }
.hamburger:hover { opacity: 0.7; }
.hamburger.is-active:hover { opacity: 0.7; }
.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner::before,
.hamburger.is-active .hamburger-inner::after { background-color: #FFF; }

.hamburger-box {
  width: 30px;
  height: 20px;
  display: inline-block;
  position: relative; }

.hamburger-inner {
  display: block;
  top: 50%;
  margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
width: 30px;
height: 4px;
background-color: #FFF;
border-radius: 4px;
position: absolute;
transition-property: transform;
transition-duration: 0.15s;
transition-timing-function: ease; }
.hamburger-inner::before, .hamburger-inner::after {
content: "";
display: block; }
.hamburger-inner::before {
top: -10px; }
.hamburger-inner::after {
bottom: -10px; }

.hamburger--spring .hamburger-inner {
  top: 2px;
  transition: background-color 0s 0.13s linear; }
.hamburger--spring .hamburger-inner::before {
top: 10px;
transition: top 0.1s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--spring .hamburger-inner::after {
top: 20px;
transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }

.hamburger--spring.is-active .hamburger-inner {
  transition-delay: 0.22s;
  background-color: transparent !important; }
.hamburger--spring.is-active .hamburger-inner::before {
top: 0;
transition: top 0.1s 0.15s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(45deg); }
.hamburger--spring.is-active .hamburger-inner::after {
top: 0;
transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.22s cubic-bezier(0.215, 0.61, 0.355, 1);
transform: translate3d(0, 10px, 0) rotate(-45deg); }


/* ====== lists ======== */

ul
{
    list-style-position: inside;
    text-align: left;
    margin-left: 10vw;
}

li
{
    line-height: 1.4em;
    margin-bottom: 1em;
}

/* checkmark list */
ul.checkmark
{
    list-style: 	none;
    margin-left: 	-50px;
    line-height: 	2em;
    text-align: 	left;
}
ul.checkmark li:before
{
	font-size: 		18px;
	font-weight: 	bold;
	content: 		"\2713";
	margin-right: 	10px;
}
ul.checkmark li
{
	text-indent: 	-25px;
	margin-left:	25px;
	line-height: 	110%;
	 margin-bottom: 5px;
}

/* folding list */
ul.folding
{
    list-style: none;
    list-style-position: inside;
    padding-left: 0px;
    margin-left: 0px;
    margin-top: 5px;
    margin-bottom: 0px;
}

ul.folding li
{
    overflow: hidden;
    max-height: 30px;
    transition-duration: 1s;
    margin-bottom: 5px;
}
ul.folding li:before
{
    transition-duration: 1s;
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path style="fill:white" d="M0 128.032v255.93c0 28.425 34.488 42.767 54.627 22.627l128-127.962c12.496-12.496 12.497-32.758 0-45.255l-128-127.968C34.528 85.305 0 99.55 0 128.032zM160 256L32 384V128l128 128z"/></svg>');
    display: block;
    width: 10px;
    height: 20px;
    position:relative;
    left: 10px;
    margin-top: -5px;
}

ul.folding li.open
{
    max-height: 800px;  /* workaround as height:auto does not work */
}
ul.folding li.open:before
{
    transition-duration: 0.5s;
    transform: rotate(90deg);
    transform-origin: 5px 13px;
}
 
ul.folding li *
{
    margin-left: 30px;
}
ul.folding li h2:first-child
{
    margin: -20px 0 5px 30px !important;
}

/* ======== tiles ================ */

.tile, .tile-front, .tile-back
{
	width: 			22vw;
	height: 		22vw;
    max-width: 		320px;
    max-height: 	320px;
    min-width: 		200px;
    min-height: 	200px;
    border-radius:  16px;
}

.tile
{
	margin-left: 	auto;
	margin-right: 	auto;
	perspective: 	1000px;
}
.tile.flip .tile-inner
{
	transform: 	rotateY(180deg);
}

.tile-inner
{
	position: 			relative;
	transition: 		0.6s;
	transform-style: 	preserve-3d;
}

.tile-front, .tile-back
{
	position: 			absolute;
	top: 				0;
	left: 				0;
	background: 		var(--tile-color-1);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.tile-front
{
	z-index: 		2;
	transform: 		rotateY(0deg);
	text-align:		center;
	display:		flex;
	flex-direction: column;
    align-items: 	center;
	justify-content: center;
}
.tile-back
{
	font-size:		90%;
	transform: 		rotateY(180deg);
	padding: 		0vh 3vw 0vh 3vw;
    text-align:		left;
    overflow: 		auto;
}
.tile-back li
{
	xfont-size: 			90% !important;
    margin-bottom: 		20px;
    hyphens: 			auto;
	-webkit-hyphens:	auto;
}

.tile:hover .tile-inner
{
  transform: rotateY(180deg);
}

.tile h1
{
    font-family: 	"sourcesanspro-regular";
	font-size: 		160%;
	margin:			10px 0px 0px 0px;
}

.tile img
{
	width: 		10vw;
	max-width:	130px;
}

.tile-row
{
	max-width:			1200px;
	display: 			flex;
    align-items: 		center;
    justify-content: 	center;
    margin:				2vh auto 2vh auto;
}

.tile.c2 .tile-front, .tile.c2 .tile-back
{
	background: 	var(--tile-color-2);
}
.tile.c3 .tile-front, .tile.c3 .tile-back
{
	background: 	var(--tile-color-3);
}

/* ======== grid ================ */

.grid
{
    align-items: unset;
    font-size: 80%;
}

.grid-cell
{
    width: 30%;
    font-size: 90%;
    padding: 2vh 2% 2vh 2%;
    text-align: center;
    color: var(--text-color-dark)
}
.grid-cell *
{
    color: var(--text-color-dark)
}
.block.keyfeatures .grid-cell
{
    background: var(--pointmap-color-01);
}



/* ====== speech bubble ====== */

.bubble
{
    position: absolute;
    top: 25vh;
    left: 10vw;
    width: 200px;
    color: #FFF;
    background: rgba(255,255,255,0.8);
    padding: 10px 20px 10px 20px;
    text-align: center;
    border-radius: 10px;
}

.bubble::after
{
    content: '';
    display: inline-block;
    position: absolute;
    width: 50px;
    height: 30px;
    top: 20px;
    left: 100%;
    background: rgba(255,255,255,0.8);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* ====== call for action bubble ======== */

.bubble.action
{
    position: relative;
    top: unset;
    width: 40vw;
    height: 25vh;
    min-width: 350px;
    min-height: 250px;
    left: 20%;
    font-size: 100%;
    background: var(--color-orange);
    border-radius: 50%;
    padding-top: 3vh;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
    margin: -5vh 0 -10vh 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.bubble.action::after
{
    height: 100px;
    width: 100px;
    left: 0px;
    top: calc(100% - 100px);
    background: var(--color-orange);
    clip-path: polygon(100% 0, 100% 50%, 0 100%);
    -webkit-clip-path: polygon(100% 0, 100% 50%, 0 100%);
    z-index: -1;
}
.bubble.action a
{
    color: #FFF;
    margin: 0px;
    font-size: 90%;
    line-height: 100%;
}
.bubble.action h2
{
    color: #FFF;
    margin: 0px !important;
    line-height: 110% !important;
    font-size: 180%;
}
.bubble.action h3
{
    color: #FFF !important;
    font-family: "sourcesanspro-regular";
    margin: 10px 0 5px 0;
}

@media (max-width: 480px)
{
    .bubble.action
    {
        left: 2vw;
        font-size: 90%;
    }
    .bubble.action a
    {
        font-size: 120%;
        line-height: 120%;
    }
}



/* ============================================ */
/* ================== Fonts =================== */
/* ============================================ */


/*  sourcesanspro ======== */

@font-face {
    font-family: 'sourcesanspro-regular';
    src: url('fonts/sourcesanspro.eot');
    src: url('fonts/sourcesanspro.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-bold';
    src: url('fonts/sourcesanspro-bold.eot');
    src: url('fonts/sourcesanspro-bold.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-light';
    src: url('fonts/sourcesanspro-light.eot');
    src: url('fonts/sourcesanspro-light.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sourcesanspro-thin';
    src: url('fonts/sourcesanspro-extralight.eot');
    src: url('fonts/sourcesanspro-extralight.eot?#iefix') format('embedded-opentype'),
         url('fonts/sourcesanspro-extralight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*  mosk =========== */

@font-face {
    font-family: 'mosk-regular';
    src: url('fonts/MoskNormal400.eot');
    src: url('fonts/MoskNormal400.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskNormal400.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-bold';
    src: url('fonts/MoskBold700.eot');
    src: url('fonts/MoskBold700.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskBold700.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-light';
    src: url('fonts/MoskLight300.eot');
    src: url('fonts/MoskLight300.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskLight300.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mosk-thin';
    src: url('fonts/MoskThin100.eot');
    src: url('sMoskThin100.eot?#iefix') format('embedded-opentype'),
         url('fonts/MoskThin100.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*  FontAwesome =========== */

@font-face {
  font-family: 'awesome-light';
  font-style: normal;
  font-weight: 300;
  font-display: auto;
  src: url("fonts/fa-light-300.eot");
  src: url("fonts/fa-light-300.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-light-300.woff") format("woff"); 
}

@font-face {
  font-family: 'awesome-regular';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/fonts/fa-regular-400.eot");
  src: url("fonts/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-regular-400.woff") format("woff");
}

@font-face {
  font-family: 'awesome-solid';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("fonts/fonts/fa-solid-900.eot");
  src: url("fonts/fonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-solid-900.woff") format("woff");
}

@font-face {
  font-family: 'awesome-brands';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/fa-brands-400.eot");
  src: url("fonts/fa-brands-400.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-brands-400.woff") format("woff");
}

@font-face {
  font-family: 'awesome-duotone';
  font-style: normal;
  font-weight: 900;
  font-display: auto;
  src: url("fonts/fa-duotone-900.eot");
  src: url("fonts/fa-duotone-900.eot?#iefix") format("embedded-opentype"),
       url("fonts/fa-duotone-900.woff") format("woff");
}

/*  Nasalization =========== */

@font-face {
  font-family: 'nasalization';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/nasalization.eot");
  src: url("fonts/nasalization.eot?#iefix") format("embedded-opentype"),
       url("fonts/nasalization.woff") format("woff"); 
}

/*  Lucida Handwrite =========== */

@font-face {
  font-family: 'lucida';
  font-style: normal;
  font-weight: 400;
  font-display: auto;
  src: url("fonts/LucidaHandwrite.eot");
  src: url("fonts/LucidaHandwrite.eot?#iefix") format("embedded-opentype"),
       url("fonts/LucidaHandwrite.woff") format("woff"); 
}



/* ============================================ */
/* ================== Icons =================== */
/* ============================================ */