/*barra que divide principal*/
#barra{width:100%; color:#c00; font-weight:bold;
margin:0 auto;
text-align:center;
display: -webkit-flex;
display: flex;
flex-flow: row wrap;
align-items:stretch;/*padrao = stretch  flex-start*/
justify-content:center;
-webkit-flex-flow: row wrap;
-webkit-align-items:stretch;/*padrao = stretch  flex-start*/
-webkit-justify-content:center;
}
#barra_l, #barra_r{
flex:1 1 40%; /*flex-grow, flex-shrink e flex-basis -> relação de aumento dos box entre si no responsivo, diminuição, MIN-WHIDTH */
-webkit-flex:1 1 40%;
padding: 12px 3%;
text-align:center;
display: flex;
-webkit-flex-flow: row;
flex-flow: row wrap;/*se colocar column nao vai pra baixo - se não colocar wrap não funciona*/
align-items:center;
justify-content:center;
-webkit-align-items:center;
-webkit-justify-content:center;
/*alinhamento vertical*/

-webkit-resize: vertical;
resize: vertical;
}
#barra h1, #barra h2, #barra strong{color:#fff; font-size: 24px; margin: 4px auto;}
#barra_l{ position:relative; background:#fff;}
#barra_r{position:relative;  background:#ccc; padding-left:6%;}
.btbarra_l, .btbarra_r{margin:auto; text-align:center; margin-bottom:-40px; width:auto; padding:2%; border:2px solid #6faf1b; border-radius: 20px; font-family: 'Quicksand', sans-serif; font-size:18px; letter-spacing:0;}
.btbarra_l{background:#ccc;}
.btbarra_r{ border:2px solid #0f62ac; background:#fff;}
.trw, .trb{width:100%; height:30px!important; background-size: 100% 100%; position:absolute; bottom:-30px; z-index:2000;}
.trw{background:url(imagens/trw.png) bottom right no-repeat; right:0;}
.trb{background:url(imagens/trb.png) bottom left no-repeat; left:0;}
#bseta, #bsetad{position:absolute; width: 80px; height: 80px; border-radius:40px; background:#fff; top:45%; top: calc(50% - 40px); left: -40px; border:1px solid #ccc; color:#ccc; font-size:30px;
/*alinhamento vertical*/
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;  
flex-direction: column;
justify-content: center;
resize: vertical;
-webkit-flex-direction: column;
-webkit-justify-content: center;
-webkit-resize: vertical;
}
#bsetad{ background:transparent!important; width: 300px; height:300px;top:auto; color:#eee; left:40%; left: calc(50% - 150px); bottom: -150px; border:0; text-align:center; z-index:2000; font-size:300px;}
@media screen and (max-width: 800px) {
#bsetad, .trw, .trb{width:0; height:0; overflow:hidden; visibility:hidden;}
}
@media screen and (max-width: 500px) {
#barra_l, #barra_r{
flex:0 0 80%;
-webkit-flex:0 0 80%;
padding:4px 5%;
}
#bseta{width:0; height:0; overflow:hidden; visibility:hidden;}
}
/*fim barra*/