@charset "UTF-8";
/* Copyright Azhys Kasmy 2015 */

/* basic */
html,
body,
.container {height: 100%;}

body {margin: 0px}
.container {
	margin: 0px auto !important;
	width: 100%;
	position: relative;
}

/* ============== */

/* wrapping */
section {
	margin: 0px auto;
	overflow: auto;
	padding: 20px 0px; /* default */
	
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}
.wrap-extra,
.wrap-wide,
.wrap-focus,
.wrap-tiny,

.wrap-full,
.wrap-full-fix {
	margin: 0px auto;
	overflow: auto;
	
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
}
.wrap-extra {max-width: 1200px;	width: 98%}
.wrap-wide  {max-width: 1004px; width: 98%}
.wrap-focus {max-width: 728px; 	width: 98%}
.wrap-tiny  {max-width: 340px}

.wrap-full,
.wrap-full-fix {
	height: 100%;
}
.wrap-full-fix {
	position: fixed;
	top: 0px;
	width: 100%;
}

.wrap-focus-abs {	
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	margin: 80px auto;
	
	height: auto;
	position: absolute;
	max-width: 728px;
	overflow: hidden;
	width: 98%;
}

.wrap-tiny-abs {}

.wrap-left-abs,
.wrap-right-abs {
	height: auto;
	margin: auto;
	position: absolute;
}
.wrap-left-abs {
	top: 0px; /* custom */
	left: 0px;  /* custom */
	width: 46%; /* custom */
}
.wrap-right-abs {
	top: 0px; /* custom */
	right: 0px;  /* custom */
	width: 46%; /* custom */
}

/* ============== */

/* grid */
.grid-line-m,
.grid-line-p,

.grid-o-1-1,
.grid-o-1-2,
.grid-o-3-4,
.grid-o-1-4,

.grid-m-1-1,
.grid-m-1-2, 
.grid-m-3-4,
.grid-m-1-4,

.grid-p-1-1,
.grid-p-1-2, 
.grid-p-3-4,
.grid-p-1-4 {
	float: left;
	overflow: auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}

.grid-line-m {width: 100%; margin: 0px 1%}
.grid-line-p {width: 100%; padding: 0px 1%}

.grid-o-1-1 {width: 100%}
.grid-o-1-2 {width: 50%}
.grid-o-3-4 {width: 75%}
.grid-o-1-4 {width: 25%}

.grid-m-1-1,
.grid-m-1-2, 
.grid-m-3-4,
.grid-m-1-4 {
	margin: 0px 1%;
	margin-bottom: 20px;
} 

.grid-m-1-1 {width: 98%}
.grid-m-1-2 {width: 48%}
.grid-m-3-4 {width: 73%}
.grid-m-1-4 {width: 23%}

.grid-p-1-1,
.grid-p-1-2, 
.grid-p-3-4,
.grid-p-1-4 {
	padding: 0px 1%;
	padding-bottom: 20px;
} 

.grid-p-1-1 {width: 100%}
.grid-p-1-2 {width: 50%}
.grid-p-3-4 {width: 75%}
.grid-p-1-4 {width: 25%}

.grid-left,
.grid-center,
.grid-right {
	overflow: auto;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-o-box-sizing: border-box;
}
.grid-left {
	float: left; /* custom */
	width: 200px;/* custom */
}
.grid-center {
	float: left; /* custom */
	width: 30%;  /* custom */
}
.grid-right {
	float: none; /* custom */
	width: auto; /* custom */
}

@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 768px) {
.grid-m-3-4,
.grid-p-3-4 {width: 98%}
	
.grid-m-1-4,
.grid-p-1-4 {width: 48%}
}
@media only screen and (max-width: 480px) {
.grid-o-1-1,
.grid-o-1-2,
.grid-o-3-4,
.grid-o-1-4,

.grid-m-1-1,
.grid-m-1-2, 
.grid-m-3-4,
.grid-m-1-4,

.grid-p-1-1,
.grid-p-1-2, 
.grid-p-3-4,
.grid-p-1-4 {width: 100%; margin: 0px; margin-bottom: 20px; padding: 0px}			
}

/* ============== */

/* grid-flex */
.grid-flex {width: auto}
.grid-flex .group {}
.grid-flex .grid {
	float: left;
	height: auto;
	margin: 1%; /* custom */
	width: 23%; /* custom */
}
.grid-flex .box {
	overflow: auto;
	padding: 10px;
}

/* grid-fix */
.grid-fix {}
.grid-fix .group {
	display: table;
	margin: 0px auto;
	width: auto;
}
.grid-fix .grid {
	display: inline-table;
	height: auto; /*perlu deskripsi*/
	float: left;
	margin: 10px;
	width: 230px;
}

/* grid-list */
.grid-list {}
.grid-list .group {
	margin: 0px;
	padding: 0px;
}
.grid-list .grid {list-style: none}

/* grid-table */
.grid-table {display: table}
.grid-table .table-head,
.grid-table .table-body {
	display: table-row;
	overflow-x: scroll;
	width: auto;
}
	
.grid-table .table-head h5 {font-weight: 600}

.grid-table .grid-n  {width: 1%}
.grid-table .grid-3  {width: 3%}
.grid-table .grid-5  {width: 5%}
.grid-table .grid-7  {width: 7%}
.grid-table .grid-9  {width: 9%}
.grid-table .grid-11 {width: 11%}
.grid-table .grid-13 {width: 13%}
.grid-table .grid-15 {width: 15%}

.grid-table .grid,
.grid-table .grid-n,
.grid-table .grid-3, 
.grid-table .grid-5, 
.grid-table .grid-7,
.grid-table .grid-9,
.grid-table .grid-11,
.grid-table .grid-13,
.grid-table .grid-15 {
	display: table-cell;
	padding: 5px;
	vertical-align: middle;
}

.line-table {border-bottom: 1px solid rgba(0, 0, 0, 0.04)}
.line-table:last-child {border-bottom: 0px}

/* ============== */

/* form */
label input[type="text"],
label input[type="number"],
label input[type="tel"],
label input[type="email"],
label input[type="password"],
label input[type="date"],
label input[type="button"],
label input[type="submit"],
label input[type="reset"],
select,
textarea {width: 100%}

input[type="text"],
input[type="number"],
input[type="tel"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="button"],
input[type="submit"],
input[type="reset"],
select,
textarea {
	border-radius: 0px;
	-webkit-border-radius: 0px;
	-moz-border-radius: 0px;
	-ms-border-radius: 0px;
	-o-border-radius: 0px;
    box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	-webkit-appearance: none;
	display: block;
	height: 47px;
	padding: 10px;
}
input[type="radio"] {
	width: 30px;
	height: 16px;
}
textarea {height: 140px}

/* form theme */
input,
select,
textarea {
    font-size: 14px;
	font-weight: 400;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
	letter-spacing: 1px;
	text-transform: uppercase;
}
.dark input,
.dark select,
.dark textarea {
	background: none;
	border: 1px solid rgba(0, 0, 0, 0.1)}

.dark select {
	background: url(interaktif/dropdown.png);
	background-position: right center;
	background-repeat: no-repeat;
}
.dark input[type="file"] {border: 0px; -webkit-appearance: none}
.dark input[type="button"],
.dark input[type="submit"],
.dark input[type="reset"] {}

.dark input[type="button"]:hover,
.dark input[type="submit"]:hover,
.dark input[type="reset"]:hover {
	color: white;
	background: rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(0, 0, 0, 0.1);
}
.dark input[type="radio"] {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="tel"]:focus,
.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="date"]:focus,
.dark input[type="button"]:focus,
.dark input[type="submit"]:focus,
.dark input[type="reset"]:focus,
.dark select:focus,
.dark textarea:focus {
	outline: 0;
	border: 1px solid #0dc9e8;
}
.dark input[type="file"]:focus {outline: 0}

.light input,
.light select,
.light textarea {
	background: none;
	border: 1px solid #FFF}
}
.light select {
	background: url(interaktif/dropdown.png);
	background-position: right center;
	background-repeat: no-repeat;
}
.light input[type="file"] {border: 0px; -webkit-appearance: none}
.light input[type="button"],
.light input[type="submit"],
.light input[type="reset"] { color: white}

.light input[type="button"]:hover,
.light input[type="submit"]:hover,
.light input[type="reset"]:hover {
	color: black;
	background: white;
	border: 1px solid white;
}
.light input[type="radio"] {
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.light input[type="text"]:focus,
.light input[type="number"]:focus,
.light input[type="tel"]:focus,
.light input[type="email"]:focus,
.light input[type="password"]:focus,
.light input[type="date"]:focus,
.light input[type="button"]:focus,
.light input[type="submit"]:focus,
.light input[type="reset"]:focus,
.light select:focus,
.light textarea:focus {
	outline: 0;
	border: 1px solid #0dc9e8;
}
.light input[type="file"]:focus {outline: 0}

/* ============== */

/* badge */
.badge-l,
.badge-s {
	float: right;
	line-height: normal;
	position: absolute;
	right: 10px;
	top: 10px;
}
.badge-l {font-size: 12px; padding: 6px}
.badge-s {font-size: 9px;  padding: 2px; letter-spacing: 1px}

/* button */
.button-l,
.button-m,
.button-s {
	display: inline-block;
	-webkit-appearance: none;
	text-align: center;
}

.button-s {height: 23px; line-height: 23px; font-size: 10px; letter-spacing: 1px; padding: 0px 10px}
.button-m {height: 47px; line-height: 47px; font-size: 14px; letter-spacing: 1px; padding: 0px 20px}
.button-l {height: 60px; line-height: 60px;	font-size: 14px; letter-spacing: 1px; padding: 0px 20px}

.button-16 {width: 160px}

/* ============== */

/* anchor */
a {display: block}
a:link {text-decoration: none}

/* text-align */
.text-center {text-align: center}
.text-right  {text-align: right}

/* image */
img {display: block}
.img-medium {width: 300px}
.img-small {width: 100px}
.img-tiny {width: 60px}

img {display: block}
.img-l {}
.img-m {width: 300px}
.img-s {width: 100px}
.img-t {width: 60px}

.img-h-full {height: 100%; width: auto}
.img-w-full {height: auto; width: 100%;	max-width: 100%}
.img-left 	{float: left; margin-right: 20px}
.img-right	{float: right; margin-left: 20px}

/* float, clear */
.left {float: left}
.right {float: right}
.clear {clear: both}

/* round */
.round-l {border-radius: 50px}
.round-m {border-radius: 8px}
.round-s {border-radius: 3px}

/* padding */
.pad-5 {padding: 50px}
.pad-3 {padding: 30px}
.pad-2 {padding: 20px}
.pad-1 {padding: 10px}
.pad-ver-1 {padding: 10px 0px}
.pad-ver-2 {padding: 20px 0px}

/* kolom text*/
.col-2 {
	column-count: 2;
	-webkit-column-count: 2;
	-moz-column-count: 2;
	-ms-column-count: 2;
	-o-column-count: 2;
	column-gap: 10px;
}
.col-3 {
	column-count: 3;
	-webkit-column-count: 3;
	-moz-column-count: 3;
	-ms-column-count: 3;
	-o-column-count: 3;
	column-gap: 10px;
}

/* basic theme */
.shadow {box-shadow: rgba(0, 0, 0, 0.03) 0px 0px 1px 1px}

.line-light {border-bottom: 1px solid #FFF}
.border-light {border: 1px solid #FFF}
.bground-light {background: #FFF}
.font-light {color: #FFF}

.line-dark {border-bottom: 1px solid rgba(0, 0, 0, 0.1)}
.border-dark {border: 1px solid rgba(0, 0, 0, 0.1)}
.bground-dark {background: rgba(0, 0, 0, 0.03)}

.bground-c {background: #0dc9e8; color: white}
.line-c {border-bottom: 1px solid #0dc9e8}
.border-c {border: 1px solid #0dc9e8}
.font-c {color: #0dc9e8}

/* ============== */

/* indicator 
@media only screen and (max-width: 1024px) {
	body {background: #a4bad6}
}
@media only screen and (max-width: 960px) {
	body {background: #d7b6db}	
}
@media only screen and (max-width: 768px) {
	body {background: #c0ded7}
}
@media only screen and (max-width: 480px) {
	body {background: #efeed7}
}
*/

/* ============== */

@media only screen and (max-width: 1024px) {
}
@media only screen and (max-width: 960px) {
}
@media only screen and (max-width: 768px) {
}
@media only screen and (max-width: 480px) {
}

/* ============== */











/* grid overflow, box-sizing */
form,

.grid-flex,
.grid-fix,
.grid-auto,
.grid-list,
.grid-flex .group,
.grid-fix .group,
.grid-auto .group,
.grid-list .group,
.grid-flex .grid,
.grid-fix .grid,
.grid-auto .grid,
.grid-list .grid,
.box {
	border-collapse: collapse;
	box-sizing: border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-o-box-sizing:border-box;
	overflow: auto
}

@media only screen and (max-width: 1024px) {
.grid-fix .group {width: 752px}
}

@media only screen and (max-width: 960px) {
.grid-flex .grid {width: 48%}
.grid-flex .scala-box {width: 23%}
}

@media only screen and (max-width: 768px) {
.grid-flex .grid {width: 48%; margin-bottom: 10px}
.grid-fix .group {width: 502px}
}

@media only screen and (max-width: 480px) {
.grid-flex .grid {width: 98%; margin-bottom: 10px}
.grid-fix .group {width: 250px}
.grid-auto .grid {width: 100%; display: block}