*, *::before, *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
 }
:root {
  --main-bg-color: #f2fefe;
  --header-bg-color: rgba(236, 236, 236, 0.0);
  --header-font: 'Stack Sans Headline', sans-serif;
  --header-font:  'Bebas Neue', sans-serif;
  --header-txt-color: #202020;
  --body-font: 'DM Sans', sans-serif;
  --wrapper-max-width: 1366px;
  --main-txt-color: rgba(18, 12, 9, 1.00);
  --footer-bg-color: rgba(66,68,70,0.95);
	--sidebar-width : 300px;
}
body {
  color: #000;
  background-color: var(--main-bg-color);
  font-family: var(--body-font);
  text-align: center;
  margin: 0;
  padding: 0;
  color: var(--main-txt-color);
  display:flex;  
    flex-direction: column;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font);
  margin: 0 0 0.5rem 0;
  color: var(--header-txt-color);
    letter-spacing: 2px;
}
main{
    flex: 1; 
}
.wrapper {
  width: 100%;
  max-width: var(--wrapper-max-width);
  margin: 0 auto;
  padding: 2em;
    background-color: #fff; 
}

.cat-name {
font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 5px 0;
    padding: 5px 0;
    text-align: right;
    width: 100%;
    border-bottom: 1px dotted #555;
}
.featured-image {
  height: 0;
  width: 100%;
  padding-bottom: 55%;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: hidden;
  border: 0px solid red;
    font-size: clamp(1rem, 0.91rem + 0.45vw, 1.25rem);
}
.featured-image a {
  width: 100%;
  display: inline-block;
  border: 0px solid blue;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.featured-image img {
  transform-origin: center center;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
}
article {
  margin-bottom: 2em;
    background-color: #fff;
    padding: 2em 1em;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
}
article .entry {
  flex: 1 0 0;
	align-items: flex-end;
}
article h2{
	font-size: 1.5em;
	color: rgba(44,44,44,1.00);
	    margin: 0.5em 0;
      text-transform: capitalize;
}
/* ==========================================================================
index
========================================================================== */
#page {}
/* ==========================================================================
aside
========================================================================== */
aside {
  background-color: #eee;
  width: 10.55%;
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-width: 200px;
  height: 100%;
  margin-left: 10px;
}
/* ==========================================================================
homepage
========================================================================== */
#homepage {}
/* ==========================================================================
page
========================================================================== */
#page {}
/* ==========================================================================
category
========================================================================== */
#category .wrapper{
	justify-content: space-between;
}
#category article .read-more{

}
#category article{
	margin:1em 1em;
	width: calc(50% - 2em);
	padding:2em;
	align-items: flex-end;
}
#category article:nth-of-type(1) {
	width:100%;
	    flex-flow: row wrap;
}
#category article:nth-of-type(1) .entry{
}
#category article:nth-of-type(2) {

}
#category article:nth-of-type(3) {

}
#category article:nth-of-type(3n+1) {
	width:100%;
border:0px solid blue;
}
/* ==========================================================================
single
========================================================================== */
#single {}
#single article .entry{
	align-items: flex-start;
}
#single article img{
	max-width:100%;
}
/* ==========================================================================
effect
========================================================================== */

#back-to-top {
  position: fixed;
  bottom: 50px;
  right: 50px;
  transition: transform .2s ease;
  transform: translateY(100px);
  padding: 1em;
  background-color: rgba(00, 00, 00, 0.9958);
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
  color: #FFD90D;
  width:60px;
    height:60px;
  border: 0px solid red;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}
#back-to-top.scrolled {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  box-shadow: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
}
.lazy {
  opacity: 0;
  transform: scale(0.8);
  transition: all 500ms;
	transform-origin: center center;
}
.lazy.loaded {
  transition: opacity 500ms ease-in-out;
  opacity: 1;
  transform: scale(1);
  transition: all 500ms;
  /* border: 10px solid red;*/
	transform-origin: center center;
}
/*.sticky-header #header{
	transform:translateY(-100%);
	transform-origin: center;
	transition: all 300ms;	
	 transform-style: preserve-3d;
	perspective: 900px;

}
.sticky-header #header .menu{
	
}*/
/* ==========================================================================
header
========================================================================== */
.logo-main {
  width: 100%;
}
.logo-header {
  max-width: 200px;
  border: 0px solid rgba(162, 162, 162, 0.3);
  display: inline-block;
}
#header {
  position: fixed;
  background-color: var(--header-bg-color);
  top: 0;
  left: 0;
  width: 100%;
	z-index: 5;
	transition: all 500ms;
	transform:translateY(-00%);
	transform-origin: center;
	 transform-style: preserve-3d;
	background-color: rgba(255,255,255,0.0);
	            z-index: 1000;
            transition: background 0.3s ease;

}
#header .wrapper{
	padding: inherit;
}
header {
  display: flex;
  width: 99%;
  width: calc(100% - 0rem);
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 0 16px 0;
  margin: 0 0 1rem 0;
  border: 0px solid red;
}
#site-title {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: space-between;
  border: 0px solid red;
	    max-width: 1000px;
    margin: 0 auto;
	background-color: rgba(255,255,255,0.48);
	box-shadow: rgba(0, 0, 0, 0.245) 0px 25px 20px -20px;
	padding:0.5em 2em;
background-image: linear-gradient(to bottom, rgba(255,255,255,0.26), #fcf9fe, #fbf3fb, #fbedf5, #f2f2f2, #f2f2f2, #f2f2f2, #f2f2f2, #f2f2f2, #f2f2f2, #f2f2f2, #f2f2f2);
}
}
#site-description {
  display: inline-block;
  margin: -10px 0 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 7px;
  font-weight: 700;
}
#mobile .icon-menu {
  font-size: 2em;
  color: #fff;
}
/* ==========================================================================
menu
========================================================================== */
ul.menu {
	display: flex;
    flex-flow: row wrap;
    align-items: flex-end;
   justify-content: space-between;
	font-family: Roboto Condensed,sans-serif;
    justify-items: flex-end;
    border: 0px solid red;
    position: relative;
    width: auto;
    z-index: 9;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.0);
    width: 100%;
    /*width: calc(100% - 300px);*/
    list-style: none;
	line-height: inherit;
}
ul.menu > li {}
ul.menu > li > a {
  color: rgba(14, 0, 0, 1.00);
    font-size: 0.85em;
    padding: 5px 2em;
    font-weight: 900;
    letter-spacing: -0px;
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
	line-height: inherit;
	border: 0px solid red;
}
ul.menu > li > a .fa {
  margin-top: -10px;
  color: #5BBDE8;
}
ul.menu > li > a:hover {
  color: #939694;
}
ul.menu li.current-menu-item a {
  color: rgba(248, 100, 255, 0.97);
}
/*ul.menu > li:first-child a {
    color: #289835;
    margin: 0;
    font-weight: 500;
}*/
ul.menu > li > ul.sub-menu {
  position: absolute;
  left: -2em;
  margin: 0;
  background: #fff;
  border-radius: 2px;
  width: 200px;
  top: 2em;
  left: 0;
  z-index: 7;
  height: 50px;
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);*/
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 3rem 5rem -2rem rgba(0, 0, 0, 0.82);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0rgba(0, 0, 0, 0.19);
}
ul.menu > li > ul.sub-menu > li {
  clear: both;
  list-style: none;
  display: block;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
  width: 100%;
}
ul.menu > li > ul.sub-menu > li > a {
  color: #4f4f4f;
  font-size: 0.85em;
  padding: 5px;
}
ul.menu > li > ul.sub-menu > li > a i {
  margin: 0 5px 0 0;
}
ul.menu > li:hover ul.sub-menu {
  display: flex;
  flex-flow: column wrap;
  animation: fadeInRight .3s ease;
  -webkit-animation: fadeInRight .3s ease;
  opacity: 1;
  visibility: visible;
  width: 300px;
  /*  left:0;
  top:2em;*/
  height: auto;
  animation: fadeInLi .52s 1 alternate ease-out forwards .1s;
}
ul.menu > li > ul.sub-menu > li ul.sub-menu {
  position: absolute;
  left: -2em;
  margin: 0;
  background: #fff;
  border-radius: 2px;
  width: 200px;
  top: 2em;
  left: 100%;
  z-index: 9;
  height: 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  transition: all 0.35s ease-in-out;
  box-shadow: 0 3rem 5rem -2rem rgba(0, 0, 0, 0.82);
  box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0rgba(0, 0, 0, 0.19);
}
ul.menu > li > ul.sub-menu li:hover ul.sub-menu {
  display: block;
  animation: fadeInRight .3s ease;
  -webkit-animation: fadeInRight .3s ease;
  opacity: 1;
  visibility: visible;
  width: 300px;
  /*  left:0;
  top:2em;*/
  height: auto;
  animation: fadeInLi .52s 1 alternate ease-out forwards .1s;
}
ul.menu > li > ul.sub-menu > li ul.sub-menu li {
  clear: both;
  list-style: none;
  display: block;
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin: 0;
  width: 100%;
}
ul.menu > li > ul.sub-menu > li ul.sub-menu li a {
  color: #4f4f4f;
  font-size: 0.85em;
  padding: 5px;
}
/* ==========================================================================
footer
========================================================================== */
footer {}
footer {
  background-color: var(--footer-bg-color);
  display: flex;
  flex-flow: column;
  justify-content: center;
  padding: 3px;
}

/* ==========================================================================
movie archive
========================================================================== */
.movie-archive {}

.movie-archive h1 {}

.movie-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
        gap: 9px;
}

.flix-player-hero {
        width: 100%;
        padding: 2em;
}

.flix-single-player-stage {
        width: 100%;
        max-width: 640px;
        border-radius: 0;
}

.flix-card-info {
        flex: 1 0 0;
}

.flix-movie-grid .flix-poster-wrapper {
        position: relative;
        aspect-ratio: inherit;
        overflow: hidden;
}

/*masonary css */
.flix-movie-card {
        border-radius: 0;

}

.masonry-wrapper {
        padding: 1.5em;
        max-width: 1366px;
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
        background-color: #fff;
        margin-bottom: 10px;
}

.masonry {
        display: grid;
        grid-template-columns: repeat(1, minmax(100px, 1fr));
        grid-gap: 10px;
        grid-auto-rows: 0;
}

@media only screen and (max-width: 1023px) and (min-width: 768px) {
        .masonry {
                grid-template-columns: repeat(2, minmax(100px, 1fr));
        }
}

@media only screen and (min-width: 1024px) {
        .masonry {
                grid-template-columns: repeat(3, minmax(100px, 1fr));
        }
}

.masonry-item, .masonry-content {
        border-radius: 0px;
        overflow: hidden;
}

.masonry-item {
        filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, .3));
        transition: filter .25s ease-in-out;
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000000' d='M8 5v14l11-7z'/%3E%3C/svg%3E") 12 12, pointer;
}

.masonry-item:hover {
        filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, .3));
}

.masonry-content {
        overflow: hidden;
}

.masonry-item {
        color: #111111;
        background-color: #000;
        border: 1px solid #000;
}

.flix-movie-card .flix-grid-play-btn {
        position: absolute;
        z-index: 99999;
        transform: translate(-50%, -50%);
        top: 50%;
        left: 50%;
        color: #fff;
        /* font-size: 3;*/
}

.flix-movie-card:hover {
        transform: scale(1.0);
        z-index: 2;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
        box-shadow: rgba(0, 0, 0, 0.18) 0px 2px 4px;
}

.flix-card-info h3 {
        flex: 1 0 0;
}

/* FlixCine Pagination Styling */
.flix-pagination {
        margin: 50px 0;
        text-align: center;
}

.flix-pagination ul {
        display: inline-flex;
        list-style: none;
        padding: 0;
        gap: 10px;
}

.flix-pagination li a, .flix-pagination li span {
        padding: 10px 18px;
        background: #1a1a1a;
        color: #fff;
        text-decoration: none;
        border-radius: 4px;
        transition: 0.3s;
        font-size: 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        line-height: 0;
}

.flix-pagination li span.current {
        background: var(--plyr-color-main);
        /* Uses your brand accent color */
        border-color: var(--plyr-color-main);
        font-weight: bold;
}

.flix-pagination li a:hover {
        background: #333;
        border-color: var(--plyr-color-main);
}

.flix-movie-info {
        background-color: #000;
        background: #000;
}

.flix-movie-info h3 {
        padding: 1em;
        font-size: 12px !important;
        margin: 0;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-transform: capitalize;
        font-family: var(--body-font);
}

.flix-no-poster {
        background: #222;
        aspect-ratio: 2/3;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #444;
}

.plyr {
        border-radius: 1em;
}

/* Change this */
.flix-movie-container {}

.flix-main-img {
        width: 100%;
        height: 100%;
        display: block;
}

.flix-hover-preview {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        transition: opacity 0.4s;
        z-index: 3;
        transform-origin: center;
}

.flix-hover-preview video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        /* Ensures hover video fills the variable image height */
}