/*
    Theme Name: Tema Teatro Glauce Rocha
    Author: AGETIC/DISOFT/SEQS
    Author URI: agetic.ufms.br
    Description: Tema Oficial do Teatro Glauce Rocha
    Version: 1.0
*/

@import url('https://fonts.cdnfonts.com/css/rawline');

a{
    text-decoration: none;
    font-weight: 700;
    transition: all 0.2s;
}

a:hover{
    color: #000 !important;
}

body{
    font-family: 'Rawline', sans-serif;
}

p{
    margin: 16px 0px 16px 0px;
}

h1, h2, h3{
    color: #000 !important;
    font-weight: 800;
}

h3{
    margin: 20px 0px 20px 0px !important;
}

.list-group-item.active>h3{
    margin: 0 !important;
}

.subtitulo{
    margin: 0px 0px 40px 0px !important;
}

#mainNav{
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    background-color: #fff;
    z-index: 999;
    min-height: 3.5rem;
}

/* LINKS DO HEADER */
.hover-underline-animation {
    display: inline-block;
    position: relative;
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    color: #0087ca;
  }
  
  .hover-underline-animation::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #f99d1b;
    transform-origin: bottom right;
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    transition: transform 0.4s ease-out;
  }
  
  .hover-underline-animation:hover::after {
    border-bottom-left-radius: 0.375rem !important;
    border-bottom-right-radius: 0.375rem !important;
    transform: scaleX(1);
    transform-origin: bottom left;
  }

.nav-link{
    border-radius: 0.375rem;
    padding: 4px 0px;
    margin: 1.5rem 0.5rem 1.5rem 0.5rem;
    color: #000;
    font-weight: 700;
    transition: all 0.2s;
}

.nav-link.active{
    border-radius: 0.375rem;
    background: #f99d1b;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    color: #fff !important;
}

/* SVG MARGIN-AUTO */
.svg-inline--fa{
    margin: 0 auto;
}

/* MARGIN-RIGHT SVG */
.nav-link svg, .botao-default svg, .botao-pequeno svg, p svg, .ff-btn-submit svg{
    margin-right: 5px !important;
    margin-left: 0 !important;
}

/* FOOTER */
.footer {
    padding: 5rem 0;
}

/* IMAGEM DO TEATRO */
@media (max-width: 767px) {
    .image-column {
        height: auto; /* Define a altura automática em telas menores */
    }
}

/* LOGOS */
@media (max-width: 767px){
    #logo-ufms{
        width: 30vh;
    }

    #logo-fapec{
        margin-top: 40px;
        width: 30vh;
    }
}

/* NAV-ITEM */
.nav-item{
    margin: 5px;
}

/* NAVBAR SHRINK */
@media (min-width: 992px) {
    #mainNav.navbar-shrink .nav-link {
        color: #000;
        margin: 0rem 0rem 0rem 0rem;
    }
}

@media (max-width: 991px){
    .nav-link{
        padding: 0.75rem 0.75rem 0.75rem 0.75rem;
        margin: 0;
    }
}

/* BOTÃO-HEADER PADDING */
@media (max-width: 365px){
    .container.px-4.px-lg-5{
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 365px){
    #botao-header{
        margin-top: 8px;
    }
}

/* FAIXA-MARGEM */
#faixa-laranja{
    background-color: #f99d1b;
    height: 114px;
}

@media (max-width: 1399px){
    #faixa-laranja{
        height: 114px;
    }
}

@media (max-width: 1199px){
    #faixa-laranja{
        height: 138px;
    }
}

@media (max-width: 991px){
    #faixa-laranja{
        height: 73.23px;
    }
}

@media (max-width: 365px){
    #faixa-laranja{
        height: 111.75px;
    }
}

/* BOTÃO-INÍCIO */
.botao-inicio{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #f99d1b;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    z-index: 998;
    margin-bottom: 20px !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.2s;
}

@media (max-width: 991px){
    .botao-inicio{
        width: 40px !important;
        height: 40px !important;
    }
}

.botao-inicio:hover{
    color: #fff !important;
    background-color: #faae43 !important;
    border-color: #faae43 !important;
}

/* BOTÃO-TOP */
#btnTop{
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #f99d1b;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.2s;
}

@media (max-width: 991px){
    #btnTop{
        width: 40px !important;
        height: 40px !important;
    }
}

#btnTop:hover{
    cursor: pointer;
    color: #fff !important;
    background-color: #faae43 !important;
    border-color: #faae43 !important;
}

/* BOTÃO-SOBRE */
.botao-default{
    width: 280px;
    text-decoration: none;
    padding: 8px 0px;
    margin: 1.5rem 0rem 1.5rem 0rem;
    color: #fff;
    background-color: #f99d1b !important;
    font-weight: 700;
    border-radius: 100rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.2s;
}

.botao-default:hover{
    color: #fff !important;
    background-color: #faae43 !important;
    border-color: #faae43 !important;
}

.botao-pequeno{
    width: 20vh;
    text-decoration: none;
    padding: 4px 0px;
    margin: 1.5rem 0rem 8px 0rem;
    color: #fff;
    background-color: #f99d1b !important;
    font-weight: 700;
    border-radius: 100rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    transition: all 0.2s;
}

.botao-pequeno:hover{
    color: #fff !important;
    background-color: #faae43 !important;
    border-color: #faae43 !important;
}

/* REDES SOCIAIS */
.redes-sociais{
    color: #fff;
    transition: all 0.2s;
}

.redes-sociais:hover{
    color: #f99d1b !important;
}

#redes-instagram{
    margin-left: 5px;
    margin-right: 5px;
}

/* LIST GROUP */
.list-group-item.active{
    background-color: #000;
    border-color: #000;
    color: #fff;
    font-weight: 700;
}

/* TÍTULOS H1 */
h1, h2{
    margin: 0;
    margin: 40px 0px 40px 0px !important;
    text-transform: uppercase;
    margin-right: 3rem !important;
    margin-left: 3rem !important;
    white-space: nowrap;
}

@media (max-width: 991px){
    h1, h2{
        margin-right: 1.5rem !important;
        margin-left: 1.5rem !important;
        white-space: unset !important;
    }
}

@media (max-width: 767px){
    h1, h2{
        margin-right: 1rem !important;
        margin-left: 1rem !important;    
        white-space: unset !important;    
    }
}

.h2-divisor{
    margin: 0;
    margin: 30px 0px 30px 0px !important;
    text-transform: uppercase;
    margin-right: 2rem !important;
    margin-left: 2rem !important;
    white-space: nowrap;
}

.linha-laranja{
    background: #f99d1b;
    height: 1px;
    width: 100%;
}

.cabecalho-linha .outstanding-header {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-transform: uppercase;
}

.cabecalho-linha .outstanding-header:before {
    background: #f99d1b;
    content: "";
    height: 2px;
    width: 100%;
}

.cabecalho-linha .outstanding-header:after {
    background: #f99d1b;
    content: "";
    height: 2px;
    width: 100%;
}

/* EVENTOS */
.tipos-eventos{
    margin: 0px 0px 40px 0px;
}

.link-em-cartaz, .link-em-breve, .link-realizados{
    border: 1px solid #f99d1b;
    display: flex;
    justify-content: center;
    width: 20vh;
    text-decoration: none;
    padding: 4px 0px;
    /* margin: 1.5rem 0.5rem 8px 0.5rem; */
    color: #fff;
    background-color: #f99d1b !important;
    font-weight: 700;
    transition: all 0.2s;
}

.link-em-cartaz{
    border-top-left-radius: 100rem;
    border-bottom-left-radius: 100rem;
}

.link-realizados{
    border-top-right-radius: 100rem;
    border-bottom-right-radius: 100rem;
}

.link-em-cartaz:hover, .link-em-breve:hover, .link-realizados:hover{
    color: #fff !important;
    background-color: #faae43 !important;
    border: 1px solid #faae43;
}

/* PAGINAÇÃO DOS EVENTOS */ 
#em-breve{
    display: none;
}

#realizados{
    display: none;
}

#em-cartaz, #em-breve, #realizados{
    transition: opacity 0.5s;
}

/* BOTÕES ACTIVE EVENTOS */
.active-button{
    background-color: #fff !important;
    color: #f99d1b !important;
    border: 1px solid #f99d1b;
}

.active-button:hover{
    background-color: #fff !important;
    color: #f99d1b !important;
    border: 1px solid #f99d1b;
}

/* DETALHES */
@media (max-width: 991px){
    #lista-detalhes{
        margin: 24px 0px 0px 0px !important;
    }

    #botao-ingresso{
        width: 100% !important;
    }
}

/* SERVIÇOS */
.list-group-item>p{
    margin: 0;
}

.links-servicos{
    color: #f99d1b !important;
}

/* MARGENS SECTIONS */
@media (max-width: 768px){
    section#inicio{
        padding: 100px 0px 55px 0px !important;
    }
}

@media (max-width: 991px){
    section#inicio, section#eventos, section#detalhes, section#ingressos, section#servicos, section#historia-do-teatro, section#contato, section#agenda{
        padding: 55px 0px 55px 0px;
    }
}

@media (min-width: 992px){
    section#inicio, section#eventos, section#detalhes, section#ingressos, section#servicos, section#historia-do-teatro, section#contato, section#agenda{
        padding: 85px 0px 115px 0px;
    }
}

/* SECTIONS SOBRE */
@media (max-width: 991px){
    section#infos-tecnicas, section#administracao{
        padding: 0px 0px 55px 0px;
    }
}

@media (min-width: 992px){
    section#infos-tecnicas, section#administracao{
        padding: 0px 0px 115px 0px;
    }
}

/* CARD COMEÇE POR AQUI */
@media (max-width: 1399px){
    h3.titulo-teatro{
        margin: 60px 0px 20px 0px !important;
    }
    
    .botao-default.saiba-mais{
        margin: 1.5rem 0rem 60px 0rem;
    }
}

/* MARGENS DO FOOTER */
@media (max-width: 991px){
    #ufms-fapec{
        margin: 40px 0px 40px 0px;
    }
}

@media (min-width: 992px){
    #ufms-fapec{
        margin: 5rem 0px 5rem 0px;
    }
}

/* BOTÃO WPP */
.botao-wpp svg{
    margin: 0 !important;
}

.botao-wpp{
    color: #fff;
    background-color: #25D366;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s;
}

.botao-wpp:hover{
    background-color: #2ae66e !important;
    color: #fff !important;
}

@media (max-width: 991px){
    .botao-wpp{
        width: 40px !important;
        height: 40px !important;
    }
}

/* CURSOR DO MOUSE */
#imagem-fancy:hover{
    cursor: pointer;
}

/* NAV-BAR CENTER */
#navbar-center{
    text-align: center !important;
}

@media (max-width: 991px){
    #navbar-center{
        text-align: left !important;
    }
}

/* CARD IMAGE */
.card-img-top{
    height: auto;
}

/* BOTÃO MOBILE */
@media (max-width: 991px){
    .botao-default{
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin: 24px auto !important;
    }
}

/* BOTÃO SAIBA-MAIS */
@media (max-width: 991px){
    #botao-saiba-mais{
        width: 65% !important;
        margin-bottom: 60px !important;
    }
}

/* CAROUSELTEATRO */
@media (min-width: 576px){
    #slider-destaques{
        padding-top: 16px;
    }
}

@media (min-width: 767px){
    #slider-destaques{
        padding-top: 24px;
    }
}

@media (min-width: 1200px){
    #slider-destaques{
        padding-top: 0px;
    }
}

#carouselTeatro{
    box-shadow: rgb(249 157 27 / 40%) 0px 10px, rgb(249 157 27 / 30%) 0px 20px, rgb(249 157 27 / 20%) 0px 30px, rgb(249 157 27 / 10%) 0px 40px, rgb(249 157 27 / 5%) 0px 50px;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f99d1b' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
   }
   
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f99d1b' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
   
@media (min-width: 992px){
    section#inicio{
        padding: 125px 0px 115px 0px !important;
    }
}

/* BACKGROUND-IMAGE */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* Coloca o elemento ::before atrás do conteúdo do body */
    background-image: url('https://teatroglaucerocha.ufms.br/wp-content/uploads/2023/11/11.png'); /* Substitua pelo caminho da sua imagem */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3; /* Ajuste a opacidade conforme necessário */
}

#icone-navbar{
    transition: all 0.4s;
}

#icone-navbar:hover{
    scale: 1.05;
}

/* FORMULÁRIO DE CONTATO */
.ff-message-success{
    border-radius: 100rem;
    background: #fff;
}

.ff-message-success h3{
    color: #f99d1b !important;
}

.ff-el-form-control{
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style){
    background-color: #f99d1b !important;
    color: #fff !important;
}

.ff-default .ff_btn_style{
    border-color: #f99d1b !important;
    font-weight: 600 !important;
    border-radius: 100rem !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

@media (max-width: 991px){
    .ff-default .ff_btn_style{
        width: 100% !important;
    }
}

form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style):hover{
    background-color: #fff !important;
    color: #f99d1b !important;
}

input, textarea{
    font-family: 'Rawline', sans-serif !important;
}

/* PARÁGRAFO SOBRE */
@media (max-width: 767px){
    .p-margem{
        margin-top: 0px !important;
    }

    .p-padding{
        padding-top: 16px !important;
    }
}

/* PARÁGRAFO IMAGENS */
@media (min-width: 767px){
    .paragrafo-imagens{
        object-fit: cover;
        height: 100%;
    }
}

@media (max-width: 768px){
    .paragrafo-imagens{
        margin: 16px 0px 0px 0px !important;
    }
}