
/* hsl(12, 100%, 25%)/*bggreen*/

body
{
    font-size:15px;
}

.imgcaption
{
    font-style:italic;
}

.affiliation
{
    font-size:12px;
    color:darkgray;
    margin-left:15px;
}

.de
{
    display:none;
}
.en
{
    display:inline;
}


.mynavbar
{
    background:rgba(65, 64, 64, .4);
    color:black!important;
    
}


.parallax-window
{
  height:95%;
  _max-height: 600px;
}




.header-content
{
   color:black !important;
}
.featurette
{
    margin:50px 100px;
}




section
{
    margin:0px;
    padding:30px 0px;
}

    #audioPlayerStart
    {
        margin:  auto; 
        width: 130px;
        height:130px;
        
        background:rgba(128, 128, 128, .3);
         transition: background 0.5s ease;
        border-radius:520px;
        border:0px solid rgb(128, 26, 0);
        font-size:44px;  
        cursor:pointer;  

    }
    #audioPlayerStart:hover
    {
       background:rgba(128, 128, 128, .9);
    }
    
   #audioPlayerStart i
   {
     width:100%;
     height:100%;
     display:flex; justify-content:center; align-items:center; 
   }
  
   #audioPlayer
   { 
        position:fixed;
        z-index:999;
        display:none;
        width:98%;
        max-width: 550px; 
        margin:  auto; 
        text-align:left;
        background:rgba(128, 128, 128, .8);
        padding:0px 50px 60px;
        border-radius:20px;
        border:1px solid hsl(12, 100%, 25%);

        margin: 5% auto;
        top:100px;
        left: 0;
        right: 0;
   }
   
   @media screen and (max-device-width: 480px) 
   {
        #audioPlayer { position: relative; }
   }
   

   #audioPlayer ol { padding: 0px; margin:0px; list-style: decimal-leading-zero ; color: #ccc; width: 100%; border-top: 1px solid #ccc; font-size: 1em; }
   #audioPlayer ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
   #audioPlayer ol li a { display: block; text-indent: -2.7ex; padding: 0px 0px 0px 20px; }
   #audioPlayer ol li a:hover {};
   #audioPlayer li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
   #audioPlayer li.playing a { color: #000; }
   #audioPlayer li.playing:before { content: '♬'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -44px; top: 9px; color: #000; font-size: 13px; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); }
      
 
   
   .audioPlayer_closeBtn
   {
     position:absolute;
     top:-3px;
     right:-3px;
     font-size:20px;
     background:hsl(12, 3%, 31%);
     color:white;
     padding:0px 7px;
     border-radius:13px;
     cursor:pointer;
   }
   .audioPlayer_closeBtn:hover
   {
     background:hsl(12, 100%, 25%);
   }



 .audiojs audio { position: absolute; left: -1px; }       
 .audiojs 
 { 
  width: 100%; height: 40px; background: #404040; overflow: hidden; font-family: monospace; font-size: 12px;           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #444), color-stop(0.5, #555), color-stop(0.51, #444), color-stop(1, #444));           background-image: -moz-linear-gradient(center top, #444 0%, #555 50%, #444 51%, #444 100%);           -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3);           -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); 
  margin:30px 0px;
  display:flex;

 }  
 .audiojs .scrubber 
 { position: relative; float: left; 
        flex-grow: 1; 
        background: #5a5a5a; height: 14px; margin: 12px; border-top: 1px solid #3f3f3f; border-left: 0px; border-bottom: 0px; overflow: hidden; }         .audiojs .progress { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #ccc; z-index: 1;           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #ccc), color-stop(0.5, #ddd), color-stop(0.51, #ccc), color-stop(1, #ccc));           background-image: -moz-linear-gradient(center top, #ccc 0%, #ddd 50%, #ccc 51%, #ccc 100%); }         .audiojs .loaded { position: absolute; top: 0px; left: 0px; height: 14px; width: 0px; background: #000;           background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #222), color-stop(0.5, #333), color-stop(0.51, #222), color-stop(1, #222));           background-image: -moz-linear-gradient(center top, #222 0%, #333 50%, #222 51%, #222 100%); 
        cursor: pointer;
        }     
 .audiojs .time { float: left; height: 36px; line-height: 36px; margin: 0px 0px 0px 6px; padding: 0px 6px 0px 12px; border-left: 1px solid #000; color: #ddd; text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5); 
        cursor: pointer;
 }       
 .audiojs .time em { padding: 0px 2px 0px 0px; color: #f9f9f9; font-style: normal; }         .audiojs .time strong { padding: 0px 0px 0px 2px; font-weight: normal; }      
 .audiojs .error-message { float: left; display: none; margin: 0px 10px; height: 36px; width: 400px; overflow: hidden; line-height: 36px; white-space: nowrap; color: #fff;           text-overflow: ellipsis; -o-text-overflow: ellipsis; -icab-text-overflow: ellipsis; -khtml-text-overflow: ellipsis; -moz-text-overflow: ellipsis; -webkit-text-overflow: ellipsis; }      
 .audiojs .error-message a { color: #eee; text-decoration: none; padding-bottom: 1px; border-bottom: 1px solid #999; white-space: wrap; }              
 
 .audiojs .play-pause 
 { 
    width: 42px; height: 40px; padding: 0px 0px; margin: 0px; float: left; overflow: hidden; border-right: 1px solid #000; 
 } 
  .audiojs .play-pause:hover
  {
      background:hsl(12, 100%, 25%);
      color:black;
  } 
 
 .audiojs p 
 {
  display:flex; justify-content:center; align-items:center; 
   display: none; width: 25px; height: 40px; 
   margin: 0px; 
   cursor: pointer;
   margin-left:10px;
   box-sizing:border-box;
   border:0px solid green; 
   height:100%;
     font-size:20px;
     color:white;


 }    
 
 .audiojs .play { display: flex; }           
 .audiojs .loading { }                
 .audiojs .error { }        
 .audiojs .pause {  display: flex;}                        
 
 .playing .play, .playing .loading, .playing .error { display: none; }      
 .playing .pause { display: flex; }                        
 .loading .play, .loading .pause, .loading .error { display: none; }        
 
 .loading .loading { display: flex; }                 
 .error .time, .error .play,  .error .pause, .error .scrubber, .error .loading { display: none; }         
 .error .error { display: flex; }         
 .error .play-pause p { cursor: auto; }                
 .error .error-message { display: flex; }

      


      @media (max-width: 768px) 
{
  .parallax-window
  {
    max-height:300px;
  }
  #audioPlayer 
  { 
      position: relative; 
  }

}
