﻿
@media only screen and (min-width: 1024px) {
    /*.page-listproduct{
        display:none;
    }*/
    .product-info .header-tmp {
        display: block;
    }
}

@media screen and (max-width: 1170px) {
    main.main-content {
        padding: 0;
        margin-top: 0;
    }
}

@media screen and (max-width: 1024px) {
    /*main.main-content {
        margin-top: 55px;
    }
    .page-listproduct {
        z-index: 99;
    }
    .item-slider, .list-avatar, .item-avatar {
        position: relative !important;
    }
    .item-slider .list-avatar .item-avatar img{
        object-fit:contain;
    }
    .item-slider .list-slide{
        top:50%;
        transform:translateY(-50%);
    }
    .list-avatar{
        display:block;
    }
    .list-avatar .item-avatar{
        overflow:hidden;
        width:0;
        transition: width 1s ease-out,transform 1s ease-out,opacity 1s ease-out;
    }
    .list-avatar .item-avatar .avatar-main{
        transition: opacity .2s ease-in,width .2s ease-in;
    }
    .list-avatar .item-avatar.active{
        width:100%;
    }
    .product-info {
        position: relative;
        height: auto;
        left: 0;
        padding-top: 20px;
    }*/
    .product-info .info-panel h3{
        font-size:14px;
    }
    .list-avatar .item-avatar .avatar-main {
        width: auto;
    }
}
@media screen and (max-width: 768px) {
    .product-info .info-panel h3 {
        font-size: 12px;
    }
}
@media screen and (max-width: 750px) {
    .list-avatar .item-avatar{
        padding-top:65px;
    }
}

@media screen and (max-width: 550px) {
    /*.product-info {
        padding: 20px 20px 32px 20px;
    }*/
}

@media all and (min-width: 425px){
    .product-info {
        left: 30% !important;
    }
    .product-info .info-panel {
        padding: 0 !important;
    }
}

/*@media all and (min-width: 768px) {
    .product-info .info-panel {
        padding: 6px 0 !important;
    }
}*/

@media all and (min-width: 1024px) {
    .product-info .info-panel {
        padding: 8px 0 !important;
    }
}

@media all and (min-width: 1170px) {
    .product-info {
        left: 20% !important;
    }
    .product-info .info-panel {
        padding: 16px 0 !important;
    }
}

@media all and (orientation:portrait) {
    .product-info{
        left:10% !important;
    }
}