@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Roboto:wght@900&display=swap"); html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s,
samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus { outline: 0; }
body { line-height: 1; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
caption, th, td { font-weight: normal; text-align: left; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
a img { border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; }
del { color: #333; }
ins { background: #fff9c0; text-decoration: none; }
hr { background-color: #ccc; border: 0; height: 1px; margin: 24px; margin-bottom: 1.714285714rem; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
small { font-size: smaller; }
img { border: 0; -ms-interpolation-mode: bicubic; } body {
font-family: 'Open Sans', sans-serif;
font-size: 18px;
font-weight: 400;
color: #4D4D4D;
background-color: #FFF;
}
a { text-decoration: none; color: #2f2f2f; transition: all ease-in-out 200ms; }
a:hover { text-decoration: underline; color: #000; }
sup { font-size: 60%; }
strong { font-weight: 700; }
em { font-style: italic; }
.clear { clear: both; }
small { font-size: 9px; }
.none { display: none;}
.floatleft { float: left; }
.floatright { float: right; } input, select, textarea { font-size: 18px; line-height: 24px; font-family: 'Open Sans', sans-serif; }
input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
padding: 8px;
border: 1px solid #9da1a1;
background: #FFF;
box-shadow: none;
-webkit-appearance: none;
border-radius: 4px;
color: #4D4D4D;
}
input[type="number"] {
padding: 10px 8px;
}
input:not([type]), input[type="text"]:active, input[type="number"]:active, select:active, input[type="password"]:active, input[type="email"]:active,
input[type="search"]:active, textarea:active {
background: #ffffff;
color: #4D4D4D;
border: 1px solid #000;
}
input:not([type]), input[type="text"]:focus, select:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="email"]:focus, textarea:focus {
background: #ffffff;
border-color: #0EAF90;
color: #4D4D4D;
border: 1px solid #000;
}
input:not([type]), input[type="submit"], input[type="button"], .button {
background-color: #FFF;
border: 1px solid #4D4D4D;
cursor: pointer;
padding: 10px 14px;
color: #4D4D4D;
-webkit-appearance: none;
font-size: 18px;
line-height: 28px;
background-repeat: no-repeat;
transition: all ease-in-out 200ms;
display: inline-block;
}
input:not([type]), input[type="submit"]:active, input[type="button"]:active, .button:active {
position:relative; top:1px;
}
input:not([type]), input[type="submit"]:hover, input[type="button"]:hover, .button:hover {
text-decoration: none; color: #FFF; background-color: #F7931A;
}
input:not([type]), input[type="submit"]:disabled , input[type="button"]:disabled { background-color: #637383; }
input[type="text"]:disabled, input[readonly="readonly"] { background-color: #FFF; border: 1px solid #CCC; }
input[readonly="readonly"]:active, input[readonly="readonly"]:focus { background-color: #FFF; border: 1px solid #CCC; box-shadow: none; } .header {
display: block;
width: 240px;
height: auto;
position: fixed;
left: 0;
top: 0;
width: 240px;
height: 100vh;
background: #4D4D4D;
}
.logo {
display: block;
width: 240px;
text-align: center;
height: 200px;
background: #4D4D4D;
}
.mainlogo {
display: block;
margin: 0 auto;
padding: 22px 0 0 0;
}
.menubutton {
display: block;
font-size: 18px;
line-height: 24px;
border-bottom: 1px solid #4D4D4D;
background-color: #F7931A;
transition: all 400ms ease-in-out;
color: #FFF;
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/menu-light.png);
background-repeat: no-repeat;
background-size: 32px 32px;
background-position: 30px 9px;
height: 37px;
padding: 13px 0 0 76px;
cursor: pointer;
}
.menubutton:hover, .menubutton:active {
color: #4D4D4D;
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/menu-dark.png);
background-color: #cbcbcb;
} .article {
display: block;
padding-left: 260px;
width: calc(100vw - 280px);
}
.artwarp {
width: 90%;
margin: 0 auto;
padding: 0 0 36px 0;
max-width: 1100px;
}
.preblok {
padding: 56px 0;
border-bottom: 1px solid #4D4D4D;
position: relative;
}
.entry-title {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 44px;
text-transform: uppercase;
}
.entry-title a {
color: #4D4D4D;
transition: all 400ms ease-in-out;
}
.entry-title a:hover {
color: #F7931A;
}
.presubjudul {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 20px;
line-height: 28px;
}
.premeta {
font-size: 12px;
line-height: 24px;
padding-top: 8px;
}
.preparagraf {
font-size: 18px;
letter-spacing: 0.5px;
line-height: 29px;
padding: 16px 0 20px 0;
}
.metacon {
position: relative;
bottom: -1px;
padding-right: 2px;
}
.thumbfront {
position: absolute;
left: 0;
top: 48px;
}
.thumbfront img {
display: block;
width: 268px;
height: 228px;
border: 4px solid #FFF;
transition: all 400ms ease-in-out;
border-radius: 4px;
}
.thumbfront img:hover {
border: 4px solid #F7931A;
}
.withtumb {
padding-left: 296px;
}
.jtnavi { padding: 64px 0 48px 0; }
.wp-pagenavi span, .wp-pagenavi a { background: #FFF; }
.wp-pagenavi .pages, .wp-pagenavi .page, .wp-pagenavi .current, .wp-pagenavi a {
padding: 10px 16px;
border: 1px solid #4D4D4D;
}
.wp-pagenavi span.current { background: #4D4D4D; color: #FFF; text-decoration: none; }
.wp-pagenavi a:hover { background: #F7931A; color: #FFF; text-decoration: none; }
.archivetop {
width: 90%;
margin: 0 auto;
padding: 36px 0 0 0;
max-width: 1100px;
}
.arctitle {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 44px;
text-transform: uppercase;
color: #F7931A;
}
.titlecon {
position: relative;
top: 2px;
padding-right: 4px;
}
.thumbsingle {
float: left;
padding-right: 24px;
}
.titlewithimg {
float: left;
}
.author_left {
float: left;
padding: 0 24px 0 0;
}
.meta_penulis {
font-size: 14px;
line-height: 20px;
}
.author_right h3 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 22px;
line-height: 30px;
}
.author_right h3 a {
transition: all 400ms ease-in-out;
}
.author_right h3 a:hover {
color: #F7931A;
}
.despen {
font-size: 16px;
line-height: 22px;
}
.wrap_theauthor {
padding: 32px 0;
border-bottom: 1px solid #4D4D4D;
}
.prebloksingle {
padding: 56px 0 32px 0;
border-bottom: none;
}
.author_left img {
border: 2px solid #FFF;
transition: all 400ms ease-in-out;
}
.author_left img:hover {
border: 2px solid #F7931A;
}
.sharebutton {
padding: 24px 0;
border-bottom: 1px solid #4D4D4D;
} .thecontent {
padding-top: 64px;
padding-bottom: 32px;
}
.thecontent p {
font-size: 18px;
line-height: 29px;
padding: 15px 0;
letter-spacing: 0.5px;
}
.thecontent h3 {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 28px;
line-height: 36px;
padding: 24px 0 4px 0;
}
.thecontent a {
text-decoration: none;
color: #F7931A;
}
.thecontent a:hover {
text-decoration: underline;
color: #F7931A;
}
.thecontent ol, .thecontent ul { margin: 0 0 16px 48px; }
.thecontent ul li { list-style: disc; line-height: 29px; letter-spacing: 0.5px; }
.thecontent ol li { list-style: decimal; line-height: 29px; letter-spacing: 0.5px; }
.thecontent img {
max-width: 98%;
height: auto;
}
.thecontent img.alignleft { float: left; margin: 10px 32px 10px 0;; }
.thecontent img.alignright { float: right; margin: 10px 0 10px 32px; }
.thecontent img.aligncenter { display: block; margin: 0 auto 32px auto; }
.thecontent blockquote {
border-left: 8px solid #F7931A;
padding: 16px;
margin: 14px 0 14px 48px;
font-style: italic;
background-color: #f5f5f5;
}
.thecontent blockquote p {
padding: 0;
font-size: 20px;
line-height: 28px;
}
.wsp-posts-title, .wsp-pages-title, .wsp-archives-title, .wsp-authors-title {
font-size: 24px;
line-height: 30px;
padding: 16px 0 8px 0;
font-family: 'Roboto', sans-serif;
font-weight: 900;
}
.thecontent .wp-caption-text {
font-size: 14px;
line-height: 20px;
padding: 8px 0 14px 0;
font-style: italic;
color: #6d6d6d;
}
.wp-caption {
max-width: 98%;
padding: 20px 0 10px 0;
}
.thecontent table {
border-top: 1px solid #888888;
margin: 24px 0;
max-width: 98% !important;
}
.thecontent tr td {
font-size: 18px;
line-height: 29px;
padding: 18px 16px;
border-bottom: 1px solid #888888;
width: auto !important;
}
.headerartikel p, .footartikel p {
font-size: 14px;
line-height: 20px;
padding: 8px 0;
letter-spacing: 0;
}
.headerartikel ol li, .headerartikel ul li,
.footartikel ol li, .footartikel ul li {
font-size: 14px;
line-height: 20px;
}
.headerartikel {
margin-bottom: 24px;
}
.footartikel {
margin-top: 24px;
}
.borderhead {
height: 1px;
background: #6d6d6d;
width: 50%;
} .comment-reply-title {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 28px;
line-height: 36px;
}
.comments-area {
margin-top: 40px;
}
.comments-area h2.comments-title {
font-size: 25px;
margin-bottom: 20px;
}
.comment-list {
margin: 0;
padding: 0;
list-style: none;
}
.comment-meta {
margin-bottom: 32px;
padding-left: 86px;
line-height: 20px;
font-size: 14px;
padding-top: 0;
}
.comment-meta a {
color: #333;
}
.comment-author.vcard {
position: relative;
padding: 4px 0 4px 86px;
}
.comment-author.vcard img {
position: absolute;
left: 0;
top: 5px;
width: 64px;
height: 64px;
}
.comment-metadata {
margin-left: 86px;
}
.comments-area table {
border-left: 1px solid #dddd;
border-bottom: 1px solid #ddd;
margin-bottom: 20px;
}
.comments-area table td,
.comments-area table th {
border-right: 1px solid #ddd;
border-top: 1px solid #ddd;
padding: 10px;
}
.comments-area th {
background: #278cc1;
color: #fff;
}
.comments-area dd {
margin-bottom: 15px;
}
.comments-area .comments-content ul,
.comments-area .comments-content ol {
padding-left: 15px;
}
.comments-area .comment-content ul,
.comments-area .comment-content ol {
padding-left: 15px;
}
.comment-reply-link {
background: #FFF;
display: inline-block;
padding: 5px 20px;
color: #4D4D4D;
border: 1px solid #4D4D4D;
}
.comment-reply-link:hover {
background: #F7931A;
display: inline-block;
padding: 5px 20px;
color: #fff;
text-decoration: none;
}
.comment-list li.comment {
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
padding-bottom: 30px;
}
.comment-metadata {
font-size: 80%;
}
.comment-reply-link {
margin-top: 10px;
}
.comment-list li ol.children {
padding-left: 50px;
margin: 0;
list-style: none;
margin-top: 25px;
}
.comment-list li ol.children ol.children {
padding-left: 20px;
}
.comment-list li.comment:last-child {
border-bottom: 0px solid;
padding-bottom: 0;
margin-bottom: 0;
}
.comment-respond {
margin-top: 50px;
}
.comment-notes {
font-size: 12px;
line-height: 16px;
margin-bottom: 24px;
}
.comment-form label {
display: block;
margin-bottom: 10px;
}
.comment-form textarea {
width: 80%;
}
.comment-form input {
width: 50%;
}
.comment-form input[type=submit] {
width: auto;
}
.comment-form-cookies-consent {
display: none;
}
.komentar .error {
font-size: 14px;
line-height: 20px;
}
.komentar {
padding: 48px 0 0 0;
}
.comment-form-comment, .comment-form-author, 
.comment-form-email, .comment-form-url {
padding-bottom: 20px;
}
h3#comments {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 29px;
line-height: 36px;
padding-bottom: 16px;
}
.comment-author {
line-height: 24px;
}
.comment-author .fn {
font-weight: 700;
}
.comment-awaiting-moderation {
font-size: 12px;
line-height: 16px;
padding: 8px 0 8px 86px;
}
.comment-body {
line-height: 24px;
}
.comment-author .says {
display: none;
}
li.comment {
padding: 16px 0;
border-bottom: 1px solid #4D4D4D;
}
#cancel-comment-reply-link {
padding-left: 16px;
}
li.comment ul li {
padding-left: 108px;
}
.logged-in-as {
font-size: 12px;
line-height: 16px;
padding: 8px 0;
}
.wpcf7-response-output {
padding: 16px !important;
background: #F7931A;
color: #FFF;
}
.wpcf7-textarea {
width: 80%;
height: 100px;
}
.koltamb {
font-size: 14px;
line-height: 20px;
padding: 16px 0;
position: relative;
}
.koltamb p {
padding-top: 6px;
}
.copydiv {
position: absolute;
width: 90px;
height: auto;
text-align: right;
top: 16px;
right: 0;
}
.cc_img {
width: auto;
height: 31px;
}
.srntjm {
font-style: italic;
font-size: 13px;
} .bgmenu {
width: 100vw;
height: 100vh;
background: #4D4D4D;
opacity: 0;
position: fixed;
top: 0;
left: 0;
z-index: -100;
transition: all 400ms ease-in-out;
}
.bgmenu.show {
opacity: 0.5;
z-index: 100;
}
.wrapmenu {
position: fixed;
width: 640px;
height: 100vh;
background: #FFF;
z-index: 110;
overflow-y: scroll;
left: -1000px;
opacity: 0;
top: 0;
transition: all 400ms ease-in-out;
}
.wrapmenu.show {
left: 0;
opacity: 1;
}
.menuspace {
padding-bottom: 64px;
}
.menutop {
height: 128px;
width: 100%;
background: #4D4D4D;
position: relative;
}
.closeicon {
position: absolute;
display: block;
right: 16px;
top: 16px;
width: 16px;
height: 16px;
opacity: 0.5;
transition: all 400ms ease-in-out;
cursor: pointer;
}
.closeicon:hover {
opacity: 1;
}
.logomenu {
display: block;
float: left;
width: auto;
height: 96px;
padding: 14px 24px 0 24px;
}
.titlemenuright {
float: left;
padding: 28px 0 0 0;
}
.titlemenu {
color: #FFF;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 36px;
line-height: 48px;
}
.titlemenu a, .titlemob a {
color: #FFF;
}
.titlemenu a:hover, .titlemob a:hover {
color:#F7931A;
text-decoration: none;
}
.descmenu {
color: #FFF;
font-size: 14px;
line-height: 20px;
}
.menukatwrap {
padding: 64px 24px 0 24px;
}
.menuleft {
width: 49%;
}
.menuright {
width: 49%;
}
.submenutitle {
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 24px;
line-height: 32px;
color: #F7931A;
text-transform: uppercase;
padding: 0 0 16px 40px;
background-repeat: no-repeat;
background-position: 0 0;
background-size: 28px 28px;
}
.menukategori {
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/title-category.png);
}
.menupenulis {
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/title-user.png);
}
.menunggulan {
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/title-star.png);
}
.menuleft ul {
padding-right: 28px;
}
.menukatwrap li {
font-size: 16px;
line-height: 20px;
padding: 8px 0 8px 4px;
border-bottom: 1px solid #4D4D4D;
background-color: #FFF;
transition: all 400ms ease-in-out;
list-style: disc;
margin: 0 0 0 16px;
}
.menukatwrap li:hover {
background-color: #F7931A;
}
.menukatwrap li a {
display: block;
}
.menukatwrap li a:hover {
text-decoration: none;
}
.postfav {
padding: 16px 0 16px 16px;
border-bottom: 1px solid #4D4D4D;
}
.postfav h4 a {
color: #4D4D4D;
text-decoration: none;
font-size: 16px;
line-height: 22px;
font-weight: 700;
transition: all 400ms ease-in-out;
text-transform: uppercase;
}
.postfav h4 a:hover {
text-decoration: underline;
color: #F7931A;
}
.postfav p {
font-size: 14px;
line-height: 20px;
}
.sosmed {
padding: 64px 24px 0 24px;
}
.sosmed a:hover {
text-decoration: none;
}
.sosicon {
width: 48px;
height: 48px;
padding-right: 12px;
opacity: 0.7;
position: relative;
bottom: 0;
transition: all 200ms ease-in-out;
}
.sosicon:hover {
bottom: 2px;
opacity: 1;
}
.menubottom {
padding: 64px 24px 0 24px;
}
.menubottom ul li {
display: inline-block;
font-size: 12px;
line-height: 18px;
padding-right: 8px;
}
.menubottom ul li:first-child {
list-style: none;
}
.menubottom a {
transition: all 400ms ease-in-out;
color: #4D4D4D;
}
.menubottom a:hover {
color: #F7931A;
}
.copyright {
font-size: 12px;
line-height: 20px;
padding-bottom: 4px;
font-weight: 700;
} .topbar {
height: 48px;
background: #4D4D4D;
width: 100%;
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
.logomobile {
float: left;
}
.logomobimg {
display: block;
height: 32px;
width: auto;
float: left;
padding: 8px 0 0 16px;
}
.titlemob {
float: left;
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 24px;
line-height: 32px;
color: #FFF;
padding: 8px 0 0 12px;
}
.menulinkmb {
float: right;
width: 48px;
height: 48px;
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/menu-light.png);
background-size: 32px 32px;
background-repeat: no-repeat;
background-position: center center;
background-color: #4D4D4D;
transition: all 200ms ease-in-out;
cursor: pointer;
}
.menulinkmb:hover {
background-color: #F7931A;
}
.postpage {
padding: 16px 0 48px 0;
}
.post-page-numbers {
padding: 8px 16px;
border: 1px solid #4D4D4D;
transition: all 400ms ease-in-out;
color: #4D4D4D;
}
.post-page-numbers.current {
background-color: #4D4D4D;
color: #FFF;
}
.post-page-numbers:hover {
background-color: #F7931A;
text-decoration: none;
color: #4D4D4D;
} .leftbar {
padding: 0;
}
.leftbar #leftbar {
padding: 64px 0 0 24px;
}
.leftbar h3 {
font-size: 24px;
line-height: 30px;
font-family: 'Roboto', sans-serif;
padding: 0 0 12px 0;
}
.searchbutton {
display: none !important;
}
.searchinput {
background-image: url(//21jt.com/wp-content/themes/21jtcom/images/icon-search.png) !important;
background-size: 20px 20px !important;
background-repeat: no-repeat !important;
background-position: 10px 10px !important;
padding: 8px 8px 8px 40px !important;
width: calc(100% - 84px) !important;
} @media only screen and (max-width : 900px) {
.header {
display: none;
}
.article {
padding: 52px 0 0 0;
width: 100%;
}
.topbar {
display: block;
}
.wpcf7-text {
max-width: 90%;
}
.thecontent img { max-width: 98%; height: auto; }
}
@media only screen and (max-width : 700px) {
.wrapmenu {
width: 95vw;
}
.menuleft, .menuright {
float: none;
width: 98%;
}
.menukatwrap {
padding: 64px 16px 0 16px;
}
.menuright {
padding-top: 64px;
}
.menuleft ul {
padding-right: 0;
}
.thecontent blockquote {
margin: 14px 0 14px 24px;
}
.thecontent p, .thecontent ol li, .thecontent ul li, .preparagraf, .thecontent tr td {
font-size: 16px;
line-height: 22px;
letter-spacing: 0;
}
.headerartikel p, .footartikel p {
font-size: 13px;
line-height: 18px;
padding: 6px 0;
letter-spacing: 0;
}
.headerartikel ol li, .footartikel ul li {
font-size: 13px;
line-height: 18px;
}
.thecontent tr td {
padding: 14px 10px;
font-size: 16px !important;
line-height: 22px !important;
}
.comment-form textarea {
width: 95%;
}
.comment-form input {
width: 80%;
}
.thecontent blockquote p {
font-size: 18px;
line-height: 24px;
letter-spacing: 0;
}
.komentar {
font-size: 16px;
line-height: 20px;
}
input:not([type]), input[type="submit"], input[type="button"], .button {
font-size: 16px;
line-height: 20px;
letter-spacing: 0;
}
li.comment ul li {
padding-left: 48px;
}
.thecontent img { width: 98% !important; height: auto !important; }
.thecontent img.alignleft { float: none; display: block; margin: 0; padding: 0 0 28px 0;
width: 98% !important; height: auto !important; }
.thecontent img.alignright { float: none; display: block; margin: 0; padding: 0 0 28px 0;
width: 98% !important; height: auto !important; }
.thecontent img.aligncenter { display: block; margin: 0 auto; padding: 0 0 28px 0;
width: 98% !important; height: auto !important; }
.wp-caption img {
width: 98% !important; height: auto !important;
}
.thecontent .imgcontactsos { width: 36px !important; height: auto !important;}
.thecontent .emoji { width: 16px !important; height: auto !important;}
.searchinput {
width: calc(100% - 73px) !important;
}
.copydiv {
position: relative;
float: none;
width: 90px;
height: auto;
text-align: right;
top: 0;
right: 0;
padding: 16px 0 0 0;
}
.srntjm {
display: block;
}
}