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

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

#wrappersportmate .content {
    position: absolute;
    top: 11.6%;
    left: 14.1%;
    z-index: 3;
    width: 71.7%;
    height: 67.6%;
}

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

#sportmate-home-bg {
    position: absolute;
    top: 1.3%;
    right: 5.45%;
    z-index: 4;
    width: 21.7%;
    height: 13.5%;
    background-image: url(../images/sportmate-home-bg.png);
}

#sportmate-home {
    position: absolute;
    top: 2.5%;
    right: 10.5%;
    z-index: 99;
    width: 12.1%;
    height: 8.8%;
}

#sportmate-home .sprite {
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-color: #2396ef;
}

#sportmate-home:hover .sprite {
    background-color: #ef2323;
}

#sportmate-home .icon {
    position: relative;
    z-index: 1;
    display: block;
    background-image: url(../images/buttons/sm-home-texture.png);
}

#sportmate-home .menu-text {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/buttons/sm-text-home.png);
}

#page-sportmate .character-1 {
    position: absolute;
    bottom: 10%;
    left: 7%;
    z-index: 4;
    width: 16%;
    height: 26.5%;
    background-image: url(../images/characters/char-sm-1.png);
}

#page-sportmate .character-2 {
    position: absolute;
    bottom: 0%;
    left: 24.5%;
    z-index: 4;
    width: 26.3%;
    height: 23.5%;
    background-image: url(../images/characters/char-sm-2.png);
}
#page-sportmate .character-3 {
    position: absolute;
    right: 25.7%;
    bottom: 0%;
    z-index: 4;
    width: 23.5%;
    height: 20.5%;
    background-image: url(../images/characters/char-sm-3.png);
}

#page-sportmate .character-4 {
    position: absolute;
    right: 8.1%;
    bottom: 9%;
    z-index: 4;
    width: 17.5%;
    height: 28%;
    background-image: url(../images/characters/char-sm-4.png);
}

.sportmate-info {
    position: absolute;
    top: 16%;
    right: -300%;
    z-index: 10;
    width: 55%;
    height: 57%;
    background-image: url(../images/sportmate-info.png);
    -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);
}

#wrappersportmate .sportmate-info.opened {
    right: 21% !important;
}

.sportmate-info .inner {
    position: absolute;
    top: 3.1%;
    left: 9%;
    width: 88.8%;
    height: 94%;
}

.sportmate-info .inner .text {
    position: absolute;
    left: 0%;
    top: 18%;
    overflow-y: auto;
    padding-right: 3%;
    width: 94%;
    height: 80%;
}

.sportmate-info h2 {
    margin-bottom: 25px;
    color: #fff;
    font-weight: bold;
    font-size: 190%;
    padding: 1.7% 0;
}

.sportmate-info .sportmate-open {
    position: absolute;
    top: 43.2%;
    left: -4%;
    z-index: 10;
    width: 10%;
    height: 16%;
    cursor: pointer;
}

.sportmate-open-2 .icon {
    position: absolute;
    z-index: 1;
    background-image: url(../images/buttons/sportmate-next.png);
}

.opened .sportmate-open-2 .icon {
    background-image: url(../images/buttons/sportmate-prev.png);
}

.sportmate-open .icon {
    position: absolute;
    z-index: 1;
    background-image: url(../images/buttons/sportmate-prev.png);
}

.opened .sportmate-open .icon {
    background-image: url(../images/buttons/sportmate-next.png);
}

.sportmate-open img,
.sportmate-open-2 img {
    position: absolute;
    top: 24%;
    left: 36%;
    width: 22%;
    height: 34%;
}

.sportmate-open-2 .sportmate-open-2 .normal,
.sportmate-open .normal {
    left: 30%;
}

.sportmate-menu .sportmate-open-2 .normal {
    left: 32%;
}

.sportmate-open .sportmate-open-2 .normal-2 {
    left: 36%;
}

.sportmate-menu .sportmate-open-2 .sprite,
.sportmate-info .sprite {
    position: absolute;
    top: 19%;
    left: 15%;
    z-index: 0;
    width: 70%;
    height: 64%;
    background: #2396ef;
}

.sportmate-info .normal-2,
.sportmate-info .normal {
    z-index: 1;
    opacity: 1;
    -webkit-transition: all 0s ease;
    -o-transition:      all 0s ease;
    transition:         all 0s ease;
}

.sportmate-menu.opened .sportmate-open-2 .normal-2,
.sportmate-menu .sportmate-open-2 .normal,
.sportmate-info.opened .normal,
.sportmate-info .normal-2 {
    display: none;
}

.sportmate-menu .sportmate-open-2 .normal-2,
.sportmate-menu.opened .sportmate-open-2 .normal,
.sportmate-info .normal,
.sportmate-info.opened .normal-2 {
    z-index: 1;
    display: block;
}

.sportmate-menu {
    position: absolute;
    top: 26.7%;
    left: -300%;
    z-index: 10;
    width: 21%;
    height: 38%;
    background-image: url(../images/sportmate-menu.png);
    -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);
}

.sportmate-menu .sportmate-open-2 {
    position: absolute;
    top: 38%;
    right: -11%;
    z-index: 10;
    width: 26.2%;
    height: 24.1%;
    cursor: pointer;
}

.sportmate-menu .sportmate-open-2 .normal {
    z-index: 1;
}

.sportmate-menu .sportmate-open-2:hover .hover {
    z-index: 1;
}

.sportmate-menu.opened .sportmate-open-2 .normal-2 {
    z-index: 1;
}

.sportmate-menu.opened .sportmate-open-2:hover .hover-2 {
    z-index: 1;
}

.sportmate-menu .inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.sportmate-link {
    position: absolute;
    display: block;
    width: 100%;
    height: 19.7%;
}

.sportmate-link .sprite {
    position: absolute;
    height: 100%;
    left: 3%;
    width: 96%;
    background-color: #2396ef;
}

.sportmate-link.active .sprite,
.sportmate-link:hover .sprite {
    background-color: #e40013;
}

.sportmate-link:active .sprite{
    background-color: #858585;
}

.sportmate-menu .icon {
    z-index: 10;
    position: absolute;
    top: 0;
}
.sportmate-menu .sportmate-link-1 {
    top: 0;
    height: 23%;
}

.sportmate-menu .sportmate-link-2 {
    top: 22.2%;
    height: 18.5%;
}

.sportmate-menu .sportmate-link-3 {
    top: 40.7%;
    height: 18.4%;
}

.sportmate-menu .sportmate-link-4 {
    top: 59.1%;
    height: 18.6%;
}

.sportmate-menu .sportmate-link-5 {
    bottom: 0;
    height: 22.2%;
}



.sportmate-menu .inner .icon {
    z-index: 10;
    position: absolute;
    top: 0;
    background: url(../images/sportmate-menu.png) no-repeat 0 0;
    background-size:         100% 553%;
    -khtml-background-size:  100% 553%;
    -webkit-background-size: 100% 553%;
    -moz-background-size:    100% 553%;
    -o-background-size:      100% 553%;
}

.sportmate-menu .sportmate-link-1 .icon {
    background-position: 0 0;
    background-size:         100% 450%;
    -khtml-background-size:  100% 450%;
    -webkit-background-size: 100% 450%;
    -moz-background-size:    100% 450%;
    -o-background-size:      100% 450%;
}

.sportmate-menu .sportmate-link-1 .sprite {
    left: 3%;
    top: 17%;
    height: 83%;
    width: 96%;
}

.sportmate-menu .sportmate-link-2 .icon {
    background-position: 0 27.3%;
}

.sportmate-menu .sportmate-link-2 .sprite {
    width: 96%;
    left: 3%;
}

.sportmate-menu .sportmate-link-3 .icon {
    background-position: 0 49.8%;
}

.sportmate-menu .sportmate-link-3 .sprite {
    width: 96%;
    left: 3%;
}

.sportmate-menu .sportmate-link-4 .icon {
    background-position: 0 72.5%;
    background-size:         100% 543%;
    -khtml-background-size:  100% 543%;
    -webkit-background-size: 100% 543%;
    -moz-background-size:    100% 543%;
    -o-background-size:      100% 543%;
}

.sportmate-menu .sportmate-link-4 .sprite {
    width: 96%;
    left: 3%;
}

.sportmate-menu .sportmate-link-5 .icon  {
    background-position: 0 100%;
    background-size:         100% 449%;
    -khtml-background-size:  100% 449%;
    -webkit-background-size: 100% 449%;
    -moz-background-size:    100% 449%;
    -o-background-size:      100% 449%;
}

.sportmate-menu .sportmate-link-5 .sprite {
    height: 82%;
    left: 3%;
    width: 97%;
}



.sportmate-nav {
    position: absolute;
    z-index: 4;
    cursor: pointer;
}

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

.sportmate-nav img {
    position: relative;
    z-index: 10;
    width: 100%;
}

.sportmate-prev {
    top: 42.3%;
    left: 12.2%;
    width: 3.5%;
    height: 6%;
}

.sportmate-next {
    top: 42.3%;
    right: 12.3%;
    width: 3.5%;
    height: 6%;
}

.sportmate-prev .sprite {
    top: 12%;
    left: 10%;
    z-index: 1;
    width: 78%;
    height: 73%;
    background-color: #2396ef;
}

.sportmate-next .sprite {
    top: 14%;
    left: 10%;
    width: 87%;
    height: 75%;
    background-color: #2396ef;
}

.sportmate-menu .sportmate-open-2:hover .sprite,
.sportmate-info .sportmate-open:hover .sprite,
.sportmate-prev:hover .sprite,
.sportmate-next:hover .sprite {
    background-color: #fb4525;
}

/*Slider*/

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

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

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

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

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

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

#wrappersportmate .bx-wrapper.active {
    z-index: 3;
}

#wrappersportmate .bx-viewport {
    height: 100% !important;
}

#wrappersportmate .bx-pager {
    position: absolute;
    top: .5%;
    left: 9.3%;
    z-index: 5;
    width: 57.9%;
    height: 16.8%;
}

#wrappersportmate .pager-item {
    position: absolute;
    display: block;
    overflow: hidden;
    width: 34.6%;
    height: 100%;
    z-index: 4;
}

#wrappersportmate .bx-pager .item-2 {
    left: 26.7%;
    z-index: 3;
}

#wrappersportmate .bx-pager .item-3 {
    left: 53%;
    z-index: 2;
}

#wrappersportmate .bx-pager .item-4 {
    left: 79.4%;
    z-index: 1;
}

#wrappersportmate .pager-item .icon {
    background-image: url(../images/sportmate-thumbs.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%;
    background-position: 0 100%;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 1;
}

#wrappersportmate .pager-item:hover .icon {
    background-position: 0 50%;
}

#wrappersportmate .pager-item.active .icon {
    background-position: 0 0;
}

#wrappersportmate .pager-item:hover .icon:after {
    display: block;
    position: absolute;
    content: " ";
    bottom: 2.1%;
    right: 25.1%;
    width: 25.2%;
    height: 21%;
    z-index: 99;
    background: url(../images/sm-thumb-icon.png) no-repeat 0 0%;
    -khtml-background-size:     100% 200%;
    -webkit-background-size:    100% 200%;
    -moz-background-size:       100% 200%;
    -o-background-size:         100% 200%;
    background-size:            100% 200%;
}

#wrappersportmate .pager-item.active .icon:after {
    display: block;
    position: absolute;
    content: " ";
    bottom: 2.1%;
    right: 25.1%;
    width: 25.2%;
    height: 21%;
    z-index: 99;
    background: url(../images/sm-thumb-icon.png) no-repeat 0 100%;
    -khtml-background-size:     100% 200%;
    -webkit-background-size:    100% 200%;
    -moz-background-size:       100% 200%;
    -o-background-size:         100% 200%;
    background-size:            100% 200%;
}

#wrappersportmate .pager-item img {
    position: absolute;
    top: 9%;
    right: 8%;
    z-index: 2;
    width: 58.7%;
    height: 75%;
}

/*End Slider*/

.sm-decor {
    position: absolute;
    z-index: 4;
}

.sm-decor-1 {
    background-image: url(../images/sm-decor-1.png);
    width: 5.7%;
    height: 5.6%;
    top: 18%;
    left: 8.6%;
}

.sm-decor-2 {
    background-image: url(../images/sm-decor-2.png);
    width: 5.7%;
    height: 5.6%;
    top: 18%;
    right: 8.8%;
}

.sm-decor-3 {
    background-image: url(../images/sm-decor-3.png);
    width: 5.9%;
    height: 10.6%;
    top: 68.8%;
    left: 8.5%;
}

.sm-decor-4 {
    background-image: url(../images/sm-decor-4.png);
    width: 5.7%;
    height: 11%;
    top: 68.4%;
    right: 9%;
}

.sm-goto-site {
    display: inline-block;
    padding: 1.8% 2.5%;
    line-height: 100%;
    font-size: 95%;
    background: #2396ef;
    border: 2px solid #2396ef;
    font-weight: bold;
    font-style: italic;
    font-family: Tahoma, "Times New Roman", Times, serif;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    border-bottom: 2px solid #534040;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    box-shadow:         0px 1px 3px #6cb9f4 inset;
    -webkit-box-shadow: 0px 1px 3px #6cb9f4 inset;
    -moz-box-shadow:    0px 1px 3px #6cb9f4 inset;
}

/*Scrollbar*/

#wrappersportmate .jspPane {
    margin-left: 0 !important;
}

/*End Scrollbar*/