@charset "UTF-8";
/* CSS Document */

/* #streaming { background-image: linear-gradient(to bottom, #333132, #131313);width:646px;height:485px; position:relative}
#streaming a { color:white; text-decoration:none; font-size:12px; font-family:Arial, Helvetica, sans-serif; display:block;  text-align:right; padding:20px 55px 0 0}
#streaming a::before {content:'x'; display:block; color:#fef200; top:20px; position:absolute; right:40px;}
#streaming a:hover {text-decoration:underline}
#streaming .controles {width:580px; height:312px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; border:2px solid white;margin: 15px 0 20px 31px;}
#streaming img.banner {border:5px solid white; margin:0 auto; display:block}
#streaming img.logo { width:105px; position:absolute; top:8px; left:90px;}
#streaming .cabecalho {background-color:#1d1d1d; width:100%; -webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px; height:55px;}
#streaming .cabecalho p { float:left; margin: 19px 0 0 222px; color:#ffd100;font-family: 'Roboto', sans-serif; font-size:12px}
#streaming .cabecalho p::before {content:''; display:block; background:url(../imagens/icon-phone.gif) no-repeat; width:30px; height:30px; top:62px; left:214px; position:absolute}
#streaming .cabecalho form { float:right; margin-right:10px;margin: 13px 36px 0 0; background-color:#fffbfa;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;height:29px; position:relative}
#streaming .cabecalho form::before {content:''; display:block; position:absolute; top:0; right:0; width:30px; height:100%;-webkit-border-radius: 0 5px 5px 0;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0; pointer-events:none; outline:none; background:url(../imagens/icon-seta-form.jpg) no-repeat 9px 8px;background-color:#cbcbcb; cursor:pointer }
#streaming .cabecalho form select { height:29px; width:180px; border:none; background:none;font-family: 'Roboto', sans-serif; font-size:12px; outline:none }
#streaming .info-xml {height:160px;}
#streaming .info-xml img.capa { float:left; margin:20px 0 0 27px; border:4px solid white;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; width:149px; height:149px;}
#streaming .info-xml p.musica { float:left; color:#fed102;font-family: 'Roboto', sans-serif; font-size:20px; margin: 48px 0 0 20px; width:360px; font-weight:700}
#streaming .info-xml p.artista { float:left; color:#fefefe;font-family: 'Roboto', sans-serif; font-size:14px; margin: 0px 0 0 20px; width:360px; font-weight:300}
#streaming .info-xml hr { float:left; width:360px; margin:15px 0 4px 20px; height:0; border-top:1px solid white;}
#streaming .compartilhe { float:left; width:535px; margin:17px 0 0 27px;}
audio {width: 360px;float: left;margin: 10px 0 0 20px;}
#streaming .info-xml object {margin-left:15px; position:relative;}
#banner{width: 100%; height: 90px;} */

#streaming { background-image: linear-gradient(to bottom, #333132, #131313);width:646px;height:485px; position:relative}
#streaming a { color:white; text-decoration:none; font-size:12px; font-family:Arial, Helvetica, sans-serif; display:block;  text-align:right; padding:20px 55px 0 0}
#streaming a::before {content:'x'; display:block; color:#fef200; top:20px; position:absolute; right:40px;}
#streaming a:hover {text-decoration:underline}
#streaming .controles {width:580px; height:312px;-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; border:2px solid white;margin: 15px 0 20px 31px;}
#streaming img.banner {border:5px solid white; margin:0 auto; display:block}
#streaming img.logo { width:105px; position:absolute; top:8px; left:90px;}
#streaming .cabecalho {background-color:#1d1d1d; width:100%; -webkit-border-top-left-radius: 10px;-webkit-border-top-right-radius: 10px;-moz-border-radius-topleft: 10px;-moz-border-radius-topright: 10px;border-top-left-radius: 10px;border-top-right-radius: 10px; height:55px;}
#streaming .cabecalho p { float:left; margin: 19px 0 0 222px; color:#ffd100;font-family: 'Roboto', sans-serif; font-size:12px}
#streaming .cabecalho p::before {content:''; display:block; background:url(../imagens/icon-phone.gif) no-repeat; width:30px; height:30px; top:62px; left:214px; position:absolute}
#streaming .cabecalho form { float:right; margin-right:10px;margin: 13px 36px 0 0; background-color:#fffbfa;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;height:29px; position:relative}
#streaming .cabecalho form::before {content:''; display:block; position:absolute; top:0; right:0; width:30px; height:100%;-webkit-border-radius: 0 5px 5px 0;-moz-border-radius: 0 5px 5px 0;border-radius: 0 5px 5px 0; pointer-events:none; outline:none; background:url(../imagens/icon-seta-form.jpg) no-repeat 9px 8px;background-color:#cbcbcb; cursor:pointer }
#streaming .cabecalho form select { height:29px; width:180px; border:none; background:none;font-family: 'Roboto', sans-serif; font-size:12px; outline:none }
#streaming .info-xml {height:160px;}
#streaming .info-xml img.capa { float:left; margin:20px 0 0 27px; border:4px solid white;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; width:149px; height:149px;}
#streaming .info-xml p.musica { float:left; color:#fed102;font-family: 'Roboto', sans-serif; font-size:20px; margin: 48px 0 0 20px; width:360px; font-weight:700}
#streaming .info-xml p.artista { float:left; color:#fefefe;font-family: 'Roboto', sans-serif; font-size:14px; margin: 0px 0 0 20px; width:360px; font-weight:300}
#streaming .info-xml hr { float:left; width:360px; margin:15px 0 4px 20px; height:0; border-top:1px solid white;}
#streaming .compartilhe { float:left; width:535px; margin:17px 0 0 27px;}
audio {width: 360px;float: left;margin: 10px 0 0 20px;}
#streaming .info-xml object {margin-left:15px; position:relative;}
#banner{width: 100%; height: 90px;}

@media only screen and (max-width: 620px){
  #streaming{width: 100%; min-height: 100vh; height: auto; padding-top: 70px;}
  #streaming a{display: none;}
  #streaming img.logo{left: 50%; transform: translate(-50%, 0);}
  #streaming .controles{width: calc(100% - 62px); height: auto; display: inline-block; padding-bottom: 20px;}
  #streaming .cabecalho p{margin: 80px 0 0 0; text-align: center; width: 82%; padding-left: 40px; position: relative;}
  #streaming .cabecalho p::before{top: 50%; left: 30%; transform: translate(-50%, -50%);}
  #streaming .cabecalho form{margin: 36px 20% 0;}
  #streaming .info-xml{height: auto;}
  #streaming .info-xml img.capa{display: none;}
  #streaming .info-xml hr{width: 82%;}
  audio{width: calc(100% - 20px); margin: 10px 0 0 10px;}
  #streaming .compartilhe{width: 82%; overflow: hidden;}
  #banner{width: 82%; height: 90px;}
}