/* ==========================================================================
     RESPONSIVE STYLES
 ========================================================================== */ 

/* ------------------------------------------------------------------------ */
@media (max-width: 1200px) {
    /* ----------------------------------------------
    /* Home Header / Hero 
    /* -------------------------------------------- */
    .hero-section {
        padding: 0 30px;
    }
    /* ----------------------------------------------
    /* Wrappers    
    /* -------------------------------------------- */
    .wrapper-tier {
        margin: 90px 30px;
    }
    .wrapper-section {
        margin: 50px 30px;
    }
    .wrapper-touts {
        margin: 0 30px;
    }
    /* ----------------------------------------------
    /* Signup    
    /* -------------------------------------------- */
    .sign-up li.devices {
        margin-top: -80px;
        margin-left: -20px;
    }
    .sign-up li.devices img {
        width: 360px;
        height: auto;
    }
    .sign-up li.sign-up-content {
        margin-left: 25px;
        margin-right: 0;
    }
    .sign-up li.badges ul img {
        width: 170px;
    }
    .sign-up h5 {
        font-size: 22px;
    }
    /* ----------------------------------------------
    /* Widget    
    /* -------------------------------------------- */
    .widget .txt-holder {
      width: 60%;
    }
    ul.tabs-nav li {
      padding-right: 15px;
    }
    ul.tabs-nav li a {
      font-size: 14px;
    }
    span.text-block01 {
      display: initial;
    }
    #press .bottom-line p {
        font-size: 32px;
    }
}


@media (min-width: 768px){
    .modal-dialog {
        margin: 50px auto;
    }    
}


/* ------------------------------------------------------------------------ */
@media (max-width: 1024px) {
    /* ----------------------------------------------
    /* Home Header / Hero 
    /* -------------------------------------------- */
    #home .header .overlay {
      height: 530px;
    }
    /* ----------------------------------------------
    /* Signup    
    /* -------------------------------------------- */
    .sign-up li.badges ul img {
        width: 155px;
    }
    /* ----------------------------------------------
    /* Paging nav    
    /* -------------------------------------------- */
    .numeric-nav ul li.prev-btn {
      padding-right: 30px;
    }
    .numeric-nav ul li.next-btn {
      padding-left: 30px;
    }

    .grad-bg {
        height: 100%;
        position: absolute;
        width: 100%;
        z-index: -1;
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#76c05c+0,62aa52+10,49a3d5+38,49a3d5+95 */
        background: rgb(118,192,92); /* Old browsers */
        background: url('https://www.mileiq.com/blog/wp-content/themes/mileiq-blog-2016/images/map-bkg.png');
        background-size: 1024px;
        background-repeat: no-repeat;
    }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 992px) {
    /* ----------------------------------------------
    /* Sticky Menu     
    /* -------------------------------------------- */
    .nav-sections>li a span {
        display: none;
    }
    .nav-sections>li a {
        background-position: 50% !important;
    }
    /* ----------------------------------------------
    /* Signup     
    /* -------------------------------------------- */
    .sign-up {
        margin-top: 80px;
    }
    .sign-up li {
        float: none;
        text-align: center;
    }
    .sign-up li.devices {
        margin-left: 0;
    }
    .sign-up li.devices img {
        width: 360px;
        height: auto;
    }
    .sign-up li.sign-up-content {
        margin-right: 0;
        margin-left: 0;
        padding-bottom: 25px;
        width: 100%!important;
    }
    .sign-up li.badges {
        float: none;
        margin-right: 0px!important; 
        margin-top: 0px!important; 
        width: 100%!important; 
    }
    .sign-up li.badges ul {
        margin-right: 0;
    }
    .sign-up li.badges ul img {
        width: 185px;
    }
    .touts-bar .touts-box-2 {
        text-align: center;
    }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 991px) {
    /* ----------------------------------------------
    /* Wrappers   
    /* -------------------------------------------- */
    .wrapper-tier {
        margin: 50px 30px;
    }
    .wrapper-tier .section-title {
        margin-top: 0;
    }
    /* ----------------------------------------------
    /* Footer   
    /* -------------------------------------------- */
    .footer .social-icons {
        float: none;
    }
    .post-ft .post-img {
      height: 190px;
    }
    .p-lr70 {
      padding: 0px;
    }
    ul.list-style-01 li, ul.list-style-02 li, ul.list-style-03 li {
        background-size: 25px 25px;
        padding-left: 40px;
        line-height: 1.2em;
    }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 768px) {
    /* ----------------------------------------------
    /* Header / Hero  
    /* -------------------------------------------- */
    .hero-section {
        padding: 0;
        text-align: center;
    }
    /* ----------------------------------------------
    /* Badges
    /* -------------------------------------------- */
    .badges li.os-fix {
        text-align: center;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
        display: block;
    }
    .post-ft .post-img {
        height: 160px;
    }
    .post-content .post-title h3, .post-content .post-title h3 a {
        font-size: 19px;
    }
    #press .hero-section h3 {
      font-size: 28px !important;
    }
    #press .hero-section a {
      font-size: 22px;
    }
    #press-kit .lifestyle img {
        width: 100%;
    }
}


/* ------------------------------------------------------------------------ */
@media (max-width: 767px) {
    br {
        display: initial !important;
    }
/* ----------------------------------------------
    /* Main Nav   
    /* -------------------------------------------- */
    .navbar-brand.img-logo img {
        width: 120px;
    }
    .navbar-fixed-top {
        padding-top: 15px;
        padding-bottom: 15px;
    }
    /* ----------------------------------------------
    /* Footer  
    /* -------------------------------------------- */
    .footer h5 {
        font-size: 20px !important;
        margin-bottom: 10px;
    }
    .footer .menues ul {
        margin-bottom: 40px;
        font-size: 14px;
    }
    /* ----------------------------------------------
    /* Section Title    
    /* -------------------------------------------- */
    .section-title {
        margin-bottom: 25px;
    }
    .section-title h2 {
        font-size: 24px;
    }
    .section-title h2::before, .section-title h2::after {
        width: 270px;
    }
    .sign-up h5 {
        font-size: 21px !important;
    }

    .post-header .social-icons {
        float: none;
        padding-top: 15px;
    }
    .post-header .social-icons ul {
        border-left: none;
        padding-left: 0;
    }
    .wrapper-content {
      margin: 110px 0 50px;
    }
    .header-title {
      width: auto;
    }
    .page .header-title {
      margin-bottom: 30px;
    }
    .page .header-title .header-blog-name {
        font-size: 23px;
    }
    .page .header-title .header-blog-name::before, .page .header-title .header-blog-name::after {
        width: 200px;
    }
    .post-footer ul.footer-social {
      text-align: left;
      border-top: 1px solid #ddd; 
    }
    /* ----------------------------------------------
    /* Paging nav    
    /* -------------------------------------------- */ 
    .numeric-nav ul li a {
        padding: 5px 15px;
    }
    .numeric-nav ul li.prev-btn {
        padding-right: 15px;
    }
    .numeric-nav ul li.next-btn {
        padding-left: 15px;
    }
    /* ----------------------------------------------
    /* Press
    /* -------------------------------------------- */
    #press-release {
      text-align: center;
    }
    .news-img {
      max-width: 160px;
      max-height: 90px;
    }
    #in-the-news img {
      max-width: 160px;
      max-height: 90px;
    }
    .news-text { 
      padding-left: 200px;
    }
    #logo {
        text-align: center;
    }
    ul.logo-download {
        border-left: none; 
        margin-top: 0;
        padding-left: 0;
        margin-bottom: 40px;
    }
    #logo p {
        font-size: 18px !important;
    }
    #press .bottom-line a.btn {
        margin-top: 20px;
    }
}


/* ------------------------------------------------------------------------ */
@media (max-width: 627px) {
    /* ----------------------------------------------
    /* Header / Hero 
    /* -------------------------------------------- */
    .header-page .section-title {
        top: 100px;
    }
    /* ----------------------------------------------
    /* Wrappers   
    /* -------------------------------------------- */
    .wrapper-section,
    .wrapper-tier {
        margin: 30px 15px;
    }
    .sign-up li.devices img {
        width: 300px;
    }
}
/* ------------------------------------------------------------------------ */
@media (max-width: 599px) {
    h1, .h1 {
        font-size: 30px;
    }
    h2, .h2 {
        font-size: 24px;
    }
    h3, .h3 {
        font-size: 20px;
    }
    h4, .h4 {
        font-size: 18px;
    }
    h5, .h5 {
        font-size: 18px;
    }
    .adt-title p {
        font-size: 18px;
    }
    /* ----------------------------------------------
    /* Hero Section    
    /* -------------------------------------------- */
    .hero-section h1 {
        font-size: 40px !important;
    }
    .hero-section h2, .hero-section h3 {
        font-size: 18px !important;
    }
    /* ----------------------------------------------
    /* Section Title    
    /* -------------------------------------------- */
    .wrapper-inner-content {
        padding: 20px;
        padding-left: 0px;
        padding-right: 0px;
    }
    .post-content{
        padding-left: 10px;
        padding-right: 10px;
    }
    .post-wrapper {
      margin-bottom: 20px;
    }
      .header-title .header-blog-name {
      font-size: 55px;
    }
    .header-title .header-blog-name::after {
      width: 315px;
    }
      .header-title .header-blog-title:before, .header-title .header-blog-title:after {
      width: 117px;
    }
    .post-content .post-title h1.main-post-title, .post-content .post-title h1.main-post-title a {
      font-size: 32px;
    }
    /* ----------------------------------------------
      /* Widget    
      /* -------------------------------------------- */
    .widget {
      margin-bottom: 20px;
    }
    .widget .pic {
      width: 60px;
      height: 60px;
    }
    /* ----------------------------------------------
    /* Press  
    /* -------------------------------------------- */
    .news-img {
      float: none;
      margin-bottom: 20px;
    }
    .news-text { 
      padding-left: 0;
    }
    .download-btn {
      top: -90px;
    }

    body.home .post-content .post-title h2, body.home .post-content .post-title h2 a {
        font-size: 25px;
    }

    body.archive.category .post-content .post-title h2, body.archive.category .post-content .post-title h2 a {
        font-size: 25px;
    }

    .archive h1.page-title, .search h1.page-title{
        padding-left: 10px;
        padding-top: 10px;
        font-size: 25px;
        margin-bottom: 10px;
    }
}

        /* ------------------------------------------------------------------------ */
@media (max-width: 480px) {
    .sb-slidebar {
        width: 95%;
    }
    .download-btn {
      top: -70px;
    }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 479px) {
    /* ----------------------------------------------
    /* Wrappers     
    /* -------------------------------------------- */
    .wrapper-tier, 
    .wrapper-section {
        margin: 30px 0;
    }
    /* ----------------------------------------------
    /* Footer     
    /* -------------------------------------------- */
    .footer .copy li {
        display: inline-block;
        padding: 0 8px;
    }
    .wrapper-tier h2 {
        margin-bottom: 25px;
    }
    /* ----------------------------------------------
    /* Badges     
    /* -------------------------------------------- */
    .badges li {
        margin-left: 2%;
        margin-right: 2%;
        width: 44%;
    }
    .post-footer ul.footer-social li {
        padding-right: 10px;
    }
    .lt {
        display: none;
    }
    /* ----------------------------------------------
    /* Paging nav    
    /* -------------------------------------------- */
    .numeric-nav ul {
      padding-left: 0;
      padding-right: 0;
    }
    .numeric-nav ul li a {
      padding: 5px 7px;
    }
    .numeric-nav ul li.prev-btn {
      padding-right: 5px;
    }
    .numeric-nav ul li.next-btn {
      padding-left: 5px;
    }
}

/* ------------------------------------------------------------------------ */
@media (max-width: 430px) {
    .download-btn {
      top: -60px;
    }
}

/* ------------------------------------------------------------------------ */
    @media (max-width: 380px) {
    .header-title .header-blog-name {
      font-size: 45px;
    }
    .header-title .header-blog-name::after {
      width: 260px;
    }
    .header-title .header-blog-title:before, .header-title .header-blog-title:after {
      width: 90px;
    }
    .cat-menu ul li {
      display: block;
    }
    .cat-menu ul li a {
      border: 0;
    }
    .download-btn {
      top: -45px;
    }
}

@media (max-width: 767px){

    .mobile-cat-menu{
        margin-left: auto;
        margin-right: auto;
        text-align: center;        
    }

    .cat-menu{
        display: none;
    }

    .wrapper-inner-content{
        padding-top: 0px;
    }

    header.header-title{
        margin-bottom: 0px;
        margin-top: -47px;
    }

    .header-title .header-blog-name {
        font-size: 26px!important;
    }

    .header-blog-title{
        display: none;
    }

    .post-ft .post-img{
        margin-top: -2px;
    }

    body.single p.cur-date.light {
        margin-bottom: -35px;
    }

    .single-post .post-bs img {
        margin-top: -2px;
    }
}

@media (min-width: 767px){
    .mobile-cat-menu{
        display: none;
    }
}