/* -- reset -- */
*{
	padding: 0;
	margin: 0;
	
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	
	-webkit-tap-highlight-color: transparent;
}
/* -- fim reset -- */


/* -- global --*/
@font-face{
	font-family: Rockwell;
    src: url(../media/Rockwell.ttf);
}

@font-face{
	font-family: RockwellEB;
    src: url(../media/RockwellEB.ttf);
}

html{
	width: 100%;
	height: 100%;
}

body{
	height: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* -- fim global -- */


/* -- point of view -- */
.screen{
	position: relative;
	margin-left: auto;
	margin-right: auto;
	background-color: #6CC4C7;
}

.frame{
    position: relative;
    width: 724px;
    height: 956px;
    margin: auto;
    overflow: hidden;
}

.play{
	position: absolute;
	top: 350px;
	left: 313px;
	width: 100px;
	height: 100px;
	cursor: pointer;
	display: none;
	z-index: 2;
}

.mesa{
	position: absolute;
	bottom: 12%;
	left: 0px;
	width: 100%;
	height: 21%;
	background-color: #E3CEA4;
}

.rodape{
	position: absolute;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 12%;
	background-color: #ffffff;
}

.data_numero{
	position: absolute;
	top: -10px;
	left: 25px;
	font-family: RockwellEB;
	font-size: 64px;
	color: #00777A;
	-webkit-transition: 1000ms;
	transition: 1000ms;
	opacity: 0;
}

.dia_nacional{
	position: absolute;
	top: 40px;
	left: 25px;
	font-family: Rockwell;
	font-size: 48px;
	color: #000;
	-webkit-transition: 1000ms;
	transition: 1000ms;
	-webkit-transition-delay: 500ms;
	transition-delay: 500ms;
	opacity: 0;
}

.mensagem{
	position: absolute;
	top: 105px;
	left: 25px;
	width: 670px;
	font-family: Rockwell;
	font-size: 22px;
	color: #000;
	-webkit-transition: 500ms;
	transition: 500ms;
	-webkit-transition-delay: 750ms;
	transition-delay: 750ms;
	opacity: 0;
}

.livro{
	position: absolute;
	top: 42%;
	left: 80px;
	width: 550px;
	height: 360px;
	z-index: 1;
	-webkit-transition: 500ms;
	transition: 500ms;
	-webkit-transition-delay: 1000ms;
	transition-delay: 1000ms;
	opacity: 0;
}

#capa{
	background-image: url('../media/livrocapa.svg');
	background-size: cover;
}

#verso{
	background-image: url('../media/livrocontracapareverso.svg');
	background-size: cover;
}

#page1{
	background-image: url('../media/livrocapareverso.svg');
	background-size: cover;
}

.pagdir{
	position:absolute;
	left: 0px;
	width: 90%;
}

.pagesq{
	position:absolute;
	right: 0px;
	width: 90%;
}

.balao{
	position: absolute;
	-webkit-transition: 500ms;
	transition: 500ms;
	z-index: 1;
}

.posicao0{
	top: 660px;
    left: 285px;
    opacity: 0;
}

.posicao1{
	top: 580px;
	left: 90px;
    opacity: 1;
}

.posicao2{
    top: 300px;
    left: 60px;
    opacity: 1;
	-webkit-transition-delay: 250ms;
	transition-delay: 250ms;
}

.posicao3{
	top: 440px;
    left: 140px;
    opacity: 1;
	-webkit-transition-delay: 500ms;
	transition-delay: 500ms;
}

.posicao4{
	top: 290px;
    left: 220px;
    opacity: 1;
	-webkit-transition-delay: 750ms;
	transition-delay: 750ms;
}

.posicao5{
    top: 510px;
    left: 285px;
    opacity: 1;
	-webkit-transition-delay: 1000ms;
	transition-delay: 1000ms;
}

.posicao6{
	top: 325px;
    left: 390px;
    opacity: 1;
	-webkit-transition-delay: 1250ms;
	transition-delay: 1250ms;
}

.posicao7{
	top: 545px;
    left: 490px;
    opacity: 1;
	-webkit-transition-delay: 1500ms;
	transition-delay: 1500ms;
}

.posicao8{
    top: 300px;
    left: 560px;
    opacity: 1;
	-webkit-transition-delay: 1750ms;
	transition-delay: 1750ms;
}

.posicao{
	top: 580px;
	left: 90px;
    opacity: 1;
}

#balao1{
	width: 110px;
	height: 130px;
}

#balao2{
	width: 115px;
	height: 135px;
}

#balao3{
	width: 105px;
	height: 120px;
}

#balao4{
	width: 125px;
	height: 145px;
}

#balao5{
	width: 160px;
	height: 195px;
}

#balao6{
	width: 130px;
	height: 155px;
}

#balao7{
	width: 130px;
	height: 150px;
}

#balao8{
	width: 110px;
	height: 130px;
}

.eweglogo_off{
    position: absolute;
    top: 855px;
    left: -250px;
	width: 225px;
    height: 85px;
    -webkit-transition: 500ms;
    transition: 500ms;
	z-index: 1;
}

.ewegsite_off{
	position: absolute;
    top: 870px;
    right: -300px;
    width: 295px;
    height: 50px;
    -webkit-transition: 500ms;
    transition: 500ms;
    z-index: 1;
}

.eweglogo_on{
	left: 50px;
}

.ewegsite_on{
	right: 30px;
}

.rever{
	position: absolute;
    top: 790px;
    left: 545px;
    width: 170px;
    height: 27px;
    cursor: pointer;
    z-index: 1;
	display: none;
}

.seta{
	position: absolute;
    top: 793px;
    left: 549.5px;
    z-index: 1;
    -webkit-transition: 500ms;
    transition: 500ms;
	-webkit-transform-origin: 44% 48%;
	transform-origin: 44% 48%;
	display: none;
}

.seta_hover{
	-webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}