/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/**
 * WHMCS Base Order Form Stylesheet
 *
 * This stylesheet defines the css rules used by the base order form.
 *
 * @project   WHMCS
 * @cssdoc    version 1.0-pre
 * @package   WHMCS
 * @author    WHMCS Limited <development@whmcs.com>
 * @copyright Copyright (c) WHMCS Limited 2005-2015
 * @license   http://www.whmcs.com/license/
 * @link      http://www.whmcs.com/
 */

a:focus{text-decoration:none;}
.f-hover {
    transition: transform .5s;
}
.f-hover:hover {
    cursor: pointer;
    transform: scale(1.1);
}

@media only screen and (max-width: 600px) {
  .categorymobile{
    display: block;
  }
  .categorydesktop{
    display: none;
  }
}

@media only screen and (min-width: 600px) {
  .categorydesktop{
    display: block;
  }
  .categorymobile{
    display: none;
  }
}



#produk{}
#produk .kartu{float: none;}
.kartu{display: inline-block;}
.kartu{width:257px;padding-top:15px;}
.kartu{float:none;}
.kartu .kartu__produk{margin-bottom:10px;background:aliceblue;border-radius:5px;}
    .kartu .kartu__produk .produk__gamar,
    .kartu .kartu__produk .produk__judul,
    .kartu .kartu__produk .produk__harga,
    .kartu .kartu__produk .produk__billing{padding: 15px 15px 0;}
    .kartu .kartu__produk .produk__gamar{display:block;height: 161px;box-sizing: content-box;}
        .kartu .kartu__produk .produk__gamar img{width:173px;height:auto;vertical-align:middle;}
    .kartu .kartu__produk .produk__judul{display:block;height: 60px; overflow: hidden; font-weight: 600; color: #455A64;}
        .kartu .kartu__produk .produk__judul h3{font-size: 16px;margin:0;padding:0;}
    .kartu .kartu__produk .produk__harga{font-size: 20px; font-weight: 700; color: rgba(0,0,0,0.54);}
        .kartu .kartu__produk .produk__harga small{font-size:14px;}
    .kartu .kartu__produk .produk__billing{color: rgba(0,0,0,0.54);padding-bottom: 15px;min-height: 50px;}
.kartu .kartu__baten{}

#products{}
    #products .produknya{float:none;margin:0 auto;display: inline-block;width: 271px;}
    #products .cards{vertical-align:top;min-height:300px;overflow: hidden;position: relative;margin-top:25px;/*float:none;*/display: inline-block;}
    #products .cards a,
    #products .cards a:hover,
    #products .cards a:focus,
    #products .cards a:active,
    #products .cards a:visited{text-decoration:none;}
        #products .card__image{box-sizing: content-box;vertical-align: middle;/*height: 173px;*/}
            #products .card__image img{width:100%;}
        #products .card__title{padding-top: 15px;height: 60px; overflow: hidden; font-weight: 600; color: #455A64;}
            #products .card__title h3{font-size: 18px;margin:0;padding:0;}
        #products .card__price{font-size: 23px; font-weight: 700; color: rgba(0,0,0,0.54);}
            #products .card__price small{font-size:14px;}
        #products .card__billing{color: rgba(0,0,0,0.54);padding-bottom: 15px;min-height: 50px;}
        
        #products .card__title,
        #products .card__price,
        #products .card__billing{text-align:left;}
        
        #products .card__button{}