@charset "utf-8";
/* CSS Document */

@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 {
	font: 100%/1.4 Nunito, Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 1.5px;
	background: #00BCE4;
	background-image: url(../imatges_72/prova_fondo_4_1725_960.png);
	background-repeat:repeat;
	background-size: auto;
	background-position: center center;
	text-align: center;
	margin: 0;
	padding: 0;
}
.container {
	position:relative;
	width: 960px;
	height:994px;
	text-align: left;
	background: #ffff00;
	background-image: url(../imatges_72/ilu_indexLletres_cercle_456x640_FONDOBLAU2PETITA.jpg),
	url(../imatges_72/barra_header_960x176.png);
	margin: 0 auto;
	background-repeat: no-repeat;
}
#headerAnimacio{
	font-family:"FolksB", serif;
	font-size: 1.3em;
	text-align: center;
	color:#00BCE4;
	height: 176px;
	width: 960px;
				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:-70px; top:0px;opacity:0; }
				50%{ left:0px; top:0px;opacity:1; }
				100%{ left:70px; top:0px;opacity:0;}
		}
		@-webkit-keyframes primeraAnimacion{
				0%{left:-70px; top:0px; opacity:0;}
				50%{ left:0px; top:0px;opacity:1; } 		
				100%{ left:70px; top:0px;opacity:0;}	
		}
		@-moz-keyframes primeraAnimacion{
				0%{  left:-70px; top:0px;opacity:0; }
				50%{ left:0px; top:0px;opacity:1; }
				100%{ left:70px; top:0px;opacity:0;}
		}

}
.lletraVermella{color:#FF0000;}
.lletraVerdaClar{color:#00FF33;font-size: 1em; font-weight:bold;}
.lletraVerda{color:#4CB94E;}
.lletraTaronja{color:#F07731;}
.lletraBlauFosc{color:#2B60D4;}
.lletraMorat{color:#A941E5;}
.lletraGranate{color:#C1272D;}
.content{
	width: 960 px;
	margin-bottom: 10px;
	}
#col_Esq {
	float: left;
	width: 25%;
}
#col_Mig {
	float: left;
	width: 49%;
	background-repeat:no-repeat;
	}
.classImatgeColMig:hover{
	left:5px;
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	-o-transform:rotate(10deg);
	transform:rotate(10deg);}
#col_Dret {
	float: right;
	width: 26%;
}
#botoEsquerra {
	line-height:1.31em;
	text-align:center;
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	width: 200px;
        height: 70px;
	padding:5px;
	margin-left:50px;
	opacity:1;
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	-o-transform:rotate(-10deg);
	transform:rotate(-10deg);
	color: #EEE809;
	background-color:#2B60D4;
	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);
	}
#botoEsquerra:hover{
	line-height:1.31em;
	text-align:center;
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	width: 200px;
        height: 70px; 
	padding:5px;
	margin-left:50px;
	opacity:0.7;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	color: #EEE809;
	background-color:#2B60D4;
	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);
	}
/*.textShadow{
	color:#00FF33;
	text-shadow:0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1),
	0px 0px 1px rgba(255,255,0,1);}*/
.Vinyeta1{
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	margin-left:15px;
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	transform:rotate(5deg);
	}
.Vinyeta2{
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	position:relative;
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	-o-transform:rotate(10deg);
	transform:rotate(10deg);
	z-index:1;
	}
.Vinyeta1:hover{
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	opacity:0.7;
	margin-left:15px;
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	transform:rotate(5deg);
	}
.Vinyeta2:hover{
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	opacity:0.7;
	position:relative;
	-webkit-transform:rotate(10deg);
	-moz-transform:rotate(10deg);
	-ms-transform:rotate(10deg);
	-o-transform:rotate(10deg);
	transform:rotate(10deg);
	}
#pessaPuzzle{
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	position:absolute;
	top:600px;
	z-index:3;
	}
#botoDreta{
	line-height:1.31em;
	text-align:center;
	letter-spacing: 1px;
	width: 200px; 
	height: 70px;
	padding:5px;
	margin-right:60px;
	-webkit-transform:rotate(-10deg);
	-moz-transform:rotate(-10deg);
	-ms-transform:rotate(-10deg);
	-o-transform:rotate(-10deg);
	transform:rotate(-10deg);
	color: #FDFBDD;
	background-color:#BB50BC;
	border-radius:15px;
	border:3px solid #FFFFFF;
	-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:2;
	}
a {
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	color: #FF6;
	text-decoration: none;
}
#botoDreta:hover{
	line-height:1.31em;
	text-align:center;
	cursor: url(../imatges_72/BummiCursor48x48.png), pointer;
	width: 200px; 
	padding:5px;
	margin-right:60px;
	opacity:0.7;
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
	color: #FDFBDD;
	background-color:#BB50BC;
	border-radius:15px;
	border:3px solid #FFFFFF;
	-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);
	}
	
#footer{
	position:absolute;
	top:783px;
	font-family:"NunitoB";
	font-size:0.09em;
	letter-spacing:-1px;
	clear:both;
	text-align: center;
	background-image: url(../imatges_72/footer_960x170.png);
	background-repeat: no-repeat;
	background-size: auto;
	background-position: center center;
	color:#00BCE4;
	font-size:1.7em;
	line-height:30px;
	height: 222px;
	width: 960px;
	}
.correrDreta{
	position:absolute;
	top:100px;
	right:360px;}
.fltrt {
	position:absolute;
	top:160px;
	right:20px;
	}
.fltlft {
	position:absolute;
	top:160px;
	left:20px;
}

			