/* CSS Document */

/*
root element for the scrollable.
 when scrolling occurs this element stays still.
*/

.oficial{

	width: 200px;
	padding: 2px 0;
	margin-left: 40px;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	 /*background-color: #dad428;*/
	text-transform:uppercase;
	color: #000;
}
.oficial img{
width:218px;
 height:20px;
}

.conoce {
	position: absolute;
	margin: -28px 0px 0px 494px; 
	*margin: -200px 0px 0px -176px; 
	z-index:10;
	color:#dad428;
	font-size: 12px;
	text-align:center;
	font-weight: bold;
	font-family:Calibri;
}

.conoce a{
color:#dad428;
text-decoration:none
}
.scrollable {

 /* required settings */
 position:relative;
 overflow:hidden;
 width: 587px;
 height:159px;
 margin: 0px 0 10px 0;
 /* custom decorations */
 border:1px solid #dad428;
  /*background:url(/img/global/gradient/h300.png) repeat-x; */
}

/*
 root element for scrollable items. Must be absolutely positioned
 and it should have a extremely large width to accomodate scrollable items.
 it's enough that you set the width and height for the root element and
 not for this element.
*/
.scrollable .items {
 /* this cannot be too large */
 width:20000em;
 position:absolute;
 clear:both;
}

.items div {
 float:left;
 width:680px;
}

/* single scrollable item */
.scrollable img {
 float:left;
 margin:0px 0px 0px 0px;
 /*background-color:#fff;*/
 padding:2px;
 /*border:1px solid #ccc;*/
 width:145px;
 height:153px;

/**
Serveix per redondejar cantondes del div, no funciona amb explorer
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 */
}

.scrollable .active {
  /*border:2px solid #000;*/
 position:relative;
 cursor:default;
}

.primero{
	position:relative;
 	overflow:hidden;
	width:230px;
	height: 217px;
	float: left;
	border:4px solid #dad428;
	margin: 0 10px 0 40px;
	z-index:0;
}

.primero .items {
 /* this cannot be too large */
 width:20000em;
 position:absolute;
 
}

.primero .items div {
 float:left;
 width:300px;
}

/* single scrollable item */
.primero img {
 float:left;
 margin:0px 0px 0px 0px;
 /*background-color:#fff;*/
 padding:0px;
 /*border:1px solid #ccc;*/
 width:230px;
 height:217px;

  /*-moz-border-radius:4px;
 -webkit-border-radius:4px;*/
}

.primero .active {
  /*border:2px solid #000;*/
 position:relative;
 cursor:default;
}

.watx{
	position: absolute;
	margin: 174px 0px 0px 43px; 
	*margin: 1px 0px 0px -627px; 
	z-index:10;
	background-color:#dad428; width:80px;
	 font-size: 20px;
	 text-transform:uppercase;
	 text-align:center;
	 font-weight: bold;
	 font-family:Calibri;
	 
	/*text-align: right;
	width: 290px;
   	padding: 2px 3px;
	font-weight: bold;
   	 background-color: #dad428;
   font-size: 11px;
   	text-transform:uppercase;*/
}
.watx img{
	margin-top: 5px;
	width: 75px;
	height: 25px;
}

.ofertas{
	position: absolute;
	margin: 172px 0px 0px 288px; 
	*margin: 1px 0px 0px -410px; 
	z-index:10;
	background-color:#dad428; width:100px; height: 38px;
	 font-size: 20px;
	 text-transform:uppercase;
	 text-align:center;
	 font-weight: bold;
	 font-family:Calibri;
	 
	 
	/*text-align: right;
	width: 290px;
   	padding: 2px 3px;
	font-weight: bold;
   	 background-color: #dad428;
   font-size: 11px;
   	text-transform:uppercase;*/
}
.ofertas p{

	margin-top: 4px;
}
.segundo{
	width: 339px;
	float: left;
	height: 223px;
	border:1px solid #dad428;
	margin-right: 40px;
}

.segundo img {
 float:left;
 width:169px;
 height:223px;
 }
 
.clear{
	clear: both;
}

.vertical {

	/* required settings */
	position:relative;
	overflow:hidden;

	/* vertical scrollables have typically larger height than width but not now */
	height: 200px;
	width: 300px;
}

/* root element for scrollable items */
.vertical .items {
	position:absolute;

	/* this time we have very large space for the height */
	height:20000em;
}