@import url('https://fonts.googleapis.com/css2?family=Brinnan:ital,wght@1,400&display=swap'); 


@font-face {
    font-family: 'brinnanblack';
    src: url('../fonts/brinnan_black.woff2') format('woff2'),
         url('../fonts/brinnan_black.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'brinnanregular';
    src: url('../fonts/brinnan_regular.woff2') format('woff2'),
         url('../fonts/brinnan_regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.dataconfirma p {
	 font-family: 'brinnanregular';
	 color: white;
	 text-align: left;
	 font-size: 1em;
}

.dataconfirma span {
	 font-family: 'brinnanregular';
	 background-color: #ce2938;
}



body {
    font-family: 'Brinnan Oblique', sans-serif !important;
	font-size: 18px !important; 
}

html {
  scroll-behavior: smooth;
}


a {
    color: inherit; 
    text-decoration: none; 
}

a:hover {
    text-decoration: underline;
}
 
h1 {
    font-size: 35px !important;
    font-weight: 700 !important;
}

h2 {
    font-size: 22px !important; 
    font-weight: 500 !important;
}

h3 {
    font-size: 14px;
}

p {
	font-size: 13px; 
}


.bggeral {
	background-color: #00012e;
    background-image: url(/images/bandeira.png);
    background-repeat: no-repeat;
    background-size: 80%;  
	background-attachment: fixed;
}

.welcome {
	margin-top: 100px;
	margin-bottom: 100px;
	padding: 10px;
	text-align: center;
	line-height: 20px;
	color: white;
}

.welcome h1 {font-family: 'brinnanblack'; font-size: 1.2em !important;}
.welcome h2 {font-family: 'brinnanregular';  font-size: 1em !important;}

.pilotos {
	margin-top: 60px;
}

.pilotos h1	{
	font-family: 'brinnanregular';  font-size: 1.5em !important; color: white;}
}


.pilotosbg {
	
		margin-top: 60px;
}


.welcome h2 span {
    font-weight: 600;
    background-color: black;
    color: white;
    padding: 10px 10px 10px 10px;
    position: relative;
    top: 20px;
	font-size: 1.3em !important;
} 

.configuraQuiz {
	background-color: #0000005e; 
	color: white;
	font-size: 1em !important; 
	padding: 10px;
}

.configuraQuiz button {
    background-color: green;
    color: white;
    border: none;
    width: 100%;
    padding: 10px 0 10px 0;
    margin-top: 50px;
    margin-bottom: 50px;

}

.configuraQuiz h3 { 
	font-family: 'brinnanregular';
    font-size: 1.5em !important;
    margin-top: 50px;
    margin-bottom: 20px;
	background-color: #ce2938;
	padding: 5px;
}

.configuraQuiz .form-check-input {
    margin-top: 0.4rem ! Important;
    height: 20px;
    width: 25px;
    position: relative !Important;
    margin-left: 0;
 cursor: pointer;
}

.configuraQuiz label {
	font-family: 'brinnanregular' !important;
	font-size: 1.2em !important;
    margin-left: 8px;
    margin-top: 10px;  
}


.banners {
	margin-top:	60px;
	margin-bottom: 60px;	
}

.banners img {
    width: 100%;
    margin: 0 auto;
    display: table;
}


.metas {
	margin-bottom: 60px;
	background-color: #000000ab;
	padding: 60px 0px 60px 0px;
	}

.metas1, .metas2, .metas3, .metas4 {
	background-color: white;
}

.metas1 img, .metas2 img, .metas3 img, .metas4 img {
	width: 100%;
}

.metas1 {}
.metas2 {}
.metas3 {}
.metas4 {}




.logo-campanha img {
    margin: 0 auto;
    display: table;
    width: 70%;
    margin-top: 20px;
    padding: 10px;
}

.bg-color {
	background-color: black !important;
    color: white;
    font-family: 'brinnanregular';
    border-bottom: 2px solid;
    border-image: linear-gradient(to right, green, white, red) 1;
}

.bg-color a { 
	color: white !important;
}

.quiz h2 {
	color: white;
	font-family: 'brinnanregular';
}

		
#countdown {
            font-family: 'brinnanregular';
            color: white;
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
            display: flex;
            justify-content: center;
        }
        .countdown-item {
            margin: 0 40px; 
            text-align: center;
			background-color: #ffffff;
			padding: 10px 30px 10px 30px;
			border-bottom: 5px solid green;
			
        }
        .countdown-number {
            font-size: 48px;
            font-weight: bold;
			color: #ce2938; 
			margin-bottom: -10px;
        }
        .countdown-label {
            font-size: 16px;
			color: black;
        }		
		
		
.ranking-item img {
            border-radius: 50%;
            width: 100px;
            height: 100px;
        }
.profile-img {
            border-radius: 50%;
            width: 50px;
            height: 50px;
        } 
		
		
.login {
	background-color: #000000ab;
	padding: 60px;	
}		

.login button {
    background-color: #ce2938;
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 10px;
	font-family: 'brinnanregular';
}

.login button:hover {
    background-color: #129246;
}

.formlogin {
    width: 100%;
    padding: 10px;
    color: black;
    border-top: none;
    border-bottom: 6px solid green;
    border-left: none;
    border-right: none;
    outline: none;
}

.loginform {
    background-color: #414767;
    padding: 40px;
} 

#acesse {
	text-align: center;
	color: white;
	font-family: 'brinnanregular';
} 


img#avatar {  
    max-width: 300px; 
    margin: 0 auto;
    margin-bottom: -2px;
}


.card {
    background-color: #ffffffb0 !important;
    margin-top: 40px;
	padding: 20px 0 20px 0; 
}


.card-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-height: 1px;
    padding: 0 !important; 
}



h1.card-title {
    text-align: center;
    font-family: 'brinnanregular';
    background-color: #ce2938;
    color: white;
    padding: 5px 0 5px 0;
    margin-bottom: 5px;
}

h2.card-title { 
    text-align: center;
	font-weight: 600 !important;
}


p.card-text {
    text-align: center;
    font-size: 18px;
    margin-top: 0px;
    margin-bottom: 0px;
} 

p.card-text span {
    font-weight: 700;
    font-size: 40px;
    background-color: #212852;
    color: white;
    padding: 5px 15px 5px 15px;
}

.faixabg {
	background-color: #f1f1f1;
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 20px 0 20px 0;
}


.faixasbg {
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 20px 0 20px 0;
}


.nfaixabg {
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 20px 0 20px 0;
}


.nfaixasbg {
	margin-top: 60px;
	margin-bottom: 60px;
	padding: 20px 0 20px 0;
}		
	

.container-fluid { 
	padding-right: 0px !important;
    padding-left: 0px !important;
}


.meioncontent {
	padding-right: 100px !important;
    padding-left: 100px !important;
}

tabelageral {
    font-size: 12px !important;
}

.confirma td {
    font-size: 12px;
    padding: 10px 0px 3px 10px !Important;

}


.logo-topo {
    margin-top: 40px;
}
 
.logo-topo img {
	display: table;
	margin: 0 auto;
	max-width: 450px;
} 

button.confirma {
	width: 100%;
    background-color: #ce2938; 
    border: none;
    padding: 15px 0 15px 0;
	font-family: 'brinnanregular';
}
 
 
 
.confirmetext {
	margin-top: 50px;
} 
 
 
 
 button.confirma:hover {
    background-color: black;
	color: white;
	border: 1px solid white;
}
 
 
.confirmaform { 
    margin-top: 70px;
    margin-bottom: 70px;
} 
 
.formconfirma form {
    display: table;
    margin: 0 auto;
    width: 100%; 
}

.linhait {
	border-bottom: 5px solid; 
    border-image: linear-gradient(to right, green, white, red) 1;
	height: 5px; 
	width: 100%;
}

.topoClassificacao {
	color: white;
    text-align: center;
    font-family: 'brinnanregular';
    font-size: 10px;
}

.classificacao {
    background-color: #0000004a;
}  

.classificacao td {
	font-size: 2em;
    font-family: 'brinnanblack';
    text-align: center;
    color: white;
    padding: 0 !Important;
	vertical-align: middle !important; 
}  

.classificacao img {
    background-color: transparent;
    border: none;
    width: 180px !important;
    height: auto !important;
    margin: -18px 0 -18px 0;
}

.avatarranking {  
	width: 135px;
    height: 80px;
    background-size: cover;
    background-position: top;
	margin: 0 auto;
} 

.table td, .table th {
    border-top: 1px solid #ff022f52 !important;
}

.table thead th {
    font-size: 12px;
    text-align: center;
	color: white;
}

.progress {
    height: 20px;
    max-width: 80%;
    margin: 0 auto;
	height: 1.8em !Important; 
	
}

.progress-bar {
	background-color: green !important; 
}


.progress-bar-green { 
    background-color: green !important;
}

.progress-bar-yellow {
    background-color: yellow !important;
}

.progress-bar-red {
    background-color: red !important;
}


.regras {
	color: white;
}

.regras h1 {
	font-size: 1.3em !important;
	padding: 20px 0 0 0;
	font-family: 'brinnanregular';
}

#total {
	background-color: #ce29388c;
	font-weight: 600;
	text-align: center;
}

#total2 {
	background-color: #00800075;
	text-align: center;
}

#total2-1 {
	text-align: center;
}


.footer {
	background-color: #b12d3a;
	color: white;
	text-align: center;
	font-family: 'brinnanregular';
	font-size: 16px;
	padding: 10px; 
	
}


.regras p {
	font-size: 1em;
}

.btnquiz {
	background-color: #ce2938;
    width: 100%;
    border: none;
    border-radius: 0;
    padding: 10px;
    font-family: 'brinnanregular';
}



.uservendas {
	background-color: #000000ab;
		
}

.uservendas img {
	width: 100%;
}

.msgcorrida p {
	color: white;
	font-size: 1.5em;
	font-family: 'brinnanregular';
	margin: 0 auto;
	padding: 20px 0 20px 0;
	text-align: center;	
}

.msgcorrida span {
	font-size: 1.8em;
	font-family: 'brinnanblack';
}
 
.msgcorrida {
	background-color: #ff022f82;
}

.conquistas table {
	color: white;
	font-family: 'brinnanregular';
	background-color: #0000004a;
	
}


.welcomeuser {
    color: white;
    margin: 0 auto;
    display: table;
    margin-top: 20%; 
	font-family: 'brinnanregular';
}

.welcomeuser  h1 span{
	font-family: 'brinnanblack';
	font-size: 30px !important;
	
}

.welcomeuser h1 {
	font-size: 25px !important;
}

#tac {text-align: center;}

.log {
	width: 90%;
	margin: 0 auto;
}

.log table {
	color: white;
	text-align: center;
	font-family: 'brinnanregular';
	font-size: 0.8em;
}

.log th {
	font-size: 1em !important;
}

input#inputdados 
{
	width: 100%;
}

.btnanterior button {
	background-color: #b12d3a;
    color: white;
    padding: 10px 10px 10px 10px;
    position: relative;
    font-size: 1em !important;
	font-family: 'brinnanregular';
	border: none;
}

.btnanterior :hover {
	background-color: green;
    color: white;
}

/* Estilos para o slider */
        .slider-container {
            position: relative;
            width: 300px;
            margin: auto;
            overflow: hidden;
        }

        .slide {
            display: none;
            text-align: center;
            transition: opacity 1.5s ease-in-out;
        }

        .slide img {
            width: 80%;
        } 

        .slide h3 {
            margin: 10px 0 0 0;
        }

        .active {
            display: block;
            animation: fadeIn 1.5s ease-in-out;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }