@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=Raleway:300,400,500,600,700&subset=latin-ext");
@font-face {
  font-family: "catalog";
  src: url("fonts/catalog7eab.eot?58725167");
  src: url("fonts/catalog7eab.eot?58725167#iefix") format("embedded-opentype"), url("fonts/catalog7eab.woff2?58725167") format("woff2"), url("fonts/catalog7eab.woff?58725167") format("woff"), url("fonts/catalog7eab.ttf?58725167") format("truetype"), url("fonts/catalog7eab.svg?58725167#catalog") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
/*
@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: 'catalog';
    src: url('../fonts/catalog.svg?58725167#catalog') format('svg');
  }
}
*/
[class^="icon-"]:before,
[class*=" icon-"]:before {
  font-family: "catalog";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  /* opacity: .8; */
  /* For safety - reset parent styles, that can break glyph codes*/
  font-variant: normal;
  text-transform: none;
  /* fix buttons height, for twitter bootstrap */
  line-height: 1em;
  /* Animation center compensation - margins should be symmetric */
  /* remove if not needed */
  margin-left: 0.2em;
  /* you can be more comfortable with increased icons size */
  /* font-size: 120%; */
  /* Font smoothing. That was taken from TWBS */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Uncomment for 3D effect */
  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

.icon-download:before {
  content: "\e800";
}

/* '' */
.icon-share:before {
  content: "\e801";
}

/* '' */
.icon-down:before {
  content: "\e802";
}

/* '' */
.icon-up:before {
  content: "\e803";
}

/* '' */
.icon-thumbs:before {
  content: "\e804";
}

/* '' */
.icon-close:before {
  content: "\e805";
}

/* '' */
.icon-search:before {
  content: "\e806";
}

/* '' */
.icon-user:before {
  content: "\e807";
}

/* '' */
.icon-shop:before {
  content: "\e835";
}

/* '' */
.icon-right:before {
  content: "\f006";
}

/* '' */
.icon-left:before {
  content: "\f007";
}

/* '' */
.icon-twitter:before {
  content: "\f099";
}

/* '' */
.icon-facebook:before {
  content: "\f09a";
}

/* '' */
.icon-mail:before {
  content: "\f0e0";
}

/* '' */
.icon-pinterest:before {
  content: "\f231";
}

/* '' */
.icon-blogger:before {
  content: "\f314";
}

/* '' */

*,
body {
  font-family: "Raleway", sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}

body {
  height: 100%;
  overflow: hidden;
}

.title{
    margin:0;
    padding:0;
}

.item{
    color:#000000;
}

.btn{
    line-height:initial;
}
#catalog .active{
    background:#ffffff !important;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-slider:hover .slick-prev,
.slick-slider:hover .slick-next {
  opacity: 1;
}

.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before, .slick-track:after {
  content: "";
  display: table;
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
  padding:0;
  filter:none !important;
  opacity:1 !important;
}

[dir="rtl"] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slider */
.slick-loading .slick-list {
  background: #ffffff url("ajax-loader.gif") center center no-repeat;
}

/* Arrows */
.slick-prev,
.slick-next {
  margin:0;
  z-index: 10;
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: rgba(255, 255, 255, 0.4);
  opacity: 0;
  -webkit-transition: opacity 0.3s linear;
  transition: opacity 0.3s linear;
}

.slick-prev:hover,
.slick-next:hover {
  color: transparent;
  outline: none;
  background: rgba(255, 255, 255, 0.8);
}

.slick-prev:hover:before,
.slick-next:hover:before {
  opacity: 1;
}

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: 0.25;
}

.slick-prev:before,
.slick-next:before {
  position: absolute;
  font-family: "catalog";
  font-size: 27px;
  line-height: 0.1;
  opacity: 0.75;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-prev {
  left: 0px;
}

[dir="rtl"] .slick-prev {
  right: 0px;
  left: auto;
}

.slick-prev:before {
  content: "\f007";
  left: 12px;
}

[dir="rtl"] .slick-prev:before {
  content: "\f006";
  right: 12px;
}

.slick-next {
  right: 0px;
}

[dir="rtl"] .slick-next {
  right: auto;
  left: 0px;
}

.slick-next:before {
  content: "\f006";
  right: 12px;
}

[dir="rtl"] .slick-next:before {
  content: "\f007";
  left: 12px;
}

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px;
}

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-family: "slick";
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: "•";
  text-align: center;
  opacity: 0.25;
  color: #000000;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #000000;
}

/*! nouislider - 11.1.0 - 2018-04-02 11:18:13 */
/* Functional styling;
 * These styles are required for noUiSlider to function.
 * You don't need to change these rules to apply your design.
 */
.noUi-target,
.noUi-target * {
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  -ms-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.noUi-target {
  position: relative;
  direction: ltr;
}

.noUi-base,
.noUi-connects {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}

/* Wrapper for all connect elements.
  */
.noUi-connects {
  overflow: hidden;
  z-index: 0;
}

.noUi-connect,
.noUi-origin {
  will-change: transform;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/* Offset direction
  */
html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
  left: auto;
  right: 0;
}

/* Give origins 0 height/width so they don't interfere with clicking the
  * connect elements.
  */
.noUi-vertical .noUi-origin {
  width: 0;
}

.noUi-horizontal .noUi-origin {
  height: 0;
}

.noUi-handle {
  position: absolute;
}

.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
  -webkit-transition: transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.noUi-state-drag * {
  cursor: inherit !important;
}

/* Slider size and handle placement;
  */
.noUi-horizontal {
  height: 18px;
}

.noUi-horizontal .noUi-handle {
  width: 40px;
  height: 16px;
  left: -17px;
  top: -6px;
}

.noUi-vertical {
  width: 18px;
}

.noUi-vertical .noUi-handle {
  width: 28px;
  height: 34px;
  left: -6px;
  top: -17px;
}

html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
  right: -17px;
  left: auto;
}

/* Styling;
  * Giving the connect element a border radius causes issues with using transform: scale
  */
.noUi-target {
  background: #ffffff;
  cursor: pointer;
}

.noUi-target:after {
  content: "";
  display: block;
  position: absolute;
  height: 3px;
  width: 100%;
  background: #cccccc;
  left: 0;
  top: 7px;
}

.noUi-connects {
  border-radius: 3px;
}

.noUi-connect {
  background: #3fb8af;
}

/* Handles and cursors;
  */
.noUi-draggable {
  cursor: ew-resize;
}

.noUi-vertical .noUi-draggable {
  cursor: ns-resize;
}

.noUi-handle {
  background: #000000;
  margin-top: 7px;
}

/* Handle stripes;
  */
.noUi-handle:before,
.noUi-handle:after {
  content: "";
  display: block;
  position: absolute;
  height: 4px;
  width: 4px;
  background: #ffffff;
  left: 15px;
  top: 6px;
}

.noUi-handle:after {
  left: auto;
  right: 15px;
}

.noUi-vertical .noUi-handle:before,
.noUi-vertical .noUi-handle:after {
  width: 14px;
  height: 1px;
  left: 6px;
  top: 14px;
}

.noUi-vertical .noUi-handle:after {
  top: 17px;
}

/* Disabled state;
  */
[disabled] .noUi-connect {
  background: #b8b8b8;
}

[disabled].noUi-target,
[disabled].noUi-handle,
[disabled] .noUi-handle {
  cursor: not-allowed;
}

/* Base;
  *
  */
.noUi-pips,
.noUi-pips * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.noUi-pips {
  position: absolute;
  color: #999;
}

/* Values;
  *
  */
.noUi-value {
  position: absolute;
  white-space: nowrap;
  text-align: center;
}

.noUi-value-sub {
  color: #ccc;
  font-size: 10px;
}

/* Markings;
  *
  */
.noUi-marker {
  position: absolute;
  background: #ccc;
}

.noUi-marker-sub {
  background: #aaa;
}

.noUi-marker-large {
  background: #aaa;
}

/* Horizontal layout;
  *
  */
.noUi-pips-horizontal {
  padding: 10px 0;
  height: 80px;
  top: 100%;
  left: 0;
  width: 100%;
}

.noUi-value-horizontal {
  -webkit-transform: translate(-50%, 50%);
  transform: translate(-50%, 50%);
}

.noUi-rtl .noUi-value-horizontal {
  -webkit-transform: translate(50%, 50%);
  transform: translate(50%, 50%);
}

.noUi-marker-horizontal.noUi-marker {
  margin-left: -1px;
  width: 2px;
  height: 5px;
}

.noUi-marker-horizontal.noUi-marker-sub {
  height: 10px;
}

.noUi-marker-horizontal.noUi-marker-large {
  height: 15px;
}

/* Vertical layout;
  *
  */
.noUi-pips-vertical {
  padding: 0 10px;
  height: 100%;
  top: 0;
  left: 100%;
}

.noUi-value-vertical {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%, 0);
  padding-left: 25px;
}

.noUi-rtl .noUi-value-vertical {
  -webkit-transform: translate(0, 50%);
  transform: translate(0, 50%);
}

.noUi-marker-vertical.noUi-marker {
  width: 5px;
  height: 2px;
  margin-top: -1px;
}

.noUi-marker-vertical.noUi-marker-sub {
  width: 10px;
}

.noUi-marker-vertical.noUi-marker-large {
  width: 15px;
}

.noUi-tooltip {
  display: none;
  position: absolute;
  border: 1px solid #000000;
  background: #ffffff;
  color: #000000;
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}

.noUi-horizontal .noUi-tooltip {
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
  left: 50%;
  top: 170%;
}

.noUi-vertical .noUi-tooltip {
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  top: 50%;
  right: 120%;
}

.noUi-handle .arrow {
  display: none;
  position: absolute;
  left: 50%;
  top: 175%;
}

.noUi-handle .arrow:after,
.noUi-handle .arrow:before {
  bottom: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.noUi-handle .arrow:after {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 9px;
  left: 50%;
  margin-left: -9px;
}

.noUi-handle .arrow:before {
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #000000;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}

.noUi-active .noUi-tooltip,
.noUi-active .arrow {
  display: block;
}

/*#top-content {
  position: relative;
  z-index: 2;
  height: 30px;
  background: $white-color;

  @include respond-below(sm) {
    height: 50px;
  }

  .navbar {
    margin: 0;
    border-radius: 0;
    min-height: 30px;
    height: 30px;
    border: 0;
    .container {
      @include respond-below(md) {
        margin: 0;
        padding: 0;
        width: 100%;
      }

      .navbar-header {
        margin: 0;
        .navbar-brand {
          display: none;
          height: 50px;
          width: 140px;
          line-height: 50px;
          text-align: center;
          padding: 0;
          margin: 0 auto;
          float: none;
          color: $black-color;

          @include respond-below(sm) {
            display: block;
          }

          img {
            padding-top: 7px;
            width: 100%;
          }

          &.active,
          &.hover,
          &:active,
          &:hover {
            color: $black-color;
          }
        }
        .navbar-toggle {
          .icon-bar {
            background: $black-color;
          }
        }
        .navbar-shop-btn {
          display: block;
          color: $black-color;
          font-size: 20px;
          line-height: 30px;
          margin-top: 8px;
          @include respond-above(sm) {
            display: none;
          }
        }
      }
      .navbar-collapse {
        @include respond-below(sm) {
          background: $white-color;
          .navbar-nav {
            margin: 0;
            li {
              border-bottom: 1px solid $light-gray-color;
              padding: 10px 0;
              a {
                background: none;
                color: $black-color;
                i {
                  display: none;
                }
                &.active,
                &.hover,
                &:active,
                &:hover {
                  color: $primary-color;
                }
              }
            }
            &.navbar-right {
              display: none;
            }
          }
        }
        @include respond-above(sm) {
          background: none;
          border: 0;
          padding: 0 15px 0 10px;
          .navbar-nav {
            li {
              a {
                background: none;
                padding: 0;
                color: $black-color;
                font-size: 11px;
                line-height: 31px;
                padding-right: 10px;
                i {
                  font-size: 16px;
                }
                &.active,
                &.hover,
                &:active,
                &:hover {
                  color: $primary-color;
                }
              }
            }
            &.navbar-left li {
              a {
                padding: 0;
                padding-left: 20px;
                &:after {
                  content: "|";
                  margin-left: 20px;
                  color: $light-gray-color;
                }
              }
              &:first-child a {
                padding-left: 0;
              }
              &:last-child a {
                &:after {
                  content: "";
                  margin: 0;
                }
              }
            }
          }
        }
      }
    }
  }
}*/
.lock {
  pointer-events: none;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

#catalog {
  position: relative;
  z-index: 1;
}

#catalog * {
  outline: none;
}

#catalog-navbar {
  position: relative;
  z-index: 2;
  background: #ffffff;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  height: 40px;
  width: 100%;
  text-align: center;
}

@media (max-width: 767px) {
  #catalog-navbar {
    height: 80px;
  }
}

#catalog-navbar .navbar-btn {
  margin: 0;
  background: none;
  border: 0;
  color: #000000;
  height: 38px;
  padding: 1px 7px 2px;
  text-decoration: none;
}

@media (max-width: 991px) {
  #catalog-navbar .navbar-btn {
    font-size: 18px;
  }
}

#catalog-navbar .navbar-btn:hover {
  color: #33baf8;
}

@media (max-width: 991px) {
  #catalog-navbar .container {
    margin: 0;
    padding: 0;
    width: 100%;
  }
}

#catalog-navbar .container .flex {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#catalog-navbar .container .navbar-l {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

@media (max-width: 767px) {
  #catalog-navbar .container .navbar-l {
    position: absolute;
    top: 0;
  }
}

#catalog-navbar .container .navbar-c {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 auto;
          flex: 1 1 auto;
  padding: 10px 34px;
}

@media (max-width: 767px) {
  #catalog-navbar .container .navbar-c {
    margin-top: 35px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
  }
}

#catalog-navbar .container .navbar-r {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}

@media (max-width: 767px) {
  #catalog-navbar .container .navbar-r {
    position: absolute;
    top: 0;
    right: 5px;
  }
}

#catalog-slider-bar .slider-bar-tooltip .title {
  margin-bottom: 10px;
}


#catalog-slider-bar .slider-bar-tooltip.single {
  width: 100px;
}

#catalog-slider-bar .slider-bar-tooltip.double {
  width: 200px;
}

#catalog-slider-bar .slider-bar-tooltip img {
  width: 100px;
  height: auto;
}

#catalog-download-btn {
  line-height: 36px;
}

#catalog-close-btn {
  line-height: 36px;
  font-size: 20px;
  display: none;
  position: absolute;
  right: 0px;
  top: 0px;
}

@media (min-width: 992px) {
  #catalog-close-btn {
    display: block;
  }
}

#catalog-slider-wrapper {
  position: relative;
  z-index: 1;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
}

#catalog-slider {
  position: relative;
  height: 100%;
  width: 100%;
}

.item img.content {
  width: 100%;
  height: 100%;
  border: 0 !important;
}

.item img.content.img-zoomable {
  cursor: -webkit-zoom-in !important;
  cursor: zoom-in !important;
}

.item .content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.item .content .intro {
  padding: 30px 50px;
  text-align: center;
}

.item .content .intro h1 {
  font-size: 1.1em;
  font-size: 1.1vw;
}

.item .content .intro h2 {
  font-size: 1em;
  font-size: 1vw;
}

.item .content .intro p {
  font-size: 0.9em;
  font-size: 0.9vw;
}

#catalog-thumbs {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 4;
}

#catalog-thumbs .header {
  opacity: 0;
  visibility: hidden;
  background: #ffffff;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  height: 40px;
  width: 100%;
  color: #000000;
}

#catalog-thumbs .header span {
  font-size: 16px;
  margin-left: 10px;
  line-height: 38px;
}

#catalog-thumbs .header button {
  background: none;
  border: 0;
  float: right;
  margin-top: 2px;
}

#catalog-thumbs .header i {
  margin-left: 10px;
  margin-top: 4px;
  float: left;
  font-size: 20px;
}

#catalog-thumbs.active {
  opacity: 1;
  visibility: visible;
}

#catalog-thumbs.active .header {
  opacity: 1;
  visibility: visible;
}

#catalog-thumbs-viewport {
  overflow-y: scroll;
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
}

#catalog-thumbs-viewport .item {
  float: left;
  padding: 20px;
}

@media (min-width: 1200px) {
  #catalog-thumbs-viewport .item {
    width: 16.6666667%;
  }
  #catalog-thumbs-viewport .item:nth-child(6n + 1) {
    clear: both;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  #catalog-thumbs-viewport .item {
    width: 25%;
  }
  #catalog-thumbs-viewport .item:nth-child(4n + 1) {
    clear: both;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  #catalog-thumbs-viewport .item {
    width: 33.3333333%;
  }
  #catalog-thumbs-viewport .item:nth-child(3n + 1) {
    clear: both;
  }
}

@media (min-width: 576px) and (max-width: 767px) {
  #catalog-thumbs-viewport .item {
    width: 50%;
  }
  #catalog-thumbs-viewport .item:nth-child(2n + 1) {
    clear: both;
  }
}

#catalog-thumbs-viewport .item .title {
  clear: both;
  text-align: center;
  display: block;
  width: 100%;
}

#catalog-thumbs-viewport .item img {
  width: 100%;
  height: 100%;
}

#catalog-thumbs-viewport .item .img-holder {
  width: 50%;
  cursor: pointer;
}

#catalog-thumbs-viewport .item.single .img-holder {
  margin: 0 auto;
}

#catalog-thumbs-viewport .item.double .img-holder {
  float: left;
}

#catalog-thumbs-viewport .item.double .img-holder:first-child {
  text-align: right;
}

#catalog-thumbs-viewport .item.double .img-holder:last-child {
  text-align: left;
}

#catalog-zoom {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #ffffff;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 5;
}

#catalog-zoom.active {
  opacity: 1;
  visibility: visible;
}

#catalog-zoom-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#catalog-zoom-image {
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: move;
}

#product-detail-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 5;
}

#product-detail-wrapper.active {
  opacity: 1;
  visibility: visible;
}

#product-detail-viewport {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -288px;
  width: 576px;
  height: 400px;
  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 5px;
  overflow: hidden;
}

@media (max-width: 575px) {
  #product-detail-viewport {
    width: 100%;
    left: 0;
    margin-left: 0;
  }
}

#product-detail-slider .slick-prev,
#product-detail-slider .slick-next {
  opacity: 1;
}

#product-detail-slider .item iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

#product-detail-close-btn {
  position: absolute;
  right: 0;
  font-size: 18px;
  padding-top: 7px;
  z-index: 1;
  color: #000000;
  background: none;
  border: none;
  outline: none;
}

#products-slider-wrapper {
  position: fixed;
  z-index: 2;
  width: 100%;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: height 0.3s ease-in-out;
  transition: height 0.3s ease-in-out;
  height: 0px;
}

#products-slider-wrapper.active {
  height: 405px;
}

#products-slider-wrapper.active.iframe-mode {
  height: 325px;
}

#products-slider-wrapper.active #products-slider-toggle-btn .icon:before {
  content: "\e802";
}

#products-slider-wrapper.disabled {
  height: 0px;
}

#products-slider-wrapper.disabled #products-slider-toggle-btn {
  bottom: -45px;
}

#products-slider {
  text-align: center;
  background: #ffffff;
  border-top: 1px solid #cccccc;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
  height: 405px;
  width: 100%;
}

#products-slider .slick-next,
#products-slider .slick-prev {
  width: 60px;
  height: 100%;
  background: #ffffff;
  opacity: 1;
}

#products-slider .slick-next {
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white));
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 100%);
}

#products-slider .slick-prev {
  background: -webkit-gradient(linear, left top, right top, from(white), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to right, white 0%, rgba(255, 255, 255, 0) 100%);
}

#products-slider .item {
  text-align: center;
  position: relative;
  overflow: hidden;
}

#products-slider .item .link {
  cursor: pointer;
}

#products-slider .item .link .img-holder {
  margin: 0 auto;
  width: 100%;
  max-width: 230px;
  height: 230px;
  overflow: hidden;
  text-align: center;
}

#products-slider .item .link .img-holder img {
  margin: 0 auto;
  width: 100%;
  height: auto;
}

#products-slider .item .info {
  width: 100%;
  padding: 20px;
  height: 110px;
  display: block;
  overflow: hidden;
}

#products-slider .item .info .title {
  white-space: normal;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 5px;
}

#products-slider .item .info .code {
  white-space: normal;
  font-size: 11px;
}

#products-slider .item .btn {
  position: absolute;
  bottom: 15px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  height: 30px;
  color: #000000;
  border: 2px solid #cccccc;
  background: #ffffff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 15px;
}

.iframe-mode #products-slider {
  height: 325px;
}

#products-slider-toggle-btn {
  position: absolute;
  bottom: 100%;
  left: 50%;
  -webkit-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
  -webkit-transition: bottom 0.3s ease-out 0.3s, left 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transition: bottom 0.3s ease-out 0.3s, left 0.3s ease-out, -webkit-transform 0.3s ease-out;
  transition: bottom 0.3s ease-out 0.3s, left 0.3s ease-out, transform 0.3s ease-out;
  transition: bottom 0.3s ease-out 0.3s, left 0.3s ease-out, transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  color: #ffffff;
  background: #33baf8;
  border: 2px solid #33baf8;
  padding: 0 25.5px;
  height: 45px;
  border-radius: 23px;
  cursor: pointer;
  font-size: 16px;
  min-width: 220px;
}

#products-slider-toggle-btn .icon:before {
  font-family: "catalog";
  font-style: normal;
  font-weight: normal;
  speak: none;
  display: inline-block;
  text-decoration: inherit;
  width: 1em;
  margin-right: 0.2em;
  text-align: center;
  font-variant: normal;
  text-transform: none;
  line-height: 1em;
  margin-left: 0.2em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e803";
}

#products-slider-toggle-btn:hover {
  background: #41bffa;
  border-color: #41bffa;
  -webkit-box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
          box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.16);
}

.sharepopover {
  border-color: #cccccc;
  border-radius: 0;
  top: -5px !important;
}

.sharepopover > .popover-title {
  height:0;
  padding:0;
}

.sharepopover > .popover-arrow {
  border-bottom-color: #ffffff;
}

.mobile .slick-prev,
.mobile .slick-next {
  opacity: 1;
}

.share-content {
  width: 200px;
}

.share-content .line {
  height: 1px;
  background: #cccccc;
  margin: 10px 0;
}

.share-content .share-menu {
  height: 60px;
}

.share-content .share-menu .title {
  height: 20px;
  margin-bottom: 10px;
  font-size: 14px;
}

.share-content .share-menu a .share-icon {
  color: #ffffff;
  background: #000000;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  float: left;
  margin: 0 5px;
  text-align: center;
  line-height: 30px;
}

.share-content .share-menu a:hover .share-icon {
  background: #33baf8;
}

#catalog [class^="icon-"]:before,
#catalog [class*=" icon-"]:before,
.share-content [class^="icon-"]:before,
.share-content [class*=" icon-"]:before {
    font-family: "catalog" !important;
}