/*
 * Title:   Travelo | Responsive HTML5 Travel Template - Responsive CSS file
 * Author:  http://themeforest.net/user/soaptheme
 */

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
[Table of contents]

1. New Grid System
2. Add clearfix in the grid system
3. Styles for devices(>=992px and <=1199px)
4. Styles for devices(<=1199px)
5. Styles for devices(<=991px )
6. Styles for devices(>=768px and <= 991px)
7. Styles for devices(<=767px )
8. Styles for devices(<=480px )
9. Styles for devices(<=320px )

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@import 'mixin';

/* 1. New Grid System */
// make col-sms class for mobile which has width from 480 to 767
.col-sms-1,.col-sms-2,.col-sms-3,.col-sms-4,.col-sms-5,.col-sms-6,.col-sms-7,.col-sms-8,.col-sms-9,.col-sms-10,.col-sms-11,.col-sms-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 481px) and (max-width: 767px) {
  .col-sms-1,.col-sms-2,.col-sms-3,.col-sms-4,.col-sms-5,.col-sms-6,.col-sms-7,.col-sms-8,.col-sms-9,.col-sms-10,.col-sms-11,.col-sms-12 {
    float: left;
  }
  .col-sms-12 {
    width: 100%;
  }
  .col-sms-11 {
    width: 91.66666667%;
  }
  .col-sms-10 {
    width: 83.33333333%;
  }
  .col-sms-9 {
    width: 75%;
  }
  .col-sms-8 {
    width: 66.66666667%;
  }
  .col-sms-7 {
    width: 58.33333333%;
  }
  .col-sms-6 {
    width: 50%;
  }
  .col-sms-5 {
    width: 41.66666667%;
  }
  .col-sms-4 {
    width: 33.33333333%;
  }
  .col-sms-3 {
    width: 25%;
  }
  .col-sms-2 {
    width: 16.66666667%;
  }
  .col-sms-1 {
    width: 8.33333333%;
  }
  .col-sms-pull-12 {
    right: 100%;
  }
  .col-sms-pull-11 {
    right: 91.66666667%;
  }
  .col-sms-pull-10 {
    right: 83.33333333%;
  }
  .col-sms-pull-9 {
    right: 75%;
  }
  .col-sms-pull-8 {
    right: 66.66666667%;
  }
  .col-sms-pull-7 {
    right: 58.33333333%;
  }
  .col-sms-pull-6 {
    right: 50%;
  }
  .col-sms-pull-5 {
    right: 41.66666667%;
  }
  .col-sms-pull-4 {
    right: 33.33333333%;
  }
  .col-sms-pull-3 {
    right: 25%;
  }
  .col-sms-pull-2 {
    right: 16.66666667%;
  }
  .col-sms-pull-1 {
    right: 8.33333333%;
  }
  .col-sms-pull-0 {
    right: 0%;
  }
  .col-sms-push-12 {
    left: 100%;
  }
  .col-sms-push-11 {
    left: 91.66666667%;
  }
  .col-sms-push-10 {
    left: 83.33333333%;
  }
  .col-sms-push-9 {
    left: 75%;
  }
  .col-sms-push-8 {
    left: 66.66666667%;
  }
  .col-sms-push-7 {
    left: 58.33333333%;
  }
  .col-sms-push-6 {
    left: 50%;
  }
  .col-sms-push-5 {
    left: 41.66666667%;
  }
  .col-sms-push-4 {
    left: 33.33333333%;
  }
  .col-sms-push-3 {
    left: 25%;
  }
  .col-sms-push-2 {
    left: 16.66666667%;
  }
  .col-sms-push-1 {
    left: 8.33333333%;
  }
  .col-sms-push-0 {
    left: 0%;
  }
  .col-sms-offset-12 {
    margin-left: 100%;
  }
  .col-sms-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sms-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sms-offset-9 {
    margin-left: 75%;
  }
  .col-sms-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sms-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sms-offset-6 {
    margin-left: 50%;
  }
  .col-sms-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sms-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sms-offset-3 {
    margin-left: 25%;
  }
  .col-sms-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sms-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sms-offset-0 {
    margin-left: 0%;
  }
}

/* 2. Add clearfix in the grid system */
.row.add-clearfix > .col-xs-2:nth-child(6n+1) { clear: both; }
.row.add-clearfix > .col-xs-3:nth-child(4n+1) { clear: both; }
.row.add-clearfix > .col-xs-4:nth-child(3n+1) { clear: both; }
.row.add-clearfix > .col-xs-6:nth-child(2n+1) { clear: both; }

@media (min-width: 481px) {
  /* add clearfix in the grid system */
  .row.add-clearfix > .col-sms-2 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: none; }
    &:nth-child(6n+1) { clear: both; }
  }
  .row.add-clearfix > .col-sms-3 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: both; }
  }
  .row.add-clearfix > .col-sms-4 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: both; }
  }
  .row.add-clearfix > .col-sms-6 {
    &:nth-child(2n+1) { clear: both; }
  }
}

@media (min-width: 768px) {
  
  /* add clearfix in the grid system */
  .row.add-clearfix > .col-sm-2 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: none; }
    &:nth-child(6n+1) { clear: both; }
  }
  .row.add-clearfix > .col-sm-3 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: both; }
  }
  .row.add-clearfix > .col-sm-4 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: both; }
  }
  .row.add-clearfix > .col-sm-6 {
    &:nth-child(2n+1) { clear: both; }
  }
}

@media (min-width: 992px) {
  .mobile-menu { display: none !important; }
  .visible-mobile { display: none !important; }

  /* add clearfix in the grid system */
  .row.add-clearfix > .col-md-2 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: none; }
    &:nth-child(6n+1) { clear: both; }
  }
  .row.add-clearfix > .col-md-3 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: both; }
  }
  .row.add-clearfix > .col-md-4 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: both; }
  }
  .row.add-clearfix > .col-md-6 {
    &:nth-child(2n+1) { clear: both; }
  }
}

@media (min-width: 1200px) {
  .container { padding-left: 0; padding-right: 0; }

  /* add clearfix in the grid system */
  .row.add-clearfix > .col-lg-2 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: none; }
    &:nth-child(6n+1) { clear: both; }
  }
  .row.add-clearfix > .col-lg-3 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(4n+1) { clear: both; }
  }
  .row.add-clearfix > .col-lg-4 {
    &:nth-child(2n+1) { clear: none; }
    &:nth-child(3n+1) { clear: both; }
  }
  .row.add-clearfix > .col-lg-6 {
    &:nth-child(2n+1) { clear: both; }
  }
}

/* 3. Styles for devices(>=992px and <=1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .container { padding-left: 0; padding-right: 0; }
}

/* 4. Styles for devices(<=1199px) */
@media (max-width: 1199px) {
  [class^="col-lg-"] {
    &.pull-left, &.pull-right { float: none !important; } 
  }

  .image-carousel.style3 .flex-direction-nav li a {
    &.flex-prev { left: 10px; }
    &.flex-next { right: 10px; }
  }
  html.post-404page.style3 #page-wrapper { background-size: 170% auto; }
}

/* 5. Styles for devices(<=991px ) */
@media (max-width: 991px) {
  .container { width: auto; padding-left: 15px; padding-right: 15px; }
  .page-title-container.style4 .page-title { margin-left: -15px; padding-left: 15px; }
  #header {
    padding-top: 0 !important; background: none !important;
    .logo {
      float: none !important; position: static !important; padding-top: 19px; height: 66px; margin: 0 !important; display: block;
      a:after { display: none !important; }
      a { background-size: auto 30px; }
      img { height: 30px; width: auto; @include opacity(0, true); }
    }
    .main-navigation { background: #fff; }
    .mobile-menu-toggle { display: block; }
    #main-menu { display: none; }
    .topnav { display: none; }
  }
  .dashboard {
    &.style1, &.style2 {
      #header .logo img { @include opacity(1, true); }
    }
  }
  
  .search-tabs { display: none !important; }
  .visible-mobile .search-tabs { display: block !important; }
  .search-box .search-tab-content { float: none !important; width: auto !important; }

  .hidden-mobile { display: none !important; }
  
  [class^="col-md-"], [class*=" col-md-"] {
    &.pull-left, &.pull-right { float: none !important; } 
  }
  
  .block-sm { float: none !important; margin-bottom: 10px !important; }
  
  .tab-container .tab-pane {
    [class^="col-md-"], [class*=" col-md-"] { padding-left: 0; padding-right: 0; }
    .row [class^="col-md-"], .row [class*=" col-md-"], [class^="col-sm-"], [class*=" col-sm-"], [class^="col-sms-"], [class*=" col-sms-"], [class^="col-xs-"], [class*=" col-xs-"] { padding-left: 10px; padding-right: 10px; }
  }
  dl.term-description {
    dd { padding-left: 20px; }
  }
  #style-changer { display: none; }
  .hidden-table-sm.table-wrapper { 
    display: block; 
    &.intro { border: 15px solid #f5f5f5; }
    > .table-cell, > .table-row > .table-cell { display: block; &.pull-left { float: left !important; } &.pull-right { float: right !important; } }
  }

  .travelo-process .process {
    margin-top: -27px; margin-left: -27px; margin-right: -27px;
    .icon-wrapper i { font-size: 30px; }
  }

  .world-map-section { height: 600px; }

  .promo-box {
    text-align: center;
    .m-title {
      font-size: 1.6667em;
      em i { font-size: 0.8462em; }
    }
    .action-section {
      text-align: center; padding-top: 15px;
      button { font-size: 0.9167em; height: 34px; line-height: 34px; padding: 0 20px; }
    }
    input.input-text { height: 34px; }
  }

  .travelo-policies {
    ul.tabs {
      li { float: none; }
      &.full-width {
        display: block;
        > li {
          display: block; width: auto;
          a { padding-left: 20px !important; text-align: left; }
        }
      }
    }
  }

  .coming-soon-page {
    &.style2 {
      .clock li span { font-size: 10em; }
      .clock li.sep { font-size: 7em; }
      .clock li label { font-size: 1.5em; }
    }
  }
  .loading-page {
    &.style2 {
      .notice-message { font-size: 8em; }
    }
  }

  .soap-login-page #page-wrapper { vertical-align: top; }

  /* slider */
  .revolution-slider .tp-caption a.link { font-size: 12px !important; line-height: 24px !important; }
}

/* 6. Styles for devices(>=768px and <= 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .tab-container.full-width-style {
    ul.tabs { width: 20%; }
    .tab-content { width: 80%; }
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  /*.hidden-xs { display: block !important; }*/
}

/* 7. Styles for devices(<=767px ) */
@media (max-width: 767px) {
  
  /* remove chaser in mobile */
  .chaser { display: none !important; }
  
  .tab-container {
    ul.tabs {
      li {
        float: none; padding-right: 0;
        &.pull-right { float: none !important; }
      }
      &.full-width {
        display: block;
        > li {
          display: block; width: auto;
          a { padding-left: 20px !important; text-align: left; }
        }
      }
    }
    &.style1 {
      ul.tabs {
        li > a:after { display: none !important; }
      }
    }
    &.trans-style {
      ul.tabs {
        margin-left: 0;
        li { margin: 0;}
      }
    }
    &.full-width-style {
      ul.tabs { width: 25%; }
      .tab-content { width: 75%; }
    }
  }
  
  [class^="col-sm-"], [class*=" col-sm-"] {
    &.pull-left, &.pull-right { float: none !important; } 
  }
  
  .listing-style3.flight .details {
    .box-title { float: none !important; }
    .time > div  { padding-left: 0 !important; border-right: none !important; }
  }
  
  .hidden-table-sms.table-wrapper { 
    display: block; 
    &.intro { border: 15px solid #f5f5f5; }
    > .table-cell, > .table-row > .table-cell { display: block; &.pull-left { float: left !important; } &.pull-right { float: right !important; } }
  }
  .tab-container .tab-pane {
    [class^="col-sm-"], [class*=" col-sm-"] { padding-left: 0; padding-right: 0; }
    .row [class^="col-sm-"], .row [class*=" col-sm-"], [class^="col-sms-"], [class*=" col-sms-"], [class^="col-xs-"], [class*=" col-xs-"] { padding-left: 10px; padding-right: 10px; }
  }

  .image-box-style.style2 {
    figure { float: none; }
    .details { padding: 20px; }
    &.innerstyle .details { padding: 20px 0 0; } //remove padding if this box is an inner element of parent one which has padding.
  }

  .travelo-process .process {
    margin-top: -18px; margin-left: -18px; margin-right: -18px;
    .icon-wrapper i { font-size: 20px; }
  }

  #content.image-bg2 #main { padding-top: 100px; }

  .world-map-section { height: 500px; }

  .column-2 > * { margin-right: 0; float: none; }
  .column-3 > * {
    &:nth-child(3n+1) { clear: none; }
    &:nth-child(2n+1) { clear: both; }
    &:nth-child(3n) { margin-right: 3%; }
  }
  .column-4 > * {
    &:nth-child(4n+1) { clear: none; }
    &:nth-child(2n+1) { clear: both; }
    &:nth-child(4n) { margin-right: 3%; }
  }
  .column-5 > * {
    width: 31.3333%; margin-right: 3%; margin-bottom: 3%;
    &:nth-child(5n+1) { clear: none; }
    &:nth-child(3n+1) { clear: both; }
    &:nth-child(5n) { margin-right: 3%; }
    &:nth-child(3n) { margin-right: 0; }
  }
  .column-5-no-margin > * {
    width: 50%;
    &:nth-child(5n+1) { clear: none; }
    &:nth-child(2n+1) { clear: both; }
  }
  .column-3, .column-4 {
    > * {
      width: 48.5%; margin-right: 3%; margin-bottom: 3%;
      &:nth-child(2n) { margin-right: 0; }
    }
  }

  .post-404page {
    .error-message { font-size: 3em; }
    .error-message-404 { font-size: 15em; }
    &.style2 {
      .error-message { font-size: 1.6667em; }
      .error-message-404 { font-size: 8em; }
      .go-back { font-size: 1.4em; height: 50px; @include border-radius(25px, 25px, 25px, 25px); line-height: 50px; }
    }
    &.style3 {
      #main { padding-top: 100px; }
      .error-message { font-size: 2.5em; }
      .error-message-404 { font-size: 1.6667em; }
    }
  }

  .coming-soon-page {
    .clock li span { font-size: 4em; }
    .clock li label { font-size: 1em; letter-spacing: 0.04em; }
    &.style2 {
      .clock li span { font-size: 6em; }
      .clock li.sep { font-size: 4.1667em; }
      .clock li label { font-size: 1em; }
      .email-notify .notified-text { font-size: 1.3333em; }
    }
    &.style3 {
      #main { padding-top: 30px; }
    }
  }

  .loading-page {
    &.style2 {
      .notice-message { font-size: 6.25em; }
    }
  }

  .image-box.style2 {
    figure { float: none; }
    .details { padding-left: 20px; padding-bottom: 20px; }
  }

  .breadcrumbs { display: none; }

  /* slider */
  .revolution-slider .tp-caption a.link { font-size: 9px !important; line-height: 18px !important; }

  #booking .booking-info {
    > .box-title { float: none; }
    .info { border-left: none; }
  }

  .banner {
    .big-caption { font-size: 3em; }
    .med-caption { font-size: 1.8333em; }
  }
}

/* 8. Styles for devices(<=480px ) */
@media (max-width: 480px) {
  .tab-container.full-width-style {
    ul.tabs { width: 30%; }
    .tab-content { width: 70%; }
  }
  
  .image-box-style.style2 {
    figure { width: 100%; float: none; }
    .details { padding: 20px; }
  }
  
  .visible-sms { display: block; }

  .tab-container .tab-pane {
    [class^="col-sms-"], [class*=" col-sms-"] { padding-left: 0; padding-right: 0; }
    .row [class^="col-sms-"], .row [class*=" col-sms-"], [class^="col-xs-"], [class*=" col-xs-"] { padding-left: 10px; padding-right: 10px; }
  }

  .hidden-table-xs.table-wrapper { 
    display: block; 
    &.intro { border: 15px solid #f5f5f5; }
    > .table-cell, > .table-row > .table-cell { display: block; &.pull-left { float: left !important; } &.pull-right { float: right !important; } }
  }

  .image-style.style1 {
    margin-right: 0; padding: 15px;
    &:before, &:after { display: none; }
    .image-block { margin-right: 0; float: none !important; }
  }

  .column-5 {
    > * {
      width: 48.5%; margin-right: 3%; margin-bottom: 3%;
      &:nth-child(5n+1) { clear: none; }
      &:nth-child(3n+1) { clear: none; }
      &:nth-child(2n+1) { clear: both; }
      &:nth-child(5n) { margin-right: 3%; }
      &:nth-child(3n) { margin-right: 3%; }
      &:nth-child(2n) { margin-right: 0; }
    }
  }

  .coming-soon-page {
    .clock li span { font-size: 3em; }
    .clock li label { font-size: 1em; letter-spacing: 0.04em; }
    &.style2 {
      .clock li span { font-size: 4em; }
      .clock li.sep { font-size: 2.8333em; }
      .clock li label { font-size: 0.8333em; }
    }
    &.style3 {
      #main { padding-top: 10px; }
      .clock li span { font-size: 3.3333em; width: 60px; height: 60px; line-height: 60px; }
      .clock li.sep { font-size: 2.8333em; }
      .email-notify { width: 100%; }
      .header-title { font-size: 2em; }
      .container:before { display: none; }
    }
  }
}

/* 9. Styles for devices(<=320px ) */
@media (max-width: 320px) {
   .container { width: 314px; }
   .row { padding: 0 3px; }
   .column-5-no-margin > * { float: none; }
}