/*** Titillium+Web START */
/* 400-normal */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-display: auto;
  font-weight: 400;
  src: url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-regular.eot');
  src: local('Titillium Web Regular'), local('TitilliumWeb-Regular'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-regular.woff2') format('woff2'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-regular.woff') format('woff'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-regular.ttf') format('truetype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-regular.svg#TitilliumWeb') format('svg');
}
/* 400-italic */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-display: auto;
  font-weight: 400;
  src: url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-italic.eot');
  src: local('Titillium Web Italic'), local('TitilliumWeb-Italic'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-italic.eot?#iefix') format('embedded-opentype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-italic.woff2') format('woff2'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-italic.woff') format('woff'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-italic.ttf') format('truetype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-italic.svg#TitilliumWeb') format('svg');
}
/* 700-normal */
@font-face {
  font-family: 'Titillium Web';
  font-style: normal;
  font-display: auto;
  font-weight: 700;
  src: url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700.eot');
  src: local('Titillium Web Bold'), local('TitilliumWeb-Bold'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700.eot?#iefix') format('embedded-opentype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700.woff2') format('woff2'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700.woff') format('woff'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700.ttf') format('truetype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700.svg#TitilliumWeb') format('svg');
}
/* 700-italic */
@font-face {
  font-family: 'Titillium Web';
  font-style: italic;
  font-display: auto;
  font-weight: 700;
  src: url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700italic.eot');
  src: local('Titillium Web Bold Italic'), local('TitilliumWeb-BoldItalic'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700italic.eot?#iefix') format('embedded-opentype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700italic.woff2') format('woff2'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700italic.woff') format('woff'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700italic.ttf') format('truetype'),
       url('/ARANESLIB/fonts/titillium-web/titillium-web-v6-latin-ext_latin-700italic.svg#TitilliumWeb') format('svg');
}
/* Titillium+Web ENDE ***/
@charset "UTF-8";

@media all {
    #articleTpl .content{
        background:none;
        margin-bottom: 0;
        padding: 0;
    }
    
    #articleDetail{}
    
    #articleDetailTop{
        /*border:3px solid red;*/
        
    }
    
    #articleDetailWKCol{
        float:right;
        width: 100%;
    }
    
    .lblhersteller, .lblartnr{
        font-weight: bold;
    }
    
    /*Obere box, Bilder und Button*/
    #articleDetailTop, #articleDetailBottom{        
        background-color : rgba(0,0,0,0.7);
        overflow: auto;
        margin-bottom: 1em;
        padding: 3em 2em;
    }
    
    #thumbs, .articleMainImage, #articleDetailWKCol{
        float: left;
    }
    
    #thumbs{
	width:10%;
	margin-right: 2%;	
	overflow: hidden;
    }
    
   
    figure.articleThumbImage{
	 display: block;
	 margin: 0 0 1em 0;
	 padding: 0;
	         
    }
    
    #thumbs a{
        width: 100%;
        height: 100%;
        display: block;
    }
    
    #thumbs img{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto !important;
    } 
    
    .articleMainImage{
        display:table;
        margin: 0 auto;
        max-width: 100%;
        table-layout: fixed;
        text-align: center;
        width: 30%;

    }
    
    .articleMainImage img{
	display: block;
	margin: 0 auto;
	padding: 0;
	width: 100%;
	height: auto !important;        
    }
    
    #articleDetailWKCol{
        float:right;
        width: 100%;
    }
    .articleMainImage + #articleDetailWKCol{
        width: 68%
    }
    
    #articleThumbImages + .articleMainImage + #articleDetailWKCol{
        width: 56%;
    }
    
    .priceDetailInfo{
        /*display: none;*/
        margin: 0;
        /*padding:0;*/
    }
    
    
/*
    .articleMainImage{
        width: 42%;
    }
    #articleThumbImages{ }
    
    #articleThumbImages + .articleMainImage{
        width: 30%;
        max-width: 100%;
    }
    
    #articleThumbImages + .articleMainImage + #articleDetailWKCol{
        float:right;
        width: 56%;
    }
*/
    
    
    
    
    
    #articleDetailWKCol .ym-form div.ym-fbox-text,
    #articleDetailWKCol .ym-form div.ym-fbox-select,
    #articleDetailWKCol .ym-form div.ym-fbox-check,
    #articleDetailWKCol .ym-form div.ym-fbox-button{
        padding-left:0;
    }
    #articleDetailWKCol p{
        margin-top: .5em;
    }
    
    
    #articleDetailWKCol h1{
        background:#FFF;
        padding: .2em;
    }

    #buttons{
        margin-top: 3em;
        padding-top: 3em;
        
    }
    
    .articleSlider{
        float:right;
        /*margin-right: 2em;*/
    }
    
    .articleSlider a{
        width:33px;
        height: 33px;
        /*margin-left: 2em;*/
        display:block;
    }
    
    .articleSlider .prev,.articleSlider .next{
        width:33px;
        height:33px;
        background: url(/img/ly/sprite-shop.png) no-repeat;
        float:left;        
    }
    
    .articleSlider .prev{
        background-position: 0px -595px;
        /*float: left;*/
    }
    .articleSlider .next{
        background-position: 0px -429px; 
        margin-left:2em;
    }
    
    
    .whiteborder {
        border-top: 3px solid #fff;
    }
    
    
    #buttons .wk-button{
        padding-right: 2em;
        float:right;
        
    }
    
/*    #buttons .wk-button{
        cursor: pointer;
        font-size: 2em;
        color: #fff !important;
        border: 0px solid #000000;
        background-color: #F00;
        border-radius: 0;
        width: 120px;
        padding: .2em;
        padding-right: 2em;
        line-height: 130%;
        background-image: none;
        box-shadow: none;
        text-shadow: none;
        text-align: left;
        text-decoration: none;
        margin-left:0 !important;
        display: block;
        white-space: nowrap;
    }
    */
/*    #buttons .wk-button:hover{
        color: #000 !important;
    }*/
    
/*    #buttons .wk-button:after {
        content: '>';
        display: inline-block;
        margin-left: 1em;
    }*/
    

    
    #price{
        padding:0;
        padding-top: 2em;
        /*border-bottom: 3px solid #FFF;*/
        /*margin-bottom: 2em;*/
    }
    
    .whiteborderbottom{
        border-bottom: 3px solid #FFF;
    }
    
    .whiteline{
        border-bottom: 3px solid #FFF;
        height: 3px;
    }
    
    #priceval{
        color: #1d6a5e;
        font-weight: bold;
        font-size:2em;
       
    }
    
    #pricehint{}
    
    
    /*Untere Box Beschreibung*/
    #articleDetailBottom{
        
    }
    
    #articleDetailBottom h2{
        color:#FFF;
    }
    #articleDetailBottom #description{}
        

    #addbasketoverlay {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.8);
        z-index: 999;
    }
    #addbasketinlay {
        position: absolute;
        display: block;
        background: rgba(255,255,255,.8);
        /*background: rgba(0,0,0,.8);*/
        
        margin: 0 auto;
        top: 20%;
        left: 0;
        right: 0;
        padding: 1em;
        /*border: 1px solid #000;*/
        width: 40em;
        max-width: 90vw;
    }
    
    #addbasketinlay .dlgHead{
        background: #1d6a5e;
        color: #fff;
        height: 2em;
        margin: -1em -1em 0 -1em;
        padding:1em;
    }
    #addbasketarticlename{
        color: #000;
        font-weight: bold;
    }
    #addbasketinlay a:hover{
        text-decoration: none;
    }
    
    #inlayarticlewrapper{
        position: relative;
        width: 100%;
        margin-top: .5em;
        padding-bottom: 1.5em;
        border-bottom: 2px solid red;
            
    }
    
   
    #inlaytext{
        width: 50%;
        height: 100%;
        margin-right: 1%;
        float: left;
        vertical-align: bottom;
    }
    
    #inlaytext.inlaywide{
        width:100%;
    }
    
    #inlayfigure{
        float: right;
        width:25%;
    }
    
    #inlayfigure img{
        width: 100%;
        height: auto !important;
    }
    
    #inlayaccessoriewrapper{
        width: 100%;
        overflow: hidden;
    }
    
    #inlayaccessoriewrapper figure{
        width: 18%;
        margin-right: 2.5%;
        float: left;
    }
    
    #inlayaccessoriewrapper figure:nth-child(5n+1),
    #inlayaccessoriewrapper figure:nth-child(5n+2),
    #inlayaccessoriewrapper figure:nth-child(5n+3),
    #inlayaccessoriewrapper figure:nth-child(5n+4){
        margin-right: 2.5%;
        width:18%;
    }
    
    #inlayaccessoriewrapper figure:nth-child(5n+5){
        float: right;
        margin-right: 0;
        width: 18%;
    }
    
    
    
    #inlayaccessoriewrapper figure img{
        width: 100%;
        height: auto !important;
    }
    
    #inlayaccessoriewrapper figure span{
        overflow: hidden;
        width: 98%;
        font-size: .8em;
    }
    
    
    
    /*    
    #articleDetail h2 {
        margin: 1em 0 0 0 !important;
    }
    
    .ym-columnar .options {
        margin-top: .5em;
        margin-bottom: .5em;
    }
    .ym-columnar .articleoptions .abs {
        margin: 0 .5em .1em 31%;
    }    
   
    #articleDetail .article_available_green,
    #articleDetail .article_available_grey,
    #articleDetail .article_available_yellow,
    #articleDetail .article_available_red {
        
    }
    #articleDetail .article_available_green:before,
    #articleDetail .article_available_grey:before,
    #articleDetail .article_available_yellow:before,
    #articleDetail .article_available_red:before {
        content: '\b7\a0';
        text-align: center;
        display: block;
        float: left;
        width: 1em;
        height: 1em;
        border-radius: .5em;
        margin-right: .5em;
        margin-top: .2em;
        border: 1px solid #31343b;
        
        background: #ccc;
        color: #ccc;
    }
    #articleDetail .article_available_green {
        color: #416600;
        font-weight: bold;
    }
    #articleDetail .article_available_green:before {
        background: #85bb25;
        color: #85bb25;
    }
    #articleDetail .article_available_yellow:before {
        background: #e9d000;
        color: #e9d000;
    }
    #articleDetail .article_available_red:before {
        background: #c44a00;
        color: #c44a00;
    }    
    
    
    #articleDetail .optiondisabled label {
        color: #999;
        font-style: italic;
        font-weight: normal;
    }
    #articleDetail .optioninfodisabled {
        color: #ccc;
        font-size: .8em;
    }
    
    .articleImages {
        float: right;
        width: 50%;
        margin: 0 0 1em 1em;
    }
    .articleImages .articleMainImage,
    .articleImages .articleThumbs {
        display: block;
        width: 100%;
    }
    .articleImages .articleMainImage img {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto !important;
    }
    .articleImages .articleThumbs {
        padding: 0;
        margin: 1em 0;
    }
    .articleImages .articleThumbImage {
        float: left;
        width: 30%;
        height: auto !important;
        margin: 0 3% 1em 0;
    }
    .articleImages .articleThumbImage img {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
        height: auto !important;
    }
*/    
    #articleTpl #articleList::before{
        content: "Wir empfehlen Ihnen dazu passend:";
        font-weight: bolder;
        color: #FFF;
        display: block;
        font-size: 2em;
    }
    
    #articleTpl #articleList{
        background-color: rgba(0, 0, 0, 0.7);
        
        padding: 3em 2em;
        margin-bottom: 1em;

    }
    
    #articleList {
        clear: both;
    }
    
    #articleList h1:first-of-type{
        color: #fff;
        background: #1D6A5E;
        color: #1D6A5E;
        background: #fff;
        margin-top:0;
        
        padding: .5em;
    }
    
    .shopBox img {
        display: block;
        width: 100%;
        height: auto !important;
    }

    #articleListItems .shopBox{
        float: left;
        width: 22%;
        margin: 0 3% 2em 0;
    }
    #articleListItems .shopBox:nth-child(4n+1),
    #articleListItems .shopBox:nth-child(4n+2),
    #articleListItems .shopBox:nth-child(4n+3){
        float: left;
        width: 22%;
        margin: 0 4% 2em 0;
    }
    
    #articleListItems .shopBox:nth-child(4n+4)
    {
        float: right;
        margin-left: 0;
        margin-right: 0;
    }
    
    
    
/*    .shopBox {
        float: left;
        width: 30%;
        margin: 0 5% 2em 0;
    }
    .shopBox:nth-child(3n+1) {  Erstes Element 
    }
    .shopBox:nth-child(3n+2) {  Zweites Element 
        margin-right: 0;
    }
    .shopBox:nth-child(3n+0) {  Drittes Element 
        float: right;
        margin-left: 0;
        margin-right: 0;
    }*/
    
    .shopBox h3 {
        background: #1d6a5e;
        color: #fff;
        font-weight: bold;
        /*white-space: nowrap;*/
        overflow: hidden;
        margin: 0;
        padding: .5em;
        height: 2.4em;
    }
    .shopBox h3 a, .shopBox h3 a:VISITED {
        display: block;
        font-size: 1em;
        color: inherit;
        font-weight: inherit;
        overflow: hidden;
        height: 100%;
    }
    .shopBox h3 a:HOVER, .shopBox h3 a:VISITED:HOVER {
        text-decoration: none;
        color: #000;
    }
    .shopBox .descs {
        background: #1d6a5e;
        color: #fff;
        margin: 0;
        padding: .5em;
        text-align: right;
    }
    .shopBox .descs p {
        margin: 0;
        padding: 0;
    }
}
@media xxx and (max-width: 1150px) {
    .shopBox:nth-child(2n+1), /* Erstes Element */
    .shopBox:nth-child(2n+2) { /* Zweites Element */
        width: 48%;
        margin-left: 0;
        margin-right: 0;
    }
    .shopBox:nth-child(2n+1) { /* Erstes Element */
        float: left;
    }
    .shopBox:nth-child(2n+2) { /* Zweites Element */
        float: right;
    }
}
@media xxx and (max-width: 850px) {
    .shopBox:nth-child(3n+1), /* Erstes Element */
    .shopBox:nth-child(3n+2), /* Zweites Element */
    .shopBox:nth-child(3n+0) { /* Drittes Element */
        float: left;
        width: 30%;
        margin: 0 5% 2em 0;
    }
    .shopBox:nth-child(3n+1) { /* Erstes Element */
    }
    .shopBox:nth-child(3n+2) { /* Zweites Element */
        margin-right: 0;
    }
    .shopBox:nth-child(3n+0) { /* Drittes Element */
        float: right;
        margin-left: 0;
        margin-right: 0;
    }
}
@media xxx and (max-width: 650px) {
    .shopBox:nth-child(2n+1), /* Erstes Element */
    .shopBox:nth-child(2n+2) { /* Zweites Element */
        width: 48%;
        margin-left: 0;
        margin-right: 0;
    }
    .shopBox:nth-child(2n+1) { /* Erstes Element */
        float: left;
    }
    .shopBox:nth-child(2n+2) { /* Zweites Element */
        float: right;
    }
}
@media xxx and (max-width: 600px) {
    .articleImages {
        float: none;
        clear: both;
        width: auto;
        display: block;
        margin: 2vw 0;
    }
}
@media xxx and (max-width: 400px) {
    .shopBox {
        float: none !important;
        clear: both !important;
        margin: 0 0 2vw 0 !important;
        width: auto !important;
        max-width: 300px;
    }
}