@keyframes btnestima {
       0% { opacity: 0; }
       50% { opacity: 0.5; }
       100% { opacity: 1; }
 }
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/muli/v28/7Aulp_0qiz-aVz7u3PJLcUMYOFlOkEk30eg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mulish/v12/1Ptvg83HX_SGhgqk3wot.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Mulish2';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/mulish/v12/1Ptvg83HX_SGhgqk3wot.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


*{
  
   font-family: 'Mulish';

}
body{
   background-color: #F4FBFD;
   overflow-x: hidden;
}

.titulo{
    font-size: 38px;
    margin-bottom: 40px;
    color: #C7441A;
    position: relative;
}
.titulo::after{
        content: "";
        display: block;
        height: 4px;
        width: 60px;
        background-color: #C7441A;
        bottom: 0px;
}
.titulo:hover::after{
         width: 100%; 
         transition: 1s;
}
p{
   font-family: "Muli";
   color: #000;
   font-weight: 600;
   font-size: 20px;
}
.navbar-brand img{
          width: 180px;
}
.navbar-nav .nav-item a{
            color: #fff !important;
            font-size: 14px;
}
.navbar-nav .nav-item{
            padding-left: 10px;
            margin-left: 10px;
            border-left: 2px solid #C7441A;
            margin-right: 5px;
}
.navbar-nav .nav-item:hover{
             border-left: 2px solid #fff;
}
.navbar-nav .nav-item a:hover{
           color: #C7441A !important;
}
.navbar-light .navbar-toggler{
         background-color: #fff;
}

header{
    background-image: url("../img/back-topo.jpg");
    min-height: 70vh;
}
header .msg{
       display: flex;
       min-height: 400px;
       flex-direction: column;
        justify-content: center;
        align-items: center;
}
header .msg h2{
          text-align: center;
          color:#fff;
          width: 60%;
          font-size: 45px;
}

#sobre{
    padding: 30px 10px;
}

#programacao{
      background-color: #121212;
      padding: 30px 10px;
}
#programacao .titulo{
      display: inline-block;
      width: auto;
      color: #fff;
}
#programacao .titulo::after{
  content: "";
  display: block;
  height: 4px;
  width: 60px;
  background-color: #fff;
  bottom: 0px;
}
#programacao .titulo:hover::after{
   width: 100%; 
   transition: 1s;
}
#programacao .nav-link.active{
                  border-bottom: 4px solid #C7441A;
                  background-color: transparent;
                  color: #C7441A;
} 
#programacao .nav-link{
              color: #fff;
}
#programacao .tab-pane{
             padding-top: 10px;
             width: 100%;
             display: block;
}
#programacao .programa{
            width: 100%;
            display: block;
            background-color: #fff;
            margin-bottom: 5px;
}
#programacao .programa p{
            font-size: 18px;
}

#mural{
   padding: 30px 10px;
}
#mural input{
       margin-bottom: 10px;
}
#mural .btn{
     margin-top: 10px;
     background-color: #C7441A;
     color: #fff;
}
#mural .recados{
       padding: 20px;
       background-color: #ccc;
       margin-bottom: 20px;
}
#mural h3{
       font-size: 20px;
}
#mural p{
      font-size: 17px;
}
#mural small{
      font-size: 12px;
}
#paginacao{
        padding-left: 30px;
}
#paginacao .pagina{
         color:#C7441A;
} 

#top10{
  padding: 30px 10px;
  background-color: #121212;
}
#top10 .titulo{
  display: inline-block;
  width: auto;
  color: #fff;
  margin-bottom: 50px;
}
#top10 .titulo::after{
content: "";
display: block;
height: 4px;
width: 60px;
background-color: #fff;
bottom: 0px;
}
#top10 .titulo:hover::after{
width: 100%; 
transition: 1s;
}
#top10 p{
      color: #fff;
      font-size: 19px;
}
#top10 .item-top{
         display: flex;
         width: 100%;
         background-color: #fff;
         margin-bottom: 10px;
}
#top10 .item-top .number{
           display: inline-block;
           padding: 30px;
           background-color: #C7441A;
           color: #fff;
}
#top10 .name-music{
        font-size: 20px;
        color: #C7441A;
        padding-top: 10px;
        padding-left: 10px;
        font-weight: 600;
        font-family: "Mulish";
        margin-bottom: 0px;
}
#top10 .artist{
         color: #000;
         padding-left: 10px;
}

#contatos{
     padding: 30px 10px;
}
#contatos .contact-text1{
             font-size: 19px;
}
#contatos p{
        font-size: 16px;
}
#contatos .whatsapp{
           display: flex;
           align-items: center;
           justify-content: center;
}

footer{

    background: #000; 
    min-height: 60px;
    display: flex;

}

footer p{

    color: white;
    font-size: 13px;
    margin-top: 20px;

}

footer p a{

     color: #ccc;

}



/* responsivo */


@media screen and (max-device-width: 575px){

                 #programacao{
                      text-align: center;
                 }
                 #top10 .titulo{
                      display: block;
                      width: 130px;
                      margin: 0 auto 20px;
                 }
                  header .msg h2{
                        font-size: 32px;
                  }
}

@media screen and (max-device-width: 390px){
                     

}