article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

[hidden],
template {
    display: none
}

html {
    background: #fff;
    color: #000;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}

html,
button,
input,
select,
textarea {
    font-family: sans-serif
}

body {
    margin: 0
}

a {
    background: transparent
}

a:focus {
    outline: thin dotted
}

a:hover,
a:active {
    outline: 0
}

h1 {
    font-size: 2em;
    margin: 0.67em 0
}

h2 {
    font-size: 1.5em;
    margin: 0.83em 0
}

h3 {
    font-size: 1.17em;
    margin: 1em 0
}

h4 {
    font-size: 1em;
    margin: 1.33em 0
}

h5 {
    font-size: .83em;
    margin: 1.67em 0
}

h6 {
    font-size: .75em;
    margin: 2.33em 0
}

abbr[title] {
    border-bottom: 1px dotted
}

b,
strong {
    font-weight: bold
}

dfn {
    font-style: italic
}

mark {
    background: #ff0;
    color: #000
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019"
}

q:before,
q:after {
    content: '';
    content: none
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

img {
    border: 0
}

svg:not(:root) {
    overflow: hidden
}

figure {
    margin: 0
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em
}

legend {
    border: 0;
    padding: 0;
    white-space: normal
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
    vertical-align: baseline
}

button,
input {
    line-height: normal
}

button,
select {
    text-transform: none
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer
}

button[disabled],
input[disabled] {
    cursor: default
}

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto;
    vertical-align: top
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    line-height: normal;
    margin: 4px 0 0
}

.circle,
.cls_btn,
header .menu.mob .close-btn,
#search .close-btn,
header .m-menu,
.topbar .btn-back span,
.topbar .select .caret,
.redaksi .box_cover,
.paging a {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%
}

.main-focus .down-arrow {
    position: relative;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%)
}

.main-focus .box_text .box_text_inner,
.list-article .box_text .box_text_inner,
.list-article .box_text .title {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%)
}

.icon_inside,
header .menu.mob ul,
header.stuck .menu.mob ul,
.more_btn a,
.more_btn a span {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    -o-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0)
}

.col_mob_12,
.col_mob_11,
.col_mob_10,
.col_mob_9,
.col_mob_8,
.col_mob_7,
.col_mob_6,
.col_mob_5,
.col_mob_4,
.col_mob_3,
.col_mob_2,
.col_mob_1 {
    float: left
}

@media (min-width: 576px) {
    .col_mol_12,
    .col_mol_11,
    .col_mol_10,
    .col_mol_9,
    .col_mol_8,
    .col_mol_7,
    .col_mol_6,
    .col_mol_5,
    .col_mol_4,
    .col_mol_3,
    .col_mol_2,
    .col_mol_1 {
        float: left
    }
}

@media (min-width: 768px) {
    .col_tab_12,
    .col_tab_11,
    .col_tab_10,
    .col_tab_9,
    .col_tab_8,
    .col_tab_7,
    .col_tab_6,
    .col_tab_5,
    .col_tab_4,
    .col_tab_3,
    .col_tab_2,
    .col_tab_1 {
        float: left
    }
}

@media (min-width: 992px) {
    .col_12,
    .col_11,
    .col_10,
    .col_9,
    .col_8,
    .col_7,
    .col_6,
    .col_5,
    .col_4,
    .col_3,
    .col_2,
    .col_1 {
        float: left
    }
}

.col_mob_12,
.col_mob_11,
.col_mob_10,
.col_mob_9,
.col_mob_8,
.col_mob_7,
.col_mob_6,
.col_mob_5,
.col_mob_4,
.col_mob_3,
.col_mob_2,
.col_mob_1,
.col_12,
.col_tab_12,
.col_mol_12,
.col_mob12,
.col_11,
.col_tab_11,
.col_mol_11,
.col_mob11,
.col_10,
.col_tab_10,
.col_mol_10,
.col_mob10,
.col_9,
.col_tab_9,
.col_mol_9,
.col_mob9,
.col_8,
.col_tab_8,
.col_mol_8,
.col_mob8,
.col_7,
.col_tab_7,
.col_mol_7,
.col_mob7,
.col_6,
.col_tab_6,
.col_mol_6,
.col_mob6,
.col_5,
.col_tab_5,
.col_mol_5,
.col_mob5,
.col_4,
.col_tab_4,
.col_mol_4,
.col_mob4,
.col_3,
.col_tab_3,
.col_mol_3,
.col_mob3,
.col_2,
.col_tab_2,
.col_mol_2,
.col_mob2,
.col_1,
.col_tab_1,
.col_mol_1,
.col_mob1 {
    font-size: 14px;
    display: block;
    padding-left: 0;
    padding-right: 0
}

@media (min-width: 576px) {
    .inline .col_12,
    .inline .col_tab_12,
    .inline .col_mol_12,
    .inline .col_mob12,
    .inline .col_11,
    .inline .col_tab_11,
    .inline .col_mol_11,
    .inline .col_mob11,
    .inline .col_10,
    .inline .col_tab_10,
    .inline .col_mol_10,
    .inline .col_mob10,
    .inline .col_9,
    .inline .col_tab_9,
    .inline .col_mol_9,
    .inline .col_mob9,
    .inline .col_8,
    .inline .col_tab_8,
    .inline .col_mol_8,
    .inline .col_mob8,
    .inline .col_7,
    .inline .col_tab_7,
    .inline .col_mol_7,
    .inline .col_mob7,
    .inline .col_6,
    .inline .col_tab_6,
    .inline .col_mol_6,
    .inline .col_mob6,
    .inline .col_5,
    .inline .col_tab_5,
    .inline .col_mol_5,
    .inline .col_mob5,
    .inline .col_4,
    .inline .col_tab_4,
    .inline .col_mol_4,
    .inline .col_mob4,
    .inline .col_3,
    .inline .col_tab_3,
    .inline .col_mol_3,
    .inline .col_mob3,
    .inline .col_2,
    .inline .col_tab_2,
    .inline .col_mol_2,
    .inline .col_mob2,
    .inline .col_1,
    .inline .col_tab_1,
    .inline .col_mol_1,
    .inline .col_mob1 {
        display: inline-block;
        float: none;
        vertical-align: top
    }
}

.gap .col_12,
.gap .col_tab_12,
.gap .col_mol_12,
.gap .col_mob12,
.gap .col_11,
.gap .col_tab_11,
.gap .col_mol_11,
.gap .col_mob11,
.gap .col_10,
.gap .col_tab_10,
.gap .col_mol_10,
.gap .col_mob10,
.gap .col_9,
.gap .col_tab_9,
.gap .col_mol_9,
.gap .col_mob9,
.gap .col_8,
.gap .col_tab_8,
.gap .col_mol_8,
.gap .col_mob8,
.gap .col_7,
.gap .col_tab_7,
.gap .col_mol_7,
.gap .col_mob7,
.gap .col_6,
.gap .col_tab_6,
.gap .col_mol_6,
.gap .col_mob6,
.gap .col_5,
.gap .col_tab_5,
.gap .col_mol_5,
.gap .col_mob5,
.gap .col_4,
.gap .col_tab_4,
.gap .col_mol_4,
.gap .col_mob4,
.gap .col_3,
.gap .col_tab_3,
.gap .col_mol_3,
.gap .col_mob3,
.gap .col_2,
.gap .col_tab_2,
.gap .col_mol_2,
.gap .col_mob2,
.gap .col_1,
.gap .col_tab_1,
.gap .col_mol_1,
.gap .col_mob1 {
    padding-left: 10px;
    padding-right: 10px
}

@media (min-width: 576px) {
    .gap .col_12,
    .gap .col_tab_12,
    .gap .col_mol_12,
    .gap .col_mob12,
    .gap .col_11,
    .gap .col_tab_11,
    .gap .col_mol_11,
    .gap .col_mob11,
    .gap .col_10,
    .gap .col_tab_10,
    .gap .col_mol_10,
    .gap .col_mob10,
    .gap .col_9,
    .gap .col_tab_9,
    .gap .col_mol_9,
    .gap .col_mob9,
    .gap .col_8,
    .gap .col_tab_8,
    .gap .col_mol_8,
    .gap .col_mob8,
    .gap .col_7,
    .gap .col_tab_7,
    .gap .col_mol_7,
    .gap .col_mob7,
    .gap .col_6,
    .gap .col_tab_6,
    .gap .col_mol_6,
    .gap .col_mob6,
    .gap .col_5,
    .gap .col_tab_5,
    .gap .col_mol_5,
    .gap .col_mob5,
    .gap .col_4,
    .gap .col_tab_4,
    .gap .col_mol_4,
    .gap .col_mob4,
    .gap .col_3,
    .gap .col_tab_3,
    .gap .col_mol_3,
    .gap .col_mob3,
    .gap .col_2,
    .gap .col_tab_2,
    .gap .col_mol_2,
    .gap .col_mob2,
    .gap .col_1,
    .gap .col_tab_1,
    .gap .col_mol_1,
    .gap .col_mob1 {
        padding-left: 20px;
        padding-right: 20px
    }
}

a:hover,
footer a:hover,
.btn:hover,
header .menu li a:hover,
.box .title_box a:hover,
a:hover .box_text.dark h2,
.text_inside .date,
.icon_inside {
    opacity: .75;
    filter: alpha(opacity=75)
}

.btn_nofill:hover,
.btn_group.btn_nofill a:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.text_inside .box_text {
    background: #000;
    background: -moz-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 60%);
    background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 60%);
    background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 60%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='$start_color', endColorstr='$end_color', GradientType=1)
}

.box .title_box {
    font-family: montserrat
}

.btn,
header .menu li a {
    font-family: montserrat
}

.main-focus .box_text .box_text_inner .category,
.list-article .box_text .title .category,
.list_grid article .box_text .box_text_inner .category,
.list_grid article .box_text .box_text_inner .more {
    font-family: montserrat;
    font-weight: bold
}

.topbar,
.topbar h3.page-title,
.redaksi .info .title,
#search .search-wrap,
#search .s-result,
.paging {
    font-family: eczar-r
}

a,
.btn,
header .menu li a,
.box_text,
.box_text h2,
.box_text h3,
.box_text h4,
.sticky,
.caret:before,
.caret:after,
.main-focus .box_text .box_text_inner h1,
.list-article .box_cover,
.list_grid article .ratiobox_content,
.list_grid article .box_text .box_text_inner h3,
.redaksi .box_cover .ratiobox_content {
    -webkit-transition: all 350ms linear 0s;
    -moz-transition: all 350ms linear 0s;
    -ms-transition: all 350ms linear 0s;
    -o-transition: all 350ms linear 0s;
    transition: all 350ms linear 0s
}

header,
header #logo img,
#search .search-wrap label {
    -webkit-transition: all 150ms linear 0s;
    -moz-transition: all 150ms linear 0s;
    -ms-transition: all 150ms linear 0s;
    -o-transition: all 150ms linear 0s;
    transition: all 150ms linear 0s
}

#search {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -ms-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in
}

body {
    margin: 0;
    padding-top: 46px !important;
    line-height: 1.25;
    font-size: 14px !important;
    font-family: Arial, Helvetica, Tahoma;
    background: #e7e7e7
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table
}

.clearfix:after {
    clear: both
}

a {
    text-decoration: none;
    color: #444
}

a:hover {
    color: #777
}

hr {
    border-style: solid none none;
    border-color: #d4d4d4;
    margin: 15px 0
}

hr.blue {
    border-width: 4px;
    border-color: #555
}

p {
    margin-top: 0;
    margin-bottom: 20px
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    line-height: 1.25;
    margin: 0
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 12px
}

header,
footer,
table {
    display: table;
    width: 100%
}

.ratiobox_content iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

header,
footer,
.table {
    display: table;
    width: 100%
}

ol,
ul {
    padding: 0 0 0 25px;
    margin-top: 14px;
    margin-bottom: 14px;
    margin-bottom: 14px
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-top: 7px;
    margin-bottom: 0
}

ol li,
ul li {
    padding: 5px 0
}

img {
    vertical-align: middle
}

.full_width img {
    width: 100%
}

footer {
    color: #cdcdcd
}

footer .footer {
    position: relative;
    z-index: 2
}

footer a {
    color: #fff
}

footer a:hover {
    color: #fff
}

footer>.container {
    padding: 20px;
    background: #777
}

footer .foot1 {
    border-bottom: 1px dotted #939191;
    margin: 0 0 10px;
    padding: 0 0 10px
}

footer .foot2 div {
    font-size: 12px;
    margin-top: 7px
}

footer .share_bottom {
    display: block
}

footer .share_bottom a {
    display: inline-block
}

footer .share_bottom a img {
    width: 35px
}

.grid_row {
    font-size: 0;
    position: relative;
    overflow: hidden
}

.grid_row.gap {
    margin: 0 -10px
}

@media (min-width: 576px) {
    .grid_row.gap {
        margin: 0 -20px
    }
}

.grid_row.gap>div,
.grid_row.gap>article {
    margin-bottom: 40px
}

.col_mob_12 {
    width: 100%
}

.col_mob_11 {
    width: 91.66667%
}

.col_mob_10 {
    width: 83.33333%
}

.col_mob_9 {
    width: 75%
}

.col_mob_8 {
    width: 66.66667%
}

.col_mob_7 {
    width: 58.33333%
}

.col_mob_6 {
    width: 50%
}

.col_mob_5 {
    width: 41.66667%
}

.col_mob_4 {
    width: 33.33333%
}

.col_mob_3 {
    width: 25%
}

.col_mob_2 {
    width: 16.66667%
}

.col_mob_1 {
    width: 8.33333%
}

@media (min-width: 576px) {
    .col_mol_12 {
        width: 100%
    }
    .col_mol_11 {
        width: 91.66667%
    }
    .col_mol_10 {
        width: 83.33333%
    }
    .col_mol_9 {
        width: 75%
    }
    .col_mol_8 {
        width: 66.66667%
    }
    .col_mol_7 {
        width: 58.33333%
    }
    .col_mol_6 {
        width: 50%
    }
    .col_mol_5 {
        width: 41.66667%
    }
    .col_mol_4 {
        width: 33.33333%
    }
    .col_mol_3 {
        width: 25%
    }
    .col_mol_2 {
        width: 16.66667%
    }
    .col_mol_1 {
        width: 8.33333%
    }
}

@media (min-width: 768px) {
    .col_tab_12 {
        width: 100%
    }
    .col_tab_11 {
        width: 91.66667%
    }
    .col_tab_10 {
        width: 83.33333%
    }
    .col_tab_9 {
        width: 75%
    }
    .col_tab_8 {
        width: 66.66667%
    }
    .col_tab_7 {
        width: 58.33333%
    }
    .col_tab_6 {
        width: 50%
    }
    .col_tab_5 {
        width: 41.66667%
    }
    .col_tab_4 {
        width: 33.33333%
    }
    .col_tab_3 {
        width: 25%
    }
    .col_tab_2 {
        width: 16.66667%
    }
    .col_tab_1 {
        width: 8.33333%
    }
}

@media (min-width: 992px) {
    .col_12 {
        width: 100%
    }
    .col_11 {
        width: 91.66667%
    }
    .col_10 {
        width: 83.33333%
    }
    .col_9 {
        width: 75%
    }
    .col_8 {
        width: 66.66667%
    }
    .col_7 {
        width: 58.33333%
    }
    .col_6 {
        width: 50%
    }
    .col_5 {
        width: 41.66667%
    }
    .col_4 {
        width: 33.33333%
    }
    .col_3 {
        width: 25%
    }
    .col_2 {
        width: 16.66667%
    }
    .col_1 {
        width: 8.33333%
    }
}

.btn,
header .menu li a {
    font-size: 15px;
    line-height: 1.35;
    display: inline-block;
    padding: 5px 15px;
    text-align: center;
    cursor: pointer;
    vertical-align: top;
    color: #fff;
    background: #777;
    border: 1px solid #5e5e5e
}

.btn:hover,
header .menu li a:hover {
    color: #fff
}

.btn_blue {
    background: #007B99;
    color: #fff;
    border: 1px solid #005266
}

.btn_red {
    background: #D50505;
    color: #fff;
    border: 1px solid #a30404
}

.btn_orange,
header .menu li.login a {
    background: #F7941F;
    color: #fff;
    border: 1px solid #db7a08
}

.btn_green {
    background: #0D9F67;
    color: #fff;
    border: 1px solid #097048
}

.btn_grey {
    background: #939191;
    color: #fff;
    border: 1px solid #7a7777
}

.btn_small {
    font-size: 10px;
    padding: 5px 10px
}

.btn_large {
    font-size: 18px;
    padding: 5px 20px
}

.btn_nofill,
.btn_group.btn_nofill a {
    border: 2px solid #777;
    background: none;
    color: #777;
    padding-top: 4px;
    padding-bottom: 4px
}

.btn_nofill:hover,
.btn_group.btn_nofill a:hover {
    background: #777
}

.btn_group {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: inherit
}

.btn_group a {
    padding: 5px 15px;
    margin: 0 -1px 0 0;
    float: left;
    position: relative;
    white-space: nowrap;
    border-width: 1px
}

@media (max-width: 480px) {
    .btn_group a span {
        width: 50px;
        height: 35px;
        font-size: 12px;
        white-space: normal;
        display: table-cell;
        vertical-align: middle
    }
}

.btn_group_justified a {
    float: none;
    width: 1%;
    display: table-cell
}

.container {
    margin: 0 auto;
    padding: 0 10px;
    width: 100%
}

.container:before,
.container:after {
    content: " ";
    display: table
}

@media (min-width: 576px) {
    .container {
        padding: 0;
        width: 540px
    }
}

@media (min-width: 768px) {
    .container {
        width: 750px
    }
}

@media (min-width: 992px) {
    .container {
        width: 960px
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1100px
    }
}

#content {
    position: relative;
    margin: 0 0 10px
}

.box {
    position: relative;
    display: inline-block;
    width: 100%;
    background: #fff;
    border: 1px solid #cdcdcd
}

.box .title_box {
    background: #777;
    color: #fff;
    padding: 8px 10px 8px 15px;
    position: relative;
    text-transform: uppercase;
    max-height: 50px;
    z-index: 4;
    font-size: 18px
}

.box .title_box a {
    color: #fff;
    height: 100%
}

.title_page {
    padding: 0 0 10px;
    color: #777;
    font-size: 22px;
    font-weight: bold
}

.title_page.fill {
    background: #555;
    color: #fff;
    padding: 10px 15px;
    font-size: 16px
}

.box_text {
    display: block
}

.grid_row .box_text {
    margin: 10px 0 0
}

.text_inside .box_text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 25% 15px 15px;
    margin: 0;
    z-index: 2
}

.box_text h2,
.box_text h3,
.box_text h4 {
    font-weight: bold
}

.box_text.dark {
    background: #545454
}

.box_text.dark h2 {
    color: #fff
}

.text_inside {
    position: relative;
    background: #777
}

.text_inside a {
    display: block;
    position: relative;
    color: #fff !important
}

.text_inside a:hover {
    opacity: .85;
    filter: alpha(opacity=85)
}

.text_inside .date {
    color: #fff
}

.box_img {
    width: 140px;
    float: left
}

.ratiobox.ratio_16_9:after {
    padding-top: 56.25%
}

.ratiobox.ratio_1_1:after {
    padding-top: 100%
}

.ratiobox.ratio_4_3:after {
    padding-top: 75%
}

.ratiobox.ratio_3_4:after {
    padding-top: 133%
}

.ratiobox.ratio_16_1:after {
    padding-top: 6.25%
}

.ratiobox.ratio_16_2:after {
    padding-top: 12.5%
}

.ratiobox.ratio_9_16:after {
    padding-top: 178%
}

.ratiobox {
    display: block;
    position: relative
}

.ratiobox:after {
    content: "";
    display: block;
    padding-top: 100%;
    overflow: hidden
}

.ratiobox_content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #000
}

.ratiobox_content img {
    height: 100%;
    max-width: 100%
}

.pd0 {
    padding: 0px
}

.pr0 {
    padding-right: 0px
}

.pl0 {
    padding-left: 0px
}

.pt0 {
    padding-top: 0px
}

.pb0 {
    padding-bottom: 0px
}

.mb0 {
    margin-bottom: 0px
}

.mr0 {
    margin-right: 0px
}

.ml0 {
    margin-left: 0px
}

.mt0 {
    margin-top: 0px
}

.m0 {
    margin: 0px
}

.pd5 {
    padding: 5px
}

.pr5 {
    padding-right: 5px
}

.pl5 {
    padding-left: 5px
}

.pt5 {
    padding-top: 5px
}

.pb5 {
    padding-bottom: 5px
}

.mb5 {
    margin-bottom: 5px
}

.mr5 {
    margin-right: 5px
}

.ml5 {
    margin-left: 5px
}

.mt5 {
    margin-top: 5px
}

.m5 {
    margin: 5px
}

.pd10 {
    padding: 10px
}

.pr10 {
    padding-right: 10px
}

.pl10 {
    padding-left: 10px
}

.pt10 {
    padding-top: 10px
}

.pb10 {
    padding-bottom: 10px
}

.mb10 {
    margin-bottom: 10px
}

.mr10 {
    margin-right: 10px
}

.ml10 {
    margin-left: 10px
}

.mt10 {
    margin-top: 10px
}

.m10 {
    margin: 10px
}

.pd15 {
    padding: 15px
}

.pr15 {
    padding-right: 15px
}

.pl15 {
    padding-left: 15px
}

.pt15 {
    padding-top: 15px
}

.pb15 {
    padding-bottom: 15px
}

.mb15 {
    margin-bottom: 15px
}

.mr15 {
    margin-right: 15px
}

.ml15 {
    margin-left: 15px
}

.mt15 {
    margin-top: 15px
}

.m15 {
    margin: 15px
}

.pd20 {
    padding: 20px
}

.pr20 {
    padding-right: 20px
}

.pl20 {
    padding-left: 20px
}

.pt20 {
    padding-top: 20px
}

.pb20 {
    padding-bottom: 20px
}

.mb20 {
    margin-bottom: 20px
}

.mr20 {
    margin-right: 20px
}

.ml20 {
    margin-left: 20px
}

.mt20 {
    margin-top: 20px
}

.m20 {
    margin: 20px
}

.pd50 {
    padding: 50px
}

.pr50 {
    padding-right: 50px
}

.pl50 {
    padding-left: 50px
}

.pt50 {
    padding-top: 50px
}

.pb50 {
    padding-bottom: 50px
}

.mb50 {
    margin-bottom: 50px
}

.mr50 {
    margin-right: 50px
}

.ml50 {
    margin-left: 50px
}

.mt50 {
    margin-top: 50px
}

.m50 {
    margin: 50px
}

.pd136 {
    padding: 136px
}

.pr136 {
    padding-right: 136px
}

.pl136 {
    padding-left: 136px
}

.pt136 {
    padding-top: 136px
}

.pb136 {
    padding-bottom: 136px
}

.mb136 {
    margin-bottom: 136px
}

.mr136 {
    margin-right: 136px
}

.ml136 {
    margin-left: 136px
}

.mt136 {
    margin-top: 136px
}

.m136 {
    margin: 136px
}

.f10 {
    font-size: 10px
}

.f11 {
    font-size: 11px
}

.f12 {
    font-size: 12px
}

.f13 {
    font-size: 13px
}

.f14 {
    font-size: 14px
}

.f15 {
    font-size: 15px
}

.f16 {
    font-size: 16px
}

.f18 {
    font-size: 18px
}

.f20 {
    font-size: 20px
}

.f22 {
    font-size: 22px
}

.f24 {
    font-size: 24px
}

.f26 {
    font-size: 26px
}

.fl {
    float: left !important
}

.fr {
    float: right !important
}

.text_center {
    text-align: center
}

.text_right {
    text-align: right
}

.text_justify {
    text-align: justify
}

.text_nowrap {
    white-space: nowrap
}

.bold,
strong {
    font-weight: bold
}

.block {
    display: block
}

.relative {
    position: relative
}

.paging {
    margin: 10px 0 20px;
    position: relative
}

.paging a {
    display: inline-block;
    padding: 5px 10px;
    border: 1px solid #cdcdcd;
    background: #f2f2f2
}

.paging a.selected,
.paging a:hover {
    background: #fff
}

.icon_inside {
    text-align: center;
    z-index: 2
}

.hide {
    display: none !important
}

.show {
    display: block !important
}

.caret {
    position: relative;
    margin: 0 0 0 20px;
    float: right
}

.caret:before {
    content: '';
    position: absolute;
    top: 6px;
    left: 4px;
    border-top: 6px solid #777;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent
}

.caret:after {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    border-top: 4px solid #eee;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

@font-face {
    font-family: "eczar";
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/eczar-bold.eot");
    src: url("../fonts/eczar-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/eczar-bold.woff2") format("woff2"), url("../fonts/eczar-bold.woff") format("woff"), url("../fonts/eczar-bold.ttf") format("truetype"), url("../fonts/eczar-bold.svg#eczar-bold") format("svg")
}

@font-face {
    font-family: "eczar-r";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/eczar-regular.eot");
    src: url("../fonts/eczar-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/eczar-regular.woff2") format("woff2"), url("../fonts/eczar-regular.woff") format("woff"), url("../fonts/eczar-regular.ttf") format("truetype"), url("../fonts/eczar-regular.svg#eczar-regular") format("svg")
}

@font-face {
    font-family: "montserrat";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/montserrat-regular.eot");
    src: url("../fonts/montserrat-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-regular.woff2") format("woff2"), url("../fonts/montserrat-regular.woff") format("woff"), url("../fonts/montserrat-regular.ttf") format("truetype"), url("../fonts/montserrat-regular.svg#montserrat-regular") format("svg")
}

@font-face {
    font-family: "montserrat-l";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/montserrat-light.eot");
    src: url("../fonts/montserrat-light.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-light.woff2") format("woff2"), url("../fonts/montserrat-light.woff") format("woff"), url("../fonts/montserrat-light.ttf") format("truetype"), url("../fonts/montserrat-light.svg#montserrat-light") format("svg")
}

@font-face {
    font-family: "montserrat";
    font-weight: bold;
    font-style: normal;
    src: url("../fonts/montserrat-bold.eot");
    src: url("../fonts/montserrat-bold.eot?#iefix") format("embedded-opentype"), url("../fonts/montserrat-bold.woff2") format("woff2"), url("../fonts/montserrat-bold.woff") format("woff"), url("../fonts/montserrat-bold.ttf") format("truetype"), url("../fonts/montserrat-bold.svg#montserrat-bold") format("svg")
}

body,
html {
    padding-top: 0 !important;
    background: #0C0C0C;
    -webkit-font-smoothing: antialiased
}

h1,
h2,
h3,
h4 {
    font-family: montserrat;
    font-weight: bold
}

a:hover {
    color: #F7941F !important;
    opacity: 1 !important
}

.cls_btn,
header .menu.mob .close-btn,
#search .close-btn {
    width: 50px;
    height: 50px;
    border: 1px dashed #fff;
    color: #fff;
    display: block;
    text-align: center;
    position: absolute;
    background: url("../images/close-btn.png") no-repeat center;
    right: 5%;
    top: 20px
}

.cls_btn:hover,
header .menu.mob .close-btn:hover,
#search .close-btn:hover {
    background: url("../images/close-btn.png") no-repeat center #F7941F;
    color: #0C0C0C
}

.stack {
    overflow: hidden
}

.category.sponsor {
    color: #F7941F
}

.center {
    text-align: center
}

.blur {
    filter: blur(5px)
}

.zoom {
    -webkit-transform: scale(1) !important;
    -moz-transform: scale(1) !important;
    -ms-transform: scale(1) !important;
    -o-transform: scale(1) !important;
    transform: scale(1) !important;
    opacity: 1 !important
}

@keyframes bounce {
    0%,
    20%,
    50%,
    80%,
    100% {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px);
        -moz-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        -o-transform: translateY(-30px);
        transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px);
        -moz-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        -o-transform: translateY(-15px);
        transform: translateY(-15px)
    }
}

@keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg)
    }
}

.page_content {
    width: 1200px;
    margin: 0 auto 50px
}

@media (max-width: 768px) and (min-width: 320px) {
    .page_content {
        width: 100%;
        overflow: hidden
    }
}

@media (min-width: 992px) {
    .page_content {
        overflow: hidden;
        width: 1000px
    }
}

header {
    padding: 30px;
    position: fixed;
    z-index: 10;
    top: 0;
    background: none
}

@media (max-width: 768px) and (min-width: 320px) {
    header {
        padding: 10px;
        background: rgba(12, 12, 12, 0.8)
    }
}

header #logo {
    float: left
}

@media (max-width: 768px) and (min-width: 320px) {
    header #logo img {
        width: 96px;
        margin-top: 8px
    }
}

header .menu {
    font-family: montserrat;
    float: right;
    font-size: 14px
}

@media (max-width: 768px) and (min-width: 320px) {
    header .menu {
        display: none
    }
}

header .menu li {
    list-style: none;
    float: left;
    margin-left: 30px
}

header .menu li:first-child {
    margin-left: 0
}

header .menu li a {
    border: none;
    color: #fff;
    text-shadow: 1px 1px #777;
    background: none
}

header .menu li a.active {
    color: #F7941F
}

header .menu li.hq a {
    padding: 0
}

header .menu li.hq a span {
    display: none
}

header .menu li.hq a img {
    width: 25px;
    margin-top: 3px
}

header .menu li.login a {
    border: none
}

header .menu li.login a:hover {
    color: #fff !important;
    background: #aa5f06
}

header .menu li.log a:last-child {
    border-left: 1px solid #fff
}

@media (max-width: 768px) and (min-width: 320px) {
    header .menu li.log a:last-child {
        border: none
    }
}

@media (max-width: 768px) and (min-width: 320px) {
    header .menu li.log a {
        font-size: 16px !important
    }
}

header .menu li.s-btn2 {
    display: none
}

header .menu li.s-btn {
    display: block
}

@media (max-width: 768px) and (min-width: 320px) {
    header .menu.mob,
    header.stuck .menu.mob {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #0c0c0c
    }
    header .menu.mob ul,
    header.stuck .menu.mob ul {
        margin: 0;
        padding: 0
    }
    header .menu.mob ul li,
    header.stuck .menu.mob ul li {
        width: 100%;
        margin: 0 0 10px 0;
        text-align: center
    }
    header .menu.mob ul li.hq span {
        display: block
    }
    header .menu.mob ul li.hq img {
        display: none
    }
    header .menu.mob ul li.s-btn2 {
        display: none
    }
    header .menu.mob ul li.s-btn {
        display: block
    }
    header .menu.mob ul li.login a {
        background: none
    }
    header .menu.mob ul li a,
    header.stuck .menu.mob ul li a {
        font-family: eczar;
        font-size: 32px;
        text-shadow: none
    }
}

@media (max-width: 768px) and (min-width: 320px) {
    header .menu.mob .close-btn {
        display: block
    }
}

header .menu .close-btn {
    display: none
}

header.stuck {
    padding: 10px;
    background: rgba(12, 12, 12, 0.8)
}

header.stuck #logo img {
    width: 96px;
    margin-top: 3px
}

@media (max-width: 768px) and (min-width: 320px) {
    header.stuck #logo img {
        width: 96px;
        margin-top: 8px
    }
}

header.stuck .menu {
    position: relative
}

header.stuck .menu ul {
    margin: 0
}

header.stuck .menu ul a {
    text-shadow: none
}

header.stuck .menu ul .s-btn {
    display: none
}

header.stuck .menu ul .s-btn2 {
    display: block;
    background: rgba(169, 169, 169, 0.1);
    text-indent: -9999999px;
    width: 40px;
    height: 40px;
    padding: 0;
    margin: 0
}

header.stuck .menu ul .s-btn2 a {
    display: block;
    background: url("../images/search-small.png") no-repeat center;
    padding: 0;
    width: 40px;
    height: 40px
}

header .m-menu {
    display: none
}

@media (max-width: 768px) and (min-width: 320px) {
    header .m-menu {
        display: block;
        width: 46px;
        height: 46px;
        border: 1px dashed #fff;
        float: right;
        text-align: center;
        padding: 10px
    }
    header .m-menu .bar {
        border-bottom: 3px solid #fff;
        display: block;
        width: 100%;
        margin: 2px 0 5px
    }
}

.main-focus {
    background: #0C0C0C;
    position: relative;
    overflow: hidden
}

.main-focus .box_cover {
    height: 100vh
}

.main-focus .box_text {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    background: rgba(0, 0, 0, 0.4)
}

@media (max-width: 768px) and (min-width: 320px) {
    .main-focus .box_text {
        background: rgba(0, 0, 0, 0.6) !important
    }
}

.main-focus .box_text .box_text_inner {
    text-align: center;
    color: #f6f6f6;
    width: 75%;
    top: 60%;
    margin: auto
}

@media (max-width: 768px) and (min-width: 320px) {
    .main-focus .box_text .box_text_inner {
        padding: 0 10px;
        top: 50%;
        width: 100%
    }
}

.main-focus .box_text .box_text_inner .category {
    display: block;
    margin-bottom: 15px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.25em
}

@media (max-width: 768px) and (min-width: 320px) {
    .main-focus .box_text .box_text_inner .category {
        margin-bottom: 0
    }
}

.main-focus .box_text .box_text_inner .date {
    display: inline-block;
    font-size: 16px;
    border-bottom: 1px solid #fff;
    width: 450px;
    font-family: montserrat-l;
    padding: 15px 0 30px
}

@media (max-width: 768px) and (min-width: 320px) {
    .main-focus .box_text .box_text_inner .date {
        width: auto;
        font-size: 13px;
        padding: 15px
    }
}

.main-focus .box_text .box_text_inner h1 {
    font-size: 49px;
    margin: 20px 0;
    text-shadow: 1px 1px #000000
}

.main-focus .box_text .box_text_inner h1 a {
    color: #fff
}

.main-focus .box_text .box_text_inner h1:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

@media (max-width: 768px) and (min-width: 320px) {
    .main-focus .box_text .box_text_inner h1 {
        font-size: 20px
    }
}

.main-focus .box_text .box_text_inner p {
    font-family: montserrat-l;
    font-size: 20px;
    color: #ededed
}

@media (max-width: 768px) and (min-width: 320px) {
    .main-focus .box_text .box_text_inner p {
        font-size: 15px
    }
}

.main-focus .box_text .box_text_inner .more {
    color: #fff;
    font-family: montserrat;
    font-size: 15px;
    display: inline-block;
    padding: 8px 10px
}

.main-focus .box_text .box_text_inner .more:hover {
    background: #F7941F;
    color: #fff !important
}

.main-focus .down-arrow {
    width: 64px;
    height: 64px;
    background: url("../images/down-arrow-white.png") no-repeat center;
    background-size: 64px 64px;
    margin-left: -32px;
    position: absolute;
    bottom: 30px;
    outline: none;
    -webkit-animation: bounce 2s infinite;
    -moz-animation: bounce 2s infinite;
    -ms-animation: bounce 2s infinite;
    -o-animation: bounce 2s infinite;
    animation: bounce 2s infinite
}

.main-focus .down-arrow:hover {
    cursor: pointer
}

.list-article .ratiobox:after {
    padding: 0
}

.list-article article {
    position: relative;
    overflow: hidden
}

.list-article article:nth-child(1) .box_text:hover {
    background: rgba(0, 9, 33, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(1) .box_text {
        background: rgba(0, 9, 33, 0.74)
    }
}

.list-article article:nth-child(2) .box_text:hover {
    background: rgba(71, 0, 0, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(2) .box_text {
        background: rgba(71, 0, 0, 0.74)
    }
}

.list-article article:nth-child(3) .box_text:hover {
    background: rgba(0, 38, 25, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(3) .box_text {
        background: rgba(0, 38, 25, 0.74)
    }
}

.list-article article:nth-child(4) .box_text:hover {
    background: rgba(43, 30, 0, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(4) .box_text {
        background: rgba(43, 30, 0, 0.74)
    }
}

.list-article article:nth-child(5) .box_text:hover {
    background: rgba(0, 38, 38, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(5) .box_text {
        background: rgba(0, 38, 38, 0.74)
    }
}

.list-article article:nth-child(6) .box_text:hover {
    background: rgba(32, 0, 38, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(6) .box_text {
        background: rgba(32, 0, 38, 0.74)
    }
}

.list-article article:nth-child(7) .box_text:hover {
    background: rgba(38, 20, 0, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(7) .box_text {
        background: rgba(38, 20, 0, 0.74)
    }
}

.list-article article:nth-child(8) .box_text:hover {
    background: rgba(0, 22, 43, 0.74)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article article:nth-child(8) .box_text {
        background: rgba(0, 22, 43, 0.74)
    }
}

.list-article article:hover .box_cover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

.list-article .box_cover {
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    width: 100%;
    height: 450px;
    overflow: hidden
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_cover {
        height: 400px;
        float: left
    }
}

.list-article .box_text {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(12, 12, 12, 0.8);
    color: #939191
}

.list-article .box_text .box_text_inner {
    position: relative
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .box_text_inner {
        padding: 20px 10px;
        opacity: 1 !important
    }
}

.list-article .box_text .title {
    width: 40%;
    float: left;
    padding-right: 3%;
    position: absolute;
    text-align: right
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .title {
        width: 100%;
        padding: 0;
        position: relative;
        top: 0;
        text-align: center;
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
        -webkit-transform: translateX(0);
        -moz-transform: translateX(0);
        -ms-transform: translateX(0);
        -o-transform: translateX(0);
        transform: translateX(0)
    }
}

.list-article .box_text .title .category {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    display: block
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .title .category {
        font-size: 12px
    }
}

.list-article .box_text .title h3 {
    font-size: 32px;
    margin: 15px 0
}

.list-article .box_text .title h3 a {
    color: #fff
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .title h3 {
        font-size: 20px;
        margin: 65px 0 5px
    }
}

.list-article .box_text .desc {
    font-family: montserrat-l;
    width: 52%;
    padding-left: 3%;
    margin-left: 40%;
    float: left;
    position: relative
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .desc {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        position: static
    }
}

.list-article .box_text .desc:before {
    content: '';
    border-left: 1px solid #fff;
    height: 105px;
    position: absolute;
    display: inline-block;
    float: left;
    left: 0
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .desc:before {
        border: 0
    }
}

.list-article .box_text .desc .date {
    font-size: 15px
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .desc .date {
        font-size: 13px;
        border-bottom: 1px solid #fff;
        padding: 10px 0;
        position: absolute;
        top: 40px;
        left: 50%;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%)
    }
}

.list-article .box_text .desc p {
    font-size: 16px;
    margin: 15px 0;
    color: #ededed
}

@media (max-width: 768px) and (min-width: 320px) {
    .list-article .box_text .desc p {
        margin: 10px 0
    }
}

.list-article .box_text .desc a {
    font-family: montserrat;
    font-size: 15px;
    color: #fff;
    display: inline-block;
    padding: 8px 10px
}

.list-article .box_text .desc a:hover {
    background: #F7941F;
    color: #fff !important
}

.list-article .box_text .desc a.more:after {
    content: '\2192';
    margin-left: 8px;
    position: relative;
    top: 1px;
    font-size: 15px
}

.more_btn {
    padding: 120px 0;
    text-align: center;
    font-family: montserrat;
    background: #0C0C0C;
    position: relative
}

.more_btn a {
    color: #fff;
    letter-spacing: 0.15em;
    display: block
}

.more_btn a:before {
    content: '';
    background: url("../images/indeks_btn.png") no-repeat -2px 0;
    width: 126px;
    height: 126px;
    display: block
}

.more_btn a:hover:before {
    -webkit-animation: 8s rotation infinite;
    -moz-animation: 8s rotation infinite;
    -ms-animation: 8s rotation infinite;
    -o-animation: 8s rotation infinite;
    animation: 8s rotation infinite
}

.list_grid {
    text-align: center
}

.list_grid article {
    margin-bottom: 35px
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article {
        float: left;
        margin: 0 !important;
        border-bottom: 1px solid #fff;
        padding-top: 20px;
        padding-bottom: 20px;
        width: 100%
    }
}

.list_grid article a:hover .ratiobox_content {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .wrap_box {
        padding: 0 20px
    }
}

.list_grid article .box_cover {
    overflow: hidden
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_cover {
        width: 80px;
        float: left
    }
}

.list_grid article .box_text {
    margin-top: 20px
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_text {
        margin: 0 0 0 15px;
        float: left;
        width: calc(100% - 95px);
        text-align: left
    }
}

.list_grid article .box_text .box_text_inner {
    color: #939191
}

.list_grid article .box_text .box_text_inner .category {
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.25em
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_text .box_text_inner .category {
        margin: 0
    }
}

.list_grid article .box_text .box_text_inner .date {
    display: inline-block;
    font-size: 15px;
    border-bottom: 1px solid #fff;
    width: 300px;
    font-family: montserrat-l;
    padding: 5px 0 20px
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_text .box_text_inner .date {
        width: auto;
        padding: 5px 0;
        font-size: 13px;
        border: none
    }
}

.list_grid article .box_text .box_text_inner h3 {
    font-size: 20px;
    margin: 20px 0
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_text .box_text_inner h3 {
        font-size: 16px;
        margin: 0
    }
}

.list_grid article .box_text .box_text_inner h3 a {
    color: #fff
}

.list_grid article .box_text .box_text_inner p {
    font-family: montserrat-l;
    font-size: 16px
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_text .box_text_inner p {
        display: none
    }
}

.list_grid article .box_text .box_text_inner .more {
    color: #fff;
    font-size: 15px;
    display: inline-block;
    padding: 8px 10px
}

.list_grid article .box_text .box_text_inner .more:hover {
    background: #F7941F;
    color: #fff !important
}

@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .box_text .box_text_inner .more {
        display: none
    }
}

.topbar {
    text-align: center;
    position: relative;
    margin-top: 120px
}

@media (max-width: 768px) and (min-width: 320px) {
    .topbar {
        text-align: left;
        margin-top: 70px;
        margin-left: 20px;
        margin-right: 20px
    }
}

.topbar h3.page-title {
    color: #fff;
    font-size: 30px;
    display: inline-block
}

.topbar .btn-back {
    color: #fff;
    display: inline-block;
    padding: 10px 0;
    font-size: 16px;
    position: absolute;
    left: 0
}

.topbar .btn-back span {
    background: #fff;
    color: #000;
    padding: 1px 11px;
    margin-right: 10px
}

@media (max-width: 768px) and (min-width: 320px) {
    .topbar .btn-back {
        display: none
    }
}

.topbar .select {
    position: absolute;
    padding-bottom: 10px;
    border-bottom: 1px solid #fff;
    font-size: 16px;
    right: 0;
    top: 20px
}

.topbar .select .caret {
    position: absolute;
    right: 0;
    padding: 6px 10px;
    background: #fff;
    color: #000;
    width: 26px;
    height: 26px
}

.topbar .select .caret:before {
    top: 11px;
    left: 7px;
    border-top: 6px solid #000
}

.topbar .select .caret:after {
    top: 11px;
    left: 9px;
    border-top: 4px solid #fff
}

.topbar .select select {
    position: relative;
    background: none;
    color: #fff;
    border: none;
    width: 110px;
    height: 30px;
    -webkit-appearance: none;
    -moz-appearance: none
}

.topbar .select select option {
    color: #0C0C0C
}

@media (max-width: 768px) and (min-width: 320px) {
    .topbar .pb50 {
        padding-bottom: 20px
    }
}

.wording {
    color: #fff;
    text-align: center;
    line-height: 180%;
    font-size: 20px;
    padding: 20px
}

@media (max-width: 768px) and (min-width: 320px) {
    .redaksi .col_4 {
        padding-top: 30px;
        padding-bottom: 30px;
        border-bottom: 1px solid #fff;
        margin-bottom: 0 !important
    }
}

.redaksi .box_cover {
    width: 220px;
    margin: auto;
    overflow: hidden;
    z-index: 5
}

.redaksi .box_cover:hover .ratiobox_content {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1)
}

.redaksi .box_cover .ratiobox_content {
    overflow: hidden
}

.redaksi .info {
    width: 290px;
    margin: 20px auto 0
}

.redaksi .info .title {
    font-size: 30px;
    color: #fff
}

.redaksi .info a {
    color: #007B99;
    font-size: 16px;
    display: block;
    padding: 5px 0
}

.redaksi .info .jobdesc {
    font-size: 17px;
    color: #939191;
    border-top: 1px solid #939191;
    display: inline-block;
    margin-top: 5px;
    width: 120px;
    padding: 8px 0 0
}

#search {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(12, 12, 12, 0.92);
    opacity: 0;
    z-index: 20;
    overflow-y: scroll;
    overflow-x: hidden;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0)
}

#search .close-btn {
    font-family: montserrat
}

@media (max-width: 768px) and (min-width: 320px) {
    #search .close-btn {
        top: 20px
    }
}

#search .search-wrap {
    width: 600px;
    margin: 50px auto 20px;
    padding: 20px 0;
    position: relative
}

@media (max-width: 768px) and (min-width: 320px) {
    #search .search-wrap {
        width: auto;
        margin: 70px 20px 0
    }
}

#search .search-wrap .inp {
    padding: 5px 45px 5px 0;
    background: none;
    border: none;
    width: 100%;
    border-bottom: 1px solid #fff;
    color: #fff;
    font-size: 36px;
    outline: none
}

#search .search-wrap .inp:focus ~ label {
    top: 0;
    font-size: 16px
}

#search .search-wrap label {
    font-size: 36px;
    color: #595959;
    position: absolute;
    top: 32px;
    left: 0;
    pointer-events: none
}

#search .search-wrap .sub {
    background: url("../images/search.png") no-repeat right center;
    border: none;
    width: 45px;
    height: 45px;
    position: absolute;
    top: 35px;
    right: 0;
    text-indent: -999999px
}

#search .actv label {
    top: 0;
    font-size: 16px
}

#search .s-result {
    color: #fff;
    font-size: 16px;
    padding: 20px 0;
    margin-bottom: 30px;
    border-bottom: 1px dashed #fff
}

@media (max-width: 768px) and (min-width: 320px) {
    #search .s-result {
        padding: 20px
    }
}

.paging {
    margin: 50px 0 0
}

.paging a {
    background: none;
    color: #fff;
    border: 2px solid #000;
    margin: 0 5px;
    font-size: 16px;
    padding: 4px 0;
    width: 30px;
    height: 30px
}

.paging a.last {
    background: #fff;
    border: 2px solid #fff;
    color: #000
}

.paging a.selected {
    border: 2px solid #fff;
    background: none
}

footer {
    background: #0C0C0C
}

footer .container {
    background: none
}

footer .foot1 {
    border-bottom: 1px solid #939191
}

@media (max-width: 768px) and (min-width: 320px) {
    footer .foot1 .fl img {
        width: 110px
    }
}
.list-article .subjudul {
    font-size: 16px;
}
@media (max-width: 768px) and (min-width: 320px) {
    .list-article .subjudul {
        font-size: 14px;
        position: relative;
        top: 40px
    }
}
.subjudul {
    color: #F7941F;
    font-family: montserrat;
    clear: both;
    display: block;
    font-size: 20px;
    margin: 15px 0 0;
}
@media (max-width: 768px) and (min-width: 320px) {
    .subjudul {
        font-size: 16px
    }
}
.list_grid article .wrap_box .box_text .box_text_inner .subjudul {
    font-size: 16px;
    margin: 10px 0 -10px;
}
@media (max-width: 768px) and (min-width: 320px) {
    .list_grid article .wrap_box .box_text .box_text_inner .subjudul {
        font-size: 14px;
        margin: 0 0 3px
    }
}