@import url('https://fonts.googleapis.com/css?family=News+Cycle&display=swap');
* {
    font-family: 'News Cycle', sans-serif;
}        

.spalte {
    width:640px; margin:auto;
}
        
.slides {
  display: none; display: block;
  /*display: block; clear:both;*/
  width: 1000px; height:400px;
}

.slides img {
  position: absolute; right:0px; bottom:0px; z-index:-10;
}
.animate-left {
  position: relative;
  animation: animateleft 1s
}

@keyframes animateleft { 
  from { left :-600px; opacity:0 } to { left:0; opacity:1 }
}



h2 {
    font-size: 24px;
    line-height: 32px;
    margin: 0px;
}

h3 {
    font-size: 18px;
    line-height: 20px;
    margin: 5px 0px;
}
.flex-container {
    display:flex; 
    width: 1000px;
    justify-content: center;
    /*border: solid 1px red; */
    
}

.flex-item {
    /*border: solid 1px lightgrey;*/
    width:24%;
    margin:10px;
    text-align: center;
}

.flex-item img {
   height:160px; width:auto;
}

#topMenu a.menuItem { position: relative;
    text-decoration: none; color: grey; display: inline-box; padding: 2px 10px; font-size: 16px; font-weight: bold;
}

#topMenu ul.menu1 {
    list-style-type:none;
}

#topMenu ul.menu1 li {
    float: left;
}

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

ul.menu2 {
    position: absolute;
    z-index: 10;
    display:none;
}

ul.menu2 li {
    background-color: rgb(245,245,245);
    clear: both;
    width:230px;
}

#topMenu ul.menu1 li:hover ul.menu2 {
    display:block;
}

a.info {
    background-color: rgb(245,245,245);
    border: solid 1px rgb (220,220,220);
    display: inline-block; padding:2px 10px;
    text-decoration: none; color: rgb(128,128,128);
    cursor: pointer;
}

.breadcrumbs a {
    text-decoration: none; color: rgb(160,160,160);
    font-size: small; 
}

.breadcrumbs a::before { content: '\25BA'; }
#fixMenu a {
    cursor:pointer;
    color: white;
    text-decoration: none;
    display: inline-block;
    padding: 2px 10px;
}

#cart {
    border:red 2px lightgrey;
    position: fixed; width:400px; top:0px; right:0px; bottom:0px;
    background-color: rgb(245,245,225);
    display: none;
    padding: 10px;
}

.fromRight {
  animation: fadeIn 1s
}

@keyframes fadeIn { 
  from { width: 0px;  } to { width: 400px;  }
}


.toRight {
  animation: fadeOut 1s
}

@keyframes fadeOut { 
  from { width: 400px;  } to { width: 0px;  }
}

.rOnly {
    border: solid 1px white;
    border-style: none;
}

.confirmation {
    width: 500px; height:300px; border: solid 2px rgb(197,171,91); background-color: white;
    position: fixed; left:50%; margin-left:-250px; top:50%; margin-top:-150px;
    padding: 10px;
}

.warenkorb th, .warenkorb td {
    /*font-size: small;*/
    vertical-align:top;
}

td {
    position: relative;
    
}

.formLabel {
    background-color: rgb(235,235,225); vertical-align:top; font-weight: bold; padding: 2px 5px;
    width: 120px;
}

.error_msg {
    width:650px; position: absolute; top:0px; z-index:20; 
    border: solid 1px red; background-color: lightyellow; 
    padding:5px; font-size: small;
}

.rg .lgadrBlock, .rg .packBlock, .rg .postBlock {
    display: none;
}

.lgadr .rgBlock, .lgadr .packBlock, .lgadr .postBlock {
    display: none;
}

.multiTabForm {
    border: solid 1px lightgrey; 
    position: fixed; top: 20px; right:20pc; bottom:20px; left: 20px;
}   
        
div.nav {
    height:30px;
}
.multiTabForm > input, .multiTabForm > ul > li {
    display: none; width: 90%; padding: 10px; background: white;
}
.multiTabFormNavContainer {
    background-color: lightgrey;
}
.multiTabFormContentContainer {
    display:block; clear: both; padding: 0px; margin: 0px;
}
#mtf1:checked ~ ul .tab1,
#mtf2:checked ~ ul .tab2,
#mtf3:checked ~ ul .tab3,
#mtf4:checked ~ ul .tab4,
#mtf5:checked ~ ul .tab5 { display: block; }

.nav label { float: left; padding: 2px 10px; border-right: 1px solid silver; background: lightgrey; }

.nav label:hover { background: darkgrey; color: black; cursor: pointer;}
.nav label:active { background: white;}

#mtf1:checked ~ div .nav label[for="mtf1"],
#mtf2:checked ~ div .nav label[for="mtf2"],
#mtf3:checked ~ div .nav label[for="mtf3"],
#mtf4:checked ~ div .nav label[for="mtf4"],
#mtf5:checked ~ div .nav label[for="mtf5"] { background: white; position: relative; border-bottom: none; }