@font-face {
    font-family: 'Comfortaa-Bold';
  src: url('Comfortaa/Comfortaa-Bold.eot');
  src: url('Comfortaa/Comfortaa-Bold.woff2') format('woff2'),
       url('Comfortaa/Comfortaa-Bold.woff') format('woff'),
       url('Comfortaa/Comfortaa-Bold.ttf') format('truetype'),
       url('Comfortaa/Comfortaa-Bold.svg#Comfortaa/Comfortaa-Bold') format('svg'),
       url('Comfortaa/Comfortaa-Bold.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:'Comfortaa-Light';
  src: url('Comfortaa/Comfortaa-Light.eot');
  src: url('Comfortaa/Comfortaa-Light.woff2') format('woff2'),
       url('Comfortaa/Comfortaa-Light.woff') format('woff'),
       url('Comfortaa/Comfortaa-Light.ttf') format('truetype'),
       url('Comfortaa/Comfortaa-Light.svg#Comfortaa/Comfortaa-Light') format('svg'),
       url('Comfortaa/Comfortaa-Light.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family:'Comfortaa-Regular';
  src: url('Comfortaa/Comfortaa-Regular.eot');
  src: url('Comfortaa/Comfortaa-Regular.woff2') format('woff2'),
       url('Comfortaa/Comfortaa-Regular.woff') format('woff'),
       url('Comfortaa/Comfortaa-Regular.ttf') format('truetype'),
       url('Comfortaa/Comfortaa-Regular.svg#Comfortaa/Comfortaa-Regular') format('svg'),
       url('Comfortaa/Comfortaa-Regular.eot?#iefix') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}


body{
background-color:#fcfeff2;
font-family: 'Comfortaa-Regular', 'Muli',"Century Gothic","Apple Gothic",AppleGothic ;
margin:0px auto 0px auto;
padding-bottom: 300px;
width:100%;
font-size: 1.3em;
}

.telefon{
color: #616f79;
text-decoration:none;
}

#homeinhalt{
position:relative;
}

#projekteinhalt{
position:relative;
}

#teaminhalt{
position:relative;
}

#preiseinhalt{
position:relative;
}

#coidinhalt{
position:relative;
}


#contentbox a{
color: #86ccf8 !important;
}

#contentbox a:hover{
color: #0a8cdf !important;
}


#contentbox{
position:relative;
top:0px;
width:80%;
overflow:scroll;
margin:0px auto 0px auto;
padding: 100px 0px 200px 0px;
background-color:#ffffff;
zoom: 1;
box-shadow: 1px 20px 15px #d2e7ed;
overflow:hidden;
}

::-webkit-scrollbar { 
    display: none; 
}

#tv{
width:100%;
}

#navibox{
position:fixed;
top:0px;
width:80%;
height:100px;
margin:0px auto 0px auto;
border-bottom: 1px solid #009ee3;
color:#009ee3;
background-color:rgba(265,265,265,0.8);
font-style: normal;
font-size: 80%;
box-shadow: 0px 2px 2px #b8b6b2;
z-index:2;
}


p{
color: #aeb9c2;
font-family: 'Comfortaa-Regular', tahoma,verdana;
font-size: 100%;
}

i{
color: #aeb9c2;
font-family: 'Comfortaa-Regular', tahoma,verdana;
font-size: 16pt;
}

h2{
font-size: 12pt;
}

h6{
font-size: 12pt;
font-variant: italic;
}



.zwischenraum{

}

.menueweite a{
color: grey;
text-decoration: none;
}

.menueweite{
color: grey;
text-decoration: none;
}

.aktiv{
color:#009ee3;
font-weight:bold;
}





.budget{
color: grey;
}





.abstand{
position:relative;
top:0px;
width:100%;
height:5vw;
margin:0px auto 0px 0px;
padding:0px 0px 0px 0px;
zoom: 1;
}


#logobox{

}

#mainnavibox{

}

#homeicon{
background-image:url(../menu/start.png);
}

#projekticon{
background-image:url(../menu/projekte.png);
}

#teamicon{
background-image:url(../menu/team.png);
}

#preisicon{
background-image:url(../menu/preise.png);
}

#brandicon{
background-image:url(../menu/branding.png);
}

#kontakticon{
background-image:url(../menu/kontakt.png);
}


h1 {
font-family: 'Comfortaa-Regular','Muli',"Century Gothic","Apple Gothic",AppleGothic ;
color:#009ee3;
font-weight: normal;
font-style: normal;
font-size:20pt;
}

h3 {
font-family: 'Comfortaa-Regular', 'Muli',"Century Gothic","Apple Gothic",AppleGothic ;
color:#9ab1c1;
font-weight: normal;
font-size: 20pt;
text-align: center;
font-style: italic;
}

.obertitel{
text-align: center;
font-family: 'Comfortaa-Regular','Muli',"Century Gothic","Apple Gothic",AppleGothic ;
color:#009ee3;
font-weight: normal;
font-style: normal;
font-size:20pt;
}

#homebox {
	position: relative;
	width: 100%;
	margin: 0px 0px 0px 0px;
	zoom: 1;
	padding-bottom: 5em;
	}

#texthome{
position:relative;
left:20px;
top: 50px;
width:100%;

font-size:100%;
}

#homebox h2{
font-size:70%;
}

#homebox p{
font-size:70%;
line-height:120%;
}


.bildicon1{
display:block;
}

#webdesign{
position:relative;
width: 180px;
margin: -7px auto 0px auto;
}

#webprogrammierung{
position:relative;
width: 175px;
margin: 0px auto;
}

#websicherheit{
position:relative;
width: 175px;
margin: 0px auto;
}

.bildicon2{
textalign:center;
}


#beratung{
position:relative;
width: 179px;
margin: 0px auto;
}

#umsetzung{
position:relative;
width: 140px;
margin: 0px auto;
}

#wartung{
position:relative;
width: 175px;
margin: 0px auto;
}

.bildicon3{
textalign:center;
}

#idee{
position:relative;
width: 92px;
margin: 0px auto;
}

#ok{
position:relative;
width: 92px;
margin: 0px auto;
}

#sicher{
position:relative;
width: 92px;
margin: 0px auto;
}



#texthome h1{
font-size:100%;
text-align:center;
}

#textlinks{
float:left;
top:750px;
left:2%;
width:29%;
height:auto;
padding: 0px 1% 0px 1%;
color: #aeb9c2;
font-family: 'Comfortaa-Regular', tahoma,verdana;
zoom: 1;
}

#textmitte{
float:left;
top: 750px;
left:20%;
width:29%;
height: auto;
padding: 0px 1% 0px 1%;
color: #aeb9c2;
font-family: 'Comfortaa-Regular', tahoma,verdana;
font-size:100%;
zoom: 1;
}

#textrechts{
float:left;
top: 750px;
left:80%;
width:29%;
height:auto;
padding: 0px 1% 0px 1%;
color: #aeb9c2;
font-family: 'Comfortaa-Regular', tahoma,verdana;
zoom: 1;
}



#slideshow{
position:relative;
height:430px;
width:500px;
margin:0px auto 0px auto;
padding:0px 300px 0px 20px;
zoom: 1;
box-shadow: 10px 10px 15px #888888;
background-image:url('../img/news/provenire.jpg'),url('../img/news/eggigr.jpg'),url('../img/news/vsa2.jpg');
background-position:-1000px 0px , 160px 0px , 1000px 0px;
background-repeat: no-repeat;
background-size: 500px 417px;
-webkit-animation:topten 15s 2s infinite;
animation:topten 15s 2s infinite; 
}

@-webkit-keyframes topten
{
0% {background-position:-5555555500px 0px , 160px 0px , 5555555500px 0px;}
0.001% {background-position:-1000px 0px , 140px 0px , 5555555500px 0px;}
32% {background-position: 160px 0px , 1000px 0px , -5555555500px 0px;}
32.001% {background-position: 140px 0px,  5555555500px 0px , -1000px 0px;}
65% {background-position: 1000px 0px, -5555555500px 0px , 160px 0px;}
65.001% {background-position: 5555555500px 0px, -1000px 0px , 140px 0px;}
99.001% {background-position: -5555555500px 0px, 160px 0px , 1000px 0px;}
100% {background-position:-1000px 0px, 140px 0px , 1000px 0px;}
}

@keyframes topten
{
0% {background-position:-5555555500px 0px , 160px 0px , 5555555500px 0px;}
0.001% {background-position:-1000px 0px , 140px 0px , 5555555500px 0px;}
32% {background-position: 160px 0px , 1000px 0px , -5555555500px 0px;}
32.001% {background-position: 140px 0px,  5555555500px 0px , -1000px 0px;}
65% {background-position: 1000px 0px, -5555555500px 0px , 160px 0px;}
65.001% {background-position: 5555555500px 0px, -1000px 0px , 140px 0px;}
99.001% {background-position: -5555555500px 0px, 160px 0px , 1000px 0px;}
100% {background-position:-1000px 0px, 140px 0px , 1000px 0px;}
}
#slidestow{
	position:relative;
	height:430px;
	width:800px;
	margin:0px auto 0px auto;
	padding:0px 0px 0px 20px;
	zoom: 1;
	box-shadow: 10px 10px 15px #888888;
	background:initial;
	-webkit-animation:newan 15s 2s infinite;
	-moz-animation:newan 15s 2s infinite;
	animation:newan 15s 2s infinite;
	cursor:pointer;
	overflow:hidden;
	}
	
.slideimg{
	display:block;
	width:100%;
	height:100%;
	
	background-size: 500px 417px;
	background-position: 160px 0px;
	background-repeat:no-repeat;
	position:absolute;
	top:0px;
	}
	
@-webkit-keyframes id1
	{
	0% {left:0px;}
	0.001% {left:-20px}
	32% {left:840px;}
	32.001% {left:5555555340px;}
	65% {left:-5555555660px;}
	65.001% {left:-1160px;}
	99.001% {left:0px;}
	100% {left:-20px;}
	}
@-webkit-keyframes id2
	{
	0% {left:-5555555660px;}
	0.001% {left:-1160px;}
	32% {left:0px;}
	32.001% {left:-20px}
	65% {left:840px;}
	65.001% {left:5555555340px;}
	99.001% {left:-5555555660px;}
	100% {left:-1160px;}
	}
	
@-webkit-keyframes id3
	{
	0% {left:5555555340px;}
	0.001% {left:5555555340px;}
	32% {left:-5555555660px;}
	32.001% {left:-1160px;}
	65% {left:0px;}
	65.001% {left:-20px}
	99.001% {left:840px;}
	100% {left:840px;}
	}
	

.bildcontainer{
position:relative;
width:100%;
margin-bottom:2vw;
}

.homeboxbild{
width:100%;
}

#projektebox{
position:relative;
top:5vw;
width:100%;
margin:0px 0px 0px 0px;
zoom: 1;
font-size:100%;
}



#projektebox img{
box-shadow: 2px 5px 10px #888888;
}


#kunden{
position:relative;
top:0px;
left:58px;
width:100%;
height:auto;
margin:0px 0px 0px 0px;
zoom: 1;
}

.hallo{
opacity: 0.4;
border: 1px solid black;
width:50%;
height:auto;
zoom: 1;
}



.klink{
font-family: 'Comfortaa-Regular', Century Gothic,'Muli';
color:#666666;
font-weight: normal;
font-style: normal;
font-size: 12pt;
padding-bottom: 35px;
}



.klonk{
font-family: 'Comfortaa-Regular', 'Muli',"Century Gothic","Apple Gothic",AppleGothic ;
color:#9ab1c1;
font-weight: normal;
font-style: normal;
font-size: 10pt;
}





#teambox {
	position: relative;
	top: 5vw;
	width: 100%;
	margin: 0px auto 0px auto;
	zoom: 1;
	padding-bottom: 2em;
	}



@-webkit-keyframes mymove 
{
0% {background-image:url('../img/team/versuch_frgb.jpg');
	}
50% {background-image:url('../img/team/versuch_drgb.jpg');
	}
100% {background-image:url('../img/team/versuch_frgb.jpg');
	}
}

@keyframes mymove 
{
0% {background-image:url('../img/team/versuch_frgb.jpg');
	}
50% {background-image:url('../img/team/versuch_drgb.jpg');
	}
100% {background-image:url('../img/team/versuch_frgb.jpg');
	}
}

#teambox p{
margin:0px auto 0px auto;
width:80%;
}

.schatten{
position:relative;
top:0px;
box-shadow:10px 10px 5px #888888;

width:100%;
}

#wir{
margin:0px auto 0px auto;
width:100%;
}

#knowhow{
margin:80px auto 0px auto;
width:100%;
}

.teamtext{
position:absolute;
top:80%;
left:0px;
width:100%;
padding:0px 0px 0px 0px;
margin:2% auto 0px auto;
}



@-webkit-keyframes textdisplayfr{
0% {visibility:visible;
	}
20% {visibility:hidden;
	}
60% {visibility:hidden;
	}
61% {visibility:visible;
	}
}

@keyframes textdisplayfr{
0% {visibility:visible;
	}
20% {visibility:hidden;
	}
60% {visibility:hidden;
	}
61% {visibility:visible;
	}
}


-webkit-animation:textdisplayda 20s infinite;
animation:textdisplayda 20s infinite; 
visibility:hidden;
}

@-webkit-keyframes textdisplayda{
0% {visibility:hidden;
z-index:0;
	}
20% {visibility:hidden;
z-index:0;
	}	
21% {visibility:visible;
z-index:20;
	}
60% {visibility:hidden;
z-index:0;
	}
}

@keyframes textdisplayda{
0% {visibility:hidden;
	}
20% {visibility:hidden;
	}	
21% {visibility:visible;
	}
60% {visibility:hidden;
	}
}

#preisebox{
position:relative;
top:60px;
width:100%;
height:auto;
margin:0px auto 0px auto;
zoom: 1;
}


.geld{
color:#9ab1c1;;
border:1px solid #9ab1c1;
padding:2px 5px 2px 5px;
}

#preisebox p{
padding:0px 100px 0px 100px;
}


#kontaktbox{
position:relative;
left:0px;
width:100%;
height:1200px;
margin:auto auto 0px auto;
padding:0px 10px 0px 10px;
}

#animationbox{
position:relative;
top:0px;
height:80px;
margin:0px auto 0px auto;
zoom: 1;
background-image:url('../img/logoanimation.gif');
background-size: 100%;
background-repeat:no-repeat;
}

.kontaktformular{
position:relative;
top:0px;
left:10%;
color:#009ee3;
margin:0px 0px 0px 0px;
border:1px solid #009ee3;
width:80%;
text-align:center;
padding: 5px 0px 10px 0px;
}

#formulartabelle{
position: relative;
top: 0px;
left: 5%;
width: 80%;
margin: 0px 0px 0px 0px;
zoom: 1;
font-size: 12pt;
text-align: left;
color: #009ee3;
line-height: 30px;
}

.moderninput{
position:relative;
width:40vw;
font-size:1.5vw;
border:none 0px;
border-bottom:solid 1px #818a90;
border-left:solid 1px #818a90;
border-radius:0px;
box-shadow:none;
outline:none 0px;
}

.sendeknopf1{
padding:5px 15px 5px 20px;
background-color:rgba(22,37,148,0.7);
box-shadow: 1px 10px 10px #b2c0c6;
border-bottom-left-radius:1em;
border-top-right-radius:1em;
color:#ffffff;
}


.sendeknopf2{
padding:5px 10px 5px 10px;
background-color:rgba(22,37,148,0.7);
box-shadow: 1px 10px 10px #b2c0c6;
border-bottom-right-radius:1em;
border-top-left-radius:1em;
color:#ffffff;
}

.buttondings{
border:rgba(22,37,148,0.7);
}

.buttons{
position:relative;
}



.error{
color:red;
}

	#rutschboxen{
	
	margin-top:3vw;
	}
	
	.langsam{
	-webkit-transition:transform 1s, width 1s, margin 1s;
	-webkit-transition-timing-function: ease;
	-moz-transition:transform 1s, width 1s, margin 1s;
	-moz-transition-timing-function: ease;
	-o-transition:transform 1s, width 1s, margin 1s;
	-o-transition-timing-function: ease;
	transition:transform 1s, width 1s, margin 1s;
	transition-timing-function: ease;
	}
	
	#element1{
	/*allg. CSS*/
	display:flex;
	width:28%;
	height:35vw;
	float:left;
	margin:0px 2.65% 0px 2.65%;
	-webkit-box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
    -moz-box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
    box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
	}
	
	#element1{
	/*transitions*/
	
	}
	
	#element1.amanfang{
	/*startposition*/
	transform:translate(-35vw,0px);
	}
	
	#element1.gerutscht, .preisinfoanzeigen #element1{
	/*endposition*/
	transform:translate(0px,0px);
	}
	
	#element2{
	/*allg. CSS*/
	display:flex;
	width:28%;
	height:35vw;
	float:left;
	margin:0px 2.65% 0px 2.65%;
	-webkit-box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
    -moz-box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
    box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
	}
	
	#element2{
	/*transitions*/
	transform-origin:top;
	}
	
	#element2.amanfang{
	/*startposition*/
	transform:translate(0px,-20vw) scale(1,0);
	}
	
	#element2.gerutscht, .preisinfoanzeigen #element2{
	/*endposition*/
	transform:translate(0px,0px) scale(1,1);
	}
	
	#element3{
	/*allg. CSS*/
	display:flex;
	width:28%;
	height:35vw;
	float:left;
	margin:0px 2.65% 0px 2.65%;
	-webkit-box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
    -moz-box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
    box-shadow: 1vw 1vw 0.5vw 0px rgba(179,175,179,1);
	}
	
	#element3{
	/*transitions*/
	
	}
	
	#element3.amanfang{
	/*startposition*/
	transform:translate(35vw,0px) rotate(360deg);
	}
	
	#element3.gerutscht, .preisinfoanzeigen #element3{
	/*endposition*/
	transform:translate(0px,0px) rotate(0deg);
	}
	
	#rutschen{
	position:absolute;
	top:50vw;
	left:50vw;
	}
	
	.preisart{
	position:absolute;
	top:-2vw;
	border-radius:0px 0px 4vw 0px;
	left:0px;
	width:100%;
	height:4vw;
	background-color:rgba(188,227,250,1);
	border:solid 1px rgba(0,158,227,1);
	font-family: 'Comfortaa-Regular';
	font-size:3.2vw;
	text-align:center;
	color:rgba(63,169,245,1);
	}
	
	.iconboxen{
	position:absolute;
	width:12vw;
	height:12vw;
	border-radius: 6vw;
	background-color:rgba(0,158,227,1);
	left:23.5%;
	top:6vw;
	display:flex;
	}
	
	.preistextboxen{
	margin:22vw auto 0px auto;
	font-family: 'Comfortaa-Regular';
	font-size:3.2vw;
	text-align:center;
	}
	
	.infobutton{
	position:absolute;
	top:28vw;
	left:10%;
	text-align:center;
	width:80%;
	height:4.5vw;
	background-color:rgba(0,158,227,1);
	color:rgba(255,255,255,1);
	border-radius:2.5vw;
	font-family: 'Comfortaa-Regular';
	font-size:3.2vw;
	padding-top:0.5vw;
	border:solid 0.2vw rgba(188,227,250,1);
	cursor:pointer;
	}
	
	.preisinfotext{
	display:none;
	clear:both;
	font-size:1.3vw;
	}
	
	.preisinfotext p{
	padding:0px !important;
	font-size:1.3vw;
	}
	
	.preisinfotext h1{
	font-size:1.3vw;
	}
	
	.preisinfoanzeigen #basistext, .preisinfoanzeigen #smarttext, .preisinfoanzeigen #premiumtext{
	display: block;
position: absolute;
left: 30%;
top: 2.3vw;
font-family: 'Comfortaa-Regular';
font-size: 1.3vw;
max-height: 80%;
overflow: scroll;
padding: 2vw;
-webkit-overflow-scrolling:touch;
width: 60%;
	}
	
	.preisinfoanzeigen #smarttext, .preisinfoanzeigen #premiumtext
	{
	-webkit-box-shadow: 0px -15px 8px -12px rgba(120,120,120,1) inset;

-moz-box-shadow: 0px -15px 8px -12px rgba(120,120,120,1) inset;

box-shadow: 0px -15px 8px -12px rgba(120,120,120,1) inset;

	}
	
	.preisinfoanzeigen .preistextboxen{
	margin:26vw 0px 0px 8%;
	}
	
	.preisinfoanzeigen .iconboxen{
	left:8%;
	}
	
	.basistext #element1{
	width: 95%;
	}
	
	.basistext #element1 .infobutton{
	top:4vw;
	left:80%;
	width:5.7%;
	visibility:hidden;
	}
	
	.basistext #element1 .infobutton::after{
	content: "x";
	width: 5%;
	height: 5vw;
	color: rgba(63,169,245,1);
	font-size: 4vw;
	visibility: visible;
	position: absolute;
	top: -6.5vw;
	left: 210%;
	}
	
	.basistext #element2{
	transform:scale(0,1);
	transform-origin:right;
	margin:0px -70vw 0px 0px;
	}
	
	.basistext #element3{
	transform: scale(0,1);
	transform-origin:right;
	margin:0px -70vw 0px 0px;
	}
	
	.smarttext #element1{
	transform: scale(0,1);
	transform-origin:left;
	margin:0px 0px 0px -35vw;
	}
	
	.smarttext #element2{
	
	width:95%;
	}
	
	.smarttext #element2 .infobutton{
	top:4vw;
	left:80%;
	width:5.7%;
	visibility:hidden;
	}
	
	.smarttext #element2 .infobutton::after{
	content: "x";
	width: 5%;
	height: 5vw;
	color: rgba(63,169,245,1);
	font-size: 4vw;
	visibility: visible;
	position: absolute;
	top: -6.5vw;
	left: 210%;
	}
	
	.smarttext #element3{
	transform: scale(0,1);
	transform-origin:right;
	margin:0px -35vw 0px 0px;
	}
	
	.premiumtext #element1{
	transform: scale(0,1);
	transform-origin:left;
	margin:0px 0px 0px -70vw;
	}
	
	.premiumtext #element2{
	transform: scale(0,1);
	transform-origin:left;
	margin:0px 0px 0px -70vw;
	}
	
	.premiumtext #element3{
	width:95%;
	}
	
	.premiumtext #element3 .infobutton{
	top:4vw;
	left:80%;
	width:5.7%;
	visibility:hidden;
	}
	
	.premiumtext #element3 .infobutton::after{
	content: "x";
	width: 5%;
	height: 5vw;
	color: rgba(63,169,245,1);
	font-size: 4vw;
	visibility: visible;
	position: absolute;
	top:-6.5vw;
	left: 210%;
	}
	
	#preisebox{
	min-height:60vw;
	}
	
	.allepreise{
	display:none;
	}