@font-face {
	font-family: 'neosans';
	src: url('fonts/neosansstd.eot');
	src: url('fonts/neosansstd.ttf');
}

.pause{
	-webkit-animation-play-state: paused !important;
	-moz-animation-play-state: paused !important;
    animation-play-state: paused !important;
}
.resume{
	-webkit-animation-play-state: running;
	-moz-animation-play-state: running;
    animation-play-state: running;
}

@-webkit-keyframes blink { 0% { opacity: 1; } 20% { opacity: .7; } 40% { opacity: .9; } 60% { opacity: .8; } 80% { opacity: .7; } 100% { opacity: .9; } }
@-moz-keyframes blink { 0% { opacity: 1; } 20% { opacity: .7; } 40% { opacity: .9; } 60% { opacity: .8; } 80% { opacity: .7; } 100% { opacity: .9; } }
@keyframes blink { 0% { opacity: 1; } 20% { opacity: .7; } 40% { opacity: .9; } 60% { opacity: .8; } 80% { opacity: .7; } 100% { opacity: .9; } }
.blink{
	-webkit-animation: 	blink .1s infinite linear;
	-moz-animation: 	blink .1s infinite linear;
	animation: 			blink .1s infinite linear;
}

@-webkit-keyframes spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
@-moz-keyframes spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
@keyframes spin { 0% { transform: rotate(0deg); } 25% { transform: rotate(90deg); } 50% { transform: rotate(180deg); } 75% { transform: rotate(270deg); } 100% { transform: rotate(360deg); } }
.spin{
	-webkit-animation: 	spin 10s infinite linear;
	-moz-animation: 	spin 10s infinite linear;
	animation: 			spin 10s infinite linear;
}

@-webkit-keyframes spinInvert { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } }
@-moz-keyframes spinInvert { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } }
@keyframes spinInvert { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(-180deg); } 75% { transform: rotate(-270deg); } 100% { transform: rotate(-360deg); } }
.spinInvert{
	-webkit-animation: 	spinInvert 15s infinite linear;
	-moz-animation: 	spinInvert 15s infinite linear;
	animation: 			spinInvert 15s infinite linear;
}

@-webkit-keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(.63); } 100% { transform: scale(1); } }
@-moz-keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(.63); } 100% { transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(.63); } 100% { transform: scale(1); } }
.pulse{
	-webkit-animation: 	pulse 2s infinite linear;
	-moz-animation: 	pulse 2s infinite linear;
	animation: 			pulse 2s infinite linear;
}

@-webkit-keyframes fillOut { 0% { width: 0px; opacity: 1; } 70% { opacity: .7; } 100% { width: 160px; opacity: 0; } }
@-moz-keyframes fillOut { 0% { width: 0px; opacity: 1; } 70% { opacity: .7; } 100% { width: 160px; opacity: 0; } }
@keyframes fillOut { 0% { width: 0px; opacity: 1; } 70% { opacity: .7; } 100% { width: 160px; opacity: 0; } }
.fillOut{
	-webkit-transition: width 2s linear, opacity 2s linear;
	-moz-transition: 	width 2s linear, opacity 2s linear;
	transition: 		width 2s linear, opacity 2s linear;
	-webkit-animation: 	fillOut 2s infinite linear;
	-moz-animation: 	fillOut 2s infinite linear;
	animation: 			fillOut 2s infinite linear;
}

#interatividade{
	background: url(img/bg.png) no-repeat 0 0;
}

#intro{
	width: 800px;
	height: 600px;
	background: url(img/filtro.png) no-repeat 0 0;
}
#intro .circulos, #intro .circulos > span{
	position: absolute;
	width: 371px;
	height: 371px;
}
#intro .circulos{
	top: 145px;
	left: 10px; 
}
#intro .circulos > span{
	top: 0;
	left: 0; 
}
#intro .circulos .circ1{ background: url(img/circ1.png) no-repeat 0 0; }
#intro .circulos .circ2{ background: url(img/circ2.png) no-repeat 0 0; }
#intro .circulos .circ3{ background: url(img/circ3.png) no-repeat 0 0; }
#intro .circulos .dente{ background: url(img/dente.png) no-repeat center center; }

#intro .ligacao{
	position: absolute;
	width: 250px;
	height: 110px;
	top: 59px;
    left: 163px;
	background: url(img/ligacao.png) no-repeat 0 0;
}

#intro .bloco{
	position: absolute;
	width: 390px;
	height: 552px;
	top: 20px;
    right: 23px;
	background: url(img/bg_info.png) no-repeat 0 0;
}
#intro .bloco .borda{
	position: absolute;
	width: 415px;
	height: 577px;
	top: -14px;
    right: -10px;
	background: url(img/borda_bg_info.png) no-repeat 0 0;
}
#intro .bloco .setas{
	position: absolute;
	height: 46px;
	bottom: 50px;
    left: 35px;
	background: url(img/setas.png) no-repeat 0 0;
}
#intro .bloco blockquote{
	position: absolute;
	width: 310px;
	height: 395px;
    top: 50px;
    left: 35px;
}
#intro .bloco blockquote p{
	font-family: 'neosans';
	font-size: 20px;
	line-height: 25px;
	color: #bcf6f7;
	padding: 5px 0;
}
#intro .bloco blockquote p:first-of-type{
	width: 250px;
}
#intro .bloco #btIniciar{
	position: absolute;
	width: 145px;
	height: 75px;
    bottom: 30px;
    right: 40px;
	background: url(img/bt_iniciar.png) no-repeat 0 0;
	text-indent: -5000px;
}

#atividade{
	width: 800px;
	height: 600px;
}

#atividade .opt{
	position: absolute;
	width: 91px;
	height:91px;
	background: url(img/destaque.png) no-repeat 0 0;
	text-indent: -5000px;
}
#atividade .opt[data-status=viewed]{
	background: url(img/destaque_viewed.png) no-repeat 0 0;
}

#atividade .opt.opt1{ top: 223px; left: 508px; }
#atividade .opt.opt2{ top: 253px; left: 208px; }
#atividade .opt.opt3{ top: 275px; left: 119px; }
#atividade .opt.opt4{ top: 290px; left: 655px; }
#atividade .opt.opt5{ top: 160px; left: 326px; }
#atividade .opt.opt6{ top: 147px; left: 600px; }
#atividade .opt.opt7{ top: 190px; left: 108px; }
#atividade .opt.opt7{ top: 190px; left: 108px; }