body{ width:100%; height:100%; color:#ccc; background:#aaa url(../img/fons.jpg) no-repeat top center fixed; font:300 1em/1.4em 'Yanone Kaffeesatz',Arial, Helvetica, sans-serif}

br.clear {clear: both; height: 0px}

header{ position:relative; height:220px; margin-bottom:10px}

#logo:hover { height:160px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);}

header nav{ position:absolute; left:0; bottom:0; width:100%; border-radius:3px; background:#111}
nav ul{ list-style:none}
nav a{ text-decoration:none; color:#ccc}

/*************
    MENU
*************/

#menu{ float:left}
#menu > li{ float:left; border-right:0px solid #111; border-left:0px solid #444; }
#menu > li > a{ text-transform:uppercase;}
#menu > li a{ display:block; padding:15px 30px; color:#aaa; font-size:1.4em; font-weight:400;}
#menu > li:first-child{ border-left:0}
#menu > li:last-child{ border-right:0}
#menu > li:first-child a{border-top-left-radius:5px; border-bottom-left-radius:5px}
#menu > li a:hover{ color:#eee}
#menu > li a:active{ color:#bbb}
#menu > li a.actiu{ color:#fc0}
#menu > li a.actiu:hover{ color:#fc0}

#menu li ul{ display:none; z-index:9; position:absolute; left:0px; width:100%; background:none}
#menu li ul li{float:left; margin-top:10px; padding:10px 0; background:#111}
#menu li ul li:first-child{ padding-left:10px; border-top-left-radius:11px; border-bottom-left-radius:11px}
#menu li ul li:last-child{ padding-right:11px; border-top-right-radius:11px; border-bottom-right-radius:11px}
/*#menu > li:hover{ }*/
#menu li:hover > ul{ /*background:url(../img/fletxa_amunt.png) no-repeat 135px top*/}
#menu > li:hover > a{ color:#eee}
#menu li ul li figure{ float:left; width:90px; height:90px; margin-right:15px}
#menu li ul li a{ width:261px; height:88px; overflow:hidden; margin:10px; padding:15px; border:1px solid #222; border-radius:5px; color:#bbb; background:#222; font-size:1em; font-weight:300}
#menu li ul li a strong{ margin-bottom:5px !important; color:#eee; font-size:1.1em; font-weight:400}
#menu li ul li a:hover{ border:1px solid #fc0; color:#bbb; background:#111}

/*************
    IDIOMA
*************/

#idioma{ z-index:9; position:absolute; right:0px; top:15px; width:130px}
#idioma li{ float:left; width:100%}
#idioma li a{ display:block; padding:0 20px; color:#aaa; font-weight:400; letter-spacing:1px}
#idioma > li a:hover{ color:#eee}
#idioma li a img.flag { margin: -3px 8px 0 0; padding:1px; vertical-align: middle; border-radius:1px; background:#aaa }


#idioma li ul{ display:none; z-index:9; position:absolute; border-top:0px solid #444}
#idioma li ul li{float:left}
#idioma li ul li:first-child{ margin-top:25px}
#idioma li ul li:first-child a{ padding-top:10px; border-top-left-radius:9px; border-top-right-radius:9px}
#idioma li ul li:last-child a{ padding-bottom:10px; border-bottom-left-radius:9px; border-bottom-right-radius:9px}
#idioma li:hover > ul{ background:url(../img/fletxa_amunt.png) no-repeat 50px 15px}
#idioma li:hover a{ color:#eee}
#idioma li ul li a{ padding:5px 20px; color:#ccc; background:#111}
#idioma li ul li a:hover{ color:#fc0}
#idioma li ul li a:hover img.flag{ background:#eee}

#etiqueta_idioma{ z-index:-1; display:none; position:absolute; top:70px; right:200px; color:#333; font:2em "Shadows Into Light";
/* Safari */
-webkit-transform: rotate(-3deg);

/* Firefox */
-moz-transform: rotate(-3deg);

/* IE */
-ms-transform: rotate(-3deg);

/* Opera */
-o-transform: rotate(-3deg);}

/*************
     COS
*************/

#cos{ z-index:10; margin-bottom:100px; padding-bottom:0px; color:#666; background:#fff}
#cos div h1, #cos div h4 { color:#333; font-size:1.6em; font-weight:400;}
#cos div p{ padding:6px 0; color:#666}
#cos div a{ color:#f90; font-weight:400; text-decoration:none}
#cos div a:hover{ text-decoration:underline}



.left{ display:table-cell; height:100%; width:580px; padding:30px; border-right:0px dotted #ccc}
.left h1{ margin-bottom:10px}
.left p img{ float:left; width:30%; margin-right:20px; padding:3px; border:1px solid #ccc}

.right{ display:table-cell; float:right; width:580px; padding:50px 30px}
.right p img{ }

.left_col{display:table-cell; float:left; width:239px;  padding:30px; background:#eee}

#slideFitxa { height:300px;}
#slideFitxa img {padding:3px; border:1px solid #ccc}
#thumbs { list-style:none; /*padding-top:10px;*/}
#thumbs li { float:left; margin-left:10px; margin-bottom:6px;}
#thumbs li:nth-child(4n-3) { margin-left:0;}
#thumbs li img { border:1px solid #ccc; padding:4px; }
#thumbs li.activeSlide img { border-color:#ffcc00;}

.right_col{ display:table-cell; width:260px; height:100%; padding:30px; /*border-left:1px solid #ccc; border-bottom:0px solid #bbb; border-bottom-left-radius:0px;*/ background: url(../img/bg-degradatColumnaRight.jpg) repeat-x bottom #eee; vertical-align:top; overflow:hidden;}
.right_col ul { list-style:none; width:235px; }
.right_col ul li{  padding:1px 0; /*border-bottom:1px dotted #ccc;*/}
.right_col ul li a{ display:block; padding:15px 8px; font-size:1.2em; color:#666 !important; background:#c7c7c7; border-radius:3px;}
.right_col ul li a:hover { text-decoration:none !important; color:#999 !important; /*background:#999;*/ border-radius:3px}
.right_col ul li a.actiu { background:#FF9900; color:#fff!important; text-decoration:none !important; }
.right_col a.visita p { background: url(../img/bg-link.png) 215px 23px no-repeat #555; margin:20px 0; padding:15px 20px!important; color:#fff!important; border-radius:4px;}
.right_col a.visita p span { color:#ff9900;}
.right_col a.visita p strong { font-size:18px;}
.right_col a.visita:hover { text-decoration:none!important;}
.right_col a.visita:hover p { background: url(../img/bg-link.png) 215px 23px no-repeat #444;}
.right_col a.visita.facebook:hover p { background: url(../img/bg-link.png) 215px 23px no-repeat #3c5a98!important;}
/*.right_col p.visita { background: url(../img/bg-link.png) 220px 20px no-repeat #555; margin:20px 0; padding:10px!important; color:#fff!important; border-radius:4px;}*/

.rightColSota { float:left; clear:left;}

.fixed { position:fixed; top:28px;}

.filtre{ float:right !important; width:auto !important; padding:0 0 10px 10px}
.filtre span{ float:left; margin:10px; padding:3px 12px; font-size:1em}
.filtre nav{ float:left}
.filtre ul{ margin:0}
.filtre ul li{ float:left; width:auto !important}
.filtre ul li a{ padding:3px 12px !important; color:#fff !important; background:#666; border-radius:3px; font-size:1em !important; font-weight:400 !important}
.filtre ul li a:hover, .filtre ul li.current a { background:#111; text-decoration:none !important}

.max{ width:900px; padding:30px}

/**
 *		CONTINGUT GENERICA
 */
.detall { /*padding:20px; font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#605e5e;*/ font-size:17px; }
.detall p { line-height:23px; padding:0!important; padding-bottom:10px!important; text-align:justify; padding:0;}
.detall p.data { font-style:italic;}
.detall a { color:#888;}
.detall a:hover { text-decoration:underline;}
.detall > ul,  .detall > ol { padding:5px 0 5px 70px;}
.detall ul li ul { padding-left:30px;}
.detall ul li { list-style:circle; line-height:25px;}
.detall img { float:none!important; max-width:570px!important; border:1px solid #ccc; padding:5px; background:#fff; margin:0!important; /*margin-right:10px;*/ }
.detall h1, .detall h2, .detall h3, .detall h4, .detall h5 { padding:3px; font:400 1em/1.4em 'Yanone Kaffeesatz',Arial, Helvetica, sans-serif}
.detall h1 { font-size:2em; }
.detall h2 { font-size:38px; }
.detall h3 { font-size:30px; }
.detall h4 { font-size:25px; }
.detall table { width:100%; margin-top:20px; margin-bottom:20px; border:0;}
.detall table td, .detall table th { padding:10px 15px; font-size:.9em; text-align:left; }
.detall table thead tr { background-color:#333; color:#fff; text-transform:uppercase; font-weight:bold;}
.detall table tbody tr { color:#666; border-bottom:1px solid #ccc; }
.detall table tbody tr:hover { background-color:#f5f5f5;}

#generica ul.galeria { padding-left:40px; clear:both;}
#generica ul.galeria li { float:left; margin:0 10px 10px 0; overflow:hidden; }
#generica ul.galeria li img{ padding:5px; margin:2px; border:1px solid #ccc; }
#generica ul.galeria li img:hover { background:#ccc;}

/*************
    SLIDE
*************/

#slides { position:relative; width:100%; height:380px; overflow:hidden; background:#000; }
#slides .prev { /*display: none;*/ z-index:101; position: absolute; top: 160px; left: 10px; cursor: pointer }
#slides .next { /*display: none;*/ z-index:101; position: absolute; top: 160px; right: 10px; cursor: pointer }
.slide_text .boto { padding:10px 20px; border:0px solid #fff; border-radius:9px; color:#777 !important; text-decoration:none !important; font-weight:700; font-size:1em; text-shadow:1px 1px 0px #fff; box-shadow:0 0 2px #000; background: #09C;
background-image: linear-gradient(bottom, #9E9E9E 0%, #EDEDED 53%);
background-image: -o-linear-gradient(bottom, #9E9E9E 0%, #EDEDED 53%);
background-image: -moz-linear-gradient(bottom, #9E9E9E 0%, #EDEDED 53%);
background-image: -webkit-linear-gradient(bottom, #9E9E9E 0%, #EDEDED 53%);
background-image: -ms-linear-gradient(bottom, #9E9E9E 0%, #EDEDED 53%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #9E9E9E),
	color-stop(0.53, #EDEDED)
)}
.slide_text .boto:hover {text-shadow:1px 1px 0px #fff; box-shadow:0 0 8px #fc0; color: #a87 !important}
.slide_text{ position:absolute; right:0px; top:0px; width:380px; height:320px; padding:30px; background:url(../img/trama-fons.png) rgba(0,0,0,0.5)}
.slide_text h3{ margin-bottom:5px; color:#fff !important; font-size:1.5em !important; font-weight:400}
.slide_text p{ margin-bottom:20px; color:#ccc !important; font-size:1.2em !important; line-height:1.5em}

/*************
  DESTACATS
*************/

#destacats{ background-image: linear-gradient(bottom, #FFFFFF 0%, #E3E3E3 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #E3E3E3 100%);
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #E3E3E3 100%);
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #E3E3E3 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #E3E3E3 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #FFFFFF),
	color-stop(1, #E3E3E3)
)}
#destacats ul{ padding:30px 20px 40px 25px; float:left; background:url(../img/shadow.jpg) no-repeat center bottom}
#destacats ul li{ float:left; width:286px; height:120px; margin:0 10px 20px; border-radius:13px; border:2px solid #fff; background:#eee;
background-image: linear-gradient(bottom, #EBEBEB 0%, #FFFFFF 100%);
background-image: -o-linear-gradient(bottom, #EBEBEB 0%, #FFFFFF 100%);
background-image: -moz-linear-gradient(bottom, #EBEBEB 0%, #FFFFFF 100%);
background-image: -webkit-linear-gradient(bottom, #EBEBEB 0%, #FFFFFF 100%);
background-image: -ms-linear-gradient(bottom, #EBEBEB 0%, #FFFFFF 100%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0, #EBEBEB),
	color-stop(1, #FFFFFF)
)}
#destacats ul li:hover{ border:2px solid #fc0; cursor:pointer;}
#destacats ul li:nth-child(3n-2) { margin-left:0}
#destacats ul li:nth-child(3n-0) { margin-right:0}
#destacats ul li:last-child{ margin-right:0}
#destacats ul li img{height:116px; border-top-left-radius:9px; border-bottom-left-radius:9px}
#destacats ul li figure{ float:left; width:35%; height:116px; margin-right:10px; padding:2px; border-right:2px solid #fff; overflow:hidden}
#destacats ul li h2{ margin-top:8px; color:#333; font-size:1.3em; font-weight:700}
#destacats ul li h2 a { color:#333; font-weight:700}
#destacats ul li p{ padding:10px; color:#666; font-size:1em}

/*************
   TREBALLS
*************/

#treballs { padding:30px}
#treballs > div{ float:left; width:280px}
#treballs ul{ float:right}
#treballs ul li{ float:left; width:280px; margin:10px 10px 30px 10px;}
#treballs ul li img{ width:274px; height:180px; padding:3px; border:1px solid #ccc}
#treballs ul li img:hover{ border:1px solid #666}
#treballs ul li:hover img{ opacity:0.9}
#treballs ul li figure{ position:relative; width:282px; height:189px; padding:1px; border-radius:5px; overflow:hidden}
#treballs ul li > a{ display:block; padding-top:5px; color:#333; font-weight:700; font-size:1.2em}
#treballs ul li p { height:40px; }

#llistaProjectes { min-height:800px;}
#llistaProjectes li div { /*height:25px; overflow:hidden;*/}


.new{ position:absolute; right:-70px; top:-32px; width:150px; height:25px; padding-top:50px; border-bottom:1px solid #eee; color:#fff; background:#09e; text-shadow:1px 1px 1px #000; box-shadow:0px 0px 3px #000; font-size:0.8em; font-weight:400; text-align:center; letter-spacing:2px;
/* Safari */
-webkit-transform: rotate(45deg);

/* Firefox */
-moz-transform: rotate(45deg);

/* IE */
-ms-transform: rotate(45deg);

/* Opera */
-o-transform: rotate(45deg);
background-image: linear-gradient(bottom, #E28010 5%, #FF9A2A 53%);
background-image: -o-linear-gradient(bottom, #E28010 5%, #FF9A2A 53%);
background-image: -moz-linear-gradient(bottom, #E28010 5%, #FF9A2A 53%);
background-image: -webkit-linear-gradient(bottom, #E28010 5%, #FF9A2A 53%);
background-image: -ms-linear-gradient(bottom, #E28010 5%, #FF9A2A 53%);

background-image: -webkit-gradient(
	linear,
	left bottom,
	left top,
	color-stop(0.05, #E28010),
	color-stop(0.53, #FF9A2A)
)}
.new span { text-decoration:blink;}

#treballs .boto, .right_col .boto, .left_col .boto, .left .boto{ display:inline; padding:3px 6px; border:0 !important; border-radius:3px !important; color:#fff !important; background:#f90; font-size:1em !important;}
#treballs .boto:hover, .right_col .boto:hover, .left_col .boto:hover, .left .boto:hover{ background:#e80 !important; text-decoration:none !important}
.boto img{ vertical-align:middle; margin:-4px 10px 0 0}

#social{ position:relative; margin-top:70px; padding:135px 30px 10px; background:#000 url(../img/silueta.jpg) no-repeat}
#social ul{ list-style:none}
#social li{ display:inline; padding-right:50px; color:#999; font-weight:400}
#social a img{ float:right; height:20px; opacity:0.6}
#social a img:hover{ opacity:0.8}

/*****************
	CONTACTE
******************/

#frm_contacta { width:100%; padding:15px }
#frm_contacta label { display:block; padding-bottom:5px; color:#333; font-size:1.2em; font-weight:400}
#frm_contacta span { margin-left:10px; color: #4B75BF }
#frm_contacta .codi { font-family:Arial, Helvetica, sans-serif; font-size:20px;}
#frm_contacta input, #frm_contacta select, #frm_contacta textarea { width:70%; border:1px solid #ccc; padding:4px; margin-bottom:15px; color:#555; border-radius:4px; font-family:'Yanone Kaffeesatz'; font-size:1em}
#frm_contacta textarea { resize:none; font-family:'Yanone Kaffeesatz'; font-size:1em}
#frm_contacta .checks { width: auto; margin:0; display:inline; padding:0; float:left }
#frm_contacta input[type=text] { }
#frm_contacta select { width:210px }
#frm_contacta input[type=submit] { clear:both; float:left; width:auto; margin-top:20px; cursor:pointer; border-radius:3px }
#frm_contacta label.captcha { font-size:150%; margin-top:7px; float:left }
#frm_contacta #contacta_captcha { margin:4px 13px; width:120px; text-transform:uppercase; text-align:center }
#contacta_msg_ok { display:block }

footer{ position:relative; width:100%;  background:#111; overflow:hidden}

.menuFooter { padding-top:15px; float:right;}
.menuFooter ul { float:left; margin-left:40px; list-style:none; border-left:1px #777 dotted; padding-top:10px; height:100px; }
.menuFooter ul li { padding-left:20px; line-height:19px; /*margin-bottom:5px;*/ /*border-bottom:1px #888 dotted;*/}
.menuFooter ul li:hover { border-bottom-color:#FF9900;}
.menuFooter ul li a { padding-left:1px; color:#777; text-decoration:none; display:block; width:130px; font-size:13px; text-transform:uppercase;}
.menuFooter ul li a:hover { color:#FF9900;}

#logoPeu{ float:left; height:120px}

.centrat{ width:960px; margin:0 auto}