#wrapper {
    position: relative;
    margin: 0 auto;
    min-width: 762px;
    min-height: 500px;
    height: 100%;
    background: url(../images/wrapper-bg.jpg) no-repeat center center;
    -o-background-size:         auto 100%;
    -webkit-background-size:    auto 100%;
    -moz-background-size:       auto 100%;
    -khtml-background-size:     auto 100%;
    background-size:            auto 100%;
}

#wrapper .block-bg {
    width: 100%;
}

#block-sportmate .inner,
#block-logo,
#block-shops,
#block-sites,
#block-videos,
#block-3d,
#block-zakupki,
#block-somnium {
    -webkit-transition: all .1s ease-in-out;
    -o-transition:      all .1s ease-in-out;
    transition:         all .1s ease-in-out;
}

#block-logo {
    position: absolute;
    top: 0%;
    left: 27.25%;
    z-index: 13;
    width: 23.65%;
    height: 14%;
}

#block-main-video {
    position: absolute;
    top: 8.5%;
    left: 26.3%;
    width: 46.5%;
    height: 52.2%;
    z-index: 12;
}

#block-sportmate {
    position: absolute;
    bottom: 3.4%;
    left: 49%;
    padding-left: .7%;
    width: 34.9%;
    height: 37%;
}

#block-sportmate-bottom {
    position: absolute;
    bottom: 1%;
    left: 49%;
    width: 47%;
    height: 17%;
}

#block-shops {
    position: absolute;
    top: 1.2%;
    left: .15%;
    z-index: 9;
    width: 38.4%;
    height: 38%;
}

#block-sites {
    position: absolute;
    top: 0%;
    right: .35%;
    z-index: 9;
    width: 43%;
    height: 39.1%;
}

#block-videos {
    position: absolute;
    top: 30.5%;
    left: 3%;
    z-index: 10;
    width: 33%;
    height: 37.6%;
}

#block-3d {
    position: absolute;
    top: 31%;
    right: 4.1%;
    z-index: 9;
    width: 30.3%;
    height: 35%;
}

#block-zakupki {
    position: absolute;
    bottom: .8%;
    left: 3.5%;
    z-index: 9;
    width: 32%;
    height: 40.4%;
}

#block-somnium {
    position: absolute;
    right: 2.4%;
    bottom: 2.9%;
    width: 32.5%;
    height: 38.4%;
    z-index: 1;
}

#block-logo .icon {
    background-image: url(../images/logo.png);
}

#block-main-video .inner {
    position: relative;
    left: 0%;
    z-index: 11;
    display: block;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-main-video-pre.png);
}

#block-sportmate .inner {
    position: relative;
    left: -50%;
    bottom: 3%;
    z-index: 10;
    display: block;
    width: 100%;
    height: 95%;
    background-image: url(../images/block-sportmate.png);
    -webkit-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

#block-sportmate-bottom .inner {
    position: relative;
    left: -50%;
    z-index: 10;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-sportmate-bottom.png);
}

#block-shops .inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-shops.png);
}

#block-sites .inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-sites.png);
}

#block-videos .inner {
    position: relative;
    z-index: 9;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-videos.png);
}

#block-3d .inner {
    position: relative;
    z-index: 9;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-3d.png);
}

#block-zakupki .inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-zakupki.png);
}

#block-zakupki .inner:hover .character-1,
#block-zakupki .inner:hover .character-2 {
    opacity: 0;
}

#block-somnium .inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-image: url(../images/block-somnium.png);
}

#block-sportmate:hover .inner {
    bottom: 11%;
    left: -56%;
    z-index: 99;
    width: 110%;
    height: 110%;
    cursor: pointer;
}

#block-sportmate .block-sportmate-hover {
    background-image: url(../images/block-sportmate-hover.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
}

#block-shops:hover {
    z-index: 99;
    width: 40%;
    height: 39%;
    cursor: pointer;
}

#block-shops .block-shops-hover {
    background-image: url(../images/block-shops-hover.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
}

#block-sites:hover {
    z-index: 99;
    width: 44.5%;
    height: 40.8%;
    cursor: pointer;
}

#block-sites .block-sites-hover {
    background-image: url(../images/block-sites-hover.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    right: 0%;
    opacity: 0;
}

#block-videos:hover {
    top: 29.5%;
    z-index: 99;
    width: 35%;
    height: 39.5%;
    left: 2.8%;
    cursor: pointer;
}

#block-videos .block-videos-hover {
    background-image: url(../images/block-videos-hover.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
    z-index: 99;
}

#block-3d:hover {
    top: 29%;
    right: 4%;
    z-index: 99;
    width: 32%;
    height: 37%;
    cursor: pointer;
}

#block-3d .block-3d-hover {
    background-image: url(../images/block-3d-hover.png);
    position: absolute;
    width: 97.8%;
    height: 99.1%;
    top: 0%;
    left: 1%;
    opacity: 0;
    z-index: 99;
}

#block-zakupki:hover {
    z-index: 99;
    left: 3.4%;
    width: 34%;
    height: 42%;
    cursor: pointer;
}

#block-zakupki .block-zakupki-hover {
    background-image: url(../images/block-zakupki-hover.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
    opacity: 0;
    z-index: 1;
}

#block-somnium:hover {
    z-index: 99;
    width: 34.5%;
    height: 39.5%;
    cursor: pointer;
}

#block-somnium .block-somnium-hover {
    background-image: url(../images/block-somnium-hover.png);
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    right: 0%;
    opacity: 0;
    z-index: 99;
}

#block-3d:hover .block-3d-hover,
#block-sportmate:hover .block-sportmate-hover,
#block-somnium:hover .block-somnium-hover,
#block-zakupki:hover .block-zakupki-hover,
#block-videos:hover .block-videos-hover,
#block-shops:hover .block-shops-hover,
#block-sites:hover .block-sites-hover {
    opacity: 1;
}

/*Menu*/

#menu {
    position: absolute;
    bottom: 7.5%;
    left: 2.9%;
    width: 92.5%;
    z-index: 21;
}

#menu .menu-inner {
    position: relative;
    left: 0.5%;
    width: 100%;
    height: 100%;
}

#menu img.bg {
    width: 100%;
}

#navigation {
    position: absolute;
    top: -59%;
    bottom: -29%;
    display: block;
    width: 100%;
    white-space: nowrap;
    height: 188%;
}

#navigation li {
    display: block;
    position: absolute;
    height: 100%;
}

#navigation .menu-item-1 {
    left: 2%;
    width: 22.5%;
}
#navigation .menu-item-2 {
    left: 26.5%;
    width: 22.5%;
}
#navigation .menu-item-3 {
    right: 26.5%;
    width: 22.5%;
}
#navigation .menu-item-4 {
    right: 2%;
    width: 22.5%;
}


#navigation .menu-item-1 a {
    background-image: url(../images/buttons/service.png);
}

#navigation .menu-item-2 a {
    background-image: url(../images/buttons/portfolio.png);
}

#navigation .menu-item-3 a {
    background-image: url(../images/buttons/portfolio.png);
}

#navigation .menu-item-4 a {
    background-image: url(../images/buttons/contacts.png);
}

/*#navigation .menu-item-4 a {*/
    /*background-image: url(../images/buttons/fb.png);*/
/*}*/

/*#navigation .menu-item-5 a {*/
    /*background-image: url(../images/buttons/google.png);*/
/*}*/

#navigation .menu-item-1 a .icon {
    background-image: url(../images/buttons/main-leistungen.png);
    position: absolute;
}

#navigation .menu-item-2 a .icon {
    background-image: url(../images/buttons/main-blog.png);
    position: absolute;
}

#navigation .menu-item-3 a .icon {
    background-image: url(../images/buttons/main-appfolio.png);
    position: absolute;
}

#navigation .menu-item-4 a .icon {
    background-image: url(../images/buttons/main-impressum.png);
    position: absolute;
}

#navigation li a {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#navigation li img {
    width: 100%;
    height: 100%;
}

#navigation .sprite {
    z-index: 0;
    background-color: #303030;
}

#navigation li:hover .sprite {
    background: #58aae6 url(../images/buttons/menu-grid.png);
    background-position: 50% 50%;
}

#navigation .menu-item-1 .sprite {
    top: 16%;
    left: 2%;
    width: 95%;
    height: 67%;
    z-index: 0;
}

#navigation .menu-item-2 .sprite {
    top: 16%;
    left: 2%;
    width: 95%;
    height: 67%;
    z-index: 0;
}

#navigation .menu-item-3 .sprite {
    top: 16%;
    left: 2%;
    width: 95%;
    height: 67%;
    z-index: 0;
}

#navigation .menu-item-4 .sprite {
    top: 16%;
    left: 2%;
    width: 95%;
    height: 67%;
    z-index: 0;
}

#navigation .menu-item-5 .sprite {
    top: 16%;
    left: 2%;
    width: 95%;
    height: 67%;
    z-index: 0;
}

/*End Menu*/


/*Characters*/

#block-main-video .main-phone {
    position: absolute;
    top: -11.5%;
    left: 49.3%;
    z-index: 12;
    width: 52.4%;
    height: 20.7%;
    cursor: pointer;
    display: block;
}

#block-main-video .main-phone .icon {
    background-image: url(../images/characters/main-phone.png);
    z-index: 1;
}

#block-main-video .main-phone .sprite {
    background-color: #d72329;
    width: 94%;
    height: 83%;
    left: 3%;
    top: 2%;
    z-index: 0;
}

#block-main-video .main-phone:hover .sprite {
    background-color: #2396ef;
}

#block-main-video .main-phone:active .sprite {
    background-color: #434343;
}

#block-sportmate .character {
    position: absolute;
}

#block-sportmate-bottom .character {
    position: absolute;
    bottom: 16%;
    left: 3%;
    width: 36%;
}

#block-sportmate-bottom .character-2 {
    position: absolute;
    right: 8%;
    bottom: 13%;
    width: 17%;
    height: 67%;
    background-image: url(../images/characters/main-character-2.png);
}

#block-sportmate-bottom .character-3 {
    position: absolute;
    left: 4.5%;
    bottom: 10%;
    width: 14%;
    height: 58%;
    background-image: url(../images/characters/main-character-3.png);
}

#block-sportmate-bottom .character-4 {
    z-index: 2;
    position: absolute;
    left: 17.5%;
    bottom: 10%;
    width: 16%;
    height: 63%;
    background-image: url(../images/characters/main-character-4.png);
}

#block-sportmate-bottom .character-5 {
    z-index: 1;
    position: absolute;
    left: 31%;
    bottom: 10%;
    width: 16%;
    height: 64%;
    background-image: url(../images/characters/main-character-5.png);
}

#block-shops .character {
    position: absolute;
}

#block-sites .character {
    position: absolute;
}

.block-videos-character {
    position: absolute;
    top: 43.2%;
    left: .95%;
    width: 5.95%;
    z-index: 11;
}

.block-3d-character {
    position: absolute;
    z-index: 10;
    top: 43.9%;
    right: 0.6%;
    width: 8.3%;
    height: 12.3%;
    background-image: url(../images/characters/main-3d-char-1.png);
}

.block-zakupki-character-1 {
    position: absolute;
    z-index: 10;
    bottom: -0.1%;
    left: 6%;
    width: 7.4%;
    height: 9.6%;
    background-image: url(../images/characters/main-zakupki-char-1.png);
}

.block-zakupki-character-2 {
    position: absolute;
    z-index: 10;
    bottom: 1.9%;
    left: .3%;
    width: 4.5%;
    height: 9.3%;
    background-image: url(../images/characters/main-zakupki-char-2.png);
}

#block-somnium .character {
    position: absolute;
    right: 9%;
    bottom: -7%;
    width: 35%;
}

#block-videos .character,
#block-3d .character,
#block-zakupki .character,
#block-somnium .character {
    opacity: 1;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    -moz-opacity: 1;
    -khtml-opacity: 1;
}

#block-videos:hover .character,
#block-3d:hover .character,
#block-zakupki:hover .character,
#block-somnium:hover .character {
    opacity: 0;
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
}

/*End Characters*/

/*Content*/

.content {
    position: absolute;
}

.content-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.content-inner img {
    max-width: 100%;
    max-height: 100%;
}

#main-video_display {
    z-index: 999;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    top: 0%;
    overflow: visible;
}

#main-video_display_button {
    display: none !important;
}

#block-main-video .content {
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
}

#block-main-video .jwmain {
    position: absolute;
}

#block-main-video .jwmain:before {
    z-index: 10;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: " ";
    position: absolute;
    background-image: url(../images/block-main-video.png);
    -o-background-size:         100% 100%;
    -webkit-background-size:    100% 100%;
    -moz-background-size:       100% 100%;
    -khtml-background-size:     100% 100%;
    background-size:            100% 100%;
    background-position: center center;
    background-repeat: no-repeat;
}

#block-main-video .jwfullscreen .jwmain:before {
    display: none;
}

#block-main-video .jwmain .jwvideo {
    width: 94%;
    display: block;
    height: 76%;
    top: 6.5%;
    left: 2.7%;
    background: transparent !important;

}

#block-main-video .jwmain .jwvideo video {
    width: 100% !important;
    -webkit-transform: scale(1) perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform:    scale(1) perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);
    -o-transform:      scale(1) perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);
    -ms-transform:     scale(1) perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);
    transform:         scale(1) perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);
}

#block-main-video .jwfullscreen .jwmain .jwvideo {
    width: 100% !important;
    height: 100% !important;
    display: block;
    top: 0%;
    left: 0%;
}

#block-main-video .jwfullscreen .jwmain .jwvideo video {
    width: 100% !important;
    height: 100% !important;
    top: 0%;
    left: 0%;
    -webkit-transform: none !important;
    -moz-transform:    none !important;
    -o-transform:      none !important;
    -ms-transform:     none !important;
    transform:         none !important;
}

body #block-main-video .jwmain .jwvideo {
    z-index: 1;
}

#block-main-video .jwmain .jwcontrols {
    z-index: 11;
    width: 94%;
    height: 71%;
    top: 7%;
    left: 3%;

    /*-webkit-transform: perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);*/
    /*-moz-transform:    perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);*/
    /*-o-transform:      perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);*/
    /*-ms-transform:     perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);*/
    /*transform:         perspective(375px) rotateX(-5deg) rotateY(0deg) rotateZ(0deg);*/
}

#block-main-video .jwfullscreen .jwmain .jwcontrols {
    z-index: 11;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

#block-main-video .content-inner {
    height: 100%;
    top: 0%;
    left: 0%;
    overflow: hidden;
}

#block-main-video #main-video_display .jwpreview {
    width: 101.1%;
    height: 123.4%;
    left: -0.3%;
    top: -5%;
    -webkit-transform:  translateZ(0);
    -moz-transform:     translateZ(0);
    -ms-transform:      translateZ(0);
    -o-transform:       translateZ(0);
    transform:          translateZ(0);
}

#block-main-video .jwfullscreen #main-video_display .jwpreview {
    background: none !important;
    display: none !important;
}

#block-main-video #main-video_controlbar {
    z-index: 9999;
    width: 84%;
    left: .8% !important;
    bottom: 1% !important;
}

#block-main-video .jwfullscreen #main-video_controlbar {
    bottom: 10px !important;
    width: auto;
}

#block-main-video #main-video {
    background: transparent !important;
    width: 100% !important;
    height: 100% !important;
}

.play-container {
    position: absolute;
    width: 94.31%;
    height: 86.5%;
    top: 3.9%;
    left: 3.1%;
    z-index: 20;
    overflow: hidden;
    cursor: pointer;
    background: url(../images/content/main-video.png) no-repeat center center;

    -o-background-size:       100% 100%;
    -webkit-background-size:  100% 100%;
    -moz-background-size:     100% 100%;
    -khtml-background-size:   100% 100%;
    background-size:          100% 100%;
}

.play-container-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
}

.play-button {
    position: absolute;
    width: 14.6%;
    height: 21.5%;
    margin-left: -7.9%;
    margin-top: -8.5%;
    background-image: url(../images/buttons/play.png);
    -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-position: 0 0%;
    background-repeat: no-repeat;
}

.play-hovered {
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(../images/buttons/play.png);
    -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-position: 0 100%;
    background-repeat: no-repeat;

    opacity: 0;
}

.play-hovered:hover {
    opacity: 1;
}

.visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/*End Content*/