/*
Theme Name: PLX Knowledge Base
Theme URI: http://knowledge.paralogix.co.id
Description: Paralogix Knowledge Base Theme
Author: Paralogix
Author URI: http://www.paralogix.co.id
Template: knowhow
*/

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');
@import url('../knowhow/style.css');

/* Clearing */

.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: '';
  display: table;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/* Layout */

.section {
  padding: 3em 1.5em;
}

.container {
  max-width: 1260px;
  margin: 0 auto;
  line-height: 1.75em;
}

.col-10 {
  width: 10%; /* 6 col */
}
.col-15 {
  width: 14.5%; /* 6 col */
}
.col-20 {
  width: 16%; /* 5 col */
}
.col-25 {
  width: 22%; /* 4 col */
}
.col-30 {
  width: 26%; /* 30/70 */
}
.col-33 {
  width: 30.667%; /* 3 col */
}
.col-40 {
  width: 38%; /* 40/60 */
}
.col-50 {
  width: 46%; /* 2 col */
}
.col-60 {
  width: 58%; /* 60/40 */
}
.col-70 {
  width: 70%; /* 70/30 */
}
.col-80 {
  width: 80%; /* 80/20 */
}
.col-85 {
  width: 81.5%;
}
.col-100 {
  width: 100%; /* 1 col */
}

.col-10,
.col-15 	/* 6 col */,
.col-20 	/* 5 col */,
.col-25 	/* 4 col */,
.col-33 	/* 3 col */,
.col-50 	/* 2 col */,
.col-30 	/* 30/70 */,
.col-40 	/* 40/60 */,
.col-60		/* 60/40 */,
.col-70 	/* 70/30 */ {
  display: inline;
  margin-right: 4%;
}

.grid {
  float: left;
}

.grid-right {
  float: right;
}

.fit {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}
.center-center {
  text-align: center;
  vertical-align: middle;
}

.right {
  text-align: right;
}

/* Global */

body,
button,
input,
select,
textarea {
  color: #444;
  font-family: 'Figtree', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 15px;
}

h1,
h2,
h3,
h4,
strong {
  font-family: 'Figtree', sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
}

a:hover {
  color: #8bc500;
}

hr {
  border: none;
  border-bottom: 1px solid #e6e6e6;
  margin-bottom: 1.5em;
}

/* Social Share */

.entry-meta {
  margin-bottom: 24px !important;
}

.addthis_native_toolbox {
  margin-bottom: 1.5em;
}

/* Header */

#site-header {
  background-color: #232120;
  color: #5d6e7a;
  padding: 2em 0;
}

#site-header #logo img {
  height: 3rem;
  width: auto;
  max-width: 100%;
}

#primary-nav {
  top: 2.25em !important;
}
#primary-nav ul li.current_page_item a,
#primary-nav ul li.current-menu-item a {
  font-family: 'Figtree', sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
}

#menu-main-menu .menu-item a {
  color: #fff;
}

#primary-nav > ul > li:after {
  content: none !important;
}

#primary-nav ul li,
#primary-nav ul li:last-child {
  margin: 0 1em;
}

#live-search #searchsubmit {
  background-color: #b70000 !important;
  margin: 12px 18px 0 0;
}

#live-search #searchsubmit:hover {
  background-color: #8bc500 !important;
}

#searchsubmit > span {
  font-size: 13px;
}

#live-search #searchsubmit i {
  margin: 0 10px 0 0;
}

/* Main */

#homepage-categories .column:before,
.single #page-header:before,
.single-format-video #page-header:before,
.category #page-header:before,
.post:before {
  color: #b70000;
}

#content > article > h2.entry-title > a:hover {
  color: #8bc500;
}

.single #page-header {
  padding-left: 70px;
}

.single #page-header:before,
.single-format-video #page-header:before,
.category #page-header:before {
  /* font-size: 48px; */
  top: 4px;
}

.st_articles_widget li.format-standard:before,
.st_popular_articles_widget li.format-standard:before,
.st_articles_widget li.format-video:before,
.st_popular_articles_widget li.format-video:before {
  top: 0;
}

.post:before {
  top: 4px;
}

#content article:last-child {
  border-bottom: none;
}

#respond #commentform .comment-form-author,
#respond #commentform .comment-form-email,
#respond #commentform .comment-form-url {
  display: flex;
  flex-flow: column;
}

#respond #commentform .comment-form-author label,
#respond #commentform .comment-form-email label,
#respond #commentform .comment-form-url label {
  line-height: 1.75rem;
  font-family: 'Figtree', sans-serif;
  font-optical-sizing: auto;
  font-size: 0.875rem;
  color: #213655;
}

#respond #commentform .comment-form-author label span,
#respond #commentform .comment-form-email label span,
#respond #commentform .comment-form-url label span {
  top: 0;
  font-size: 1rem;
}

#respond #commentform .comment-form-author input,
#respond #commentform .comment-form-email input,
#respond #commentform .comment-form-url input {
  margin: 0;
  line-height: 2rem;
  padding: 0.25rem 0.5rem;
}

#respond #commentform .comment-form-comment textarea {
  padding: 0.5rem;
}

#related-posts .entry-title {
  position: relative;
  padding: 0 1rem 0 1.5rem;
  line-height: 1.5rem;
}

#related-posts .entry-title a {
  line-height: 1.5rem;
}

#related-posts li.standard a:before,
#related-posts li.video a:before {
  position: absolute;
  left: 0;
  opacity: 0.7;
}

/* Footer */

.footer-top {
  background-color: #232120;
  color: #bdc3c7;
  font-size: 14px;
  padding-top: 4em;
  padding-bottom: 4em;
}

.footer-menu-title {
  color: #bdc3c7 !important;
  font-family: 'Figtree', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  margin-bottom: 0.75em;
}

.footer-top a {
  color: #d11314 !important;
}

.logo_footer {
  background: url('img/PLX-Logo-Horizontal-min.png') top left no-repeat;
  opacity: 0.4;
  display: block;
  height: 60px;
  text-indent: -99999px;
}

.footer-top ul.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-bottom {
  background-color: #1e1c1c;
  color: #5d6e7a;
  font-size: 14px;
  padding: 2em 0 2em 0 !important;
}

.footer-bottom a {
  color: #999;
}
.footer-bottom a:hover {
  color: #fff;
  text-decoration: dashed;
}

.menu-bottom li {
  display: inline;
  list-style-type: none;
  margin-right: 1.5em;
}

#footer-widgets .row {
  max-width: none;
}

/* -------------------------------------------------------------------------------------------------------------------- MEDIA QUERIES */

/* DESKTOP HIRES */
@media only screen and (min-width: 1441px) {
}

/* DESKTOP 1024 */
@media only screen and (max-width: 950px) {
}

/* IPAD */
@media screen and (max-width: 768px),
  only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
  .grid,
  .grid-right {
    /* float:none; */
    width: 100%;
  }

  .section {
    padding: 2em 0.5em;
  }

  .footer-top {
    font-size: 16px;
  }

  .logo_footer {
    display: none;
  }

  .footer-menu-title {
    margin-top: 1em;
  }

  .footer-bottom {
    text-align: center;
  }

  ul#menu-menu-bottom {
    margin: 0 0 1em 0;
    padding: 0;
  }
}

/* SMARTPHONE */
@media screen and (max-width: 480px) {
  .section {
    padding: 2em 0.5em;
    line-height: 1.25em;
  }

  .footer-top {
    text-align: center;
  }
}