/**** Font face ****/
@font-face { font-family:'Tex Gyre Adventor'; src:url('webfonts/texgyreadventor-regular-webfont.woff') format('woff'); font-weight:normal;font-style: normal; }
@font-face { font-family:'Tex Gyre Adventor'; src:url('webfonts/texgyreadventor-bold-webfont.woff') format('woff'); font-weight:bold;font-style: normal; }
@font-face { font-family:'Tex Gyre Adventor'; src:url('webfonts/texgyreadventor-italic-webfont.woff') format('woff'); font-weight:bold;font-style:italic; }
@font-face { font-family:'Gidole'; src:url('webfonts/gidole-regular.woff2') format('woff2'); font-weight:normal;font-style:normal; }

/**** HTML BODY Default ****/
html {  }
body { background:url(images/spinner.gif) no-repeat center center; font-family:'Tex Gyre Adventor', 'Consolas', sans-serif; font-size:16px; line-height:1.45em; color:#d92565; font-weight:300; overflow:hidden !important; margin:0 !important; }

.stop-scrolling { height:100vh; overflow:hidden; }

#global { width:100%; height:100vh; min-width:100%; min-height:100vh; }

.container,
.container-fluid { padding:0; }
.row { padding:0 10px; margin-left:-10px; margin-right:-10px; }
.row [class*="col-"] { padding:0 10px; }



/**** Elements ****/
p { margin-bottom:1em; }
.align-center { text-align:center; }
.btn.btn-primary { background:none; border:2px solid #ef496a; color:#ef496a; font-weight:bold; padding:.2em 1.2em; }
.btn.btn-primary:hover { background:none; border:2px solid #ef496a; color:#ef496a; box-shadow:none; }
.btn.btn-primary:active { background:none; border:2px solid #ef496a; color:#ef496a; box-shadow:none; }
.btn.btn-primary:focus { background:none; border:2px solid #ef496a; color:#ef496a; box-shadow:none; }

/**** Container & centering box ****/
.wrapper { position:relative; height:100%; }
.floating-widget { position:fixed; top:0; left:0; max-width:250px; background:#ccc; padding-right:4px; z-index:999; }
.floating-widget pre { font-size:11px; margin:0; color:#d92565; background:#111; height:100vh; border-radius:0; }
.container { max-width:960px; }
.question-section { width:100%; height:100vh; min-width:100%; min-height:100vh; background-color:#fff; display:none; position:relative; padding:30px 0; }
.question-section.active { display:table; }
.centering { vertical-align:middle; display:table-cell; }
.middle-top { display:block; }
.whitebox { background:white; background:rgba(255,255,255,.7); padding:15px; }

/**** Header ****/
#header { position:absolute; top:0; width:100%; height:auto; z-index:1; }
#header .social-account a { font-size:32px; color:#ef496a; padding:5px; margin:10px 5px; display:inline-block; }
.cust-logo { position:absolute; right:15px; top:15px; }
.cust-logo > img { max-height:50px; width:auto; }

/**** Section Background ****/
.question-section { position:relative; }
.question-section h2 { margin-bottom:1em; line-height:1.4em; font-size:150%; position:relative; display:table; }
.question-section h2::before { content:" "; position:absolute; top:-10px; left:0; width:50px; border-top:2px solid #ef496a; }
.question-section label { cursor:pointer; font-family:'Gidole', sans-serif; }
#question--00 { background:url('images/background/cover.jpg') no-repeat center / cover; }
#question--00 h2 { font-size:200%; margin-bottom:.5em; display:block; }
#question--00 h2::before { display:none; }
#question--00 * { text-align:center; }
#question--01 h2 { margin:0 auto 1em auto; }
#question--02 { background:url('images/background/q2bg.jpg') no-repeat center / cover; }
#question--02 .blankbox { padding:0 20px; }
#question--03 { background:url('images/background/q3bg.jpg') no-repeat center / cover; }
#question--04 { background:url('images/background/q4bg.jpg') no-repeat center / cover; }
#question--04 .centering,
#question--05 .centering { vertical-align:top; }
#question--05 { background:url('images/background/q5bg.jpg') no-repeat center top / cover; }
#question--05 h2 { margin-bottom:10px; }
#question--05 .option-tipe--04 label > img { max-height:70px; }
#question--06 .option-tipe--01 { text-align:center; }
#question--06 .option-tipe--01 label > img { position:inherit; margin-bottom:15px; }
#question--06 .option-tipe--01 label > span { display:block; margin:0; }
#question--06.question-section h2 { margin:0 auto 40px auto; }
#question--07 { background:url('images/background/q7bg.jpg') no-repeat center / cover; }
#question--08 { background:url('images/background/q8bg.jpg') no-repeat center / cover; }
#question--09 { background:url('images/background/q9bg.jpg') no-repeat center / cover; }
#question--09 label:last-child { float:right; width:50%; margin-top:-88px; }
#question--10 { background:url('images/background/q10bg.jpg') no-repeat center / cover; }
#question--10 .centering { vertical-align:bottom; }
#question--11.question-section h2 { margin:0 auto 40px auto; }
#question--11 .row [class*="col-"] { padding:0 15px; }
#question--11 label span,
#question--11 label span.align-right { margin-top:20px; }
#question--12 { background:url('images/background/q12bg.jpg') no-repeat center / cover; }



/*** Option Tipe 00 ***/
.option--area input[type="radio"] { visibility:hidden; }
.option-tipe--00 input[type="radio"] {  margin-right:15px; }
.option-tipe--00 label { position:relative; }
.option-tipe--00 label > input[type="radio"] + span::before { content:" "; width:15px; height:15px; border:1px solid #ef496a; display:block; position:absolute; top:5px; left:0; }
.option-tipe--00 label > input[type="radio"]:checked + span::before { background:#ef496a; }
.option-tipe--00 span { display:block; margin-top:-22px; margin-left:25px; }
.option-tipe--01 { padding:15px; }
.option-tipe--01 input[type="radio"] { position:absolute; }
.option-tipe--01 label { position:relative; height:120px; width:100%; margin:15px 0; }
.option-tipe--01 label > img { position:absolute; left:0; border-radius:100%; }
.option-tipe--01 label > span { display:block; margin:45px 0 0 135px; }
.option-tipe--01 label > img.position-right { right:0; left:auto; }
.option-tipe--01 label > span.align-right { margin:45px 135px 0 0; text-align:right; }
.option-tipe--01 label > input[type="radio"]:checked + img { opacity:.7; }
.option-tipe--04 { text-align:center; }
.option-tipe--04 label > img { max-width:100px; }



#question--11 label.odd img { left:0; right:auto; }


/*** RESULT ***/
#result { background:url('images/background/result_1.jpg') no-repeat center / cover; }

#result .centering { vertical-align:bottom; }
#result.question-section h2 { margin-bottom:5px; }
#result .whitebox { position:relative; padding-left:20px; padding-right:30px; }
#result .whitebox h2 { font-size:22px; }
#result .ress { background:#D72565; color:#fff; width:200px; height:200px; border-radius:100em; position:absolute; top:calc(50% - 100px); right:-175px; }
#result .ress h3 { margin:0; text-align:center; font-weight:bold; font-size:2em; }

.cntr-wrp { height:100%; width:100%; display:table; }
.cntr-innr { height:100%; width:100%; display:table-cell; vertical-align:middle; }

#result.tipe_1 { background-image:url(images/background/result_1.jpg); }
#result.tipe_2 { background-image:url(images/background/result_2.jpg); }
#result.tipe_3 { background-image:url(images/background/result_3.jpg); }
#result.tipe_4 { background-image:url(images/background/result_4.jpg); }

.watch_trailer { position:absolute; width:100%; bottom:20px; text-align:center; font-size:20px; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
.watch_trailer .btn { background:#D72565; margin-bottom:.5em; color:#fff; font-size:18px; }
.watch_trailer span { color:#fff; }
.watch_trailer.mobile { display:none; }

/* #result .whitebox { display:none; }
#result.tipe_1 .ress h3:before { content: "CUEK-CUEK SANTAI"; }
#result.tipe_2 .ress h3:before { content: "MASIH BATAS WAJAR"; }
*/
#result.tipe_3 .ress h3 { margin-bottom:-.7em; }
/*
#result.tipe_3 .ress h3:before { content: "HATI-HATI!"; }
#result.tipe_4 .ress h3:before { content: "DON'T BE A PSYCHO!"; }
*/


.pscore { height:100px; font-weight:bold; position:absolute; top:-100px; left:-10px; }
.animabox { position:relative; }
#score { font-size:180px; color:#d72565; z-index:10; }
#fooCan { transform:rotate(45deg); position:absolute; bottom:30px; left:calc(50% - 50px); width:500px; height:auto; }


/**** Footer ****/
.footer { position:absolute; bottom:0; left:0; width:100%; height:auto; z-index:1; }
.corner-border { height:40px; width:40px; margin-bottom:10px; margin-left:10px; display:block; border-left:2px solid #ef496a; border-bottom:2px solid #ef496a; }
.copyr { position:absolute; bottom:7px; color:#fff; font-size:11px; padding:0; width:100%; }
.copyr > span { padding:0 15px; line-height:1.2em; display:block; }
.corner-border-set { height:40px; width:40px; position:absolute; left:10px; bottom:10px; border-left:2px solid #ef496a; border-bottom:2px solid #ef496a; }

/* Footer color */
#question--01 .copyr > span,
#question--05 .copyr > span,
#question--06 .copyr > span,
#question--10 .copyr > span,
#question--11 .copyr > span { color:#999; }







/*** Share Button ***/
.sharecare { display:block; padding:15px; font-size:28px; font-weight:bold; }
.sharecare a { color:#ef496a; display:inline-block; margin:0 10px 0 0; }

@media all and (max-width:768px) {

	.cust-logo > img { max-height:35px; max-width:90px; width:auto; }

	.centering { vertical-align:bottom; }

	.question-section { font-size:13px; line-height:1.3em; padding:10px 0; }
	.question-section h2 { font-size:16px; margin-bottom:5px; }

	label { margin-bottom:0; }

	input[type="checkbox"], input[type="radio"] { margin-top:9px; }

	.row { margin:0; }
	.row [class*="col-"] { padding:0; }

	.question-section label { height:auto; }
	.option-tipe--01 label > img,
	.option-tipe--01 label > img.position-right { display:block; position:unset; margin:0 auto; }
	.option-tipe--01 label > span,
	.option-tipe--01 label > span.align-right { display:block; margin:15px 0; text-align:center; } 

	/**** Custom by ID ****/
	#question--00 .whitebox { font-size:13px; }
	#question--00 .whitebox .form-group { margin-bottom:5px; }
	#question--02 .blankbox { background:rgba(255,255,255,.7); padding:5px 15px 15px 15px; }
	#question--06 h2 br { display:none; }



	/*** BG Adjustment ***/
	#question--00 { background:url(images/bg-mobile/cover.jpg) no-repeat center top / cover; }
	#question--00 .whitebox { margin-bottom:25px; }
	#question--00 .corner-border-set { bottom:35px; }
	#question--02 { background:url(images/bg-mobile/q2bg.jpg) no-repeat center top / cover; }
	#question--03 { background:url(images/bg-mobile/q3bg.jpg) no-repeat center top / cover; }
	#question--04 { background:url(images/bg-mobile/q4bg.jpg) no-repeat center top / cover; }
	#question--04 .centering,
	#question--05 .centering { vertical-align:bottom; }
	#question--05 { background:url(images/bg-mobile/q5bg.jpg) no-repeat center top / contain; }
	#question--06.question-section h2 { margin-top:40px; }
	#question--06 .option-tipe--01 label > img { margin-bottom:5px; }
	#question--07 { background:url(images/bg-mobile/q7bg.jpg) no-repeat center top / cover; }
	#question--08 { background:url(images/bg-mobile/q8bg.jpg) no-repeat center top / cover; }
	#question--09 { background:url(images/bg-mobile/q9bg.jpg) no-repeat center top / cover; }
	#question--09 label:last-child { float:none; width:inherit; margin-top:0; }
	#question--10 { background:url(images/bg-mobile/q10bg.jpg) no-repeat #fff center top / contain; }
	#question--12 { background:url(images/bg-mobile/q12bg.jpg) no-repeat center top / cover; }


	#result {  }
	#result.tipe_1 { background-image:url(images/background/result_1_m.jpg); }
	#result.tipe_2 { background-image:url(images/background/result_2_m.jpg); }
	#result.tipe_3 { background-image:url(images/background/result_3_m.jpg); }
	#result.tipe_4 { background-image:url(images/background/result_4_m.jpg); }

	
	/*** This result ***/
	#result .whitebox { padding-left:15px; padding-right:15px; }
	#result .whitebox h2 { font-size:12px; }
	#result .pscore { left:0; top:-50%; }
	#result #score { font-size:50px; }
	#fooCan { width:200px; bottom:0; }

	.sharecare { padding:5px 15px; margin-bottom:20px; }

	.watch_trailer { display:none; }
	#result .ress { width:120px; height:120px; right:0; right:0; top:-215px; }
	#result .ress h3 { font-size:1.7em; line-height:.9em; }

	.footer { bottom:0; }
	.copyr > span { font-size:9px; text-shadow:1px 1px 0 rgba(0,0,0,.5); }


	.watch_trailer.mobile { display:block; position:absolute; top:-80px; right:0; width:auto; text-align:right; font-size:16px; line-height:1.2em; text-shadow:1px 1px 0 rgba(0,0,0,.5); }
	.watch_trailer.mobile .btn { font-size:12px; }
	

	/*REV*/
	.cust-logo img { max-width:45px; }

	.question-section h2 { font-size:14px; }
	.question-section { font-size:12px; }
	.whitebox h2 { margin-top:5px; }

	.option-tipe--01 { padding:0; }
	.option-tipe--01 img { max-width:70px; }
	.option-tipe--01 label { margin:0 0 15px 0; }
	.option-tipe--01 label > span, 
	.option-tipe--01 label > span.align-right { margin-top:5px; line-height:1.2em; }

	.option-tipe--04 img { max-width:50px; }
	#question--05 .option-tipe--04 label > img { max-width:50px; }

	#question--01 .centering,
	#question--06 .centering,
	#question--11 .centering { vertical-align:middle; }
	#question--11 label span, 
	#question--11 label span.align-right { margin:4px; }
	#question--11.question-section h2 { margin-bottom:15px; }

	#question--05 .whitebox,
	#question--10 .whitebox   { margin:0 -15px; padding:15px 30px; background:#fff; }

}


@media all and (max-width:320px) {
	
	.question-section h2 { font-size:13px; margin-bottom:4px; }
	#question--01 .centering,
	#question--06 .centering,
	#question--11 .centering { vertical-align:bottom; }
	#question--05 .whitebox,
	#question--10 .whitebox   { margin:0 -15px; padding:15px 30px; background:#fff; }

	

}




/* GOTIX */
#gotix .mobile { display:none; position:relative; bottom:0; } 
@media all and (max-width:768px) {
	#gotix .desktop { display:none; }
	#gotix .mobile { display:block; }
}

#question--00 .whitebox { margin-bottom:40px; }
@media all and (max-width:768px) {
	#question--00 .whitebox { margin-bottom:140px; }
}