@import url(http://fonts.googleapis.com/css?family=Dosis);

/*
Colors i fonts:
Granat: #9f053b
Gris: #363636
Beix: #f0e5d0
Gris fort: #4d4d4d
Font: Dosis
*/


/* Icones */

@font-face {
    font-family: 'icones';
    src: url('icones.eot');
    src: url('icones.eot') format('embedded-opentype'),
         url('icones.woff2') format('woff2'),
         url('icones.woff') format('woff'),
         url('icones.ttf') format('truetype'),
         url('icones.svg#icones') format('svg');
	}


.icones {
	font-family: 'icones';
	font-size: 60px;
	font-weight: normal;
	color: #ffffff;
}

.icones:hover {
	font-family: 'icones';
	font-size: 60px;
	font-weight: normal;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
}


/* Textos */

/* Gris fort */

.text1 {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}


.link1 {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
.link1:link {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
.link1:visited {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
.link1:hover {
	color: #9f053b;
	text-decoration: none;
	cursor: pointer;
}

.link2 {
	color: #9f053b;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
.link2:link {
	color: #9f053b;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
.link2:visited {
	color: #9f053b;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}
.link2:hover {
	color: #363636;
	text-decoration: none;
	cursor: pointer;
}


/* Característiques generals */

.loading {
    background: url("../img/loader.gif") no-repeat scroll center center #FFFFFF;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100000;
}


/* Inici banner llei de cookies */

div.cookiebanner > span {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
}

div.cookiebanner > a {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
}

.cookiebanner-close {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	background: #4d4d4d;
	border: #ffffff 1px solid; 
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari and Chrome */
	border-radius: 5px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}

.cookiebanner-close:hover {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	background: #9f053b;
	border: #ffffff 1px solid; 
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari and Chrome */
	border-radius: 5px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
	-webkit-transition:background 0.3s ease;
	-moz-transition:background 0.3s ease;
	-o-transition:background 0.3s ease;
	transition:background 0.3s ease;
}


/* Inici Quadret al clicar amb el botó de la dreta */

#contextMenu {	/* The menu container */
	border: 1px solid #9f053b;	
	background: url(../imatges/fons_clar.png);
 	padding:0px;
 	padding-top:10px;
	width:176px;
	height:180px;
	line-height: 2px; 
	-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.50);
	-moz-box-shadow: 0 0 4px rgba(0,0,0,0.50);
	box-shadow: 0 0 4px rgba(0,0,0,0.50);
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	cursor:url(imatges/cursor_fletxa.cur);
	text-align: left;
	/* Never change these two values */
	display:none;
	position:absolute;
	/* Eliminació de la opacitat */
	z-index:1000;
	filter:alpha(opacity=100);
	-moz-opacity:.100;
	opacity:.100"
}


/* Inici formulari de contacte */

#contactForm {
	margin-top: 10px;
	width: 500px;
}

#contactForm .casellatext {
	width: 500px;
	background-color: #inherit;
	border: #363636 1px solid;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	text-decoration: none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding-left: 5px;
	padding-right: 5px;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari and Chrome */
	border-radius: 5px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}

#contactForm .casellacaptcha {
	width: 40px;
	height: 19px;
	border: #9f053b 1px solid;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	text-decoration: none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding-left: 5px;
	padding-right: 5px;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari and Chrome */
	border-radius: 5px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}

#contactForm textarea {
	width: 500px;
	height: 50px;
	background-color: #ffffff;
	border: #363636 1px solid;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	text-decoration: none;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding-left: 5px;
	padding-right: 5px;
	-moz-border-radius: 5px; /* Firefox */
	-webkit-border-radius: 5px; /* Safari and Chrome */
	border-radius: 5px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
}

#contactForm textarea:focus, #contactForm input:focus {
	border: 1px solid #9f053b;
}

#contactForm titol {
	float: left;
	text-align: left;
	width: 500px;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	text-decoration: none;
}

#contactForm titol2 {
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	text-decoration: none;
}

#contactForm seguretat {
	text-align: center;
	width: 500px;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	text-decoration: none;
}

#contactForm codi {
	position: relative;
	top: -5px;
}

#contactForm input.submit {
	cursor: pointer;
	text-align: center;
	width: 140px;
	height: 30px;
	border: #363636 1px solid;
	background-color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #363636;
	font-size: 18px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
}

#contactForm input.submit:hover {
	cursor: pointer;
	text-align: center;
	width: 140px;
	height: 30px;
	background-color: #9f053b;
	border: #9f053b 1px solid;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #ffffff;
	font-size: 18px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-webkit-transition:background 0.3s ease;
	-moz-transition:background 0.3s ease;
	-o-transition:background 0.3s ease;
	transition:background 0.3s ease;
}

#contactForm .error {
	color: #9f053b;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
}

.granat {
	color: #9f053b;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
}

/* Xarxes socials */

section.top-section {
    background: url(../imatges/fons_clar.png);
    clear: both;
    position: relative;
    width: 100%;
    border-top: 4px solid #9f053b !important;
}
section.top-section .span12 {
    padding: 0px 0;
    position: relative;
}
section.top-section .container .span12 {
    position: relative;
}
.idiomes {
    margin-top: 8px;
    float: right;
    margin-right: 70px;
}
.idiomes li {
    display: inline-block;
    list-style: none outside none;
    margin: 0px 10px 0px 0px;
    text-indent: -9999px;
}
.idiomes a {
    display: block;
    height: 26px;
    transition: all 0.2s ease-out 0s;
    width: 26px;
}
.idiomes li.catala a {
    background-image: url("../imatges/bandera_cat.png");
    background-repeat: no-repeat;
}
.idiomes li.espanol a {
    background-image: url("../imatges/bandera_esp.png");
    background-repeat: no-repeat;
}
.idiomes li.catala a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
.idiomes li.espanol a:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
section.top-section a.toggle {
    background: url("../imatges/pull_up.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 26px;
    margin: 0;
    padding: 8px;
    position: absolute;
    right: 130px;
    width: 28px;
}
section.top-section a.toggle:hover {
    background: url("../imatges/pull_up_hover.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 26px;
    margin: 0;
    padding: 8px;
    position: absolute;
    right: 130px;
    width: 28px;
}
section.top-section a.toggleDown {
    background: url("../imatges/pull_down2.png") no-repeat scroll 0 0 transparent;
    cursor: pointer;
    display: block;
    height: 20px;
    margin: 0;
    padding: 8px;
    right: 130px;
    width: 28px;
}
section.top-section a.toggleDown:hover {
	background: url("../imatges/pull_down_hover2.png") no-repeat scroll 0 0 transparent;
	cursor: pointer;
	display: block;
	height: 22px;
	margin: 0;
	padding: 8px;
	right: 130px;
	width: 28px;
}


/* Menú */

.navbar-inner{
	background-color: transparent;	
	background: url(../imatges/fons_clar.png);
	height: 78px;	
	border-bottom: none; 
}
.nav{
	margin-top: 30px !important;
}
.navbar .nav > li {
	float: left;
	margin-left: 0px;
}
.navbar .brand{
	padding-left: 120px;	
	padding-top: 10px;
	text-align: center;
	text-shadow: none;
	color: #ffffff;
}
.navbar .nav > li > a {
	background: url("../imatges/fons_menu.png") repeat scroll 0 0 transparent;
    	font-family: Dosis, calibriregular, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	color: #f0e5d0;
	font-weight: normal;
	height: 36px;
	line-height: 36px;
	padding: 0;	
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	width: 116px;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
    background: url("../imatges/fons_menu_active.png") repeat scroll 0 0 transparent;
    color: #ffffff;
    box-shadow: none;
}

.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
    background: url("../imatges/fons_menu_active.png") repeat scroll 0 0 transparent;
    color: #ffffff;
    text-decoration: none;
}
.section{
  padding-top: 60px;
  padding-bottom: 60px;
}


/* Home */

.home{	
	background: url(../imatges/fons.jpg);	
	background-repeat: repeat;
	margin-top: 82px;
}
.home .title-unit{
	color: #ffffff;
	text-align: center;
	margin-top: 15px;
}
.home .title-unit img{
	margin-bottom: 10px;
}
.home .title-unit h2{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 25px;
	font-weight: lighter;	
	padding-top: 10px;
}
.home .title-unit h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	font-weight: lighter;
}

#thecircles {
	margin-left: 150px;
	margin-top: 30px;
}
.circle {
	background-image: url("../imatges/rodona.png");
	background-position: 0 0;	
	background-repeat: no-repeat;
	border-radius: 500px 500px 500px 500px;
	cursor: pointer;
	float: left;
	height: 200px;
	margin-left: 20px;
	position: relative;
	text-align: center;
	width: 200px;
	border-radius: 500px 500px 500px 500px;
	-webkit-border-radius: 500px 500px 500px 500px;
	-moz-border-radius: 500px 500px 500px 500px;
	-o-border-radius: 500px 500px 500px 500px;
	-ms-border-radius: 500px 500px 500px 500px;
}

.circle a {
	display: block;
	height: 200px;
	width: 200px;
	color: #ffffff;
	-webkit-transition: color 0.2s linear;  
	-moz-transition: color 0.2s linear;  
	-o-transition: color 0.2s linear;  
	-ms-transition: color 0.2s linear;  
	transition: color 0.2s linear 0s;
}
.circle a:hover {
	text-decoration: none;
	color: #ffffff;
}
.circle p{
	margin-top: 60px;
	text-decoration: none;
}
.circle p:hover {
	text-decoration: none;
	color: #ffffff;
}
.circle h2{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 22px;
	font-weight: normal;
	text-transform: uppercase; 
}


/* Treballs */

.treballs{
	background: url(../imatges/fons_clar.png);
	background-repeat: repeat;
}

.header{
  text-align: center;
}
.header h2{
  color: #363636;
  font-family: Dosis, calibriregular, Arial, sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  line-height: 86px;
}

.header h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	color: #363636;
	text-align: center;
 	font-weight: normal;
}


hr{
  border-top: 1px solid #C1B59E;
  border-bottom: 1px solid #ffffff;
  margin-left: 94px;
  width: 84%;
}

/* Imatges */

#options ul {
  list-style: none outside none;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 20px;
  margin-left: 0px;

}
#options li {
  display: inline-block;
}
#options li a {
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color:#363636;
	font-size: 16px;
	padding: 8px;
	text-decoration: none;
	text-transform: uppercase;
	line-height: 34px;
}
#options li a:hover {
	color:#FFFFFF;
	background: #9f053b;
}
#options li a:active {
	color:#FFFFFF;
	background: #9f053b;
}
#options li a.selected {
	color:#FFFFFF;
	background: #9f053b;
}
#portfolio{
	margin-left: 100px;
}

.box{

}
.block{
	color: #9f053b;
	float: left;
	margin: 4px;
	overflow: hidden;
	position: relative;
	height: 270px;
	width:  315px;
	background: none repeat scroll 0 0 rgba(255, 255, 255, 0.5);
	box-shadow: 4px 4px rgba(0, 0, 0, 0.05);
	position: relative;
	text-align: center;
	top: 20px;
}

.block img {
	width: 100% !important;
}
.view-first img {
	transition: all 0.2s linear 0s;
}
.view-first .mask {
	background-color: rgba(48, 48, 48, 0.5);
	opacity: 0;
	transition: all 0.4s ease-in-out 0s;
}
.view-first:hover .mask {
	opacity: 1;
}
.view {
	cursor: default;
	float: left;
	position: relative;
	text-align: center;
	width: 100%;
}
.view .mask {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
}

.view a.info {
    background-image: url("../imatges/ampliar_imatge.png");
    display: block;
    height: 64px;
    left: 50%;
    margin-left: -30px;
    margin-top: -30px;
    position: absolute;
    top: 50% !important;
    transition: all 0.2s linear 0s;
    width: 57px;
}
.nolink a.info {
    margin-left: -17px !important;
}
.isotope-item {
    z-index: 2; 
 }
.isotope-hidden.isotope-item { 
    pointer-events: none;
     z-index: 1; 
 }
/* Isotope CSS3 transitions */
.isotope, .isotope .isotope-item {
     -webkit-transition-duration: 0.8s; 
     -moz-transition-duration: 0.8s; 
     -ms-transition-duration: 0.8s;
     -o-transition-duration: 0.8s;
     transition-duration: 0.8s;
     display:block; 
 }
.isotope { 
    -webkit-transition-property: height, width; 
    -moz-transition-property: height, width; 
    -ms-transition-property: height, width;
     -o-transition-property: height, width;
     transition-property: height, width; 
 }
.isotope .isotope-item { 
    -webkit-transition-property: -webkit-transform, opacity; 
    -moz-transition-property: -moz-transform, opacity;
     -ms-transition-property: -moz-transform, opacity;
     -o-transition-property: top, left, opacity; 
     transition-property: transform, opacity;
 }
/* disabling Isotope CSS3 transitions */
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { 
    -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s; 
     -ms-transition-duration: 0s; 
     -o-transition-duration: 0s; 
     transition-duration: 0s;
 }


/* Clients */

 .client{
 	background: url(../imatges/fons_fosc.png);
	background-repeat: repeat;
 }
 .client h2{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 30px;
	color: #ffffff;
	text-transform: uppercase;
	text-align: center;
	font-weight: normal;
 }
 .client h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-align: center;
 	font-weight: normal;
}

 .client hr{
	border-bottom: 1px solid #3A3A3A;
	border-top: 1px solid #181817;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	width: 24%;
 }
 .clients{
	margin-left: 104px;
 }
 .clients .logo{
     height:90px;
     width: 170px;
     background: #ffffff;
     text-align: center;
     float: left;
     margin-right: 30px;
 }

 .clients .logo > img {
	padding: 0px;
}

 .clients .logo2{
     height:90px;
     width: 170px;
     background: #ffffff;
     text-align: center;
     float: left;
     margin-top: 30px;
     margin-right: 30px;
}

/* Serveis */

.serveis{
	background: url(../imatges/fons_clar.png);
	background-repeat: repeat;
}
.wprocess-head {	
	margin: 50px auto;
	text-align: center;
	width: 300px;
	-moz-box-shadow:    1px 1px 1px 1px #CCCCCC;
	-webkit-box-shadow: 1px 1px 1px 1px #CCCCCC;
	box-shadow:         1px 1px 1px 1px #CCCCCC;
}

.serveis h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	color: #363636;
	text-align: center;
 	font-weight: normal;
}

.serveis .box .quadrant01 {
	float: left;
	margin-top: 10px;
	background: url(../imatges/quadrant.png);
	background-repeat: no-repeat;
	width: 249px;
   
}
.serveis .box .quadrant01:hover{
	background: url(../imatges/quadrant_hover.png);
	background-repeat: no-repeat;
	width: 249px;
	cursor: pointer;
}

.serveis .box .quadrant02 {
	float: left;
	margin-top: 10px;
	background: url(../imatges/quadrant.png);
	background-repeat: no-repeat;
	width: 249px;
	margin-left: 100px;
}

.serveis .box .quadrant02:hover{
	background: url(../imatges/quadrant_hover.png);
	background-repeat: no-repeat;
	width: 249px;
	cursor: pointer;
}

.wprocess{
	margin-left: 140px;
	color: #ffffff;	
	text-align: center;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 20px;
	font-weight: normal;
	line-height: 35px;
}
.wprocess .wp-1{
	background: url(../imatges/serveis_01.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-bottom: 50px;
}
.wprocess .wp-2{
	background: url(../imatges/serveis_01.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-left: 42px;
	margin-bottom: 50px;
}
.wprocess .wp-3{
	background: url(../imatges/serveis_01.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-left: 42px;
	margin-bottom: 50px;
}
.wprocess .wp-4{
	background: url(../imatges/serveis_04_hover.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-left: 42px;
	margin-bottom: 50px;
}
.wprocess .wp-1:hover{
	background: url(../imatges/serveis_01_hover.png);
	background-repeat: no-repeat;
	height: 190px;	
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-2:hover{
	background: url(../imatges/serveis_01_hover.png);
	background-repeat: no-repeat;
	height: 190px;	
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-3:hover{
	background: url(../imatges/serveis_01_hover.png);
	background-repeat: no-repeat;
	height: 190px;	
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-4:hover{
	background: url(../imatges/serveis_04.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-8{
	background: url(../imatges/serveis_08.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;	
	float: left;
	margin-bottom: 50px;
}
.wprocess .wp-7{
	background: url(../imatges/serveis_05.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-left: 20px;
	margin-bottom: 50px;
}
.wprocess .wp-6{
	background: url(../imatges/serveis_05.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-left: 42px;
	margin-bottom: 50px;
}
.wprocess .wp-5{
	background: url(../imatges/serveis_05.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	float: left;
	margin-left: 42px;
	margin-bottom: 50px;
}

.wprocess .wp-8:hover{
	background: url(../imatges/serveis_08_hover.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-7:hover{
	background: url(../imatges/serveis_05_hover.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-6:hover{
	background: url(../imatges/serveis_05_hover.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}
.wprocess .wp-5:hover{
	background: url(../imatges/serveis_05_hover.png);
	background-repeat: no-repeat;
	height: 190px;
	width: 210px;
	color: #ffffff;
	cursor: pointer;
}


/* Qui som */

.quisom{
	background: url(../imatges/fons_fosc.png);
	background-repeat: repeat;
}
.quisom .box{
	margin-left: 140px;
	color: #ffffff;
}

.quisom h2{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	font-size: 30px;	
	margin-top: 26px;
	font-weight: normal;
}

.quisom h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-align: center;
 	font-weight: normal;
}

.quisom .box h2{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	color: #ffffff;
	text-align: center;
	text-transform: uppercase;
	font-size: 22px;	
	margin-top: 10px;
	cursor: pointer;
}

.quisom .box h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	color: #ffffff;
	text-align: center;
 	font-weight: normal;
	line-height: 25px;
	margin-top: 80px;
}

.quisom .box .quadrant01 {
	float: left;
	margin-top: 10px;
	background: url(../imatges/quadrant.png);
	background-repeat: no-repeat;
	width: 249px;
   
}
.quisom .box .quadrant01:hover{
	background: url(../imatges/quadrant_hover.png);
	background-repeat: no-repeat;
	width: 249px;
	cursor: pointer;
}

.quisom .box .quadrant02 {
	float: left;
	margin-top: 10px;
	background: url(../imatges/quadrant.png);
	background-repeat: no-repeat;
	width: 249px;
	margin-left: 100px;
}

.quisom .box .quadrant02:hover{
	background: url(../imatges/quadrant_hover.png);
	background-repeat: no-repeat;
	width: 249px;
	cursor: pointer;
}

.quisom .box .text{
	color: #303030;
	text-align: center;
}

.quisom .box hr {
	margin-left: 0;
	width: 100%;
}


/* Contacte */

.contacte{
	background: url(../imatges/fons_clar.png);
	background-repeat: repeat;
}

.contacte h3{
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 18px;
	color: #363636;
	text-align: center;
 	font-weight: normal;
}


input:-moz-placeholder, textarea:-moz-placeholder {
	color: #84837F;
}



/* Footer */

footer{
	height: 80px;
	background-repeat: repeat;
	background: url(../imatges/fons_fosc.png);
	color: #ffffff;
	line-height: 80px;
}

footer .esquerra {
	float: left;
}

footer .esquerra span {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}


footer .dreta {
	float: right;
}

footer .dreta span {
	color: #ffffff;
	font-family: Dosis, calibriregular, Arial, sans-serif;
	font-size: 16px;
	text-decoration: none;
}

#note { 	
	color:#ff0000; 
	font-size:11px; 
	line-height:14px;
	margin-bottom:15px;
}


/* Scroll-Top */

.scroll-top {
	background: url("../imatges/scroll_top.png") no-repeat scroll center center #9f053b;
	bottom: 0;
	display: none;
	height: 30px;
	position: fixed;
	right: 10px;	
	text-indent: -9999px;
	width: 30px;
	z-index: 9999;
}


/* Reponsive Css */

/* Large desktop */
@media (min-width: 1920px){
      .navbar-inner{
        background-color: transparent;
        background-image: url(../imatges/fons_fosc.jpg); 
        border-bottom: none; 
        background-repeat:repeat; 
      } 
    section.top-section a.toggle {
        right: 360px;
    }
    section.top-section a.toggle:hover {
        right: 360px;
    }
    section.top-section a.toggleDown {
        right: 360px;
    }
    section.top-section a.toggleDown:hover {
        right: 360px;
    }                
}
@media (max-width: 1280px) {
    section.top-section a.toggle {
        right: 40px;
    }
    section.top-section a.toggle:hover {
        right: 40px;
    }
    section.top-section a.toggleDown {
        right: 40px;
    }
    section.top-section a.toggleDown:hover {
        right: 40px;
    } 
    .navbar .brand{
        padding-left: 200px;
        padding-top: 10px;
        text-align: center;
        text-shadow: none;
        color: #FFFFFF;
     }
}
@media (max-width:980px) {
      section.top-section a.toggle {
          right: 20px;
      }
      section.top-section a.toggle:hover {
          right: 20px;
      }
      section.top-section a.toggleDown {
          right: 20px;
      }
      section.top-section a.toggleDown:hover {
          right: 20px;
      } 
      .navbar .brand{
        padding-left: 50px;
        padding-top: 20px;
        text-align: center;
        text-shadow: none;
        color: #FFFFFF;
      }
      .navbar-inner{
        background-color: transparent;
        background-image: url(../imatges/fons_fosc.jpg); 
        border-bottom: none; 
        background-repeat:repeat; 
      }    
      #thecircles { 
        margin-left: 50px;
      } 
      hr {
        margin-left: 0px;
        width: 100%;
      }
      #portfolio{
        margin-left: 150px;
      }
      .clients .logo{
        margin-bottom: 20px;
      }
      .quisom .box{
        margin-left: 12px;
      }
      .wprocess{
        margin-left: 40px;
      }
      .wprocess .wp-2{
        margin-left: 20px;
      }
      .wprocess .wp-3{
        margin-left: 20px;
      }
      .wprocess .wp-4{
        margin-left: 40px;
      }
      .wprocess .wp-7{
        margin-left: 0px;
      }
      .wprocess .wp-6{
        margin-left: 14px;
      }
      .contacte-box{
        margin-left: 60px;
      }
}


@media (max-width:800px) {
    .navbar-inner{
      background-color: transparent;
      background-image: url(../imatges/fons_fosc.jpg);
      height: auto; 
      border-bottom: none; 
      background-repeat:repeat; 
    }
    .nav{
      margin-top: 30px !important;
    }
    .navbar .btn, .navbar .btn-group {
      margin-top: 16px;
    }
    .navbar .nav > li {
      float: none;
      margin-left: 0px;
    }
    .navbar .brand{
      padding-left: 50px;
      padding-top: 10px;
      text-align: center;
      text-shadow: none;
      color: #FFFFFF;
    }

    .navbar .nav > li > a {
      background-image:none;
      background-color: #9B9EA3; 
      color: #DACBB4;
      text-shadow:none;
      margin-bottom: 6px;
      width: auto;
      height: auto;
      text-align: left;
      text-decoration: none;
      line-height: 20px;
      padding: 9px 15px;
    }
    .navbar .nav > .active > a,
    .navbar .nav > .active > a:hover,
    .navbar .nav > .active > a:focus {
      background-color: #3C3D3F;
      background-image:none;
      color: #FFA400;
      box-shadow: none;
      text-shadow:none;
    }
    .navbar .nav > li > a:focus,
    .navbar .nav > li > a:hover {
      background-image:none; 
      background-color: #3C3D3F;
      color: #FFA400;
      text-decoration: none;
      text-shadow:none;
    }
    .navbar-fixed-top {
      margin-bottom: 0px;
    }
    section.top-section a.toggle {
      right: 40px;
    }
    section.top-section a.toggle:hover {
      right: 40px;
    }
    section.top-section a.toggleDown {
      right: 40px;
    }
    section.top-section a.toggleDown:hover {
      right: 40px;
   } 
    #portfolio{
      margin-left: 200px;
    }
    .quisom .box{
      margin-left: 80px;
    }
    .quisom .box .support{
      margin-left: 180px;
    }
}

@media (max-width:360px) {
      section.top-section{
        margin-left: -20px;
        margin-right: 0px;
        width: auto;
      }
      section.top-section a.toggle {
        right: 0px;
      }
      section.top-section a.toggle:hover {
        right: 0px;
      }
      section.top-section a.toggleDown {
        right: 0px;
      }
      section.top-section a.toggleDown:hover {
        right: 0px;
      } 
      .idiomes{
        margin-right: 68px;
      }
      section {
        margin-left: -20px;
        margin-right: -20px;
      }   
      .home .title-unit {
        margin-top: 50px;
      }  
      #portfolio{
        margin-left: 14px;
      }
      .clients{
        margin-left: 84px;
      }
      .quisom .box{
        margin-left: 44px;
      }
      .quisom .box .development{
        margin-left: 0px;
      }
      .quisom .box .support{
        margin-left: 0px;
      }
      .contacte-box{
        margin-left: 0px;
      }
      .contacte-box img{
        margin-bottom: 40px;
      }
      footer{
        height: auto;
        margin-left: -20px;
        margin-right: -20px;        
      }
}
@media (max-width:320px) {
      #portfolio{
        margin-left: 0px;
      }
      .clients{
        margin-left: 84px;
      }
      .quisom .box{
        margin-left: 20px;
      }
      .quisom .box .development{
        margin-left: 0px;
      }
      .quisom .box .support{
        margin-left: 0px;
      }
      .contacte-box{
        margin-left: 0px;
      }
      .contacte-box img{
        margin-bottom: 40px;
      }
      footer{
        height: auto;
        margin-left: -20px;
        margin-right: -20px;        
      }

}