@charset "utf-8";
/*
Template Name: Educational
Author: <a href="http://www.os-templates.com/">OS Templates</a>
Author URI: http://www.os-templates.com/
Licence: Free to use under our free template licence terms
Licence URI: http://www.os-templates.com/template-terms
File: Layout CSS
*/

@import url("navi.css");

html{overflow-y:scroll;}
body{margin:0; padding:0; font-size:12px; font-family:verdana, Arial, Helvetica, sans-serif; color:#333333; background-color:#FFFFFF;}

#logo > h1 > a{text-decoration:none;}

.justify{text-align:justify;}
.bold{font-weight:bold;}
.center{text-align:center;}
.right{text-align:right;}
.nostart{margin:0; padding:0; list-style-type:none;}

.clear{clear:both;}
br.clear{clear:both; margin-top:-15px;}

a{outline:none; text-decoration:none;}

.fl_left, .imgl{float:left;}
.fl_right, .imgr{float:right;}

/* ----------------------------------------------Wrapper------------------------------------- */

div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}
div.wrapper h1, div.wrapper h2, div.wrapper h3, div.wrapper h4, div.wrapper h5, div.wrapper h6{margin:0; padding:0; font-size:20px; font-weight:normal; line-height:normal; font-family: sans-serif, Georgia, "Times New Roman", Times, serif;}
.wrapper-nav{margin-bottom:10px;}
.wrapper-foot{margin-top:30px;}
/*.col0{color:#313131; background-color:#F8F7DF; border-top:5px solid #313131;}*/
.col1, .col1 a{color:#8B785F; background-color:#F8F7DF;}
.col2{color:#333333; background:url("images/topnav_bg_new.gif") bottom left repeat-x #E5E2C9;}
/*.col3{color:#313131; background-color:#F8F7DF;}
.col4{color:#666666; background-color:#F8F7DF;}
.col4 a{color:#746550; background-color:#F8F7DF;}*/
.col5{color:#CCCCCC; background-color:#48282F;}
.col5 a{color:#E5E2C9; background-color:#48282F;}
.col6, .col6 a{color:#767772; background-color:#FFFFFF;}

/* ----------------------------------------------Generalise------------------------------------- */

#header, #topbar, #topnav, #breadcrumb, #container, #footer, #copyright{display:block; position:relative; width:960px; margin:0 auto;}

/* ----------------------------------------------Header------------------------------------- */

#header{padding:10px 0 20px 0; display: flex; align-items: center;}
.header-image{float:left; margin-right: 20px;}
.header-image img{width:75px; border-radius: 50%;}
#header #logo{display:block; float:left; width:300px; overflow:hidden;}
#header #logo h1, #header p, #header ul{margin:0; padding:0; list-style:none; line-height:normal;}
#header #logo h1{font-size:36px;}
#header h1 a{color:#333333; background-color:#F8F7DF;}
#header #logo p{font-size:13px; text-shadow: -1px 1px 1px rgba(0, 0, 0, 0.2),1px -1px 0 rgba(255, 255, 255, 1);}
#header .fl_right{display:block; float:right; width:330px; margin:17px 0 0 0; padding:0; text-align:right;}
#header .fl_right ul{margin-bottom:10px;}
#header li{display:inline; margin:0 0 0 8px; padding:0 0 0 10px; border-left:1px solid #8B785F;}
#header li.last{margin-right:0; padding-right:0; border:none;}

/* ---------------------------------------------Content------------------------------------- */

/* --------------- portofolio ---------------- */
.floater > a{text-decoration:none;}
.fg-theme{font-size:16px;}
.img-caption > p{font-size:11px;}
.grid-detail{margin-top:5px;}
.grid-detail > .floater{text-align:right;font-size:16px;}
.img-caption-bgn{background-color:white !important; color:black !important;}

/* ------------------ cv --------------------- */
.details > a{text-decoration:none;}
.progress-blank{color:white;}
.text-muted{font-size:15px; text-align:justify;}
@media (max-width: 767px) {
    .progress-blank{display:none;}
}

.font-3d {
    font-size: 72px;
    color: #ddd;
    text-shadow: 
        0px 2px 0px #999,
        0px 4px 0px #888,
        0px 6px 0px #777,
        0px 8px 0px #666,
        0px 10px 10px rgba(0,0,0,0.5);
}

.font-timbul-a {
    font-family: Arial, sans-serif;
    font-size: 72px;
    color: #eee; /* Warna font terang */
    /* text-shadow: x-offset y-offset blur color */
    text-shadow: 
        1px 1px 1px #999, /* Bayangan gelap kiri atas */
        -1px -1px 1px #fff; /* Bayangan terang kanan bawah */
}

.font-embossed {
    font-family: Arial, sans-serif;
    color: #000; /* Warna font terang */
    /* text-shadow: x-offset y-offset blur color */
    text-shadow: 
        1px 1px 1px #444, /* Bayangan gelap kiri atas */
        -1px -1px 1px #fff; /* Bayangan terang kanan bawah */
}

.font-soft-embossed {
    font-family: Arial, sans-serif;
    color: #454545; /* Warna font terang */
    /* text-shadow: x-offset y-offset blur color */
    text-shadow: 
        1px 1px 1px #808080, /* Bayangan gelap kiri atas */
        -1px -1px 1px #fff; /* Bayangan terang kanan bawah */
}

.font-timbul-putih {
  font-family: 'Arial Black', sans-serif; /* Gunakan font tebal agar efek lebih terlihat */
  font-size: 80px;
  color: #ffffff; /* Warna teks utama */
  background-color: #333; /* Background gelap membantu teks terlihat menonjol */
  padding: 20px;
  text-align: center;

  /* KUNCI EFEK TIMBUL: Menumpuk bayangan dengan offset kecil */
  text-shadow: 
    1px 1px 0px #ccc,
    2px 2px 0px #bbb,
    3px 3px 0px #aaa,
    4px 4px 0px #999,
    5px 5px 0px #888,
    6px 6px 10px rgba(0,0,0,0.5); /* Bayangan lembut terakhir untuk kedalaman */
}

.font-timbul-hitam {
  /*font-family: 'Arial Black', sans-serif;
  font-size: 80px;*/
  color: #000000; /* Teks Utama Hitam */
  background-color: #f0f0f0; /* Background terang agar kontras */
  text-align: center;

  /* Efek timbul untuk teks hitam */
  text-shadow: 
    1px 1px 0px #444, /* Abu-abu tua untuk sisi */
    2px 2px 0px #333,
    3px 3px 0px #222,
    4px 4px 5px rgba(0, 0, 0, 0.5); /* Bayangan lembut paling bawah */
}

/* ----------------------------------------------Footer------------------------------------- */

#footer{padding:20px 0;}
#footer h2{margin-bottom:15px; padding-bottom:8px; border-bottom:1px dotted #999999;}
#footer p, #footer ul, #footer a{margin:0; padding:0; font-weight:normal; list-style:none; line-height:normal;}
#footer .footbox{display:block; float:left; width:50px; margin:0 0 0 30px; padding:5px; border-radius:10px; background:white;}
#footer li{margin-bottom:3px;}
#footer .last{margin:0;}
#newsletter{display:block; float:left; width:300px;}
.footer-icon{display:flex;}
.icon-medsos{width:40px;}

/* ----------------------------------------------Copyright------------------------------------- */

#copyright{padding:15px 0;}
#copyright p{margin:0; padding:0;}