/**********************************/
/** PRODUCTOS, SECOND HAND BIKES **/
/**********************************/
#products .item-list, #second-hand-bikes .item-list{background-color: #FFF;}
#products .txt-content{padding: 25px;}
#products .txt-content, #second-hand-bikes .txt-content{display: flex;height: 100%;justify-content: space-between;flex-direction: column;align-items: center;}
#second-hand-bikes .txt-content{align-items: stretch;}
#products .txt-content hr, #second-hand-bikes .txt-content hr{margin: 5px auto; border-top-width: 2px; width: 100px;}
a:hover{text-decoration: none; color:#242323;}

/******************************/
/********** FILTRO ************/
/******************************/
.row-filters{display: none;}
#content-filter{width: 100%;padding: 20px;} 
#content-filter .select{margin-bottom: 0px;}
#content-filter select{cursor: pointer;color: #000;outline: 0;appearance: none;-webkit-appearance: none;-moz-appearance: none; display: block; width: 100%;  background-color: #FFF; border-radius: 5px; border: 1px solid #d3d3d3; border-right: 20px solid  #b9b8b5; padding: 5px 15px;}
.irs-bar{background-color:#b9b8b5}


/********************/
/** PRODUCT SINGLE **/
/********************/
#product-single hr.type-2, #second-hand-bike hr.type-2{max-width: 50px;border-top: 4px solid #b9b8b5;margin: 0px;}
#product-single .caract { margin-bottom: 8px; margin-top: 8px;width: 33%; float: left;}
#product-single .caract.especial{width: 100%;}
#product-single .caract .ico {display: inline-block; vertical-align: middle;height: 45px; width: 45px; background-color:#b9b8b5; border-radius: 40px; padding: 6px;}
#product-single .caract.especial .ico{vertical-align: text-top;}
#product-single .caract .text {display: inline-block; font-size: 14px; color:#222221; margin-left: 8px;    width: calc(100% - 70px); vertical-align: text-top;}
#product-single .caract ul{display: inline-block; font-size: 14px; color:#222221; margin-top: 15px;list-style: none;}
#product-single .caract ul li:before { content: "-"; padding-right: 8px;}
/* los pn y los cn esta definidos en product.php*/
#product-single .list-content{ display: grid; grid-column-gap: 15px; grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    /*grid-template-areas:
        "p1 p2 p3 p4 p5"
        "c1 c1 c1 c1 c1"
        "c2 c2 c2 c2 c2"
        "c3 c3 c3 c3 c3"
        "c4 c4 c4 c4 c4"
        "c5 c5 c5 c5 c5"
        "p6 p7 p8 p9 p10"
        "c6 c6 c6 c6 c6"
        "c7 c7 c7 c7 c7"
        "c8 c8 c8 c8 c8"
        "c9 c9 c9 c9 c9"
        "c10 c10 c10 c10 c10";*/}
#product-single .list-content .content-category{border:1px solid #b1b1b0;}
#product-single .list-content .content-category-content{padding: 15px 5px;}
#product-single .list-content .content-category .content-arrow{background-color: #b9b8b5;}
#product-single .content-accessories{background-color: #f1f1f1;position: relative;display: flex;padding: 20px;flex-direction: column;}
#product-single .content-accessories:after {bottom: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: transparent;border-bottom-color: #ececec;border-width: 15px;margin-left: -15px;}
#product-single .content-accessories .fa-reply, #product-single .content-accessories .fa-times{display: none;}
#product-single .content-accessories ul{padding-left: 20px;}
#product-single .content-accessories.open-element-1:after {left: 9.75%;}
#product-single .content-accessories.open-element-2:after {left: 30%;}
#product-single .content-accessories.open-element-3:after {left: 49.75%;}
#product-single .content-accessories.open-element-4:after {left: 70.25%;}
#product-single .content-accessories.open-element-0:after {left: 90.75%;} 
#product-single .content-accessories .accessories{display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap:10px}
#product-single .content-accessories .accessory{ background-color: #FFF; padding: 10px; }
#product-single .content-accessories .accessory .img{width: 79px; height: 78px;background-repeat: no-repeat;background-position: center;background-size: contain; }
#product-single .content-accessories .accessory hr{margin: 12px auto 4px; max-width: 100%;  border-top: 1px solid #000;}

#second-hand-bike .rrss{margin-top:0px;}

@media only screen and (max-width : 991px) {    
    #product-single .list-content{grid-template-columns: 1fr 1fr 1fr 1fr;    
        /*grid-template-areas:
        "p1 p2 p3 p4"
        "c1 c1 c1 c1"
        "c2 c2 c2 c2"
        "c3 c3 c3 c3"
        "c4 c4 c4 c4"        
        "p5 p6 p7 p8"
        "c5 c5 c5 c5"
        "c6 c6 c6 c6"
        "c7 c7 c7 c7"
        "c8 c8 c8 c8"        
        "p9 p10 p11 p12"
        "c9 c9 c9 c9"
        "c10 c10 c10 c10"
        "c11 c11 c11 c11"
        "c12 c12 c12 c12";*/}    
    #product-single .content-accessories.open-element-sm-1:after{left: 11%;}
    #product-single .content-accessories.open-element-sm-2:after {left: 36.5%;}
    #product-single .content-accessories.open-element-sm-3:after {left: 61.75%;}
    #product-single .content-accessories.open-element-sm-0:after {left: 87.5%;}
    #product-single .content-accessories .accessories{grid-template-columns: 1fr 1fr 1fr 1fr;}
}

@media only screen and (max-width : 767px) {  
    #product-single .caract { width: 100%;}
    #product-single .list-content{ grid-column-gap: 10px; grid-template-columns: 1fr 1fr 1fr;    
        /*grid-template-areas:
        "p1 p2 p3"
        "c1 c1 c1"
        "c2 c2 c2"
        "c3 c3 c3"        
        "p4 p5 p6"
        "c4 c4 c4"
        "c5 c5 c5"
        "c6 c6 c6"        
        "p7 p8 p9"
        "c7 c7 c7"
        "c8 c8 c8"        
        "c9 c9 c9 "
        "p10 p11 p12"
        "c10 c10 c10"
        "c11 c11 c11"
        "c12 c12 c12";*/} 
    #product-single .content-subcategory {width: 100%;position: fixed;top: 0px; left: 0px;z-index: 5;}
    #product-single .content-accessories{height: 100vh; margin: 0px;justify-content: space-between;overflow: auto;}
    #product-single .content-accessories .fa-reply, #product-single .content-accessories .fa-times{display: block;}
    #product-single .content-accessories .accessories{ grid-template-columns:1fr 1fr;}    
}