/* CSS Document */


ol, ul {
  list-style: none;
}

/* .logo-board {
  background-color: #ffffff !important;
  margin: auto;
  height: 340px;
  width: 35%;
  padding: 10px;
  text-align: center;
  position: absolute;
  top: 0px;
  z-index: 99;
} */

.scene {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow-x: hidden !important;
  font-size: 5rem;
  overflow-y: hidden !important;
}

.scene-transition {
	height: 764px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-x: hidden !important;
	font-size: 5rem;
	overflow-y: hidden !important;
	z-index: 99 !important;
	position: absolute;
	margin-top: -355px;
	/* outline: 1px solid red; */
}

.scene-transition2 {
	height: 1188px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-x: hidden !important;
	font-size: 5rem;
	overflow-y: hidden !important;
	z-index: 99 !important;
	position: absolute;
	margin-top: -100px;
	/* outline: 1px solid red; */
}

.scene-transition3 {
	height: 1250px;
	width: 100vw;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-x: hidden !important;
	font-size: 5rem;
	overflow-y: hidden !important;
	z-index: 99 !important;
	position: absolute;
	margin-top: -355px;
	/* outline: 1px solid red; */
}

.scene-transition4 {
	height: 1172px;
	/* width: 100vw; */
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow-x: hidden !important;
	font-size: 5rem;
	overflow-y: hidden !important;
	z-index: 99 !important;
	position: absolute;
	margin-top: -355px;
	/* outline: 1px solid blue; */
}

.scene-big-cta {
	/* height: 550px; */
	margin: 0 auto;
	text-align: center;
	margin-top: -220px;
	min-height: 60vh;
}
.cta-title {
	font-size: 72px;
	font-weight: bold;
	/* font-family: 'D-DIN Condensed', sans-serif; */
	color: #6CA03F;
}
.prolog-product {
	/* font-family: 'Oswald'; */
	font-weight: 200;
	color: white;
	text-align: center;
	font-size: 20px;
	line-height: 26px;
	width: 60%;
	margin-bottom:30px;
	/* margin-left: -120px; */
}

.scene.scene-01 {
	background: url('../b.jpg') no-repeat;
	background-size: cover;
	height: 110vh;
}
.scene.scene-02 {
	background: url('../scene03-bg.jpg') no-repeat;
	background-size: cover;
	height: 1300px;
}

.scene.fields2 {
	background: url('../fields2.png') no-repeat;
	background-size: 100%;
}

.scene.scene-03 {
	background: url('../scene04b-bg.jpg') no-repeat;
	background-size: 100%;
	height: 1225px;
	margin-top: 257px;
}

.hand-droplet {
	width : 700px;
	height: 100%;
	background-size: 95% !important;
	left: 0px;
	position: absolute !important;
	z-index: 101 !important;
}

.scene.tunas {
	background: url('../scene03-tunas-a.png') no-repeat;
	background-size: cover;
	left: 0px;
	position: absolute;
}

.scene.bebatuan {
	background: url('../bebatuan2.png') no-repeat;
	background-size: 100%;
	/* background-color: #89B2C8; */
}

.scene.scene-04 {
	background: url('../abstract-medical-background.jpg') no-repeat;
	background-size: cover;
	height: 1500px;
	margin-top: 360px;
	/* outline: 1px solid pink; */
}
/* .quot-rotator {
	margin-top: 360px;
} */

.tangan-lab {
	background: url('../tangan-lab.png') no-repeat;
	width : 1100px;
	height: 100%;
	background-size: 95% !important;
	left: -170px;
	margin-top: -200px;
	position: relative !important;
	z-index: 101 !important;
}
.scene-home-numbers {
	background: url('../bg-lightblue.png') repeat-x !important;
	height: 650px !important;
	margin-top: 200px;
	/* background: #e3eef4 !important; */
}
.scene-bahan {
	background: url('../bg-bahan.jpg') no-repeat;
	background-color: #ffffff;
	background-size: cover;
	/* height: 1881px !important; */
	/* height: 2098px !important; */
	margin-top: -89px;
}
.scene-insta {
	/* background-color: white; */
	/* height: 881px; */
	/* margin-top: 100px; */
	min-height: 550px;
	height: 550px;
}
.container-product-main-display {
	/* width: 1200px; */
	text-align: center;
	/* margin-left: -200px; */
	display: flex;
	margin: 0 auto;
}
.product-main-display {
	/* float: left;  */
	width: 300px;
	height: 300px;
	border-radius: 15px;
	border-radius: 15px;
	background-color:#FFCC00;
	margin: 10px;
}
.product-main-display.apro {
	/* float: left;  */
	/* width: 300px;
	height: 300px; */
	background-image:url('../apro.jpg'); background-size:cover;
}
.product-main-display.apro:hover {
	background-color: #ff4e11;
	background-image:url('../apro-x.jpg'); 
	background-size:cover;
	cursor: pointer;
	-webkit-animation: breath 0.2s linear;
}

@-webkit-keyframes breath {
 0%   {  background-size: 120% auto; }
 100%  {  background-size: 100% auto; }      
}

.product-main-display.oppamint {
	/* float: left;  */
	/* width: 300px;
	height: 300px; */
	background-image:url('../oppamint.jpg'); background-size:cover;
}
.product-main-display.oppamint:hover {
	background-color: #C72127;
	background-image:url('../oppamint-x.jpg'); background-size:cover;
	cursor: pointer;
	-webkit-animation: breath 0.2s linear;
}
.product-main-display.optinos {
	/* float: left;  */
	/* width: 300px;
	height: 300px; */
	background-image:url('../optinos.jpg'); background-size:cover;
}
.product-main-display.optinos:hover {
	background-color: #2b2b2b;
	background-image:url('../optinos-x.jpg'); background-size:cover;
	cursor: pointer;
	-webkit-animation: breath 0.2s linear;
}
.product-main-display.momcaps {
	/* float: left; 
	width: 300px;
	height: 300px; */
	background-image:url('../momcaps.jpg'); background-size:cover;
}
.product-main-display.momcaps:hover {
	background-color: #52a8bf;
	background-image:url('../momcaps-x.jpg'); background-size:cover;
	cursor: pointer;
	-webkit-animation: breath 0.2s linear;
}
.prdk-lbl {
	display: none;
	float: left; 
	width: 300px;
	height: 300px;
}
.prdk-lbl:hover {
	display: block;
	float: left; 
	width: 300px;
	height: 300px;
}
.cta-heksa {
	color: #6D9B43;
}
.cta-heksa:hover {
	color: #2F5E12;
}

.full-row {
	width: 100%;
}
.footerhome {
	text-align: center;
}
.scene-footer {
	/* margin-top: 136px !important; */
	margin-top: 70px;
	min-height: 370px;
}



/* Clouds START */
#clouds{
    
    background: none;
    margin-top: -950px;
}


.cloud {
    position: relative; 
}
.butterfly, .kupu, .boat {
    position: relative; 
}

.x0 {
    -webkit-animation: moveclouds0 85s linear infinite;
    -moz-animation: moveclouds0 85s linear infinite;
    -o-animation: moveclouds0 85s linear infinite;
}

.x1 {
	top:-400px;
    -webkit-animation: moveclouds 85s linear infinite;
    -moz-animation: moveclouds 85s linear infinite;
    -o-animation: moveclouds 85s linear infinite;
}

.xx1 {
	top: -400px;
	margin-top: 320px;
    -webkit-animation: movebutterfly 28s linear infinite;
    -moz-animation: movebutterfly 28s linear infinite;
    -o-animation: movebutterfly 28s linear infinite;
	animation-delay: 0.3s;
	transition-timing-function: ease;
}

.hinggap {
    -webkit-animation: movekupu 28s linear infinite;
    -moz-animation: movekupu 28s linear infinite;
    -o-animation: movekupu 28s linear infinite;
	animation-delay: 0.3s;
	transition-timing-function: ease;
}
/* .ngambang {
    -webkit-animation: movengambangz 3s linear infinite ;
    -moz-animation: movengambangz 3s linear infinite;
    -o-animation: movengambangz 3s linear infinite;
	animation-delay: 0.3s;
	/* transition-timing-function: ease-in-out; */
	animation: floating 3.5s ease-in-out infinite;
}
@keyframes floating {
  0%, 100% {
	transform: translateY(-5px) rotate(0.5deg);
  }
  50% {
	transform: translateY(5px) rotate(-0.3deg);
  }
} */


.x2 {
    top:0px;
	position: absolute;
    -webkit-animation: moveclouds2 66s linear infinite;
    -moz-animation: moveclouds2 66s linear infinite;
    -o-animation: moveclouds2 66s linear infinite;
}

.x3 {
    top:0px;
	position: absolute;
    -webkit-animation: moveclouds3 64s linear infinite;
    -moz-animation: moveclouds3 64s linear infinite;
    -o-animation: moveclouds3 64s linear infinite;
}

.x4 {
    margin-top:-520px;
	opacity:0.4;
	position: relative;
    -webkit-animation: moveclouds4 38s linear infinite;
    -moz-animation: moveclouds4 38s linear infinite;
    -o-animation: moveclouds4 38s linear infinite;
}
.x4fog {
    margin-top: 320px !important;
	opacity:0.6 !important;
	position: relative;
    -webkit-animation: moveclouds4fog 58s linear infinite;
    -moz-animation: moveclouds4fog 58s linear infinite;
    -o-animation: moveclouds4fog 58s linear infinite;
}

.x5 {
    margin-top:-850px;
	position: relative;
    -webkit-animation: moveclouds5 32s linear infinite;
    -moz-animation: moveclouds5 32s linear infinite;
    -o-animation: moveclouds5 32s linear infinite;
}

.x6 {
	position: relative;
    -webkit-animation: moveclouds6 70s linear infinite;
    -moz-animation: moveclouds6 70s linear infinite;
    -o-animation: moveclouds6 70s linear infinite;
}

@-webkit-keyframes movebutterfly {
    0% {left: 120px; top: 320px;}
	33% {left: 120px; top: 320px;}
	35% {left: 300px; top: -120px;}
	43% {left: 320px; top: -120px;}
	44% {left: 420px; top: -100px;}
	46% {left: 540px; top: -20px;}
	60% {left: 510px; top: -20px;}
	64% {left: 510px; top: -20px;}
	66% {left: 510px; top: -20px;}
	68% {left: 910px; top: -60px;}
	72% {left: 910px; top: -60px;}
	76% {left: 1110px; top: -90px;}
	82% {left: 1110px; top: -90px;}
	92% {left: 2100px; top: -620px;}
    100% {left: 2100px;}
}
@-moz-keyframes movebutterfly {
    0% {left: 120px; top: 320px;}
	33% {left: 120px; top: 320px;}
	35% {left: 300px; top: -120px;}
	43% {left: 320px; top: -120px;}
	44% {left: 420px; top: -100px;}
	46% {left: 540px; top: -20px;}
	60% {left: 510px; top: -20px;}
	64% {left: 510px; top: -20px;}
	66% {left: 510px; top: -20px;}
	68% {left: 910px; top: -60px;}
	72% {left: 910px; top: -60px;}
	76% {left: 1110px; top: -90px;}
	82% {left: 1110px; top: -90px;}
	92% {left: 2100px; top: -620px;}
    100% {left: 2100px;}
}
@-o-keyframes movebutterfly {
      0% {left: 120px; top: 320px;}
	33% {left: 120px; top: 320px;}
	35% {left: 300px; top: -120px;}
	43% {left: 320px; top: -120px;}
	44% {left: 420px; top: -100px;}
	46% {left: 540px; top: -20px;}
	60% {left: 510px; top: -20px;}
	64% {left: 510px; top: -20px;}
	66% {left: 510px; top: -20px;}
	68% {left: 910px; top: -60px;}
	72% {left: 910px; top: -60px;}
	76% {left: 1110px; top: -90px;}
	82% {left: 1110px; top: -90px;}
	92% {left: 2100px; top: -620px;}
    100% {left: 2100px;}
}





@-webkit-keyframes movekupu {
    0% {left: 5000px; top: top: 400px;}
	23% {left: 20px; top: 0px;}
	72% {left: 20px; top: 0px;}
    100% {left: -2100px; top: -3600px;}
}
@-moz-keyframes movekupu {
     0% {left: 5000px; top: top: 400px;}
	23% {left: 20px; top: 0px;}
	72% {left: 20px; top: 0px;}
    100% {left: -2100px; top: -3600px;}
}
@-o-keyframes movekupu {
       0% {left: 5000px; top: top: 400px;}
	23% {left: 20px; top: 0px;}
	72% {left: 20px; top: 0px;}
    100% {left: -2100px; top: -3600px;}
}



@-webkit-keyframes moveclouds0 {
    0% {left: 1900px;opacity:1.0;}
	30% {opacity:0.7;}
	60% {opacity:0.4;}
    100% {left: -1000px;opacity:0;}
}
@-moz-keyframes moveclouds0 {
    0% {left: 1900px;opacity:1.0;}
	30% {opacity:0.7;}
	60% {opacity:0.4;}
    100% {left: -1000px;opacity:0;}
}
@-o-keyframes moveclouds0 {
    0% {left: 1900px;opacity:1.0;}
	30% {opacity:0.7;}
	60% {opacity:0.4;}
    100% {left: -1000px;opacity:0;}
}



@-webkit-keyframes moveclouds {
    0% {left: 1600px;opacity:1.0;}
	30% {opacity:0.5;}
	60% {opacity:0.2;}
    100% {left: -1000px;opacity:0;}

}
@-moz-keyframes moveclouds {
    0% {left: 1600px;opacity:1.0;}
	30% {opacity:0.5;}
	60% {opacity:0.2;}
    100% {left: -1000px;opacity:0;}
}
@-o-keyframes moveclouds {
    0% {left: 1600px;opacity:1.0;}
	30% {opacity:0.5;}
	60% {opacity:0.2;}
    100% {left: -1000px;opacity:0;}
}



@-webkit-keyframes moveclouds2 {
    0% {left: 1100px; top: 180px; opacity:0.2;}
	50% {top: 80px; opacity:0.8;}
	70% {top: 80px; opacity:0.5;}
    100% {left: 500px; top: 180px; opacity:0;}
}
@-moz-keyframes moveclouds2 {
    0% {left: 1100px; top: 180px; opacity:0.2;}
	50% {top: 180px; opacity:0.8;}
	70% {top: 180px; opacity:0.5;}
    100% {left: 500px; top: 180px; opacity:0;}
}
@-o-keyframes moveclouds2 {
    0% {left: 1100px; top: 180px; opacity:0.2;}
	50% {top: 180px; opacity:0.8;}
	70% {top: 180px; opacity:0.5;}
    100% {left: 500px; top: 180px; opacity:0;}
}


@-webkit-keyframes moveclouds3 {
    0% {left: 900px; top: 40px; opacity:0;}
	15% {top: 60px; opacity:0.5;}
	20% {top: 60px; opacity:0;}
	50% {top: 60px; opacity:0.1;}
	55% {top: 60px; opacity:0;}
    100% {left: -1100px; top: 40px; opacity:0;}
}
@-moz-keyframes moveclouds3 {
    0% {left: 900px; top: 40px; opacity:0;}
	15% {top: 60px; opacity:0.5;}
	20% {top: 60px; opacity:0;}
	50% {top: 60px; opacity:0.1;}
	55% {top: 60px; opacity:0;}
    100% {left: -1100px; top: 40px; opacity:0;}
}
@-o-keyframes moveclouds3 {
    0% {left: 900px; top: 40px; opacity:0;}
	15% {top: 60px; opacity:0.5;}
	20% {top: 60px; opacity:0;}
	50% {top: 60px; opacity:0.1;}
	55% {top: 60px; opacity:0;}
    100% {left: -1100px; top: 40px; opacity:0;}
}


@-webkit-keyframes moveclouds4 {
    0% {left: 1000px; opacity:0; }
	30% {opacity:0.7;}
	60% {opacity:0.5;}
	80% {opacity:0.7;}
    100% {left: -300px; opacity:0;  }
}
@-moz-keyframes moveclouds4 {
    0% {left: 1000px; opacity:0;}
	30% {opacity:0.7;}
	60% {opacity:0.5;}
	80% {opacity:0.7;}
    100% {left: -300px; opacity:0;  }
}
@-o-keyframes moveclouds4 {
    0% {left: 1000px; opacity:0; }
	30% {opacity:0.7;}
	60% {opacity:0.5;}
	80% {opacity:0.7;}
    100% {left: -300px; opacity:0;  }
}


@-webkit-keyframes moveclouds4fog {
    0% {top: 500px; opacity:0.9; left:-400px; }
	30% {opacity:0.5;}
	60% {top: 250px; opacity:0.3;}
	70% {top: 250px; opacity:0.3; left:600px;}
	80% {opacity:0.5;}
    90% {top: 500px; opacity:0.9;}
	100% {top: 500px; opacity:0.9; left:-400px;}
}
@-moz-keyframes moveclouds4fog {
      0% {top: 500px; opacity:0.9; left:-400px; }
	30% {opacity:0.5;}
	60% {top: 250px; opacity:0.3;}
	70% {top: 250px; opacity:0.3; left:600px;}
	80% {opacity:0.5;}
    90% {top: 500px; opacity:0.9;}
	100% {top: 500px; opacity:0.9; left:-400px;}
}
@-o-keyframes moveclouds4fog {
      0% {top: 500px; opacity:0.9; left:-400px; }
	30% {opacity:0.5;}
	60% {top: 250px; opacity:0.3;}
	70% {top: 250px; opacity:0.3; left:600px;}
	80% {opacity:0.5;}
    90% {top: 500px; opacity:0.9;}
	100% {top: 500px; opacity:0.9; left:-400px;}
}




@-webkit-keyframes movengambangz {
    0% {top: 0px;}
	50% {top: 3px;}
    100% {top: 0px;}
}
@-moz-keyframes movengambangz {
     0% {top: 0px;}
	50% {top: 3px;}
    100% {top: 0px;}
}
@-o-keyframes movengambangz {
       0% {top: 0px;}
	50% {top: 3px;}
    100% {top: 0px;}
}




@-webkit-keyframes moveclouds5 {
    0% {left: 1500px; opacity:0; }
	10% {opacity:0.8;}
	35% {opacity:0.4;}
	60% {opacity:0.2;}
    100% {left: 200px; opacity:0;  }
}
@-moz-keyframes moveclouds5 {
    0% {left: 1500px; opacity:0; }
	10% {opacity:0.8;}
	35% {opacity:0.4;}
	60% {opacity:0.2;}
    100% {left: 200px; opacity:0;  }
}
@-o-keyframes moveclouds5 {
    0% {left: 1500px; opacity:0; }
	10% {opacity:0.8;}
	35% {opacity:0.4;}
	60% {opacity:0.2;}
    100% {left: 200px; opacity:0;  }
}




@-webkit-keyframes moveclouds6 {
    0% { opacity:0; left:450px; top:-1000px; }
	20% {opacity:0.8;}
	60% {opacity:0.4;}
    100% {left: 250px; top:-1000px; opacity:0.1;  }
}
@-moz-keyframes moveclouds6 {
    0% { opacity:0; left:450px; top:-1000px; }
	20% {opacity:0.8;}
	60% {opacity:0.4;}
    100% {left: 250px; top:-1000px; opacity:0.1;  }
}
@-o-keyframes moveclouds6 {
    0% { opacity:0; left:450px; top:-1000px; }
	20% {opacity:0.8;}
	60% {opacity:0.4;}
    100% {left: 250px; top:-1000px; opacity:0.1;  }
}

/* Clouds END */