/* Panel-detail.php CSS */
@import url("osp_51026_detail.css");




section[data-cattype="51026"]{
    padding: 0 0 30px 0;
    /*background: linear-gradient(45deg, #f5f4f9 0%,#ecebf3 100%);*/
}


[data-cattype="51026"] .list-product{
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
        
/*    padding: 0;
    margin: 0 0.6em;
    column-gap: 1.5em;
    column-count: 2;*/
}

[data-cattype="51026"] .list-product > li{
    
    width: 23%;
    
    /*width: 100%;*/
    
     margin: 0.8em 0;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    box-shadow: 0px 2px 3px #ddd;
    overflow: hidden;
    position: relative;
}
[data-cattype="51026"] .list-product > li:not(.active){ cursor: pointer; }

[data-cattype="51026"] .list-product > li.heading{
    background: none;
    text-align: left;
    padding: 0;
    margin: 0.6em 0 0 0;
    width: 100%;
    cursor: default;
    box-shadow: none;
}
[data-cattype="51026"] .list-product > li.heading > h1{
    margin: 0;
    font-size: 1.62em;
}

[data-cattype="51026"] .list-product > li .sales-tag{
    position: absolute;
    display: inline-block;
    width: 45px;
    height: 45px;
    top: 0px;
    left: 0px;
    background: #ff0000;
    border-radius: 50px;
    text-align: center;
    padding: 12px 5px;
    text-transform: uppercase;
    color: #fff;
    font-weight: bold;
    font-size: 0.63em;
    transform: rotate(-45deg);
    border: 2px solid #eee;
    z-index: 10;
    opacity: 0.8;
}


[data-cattype="51026"] .thumbnail{
    position: relative;
    background-color: #fff;
}
[data-cattype="51026"] .thumbnail .icon{
    position: absolute;
    right: 5px;
    bottom: 5px;
    opacity: 0.7;
    
    color: #000;
    font-size: 0.9em;
    padding: 6px;
    border-radius: 20px;
    background-color: #fff;
    width: 33px;
    height: 33px;
    display: inline-block;
    text-align: center;
    box-shadow: 0px 2px 3px #aaa;
}
[data-cattype="51026"] .thumbnail .icon-back{ display: none; }
[data-cattype="51026"] .thumbnail .icon:hover{
    background: #000;
    color: #fff;
}


[data-cattype="51026"] .list-product .summary{
    padding: 10px;
    text-align: left;
    position: relative;
}
[data-cattype="51026"] .list-product > li:not(.active,.heading):hover,
[data-cattype="51026"] .list-product > li:not(.active):hover .summary{
    background: #111;
    color: #fff;
    
}
[data-cattype="51026"] .list-product > li:not(.active):hover .summary *{
    color: #fff;
    text-decoration: none;
}
[data-cattype="51026"] .list-product > li .summary > a,
[data-cattype="51026"] .list-product > li .summary > a:visited,
[data-cattype="51026"] .list-product > li .summary > a:focus
[data-cattype="51026"] .list-product > li .summary > a:hover{
    display: block;
    text-decoration: none;
    color: inherit;
}

[data-cattype="51026"] .list-product h4{
    font-size: 0.9em;
    margin: 0;
}

[data-cattype="51026"] .list-product .price{
    font-size: 1.2em;
    font-weight: 800;
    color: #000;
    display: block;
    /*text-align: right;*/
}
[data-cattype="51026"] .list-product .summary .price{
    text-align: right;
}

[data-cattype="51026"] .list-product .price small{
    font-size: 0.6em;
    color: #333;
}

[data-cattype="51026"] .list-product .caption{
    font-size: 0.8em;
    font-style: italic;
}

[data-cattype="51026"] .list-product .remark-bottom{
    
    width: 100%;
    text-align: center;
    font-size: 0.54em;
    font-style: italic;
    color: #666;
}






















/* Typical laptop screen size*/
@media (min-width: 1400px) {
    
    section[data-cattype="51026"].active-detail .container{
        position: relative;
    }
    
    [data-cattype="51026"]:not(.active-detail) ul.list-product li .thumbnail{
        background-position: center center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 180px;
        display: block;
    }
    [data-cattype="51026"] ul.list-product li .thumbnail img{
        opacity: 0;
    }
    

}

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 980px) {
    
    
    
    [data-cattype="51026"] .list-product > li{
        width: 32%;
    }
}

/* Mobile screen size - landscape view */
@media (max-width: 767px) {
    
    
}

/* Mobile screen size */
@media (max-width: 480px) {
    
    [data-cattype="51026"] .list-product{
        justify-content: space-between;
    }
    
    [data-cattype="51026"] .list-product > li{
        width: 48%;
    }
    
    [data-cattype="51026"] .list-product .price.price-range,
    [data-cattype="51026"] .list-product .price.price-range small{
        font-size: 0.8em;
        font-weight: 400;
    }

}