@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,300');
html,body { 
font-family: 'Open Sans', verdana, arial; 
padding:0;
margin:0; 
font-size: 16px;
background:#E6E6DE;
color:rgb(124,99,67); 
text-align:left;}

a:link, a:active , a:visited  {  text-decoration : none ; color:rgb(124,99,67)}
a:hover  {  text-decoration : none ; color:rgb(223,0,0); }
a.presse:link , a.presse:active , a.presse:visited  {  text-decoration : none ; color:#111 }
a.presse:hover  {  text-decoration : none ;font-style : normal ; color:rgb(223,0,0); line-height: 18px}
a.kollektion:link , a.kollektion:active , a.kollektion:visited  {  text-decoration : none ; color:#111 }
a.kollektion:hover  {  text-decoration : none ; font-style : normal ; color:rgb(223,0,0); line-height: 18px}
a.kollektion1, a.kollektion1:link, a.kollektion1:active, a.kollektion1:visited   {display:block;width:150px;height:32px;text-decoration:none;text-align:center;margin:0;background:url(../img/down_arrow.png) center center no-repeat}
a.kollektion1:hover {display:block;background:url(../img/down_arrow_hover.png) center center no-repeat}
	  
img{border:none;display: block; }
.rechts {text-align:right;}
.fett { font-weight:bold; }
.clear {display:block; height:0; overflow:hidden; clear:both;}
#content_background {width:100%;background:#E6E6DE; } 
#logo_content { position:fixed;top:0;left:0;margin:0;padding:0;background:#000;width:100%;height:110px;z-index:1; }
#logo{ padding:7px 0 0 0;background:transparent url(../bilder/logo_seite_1.png) center center no-repeat;width:100%;height:101px;z-index:2; }
#logo_content_linie { position:fixed;margin:110px auto 0 auto;padding:0;background:rgb(188,190,197);width:100%;line-height:23px;height:23px; }
#layout { margin:0;overflow: hidden;text-align:left;padding:0;width:280px; background:transparent; }
#content { margin:150px auto 40px auto;padding:10px;overflow: hidden;text-align:left;width:920px;background:transparent;}
#rechte { position:fixed;bottom:0;text-align:center;vertical-align:middle;line-height:23px;margin:0;padding:0;background:rgb(188,190,197);width:100%;height:23px;color:#000;}
#rechte a, #rechte  a:link, #rechte a:hover, #rechte a:visited , #rechte a:active{font-size:12px;color:#fff; }
#inhalt  { float:left;width:980px;overflow:hidden;padding:0 10px 0 10px;vertical-align:top; background:transparent;}
#inhalt_links { float:left;position:relative;width:170px;height:100%;margin:0;padding:20px 5px 0 0;vertical-align:top; background:transparent;}
#inhalt_mitte_3 { float:left;position:relative;width:550px;height:100%;vertical-align:top;margin:0;padding:20px 0 0 0; background:transparent; }
#inhalt_mitte_2 { float:left;position:relative;width:785px;height:100%;vertical-align:top;margin:0;padding:20px 0 0 0; background:transparent; }
#inhalt_rechts { float:right;position:relative;width:235px;min-height:360px;margin:0;padding:20px 0 0 0;vertical-align:top; background:transparent; }
#navigation_links { margin:0 auto 0 auto;width:100%;height:23px;line-height:23px;text-align:center;}
#navigation_links a:link, #navigation_links a:visited, #navigation_links a:active {background:transparent;text-decoration:none;}
#navigation_links a:hover {background:transparent;text-decoration:none;color:rgb(223,0,0);}
#navigation_links .werte {color:#000;text-decoration:none;padding:0;background:transparent;font-weight:normal;}
#box{width: 100%;height: 100%;background-image: url(../bilder/logo_seite_111.png);background-repeat: no-repeat;background-position: center top;position: fixed;}
#bg_grid { position:fixed;top:0;left:0;height:100%;width:100%;background:url(../bilder/grid.png) repeat;z-index:-1;}
#maincontent {position: absolute;top:0;left: 0;z-index: 50;width: 100%;}
.ueberschrift { padding:0;font-size:34px;margin:0;font-weight:bold; }
.kollektion_navi {float:left;width:125px;margin:40px 0 40px 0;padding:0 0 0 25px;border-right:1px solid rgb(188,190,197); }
.kollektion_breite_liste {text-align:right;padding:1px 40px 1px 0;}
.kollektion_breite_liste_auswahl {text-decoration:none;background:#fff;color:rgb(223,0,0);font-size:18px;font-weight:bold;} 
.kollektion_breite {float:left;width:700px;margin:10px 10px 50px 50px;}
/*.wein_jahrgang_mitte { float:left;width:100%;text-align:center;margin:-20px 0 40px 0; }*/
.wein_jahrgang_mitte { float:left;text-align:center;padding:7px 0 0 260px;margin:0;height:40px;}
.wein_bezeichnung { padding:10px;font-size:16px;font-weight:600;line-height:18px;color:#000}
.wein_art { margin:8px 0 8px 10px;font-size:14px;line-height:15px;font-weight:200; }
.wein_info {margin:8px 0 8px 10px;font-size:10px;font-weight:200;}
.wein_sulfide {margin:3px 0 0 10px;font-size:12px;line-height:14px;font-weight:200;}
.wein_einheitspreis {margin-top:-5px;font-weight:200;font-size:11px;font-weight:200;}
.wein_inhalt {margin:8px 0 8px 10px;font-size:16px;font-weight:200;}
.wein_preis_box { position:relative;bottom:0;margin-top:10px;background:rgba(0,0,0,0.8);color:#fff;padding:0 0 8px 10px}
.wein_preis { font-size:24px;}
.wein_bestellung {margin:0;padding:0 3px 2px 5px; }
.wein_bestellung_menge {width:50px;vertical-align: text-top;font-size:12px;padding:0;}
.wein_bestellung_auswahl {float:left;background:#ff0000;margin:0;padding:2px 3px 2px 5px;vertical-align:top;text-align:left;font-size:12px;line-height:12px;font-weight:normal; }
.wein_lupe { float:right;background:url(../bilder/lupe.png) no-repeat;padding:0 20px 0 0;width:30px;height:30px;}
.wein_lupe_suchen { margin:0 0 0 -5px;padding:24px 34px 0 0;text-align:right;font-size:10px;font-weight:bold; }
.wein_suchen { width:100%;padding:0;text-align:left;font-size:22px;font-weight:bold; }
.linie_waagrecht { height:1px;border-bottom:1px solid rgb(188,190,197);}
.hoehe_20 { height:20px;}
.hoehe_40 { height:40px;}
.wein-box { margin:10px;padding:0;background:#fff;}
.wein-box-img { padding:10px;background:tranparent;}

 .flex-container {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}

.panel-wein-box {

  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;

  width: 30%;
  padding:0;
  float: left;
  margin: 1.666666666666% 0 1.666666666666% 0;
}
#content_ajax { float:left;width:100px;margin:0;padding:0;z-index:9998;}
#warenkorb_menu { float:left;width:100px;margin:0;padding:0;}
#warenkorb_anzeige { float:right;padding:0;width:122px;height:100px;}
.bestellung_endsumme { padding-top:10px;font-size:12px;line-height:13px;color:#666; }
.bestellung_text{ margin:5px 0 0 0;font-size:11px;line-height:11px;color:#666; }
.bestellung_versand{ margin:1px 0 0 0;font-size:11px;line-height:11px;color:#666; }
.bestellung_anfrage{width:100%;background:maroon;color:#fff;fonr-size:16px;font-weight:bold;text-align:center;line-height:26px; }
.warenkorb{ padding: 1px !important; width: 220px; }
.warenkorb_th {font-size:14px;padding:2px 2px 2px 3px;background:#ccc;}
.warenkorb_td {font-size:14px;padding:2px 2px 2px 3px;}}
.dotted { border-bottom:1px dotted rgb(124,99,67); }
#registrierung  {margin:5px 0 0 0;padding:0;}
#registrierung  fieldset{margin:0; padding:0; border:0;}
#registrierung  ul{margin:0; padding:0; list-style:none;}
#registrierung  ul li{padding:2px;}
#registrierung  ul li.first{border-top:0; font-size:20px;}
#registrierung  ul li.last{width:100%;border-bottom:0;text-align:left}
#registrierung  label{display:block; float:left; width:120px; line-height:23px; text-align:left; padding-right:5px; margin:0;}
#registrierung  input{font-size:14px;}
#registrierung  input.text{width:130px; margin:0; padding:2px; border:0px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:20px;}
#registrierung  input.checkbox{width:0px; margin:0; padding:2px; border:0px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:20px;}
#registrierung  input.password{width:130px; margin:0; padding:2px; border:0px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:20px;}
#registrierung  input#Vorname{ width:200px; }
#registrierung  input#Vornamel{ width:200px; }
#registrierung  input#Name{ width:200px; }
#registrierung  input#Name1{ width:200px; }
#registrierung  input#Strasse{ width:200px; }
#registrierung  input#Strassel{ width:200px; }
#registrierung  input#Ort{ width:200px; }
#registrierung  input#Ortl{ width:200px; }
#registrierung  input#Land{ width:200px; }
#registrierung  input#Landl{ width:200px; }
#registrierung  input#Email{ width:200px; }
#registrierung  input#Emaill{ width:200px; }
#registrierung  select{ font-size:14px; margin:0; padding:2px; border:0px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:25px;}
#registrierung  select.text{width:100px; margin:0; padding:2px; border:0px solid #fff; border-top:1px solid #b3c3e3; border-left:1px solid #b3c3e3; height:25px;}
#registrierung  input.submit{font-size:14px;padding:4px;cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67);background:#F0F0F0;   }
#registrierung  input.submit:hover { cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(255,0,0); }
#registrieren a:link, #registrieren a:active , #registrieren a:visited  {  font-size:14px;text-decoration : none ; padding:4px; cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67);background:#F0F0F0; }
#registrieren a:hover  { text-decoration : none ; color:rgb(255,0,0);}
#nicht_registrieren a:link, #nicht_registrieren a:active , #nicht_registrieren a:visited  { font-size:14px;text-decoration : none ; padding:4px; cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67);background:#F0F0F0; }
#nicht_registrieren a:hover  {  text-decoration : none ; color:rgb(255,0,0);}
#lieferanschrift a:link, #lieferanschrift a:active , #lieferanschrift a:visited  {font-size:14px;text-decoration : none ; padding:4px;cursor:pointer; border:1px solid rgb(124,99,67);cursor:pointer; background:#F0F0F0;}
#lieferanschrift a:hover  {  text-decoration : none ;  color:rgb(255,0,0);}
#weiter_einkaufen a:link, #weiter_einkaufen a:active , #weiter_einkaufen a:visited  {font-size:14px;text-decoration : none ; padding:4px; cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67);background:#F0F0F0;}
#weiter_einkaufen a:hover  {  text-decoration : none ; color:rgb(255,0,0);}
#weiter_zur_bestellung a:link, #weiter_zur_bestellung a:active , #weiter_zur_bestellung a:visited  {font-size:14px;text-decoration : none ; padding:4px;cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67); background:#F0F0F0; }
#weiter_zur_bestellung a:hover  {   text-decoration : none ; color:rgb(255,0,0);}
#versandkosten_tabelle a:link, #zahlungsarten_tabelle a:link, #versandkosten_tabelle a:active ,  #zahlungsarten_tabelle a:active , #versandkosten_tabelle a:visited , #zahlungsarten_tabelle a:visited  {  text-decoration : none ; font-size:14px; padding:4px;margin:20px 0 0 0;cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67); background:#F0F0F0; }
#versandkosten_tabelle a:hover,#zahlungsarten_tabelle a:hover  {   text-decoration : none ; color:rgb(255,0,0);}


#pageContent{
margin:30px 0 0 0;
}
#loading{
	visibility:hidden;
}

td { padding:1px 0 1px 5px; }

#Kontaktformular  { margin:0;padding:0;}
#Kontaktformular  fieldset{margin:0; padding:0; border:0;}
#Kontaktformular  ul{margin:0; padding:0; list-style:none;}
#Kontaktformular  ul li{padding:2px;}
#Kontaktformular  ul li.first{border-top:0; font-size:20px;}
#Kontaktformular  ul li.last{border-bottom:0;padding:0;margin:30px 0 0 66px;}
#Kontaktformular  label{display:block; width:65px; float:left;  line-height:23px; font-size:12px;text-align:right; padding-right:5px; margin:0;}
#Kontaktformular  input{font-size:16px;height:32px;padding:2px;margin:3px}
#Kontaktformular  select{font-size:16px;height:32px;padding:2px;margin:3px}
#Kontaktformular  textarea{font-size:16px;height:32px;padding:2px;margin:3px}
#Kontaktformular  input.submit{margin:24px 0 0 0;font-size:18px;line-height:32px;padding:3px;cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(124,99,67);background:#F0F0F0;   }
#Kontaktformular  input.submit:hover { cursor:pointer; border:1px solid rgb(124,99,67);color:rgb(255,0,0); }
div.panel {margin:-6px 0 0 0;padding:0;display:none;}



/*------------------*/
h1 {font-size: 36px;}
h2 {font-size: 30px;}
h3 {font-size: 24px;}
h4 {font-size: 18px;}
h5 {font-size: 14px;}
h6 {font-size: 12px;}


section { padding:0;}
section.ausgabe-frame { padding-top:20px;padding-bottom:70px}
.fs14 { font-size:14px;}
.fs16 { font-size:16px;}
.fs18 { font-size:18px;}
.fs20 { font-size:20px;}
.fs22 { font-size:22px;}
.fs24 { font-size:24px;}
.fs26 { font-size:26px;}
.fs28 { font-size:28px;}
.fs30 { font-size:30px;}

.fw200 { font-weight:200;}
.fw300 { font-weight:300;}
.fw400 { font-weight:400;}
.fw500 { font-weight:500;}
.fw600 { font-weight:600;}
.fw700 { font-weight:700;}
.fw800 { font-weight:800;}

.text-extra-bold { font-weight: 800;}
.text-bold { font-weight: 700; }
.text-semi-bold { font-weight: 600; }
.text-medium {font-weight: 500;}
.text-normal {font-weight: 400;}
.text-light {font-weight: 300;}
.text-extra-light {font-weight: 200;}
.text-thin {font-weight: 100;}
.text-center { text-align:center; }

.pt2 { padding-top:2px }
.pt4 { padding-top:4px }
.pt6 { padding-top:2px }
.pt8 { padding-top:8px }
.pt10 { padding-top:10px }
.pt12 { padding-top:12px }
.pt14 { padding-top:14px }
.pt16 { padding-top:16px }
.pt18 { padding-top:18px }
.pt20 { padding-top:20px }
.pt22 { padding-top:22px }
.pt24 { padding-top:24px }
.pt26 { padding-top:26px }

.pb2 { padding-bottom:2px }
.pb4 { padding-bottom:4px }
.pb6 { padding-bottom:2px }
.pb8 { padding-bottom:8px }
.pb10 { padding-bottom:10px }
.pb12 { padding-bottom:12px }
.pb14 { padding-bottom:14px }
.pb16 { padding-bottom:16px }
.pb18 { padding-bottom:18px }
.pb20 { padding-bottom:20px }
.pb22 { padding-bottom:22px }
.pb24 { padding-bottom:24px }
.pb26 { padding-bottom:26px }

.trans_img { opacity: 1;filter: alpha(opacity=100);}

.fc-si { color:silver; }
.fc-orange { color:orange; }
.btn.btn-success { background:green;color:#fff; border:0;border-color:none; }

.btn.btn-success {
  color: #fff;
  background-color: green;
  border-color: transparent;
}
.btn.btn-success:focus,
.btn.btn-success.focus {
  color: #fff;
  background-color: #22406F;
  border-color: transparent;
}
.btn.btn-success:hover {
  color: #fff;
  background-color: #22406F;
  border-color: transparent;
}
.btn.btn-success:active{
  color: #fff;
  background-color: #22406F;
  border-color: transparent;
}
.schatten { 
-webkit-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.20);
-moz-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.20);
box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.20);
-o-box-shadow: 0px 4px 6px 0px rgba(0,0,0,0.20);
}

.unterstrich { border-bottom:1px solid #f1f1f1;margin:0 0 20px 0}
.totop{text-decoration:none;position:fixed;background:rgba(0,0,0,0.9);border-radius: 6px;right:20px;bottom:40px;border:0;z-index:9999;height:40px;width:40px; }
a:focus {outline: none;}
.hr-mobile { width:70%;background:rgba(139,99,67,0.2);height:1px }





/*header {top:0px;position:relative;height:30px;background:rgba(188,190,197,1);width:100%;	z-index:10;padding:0;margin:0;
-webkit-box-shadow: 0px 4px 6px 1px rgba(0,0,0,0.40);
-moz-box-shadow: 0px 4px 6px 1px rgba(0,0,0,0.40);
box-shadow: 0px 4px 6px 1px rgba(0,0,0,0.40);
-o-box-shadow: 0px 4px 6px 1px rgba(0,0,0,0.40);

}

*/

.mycontainer{
    max-width:2200px;
    margin:0 auto;
    min-height:1px;
	/*background:rgba(188,190,197,0.7); */
	box-shadow: -8px 0 8px -8px rgba(0,0,0,0.5), 8px 0 8px -8px rgba(0,0,0,0.5);
}



#logo_mobile { display:none; }
#logo_top { margin:0 auto;background:#000;padding:5px 0 6px 0;}


#section_top { background:#000;margin:0;border:0;padding:5px 0 5px 0}
#nav_top {width:100%;text-align:center;vertical-align:middle;margin:auto;border:0;padding-top:3px;}
 
#nav_top a:link,#nav_top a:visited, #nav_top a:active {  font-weight:400;font-size:18px;line-height:22px;color:#333; }
#nav_top a:hover { color:rgb(223,0,0); }

.nav_top_schatten { 
-webkit-box-shadow: 0px -14px 6px 1px rgba(0,0,0,0.20);
-moz-box-shadow: 0px -14px 6px 1px rgba(0,0,0,0.20);
box-shadow: 0px -14px 6px 1px rgba(0,0,0,0.20);
-o-box-shadow: 0px -14px 6px 1px rgba(0,0,0,0.20);
}

#nav_left a:link,#nav_left a:visited, #nav_left a:active {  font-weight:300;font-size:18px;line-height:28px;color:#444;margin:0 2px 0 2px; }
#nav_left a:hover { background:rgba(255,255,255,0.5);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 5px;border-top-right-radius: 5px;color:rgb(223,0,0); }

#footer { color:silver;background:#000;padding-top:50px;padding-bottom:60px;}
#footer a { color:silver;}
#footer p.copy { padding-top:30px; }

.footer {
  position: absolute;
  position:fixed;
  bottom: 0;
  width: 100%;
  height: 20px;
}
.nav_flagg {background:rgba(188,190,197,1);}


p,input,div,span { font-size:16px; }
@media screen and (max-width: 992px) {
	h1 {font-size: 20px;}
	h2 {font-size: 18px;}
	h3 {font-size: 16px;}
	h4 {font-size: 15px;}
	h5 {font-size: 14px;}
	h6 {font-size: 12px;}
	.totop{height:30px;width:30px; }
	section { margin:0; padding:0;}
	section.ausgabe-frame { padding-top:0}
	p,.btn,input,div,span{font-size: 98%;}
	.wein-box { height:auto;margin:10px;padding:10px;background:#fff;}
	/*.wein-box-img { background:rgba(255,255,255,1);}*/
	.panel-wein-box {
		  display: -webkit-flex; 
		  display: -ms-flexbox; 
		  display: flex;

		  width: 48%;
		  padding:0;
		  float: left;
		  margin: 10px 0 10px 0;}
}

@media screen and (max-width: 768px) {
	h1 {font-size: 20px;}
	h2 {font-size: 18px;}
	h3 {font-size: 16px;}
	h4 {font-size: 15px;}
	h5 {font-size: 14px;}
	h6 {font-size: 12px;}
	.totop{height:25px;width:25px; }
	section { margin:0; padding:0;}
	section.ausgabe-frame { padding-top:0}
	p,.btn,input,div,span{font-size: 98%;}
	.wein-box { height:auto;margin:10px;padding:10px;background:#fff;}
	/*.wein-box-img { background:rgba(255,255,255,1);}*/
	.panel-wein-box {
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex;

  width: 100%;
  padding:0;
  float: left;
  margin: 10px 0 10px 0;
}
}


.no-js #loader { display: none;  }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
.se-pre-con {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: url(../img/loader.gif) center no-repeat transparent;}
#home{ background:#000; }

 /*jssor slider loading skin double-tail-spin css*/
.jssorl-004-double-tail-spin img {
	animation-name: jssorl-004-double-tail-spin;
	animation-duration: 1.6s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes jssorl-004-double-tail-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

      .myitems {
	display: flex;
	flex-wrap: wrap;
	margin-left: -10px;
	margin-top: -10px;
}
.myitems .myitem {
	flex: 1 0 200px;
  box-sizing: border-box;
  background: #f1f1f1;
  color: #171e42;
  padding: 10px;
	margin-left: 10px;
	margin-top: 10px;
}
@media (min-width: 410px) {
  .myitems .myitem {
    max-width: calc(50% - 10px);
  }
}
@media (min-width: 620px) {
  .myitems .myitem {
    max-width: calc(33.33333% - 10px);
  }
}
@media (min-width: 830px) {
  .myitems .myitem {
    max-width: calc(25% - 10px);
  }
}
@media (min-width: 1040px) {
  .myitems .myitem {
    max-width: calc(20% - 10px);
  }
}
@media (min-width: 1250px) {
  .myitems .myitem {
    max-width: calc(16.66667% - 10px);
  }
}
@media (min-width: 1460px) {
  .myitems .myitem {
    max-width: calc(14.28571% - 10px);
  }
}
@media (min-width: 1670px) {
  .myitems .myitem {
    min-width: calc(12.5% - 10px);
  }
}