/*1. EDITING BAGIAN LOGO*/
.logo-eka{text-decoration:none; font-size:2em; text-transform:uppercase; color:white; margin:0; padding:0;}
.logo-eka span{margin:0; padding:0; color:#86c232;}
.logo-eka:hover{color:#86c232;}

/*2. EIDTING TULISAN MENU NAVIGASI*/
.header-nav .header-nav__content .text_navigasi{font-size:1.5em; font-weight:700; font-family:Carter One;}
.header-nav .header-nav__content .header-nav__list .smoothscroll{border-bottom:0px solid #86c230; transition:0.5s; font-family:Carter One;}
.header-nav .header-nav__content .header-nav__list .smoothscroll:hover{color:#86c232; border-bottom:3px solid #86c230;}
.header-nav .header-nav__content p{font-family:Bree Serif;}

/*3. EDITING BUTTON DIBAGIAM HEADER*/
.button_header{font-family:Carter One; font-size:1.1em; padding:1% 3%; background-color:#222629; color:#86c232; box-shadow:0 0 2px 2px white; transition:0.5s;}
.button_header:hover{background-color:#86c232; color:white; box-shadow:0 0 2px 2px #222629, 0 0 4px 4px white;}
.header-judul h1{font-family:Carter One; font-size:3em;}
.header-judul h1 span{color:#86c232;}


/*4. EDITING PADA BAGIAN ABOUT => GAMBAR PROFILE AVATAR*/
.gambarProfil{width:8em; height:8em; margin:-5% auto 3.5% auto;}
.gambarProfil img{width:100%; height:100%; border-radius:50%; box-shadow:0 0 5px 5px #222629, 0 0 7px 7px white;}

/*5. EDITING PADA BAGIAN ABOUT => NAMA*/
.namaProfil{margin:auto; padding:auto; font-family:Carter One; color:#222629; font-size:2em; text-shadow:2px -1px 0 black, 0 0 8px white;}
.profesiProfil{margin:auto; padding:auto; font-family:Bree Serif; font-size:1.8em; color:white; text-shadow:0 0 2px ;}



/* Style the tab */
.tab {float:left; background-color:#222629; width:30%; height:400px; box-sizing:border-box; border-radius:10px; overflow:hidden; 
	margin:0; padding:0;}
.tab button {display: block; background-color: inherit; color: black; width: 100%; border: none; outline: none;
  	text-align: center; cursor: pointer; transition: 0.3s; font-size: 0.55em; font-family:Carter One; 
  	margin:0; padding:0 0 0 5%; word-spacing:normal; letter-spacing:normal; text-transform:capitalize; color:#86c232;}
.tab button:hover {font-size:0.6em; text-decoration:underline;}
.tab button.active {background-color:white; box-shadow:inset 0 0 0 5px black; border-radius:10px;}
.tabcontent {background-color:white; float: left; padding:0 2%; width: 70%; height: 400px; margin:auto;
	box-sizing:border-box; border-radius:10px; }   
.tabcontent h3{font-size:1.2em; font-family:Carter One; margin:4% auto 2% auto; padding:0; color:#86c232; text-shadow:1px 1px 1px black;}
.tabcontent h4{width:auto; font-size:0.7em; font-family:Carter One; margin:auto auto 5% auto; padding:1%; background-color:#222629; color:white; border-radius:10px;
	text-shadow:1px 1px 1px grey;}
.tabcontent p{font-size:0.7em; text-align:justify;}  
.text-table{font-size:0.7em; text-align:justify;}

/* Style Bagian Data Pribadi */
.list_item {width:60%;list-style-type:none; border: 1px solid #eee;margin: auto; padding:auto; box-shadow: 0 0 5px 3px rgba(0,0,0,0.2);}
.list_item .zebraAbu {padding:1% 3%;text-align: center; font-size:0.7em; background-color:#eee;}
.list_item .zebraPutih {padding:1% 3%;text-align: center; font-size:0.7em; background-color:white;}
.text_hitam{color:#222629; font-weight:700;}
.text_hijau{color:#86c232; font-weight:700;}

/* EDITING RESUME */
.service-item{margin-top:3%;}
.isiResume{padding:auto; margin:auto;}
.isiResume .bagianJudul{font-size:1.1em; padding:0; margin:0; color:#86c232; text-shadow:1px 1px 1px #86c232; }
.isiResume .bagianTanggal{font-size:0.85em; color:white; text-shadow:1px 1px #86c232, -1px 1px #86c232, -1px -1px #86c232, 
	1px -1px #86c232; margin:0; padding:0;}
.isiResume .bagianKeterangan{font-size:0.9em; margin:0; padding:0; text-align:justify;}
.isiResume p{margin:0; padding:0;} 
.button_sertifikat{color:white; text-shadow:none; background-color:#86c232; padding:1% 3%; border-radius:10px; transition:0.5s;}
.button_sertifikat:hover{color:#86c232; background-color:white; box-shadow:0 0 0 1px #86c232, 2px 2px 2px 2px black;}
.button_sertifikat:active{color:white; background-color:#86c232; box-shadow:0 0 0 0 black;}
.button_sertifikat:visited{color:white; background-color:#86c232; box-shadow:0 0 0 0 black;}

/* EDITING BAGIAN KEGIATAN & ORGANISASI */
.col-full .testimonials .testimonials__slide .judul_organisasi{margin:0; padding:0; color:#86c232; font-weight:500;
	font-family:Carter One; font-size:1.7em;}
.col-full .testimonials .testimonials__slide .tanggal_organisasi{font-size:1.1em; color:white; margin:0 0 2% 0;
	text-shadow:1px 1px #86c232, -1px 1px #86c232, -1px -1px #86c232, 1px -1px #86c232; font-family:Bree Serif;}
.col-full .testimonials .testimonials__slide .posisi_organisasi{font-size:1.2em; font-family:Bree Serif; line-height:1.5em;
	padding:0; margin:0 0 3% 0;}
.col-full .testimonials .testimonials__slide .foto_organisasi{width:20em; height:auto; margin:auto;}

/*EDITING BAGIAN SKILL BAR*/
.flex-skillbar{margin:auto; padding:auto; display:flex; justify-content:center;
  box-sizing:border-box; }
.flex-skillbar .frame-skillbar{width:50%; height:auto; box-sizing:border-box; margin:1% 2%;}
.flex-skillbar .frame-skillbar p{margin:0; padding:0; color:#86c232; font-size:1.1em;
  text-shadow:0 0 0.5px black;}
.flex-skillbar .frame-skillbar p i{font-size:1.3em;}
.flex-skillbar .frame-skillbar .container-skillbar{width:100%; border-radius:10px; background-color:#eeeeee; overflow:hidden;}
.flex-skillbar .frame-skillbar .container-skillbar .skills{height:100%; font-size:0.9em; text-shadow:0 0 3px black; color:white;
  background-color:#86c232; text-align:right; padding:1% 3% 1% 0;}

/*BAGIAN KONTAK INFORMASI*/
.column_kontak {float: left; width: 50%; margin-bottom: 16px; padding: 0 8px;}
.card_kontak {box-shadow: 0 4px 8px 0 rgba(166, 169, 182, 0.3); text-align:center;padding-bottom:10%;}
.card_kontak i{font-size:6em; margin:10% auto 5% auto; text-align:center; display:inline-block; color:#86c232;
  text-shadow:0 0 4px black;} 
.container_kontak {padding:0; margin:auto; width:80%; text-align:center;}
.container_kontak .text_kontak{margin:auto; padding:0; color:#68c232; font-size:1.5em; text-shadow:0 0 4px black;}
.container_kontak .keterangan_kontak{color:grey; font-size:0.9em; margin:0; padding:0; margin-bottom:5%;}
.container_kontak .button_kontak{margin-bottom:10%; font-size:1em; padding:2% 5%; border-radius:10px;
  box-shadow:0 0 0 2px #68c232; box-sizing:border-box; color:#86c232;}
.container_kontak .button_kontak:hover{padding:2% 10%; background-color:#86c232; color:black; font-size:1.1em;}


/*############################################### 400 ################################################*/
/*############################################### 400 ################################################*/
/*############################################### 400 ################################################*/
/*############################################### 400 ################################################*/
/*############################################### 400 ################################################*/
/* Ukuran Media Only */ 
@media only screen and (max-width: 400px) {
    .tabcontent h3{margin:10% auto;}
  	.list_item{width:100%;}
  	.header-judul h1{font-family:Carter One; font-size:1.2em;}
  	.button_header{font-size:0.8em; display:block;}
  	.list_item .zebraAbu{font-size:0.6em;}
  	.list_item .zebraPutih{font-size:0.6em;}
    .tab button:active{box-shadow:inset 0 0 2px 2px black; font-size:0.6em;}
    .tab button:hover{box-shadow:inset 0 0 2px 2px black; font-size:0.6em;}

    /*III DATA PRIBADI*/
    .s-about .row .col-full .namaProfil{font-size:1.5em;}
    .s-about .row .col-full .profesiProfil{font-size:1.3em;}
    .s-about .row .tab .tablinks{font-size:0.5em;}
    .s-about .row .tabcontent h3{font-size:0.9em;}
    .s-about .row .tabcontent p{font-size:0.6em;}

  	/* IV. RESUME */
    .s-services .row .col-full h1{font-size:1.5em;margin:0; padding:0;}
    .s-services .row .col-block{margin:20% auto;}
  	.isiResume{margin-bottom:5%;}
  	.isiResume .bagianJudul{font-size:0.9em; text-align:left;}
  	.isiResume .bagianTanggal{font-size:0.7em; text-align:left;}
  	.isiResume .bagianKeterangan{font-size:0.7em;}
  	.service-text .h2{font-size:1em;}

    /* V. KEGIATAN & ORGANISASI */
    .s-clients .row .col-full h1{font-size:1.5em; padding:0; margin:0;}
    .col-full .testimonials .testimonials__slide .judul_organisasi{font-size:1.2em;}
    .col-full .testimonials .testimonials__slide .tanggal_organisasi{font-size:0.8em;}
    .col-full .testimonials .testimonials__slide .posisi_organisasi{font-size:0.9em;}

    /* bagian skill bar*/
    .flex-skillbar{margin:auto; padding:auto; width:100%; display:block;}
    .flex-skillbar .frame-skillbar{width:100%;}
    .flex-skillbar .frame-skillbar p{text-shadow:none; font-size:1em;}
    .flex-skillbar .frame-skillbar p i{font-size:1em;}
    .flex-skillbar .frame-skillbar .container-skillbar{padding:auto; margin:auto auto 5% auto;}

    /*VII. KONTAK INFORMASI*/
    .s-contact .row .col-full h1{font-size:1.5em; padding:0; margin:0;}
    .column_kontak {width: 100%; display: block;}
}


/*############################################### 400 s/d 600 ################################################*/
/*############################################### 400 s/d 600 ################################################*/
/*############################################### 400 s/d 600 ################################################*/
/*############################################### 400 s/d 600 ################################################*/
/*############################################### 400 s/d 600 ################################################*/
/* Ukuran Media Only */ 
@media only screen and (min-width:400px) and (max-width:600px) {
    .tabcontent h3{margin:10% auto;}
    .list_item{width:100%;}
    .header-judul h1{font-family:Carter One; font-size:1.2em;}
    .button_header{font-size:0.8em; display:block;}
    .list_item .zebraAbu{font-size:0.6em;}
    .list_item .zebraPutih{font-size:0.6em;}
    .tab button:active{box-shadow:inset 0 0 2px 2px black; font-size:0.6em;}
    .tab button:hover{box-shadow:inset 0 0 2px 2px black; font-size:0.6em;}

    /*III DATA PRIBADI*/
    .s-about .row .col-full .namaProfil{font-size:1.5em;}
    .s-about .row .col-full .profesiProfil{font-size:1.3em;}
    .s-about .row .tab .tablinks{font-size:0.5em;}
    .s-about .row .tabcontent h3{font-size:0.9em;}
    .s-about .row .tabcontent p{font-size:0.6em;}

    /* IV. RESUME */
    .s-services .row .col-full h1{font-size:1.5em;margin:0; padding:0;}
    .s-services .row .col-block{margin:3% auto;}
    .isiResume{margin-bottom:5%;}
    .isiResume .bagianJudul{font-size:0.9em; text-align:left;}
    .isiResume .bagianTanggal{font-size:0.7em; text-align:left;}
    .isiResume .bagianKeterangan{font-size:0.7em;}
    .service-text .h2{font-size:1em;}

    /* V. KEGIATAN & ORGANISASI */
    .s-clients .row .col-full h1{font-size:1.5em; padding:0; margin:0;}
    .col-full .testimonials .testimonials__slide .judul_organisasi{font-size:1.2em;}
    .col-full .testimonials .testimonials__slide .tanggal_organisasi{font-size:0.8em;}
    .col-full .testimonials .testimonials__slide .posisi_organisasi{font-size:0.9em;}

    /* bagian skill bar*/
    .flex-skillbar{margin:auto; padding:auto; width:100%; display:block;}
    .flex-skillbar .frame-skillbar{width:100%;}
    .flex-skillbar .frame-skillbar p{text-shadow:none; font-size:1em;}
    .flex-skillbar .frame-skillbar p i{font-size:1em;}
    .flex-skillbar .frame-skillbar .container-skillbar{padding:auto; margin:auto auto 5% auto;}

    /*VII. KONTAK INFORMASI*/
    .s-contact .row .col-full h1{font-size:1.5em; padding:0; margin:0;}
    .column_kontak {width: 100%; display: block;}
}


/*############################################### 600 s/d 1000 ################################################*/
/*############################################### 600 s/d 1000 ################################################*/
/*############################################### 600 s/d 1000 ################################################*/
/*############################################### 600 s/d 1000 ################################################*/
/*############################################### 600 s/d 1000 ################################################*/
/* Ukuran Media Only */ 
@media only screen and (min-width:600px) and (max-width:1000px) {

    /*II BAGIAN HEADER GAMBAR DAN ISI*/
    .s-home .home-content .home-content__main h1{font-size:2em;}

    /* IV. RESUME */
    .s-services .row .col-full h1{font-size:2.5em;margin:0; padding:0;}
    .s-services .row .col-block .service-text h3{text-align:center; font-size:2em;}
    .s-services .row .col-block .service-text .isiResume{padding:auto; margin:3% auto;}
    .s-services .row .col-block .service-text .isiResume .bagianJudul{text-align:left; font-size:1.2em; line-height:1.5em;
        margin-bottom:2%;}
    .s-services .row .col-block .service-text .isiResume .bagianTanggal{text-align:left; font-size:1em;}
    .s-services .row .col-block .service-text .isiResume .bagianKeterangan{text-align:justify; font-size:1em;}
}