@font-face {
  font-family: "FolksB";
  src: url("../fonts/Folks-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "BReplayB";
  src: url("../fonts/BPreplayBold.otf") format("truetype");
}

@font-face {
  font-family: "BReplay";
  src: url("../fonts/BPreplay.otf") format("truetype");
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/Nunito-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "NunitoB";
  src: url("../fonts/Nunito-Bold.ttf") format("truetype");
}

body {
     background: url("../../2a_pag_pintar/imatges_72_2a_pintar/prova_fondo_4_1725_960.png") repeat scroll center center #00BCE4;
     margin: 0px;
     padding: 0px;
     text-align: center;
}

#container {
     background: url("../imatges/72ppp/index3_800x600_72ppp_CONTAINERPETITA.jpg") no-repeat scroll 0% 0% #EBF7FF;
     height: 600px;
     margin: 0px auto;
     text-align: left;
     width: 800px;
}

#container1 {
     height: 600px;
     position: relative;
}

.bocadilloClass {
     height: 138px;
     width: 425px;
}

#bocadillo {
     display: none;
     opacity: 0.8;
}

#bocadilloRecuadre {
     left: 105px;
     position: absolute;
     top: 68px;
     z-index: 1;
}

#headerAnimacio {
     
     color: #00BCE4;
     font-family: "FolksB",serif;
     font-size: 3em;
     height: 100px;
     line-height: 75px;
     padding-top: 3px;
     position: relative;
     width: 500px;
	 animation: primeraAnimacion 20s;
				animation-iteration-count:infinite;
				-webkit-animation: primeraAnimacion 20s;
				-webkit-animation-iteration-count:infinite;
				-moz-animation: primeraAnimacion 20s;
				-moz-animation-iteration-count:infinite;
}

@keyframes primeraAnimacion{
0% { left: 0px; top: 0px; opacity: 0; }
50% { left: 100px; top: 0px; opacity: 1; }
100% { left: 190px; top: 0px; opacity: 0; }
}
@-webkit-keyframes primeraAnimacion{
0% { left: 0px; top: 0px; opacity: 0; }
50% { left: 100px; top: 0px; opacity: 1; }
100% { left: 190px; top: 0px; opacity: 0; }
}
@-moz-keyframes primeraAnimacion{
0% { left: 0px; top: 0px; opacity: 0; }
50% { left: 100px; top: 0px; opacity: 1; }
100% { left: 190px; top: 0px; opacity: 0; }
}
.PESSESPUZZLE {
     position: absolute;
}

.pessa1 {
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 166px;
     left: 650px;
     position: absolute;
     top: -100px;
     width: 139px;
     z-index: 2;
}

.pessa2 {
     bottom: -54px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 135px;
     left: 470px;
     position: absolute;
     width: 167px;
     z-index: 2;
}

.pessa3 {
     bottom: 109px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 140px;
     left: 620px;
     position: absolute;
     width: 166px;
     z-index: 2;
}

.pessa4 {
     bottom: 100px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 160px;
     left: 470px;
     position: absolute;
     width: 135px;
     z-index: 2;
}

.PUZZLEACABAT {
     position: absolute;
}

.sortable1,.sortable2,.sortable3,.sortable4 {
  
     height:470px;
     left: 50px;
     position: absolute;
     top:-460px;
     width:400px;
}
.pessa1FINAL {
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 166px;
     left:115px;
     position: absolute;
     top:-370px;
     width: 139px;
     z-index: 2;
}

.pessa3FINAL {
     bottom: 109px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 140px;
     left:115px;
     position: absolute;
     width: 166px;
     z-index: 2;
}


.pessa2FINAL {
     top:-368px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 135px;
     left: 208px;
     position: absolute;
     width: 167px;
     z-index: 2;
}

.pessa4FINAL {
      bottom: 109px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 171px;
     left: 239px;
     position: absolute;
     width: 135px;
     z-index: 2;
}
.bimmeFelicitacio {
     display: none;
     height: 325px;
     position: absolute;
     right: 45px;
     top: 18px;
     width: 241px;
     z-index: 2;
}

.bocadilloFELICITACIO {
     display: none;
     height: 142px;
     left: 130px;
     position: absolute;
     top: 70px;
     width: 380px;
     z-index:4;
}

.ombra {
     display: none;
     height: 68px;
     position: absolute;
     right: 53px;
     top: 290px;
     width: 190px;
}

.puzzle1ACABAT_BevelEmboss {
     bottom: 110px;
     display: none;
     left: 115px;
     position: absolute;
     width: 260px;
     z-index: 3;
}

.puzzle1REF {
     bottom: 109px;
     left: 115px;
     position: absolute;
     width: 260px;
     z-index: 33;
}
.puzzle1REFdurant{
   bottom:0px;
     left: 0px;
     position: absolute;
     width: 260px;
	 z-index:1;
	}
.footer {
     height: 100px;
     position: absolute;
     top: -30px;
     width: 799px;
}

.VEsq {
     bottom: 5px;
     left: 145px;
     position: absolute;
     width: 80px;
}

.VCen {
     bottom: 5px;
     left: 240px;
     position: absolute;
     width: 80px;
}

.VDre {
     bottom: 5px;
     left: 330px;
     position: absolute;
     width: 80px;
}

a {
     color: #FFFFFF;
     cursor: url("../../imatges_72/BummiCursor48x48.png"), pointer;
     text-decoration: none;
}

#botoEsquerra:hover {
     opacity: 0.7;
}

#botoEsquerra {
     -webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	-o-transform:rotate(10deg);
     background-color: #00BCE4;
     border-radius: 15px 15px 15px 15px;
     border: 3px solid #FFFFFF;
     bottom: 82px;
     box-shadow: -5px 5px 4px #484848;
     font-family: "NunitoB";
     font-size: 1em;
     height: 39px;
     left: 240px;
     letter-spacing: 1px;
     line-height: 2.4em;
     margin-bottom: 20px;
     margin-left: 69px;
     position: absolute;
     text-align: center;
     width: 125px;
     z-index: 1;
}

.trianglEsquerra {
     bottom: 20px;
     height: 28px;
     left: 75px;
     position: absolute;
     width: 40px;
}

.triangleDret {
     bottom: 46px;
     height: 28px;
     left: 75px;
     position: absolute;
     width: 40px;
}

.bimme {
     cursor: url("../../2a_pag_pintar/imatges_72_2a_pintar/BummiCursorBocadillo64x64.png"), pointer;
     height: 283px;
     position: absolute;
     right: 38px;
     top: 18px;
     width: 239px;
}