@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin-left: 0px;
    margin-top: 0px;
}

div#popup {
    margin-top: -35px;
}

.img-back {
    margin-top: -124px;
}

#bg-img {
    background-image: url(../imagens/festa-junina-2024-bg.png);
    width: 100%;
    min-height: 1000px;
    background-size: cover;
}

.img-logo {
    text-align: center;
}

.img-logo img {
    width: 400px;
    margin-top: 65px;
}

.ano {
    text-align: center;
    margin-top: 10px;
}

.ano p {
    color: #fff;
    font-size: 75px;
    font-weight: 800;
    font-family: 'Roboto';
    margin-bottom: -10px;
    color: #ffe101;
}

.datas-semana {
    text-align: center;
}

.datas-semana1 {
    margin-top: 60px;
    text-align: center;
}

.datas {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;
}

.datas h1 {
    color: #fff;
    text-transform: uppercase;
    font-size: 40px;
    font-family: 'Roboto';
    margin-top: -10px;
    margin-bottom: 15px;
}
.crinp {
    background: #ffe101;
    padding: 14px 20px;
    margin-top: 30px;
    border-radius: 10px;
}

section#compra {
    display: flex;
    justify-content: space-around;
}

.icon-rds a i {
    font-size: 25px;
    padding: 15px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
}

.icon-rds a img {
    padding: 15px;
    border-radius: 50px;
    width: 50px;
    height: 50px;
    margin-left: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 5px;
    background: #fff;
}

a {
    text-decoration: none;
}

.icon-rds {
    margin-top: 20px;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 10px;
}

.icon-rds a .fa-facebook {
    background: #0862f7;
    color: #fff;
}

.icon-rds a .fa-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
}

.icon-rds a .fa-youtube {
    background: #fff;
    color: #a60000;
}

.txt-rds {
    text-align: center;
    margin-top: 20px;
}

.txt-rds h4 {
    color: #fff;
    font-size: 30px;
    font-family: 'Roboto';
    margin-bottom: 25px !important;
}

.opc-compra {
    text-align: center;
}

.opc-compra p {
    font-size: 20px;
    color: #fff;
    font-family: 'Roboto';
    margin-top: -20px;
}

.opc-compra h2 {
    margin-top: 10px;
    color: #fff;
    font-family: 'Roboto';
    font-size: 30px;
    margin-bottom: 40px;
}

.opc-compra a {
    background: #28a745;
    padding: 10px 20px;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    font-family: 'Roboto';
}

.opc-compra a:hover {
    background: #047a3d;
}

.garantingre i {
    font-size: 35px;
    color: #fff;
}

.garantingre p {
    color: #fff;
    font-size: 25px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: 'Roboto';
}

.garantingre {
    text-align: center;
    margin-top: 30px;
}

section.fim-sem {
    display: flex;
    justify-content: space-evenly;
    padding: 30px;
    background: #a60000;
}

.dia-sem {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffe101;
    padding: 40px;
    border-radius: 15px;
}

.dia-sem h4, .dia-sem h2 {
    font-weight: 900;
    color: #000;
}

p.d-fest {
    font-size: 20px;
    margin-top: 10px;
    font-weight: 500;
    text-transform: lowercase;
}

.evento {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
}

.evento h1 {
    color: #000;
}

.evento p {
    color: #000;
    font-size: 25px;
}

.festa-2024 {
    text-align: center;
    margin-bottom: 35px;
}

.festa-2024 h1 {
    color: #a60000;
    font-family: roboto, sans-serif;
    font-size: 40px;
    letter-spacing: 5px;
    padding-top: 40px;
    font-weight: 900;
}

.festa-2024 p {
    font-family: roboto, sans-serif;
    font-size: 18px;
    margin-bottom: 40px;
}

.festa-2024-img {
    margin-top: 30px;
}

.festa-2024-img img {
    width: 40%;
}

.fx-sep-atrc {
    display: flex;
    justify-content: center;
    background: #a60000;
    margin-bottom: 30px;
}

.fx-sep-atrc h1 {
    margin-bottom: 0;
    padding: 20px;
    font-family: 'Roboto';
    letter-spacing: 2px;
    color: #ffff00;
    font-size: 40px;
    font-weight: 900;
}

section#atracoes {
    width: 80%;
    background-size: cover;
    margin: 0 auto;
}

.img-artistas img {
    width: 380px;
    max-width: 100%;
    margin-top: 25px;
    padding: 5px;
}

.ttl-baratel h1 {
    font-family: 'Roboto';
    margin-bottom: 0 !important;
}

.ttl-baratel span {
    font-size: 20px;
    margin-left: 10px;
}

.ttl-baratel {
    background: #ffcc29;
    padding: 20px;
    margin-bottom: 10px;
    border-radius: 40px;
}

.semana-festa {
    display: flex;
    justify-content: space-around;
}

.img-artistas {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.palco {
    text-align: center;
}

.titulo-bar span {
    font-size: 17px;
    margin-left: 10px;
}

.titulo-con span {
    font-size: 17px;
    margin-left: 10px;
}

.bg-greenacqua {
    background: #5cc6d0;
    margin-bottom: -30px;
}

section.atrac-infantis {
    text-align: center;
    margin-top: 30px;
}

.img-atrac-infantis {
    padding: 50px 10px;
    margin-top: -8px;
}

.img-atrac-infantis img {
    border-radius: 20px;
    padding: 10px;
    width: 255px;
}

section.atrac-infantis h2 {
    font-size: 40px;
    font-weight: 900;
    color: #ffff00;
    background: #a60000;
    padding: 20px;
}

.dias-semana {
    display: flex;
    justify-content: center;
    margin: 50px 0;
    align-items: baseline;
}

.dias-semana h3 {
    font-family: 'Roboto';
    padding: 10px 25px;
    color: #000;
    font-size: 30px;
    font-weight: 800;
}

.dias-semana a {
    background: #28a745;
    padding: 10px 25px;
    color: #fff;
    border-radius: 10px;
    font-family: 'Roboto';
}

.nossos-patro {
    background: #8c86c2;
}

.nossos-patro h2 {
    text-align: center;
    font-family: 'Roboto';
    padding: 20px;
    color: #fff;
    font-weight: 900;
    font-size: 40px;
}

#patrocinio {
    height: auto;
    margin: auto;
    overflow: hidden;
}

#patrocinio .logo {
    display: flex;
    animation: scroll 40s linear infinite;
    -webkit-animation: scroll 40s linear infinite;
    width: calc(200px * 30);
}

.logo {
    padding: 10px;
    margin-bottom: 30px;
}

/*patrocinio*/
section#patrocinio {
    text-align: center;
}

.logo-patr-1 {
    margin-top: -120px;
}

.logo-patr-1 img {
    margin: -100px 0;
}

.logo-patr-1 h3 {
    color: #000 !important;
    z-index: 9;
    font-size: 20px;
}

.logo-patr-2 h3 {
    font-size: 20px;
}

.logo-patr-2 {
    display: flex;
    justify-content: center;
    margin-top: -120px;
}

.logo-patr-2 img {
    width: 230px;
}

.logo-patr-3 {
    display: flex;
    justify-content: center;
    margin-top: 5px;
}

.logo-patr-3 img {
    width: 160px;
}

.logo-patr-3 h3 {
    font-size: 20px;
}

.logo-patr-4 h3 {
    font-size: 20px;
}

.logo-patr h3 {
    font-size: 20px;
}

.logo-patr-4 {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    }

.logo-patr-4 img {
    width: 130px;
    margin: 0 15px;
}

.logo-patr-4-2 {
    margin-bottom: 30px;
}

.logo-patr-4-2 img {
    width: 130px;
    margin: 0 15px;
}

.logo-patr-5 h3 {
    font-size: 20px;
}

.logo-patr-5 img {
    width: 140px;
}

.logo-patr-6 img {
    width: 120px;
}

.logo-patr-6 h3 {
    font-size: 20px;
}

.logo-patr-7 img {
    width: 100px;
}

.logo-patr-7 h3 {
    font-size: 20px;
}


.map-festa {
    display: flex;
    justify-content: center;
    margin: 50px 0;
}

.map-festa img {
    width: 60%;
}

section.video {
    background: #d3d3d3;
}

section.img-cardapio {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    color: #c00103;
    background-image: url(../imagens/festa-junina.jpg);
    width: 100%;
    padding: 35px;
    background-size: cover;
}

.texto-info-video {
    font-family: roboto, sans-serif;
    color: #a60000;
}

section.galeria-videos h2 {
    color: #c00201;
    font-weight: 700;
}

.video-info {
    margin-top: -30px;
    margin-bottom: 60px;
}

.texto-info-video i {
    font-size: 40px;
    margin-left: 30px;
}

.video-lin {
    display: flex;
    align-items: center;
    padding: 15px 0;
}

section.img-cardapio h1 {
    font-size: 40px;
    font-weight: 900;
    color: yellow;
    margin-bottom: 30px;
}

section.img-cardapio img {
    width: 500px;
    max-width: 100%;
}

.ttl-img {
    text-align: center;
    font-family: 'Roboto';
    font-weight: 500;
    letter-spacing: 4px;
    color: #8a85bd;
    margin-top: 50px;
}

.ttl-img h2 {
    font-family: 'Roboto';
    font-weight: 900;
    letter-spacing: 4px;
    font-size: 45px;
    color: #be0401;
}

.img-mont {
    display: flex;
    margin-bottom: 30px;
}

.linha-chm-whats {
    padding: 10px;
    margin: 10px 0;
    background: #8c86c2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.linha-info {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background: #8c86c2;
}

.linha-chm-whats a {
    background: #28a745;
    padding: 10px 15px;
    border-radius: 5px;
    color: #fff;
    font-size: 18px;
    font-family: 'Roboto';
    text-decoration: none;
}

.linha-chm-whats a:hover {
    background: #037b3d;
}

.linha-chm-whats h3 {
    margin-top: 10px;
    color: #fff;
    font-family: 'Roboto';
    font-size: 40px;
    margin-bottom: 15px !important;
    font-weight: 900;
}

.logo-prop-fest {
    display: flex;
    align-items: center;
    margin: 25px 0;
}

.prop-best-fest h3 {
    color: #a60000;
    font-family: 'Roboto';
    font-size: 35px;
}

.img-logo-custom {
    width: 100%;
    text-align: center;
}

.cx-img img {
    width: 100%;
}

.img-logo-custom img {
    width: 400px;
}

.prop-best-fest {
    text-align: center;
    width: 100%;
}
.botao01 {
    background: #087e00;
    color: #fff;
    padding: 15px 30px;
    display: block;
    text-decoration: none;
    border-radius: 12px;
    font-size: 19px;
}
.botao01:hover {
    background: #065b00;
}

ul.menu-galeria {
    display: flex;
    justify-content: center;
}

li.bot-nav {
    width: 150px;
    text-align: center;
}

.cx-bandas img {
    width: 100%;
}

.cx-bandas-pc2 img {
    width: 100%;
}

.cx-bandas img {
    width: 100%;
    border: 10px solid #ffcc29;
    padding: 0px;
    border-radius: 20px;
}

.cx-bandas-pc2 img {
    width: 100%;
    border: 10px solid #5cc6d0;
    padding: 0px;
    border-radius: 20px;
}

.titulo-bar {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.titulo-con {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

li.bot-nav a {
    margin-right: 10px;
    font-weight: 600;
    font-size: 20px;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: #c00201 !important;
    color: #fff !important;
}

a.nav-link {
    color: #000;
}

a.nav-link:hover {
    color: #c00201 !important; 
}

.icon-rds a {
    text-decoration: none;
}

.container {
    padding: 30px 20px;
}

.text {
    font-size: 24px;
    margin: 30px 0;
    opacity: 0;
    transform: translateX(-50px);
}
.right {
    transform: translateX(50px);
}

.pulsando {
    animation: pulse 1s infinite alternate ease-in-out;
}

/* palco */
.ribbon1 {
    font-size: 28px;
    font-weight: bold;
    color: #000;
  }
  .ribbon1 {
    --s: 1.8em;
    --d: .8em;
    --c: .8em;
    padding: var(--d) calc(var(--s) + .5em) 0;
    line-height: 1.8;
    background: conic-gradient(from 45deg at left var(--s) top var(--d), #0008 12.5%, #0000 0 37.5%, #0004 0) 0 / 50% 100% no-repeat, conic-gradient(from -45deg at right var(--s) top var(--d), #0004 62.5%, #0000 0 87.5%, #0008 0) 100% / 50% 100% no-repeat;
    clip-path: polygon(0 0, calc(var(--s) + var(--d)) 0, calc(var(--s) + var(--d)) var(--d), calc(100% - var(--s) - var(--d)) var(--d), calc(100% - var(--s) - var(--d)) 0, 100% 0, calc(100% - var(--c)) calc(50% - var(--d) / 2), 100% calc(100% - var(--d)), calc(100% - var(--s)) calc(100% - var(--d)), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--d)), 0 calc(100% - var(--d)), var(--c) calc(50% - var(--d) / 2));
    background-color: #ffcc29;
    width: fit-content;
}

.ribbon2 {
    font-size: 28px;
    font-weight: bold;
    color: #000;
  }
  .ribbon2 {
    --s: 1.8em;
    --d: .8em;
    --c: .8em;
    padding: var(--d) calc(var(--s) + .5em) 0;
    line-height: 1.8;
    background: conic-gradient(from 45deg at left var(--s) top var(--d), #0008 12.5%, #0000 0 37.5%, #0004 0) 0 / 50% 100% no-repeat, conic-gradient(from -45deg at right var(--s) top var(--d), #0004 62.5%, #0000 0 87.5%, #0008 0) 100% / 50% 100% no-repeat;
    clip-path: polygon(0 0, calc(var(--s) + var(--d)) 0, calc(var(--s) + var(--d)) var(--d), calc(100% - var(--s) - var(--d)) var(--d), calc(100% - var(--s) - var(--d)) 0, 100% 0, calc(100% - var(--c)) calc(50% - var(--d) / 2), 100% calc(100% - var(--d)), calc(100% - var(--s)) calc(100% - var(--d)), calc(100% - var(--s)) 100%, var(--s) 100%, var(--s) calc(100% - var(--d)), 0 calc(100% - var(--d)), var(--c) calc(50% - var(--d) / 2));
    background-color: #5cc6d0;
    width: fit-content;
}
/* teste */

/* data */
.cx-bandas h3, .cx-bandas-pc2 h3 {
    font-weight: 800;
}

.cx-bandas, .cx-bandas-pc2 {
    position: relative;
    margin-bottom: 40px;
}

.ribbon3 {
    position: absolute;
    top: 26px;
    background: #ffcc29;
    font-size: 27px;
    padding: 5px 15px;
    font-weight: 700;
}
  
  .left1 {
    left: 16px;
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-30deg);
    transform-origin: 100% 100%;
}
.ribbon4 {
    position: absolute;
    top: 26px;
    background: #5cc6d0;
    font-size: 27px;
    padding: 5px 15px;
    font-weight: 700;
}
  
  .left2 {
    left: 16px;
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-30deg);
    transform-origin: 100% 100%;
}

div#bg-img-responsivo {
        display: none;
}

@keyframes pulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

.anc a {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 10px 15px;
    font-size: 20px;
}


@media only screen and (max-width: 768px) {
    .datas-semana {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 30px;
}
    
.cx-img img {
        width: 100%;
}
    
#bg-img {
        display: none;
}

    div#bg-img-responsivo {
        background-image: url(../imagens/img-back-resp.png);
        width: 100%;
        min-height: 1000px;
        background-size: cover;
        background-position: center;
        display: block;
    }
    .logo-prop-fest {
        display: flex;
        flex-direction: column;
    }

    .linha-chm-whats {
        text-align: center;
    }

    section.fim-sem {
        display: flex;
        flex-direction: column;
    }

    .dia-sem {
        margin-bottom: 10px;
    }

    .festa-2024 {
        padding: 20px;
    }

    .img-logo img {
        width: 400px;
        margin-top: 65px;
        max-width: 80%;
    }

    .img-logo-custom img {
        width: 400px;
        max-width: 80%;
    }

    .datas {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .datas h1 {
        font-size: 35px;
    }

    .txt-rds h4 {
        font-size: 25px;
    }
   
    .txt-rds {
        margin-top: 10px;
    }

    .opc-compra h2 {
        font-size: 25px;
    }

    .linha-info {
        display: flex;
        flex-direction: column;
    }

    .linha-chm-whats {
        margin: 0px 0;
    }

    .opc-compra {
        text-align: center;
        margin-bottom: 30px;
    }

    #bg-img {
        background-image: url(imagens/festa-junina-2024-bg.png);
        padding: 10px;
    }

    .dias-semana {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dias-semana h3 {
        font-size: 20px;
        text-align: center;
    }

    .semana-festa {
        display: flex;
        flex-direction: column;
    }

    .titulo-bar h1 {
        font-size: 25px;
    }

    .titulo-bar span {
        font-size: 17px;
    }

    .titulo-con h1 {
        font-size: 25px;
    }
    
    .titulo-con span {
        font-size: 17px;
    }

    .festa-2024-img img {
        width: 100%;
    }

    .map-festa img {
        width: 100%;
    }

    .img-artistas {
        padding: 10px 0;
    }
    .prop-best-fest h3 {
        font-size: 30px;
        padding: 10px 0;
    }

    .img-artistas img {
        width: 100%;
    } 
    
    section#patrocinio-destaque {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .logo-patr-1 img {
        margin: -100px;
    }

    .img-mont {
        display: none;
    }

    .ttl-img {
        display: none;
    }

    section.atrac-infantis h2 {
        font-size: 25px;
    }
}