* {
	box-sizing: border-box;
}

.row::after {
	content: "";
	clear: both;
	display: table;
}

[class*="col-"] {
	float: left;
	border-style: solid; 
	margin: 0;
}

.col-12 {width: 12%;} 		/* OK */
.col-15 {width: 15%;} 		/* OK */
.col-20 {width: 20%;}
.col-20-box {
	width: 20%;
	border-left-color: red;
	border-right-color: black;
	border-bottom-color: red;
	border-top-color: red;
}
.col-20-bl {
	width: 20%;
	border-left-color: white;
	border-right-color: white;
	border-bottom-color: white;
	border-top-color: white;
}
.col-26 {width: 26.66%;}
.col-30 {width: 30%;}
.col-40 {width: 40%;}
.col-33 {width: 33.33%;}
.col-60 {width: 60%;}
.col-60-bl {
	width: 60%;
	border-color: black;
	background-color: black;
	color: white;
}
.col-60-box {
	width: 60%;
	border-color: black;
}
.col-71 {width: 71.42%;}
.col-80 {width: 80%;}

@media only screen and (max-width: 768px) {
	
	div.whatsapp-cs-lite p {
		position: absolute;
		top: 20%;
		left: 50%;
		font-family: Calibri, sans-serif;
		text-decoration: none;
		color: black;
		font-size: 0.8em;
	}
	

	section.mobile {background-color: black; /* border: 1px solid black; */}
	img.mob {background-color: white; border: 1px solid #43729d; width: max-100%;}
	.marquee-mobile {width: 10%;}
	.tab-mob {font-size: 2vw;}
	.col-m-0 {width: 0;}
	.col-m-1 {
		width: 1%;
	}
	.col-m-1-box {
		width: 1%;
		border: 1px solid black;
	}
	.col-m-7 {width: 7.14%;}
	.col-m-10 {width: 10%;}
	.col-m-14 {width: 14.28%;}	
	.col-m-16 {width: 16%;}
	.col-m-19 {width: 19.6%;}
	.col-m-28 {width: 28.57%;}
	.col-m-20 {width: 20%;}
	.col-m-24 {width: 24.5%;}
	.col-m-26 {width: 26.66%;}
	.col-m-32 {
		width: 32.66%;
		font-size: 0.74em;
	}	
	.col-m-32 ul {
		font-size: 1em;
	}
	.col-m-33 {width: 33.33%;}
	.col-m-49 {width: 49%;}
	.col-m-65 {width: 65.34%;}
	.col-m-71 {width: 71.42%;}
	.col-m-80 {width: 80%;}
	.col-m-98 {width: 98%;}
	

	.col-m-98-box {
		width: 98%;
		border-color: black;
		font-size: 0.53em;
	}
	.col-m-98.office img {width: 50%;}
	.col-m-100 {width: 100%;}
}

[class*="header-"] {
	background-repeat: no-repeat;
	background-position: center top;
	background-size: 100%; 
	text-align: center;
	font-family: Calibri, sans-serif;
}

[class*="white"] {
	border-color: white;
}

.header-black {
	background-image: url('../images/indopowder_background_black.svg');
}

.header-white {
	background-image: url('../images/indopowder_background_white.svg');
	
}

[class*="footer"] {
	text-decoration: none;
	text-align: right;
	font-family: Calibri, sans-serif;
}

img {
	display: block;
	margin: auto;
	max-width: 100%;
}

.whatsapp-cs {
	position: relative;
	border: 3px solid #43729d;
}

.whatsapp-cs p {
	position: absolute;
	top: 20%;
	left: 40%;
	font-family: Calibri, sans-serif;
	text-decoration: none;
	color: black;
	font-size: 0.8em;
}

h1 {
	font-size: 10vw;
	margin: 0;
	padding: 0;
}

h2 {
	font-size: 5vw;
	margin-top: 100px;
	padding-top: 100px;
}

h3 {
	font-size: 1.25em;
	margin: 0;
	padding-left: 16px;
}

[class*="-us"] {
	text-align: center;
	font-size: 1em;
	margin: 0;
	padding: 0;
}

.content-delivery {
	text-align: center;
}

.content-delivery h3 {
	font-size: 5vw;
}

[class*="content-"] {
	font-family: Calibri, sans-serif;
}

.content-black {
	background-color: black;
}

.khusus {
	visibility: hidden;
}

.variant-product {
	font-family: Bahnschrift, serif;
}

.variant-product h4 {
	padding-top: 0;
	padding-left: 10px;
	padding-bottom: 0;
}


ul {

	list-style-position: outside;
	list-style-type: circle;
	list-style-image: url("../images/green-colored-bullet.png");

    padding: 0;
    margin: 10px;
	font-size: 1.5vw; 
}

.shipping {
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: black;
}

.pembelian {
	display: flex;
	flex-direction: row;
	justify-content: center;
}

.pembelian h3 {
	position: absolute;
	top: 10px;
	left: 180px;
	font-family: Calibri, sans-serif;
	font-size: 3em;
}


.variant-choco {
	list-style-type: square;
	list-style-image: url("../images/chocolate.gif");
}

.variant-coffee {
	list-style-type: circle;
	list-style-image: url("../images/coffee-bean.png");
}

.variant-cheese {
	list-style-type: square;
	list-style-image: url("../images/cheese.png");
}

.variant-sugar {
	list-style-type: circle;
	list-style-image: url("../images/brown-sugar.png");
}

.variant-tea {
	list-style-type: square;
	list-style-image: url("../images/lemon-tea.png");
}

.variant-squash {
	list-style-type: circle;
	list-style-image: url("../images/bubuk_minuman_indopowder_list-style.png");
}

li {
	
    padding-left: 0;
}

[class*="download"] {
	font-family: Calibri, sans-serif;
	border-radius: 10px;
	border-width: 3px;
	border-style: solid;
	text-align: center;
    text-decoration: none;
    display: inline-block; 
    padding-left: 10px;
	padding-right: 10px;
    font-weight: bold;
}

a.download-harga {
	margin: 0;
	border-color: white;
	background-color: black;
	color: white;
}

a.download-variant {
	margin-top: 50px;
	margin-left: 10px;
	border-color: black;
	background-color: white;   
	font-size: 1.5vw;	
    color: black;
}

.download-harga:link {
    background-color: black;   
    color: white;
}

.download-variant:link {
    background-color: white;   
    color: black;
}

.download-harga:visited,
.download-variant:visited {
    color: #0070c0;
}

.download-harga:hover, 
.download-harga:active {
    background-color: white;
    color: black;
	border-color: red;
	cursor: pointer;
}

.download-variant:hover, 
.download-variant:active {
    background-color: black;
    color: white;
	border-color: red;
	cursor: pointer;
}

.office {
	overflow: auto;
}

.office img {
	float: right;
	padding-right: 90px;
}

.office div {
	padding-top: 20px;
}

.foot-note {
	list-style-type: circle;
	list-style-image: url("../images/bubuk_minuman_indopowder_list-style.png");
	font-weight: bold;
	margin-top: 100px;
	padding-top: 10px;
	padding-left: 0;
	padding-bottom: 0;
}

.foot-note li {
	margin: 0;
	padding: 0;
}

a li:hover,
a img:hover,
.whatsapp-cs:hover {
	border-color: red;
	/* Start the shake animation and make the animation last for 0.5 seconds */
	animation: shake 0.5s;
	/* When animation is finished, start again */
	animation-iteration-count: infinite;
}

@keyframes shake {
	0% {transform: translate(1px, 1px) rotate(0deg);}
	10% {transform: translate(-1px, -2px) rotate(-1deg);}
	20% {transform: translate(-3px, 0px) rotate(1deg);}
	30% {transform: translate(3px, 2px) rotate(0deg);}
	40% {transform: translate(1px, -1px) rotate(1deg);}
	50% {transform: translate(-1px, 2px) rotate(-1deg);}
	60% {transform: translate(-3px, 1px) rotate(0deg);}
	70% {transform: translate(3px, 1px) rotate(-1deg);}
	80% {transform: translate(-1px, -1px) rotate(1deg);}
	90% {transform: translate(1px, 2px) rotate(0deg);}
	100% {transform: translate(1px, -2px) rotate(-1deg);}
}