@charset "UTF-8";
:before,:after,html *{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-moz-osx-font-smoothing: grayscale; /*(For Firefox)*/-webkit-font-smoothing: antialiased; /*(For Chrome and Safari)*/}
.clearfix:after,
.clear{clear: both;display: block;height: 0;width: 100%;float: none !important;}
.clearfix:after{content: '';}
input::-moz-focus-inner /*Remove button padding in FF*/{ border: 0;padding: 0;}
a{text-decoration: none;outline: 0 !important;}
a:hover{color: inherit;text-decoration: none;}
img{max-width: 100%;vertical-align: top;}
*:focus ,
textarea,
input,
textarea:focus, input:focus{outline: none;border-radius: 0}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {-webkit-appearance: none !important;margin: 0;}
input[type=number] {-moz-appearance:textfield !important;}
input::placeholder{ 
	color: #cacdc8;
	opacity:1;
}
textarea::placeholder{ 
	color: #cacdc8;
	opacity: 1;
}
::-moz-placeholder {
	opacity: 1;
}
.cvr-bg-bf:before,
.cvr-bg-af:after,
.cvr-bg{
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}
.cvr-bg-bf:before,
.cvr-bg-af:after{
	content: '';
	display: inline-block;
        vertical-align: middle;
}
body{
        background: #FCFCF9;
        color: #2e2e2e;
	font-size: 14px;
	font-family: 'Mulish';
	font-weight:  400;
	position: static;
	overflow-y:auto
}
.wrapper{
	max-width: 768px;
	width: 100%;
	margin: 0 auto;
}

.rowflex{
	display: flex;
	flex-wrap: wrap;
}
.rowflex > *{
	flex: 1;
}

select,
input[type="number"],
input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea{
	/* Remove First */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	border-radius: 5px;
	display: block;
	width: 100%;
	background: rgba(0,0,0,0);
	color: #1e1e1e;
	border: 1px solid #d9d6de;
	font-size: 14px;
	font-family: 'Mulish';
	font-weight: 400;
	height: 40px;
	padding: 0 15px;
}
select{
	-webkit-appearance: auto;
	-moz-appearance: auto;
	appearance: auto;
	cursor: pointer;
	padding: 0 8px;
}
select:focus,
select:active{
	border-radius: 5px;
}
input[type="number"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus{
	border: 1px solid #FF650D;
}
textarea{
	min-height: 100px;
	padding: 15px;
	resize: vertical;
	line-height: 180%;
}
.form-basic form > * {
	display: block;
	margin-top: 25px;
}

.form-basic form > *:first-child{
	margin-top: 0;
}
.form-basic .fgroup > label{
	display: block;
	margin-bottom: 8px;
	color: #1e1e1e;
	font-size: 14px;
}
.form-basic .fgroup > label sup{
	line-height: 100%;
	position: relative;
	top: 0;
	color: #DE2C4F;
}
.form-basic .date-field{
	padding: 0;
	position: relative;
}
.form-basic .date-field input{
	border: none;
	background: none;
	position: relative;
	z-index: 2;
}
.form-basic .date-field b{
	display: block;
	position: absolute;
	width: 16px;
	height: 16px;
	background-image: url(../img/icon/generic/calendar.svg);
	right: 15px;
	top: 15px;
}
.rate-field{
	float: left;
	margin-left: -4px;
}
.rate-field > input { display: none; } 
.rate-field > label:before { 
	margin: 1px 3px;
	width: 20px;
	height: 18px;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	display: inline-block;
	background-image: url(../img/icon/generic/star-empty.svg);
	content: "";
}
.rate-field > label { 
       float: right;
       cursor: pointer;
}
.rate-field > input:checked ~ label:before, /* show gold star when clicked */
.rate-field:not(:checked) > label:hover:before, /* hover current star */
.rate-field:not(:checked) > label:hover ~ label:before, /* hover previous stars in list */
.rate-field > input:checked + label:hover:before, /* hover current star when changing rating */
.rate-field > input:checked ~ label:hover:before,
.rate-field > label:hover ~ input:checked ~ label:before, /* lighten current selection */
.rate-field > input:checked ~ label:hover ~ label:before{ background-image: url(../img/icon/generic/star.svg); }

.format-text img,
.format-text .gallery img{
	vertical-align: top;
	height: auto !important;
}
.form-basic .gap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.form-basic .gap > *{
	flex: calc(50% - 18px);
	max-width: calc(50% - 18px);
}

.iframe-holder{
        position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
        z-index: 1;
}
.iframe-holder > *{
        position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.format-text{
	line-height: 150%;
	font-size: 16px;
}
.format-text > *{
	margin-top: 15px;
}
.format-text > *:first-child{
	margin-top: 0;
}
.format-text b,
.format-text strong{
	font-weight: 700;
}
.format-text em,
.format-text i:not(.fa){
	font-style: italic;
}
.format-text h1,
.format-text h2,
.format-text h3,
.format-text h4,
.format-text h5,
.format-text h6{
	color: #52696C;
	font-weight: 700;
	line-height: 140%;
}
.format-text h1{
	font-size: 32px;
}
.format-text h2{
	font-size: 24px;
}
.format-text h3{
	font-size: 18px;
}
.format-text h4{
	font-size: 14px;
}
.format-text h5{
	font-size: 12px;
}
.format-text h6{
	font-size: 10px;
}
.format-text h1 + *,
.format-text h2 + *,
.format-text h3 + *,
.format-text h4 + *,
.format-text h5 + *,
.format-text h6 + *{
	margin-top: 5px;
}
.format-text a:not(.button){
	color: #FF650D;
}
.format-text a:not(.button):hover{
	text-decoration: underline;
}
.format-text ul{
	list-style: disc;
	padding-left: 22px;
}
.format-text ul li,
.format-text ol li{
	padding-bottom: 10px;
}
.format-text ol{
	list-style: decimal;
}
.format-text ol{
	padding-left: 20px;
}
.format-text sup{
	color: #d90000;
	position: relative;
	top: 0;
	line-height: 100%;
}
.format-text blockquote{
	font-size: 18px;
	font-style: italic;
	line-height: 160%;
	color: #817F85;
}

.jconfirm .jconfirm-box{
	max-width: 340px;
	margin: 0 auto;
}
.jconfirm .jconfirm-box div.jconfirm-title-c .jconfirm-title{
	font-weight: 600;
	font-size: 16px;
	color: #3f4e38;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane .jconfirm-content{
	font-size: 14px;
	line-height: 160%;
	font-weight: 400;
}
.jconfirm .jconfirm-box div.jconfirm-title-c{
	padding-bottom: 10px;
}
.jconfirm .jconfirm-box div.jconfirm-content-pane{
	margin-bottom: 10px;
}

.button{
	/* Remove First */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	border-radius: 5px;
	display: inline-block;
	color: #fff;
	background: #FF650D;
	font-family: 'Mulish';
	font-weight: 600;
	font-size: 14px;
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
	text-align: center;
	cursor: pointer;
	border: none;
	outline: none !important;
	transition:all 0.2s ease-in;
}
.button.disabled:hover,
.button.disabled{
	cursor: default;
	background: #ccc;
	color: #fff;
}
.button:active,
.button:focus{
	border-radius: 5px;
}
.button.btn-fullwidth{
	display: block;
	width: 100%;
}
.button.btn-hollow{
	background: none;
	border: 1px solid #FF650D;
	color: #FF650D;
	line-height: 38px;
}
.button.btn-hollow:hover,
.button:hover{
	color: #fff;
	background: #D65207;
	border-color: #D65207;
}
.button.btn-disabled,
.button.btn-disabled:hover{
	background: #E9E7EC;
	color: #817F85;
	cursor: default;
}
.button.has-loading{
	position: relative;
	overflow: hidden;
}
.button.has-loading.fetching{
	color: rgba(0,0,0,0);
	cursor: default;
}
.button.has-loading:before{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,.8);
	content: '';
	z-index: 1;
}
.button.has-loading:after{
	display: none;
	position: absolute;
	top: 50%;
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	left: calc(50% - 15px);
	width: 30px;
	height: 30px;
	background: url(../img/btn-loading.svg) no-repeat;
	content: '';
	z-index: 2;
	opacity: .3;
}
.button.has-loading.fetching:after,
.button.has-loading.fetching:before{
	display: block;	
}
.btn-hide{
	display: none !important;
}
.slick-dots{
	display: block;
	z-index: 2;
	width: 100%;
	text-align: center;
}
.slick-dots li{
	display: inline-block;
	vertical-align: middle;
	margin: 0 5px;
}
.slick-dots li button{
	display: block;
	width: 8px;
	height: 8px;
	cursor: pointer;
	border: none;
	color: rgba(0,0,0,0);
	background: #e1e1e1;
	padding: 0;
	border-radius: 4px;
	position: relative;
}
.slick-dots li.slick-active button{
	background: #FF650D;
}
.inner-home .cinema .slick-dots,
.inner-home .soon .slick-dots{
	padding: 20px 0 0;
}


.slick-dots li button:before{
	display: block;
	position: absolute;
	left: -3px;
	top: -3px;
	width: 14px;
	height: 14px;
	content: '';
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0);
}
.slick-dots li.slick-active button:before{
	border-color: #FF650D;
}
.rate i{
        width: 16px;
	height: 16px;
        display: inline-block;
        vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center top;
	background-attachment: scroll;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-image: url(../img/icon/generic/star-empty.svg);
}
.rate i:first-child{
        margin: 0;
}
.rate.rscore5 i,
.rate.rscore4 i:nth-child(4),
.rate.rscore4 i:nth-child(3),
.rate.rscore4 i:nth-child(2),
.rate.rscore4 i:nth-child(1),
.rate.rscore3 i:nth-child(3),
.rate.rscore3 i:nth-child(2),
.rate.rscore3 i:nth-child(1),
.rate.rscore2 i:nth-child(2),
.rate.rscore2 i:nth-child(1),
.rate.rscore1 i:nth-child(1){
	background-image: url(../img/icon/generic/star.svg);
}
.rated{
	position: relative;
	left: -2px;
}
.rated > *{
	display: inline-block;
	vertical-align: middle;
}
.rated > span{
	font-size: 12px;
	font-weight: 500;
	font-family: 'Gotham';
	margin-left: 3px;
	color: #757661;
	position: relative;
	top: 1px;
	letter-spacing: -0.2px;
}
/** ADDITIONAL **/
.film-item{
	background: #fff;
	padding: 10px;
	border-radius: 10px;
	box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
}
.film-item img{
	border-radius: 5px;
	width: 100%;
	height: 340px;
	object-fit: cover;
	vertical-align: top;
}
.film-item figure{
	display: block;
	position: relative;
}
.detail-film .bookmark,
.film-item .bookmark{
	position: absolute;
	top: 5px;
	right: 5px;
	background: rgba(255,255,255,.8);
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	color: #222;
}
.detail-film .bookmark{
	top: 15px;
	right: 15px;
}
.detail-film .bookmark.booked,
.film-item .bookmark.booked{
	color: #fff;
	background: #FF650D;
}
.film-item h3{
	padding: 15px 0 10px;
	font-weight: 700;
	font-size: 16px;
}
.news-item h3 a,
.review-item h3 a,
.film-item h3 a{
	color: #52696C;
	transition:color 0.2s ease-in;
	display: block;
	min-height: 40px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.news-item h3 a,
.review-item h3 a{
	min-height: 1px;
}
.news-item h3 a:hover,
.review-item h3 a:hover,
.film-item h3 a:hover{
	color: #FF650D;
}
.detail-berita .hero .meta,
.news-item .meta,
.review-item .meta,
.cinema-item .meta,
.film-item .meta{
	display: flex;
	flex-wrap: wrap;
	gap: 10px 10px;
}
.detail-berita .hero .meta li,
.news-item .meta li,
.review-item .meta li,
.cinema-item .meta li,
.film-item .meta li{
	display: inline-flex;
	align-items: center;
	gap: 0 3px;
	font-size: 12px;
	color: #676767;
}
.cinema-item .meta li{
	color: #fff;
}
.detail-berita .hero .meta li i,
.news-item .meta li i,
.review-item .meta li i,
.film-item .meta li i{
	color: #FF650D;
}
.film-item .meta li:first-child{
	flex: 100%;
	max-width: 100%;
	font-style: italic;
}
.detail-berita .hero .meta li a,
.film-item .meta li a{
	color: #676767;
}
.detail-berita .hero .meta li a:hover,
.film-item .meta li a:hover{
	text-decoration: underline;
}
.film-item .meta li span{
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cinema-item a{
	display: block;
	position: relative;
	overflow: hidden;
	border-radius: 10px;
}
.cinema-item a:after{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        content: '';
}
.cinema-item a img{
	width: 100%;
	height: 300px;
	vertical-align: top;
	object-fit: cover;
}
.cinema-item .caption{
	position: absolute;
	z-index: 3;
	left: 0;
	bottom: 0;
	width: 100%;
	color: #fff;
	padding: 0 20px 20px;
}
.news-item h3,
.review-item h3,
.cinema-item h3{
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 10px;
}
.news-item h3,
.review-item h3{
	font-size: 14px;
	margin: 0 0 6px;
}
.news-item h3 a,
.review-item h3 a{
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.news-item,
.review-item{
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
	justify-content: space-between;
	border-radius: 5px;
}
.news-item figure,
.review-item figure{
	flex: 120px;
	max-width: 120px;
}

.news-item figure img,
.review-item figure img{
	border-radius: 5px 0 0 5px;
	width: 100%;
	height: 100px;
	object-fit: cover;
}
.news-item .caption,
.review-item .caption{
	flex: calc(100% - 135px);
	max-width: calc(100% - 135px);
	display: flex;
	align-items: center;
	padding: 10px 10px 10px 0;
	position: relative;
}

.news-item a.cat{
	display: inline-block;
	height: 18px;
	line-height: 18px;
	padding: 0 5px;
	border-radius: 5px;
	color: #fff;
	background: #FF650D;
	transition:all 0.2s ease-in;
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
	position: absolute;
	right: 5px;
	top: 5px;
}
.news-item a.cat:hover{
	background: #D65207;
}
form > *:not(:first-child){
	margin: 20px 0 0;
}
form > h3 + *{
	margin-top: 10px !important;
}
form .gap{
	display: flex;
	gap: 0 15px;
}
form .gap > *{
	flex: 50%;
	max-width: 50%;
}
.radio-icon,
.checkbox-icon,
.radio-button{
	display: flex;
	flex-wrap: wrap;
	gap: 0 10px;
}
.radio-icon,
.checkbox-icon{
	gap: 10px 15px;
}
.radio-icon label,
.checkbox-icon label,
.radio-button label{
	cursor: pointer;
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */
	user-select: none; /* Standard */
}
.radio-icon input,
.checkbox-icon input,
.radio-button input{
	display: none;
}
.radio-button span{
	display: block;
	padding: 8px 12px;
	border-radius: 5px;
	transition:all 0.2s ease-in;
	font-weight: 600;
	background: #E6E6E6;
	color: #52696C;
}
.radio-button input:not(:checked) + span:hover,
.radio-button input:checked + span{
	background: #52696C;
	color: #fff;
}
form h4,
form h3{
	display: block;
	cursor: pointer;
	position: relative;
	font-weight: 700;
}
form h4{
	margin: 0 0 5px;
}
form h3 i{
	position: absolute;
	right: 0;
	top: -2px;
	font-size: 24px;
}
form h3.open i{
	transform: rotate(-180deg);
}
form h3:not(.open) + *{
	display: none;
}
.radio-icon span,
.checkbox-icon span{
	display: inline-flex;
	align-items: center;
	gap: 0 3px;
	font-weight: 600;
	color: #52696C;
}
.radio-icon span:before,
.checkbox-icon span:before{
	display: inline-block;
	content: "\e980";
	font-family: 'icomoon' !important;
	font-weight: 400;
}
.radio-icon span:before{
	content: '\e91a';
}
.radio-icon input:checked + span,
.checkbox-icon input:checked + span{
	color: #FF650D;
}
.checkbox-icon input:checked + span:before{
	content: "\e97f";
}
.radio-icon input:checked + span:before{
	content: "\e928";
}

/** HEADER **/
#top{
        position: fixed;
        z-index: 999;
        background: #F3F3EE;
        width: 100%;
        top: 0;
        left: 0;
        padding: 10px 0;
        box-shadow: 0 1px 5px 0px rgba(0, 0, 0, 0.1);
        
}
#top .rowflex{
        align-items: center;
        justify-content: space-between;
}
#top .logo{
        flex: 70%;
        max-width: 70%;
        text-align: center;
        position: relative;
        bottom: -3px;
}
#top .logo img{
        object-fit: contain;
        height: 30px;
}
#top .chat,
#top .search{
        flex: 15%;
        max-width: 15%;
        text-align: right;
}
#top .chat{
        text-align: left;
}
#scroll-search form{
        position: relative;
}
#scroll-search form input{
        position: relative;
        z-index: 1;
        padding-right: 45px;
}
#scroll-search form button,
#top .chat button,
#top .search button{
        cursor: pointer;
        border: none;
        z-index: 2;
        padding: 0;
        margin: 0;
        height: 30px;
        width: 30px;
        text-align: center;
        color: #52696C;
        font-size: 20px;
        display: inline-flex;
        align-items: center;
        transition:background 0.2s ease-in;
        background: rgba(255,255,255,0);
        border-radius: 3px;
}
#scroll-search form button{
        position: absolute;
        right: 6px;
        top: 5px;
}
#scroll-search form button:hover,
#top .chat button:hover,
#top .search button:hover{
        background: #E8E8E3;
}
#scroll-search form button i,
#top .chat button i,
#top .search button i{
        position: relative;
        flex: 1;
}
#body{
        padding-top: 50px;
}
/** FOOTER **/
#bottom{
        background: #010101;
        color: #fff;
        padding: 40px 0 110px;
        text-align: center;
        font-size: 12px;
}
#bottom li{
        display: inline-block;
        vertical-align: middle;
        margin: 0 8px;
}
#bottom li a{
        color: #fff;
}
#bottom li a:hover{
        text-decoration: underline;
}
#bottom p{
        margin: 15px 0 0;
        opacity: .7;
}
#bottom p a{
	color: #FF650D;
}
#bottom p a:hover{
	text-decoration: underline;
}
#bottom .social a{
        display: inline-block;
        vertical-align: middle;
        width: 25px;
        height: 25px;
        margin: 0 5px;
        opacity: 1;
        transition:all 0.2s ease-in;
}
#bottom .social a:hover{
        opacity: .7;
}
#bottom .social{
        margin: 0 0 30px;
}
#bottom .social a.fb{
        background-image: url(../img/icon/fb.png);
}
#bottom .social a.tk{
        background-image: url(../img/icon/tk.png);
}
#bottom .social a.ig{
        background-image: url(../img/icon/ig.png);
}
#bottom .social a.yb{
        background-image: url(../img/icon/yb.png);
}
#bottom .social a.tw{
        background-image: url(../img/icon/tw.png);
}
/** NAV **/
#sticky-nav{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 999;
        background: #F3F3EE;
        box-shadow: 0 -1px 5px 0px rgba(0, 0, 0, 0.1);
}
#sticky-nav .wrap ul{
        display: flex;
        flex-wrap: wrap;
}
#sticky-nav .wrap ul li{
        flex: 20%;
        max-width: 20%;
        text-align: center;
}
#sticky-nav .wrap ul li a{
        color: #52696C;
        display: block;
        transition:color 0.2s ease-in;
        padding: 13px 0;
}
#sticky-nav .wrap ul li.current a{
        color: #FF650D;
}
#sticky-nav .wrap ul li:not(.current) a:hover{
        color: #000;
}
#sticky-nav .wrap ul li i{
        font-size: 24px;
        display: block;
}
#sticky-nav .wrap ul li i.icon-film{
        transform: rotate(-90deg);
}
#sticky-nav .wrap ul li span{
        display: block;
        font-weight: 600;
        font-size: 12px;
        margin: 5px 0 0;
}
#sticky-nav .wrap ul li.current a span{
        font-weight: 700;
}
#scroll-chat,
#scroll-search,
#scroll-filter,
#scroll-nav{
        position: fixed;
        left: 0;
        bottom: 0;
        right: 0;
        margin: 0 auto;
        max-width: 768px;
        z-index: 9999;
        border-radius: 10px 10px 0 0;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        padding: 20px;
        background: #F3F3EE;
}
#scroll-filter.open,
#scroll-chat.open,
#scroll-search.open,
#scroll-nav.open{
        transform: translateY(0);
}
#scroll-nav button{
        background: none;
        cursor: pointer;
        border: none;
        position: absolute;
        right: 10px;
        top: 10px;
        font-size: 24px;
        color: #000;
        transition:color 0.2s ease-in;
}
#scroll-nav li{
        display: block;
        padding: 12px 0;
        border-top: 1px solid #e2e2e2;
        font-size: 16px;
        font-weight: 600;
}
#scroll-nav li:first-child{
        padding-top: 0;
        border: none;
}
#scroll-nav li a{
        color: #000;
        transition:color 0.2s ease-in;
}
#scroll-nav button:hover,
#scroll-nav li a:hover{
        color: #FF650D;
}
#scroll-overlay{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 9998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
}
#scroll-overlay.open{
        opacity: 1;
        visibility: visible;
}
/** HOME **/
.inner-home{
        padding: 0 0 80px;
}
.detail-film .hero,
.inner-home .hero{
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
}
.detail-film .hero,
.inner-home .hero .slider,
.inner-home .hero .item{
        position: relative;
}
.detail-film .hero:after,
.inner-home .hero .item:after{
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.65+100 */
        background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        content: '';
}
.detail-film .hero img,
.inner-home .hero img{
        height: 400px;
        width: 100%;
        object-fit: cover;
        vertical-align: top;
}
.detail-film .hero .badge,
.inner-home .hero .trending{
        background: #ff650d;
        display: inline-flex;
        position: absolute;
        z-index: 9;
        top: 15px;
        right: 15px;
        height: 30px;
        line-height: 30px;
        padding: 0 15px;
        border-radius: 5px;
        color: #fff;
        align-items: center;
        gap: 0 5px;
        font-size: 12px;
        font-weight: 600;
}
.detail-film .hero .badge{
        right: auto;
        left: 15px;
}
.detail-film .hero .badge.nowplay{
        background: #2ecc71;
}
.detail-film .hero .badge.coming{
        background: #e67e22;
}
.detail-film .hero .caption,
.inner-home .hero .caption{
        position: absolute;
        width: 100%;
        z-index: 4;
        left: 0;
        bottom: 0;
        color: #fff;
        padding: 0 20px 20px;
}
.detail-film .hero h1,
.inner-home .hero h2{
        font-weight: 700;
        font-size: 24px;
        margin: 0 0 10px;
        line-height: 110%;
}
.detail-film .hero h1{
        margin: 0;
}
.inner-home .hero .meta{
        display: flex;
        gap:0 15px;
        flex-wrap: wrap;
}
.inner-home .hero .meta li{
        display: inline-flex;
        align-items: center;
        gap: 0 5px;
}
.detail-film .hero > a,
.inner-home .hero .item > a{
        display: block;
        position: absolute;
        z-index: 3;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
.detail-film .hero > a span,
.inner-home .hero .item > a span{
        display: block;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        left: 0;
        width: 100%;
        text-align: center;
}
.detail-film .hero > a i,
.inner-home .hero .item > a i{
        font-size: 30px;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: rgba(255,101,13,.8);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: #fff;
}
.detail-film .hero > a i:before,
.inner-home .hero .item > a i:before{
        position: relative;
        right: -3px;
}
.inner-home .hero .caption a{
        color: #fff;
        transition:color 0.2s ease;
}
.inner-home .hero .caption a:hover{
        text-decoration: underline;
}
.inner-home .hero .caption h2 a:hover{
        text-decoration: none;
        color: #FF650D;
}
.inner-home .hero .slick-dots{
        display: inline-block;
        position: absolute;
        z-index: 9;
        right: 20px;
        bottom: 20px;
        text-align: right;
        width: auto;
}
.inner-home .genre{
        padding: 20px 0;
}
.inner-home .genre .item{
        margin-right: 5px;
}
.inner-akun .navi button,
.detail-film .content .meta li:first-child a,
.inner-home .genre .item a{
        display: inline-block;
        height: 30px;
        line-height: 30px;
        border-radius: 5px;
        background: #E6E6E6;
        color: #52696C;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        padding: 0 15px;
        letter-spacing: 1px;
        transition:all 0.2s ease-in;
}
.inner-akun .navi button.current,
.detail-film .content .meta li:first-child a:hover,
.inner-home .genre .item a:hover{
        background: #52696C;
        color: #fff;
}
.inner-home .hentry{
        position: relative;
        margin: 0 0 20px;
}
.section-hentry  h2,
.inner-home .hentry h2{
        font-weight: 700;
        font-size: 20px;
        color: #52696C;
}
.inner-home .hentry a{
        position: absolute;
        right: 0;
        top: 8px;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 600;
        color: #FF650D;
}
.inner-home .hentry a:hover{
        text-decoration: underline;
}
.inner-akun #favorit .rowflex,
.inner-bioskop .main .rowflex,
.inner-film .main .rowflex,
.inner-home .nowplay .rowflex{
        gap: 20px 10px;
        justify-content: space-between;
}
.inner-akun #favorit .rowflex > *,
.inner-film .main .rowflex > *,
.inner-home .nowplay .rowflex > *{
        flex: calc(33.33333333333333333% - 10px);
        max-width: calc(33.33333333333333333% - 10px);
}
.inner-bioskop .main .rowflex > *{
        flex: calc(50% - 10px);
        max-width: calc(50% - 10px);
}
.inner-home .soon{
        padding: 60px 0;
        margin: 60px 0 0;
        background: #52696C;
}
.inner-home .soon .hentry h2,
.inner-home .soon .hentry a{
        color: #fff;
}
.inner-home .cinema .cinema-item,
.inner-home .soon .film-item{
        margin: 0 5px;
}
.inner-home .cinema .slick-list,
.inner-home .soon .slick-list{
        margin: 0 -5px;
        border-radius: 10px;
}
.inner-home .news,
.inner-home .review,
.inner-home .cinema{
        margin: 50px 0 0;
}
.inner-home .news .rowflex{
        gap: 30px 16px;
}
.section-hentry{
        margin: 0;
        padding: 15px 0;
        background: #52696C;
        color: #fff;
        box-shadow: inset 0px 5px 8px -5px rgba(0, 0, 0, 0.4);
        position: sticky;
        top: 50px;
        z-index: 888;
}
.section-hentry .holder{
        position: relative;
}
.section-hentry h2{
        color: #fff;
}
.section-hentry button{
        background: none;
        border: 1px solid #fff;
        display: inline-flex;
        gap: 0 5px;
        cursor: pointer;
        padding: 6px 12px;
        border-radius: 5px;
        color: #fff;
        position: absolute;
        right: 0;
        top: 0;
        font-size: 11px;
        text-transform: uppercase;
        font-weight: 600;
        background: rgba(0,0,0,0);
        transition:all 0.2s ease-in;
        letter-spacing: 1px;
        align-items: center;
}
.section-hentry button:hover{
        background: #FF650D;
        border-color: #FF650D;
}
.inner-berita .main,
.inner-review .main,
.inner-bioskop .main,
.inner-film .main{
        padding: 30px 0 60px;
}

.inner-berita .main .rowflex,
.inner-home .news .rowflex{
        gap: 15px;
}
.inner-berita .main .news-item,
.inner-home .news .news-item{
        flex: calc(50% - 8px);
        max-width: calc(50% - 8px);
}
.inner-page .layer,
.detail-berita .hero .layer,
.detail-cinema .hero .layer,
.detail-film .content .layer{
        padding: 20px;
        border-radius: 0 0 5px 5px;
        box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
        background: #fff;
        position: relative;
}
.inner-bioskop .centered,
.inner-berita .centered{
	text-align: center;
	padding: 30px 0 0;
}
.inner-page .layer{
	border-radius: 5px;
}
.detail-film .content .meta{
        display: flex;
        flex-wrap: wrap;
        gap: 15px 15px;
        margin: 0 -20px 20px;
        padding: 0 20px 20px;
        border-bottom: 1px solid #e6e6e6;
}
.detail-film .content .meta li{
        display: inline-flex;
        gap: 0 6px;
        align-items: flex-start;
        color: #676767;
}
.detail-film .content .meta li b{
        color: #000;
        font-weight: 700;
}
.detail-film .content .meta li i{
        color: #FF650D;
        font-size: 16px;
        position: relative;
}
.detail-film .content .meta li a{
        color: #676767;
}
.detail-film .content .meta li a:hover{
        text-decoration: underline;
}
.detail-film .content .meta li:first-child{
        flex:100%;
        max-width: 100%;
}
.detail-film .content .meta li:first-child a{
        display: inline-block;
        padding: 0 12px;
        color: #52696C;
        border-radius: 5px;
        font-size: 12px;
        text-transform: uppercase;
        transition:all 0.2s ease-in;
        background: #E6E6E6;
        font-weight: 600;
}
.detail-film .content .meta li:first-child a:hover{
        text-decoration: none;
        color: #fff;
}
.detail-film .content .format-text ul{
        list-style: none;
        padding-left: 0;
        margin-left: 0;
}
.detail-film .content .format-text ul li{
        padding: 0;
        line-height: 170%;
}
.detail-film .content .comment{
        padding: 20px 20px 0;
        margin: 20px -20px 0;
        border-top: 1px solid #e6e6e6;
}
.detail-film .content button.btn-sched,
.detail-film .content button.btn-comment{
        position: absolute;
        right: 20px;
        top: 20px;
        height: 30px;
        line-height: 28px;
        padding: 0 15px;
        font-size: 12px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        min-width: 150px;
}
.detail-film .content button.btn-sched{
        top: 55px;      
}
.detail-cinema .sched,
.detail-film .sched{
        background: #52696C;
        margin: 50px 0 0;
        padding: 50px 0;
}
.detail-cinema .sched .hentry,
.detail-film .sched .hentry{
        position: relative;
        margin: 0 0 30px;
}
.detail-cinema .sched h2,
.detail-film .sched .hentry h2{
        font-size: 20px;
        font-weight: 700;
        color: #fff;
}
.detail-film .sched .hentry button{
        position: absolute;
        right: 0;
        top: 0;
        border: 1px solid #fff;
        background: none;
        border-radius: 3px;
        cursor: pointer;
        padding: 6px 8px 6px 12px;
        text-transform: uppercase;
        font-weight: 600;
        letter-spacing: 1px;
        font-size: 12px;
        color: #fff;
}
.detail-film .sched .hentry button i:before{
        transition:all 0.2s ease-in;
        transform: rotate(0deg);
        display: inline-block;
}
.detail-film .sched .hentry button.open i:before{
        transform: rotate(180deg);
}
.detail-film .sched .hentry .city-list{
        display: none;
}
.detail-film .sched .hentry .layer{
        margin: 20px 0 0;        
}
.detail-film .sched .hentry .radio-button{
        gap: 8px;
}
.detail-film .sched .hentry .radio-button span{
        font-size: 12px;
        padding: 3px 7px;
}
.detail-cinema .sched .date,
.detail-film .sched .date{
        display: flex;
        gap:10px;
        margin: 0 0 30px;
}
.detail-cinema .sched .date span,
.detail-film .sched .date span{
        color: #52696C;
        padding: 15px;
        border-radius: 10px;
        background: #E6E6E6;
        box-shadow: 0px 0 2px rgba(30, 30, 30, 0);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 5px 0;
        min-width: 70px;
        cursor: pointer;
}
.detail-cinema .sched .date small,
.detail-film .sched .date small{
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 600;
        line-height: 100%;
}
.detail-cinema .sched .date b,
.detail-film .sched .date b{
        font-weight: 700;
        font-size: 24px;
        color: #010101;
        line-height: 100%;
}
.detail-cinema .sched .date span.current,
.detail-film .sched .date span.current{
        background: #FF650D;
        box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
        color: #fff;
        cursor: default;
}
.detail-cinema .sched .date span.current b,
.detail-film .sched .date span.current b{
        color: #fff;      
}
.detail-cinema .sched .film,
.detail-film .sched .hentry .layer,
.detail-film .sched .cinema{
        padding: 20px;
        box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
        border-radius: 10px;
        background: #fff;
}
.detail-cinema .sched .search,
.detail-film .sched .search{
        position: relative;
        margin: 0 0 20px;
}
.detail-cinema .sched .search input,
.detail-film .sched .search input{
        background: #fff;
}
.detail-cinema .sched .search i,
.detail-film .sched .search i{
      color: #000;
      position: absolute;
      right: 8px;
      top: 8px;
      font-size: 20px;
}
.detail-cinema .film .rowflex,
.detail-film .sched .cinema .rowflex{
        gap: 15px;
}
.detail-cinema .film .rowflex.hiding{
	display: none;
}
.detail-cinema .film .item,
.detail-film .sched .cinema .item{
        flex: calc(50% - 8px);
        max-width: calc(50% - 8px);
        padding: 15px;
        background: #fff;
        border-radius: 10px;
         box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
}
.detail-film .sched .cinema .heding{
        position: relative;
}
.detail-film .sched .cinema .heding h3{
        font-weight: 600;
}
.detail-film .sched .cinema .heding h3 a{
        color: #000;
}
.detail-film .sched .cinema .heding h3 a:hover{
        color: #FF650D;
}
.detail-film .sched .cinema .heding h3 + a{
        display: inline-block;
        font-size: 11px;
        color: #666666;
        margin: 6px 0 0;
}
.detail-film .sched .cinema .heding h3 + a:hover{
        text-decoration: underline;
}
.detail-film .sched .cinema .heding span{
        position: absolute;
        right: 0;
        top: 2px;
        color: #FF650D;
        font-weight: 600;
        font-size: 12px;
}
.detail-cinema .film .item ul.time,
.detail-film .sched .cinema ul{
        display: flex;
        gap: 5px;
        padding: 12px 0 0;
        margin: 12px 0 0;
        border-top: 1px solid #e6e6e6;
}
.detail-cinema .film .item ul.time li,
.detail-film .sched .cinema ul li{
        border-radius: 3px;
        padding: 3px 5px;
        background: #52696C;
        color: #fff;
        font-size: 12px;
        font-weight: 600;
}
.detail-cinema .film .item ul.time li.past,
.detail-film .sched .cinema ul li.past{
        background: #aaa;
}
.detail-berita .comment,
.detail-cinema .comment,
.detail-film .comment{
        padding: 50px 0 80px;
}
.comment .item .util .reply-form,
.comment .write{
        background: #E8E8E3;
        border-radius: 10px;
        margin: 0 0 30px;
}
.comment .item .util .reply-form textarea,
.comment .write textarea{
        border: none !important;
        min-height: 40px;
        resize: none;
        overflow: hidden;
}
.comment .item .util .reply-form textarea::placeholder,
.comment .write textarea::placeholder{
        color: #595959;
}
.comment .item .util .reply-form .foot,
.comment .write .foot{
        padding: 16px;
}
.comment .write .left{
        float: left;
        position: relative;
        top: 15px;
}
.comment .item .util .reply-form .right,
.comment .write .right{
        float: right;
}
.comment .write .img{
        float: left;
        position: relative;
        margin: 0 0 0 20px;
        font-weight: 600;
        top: 4px;
        color: #52696C;
}
.comment .write .img input{
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        width: 100%;
        background: red;
        opacity: 0;
}
.comment .hentry{
        margin: 0 0 20px;
}
.comment .hentry h2{
        font-weight: 700;
        font-size: 18px;
        color: #52696C;
}
.comment .hentry h2 b{
        display: inline-block;
        color: #fff;
        font-size: 14px;
        background: #FF650D;
        padding: 3px 6px;
        border-radius: 5px;
}
.comment .item{
        display: flex;
        flex-wrap: wrap;
        gap: 0 20px;
        margin: 40px 0 0;
}
.comment .item-child{
        margin: 30px 0 0;
}
.comment .item:first-child{
        margin: 0;
}
.comment .item figure{
        flex: 40px;
        max-width: 40px;
}
.comment .item figure img{
        width: 100%;
        height: 40px;
        border-radius: 50%;
        object-fit: cover;
}
.comment .item .caption{
        flex: calc(100% - 60px);
        max-width: calc(100% - 60px);
}
.comment .item .heding{
        margin: 0 0 15px;
        position: relative;
}
.comment .item .heding h3{
        font-weight: 700;
        color: #52696C;
        font-size: 16px;
}
.comment .item .heding h3 small{
        font-weight: 400;
        font-style: italic;
        color: #848A8A;
        font-size: 12px;
}
.comment .item .heding .rate{
        position: absolute;
        right: 0;
        top: 0;
}
.detail-berita .comment .item .heding .rate,
.comment .item.item-child .heding .rate{
        opacity: 0;
}
.comment .item .format-text{
        font-size: 14px;
        line-height: 140%;
}
.comment .item .util{
        padding: 15px 0 0;
        display: flex;
        gap: 0 30px;
	flex-wrap: wrap;
}
.comment .item .util button:not(.button){
        border: none;
        color: #52696C;
        font-size: 14px;
        background: none;
        cursor: pointer;
        padding: 0;
        display: inline-flex;
        gap: 0 5px;
        transition:color 0.2s ease-in;
}
.comment .item .util button:not(.button):hover{
        color: #FF650D;
}
.comment .item .util button.hiding{
	display: none;
}
.comment .item .util button.choosed{
        font-weight: 600;
        color: #FF650D;
}
.comment .item .util .resp{
        display: flex;
        gap: 0 10px;
}
.comment .item .util .reply-form{
	flex: 100%;
	max-width: 100%;
	margin: 20px 0 0;
}
.comment .item-child{
        padding-left: 60px;
}
.detail-berita .hero img,
.detail-cinema .hero img{
        display: block;
        width: 100%;
}
.detail-berita .hero .layer > h2,
.detail-cinema .hero .layer > h2{
        font-weight: 700;
        font-size: 24px;
        color: #52696C;
        margin: 0 0 10px;
}
.detail-cinema .hero .layer > .rate{
	position: relative;
	top: -5px;
	margin: 0 0 10px;
}
.detail-cinema .hero p{
        line-height: 160%;
}
.detail-cinema .hero span{
        display: flex;
        margin: 0 0 10px;
        font-weight: 600;
        gap: 0 5px;
        align-items: center;
}
.detail-cinema .hero span a{
        color: #FF650D;
}
.detail-cinema .hero span a:hover{
        text-decoration: underline;
}
.detail-cinema .film .item{
        display: flex;
        flex-wrap: wrap;
        gap: 0 15px;
        padding: 15px;
        box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
        border-radius: 10px;
        align-items: center;
}
.detail-cinema .film .item figure{
        width: 100px;
}
.detail-cinema .film .item figure img{
        width: 100%;
        display: block;
        height: 130px;
        object-fit: cover;
        border-radius: 10px;
}
.detail-cinema .film .item .caption{
        flex: calc(100% - 115px);
        max-width: calc(100% - 115px);
}
.detail-cinema .film .item h3{
        font-size: 16px;
        font-weight: 700;
        margin: 0 0 10px;
}
.detail-cinema .film .item h3 a{
        color: #52696C;
}
.detail-cinema .film .item ul.meta li{
        line-height: 160%;
}
.detail-cinema .film .item ul.meta li.movie-genre{
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}
.detail-cinema .film .item .meta strong{
        font-weight: 700;
        color: #000;
}
.detail-cinema .film .item .meta a{
        color: #FF650D;
}
.detail-cinema .film .item .meta a:hover{
        text-decoration: underline;
}
.detail-cinema .film .item ul.time{
        flex: 100%;
        max-width: 100%;
}
.detail-berita .hero .meta{
        margin: 0 0 30px;
}
.detail-berita .hero .format-text {
	line-height: 160%;
}
.detail-berita .hero .format-text > h1:first-child{
	display: none;
}
.inner-akun{
        padding: 30px 0 60px;
}
.inner-akun .general{
        display: flex;
        align-items: center;
        gap: 0 15px;
}
.inner-akun .general .pepe{
        position: relative;
        border-radius: 80px;
        overflow: hidden;
        flex: 80px;
        max-width: 80px;
}
.inner-akun .general .pepe img{
        display: block;
        width: 100%;
        height: 80px;
        object-fit: cover;
}
.inner-akun .general .pepe span{
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        display: block;
        background: rgba(0,0,0,0.6);
        color: #fff;
        height: 15px;
        line-height: 15px;
        z-index: 2;
        font-size: 10px;
        text-transform: uppercase;
}
.inner-akun .general .name{
        flex: calc(100% - 95px);
        max-width: calc(100% - 95px);
        position: relative;
}
.inner-akun .general .name input{
        padding-left: 8px;
        padding-right: 40px;
}
.inner-akun .general .name button{
        border: none;
        background: none;
        padding: 0;
        position: absolute;
        right: 15px;
        top: 10px;
        font-size: 18px;
        cursor: pointer;
        color: #52696C;
        transition:color 0.2s ease-in;
}
.inner-akun .general .name button:hover{
        color: #FF650D;
}
.inner-akun #akun{
        padding: 20px;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0px 0 2px rgba(30, 30, 30, .3);
}
.inner-akun .navi{
        margin: 0 0 20px;
        display: flex;
        gap: 0 15px;
}
.inner-akun .navi button{
        border: none;
        cursor: pointer;
}
.inner-akun .notif{
        padding: 30px 0 0;
}
.inner-akun .notif h3{
        margin: 0 0 10px;
        font-weight: 700;
        font-size: 18px;
        color: #52696C;
}
.inner-akun .notif li{
        line-height: 160%;
        padding: 0 0 10px;
        margin:  0 0 10px;
        display: block;
        position: relative;
        font-size: 14px;
        border-bottom: 1px solid #ddd;
}
.inner-akun .notif li:last-child{
        padding: 0;
        margin: 0;
        border: none;
}
.inner-akun .notif li a{
        color: #FF650D;
}
.inner-akun .notif li a:hover{
        text-decoration: underline;
}
.inner-akun .notif li small{
        font-size: 12px;
        color: #000;
        font-style: italic;
        display: block;
        line-height: 150%;
}
.inner-akun .notif li b{
        font-weight: 700;
        color: #52696C;
}
.inner-akun .item:not(.current){
        display: none;
}
.inner-page{
	padding: 30px 0 60px;
}

.inner-page .wrapper .layer > h1{
	font-weight: 700;
	font-size: 32px;
	color: #52696C;
	margin: 0 0 15px;
}
.need-login{
	text-align: center;
	padding: 50px 20px;
}
/* MEDIA QUERY FOR WEBKIT BASED BROWSER **/
@media screen and (-webkit-min-device-pixel-ratio:0) {

}

/* MEDIA QUERY FOR GECKO BASED BROWSER **/
@-moz-document url-prefix(){
        
}


@media (max-width: 991px) {

}
@media only screen and (min-width: 769px) and (max-width: 991px)  {

}
@media (max-width: 768px) {
	.wrapper{
		width: 100%;
		padding-left: 15px;
		padding-right: 15px;
	}
	.inner-berita .main .news-item,
	.detail-cinema .film .item,
	.detail-film .sched .cinema .item,
	.inner-home .hero .meta li:first-child{
		flex: 100%;
		max-width: 100%;
		padding: 0 0 8px;
	}
	.detail-film .hero img,
	.inner-home .hero img{
		height: calc(100svh - 120px);
	}
	.inner-home .hero .slick-dots{
		text-align: center;
		width: 100%;
		right: 0;
	}
	.inner-akun #favorit .rowflex,
	.inner-bioskop .main .rowflex,
	.inner-film .main .rowflex,
	.inner-home .nowplay .rowflex{
		gap: 10px 5px;
	}
	.inner-akun #favorit .rowflex > *,
	.inner-bioskop .main .rowflex > *,
	.inner-film .main .rowflex > *,
	.inner-home .nowplay .rowflex > * {
		flex: calc(50% - 5px);
		max-width: calc(50% - 5px);
	}
	.film-item img{
		height: 215px;
	}
	.soon .film-item img{
		height: 300px;
	}
	.inner-home .hentry a{
		top: 5px;
	}
	.inner-home .soon .film-item{
		width: 220px;
	}
	.inner-home .soon {
		overflow: hidden;
	}
	.film-item h3 a{
		min-height: 36px;
	}
	.section-hentry button{
		top: -2px;
	}
	.cinema-item a img{
		height: 160px;
	}
	.cinema-item .meta{
		gap: 5px 0;
		flex-direction: column;
	}
	.inner-home .news .rowflex > *{
		flex: 100%;
		max-width: 100%;
	}
	.detail-cinema .sched .date,
	.detail-film .sched .date{
		flex-wrap: nowrap;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		-ms-overflow-style: -ms-autohiding-scrollbar;
		display: flex;
                padding: 0 0 5px 15px;
		margin: 0 -15px 10px;
		gap: 0;
	}
	.detail-cinema .sched .date::-webkit-scrollbar,
        .detail-film .sched .date::-webkit-scrollbar {
		width: 0px;
		background: transparent; /* make scrollbar transparent */
	}
	.detail-cinema .sched .date span,
	.detail-film .sched .date span{
		flex: 0 0 auto;
		margin: 0 5px 0 0;
		padding: 10px;
		border-radius: 5px;
		min-width: 55px;
	}
	.detail-cinema .sched .date small,
	.detail-film .sched .date small{
		font-size: 12px;
	}
	.detail-cinema .sched .date b,
	.detail-film .sched .date b{
		font-size: 20px;
	}
	.detail-film .content button.btn-sched, .detail-film .content button.btn-comment{
		position: relative;
		top: auto;
		left: auto;
		right: auto;
		min-width: 1px;
		width: 100%;
		padding-left: 0;
		padding-right: 0;
	}
	.detail-film .content .navi{
		display: flex;
		gap: 0 10px;
		padding: 20px 0 0;
	}
	.detail-film .content .meta{
		padding: 0 15px 15px;
		margin: 0 -15px 15px;
	}
	.detail-film .sched .cinema .heding span{
		right: auto;
		top: auto;
		left: 80px;
		bottom: 1px;
	}
	.comment .write .right,
	.comment .write .left{
		float: none;
		top: auto;
	}
	.comment .write .right .button{
		margin: 15px 0 0;
		width: 100%;
	}
	.comment .item .heding .rate{
		position: relative;
		right: auto;
		top: auto;
		margin: 0;
	}
	.comment .item .format-text,
	.comment .item .util{
		position: relative;
		left: -60px;
		margin-right: -60px;
	}
	.comment .item .heding{
		left: -5px;
	}
	.detail-berita .comment .item .heding h3,
	.comment .item.item-child .heding h3{
		position: relative;
		bottom: -10px;
	}
	.detail-film .content .layer{
		margin: 15px 0 0;
		border-radius: 5px;
	}
	.detail-berita .hero img,
	.detail-cinema .hero img{
		border-radius: 5px 5px 0 0;
	}
	.inner-akun .general .pepe{
		flex: 60px;
		max-width: 60px;
	}
	.inner-akun .general .pepe img{
		height: 60px;
	}
	.inner-akun .general .name{
		flex: calc(100% - 75px);
		max-width: calc(100% - 75px);
	}
	.inner-bioskop .centered .button,
	.inner-berita .centered .button{
		display: block;
		width: 100%;
	}
	
	/** MARGIN **/
	.inner-home .soon .slider{
		margin-right: -15px;
	}
	.detail-film .sched,
	.inner-home .news,
	.inner-home .review,
	.inner-home .cinema,
	.inner-home .soon{
		margin: 40px 0 0;
	}
	
	/** PADDING **/
	.detail-berita .comment,
	.detail-cinema .comment,
	.detail-cinema .sched,
	.detail-film .comment,
	.detail-film .sched,
	.inner-home .soon{
		padding: 30px 0 40px;
	}
	.inner-home .hero .caption{
		padding: 0 20px 60px;
	}
	.cinema-item .caption{
		padding: 0 10px 10px;
	}
	#top .search input{
		padding-left: 10px;
	}
	.inner-home{
		padding: 0 0 40px;
	}
	.inner-home .genre .wrapper{
		padding-right: 0;
	}
	.inner-page .wrapper .layer,
	.inner-akun #akun,
	.detail-berita .hero .layer,
	.detail-cinema .hero .layer,
	.detail-film .content .layer{
		padding: 15px;
	}
	.detail-cinema .sched .film,
	.detail-cinema .film .item,
	.detail-film .sched .hentry .layer,
	.detail-film .sched .cinema,
	.detail-film .sched .cinema .item{
		padding: 10px;
	}
	.comment .item-child{
		padding-left: 30px;
	}
	.detail-berita .hero,
	.detail-cinema .hero{
		padding-top: 15px;
	}
	.inner-berita .main .news-item,
	#scroll-filter .wrapper,
	#sticky-nav .wrapper{
		padding: 0;
	}
	
	/** FONT SIZE **/
	.detail-berita .hero .layer > h2, .detail-cinema .hero .layer > h2,
	.inner-page .wrapper .layer > h1,
	.detail-berita .hero h2,
	.detail-cinema .hero h2,
	.section-hentry h2,
	.inner-home .hentry h2{
		font-size: 18px;
	}
	.comment .item .heding h3,
	.news-item h3,
	.review-item h3,
	.cinema-item h3,
	.film-item h3{
		font-size: 14px;
	}
	.radio-icon span,
	.checkbox-icon span,
	.radio-button span,
	#top .search input{
		font-size: 12px;
	}
	
}
/* Custom mobile */
@media (max-width: 480px) {

}

@media (max-width: 360px) {
	
}
@media (min-width: 1230px) {

}

#responsive{
	display:block;
	width:10px;
	height: 10px;
	position: fixed;
	bottom:10px;
	left: 10px;
	z-index: 9999;
}
/** RESPONSIVE VIEWER **/
@media (max-width: 1239px) {  #responsive{background: blueViolet !important;}}
@media (max-width: 991px) {  #responsive{background: red !important;}}
@media (max-width: 768px) {  #responsive{background: blue !important;}}
@media (max-width: 480px) {  #responsive{background: cyan !important;}}
@media (max-width: 360px) {  #responsive{background: green !important;}}