@charset "utf-8";
/* CSS Document */
*{padding:0;margin:0}

#nostalgiaaa{
  width:560px;
  height:auto;
  overflow-x: hidden;
  padding:0;
  margin:0;
  background:#fff;
}
@media screen and (max-width: 480px) {
    #nostalgiaaa{
      width: 480px; 
      height: auto;
    }
}
@media screen and (max-width: 375px) {
    #nostalgiaaa{
      width: 375px; 
      height: auto;
    }
}
@media screen and (max-width: 360px) {
    #nostalgiaaa{
      width: 360px; 
      height: auto;
    }
}
@media screen and (max-width: 320px) {
    #nostalgiaaa{
      width: 320px; 
      height: auto;
    }
}

.fundooo{
  width:560px;
  height:1535px;
  z-index:-1;
}
@media screen and (max-width: 480px) {
    .fundooo{
      width: 480px; 
      height: auto;
    }
}
@media screen and (max-width: 375px) {
    .fundooo{
      width: 375px; 
      height: auto;
    }
}
@media screen and (max-width: 360px) {
    .fundooo{
      width: 360px; 
      height: auto;
    }
}
@media screen and (max-width: 320px) {
    .fundooo{
      width: 320px; 
      height: auto;
    }
}

.imagemmm1, .imagemmm2, .imagemmm3, .imagemmm4{
  width:170px;
  height:auto;
  position: absolute;
}

.imagemmm1{
  top: 34px;
  left: 25px;
}
@media screen and (max-width: 375px) {
    .imagemmm1{
      top: 28px;
      left: 18px;
    }
}
@media screen and (max-width: 360px) {
    .imagemmm1{
      top: 27px;
      left: 18px;
    }
}
@media screen and (max-width: 320px) {
    .imagemmm1{
      top: 27px;
      left: 18px;
    }
}

.imagemmm2{
  top: 34px;
  left: 25px;
}

.imagemmm3{
  top: 34px;
  left: 25px;
}

.imagemmm4{
  top: 34px;
  left: 25px;
}  

.thumbs{
	float:left;
	cursor: pointer;
}

.btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
  width:50px;
  height:50px;
}

@media screen and (max-width: 480px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width: 50px; 
      height: 50px;
      /*margin:10px 0 10px 15px;*/
    }
}
@media screen and (max-width: 375px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width: 50px; 
      height: 50px;
    }
}
@media screen and (max-width: 360px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width: 50px; 
      height: 50px;
    }
}
@media screen and (max-width: 320px) {
    .btn-thumbs-1, .btn-thumbs-2, .btn-thumbs-3, .btn-thumbs-4{
      width: 35px; 
      height: 35px;
    }
}

/*clicks*/

#click_um{
  width: 51px;
  height: 51px;
  z-index: 1000;
  position: absolute;
  top: 235px;
  left: 254px;
}
@media screen and (max-width: 480px) {
    #click_um{
      width: 51px; 
      height: 51px;
      top: 235px;
      left: 215px;
    }
}
@media screen and (max-width: 375px) {
    #click_um{
      width: 51px; 
      height: 51px;
      top:200px;
      left:161px;
    }
}
@media screen and (max-width: 360px) {
    #click_um{
      width: 51px; 
      height: 51px;
      top:149px;
      left:155px;
    }
}
@media screen and (max-width: 320px) {
    #click_um{
      width: 51px; 
      height: 51px;
      top:160px;
      left:142px;
    }
}

#click_dois{
  width: 51px;
  height: 51px;
  z-index:1000;
  position:absolute;
  top: 785px;
  left: 239px;
}
@media screen and (max-width: 480px) {
    #click_dois{
      width: 51px; 
      height: 51px;
      top: 655px;
      left: 199px;
    }
}
@media screen and (max-width: 375px) {
    #click_dois{
      width: 51px; 
      height: 51px;
      top:555px;
      left:149px;
    }
}
@media screen and (max-width: 360px) {
    #click_dois{
      width: 51px; 
      height: 51px;
      top:290px;
      left:155px;
    }
}
@media screen and (max-width: 320px) {
    #click_dois{
      width: 51px; 
      height: 51px;
      top:452px;
      left:132px;
    }
}

#click_tres{
  width: 51px;
  height: 51px; 
  z-index:1000;
  position:absolute;
  top: 935px;
  left: 240px;
}
@media screen and (max-width: 480px) {
    #click_tres{
      width: 51px; 
      height: 51px;
      top: 807px;
      left: 227px;
    }
}
@media screen and (max-width: 375px) {
    #click_tres{
      width: 100px; 
      height: 100px;
      top: 697px;
      left: 157px;
    }
}
@media screen and (max-width: 360px) {
    #click_tres{
      width: 51px; 
      height: 51px;
      top:593px;
      left:152px;
    }
}
@media screen and (max-width: 320px) {
    #click_tres{
      width: 51px; 
      height: 51px;
      top:569px;
      left:140px;
    }
}

#click_quatro{
  width: 51px;
  height: 51px; 
  z-index:1000;
  position:absolute;
  top: 1345px;
  left: 233px;
}
@media screen and (max-width: 480px) {
    #click_quatro{
      width: 51px; 
      height: 51px;
      top: 1147px;
      left: 226px;
    }
}
@media screen and (max-width: 375px) {
    #click_quatro{
      width: 51px; 
      height: 51px;
      top:897px;
      left:166px;
    }
}
@media screen and (max-width: 360px) {
    #click_quatro{
      width: 100px; 
      height: 100px;
      top:853px;
      left:161px;
    }
}
@media screen and (max-width: 320px) {
    #click_quatro{
      width: 80px; 
      height: 80px;
      top:764px;
      left:148px;
    }
}


#um{
  display: none;
  position: absolute;
  top: 5px;
  left: 155px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 10000;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
@media screen and (max-width: 480px) {
    #um{
      top: 5px;
      left: 155px;
    }
}
@media screen and (max-width: 375px) {
    #um{
      width: 180px;
      height: 180px;
      top: 3px;
      left: 75px;
    }
}
@media screen and (max-width: 360px) {
    #um{
      width: 180px;
      height: 180px;
      top: 4px;
      left: 72px;
    }
}
@media screen and (max-width: 320px) {
    #um{
      top: 305px;
      left: 37px;
    }
}

#dois{
  display: none;
  position: absolute;
  top: 315px;
  left: 155px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 10000;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
@media screen and (max-width: 480px) {
    #dois{
      top: 225px;
      left: 124px;
    }
}
@media screen and (max-width: 375px) {
    #dois{
      top: 145px;
      left: 24px;
    }
}
@media screen and (max-width: 360px) {
    #dois{
      top: 136px;
      left: 62px;
    }
}
@media screen and (max-width: 320px) {
    #dois{
      top: 85px;
      left: 35px;
    }
}

#tres{
  display: none;
  position: absolute;
  top: 710px;
  left: 155px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 10000;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
@media screen and (max-width: 480px) {
    #tres{
      top: 570px;
      left: 125px;
    }
}
@media screen and (max-width: 375px) {
    #tres{
      top: 400px;
      left: 75px;
    }
}
@media screen and (max-width: 360px) {
    #tres{
      top: 370px;
      left: 55px;
    }
}
@media screen and (max-width: 320px) {
    #tres{
      top: 320px;
      left: 45px;
    }
}


#quatro{
  display: none;
  position: absolute;
  top: 1095px;
  left: 155px;
  padding: 10px;
  background: #fff;
  border: 1px solid #ccc;
  z-index: 10000;
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
@media screen and (max-width: 480px) {
    #quatro{
      top: 915px;
      left: 142px;
    }
}
@media screen and (max-width: 375px) {
    #quatro{
      top: 665px;
      left: 82px;
    }
}
@media screen and (max-width: 360px) {
    #quatro{
      top: 615px;
      left: 75px;
    }
}
@media screen and (max-width: 320px) {
    #quatro{
      top: 475px;
      left: 53px;
    }
}



#fechar_um{
  position:absolute;
  top:6px;
  left:159px;
  cursor:pointer;
}
@media screen and (max-width: 480px) {
    #fechar_um{  
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 360px) {
    #fechar_um{ 
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 320px) {
    #fechar_um{ 
      top: 9px;
      left: 158px;
    }
}

#fechar_dois{
  position:absolute;
  top:6px;
  left:159px;
  cursor:pointer;
}
@media screen and (max-width: 480px) {
    #fechar_dois{  
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 360px) {
    #fechar_dois{ 
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 320px) {
    #fechar_dois{ 
      top: 9px;
      left: 158px;
    }
}

#fechar_tres{
  position:absolute;
  top:6px;
  left:159px;
  cursor:pointer;
}
@media screen and (max-width: 480px) {
    #fechar_tres{  
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 360px) {
    #fechar_tres{ 
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 320px) {
    #fechar_tres{ 
      top: 9px;
      left: 158px;
    }
}

#fechar_quatro{
  position:absolute;
  top:6px;
  left:159px;
  cursor:pointer;
}
@media screen and (max-width: 480px) {
    #fechar_quatro{  
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 360px) {
    #fechar_quatro{ 
      top: 9px;
      left: 158px;
    }
}
@media screen and (max-width: 320px) {
    #fechar_quatro{ 
      top: 9px;
      left: 158px;
    }
}






	



