/*

www.razgo.net 
RAZGO - Disseño y programación web - Barcelona

*/ 

* {
	margin:0;
	padding:0;
}

@font-face  {
	font-family : "'Gafata'";
	font-style : normal;
	font-weight : 400;
	src : local('Gafata'), local('Gafata-Regular'), url(http://themes.googleusercontent.com/static/fonts/gafata/v3/o-DwOh1jynFSAy8preUMxw.ttf) format('truetype');
} 

/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway Thin'), local('Raleway-Thin'), url(http://fonts.gstatic.com/s/raleway/v14/1Ptsg8zYS_SKggPNwE44Q4FqL_KWxWMT.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 100;
  src: local('Raleway Thin'), local('Raleway-Thin'), url(http://fonts.gstatic.com/s/raleway/v14/1Ptsg8zYS_SKggPNwE44TYFqL_KWxQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(http://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: local('Raleway'), local('Raleway-Regular'), url(http://fonts.gstatic.com/s/raleway/v14/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(http://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqhPANqczVsq4A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: local('Raleway Bold'), local('Raleway-Bold'), url(http://fonts.gstatic.com/s/raleway/v14/1Ptrg8zYS_SKggPNwJYtWqZPANqczVs.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

body {
	background:url(../img/bg.gif) repeat;
	margin:0px;
	padding:0px;
	font-family: 'Gafata', sans-serif;
	font-size:18px; 
	line-height:20px;
	color:#000;
	margin-left: 0px;
	height:100%;
}

a:link,a:visited  {
	text-decoration:none;
	color:#8BAF31;
	padding:0px;
	font-weight:bold; 
	}

a:hover, a:active{
	color:#000000;
	/*/color:#FFFFFF;
	background-color:#8BAF31;/*/
	}

p{
	/*/text-align:justify;/*/
	line-height:normal;
	padding:0px;
	margin:5px;
	font-size:18px; 
}


h1 {
	font-weight: normal;
	font-size: 24px;
	line-height:34px;
	letter-spacing:1.2px;
}

h2{
	padding:0px 0px 0px 10px;
	margin-left:10px;
	color:#B52025;
	font-size:20px;
	font-weight:normal;
}

h2.titol{
	float:left;
	font-family : "'Gafata'";
	line-height:140%;
	font-size:24px;
	font-weight:bold; 
	padding:10px 0 0px 0px; 
	margin:0px;
	color:#8BAF31;
}


.thumbs { 		
	float:left; 
	margin: 0px 30px 30px 0px;
	
	}
	
	
.titulo {
	font-weight: bold;
	font-size: 28px;
	line-height:34px;
}	

.titulo_home {
	font-weight: normal;
	font-size: 24px;
	line-height:34px;
	letter-spacing:1.2px;
}	

.web {
	font-weight: normal;
	font-size: 22px;
}

.submenu {
	font-size: 20px;
}


.small {
	font-size:12px ; 
	}		
/*----------------------les CSS dels DIVS -------------------------*/

#contenidor{
	width:960px;
	height:auto;
	margin:10px auto auto auto;
	background-color:#fff;
	border-radius:20px;
}

#capcalera{
	width:960px;
	margin:auto;
	height:90px;
}

#logo{
	padding:22px 0 0 24px;
	float:left;
	margin:0px;

}

.logo{
	float:left;
	margin:0px;

}

/*----------------------MENU-------------------------*/

.menu {
	margin-top:0px;
	margin-left:36px;
	height:30px;
	font-weight:normal;
	font-size:22px;
	line-height:24px;
	text-align:left;
	letter-spacing:2px;
	border: 0;
	padding:0;
	color: #8BAF31;
	}

.menu a:link,.menu a:visited{
	text-decoration: none;
	color: #5C534D;
	font-weight:normal; 
	/*/padding: 1px;/*/
	}

.menu a:hover,.menu a:active{
	color: #8BAF31;
	text-decoration: none;
	font-weight:normal; 
	/*/background-color: #5C534D;
	padding:1px;/*/
	}

.menu a.activo{
	color: #8BAF31;
	text-decoration: none;
	font-weight:normal; 
	}



.menu_cat {
	margin-top:0px;
	margin-left:36px;
	height:30px;
	font-weight:normal;
	font-size:22px;
	line-height:24px;
	text-align:left;
	letter-spacing:1.5px;
	border: 0;
	padding:0;
	color: #8BAF31;
	}

.menu_cat a:link,.menu_cat a:visited{
	text-decoration: none;
	color: #5C534D;
	font-weight:normal; 
	/*/padding: 1px;/*/
	}

.menu_cat a:hover,.menu_cat a:active{
	color: #8BAF31;
	text-decoration: none;
	font-weight:normal; 
	/*/background-color: #5C534D;
	padding:1px;/*/
	}


.menu_eng {
	margin-top:0px;
	margin-left:36px;
	height:30px;
	font-weight:normal;
	font-size:22px;
	line-height:24px;
	text-align:left;
	letter-spacing:1.8px;
	border: 0;
	padding:0;
	color: #8BAF31;
	}

.menu_eng a:link,.menu_eng a:visited{
	text-decoration: none;
	color: #5C534D;
	font-weight:normal; 
	/*/padding: 1px;/*/
	}

.menu_eng a:hover,.menu_eng a:active{
	color: #8BAF31;
	text-decoration: none;
	font-weight:normal; 
	/*/background-color: #5C534D;
	padding:1px;/*/
	}




.menu_idiomes {
	margin-top:40px;
	margin-left:310px;
	height:30px;
	width:120px;
	font-weight:normal;
	font-size:12px;
	line-height:22px;
	text-align:left;
	letter-spacing:1.9px;
	border: 0;
	padding:0;
	color: #8BAF31;
	float:left;
	}
	
.menu_idiomes a:link{
	color: #5C534D;
	text-decoration: none;
	font-weight:normal; 
	padding:0;
	}
	
	
.menu_idiomes a:visited{
	color: #5C534D;
	text-decoration: none;
	font-weight:normal; 
	padding:0;
	}	
.menu_idiomes a:hover{
	color: #FFFFFF;
	background-color: #5C534D;
	font-weight:normal; 
	padding:1px;
	}

.menu_idiomes a:active{
	color: #FFFFFF;
	background-color: #5C534D;
	font-weight:normal; 
	padding:1px;
	}

.icons_redes {
	margin-top:32px;
	margin-left:0px;
	height:30px;
	width:120px;
	border: 0;
	padding:0;
	float:left;
	}
	
	

/*----------------------BANNER CENTRAL---------------------------*/

img { 
	border: 0; 
}

.imatge {
	 width:96%; 
	 margin:auto; 
	 float:left; 
	 margin:20px 0px 0px 0px;
	}

.imatge img {
	border-radius: 0 0; 
	box-shadow: 0px 0px 10px #000; 
	padding:3px;
	background:#fff;
	-moz-transition: all 1s;
	-webkit-transition: all 1s;
	-o-transition: all 1s;
	}



.text {
	 width:95%; 
	 margin:auto; 
	 float:left; 
	 padding:20px 0px 0px 30px;
	 font-size:18px;
	 color:#5C534D;
	 line-height:22px;
	 letter-spacing:1.1px;
}


.contacte_form {
	 width:430px; 
	 margin:auto; 
	 float:left; 
	 padding:20px 0px 0px 30px;
	 font-size:18px;
	 color:#5C534D;
	 line-height:22px;
	 letter-spacing:1.1px;
}

/*.contacte {
	 width:auto;
	 margin:0;
	 float:left; 
	 padding:0;
	 font-size:18px;
	 color:#5C534D;
	 line-height:22px;
	 letter-spacing:1.1px;
}*/



/*/ ************************************* * slideshow /*/

div#slideshow {
	width: 980px;
	height:310px;
	top: 0px;
	padding:0;
	overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
	position: relative;
	z-index: 0;
}

div#slideshow ul#nav {
		display: none;
		list-style: none;
		position: relative; top: 210px; z-index: 15;
	}
	
div#slideshow ul#nav li#prev {
			float: left; margin: 0 0 0 40px;
		}
div#slideshow ul#nav li#next {
			float: right; margin: 0 50px 0 0;
		}

div#slideshow ul#nav li a {
			display: block; width: 80px; height: 80px; text-indent: -9999px;
		}


div#slideshow ul#nav li#prev a {
				background: url(../img/prev.png);
			}

div#slideshow ul#nav li#next a {
				background: url(../img/next.png);
			}

div#slideshow ul#slides {
		list-style: none;
	}

div#slideshow ul#slides li {
			margin: 0 0 0 0;
		}




/*----------------------SECCIÓNS INFERIORS---------------------------*/

.inferior{
	width:100%;
	height:auto;
	float:left;
	margin:0;
	padding: 0;
}

.seccio{
	width:270px;
	height:auto;
	float:left;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 20px;
	padding-top: 0;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
}

.banner{
	float:left;
	clear:both;
	padding:0px;
	text-align:left;
	font-size:176px;
	margin:10px 0 0px 0;
	border:1px #dcdcdc solid;
}


/*-----------------------------FOOTER------------------*/

.footer{
	clear:both;
	width:960px;
	margin-top:50px;
	height:90px;
	}

.copyright{
	float:left;
	padding:40px 0 0 30px;
	}
	
.copyright a{
	color:#8BAF31;
	text-decoration:none;
	}
	
.footer_links{
	float:right;
	padding:40px 30px 0 0;
	}
	
.footer_links a{
	text-decoration:none;
	color:#8BAF31;
	padding-left:5px;
	padding-right:5px;
	}
	
.footer_links a:hover{
	color: #FFFFFF;
	background-color:#8BAF31;
}

/*/ ************************************* * forms /*/

.field {  
	color: #000000;
	background-color: #FFFFFF; 
	font-family: "Gafata", sans-serif;
	font-size:18px; 
	margin-left:4px;
	margin-top:4px;
	width:260px;
	height:18px;
	border:#5C534D; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	}


.textarea {  
	color:#000000;
	background-color: #FFFFFF; 
	font-family: "Gafata", sans-serif;
	font-size:18px; 
	margin-left:4px;
	margin-top:4px;
	width:320px;
	border: #5C534D; 
	border-style: solid; 
	border-top-width: 1px; 
	border-right-width: 1px; 
	border-bottom-width: 1px; 
	border-left-width: 1px;
	}

/*-----------------------------MEDIA SCREEN------------------*/

/* PER A 980px O MENYS - TABLET LANDSCAPE  */
@media screen and (max-width: 980px) {

#contenidor {
		width:95%;
		height:100%;
	}

.imatge {
	 width:100%; 
	 margin:auto; 
	 float:left; 
	 margin-top:60px;
}

.imatge img {
	width:100%; 
	 margin:auto; 
	 float:left; 
	margin-top:60px;
}


#slideshow img {
	width:100%; 
	top: 0px;
	padding:0;
	overflow: scroll; 
	position: relative;
	z-index: 0;
}


#menu { 
display:none;
	}
	
.logo{
	width:80%;
	float:left;
	margin-left:5px;

}
	
.menu_idiomes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-top:5px;
	margin-bottom:30px;
	font-size:18px;
	}
	
	
.icons_redes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-bottom:30px;
	margin-top:-30px;
	}
	




/* PER A 768px O MENYS - TABLET PORTRAIT */
@media screen and (max-width: 768px) {
#contenidor {
		width:95%;
		height:100%;
	}

.imatge {
	 width:100%; 
	 margin:auto; 
	 float:left; 
	 margin-top:60px;
}
	
.logo{
	width:80%;
	float:left;
	margin-left:5px;

}


#slideshow img {
	width:100%; 
	top: 0px;
	padding:0;
	overflow: scroll; 
	position: relative;
	z-index: 0;
}




.menu_idiomes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-top:5px;
	margin-bottom:30px;
	font-size:18px;
	}
	
	
.icons_redes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-bottom:30px;
	margin-top:-30px;
	}
	


/* PER A 480px O MENYS - MOBILE LANDSCAPE */
@media screen and (max-width: 480px) {
	
#contenidor {
		width:95%;
		height:100%;
	}

.imatge {
	 width:100%; 
	 margin:auto; 
	 float:left; 
	 margin-top:60px;
}
		
	
.logo{
	width:80%;
	float:left;
	margin-left:5px;

}

#slideshow img {
	width:100%; 
	top: 0px;
	padding:0;
	overflow: scroll; 
	position: relative;
	z-index: 0;
}


.menu_idiomes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-top:5px;
	margin-bottom:30px;
	font-size:18px;
	}
	
	
.icons_redes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-bottom:30px;
	margin-top:-30px;
	}
	
.img_portfolio{
	width:95%; 
	height:95%;
	}
	




/* PER A 320px O MENYS - MOBILE PORTRAIT */
@media screen and (max-width: 320px) {
	
	#contenidor {
		width:95%;
		height:100%;
	}

.imatge {
	 width:100%; 
	 margin:auto; 
	 float:left; 
	 margin-top:60px;
}
		
	
.logo{
	width:80%;
	float:left;
	margin-left:5px;

}

#slideshow img {
	width:100%; 
	top: 0px;
	padding:0;
	overflow: scroll; 
	position: relative;
	z-index: 0;
}

	
.menu_idiomes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-top:5px;
	margin-bottom:30px;
	font-size:18px;
	}
	
	
.icons_redes {
	width:100%; 
	float:left; 
	margin-left:38px;
	margin-bottom:30px;
	margin-top:-30px;
	}

.img_portfolio{
	width:95%; 
	height:95%;
	}