/* ———————————————————— main—————————————————————————— */

.no-touch .name,
.touch .name 
{
color: rgba(0, 125, 255, 1.0);
font-size: 11vh;
line-height: 12vh;
}

.no-touch .cd-section h1,
.touch .cd-section h1 
{
color: rgba(0, 125, 255, 1.0);
font-size: 4.5vh;
font-height: 4.5vh;
font-weight: 700;
}


/* —————————————————— #cd-vertical-nav ————————————————————— */


.no-touch #cd-vertical-nav,
.touch #cd-vertical-nav 
{
border:0px solid rgba(0, 125, 255, 1.0);
background-color: rgba(255, 255, 255, 0.0);
margin-right:5vh;
}


.no-touch #cd-vertical-nav a,
.touch #cd-vertical-nav a 
{
color: rgba(0, 125, 255, 1);
font-size: 5vh;
font-weight: 500;
line-height: 5vh;
text-align: right;
border-bottom: 1px solid rgba(0, 125, 255, 0.0);
background-color: rgba(255, 255, 255, 0.0);
padding-right: 5vh;
}


.no-touch #cd-vertical-nav a.is-selected span:last-child,
.touch #cd-vertical-nav a.is-selected span:last-child
{
color: white;
font-size: 5vh;
font-weight: 500;
line-height: 5vh;
}


/* —————————————————————— #trigger ————————————————————————— */


.no-touch #trigger1,
.no-touch #trigger2,
.no-touch #trigger3,
.no-touch #trigger4,
.no-touch #trigger5,
.no-touch #trigger6,
.no-touch #trigger7,
.no-touch #trigger8,
.no-touch #trigger9,
.no-touch #trigger10,
.no-touch .cd-nav-trigger,
.no-touch .cd-scroll-down,
.no-touch #cd-scroll-up,
.no-touch #cd-scroll-back,
.no-touch .print-trigger,
.no-touch .regie-trigger,
.no-touch .kontakt-trigger,
.touch #trigger1,
.touch #trigger2,
.touch #trigger3,
.touch #trigger4,
.touch #trigger5,
.touch #trigger6,
.touch #trigger7,
.touch #trigger8,
.touch #trigger9,
.touch #trigger10,
.touch .cd-nav-trigger,
.touch .cd-scroll-down,
.touch #cd-scroll-up,
.touch #cd-scroll-back,
.touch .home-trigger,
.touch .vita-trigger,
.touch .print-trigger,
.touch .theater-trigger,
.touch .regie-trigger,
.touch .kontakt-trigger
{
border:1px solid rgba(255, 255, 255, 0.2);
background-color: rgba(0, 0, 0, 1);
z-index: 3;
}



/* ———————————————————— Main-pages ——————————————————————————*/

.no-touch #home,
.no-touch #print,
.no-touch #vita,
.no-touch #theater,
.no-touch #regie,
.no-touch #kontakt,
.touch #home,
.touch #print,
.touch #vita,
.touch #theater,
.touch #regie,
.touch #kontakt 
{
border:0px solid rgba(0, 0, 0, 0);
}

/* —————————————————————— #home ———————————————————————————— */




/* —————————————————————— #vita ———————————————————————————— */

.no-touch #vita,
.touch #vita 
{
position: absolute;
z-index: 2;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
-webkit-transform-origin: right top;
-moz-transform-origin: right top;
-ms-transform-origin: right top;
-o-transform-origin: right top;
transform-origin: right top;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
-webkit-transition-duration: 0.4s;
-moz-transition-duration: 0.4s;
transition-duration: 0.4s;
}

.no-touch #vita a,
.touch #vita a {
display: block;
text-align:left;
}

.no-touch #vita a span:first-child,
.touch #vita a span:first-child {
display: none;
}

.no-touch #vita.open,
.touch #vita.open {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}

.no-touch #vita li:last-child a,
.touch #vita li:last-child a {
border-bottom: none;
}

.no-touch .vita-kurz-a,
.no-touch .vita-kurz-b,
.touch .vita-kurz-a,
.touch .vita-kurz-b{
display: block;
position: absolute;
overflow-y: scroll;
border:0px solid rgba(0, 0, 0, 0);
}


.no-touch .vita-zeile,
.no-touch .vita-jahr,
.no-touch .vita-ort,
.no-touch .vita-name,
.touch .vita-zeile,
.touch .vita-jahr,
.touch .vita-ort,
.touch .vita-name
{
display: block;
position: relative;
clear:both;
font-size:3.5vh;
line-height:4.5vh;
color: rgba(0, 125, 255, 1.0);
}


.no-touch .vita-jahr,
.touch .vita-jahr
{
font-size:3.5vh;
line-height: 4.5vh;
color: rgba(255, 255, 255, 1.0);
text-decoration: none;
}


.no-touch .vita-jahr,
.no-touch .vita-ort,
.no-touch .vita-name,
.touch .vita-jahr,
.touch .vita-ort,
.touch .vita-name {
right: 0vh;
text-align:right;
}

.no-touch .vita-jahr,
.touch .vita-jahr {
text-decoration:underline;
color: white;
}




.no-touch .vita-theater-foto,
.no-touch .vita-film-foto,
.no-touch .vita-ton-foto,
.no-touch .vita-regie-foto,
.touch .vita-theater-foto,
.touch .vita-film-foto,
.touch .vita-ton-foto,
.touch .vita-regie-foto 
{
border-radius: 2vh;
}

.no-touch .vita-zeile,
.touch .vita-zeile {

color: rgba(255,255,255,0.7);

float:left;
left: 0vh;
text-align:left;
}

.no-touch .vita-text,
.touch .vita-text 
{
font-size: 2.5vh;
}

.no-touch .vita-theater,
.no-touch .vita-regie,
.no-touch .vita-portrait-1,
.no-touch .vita-portrait-2,
.no-touch .vita-portrait-3,
.no-touch .vita-portrait-4,
.no-touch .vita-portrait-5,
.touch .vita-theater,
.touch .vita-regie,
.touch .vita-portrait-1,
.touch .vita-portrait-2,
.touch .vita-portrait-3,
.touch .vita-portrait-4,
.touch .vita-portrait-5
 {
display: block;
position: absolute;
}

.no-touch .vita-theater-foto,
.no-touch .vita-regie-foto,
.no-touch .vita-foto-01,
.no-touch .vita-foto-02,
.no-touch .vita-foto-03,
.no-touch .vita-foto-04,
.no-touch .vita-foto-05,
.touch .vita-theater-foto,
.touch .vita-regie-foto,
.touch .vita-foto-01,
.touch .vita-foto-02,
.touch .vita-foto-03,
.touch .vita-foto-04,
.touch .vita-foto-05
{
border: 1px solid rgba(0, 125, 255, 1.0);
border-radius: 0.25em;
}


.no-touch .vita-foto-01,
.touch .vita-foto-01 
{
}


.no-touch .vita-foto-02,
.touch .vita-foto-02 
{
}


.no-touch .vita-foto-03,
.touch .vita-foto-03
{
}

.no-touch .vita-foto-04,
.touch .vita-foto-04
{
}

.no-touch .vita-foto-05,
.touch .vita-foto-05
{
}


.no-touch .vita-foto-06,
.touch .vita-foto-06 
{
}

.no-touch .vita-theater-foto,
.no-touch .vita-portrait-foto-1,
.no-touch .vita-portrait-foto-2,
.no-touch .vita-portrait-foto-3,
.no-touch .vita-portrait-foto-4,
.no-touch .vita-portrait-foto-5,
.no-touch .vita-regie-foto,
.touch .vita-theater-foto,
.touch .vita-portrait-foto-1,
.touch .vita-portrait-foto-2,
.touch .vita-portrait-foto-3,
.touch .vita-portrait-foto-4,
.touch .vita-portrait-foto-5,
.touch .vita-regie-foto {
display: block;
border-radius: 1.5vh;
position: relative;

color: blue;

}

.no-touch .vita-theater-foto,
.touch .vita-theater-foto {
background: url("../bilder/icon/vita-theater-k.jpg") no-repeat center center;
background-size:  cover;
}

.no-touch .vita-portrait-foto-2,
.touch .vita-portrait-foto-2 {
background: url("../bilder/icon/vita-ton-k.jpg") no-repeat center center;
background-size: cover;
}

.no-touch .vita-portrait-foto-3,
.touch .vita-portrait-foto-3 {
background: url("../bilder/icon/vita-ton-k.jpg") no-repeat center center;
background-size: cover;
}

.no-touch .vita-portrait-foto-4,
.touch .vita-portrait-foto-4 {
background: url("../bilder/icon/vita-ton-k.jpg") no-repeat center center;
background-size: cover;
}

.no-touch .vita-portrait-foto-5,
.touch .vita-portrait-foto-5 {
background: url("../bilder/icon/vita-ton-k.jpg") no-repeat center center;
background-size: cover;
}

.no-touch .vita-portrait-foto-1,
.touch .vita-portrait-foto-1 {
background: url("../bilder/icon/vita-ton-k.jpg") no-repeat center center;
background-size: cover;
}

.no-touch .vita-regie-foto,
.touch .vita-regie-foto {
background: url("../bilder/icon/vita-regie-k.jpg") no-repeat center center;
background-size: cover;
}


.no-touch .vita-text,
.touch .vita-text {
display: block;
text-align:center;
position: relative;

color: blue;

}




/* ————————————————— Theater/Regie ——————————————————————————*/

.no-touch #regie-f, 
.no-touch #theater-f,
.touch #regie-f, 
.touch #theater-f 
{
border:1px solid rgba(0, 125, 255, 1.0);
border-radius: 0.25em;
}


.no-touch #regie-f a,
.no-touch #theater-f a,
.touch #regie-f a,
.touch #theater-f a
{
border-bottom: 1px solid rgba(0, 125, 255, 1.0);
border-radius: 0.25em;
}


.no-touch .rofoto,
.no-touch .refoto,
.touch .rofoto,
.touch .refoto 
{
border: 1px solid rgba(0, 125, 255, 1.0);
border-radius: 0.25em;
}


.no-touch .stueck,
.no-touch .autor,
.no-touch .haus,
.no-touch .jahr,
.no-touch .regie,
.no-touch .buehne,
.no-touch .kostuem,
.no-touch .musik,
.no-touch .rolle,
.touch .stueck,
.touch .autor,
.touch .haus,
.touch .jahr,
.touch .regie,
.touch .buehne,
.touch .kostuem,
.touch .musik,
.touch .rolle 
{
color: rgba(255, 255, 255, 0.9);
font-size: 3.5vh;
text-align:left;
text-shadow: 0 0 5px #000000;
}


.no-touch .stueck,
.touch .stueck 
{
color: rgba(0, 125, 255, 1.0);
font-size: 3.75vh;
font-weight: 700;
}


.no-touch .regie,
.touch .regie 
{
color: rgba(0, 125, 255, 1.0);
}


.no-touch .rolle,
.touch .rolle 
{
color: rgba(0, 125, 255, 1.0);
font-weight: 700;
}


/* ———————————————————— Kontakt —————————————————————————————*/

.no-touch #kontakt,
.touch #kontakt
{
background-color:rgba(0, 0, 0, 0.0);
background-image: linear-gradient( 0deg, black 50% ,transparent);
border: 1px solid rgba(0, 125, 255, 1.0);
} 


.no-touch #kontakt a img,
.touch #kontakt a img
{
border: 1px solid rgba(0, 125, 255, 1.0);
}


































/* ————————————————— orientation : landscape ————————————————*/
/* ————————————————————————————————————————————————————————— */

@media only screen and (orientation : landscape) {



/* ———————————————————————— Main ————————————————————————————*/

.no-touch .name,
.touch .name 
{
width:80vh;
left: -33.5vh;
top: 	42.5vh;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-90);
}


/* —————————————————————— Sections ——————————————————————————*/



.no-touch .cd-section:nth-of-type(1),
.touch .cd-section:nth-of-type(1)
{
background: url("../bilder/ich/2015-06b.jpg") no-repeat center center;
background-size:cover;
}





.no-touch .cd-section,
.touch .cd-section 
{
height: 100vh;
position: relative;
}


.no-touch .cd-section h1,
.touch .cd-section h1 
{
left:5.5vh;
top: 6.5vh;
}


.no-touch #cd-vertical-nav,
.touch #cd-vertical-nav 
{
border:	0px;
background-color: rgba(255, 255, 255, 0.0);


top: 2.5%;
left: 	2.5vh;
height: 7vh;
padding: 0%;
width:91%;
}


.no-touch #cd-vertical-nav a,
.touch #cd-vertical-nav a 
{
display: block;
margin-bottom:0vh;
margin-top:0%;
margin-left: 0%;"
margin-right:0%;
height:5vh;
width:auto;
float:left;

}

.cd-section:nth-of-type(3)
{
background: url("../bilder/38-06.jpg") no-repeat center center;
}




/* —————————————————————— Triggers ——————————————————————————*/

.no-touch #trigger1,
.no-touch #trigger2,
.no-touch #trigger3,
.no-touch #trigger4,
.no-touch #trigger5,
.no-touch #trigger6,
.no-touch #trigger7,
.no-touch #trigger8,
.no-touch #trigger9,
.no-touch #trigger10,
.no-touch .cd-nav-trigger,
.no-touch .cd-scroll-down,
.no-touch .cd-scroll-up,
.no-touch .cd-scroll-back,
.no-touch .home-trigger,
.no-touch .vita-trigger,
.no-touch .print-trigger,
.no-touch .foto-trigger,
.no-touch .theater-trigger,
.no-touch .film-trigger,
.no-touch .regie-trigger,
.no-touch .ton-trigger,
.no-touch .kontakt-trigger,
.touch #trigger1,
.touch #trigger2,
.touch #trigger3,
.touch #trigger4,
.touch #trigger5,
.touch #trigger6,
.touch #trigger7,
.touch #trigger8,
.touch #trigger9,
.touch #trigger10,
.touch .cd-nav-trigger,
.touch .cd-scroll-down,
.touch .cd-scroll-up,
.touch .cd-scroll-back,
.touch .home-trigger,
.touch .vita-trigger,
.touch .print-trigger,
.touch .foto-trigger,
.touch .theater-trigger,
.touch .film-trigger,
.touch .regie-trigger,
.touch .ton-trigger,
.touch .kontakt-trigger
{
right: 2.5vh;
width:5vh;
height:5%;
}

.no-touch #trigger1,
.no-touch #cd-scroll-up,
.touch #trigger1,
.touch #cd-scroll-up
{
top: 2.5%;
}

.no-touch #trigger2,
.touch #trigger2
{
top: 12.5%;
}


.no-touch #trigger3,
.touch #trigger3
{
top: 22.5%;
}


.no-touch #trigger4,
.no-touch .home-trigger,
.no-touch .vita-trigger,
.touch #trigger4,
.touch .home-trigger,
.touch .vita-trigger
{
top: 32.5%;
}


.no-touch #trigger5,
.touch #trigger5
{
top: 42.5%;
}


.no-touch #trigger6,
.touch #trigger6
{
top: 52.5%;
}


.no-touch #trigger7,
.touch #trigger7
{
top: 62.5%;
}


.no-touch #trigger8,
.touch #trigger8
{
top: 72.5%;
}


.no-touch #trigger9,
.touch #trigger9
{
top: 82.5%;
}


.no-touch #trigger10,
.no-touch .cd-scroll-down,
.no-touch #cd-scroll-back,
.touch #trigger10,
.touch .cd-scroll-down,
.touch #cd-scroll-back
{
top: 92.5%;
}



/* ———————————————————— Main-Infos ——————————————————————————*/

.no-touch #home,
.no-touch #print,
.no-touch #vita,
.no-touch #foto,
.no-touch #theater,
.no-touch #film,
.no-touch #ton,
.no-touch #regie,
.no-touch #kontakt,
.touch #home,
.touch #print,
.touch #vita,
.touch #foto,
.touch #theater,
.touch #film,
.touch #ton,
.touch #regie,
.touch #kontakt 
{
position: absolute;
left: 0vh;
right: 0vh;
top: 0%;
width: auto;
height:100%;
min-height:50vh;
border-radius: 0em;

z-index: 2;

background: linear-gradient(
to bottom, 
rgba(0, 0, 0, 1.0), 
rgba(0, 0, 0, 0.5) 25%,
rgba(0, 0, 0, 0.0) 50%, 
rgba(0, 0, 0, 0.5) 75%, 
rgba(0, 0, 0, 1.0)
);
}




.no-touch #print,
.touch #print
{
background: linear-gradient(
to bottom, 
rgba(0, 0, 0, 0), 
rgba(0, 0, 0, 0) 25%,
rgba(0, 0, 0, 0) 50%, 
rgba(0, 0, 0, 0) 75%, 
rgba(0, 0, 0, 0)
);
background-color: rgba(0, 0, 0, 1);

padding-left: 0vh;
padding-top: 0vh;
padding-right: 0vh;
padding-bottom: 0vh;

overflow-y: scroll;

}



/* —————————————————————— #vita ———————————————————————————— */

.no-touch #vita,
.touch #vita 
{
}


.no-touch .vita-kurz-a,
.touch .vita-kurz-a 
{
width: auto;
height: auto;
bottom: 10vh;
padding: 0vh;
left: 12.5vh;
}

.touch .vita-kurz-b,
.no-touch .vita-kurz-b
{
width: auto;
height: auto;
top: 12.5vh;
bottom: 12.5vh;
padding: 0vh;
right: 10vh;
}






.no-touch .vita-zeile,
.no-touch .vita-jahr,
.no-touch .vita-ort,
.no-touch .vita-name,
.touch .vita-zeile,
.touch .vita-jahr,
.touch .vita-ort,
.touch .vita-name 
{
margin-bottom: 1.5vh;
}


.no-touch .vita-zeile,
.touch .vita-zeile 
{
}


.no-touch .vita-jahr,
.touch .vita-jahr 
{
margin-bottom: 2vh;
}


.no-touch .vita-name,
.touch .vita-name 
{
margin-bottom: 4vh;
}


.no-touch .vita-theater,
.no-touch .vita-regie,
.no-touch .vita-portrait-1,
.no-touch .vita-portrait-2,
.no-touch .vita-portrait-3,
.no-touch .vita-portrait-4,
.no-touch .vita-portrait-5,
.touch .vita-theater,
.touch .vita-regie,
.touch .vita-portrait-1,
.touch .vita-portrait-2,
.touch .vita-portrait-3,
.touch .vita-portrait-4,
.touch .vita-portrait-5
{
top: 12.5vh;
}


.no-touch .vita-theater,
.touch .vita-theater 
{
left: 15vh;
}

.no-touch .vita-regie,
.touch .vita-regie 
{
left: 73vh;
}

.no-touch .vita-portrait-1,
.touch .vita-portrait-1 
{
left: 131vh;
}


.no-touch .vita-portrait-2,
.touch .vita-portrait-2 
{
left: 189vh;
}

.no-touch .vita-portrait-3,
.touch .vita-portrait-3 
{
left: 247vh;
}

.no-touch .vita-portrait-4,
.touch .vita-portrait-4 
{
left: 305vh;
}

.no-touch .vita-portrait-5,
.touch .vita-portrait-5 
{
left: 363vh;
}




.no-touch .vita-theater,
.no-touch .vita-regie,
.no-touch .vita-portrait-foto-1,
.no-touch .vita-portrait-foto-2,
.no-touch .vita-portrait-foto-3,
.no-touch .vita-portrait-foto-4,
.no-touch .vita-portrait-foto-5,
.touch .vita-theater,
.touch .vita-regie,
.touch .vita-portrait-foto-1,
.touch .vita-portrait-foto-2,
.touch .vita-portrait-foto-3,
.touch .vita-portrait-foto-4,
.touch .vita-portrait-foto-5

{
height:  75vh;
width:  53vh;
}


.no-touch .vita-text,
.touch .vita-text 
{
width: 32vh;
height: auto;
margin-top:1.5vh;
}


/* —————————————————————— #print ——————————————————————————— */


.no-touch #print,
.touch #print
{
} 

.no-touch #print a,
.touch #print a
{


} 

/* ————————————————————— #foto ————————————————————————————— */

.no-touch #foto,
.touch #foto
{
} 

.no-touch .vita-theater-foto,
.no-touch .vita-film-foto,
.no-touch .vita-ton-foto,
.no-touch .vita-regie-foto,
.touch .vita-theater-foto,
.touch .vita-film-foto,
.touch .vita-ton-foto,
.touch .vita-regie-foto 
{
}





.no-touch .vita-foto-01,
.touch .vita-foto-01 
{
}


.no-touch .vita-foto-02,
.touch .vita-foto-02 
{
}


.no-touch .vita-foto-03,
.touch .vita-foto-03
{
}

.no-touch .vita-foto-04,
.touch .vita-foto-04
{
}

.no-touch .vita-foto-05,
.touch .vita-foto-05
{
}


.no-touch .vita-foto-06,
.touch .vita-foto-06 
{
}



/* ————————————————— Theater/Regie ——————————————————————————*/

.no-touch #regie-f, 
.no-touch #theater-f,
.touch #regie-f, 
.touch #theater-f {
left: 2.5vh;
right: 10vh;
top: 12.5vh;
bottom: 12.5vh;
width: auto;
height:auto;
}


.no-touch #regie-f a,
.no-touch #theater-f a,
.touch #regie-f a,
.touch #theater-f a {
height:62.5vh;
margin-top:2.5vh;
margin-left:15vh;
margin-right:2.5vh;
width:auto;
}


.no-touch .rofoto,
.no-touch .refoto,
.touch .rofoto,
.touch .refoto 
{
float: right;
margin-top:0vh;
width: 60vh;
height: 60vh;
margin-right: 0vh;
}


.no-touch .stueck,
.no-touch .autor,
.no-touch .haus,
.no-touch .jahr,
.no-touch .regie,
.no-touch .buehne,
.no-touch .kostuem,
.no-touch .musik,
.no-touch .rolle,
.touch .stueck,
.touch .autor,
.touch .haus,
.touch .jahr,
.touch .regie,
.touch .buehne,
.touch .kostuem,
.touch .musik,
.touch .rolle 
{
margin-left:0vh;
width:40vh;
float:left;
overflow:hidden;
}


.no-touch .stueck,
.touch .stueck 
{
margin-top: 0vh;
margin-bottom: 1.25vh;
height:auto;
}


.no-touch .autor,
.touch .autor 
{
margin-bottom: 5vh;
}


.no-touch .haus,
.touch .haus 
{
margin-bottom: 1.25vh;
}


.no-touch .jahr,
.touch .jahr 
{
margin-bottom: 5vh;
}


.no-touch .regie,
.touch .regie 
{
margin-bottom: 1.25vh;
}


.no-touch .buehne,
.touch .buehne 
{
margin-bottom: 1.25vh;
}


.no-touch .kostuem,
.touch .kostuem 
{
margin-bottom: 1.25vh;
}


.no-touch .musik,
.touch .musik
{
}


.no-touch .rolle,
.touch .rolle 
{
margin-top: 5vh;
}


/* ———————————————————— Kontakt —————————————————————————————*/

.no-touch #kontakt,
.touch #kontakt
{
} 


.no-touch #kontakt a img,
.touch #kontakt a img
{
width:50vh;
heiht:50vh;
margin-left: 50vh;
margin-top:5vh;
}


/* ——————————————————————————————————————————————————————————*/

}














/* ————————————————— orientation : portrait— ————————————————*/
/* ————————————————————————————————————————————————————————— */

@media only screen and (orientation : portrait) {



/* —————————————————— #cd-vertical-nav ————————————————————— */

.no-touch .name,
.touch .name
{
font-size: 5vh;
line-height: 5vh;
left: 2.75vh;
top: 2.5vh;
}


.no-touch .cd-section h1,
.touch .cd-section h1 
{
font-size: 3vh;
line-height: 3vh;
left:auto;
left: 2.75vh;
bottom: 88.7%;
z-index:3;
}


.no-touch #cd-vertical-nav,
.touch #cd-vertical-nav 
{
border:0px;

background: linear-gradient(
to right, 
rgba(0, 0, 0, 0.6), 
rgba(0, 0, 0, 0.2) 10%,
rgba(0, 0, 0, 0.0) 50%, 
rgba(0, 0, 0, 0.2) 85%, 
rgba(0, 0, 0, 0.6)
);

}



.no-touch #cd-vertical-nav a,
.touch #cd-vertical-nav a 
{
display: block;
text-align:right;
margin-bottom:0vh;
margin-top:5vh;
margin-left: 2.5vh;
margin-right:2.5vh;
height:5vh;
width:95%;
float:left;
line-height:5vh;
}
background-image: linear-gradient( 90deg, black 50% ,transparent);
.no-touch #cd-vertical-nav a.is-selected span:last-child,
.touch #cd-vertical-nav a.is-selected span:last-child
{
}



/* —————————————————————— #trigger ————————————————————————— */

.no-touch #trigger1,
.no-touch #trigger2,
.no-touch #trigger3,
.no-touch #trigger4,
.no-touch #trigger5,
.no-touch #trigger6,
.no-touch #trigger7,
.no-touch #trigger8,
.no-touch #trigger9,
.no-touch #trigger10,
.no-touch .cd-nav-trigger,
.no-touch .cd-scroll-down,
.no-touch .cd-scroll-up,
.no-touch .cd-scroll-back,
.touch #trigger1,
.touch #trigger2,
.touch #trigger3,
.touch #trigger4,
.touch #trigger5,
.touch #trigger6,
.touch #trigger7,
.touch #trigger8,
.touch #trigger9,
.touch #trigger10,
.touch .cd-nav-trigger,
.touch .cd-scroll-down,
.touch .cd-scroll-up,
.touch .cd-scroll-back
{
right: 2.5vh;
width:5vh;
height:5%;
}


.no-touch #trigger1,
.no-touch #cd-scroll-up,
.touch #trigger1,
.touch #cd-scroll-up
{
top: 2.5%;
}

.no-touch #trigger2,
.touch #trigger2
{
top: 12.5%;
}


.no-touch #trigger3,
.touch #trigger3
{
top: 22.5%;
}


.no-touch #trigger4,
.no-touch .home-trigger,
.no-touch .vita-trigger,
.touch #trigger4,
.touch .home-trigger,
.touch .vita-trigger
{
top: 32.5%;
}


.no-touch #trigger5,
.touch #trigger5
{
top: 42.5%;
}


.no-touch #trigger6,
.touch #trigger6
{
top: 52.5%;
}


.no-touch #trigger7,
.touch #trigger7
{
top: 62.5%;
}


.no-touch #trigger8,
.touch #trigger8
{
top: 72.5%;
}


.no-touch #trigger9,
.touch #trigger9
{
top: 82.5%;
}


.no-touch #trigger10,
.no-touch .cd-scroll-down,
.no-touch #cd-scroll-back,
.touch #trigger10,
.touch .cd-scroll-down,
.touch #cd-scroll-back
{
top: 92.5%;
}



/* ———————————————————— Main-Infos ——————————————————————————*/

.no-touch #home,
.no-touch #print,
.no-touch #vita,
.no-touch #foto,
.no-touch #theater,
.no-touch #film,
.no-touch #ton,
.no-touch #regie,
.no-touch #regie-f, 
.no-touch #theater-f,
.no-touch #kontakt,
.touch #home,
.touch #print,
.touch #vita,
.touch #foto,
.touch #theater,
.touch #film,
.touch #ton,
.touch #regie,
.touch #regie-f, 
.touch #theater-f,
.touch #kontakt 
{
left: 2.5vh;
right: 10vh;
top: 12.5%;
bottom: 12.5%;
width: auto;
height:auto;
padding-left: 7.1vh;
padding-top: 15%;
padding-right: 7.1vh;
padding-bottom: 15%;
}



/* —————————————————————— #vita ———————————————————————————— */

.no-touch #vita,
.touch #vita
{
} 


.no-touch .vita-kurz-a,
.no-touch .vita-kurz-b,
.touch .vita-kurz-a,
.touch .vita-kurz-b 
{
padding: 2.5vh;
}


.no-touch .vita-kurz-a,
.touch .vita-kurz-a 
{
top: 0vh;
left: 0vh;
right: 50%;
height:50vh;
text-align:left;
}


.no-touch .vita-kurz-b,
.touch .vita-kurz-b 
{
top: 0vh;
left: 50%;
right: 0vh;
height:100%;
text-align:left;
}


.no-touch .vita-zeile,
.no-touch .vita-jahr,
.no-touch .vita-ort,
.no-touch .vita-name,
.touch .vita-zeile,
.touch .vita-jahr,
.touch .vita-ort,
.touch .vita-name 
{
margin-bottom: 1.5vh;
}


.no-touch .vita-zeile,
.touch .vita-zeile 
{
}


.no-touch .vita-text,
.touch .vita-text 
{
width: 31vh;
height: auto;
margin-top:1.5vh;
}


.no-touch .vita-jahr,
.touch .vita-jahr 
{
margin-bottom: 2vh;
}


.no-touch .vita-name,
.touch .vita-name 
{
margin-bottom: 4vh;
}


.no-touch .vita-theater,
.touch .vita-theater 
{
left: 5vh;
top: 5vh;
}


.no-touch .vita-film,
.touch .vita-film 
{
left: 5vh;
top: 60vh;
}


.no-touch .vita-ton,
.touch .vita-ton 
{
left: 5vh;
top: 115vh;
}


.no-touch .vita-regie,
.touch .vita-regie 
{
left: 5vh;
top: 170vh;
bottom: 200vh;
}



/* —————————————————————— #print ——————————————————————————— */


.no-touch #print,
.touch #print
{
} 


/* ————————————————————— #foto ————————————————————————————— */

.no-touch #foto,
.touch #foto
{
} 


.no-touch .vita-theater-foto,
.no-touch .vita-film-foto,
.no-touch .vita-ton-foto,
.no-touch .vita-regie-foto,
.touch .vita-theater-foto,
.touch .vita-film-foto,
.touch .vita-ton-foto,
.touch .vita-regie-foto 
{
height:  44vh;
width: 31vh;
}


.no-touch .vita-foto-01,
.no-touch .vita-foto-02,
.no-touch .vita-foto-03,
.no-touch .vita-foto-04,
.no-touch .vita-foto-05,
.no-touch .vita-foto-06,
.touch .vita-foto-01,
.touch .vita-foto-02,
.touch .vita-foto-03,
.touch .vita-foto-04,
.touch .vita-foto-05,
.touch .vita-foto-06 
{
height:  49vh;
width: 35vh;
margin-top: -9vh ;
margin-left: -5vh ;
margin-bottom: 20vh ;
}


.no-touch .vita-foto-01,
.touch .vita-foto-01 
{
}


.no-touch .vita-foto-02,
.touch .vita-foto-02 
{
}


.no-touch .vita-foto-03,
.touch .vita-foto-03
{
}

.no-touch .vita-foto-04,
.touch .vita-foto-04
{
}

.no-touch .vita-foto-05,
.touch .vita-foto-05
{
}


.no-touch .vita-foto-06,
.touch .vita-foto-06 
{
}



/* ————————————————— Theater/Regie ——————————————————————————*/

.no-touch #theater-f,
.no-touch #regie-f,
.touch #theater-f,
.touch #regie-f 
{
padding: 2.5vh;
}


.no-touch #regie-f a,
.no-touch #theater-f a,
.touch #regie-f a,
.touch #theater-f a 
{
height:60vh;
margin-top: 0vh;
margin-bottom: 5vh;
margin-left:0vh;
padding-top:0;
}


.no-touch .rofoto,
.no-touch .refoto,
.touch .rofoto,
.touch .refoto 
{
width: 100%;
height: 60vh;
margin-top: 0vh;
margin-left: 0vh;
margin-bottom: 0vh;
}


.no-touch .stueck,
.no-touch .autor,
.no-touch .haus,
.no-touch .jahr,
.no-touch .regie,
.no-touch .buehne,
.no-touch .kostuem,
.no-touch .musik,
.no-touch .rolle,
.touch .stueck,
.touch .autor,
.touch .haus,
.touch .jahr,
.touch .regie,
.touch .buehne,
.touch .kostuem,
.touch .musik,
.touch .rolle 
{
float:left;
overflow:hidden;
}


.no-touch .stueck,
.touch .stueck 
{
font-size:4vh;
font-weight: 700;
text-align:left;
width: 96.5%;
max-width: 96.5%;
margin-top: -58vh;
margin-left: 3.3%;
}


.no-touch .autor,
.touch .autor 
{
font-weight: 700;
font-size: 3.5vw;
text-align:left;
width: 96.5%;
max-width: 96.5%;
margin-top: -52.5vh;
margin-left: 3.5%;
}


.no-touch .haus,
.touch .haus 
{
text-align:left;
margin-top: -42.5vh;
margin-left: 3.5%;
width: 93%;
max-width: 93%;
}


.no-touch .jahr,
.touch .jahr 
{
text-align:left;
margin-top: -38.75vh;
margin-left:3.5%;
width:26.5%;
}


.no-touch .regie,
.touch .regie 
{
margin-left: 3.5%;
margin-top: -28.75vh;
width: auto;
min-width:40vw;
}


.no-touch .buehne,
.touch .buehne 
{
margin-left: 3.5%;
margin-top: -25vh;
width: auto;
min-width: 40vw;
}


.no-touch .kostuem,
.touch .kostuem 
{
margin-left: 3.5%;
margin-top: -21.25vh;
width: auto;
min-width: 40vw;
}


.no-touch .musik,
.touch .musik 
{
margin-left: 3.5%;
margin-top: -17.5vh;
width: auto;
min-width: 40vw;
}


.no-touch .rolle,
.touch .rolle 
{
margin-left:3.5%;
margin-top: -5vh;
width: auto;
text-align:left ;
}



/* ———————————————————— Kontakt —————————————————————————————*/

.no-touch #kontakt a img,
.touch #kontakt a img
{
width:50vh;
heiht:50vh;
margin-left:0vh;
margin-top:10vh;
}

/* ——————————————————————————————————————————————————————————*/


}