@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300&family=Secular+One&display=swap');
body{line-height:1.6;overflow-x:hidden;font-family:'Inter',sans-serif}
h1{margin-left:-9999px;position:fixed}
h2{margin-bottom:50px;text-align:right;font-size:35pt;font-family:'Secular One',sans-serif}
h2 span,h3 span{font-size:.6em}
h3{margin-bottom:40px;text-align:right;letter-spacing:4px;font-size:25pt;font-weight:bold;font-family:'Secular One',sans-serif}
h4{margin:0 0 15px 0;text-align:right;letter-spacing:3px;font-size:17pt}
#discografia img,#publicacao img{-webkit-box-shadow:0px 0px 20px rgba(0,0,0,0.7);-moz-box-shadow:0px 0px 20px rgba(0,0,0,0.7);box-shadow:0px 0px 20px rgba(0,0,0,0.7)}
.faixa-lateral{border-left:10px solid #ddd}

/* Menu. */
#nome p{font-size:20pt;margin:6px 0 0 10px}
#nome p a:hover{text-decoration:none}
header{color:#444;z-index:1000;font-family:'Secular One',sans-serif;font-size:10pt}
header a{color:#444}
.navbar-default{background-color:#fff}
.navbar{margin:0;border-radius:0;min-height:40px}
ul li{padding:15px 5px;cursor:pointer}
ul li:hover{background-color:#ddd}
.nav > li > a{display:block}
.nav > li > a:active,.nav > li > a:hover{color:#444;background-color:#ddd}
.navbar-default .navbar-nav > li > a{color:#444;padding:1px}
.navbar-toggle,.navbar-toggle .icon-bar{border:1px solid #999}

/* Estações. */
#inicio{text-align:justify;font-size:1.3em;padding:50px 0}
#release,#aulas,#discografia,#publicacao,#transcricao,#contato{text-align:justify;font-size:1.3em;padding:50px 0}
#entrevista{text-align:right;font-size:1.3em;padding:50px 0}

/* Chamada na Home. */
#saudacao{text-align:center;padding:30px;background-color:rgba(0,0,0,.8);letter-spacing:1.5px;margin:50px auto;font-size:25pt;font-family:'Secular One',sans-serif}
#saudacao span{font-size:18pt}
#saudacao div{font-size:16pt}

#inicio{margin-bottom:0;height:1400px}
.branco{background-color:#fff}
.cinza{background-color:#eee}
#release,#entrevista,#aulas,#discografia,#publicacao,#transcricao{font-size:15pt}
#release img{float:left;margin-right:30px}
#release a{color:#000}
#release .container,#entrevista .container,#aulas .container,#transcricao .container{padding:50px 30px}
#videos div div div iframe{border:1px solid #666;margin:20px auto;height:271px;width:480px}

/*Aulas. */
#inicio{margin-bottom:0;background:url(../img/geral/ivan-fundo-home.jpg) no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;color:#fff}
#aulas p{font-size:15pt}
#aulas a{color:#fff}
#aulas a:hover{text-decoration:none;color:#aaa}

/* Discografia */
.row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
#mostrarLegenda{
    font-size: 15px;
}
.legenda{
    background-color:#c2c2c2;
    border-radius: 10px;
    text-align: center;
    display: none;
    position: absolute; /* mantido position: absolute */
    top: 0; /* ajustado top para 0 */
    left: 0; /* ajustado left para 0 */
    width: 100%; /* ajustado width para 100% */
    background-color: white;
    border: 1px solid black;
    padding: 10px;
    box-sizing: border-box;
    z-index: 1000; /* mantido z-index */
}
.col-sm-3 {
    position: relative; /* adicionado position: relative */
}
.discografia-img {
    width: 100%; /* Garante que todas tenham o mesmo tamanho */
    max-width: 26rem; /* Define um tamanho máximo para evitar que fiquem muito grandes */
    height: auto; /* Mantém a proporção original da imagem */
    object-fit: contain; /* Evita cortes na imagem */
    display: block; /* Remove espaços extras ao redor das imagens */
    margin: 0 auto; /* Centraliza no contêiner */
    margin-top: 3rem;
}
.embed-container {
    display: block;
    margin-bottom: 0; /* Remove o espaço extra abaixo do iframe */
}

#mostrarLegenda {
    display: block;
    margin-top: 0px; /* Reduz o espaço acima do link */
    margin-bottom: 40px;
}

@media (max-width: 1000px) { /* Aplica apenas em telas menores (como celulares) */
    #mostrarLegenda,.breve{
        text-align: center;  /* Centraliza o texto */
        display: block;
        width: 100%; /* Garante que o link ocupe toda a largura */
        margin-top: 5px; /* Reduz o espaço acima do link */
        margin-bottom: 30px;
    }
}


/* Publicação. */
#publicacao{text-align:right}
#publicacao .row{margin:30px 0;padding:30px 20px}
#publicacao .col-sm-6 img{margin:0 auto 20px}
#publicacao .col-sm-6 p{text-align:center}
#publicacao .col-sm-4 p,#publicacao .col-sm-offset-8 p,#transcricao .col-sm-offset-8 p {
    line-height:100%;
    letter-spacing:.5px;
    text-align:right
}
#publicacao .col-sm-4{padding-right:0}
#publicacao a,#transcricao a,#entrevista a{color:#000}
#publicacao a:hover,#transcricao a:hover,#entrevista a:hover{
    text-decoration:none;color:#aaa
}
#publicacao a:visited,#transcricao a:visited,#entrevista a:visited{
    text-decoration:none
}
#publicacao a:active,#transcricao a:active,#entrevista a:active{
    text-decoration:none
}


#discografia .col-sm-3 iframe{margin:20px auto}
#discografia iframe{border:0;width:260px;height:402px}
#discografia .solo{margin:20px auto}

iframe{border:none;width:100%;height:680px}
footer.container-fluid{padding:0}

/* R. Chenta. */
#chenta{background-color:#000;text-align:center;padding:6px}
#chenta p{margin:0;font-size:8pt;color:#fff}
#chenta p a{color:#fff}
#chenta p a:hover{text-decoration:underline}

#zap{text-align:right}

.contador,#contador{color:#ccc;font-size:14px}
.subir-pagina{font-size:12px;color:#fff;cursor:pointer;float:right;background-color:#777;position:fixed;right:10px;bottom:10px;padding:10px;opacity:.9;z-index:1000;font-family:'Secular One',sans-serif}
.subir-pagina:hover{background-color:#444;color:#fff}

@media(min-width:750px){
    #discografia .col-sm-3{width:50%}
}
@media(min-width:1000px){
    #discografia .col-sm-3{width:25%}
}
@media(max-height:627px){
    #inicio{padding:5px 0}
    #chamada{padding:0 10px;margin:0 auto;max-width:450px}
}
@media(min-height:628px){
    #chamada{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);padding:0 10px}
}
@media(min-width:768px){
    #nome{display:none}
}
@media(max-width:767px){    
    h2,h3,#entrevista{text-align:center}
    header nav.navbar-fixed-top{position:relative}
    ul li{padding:0;margin-left:15px}
    .subir-pagina{font-size:10px;font-weight:700;color:#fff;cursor:pointer;float:right;background-color:#777;position:fixed;right:5px;bottom:5px;padding:5px;opacity:.9;z-index:1000}
    .subir-pagina:hover{background-color:#444;color:#fff}
    #discografia img{margin:0 auto 20px;display:block}
    #livros .col-sm-6{margin:50px}
    .faixa-lateral{border-left:0}
}
@media(min-width:1200px){
    #nome{display:block}
}