@charset "utf-8";

@font-face {
	font-family: Helvetica;
	src: url('helveticaneueltstd-lt-webfont.eot'); /* per a IE */
}

@font-face {
	font-family: Helvetica;
	src: url('helveticaneueltstd-lt-webfont.ttf');
}




/* CSS Document */


/* //////////////////////////// TAGS  //////////////////////////////// */


a {
	outline: none;
}

a:visited {

}

a:hover {

}

body {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #a9a8a8;
	vertical-align: top;
}

img {
	border: 0;
	outline: none;
}

li {
	list-style: none;
}

h1 {
	font: normal 21px/21px 'Helvetica', Arial, Sans-Serif;
	font-size: 21px;
	line-height: 21px;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	color: #606060;
}

h1 span {
	color: #606060;
}







/* //////////////////////////// GENERIC - HOME //////////////////////////////// */


#fons {
	margin: 0 auto;
	width: 100%;
}

#tot {
	width: 778px;
	margin: 0 auto;
	position: relative;
}

.top {
	position: absolute;
	top: 0;
	color: #fff;
	text-indent: -9999px;
}

#cap {
	/*height: 256px;*/
	width: 250px;
	text-align: right;
	vertical-align: top;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: 139px;
	z-index: 100;
	/*background: url(../img/fons_cap.gif) repeat-y right top;*/
}

a.email {
	display: block;
	height: 29px;
	background: url(../img/emailqui.png) no-repeat right top;
	text-indent: 9999px;
	margin-bottom: 17px;
}

a:hover.email {
	background: url(../img/emailqui.png) no-repeat right -29px;
}

#nom {
	height: 196px;
}

#nom p {
	display: none;
}

.nom {
	display: block;
	width: 250px;
	height: 54px;
}

#quisoc{
	background: url(../img/email.gif) no-repeat right -14px #fff;
    color: #7D7D7D;
    height: 256px;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: 528px;
    z-index: 70;
    text-align: left;
}

#quisoc a.email {
	display: block;
	height: 29px;
	width: 250px;
	margin-left: 278px;
	background: url(../img/emailqui.png) no-repeat right top;
	text-indent: 9999px;
}

#quisoc a:hover.email {
	background: url(../img/emailqui.png) no-repeat right -29px;
}

#quisoc div {
	margin: 0 0 30px 30px;
	width: 200px;
	padding: 0;
}

#quisoc div p {
	margin: 0 0 10px 0;
	color: #8b8b8b;
}

#quisoc div a {
	display: block;
	color: #3d3d3d;
	font-weight: bold;
	text-decoration: none;
	padding: 7px 2px 6px;
	background-image: url(../img/icons_curric.png);
	background-repeat: no-repeat;
}

#quisoc div a:hover {
    background-color: #ffe323;
}

#quisoc div a#linkedin {
	background-position: right top;
}

#quisoc div a#linkedin:hover {
	background-position: right -26px;
}

#quisoc div a#pdf {
	background-position: right -52px;
}

#quisoc div a#pdf:hover {
	background-position: right -78;
}

a.emailqui {
	display: block;
	margin: 0 0 0 528px;
    width: 250px;
	height: 60px;
	background: url(../img/emailqui.png) no-repeat right top;
}

a:hover.emailqui {
	background: url(../img/emailqui.png) no-repeat right -60px;
}

#llegenda {
	margin: 30px 0 0 0;
	padding: 0;
}


#llegenda a {
	display: block;
	width: 250px;
	color: #bababa;
    font: normal 11px/12px Arial, Sans-Serif;
    text-decoration:none;
    margin: 0;
    padding: 2px 0;
    outline:none;
}

#llegenda a.bot_tot {
    margin-top: 10px;
}

#llegenda a:hover.bot_web {
	color: #7c7c7c;
}

#llegenda a.active.bot_web {
	background-color: #ffe323;
	color: #7c7c7c;
}

#llegenda a:hover.bot_maq {
	color: #7c7c7c;
}

#llegenda a.active.bot_maq {
	background-color: #ffe323;
	color: #7c7c7c;
}

#llegenda a:hover.bot_fla {
	color: #7c7c7c;
}

#llegenda a.active.bot_fla {
	background-color: #ffe323;
	color: #7c7c7c;
}

#llegenda a:hover.bot_gra {
	color: #7c7c7c;
}

#llegenda a.active.bot_gra {
	background-color: #ffe323;
	color: #7c7c7c;
}

#llegenda a:hover.bot_tot {
	color: #7c7c7c;
}

#llegenda a.active.bot_tot {
	color: #7c7c7c;
}

#contingut {
	margin-top: 256px;
}

.columnaestreta {
	width: 250px;
	margin: 0 14px 0 0;
	vertical-align: top;
	float: left;
	position: relative;

}


.miniatura {
	position: relative;
	width: 250px;
	border-top: 1px solid #ccc;
	padding: 0;
	margin: 0 0 20px 0;
	background-color: #fff;
}

.miniatura:hover {
	border-top: 1px solid #fff;
	background-color: #ffe323;
}

.miniatura a {

}

.des {
	position: absolute;
	top:0;
	left:0;
	z-index: 10;
}

.color {
	z-index: 15 !important;
}

.imgminiatura {
	position: absolute; /* canviant l'index  */
}

.txtminiatura {
	padding: 15px;
}

.txtminiatura h2, .txtminiatura p {
	margin: 0 0 15px 0;
}

.txtminiatura h2, .txtminiatura h2 a {
	font: normal 19px/18px 'Helvetica', Arial,Sans-Serif;
	color: #444;
	text-decoration: none;

}

.txtminiatura h2 a:hover {
	color: #222;
}

.txtminiatura p {
	font: normal 11px/12px Arial, Sans-Serif;
	color: #666;
}

.home .txtminiatura p.codi {
	font: italic 11px/12px Georgia, Serif;
	color: #999;
	padding: 0;
	margin: 3px 0;
}

/*

.home .txtminiatura p.web {
	background: url(../img/bulletweb.png) no-repeat left 2px;
}

.home .txtminiatura p.maqueta {
	background: url(../img/bulletmaqueta.png) no-repeat left 2px;
}

.home .txtminiatura p.anima {
	background: url(../img/bulletanima.png) no-repeat left 2px;
}

.home .txtminiatura p.grafic {
	background: url(../img/bulletgrafic.png) no-repeat left 2px;
}

*/


#peu {
	margin: 120px 0 0 0;
	height: 47px;
	width: 778px;
}

#peu .dreta {
	float: right;
	width: 250px;
}

#peu .esquerra {
	float: left;
	width: 92px;
}

a.toppeu {
	width: 250px;
	display: block;
	height: 47px;
	text-indent: -9999px;
	background: url(../img/toppeu.gif) #000 no-repeat left 0;
}

a:hover.toppeu {
	background: url(../img/toppeu.gif) no-repeat left -47px;
}

.new {
	position: absolute;
	width: 52px;
	height: 52px;
	background: url(../img/new.png) no-repeat center center;
	z-index: 100;
	opacity: 1!important;
	text-indent: -9999px;
	top: -26px;
	left: 3px;
}





*html #logok {
	height: 132px;
	margin-top: 16px;
	margin-bottom: 15px;
}

*:first-child+html #logok {
	height: 132px;
	margin-top: 16px;
	margin-bottom: 15px;
}




/* //////////////////////////// INTERIOR //////////////////////////////// */


a.inicio {
	display: block;
	height: 60px;
	width: 92px;
	background: url(../img/inicio.gif) no-repeat right top;
	text-indent: 9999px;
	position: fixed;
	top: 0;
	left: 50%;
	margin-left: -389px;
	z-index: 100;
}

a:hover.inicio {
	background: url(../img/inicio.gif) no-repeat right -60px;
}

.interior #nom {
	height: 141px;
}

#volver {
	width: 250px;
	height: 55px;
}

#volver a {
	width: 125px;
	display: block;
	height: 55px;
	text-indent: 9999px;
	float: right;
	background: url(../img/volver.png) no-repeat left 0;
}

#volver a:hover {
	background: url(../img/volver.png) no-repeat left -55px;
}

#ficha {
	padding: 12px 0 30px 30px;
	width: 220px;
}

#ficha h3 {
	font: bold 12px/14px Arial, Sans-Serif;
}


.interior #ficha p.codi {
	font: italic 11px/12px Georgia, Serif;
	color: #bababa;
	padding: 0;
	margin: 0;
}

/*

.interior #ficha p.web {
	background: url(../img/bulletweb.png) no-repeat right 2px;
}

.interior #ficha p.maqueta {
	background: url(../img/bulletmaqueta.png) no-repeat right 2px;
}

.interior #ficha p.anima {
	background: url(../img/bulletanima.png) no-repeat right 2px;
}

.interior #ficha p.grafic {
	background: url(../img/bulletgrafic.png) no-repeat right 2px;
}

*/

#ficha a.tblank {
	color: #595959;
    display: block;
    padding: 2px 0;
    text-decoration: none;
    width: 100%;
}

#ficha a.tblank:hover {
	color: #595959;
    /* background: #ffe323 url(../img/fle01.gif) no-repeat left center; */
    background-color: #ffe323;
    padding-right: 2px;
}

.columnaampla {
	width: 778px;
	margin: 0;
	vertical-align: top;
}

.columnaampla .captura {
	padding: 30px 0 0 0;
}

.columnaampla .captura.pangea img {
	width: 100%;
}

.columnaampla .esquerra {
	float: left;
	margin: 0 14px 0 0;
}

.columnaampla .dreta {
	float: right;
}

.columnaampla .linesup {
	border-top: 1px solid #e8e8e8;
	width: 514px;
}




/* ALTRES MIDES
-------------------------------------------------------------- */
@media screen and (max-width: 650px) {

body {}
a.top {display: none;}
#tot {width: 94%; padding: 3%;}
#cap {position: static; margin:0; left: inherit; right: 2%; width: 100%; background-color: #fff;}
.interior #cap {position: fixed; right: 3%; width: 32%; padding-bottom: 10%;}
a.email {display: none;}
#nom {height: auto; padding: 0;}
.interior #nom {height: 34px; padding: 10% 2% 0;}
.interior h1 {font: normal 14px/16px 'Helvetica', Arial, Sans-Serif;}
.interior p.codi {display: none;}
#nom a, #nom ul {display: none;}
#quisoc {display: none;}
#nom p {display: inline; margin: 0; font: bold 12px/1.2em Arial, Verdana, Sans-Serif; color: #222; letter-spacing: -0.0125em;}
.interior #nom p {font: bold 12px/1.2em Arial, Verdana, Sans-Serif; color: #444;}
#nom .port {font: normal 1em 'Helvetica', Arial, Verdana, Sans-Serif; letter-spacing: 0.05em; text-transform: uppercase; color: #777;}
.interior #nom .port {font-size: 11px;}
section#contingut {margin-top: 13px; width: 100%;}
.interior section#contingut {margin-top: 120px;}
.columnaestreta {float: none; margin: 0; width: 100%;}
.miniatura {opacity: 1!important; width: 100%; padding: 2% 0; margin: 0; border-top: 1px solid #EDEDED; position: static; clear: both;}
.interior .miniatura {width: 80%; padding: 7% 10%;}
.miniatura:hover {background: 0 none;}
.imgminiatura {float: left; width: 49%; position: static; margin-bottom: 2%;}
canvas {display: none!important;}
.color {display: block!important;}
.des {position: static; left: inherit; top: inherit; width: 100%;}
.txtminiatura {padding: 0; float: right; width: 48%; margin-top: 0!important; margin-bottom: 2%;}
.txtminiatura h2, .txtminiatura h2 a {font: 16px/18px 'Helvetica',Arial,Sans-Serif; text-decoration: none;}
#volver {display: none;}
#ficha {padding: 2%; width: 96%; font-size: 10px; line-height: 10px;}
.interior section#contingut {margin-top: 40px; width: 63%;}
.columnaampla {width: 100%;}
.columnaampla .linesup {width: 100%;}
.columnaampla .captura {padding: 1em 0 4em;}
.columnaampla .captura.dreta {display: none;}
.columnaampla .captura.esquerra {margin: 0;}
.columnaampla .linesup {border-top: none;}
.columnaampla .captura img {opacity: 1!important; width: 100%;}
#peu {width: 100%; margin: 4em 0 0; border-top: none;}
#peu .dreta {display: none;}
	
}

@media screen and (max-width: 480px) {

body {}

    
}

@media screen and (max-width:  400px) {

a.top {display: none;}
#tot {width: 94%; padding: 3%; background-color: #fff;}
#cap {position: static; margin:0; left: 0; width: 100%;}
.interior #cap {position: static; width: 100%; padding-bottom: 3%;}
a.email {display: none;}
#nom {height: auto; padding: 3% 5% 0;}
.interior #nom {height: 33px; padding: 1% 2% 0;}
.interior h1 {font: normal 21px/22px 'Helvetica', Arial, Sans-Serif;}
#nom a, #nom ul {display: none;}
#quisoc {display: none;}
#nom p {display: block; margin: 0; font: bold 16px/1.2em Arial, Verdana, Sans-Serif; color: #222; letter-spacing: -0.0125em;}
.interior #nom p {font: bold 1.2em/1.2em Arial, Verdana, Sans-Serif; color: #444; letter-spacing: -0.0125em;}
#nom p.port {font: normal 1.1em 'Helvetica', Arial, Verdana, Sans-Serif; letter-spacing: 0.05em; text-transform: uppercase; color: #777;}
.interior #nom .port {font: normal 12px 'Helvetica', Arial, Verdana, Sans-Serif; letter-spacing: 0.05em; color: #777;}
#ficha {font-size: 11px; line-height: 12px;}
.interior p.codi {display: block;}
section#contingut {margin-top: 120px;}
.columnaestreta {float: none; margin: 0; width: 100%;}
.miniatura {opacity: 1!important; width: 90%; padding: 5%; margin: 0; border-top: 1px solid #EDEDED;}
.miniatura:hover {background: 0 none;}
.imgminiatura {float: none; width: 100%; margin-bottom: 0;}
canvas {display: none!important;}
.color {display: block!important;}
.txtminiatura {padding: 0; width: 100%; margin-bottom: 7%; margin-top: 7% !important;}
#volver {display: none;}
#ficha {padding: 2%; width: 96%;}
section#contingut {margin-top: 50px; width: 100%;}
.interior section#contingut {margin-top: 0; width: 100%;}
.columnaampla {width: 100%;}
.columnaampla .linesup {width: 100%;}
.columnaampla .captura {padding: 1em 0 4em;}
.columnaampla .captura.dreta {display: none;}
.columnaampla .captura.esquerra {margin: 0;}
.columnaampla .captura img {opacity: 1!important; width: 100%;}
#peu {width: 100%; margin: 4em 0 0; border-top: 1px solid #ededed;}
#peu .dreta {display: none;}


}

@media screen and (max-width: 400px) {

/* body {background-color: red;} */
canvas {display: none;}

    
}