/* Textlinks */
a:link, a:visited {
         display: inline;
         font-family: 'Lato';
         font-size: 1.0em;
         color: #000000;
         font-weight: normal;
         text-decoration: none;
         padding: 0px 0px 2px 0px;
         background: transparent url(../images/dots.png) bottom left repeat-x;

}
a:hover {
	color: #BF0000;
         text-decoration: none;
}

/* Allgemein */
body {
	background: #FFFFFF; 
         margin: 0px;
         padding: 0px;

         font-family: 'Lato';
         font-size: 1.0em;
         color: #000000;
         font-weight: normal;
         min-width: 320px;
}

.clear 	{ clear:both; line-height:0.0em; height: 0px; display: block; background-color: #FFDF00; }
img 	{ border:0px; }
.links 	{ float: left; }
.rechts 	{ float: right; }
.center 	{ text-align: center; }
.pad	{ padding: 5px 10px; }
.font-bigger { font-size: 1.2em; }
.additional-text { display: none; }
.justify { text-align: justify; }

/* table */
table { width: 100%; cell-padding: 5px; cell-spacing: 3px; }
table td:first-child { text-align: right; width: 50%; }
table td:last-child { text-align: left; width: 50%; font-weight: bold; }

/* Überschriften */
h1, h2, h3 {
	font-family: 'Lato';
}

h1 {
   	font-size: 2.0em;
 	color: #000000;
 	font-weight: bold;
         margin: 0px 0px 0px 0px;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
}

h2 {
   	font-size: 1.5em;
 	color: #000000;
 	font-weight: bold;
         margin: 0px 0px 5px 0px;
         text-shadow: rgba(0,0,0,0.2) 1px 1px 0px;
}

h3 {
   	font-size: 1.6em;
 	color: #000000;
 	font-weight: bold;
         margin: 0px 0px 5px 0px;
         text-shadow: #FFFFFF 1px 1px 0px;
}


/* Seitenaufbau */
#wrapper {
	width: 100%;
         text-align: center;
}

.in {
	max-width: 900px;
         padding: 0px 20px;
         margin: 0px auto;
         min-width: 300px;
}

#header {
         background: #FFFFFF;
         width: 100%;
         height: 100px;
         -webkit-box-shadow: 0px 10px 8px -10px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    0px 10px 8px -10px rgba(0, 0, 0, 0.25);
	box-shadow:         0px 10px 8px -10px rgba(0, 0, 0, 0.25);
}

#header .logo {
	float: left;
         width: 360px;
         margin-top: 10px;
}

#header .logo img {
	float: left;
	width: 75px;
         height: 75px;
	-webkit-box-shadow:  0px 12px 10px -10px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:     0px 12px 10px -10px rgba(0, 0, 0, 0.25);
	box-shadow:          0px 12px 10px -10px rgba(0, 0, 0, 0.25);
         -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

#header .logo h1 { margin-top: 15px; }

#header .menu {
	float: right;
         width: calc(100% - 360px);

         text-align: right;
	font-size: 0.8em;

         padding-top: 40px;

         opacity: 0.5;
         filter:alpha(opacity=0.5);
}

#teaser {
	width: 100%;
        	background: #eac600;
         /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffde27+0,eac600+100 */
	background: #DFDFDF; /* Old browsers */
	background: -moz-linear-gradient(45deg,  #FFFFFF 0%, #AFAFAF 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(45deg,  #FFFFFF 0%,#AFAFAF 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(45deg,  #FFFFFF 0%,#AFAFAF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#AFAFAF',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

         padding-top: 20px;
}

#teaser .left {
	float: left;
         width: calc(100% - 320px);

         text-align: left;
         font-size: 1.2em;
         padding-top: 50px;
}

#teaser .center {
	float: none;
         width: calc(100% - 20px);

         text-align: center;
         font-size: 1.2em;
         padding: 20px 0px 80px 0px;
}

#teaser .left .titel {
         width: calc(100% - 50px);
         height: 140px;
         text-align: left;
         font-size: 1.1em;
}

#teaser .center .titel {
         width: calc(100% - 0px);
         height: auto;
         text-align: center;
         font-size: 1.1em;
}

.appstores b { display: block; font-size: 1.2em; margin-bottom: 10px; }

#teaser #slider_text {
	float: right;
	text-align: right;
         padding: 10px;
         width: 280px;
         margin-right: 50px;
         border-right: 3px #000000 solid;
         font-size: 0.8em;
}

#teaser #slider_text2 {
	display: none;
	text-align: center;
         padding: 20px 10px 20px 10px;
         width: calc(100% - 20px);
         margin: 20px 0px 0px 0px;
         border-bottom: 3px #000000 solid;
         border-top: 3px #000000 solid;
         font-size: 1.0em;
}

#teaser #smartphone {
	background:transparent url(../images/smartphone.png) left top no-repeat;
	float: right;
         width: 320px;
         height: 540px;
}

#teaser #smartphone #slider .item {
	width: 188px;
         margin: 26px 0px 0px 42px;
         z-index: 100;
}

#teaser #smartphone #slider img {
	width: 188px;
         height: inherit;
}

#teaser #smartphone #slider-dots {
	width: 270px;
         text-align: center;
         margin-top: 50px;
         border: 0px #000000 solid;
}

#teaser #smartphone #slider-dots li {
         list-style: none;
         display: inline-block;
         margin: 0px;
         padding: 0px;
}

#teaser #smartphone #slider-dots li > button {
         display: inline-block;
         cursor: pointer;
         width: 12px;
         height: 12px;
         padding: 0px;
         margin-right: 15px;
         background: #000000;
         -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
         border: 0px #000000 solid;
         text-indent: -9999px;
}

#teaser #smartphone .glanz {
         position: absolute;
         z-index: 1000;
         background:transparent url(../images/smartphone_glanz.png) left top no-repeat;
         width: 114px;
         height: 311px;
         margin: -445px 0px 0px 40px;
         border: 0px #000000 solid;
}

#teaser #smartphone .pfeil_right {
         position: absolute;
         z-index: 1001;
	background:transparent url(../images/info_right.png) left top no-repeat;
         width: 200px;
         height: 20px;
         margin: -230px 0px 0px -50px;
}

#teaser #smartphone .pfeil_top {
	display: none;
         position: absolute;
         z-index: 1001;
	background:transparent url(../images/info_top.png) center bottom no-repeat;
         width: 20px;
         height: 140px;
         margin: -520px 0px 0px 170px;
}

/* content */
#content {
         background: #FFFFFF;
         width: 100%;
         -webkit-box-shadow: 0px 0px 8px -10px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    0px 0px 8px -10px rgba(0, 0, 0, 0.25);
	box-shadow:         0px 0px 8px -10px rgba(0, 0, 0, 0.25);

         clip-path: polygon(0 10%, 100% 0, 100% 100%, 0% 100%);
         margin-top: -70px;

         text-align: left;
         padding: 80px 0px 20px 0px;
}

#content.no {
         clip-path: polygon(0 0%, 100% 0, 100% 100%, 0% 100%) !important;
         margin-top: -20px;
         padding: 20px 0px 20px 0px;
}

#content .vorteile { padding-top: 50px; }
#content .vorteile .item {
	float:left;
	width: calc(33.33333% - 20px);
         margin: 10px 0px; border: 0px #000000 solid;
         font-size: 0.8em;

}
#content .vorteile .item:nth-child(2) { margin: 10px 30px; }

#content .vorteile .item b {
	display: block;
         font-size: 1.4em;
         padding: 20px 0px;
         text-align: center;
}


#content .vorteile .item img {
	width: 100px;
         height: inherit;
         margin-left: calc(50% - 50px);
}

/* Footer */
#footer {
	background: #494949;
         width: 100%;
         padding: 15px 0px 15px 0px;
         font-size: 0.9em;
         color: #8F8F8F;
         font-weight: normal;
}

#footer a {
         font-size: 1.0em;
         color: #FFFFFF;
         background-image: none;
         opacity: 0.5;
         filter:alpha(opacity=0.5);
}

/* Sonstiges display: none; */
#w { position: fixed; display: block; bottom: 0; left: 0; background: #000000; color: #FFFFFF; padding: 5px 10px; }
#shadow {
         display: none;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 100;
         background-color: rgba(0, 0, 0, 0.55);
         width: 100%;
         height: 100%;
         cursor: pointer;
}