/*
Theme Name: MajalahCSR.id - 2022 version

Author: MajalahCSR

*/

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: #fcd700; 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.
-------------------------------------------------------------------------------*/

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

body {background:#031B25;font-family: 'Mulish', sans-serif;font-weight:400;font-size:14px;color:#333;overflow-x:hidden;line-height:140%}

#header {float:left;width:100%;background:#fff;padding: 0 0 20px 0}
.inner {width:100%;}

img#logo {width:186px;height:50px;margin: 0 auto 10px auto;}


/*
 * Made by Erik Terwan
 * 24th of November 2015
 * MIT License
 *
 *
 * If you are thinking of using this in
 * production code, beware of the browser
 * prefixes.
 */

#menuToggle
{
  display: block;
  position: relative;
  top: 50px;
  left: 20px;  
  z-index: 1;  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle a
{
  text-decoration: none;
  color: #232323;  
  transition: color 0.3s ease;
}

#menuToggle a:hover
{
  color: tomato;
}


#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;  
  cursor: pointer;  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */  
  -webkit-touch-callout: none;
}

/*
 * Just a quick hamburger
 */
#menuToggle span
{
  display: block;
  width: 33px;
  height: 4px;
  margin-bottom: 5px;
  position: relative;  
  background: #cdcdcd;
  border-radius: 3px;  
  z-index: 1;  
  transform-origin: 4px 0px;  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #232323;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 50px;
  padding-top: 125px;
  
  background: #ededed;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 22px;
}

/*
 * And let's slide it in from the left
 */
#menuToggle input:checked ~ ul
{
  transform: none;
}

.search-form {float:left; width:200px;}
#middle-content {float:left;width:100%;padding-top:20px;}
.banner {float:left;margin-bottom:20px;}
.banner-sidebar {float:left;width:100%;margin-bottom:10px;}
.banner1 {float:left;}
.mobile-banner {float:left;display:block;width:100%;margin-bottom:20px;}

.container {
	float:left;
	width:96%;	
	padding:4% 2%;
	background:#fff;
	margin-bottom:20px;
	border-radius: 5px;
	}
	
.left-content {
	float:left;
	width:100%;	
	margin:0;
}

.heading {	
	margin-bottom:20px;
}

.heading span {
	background:#9E005D;
	color:#fff;
	padding:5px 20px;
	border-radius:2px;
	font-family: 'Mulish', sans-serif;
	font-size:14px;
	font-weight:800;
	text-transform:uppercase;
}
.heading span a {color:#fff}

.slider, .wawasan-listing {
	float:left;
	width:100%;
	margin-bottom:20px;
}
.slider article {float:left;position:relative;width:100%;margin: 0 0 4px 0;}
.slider article .wp-post-image {width:100%;height:auto}
.slider article .overlay {position:absolute;bottom:10px;padding: 0 5%;width:90%;}
.slider article .overlay .title {
	font-family: 'Mulish', sans-serif;
	font-size:24px;
	font-weight:800;
	line-height:120%;
	color:#fff;
	text-shadow: 2px 2px 2px #000;
	margin-bottom:10px;
}

.slider article .overlay .title a, .slider article .overlay .date {
	color:#fff;
}
.right-content {
	float:left;
	width:100%;	
}

.heading2 {
	font-family: 'Mulish', sans-serif;
	color:#9E005D;
	font-size:12px;
	font-weight:800;
	border-bottom: 1px solid #ccc;
	padding-bottom:5px;
	margin-bottom:10px;
}

.trending-articles .title, .listing1 .title, .galeri-listing .title, .editorial-content .title {
	font-family: 'Mulish', sans-serif;
	font-size:16px;
	font-weight:800;
	line-height:120%;
	margin-bottom:10px;
}

.trending-articles article {
	float:left;
	width:100%;
	background:re;
	border-bottom: 1px solid #ccc;
	padding-bottom:10px;
	margin-bottom:10px;
}

.trending-articles article .left {
	float:left;
	width:70%;
	margin-right:10px;
}

.trending-articles article .wp-post-image {
	float:right;
	width:80px;
	height:80px;
	object-fit: cover;	
}

.container2 {
	float:left;
	width:100%;
	margin-bottom:20px;
}

.container2 .left-content {
	float:left;
	width:100%;
}

.container2 .left-content-single, .container2 .left-content-archive {
	float:left;
	width: 96%;
	padding:4% 2%;
	background: #fff;
	border-radius:5px;
	margin: 0 0 10px 0;	
}

.container2 .sidebar-content {
	float:left;
	width:100%;	
}

.sidebar-content .container3 {
	float:left;
	width:96%;
	padding:2%;
	background:#fff;
	border-radius:5px;
	margin-bottom:10px;	
}

.listing1 {float:left;width:100%;margin-bottom:20px;}

.listing1 article {
	float:left;
	width:96%;	
	padding:2%;
	background:#fff;
	border-radius: 5px;
	margin-bottom:5px;
}

.listing1 article .wp-post-image {float:left;width:100%;height:auto}

.container2 .editorial-content {
	float:left;
	width:96%;
	padding:2%;
	background:white;
	border-radius:5px;
}

.editorial-content article .wp-post-image {float:left;width:100%;height:240px;object-fit:cover;margin-bottom:10px}

.wawasan-listing article {float:left;position:relative;margin-bottom:4px}
.wawasan-listing article:nth-child(1) {width:100%;}
.wawasan-listing article:nth-child(1) .wp-post-image {width:100%;height:auto}
.wawasan-listing article:nth-child(n+2) {width:100%;}
.wawasan-listing article:nth-child(2) {margin-bottom:4px}
.wawasan-listing article:nth-child(n+2) .wp-post-image {width:100%;height:auto}
.wawasan-listing article .overlay {position:absolute;bottom:10px;padding: 0px 5%;width:90%;}
.wawasan-listing article .overlay .title {
	font-family: 'Mulish', sans-serif;
	font-size:24px;
	font-weight:800;
	line-height:120%;
	color:#fff;
	text-shadow: 2px 2px 2px #000;
	margin-bottom:10px;
}

.wawasan-listing article .overlay .title a {
	color:#fff;
}
.wawasan-listing article .overlay .date {
	color:#fff;
}

.galeri-listing article {
	float:left;
	width:96%;	
	padding:2%;
	background:#fff;
	margin-right:8px;
	border-radius:5px;
	margin-bottom:5px;
}
.galeri-listing article:nth-child(4) {margin:0}
.galeri-listing article .wp-post-image {float:left;width:100%;height:auto;object-fit:cover}

.date, .view-count {
	float:left;
	margin: 0 10px 0 0;
	font-family: 'Mulish', sans-serif;
	font-weight:400;
	font-size:11px;
	padding: 1px 0 0 0;
}
.kategori {float:left;}

.kategori span {
	font-family: 'Mulish', sans-serif;
	background:#00A9BD;
	color:#fff;
	text-transform:uppercase;
	padding: 3px 5px;
	font-size:10px;
	font-weight:800;
	margin-right:10px;
	}
	
#footer {float:left;width:100%;background:re;}
.inner2 {width:100%;margin:10px auto;}
.contact-info {
	float:left;
	width:100%;
	background:ble;
	font-family: 'Mulish', sans-serif;
	font-size: 12px;
	font-weight:400;
	color:#fff;
	margin-bottom:40px;
}
.contact-info div {
	float:left;
	width:92%;
	padding:4%;
}

/* Form submit button */
.form-wrapper {float:left;width:300px;margin-top:22px}
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: left;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 24px;
    width: 20px;
	margin: 0 1px 0 0;
    text-indent:-9999px;
    background: url('images/search2.png') 0 0 no-repeat;
	
}
.form-wrapper button:hover {opacity: 0.5; filter: alpha(opacity=50);}

.form-wrapper input {
	font-family: 'Mulish', sans-serif;
	font-size: 14px;
	font-weight:400;
	color:#fff;
	padding: 3px 5px;
	width:100px;
	background:#ccc;
	border:0;
	border-radius: 0 5px 5px 0;
	}
.form-wrapper input::placeholder {
	color:#fff;
}

.form-wrapper input:focus {
    outline: none !important;
    border:none;
    
  }

article.single .wp-post-image{
	width:100%;height:auto;
}

article.single p {margin-bottom:15px;}
article.single ol {margin-left:15px;}
article.single .wp-caption-text-feature, article.single .wp-caption-text {font-size:13px;font-style:italic;text-align:left;}

article.single .entry-header {margin-bottom:20px;}
article.single .addthis_tool {margin-bottom:20px;}
article.single .entry-title {
	font-family: 'Mulish', sans-serif;
	font-size:32px;
	font-weight:800;
	line-height:120%;
	color:#111;
	
	
	margin-bottom:10px;
}
article.single .category {margin:20px 0;}
article.single .category span {
	font-family: 'Mulish', sans-serif;
	background:#00A9BD;
	color:#fff;
	text-transform:uppercase;
	padding: 5px 10px;
	font-size:14px;
	font-weight:800;
	border-radius:3px;

}

article.single .entry-content a {color:#00A9BD;}
article.single .entry-content ul {list-style-type: disc; list-style-position: inside; margin-bottom:15px;}
article.single .entry-content .wp-caption {width:100% !important}


.tag-wrap a {
	font-weight:800;
	color:#00A9BD;
	
}
.infografis-container {margin-bottom:20px}
.infografis-container .wp-post-image {width:100%;height:auto}

.container2 .left-content-archive article {float:left;width:100%;margin-bottom:20px; padding: 0 0 20px 0;background:rd;border-bottom: 1px solid #ccc}
.left-content-archive article .wp-post-image {float:left;width: 100px;height:100px;object-fit:cover;margin: 0 20px 0 0}
.left-content-archive article .archive-right {float:left;width:65%;background:bue}
.left-content-archive article .archive-right .title {
	font-family: 'Mulish', sans-serif;
	font-size:16px;
	font-weight:800;
	line-height:120%;
	color:#111;
	
	
	margin-bottom:10px;
}

.navigation {
	float:left;
	width:100%;
	font-weight:800;
}

.navigation a {color:#00A9BD;}
.navigation .previous {
	float:left;
}
.navigation .next {
	float:right;
}

@media only screen and (min-width: 1024px) { 

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

#header {float:left;width:100%;background:#fff;padding: 10px 0 0 0}
.inner {width:1000px;margin:0 auto;}

img#logo {float:left;width:186px;height:50px;margin: 0 40px 10px 40px;}

ul.main-navigation {
	float:left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	font-size:12px;	
	font-family: 'Mulish', sans-serif;
	font-weight:800;
	background:rd;
	width:410px;
}

ul.main-navigation li {
    float: left;
	margin-right: 10px;
}

ul.main-navigation li a, .dropbtn {
    display: inline-block;
    color: #333;
    text-align: center;
    padding: 20px 10px 4px 10px;
	border-bottom: 4px solid #ccc;
    text-decoration: none;
}

ul.main-navigation li a:hover, ul.main-navigation .dropdown:hover .dropbtn {
    
	border-color: #85BD3C;
}

ul.main-navigation li.dropdown {
    display: inline-block;
}

ul.main-navigation .dropdown-content {
    display: none;
    position: absolute;
    background-color: #000;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

ul.main-navigation .dropdown-content a {
    color: #fff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
	border:none;
}

ul.main-navigation .dropdown-content a:hover {color:#85BD3C}

ul.main-navigation .dropdown:hover .dropdown-content {
    display: block;
}

.search-form {float:left; width:200px;}


#middle-content {float:left;width:100%;padding-top:20px;}
.banner {float:left;margin-bottom:20px;}
.banner-sidebar {float:left;margin-bottom:10px;}
.banner1 {float:left;}

.container {
	width:960px;	
	padding:20px;
	}
	
.left-content {
	width:700px;	
	margin: 0 20px 0 0;
}

.slider, .wawasan-listing {
	width:700px;
}
.slider article:nth-child(1) {width:466px;margin-right:4px;}
.slider article:nth-child(1) .wp-post-image {width:466px;height:262px}
.slider article:nth-child(n+2) {width:230px;}
.slider article:nth-child(2) {margin-bottom:4px}
.slider article:nth-child(n+2) .wp-post-image {width:230px;height:129px}
.slider article .overlay .title {
	font-size:14px;
}
.slider article:nth-child(1) .overlay .title {
	font-size:24px;
}

.right-content {
	width:240px;	
}

.trending-articles .title, .listing1 .title, .galeri-listing .title, .editorial-content .title {
	font-size:13px;
}

.trending-articles article {
	width:240px;
}

.trending-articles article .left {
	width:160px;
}

.trending-articles article .wp-post-image {
	float:left;
	width:70px;
	height:70px;	
}

.container2 {
	width:1000px;
}

.container2 .left-content {
	width:720px;
}

.container2 .left-content-single, .container2 .left-content-archive {
	width: 690px;
	padding:20px;
	margin: 0 10px 0 0;	
}

.container2 .sidebar-content {
	width:260px;	
}

.sidebar-content .container3 {
	width:240px;
	padding:10px;
}

.listing1 {width:720px;}

.listing1 article {
	width:226px;
	height:280px;
	padding:5px;
	margin:0;
}

.listing1 article:nth-child(2) {
	margin: 0 6px;
}

.container2 .editorial-content {
	width:240px;
	padding:10px;
}

.editorial-content article .wp-post-image {width:240px;height:240px;object-fit:cover;}

.wawasan-listing article {float:right;position:relative}
.wawasan-listing article:nth-child(1) {width:466px;}
.wawasan-listing article:nth-child(1) .wp-post-image {width:466px;height:262px}
.wawasan-listing article:nth-child(n+2) {width:230px;margin-right:4px}
.wawasan-listing article:nth-child(2) {margin-bottom:4px}
.wawasan-listing article:nth-child(n+2) .wp-post-image {width:230px;height:129px}
.wawasan-listing article .overlay {position:absolute;bottom:10px;padding: 0px 5%;width:90%;}
.wawasan-listing article .overlay .title {
	font-size:14px;
}
.wawasan-listing article:nth-child(1) .overlay .title {
	font-size:24px;
}

.galeri-listing article {
	float:left;
	width:234px;
	height:270px;
	padding:5px;
	background:#fff;
	margin-right:8px;
	border-radius:5px;
}
.galeri-listing article:nth-child(4) {margin:0}
.galeri-listing article .wp-post-image {float:left;width:234px;height:150px;object-fit:cover}

.inner2 {width:960px;}
.contact-info {	
	width:600px;	
}

.contact-info div {
	width:300px;
	padding:0;
}

.container2 .left-content-archive article {float:left;width:690px;margin-bottom:20px; padding: 0 0 20px 0;background:rd;border-bottom: 1px solid #ccc}
.left-content-archive article .wp-post-image {float:left;width: 200px;height:120px;margin: 0 20px 0 0}
.left-content-archive article .archive-right {float:left;width:470px;}
.left-content-archive article .archive-right .title {
	font-family: 'Mulish', sans-serif;
	font-size:16px;
	font-weight:800;
	line-height:120%;
	color:#111;	
	margin-bottom:10px;
}

}