body { 
    margin: 0px;
    padding: 0px;
    background-color: white;
   
}

#head {
      font-size: 110%;
   font-family: helvetica;
    font-weight: 900;
    padding-top: 4px;
    padding-right: 10px;
    top: 0px;
    width: 100vw;
    height: 5vh;
   
    position: fixed;
    z-index: 4000;
    vertical-align: middle;

}

#foot {
    
    font-family: helvetica;
    font-weight: 900;
    padding-top: 4px;
    padding-right: 10px;
    bottom: 0px;
    width: 100vw;
    height: 5vh;
    
    position: fixed;
    z-index: 1110;
}

#copyright {
    font-size: 80%;
    position: relative;
    height: auto;
    width: auto;
    right: 0px;
    margin-right: 50px;
    float: right;

    	top: 50%;
	
	transform: translate(0%, -50%);
  
}

#kontakt_top {
    font-size: 90%;
    position: relative;
    height: auto;
    width: auto;
    margin-left: 50px;
    float: left;

    	top: 50%;
	
	transform: translate(0%, -50%);
    display: none;
  
}

#link_kontakt {
    position: relative;
    height: auto;
    width: auto;
    right: 0px;
    margin-right: 50px;
    float: right;
    cursor: pointer;
    	top: 50%;
	
	transform: translate(0%, -50%);
  
}

.kontakt_mobile {
    display: none;
} 


#link_kontakt_mobile  {
    position: relative;
    height: auto;
    width: auto;
    right: 0px;
    margin-right: 30px;
    float: right;
    cursor: pointer;
    	top: 50%;
	
	transform: translate(0%, -50%);
    display: none;
}


#link_ueberuns {
     position: relative;
    height: auto;
    width: auto;
     right: 0px;
    margin-right: 30px;
    float: right;
    cursor: pointer;
    	top: 50%;

	transform: translate(0%, -50%);
}

#link_produktionen {
     position: relative;
    height: auto;
    width: auto;
     right: 0px;
    margin-right: 30px;
    float: right;
    cursor: pointer;
    	top: 50%;

	transform: translate(0%, -50%);
}

.for_opener{
    position: absolute;
    width: 85vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
}
@media only screen and (orientation:landscape)
{.for_opener {width: 150vh; top: 50%}}

.for_opener_mobile{
    display:none;
}

.opener{
    top: 0px;
    left: 0px;
    height: 100%;
    Width: 100%;
    position: absolute;
    z-index: 1003;
    cursor: pointer;
}

.opener_mobile{
      display:none;
}

img.openerimg{
    top: 0px;
    left: 0px;
    height: 100%;
    Width: auto;
    cursor: pointer;
}

img.openerimg_mobile{
      display:none;
}

#text_open{
   margin-top: 100vh;
   left: 3vw;
    z-index: 1109
}

.video_open{
    position: relative;
    width: 76vw;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1002;
}
@media only screen and (orientation:portrait)
{.video_open {width: 96vw;}}

#ueberuns{
    margin-top: 20vh;
    padding-top: 10vw;
    left: 50vw;
    transform: translate(-50%, 0%);
}
@media only screen and (orientation:portrait)
{#ueberuns {margin-top: 100vh; left: 46vw;}}


.rubrik {
    padding-top: 10vw;
    margin-top: 60vh;
   left: 6vw;
    
    height: auto;
    width: 56vw;
    min-width: 500px;
    position: relative;
    z-index: 1002;
   }

.controls {
  display: none;
}

.layer.textdiv   { z-index: 1109; cursor: auto; }
.layer.pictures   { z-index: 1108; cursor: pointer; }
.layer.videoproduktion { z-index: 1107; cursor: pointer; }

.ueberschrift {
    position: relative;
    z-index: 1109;
}

h1 {
    font-family: helvetica;
     font-weight: 700;
    font-size: 200%;
    line-height: 130%;
    text-shadow: 8px -10px 5px white, -8px 10px 5px #BD587C, 8px -5px 5px white, -8px 5px 5px #BD587C,  -10px 25px 5px white, 15px -25px 5px #BD587C;
    z-index: 1110;
}

.textdiv {
    font-family: courier new;
    font-style: normal;
    
    font-weight: 500;
    line-height: 1.15;
    position: relative;
    
    width: 50vw; 
    min-width: 500px;
    height: auto;
    padding: 30px;
    background: rgba(255,255,255,0.9);
    
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

img.bild{
    position: absolute;
    left: 70%;
    top: 0px;
z-index: auto;
    cursor: pointer;
}
@media only screen and (orientation:portrait)
{img.bild {left: 57%; }}

.hor{
    width: 50vw;
    height: auto;
}
@media only screen and (orientation:portrait)
{.hor {width: 60vw; }}

.ver{
   width: auto;
    height: 50vw; 
}
@media only screen and (orientation:portrait)
{.ver {height: 60vw; }}



/* JS Slider – layoutneutral */

.pictures.slider .bild {
    opacity: 0;
    transition: none; /* harter Wechsel */
}

.pictures.slider .bild.is-active {
    opacity: 1;
}



.videoproduktion {
    position: relative;
    float: left;
    width: 60vw;
    height: auto;
    left: 30%;
    top: -30vh;
    
    cursor: pointer;
}
@media only screen and (orientation:portrait)
{.videoproduktion {top: -25vw; left: 35%; width: 65vw; }}

.video{
    top: 0px;
    left: 0px;
    height: 100%;
    Width: 100%;
    position: absolute;
    background-color: black;
    z-index: 1003;
}

.videoextern {
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    z-index: 1004;
    background-color: black;    
}

.sizer_vid {
    position: relative;
    margin-top: 56.25%;   
}

.overlay_vid {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 1109;      
} 

img.videobild {
    width: 100%;
    height: auto;
    top: 50%;
    transform: translate(0%, -50%);
}



#branding {
    position: fixed;
    font-size: 500%;
    font-family: times ;
    font-style: normal;
    z-index: 1000;
}

#branding2 {
   
   opacity: 1.0;
    position: fixed;
    height: auto;
    width: 70vh;
    top: 50vh;
    left: 50vw;
    z-index: 1001;
    overflow: hidden;
        transform: translate(-50%, -50%);
    z-index: 2;
}

.picniclogo {
    width: 70vh;
    height: auto;
    z-index: 1001;
    left 50vw;
}
@media only screen and (orientation:portrait)
{.picniclogo {display: none}}

.picniclogo_portrait {
    width: 99.5vw;
    height: auto;
    z-index: 1001; 
}
@media only screen and (orientation:landscape)
{.picniclogo_portrait {display: none}}




.rosaquadrat{
    width: 10vw; 
    height: 10vw;
    background-color: #BD587C;
    opacity: 0.5;
    float: left;
}

.gelbesquadrat{
    width: 10vw; 
    height: 10vw;
    opacity: 0.4;
    float: left;
     opacity: 0.0;
 background-color: white;
}

#floatcasedown {
    position: fixed;
    top: -5vw;
    left: -135vw;
    width: 240vw;
    height: auto;
    overflow: hidden;
    z-index: 1;
}

#floatcaseup {
    position: fixed;
    top: -140vw;
    width: 240vw;
    height: auto;
    overflow: hidden;
    z-index: 3;    
}
@media only screen and (orientation:portrait)
{#floatcaseup {top: -100vw}}