#page-shops {
    position: relative;
    overflow: hidden;
    min-width: 764px;
    min-height: 500px;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg-shops.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    -o-background-size:       auto 100%;
    -webkit-background-size:  auto 100%;
    -moz-background-size:     auto 100%;
    -khtml-background-size:   auto 100%;
    background-size:          auto 100%;
}

#wrappershops {
    position: relative;
    margin: 0 auto;
    min-width: 667px;
    min-height: 500px;
}

#wrappershops:before {
    z-index: 3;
    content: " ";
    position: absolute;
    display: block;
    width: 13.5%;
    height: 61%;
    top: 16.5%;
    left: 1.5%;
    background-image: url(../images/shops-main-decor.png);
    background-position: 0% 0%;
    background-repeat: no-repeat;
    -o-background-size:       200% 100%;
    -webkit-background-size:  200% 100%;
    -moz-background-size:     200% 100%;
    -khtml-background-size:   200% 100%;
    background-size:          200% 100%;
}

#wrappershops:after {
    z-index: 3;
    content: " ";
    position: absolute;
    display: block;
    width: 13.5%;
    height: 61%;
    top: 16.5%;
    right: .1%;
    background-image: url(../images/shops-main-decor.png);
    background-position: 100% 0%;
    background-repeat: no-repeat;
    -o-background-size:       200% 100%;
    -webkit-background-size:  200% 100%;
    -moz-background-size:     200% 100%;
    -khtml-background-size:   200% 100%;
    background-size:          200% 100%;
}

#wrappershops .content {
    position: absolute;
    top: 15.9%;
    left: 12.2%;
    z-index: 2;
    width: 75.6%;
    height: 65.9%;
}

#wrappershops>.inner {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
}

.shops-top {
    background-image: url(../images/shops-thumbs.png);
    position: absolute;
    top: -16%;
    left: -7.8%;
    width: 116.2%;
    height: 23.2%;
    z-index: 4;
}

#shops-thumbs {
    position: absolute;
    top: 3.5%;
    left: 13.1%;
    z-index: 2;
    width: 69.3%;
    height: 18%;
    background-image: url(../images/shops-thumbs.png);
}

#shops-home {
    position: absolute;
    top: 8.65%;
    right: 13%;
    z-index: 99;
    width: 11.7%;
    height: 8.2%;
}

#shops-home .icon {
    position: relative;
    z-index: 1;
    display: block;
    background-image: url(../images/buttons/shops-home.png);
    -o-background-size:       100% 300%;
    -webkit-background-size:  100% 300%;
    -moz-background-size:     100% 300%;
    -khtml-background-size:   100% 300%;
    background-size:          100% 300%;
}

#shops-home:hover .icon {
    background-position: 0 50%;
}

#shops-home:active .icon {
    background-position: 0 100%;
}

#page-shops .character-1 {
    position: absolute;
    bottom: 1.6%;
    left: 2.6%;
    z-index: 3;
    width: 18.6%;
    height: 23%;
    background-image: url(../images/characters/char-shops-1.png);
}

#page-shops .character-2 {
    position: absolute;
    bottom: 0.4%;
    right: 2.9%;
    z-index: 3;
    width: 19.3%;
    height: 24.5%;
    background-image: url(../images/characters/char-shops-2.png);
}

#page-shops .character-3 {
    position: absolute;
    left: 21.9%;
    bottom: 0%;
    z-index: 3;
    width: 57.7%;
    height: 12%;
    background-image: url(../images/characters/char-shops-3.png);
}

.shops-info {
    position: absolute;
    top: 19%;
    right: -300%;
    z-index: 10;
    width: 73.7%;
    height: 61.6%;
    background: #fff;
    border: 3px solid #75b28e;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
    -webkit-box-shadow: 3px 0px #4a8a63 inset,-3px 0px #4a8a63 inset,0 -3px #4a8a63 inset,0px 3px #4a8a63 inset;
    -moz-box-shadow:    3px 0px #4a8a63 inset,-3px 0px #4a8a63 inset,0 -3px #4a8a63 inset,0px 3px #4a8a63 inset;
    box-shadow:         3px 0px #4a8a63 inset,-3px 0px #4a8a63 inset,0 -3px #4a8a63 inset,0px 3px #4a8a63 inset;
    -webkit-transition: right 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition:      right 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition:         right 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

#wrappershops .shops-info.opened {
    right: 16% !important;
}

.shops-info .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.shops-info .inner .flexcroll {
    position: absolute;
    left: 6%;
    right: 1.6%;
    top: 12.5%;
    overflow: auto;
    bottom: 3%;
}

.shops-info .inner .flexcroll .mcontentwrapper {
    background: #fff;
    font-size: 72%;
    line-height: 1.3em;
    height: 100%;
    width: 95.5% !important;
    padding: 3% 4% !important;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
}

.shops-info .titlebox {
    position: absolute;
    top: 3px;
    left: 3px;
    right: 3px;
    height: 9.7%;
    padding: 0% 0 0 9%;
    -webkit-text-shadow: 0 1px #fff;
    -moz-text-shadow:    0 1px #fff;
    text-shadow:         0 1px #fff;
    background: #bcd3c3;
    color: #224f35;
    display: block;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    line-height: 210%;
    font-size: 180%;
}

.shops-info .titlebox:after {
    content: " ";
    position: absolute;
    display: inline-block;
    top: 19%;
    margin-left: 1.5%;
    width: 5.1%;
    height: 65%;
    background: url(../images/buttons/ecommerce-title.png) no-repeat 0 0;
    -o-background-size:       100% 100%;
    -webkit-background-size:  100% 100%;
    -moz-background-size:     100% 100%;
    -khtml-background-size:   100% 100%;
    background-size:          100% 100%;
}

.shops-info p {
    font-size: 120%;
    line-height: 170%;
}

.shops-info h3 {
    margin-bottom: 25px;
    color: #fff;
    font-weight: bold;
}

.shops-info .shops-open {
    position: absolute;
    top: 41.2%;
    left: -4.3%;
    z-index: 10;
    width: 8.2%;
    height: 13.1%;
    cursor: pointer;
}

.shops-open-2 .sprite,
.shops-open .sprite {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background: url(../images/buttons/shops-arrs.png) no-repeat 0 0;
    -o-background-size:       100% 600%;
    -webkit-background-size:  100% 600%;
    -moz-background-size:     100% 600%;
    -khtml-background-size:   100% 600%;
    background-size:          100% 600%;
    -webkit-transition: none;
    -moz-transition:    none;
    -ms-transition:     none;
    -o-transition:      none;
    transition:         none;
}

/*.shops-open-2:hover .sprite,*/
/*.shops-open:hover .sprite,*/
/*.shops-open-2:active .sprite,*/
/*.shops-open:active .sprite {*/
    /*background-color: transparent;*/
/*}*/

.shops-menu {
    position: absolute;
    top: 13%;
    left: -300%;
    z-index: 10;
    width: 36.7%;
    height: 61.3%;
    background: #fff;
    border: 3px solid #75b28e;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
    -webkit-box-shadow: 3px 0px #4a8a63 inset,-3px 0px #4a8a63 inset,0 -3px #4a8a63 inset,0px 3px #4a8a63 inset;
    -moz-box-shadow:    3px 0px #4a8a63 inset,-3px 0px #4a8a63 inset,0 -3px #4a8a63 inset,0px 3px #4a8a63 inset;
    box-shadow:         3px 0px #4a8a63 inset,-3px 0px #4a8a63 inset,0 -3px #4a8a63 inset,0px 3px #4a8a63 inset;
    -webkit-transition: all 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    -o-transition:      all 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
    transition:         all 800ms cubic-bezier(0.165, 0.84, 0.44, 1);
}

.shops-menu .shops-open-2 {
    position: absolute;
    top: 43.7%;
    right: -7.8%;
    z-index: 10;
    width: 16.5%;
    height: 13.3%;
    cursor: pointer;
}

.shops-info .shops-open .sprite {
    background-position: 0 100%;
}

.shops-info .shops-open:hover .sprite {
    background-position: 0 80%;
}

.shops-info .shops-open:active .sprite {
    background-position: 0 60%;
}

.shops-info.opened .shops-open .sprite {
    background-position: 0 40%;
}

.shops-info.opened .shops-open:hover .sprite {
    background-position: 0 20%;
}

.shops-info.opened .shops-open:active .sprite {
    background-position: 0 0;
}

.shops-menu .shops-open-2 .sprite {
    background-position: 0 40%;
}

.shops-menu .shops-open-2:hover .sprite {
    background-position: 0 20%;
}

.shops-menu .shops-open-2:active .sprite {
    background-position: 0 0;
}

.shops-menu.opened .shops-open-2 .sprite {
    background-position: 0 100%;
}

.shops-menu.opened .shops-open-2:hover .sprite {
    background-position: 0 80%;
}

.shops-menu.opened .shops-open-2:active .sprite {
    background-position: 0 60%;
}

.shops-menu .inner {
    position: absolute;
    top: 2.5%;
    left: 2.3%;
    width: 87.3%;
    bottom: 1.8%;
}

.shops-link {
    position: absolute;
    display: block;
    width: 100%;
    height: 18.8%;
}

.shops-link .sprite {
    background: url(../images/buttons/shops-menu-buttons.png) no-repeat 0 0;
    -o-background-size:       497.5% 300%;
    -webkit-background-size:  497.5% 300%;
    -moz-background-size:     497.5% 300%;
    -khtml-background-size:   497.5% 300%;
    background-size:          497.5% 300%;
    width: 100%;
    height: 100%;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
}

.shops-menu .shops-link-1 {
    top: 0%;
}

.shops-menu .shops-link-1 .sprite {
    background-position: 0% 0%;
}

.shops-menu .shops-link-1:hover .sprite {
    background-position: 0% 50%;
}

.shops-menu .shops-link-1:active .sprite {
    background-position: 0% 100%;
}

.shops-menu .shops-link-2 {
    top: 20.05%;
}

.shops-menu .shops-link-2 .sprite {
    background-position: 25% 0;
}

.shops-menu .shops-link-2:hover .sprite {
    background-position: 25% 50%;
}

.shops-menu .shops-link-2:active .sprite {
    background-position: 25% 100%;
}

.shops-menu .shops-link-3 {
    top: 40.10%;
}

.shops-menu .shops-link-3 .sprite {
    background-position: 50% 0;
}

.shops-menu .shops-link-3:hover .sprite {
    background-position: 50% 50%;
}

.shops-menu .shops-link-3:active .sprite {
    background-position: 50% 100%;
}

.shops-menu .shops-link-4 {
    top: 60.40%;
}

.shops-menu .shops-link-4 .sprite {
    background-position: 75% 0;
}

.shops-menu .shops-link-4:hover .sprite {
    background-position: 75% 50%;
}

.shops-menu .shops-link-4:active .sprite {
    background-position: 75% 100%;
}



.shops-menu .shops-link-5 {
    bottom: .5%;
}

.shops-menu .shops-link-5 .sprite {
    background-position: 100% 0;
}

.shops-menu .shops-link-5:hover .sprite {
    background-position: 100% 50%;
}

.shops-menu .shops-link-5:active .sprite {
    background-position: 100% 100%;
}

.shops-nav {
    position: absolute;
    z-index: 4;
    cursor: pointer;
    width: 4.1%;
    height: 5.5%;
    top: 48%;
}

.shops-nav a {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 99;
    display: block;
}

.shops-prev {
    left: 9.8%;
}

.shops-next {
    right: 9.8%;
}

.shops-nav .sprite {
    width: 100%;
    height: 100%;
    background: url(../images/buttons/shops-nav.png) no-repeat 0 0;
    -o-background-size:       200% 300%;
    -webkit-background-size:  200% 300%;
    -moz-background-size:     200% 300%;
    -khtml-background-size:   200% 300%;
    background-size:          200% 300%;
    -webkit-transition: none;
    -moz-transition:    none;
    -ms-transition:     none;
    -o-transition:      none;
    transition:         none;
}

.shops-prev .sprite {
    background-position: 0 100%;
}

.shops-next .sprite {
    background-position: 100% 100%;
}

.shops-prev:hover .sprite {
    background-position: 0 50%;
}
.shops-next:hover .sprite {
    background-position: 100% 50%;
}

.shops-prev:active .sprite {
    background-position: 0 0;
}
.shops-next:active .sprite {
    background-position: 100% 0;
}

/*Slider*/

#wrappershops .bxcontainer>.bxslider {
    position: absolute;
    top: 100%;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

#wrappershops .bxslider {
    position: absolute;
    z-index: 1;
    height: 100%;
    background: #000;
}

#wrappershops .bxslider li {
    width: 100% !important;
    height: 100%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
}

#wrappershops .bxslider li img {
    width: 100%;
    height: 100%;
}

#wrappershops .bxcontainer {
    margin: 0;
    width: 100%;
    height: 100%;
}

#wrappershops .bx-wrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100% !important;
}

#wrappershops .bx-wrapper.active {
    z-index: 3;
    display: block !important;
}

#wrappershops .bx-viewport {
    height: 100% !important;
    overflow: visible !important;
 }

#wrappershops.start .bx-viewport {
    display: none;
}

#wrappershops .bx-controls {
    position: absolute;
    top: -21.2%;
    left: 0%;
    height: 23.7%;
    width: 81.8%;
    z-index: 8;
}

#wrappershops .bx-pager {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}

#wrappershops .bx-pager .bx-pager-item:first-child {
    left: 1.4%;
}

#wrappershops .bx-pager-item {
    height: 100%;
    position: absolute;
    width: 24%;
}

#wrappershops .bx-pager-item+div {
    left: 26.3%;
}

#wrappershops .bx-pager-item+div+div {
    left: 51.1%;
}

#wrappershops .bx-pager-item+div+div+div {
    right: 0;
    left: auto;
}

#wrappershops .bx-pager a {
    position: absolute;
    display: block;
    float: left;
    width: 100%;
    height: 100%;
}

#wrappershops .bx-pager .bx-pager-item a {
    content: " ";
    position: absolute;
    display: block;
    top: 0%;
    right: 0%;
    height: 100%;
    width: 100%;
    z-index: 2;
}

#wrappershops .bx-pager a:hover:after {
    background-position: 0% 99%;
}

#wrappershops .bx-pager a.active:after {
    background-position: 0% 49%;
}

#wrappershops .bx-pager .item-2 {
    left: 26.2%;
}

#wrappershops .bx-pager .item-3 {
    left: 52.6%;
}

#wrappershops .bx-pager .item-4 {
    left: 78.9%;
}

#wrappershops .bx-pager a img {
    position: absolute;
    top: 0%;
    left: 0%;
    z-index: 1;
    width: 100%;
    height: 200%;
}

#wrappershops .bx-pager a:hover img {
    position: absolute;
    top: auto;
    bottom: 0%;
    left: 0%;
    z-index: 1;
    width: 100%;
    height: 202%;
}

#wrappershops .bx-pager a .sprite {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/shops-thumbs.png) no-repeat;
    background-size:         100% 300%;
    -o-background-size:      100% 300%;
    -webkit-background-size: 100% 300%;
    -moz-background-size:    100% 300%;
    -khtml-background-size:  100% 300%;
    background-size:         100% 300%;
    -webkit-transition: background 0s;
    -o-transition:      background 0s;
    transition:         background 0s;
}

#wrappershops.start .bx-pager a.active:hover .sprite,
#wrappershops .bx-pager a:hover .sprite,
#wrappershops .bx-pager a.active .sprite {
    background-position: 0% 50%
}

#wrappershops.start .bx-pager a.active .sprite {
    background-position: 0% 0%
}

#wrappershops .bx-pager a .icon {
    position: absolute;
    width: 88%;
    left: 6%;
    top: 11%;
    height: 72%;
    z-index: 2;
    background-size:         100% 200%;
    -o-background-size:      100% 200%;
    -webkit-background-size: 100% 200%;
    -moz-background-size:    100% 200%;
    -khtml-background-size:  100% 200%;
    background-size:         100% 200%;
    background-repeat: no-repeat;
    background-position: 0% 0%;
}

#wrappershops .bx-pager a.active .icon,
#wrappershops .bx-pager a:hover .icon {
    background-position: 0% 100%;
}

#wrappershops.start .bx-pager a.active .icon {
    background-position: 0% 0%;
}

#wrappershops.start .bx-pager a.active:hover .icon {
    background-position: 0% 100%;
}

/*End Slider*/

.shops-close {
    width: 2.4%;
    height: 40%;
    position: absolute;
    right: 1.91%;
    top: 28%;
    cursor: pointer;
    background-image: url(../images/buttons/shops-close.png);
}

#wrappershops .jspPane {
    bottom: 0;
}

.menu-shops-item {
    position: absolute;
    bottom: 5.2%;
    height: 10.4%;
    z-index: 3;
    cursor: pointer;
}

.menu-shops-item .icon {
    position: absolute;
    z-index: 9;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(../images/buttons/shops-menu.png);
    background-repeat: no-repeat;
    background-position: 0 0;
    -o-background-size:      auto 300%;
    -webkit-background-size: auto 300%;
    -moz-background-size:    auto 300%;
    -khtml-background-size:  auto 300%;
    background-size:         auto 300%;
}

.menu-shops-item-1 {
    left: 25.6%;
    width: 10.1%;
}

.menu-shops-item-1 .icon {
    background-position: 0 0;
}

.menu-shops-item-1:hover .icon,
.menu-shops-item-1.active .icon {
    background-position: 0 100%;
}

.menu-shops-item-2 {
    left: 56.25%;
    width: 19.6%;
}

.menu-shops-item-2 .icon {
    background-position: 34.5% 0;
}

.menu-shops-item-2:hover .icon,
.menu-shops-item-2.active .icon {
    background-position: 34.5% 100%;
}

.menu-shops-item-3 {
    left: 36.1%;
    width: 19.6%;
}

.menu-shops-item-3 .icon {
    background-position: 100% 0;
}

.menu-shops-item-3:hover .icon,
.menu-shops-item-3.active .icon {
    background-position: 100% 100%;
}

/**/

#wrappershops .vscrollerbase {
    background: #efefef;
    top: 5%;
    width: 3.2%;
    height: 90% !important;
    left: 96.4% !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#wrappershops .vscrollerbar {
    width: 100%;
    position: relative;
    padding: 0;
    top: 0;
    left: 0;
    border-color: #efefef;
    border-style: solid;
    border-left-width: 2px;
    border-right-width: 2px;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    background: #436f56 url(../images/sites-scroll-icons.png) no-repeat -8% 48%;
    cursor: pointer;
    background-size:         400% auto;
    -o-background-size:      400% auto;
    -webkit-background-size: 400% auto;
    -moz-background-size:    400% auto;
    -khtml-background-size:  400% auto;
    background-size:         400% auto;
}
#wrappershops .vscrollerbar .scrollgeneric {
    background-color: transparent;
    background-image: none;
}
#wrappershops .vscrollerbasebeg:hover,
#wrappershops .vscrollerbaseend:hover,
#wrappershops .vscrollerbar:hover {
    background-color: #4a9e7e;
}

#wrappershops .vscrollerbasemid {
    top: 0;
}

#wrappershops .vscrollerbasebeg {
    width: 100%;
    height: 6% !important;
    top: -6%;
    left: 0;
    position: absolute;
    z-index: 999;
    background-color: #436f56;
    border: 2px solid #efefef;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(../images/sites-scroll-icons.png);
    background-repeat: no-repeat;
    background-position: 109% 50%;
    background-size:         auto 50%;
    -o-background-size:      auto 50%;
    -webkit-background-size: auto 50%;
    -moz-background-size:    auto 50%;
    -khtml-background-size:  auto 50%;
    background-size:         auto 50%;
}

#wrappershops .vscrollerbaseend {
    width: 100%;
    height: 6% !important;
    top: auto !important;
    bottom: -6%;
    left: 0;
    position: absolute;
    z-index: 999;
    background-color: #436f56;
    border: 2px solid #efefef;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-image: url(../images/sites-scroll-icons.png);
    background-repeat: no-repeat;
    background-position: 50% 65%;
    background-size:         auto 50%;
    -o-background-size:      auto 50%;
    -webkit-background-size: auto 50%;
    -moz-background-size:    auto 50%;
    -khtml-background-size:  auto 50%;
    background-size:         auto 50%;
}

/**/

#wrappershops .bxslider-item:hover .layer-2 {
    opacity: 1;
}

.shops-link-to-site {
    opacity: 0;
    display: block;
    position: absolute;
    z-index: 10;
    width: 15.5%;
    height: 6.5%;
    top: 28%;
    left: 47.7%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-top: 1px solid #1b6840;
    border-bottom: 2px solid #0a351f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #1b6840;
}

.shops-link-to-site:after {
    position: absolute;
    display: block;
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/buttons/shops-to-site.png);
    z-index: 1;
    background-size:         100% 100%;
    -o-background-size:      100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size:    100% 100%;
    -khtml-background-size:  100% 100%;
    background-size:         100% 100%;
}

#wrappershops .bxslider li:hover .shops-link-to-site {
    opacity: 1;
}

.shops-link-to-site:hover {
    background: #1f7448;
    border-bottom: 2px solid #0c4026;
}