@extends('layouts.site')

@section('content')

<section class="chamada">
        <!-- <div class="container" style="width: 100%!important;"> -->
        <div class="row  box-aoVivo">

            <div class="col-12 col-md-12 box-audio-arenas" >
                <div class="col-12 col-sm-4  col-md-4 audio-arenas" style="">ARENA 1 - Reforma Tributária
                    <audio id="myAudio" controls >
                        <source src=""
                         type="audio/mp3">Seu navegador não suporta o player
                    </audio>
                </div>

                <div class="col-12 col-sm-4  col-md-4 audio-arenas" style="">ARENA 2 - Desafios do saneamento com o Novo Marco Legal
                    <audio  id="myAudio" controls >
                        <source src="" type="audio/mp3">Seu navegador não suporta o player
                    </audio>
                </div>
              
            </div> 
            <div class="col-12 col-md-12 box-audio-arenas">
                <div class=" col-12 col-sm-4  col-md-4 audio-arenas" style="">ARENA 3 - Financiamento da Educação Municipal:  Programas Federais, Creches, Obras Piso do Magistério e Fundeb
                    <audio  id="myAudio" controls ><source src="" type="audio/mp3">Seu navegador não suporta o player</audio>
                </div>

                <div class="col-12 col-sm-4  col-md-4 audio-arenas" style="">ARENA 4 - A incidência do legislativo no pacto federativo do SUAS
                    <audio id="myAudio" controls >
                        <source src="" type="audio/mp3">Seu navegador não suporta o player
                    </audio>
                </div>
               
            </div>

            <div class="col-12 col-md-12 box-audio-arenas" >   
                <div class="col-12 col-sm-4  col-md-4 audio-arenas" style="">ARENA 5 - O SUS para o futuro: Reorganização e financiamento
                    <audio id="myAudio" controls >
                        <source src="" type="audio/mp3">Seu navegador não suporta o player
                    </audio>
                </div>
                <div class="col-12 col-sm-4  col-md-4 audio-arenas" style="">ARENA 6 - A nova proposta de regulação de transporte público coletivo no Brasil
                    <audio id="myAudio" controls >
                        <source src="" type="audio/mp3">Seu navegador não suporta o player
                    </audio>
                </div>
    
            </div>      
        </div>  
       

        </div>     
</section>
                        <style>
                            .audio-arenas{
                                margin-bottom: 30px;
                                padding: 16px;
                                background: #f1f3f4; 
                                border-radius: 8px; 
                                font-size: 20px; 
                                display: flex; 
                                flex-direction:column;
                                font-weight: 700;
                                width: 90%;
                                
                                
                            }
                            audio{
                                width: 100%;
                            }
                            .imagem-audio{
                                width: 100px;
                            }
                            .box-audio-arenas{
                                display: flex;
                                justify-content: space-evenly;
                            }
                            
                            
                            @media screen and (max-width: 600px){
                                .row{
                                    margin: 0;
                                }
                                .assista{
                                    font-size: 20px;
                                }
                                
                                .box-video-marcha{
                                    width: 100%;
                                }
                                .audio-arenas{
                                    padding-left: 20px;
                                    font-size: 15px;
                                }
                                .box-audio-arenas{
                                    flex-direction: column;
                                    display: block;
                                    align-items: center;
                                    margin-left: 20px;
                                   
                            }
                            }

                        </style>



<script>
    
  var myAudio = document.getElementById("myAudio");
  myAudio.pause();

</script>

@endsection