/* ---------------------- Desktops and laptops --------------------------------------------------------*/
@media only screen and (max-width : 1365px) {
  .informationenBlock p {padding: 4px 0 0 5px;font-size: 1.2rem;}
}
  
@media only screen and (min-width : 1280px) {
  .layout {min-height: 38vh;}
  #login .gruende {display: block;}
}

@media only screen and (max-width : 1200px) {
  .isStartside .articlePreview {width: 25%;}
  .isCategoryside .articlePreview.grid {width: 33.33%;}
  .isCategoryside .categoryPreview {width: 47%;}
  .articlePreviewSmall {width: calc(100%/5);}
  
  .meilhausZusatzseite .articlePreview.grid {width: 33.33%;}
}

@media only screen and (max-width : 1170px) {
  #infoblock .logoBlock {width: 30%;float: left;padding: 18px;}
}

@media only screen and (max-width : 1000px) {
  #infoblock .searchBlock {padding: 41px 10px;}
  .twBlockR, .twBlockL {clear:both;float:none;width:95%;margin:10px 10px 60px 10px;}
}
  
@media only screen and (max-width : 850px) {
  .isStartside .articlePreview {width: 33.33%;}
  .articlePreviewSmall {width: calc(100%/4);}
  #usp1 {text-align:center;overflow: hidden;float:none}
}

@media only screen and (max-width : 650px) {
  .isStartside .articlePreview {width: 50%;}
  .isCategoryside .articlePreview.grid {width: 50%;}
  .articlePreviewSmall {width: calc(100%/3);}
  
  .meilhausZusatzseite .articlePreview.grid {width: 50%;}
  #usp1 {text-align:center;overflow: hidden;float:none}
  #blogBox {max-width:100%}
}

@media only screen and (max-width : 450px) {
  .isStartside .articlePreview {width: 100%;}
  .isCategoryside .articlePreview.grid {width: 100%;}
  .isCategoryside .categoryPreview {width: 100%;}
  .articlePreviewSmall {width: calc(100%/1);}
  
  .meilhausZusatzseite .articlePreview.grid {width: 100%;}
  #usp1 {text-align:center;overflow: hidden;float:none}
  #blogBox {max-width:100%}
}



/* ---------------------- iPads (landscape) -----------------------------------------------------------*/
@media only screen and (min-width : 768px) and (max-width : 1279px) and (orientation : landscape) {
  #footer .footerBox {width: 50%;}
}

/* ---------------------- iPads (portrait) ----------------------------------------------------------- */
@media only screen and (min-width : 768px) and (max-width : 1279px) and (orientation : portrait) {
  #footer .footerBox {width: 50%;}
  
  .addMenuTop .addMenu ul.rightTopBox {display: none;}
  .addMenuTop .addMenu ul {display: none;}
  .addMenuTop .addMenu {display: grid;}
  .addMenuTop {padding-left: 0;}
  .addMenuTop .addMenu ul ul:after {display: none;}
  .addMenu ul li {border-top: 0 solid #545454;}
  .addMenuTop .addMenu ul ul li a {padding: 4px 15px;}
  .addMenu ul li {border-top: 0 solid #545454;}
  #categoriesTop ul li {border-top: 1px solid #e0e0e0;}
  .mobileBtns {width: 100%;overflow: hidden;}
  .longBanner {margin: 50px 0 0px 0;}
  
  #categoriesTop .submenu-button {height: 46px;width: 65px;}
  #categoriesTop ul ul li:hover > a, #categoriesTop ul ul li.active > a {color: #343434;}
  
  .meilhausZusatzseite .powerlabitem {width: 50%;}
  .meilhausZusatzseite .headerBox .headerBadge {display: none;}
  
  .addMenuTop {display: none;}
  
  .isStartside #liveshopping .liveshoppingArticle {width: 100%;padding-bottom: 0;margin-bottom: 0;}
  #searchBar .mobileSearchContainer {padding: 0 10px;}
  #infoblock {padding-top: 0;}
  .articleBasketCountBadge {float: right;margin-top: 8px;}
  
  .stepOneButtons .bottomBtns {display: block;float: left;float: none;}
  
  #checkoutMenu {display: none;}
  #bestellschritt_1 select, #bestellschritt_1 input {max-width: 100%;}
  
  .articlePreviewSmall {width: calc(100%/2);}
  
  #overlayaccounttype {background: rgba(0,0,0,0.6);}
  #overlayaccounttype .accTyeBox::after {content: '';height: 0;width: 0;}
  #overlayaccounttype .accTyeBox {right: 50%;left: 50%;margin-left: -200px;}
}

/* ---------------------- Smartphones -----------------------------------------------------------------*/
@media only screen and (min-width : 220px) and (max-width : 767px) {
  #footer .footerBox {width: 50%;}
  
  .slider-wrapper {display: block;}
  .addMenuTop .addMenu ul.rightTopBox {display: none;}
  .addMenuTop .addMenu ul {display: none;}
  .addMenuTop .addMenu {display: grid;}
  .addMenuTop {padding-left: 0;}
  .addMenuTop .addMenu ul ul:after {display: none;}
  .addMenu ul li {border-top: 0 solid #545454;}
  .addMenuTop .addMenu ul ul li a {padding: 4px 15px;}
  .addMenu ul li {border-top: 0 solid #545454;}
  #categoriesTop ul li {border-top: 1px solid #e0e0e0;}
  .mobileBtns {width: 100%;overflow: hidden;}
  .longBanner {margin: 50px 0 0px 0;}
  .articleMediaFile {overflow: hidden;}
  .sideButtons {display: none;}
  
  #bestellschritt_1 .directOrder input {width: 100% !important;}
  #bestellschritt_1 .directOrder .directOrderButton {margin-left: 0;margin-top: 10px;}
  
  #categoriesTop .submenu-button {height: 46px;width: 65px;}
  #categoriesTop ul ul li:hover > a, #categoriesTop ul ul li.active > a {color: #343434;}
  
  .meilhausZusatzseite .powerlabitem {width: 100%;}
  .meilhausZusatzseite .columns2 {column-count: 1;}
  .meilhausZusatzseite h3.zus {width: 100%;text-align: center;}
  .meilhausZusatzseite .headerBox .headerBadge {display: none;}
  
  .addMenuTop {display: none;}
  
  .isStartside #liveshopping .liveshoppingArticle {width: 100%;padding-bottom: 0;margin-bottom: 25px;}
  .isStartside #liveshopping .liveshoppingDescription {width: 100%;}
  .isStartside #liveshopping .liveshoppingLength {text-align: center;}
  
  .isStartside #liveshopping .dash_title {padding-top: 0;padding-left: 0;float: none;text-align: center;}
  .isStartside #liveshopping .dash {text-align: center;height: auto;}
  .isStartside #liveshopping .digit {float: none;display: inline-block;}
  .isStartside #liveshopping .liveshoppingBox {text-align: center;}
  
  #searchBar .mobileSearchContainer {padding: 0 10px;}
  #infoblock {padding-top: 0;}
  .articleBasketCountBadge {float: right;margin-top: 8px;}
  
  .stepOneButtons .bottomBtns {display: block;float: left;float: none;}
  
  #checkoutMenu {display: none;}
  #bestellschritt_1 select, #bestellschritt_1 input {max-width: 100%;}
  
  #overlayaccounttype .accTyeBox::after {content: '';height: 0;width: 0;}
  #overlayaccounttype {background: rgba(0,0,0,0.6);}
  #overlayaccounttype .accTyeBox {right: 50%;left: 50%;margin-left: -200px;}
}

@media only screen and (min-width : 220px) and (max-width : 540px) {
  #footer .footerBox {width: 100%;}
  ..meilhausZusatzseite .powerlabitem {width: 50%;}
}

@media only screen and (min-width : 220px) and (max-width : 1070px) {
  .bottomBtns.btnNext, .bottomBtns.btnNext > div {width: 100%;text-align: left;}
  .bottomBtns.btnNext .stepNext, .bottomBtns.btnNext .backToShopping .button {float: left;}
}


/*override slick theme*/
.slide-prev, .slide-next {
  position: absolute;
  z-index: 10;
  width: 35px;
  height: 35px;
  border-radius: 100px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border: 1px solid #e5e5e5;
  background-color: #fff;
  color: #333;
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
  padding: 8px 0 0 12px;
  text-align: left;
  font-size: 13px;
  font-family: "Poppins";
}
.slick-prev, .slick-next {
  font-size: 1.2rem;
  top: auto;
  color: #2a2a2a;
  border: 1px solid #dadadd;
  border-radius: 50%;
  background: #fff;
  overflow: hidden;
  width: 35px;
  height: 35px;
  text-align: center;
  transition: all .2s ease-in;
  -webkit-transition: all .2s ease-in;
  -moz-transition: all .2s ease-in;
}
.slick-prev:hover, .slick-next:hover {background: #E10019;color: #fff;border-color: #E10019;}
.slick-prev {left: 50%;bottom: -17px;padding-right: 3px;margin-left: -45px;}
.slick-next {right: 50%;bottom: -17px;padding-left: 3px;margin-right: -45px;}
.slick-slide img {max-width: 100%;}


/*fancybox overwrite*/
.fancybox-skin {background: #ffffff;}

/*autocomplete ui*/
.ui-menu .ui-menu-item {margin: 0 !important;cursor: pointer;list-style-image: unset;padding: 10px 10px 0 10px !important;height: auto !important;}
.ui-menu .ui-menu-item .ui-state-active {background: none !important;border: 0 !important;margin: 0 !important;}
.ui-menu .ui-menu-item-wrapper {position: relative;padding: 0;font-size: 0.8rem !important;}
.autocomplete_right {display: none !important;}
.ui-widget.ui-widget-content {border: 1px solid #d3d3d3;border-radius: 16px;margin-top: 5px;}
.ui-menu .ui-menu-item:hover {background: #F5F5F5;}

/* card.min */
.vrPaymentBox .wpwl-brand-card {float: none;overflow: hidden;position: relative;top: 9px;}
.vrPaymentBox .wpwl-container {float: none;}
.vrPaymentBox .vrPaymentWidget {float: right;width: 50%;}
.vrPaymentBox .vrPaymentText {float: left;width: 45%;padding: 5%;font-size: 13px;}
.vrPaymentBox .wpwl-control {display: block;width: 100%;height: 34px;height: 2.125em;padding: 4px 4px;border: 1px solid #ccc;background-color: #fff;-webkit-transition: border-color ease-in-out .15s;-o-transition: border-color ease-in-out .15s;transition: border-color ease-in-out .15s;border-radius: 4px;font-size: 16px;}
.wpwl-has-error~.wpwl-hint {color: #a94442;font-size: 0.75rem;}

/*tables
@media only screen and (max-width: 760px), (min-device-width: 220px) and (max-device-width: 1024px)  {
  table, thead, tbody, th, td, tr { display: block; }
  thead tr { position: absolute;top: -9999px;left: -9999px;}
  tr { border: 1px solid #ccc; }
  td {border: none;border-bottom: 1px solid #eee; position: relative;padding-left: 50%; }
  td:before { position: absolute;top: 6px;left: 6px;width: 45%; padding-right: 10px; white-space: nowrap;}
  table.cnt tr {border: 0px solid #87888a;}
  table.cnt {border: 0px solid #87888a;max-width: 100%;}
}*/