/* apps overrides
-------------------------------------------------- */

.apps h1 {
    line-height:64px;
}
.apps {background: #000!important;}

.mobile { background:url('../image/app-on-ipad.html') no-repeat center; background-position:top; background-size:cover;}
.channels-header { background:url('../image/app-on-tablet.html') no-repeat center; background-position:top; background-size:cover;}
.app-header { background:url('../image/rentzap-ipad-mockup.html') no-repeat center; background-position:top; background-size:cover;}

.hero{
    position: relative;
    overflow: hidden;
    width: 100%;
    /*min-height: 100%;*/
    height: 100%;

}
.apps header{
    height: 75px;
}
.apps .promo {
    padding-top:40px;
}

.apps h1 {
    color:#fff;
    font-weight:100;
    font-size:48px;
    padding-bottom:20px;
}

.apps .lead {
    color:#fff;
}

.apps .col-lg-9 {
    padding-top:50px;
}

.apps .store {
    display:inline-block;
    width:200px;
    margin-right:10px;
    opacity:0.8;
    margin-bottom:0px;
    -webkit-transition: opacity 0.5s; /* Safari */
    transition: opacity 0.5s;
}

.apps .store:hover {
    opacity:1;
}

.apps .container-fluid{
    min-height:0!important;
    background-color:#fff;
    /*padding:90px 0 230px;*/
    height:0;
}

.overlay {
    position: absolute;
    bottom: 25%;
    left: 0px;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.bg-grey, .bg-white {
    border-radius: 0px;
    padding-top: 100px;
    padding-bottom:100px;
    min-height: 500px;
}

.secondary-title {
    color: #111;
    font-weight: 100;
    font-size: 45px;
    letter-spacing: -1px;
    margin-bottom: 25px;
}

.apps p {
    font-size: 18px; #font-weight: lighter;
}

.apps .iphone {
    height:500px; 
    z-index:1000;
    /*background:url('../image/tvplayer-on-iphone.png') no-repeat center bottom 160% #f5f5f7;*/
    overflow: hidden;
}

.apps .tv {
    display:inline;
    max-width:350px;
}
/*Subnav filters
-------------------------------------------------- */
.apps header {
    background-color: rgba(0,0,0,0.5);
    box-shadow: 2px 0 5px rgba(0,0,0,0.5);
    background: #22252A;
}
.nav-filters{
    padding-top: 10px;
}
.nav-filters>li>a {
    padding-top: 4px;
    padding-bottom: 4px;
}
.navbar-nav li.active a:after {
    border-bottom-color: #18191B;
}
.nav-filters li a{
    color: #a2a6a7;
}
.active-filter {
    background-color: #22252A;
    border-radius: 2px;
    color: #fff!important;
}
.active-filter:hover {
    background-color: #22252A!important;
    color: #fff!important;
}
.nav-filters li a:hover{
    color: #ffffff;
}


/*.catchup .nav-filters li:first-child a{
  padding-left: 0px;
}*/
/* Media Queries 
-------------------------------------------------- */

@media (min-width: 1387px) {

}

@media (min-width: 1200px) and (max-width: 1386px) {

}
/* Large desktops and laptops */
@media (min-width: 1200px) {

}

/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
    .overlay {
        bottom:15%;
    }
}

/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
    .overlay h1 {
        font-size:40px;
    }
}

/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
    .overlay {
        bottom: 0%;
    }
    .overlay h1 {
        font-size:27px;
    }
    .apps .store {
        margin-bottom: 20px;
        width:150px;
    }
    .apps .container-fluid{
        min-height:0!important;
        padding:90px 0 500px;
        height:0;
    }
    .apps .tv {
        display:block;
        max-width:100%;
    }
    .bg-white, .bg-grey {
        padding-top:50px;
        padding-bottom:50px;
    }
}
#page-preloader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url("../image/preloader.html") no-repeat center center; z-index: 99999;
                 background-color:#000; /* fallback for browser that not support rgba */
                 background-color:rgb(0,0,0); 
                 background-color: rgba(250, 250, 250, .8); /* Works on all modern browsers */}
/* Landscape phones and smaller */
@media (max-width: 480px) {

}

@media (max-width: 320px) {

}
.item , .fill{
    height: 400px !important;
}

.hero {
    min-height: auto;
    height: 480px !important;
}
.channels-box {
    bottom: 0px;
}