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

#wrapper3d {
    position: relative;
    z-index: 10;
    margin: 0 auto;
    min-width: 678px;
    min-height: 500px;
}

img.bg-3d {
    display: block;
    width: 100%;
}

#screen-3d {
    position: absolute;
    top: 14.7%;
    left: 3.8%;
    width: 83%;
    height: 61%;
    z-index: 10;

    background-image: url(../images/bg-screen-3d.png);
    background-position: center center;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -khtml-background-size: 100% 100%;
}

#screen-3d .bg {
    width: 100%;
}

#screen-3d .description {
    position: absolute;
    top: 5.5%;
    right: 1.6%;
    width: 27.4%;
    height: 90.3%;
    background: url(../images/note-cell.png) repeat 0px 0px;
    -webkit-box-shadow: 0px 0px 31px rgba(0,0,0,.2) inset;
    box-shadow: 0px 0px 31px rgba(0,0,0,.2) inset;
    -o-box-shadow: 0px 0px 31px rgba(0,0,0,.2) inset;
}

.menu-3d-item {
    position: absolute;
    cursor: pointer;
}

.menu-3d-item .menu-icon {
    position: relative;
    z-index: 10;
    width: 100%;
    height: 100%;
}

.page-3d-menu-1 {
    top: 6%;
    right: -11.2%;
    width: 12.5%;
    height: 26.5%;
}

.page-3d-menu-1 .menu-icon {
    background-image: url(../images/buttons/page-3d-menu-1.png);
}

.page-3d-menu-2 {
    top: 35.5%;
    right: -11.1%;
    width: 11.5%;
    height: 25.6%;
}

.page-3d-menu-2 .menu-icon {
    background-image: url(../images/buttons/page-3d-menu-2.png);
}

.page-3d-menu-3 {
    top: 64.5%;
    right: -11.1%;
    width: 11.5%;
    height: 28.8%;
}

.page-3d-menu-3 .menu-icon {
    background-image: url(../images/buttons/page-3d-menu-3.png);
}

.menu-3d-item {
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
}

.menu-3d-item .sprite {
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    -o-border-radius: 50%;
    background-color: #6290de;
}

.menu-3d-item.active .button,
.menu-3d-item.active .sprite,
.menu-3d-item:hover .button,
.menu-3d-item:hover .sprite {
    background-color: #d85128;
}

.page-3d-menu-1 .sprite {
    top: 19%;
    right: 12%;
    width: 58%;
    height: 49%;
}

.page-3d-menu-2 .sprite {
    top: 20%;
    right: 14%;
    width: 60%;
    height: 50%;
}

.page-3d-menu-3 .sprite {
    top: 19%;
    right: 13%;
    width: 61%;
    height: 44%;
}

.menu-3d-item .button {
    position: absolute;
    z-index: 11;
    display: block;
    -webkit-border-radius: 10%;
    border-radius: 10%;
    background-color: #6290de;
    -webkit-transition: background .3s ease;
    -moz-transition: background .3s ease;
    -o-transition: background .3s ease;
    transition: background .3s ease;
    -khtml-border-radius: 10%;
    -o-border-radius: 10%;
}

.page-3d-menu-1 .button {
    top: 76.5%;
    right: 5%;
    width: 71%;
}

.page-3d-menu-2 .button {
    top: 79.8%;
    right: 6%;
    width: 76%;
}

.page-3d-menu-3 .button {
    top: 72.5%;
    right: 6%;
    width: 75.5%;
}

.chars-3d {
    position: absolute;
}

.char-3d-1 {
    z-index: 10;
    top: 3.2%;
    right: 22%;
    width: 10%;
    height: 16%;
    background-image: url(../images/characters/char-3d-1.png);
}

.char-3d-2 {
    bottom: 13.5%;
    left: 43%;
    z-index: 10;
    width: 13%;
    height: 16.5%;
    background-image: url(../images/characters/char-3d-2.png);
}

.terminal-1 {
    z-index: 10;
    bottom: 2.8%;
    left: 11.5%;
    width: 23%;
    height: 23%;
    background-image: url(../images/characters/terminal-1.png);
}

.terminal-2 {
    z-index: 10;
    right: 13.55%;
    bottom: 3%;
    width: 23%;
    height: 23.5%;
    background-image: url(../images/characters/terminal-2.png);
}

.char-3d-3 {
    z-index: 11;
    bottom: 15%;
    left: 53.5%;
    z-index: 10;
    width: 10%;
    height: 15%;
    background-image: url(../images/characters/char-3d-3.png);
}

.char-3d-4 {
    z-index: 11;
    bottom: 4.3%;
    left: 1.5%;
    width: 17.5%;
    height: 16%;

    background-image: url(../images/characters/char-3d-4.png);
}

.char-3d-5 {
    z-index: 11;
    right: 2.7%;
    bottom: 2.4%;
    width: 21.5%;
    height: 16%;
    background-image: url(../images/characters/char-3d-5.png);
}

.home-3d {
    z-index: 10;
    cursor: pointer;
    top: 0%;
    right: 5%;
    width: 14%;
    height: 8.6%;
}

.home-3d .icon {
    width: 100%;
    height: 100%;
    background-image: url(../images/home-3d.png);
    z-index: 2;
    position: absolute;
    top: 0;
}

.home-3d .sprite {
    z-index: 1;
    width: 66%;
    height: 60%;
    top: 32%;
    left: 16%;
    background-color: #5d8dde;
}

.home-3d:hover .sprite {
    background-color: #bc4c39;
}

.home-3d:active .sprite {
    background-color: #2d57a9;
}

.screens-3d {
    z-index: 1;
    top: -11.9%;
    left: .9%;
    width: 72.8%;
    height: 22.3%;
    background-image: url(../images/screens-3d.png);
}

.proj-3d {
    position: absolute;
    z-index: 2;
    top: 5.5%;
    left: 4.1%;
    width: 65.3%;
    height: 90.3%;
    background: url(../images/bg-screen-proj.png) repeat 0px 0px;
}

.nav-button {
    position: absolute;
    top: 11%;
    width: 10%;
    height: 15%;
    cursor: pointer;
}

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

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

.nav-prev {
    left: .5%;
}

.nav-next {
    right: .5%;
}

.nav-button .sprite {
    background-color: #6290de;
}

.nav-button:hover .sprite {
    background-color: #d85128;
}

.nav-prev .sprite {
    top: 15%;
    left: 23%;
    width: 63%;
    height: 58%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    -o-border-radius: 50%;
}

.nav-next .sprite {
    top: 15%;
    right: 24%;
    width: 63%;
    height: 58%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -khtml-border-radius: 50%;
    -o-border-radius: 50%;
}

.description .scroll {
    position: absolute;
    top: 2%;
    left: 8%;
    width: 89% !important;
    height: 95%;
    color: #fff;
    text-shadow: 1px 1px 1px #07152f;
    font-size: 72%;
    letter-spacing: .9px;
}

.description .scroll .jspPane {
    right: 15%;
    left: 0;
    width: auto !important;
}

.description .scroll h2 {
    font-weight: bold;
    text-transform: uppercase;
    font-size: 170%;
    line-height: 120%;
}

.description .scroll h3 {
    font-weight: bold;
    font-size: 115%;
    line-height: 130%;
    font-style: italic;
}

.description .scroll p {
    font-size: 115%;
    line-height: 150%;
}

.proj-3d .bxcontainer>.bxslider {
    position: absolute;
    top: 0.6%;
    overflow: hidden;
    width: 99%;
    height: 98.8%;
}

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

.proj-3d .bxslider li {
    width: 100%;
    height: 100%;
}

.proj-3d .bxslider li img {
    width: 100%;
    height: 100%;
}

.proj-3d .bxcontainer {
    margin: .6% .5%;
    width: 98.8%;
    height: 98.8%;
}

.proj-3d .bx-wrapper {
    position: absolute;
    top: 0.6%;
    width: 100%;
    height: 98.8% !important;
}

.proj-3d .bx-wrapper.active {
    z-index: 3;
}

.proj-3d .bx-viewport {
    height: 100% !important;
}

.proj-3d .bx-pager {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#page-3d .bx-controls {
    height: 25.1%;
    left: -1%;
    position: absolute;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    top: -24.3%;
    width: 100%;
    z-index: 2;
}

#page-3d .bx-pager-item {
    height: 100%;
    width: 24%;
    top: 0;
    position: absolute;
}

.proj-3d .bx-pager a {
    z-index: 2;
    position: relative;
    display: block;
    float: left;
    overflow: hidden;
    margin-right: 5.9%;
    width: 100%;
    height: 100%;
    background-size: 100% 1200%;
    -khtml-background-size: 100% 1200%;
    -webkit-background-size: 100% 1200%;
    -moz-background-size: 100% 1200%;
    -o-background-size: 100% 1200%;
    background-repeat: no-repeat;
    background-image: url(../images/3d-thumbs.png);
}

#page-3d .bx-controls div {
    left: 0;
}

#page-3d .bx-controls div a {
    background-position: center .1%;
}

#page-3d .bx-controls div a:hover {
    background-position: center 72.7%;
}

#page-3d .bx-controls div a.active {
    background-position: center 36.35%;
}

#page-3d .bx-controls div+div {
    left: 27%;
}

#page-3d .bx-controls div+div a {
    background-position: center 9.15%;
}

#page-3d .bx-controls div+div a:hover {
    background-position: center 81.8%;
}

#page-3d .bx-controls div+div a.active {
    background-position: center 45.45%;
}

#page-3d .bx-controls div+div+div {
    left: 53.5%;
}

#page-3d .bx-controls div+div+div a {
    background-position: center 18.25%;
}

#page-3d .bx-controls div+div+div a:hover {
    background-position: center 90.90%;
}

#page-3d .bx-controls div+div+div a.active {
    background-position: center 54.55%;
}

#page-3d .bx-controls div+div+div+div {
    left: 80.3%;
}

#page-3d .bx-controls div+div+div+div a {
    background-position: center 27.30%;
}

#page-3d .bx-controls div+div+div+div a:hover {
    background-position: center 99.95%;
}

#page-3d .bx-controls div+div+div+div a.active {
    background-position: center 63.60%;
}

.proj-3d .bx-controls div+div+div+div img {
    top: 9.45%;
}

.proj-3d .bx-pager a img {
    width: 86.5%;
    height: 74.2%;
    top: 9.1%;
    left: 7%;
    position: absolute;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    border-radius: 5%;
}

#page-3d .bx-controls div a:hover:after {
    content: " ";
    position: absolute;
    bottom: 2%;
    left: 40%;
    height: 21%;
    width: 19%;
    background: url(../images/3d-thumb-hovered-icon.png) no-repeat center center;
    background-size: 100% 100%;
    -khtml-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
}

#page-3d .bx-controls div a.active:after {
    content: " ";
    position: absolute;
    bottom: 2%;
    left: 40%;
    height: 21%;
    width: 19%;
    background: url(../images/3d-thumb-active-icon.png) no-repeat center center;
    background-size: 100% 100%;
    -khtml-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
}

/*Menu*/

.d3-menu {
    position: absolute;
    top: 23.7%;
    left: -300%;
    z-index: 10;
    width: 21%;
    height: 41%;
    background-image: url(../images/3d-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);
}

.d3-menu .d3-open-2 {
    position: absolute;
    top: 42.9%;
    right: -10%;
    z-index: 12;
    width: 23.4%;
    height: 19.8%;
    cursor: pointer;
}

.d3-menu .d3-open-2 .arr {
    background-image: url(../images/buttons/arr-right-2.png);
    width: 23%;
    height: 29%;
    position: absolute;
    left: 40%;
    top: 29%;
    z-index: 13;
}

.d3-menu.opened .d3-open-2 .arr {
    background-image: url(../images/buttons/arr-left-2.png);
    width: 23%;
    height: 29%;
    position: absolute;
    left: 37%;
    top: 29%;
    z-index: 13;
}

.d3-menu .d3-open-2 .sprite {
    position: absolute;
    top: 10%;
    left: 11%;
    width: 75%;
    height: 62%;
    background-color: #6290de;
}

.d3-menu .d3-open-2:hover .sprite {
    background-color: #d85128;
}

.d3-menu .d3-open-2:active .sprite {
    background-color: #d85128;
}

.d3-menu .d3-open-2 .icon {
    background-image: url(../images/buttons/3d-icon-border.png);
}

.d3-menu .inner {
    position: absolute;
    top: 5%;
    left: 2.5%;
    width: 95.4%;
    height: 91.7%;
}

.d3-link {
    position: absolute;
    display: block;
    width: 100%;
    height: 18.8%;
    border-radius: 4px;
    overflow: hidden;
    -webkit-border-radius: 5px;
    -moz-border-radius:    5px;
    border-radius:         5px;
}

.d3-link .sprite {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #5d8dde;
}

.d3-link.active .sprite,
.d3-link:hover .sprite {
    background-color: #bc4c39;
}

.d3-link:active .sprite{
    background-color: #4f4f4f;
}

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

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

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

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

.d3-menu .d3-link-2 {
    top: 20.5%;
}

.d3-menu .d3-link-3 {
    top: 40.9%;
}

.d3-menu .d3-link-4 {
    top: 60.9%;
}

.d3-menu .d3-link-5 {
    bottom: 0%;
}

.d3-menu .icon{
    z-index: 10;
    position: absolute;
    top: 0;
}

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

.d3-menu .d3-link-1 .icon {
    background-position: 0 0;
}

.d3-menu .d3-link-2 .icon {
    background-position: 0 25%;
}

.d3-menu .d3-link-3 .icon {
    background-position: 0 50%;
}

.d3-menu .d3-link-4 .icon {
    background-position: 0 75%;
}

.d3-menu .d3-link-5 .icon  {
    background-position: 0 100%;
}

.d3-menu .decor {
    z-index: 10;
    position: absolute;
    width: 10%;
    height: 3.5%;
    background: url(../images/buttons/d3-menu-decor.png) no-repeat 0 0;
    background-size:         200% 200%;
    -khtml-background-size:  200% 200%;
    -webkit-background-size: 200% 200%;
    -moz-background-size:    200% 200%;
    -o-background-size:      200% 200%;
}

.d3-menu .decor-1 {
    height: 3.5%;
    top: -2%;
    left: 2%;
}
.d3-menu .decor-2 {
    top: 18.2%;
    left: 2%;

}
.d3-menu .decor-3 {
    top: 38.6%;
    left: 2%;
}
.d3-menu .decor-4 {
    top: 59%;
    left: 2%;
}
.d3-menu .decor-5 {
    bottom: 17%;
    height: 4%;
    left: 2%;
    background-position: 0 100%;
}
.d3-menu .decor-6 {
    height: 4%;
    bottom: -3.3%;
    left: 2%;
    background-position: 0 100%;
}
.d3-menu .decor-7 {
    height: 3.5%;
    top: -2%;
    right: 2.8%;
    background-position: 100% 100%;
}
.d3-menu .decor-8 {
    top: 18.2%;
    right: 2.8%;
    background-position: 100% 100%;
}
.d3-menu .decor-9 {
    top: 38.6%;
    right: 2.8%;
    background-position: 100% 100%;
}
.d3-menu .decor-10 {
    top: 59%;
    right: 2.8%;
    background-position: 100% 100%;
}
.d3-menu .decor-11 {
    bottom: 17%;
    height: 4%;
    right: 2.8%;
    background-position: 100% 100%;
}
.d3-menu .decor-12 {
    height: 4%;
    bottom: -3.3%;
    right: 2.8%;
    background-position: 100% 100%;
}

#wrapper3d .bxslider-item {
    position: relative;
}

.bxslider-item .layer-1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}

.bxslider-item .layer-2 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
}

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

/**/

#wrapper3d .jspContainer {
    position: relative;
    overflow: hidden;
}

#wrapper3d .jspPane {
    position: absolute;
}

#wrapper3d .jspVerticalBar {
    position: absolute;
    top: 0;
    right: 0;
    width: 17px;
    height: 100%;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -khtml-border-radius: 8px;
}

#wrapper3d .jspHorizontalBar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: red;
}

#wrapper3d .jspCap {
    display: none;
}

#wrapper3d .jspHorizontalBar .jspCap {
    float: left;
}

#wrapper3d .jspTrack {
    position: relative;
    background: url(../images/scroll/bg.png) repeat 0px 0px;
}

#wrapper3d .jspDrag {
    position: relative;
    top: 0;
    left: 0;
    width: 17px;
    height: 57px !important;
    background: #bbd;
    background: url(../images/scroll/arrows.png) no-repeat -34px 0px;
    cursor: pointer;
}

#wrapper3d .jspHorizontalBar .jspTrack,
#wrapper3d .jspHorizontalBar .jspDrag {
    float: left;
    height: 100%;
}

#wrapper3d .jspArrow {
    display: block;
    margin: 0;
    padding: 0;
    background: #50506d;
    text-indent: -20000px;
    cursor: pointer;
}

#wrapper3d .jspArrow.jspDisabled {
    cursor: default;
}

#wrapper3d .jspVerticalBar .jspArrow {
    height: 20px;
}

#wrapper3d .jspHorizontalBar .jspArrow {
    float: left;
    width: 16px;
    height: 100%;
}

#wrapper3d .jspVerticalBar .jspArrow:focus {
    outline: none;
}

#wrapper3d .jspCorner {
    float: left;
    height: 100%;
    background: #eeeef4;
}

#wrapper3d .jspArrowUp {
    background: url(../images/scroll/arrows.png) no-repeat -17px 1px;
}

#wrapper3d .jspArrowDown {
    background: url(../images/scroll/arrows.png) no-repeat -1px -32px;
}

#wrapper3d .jspCorner {
    margin: 0 -3px 0 0;
}

/**/