@font-face { font-family: "opensans"; font-weight: 100; src: url(../fonts/OpenSans-Light.ttf); }
@font-face { font-family: "opensans"; font-weight: normal; src: url(../fonts/OpenSans-Regular.ttf); }
@font-face { font-family: "opensans"; font-weight: normal; font-style: italic; src: url(../fonts/OpenSans-Italic.ttf); }
@font-face { font-family: "opensans-cdl"; font-weight: 100; src: url(../fonts/OpenSans-CondLight.ttf); }

html { position: relative; min-height: 100%; }
body { background: #DCE6EF; font-family: "opensans",Arial; font-weight: normal; line-height: 1.2; margin-bottom: 40px; }
.container { width: 100%; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { line-height: 1.3 }
h1,h2,h3,h4,h5 { font-family: "opensans-cdl"; font-weight: normal; }
h1 { font-size: 32px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }

a { transition: color 0.5s ease; moz-transition: color 0.5s ease; webkit-transition: color 0.5s ease; }
a:hover { text-decoration: none; }

.moto { font-family: "opensans"; font-weight: normal; }

header {
   /*background: #0E0E3F; */
   background: #0066cc; /* Old browsers */
   /* IE9 SVG, needs conditional override of 'filter' to 'none' */
   background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMTAwJSI+CiAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjMTIxNDViIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTclIiBzdG9wLWNvbG9yPSIjMGIxYjQ3IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNDElIiBzdG9wLWNvbG9yPSIjMDkwZDMwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMTAxYjY2IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNjMlIiBzdG9wLWNvbG9yPSIjMTczZjkzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iNzYlIiBzdG9wLWNvbG9yPSIjMGYxZjYwIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMWI3YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
   background: -moz-linear-gradient(-45deg,  #12145b 0%, #0b1b47 17%, #090d30 41%, #101b66 51%, #173f93 63%, #0f1f60 76%, #001b7c 100%); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#12145b), color-stop(17%,#0b1b47), color-stop(41%,#090d30), color-stop(51%,#101b66), color-stop(63%,#173f93), color-stop(76%,#0f1f60), color-stop(100%,#001b7c)); /* Chrome,Safari4+ */
   background: -webkit-linear-gradient(-45deg,  #0066cc 0%,#0b1b47 17%,#090d30 41%,#101b66 51%,#173f93 63%,#0f1f60 76%,#001b7c 100%); /* Chrome10+,Safari5.1+ */
   background: -o-linear-gradient(-45deg,  #12145b 0%,#0b1b47 17%,#090d30 41%,#101b66 51%,#173f93 63%,#0f1f60 76%,#001b7c 100%); /* Opera 11.10+ */
   background: -ms-linear-gradient(-45deg,  #12145b 0%,#0b1b47 17%,#090d30 41%,#101b66 51%,#173f93 63%,#0f1f60 76%,#001b7c 100%); /* IE10+ */
   background: linear-gradient(135deg,  #12145b 0%,#0b1b47 17%,#090d30 41%,#101b66 51%,#173f93 63%,#0f1f60 76%,#001b7c 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12145b', endColorstr='#001b7c',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
   color: #fafafa; border-bottom: 3px solid #FFD700;
   padding-bottom: 5px;
}
header img { width: 60px; display: block; margin: 10px auto; }
header small { color: #D3D3D3; font-family: 'opensans', Helvetica, sans-serif; font-size: 13px; font-style: italic; }
header h2 {
   font-family: "opensans", Helvetica, sans-serif; font-weight: 100; font-size: 32px; color: #ffffff; margin: 8px 0 2px; line-height: 1.1;
   text-shadow:0px 0px 0 rgb(173,173,173),1px -1px 0 rgb(101,101,101), 2px -2px 0 rgb(29,29,29),3px -3px 2px rgba(0,0,0,0.4),3px -3px 1px rgba(0,0,0,0.5),0px 0px 2px rgba(0,0,0,.2);
}

section { padding: 25px 0 0; }

.box { width: 100%; margin-bottom: 25px; text-align: center; border: 1px solid #CBDAE7; background: #D2DFEA; transition: background 0.5s ease; }
.box:hover { background: #0066cc; }
.box .box-icon { width: 100%; margin: 0; padding: 10px 0 5px; }
.box .box-icon img { width: 100%; }
.box .box-icon i { font-size: 3.5em; color: ##0099FF; text-shadow: 3px 3px 0px rgba(0,0,0,0.2); }
.box .box-judul { width: 100%; margin: 0; padding: 6px; /*background: #009E9E;*/ color: #000; transition: background 0.5s ease; }
/*.box .box-judul:hover {background: #7A9FC2; }*/
.box .box-judul h4 { padding: 0; margin: 0; font-family: 'opensans',Arial; font-weight: 100; font-size: 16px; }

/*.merah { color: #CC0000; }
.merah_muda { color: #DC143C; }
.hijau { color: #228B22; }
.hijau_muda { color: #3CB371; }
.biru { color: #4169E1; }
.biru_muda { color: #48D1CC; }
.biru_tua { color: #191970; }
.orange { color: #FF8C00; }
.kuning { color: #FFD700; }*/

footer { background: #000057; clear: both; position: absolute; bottom: 0; width: 100%; padding-top: 14px; text-align: center; font-size: 12px; color: #ddd; height: 40px; }