/*========================================================================
   Table of contents
==========================================================================

  # GLOBAL SETTINGS
  # BASIC TYPOGRAPHY
  # MOZILLA HACK
  # CONTENT SECTION TOP BOTTOM MARGIN
  # BUTTONS STYLES
  # BUTTON STYLES LIST
  # SOCIAL LINKS
  # FORM STYLE
  # CUSTOM RADIO BUTTON
  # SITE INNER WRAPPER
  # INNER ROW
  # SECTION COLOR
  # HEADER SECTION
  # TOP SOCIAL MENU STYLE
  # HEADER STYLE
  # HOME PAGE
  # SECTION TITLE STYLE
  # HIPPO SERVICE
  # PORTFOLIO SECTION
  # TESTIMONIAL CAROUSEL
  # CONTACT FORM
  # ADDRESS SECTION
  # FEATURE SECTION
  # SUBSCRIBE BAR
  # VIDEO POPUP SETTINGS
  # MODAL ANIMATIONS
  # CONTACT SECTION
  # PASSWORD RESET
  # HIPPO TEAM
  # VISUAL COMPOSER STYLES
  # FOOTER SECTION
  # COPYRIGHT SECTION
  # PAGES
  # PAGE SIDEBAR
  # FAQ PAGE
  # FAQ PAGE TWO
  # TAB
  # PULLQUOTE STYLES
  # EXTRA CLASSES
  # PAGE PRE-LOADER ANIMATION AND KEYFRAME
  # BLOG STYLE
  # MARKUP: IMAGE ALIGNMENT
  # TEXT MEANT ONLY FOR SCREEN READERS
  # WP CAPTION
  # BLOCKQUOTE
  # TABLE
  # DEFINITION LISTS
  # LIST STYLE
  # CODE
  # PRE STYLE
  # BLOG STYLE DEFAULT
  # Single blog post & single post & single attachment post
  # RELATED POST
  # NEXT-PREVIOUS-POST
  # BLOG SIDEBAR
  # SINGLE TAGCLOUD
  # PAGINATION
  # Page Template (Page Sidebar Left, Page Sidebar Right, Page No Sidebar)
  # 404 page
========================================================================*/

/*---------------------------------------------------------
   GLOBAL SETTINGS 
---------------------------------------------------------*/
html {
  font-size : @modular-scale-base-size;
  }

body {
  font-family                : @font-family;
  font-weight                : @font-weight;
  font-size                  : @modular-scale-base-size;
  line-height                : 1.9em;
  color                      : @content-color;
  background                 : @bg-color;
  overflow-x                 : hidden;
  -webkit-text-size-adjust   : 100%;
  -webkit-overflow-scrolling : touch;
  -webkit-font-smoothing     : antialiased !important;
  }

html,
button,
input,
select,
textarea {
  color   : @content-color;
  outline : none;
  .rounded(4px);
  }

label {
  font-weight : 400;
  .font-size(-1);
  color       : fade(@content-color, 70%);
  }

strong {
  font-weight : 600;
  color       : @heading-color;
  }

b {
  font-weight : 600;
  color       : darken(@content-color, 20%);
  }

dt {
  margin-bottom : 5px;
  }

dd {
  margin-bottom : 15px;
  }

::selection {
  background : @theme-color;
  color      : @white;
  }

::-moz-selection {
  background : @theme-color;
  color      : @white;
  }

/*---------------------------------------------------------
   BASIC TYPOGRAPHY
---------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family : @heading-font-family;
  color       : @heading-color;
  font-weight : @heading-font-weight;

  }

h1 {
  .font-size(6);
  line-height   : 1.359375em;
  margin-top    : 0;
  margin-bottom : 0em;
  }

h2 {
  .font-size(5);
  line-height   : 1.359375em;
  margin-top    : 1em;
  margin-bottom : .5em;
  }

h3 {
  .font-size(4);
  line-height   : 1.5em;
  margin-top    : 0.90625em;
  margin-bottom : 1.5em;
  }

h4 {
  .font-size(3);
  line-height   : 1.8125em;
  margin-top    : 1.8125em;
  margin-bottom : 1em;
  }

h5 {
  .font-size(2);
  line-height   : 1.8125em;
  margin-bottom : 1em;
  }

h6 {
  font-style    : normal;
  .font-size(1);
  line-height   : 1.8125em;
  margin-bottom : 0em;
  }

a {
  font-weight : 400;
  color       : @theme-color;
  &:hover {
    color           : @theme-color;
    text-decoration : none;
    }

  &:focus {
    outline         : none;
    outline-offset  : 0;
    text-decoration : none;
    color           : @theme-color;
    }
  }

ul {
  margin  : 0;
  padding : 0;
  }

code {
  .rounded(3px);
  padding     : 5px 10px;
  font-size   : 12px;
  line-height : 18px;
  background  : #E5E5E5;
  color       : #444444;
  }

img {
  max-width : 100%;
  }

/*---------------------------------------------------------
   MOZILLA HACK
---------------------------------------------------------*/

.img-responsive {
  width : 100%;
  }

.mfp-bg {
  z-index : 2042;
  }

.mfp-wrap {
  z-index : 2043;
  }

address {
  line-height : 1.6em;
  }

/*---------------------------------------------------------
   CONTENT SECTION TOP BOTTOM MARGIN
---------------------------------------------------------*/

.content-area.col-md-9 {
  @media @ms-screen {
    padding-bottom : 100px;
    }
  }

.content-area,
.site-content {
  background : @content-bg-color;
  }

.site-content {
  padding : 50px 40px;

  @media @ms-screen {
    padding : 50px 30px;
    }
  }

.page-template-template-home .row-wrapper {
  padding : 0 60px;

  @media @ms-screen {
    padding : 0 30px;
    }
  }

.row-wrapper.slider-row {
  padding : 0;
  }

.row-bg-themecolor {
  background-color : @theme-color;

  .section-title {
    color : @white;
    h2 {
      color : @white;
      strong, span {
        color : @white;
        }
      }
    p {
      .font-size(1.5);
      }
    }
  p {
    color         : @white !important;
    .font-size(1);
    margin-bottom : 1.5em !important;
    strong {
      color : @white !important;
      .font-size(1);
      }
    }
  }

/*---------------------------------------------------------
   BUTTONS STYLES
---------------------------------------------------------*/

.btn {
  font-size      : 1.125rem;
  padding        : .7em 1.5em;
  text-transform : uppercase;
  border         : 0;
  color          : @white;
  .rounded(0);
  .transition(0.3s);

  &:focus,
  &.active {
    outline    : none !important;
    box-shadow : none;
    }

  &.btn-lg {
    padding : 1em 2em;
    }
  &.btn-sm {
    font-size : .9rem;
    padding   : .2em .7em;
    }
  &.btn-xs {
    font-size   : .8rem;
    padding     : .3em .8em;
    font-weight : 500;
    }

  &.btn-primary {
    background-color : @theme-color;
    }

  &.btn-default {
    background-color : @heading-color;
    &:active,
    &:focus,
    &:active:focus {
      color : #FFFFFF;
      }
    }
  &.btn-link {
    background-color : @theme-color;
    &:active,
    &:focus {
      color           : #FFFFFF;
      text-decoration : none;
      }
    }

  &:hover {
    color            : #FFFFFF;
    background-color : darken(@theme-color, 20%);
    text-decoration  : none;
    }
  }

/*---------------------------------------------------------
   BUTTON STYLES LIST
---------------------------------------------------------*/
.button-styles-list {
  margin     : 0;
  padding    : 0;
  list-style : none;

  li {

    button,
    a {
      margin-right  : 10px;
      margin-bottom : 15px;
      }
    a {
      display : inline-block;
      }
    }

  &.color-list {
    button {
      margin-bottom : 10px;
      }
    }

  }

/*---------------------------------------------------------
   SOCIAL LINKS
---------------------------------------------------------*/
.social-shares {
  li a {
    color : #313131;
    }
  }

/*---------------------------------------------------------
   FORM STYLE
---------------------------------------------------------*/

.form-group {
  margin-bottom : 30px;
  }

.form-control {
  .font-size(-2);
  color          : @content-color;
  letter-spacing : 1px;
  height         : 3.2em;
  padding        : .3em 1.3em;
  border         : 1px solid @form-border-color;
  .box-shadow(none);
  .rounded(0);
  .placeholder(lighten(@content-color, 36%));
  background     : transparent;

  &:focus {
    .box-shadow(none);
    border-color : @theme-color;
    }
  textarea& {
    padding-top : 22px;
    }
  }

.input-field {
  textarea {
    margin-bottom : 20px;
    padding       : 15px !important;
    min-height    : 200px;
    }
  }

.comment-respond .input-field {
  margin-bottom : 30px;
  label {
    margin-bottom : 10px;
    }
  }

/*---------------------------------------------------------
   CUSTOM RADIO BUTTON
---------------------------------------------------------*/

input[type="radio"] {
  position : relative;

  &::before,
  &::after {
    content       : "";
    display       : block;
    position      : absolute;
    top           : 50%;
    left          : 50%;
    border-radius : 50%;
    }

  &::before {
    width       : 14px;
    height      : 14px;
    margin-top  : -7px;
    margin-left : -7px;
    background  : @white;
    border      : 2px solid #7F7F7F;
    z-index     : 1;
    }

  &::after {
    width       : 8px;
    height      : 8px;
    margin-top  : -4px;
    margin-left : -4px;
    background  : @theme-color;
    z-index     : 2;
    opacity     : 0;
    }

  &:checked::after {
    opacity : 1;
    }
  }

/*---------------------------------------------------------
   SITE INNER WRAPPER
---------------------------------------------------------*/
.inner-wrapper {
  background-color : @bg-color;
  overflow         : hidden;
  .if-has-background-image(@custom-background-image);
  .if-has-background-color(@custom-background-color);
  }

.container-wrapper {
  > .container {
    > .row {
      // not final
      background-color : @content-bg-color;
      }
    }
  }

/*---------------------------------------------------------
   INNER ROW
---------------------------------------------------------*/
.home #main {
  padding-bottom : 0;
  }

/*---------------------------------------------------------
   SECTION COLOR
---------------------------------------------------------*/
.row-bg-lightencolor {
  background-color : darken(@content-bg-color, 1.3%);
  }

.row-bg-gradientcolor {
  #gradient > .vertical-width(@theme-color, @content-bg-color, 70%, 30%);
  }

/*---------------------------------------------------------
   HEADER SECTION
---------------------------------------------------------*/

.page-title-section {
  padding-top : 100px;

  .custom-page-header {
    padding : 60px 40px;

    @media @ms-screen {
      padding : 60px 30px;
      }
    }
  .page-header {
    margin         : 0;
    padding        : 0;
    border-bottom  : 0;
    text-transform : uppercase;

    h1 {
      .font-size(9);
      color       : @menu-color;
      font-weight : 400;
      span {
        font-weight : 700;
        }
      @media @ms-screen {
        font-size : 2rem;
        }
      }
    }

  .entry-meta {
    color      : lighten(@heading-color, 30%);
    font-style : italic;
    a {
      color         : lighten(@heading-color, 20%);
      border-bottom : 1px solid @border-color;
      font-style    : normal;

      &:hover {
        border-bottom-color : @black;
        }
      }
    }
  }

.breadcrumb-wrap {
  background-color : @content-bg-color;
  padding          : 10px 40px;
  border-bottom    : 1px solid @border-color;

  @media @ms-screen {
    padding : 10px 30px;
    }

  .breadcrumb {
    font-size        : 12px;
    background-color : transparent;
    margin-bottom    : 0;
    border-radius    : 0;
    padding          : 0;

    a {
      color : fade(@content-color, 50%);
      &:hover {
        color : @theme-color;
        }
      }

    .active {
      color : @heading-color;
      }

    > li + li:before {
      content : "-";
      }
    }
  }

/*---------------------------------------------------------
   TOP SOCIAL MENU STYLE
---------------------------------------------------------*/
.social-menu-wrap {
  #socialMenu {
    background : transparent;
    border     : none;
    color      : darken(@content-color, 1%);
    padding    : 0;
    }

  .dropdown-menu {
    display    : block;
    visibility : hidden;
    background : transparent;
    top        : -8px;
    border     : 0;
    right      : 100%;
    text-align : right;
    min-width  : 332px;
    margin     : 2px 14px 0;

    .opacity(0);
    .box-shadow(none);
    .translateX(20px);
    .transition(all .3s);
    }

  &.open {
    .dropdown-menu {
      visibility : visible;

      .opacity(1);
      .translateX(0);
      }
    .dropdown-toggle {
      .opacity(.5);
      }

    }

  .social-menu {
    li {
      display : inline-block;

      a {
        padding   : 0;
        display   : block;
        font-size : 12px;
        color     : @white;

        i {
          display     : block;
          .rounded(100%);
          width       : 30px;
          height      : 30px;
          line-height : 30px;
          text-align  : center;
          .transition(all .3s);

          &:hover {
            .opacity(.5);
            }
          &.fa-rss {
            background : #F26522;
            }
          &.fa-facebook {
            background : #3B5998;
            }
          &.fa-twitter {
            background : #55ACEE;
            }
          &.fa-google-plus {
            background : #DD4B39;
            }
          &.fa-youtube {
            background : #DD4B39;
            }
          &.fa-flickr {
            background : #FF0084;
            }
          &.fa-linkedin {
            background : #0274B3;
            }
          &.fa-vimeo-square {
            background : #1AB7EA;
            }
          &.fa-vimeo-square {
            background : #1AB7EA;
            }
          &.fa-instagram {
            background : #6A453B;
            }
          &.fa-dribbble {
            background : #C32361;
            }
          &.fa-tumblr {
            background : #395976;
            }
          &.fa-pinterest {
            background : #CC2127;
            }
          &.fa-skype {
            background : #00AFF0;
            }
          }

        &:hover {
          background : transparent;
          }
        }
      }
    }
  }

/*---------------------------------------------------------
   HEADER STYLE
---------------------------------------------------------*/
.header {
  border-bottom : 1px solid fade(@white, 5%);

  &.header-style-default {
    position : absolute;
    z-index  : 101;
    width    : 100%;

    .site-logo {
      min-height   : 40px;
      margin-right : 20px;
      @media @xs-screen {
        margin : 0;
        }
      }

    /* Sticky Menu */
    &.sticky-header {
      position   : fixed;
      left       : 0;
      right      : 0;
      top        : 0;
      background : lighten(@black, 20%);
      margin     : 0;
      padding    : 0 10%;
      z-index    : 101;
      .box-shadow(0 .1em .2em rgba(0, 0, 0, 0.05));

      @media @lg-screen {
        padding : 0 10%;
        }

      .navbar-horizontal {
        padding : 10px 0;
        }

      @media @xs-screen {
        padding : 0;

        .header-right-content {
          margin-top : 0;
          }
        }

      @media @ms-screen {
        padding : 1em 15px;
        }
      }
    }

  //  Navbar Padding
  .navbar-horizontal {
    padding : 25px 40px;

    @media @xs-screen {
      padding : 27px 20px 20px;
      }
    }

  //  Header Right Content
  .header-right-content {
    float  : right;
    margin : 0;

    > div {
      display  : inline-block;
      position : relative;
      }
    .search-btn {
      width  : 40px;
      height : 40px;
      }
    }

  }

/*---------------------------------------------------------
  HOME PAGE
---------------------------------------------------------*/

/* Hippo More Button */
.hippo-page-link-wrapper {
  position : relative;
  .hippo-page-link {
    font-weight    : 500;
    text-transform : uppercase;
    border-bottom  : 2px solid @theme-color;
    margin         : 30px 0 150px;
    display        : inline-block;
    letter-spacing : .1em;
    &:hover {
      background          : @theme-color;
      color               : @black;
      border-bottom-color : darken(@theme-color, 15%);
      }
    }

  &::after {
    content    : "";
    position   : absolute;
    width      : 1px;
    height     : 100px;
    background : fade(@black, 30%);
    left       : 50%;
    bottom     : 0;
    }
  }

/*Newsletter Popup*/

#hippo-newsletter-popup {
  background : fade(@black, 50%);
  .modal-dialog {
    margin : 100px auto;
    }

  .modal-content {
    .rounded(2px);
    overflow : hidden;
    }

  .close {
    top    : 20px;
    width  : 20px;
    height : 20px;
    &::after,
    &::before {
      background : fade(@black, 80%);
      width      : 20px;
      top        : 10px
      }
    }
  .modal-body {
    padding : 4em;
    strong {
      font-family   : @heading-font-family;
      font-size     : 2rem;
      font-weight   : normal;
      line-height   : 1.2em;
      display       : block;
      margin-bottom : 30px;
      }

    form {
      margin-top : 10px;
      position   : relative;
      input[type="email"] {
        border      : 1px solid @form-border-color;
        line-height : 50px;
        padding     : 0 120px 0 10px;
        width       : 100%;
        .rounded(2px);
        }
      input[type="submit"] {
        border         : 0;
        background     : @theme-color;
        position       : absolute;
        top            : 5px;
        right          : 5px;
        line-height    : 42px;
        color          : #FFFFFF;
        padding        : 0 10px;
        letter-spacing : .1em;
        .rounded(2px);
        }
      }
    }
  }

/* CALL TO ACTION */

.hippo-call-to-action {
  padding : 60px !important;

  @media @ms-screen {
    padding : 30px !important;
    }

  h1, h2, h3, h4, h5, p {
    margin      : 0;
    padding     : 0;
    color       : @heading-color;
    .font-size(5.3);
    line-height : 2.2em;
    font-weight : 100;

    @media @lg-screen {
      line-height : 1.5em;
      }

    @media @sm-screen {
      .font-size(2);
      }

    @media @ms-screen {
      text-align    : center !important;
      line-height   : 1.5em;
      .font-size(3);
      margin-bottom : 1em !important;
      }
    }

  .wpb_wrapper {
    @media @ms-screen {
      text-align : center !important;
      }
    }
  .hippo-btn-wrapper {
    .btn.btn-lg {
      letter-spacing : normal;
      padding        : 1.22em 2.5em;
      font-weight    : 700;
      text-transform : uppercase;
      @media @sm-screen {
        padding   : 1em 1.5em;
        font-size : 14px;
        }
      }
    @media @ms-screen {
      text-align : center !important;
      }
    }

  }

/*COMMON SECTION STYLE*/

.section-top-padding {
  padding-top : 5em;
  }

.section-bottom-padding {
  padding-bottom : 5em;
  }

.section-top-bottom-padding {
  padding-top    : 5em;
  padding-bottom : 5em;
  }

/*MIDDLE CONTENT*/
.display-middle-content {
  @media @sm-screen {
    margin-bottom : 3em !important;
    }
  }

.content-vertical-align {
  padding : 7em 0;
  @media @lg-screen {
    padding : 3em 0;
    }
  @media @sm-screen {
    padding    : 5em 2em;
    text-align : center;
    }
  h2 {
    font-size : 3rem;
    @media @sm-screen {
      font-size : 2rem;
      }
    }
  p {
    font-size : 1.2rem;
    @media @sm-screen {
      font-size : 1rem;
      }
    }
  hr {
    border-top-color : rgba(0, 0, 0, .1);
    }
  }

/*---------------------------------------------------------
  SECTION TITLE STYLE
---------------------------------------------------------*/
.section-title {
  padding : 60px 0;

  @media @ms-screen {
    padding : 50px 0;
    }
  h2 {
    .font-size(1);
    text-transform : uppercase;
    strong {
      color       : @theme-color;
      font-weight : 100 !important;
      font-size   : inherit;
      }
    @media @ms-screen {
      font-size : 2rem;
      }
    }
  span,
  p,
  strong {
    .font-size(-1);
    color  : lighten(@heading-color, 57%);
    margin : 0;
    @media @ms-screen {
      font-size : 1rem;
      }
    }
  p {
    color : @content-color;
    @media @ms-screen {
      margin-top : 20px;
      }
    }
  }

/*---------------------------------------------------------
  HIPPO SERVICE
---------------------------------------------------------*/
.hippo-services {
  margin-bottom : 20px;
  .hippo-service-wrapper {
    margin-bottom : 40px;

    img {
      margin-bottom : 2.500rem;
      .drop-shadow(0, 10px, 30px, 0.3);
      .transition(all .2s linear);
      &:hover {
        .drop-shadow(0);
        .translateY(5px);
        }
      }

    .service-title {
      margin-bottom : 0.5em;
      .font-size(2);
      > a {
        color          : @heading-color;
        font-weight    : 900;
        text-transform : uppercase;
        .transition(all .2s);

        &:hover {
          color : @theme-color;
          }
        }
      }
    }
  }

/*---------------------------------------------------------
  PORTFOLIO SECTION
---------------------------------------------------------*/

.portfolio-wrap {
  margin-bottom : 100px;
  .row {
    &.no-space {
      margin : 0;

      > .no-space {
        padding : 0;
        margin  : 0;

        > .portfolio-item {
          margin : 0;
          }
        }
      }
    }

  .portfolio-item {
    height        : 250px;
    position      : relative;
    overflow      : hidden;
    margin-bottom : 30px;

    .element-link {
      position : absolute;
      width    : 100%;
      height   : 100%;
      top      : 0;
      left     : 0;
      #gradient > .directional(fade(@black, 90%), fade(@black, 0), 45deg);
      .transition(gradient .5s);

      &:hover {
        #gradient > .directional(fade(@theme-color, 90%), fade(@theme-color, 0), 45deg);
        }

      .content-wrapper {
        position : absolute;
        bottom   : 0px;
        color    : @white;
        padding  : 20px 25px;

        h3 {
          color          : @white;
          font-size      : 1.5rem;
          line-height    : 1.2em;
          font-weight    : 900;
          text-transform : uppercase;
          margin-bottom  : 8px;
          }

        p {
          line-height : 1.4em;
          min-height  : 45px;
          }
        }
      }

    }

  }

/*---------------------------------------------------------
  TESTIMONIAL CAROUSEL
---------------------------------------------------------*/

.testimonial-carousel {
  text-align    : center;
  margin-bottom : 100px;

  .testimonial-items {
    &.owl-carousel {
      .item {
        display       : inline;
        margin-bottom : 0px;
        width         : auto;
        }
      }

    .item {
      display       : inline-block;
      width         : 33%;
      margin-bottom : 30px;

      .testimonial-content {
        margin : 0 30px;

        @media @ms-screen {
          margin : 0 10px;
          }

        .client-thumb-wrapper {
          margin-bottom : 30px;
          text-align    : center;
          img {
            width  : 100px;
            height : 100px;
            .rounded(100%);
            }
          }

        .quote-wrapper {
          font-style  : italic;
          position    : relative;
          font-weight : 300;
          .font-size(1);
          line-height : 1.5em;
          color       : @heading-color;

          @media @xs-screen {
            .font-size();
            }

          p {
            position : relative;
            margin   : 0;
            display  : inline;

            &::before,
            &::after {
              content     : '\f10e';
              position    : absolute;
              font-family : FontAwesome;
              font-style  : normal;
              font-size   : 10px;
              color       : fade(@content-color, 10%);
              }
            &::after {
              bottom : 0;
              right  : -20px;
              }
            &::before {
              top  : -10px;
              left : -15px;
              .scaleX(-1);
              }
            }
          }

        .client-info {
          margin-top  : 15px;
          line-height : 1;
          font-style  : normal;
          .client-name {
            color     : fade(@heading-color, 90%);
            font-size : 13px;
            display   : block;
            }

          .client-designation {
            color     : fade(@content-color, 60%);
            font-size : 11px;
            }
          }
        }
      }
    }

  .owl-controls {
    margin-top : 25px;
    .owl-pagination {
      .owl-page {
        span {
          width      : 4px;
          height     : 4px;
          .rounded(50%);
          background : fade(@content-color, 30%);
          }
        &.active {
          span {
            background : @theme-color;
            }
          }
        }
      }
    }
  }

/*---------------------------------------------------------
  CONTACT FORM
---------------------------------------------------------*/
.contact-form {
  h3 {
    .font-size(3);
    text-transform : uppercase;
    margin-top     : 0;
    }
  .btn {
    margin-top : 20px;
    .font-size(-1);
    }
  }

span.wpcf7-not-valid-tip {
  font-size : 0.750rem;
  }

/*---------------------------------------------------------
  ADDRESS SECTION
---------------------------------------------------------*/
.address-section {
  padding : 40px 0 20px;

  > .row > div {
    padding-bottom : 30px;
    }

  h1, h2, h3, h4, h5, h6 {
    .font-size();
    text-transform : uppercase;
    border-bottom  : 1px solid @border-color;
    display        : inline-block;
    margin         : 0 0 12px 0;
    }

  p {
    .font-size(-.5);
    }

  }

/*---------------------------------------------------------
  FEATURE SECTION
---------------------------------------------------------*/

.section-feature {
  text-align : center;
  padding    : 5em 0;
  @media @ms-screen {
    padding-left  : 1em;
    padding-right : 1em;
    }

  .hippo-product-feature-wrapper {
    margin-top : 2em;
    @media @md-screen {
      margin-top : 5em;
      }

    i {
      display       : block;
      margin-bottom : .7em;
      &::before {
        font-size : 4rem;
        margin    : 0;
        }
      }
    }

  h3 {
    font-weight   : 500;
    font-size     : 1.2rem;
    margin-bottom : .5em;
    }

  i {
    font-size : 4em;
    color     : @content-color;
    }
  }

/*---------------------------------------------------------
   SUBSCRIBE BAR
---------------------------------------------------------*/

.th-btm-newsletter {
  .newsletter {
    width  : 600px;
    margin : 0 auto;
    form {
      position : relative;
      }
    input[type="email"] {
      width      : 100%;
      height     : 50px;
      padding    : 0 10em 0 1em;
      background : @white;
      border     : 1px solid @form-border-color;
      .rounded(2px);
      .transition(all linear .3s);

      &:focus {
        border-color : @theme-color;
        }
      }
    input[type="submit"] {
      background     : @theme-color;
      border         : 0;
      position       : absolute;
      right          : 0;
      top            : 0;
      padding        : 0 20px;
      margin         : 5px;
      line-height    : 40px;
      color          : @white;
      letter-spacing : .1em;
      .rounded(2px);
      .transition(all linear .3s);
      &:hover {
        background : darken(@theme-color, 30%);
        }
      }

    .mc4wp-alert {
      font-size   : 10px;
      position    : absolute;
      top         : 0;
      background  : #FFFFFF;
      left        : 0;
      margin      : 10px;
      line-height : 13px;
      }
    }
  }

.hippo-join-us-wrapper {
  padding : 1em 0;

  @media @md-screen {
    margin-bottom : 20px;
    }
  @media @ms-screen {
    padding     : 1em 0;
    line-height : 2em;
    }

  .info-content {
    font-family : @heading-font-family;
    float       : left;
    width       : 40%;

    @media @md-screen {
      float : none;
      width : 100%;
      }

    h1, h2, h3, h4, h5, h6 {
      margin      : 0;
      line-height : 1.5em;
      }
    span {
      .font-size(-2);
      color : lighten(@content-color, 36%);
      }
    .phn-number {
      color       : @heading-color;
      font-weight : 700;
      }
    }
  ul {
    float      : left;
    width      : 60%;
    text-align : right;
    margin     : 13px 0 0;
    @media @md-screen {
      float      : none;
      width      : 100%;
      text-align : left;

      }
    li {
      padding-right : 3px;
      padding-left  : 3px;

      &:first-child {
        padding-left : 0;
        }
      &:last-child {
        padding-right : 0;
        }
      @media @ms-screen {
        display : inline-block;
        }
      }
    }
  .joinus-info {
    color     : fade(@white, 30%);
    font-size : 1rem;
    @media @sm-min-screen {
      font-size : .8rem;
      }
    @media @ms-screen {
      display : block;
      }
    }
  a {
    color         : @white;
    width         : 40px;
    height        : 40px;
    text-align    : center;
    display       : inline-block;
    border-radius : 50%;
    line-height   : 41px;
    font-size     : 16px;
    .transition(all .2s);
    &:hover {
      .opacity(.9);
      }
    }
  }

/*---------------------------------------------------------
   VIDEO POPUP SETTINGS
---------------------------------------------------------*/

.hippo-video-popup-wrapper {
  background-size   : cover !important;
  background-repeat : no-repeat !important;
  display           : block;
  position          : relative;
  a.video-popup-open-link {
    position   : absolute;
    width      : 100%;
    height     : 100%;
    top        : 0;
    left       : 0;
    display    : block;
    text-align : center;
    z-index    : 0;
    .transition(all .5s);

    &:hover i {
      box-shadow : 0 0 0 8px rgba(255, 255, 255, .3);
      }
    }

  i {
    position    : relative;
    width       : 1.7em;
    height      : 1.7em;
    font-size   : 3rem;
    line-height : 1.7em;
    color       : @white;
    box-shadow  : 0 0 0 4px rgba(255, 255, 255, 1);
    top         : 50%;
    .translateY(-50%);
    .rounded(100%) !important;
    .transition(all 300ms ease-in-out);
    &::before {
      margin-left : 5px;
      }
    }
  }

.video-full-width-wrapper {
  .hippo-video-popup-wrapper {
    height : 25rem;
    a.video-popup-open-link {
      background : fade(@black, 70%);
      }
    i {
      font-size : 3rem;
      }
    }
  }

.video-thumb-wrapper {
  margin-bottom : 80px;

  h1, h2, h3, h4, h5, h6 {
    .font-size(1.5);
    font-weight : 700;
    margin      : 30px 0 15px;
    }
  .hippo-video-popup-wrapper {
    height : 14rem;
    margin : 0;
    .translateY(0);
    .transition(all .3s);
    &:hover {
      .box-shadow(0 20px 30px fade(@black, 20%));
      .translateY(-5px);
      }
    a.video-popup-open-link {
      background : fade(@black, 20%);
      &:hover {
        background : fade(@black, 30%);
        i {
          //.scale(1.1);
          }
        }
      }
    i {
      font-size : 2rem;
      }
    }
  }

// Video Modal Style

.video-popup {
  &.modal {
    background : rgba(0, 0, 0, .9);
    padding    : 0;
    }

  .modal-dialog {
    width  : 100%;
    margin : 0;
    }
  .modal-content {
    background : transparent !important;
    }

  .modal-body {
    padding : 0;
    }

  .close {
    &::after,
    &::before {
      background : @white;
      }
    }

  }

/*---------------------------------------------------------
   MODAL ANIMATIONS
---------------------------------------------------------*/
.modal-backdrop {
  display : none;
  }

.modal.fade {
  /* Modal Dialouge Box */

  .modal-dialog {
    .modal-content {
      .rounded(0);
      position : relative;
      border   : 0;
      .box-shadow(none);
      }
    }
  }

.close {
  width    : 50px;
  height   : 50px;
  position : fixed;
  top      : 10px;
  right    : 30px;
  z-index  : 101;
  opacity  : 1;

  &::after,
  &::before {
    position : absolute;
    content  : "";
    width    : 50px;
    height   : 1px;
    top      : 25px;
    left     : 0;

    }

  &::after {
    .rotate(45deg);
    }

  &::before {
    .rotate(-45deg);
    }

  &:hover {
    .opacity(.5);
    }

  }

.control {
  cursor  : pointer;
  z-index : 200;
  &:focus {
    outline : none;
    }
  i {
    position    : absolute;
    top         : 5px;
    left        : 0;
    right       : 0;
    width       : 40px;
    height      : 40px;
    text-align  : center;
    margin      : 0px auto;
    color       : fade(@menu-color, 50%);
    font-size   : 23px;
    line-height : 40px;
    }
  }

.control .icon-search,
.control .icon-close {
  transition : 0.2s ease-in-out;
  }

// Icon Search
.icon-close {
  position   : fixed;
  top        : 35px;
  right      : 35px;
  color      : fade(@content-color, 99%);
  font-size  : 30px;
  visibility : hidden;
  transform  : translate(10px, 0) rotate(90deg);
  transition : all 0.3s ease-in-out;
  z-index    : 1001;
  cursor     : pointer;

  &:hover {
    .opacity(1);
    }
  }

.header-search-form {
  position       : fixed;
  top            : 0;
  left           : 0;
  right          : 0;
  bottom         : 0;
  display        : block;
  pointer-events : none;
  .opacity(0);
  visibility     : hidden;
  transform      : translate(40px, 0);
  transition     : all 0.3s ease-in-out;
  z-index        : 1000;
  background     : fade(@black, 95%);

  .search-box-form {
    display  : table;
    height   : 100%;
    width    : 100%;
    position : relative;

    .form-row {
      display        : table-cell;
      vertical-align : top;
      width          : 100%;
      padding        : 0;
      margin         : 0;
      }

    .input-field {
      position      : relative;
      padding       : 0;
      width         : 90%;
      margin        : 100px auto 0;
      border-bottom : 1px solid fade(@white, 99%);

      label {
        font-size     : 20px;
        font-weight   : 700;
        color         : fade(@white, 90%);
        margin-bottom : 30px;
        }

      input {
        color              : @white;
        font-weight        : 400;
        font-size          : 36px;
        height             : 80px;
        line-height        : 80px;
        border             : 0;
        background         : transparent;
        outline            : 0;
        margin             : 0;
        padding            : 0;
        -webkit-appearance : none;
        .box-sizing(border-box);
        }

      /* Search Button */
      .button {
        font-size   : 30px;
        height      : 80px;
        line-height : 80px;
        position    : absolute;
        right       : 0;
        bottom      : 0;
        background  : transparent;
        border      : 0;
        }
      }
    }
  }

.active-searchbox {
  overflow : hidden;
  }

.active-searchbox .header-search-form,
.active-searchbox .icon-close {
  .opacity(1);
  visibility     : visible;
  transform      : none;
  pointer-events : all;
  }

.active-searchbox .control .icon-search {
  .opacity(0);
  visibility : hidden;
  }

.active-searchbox .control {
  .search-btn {
    transform        : scale(90);
    position         : relative;
    cursor           : default;
    z-index          : 300;
    background-color : rgba(0, 0, 0, .9);
    }
  }

/*---------------------------------------------------------
   CONTACT SECTION
---------------------------------------------------------*/

.contact-section {
  background-color : @content-bg-color;
  padding          : 60px;
  .drop-shadow(0, 15px, 20px, 0.2);
  .rounded(3px);

  @media @ms-screen {
    padding : 30px;
    }
  @media @xs-screen {
    padding : 30px 20px;
    }

  h3 {
    color       : fade(@content-color, 70%);
    font-weight : 300;

    @media @ms-screen {
      .font-size(3);
      line-height   : 1.2em;
      margin-bottom : 10px;
      }
    }
  .form-btn {
    input[type="submit"] {
      font-size : 14px;
      padding   : 15px 30px;
      }
    }
  }

/*---------------------------------------------------------
   PASSWORD RESET
---------------------------------------------------------*/
.lost_reset_password {
  p {
    margin-bottom : 10px;
    }
  .input-field {
    padding       : 0;
    margin-bottom : 20px;
    }

  .btn {
    display : block;
    margin  : 0 auto;
    }
  }

/*----------------------------------------------------------
  HIPPO TEAM
------------------------------------------------------------*/
.hippo-team-wrapper {
  text-align    : center;
  margin-bottom : 38px;
  position      : relative;
  cursor        : pointer;
  .transition(all .3s);

  &:hover {
    .drop-shadow(0, 5px, 20px, 0.1);
    }

  > img {
    .drop-shadow(0, 1px, 0px, 0.05);
    }

  .hippo-team-details {
    bottom  : 20px;
    padding : 7px 10px 20px;
    }
  .hippo-team-member-name {
    margin      : 0 0 5px;
    .font-size();
    line-height : 1.2em;
    color       : @heading-color;
    }
  .hippo-team-designation {
    color       : lighten(@content-color, 21.3%);
    .font-size(-2);
    line-height : 1.2em;
    margin      : 0;
    }
  }

/*---------------------------------------------------------
  VISUAL COMPOSER STYLES
---------------------------------------------------------*/
h2.wpb_heading {
  margin-bottom  : 80px;
  position       : relative;
  font-size      : 18px;
  line-height    : 28px;
  padding-bottom : 10px;
  width          : 100%;
  text-align     : center;
  text-transform : uppercase;
  letter-spacing : .4em;
  font-weight    : 400;
  }

/*---------------------------------------------------------
  VISUAL COMPOSER BUTTON STYLES
---------------------------------------------------------*/

/* VISUAL COMPOSER BUTTON SHAPE */

.vc_btn3 {
  background-image : none !important;
  &:not(.vc_btn3-style-outline) {
    border : 0 !important;
    }
  &.vc_btn3-style-outline-custom {
    border : 2px solid !important;
    }
  &.vc_btn3-style-outline {
    color : #FFFFFF !important;
    }
  &.vc_btn3-shape-rounded {
    .rounded(3px) !important;
    }
  }

/* VISUAL COMPOSER BUTTON SIZES */

.vc_btn3 {
  &.vc_btn3-size-lg {
    padding-top    : 18px !important;
    padding-bottom : 18px !important;
    padding-left   : 42px !important;
    padding-right  : 42px !important;
    font-size      : 18px !important;
    line-height    : 24px !important;
    }
  &.vc_btn3-size-lg.vc_btn3-style-outline-custom {
    padding-top    : 16px !important;
    padding-bottom : 16px !important;
    }
  &.vc_btn3-size-md {
    padding     : 15px 30px !important;
    font-size   : 15px !important;
    line-height : 22px !important;
    }
  &.vc_btn3-size-md.vc_btn3-style-outline-custom {
    padding : 13px 30px !important;
    }
  &.vc_btn3-size-sm {
    padding     : 0 10px 0 !important;
    font-size   : 10px !important;
    line-height : 22px !important;
    }
  }

.vc_btn3 {
  &.vc_btn3-color-white {
    color : #3A424D !important;
    &:hover {
      background-color : @theme-color !important;
      color            : #FFFFFF !important;
      }
    }
  &.vc_btn3-color-black {
    background-color : #3A424D !important;
    &:hover {
      background-color : darken(#3A424D, 10%) !important;
      }
    }
  &.vc_btn3-color-green {
    background-color : #5CB85C !important;
    &:hover {
      background-color : darken(#5CB85C, 10%) !important;
      }
    }
  &.vc_btn3-color-sky {
    background-color : #31B0D5 !important;
    &:hover {
      background-color : darken(#31B0D5, 10%) !important;
      }
    }
  &.vc_btn3-color-orange {
    background-color : #E1A43C !important;
    &:hover {
      background-color : darken(#E1A43C, 10%) !important;
      }
    }
  &.vc_btn3-color-grey {
    background-color : #DCDCDC !important;
    &:hover {
      background-color : darken(#DCDCDC, 10%) !important;
      }
    }
  &.vc_btn3-color-vista-blue {
    background-color : #75D79C !important;
    &:hover {
      background-color : darken(#75D79C, 10%) !important;
      }
    }
  &.vc_btn3-color-mulled-wine {
    background-color : #50485B !important;
    &:hover {
      background-color : darken(#50485B, 10%) !important;
      }
    }
  &.vc_btn3-color-chino {
    background-color : #CEC2AB !important;
    &:hover {
      background-color : darken(#CEC2AB, 10%) !important;
      }
    }
  &.vc_btn3-color-peacoc {
    background-color : #4CADC9 !important;
    &:hover {
      background-color : darken(#4CADC9, 10%) !important;
      }
    }
  &.vc_btn3-color-violet {
    background-color : #8D7DC4 !important;
    &:hover {
      background-color : darken(#8D7DC4, 10%) !important;
      }
    }
  &.vc_btn3-color-pink {
    background-color : #FE7C71 !important;
    &:hover {
      background-color : darken(#FE7C71, 10%) !important;
      }
    }
  &.vc_btn3-color-turquoise {
    background-color : #00C1CF !important;
    &:hover {
      background-color : darken(#00C1CF, 10%) !important;
      }
    }
  &.vc_btn3-color-blue {
    background-color : #347CA4 !important;
    &:hover {
      background-color : darken(#347CA4, 10%) !important;
      }
    }
  &.vc_btn3-color-inverse {
    background-color : #555555 !important;
    &:hover {
      background-color : darken(#555555, 10%) !important;
      }
    }
  &.vc_btn3-color-danger {
    background-color : #C9302C !important;
    &:hover {
      background-color : darken(#C9302C, 10%) !important;
      }
    }
  &.vc_btn3-color-warning {
    background-color : #EC971F !important;
    &:hover {
      background-color : darken(#EC971F, 10%) !important;
      }
    }
  &.vc_btn3-color-success {
    background-color : #449D44 !important;
    &:hover {
      background-color : darken(#449D44, 10%) !important;
      }
    }
  &.vc_btn3-color-info {
    background-color : #31B0D5 !important;
    &:hover {
      background-color : darken(#31B0D5, 10%) !important;
      }
    }
  &.vc_btn3-color-primary {
    background-color : #0088CC !important;
    &:hover {
      background-color : darken(#0088CC, 10%) !important;
      }
    }
  &.vc_btn3-color-default {
    background-color : #F7F7F7 !important;
    &:hover {
      background-color : darken(#F7F7F7, 10%) !important;
      }
    }

  /*3d buttons*/
  &.vc_btn3-style-3d {
    &:hover {
      top : 0 !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-black {
    box-shadow : 0 2px 0 darken(#3A424D, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#3A424D, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-green {
    box-shadow : 0 2px 0 darken(#5CB85C, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#5CB85C, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-sky {
    box-shadow : 0 2px 0 darken(#31B0D5, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#31B0D5, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-orange {
    box-shadow : 0 2px 0 darken(#E1A43C, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#E1A43C, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-grey {
    box-shadow : 0 2px 0 darken(#DCDCDC, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#DCDCDC, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-vista-blue {
    box-shadow : 0 2px 0 darken(#75D79C, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#75D79C, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-mulled-wine {
    box-shadow : 0 2px 0 darken(#50485B, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#50485B, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-peacoc {
    box-shadow : 0 2px 0 darken(#4CADC9, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#4CADC9, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-violet {
    box-shadow : 0 2px 0 darken(#8D7DC4, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#8D7DC4, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-pink {
    box-shadow : 0 2px 0 darken(#FE7C71, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#FE7C71, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-turquoise {
    box-shadow : 0 2px 0 darken(#00C1CF, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#00C1CF, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-blue {
    box-shadow : 0 2px 0 darken(#347CA4, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#347CA4, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-inverse {
    box-shadow : 0 2px 0 darken(#555555, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#555555, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-danger {
    box-shadow : 0 2px 0 darken(#C9302C, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#C9302C, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-warning {
    box-shadow : 0 2px 0 darken(#EC971F, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#EC971F, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-success {
    box-shadow : 0 2px 0 darken(#449D44, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#449D44, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-info {
    box-shadow : 0 2px 0 darken(#31B0D5, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#31B0D5, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-primary {
    box-shadow : 0 2px 0 darken(#0088CC, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#0088CC, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-default {
    box-shadow : 0 2px 0 darken(#F7F7F7, 10%) !important;
    &:hover {
      box-shadow : 0 2px 0 darken(#F7F7F7, 20%) !important;
      }
    }
  &.vc_btn3-style-3d.vc_btn3-color-white {
    box-shadow : 0 2px 0 #E3E3E3 !important;
    &:hover {
      box-shadow : 0 2px 0 darken(@theme-color, 10%) !important;
      }
    }
  }

.vc_separator {
  margin : 25px 0 !important;
  }

.hippo-vc_text_separator-with-link {
  a {
    color : @heading-color;
    &:hover {
      color : @theme-color;
      }
    }
  }

.fixed-background {
  background-attachment : fixed;
  }

/* VISUAL COMPOSER TAB */

.vc_tta-tabs-container {
  .vc_tta-tab.vc_active {
    a {
      color : @theme-color !important;
      }
    }
  }

/* VISUAL COMPOSER TOUR TAB */
.wpb_tour .wpb_tabs_nav {
  width : 25% !important;
  }

.wpb_tour .wpb_tour_tabs_wrapper .wpb_tab {
  width : 75% !important;
  }

.wpb_tour_next_prev_nav {
  margin-left : 25% !important;
  }

.wpb_tour_tabs_wrapper > ul {
  padding-right : 30px !important;
  }

.wpb_tour_tabs_wrapper > ul > li {
  border-bottom    : 1px solid #EEEEEE;
  background-color : transparent !important;
  position         : relative;
  }

.hippo-tour-tab ul li a::after {
  content     : "\f178";
  font-family : fontawesome;
  position    : absolute;
  right       : 10px;
  top         : 9px;
  font-size   : 14px;
  color       : #DDDDDD;
  }

.wpb_tour_tabs_wrapper ul li a {
  color       : #222121;
  position    : relative;
  .rounded(0);
  white-space : normal;
  }

.wpb_tour_tabs_wrapper ul li a:hover {
  color : @theme-color;
  }

.wpb_tour_tabs_wrapper ul li.ui-tabs-active a {
  background-color : @theme-color;
  color            : #FFFFFF;
  }

.wpb_tour_tabs_wrapper .ui-tabs-panel ul {
  margin-left : 20px;
  }

.wpb_tour_tabs_wrapper .ui-tabs-panel li {
  list-style    : none;
  position      : relative;
  margin-bottom : 40px;
  }

.wpb_tour_tabs_wrapper .ui-tabs-panel li::before {
  content     : "\f059";
  font-family : 'FontAwesome';
  font-size   : 24px;
  position    : absolute;
  left        : -30px;
  top         : 5px;
  text-align  : center;
  color       : @theme-color;
  line-height : 15px;
  }

.wpb_tour_tabs_wrapper .ui-tabs-panel h3 {
  font-weight   : 400;
  margin        : 0;
  font-size     : 20px;
  margin-bottom : 10px;
  }

.wpb_tour_tabs_wrapper .ui-tabs-panel p {
  margin-bottom : 30px !important;
  }

.wpb_tour_next_prev_nav a {
  background-color : @theme-color;
  color            : #FFFFFF;
  padding          : 5px 10px;
  border-bottom    : 0 !important;
  }

.wpb_tour_next_prev_nav a:hover {
  opacity : 0.8;
  }

/*---------------------------------------------------------
  VISUAL COMPOSER ACCORDION
---------------------------------------------------------*/
.wpb_accordion_wrapper .wpb_accordion_header {
  .rounded(3px);
  }

.wpb_accordion_header:focus {
  outline : none;
  }

.shortcode-settings {
  margin-top : 30px;
  }

.shortcode-settings .wpb_accordion_header {
  display : inline-block;
  }

.shortcode-settings .wpb_accordion_wrapper .ui-state-default .ui-icon,
.shortcode-settings .wpb_accordion_wrapper .ui-state-active .ui-icon {
  left  : 5px;
  right : inherit !important;
  top   : 13px !important;
  }

.shortcode-settings .wpb_accordion_header a {
  padding          : 5px 20px 5px 30px !important;
  background-color : #DDDDDD;
  .rounded(2px);
  }

.vc_tta-panels .vc_tta-panel {
  &.vc_active {
    a {
      color : @theme-color !important;
      }
    .vc_tta-controls-icon:before {
      border-color : @theme-color !important;
      }
    .vc_tta-panel-title a {
      background : #FFFFFF !important;
      }
    }

  }

/*---------------------------------------------------------
  VISUAL COMPOSER BLOG POST GRID
---------------------------------------------------------*/

.teaser_grid_container ul {
  margin-left   : -15px;
  margin-bottom : -30px;
  }

.teaser_grid_container ul.wpb_thumbnails-fluid li {
  padding-left  : 15px !important;
  padding-right : 15px !important;
  }

li.isotope-item {
  margin-bottom : 70px !important;
  }

ul.categories_filter li {
  margin-right : 20px !important;
  color        : #222121;
  a {
    position    : relative;
    font-size   : 18px;
    font-weight : 400;
    color       : #222121;
    &:after {
      position : absolute;
      content  : "/";
      right    : -15px;
      }
    }

  &:last-child a:after {
    content : "";
    }

  &.active a,
  a:hover {
    color : @theme-color;
    }
  &.active a {
    border-bottom : 1px solid @theme-color;
    }
  }

.isotope-item .post-thumb,
.vc_slide_post .post-thumb {
  margin-bottom : 10px;
  }

.post-title {
  font-size     : 24px;
  line-height   : 30px;
  margin-bottom : 25px;
  a {
    color : #222121;
    &:hover {
      color : @theme-color;
      }
    }
  }

.vc_read_more {
  display          : inline-block;
  margin-top       : 30px;
  padding          : 5px 10px;
  font-size        : 12px;
  line-height      : 1.5;
  background-color : @theme-color;
  color            : #FFFFFF;
  text-transform   : uppercase;
  .rounded(2px);

  &:hover {
    background-color : @theme-color;
    color            : #FFFFFF;
    }
  }

/*---------------------------------------------------------
  VISUAL COMPOSER CAROUSEL IMAGE SLIDER
---------------------------------------------------------*/

.vc_carousel-inner {
  .vc_inner {
    img {
      width : 100%;
      }
    }
  }

.vc_carousel {
  .vc_carousel-control {
    width   : 50px !important;
    opacity : 0 !important;
    }

  &:hover {
    .vc_carousel-control {
      opacity : 1 !important;
      }
    }
  &:hover {
    .vc_left.vc_carousel-control {
      left : 0 !important;
      }
    .vc_right.vc_carousel-control {
      right : 0 !important;
      }
    }

  }

.vc_images_carousel.vc_carousel_vertical .vc_carousel-indicators {
  position : absolute;
  top      : auto !important;
  left     : auto !important;
  width    : 100% !important;
  li {
    display : inline-block !important;
    margin  : 0 !important;
    }
  }

.vc_images_carousel.vc_carousel_vertical .vc_carousel-indicators,
.vc_carousel-indicators {
  bottom : -40px !important;
  }

.vc_left.vc_carousel-control {
  left : 100px !important;
  }

.vc_right.vc_carousel-control {
  right : 125px !important;
  }

.vc_images_carousel .vc_carousel-control .icon-prev,
.vc_images_carousel .vc_carousel-control .icon-next {
  &:before {
    font-family : Fontawesome;
    line-height : 45px !important;
    font-size   : 30px !important;
    top         : -5px !important;
    }
  }

.vc_carousel-control .icon-prev,
.vc_carousel-control .icon-next,
.flex-direction-nav .flex-prev,
.flex-direction-nav .flex-next {
  width       : 40px !important;
  height      : 40px !important;
  .rounded(3px);
  text-shadow : none;
  color       : #FFFFFF;
  line-height : 45px;
  }

.vc_carousel-indicators li,
.flex-control-paging li a {
  width      : 10px !important;
  height     : 5px !important;
  background : @theme-color !important;
  border     : 0 !important;
  .transition(width 0.3s);
  &.vc_active,
  &.flex-active {
    width : 25px !important;
    }
  }

/*---------------------------------------------------------
  VISUAL COMPOSER FLEX SLIDE
---------------------------------------------------------*/

.flex-direction-nav {
  opacity : 0;
  .transition(400ms);
  a {
    width       : 40px !important;
    height      : 40px !important;
    text-align  : center;
    line-height : 47px !important;
    overflow    : hidden;
    &:before {
      font-size   : 30px !important;
      font-family : Fontawesome !important;
      display     : block !important;
      line-height : 40px !important;
      }
    }
  .flex-prev:before {
    content : "\f104" !important;
    }
  .flex-next {
    text-align : center !important;
    &:before {
      content : "\f105" !important;
      }
    }
  }

.flexslider {
  box-shadow : none !important;
  border     : 0 !important;
  &:hover {
    .flex-prev {
      left : 0 !important;
      }
    .flex-next {
      right : 0 !important;
      }
    .flex-direction-nav {
      opacity : 1;
      }
    }
  }

.flex-control-nav {
  bottom : -50px !important;
  li {
    margin : 0 2px !important;
    }
  }

/*---------------------------------------------------------
  VISUAL COMPOSER NIVO SLIDER
---------------------------------------------------------*/

.theme-default {

  position : relative;
  .nivoSlider {
    box-shadow : none !important;
    }
  .nivo-directionNav {
    a {
      width       : 40px !important;
      height      : 40px !important;
      background  : @theme-color !important;
      line-height : 40px;
      overflow    : hidden;
      color       : #FFFFFF;
      text-align  : center;
      text-indent : 0 !important;
      .rounded(3px);
      &:before {
        content     : "";
        font-family : Fontawesome;
        font-size   : 30px;
        display     : block;
        }
      }
    }
  a.nivo-prevNav {
    left : 100px !important;
    }
  a.nivo-nextNav {
    right : 100px !important;
    }
  a.nivo-prevNav,
  a.nivo-nextNav {
    opacity : 0.7 !important;
    &:hover {
      opacity : 1 !important;
      }
    }
  .nivo-controlNav {
    position : absolute;
    width    : 100%;
    bottom   : -55px;
    z-index  : 999;
    a {
      background    : @theme-color !important;
      width         : 10px !important;
      height        : 5px !important;
      border-radius : 5px !important;
      &.active {
        width : 25px !important;
        }
      }
    }
  }

.nivo-directionNav .nivo-prevNav:before {
  content : "\f104" !important;
  }

.nivo-directionNav .nivo-nextNav:before {
  content : "\f105" !important;
  }

/*---------------------------------------------------------
  VISUAL COMPOSER PROGRESSBAR
---------------------------------------------------------*/

.vc_progress_bar {
  .vc_single_bar {
    .rounded(30px) !important;
    margin-bottom : 70px !important;
    box-shadow    : none !important;
    height        : 20px;
    .vc_bar {
      .rounded(30px) !important;
      }

    .vc_label {
      top         : -35px;
      padding     : 0 !important;
      font-size   : 18px !important;
      color       : @content-color !important;
      text-shadow : none !important;
      }
    }
  }

/*---------------------------------------------------------
  VISUAL COMPOSER PIE CHART
---------------------------------------------------------*/

.vc_pie_chart {
  h4 {
    margin-top : 20px;
    }
  }

/*---------------------------------------------------------
  VISUAL COMPOSER TOGGLE
---------------------------------------------------------*/

.vc_toggle {
  margin  : 0 0 10px 0 !important;
  border  : 1px solid #EDEDED;
  padding : 15px !important;
  }

/*---------------------------------------------------------
  VISUAL COMPOSER MESSAGE BOX
---------------------------------------------------------*/

.vc_message_box {
  margin-bottom : 15px !important;
  }

/*---------------------------------------------------------
  VISUAL COMPOSER POSTS SLIDER
---------------------------------------------------------*/

.wpb_gallery_slides {
  .slides {
    overflow : hidden;
    }
  }

/*----------------------------------
  VISUAL COMPOSER VIDEO BACKGROUND
------------------------------------*/

.vc_video-bg {
  &:before {
    content    : "";
    position   : absolute;
    width      : 100%;
    height     : 100%;
    left       : 0;
    top        : 0;
    background : rgba(0, 0, 0, 0.7);
    }
  }

/*---------------------------------------------------------
  FOOTER SECTION
---------------------------------------------------------*/

.footer {
  .widget {
    margin-bottom  : 2.2rem;
    padding-bottom : 0;
    .font-size(-1);
    .widget-title {
      .font-size(1);
      color          : @footer-text-color;
      margin-bottom  : .7rem;
      border         : none;
      text-transform : uppercase;
      span {
        font-weight : 700;
        }
      }
    }

  /*Footer Top Section*/
  .footer-top-wrapper {
    padding          : 0 60px;
    background-color : @footer-bg-color;

    @media @ms-screen {
      padding : 0 30px;
      }

    .footer-widgets-wrapper {
      overflow : hidden;

      .textwidget {
        strong {
          color : fade(@footer-text-color, 60%);
          }
        }

      .widget_hippo_latest_tweet {
        margin-top : 2.2rem;
        overflow   : hidden;

        .widget-title {
          margin-bottom : 13px;
          }
        }
      }

    /* footer widget ul */
    ul {
      li {
        border-bottom : 1px solid fade(@footer-text-color, 5%);
        list-style    : none;

        &:last-child {
          border-bottom : none;
          margin-bottom : 0;
          }

        &.current_page_item > a {
          color : @footer-text-color !important;
          }
        a {
          color          : fade(@footer-text-color, 60%);
          text-transform : capitalize;
          padding        : 5px 0;
          display        : block;
          .transition(all .2s);

          &:hover {
            color : @theme-color;
            }
          }
        }
      }

    .textwidget {
      color : fade(@footer-text-color, 60%);
      }
    }

  /*---------------------------------------------------------
  COPYRIGHT SECTION
---------------------------------------------------------*/
  .copyright {
    padding          : 20px 60px;
    background-color : darken(@footer-bg-color, 3.3%);

    @media @ms-screen {
      padding : 20px 30px;
      }

    .copyright-info span {
      color      : fade(@footer-text-color, 50%);
      display    : block;
      margin-top : 12px;
      .font-size(-1);
      @media @ms-screen {
        font-size   : .8rem;
        margin-top  : 20px;
        line-height : 1.5em;
        text-align  : center;
        }

      a {
        border-bottom : 1px solid transparent;
        &:hover {
          color : fade(@theme-color, 50%);
          }
        }
      }

    /*Social icon*/
    .social-section {
      text-align : right;
      @media @ms-screen {
        margin-top : 20px;
        text-align : center;
        }
      .social-shares {
        li {
          display : inline-block;
          margin  : 0 1px;
          a i {
            color       : @footer-text-color;
            display     : inline-block;
            font-size   : 1rem;
            width       : 30px;
            height      : 30px;
            line-height : 30px;
            .transition(all 0.3s ease 0s);

            }

          &:hover i {
            &.fa-rss {
              color : #F26522;
              }
            &.fa-facebook {
              color : #3B5998;
              }
            &.fa-twitter {
              color : #55ACEE;
              }
            &.fa-google-plus {
              color : #DD4B39;
              }
            &.fa-youtube {
              color : #DD4B39;
              }
            &.fa-flickr {
              color : #FF0084;
              }
            &.fa-linkedin {
              color : #0274B3;
              }
            &.fa-vimeo-square {
              color : #1AB7EA;
              }
            &.fa-vimeo-square {
              color : #1AB7EA;
              }
            &.fa-instagram {
              color : #6A453B;
              }
            &.fa-dribbble {
              color : #C32361;
              }
            &.fa-tumblr {
              color : #395976;
              }
            &.fa-pinterest {
              color : #CC2127;
              }
            &.fa-skype {
              color : #00AFF0;
              }
            }

          &:last-child {
            @media @ms-screen {
              display : block;
              }
            }
          }
        }
      }

    }
  //Copyright End
  }

/*-------------------------------------------------------
  BACK TO TOP
---------------------------------------------------------*/
#toTop {
  margin-left : 30px;
  width       : 50px;
  height      : 50px;
  display     : block;
  font-size   : 1.250rem;
  color       : @footer-text-color;
  cursor      : pointer;
  text-align  : center;
  line-height : 48px;
  background  : @footer-bg-color;
  .box-shadow(0 5px 15px fade(@black, 50%));
  .transition(all 0.3s ease 0s);

  &:hover {
    background : @theme-color;
    }

  @media @ms-screen {
    margin : 20px auto 0;
    }

  }

/*-------------------------------------------------------
  PAGES
---------------------------------------------------------*/

.page-layout .site-main {
  padding : 0 40px;
  }

.single-service,
.single-portfolio {
  .entry-thumbnail {
    margin-bottom : 50px;
    }
  }

/*-------------------------------------------------------
  PAGE SIDEBAR
---------------------------------------------------------*/

.page-template-page-sidebar-left,
.single-service,
.single-portfolio {
  .site-main {
    padding-left : 20px;

    @media @ms-screen {
      padding-left : 0;
      }
    }
  }

.page-template-page-sidebar-right {
  .site-main {
    padding-right : 20px;
    }
  }

/*--------------------------------------------------
  FAQ PAGE
--------------------------------------------------*/
.faqs-wrapper {
  .faq-list {
    margin-bottom : 40px;

    .media {
      i {
        font-size    : 24px;
        position     : relative;
        top          : 10px;
        padding-left : 2px;
        width        : 50px !important;
        }
      }
    }
  }

/*-------------------------------------------------
  FAQ PAGE TWO
-------------------------------------------------*/

.css-faq-content {
  h2 {
    margin : 0 0 20px;
    }

  .vc_tta-panel-heading {
    background-color : transparent !important;
    border-width     : 0 !important;
    border-bottom    : 1px solid #F0F0F0 !important;
    }

  .vc_tta-panel-title {
    font-size : 16px;
    }

  .vc_tta-panels .vc_tta-panel.vc_active .vc_tta-panel-title a {
    background : #F1F1F1 !important;
    }

  .vc_tta-shape-rounded.vc_tta-o-shape-group:not(.vc_tta-o-no-fill) .vc_tta-panel:last-child:not(:first-child) .vc_tta-panel-heading,
  .vc_tta-shape-rounded.vc_tta-o-shape-group:not(.vc_tta-o-no-fill) .vc_tta-panel:last-child:not(:first-child) .vc_tta-panel-body {
    border-radius : 0 !important;
    }

  .vc_tta-container {
    margin-bottom : 40px;
    }

  }

/*--------------------------------------------------
  TAB
--------------------------------------------------*/

.vc_general {
  &.vc_tta-style-outline.vc_tta-color-grey.vc_tta-shape-square.vc_tta-tabs-position-top {
    .vc_tta-tabs-container {
      .vc_tta-tabs-list {
        .vc_tta-tab > a {
          color            : lighten(@content-color, 27.5%);
          font-weight      : 700;
          border           : none !important;
          background-color : transparent;

          &:hover {
            color : @heading-color;
            }
          }
        .vc_tta-tab.vc_active > a {
          color         : @heading-color !important;
          border-bottom : 3px solid @heading-color !important;
          }
        .vc_tta-tab:first-child > a {
          padding-left : 0 !important;
          }
        }
      }
    .vc_tta-panels-container {
      .vc_tta-panels {
        border-left   : none;
        border-right  : none;
        border-bottom : none;
        border-top    : 1px solid @border-color !important;

        @media @ms-screen {
          border-top : none !important;
          }

        .vc_tta-panel-body {
          padding-left  : 0;
          padding-right : 0;

          @media @ms-screen {
            padding-left  : 20px;
            padding-right : 20px;
            }
          }
        .vc_tta-panel-title > a {
          color : lighten(@content-color, 27.5%) !important;
          }
        }
      }
    }
  }

/*---------------------------------------------------
   PULLQUOTE STYLES
-----------------------------------------------------*/

.hippo-pullquote {
  font-size   : .9rem;
  line-height : 2em;
  font-style  : italic;
  color       : fade(@content-color, 80%);
  margin      : 10px 0;

  @media @sm-screen {
    width         : 100% !important;
    margin-bottom : 2em;
    }
  &.pull-left {
    margin-right : 2em;
    @media @sm-screen {
      margin-right : 0;
      }
    }
  &.pull-right {
    margin-left : 2em;
    @media @sm-screen {
      margin-left : 0;
      }
    }
  &.border-right {
    border-right : 1px solid @border-color;
    padding      : 1em 2em 1em 0;
    @media @sm-screen {
      border : none;
      }
    }
  &.border-left {
    border-left : 1px solid @border-color;
    padding     : 1em 0 1em 2em;
    @media @sm-screen {
      border : none;
      }
    }
  }

/*--------------------------------------------------
 EXTRA CLASSES
--------------------------------------------------*/
.display-block {
  display : block !important;
  }

.marking {
  background-color : @theme-color;
  color            : lighten(@content-color, 100%);
  }

/*---------------------------------------------------
  PAGE PRE-LOADER ANIMATION AND KEYFRAME
---------------------------------------------------*/

.loader {
  position : relative;
  width    : 100%;
  height   : 100%;

  .path {
    stroke-dasharray  : 2, 200;
    stroke-dashoffset : 2;
    .animation(loader-dash 1.5s ease-in-out infinite);
    stroke-linecap    : round;
    fill              : none;
    stroke            : @white;
    stroke-width      : 10;
    }
  }

.page-pre-loader-wrapper {
  width            : 100%;
  height           : 100%;
  position         : fixed;
  z-index          : 99999;
  background-color : @white;
  }

.page-pre-loader {
  .animation(loader-rotate 2s ease-in-out infinite);
  position    : relative;
  width       : 50px;
  height      : 50px;
  top         : 50%;
  left        : 50%;
  margin-top  : -25px;
  margin-left : -25px;

  .path {
    stroke-dasharray  : 2, 200;
    stroke-dashoffset : 2;
    -webkit-animation : loader-dash 1.5s ease-in-out infinite, loader-color 6s ease-in-out infinite;
    -moz-animation    : loader-dash 1.5s ease-in-out infinite, loader-color 6s ease-in-out infinite;
    -ms-animation     : loader-dash 1.5s ease-in-out infinite, loader-color 6s ease-in-out infinite;
    -o-animation      : loader-dash 1.5s ease-in-out infinite, loader-color 6s ease-in-out infinite;
    animation         : loader-dash 1.5s ease-in-out infinite, loader-color 6s ease-in-out infinite;
    stroke-linecap    : round;
    fill              : none;
    stroke            : @white;
    stroke-width      : 2;
    }
  }

@-webkit-keyframes loader-rotate {
  100% {
    .rotate(360deg);
    }
  }

@-moz-keyframes loader-rotate {
  100% {
    .rotate(360deg);
    }
  }

@-ms-keyframes loader-rotate {
  100% {
    .rotate(360deg);
    }
  }

@-o-keyframes loader-rotate {
  100% {
    .rotate(360deg);
    }
  }

@keyframes loader-rotate {
  100% {
    .rotate(360deg);
    }
  }

@-webkit-keyframes loader-dash {
  0% {
    stroke-dasharray  : 1, 200;
    stroke-dashoffset : 0;
    }
  50% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -35;
    }
  100% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -124;
    }
  }

@-ms-keyframes loader-dash {
  0% {
    stroke-dasharray  : 1, 200;
    stroke-dashoffset : 0;
    }
  50% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -35;
    }
  100% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -124;
    }
  }

@-moz-keyframes loader-dash {
  0% {
    stroke-dasharray  : 1, 200;
    stroke-dashoffset : 0;
    }
  50% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -35;
    }
  100% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -124;
    }
  }

@-o-keyframes loader-dash {
  0% {
    stroke-dasharray  : 1, 200;
    stroke-dashoffset : 0;
    }
  50% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -35;
    }
  100% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -124;
    }
  }

@keyframes loader-dash {
  0% {
    stroke-dasharray  : 1, 200;
    stroke-dashoffset : 0;
    }
  50% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -35;
    }
  100% {
    stroke-dasharray  : 89, 200;
    stroke-dashoffset : -124;
    }
  }

@-webkit-keyframes loader-color {
  100%, 0% {
    stroke : @black;
    }
  40% {
    stroke : @yellow;
    }
  66% {
    stroke : @blue;
    }
  80%, 90% {
    stroke : @green;
    }
  }

@-moz-keyframes loader-color {
  100%, 0% {
    stroke : @black;
    }
  40% {
    stroke : @yellow;
    }
  66% {
    stroke : @blue;
    }
  80%, 90% {
    stroke : @green;
    }
  }

@-ms-keyframes loader-color {
  100%, 0% {
    stroke : @black;
    }
  40% {
    stroke : @yellow;
    }
  66% {
    stroke : @blue;
    }
  80%, 90% {
    stroke : @green;
    }
  }

@-o-keyframes loader-color {
  100%, 0% {
    stroke : @black;
    }
  40% {
    stroke : @yellow;
    }
  66% {
    stroke : @blue;
    }
  80%, 90% {
    stroke : @green;
    }
  }

@keyframes loader-color {
  100%, 0% {
    stroke : @black;
    }
  40% {
    stroke : @yellow;
    }
  66% {
    stroke : @blue;
    }
  80%, 90% {
    stroke : @green;
    }
  }