﻿@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: #00BCE4;
	background-image: url(../../2a_pag_pintar/imatges_72_2a_pintar/prova_fondo_4_1725_960.png);
	background-repeat:repeat;
	background-size: auto;
	background-position: center center;
	text-align: center;
	margin: 0;
	padding: 0;
}
.drop{
    background-color: Blue;
    color: White;
    margin: 3px;
    padding: 10px;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
	widht:100px;
	height:100px;
                }
#container {
	width: 961px;
	text-align: left;
	background: #ebf7ff;
	background-image: url(../imatges/72ppp/index3_PANTALLAGRAN_CONTAINERPETITA.jpg);
	margin: 0 auto;
	background-repeat: no-repeat;
	}
#container1{
	position:relative;
	height: 994px;
	}
#bocadillo{
	opacity:0.8;
	display:none;
	}
.bocadilloClass{
	position:absolute;
	top:117px;
	left:105px;
	width:500px;
	height:190px;}
#bocadilloRecuadre{
	width:612px;
	height:208px;
	}
#headerAnimacio{
	line-height:130px;
	font-family:"FolksB", serif;
	font-size: 3.2em;
	color:#00BCE4;
	height: 100px;
	width:500px;
				padding-top:3px;
				position: relative;
				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:200px; top:0px;opacity:1; }
				100%{ left:400px; top:0px;opacity:0;}
		}
		@-webkit-keyframes primeraAnimacion{
				0%{ left:0px; top:0px;opacity:0; }
				50%{ left:200px; top:0px;opacity:1; }
				100%{ left:400px; top:0px;opacity:0;}
		}
		@-moz-keyframes primeraAnimacion{
			0%{ left:0px; top:0px;opacity:0; }
				50%{ left:200px; top:0px;opacity:1; }
				100%{ left:400px; top:0px;opacity:0;}
		}

.PESSESPUZZLE{
	position:absolute;
}
.pessa1 {
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
	left: 510px;
	bottom: -110px;
	position: absolute;
    width: 186px;
	height: 220px;
	z-index:2;
}
.pessa2 {
     bottom: -60px;
     cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
     height: 183px;
     left: 728px;
     position: absolute;
     width: 225px;
     z-index: 2;
}
.pessa3 {
	/*border:thin dashed;*/
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
  
	bottom: 131px;
    left: 705px;
	position: absolute;
    width: 224px;
	z-index:2;
}
.pessa4 {
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
    height: 222px;
	left: 510px;
	bottom:140px;
    position: absolute;
    width: 182px;
	z-index:2;
}
.PUZZLEACABAT{
	position:absolute;
	}
.sortable1,.sortable2,.sortable3,.sortable4{
	 position: absolute;
     left:0px;
     top:-450px;
     width:530px;
	 height:550px;
}
.pessa1FINAL {
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
    height: 222px;
	left:75px;
	bottom:128px;
    position: absolute;
    width: 182px;
	z-index:2;

}

.pessa2FINAL {
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
	left:200px;
	bottom:164px;
    position: absolute;
 height: 186px;

     width: 220px;
	z-index:2;
}

.pessa3FINAL {
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
   	bottom:4px;
    left: 73px;
	position: absolute;
    width: 224px;

	z-index:2;
}

.pessa4FINAL {
    cursor: url("../imatges/72ppp/cursor_puzzle.png"), pointer;
    height: 222px;
	left:242px;
	bottom:4px;
    position: absolute;
    width: 178px;
	z-index:2;
}
#botoBocadillo{
	cursor: url(../../2a_pag_pintar/imatges_72_2a_pintar/BummiCursorBocadillo64x64.png), pointer;
	position:absolute;
	height:350px;
	width:300px;
	right:50px;
	top:35px;
		}
.bimme{
	cursor: url(../../2a_pag_pintar/imatges_72_2a_pintar/BummiCursorBocadillo64x64.png), pointer;
	position:absolute;
	height:406px;
	width:343px;
	right:38px;
	top:18px;
		}
.bimmeFelicitacio{
	position:absolute;
	right:45px;
	top:18px;
	width:322px;
    height:435px;
	display:none;
	z-index:2;
	}
.bocadilloFELICITACIO{
	position:absolute;
	top:117px;
	left:105px;
	width:500px;
	height:190px;
	display:none;
}
.ombra{
	position:absolute;
	right:110px;
	top:400px;
	width:190px;
    height:68px;
	display:none;
	}	
.puzzle1ACABAT_BevelEmboss{
     position:absolute;
     bottom:4px;
     left:73px;
	 z-index:10;
	}
.puzzle1REF{
     position:absolute;
     bottom:4px;
     left:73px;
	 z-index:33;
	}
.puzzle1REFdurant{
     position:absolute;
     bottom:0px;
     left:0px;
	 z-index:0;
	}

.footer{
	position:absolute;
	width:961px;
	height:150px;
	top:100px;
	}
.VEsq{
	position:absolute;
	left:20px;
	bottom:5px;
}
.VCen{
	position:absolute;
	left:195px;
	bottom:5px;}
.VDre{
	position:absolute;
	left:370px;
	bottom:5px;}
a {
	cursor: url(../../imatges_72/BummiCursor48x48.png), pointer;
	color:#FFF;
	text-decoration: none;
}
#botoEsquerra:hover{
	opacity:0.7;
	}
#botoEsquerra{
	position:absolute;
	right:20px;
	font-family:"NunitoB";
	letter-spacing:1px;
	line-height:1.8em;
	text-align:center;
	font-size:1.9em;
	/*float: right;*/
	width:205px; 
	height:55px;
	/*padding-top:30px;
	padding-left:10px;
	padding-right:10px;*/
	margin-left:69px;
	margin-bottom:20px;
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	-o-transform:rotate(10deg);
	transform:rotate(10deg);
	background-color:#00bce4;
	border-radius:15px;
	border:3px solid #FFF;
	-webkit-box-shadow:-5px 5px 4px rgba(72,72,72,1);
	-moz-box-shadow:-5px 5px 4px rgba(72,72,72,1);
	box-shadow:-5px 5px 4px rgba(72,72,72,1);
	z-index:1;-webkit-z-index:1;
	}
#trianglEsquerra{
	position:absolute;
	height:48px;
	width:68px;
	left:570px;
	bottom:30px;
		}
#triangleDret{
	position:absolute;
	height:48px;
	width:68px;
	right:245px;
	bottom:30px;
		}
