@charset "utf-8";
/* CSS Document */

* {
    box-sizing: border-box;
}
table {
  border-collapse: collapse;
  width: 95%;
}

th{
	text-align: center;
}

td {
  text-align: center;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2}

th {
  background-color: #4CAF50;
  color: white;
}
.tabelharga {
	background-color: #FFFFFF;
	text-align:center;
	margin:15px;
}
	

.boxcontainer {
	background-image: -webkit-linear-gradient(270deg,rgba(123,4,6,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(123,4,6,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(123,4,6,1.00) 0%,rgba(255,0,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(123,4,6,1.00) 0%,rgba(255,0,0,1.00) 100%);
	padding-bottom: 5%;
}
.boxsm {
	float:left;
	min-width: 10%;
	padding: 0px;
	margin-top: 3%;
	margin-right: 1%;
	margin-bottom: 1%;
	margin-left: 1%;
	min-height: 80px;
	background-color: #FBF8F8;
	-webkit-box-shadow: 2px 3px 10px;
	box-shadow: 2px 3px 10px;
}
.boxsm:hover {
	-webkit-box-shadow: 2px 2px 20px 5px #FFFD00;
	box-shadow: 2px 2px 20px 5px #FFFD00;
}
.box4 {
	float:left;
	min-width: 20%;
	padding: 2px;
	margin-top: 3%;
	margin-right: 1%;
	margin-bottom: 1%;
	margin-left: 1%;
	min-height: 270px;
	background-color: #FBF8F8;
	-webkit-box-shadow: 2px 3px 10px;
	box-shadow: 2px 3px 10px;
}
.box4:hover {
	-webkit-box-shadow: 2px 2px 20px 5px #FFFD00;
	box-shadow: 2px 2px 20px 5px #FFFD00;
}
.hbred {
	width: 100%;
	height: 40px;
	text-align: center;
	color: #FFFD00;
	padding-top: 10px;
	background-image: url(../0/redbck.png);
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: 100% 40px;
}
.box2 {
    float: left;
    min-width: 40%;
    padding: 2px;
    margin-top: 3%;
    margin-right: 1%;
    margin-bottom: 1%;
    margin-left: 1%;
    min-height: 270px;
    background-color: #FFFFFF;
    -webkit-box-shadow: 2px 3px 10px;
    box-shadow: 2px 3px 10px;
}
.box2:hover {
	-webkit-box-shadow: 2px 2px 20px 5px #FFFD00;
	box-shadow: 2px 2px 20px 5px #FFFD00;
}
.h2red{
	background-image: -webkit-linear-gradient(270deg,rgba(200,21,21,1.00) 0%,rgba(150,2,2,1.00) 0%,rgba(246,28,28,1.00) 71.50%,rgba(255,39,39,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(200,21,21,1.00) 0%,rgba(150,2,2,1.00) 0%,rgba(246,28,28,1.00) 71.50%,rgba(255,39,39,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(200,21,21,1.00) 0%,rgba(150,2,2,1.00) 0%,rgba(246,28,28,1.00) 71.50%,rgba(255,39,39,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(200,21,21,1.00) 0%,rgba(150,2,2,1.00) 0%,rgba(246,28,28,1.00) 71.50%,rgba(255,39,39,1.00) 100%);
	font-weight: bold;
	color: white;
	text-align: center;
}
.discprice {
	color: white;
	text-align: center;
	margin-top: 10px;
}
/* ~~ Harga ~~ */
.hari {
	color: #FFFFFF;

	background-image: -webkit-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(213,99,0,1.00) 34.71%,rgba(197,43,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(213,99,0,1.00) 34.71%,rgba(197,43,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,182,0,1.00) 0%,rgba(213,99,0,1.00) 34.71%,rgba(197,43,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,182,0,1.00) 0%,rgba(213,99,0,1.00) 34.71%,rgba(197,43,0,1.00) 100%);
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: 100% 70px;
}

.haridpn {
	font-family: times new roman;
	font-size: 50px;
	font-weight: bolder;
	horizontal-align:50%;	text-shadow: 2px 10px 2px #A09A9B;
	text-shadow: 1px 1px 0 #FFFFFF;
	
}
.hariblk {
	font-family: times new roman;
	font-size: 15px;
	font-weight: small;
	color: #FFF8F8
}
.msaktif {
	font-family: times new roman;
	font-size: 20px;
	font-weight: bolder;
	horizontal-align:50%;	
	
	
}
.logotag{
	height: 50px;
	width: 100%;
	background-size: 99% 100%;
	background-repeat: no-repeat;
	text-shadow: 0px 2px 3px;
	-webkit-box-shadow: 0px 2px 6px #605D5D;
	box-shadow: 0px 2px 8px #605D5D;
	margin-bottom: 10px;
}
.logotag3c {
	height: 80px;
	width: 100%;
	background-size: 99% 100%;
	background-repeat: no-repeat;
	text-shadow: 0px 2px 3px;
	-webkit-box-shadow: 0px 2px 6px #605D5D;
	box-shadow: 0px 2px 8px #605D5D;
	margin-bottom: 10px;
}
.prodbox{
	height: 100%;
	width: 100%;
	background-size: 99% 100%;
	background-repeat: no-repeat;
	-webkit-box-shadow: 0px 2px 6px #605D5D;
	box-shadow: 0px 2px 8px #605D5D;
	margin-bottom: 10px;
}
.hrgdpn {
	font-family: source-sans-pro, "Trebuchet MS", Verdana, Arial, sans-serif;
	font-size: 40px;
	font-weight: 400;
	text-align: center;
	font-style: normal;
}
.rp {
	font-size: medium;
	vertical-align: 150%;
	font-weight: bolder;

	
}
.hrgblk {
	font-family: Arial;
	font-size: small;
	font-weight: bolder;
	}
.button {
	background: #FF0004
	
}
.cart{
	margin-top: 0px
	}

.button {
	margin-top: 0px;
	background-color: #FF0004;
	text-align: center;
	color: #FFFD00;
	height: 50px;
	width: 100%;
	font-weight: bold;
	font-size: large;
}
.button:hover {
	color: #0A0A0A;
	background-image: -webkit-linear-gradient(270deg,rgba(255,142,0,1.00) 0%,rgba(255,229,0,1.00) 78.24%,rgba(255,131,0,1.00) 100%);
	background-image: -moz-linear-gradient(270deg,rgba(255,142,0,1.00) 0%,rgba(255,229,0,1.00) 78.24%,rgba(255,131,0,1.00) 100%);
	background-image: -o-linear-gradient(270deg,rgba(255,142,0,1.00) 0%,rgba(255,229,0,1.00) 78.24%,rgba(255,131,0,1.00) 100%);
	background-image: linear-gradient(180deg,rgba(255,142,0,1.00) 0%,rgba(255,229,0,1.00) 78.24%,rgba(255,131,0,1.00) 100%);
	
}

	
.clearfix{
	margin-left: 7%;
	margin-right:-100%;
	max-width: 100%;
	text-align: center;
	left: 10px;
	right: 50px;
}
.clearfix::after {
    content: "";
    clear: both;
    display: table;

}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 768px) {
    .plan {
        width: 100%;
    }
}