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

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

1. Base Styles
  1.1. Basic Styles
  1.2. Layout
2. Global Styles
  2.1. Form Elements
    2.1.1. Select box
    2.1.2. File input box
    2.1.3. Checkbox and Radio
    2.1.4. Form
  2.2. Buttons
    2.2.1. Buttons
    2.2.2. Alert message
    2.2.3. Info box
    2.2.4. Term Description
    2.2.5. Dropcap
    2.2.6. Blockquote
    2.2.7. Pagination
    2.2.8. Hover effect
    2.2.9. Social icons
    2.2.10. Five Stars
    2.2.11. Price section
    2.2.12. Time section
    2.2.13. Badge
  2.3. Travelo Elements
  2.4. Skin Color
  2.5. Positioning
  2.6. Unordered lists
  2.7. Ordered lists
  2.8. Toggle & Accordion
    2.8.1. Style1
    2.8.2. Style2
    2.8.3. Accordion with image
  2.9. Tabs
    2.9.1. Style 1
    2.9.2. Transparent Tab
    2.9.3. Full Width Tab
  2.10. Promo box
  2.11. Photo Gallery
  2.12. Image Style
  2.13. Image Box Styles
  2.14. Icon Box
  2.15. Listing Styles
  2.16. Pricing Tables
  2.17. Post
  2.18. Testimonial
  2.19. Our Team Section
  2.20. Gallery popup
  2.21. Style changer
  2.22. Animated effect
  2.23. Parallax
  2.24. Page Loader
3. Header
  3.1. Main Header
    3.1.1. Mobile navigation
    3.1.2. Header Styles
    3.1.3. Navigation
    3.1.4. Language flags
    3.1.5. Main Menu
    3.1.6. Mega Menu
    3.1.7. Mini Menu
    3.1.8. Mobile Menu
    3.1.9. Sticky Header
    3.2.0. Sign up & Login box
  3.2. Slideshow
  3.3. Page Title
  3.4. Word Map Section
4. Search Form
  4.1. Default Style
  4.2. Style1
  4.3. Style2
  4.4. Map Search
5. Search Results
  5.1. Hotel
    5.1.1. Sort by
    5.1.2. Filters
    5.1.3. Detailed
    5.1.4. Hotel main content, Flight main content
    5.1.5. Booking page
    5.1.6. Thankyou page
  5.2. Flight
  5.3. Car
  5.4. Cruise
6. Dashboard
  6.1. Default
    6.1.1. User profile
    6.1.2. Booking history
  6.2. Style1
  6.3. Style2
7. jQuery UI Elements
  7.1. UI Slider
  7.2. DatePicker
8. Footer
9. Page Content
  9.1. Home page content
    9.1.1. Popular Destinations Section
    9.1.2. Honeymoon section
    9.1.3. Offers Section
    9.1.4. Features Section
    9.1.5. Mobile Section
    9.1.6. Homepage 9
  9.2. Pages
    9.2.1. Service page
    9.2.2. Photo gallery page
    9.2.3. Blog page
    9.2.4. Faq page
    9.2.5. Contact us page
    9.2.6. Travelo polices page
    9.2.7. Sitemap page
  9.3. Special Pages
    9.3.1. 404 page
    9.3.2. Coming soon page
    9.3.3. Loading page
    9.3.4. Login page
  9.4. Extra Pages
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

@import 'variables';
@import 'mixin';

/* 1. Base Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 1.1. Basic Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@import 'base';
@import 'soap-icon';


/* font */
@font-face {
  font-family: 'NexaBlack';
  src: url('../fonts/NexaBlack.eot?') format('eot'), 
       url('../fonts/NexaBlack.otf')  format('opentype'),
       url('../fonts/NexaBlack.woff') format('woff'), 
       url('../fonts/NexaBlack.ttf')  format('truetype'),
       url('../fonts/NexaBlack.svg#NexaBlack') format('svg');
}

/* 1.2. Layout ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.container {  }
#page-wrapper { position: relative; overflow: visible; }
.gray-area { background: #f5f5f5; }
.global-map-area {
  background: url('http://placehold.it/2080x1000') no-repeat;
  .description {
    p { color: $light-blue-theme-color; }
    h1, h2, h3, h4, h5, h6 { color: #fff; }
  }
}
section#content {
  min-height: 400px; padding-top: 40px; text-align: left; background: #f5f5f5;
  &:after { display: table; content: ""; clear: both; }
}
.sm-section { padding-top: 30px; padding-bottom: 20px; }
.md-section { padding-top: 40px; padding-bottom: 30px; }
.section { padding-top: 80px; padding-bottom: 70px; }

.small-box { margin-bottom: 20px; }
.box { margin-bottom: 30px; }
.block { margin-bottom: 40px; }
.large-block { margin-bottom: 70px; }
article { margin-bottom: 20px; }
#main { margin-bottom: 40px; }

.body-blank { display: table; height: 100%; left: 0; margin: 0; overflow-x: hidden; position: absolute; top: 0; width: 100%; }
.wrapper-blank { display: table-cell; float: none; vertical-align: middle; width: 100%; }

/* 2. Global Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.table-wrapper {
  display: table;
  .table-row { display: table-row; float: none !important; }
  .table-cell {
    display: table-cell; vertical-align: top; float: none !important;
    &.content-middle { vertical-align: middle; }
  }
}
.image-container img { max-width: 100%; }
.imagebg-container { background-repeat: no-repeat; background-position: center center; }
.banner {
  position: relative; z-index: 1; padding: 90px 0;
  .big-caption, .med-caption { color: #fff; text-shadow: -2px 2px 3px rgba(0, 0, 0, 0.25); }
  .big-caption { font-size: 4.1667em; }
  .med-caption { font-size: 2.5em; }
}

/* box title */
.box-title {
  margin-bottom: 0; line-height: 1em;
  small {
    font-size: 10px; color: $primary-color; text-transform: uppercase; display: block; margin-top: 4px; /*letter-spacing: normal;*/
    [class^="soap-icon"] { color: $yellow-theme-color; font-size: 1.3333em; }
  }
}
h2.box-title small { font-size: 11px; }
h1.box-title small { font-size: 12px; }
.title {  }  // normal heading text with 0.04em letter spacing
.s-title {
  color: $skin-active-color; // heading text with skin color
  a:hover { color: $skin-hover-color; }
}
.m-title { margin: 0; } // heading text with no letter spacing and no margin
.f-title { letter-spacing: 0.04em; margin-bottom: 10px; } // normal heading text with 0.04em letter spacing and margin bottom

.border-bottom { border-bottom: 1px solid #f5f5f5; }

/*#slideshow, */.flex-viewport .slides li {
  /*img { */-webkit-backface-visibility:hidden; -webkit-perspective: 1000; -webkit-transform: translateZ(0); -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none;/* }*/
}

/* 2.1. Form Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
input.input-text, select, textarea, span.custom-select  { background: #f5f5f5; border: none; line-height: normal; }
input.input-text, textarea, span.custom-select { 
  padding-left: 15px; padding-right: 15px; height: 34px;
  &.input-large { height: 43px; font-size: 1.1667em; }
  &.input-medium { height: 34px; }
  &.input-small { height: 28px; }
  &.input-mini { height: 19px;}
  &.white { background: #fff; } 
}
textarea { height: auto; padding-top: 10px; padding-bottom: 10px; }

/* 2.1.1. Select box */
select { height: 34px; padding: 8px 0 8px 8px; }
select option { padding: 2px 10px; }
.selector {
  position: relative; min-width: 60px; line-height: 0;
  select { position: absolute; z-index: 1; @include opacity(0); width: 100%; -webkit-appearance: menulist-button; line-height: 30px; }
  span.custom-select {
    display: inline-block; line-height: 32px; padding: 0 10px; position: relative; width: 100%; overflow: hidden; white-space: nowrap;
    &:before { position: absolute; right: 0; top: 0; content: ''; background: $skin-select-color; width: 24px; height: 100%; }
    &:after { position: absolute; right: 9px; top: 15px; border-top: 5px solid #fff; border-left: 3px solid transparent; border-right: 3px solid transparent; content: ""; }
  }
  &.style1 span.custom-select {
    &:before { background: transparent; }
    &:after { border-top-color: $skin-select-color; }
  }
}

/* 2.1.2. File input box */
.fileinput {
  position: relative; display: inline-block; min-width: 100px;
  input[type=file] { position: relative; z-index: 2; @include opacity(0); width: 100%; }
  .custom-fileinput { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; line-height: normal; }
  &:after { display: block; content: "BROWSE"; position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; background: $skin-select-color; color: #fff; font-size: 1em; padding-left: 15px; padding-right: 15px; letter-spacing: 0.04em; font-weight: bold; vertical-align: middle; }
}

/* 2.1.3. Checkbox and Radio */
.checkbox, .radio {
  position: relative; margin-top: 0; line-height: 20px;
  &:before { display: block; content: ""; position: absolute; left: 0; top: 3px; width: 14px; height: 14px; border: 1px solid #d1d1d1; z-index: 0; font-family: "soap-icons"; line-height: 12px; text-align: center; }
  &.checked:before { border-color: $skin-bg-color; color: #fff; background: $skin-bg-color; content: "\e8ba"; }
}
/* checkbox */
.checkbox {
  label, &.label { font-size: 1.0833em; line-height: 20px; color: #9e9e9e; }
  input[type="checkbox"] { position: relative; z-index: 1; @include opacity(0); }
}
/* radio */
.radio {
  label, &.label { font-size: 0.9167em; line-height: 20px; }
  input[type="radio"] { position: relative; z-index: 1; @include opacity(0); }
  &:before { background: #fff; @include border-radius(50%, 50%, 50%, 50%); font-size: 1.3333em; line-height: 13px; }
  &.radio-square:before { @include border-radius(0, 0, 0, 0); }
  &.checked:before { content: "\e892"; }
}
.checkbox-inline, .radio-inline { margin-left: 10px; }

/* 2.1.4. Form */
form {
  label { text-transform: uppercase; display: block; margin-bottom: 5px; font-weight: normal; font-size: 0.9167em; }
  .checkbox label, label.checkbox { font-size: 1.0833em; text-transform: none; }
  .radio label, label.radio { font-size: 0.9167em; }
  .form-group { margin-bottom: 15px; }
}
.sidebar form {
  .form-group { margin-bottom: 10px; }
  label { font-size: 0.8333em; margin-bottom: 3px; }
}

.panel-content form label { font-size: 0.8333em; margin-bottom: 3px; }

/* Fourty space */
.box-title, .post-title, .post-meta, .author .name, .mile, .title, .s-title, .price, button, a.button, dl, label, span.info, .price-wrapper, ul.tabs a, .icon-box.style1, .icon-box.style2, .icon-box.style3 .description, .icon-box.style5, .search-results-title, .breadcrumbs { 
  letter-spacing: 0.04em;
}

/* 2.2. Buttons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 2.2.1. Buttons */
button, a.button {
  border: none; color: #fff; cursor: pointer; padding: 0 15px; white-space: nowrap;
  &.btn-large { padding: 0 32px; height: 43px; font-size: 1.1667em; line-height: 43px; }
  &.btn-medium { padding: 0 32px; height: 34px; line-height: 34px; font-size: 1em; }
  &.btn-small { height: 28px; padding: 0 24px; line-height: 28px; font-size: 0.9167em; }
  &.btn-mini { height: 19px; padding: 0 20px; font-size: 0.8333em; line-height: 19px; }
  &.full-width { padding-left: 0; padding-right: 0; }
}
button {
  font-size: 0.9167em; font-weight: bold; background: $button-color; height: 34px; line-height: 34px;
  &:hover { background: #7fb231; }
}
a.button {
  display: inline-block; background: #d9d9d9; font-size: 0.8333em; line-height: 1.8333em; white-space: nowrap; text-align: center;
  &:hover { background: $green-theme-color; }
  &.btn-mini { padding-left: 10px; padding-right: 10px; }
  &.btn-large, &.btn-medium, &.btn-small, &.full-width { font-weight: bold; }
}

button, a.button { 
  &.white { background: #fff; color: inherit; }
  &.silver { background: #d9d9d9; }
  &.sky-blue1 {
    background: $blue-theme-color;
    &:hover { background: #07a5d8; }
  }
  &.yellow {
    background: $yellow-theme-color;
    &:hover { background: #e9b02b; }
  }
  &.dark-blue1 { background: $dark-blue-theme-color; }
  &.green {
    background: $green-theme-color;
    &:hover { background: #7fb231; }
  }
  &.red { background: #e44049; }
  &.light-brown { background: #e6c687; }
  &.orange { background: #ff6000; }
  &.dull-blue { background: #12a0c3; }
  &.light-orange { background: #f5a77d; }
  &.light-purple { background: #db8df6; }
  &.sea-blue { background: #0ab596; }
  &.sky-blue2 { background: #6dace6; }
  &.dark-blue2 { background: #194eb0; }
  &.dark-orange { background: #ff3e3e; }
  &.purple { background: #9f60b5; }
  &.light-yellow { background: #ffd200; }
  
  /* Extra buttons */
  &.btn-extra {
    font-size: 1em; height: 70px; padding: 0; text-transform: uppercase; background: transparent; color: #fff; line-height: 1.5em; border: 1px solid $skin-bg-color; border-left: none; position: relative; overflow: hidden; letter-spacing: 0; display: inline-table; table-layout: fixed; margin-right: 10px; margin-bottom: 10px;
    > i {
      width: 55px; vertical-align: middle; background: $skin-bg-color; color: $dark-blue-theme-color; font-size: 36px; display: table-cell; height: 70px; text-align: right; padding-right: 8px;
      &:after { display: block; content: ""; position: absolute; left: 55px; border-bottom: 70px solid $skin-bg-color; border-right: 16px solid transparent; top: 0; bottom: 0; }
    }
    > span {
      display: table-cell; vertical-align: middle; padding: 0 20px 0 35px; text-align: left;
      em { color: $skin-active-color; font-size: 1.6667em; font-weight: bold; font-style: normal; }
    }
    &:hover {
      color: inherit; background: #fff; border: none; border-right: 1px solid transparent !important;
      > i { color: #fff; }
      span {  }
    }
    
    &.blue {
      border-color: $blue-theme-color;
      > i {
        background: $blue-theme-color;
        &:after { border-bottom-color: $blue-theme-color; }
      }
      > span em { color: $blue-theme-color; }
    }
    &.yellow {
      border-color: $yellow-theme-color;
      > i {
        background: $yellow-theme-color;
        &:after { border-bottom-color: $yellow-theme-color; }
      }
      > span em { color: $yellow-theme-color; }
    }
  }
}

.icon-check {
  position: relative; padding-right: 30px !important; padding-left: 0 !important; overflow: hidden;
  &:after { content: ""; position: absolute; top: 0; right: 0; width: 30px; height: 100%; background: url(../images/icon/icon-check.png) no-repeat center center #7db921; }
  /*&:hover:after { @include animation(toTopFromBottom, 0.35s, forwards); }*/
  &:hover:after { background-color: $green-theme-color; }
}
.with-icon {
  position: relative; padding: 0 !important; display: inline-block;
  .icon { position: absolute; right: 0; top: 50%; margin: -17px 0 0 !important; width: 30px; font-size: 18px; color: #a4a4a4; background: none; padding: 0 !important; height: auto; }
  .input-text { padding-right: 40px !important; }
  &.input-large {
    .icon { width: 43px; height: 43px; margin-top: -21px !important; font-size: 22px; }
    .input-text { padding-right: 48px !important; }
  }
}

/* 2.2.2. Alert message */
.alert {
  @include border-radius(0, 0, 0, 0); border: none; padding: 15px 15px 15px 70px; color: #fff; font-size: 1.0833em; position: relative;
  &:before { content: "\f003"; font-family: "soap-icons"; display: block; font-size: 18px; width: 30px; height: 30px; line-height: 30px; margin: 0 auto; border: 1px solid #fff; @include border-radius(50%, 50%, 50%, 50%); text-align: center; position: absolute; top: 10px; left: 20px; }
  
  &.alert-general { background: #d9d9d9; &:before { content: "\e8bd"; } }
  &.alert-notice { background: #f5cf77; &:before { content: "\e8bb"; } }
  &.alert-error { background: #f6bcc3; &:before { content: "\e8bc"; } }
  &.alert-success { background: #bae675; &:before { content: "\e8ba"; } }
  &.alert-help { background: #91e3fd; &:before { content: "\e876"; } }
  &.alert-info { background: #bfc9f9; &:before { content: "\e818"; } }
}

.alert, .info-box {
  .close { @include opacity(1); font-weight: normal; color: #fff; font-size: 12px;  cursor: pointer; text-shadow: none; float: none; position: absolute; top: 8px; right: 8px; }
  .close:before { content: "\f00d"; font-family: FontAwesome; }
}

.error-field { border: 1px solid #f00; }

/* 2.2.3. Info box */
.info-box {
  .close { color: $skin-bg-color; }
  padding: 20px 25px; border: 1px solid $skin-bg-color; position: relative;
  p { font-size: 1.1667em; }
  > *:last-child { margin-bottom: 0; }
}

/* 2.2.4. Term Description */
dl.term-description {
  text-transform: uppercase; font-size: 0.9167em;
  dt, dd { line-height: 1.3333em; float: left; width: 50%; padding-top: 0.5em; padding-bottom: 0.5em; }
  dt { border-right: 1px solid #f5f5f5; color: $skin-active-color; font-weight: 400; padding-right: 5px; clear: both; }
  dd { padding-left: 20px; }
  &:after { content: ""; display: table; clear: both; }
}

/* 2.2.5. Dropcap */
.dropcap {
  &:first-letter { float: left; color: $skin-active-color; font-size: 4.153em; line-height: 0.8667em; padding: 0; margin-right: 6px; font-weight: bold; text-transform: uppercase; display: block; }
  &.colored:first-letter { color: #fff; background: $skin-bg-color; padding: 4px 4px; margin-top: 3px; margin-right: 10px; }
}

/* 2.2.6. Blockquote */
q, blockquote { quotes: '\201C' '\201D' '\2018' '\2019'; }

blockquote {
  font-size: 1.3333em; line-height: 1.6em; padding: 20px 20px 20px 40px; border-left: none; position: relative; text-indent: -19px;
  p { font-size: 1em; }
  &:before, &:after { font-family: Georgia,serif; font-size: 2.5em; vertical-align: middle; line-height: 0; }
  &:before { content: open-quote; margin-right: 4px; }
  &:after { content: close-quote;; margin-left: 3px; }
  &.style1, &.style2 {
    background: #fff; font-style: italic;
    p { display: inline; }
  }
  &.style1 {
    border-left: 3px solid $skin-select-color; position: relative;
    > span.triangle:before { text-indent: 0; content: "\f0da"; font-family: FontAwesome; color: $skin-select-color; position: absolute; left: -1px; top: 50%; margin-top: -11px; font-style: normal; }
    &:before, &:after { color: #f5f5f5; }
    
    &.border-color-blue {
      border-color: $blue-theme-color;
     > span.triangle:before { color: $blue-theme-color; }
    }
    &.border-color-yellow {
      border-color: $yellow-theme-color;
     > span.triangle:before { color: $yellow-theme-color; }
    }
    &.quote-color-blue {
      &:before, &:after { color: $blue-theme-color; }
    }
    &.quote-color-yellow {
      &:before, &:after { color: $yellow-theme-color; }
    }
  }
  &.style2 {
    color: $skin-active-color;
    &:before, &:after { color: $skin-select-color; }
  }
}
/* 2.2.7. Pagination */
.pagination {
  @include border-radius(0, 0, 0, 0);
  > li {
    float: left; height: 32px; margin-right: 6px; text-align: center; font-size: 0.9167em;
    &.disabled > span { color: #fff; background: #d9d9d9; &:hover { background: #d9d9d9; } }
    > a, > span {
      line-height: 32px; padding: 0 10px; color: #fff; border-radius: 0 !important; background: #d9d9d9; border: none; text-transform: uppercase; font-weight: bold;
      &:hover, &:focus { color: #fff; background: $skin-select-color; }
    }
    &.active > a, &.active > span { background: $skin-select-color !important; }
    &.first, &.prev { margin-right: 10px; }
    &.next, &.last { margin-left: 4px; }
    &.first, &.prev, &.next, &.last  {
      > a {
        background: $green-theme-color; padding: 0 15px;
        &:hover { background: $skin-select-color; }
      }
      &.disabled {
        > a, > span { color: #fff; background: #d9d9d9; }
      }
    }
  }
}

/* 2.2.8. Hover effect */
.hover-effect {
  display: block; position: relative; background: none; overflow: hidden; /*z-index: 0;*/
  &:after { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; visibility: hidden; @include transition(all, 0.4s, ease-out); @include transform(rotateY(180deg) scale(0.5,0.5)); background: url(../images/icon/hover-effect.png) no-repeat center; @include opacity(0); background-color: rgba(red($skin-active-color), green($skin-active-color), blue($skin-active-color), 0.6); }
  img { display: block; position: relative; @include transition(all, 0.4s, ease-out); -webkit-backface-visibility: hidden; }
  &:hover {
    &:after { visibility: visible; @include transform(rotateY(0deg) scale(1,1)); @include opacity(1); }
    img { @include transform(scale(1.2)); }
  }
  
  /*color skin*/
  &.yellow:after { background-color: rgba(255, 255, 40, 0.6); }

  /* style1 : checked icon */
  &.style1 {
    &:after { color: #fff; background: none; content: "\e8ba"; font-family: "soap-icons"; font-size: 1.6667em; text-align: center; line-height: 50px; border: 2px solid #fff; @include border-radius(50%, 50%, 50%, 50%); width: 50px; height: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; }
    &:hover {
      background: $skin-active-color;
      img { @include opacity(0.5); }
    }
  }
}

.selected-effect {
  display: block; position: relative; background: none; overflow: hidden; background: $skin-active-color;
  img { @include opacity(0.5); }
  &:after { position: absolute; color: #fff; background: none; content: "\e8ba"; font-family: "soap-icons"; font-size: 1.6667em; text-align: center; line-height: 50px; border: 2px solid #fff; @include border-radius(50%, 50%, 50%, 50%); width: 50px; height: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; }
}

.animated .hover-effect { z-index: 0; }

/* 2.2.9. Social icons */
.social-icons {
  li {
    float: left; text-align: center;
    a {
      width: 32px; margin-right: 4px; height: 32px; display: inline-block; background: #d9d9d9; color: #fff; line-height: 32px; font-size: 1.3333em; @include transition(opacity, 0.3s, ease-in);
      &:hover { background: $skin-active-color; }
    }
    &:last-child { margin-right: 0; }
  }
  &.icon-circle a { @include border-radius(50%, 50%, 50%, 50%); overflow: hidden; }
  &.style1 {
    a:hover { background: $skin-active-color; }
  }
  &.style2 {
    a { @include border-radius(50%, 50%, 50%, 50%); }
  }
  &.full-width {
    display: block;
    li { display: table-cell; float: none; width: 1%; margin: 0; text-align: center; }
  }

  // animation effect on hover
  li { overflow: hidden; }
  li:hover i { @include animation(toRightFromLeft, 0.3s, forwards, ""); display: block; }
}

/* 2.2.10. Five Stars */
.five-stars-container {
  display: inline-block; position: relative; font-family: 'Glyphicons Halflings'; font-size: 14px; text-align: left; cursor: default; white-space: nowrap; line-height: 1.2em; color: #dbdbdb;
  .five-stars, &.editable-rating .ui-slider-range {
    display: block; overflow: hidden; position: relative; background: #fff; padding-left: 1px;
    &:before { content: "\e006\e006\e006\e006\e006"; color: $yellow-theme-color; }
    &.transparent-bg { background: none; }
  }
  &:before { display: block; position: absolute; top: 0; left: 1px; content: "\e006\e006\e006\e006\e006"; z-index: 0; }
}

/* 2.2.11. Price section */
.price {
  color: #7db921; font-size: 1.6667em; text-transform: uppercase; float: right; text-align: right; line-height: 1; display: block;
  small { display: block; color: $primary-color; font-size: 0.5em; }
}

.price-wrapper {
  font-weight: normal; text-transform: uppercase; font-size: 0.8333em; color: inherit; line-height: 1.3333em; margin: 0;
  .price-per-unit { color: #7db921; font-size: 1.4em; padding-right: 5px; }
}

/* 2.2.12. Time section */
.time {
  text-transform: uppercase; font-size: 0.8333em; line-height: 19px;
  [class^="soap-icon"] { float: left; font-size: 18px; color: $skin-select-color; margin-right: 5px; }
}

.post-title {
  margin-bottom: 0;
}
.post-meta { font-size: 0.8333em; text-transform: uppercase; }
.sep { padding: 0 5px; }

/* 2.2.13. Badge */
.badge-container {
  position: relative; display: block;
  .badge-content {
    width: 42px; height: 42px; position: absolute; top: -10px; left: -10px; background: $red-theme-color; color: #fff; font-size: 0.8333em; text-align: center; line-height: 1.0833em; @include border-radius(50%, 50%, 50%, 50%); text-transform: uppercase; padding: 10px 0 0; margin: 0; font-weight: bold; z-index: 1;
    &.right-side { right: -10px; left: auto; }
  }
  img { margin: 0 !important; }
}

/* 2.3. Travelo Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.suggestions {
  &.image-carousel.style2 .slides > li {
    margin-right: 24px;
    > a { }
    img { width: 100%; height: auto; }
  }
  .caption { margin-top: 10px; text-align: center; margin-bottom: 0; }
}

.travelo-box {
  background: #fff; padding: 20px; margin-bottom: 30px;
  > *:last-child { margin-bottom: 0; }
  .title { margin-bottom: 5px; }
  .box-title { margin-bottom: 15px; }
  &.box-full { padding: 30px; }
  &.search-stories-box {
    .input-text {  }
    button { height: 34px; /*margin: 0 !important;*/ padding: 0 10px; font-size: 1em; }
  }
  
  &.twitter-box {
    .twitter-holder > ul {
      li {
        border-bottom: 1px solid #f5f5f5; padding: 15px 0 15px 40px; position: relative;
        &:last-child { border: none; }
        &:before { content: "\f099"; font-family: FontAwesome; display: block; width: 32px; height: 32px; @include border-radius(50%, 50%, 50%, 50%); border: 1px solid $skin-select-color; color: $skin-select-color; line-height: 32px; text-align: center; position: absolute; left: 0; font-size: 16px; }
        .tweet-text a {
          color: $skin-active-color;
          &:hover { text-decoration: underline; }
        }
      }
    }
  }
  
  &.contact-box {
    .contact-details {
      margin: 0;
      .contact-phone { 
        color: $skin-active-color;
        > i { color: $skin-select-color; }
      }
      .contact-email { color: inherit; }
    }
  }
  
  &.book-with-us-box, &.contact-us-box .contact-address {
    li {
      border-bottom: 1px solid #f5f5f5; padding: 10px 0 10px 40px; position: relative;
      > i { position: absolute; font-size: 1.5em; color: $skin-select-color; left: 0; top: 12px; }
      &:last-child { border-bottom-width: 0; padding-bottom: 0; }
      .title { color: $heading-color; }
      &:after { display: table; clear: both; content: ""; }
      > *:last-child { margin-bottom: 0; }
    }
  }

  &.contact-us-box {
    .title { color: $heading-color; }
    .contact-address {
      margin-bottom: 25px;
      li {
        padding-left: 50px;
        p { font-size: 0.8333em; text-transform: uppercase; margin-bottom: 0; }
        &:last-child { border-bottom-width: 1px; padding-bottom: 10px; }
      }
    }
    .social-icons a { overflow: hidden; }
    .social-icons a:hover i:before { @include animation(toBottomFromTop, 0.4s, forwards); }
  }
  
  &.newsletter-box {
    padding: 20px 30px;
    button { margin-right: 0 !important; margin-bottom: 0 !important; }
    .row > div { margin-bottom: 0 !important; }
  }
  
  &.re-search-box {
    label { font-size: 0.8333em; text-transform: uppercase; margin: 5px 0 0 0; }
    button { text-transform: uppercase; }
  }
  
  &.about-travelo-box {
    .title { color: $skin-active-color; }
  }
  
  &.guarantee-box {
    text-align: center;
    .guarantee-image { display: block; margin: 0 auto 15px; }
  }

  &.insurance-benefits {
    ul {
      font-size: 0.9167em;
      li {
        line-height: 3.6667em; border-bottom: 1px solid #f5f5f5; text-transform: uppercase;
        &:before { color: #d9d9d9; }
      }
      li.active:before, &.hover li:hover:before { color: $yellow-theme-color; }
    }
  }
}

.contact-details {
  font-style: normal;
  .contact-phone {
    color: $heading-color; font-size: 1.6667em;
    i { color: $skin-bg-color; }
  }
  .contact-email { color: $skin-active-color; font-size: 1.1667em; padding: 0 24px; line-height: 2em; }
}
/* 2.4. Skin Color ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.title { color: $heading-color; }

/* 2.5. Positioning ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.middle-block {
  position: relative; display: block; overflow: hidden;
  .middle-item { position: absolute; }
  img.middle-item { max-width: none; min-width: 100%; }
}

.column-2, .column-3, .column-4, .column-5, .column-5-no-margin, .constant-column-2, .constant-column-3, .constant-column-4, .constant-column-5 {
  > * { float: left; }
  &:after { clear: both; content: ""; display: table; }
}

.column-5-no-margin > *:nth-child(5n+1) { clear: both; }
.column-5-no-margin > * { width: 20%; }

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

/* 2.6. Unordered lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
ul.arrow, ul.triangle, ul.circle, ul.check, ul.chevron, ul.arrow-square, ul.check-square, ul.check-circle, ul.decimal, ul.upper-roman, ul.lower-latin, ul.upper-latin {
  line-height: 2em; font-size: /*1.0833em;*/1em;
  li.active, li.active:before, &.hover li:hover, &.hover li:hover:before { color: $skin-active-color; }
  &.hover li { cursor: default; }
}
ul.arrow, ul.triangle, ul.circle, ul.check, ul.chevron, ul.arrow-square, ul.check-square, ul.check-circle {
  list-style: none; padding: 0;
  li:before { font-family: "FontAwesome"; }
}
ul.arrow li:before { content: "\f178"; margin-right: 10px; color: $skin-active-color; }
ul.triangle {
  li:before { content: "\f04b"; margin-right: 10px; color: #d9d9d9; display: block; float: left; font-size: 7px; }
  li.active, li.active:before, &.hover li:hover, &.hover li:hover .box-title, &.hover li:hover:before { color: $skin-active-color; }
}

ul.circle {
  li:before { content: "\f111"; margin-right: 10px; color: $skin-active-color; display: block; float: left; font-size: 5px; }
  &.bullet-yellow li:before { color: $yellow-theme-color; }
  &.bullet-green li:before { color: $green-theme-color; }
  &.bullet-blue li:before { color: $blue-theme-color; }
}
ul.check li:before { content: "\e8ba"; margin-right: 10px; color: $green-theme-color; font-family: "soap-icons"; font-size: 1.3333em; line-height: 1em; }
ul.chevron li { padding-left: 30px !important; position: relative; }
ul.chevron li:before { position: absolute; left: 0; top: 50%; margin-top: -10px; line-height: 20px; content: "\f054"; color: $skin-active-color; display: block; width: 20px; height: 20px; text-align: center; font-size: 10px; border: 1px solid $skin-active-color; @include border-radius(50%, 50%, 50%, 50%); }
ul.arrow-square li:before { content: "\f178"; margin-right: 10px; color: #fff; background: $skin-active-color; padding: 0 2px 0 3px; }

ul.decimal {
  counter-reset: item;
  li:before { content: counters(item, ".")"-"; counter-increment: item; margin-right: 5px; }
}

ul.upper-roman { padding-left: 1.5em; list-style: upper-roman outside none; }
ul.lower-latin { padding-left: 1.25em; list-style: lower-latin outside none; }
ul.upper-latin { padding-left: 1.5em; list-style: upper-latin outside none; }

/* colored */
ul.upper-roman, ul.lower-latin, ul.upper-latin {
  &.bullet-colored li {
    color: $skin-active-color;
    > * { color: $primary-color; }
  }
}

ul.check-square li {
  &:before { font-family: 'soap-icons';  content: "\e8ba"; background: #d9d9d9; color: #fff; padding: 1px 4px 0; margin-right: 10px; font-size: 12px; }
  &.active {
    background: $skin-bg-color; color: #fff;
    > a { color: #fff; }
    &:before { background: #fff; color: $yellow-theme-color; }
  }
}
ul.check-circle li:before { content: "\e8ba"; display: inline-block; color: #fff; margin-right: 10px; font-family: "soap-icons"; background: $yellow-theme-color; vertical-align: baseline; @include border-radius(50%, 50%, 50%, 50%); width: 18px; height: 18px; text-align: center; line-height: 18px; }

/* 2.7. Ordered lists ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
ol {  }

/* 2.8. Toggle & Accordion ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.toggle-container {
  background: #fff;
  .panel {
    margin-bottom: 0; box-shadow: none; @include border-radius(0, 0, 0, 0); border: none; border-bottom: 2px solid #f5f5f5; position: relative;
    &:last-child { border: none; }
    .panel-title {
      padding: 0; color: $dark-blue-theme-color; font-size: 1.1667em; position: relative;
      a { white-space: normal; display: block; padding: 15px; }
    }
    h1.panel-title { font-size: 2em; }
    h2.panel-title { font-size: 1.6667em; }
    h3.panel-title { font-size: 1.5em; }
    h4.panel-title { font-size: 1.3333em; }
    h5.panel-title { font-size: 1.1667em; }
    h6.panel-title { font-size: 1em; }
    /*.panel-content { font-size: 1.0833em; }*/
    
    /* 2.8.1. Style1 */
    &.style1 {
      .panel-title > a {
        line-height: 24px;
        &:before { display: block; content: "\f068"; font-family: FontAwesome; margin-right: 16px; line-height: 24px; font-size: 10px; float: left; width: 24px; height: 24px; text-align: center; color: #9e9e9e; background: #f5f5f5; @include border-radius(50%, 50%, 50%, 50%); }
        &.collapsed:before { content: "\f067"; color: #fff; background: $skin-active-color; }
      }
      .panel-content { padding: 10px 15px 15px 55px; }
      &.arrow-right {
        .panel-title {
          position: relative;
          > a {
            padding-right: 36px;
            &:before { float: none; position: absolute; right: 0; height: 16px; line-height: 17px; width: 16px; font-size: 9px; border: none; margin-top: -8px; top: 50%; }
          }
        }
        .panel-content { padding: 10px 15px; }
      }
    }
    
    /* 2.8.2. Style2 */
   &.style2 {
     .panel-title {
       padding: 0;
       > a {
         display: block; line-height: normal; padding: 15px 20px; color: $skin-active-color;
         &.collapsed { color: inherit; position: relative; &:hover { color: $skin-active-color; } }
         &:after { content: "\f068"; font-family: FontAwesome; font-size: 10px; width: 30px; height: 30px; display: block; position: absolute; right: 15px; bottom: 0; color: #9e9e9e; background: #f5f5f5; text-align: center; line-height: 30px; }
         &.collapsed:after { content: "\f067"; color: #fff; background: $skin-active-color; }
       }
     }
     .panel-content { padding: 0 15px 30px 20px; }
   }
  }
  
  /* 2.8.3. Accordion with image */
  &.with-image {
   > .image-container {
     background: $skin-bg-color;
     > img { width: 100%; height: auto; }
   }
   .panel > img { display: none; }
   .panel-title > a {
      color: #01b7f2;
      &.collapsed { color: inherit; &:hover { color: #01b7f2; } }
    }
  }
}

/* 2.9. Tabs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.tab-wrapper {
  background: #fff;
  .tab-container .tab-content .tab-pane { padding-left: 0; padding-right: 0; }
}
.tab-pane {
  [class^="col-"], [class*=" col-"] { padding-left: 10px; padding-right: 10px; }
  .row { margin-top: 0; margin-left: -10px; margin-right: -10px; }
}
.tab-container {
  ul.tabs {
    margin: 0; padding: 0;
    li {
      float: left; padding-right: 4px;
      &:last-child { padding-right: 0; }
      a { color: #fff; display: block; padding: 0 20px; background: #d9d9d9; font-size: 1em; font-weight: bold; height: 40px; line-height: 40px; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
      a:hover { }
      &.active > a, &:hover > a { color: $skin-active-color; background: #fff; }
    }
    &.full-width {
      display: block; /*margin-bottom: -4px;*/
      li {
        float: none; display: table-cell; vertical-align: middle; width: 1%;
        a { padding: 0; text-align: center; }
      }
    }
    
    &:after { display: table; content: ""; clear: both; }
  }
  .tab-content {
    background: #fff;
    .tab-pane {
      padding: 20px; line-height: 1.7em;
      .row {
        margin-bottom: 15px; /*border-top: 1px solid #f5f5f5; padding: 20px 0;
        &:first-child { border: none; padding-top: 0; }
        &:last-child { padding-bottom: 0; }*/
      }
      > img { margin: 0 15px 0 0; }
      &:after { content: ""; display: table; clear: both; }
      .image-box .details { padding-right: 0; }
    }
  }
  
  
  /* 2.9.1. Style 1 */
  &.style1 {
    ul.tabs {
      display: block; background: #fff; padding: 10px 0 10px 10px; border-bottom: 1px solid #f5f5f5;
      li {
        padding-right: 10px;
        a { height: 30px; line-height: 30px; background: #f5f5f5; padding: 0 18px; color: #9e9e9e; font-weight: normal; font-size: 0.9167em; font-weight: bold; }
        &.active > a, &:hover > a {
          color: #fff; background: $skin-active-color; position: relative;
          &:after { position: absolute; bottom: -5px; left: 50%; margin-left: -10px; border-top: 5px solid $skin-active-color; border-left: 7px solid transparent; border-right: 7px solid transparent; content: ""; }
        }
        &:hover > a:after { display: none; }
        &.active:hover > a:after { display: block; }
      }
      &.full-width li a { padding: 0; }
    }
  }
  /* 2.9.2. Transparent Tab */
  &.trans-style {
    position: relative; z-index: 1; margin-top: -40px;
    ul.tabs {
      padding: 0 10px;
      li {
        a {
          @include opacity(0.55); background: #fff; color: #000; overflow: hidden;
          i {
            font-size: 16px; vertical-align: middle; margin-right: 10px;
            &[class^="soap-icon"] { font-size: 20px; }
          }
        }
        a:hover {
          @include opacity(0.8); color: $skin-active-color;
          i { @include animation(toTopFromBottom, 0.3s, forwards); }
        }
        &.active a { @include opacity(1); color: $skin-active-color; }
        a:hover i, &.active a i { color: $skin-select-color; }
      }
    }
  }
  /* 2.9.3. Full Width Tab */
  &.full-width-style {
    ul.tabs {
      width: 14%; float: left;
      &:after { display: none; clear: none; }
      li {
        float: none; margin: 0; padding-right: 0;
        a {
          height: 100px; display: block; border-bottom: 3px solid #f5f5f5; border-right: 3px solid #f5f5f5; background: #fff; color: inherit; font-size: 1.1667em; text-transform: none; font-weight: normal; text-align: center; padding-top: 20px; line-height: 2em;
          > i { color: #d9d9d9; display: block; font-size: 18px; margin: 0 auto; width: 1.6em; height: 1.6em; line-height: 1.5em; overflow: hidden; }
          &:hover i:before { @include animation(toTopFromBottom, 0.3s, forwards); }
        }
        &.active a, a:hover { color: $heading-color; }
        a:hover i, &.active a i { color: #fdb714; border-color: #fdb714; }
        &:last-child.active a { border-bottom: none; }
        &.active a {
          border-right-color: transparent;
        }
      }
    }
    &.arrow-left {
      ul.tabs {
        li {
          margin-bottom: 4px;
          a { border: none; margin-right: 4px; }
          &.active a {
            margin-right: 0; border-left: 2px solid $yellow-theme-color; position: relative;
            &:after { display: block; content: ""; position: absolute; left: 0; top: 50%; margin-top: -5px; border-left: 3px solid $yellow-theme-color; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
          }
        }
      }
      .tab-content .tab-pane { padding: 30px; }
    }
    .tab-content {
      float: left; width: 86%;
      .tab-content-title { color: $skin-active-color; }
    }
    &:after { display: table; content: ""; clear: both; }
  }
}

/* 2.10. Promo box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.promo-box {
  margin: 0 0 30px 0; overflow: hidden;
  .table-wrapper { width: 100%; margin: 0; }
  .table-cell { vertical-align: middle; }
  .m-title {
   font-size: 2em; color: #fff; line-height: 1.5em; margin: 0;
    em {
      font-size: 1.28em; font-weight: bold; font-style: normal;
      i { font-weight: normal; }
    }
  }
  .action-section {
    padding: 20px 0 0; text-align: right;
    form .row > div { margin-bottom: 10px; }
    button { text-transform: uppercase; }
  }
  .image-container {
    padding: 0; float: none; position: relative; text-align: center;
    img { position: absolute; left: 0; visibility: hidden; height: auto; }
  }
  .table-wrapper { height: 100%; }
  .table-cell { vertical-align: middle; }
  .content-section { padding: 40px 0; z-index: 1; position: relative; }
}

/* 2.11. Photo Gallery ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.flexslider .slides li { display: none; }

.photo-gallery, .image-carousel.style2 {
  .flex-direction-nav {
    position: absolute; right: 0; top: -40px; width: 72px; height: 22px;
    li a {
      width: 30px; height: 22px; background: $skin-active-color; color: #fff; text-indent: -9999px; text-align: left; position: static; float: left; margin: 0; @include opacity(1, true); @include transition(none);
      &:before { position: absolute; display: block; font-family: FontAwesome; text-indent: 0; font-size: 12px; line-height: 22px; }
      &.flex-prev {
        margin-right: 10px;
        &:before { content: "\f177"; left: 8px; }
      }
      &.flex-next:before { content: "\f178"; right: 9px; }
      &.flex-disabled { background: #d9d9d9; }
    }
  }
}

.travelo-box > .image-carousel.style2 .flex-direction-nav { top: -60px; }

.photo-gallery {
  background: #fff; box-shadow: none; border: none; margin: 0; @include border-radius(0, 0, 0, 0);
  img { width: 100%; }
  .slides > li { display: none; overflow: hidden; position: relative; }
  .flex-control-nav {
    width: auto;  position: absolute; right: 30px; bottom: 30px;
    > li {
      float: left; margin-left: 5px; margin-right: 0;
      a {
        background: none; display: block; width: 14px; height: 14px; @include border-radius(50%, 50%, 50%, 50%); border: 1px solid #fff; text-indent: -9999px; cursor: pointer; background: rgba(255, 255, 255, 0); box-shadow: none;
        &.flex-active { background: $skin-select-color; border-color: $skin-select-color; }
      }
    }
  }
  &.style1 { // no direction nav and no control nav (gallery with carousel)
    .flex-control-nav { display: none; }
    .flex-direction-nav { display: none; }
  }
  &.style2 { // show direction nav and control nav, and display control nav bottom of the image (photo gallery full view)
  }
  &.style3 { // show only direction nav (blog post slideshow)
    .flex-control-nav { display: none; }
    .flex-direction-nav { right: 10px; bottom: 10px; top: auto; }
  }
  &.style4 { // show only control nav (blog post slideshow)
    .flex-control-nav { right: 25px; bottom: 25px; top: auto; }
    .flex-direction-nav { display: none; }
  }
}

.image-carousel {
  position: relative; box-shadow: none; border: none; @include border-radius(0, 0, 0, 0); background: none;
  .slides > li { display: none; }
  img { max-width: 100%; }
  &.style1 {
    padding: 10px 45px; background: #fff;
    .slides > li {
      margin-right: 10px; height: 70px; cursor: pointer; overflow: hidden;
      &:last-child { margin-right: 0; }
      img { height: 100%; width: auto; max-width: none; @include opacity(0.5); @include transition(opacity, 0.3s, ease-in); }
      &.flex-active-slide img, &:hover img { @include opacity(1); }
    }
    .flex-control-nav { display: none; }
    .flex-direction-nav {
      position: static; width: 0; height: 0;
      li a {
        background: rgba(red($skin-active-color), green($skin-active-color), blue($skin-active-color), 0.7); float: none; width: 25px; height: auto; position: absolute; top: 10px; bottom: 10px; margin: 0; @include opacity(1, true); text-indent: -9999px; text-align: left; color: #fff; @include transition(background, 0.2s, ease-in);
        &:hover { background: $skin-active-color; }
        &:before { display: block; position: absolute; left: 9px; top: 50%; margin-top: -6px; text-indent: 0; font-family: FontAwesome; font-size: 12px; line-height: 1; text-shadow: none; }
        &.flex-prev {
          left: 10px;
          &:before { content: "\f053"; }
        }
        &.flex-next {
          right: 10px;
          &:before { content: "\f054"; }
        }
        &.flex-disabled { background: #f5f5f5; color: #9e9e9e; }
      }
    }
  }
  
  &.style2 {
    .slides > li {
      margin-right: 30px;
      &:last-child { margin-right: 0; }
      .hover-effect {
        z-index: 0;
        img { position: relative; }
        .caption { @include opacity(0); position: absolute; bottom: 0; left: 0; height: 33px; line-height: 33px; overflow: hidden; padding: 0; text-align: center; right: 0; z-index: 3; margin: 0; background: $dark-blue-theme-color; color: #fff; font-size: 1.1667em; @include transform(translate3d(0, 100%, 0)); @include transition(transform, 0.35s); }
        &:hover .caption { @include opacity(1); display: block; @include transform(translate3d(0, 0, 0)); }
        &:hover:after { /*margin-top: -20px;*/ }
      }
    }
    .flex-control-nav { display: none; }
    &.row-2 {
      li > a:first-child { margin-bottom: 30px; }
    }
  }

  &.style3 {
    margin-bottom: 30px;
    .slides {
      margin-bottom: 0;
      > li {
        margin-right: 30px;
        &:last-child { margin-right: 0; }
        .box { margin-bottom: 0; }
      }
    }
    .flex-control-nav { display: none; }
    .flex-direction-nav {
      position: static; width: 0; height: 0;
      li a {
        width: 40px; height: 40px; border: 2px solid; @include border-radius(50%, 50%, 50%, 50%); position: absolute; top: 50%; margin-top: -20px; background: none; color: #d9d9d9; @include opacity(1); text-shadow: none; text-align: left !important; text-indent: -9999px;
        &:before { position: absolute; display: block; top: 0; left: 0; right: 0; text-align: center; line-height: 36px; font-family: "soap-icons"; text-indent: 0; font-size: 24px; }
        &.flex-prev {
          left: -80px;
          &:before { content: "\e87b"; }
        }
        &.flex-next {
          right: -80px;
          &:before { content: "\e887"; }
        }
        &:hover { color: #fff; }
        &.flex-disabled { color: $primary-color; }
      }
    }
  }
}

/* 2.12. Image Style ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.image-style {
  padding: 0; position: relative; background: #fff; padding: 30px 0 30px 30px;
  &.large-font { font-size: 1.2307em }
  &.style1 {
    margin-right: 60px;
    .image-block { margin-right: 25px; }
    .title { font-size: 1.875em; margin-bottom: 30px; }
    ul li {
      margin: 0 10px 10px 0; width: 80px; height: 80px;
      a {
        overflow: hidden; display: block;
        img { max-width: none; height: 100%; }
      }
    }
    &:before { display: block; content: ""; width: 60px; background-color: #fff; position: absolute; right: -60px; bottom: 60px; top: 0; }
    &:after { display: block; content: ""; position: absolute; right: -60px; bottom: 0; border-top: 60px solid #d9d9d9; border-right: 60px solid transparent; }
  }
  
  &.style2 {
    p { line-height: 1.5em; }
    .title { font-size: 1.25em; color: $skin-active-color; margin-top: 20px; }
    .image-block {
      padding-left: 50px; position: relative; min-height: 200px;
      li {
        position: absolute; @include border-radius(50%, 50%, 50%, 50%); padding: 5px; background: #fff; border: 1px solid #bfbfbf;
        a {
          display: block; @include border-radius(50%, 50%, 50%, 50%); overflow: hidden; -webkit-transform: translateZ(0); -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
          img { height: 100%; max-width: none; }
        }
      }
    }
  }
}

/* 2.13. Image Box Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.image-box {
  .box, &.box {
    text-align: left; background: #fff; margin-bottom: 30px;
    img { width: 100%; height: auto; }
    > .details {
      padding: 12px 15px;
      > *:last-child { margin-bottom: 0; }
    }
    .box-title { margin-bottom: 10px; color: $heading-color; }
  }
  &.style1, &.style10 {
    .box-title { margin-bottom: 0; }
  }
  &.style7, &.style8, &.style12 {
    .opacity-wrapper { display: block; position: absolute; left: 0; top: 0; background: $yellow-theme-color; @include opacity(0.6); width: 100%; height: 100%; }
  }
  
  &.style2 {
    figure { float: left; width: 250px; }
    .details {
      padding: 20px 20px 10px 270px;
      p { margin-bottom: 20px; }
    }
    .box, &.box { &:after { content: ""; display: table; clear: both; } }
  }
  
  &.style3 {
    .details {
      padding: 15px;
      .box-title { margin-bottom: 0; }
      .offers-content { font-size: 0.8333em; text-transform: uppercase; margin-bottom: 0; }
      .description { border-top: 1px solid #f5f5f5; padding-top: 10px; }
    }
  }
  
  &.style4 {
    .details {
      .box-title { float: left; margin: 0; }
      .goto-detail { float: right; color: $green-theme-color; font-weight: bold; font-size: 16px; }
      &:after { content: ""; display: table; clear: both; }
    }
  }
  
  &.style5, &.style11 {
    .box, &.box { position: relative; }
    figure {
      position: relative; overflow: hidden; cursor: pointer; z-index: 0;
      figcaption {
        position: absolute; z-index: 3; left: 0; top: 10px; padding: 5px 20px 5px 20px; min-width: 130px; background: $dark-blue-theme-color;
        @include transition(transform, 0.35s); @include transform(translate3d(-100%, 0, 0));
        .caption-title { margin: 0; color: #fff; line-height: 1.1em; }
        span { color: $yellow-theme-color; text-transform: uppercase; font-size: 0.8333em; letter-spacing: 0.04em; }
      }
      &:hover {
        figcaption { @include transform(translate3d(0, 0, 0)); }
        a:before { @include opacity(1); }
      }
      img { -webkit-backface-visibility: hidden; }
      a { display: block; }
      a:before { position: absolute; z-index: 2; display: block; content: ""; top: 0; left: 0; width: 100%; right: 0; bottom: 0; height: 100%; background: rgba(red($skin-bg-color), green($skin-bg-color), blue($skin-bg-color), 0.3); @include opacity(0); @include transition(all, 0.4s, ease-out); }
    }
    .details {
      padding: 0;
      .detail {
        margin: 0; border-top: 1px solid #f5f5f5; padding: 10px 20px;
        &:first-child { border: none; }
        .box-title { line-height: 40px; margin: 0; }
        &:after { display: table; content: ""; clear: both; }
      }
    }
  }
  
  &.style6, &.style14 {
    figure { padding: 0; }
    .details { margin-bottom: 0 !important; padding: 20px 30px; line-height: 1.7em; }
    .box, &.box { &:after { display: table; content: ""; clear: both; } }
  }
  
  &.style7 {
    .box, &.box {
      background: #fff; margin-bottom: 30px; 
      figure { height: 72px; }
      .details {
        padding: 20px 20px 25px; font-size: 1.0833em;
        p { margin: 0; }
      }
    }
  }
  
  &.style8 {
    .box { background: none; }
    figure {
      width: 25%; float: left; position: relative; overflow: hidden;
      img { height: 100%; width: auto; max-width: none; }
    }
    .details { width: 75%; float: left; padding: 20px; background: #fff; }
    .box, &.box { &:after { display: table; content: ""; clear: both; } }
  }
  
  &.style9 {
    figure {
      a { position: relative; /*height: 160px; overflow: hidden;*/ display: block; width: 100%; }
      img { width: 100%; height: auto; }
    }
    .box-title { margin: 0; }
    .button { margin-top: 20px; }
    .details { background: #fff; padding: 15px; text-align: center; }
    .description { margin-top: 20px; }
  }
  
  &.style10 {
    .details a.button { margin-top: 5px; float: right; }
  }
  
  &.style11 {
    .box > .details { padding: 15px; }
  }

  &.style12 {
    .box, &.box { display: table; }
    figure, .details, .action { display: table-cell; vertical-align: top; }
    figure {
      margin-right: 30px; max-width: 30%;
      a { position: relative; display: inline-block; height: 100%; }
      img { width: auto; max-width: 150px; }
    }
    .details {
      border-right: 1px solid #f5f5f5; padding: 12px 20px 10px 25px; width: 100%;
      > *:last-child { margin-bottom: 0; }
    }
    .action {
      padding: 15px;
      .price { text-align: center; float: none; margin: 0 0 10px 0; }
      button, a.button { padding: 0 10px; }
    }
    .image-wrapper { position: relative; overflow: hidden; display: block; }
  }

  &.style13 {
    figure { float: left; margin-right: 15px; }
    .details { padding: 0 15px; }
    .action {
      float: right;
      .button { padding: 0 10px; }
    }
    .price { float: none; }
    .box, &.box {
      margin-bottom: 0;
      &:after { display: table; content: ""; clear: both; }
    }
  }

  &.style14 {
    figure { float: left; width: 63px; }
    .details { margin-left: 63px; padding: 15px 15px 0; }
    .price { float: none; text-align: left; display: inline; font-size: 1.4em; }
    .box-title {
      margin-bottom: 0;
      small { line-height: 1em; }
    }
  }

  &.style7, &.style8, &.style12 {
    .opacity-wrapper { cursor: pointer; @include transition(opacity, 0.3s, ease-out); }
    figure {
      overflow: hidden; z-index: 0;
      img { @include transition(transform, 0.35s); @include transform(scale(1, 1)); /*-webkit-backface-visibility: hidden;*/ }
    }
    figure:hover {
      img { @include transform(scale(1.07, 1.07)); }
      .opacity-wrapper { @include opacity(0); }
    }
  }
}
.sidebar .image-box.style14 {
  margin-bottom: 0;
  .box {
    padding-bottom: 15px; border-bottom: 1px solid #f5f5f5; margin-bottom: 15px;
    &:last-child { border: none; margin-bottom: 0; padding-bottom: 0; }
  }
}

/* 2.14. Icon Box ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* Icon Box */
.icon-box {
  text-transform: uppercase;
  > i { text-align: center; }
  &.style1 {
    height: 42px; background: #fff; line-height: 42px; font-size: 0.9167em;
    > i { display: block; width: 42px; float: left; background: $yellow-theme-color; line-height: 42px; color: #fff; font-size: 2em; margin-right: 15px; }
  }
  &.style2 {
    line-height: 1.75em; color: $blue-theme-color; font-size: 0.9167em; display: inline-block;
    > i { font-size: 1.5em; margin-right: 10px; color: $blue-theme-color; }
  }
  &.style3 {
    background: #fff; text-align: center; margin-bottom: 10px;
    .numbers { font-size: 5em; color: $heading-color; padding: 20px 0; font-weight: 300; 
    i { margin-right: 10px; } }
    .description { border-top: 1px solid #f5f5f5; font-weight: bold; padding: 6px 0; }
  }
  &.style4, &.style8, &.style9 {
    text-align: center; text-transform: none;
    > i { font-size: 5em; color: $green-theme-color; }
    .box-title { margin-top: 10px; margin-bottom: 10px; }
  }
  &.style5 {
    height: 70px; background: #fff; line-height: 70px; text-transform: none;
    > i { display: block; width: 70px; float: left; background: $blue-theme-color; line-height: 70px; color: #fff; font-size: 3em; margin-right: 15px; }
    .description { line-height: 1.6em; small { text-transform: uppercase; } padding: 14px 15px 0 0; }
  }
  &.style6, &.style7 {
    line-height: 50px; text-transform: none;
    > i { display: block; width: 50px; float: left; background: $yellow-theme-color; line-height: 50px; color: #fff; font-size: 2.5em; }
    .box-title { margin-bottom: 5px; }
    .description { line-height: 1.6em; padding-left: 70px; }
    &:after { display: table; content: ""; clear: both; }
  }
  &.style6 {
    .box-title { letter-spacing: normal; margin-bottom: 10px; }
  }
  &.style7 {
    padding: 30px; background: #fff;
    > i {
      @include border-radius(50%, 50%, 50%, 50%); width: 60px; height: 60px; line-height: 60px; background: $blue-theme-color;
      &.glyphicon { font-size: 1.6667em; }
    }
    .description {
      padding-left: 80px;
      .box-title { margin-bottom: 20px; line-height: 1.3333em; }
      ul { margin-bottom: 20px; }
      .view { text-decoration: underline; color: $green-theme-color; font-size: 1.0833em; }
    }
  }
  &.style8, &.style9 {
    i { font-size: 2.6666em; background: $yellow-theme-color; color: #fff; width: 1.5em; height: 1.5em; line-height: 1.5em; display: block; margin-left: auto; margin-right: auto; }
  }
  &.style9 {
    display: inline-block;
    .box-title { line-height: 1.2em; }
    > i { background: $blue-theme-color; @include border-radius(50%, 50%, 50%, 50%); width: 2em; height: 2em; line-height: 2em; margin-bottom: 15px; }
  }
  &.style10 {
    border: 1px solid $yellow-theme-color; margin-top: 20px; padding: 45px 20px 20px; position: relative; color: $light-blue-theme-color; text-align: center;
    .box-title { color: #fff; margin-bottom: 15px; }
    > i { position: absolute; width: 72px; height: 72px; top: -36px; left: 50%; margin-left: -36px; font-size: 3em; color: #fff; background: $yellow-theme-color; line-height: 72px; @include border-radius(50%, 50%, 50%, 50%); }
    .description { text-transform: none; }
  }
  &.style11, &.style12 {
    display: table;
    > .icon-wrapper {
      display: table-cell; vertical-align: middle; text-align: center; font-size: 18px;
      > i { color: $yellow-theme-color; }
    }
    > .details {
      display: table-cell; vertical-align: middle;
    }
  }
  &.style11 {
    > .icon-wrapper { width: 1.4em; text-align: left; }
    .details {
      text-transform: uppercase;
      dl, dt, dd { font-size: 0.8333em; }
      .box-title { margin-bottom: 0; text-transform: none; margin-left: 15px; }
    }
  }
  &.style12 {
    > .icon-wrapper {
      width: auto;
      > i { border-color: $skin-active-color; background: $skin-active-color; color: #fff; font-size: 1.5em; }
    }
    > .details {
      padding-left: 10px; margin: 0; text-transform: none;
      .m-title { margin: 0; }
    }
  }
}

/* 2.15. Listing Styles ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.listing-style1 {
  &.hotel, &.cruise {
    .box-title:after { display: table; content: ""; clear: both; }
    .feedback {
      margin: 5px 0; border-top: 1px solid #f5f5f5; padding-top: 5px; border-bottom: 1px solid #f5f5f5;
      .review { display: block; float: right; text-transform: uppercase; font-size: 0.8333em; color: #9e9e9e; }
    }
    .five-stars-container { color: #dbdbdb; }
    .action {
      .button:last-child { float: right; }
      .button { width: 45%; padding: 0; text-align: center; }
      .button + .button { width: 50%; }
    }
  }
  &.flight, &.car {
    .details {
      .box-title { text-transform: none; &:after { display: table; content: ""; clear: both; } }
      padding: 15px 0 0 !important; text-transform: uppercase;
    }
    .action .button { text-align: center; }
  }
  &.flight {
    figure img { max-width: 100%; }
    .details {
      .time {
        margin: 10px 0; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; letter-spacing: 0.04em;
        &:after { display: table; content: ""; clear: both; }
        > div {
          width: 50%; float: left; padding: 7px 0;
          > .icon { font-size: 16px; float: left; }
          > .icon + div { padding-left: 24px; }
          &:first-child { border-right: 1px solid #f5f5f5; }
          & + div { padding-left: 20px; }
        }
      }
      .duration { font-size: 0.8333em; text-align: center; letter-spacing: 0.04em; }
    }  
  }
  &.car {
    figure img { max-width: 100%; }
    .details {
      .mile { font-size: 0.8333em; text-align: center; }
      .amenities { text-align: center; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; margin: 10px 0; padding: 10px 0 6px; }
    }
  }
  &.cruise {
    .time {
      padding-top: 5px;
      [class^="soap-icon"] { float: left; font-size: 20px; }
      > div {
        margin-bottom: 10px !important;
        &:first-child { border-right: 1px solid #f5f5f5; }
        > div { padding-left: 20px; }
      }
    }
    .action a.button { float: none !important; }
    .description { text-align: center; font-size: 0.8333em; text-transform: uppercase; }
  }
}
.listing-style1, .listing-style2 {
  &.flight, &.car {
    .box, &.box { padding: 15px; }
    figure {
      background: #f5f5f5; display: table; /*height: 140px;*/ width: 100%; table-layout: fixed;
      > a, > span { display: table-cell; vertical-align: middle; text-align: center; }
      img { width: auto; }
    }
  }
}
.listing-style1, .listing-style3 {
  &.flight {
    .icon { font-size: 16px; }
    .take-off > .icon { @include transform(rotate(-25deg)); display: inline-block; }
    .landing > .icon { @include transform(rotate(25deg)); display: inline-block; }
  }
  &.car {
    .amenities  ul { 
      display: inline-block; color: #9e9e9e;
      li {
        float: left; text-align: center; padding: 0 5px; cursor: default; font-size: 0.8333em;
        .glyphicon, [class^="soap-icon"] { display: block; font-size: 16px; color: #d9d9d9; overflow: hidden; }
        .glyphicon { line-height: 25px; &:before { font-size: 12px; } }
        &:hover, &:hover .glyphicon, &:hover [class^="soap-icon"] { color: $skin-active-color; }
        &:hover [class^="soap-icon"]:before { @include animation(toTopFromBottom, 0.35s, forwards); }
      }
      &:after { display: table; content: ""; clear: both; }
    }
  }
}

.listing-style2 {
  .box .box-title { margin-bottom: 0; }
  a.button { margin-top: 6px; }
  &.flight { 
    .details { padding: 12px 2px 0; }
    img { width: auto; max-width: 100%; }
  }
}

.listing-style3 {
  .box, &.box {
    background: #fff;  margin-bottom: 30px;
    > * { padding: 0; }
    &:after { display: table; clear: both; content: ""; }
  }
  .review { display: block; text-transform: uppercase; font-size: 0.8333em; color: #9e9e9e; }
  .five-stars-container, .review { line-height: 1em; }
  .five-stars-container { color: #dbdbdb; }
  [class^="soap-icon"].circle {
    color: #d9d9d9; cursor: default; font-size: 16px; overflow: hidden;
    &:hover {
      color: $skin-active-color;
      &:before { @include animation(toTopFromBottom, 0.35s, forwards); }
    }
  }
  .price { float: none; text-align: center; }
  &.hotel {
    figure img { width: 100%; height: auto; }
    .box-title {
      margin: 0; float: left;
      i { font-size: 15px; }
    }
    .amenities { float: right; }
    .details {
      padding: 15px 0 15px 20px; display: table;
      [class^="soap-icon"].circle { margin-right: 5px; margin-top: 5px; }
      > * {
        display: table-row;
        > * {
          display: table-cell; padding: 10px 15px 0; text-align: center; vertical-align: middle;
          &:first-child { border-right: 1px solid #f5f5f5; padding-left: 0; padding-right: 15px; text-align: left; }
          &:last-child { width: 120px; }
        }
        &:first-child > * { border-bottom: 1px solid #f5f5f5; padding-top: 0; padding-bottom: 10px; }
      }
      .button { margin-top: 8px; }
    }
  }
  &.flight {
    .box, &.box { padding: 15px; display: table; width: 100%; table-layout: fixed; }
    figure {
      display: table-cell; background: #f5f5f5; vertical-align: middle; float: none; 
      span { 
        text-align: center; display: block;
        img { max-width: 60px; height: auto; }
      }
    }
    .box-title { float: left; }
    .stop:hover { background: $yellow-theme-color; }
    .amenities { margin-bottom: 10px; float: right; }
    .details {
      display: table-cell; padding-left: 15px; float: none;
      .details-wrapper {
        display: table; width: 100%;
        > * {
          display: table-row;
          > * {
            display: table-cell; padding: 15px 15px 0 15px;
            &:first-child { border-right: 1px solid #f5f5f5; padding-left: 0; }
            &:last-child { text-align: center; padding-right: 0; }
          }
          &:first-child > * { border-bottom: 1px solid #f5f5f5; padding-top: 0; }
        }
        .box-title { margin: 0 10px 15px 0; }
        [class^="soap-icon"].circle { margin-right: 5px; }
        [class^="col-"], [class*=" col-"] { padding: 0; }
        .time > div  {
          border-right: 1px solid #f5f5f5; padding-left: 15px;
          &:last-child { border-right: none; }
          &:first-child { padding-left: 0; }
          > div { padding-left: 25px; }
        }
        .time .icon { float: left; padding: 0; font-size: 16px; }
        .time { letter-spacing: 0.04em; }
        .action { vertical-align: top; }
      }
    }
  }
  &.car {
    .box, &.box { display: table; padding-top: 15px; padding-bottom: 15px; width: 100%; table-layout: fixed; }
    figure {
      display: table-cell; vertical-align: middle; float: none; text-align: center; border-right: 1px solid #f5f5f5;
      img { max-width: 80%; height: auto; }
    }
    .details {
      display: table-cell; float: none;
      .box-title { float: left; }
      .logo {
        margin: 3px 0 0 8px; float: left; border-left: 1px solid #e1e1e1; padding-left: 8px;
        img { max-height: 20px; width: auto; }
      }
      .amenities { margin-top: 20px; }
      .character {
        text-align: right; text-transform: uppercase; font-size: 0.8333em; border-right: 1px solid #f5f5f5;
        dd { margin-bottom: 5px; }
        dl { margin-bottom: 0; }
      }
      .action {
        text-align: center; text-transform: uppercase;
        .button { margin-top: 30px; }
      }
    }
  }
  &.cruise {
    figure {
      img { width: 100%; height: auto; }
    }
    .details {
      padding: 15px 20px; text-transform: uppercase;
      img { max-width: 100%; height: auto; }
      .box-title { text-transform: none; margin-bottom: 10px; }
      .character {
        font-size: 0.8333em; border-top: 1px solid #f5f5f5; border-bottom: 1px solid #f5f5f5; margin-bottom: 15px; display: table; width: 100%; table-layout: fixed;
        > div { display: table-cell; float: none; vertical-align: middle; margin: 0; padding-top: 12px; padding-bottom: 12px; border-left: 1px solid #f5f5f5; &:first-child { border: none; padding-left: 0; } &:last-child { padding-right: 0; } }
        [class^="soap-icon"] { font-size: 18px; float: left; }
        .cruise-logo {
          padding: 0; text-align: left;
          img { max-width: 90%; width: auto; height: auto; }
        }
        .date, .departure { > div { padding-left: 20px; line-height: 1.1667em; } }
      }
      .review {
        line-height: 1.6667em;
        .five-stars-container { float: left; margin-right: 10px; } 
        span { display: block; float: left; }
      }
    }
  }
}

.tab-container .tab-pane > .listing-style3  .details { padding-right: 0; }

/* 2.16. Pricing Tables ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.pricing-table {
  padding: 20px; background: #fff;
  .header {
    border-bottom: 1px solid #f5f5f5;
    > i { float: left; font-size: 16px; margin: 3px 8px 0 0; }
    .box-title {
      float: left; line-height: 1.3333em; margin-bottom: 20px;
      small { text-transform: uppercase; display: block; font-size: 0.6em; }
    }
  }
  .description { margin: 15px 0; }
  .features {
    margin-bottom: 15px; text-transform: uppercase;
    li { margin-top: 1px; background: #f5f5f5; font-size: 0.9167em; padding-left: 20px; line-height: 40px; }
  }
  
  /* colored */
  &.green, &.blue, &.yellow, &.red {
    color: #fff;
    .box-title, .box-title small, .price, .price small { color: #fff; }
    .box-title small, .price small, .description { @include opacity(0.6); }
  }
  &.green {
    background: $green-theme-color;
    .header { border-bottom-color: #91c63d; }
    .features li {
      background: #91c63d;
      &:before { background: $green-theme-color; }
    }
  }
  &.yellow {
    background: $yellow-theme-color;
    .header { border-bottom-color: #f5b010; }
    .features li {
      background: #f5b010;
      &:before { background: $yellow-theme-color; }
    }
  }
  &.blue {
    background: $blue-theme-color;
    .header { border-bottom-color: #04afe7; }
    .features li {
      background: #04afe7;
      &:before { background: $blue-theme-color; }
    }
  }
  &.red {
    background: $red-theme-color;
    .header { border-bottom-color: #d51a32; }
    .features li {
      background: #d51a32;
      &:before { background: $red-theme-color; }
    }
  }
}

/* 2.17. Post ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.border-box { border: 15px solid #f5f5f5; }
.post {
  position: relative;
  figure img { width: 100%; height: auto; }
  .entry-date {
    background: $dark-blue-theme-color; padding: 7px 15px; color: #fff; text-align: center; text-transform: uppercase; position: absolute; left: 0; top: 10px;
    .date { margin: 0; font-size: 1.6667em; display: block; font-weight: normal; }
    .month { margin: 0; font-size: 0.8333em; font-weight: normal; }
  }
}
.fluid-width-video-wrapper { padding: 0; position: relative; width: 100%; }
.blog-infinite, .single {
  .post { 
    margin-bottom: 50px;
    .video-container {
      position: relative; width: 100%;
      video { max-width: 100%; height: auto; }
      iframe, embed, object { max-width: 100%; }
    }
    .entry-title { margin-bottom: 25px; }
    .excerpt-container { p { line-height: 1.8333em; } margin-bottom: 20px; }
    .details { background: #fff; padding: 20px 20px 10px; }

    &.without-featured-item {
      .entry-title, .excerpt-container { padding-left: 50px; }
    }
  }
  .post-content {
    margin-bottom: 30px;
    > p { line-height: 1.6666em; }
    .border-box { 
      margin: 30px 0;
      blockquote { margin-bottom: 0; }
    }
  }
  .post-meta {
    background: #f5f5f5; padding: 10px 10px 0; font-size: 1em;
    .entry-author {
      float: left; line-height: 28px; font-size: 0.83333em; margin-bottom: 10px;
      .icon { float: left; width: 28px; height: 28px; background: #fff; display: inline-block; font-size: 1.6666em; line-height: 28px; text-align: center; color: #d9d9d9; margin-right: 10px; }
      a.author { color: $skin-active-color; }
    }
    .entry-action {
      float: right;
      > * {
        height: 28px; line-height: 28px; display: inline-block; padding: 0 10px; margin-left: 8px; margin-bottom: 10px; background: #fff; color: #9e9e9e; letter-spacing: 0.04em; font-size: 0.8333em; font-weight: normal;
        i { float: left; font-size: 2.6667em; margin-right: 10px; color: #d9d9d9; }
      }
      a.button {
        &:hover {
          background: $skin-bg-color; color: #fff;
          i { color: #fff; }
        }
      }
    }
    &:after { display: table; content: ""; clear: both; }
  }
}

.single {
  .details { margin-bottom: 30px; }
  .single-navigation {
    a.button { font-weight: normal; }
    a.button span { vertical-align: middle; }
    i { font-size: 1.25em; font-weight: normal; line-height: 0; vertical-align: middle; }
    .prev i { margin-right: 20px; }
    .next i { margin-left: 20px; }
  }
}

.about-author {
  .about-author-container { background: #fff; padding: 0 20px; }
  .about-author-content { display: table; border-bottom: 1px solid #f5f5f5; }
  .avatar { display: table-cell; padding: 20px 20px 20px 0; border-right: 1px solid #f5f5f5; }
  .description {
    display: table-cell; padding: 20px; vertical-align: top;
    p { line-height: 1.8333em; }
  }
  .about-author-meta { padding: 15px 0; }
  .social-icons { float: right; }
  .wrote-posts-count {
    line-height: 28px; font-size: 1.1667em;
    i { font-size: 1.8333em; color: $skin-bg-color; float: left; margin-right: 10px; }
    span { vertical-align: middle; }
  }
}

.single .avatar, .travel-story-container .avatar {
  img { @include border-radius(50%, 50%, 50%, 50%); width: 96px; height: 96px; }
}

.single .suggestions {
  .caption { margin-bottom: 0; }
  a.hover-effect:after { color: #fff; background: none; content: "\e8ba"; font-family: "soap-icons"; font-size: 1.6667em; text-align: center; line-height: 50px; border: 2px solid #fff; @include border-radius(50%, 50%, 50%, 50%); width: 50px; height: 50px; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; }
  li { cursor: pointer; }
  li:hover {
    a.hover-effect:after { visibility: visible; @include transform(rotateY(0deg) scale(1,1)); @include opacity(1); }
    a.hover-effect { background: $skin-bg-color; }
    img { @include opacity(0.5); @include transform(scale(1.2)); }
    .caption { color: $skin-active-color; }
  }
}

/* comment */
.comment-list {
  .the-comment {
    padding-top: 20px; margin-top: 20px; border-top: 1px solid #f5f5f5;
    .comment-text {
      padding-right: 50px;
      *:last-child { margin-bottom: 0; }
    }
  }
  > li.comment:first-child > .the-comment { padding-top: 0; margin-top: 0; border-top: none; }
  .avatar {
    margin-right: 30px; float: left;
    img { width: 72px; height: 72px; }
  }
  ul.children { padding-left: 50px; }
}

/* 2.18. Testimonial ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.author {
  a { display: inline-block; @include border-radius(50%, 50%, 50%, 50%); overflow: hidden; margin-left: 1px; }
  img { -webkit-backface-visibility: visible; }
}
.testimonial {
  .slides > li { display: none; }
  &.style1, &.style2 {
    .slides > li { padding-bottom: 80px; position: relative; }
    .description { font-size: 1.3333em; color: $skin-active-color; font-style: italic; }
    .author {
      /*margin: 25px 0 10px;*/ position: absolute; bottom: 0; left: 0; right: 0; width: auto;
      a { float: left; width: 74px; height: 74px; margin-right: 10px; }
      .name {
        padding-top: 22px;
        small { display: block; text-transform: uppercase; font-size: 0.7143em; }
      }
    }
  }
  &.style1 {
    background: #fff; padding: 25px;
    .testimonial-control-nav {
      float: right;
      > li {
        float: left; margin-left: 5px;
        a {
          display: block; width: 14px; height: 14px; @include border-radius(50%, 50%, 50%, 50%); border: 1px solid #dbdbdb; text-indent: -9999px; cursor: pointer;
          &.testimonial-active { background: $skin-select-color; border-color: $skin-select-color; }
        }
      }
    }
    &:after { display: table; content: ""; clear: both; }
  }
  &.style2 {
    position: relative;
    .description { background: #fff; padding: 25px; }
    .author { padding-left: 25px; }
    .testimonial-direction-nav {
      right: 0; top: -40px; width: 72px; height: 22px; position: absolute;
      li { float: left; }
      li a {
        display: block; width: 30px; height: 22px; background: $skin-active-color; color: #fff; text-indent: -9999px;
        &:before { position: absolute; display: block; top: 2px; font-family: 'soap-icons'; text-indent: 0; font-size: 20px; }
        &.testimonial-prev {
          margin-right: 10px;
          &:before { content: '\e88a'; left: 8px; }
        }
        &.testimonial-next:before { content: '\e88b'; right: 9px; }
        &.testimonial-disabled { background: #d9d9d9; }
      }
    }
  }
  &.style3 {
    position: relative; border: 2px solid #fff; margin-top: 80px; padding: 60px 40px 20px; text-align: center;
    .author {
      position: absolute; top: -50px; left: 50%; margin-left: -50px;
      a {
        width: 100px; height: 100px; border: 3px solid #fff; background: #fff;
        img { width: 100%; height: 100%; @include border-radius(50%, 50%, 50%, 50%); }
      }
    }
    .description {
      color: #fff; font-size: 2.5em; font-weight: 300;
      em { font-weight: 400; }
      &:before, &:after { color: $skin-active-color; }
    }
    .name {
      color: $skin-active-color;
      &:before { content: "-"; }
    }
    ul.slides {
      &:after { display: table; content: ""; clear: both; }
      li { position: static !important; }
    }
    .testimonial-direction-nav {
      .testimonial-prev, .testimonial-next {
        position: absolute; display: block; top: 0; bottom: 0; width: 40px; text-indent: -9999px; background: #fff; color: $skin-active-color;
        &:before { text-indent: 0; position: absolute; display: block; left: 15px; font-size: 30px; top: 50%; margin-top: -10px; font-family: 'soap-icons'; }
      }
      .testimonial-prev { left: 0; &:before { content: '\e87c'; } }
      .testimonial-next { right: 0; &:before { content: '\e878'; } }
      .testimonial-disabled { background: $dark-blue-theme-color; color: #fff; }
    }
  }
}

/* 2.19. Our Team Section ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.team {
  text-align: center;
  figure {
    position: relative; overflow: hidden;
    &:hover figcaption { @include opacity(1); bottom: 0; }
    figcaption {
      position: absolute; bottom: -32px; line-height: 0; text-align: center; left: 0; right: 0; @include opacity(0); @include transition(all, 0.3s, ease-in);
      > .social-icons > li a {
        background: #fff; color: inherit; @include opacity(0.65);
        &:hover { color: $skin-active-color; @include opacity(1); }
      }
    }
  }
  .details { text-align: center; }
  .description { border-top: 1px solid #f5f5f5; margin-top: 10px; padding-top: 8px; }
  .social-icons { display: inline-block; }
}

/* contact form */
.contact-form-container {
  padding: 30px 30px 20px;
  .contact-form {
    label { text-transform: uppercase; }
  }
}

/* 2.20. Gallery popup ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.opacity-overlay {
  outline: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 10000; display: none; -webkit-backface-visibility: hidden;
  .container { height: 100%; position: relative; z-index: 10001; }
  .spinner { color: #fff; font-size: 32px; position: absolute; left: 50%; top: 50%; margin-left: -16px; margin-top: -16px; }
}
.popup-wrapper {
  text-align: center; position: absolute; left: 0; top: 0; height: 100%; width: 100%; padding: 0 5px;
  &:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
  .popup-content { float: none; padding: 0; margin: 0 auto; text-align: left; z-index: 10003; position: relative; display: inline-block; vertical-align: middle; }
}

/* 2.21. Style changer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.style-changer {
  text-align: left; width: 270px;
  .style-changer-header {
    width: 330px; padding-left: 30px; height: 55px; line-height: 55px; color: #fff; background: $skin-bg-color; @include border-radius(0, 0, 15px, 0); position: relative;
    .style-main-title { float: left; margin: 0; line-height: 55px; color: #fff; }
    .style-toggle {
      position: absolute; right: 15px; top: 12px; font-size: 20px; width: 30px; height: 30px; @include border-radius(50%, 50%, 50%, 50%); background: #fff; line-height: 30px; text-align: center;
      > .fa { color: $skin-bg-color; }
    }
  }
  .style-chagner-main {
    width: 270px; background: #fff; padding: 15px 30px 30px;
    label { margin-top: 15px; font-weight: 400; font-size: 0.8333em; text-transform: uppercase; }
    .design-skins {
      margin-bottom: 15px;
      li {
        padding: 4px; border: 1px solid; @include border-radius(50%, 50%, 50%, 50%); width: 35px; height: 35px;
        i { display: none; }
        a { display: block; color: #fff; @include border-radius(50%, 50%, 50%, 50%); text-align: center; font-size: 20px; line-height: 1.1em; width: 100%; height: 100%; }
        &.active i { display: inline-block; }
        &.light-blue { border-color: $light-blue-color; a { background: $light-blue-color; } }
        &.purple { border-color: $purple-color; a { background: $purple-color; } }
        &.orange { border-color: $orange-color; a { background: $orange-color; } }
        &.light-orange { border-color: $light-orange-color; a { background: $light-orange-color; } }
        &.sea-blue { border-color: $sea-blue-color; a { background: $sea-blue-color; } }
        &.sky-blue { border-color: $sky-blue-color; a { background: $sky-blue-color; } }
        &.dark-orange { border-color: $dark-orange-color; a { background: $dark-orange-color; } }
        &.dark-blue { border-color: $dark-blue-color; a { background: $dark-blue-color; } }
        &.light-yellow { border-color: $light-yellow-color; a { background: $light-yellow-color; } }
        &.red { border-color: $red-color; a { background: $red-color; } }
      }
    }
  }
  
  &.dark {
    .style-chagner-main {
      background: $skin-dark-color;
      label { color: $skin-light-color; }
    }
  }
  
  &#style-changer {
    position: fixed; left: -275px; top: 100px; z-index: 1000; @include transition(all, 0.4s, ease-in);
  }
}

/* 2.22. Animated effect ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.animated { visibility: hidden; }

/* 2.23. Parallax ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.parallax {
  background-attachment: fixed;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: auto auto;
  overflow: hidden;
}

/* 2.24. Page Loader ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.pace { user-select: none; background: #f5f5f5; height: 100%; left: 0; opacity: 1; position: fixed; top: 0; @include transition(all, 0.4s, ease-in-out); visibility: visible; width: 100%; z-index: 999999; -webkit-backface-visibility: hidden; }
.pace-inactive { display: none; }
.pace .loading-page { -webkit-backface-visibility: hidden !important; -webkit-transform: none !important; }
body.pace-running {  }
/*.pace-running > div {
  visibility: hidden;
  &.pace { visibility: visible; }
}*/

/* 3. Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 3.1. Main Header ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#header {
  position: relative; z-index: 999;
  .topnav { 
    height: 30px; background: $skin-bg-color; width: 100%;
    ul.quick-menu > li { 
      float: left; margin-left: 20px; 
      &:first-child { margin-left: 0; }
      > a { color: #fff; line-height: 30px; display: block; font-size: 0.8333em; text-transform: uppercase; }
    }
  }
  .ribbon { 
    position: relative;
    > a {
      position: relative; padding: 0 10px 0 0; text-transform: uppercase;
      &:after { display: inline-block; position: absolute; right: 0; /*top: 0; */content: "\f0d7"; font-family: FontAwesome; color: #fff; }
    }
    &:hover > ul.menu { top: 28px; visibility: visible; @include opacity(1); }
    > ul.menu { position: absolute; left: -15px; top: -9999px; z-index: 99; visibility: hidden; }
    > ul.menu.left { left: auto; right: -10px; }
    &.currency > ul.menu li a { text-transform: uppercase; font-size: 0.8333em; }
  }
  
  .main-header { height: auto; position: relative; width: 100%; }
  /* Logo */
  .logo {
    padding: 0; text-align: left; margin: 22px 0 0; height: auto;
    a { display: block; }
  }
  
  /* 3.1.1. Mobile navigation */
  .mobile-menu-toggle {
    background: url(../images/icon/mobile-menu.png) no-repeat center center $skin-bg-color; padding: 0; margin: 0; height: 66px; width: 66px; padding: 22px; position: absolute; right: 0; top: 0; bottom: 0; text-indent: -9999px; display: none;
    .icon-bar { background: white; }
  }

  /* 3.1.2. Header Styles */
  &.style1 {
    background: $skin-bg-color; padding-top: 30px;
    * { color: #fff; }
    .logo {
      margin: 0; float: none; position: absolute; left: 50%; margin-left: -77px; top: 32px;
      a {
        width: 155px; position: relative;/* background: none;*/
        &:after { position: absolute; display: block; width: 130px; height: 30px; background: url("../images/logo_txt.png") no-repeat $skin-bg-color; content: ""; top: 0; right: 0; }
      }
      img { @include opacity(1); }
    }
    .social-icons{
      float: right;
      li {
        a {
          background: none; border: 1px solid transparent; overflow: hidden;
          &:hover {
            border: 1px solid $skin-hover-color;
            i { display: block; @include animation(toBottomFromTop, 0.3s, forwards); }
          }
        }
      }
    }
    .contact-details {
      float: left; margin-bottom: 30px;
      .contact-phone {
        font-size: 1.1667em; font-weight: bold;
        i { border-color: $skin-hover-color; }
      }
    }

    /* Main menu */
    #main-menu {
      border-top: 1px solid $skin-hover-color;
      ul.menu {
        margin: 0 auto; float: none;
        > li {
          padding-left: 0; padding-right: 0px; margin-right: 15px;
          > a { padding-left: 20px; padding-right: 20px; height: 50px; line-height: 50px; font-weight: bold; }
          &.active > a, &:hover > a { color: #fff; background: $skin-hover-color; }
          &:hover > ul, &:hover > .megamenu-wrapper { top: 47px; }
        }
      }
    }
  }

  &.style2 {
    .topnav {
      height: auto; background: $dark-blue-theme-color;
      ul.quick-menu > li { 
        > a {
          color: $light-blue-theme-color; height: 50px; line-height: 50px;
          &:hover { color: #fff; }
        }
        &.ribbon {
          &:hover > ul.menu { top: 47px; } 
          > a:after { color: $light-blue-theme-color; }
        }
      }
    }
    .logo {
      margin-top: 28px;
      a {
        background-size: auto 22px;
        img { width: auto; height: 22px; }
      }
    }
    .header-search {
      padding-top: 22px; text-align: left; height: 78px;
      [class^="col-"] { padding: 0; }
      .where { border: 1px solid #dbdbdb; border-right: none; }
      .check-in { border: 1px solid #dbdbdb; border-right: none; }
      .check-out { border: 1px solid #dbdbdb; border-right: none; }
      .guest span.custom-select { border: 1px solid #dbdbdb; }
    }
    /* Main menu */
    #main-menu {
      ul.menu {
        margin: 0 auto; float: none;
        > li {
          padding-left: 0; padding-right: 0px; margin-right: 10px;
          > a { padding-left: 15px; padding-right: 15px; height: 50px; line-height: 50px; color: $light-blue-theme-color; }
          &.active > a, & > a:hover { color: #fff; background: #263546; }
          &:hover > ul, &:hover > .megamenu-wrapper { top: 47px; }
        }
      }
    }
  }

  &.style3 {
    .inspire-btn { margin-top: 34px; }
    .logo {
      margin-top: 34px;
      a { background-size: auto 26px; }
    }
    
    /* Main menu */
    #main-menu {
      .menu {
        margin-right: 40px;
        & > li {
          > a { font-size: 1.1667em; color: #d9d9d9; height: 96px; line-height: 96px; }
          &:hover > a, &.active > a { color: $skin-active-color; }
        }
      }
    }
  }

  &.style4 {
    padding-top: 30px;
    .logo { margin: 0; margin-bottom: 16px; }
    .quick-search {
      display: inline-block;
      .input-text { width: 250px; }
    }
    button { padding: 0 15px; }
    
    .topnav {
      float: right; background: none; width: auto; height: auto;
      ul.quick-menu {
        > li > a { line-height: 50px; height: 50px; color: inherit; }
        .ribbon {
          &:hover > ul.menu { top: 48px; }
          > a:after { color: inherit; }
        }
      }
    }
    /* Main menu */
    .main-navigation { border-top: 1px solid #f5f5f5; }
    #main-menu {
      > ul.menu {
        margin: 0 auto; float: none;
        > li {
          padding-left: 0; padding-right: 0px; margin-right: 2px;
          > a { padding-left: 20px; padding-right: 20px; height: 50px; line-height: 50px; }
          &.active > a, &:hover > a { font-weight: bold; color: inherit; background: #f5f5f5; }
          &:hover > ul, &:hover > .megamenu-wrapper { top: 48px; }
        }
      }
    }
  }

  &.style5 {
    #main-menu {
      > ul > li { 
        > a { line-height: 48px; height: 48px; }
        &:hover > ul, &:hover > .megamenu-wrapper { top: 46px; }
      }
    }
    .logo {
      margin-top: 14px; min-height: initial;
      img { height: 20px; }
      a { background-size: auto 20px; }
    }
  }

  &.style6 {
    padding-top: 20px;
    .logo {
      margin: 0;
      img { height: 24px; }
      a { background-size: auto 24px; }
    }
    button { padding: 0 15px; }
    .topnav {
      float: left; background: none; width: auto; height: auto; margin: 0 0 22px 20px;
      ul.quick-menu {
        > li > a { line-height: 30px; height: 30px; color: inherit; }
        .ribbon {
          &:hover > ul.menu { top: 28px; }
          > a:after { color: inherit; }
        }
      }
    }
    .main-navigation { background: $yellow-theme-color; }
    /* Main menu */
    #main-menu {
      > ul.menu {
        margin: 0 auto; float: none;
        > li {
          padding-left: 0; padding-right: 0px; margin-right: 2px;
          > a { padding-left: 20px; padding-right: 20px; height: 50px; line-height: 50px; font-weight: bold; color: #d07f00; }
          &.active > a, &:hover > a { color: #fff; background: $dark-yellow-theme-color; }
          &:hover > ul, &:hover > .megamenu-wrapper { top: 48px; }
        }
      }
    }
    .social-icons {
      margin-top: 10px;
      li > a { background: none; color: #d07f00; &:hover { color: #fff; } }
      li > a:hover i { display: block; @include animation(toBottomFromTop, 0.3s, forwards); }
    }
  }

  &.style7 {
    .logo {
      margin: 32px 0 0;
      img { height: 28px; }
      a { background-size: auto 28px; }
    }
    .topnav {
      float: left; background: none; width: auto; height: auto; margin: 0;
      ul.quick-menu {
        > li > a { line-height: 36px; height: 36px; color: inherit; }
        .ribbon {
          &:hover > ul.menu { top: 34px; }
          > a:after { color: inherit; }
        }
      }
    }
    .contact-details {
      text-transform: uppercase; margin: 0; line-height: 36px;
      i { color: $skin-active-color; vertical-align: middle; }
      .contact-phone { color: inherit; font-size: 0.8333em; i { font-size: 14px; } }
      .contact-email { color: inherit; font-size: 0.8333em; padding: 0 0 0 10px; i { font-size: 20px; } }
    }
    .main-navigation { background: $dark-blue-theme-color; }
    /* Main menu */
    #main-menu {
      > ul.menu {
        float: right;
        > li {
          padding-left: 0; padding-right: 0px; margin-right: 2px;
          > a { padding-left: 20px; padding-right: 20px; height: 96px; line-height: 96px; font-weight: bold; color: $light-blue-theme-color; }
          &.active > a, &:hover > a { color: #fff; }
          &:hover > ul, &:hover > .megamenu-wrapper { top: 94px; }
        }
      }
    }
    .social-icons {
      margin-top: 32px;
      li > a { background: none; color: $light-blue-theme-color; overflow: hidden;
        &:hover {
          background: $skin-active-color; color: #fff;
          i { display: block; @include animation(toBottomFromTop, 0.3s, forwards); }
        }
      }
    }
  }
}

#header, #footer, .chaser {
  .logo {
    a { background: url($skin-logo) no-repeat 0 0; display: block; }
    img { @include opacity(0); }
  }
}

/*  3.1.3. Navigation */
.menu {
  > li { position: relative; }
}

/* 3.1.4. Language flags */
.lang-flag {
  padding-left: 20px !important;
  &.en-us { background: url(../images/icon/flags/en-us.png) no-repeat left center; }
}

/* 3.1.5. Main Menu */
#main-menu ul.menu li:not(.megamenu-menu) ul, .chaser .menu li:not(.megamenu-menu) ul, .topnav .container > ul ul, .megamenu-wrapper {
  @include opacity(0); @include transition(opacity, 0.2s, ease-in);
}
#main-menu ul.menu, .chaser ul.menu {
  margin: 0; float: right;
  li { -webkit-backface-visibility: hidden; -webkit-transform: none !important; }
  /* 1st level */
  > li {
    float: left; padding-left: 20px; padding-right: 20px;
    &:first-child { padding-left: 0; }
    &:last-child { padding-right: 0; }
    &:hover > ul { top: 66px; visibility: visible; height: auto !important; @include opacity(1); z-index: 1000; }
    > a { font-weight: normal; display: block; padding: 0; height: 68px; line-height: 68px; text-transform: uppercase; letter-spacing: 0.04em; }
    &.active > a { color: $skin-active-color; font-weight: bold; }
    &:hover > a { color: $skin-active-color; }
  }
  
  /* 2nd level */
  // default
  > li > ul {
    &.left { left: auto; right: -10px; }
  }
  > li {
    ul {
      visibility: hidden; position: absolute; left: 0px; top: -9999px; z-index: -1; width: 180px; padding: 0; background: $skin-bg-color;
      li {
        text-align: left; border-top: 1px solid $skin-mobile-menu-color; position: relative;
        &:first-child { border-top: none; }
        &:hover > ul { top: 0; display: block; visibility: visible; @include opacity(1); z-index: 1000; } 
        > a { white-space: nowrap; color: #fff; padding: 12px 20px 12px 18px; display: block; font-size: 0.9167em; @include opacity(0.7); }
        &:hover > a, &.active > a { background: $skin-mobile-menu-color; @include opacity(1); }
      }
    }
    //blue
    &.menu-color-blue ul {
      background: $blue-theme-color;
      li {
        border-top: 1px solid #04afe7;
        &:hover > a, &.active > a { background: #04afe7; }
      }
    }
    // yellow
    &.menu-color-yellow ul {
      background: $yellow-theme-color;
      li {
        border-top: 1px solid #f5b010;
        &:hover > a, &.active > a { background: #f5b010; }
      }
    }
    // green
    &.menu-color-green ul {
      background: $green-theme-color;
      li {
        border-top: 1px solid #91c63d;
        &:hover > a, &.active > a { background: #91c63d; }
      }
    }
  }
  
  /* 3rd level */
  > li li > ul {
    left: 180px;
    &.left { left: -180px; }
  }


  /* 3.1.6. Mega Menu */
  > .megamenu-menu {
    &:hover > .megamenu-wrapper {
      @include opacity(1); top: 66px; z-index: 1002; visibility: visible;
      ul { visibility: visible; }
    }
    .megamenu-wrapper {
      position: absolute; z-index: -1; left: 0; top: -9999px; visibility: hidden; overflow: hidden; display: none; padding: 0;
      ul { position: static; width: 100%; @include opacity(1); }
    }
    .megamenu-holder { width: auto; margin-left: -15px; margin-right: -15px; }
    ul.megamenu {
      display: table; table-layout: fixed; width: 100%; background: $skin-bg-color;
      li.menu-item-has-children {
        &.active > a, &:hover > a { background: none; }
        ul { background: none; }
      }
      > li {
        display: table-cell; float: none; padding-bottom: 25px; border: none;
        > a {
          padding-left: 40px; font-size: 1em; font-weight: bold; text-transform: uppercase; @include opacity(1, true);
          &:hover { background: none; }
        }
        &.megamenu-columns-1 .sub-menu > li { width: 100%; }
        &.megamenu-columns-2 .sub-menu > li { width: 50%; }
        &.megamenu-columns-3 .sub-menu > li { width: 33.3333%; }
        &.megamenu-columns-4 .sub-menu > li { width: 25%; }
        &.megamenu-columns-5 .sub-menu > li { width: 20%; }
        &.megamenu-columns-6 .sub-menu > li { width: 16.6666%; }
      }
      > li > ul > li { float: left; border: none; }
      ul.sub-menu {
        &:after { display: table; content: ""; clear: both; }
        li li {
          display: block; float: none; padding-left: 15px; padding-right: 15px; border: none;
          a {
            white-space: normal; padding-right: 0; font-size: 0.9167em; border-bottom: 1px solid $skin-mobile-menu-color; position: relative; padding-left: 40px;
            &:before { font-family: FontAwesome; content: "\f111"; display: block; font-size: 5px; position: absolute; left: 25px; font-weight: normal; }
          }
          &:hover > a, &.active > a { font-weight: bold; }
        }
      }
    }
  }

  // blue
  .megamenu-menu.menu-color-blue {
    ul.megamenu {
      background: $blue-theme-color;
      ul.sub-menu li li {
        a { border-bottom-color: #04afe7; }
        &:hover > a, &.active > a { background: #04afe7; }
      }
    }
  }
  // yellow
  .megamenu-menu.menu-color-yellow {
    ul.megamenu {
      background: $yellow-theme-color;
      ul.sub-menu li li {
        a { border-bottom-color: #f5b010; }
        &:hover > a, &.active > a { background: #f5b010; }
      }
    }
  }
  // green
  .megamenu-menu.menu-color-green {
    ul.megamenu {
      background: $green-theme-color;
      ul.sub-menu li li {
        a { border-bottom-color: #91c63d; }
        &:hover > a, &.active > a { background: #91c63d; }
      }
    }
  }
  // light skin
  .megamenu-menu.menu-skin-light {
    .megamenu-wrapper { border: 2px solid $skin-bg-color; }
    ul.megamenu {
      background: #fff;
      > li > a { color: $heading-color !important; }
      ul.sub-menu li li {
        a { color: #838383; border-bottom: 1px solid #f5f5f5; }
        &:hover > a, &.active > a {
          background: #f5f5f5; color: $heading-color;
          &:before { color: $skin-active-color; }
        }
      }
    }
    &.menu-color-blue {
      .megamenu-wrapper { border-color: $blue-theme-color; }
      ul.megamenu ul.sub-menu li li {
        &:hover > a, &.active > a {
          &:before { color: $blue-theme-color; }
        }
      }
    }
    &.menu-color-yellow {
      .megamenu-wrapper { border-color: $yellow-theme-color; }
      ul.megamenu ul.sub-menu li li {
        &:hover > a, &.active > a {
          &:before { color: $yellow-theme-color; }
        }
      }
    }
    &.menu-color-green {
      .megamenu-wrapper { border-color: $green-theme-color; }
      ul.megamenu ul.sub-menu li li {
        &:hover > a, &.active > a {
          &:before { color: $green-theme-color; }
        }
      }
    }
  }
}

/* 3.1.7. Mini Menu */
ul.menu.mini {
  min-width: 180px; border: 2px solid $skin-bg-color; background: #fff;
  li {
    padding: 0 20px; float: none; margin: 0;
    a { border-bottom: 1px solid #f5f5f5; display: block; padding: 10px 0; color: inherit; line-height: normal; font-size: 0.9167em; text-align: left; }
    &:hover, &.active {
      background: #f5f5f5;
      a { color: $skin-active-color; font-weight: bold; }
    }
  }
}
.menu-color-skin {
  ul.menu.mini {
    border: none; padding: 10px 0;
    li {
      a { @include opacity(0.7); color: #fff; font-size: 0.8333em; }
      &:last-child a { border: none; }
      &:hover, &.active {
        a { @include opacity(1); }
      }
    }
  }
}
.menu-color-blue, .menu-color-yellow, .menu-color-green {
  @extend .menu-color-skin;
}
.menu-color-skin ul.menu.mini {
  background: $skin-bg-color;
  li {
    a { border-color: $skin-mobile-menu-color; }
    &:hover, &.active { background: $skin-mobile-menu-color; }
  }
}
.menu-color-blue ul.menu.mini {
  background: $blue-theme-color;
  li {
    a { border-color: #04afe7; }
    &:hover, &.active { background: #04afe7; }
  }
}
.menu-color-yellow ul.menu.mini {
  background: $yellow-theme-color;
  li {
    a { border-color: #f5b010; }
    &:hover, &.active { background: #f5b010; }
  }
}
.menu-color-green ul.menu.mini {
  background: $green-theme-color;
  li {
    a { border-color: #91c63d; }
    &:hover, &.active { background: #91c63d; }
  }
}

/* 3.1.8. Mobile Menu */
#header .mobile-menu {
  background: $skin-bg-color; text-align: left;
  a { color: #fff; @include opacity(0.7); display: block; padding: 15px 0; background: none !important; }
  li.active > a, li:hover > a { @include opacity(1); }
  > ul.menu {
    // 1st level
    > li {
      float: none; padding-left: 15px; padding-right: 15px;
      > a { font-size: 1.1667em; border-top: 1px solid $skin-mobile-menu-color; }
      > a { text-transform: uppercase; font-weight: bold; }
      &.menu-item-has-children {
        position: relative;
        &.open { background: $skin-mobile-menu-color; }
        & > .dropdown-toggle {
          position: absolute; right: 1px; top: 7px; height: 34px; line-height: 34px; padding: 0 15px; background: none; display: inline-block; font-family: FontAwesome; font-size: 1.3333em; font-weight: normal; @include opacity(0.7);
          &:after { content: "\f056"; }
          &.collapsed:after { content: "\f055"; }
        }
        > a { border-top: 1px solid $skin-mobile-menu-color; }
        &.open {
          > a { color: #fff; /*border-top-color: $skin-bg-color;*/ @include opacity(1); }
          > .dropdown-toggle { @include opacity(1); }
        }
        &:hover {
          > a, > .dropdown-toggle { @include opacity(1); }
        }
        > ul { border-top: 1px solid $skin-bg-color; }
      }
      &:first-child > a { border-top: none; }
      &:last-child > a { border-bottom: 1px solid $skin-mobile-menu-color; }
    }
    
    // 2nd+ level
    > li > ul {
      /*background: $skin-mobile-menu-color;*/
      li {
        > a {
          padding-left: 15px; font-size: 1.0833em; position: relative;
          &:before { font-family: FontAwesome; content: "\f111"; display: block; font-size: 4px; position: absolute; left: 0px; }
        }
        &.menu-item-has-children {
          > a {
            padding-left: 0; color: #fff; @include opacity(1); font-size: 1.1667em; font-weight: bold; text-transform: uppercase;
            &:before { content: ""; display: none; }
          }
          > ul { border-bottom: 1px solid $skin-bg-color; }
          &:last-child > ul { border-bottom: none !important; }
        }
      }
    }
    
    //3rd level
    > li li li {
      &.menu-item-has-children > a {
        padding-left: 10px;
        &:before { display: none; }
      }
    }
  }

  .mobile-topnav {
    margin: 0 auto; padding: 0 5px;
    > li {
      float: left; position: relative; color: $skin-hover-color;
      > a {
        font-size: 0.8333em; padding: 0 10px; margin: 22px 10px; line-height: 1em; width: auto;
      }
      &:after { content: "|"; position: absolute; right: -1px; top: 50%; margin-top: -10px;}
      &:last-child:after { display: none; }
      &:first-child a { margin-left: 0; }
    }

    .menu.mini {
      left: 0; top: 40px; visibility: visible; display: none; min-width: 100px;
      li > a { padding: 10px 0; }
      &.left { left: 0; right: auto; }
    }
  }

  // blue
  &.menu-color-blue, &.menu-color-yellow, &.menu-color-green {
    .mobile-topnav li:after { color: #fff; @include opacity(0.7); }
  }

  &.menu-color-blue {
    background: $blue-theme-color;
    ul.menu {
      > li {
        &.menu-item-has-children {
          > a { border-top-color: #04afe7; }
          &.open { background: #04afe7; }
          &.open > a, > ul { border-top-color: $blue-theme-color; }
        }
        &:last-child > a { border-bottom-color: #04afe7; }
      }
      > li > ul {
        li.menu-item-has-children > ul { border-bottom-color: $blue-theme-color; }
      }
    }
  }
  // yellow
  &.menu-color-yellow {
    background: $yellow-theme-color;
    ul.menu {
      > li {
        &.menu-item-has-children {
          > a { border-top-color: #f5b010; }
          &.open { background: #f5b010; }
          &.open > a, > ul { border-top-color: $yellow-theme-color; }
        }
        &:last-child > a { border-bottom-color: #f5b010; }
      }
      > li > ul {
        li.menu-item-has-children > ul { border-bottom-color: $yellow-theme-color; }
      }
    }
  }
  // green
  &.menu-color-green {
    background: $green-theme-color;
    ul.menu {
      > li {
        &.menu-item-has-children {
          > a { border-top-color: #91c63d; }
          &.open { background: #91c63d; }
          &.open > a, > ul { border-top-color: $green-theme-color; }
        }
        &:last-child > a { border-bottom-color: #91c63d; }
      }
      > li > ul {
        li.menu-item-has-children > ul { border-bottom-color: $green-theme-color; }
      }
    }
  }
}

/* 3.1.9. Sticky Header */
.chaser {
  /*background: rgba(red($skin-bg-color), green($skin-bg-color), blue($skin-bg-color), 0.8); left: 0; padding: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 9999;*/
  background: rgba(255, 255, 255, 0.95); position: fixed; right: 0; top: 0; width: 100%; z-index: 999; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); -webkit-backface-visibility: hidden;
  ul.menu {
    > li { 
      > a { line-height: 48px; height: 48px; }
      &:hover > ul, &:hover > .megamenu-wrapper { top: 46px !important; }
    }
  }
  .logo {
    margin-top: 14px; min-height: initial; padding: 0; height: auto; margin-bottom: 0;
    img { height: 20px; }
    a { background-size: auto 20px; }
  }
}
.no-rgba .chaser { background: #fff; @include opacity(0.95); }
.no-backgroundsize .chaser .logo a {
  background-size: auto 20px; background-image: none;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$skin-logo}', sizingMethod='scale');
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='#{$skin-logo}', sizingMethod='scale')";
}

/* 3.2.0. Sign up & Login box */
.travelo-signup-box, .travelo-login-box {
  border: 2px solid $skin-active-color; width: 300px; margin: 0 auto; display: none;
  .login-social .button {
    width: 100%; height: 36px; line-height: 36px; margin-bottom: 10px; font-size: 1.3333em; font-weight: 400; text-align: left; padding-left: 20px; letter-spacing: 0.04em;
    i { font-size: 1.5em; margin-right: 36px; width: 20px; float: left; display: block; }
  }
  .login-facebook { background: #155c92; }
  .login-googleplus { background: #d13535; }
  .seperator {
    line-height: 0; border-top: 1px solid #f5f5f5; position: relative; margin-top: 10px; margin-bottom: 10px;
    label { display: block; font-size: 0.9167em; position: absolute; left: 50%; top: 50%; line-height: 1; background: #fff; padding: 0 10px; margin: -1px 0 0; @include transform(translate(-50%, -50%)); font-weight: 400; }
  }
  p { margin-bottom: 0; }
  .description { font-size: 1em; color: #9e9e9e; }
  .form-group { margin-bottom: 10px; text-align: left; }
  .checkbox label { font-size: 1em; }

  .goto-login, .goto-signup, .signup-email { color: $skin-active-color; font-size: 1.0833em; }
}

.travelo-signup-box {
  .signup-email-section { margin-bottom: 10px; }
  .signup-email {
    i { font-size: 1.2em; margin-right: 4px; }
  }

  .email-signup { margin-top: 5px; margin-bottom: 20px; display: none; }
}

.travelo-login-box {
  .checkbox-inline { margin-left: 0; }
  .forgot-password { color: $skin-active-color; text-decoration: underline; }
}

/* 3.2. Slideshow ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#slideshow { position: relative; width: 100%; padding: 0; min-height: 100px; }
/* background slideshow */
.slideshow-bg {
  position: relative;
  #slideshow { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; margin: 0; padding: 0; }
  .flexslider {
    height: 100%; border: none; box-shadow: none;
    .slides, .slides > li { height: 100%;}
    .slidebg { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-position: center center; background-repeat: no-repeat; background-size: cover; @include transition(all, 0.5s, ease-out); }
  }
  #main { position: relative; z-index: 2; }
}

/* 3.3. Page Title ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.page-title-container {
  height: 56px; background: $dark-blue-theme-color;
  .page-title {
    .entry-title { line-height: 56px; color: #fff; margin: 0; }
  }
  .breadcrumbs {
    height: 100%;
    li {
      float: left; line-height: 56px; display: inline; margin-left: 5px; font-size: 0.8333em; font-weight: bold; text-transform: uppercase;
      a {
        padding-right: 5px; color: #fff;
        &:hover { color: $skin-active-color; }
      }
      &:after { content: "/"; color: #5a7ca3; }
      &:last-child:after { content: ""; }
      &.active { color: #fdb714; }
    }
  }

  &.style1 {
    background: #dbdbdb; height: 66px; line-height: 66px; text-align: right;
    .page-title .entry-title { color: inherit; font-style: italic; line-height: 66px; }
    button { padding-left: 10px; padding-right: 10px; } 
    .container {
      position: relative;
      &:before { content: ""; display: block; width: 0; height: 0; position: absolute; z-index: 1; left: 0; top: 0; border-top: 5px solid #fff; border-left: 6px solid transparent; border-right: 6px solid transparent; }
    }
  }

  &.style2 {
    background: url('http://placehold.it/2080x87') no-repeat center top #dbdbdb; height: 86px; line-height: 86px; text-align: right;
    .page-title { float: left; }
    .page-title .entry-title { color: #fff; line-height: 86px; font-weight: bold; }
    .breadcrumbs {
      float: right; background: #e5f8fa; margin-top: 28px; padding: 0 15px;
      li.active { color: $skin-active-color; }
      li {
        line-height: 30px;
        a { color: inherit; font-weight: normal; }
      }
    }
    .page-title, .breadcrumbs { position: relative; }
    .page-title:after { position: absolute; content: ""; width: 59px; height: 39px; top: 10px; right: -100px; background: url('http://placehold.it/59x39') no-repeat; }
    .breadcrumbs:before { position: absolute; content: ""; width: 131px; height: 71px; bottom: -28px; left: -135px; background: url('http://placehold.it/131x71') no-repeat; }
  }

  &.style3 {
    background: $dark-blue-theme-color; height: auto; padding: 25px 0 10px;
    form label { font-size: 0.8333em; color: #7c9abd; }
  }

  &.style4 {
    background: #fdb714; height: 60px; line-height: 60px; text-align: right; overflow: hidden;
    .page-title .entry-title { color: inherit; font-style: italic; line-height: 60px; }
    .page-title {
      float: left; background: #fdb714; padding-right: 20px; position: relative;
      &:after { display: block; content: ""; position: absolute; right: -20px; top: 0; width: 0; height: 0; border-left: 20px solid #fdb714; border-top: 30px solid transparent; border-bottom: 30px solid transparent; }
      i { float: left; font-size: 24px; line-height: 60px; margin-right: 20px; color: #df9207; }
      .entry-title { white-space: nowrap; color: #fff; font-style: normal; font-weight: normal; float: left; }
    }
    .container {
      background: #efa300; position: relative;
      &:before { position: absolute; content: ""; display: block; right: -100%; top: 0; height: 60px; width: 100%; background: #efa300; }
    }
    .breadcrumbs {
      float: right;
      li {
        line-height: 60px;
        a { color: #ffce5c; }
        &:before { font-family: "soap-icons"; content: '\e86f'; font-weight: bold; display: inline-block; @include border-radius(50%, 50%, 50%, 50%); color: #ffce5c; border: 1px solid; line-height: 12px; text-align: center; height: 14px; width: 14px; margin-right: 8px; }
        &:after { content: ""; }
        &.active, &.active:before, &:hover:before, &:hover a { color: #fff; }
      }
    }
  }

  &.style5 {
    background: #94e2fb; height: 86px; line-height: 86px;
    .page-title { float: left; margin-right: 25px; }
    .page-title .entry-title { color: #fff; line-height: 86px; font-size: 2.5em; }
    .breadcrumbs {
      float: left;
      li {
        line-height: 86px;
        a { color: $blue-theme-color; }
        &:before { font-family: "soap-icons"; content: '\e86f'; font-weight: bold; display: inline-block; @include border-radius(50%, 50%, 50%, 50%); color: $blue-theme-color; border: 1px solid; line-height: 12px; text-align: center; height: 14px; width: 14px; margin-right: 8px; }
        &:after { content: ""; }
        &.active, &.active:before, &:hover:before, &:hover a { color: #fff; }
      }
      &:before { float: left; content: "|"; font-size: 2.5em; font-weight: 300; color: #c6f1ff; margin-right: 25px; }
    }
    .social-icons {
      float: right; margin-top: 27px;
      li { line-height: normal; }
      a {
        background: none; overflow: hidden;
        &:hover {
          border: 1px solid #fff; @include border-radius(50%, 50%, 50%, 50%); background: none;
          i { color: #fff; display: block; @include animation(toBottomFromTop, 0.3s, forwards); }
        }
        i { color: $blue-theme-color; }
      }
    }
  }

  &.style6 {
    background: #dbdbdb; height: 86px; line-height: 86px;
    .page-title { float: left; margin-right: 25px; font-style: italic; }
    .page-title .entry-title { color: $primary-color; line-height: 86px; font-size: 2.5em; }
    .breadcrumbs {
      float: left;
      li {
        line-height: 86px;
        a { color: #f5f5f5; }
        &:before { font-family: "soap-icons"; content: '\e86f'; font-weight: bold; display: inline-block; @include border-radius(50%, 50%, 50%, 50%); color: #f5f5f5; border: 1px solid; line-height: 12px; text-align: center; height: 14px; width: 14px; margin-right: 8px; }
        &:after { content: ""; }
        &.active, &.active:before, &:hover:before, &:hover a { color: inherit; }
      }
      &:before { float: left; content: "|"; font-size: 2.5em; font-weight: 300; color: #f5f5f5; margin-right: 25px; }
    }
    .search-box {
      padding: 25px 0 0; float: right; margin: 0; line-height: normal;
      .input-text { background: #f5f5f5; font-size: 0.8333em; letter-spacing: 0.04em; text-transform: uppercase; }
    }
  }
}

/* 3.4. Word Map Section ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.world-map-section {
  height: 750px;
}
.marker-holder {
  position: absolute; width: 10px; height: 10px; left: 0;
  .image-box {
    position: absolute; width: 405px; padding: 5px; margin: 0; background: #fff; bottom: 0; left: 0; font-family: $font-stack;
    figure {
      width: 135px; height: 135px; float: left;
      img { height: 100%; }
    }
    .details {
      margin-left: 150px; padding-top: 5px;
      .title { img { padding-top: 5px; margin-right: 3px; } }
      i { font-size: 2.1667em; color: #d9d9d9; }
      .price { font-size: 1.3333em; small { font-size: 0.625em; line-height: 1.3333em; } }
      .table-wrapper { width: 100%; table-layout: fixed; }
      .table-cell {
        padding: 10px 20px 10px 10px; border-top: 1px solid #f5f5f5;
        &:first-child { border-right: 1px solid #f5f5f5; }
      }
    }
    &:after { content: ""; position: absolute; left: 180px; bottom: -25px; display: block; width: 0; height: 0; border-width: 25px 25px 0; border-style: solid; border-color: #fff transparent; }
  }
}


/* 4. Search Form ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 4.1. Default Style ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search-box-wrapper { background: #fff; }
.search-box { margin-top: -80px; position: relative; z-index: 99; }

ul.search-tabs {
  margin: 0; padding: 0;
  li {
    float: left; padding-right: 4px;
    a { color: #333; display: block; padding: 0 30px; background: #fff; font-size: 1em; font-weight: bold; height: 40px; line-height: 40px; text-decoration: none; @include opacity(0.4); letter-spacing: 0.04em; text-transform: uppercase; }
    a:hover { @include opacity(0.7); }
  }
  li.active a { @include opacity(1); color: $skin-active-color; }
}

.visible-mobile .search-tabs {
  li {
    float: none;
    a {
      color: $skin-active-color; @include opacity(1); padding: 0 80px; text-align: center;
      &:hover { @include opacity(1); }
    }
  }
}

.search-tab-content {
  padding: 30px 0;
  .tab-pane { display: none; }
  .tab-pane.active { display: block; }
  h4.title { margin: 10px 0; height: 20px; }
  .fixheight { padding-top: 40px; }
}

/* search box for mobile */
.search-box #mobile-search-tabs > li { display: none; }
.search-box .bx-wrapper {
  .bx-viewport {
    box-shadow: none; border: none; left: 0;
  }
  .bx-prev, .bx-next { background: $skin-bg-color; font-family: FontAwesome; }
  .bx-controls-direction a {
    width: 30px; height: 22px; margin-top: -11px;
    &.disabled { display: block; background: #d9d9d9; }
  }
  .bx-prev:before, .bx-next:before {
    display: block; position: absolute; text-indent: 0; line-height: 20px; text-align: center; width: 30px; color: #fff;
    &:hover { color: white; }
  }
  .bx-prev:before { content: "\f177"; }
  .bx-next:before { content: "\f178"; }
}

/* 4.2. Style1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search-box-wrapper.style1 {
  background: none;
  .search-box { margin: 0; }
  .search-box > ul.search-tabs {
    margin-top: 80px; float: left; width: 31%;
    li {
      float: none; margin-right: 0; padding-right: 0;
      > a {
        @include opacity(0.65); height: 57px; line-height: 57px; border-bottom: 1px solid #0d9dec; border-right: 1px solid #0d9dec; position: relative; padding-left: 50px; overflow: hidden;
        &:hover {
          @include opacity(0.85);
          i { @include animation(toTopFromBottom, 0.3s, forwards); }
        }
        > i { position: absolute; left: 15px; font-size: 24px; }
      }
      &.active > a {
        border-right-color: #fff; @include opacity(1);
        > i { color: $yellow-theme-color; }
        &:after { content: "\e88b"; font-family: "soap-icons"; position: absolute; right: 15px; color: $skin-active-color; font-size: 20px; }
      }
      &:last-child > a { border-bottom: none; }
    }
  }
  .search-tab-content {
    background: #fff; float: left; width: 69%; padding: 0;
    .title-container {
      background: $yellow-theme-color; padding: 15px 40px 0 25px; height: 80px; position: relative;
      > i { font-size: 48px; position: absolute; right: 25px; top: 50%; margin-top: -24px; }
      * { color: #fff; }
      .search-title { margin: 0; font-weight: bold; }
    }
    .search-content {
      padding: 18px 25px 25px;
      .choose-travel {
        label.radio { color: $heading-color; font-size: inherit; }
        > div { margin-bottom: 0; }
      }
      label { font-size: 0.8333em; }
    }
  }
}
/* 4.3. Style2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search-box-wrapper.style2 {
  background: none;
  .search-box { margin: 0 auto; background: rgba(0, 0, 0, 0.5); padding: 5px; }
  .search-box > ul.search-tabs {
    display: table; width: 100%;
    li {
      padding-right: 5px; display: table-cell; float: none;
      &:last-child { padding-right: 0; }
      > a {
        /*margin-bottom: 5px;*/ height: 35px; line-height: 35px; background: $blue-theme-color; @include opacity(1); color: #fff; padding: 0; text-align: center; overflow: hidden;
        i { font-size: 1.6666em; vertical-align: middle; margin-right: 10px; line-height: 0; }
        span { vertical-align: middle; }
        &:hover i:before { @include animation(toTopFromBottom, 0.35s, forwards); }
      }
      &.advanced-search > a { background: $yellow-theme-color; }
      &.active > a { margin-bottom: 0; height: 40px; background: #fff; color: $skin-active-color; }
    }
  }
  .search-tab-content {
    background: #fff; padding: 20px;
    .tab-pane [class^="col-"], .tab-pane [class*=" col-"] { padding-left: 5px; padding-right: 5px; }
    .tab-pane .row { margin-left: -5px; margin-right: -5px; }

    input.input-text, select, textarea, span.custom-select { background: #fff; border: 1px solid #d1d1d1; }
    .selector span.custom-select:before { background: #d1d1d1; }
    .datepicker-wrap:after { background: transparent; color: #d1d1d1; }

    button { font-size: 1.1667em; font-weight: bold; }
  }
}
/* 4.4. Map Search ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.search-box-wrapper .main-search-box {
  padding: 20px 0 10px;
  .row {
    margin: 0;
    > div { padding: 0; }
  }
  .title { line-height: 43px; margin: 0; }
  button { font-size: 1em; }
}

/* 5. Search Results ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 5.1. Hotel ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 5.1.1. Sort by */
.sort-by-section {
  background: #fff; padding: 0 20px;
  li {
    float: left; padding: 15px 5px;
    /*&:first-child { padding-left: 0; }
    &:last-child { padding-right: 0; }*/
  }
  .sort-by-title { margin: 15px 20px 0 0; line-height: 34px; float: left; }
  .sort-bar {
    float: left;
    .sort-by-container {
      position: relative; display: block;
      > span {
        background: #f5f5f5; height: 34px; padding: 0 45px 0 15px; line-height: 34px; display: block; color: #9e9e9e;
        &:after { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; width: 30px; background: #d9d9d9; content: ""; }
      }
      &:before, &:after { content: ""; position: absolute; z-index: 1; display: block; top: 50%; right: 12px; border-left: 3px solid transparent; border-right: 3px solid transparent; }
      &:before { margin-top: -6px; border-bottom: 5px solid #fff; }
      &:after { margin-top: 2px; border-top: 5px solid #fff; }
    }
    li.active .sort-by-container > span:after { background: $yellow-theme-color; }
  }
  
  .swap-tiles {
    float: right; font-size: 33px;
    li > a > i { display: block; width: 34px; line-height: 34px; height: 34px; background: #f5f5f5; color: #d9d9d9; text-align: center; }
    li:hover > a > i, li.active > a > i { background: $skin-bg-color; color: #fff; }
    li.swap-list > a > i { font-size: 30px; }
  }
}

/* 5.1.2. Filters */
.filters-container.toggle-container {
  background: none;
  .panel.style1 {
    border: none; margin-bottom: 4px; background: #fff;
    .panel-title {
      padding-left: 5px;
    }
    .panel-content { padding: 10px 20px 20px; }
  }
}
.search-results-title {
  background: #fff; padding: 0 20px; margin: 0; border-bottom: 4px solid #f5f5f5; line-height: 3em;
  > i { color: $yellow-theme-color; font-size: 20px; margin-right: 10px; }
}
.filters-container .reviews { margin: 0; letter-spacing: 0.04em; }
.filters-container ul.filters-option {
  margin-bottom: 10px;
  li {
    margin-bottom: 1px; background: #f5f5f5; padding: 0 15px;
    a { color: inherit; display: block; padding: 8px 0; text-transform: uppercase; font-size: 11px; }
    small { float: right; }
    &:before { float: left; width: 15px; height: 16px; display: block; line-height: 14px; text-align: center; margin-top: 12px; }
    &:after { display: table; clear: both; content: ""; }
    &.active { background: $skin-bg-color; a { color: #fff; } }
  }
}
.hotel-list { margin-top: 30px; }

/* 5.1.3. Detailed */
.detailed-logo {
  background: #fff; padding: 15px;
  figure {
    background: #f5f5f5; text-align: center; padding: 20px 0;
    img { max-width: 100%; height: auto; width: auto; }
  }
  .box-title, .price, .feedback { border-bottom: 1px solid #f5f5f5; }
  .box-title {
    margin-top: 15px; padding-bottom: 10px; letter-spacing: normal;
    > small {
      line-height: 1.5em; letter-spacing: 0.04em; font-size: 10px;
      > i { font-size: 1.5em; display: block; float: left; margin-right: 3px; }
    }
  }
  .price { float: none; display: block; line-height: 1.75em; }
  .feedback { padding: 8px 0 2px; color: #9E9E9E; text-transform: uppercase; font-size: 0.8333em; margin-bottom: 10px; }
  
}

/* 5.1.4. Hotel main content, Flight main content */
#hotel-main-content, #flight-main-content, #cruise-main-content {
  .tab-content .tab-pane {
    padding: 0;
  }
  #calendar-tab {
    background: $dark-blue-theme-color; padding: 20px 30px;
    label, p { color: $light-blue-theme-color; }
    .description { padding-top: 30px; }
    .row { border: none; }
  }
  
  .calendar table {
    width: 100%; table-layout: fixed; margin-top: 20px;
    thead td { text-align: center; color: $yellow-theme-color; text-transform: uppercase; font-size: 0.8333em; text-indent: -5px; line-height: 3em; }
    tbody td {
      padding: 0 5px 5px 0; text-align: right; position: relative;
      > a, > span {
        border: 1px solid #da6161; display: block; color: #da6161; padding: 5px; line-height: 1em; height: 4.6666em; font-size: 1.1667em; position: relative;
        &:before { position: absolute; left: 0; top: 0; bottom: 0; right: 0; content: "NOT AVAILABLE"; background: #da6161; font-size: 10px; text-align: center; z-index: 1; line-height: 1; padding: 2.2em 5px 5px; color: #fff; display: none; cursor: default; }
        &:hover:before { display: block; }
      }
      &.available {
        > a, > span {
          border-color: $green-theme-color; color: $green-theme-color;
          &:before { background: $green-theme-color; content: "BOOK FROM"; cursor: pointer; }
        }
      }
      &.date-passed {
        > a, > span {
          border-color: $blue-theme-color; color: $blue-theme-color;
          &:before { background: $blue-theme-color; content: "DATE PASSED"; }
        }
      }
      .price-text { position: absolute; bottom: 5px; right: 5px; color: #fff; font-size: 0.8571em; }
    }
  }
  .calendar-legend {
    margin-top: 15px;
    label {
      text-transform: uppercase; font-weight: normal; letter-spacing: 0.04em; line-height: 15px; color: #fff !important; margin-right: 15px; font-size: 0.9167em;
      &:before { content: ""; display: block; float: left; width: 15px; height: 15px; border: 1px solid; margin-right: 4px; }
      &.available:before { border-color: $green-theme-color; }
      &.unavailable:before { border-color: #da6161; }
      &.past:before { border-color: $blue-theme-color; }
    }
  }
}
#hotel-description .intro, #hotel-reviews .intro, #hotel-write-review .intro, #car-details .intro, #flight-details .intro, #cruise-description .intro, #cruise-reviews .intro, #cruise-write-review .intro, #travel-guide .intro {
  background: #f5f5f5;
  &.table-wrapper {
    padding: 0; border-spacing: 15px; border-collapse: separate; table-layout: fixed;
    > * { border-collapse: collapse; }
    .table-cell {
      background: #fff;
      &:first-child { margin-bottom: 15px; }
      &:last-child { padding-left: 0; padding-right: 0; }
    }
  }
}
#hotel-features, #cruise-features {
  margin-top: 30px;
}
#hotel-description, #cruise-description, #travel-guide {
  .features {
    text-transform: uppercase; padding: 25px 20px; font-size: 0.8333em;
    li { line-height: 2em; }
    label { margin: 0; width: 110px; border-right: 1px solid #f5f5f5; margin-right: 20px; color: $skin-active-color; white-space: nowrap; }
  }
  .long-description { margin-top: 25px; padding: 0 15px; }
}
#hotel-availability, #cruise-availability {
  .update-search {
    border: 15px solid #f5f5f5; background: #fff; padding: 20px 20px 0; margin-bottom: 20px;
    [class^="col-"], [class*=" col-"] { 
      padding-left: 5px; padding-right: 5px;
      /*&:first-child { padding-left: 0; }
      &:last-child { padding-right: 0; }*/
    }
    .row { margin-left: -5px; margin-right: -5px; }
    > div { margin-bottom: 20px; }
  }
  .room-list {
    > article {
      margin: 20px 0 0; padding-bottom: 20px; border-bottom: 1px solid #f5f5f5;
      &:last-child { border-bottom: none; }
    }
    .load-more button { font-size: 1.3333em; }
    .box {
      .price-section, .action-section { padding-right: 0; }
      .price-section { border-bottom: none; }
      .action-section { vertical-align: bottom; a.button { padding: 0 20px; } }
    }
  }
}
#hotel-amenities, #inflight-features, #cruise-amenities {
  .amenities li { padding: 0; }
  .amenities.style1 li {
    margin-bottom: 1px;
    .icon-box { background: #f5f5f5; }
  }
  .amenities.style2 li {
    margin-bottom: 20px;
  }
}
#hotel-reviews, #cruise-reviews {
  .rating {
    padding: 20px 30px; background: #fff; text-align: center;
    .score { display: block; font-size: 5em; color: $heading-color; font-weight: 300; line-height: 1.25em; }
    .five-stars-container { font-size: 2.5em; margin-bottom: 20px; }
  }
  .detailed-rating { background: #fff; padding: 30px 0; li { padding: 0 25px; } }
  .guest-reviews {
    margin-top: 25px; margin-bottom: 30px;
    .comment-container { padding-left: 20px; }
  }
}
#hotel-faqs, #flight-fare-rules {
  .topics {
    margin-bottom: 30px;
    li {
      padding: 0; margin-bottom: 1px; border-right: 1px solid #fff; background: #f5f5f5; padding-left: 15px; line-height: 3.3333em; text-transform: uppercase; font-size: 0.9167em;
      a { color: inherit; }
      &.active { background: $skin-bg-color; }
    }
  }
}
.image-box.style2.activities {
  .details { padding-top: 10px; }
  &.innerstyle {
    margin-top: 20px;
    .details { padding-right: 0; }
  }
  .review-score {
    float: right; text-transform: uppercase;
    .reviews { font-size: 0.8333em; }
  }
  .five-stars-container { float: left; margin-right: 10px; }
  .details-header { border-bottom: 1px solid #f5f5f5; margin-bottom: 15px; }
  > * {
    padding-bottom: 15px; border-bottom: 1px solid #f5f5f5; margin-bottom: 20px;
    &:last-child { border-bottom: none; padding-bottom: 0; }
  }
  &.no-bottom-border > * { padding-bottom: 0; border-bottom: none; margin-bottom: 30px; }
}
#hotel-write-review, #cruise-write-review {
  .photo {
    padding: 0;
    .feedback { margin-top: 40px; }
    .details { padding-right: 15px; .review { letter-spacing: 0.04em; } }
  }
  .overall-rating { background: #fff; }
  .detailed-rating {
    margin-left: -20px; margin-right: -20px;
    li {
      padding: 0 20px;
      > .each-rating { border-top: 1px solid #F5F5F5; border-bottom: none; }
    }
  }
  .main-rating { margin-bottom: 20px; }
  
  .review-form {
    padding: 0 10px 10px;
    h4 { margin-bottom: 5px; }
    .form-group { margin-bottom: 20px; }
  }
  .sort-trip {
    li {
      float: left; margin-right: 20px; text-align: center;
      > a {}
      > span { font-weight: 500; font-size: 1.1667em; margin-top: 10px; line-height: 2.5em; }
      i { display: block; width: 70px; height: 70px; line-height: 70px; font-size: 2.3333em; color: #dbdbdb; }
      &.active {
        i { background: $skin-bg-color; color: #fff; border-color: $skin-bg-color; }
        > span { color: $skin-active-color; }
      }
      &:hover i { @include animation(sonarEffect, 1s, ease-out); }
    }
  }
}

.overall-rating {
  padding: 25px 30px;
  .star-rating {
    margin-bottom: 20px;
    .five-stars-container { font-size: 3em; line-height: 1em; float: left; }
    .status {
      text-transform: uppercase; display: block; float: left; line-height: 22px; height: 22px; background: $skin-bg-color; color: #fff; font-weight: bold; margin-top: 8px; position: relative; margin-left: 25px; padding: 0 15px 0 10px;
      &:before { display: block; content: ""; border-right: 15px solid $skin-bg-color; border-top: 11px solid transparent; border-bottom: 11px solid transparent; position: absolute; top: 0; left: -15px; }
    }
  }
}
.detailed-rating {
  text-transform: uppercase;
  li {
    display: block;
    > .each-rating { border-bottom: 1px solid #f5f5f5; display: block; padding: 8px 0 5px; }
    label { color: $skin-active-color; }
    .five-stars-container { float: right; color: #dbdbdb; }
  }
}
.guest-review {
  border-top: 1px solid #f5f5f5;
  &:last-child { border-bottom: 1px solid #f5f5f5; }
  .author {
    text-align: center; border-right: 1px solid #f5f5f5; padding-top: 25px; padding-bottom: 25px;
    > a { width: 74px; height: 74px; }
    img { width: 100%; height: 100%; }
    .name { color: $heading-color; font-size: 1.0833em; margin-bottom: 0; }
    .date { text-transform: uppercase; font-size: 0.8333em; }
  }
  .comment-container {
    padding-top: 25px; padding-bottom: 25px;
    .comment-title { color: $skin-active-color; float: left; font-style: italic; }
    .review-score {
      float: right;
      .score { font-size: 2em; margin-left: 10px; }
    }
    .comment-content p { line-height: 2em; }
  }
}

/* 5.1.5. Booking page */
.booking-section { padding: 20px 30px; }
.booking-form {
  label { font-size: 0.9167em; }
  .checkbox label { font-size: 1.0833em; }
  .form-group { margin-bottom: 0; > * { margin-bottom: 20px; } }
  .checkbox label { text-transform: none; }
  .person-information {}
}
.booking-details {
  figure {
    > a:first-child { width: 75px; height: 75px; float: left; }
    img { width: auto; height: 100%; }
    .travel-title {
      margin-left: 90px;
      .box-title {
        margin-bottom: 5px;
        &:after { display: none; }
      }
    }
  }
  .details { padding-left: 0; padding-right: 0; padding-top: 7px; }
  .timing {
    font-size: 0.8333em; text-transform: uppercase; text-align: right; line-height: 1.3333em; border-bottom: 1px solid #f5f5f5; padding: 10px 0 5px; margin: 0;
    .duration {
      font-weight: bold; color: $yellow-theme-color;
      > div { margin-top: 5px; }
    }
    .check-out { text-align: left; }
    label, span { display: block; line-height: 1.42; letter-spacing: 0.04em; }
    label { color: $skin-active-color; font-size: 1em; margin-bottom: 0; font-weight: normal; }
    i { font-size: 2em; }
  }
  .guest { border-bottom: 1px solid #f5f5f5; padding: 10px 0; }

  .other-details {
    font-size: 0.8333em; margin-bottom: 0; text-align: right; text-transform: uppercase;
    dt, dd { padding: 1.3em 0; border-top: 1px solid #f5f5f5; }
    dt { float: left; text-align: left; margin: 0; color: $skin-active-color; clear: both; }
    .total-price { font-size: 1.5em; color: $heading-color; text-transform: none; }
    .total-price-value { color: $green-theme-color; font-size: 1.4em; }
  }
}

/* 5.1.6. Thankyou page */
.booking-information {
  padding: 20px 30px 30px;
  > .booking-confirmation {
    > .icon { color: $skin-select-color; font-size: 1.5em; float: left; margin-right: 12px; margin-top: 4px; }
    > .message { float: left; }
    .main-message { color: $skin-active-color; margin-bottom: 0; letter-spacing: 0.04em; }
    .print-button { float: right; button { text-transform: uppercase; } }
    p { margin-bottom: 0; }
  }
  .view-link { font-size: 1.1667em; }
}

/* 5.2. Flight ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.flight-routes {
  &.image-box .box { margin-bottom: 10px; }
  .box {
    padding: 10px;
    figure {
      height: 40px; width: 40px; background: #f5f5f5; display: table;
      > a { display: table-cell; vertical-align: middle; text-align: center; }
      img { /*width: 70%;*/ max-width: 100%; }
    }
    .details { padding: 5px 0 0; margin-left: 55px; }
    .button { margin: 12px 5px 0 0; }
    .box-title { margin-bottom: 0; }
  }
}
.flight-list { margin-bottom: 0; }
.flight-booking-details {
  .details { padding: 0; margin-top: 10px; border-top: 1px solid #f5f5f5; }
}
.flight-detail-page {
  .detailed-logo .duration {
    font-size: 0.8333em; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid #f5f5f5; padding: 6px 0; margin-bottom: 10px;
    dl, dt, dd { display: inline-block; margin: 0; }
    dl { vertical-align: middle; }
    i { color: $yellow-theme-color; font-size: 20px; margin-right: 10px; line-height: 0; vertical-align: middle; }
  }
}
#flight-details, #car-details {
  .term-description {
    margin: 0; font-size: 0.8333em;
    dt, dd { line-height: 1.1667em; }
  }
  .travelo-box { padding: 25px 25px 20px 25px; margin: 0; }
}
#flight-details {
  .detailed-features { background: #fff; }
  .box-title { margin: 0; }
  .flights {
    width: 100%; padding-bottom: 30px; border-collapse: separate; border-spacing: 0;
    .timing {
      padding: 0; border: none; display: table; margin: 0 auto;
      > div { display: table-cell; vertical-align: middle; text-align: center; padding: 0 7px; }
    }
    .table-cell {
      border-top: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5; padding: 20px 5px; text-align: center; vertical-align: middle;
      &:last-child { border-right: none; }
    }
    .logo {
      label { display: block; font-weight: normal; font-size: 0.8333em; text-transform: uppercase; line-height: 1em; }
      img { max-width: 84px; height: auto; }
    }
    .timing-detail { position: relative; }
    .first-flight {
      .logo { position: relative; }
      .logo:after { content: "\e883"; font-family: "soap-icons"; font-size: 24px; position: absolute; display: inline-block; width: 10px; text-align: center; height: 30px; line-height: 30px; right: -5px; bottom: -15px; z-index: 9; color: $red-theme-color; }
    }
    .layover { position: absolute; display: inline-block; text-transform: uppercase; font-weight: normal; background: #f5f5f5; width: 100px; height: 20px; line-height: 20px; font-size: 0.75em; left: 50%; margin: 0 0 0 -50px; bottom: -10px; z-index: 9; letter-spacing: 0.04em; }
  }
}

#flight-baggage {
  form .checkbox label { font-size: 0.8333em; text-transform: uppercase; }
  .baggage .icon-box {
    cursor: default;
    .box-title { color: $primary-color; }
    &:hover {
      .box-title { color: $heading-color; }
      i { @include animation(sonarEffect, 1.3s, ease-out, 75ms); }
    }
  }
}

/* 5.3. Car ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.explore-more {
  padding: 10px 0 0 4px;
  .intro {
    text-transform: none; margin-bottom: 19px; margin-left: 12px;
    i { float: left; margin-right: 10px; color: $skin-active-color; font-size: 16px; }
    .box-title small { margin-bottom: 3px; }
  }
  .box {
    margin: 0; padding-right: 4px; width: 50%; float: left; margin-bottom: 4px;
    figure figcaption { text-transform: uppercase; padding-right: 20px; }
  }
}
.car-list { margin-top: 30px; margin-bottom: 10px; }

.car-detail-page {
  .featured-image img { width: 100%; height: auto; }

  .detailed-logo {
    .mile { border-bottom: 1px solid #f5f5f5; padding: 8px 0; margin-bottom: 10px; font-size: 0.8333em; text-transform: uppercase; }
  }
}

#car-details {
  .detailed-features {
    background: #fff;
    > [class^="col-"] { padding: 0 0 10px 0; &:first-child { border-right: 1px solid #f5f5f5; } }
    .box-title { padding: 25px 0 25px 25px; border-bottom: 1px solid #f5f5f5; }
    .icon-box { margin: 15px 0 30px 20px; }
  }
  .car-features .icon-box {
    color: inherit; margin-bottom: 10px; 
    > i { color: $skin-active-color; }
  }
  .protect-passengers {
    .icon-box { margin-bottom: 15px; }
    label { font-size: 0.8333em; font-weight: normal; text-transform: uppercase; }
  }
  .car-damage {
    .logo img { max-height: 25px; width: auto; }
    .radio { margin: 0; line-height: 20px; font-size: 0.8333em; text-transform: uppercase; margin-bottom: 10px; }
  }
}

.booking-details .car-detail {
  border-bottom: 1px solid #f5f5f5; margin-bottom: 20px;
  .icon-box {
    padding-bottom: 10px; padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }
}

/* 5.4. Cruise ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.top-cruise-destinations {
  .details {
    padding: 15px 20px !important;
    li { font-size: 0.8333em; text-transform: uppercase; }
    .row > div {
      border-right: 1px solid #f5f5f5;
      &:last-child { border-right: none; }
    }
  }
}
.cruise-line-deals {
  padding-top: 0;
  .row {
    margin-bottom: -1px; overflow: hidden;
    > div { border-bottom: 1px solid #f5f5f5; }
  }
  .box-title small { color: $skin-active-color; }
  .box {
    margin-bottom: 10px; margin-top: 20px;
    figure {
      background: #f5f5f5; text-align: center; height: 70px; display: table; width: 100%; table-layout: fixed;
      .image-wrapper { display: table-cell; vertical-align: middle; }
      img { max-width: 66.6666%; width: auto; height: auto; }
    }
    .details { padding-left: 0; padding-right: 0; }
    .price { font-size: 1.3333em; small { font-size: 0.625em; } }
  }
}

.cruise-booking-form {
  .radio {
    margin-top: 6px; text-transform: none;
    &:first-child { margin-left: 0; }
  }
}

#cruise-description .intro li { line-height: 2.5em; }
.cruise-itinerary {
  .travelo-box { margin: 0; }
  table { width: 100%; }
  th { color: $skin-active-color; font-weight: normal; padding-bottom: 10px; }
  td { font-size: 0.8333em; text-transform: uppercase; line-height: 3.8333em; border-top: 1px solid #f5f5f5; vertical-align: middle; }
}

#hotel-availability .room-list , #cruise-availability .room-list, #cruise-food-dinning .food-dinning-list {
  .box figure { margin-bottom: 5px; }
  .details { padding-top: 0; padding-bottom: 0; }
  .box-title {
    .title { margin-bottom: 3px; }
    dl { margin: 0; &:after { content: ""; display: table; clear: both; } }
    dt, dd { float: left; font-size: 0.8333em; text-transform: uppercase; }
    dt { color: $skin-active-color; margin-right: 5px; clear: both; }
  }
}
#cruise-food-dinning .food-dinning-list {
  hr { margin-top: 15px; margin-bottom: 15px; }
  .details { text-transform: none; padding: 0; }
  figure { margin: 0 20px 10px 0; }
  .box-title {
    margin: 0 0 5px 0;
    dl:after { display: none; clear: none; }
    dt { clear: none; }
    dd { float: none; }
  }
  .review-score {
    float: right; margin-top: 6px;
    .five-stars-container { vertical-align: middle; margin-right: 5px; }
    .review { vertical-align: middle; color: #9e9e9e; text-transform: uppercase; font-size: 0.8333em; }
  }
  .box {
    border-bottom: 1px solid #f5f5f5; margin-bottom: 15px; padding-bottom: 10px;
    &:last-child { border-bottom: none; } 
  }
}
#cruise-reviews .guest-review .comment-title { font-style: normal; color: $heading-color; }

/* 6. Dashboard ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 6.1. Default ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dashboard, .post-404page, .coming-soon-page, .loading-page, .soap-login-page {
  #header .logo, #footer .logo {
    a { background: none; }
    img { @include opacity(1); }
  }
}

.dashboard #header .logo {
  img { height: 22px; }
}

#dashboard {
  .fact {
    color: #fff; margin-bottom: 20px;
    .numbers {
      padding: 25px 15px;
      dl { float: right; text-align: right; margin: 0; }
      dt { font-size: 2em; font-weight: 400; line-height: 1em; }
      dd { font-size: 1.3333em; }
      .icon { font-size: 4em; }
    }
    .description {
      font-size: 0.8333em; text-transform: uppercase; padding: 0 20px; font-weight: bold; line-height: 3em;
      > .icon { float: right; font-size: 2em; }
    }
    &.blue {
      background: $blue-theme-color;
      .description { background: #04afe7; }
    }
    &.yellow {
      background: $yellow-theme-color;
      .description { background: #f5b010; }
    }
    &.red {
      background: $red-theme-color;
      .description { background: #d51a32; }
    }
    &.green {
      background: $green-theme-color;
      .description { background: #91c63d; }
    }
  }
  
  .notifications {
    .icon-box { background: #f5f5f5; font-size: 1em; padding-right: 15px; margin-bottom: 10px; height: auto; &:after { display: table; content: ""; clear: both; } }
    .box-title { line-height: 1em; text-transform: none; color: $heading-color; padding: 14px 5px 15px 57px; }
    .price { color: $skin-active-color; float: none; text-align: left; display: inline; font-size: inherit; }
    .time { line-height: inherit; }
    .load-more { font-size: 2.5em; text-align: center; color: #d9d9d9; }
  }
  .recent-activity {
    background: #f5f5f5;
    padding: 15px;
    ul {
      background: #fff; margin-bottom: 15px;
      li > a {
        padding: 15px; border-bottom: 1px solid #f5f5f5; display: block;
        &:hover { background: #f5f5f5; }
      }
      .icon { float: left; margin-right: 15px; font-size: 1.3333em; }
    }
  }
}

/* 6.1.1. User profile */
#profile {
  .personal-details {
    .details { padding-top: 0; padding-right: 0; }
    figure { margin-bottom: 20px; }
    .term-description { margin-bottom: 0; }
  }
  .edit-profile { display: none; }
  .term-description {
    dt, dd { float: none; display: inline-block; float: none; width: 50%; vertical-align: top; }
    dt { clear: none; }
    dd { padding-left: 30px;  }
  }
}

.dashboard .benefits > li { font-size: 1.0833em; line-height: 2.6667em; }

/* 6.1.2. Booking history */
#booking {
  .filter-section {
    padding: 10px 15px 5px 5px; margin-bottom: 30px;
    label.radio{ 
      margin-top: 4px;
      &:before { border: none; line-height: 14px; }
    }
    button { margin-left: 8px; font-weight: 400; margin-bottom: 5px; }
    .action { 
      width: auto; padding: 0 !important;
      h5 { width: auto; line-height: 28px; }
    }
  }
  .booking-info {
    border-top: 1px solid #f5f5f5; padding: 10px;
    &:last-child { border-bottom: 1px solid #f5f5f5; }
    div.date {
      width: 72px; height: 72px; background: #f5f5f5; text-align: center; float: left; margin-right: 20px;
      > {
        * { margin: 0; display: block; }
        .month { background: #e44049; height: 20px; line-height: 20px; font-size: 0.8333em; color: #fff; }
        .date { font-size: 2em; line-height: 1em; color: #e44049; font-weight: bold; margin-top: 6px; }
        .day { font-size: 0.8333em; font-weight: normal; line-height: 1.25em; }
      }
    }
    .box-title, .status { margin-top: 20px; }
    .icon { font-size: 1.0833em; float: left; margin-right: 10px; }
    .box-title { float: left; small { padding-left: 43px; } }
    .status { float: right; margin-right: 15px; background: $green-theme-color; }
    .info {
      float: right; padding-left: 15px; border-left: 1px solid #f5f5f5; text-transform: uppercase; padding-top: 2px; margin-bottom: 0; width: 140px;
      * { font-size: 0.8333em; font-weight: normal; }
      dt { color: #e44049; }
    }
    &.cancelled {
      div.date {
        > .month { background: #d9d9d9; }
        > .date, > .day { color: #d9d9d9; }
      }
      .icon, .icon:before { border-color: #d9d9d9; color: #d9d9d9; }
      .status { background: #d9d9d9; }
      .info dt { color: inherit; }
    }
  }
}
#wishlist {
  .image-box .box {
    background: #f5f5f5;
    .details { padding-right: 15px; }
  }
}
#settings {
  form button { width: 200px; }
}

/* 6.2. Style1 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dashboard, .post-404page, .soap-login-page {
  #header {
    padding-top: 45px;
    .logo { margin: 0; }
    .quick-menu .ribbon > a { color: #fff; font-size: 0.8333em; font-weight: bold; letter-spacing: 0.04em; line-height: 30px; display: block; }
  }
  #content { background: none; }
  #footer .footer-wrapper {
    padding-top: 40px; padding-bottom: 50px;
    .copyright { margin: 0; }
    .main-menu.tab-container.full-width-style .tab-content { background: none; text-align: center; }
    #main-menu ul.menu > li {
      > a { font-weight: normal; }
      &:hover, &.active { > a { font-weight: bold; } }
      &.active > a:before { display: block; font-family: "soap-icons"; content: "\e883"; position: absolute; top: -20px; left: 50%; margin-left: -3px; font-size: 20px; color: $yellow-theme-color; }
      &:first-child.active > a:before { margin-left: -13px; }
    }
  }
}
.dashboard.style1, .post-404page.style1, .soap-login-page.style1 {
  background-color: #1a232f; 
  background-image: -moz-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
  background-image: -webkit-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
  background-image: -o-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
  background-image: -ms-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
  background-image: radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
  #content ul.tabs li {
    a { background: rgba(13, 18, 24, 0.6); color: #708bac; i { border-color: #708bac; color: #708bac; } }
    &.active a { background: #fff; color: $heading-color; i { border-color: $yellow-theme-color; color: $yellow-theme-color; } }
  }
  #footer {
    .copyright { color: #384c63; }
    #main-menu ul.menu > li {
      > a { color: #7c9abd; }
      &:hover, &.active { > a { color: $blue-theme-color; } }
    }
  }
}

/* 6.3. Style2 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dashboard.style2, .post-404page.style2 {
  background-color: #f45533; 
  background-image: -moz-radial-gradient(center center, circle cover, rgba(244, 85, 51, 1), #bd0000 100%);
  background-image: -webkit-radial-gradient(center center, circle cover, rgba(244, 85, 51, 1), #bd0000 100%);
  background-image: -o-radial-gradient(center center, circle cover, rgba(244, 85, 51, 1), #bd0000 100%);
  background-image: -ms-radial-gradient(center center, circle cover, rgba(244, 85, 51, 1), #bd0000 100%);
  background-image: radial-gradient(center center, circle cover, rgba(244, 85, 51, 1), #bd0000 100%);
  #content ul.tabs li {
    a { background: rgba(189, 0, 0, 0.7); color: $yellow-theme-color; i { border-color: $yellow-theme-color; color: $yellow-theme-color; } }
    &.active a { background: #fff; color: $heading-color; i { border-color: $yellow-theme-color; color: $yellow-theme-color; } }
  }
  #footer {
    .copyright { color: $yellow-theme-color; }
    #main-menu ul.menu > li {
      > a { color: $yellow-theme-color; }
      &:hover, &.active { > a { color: #fff; } }
    }
  }
}


/* 7. jQuery UI Elements ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 7.1. UI Slider ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.ui-slider {
  position: relative; text-align: left;
  &.ui-slider-horizontal {
    height: 10px;
    .ui-slider-range { height: 100%; }
    .ui-slider-handle { margin-left: -10px; top: -5px; }
  }
  &.ui-widget-content { @include border-radius(5px, 5px, 5px, 5px); background: #f5f5f5; }
  .ui-slider-range { display: block; position: absolute; z-index: 1; border: none; background: $skin-bg-color; @include border-radius(5px, 5px, 5px, 5px); }
  &.slider-color-yellow .ui-slider-range { background: $yellow-theme-color; }
  &.slider-color-blue .ui-slider-range { background: $blue-theme-color; }
  &.slider-color-green .ui-slider-range { background: $green-theme-color; }
  .ui-slider-handle { cursor: default; position: absolute; z-index: 2; width: 20px; height: 20px; @include border-radius(50%, 50%, 50%, 50%); background: $skin-dark-color; border: 2px solid #fff; }
} 

.filters-container #rating { font-size: 24px; }
.filters-container #rating, .editable-rating {
  display: inline-block;
  &.ui-widget-content { background: none; @include border-radius(0, 0, 0, 0); }
  &.ui-slider-horizontal {
    height: auto;
    .ui-slider-handle { margin: 0; width: 0; height: 0; padding: 0; top: 0; visibility: hidden; }
  }
}

/* 7.2. DatePicker ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
button.ui-button::-moz-focus-inner { border: 0; padding: 0; }

.datepicker-wrap {
  position: relative;
  .ui-datepicker-trigger {
    width: 30px; height: 100%; position: absolute; right: 0; top: 0; cursor: pointer; background-color: transparent; z-index: 1; @include opacity(0);
  }
  &:after { display: block; font-family: "soap-icons"; content: "\e86a"; font-size: 25px; color: #fff; position: absolute; right: 0; top: 0; bottom: 0; width: 30px; height: 100%; text-align: center; line-height: 34px; background: $skin-select-color; }
  &.yellow:after { background: $yellow-theme-color; }
  &.green:after { background: $green-theme-color; }
  &.blue:after { background-color: $blue-theme-color; }
  &.dark-blue:after { background-color: $dark-blue-theme-color; }
  &.transparent:after { background-color: transparent; color: $skin-select-color; }
}

.ui-datepicker { 
  width: 20em; padding: 0; display: none; background: #fff; border: 1px solid $skin-select-color; z-index: 101 !important;
  .ui-datepicker-header { position: relative; padding: .2em 0; background: $skin-select-color; }
  .ui-datepicker-prev, .ui-datepicker-next {
    position: absolute; top: 11px;  cursor: pointer;
    &.ui-state-disabled { visibility: hidden; }
    &:before { content: ""; display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  }
  .ui-datepicker-prev {
    left: 24px;
    &:before { border-right: 8px solid #fff; }
  }
  .ui-datepicker-next {
    right: 24px;
    &:before { border-left: 8px solid #fff; }
  }
  .ui-datepicker-prev span, .ui-datepicker-next span { display: none; }
  
  .ui-datepicker-title { margin: 5px; text-align: center; color: #fff; font-size: 1.1667em; font-weight: bold; }
  .ui-datepicker-title select { font-size: 1em; margin: 1px 0; }
  select.ui-datepicker-month-year { width: 100%; }
  select.ui-datepicker-month, 
  select.ui-datepicker-year { width: 49%; }
  table { width: 100%; font-size: 12px; border-collapse: collapse; }
  th { width: 30px; height: 30px; line-height: 30px; background: #f5f5f5; }
  th span  { display: block;text-align: center; font-size: 1.1667em; font-weight: normal; color: $skin-select-color; }
  span.ui-datepicker-month { font-weight: bold; }
  .ui-datepicker-calendar td {
    vertical-align: middle; text-align: center;
    a, span { color: inherit; display: block; height: 30px; line-height: 30px; }
    &.ui-state-disabled span { color: #dbdbdb; }
    &.ui-datepicker-today a, a:hover { background: $skin-select-color; color: #fff; }
    &.ui-state-disabled span {  }
  }
  
  &.yellow {
    border: 1px solid $yellow-theme-color;
    .ui-datepicker-header { background: $yellow-theme-color; }
    th span { color: $yellow-theme-color; }
    .ui-datepicker-calendar td {
      &.ui-datepicker-today a, a:hover { background: $yellow-theme-color; }
    }
  }
  &.green {
    border: 1px solid $green-theme-color;
    .ui-datepicker-header { background: $green-theme-color; }
    th span { color: $green-theme-color; }
    .ui-datepicker-calendar td {
      &.ui-datepicker-today a, a:hover { background: $green-theme-color; }
    }
  }
  &.blue {
    border: 1px solid $blue-theme-color;
    .ui-datepicker-header { background: $blue-theme-color; }
    th span { color: $blue-theme-color; }
    .ui-datepicker-calendar td {
      &.ui-datepicker-today a, a:hover { background: $blue-theme-color; }
    }
  }
  &.dark-blue {
    border: 1px solid $dark-blue-theme-color;
    .ui-datepicker-header { background: $dark-blue-theme-color; }
    th span { color: $dark-blue-theme-color; }
    .ui-datepicker-calendar td {
      &.ui-datepicker-today a, a:hover { background: $dark-blue-theme-color; }
    }
  }
}

/* 8. Footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer {
  .footer-wrapper {
    padding: 80px 0;
    > .container > .row > div { margin-top: 20px; }
  }
  .discover li { line-height: 2.6667em; font-size: 1.0833em; }
  h2 { margin-bottom: 20px; }
  .travel-news {
    li {
      margin-bottom: 30px;
      .s-title { margin-bottom: 5px; }
      .date { color: #9e9e9e; }
      .thumb { float: left; width: 70px; }
      &:after { clear: both; content: " "; display: table; }
      .description {
        padding-left: 78px;
        span.date { display: block; margin-top: 5px; font-size: 0.9133em; }
      }
    }
  }
  
  .bottom {
    height: 60px;
    .logo { margin: 18px 0 0; }
    .copyright { font-size: 1.0833em; margin: 23px 20px 0; }
    #back-to-top {
      margin-top: 20px; display: block; font-size: 16px; color: $heading-color;
      i { border-color: $skin-bg-color; font-weight: bold; overflow: hidden; }
      &:hover > i:before { @include animation(toTopFromBottom, 0.3s, forwards); display: inline-block; }
    }
  }

  &.style1 {
    background: url("../images/themes/footer/style01/sand.png") no-repeat center top; padding-top: 132px; margin-top: 40px;
    .footer-wrapper { background: #f5e1ba; padding-top: 0; }
    p, span, input, li, .travel-news li .date { color: #c29f5a; }

    .social-icons li {
      a { background: #e6c687; }
      &:hover a { background: $red-theme-color; }
    }
    ul.triangle li {
      &:before { color: #c29f5a; }
      &:hover:before, &:hover a, &.active:before, &.active a { color: $heading-color; }
    }
    .travel-news li .title, .contact-details .contact-email, .contact-details .contact-phone i { color: $heading-color; }
    .travel-news .s-title {
      color: $heading-color;
      a:hover { color: $red-theme-color; }
    }
    h2, .contact-details .contact-phone { color: $red-theme-color; }
    .footer-wrapper > .container:first-child {
      position: relative; padding-top: 80px;
      &:before, &:after { content: ""; display: block; position: absolute; background-repeat: no-repeat; }
      &:before { width: 113px; height: 61px; top: -77px; left: 0; background-image: url("http://placehold.it/113x61"); }
      &:after { width: 197px; height: 144px; top: -148px; right: 0; background-image: url("http://placehold.it/197x144"); }
    }
    .bottom { background: #fff; }
    .logo a { background-image: url($skin2-logo); }
    .copyright p { color: #9e9e9e; }
    #back-to-top i { border-color: $red-theme-color; }
  }

  &.style2 {
    background: url("../images/themes/footer/style02/sky.png") no-repeat center top; padding-top: 132px; margin-top: 80px;
    .footer-wrapper { background: #daf8ff; padding-top: 0; }
    p, span, input, .contact-details .contact-phone, li { color: #12a0c3; }
    .travel-news li .date { color: #69c9e0; }
    .travel-news .s-title {
      color: $orange-color;
      a:hover { color: $dark-orange-color; }
    }
    .social-icons li {
      a { background: #95e0f2; }
      &:hover a { background: $orange-color; }
    }
    ul.triangle li {
      &:before { color: #95e0f2; }
      &:hover:before, &:hover a, &.active:before, &.active a { color: $orange-color; }
    }
    .travel-news li .title, .contact-details .contact-email, .contact-details .contact-phone i { color: $orange-color; }
    
    .footer-wrapper > .container:first-child {
      position: relative; padding-top: 80px;
      &:before, &:after { content: ""; display: block; position: absolute; background-repeat: no-repeat; }
      &:before { width: 463px; height: 167px; top: -175px; left: -20px; background-image: url("http://placehold.it/463x167"); }
      &:after { width: 241px; height: 184px; top: -168px; right: 0; background-image: url("http://placehold.it/241x184"); }
    }
    .bottom { background: #fff; }
    .logo a { background-image: url($skin3-logo); }
    .copyright p { color: #9e9e9e; }
    #back-to-top i { border-color: $orange-color; }
  }

  &.style3 {
    background: url("../images/themes/footer/style03/sea.png") no-repeat center 60px #f8f7f3; padding-top: 192px;
    .footer-wrapper { padding-top: 0; }
    .social-icons li a { background: #e5e0cd; }
    p, span, input, .contact-details .contact-phone, li { color: #98a3ab; }
    input { background: #fff; }
    ul.triangle li {
      &:before {  }
      &:hover:before, &:hover a, &.active:before, &.active a { color: $orange-color; }
    }
    .social-icons li {
      a { background: #e5e0cd; }
      &:hover a { background: $orange-color; }
    }
    .travel-news li .title, .contact-details .contact-email, .contact-details .contact-phone i { color: $orange-color; }
    .travel-news .s-title {
      color: $orange-color;
      a:hover { color: $dark-orange-color; }
    }
    h2, .contact-details .contact-phone { color: #12a0c3; }
    
    .footer-wrapper > .container:first-child {
      position: relative; padding-top: 80px;
      &:before, &:after { content: ""; display: block; position: absolute; background-repeat: no-repeat; }
      &:before { width: 183px; height: 81px; top: -100px; left: -50px; background-image: url("http://placehold.it/183x81"); }
      &:after { width: 210px; height: 203px; top: -133px; right: 0; background-image: url("http://placehold.it/210x203"); }
    }
    .bottom { background: #fff; }
    .logo a { background-image: url($skin3-logo); }
    .copyright p { color: #9e9e9e; }
    #back-to-top i { border-color: $orange-color; color: #12a0c3; }
  }

  &.style4 {
    > .footer-wrapper {
      background: url("../images/themes/footer/style04/sky.png") no-repeat center bottom; padding-bottom: 0;
      > .container:first-child {
        position: relative; padding-bottom: 180px;
        &:before, &:after { content: ""; display: block; position: absolute; background-repeat: no-repeat; }
        &:before { width: 267px; height: 166px; bottom: 20px; left: -30px; background-image: url("http://placehold.it/267x166"); }
        &:after { width: 1171px; height: 158px; bottom: 0; right: 0; background-image: url("http://placehold.it/1171x158"); }
      }
    }
    .bottom { margin-top: 0; }
  }

  &.style5 {
    > .footer-wrapper {
      background: url("../images/themes/footer/style05/sky.png") no-repeat center bottom; padding-bottom: 0;
      > .container:first-child {
        position: relative; padding-bottom: 150px;
        &:before, &:after { content: ""; display: block; position: absolute; background-repeat: no-repeat; }
        &:before { width: 463px; height: 105px; bottom: 0; left: 0; background-image: url("http://placehold.it/463x105"); }
        &:after { width: 297px; height: 145px; bottom: 0; right: 0; background-image: url("http://placehold.it/297x145"); }
      }
    }
    .bottom { margin-top: 0; }
  }

  &.style6 {
    > .footer-wrapper {
      background: url("../images/themes/footer/style06/sky.png") no-repeat center bottom; padding-bottom: 0;
      > .container:first-child {
        position: relative; padding-bottom: 180px;
        &:before, &:after { content: ""; display: block; position: absolute; background-repeat: no-repeat; }
        &:before { width: 115px; height: 130px; bottom: 0; left: 0; background-image: url("http://placehold.it/115x130"); }
        &:after { width: 153px; height: 149px; bottom: 0; right: 0; background-image: url("http://placehold.it/153x149"); }
      }
    }
    .bottom { margin-top: 0; }
  }
}



/* 9. Page Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 9.1. Home page content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* 9.1.1. Popular Destinations Section */
.destinations {
  text-align: left;
}

/* 9.1.2. Honeymoon section */
.honeymoon {
  padding: 0.01px; text-align: left;
  .content-section {
    padding: 50px 0;
    .places {
      margin-top: 40px;
      figure a { height: 175px; }
      img { height: 100%; width: auto; min-width: 100%; }
    }
  }
  .container { position: relative; }
  .image-container {
  }
}

/* 9.1.3. Offers Section */
.offers {
  p { margin-bottom: 50px; }
}

/* 9.1.4. Features Section */
.features {
}

/* 9.1.5. Mobile Section */
.mobile-section {
  .table-wrapper { table-layout: fixed; width: 100%; }
  .description { vertical-align: middle; }
  .image-wrapper { vertical-align: bottom; padding-top: 50px; img { max-width: 100%; } }
}

.travelo-process {
  display: inline-block; position: relative; padding: 0 !important; float: none !important;
  img { max-width: 100%; margin-bottom: 2px; }
  .process {
    display: inline-block; position: absolute; /*table-layout: fixed;*/ width: 100%; margin-top: -32.4px; margin-left: -32.4px; margin-right: -32.4px;
    .icon-wrapper {
      vertical-align: top;
      i { display: block; font-size: 36px; }
    }
    .details { min-width: 250px; width: 100%; }
    &.first { top: 14.6446%; right: 85.3554%; margin-left: 0; text-align: right; .details { padding-right: 8%; padding-left: 0; } }
    &.second { top: 14.6446%; left: 85.3554%; margin-right: 0; text-align: left; .details { padding-left: 8%; padding-right: 0; } }
    &.third { top: 85.3554%; left: 85.3554%; margin-right: 0; text-align: left; .details { padding-left: 8%; padding-right: 0; } }
    &.forth { top: 85.3554%; right: 85.3554%; margin-left: 0; text-align: right; .details { padding-right: 8%; padding-left: 0; } }
  }
}

/* 9.1.6. Homepage 9 */
#content.image-bg1 { background: url('http://placehold.it/2080x1362') no-repeat center center; min-height: 880px; }

/* 9.2. Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.investor-list {
  img { @include desaturate(); @include opacity(0.4); max-width: 100%; @include transition(opacity, 0.25s, ease-in); }
  .travelo-box {
    height: 100px; display: table; width: 100%; table-layout: fixed; padding: 0 10px;
    > a {
      display: table-cell; vertical-align: middle; text-align: center; overflow: hidden;
      &:hover > img { @include remove-desaturate(); @include opacity(1); /*@include animation(toBottomFromTop, 0.3s, forwards);*/ }
    }
  }
}

/* 9.2.1. Service page */
.service-page {
  .service-list {
    .icon-box {
      cursor: pointer;
      &:hover i {
        overflow: hidden; /*color: $skin-active-color; background: none;*/
        &:before { @include animation(toTopFromBottom, 0.35s, forwards); }
      }
    }
  }
  .services {
    margin-top: -1px; margin-right: -5px;
    article {
      cursor: pointer; border-top: 1px solid #f5f5f5; border-right: 1px solid #f5f5f5; margin: 0; padding: 15px;
      > i { background: $skin-active-color; @include transition(all, 0.4s, ease-in); overflow: hidden; }
      &:hover > i {
        box-shadow: 0 0 0 4px $skin-active-color; background: #fff; color: $skin-active-color;
        &:before { @include animation(toTopFromBottom, 0.4s, forwards); }
      }
    }
  }
}

/* 9.2.2. Photo gallery page */
.gallery-filter {
  a.button { min-width: 60px; padding: 0 10px; text-transform: uppercase; margin-right: 8px; font-size: 0.9167em; margin-bottom: 10px; }
}
.items-container {
  margin-bottom: 0;
  .box:hover {
    .hover-effect {
      &:after { visibility: visible; @include transform(rotateY(0deg) scale(1,1)); @include opacity(1); }
      img { @include transform(scale(1.2)); }
    }
    .details {
      background: $skin-bg-color;
      .box-title {
        color: #fff;
        small { color: #fff; @include opacity(0.5); }
      }
    }
  }
}

/* 9.2.3. Blog page */
.filters-container ul.categories-filter {
  li {
    padding: 0; background: none; border-bottom: 1px solid #f5f5f5;
    &.active {
      background: none;
      &:before { background: $skin-bg-color; color: #fff; }
      a { color: $heading-color; small { color: $skin-active-color; } }
    }
  }
}

/* 9.2.4. Faq page */
.faqs {
  .search-questions { margin-bottom: 4px; }
  .faq-topics .filters-option { margin-bottom: 0; }

  .question-list .panel {
    border-bottom-width: 4px;
    .panel-title {
      padding-left: 30px;
      > a:before { float: right; }
    }
    .panel-content { padding-left: 30px; }
  }
  .faq-comment-container {
    padding: 0; border-top: 4px solid #f5f5f5;
    .question { float: left; height: 28px; line-height: 28px; margin-right: 20px; margin-bottom: 0; }
    .faq-comment-header {
      border-bottom: 1px solid #f5f5f5; padding: 10px 30px;
      .button {
        padding: 0 20px; margin-right: 10px;
        &.active { background: $yellow-theme-color; }
      }
    }
    .fag-comment-content { padding: 25px 30px; }
  }

  &.style1 {
    .filters-container { padding-bottom: 0; }
    .filters-option {
      li {
        margin-bottom: 0; border-bottom: 1px solid #f5f5f5; background: none; padding: 0;
        &.active {
          background: none;
          a { color: $skin-active-color; }
        }
        &:last-child { border: none; }
      }
    }
    .question-list{
      padding: 10px 30px;
      .panel {
        border-bottom-width: 1px;
        .panel-title {
          padding-left: 0; padding-right: 0;
          a:before { width: 16px; height: 16px; line-height: 16px; font-size: 8px; margin-right: 0; }
        }
        .panel-content { padding-left: 0; padding-right: 20px; }
      }
    }
  }
}

/* 9.2.5. Contact us page */
.travelo-google-map {
  height: 255px;
  &.full-box { height: 400px; }
}
.contact-form {
  label { font-size: 0.8333em; margin-bottom: 3px; }
}

/* 9.2.6. Travelo polices page */
.travelo-policies.style1 {
  ul.tabs {
    border-bottom: none;
  }
  hr { margin: 20px -20px; }
}
.travelo-policies .policy { padding: 0 10px; margin: 40px 0; }

/* 9.2.7. Sitemap page */
.sitemap {
  .column {
    border: 1px solid $skin-bg-color; border-left: none; position: relative; margin-bottom: 40px; margin-right: 10px; margin-top: 10px;
    .title { font-weight: bold; text-transform: uppercase; display: inline-block; padding-right: 10px; position: absolute; top: -8px; left: 0; background: #f5f5f5; }
    &.sitemap-columns-2 {
      > ul {
        width: 48%; float: left; border-right: 1px solid $skin-active-color;
        &:last-child { border: none; }
      }
    }
    ul { font-size: 1em; }
    li { line-height: 3em; }

    > ul { margin: 20px 0 10px; }
    > ul > li { padding-left: 15px; }
    > ul.circle > li { padding-left: 0; }
    li.parent > a, li.parent > span { font-weight: bold; font-size: 0.9167em; text-transform: uppercase; }
  }
}

/* 9.3. Special Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 9.3.1. 404 page */
.post-404page {
  .footer-wrapper { text-align: center; }
  footer #main-menu { margin: 0 auto; }
  #header { padding-top: 150px; text-align: center; }
  .logo { display: inline-block; }
  #main { margin: 0; }
  .error-message { font-size: 4.1667em; font-weight: 300; line-height: 1.25em; text-align: center; color: $yellow-theme-color; }
  .error-message-404 { font-family: "Roboto"; font-weight: 100; font-size: 25em; text-align: center; color: $blue-theme-color; line-height: 1.0833em; }
  &.style1 {
    #header .logo img { @include opacity(1, true); }
  }
  &.style2 {
    #main { text-align: center; }
    #content { padding: 0; }
    .error-message { font-size: 2.5em; color: #fff; text-shadow: 0 6px 6px rgba(0, 0, 0, 0.3); font-weight: 400; }
    .error-message-404 img { width: 80%; margin: 40px auto; }
    .go-back {
      display: inline-block; font-size: 2.0833em; font-weight: 900; color: #f45533; background: #fff; height: 70px; line-height: 70px; @include border-radius(35px, 35px, 35px, 35px); padding-right: 30px; box-shadow: 0 10px 8px rgba(0, 0, 0, 0.3); letter-spacing: -0.02em; overflow: hidden;
      i { background: #f45533; color: #fff; margin-right: 20px; }
      &:hover i { @include animation(fadeInRight, 0.4s, ease-in); }
    }
  }
  &.style3 {
    height: 100%; background: url('http://placehold.it/2080x1110') no-repeat center bottom/* #114790*/;
    #page-wrapper, .wrapper, #content, #content .container { height: 100%; }
    #content { padding: 0; }
    #main { position: relative; z-index: 2; }
    #page-wrapper { background: url('http://placehold.it/2080x645') no-repeat center bottom; }
    .wrapper { background: url('http://placehold.it/680x395') no-repeat right top; background-size: 33% auto; }
    .container { position: relative; background: url('http://placehold.it/267x310') no-repeat left bottom; background-size: 22% auto; }
    #main { padding-top: 120px; text-align: center; }
    .logo { display: inline-block; }
    .error-message { font-weight: 300; font-size: 4em; color: #fff; }
    .error-message-404 { margin: 30px 0; font-family: inherit; color: #fff; font-weight: 300; font-size: 2.5em; strong { font-weight: 400; } }
    .input-text { background: none; border: 1px solid #fff; color: #fff; font-size: 1.3333em; }
    .with-icon .icon i { color: #fff; }
    .go-back {
      background: none; border: 1px solid #fff; color: #fff; font-size: 1.0833em; line-height: 3.3333em; font-weight: bold; padding: 0 20px; margin-bottom: 30px; overflow: hidden;
      i { margin-right: 10px; }
      &:hover i { @include animation(fadeInRight, 0.4s, ease-in); }
    }
    .girl { position: absolute; right: 0; bottom: 0; width: 40%; }
  }
}

/* 9.3.2. Coming soon page */
.coming-soon-page {
  #main { text-align: center; margin: 0; }
  section#content { background: none; padding: 0; }
  .clock {
    display: table; width: 100%; table-layout: fixed;
    li {
      display: table-cell; vertical-align: middle; text-align: center; text-transform: uppercase; width: 22%;
      span { display: block; border: 2px solid $blue-theme-color; font-family: "Roboto"; font-weight: 300; font-size: 6.6667em; color: #fff; line-height: 2.3333em; background: linear-gradient(to bottom, #3c4a59 50%, #242f3c 50%); }
      &.sep { font-size: 5.5em; color: $blue-theme-color; font-weight: 300; padding: 0 0 38px 0; width: 4%; }
      label { letter-spacing: 0.4em; color: #7692b4; font-size: 1em; height: 20px; margin: 10px 0 0; line-height: 20px; }
    }
  }
  .social-icons li a {
    background: none; font-size: 2em; color: #384c63; width: 40px;
    &:hover { color: $yellow-theme-color; }
  }
  .logo {
    display: inline-block;
    img { height: 24px; width: auto; }
  }
  .email-notify {
    input.input-text { background: #1c2733; border: 1px solid $blue-theme-color; color: #7692b4; }
    .icon { background: $blue-theme-color; color: #fff; }
  }
  .copyright { color: #384c63; }

  &.style1 {
    #page-wrapper {
      background-color: #1a232f; 
      background-image: -moz-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
      background-image: -webkit-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
      background-image: -o-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
      background-image: -ms-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
      background-image: radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
    }
  }
  &.style2 {
    #page-wrapper {
      background-color: #70860e;
      background-image: -moz-radial-gradient(center center, circle cover, rgba(148, 166, 33, 1), #576f00 100%);
      background-image: -webkit-radial-gradient(center center, circle cover, rgba(148, 166, 33, 1), #576f00 100%);
      background-image: -o-radial-gradient(center center, circle cover, rgba(148, 166, 33, 1), #576f00 100%);
      background-image: -ms-radial-gradient(center center, circle cover, rgba(148, 166, 33, 1), #576f00 100%);
      background-image: radial-gradient(center center, circle cover, rgba(148, 166, 33, 1), #576f00 100%);
    }
    .clock, .social-icons a:hover { text-shadow: 1px 10px 6px rgba(0, 0, 0, 0.2); }
    .clock {
      li {
        span { border: none; background: none; font-family: 'NexaBlack'; font-size: 12em; line-height: 1em; }
        &.sep { color: #fff; font-size: 8.3333em; font-weight: bold; }
        label { font-weight: bold; font-size: 1.6667em; letter-spacing: normal; color: #fff; }
      }
    }
    .email-notify {
      height: 64px;
      .input-text { height: 64px; border: 3px solid #fff; background: #768b11; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.2); font-size: 16px; color: #fff; @include border-radius(32px, 32px, 32px, 32px); padding-left: 40%; }
      .notified-text { position: absolute; left: 0; top: 0; display: block; width: 35%; height: 64px; line-height: 64px; color: #fff; font-size: 2em; font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; white-space: nowrap; }
      .notified-text small { padding-left: 15px; font-weight: normal; font-size: 0.6667em; vertical-align: top; font-weight: normal; }
      .icon { @include border-radius(50%, 50%, 50%, 50%); background: $yellow-theme-color; right: 10px; }
      .icon:hover { @include animation(sonarEffect, 1.3s, ease-out, 75ms); }
    }
    .social-icons li a {
      color: #627906;
      &:hover { color: $yellow-theme-color; }
    }
    .copyright { color: #627906; }
  }

  &.style3 {
    height: 100%;
    #page-wrapper, #content, #content .container, #main { height: 100%; }
    .container {
      position: relative; text-align: center;
      &:before { position: absolute; top: 0; left: -100px; background: url('http://placehold.it/504x495') no-repeat; width: 504px; height: 495px; }
    }
    #main { position: relative; z-index: 2; padding-top: 100px; }
    #page-wrapper { background: url('http://placehold.it/2080x1228') no-repeat center bottom; }
    #content { background: url('http://placehold.it/445x246') no-repeat right top; }
    .couple { position: absolute; bottom: 1px; right: -12%; width: 60%; height: auto; }
    .header-title { font-size: 4em; font-weight: 300; line-height: 1.3333em; }
    .clock {
      width: auto; margin: 0 auto; display: inline-block;
      li {
        span { width: 100px; height: 100px; margin: 0 auto; line-height: 100px; border: none; background: $yellow-theme-color; @include border-radius(50%, 50%, 50%, 50%); font-size: 5em; font-weight: 300; }
        &.sep { color: #fff; }
        label { color: #fff; }
      }
    }
    .email-notify {
      width: 454px; 
      .input-text { background: #3c8dc3; border: 1px solid #fff; color: #fff; }
      .icon { background: none; color: #fff; }
    }
    .social-icons li a {
      color: #398ac1;
      &:hover { color: #fff; }
    }
    .copyright { color: #398ac1; }
  }
}

/* 9.3.3. Loading page */
.loading-page {
  position: absolute; display: table; position: absolute; top: 0; left: 0; height: 100%; width: 100%; text-align: center;
  .logo img { height: auto; width: auto; }
  .loading-page-wrapper { display: table-cell; vertical-align: middle; }
  .loading-progress-bar { margin-left: auto; margin-right: auto; float: none; }
  &.style1 {
    background-color: #1a232f; 
    background-image: -moz-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
    background-image: -o-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
    background-image: -ms-radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
    background-image: radial-gradient(center center, circle cover, rgba(39, 54, 72, 1), #0d1218 100%);
    .loading-text { font-size: 1.3333em; font-weight: bold; color: #7c9abd; letter-spacing: 0.4em; text-transform: uppercase; }
    .loading-progress-bar { height: 18px; background: #0e1319; @include border-radius(9px, 9px, 9px, 9px); @include opacity(0.95); box-shadow: 0 1px 0 #3b4857; padding: 3px; }
    .loading-progress { height: 12px; @include border-radius(6px, 6px, 6px, 6px); background: $blue-theme-color; }
  }
  &.style2 {
    background-color: #0097cb;
    background-image: -moz-radial-gradient(center center, circle cover, rgba(1, 181, 240, 1), #0081b1 100%);
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(1, 181, 240, 1), #0081b1 100%);
    background-image: -o-radial-gradient(center center, circle cover, rgba(1, 181, 240, 1), #0081b1 100%);
    background-image: -ms-radial-gradient(center center, circle cover, rgba(1, 181, 240, 1), #0081b1 100%);
    background-image: radial-gradient(center center, circle cover, rgba(1, 181, 240, 1), #0081b1 100%);
    .loading-progress-bar { box-shadow: 0 15px 6px rgba(3, 121, 165, 0.6); }
    .loading-progress-bar { height: 64px; border: none; background: #fff; @include border-radius(32px, 32px, 32px, 32px); padding: 7px; }
    .loading-progress { height: 50px; @include border-radius(25px, 25px, 25px, 25px); background: $yellow-theme-color; }
    .loading-percent { position: absolute; right: 20px; top: 7px; height: 50px; line-height: 50px; color: $blue-theme-color; font-weight: 900; font-size: 2em; letter-spacing: -0.02em; }
    .loading-text { font-size: 2.5em; font-weight: bold; color: #fff; letter-spacing: normal; text-transform: none; text-shadow: 0 10px 6px rgba(3, 121, 165, 0.6); }
    .notice-message { font-family: "NexaBlack"; font-size: 12.5em; line-height: 0.6666em; color: #fff; text-transform: uppercase; letter-spacing: -0.1em; text-shadow: 0 16px 6px rgba(3, 121, 165, 0.6); }
  }
  &.style3 {
    background: url('http://placehold.it/2080x1228') no-repeat center bottom;
    .container { position: relative; height: 100%; }
    .loading-page-wrapper { height: 100%;}
    .loading-page-content { position: relative; z-index: 2; height: 60%; }
    .loading-text { font-size: 2em; font-weight: 300; color: #fff; }
    .loading-progress-bar { height: 40px; border: 1px solid #fff; padding: 4px; background: #2d7aaf; }
    .loading-progress { height: 30px; background: #fff; }
    .loading-percent {  position: absolute; right: 10px; top: 5px; line-height: 30px; color: #fff; font-size: 1.6667em; letter-spacing: -0.02em; }
    .bottom-image { width: 30%; position: absolute; bottom: 1px; left: 50%; margin-left: -15%; }
  }
}

/* 9.3.4. Login page */
.soap-login-page {
  #main { text-align: center; }
  #footer { text-align: center; }
  .login-form .checkbox { text-align: left; }
  &.style1 {
    -webkit-transform: translate3d(0, 0, 0);
    #page-wrapper { -webkit-backface-visibility: hidden; }
    .logo img { height: 24px; width: auto; }
    .login-form {
      .input-text { background: #1d2835; border: 1px solid $blue-theme-color; color: #708bac; }
      .checkbox {
        color: #708bac; cursor: pointer;
        &:before { border-color: $blue-theme-color; }
        &.checked:before { background: #1c2633; color: #708bac; }
      }
    }
  }
  &.style2 {
    background-color: #8f3fa1;
    background-image: -moz-radial-gradient(center center, circle cover, rgba(180, 89, 200, 1), #762d87 100%);
    background-image: -webkit-radial-gradient(center center, circle cover, rgba(180, 89, 200, 1), #762d87 100%);
    background-image: -o-radial-gradient(center center, circle cover, rgba(180, 89, 200, 1), #762d87 100%);
    background-image: -ms-radial-gradient(center center, circle cover, rgba(180, 89, 200, 1), #762d87 100%);
    background-image: radial-gradient(center center, circle cover, rgba(180, 89, 200, 1), #762d87 100%);
    .welcome-text { font-size: 2.3333em; font-weight: bold; line-height: 1em; color: #fff; text-shadow: 0 10px 6px rgba(149, 67, 167, 1); }
    .login-form {
      .input-text, button { height: 70px; box-shadow: 0 10px 6px rgba(149, 67, 167, 0.6); @include border-radius(35px, 35px, 35px, 35px); }
      .input-text { background: #9543a7; border: 3px solid #fff; font-size: 1.3333em; color: #fff; padding-left: 195px; padding-right: 25px; }
      button {
        font-size: 2em; font-weight: 900; letter-spacing: -0.02em; position: relative; padding-right: 50px; overflow: hidden;
        i { position: absolute; right: 7px; top: 7px; height: 56px; width: 56px; line-height: 56px; background: #fff; color: $yellow-theme-color; }
        &:hover i:before { @include animation(toTopFromBottom, 0.35s, forwards); }
      }
      .form-group { margin-bottom: 30px; }
      .input-login, .input-password {
        position: relative;
        label {
          position: absolute; left: 30px; top : 0; height: 70px; line-height: 70px; font-size: 2em; font-weight: 900; color: #fff; letter-spacing: -0.02em;
          &:after { content: "|"; font-size: 0.6667em; vertical-align: top; margin-left: 15px; }
        }
      }
    }
    .copyright { color: #822e95; }
  }
  &.style3 {
    .logo { margin-top: 15px; }
    #page-wrapper { background: url('http://placehold.it/2080x1228') no-repeat center bottom #2680b3; padding-bottom: 10%; position: relative; }
    .welcome-text { font-size: 4em; font-weight: 300; line-height: 1em; color: #fff; }
    .login-form {
      .input-text { background: #369cbe; border: 1px solid #fff; color: #fff; }
      .checkbox {
        color: #fff; cursor: pointer;
        &:before { border-color: #fff; background: #369cbe; }
        &.checked:before { color: #fff; }
      }
    }
    #content { padding-top: 0; position: relative; z-index: 2; }
    #footer { position: relative; z-index: 2; }
    #footer .footer-wrapper { padding-bottom: 0; }
    #main { margin-bottom: 0px; }
    #main-menu li {
      color: #3faac9; -webkit-backface-visibility: hidden;
      &.active a, &:hover a { color: #fff; }
    }
    .copyright { color: #fff; -webkit-transform: translateZ(0); }
    .places { position: absolute; right: 0; bottom: 1px; width: 360px; }
    .plane { float: right; }
  }
}

/* 9.4. Extra Pages ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.more-popular-destinations {
  overflow: hidden;
  .row { margin-right: -16px; }
  ul {
    border-right: 1px solid #fff;
    li { margin-bottom: 15px; }
  }
}

@media screen and (-webkit-min-device-pixel-ratio:0) { // for safari only
  ::i-block-chrome,.more-popular-destinations .row { margin-right: -19px; }
}

.image-box {
  .has-discount {
    position: relative; overflow: visible;
    &:before { content: ""; }
  }
  .has-discount:before, .discount {
    display: block; position: absolute; left: -4px; top: -4px; width: 100px; height: 102px; color: #fff; background: url(../images/icon/discount.png) no-repeat;
  }
  .discount {
    z-index: 1; line-height: 80px; text-transform: uppercase; font-weight: bold; font-size: 0.9167em; letter-spacing: 0.04em; text-indent: -3px;
    .discount-text { display: inline-block; @include transform(rotate(-45deg)); writing-mode: lr-tb; }
  }
}

.sidebar .widget-queries {
  ul { margin-bottom: 15px; }
  li {
    border-bottom: 1px solid #f5f5f5; padding: 10px 5px; line-height: 24px; font-size: 0.9167em; text-transform: uppercase;
    a {
      display: block;
      &:hover {
        color: $heading-color;
        i { color: $skin-active-color; }
      }
    }
    i { color: #d9d9d9; font-size: 2em; display: block; float: left; margin-right: 10px; width: 20px; text-align: center; }
  }
}

.sidebar .post-list {
  .details { padding-top: 3px; }
  .box-title { margin-bottom: 4px; }
  .avatar img { width: 64px; height: 64px; @include border-radius(50%, 50%, 50%, 50%); }
}

.travel-story-container {
  background: #fff; padding: 0 10px 10px;
  .travel-story-content {
    display: table;
    > * { display: table-cell; vertical-align: top; }
    .avatar {
      border-right: 1px solid #f5f5f5; padding: 20px 20px 10px 10px; text-align: center;
      img { margin-bottom: 15px; width: 90px; height: 90px; }
    }
    .description { padding: 20px; }
  }
  .travel-story-meta {
    background: #f5f5f5; padding: 10px 10px 0; font-size: 1em;
    .story-meta {
      float: right; text-transform: uppercase;
      > * {
        height: 28px; line-height: 28px; display: inline-block; padding: 0 10px; margin-left: 8px; margin-bottom: 10px; background: #fff; color: #9e9e9e; letter-spacing: 0.04em; font-size: 0.8333em; font-weight: normal;
        i { float: left; font-size: 2.5em; margin-right: 8px; color: #d9d9d9; }
        &.date i { font-size: 1.6667em; }
      }
      a.button {
        &:hover {
          background: $yellow-theme-color; color: #fff;
          i { color: #fff; }
        }
      }
    }
    .travel-miles {
      line-height: 28px; font-size: 1.1667em; float: left; display: block; margin-left: 5px;
      i { font-size: 1.8333em; color: $skin-active-color; margin-right: 8px; float: left; }
    }
    &:after { display: table; content: ""; clear: both; }
  }
  .my-trip {
    li {
      float: left; width: 80px; height: 80px; margin-right: 10px; margin-bottom: 10px;
      img { max-width: 100%; }
      .hover-effect:after { background-size: 30px 30px; }
    }
    ul:after { display: table; content: ""; clear: both; }
  }
}

#travel-guide {
  .tab-pane { padding: 0; }
  .main-content { padding: 20px; }
  #travel-guide-sports {
    .intro { padding: 15px; }
  }
  .sport-list {
    background: #fff; text-transform: uppercase; letter-spacing: 0.04em;
    li { line-height: 2.5em; }
    [class^="col-"], [class*=" col-"] { padding: 10px 20px; border-right: 1px solid #f5f5f5; }
  }

  .details {
    padding-bottom: 10px;
    > *:last-child { margin-bottom: 0; }
  }

  .icon-box {
    text-align: center; text-transform: none; padding: 0 15px;
    i { margin-bottom: 10px; font-size: 1.3333em; }
  }
}

.suggested-places {
  ul.check-square {
    li {
      &:before { float: left; line-height: 1.3em; }
      > a { margin-left: 25px; display: block; }
      &:hover, &.active {
        background: none;
        &:before { background: $yellow-theme-color; color: #fff; }
        .box-title { color: $skin-active-color; }
      }
    }
  }
}

.travel-ideas {
  .idea-title .index {
    margin-right: 10px; display: inline-block; @include border-radius(50%, 50%, 50%, 50%); color: #fff; background: $yellow-theme-color; width: 1.8em; height: 1.8em; line-height: 1.75em; text-align: center; font-size: 0.8em; font-weight: bold;
  }
  .suggested-places {
    .row { margin: 0 -3px 0 -25px; }
    [class^="col-"] { padding-left: 25px; padding-right: 0; border-right: 1px solid #f5f5f5; }
    ul.check-square {
      li > a { text-transform: uppercase; }
    }
  }
}

/* revolution slider fix */
.tp-simpleresponsive .slotholder, .tp-simpleresponsive .slotholder img { /*-webkit-backface-visibility: visible !important;-webkit-transform:none !important;*/ }