/*   
Theme Name: Greeners 2019
*/
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {	margin: 0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}
article, aside, figure, footer, header, hgroup, nav, section, img {display: block;}
object, embed {max-width: 100%;}
html {overflow-y: scroll;}
ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;}
table {border-collapse: collapse; border-spacing: 0;}
th {font-weight: bold; vertical-align: bottom;}
td {font-weight: normal; vertical-align: top;}
hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;}
input, select {vertical-align: middle;}
pre {white-space: pre;white-space: pre-wrap;white-space: pre-line;word-wrap: break-word;}
.ie6 input {vertical-align: text-bottom;}
select, input, textarea {font: 99% sans-serif;}
table {font-size: inherit; font: 100%;}
a:hover, a:active {outline: none;}
small {font-size: 85%;}
strong, th {font-weight: bold;}
td {vertical-align: top;} 
sub, sup {font-size: 75%; line-height: 0; position: relative;}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
pre, code, kbd, samp {font-family: monospace, sans-serif;}
.clickable,label, input[type=button], input[type=submit], button {cursor: pointer;}
button, input, select, textarea {margin: 0;}
button {width: auto; overflow: visible;}
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
body {}
body, select, input, textarea {color: #000;}
a {color: #000; text-decoration:none}
a:hover { text-decoration: underline}
ins {background-color: #eeeeee; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}
entry a, entry a:link, entry a:visited {color:#0af;}
/* And here begins the Wordpress fun.
-------------------------------------------------------------------------------*/
html * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {background:#fff;font-size:100%;font-family: 'Open Sans', sans-serif;font-weight:400;line-height:130%}
#wrapper, #main-wrapper {width:100%}
#main-header {float:left;width:100%;background:#fff;margin-bottom:10px}

.show-mobile {display:block}
.show-web {display:none}

.header-tools {float:left;width:94%;background:#fff;padding:10px 3%;border-bottom:3px solid #ccc;margin-bottom:3px;}
.logo-wrap {float:left;width:100%;padding:15px 0;background:#243238;position:relative;margin:0}
nav.main-navigation {display:none}
#main-content {float:left;width:100%}
#main-footer {float:left;width:100%; background:#231f20; color: #FFF;}
#main-footer .address {font-size:0.8em;line-height:140%}
.upper-footer {float:left;width:90%;padding:5%}
.upper-footer .address-column {float:left;width:100%;margin: 0;}
.address-column table td {vertical-align:top;text-align:left;padding: 0}
.address-column table td img {width:20px;height:16px}

.upper-footer .network-column {float:left;width:250px;margin:0 20px 20px 0;}
.upper-footer .network-column a {display:block;color:#fff;font-weight:700;font-size:0.9em;margin-bottom:10px}
.upper-footer .network-column a img {width:30px;display:inline;margin: 0 10px 0 0}
.upper-footer .groups-column {float:left;width:250px;margin:0 0 20px 0;}
.upper-footer .groups-column a img{width:200px}

.footer-sitemap {float:left;width:100%;margin-bottom:20px}
ul.sitemap {float:left;width:50%;}

ul.sitemap {list-style-type: none}
.sitemap a {color:#fff;font-size:13px}
.sitemap>li {padding-bottom:5px;background:bue;text-transform:uppercase}
.sitemap ul {background:rd;margin-top:5px;list-style:square;margin-left:15px}
.sitemap ul li {text-transform:capitalize}


.upper-footer .heading {float:left;width:100%;margin:0 0 15px 0;padding:0;font-weight:700;font-size:1em}
.bottom-footer {float:left;width:90%;padding: 20px 5%;background:#000}
.bottom-footer .copyright{float:left;width:100%;margin: 0 0 5px 0;font-size:0.9em;text-align:center}
.social-footer {width:180px;margin:0 auto;}
.social-footer img {float:left;width:24px;margin:0 10px}
.bottom-navi {float:left;width:100%;text-align:center;margin: 0 0 15px 0}
.bottom-navi a {color:#fff;font-weight:700;font-size:0.9em;padding: 0 5px;}

img {width: 100%;height: auto;width: auto\9; /* ie8 */}
img#main-logo {width: 150px;margin: 0 auto}

.search-form {float:left; width:166px;background:ed}
/* Form submit button */
.form-wrapper input[type=text] {
	font-size:0.7em;
	color: #000;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0 10px;
	width: 70px;
	height:24px;	
}

.form-wrapper button {
    overflow: visible;
    position: relative;    
    border: 0;
	border-radius: 3px;
    padding: 0 10px;
	height:26px;
    cursor: pointer;
	background: #427fc1;
	color: #fff;
	font-size: 0.7em;
	font-weight: 700;
	margin: 0;
}
.form-wrapper button:hover, .form-wrapper button:active { -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}
ul.social-tools-atas {float:right;width:132px;list-style-type:none;padding:0;background:rd}
ul.social-tools-atas li a {display:block;float:right;width:27px;height:27px;margin-left:7px;}
ul.social-tools-atas li a.twitter {margin:0;}
ul.social-tools-atas li a img:hover, ul.social-tools-atas li a img:active{ -webkit-filter: grayscale(100%); filter: grayscale(100%);}

.full-width-wrapper {float:left;width:100%}
.full-width-wrapper article {margin-bottom:20px}
.full-width-wrapper article ul {list-style-type: disc}
.full-width-wrapper article li {margin-bottom:5px}
.container-relative {position: relative;}
.container-relative .title-container {position:absolute; bottom: 5px; background:rgba(0, 0, 0, 0.5);padding: 10px 5%;width:90%;}
.container-relative .title-container a {font-weight:700;font-size:5vw;color: #fff;line-height:120%}

.grn_berita .container-relative img {border-bottom:5px solid #7AC943}
.grn_gaya_hidup .container-relative img {border-bottom:5px solid #D4145A}
.grn_ide_inovasi .container-relative img {border-bottom:5px solid #3fa9f5}
.grn_sosok_komunitas .container-relative img {border-bottom:5px solid #f15a24}
.grn_flora_fauna .container-relative img {border-bottom:5px solid #dae120}
.grn_aksi .container-relative img {border-bottom:5px solid #fbb03b}
.grn_english .container-relative img, .news-in-english .container-relative img {border-bottom:5px solid #17547d}
.container-relative img {margin-bottom:5px}

section.home{float:left;width:100%;margin-bottom:10px;border-top:1px solid #ccc}
section.youtube-playlist {float:left;width:100%;margin-bottom:20px}
section.home .list-wrapper {float:left;width:100%;margin-bottom:0}
section.editorial {background:#231f20}
section.editorial {color:#fff}
section.editorial a, section.editorial .title a {color:#fff}
.editorial .inner, .news-in-english .inner, .aksi .inner {float:left;width:90%;margin:0 5% 15px 5%;padding-bottom:20px;border-bottom: 1px solid #fff}
section.editorial .excerpt, section.aksi .excerpt {font-size:0.8em;line-height:130%}
.news-in-english .inner {margin-bottom:0}
.news-in-english .inner, .aksi .inner {padding-bottom:0; border:none}
.editorial .inner img, .aksi .inner img {margin-bottom:10px}
.inner .title {margin-bottom:10px;font-size:1em;font-weight:700;line-height:120%}

section.news-in-english {background:#d7e0e5}

article {float:left;width:100%}
article.list {float:left;width:90%;padding: 10px 5%;}
.english-sidebar article.list {width:100%; padding: 0}
article.list img.attachment-archive {float:left;width:30%;max-width:200px;height:auto;margin-right:5%}
article.list img.attachment-feature-thumb {float:left;width:30%;max-width:200px;height:auto;margin-right:5%}
article.list img.attachment-square-medium {float:left;width:30%;height:auto;margin-right:5%}
.right {float:left;width:65%}
article .right .excerpt {display:none}

.category-time-container {float:left;width:100%;margin:0;}
.category-entry {float:left;font-weight:700;font-size:0.7em}
.category-entry a.grn-gaya {color:#D4145A;}
.category-entry a.grn-berita {color:#7AC943;}
.category-entry a.grn-news {color:#17547d;}
.submenu .category-entry a.grn-news {color:#000}
.category-entry a.grn-inovasi {color:#3fa9f5;}
.category-entry a.grn-sosok {color:#f15a24;}
.category-entry a.grn-flora {color:#d9e021;}
.category-entry a.grn-aksi {color:#fbb03b;}
.category-entry a.grn-b2w {color:#000;}

.post-time {float:right;font-size:0.7em;color:#bcbec0}
.post-time img {float:left;width:12px;margin:5px 5px 0 0}
.right .title, .list-boxed .title {clear:both; font-weight:700;font-size:4vw;line-height:130%}
.right .title a, .list-boxed .title a {color:#231f20}

section.gaya-hidup .list-wrapper {float:left;width:100%}
section.gaya-hidup .list-wrapper article:first-child {margin-bottom:20px}
section.gaya-hidup .list-wrapper article:nth-child(n+2) {float:left;margin-bottom:20px;background:rd}
section.gaya-hidup .list-wrapper article:nth-child(2),
section.gaya-hidup .list-wrapper article:nth-child(4) {width:43%;margin: 0 4% 0 5%}
section.gaya-hidup .list-wrapper article:nth-child(3),
section.gaya-hidup .list-wrapper article:nth-child(5) {width:43%;margin-right:5%}
section.gaya-hidup .post-time {display:none}

section.flora-fauna .category-time-container {float:left;width:90%;margin:0 5%;}
section.flora-fauna .category-entry, section.flora-fauna .post-time {font-size:0.7em}
section.flora-fauna article {margin-bottom:10px}
section.flora-fauna img.attachment-post-thumbnail {margin-bottom:10px}
section.flora-fauna .title-wrapper {padding-top:0}

article.list-boxed img {margin-bottom:10px}

header.entry-header {float:left;width:100%;margin-bottom:10px;border-top: 1px solid #ccc;padding-top:10px}
.heading-single {float:right;width:95%;padding:10px 0;margin-bottom:14px;border-bottom:4px solid #ccc;font-weight:700;font-size:0.9em;}
.heading-single a {color:#fff;padding:5px 10px;border-radius:3px}
.heading-single a.grn-berita {background:#7AC943;}
.heading-single a.grn-gaya {background:#D4145A;}
.heading-single a.grn-inovasi {background:#3fa9f5;}
.heading-single a.grn-sosok {background:#f15a24;}
.heading-single a.grn-flora {background:#d9e021;}
.heading-single a.grn-aksi {background:#fbb03b;}
.heading-single a.grn-news {background:#17547d;}

h1.entry-title {float:left;width:90%;padding: 0 5%;font-size:1.5em;line-height:120%;margin-bottom:10px;
	font-family: 'Mulish', sans-serif;
}
header.entry-header .post-time {float:left;width:90%;padding: 0 5%;font-size:0.8em;color:#bcbec0}
header.entry-header .komen-count, header.entry-header .lama-baca {float:left;width:90%;padding: 0 5%;font-size:0.8em;color:#bcbec0}
header.entry-header .komen-count a {color:#bcbec0}


.entry-content {font-size:0.9em}
.entry-content p {float:left;width:90%;padding: 0 5%;margin-bottom:15px}
.entry-content a {color:#3fa9f5}
.entry-content ol, .entry-content ul {float:left;width:90%;padding: 0 5%;margin: 0 0 15px 15px}
.entry-content ol li, .entry-content ul li {margin-bottom:15px}
.entry-content ul {list-style-type:disc}
.entry-content table {float:left;width: 90%;margin: 0 5% 15px 5%}
.entry-content h2, .entry-content h3, .entry-content h4 {float:left;width:90%;padding: 0 5%;margin-bottom:15px}
.entry-content blockquote {font-style:italic;text-align:right}

.2-columns {float:left;width:100%}
aside.terkait {float:left;width:100%}
aside.lainnya {float:left;width:100%}

.heading {float:right;width:95%;padding:10px 0;margin-bottom:14px;font-weight:700;font-size:1.1em;}
.heading-berita, .heading-berita a {color:#87c540}
.heading-editorial a {color:#87c540 !important}
.heading-gaya, .heading-gaya a {color:#d31c5e}
.heading-news, .heading-news a {color:#17547d}
.heading-flora, .heading-flora a {color:#dae120}
.heading-sosok, .heading-sosok a {color:#f15a26}
.heading-ide, .heading-ide a {color:#56a6dc}
.heading-aksi, .heading-aksi a {color:#f7941e}
.border {
    margin-top:5px;
	float:left;width:100%;
	position:relative;
}
 
.border-left {
    display: inline-table;
	background: #000;
    height: 4px;
    width: 100%;
    left: 0;
    background-repeat: repeat-x;
    position: absolute;
}

.heading-berita .border-left {background:#87c540}
.heading-gaya .border-left {background:#d31c5e}
.heading-news .border-left {background:#17547d}
.heading-flora .border-left {background:#dae120}
.heading-sosok .border-left {background:#f15a26}
.heading-ide .border-left {background:#56a6dc}
.heading-aksi .border-left {background:#f7941e}
 
.border-right {
    background-color: #ccc;
    display: inline-table;
    width: 0;
    right: 0px;
    height: 4px;
    background-repeat: repeat-x;
    position: absolute;
}

.more {float:left;width:100%;padding:5px 0;background:grey;text-align:center;color:#fff;
	font-weight:700;font-size:0.8em;margin:10px 0
}
img.arrow-b {display:inline;width:10px;margin: 0 0 0 10px}
.more a {color:#fff}
.more-berita {background: #87c540}
.more-gaya {background: #d31c5e}
.more-news {background: #17547d}
.more-flora {background: #dae120}
.more-sosok {background: #f15a26}
.more-ide {background: #56a6dc}
.more-aksi {background: #f7941e}
.title-wrapper {float:left; width:90%; padding: 10px 5%;font-weight:700;font-size:4vw;line-height:130%}

.archive-wrapper article.list:nth-child(7), .archive-wrapper article.list:nth-child(16) {background:ed;margin-bottom:20px}

/* Style the tab */
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  width:33.3%;
  padding: 10px 0;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  float:left;
  display: none;
  padding: 0;
  border-bottom: 1px solid #ccc;
  
}
.english-sidebar {display:none}
.pilihan-wrapper {float:left;width:100%;padding:20px 0 0 0;}
.twitter-wrapper, .komentar-wrapper {float:left;width:90%;padding:5%;}
img.dsq-widget-avatar {margin:0 10px 0 0 !important;}
.dsq-widget-comment {font-size:0.8em;line-height:140%;color:#444}
p.dsq-widget-meta {font-weight:700;font-size:0.8em;line-height:140%}
p.dsq-widget-meta a {color:#444}

/* Back to Top */

.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 40px;
  right: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: rgba(232, 98, 86, 0.8) url(images/cd-top-arrow.svg) no-repeat center 50%;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 1;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: .5;
}
.no-touch .cd-top:hover {
  background-color: #e86256;
  opacity: 1;
}
@media only screen and (min-width: 768px) {
  .cd-top {
    right: 20px;
    bottom: 20px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-top {
    height: 60px;
    width: 60px;
    right: 30px;
    bottom: 30px;
  }
}

.wp-caption-text-feature, .wp-caption-text {width:90%;padding: 0 5%;color:#777;font-size:0.8em;font-style:italic;line-height:130%;margin:5px 0 15px 0;}
.wp-caption {float:left;width:100% !important}

#comments-box {float:left;width:90%;padding: 0 5% 20px 5%}
a.dsq-widget-thread, a.dsq-widget-user {font-size:0.8em}
.dsq-widget-comment, p.dsq-widget-meta {font-size:0.8em}

section.terkait, section.lainnya {float:left;width:100%;border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding-bottom:10px;margin-bottom:20px}
.tag-wrap {float:left;width:90%;padding: 0 5%;margin-bottom:20px;font-size:0.9em;color:#bcbec0;line-height: 130%}
.tag-wrap a {color:#bcbec0}
.share-tools {float:left;width:90%;padding:15px 5%;background:#ccc;margin-bottom:20px}


.navigation {float:left;width:90%;padding:0 5%;margin-bottom:20px}
.navigation .previous {float:left;}
.navigation .next {float:right;}
.navigation .previous a, .navigation .next a{display:block;padding: 5px 10px;border-radius:5px;background:#333;}
.navigation .previous a, .navigation .next a{color:#fff;font-weight:700}
.navigation .previous a:hover, .navigation .previous a:active, .navigation .next a:hover, .navigation .next a:active {background:#ccc}
{}

/*--- animated menu icon ---- */

.container {
  display: inline-block;
  cursor: pointer;
  position:absolute;
  left: 15px;
  top:10px;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

/*--- Page Navi ---*/
.wp-pagenavi {float:left;width:90%;padding: 0 5%; margin:20px 0;font-size:20px;}
.wp-pagenavi a, .wp-pagenavi span {float:left;margin: 0 5px 10px 0 !important}
.wp-pagenavi .pages {border:none;}
.wp-pagenavi a.page, .wp-pagenavi a.first, .wp-pagenavi a.last, 
.wp-pagenavi a.previouspostslink, .wp-pagenavi a.nextpostslink,
.wp-pagenavi span.extend {border:1px solid #aaa;border-radius:5px;background:#fff;color:#333;padding:10px 16px;}
.wp-pagenavi a.page:hover, .wp-pagenavi a.first:hover, .wp-pagenavi a.last:hover,
.wp-pagenavi a.previouspostslink:hover, .wp-pagenavi a.nextpostslink:hover  {border-color:#aaa;background:#7ac843;color:#fff;}
.wp-pagenavi span.current {border:1px solid #aaa !important;border-radius:5px;background:#7ac843;color:#fff;padding:10px 16px;}

aside.instagram-box {display:block; float:left;width:90%;border:1px solid #ccc;padding:0;margin:0 5% 20px 5%}

	/*--- Banner --*/
	aside.top-banner {float:left;width:90%;padding: 0 5%;margin-bottom:0;}
	aside.side-banner {float:left;width:90%;padding:0 5%;margin-bottom:20px}
	aside.banner-640 {float:left;width:90%;padding: 0 5%; margin-bottom:10px}
	aside.banner-mobile-between-berita-gaya-hidup {display:block}
	aside.top-banner-mobile {float:left;width:100%;margin-bottom:15px; display:block}
	
/*-- Bread ---*/

.bread {float:left;width:90%;padding: 0 5%;margin-bottom:10px;font-size:0.7em;color:#666}
.bread a {color:#666}

/*-- KomenKamu --*/
.komen-kamu-wrapper .entry-header {border: 0; margin:0; padding: 0}
.komenkamus-container {float:left;background:#eee;width:640px;}
.komenkamus-container article {padding:10px}
.komenkamu-komentar {float:left;margin-bottom:20px;color:#333}
.komenkamu-komentar img.attachment-post-thumbnail {float:left;width:200px;height:auto;margin:0 20px 20px 0}
.komenkamu-komentar .right-wrap {float:left;width:400px;padding:0}

.kompetisi-wrapper {float:left;width:92%;
	border:15px solid #94c120;	
	margin-bottom:10px;
	background-color:#f8f8fa;
	background-repeat: no-repeat;
	background-image: url(images/indogreen.jpg), url(images/lomba-foto-bottom.jpg);
	background-size:40%, 100%;
	background-position: top right, bottom;
}

.kompetisi-wrapper article {float:left;width:94%;margin: 60px 3% 100px 3%}

.special-tag {float: right; width:95%; font-weight:bold; margin-bottom: 10px;}


@media only screen and (min-width: 768px) {
	.show-mobile {display:none}
	.show-web {display:block}
	.container-relative .title-container a {font-size:3vw}
	
	.search-form {width:250px;}
	.form-wrapper input[type=text] {width: 150px;}
	
	section.terkini article:nth-child(2), section.terkini article:nth-child(3) {width:50%}	
	article .right .excerpt {display:block;font-size:0.8em;line-height:140%}
	section.berita-harian, section.gaya-hidup, section.editorial, section.news-in-english,
	section.sosok-komunitas, section.flora-fauna, section.aksi, section.ide-inovasi
	{float:left;width:94%;padding:0 3% 0 3%}
	
	section.berita-harian article.first {width:50%;margin: 0 2% 5px 0}
	section.berita-harian article.list {float:right;width:48%;padding:0;margin-bottom:10px}
	section.berita-harian .title {font-size:1em}
	section.berita-harian article.list:nth-child(4) {float:left;width:50%;margin:0 2% 20px 0;padding:0;}
	section.berita-harian article.list:nth-child(5) {float:left;width:48%;margin:0 0 20px 0;padding:0;}
	section.berita-harian article.list:nth-child(n+2) img.attachment-square-medium {width:90px}	

	.list-boxed .title {font-size:0.85em}
	
	section.gaya-hidup .list-wrapper {}
	section.gaya-hidup .list-wrapper article:nth-child(n+2) {width:23.5%;margin:0;padding:0;margin:0 2% 20px 0}
	section.gaya-hidup .list-wrapper article:nth-child(5) {margin-right:0}
	section.gaya-hidup .list-wrapper article .title {font-size:1em}
	
	section.editorial .first img.attachment-post-thumbnail {float:left;width:49%;margin-right:2%}
	section.editorial .first .title {float:right; width:49%;}
	section.editorial .first .excerpt {float:right; width:49%}
	section.editorial article.list {width:49%;margin:0 2% 20px 0;padding:0;}
	section.editorial article.list .title {font-size:1em}
	section.editorial article.list:last-child {margin:0}
	
	section.news-in-english .inner {padding:0}
	section.news-in-english article.list {width:49%;margin:0 2% 20px 0;padding:0;}
	section.news-in-english article.list:last-child {margin-right: 0}
	section.news-in-english article.list .title {font-size:1em}
	
	section.sosok-komunitas .title-wrapper {width:100%;padding:10px 0}
	section.flora-fauna .category-time-container {float:left;width:100%;margin:0}
	section.flora-fauna article {width:49%;margin:0 2% 20px 0;padding:0;background:rd}
	section.flora-fauna article:last-child {margin-right:0}
	section.flora-fauna .title-wrapper {width:100%;padding:0 0 10px 0;font-size:1em;line-height:130%}
	
	section.aksi img.attachment-post-thumbnail {float:left;width:49%;margin-right:2%}
	
	section.ide-inovasi article:first-child, section.sosok-komunitas article:first-child {margin-bottom:10px}
	
	section.ide-inovasi article.list, section.sosok-komunitas article.list, section.aksi article.list  {width:49%;margin:0 2% 20px 0;padding:0;}
	section.ide-inovasi article.list .title, section.sosok-komunitas article.list .title, section.aksi article.list .title {font-size:1em}
	section.ide-inovasi article.list:last-child, section.sosok-komunitas article.list:last-child, section.aksi article.list:last-child {margin:0}
	
	.editorial .inner, .news-in-english .inner, .aksi .inner {width:100%;margin:0 0 20px 0 ;padding:0 0 20px 0}
	.aksi .inner {padding:0}
	
	.two-columns {float:left;width:94%;padding: 0 3%;margin-bottom:20px;}
	aside.terkait {float:left;width:48%;margin-right:4%;}
	aside.terkait .heading, aside.lainnya .heading, .popular .heading, .heading {float:left;width:100%;padding:10px 0;margin-bottom:14px;font-weight:700;font-size:1.1em;}
	.popular .heading {margin-bottom: 4px}
	aside.lainnya {float:left;width:48%;}
	aside.terkait article.list, aside.lainnya article.list, .popular article.list {float:left;width:100%;padding: 10px 0;}
	.two-columns .right .title {font-size:1em;}
	.two-columns .border {float:left;width:100%}
	.two-columns .border-left {width:21%;left:0}
	.two-columns .border-right {width:80%}	
	
	
	
	section.popular article .title, .pilihan-wrapper article .title, .english-sidebar .title {font-size:1em}
	
	.sidebar {float:left;width:94%;padding: 0 3%}
	.english-sidebar {display:block;float:left;width:94%;padding: 0 3% 3% 3%;margin-bottom:10px;background:#d7e0e5}
	
	.heading-single {width:97%;}
	h1.entry-title {float:left;width:94%;padding: 0 3%;margin-bottom:10px}
	header.entry-header .post-time {width:220px;padding: 0 3%;background:bue}	
	header.entry-header .komen-count {width:120px;padding:0}
	header.entry-header .lama-baca {width:200px;padding:0}	
	.wp-caption-text-feature, .wp-caption-text {width:94%;padding: 0 3%;}	

	.entry-content p {float:left;width:94%;padding: 0 3%;margin-bottom:15px}
	.entry-content table {float:left;width: 94%;margin: 0 3% 15px 3%}
	.entry-content h2, .entry-content h3, .entry-content h4 {float:left;width:94%;padding: 0 3%;margin-bottom:15px}
	.entry-content ol, .entry-content ul {width:94%;padding: 0 3%;margin:  0 0 15px 15px}
	
	.tag-wrap {width:94%;padding: 0 3%;}
	#comments-box {width:94%;padding: 0 3% 20px 3%}
	
	.archive-wrapper article.list {width:94%;padding: 10px 3%;margin-bottom:10px}
	.archive-wrapper .right .title {font-size:0.9em;line-height:130%}	
	.archive-wrapper .title-wrapper {width:94%;padding: 10px 3%;margin-bottom:20px;border-bottom:1px solid #ccc;font-size:1.4em}
	
	.upper-footer {float:left;width:96%;padding:3%}
	
	.wp-pagenavi {width:94%;padding: 0 3%;}
	.sidebar .column-1 {float:left;width:48%;margin-right:4%;}
	.sidebar .column-2 {float:left;width:48%;}
	section.popular {width:100%;}
	section.three-tabbed {width:99%;border: 1px solid #ccc}
	aside.top-banner {float:left;width:100%;padding: 0;margin-bottom:10px;display:block}
	aside.side-banner-top {float:left;width:100%;padding:0;margin-bottom:20px}
	aside.side-banner-middle {float:left;width:100%;padding:0;margin-bottom:20px}
	aside.banner-640 {width:94%;padding: 0 3%;}
	aside.top-banner-mobile {display:none}
	
	.special-tag {width:97%}
	
}

@media only screen and (min-width: 1024px) {
	
	.artikel-lain {float:right;font-size:0.7em}
	#main-wrapper {width:960px;margin:0 auto}
	#wrapper {float:left;width:960px;margin:0;padding:0}
	.header-tools {width:100%;padding:10px 0;}
	.menu-mobile {display:none}
	.logo-wrap {margin:0}
	nav.main-navigation {display:none; }
	
	.left-content {float:left;width:640px;}

	.container-relative .title-container a {font-size:1em;line-height:120%}
	
	section.terkini article:first-child {width:67%}
	section.terkini article:nth-child(2), section.terkini article:nth-child(3) {width:33%}
	section.terkini .container-relative img {margin:0}
	section.terkini article:nth-child(2) .container-relative img {margin-bottom:1px}
	
	section.berita-harian .title, section.gaya-hidup .list-wrapper article .title,
	section.editorial article.list .title, section.news-in-english article.list .title,
	section.ide-inovasi article.list .title, section.aksi article.list .title,
	section.popular article .title, .pilihan-wrapper article .title, section.sosok-komunitas article.list .title,
    .two-columns .right .title, .english-sidebar .title {font-size:0.8em}
	
	section.berita-harian, section.gaya-hidup, section.sosok-komunitas, section.flora-fauna, section.ide-inovasi, section.aksi
		{padding: 0 0 0 0;width:100%}
	section.sosok-komunitas .title-wrapper {font-size:1.2em}
	.sidebar {float:right; width:300px;padding:0}
	.sidebar .column-1 {width:100%;}
	.sidebar .column-2 {width:100%;}
	section.popular {width:100%}
	section.three-tabbed {width:298px}
	
	.heading-single {width:100%;}
	h1.entry-title {width:100%;padding: 0;}
	header.entry-header .post-time {padding:0 3% 0 0}
	.wp-caption-text-feature, .wp-caption-text {width:100%;padding: 0;}
	.entry-content p {float:left;width:100%;padding: 0;margin-bottom:15px}
	.entry-content table {width: 100%;margin: 0 0 15px 0}
	.entry-content h2, .entry-content h3, .entry-content h4 {float:left;width:100%;padding: 0;margin-bottom:15px}
	.entry-content ol, .entry-content ul {width:100%;padding: 0;margin: 0 0 15px 15px}
	
	.tag-wrap {width:100%;padding: 0;}
	
	.two-columns {width:100%;padding: 0;}
	
	#comments-box {width:100%;padding: 0 0 20px 0}	
	
	.archive-wrapper article.list {width:100%;padding: 10px 0;}	
	.archive-wrapper .title-wrapper {width:100%;padding: 10px 0;}
	
	.english-sidebar {width:280px;padding:0 10px 10px 10px}
	
	.upper-footer {float:left;width:940px;padding:20px}
	
	.footer-sitemap {float:left;width:600px}
	ul.sitemap {float:left;width:300px;}
	.upper-footer .address-column {float:left;width:300px;margin: 0 20px 20px 0;}
	
	aside.instagram-box {display:block; float:left;width:288px;border:1px solid #ccc;padding:5px;margin:0 0 20px 0}
	#sb_instagram .sb_instagram_header {width:260px !important}
	#sb_instagram .sbi_header_text .sbi_bio, #sb_instagram .sbi_header_text h3 {font-size:0.8em}
	
	.bread {float:left;width:100%;padding: 0;margin-bottom:10px;font-size:0.7em;color:#666}
	
	
	/*--- Page Navi ---*/
	.wp-pagenavi {width:660px;padding: 0; margin:20px 0;font-size:18px;}
	.wp-pagenavi a.page, .wp-pagenavi a.first, .wp-pagenavi a.last, 
	.wp-pagenavi a.previouspostslink, .wp-pagenavi a.nextpostslink,
	.wp-pagenavi span.extend {border:1px solid #aaa;border-radius:5px;background:#fff;color:#333;padding:6px 12px;}
	.wp-pagenavi span.current {border:1px solid #aaa !important;border-radius:5px;background:#7ac843;color:#fff;padding:6px 12px;}
	aside.top-banner {float:left;width:100%;padding: 0;margin-bottom:10px;display:block}
	aside.side-banner {float:left;width:100%;padding:0;margin-bottom:20px}
	aside.side-banner-top {}
	aside.banner-640 {width:100%;padding: 0;}
	aside.banner-mobile-between-berita-gaya-hidup {display:none}
	aside.top-banner-mobile {display:none}
	
	.kompetisi-wrapper {
		float:left;
		width:930px;
		
		background-repeat: no-repeat;
		background-image: url(images/indogreen.jpg), url(images/lomba-foto-bottom.jpg);
		background-size:350px, 100%;
		background-position: top right, bottom;

}

.kompetisi-wrapper article {float:left;width:850px;margin: 100px 40px 300px 40px}

.special-tag {width:100%}

}

/*--- Main Navigation  ---*/


.submenu-wrap {width:940px;height:280px;background:#3d565c; margin: 0 auto;border-top:5px solid #78c158; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2)}

.navbar {
  float:left;
  width:960px;
  overflow: hidden;
  background-color: #233238;
}

.navbar a.beranda {
  float: left;
  font-size: 14px;
  font-weight:700;
  color: white;
  text-align: center;
  padding: 14px 20px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown a.dropbtn {
  float: none;
  display:block;
  font-size: 14px;
  font-weight:700;
  color: white;
  padding: 14px 20px;
  text-decoration: none;  
}

.navbar a.beranda:hover, .dropdown:hover .dropbtn {
  background-color: #78c158;
}

.dropdown:hover .gaya-hidup {
  background-color: #d31c5e;
}

.dropdown:hover .sosok-komunitas {
  background-color: #f15a26;
}

.dropdown:hover .ide-inovasi {
  background-color: #56a6dc;
}

.dropdown:hover .flora-fauna {
  background-color: #dae120;
}

.dropdown:hover .aksi {
  background-color: #f7941e;
}

.submenu-gaya {border-top:5px solid #d31c5e}
.submenu-gaya .column a:hover {color:#d31c5e}
.submenu-sosok {border-top:5px solid #f15a26}
.submenu-sosok .column a:hover {color:#f15a26}
.submenu-ide {border-top:5px solid #56a6dc}
.submenu-ide .column a:hover {color:#56a6dc}
.submenu-flora {border-top:5px solid #dae120}
.submenu-flora .column a:hover {color:#dae120}
.submenu-aksi {border-top:5px solid #f7941e}
.submenu-aksi .column a:hover {color:#f7941e}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: none;
  width: 100%;
  left: 0;  
  
  z-index: 1;
  
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 200ms, visibility 200ms;
          transition: opacity 200ms, visibility 200ms;
}

.dropdown:hover .dropdown-content {
  display: block;
  visibility: visible;
  opacity: 1;
  animation: fade 1s;
}

@keyframes fade {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 180px;
  padding: 10px 0 10px 20px;
  
  
}

.column a {
  float: none;
  font-size:14px;
  font-weight:700;
  color: #fff;
  padding: 10px 0;
  text-decoration: none;
  display: block;
  text-align: left;
  border-bottom: 1px solid #ccc;
}

.column a:hover {
  color:#78c158;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
    height: auto;
  }
}

.submenu-wrap .list-wrapper {float:left;width:700px;padding:20px}
.submenu-wrap .list-wrapper article {float:left;width:130px;margin:0 10px 0 0;padding:0;}
.submenu-wrap .list-wrapper article:last-child {margin:0}
.submenu-wrap .list-wrapper article img.attachment-archive {width:100%;margin-bottom:10px}
.submenu-wrap .list-wrapper article a {margin:0;padding:0;text-align:left}
.submenu-wrap .list-wrapper article .category-time-container .category-entry {font-size:0.7em}
.submenu-wrap .list-wrapper article .title a {font-size:0.8em;font-weight:700;color:#fff;}
.submenu-wrap .list-wrapper article {line-height:100%}

.submenu-ide .list-wrapper, .submenu-aksi .list-wrapper {width:940px;}
.submenu-ide .list-wrapper article, .submenu-aksi .list-wrapper article {width:130px;margin-right: 23px}

/*-------------*/
/*---- Adsense -----*/
ins.adsbygoogle { background: transparent !important; }


/* -------------------------------- 

Accordion - Main Components 

-------------------------------- */
.cd-accordion-menu {
  float:left;
  width: 100%;
  max-width: 600px;
  background: #4d5158;
  margin:0;
  padding:0;
  display: none;  
  }
.cd-accordion-menu ul {
  /* by default hide all sub menus */
  display: none;
}
.cd-accordion-menu li {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.cd-accordion-menu input[type=checkbox] {
  /* hide native checkbox */
  position: absolute;
  opacity: 0;
}
.cd-accordion-menu label, .cd-accordion-menu a {
  position: relative;
  display: block;
  padding: 18px 18px 18px 48px;
  background: #4d5158;
  box-shadow: inset 0 -1px #555960;
  color: #ffffff;
  font-size: 1rem;
  font-weight:700;
}
.no-touch .cd-accordion-menu label:hover, .no-touch .cd-accordion-menu a:hover {
  background: #52565d;
}
.cd-accordion-menu label::before, .cd-accordion-menu label::after, .cd-accordion-menu a::after {
  /* icons */
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}
.cd-accordion-menu label {
  cursor: pointer;
}
.cd-accordion-menu label::before {
  background-image: url(images/cd-icons.svg);
  background-repeat: no-repeat;
}
.cd-accordion-menu label::before {
  /* arrow icon */
  left: 18px;
  background-position: 0 0;
  -webkit-transform: translateY(-50%) rotate(-90deg);
  -moz-transform: translateY(-50%) rotate(-90deg);
  -ms-transform: translateY(-50%) rotate(-90deg);
  -o-transform: translateY(-50%) rotate(-90deg);
  transform: translateY(-50%) rotate(-90deg);
}


.cd-accordion-menu input[type=checkbox]:checked + label::before {
  /* rotate arrow */
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
}

.cd-accordion-menu input[type=checkbox]:checked + label + ul,
.cd-accordion-menu input[type=checkbox]:checked + label:nth-of-type(n) + ul {
  /* use label:nth-of-type(n) to fix a bug on safari (<= 8.0.8) with multiple adjacent-sibling selectors*/
  /* show children when item is checked */
  display: block;
}
.cd-accordion-menu ul label,
.cd-accordion-menu ul a {
  background: #35383d;
  box-shadow: inset 0 -1px #41444a;
  /*padding-left: 82px;*/
}
.no-touch .cd-accordion-menu ul label:hover, .no-touch
.cd-accordion-menu ul a:hover {
  background: #3c3f45;
}
.cd-accordion-menu > li:last-of-type > label,
.cd-accordion-menu > li:last-of-type > a,
.cd-accordion-menu > li > ul > li:last-of-type label,
.cd-accordion-menu > li > ul > li:last-of-type a {
  box-shadow: none;
}
.cd-accordion-menu ul label::before {
  left: 36px;
}
.cd-accordion-menu ul label::after,
.cd-accordion-menu ul a::after {
  left: 59px;
}
.cd-accordion-menu ul ul label,
.cd-accordion-menu ul ul a {
  padding-left: 100px;
}
.cd-accordion-menu ul ul label::before {
  left: 54px;
}
.cd-accordion-menu ul ul label::after,
.cd-accordion-menu ul ul a::after {
  left: 77px;
}
.cd-accordion-menu ul ul ul label,
.cd-accordion-menu ul ul ul a {
  padding-left: 118px;
}
.cd-accordion-menu ul ul ul label::before {
  left: 72px;
}
.cd-accordion-menu ul ul ul label::after,
.cd-accordion-menu ul ul ul a::after {
  left: 95px;
}
@media only screen and (min-width: 600px) {
  .cd-accordion-menu label, .cd-accordion-menu a {
    padding: 24px 24px 24px 82px;
    font-size: 1.9rem;
  }
  .cd-accordion-menu label::before {
    left: 24px;
  }
  .cd-accordion-menu label::after {
    left: 53px;
  }
  .cd-accordion-menu ul label,
  .cd-accordion-menu ul a {
    padding-left: 106px;
  }
  .cd-accordion-menu ul label::before {
    left: 48px;
  }
  .cd-accordion-menu ul label::after,
  .cd-accordion-menu ul a::after {
    left: 77px;
  }
  .cd-accordion-menu ul ul label,
  .cd-accordion-menu ul ul a {
    padding-left: 130px;
  }
  .cd-accordion-menu ul ul label::before {
    left: 72px;
  }
  .cd-accordion-menu ul ul label::after,
  .cd-accordion-menu ul ul a::after {
    left: 101px;
  }
  .cd-accordion-menu ul ul ul label,
  .cd-accordion-menu ul ul ul a {
    padding-left: 154px;
  }
  .cd-accordion-menu ul ul ul label::before {
    left: 96px;
  }
  .cd-accordion-menu ul ul ul label::after,
  .cd-accordion-menu ul ul ul a::after {
    left: 125px;
  }
}
.cd-accordion-menu.animated label::before {
  /* this class is used if you're using jquery to animate the accordion */
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
}

/*-------- author bio ---------*/

#author-info {float: left; width: 94%; padding: 3%; margin-bottom:20px; background:#efefef;}
#author-info figure img {float:left; width:100px; height:100px; margin: 0 20px 20px 0; border-radius:50%;}
#author-info header {margin-bottom:15px}
#author-info h1 {font-size:1.4em;color:#000;margin-bottom:5px;}
#author-info .position {font-size:0.9em;font-weight:bold;color:#666;}
#author-info p {font-size:0.9em}

.wpcf7 form.sent .wpcf7-response-output, .wpcf7 form .wpcf7-response-output {border:none}