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

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

.video-bg {
    position: absolute;
    z-index: 1;
    display: block;
    width: 100%;
}

#video-container {
    position: absolute;
    top: 17%;
    left: 15.9%;
    z-index: 10;
    width: 68.4%;
    height: 54.5%;
    background-image: url(../images/video-screen.png);
}

#video-description {
    background-image: url(../images/video-description.png);
    position: absolute;
    width: 66%;
    height: 18%;
    top: 69%;
    left: 17%;
}

#video-container .content {
    top: 9.6%;
    left: 4.2%;
    z-index: 2;
    width: 91.2%;
    height: 86%;
    background-color: #fff;
}

.bg-video-container {
    position: relative;
    z-index: 1;
    width: 100%;
}

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

.video-prev a {
    position: absolute;
    top: 11%;
    right: 6%;
    bottom: 16%;
    left: 8%;
    z-index: 99;
}

.video-next a {
    position: absolute;
    top: 7%;
    right: 10%;
    bottom: 18%;
    left: 6%;
    z-index: 99;
}

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

.video-home {
    bottom: 80.6%;
    right: 13.5%;
    display: block;
    width: 11.5%;
    z-index: 12;
}

.video-prev {
    top: 42.9%;
    right: 81.8%;
    width: 6.2%;
}

.video-next {
    top: 42.9%;
    left: 81.8%;
    width: 6.2%;
}

.video-home .sprite {
    top: 15%;
    left: 9%;
    z-index: 1;
    width: 82%;
    height: 70%;
    background-color: #08a2e9;
}

.video-prev .sprite {
    top: 19%;
    left: 15%;
    z-index: 1;
    width: 75%;
    height: 68%;
    background-color: #08a2e9;
}

.video-next .sprite {
    top: 19%;
    left: 6%;
    width: 80%;
    height: 68%;
    background-color: #08a2e9;
}

.video-link.active .sprite,
.video-link:hover .sprite,
.video-home:hover .sprite,
.video-prev:hover .sprite,
.video-next:hover .sprite {
    background-color: #e34131;
}

.video-link:active .sprite,
.video-home:active .sprite,
.video-prev:active .sprite,
.video-next:active .sprite{
    background-color: #696969;
}

.video-home img.video-home-bg {
    position: absolute;
    top: 18%;
    left: 13%;
    z-index: 0;
    width: 65%;
}

.video-characters {
    position: absolute;
    bottom: 0;
    left: 6%;
    z-index: 2;
    width: 88%;
    height: 26.5%;
    background-image: url(../images/video-page-characters.png);
}

/*Slider*/

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

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

#wrappervideo .bx-viewport {
    overflow: visible !important;
}

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

#wrappervideo .bxslider li .text {
    position: absolute;
    top: 108%;
    left: 3%;
    z-index: 99;
    overflow: hidden;
    width: 94%;
    height: 20%;
    font-size: 105%;
    line-height: 160%;
    color: #fff;
}

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

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

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

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

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

#wrappervideo .bx-pager {
    position: absolute;
    bottom: 90.5%;
    left: -5.5%;
    z-index: 3;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 89.7%;
    height: 24.2%;
}

#wrappervideo .bx-pager a {
    position: absolute;
    display: block;
    float: left;
    overflow: hidden;
    margin-right: 3.7%;
    width: 27.2%;
    height: 100%;
    -webkit-border-radius: 5%;
    border-radius: 5%;
}

#wrappervideo .bx-pager .item-2 {
    left: 26.1%;
    bottom: -2.8%;
}

#wrappervideo .bx-pager .item-3 {
    left: 50.2%;
}

#wrappervideo .bx-pager .item-4 {
    left: 76.1%;
    bottom: -2.8%;
}

#wrappervideo .bx-pager a img {
    position: absolute;
    z-index: 1;
    width: 77%;
    height: 62%;
}

#wrappervideo .bx-pager .item-1 img,
#wrappervideo .bx-pager .item-3 img {
    top: 17%;
    left: 13%;
}

#wrappervideo .bx-pager .item-2 img,
#wrappervideo .bx-pager .item-4 img {
    top: 13.9%;
    left: 10%;
}

#wrappervideo .bx-pager a .icon {
    position: absolute;
    z-index: 2;
    background-image: url(../images/video-thumbs.png);
    background-size:            200% 300%;
    -khtml-background-size:     200% 300%;
    -webkit-background-size:    200% 300%;
    -moz-background-size:       200% 300%;
    -o-background-size:         200% 300%;
    background-repeat: no-repeat;
    transform: translateZ(0);
}

#wrappervideo .bx-pager .item-1 .icon,
#wrappervideo .bx-pager .item-3 .icon{
    background-position: 0 102%;
}

#wrappervideo .bx-pager .item-1:hover .icon,
#wrappervideo .bx-pager .item-3:hover .icon {
    background-position: 0 52%;
}

#wrappervideo .bx-pager .item-1.active .icon,
#wrappervideo .bx-pager .item-3.active .icon {
    background-position: 0 2%;
}

#wrappervideo .bx-pager .item-2 .icon,
#wrappervideo .bx-pager .item-4 .icon{
    background-position: 100% 102.1%;
}

#wrappervideo .bx-pager .item-2:hover .icon,
#wrappervideo .bx-pager .item-4:hover .icon {
    background-position: 100% 52.1%;
}

#wrappervideo .bx-pager .item-2.active .icon,
#wrappervideo .bx-pager .item-4.active .icon {
    background-position: 100% 2.1%;
}

/*End Slider*/

/*Menu*/

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

.video-menu .video-open-2 {
    position: absolute;
    top: 44.4%;
    right: -7%;
    z-index: 12;
    width: 17.4%;
    height: 12.8%;
    cursor: pointer;
}

.video-menu .video-open-2 .arr {
    background-image: url(../images/buttons/arr-right-3.png);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: 13;
}

.video-menu.opened .video-open-2 .arr {
    background-image: url(../images/buttons/arr-left-3.png);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    z-index: 13;
}

.video-menu .video-open-2 .sprite {
    position: absolute;
    top: 16%;
    left: 15%;
    width: 70%;
    height: 69%;
    background-color: #08a2e9;
}

.video-menu .video-open-2:hover .sprite {
    background-color: #bc4c39;
}

.video-menu .video-open-2:active .sprite {
    background-color: #4f4f4f;
}

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

.video-menu .inner {
    position: absolute;
    top: 6.8%;
    left: 8.1%;
    width: 83.6%;
    height: 89.1%;
}

.video-link {
    position: absolute;
    display: block;
    width: 100%;
    height: 17.9%;
    overflow: hidden;
}

.video-link .sprite {
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: #08a2e9;
}

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

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

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

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

.video-menu .video-link-2 {
    top: 21.3%;
    height: 17.6%;
}

.video-menu .video-link-3 {
    top: 41.7%;
    height: 17.6%;
}

.video-menu .video-link-4 {
    top: 62.2%;
    height: 17.6%;
}

.video-menu .video-link-5 {
    bottom: 0%;
    height: 17.6%;
}



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

.video-menu .inner .icon {
    z-index: 10;
    position: absolute;
    top: 0;
    background: url(../images/buttons/video-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%;
}

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

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

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

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

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



.video-menu .menu-text {
    width: 100%;
    height: 100%;
    z-index: 11;
    position: absolute;
}

.video-link-1 .menu-text {
    background-image: url(../images/buttons/video-text-leistungen.png);
}

.video-link-2 .menu-text {
    background-image: url(../images/buttons/video-text-blog.png);
}

.video-link-3 .menu-text {
    background-image: url(../images/buttons/video-text-impressum.png);
}

.video-link-4 .menu-text {
    background-image: url(../images/buttons/video-text-facebook.png);
}

.video-link-5 .menu-text {
    background-image: url(../images/buttons/video-text-google.png);
}

/*Scroll*/

#wrappervideo .jspVerticalBar {
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    width: 2.6%;
    border: 1px solid #808080;
    background: #676767;
    height: 100%;
    box-sizing: border-box;
}

#wrappervideo .jspDrag {
    background: #a5a5a5;
    margin: 0 1px;
    width: 88%;
    height: 30% !important;
}

#wrappervideo .jspTrack {
    background: #676767;
    height: 66% !important;
}

#wrappervideo .jspVerticalBar .jspArrow {
    width: 100%;
    height: 17%;
    border: 1px solid #676767;
    box-sizing: border-box;
    position: relative;
}

#wrappervideo .jspArrowUp {
    background: #a7a7a7;
}

#wrappervideo .jspArrowUp:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-bottom: 7px solid #fff;
    top: 20%;
    left: 25%;
}

#wrappervideo .jspArrowDown {
    background: #a7a7a7;
}

#wrappervideo .jspArrowDown:after {
    content: " ";
    position: absolute;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid #fff;
    bottom: 20%;
    left: 25%;
}

.video-thumb-layer-1 {

}

.video-thumb-layer-2 {

}

/*End scroll*/