@font-face {
	font-family: 'myriadpro';
	src: url('fonts/myriadpro_regular.eot');
	src: url('fonts/myriadpro_regular.ttf');
}
@font-face {
	font-family: 'myriadproB';
	src: url('fonts/myriadpro_semibold.eot');
	src: url('fonts/myriadpro_semibold.ttf');
}
@font-face {
	font-family: 'myriadproI';
	src: url('fonts/myriadpro_it.eot');
	src: url('fonts/myriadpro_it.ttf');
}
@font-face {
	font-family: 'myriadproBI';
	src: url('fonts/myriadpro_semiboldit.eot');
	src: url('fonts/myriadpro_semiboldit.ttf');
}

.tela{
	width: 800px;
	height: 600px;
}

#atividade .pagina{
	position: absolute;
	top: 0;
}

#pg0{ background: url(../assets/images/pg0.png) no-repeat 0 0; }
#pg1{ background: url(../assets/images/pg1.png) no-repeat 0 0; }
#pg2{ background: url(../assets/images/pg2.png) no-repeat 0 0; }
#pg3{ background: url(../assets/images/pg3.png) no-repeat 0 0; }

#atividade .pagina .texto{
	width: 800px;
	height: 148px;
	background: url(img/bg_texto.png) no-repeat 0 0;
	position: absolute;
	bottom: 0px;
	left:50%;
	margin-left:-400px;
}
#atividade .pagina .texto.menor{
	width: 784px;
	height: 127px;
	background: url(img/bg_texto_menor.png) no-repeat 0 0;
	margin-left:-392px;
}

#atividade .pagina .texto blockquote{
	width: 695px;
	height: 85px;
	position: absolute;
	top: 25px;
	left:50px;
	display: table;
	text-align: center;
}
#atividade .pagina .texto blockquote p{
	width: 100%;
	height: 100%;
	display: table-cell;
	vertical-align: middle;
	font-family: 'myriadpro';
	color: #000;
	font-size: 19px;
}
#stage #atividade .pagina .texto blockquote p b{
	font-family: 'myriadproB';
}
#atividade .pagina .texto.menor blockquote{
	top: 15px;
    width: 675px;
}

#atividade .btAssistaVideo{
	width: 264px;
	height: 73px;
	background: url(img/botoes.png) no-repeat 0 0;
	position: absolute;
	top: 3px;
	right:0px;
	text-indent: -5000px;
}

#atividade .st{
	width: 96px;
	height:96px;
	background: url(img/botoes.png) no-repeat;
	position: absolute;
	top: 50%;
	text-indent: -5000px;
	margin-top:-48px;
}
#atividade .st.stAnterior{
	background-position:-383px 0;
	left:10px;
}
#atividade .st.stProximo{
	background-position:-280px 0;
	right:0;
}

#atividade .opt{
	width: 76px;
	height:76px;
	background: url(img/destaque.png) no-repeat 0 0;
	position: absolute;
	text-indent: -5000px;
	-webkit-animation: pulse 4s infinite;
	animation: pulse 4s infinite;
}
#atividade .opt.active{
	background: url(img/destaque_active.png) no-repeat 0 0;
}
#atividade .opt#opt0{ top: 16px;  left: 474px; }
#atividade .opt#opt1{ top: 75px;  left: 326px; }
#atividade .opt#opt2{ top: 151px; left: 239px; }
#atividade .opt#opt3{ top: 396px; left: 330px; }
#atividade .opt#opt4{ top: 241px; left: 330px; }

@-webkit-keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.7); } 50% { transform: scale(1); } 75% { transform: scale(.7); } 100% { transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.7); } 50% { transform: scale(1); } 75% { transform: scale(.7); } 100% { transform: scale(1); } }

#atividade .filtro[data-value=v0]{ background: url(img/filtro1.png) no-repeat 0 0; }
#atividade .filtro[data-value=v1]{ background: url(img/filtro2.png) no-repeat 0 0; }
#atividade .filtro[data-value=v2]{ background: url(img/filtro3.png) no-repeat 0 0; }
#atividade .filtro[data-value=v3]{ background: url(img/filtro4.png) no-repeat 0 0; }
#atividade .filtro[data-value=v4]{ background: url(img/filtro5.png) no-repeat 0 0; }

#atividade .box{
	width: 270px;
	height: auto;
	background: #ffe600;
	position: absolute;
	border-radius: 22px;
}
#atividade .box p{
	padding: 30px;
	font-family: 'myriadpro';
	font-size: 19px;
	color:#000;
	text-align: center;
}
#stage #atividade .box p b{
	font-family: 'myriadproB' !important;
}
#atividade .box[data-value=v0]{ top: 149px; left: 457px; }
#atividade .box[data-value=v1]{ top: 154px; left: 451px; }
#atividade .box[data-value=v2]{ top: 226px; left: 449px; }
#atividade .box[data-value=v3]{ top: 106px; left: 464px; }
#atividade .box[data-value=v4]{ top: 321px; left: 454px; }

#atividade .box .btx{
	width: 43px;
	height:43px;
	background: url(img/botoes.png) no-repeat 0 -79px;
	position: absolute;
	top: -20px;
	right: -20px;
	text-indent: -5000px;
}