/* ================================================================ */
/* Default Name: Default style sheet compatible for HTML 5.0        */
/* Default URI: http://www.w3.org/                                  */
/* Author: Aris Dwi Sulistiawan                                     */
/* Author URI: http://www.arisds.com/                               */
/* Version: 3.4                                                     */
/* Copyright: Aris Dwi Sulistiawan                                  */
/* Follow: @arisds                                                  */
/* ================================================================ */

body{ background:#ffffff; color:#222222; letter-spacing:normal; }
a, a:link, a:visited, a:active{ text-decoration:none;color:#222222; transition: background-color 0.3s ease-in 0s, color 0.3s ease-in 0s; cursor:pointer; outline:none; }
a:hover { text-decoration:none;color:#e74f1d;  }
.fleft{ float:left; } .fright{ float:right; } .fnone{ float:none; }
.clear{ clear:both; } .enter{ clear:both; height:10px; } .doubleenter{ clear:both; height:20px;}

/* HEADING */
h1{ font-size:36px; line-height:38px; font-weight:700; letter-spacing:-1px; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }
h2{ font-size:24px; line-height:26px; font-weight:600; letter-spacing:-0.5px; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }
h3{ font-size:18px; line-height:20px; font-weight:500; letter-spacing:0px; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }
h4{ font-size:16px; line-height:18px; font-weight:400; letter-spacing:0px; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }
h5{ font-size:14px; line-height:16px; font-weight:400; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }
h6{ font-size:12px; line-height:14px; font-weight:400; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }
h7{ font-size:10px; line-height:10px; font-weight:400; margin:0; padding:20px 0; font-family:"Open Sans", Arial, Helvetica, sans-serif; }

/* PARAGRAF */
p{ margin:15px 0 15px; }

/* PADDING */
.pad-50{ padding:50px !important; }
.pad-40{ padding:40px !important; }
.pad-30{ padding:30px !important; }
.pad-20{ padding:20px !important; }
.pad-15{ padding:15px !important; }
.pad-10{ padding:10px !important; }
.pad-5{ padding:5px !important; }
.pad-4{ padding:4px !important; }
.pad-3{ padding:3px !important; }
.pad-2{ padding:2px !important; }
.pad-1{ padding:1px !important; }
.pad-r{ padding-right:0 !important; }
.pad-l{ padding-left:0 !important; }
.pad-b{ padding-bottom:0 !important; }
.pad-t{ padding-top:0 !important; }

/* MARGIN */
.mar-2{ margin:2px !important; }
.mar-4{ margin:4px !important; }
.mar-5{ margin:5px !important; }
.mar-10{ margin:10px !important; }
.mar-15{ margin:15px !important; }
.mar-20{ margin:20px !important; }
.mar-30{ margin:30px !important; }
.mar-40{ margin:40px !important; }
.mar-50{ margin:50px !important; }
.mar-r{ margin-right:0 !important; }
.mar-l{ margin-left:0 !important;  }
.mar-b{ margin-bottom:0 !important; }
.mar-t{ margin-top:0 !important; }

/* RADIUS */
.radius-5{ -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;  }
.radius-10{ -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;  }

/* IMAGE */
.image-left{ float:left; margin-right:10px; }
.image-right{ float:right; margin-left:10px; }
.image-center{ float:none; margin:0 auto; }

/* COLOR */
.color-hijau{ color:#178811 !important; } 
.color-merah{ color:#c00000 !important; } 
.color-biru-dark{ color:#083262 !important; }
.color-biru-light{ color:#52b9e9 !important; } 
.color-hitam{ color:#222222 !important; } a.color-hitam{ color:#222222 !important; } 
.color-silver{ color:#999999 !important; } 
.color-putih{ color:#ffffff !important; } a.color-putih{ color:#ffffff !important; }
.color-orange{ color:#e74f1d !important; }
.color-kuning{ color:#fdcf06 !important; }
.color-grey{ color:#666666 !important;; }

/* BACKGROUND */
.bg-hijau{ background-color:#178811 !important; } 
.bg-merah{ background-color:#c00000 !important; } 
.bg-biru-dark{ background-color:#083262 !important; }
.bg-biru-light{ background-color:#52b9e9 !important; } 
.bg-hitam{ background-color:#222222 !important; }
.bg-silver{ background-color:#999999 !important; } 
.bg-putih{ background-color:#ffffff !important; }
.bg-orange{ background-color:#e74f1d !important; }
.bg-kuning{ background-color:#fdcf06 !important; }
.bg-none{ background:none !important; }
.bg-grey{ background:#666666 !important;; }

/* WIDTH PERCENT */
.width-percent-100{ width:100%; }
.width-percent-95{ width:95%; }
.width-percent-90{ width:90%; }
.width-percent-85{ width:85%; }
.width-percent-80{ width:80%; }
.width-percent-75{ width:75%; }
.width-percent-70{ width:70%; }
.width-percent-65{ width:65%; }
.width-percent-60{ width:60%; }
.width-percent-55{ width:55%; }
.width-percent-50{ width:50%; }
.width-percent-45{ width:45%; }
.width-percent-40{ width:40%; }
.width-percent-35{ width:35%; }
.width-percent-30{ width:30%; }
.width-percent-25{ width:25%; }
.width-percent-20{ width:20%; }
.width-percent-15{ width:15%; }
.width-percent-10{ width:10%; }

/* WIDTH PIXEL */
.width-px-1100{ width:1100px; }
.width-px-1000{ width:1000px; }
.width-px-800{ width:800px; }
.width-px-780{ width:780px; }
.width-px-740{ width:740px; }
.width-px-680{ width:680px; }
.width-px-650{ width:650px; }
.width-px-600{ width:600px; }
.width-px-550{ width:550px; }
.width-px-490{ width:490px; }
.width-px-480{ width:480px; }
.width-px-470{ width:470px; }
.width-px-460{ width:460px; }
.width-px-440{ width:440px; }
.width-px-420{ width:420px; }
.width-px-400{ width:400px; }
.width-px-380{ width:380px; }
.width-px-350{ width:350px; }
.width-px-320{ width:320px; }
.width-px-310{ width:310px; }
.width-px-300{ width:300px; }
.width-px-270{ width:270px; }
.width-px-250{ width:250px; }
.width-px-245{ width:245px; }
.width-px-240{ width:240px; }
.width-px-230{ width:230px; }
.width-px-200{ width:200px; }
.width-px-160{ width:160px; }
.width-px-150{ width:150px; }
.width-px-140{ width:140px; }
.width-px-100{ width:100px; }
.width-px-60{ width:60px; }
.width-px-30{ width:30px; }
.width-px-20{ width:20px; }
.width-px-15{ width:15px; }
.width-px-10{ width:10px; }

/* HEIGHT PERCENT */
.height-percent-100{ height:100%; }
.height-percent-90{ height:90%; }
.height-percent-80{ height:80%; }
.height-percent-70{ height:70%; }
.height-percent-60{ height:60%; }
.height-percent-50{ height:50%; }
.height-percent-40{ height:40%; }
.height-percent-30{ height:30%; }
.height-percent-20{ height:20%; }
.height-percent-10{ height:10%; }

/* WIDTH PIXEL */
.height-px-250{ height:250px; }
.height-px-100{ height:100px; }
.height-px-90{ height:90px; }
.height-px-80{ height:80px; }
.height-px-70{ height:70px; }
.height-px-60{ height:60px; }
.height-px-50{ height:50px; }
.height-px-40{ height:40px; }
.height-px-30{ height:30px; }
.height-px-20{ height:20px; }
.height-px-10{ height:10px; }
.height-px-00{ height:0; }

/* HR */
hr{ border-color:#e3e3e3; margin:10px 0}

/* BORDER */
.border{ border:1px solid #ddd; }
.border-top{ border-top:1px solid #ddd; }
.border-bottom{ border-bottom:1px solid #ddd; }
.border-left{ border-left:1px solid #ddd; }
.border-right{ border-right:1px solid #ddd; }

/* FONT FAMILY */
.font-Arial{ font-family:Arial, Helvetica, sans-serif; }
.font-OpenSans{ font-family: 'Open Sans', sans-serif; }
.font-OpenSansCondensed{ font-family: 'Open Sans Condensed', sans-serif; }

/* FONT SIZE */
.font-60{ font-size:60px }
.font-50{ font-size:50px }
.font-40{ font-size:40px }
.font-36{ font-size:36px }
.font-34{ font-size:34px }
.font-32{ font-size:32px }
.font-30{ font-size:30px }
.font-26{ font-size:26px }
.font-24{ font-size:24px }
.font-20{ font-size:20px }
.font-18{ font-size:18px }
.font-16{ font-size:16px !important; }
.font-15{ font-size:15px !important; }
.font-14{ font-size:14px }
.font-13{ font-size:13px }
.font-12{ font-size:12px }
.font-11{ font-size:11px }
.font-10{ font-size:10px }

/* LINE HEIGHT */
.line-height-35{ line-height:35px; }
.line-height-30{ line-height:30px; }
.line-height-25{ line-height:25px; }
.line-height-20{ line-height:20px; }
.line-height-18{ line-height:18px; }
.line-height-16{ line-height:16px; }
.line-height-14{ line-height:14px; }
.line-height-12{ line-height:12px; }
.line-height-normal{ line-height:normal; }

/* FONTS STYLE+WEIGHT */
.italic{ font-style:italic; }
.light{ font-weight:300; }
.normal{ font-weight:400; font-style:normal; }
.semibold{ font-weight:600; }
.bold{ font-weight:700; }
.extrabold{ font-weight:800; }

/* TEXT */
.center{ margin:0 auto; }
.text-left{ text-align:left !important; }
.text-right{ text-align:right !important; }
.text-center{ text-align:center !important; }

/* LETTER-SPACING */
.ls-min-1{ letter-spacing:-1px; }
.ls-min-05{ letter-spacing:-0.5px; }
.ls-normal{ letter-spacing:normal; }
.ls-plus-05{ letter-spacing:0.5px; }
.ls-plus-1{ letter-spacing:1px; }

/* TEXT TRANSFORM */
.uppercase{ text-transform:uppercase; }
.capitalize{ text-transform:capitalize; }
.lowercase{ text-transform:lowercase; }

/* DISPLAY */
.block{ display:block !important; }
.hide{ display:hide; }
.display-none{ display:none; }
.overflow-hidden{ overflow:hidden; }

/* POSITION */
.relative{ position:relative; }
.absolute{ position:absolute; }
.fixed{ position:fixed; }

/* LOADING */
.loading{ -webkit-animation:animball_two 1s infinite; -moz-animation:animball_two 1.5s infinite; -ms-animation:animball_two 1.5s infinite; animation:animball_two 1.5s infinite; width:44px; height:44px; position:relative; left:45%; margin-top:20px; }
.contener_mixte{ width:44px; height:44px; position:absolute; }
.ballcolor{ width: 20px; height: 20px; border-radius: 50%; }
.ball_1, .ball_2, .ball_3{ position: absolute; -webkit-animation:animball_one 1.5s infinite ease; -moz-animation:animball_one 1.5s infinite ease; -ms-animation:animball_one 1.5s infinite ease; animation:animball_one 1.5s infinite ease; }
.ball_1{ background-color:#00385b; top:0; left:12px;  }
.ball_2{ background-color:#ed1b24; top:18px; left:24px; }
.ball_3{ background-color:#ffe001; top:18px; left:0; }
@-webkit-keyframes animball_one{ 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;} 100%{ position: absolute;} }
@-moz-keyframes animball_one{ 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;} 100%{ position: absolute;} }
@-ms-keyframes animball_one{ 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;} 100%{ position: absolute;} }
@keyframes animball_one{ 0%{ position: absolute;} 50%{top:12px; left:12px; position: absolute;opacity:0.5;} 100%{ position: absolute;} }
@-webkit-keyframes animball_two{ 0%{-webkit-transform:rotate(0deg) scale(1);} 50%{-webkit-transform:rotate(360deg) scale(1.3);} 100%{-webkit-transform:rotate(720deg) scale(1);} }
@-moz-keyframes animball_two{ 0%{-moz-transform:rotate(0deg) scale(1);} 50%{-moz-transform:rotate(360deg) scale(1.3);} 100%{-moz-transform:rotate(720deg) scale(1);} }
@-ms-keyframes animball_two{ 0%{-ms-transform:rotate(0deg) scale(1);} 50%{-ms-transform:rotate(360deg) scale(1.3);} 100%{-ms-transform:rotate(720deg) scale(1);} }
@keyframes animball_two{ 0%{transform:rotate(0deg) scale(1);} 50%{transform:rotate(360deg) scale(1.3);} 100%{transform:rotate(720deg) scale(1);} }