/*********************************************************************************************************************/
/* responsive design                                                                                                 */
/*                                                                                                                   */
/* Details & Guide: http://t3n.de/news/grid-responsive-webdesign-tutorial-544519/ http://adamkaplan.me/grid/         */
/*********************************************************************************************************************/

/*********************************************************************************************************************/
/* awesome list of parameters for responsive design for different iPhone/iPad versions                               */
/*                                                                                                                   */
/* http://stephen.io/mediaqueries/                                                                                   */
/*********************************************************************************************************************/

/*********************************************************************************************************************/
/* keeping proportions / aspect ratio of width and hight...                                                          */
/*                                                                                                                   */
/* by using vw/vh/vm/vmin (viewport width/height/min/min) by web-tiki:                                               */
/* http://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css                            */
/* http://codepen.io/web-tiki/pen/pjmmqN                                                                             */
/*                                                                                                                   */
/* even nicer ratio solution:                                                                                        */
/* http://www.mademyday.de/css-height-equals-width-with-pure-css.html                                                */
/*********************************************************************************************************************/

/***********************************************/
/*** fonts                                   ***/
/***********************************************/

@font-face {
     font-family: "DejaVu Sans";
     local: "DejaVu Sans";
     src: url("/DejaVuSans.ttf");
 }

@font-face {
     font-family: "DejaVu Sans Mono Bold";
     local: "DejaVu Sans Mono Bold";
     src: url("/DejaVuSansMono-Bold.ttf");
}

@font-face {
     font-family: "DejaVu Serif";
     local: "DejaVu Serif";
     src: url("/DejaVuSerif.ttf");
 }

@font-face {
     font-family: "Toxel 4.x prestige Sans";
     local: "Toxel 4.x prestige Sans";
     src: url("/toxel_4x_tp_sans.ttf");
 }

@font-face {
     font-family: "LEBEN Standard";
     local: "LEBEN Standard";
     src: url("/LEBEN_Standard_1_800.ttf");
}

@font-face {
     font-family: "LEBEN Broken";
     local: "LEBEN Broken";
     src: url("/LEBEN_Broken_1_800.ttf");
}

/***********************************************/
/*** link styles                             ***/
/***********************************************/

a {
    color: #FFF;
    font-weight: normal;
    text-decoration: none;
}

.int {
    border-bottom: 2px #FFF dotted;
}

.ext {
    border-bottom: 2px #FFF solid;
    padding-right: 15px;
    background-position: right top;
    background-repeat: no-repeat;
    background-image: url("img/ext_arrow.png");
}

.nfo {
}

/***********************************************/
/*** color sets                              ***/
/***********************************************/

/**********/
/* bg_blk */
/**********/
.bg_blk {
    background: #555;
}
.bg_blk  > .inner {
    background: #020202;
}
.bg_blk h1,
.bg_blk h2,
.bg_blk h3,
.bg_blk li,
.bg_blk p,
.bg_blk a {
    color: #FFF;
}
.c_blk  {
    color: #020202;
}
.bg_blk .int {
    border-bottom: 2px #FFF dotted;
}
.bg_blk .ext {
    border-bottom: 2px #FFF solid;
}
.bg_blk .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_drk */
/**********/
.bg_drk {
    background: #888;
}
.bg_drk  > .inner {
    background: #333333;
}
.bg_drk h1,
.bg_drk h2,
.bg_drk h3,
.bg_drk li,
.bg_drk p,
.bg_drk a {
    color: #FFF;
}
.bg_drk  {
    color: #333333;
}
.bg_drk .int {
    border-bottom: 2px #FFF dotted;
}
.bg_drk .ext {
    border-bottom: 2px #FFF solid;
}
.bg_drk .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_wht */
/**********/
.bg_wht {
    background: #FFF;
}
.bg_wht > .inner {
    background: #E8E8E8;
}
.bg_wht h1,
.bg_wht h2,
.bg_wht h3,
.bg_wht li,
.bg_wht p,
.bg_wht a {
    color: #222;
}
.c_wht {
    color: #E8E8E8;
}
.bg_wht .int {
    border-bottom: 2px #222 dotted;
}
.bg_wht .ext {
    border-bottom: 2px #222 solid;
}
.bg_wht .nfo {
    color: #02A8E3;
    border-bottom: 2px #02A8E3 dashed;
}

/**********/
/* bg_red */
/**********/
.bg_red {
    background: #E56666;
}
.bg_red > .inner {
    background: #D40909;
}
.bg_red h1,
.bg_red h2,
.bg_red h3,
.bg_red li,
.bg_red p,
.bg_red a {
    color: #FFF;
}
.c_red {
    color: #D40909;
}
.bg_red .int {
    border-bottom: 2px #FFF dotted;
}
.bg_red .ext {
    border-bottom: 2px #FFF solid;
}
.border .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_ora */
/**********/
.bg_ora {
    background: #DCB36E;
}
.bg_ora > .inner {
    background: #DC890C;
}
.bg_ora h1,
.bg_ora h2,
.bg_ora h3,
.bg_ora li,
.bg_ora p,
.bg_ora a {
    color: #FFF;
}
.c_ora {
    color: #DC890C;
}
.bg_ora .int {
    border-bottom: 2px #FFF dotted;
}
.bg_ora .ext {
    border-bottom: 2px #FFF solid;
}
.bg_ora .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_yel */
/**********/
.bg_yel {
    background: #D9DC6E;
}
.bg_yel > .inner {
    background: #DCDB11;
}
.bg_yel h1,
.bg_yel h2,
.bg_yel h3,
.bg_yel li,
.bg_yel p,
.bg_yel a {
    color: #222;
}
.c_yel {
    color: #DCDB11;
}
.bg_yel .int {
    border-bottom: 2px #222 dotted;
}
.bg_yel .ext {
    border-bottom: 2px #222 solid;
}
.bg_yel .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_lim */
/**********/
.bg_lim {
    background: #AFDC6D;
}
.bg_lim > .inner {
    background: #9CDC14;
}
.bg_lim h1,
.bg_lim h2,
.bg_lim h3,
.bg_lim li,
.bg_lim p,
.bg_lim a {
    color: #222;
}
.c_lim {
    color: #9CDC14;
}
.bg_lim .int {
    border-bottom: 2px #222 dotted;
}
.bg_lim .ext {
    border-bottom: 2px #222 solid;
}
.bg_lim .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_grn */
/**********/
.bg_grn {
    background: #7ADC76;
}
.bg_grn > .inner {
    background: #27DC13;
}
.bg_grn h1,
.bg_grn h2,
.bg_grn h3,
.bg_grn li,
.bg_grn p,
.bg_grn a {
    color: #FFF;
}
.c_grn {
    color: #27DC13;
}
.bg_grn .int {
    border-bottom: 2px #FFF dotted;
}
.bg_grn .ext {
    border-bottom: 2px #FFF solid;
}
.bg_grn .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_cya */
/**********/
.bg_cya {
    background: #7DC5DC;
}
.bg_cya > .inner {
    background: #02A8E3;
}
.bg_cya h1,
.bg_cya h2,
.bg_cya h3,
.bg_cya li,
.bg_cya p,
.bg_cya a {
    color: #FFF;
}
.c_cya {
    color: #02A8E3;
}
.bg_cya .int {
    border-bottom: 2px #FFF dotted;
}
.bg_cya .ext {
    border-bottom: 2px #FFF solid;
}
.bg_cya .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_blu */
/**********/
.bg_blu {
    background: #73A6DC;
}
.bg_blu > .inner {
    background: #0861E3;
}
.bg_blu h1,
.bg_blu h2,
.bg_blu h3,
.bg_blu li,
.bg_blu p,
.bg_blu a {
    color: #FFF;
}
.c_blu {
    color: #0861E3;
}
.bg_blu .int {
    border-bottom: 2px #FFF dotted;
}
.bg_blu .ext {
    border-bottom: 2px #FFF solid;
}
.bg_blu .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_vio */
/**********/
.bg_vio {
    background: #717BDC;
}
.bg_vio > .inner {
    background: #3A06E1;
}
.bg_vio h1,
.bg_vio h2,
.bg_vio h3,
.bg_vio li,
.bg_vio p,
.bg_vio a {
    color: #FFF;
}
.c_vio {
    color: #3A06E1;
}
.bg_vio .int {
    border-bottom: 2px #FFF dotted;
}
.bg_vio .ext {
    border-bottom: 2px #FFF solid;
}
.bg_vio .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_cpn */
/**********/
.bg_cpn {
    background: #B770DC;
}
.bg_cpn > .inner {
    background: #C509E1;
}
.bg_cpn h1,
.bg_cpn h2,
.bg_cpn h3,
.bg_cpn li,
.bg_cpn p,
.bg_cpn a {
    color: #FFF;
}
.c_cpn {
    color: #C509E1;
}
.bg_cpn .int {
    border-bottom: 2px #FFF dotted;
}
.bg_cpn .ext {
    border-bottom: 2px #FFF solid;
}
.bg_cpn .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_pnk */
/**********/
.bg_pnk {
    background: #D370DC;
}
.bg_pnk > .inner {
    background: #E113CB;
}
.bg_pnk h1,
.bg_pnk h2,
.bg_pnk h3,
.bg_pnk li,
.bg_pnk p,
.bg_pnk a {
    color: #FFF;
}
.c_pnk {
    color: #E113CB;
}
.bg_pnk .int {
    border-bottom: 2px #FFF dotted;
}
.bg_pnk .ext {
    border-bottom: 2px #FFF solid;
}
.bg_pnk .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/**********/
/* bg_hpn */
/**********/
.bg_hpn {
    background: #DC77B6;
}
.bg_hpn > .inner {
    background: #E11A7F;
}
.bg_hpn h1,
.bg_hpn h2,
.bg_hpn h3,
.bg_hpn li,
.bg_hpn p,
.bg_hpn a {
    color: #FFF;
}
.c_hpn {
    color: #E11A7F;
}
.bg_hpn .int {
    border-bottom: 2px #FFF dotted;
}
.bg_hpn .ext {
    border-bottom: 2px #FFF solid;
}
.bg_hpn .nfo {
    color: #9CDC14;
    border-bottom: 2px #9CDC14 dashed;
}

/***********************************************/
/*** basics                                  ***/
/***********************************************/

.h_lft { text-align: left; }
.h_ctr { text-align: center; }
.h_rgt { text-align: right; }
.h_blk { text-align: justify; }

.v_top { vertical-align: top; }
.v_mid { vertical-align: middle; }
.v_btm { vertical-align: bottom; }

.tt_upp { text-transform: uppercase; }
.tt_low { text-transform: lowercase; }
.tt_cap { text-transform: capitalize; }

.big { font-size: 120%; }
.sml { font-size: 80%; }

.bigr { font-size: 150%; }
.smlr { font-size: 50%; }

/***********************************************/
/*** misc                                    ***/
/***********************************************/

body,
p,
li {
    font-family: "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}

h1,
h2,
h3 {
    font-family: "LEBEN Standard", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}

img {
    border: none;
    margin: 0px;
    padding: 0px;
}

b,
i {
    font-family: "DejaVu Sans", "Verdana", "Helvetica", "Sans-Serif";
}

#top {
    position: absolute;
    top: 0px;
    display: inline-block;
}

#n_img {
    font-family: "LEBEN Broken", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}
#n_tit,
#n_lng,
#n_top,
#n_ver,
#n_btm {
    font-family: "LEBEN Standard", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}

#n_img,
#n_top {
    text-align: left;
}
#n_tit,
#n_ver {
    text-align: cener;
}
#n_lng,
#n_btm {
    text-align: right;
}

.leben_b {
    font-family: "LEBEN Broken", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}
.leben_s {
    font-family: "LEBEN Standard", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}

.toxel_lat {
    font-family: "Toxel 4.x prestige Sans", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}
.toxel_t1 {
    font-family: "Toxel 4.x T1 Sans", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}
.toxel_t2 {
    font-family: "Toxel 4.x T2 Sans", "DejaVu Serif", "Times New Roman", "Times", "Sans-Serif";
}
.toxel_lat,
.toxel_t1,
.toxel_t2 {
    font-size: 150%;
}

/*###################################################################################################################*/
/*### responsive-design :: small/tiny screen :: DEFAULT MODE                                                      ###*/
/*###################################################################################################################*/

/***********************************************/
/*** main settings                           ***/
/***********************************************/

body {
    background: #020202;
    margin: 0;
    padding: 0;
    font-size: 14px;
    text-align: center;
}

body,
p,
li {
    margin: 5.2vw 0px 0px;
    padding: 0px;
    color: white;
    font-size: 2.4vw;
    font-weight: normal;
    font-style: normal;
    line-height: 5.0vw;
    letter-spacing: 0.15vw;
}
.leben_s,
.leben_b {
    font-size: 2.6vw;
    letter-spacing: -0.10vw;
}

b,
i {
    letter-spacing: 0.00vw;
}

h1,
h2,
h3, 
h1 .leben_b,
h2 .leben_b,
h3 .leben_b, 
h1 .leben_s,
h2 .leben_s,
h3 .leben_s {
    font-weight: normal;
    margin: 4vw 0px 6vw;
    padding: 0px;
    font-size: 5.0vw;
    letter-spacing: -0.2vw;
}
h2,
h2 .leben_b,
h2 .leben_s {
    margin: 6vw 0px -2.5vw;
    padding: 0px;
    font-size: 4.0vw;
    letter-spacing: -0.15vw;
    /*color: #777;*/
    font-style: italic;
}
h3,
h3 .leben_b,
h3 .leben_s {
    margin: 6vw 0px -2.5vw;
    padding: 0px;
    font-size: 3.5vw;
    letter-spacing: -0.12vw;
    /*color: #777;*/
}

.anchor {
    position: absolute;
    display: inline-block;
    margin-top: -7.2vh;
}

.arrow {
    width: 4.0vw;
    height: 4.0vw;
}

.flag {
    width: 7.0vw;
    height: 4.0vw;
}

/* 1:0,4 */
#sign {
    display: block;
    width: 30vw;
    height: 12vw;
    margin: 5vw auto 0vw;
}

#n_img img,
#n_top img {
    margin-right: 0.8vw;
}
#n_lng img,
#n_btm img {
    margin-left: 0.8vw;
}

#n_img {
    text-align: left;
}

#n_img {
    font-size: 5.0vw;
    letter-spacing: -0.03vw;
}
#n_img .leben_s
#n_tit,
#n_tit .leben_s,
#n_tit .leben_b,
#n_lng,
#n_top,
#n_ver,
#n_btm {
    font-size: 2.5vw;
    letter-spacing: -0.04vw;
}

/***********************************************/
/*** content areas                           ***/
/***********************************************/

.outer {
    display: block;
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}
.shd {
    -webkit-box-shadow: 0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
    -moz-box-shadow:    0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
    box-shadow:         0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
    z-index: 900;
    /*border-bottom: 1px solid #222;
    border-top:    1px solid #222;*/
}
.inner {
    display: block;
    position: relative;
    width: 100%;
    margin: 0px;
    padding: 0px;
    vertical-align: top;
}

.head,
.foot {
    background: #222;
    vertical-align: middle;
    position: fixed;
    z-index: 999;
    opacity: 0.90;
    box-shadow: 0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
}
.head {
    top: 0px;
    border-bottom: 1px solid #000;
}
.foot {
    bottom: 0px;
    border-top: 1px solid #000;
}
.first > .inner {
    /*background: #F00;*/
    padding-top: 9vh;
    margin-top: -5.5vw;
}
.last > .inner {
    /*background: #F00;*/
    padding-bottom: 12vh;
    margin-bottom: -5.5vw;
}
.head > .inner,
.foot > .inner {
    display: inline-block;
    width: 30.0vw;
    margin: 0px;
    background: transparent;
    vertical-align: middle;
    /*font-family: "DejaVu Sans", "Verdana", "Helvetica", "Sans-Serif";*/
    font-size: 2.5vh;
    color: #FFF;
    /*DEV color: #F0F;*/
    padding: 1.5vh 0.5vw;
}
.head > .inner .leben_b,
.head > .inner .leben_s,
.foot > .inner .leben_b,
.foot > .inner .leben_s {
    font-size: 2.2vh;
    letter-spacing: 0.1vw;
}
.inner_txt {
    display: block;
    width: 92vw; /* 38 - ( 2 x padding ) */
    margin: 0px;
    padding: 3.0vw;
    background: transparent;
    vertical-align: top;
    padding-bottom: 116vw;
}
.no_img .inner_txt {
    padding-bottom: 10vw;
}
.h_lft > .inner  > .inner_txt {
    margin-left: 0vw;
    /*padding-right: 1.0vw;*/
}
.h_rgt > .inner  > .inner_txt {
    margin-right: 0vw;
    /*padding-left: 1.0vw;*/
}
.h_blk > .inner  > .inner_txt {
    width: 95.5vw;
    padding-bottom: 4vw;
}
.inner_img {
    display: block;
    position: absolute;
    width: 100vw;
    height: 116vw;
    margin: 0px;
    padding: 0px;
    background: transparent;
    vertical-align: bottom;
    left: 0px;
    margin-left: 0px;
    bottom: 0vw;
    overflow: hidden;
}
.outer.h_lft .inner_img {
    left: 0px;
}
.outer.h_rgt .inner_img {
    right: 0px;
}
.inner_buffer {
    display: block;
    position: relative;
    vertical-align: top;
    margin: 0px;
    padding: 0px;
    border: 0px;
    top: 50%;
    height: 0px;
}
.inner_img > .inner_buffer > img {
    position: relative;
    vertical-align: top;
    width: 100vw;
    height: 116vw;
    top: -58vw;
    border: 0px;
    margin: 0px;
    padding: 0px;
}
/* align on top */
.inner_buffer.v_top {
    top: 0%;
}
.inner_buffer.v_top > img {
    top: 0vw;
}
/* align in the middle */
.inner_buffer.v_mid {
    top: 50%;
}
.inner_buffer.v_mid > img {
    top: -58vw;
}
/* align on bottom */
.inner_buffer.v_btm {
    top: 100%;
}
.inner_buffer.v_btm > img {
    top: -116vw;
}

/*###################################################################################################################*/
/*### responsive-design :: detect other devices                                                                   ###*/
/*###################################################################################################################*/

#n_ver:after {
    content: 'S';
}

/* phones or highly zoomed in screens*/
@media only screen and (min-device-pixel-ratio: 2),
       only screen and (min-resolution: 200dpi),
       only screen and (max-aspect-ratio: 6/9)
{
    #n_ver:after {
        content: 'P';
    }
    
    /***********************************************/
    /*** main settings                           ***/
    /***********************************************/

    body {
    }
    
    body,
    p,
    li {
        margin: 8.0vw 0px 0px;
        font-size: 4.00vw;
        line-height: 7.5vw;
        letter-spacing: 0.6vw;
    }
    .leben_s,
    .leben_b {
        font-size: 4.50vw;
        letter-spacing: -0.25vw;
    }

    b,
    i {
        letter-spacing: 0.05vw;
    }

    h1,
    h2,
    h3,
    h1 .leben_b,
    h2 .leben_b,
    h3 .leben_b, 
    h1 .leben_s,
    h2 .leben_s,
    h3 .leben_s {
        /*color: red !important;*/
        margin: 5vw 0px -2vw;
        font-size: 5.6vw;
        letter-spacing: 0.08vw;
    }
    h2,
    h2 .leben_b,
    h2 .leben_s {
        margin: 6vw 0px -4vw;
        font-size: 4.8vw;
        letter-spacing: 0.10vw;
    }
    h3,
    h3 .leben_b,
    h3 .leben_s {
        margin: 6vw 0px -6vw;
        font-size: 3.6vw;
        letter-spacing: 0.10vw;
    }

    .anchor {
        position: absolute;
        display: inline-block;
        margin-top: -6.0vh;
    }

    .arrow {
        width: 4.0vw;
        height: 4.0vw;
    }

    .flag {
        width: 8.75vw;
        height: 5.0vw;
    }

    /* 1:0,4 */
    #sign {
        width: 50vw;
        height: 20vw;
        margin: 6vw auto 0vw;
    }

    #n_img img,
    #n_top img {
        margin-right: 1.5vw;
    }
    #n_lng img,
    #n_btm img {
        margin-left: 1.5vw;
    }

    #n_img {
        text-align: left;
    }

    #n_img {
        font-size: 5.5vw;
        letter-spacing: -0.05vw;
    }
    #n_img .leben_s
    #n_tit,
    #n_tit .leben_s,
    #n_tit .leben_b,
    #n_lng,
    #n_top,
    #n_ver,
    #n_btm {
        font-size: 3.5vw;
        letter-spacing: 0.10vw;
    }

    /***********************************************/
    /*** content areas                           ***/
    /***********************************************/

    .outer {
    }

    .shd {
        -webkit-box-shadow: 0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
        -moz-box-shadow:    0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
        box-shadow:         0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
    }

    .inner {
    }

    .head,
    .foot {

        box-shadow: 0px 0px 8vw 0.5vw rgba( 0, 0, 0, 0.75 );
    }
    .head {
    }

    .foot {
    }

    .first > .inner {
        margin-top: -8vw;
        padding-top: 16vw;
    }

    .last > .inner {
        padding-bottom: 18vw;
    }

    .head > .inner,
    .foot > .inner {
        width: 30.0vw;
        font-size: 2.0vw;
        padding: 1.5vh 0.5vw;
    }
    .head > .inner .leben_b,
    .head > .inner .leben_s,
    .foot > .inner .leben_b,
    .foot > .inner .leben_s {
        font-size: 2.5vw;
        letter-spacing: 0.0vw;
    }
    .inner_txt {
        display: block;
        width: 92vw; /* 38 - ( 2 x padding ) */
        margin: 0px;
        padding: 3.0vw;
        background: transparent;
        vertical-align: top;
        padding-bottom: 116vw;
    }

    .h_lft > .inner  > .inner_txt {
        margin-left: 0vw;
        /*padding-right: 1.0vw;*/
    }
    .h_rgt > .inner  > .inner_txt {
        margin-left: 0vw;
        /*padding-left: 1.0vw;*/
    }
    .h_blk > .inner  > .inner_txt {
        width: 95.5vw;
        padding-bottom: 4vw;
    }
    .inner_img {
        width: 100vw;
        height: 116vw;
    }
    .outer.h_lft .inner_img {
        left: 0px;
    }
    .outer.h_rgt .inner_img {
        right: 0px;
    }
    .inner_buffer {
    }

    .inner_img > .inner_buffer > img {
        width: 100vw;
        height: 116vw;
        top: -58vw;
    }
    /* align on top */
    .inner_buffer.v_top {
    }

    .inner_buffer.v_top > img {
    }

    /* align in the middle */
    .inner_buffer.v_mid {
    }

    .inner_buffer.v_mid > img {
        top: -58vw;
    }
    /* align on bottom */
    .inner_buffer.v_btm {
    }

    .inner_buffer.v_btm > img {
        top: -116vw;
    }
}
/* non-phones or non-highly zoomed in screens*/
@media only screen and (max-device-pixel-ratio: 1.999999999999),
       only screen and (max-resolution: 199.999999999999dpi)
{
    @media (min-aspect-ratio: 6/9)
    {
        /*@media screen and (min-width: 960px)*/
        @media     (min-width: 60rem)
               and (max-width: 79.999999999999rem),
        /* classic iPad */
                   (min-device-width: 768px)
               and (max-device-width: 1024px),
        /* retina iPad in portrait */
                    (min-device-width: 768px) 
               and (max-device-width: 1024px)
               and (orientation: portrait)
               and (-webkit-min-device-pixel-ratio: 2),
        /* iPhone 6 Plus */
                    (min-device-width : 414px) 
               and (max-device-width : 736px)
        {
            #n_ver:after {
                content: 'M';
            }
            
            /***********************************************/
            /*** main settings                           ***/
            /***********************************************/

            body {
            }
            
            body,
            p,
            li {
                margin: 2.8vw 0px 0px;
                font-size: 1.40vw;
                line-height: 3.0vw;
                letter-spacing: 0.18vw;
            }
            .leben_s,
            .leben_b {
                font-size: 1.55vw;
                letter-spacing: 0.1vw;
            }

            b,
            i {
                letter-spacing: 0.05vw;
            }

            h1,
            h2,
            h3,
            h1 .leben_b,
            h2 .leben_b,
            h3 .leben_b, 
            h1 .leben_s,
            h2 .leben_s,
            h3 .leben_s {
                margin: 3vw 0px 3vw;
                font-size: 3.0vw;
                letter-spacing: 0.08vw;
            }
            h2,
            h2 .leben_b,
            h2 .leben_s {
                margin: 4vw 0px -2vw;
                font-size: 2.5vw;
                letter-spacing: 0.10vw;
            }
            h3,
            h3 .leben_b,
            h3 .leben_s {
                margin: 2.5vw 0px -2vw;
                font-size: 2.0vw;
                letter-spacing: 0.10vw;
            }

            .anchor {
                position: absolute;
                display: inline-block;
                margin-top: -6.0vh;
            }

            .arrow {
                width: 3.0vw;
                height: 3.0vw;
            }

            .flag {
                width: 5.25vw;
                height: 3.0vw;
            }

            /* 1:0,4 */
            #sign {
                width: 25vw;
                height: 10vw;
                margin: 3vw auto 0vw;
            }

            #n_img img,
            #n_top img {
                margin-right: 1.0vw;
            }
            #n_lng img,
            #n_btm img {
                margin-left: 1.0vw;
            }

            #n_img {
                text-align: left;
            }

            #n_img {
                font-size: 4.0vw;
                letter-spacing: 0.10vw;
            }
            #n_img .leben_s
            #n_tit,
            #n_tit .leben_s,
            #n_tit .leben_b,
            #n_lng,
            #n_top,
            #n_ver,
            #n_btm {
                font-size: 2.0vw;
                letter-spacing: 0.00vw;
            }

            /***********************************************/
            /*** content areas                           ***/
            /***********************************************/

            .outer {
            }

            .shd {
                -webkit-box-shadow: 0px 0px 1vw 0.2vw rgba( 0, 0, 0, 0.75 );
                -moz-box-shadow:    0px 0px 1vw 0.2vw rgba( 0, 0, 0, 0.75 );
                box-shadow:         0px 0px 1vw 0.2vw rgba( 0, 0, 0, 0.75 );
            }

            .inner {
            }

            .head,
            .foot {
                box-shadow: 0px 0px 1vw 0.2vw rgba( 0, 0, 0, 0.75 );
            }
            .head {
            }
            .foot {
            }

            .first > .inner {
                margin-top: -3vw;
                padding-top: 8vh;
            }

            .last > .inner {
                padding-bottom: 6vh;
            }

            .head > .inner,
            .foot > .inner {
                display: inline-block;
                width: 30.0vw;
                font-size: 1.4vw;
                padding: 1.5vh 0.5vw;
            }
            .head > .inner .leben_b,
            .head > .inner .leben_s,
            .foot > .inner .leben_b,
            .foot > .inner .leben_s {
                font-size: 1.6vw;
                letter-spacing: 0.0vw;
            }
            .inner_txt {
                display: inline-block;
                width: 56.5vw; /* 38 - ( 2 x padding ) */
                margin: 0px;
                padding: 1.5vw;
                background: transparent;
                vertical-align: top;
            }
            .no_img .inner_txt {
                padding-bottom: 3.0vw;
            }
            .h_lft > .inner  > .inner_txt {
                margin-left: 39vw;
                /*padding-right: 1.0vw;*/
            }
            .h_rgt > .inner  > .inner_txt {
                margin-right: 39vw;
                /*padding-left: 1.0vw;*/
            }
            .h_blk > .inner  > .inner_txt {
                width: 95.5vw;
            }

            .inner_img {
                display: inline-block;
                width: 38.8vw;
                height: 100%;
                vertical-align: top;
                top: 0px;
            }
            .outer.h_lft .inner_img {
                left: 0px;
            }
            .outer.h_rgt .inner_img {
                left: 59.8vw;
            }
            .inner_buffer {
            }

            .inner_img > .inner_buffer > img {
                width: 38.8vw;
                height: 45.2vw;
                top: -22.6vw;
            }
            /* align on top */
            .inner_buffer.v_top {
            }

            .inner_buffer.v_top > img {
            }

            /* align in the middle */
            .inner_buffer.v_mid {
            }

            .inner_buffer.v_mid > img {
                top: -22.6vw;
            }
            /* align on bottom */
            .inner_buffer.v_btm {
            }

            .inner_buffer.v_btm > img {
                top: -45.2vw;
            }
        }
        
        /*@media screen and (min-width: 1280px)*/
        @media (min-width: 80rem),
        /* retina iPad in portrait */
                    (min-device-width : 768px) 
               and (max-device-width : 1024px)
               and (orientation: landscape)
               and (-webkit-min-device-pixel-ratio: 2)
        {
            #n_ver:after {
                content: 'L';
            }
            
            /***********************************************/
            /*** main settings                           ***/
            /***********************************************/

            body {
            }
            
            body,
            p,
            li {
                margin: 1.8vw 0px 0px;
                font-size: 1.00vw;
                line-height: 2.2vw;
                letter-spacing: 0.10vw;
            }
            .leben_s,
            .leben_b {
                font-size: 1.11vw;
                letter-spacing: -0.05vw;
            }

            b,
            i {
                letter-spacing: 0.05vw;
            }

            h1,
            h2,
            h3,
            h1 .leben_b,
            h2 .leben_b,
            h3 .leben_b, 
            h1 .leben_s,
            h2 .leben_s,
            h3 .leben_s {
                margin: 2vw 0px 1vw;
                font-size: 2.0vw;
                letter-spacing: -0.10vw;
            }
            h2,
            h2 .leben_b,
            h2 .leben_s {
                margin: 1.5vw 0px -1.5vw;
                font-size: 1.6vw;
                letter-spacing: -0.05vw;
            }
            h3,
            h3 .leben_b,
            h3 .leben_s {
                margin: 1.5vw 0px -2vw;
                font-size: 1.3vw;
                letter-spacing: -0.05vw;
            }

            .anchor {
                position: absolute;
                display: inline-block;
                margin-top: -6.0vh;
            }

            .arrow {
                width: 1.8vw;
                height: 1.8vw;
            }

            .flag {
                width: 3.15vw;
                height: 1.8vw;
            }

            /* 1:0,4 */
            #sign {
                width: 15vw;
                height: 6vw;
                margin: 2vw auto 0vw;
            }

            #n_img img,
            #n_top img {
                margin-right: 1.0vw;
            }
            #n_lng img,
            #n_btm img {
                margin-left: 1.0vw;
            }

            #n_img {
                text-align: left;
            }

            #n_img {
                font-size: 2.4vw;
                letter-spacing: 0.10vw;
            }
            #n_img .leben_s
            #n_tit,
            #n_tit .leben_s,
            #n_tit .leben_b,
            #n_lng,
            #n_top,
            #n_ver,
            #n_btm {
                font-size: 1.2vw;
                letter-spacing: 0.04vw;
            }

            /***********************************************/
            /*** content areas                           ***/
            /***********************************************/

            .outer {
            }

            .shd {
                -webkit-box-shadow: 0px 0px 1vw 0.1vw rgba( 0, 0, 0, 0.75 );
                -moz-box-shadow:    0px 0px 1vw 0.1vw rgba( 0, 0, 0, 0.75 );
                box-shadow:         0px 0px 1vw 0.1vw rgba( 0, 0, 0, 0.75 );
            }

            .inner {
                width: 62vw;
                margin: auto;
                border-left:  1px solid rgba( 0, 0, 0, 0.3 );
                border-right: 1px solid rgba( 0, 0, 0, 0.3 );
            }

            .head .inner,
            .foot .inner {
                border: 0px solid transparent;
            }
            .head,
            .foot {
                box-shadow: 0px 0px 1vw 0.1vw rgba( 0, 0, 0, 0.75 );
            }
            .head {
            }

            .foot {
            }

            .first > .inner {
                margin-top: -2vw;
                padding-top: 3vw;
            }

            .last > .inner {
                padding-bottom: 3vw;
            }

            .head > .inner,
            .foot > .inner {
                display: inline-block;
                width: 19.2vw;
                font-size: 1.4vw;
                padding: 0.74vw 0.5vw;
            }
            .head > .inner .leben_b,
            .head > .inner .leben_s,
            .foot > .inner .leben_b,
            .foot > .inner .leben_s {
                font-size: 1.6vw;
                letter-spacing: 0.0vw;
            }
            .inner_txt {
                display: inline-block;
                width: 36.2vw; /* 38 - ( 2 x padding ) */
                margin: 0px;
                padding: 0.9vw;
                background: transparent;
                vertical-align: top;
            }
            .no_img .inner_txt {
                padding-bottom: 2.0vw;
            }
            .h_lft > .inner  > .inner_txt {
                margin-left: 24vw;
            }

            .h_rgt > .inner  > .inner_txt {
                margin-right: 24vw;
            }

            .h_blk > .inner  > .inner_txt {
                width: 60vw;
            }

            .inner_img {
                display: inline-block;
                width: 24vw;
                height: 100%;
                vertical-align: top;
                top: 0px;
            }
            .outer.h_lft .inner_img {
                left: 0px;
            }
            .outer.h_rgt .inner_img {
                left: 38vw;
            }
            .inner_buffer {
            }

            .inner_img > .inner_buffer > img {
                width: 24vw;
                height: 28vw;
                top: -14vw;
            }
            /* align on top */
            .inner_buffer.v_top {
            }

            .inner_buffer.v_top > img {

            }
            /* align in the middle */
            .inner_buffer.v_mid {
            }

            .inner_buffer.v_mid > img {
                top: -14vw;
            }
            /* align on bottom */
            .inner_buffer.v_btm {
            }

            .inner_buffer.v_btm > img {
                top: -28vw;
            }
        }
    }
}