/* -----------------
    MEDIA QUERIES
--------------------*/

/*---COL-MD (Tablet landscape)---*/
@media (min-width: 992px) and (max-width: 1119px) {

	
/*COMPONENT: Editor Picks*/
.editor-picks .note {
	width: 55%;
	top: 22%;
}

	
/*COMPONENT: JELAJAH CARI PAKEJ (BUTTON)*/
	.jelajahsearch .btn-green a {
    padding: 10px 8px;  /*originally 10px 30px - to adjust coz it dropped to 2 line in tablet landscape*/
}
}

/*---(Mobile & potrait tablet)---*/
@media (max-width:991px) {
	
/*HIDE SHOW TRENDING (HOMEPAGE)*/
	.button-991b {
		display:block;
	}	
	
	.trend-main.trending .list-num li:nth-child(n+6) {
		display:none;
	}
	
	.overlay-trend.absolute {
    height: 40%;
    bottom: 0px;
    width: 100%;
    position: absolute;
    display: block;
	}

.trend-main .ads {
    z-index: 2;
}
	
	.overlay-trend {
	   background: -moz-linear-gradient(top,  rgba(255,255,255,0) 80%, rgba(255,255,255,1) 100%); /* FF3.6+ */
	   background: -webkit-gradient(linear, left top, left bottom, color-stop(80%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
	   background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
       background: -o-linear-gradient(top,  rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
       background: -ms-linear-gradient(top,  rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* IE10+ */
       background: linear-gradient(to bottom,  rgba(255,255,255,0) 80%,rgba(255,255,255,1) 100%); /* W3C */
       filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	   overflow:hidden;
	   }
	
/*--------------------------------------------*/
	
	.follow-wrap .desc {
    background: #ffffff;
    padding: 10px 10px 40px 10px;
    width: 100%;
}
	
.tablet-hide {
    display: none !important;
  }
	
.tablet-show {
    display: block !important;
  }
	
/*NAV*/
.col-reverse {
	display: flex;
	flex-direction: column-reverse;
}
	
	
.current-page p {
	line-height: 50px !important;
}
	
nav ul .close-sub {
    font-weight: bold;
    position: absolute;
    right: 10px;
    color: #000;
	top: 70px;
}
	
  nav ul .close-sub:after {
    font-family: FontAwesome;
    font-size: 20px;
    content: "\f00d";
    line-height: 38px;
}

 nav ul li.sub-active .submenu {
    display: block;
    top: 60px;
  }

	/* Modal Box 
------------------------------------------*/
	.modalDialog {
		bottom: 60px;
		overflow-x:  scroll;
	}
	
/* Page: Video Details
------------------------------------------*/
	
ul.vidtrend-list {
    min-width: 100%;
    display: flex;
	overflow-x: auto;
	}
li.vt-listing-wrap {
	min-width:220px;
margin-right:10px;
}
	
	
/*FOOTER
----------------------------------------------*/
	.footer {
		margin-bottom: 65px;
	}
	
	
/*DECORATIVE MASTHEAD
------------------------------------------*/
.decoBG {
	background: none !important;
}
	
.decoBG-dark {
	background: none !important;
}

}

/*---COL : 576 to 991px (Mobile landscape & Tablet potrait)---*/
@media (min-width: 576px) and (max-width: 991px) {
/*COMPONENT: KLIK*/
	
.klik .note {
    width: 100%;
    top: 0;
    margin-top: 0;
    left: 5px; /*20px*/
}

/* PAKEJ SLIDER */
	
.pakej .slick-slide {
    margin: 0 15px;
}

.pakej .slick-list {
    margin: 0 -15px;
  }

}

/*---COL-SM : 768 to 991px (Tablet potrait)---*/
@media (min-width: 768px) and (max-width: 991px) {
	

	
	
.container {
	max-width: 100%;
}	
	

	
/*NAV*/	
nav.bottom-navi li.sub-active .submenu{
	padding-top:20%;
}
	
#navi-res.affix {
    top: 30px;
}

/*COMPONENT: recommended*/
.recommended .list-num li:last-child {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px dotted #99c93f;
    min-height: 88px;
}
	.recommended ul.list-num .align-self-end{
		min-height:104px;
	}
	.recommended ul.list-num{
		border-bottom:none;
	}
/* COMPONENT: Story Page - 4 Story Slider */
.ss-content {
	min-width: 285px;
}
	
/* COMPONENT: Jelajah*/
.jelajah-block {
	margin-bottom: 150px;
}
	
.jelajah-wrap {
	padding: 0 15px;
}
	
.jelajah-wrap .btn-green {
	margin-right: 0;
}
.jelajah-intro {
		margin-bottom: 30px;
}
	
/* COMPONENT: Video (Home Page) */	
.storyslider-wrap .wrap-PE {
	min-width: 250px;
	margin-bottom: 95px;
}
.storyslider-wrap::-webkit-scrollbar {
 height:3px;
 width:0;
}
.storyslider-wrap::-webkit-scrollbar-track {
 background: #dcdcdc;
}
.storyslider-wrap::-webkit-scrollbar-thumb {
 background: #888;
}
.video-wrapper iframe {
    height: 300px;
}

.desc-wrapper h1 {
	max-height: 96px;
	overflow: hidden;
}
	
.video-wrapper .desc-wrapper {
    width: 100%;
    position: static;
	margin: 0;
}

/* COMPONENT: PACKAGE POPULAR */	
.wrap-package {
    margin-bottom: 80px;
}
	
/* Video (LANDING PAGE)
------------------------------------------*/	
.programmes .intro button {
	padding:0;
}
}

/*---(Tablet & Desktop)---*/
@media only screen and (min-width: 768px) {
   /*nav ul li:hover ul.submenu {
   display: block;
  }*/
}

/*---(Mobile potrait & landscape)---*/
@media (max-width: 767px) {
	
/* FONT SIZES */
.fl {
	font-size: 28px;
	line-height: 34px;
}
.fm {
	font-size: 24px;
	line-height: 28px;
}
.fsm {
	font-size: 20px;
	line-height: 26px;
}
	
/* GRID GUTTER*/
.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	padding-left: 12px;
	padding-right: 12px;
}
.row {
	margin-right: -12px;
	margin-left: -12px;
}
.container {
	max-width: 100%;
}
	
.res-show {
	display: block;
}
	
.res-hide {
	display: none;
}
	
.mt75 {
	margin-top: 0 !important;
}
	
.col-reverse-res {
    display: flex;
    flex-direction: column-reverse;
}
	
button.btn-general {
font-size: 15px;
}



/* COMPONENT: FOOTER
------------------------------------------*/
.footer .urban-brand p{
	text-align:center;
}
	
.wrap-PE {
	xpadding-left: 0;
	xpadding-right: 0;
}
	
.thick-border.pattern {
	margin-top: 30px;
	position: static;
}

.lagi-artikel .kicker {
	margin-top: 10px;
}

/* COMPONENT: Jelajah Landing*/
	.jelajah-wrap {
		padding: 0 15px;
	}
.jelajah-wrap .intro {
    background: #ffffff;
    padding: 15px 15px 50px 15px;
}
	
.jelajah-intro {
	margin-bottom: 30px;
}
	
.jelajah-wrap .btn-green {
    margin-top: 30px;
    margin-right: 0;
}
	
.jelajah-block {
	margin-bottom: 100px;
}
	
.jelajah-wrap .note {
	width: 90%;
	top: 90%;
}
	
.search-btn {
	text-align:  center;
	margin-top: 30px;
}
	
.sponsored-logo {
	text-align: center;
	margin-top: 30px;
	float: none;
}
/* COMPONENT: Video (Home Page)
------------------------------------------*/
.storyslider-wrap .wrap-PE {
	min-width: 250px;
	margin-bottom: 95px;
}
.video-wrapper iframe {
	height: 320px;
}
.video-wrapper .pattern {
	height: auto;
}

.video .video-wrapper .desc-wrapper {
	position: static;
	width: 90%;
	margin-top: 10px;
}

.video-wrapper .desc-wrapper p {
	display: none;
}
.video-wrapper button {
	text-align: center;
	float: none!important;
	margin-left: 15px;
	display: block;
	overflow: hidden;
}
.video-wrapper .desc-wrapper .title{
	padding-top:0;
	padding-bottom:0;
	}
	
/*COMPONENT: reccomended & co-top-list*/
.trending .no-gutters, .recommended .no-gutters {
	margin-right: 0;
	margin-left: 0;
}
.trending.pop-h .list-num li .count {
	position: static;
	font-size: 70px;
	line-height: 60px;
}
.pop-h label.byline {
	display: none;
}
	

/*COMPONENT: Editor Picks*/
.editor-picks .image-wrap {
	width: 95%;
	position: static;
	float: right;
}
	
.editor-picks .ep-wrap {
    min-height: 450px;
}	
.editor-picks .note {
	width: 95%;
    top: 35%;
    bottom: 10%;
    float: left;
	min-height:260px;
    max-height: 350px;
    position: sticky;
	margin-bottom:20px;
}
	
.editor-picks.forsection .note {
	position:relative;
	margin-bottom:0;
	padding-bottom:0;
	min-height:unset;
	margin-top: -5%;
	}

.editor-picks .play-icon {
	top: -22px;
	z-index: 5;
	overflow: visible;
}
	

	
/*COMPONENT: Focus Story (Spotlight & xpose)*/
.fs-wrap {
	display: block;
}
.focusStory .note {
	position: sticky;
	margin-top: -20px;
	width: 95%;
}
.focusStory p {
	display: none;
}
/* COMPONENT: Story Page - 4 Story Slider */
.ss-content {
	min-width: 300px;
	margin-right: 0;
	margin-bottom: 10px;
	margin-left:0;
}
.storyslider-wrap::-webkit-scrollbar {
 height:3px;
 width:0;
}
.storyslider-wrap::-webkit-scrollbar-track {
 background: #dcdcdc;
}
.storyslider-wrap::-webkit-scrollbar-thumb {
 background: #888;
}
/*COMPONENT: VIDEO SELEBIHNYA */	
.vid-semua-wrap .kicker-2 {
	display: none;
}
.vid-semua-wrap {
	padding-bottom: 15px;
	border-bottom: 1px dotted #99c93f;
}
/* Video (LANDING PAGE)
------------------------------------------*/
.slick-initialized .swipe-tab {
	padding: 15px 10px;
	}
.vid-trending-list .thick-border.pattern {
    margin-top: 10px;
}

	
.video-landing .video-wrapper .desc-wrapper {
	position: static;
	width: 100%;
}
	
	
/* Page: Video Details
------------------------------------------*/
li.vt-listing-wrap {
	min-width:180px;
}

p.story-headline {
	xheight: 35px;
	overflow: hidden;
	padding-left:10px;
}
	
/*COMPONENT: KLIK
------------------*/
	.klik ul.slick-dots {
    margin-bottom: 10px;
}
	

/* COMPONENT : Article Pagination
------------------------------------------*/
	.AP-img {
		margin-bottom: 5px;
	}

/*  COMPONENT : Pakej Slider
---------------------------------*/

.pakej-wrap .image-wrap img {
	height:55vw;
}

/*  COMPONENT : Package Popular
---------------------------------*/
.pakejpop-img {
    width: 100%;
    height: 400px !important;
    object-fit: cover;
    object-position: center center;
}
	
/*  COMPONENT : Package Listing
---------------------------------*/
.PL-img {
    width: 100%;
    height: 400px !important;
    object-fit: cover;
    object-position: center center;
}
	
 /* SHARE STORY WITH US
----------------------------*/	
  .sharewithus i.fa.fa-commenting-o{
       top:-20px;
       left:-10px;
       font-size: 30px;
       padding: 15px 18px
   }

  .sharewithus{
      padding: 13px;
      padding-bottom: 0;
      margin-bottom: 25px;
      padding-right: 0;
  }
.sharewithus .incontent {
    position: static;
    width: 100%;
    margin-bottom: -10px;
    padding-left: 40px;
    display: block;
    overflow: hidden;
}
	
	/* KLIK COMPONENT - HOME & DEFAULT
------------------------------------------*/
.klik-res {
	display: block;
}

.klik-des {
	display: none;
}
}



/*---(Mobile potrait only )---*/
@media (max-width: 575px) {
.popular .list-num li .count {
	padding-left:10px;
	font-size:60px;
}
	
.PengarangFilter .btn-green {
	margin-top: 20px;
	display: block;
}
	
.PengarangFilter select {
	display:  block;
	margin: 5px 0;
	width:  100%;
}
	
	.for-filter {
		float: none;
	}
	
	.dateFilter {
	margin-top: 50px !important;
}
	
	.dateFilter .btn-green {
		margin-top: 10px;
		width: 100%;
	}
	
	.byDate select.filter-list {
		margin-bottom: 10px;
		text-align: left;
		padding-left: 5px;
	}
	
	.byDate {
	padding-right: 12px !important;
}
/* COMPONENT: Video (Home Page)
------------------------------------------*/	
.video-wrapper iframe {
	height: 200px;
}
	
/* PAGE: Video Details
------------------------------------------*/
.main-vid-content iframe {
    width: 100%;
    height: auto;
    min-height: 240px;
}
	
/* COMPONENT: OVERLAY NAV
------------------------------------------*/	
	.close {
		right: 10px;
		xtop: 30px;
	}
	
	ul.share-article-icon {
		margin-top: 60px;
	}
	
	ul.share-article-icon li {
		margin: 0 5px;
	}
	
	.modalDialog > div {
    width: 100%;
}
	
/*ARTIKEL LISTING*/
	.lagi-artikel h3 {
	margin-top: 10px;
}
	
/*  COMPONENT : Package Popular
---------------------------------*/
.pakejpop-img {
    width: 100%;
    height: 363px !important;
    object-fit: cover;
    object-position: center center;
}
	
/*  COMPONENT : Package Listing
---------------------------------*/
.PL-img {
    width: 100%;
    height: 363px !important;
    object-fit: cover;
    object-position: center center;
}
}

/* Special screen size*/
@media (max-width: 420px) {
	.pengarang-profile {
	padding-right: 0;
}
	
	.profile-thumb {
	width: 100px;
	min-height:110px;
	height:  100%;
	float: none;
}

.profile-thumb img {
	margin-right: 30px;
}

.profile-wrap {
	position: relative;
	width: 100%;
}

.profile-wrap .note {
	background: #ffffff;
	padding: 15px 15px 20px 15px;
}

.profile-desc {
    position: static;
    width: 100%;
    padding-right: 10px;
	padding-left: 10px;
}
	
	.profile-desc.pattern {
		height: auto;
	}

.jelajah-block {
	margin-bottom: 160px;
}	

/*COMPONENT: Seach package*/
.form-control.pakej_option.dari-input {
    margin-right: 0;
    width: 100%;
	margin-bottom: 10px;
}
.form-control.pakej_option.ke-input {
    width: 100%;
	margin-bottom: 10px;
}
	
/*  COMPONENT : Package Popular
---------------------------------*/
.pakejpop-img {
    width: 100%;
    height: 260px !important;
    object-fit: cover;
    object-position: center center;
}

/*  COMPONENT : Package Listing
---------------------------------*/
.PL-img {
    width: 100%;
    height: 260px !important;
    object-fit: cover;
    object-position: center center;
}
}

/*landscape mobile*/
@media (min-width:576px) and (max-width:767px) {
	
	/*pakej slider*/
	.pakej .slick-slide {
    height: 50vh;
}

.pakej-wrap .image-wrap img {
	transform: translate(0, -20%);
	}
}


/* Special screen size*/
@media (min-width: 545px) and (max-width: 676px) {
.h198-res.pattern-head::before {
	height: 198px !important;
}
}

/* Special screen size*/
@media (min-width: 991px) and (max-width: 1024px) {
	/*  COMPONENT : Package Popular
---------------------------------*/
.pakejpop-img {
    width: 100%;
    height: 200px !important;
    object-fit: cover;
    object-position: center center;
}
	
/*  COMPONENT : Package Listing
---------------------------------*/
.PL-img {
    width: 100%;
    height: 200px !important;
    object-fit: cover;
    object-position: center center;
}
}

/* Special screen size*/
@media (min-width: 391px) and (max-width: 544px) {
.h215-res.pattern-head::before {
	height: 215px !important;
}
}

/* Special screen size*/
@media (max-width: 432px) {
/*ARTICLE PAGINATION ON STORY PAGE*/
	.AP-header .heading-04 {
		line-height: 18px;
		xfont-size: 16px !important;
	}
}

/*Special screen size*/
@media (max-width: 390px) {
.h233-res.pattern-head::before{
	height: 233px !important;
}
	
.wrap-package {
    margin-bottom: 75px;
}
	
	.story-header {
		align-items: flex-start;
	}
	
	.align-items-none {
		align-items: none;
	}
	
	/*  COMPONENT : Package Popular
---------------------------------*/
.pakejpop-img {
    width: 100%;
    height: 230px !important;
    object-fit: cover;
    object-position: center center;
}

/*  COMPONENT : Package Listing
---------------------------------*/
.PL-img {
    width: 100%;
    height: 230px !important;
    object-fit: cover;
    object-position: center center;
}
}

@media only screen and (max-width: 360px) {
  .tiny-hide {
    display: none !important;
  }
}