/**
 * Copyright 2017, Google, Inc.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

a {
    color: navy;
}

body > section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
    -webkit-perspective: 800;
    -webkit-transform-style: preserve-3d;
}
section > * {
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

.fft {
    position: relative;
    z-index: 1;

    /*-webkit-box-reflect: below 5px -webkit-linear-gradient(top, transparent, transparent 50%, rgba(255,255,255,0.2));*/
}
/*#fft {
  transform: translateX(-50%) rotateX(-30deg) rotateY(30deg);
}*/
/*#fft2 {
  transform: translateX(-50%) rotateX(-30deg) rotateY(-30deg);
}*/

#playbutton {
    cursor: pointer;
    position: relative;
    z-index: 10;  
    box-sizing: border-box;
    width: 48px;
    height: 48px;
    border-radius: 100%;
    border: 4px solid rgba(255,255,255,0.8);
}

#playbutton.aguardando {
    background: rgba(255,0,0,.5);
    /*opacity: 0.1;*/
}

#playbutton.playing {
    background: rgba(255,255,255,.5);
    /*opacity: 0.1;*/
}
#playbutton::before {
    content: '\feff';
    display: inline-block;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255,255,255,.9);
    border-width: 15px 15px 15px 20px;
    box-sizing: border-box;
    height:0;
    width: 50%;
    margin-left: 12px;
    margin-top: 5px;
}

#playbutton.playing::before, #playbutton.playing:hover::before {
    content: '\feff';
    display: inline-block;
    border: 4px solid rgba(0,0,0,.9);
    border-width: 0 5px;
    box-sizing: border-box;  
    height: 40%;
    width: 50%;
    margin: 0 auto;
}

#transcript {
    position: relative;
    min-width: 40em;
    position: absolute;
    bottom: 80px;
}

#transcript>div {
    position: absolute;
    bottom: 5px;
    left: 5px;
    z-index: 1;    
    margin: 0 auto 0px;        
    font-size: 16px;  
    color: white;
    background: rgba(0,0,0, 1);
    text-align: center;
    padding: .3em;
    font-size: 26px;
    font-weight: bold;
    /*border: 1px solid rgba(0,0,0,.2);*/
    border-radius: .3em;


    /*position: absolute;*/
    /*bottom: 0;*/
    /*  padding: .7em;
      margin: 0 auto;
      left: 50%;
      transform: translate(-50%, -1rem);
      width: 100%;
      text-align: center;
      box-sizing: border-box;
      background: rgba(195,215,264, .5);
      border: 1px solid rgba(0,0,0,.2);
      border-radius: .5em;*/
}
#transcript>div:empty {
    visibility: hidden;
}