@font-face {
    font-family: 'UnimedSlab-Book';
    src: url('../fonts/UnimedSlab-Book.eot?') format('eot'), 
        url('../fonts/UnimedSlab-Book.otf')  format('opentype'),
        url('../fonts/UnimedSlab-Book.woff') format('woff'), 
        url('../fonts/UnimedSlab-Book.ttf')  format('truetype'),
        url('../fonts/UnimedSlab-Book.svg#UnimedSlab-Book') format('svg');
}


@font-face {
    font-family: 'UnimedSlab-SemiBold';
    src: url('../fonts/UnimedSlab-SemiBold.eot?') format('eot'), 
        url('../fonts/UnimedSlab-SemiBold.otf')  format('opentype'),
        url('../fonts/UnimedSlab-SemiBold.woff') format('woff'), 
        url('../fonts/UnimedSlab-SemiBold.ttf')  format('truetype'),
        url('../fonts/UnimedSlab-SemiBold.svg#UnimedSlab-SemiBold') format('svg');
}

*{
	border:0;
	padding:0;
	margin:0;
}

body {
	background: #301f3a url(../img/bg-game.jpg) no-repeat 0 0;
	-webkit-background-size: cover;
	background-size: cover;
	overflow: hidden;
	font-family: 'UnimedSlab-Book';
}

@-webkit-keyframes pop{
	0% {
		position: inherit;
	}
	1% {
		top: -500px!important;
	}
	100% {
		visibility: hidden;
	}
}
@-moz-keyframes pop{
	0% {
		position: inherit;
	}
	1% {
		top: -500px!important;
	}
	100% {
		visibility: hidden;
	}
}
@keyframes pop{
	0% {
		position: inherit;
	}
	1% {
		top: -500px!important;
	}
	100% {
		visibility: hidden;
	}
}



@-webkit-keyframes moveBalloon{
	0%{
		-webkit-transform: translate3d(0,0,0);				
	}	
	50%{
		-webkit-transform: translate3d(0,10px,0);
	}
	100%{
		-webkit-transform: translate3d(0,0,0);
	}	
}
@-moz-keyframes moveBalloon{
	0%{
		-moz-transform: translate3d(0,0,0);				
	}	
	50%{
		-moz-transform: translate3d(0,10px,0);
	}
	100%{
		-moz-transform: translate3d(0,0,0);
	}	
}
@keyframes moveBalloon{
	0%{
		transform: translate3d(0,0,0);				
	}	
	50%{
		transform: translate3d(0,10px,0);
	}
	100%{
		transform: translate3d(0,0,0);
	}	
}

.aniversario {
	position: absolute;
	right: 30px;
	top: 30px;
	z-index: 10;
}

.ribbon {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	height: 180px;
	background: url(../img/ribbon.svg) no-repeat 0 0;
	background-size: 100% auto;
	z-index: 1;
}

.logo {
	position: absolute;
	z-index: 100;
	left: 30px;
	top: 30px;
}

.container{
	width:850px;
	height:550px;
	margin:0 auto;
	position:relative;		
	margin-top: 70px;
	z-index: 20;
}		
.balloon{
	position:absolute;						
	background: url(../img/balloons.png) no-repeat 0 0;
	height:122px;
	width:115px;
	transition: all 1.2s ease-in;
	opacity: .9;
	cursor: pointer;	
	border-radius: 50%;			
}
.balloon:after {
	content: ' ';
	display: block;
	width: 7px;
	height: 80px;
	background: url(../img/cordinha.png) no-repeat 0 0;
	position: absolute;
	left: 50%;
	bottom: -75px;
}

.point{
	background-position: 0 -366px;						
}
.orange{
	background-position: 0 -122px;			
}
.blue{
	background-position: 0 -244px;			
}
.green{
	background-position: 0 0px;			
}
.pop{
	top: -4000px!important;
	left: -200px!important;
}
.pop1{
	top: -4000px!important;
	left: -200px!important;
	opacity: 0;
	transition: all 4s ease-in;
}
.pop2{
	top: -1000px!important;
	left: -500px!important;
	opacity: 0;
}
.pop3{
	top: -3000px!important;
	left: 0px!important;
	opacity: 0;
	transition: all 3s ease-in;	
}
.pop4{
	top: -2000px!important;
	left: 700px!important;
	opacity: 0;
	transition: all 5s ease-in;
}
.pop5{
	top: -3000px!important;
	left: 800px!important;
	opacity: 0;
}
.speed1{
	-webkit-animation: moveBalloon 2s infinite ease-in-out;
	-moz-animation: moveBalloon 2s infinite ease-in-out;
	animation: moveBalloon 2s infinite ease-in-out;
}
.speed2{
	-webkit-animation: moveBalloon 2.5s infinite ease-in-out;
	-moz-animation: moveBalloon 2.5s infinite ease-in-out;
	animation: moveBalloon 2.5s infinite ease-in-out;
}
.speed3{
	-webkit-animation: moveBalloon 3.5s infinite ease-in-out;
	-moz-animation: moveBalloon 3.5s infinite ease-in-out;
	animation: moveBalloon 3.5s infinite ease-in-out;
}
.speed4{
	-webkit-animation: moveBalloon 2s infinite ease-in-out;
	-moz-animation: moveBalloon 2s infinite ease-in-out;
	animation: moveBalloon 2s infinite ease-in-out;
}
.speed5{
	-webkit-animation: moveBalloon 3.5s infinite ease-in-out;
	-moz-animation: moveBalloon 3.5s infinite ease-in-out;
	animation: moveBalloon 3.5s infinite ease-in-out;
}
.speed6{
	-webkit-animation: moveBalloon 3.5s infinite ease-in-out;
	-moz-animation: moveBalloon 3.5s infinite ease-in-out;
	animation: moveBalloon 3.5s infinite ease-in-out;
}
.start{
	position:absolute;
	width: 380px;
	height: 400px;
	top:50%;
	left:50%;
	margin-top: -250px;
	margin-left: -200px;
	color: #BED700;
	text-align: center;
}

.start h2 {
	font-size: 40px;
	border-bottom: 5px solid #BED700;
	width: 340px;
	padding-bottom: 10px;
	margin: 0 auto;
	margin-bottom: 20px;
}

.start p {
	font-size: 20px;
	margin-bottom: 15px;
}

p.warning {
	font-size: 11px;
	padding: 10px 20px;
	margin-top: 25px;
	font-family:Verdana;
	color:#FFFFFF;
}

.start .jogue {
	display: block;
	padding: 10px 20px;
	background: #BED700;
	color: #301f3a;
	font-family: "UnimedSlab-SemiBold";
	border-radius: 20px;
	width: 200px;
	font-size: 30px;
	margin: 0 auto;
	text-transform: uppercase;
	cursor: pointer;
	transition: all .2s ease-in-out;
}

.start .jogue:hover {
	transform: scale(1.05);
}

.info{
	position:absolute;
	left:30px;
	top:140px;
	z-index: 100;
}
.info-box {
	box-sizing: border-box;
	background: #BED700;
	padding: 10px;
	margin-bottom: 10px;
	border-radius: 15px;
	text-align: center;
	color: #301f3a;
}

.info-box h3 {
	margin-bottom: 10px;
	font-size: 15px;
}

.info-box span {
	font-size: 30px;
	font-weight: bold;
	background: rgba(255,255,255, .3);
	display: block;
	border-radius: 15px;
	padding: 5px;
	font-family: 'UnimedSlab-SemiBold';
}

.carrot {
	background: #F5781E;
}

.gift {
	position: absolute;
	bottom:10px;
	right: 10px;
	z-index: 10;
}

.confete1 {
	position: absolute;
	width: 129px;
	height: 535px;
	bottom: 10px;
	right: 10px;
	background: url(../img/confete1.png) no-repeat 0 0;
}

.confete2 {
	position: absolute;
	width: 129px;
	height: 535px;
	bottom: 10px;
	left: 10px;
	background: url(../img/confete1.png) no-repeat 0 0;
}

.fb-like {
	
}
