/*---------------------------------------------- For width 100px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 100px and larger :*/
@media only screen and (min-width: 100px) {
	.info, .link {
		width: 150px;
	}
}
/*Batas for width 100px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 300px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 300px and larger :*/
@media only screen and (min-width: 300px) {
	.small_toplink {
		display: block;
	}
	.toplink, .menu {
		display: none;
	}
	.navbar {
		display: flex;
	}
	.content_akun p, .bayar_pelanggan, .warna_product, .form_ubah_data label, .form_daftar label {
		font-size: 15px;
		font-weight: bold;
	}
	.content_akun table, .content_alamat li, .content_product li p, .content_product li a, .link p, .info p, .footer p, .kembali, .bayar_detail table, .transfer_detail, .content_checkout table, .content_keranjang table, .content_kontak, .font_desc, .desc_product, .content_riwayat, .content_tanya, .content_tanya li p, .form_ubah_data input, .form_ubah_data select, .form_ubah_password input, .form_ubah_password p, .content_upgrade, .content_upgrade select, .form_daftar input, .form_daftar select, .form_login input, .content_login, .form_password input, .form_password table, .content_lupa, .stok_produk {
		font-size: 12px;
	}
	.content_alamat p, .content_kontak p, .content_tanya p, .content_daftar p {
		font-size: 17px;
	}
	.content_product li {
		width: 44%;
	}
	.table_keranjang_1, .table_riwayat_1 {
		display: block;
	}
	.table_keranjang_2, .table_riwayat_2 {
		display: none;
	}
	.open-button {
		font-size: 12px;
		border: none;
		background-color: white;
		color: blue;
	}
	.form-popup {
		width: 200px;
		font-size: 12px;
	}
	.foto_product, .desc_product, .desc_product li {
		width: 95%;
	}
	.produk_table {
		padding-left: 5%;
	}
	.desc_product select {
		width: 120px;
	}
	.desc_product input {
		width: 80px;
	}
	.info, .link {
		width: 150px;
	}
	.link li a, .info li a {
		font-size: 12px;
		padding-left: 5px;
	}
	.link img {
		width: 25px;
	}
	.fade2 img {
		width: 250px;
	}
	.form_pesanan input, .form_pesanan select, .form_daftar input, .form_daftar select, .form_ubah_data input, .form_ubah_data select {
		width: 250px;
	}
	.pengiriman input, .pengiriman select {
		width: 200px;
	}
	.form_password input {
		width: 150px;
	}
	.sample li {
		width: 30%;
	}
}
/*Batas for width 300px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 400px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 400px and larger :*/
@media only screen and (min-width: 400px) {
	.info, .link {
		width: 45%;
	}
	.content_product li {
		width: 45%;
	}
	.produk_table {
		padding-left: 20px;
	}
}
/*Batas for width 400px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 500px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 500px and larger :*/
@media only screen and (min-width: 500px) {
	.content_product li {
		width: 29%;
	}
	.produk_table {
		padding-left: 60px;
	}
}
/*Batas for width 500px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 600px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 600px and larger :*/
@media only screen and (min-width: 600px) {
	.small_toplink, .navbar {
		display: none;
	}
	.toplink, .menu {
		display: block;
	}
	.toplink li, .toplink li a{
		font-size: 13px;
	}
	.content_akun p, .bayar_pelanggan, .warna_product, .form_ubah_data label, .form_daftar label {
		font-size: 16px;
		font-weight: bold;
	}
	.content_akun table, .content_alamat li, .content_product li p, .content_product li a, .link p, .info p, .footer p, .kembali, .bayar_detail table, .transfer_detail, .content_checkout table, .content_keranjang table, .content_kontak, .font_desc, .desc_product, .content_riwayat, .content_tanya, .content_tanya li p, .form_ubah_data input, .form_ubah_data select, .form_ubah_password input, .form_ubah_password p, .content_upgrade, .content_upgrade select, .form_daftar input, .form_daftar select, .form_login input, .content_login, .form_password input, .form_password table, .content_lupa, .stok_produk {
		font-size: 13px;
	}
	.content_alamat p, .content_kontak p, .content_tanya p, .content_daftar p {
		font-size: 18px;
	}
	.content_product li {
		width: 30%;
	}
	.table_keranjang_1, .table_riwayat_1 {
		display: none;
	}
	.table_keranjang_2, .table_riwayat_2 {
		display: block;
	}
	.open-button {
		font-size: 13px;
		border: none;
		background-color: white;
		color: blue;
	}
	.form-popup {
		width: 250px;
		font-size: 13px;
	}
	.foto_product, .desc_product {
		width: 45%;
	}
	.desc_product li {
		width: 100%;
	}
	.produk_table {
		padding-left: 10px;
	}
	.link li a, .info li a {
		font-size: 13px;
		padding-left: 5px;
	}
	.link img {
		width: 25px;
	}
	.fade2 img {
		width: 300px;
	}
	.form_pesanan input, .form_pesanan select, .form_daftar input, .form_daftar select, .form_ubah_data input, .form_ubah_data select, .pengiriman input, .pengiriman select {
		width: 300px;
	}
	.form_password input {
		width: 200px;
	}
	.sample li {
		width: 250px;
	}
}
/*Batas for width 600px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 700px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 700px and larger :*/
@media only screen and (min-width: 700px) {
	.content_product li {
		width: 22%;
	}
	.produk_table {
		padding-left: 40px;
	}
	.desc_product input {
		width: 100px;
	}
}
/*Batas for width 700px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 800px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 800px and larger :*/
@media only screen and (min-width: 800px) {
	.produk_table {
		padding-left: 80px;
	}
	.desc_product input {
		width: 120px;
	}
}
/*Batas for width 800px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 900px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 900px and larger :*/
@media only screen and (min-width: 900px) {
	.toplink li, .toplink li a{
		font-size: 15px;
	}
	.content_akun p, .bayar_pelanggan, .warna_product, .form_ubah_data label, .form_daftar label {
		font-size: 17px;
		font-weight: bold;
	}
	.content_akun table, .content_alamat li, .content_product li p, .content_product li a, .link p, .info p, .footer p, .kembali, .bayar_detail table, .transfer_detail, .content_checkout table, .content_keranjang table, .content_kontak, .font_desc, .desc_product, .content_riwayat, .content_tanya, .content_tanya li p, .form_ubah_data input, .form_ubah_data select, .form_ubah_password input, .form_ubah_password p, .content_upgrade, .content_upgrade select, .form_daftar input, .form_daftar select, .form_login input, .content_login, .form_password input, .form_password table, .content_lupa, .stok_produk {
		font-size: 15px;
	}
	.content_alamat p, .content_kontak p, .content_tanya p, .content_daftar p {
		font-size: 20px;
	}
	.content_product li {
		width: 23%;
	}
	.open-button {
		font-size: 15px;
		border: none;
		background-color: white;
		color: blue;
	}
	.form-popup {
		width: 250px;
		font-size: 15px;
	}
	.produk_table {
		padding-left: 120px;
	}
	.link li a, .info li a {
		font-size: 15px;
		padding-left: 10px;
	}
	.link img {
		width: 30px;
	}
	.fade2 img {
		width: 450px;
	}
	.form_pesanan input, .form_pesanan select, .form_daftar input, .form_daftar select, .form_ubah_data input, .form_ubah_data select {
		width: 500px;
	}
	.form_password input {
		width: 400px;
	}
}
/*Batas for width 900px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 1000px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 1000px and larger :*/
@media only screen and (min-width: 1000px) {
	.content_product li {
		width: 18%;
	}
}
/*Batas for width 1000px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 1100px and larger --------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 1100px and larger :*/
@media only screen and (min-width: 1100px) {
	.content_product li {
		width: 15%;
	}
}
/*Batas for width 1100px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/

/*---------------------------------------------- For width 1200px and larger -------------------------------------------*/
/*----------------------------------------------------------------------------------------------------------------------*/
/*Batas for width 1200px and larger :*/
@media only screen and (min-width: 1200px) {
	.fade2 img {
		width: 600px;
	}
}
/*Batas for width 1200px and larger :*/
/*----------------------------------------------------------------------------------------------------------------------*/