@charset "utf-8";

@font-face {
  font-family: 'sierra-madre';
  src: url('../fonts/sierra-madre.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sierra-madre-bold';
  src: url('../fonts/sierra-madre-bold.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sierra-madre-italic';
  src: url('../fonts/sierra-madre-italic.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'sierra-madre-bold-italic';
  src: url('../fonts/sierra-madre-bold-italic.otf') format("opentype");
  font-weight: normal;
  font-style: normal;
}
/*  */

.hidden{display: none !important;}

.full, .screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.black-screen{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
}

#app {
  font-family: 'sierra-madre';
  font-size: 18.29px;
  letter-spacing: normal;
  color: #121234;
}

#app h1,#app h2, .title, #app a{
  font-family: 'sierra-madre';
}

#intro {
  background: url('../imgs/intro-bg.png') no-repeat;
}

#intro p{
  color: #fff;
  font-family: 'sans-serif';
  font-size: 21.08px;
  text-align: center;
  width: 750px;
  top: 280px;
  position: absolute;
  left: 140px;
}

#personagem {
  background: url('../imgs/personagem-bg.png') no-repeat;
}

.logo{
  position: absolute;
  top: 50px;
  left: 160px;
}

.iniciar {
  position: absolute;
  width: 145px;
  height: 85px;
  top: 670px;
  left: 400px;
  text-align: center;
  color: #fff;
  text-decoration: none;
}

.iniciar-text{
  position: absolute;
  left: 95px;
  bottom: 25px;
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 41.18px;
}

.personagem-title{
  position:absolute;
  top:50px;
  left:160px;
}

#menino{
  position: absolute;
  top: 140px;
  left: 210px;
  width:244px;
  height:564px;
  background: url('../imgs/menino.png') no-repeat; 
}

#menino:hover{
  position: absolute;
  top: 137px;
  left: 207px;
  width:250px;
  height:570px;
  background: url('../imgs/menino-select.png') no-repeat;
}

#menina{
  position: absolute;
  top: 140px;
  left: 580px;
  width:228px;
  height:560px;
  background: url('../imgs/menina.png') no-repeat;
}

#menina:hover{
  position: absolute;
  top: 137px;
  left: 577px;
  width:234px;
  height:566px;
  background: url('../imgs/menina-select.png') no-repeat;
}

#mapa{
  background: url('../imgs/bg-mapa.png') no-repeat;
}

.mapa-title{
  position:absolute;
  top:50px;
  left:200px;
}

#nigeria-mapa{
  display: block;
  position:absolute;
  top: 339px;
  left: 397px;
  background: url('../imgs/nigeria-mapa.png') no-repeat;
  width:89px;
  height:72px;
}

#nigeria-mapa:hover~#nigeria-pin{
  display:block;
}

#nigeria-pin{
  display:none;
  position:absolute;
  top: 290px;
  left: 420px;
  background: url('../imgs/nigeria-pin.png') no-repeat;
  width:62px;
  height:53px;
}

#nigeria-pin p{
  font-family:"sierra-madre-bold";
  font-size:17.15px;
  margin-left: 8px;
  margin-top: 4px;
  color:#b42b87;
}

#angola-mapa{
  display: block;
  position:absolute;
  top: 483px;
  left: 461px;
  background: url('../imgs/angola-mapa.png') no-repeat;
  width:92px;
  height:93px;
}

#angola-mapa:hover~#angola-pin{
  display:block;
}

#angola-pin{
  display:none;
  position:absolute;
  top: 440px;
  left: 490px;
  background: url('../imgs/angola-pin.png') no-repeat;
  width:62px;
  height:51px;
}

#angola-pin p{
  font-family:"sierra-madre-bold";
  font-size:17.15px;
  margin-left: 8px;
  margin-top: 4px;
  color:#b42b87;
}

#southafrica-mapa{
  display: block;
  position:absolute;
  top: 605px;
  left: 497px;
  background: url('../imgs/southafrica-mapa.png') no-repeat;
  width:122px;
  height:107px;
}

#southafrica-mapa:hover~#southafrica-pin{
  display:block;
}

#southafrica-pin{
  display:none;
  position:absolute;
  top: 560px;
  left: 550px;
  background: url('../imgs/southafrica-pin.png') no-repeat;
  width:107px;
  height:51px;
}

#southafrica-pin p{
  font-family:"sierra-madre-bold";
  font-size:17.15px;
  margin-left: 8px;
  margin-top: 4px;
  color:#b42b87;
}

#frame{ 
  position: absolute;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  top:0px;
  left: 0px;
}

#frame2{ 
  position: absolute;
  width: 1024px;
  height: 768px;
  overflow: hidden;
  top:0px;
  left: 0px;
}

.content{
  position:absolute;
  width: 1070px; 
  height: 800px;
  overflow: scroll;
  top:0px;
  left:0px;
}

.content2{
  position:absolute;
  width: 1070px; 
  height: 800px;
  overflow: scroll;
  top:0px;
  left:0px;
}

#diario-de-viagem{
  position: absolute;
  top:726px;
  left:0px;
  background: url('../imgs/diario-de-viagem.png') no-repeat;
  width:1024px;
  height:559px;
}

#diario-de-viagem p{
  position: absolute;
  top:-15px;
  left:15px;
  font-family:'sierra-madre-bold';
  font-size:20.37px;
  text-align: left;
  color:#000;
}

.diario-item-1{
  position: absolute;
  top:103px;
  left:74px;
  background: url('../imgs/diario-item-1.png') no-repeat;
  width:69px;
  height:53px;
}

.diario-item-2{
  position: absolute;
  top:103px;
  left:286px;
  background: url('../imgs/diario-item-2.png') no-repeat;
  width:50px;
  height:52px;
}

.diario-item-3{
  position: absolute;
  top: 96px;
  left: 475px;
  background: url('../imgs/diario-item-3.png') no-repeat;
  width:68px;
  height:67px;
}

.diario-item-4{
  position: absolute;
  top: 113px;
  left: 671px;
  background: url('../imgs/diario-item-4.png') no-repeat;
  width:80px;
  height:53px;
}

.diario-item-5{
  position: absolute;
  top:115px;
  left:870px;
  background: url('../imgs/diario-item-5.png') no-repeat;
  width:80px;
  height:35px;
}

.diario-item-6{
  position: absolute;
  top: 253px;
  left: 86px;
  background: url('../imgs/diario-item-6.png') no-repeat;
  width:46px;
  height:46px;
}

.diario-item-7{
  position: absolute;
  top: 251px;
  left: 272px;
  background: url('../imgs/diario-item-7.png') no-repeat;
  width:71px;
  height:56px;
}

.diario-item-8{
  position: absolute;
  top: 242px;
  left: 488px;
  background: url('../imgs/diario-item-8.png') no-repeat;
  width:45px;
  height:67px;
}

.diario-item-9{
  position: absolute;
  top: 241px;
  left: 903px;
  background: url('../imgs/diario-item-9.png') no-repeat;
  width:16px;
  height:66px;
}

.diario-item-10{
  position: absolute;
  top: 391px;
  left: 74px;
  background: url('../imgs/diario-item-10.png') no-repeat;
  width:75px;
  height:58px;
}

.diario-item-11{
  position: absolute;
  top: 395px;
  left: 276px;
  background: url('../imgs/diario-item-11.png') no-repeat;
  width:69px;
  height:55px;
}

.diario-item-12{
  position: absolute;
  top: 389px;
  left: 487px;
  background: url('../imgs/diario-item-12.png') no-repeat;
  width:38px;
  height:61px;
}

.diario-item-13{
  position: absolute;
  top: 391px;
  left: 673px;
  background: url('../imgs/diario-item-13.png') no-repeat;
  width:76px;
  height:65px;
}

.diario-item-14{
  position: absolute;
  top: 240px;
  left: 686px;
  background: url('../imgs/diario-item-14.png') no-repeat;
  width:48px;
  height:69px;
}

#bt-abrir-diario{
  width: 180px;
  height: 35px;
  position: absolute;
  left: 65px;
}

#bt-fechar-diario{
  position:absolute;
  width:51px;
  height: 31px;
  background: url('../imgs/bt-close-diario.png') no-repeat;
  top: 500px;
  left: 483px;
}

.ang-1{
  position:absolute;
  top: 1039px;
  left: 206px;
  background: url('../imgs/ang-1.png') no-repeat;
  width:59px;
  height:22px;
}

.ang-1:hover{
  position:absolute;
  top: 1036px;
  left: 203px;
  background: url('../imgs/ang-1-sel.png') no-repeat;
  width:67px;
  height:30px;
}

.ang-2{
  position:absolute;
  top: 387px;
  left: 1319px;
  background: url('../imgs/ang-2.png') no-repeat;
  width:192px;
  height:190px;
}

.ang-2:hover{
  position:absolute;
  top: 384px;
  left: 1316px;
  background: url('../imgs/ang-2-sel.png') no-repeat;
  width:200px;
  height:197px;
}

.ang-3{
  position:absolute;
  top: 498px;
  left: 562px;
  background: url('../imgs/ang-3.png') no-repeat;
  width:39px;
  height:40px;
}

.ang-3:hover{
  position:absolute;
  top: 495px;
  left: 559px;
  background: url('../imgs/ang-3-sel.png') no-repeat;
  width:47px;
  height:47px;
}

.ang-4{
  position:absolute;
  top: 1175px;
  left: 495px;
  background: url('../imgs/ang-4.png') no-repeat;
  width:59px;
  height:61px;
}

.ang-4:hover{
  position:absolute;
  top: 1172px;
  left: 492px;
  background: url('../imgs/ang-4-sel.png') no-repeat;
  width:67px;
  height:69px;
}

.nig-1{
  position:absolute;
  top: 915px;
  left: 237px;
  background: url('../imgs/nig-1.png') no-repeat;
  width:34px;
  height:28px;
}

.nig-1:hover{
  position:absolute;
  top: 912px;
  left: 234px;
  background: url('../imgs/nig-1-sel.png') no-repeat;
  width:40px;
  height:35px;
}

.nig-2{
  position:absolute;
  top: 415px;
  left: 180px;
  background: url('../imgs/nig-2.png') no-repeat;
  width:13px;
  height:44px;
}

.nig-2:hover{
  position:absolute;
  top: 412px;
  left: 177px;
  background: url('../imgs/nig-2-sel.png') no-repeat;
  width:21px;
  height:52px;
}

.nig-3{
  position:absolute;
  top: 87px;
  left: 769px;
  background: url('../imgs/nig-3.png') no-repeat;
  width:58px;
  height:51px;
}

.nig-3:hover{
  position:absolute;
  top: 84px;
  left: 766px;
  background: url('../imgs/nig-3-sel.png') no-repeat;
  width:66px;
  height:59px;
}

.nig-4{
  position:absolute;
  top: 590px;
  left: 794px;
  background: url('../imgs/nig-4.png') no-repeat;
  width:37px;
  height:19px;
}

.nig-4:hover{
  position:absolute;
  top: 587px;
  left: 791px;
  background: url('../imgs/nig-4-sel.png') no-repeat;
  width:45px;
  height:27px;
}

.nig-5{
  position:absolute;
  top: 927px;
  left: 944px;
  background: url('../imgs/nig-5.png') no-repeat;
  width:43px;
  height:45px;
}

.nig-5:hover{
  position:absolute;
  top: 924px;
  left: 941px;
  background: url('../imgs/nig-5-sel.png') no-repeat;
  width:51px;
  height:53px;
}

.nig-6{
  position:absolute;
  top: 840px;
  left: 1850px;
  background: url('../imgs/nig-6.png') no-repeat;
  width:64px;
  height:123px;
}

.nig-6:hover{
  position:absolute;
  top: 836px;
  left: 1846px;
  background: url('../imgs/nig-6-sel.png') no-repeat;
  width:71px;
  height:131px;
}

.modal{
  position: absolute;
  top: 60px;
  left: 190px;
  width:663px;
  height:630px;
  background: url('../imgs/box-modal.png') no-repeat;
}

.modal2{
  position: absolute;
  top: 148px;
  left: 190px;
  width:663px;
  height:630px;
  background: url('../imgs/box-modal2.png') no-repeat;
}

.modal3{
  position: absolute;
  top: 300px;
  left: 190px;
  width: 663px;
  height: 232px;
  background: url(../imgs/modal-feedback1.png) no-repeat;
}

.modal4{
  position: absolute;
  top: 200px;
  left: 50px;
  width: 924px;
  height: 372px;
  background: url(../imgs/modal-feedback2.png) no-repeat;
}

.ang-1-modal-image{
  position:absolute; 
  top: 40px;
  left: 217px;
  width:228px;
  height:99px;
  background: url('../imgs/ang-1-modal-image.png') no-repeat;
}

.ang-2-modal-image{
  position:absolute; 
  bottom: 455px;
  left: 307px;
  width:193px;
  height:189px;
  background: url('../imgs/ang-2-modal-image.png') no-repeat;
}

.ang-3-modal-image{
  position:absolute; 
  top: 10px;
  left: 237px;
  width:208px;
  height:152px;
  background: url('../imgs/ang-3-modal-image.png') no-repeat;
}

.ang-4-modal-image{
  position:absolute; 
  top: 10px;
  left: 259px;
  width:141px;
  height:145px;
  background: url('../imgs/ang-4-modal-image.png') no-repeat;
}

.nig-1-modal-image{
  position:absolute; 
  top: 40px;
  left: 217px;
  width:228px;
  height:99px;
  background: url('../imgs/nig-1-modal-image.png') no-repeat;
}

.nig-2-modal-image{
  position:absolute; 
  bottom: 455px;
  left: 307px;
  width:45px;
  height:189px;
  background: url('../imgs/nig-2-modal-image.png') no-repeat;
}

.nig-3-modal-image{
  position:absolute; 
  top:0px;
  left:277px;
  width:106px;
  height:151px;
  background: url('../imgs/nig-3-modal-image.png') no-repeat;
}

.nig-4-modal-image{
  position:absolute; 
  top: 20px;
  left: 265px;
  width:130px;
  height:129px;
  background: url('../imgs/nig-4-modal-image.png') no-repeat;
}

.nig-5-modal-image{
  position:absolute; 
  top: 10px;
  left: 230px;
  width:217px;
  height:158px;
  background: url('../imgs/nig-5-modal-image.png') no-repeat;
}

.nig-6-modal-image{
  position:absolute; 
  bottom: 450px;
  left: 267px;
  width:126px;
  height:190px;
  background: url('../imgs/nig-6-modal-image.png') no-repeat;
}

.soaf-1-modal-image{
  position:absolute; 
  bottom: 470px;
  left: 270px;
  width:107px;
  height:174px;
  background: url('../imgs/soaf-1-modal-image.png') no-repeat;
}

.soaf-2-modal-image{
  position:absolute; 
  bottom: 465px;
  left: 235px;
  width:198px;
  height:156px;
  background: url('../imgs/soaf-2-modal-image.png') no-repeat;
}

.soaf-3-modal-image{
  position:absolute; 
  top: 5px;
  left: 225px;
  width:229px;
  height:166px;
  background: url('../imgs/soaf-3-modal-image.png') no-repeat;
}

.soaf-4-modal-image{
  position:absolute; 
  bottom: 455px;
  left: 225px;
  width:220px;
  height:180px;
  background: url('../imgs/soaf-4-modal-image.png') no-repeat;
}

.soaf-1{
  position:absolute;
  top: 809px;
  left: 1167px;
  background: url('../imgs/soaf-1.png') no-repeat;
  width:214px;
  height:358px;
}

.soaf-1:hover{
  position:absolute;
  top: 805px;
  left: 1163px;
  background: url('../imgs/soaf-1-sel.png') no-repeat;
  width:214px;
  height:358px;
}

.soaf-2{
  position:absolute;
  top: 592px;
  left: 1009px;
  background: url('../imgs/soaf-2.png') no-repeat;
  width:44px;
  height:27px;
}

.soaf-2:hover{
  position:absolute;
  top: 589px;
  left: 1006px;
  background: url('../imgs/soaf-2-sel.png') no-repeat;
  width:44px;
  height:27px;
}

.soaf-3{
  position:absolute;
  top: 1180px;
  left: 665px;
  background: url('../imgs/soaf-3.png') no-repeat;
  width:53px;
  height:27px;
}

.soaf-3:hover{
  position:absolute;
  top: 1177px;
  left: 662px;
  background: url('../imgs/soaf-3-sel.png') no-repeat;
  width:53px;
  height:27px;
}

.soaf-4{
  position:absolute;
  top: 360px;
  left: 753px;
  background: url('../imgs/soaf-4.png') no-repeat;
  width:72px;
  height:63px;
}

.soaf-4:hover{
  position:absolute;
  top: 357px;
  left: 750px;
  background: url('../imgs/soaf-4-sel.png') no-repeat;
  width:72px;
  height:63px;
}

.title-modal{
  position: absolute;
  top: 150px;
  font-family: 'sierra-madre-bold';
  color: #d6a547;
  font-size: 31.62px;
  width: 645px;
  left: 9px;
  text-align: center;
}

.title-modal2{
  position: absolute;
  top: 10px;
  font-family: 'sierra-madre-bold';
  color: #d6a547;
  font-size: 31.62px;
  width: 645px;
  left: 9px;
  text-align: center;
}

.desc-modal{
  position: absolute;
  top: 250px;
  left: 34px;
  font-family: 'sans-serif';
  width: 595px;
  font-size: 18.97px;
  color: #fff;
  text-align: center;
}

.title-modal3{
  position: absolute;
  top: 40px;
  font-family: 'sierra-madre-bold';
  color: #d6a547;
  font-size: 31.62px;
  width: 645px;
  left: 80px;
  text-align: center;
}

.desc-modal3{
  position: absolute;
  top: 100px;
  font-family: 'sans-serif';
  color: #fff;
  font-size: 18.97px;
  width: 555px;
  left: 333px;
  text-align: left;
}

.img-modal3{
  position: absolute;
  top: 50px;
  left: 30px;
}

.close{
  position: absolute;
  top: 550px;
  left: 260px;
  width: 139px;
  height: 35px;
  background: url('../imgs/bt-close.png') no-repeat; 
  text-decoration: none;
}

.close p{
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 20.48px;
  text-decoration: none;
  text-align: center;
  margin-top: 5px;
}

.close2{
  position: absolute;
  top: 450px;
  left: 260px;
  width: 139px;
  height: 35px;
  background: url('../imgs/bt-close.png') no-repeat; 
  text-decoration: none;
}

.close2 p{
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 20.48px;
  text-decoration: none;
  text-align: center;
  margin-top: 5px;
}

.close3{
  position: absolute;
  top: 150px;
  left: 260px;
  width: 139px;
  height: 35px;
  background: url('../imgs/bt-close.png') no-repeat; 
  text-decoration: none;
}

.close3 p{
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 20.48px;
  text-decoration: none;
  text-align: center;
  margin-top: 5px;
}

.close4{
  position: absolute;
  top: 150px;
  left: 260px;
  width: 139px;
  height: 35px;
  background: url('../imgs/bt-close.png') no-repeat; 
  text-decoration: none;
}

.close4 p{
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 20.48px;
  text-decoration: none;
  text-align: center;
  margin-top: 5px;
}

.close5{
  position: absolute;
  top: 290px;
  left: 400px;
  width: 139px;
  height: 35px;
  background: url(../imgs/bt-close.png) no-repeat;
  text-decoration: none;
}

.close5 p{
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 20.48px;
  text-decoration: none;
  text-align: center;
  margin-top: 5px;
}


.mascara{
    display:none;
    z-index:1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    background-color:#fff;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.btvoltar{
  position: absolute;
  top: 20px;
  left: 0px;
  width: 263px;
  height: 58px;
  background: url('../imgs/bt-voltar.png') no-repeat; 
  text-decoration: none;
}

.btvoltar p{
  font-family: 'sierra-madre-bold';
  color: #000;
  font-size: 25px;
  text-decoration: none;
  text-align: left;
  margin-top: 12px;
  margin-left: 20px;
}

