h1 {font-family:Titillium Web;}


BODY, .footer, .buttons {
		background-color: #ffffff;
	/*	background-color: #FAFAFA; */
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Titillium Web ExtraLight Italic'), local('TitilliumWeb-ExtraLightItalic'), url(fonts/Titillium_1.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local('Titillium Web ExtraLight Italic'), local('TitilliumWeb-ExtraLightItalic'), url(font/Titillium_2.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: local('Titillium Web ExtraLight Italic'), local('TitilliumWeb-ExtraLightItalic'), url(font/Titillium_3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'), url(font/Titillium_4.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'), url(font/Titillium_5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Titillium Web Bold Italic'), local('TitilliumWeb-BoldItalic'), url(font/Titillium_6.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: local('Titillium Web Bold Italic'), local('TitilliumWeb-BoldItalic'), url(font/Titillium_7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('Titillium Web ExtraLight'), local('TitilliumWeb-ExtraLight'), url(font/Titillium_8.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */

/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(font/Titillium_10.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin-ext */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(font/Titillium_12.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Titillium_9 */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: local('Titillium Web ExtraLight'), local('TitilliumWeb-ExtraLight'), url(font/Titillium_9.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Titillium_11 */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'), url(font/Titillium_11.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Titillium_13 */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'), url(font/Titillium_13.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.hallo_user {

    position: absolute;
    z-index: 5;
    height: 100%;
    width: 100%;
    top: 24px;
    right: 130px;
    height: 22px;
    width: 100px;
    font-size: larger;
}
.cart {

    position: absolute;
    z-index: 5;
    height: 100%;
    width: 100%;
    top: 24px;
    right: 230px;
    height: 22px;
    width: 100px;
    font-size: larger;
}


/********************
***** ON MENUE *****
*******************/
.main {
    margin: 0 auto;
    display: block;
    height: 100%;
    margin-top: 60px;
}
.mainInner{
    display: table;
    height: 100%;
    width: 100%;
    text-align: center;
}
#sidebarMenu {
    height: 100%;
    position: fixed;
    right: 0;
    width: 292px;
    margin-right: 8px;
    margin-top: 10px;
    transform: translateX(+300px);
    transition: transform 250ms ease-in-out;
    background-color: #0099cc;
    z-index: 100;
    overflow-y: scroll;
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
   /* display: none; */
}
.openSidebarMenu {
display: none;
}
.sidebarIconToggle {
    transition: all 0.5s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 46px;
    right: 30px;
    height: 22px;
    width: 25px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 4px;
    width: 130%;
    background-color: #ffffff; /* FARBE BURGER */
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 4px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 4px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -12px;
}
/********************
**** OFF MENUE *****
*******************/
.orange, .orange a, .orange a:hover, a:visited {
/*
color: #ffab00;
*/
font-size: 1.0em;
white-space: nowrap;
text-decoration: none;
color: black;
}
.blau {
 color: #0099cc;
 }
.rot {
color: #ff0000;
}
.error_message {
text-align: center;
font-weight: 500;
color: #ff0000;
}
.radio-group {
font-size: .8em;
text-align: center;
}

.info_icon {
 position: relative;
 width: 25px; 
 height:25px;
 top:-2px;
 }
 
 .bauteil_pic {
 position: relative;
 width: 60px; 
 height:60px;
 top:-2px;
 }
 input[type="text"]{
 font-family:Titillium Web;
}
/********************************
*** ON SELECT CHECKBOX INPUT ***
********************************/
.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: #0099cc;
  border-radius: 2px;
  border: solid 1px #0099cc;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  float: left;
  color:#ffffff;
  font-family: inherit;
  font-size: 16px;
  font-weight: normal;
  height: 42px;
  line-height: 40px;
  outline: none;
  padding-left: 8px;
  padding-right: 90px;
  position: relative;
  text-align: left !important;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: 220px; } /* BREITE SELECT */
  .nice-select:hover {
    border-color: #0099cc; } /* EUSI FARB */
  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: #0099cc; }
  .nice-select:after {
    border-bottom: 2px solid #ffffff;
    border-right: 2px solid #ffffff;
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
        -ms-transform-origin: 66% 66%;
            transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; }
  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
        -ms-transform: rotate(-135deg);
            transform: rotate(-135deg); }
  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
        -ms-transform: scale(1) translateY(0);
            transform: scale(1) translateY(0); }
  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; }
    .nice-select.disabled:after {
      border-color: #cccccc; }
  .nice-select.wide {
    width: 100%; }
    .nice-select.wide .list {
      left: 0 !important;
      right: 0 !important; }
  .nice-select.right {
    float: right; }
    .nice-select.right .list {
      left: auto;
      right: 0; }
  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; }
    .nice-select.small:after {
      height: 4px;
      width: 4px; }
    .nice-select.small .option {
      line-height: 34px;
      min-height: 34px; }
  .nice-select .list {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    -webkit-transform-origin: 50% 0;
        -ms-transform-origin: 50% 0;
            transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
        -ms-transform: scale(0.75) translateY(-21px);
            transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; }
    .nice-select .list:hover .option:not(:hover) {
      background-color: #0099cc; }
  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: 40px;
    list-style: none;
    min-height: 40px;
    outline: none;
    padding-left: 8px;
    padding-right: 0px;
    width: 216px;
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
    .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
      background-color: #0099cc; }
    .nice-select .option.selected {
      font-weight: bold; }
    .nice-select .option.disabled {
      background-color: transparent;
      color: #999;
      cursor: default; }

.no-csspointerevents .nice-select .list {
  display: none; }

.no-csspointerevents .nice-select.open .list {
  display: block; }

.gango {
line-height: 28px;
float: left;
} 
.abe0 {
top: 0px;
position: relative;
z-index: 5;
}
.abe10 {
top: 10px;
position: relative;
} 
.abe8 {
top: 8px;
position: relative;
z-index: 4;
} 
.abe16 {
top: 16px;
position: relative;
z-index: 3;
}
.mass_eingabe {
top: 24px;
position: relative;
}
.preis_ausgabe {
top: 24px;
position: relative;
color: #0099cc;
font-size: 1.2em;
font-weight: 500;
}

/********************************
*** OFF SELECT CHECKBOX INPUT ***
********************************/

/*********************************
*** ON RADIO INPUT ***
*********************************/
/* HIDE RADIO */
[type=radio] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=radio] + img {
  cursor: pointer;
  padding: 5px;
  width: 40% !important;
} /*
[type=radio] + img, hover {
    background-color: #0099cc; }
*/
/* CHECKED STYLES */
[type=radio]:checked + img {
  outline: 4px solid rgba(255,171,0,1);
/*  background-color: rgba(255,171,0,1); */
padding: 5px;
  border-radius: 7px;
}

.radio_links { float: left; width: 100%;display: table-cell; vertical-align: middle;}
.radio_une { float: left; width: 100%;height: 10px;}
/*********************************
*** OFF RADIO INPUT ***			
*********************************/

/*********************************
*** ON CHECKBOX INPUT ***
*********************************/
/* HIDE CHECKBOX */
[type=checkbox] { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* IMAGE STYLES */
[type=checkbox] + img {
  cursor: pointer;
  padding: 5px;
  width: 40% !important;
} /*
[type=radio] + img, hover {
    background-color: #0099cc; }
*/
/* CHECKED STYLES */
[type=checkbox]:checked + img {
  outline: 4px solid rgba(255,171,0,1);
/*  background-color: rgba(255,171,0,1); */
padding: 5px;
  border-radius: 7px;
}

/*********************************
*** OFF CHECKBOX INPUT ***			
*********************************/

/*********************************
*** ON RESPONSIVE SEITENLAYOUT ***
*********************************/
* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding-top: 10px;
}

.header {
/*  color: #0099cc;     */
  background-color: #ffab00;
  color: #ffffff;
  padding: 1px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

.aside {
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.footer {
  background-color: #0099cc;
  color: #ffffff;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}

/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
/*  .col-s-2 {width: 16.66%;} */
  .col-s-2 {width: 20.00%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
/*  .col-s-6 {width: 50%;} */
  .col-s-6 {width: 55%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
  .container {width:100%;}
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
 /* .col-2 {width: 16.66%;} */
  .col-2 {width: 20.00%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
/*  .col-6 {width: 50%;} */
  .col-6 {width: 55%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
  .container {width:100%;}
}
/**********************************
*** OFF RESPONSIVE SEITENLAYOUT ***
**********************************/

/*********************************
****** ON BILD UND SLIDE *********
*********************************/
.img-responsive {
    display: block;
    max-width: 100%;
    height: auto;
}
  margin: 0;
}

* {
  box-sizing: border-box;
}

img {
  vertical-align: middle;
}

/* Position the image container (needed to position the left and right arrows) */
.container {
  position: relative;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 14px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* Container for image text */
.caption-container {
  text-align: center;
  font-size: 24px;
  background-color: #ffffff;
  padding: 0px 0px;
  color: #000000
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
}
.kolone {
  float: left;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.4;
}

.active,
.demo:hover {
  opacity: 1;
}
.center {
  text-align: center;
  color: #000000;
/*  color: #fb9904;*/
}
/*********************************
***** OFF BILD UND SLIDE *********
*********************************/

/****************************
***** ON ACCORDION ********* WIDTH
****************************/
.accordion:after {
    content: '+'; 
    color: #ffffff;
    float: right;
    margin-left: 5px;
    margin-top: -8px;
    font-size:1.5em;
    font-weight: 300;
}

.active_acc:after {
    content: "–"; 
}

em span {color: firebrick}
.wrap { 
	max-width: 220px; 
	float: right;
	min-width: 220px !important;
	z-index: 5000000 !important;
}

/* Balken für die Überschriften */
.accordion {
    background-color: #0099cc;
    color: #ffffff;
    cursor: pointer;
    padding: 0.6em;
    transition: 1s;
    border-bottom: 8px solid white;
}

/* Hintergrund für die Überschriften */
.active_acc, .accordion:hover {
    background-color: #0099cc;
    border-bottom: 8px solid white;
}

/* Accordion-Blöcke, zu Anfang geschlossen durch max-height: 0 und overflow: hidden */
.board {
    padding: 0px 6px 0px 6px;
    font-size: 14px;
/*	border: solid 2px #0099cc; */
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.2s ease-out;
}
/*.board img {width: 100px; display: block; margin:1ex auto}*/

/****************************
***** OFF ACCORDION *********
****************************/

/****************************
*** ON MODAL ANSICHTEN ******
****************************/

.modalDialog {
 position: Fixed;
 font-family: Verdana, Sans-Serif;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-color: rgba(0, 0, 0, 0.6);
 z-index: 99999;
 opacity: 0;
 transition: opacity 400ms ease-in;
 pointer-events: None;
}

.modalDialog:target {
 opacity: 1;
 pointer-events: Auto;
}

.modalDialog > div {
 width:40%;
 position: relative;
 margin: 10% Auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background-color: #FFFFFF;
 cursor: Default;
}

.close {
 background-color: #0099cc;
 color: #FFFFFF;
 line-height: 40px;
 position: Absolute;
 right: 8px;
 text-align: Center;
 top: 8px;
 width: 40px;
 text-decoration: None;
 font-weight: Bold;
 border-radius: 20px;
}

.close:hover {
 background-color: #0099cc;
} 

/****************************
*** OFF MODAL ANSICHTEN ****
****************************/

/****************************
******* ON 3d Ansichten ****
****************************/

.scene {
 
  width: 300px;
  height: 200px;
  border: none;
  margin: 20%;
  perspective: 400px;
}

.box {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  transition: transform 2.5s;
}

.box.show-front  { transform: translateZ( -50px) rotateY(   0deg); }
.box.show-back   { transform: translateZ( -50px) rotateY(-180deg); }
.box.show-right  { transform: translateZ(-150px) rotateY( -90deg); }
.box.show-left   { transform: translateZ(-150px) rotateY(  90deg); }
.box.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
.box.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }


.box__face {

  position: absolute;
  border: none;
  font-size: 40px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.box__face--front,
.box__face--back {
  width: 300px;
  height: 200px;
}

.box__face--right,
.box__face--left {
  width: 200px;
  height: 200px;
  left: 50px;
}

.box__face--top,
.box__face--bottom {
  width: 300px;
  height: 200px;
  top: 0px;
}

.box__face--front  {background: url(../images/3d/Front.jpg);}
.box__face--right  {background: url(../images/3d/Stirn.jpg);}
.box__face--back   {background: url(../images/3d/Back.jpg);}
.box__face--left   {background: url(../images/3d/Stirn.jpg);}
.box__face--top    {background: url(../images/3d/Top.jpg);}
.box__face--bottom {background: url(../images/3d/Top.jpg);}

.box__face--front  { transform: rotateY(  0deg) translateZ(100px);
  background-size: contain; }
.box__face--back   { transform: rotateY(180deg) translateZ(100px); }

.box__face--right  { transform: rotateY( 90deg) translateZ(150px); }
.box__face--left   { transform: rotateY(-90deg) translateZ(150px); }

.box__face--top    { transform: rotateX( 90deg) translateZ(100px); }
.box__face--bottom { transform: rotateX(-90deg) translateZ(100px); }

label { margin-right: 10px; }

/****************************
******* OFF 3d Ansichten ****
****************************/

/****************************
**** ON FLEXBOX BAUTEILE ****
****************************/

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space 
  https://www.w3schools.com/cssref/playit.asp?filename=playcss_justify-content&preval=flex-end
  */
  justify-content: center;
  
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex-item {
  background: rgba(255,255,255,1);
  padding: 5px;
  width: 200px;
  height: 284px;
  margin-top: 4px;
  line-height: 22px;
  color: black;
  font-weight: 500;
  font-size: 1em;
  text-align: left;
}
.total {
  background: rgba(255,255,255,1);
  padding: 5px;
  margin-top: 10px;
  line-height: 36px;
  color: black;
  font-weight: 500;
  font-size: 1.4em;
  text-align: center;
}

/****************************
*** OFF FLEXBOX BAUTEILE ****
****************************/

.custom-select {
	line-height: 50px;
}

.spinn {	
position: relative;
margin-top: 10%;
margin-left: 40%;
}
.spinnWieHoch {
  width: 10px;
  height: 274px;
}
.swutsch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 24px;
}

.swutsch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.rutscher {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.rutscher:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .rutscher {
  background-color: #0099cc;
}

input:focus + .rutscher {
  box-shadow: 0 0 1px #0099cc;
}

input:checked + .rutscher:before {
  -webkit-transform: translateX(14px);
  -ms-transform: translateX(14px);
  transform: translateX(14px);
}

/* Rounded rutschers */
.rutscher.round {
  border-radius: 34px;
}

.rutscher.round:before {
  border-radius: 50%;
}
.rechts {
float: right;
}
.orgel {
line-height: 30px;
}
.orglete {
line-height: 10px !important;
}

/* EINBLENDEN */
.slowup {
    animation: einblenden 2.5s;
    -moz-animation: einblenden 2.5s; /* Für Firefox */
    -webkit-animation: einblenden 2.5s; /* Für Safari und Chrome */
    -o-animation: einblenden 2.5s; /* Für Opera */
}
@keyframes einblenden {
    from { opacity:0; }
    to { opacity:1; }
}
@-moz-keyframes einblenden { /* Für Firefox */
    from { opacity:0; }
    to { opacity:1; }
}
@-webkit-keyframes einblenden { /* Für Safari und Chrome */
    from { opacity:0; }
    to { opacity:1; }
}
@-o-keyframes einblenden { /* Für Opera */
    from { opacity:0; }
    to { opacity:1; }
}

/* OVERLAY */
#grayout {
   position: fixed;
   right: 0px;
   top: 0px;
   height: 100%;
   width: 100%;
   background-color: #ffab00;/*#0099cc;*/
   opacity: 0.5;
   z-index: 10;
/*   border: 8px solid #0099cc;*/
}
#grayout {
   filter: alpha(opacity=50);
}
 
* html #grayout {
   position: absolute;
}
/* MODAL ON */



/* If you like this, be sure to ❤️ it. */
.wrappmodal {
  height: 100vh;
  /* This part is important for centering the content */
  display: flex;
  align-items: center;
  justify-content: center;
  /* End center */
  background: -webkit-linear-gradient(to right, #834d9b, #d04ed6);
  background: linear-gradient(to right, #834d9b, #d04ed6);
}

.wrappmodal a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #585858;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;   
  background-color: rgba(255,171,0,0.55);/*#0099cc;*/
  opacity: 0.5;
  z-index: 10;
  transition: all .0s;
}

.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__content {
  border-radius: 4px;
  position: relative;
  width: 80%;
  max-width: 90%;
  background: #fff;
  padding: 1em 2em;
}

.modal__footer {
  text-align: right;
  a {
    color: #585858;
  }
  i {
    color: #d02d2c;
  }
}
.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #585858;
  text-decoration: none;
}





/* MODAL OFF  */