@charset "utf-8";
/* CSS Document */
body{ background-color:#000000; }

#loader{
  position:absolute;
  right:50%; top:50%;
  margin-left: -25px; margin-top:-25px;
  z-index:3;
  display:none;	
  transform-origin: 50% 50%;	
  animation: loader-spin 1.4s linear infinite;    		
}
#loader img{ display:block; background-color:#000000; border-radius:50%; padding:5px; }
#loader.on{
   display:block;	   
}

@keyframes loader-spin {
    to {
    transform: rotate(360deg);
  }
}

#progress{
  position:absolute;
  bottom:5%;
  left:5%;
  width:90%;
  background-color:#252525;
  border-radius:10px;
  z-index:4;	
  box-sizing:border-box;
  padding:5px;
  overflow:hidden;
  border: 2px solid #777777;
  transition:1s all;	
  display:none;
}
#progress.on{ display:block; }
#progress span{
 display:block;	
 position:absolute;
 left:0; top:0;
 width:0; height:100%;
 background-color:#9a9a9a;
 transition:.4s all;	
}

#audio-controls{
  position: absolute;
  opacity:0;	
  bottom:-20px; left:4px;
  z-index:4;
  background-color:rgba(0,0,0,.6);
  border-radius:10px;  
  box-shadow:0 0 3px 0 rgba(0,0,0,.5);	
  transition:all .65s;	
}
#audio-controls.on{
  opacity:1;
  bottom:2px;	
}

#audio-controls a{
  display:block;
  float:left;	
  text-decoration:none;
  padding:4px 8px;	
  opacity:.25;	
}
#audio-controls a.on{
  opacity:1;	
}
#music-btn{ border-right:1px solid #444444; }
#speech-btn{ border-left:1px solid #777777; }

#audio-controls a img{
  width:auto; height:24px;
  display:block;	
}

#record-btn{
  position:absolute;
  top:10px; left:10px;
  z-index:5;
  display:none;	
}
#record-btn.on span{ 
 background-color:#FF0004;	
}
#record-btn span{  
  border-radius:50%;
  background-color:#6F0001;
  display:block;
  width:15px; height:15px;	  
}


#poster{
  width:100%;
  height:100%;
  background-image:url("../images/miam_poster.png");
  background-repeat:no-repeat;
  background-size:contain;
  position:absolute; top:0; left:0;
  z-index:2;
  background-color:#676767;	
  display:none;	
  box-sizing:border-box;
  border-right:1px solid #000000;	
  transition:all .5s;	
}
#poster.on{
  display:block;	
}

.fixedwidth{ width:100%;  margin:0 auto; position:relative; }
#anim-block{
  position:relative;
  left:0; top:0;
  height:0;
  padding-top:56.25%;	
  overflow:hidden;	
}
#animation_container{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;	
}

#poster #start-btn{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background-color:rgba(100,100,100,.7);
  border-radius:50%;
  box-sizing:border-box;
  width:150px; height:150px;	
  box-shadow:0 0 5px 1px rgba(0,0,0,.5);	
  transition:all .25s ease-out;	
  display:none;	
}
#poster #start-btn.on{ display:block; }
#poster #start-btn:hover{
  background-color:rgba(100,100,100,.9);  	
}
#poster #start-btn img{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  display:block;	
}