@charset "utf-8";

@font-face{
    font-family: "PoppinsBlack";
    src: url("/pc/fonts/Poppins-Black.ttf");
    }
@font-face{
    font-family: "PoppinsLight";
    src: url("/pc/fonts/Poppins-ExtraLight.ttf");
}

@font-face{
    font-family: "PoppinsBold";
    src: url("/pc/fonts/Poppins-Bold.ttf");
}

@font-face{
    font-family: "LeagueGothic";
    src: url("/pc/fonts/LeagueGothic-Regular.ttf");
}

@font-face{
    font-family: "beton-cg";
    src: url("/pc/fonts/beton-cg.otf");
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: PoppinsLight;
    font-weight: 600;    
}

:root{
    --cor1: #ffffff;
    --cor2: #ff0000;
    --cor2a: #ff0000b7;
    --cor3: #ff8400;
    --cor4: #ff52f9;
    --cor5: #00d5db;
    --cor6: #00ff60;
    --cor7: #ffe400;
    --cor8: #000000b7;
    --cor9: #000000;
    --cor10: #0f0f0f;
}

html{
    font-size: 62.5%;
    overflow-x: hidden;

    -webkit-user-select: none;  
	-moz-user-select: none;     
	-ms-user-select: none;      
	user-select: none;
}

body{
    background: var(--cor10);
    color: var(--cor1);
}

section{
    height: 100vh;
    padding: 10rem 9% 2rem;
}

.header-topo{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 50px;
    padding: .5rem 9%;
    background: var(--cor9);
    display: flex;
    justify-content: center;
    align-items: center;    
    z-index: 100;
}

.h-topo{
    width: 900px;
    display: flex;
    justify-content: center;
    align-items: center;
    & ul{
        display: flex;
        justify-content: center;
        list-style: none;
    }
}

.h-item {
    margin: 0 15px;
    display: flex;
    justify-content: center;
    align-items: center; 
    & img{
        width: 22px;
        height: 22px;
    }
}

.h-topo span{
    font-family: Poppins;
    font-size: 2.1rem;
    font-weight: 400;
    color: var(--cor1);
}
.h-topo .esp{
    width:25px;
}

.h-topo .tel3, .h-topo .tel4{
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;    
    text-align: center;
    margin: 0 auto;
    cursor: pointer;
    font-family: PoppinsBold;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--cor1);  
    
}

.tel3:hover, .tel4:hover{
    color: var(--cor7);

}

.header{
    position: fixed;
    top: 50px;
    left: 0;
    width: 100vw;
    height: 60px;
    background: var(--cor8); 
    padding: 1rem 5%;
    border-bottom: 0.2rem solid var(--cor2);
    border-bottom-left-radius: 25%;
    border-bottom-right-radius: 25%; 
    display: flex;
    justify-content: space-between;
    align-items: center;  
    z-index: 100;
    transition: .3s ease;
}

.header.sticky{
    border-bottom: .1rem solid var(--cor2);
}

.nav-bar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    
}

.navbar a{
    font-size: 1.6rem;
    color: var(--cor1);
    transition: .3s;
}

.navbar a:hover,
.navbar a.active{
    color: var(--cor7);
}

.face, .insta{
    width: 25px;
    height: 25px;
    margin: 0 15px;
    cursor: pointer;
}

.nav-list {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    & ul{
        display: flex;
        justify-content: center;
        list-style: none;
    }
}
.nav-item {
    margin: 0 15px;
    & img{
        width: 20px;
        height: 20px;
    }
    & .sobre2{
        width: 50px;
        height: 20px;
    }
}

.nav-redes{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
}

.esp{
    width: 2rem;
    text-align: center;
}

.divisao{
    font-family: PoppinsLight;
    font-weight: 700;
    font-size: 2.0rem;
    color: var(--cor1);
}

#circulo{
    width: 22rem;
    height: 10rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--cor9);
    border-radius: 50%;
    margin-top: 5rem;
    border-bottom: 0.2rem solid var(--cor2);
    border-right: 0.2rem solid var(--cor2);
}

.logo{
    width: 200px;
    height: 60px;
}

.mobile-icon{
    display: none;
}

.mobile-menu{
    display: none;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 450px;
    background: url("/pc/images/bandeira1.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    padding: 10px;
    border-bottom-right-radius: 25px;
    border-bottom-left-radius: 25px;
    margin-top: 48rem;
    transition: .3s;
    border: 0.2rem solid var(--cor2);
    & a{
        font-size: 1.6rem;
        color: var(--cor1);
        transition: .3s;
    }
    & a:hover, a.active{
        color: var(--cor7);
    }
    & ul{
        display: flex;
        justify-content: center;
        list-style: none;
    }
}

/* HOME */

.home{
    top: 50px;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;   
    
}

.grupoC{
    position: absolute;
    width: 100%;
    height: 540px;
    display: block;
    justify-content: center;
    align-items: center;
    left: 80%;
    z-index: 5;
    & .grupoc{
        width: 30rem;
        height: 33rem;
    }   
}

.bt-Saiba{
    cursor: pointer;
    width: 120px;
    height: 40px;
    background: #ffd000;
    border-radius: 5px;
    font-family: LeagueGothic;
    font-size: 3.2rem;
    font-weight: 500;
    color: #000000;
    text-align: center;
    margin-left: 10rem;
}

.home-content{
    line-height: 1.2;
    text-align: center;
    z-index: 2;
}

.sauda{
    margin-top: -30rem;
}

.sauda h1{
    font-family: LeagueGothic;
    font-size: 6.2rem;
    font-weight: 700;
    top: 60px;
    & #saudacao{
        font-family: LeagueGothic;
        font-size: 6.2rem;
        font-weight: 700;
        color: var(--cor1);        
    }
}

.sauda h3{
    font-size: 3.2rem;
    font-weight: 400;
}

.fundo-slider{
    position: absolute;
    width: 100%;
    border: 0;
    margin: 0;
    top: 0;
    & .slider{
        width: 100%;
        height: 100vh;
        object-fit: cover;        
    }
}


/* SOBRE */

.sobre{
    width: 100%;
    height: 100vh;
}

.fundo-sobre{
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 100vh;
    left: 0;
    z-index: -1;
    & .img-sobre{
        width: 100%;
        height: 100%;
    }
}

.sobre-content{
    width: 100%;
    height: 100vh;
}

.sobre-content h1{
    font-size: 5.0rem;
    font-family: LeagueGothic;
    font-weight: 500;
    color: var(--cor9);
    text-align: center;
    margin-top: 2rem;
}

.sobre-content .texto{
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    margin-top: -8rem;
    & .i1{
        width: 25%;
    }
    & .i2{
        width: 75%;
    }
}

.sobre-content .texto p{
    max-height: 600px;        
    column-count: 2;
    font-size: 3rem;
    font-family: LeagueGothic;
    font-weight: 400;
    color: var(--cor9);
    line-height: 1.0;
    text-shadow: 1px 1px var(--cor7);
}

.sobre-content .texto p span{
    font-weight: 600;
    font-size: 3.5rem;
    font-family: LeagueGothic;
    color: var(--cor2);
    /*text-shadow: 2px 2px var(--cor9);*/
}

.sobre-content .texto .img2-texto{
    margin-left: -8rem;
}

/* Transmissão */

.transmissao{
    width: 100%;
    height: 117vh;
    justify-content: center;
    align-items: center;   
    
}

.fundo-preto{
    position: absolute;
    width: 100%;
    height: 117vh;
    border: 0;
    margin: 0;
    top: 200vh;
    left: 0;
    background: var(--cor9);
    opacity: 0.5;
    z-index: -1;
}

.fundo{
    position: absolute;
    width: 100%;
    height: 117vh;
    border: 0;
    margin: 0;
    top: 200vh;
    left: 0;
    z-index: -2;
    & video{
        width: 100%;
        height: 117vh;
        object-fit: cover; 
        animation-iteration-count: infinite;       
    }

}

.transmissao h1{
    width: 100%;
    display: flex;
    justify-content: center;
}

.transmissao .titulo{
    width: 20%;
    height: 20%;
    margin-top: 2.5rem;   
}

.transmissao .CA{
    width: 100%;
    height: 2.8rem;
    text-align: center;
    display: flex;
    justify-content: center;        
    & .ca{
        font-family: PoppinsBold;
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--cor9);
        background: var(--cor7);
        border-radius: 50px;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

.conteudo{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    & .terça{
        width: 400px;
        height: 150px;
    }
    & .horario{
        width: 150px;
        height: 77px;       
    }
}

.conteudo2{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    & .quinta{
        width: 400px;
        height: 150px;
    }
    & .horario{
        width: 150px;
        height: 77px;
    }
}

.linha{
    width: 100%;
    height: 0.2rem;
    background: var(--cor7);
}

.line{
    padding-left: 5rem;
}

.BT{
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center; 
    text-align: center;
    
    & .bt_youtube{
        cursor: pointer;
        width: 500px;
        height: 4.1rem;
        background: var(--cor2);
        border-radius: 50px;
        transition: .3s;        
    }   
    & .bt{
        font-family: PoppinsBold;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--cor1);
        transition: .3s;
    }
}

.bt_youtube:hover{
    background: var(--cor7);
    & .bt{
        color: var(--cor9);
    }
}

/* BLOG */

.blog{
    width: 100%;
    height: 105vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--cor9);    
}

.pgBlog{
    width: 100%;
    height: 90vh;
    border: 0.2rem solid var(--cor10);
}

/* LOJA */

.loja{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center; 
    /*background: linear-gradient(to bottom, var(--cor9)60%, var(--cor10)100%);*/
    background: url("/pc/images/fundo_home_produto.jpg");
    background-size: cover;
    background-position: center;
}

.titulo-content{
    width: 100%;
    text-align: center;
    & #titulo{
        font-family: PoppinsBold;
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 0.9em;
        color: var(--cor1);  
    }
    & .c1{
        font-family: PoppinsBlack;
        font-size: 3.2rem;
        font-weight: 700;
        line-height: 0.9em;
        color: var(--cor2);
    }
    & .logo-texto{
        width: auto;
        height: 100px;
    }
}

.produtos{
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;    
    margin-top: 3rem;
}

.produtos h1{
    font-family: PoppinsBlack;
    font-size: 3.5rem;
    text-align: center;
}

.d1{
    font-family: PoppinsLight;
    font-size: 3.5rem;
    color: var(--cor2);
    margin-bottom: 10px;
}

.bts{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 10px;
}

.bts button{
    position: absolute;    
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--cor7);
    border: none;
    color: var(--cor9);
    font-family: PoppinsLight;
    font-size: 2.2em;
    font-weight: 700;
    transition: .3s;
}

.bts button:hover{
    background: var(--cor2);
    color: var(--cor1);
}

#tb-produtos{
    width: 100%;    
    display: flex;
    justify-content: center;
    align-items: center;          
}

#tb2-produtos{
    width: 100%;    
    display: flex;
    justify-content: center;
    align-items: center;        
}

#tb3-produtos{
    width: 100%;    
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5rem;          
}

.list-produtos{
    width: 100%;    
    display: block;
    justify-content: center;
    align-items: center;
}

.lista-slots{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;    
}

.lista-slots .item{
    cursor: pointer;
    width: 220px;
    height: 250px;
    scale: 0.9;
    flex-shrink: 0;
    position: relative;    
    border-radius: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 20px;
    border: 0.2rem solid var(--cor7);
}
.item:hover{
   box-shadow: 0 0 4rem var(--cor2);
   border: 0.2rem solid var(--cor2);  
}

.lista-slots .item img{
    width: 100%;
    height: 100%;
    object-fit: cover;    
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 18px;    
}
.lista-slots .item .content{
    background: var(--cor2);
    color: #fff;
    position: absolute;
    bottom: 5px;
    left: 5px;
    right: 5px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 18px; 
}
.lista-slots .item .content .title{
    font-family: PoppinsBold;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--cor1);
    padding-left: 10px;
}

/*Contato*/

.Contato{
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background: url("/pc/images/fundo-contato.jpg");
    background-size: cover;
    background-position: center;
}

.conteudo-contato{
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}

.conteudo-contato .titulo-contato{
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: PoppinsBlack;
    font-size: 4.5rem;
    font-weight: 700;
    text-align: center;
    color: var(--cor7);
}

.conteudo-contato .endereco{
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: PoppinsBold;
    font-size: 2.8rem;
    font-weight: 700;
    text-align: center;
    color: var(--cor1);
}

.conteudo-contato .horario{
    width: 100%;
    justify-content: center;
    align-items: center;
    font-family: PoppinsBlack;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor1);
    text-align: center;
    & .lojaA{
        font-family: PoppinsBold;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--cor7);
    }

    & .lojaF{
        font-family: PoppinsBold;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--cor7);
    }
    
}

.titulo-telefone{
    width: 100%;
    font-family: PoppinsBold;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cor7);
    text-align: center;    
    
}

.tel, .tel2{
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;    
    text-align: center;
    margin: 0 auto;
    & span{
        cursor: pointer;
        font-family: PoppinsBold;
        font-size: 2.1rem;
        font-weight: 700;
        color: var(--cor1);
    }
    & span:hover{
        color: var(--cor7);
    }
    & .whats{
        cursor: pointer;
        width: 35px;
        height: 35px;
        padding: 5px;
    }
}


/*Rodapé*/

.rodape{
    background: linear-gradient(
        to bottom,
        var(--cor10) 15%,
        var(--cor9)
    );
    width: 100%;
    min-height: 300px;
    padding: 2rem 9% 2rem;
    display: flex;
    justify-content: center;
    align-items: center;    
    text-align: center;
    & .logo1{
        width: 200px;
        height: 200px;
    }
    & p, span{
        font-family: PoppinsBold;
        font-size: 2.0rem;
    }
    & .tb-rodape{
        width: 100%;
        height: 100px;
    }
}

.by{
    display: flex;
    justify-content: center;
    align-items: center;
    & span{        
        font-size: 1.5rem;
    }
    & img{
        width: 50px;
        height: 50px;
        padding: 5px;
    }
}