/* Farben: 
Dunkelrot: #9C1F2E, rgba(156,31,46,1)

*/

/* ==========================================================================
   General / Content
   ========================================================================== */
@font-face {
  font-family: "FontAwesome";
  src: url('fontawesome/fontawesome-webfont.eot');
  src: url('fontawesome/fontawesome-webfont.eot?#iefix') format('eot'), url('fontawesome/fontawesome-webfont.woff') format('woff'), url('fontawesome/fontawesome-webfont.ttf') format('truetype'), url('fontawesome/fontawesome-webfont.svg#FontAwesome')    format('svg');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'Roboto';
  src:  url('fonts/Roboto-Regular.woff2') format('woff2');
}


body {background: #fff}
body, h1, h2, h3, h4, h5, h6, p { font-family: 'Roboto', Arial, sans-serif }
p {font-size: 0.9rem}
header { padding-bottom: 50px!important }
h5 {text-transform: uppercase; font-weight: 600}
h6 {font-weight: 500}
a {color: rgba(156,31,46,1);}
ul li p {margin-bottom: 0.25rem}
small {font-size: 70%;}
.animated { -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition: all 0.4s ease;
  -ms-transition: all 0.4s ease;
  transition: all 0.4s ease;}

.highlight {color: rgba(156,31,46,1;)}

.pr-zero {padding-right: 0}
.pl-zero {padding-left: 0;}

.alert, button.alert, .button.alert {background: rgba(156,31,46,1)}
.alert-box {padding: 0.375rem 1.5rem 0.375rem 0.875rem; color: #333; margin-bottom: 0.375rem}
.alert-box div.small {line-height: 1.3rem}
.alert-box .close {padding-top: 11px}
.alert-box label.inline, reveal-modal label.inline {margin: 0 0.3em 0 0; font-size: 0.8125rem}
.alert-box input[type="text"], .reveal-modal input[type="text"] {margin: 0.4rem 0 0 0rem; height: 1.6rem; font-size: 0.8125rem}
.alert-box .prefix, .alert-box .postfix, .reveal-modal .prefix, .reveal-modal .postfix{height: 1.6rem;line-height: 1.6rem;margin-top: 6px;; font-size: 0.8125rem}

.merklist-btn.small {padding-left: 0.75rem; padding-right: 0.75rem}

.backlink {display: block; line-height: 30px; color: #fff; text-align: left; padding-left: 10px; font-size: 0.9rem; text-transform:uppercase}
.backlink:hover {color: #ddd; text-decoration:underline}

h1.page-header {color: rgba(243,138,59,1.00); font-weight: 300;line-height: 2.5rem;margin: 20px 10px 40px;text-transform: uppercase;}

.tooltip {background: rgba(240,240,240,0.97); color: #333; border: 1px solid #ddd; font-size: 0.675rem;padding: 0.35rem;}
.tooltip.tip-left > .nub {border-color: transparent transparent transparent #ddd}
.tooltip.tip-right > .nub {border-color: transparent #ddd transparent transparent}

.th {border: none; box-shadow: none; background: url(../images/teesorten/thumbs/Thumb_Teebild_fehlt.jpg) no-repeat top left; background-size: 100% 100%}

.thumbnails {list-style: none; padding: 0; margin: 0}
.thumbnails li {float: left;
width: 60px;
height: auto;
border: 1px solid #ddd;
padding: 2px;
overflow: hidden;
margin-right: 5px}

.container{
  -webkit-backface-visibility: hidden;
}
.preloading {background: url(../../spinner.gif) no-repeat top center}

table {width: 100%}

/* ==========================================================================
   Structure / Layout
   ========================================================================== */


#wrapper {
  width: 100%;
max-width: 70em;
margin: 0 auto;
border-left: 1px solid #ddd;
border-right: 1px solid #ddd; }

#nlist {margin-bottom: 25px;}

#logo-container { background: rgba(156,31,46,1); width: 100%; height: 100% }
#logo-container h1 { position: absolute; bottom: 10px; left: 40px; right: 40px; }
#logo-container h4.show-for-medium-only {color: #fff; padding-top: 70px; padding-right: 15px; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 0.8rem }
#logo-container h4.show-for-medium-only span {display: block; font-size: 13px; font-size: 0.9rem; margin-top: 3px; letter-spacing: 3px }

#headcontent h4 { margin-top: 80px; ; text-transform: uppercase; letter-spacing: 5px; margin-bottom: 0.8rem }
#headcontent h4 span { display: block; font-size: 13px; font-size: 0.9rem; margin-top: 7px; letter-spacing: 3px }

#top-navigation {margin-left: -8px; width: 100%}
#top-navigation * { -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
#top-navigation li { margin-top: 20px; margin-left: 8px; padding-right: 8px; border-right: 1px solid #000; }
#top-navigation li:last-child { border-right: 0 }
#top-navigation li a { text-transform: uppercase; color: #333; font-size: 12px; font-size: 0.6rem; font-weight: 400; line-height: 1rem; letter-spacing: 2px }
#top-navigation li a:hover, #top-navigation li a:focus { text-decoration: underline; color: #9C1F2E }
#top-navigation li a.highlight {color: rgba(156,31,46,1)}
#top-navigation li.active a {text-decoration: underline; font-weight: 500; color: rgba(156,31,46,1)}
#top-navigation li.active:first-child a {color: #333; text-decoration: none; font-weight: normal}
.side-nav {padding-top: 0;}
.side-nav li { border-left-width: 20px; border-left-style: solid }
.side-nav li a {background: #fff}
.side-nav li a span {z-index: 2; position: relative;}
.side-nav li a:hover {color: #fff!important}
.side-nav li:nth-child(1) {border-left-color: rgba(0,0,0,1)}
.side-nav li:nth-child(2) {border-left-color: rgba(40,104,55,1.00)}
.side-nav li:nth-child(3) {border-left-color: rgba(227,171,204,1.00)}
.side-nav li:nth-child(4) {border-left-color: rgba(81,41,65,1.00)}
.side-nav li:nth-child(5) {border-left-color: rgba(155,198,101,1.00)}
.side-nav li:nth-child(6) {border-left-color: rgba(186,32,64,1.00)}
.side-nav li:nth-child(7) {border-left-color: rgba(220,127,47,1.00)}
.side-nav li:nth-child(8) {border-left-color: rgba(238,189,51,1.00)}
.side-nav li:nth-child(9) {border-left-color: rgba(0,189,242,1.00)} /* 32,70,112,1.00)} //242/154/130 */
.side-nav li:nth-child(10) {border-left-color: rgba(0,189,242,1.00)} 

.side-nav li:nth-child(1) a.active {background: rgba(0,0,0,1); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(2) a.active {background: rgba(40,104,55,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(3) a.active {background: rgba(227,171,204,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(4) a.active {background: rgba(81,41,65,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(5) a.active {background: rgba(155,198,101,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(6) a.active {background: rgba(186,32,64,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(7) a.active {background: rgba(220,127,47,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(8) a.active {background: rgba(238,189,51,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li:nth-child(9) a.active {background: rgba(0,189,242,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}  /*  32,70,112, */
.side-nav li:nth-child(10) a.active {background: rgba(0,189,242,1.00); color: #fff; border-left: 1px solid #fff; font-weight: 500}
.side-nav li a:not(.button) {font-weight: 400; color: #333}

/* Left Navigation Link Styles */
.btn { border: none; font-family: inherit; font-size: inherit; color: inherit; background: none; cursor: pointer; padding: 25px 80px; display: inline-block; margin: 15px 30px; text-transform: uppercase; font-size: 0.8rem; font-weight: 500; outline: none; position: relative; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.btn:after { content: ''; position: absolute; z-index: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; }
.btn-left {color: #fff; background: #fff}
/* Button 1c */
.btn-left:after { width: 0%; height: 100%; top: 0; left: 0; border-left: 1px solid #fff}
li:nth-child(1) .btn-left:after {background: rgba(0,0,0,1);}
li:nth-child(2) .btn-left:after {background: rgba(40,104,55,1); }
li:nth-child(3) .btn-left:after {background: rgba(227,171,204,1) }
li:nth-child(4) .btn-left:after {background: rgba(81,41,65,1) }
li:nth-child(5) .btn-left:after {background: rgba(155,198,101,1) }
li:nth-child(6) .btn-left:after {background: rgba(186,32,64,1) }
li:nth-child(7) .btn-left:after {background: rgba(220,127,47,1) }
li:nth-child(8) .btn-left:after {background: rgba(238,189,51,1)}
li:nth-child(9) .btn-left:after {background: rgba(0,189,242,1)}  /* 32,70,112 */
li:nth-child(10) .btn-left:after {background: rgba(0,189,242,1)} 

.bg-teekatalog {background: rgba(156,31,46,1)}
.bg-schwarztee {background: rgba(0,0,0,1); }
.bg-gruenertee {background: rgba(40,104,55,1); }
.bg-weissertee {background: rgba(227,171,204,1); }
.bg-aromaschwarz {background: rgba(81,41,65,1); }
.bg-aromagruen {background: rgba(155,198,101,1); }
.bg-aromafruechte {background: rgba(186,32,64,1); }
.bg-roiboos {background: rgba(220,127,47,1); }
.bg-krauter {background: rgba(238,189,51,1); }
.bg-blau {background: rgba(32,70,112,1) }
.bg-white {background: rgba(255,255,255,1)}
.bg-craft {background: rgba(0,189,242,1)}

.btn-left:hover, .btn-left:active { color: #fff; }
.btn-left:hover:after, .btn-left:active:after { width: 100%; }

.tea-container { height: 260px; overflow: hidden; position: relative;box-shadow: 0 0 0.75rem rgba(0,0,0,0.2); }
.tea-container .caption {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 64px;
    width: 100%;
    border-top: 3px solid #fff;
    padding: 0 15px;
    position: absolute;
    bottom: 0;
    z-index: 5;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.tea-container .caption h1 {margin: 0;font-size: 0.8rem; vertical-align: middle; display: table-cell; text-align: left; color: #fff; text-transform:uppercase; font-weight: 500;  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;}
.tea-container .teetasse {position: absolute; bottom: 49px; z-index: 2}
.tea-container .teetasse img {height: 100%;object-fit: cover;width: auto;}

.tea-container .pos-right {right: 0}
.tea-container .pos-left {left: 0}

.tea-placeholder {background: url(http://teekatalog.sop-werft.de/__res/images/tea_placeholder.jpg) no-repeat center center;background-size: cover;box-shadow: 0 0 0.5rem #aaa;border-radius: 10px;}

#language {position: absolute; right: 95px; top: 15px} 
#login {position: absolute; right: 15px; top: 15px}
#loginDrop .button {margin-bottom: 0;}
#language.button, #login.button {padding-top: 0.375rem;
padding-right: 3rem;
padding-bottom: 0.375rem;
padding-left: 1rem;}
.f-dropdown.content {background: rgba(244,244,244,0.92);}
#language.split.button.tiny span:after, #login.split.button.tiny span:after {border-width: 0.33rem; top: 43%}
#language.split.button.tiny span, #login.split.button.tiny span {width: 2rem}
#language-pref {position: relative; right: 0px; top: 0px}

.text-teaser-templ1, .text-teaser-templ2, .text-teaser-templ3 {border-top: 2px solid #000; border-bottom: 2px solid #000; overflow:hidden;}
.text-teaser-templ1 h5, .text-teaser-templ2 h5, .text-teaser-templ3 h5 {font-weight:400; }
.text-teaser-templ1 p {text-align: left;}
.text-teaser-templ1 img {float: left; margin-right: 10px}
.text-teaser-templ3 img {width: 100%; height: auto}

.calltoaction-box {padding: 15px}
.calltoaction-box div {position: absolute; bottom: 15px}
.calltoaction-box p, .calltoaction-box h3 {color: #fff; text-transform:uppercase; margin-right: 15px; font-weight: 500}
.calltoaction-box p {border-bottom: 1px solid #fff; margin-bottom: 5px; padding-bottom: 5px}

.breadcrumbs {margin-top: 0.875rem}
.breadcrumbs li {margin: 5px 0}

.sub-nav {-webkit-transition: all .2s ease-in-out;
     -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;}
.sub-nav dd {margin-right: 0.75rem; margin-left: 0}
.sub-nav dt, .sub-nav dd, .sub-nav li {font-family: roboto, sans-serif; font-size: 0.8rem;}
.sub-nav dt {margin-right: 10px}
.sub-nav dt:first-child {margin-left: 0}
.sub-nav dt a, .sub-nav dd a, .sub-nav li a {background: #eee; border-radius: 4px;-webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;}
.sub-nav dt.active a, .sub-nav dd.active a, .sub-nav li.active a {background:rgba(156,31,46,1) }
.sub-nav dt.active a:hover, .sub-nav dd.active a:hover, .sub-nav li.active a:hover, .sub-nav dt a:hover, .sub-nav dd a:hover, .sub-nav li a:hover {background: rgba(174,174,174,1.00); color: #fff}

.sub-nav[style="position: fixed; top: 0px;"] {left: 0!important;
margin: 0!important;
padding: 5px 0 5px;
background: rgba(230,230,230,0.97);
border-bottom: 1px solid #ccc;
text-align: center}

.sub-nav[style="position: fixed; top: 0px;"] dt, .sub-nav[style="position: fixed; top: 0px;"] dd, .sub-nav[style="position: fixed; top: 0px;"] li {float: none}

.sortiment .row {padding: 0 0 15px; width: 100%}
.sortiment span {font-size: 0.7rem; color: #666; text-align: left;white-space: normal;line-height: 0.9rem;}
.sortiment span.label {margin: 5px 0; background: #fff; border: 1px solid #ccc; display: table;}
.sortiment h6 {margin-bottom: 0}
.sortiment span.smallicon {display: inline-block;
padding: 4px;
background: #fff;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 4px;
margin-top: 2px;}

.sortiment span.addmerkliste {display: block; text-align: right; font-size: 0.8rem;}

.container .mix{
  display: none;
 background: #fff
}
.container .mix hr {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 0
  }
.properties img {height: 17px;
width: 20px;
border-radius: 3px;}

.price {font-size: 0.9rem; margin-top: 8px; margin-left: 25px;}

.vote-download {top: 75px; position: absolute; white-space: nowrap;}
.vote-download i {padding: 3px; color: #fff; background: rgba(156,31,46,1); border: 1px solid #fff}
.vote-download i:hover {-webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5) ;  }

div.icon-bar {background: none}
div.icon-bar > * {padding: 0;}
div.icon-bar > * i {color: #f90}

.portrait {margin: 0 20px 10px 0}

#printdetails {display: none}

#terms .label {font-size: 1rem; margin-bottom:0;padding: 0.15rem 0.5rem;}
#terms p {line-height: 1.5rem;font-size: 1rem;margin-bottom: 8px;}
#terms .tabs.vertical {margin-top: 20px; width: 30%;}
#terms .tabs-content.vertical {margin-top: 30px;padding-left: 30px; width: 70%;}
#terms.reveal-modal > :last-child {margin-top: 30px;}
#terms .tabs dd > a, #terms .tabs .tab-title > a {padding: 0.5rem 1rem;border: 1px solid #ddd;margin: 0 0 3px;-webkit-transition: all .4s ease-in-out;
     -moz-transition: all .4s ease-in-out;
    -ms-transition: all .4s ease-in-out;
     -o-transition: all .4s ease-in-out;
      transition: all .4s ease-in-out;}
#terms .tabs dd > i, #terms .tabs .tab-title > i {display: none;}
#terms .tabs dd.active a, #terms .tabs .tab-title.active a {background: #e3e3e3;}
#terms .tabs dd.active i, #terms .tabs .tab-title.active i {display: inline-block; display: inline-block;margin-right: 10px;margin-top: 14px;}


#legende {
  margin: 10px auto;
  
}
.legende > h3 {
  line-height: 25px;
font-size: 0.875rem;
color: #fff;
margin-bottom: 0;
text-align: center;
text-transform: uppercase;
background: rgba(156,31,46,1);
font-weight: 500;
}
.legende > label {
display: block;
position: relative;
padding: 8px 12px 8px 12px;
line-height: 16px;
font-size: 11px;
color: #8c8c8c;
border: 1px solid #d5d5d5;
}
.legende label:nth-child(n+1) {border-top: 0}

.legende strong {
  display: block;
  font-size: 12px;
  color: #414141;
  font-weight: bold;
}

.icon i {
  float: left;
  margin-right: 10px;
  padding: 4px;
  color: #fff;
  background: rgba(156,31,46,1);
  border: 1px solid #fff;
}

table#printlist input {margin-bottom: 0}

/* Picture Hover Effects */
/*PIC*/
.pic {
  height: auto;
  width: auto;
  overflow: hidden;
  background: #e9e9e9;
}

.pic:hover {
  cursor: pointer;
}

/*GROW*/
.tea-container .grow img {
  height: 215px;
  width: 204px;
  max-width: none;
  -webkit-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}


.content ul {margin-left: 2rem}

/* MB Insert */
table.mrabatt thead {
    background: none repeat scroll 0 0 #ffffff;
}
table.mrabatt {
    width: auto;
}
table.mrabatt {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 0px;
    margin-bottom: 1.25rem;
}
.mrabatt .tblalignright {
  text-align:right;
}
table.mrabatt tr {
  background-color: #fff;
}
table.mrabatt tr td {
  padding: 0 0.625rem;
}
/* MB Insert Ende */
.img_text { display:block;  overflow:hidden;}
.art_slider { display:block; }
.artist { float:left; }
.artistarea p.artistname {
  width:150px;
  clear:both;
  float:left;
}
.artistarea p {
  width: 560px;
  float:right;
}
#printlist .columns .postfix {
  color: #222222;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */


@media only screen and (max-width: 1024px) {
.medium-block-grid-4 .tea-container .grow img {
  width: 228px; 
  height: 240px}
}
.tea-container:hover .grow img{
  transform: scale(1.2);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
}
.tea-container:hover .caption h1 {}
.tea-container .caption i {
  text-indent: -50px; 
  color: #fff; 
  line-height: 46px; 
  margin-right: 5px;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  transition: all 0.5s ease;}
.tea-container:hover .caption i {text-indent: 0}
/*SHRINK*/
.shrink img {
  height: 285px;
  width: 270px;
  max-width: none;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.shrink img:hover {
  width: 204px;
  height: 215px;
}

/*BLUR*/
.blur img {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.blur img:hover {
  -webkit-filter: blur(5px);
}

/*TILT*/
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}

.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

/*SIDEPAN*/
.sidepan img {
  margin-left: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.sidepan img:hover {
  margin-left: -200px;
}

/*VERTPAN*/
.vertpan img {
  margin-top: 0px;
  -webkit-transition: margin 1s ease;
     -moz-transition: margin 1s ease;
       -o-transition: margin 1s ease;
      -ms-transition: margin 1s ease;
          transition: margin 1s ease;
}

.vertpan img:hover {
  margin-top: -200px;
}

/*FOCUS*/
.focus {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.focus:hover {
  border: 70px solid #000;
  border-radius: 50%;
}

/*B&W*/
.bw {
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}

.bw:hover {
  -webkit-filter: grayscale(100%);
}


/* FIXES */
.f-dropdown.drop-left:before {
content: "";
display: block;
width: 0;
height: 0;
border: inset 6px;
border-color: transparent transparent transparent #fff;
border-left-style: solid;
position: absolute;
top: 10px;
right: -12px;
left: auto;
z-index: 99;
}

/* Overlay Fading für Lightbox */
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out; 
  -o-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;
}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

#notloggedin {position: absolute;width: 100%;height: 100%;top: 0;left: 0;right: 0;bottom: 0;text-align: center;padding-top: 10%;
  background: rgba(255,255,255,0.9);text-decoration: underline}
#notloggedin img {margin-bottom: 30px; display:inline-block}  
#notloggedin span {padding: 10px 20px;
border: 1px solid #ccc;
border-radius: 10px;
background: #f0f0f0;
font-size: 0.8rem;
margin-top: 20px;
display: inline-block;}

.searchrow {
  position:absolute; top:10px; right:80px;
}

.privpol {
  width:300px;
  display:inline-block;
  padding-bottom:20px;
}
#back-top {    
    bottom: 25px;
    right: 20px;
    margin-right: 0;
    position: fixed;
    z-index: 1;
    font-size: 30px;
    color: #fff;
    background: #9c1f2e;
    height: 36px;
    width: 36px;
    text-align: center;
    line-height: 30px;}
/* ==========================================================================
   Media Queries
   ========================================================================== */
@media (max-width: 480px) {

  section.row {
      display: -webkit-box;
  display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
  }
  .side-nav {z-index: 1;position: relative;}
  #legende {display: none;}
  #back-top {top: 0;right: 0;bottom: auto;}
  #top-navigation li {
    margin-top: 0;
    margin-left: 0;
    padding-right: 0;
    border-right: 0;
        text-align: center;
    flex: 1 1 auto;}
  #top-navigation li a {
    text-transform: none;
    color: #333;
    font-size: 12px;
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1rem;
    letter-spacing: 0;
    padding: 6px 0 4px;
    border-right: 1px solid #fff;}  
  #top-navigation {    
    margin-left: 0;
    margin-top: 4px;
    background: #ddd;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    -ms-flex-pack: distribute;
    justify-content: space-between;
    width: 100%;}   
  .tea-container .caption {padding: 0 10px;}  
  .tea-container .caption i {display: none;}
  #login {right: 16px;top: 35px;}
  #language {top: 35px;}
  #logo-container h1 {padding: 10px 20px 12px;margin: 0;position: static;}
  .searchrow {position: absolute;top: 35px;left: 0;}

  /* Detail Site */
  .sortiment .row {width: auto;}
  .vote-download {top: 0;right: 10px;}
  .vote-download i {padding: 8px;}
  #nlist {
    margin-bottom: 43px;
    position: fixed;
    bottom: 0;
    z-index: 99;
    left: 0;
    right: 0;
        background: rgba(255, 255, 255, 0.87);
    font-size: 14px;
    line-height: 20px;
    text-align: center;}
  #nlist .alert-box {font-size: 65%;margin-bottom: -1px;}
  #nlist .alert-box .columns {    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;    padding-right: 20px;}
  .alert-box .close {
    padding-top: 11px;
    background: #9c1f2e;
    opacity: 1;
    color: #fff;
    display: inline-block;
    height: 22px;
    border-radius: 6px;
    width: 24px;
}  
  .pl-zero {padding: 0;}
  .container .mix {margin-left: -0.9375em;margin-right: -0.9375em;}
  .container .mix hr {margin-left: 0;margin-right: 0;}

  #merkliste {position: fixed; bottom: 0;background: #fff;right: 0;left: 0;z-index: 2;}
  #merkliste a.button {    
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    max-width: 150px;margin: 0;
    }
  #merkliste .merklist-btn.small {padding: 14px 10px;color: #fff; background: #9c1f2e}
  #merkliste .row {display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
        -webkit-justify-content: space-between;
    -ms-flex-pack: distribute;
    justify-content: space-between;
        -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #aaa;}
  #merkliste #nlist .row {background: none}  
  #merkliste .row .column {width: auto;    flex: 0 1 auto;height: 42px;}
  #merkliste > .column > p, #terms, #merkliste span.right {display: none;}

  /* Filter */
  .sub-nav {display: none;}
  .sub-nav[style="position: fixed; top: 0px;"] {
    display: block;
    text-align: left;
    padding: 0 10px;
    width: 100%;
    min-width: inherit;
    border: 0;
    max-width: 140px;
    height: 34px;
    transition: 0.3s ease;
        box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 0 0 10px 0;
  }
  .sub-nav dt {display: inline-block;margin-bottom: 0;padding: 8px 0;color: #000;font-weight: 600;}
  .sub-nav dt::after {content: '\f078';font-family: 'FontAwesome';margin-left: 10px;position: relative;top: -1px;}
  .sub-nav dd.filter {display: inline-block;margin: 5px 0;width: 100%;background: #fff;white-space: nowrap;
    text-overflow: ellipsis;overflow: hidden;padding: 6px 3px;border-radius: 5px;}
  .sub-nav .filter.active, .sub-nav .filter.active a {background: #9c1f2e}  
  .sub-nav dd.filter a {background: #FFF;padding: 0 5px;}
  .sub-nav dd.filter.active a {background: none}
  .sub-nav:hover, .sub-nav:focus {height: 100%;border-radius: 0}
  
  /* Modal */
  .reveal-modal .column {padding: 0;}
  .tea-placeholder {margin-bottom: 20px;}
  .sortiment .th.radius {margin-bottom: 20px;}
  .sortiment span.smallicon {margin-bottom: 10px;}

  /* Tabelle */
  #printlist thead {display: none;}
  #printlist tr { 
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    border-bottom: 1px solid #aaa;}
  #printlist tr:last-child {border-bottom: 0}  
  #printlist tr td {padding-left: 110px;position: relative;text-align: left!important;}  
  #printlist tr td:nth-of-type(1)::before {content: 'Artikelnummer:';position: absolute;left: 5px;font-weight: bold;}  
  #printlist tr td:nth-of-type(2)::before {content: 'Teesorte:';position: absolute;left: 5px;font-weight: bold;}  
  #printlist tr td:nth-of-type(3)::before {content: 'Preis:';position: absolute;left: 5px;font-weight: bold;}  
  #printlist tr td:nth-of-type(4)::before {content: 'Menge:';position: absolute;left: 5px;font-weight: bold;}  
  #printlist tr td:nth-of-type(5)::before {content: 'Nur Muster:';position: absolute;left: 5px;font-weight: bold;} 

  .button-group {float: none!important;}
  .button-group > li {width: 50%;} 
  .button-group > li > button, .button-group > li .button {width: 100%;}

  footer a {text-decoration: underline;}

  section.main #wrapper {width: 320px;}
  /* #register, #login {position: relative;right: auto;left: auto;} */
}