header, figure, img { display: block; }

img {
	display: block;
	max-width: 100%;
}

a { text-decoration: none; }


.ff-light { font-family: 'gilroy-light'; }
.ff-regular { font-family: 'gilroy-regular'; }
.ff-bold { font-family: 'gilroy-bold'; }
.ff-xbold { font-family: 'gilroyextrabold'; }

.ff-globo-regular { font-family: 'GlobotipoTexto-Regular'; }
.ff-globo-bold { font-family: 'GlobotipoTexto-Bold'; }

.fs-sm { font-size: 18px; }
.fs-sm { font-size: 25px; }
.fs-m { font-size: 54px; }
.fs-l { font-size: 62px; }

@media (max-width: 920px) {
	.fs-sm { font-size: 13px; }
	.fs-sm { font-size: 18px; }
	.fs-m { font-size: 41px; }
	.fs-l { font-size: 54px; }
}

.color-snow { color: #fff; }
.color-grey { color: #A8A8A8; }
.color-red { color: #EE282B; }

.txt-upper { text-transform: uppercase; }
.txt-center { text-align: center; }

.mrg-t1 { margin-top: 1rem; }

body {
	height: 100vh;
	background: url('../images/scene.jpg') no-repeat center top;
}

@media ( min-width: 2000px ) {
	body { background-size: 100% auto; }
}

.wrapper { overflow: hidden; }

.container {
	max-width: 1160px;
	margin-right: auto;
	margin-left: auto;
	padding-right: 10px;
	padding-left: 10px;
}

.container-fluid {
	padding-right: 10px;
	padding-left: 10px;
}

.header { padding: 13px 0 0; }
@media ( min-width: 540px ) {
	.header { padding: 43px 0 35px; }
}

.center-img { margin-left: auto; margin-right: auto; }

.logo-play { width: 100px; margin-bottom: 15px; }
@media ( min-width: 540px ) {
	.logo-play { width: 165px; margin-bottom: 40px; }
}

.logo-quiz { width: 100px; }
@media ( min-width: 540px ) {
	.logo-quiz { width: auto; }
}

.img-teamboi { float: right; }

@media ( min-width: 2500px ) {
	.img-teamboi, .img-teamvo { height: calc(100vh - 335px) }
}

.box-externa {
	padding: 22px;
	position: relative;
	background-color: rgba(22, 22, 22);
	border-radius: 10px;

	/*min-width: 310px;*/

}

.box-interna {
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, .4);
	padding: 65px 59px;
	position: relative;
}

.box-externa:before, .box-interna:before, .box-interna:after {
	display: block;
	max-width: 326px;
	width: 90%;
	height: 15px;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	background-color: #161616;
	transform: translateX(-50%);
	content: '';
}

.box-externa:before { height: 21px; background: url('../images/img-bars-diagonal.png') repeat-x left top; }
.box-externa:before, .box-interna:before { top: -8px; }
.box-interna:after { max-width: 251px; bottom: -8px; }

.etapa1 { padding-bottom: 60px; }
.etapa3 { padding-bottom: 60px; }
.etapa3 .box-interna:before { display: none; }

.txt-box {
	font-size: 27px;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	line-height: .9;
	margin-bottom: 39px;
}

.txt-box2 {
	font-size: 23px;
	text-align: center;
	color: #A8A8A8;
}



/* ============== BTNs ============== */

.box-btn {
	max-width: 231px;
	width: 100%;
	font-size: 0;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
	z-index: 1;
	display: inline-block;
	text-align: center;
}

.box-btn .btn { vertical-align: middle; }

.divisor {
	width: 1px;
	height: 200px;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	background-color: #C9C9C9;
}

/*.box-btn.btn-duo .btn { width: 50%; }*/

.box-btn.btn-duo { max-width: 337px; }



.btn {

	display: inline-block;

	font-size: 19px;

	text-transform: uppercase;

	text-align: center;

	letter-spacing: 3px;

	color: #fff;

	padding: 23px 5px;

	cursor: pointer;

}



.btn.style2 {

	font-size: 15px;

	color: #444444;

	padding: 11px 5px;

	width: 50%;

}



.btn.has_radius { border-radius: 50px; }

.has_radius-l {

	-moz-border-radius-topleft: 50px;

	-webkit-border-top-left-radius: 50px;

 	border-top-left-radius: 50px;

	-moz-border-radius-bottomleft: 50px;

	-webkit-border-bottom-left-radius: 50px;

	border-bottom-left-radius: 50px;

}

.has_radius-r {

	-moz-border-radius-topright: 50px;

	-webkit-border-top-right-radius: 50px;

	border-top-right-radius: 50px;

	-moz-border-radius-bottomright: 50px;

	-webkit-border-bottom-right-radius: 50px;

	border-bottom-right-radius: 50px;

}



.btn.is_bg-red { background-color: #EE282B; }

.is_bg-snow { background-color: #fff; }



.btn.has_shadow-red {

	-webkit-box-shadow: inset 0px -4px 0px 1px rgba(191, 33, 33, 1);

	-moz-box-shadow:    inset 0px -4px 0px 1px rgba(191, 33, 33, 1);

	box-shadow:         inset 0px -4px 0px 1px rgba(191, 33, 33, 1);

}



.btn.is_block { display: block; }



/* ============== ICONs ============== */

.icons {

	display: inline-block;

	width: 23px;

	height: 21px;

	vertical-align: middle;

	margin-right: 10px;

	background-repeat: no-repeat;

	background-position: center center;

}

.icon-heart {

	background-image: url('../images/icons/icon-heart.png');
	background-size: 100% auto ;

}

.icon-reload {

	background-image: url('../images/icons/icon-reload.png');
	background-size: auto 100%;

}

.icon-reload2 {

	background-image: url('../images/icons/icon-reload2.png');

}

.icon-arrow {

	background-image: url('../images/icons/icon-arrow-left.png')

}



.teamtag {

	position: absolute;

	top: 35%;

	left: 50%;

	transform: translate(-50%, 50%);

}



/* ============== PERGUNTAS ============== */

/*.box-externa.box-p-ex { padding: 58px 22px 66px; }*/

.box-externa.box-p-ex { padding: 20px 22px 66px; }



.txt-pergunta { font-size: 24px; text-align: center; color: #fff; }

.box-interna.box-p-int:before { max-width: 261px; bottom: -8px; }

.box-interna.box-p-int:after { max-width: 403px; bottom: -8px; }



.ornament {

	position: absolute;

}

.ornament-l {

	left: -25px;

	bottom: -25px;

}

.ornament-r {

	right: -25px;

    top: -25px;

}



.bullets {

	margin: 0 auto 1rem;

	max-width: 255px;

	overflow: hidden;

	position: relative;

	top: 23px;

	z-index: 99;

}



.bullets li {

	float: left;

	text-align: center;

	position: relative;

	font-size: 0;

}



.bullets div {

	display: inline-block;

	border: 3px solid #DBD5D0;

	border-radius: 50%;

	width: 14px;

	height: 14px;

	background-color: #1A1918;

	position: relative;

	z-index: 9;

}



.bullets li.progressed div, .bullets li.progressed:after {

	border-color: #EE282B;

	background-color: #EE282B;

}



.bullets li:after {

	content: '';

	display: block;

	width: 100%;

	height: 3px;

	background-color: #DBD5D0;

	position: absolute;

	right: -50%;

	top: 50%;

	transform: translateY(-50%);

}

.bullets li.last:after {

	display: none;

}



.controls {

	margin-top: 3rem;

	text-align: center;

	margin-bottom: 120px;

}

.controls .btn {

	background-color: transparent;

	border: none;

}



/* ============== RESULTADO ============== */



.resultado-time {

	background-color: #EE282B;

	border-radius: 5px;

	display: inline-block;

	padding: 1% 3%;

	margin-top: -1rem;

	margin-bottom: 2rem;

}



.btnreload {

	border: none;

	padding: 4% 5%;

	margin-top: 2rem;

}



.etapa3 .btn-holder {

    background: transparent;

    background-color: #fff;

    color: #000;

    border-radius: 100px;

    padding: 2% 1rem;

    max-width: 246px;

    margin: 2rem auto -5rem;

    z-index: 999;

    border-bottom: 2px solid #C4C4C4;

    position: relative;

}

.etapa3 .btn-holder li {
    display: inline-block;
    vertical-align: middle;
}

.social {
    width: 31px;
    height: 30px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

.fb { background: url(../images/icons/icon-facebook.png) no-repeat; }

.twt { background: url(../images/icons/icon-twitter.png) no-repeat; }

.etapa3 .box-externa { padding: 22px 22px 44px; }

.etapa3 .box-interna:after { max-width: 278px; }

.mrg-l1 { margin-left: 8px; }

.time-img { margin: 0 auto; }

.mobile { display: none; }

@media (max-width: 991px) {

	.btn.style2 { font-size: 12px; }

	.mobile {
		display: block;
		position: relative;
		width: 100%;
		height: 165px;
	}

	.mobile figure { position: absolute; width: 84%; }
	@media (min-width: 440px) {
		.mobile figure { width: 302px; }
	}

	.m-l { left: -22%; }

	.m-r { right: -26%; }

	.box-interna { padding: 65px 20px; }

	.col-char { display: none; }

	.col-6 {
		margin: 0 auto;
		flex: 0 0 100%;
		max-width: 95%;
	}
}



@media (min-width: 700px) {
	.m-l { left: 0%; }
	.m-r { right: 0%; }

	/*body { background-size: auto 125%; }*/

	.etapa3 .box-externa { margin-bottom: 85px; }
}



.placar {

	height: 100px;

	margin: 0 auto;

	max-width: 420px;

	position: relative;

	background: url('../images/placar.png') no-repeat top center;

}

@media (max-width: 900px) {

	.placar {

		background-size: 93% auto;

	}

}

.placar-t {

	font-size: 16px;

	text-align: center;

	top: -4px;

	left: 49.5%;

	transform: translateX(-50%);

	position: absolute;

}

.pll {

 	float: left;

	width: 74px;

	height: 56px;

	background-image: url('../images/pll.png');

	text-align: center;

	vertical-align: middle;

	color: #fff;

	padding-top: 1rem;

	font-size: 18px!important;

}

.plr {

	float: right;

	width: 74px;

	height: 56px;

	background-image: url('../images/plr.png');

	display: inline-block;

	text-align: center;

	vertical-align: middle;

	color: #fff;

	padding-top: 1rem;

	font-size: 18px!important;

}

.teamvo {

	float: left;

}

.teamboi {

	float: right;

}

.team {

	color: #373737;

	text-transform: uppercase;

	padding-top: 1rem;

}