body {
	color: #fff;
	font-family: 'Raleway', sans-serif;
	font-weight: 400;
	/*Background Color Mobile*/
	background-color: #000000;
}

h1 {
	font-weight: 900;
	font-size: 1.3em;
}
h2 {
	font-size: 1em;
}

.gray-scale {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
		filter: grayscale(100%);
		opacity: 0.2;
}
.question {
	margin-top: -11em;
}
.color {
	/*Title Color*/
	color: #ffffff;
}
.large-top {
	margin-top: 1.5em;
}
.large-bottom {
	margin-bottom: 1.5em;
}
.bold-font {
	font-weight: 800;
}
.answer {
	margin-top: 0em;
}
.title {
	font-size: 1.6em;
}

.counter {
	font-size: 3em;
}

.description {
	color: #ffffff !important;
}


.btn-custom {
	/*Gradient*/
	background-image: linear-gradient(-90deg, #000000,#000000);
	border-radius: 100px;
	width: 100%;
	padding:10px 31px;
	margin-top: 1em;
	/*Button Label Color*/
	color: #ffffff;
	font-weight: 400 !important;
	border: 0px solid transparent !important;
}

.btn-custom:hover {
	/*Button Label Color*/
	color: #ffffff;
}


.content-box {
	margin-top: -8em;
}


.jumbotron {
	border-radius: 0 !important;
	height: 350px !important;
}



#progressBar {
	margin-top: 0.5em;
	margin-bottom: 1em;
}

iframe {
	margin-top: 1em;
}

.hero-top {
	display: none;
}

footer {
	margin-top: 3em;
}
.first-text {
	-webkit-animation: fadein 1s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 1s; /* Firefox < 16 */
	-ms-animation: fadein 1s; /* Internet Explorer */
	-o-animation: fadein 1s; /* Opera < 12.1 */
	animation: fadein 1s;

}
.second-text {
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 3s; /* Firefox < 16 */
	-ms-animation: fadein 3s; /* Internet Explorer */
	-o-animation: fadein 3s; /* Opera < 12.1 */
	animation: fadein 3s;
}

.card-deck {
	-webkit-animation: fadein 4s; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadein 4s; /* Firefox < 16 */
	-ms-animation: fadein 4s; /* Internet Explorer */
	-o-animation: fadein 4s; /* Opera < 12.1 */
	animation: fadein 4s;
}
.content-box-ticket {
	margin-top: 2em;
}
.card {
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card:hover {
	box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.number{
	display: none;
	font-family: 'Raleway', sans-serif;
	position: absolute;
	font-weight: 900;
	color: #000;
	font-size: 7em;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	margin-top: 25%;
}


footer a {
	color: #ffffff;
}
footer a:hover {
	color: #ffffff;
	text-decoration: none;
}
.card {
	border-radius: 0.5rem;
}



/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1199px) {
	.bg-img {
		/*Background Color Mobile*/
		background:  url('https://sonymusicbrasil.nyc3.digitaloceanspaces.com/musical-vote/uploads/storage/file/2019/07/5/capa_cacife_votacao_3.png') no-repeat center center;
		background-size: cover;

	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {

	body {
		/*Background Color Mobile*/
		background-color: #000000;
		color: #202020;
	}
	h1 {
		font-size: 2em
	}

	h2 {
		font-size: 1.3em
	}

	.hero-top {
		width: 100%;
		height: 370px;
		margin-top: -2em;
		display: block;
	}

	.bg-img {
		/*Gradient*/
		background: linear-gradient(#000000,#000000) no-repeat center center !important;
	}

	.jumbotron {
		border-radius: 0 !important;

		height: 300px !important;
	}
	.title {
		font-size: 2em
	}
	.answer {
		margin-top: 2.5em;
	}

	.description {
		font-size: 1.3em
	}

	.content-box {
		padding-top: 14em;
	}

	.ticket-background {
		/*Gradient*/
		background: linear-gradient(#000000,#000000) no-repeat center center;
		height: 100%;
	}

	.ticket-background body {
		/*Gradient*/
		background: linear-gradient(#000000,#000000) no-repeat center center;
		height: 100%;
	}
	.description {
		color: #ffffff !important
	}

	.question {
		margin-top: -4em;
	}
	.number{
		display: none;
		font-family: 'Raleway', sans-serif;
		position: absolute;
		font-weight: 900;
		font-size: 3em !important;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
		margin-top: 20%;
		z-index: 10;
	}




}