@charset "utf-8";
main{
    width: 90%;
    min-height: 645px;
    position: relative;
    margin: 0px auto;
    background: #fff;
}
#banner{
    width: 100%;
    display: block;
}
#banner .active:after{
    color: red;
}
#banner .carousel-indicators{
    bottom: 0px;
}
#banner .carousel-control-prev-icon, .carousel-control-next-icon{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.46), 0 6px 20px 0 rgba(0, 0, 0, 0.57);
    background-color: #33333380;
}
#banner .inactive{
    background-color: #b4d2dc;
    cursor: pointer;
}
#banner .active{
    background-color: #4d76bd;
    cursor: pointer;
}
#banner img{
    width: 100%;
}
#banner img:hover{
    opacity: 0.8;
    cursor: pointer;
}
#product{
    width: 100%;
    margin: 0px auto 20px auto;
    position: relative;
}
#product .column-product{
    float: left;
    width: 25%;
    padding: 10px;
}
#product .column-product img{
    width: 100%;
}
#product .column-product img:hover{
    opacity: 0.6;
    cursor: pointer;
}
#product .title{
    padding: 0px 20px;
    height: 75px;
    text-align: center;
}
#product .title a{
    color: #333;
    font-size: 12px;
    text-decoration: none;
}
#product .title a:hover{
    color: #D00101;
    text-decoration: none;
}
#product .price p{
    text-align: center;
    color: #D00101;
    font-size: 22px;
    font-weight: bold;
}
#product .button{
    padding: 15px 5px 15px 30px;
    background: linear-gradient(to right,rgb(25, 128, 10) 0%,rgb(6, 203, 57) 100%);
}
#product .button:hover{
    cursor: pointer;
    background: linear-gradient(to right,rgb(181, 46, 0) 0%,rgb(248, 204, 60) 100%);
}
#product .button a{
    color: #fff;
    font-size: 1.75rem !important;
    text-decoration: none;
}
#product .button .arrow{
    width: 25px;
    height: 33px;
    float: right;
    background: url(images/arrow-white-right.png) no-repeat;
    background-size: auto 32px;
}
#brands{
    width: 100%;
    margin: 0px auto 20px auto;
    position: relative;
}
#brands .column-brand{
    float: left;
    width: 12.5%;
    padding: 10px;
}
#brands .column-brand:hover{
    opacity: 0.6;
    cursor: pointer;
}
#brands img{
    width: 100%;
}
@media only screen and (max-width: 959px) {
    main{
        width: 100%;
    }
    #product .column-product{
        width: 50%;
    }
    #brands .column-brand{
        width: 25%;
    }
}
@media only screen and (max-width: 640px) {
    #product .column-product{
        width: 100%;
    }
    #brands .column-brand{
        width: 50%;
    }
    #banner{
        display: none;
    }
}