/*------------------------------------*\ reset \*------------------------------------*/



@import url(https://www.visitjogja.net/wp-content/themes/media-id/font/ionicon/css/ionicons.min.css);

@import url(https://www.visitjogja.net/wp-content/themes/media-id/font/monserrat/import.css);

@import url(https://www.visitjogja.net/wp-content/themes/media-id/font/opensans/import.css);

 ::selection {

    background: rgba(0, 0, 0, .1);

    text-shadow: none;

}



 ::-webkit-selection {

    background: rgba(0, 0, 0, .1);

    text-shadow: none;

}



 ::-moz-selection {

    background: rgba(0, 0, 0, .1);

    text-shadow: none;

}



b,

strong {

    font-weight: 600;

}



*,

*:before,

*:after {

    -webkit-font-smoothing: antialiased;

    text-rendering: optimizeLegibility;

    -moz-osx-font-smoothing: grayscale;

    -moz-box-sizing: border-box;

    -webkit-box-sizing: border-box;

    box-sizing: border-box;

    word-wrap: break-word!important;

    margin: 0;

    padding: 0;

    outline: none!important;

}



.ads {

    display: block;

    margin: auto;

    display: none;

}



.ads img {

    display: block;

    margin: auto;

    max-width: 100%;

}



.vh {

    min-height: 80vh;

}



.hidden {

    position: fixed!important;

    top: -9999px;

    right: -9999px;

}



.clear:after {

    content: '';

    display: block!important;

    clear: both!important;

}



img {

    max-width: 100%;

    display: block;

}



a,

button,

input[type=button] {

    cursor: pointer;

}



h1,

h2,

h3,

h4 {

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

}



a {

    color: #484848;

    text-decoration: none;

    cursor: pointer;

    transition: .1s;

}



a:hover {

    color: #888;

    cursor: pointer;

}



body {

    background-color: #f8f8f8;

    color: #484848;

    font-size: 14px;

    line-height: 1.8;

    font-family: 'Open Sans', sans-serif;

}



body.onScroll {

    padding-top: 60px;

}



body.overflow {

    overflow: hidden;

}



.wrapper {

    width: 970px;

    max-width: calc(100% - 30px);

    min-width: 300px;

    margin: auto;

}



.custom-head {

    padding: 0 0 20px;

    margin: 0 auto 20px;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

}



.custom-head h1,

.custom-head h2 {

    display: block;

    float: left;

    height: 30px;

    line-height: 30px;

    font-family: 'Montserrat', sans-serif;

    text-transform: uppercase;

    font-weight: 300;

}



.custom-head a {

    display: block;

    float: right;

    padding: 0 20px;

    background: #cc0000 ;

    color: #fff;

    height: 30px;

    line-height: 30px;

    border-radius: 30px;

    font-size: 80%;

}



.custom-head a i {

    position: relative;

    padding-left: 5px;

    transition: 1s;

    display: inline-block;

}



.custom-head a:hover i {

    left: 5px;

}



.custom-head select {

    display: block;

    float: right;

    padding: 0 20px;

    height: 30px;

    line-height: 30px;

    font-size: 80%;

    border: 1px solid rgba(0, 0, 0, .08);

    color: #484848;

    background: #fff;

}



.setting_info {

    display: block;

    clear: both;

    border-radius: 8px;

    padding: 20px;

    border: 2px dashed rgba(0, 0, 0, .1);

}



.setting_info h3 {

    display: block;

    clear: both;

    font-weight: 700;

    font-size: 150%;

}



.setting_info h3 b {

    color: #cc0000 ;

}



.setting_info img {

    margin-top: 20px;

    display: block;

    clear: both;

    border-radius: 8px;

    background: #fff;

    border: 8px solid #fff;

    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);

}



.setting_info:after {

    content: "";

    display: block;

    margin-top: 20px;

    height: 8px;

    background: rgba(0, 0, 0, .1);

    border-radius: 50%;

}





/*------------------------------------*\ header \*------------------------------------*/



.header {

    position: relative;

    z-index: +100;

    transition: .1s;

    box-shadow: 0 1px 0 rgba(0, 0, 0, .08);

    background-color: #fff;

}



.header.onScroll {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    box-shadow: 0 1px 30px rgba(0, 0, 0, .08);

}



.header .wrapper {

    background-color: #fff;

    position: relative;

}





/*------------------------------------*\ header logo \*------------------------------------*/



.header hgroup.logo {

    display: block;

    float: left;

    padding: 17.5px 0;

}



.header hgroup.logo img {

    display: block;

    max-height: 25px;

}





/*------------------------------------*\ header mobile \*------------------------------------*/



.header div.mobile {

    display: none;

}



.header div.mobile.left {

    margin-right: 10px;

    float: left;

}



.header div.mobile.right {

    margin-left: 10px;

    float: right;

}



.header div.mobile a {

    font-size: 140%;

    display: block;

    float: left;

    height: 60px;

    line-height: 60px;

    width: 60px;

    text-align: center;

}





/*------------------------------------*\ header socmed \*------------------------------------*/



.header div.socmed {

    display: block;

    float: right;

    margin: 15px 0;

    margin-left: 20px;

    padding-left: 20px;

    border-left: 1px solid rgba(0, 0, 0, .08);

}



.header div.socmed a {

    font-size: 140%;

    display: block;

    float: left;

    height: 30px;

    line-height: 30px;

    width: 30px;

    text-align: center;

    transition: .1s;

}



.header div.socmed a:hover {

    opacity: .5;

}



.header div.socmed a.yt {

    color: #ff0000;

}



.header div.socmed a.fb {

    color: #3b5998;

}



.header div.socmed a.ig {

    color: #cd3e74;

}



.header div.socmed a.t {

    color: #1da1f2;

}



.header div.socmed a.gplus {

    color: #d0463b;

}





/*------------------------------------*\ header search \*------------------------------------*/



.header form.search {

    display: block;

    float: right;

    margin: 15px 0;

}



.header form.search * {

    display: block;

    border: none;

    outline: none;

}



.header form.search button {

    float: left;

    height: 30px;

    line-height: 30px;

    padding-left: 15px;

    padding-right: 5px;

    border: 1px solid rgba(0, 0, 0, .08);

    border-right: none;

    border-radius: 30px 0 0 30px;

    background-color: #f8f8f8;

}



.header form.search input {

    float: left;

    height: 30px;

    line-height: 30px;

    padding: 0 10px;

    padding-left: 5px;

    border: 1px solid rgba(0, 0, 0, .08);

    border-left: none;

    border-radius: 0 30px 30px 0;

    background-color: #f8f8f8;

}





/*------------------------------------*\ header nav \*------------------------------------*/



.header nav.nav {

    display: block;

    text-align: center;

    margin: 0 auto;

}



.header nav.nav * {

    display: block;

    font-family: 'Montserrat', sans-serif;

}



.header nav.nav span {

    display: inline-block;

}



.header nav.nav>ul>li {

    display: inline-block;

    position: relative;

}



.header nav.nav>ul>li>a {

    height: 60px;

    line-height: 60px;

    font-size: 90%;

    font-weight: 700;

    text-transform: uppercase;

    padding: 0 10px;

}



.header nav.nav>ul>li.menu-item-has-children>a:after {

    font-family: Ionicons;

    content: "\f1c8";

    display: inline-block;

    padding: 0 10px;

}



.header nav.nav>ul>li>ul.sub-menu {

    width: 200px;

    position: absolute;

    top: calc(100% + 10px);

    left: 0px;

    display: block;

    background-color: #fff;

    border: 1px solid rgba(0, 0, 0, .08);

    box-shadow: 5px 5px 15px rgba(0, 0, 0, .08);

    border-top: none;

    border-radius: 0 0 10px 10px;

    transition: .2s;

    opacity: 0;

    visibility: hidden;

    text-align: left;

}



.header nav.nav>ul>li:hover>ul.sub-menu,

.header nav.nav>ul>li.active>ul.sub-menu {

    opacity: 1;

    visibility: visible;

    top: 100%;

}



.header nav.nav>ul>li>ul.sub-menu>li>a {

    padding: 10px 15px;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    color: #888;

}



.header nav.nav>ul>li>ul.sub-menu>li:last-child>a {

    border-bottom: none;

}



.header nav.nav>ul>li>ul.sub-menu>li:hover>a {

    color: #484848;

}





/*------------------------------------*\ static-ads \*------------------------------------*/



#static-ads {

    display: block;

    margin-top: 20px;

}



#static-ads h3 {

    display: none;

}





/*------------------------------------*\ article.status-publish \*------------------------------------*/



#youtube {

    padding-top: 20px;

}



article.status-publish .breadcrumbs {

    opacity: .4;

}



article.status-publish .breadcrumbs>span:last-of-type {

    display: none;

}



article.status-publish .post-edit-link {

    font-size: 80%;

    background: #fff;

    border: 1px solid #ddd;

    display: inline-block;

    padding: 0 20px;

    margin: 0 10px;

    border-radius: 20px;

}



article.status-publish h1.post-title {

    display: block;

    margin: 20px 0;

    line-height: 1.4;

    font-size: 220%;

    font-weight: 700;

}



article.status-publish figure {

    position: relative;

}



article.status-publish figure img,

article.status-publish .post-content img {

    display: block;

    width: 100%!important;

    height: auto!important;

    border-radius: 4px;

}


article.status-publish .post-content img {
margin: 20px auto;
}

article.status-publish .post-content h2,
article.status-publish .post-content h3,
article.status-publish .post-content h4,
article.status-publish .post-content h5,
article.status-publish .post-content h6 {
    padding-top:20px;
    display:block;
    clear:both;
    line-height:1.4;
}
article.status-publish .post-content ul li,
article.status-publish .post-content ol li {
    margin:20px auto;
}

article.status-publish .post-content .action-btn {

    display: block;

    clear: both;

    margin: 20px auto;

    padding: 20px;

    background: rgba(0, 0, 0, .04);

    border: 1px solid rgba(0, 0, 0, .08);

    border-radius: 4px;

}



article.status-publish .post-content .action-btn a {

    font-size: 90%;

    width: 50%;

    display: block;

    padding: 10px 20px;

    float: left;

    border-right: 1px solid rgba(0, 0, 0, 0.08);

    text-align: center;

    background: #fff;

    color: #484848;

    box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);

}



article.status-publish .post-content .action-btn a:active {

    box-shadow: none;

}



article.status-publish .post-content .action-btn a:nth-child(1) {

    display: block;

    padding: 10px 20px;

    background: #cc0000 ;

    color: #fff;

    border-radius: 4px 0 0 4px;

}



article.status-publish .post-content .action-btn a:nth-last-child(1) {

    border-radius: 0 4px 4px 0;

    border-right: none;

}



article.status-publish .post-content h2,

article.status-publish .post-content h3,

article.status-publish .post-content h4,

article.status-publish .post-content h5,

article.status-publish .post-content h6 {

    display: block;

    clear: both;

    padding: 10px 0;

    border-bottom: 2px solid rgba(0, 0, 0, .08);

    position: relative;

    margin: 0 0 15px;

    font-weight: 700;

}



article.status-publish .post-content h2:before,

article.status-publish .post-content h3:before,

article.status-publish .post-content h4:before,

article.status-publish .post-content h5:before,

article.status-publish .post-content h6:before {

    display: block;

    content: '';

    width: 40px;

    border-bottom: 2px solid #cc0000 ;

    position: absolute;

    bottom: -2px;

    left: 0;

}



article.status-publish .post-content a {

    color: #cc0000 ;

}



article.status-publish .post-content blockquote {

    border-left: 6px solid #cc0000 ;

    padding: 20px;

    background: rgba(0, 0, 0, .04);

    border-radius: 0 4px 4px 0;

    margin: 20px auto;

    font-style: italic;

    line-height: 1.4;

    font-size: 110%;

}



article.status-publish ul,

article.status-publish ol {

    display: block;

    margin: 20px auto;

    margin-left: 20px;

}



article.status-publish ul li,

article.status-publish ol li {

    margin: 10px auto;

}



article.status-publish .ads300 {

    display: block;

    width: 320px;

    float: left;

    padding: 10px;

    border: 1px solid rgba(0, 0, 0, .08);

    background: #fff;

    box-shadow: 0 4px 0 rgba(0, 0, 0, .08);

    margin: 0px 20px 20px 0px;

}



article.status-publish .ads300 img {

    display: block;

    border-radius: 0!important;

    box-shadow: none!important;
    margin:0!important;

}



article.status-publish .ads300 h3 {

    display: none;

}



article.status-publish .post-content img {

    box-shadow: 0 10px 10px rgba(0, 0, 0, .08);

}



article.status-publish figure.post-cover a {

    display: block;

}



article.status-publish figure.post-cover a.lightbox:after {

    font-family: Ionicons;

    content: "\f4a5";

    font-size: 30px;

    display: block;

    height: 50px;

    line-height: 50px;

    width: 50px;

    border-radius: 50px;

    top: calc(50% - 40px);

    left: calc(50% - 25px);

    padding: 0 10px;

    color: #fff;

    position: absolute;

    z-index: 1;

    text-align: center;

    transition: .2s;

    background: rgba(0, 0, 0, .4);

    opacity: 1;

}



article.status-publish figure.post-cover:hover a.lightbox:after {

    opacity: 0;

}



article.status-publish figure.post-cover a.pinterest {

    display: block;

    height: 30px;

    width: 60px;

    background: #cc0000 url(https://www.visitjogja.net/wp-content/themes/media-id/img/pin.png) no-repeat center center;

    border-radius: 4px;

    background-size: cover;

    position: absolute;

    top: 20px;

    right: 20px;

    text-indent: -9999px;

    box-shadow: 0 5px 10px rgba(0, 0, 0, .2);

}



article.status-publish figure.post-cover a.pinterest:active {

    top: 25px;

}



article.status-publish .post-content {

    line-height: 1.8;

    font-size: 110%;

    margin-bottom: 20px;

}



article.status-publish .post-content table {

    border-collapse: collapse;

    width: 100%;

}



article.status-publish .post-content table td,

article.status-publish .post-content table th {

    border: 1px solid rgba(0, 0, 0, .1);

    padding: 8px;

    text-align: center;

}



article.status-publish .post-content table tr:nth-child(even) {

    background-color: #fff;

}



article.status-publish .post-content table tr:hover {

    background-color: rgba(0, 0, 0, .08);

}



article.status-publish .post-content table thead,

article.status-publish .post-content table thead th {

    padding-top: 12px;

    padding-bottom: 12px;

    background-color: #cc0000 ;

    color: white;

}



article.status-publish .post-content table tfoot {

    background-color: #484848;

    color: white;

}



article.status-publish .post-meta {

    display: block;

    margin-bottom: 20px;

    font-size: 90%;

}



article.status-publish .post-meta a.comcount {

    display: inline-block;

    float: right;

    padding: 2px 15px;

    background: #e8e8e8;

    color: #888;

    border-radius: 2px;

    position: relative;

}



article.status-publish .post-meta a.comcount:before {

    position: absolute;

    right: 100%;

    top: 50%;

    margin-top: -4px;

    content: "";

    border: 4px solid;

    border-color: transparent #e8e8e8 transparent transparent;

}



article.status-publish .post-content .post-excerpt {

    display: block;

    margin: 10px 0 20px;

    line-height: 1.6;

    font-style: italic;

    padding: 20px 30px;

    border-left: 4px solid #cc0000 ;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    font-weight: 400;

    color: #888;

    font-size: 90%;

}



article.status-publish .post-content .post-excerpt:before {

    display: none;

}



article.status-publish .post-content .post-excerpt .post-tags {

    opacity: .6;

    display: block;

    margin-top: 10px;

    font-style: normal;

}



article.status-publish .post-content .post-excerpt .post-tags a {

    display: inline-block;

    margin-right: 5px;

    margin-bottom: 5px;

    border-bottom: 1px dotted #cc0000 ;

    color: #cc0000 ;

}



article.status-publish .post-content .post-excerpt .post-tags a:hover {

    border-bottom: 1px solid #cc0000 ;

}



article.status-publish .post-share {

    border-top: 1px solid rgba(0, 0, 0, .08);

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    margin-bottom: 20px;

}



article.status-publish .post-share>* {

    text-align: center;

    display: block;

    float: left;

    padding: 20px;

}



article.status-publish .post-share .text {

    border-right: 1px solid rgba(0, 0, 0, .08);

}



article.status-publish .post-share .text span {

    display: inline-block;

    height: 30px;

    line-height: 30px;

}



article.status-publish .post-share .btn {}



article.status-publish .post-share .btn a {

    display: inline-block;

    padding: 0 15px;

    height: 30px;

    line-height: 30px;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    border-radius: 2px;

    font-size: 90%;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);

}



article.status-publish .post-share .btn a:hover {

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), inset 0 -3px 0 rgba(0, 0, 0, .1);

    transition: none;

}



article.status-publish .post-share .btn a:active {

    box-shadow: none;

}



article.status-publish .post-share .btn a.fb {

    background: #3b5998;

}



article.status-publish .post-share .btn a.t {

    background: #1da1f2;

}



article.status-publish .post-share .btn a.wa {

    background: #4dc247;

}



article.status-publish .post-share .btn a.wa.m {

    display: none;

}



article.status-publish .post-share .btn a.l {

    background: #00c300;

}



article.status-publish .post-share .btn a.gp {

    background: #f65543;

}



article.status-publish .post-share .btn a.mail {

    background: #484848;

}



article.status-publish .post-share .btn a.dsq {

    color: #484848;

}



.post-publisher {

    display: block;

    clear: both;

    margin: 40px 0 20px;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

}



.post-publisher .photo {

    display: block;

    float: left;

    width: 96px;

}



.post-publisher .photo img {

    display: block;

    width: 100%;

    height: auto!important;

    border-radius: 50%;

    border: 5px solid #fff;

    box-shadow: 0 10px 15px rgba(0, 0, 0, .08);

}



.post-publisher .caption {

    display: block;

    background: #fff;

    padding: 20px;

    border-radius: 4px;

    float: right;

    width: calc(100% - 126px);

    box-shadow: 0 10px 15px rgba(0, 0, 0, .08);

    position: relative;

}



.post-publisher .caption:before {

    position: absolute;

    right: 100%;

    top: 40px;

    content: "";

    border: 8px solid;

    border-color: transparent #fff transparent transparent;

}



.post-publisher .caption b {

    font-size: 110%;

    font-family: 'Montserrat', sans-serif;

    display: block;

    margin-bottom: 5px;

}



.post-publisher .caption b span {

    display: inline-block;

    white-space: nowrap;

}



.post-publisher .caption small {

    display: block;

}



.post-publisher .caption .link {

    display: block;

    float: right;

    position: relative;

    z-index: 1;

    margin-top: -20px;

    margin-right: -20px;

    margin-left: 10px;

    margin-bottom: 10px;

    font-weight: normal;

}



.post-publisher .caption .link a {

    display: block;

    float: left;

    height: 30px;

    line-height: 30px;

    padding: 0 20px;

    text-align: center;

    border: 1px solid rgba(0, 0, 0, .08);

    border-right: none;

    border-top: none;

}



.post-publisher .caption .link a:hover {

    background: #f8f8f8;

}



.post-publisher .caption .link a.url {

    color: #4285f4;

}



.post-publisher .caption .link a.fb {

    color: #3b5998;

}



.post-publisher .caption .link a.t {

    color: #1da1f2;

}



.post-publisher .caption .link a.ig {

    color: #cd3e74;

}



.post-publisher .caption .link a.gp {

    color: #cd4539;

}



.post-publisher .caption .link a.yt {

    color: #ff0000;

}



.post-publisher .caption .link a:nth-child(1) {

    border-radius: 0 0 0 8px;

}



.related_feed {

    display: block;

    margin-bottom: 20px;

}



.related_feed h3 {

    display: block;

    margin: 0 0 20px;

}



.related_feed .grid {

    display: grid;

    grid-column-gap: 15px;

    grid-template-columns: auto auto;

}



.related_feed .grid .item {

    font-weight: 700;

}



.related_feed .grid .item img {

    display: block;

    width: 100%;

    height: auto;

    border-radius: 8px;

}



.related_feed .grid .item h4 {

    font-weight: 700;

    line-height: 1.6;

    display: block;

    margin: 15px 0 0;

}



.related_feed .grid .item small {

    font-size: 80%;

    opacity: .8;

}





/*------------------------------------*\ footer \*------------------------------------*/



.footer {

    background: #fff;

    display: block;

    padding: 20px;

    text-align: center;

    margin-top: 20px;

    border-top: 1px solid rgba(0, 0, 0, .08);

    font-size: 80%;

}



.footer .footer-menu {

    float: left;

    display: block;

}



.footer .footer-menu * {

    line-height: 2;

    float: left;

    display: block;

    font-family: 'Monserrat', sans-serif;

}



.footer .footer-menu a {

    margin-right: 20px;

}



.footer .footer-menu li:after {

    content: '•';

    margin-right: 20px;

}



.footer .footer-menu li:last-child:after {

    display: none;

}



.footer p {

    float: right;

    opacity: .8;

}





/*---------------------------------------------------------------------------------------------------------------*\ HOMEPAGE \*---------------------------------------------------------------------------------------------------------------*/



#featured {

    display: block;

    padding: 20px 0;

}



#featured .post-item {

    display: block;

    float: left;

    width: calc(33.333% - 10px);

    padding-top: 25%;

    position: relative;

    border-radius: 8px;

}



#featured .post-item:hover {

    background-position: center left!important;

}



#featured .post-item:nth-child(1) {

    width: calc(66.666% - 10px);

    margin-right: 20px;

    padding-top: calc(50% + 20px);

}



#featured .post-item:nth-child(2) {

    margin-bottom: 20px;

}



#featured .post-item:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .8);

    background: linear-gradient(to top right, rgba(0, 0, 0, .8), transparent);

    border-radius: 8px;

}



#featured .post-item .link {

    display: block;

    position: absolute!important;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 8px;

}



.time-ago {

    font-size: 95%!important;

    opacity: .85!important;

}



#featured .post-item .info small.time-ago a {

    color: #fff;

    opacity: 0;

    display: block;

    margin-bottom: -10px;

    transition: .2s;

}



#featured .post-item:hover .info small.time-ago a {

    margin-bottom: 0;

    opacity: 1;

}



#featured .post-item .info {

    position: absolute;

    z-index: 1;

    left: 20px;

    max-width: calc(100% - 40px);

    bottom: 20px;

    border-radius: 8px;

}



#featured .post-item:nth-child(1) .info {

    left: 40px;

    max-width: calc(100% - 80px);

    bottom: 40px;

}



#featured .post-item .info a.category {

    background-color: #cc0000 ;

    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);

    display: inline-block;

    padding: 5px 20px 5px 20px;

    margin-bottom: 5px;

    color: #fff;

    font-size: 90%;

    margin-left: -20px;

    border-radius: 0 50px 50px 0;

}



#featured .post-item:nth-child(1) a.category {

    padding: 5px 20px 5px 40px;

    margin-left: -40px;

    margin-bottom: 5px;

}



#featured .post-item .info h3,

#featured .post-item .info p {

    text-shadow: 1px 1px 3px rgba(0, 0, 0, .4);

}



#featured .post-item .info h3 a {

    display: block;

    margin: 10px 0;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    font-size: 110%;

    line-height: 1.2;

}



#featured .post-item:nth-child(1) .info h3 a {

    font-size: 160%;

    margin: 20px 0;

}



#featured .post-item .info p {

    color: #fff;

    opacity: .8;

    font-size: 80%;

    display: none;

}



#featured .post-item:nth-child(1) .info p {

    display: block;

}





/*------------------------------------*\ media \*------------------------------------*/



#video {

    margin: 20px auto;

    background: #181818;

    padding: 40px 0;

}



#video .post-item {

    position: relative;

    width: 100%;

    padding-top: 56.25%;

    background-size: cover;

    background-position: center center;

}



#video .post-item:nth-child(n+2) {

    position: relative;

    padding-top: 28.125%!important;

    width: 50%;

    float: left;

}



#video .post-item:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .8);

    background: linear-gradient(to top right, rgba(0, 0, 0, .8), transparent);

}



#video .post-item:nth-child(1),

#video .post-item:nth-child(1):before {

    border-radius: 8px 8px 0 0;

}



#video .post-item:nth-child(2),

#video .post-item:nth-child(2):before {

    border-radius: 0 0 0 8px;

}



#video .post-item:nth-child(3),

#video .post-item:nth-child(3):before {

    border-radius: 0 0 8px 0;

}



#video .post-item .link {

    display: block;

    position: absolute!important;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}



.video_icon:after {

    font-family: Ionicons;

    content: "\f34f";

    font-size: 40px;

    display: block;

    vertical-align: middle;

    height: 50px;

    line-height: 50px;

    width: 50px;

    top: calc(50% - 25px);

    left: calc(50% - 25px);

    padding: 0 10px;

    color: #fff;

    position: absolute;

    z-index: 4;

    text-align: center;

    text-shadow: 1px 1px 15px rgba(0, 0, 0, .2);

}



.video_icon.topright:after {

    font-size: 30px;

    height: 40px;

    line-height: 40px;

    width: 40px;

    top: 10px;

    left: auto;

    right: 15px;

}



#video .post-item .info small.time-ago a {

    opacity: .6;

    color: #fff;

}



#video .post-item .info {

    position: absolute;

    z-index: 1;

    left: 20px;

    right: 20px;

    bottom: 20px;

}



#video .post-item.youtube {

    background-color: #cc0000 ;

    text-align: center;

}



#video .post-item.youtube .info {

    display: flex;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    max-width: 100%;

    padding: 15px;

}



#video .post-item.youtube .info .flexwrap {

    display: block;

    margin: auto;

}



#video .post-item.youtube .info h3 {

    display: inline-block;

    margin: 10px 5px;

}



#video .post-item.youtube .info small {

    display: block;

    margin-top: 5px;

}



#video .post-item .info h3,

#video .post-item .info p {

    text-shadow: 1px 1px 3px rgba(0, 0, 0, .4);

}



#video .post-item .info .ava {

    background: #fff no-repeat center center;

    background-size: 70% auto;

    display: block;

    margin: auto;

    margin-bottom: 10px;

    height: 100px;

    line-height: 100px;

    width: 100px;

    border-radius: 100px;

    box-shadow: 0 0 0 8px rgba(0, 0, 0, .2);

}



#video .post-item .info a.category {

    background-color: #cc0000 ;

    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);

    display: inline-block;

    padding: 5px 20px 5px 20px;

    margin-bottom: 5px;

    color: #fff;

    font-size: 90%;

    margin-left: -20px;

    border-radius: 0 50px 50px 0;

}



#video .post-item.youtube .info a.category {

    background-color: #cc0000 ;

    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);

    display: inline-block;

    padding: 5px 20px;

    margin-bottom: 5px;

    margin-left: 0;

    color: #fff;

    font-size: 90%;

    border-radius: 50px;

}



#video .post-item .info h3 a {

    display: block;

    margin: 10px 0;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-weight: 400;

    font-size: 110%;

    line-height: 1.2;

}



#video .post-item .info p {

    color: #fff;

    opacity: .8;

    font-size: 80%;

}



a.category:active {

    box-shadow: none!important;

    position: relative;

    bottom: -4px;

}





/*------------------------------------*\ recent \*------------------------------------*/



#recent {

    margin-top: 20px;

    clear:both;

    display: grid;

    grid-template-columns: auto auto auto;

    grid-gap: 20px;

}



#recent .post-item {

    display:block;

    position: relative;

    background-size: cover;

    border-radius: 8px;

    background-position: center center;

    padding-top: 56.25%!important;

    min-height: 100px;

}



#recent .post-item:nth-last-child(1) {

    display: none;

}



#recent .post-item:before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, .8);

    background: linear-gradient(to top right, rgba(0, 0, 0, .8), transparent);

    border-radius: 8px;

}



#recent .post-item .link {

    display: block;

    position: absolute!important;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    border-radius: 8px;

}



#recent .post-item .info small.time-ago a {

    opacity: .6;

    color: #fff;

}



#recent .post-item .info {

    position: absolute;

    z-index: 1;

    left: 20px;

    max-width: calc(100% - 40px);

    bottom: 20px;

    border-radius: 8px;

}



#recent .post-item .info h3,

#recent .post-item .info p {

    text-shadow: 1px 1px 3px rgba(0, 0, 0, .4);

}



#recent .post-item .info a.category {

    background-color: #cc0000 ;

    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);

    display: inline-block;

    padding: 5px 20px 5px 20px;

    margin-bottom: 5px;

    color: #fff;

    font-size: 90%;

    margin-left: -20px;

    border-radius: 0 50px 50px 0;

}



#recent .post-item .info h3 {}



#recent .post-item .info h3 a {

    display: block;

    margin: 10px 0;

    color: #fff;

    font-family: 'Montserrat', sans-serif;

    font-weight: 400;

    line-height: 1.2;

    font-size: 90%;

}



#recent .post-item .info p {

    color: #fff;

    opacity: .8;

    font-size: 80%;

}





/*---------------------------------------------------------------------------------------------------------------*\ LOOP \*---------------------------------------------------------------------------------------------------------------*/



article.loop {

    display: block;

    clear: both;

    padding-bottom: 40px;

    border-top: 1px solid rgba(0, 0, 0, .08);

}



article.loop figure.post-cover {

    display: block;

    float: left;

    margin-right: 20px;

    width: 33.33%;

    position: relative;

}



article.loop figure.post-cover figcaption {

    position: absolute;

    display: block;

    top: 20px;

    left: 0;

}



article.loop figure.post-cover figcaption a {

    display: inline-block;

    padding: 5px 15px;

    border-radius: 0 50px 50px 0;

    font-size: 80%;

    background-color: #cc0000 ;

    box-shadow: 0 4px 0 0 rgba(0, 0, 0, .2);

    color: #fff;

}



article.loop figure.post-cover img {

    display: block;

    border-radius: 0 0 8px 8px;

    width: 100%;

    height: auto;

}



article.loop div.post-caption {

    float: right;

    width: calc(66.666% - 20px);

}



article.loop div.post-caption p.post-meta {

    margin-bottom: 10px;

    display: block;

    font-size: 90%;

}



article.loop div.post-caption p.post-meta a.comcount {

    display: inline-block;

    float: right;

    padding: 2px 15px;

    background: #e8e8e8;

    color: #888;

    border-radius: 2px;

    font-size: 90%;

    position: relative;

}



article.loop div.post-caption p.post-meta a.comcount:before {

    position: absolute;

    right: 100%;

    top: 50%;

    margin-top: -4px;

    content: "";

    border: 4px solid;

    border-color: transparent #e8e8e8 transparent transparent;

}



article.loop header.post-header h2.post-title a {

    display: block;

    font-family: 'Montserrat', sans-serif;

    font-weight: 700;

    line-height: 1.2;

    padding: 20px 0 10px;

}



article.loop .post-content {

    display: block;

    clear: both;

    opacity: .6;

    font-size: 80%;

}





/*----------------------------------------------------*\ nth-child(1) \*----------------------------------------------------*/



article.loop:nth-child(1) {

    display: block;

    clear: both;

    margin-top: -20px;

    padding-bottom: 40px;

    border-top: 0;

}



article.loop:nth-child(1) figure.post-cover {

    display: block;

    float: none;

    margin-right: 20px;

    width: 100%!important;

    position: relative;

}



article.loop:nth-child(1) header.post-header h2.post-title a {

    margin: 10px 0;

}



article.loop:nth-child(1) div.post-caption {

    float: none;

    width: auto;

}





/*----------------------------------------------------*\ pagination \*----------------------------------------------------*/



.pagination {

    display: block;

    clear: both;

}



.pagination>* {

    display: block;

    padding: 0 20px;

    height: 30px;

    line-height: 30px;

    font-size: 80%;

    float: left;

    border-radius: 4px;

    margin-right: 10px;

    border: 1px solid rgba(0, 0, 0, .08);

}



.pagination span {

    background: #cc0000 ;

    color: #fff;

    font-weight: 700;

}



.pagination a {

    background: #fff;

}



.pagination a:hover {

    line-height: 28px;

    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .08);

    transition: none;

}



.pagination a:active {

    line-height: 30px;

    box-shadow: none;

}





/*---------------------------------------------------------------------------------------------------------------*\ MAIN SIDEBAR \*---------------------------------------------------------------------------------------------------------------*/



section#mainaside {

    display: block;

    padding-top: 20px;

}



section#mainaside main {

    float: left;

    margin-right: 20px;

    width: calc(100% - 340px);

}



section#mainaside aside {

    float: right;

    width: 320px;

    padding-left: 20px;

    border-left: 1px solid rgba(0, 0, 0, .08);

}





/* SIDEBAR */



aside.sidebar {}



aside.sidebar h3 {

    display: block;

    padding: 10px 0;

    border-bottom: 2px solid rgba(0, 0, 0, .08);

    position: relative;

    margin: 0 0 15px;

    font-weight: 700;

}



aside.sidebar h3:before {

    display: block;

    content: '';

    width: 40px;

    border-bottom: 2px solid #cc0000 ;

    position: absolute;

    bottom: -2px;

    left: 0;

}



#sidebar-widget>div {

    display: block;

    width: auto!important;

    margin: 0 auto 20px!important;

}



#sidebar-widget .textwidget img {

    display: block;

    margin: auto;

}



.mediaID_FEED {

    display: block;

}



.mediaID_FEED .item_feed {

    margin-bottom: 15px;

    border-bottom: 1px solid rgba(0, 0, 0, .08);

    padding: 10px 0;

}



.mediaID_FEED .item_feed:nth-last-child(1) {

    border-bottom: none;

}



.mediaID_FEED .item_feed img {

    display: block;

    width: 100%;

    border-radius: 2px;

}



.mediaID_FEED .item_feed:nth-child(n+2) img {

    float: left;

    margin-right: 15px;

    margin-bottom: 10px;

    width: 30%!important;

}



.mediaID_FEED .item_feed .title {

    display: block;

    font-weight: 700;

    line-height: 1.6;

    margin: 20px 0 5px;

}



.mediaID_FEED .item_feed:nth-child(n+2) .title {

    margin: 0 0 5px;

}



.mediaID_FEED .item_feed:nth-child(n+2) {

    font-size: 95%;

}



.mediaID_FEED .item_feed:nth-child(n+2) .wrap {

    display: block;

    float: right;

    width: calc(70% - 15px);

}



.mediaID_FEED .item_feed:nth-child(n+2) .wrap small {

    opacity: .8;

}





/*---------------------------------------------------------------------------------------------------------------*\ TABS & DISQUS \*---------------------------------------------------------------------------------------------------------------*/



.tabs {

    margin-bottom: 20px;

}



.tabs ul#tabs-nav {

    display: block;

    border-bottom: 2px solid #f8f8f8;

}



.tabs ul#tabs-nav li {

    display: block;

    float: left;

    width: 30%;

    transition: .3s;

    position: relative;

}



.tabs ul#tabs-nav li.active {

    width: 40%;

}



.tabs ul#tabs-nav li.active:before {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -8px;

    border: 8px solid;

    border-color: transparent transparent #cc0000 transparent;

}



.tabs ul#tabs-nav li a {

    display: block;

    text-align: center;

    padding: 5px;

    font-size: 90%;

}



.tabs ul#tabs-nav li:hover a {

    background: #f8f8f8;

}



.tabs ul#tabs-nav li.active a {

    background: #cc0000 ;

    color: #fff;

    border-radius: 2px;

}



.tabs ul#tabs-nav li a small {

    display: none;

}



.tabs ul#tabs-nav li.active a small {

    display: inline-block;

    margin-left: 5px;

}



.tabs #tabs-content {

    margin-top: 14px;

    display: block;

    background: #fff;

    padding: 15px;

    border-top: 2px solid #cc0000 ;

    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);

}



.latest .item {

    margin-bottom: 20px;

    padding-bottom: 20px;

    border-bottom: 1px solid rgba(0, 0, 0, .1);

}



.latest .item:nth-last-child(1) {

    margin-bottom: 0;

    padding-bottom: 0;

    border-bottom: none;

}



.latest .item * {

    display: block;

    margin: 0;

}



.latest .item img {

    display: block;

    margin-bottom: 10px;

    border-radius: 2px;

    width: 100%;

}



.latest .item:nth-child(n+2) img {

    display: none!important;

}



.latest .item:nth-child(n+2) .video_icon:after {

    display: none;

}



.latest .item h4 {

    font-weight: 700;

    line-height: 1.5;

    margin-bottom: 5px;

}



.latest .item small {

    opacity: .8;

    font-size: 80%;

}





/*----------------------------------------------------*\ Disqus \*----------------------------------------------------*/



.dsq-widget ul.dsq-widget-list {

    padding: 0!important;

    margin: 0!important;

    text-align: left!important;

}



img.dsq-widget-avatar {

    width: 50px!important;

    height: 50px!important;

    border: 0px!important;

    margin: 0px!important;

    padding: 0px!important;

    float: left!important;

    display: block!important;

    margin-right: 13px!important;

    margin-bottom: 15px!important;

    border-radius: 50px!important;

    box-shadow: 0 0 0 3px rgba(0, 0, 0, .1)!important;

    background: rgba(0, 0, 0, .1)!important;

}



a.dsq-widget-user {

    float: left!important;

    font-weight: 700!important;

    font-family: 'Monserrat', sans-serif!important;

    padding: 10px 0!important;

    display: block!important;

}



a.dsq-widget-thread {

    font-weight: bold!important;

}



li.dsq-widget-item {

    margin: 15px 0!important;

    padding-top: 15px!important;

    border-top: 1px solid rgba(0, 0, 0, .1)!important;

    list-style-type: none!important;

    clear: both!important;

}



li.dsq-widget-item:first-child {

    padding-top: 0!important;

    border-top: 0!important;

}



span.dsq-widget-clout {

    padding: 0 2px!important;

    background-color: #e8e8e8!important;

    color: #fff!important;

    margin-right: 10px!important;

}



li.dsq-widget-item:first-child span.dsq-widget-clout {

    padding: 0 2px!important;

    background-color: #cc0000 !important;

    color: #fff!important;

    margin-right: 10px!important;

}



li.dsq-widget-item:nth-child(2) span.dsq-widget-clout {

    background-color: #cc0000 !important;

    opacity: .3!important;

}



table.dsq-widget-horiz td {

    padding-right: 15px!important;

}



.dsq-widget-comment {

    display: block!important;

    clear: both!important;

    background: rgba(0, 0, 0, .04)!important;

    padding: 15px!important;

    border-radius: 0 16px 16px 16px!important;

}



.dsq-widget-comment p {

    display: inline-block!important;

    line-height: 1.6!important;

    font-size: 90%!important;

}



p.dsq-widget-meta {

    display: block!important;

    clear: both!important;

    padding: 0!important;

    margin: 0!important;

    margin-top: 10px!important;

}



p.dsq-widget-meta a {

    display: inline-block!important;

    opacity: .6!important;

    font-size: 80%!important;

}



p.dsq-widget-meta a:first-of-type {

    font-size: 100%!important;

    display: block!important;

    opacity: 1!important;

    font-weight: 400!important;

    font-family: 'Monserrat', sans-serif!important;

    border-left: 4px solid #cc0000 !important;

    padding-left: 10px!important;

    margin-bottom: 5px!important;

}



.popular {

    display: block;

    counter-reset: popular-counter;

}



.popular .item {

    display: block;

    clear: both;

    margin: 20px 0;

    position: relative;

}



.popular .item:before {

    font-size: 14px;

    font-weight: 700;

    content: counter(popular-counter);

    counter-increment: popular-counter;

    display: block;

    position: absolute;

    top: calc(50% - 25px);

    left: 0;

    background: #cc0000 ;

    color: #fff;

    width: 40px;

    height: 40px;

    line-height: 40px;

    border-radius: 40px;

    text-align: center;

    box-shadow: 0 0 0 4px rgba(0, 0, 0, .08);

    transition: .4s;

}



.popular .item:hover:before {

    box-shadow: 0 0 0 6px rgba(0, 0, 0, .08);

    transform: rotate(-360deg);

    font-size: 20px;

}



.popular .item a {

    display: block;

    float: right;

    width: calc(100% - 60px);

    background: #fff;

    padding: 15px;

    border: 1px solid rgba(0, 0, 0, .08);

    border-radius: 2px;

    position: relative;

    box-shadow: 0 4px 0 rgba(0, 0, 0, .08);

}



.popular .item a:before {

    position: absolute;

    right: 100%;

    top: calc(50% - 12px);

    content: "";

    border: 8px solid;

    border-color: transparent rgba(0, 0, 0, .08) transparent transparent;

}



.popular .item a span {

    color: #cc0000 ;

    font-weight: bold;

}



.popular .item a h4 {

    font-weight: 700;

    line-height: 1.5;

    font-weight: bold;

}



.popular .item a small {

    opacity: .8;

    font-size: 80%;

}





/*----------------------------------------------------*\ Sitemap \*----------------------------------------------------*/



article.status-publish .sitemap {

    display: block;

    border: 1px solid rgba(0, 0, 0, .08);

    margin: 20px 0;

    padding: 20px 40px;

    background: #fff;

    border-left: 4px solid #cc0000 ;

}



article.status-publish .sitemap .item a {

    font-weight: 700;

    font-family: '' line-height:1.4;

    display: block;

    padding: 5px 20px;

    border-radius: 100px;

}



article.status-publish .sitemap .item:hover a {

    background: rgba(0, 0, 0, .04);

}





/*----------------------------------------------------*\ Lazy Load \*----------------------------------------------------*/



div.fastBG img.HideBG {

    position: fixed;

    top: -9999px

}



div.fastBG {

    background-image: url(img/loader.gif);

    background-color: #eee;

    background-position: 90% 90%!important;

    background-repeat: no-repeat;

    background-size: auto auto!important;

}



div.fastLoad {

    display: block;

    background-color: #eee;

    background-repeat: no-repeat;

    width: 100%;

    padding-top: 56.25%;

}



img.fastIMG {

    opacity: 0;

}





/*----------------------------------------------------*\ Loading Ajax \*----------------------------------------------------*/



.loading {

    background: #eee url(img/loader.gif) no-repeat center center;

    z-index: 10;

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

}





/*----------------------------------------------------*\ Recommend \*----------------------------------------------------*/



#recommend {

    border-radius: 4px 0 0 8px;

    transition: 1s;

    visibility: hidden;

    opacity: 0;

    position: fixed!important;

    z-index: 10;

    bottom: 120px;

    right: calc(-100% + 24px);

    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), -24px 24px 24px rgba(0, 0, 0, .08);

    background: #fff;

    width: 350px;

    border-right: none;

}



#recommend a {

    display: block;

}



#recommend a.video_icon.topright:after {

    top: calc(50% - 70px);

    font-size: 40px;

    left: calc(50% - 30px);

}



#recommend.onScroll {

    visibility: visible;

    opacity: 1;

    right: 0;

}



#recommend h3 {

    display: block;

    text-align: center;

    height: 40px;

    line-height: 40px;

    margin: 0;

}



#recommend h3 i {

    cursor: pointer;

    display: block;

    text-align: center;

    height: 40px;

    line-height: 40px;

    width: 40px;

    float: left;

    background: #cc0000 ;

    color: #fff;

    border-radius: 4px 0 0 0;

}



#recommend img {

    display: block;

    width: 100%;

    border-radius: 0;

}



#recommend h4 {

    margin: 0;

}



#recommend .wrap {

    display: block;

    padding: 15px;

}



#recommend small b {

    color: #cc0000 ;

}





/*----------------------------------------------------*\ Back To Top! \*----------------------------------------------------*/



a.btt {

    transition: .2s;

    display: block;

    opacity: 0;

    position: fixed;

    z-index: 10;

    bottom: 40px;

    right: 40px;

    height: 40px;

    line-height: 40px;

    width: 40px;

    border-radius: 40px;

    text-align: center;

    background: #cc0000 ;

    box-shadow: 0 0 0 4px rgba(0, 0, 0, .1), inset 0 -4px 0 rgba(0, 0, 0, .1);

    color: #fff;

}



a.btt:active {

    line-height: 44px;

    box-shadow: 0 0 0 2px rgba(0, 0, 0, .1);

}