/* config */
@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype')
}

@font-face {
	font-family: Poppins;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype')
}
@font-face {
	font-family: Barlow;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Barlow/Barlow-Regular.ttf') format('truetype')
}

@font-face {
	font-family: Barlow;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/Barlow/Barlow-Bold.ttf') format('truetype')
}
body{
	width: 1080px;
	height: 1920px;
	overflow: hidden;
	background-image: url('../images/Fundo-01.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	font-family: 'Barlow';
	font-weight: 700;
}
body.final{
	background-image: url('../images/Fundo-02-Final.png');
}
.libre{
	font-family: Poppins;
}

.modal p {
	font-size: 12px;
    font-weight: 400;
    margin-bottom: 10px;
}
#maintenance {
	position: absolute;
    background: #fff;
    top: -110px;
    width: 100vw;
    height: 1160px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99;
    font-size: 100px;
	flex-direction: column;
}
.regular{
	font-weight: 400;
}
.logo{
	width: 590px;
	display: block;
	margin: auto;
}
.arrowCenter{
	width: 80px;
	display: block;
	margin: auto;
}
#arrowDown>div{
	color: #28235d;
	font-weight: 700;
	text-align: center;
	font-size: 28px;
	margin-bottom: 8px;
}
.canvasPosition{
	top: 0;
    position: relative;
    z-index: -1;
	width: 100%;
	height: 860px;
	display: flex;
	justify-content: center;
}
.canvasPosition canvas{
	z-index: 1;
}
.centerSpin{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 2;
	width: 130px;
}
#form .startTitle, #success .startTitle{
	color: #28235d;
	font-size: 50px;
	text-align: center;
}
#form .startText{
	color: #28235d;
	padding: 0 120px;
	font-size: 30px;
}
#success .startText{
	color: #172c1b;
	font-size: 50px;
    text-align: center;
}
#success{
	padding: 0 120px;
}
.tudoPronto {
	width: 70px;
	display: block;
	margin: auto;
}
.carimboTribus {
	width: 300px;
	display: block;
	margin-left: auto;
}
.titlePrize{
	font-family: Barlow;
	color: #fabd00;
	font-size: 50px;
    text-align: center;
}
.textPrize{
	color: #ffffff;
	font-size: 60px;
	font-family: 'Poppins';
}
.opacity0{
	opacity: 0;
}
#prize{
	position: absolute;
	background: url('../images/Fundo-Roda.svg');
	width: 885px;
	height: 885px;
	z-index: 3;
	border-radius: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 30px;
}
.bgSpin{
	position: absolute;
	width: 885px;
	height: 885px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.byCritec{
	width: 180px;
	display: block;
	margin: auto;
}
.bottomSpin{
	position: relative;
	/* top: -250px; */
}
.btnGeral img {
	width: 46px;
	margin-right: 12px;
}
.btnGeral{
	position: relative;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
	padding: 24px 50px;
	background: #28235d;
	color: #ffffff;
	border-radius: 50px;
	width: fit-content;
	font-size: 32px;
	display: flex;
	text-transform: uppercase;
	font-family: Barlow;
}
.formInput{
	position: relative;
}
.formInput input{
	padding: 10px 15px 10px 48px;
	width: 100%;
	background: transparent;
	border: 0;
	border-bottom: 1px solid #28235d;
	color: #28235d;
	font-family: Poppins;
	font-weight: 700;
	font-size: 30px;
}
.formInput input::placeholder{
	color: #28235d;
}
.formInput img{
	width: 30px;
	height: 40px;
	position: absolute;
	bottom: 14px;
	left: 0;
}
.formInput input:focus-visible,
.formInput input:focus{
	outline: none;
	box-shadow: none;
}
.rgpd input{
	margin-right: 12px;
}
.rgpd label, .rgpd label a{
	color: #28235d;
}
.rgpd a{
	text-decoration: underline !important;
	margin-left: 4px;
}
#ok {
    transform: translateX(-50%) translateY(-250px);
}
.rgpd{
	display: flex;
	position: relative;
}
.formInput label.error{
	position: absolute;
	bottom: -45px;
	left: 0;
	font-size: 24px;
	font-weight: 400;
	color: red;
}
.rgpd label.error {
	position: absolute;
	bottom: -30px;
	left: 0;
	font-size: 15px;
	font-weight: 400;
	color: red;
}
.simple-keyboard{
	height: 370px;
}
.ui-keyboard{
	left: 0;
	right: 0;
	bottom: 370px;
	transform: scale(1.8);
}

.checkbox-round {
	width: 1.3em;
	height: 1.3em;
	background-color: #ffffff;
	border-radius: 50%;
	vertical-align: middle;
	border: 1px solid #28235d;
	appearance: none;
	-webkit-appearance: none;
	outline: none;
	cursor: pointer;
}

.checkbox-round:checked {
	background-color: #172c1b;
}
#form form{
	padding: 0 120px;
}

td.the_wheel
{
    background-image: url(../images/wheel_back.png);
    background-position: center;
    background-repeat: none;
}


/* Do some css reset on selected elements */
h1, p
{
    margin: 0;
}

div.power_controls
{
    margin-right:70px;
}

div.html5_logo
{
    margin-left:70px;
}

/* Styles for the power selection controls */
table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}

table.power th
{
    background-color: white;
    cursor: default;
}

td.pw1
{
    background-color: #6fe8f0;
}

td.pw2
{
    background-color: #86ef6f;
}

td.pw3
{
    background-color: #ef6f6f;
}

/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}

/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}

/*style*/

/*BO3 SPACERS*/
.spacer150 {grid-column: inherit; height: 150px;width: 100%;}
.spacer120 {grid-column: inherit; height: 120px;width: 100%;}
.spacer90 {grid-column: inherit; height: 90px;width: 100%;}
.spacer60 {grid-column: inherit; height: 60px;width: 100%;}
.spacer30 {grid-column: inherit;height: 30px;width: 100%;}
.spacer15 {grid-column: inherit;height: 15px;width: 100%;}

/* LARGE DISPLAY'S */
@media (max-width: 1200px) {
	.lg-spacer150 {height: 150px;}
	.lg-spacer120 {height: 120px;}
	.lg-spacer90 {height: 90px;}
	.lg-spacer60 {height: 60px;}
	.lg-spacer30 {height: 30px;}
	.lg-spacer15 {height: 15px;}

	.lg-block150 {display: inline-block; width: 150px;}
	.lg-block120 {display: inline-block; width: 120px;}
	.lg-block90 {display: inline-block; width: 90px;}
	.lg-block60 {display: inline-block; width: 60px;}
	.lg-block30 {display: inline-block; width: 30px;}
	.lg-block15 {display: inline-block; width: 15px;}

	.lg-taleft {text-align: left;}
	.lg-tacenter {text-align: center;}
	.lg-taright {text-align: right;}
	.lg-tajustify {text-align: justify;}
}

/* DESKTOP */
@media (max-width: 992px) {
	.md-spacer150 {height: 150px;}
	.md-spacer120 {height: 120px;}
	.md-spacer90 {height: 90px;}
	.md-spacer60 {height: 60px;}
	.md-spacer30 {height: 30px;}
	.md-spacer15 {height: 15px;}

	.md-block150 {display: inline-block; width: 150px;}
	.md-block120 {display: inline-block; width: 120px;}
	.md-block90 {display: inline-block; width: 90px;}
	.md-block60 {display: inline-block; width: 60px;}
	.md-block30 {display: inline-block; width: 30px;}
	.md-block15 {display: inline-block; width: 15px;}

	.md-taleft {text-align: left;}
	.md-tacenter {text-align: center;}
	.md-taright {text-align: right;}
	.md-tajustify {text-align: justify;}
}

/* TABLET */
@media (max-width: 768px) {
	.sm-spacer150 {height: 150px;}
	.sm-spacer120 {height: 120px;}
	.sm-spacer90 {height: 90px;}
	.sm-spacer60 {height: 60px;}
	.sm-spacer30 {height: 30px;}
	.sm-spacer15 {height: 15px;}

	.sm-block150 {display: inline-block; width: 150px;}
	.sm-block120 {display: inline-block; width: 120px;}
	.sm-block90 {display: inline-block; width: 90px;}
	.sm-block60 {display: inline-block; width: 60px;}
	.sm-block30 {display: inline-block; width: 30px;}
	.sm-block15 {display: inline-block; width: 15px;}

	.sm-taleft {text-align: left;}
	.sm-tacenter {text-align: center;}
	.sm-taright {text-align: right;}
	.sm-tajustify {text-align: justify;}
}

/* MOBILE */
@media (max-width: 420px) {
	.xs-spacer150 {height: 150px;}
	.xs-spacer120 {height: 120px;}
	.xs-spacer90 {height: 90px;}
	.xs-spacer60 {height: 60px;}
	.xs-spacer30 {height: 30px;}
	.xs-spacer15 {height: 15px;}

	.xs-block150 {display: inline-block; width: 150px;}
	.xs-block120 {display: inline-block; width: 120px;}
	.xs-block90 {display: inline-block; width: 90px;}
	.xs-block60 {display: inline-block; width: 60px;}
	.xs-block30 {display: inline-block; width: 30px;}
	.xs-block15 {display: inline-block; width: 15px;}

	.xs-taleft {text-align: left;}
	.xs-tacenter {text-align: center;}
	.xs-taright {text-align: right;}
	.xs-tajustify {text-align: justify;}
}

img {
	max-width: 100%;
}