html, body, #tabs, form, #fullpage {
	height:100%;
}

#fullpage {
	padding-top:5em;
	box-sizing:border-box;
}

a {
	color:#e4710b;
}

#header {
  background-color: black;
  height: 70px;
  max-height: 70px;
}
#header > div {
	text-align:left;
	position:relative;
}

body.portrait #header > div  {
	width:100%;
	left:0;
}
#header > div > * {
    display: inline-block !important;
}

.navbar-header {
  float: none;
  width: 25%;
  display:table;
  text-align:left;
}



	.navbar-brand {
		float: none;
		padding: 0;
		width:100%
	    display: table-cell;
		height: 100%;
		vertical-align: bottom;
	}

			
		.navbar-brand img {
			display: inline-block;
			margin-top: -2.5em;
			max-width: 100%;
			height: auto;
			min-width: 1px!important;
			position: relative;
		}

		body.portrait .navbar-brand img {
			display: inline-block;
			margin-top: -1em;
		}
		
.navbar-nav {
  margin: 0;  
  background-color: #222222;
  width: 100%;
  text-align: center;
  padding-top: 1em;
  padding-bottom: 1em;
  position:absolute;
  z-index:5;
}



#header .navbar-collapse {
  box-shadow: none;
  display:inline-block;
  margin-top: 2em;
/*  max-width:80%;*/
  white-space:nowrap;
}


ul.nav li {
  display: inline-block;
  float: none;
  max-width: 16%;
  white-space: nowrap;
}

ul.nav .ui-state-active  a {
  border-bottom: 2px solid #e4710b;
}

ul.nav .ui-state-disabled  a {
  color:grey;
}

.nav > li > a:hover, .nav > li > a:focus {
    background-color: #e4710b;
    text-decoration: none;
	color:white;
}

ul.nav li  img {
	max-width:100%;
}

body {
    background-image: url("../assets/bg/section2_bg.jpg");
    background-size: cover;
}

body.fp-viewing-0 {
    background-image: none;
}

path[name], 
g[name],
.cButton {
	cursor: pointer;
}

.container {
    height: 100% !important;
}

.content {
    display: inline-block;
}

#ready_footer {
  display:none;
  text-align: center;
  background-color: rgba(255,255,255,0.5) !important;
  padding-bottom: 50px;
  pointer-events:none;
}

#ready_footer * {
  float: none;
  color: green;
}

.section {
  height: 80%;
  min-height: 80%;
}



#fullpage{
	text-align:center;
	/*margin-top:90px;*/
	max-height:100%;
	
}/*

#modellauswahlt > div {
	height:100%;
}

#styleform .section {
  background-color: white;
  display:inline-block;
}

#styleform .section > div {
	height:100%;
	text-align:left;
	padding-bottom: 140px;

}

.content {
	display:inline-block;
}
**/
#designer h2 {
	font-family:"Roboto";
	font-size:2em;
	font-weight:bold;
	text-transform:uppercase;
	text-align:center;
	width:100%;
	margin-top:62px;
}


/*
 *	Modellauswahl
 */
#modellauswahl > div {
  min-height: 75vh;
  content: 'viewport-units-buggyfill; min-height: 75vh;';
  position: relative;

}

p#cookies {
  bottom: -3em;
  clear: both;
  display: block;
  font-size: 0.8em;
  pointer-events: none;
  position: absolute;
  z-index: -1;
  background-color: rgba(255,255,255,0.5);
  padding: 1em;
}

.modelle.jetstream,
.modelle.blizzard,
.modelle.blizzard .modell {
	float:left;
}

.modelle.jetstream {
    width: 22.5%;
	margin-right:2.5%;
}


.modelle.blizzard {
    width: 75%;
}

.modelle.blizzard .modell {
    width: 25%;
}

#modelle .modelle .modell {
	cursor:pointer;
}
#modelle .modell img {
	width:100%;
}

#modelle:hover .modell img {
	opacity:0.5;
}

#modelle .modelle .modell img:hover  {
	opacity:1;
}

#modelle .modelle .modell p {
	color:grey;
	margin-bottom:0;
}

#modelle .modelle.jetstream .modell p {
  margin-top: 1.5em;
}

.modelle.jetstream .modell {
  margin-left: 0;
  margin-right: -5%;
}

#modelle .modelle .modell:hover p {
	color:black;
}

#modelle .modelle.blizzard .modell {
	background:none transparent;
}

#modelle .modelle.jetstream .modell:hover {
	background: url(../assets/modelle/schatten_jetstream.png) no-repeat center 2.5em white;
	background-size:contain;
}

#modelle .modelle.blizzard .modell:hover {
	background: url(../assets/modelle/schatten_blizzard.png) no-repeat center 2.5em white;
	background-size:contain;
}

.modelle  h4 {
	padding-bottom:0.5em;
	margin-bottom:0.5em;
	border-bottom: 1px solid orange;
    width: 100%;
	height:2.75em;
	text-transform: uppercase;
/*	background-size:contain;
	text-indent:-20000px;*/
}


.modelle.jetstream > h4 {
  /*  background: url("../assets/modelle/jetstream_logo.png") no-repeat scroll 0 0 lightgrey;
	background-size:contain;*/
}

.modelle.blizzard > h4 {
	/*background: url("../assets/modelle/blizzard_logo.png") repeat-x scroll 0 0 lightgrey;
	background-size:contain;	   */
}

.modelle .modell h5 {
	color:black;
/*	font-style:italic;*/
	margin-top: 0;
	text-align:center;
}

.modelle .text {
  background-color: white;
  box-sizing: border-box;
  font-size: 0.8em;
  padding: 1em;
  visibility: hidden;
}

.modelle:hover .text {
	visibility:visible;
}

.text {
	color:#ff7f00;
	font-weight:bold;
}

.jetstream .text {
  text-align: left;
  width: 450%;
}

.blizzard .text {
    width: 100%;
}
	
.bottomtext {
    clear: both;
    padding-top: 4em;
}	

#design, #masznehmen. #adresse {
	position:absolute;
}

#designer > form {
    height: 100%;
}

#design {	
	margin-left:0;
	margin-top:0px;
	position:relative;
	z-index:1;
	height:100%;
}

#center_all {

    text-align: center;
	width:100%;
    height: 100%;	
	/*overflow:hidden;*/
}

#center_this {
    display: inline-block;
    position: relative;
	width:100%;
	height: 100%;
	padding-top: 15%;
	max-height: 800px;
}

div#ui {
  top:75%;
  position: absolute;
  width: 100%;
  text-align:center;
  z-index:100;
}

/*#svghtml {
    width: 100%;
	margin:-15% auto 35%;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
}*/



#svghtml {
  overflow: hidden;
  padding-top:15%;
}

body.landscape.suit-0 svg#svgstage {
    /* padding-top: 4em; */
    position: relative;
    top: 2em;
}

#design.rs #svghtml {

}

.landscape #rueckseite,
.landscape #drehen  {
	display:none;
}

	#icon {
		display: inline-block;
		height: 75px;
		position: relative;
		width: 75px;
		cursor: pointer;
		pointer-events: all;
	}

	#drehen img {
	  bottom: 0;
	  height: auto;
	  left: 0;
	  position: absolute;
	  width: 100%;
	}


	#design div#rueckseite {
		bottom: 0;
		left: 0;
		margin-left: 5px;
		margin-right: auto;
		overflow: hidden;
		position: absolute;
		right: 0;
		width: 75px;
		height: 75px;
		z-index: 70;
	}

	.portrait #design.rs  div#rueckseite {
		margin-left: auto;
	}
	
	#design div#rueckseite svg {
		margin-top: -25px;
		width: 150px;
		height: 100px;
		max-height: 7em;
		margin-left: -100%;
	}
	
	.portrait #design.rs  div#rueckseite > svg {

	}
	
	.portrait #design.rs #svghtml > svg {
	  margin-left: -100%;
	}
	
	.portrait  #design.rs #rueckseite svg {
		margin-left: -5px !important;
	}

	
#drehen {
    position: relative;
    text-align: center;
    width: 100%;
    z-index: 100;
	pointer-events:none;
	margin-top:-3vh;
	margin-bottom:3vh;
	content: 'viewport-units-buggyfill; margin-top:-3vh; margin-bottom:3vh;';
}	

	#drehen p {
		bottom: 0;
		font-weight: bold;
		left: 0;
		margin-bottom: -1em;
		position: absolute;
		text-align: center;
		vertical-align: bottom;
		width: 100%;
	}
	
	#drehen_re {
		display:none;
	}

	#design.rs #drehen_re {
		display:inline-block;
	}

	#drehen_vs {
		display:inline-block;
	}
	
	#design.rs #drehen_vs {
		display:none;
	}

	

#Pinsel {
	z-index:50;
	position:absolute;
	pointer-events: none;
}
/*
#png_overlay {
    left: 22px;
    opacity: 1;
    position: absolute;
    top: -6px;
    z-index: 50;
}*/

/*
 *
 */
 
 
 .view.active {
    height: 200%;
    width: 100%;
}
.view {
    left: -50%;
    position: absolute;
    width: 25%;
}

#rs {
  display: block;
  margin-left: 95%;
  margin-top: 75%;
}


.png_overlay {
display:none;
	left: -50%;
	opacity: 1;
	position: absolute;
	top: 5em;
	width: 75%;
	z-index: 50;
}

.png_overlay img {
    height: auto;
    pointer-events: none;
    position: absolute;
    top: 4px;
    width: 100%;
    z-index: 50;
}
	
#graubild {
    left: 4px;
    pointer-events: none;
    position: absolute;
    top: -19px;
	pointer-events:none;
}

#lichter {
    left: 4px;
    pointer-events: none;
    position: absolute;
    top: -19px;
	pointer-events:none;
}

.minput {
	display:none;
	padding:0;
	border:0;
	outline:1px solid black;
}

#colorbox {
	
}

ul#colorlist {
  margin: 0 0 1em;
  padding-left: 0;
  text-align: center;
  white-space: nowrap;
  width: 100%;
}

ul#colorlist li {
    display: inline-block;
    height: 3em;
    margin: 1em;
    text-indent: -20000px;
    width: 3em;
}

ul#colorlist li.cButton {
    border: 1px solid black;
    border-radius: 10%;
    display: inline-block;
    height: 3em;
    margin: 1em;
    text-indent: -20000px;
    width: 3em;
}

ul#colorlist li.cButton.active {
	transform: scale(1.3);
	-webkit-transform: scale(1.3);
}

p.info::before {
    background-color: green;
    border-radius: 50%;
    color: white;
    content: "Tipp!";
    display: inline-block;
    font-size: 1em;
    font-weight: bold;
    height: 1.3em;
    line-height: 1.1em;
    margin-right: 0.5em;
    text-align: center;
    vertical-align: sub;
    width: 3em;
	position: relative;
    top: -0.3em;
}

div#resetclear p {
  margin: 0;
}

#resetclear a {
	cursor:pointer;
}

path.undefined {
	z-index:50;
}

/*
 *	Form
 */
 
#styleform > div#form {
    height: 640px;
    position: absolute;
    text-align: center;
    top: 0;
    width: 100%;
	z-index: 500;
	pointer-events:none;

}


#form > button,
#fertig_alles {
    bottom: 1em;
    cursor: pointer;
    display: inline-block;
    font-size: 2em;
    margin-left: -2.5em;
    position: absolute;
    width: 5em;
    z-index: 6;
}

#fertig_alles {
    bottom: 4em;
	display:inline-block;
}

fieldset p {
  margin-left: 2.2em;
  margin-top: -1em;
  color:black;
}

fieldset  label {
	cursor:pointer;
	font-size: 1em;
	display: inline-block;
	font-weight: bold;
	margin-bottom: 1em;
	margin-left: 2.2em;
	margin-top: 2em;
	max-width: 100%;
	position: relative;
	color:black;

}

input[type=radio], input[type=checkbox] {
    display:none;
}

input[type=radio] + label:before {
    content: "";  
    display: inline-block;  
    width: 3em;  
    height: 3em;  
    vertical-align:middle;
    margin-right: 1em;  
    background-color: white;  
    box-shadow: inset 0px 0.1em 0.1em rgba(0, 0, 0, .3);
    border-radius: 0.5em;  
}

input[type="checkbox"] + label::before {
  background-color: white;
  border-radius: 0.2em;
  box-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.3) inset;
  content: "";
  display: block;
  font-size: 1.5em;
  height: 1em;
  left: -1.2em;
  margin-right: 0.5em;
  position: absolute;
  top: -0.2em;
  vertical-align: middle;
  width: 1em;
}

input[type=radio]:checked + label:before {
    content: "\2022"; /* Bullet */
	font-size:1.5em;
    color:green;
    background-color: white; 
    font-size:1.8em;
    text-align:center;
    line-height:1.5em;
    text-shadow:0px 0px 3px #eee;
}

input[type="checkbox"]:checked + label::before {
    background-color: white;
    color: #FFCC00;
    content: "✔";
    font-size: 1.5em;
    line-height: 1em;
    text-align: center;
    text-shadow: 0 0 3px #eee;
}

/*
 *	Maßnehmen-Formular
 *	Maßnehmen-Formular
 */

 
#styleform .section > div {
  text-align: center;
  background-color:rgba(255,255,255,0.5);
  display: table;
  width: 100%;
  height:100%;
}

#styleform .section > div > div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  width: 100%;
}
 
 
div#masznehmen , div#adresse {
	width: 100%;
    height: 100%;
    position: relative;
    text-align: center;
}
	#imgconatainer {
	  
	  max-height: 75%;
	  text-align: center;
	  width:400px;
	  height:auto;
	}

	#imgconatainer > img {
	  display: inline-block;
	  height: auto;
	  /*padding-top: 30%;*/
	  width: 400px;
	  
	}
	 
	#maszform_schritte button {
		width:50%;
	}

 
	button#stepback {
		float:left;
	}

	button#next, button#finished {
	  float: right;
	}
	
	button#finished {
		display:none;
	}
	input[type='number'] {
		-moz-appearance:textfield;
	}

	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
	}
	
svg#MasznehmenFormular {
	width:480px;
	margin-top: 5em;

}

ol {
  counter-reset: li;
  display: block;
  height: 7em;
  margin: 0;
  padding: 0;
  position: static;
  text-align: center;
  width: 100%;
}

ol li {
  background-color: white;
  border: 1px solid black;
  box-sizing: border-box;
  display: none;
  height: 6em;
  padding: 1.5em;
  position: relative;
  text-align: left;
  width: 100% !important;
}

ol li:first-Child {
	display:inline-block;
}

ol li  label {
  display: inline-block;
  float: none;
  font-weight: bold;
  margin-right: 25%;
  max-width: 100%;
}

ol li p {
  bottom: 0;
  font-size: 0.8em;
  font-style: italic;
  margin-top: 0;
  max-width: 60%;
  position: static;
}

ol li p.links {
	
}

ol li input.minput {
	position:absolute;
	z-index:5;
	right:0.5em;
	top:0.5em;

	display:block;
	font-size:2em;
	padding:0.2em;
	width:25%;
	z-index:550;
	
}

ol li.input::before {
  color: #666;
  content: attr(step-index) "/15";
  display: inline-block;
  font: 1em/0.5em Arial,sans-serif;
  margin-right: 0.3em;
}

/*
 *	Adressangaben
 */
 .landscape .vcenter-landscape,
.vcenter {
 /* display: table;*/
/*    padding-bottom: 0 !important;
    position: relative;*/
}

.landscape .vcenter-landscape > div ,
.vcenter > div {
	/*display:table-cell;
	vertical-align:middle;*/
}


#adresse > div {
	text-align:center;
	width:100%;
}


#adress_felder {
	display:inline-block;
}

#adresse  div ul{
	text-align:left;
	padding-left:0;
}

#adresse  ul li {
	margin-bottom:1.5em;
	list-style-type:none;
}

.adresse.input > label {
    display: inline-block;
    vertical-align: top;
    width: 20%;
	display:none;
}

.adresse.input > input,
.adresse.input > textarea  {
    width: 100%;
	max-width:100%;
	font-size:1.2em;
	padding:0.2em;
	font-family:Verdana;
}

.content h3 {
	font-size: 1.5em;
	margin-top:-3em;
}


#optionen .content, #bestellen .content {
    text-align: left !important;
    padding-left: 10%;
    color: black;
}

#optionen h3 {
    font-size: 1.5em;
    margin-right: 2em;
    margin-top: -2em;
}



/*
 *	Bestellungs-Overlay
 */

 #styleform > div#form >.container {
	pointer-events:none;
	
}

#styleform > div#form >.container > div {
	padding-top:2em;
	background:none transparent;
	pointer-events:none;
}

#styleform > div#form .header h2 {
    display: inline-block;
    margin: 0 0.5em;
    padding: 0;
    width: auto;
	color:lightgrey;
	text-transform:none;
}

#styleform > div#form .buttons {
	pointer-events:auto;
}

#styleform > div#form .header h2.complete:after {
	content:"✓";
	color:lightgrey;

}

#styleform > div#form .header h2.complete.active:after {
	color:green;
}

#styleform > div#form .header h2.active {
	color:#ff7f00;
}

#unvollstaendig li {
  margin-bottom: 1em;
}

.header input {
    color: #ff7f00;
    font-size: 1.7em;
    font-weight: bold;
    pointer-events: auto;
}




#bestellen > div > div {
  padding: 5%;
}

#fertig {
  max-width: 70vw;
  content: 'viewport-units-buggyfill; max-width: 70vw;';
  width: 600px;
}

#fertig h4 {
	color:green;
}

#status {
  height: 100vh;
  min-height: 100vh;
  content: 'viewport-units-buggyfill; height: 100vh; min-height: 100vh;';
  padding-bottom: 120px;
  padding-top: 90px;
}

#status svg {
  margin-bottom: -5em;
  margin-top: -5em;
  max-height:50vh;
  content:'viewport-units-buggyfill; max-height:50vh;';
}


/*
 *	Actionbuttons seite
 */
#actions {
  bottom: auto;
  position: absolute;
  top: auto;
}

#actions > ul {
  margin: 0;
  padding: 0;
}

#actionlist li {
  display: block;
  margin: 0;
  padding: 0;
  cursor:pointer;
}
 
 #actionlist svg {
  height: 4em;
  width: auto;
}

.portrait #actions {
  right: 1em;
  left:auto;
}

.landscape #actions {
	padding-left:1em;
	top:25%;
}