/**
 * Theme Name:  OYSnews Website Template
 * Version:     2.0
 * Author:      Segun Opeodu
 * Author URI:  http://www.crownkit.com.ng
 * Support:     07065201307
 * Description: OYSnews is a custom theme designed for Newspaper blog by Crownkit
 * Tags:        magazine, blog, columns, featured
 * License:     You must have a valid license purchased only from Naijakit.com in order to legally use the theme for your project. Copyright 2022
 **/

/* Table of contents
=================================================
1. Import CSS and Google Fonts
2. Global Styles
3. Preloader
4. Top Bar
5. Header
6. Sticky Header
7. Dropdown Main Menu
8. Menu and Responsive
9. Slider
11. News
12. Blog
13. Contact
14. Comment
15. Sidebar
16. 404 Error
17. Author Box
18. Profile Box
19. Featured Box
20. Footer - Main
21. Footer – Bottom
22. Scroll to Top
23. Google Map
24. Dark/Light Mode Switch

=================================================
*/
/*
================================
Import CSS and Google Fonts
================================
*/
@font-face {
    font-family: "Raleway";
    font-style: normal;
    font-weight: 400;
    font-display:optional;
    src: local('Raleway Regular'), local('Raleway-Regular'), url("../fonts/raleway-v19-latin-regular.woff2") format("woff2");
}
/*
================================
Global Styles
================================
*/

/* Color Layout #e74c3c --color-inner:#e9eff3*/
:root {--color-body: #f0f2f5; --color-main: rgb(72,118,202); --color-post: #ffffff; --color-inner: #ddf0ff; --color-link: var(--color-main); --color-header: #333333; --color-font: #231f20; --color-span: #757575; --color-border: #dadce0;}

:root .dark-theme {--color-body: #100e17; --color-main: rgb(72,118,202); --color-post: #191C1F; --color-inner: #353a3e; --color-link: #1bbf89; --color-header: #ffffff; --color-font: #c9caca; --color-span: #c9caca; --color-border: #5f5e5e;}

@media (prefers-color-scheme: dark) {
    :roott {
      --color-body: #100e17; --color-main: #e74c3c; --color-post: #191C1F; --color-inner: #353a3e;--color-hover: #bb0000; --color-link: #1bbf89; --color-header: #ffffff; --color-font: #c9caca; --color-border: #5f5e5e; --color-grey: #999;
    }
}


/*page-break-after:always;*/

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}
*, ::after, ::before {
    box-sizing: border-box
}
html {
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    font-size: min(1rem, 22px); /* Stays between 16px and 22px*/
    scroll-behavior: smooth;
    margin-right: 0!important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /*transparent*/
    font-feature-settings: normal;
    font-variation-settings: normal;
    tab-size: 4;
}
html a {
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%
}
body {
    font-family: Raleway, sans-serif;
    font-size: .9375rem;
    color: var(--color-font);
    direction: ltr;
    overflow: visible;
    line-height: 1.34;
    background-color: var(--color-body);
	-webkit-font-smoothing: antialiased;
    word-break: normal;
    word-wrap: break-word;
}
@media (prefers-reduced-motion: no-preference) {
    :root {
        scroll-behavior: smooth;
    }
}

html {
    scrollbar-color: #6275a3 #2f3d5c;
    scrollbar-width: thin;
}


::selection {
    background: #fde69a;
    color: #212121;
    text-shadow: none;
}
p {
    color: var(--color-font);
    margin-top: 0;
    margin-bottom: 10px;
}
em{font-style: normal;}
a{color:var(--color-link);text-decoration:none;cursor: pointer}
a:hover {color:var(--color-hover)}
a:link,
a:visited {
    transition: all 0.2s ease-out 0s;
    -webkit-transition: all 0.2s ease-out 0s;
    -moz-transition: all 0.2s ease-out 0s;
}
:active,
:hover,
:focus,
:visited {
    text-decoration: none;
    outline: none !important;
}
.ulhover a:hover {
    text-decoration: underline;
}
.dark-theme img {filter: brightness(0.8) contrast(1.2);}
h1,
h2,
h3,
h4,
h5,
h6 {font-family:'Raleway', sans-serif;font-weight:bold;margin-top:0;color:var(--color-header);margin-bottom:10px;line-height: 1.1;scroll-margin-top: 2em}
h1, .h1 {font-size: 2rem;}
h2, .h2 {font-size: 1.75rem;}
h3, .h3 {font-size: 1.10rem;}
h4, .h4 {font-size: 1.5rem;}
h5, .h5 {font-size: 1.25rem;}
h6, .h6 {font-size: 1rem;}

hr {background-color: var(--color-border);border: 0;height: 1px;margin: 15px 0;position: relative;width:100%;}
label {font-weight: 600;color: var(--color-font);}
.border{border-color:var(--color-border)}
.noborder{border: unset!important;}

/* ========== LOAD-MORE BUTTON ========== */
.pagination{display:inline-block;padding-left:0;margin:0 auto;text-align:center;border-radius:4px}.pagination>li{display:inline}.pagination>li>a,.pagination>li>span{position:relative;float:left;padding:6px 12px;margin-left:-1px;line-height:1.42857143;color:var(--color-main);text-decoration:none;background-color:var(--color-post);border: 1px solid var(--color-border)}.pagination>li:first-child>a,.pagination>li:first-child>span{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.pagination>li:last-child>a,.pagination>li:last-child>span{border-top-right-radius:4px;border-bottom-right-radius:4px}.pagination>li>a:focus,.pagination>li>a:hover,.pagination>li>span:focus,.pagination>li>span:hover{color:var(--color-link)}.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover{color:#fff;cursor:default;background-color:var(--color-main);border-color:var(--color-main)}.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover{color:#777;cursor:not-allowed;background-color:#fff;border-color:#ddd}

.blog .pagination ul {
    width: 100%;
    height: auto;
    text-align: center;
}
.blog .pagination ul li {
    display: inline-block;
    color: #2a2a2a;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 10px;
    padding-left: 0;
}
.blog .pagination ul li:before {
    content: '';
}
.blog .pagination ul li a {
    background: #333333;
    color: #fff;
    display: block;
    font-size: 16px;
    border: 1px solid #333333;
}
.blog .pagination ul li a i {
    margin-right: 0;
}
.blog .pagination ul li a:hover {
    background: #2a2a2a;
    border: 1px solid #2a2a2a;
    color: #fff;
}
.blog .pagination ul li a.active {
    background: #2a2a2a;
    border: 1px solid #2a2a2a;
    color: #fff;
}

/*
================================
Preloader
================================
*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-body);
    z-index: 999999;
}
#status {
    width: 200px;
    height: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url(../images/preloaders/preloader.gif) no-repeat center;
    margin: -100px 0 0 -100px;
}
/*
================================
Top Bar
================================
*/

/*-----Header Banner Wrap ------*/
.oys-header-wrap {
    display: block;
    background: var(--color-main);
    position: relative;
    width: 100%;
    height: 100px;
    padding: 0 15px;
}
.oyslogo {
    width: 220px;
    height: 44px;
}
.oyslogo img {
    width: 220px;
    height: 39px
}
.oys-header-wrap h2 {
    display: block;
    font-size: 2.3rem;
    line-height: 1.1;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 0;
}
.oys-header-wrap a {color:#fff;}
/*
================================
Header
================================
*/
#header {
    max-width: 100%;
    background: var(--color-post);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 995;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    top: -40px;
    height: 44px;
    border-radius: 0 0 7.5px 7.5px;
}
.ckDark #header {
    border-bottom: 1px solid var(--color-main);
}
#header .sf-menu .menu-description {
    display: block;
}
#header .logo {
    float: left;
    -webkit-transition: background .2s;
    transition: background .2s;
}
#header .nav-wrapper {
    float: right;
}
#header .nav-wrapper ul {
    float: right;
}

/*=========Icon Wrap=========*/
.sticky .icon-wrap {margin-right:100px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
header .icon-wrap {
    min-height: 1px;
    padding:12px 0;
    text-align: center;
    float: right;
}
header .icon-wrap ul {
    margin: 0;
    padding: 0;
}
header .icon-wrap ul li {
    list-style-type: none;
    margin-left: 10px;
    display: inline-block;
}
header .icon-wrap ul li a {
    width: 1.5rem;
    color: var(--color-header);
    display: block;
    text-align: center;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    font-size: 14px;
}
header .icon-wrap ul li span {
    font-size: 17px;
}

/*
================================
Sticky Header
================================
*/
#header.sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    top: 0;
}
/*
================================
Dropdown Main Menu
================================
*/

.sf-menu {
    float: left;
    line-height: 44px;
    margin: 0;
}
.sf-menu, .sf-menu * {
    padding: 0;
    list-style: none;
}
.sf-menu a:hover {
    background: transparent;
    text-decoration: none;
}
.sf-menu a {
    display: block;
    position: relative;
}
.sf-menu ul, .sf-menu ul ul{
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 9999;
    box-shadow: none;
    border-top: 0;
}
.sf-menu > li {
    background: none;
    float: left;
    position: relative;
    margin-top: 0;
    text-transform: uppercase;
    white-space: nowrap;
    transition: background .2s
}
.sf-menu>li>a:hover {color:var(--color-link);}
.sf-menu>.active>a{color: var(--color-link)}
.sf-menu .n75z76so {
    position: absolute;
    background-color: var(--color-link);
    bottom: 0;
    height: 3px;
    left: 2px;
    right: 2px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    transition-property: transform;
    transition-duration: 200ms;
    transform-origin: center bottom;
    transform: scaleY(0);
}
.sf-menu li.active .n75z76so {
transform: none;
}
.sf-menu > li > a {
    font-family: Raleway, sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--color-header);
    border: 0;
    padding: 0px 10px;
    display: block;
}
.sf-menu li li {
    min-width: 200px;
    height: auto;
    line-height: 30px;
    margin: 0;
    border-bottom: 1px solid #ccc;
    -webkit-transition: height 200ms ease-in;
    -moz-transition: height 200ms ease-in;
    -o-transition: height 200ms ease-in;
    transition: height 200ms ease-in;
}
.sf-menu li li:last-child {
    border-bottom: 0;
}
.sf-menu li li:hover > ul {
    -moz-animation: slideInRight 0.3s ease;
    -webkit-animation: slideInRight 0.3s ease;
    animation: slideInRight 0.3s ease;
}
.sf-menu li > ul li a {
    background: var(--color-post);
    color: var(--color-font);
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    padding: 4px 12px;
}
.sf-menu li > ul li:hover a {
    padding-left: 25px;
    background: #000;
    color: #fff;
}
.sf-menu li li li {
    background: var(--color-main);
}
.sf-menu li:hover > ul, .sf-menu li ul li:hover > ul{
    display: block;
    -moz-animation: zoomIn 0.3s ease;
    -webkit-animation: zoomIn 0.3s ease;
    animation: zoomIn 0.3s ease;
}

.sf-menu .has-sub > a:after {
    content: '+';
    margin-left: 4px;

}
.sf-menu ul ul{
    top: 50%;
    left: 100%;
}
/*
================================
Slicknav and Responsive
================================
*/

@media screen and (max-width: 991px) {
    #header.sticky .logo {
        z-index: 99999;
    }
    #header h2 {
        position: relative;
        text-align: center;
        margin-bottom: 0;
    }
    #header.sticky .slicknav_menu {
        z-index: 99999;
        position: fixed;
        width: 100%;
    }
    body.sticky header {
        margin-top: 0;
    }
    body.sticky .slide-carousel {
        margin-top: 124px;
    }
    .slide-carousel .item .text {
        padding-top: 25% !important;
    }
}
@media screen and (min-width: 992px) {
    .slicknav_menu {
        display: none;
    }
    #menu {
        display: block;
    }
    .blog article:last-child {margin-bottom:0;}

}
/*
================================
News
================================
*/
.news {
    margin: 20px 0;
}

.news .heading {
    background: var(--color-post);
    padding: 12px 20px;
    font-size: 16px;
    clear: both;
    position: relative;
    text-transform: uppercase;
    font-weight: bold;
    color: var(--color-header);
    border-bottom: 1px solid var(--color-border)
}


.news .heading a {
    color: var(--color-header);
}
.news .heading h3 {
    font-size: 16px;
    font-weight: 500;
    color: #464646;
    padding-bottom: 5px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.news .heading p {
    font-size: 16px;
    text-align: center;
    color: #353535;
}

.news .main-post {
    position: relative;
    background: var(--color-post);
    padding: 15px;
    -webkit-border-radius: 7.5px;
    border-radius: 7.5px;
    border: 0;
    overflow: hidden;
}
.news .main-post .photo {
    object-fit: cover;
    object-position: middle;
    width: 100%;
    height: 220px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0%;
}
.news .main-post .photo:after {
    content: "";
    position: absolute;
    background: transparent;
    height: 100%;
    width: 100%;
    z-index: 2;
    top: 0;
    left: 0;
    will-change: background;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -ms-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.news .main-post .date {
    position: absolute;
    top: 0;
    left: 0;
    background: #464646;
    color: #fff;
    padding: 10px;
    font-size: 16px;
    text-transform: uppercase;
}
.news .main-post .newsh4 {
    padding: 3px;
    color: var(--color-span);
    border-top: 1px solid rgba(164,170,192,.17);
    border-bottom: 1px solid rgba(164,170,192,.17);
    font-size: 13px;
    margin-bottom: 15px;
    justify-content: space-between;
}
@media (max-width: 991px){
    .news .main-post .newsh4 {font-size: 12px}
}
.news .main-post .newsh4 span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.news .main-post .newsh4 span:last-child{margin-right:0}
.news .main-post .newsh1 {
    font-size: 40px;
    text-transform: capitalize;
    font-style: normal;
    text-align: center;
}
.news .main-post .caption {
    padding: 0;
    margin-bottom: 30px;
}
.news .main-post .caption .img {
    overflow:hidden;
    text-align:center;
    margin-bottom:15px;
}
.news .main-post .caption .img img {
    height: auto;
    width: 450px;
    margin: auto;
}
.news .main-post .caption h1 {
    font-size: 40px;
    text-transform: uppercase;
}
.news .main-post .caption h2 {
    font-size: 1.8rem;
    margin-top: 1.625rem;
}

.news .main-post .caption h3 {
    line-height: 1.5;
}
.news .main-post .caption h3 a {
    color: var(--color-header);
}
.news .main-post .caption h4 {
    font-weight: normal;
    font-size: 13px;
    margin-bottom: 15px;
    overflow: hidden;
    padding: 5px 0;
}
.news .main-post .caption p {
    line-height: 1.7em;
    font-weight: normal;
    font-style: normal;
    font-size: 17px;
    font-family: "Lato", sans-serif;
}
.news .main-post .caption p a{text-decoration: underline;}
.news .main-post .caption ul {
    font-size: 1rem;
    line-height: 1.875rem;
}
.news .main-post .caption .tag {
    margin-right: .5rem;
    border-left: 4px solid var(--color-link);
    padding: 3px 10px;
    background: var(--color-body);
    color: var(--color-font);
    font-size: .9rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.news .main-post .caption .tag:hover{
    background: var(--color-main);
    color: #fff;
}
.news .main-post .caption .tag:before {
    content: "#";
    display: inline-block;
}
.news .main-post .related {
    background-color: var(--color-post);
    box-shadow: inset 0 0 0 99999px rgba(255,255,255,0.9);
    border-left: 3px solid var(--color-post);
    margin: 0 10px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition: all .3s ease;
}
.news .main-post .related-post, .rel-pro {
    padding: 0 20px 20px;
    display: block;
    flex-wrap: nowrap;
    justify-content: space-between;
    transition: all .3s ease;    
}
.news .main-post .related-post h2 {
    font-size: 20px;
    margin-bottom: 15px;
    text-align: center;
    margin-top: -14px;
}
.news .main-post .related-post span {
    font-size: 20px;
    font-weight: 700;
    background: var(--color-post);
    color: var(--color-header);
    padding: 3px 10px;
    transform: skewX(-15deg);
    display: inline-block;
}
.news .main-post .related-post ul, .rel-pro ul {
    list-style: none;
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}
.news .main-post .related-post li, .rel-pro li {
    padding: 0;
}
.news .main-post .related-post li:hover, .rel-pro li:hover {
    background-color:rgba(27,191,137,.1);
}
.news .main-post .related-post li .meta, .rel-pro li .meta {
    position: relative;
    padding-left: 14px;
    margin: 0;
    display: block;
    height: 16px;
    line-height: 1;
}
.news .main-post .related-post li .meta:before, .rel-pro li .meta:before {
    content: '';
    width: 8px;
    height: 8px;
    border: 2px solid var(--color-header);
    display: block;
    position: absolute;
    left: -3px;
    top: 4px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
}
.news .main-post .related-post li a:hover .meta:before,.rel-pro li a:hover .meta:before {
    background: var(--color-header);
}
.news .main-post .related-post li h3, .rel-pro li h3 {
    border: 2px solid var(--color-header);
    border-width: 0 0 0 2px;
    padding: 5px 12px 15px;
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    margin: 0;
}
.news .main-post .related-post li h3:hover, .rel-pro li h3:hover {
    color: var(--color-link);
}
.news .main-post .related-post .post-date, .rel-pro .post-date {
    display: inline;
    text-transform: uppercase;
    color: #888;
    font-size: 10px;
    letter-spacing: 1px;
}
/*
================================
Blog Section
================================
*/
.flexx, .flexc {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.layout3 .category{
    border-bottom: 2px solid var(--color-main);
}
.rcoAc{
    display: flex;
    margin-bottom: 15px;
}
.blog .list-group-item{
    position: relative;
    background: var(--color-post)!important;
    width: 100%;
    padding: 15px;
    border-radius: 7.5px;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    border: none;
    display: flex;
}
.ckDark .blog .list-group-item:nth-of-type(odd):hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.blog .list-group-item .list-group-image, .blog .list-group-item .list-group-imageM {
    position: relative;
    width:150px;
    height: 150px;
    display: block;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 0;
    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    border-radius: 50%;
    overflow: hidden;
}
.blog .list-group-item .list-group-image img, .blog .list-group-item .list-group-imageM img {
    object-fit: cover;
    width: 150px;
    height: 150px;
    max-width: 100%;
    transition: all .3s ease;
}
.blog .list-group-item .caption, .blog .list-group-item .captionM {
    width: 100%;
    padding: 5px 0 5px 10px;
}
.blog .list-group-item .caption p {
    display: block;
    font-size: 14px;
    text-align: justify;
    line-height: 20px;
    color: var(--color-font);
    font-family: "Segoe UI",Helvetica,Arial,sans-serif;
    font-weight: normal;
    font-style: normal;
    text-transform: none;
    margin: 0 0 0px;
}
.blog .list-group-item .caption h3 a, .blog .list-group-item .captionM h3 a {font-size: clamp(14px, 2vw, 18px);line-height: 1.3;color: var(--color-header);}
.blog .list-group-item .caption h3 a:hover, .blog .list-group-item .captionM h3 a:hover{color: var(--color-link);}
.prc150{width:150px}
.iitem.list-group-item:nth-of-type(odd) {background: #eeeeee;}

.blog-module-comments {
    background-color:var(--color-main);
    position: relative;
    border-radius: 4px 4px 4px 0;
    font-family: 'Open Sans', arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    line-height: 1;
}
.blog-module-comments a{
    color: #fff!important;
    display: inline-block;
    min-width: 17px;
    padding: 3px 4px;
    position: relative;
}
.ckDark .blog-module-comments {border:1px solid #303e47}

.blog-module-comments a:after {
    position: absolute;
    bottom: -3px;
    left: 0;
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3px 3px 0 0;
    border-color: var(--color-main) transparent transparent transparent;
}
.list-group {
    padding-left: 15px;
    margin-bottom: 0;
    padding-right: 15px;
}
.midh4 {
    font-size: 12px;
    color: var(--color-span);
    overflow: hidden;
    margin-bottom: 0;
}
.midh4 span {
    display: flex;
}
.midh4 span a{color:var(--color-span)}

/*
================================
Search
================================
*/
/*---- Search menu mobile -----*/
.instant-search{
    position: fixed;
    opacity: 1;
    overflow: hidden;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0;
    text-align: center;
    transition: opacity 0.1s ease-in 0s;
    background: rgba(29,35,39,.7);
    z-index: 20000;
    -webkit-backface-visibility: hidden;
}
.instant-search.is-hidden {
    background: transparent;
    opacity: 0;
    visibility: hidden;
}
.iSc{
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 60px;
    color:var(--color-font);
}
.oys-search-con{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.oyssearch {
    display: inline-block;
    background: var(--color-post);
    border: 1px solid var(--color-border);
    margin: 0 auto;
    max-width: 70%;
    width: 100%;
    height: 75%;
    position: relative;
    overflow: hidden;
    z-index: 21000;
}
.oyssearch ul {list-style:none;margin:0;padding:0 15px;text-align: left;}
.oyssearch ul li {display:flex;justify-content:space-between;padding:10px 0;color:var(--color-link);position:relative;cursor:pointer}
.liss:before {left:5px; position:absolute; display:block; width:20px; height:20px;background: url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='currentColor'></path></svg>") no-repeat;content:'';vertical-align:-3px;}
.sAarow {
    background: url(searchbox_icon.webp) no-repeat 0 -75px;
    background-size: 24px;
    height: 24px;
    width: 24px;
    align-self: center;
    flex: 1;
}
.search-header {background: transparent;padding: 10px;}
.search-header input {background: var(--color-post);color:var(--color-main);width: calc(100%); height:auto; line-height:20px;position:relative; border:1px solid var(--color-inner); margin: 0;padding:5px 20px 5px 10px; font-size:14px; border-radius:50px 50px;z-index:0;}
.search-header button::placeholder {color:#ccc}
.search-header button {background-color:transparent;color:var(--color-font);font-size:18px;right:22px;position:absolute;line-height:32px;cursor:pointer;z-index:1;}


.oys-sidebar-w35{
position: relative;
    width: 100%;
    background: var(--color-post);
    border-radius: 7.5px;
    overflow: hidden;
}
.sidebar-body{padding: 15px}
/*===== Search Sidebar =======*/
.search-sidebar {
    position: relative;
    width: 100%;
    background: var(--color-post);
    padding: 25px 15px;
    overflow: hidden;
    border-radius: 7.5px;
}
.oys-sidebar-w35 form, .search-sidebar form {display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap;margin:0px; padding:0px} 

.oys-sidebar-w35 input, .search-sidebar input {width: calc(100% - 35px);border-radius:50px 0px 0px 50px;}
.oys-sidebar-w35 button, .search-sidebar button {width:35px;height:38px;margin:0px;background-color:var(--color-main); border:0px;vertical-align:top; transition:all .3s ease; background-image:unset; border-radius:0px 50px 50px 0px;}

.oys-sidebar-w35 button:hover {background-color:#000;}
.search-sidebar button:before {display:inline-block; width:30px; height:30px; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='%23fff'></path></svg>") no-repeat; content:'';}
/*
================================
Comment Section
================================
*/
.chat_message {
    min-height: 174px;
    max-height: 200px;
    height: auto;
    overflow-y: scroll;
    user-select: text;
    white-space: pre-wrap;
    word-break: break-word;
}

.replyform{display: flex;gap: 10px;padding-left: 30px;padding-bottom: 15px;}
#replyform{animation-fill-mode:both;animation-timing-function:ease-out;top:190px;}
#replyform h4 {font-size:1.5rem;margin-bottom:5px;color:green}
.cancelreply{font-size:14px}
.comments textarea {vertical-align:top;resize:none}
.comments {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background: var(--color-inner);
    background-clip: border-box;
    border-top: 2px solid #9db1be;
    margin-bottom: 20px;
}
.comments-header {
    padding: 0 1.25rem;
    margin-bottom: 0;
    line-height: 32px;
    background-color: rgba(0,0,0,.03);
    border-bottom: 1px solid rgba(155,155,155,0.2);
}
.comments-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 10px;
    margin-top: 20px;
}
.comments .input-row {
    margin-bottom: 20px;
}
.comments .input-field {
    width: 100%;
    border-radius: 2px;
    padding: 10px;
    border: #e0dfdf 1px solid;
}
.comment-row {
    border-bottom: #e0dfdf 1px solid;
    margin-bottom: 15px;
    padding: 15px;
}
.outer-comment {
    background: #F0F0F0;
    padding: 20px;
    border: #dedddd 1px solid;
}
.c-message {
    white-space: pre-wrap;
    word-break: break-word
}
.comments-d .oyschild{
    width: auto;
    padding: 0 0 0 27px;
    border-bottom: unset;
    border-left: 2px solid #888
}
.comments-d .oyschild img {
    width:24px;z-index: 1;
}
.comments-d .oyschild .c-cbody, .oyschild .replyform {padding: 3px 0 10px 15px;}
.comments-d .c-pbody {padding-left: 25px;padding-bottom: 10px;overflow: hidden}
.comments-d .oyschild:before{ /*:first-of-type:before*/
    content: "";
    position: absolute;
    left: -2px;
    width: 30px;
    height: 15px;
    border-left: 2px solid #888;
    border-bottom: 2px solid #888;
    border-bottom-left-radius: 8px;
    z-index: 1
}
.comments .comments-d div:last-child, .comments-d .oyschild .oyschild:last-child .replyform.cleft {border-left: 2px solid transparent;z-index: 0}
.comments .comments-d .oyschild div:last-child {border-left: 2px solid transparent;}
.comments-d .bleft, .comments-d .cleft {border-left: 2px solid #888}
.comments-d {
    position: relative;
    padding: 15px 10px 0 31px;
    width: 100%;
    margin-bottom: 0;
    border-bottom: 1px dashed var(--color-border);
}
.comments-d .rounded-circle {
    position: absolute;
    left: 15px;
    border-radius: 50%!important;
    width: 35px;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%)
}
.comments-display {
    position: absolute;
    display: inline-block;
    width: 100%;
    background: var(--color-post);
    margin-bottom: 10px;
    padding: 5px;
}
.comments-d h3 {
    margin: 0;
    font-family: inherit;
    text-transform: capitalize;
    font-size: 1rem;
    color: var(--color-font);
}
.comments-d h3 svg {width:.8em;margin-left:2px}
.c-span {
    font-size: 11px;
    color: var(--color-font);
    font-family: arial;
}
.comopen{display: block}
.comclose {display: none}
.comments-d .reply, .comments-d .edit {
    width: 44px;
    font-size: 10px;
    border-radius: 10px;
    text-transform: uppercase;
    padding: 3px 5px;
    color: var(--color-font);
    border: 1px solid var(--color-border);
    line-height: normal
}
.comments-d .reply:hover:not(:disabled){
    background-color: var(--color-main);
}
.comments-d .btnspan path{
  fill: #fff;
}
.comFs{
    background: rgba(255,255,255, 0.1);
    border-left: 3px solid green;
    transition: background 1s cubic-bezier(1,1,1,1);
    transition-delay: 0.5s;
}
.commentFormData{overflow: hidden;}
.comments-d .commentApend {padding: 0 0 10px 13px;border-left: 2px solid #888}
/*
================================
Author Box
================================
*/
.news .author, .user-box {
	position:relative;overflow:hidden;background:var(--color-post);margin-bottom:20px;padding:15px;text-align: left;box-shadow: 0 4px 5px 0 rgba(0,0,0,.14), 0 1px 10px 0 rgba(0,0,0,.12), 0 2px 4px -1px rgba(0,0,0,.2);
}
.news .author:before, .news .author:after {display: table;content: " ";}
.news .author .img-box {
    float:left;
}
.news .author .img-box img{
	width: 130px;
    height: auto;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 15%);
    border: 5px solid #fff;
    vertical-align: middle;
}
.news .author .bio-data{margin-left:160px;}
.news .author h2 {
	font-size:30px;margin-bottom:10px;
}
.news .author p {
	font-size:13px;font-weight: normal;font-style: normal;
}
.news .author .social-links {display:inline-block;border-top:1px solid var(--color-inner);border-bottom:1px solid var(--color-inner);margin-bottom:10px;
}
.news .author .social-links a {
    font-size: 15px;
    display: inline-block;
    background: transparent;
    color: var(--color-link);
    line-height: 1;
    padding: 8px 0;
    margin-right: 4px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transition: 0.3s;
}
.news .author .social-links a:hover {
  background: var(--color-main);
  color: #fff;
  text-decoration: none;
}
.user-box {
    width: 100%;
    max-width: 70%;
    display: flex;
}
.user-box .bio-data span {font-size:14px;color: var(--color-span);}
.user-box .user-photo{
    margin-right: 15px;
    width: 100%;
    max-width: 297px;
}
.user-box .user-photo img {
    width: 100%;
    height: auto;
}
@media screen and (max-width: 721px) {
	.news .author {text-align: center;}
	.news .author .box {float:none;}
	.news .author .bio-data{margin-left:0px;}
}
/*
================================
Profile Box
================================
*/
.profile-box{width: 100%;
    position: relative;
    overflow: hidden;
}
.profile-head{background:var(--color-post);text-align:center;padding-bottom:15px;border-bottom-right-radius:8px;border-bottom-left-radius:8px;box-shadow: 0 1px 2px rgb(0 0 0 / 20%)}
.profile-head p{font-size:.9375rem}
.profile-head .yLnguc{background: #555;}
.profile-head .yOnlun{background: #2ecc71;}
.profile-cover{width: 100%;
    background: #fff;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    height: 180px;
    border-radius:8px 8px 0 0;
    overflow: hidden;}
.profile-cover img {object-fit: cover;width: 100%;transition: all .3s ease;height:220px}
.profile-photo{
    position: relative;
    z-index: 0;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    overflow: hidden;
    background: #fff;
    border: 5px solid #fff;
    margin-top: -80px;
    margin-bottom: 20px;
}
.profile-photo img{width: 100%;transition: all .3s ease;height: 180px;}
.profile-data{background: var(--color-post);padding:16px;border-radius:8px;box-shadow:0 1px 2px rgba(0,0,0, 0.2)}

.profile-head .p-about{white-space: pre-wrap;margin-bottom: 10px}


/*
================================
CATEGORY Section
================================
*/
.blog .category {
    background: var(--color-post);
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow: hidden;
    flex-wrap: wrap;
    position: relative;
    transition: all 0.3s ease;
}
.blog .category .list-group-image {
    width: 100%;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
    overflow: hidden;
    z-index: 0;
    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.blog .category .list-group-image img {
    object-fit: cover;
    width: 100%;
    border-radius: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all .3s ease;
}
.blog .category:hover img, .blog .list-group-item:hover img, .main-blog-small:hover img, .main-blog-footer:hover img, .news-featured:hover img{
    opacity: .8;
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
}
.blog .category .caption {padding: 15px 15px 5px;}
.blog .category .caption p {
	display: block;
    text-align: justify;
	line-height: 20px;
	font-family: "Segoe UI",Helvetica,Arial,sans-serif;
	font-weight: normal;
	font-style: normal;
	text-transform: none;
}
.blog .category .caption h3 {font-size: clamp(14px, 2vw, 18px);}
.blog .category .caption h3 a {color:  var(--color-header);}
.blog .category .caption h3 a:visited {color: rgb(159, 159, 159);}

/*
================================
Scroll to Top
================================
*/
.scrollup {
    position: fixed;
    z-index: 99999;
    bottom: 20px;
    left: 20px;
    display: none;
    width: 50px;
    height: 50px;
    line-height: 40px;
    border-radius: 50%;
    background: #333333;
    border: 4px solid #333333;
    text-align: center;
    font-size: 14px;
    opacity: 0.5;
    filter: alpha(opacity=50);
}
.scrollup:hover {
    opacity: 1;
    filter: alpha(opacity=1);
}

/*
================================
Sidebar
================================
*/

.sidebar {
    width: 100%;
}


/*======= Category Sidebar =======*/
.category-sidebar ul {
    list-style-type: disc;
    display: flex;
    -webkit-flex-wrap: wrap;
    padding-left: 0;
    margin: 0;
    gap: 0 1em;
}
.category-sidebar ul li {
    list-style: none;
    position: relative;
    margin: 0;
    padding: 10px 0 10px 25px;
    background: transparent;
    text-decoration: none;
    font-size: 13px;
    width: calc(50% - 8px);
}
/*.category-sidebar ul li:nth-child(2n+1) {
    margin-right: 30px;
}*/

.category-sidebar ul li:before {
    background: url("data:image/svg+xml,<svg viewBox='0 0 576 512' xmlns='http://www.w3.org/2000/svg'><path d='M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z' fill='%234488dc'></path></svg>") 2px 2px no-repeat;
    content:'';
    position: absolute;
    left: 0;
    height: 15px;
    width: 15px;
    line-height: 15px;
    text-align: center;
    color: #fff;
    font-size: 10px;
}

/* ======== POPULAR Tab & FOOTER RECENT News ======== */
.main-blog-small, .main-blog-footer {
    position: relative;
    width: 100%;
    margin-bottom: 8px;
}
.main-blog-small {
    padding: 5px 10px;
    background: var(--color-post);
}
.main-blog-small:hover{
    background-color:rgba(155, 155, 155, 0.2);
    /*box-shadow: 0 0 10px rgba(231, 76, 60, 0.5);*/
}
.main-blog-small .caption {
    margin-left: 90px;
}
.main-blog-small .photo, .main-blog-footer .photo {
    float: left;
    width:70px;
    height: 70px;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    z-index: 0;
    -webkit-transition: opacity 0.8s ease-in-out, -webkit-transform 0.8s ease-in-out;
    transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.main-blog-small .photo {
    border-radius: 50%;
}
.main-blog-small .photo img, .main-blog-footer .photo img{
    object-fit: cover;
    width: 70px;
    height: 70px;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.main-blog-small .caption h3 {
    font-size: 14px;
    line-height: 1.5;
}
.main-blog-small .caption h3 a {
    color:  var(--color-header);
}


/*----Newsletter Sidebar-----*/
.newsletter-sidebar {
    text-align: center;
}
.newsletter-sidebar h2 {
    color: var(--color-main);
    text-transform: uppercase;
    text-align: center;
    font-size: 18px;
}
.newsletter-sidebar p {
    line-height: 1.4;
    font-size: 14px;
}
.newsletter-sidebar form {position:relative; display:-webkit-box; display:-webkit-flex; display:-moz-box; display:-ms-flexbox; display:flex; flex-wrap:nowrap; align-items:center; margin:0px 0px 15px; padding:0px} 
.newsletter-sidebar form:before {left:20px; position:absolute; display:block; width:20px; height:20px; background:url("data:image/svg+xml,<svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M20,8L12,13L4,8V6L12,11L20,6M20,4H4C2.89,4 2,4.89 2,6V18A2,2 0 0,0 4,20H20A2,2 0 0,0 22,18V6C22,4.89 21.1,4 20,4Z' fill='%23717171'></path></svg>") no-repeat; content:'';}
.newsletter-sidebar button svg {width:20px; height:20px}
.newsletter-sidebar .email {margin:auto; color:#008c5f;} .newsletter-sidebar .email:before {content:''; width:50px; height:50px; display:block; text-align:center; margin:auto; margin-bottom: 10px; border-radius:100px; transition:all .3s ease; -webkit-animation:Ck-Ring 5s 0s ease-in-out infinite; -webkit-transform-origin:50% 4px; -moz-animation:Ck-Ring 5s 0s ease-in-out infinite; -moz-transform-origin:50% 4px; animation:Ck-Ring 5s 0s ease-in-out infinite; transform-origin:50% 4px; background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21,19V20H3V19L5,17V11C5,7.9 7.03,5.17 10,4.29C10,4.19 10,4.1 10,4A2,2 0 0,1 12,2A2,2 0 0,1 14,4C14,4.1 14,4.19 14,4.29C16.97,5.17 19,7.9 19,11V17L21,19M14,21A2,2 0 0,1 12,23A2,2 0 0,1 10,21M19.75,3.19L18.33,4.61C20.04,6.3 21,8.6 21,11H23C23,8.07 21.84,5.25 19.75,3.19M1,11H3C3,8.6 3.96,6.3 5.67,4.61L4.25,3.19C2.16,5.25 1,8.07 1,11Z' fill='%23b00000'/%3E%3C/svg%3E") center center / 50px no-repeat;}

@-webkit-keyframes Ck-Ring{0% { -webkit-transform: rotateZ(0); } 1% { -webkit-transform: rotateZ(30deg); } 3% { -webkit-transform: rotateZ(-28deg); } 5% { -webkit-transform: rotateZ(34deg); } 7% { -webkit-transform: rotateZ(-32deg); } 9% { -webkit-transform: rotateZ(30deg); } 11% { -webkit-transform: rotateZ(-28deg); } 13% { -webkit-transform: rotateZ(26deg); } 15% { -webkit-transform: rotateZ(-24deg); } 17% { -webkit-transform: rotateZ(22deg); } 19% { -webkit-transform: rotateZ(-20deg); } 21% { -webkit-transform: rotateZ(18deg); } 23% { -webkit-transform: rotateZ(-16deg); } 25% { -webkit-transform: rotateZ(14deg); } 27% { -webkit-transform: rotateZ(-12deg); } 29% { -webkit-transform: rotateZ(10deg); } 31% { -webkit-transform: rotateZ(-8deg); } 33% { -webkit-transform: rotateZ(6deg); } 35% { -webkit-transform: rotateZ(-4deg); } 37% { -webkit-transform: rotateZ(2deg); } 39% { -webkit-transform: rotateZ(-1deg); } 41% { -webkit-transform: rotateZ(1deg); } 43% { -webkit-transform: rotateZ(0); } 100% { -webkit-transform: rotateZ(0); } } @-moz-keyframes Ck-Ring{0% { -moz-transform: rotate(0); } 1% { -moz-transform: rotate(30deg); } 3% { -moz-transform: rotate(-28deg); } 5% { -moz-transform: rotate(34deg); } 7% { -moz-transform: rotate(-32deg); } 9% { -moz-transform: rotate(30deg); } 11% { -moz-transform: rotate(-28deg); } 13% { -moz-transform: rotate(26deg); } 15% { -moz-transform: rotate(-24deg); } 17% { -moz-transform: rotate(22deg); } 19% { -moz-transform: rotate(-20deg); } 21% { -moz-transform: rotate(18deg); } 23% { -moz-transform: rotate(-16deg); } 25% { -moz-transform: rotate(14deg); } 27% { -moz-transform: rotate(-12deg); } 29% { -moz-transform: rotate(10deg); } 31% { -moz-transform: rotate(-8deg); } 33% { -moz-transform: rotate(6deg); } 35% { -moz-transform: rotate(-4deg); } 37% { -moz-transform: rotate(2deg); } 39% { -moz-transform: rotate(-1deg); } 41% { -moz-transform: rotate(1deg); } 43% { -moz-transform: rotate(0); } 100% { -moz-transform: rotate(0); } } @keyframes Ck-Ring{0% { transform: rotate(0); } 1% { transform: rotate(30deg); } 3% { transform: rotate(-28deg); } 5% { transform: rotate(34deg); } 7% { transform: rotate(-32deg); } 9% { transform: rotate(30deg); } 11% { transform: rotate(-28deg); } 13% { transform: rotate(26deg); } 15% { transform: rotate(-24deg); } 17% { transform: rotate(22deg); } 19% { transform: rotate(-20deg); } 21% { transform: rotate(18deg); } 23% { transform: rotate(-16deg); } 25% { transform: rotate(14deg); } 27% { transform: rotate(-12deg); } 29% { transform: rotate(10deg); } 31% { transform: rotate(-8deg); } 33% { transform: rotate(6deg); } 35% { transform: rotate(-4deg); } 37% { transform: rotate(2deg); } 39% { transform: rotate(-1deg); } 41% { transform: rotate(1deg); } 43% { transform: rotate(0); } 100% { transform: rotate(0); } }

/*
================================
404 Error
================================
*/
.error-404 {
    width: 100%;
    max-width: 800px;
    margin: 20px auto 40px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 2em 3em;
}

/*
================================
Footer - Main
================================
*/
@media only screen and (min-width: 991px) {
    .footer{
        display: flex;
        gap: 1.5em;
    }
}
.footer-main {
    width: 100%;
    height: auto;
    padding: 30px 20px 0;
    background: rgb(23,23,47);
    margin-top: 0;
}
.footer-main h3 {
    font-size: 20px;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 15px;
    margin-bottom: 0;
}
.footer-main .footer-col {
    margin-bottom: 20px;
}
.footer-main .footer-col p {
    color: #fff;
    line-height: 22px;
    font-family: "Segoe UI",Helvetica,Arial,sans-serif;
}
.coname::before {
    position: relative;
    content: attr(data-coname);
}
.footer-main .footer-col ul {padding: 0}
.footer-main .footer-col ul li {
    color: #e1e1e1;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
    list-style-type: none;
    margin-bottom: 8px;
    position: relative;
    padding-left: 20px;
}
.footer a {
    color: #e1e1e1;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.footer-main .footer-col ul li:before {
    background:url("data:image/svg+xml,<svg viewBox='0 0 320 512' xmlns='http://www.w3.org/2000/svg'><path d='M295.973 160H180.572L215.19 30.184C219.25 14.956 207.756 0 192 0H56C43.971 0 33.8 8.905 32.211 20.828l-31.996 240C-1.704 275.217 9.504 288 24.004 288h118.701L96.646 482.466C93.05 497.649 104.659 512 119.992 512c8.35 0 16.376-4.374 20.778-11.978l175.973-303.997c9.244-15.967-2.288-36.025-20.77-36.025z' fill='%23fff'></path></svg>") no-repeat;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 15px;
    width: 15px;
    font-size: 10px;
}
.footer-main .footer-col .contact-item {
    color: #a3a3a3;
    overflow: hidden;
    margin-bottom: 10px;
    display: table;
}
.footer-main .footer-col .contact-item .icon {
    width: 35px;
    display: table-cell;
    vertical-align: top;
    font-size: 16px;
}

.footer-main .footer-col .contact-item .text {
    display: table-cell;
    vertical-align: top;
}

.main-blog-footer {
    padding-bottom: 8px;
    border-bottom: 1px solid rgb(95,94,94);
}
.main-blog-footer:last-child{border-bottom:transparent;}
.main-blog-footer .caption {
    padding-left: 0;
}
.main-blog-footer .caption h3 {
    font-size: 14px;
    padding-bottom: 0;
    text-transform: none;
    line-height: 1.5;
}
/*
================================
Footer - Bottom
================================
*/

.footer-bottom {
    width: 100%;
    height: auto;
    background: rgb(23,23,47);
    border-top: 1px solid rgb(255,255,255,0.15);
    padding: 15px 15px;
    font-size: 13px;
}
.footer-bottom .copyright {
    float:left;
    text-align: left;
}

.crownkit {
	text-align:right;
	float:right;
}
.crownkit a {color:#2ecc71} 



/**
 * News Featured
 */
.news-featured {
    width: calc(33.33333333% - 21px / 3);
    float: left;
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
    display: inline-block;
    border-radius: 10px;

}
.news-featured .item {
	width: 100%;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	position: relative;
}
.news-featured .image-f {
	width: 100%;
	object-fit: cover;
	object-position: middle;
	background-position: center center;
	-webkit-background-size: cover;
	background-size: cover;
	background-repeat: no-repeat;
}
.news-featured.first-col {
	height: 530px;
}
.news-featured.second-col {
	height: 200px;
    overflow: hidden;
    margin-right: 7px;
}
.news-featured img {
    object-fit: cover;
    width: 375px;
    max-height: 100%;
    transition: all .3s ease;
    max-width: 100%;
}
.news-featured .text {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 80%;
    opacity: 0.8;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
}
.news-featured .text a {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.news-featured .text .inner {
    position: absolute;
    padding: 10px;
    bottom: 0;
}
.news-featured .text h2 {
	font-size: 16px;
	margin-bottom: 0;
	line-height: 1.3;
}
.news-featured .text .oys-post-cap {
    color: #aaa;
    font-size: 11px;
}

.news-featured .post-tag {
    position: absolute;
    top: 15px;
    left: 15px;
    height: 19px;
    line-height: 19px;
    z-index: 5;
    background-color: var(--color-main);
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    padding: 0 6px;
    letter-spacing: 0.8px;
    border-radius: 3px;
    border-bottom-color: rgba(0,0,0,0.34);
    box-shadow: 0 1px 0 rgb(255 255 255 / 34%) inset, 0 2px 0 -1px rgb(0 0 0 / 13%), 0 3px 0 -1px rgb(0 0 0 / 8%), 0 3px 13px -1px rgb(0 0 0 / 21%);
}
.news-featured .post-tag a{
    color: #fff;
}
.news-featured .post-tag .svg-icon {vertical-align: baseline}
/*
================================
Ad1
================================
*/
.ad1::after {
    float: right;
    font-size: 12px;
    font-family: "Arial", sans-serif;
    font-style: italic;
    color: gray;
    content: "Advertisements";
}

.ad1 {
    background-position: center center;
    -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
	overflow: hidden; /* [1.2] Hide the overflowing of child elements */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    max-height: 120px;
}
.ad1 img {
	width: 100%;
    max-width:1170px;
	height: auto;
	object-fit: cover;
}

/*
================================
Ad2
================================
*/
.ad2 {
    line-height: 0;
    overflow: hidden;
}
.ad2, .ad2 img {
	width: 320px;
	height: 250px;
    max-width: 100%
}

/*================================
Ck-Modal Section
================================*/
.ck-modal {/* The Modal (background) */
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 99; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  box-shadow: 0 4px 6px rgba(0,0,0,.3); /* Shadow */
}
/* Modal Content */
.ck-modal-content {
	position: fixed;
	background-color: var(--color-post);
	position: relative;
    margin: 30px auto;
    max-width: 630px;
    min-width: 320px;
    border-radius: 0;
	overflow: hidden;
	-webkit-box-shadow: 0 5px 15px rgba(0,0,0,.5);
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}
/* The Close Button */
.close {
	color: #000;
	float: right;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 1px 0 #fff;
	filter: alpha(opacity=20);
	opacity: .2;
}
.modal-open{overflow:auto;padding-right:0 !important;}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}
@media (min-width: 768px){
	.modal-dialog {
		width: 600px;
		margin: 190px auto;
	}
}
.ck-modal-header {
  padding: 15px;
  /*border-bottom: 1px solid #e5e5e5; */
  background: var(--color-main); 
}
.ck-modal-header h4{
    margin: 0;
    line-height: 1.42857143;
	font-size: 20px;
}
.ck-modal>button {
    color: var(--color-main);
    text-align: center;
    line-height: 30px;
	background-color: transparent;
}
.ck-modal-body {background-color: var(--color-post);padding: 35px 20px 20px;float: left;width: 100%;}
.ck-modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}
.pAlk{float:left;font-weight:600;}
.cTOc {
background: var(--color-header);color: var(--color-post);padding: 3px 10px;font-size:12px;border-radius:50px;line-height:15px;text-align:center;position:relative;float:right;margin-top:-6px;z-index: 1000;display:none;}
.cTOc:after {content: "";position:absolute;bottom:-20px;left:40%;border:12px solid transparent;border-top-color:var(--color-header);
}
#ckshareCopy{cursor:pointer;}
#ckshareCopy:hover{color:var(--color-hover);}
/*
================================
RECENT & POPULAR TAB
================================
*/
#tab-content {
    line-height: 25px;
    min-height: 446px;
    padding-top: 10px;
}   
#nav-tabs {
    display: flex;
    background-color: rgba(0,0,0,0.04);
    border-bottom: 1px solid var(--color-border);
    padding-left: 0;
    margin-bottom: 0;
    list-style-type: none
}
#nav-tabs li{
    position: relative;
    background: var(--color-post);
    flex: 1 0 50%;
    margin: 0;
}
#nav-tabs>li>a {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row;
    text-transform: uppercase;
    color: var(--color-header);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
}
#nav-tabs>li .nav-link-text{
    position: static;
    flex: 1 1 auto;
    padding: 15px;
    text-align: center;
    line-height: 1.2;
}
#nav-tabs>li:first-child .nav-link-text:after {
    right: 0;
    left: auto;
}

#nav-tabs>li .nav-link-text:after{
    content: '';
    position: absolute;
    top: auto;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-main);
    transition: width 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
#nav-tabs>li#active .nav-link-text:after {
    width: 100%;
}
/*#nav-tabs>li#active:after {
    content: "";
    border-color: var(--color-main);
    border-top: 1em solid var(--color-main);
    border-right: 1em solid transparent;
    border-left: 1em solid transparent;
    display: inline-block;
    position: absolute;
}*/

#nav-tabs>li a:hover{color:var(--color-main);text-decoration:none;}
#nav-tabs>li#active a,#nav-tabs>li#active a:hover,#nav-tabs>li#active a:focus{background:background: rgba(0,0,0,0.05);color:var(--color-main);cursor:default;}

/*
================================
BREADCRUMB Section
================================
*/
ul.breadcrumb {
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background-color: transparent;
}
ul.breadcrumb span {
    display: inline-block;
    padding-bottom: 2px;
	margin-right: 5px;
}
ul.breadcrumb li {
  display: inline;
  font-size: 11px;
  color: var(--color-span);
}

ul.breadcrumb li+li:before {
  padding: 3px;
  color: var(--color-span);
  content: "/\00a0";
}
ul.breadcrumb li a {
  color: var(--color-span);
  text-decoration: none;
}
ul.breadcrumb li a:hover {
  color: var(--color-hover);
  text-decoration: underline;
}

/*
================================
OTHER ELEMENTS
================================
*/
.online {
    display: inline-block;
    margin-right: 10px;
    padding-right: 10px;
    border-right: 1px solid #dadce0;
}
.yLnguc {
    background: #2ecc71;
    border-radius: 100%;
    display: inline-block;
    height: 10px;
    width: 10px;
}
.Wprf1b {
    /*color: #3c4043;*/
    font-weight: bold;
}

.glyphicon { margin-right:5px; }
.msp
{
    margin-bottom: 20px;
    padding: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}

.not-found {
    font-size: 20px;
    color: red;
    background: var(--color-post);
    padding: 5em 14%;
    text-align: center;
    margin-bottom: 20px;
    float: left;
    width: 100%;
}

.video-iframe iframe {
	width: 100%;
	height: 280px;
}

/* News Table of Content*/
.css-11tsida {
    margin-bottom: 30px;
    margin-top: 30px;
}
.css-17ztj4b {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content:center;
    margin: 0;
    padding: 0;
}
.css-17ztj4b li {
    white-space: nowrap;
    font-size: 20px;
    line-height: 40px;
    margin: 0;
    padding: 0;
    position: relative;
    color: #007FAA;
    padding: 0 15px;
}
.css-17ztj4b li a {
    text-decoration: none;
    color: var(--color-link);
}
.css-17ztj4b li a:hover{color:#f0533a}
.css-17ztj4b li:after {
    content: "";
    background: #bcbfc5;
    position: absolute;
    top: 4px;
    height: 22px;
    width: 2px;
    right: -1px;
    bottom: 0;
    margin: auto;
}
.css-17ztj4b li:last-child:after{content:none}


.bg-inner{background:var(--color-inner);}
.bg-post{background:var(--color-post);}
.oys-bg-black-tpt-1 {background-color: rgba(0,0,0,.01);}
.oys-border-black-tpt-3 {border-color: rgba(0,0,0,.03);}
.oys-border-solid {border-style: solid;}
.height50{height:150px}
.ht1M0{height:100px}
.height200{height:200px}
/*
================================
Dark/Light Mode Toggle Switch
================================
*/
.CkSwitch {
margin-top: 10px;margin-bottom: 20px;width: 100%;max-width: 100%;background-color: var(--color-post);box-shadow: 0 0 35px rgba(0, 0, 0, 0.1);padding: 10px 15px;border-radius: 0;}
.OysNewSwitch{display:inline-block}
.dark_mode_switch{position:relative;display:block;float:right;width:45px;height:25px}
.dark_mode_switch input{opacity:0;width:0;height:0}
.dslide.slideco{background-color: rgba(255,255,255,.3)}
.dark-theme .dslide.slideco{background-color: rgba(101, 117, 133, .16);border: 1px solid #3c3f44}
.dslide{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:var(--color-main);-webkit-transition:.4s;transition:.4s}
.dslide:before{content:"";color:var(--color-main);position:absolute;height:19px;width:19px;left:3px;bottom:3px;transition:.25s; background:#fff url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.55,18.54L4.96,19.95L6.76,18.16L5.34,16.74M11,22.45C11.32,22.45 13,22.45 13,22.45V19.5H11M12,5.5A6,6 0 0,0 6,11.5A6,6 0 0,0 12,17.5A6,6 0 0,0 18,11.5C18,8.18 15.31,5.5 12,5.5M20,12.5H23V10.5H20M17.24,18.16L19.04,19.95L20.45,18.54L18.66,16.74M20.45,4.46L19.04,3.05L17.24,4.84L18.66,6.26M13,0.55H11V3.5H13M4,10.5H1V12.5H4M6.76,4.84L4.96,3.05L3.55,4.46L5.34,6.26L6.76,4.84Z' fill='currentColor'/%3E%3C/svg%3E") center / 17px no-repeat; }
input:checked+.dslide:before{content:"";-webkit-transform:translateX(19px);-ms-transform:translateX(19px);transform:translateX(19px);background:var(--color-main) url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.75,4.09L15.22,6.03L16.13,9.09L13.5,7.28L10.87,9.09L11.78,6.03L9.25,4.09L12.44,4L13.5,1L14.56,4L17.75,4.09M21.25,11L19.61,12.25L20.2,14.23L18.5,13.06L16.8,14.23L17.39,12.25L15.75,11L17.81,10.95L18.5,9L19.19,10.95L21.25,11M18.97,15.95C19.8,15.87 20.69,17.05 20.16,17.8C19.84,18.25 19.5,18.67 19.08,19.07C15.17,23 8.84,23 4.94,19.07C1.03,15.17 1.03,8.83 4.94,4.93C5.34,4.53 5.76,4.17 6.21,3.85C6.96,3.32 8.14,4.21 8.06,5.04C7.79,7.9 8.75,10.87 10.95,13.06C13.14,15.26 16.1,16.22 18.97,15.95M17.33,17.97C14.5,17.81 11.7,16.64 9.53,14.5C7.36,12.31 6.2,9.5 6.04,6.68C3.23,9.82 3.34,14.64 6.35,17.66C9.37,20.67 14.19,20.78 17.33,17.97Z' fill='%23fff'/%3E%3C/svg%3E") center / 17px no-repeat;}
.dslide.round{border-radius:25px}
.dslide.round:before{border-radius:50%}


.formvalidate .validate {
    display: none;
    color: red;
    margin: 0 0 15px 0;
    font-weight: 400;
    font-size: 13px;
}
.sf-menu::-webkit-scrollbar, .news-featured-container::-webkit-scrollbar {
    display: none;
}

.main-post :is(h2,h3,h4,h5,h6) a[href^="#"] {
    text-decoration: none;
    color: transparent;
    transform: translateY(-0.2ex);
}
.main-post :is(h2,h3,h4,h5,h6):hover a[href^="#"],.main-post :is(h2,h3,h4,h5,h6) a[href^="#"]:focus{color:var(--color-link)}
figure>figcaption {
    display: block;
    max-width: 100%;
    text-align: center;
    font-style: italic;
    margin-top: 1rem;
}
figure>*:not(figcaption) {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
figure img {
    height: auto;
    max-width: 100%;
}

.lazy, .oysanimated {
animation-timing-function: steps(10,end);
animation-duration: 1s;
animation-delay: 0ms;
animation-direction: alternate;
animation-name: oysAnimate;
animation-iteration-count: infinite;
}
img.lazy:not([src]) {visibility: hidden}
.lazy, .oysanimated {background-color:#e4e6eb;}
.dark-theme .lazy,.dark-theme .oysanimated {background-color: #3e4042;}
@keyframes oysAnimate{0%{opacity:.25}100%{opacity:1}}
/*.no-js img.lazy {display: none;}*/
.sk-pic {
    height: 120px;
    width: 100%;
}
.sk-row div {
    height: 10px;
    margin-bottom: 7.5px;
}
