#page-sites {
    position: relative;
    overflow: hidden;
    min-width: 764px;
    min-height: 500px;
    width: 100%;
    height: 100%;
    background-image: url(../images/bg-sites.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%;
}

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

#wrappersites .content {
    position: absolute;
    top: 11.7%;
    left: 8.7%;
    z-index: 2;
    width: 81.8%;
    height: 71.9%;
}

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

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

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

#sites-home {
    position: absolute;
    top: 4.8%;
    right: 10.1%;
    z-index: 99;
    width: 11%;
    height: 9.7%;
}

#sites-home .sprite {
    top: 10%;
    left: 5%;
    z-index: 0;
    width: 90%;
    height: 80%;
    background-color: #007eff;
}

#sites-home:hover .sprite {
    background-color: #2f976f;
}

#sites-home:active .sprite {
    background-color: #03c0e8;
}

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

#page-sites .character-1 {
    position: absolute;
    bottom: 3.6%;
    left: 1.6%;
    z-index: 3;
    width: 21%;
    height: 24%;
    background-image: url(../images/characters/char-sites-1.png);
}

#page-sites .character-2 {
    position: absolute;
    bottom: 4.1%;
    right: 3.2%;
    z-index: 3;
    width: 21.3%;
    height: 23%;
    background-image: url(../images/characters/char-sites-2.png);
}
#page-sites .character-3 {
    position: absolute;
    left: 20.3%;
    bottom: 0%;
    z-index: 3;
    width: 55%;
    height: 20.2%;
    background-image: url(../images/characters/char-sites-3.png);
}

.sites-info {
    position: absolute;
    top: 19%;
    right: -300%;
    z-index: 10;
    width: 69.5%;
    height: 62%;
    background-image: url(../images/sites-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);
}

#wrappersites .sites-info.opened {
    right: 16% !important;
}

.sites-info .inner {
    position: absolute;
    top: 3.6%;
    left: 10.7%;
    width: 86.8%;
    height: 89.2%;
}

.sites-info .inner .flexcroll {
    position: absolute;
    left: 0%;
    top: 12.5%;
    overflow: auto;
    /*padding-right: 3%;*/
    width: 100%;
    height: 87.35%;
    /*background: #fff;*/
    /*border: 1px solid #5f5f5f;*/
    /*padding: 2.5% 3.7%;*/
}

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

.sites-info .titlebox {
    position: absolute;
    top: 0%;
    left: 0%;
    right: 0%;
    height: 11%;
    padding: 0% 3.6%;
    background: #4b9e7e;
    box-shadow: 0 0 5px #fff inset;
    display: block;
    border: 1px solid #5f5f5f;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    line-height: 225%;
    font-size: 160%;
}

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

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

.sites-info .sites-open {
    position: absolute;
    top: 41.2%;
    left: 1.5%;
    z-index: 10;
    width: 7.65%;
    height: 11.6%;
    cursor: pointer;
}

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

.sites-open img,
.sites-open-2 img {
    position: absolute;
    top: 35%;
    left: 42%;
    width: 22%;
    height: 31%;
}

.sites-open-2 .sites-open-2 .normal,
.sites-open .normal {
    left: 38%;
}

.sites-menu .sites-open-2 .normal {
    left: 38%;
}

.sites-open .sites-open-2 .normal-2 {
    left: 46%;
}

.sites-menu .sites-open-2 .sprite,
.sites-info .sprite {
    position: absolute;
    top: 4%;
    left: 4%;
    z-index: 0;
    width: 92%;
    height: 93%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #007eff;
}

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

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

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

.sites-menu {
    position: absolute;
    top: 18%;
    left: -300%;
    z-index: 10;
    width: 36%;
    height: 54%;
    background-image: url(../images/sites-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);
}

.sites-menu .sites-open-2 {
    position: absolute;
    top: 42%;
    right: 2.7%;
    z-index: 10;
    width: 14.8%;
    height: 13.2%;
    cursor: pointer;
}

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

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

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

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

.sites-menu .inner {
    position: absolute;
    top: 4.3%;
    left: 4.7%;
    width: 73.9%;
    height: 87.2%;
}

.sites-link {
    position: absolute;
    display: block;
    width: 100%;
    height: 18.8%;
    border: 1px solid #5f5f5f;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.sites-link img {
    position: absolute;
    top: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
}

.sites-link .hover {
    z-index: 0;
}

.sites-link.active .active {
    z-index: 1;
}
.sites-link:hover .hover,
.sites-link .normal {
    z-index: 1;
}

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

.sites-menu .icon {
    position: absolute;
}

.sites-menu .link-item .icon,
.sites-menu .link .icon {
    background-image: url(../images/buttons/sites-menu-icons.png);
    background-repeat: no-repeat;
    -o-background-size:       100% 500%;
    -webkit-background-size:  100% 500%;
    -moz-background-size:     100% 500%;
    -khtml-background-size:   100% 500%;
    background-size:          100% 500%;
}

.sites-menu .sites-link-1 .icon {
    z-index: 10;
    background-position: 0% 0%;
}

.sites-menu .sites-link-2 {
    top: 20.15%;
}

.sites-menu .sites-link-2 .icon {
    z-index: 10;
    background-position: 0% 25%;
}

.sites-menu .sites-link-3 {
     top: 40.50%;
 }

.sites-menu .sites-link-3 .icon {
    z-index: 10;
    background-position: 0% 50%;
}

.sites-menu .sites-link-4 {
    top: 60.50%;
}

.sites-menu .sites-link-4 .icon {
    z-index: 10;
    background-position: 0% 75%;
}

.sites-menu .sites-link-5 {
    bottom: .5%;
    left: 0;
    width: 100%;
}

.sites-menu .sites-link-5 .icon {
    z-index: 10;
    background-position: 0% 100%;
}

.sites-link .sprite {
    background-color: #007eff;
    width: 100%;
    height: 100%;
}

.sites-open-2:hover .sprite,
.sites-open:hover .sprite,
.sites-link:hover .sprite {
    background-color: #459878;
}

.sites-open-2:active .sprite,
.sites-open:active .sprite,
.sites-link:active .sprite,
.sites-link.active .sprite {
    background-color: #23bada;
}

.sites-nav {
    position: absolute;
    z-index: 2;
    cursor: pointer;
}

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

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

.sites-prev {
    top: 44.3%;
    left: 8.7%;
    width: 3.4%;
}

.sites-next {
    top: 44.3%;
    right: 9.5%;
    width: 3.4%;
}

.sites-prev .sprite {
    top: 12%;
    left: 2%;
    z-index: 1;
    width: 78%;
    height: 73%;
    background-color: #1f84eb;
}

.sites-next .sprite {
    top: 14%;
    right: 2%;
    width: 87%;
    height: 75%;
    background-color: #1f84eb;
}

.sites-prev:hover .sprite,
.sites-next:hover .sprite {
    background-color: #2f976f;
}

.sites-prev:active .sprite,
.sites-next:active .sprite {
    background-color: #03c0e8;
}

/*Slider*/

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

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

#wrappersites .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);
}

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

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

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

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

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

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

#wrappersites .bx-controls {
    position: absolute;
    top: -16.1%;
    left: -8%;
    height: 22.9%;
    width: 116.3%;
    z-index: 8;
    background-image: url(../images/sites-thumbs.png);
    background-position: center center;
    background-repeat: no-repeat;
    -o-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -khtml-background-size: 100% 100%;
    background-size: 100% 100%;
}

#wrappersites .bx-pager {
    position: absolute;
    top: 8.2%;
    left: 7.8%;
    z-index: 3;
    width: 70.66%;
    height: 98.5%;
}

#wrappersites .bx-pager .bx-pager-item:first-child {
    width: 24%;
}

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

#wrappersites .bx-pager-item+div {
    left: 25.3%;
}

#wrappersites .bx-pager-item+div+div {
    left: 50.6%;
}

#wrappersites .bx-pager-item+div+div+div {
    left: 76%;
}

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

#wrappersites .bx-pager .bx-pager-item a {
    content: " ";
    position: absolute;
    display: block;
    top: 0%;
    right: 0%;
    height: 100%;
    width: 100%;
    background-image: url(../images/sites-thumb-icon.png);
    background-repeat: no-repeat;
    background-position: 0 -1%;
    -o-background-size:      100% 300%;
    -webkit-background-size: 100% 300%;
    -moz-background-size:    100% 300%;
    -khtml-background-size:  100% 300%;
    background-size:         100% 300%;
    z-index: 2;
}

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

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

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

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

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

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

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

#wrappersites .bx-pager a .sprite {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../images/sites-thumb-icon.png) no-repeat;
    background-size:         100% 320%;
    -o-background-size:      100% 320%;
    -webkit-background-size: 100% 320%;
    -moz-background-size:    100% 320%;
    -khtml-background-size:  100% 320%;
    background-size:         100% 320%;
    -webkit-transition: background 0s;
    -o-transition:      background 0s;
    transition:         background 0s;
}

#wrappersites.start .bx-pager a.active:hover .sprite,
#wrappersites .bx-pager a:hover .sprite {
    background-position: 0% 97.5%;
}

#wrappersites .bx-pager a.active .sprite {
    background-position: 0% 49%
}

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

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

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

#wrappersites .bx-pager a .icon {
    position: absolute;
    width: 84%;
    left: 8%;
    top: 8%;
    height: 73.5%;
    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% 100%;
}

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

/*End Slider*/

.sites-close {
    width: 3.3%;
    height: 42%;
    position: absolute;
    right: 2.2%;
    top: 28%;
    cursor: pointer;
    background-image: url(../images/buttons/close-button.png);
}

#wrappersites .jspPane {
    bottom: 0;
}

.menu-sites-item {
    position: absolute;
    bottom: 8.7%;
    height: 9.75%;
    z-index: 3;
    cursor: pointer;
}

.menu-sites-item .sprite {
    position: absolute;
    top: 2%;
    right: 8%;
    bottom: 2%;
    left: 8%;
    background: #007eff;
}

.menu-sites-item:hover .sprite,
.menu-sites-item.active .sprite {
    background: #03c0e8;
}

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

.menu-sites-item-1 {
    left: 27.3%;
    width: 19.2%;
}

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

.menu-sites-item-2 {
    left: 46.8%;
    width: 14%;
}

.menu-sites-item-2 .icon {
    background-position: 69.1% 0%;
}

.menu-sites-item-3 {
    left: 61%;
    width: 8.6%;
}

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

/**/

#wrappersites .vscrollerbase {
    background: #fff;
    width: 3.5%;
    top: 6.2%;
    left: 96.4% !important;
    height: 87.5% !important;
    border: 1px solid #5f5f5f;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#wrappersites .vscrollerbar {
    width: 100%;
    position: relative;
    padding: 0;
    top: 0;
    left: 0;
    border-top:    1px solid #5f5f5f;
    border-bottom: 1px solid #5f5f5f;
    box-sizing:         border-box;
    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    background: #007eff 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;
}
#wrappersites .vscrollerbar .scrollgeneric {
    background-color: transparent;
    background-image: none;
}
#wrappersites .vscrollerbasebeg:hover,
#wrappersites .vscrollerbaseend:hover,
#wrappersites .vscrollerbar:hover {
    background-color: #4a9e7e;
}

#wrappersites .vscrollerbasemid {
    top: 0;
}

#wrappersites .vscrollerbasebeg {
    width: 100%;
    height: 5% !important;
    top: -7%;
    left: -1px;
    position: absolute;
    z-index: 999;
    border: 1px solid #5f5f5f;
    background-color: #007eff;
    background-image: url(../images/sites-scroll-icons.png);
    background-repeat: no-repeat;
    background-position: 115% 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%;
}

#wrappersites .vscrollerbaseend {
    width: 100%;
    height: 5% !important;
    bottom: -7%;
    top: auto !important;
    left: -1px;
    position: absolute;
    z-index: 999;
    border: 1px solid #5f5f5f;
    background-color: #007eff;
    background-image: url(../images/sites-scroll-icons.png);
    background-repeat: no-repeat;
    background-position: 50% 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%;
}

/**/

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

.sites-link-to-site {
    opacity: 0;
    display: block;
    position: absolute;
    z-index: 10;
    width: 16.1%;
    height: 7.6%;
    top: 24.2%;
    left: 46.8%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border-top: 1px solid #6db1f7;
    border-bottom: 2px solid #0652a0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: rgb(79,161,245); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(79,161,245,1) 0%, rgba(31,132,235,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(79,161,245,1)), color-stop(100%,rgba(31,132,235,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(79,161,245,1) 0%,rgba(31,132,235,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(79,161,245,1) 0%,rgba(31,132,235,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(79,161,245,1) 0%,rgba(31,132,235,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(79,161,245,1) 0%,rgba(31,132,235,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4fa1f5', endColorstr='#1f84eb',GradientType=0 ); /* IE6-9 */
}

.sites-link-to-site:after {
    position: absolute;
    display: block;
    content: " ";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(../images/buttons/sites-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%;
}

#wrappersites .bxslider li:hover .sites-link-to-site {
    opacity: 1;
}

.sites-link-to-site:hover {
    background: rgb(122,188,255); /* Old browsers */
    background: -moz-linear-gradient(top,  rgba(122,188,255,1) 0%, rgba(96,171,248,1) 44%, rgba(64,150,238,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(122,188,255,1)), color-stop(44%,rgba(96,171,248,1)), color-stop(100%,rgba(64,150,238,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(122,188,255,1) 0%,rgba(96,171,248,1) 44%,rgba(64,150,238,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7abcff', endColorstr='#4096ee',GradientType=0 ); /* IE6-9 */
}