:root{
--primary:#FB444D;
--secondary:#FD9DA2;
--txt-light:#fff;
--txt-dark:#000000;
--box-border:#cfcfcf;
--box-bg:#f5f5f5;
--border-radius:2px;
--max-width: 1100px;
--center: calc((100% - var(--max-width))/2);
}
body{
font-size: 14px;
font-family: 'Poppins', sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
}
.nomargin{
margin: 0;
}
.txt-light{
color: var(--txt-light)!important;
}
.text-dark{
color: var(--txt-dark)!important;
}
*:not(p), :after, :before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
b{
font-weight: 600;
}  a img {
border: none
}
img.center {
display: block;
margin-left: auto;
margin-right: auto
}
img.aligncenter {
display: block;
margin: 5px auto
}
img.alignright {
display: inline;
margin: 0 0 5px 5px;
padding: 5px
}
img.alignleft {
display: inline;
margin: 0 5px 5px 0;
padding: 5px
}
.wp-caption {
border:var() solid 1px;
background-color: transparent;
padding: 5px;
margin: 5px
}
.wp-caption img {
margin: 0;
padding: 0;
border: none
}
.wp-caption p.wp-caption-text {
text-align: center;
font-style: italic;
margin: 0
}
.aligncenter {
display: block;
margin: 5px auto
}
.alignleft {
float: left
}
.alignright {
float: right
}
.wp-caption,
img,
img.alignnone,
p img {
max-width: 100%
}
.wp-caption.alignleft,.wp-caption.alignright, .wp-caption.alignnone, .wp-caption.aligncenter{
width: unset !important;
}
.wp-block-image figcaption{
font-size: 0.8em;
font-style: italic;
}  h1, h2, h3, h4, h5, h6{
margin:0;
font-weight: 600;
}
h1 {
font-size: 161.8%
}
h2 {
font-size: 138.2%
}
h3 {
font-size: 123.6%
}
h4 {
font-size: 115.9%
}  a{
transition: ease-in-out .5s;
color: inherit;
}
a:where(:hover,:active,:link,:visited){
text-decoration: none;
}
a:hover{
color: var(--secondary);
}  .button{
background: transparent;
border-radius: var(--border-radius);
padding: 10px 25px;
color: var(--txt-dark);
font-weight: 600;
cursor: pointer;
box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), 7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1);
outline: none;
position: relative;
}
.button:after{
position: absolute;
content: "";
width: 0;
height: 100%;
top: 0;
left: 0;
direction: rtl;
z-index: -1;
box-shadow: -7px -7px 20px 0px #fff9, -4px -4px 5px 0px #fff9, 7px 7px 20px 0px #0002, 4px 4px 5px 0px #0001;
transition: ease-in-out .5s;
}
.button::first-letter{
text-transform: capitalize;
}
.button:after:hover{
left: auto;
right: 0;
width: 100%;
}
.btn_primary{
color: var(--txt-light);
background: var(--primary);
border: none;
outline: 1px solid var(--box-border);
padding: .4em .8em;
border-radius: var(--border-radius);
transition: ease-in-out .5s;
}
.btn_primary a{
color: var(--txt-light);
}
.btn_primary:hover{
color: var(--primary);
background: none;
outline: 1px solid var(--primary);
}
.btn_primary:hover a{
color: var(--primary);
}
.btn-viewall{
color:var(--primary);
text-transform: capitalize;
font-weight: 600;
transition: ease-in-out .5s;
display: inline-flex;
align-items: center;
}
.btn-viewall i{
margin-right: 5px;
}
.btn-viewall:hover{
color: var(--secondary);
} ::-webkit-scrollbar{
width: 4px;
}
::-webkit-scrollbar-track{
background: var(--box-bg);
}
::-webkit-scrollbar-thumb{
background: var(--primary);
}
::-webkit-scrollbar-thumb:hover{
background: var(--secondary);
} input[type=search]{
outline: none;
border: none;
padding: 5px 10px;
line-height: 30px;
height: 30px;
width: 250px;
}
input,textarea,button,select{
font-family: inherit;
}
.searching {
display: none;
position: absolute;
right: 0;
top: 100%;
background-color:rgba(255 255 255 / 95%);
padding: 15px;
z-index: 2;
} .wrapcontent blockquote {
background: #f2f2f2;
height: fit-content;
padding: 40px 50px;
margin: 20px 0;
display: block;
color: var(--txt-dark);
position: relative;
border-radius: var(--border-radius);
}
blockquote::before {
font-family: arial, sans-serif;
content: "\201C";
color: var(--primary);
font-size: 6em;
position: absolute;
left: 15px;
top: -20px;
}
blockquote cite{
display: block;
text-align: right;
color: var(--secondary);
}  .cust__category{
list-style: none;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
gap: 10px;
place-items: center;
color: var(--txt-light);
}
.cust__category li{
background: var(--primary);
padding: 4px 8px;
line-height: 1;
border-radius: var(--border-radius);
transition: ease-in-out .5s;
}
.cust__category li a{
font-size: .9em;
color: inherit;
} .custom_tag{
display: flex;
place-items: center;
gap: 5px;
margin: 10px 0;
}
.custom_tag span{
flex: 0 0 65px;
padding:5px 10px ;
line-height: 1;
color: var(--txt-light);
background-color: var(--primary);
border-radius: var(--border-radius);
}
.custom_tag-link{
position: relative;
list-style: none;
display: flex;
flex-flow: row nowrap;
gap: 5px;
place-items: center;
color: var(--txt-dark);
}
.single_content .custom_tag-link{
margin: unset;
}
.custom_tag-link li{
padding: 5px 10px;
line-height: 1;
text-transform: capitalize;
border-radius: var(--border-radius);
background-color: #f9f9f9b4;
}
.custom_tag-link li a{
color: transparent;
background: linear-gradient(132deg, var(--primary) 0%, var(--secondary) 100%);
background-clip: text;
} .crumbs__link{
color: var(--txt-dark);
}
.crumbs__current{
color: var(--secondary);
} .boxheader{
height: 30px;
color: var(--primary);
display: flex;
flex-direction: row;
place-content: space-between;
place-items: center;
position: relative;
padding-bottom: 10px;
border-bottom: 2px solid rgb(239 239 239 / 50%);
}
.bh__title::after{
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 40px;
border-bottom: 2px solid var(--secondary);
}
.bh__title{
font-weight: 500;
color: var(--primary);
line-height: 30px;
position: relative;
font-size: 1.14em;
}
.bh__button{
color: var(--primary);
z-index: 2;
text-transform: capitalize;
font-size: 80%;
line-height: 30px;
transition: ease-in-out .5s;
}
.bh__button:hover{
color: var(--txt-light);
background: var(--primary);
padding: 0 .8em;
}  .rotate{
transition:transform ease-in-out .5s;
transform: rotate(360deg);
}  .facebook{
background-color: #3b5998;
}
.instagram{
background:linear-gradient(45deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
}
.twitter{
background-color: #1DA1F2;
}
.linkedin{
background:linear-gradient(45deg, #0077b5, #000000, #313335, #86888a, #caccce, #00a0dc);
}
.whatsapp{
background:#00E676;
} .wrapcontent{
max-width: var(--max-width);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap:30px;
position: relative;
}
.fullbar{
flex: 0 0 100%;
display: flex;
flex-direction: column;
gap: 30px;
}
.leftbar {
flex: 0 0 calc(100% - 330px);
max-width: calc(100% - 330px);
}
.rightbar {
flex: 0 0 300px;
position: -webkit-sticky;
height: fit-content;
position: sticky; 
top: 30px;
}
.col-2{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.col-3{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.col-4{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
.flex-row{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 40px;
}
.flex-col{
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 40px;
}  header{
padding: 0 var(--center) 20px;
}
.searchbtn{
cursor: pointer;
}
.headlog{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
place-items: center;
place-content: space-between;
padding: 15px 0;
}
.headlog a > b {
font-size: 250%;
display: block;
color: var(--secondary);
}
.headlog a > span{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-overflow: ellipsis;
overflow: hidden;
font-style: italic;
}
.headlog a{
color:var(--primary);
flex-basis: calc(100% - 748px);
transition: ease-in-out .5s;
}
.headlog a:hover{
transform: scale(0.97);
}
.headlog > a > img {
max-width: 350px;
max-height: 75px;
object-fit: cover;
object-position: center;
}
.headnav{
background-color: var(--primary);
display: flex;
flex-wrap: wrap;
flex-direction: row;
position: relative;
place-items: center;
place-content: space-between;
padding: 0 20px;
}
.headnav i, .headnav a{
color: var(--txt-light);
}
.headnav a:hover{
color: rgba(255, 255, 255, 0.6);
}
.headnav-meta{
display: flex;
flex-wrap: wrap;
flex-direction: row;
place-items: center;
place-content: flex-end;
gap: 15px;
flex:0 0 80px;
} #mode {
width: 50px;
height: 22px;
background: #ffffff;
position: relative;
cursor: pointer;
border-radius: 25px;
}
#mode .fa-solid{
font-size: 15px;
color: var(--txt-light);
line-height: 22px;
z-index: 1;
}
#mode .icon-sun{
position: absolute;
top: 50%;
left: 0;
content: url(//muslimahtrendy.com/wp-content/themes/megazine-dev/images/sun.svg);
filter: invert(1);
width: 22px;
height: 22px;
transform: translate(0, -50%);
}
#mode .icon-moon{
position: absolute;
top: 50%;
right: 4px;
content: url(//muslimahtrendy.com/wp-content/themes/megazine-dev/images/moon.svg);
width: 12px;
height: 12px;
transform: translate(0, -50%);
filter: invert(1);
}
#mode:before {
content: "";
position: absolute;
top: 1px;
bottom: 1px;
left: 1px;
right: 0;
width: 20px;
height: 20px;
background-color: var(--secondary);
transition: ease-in-out .5s;
border-radius: 20px;
}
#mode.dark:before {
transform: translateX(calc(49px - 20px));
}  .menu-open{
height: 50px;
display: none;
color: var(--txt-light);
cursor: pointer;
}
.nav{
position: relative;
display: inline-flex;
flex-direction: row;
place-content: flex-start;
place-items: center;
height: 50px;
}
.nav li {
position: relative;
list-style: none;
line-height: 50px;
padding: 0 14px;
}
.nav li a{
font-weight: 600;
cursor: pointer;
}
.nav > li > ul{
border-top: 2px solid var(--secondary);
} .nav li .dropli {
position: absolute;
right: -24px;
top: 50%;
width: 20px;
cursor: pointer;
z-index: 10;
transition: ease-in-out .5s;
font-size: 12px;
}
.nav li ul li .dropli{
top: 15px;
}
.nav li:has(ul) a{
padding-right: 10px;
} .nav li ul{
position: absolute;
top:100%;
left: 0;
width: 250px;
padding: 10px;
display: none;
z-index: 3;
background: var(--primary);
}
.nav li ul li{
position: relative;
line-height: 30px;
padding: 0 10px 0 0;
} .nav li ul li ul{
position: unset;
width: 100%;
padding: 0;
margin-left: 10px;
}
.nav li ul li ul li{
padding-right: 20px;
} .nav li ul li ul li ul{
padding: 0;
margin-left: 20px;
}
.nav .nav li ul li:hover > a{
color: var(--secondary);
}
.nav li .dropli.active{
transform: rotateX(-180deg) translate(-50%, 50%);
}
i.dropdown{
content: url(//muslimahtrendy.com/wp-content/themes/megazine-dev/images/downArrow.png);
object-fit: none;
object-position: center;
display: inline-block;
width: 30px!important;
height: 10px!important;
transform:translate(-50%, -50%);
}
.nav ::-webkit-scrollbar{
display: none;
}
.nav li .active{
display: block;
} .headnav__cta{
text-align: center;
width: 45px;
line-height: 40px;
cursor: pointer;
transition: ease-in-out .5s;
background-color: var(--secondary);
padding: 5px 10px;
margin-left: -20px;
flex:0 0 45px;
}
.headnav__cta:hover i{
opacity: .7;
}
.headnav__cat{
position: absolute;
top: calc(100% + 10px);
left: 0;
min-width: 310px;
background: var(--primary);
padding: 5px 10px;
display: none;
z-index: 9999;
font-weight: 600;
}
.headnav__cat::before{
content: '';
position: absolute;
top: -10px;
left: 15px;
width: 20px;
height: 20px;
background: var(--primary);
-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.headnav__cat::-webkit-scrollbar{
display: none;
}
.headnav__cat ul li{
list-style-type: none;
padding: 4px;
margin: 0;
position: relative;
}
.headnav__cat ul li:last-child {
border-bottom: none;
}
.headnav__cat li li{
margin-left: 12px;
border-bottom: none;
}
.headnav__cat li li:before {
content: "";
position: absolute;
top: 5px;
right: 100%;
width: 7px;
height: 10px;
border-bottom: 1px solid var(--box-bg);
border-left: 1px solid var(--box-bg);
}
.headnav__cat > ul > li > .children {
overflow: hidden;
max-height: 0;
padding-left: 20px;
transition: ease-in-out .5s;
}
.headnav__cat > ul > li > .children:after {
content: " ";
position: absolute;
top: 8px;
right: 0;
width: 30px;
height: 10px;
background-image: url(//muslimahtrendy.com/wp-content/themes/megazine-dev/images/downArrow.png);
background-repeat: no-repeat;
background-position: right;
}
.headnav__cat li:hover .children {
display: block;
max-height: 50px;
overflow: auto;
} .headnav input:where([type=text],[type=submit]){
line-height: 25px;
}
.headnav button[type=submit]{
outline: none;
border: none;
color: var(--txt-light);
line-height: 25px;
width: 25px;
background: transparent;
}  .baliho{
overflow: hidden;
} .tabmenu{
display: flex;
flex-direction: row;
gap:15px;
}
.tabmenu .tablinks{
color: var(--txt-dark);
background: transparent;
outline: none;
border: none;
font-weight: 400;
cursor: pointer;
}
.tabmenu .tablinks:hover, .tablinks.active{
color: var(--secondary)!important;
} .tabcontent{
display: none;
animation: fade-in 0.5s ease-in-out 1;
position: relative;
}  .box-thumb{
position: relative;
overflow: hidden;
background: #f2f2f23b;
}
.box-thumb img{
width: -webkit-fill-available;
height: -webkit-fill-available;
object-fit: cover;
object-position: center;
transition: ease-in-out .5s;
}
.boxcard_content{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
place-content: start;
gap: 10px;
position: relative;
}
.box-title{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.box-meta{
display: flex;
place-content: flex-start;
gap: 10px;
}
.box-meta p{
margin: 0px;
display: inline-flex;
place-items: center;
}
.box-meta p i {
margin-right: 5px;
font-size: medium;
color:var(--secondary);
}
.box-excerpt{
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
overflow: hidden;
text-overflow: ellipsis;
margin: 0;
}
.boxcard{
display: flex;
flex-direction: column;
gap: 15px;
}
.boxcard .boxcard_content .box-meta,
.boxcard .boxcard_content .box-excerpt
{
font-size: 95%;
color: #424449;
} 
.boxcard .boxcard_content .box-title{
color: var(--txt-dark);
}
.boxcard .boxcard_content .box-title{
font-size: 1.3em;
}
.boxcard-list{
display: flex;
flex-flow: row wrap;
}
.boxcard-list .boxcard_content .box-meta,
.boxcard-list .boxcard_content .box-excerpt
{
color: #424449;
} 
.boxcard-list .boxcard_content .box-title{
color: var(--txt-dark);
-webkit-line-clamp: 2;
}
.boxcard-list .box-thumb{
flex: 1 0 100px;
height: 100px;
}
.boxcard-list .boxcard_content{
flex: 1 0 calc(100% - 100px);
padding: 10px;
}
.boxcard-list .boxcard_content .box-meta{
font-size: 90%;
}
.boxcard-list .boxcard_content .box-excerpt{
display: none;
}
.boxcard-float{
position: relative;
}
.boxcard-float .boxcard_content{
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.85) 100%);
}
.boxcard-float .boxcard_content a, 
.boxcard-float .boxcard_content .box-title,
.boxcard-float .boxcard_content .box-meta,
.boxcard-float .boxcard_content .box-excerpt{
color: var(--txt-light);
}   .featured-post-wrap{
grid-template-rows: 192.5px 100px 192.5px;
gap: 5px;
}
.featured-post-wrap .cust__category li{
background: unset;
padding: unset;
}
.featured-post-wrap .cust__category li,
.featured-post-wrap .box-meta{
font-size: 0.95em;
}
.featured-post-wrap .boxcard-float:first-child .box-title,
.featured-post-wrap .boxcard-float:last-child .box-title{
font-size: 1.5em;
}
.featured-post-wrap .boxcard-float:first-child .box-meta p:first-child,
.featured-post-wrap .boxcard-float:last-child .box-meta p:first-child{
display: none;
}
.featured-post-wrap .boxcard-float .box-thumb{
width: 100%;
height: 100%;
}
.featured-post-wrap .boxcard-float:first-child .box-excerpt,
.featured-post-wrap .boxcard-float:last-child .box-excerpt,
.featured-post-wrap .boxcard-float:first-child .box-title,
.featured-post-wrap .boxcard-float:last-child .box-title,
.featured-post-wrap .boxcard-float:not(:first-child):not(:last-child) .box-title{
-webkit-line-clamp: 2;
}
.featured-post-wrap .boxcard-float:not(:first-child):not(:last-child) .boxcard_content{
gap: 5px;
}
.featured-post-wrap .boxcard-float .box-excerpt,
.featured-post-wrap .boxcard-float:not(:first-child):not(:last-child) .box-meta,
.featured-post-wrap .boxcard-float:not(:first-child):not(:last-child) .play_thumb{
display: none;
}
.featured-post-wrap .boxcard-float:first-child{
grid-column: 1 / 3;
grid-row: 1 / 3;
}
.featured-post-wrap .boxcard-float:last-child{
grid-column: 3 / 5;
grid-row: 2 / 4;
}
.featured-post-wrap .boxcard-float .boxcard_content{
top: 50px;
place-content: flex-end;
}
#sliderpost{
max-width: var(--max-width);
margin: 0 auto;
box-shadow: 0 3px 4px 0 rgba(117, 117, 117, 0.15);
}
#sliderpost .boxcard{
flex-direction: row;
flex-wrap: wrap;
height: 450px;
}
#sliderpost .boxcard .box-thumb{
flex: 0 0 500px;
height: 100%;
}
#sliderpost .boxcard .boxcard_content{
flex: 0 0 calc(100% - 515px);
padding: 20px;
}
#sliderpost .boxcard .boxcard_content .cust__category *, 
#sliderpost .boxcard .boxcard_content .link_404{
color: var(--txt-light);
}
#sliderpost .boxcard .boxcard_content .box-title{
font-size: 1.8em;
background-image: linear-gradient(to right, var(--primary) 0%, var(--secondary) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
#sliderpost .boxcard .boxcard_content .link_404{
margin: unset;
}
#sliderpost .boxcard .boxcard_content svg{
position: absolute;
top: 0;
left: -77px;
width: 62px;
mix-blend-mode: hard-light;
}  #feattab{
display: flex;
flex-direction: column;
gap: 20px;
max-width: 100%;
}
#feattab .bh__title{
flex: 0 0 200px;
}
#feattab .featured-cat-wrap{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(4, 100px);
gap: 20px;
}
#feattab .featured-cat-wrap .boxcard{
grid-column: span 1;
grid-row: span 4;
}
#feattab .featured-cat-wrap .boxcard .box-thumb{
flex-basis: 220px;
}
#feattab .featured-cat-wrap .boxcard .box-excerpt{
-webkit-line-clamp: 4;
}
#feattab #viewcat{
display: inline-flex;
flex-wrap: wrap;
flex-direction: row;
place-items: center;
padding: 7px 14px;
position: absolute;
bottom: 0px;
left: 0;
background-color: var(--primary);
border-radius: var(--border-radius);
color: var(--txt-light);
}
#feattab #viewcat:hover{
background-color: var(--secondary);
color: var(--txt-light);
transform: scale(0.9);
}  .featured-video-wrap{
grid-template-rows: 30px 433px auto;
}
.featured-video-wrap .boxheader{
grid-column: span 4;
grid-row: 1 ;
}
.featured-video-wrap .boxcard-float{
grid-column: span 4;
grid-row: 2 / 3;
}
.featured-video-wrap .boxcard-float .box-thumb{
height: 100%;
}
.featured-video-wrap .boxcard .box-thumb{
height: 100px;
}
.featured-video-wrap .boxcard-float .boxcard_content .box-title{
font-size: 1.4em;
}
.featured-video-wrap .boxcard-float .boxcard_content .box-excerpt{
-webkit-line-clamp: 3;
}
.featured-video-wrap .boxcard .boxcard_content .box-title{
font-size: 90%;
-webkit-line-clamp: 2;
}
.featured-video-wrap .boxcard .boxcard_content .box-meta,
.featured-video-wrap .boxcard .boxcard_content > p,
.featured-video-wrap .boxcard .box-thumb .play_thumb{
display: none;
}  #latest-news{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
}
#latest-news .boxheader{
flex: 1 1 100%;
margin: unset;
}
#latest-news .boxcard-float{
flex-basis: 100%;
}
#latest-news .boxcard-float .box-thumb{
height: 420px;
}
#latest-news .boxcard-float .boxcard_content .box-title{
font-size: 1.4em;
}
#latest-news .boxcard{
flex-wrap: wrap;
flex-direction: row;
}
#latest-news .boxcard .box-thumb{
height: 250px;
flex-basis: 370px;
}
#latest-news .boxcard .boxcard_content{
flex-basis: calc(100% - 385px);
}
#latest-news .boxcard .box-title,
#latest-news .boxcard-float .box-title{
-webkit-line-clamp: 2;
}
#latest-news .boxcard-float .box-excerpt{
-webkit-line-clamp: 3;
}
#latest-news .boxcard .box-excerpt{
-webkit-line-clamp: 7 ;
}    #most-popular-wrap{
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 20px;
}
#most-popular-wrap .boxcard-list{
gap: 10px;
}
#most-popular-wrap .boxcard-list .box-thumb{
height: 80px;
flex-basis: 80px;
border-radius: 50%;
}
#most-popular-wrap .boxcard-list .boxcard_content{
flex-basis: calc(100% - 90px);
padding: unset;
place-content: start;
}   .single-wrap{
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 20px;
}
.single_head{
display: flex;  
flex-wrap: wrap;
flex-direction: column;
gap: 10px;
}
.single__img{
height: 400px;
}
.single__img iframe{
width: 100%;
height: 100%;
}
.single__img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.metasingle{
display: flex;
flex-direction: row;
gap: 10px;
place-items: center;
text-transform: capitalize;
}
.metasingle-profil {
clip-path: circle(50%);
}
.single_content {
width: 100%;
line-height: 1.8;
}
.single_content > p:first-child::first-letter{
float: left;
font-size: 4em;
margin-right: 0.1em;
line-height: 50px;
}
.single_content p {
margin: 10px 0;
}
.single_content ul{
list-style-position: inside;
margin: 10px 10px 10px 30px;
}
.single-share-wrap{
display: flex;
flex-direction: row;
flex: 1 0 50px;
gap: 20px;
place-items: center;
place-content: space-between;
margin: 20px 0;
border: 1px solid var(--box-border);
border-left: none;
border-right: none;
padding: 10px 0;
}
.single-share-wrap span{
flex: 0 0 70px;
text-transform: uppercase;
font-weight: 600;
}  .comments,
.comments input[type=text],
.comments textarea {
width: 100%;
}
.comments label {
font-weight: 600;
}
.comments article {
margin: 15px 0;
}
.comments input[type=radio] {
margin: 0 5px;
color: #ccc;
}
.comments article p {
display: table;
background: var(--colorbg);
padding: 10px;
margin: 5px 0;
}
.comment-respond {
margin: 0;
}
.com__author{
font-weight: 600;
color: var(--txt-dark);
text-transform: capitalize;
margin: 0px;
}
.comments ul li {
list-style-type: none;
margin:0px 0px 20px 0px ;
}
.comments ul.children{
margin-top: 10px;
}
.comments li li {
margin-left: 5%;
}
.cominfo {
display: inline-block;
}
.cominfo a .small{
color: var(--txt-dark);
}
.comments .comwrap .comtext{
margin: 5px 0px 0px 80px;
background: #f2f2f23b;
padding: 20px;
position: relative;
border-radius: 0px 10px 10px 11px;
}
.comments .comwrap .comtext::before{
content: "";
width: 15px;
height: 15px;
background: #f2f2f23b;
position: absolute;
left: -15px;
top: 0px;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.comments .comwrap .comtext p{
margin: 0;
}
.com__btn{
display: flex;
flex-direction: row;
gap: 10px;
padding: 10px;
place-content: flex-end;
margin: 20px 0px 0px;
}
.comments li img{
border-radius: 50%;
float: left;
margin-right: 20px;
}
.comments li li img{
width: 45px;
height: 45px
}
.comment_text {
padding: 0px;
}
#cancel-comment-reply-link{
margin: 0 10px;
background: var(--primary);
padding: 0px 10px;
color: var(--text-light);
} #respond {
padding: 20px;
background: var(--box-bg);
}
#respond label{
font-weight: 600;
}
#respond input[type="text"],
#respond input[type="email"],
#respond input[type="url"],
#respond textarea {
width: 100%;
padding: 10px;
margin: 10px 0;
border: none;
background: #fff;
outline: none;
resize: none;
font-family: var(--font-family);
}
#respond input[type="submit"] {
padding: 10px 20px;
background: var(--primary);
color: #fff;
border: none;
margin-top: 20px;
}
input[type="checkbox"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff; outline: none;
cursor: pointer;
}
input[type="checkbox"]:checked {
background-color: var(--primary); }
input[type="checkbox"]:before {
content: "\2714";
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
color: #fff; font-size: 15px;
}  .archive-wrap{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 30px;
}
.archive-wrap .boxheader{
flex-basis: 100%;
}
.archive-wrap .boxcard{
flex-direction: row;
}
.archive-wrap .boxcard .box-thumb{
height: 250px;
flex:1 0 366px;
}
.archive-wrap .boxcard .boxcard_content{
flex-basis: auto;
} .archive-cat-box{
padding: 30px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
place-content: center;
place-items: center;
gap: 8px;
position: relative;
background-color: var(--primary);
border-radius: var(--border-radius);
}
.archive-cat-box:before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.archive-cat-box-thumb{
clip-path: circle(45px);
}
.archive-cat-box .archive-cat-box-desc{
text-align: center;
position: relative;
}
.archive-cat-box-count{
background: rgba(255,255,255,.2);
padding: 5px 10px;
border-radius: var(--border-radius);
backdrop-filter: blur(5px);
}
.archive-cat-box .archive-cat-box-desc, 
.archive-cat-box .archive-cat-box-title,
.archive-cat-box-count{
color: var(--txt-light);
}
.archive-cat-box-title{
font-size: 2em;
position: relative;
}
.archive-cat-box-count b{
margin-right: 5px;
}  .wrap404{
display: flex;
flex-flow: row wrap;
place-content: center;
place-items: center;
gap: 20px;
max-width: 100%;
}
.wrap404 img {
flex: 0 0 600px;
max-width: 600px;
}
.wrap404 > div {
flex: 0 0 calc(100% - 620px);
}
.title__404{
font-size: 10em;
line-height: 120px;
color: #e1e1e1;
}
.subtit__404{
display: block;
font-size: 2em;
color:#e1e1e1;
margin: 210px 0px 0;
}
.info__404{
display: block;
margin: 5px 0 20px;
font-size: 1.2em;
color:#e1e1e1;
}
.notice__404{
font-size: 1.3em;
width: 200px;
height: 200px;
background: var(--primary);
color: #e1e1e1;
padding: 20px;
border-radius: var(--border-radius);
}
.wrap404 .four_zero_four_bg img {
width: 100%;
}
.four_zero_four_bg {
height: 400px;
background-position: center;
background-blend-mode: multiply;
mix-blend-mode: multiply;
}
.link_404 {
color: #fff!important;
padding: 10px 20px;
background: var(--secondary);
margin: 20px 0;
display: inline-block;
position: relative;
z-index: 1;
overflow: hidden;
font-weight: 600;
border-radius: var(--border-radius);
}
.link_404:before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:linear-gradient(40deg, transparent 0%, rgba(255,255,255,.4) 50%, transparent 100%);
z-index: -1;
transform: translate(100%);
transition: ease-in-out .5s;
}
.link_404:hover:before{
transform: translate(-100%);
}  :where(footer) :is( ul li a, ul li, .copyright){
color: var(--txt-light);
}
footer a:hover{
color: var(--text-light);
text-decoration: underline;
}
footer{
margin-top: 20px;
padding: 50px var(--center) 20px;
position: relative;
z-index: 0;
background: var(--primary);
color: var(--txt-light);
z-index:2;
}
footer::after{
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
opacity:.2;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
footer:where(.widget, .widget a, .copyright, .copyright a){
color:inherit;
}
footer ul{
list-style: disc;
list-style-position: inside;
}
footer ul li{
margin-bottom: 5px;
}
.widget{
margin-bottom: 20px;
}
.widget__judul{
color: var(--txt-light);
padding-bottom: 10px;
position: relative;
margin-bottom: 20px;
}
.widget__judul::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: var(--secondary);
} #calendar_wrap {
border: 1px solid var(--box-border);
padding: 20px;
}
#calendar_wrap h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 10px;
text-align: center;
}
#calendar_wrap table {
width: 100%;
border-collapse: collapse;
}
#calendar_wrap table caption{
font-weight: 600;
padding: 10px 0;
}
#calendar_wrap th,
#calendar_wrap td {
text-align: center;
vertical-align: middle;
padding: 5px;
}
#calendar_wrap th {
border-bottom: 1px solid var(--box-border);
background-color: var(--primary);
font-weight: 600;
text-transform: uppercase;
}
#calendar_wrap td {
background-color: var(--secondary);
}
#calendar_wrap td#today {
background-color: var(--primary);
}
#calendar_wrap td#today a {
font-weight: 600;
color:var(--secondary);
}
#calendar_wrap td a {
display: block;
text-decoration: none;
color: var(--txt-light);
}
#calendar_wrap td a:hover {
background-color: #227CF2;
}
#calendar_wrap .wp-calendar-nav{
padding: 5px 0;
}
#calendar_wrap .wp-calendar-nav-prev a{
color: inherit;
} .widget select {
display: block;
width: 80%;
padding: 5px;
border-radius: 5px;
background-color: var(--box-bg);
color: var(--txt-dark);
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M4 12h24c1.105 0 2 .895 2 2s-.895 2-2 2H4c-1.105 0-2-.895-2-2s.895-2 2-2zm24 8H4c-1.105 0-2-.895-2-2s.895-2 2-2h24c1.105 0 2 .895 2 2s-.895 2-2 2z"/></svg>');
background-repeat: no-repeat;
background-position: right 5px center;
background-size: 20px 10px;
cursor: pointer;
outline: none;
}
.widget select option {
padding: 5px;
background-color: var(--box-bg);
color: var(--txt-dark);
}
.widget select:focus {
outline: none;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
}
.widget-recent-posts{
position: relative;
padding-left: 15px;
list-style: none;
}
.widget-recent-posts::before{
content: "";
position: absolute;
left: 0;
top: 2px;
width: 2px;
height:calc(100% - 50px);
background: var(--box-border);
}
.widget-recent-posts li{
position: relative;
padding: 0px 0px 16px;
list-style: none;
}
.widget-recent-posts li > span{
display: block;
font-weight: 600;
padding-bottom: 5px;
}
.widget-recent-posts li:before{
content: "";
width: 12px;
height: 12px;
background: var(--box-bg);
border: 2px solid var(--primary);
outline: 2px solid var(--box-border);
position: absolute;
left: -20.5px;
top: 2px;
bottom: 2px;
display: inline-block;
border-radius: 50%;
-webkit-transform: translateZ(0);
transform: translateZ(10px);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-duration: 0.3s;
}
.widget-recent-posts li:after {
clear: both;
display: table;
content: "";
}
.widget-recent-posts li:hover:before{
background: var(--secondary);
outline: 2px solid var(--secondary);
}
.custom-widget-gallery{
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: 10px;
}
.tagcloud{
color: var(--txt-light);
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tagcloud a{
padding: 6px 12px;
color: inherit;
border: 1px solid var(--txt-light);
font-size: 1em!important;
}
.tag-link-count{
margin-left: 5px;
}
footer .copyright{
grid-column: 1/4;
margin: 0;
}
footer .copyright span{
margin-left: 5px;
}
footer .copyright .small{
font-size: .8em;
}  .seo{
font-size: 0;
display: none;
}
.jumbo{
font-size: 300%;
font-weight: 600;
}
.hscroll{
white-space: nowrap;
overflow: auto;
}
.hscroll::-webkit-scrollbar{
display: none;
}
.text-dark{
color: var(--txt-dark);
}
.text-light{
color: var(--txt-light);
}
.readmore{
background: var(--secondary);
color: var(--txt-light);
padding: .4em 1em;
border-radius: var(--border-radius);
}
.limit-title{
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
white-space: pre-wrap;
text-overflow: ellipsis;
}
.limit-2{
-webkit-line-clamp: 2;
}
.play_thumb{
display: block;
height: 40px;
width: 40px;
background: #f8f8f855;
fill: var(--box-bg);
outline: 8px solid #f8f8f855;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: ease-in-out .5s;
}
#latest-news .play_thumb, 
.featured-cat-wrap .play_thumb, 
.featured-video-wrap .play_thumb, 
.archive-wrap .play_thumb,
.search-wrap .play_thumb, 
.recent-post-wrap .play_thumb{
width: 30px;
height: 30px;
outline-width: 5px;
}
.play-durasi{
position: absolute;
top: 0;
left: 0;
background: rgba(0, 0, 0, 0.2);
color:var(--txt-light);
padding: 5px 10px;
margin: 10px 0 0 10px;
border-radius: var(--border-radius);
z-index: 2;
}
.featured-post-wrap .boxcard-float:not(:first-child) .play-durasi{
display: none;
}
.popup{
min-width: 300px;
max-width: 1000px;
display: none;
padding: 15px;
border-radius: var(--border-radius);
}
#player{
width: 800px;
height: 400px;
padding: 0;
}
#player iframe{
width: 100%;
height: 100%;
}  .pagination{
display: flex;
flex-direction: row;
gap: 7px;
place-content: center;
place-items: center;
}
.current{
color: var(--txt-light);
background: var(--secondary);
border-radius: 0.3em;
}
.page-numbers{
padding: 10px;
line-height: 5px;
transition: ease-in-out .5s;
}
.page-numbers:hover{
transform: scale(1.15);
}  .author-box{
background-size: cover;
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-blend-mode: multiply;
background-color:var(--primary);
padding: 20px;
position: relative;
border-radius: var(--border-radius);
}
.author-box, .author-box a, .author-box-name{
color: var(--txt-light);
} 
.author-box-thumb{
display: inline-flex;
place-content: center;
place-items: center;
border: 4px solid transparent;
outline: 2px solid var(--box-bg);
border-radius: 50%;
float: left;
margin-right: 10px;
}
.author-box-thumb img{
clip-path: circle(50%);
}
.author-box-name{
font-size: 2em;
margin-bottom: 10px;
}
.author-box-count{
position: absolute;
top: -24px;
right: 10px;
display: inline-flex;
flex-direction: column;
place-items: center;
background-color: var(--box-bg);
padding: 0 5px;
border-radius: var(--border-radius);
box-shadow: var(--secondary) 1.95px 1.95px 2.6px;
color: var(--secondary);
}
.author-box-count b{
font-size: 35px;
}
.author-box-desc{
text-align: justify;
}
.author-box-sosmed{
display: flex;
flex-direction: row;
flex-wrap: wrap;
place-content: baseline;
gap :10px;
margin-top: 20px;
}
.author-box-sosmed a{
display: inline-flex;
padding: 4px 8px;
border-radius: var(--border-radius);
place-items: center;
flex: 0 0 118px;
}
.author-box-sosmed a i{
margin-right: 5px;
} .button-sidebar{
display: none;
cursor: pointer;
width: 36px;
height: 36px;
background: var(--secondary);
position: absolute;
top: 50vh;
right: 100%;
place-content: center;
place-items: center;
z-index: 999;
}
.button-sidebar i {
color: var(--box-bg);
} #button-to-top {
position: fixed;
bottom: 20px;
right: 40px;
z-index: 3;
background: var(--box-bg);
box-shadow: 0px 3px 4px rgba(0,0,0,.15);
border-radius: 5px;
width: 40px;
height: 40px;
display: none;
}
#button-to-top i {
color: var(--secondary);
font-size: 1.3em;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%,-55%);
} .hot-category ul{
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.hot-category ul li{
padding: 10px;
background: var(--primary);
color: var(--txt-light);
position: relative;
}
.hot-category ul li a{
color: var(--txt-light);
}
.hot-category ul li a>span{
position: absolute;
right: 20px;
} .widget_tags{
list-style: none;
}
.widget_tags li{
padding: 5px;
border: 1px solid var(--primary);
float: left;
margin:0px 5px 5px 0px;
}  .shareit {
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
flex: 1 0 auto;
gap: 10px;
place-items: center;
place-content: flex-end;
}
.shareit a{
color: var(--txt-light);
}
.shareit a{
flex: 0 0 20%;
display: inline-flex;
flex-direction: row;
padding: 4px 8px;
border-radius: var(--border-radius);
}
.shareit a i{
margin-right: 5px;
}  .owl-dots {
display: flex;
justify-content: center;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
}
.owl-dot {
display: block;
margin: 0 5px;
width: 15px;
height: 15px;
outline:  2px solid rgba(255,255,255,.9);
border-radius: 50%;
background-color: #464646!important;
opacity: .4;
}
.owl-dot.active {
opacity: 1;
}
.owl-nav {
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 50%;
left: 50px;
right: 50px;
transform: translateY(-50%);
opacity: 0;
transition: ease-in-out .5s;
}
.owl-carousel:hover .owl-nav{
opacity: 1;
left: 20px;
right: 20px;
}
.owl-nav .owl-prev,
.owl-nav .owl-next {
display: block;
cursor: pointer;
position: relative;
width: 40px;
height: 40px;
border-radius: var(--border-radius);
background-color: #00000048!important;
}
.owl-nav .owl-prev span,
.owl-nav .owl-next span{
color: #ffffff!important;
font-size: 30px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-55%);
}
.owl-nav .owl-prev {
margin-left: 10px;
}
.owl-nav .owl-next {
margin-right: 10px;
}  .wrap-newsticker{
margin: 0 var(--center);
height: 36px;
box-shadow: 0 3px 4px 0 rgba(117, 117, 117, 0.15);
}
.newsticker {
display: block;
height: 36px!important;
line-height: 36px;
color: var(--txt-light);
padding-left: 120px;
}
.newsticker::before{
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 36px;
}
.newsticker li, .newsticker a{
color:var(--txt-dark);
}
.newsticker li {
margin-right: 36px;
font-size: 14px;
list-style-type: none;
}
.newsticker li span {
color: var(--txt-light);
background: var(--secondary);
border-radius: var(--border-radius);
padding: 3px 6px;
margin-right: 5px;
font-size: 10px;
text-transform: uppercase;
font-weight: 600;
}
.newsticker:after {
content: 'Breaking News';
position: absolute;
top: 0;
left: 0;
height: 36px;
padding: 0 12px;
font-weight: 600;
font-size: 14px;
color: var(--text-light);
background: var(--primary) ;
} .search-wrap{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
flex: 0 0 auto;
place-content: center;
}
.search-wrap .boxheader{
flex: 0 0 100%;
}
.search-wrap .boxcard{
flex-direction: row;
gap: 20px;
}
.search-wrap .boxcard .box-thumb{
height: 250px;
flex: 0 0 366px;
}
.search-wrap .boxcard .boxcard_content{
flex:0 0 calc(100 - 386px);
}
.wrap-notice .jumbo{
font-size: 5em;
}
.wrap-notice div p b{
font-size: 150%;
color: var(--secondary);
}  .recent-post-wrap{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
width: 100%;
}
.recent-post-wrap .boxheader{
flex: 0 0 100%;
}
.recent-box{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 20px;
flex: 1 0 100%;
}
.recent-box .boxcard{
flex: 1 0 30%;
}
.recent-box .boxcard .box-title,
#slidersmall-post .boxcard .box-title{
-webkit-line-clamp: 2;
font-size: 1.1em;
}
#slidersmall-post .boxcard .box-excerpt{
-webkit-line-clamp: 2;
}
.recent-box .box-excerpt,
.recent-box .box-meta p:first-child{
display: none;
}
.recent-post-wrap .boxcard .boxcard_content .box-meta{
display:none;
}
.recent-box .boxcard .box-thumb,
#slidersmall-post .boxcard .box-thumb{
flex: 0 0 145px;
}
.recent-box .boxcard .boxcard_content{
flex: 1 0 auto;
}
#slidersmall-post .boxcard .boxcard_content{
flex: 0 0 auto;
}  .gmr_parallax{
width: 100%;
position: relative;
margin: 0 0 20px;
display: flex;
justify-content: center;
height: 630px;
min-height: 630px;
-webkit-clip-path: polygon(0px 0px,100% 0px,100% 100%,0px 100%) !important;
clip-path: polygon(0px 0px,100% 0px,100% 100%,0px 100%) !important;
}
.rellax{
top: 50%;
transform: translateY(-50%);
position: fixed;
z-index: 1;
margin: auto;
text-align: center;
}
.in_rellax img{
border-style: none;
vertical-align: middle;
height: auto;
max-width: 100%;
}  .gmr_floating{
position: fixed;
max-width: 160px;
max-height: 600px;
overflow: hidden;
}
.gmrbtnclose{
position: absolute;
top: 5px;
box-shadow: none !important;
text-align: center;
padding: 0 !important;
margin: 0 !important;
background-color: var(--box-bg);
z-index: 9;
width: 26px !important;
min-width: 26px !important;
height: 26px !important;
font-size: 22px;
line-height: 26px !important;
border-radius: var(--border-radius);
box-shadow: 0px 1px 1px 0px rgba(0,0,0,.2);
}
.gmrbtnclose.gmrbtnclose--left{
right: 5px;
}
.gmrbtnclose.gmrbtnclose--right{
left: 5px;
}
.gmr_floating--left{
left: 50%;
margin-left: -725px;
position: fixed;
top: 15px;
justify-content: flex-end;
display: flex;
z-index: 2;
}
.gmr_floating--right{
right: 50%;
margin-right: -725px;
position: fixed;
top: 15px;
justify-content: flex-start;
display: flex;
z-index: 2;
}  .hotwrap{
display: flex;
flex-direction: column;
gap: 15px;
}
.hotcat{
display: flex;
flex-direction: column;
gap: 15px;
list-style: none;
}
.hotcat li{
position: relative;
height: 50px;
color: var(--txt-light);
background: linear-gradient(132deg, var(--primary) 0%, var(--secondary) 100%);
display: flex;
place-items: center;
padding-left: 10px;
transition: ease-in-out .5s;
}
.hotcat-overlay{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(225deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
}
.hotcat li a{
position: relative;
}
.hotcat li span{
position: absolute;
top: 50%;
right: 10px;
transform: translate(0, -50%);
padding: 5px;
width: 30px;
display: flex;
place-content: center;
place-items: center;
background-color: rgba(255,255,255,.2);
backdrop-filter: blur(10px);
border-radius: var(--border-radius);
padding: 10px;
transition: ease-in-out .5s;
}