/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:   http://localhost/monohelden/wp-content/themes/twentyseventeenchild/ 
 Description:  Twenty Seventeen Child Theme
 Author:       elgrande
 Author URI:   http://www.xdim.org
 Template:     twentyseventeen
 Version:      1.0.0
 Tags:         black, green, white, light, dark, two-columns, three-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-background, custom-header, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready, responsive-layout, infinite-scroll, post-slider, design, food, journal, magazine, news, photography, portfolio, clean, contemporary, dark, elegant, modern, professional, sophisticated
 Text Domain:  twenty-seventeen-child

*/

body {
    
    /*
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    font-smoothing: antialiased !important;
    */
    position: relative !important;
 
    min-width: 460px !important;
    
    margin: 0 auto 0 auto !important;
}

.site-content-contain{
    
   z-index: 6 !important; 
   max-width: 2000px !important;
   overflow: hidden !important;
   
  
margin: 0 auto 0 auto;


}

#page:before{
    


    content: "";
    background: url(assets/images/scanlines8tv.png);

    background-repeat: repeat !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 22;
    pointer-events:none;


}


   

._site-content-contain:before{
    
/*
  
    content: "";
    background: url(assets/images/scanlines4.png);

    background-repeat: repeat !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 22;
    pointer-events:none;

  */
}
   
   

    

.colors-dark .entry-content a, .colors-dark .entry-summary a, .colors-dark .comment-content a, .colors-dark .widget a, .colors-dark .site-footer .widget-area a, .colors-dark .posts-navigation a, .colors-dark .widget_authors a strong {
    
    -webkit-box-shadow: none !important;  
   box-shadow: none !important; 
}

:focus, :active, :hover, :visited, :link {
        outline: none !important;
    }

    
.wrap {
    max-width: 1000px;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.site-header{ /*Gradient für Impressum & Disclaimr Page header*/
  
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,590000+100 */
background: #000000; /* Old browsers */
background: -moz-linear-gradient(top,  #000000 0%, #590000 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #000000 0%,#590000 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #000000 0%,#590000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#590000',GradientType=0 ); /* IE6-9 */

max-width: 2000px;
margin: 0 auto 0 auto;


}


.colors-dark .site-header, .colors-dark .single-featured-image-header {
    background-color: transparent !important;
}
    
/*--------------------------------------------------------------
fontz
---------------------------------------------------------------*/
.entry-header{
    
    display: none;
}

.entry-content{
     
    float:none !important;
    
    width: 100% !important;
    
   
/*
    font-family: 'Fjalla One', sans-serif;   
*/
    
/*   
    font-family: 'Anton', sans-serif;

*/

/*
    font-family: 'Cinzel Decorative', cursive;
 
    /*


    font-family: 'Turret Road', cursive;  */

    /*    */ 
    
    
   
    
/*  
    font-family: 'Bowlby One SC', cursive;


*/
    
   
/*
    font-family: 'VT323', monospace;

    */
    
    
    font-family: 'Press Start 2P', cursive;
    font-weight: 400 !important;
    
    /*
    font-family: 'Libre Barcode 39', cursive;

    font-family: 'Frijole', cursive;

    font-family: 'Londrina Shadow', cursive;

*/

   

    /*  
    
    font-family: 'Frijole', cursive;

    /* 
    
    
    font-family: 'Trade Winds', cursive;

*/
    
    

    letter-spacing: 1px;  
   
    font-kerning: auto;
    line-height: 1.3em !important;
    

    /*color: rgba(213,45,255,1) !important;
    */

    margin: -40px auto 0 auto !important;

    /*background: linear-gradient(to top, #ad1818 0%, #b67474 100%);
    
    
    -webkit-background-clip: text;
    */
    /*-webkit-text-fill-color: rgba(240,190,180,1);   */
    
  -webkit-text-fill-color: rgba(199,199,244,1);    
   
    text-shadow: 0px -10px 4px rgba(0,0,0,0.5), 0px -8px 2px rgba(0,0,0,0.5);
    
    
    
 
    text-align: center;


    
 
background: -moz-radial-gradient(center, ellipse cover,  rgba(211,93,201,0.18) 0%, rgba(237,187,232,0) 58%, rgba(255,255,255,0) 100%); 
background: -webkit-radial-gradient(center, ellipse cover,  rgba(211,93,201,0.18) 0%,rgba(237,187,232,0) 58%,rgba(255,255,255,0) 100%); 
background: radial-gradient(ellipse at center,  rgba(211,93,201,0.18) 0%,rgba(237,187,232,0) 58%,rgba(255,255,255,0) 100%);


/*865BCC*/

/*
background: -moz-radial-gradient(center, ellipse cover,  rgba(185,43,198,0.18) 0%, rgba(226,166,231,0) 58%, rgba(255,255,255,0) 100%); 
background: -webkit-radial-gradient(center, ellipse cover,  rgba(185,43,198,0.18) 0%,rgba(226,166,231,0) 58%,rgba(255,255,255,0) 100%); 
background: radial-gradient(ellipse at center,  rgba(185,43,198,0.18) 0%,rgba(226,166,231,0) 58%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2eb92bc6', endColorstr='#00ffffff',GradientType=1 ); 
*/

/*
background: -moz-radial-gradient(center, ellipse cover,  rgba(70,142,219,0.15) 0%, rgba(177,208,240,0) 58%, rgba(255,255,255,0) 100%); 
background: -webkit-radial-gradient(center, ellipse cover,  rgba(70,142,219,0.15) 0%,rgba(177,208,240,0) 58%,rgba(255,255,255,0) 100%); 
background: radial-gradient(ellipse at center,  rgba(70,142,219,0.15) 0%,rgba(177,208,240,0) 58%,rgba(255,255,255,0) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#26468edb', endColorstr='#00ffffff',GradientType=1 ); 

*/


}

.entry-content h2, h3, h4{
    
    
}
  

/********************************************************
* *      Da Header
*********************************************************/




.custom-header-media:before { /* kein gradient am header rand*/
    
   
    display: none;
    
}

.png-header-img{
    
  position: relative; 
  
  z-index: 2; 
  
  top: 0px !important;
  
   
   /*min-width: 100vh !important;  */
  
/*  img hier laden geht nicht! Das Img kann erst geladen werden, wenn der Video header fertig hat => onLoad Event abwarten => nur über Javascript

  background-image: url(assets/images/coffee.png) !important;   
  background-repeat: repeat-x;
  background-color: #000 !important;
  
  */
    
}


  

   
.wp-custom-header-video-button{
    
    display: none;
}

.custom-header-media{
    
    
}

.has-header-video .custom-header-media iframe{
    
    
    /*padding-bottom: 100px; */
}


.has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
    position: fixed;
    height: auto;
    left: 50%;
    max-width: 1000%;
    min-height: 80%;
   
   
}

.overHeaderIMG{
    
        position: fixed;

        -o-object-fit: cover;
        object-fit: cover;


        width: 100%;
        /*height: 100%;*/

        max-width: 1000%;
        min-height: 100%;
        min-width: 100%;
        min-width: 100vw;
  

        left: 50%;
        top: 50%;

        padding-bottom: 1px;
        
        /*
         -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none;
        transform: none;
*/
        -ms-transform: translateX(-50%) translateY(-50%);
        -moz-transform: translateX(-50%) translateY(-50%);
        -webkit-transform: translateX(-50%) translateY(-50%);
        transform: translateX(-50%) translateY(-50%); 

    
}


/*--------------------------------------------------------------
 side-branding
--------------------------------------------------------------*/

.site-branding {
    padding: 1em 0;
    position: relative;
    -webkit-transition: margin-bottom 0.7s !important;
    transition: margin-bottom 0.7s !important;
    z-index: 3;
    margin-bottom: 0px !important;
}


.site-branding-text h1.site-title a{
    
font-size: 14px;
color: #100f0f;
display: none;
    
}

.site-branding-text .site-description{
    
    
display: none;    
}


.site-branding-text.page-branding .site-title a{
 
 color: #4a0000 !important;
    
}

.site-branding-text.page-branding{
 
 text-align: center;   
}

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/

.navigation-top {
    
   padding: 0 !important;
    
    /*###################################*/
    
    z-index: 11 !important;
    border-top: none !important;
    border-bottom: none !important;
  
    
    background-image: url(assets/images/navzacken.png)!important;
    /*resize: both;*/
   
    position: relative;
    background-color: transparent !important; 
    
   
    background-repeat: no-repeat !important;
    background-position: bottom !important;
   
   
    min-width: 100.5% !important;
    
    background-size: cover !important;
    height: 11vw;
    max-height: 208px;
    min-height: 110px !important;
    
    
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); 

}

.page-nav-top{   /*zacken für impressum-page*/
    
   background-image: url(assets/images/navzackenunten.png)!important;
    min-width: 100.5% !important;
    
}

body:not(.title-tagline-hidden) .site-branding-text.page-branding {
  
  /*width: 100% !important; */ 
    
}

body:not(.title-tagline-hidden) .site-branding-text.page-branding .site-title a{
  
 /* margin: 0 auto 0 auto !important;  */
 /* not working */
    
}


/*
.navigation-top .wrap {
    max-width: 1000px;
    padding: 0;
}

.navigation-top a {
    color: #222;
    font-weight: 600;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.navigation-top .current-menu-item > a,
.navigation-top .current_page_item > a {
    color: #767676;
}
*/
.main-navigation {
    clear: both;
    /*display: block;*/
    display: none;
}


/*
.main-navigation ul {
    background: #fff;
    list-style: none;
    margin: 0;
    padding: 0 1.5em;
    text-align: left;
}
*/

.daButtCont{
    
    width: 100%;
    height: 123px;
    
    margin: 0 auto 0 auto;
    position: relative;
}

.daButtDown{
    
    width: 75px;
    height: 75px;
    
    float: left;
    
    margin-right: 30px;
    
}

.daButtUp{
    
   width: 88px;
    height: 88px;
      margin-right: 30px;
    float: right;  
}


.colors-dark .entry-content a img {
    -webkit-box-shadow: none !important;
    box-shadow: none  !important;
    height: auto !important; 
}

/*--------------------------------------------------------------
 Panels
--------------------------------------------------------------*/

.panel-top {
    
    padding: 0 !important;
    
    /*###################################*/
    
    z-index: 11 !important;
    
    
    background-image: url(assets/images/navzackenunten.png)!important;
    /*resize: both;*/
    
    position: relative;
    background-color: transparent; 
    
    background-repeat: no-repeat;
    background-position: bottom;
   
     min-width: 100.5% !important;
    
    background-size: cover !important;
    height: 11vw;
    max-height: 208px;
    min-height: 110px !important;
    
    
    
    
    
    margin-top: -200px; /* damit alles unter den panels liegt */
    
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); 
}


.panelHome{ /* content-front-page.php */

    background-image: url(assets/images/compressed/panellogo.png);
   
    background-size: cover;
    position: relative;
    
    z-index: 9;
    height: 62.30vw;
    
    
    max-height: 1246px;
    min-height: 623px !important;
    min-width: 100% !important;
   
   
   
    background-repeat: no-repeat;
    background-position: top !important; 
    
  
   
    display: block;
    
    overflow: visible !important;
   
   left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); 

     
}


/* content-front-page.php */

.panelPanel{ 

    background-size: contain;
    position: relative;
    z-index: 9;
    
    min-width: 1000px !important; 
    
   
    
    
    background-position: top !important; 
    display: block;
    overflow: visible !important;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); 
    
}


#panel1, #panel2, #panel3{
    
    position: relative;
    margin-top: -180px;
    min-width: 100% !important;
    max-width: 2000px !important;
}

#panel1 .panelPanel{
    
     background-image: url(assets/images/compressed/panelabout.png);
     
     height: 62.30vw;
     min-height: 623px !important;
     background-repeat: no-repeat;
      max-height: 1246px;
    
}

#panel2 .panelPanel{
    
     background-image: url(assets/images/compressed/paneldemo.png);
     height: 62.30vw;
     min-height: 623px !important;
     background-repeat: no-repeat;
     max-height: 1246px;
    
}

#panel3 .panelPanel{
  
    background-image: url(assets/images/compressed/panelfooter.jpg);
    background-repeat: repeat-y, repeat-x !important;
    background-size: contain;
    position: relative;

    z-index: 9;
    min-height: 665px !important;
    
}

#panel3 .panel-content:before{/* gradien am unteren Ende frontpage*/

background: -moz-linear-gradient(top,  rgba(104,20,22,0) 0%, rgba(107,2,2,1) 91%, rgba(107,0,0,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(104,20,22,0) 0%,rgba(107,2,2,1) 91%,rgba(107,0,0,1) 100%); 
background: linear-gradient(to bottom,  rgba(104,20,22,0) 0%,rgba(107,2,2,1) 91%,rgba(107,0,0,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00681416', endColorstr='#6b0000',GradientType=0 ); 

    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 14;
    height: 140px;
    
}


.panel-content .wrap{
   display: block; 
   position: relative;
  
    
}

.single-featured-image-header{
   z-index: 11 !important;  
    
}




 
.twentyseventeen-panel.page{
    
  position: relative;
 
   
} 


.panel-image { /* underground.png */
   
  position: relative;
  
  height: 100%;
  max-height: 1200px;
  
  background-attachment: fixed;
 
   
}


.panel-image:before{
    
    display: none;  /* kein gradient*/
    
}

/*--------------------------------------------------------------
*   Pages
--------------------------------------------------------------*/


#impress.panelPanel{ /*für alle pages nach dem impress-template*/
    
    background-image: url(assets/images/compressed/panelfooter.jpg);
    background-repeat: repeat-y, repeat-x !important;
    background-size: contain;
    position: relative;

    z-index: 9;
    min-height: 665px !important;  
    padding: 0 0 50px 0 !important;
    
    
}

#impress.panelPanel:before{ /*gradient am unteren Rand der pages*/
    
    

background: -moz-linear-gradient(top,  rgba(104,20,22,0) 0%, rgba(107,2,2,1) 91%, rgba(107,0,0,1) 100%); 
background: -webkit-linear-gradient(top,  rgba(104,20,22,0) 0%,rgba(107,2,2,1) 91%,rgba(107,0,0,1) 100%); 
background: linear-gradient(to bottom,  rgba(104,20,22,0) 0%,rgba(107,2,2,1) 91%,rgba(107,0,0,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00681416', endColorstr='#6b0000',GradientType=0 ); 


    bottom: 0px;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 14;
    height: 100px;
}


#impress .entry-content{
    width: 50% !important;
    font-size: 10px !important;
    line-height: 2em !important;
    
    padding: 80px 5px 5px 5px;
    min-height: 12px;
    
    
    position: relative;
   
   /*
    background-image: url(assets/images/pages_overlay4.png);
    background-size: contain;
    background-repeat: repeat-y !important;
   */
}

.txt-absolute{ /*in impressum-page */
   
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+0,ff4498+50,1e5799+100&0+0,0.07+50,0+100 */
background: -moz-linear-gradient(left,  rgba(30,87,153,0) 0%, rgba(255,68,152,0.07) 50%, rgba(30,87,153,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(30,87,153,0) 0%,rgba(255,68,152,0.07) 50%,rgba(30,87,153,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(30,87,153,0) 0%,rgba(255,68,152,0.07) 50%,rgba(30,87,153,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799',GradientType=1 ); /* IE6-9 */

padding-bottom: 20px;


}

.txt-absolute h1 {

 font-size: 24px !important;
    
}

.txt-absolute h2 {

 font-size: 22px !important;
    
}
.txt-absolute h3 {

 font-size: 18px !important;
    
}

.site-content {
    padding: 0 !important;
}

.page:not(.home) #content {
    
    padding: 0 !important;
}



/*--------------------------------------------------------------
 Glow Boxes
--------------------------------------------------------------*/

.glowBox1{

    /*
 border: 1px solid rgba(222,222,222,1);
    
    border-radius: 8px;   
    
    background-color: transparent;
    
     box-shadow: 0px 0px 8px rgba(255, 58, 58, 1) inset, 0px 0px 8px rgba(255, 58, 58, 1);
   -webkit-box-shadow: 0px 0px 8px rgba(255, 58, 58, 1) inset, 0px 0px 8px rgba(255, 58, 58, 1);
   -moz-box-shadow: 0px 0px 8px rgba(255, 58, 58, 1) inset, 0px 0px 8px rgba(255, 58, 58, 1);
*/
}
 
/*-------------------------------------------------------------------
/*           Playlist Styling
/*------------------------------------------------------------------*/



/*********test******************/

.audio-dingens { /* muss als wrapper um den playlist shortcode */
    
    
 
  /* 
   left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); 
    
    */

    position: relative;

    z-index: 33;

    width: 90%;
    max-height: 636px;  
    max-width: 923px;  
   
    margin: 0px auto 0px auto;
   
   padding: 15px 5px 5px 5px;
   
   /*
    position: realtive;
    font-family: 'Press Start 2P', cursive;
    font-weight: lighter;
    text-decoration: normal;
    z-index: 22;
    
    background-color: transparent;
    
    margin-left: auto !important;
    margin-right: auto !important;

    overflow: visible;

    width: 42vw;
    max-width: 730px;
  
    margin-top: 20px;
   
  */
      
}

.audio-dingens p{
    
    
}

.wp-playlist
{
   
    
    padding: 20px !important;
    background-color: transparent !important;
    border: none !important;

    margin: 0px auto 0px auto;

    width: 100%;

    position: relative;
    top: 150px;
    vertical-align: top;

    z-index: 33 !important;


    display: block;

    overflow: visible !important;
   
     /*
    top: 50%;
    left: 50%;
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%); 

    */
 
   
}

.wp-playlist p{
    
    height: 0px;
    
}

 .wp-playlist-tracks{
     
  margin-top: 30px !important;  
 }


.wp-playlist-item .wp-playlist-item-title{ /*playlist Einträge*/
    
     line-height: 1.2;
     position: relative; 
     display:inline-block;
      -webkit-text-fill-color: rgba(199,199,244,1);
      /*margin-bottom: 14px;*/
   
    transform:scale(1,1.2); /* W3C */
   font-size: 18px;
  
    -webkit-transform:scale(1,1.2); 
    -moz-transform:scale(1,1.2); 
    -ms-transform:scale(1,1.2); 
    -o-transform:scale(1,1.2); 
  
text-align: center;
  bottom: 9px;
}

 
.wp-playlist-item-meta.wp-playlist-item-title{ /*zeigt im oberen Titel-Feld an was gerade gespielt wird*/
    

    font-size: 24px;
    letter-spacing: 0.2em;
    line-height: 2em;
    
    
    -webkit-text-fill-color: rgba(21,211,240,1);

    display:block;

    font-weight: 400 !important;

     transform:scale(1,1.2); /* W3C */
    -webkit-transform:scale(1,1.2); 
    -moz-transform:scale(1,1.2); 
    -ms-transform:scale(1,1.2);
    -o-transform:scale(1,1.2); 


    margin: 10px auto 0px auto !important;
    text-align: center;

}

.wp-playlist-item a {
    
    font-size: 18px;
    
   
}



.wp-playlist .wp-playlist-item {
    
    padding: 0px !important;
  
    margin: 0px auto 10px auto !important;
    
   
    border: 2px solid rgba(255,100,100,0) !important;
    border-radius: 12px !important;   
    
    /*color: rgba(128,217,193,1) !important;*/
   background-color: rgba(100,44,44,0.3) !important; 
   
 
    -webkit-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0) inset, 0px 0px 8px 0px rgba(252,0,0,0);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0) inset, 0px 0px 8px 0px rgba(252,0,0,0);
    box-shadow: 0px 0px 8px 0px rgba(252,0,0,0) inset, 0px 0px 8px 0px rgba(252,0,0,0);

   
    /*
    -webkit-transition: background-color 0.5s ease-in-out, border-color 0.3s ease-in-out, color 0.6s ease-in-out !important;
    
    transition: background-color 0.5s ease-in-out, border-color 0.3s ease-in-out, color 0.6s ease-in-out, letter-spacing 0.5s ease-in-out !important;
  */
    
    -webkit-transition: all 250ms ease-in-out !important;
    transition: all 250ms ease-in-out !important;
  
}


.wp-playlist .wp-playlist-item:focus,
.wp-playlist .wp-playlist-item:hover {
    
    border-bottom-color: rgba(0, 0, 0, 0);
    background-color: rgba(128,0,0,0.4) !important; 
    
    border: 2px solid rgba(255,100,100,1) !important;
    
    
   -webkit-box-shadow: 0px 0px 8px 0px rgba(252,55,55,1) inset, 0px 0px 8px 0px rgba(252,55,55,1);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,55,55,1) inset, 0px 0px 8px 0px rgba(252,55,55,1);
    box-shadow: 0px 0px 8px 0px rgba(252,55,55,1) inset, 0px 0px 8px 0px rgba(252,55,55,1);
   
   
}



.wp-playlist .wp-playlist-playing {
    
    
    background-color: rgba(100,0,0,0.2) !important; 
    letter-spacing: 1.0em !important; /*Erzeugt mit obigen transitions Ziehharmonika-Effekt*/

    border: 2px solid rgba(255,192,192,1) !important; 

    -webkit-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.88) inset, 0px 0px 8px 0px rgba(252,0,0,0.88);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.88) inset, 0px 0px 8px 0px rgba(252,0,0,0.88);
    box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.88) inset, 0px 0px 8px 0px rgba(252,0,0,0.88);
    
  
}

/*
img.arcade{
    
-webkit-filter: drop-shadow(0px -15px 4px #000 );
  filter: drop-shadow(0px -15px 4px #000);
    
    
}
*/
/**
* rotate playlist arcade image *****************************
*/
/*
.wp-playlist-item.wp-playlist-playing .wp-playlist-caption img.arcade{
    
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}

@-moz-keyframes spin { 
    100% { -moz-transform: rotate(360deg); 
    } 
}
@-webkit-keyframes spin { 
    100% { -webkit-transform: rotate(360deg); 
    } 
}
@keyframes spin { 
    100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); 
    } 
}
*/

/**
* shake playlist arcade image *****************************
*/

.wp-playlist-item.wp-playlist-playing .wp-playlist-caption img.arcade{
    
    
    
    animation: shake 0.99s cubic-bezier(.36,.07,.19,.97) both infinite;
    -moz-animation: shake 0.99s cubic-bezier(.36,.07,.19,.97) both infinite;
    -webkit-animation: shake 0.99s cubic-bezier(.36,.07,.19,.97) both infinite;
}

@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }

  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }

  40%, 60% {
    transform: translate3d(5px, 0, 0);
  }
}


/**********************************************************/


.wp-playlist-item-length { /* zeigt Spiellänge im Playlist-Feld an*/
    top: 8px !important;
    padding-right: 10px !important;
    
    display: none;
    
}


.wp-playlist-current-item{
  
  
 /*border-radius: 12px !important; */
 
  padding: 4px !important;
  height: 40px !important;
  width: 100% !important;
  margin: 4px auto 0 auto !important;
   /**/
  /*background: url(assets/images/AudioMs.png) repeat-x !important;*/
  background-color: rgba(155,0,0,0.2);
  height: 64px !important;
  
  /*
  border: 2px solid rgba(255,192,192,1) !important;*/
  border-radius: 12px !important;  
  
    

}


.wp-playlist-caption {
    
    display: block;
    width: 80% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 24px;
    line-height: 1.5;
  
    text-align: center;
    margin: 0px auto 0px auto;
    position: relative;
    
}


.site-content .wp-playlist-current-item {
     /*font-weight: 400 !important;*/
     
     text-align: center;
   margin-bottom: 10px !important;
    
}


.wp-playlist .wp-playlist-tracks{
    
    padding: 0px !important;
    width:100%;
    

}


.wp-playlist .wp-playlist-current-item img {
    
   display: none;
}

/*
 .wp-playlist-current-item:before {
    content: "\f127";
    font-size: 30px;
    font-family: dashicons;
    display: inline-block;
    float: left;
    margin-right: 15px;
    color:#009999;
}

 .wp-playlist-item {
    padding: 5px 3px;

}
*/

.mejs-button, .mejs-time, .mejs-time-rail {
    
    font-size: 16px !important; 
    line-height: 10px;
}


.mejs-controls {
    /*
    bottom: 0;
    display: -webkit-box; 
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 50px !important;
    left: 0;
    list-style-type: none;
    margin: 0;
    padding: 0 10px;
    position: absolute;
    width: 100%;
    z-index: 3;
    */
}

.mejs-container.mejs-container-keyboard-inactive.mejs-audio, .mejs-controls{
   
  
   /*height: 80px !important; */
}


/* change the color of the background */
.mejs-controls,
.mejs-mediaelement,
.mejs-container,  
.mejs-container.mejs-video {
    background: url('') !important;
    background-color: transparent !important;
 
}
 
/* change the color of the lettering */
.mejs-currenttime,
.mejs-duration {
        
  -webkit-text-fill-color: rgba(21,211,240,1);
  
  
}
 
/* eliminate the yellow border around the play button during playback */
.mejs-controls .mejs-button button:focus {

   display: none:
                         
}   

.mejs-controls .mejs-button button:hover {
    
   
}
 
/* change the color of the progress bar */
.mejs-controls .mejs-time-rail .mejs-time-total {
    background: rgba(180, 0, 0, 0.2) !important; 
    
    
}
 
/* change the color of the current time bar */

.mejs-controls .mejs-time-rail .mejs-time-current {
    
    /*background: #bc2015 !important;  */
    
    /*background: #af30ff !important;*/
    background: #ff45ff !important;
   
    -webkit-box-shadow: 0px 0px 11px 4px rgba(255,0,110,0.86);
    -moz-box-shadow: 0px 0px 11px 4px rgba(255,0,110,0.86);
    box-shadow: 0px 0px 11px 4px rgba(255,0,110,0.86);
    
    
    /*
    text-shadow: 0 0 18px rgba(255,20,20,0.5) , 0 0 14px rgba(0,255,255,0.5) , 0 22px 8px rgba(0,0,0,1) !important;
*/
}
 
/* change the color of the file loading bar */
.mejs-controls .mejs-time-rail .mejs-time-loaded {
    
    background-color: transparent !important;
}


.mejs-time-slider :hover{
    
    display: none;
}

.mejs-time-slider .mejs-time-hovered, .mejs-time-float{
    
  background-color: transparent !important;  
    
}

.mejs-time-slider .mejs-time-float .mejs-time-float-current{
    
    font-size: 10px !important;
    width: 70px; 
    margin-left: -18px;
    border: none !important;
}


/*******************************************************/

/*-------------------------------------------------------
* Widgets
-------------------------------------------------------*/
/*
.left-side{
    
float:left;
padding: 20px 15px 20px 15px;


position: relative;
background-size: contain;

height: 32.23vw;

background-position: center top;
background-repeat: no-repeat;

position: relative;

z-index: 9;

width: 45%;  

top: -1.4em;

    
}

.right-side{
    

padding: 20px 15px 20px 15px;

position: relative;
background-size: contain;

height: 32.23vw;

background-position: center top;
background-repeat: no-repeat;

position: relative;

z-index: 9;

width: 45%;  
max-height: 636px;  
max-width: 923px;  
top: -1.4em;
}
*/

.widget-column{
    
   margin-top: -15px;
   
    
}


.widget-column section{
   
    padding: 40px 15px 10px 15px;
    
    
    margin: 0 auto 0 auto;
    position: relative;
    background-image: url(assets/images/playlist_frame.png); 
    background-repeat: no-repeat;
    background-size: contain;
    background-position: top center;
    height: 637px;
    width: 100%;
    min-width: 440px;
    max-width: 620px;
    
} 

.colors-dark.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child), 
.colors-dark .widget ul li {
    
     background-color: rgba(100,0,0,0.2) !important;
  
    border-radius: 8px;
   
    margin-bottom: 10px;
    padding: 7px 7px 7px 7px  !important;
    /*border: 1px solid rgba(255,192,192,1) !important;*/ 
    border: none !important; 
    
   
    /* 
    -webkit-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    */
}

 .widget-title{
       
       font-size: 14px;
       margin-top: -15px;
       font-weight: 400 !important;

    -webkit-transform:scale(1,1.2) !important; 
    -moz-transform:scale(1,1.2) !important; 
    -ms-transform:scale(1,1.2) !important;
    -o-transform:scale(1,1.2)!important; 
     -webkit-text-fill-color: rgba(215,12,16,1);

 }
 
 .widget-center .widget-title{
     
   margin-top: 0px;  
 }
 
 .widget-center .widget-column section{
     
    min-width: 440px;
    max-width: 500px;  
     
 }
   
.wp-video .mejs-mediaelement iframe{


 
   -ms-transform: translateX(-30px) translateY(0%) scale(0.68, 0.88);  
    -moz-transform: translateX(-30px) translateY(0%) scale(0.68, 0.88);
    -webkit-transform: translateX(-30px) translateY(0%) scale(0.68, 0.88);
    transform: translateX(-30px) translateY(0%) scale(0.68, 0.88); 


} 
   
.wp-video .mejs-mediaelement::before {
    
    content: "";
    background: url(assets/images/videoz5.png);
    background-repeat: no-repeat !important;
    background-size: cover;

    -webkit-transform: scale(0.9, 0.81); 
    -moz-transform: scale(0.9, 0.81); 
    -ms-transform: scale(0.9, 0.81); 
    transform: scale(0.9, 0.81); 


    background-position: center top;
    background-attachment: fixed;
    /* padding-top: 10px; */
    width: 100%;
    height: 125%;
    top: -20px;
    /* margin: 0 auto 0 auto; */
    /* left: 0; */
    bottom: 5;
    /* right: 0; */
    position: absolute;
    z-index: 22;
    pointer-events: none;
    
}

.wp-video .mejs-controls{
    
    display: none;
}

.wp-video{
    
    overflow: hidden !important;
}

   .mejs-background, .mejs-mediaelement {
   
    top: -10px !important;
    
}
   

/**---------------------------------------------------
* Contact Form
------------------------------------------------------*/

.wpcf7-form{
    
    font-size: x-small !important;
}

.wpcf7-form-control.wpcf7-textarea{
    
    height: 5em;
     background-color: rgba(100,0,0,0.2) !important;
     
     border-radius: 8px;
    
     border: 2px solid rgba(255,192,192,1) !important; 
    
     resize: none !important;
     
     
    -webkit-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
}

.wpcf7-form input{
    height: 40px;
    
    background-color: rgba(100,0,0,0.2) !important;
  
    border-radius: 8px;
    
    border: 2px solid rgba(255,192,192,1) !important; 
    
     
    -webkit-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    
    text-align: center;
   
    
}


.wpcf7-form input.wpcf7-submit{
    
    margin: 0 0 0 18px;
    
}

.contact_wrap form{
    
   
     width: 95%;
    margin: 0 auto 0 auto;
   
    
    font-size: 14px;
    
   position: relative !important
}

.wpcf7-form-control.wpcf7-text{
    
   line-height: 1.2em;
    
}

.contact_wrap form br{
    
    display: none;
}

.wpcf7-form label {
    
  
  
  /*-webkit-text-fill-color: rgba(55,218,231,1);*/
  
  
  
    -webkit-text-fill-color: rgba(214,209,228,1);

   border: none !important;
    
   /*text-shadow: 0 0 6px rgba(167,29,29,1), 0 0 10px rgba(167,29,29,0.5), 0 0 14px rgba(167,29,29,0.7), 0 -8px 4px rgba(0,0,0,1) !important;   */
   
   text-shadow: 0 0 6px rgba(167,29,29,1), 0 -8px 4px rgba(0,0,0,1) !important;
   
    
}

label {
    
    display: inline !important;
    /* color: #333; */
    /* display: block; */
    font-weight: 400 !important;
    margin-bottom: 0em !important; 
    padding: 0 !important; 
    
}

.wpcf7-form-control-wrap{
    
    padding: 3px;
    
}

.contact_form {
    
    position: relative;
   
}

.wpcf7-form-control.wpcf7-submit{
    
    margin-top: 10px;
}

div.wpcf7-mail-sent-ng, div.wpcf7-response-output { 



    padding: 10px !important;
   background-color: rgba(0,0,0,0.7) !important;
  
    border-radius: 8px;
    
     border: 2px solid rgba(255,192,192,1) !important; 
    
    position: absolute;
    
  width: 100% !important;
     
    -webkit-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    -moz-box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);
    box-shadow: 0px 0px 8px 0px rgba(252,0,0,0.75) inset, 0px 0px 8px 0px rgba(252,0,0,0.75);

    top: 340px;
}



span.wpcf7-not-valid-tip {
    
    display: none !important;
}

div.wpcf7-response-output {
   
   
  
    
}

div.wpcf7-validation-errors {
    
    border: 2px solid red; 
    border-radius: 10px;
   
     width: 80%;
}

/*--------------------------------------------------------------
Footer
--------------------------------------------------------------*/


.site-footer {
    /* font-size: 14px; */
    
    border-top: none;
    margin-top: 0; 

    font-size: 0.6rem;
    line-height: 1.5;
    padding: 15px;

    background-color: transparent;
    


}

.site-footer.blackbg{
    
    background-color: #6B0000 !important;
    margin-top: -2px;
}

.site-footer .wrap{
    
    padding-top: 0px !important;
    
} 

.site-info{
    
    width: 100% !important;
}

.footer-txt{
   
   width: 50%;
   margin: 0 auto 0 auto;
   text-align: center; 
    -webkit-text-fill-color: rgba(0,0,0,1);
    font-size: larger;  
}
 

/*--------------------------------------------------------------
19.0 Media Queries
--------------------------------------------------------------*/


@media screen and (min-width: 5em) {
    
     .entry-content{
        
        font-size: 8px;
        
    }
    
    .panel-content .wrap {
       
        padding-top: 4em;
    }

     .has-header-video .custom-header-media iframe{
      
      width: 1000px; 
      
     }
     
    .site-footer .widget-column.footer-widget-1 {

    width: 55%;
    margin: 0 auto 0 auto;
    }

    .site-footer .widget-column.footer-widget-2 {

    width: 55%;
    margin: 0 auto 0 auto;
    }
    
    .textwidget{
    
    transform: scale(0.7, 0.6);
    margin-top: -80px;
    
    } 
    
    .widget-column section{

    width: 75%;

    height: 350px;
    }
   
    .widget ul li{
        
        
    font-size: 12px; 
      
   }
   
   .widget-title{
     
     font-size: 14px;   
       
   }
   
   
   .daButtCont{
    
    /*width: 45%;*/
    
   }
   
   
}

@media screen and (min-width: 18em) {
    
 

}

@media screen and (min-width: 20em) {
    
     .entry-content{
        
        font-size: 10px;
    }

}

@media screen and (min-width: 30em) {
    
     .entry-content{
        
        font-size: 12px;
    }
    .panel-content .wrap {

    padding-top: 4em;   
    }

    .site-footer .widget-column.footer-widget-1 {
       
        width: 65%;
        margin: 0 auto 0 auto;
    }

    .site-footer .widget-column.footer-widget-2 {
       
        width: 65%;
        margin: 0 auto 0 auto;
    }
    
    .widget-column section ~ section {
    
    margin-top: -180px;
    
    } 
    
    .widget-column section{
    
         height: 550px;
    }
    
    
    .textwidget{
    
     transform: scale(0.8, 0.65);
    margin-top: -65px !important;
    
    } 
    
    
   
   .daButtCont{
    
    /*width: 50%;*/
    }
}

@media screen and (min-width: 39em) {
    
     .entry-content{
        
        font-size: 16px;
        
       
    }
    
  
}

@media screen and (min-width: 48em) {

    
    .entry-content{
        
       font-size: 20px;
      
    }
    
 
    .site-footer .widget-column.footer-widget-1 {
        float: left;
        width: 47%;
    }

    .site-footer .widget-column.footer-widget-2 {
        float: right;
        width: 47%;
    }
      
    
     .panel-content .wrap {
   
        padding-top: 4em;  
    }
    
    /* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
    
    .background-fixed .panel-image {
        
        /*background-attachment: fixed*/ 
    }

     .audio-dingens{
 
     }
 
    .wrap {
        padding-left: 2em;
        padding-right: 2em; 
       
    }

    .widget-column section ~ section {
    
    margin-top: -316px;
    
    }  

    .textwidget{
    
     transform: scale(0.8, 0.65);
    margin-top: -80px !important;
    
    } 
    
    
   
     .widget-column section{
        
     height: 637px;
    width: 100%;
         
    }
    
     .daButtCont{
    
    width: 100%;
    }
}


@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {

       
    
}

@media screen and (min-width: 56em) {
    
  
    
    .wrap {
  
    padding-left: 2em;
    padding-right: 2em;
}

}
/*
@media screen and (min-width: 60em) {

}
*/
@media screen and (min-width: 72em) {
    
    
    
}

@media screen and (min-width: 88em) {
    
    
   
    
}

@media screen and (min-width: 94em) {
    
    
   
    
}


@media screen and (min-width: 114em) {
    
  
    
}

@media screen and (min-width: 1999px) {

    
     .entry-content{
        
       font-size: 26px;
        
    }
    
       
    .panelHome{ /* content-front-page.php */

    background-size: 2000px 1246px;
    height: 1246px;

    }
 
    .panel-image { /* underground.png */

    background-size: 2000px 1200px;


    position: relative;


    max-height: 1200px;

    background-attachment: fixed;

    }
   
   
   .panelPanel{ 
       
     /*height: 1246px; */
    
    
       
   }

    #panel1, #panel2, #panel3{

    margin-top: -250px;

    }

    .png-header-img {

    width: 2000px;

    }  

    .overHeaderIMG{


    width: 2000px;
    /*height: 100%;*/



    /*height: 100%;*/

    max-width: 100%;
    min-height: 10%;
    /*min-width: 100%;*/
    min-width: 2000px; 


    }


    .has-header-video .custom-header-media iframe{

    height: 1000px !important; 

    }
    
    
   .wrap {
  
    padding-left: 0.5em;
    padding-right: 0.5em;
}
    
   
    
}    


@media screen and ( min-width: 67em ) {

  
}

@media screen and ( min-width: 79em ) {


}

@media screen and ( max-width: 48.875em ) and ( min-width: 48em ) {

}