@media screen and (min-width: 992px) {
.tableproduk {
font-size:12px; margin-bottom:30px;
  width: 100%;
}

.tableproduk td, .tableproduk th {
  border: 1px solid #f79c00;
  padding: 8px;
}
.tableproduk th {
  font-size:16px;
  font-weight:bold;
  padding: 8px;
}
.tableproduk tr:nth-child(even){background-color: #F9E7C4;}

.tableproduk tr:hover {background-color: #f79c00;}
		.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #f79c00 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 190px;
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
	/* Create a simple white box, and add the shadow for the initial state */
.make-it-slow {
	 box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3), -5px -5px 5px 5px rgba(0, 0, 0, 0.3);

  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
   box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3), -10px -10px 10px 10px rgba(0, 0, 0, 0.3);
}
	@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-webkit-transform: scale(1.5,1.5);
    }
}
#zoomimg {
  padding: 50px;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

#zoomimg:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.cabout1{
	margin:-70px 0 0 0;
	}
.cabout2{
	 margin:0 0 50px 0;
	}
.cabout3{
	 font-size:20px; position:relative; z-index:1;
	}
.cabout4{
	 padding:0; width:100%; height:100%;
	}
#cabout5{
	 position:absolute; z-index:2; top:550px; right:50px; padding:0; background:none; text-align:center;
	}
#cabout51{
	 position:absolute; z-index:2; top:250px; left:550px; padding:0; background:none; text-align:center;
	}
#cabout52{
	 position:absolute; z-index:2; top:550px; left:600px; padding:0; background:none; text-align:center;
	}
.cabout6{
	display:flex;
	line-height:1;
	}
#cabout7{
	 font-size:50px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
#cabout71{
	 font-size:30px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
#cabout72{
	 font-size:30px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
.cabout8{
	 flex:60%;
	 font-size:14px;
	 padding: 0;
	 color:#6D6E71;
	}
h2.cabout9{
	font-size:60px; margin-bottom:20px; margin-top:0; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #999; color:#f79c00 !important;
	}
p.cabout10{
	font-size:14px; color:#6D6E71;
	}
.cabout11{
	width:90%; margin:0 auto;
	}
#cabout12{
	font-size:50px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
#cabout13{
	font-size:40px; margin-bottom:50px; margin-top:50px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #999; color:#f79c00 !important;
	}
.cabout14{
	font-size:40px; color:#f79c00 !important;
	}
.cabout15{
	padding:0; margin:0 auto; width:70%;
	}
}

@media screen and (max-width: 991px) {
.tableproduk {
font-size:10px; margin-bottom:30px;
  width: 100%;
}

.tableproduk td, .tableproduk th {
  border: 1px solid #f79c00;
  padding: 8px;
}
.tableproduk th {
  font-size:12px;
  font-weight:bold;
  padding: 8px;
}
.tableproduk tr:nth-child(even){background-color: #F9E7C4;}

.tableproduk tr:hover {background-color: #f79c00;}
		.animate-charcter
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #f79c00 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
      font-size: 190px;
}
@keyframes textclip {
  to {
    background-position: 200% center;
  }
}
	/* Create a simple white box, and add the shadow for the initial state */
.make-it-slow {
	 box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3), -5px -5px 5px 5px rgba(0, 0, 0, 0.3);

  transition: box-shadow 0.3s ease-in-out;
}

/* Transition to a bigger shadow on hover */
.make-it-slow:hover {
   box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.3), -10px -10px 10px 10px rgba(0, 0, 0, 0.3);
}
	@-webkit-keyframes zoom {
    from {
    	-webkit-transform: scale(1,1);
    }
    to {
    	-webkit-transform: scale(1.5,1.5);
    }
}
#zoomimg {
  padding: 50px;
  transition: transform .2s; /* Animation */
  margin: 0 auto;
}

#zoomimg:hover {
  transform: scale(1.5); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.cabout1{
	margin:-70px 0 0 0;
	}
.cabout2{
	margin:0 0 50px 0;
	overflow:clip;
	}
.cabout3{
	 font-size:20px; position:relative; z-index:1;/* right:300px;*/
	}
.cabout4{
	 padding:0; height:500px;
	}
#cabout5{
	 position:absolute; z-index:2; top:350px; right:50px; padding:0; background:none; text-align:center;
	}
#cabout51{
	 position:absolute; z-index:2; top:150px; left:50px; padding:0; background:none; text-align:center;
	}
#cabout52{
	 position:absolute; z-index:2; top:400px; left:50px; padding:0; background:none; text-align:center;
	}
.cabout6{
	display:flex;
	}
#cabout7{
	 font-size:30px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
#cabout71{
	 font-size:20px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
#cabout72{
	 font-size:20px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
.cabout8{
	 flex:60%;
	 font-size:14px;
	 line-height:1.5;
	 padding: 30px 0 30px 0;
	 color:#6D6E71;
	 text-align:justify;
	}
h2.cabout9{
	font-size:30px; margin-bottom:10px; font-style:italic;font-family:Arial Narrow; text-shadow:2px 2px #999; color:#f79c00 !important; line-height:1;
}
p.cabout10{
	font-size:10px; color:#6D6E71;
	}
.section-title h2:before, .section-title h2:after{
background:none;
width:auto;
}
.cabout11{
	width:100%; margin:0 auto;
	}
#cabout12{
	font-size:30px; font-style:italic;font-family:Arial Narrow; text-shadow:4px 4px #FFFFFF; color:#f79c00;
	}
#cabout13{
	font-size:40px; font-style:italic;font-family:Arial Narrow; text-shadow:2px 2px #999; color:#f79c00 !important;
	}
.cabout14{
	font-size:30px; color:#f79c00 !important;
	}
.cabout15{
	padding:0; margin:0 auto; width:90%;
	}
}