html{
  height: 100%;
  width: 100%;
}

body {
    position:absolute; 
    top : 0;
    right : 0; 
    left : 0;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    vertical-align: middle;
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    -webkit-text-size-adjust: none; /* autom. iOS-Anpassung umgehen */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* jQueryMobile-Hintergrund */
.ui-page {
      background: transparent;
    }

#flashContent {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.fullsize {
    color: #0F0;
    display: block;
    position: absolute;
    background: none repeat scroll 0 0 white;
    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
}

img[usemap] {
    border: none;
    outline: none;  /* keine blauen Linien in Safari/ Chrome */ 
    /* Hoehenberechnung:  100vh - 2 * 20px (MP3-Player, Angabe top:20 in fancybox) - 2 * 10 (margin fancybox)  */
}

@media all and (orientation:portrait) {
    .fullsize {
        /* Fallback: */
        width : 100%;
        height: auto;
        /* 16/9-Ratio:  */
        height: 56.25vw; 
        width: 100vw;
        max-height: 100vh;
        max-width: 177.78vh;
    }

    img[usemap] {
        width: 100%;
        height: auto;
        width: 100vw;
        max-width: 100vw;
        max-height: -moz-calc(100vh - 60px);
        max-height: -webkit-calc(100vh - 60px);
        max-height: -o-calc(100vh - 60px);
        max-height: calc(100vh - 60px);
    }
}

@media all and (orientation:landscape) {
    .fullsize {
        /* Fallback: */
        height: 100%;   
        width : auto;
        /* 16/9-Ratio:  */
        height: 56.25vw; 
        width: 100vw;
        max-height: 100vh;
        max-width: 177.78vh;
    }

    img[usemap] {
        // Firefox
        height: -moz-calc(100% - 60px);
        height: -moz-calc(100vh - 60px);
        max-height: -moz-calc(100vh - 60px);
        // WebKit
        height: -webkit-calc(100% - 60px);
        height: -webkit-calc(100vh - 60px);
        max-height: -webkit-calc(100vh - 60px);
        // Opera
        height: -o-calc(100% - 60px);
        height: -o-calc(100vh - 60px);
        max-height: -o-calc(100vh - 60px);
        // Standard
        height: calc(100% - 60px);
        height: calc(100vh - 60px);
        max-height: calc(100vh - 60px);

        width: auto;
    }
}

#closeBtn {
    position: fixed;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;
    bottom:  5%;
    left: 50%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;
    bottom:  5vh;
    left: 50vw;

    cursor: pointer;
    z-index: 10000;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background: url(../files/images/icons/Close.png) no-repeat;
    background-size: contain;
}

#prevBtn {
    position: fixed;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;
    bottom:  5%;
    left: 5%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;
    bottom:  5vh;
    left: 5vh;

    cursor: pointer;
    z-index: 10000;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background: url(../files/images/icons/Arrow-Back.png) no-repeat;
    background-size: contain;
}

#nextBtn {
    position: fixed;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;
    bottom:  5%;
    right: 5%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;
    bottom:  5vh;
    right: 5vh;

    cursor: pointer;
    z-index: 10000;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
    background: url(../files/images/icons/Arrow-Next.png) no-repeat;
    background-size: contain;
}

.centerBtn {
    position: fixed;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;
    bottom:  5%;
    left: 50%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;
    bottom:  5vh;
    left: 50vw;

    cursor: pointer;
    z-index: 10000;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}

.leftBtn {
    position: fixed;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;
    bottom:  5%;
    left: 5%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;
    bottom:  5vh;
    left: 5vh;

    cursor: pointer;
    z-index: 10000;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    background: url(../files/images/icons/Arrow-Back.png) no-repeat;
    background-size: contain;
}

.rightBtn {
    position: fixed;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;
    bottom:  5%;
    right: 5%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;
    bottom:  5vh;
    right: 5vh;

    cursor: pointer;
    z-index: 10000;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
    background: url(../files/images/icons/Arrow-Next.png) no-repeat;
    background-size: contain;
}

.flagBtn {
    position: relative;

    /* Fallback CSS2 */
    height: 10%;
    width: 10%;

    /* fuer moderne Browser */ 
    width: 10vh;
    height: 10vh;

    cursor: pointer;
    z-index: 10000;
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

p {
    margin-top: 0px;
    margin-bottom: 0px;
}

.clearout {
height:20px;
clear:both;
}

.nbs-flexisel-container {
    position:relative;
    max-width:100%;
}

.nbs-flexisel-ul {
    position:relative;
    width:9999px;
    margin:0px;
    padding:0px;
    list-style-type:none;   
    text-align:center;  
}

.nbs-flexisel-inner {
    position: fixed;
    bottom: 0px;
    height:  20%;
    height:  20vh;
    /* heigth: -webkit-calc(20% - 0px); */
    overflow:hidden;
    float:left;

    left: 0px;
    right: 0px;
    width: 100%;
}

.nbs-flexisel-item {
    float:left;
    margin:0px;
    padding:0px;
    cursor:pointer;
    position:relative;
    line-height:0px;
}
.nbs-flexisel-item img {
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-top: 0px;
    margin-bottom: 0px;
}

/*  jssor */
        /* jssor slider bullet navigator skin 03 css */
        /*
        .jssorb03 div           (normal)
        .jssorb03 div:hover     (normal mouseover)
        .jssorb03 .av           (active)
        .jssorb03 .av:hover     (active mouseover)
        .jssorb03 .dn           (mousedown)
        */
        .jssorb03 {
            position: absolute;
        }
        .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
            position: absolute;
            /* size of bullet elment */
            width: 21px;
            height: 21px;
            text-align: center;
            line-height: 21px;
            color: white;
            font-size: 12px;
            background: url(../files/images/icons/b03.png) no-repeat;
            overflow: hidden;
            cursor: pointer;
        }
        .jssorb03 div { background-position: -5px -4px; }
        .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
        .jssorb03 .av { background-position: -65px -4px; }
        .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }

        /* jssor slider arrow navigator skin 03 css */
        /*
        .jssora03l                  (normal)
        .jssora03r                  (normal)
        .jssora03l:hover            (normal mouseover)
        .jssora03r:hover            (normal mouseover)
        .jssora03l.jssora03ldn      (mousedown)
        .jssora03r.jssora03rdn      (mousedown)
        */
        .jssora03l, .jssora03r {
            display: block;
            position: absolute;
            /* size of arrow element */
            width: 55px;
            height: 55px;
            cursor: pointer;
            background: url(../files/images/icons/a03.png) no-repeat;
            overflow: hidden;
        }
        .jssora03l { background-position: -3px -33px; }
        .jssora03r { background-position: -63px -33px; }
        .jssora03l:hover { background-position: -123px -33px; }
        .jssora03r:hover { background-position: -183px -33px; }
        .jssora03l.jssora03ldn { background-position: -243px -33px; }
        .jssora03r.jssora03rdn { background-position: -303px -33px; }
/*  jssor end */

/*** Navigation ***/

.nbs-flexisel-nav-left,
.nbs-flexisel-nav-right {
    position: fixed;

    /*  Fallback CSS2 */
    width: 10%;
    height: 10%;
    bottom:  5%;
    
    width: 10vh;
    height: 10vh;
    bottom:  5vh;

    cursor: pointer;
    z-index: 100;
    opacity: 0.8;
    filter: alpha(opacity=80); /* For IE8 and earlier */
}

.nbs-flexisel-nav-left {
    left: 5%;
    left: 5vh;
    background: url(../files/images/icons/Arrow-Back.png) no-repeat;
    background-size: contain;
}

.nbs-flexisel-nav-right {
    right: 5%;
    right: 5vh;
    background: url(../files/images/icons/Arrow-Next.png) no-repeat;
    background-size: contain;
}
