/**CSS Reset**/
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, ol, ul, li, fieldset,
form, label, legend, table, caption, tbody,
tfoot, thead, tr, th, td, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;}

body {
	line-height: 0;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

	blockquote:before, blockquote:after, q:before, q:after {
		content: '';
		content: none;
	}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

body {
	-webkit-text-size-adjust: none;
}

mark {
	background-color: transparent;
	color: inherit;
}

input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

input, select, textarea {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
}

/** END CSS Reset**/

	
     .main{
        /*min-height:calc(100% - 1px);*/
		width: 100%;
		height: auto;
		margin: auto;
		
		/*
		border: 2px solid red;
		*/
	}  
		
		
	#section-main {
		margin: 0% 0% 0% 0%;    
		height:  auto;
        width:  100%;
		position: fixed;
		
		background: #fff;
		background-image: linear-gradient(rgba(0, 0, 0, .7) .07em, transparent .07em), linear-gradient(90deg, rgba(0, 0, 0, .7) .07em, transparent .07em);
		background-size: 2.5em 2.5em;
		
		/*
        background:center no-repeat url('../images/background_2.png');
        background-size: cover;
		*/
		/*color:#ddd;*/
        min-height:calc(100% - 1px);
		animation: zoomIn 4s;
		animation-delay: 1.7s;
    }	
			
		.imgbox {
			display: grid;
			height: auto;
		}
		.center-fit {
			max-width: 100%;
			max-height: 100vh;
			margin: auto;
		}
		
		
	.loader {
	  position: fixed;
	  display: flex;	
	  width: 100%;
	  height: 100%;
	  background:center no-repeat url('../images/loader-800px.gif');
	  background-size: cover;
	  align-items: center;
	  justify-content: center;
	  z-index: 999;
	  
	}
	
	.loader > img {
		width: 100%;
	}
	
	.loader.hidden {
		animation: fadeOut 1.8s;
		animation-fill-mode: forwards;
	}
	
	@keyframes fadeOut {
		0% {
			opacity: 0;
		}
		20% {
			opacity: 10;
		}
		50% {
			opacity: 40;	
		}
		100% {
			opacity: 90;
			visibility: hidden;
		}
	}
	
p {
  display: inline-block;
  /*text-transform: uppercase;*/
  text-align: center;
  font-size: 10em;
  font-family: arial;
  font-weight: 600;
  /*transform: scale(.5);*/
  color: #121212;
  -webkit-text-stroke: 2px black;
}



p:nth-child(1) {
  /*animation: var(--effect);*/
   animation: huruf-w 1s ease-in ;
   /*animation: zoomIn 4s;*/
   color: yellow;
}

p:nth-child(2) {
	/*animation: var(--effect) .125s;*/
	animation: huruf-a 1s ease-in ;
	color: yellow;
}

p:nth-child(3) {
	animation: huruf-n 1s ease-in ;
	color: yellow;
}

p:nth-child(4) {
	animation: huruf-t 1s ease-in ;
	color: yellow;
}

p:nth-child(5) {
	animation: huruf-h 1s ease-in ;
	color: yellow;
}

p:nth-child(6) {
	animation: huruf-e 1s ease-in ;
	color: yellow;
}

p:nth-child(7) {
	animation: huruf-r 1s ease-in ;
	color: yellow;
}

p:nth-child(8) {
	animation: huruf-f 1s ease-in ;
	color: yellow;
}

p:nth-child(9) {
	animation: huruf-u 1s ease-in ;
	color: yellow;
}

p:nth-child(10) {
	animation: huruf-l 1s ease-in ;
	color: yellow;
}


@keyframes huruf-w {
   0%{
      transform: translate(-20px, -100px);
	  color: white;
   }
   80%{
			transform: translate(0px, 0px);
   }
   100%{
		transform: scale(2);
		ovacity: 10;
      color: white;
	  /*transform: scale(2);*/
   }
}

@keyframes huruf-a {
   0%{
      transform: translate(-20px, 100px);
   }
    80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}

@keyframes huruf-n {
   0%{
      transform: translate(-20px, -100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}

@keyframes huruf-t {
   0%{
      transform: translate(-20px, 100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}


@keyframes huruf-h {
   0%{
      transform: translate(-20px, -100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}


@keyframes huruf-e {
   0%{
      transform: translate(20px, 100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}

@keyframes huruf-r {
   0%{
      transform: translate(20px, -100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}

@keyframes huruf-f {
   0%{
      transform: translate(20px, 100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}

@keyframes huruf-u {
   0%{
      transform: translate(20px, -100px);
   }
   80%{
	  transform: translate(0px, 0px);
   }
   100%{
	  transform: scale(2);
      /*color: yellow;*/
   }
}

@keyframes huruf-l {
   0%{
      transform: translate(20px, 100px);
   }
    80%{
		transform: translate(0px, 0px);
   }
   100%{
		transform: scale(2);
      /*color: yellow;*/
   }
}

	.logo_wantherful{
		position: absolute;
		z-index: 12;
		left: 1200px;
		right: 50px;
		top: 75px;
	}
	
	.logo_wantherful > img {
		height: auto;
		width: 60px;
	}
	
	.watch {
		position: absolute;
		z-index: 12;
		left: 100px;
		top: 75px;
		
		/*
		margin-left: auto;
		margin-right: auto;
		left: 100px;
		top: 75px;
		text-align: center;
		*/
	}
	/*
	.watch > svg {
		height: 150px;
		width: 886px;
	}
	*/
	.space {
		position: absolute;
		z-index: 12;
		left: 100px;
		top: 430px;
			
	}
	
	.space > img {
		height: 150px;
		width: 765px;
	}
	
	.this {
		position: absolute;
		z-index: 9;
		left: 105px;
		top: 255px;
			
	}
	
	.this > img {
		height: 240px;
		width: 570px;
	}
	
	path{
		stroke: #000;
		fill: #f4ea09;
		stroke-dasharray: 2000;
		opacity: 10;
		animation: anim 3s cubic-bezier(0, 0.23,1, .1);
		/*animation-fill-mode: forwards;*/
		animation-delay: 1.7s;
	}
	
	@keyframes anim{
		0% {
			opacity: 0;
			fill: none;
			stroke-dashoffset: 1800;
		}
		30% {
			opacity: 0;
			fill: none;
			stroke-dashoffset: 1800;
		}
		90% {
			fill: rgba(255, 255, 255, 0);
		}
		100% {
			fill: rgba(255, 255, 255, 1);
			opacity: 10;
			stroke-dashoffset: 0;
			
			
		}
	}
	/*
		scale(angka), scaleX(angka), scaleY(angka)
		rotate(deg), rotateX(deg), rotateY(deg)
		skew(deg), rotateX(deg), rotateY(deg)
		translate(px), translateX(px), translateY(px)
	*/
	
	.main-box{
		width: 324px;
		background-color: #F4EA09;
		border: 2px solid black;
		z-index: 9999;
		/*margin: 180px 100px 50px 910px;*/
		position: absolute;
	}
	
	.inner-main-box{
		width: 99%;
		height: 120px;
		background-color: #F4EA09;
		border: 2px solid black;
		float: left;	
	}
	
	.text1{
		text-align: center;
		font-family: "Telegraf", arial, sans-serif;
		
	}
	
	.btn-facebook > a > span{
		text-align: center;
		display: block;
		padding-top: 10px;
		font-family: "arial", sans-serif;
		color: white;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		
	}
	
	.btn-instagram > a > span{
		text-align: center;
		display: block;
		padding-top: 10px;
		font-family: "arial", sans-serif;
		color: white;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
		
	}
	
	.btn-youtube > a > span{
		text-align: center;
		display: block;
		padding-top: 10px;
		font-family: "arial", sans-serif;
		color: white;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}
	
	.span-ig{
		text-align: center;
	}
	
	.span-youtube{
		text-align: center;
	}
	
	.btn-facebook{
		float:left;
		width: 110px;
		height: 40px;
		border: 1px solid black;
		background-color: #F4EA09;
	}
	
	.btn-instagram{
		float:left;
		width: 108px;
		height: 40px;
		border: 1px solid black;
		background-color: #F4EA09;
	}
	
	.btn-youtube{
		float:left;
		width: 100px;
		height: 40px;
		border: 1px solid black;
		background-color: #F4EA09;
		/*box-sizing: border-box;*/
	}
	
	.clear{
		clear: left;
	}
	
	
	@keyframes translateImageFrame01{
		0%{
			transform: translate(-50px, 10px);
		}
		20%{
			transform: translate(50px, 10px);
		}
		40%{
			transform: translate(-50px, -30px);
		}
		60%{
			transform: translate(0px, -10px);
		}
		80%{
			transform: translate(50px, -30px);
		}
		100%{
			transform: translate(0px, 0px);
			transform: translate(-50px, 10px);
		}
	}
	
	
	/*
	@keyframes translateImageFrame02{
		0%{
			transform: translate(50px, -100px);
		}
		25%{
			transform: translate(50px, 100px);
		}
		50%{
			transform: translate(-50px, 100px);
		}
		75%{
			transform: translate(-50px, -100px);
		}
		100%{
			transform: translate(50px, -100px);
		}
	}
	*/
	
	/*translate (X, Y)*/
	
	@keyframes translateImageFrame02{
		0%{
			transform: translate(50px, 10px);
		}
		20%{
			transform: translate(-50px, 10px);
		}
		40%{
			transform: translate(50px, -30px);	
		}
		60%{
			transform: translate(0px, -10px);
		}
		80%{
			transform: translate(-50px, -30px);
		}
		100%{
			transform: translate(0px, 0px);
			transform: translate(50px, 10px);
		}
	}
	
	.frame02:hover{
		animation-play-state: paused;
	}
	
	
	
	.frame01:hover{
		animation-play-state: paused;
	}
	
	.frame02 {
		position: absolute;
		z-index: 11;
		left: 590px;
		top: 30px;
		cursor: move;		
		animation: translateImageFrame02 10s linear infinite;		
	}

	.frame02 > img {
		height: 418px;
		width: 280px;
	}
	
	.frame01 {
		position: absolute;
		z-index: 11;
		left: 1000px;
		top: 210px;
		cursor: move;	
		animation: translateImageFrame01 10s linear infinite;	
	}
	
	.frame01 > img {
		height: 250px;
		width: 182px;
		/*
		-ms-transform: translate(50px,100px); /* Support IE 9 */
		/*-webkit-transform: translate(50px,100px); /* support Safari */
		/*transform: translate(50px,100px); /* Standard syntax */
		
	}
	
	.link-socmed {
		position: absolute;
		z-index: 8;
		left: 910px;
		top: 418px;
		cursor: move;
			
	}
	
	.link-socmed > img {
		height: 155px;
		width: 322px;
	}
	
	.facebook {
		position: absolute;
		z-index: 15;
		left: 910px;
		top: 532px;	
	}
	
	.facebook > a > img {
		height: 40px;
		width: 120px;
	}
	
	.instagram {
		position: absolute;
		z-index: 15;
		left: 1021px;
		top: 532px;
			
	}
	
	.instagram > a > img {
		height: 40px;
		width: 120px;
	}
	
	.youtube {
		position: absolute;
		z-index: 15;
		left: 1140px;
		top: 532px;
			
	}
	
	.youtube > a > img {
		height: 40px;
		width: 91px;
	}	

	#mydivFrame01 {
	  position: absolute;
	  z-index: 9;
	  background-color: none;
	  border: 0px solid #d3d3d3;
	  text-align: center;
	  
	}
	
	#mydivFrame02 {
	  position: absolute;
	  z-index: 9;
	  background-color: none;
	  border: 0px solid #d3d3d3;
	  text-align: center;
	}
	
	#mydivSocmed {
	  position: absolute;
	  z-index: 9;
	  background-color: none;
	  border: 0px solid #d3d3d3;
	  text-align: center;
	  
	}
	
	#mydivLogo {
	  position: absolute;
	  z-index: 9;
	  background-color: none;
	  border: 0px solid #d3d3d3;
	  text-align: center;
	  
	}


	
/* Responsive CSS */
/*---------------Query for iPhone6 Plus-------------*/

@media screen and (max-width: 414px){

    #section-main {
        margin: 0% 0% 0% 0%; 
		height:  auto;
        width:  100%;
		position: fixed;
		background: #fff;
		background-image: linear-gradient(rgba(0, 0, 0, .5) .07em, transparent .07em), linear-gradient(90deg, rgba(0, 0, 0, .5) .07em, transparent .07em);
		background-size: 2em 2em;
        /*
		background:center no-repeat url('../images/background_mobile.png');
        background-size: cover;
        color:#ddd;
		*/
        min-height:calc(100% - 1px);
    }
	
	.logo_wantherful{
		position: absolute;
		z-index: 12;
		left: 120px;
		right: 120px;
		/*
		text-align: center;
		margin: auto;
		*/
		top: 45px;
	}
	
	.logo_wantherful > img {
		height: 30%;
		width: 30%;
	}
	
	.watch {
		position: absolute;
		z-index: 12;
		/*
		left: 13px;
		top: 90px;
		*/
		left: 13px;
		right: 13px;
		top: 120px;
		
	}
	
	.watch > svg {
		/*
		height: 95px;
		width: 345px;
		*/
		height: 100%;
		width: 100%;
	
	}
	
	.space {
		position: absolute;
		z-index: 12;
		/*
		left: 10px;
		top: 305px;
		*/
		left: 10px;
		right: 10px;
		top: 290px;
			
	}
	
	.space > svg {
		/*
		height: 90px;
		width: 346px;
		*/
		height: 100%;
		width: 100%;
	}
	
	.this {
		position: absolute;
		z-index: 10;
		/*
		left: 45px;
		top: 190px;
		*/
		left: 45px;
		right: 45px;
		top: 200px;	
	}
	
	.this > svg {
		/*
		height: 130px;
		width: 267px;
		*/
		height: 100%;
		width: 100%;
	}
	
	@keyframes translateImageFrame02{
		0%{
			-ms-transform: translate(20px, 10px);
			-webkit-transform: translate(20px, 10px);
			-moz-transform: translate(20px, 10px);
			transform: translate(20px, 10px);
		}
		20%{
			-ms-transform: translate(-20px, 10px);
			-webkit-transform: translate(-20px, 10px);
			-moz-transform: translate(-20px, 10px);
			transform: translate(-20px, 10px);
		}
		40%{
			-ms-transform: translate(20px, -40px);
			-webkit-transform: translate(20px, -40px);
			-moz-transform: translate(20px, -40px);
			transform: translate(20px, -40px);
		}
		60%{
			-ms-transform: translate(0px, -10px);
			-webkit-transform: translate(0px, -10px);
			-moz-transform: translate(0px, -10px);
			transform: translate(0px, -10px);
		}
		80%{
			-ms-transform: translate(-20px, -40px);
			-webkit-transform: translate(-20px, -40px);
			-moz-transform: translate(-20px, -40px);
			transform: translate(-20px, -40px);
		}
		100%{
			-ms-transform: translate(0px, 0px);
			-webkit-transform: translate(0px, 0px);
			-moz-transform: translate(0px, 0px);
			transform: translate(0px, 0px);
		
			-ms-transform: translate(20px, 10px);
			-webkit-transform: translate(20px, 10px);
			-moz-transform: translate(20px, 10px);
			transform: translate(20px, 10px);
		}
	}
	
	
	.frame02 {
		position: absolute;
		z-index: 11;
		left: 2px;
		right: 250px;
		top: 95px;
		cursor: move;
		animation: translateImageFrame02 10s linear infinite;		
	}
	
	.frame02 > img {
		/*
		height: 245px;
		width: 170px;
		*/
		height: 100%;
		width: 100%;	
	}
	
	@keyframes translateImageFrame01{
		0%{
			-ms-transform: translate(-20px, 10px);
			-webkit-transform: translate(-20px, 10px);
			-moz-transform: translate(-20px, 10px);
			transform: translate(-20px, 10px);
		}
		20%{
			-ms-transform: translate(20px, 10px);
			-webkit-transform: translate(20px, 10px);
			-moz-transform: translate(20px, 10px);
			transform: translate(20px, 10px);
		}
		40%{
			-ms-transform: translate(-20px, -40px);
			-webkit-transform: translate(-20px, -40px);
			-moz-transform: translate(-20px, -40px);
			transform: translate(-20px, -40px);
		}
		60%{
			-ms-transform: translate(0px, -10px);
			-webkit-transform: translate(0px, -10px);
			-moz-transform: translate(0px, -10px);
			transform: translate(0px, -10px);
		}
		80%{
			-ms-transform: translate(20px, -40px);
			-webkit-transform: translate(20px, -40px);
			-moz-transform: translate(20px, -40px);
			transform: translate(20px, -40px);
		}
		100%{
			transform: translate(0px, 0px);
			-ms-transform: translate(0px, 0px);
			-webkit-transform: translate(0px, 0px);
			-moz-transform: translate(0px, 0px);
			
			-ms-transform: translate(-20px, 10px);
			-webkit-transform: translate(-20px, 10px);
			-moz-transform: translate(-20px, 10px);
			transform: translate(-20px, 10px);
		}
	}
	
	
	.frame01 {
		position: absolute;
		z-index: 11;
		left: 220px;
		right: 13px;
		top: 350px;
		/*
		left: 120px;
		top: 372px;
		*/
		cursor: move;
		animation: translateImageFrame01 10s linear infinite;	
		
	}
	
	
	.frame01 > img {
		/*
		height: 160px;
		width: 110px;
		*/
		height: 60%;
		width: 60%;
	
	}
	
	.footer-link {
		width: 200px;
		/*overflow: auto;*/
		top: 500px;
		z-index: 0;
		position: absolute;
		border: 2px solid blue;
		
	}
	
	
	#mydivSocmed {
		position: static;
		text-align: center;
	}
	
	
	#Table_01 {
		position: static;
		height: 100%;
		width: 100%;
	}
	
	
	#Table_01 img{
		display:block; 
		width:100%; 
		height:auto;
	}
	
	.link-socmed {
		position: absolute;
		z-index: 8;
		left: 9px;
		right: 9px;
		top: 550px;
		cursor: move;
			
	}	
	
	.loader > img {
	  height: 100vw;
      width: 100vh;
	}
	
	.loader {
		/*
	  -webkit-transform: rotateZ(90deg);
	  -moz-transform: rotateZ(90deg);
	  -ms-transform: rotateZ(90deg);
	  transform: rotateZ(90deg);
	  */
	  background:center no-repeat url('../images/loader-rotate.gif');
	  background-size: cover;
	}
	
	.loader.hidden {
		animation: fadeOut 1.8s;
		animation-fill-mode: forwards;
	}
	
	@keyframes fadeOut {
		0% {
			opacity: 0;
		}
		20% {
			opacity: 10;
		}
		50% {
			opacity: 40;	
		}
		100% {
			opacity: 90;
			visibility: hidden;
		}
	}
	
		
}