@CHARSET "UTF-8";
/* 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, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight:inherit;
    font-style:inherit;
    font-size: 12px;
    font-family:'fagonoregular', Arial, Helvetica, sans-serif;
    vertical-align: baseline;
}

html, body {
    height: 100%;
}

/* remember to define focus styles! */
:focus {
    outline: 0;
}
body {
    line-height: 1;
    color: #808184;
    height:100%;
    background: white;
}
ol, ul {
    /*list-style: none;*/
}
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
}
caption, th, td {
    text-align: left;
    font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}

.clear{
    clear:both;
}
/* END OF CSS RESET */

.text-right{
	text-align:right;
}

.full-wrap{
	width:100%;
}

.content-wrap{
	width:100%;
	max-width:1200px;
    margin:0 auto;
    position:relative;
}

.border-bottom{
	border-bottom:1px solid;
	color:#e2e2e2;
}

.no-padding{
	padding:0%;
}


#main-wrap{
    width:96%;
    padding-left:2%;
    padding-right:2%;
    margin:0 auto;
    position:relative;
    min-height: 100%;
    height: auto !important;
    height: 100%;
    max-width:1200px;
    
}



.header-box-left, .header-box-right{
	float:left;
	border-right:1px solid;
	border-color:#e2e2e2;
	padding:1.25%;
}

.header-box-left a{
	text-decoration:none;
	color:#373737;
	font-size:12px;
}

.header-box-left span{
	color:#1181e1;
	font-size:12px;
}

.header-box-right{
	float:right;
	border-left:1px solid;
	border-right:none;
	
}

.header-box-right img{
	height:19px;
	vertical-align:middle;
}


.header-box-right span{
	font-size:12px;
}
 
.blue{
	color:#1181e1;
}

.gray{
	color:#373737;
}


#banner-box{
	border-bottom:1px solid;
	border-color:#e2e2e2;
	height:175px;
}

#logo-box{
	float:left;
	vertical-align: middle;
	display:inline-block;
	height:100%;
	
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}


#logo-box img{
	vertical-align: middle;
	margin-right:6px;
}

#logo-connect{
	color:#bf9831;
	font-size:38px;
}

#meta-box{
	float:right;
	margin-top:10px;
	cursor:pointer;
	text-decoration:none;
}

#meta-box img{
	margin-bottom:4px;
}

#meta-text{
	padding:4px;
	border-top:1px solid;
	border-color:#e2e2e2;
	text-align:center;
	line-height:16px;
	text-decoration:none;
}

#meta-text .font1{
	font-weight:bold;
	font-size:15px;
	color:#474747;
	text-decoration:none;
}

#meta-text .font2{
	font-weight:bold;
	font-size:12px;
	color:#e3773f;
	text-decoration:none;
}


#bottom-box{
	margin-top:3.5%;
	background-image:url('../images/bottom-bg.jpg');
	position:relative;
}


#bottom-box #bottom-text{
	padding-top:30px;
	padding-bottom:30px;
	color:white;
	text-align:center;
	font-size:13px;
	line-height:22px;
	margin-top:30px;
	margin-bottom:30px;
	position:relative;
}

#quote-end{
	position:absolute; 
	margin-top:-10px; 
	right:0px;
}

#bottom-box #bottom-text #bottom-text-box{
	font-size:13px;
	width:95%;
	text-align:center;
	margin:0 auto;
}	


.big-quote{
	color:white;
	font-size:70px;
	font-family: Helvetica;
}



#menu-box{
	border-bottom:1px solid;
	border-color:#e2e2e2;
	height:74px;
}

#menu-box .part-box{
	float:left;
	width:20%;
	height:100%;
	position:relative;
	color:#a1a1a1;
	text-decoration:none;
}

#menu-box .part-box img{
	position:absolute;
	width:16.66%;
	height:100%;
	right:0px;
	top:0px;
}


#menu-box .part-box .number-box{
	position:absolute;
	text-align:center;
	width:44px;
	top:10px;
	left:10px;
	font-size:45px;
}

.step-text{
	font-size:15px;
	
}

.gold{
	color:#bf9831;
}

.black{
	color:#393939;
}

.red{
	color:red;
}

#menu-box .part-box .text-box{
	font-size:20px;
	line-height:70px;
	margin-left:76px;
}



#popup-box{
	position:fixed;
	top:10%;
	width:440px;
	border:1px solid;
    left: 50%;
    margin-left: -220px;
    background-color:white;
    z-index:100;
    display:none;
}


#popup-box #popup-close-button{
	position:absolute;
	top:8px;
	right:8px;
	cursor:pointer;
}

#popup-box #popup-title{
	margin-left:30px;
	margin-top:40px;
	margin-bottom:20px;
	font-size:16px;
	color:#525252;
}

#popup-box #popup-button{
	text-align:center;
	margin-bottom:20px;
}

#popup-box #popup-button img{
	cursor:pointer;
}	

#popup-box .popup-content-text{
	font-size:14px;
	color:#525252;
	width:90%;
	margin-left:30px;
	line-height:20px;
}

.error-message{
	margin-top:4px;
	color:#da494c;
	margin-left:125px;
	display:none;
}

#cover-box{
	background-color:#4c4c4c;
	opacity:0.5;
	top:0;
    bottom:0;
    left:0;
    right:0;
    /*min-height: 100%;
	height: auto !important;*/
	height: 100%;
	margin: 0 auto ;
    overflow:hidden;
    z-index:99;
    position:absolute;
    display:none;
}


#btn-lanjut{
	cursor:pointer;
}

.notif{
	font-weight:bold;
	text-decoration:underline;
	font-size:14px;
	margin-top:10px;
	color:#da4b4e;
}
.custom-checkbox{
	float:left;
	margin-top:10px;
	margin-right:10px;
}

.custom-checkbox input{
	display:none;
}

.custom-checkbox img{
	width:20px;
	height:20px;
	background-image: url("../images/checkbox-uncheck.png");
	cursor:pointer;
	vertical-align:top;
}


.custom-checkbox input:checked + img {
    background-image: url("../images/checkbox-check.png");
}


.custom-checkbox div{
	width:20px;
	height:20px;
	background-image: url("../images/checkbox-uncheck.png");
	cursor:pointer;
	vertical-align:top;
}


.custom-checkbox input:checked + div {
    background-image: url("../images/checkbox-check.png");
}

.custom-checkbox span{
	width:20px;
	height:20px;
	background-image: url("../images/checkbox-uncheck.png");
	cursor:pointer;
	vertical-align:middle;
	display:inline-block;
}


.custom-checkbox input:checked + span {
    background-image: url("../images/checkbox-check.png");
}



.custom-radiobutton{
	margin-right:6px;
	margin-top:5px;
}

.custom-radiobutton input{
	display:none;
	
}

.custom-radiobutton div{
	content: "";
	width:19px;
	height:19px;
	background: url("../images/radio-uncheck.png");
	cursor:pointer;
}


.custom-radiobutton input:checked + div {
    background: url("../images/radio-check.png");
}

.bottom-text{
	font-size:13px;
}




.hline{
	border-top:2px solid;
	border-color:#bfbfbf;
	width:100%;
	margin-top:30px;
	margin-bottom:20px;
}


#success-box{
	text-align:center;
	margin-top:40px;
}

#success-box #success-title{
	font-size:20px;
	line-height:25px;
}

#success-box #success-content{
	margin-top:10px;
	margin-bottom:20px;
	font-size:16px;
	color:#525252;
	line-height:20px;
}

#success-box #success-button img{
	cursor:pointer;
}	


#popup-box-big{
	position:fixed;
	top:10%;
	width:1000px;
	border:1px solid;
    left: 50%;
    margin-left: -500px;
    background-color:white;
    z-index:100;
    display:none;
}


#popup-box-big #popup-close-button{
	position:absolute;
	top:8px;
	right:8px;
	cursor:pointer;
}

#popup-box-big #popup-title{
	margin-top:20px;
	margin-bottom:20px;
	font-size:24px;
	color:#525252;
	text-align:center;
}

#popup-box-big #popup-content{
	font-size:18px;
	color:#525252;
	padding-left:30px;
	padding-right:30px;
	line-height:25px;
	margin-bottom:40px;
	text-align:justify;
}

#footer{
	width: 100%;
	margin: 0 auto;
	position: fixed;
	bottom: 0;
	height: 35px;
	background: #c01e20;
	z-index: 80;
}



.footer-l {
	float: left;
	padding: 13px 0 0 82px;
}

.f-w12 {
	font-size: 10px;
	color: #ffffff;
}

.footer-r {
	float: right;
	padding: 8px 82px 0 42px;
	background: #2277ce;
	height: 30px;
}

.mobile{
	display:none;
}

.desktop{
	display:block;
}