@charset "utf-8";
/* CSS Document */
@import url("fonts.css");

/* google map */
.content { margin: 105px 0 0 0; padding: 0; width: 100%; position: relative; }
.contact { margin: 0; padding: 20px 20px 40px 20px; width: 340px; border: 2px solid #f44336; -webkit-border-radius: 0px 30px 0px 30px; -moz-border-radius: 0px 30px 0px 30px; border-radius: 0px 30px 0px 30px; background-color: #f4f4f4; position: absolute; top: 80px; left: 50px; }
.men { margin: 0; padding: 0; position: absolute; top: -50px; right: 10px; }
.contact h2 { font-family: 'tenagabold', Arial, sans-serif; font-size: 26px; text-transform: uppercase; color: #333; }
#map { margin: 0; padding: 0; width: 100%; height: 570px; }
.contact p { margin: 5px 0 30px 0; font-family: 'tenaga', Arial, sans-serif; font-size: 16px; line-height: 20px; color: #333; }
.contact p a { padding: 15px 20px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; background-color: #e44126; color: #fff; font-size: 12px; }
.contact p a:hover { background-color: #005da9; }
.c_bottom { margin: 0; padding: 0; width: 280px; }
.c_bottom p.c_title { margin: 0; font-family: 'tenaga', Arial, sans-serif; font-size: 16px; color: #333; }
.c_bottom p.c_tel { margin: 2px 0 0 0; font-family: 'tenaga', Arial, sans-serif; font-size: 20px; color: #333; }
.c_bottom p.email { margin: 30px 0 0 0; text-align: left; }
.mobile { display: none; }

/* question & comments */
.qc { margin: 0; padding: 80px 0; width: 100%; position: relative; }
.bg_gradient { background: url("../img/gradient_bar.png") top left repeat-y #ca0054; }
.qc h1 { font-family: 'tenagabold', Arial, sans-serif; font-size: 60px; line-height: 50px; text-transform: uppercase; color: #fff; }
.qc h2 { margin: 5px 0 0 0; font-family: 'tenagabold', Arial, sans-serif; font-size: 26px; text-transform: uppercase; color: #fff; }
.tab { margin: 40px auto 0 auto; padding: 0; width: 500px; }
.t_left { margin: 0; padding: 0; text-align: right; }
.t_right { margin: 0; padding: 0; text-align: left; }
.tab p { font-family: 'tenaga', Arial, sans-serif; font-size: 16px; text-transform: uppercase; }
.tab p a { padding: 12px 35px; color: #fff; text-decoration: none; -webkit-border-radius: 0px 0px 0px 20px; -moz-border-radius: 0px 0px 0px 20px; border-radius: 0px 0px 0px 20px; border: 2px solid #fff; }
.tab p.tab_right a { -webkit-border-radius: 0px 20px 0px 0px; -moz-border-radius: 0px 20px 0px 0px; border-radius: 0px 20px 0px 0px; border-left: none; }
.tab p a:hover { background-color: #fff; color: #e44126; }
.tab p a.selected { background-color: #fff; color: #e44126; cursor: default; }
.qc_ppl { margin: 120px auto 0 auto; padding: 0; width: 980px; }
.qc_ppl2 { margin: 120px auto 0 auto; padding: 0; width: 490px; }
.qc_item { margin: 0 auto; padding: 30px 0; width: 220px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; background: url("../img/fade_box.png") top left repeat; }
.qc_icon { margin: -90px 0 0 0; padding: 0; }
.qc_img { margin: -80px 0 0 0; padding: 0; }
.qc_item p { margin: 20px 0 0 0; padding: 0 20px; font-family: 'tenagabold', Arial, sans-serif; font-size: 16px; color: #fff; }
.qc_item p.top_space { margin: 35px 0 0 0; }
.qc_item p.call { margin: 10px 0 0 0; font-family: 'tenaga', Arial, sans-serif; font-size: 14px; text-transform: uppercase; }
.email { margin: 80px 0 0 0; padding: 0; width: 100%; text-align: center; }
.email p { font-family: 'tenagabold', Arial, sans-serif; font-size: 20px; text-transform: uppercase; }
.email p a { padding: 15px 60px; color: #e44126; text-decoration: none; -webkit-border-radius: 0px 2px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; background-color: #fff; }
.email p a:hover { background-color: #005da9; color: #fff; }

/* only for safari and chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
}

/* only for IE10 or above */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	#wrapper { /*padding-top: 20px;*/ padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); } 
}

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	#map { height: 520px; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.qc_ppl { margin: 20px auto 0 auto; }
	.qc_ppl2 { margin: 20px auto 0 auto; }	
	.qc_item { margin: 80px auto 0 auto; }	
	.c_row2 { margin: 40px auto 0 auto; }
	.c_row3 { margin: 40px auto 0 auto; width: 980px; }
}

@media only screen and (min-width: 991px) and (max-width: 1023px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	#map { height: 520px; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.tab { margin: 40px auto 0 auto; padding: 0 20px; width: auto; }
	.qc_ppl { margin: 20px auto 0 auto; width: 490px; }
	.qc_ppl2 { margin: 20px auto 0 auto; }
	.qc_item { margin: 80px auto 0 auto; }		
}

@media only screen and (min-width: 768px) and (max-width: 990px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	.contact { margin: 0; width: auto; border: none; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; background-color: #f4f4f4; position: relative; top: 0px; left: 0px; text-align: center; }
	.men { display: none; }
	#map { height: 240px; }
	.c_bottom { margin: 0 auto; }
	.c_bottom p.email { text-align: center; }
	.mobile { display: block; }
	.desktop { display: none; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.tab { margin: 40px auto 0 auto; padding: 0 20px; width: auto; }
	.qc_ppl { margin: 20px auto 0 auto; width: 490px; }
	.qc_ppl2 { margin: 20px auto 0 auto; }
	.qc_item { margin: 80px auto 0 auto; }		
}

@media only screen and (min-width: 641px) and (max-width: 767px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	.contact { margin: 0; width: auto; border: none; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; background-color: #f4f4f4; position: relative; top: 0px; left: 0px; text-align: center; }
	.men { display: none; }
	#map { height: 240px; }
	.c_bottom { margin: 0 auto; }
	.c_bottom p.email { text-align: center; }
	.mobile { display: block; }
	.desktop { display: none; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.tab { margin: 40px auto 0 auto; padding: 0 20px; width: auto; }
	.t_left { text-align: center; }
	.t_right { margin: 40px 0 0 0; text-align: center; }
	.tab p a { -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	.tab p.tab_right a { padding: 12px 27px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; border-left: 2px solid #fff; }
	.qc_ppl { margin: 20px auto 0 auto; width: 490px; }
	.qc_ppl2 { margin: 20px auto 0 auto; }
	.qc_item { margin: 80px auto 0 auto; }		
}

/* Smartphones (other smartphones portrait) */
@media only screen and (min-width: 481px) and (max-width: 640px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	.contact { margin: 0; width: auto; border: none; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; background-color: #f4f4f4; position: relative; top: 0px; left: 0px; text-align: center; }
	.men { display: none; }
	#map { height: 240px; }
	.c_bottom { margin: 0 auto; }
	.c_bottom p.email { text-align: center; }
	.mobile { display: block; }
	.desktop { display: none; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.qc h1 { font-size: 40px; line-height: 40px; }
	.tab { margin: 40px auto 0 auto; padding: 0 20px; width: auto; }
	.t_left { text-align: center; }
	.t_right { margin: 40px 0 0 0; text-align: center; }
	.tab p a { -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	.tab p.tab_right a { padding: 12px 27px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; border-left: 2px solid #fff; }
	.qc_ppl { margin: 20px auto 0 auto; width: auto; }
	.qc_ppl2 { margin: 20px auto 0 auto; width: auto; }
	.qc_item { margin: 80px auto 0 auto; }	
}

/* Smartphones (Landscape) */
@media only screen and (min-width: 321px) and (max-width: 480px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	.contact { margin: 0; width: auto; border: none; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; background-color: #f4f4f4; position: relative; top: 0px; left: 0px; text-align: center; }
	.men { display: none; }
	.contact h2 { font-size: 20px; }
	#map { height: 240px; }
	.c_bottom { margin: 0 auto; }
	.c_bottom p.email { text-align: center; }
	.mobile { display: block; }
	.desktop { display: none; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.qc h1 { font-size: 30px; line-height: 35px; }
	.qc h2 { font-size: 20px; line-height: 26px; }
	.tab { margin: 40px auto 0 auto; padding: 0 20px; width: auto; }
	.t_left { text-align: center; }
	.t_right { margin: 40px 0 0 0; text-align: center; }
	.tab p a { -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	.tab p.tab_right a { padding: 12px 27px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; border-left: 2px solid #fff; }
	.qc_ppl { margin: 20px auto 0 auto; width: auto; }
	.qc_ppl2 { margin: 20px auto 0 auto; width: auto; }
	.qc_item { margin: 80px auto 0 auto; }	
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
	/* google map */
	.content { margin: 88px 0 0 0; }
	.contact { margin: 0; width: auto; border: none; -webkit-border-radius: 0px 0px 0px 0px; -moz-border-radius: 0px 0px 0px 0px; border-radius: 0px 0px 0px 0px; background-color: #f4f4f4; position: relative; top: 0px; left: 0px; text-align: center; }
	.men { display: none; }
	.contact h2 { font-size: 20px; }
	#map { height: 240px; }
	.c_bottom { margin: 0 auto; }
	.c_bottom p.email { text-align: center; }
	.mobile { display: block; }
	.desktop { display: none; }
	
	/* question & comments */
	.qc { padding: 20px 0 80px 0; width: auto; }
	.qc h1 { font-size: 30px; line-height: 35px; }
	.qc h2 { font-size: 20px; line-height: 26px; }
	.tab { margin: 40px auto 0 auto; padding: 0 20px; width: auto; }
	.t_left { text-align: center; }
	.t_right { margin: 40px 0 0 0; text-align: center; }
	.tab p a { -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; }
	.tab p.tab_right a { padding: 12px 27px; -webkit-border-radius: 0px 20px 0px 20px; -moz-border-radius: 0px 20px 0px 20px; border-radius: 0px 20px 0px 20px; border-left: 2px solid #fff; }
	.qc_ppl { margin: 20px auto 0 auto; width: auto; }
	.qc_ppl2 { margin: 20px auto 0 auto; width: auto; }
	.qc_item { margin: 80px auto 0 auto; }
}