/* ++++++++++ RESET ++++++++++ */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }

html {
	font-size: 16px;
	font-family: 'Poppins', sans-serif!important;
}

body {
	background-image: url(./../images/bg1.png);
	background-size: cover;
	background-color: #5e5e5e;
	font-family: 'Poppins', sans-serif!important;
}

.hidden {
	display: none;
}

.wrapper {
	height: 100vh;
	overflow: hidden;
	position: relative;
display: flex;
flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

.btn-start {
	background: #000;
    padding: 1.4rem 3rem;
    border-radius: 214px;
    color: #fff;
}

.btn-start:hover {
	background: #242424;
	cursor: pointer;
}

.btn-continue {
	position: relative;
    z-index: 6000;
    background: #ffffff;
    color: #000000;
    bottom: 100px;
    padding: 1.4rem 3rem;
    border-radius: 214px;
}

.btn-continue:hover {
	background: #dadada;
	cursor: pointer;
}

.countdown {
	font-size: 40rem;
	position: absolute;
	visibility: hidden;
	color: #ffffff;
}

.ball {
	height: 8vw;
	width: 8vw;
	background-color: red;
	color: #000;
	position: absolute;
	left: calc(-8vw * 1.1);
	border-radius: 100px;
	box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.3);
	-webkit-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.3);
	-moz-box-shadow: 0px 0px 30px 5px rgba(0,0,0,0.3);
	overflow: hidden;
}

.ball__number {
	height: 4vw;
	width: 4vw;
	position: relative;
	top: 1.9vw;
	text-align: center;
	font-size: 3vw;
	font-weight: 700;
	margin: 0 auto;
    background: white;
    line-height: 4vw;
    border-radius: 50px;
}

.ball.winner {
	z-index: 1000;
}

.ball.ball--1, .ball.ball--9, .ball.color1 {
	background-color: #ffd200;
}

.ball.ball--2, .ball.ball--10, .ball.color2 {
	background-color: #214da8;
}

.ball.ball--3, .ball.ball--11, .ball.color3 {
	background-color: #d11618;
}

.ball.ball--4, .ball.ball--12, .ball.color4 {
	background-color: #f94b7e;
}

.ball.ball--5, .ball.ball--13, .ball.color5 {
	background-color: #fc450b;
}

.ball.ball--6, .ball.ball--14, .ball.color6 {
	background-color: #10555b;
}

.ball.ball--7, .ball.ball--15 {
	background-color: #994c16;
}

.ball.ball--8 {
	background-color: #000000;
}

.ball .bar {
	border-radius: none;
	width: 140%;
	left: -20%;
}