@charset "UTF-8";

:root{
	/* TODO user max() somewhere in the future if wide support given*/
	--button-size: calc(5vh + 30px);
}

@font-face {
    font-family: 'Ubuntu';
    src: url('fonts/ubuntu-bold-webfont.woff') format('woff');
    font-style: normal;
}

@font-face {
	font-family: 'Trixmix';
	font-style: normal;
	src: url('trixmix.woff') format('woff');
}

@font-face {
    font-family: 'Poppins';
    src: url('fonts/poppins-bold-webfont.woff2') format('woff2'),
         url('fonts/poppins-bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'NotoEmoji';
  src: url('fonts/NotoEmoji-Bold.woff2') format('woff2');
}

body{
	font-family: Ubuntu,NotoEmoji;
}

h1,h2,h3,h4{
	font-family:Trixmix, NotoEmoji, Poppins, sans-serif;
}

html{
    height:100%;
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    padding: 0;
    display: table;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    width: 70vw;
    font-size:120%;
}

h2{
	letter-spacing: 0.075em;
}


/* für jQuery UI Tooltips */

.ui-helper-hidden-accessible{
	display:none;
}
.ui-tooltip {
	border-radius: 10px;
	background-color: #fff;
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 350px;
	box-shadow: 2px 2px 2px 0px rgba(0,0,0,0.5);
}


/*----------------  INDEX SEITE -----------------*/

#center {
    padding-top: 2vh;
    display: table-cell;
    height: 100%;
}

#center > div {
    vertical-align: middle;
}

#title {
	width:68%;
    display: inline-block;
}

#subtitle {
	width:68%;
}

/*----------------------------------------------*/


#arrowLeft {
    display: inline-block;
	cursor:pointer;
	width:100%;
}

#sectionMiddle {
    display: inline-block;
    width: 80%;
    text-align: left;
}

.stil {
	width: 27%;
    margin: 1.5% 3% 1.5% 3%;
} 


.arrowContainer {
    display: inline-block;
    width: 6%; /*w*/
}

#arrowRight {
	width:100%;
	cursor:pointer;
}

/*------------  ENDE INDEX SEITE --------------------*/

.copyright
{
	position: fixed;
	z-index: 1000;
	bottom: 2px;
	right: 10px;
	font-size: 60%;
	font-family: sans;
	font-weight: normal;
}

/*------------- BUTTON STYLE ------------------------*/

.buttons
{
	position: fixed;
	width:   var(--button-size);
	padding: var(--menu-padding-size);
}
#buttonsTopLeft
{
	left: 0;
	top: 0;
}
#buttonsTopRight
{
	right: 0;
	top: 0;
}
#buttonsBottomRight {
	bottom: 0;
	right: 0;
}
.buttons{
	z-index: 10;
	text-align:center;
}
.buttons button
{
	padding: 0;
	margin: calc( var(--button-size) * 0.05 );
	background: none;
	border: none;
	width:   var(--button-size);
	height:   var(--button-size);
	vertical-align: middle;
}

button img
{
	width: 100%;
	height: 100%;
}

body.embedded #buttonExit{
	display: none;
}