/* General */

.main-container {
	padding-top: 172px;
}

.header {
	box-shadow: none;
}

/* Hero Banner */

.hero.banner .content{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 20px;
}

/* Filter Bar */

.filter-bar {
	display: flex;
	flex-direction: row;
	opacity: 1;
	position: fixed;
	top: 116px;
	height: 56px;
	width: 100%;
	z-index: 90;
	padding: 0 8px;
	background: #3c3c41;
	box-shadow: 0 1px 2px rgba(0,0,0, 0.3);
	box-sizing: border-box;
	transition: top .2s ease-in-out, opacity .2s ease-out;
	pointer-events: auto;
}

.filter-bar .filter-container {
	width: 33.3%;
}

.filter-bar .filter {
	display: flex;
	justify-content: center;
	border: 1px solid rgba(0,0,0, 0.3);
	margin: 0 4px;
	padding: 13px 10px;
	border-radius: 24px;
	position: relative;
	background: none;
}

.filter-bar .filter .label,
.filter-bar .filter::after {
	display: inline-block;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 85%;
	font-weight: 500;
	box-sizing: border-box;
	width: 100%;
}

.filter-bar .filter.sources.all .label,
.filter-bar .filter.genres.all .label {
	display: none;
}

.filter-bar .filter.sources.all::after {
	content: 'All Apps';
}

.filter-bar .filter.genres.all::after {
	content: 'All Genres';
}

.overlayed .filter-bar {
	filter: blur(10px);
}

.filter-bar.nav-up,
.searching .filter-bar {
	top: 0;
}

/* Dir Text */

h1 {
	font-size: 100%;
	font-weight: 500;
	padding: 0;
	margin: 16px 18px 4px 18px;
}

.main-container .dir-info {
	font-size: 90%;
	max-height: 38px;
	margin: 0 18px 12px 18px;
	overflow: hidden;
	position: relative;
}

.main-container .dir-info h2 {
	font-size: 110%;
}

.main-container .dir-info > div:not(.more-overlay) {
	margin-bottom: 1em;
	opacity: .5;
}
		
.main-container .dir-info > div:first-child {
	margin-top: 0;
}

.dir-info .more-overlay {
	display: none;
	position: absolute;
	right: 0;
	bottom: 4px;
	padding-right: 20px;
	background: #202125;
	line-height: 16px;
}

.dir-info .more-overlay .separator {
	position: relative;
	top: -1px;
	color: #fff;
}

.dir-info .more-overlay .gradient {
	position: absolute;
	height: 24px;
	width: 40px;
	margin-left: -40px;
	background: -moz-linear-gradient(left, rgba(32,33,37,0) 0%, rgba(32,33,37,1) 100%);
	background: -webkit-linear-gradient(left, rgba(32,33,37,0) 0%,rgba(32,33,37,1) 100%);
	background: linear-gradient(left, rgba(32,33,37,0) 0%,rgba(32,33,37,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#ffffff', GradientType=1);
}

.dir-info .more-overlay .link {
	color: #fff;
}

/* Cards */

.cards {
	display: flex;
	flex-wrap: wrap;
	margin: 1.5%;
}

.card {
	width: 30.2%;
	margin: 1.5%;
}

/* Activity Indicator */

.main-container > .activity-indicator {
	background: url(https://cfm.yidio.com/mobile/img/activity-indicator.gif) center no-repeat;
	background-size: 33px 33px;
	width: 100%;
	height: 56px;
}

/* Filter Overlays */

.overlay.filter .links {
	height: 100%;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}

.overlay.filter ul {
	list-style-type: none;
	padding: 0;
	margin-left: 48px;
	position: relative;
}

.overlay.filter .grouped {
	margin-top: 66px;
	border-bottom: 1px solid rgba(255,255,255, 0.15);
	padding-bottom: 6px;
}

.overlay.filter .grouped li {
	margin-bottom: 18px;
	font-size: 1.3em;
}

.overlay.filter li.selected:after {
	content: '';
	background: url(https://cfm.yidio.com/mobile/img/filter-check.png);
	background-size: 17px 17px;
	width: 17px;
	height: 17px;
	position: absolute;
	left: -33px;
	margin-top: 5px;
}

.overlay.filter li.selected a {
	font-weight: 700;
	color: #ff8c10;
}

.overlay.filter.genres .individual .selected:after {
	margin-top: 3px;
}

.overlay.filter .individual {
	padding-top: 6px;
}

.overlay.filter .individual li {
	margin-bottom: 14px;
	font-size: 1.1em;
}

.overlay.filter .individual li img {
	width: 28px;
	height: 28px;
	margin-right: 14px;
	border-radius: 5px;
	background-color: rgba(0,0,0, 0.2);
}

.overlay.filter .all span {
	display: none;
}

.overlay.filter.sources .all::after {
	content: 'All Apps';
}

.overlay.filter.genres .all::after {
	content: 'All Genres';
}

/* Rating overlay */
.overlay.filter.rating .tomatometer-wrapper{
	padding: 5px 15px;
	font-size:.8em;
	margin: 18px 0 0px 0;
}
.overlay.filter.rating .audience-wrapper{
	padding: 5px 15px;
	font-size:.8em;
	margin:0px 0 0px 0;
}
.overlay.filter.rating .imdb-wrapper{
	padding: 5px 15px;
	font-size:.8em;
	margin:0px 0 0px 0;
}
.overlay.filter.rating .tomatometer-wrapper h3{
	background:url(https://cfm.yidio.com/images/rt-filter-dir.png) no-repeat;
	background-size: 25px 25px;
	background-position: 0px 0px;
	padding-left: 30px;
	padding-bottom: 5px;
}
.overlay.filter.rating .audience-wrapper h3{
	background:url(https://cfm.yidio.com/images/rt-audience-filter-dir.png) no-repeat;
	background-size: 25px 25px;
	background-position: 0px 0px;
	padding-left: 30px;
	padding-bottom: 5px;
}
.overlay.filter.rating .imdb-wrapper div{
	font-weight: 600;
	font-size: 1.2em;
	background:url(https://cfm.yidio.com/images/imdb-logo.png) no-repeat;
	background-size: 40px 16px;
	background-position: 0px 4px;
padding-left: 47px;
	padding-bottom: 5px;
}
.overlay.filter.rating .confirm-reset{
	border-top: 1px solid #333;
padding: 1px 18px 0px 18px;
margin-top: 3px
}
.overlay.filter.rating .confirm-reset .reset{
	float:left;
	padding:10px 0 10px 0;
	cursor:pointer;
}
.overlay.filter.rating .confirm-reset .confirm{
	float:right;
	border:1px solid #666;
	border-radius:20px;
	display:block;
	padding:10px 20px 10px 20px;
	cursor:pointer;
}

/* Sort By */
.overlay.filter.rating.tv-shows-rating .sort-by{
	margin-top: 58px;
border-top: none;
}

.overlay.filter.rating .sort-by{
	font-weight: 600;
	font-size: 1.2em;
	border-top: 1px solid #333;
	text-align:center;
}
.overlay.filter.rating .sort-by h3{
	text-align:center;
	margin:0px;
}
.onoffswitch {
	text-align:center;
	margin:0 auto;
position: relative; 
width: 70px;
-webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.overlay.filter.rating .sort-by .left-label{
	float:left;
	padding: 10px 30px;
	font-size:12px;
}
.overlay.filter.rating .sort-by .right-label{
	float:right;
	margin-top: -25px;
padding-right: 20px;
font-size:12px;
}
.onoffswitch-checkbox {
	display: none;
}
.onoffswitch-label {
	display: block; overflow: hidden; cursor: pointer;
	height: 36px; padding: 0; line-height: 36px;
	border: 0px solid #CCCCCC; border-radius: 30px;
	background-color: #428BCA;
}
.onoffswitch-label:before {
	content: "";
	display: block; width: 30px; margin: 3px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 32px;
	border-radius: 30px;
	
}
.onoffswitch-checkbox:checked + .onoffswitch-label {
	background-color: #428BCA;
}
.onoffswitch-checkbox:checked + .onoffswitch-label, .onoffswitch-checkbox:checked + .onoffswitch-label:before {
	border-color: #428BCA;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label:before {
	right: 0px; 
	background-color: #FFFFFF; 
	
}

.no-results {
	position: absolute;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	height: 180px;
text-align: center;
}

.no-results:before {
	content: '';
	display: block;
	opacity: 0.2;
	width: 100%;
	height: 130px;
}

.no-results.movie:before {
	background: url(https://cfm.yidio.com/mobile/img/empty-movie.png) no-repeat center; 
	background-size: 160px;
}

.no-results.show:before {
	background: url(https://cfm.yidio.com/mobile/img/empty-show.png) no-repeat center; 
	background-size: 160px;
}

.no-results h2 {
	font-size: 1.1em;
	font-weight: 300;
	margin: 8px 0 0 0;
}

.no-results h3 {
	font-size: 0.9em;
	font-weight: 300;
	margin: 0;
	opacity: 0.5;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}
.pagination a {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border: 1px solid #454545;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}
.pagination a:hover {
    background-color: #F0F0F0;
    color: #000;
}
.pagination .active {
    background-color: #2f2f2f;
    color: #fff;
    border:1px solid #2f2f2f;
    cursor:default;
	display: inline-block;
    padding: 8px 12px;
    margin: 0 4px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}


/* ==========================================================================
   Landscape overrides
   ========================================================================== */

@media screen and (orientation: landscape) {
	.no-results {
		padding-top: 80px;
	}
}

@media screen and (min-width: 380px) {
	.overlay.filter.rating .tomatometer-wrapper{
		font-size:1em;
		padding:15px;
		margin: 28px 0 0px 0;
	}	
	.overlay.filter.rating .audience-wrapper{
		font-size:1em;
		padding:15px;
	}
	.overlay.filter.rating .imdb-wrapper{
		font-size:1em;
		padding:15px;
		margin-bottom:18px;
		margin-top: 44px;
	}
	.overlay.filter.rating .sort-by h3 {
    margin: 5px;
	}
	
	.overlay.filter.rating .confirm-reset{
		border-top:1px solid #333;
		padding:10px 18px 0px 18px;
		margin-top:25px;
	}
	
	.overlay.filter.rating .sort-by .right-label, .overlay.filter.rating .sort-by .left-label{
		font-size:16px;
	}
	.overlay.filter.rating .sort-by .left-label{
		padding: 10px 50px;
	}
	
}

@media screen and (max-width: 320px) {
	
	/* Smaller card action icons for narrow screens */
	
	.card .action {
		background-size: 24px;
	}
	
}

@media screen and (min-width: 480px) and (max-width: 959px) {
	
	/* 4 column grid for wide screens */
	
	.cards {
		margin: 1%;
	}
	
	.card {
		width: 22.9%;
		margin: 1%;
	}

}

@media screen and (min-width: 960px) {
	
	/* 5 column grid for really wide screens */
	
	.cards {
		margin: 1%;
	}
	
	.card {
		width: 17.9%;
		margin: 1%;
	}

}

@media screen and (max-width: 375px) {

	.overlay.filter.rating .imdb-wrapper{
			padding-top: 60px;
	}

}
    

/* Ion.RangeSlider, Simple Skin
// css version 2.0.3
// Denis Ineshin, 2014    //github.com/IonDen
// guybowden, 2014        //github.com/guybowden
// ===================================================================================================================*/
.irs,.irs-line{position:relative;display:block}.irs,.irs-bar,.irs-bar-edge,.irs-line{display:block}.irs{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.irs-line{overflow:hidden;outline:0!important}.irs-line-left,.irs-line-mid,.irs-line-right{position:absolute;display:block;top:0}.irs-line-left{left:0;width:11%}.irs-line-mid{left:9%;width:82%}.irs-line-right{right:0;width:11%}.irs-bar,.irs-shadow{position:absolute;width:0;left:0}.irs-bar-edge{position:absolute;top:0;left:0}.irs-shadow{display:none}.irs-from,.irs-max,.irs-min,.irs-single,.irs-slider,.irs-to{display:block;position:absolute;cursor:default}.irs-slider{z-index:1}.irs-slider.type_last{z-index:2}.irs-min{left:0}.irs-max{right:0}.irs-from,.irs-single,.irs-to{top:0;left:0;white-space:nowrap}.irs-grid{position:absolute;display:none;bottom:0;left:0;width:100%;height:20px}.irs-with-grid .irs-grid{display:block}.irs-grid-pol{position:absolute;top:0;left:0;width:1px;height:8px;background:#000}.irs-grid-pol.small{height:4px}.irs-grid-text{position:absolute;bottom:0;left:0;white-space:nowrap;text-align:center;font-size:9px;line-height:9px;padding:0 3px;color:#000}.irs-disable-mask{position:absolute;display:block;top:0;left:-1%;width:102%;height:100%;cursor:default;background:rgba(0,0,0,0);z-index:2}.irs-disabled{opacity:.4}.lt-ie9 .irs-disabled{filter:alpha(opacity=40)}.irs-hidden-input{position:absolute!important;display:block!important;top:0!important;left:0!important;width:0!important;height:0!important;font-size:0!important;line-height:0!important;padding:0!important;margin:0!important;outline:0!important;z-index:-9999!important;background:0 0!important;border-style:solid!important;border-color:transparent!important}

/* Code for html5 =====================================================================================================================  */


.irs-from,.irs-max,.irs-min,.irs-single,.irs-to{line-height:1.333;text-shadow:none;padding:1px 5px}.irs{height:55px}.irs-with-grid{height:75px}.irs-line{height:10px;top:33px;background:#EEE;background:linear-gradient(to bottom,#DDD -50%,#FFF 150%);border:1px solid #CCC;border-radius:16px;-moz-border-radius:16px}.irs-line-left,.irs-line-mid,.irs-line-right{height:8px}.irs-bar{height:10px;top:33px;border-top:1px solid #428bca;border-bottom:1px solid #428bca;background:#428bca;background:linear-gradient(to top,rgba(66,139,202,1) 0,rgba(127,195,232,1) 100%)}.irs-bar-edge{height:10px;top:33px;width:14px;border:1px solid #428bca;border-right:0;background:#428bca;background:linear-gradient(to top,rgba(66,139,202,1) 0,rgba(127,195,232,1) 100%);border-radius:16px 0 0 16px;-moz-border-radius:16px 0 0 16px}.irs-shadow{height:2px;top:38px;background:#000;opacity:.3;border-radius:5px;-moz-border-radius:5px}.irs-grid,.irs-slider{height:27px}.lt-ie9 .irs-shadow{filter:alpha(opacity=30)}.irs-slider{top:25px;width:27px;border:1px solid #AAA;background:#DDD;background:linear-gradient(to bottom,rgba(255,255,255,1) 0,rgba(220,220,220,1) 20%,rgba(255,255,255,1) 100%);border-radius:27px;-moz-border-radius:27px;box-shadow:1px 1px 3px rgba(0,0,0,.3);cursor:pointer}.irs-slider.state_hover,.irs-slider:hover{background:#FFF}.irs-max,.irs-min{color:#333;font-size:12px;top:0;background:rgba(0,0,0,.1);border-radius:3px;-moz-border-radius:3px}.lt-ie9 .irs-max,.lt-ie9 .irs-min{background:#ccc}.irs-from,.irs-single,.irs-to{color:#fff;font-size:14px;background:#428bca;border-radius:3px;-moz-border-radius:3px}.lt-ie9 .irs-from,.lt-ie9 .irs-single,.lt-ie9 .irs-to{background:#999}.irs-grid-pol{opacity:.5;background:#428bca}.irs-grid-pol.small{background:#999}.irs-grid-text{bottom:5px;color:#99a4ac}