body {
  font-family: 'Lato', 'Tahoma', 'Optima', 'Verdana', 'Lucida Sans Unicode', 'Helvetica', 'Arial', 'sans-serif', 'Lucida Grande', ;
  margin: 0px auto;
}

#caixamenu {
background-image: url(../imatges/degradat4.jpg);
height: 15px;
width: 80%;
padding: 10px;
/*para Firefox*/
-moz-border-radius: 15px 15px 15px 15px;
/*para Safari y Chrome*/
-webkit-border-radius: 15px 15px 15px 15px;
/* para Opera */
border-radius: 15px 15px 15px 15px;
/* para IE */
behavior:url(border.htc);
}

#texcen {
    width: 50%;
	float: center;
}

#texpro {
    width: 60%;
	float: center;
}

#bshad {
    width: 80%;
	float: center;
	-webkit-box-shadow: 4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    -moz-box-shadow:    4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    box-shadow:         4px 4px 5px 5px rgba(50, 50, 50, 0.30);
}
#bshad2 {
    width: 45%;
	float: right;
    margin-bottom: 40px;
	-webkit-box-shadow: 4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    -moz-box-shadow:    4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    box-shadow:         4px 4px 5px 5px rgba(50, 50, 50, 0.30);
	border-radius: 5%;
}


#bshad1 {
    width: 45%;
	float: left;
    margin-bottom: 40px;
	-webkit-box-shadow: 4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    -moz-box-shadow:    4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    box-shadow:         4px 4px 5px 5px rgba(50, 50, 50, 0.30);
	border-radius: 5%;
}

#bshad1 li {
   display: inline;
}

#imag  ul{
   padding: 0px;
   margin: 0px;
   background-color: #FFFFFF;
   list-style: none;
   width: 60%;
}

#imag li {
   display: inline;
}


#menu ul {
   padding: 0px;
   margin: 0px;
   background-color: #FFFFFF;
   list-style: none;
   font-family: 'Lato', 'Optima', 'Tahoma', 'Verdana';
   font-size: 11px;
   font-weight: bold;
   width: 100%;
   height: 30px;
}

#menu ul li {
   display: inline;
}

#menu ul li a:link, #menu ul li a:visited {
   background-color: #FFFFFF;
   color: #86BCD5;
   padding: 5px 15px;
   text-decoration: none;
}

#menu ul li a:hover, #menu ul li a:active {
      color: #E68646;
      background-color: #FFFFFF;
      height: 20px;
   }

.rodo {
	-webkit-box-shadow: 4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    -moz-box-shadow:    4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    box-shadow:         4px 4px 5px 5px rgba(50, 50, 50, 0.30);
	border-radius: 5%;
    padding:0;
}	
	
.rodo2 {
	-webkit-box-shadow: 4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    -moz-box-shadow:    4px 4px 5px 5px rgba(50, 50, 50, 0.30);
    box-shadow:         4px 4px 5px 5px rgba(50, 50, 50, 0.30);
	border-radius: 5px;
    padding:0;
}

   
.whites {background:#B0CAE5; color: #FFFFFF; font-family: verdana; font-size: small; font-weight=500 text-decoration: none}
.whitemed {color: #FFFFFF; font-family: tahoma; font-size: medium; font-weight=500 text-decoration: none}
.blues {color: #000099; font-family: verdana; font-size: xx-small; font-weight=500 text-decoration: none}
.bluesbig {color: #000099; font-family: verdana; font-size: x-small; font-weight=500 text-decoration: none}
.bluesbig2 {color: #000099; font-family: tahoma; font-size: small; font-weight=500 text-decoration: none}
.bluesmed {color: #000099; font-family: tahoma; font-size: medium; font-weight=500 text-decoration: none}
.gray2med {color: #837E7E; font-family: Lato; font-size: medium; font-weight=500 text-decoration: none}
.graymed {color: #4E6B91; font-family: Lato; font-size: medium; font-weight=500 text-decoration: none}
.rednormal {color: #ffffff; background-color: #ff0000; font-family: verdana; font-size: x-small; font-weight=500 text-decoration: none}
.redsmall1 {color: #ffffff; background-color: #ff0000; font-family: verdana; font-size: xx-small; font-weight=500 text-decoration: none}
.redsmall {color: #ff0000; font-family: verdana; font-size: xx-small; font-weight=500 text-decoration: none}
.redsmall2 {color: #ff0000; font-family: verdana; font-size: x-small; font-weight=500 text-decoration: none}
.redsmall3 {color: #ff0000; font-family: tahoma; font-size: small; font-weight=500 text-decoration: none}
.redlarge {color: #ff0000; font-family: verdana; font-size: large; font-weight=500 text-decoration: none}
.redmistral {color: #ff0000; font-family: mistral; font-size: x-large; font-weight=500 text-decoration: none}
.greensmall {color: #00ff00; font-family: verdana; font-size: xx-small; font-weight=500 text-decoration: none}
.blackss {color: #000000; font-family: verdana; font-size: xx-small; font-weight=500 text-decoration: none}
.Blacks {color: #000000; font-family: Lato; font-size: small; font-weight=500 text-decoration: none}
.blackmed {color: #000000; font-family: verdana; font-size: small; font-weight=500 text-decoration: none}
.redspecial {color: #ff0000; background-color: #ffffff; font-family: verdana; font-style: italic; font-size: x-large; font-weight=500 text-decoration: none}
.greybig2 {color: #555555; font-family: tahoma; font-size: small; font-weight=500 text-decoration: none}
#loading {font-family: verdana; font-size: small; width: 200px; height: 100px;  background-color: #c0c0c0;  position: absolute; left: 50%; top: 50%; margin-top: -50px; margin-left: -100px; text-align: center;}

a:link {color: #003366; text-decoration: none}
a:active {color: #003366; text-decoration: none}
a:visited {color: #003399; text-decoration: none}
a:hover { color: #336699; text-decoration: none}

a.blancosin:link {color: #FFFFFF; text-decoration: none}
a.blancosin:active {color: #FFFFFF; text-decoration: none}
a.blancosin:visited {color: #FFFFFF ; text-decoration: none}
a.blancosin:hover { color: #E68646; font-size=xx-small; text-decoration: none}

a.blanco1:link {color: #000099; text-decoration: none}
a.blanco1:active {color: #000099; text-decoration: none}
a.blanco1:visited {color: #000099; text-decoration: none}
a.blanco1:hover { color: #FF0000; text-decoration: none}

a.blanco2:link {color: #3B9ECC; text-decoration: underline}
a.blanco2:active {color: #86BCD5; text-decoration: underline}
a.blanco2:visited {color: #86BCD5; text-decoration: underline}
a.blanco2:hover {color: #E68646; text-decoration: underline}

a.red2:link {color: #FF0000; text-decoration: underline}
a.red2:active {color: #FF0000; text-decoration: underline}
a.red2:visited {color: #FF0000; text-decoration: underline}
a.red2:hover {color: #994400; text-decoration: underline}

a.blancosin1:link {color: #FFFFFF; text-decoration: none}
a.blancosin1:active {color: #FFFFFF; text-decoration: none}
a.blancosin1:visited {color: #FFFFFF    ; text-decoration: none}
a.blancosin1:hover { color: #FFFFCC; text-decoration: none}

a.azulsin:link {color: #003366; text-decoration: underline}
a.azulsin:active {color: #003366; text-decoration: underline}
a.azulsin:visited {color: #003399   ; text-decoration: none}
a.azulsin:hover { color: #336699; text-decoration: none}

a.azulcon:link {color: #003366; }
a.azulcon:active {color: #003366; }
a.azulcon:visited {color: #003399; }
a.azulcon:hover { color: #336699; }

a.azulsin2:link {color: #336699; text-decoration: none}
a.azulsin2:active {color: #003366; text-decoration: none}
a.azulsin2:visited {color: #006699  ; text-decoration: none}
a.azulsin2:hover { color: #003366; text-decoration: none}

a.negrocon:link {color: #000000;}
a.negrocon:active {color: #000000;}
a.negrocon:visited {color: #666666;}
a.negrocon:hover { color: #666666;}

a.negrosin:link {color: #000000; text-decoration: none}
a.negrosin:active {color: #000000; text-decoration: none}
a.negrosin:visited {color: #666666  ; text-decoration: none}
a.negrosin:hover { color: #666666; text-decoration: none}

a.naranjacon:link {color: #336699; }
a.naranjacon:active {color: #CC6600; }
a.naranjacon:visited {color: #CC9900; }
a.naranjacon:hover { color: #FF6600; }

a.naranjasin:link {color: #CC6600; text-decoration: none}
a.naranjasin:active {color: #000000; text-decoration: none}
a.naranjasin:visited {color: #CC6633 ; text-decoration: none}
a.naranjasin:hover { color: #CC0000; text-decoration: none}

.rojo {color: #0000cc; text-decoration: none}

a.grissin:link {color: #999999; text-decoration: none}
a.grissin:active {color: #999999; text-decoration: none}
a.grissin:visited {color: #999999 ; text-decoration: none}
a.grissin:hover { color: #999999; text-decoration: none}

.emphasize {background-color: #0000cc}

a.grissin2:link {color: #808080; text-decoration: none}
a.grissin2:active {color: #EEEEEE; text-decoration: none}
a.grissin2:visited {color: #808080  ; text-decoration: none}
a.grissin2:hover { color: #808080; text-decoration: none}



.wraper{ width:100%; margin:0 auto; overflow:hidden; border-color:#222; border:2px;}
.interno1{ float:left; width:5%; height:300px; margin-right:0px;}
.interno2{ float:left; width:45%; height:300px; margin-right:0px;}
.interno3{ float:left; width:45%; height:300px; margin-right:0px;}
.interno4{ float:left; width:5%; height:300px; margin-right:0px;}

.interno1a{ float:left; width:20%; height:170px; margin-right:0px;}
.interno2a{ float:left; width:20%; height:170px; margin-right:0px;}
.interno4a{ float:left; width:20%; height:170px; margin-right:0px;}

.interno1b{ float:left; width:5%; height:460px; margin-right:0px;}
.interno2b{ float:left; width:45%; height:460px; margin-right:0px;}
.interno3b{ float:left; width:45%; height:460px; margin-right:0px;}
.interno4b{ float:left; width:5%; height:460px; margin-right:0px;}
.end{margin-right:0;}

.conten1{ width:70%; margin:0 auto; overflow:hidden; background-image: url(../images/textblau.jpg); border:0px; border-radius: 20px;}
.cint2{ float:left; width:100%; height:500px; margin-right:0px;}

.cint3{ float:left; width:100%; height:100%; margin-right:0px;}
.cint31{ float:center; width:90%; height:900px; margin-right:0px; margin-left:3%;}


.cint4{ float:left; width:10%; height:500px; margin-right:0px;}
.cint5{ float:left; width:80%; height:500px; margin-right:0px;}
.cint51{ float:left; width:80%; height:100%; margin-right:0px;}
.cint6{ float:left; width:10%; height:500px; margin-right:0px;}


/*HOVER POPUP LINKS*/

/*hoverpopups type 1*/

#popup { color: #000}

#popup a, #popup a:visited {
	position: relative;
	width: 130px;
	line-height: 12px;
	text-align: right;
	padding: 0 0px;
	margin: 0;
	border: 0px solid #666;
	text-decoration: none;
	font-family: tahoma;
	font-size: 0.8em;
	font-weight: bold;
}

#popup a span {
	display: none;
}

#popup a:hover { 
	background-color: #222222; 
}

/* the IE correction rule */
#popup a:hover	{
	color: #f00; 
	background-color: #333333;
	text-indent: 0; /* added the default value */
}

#popup a:hover span {
	display: block;
	position: absolute;
	top: 50px;
	left: 20px;
	width: 320px;
	margin: 0px;
	padding: 10px;
	color: #494B47;
	font-weight: normal;
	background: #F7EDED;
	text-align: left;
	border: 0px solid #666;
}

/*HOVER POPUP LINKS*/

/*hoverpopups type 2*/

#popup2 { color: #000}

#popup2 a, #popup2 a:visited {
	position: relative;
	width: 130px;
	line-height: 12px;
	text-align: right;
	padding: 0 0px;
	margin: 0;
	border: 0px solid #666;
	text-decoration: none;
	font-family: tahoma;
	font-size: 0.8em;
	font-weight: bold;
}

#popup2 a span {
	display: none;
}

#popup2 a:hover { 
	background-color: #222222; 
}

/* the IE correction rule */
#popup2 a:hover	{
	color: #f00; 
	background-color: #333333;
	text-indent: 0; /* added the default value */
}

#popup2 a:hover span {
	display: block;
	position: absolute;
	top: 10px;
	left: 5px;
	width: 280px;
	margin: 0px;
	padding: 10px;
	color: #494B47;
	font-weight: normal;
	background: #F7EDED;
	text-align: left;
	border: 0px solid #666;
}



/*THUMBNAIL HOVERPOPUPS*/

.thumbnail  {
	position: relative;
	float: left;
	padding: 5px;
	/*z-index: 0;*/
}

.thumbnail:hover {
	background-color: #e9e9e2;
	/*z-index: 50;*/
	color: #335500;
	text-decoration: none;
}

.thumbnail span { /*CSS for enlarged image*/
	position: absolute;
	background-color: #e5e5e5;
	padding: 5px;
	/*left: -1000px;*/
	border: 1px solid #666;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

.thumbnail span img { /*CSS for enlarged image*/
	border-width: 0px; 
	/*padding: 2px;*/
}

.thumbnail:hover span { /*CSS for enlarged image on hover*/
	visibility: visible; 
	width: 200px;
	top: 5px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
	left: 300px;/*position where enlarged image should offset horizontally */
}

/*THUMBNAIL2 - thumbnail2 has border and border on hover*/

.thumbnail2 {
	position: relative;
	float: left;
	padding: 5px;
	/*z-index: 0;*/
}

.thumbnail2:hover { 
	background-color: #e9e9e2;
	/*z-index: 50;*/
	color: #335500;
	text-decoration: none;
}

.thumbnail2 span { /*CSS for enlarged image*/
	position: absolute;
	background-color: #e5e5e5;
	padding: 5px;
	/*left: -1000px;*/
	border: 1px solid #666;
	visibility: hidden;
	color: black;
	text-decoration: none;
}

.thumbnail2 span img { /*CSS for enlarged image*/
	border-width: 0px;
	/*padding: 2px;*/
}

.thumbnail2:hover span { /*CSS for enlarged image on hover*/
	visibility: visible; width: 208px;
	top: 5px; /* use IF IE6 style to correct IE6 positions of larger image relative to thumb */
	left: 300px;/*position where enlarged image should offset horizontally */
}

a.thumbnail2 img { 
	text-decoration:none;
	z-index: 50; 
}

/*if same attribute for all 4 states, then declare here in
a.thumbnail2*/ 

a.thumbnail2 img:link { 
	border: 2px solid #e9e9e2; 
	background: transparent; 
}

a.thumbnail2 img:visited { 
	border: 2px solid #e9e9e2; 
	background : transparent; 
}

a.thumbnail2 img:hover { 
	border: 2px solid #f00; 
	background : transparent; 
}

a.thumbnail2 img:active { 
	border: 2px solid #e9e9e2; 
	background : transparent; 
}

a.thumbnail2 img { 
	border: 2px solid #e9e9e2; 
}

/*end of hover popup links*/

/*Superponer imatges per felicitacio de NADAL*/

#superp{
 position: relative;
}
.sobre {
 position:absolute;
 top:5%;
 left:72%;
 border:none;
}

/*END Superponer imatges per felicitacio de NADAL*/