@media only screen and (orientation : portrait){

#iphonewebbern{
position:absolute;
left:30vw;
top:5vw;
}

#iphonewebbern a{ 
text-decoration:none;
font-size:7vw;
font-family: 'Comfortaa-Regular', Comfortaa, sans-serif;
color:rgba(59,68,85,1);
}

h1,h3{
padding:0px;
margin:4vw 0px;
}

h3{
padding:0px;
margin:4vw 2vw;
font-size: 6.8vw;
text-align:center;
}

h2{
padding:0px;
margin:4vw 2vw;
}

.obertitel{
font-size:6.8vw;
}

#contentbox{
position: relative;
top: 0px;
width: 100vw;
overflow: hidden;
margin: 0px auto 2vw auto;
padding: initial;
background-color: #ffffff;
}

.abstand{
position: relative;
top: -16vw;
width: 100%;
height: 18vw;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#navibox{
position: fixed;
top: 0px;
width: 100vw;
height: 18vw;
background-color: rgba(265, 265, 265, 1);
left: 0px;
}

#mainnavibox{
position: absolute;
top: 18vw;
left: 0vw;
background-color: rgba(265, 265, 265, 1);
transform:scale(1,0);
transition:transform 1s;
transform-origin: top;

}

#mainmenue{

}

.icon{
position:absolute;
box-sizing:border-box;
margin-top:1.5vw;
margin-left:2vw;
width:12.5vw;
height:12.5vw;
background-size: 100%;
background-position:0.vw 0.vw;
background-repeat: no-repeat;
border:0.6vw solid #01b9ff;
box-shadow:3px 3px 23px rgba(139,136,143,0.7);
border-radius:2vw 2vw 2vw 2vw;
cursor:pointer;
}

.verlink{
margin-top: 1vw;
position: relative;
box-sizing: border-box;
width: 98vw;
left: 1vw;
height: 16vw;
border: solid 0.1vw #119cce;
border-radius: 5vw 5vw 5vw 5vw;
box-shadow: 3px 3px 23px rgba(139, 136, 143, 0.7);
background-position: 100%;
color: #06aeee;
font-family: 'Comfortaa-Regular', 'Roboto', sans-serif;
text-align: center;
padding-right: 3vw;
padding-left: 3vw;
}


.zwischenraum{
}

.menueweite{
box-sizing: border-box;
text-align: center;
font-size: 9vw;
margin-left: 10vw;
position: relative;
top: 2vw;
}

#logobox {
position: absolute;
left: 5vw;
top: 3vw;
box-sizing: border-box;
width: 13vw;
height: 13vw;
background-image: url("../img/logo_smart.svg");
background-size: 100%;
background-position: 0vw 0vw;
background-repeat: no-repeat;
}

.listenbildli{
position: absolute;
left: 85vw;
top: 6vw;
height: 11vw;
width: 11vw;
}

.listenstrichli{
position: relative;
left: 10%;
top: 0%;
height: 10%;
width: 85%;
margin-bottom: 20%;
background-color: #04a6e3;
-moz-border-radius: 1em 1em 1em 1em;
-webkit-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
}

@-webkit-keyframes id1
	{
	0% {left:0px;}
	0.001% {left:0px}
	32% {left:840px;}
	32.001% {left:5555555340px;}
	65% {left:-5555555660px;}
	65.001% {left:-1160px;}
	99.001% {left:0px;}
	100% {left:-0px;}
	}
@-webkit-keyframes id2
	{
	0% {left:-5555555660px;}
	0.001% {left:-1160px;}
	32% {left:0px;}
	32.001% {left:0px}
	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:0px}
	99.001% {left:840px;}
	100% {left:840px;}
	}
	
#homebox,#projektebox{
top:18vw;
}

#homebox p{
font-size: 70%;
line-height: 120%;
width:96%;
padding-left:2%;
}

#slidestow{
position: relative;
height: 90vw;
width: 90vw;
left:0vw;
top:-40vw;
padding: 0px 0px 0px 20px;
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: 100%;
background-position: 100%;
background-repeat: no-repeat;
position: absolute;
top: 0px;
}

.hometitel{
position: relative;
top: 90vw;
}

#texthome{
left:0px;
width:100vw;
}

#textlinks,#textmitte,#textrechts{
clear:both;
left: 0;
width: 100%;
height: auto;
padding: 0px 1% 0px 1%;
color: #818a90;
font-family: 'Comfortaa-Regular', tahoma, verdana;
}

.bildcontainer{
width:98%;
}

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

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

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

#textmitte, #textrechts{
margin-top:10vw;
}

#kunden{
left:0px;
width:100vw;
}

#kunden .tablecell{
position: relative;
margin:0px auto;
width: 300px;
}

#kunden .tablerow{

}

#kunden .tablerow.klink{
height:114px;
}

.hallo{
width:100%;
opacity:1.0;
}

.kundeneins{

}

.kundenzwei{
top:50px;
}

.kundendrei{
top:100px;
}

.klonk, .klink{
font-size:20px;
}

.klink.kundeneins{
top: -401px;
}

.klink.kundenzwei{
top: -243px;
}

.klink.kundendrei{
top: -79px;
}

.unvollstaendig1{
top:-2px !important;
}

.schatten{
position: relative;
top: 0px;
box-shadow: 10px 10px 5px #888888;
height: auto;
height:initial;
width: 98%;
padding-bottom:4vw;
}

#teambilder{
position: relative;
/* top: -48vw; */
left: 1vw;
width: 98vw;

margin: 0px auto 0px auto;
/* zoom: 1; */

}

.teambildbox{
width: 98%;
margin-bottom:0px;
}

.teamboxbild{
width:100%;
}

.teamtext{
position: relative;
left: 0px;
width: 80vw;
margin-bottom: 4vw;
}

#ftext{
position: relative;
font-family: 'Comfortaa-Regular', 'Muli', "Century Gothic", "Apple Gothic", AppleGothic;
color: #ffffff;
font-weight: normal;
font-style: normal;
font-size: 3.8vw;
background-color: rgba(0,158,227,0.6);
padding: 10px 0px 10px 10px;
margin-bottom: 8vw;
}

#dtext{
position: relative;
font-family: 'Comfortaa-Regular', 'Muli', "Century Gothic", "Apple Gothic", AppleGothic;
color: #ffffff;
font-weight: normal;
font-style: normal;
font-size: 4vw;
background-color: rgba(0,158,227,0.6);
padding: 10px 0px 10px 10px;

}

#knowhow h3{
margin-top:-50px;
}


#knowhow .tabelle, #knowhow .tablerow, #knowhow .tablecell{
display:inline-block;
}

#knowhow p, #preisebox p, .telefon, #coidinhalt p, .kontaktformular p{
font-size: 6vw;
line-height: 120%;
width:96%;
padding-left:2%;
text-decoration:none;
}

.telefon{
color: #616f79;
}

#preisebox{
top:-4vh;
}

.moneey{
border: 1px solid #9ab1c1;
}

.geld {
width:98vw;
font-size:4vw;
color: #616f79;
border:0px none;
}

#preisliste{
position: relative;
width: 98vw;
left: 1vw;
}

.log{
position:relative;
max-width:98%;
overflow:hidden;
}

.log img{
width:100%;
margin:0px auto;
}

#loganima img{
left: 6vw;
}
#animavisit img{
left:25vw;
}

#logseel img{
left:-5vw;
}

#seelbrosch img{
left:-30vw;
}

#logpro img{
left:8vw;

}

#flyerpro img{
left:15vw;
}

#gutsch img{
left:40vw;
}
#logschm img{
left:80vw;
}

#logtrogr img{
width: 35%;
left: 10vw;
top: -12vw;
}

#logtrokl img{
left: 30vw;
top: -8vw;
}

#auto img{
width: 100%;
left: 1vw;
top: -4vw;
}

#logequigr img{
top: 10vw;
width: 50%;
}

#logequikl img{
top: -15vw;
left: 50vw;
}

#bripap img{
left: 10vw;
top:-8vw;
}

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

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

textarea{
height:6em;
}

.buttondings{
font-size:6vw;
}

.sendeknopf1{
padding: 5px 8vw 5px 8vw;
}

.sendeknopf2{
padding: 5px 4vw 5px 4vw;
}

#preiseinhalt {
position: relative;
z-index: 2;
}

#rutschboxen {
margin: 10vw 0px -10vw 0px;
position: relative;
height: 256vw;
}

.rutschbox{
border-left:1px solid rgba(0,158,227,1);
}

.langsam{
	-webkit-transition:transform 0.5s, width 0.5s, margin 0.5s;
	-webkit-transition-timing-function: ease;
	-moz-transition:transform 0.5s, width 0.5s, margin 0.5s;
	-moz-transition-timing-function: ease;
	-o-transition:transform 0.5s, width 0.5s, margin 0.5s;
	-o-transition-timing-function: ease;
	transition:transform 0.5s, width 0.5s, margin 0.5s;
	transition-timing-function: ease;
	}

#element1 {
display: flex;
width: 80%;
height: 80vw;
/* float: left; */
margin: 0px 8% 8vw 10%;
-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 {
display: flex;
width: 80%;
height: 80vw;
/* float: left; */
margin: 0px 8% 8vw 10%;
-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 {
display: flex;
width: 80%;
height: 80vw;
/* float: left; */
margin: 0px 8% 0vw 10%;
-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.amanfang{
	/*startposition*/
	transform:translate(100vw,0px);
	}
	
	#element2.amanfang{
	/*startposition*/
	transform:translate(-100vw,0px);
	}
	
	#element3.amanfang{
	/*startposition*/
	transform:translate(100vw,0px) rotate(360deg);
	}
	
.preisart {
position: absolute;
top: -4vw;
border-radius: 0px 0px 10vw 0px;
left: -1px;
width: 100%;
height: 10vw;
background-color: rgba(188,227,250,1);
border: solid 1px rgba(0,158,227,1);
font-family: 'Comfortaa-Regular';
font-size: 8vw;
text-align: center;
color: rgba(63,169,245,1);
padding-top: 0vw;
}

.infobutton ,.allepreise{
position: absolute;
top: 64vw;
left: 10%;
text-align: center;
width: 80%;
height: 10vw;
background-color: rgba(0,158,227,1);
color: rgba(255,255,255,1);
border-radius: 10vw;
font-family: 'Comfortaa-Regular';
font-size: 8vw;
padding-top: 0.5vw;
border: solid 0.2vw rgba(188,227,250,1);
cursor: pointer;
}

.preistextboxen {
margin: 51vw auto 0px auto;
font-family: 'Comfortaa-Regular';
font-size: 8vw;
text-align: center;
}

.iconboxen {
position: absolute;
width: 36vw;
height: 36vw;
border-radius: 18vw;
background-color: rgba(0,158,227,1);
left: 28%;
top: 11vw;
display: flex;
}



.premiumtext #element2, .premiumtext #element1, .basistext #element2, .basistext #element3, .smarttext #element1, .smarttext #element3 {

display: none;
}

.premiumtext #element3, .basistext #element1, .smarttext #element2 {
width: 90%;
display: block;
position: relative;
top: 0px;
height: auto;
transform: translate(0px,0px) rotate(0deg);
left: -3vw;
}

.premiumtext #element3 .infobutton::after, .basistext #element1 .infobutton::after , .smarttext #element2 .infobutton::after  {
content: "x";
width: 5%;
height: 8vw;
color: rgba(63,169,245,1);
font-size: 8vw;
visibility: visible;
position: absolute;
top: -8vw;
left: 5vw;
}

.preisinfoanzeigen .iconboxen {
left: 60vw;
width: 25vw;
height: 25vw;
top: 11vw;
}

.preisinfoanzeigen .preistextboxen {
margin: 9vw 0px 0px -1vw;
font-size: 5vw;
width: 30vw;
display: block;
}

.preisinfoanzeigen #basistext, .preisinfoanzeigen #smarttext, .preisinfoanzeigen #premiumtext {

display: block;
position: relative;
left: 1vw;
top: 0px;
font-family: 'Comfortaa-Regular';
font-size: 5vw;
/* max-height: 90%; */
overflow: scroll;
padding: 0px 2vw;
overflow: scroll;
width: 95%;

}

.preisinfotext h1, .preisinfotext p {
font-size: 5vw !important;
}

.preisinfoanzeigen #smarttext, .preisinfoanzeigen #premiumtext {
-webkit-box-shadow: initial;
-moz-box-shadow: initial;
box-shadow: initial;
}

.allepreise{
bottom: 4vw;
height: 8vw;
font-size: 5vw;
padding-top: 2vw;
top:initial;
display:block;
}

.preisinfotext{
padding-bottom:18vw !important;
}

}

@media only screen and (orientation : landscape){ 

#iphonewebbern{
position:absolute;
left:36vw;
top:5vh;
}

#iphonewebbern a{ 
text-decoration:none;
font-size:7vh;
font-family: 'Comfortaa-Regular', Comfortaa, sans-serif;
color:rgba(59,68,85,1);
}

h1,h3{
padding:0px;
margin:4vh 0px;
}

h3{
padding:0px;
margin:4vh 2vh;
font-size: 6.8vh;
text-align:center;
}

h2{
padding:0px;
margin:4vh 2vh;
}

.obertitel{
font-size:6.8vh;
}

#contentbox{
position: relative;
top: 0px;
width: 100vh;
overflow: hidden;
margin: 0px auto 0px auto;
padding: 0px 0px 0px 0px;
background-color: #ffffff;
}

.abstand{
position: relative;
top: -16vh;
width: 100%;
height: 18vh;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#navibox{
position: fixed;
top: 0px;
width: 100vw;
height: 18vh;
background-color: rgba(265, 265, 265, 1);
left: 0px;
}

#mainnavibox{
position: absolute;
top: 18vh;
left: 0vh;
background-color: rgba(265, 265, 265, 1);
transform:scale(1,0);
transition:transform 1s;
transform-origin: top;

}

#mainmenue{

}

.icon{
position:absolute;
box-sizing:border-box;
margin-top:1.5vh;
margin-left:2vh;
width:12.5vh;
height:12.5vh;
background-size: 100%;
background-position:0.vh 0.vh;
background-repeat: no-repeat;
border:0.6vh solid #01b9ff;
box-shadow:3px 3px 23px rgba(139,136,143,0.7);
border-radius:2vh 2vh 2vh 2vh;
cursor:pointer;
}

.verlink{
margin-top: -7vh;
position: relative;
box-sizing: border-box;
width: 45vw;
left: 2vw;
top: 8vh;
height: 15vh;
border: solid 0.1vh #119cce;
border-radius: 5vh 5vh 5vh 5vh;
box-shadow: 3px 3px 23px rgba(139, 136, 143, 0.7);
background-position: 100%;
color: #06aeee;
font-family: 'Comfortaa-Regular', 'Roboto', sans-serif;
text-align: center;
padding-right: 3vh;
padding-left: 3vh;
}


.zwischenraum{
}

.umsmenu{
width:100vw;
background-color: white;
height:100vh;
}

.menueweite{
box-sizing: border-box;
text-align: center;
font-size: 9vh;
margin-left: 10vh;
position: relative;
top: 1.5vh;
}

#logobox{
position: absolute;
left: 5vh;
top: 3vh;
box-sizing: border-box;
width: 13vh;
height: 13vh;
background-image: url("../img/logo_smart.svg");
background-size: 105%;
background-position: 0vh 0vh;
background-repeat: no-repeat;
}

.listenbildli{
position: absolute;
left: 85vw;
top: 6vh;
height: 11vh;
width: 11vh;
}

.listenstrichli{
position: relative;
left: 10%;
top: 0%;
height: 10%;
width: 85%;
margin-bottom: 20%;
background-color: #04a6e3;
-moz-border-radius: 1em 1em 1em 1em;
-webkit-border-radius: 1em 1em 1em 1em;
border-radius: 1em 1em 1em 1em;
transition: -webkit-transform 0.5s;
transition: -ms-transform 0.5s;
transition: -moz-transform 0.5s;
transition: -o-transform 0.5s;
transition: transform 0.5s;
}

@-webkit-keyframes id1
	{
	0% {left:0px;}
	0.001% {left:0px}
	32% {left:840px;}
	32.001% {left:5555555340px;}
	65% {left:-5555555660px;}
	65.001% {left:-1160px;}
	99.001% {left:0px;}
	100% {left:-0px;}
	}
@-webkit-keyframes id2
	{
	0% {left:-5555555660px;}
	0.001% {left:-1160px;}
	32% {left:0px;}
	32.001% {left:0px}
	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:0px}
	99.001% {left:840px;}
	100% {left:840px;}
	}
	
#homebox,#projektebox{
top:18vh;
}

#homebox p{
font-size: 70%;
line-height: 120%;
width:96%;
padding-left:2%;
}

#slidestow{
position: relative;
height: 90vh;
width: 90vh;
left:0vh;
top:-40vh;
padding: 0px 0px 0px 20px;
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: 100%;
background-position: 100%;
background-repeat: no-repeat;
position: absolute;
top: 0px;
}

.hometitel{
position: relative;
top: 90vh;
}

#texthome{
left:0px;
width:100vh;
}

#textlinks,#textmitte,#textrechts{
clear:both;
left: 0;
width: 100%;
height: auto;
padding: 0px 1% 0px 1%;
color: #818a90;
font-family: 'Comfortaa-Regular', tahoma, verdana;
}

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

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

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

#textmitte, #textrechts{
margin-top:10vh;
}

#kunden{
left:0px;
width:100vh;
}

#kunden .tablecell{
position: relative;
margin:0px auto;
width: 300px;
}

#kunden .tablerow{

}

#kunden .tablerow.klink{
height:114px;
}

.hallo{
width:100%;
opacity:1.0;
}

.kundeneins{

}

.kundenzwei{
top:50px;
}

.kundendrei{
top:100px;
}

.klonk, .klink{
font-size:20px;
}

.klink.kundeneins{
top: -401px;
}

.klink.kundenzwei{
top: -243px;
}

.klink.kundendrei{
top: -79px;
}

.unvollstaendig1{
top:-2px !important
}

.schatten{
position: relative;
top: 0px;
box-shadow: 10px 10px 5px #888888;
height: auto;
height:initial;
width: 98%;
padding-bottom:4vw;
}

#teambilder{
position: relative;
/* top: -48vh; */
left: 1vh;
width: 98vh;

margin: 0px auto 0px auto;
/* zoom: 1; */

}

.teambildbox{
width: 98%;
margin-bottom:0px;
}

.teamboxbild{
width:100%;
}

.teamtext{
position: relative;
left: 0px;
width: 80vh;
margin-bottom: 4vh;
}

#ftext{
position: relative;
font-family: 'Comfortaa-Regular', 'Muli', "Century Gothic", "Apple Gothic", AppleGothic;
color: #ffffff;
font-weight: normal;
font-style: normal;
font-size: 3.8vh;
background-color: rgba(0,158,227,0.6);
padding: 10px 0px 10px 10px;
margin-bottom: 8vh;
}

#dtext{
position: relative;
font-family: 'Comfortaa-Regular', 'Muli', "Century Gothic", "Apple Gothic", AppleGothic;
color: #ffffff;
font-weight: normal;
font-style: normal;
font-size: 4vh;
background-color: rgba(0,158,227,0.6);
padding: 10px 0px 10px 10px;

}

#knowhow h3{
margin-top:-50px;
}


#knowhow .tabelle, #knowhow .tablerow, #knowhow .tablecell{
display:inline-block;
}

#knowhow p, #preisebox p, .telefon, #coidinhalt p, .kontaktformular p{
font-size: 6vh;
line-height: 120%;
width:96%;
padding-left:2%;
text-decoration:none;
}

.telefon{
color: #616f79;
}

#preisebox{
top:-4vw;
}

.moneey{
border: 1px solid #9ab1c1;
}

.geld {
width:98vh;
font-size:4vh;
color: #616f79;
border:0px none;
}

#preisliste{
position: relative;
width: 98vh;
left: 1vh;
}

.log{
position:relative;
max-width:98%;
overflow:hidden;
}

.log img{
width:100%;
margin:0px auto;
}

#loganima img{
left: 6vh;
}
#animavisit img{
left:25vh;
}

#logseel img{
left:-5vh;
}

#seelbrosch img{
left:-30vh;
}

#logpro img{
left:8vh;

}

#flyerpro img{
left:15vh;
}

#gutsch img{
left:40vh;
}
#logschm img{
left:80vh;
}

#logtrogr img{
width: 35%;
left: 10vh;
top: -12vh;
}

#logtrokl img{
left: 30vh;
top: -8vh;
}

#auto img{
width: 100%;
left: 1vh;
top: -4vh;
}

#logequigr img{
top: 10vh;
width: 50%;
}

#logequikl img{
top: -15vh;
left: 50vh;
}

#bripap img{
left: 10vh;
top:-8vh;
}

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

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

textarea{
height:6em;
}

.buttondings{
font-size:6vh;
}

.sendeknopf1{
padding: 5px 8vh 5px 8vh;
}

.sendeknopf2{
padding: 5px 4vh 5px 4vh;
}

#preiseinhalt {
position: relative;
z-index: 2;
}

#rutschboxen {
margin: 10vh 0px -10vh 0px;
position: relative;
height: 256vh;
}

.rutschbox{
border-left:1px solid rgba(0,158,227,1);
}

.langsam{
	-webkit-transition:transform 0.5s, width 0.5s, margin 0.5s;
	-webkit-transition-timing-function: ease;
	-moz-transition:transform 0.5s, width 0.5s, margin 0.5s;
	-moz-transition-timing-function: ease;
	-o-transition:transform 0.5s, width 0.5s, margin 0.5s;
	-o-transition-timing-function: ease;
	transition:transform 0.5s, width 0.5s, margin 0.5s;
	transition-timing-function: ease;
	}

#element1 {
display: flex;
width: 80%;
height: 80vh;
/* float: left; */
margin: 0px 8% 8vh 10%;
-webkit-box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
-moz-box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
}

#element2 {
display: flex;
width: 80%;
height: 80vh;
/* float: left; */
margin: 0px 8% 8vh 10%;
-webkit-box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
-moz-box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
}

#element3 {
display: flex;
width: 80%;
height: 80vh;
/* float: left; */
margin: 0px 8% 0vh 10%;
-webkit-box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
-moz-box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
box-shadow: 1vh 1vh 0.5vh 0px rgba(179,175,179,1);
}


	#element1.amanfang{
	/*startposition*/
	transform:translate(100vh,0px);
	}
	
	#element2.amanfang{
	/*startposition*/
	transform:translate(-100vh,0px);
	}
	
	#element3.amanfang{
	/*startposition*/
	transform:translate(100vh,0px) rotate(360deg);
	}
	
.preisart {
position: absolute;
top: -4vh;
border-radius: 0px 0px 10vh 0px;
left: -1px;
width: 100%;
height: 10vh;
background-color: rgba(188,227,250,1);
border: solid 1px rgba(0,158,227,1);
font-family: 'Comfortaa-Regular';
font-size: 8vh;
text-align: center;
color: rgba(63,169,245,1);
padding-top: 0vh;
}

.infobutton ,.allepreise{
position: absolute;
top: 64vh;
left: 10%;
text-align: center;
width: 80%;
height: 10vh;
background-color: rgba(0,158,227,1);
color: rgba(255,255,255,1);
border-radius: 10vh;
font-family: 'Comfortaa-Regular';
font-size: 8vh;
padding-top: 0.5vh;
border: solid 0.2vh rgba(188,227,250,1);
cursor: pointer;
}

.preistextboxen {
margin: 51vh auto 0px auto;
font-family: 'Comfortaa-Regular';
font-size: 8vh;
text-align: center;
}

.iconboxen {
position: absolute;
width: 36vh;
height: 36vh;
border-radius: 18vh;
background-color: rgba(0,158,227,1);
left: 28%;
top: 11vh;
display: flex;
}



.premiumtext #element2, .premiumtext #element1, .basistext #element2, .basistext #element3, .smarttext #element1, .smarttext #element3 {

display: none;
}

.premiumtext #element3, .basistext #element1, .smarttext #element2 {
width: 90%;
display: block;
position: relative;
top: 0px;
height: auto;
transform: translate(0px,0px) rotate(0deg);
left: -3vh;
}

.premiumtext #element3 .infobutton::after, .basistext #element1 .infobutton::after , .smarttext #element2 .infobutton::after  {
content: "x";
width: 5%;
height: 8vh;
color: rgba(63,169,245,1);
font-size: 8vh;
visibility: visible;
position: absolute;
top: -8vh;
left: 5vh;
}

.preisinfoanzeigen .iconboxen {
left: 60vh;
width: 25vh;
height: 25vh;
top: 11vh;
}

.preisinfoanzeigen .preistextboxen {
margin: 9vh 0px 0px -1vh;
font-size: 5vh;
width: 30vh;
display: block;
}

.preisinfoanzeigen #basistext, .preisinfoanzeigen #smarttext, .preisinfoanzeigen #premiumtext {

display: block;
position: relative;
left: 1vh;
top: 0px;
font-family: 'Comfortaa-Regular';
font-size: 5vh;
/* max-height: 90%; */
overflow: scroll;
padding: 0px 2vh;
overflow: scroll;
width: 95%;

}

.preisinfotext h1, .preisinfotext p {
font-size: 5vh !important;
}

.preisinfoanzeigen #smarttext, .preisinfoanzeigen #premiumtext {
-webkit-box-shadow: initial;
-moz-box-shadow: initial;
box-shadow: initial;
}

.allepreise{
bottom: 4vh;
height: 8vh;
font-size: 5vh;
padding-top: 2vh;
top:initial;
display:block;
}

.preisinfotext{
padding-bottom:18vh !important;
}

.schiebrechts{
left: 50vw;
top: 0vh;
}

}