.section-smartpedia-cuaca{
	position: relative;
}

.smartpedia-indonesia-negeriku {
	color: #006890;
}

header {
	height: 110px;
	background-color: var(--main-color) !important;
}

section {
	padding: 0;
}

@media (min-width: 1280px) {
	.sp-arrow-down{
		margin: auto;
		display: block;
		text-align: center;
		margin-top:-50px;
		position:absolute;
		top:100vh;
		transform:translateY(-100%);
		width:100%;
		transition: ease 1s;
		-webkit-animation: bouncey 1s linear infinite;
		animation: bouncey 1s linear infinite;
	}
	
	.sp-arrow-top{
		display: block;
		position:absolute;
		bottom: 2rem;
		right: 2rem;
		width: 80px;
		height: 115px;
		transition: ease 1s;
		-webkit-animation: bouncey 1s linear infinite;
		animation: bouncey 1s linear infinite;
	}

	.smartpedia-alt .background-image {
		background-repeat: no-repeat;
		background-size: cover;
		z-index: 1;
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
}

@media (max-width: 747px) {
	.sp-arrow-down{
		display: none;
	}	
	
	.sp-arrow-top img{
		display: block;
		position:absolute;
		bottom: 2rem;
		right: 2rem;
		width: 50px;
		transition: ease 1s;
		-webkit-animation: bouncey 1s linear infinite;
		animation: bouncey 1s linear infinite;
	}
	
	.smartpedia-alt .background-image {
		background-repeat: no-repeat;
		background-size: cover;
		padding-top: 1.5rem;
		padding-bottom: 3.75rem;
		background-position: bottom center;
	}
}

@media (min-width: 1440px) {
	.sp-arrow-down{
		top: 80vh;
	}	
}
	
	
	 

/* -------------------- SECTION 1: TITLE & OPENING ------------------------*/
@media (min-width: 1280px) {
	#section1 .background-image {
		background-position: top center;
		min-height: 790px;
	}

	#section1 .bubble {
		position: absolute;
		top: 36%;
		left: 38%;
		background: url('../images/smartpedia/cuaca/bubble1.png');
		width: 255px;
		height: 136px;
		padding: 12px 20px;
		font-size: 0.85rem;
		
		
	}
}

@media (max-width: 747px) {
	#section1 .background-image {
		min-height: 450px;
	}
	
	#section1 .bubble {
		position: absolute;
		top: 37%;
		left: 31%;
		background: url('../images/smartpedia/cuaca/bubble1.png');
		width: 150px;
		height: 80px;
		padding: 8px 15px;
		line-height: 1rem;
		font-size: 0.7rem;
		background-size: cover;
	}
}

@media (min-width: 1440px) {
	#section1 .background-image {
		min-height: 840px;
	}
}
/* -------------------- END SECTION 1 ------------------------*/




/* -------------------- SECTION 2: WIND ------------------------*/
@media (min-width: 1280px) {
	#section2 .background-image {
		background-position: top center;
		min-height: 747px;
	}

	#section2 .caption {
		margin: 0 auto;
		text-align: center;
		color: #fff;
		
		font-size: 1rem;
	}
	
	#section2 .bubble {
		position: absolute;
		top: 25%;
		left: 30%;
		background: url('../images/smartpedia/cuaca/bubble2.png');
		width: 161px;
		height: 108px;
		padding: 12px 15px;
		font-size: .75rem;
		font-weight: normal;
	}
	
	#section2 .wind {
		position: absolute;
		top: 27%;
		right: 15%;
		background: url('../images/smartpedia/cuaca/wind.png');
		width: 466px;
		height: 205px;
	}
	
	#section2 .windleaves {
		position: absolute;
		top: 23%;
		right: 21%;
		background: url('../images/smartpedia/cuaca/windleaves.png');
		width: 326px;
		height: 116px;
	}
	
	#section2 .windicon {
		position: absolute;
		top: 39%;
		right: 20%;
		background: url('../images/smartpedia/cuaca/windicon.png');
		width: 100px;
		height: 100px;
		z-index: 10;
		cursor: pointer;	
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
	}
	
	#section2 .windnote {
		position: absolute;
		top: 48%;
		right: 16%;
		background: #fff;
		border-radius: 10px;
		width: 220px;
		font-size: .9rem;		
		padding: 36px 15px 15px 15px;
		text-align: center;
		display: none;
	}
}

@media (max-width: 747px) {
	#section2 .background-image {
		min-height: 450px;
	}
	
	#section2 .caption {
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-size: .7rem;
	}
	
	#section2 .bubble {
		position: absolute;
		top: 20%;
		left: 15%;
		background: url('../images/smartpedia/cuaca/bubble2.png');
		width: 105px;
		height: 70px;
		padding: 8px 10px;
		font-size: .7rem;
		line-height: .8rem;
		
		background-size: cover;
	}
	
	#section2 .wind {
		position: absolute;
		top: 27%;
		right: 0;
		background: url('../images/smartpedia/cuaca/wind.png');
		width: 250px;
		height: 110px;
		background-size: cover;
	}
	
	#section2 .windleaves {
		position: absolute;
		top: 23%;
		right: 5%;
		background: url('../images/smartpedia/cuaca/windleaves.png');
		width: 250px;
		height: 89px;
		background-size: cover;
	}
	
	#section2 .windicon {
		position: absolute;
		top: 52%;
		right: 17%;
		background: url('../images/smartpedia/cuaca/windicon.png');
		width: 65px;
		height: 65px;
		z-index: 10;
		cursor: pointer;	
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
		background-size: cover;
	}
	
	#section2 .windnote {
		position: absolute;
		top: 60%;
		right: 7%;
		background: #fff;
		border-radius: 10px;
		width: 150px;
		line-height: 1rem;
		font-size: 0.7rem;		
		padding: 33px 8px 8px 8px;
		text-align: center;
		display: none;
	}
}

@media (min-width: 1440px) {
	#section2 .background-image {
		min-height: 747px;
	}
}
/* -------------------- END SECTION 2 ------------------------*/




/* --------------------- SECTION 3 : RAIN ------------------- */
@media (min-width: 1280px) {
	#section3 .background-image {
		background-position: top center;
		min-height: 940px;
	}

	#section3 .caption {
		margin: 30px auto;
		text-align: center;
		color: #fff;
		
		font-size: 1rem;
	}
	
	#section3 .bubble1 {
		position: absolute;
		top: 38%;
		left: 33%;
		background: url('../images/smartpedia/cuaca/bubble2.png');
		width: 161px;
		height: 108px;
		padding: 12px 25px;
		font-size: .8rem;
		z-index: 10;
	}
	
	#section3 .bubble2 {
		position: absolute;
		top: 55%;
		left: 13%;
		background: url('../images/smartpedia/cuaca/bubble3.png');
		width: 223px;
		height: 126px;
		padding: 50px 18px 0px;
		font-size: .8rem;		
		z-index: 10;
	}
	
	#section3 .rain1 {
		position: absolute;
		top: 14%;
		left: 0;
		width: 1416px;
		height: 750px;
	}
	
	#section3 .rainicon {
		position: absolute;
		top: 36%;
		right: 22%;
		background: url('../images/smartpedia/cuaca/rainicon.png');
		width: 100px;
		height: 100px;
		z-index: 20;
		cursor: pointer;		
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
	}
	
	#section3 .rainnote {
		position: absolute;
		top: 43%;
		right: 15%;
		background: #fff;
		border-radius: 10px;
		width: 300px;
		font-size: .9rem;		
		padding: 36px 15px 15px 15px;
		text-align: center;
		z-index: 10;
		display: none;
	}
}

@media (max-width: 747px) {
	#section3 .background-image {
		min-height: 450px;
	}

	#section3 .caption {
		margin: 10px auto;
		text-align: center;
		color: #fff;
		
		font-size: 1rem;
	}
	
	#section3 .bubble1 {
		position: absolute;
		top: 28%;
		left: 23%;
		background: url('../images/smartpedia/cuaca/bubble2.png');
		width: 105px;
		height: 70px;
		padding: 8px 10px;
		line-height: 1rem;
		font-size: 0.7rem;
		background-size: cover;
		z-index: 10;
	}
	
	#section3 .bubble2 {
		position: absolute;
		top: 58%;
		left: 8%;
		background: url('../images/smartpedia/cuaca/bubble3x.png');
		width: 150px;
		height: 85px;
		padding: 30px 12px 0px;
		line-height: 1rem;
		font-size: 0.7rem;
		background-size: cover;		
		z-index: 10;
	}
	
	#section3 .rain1 {
		position: absolute;
		top: 14%;
		left: 0;
		width: 587px;
		height: 350px;
	}
	
	#section3 .rainicon {
		position: absolute;
		top: 36%;
		right: 18%;
		background: url('../images/smartpedia/cuaca/rainicon.png');
		width: 65px;
		height: 65px;
		z-index: 10;
		cursor: pointer;		
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
		background-size: cover;
		z-index: 20;
	}
	
	#section3 .rainnote {
		position: absolute;
		top: 44%;
		right: 5%;
		background: #fff;
		border-radius: 10px;
		width: 174px;
		line-height: 1rem;
		font-size: 0.7rem;
		padding: 33px 8px 8px 8px;
		text-align: center;
		z-index: 10;
		display: none;
	}
}

@media (min-width: 1440px) {
	#section3 .background-image {
		min-height: 1046px;
	}
}
/* ---------------------- END SECTION 3 ----------------------- */




/* --------------------- SECTION 4 : LIGHTNING ------------------- */
@media (min-width: 1280px) {
	#section4 .background-image {
		background-position: top center;
		min-height: 892px;
	}
	
	#section4 .caption {
		margin: 0 auto;
		text-align: center;
		color: #fff;
		
		margin-top: -20px;
		font-size: 1rem;
	}
	
	#section4 .bubble1 {
		position: absolute;
		top: 18%;
		left: 32%;
		background: url('../images/smartpedia/cuaca/bubble1.png');
		width: 255px;
		height: 136px;
		padding: 10px 15px;
		font-size: .7rem;
		
	}
	
	#section4 .lightning {
		position: absolute;
		top: 26%;
		right: 30%;
		background: url('../images/smartpedia/cuaca/lightning.png');
		width: 210px;
		height: 240px;
	}
	
	#section4 .lightningicon {
		position: absolute;
		top: 46%;
		right: 23%;
		background: url('../images/smartpedia/cuaca/lightningicon.png');
		width: 100px;
		height: 100px;
		z-index: 10;
		cursor: pointer;		
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
	}
	
	#section4 .lightningnote {
		position: absolute;
		top: 54%;
		right: 16%;
		background: #fff;
		border-radius: 10px;
		width: 290px;
		font-size: .9rem;
		padding:48px 15px 15px 15px;
		text-align: center;
		display: none;
	}
	
}

@media (max-width: 747px) {
	#section4 .background-image {
		min-height: 450px;
	}
	
	#section4 .caption {
		margin: 0 auto;
		text-align: center;
		color: #fff;
		font-size: 0.7rem;	
	}
	
	#section4 .bubble1 {
		position: absolute;
		top: 16%;
		left: 8%;
		background: url('../images/smartpedia/cuaca/bubble1.png');
		width: 200px;
		height: 107px;
		padding: 12px;
		line-height: 1rem;
		font-size: 0.7rem;
		background-size: cover;
	}
	
	#section4 .lightning {
		position: absolute;
		top: 26%;
		right: 8%;
		background: url('../images/smartpedia/cuaca/lightning.png');
		width: 150px;
		height: 125px;
		background-size: cover;
	}
	
	#section4 .lightningicon {
		position: absolute;
		top: 45%;
		right: 14%;
		background: url('../images/smartpedia/cuaca/lightningicon.png');
		width: 65px;
		height: 65px;
		z-index: 10;
		cursor: pointer;		
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
		background-size: cover;
	}
	
	#section4 .lightningnote {
		position: absolute;
		top: 53%;
		right: 3%;
		background: #fff;
		border-radius: 10px;
		width: 162px;
		line-height: 1rem;
		font-size: 0.7rem;
		padding: 32px 8px 8px 8px;
		text-align: center;
		display: none;
	}
}

@media (min-width: 1440px) {
	#section4 .background-image {
		min-height: 800px;
	}
}
/* ---------------------- END SECTION 4 ----------------------- */


/* ---------------------- SECTION 5 : RAINBOW ------------------*/
@media (min-width: 1280px) {
	#section5 .background-image {
		background-position: top center;
		min-height: 700px;
	}
	
	#section5 .caption {
		margin: 0 auto;
		text-align: center;
		color: #224d6b;
		
		font-size: 1rem;
	}
	
	#section5 .bubble1 {
		position: absolute;
		top: 20%;
		left: 40%;
		background: url('../images/smartpedia/cuaca/bubble2.png');
		width: 161px;
		height: 108px;
		padding: 20px 25px;
		font-size: .9rem;
		
	}
	
	#section5 .rainbow {
		position: absolute;
		top: 14%;
		right: 22%;
		background: url('../images/smartpedia/cuaca/rainbow.png');
		width: 443px;
		height: 225px;
	}
	
	#section5 .rainbowicon {
		position: absolute;
		top: 42%;
		right: 19%;
		background: url('../images/smartpedia/cuaca/rainbowicon.png');
		width: 100px;
		height: 100px;
		z-index: 10;
		cursor: pointer;		
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
	}
	
	#section5 .rainbownote {
		position: absolute;
		top: 49%;
		right: 12%;
		background: #fff;
		border-radius: 10px;
		width: 290px;
		font-size: .9rem;	
		padding: 48px 15px 15px 15px;
		text-align: center;
		display: none;
	}
}

@media (max-width: 747px) {
	#section5 .background-image {
		min-height: 450px;
	}
	
	#section5 .caption {
		margin: 0 auto;
		text-align: center;
		color: #224d6b;		
		font-size: 0.7rem;	
	}
	
	#section5 .bubble1 {
		position: absolute;
		top: 18%;
		left: 25%;
		background: url('../images/smartpedia/cuaca/bubble2.png');
		width: 105px;
		height: 70px;
		padding: 15px;
		line-height: 1rem;
		font-size: 0.7rem;	
		background-size: cover;
	}
	
	#section5 .rainbow {
		position: absolute;
		top: 10%;
		right: 0;
		background: url('../images/smartpedia/cuaca/rainbow.png');
		width: 300px;
		height: 150px;
		background-size: cover;
	}
	
	#section5 .rainbowicon {
		position: absolute;
		top: 44%;
		right: 22%;
		background: url('../images/smartpedia/cuaca/rainbowicon.png');
		width: 65px;
		height: 65px;
		z-index: 10;
		cursor: pointer;		
		-webkit-animation: tada linear 1s infinite;
		animation: tada linear 1s infinite;
		background-size: cover;
	}
	
	#section5 .rainbownote {
		position: absolute;
		top: 51%;
		right: 2%;
		background: #fff;
		border-radius: 10px;
		width: 230px;
		line-height: 1rem;
		font-size: 0.7rem;
		padding: 35px 8px 8px 8px;
		text-align: center;
		display: none;
	}
}

@media (min-width: 1440px) {
	#section5 .background-image {
		min-height: 700px;
	}
}
/* ---------------------- END SECTION 5 ----------------------- */


/* SECTION 6 */
@media (min-width: 1280px) {
	#section6 .background-image {
		background-position: top center;
		min-height: 770px;
	}
	
	#section6 .bubbleblue {
		position: absolute;
		top: 10%;
		left: 26%;
		background: url('../images/smartpedia/cuaca/bubbleblue.png');
		width: 700px;
		height: 279px;
		padding: 35px 100px 0px 100px;
		font-size: .9rem;		
		color: #fff;
		text-align: center;
	}
}

@media (max-width: 747px) {
	#section6 .background-image {
		min-height: 450px;
	}
	
	#section6 .bubbleblue {
		position: absolute;
		top: 10%;
		left: 1%;
		background: url('../images/smartpedia/cuaca/bubbleblue.png');
		width: 350px;
		height: 140px;
		padding: 10px 40px;
		line-height: 1rem;
		font-size: 0.7rem;
		color: #fff;
		text-align: center;
		background-size: cover;
	}
}

@media (min-width: 1440px) {
	#section6 .background-image {
		min-height: 821px;
	}
}
/* ---------------------- END SECTION 6 ----------------------- */


/* Rain Animation */
.weather {
    position: relative; overflow: hidden;
}
/* pseudo elements: positioning and setup */
.weather:before, .weather:after {
    content: "";
    position: absolute; left: -50%; top: -50%; right: -50%; bottom: -50%;
    z-index: 1;
    pointer-events: none;
    
    background: transparent repeat;
    opacity: 0.2;
    
    -webkit-animation-name: weather;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-name: weather;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
	
}
.weather:after {
    opacity: 0.4;
    -webkit-animation-name: weather2;
    animation-name: weather2;
}

/* rain (fast, rain.png) */
.weather.rain:before{
    background-image: url('../images/smartpedia/cuaca/rain2.png');
    -webkit-animation-duration: 2s;
    animation-duration:2s;
	animation-delay:1.5s;
}

.weather.rain:after {
    background-image: url('../images/smartpedia/cuaca/rain3.png');
    -webkit-animation-duration: 2.5s;
    animation-duration:2.5s;
	animation-delay:1.5s;
}

@media (max-width: 747px) {
	.weather.rain:before{
		background-image: url('../images/smartpedia/cuaca/rain2x.png');
	}

	.weather.rain:after {
		background-image: url('../images/smartpedia/cuaca/rain3x.png');
	}
}


/* animation keyframes */
@-webkit-keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@keyframes weather {
    from { background-position: 0 0px; }
    to { background-position: 0 1024px; }
}
@-webkit-keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}
@keyframes weather2 {
    from { background-position: 64px 64px; }
    to { background-position: 64px 1088px; }
}


/* Lightning Animation */
.flashit{
	-webkit-animation: flash ease-out 4s infinite;
	-moz-animation: flash ease-out 4s infinite;
	animation: flash ease-out 4s infinite;
	animation-duration: 4s;
	animation-delay: 0.5s;
}

@-webkit-keyframes flash {
	from { opacity: 0; } 
	80% { opacity: 0; }
	81% { opacity: 1; }
	82% { opacity: 1; }
	83% { opacity: 0.8; }
	84% { opacity: 0.2; }
	85% { opacity: 0.6; }
	86% { opacity: 0.3; } 
	87% { opacity: 0.7; } 
	88% { opacity: 1; } 
	89% { opacity: 1; }
	90% { opacity: 0; }
	91% { opacity: 1; }
	92% { opacity: 1; }
	93% { opacity: 0.8; }
	94% { opacity: 0.2; }
	95% { opacity: 0.6; }
	96% { opacity: 0.3; } 
	97% { opacity: 0.7; } 
	98% { opacity: 1; } 
	99% { opacity: 1; } 
	to { opacity: 0; }
}

@keyframes flash {
	from { opacity: 0; } 
	80% { opacity: 0; }
	81% { opacity: 1; }
	82% { opacity: 1; }
	83% { opacity: 0.8; }
	84% { opacity: 0.2; }
	85% { opacity: 0.6; }
	86% { opacity: 0.3; } 
	87% { opacity: 0.7; } 
	88% { opacity: 1; } 
	89% { opacity: 1; }
	90% { opacity: 0; }
	91% { opacity: 1; }
	92% { opacity: 1; }
	93% { opacity: 0.8; }
	94% { opacity: 0.2; }
	95% { opacity: 0.6; }
	96% { opacity: 0.3; } 
	97% { opacity: 0.7; } 
	98% { opacity: 1; } 
	99% { opacity: 1; } 
	to { opacity: 0; }
}

/* Tada Animation */
@-webkit-keyframes tada {
	0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%, 20% {
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
  }

  30%, 50%, 70%, 90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%, 60%, 80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}