@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");
}

*{
    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;
    --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{
    position: fixed;
    top: 0;
    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;
}

.tb-nav {
    width: 100%;
    display: flex;
    justify-content: right;
    text-align: center;
    & img{
        width: 20px;
        height: 20px;
    }    
}

.bt_fechar{
    cursor: pointer;
    width: 150px;    
}

.bt_fechar span{
    font-family: PoppinsBold;
    font-size: 2.6rem;
    color: var(--cor1);
    transition: .3s;
}

.bt_fechar:hover,
.bt_fechar.active{
    color: var(--cor7);
    & span{
        color: var(--cor7);
    }
}

.navbar{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
    text-align: center;
    padding: 2rem 20% 2rem;
}

.titulo-numero{
    font-family: PoppinsBold;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--cor7);
}

.tel{
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;    
    text-align: center;
    padding-right: 5rem;
    & .nu-tel{
        cursor: pointer;
        font-family: PoppinsLight;
        font-size: 2.1rem;
        font-weight: 700;
        padding-left: 10px;
    }
    & .nu-tel:hover{
        color: var(--cor7);
    }
    & .whats{
        cursor: pointer;
        width: 35px;
        height: 35px;
        padding: 5px;
    }    
}

.tel:hover{
    color: var(--cor7);
    & .nu-tel{
        color: var(--cor7);
    }
}

.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;
}

.titulo-header{
    font-family: PoppinsBold;
    font-size: 2.1rem;
    color: var(--cor7);
}

/*Conteudo*/

.home{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
}

.home-content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;    
   
}

.fundoP{
    position: fixed;
    width: 100%;
    height: 100%;
    border: 0;
    margin: 0;
    top: 0;
    left: 0;
    z-index: -2;
}

.fundo{    
    width: 100%;
    height: 100%;    
    & video{
        width: 1366px;
        height: 800px;
        object-fit: cover;
        scale: 1.8;    
    }
}

.tb-pilotos{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    top: 0;
}

.f1{
    padding: 1px;
    scale: 0.85;
    border: 0.2rem solid var(--cor2);
}

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

/*Rodapé*/

.rodape{
    background: linear-gradient(
        to bottom,
        var(--cor10) 15%,
        var(--cor9)
    );
    width: 100%;
    min-height: 300px;
    padding: 2rem 1% 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;
    }
}