/* Display lists in a grid of fixed size. This is useful when lists have associated images. */
/* Idea from http://blog.mozilla.org/webdev/2009/02/20/cross-browser-inline-block/ */
li.grid
{
    min-width: 100px;
    height: 100px;
    /*border: 1px solid #000;*/
    display: -moz-inline-stack;
    display: inline-block;
    vertical-align: top;
    margin: 10px;
    zoom: 1;
    *display: inline;
    _height: 100px;
    text-align: center;
}
/* Formatting for each item in a 2D grid. This is used typically in the downloads section. */
.griditem
{
    font-size: 10pt;
    text-align: center;
    display: inline;
}
.griditem img
{
    text-align: center;
    height:100px;
    /*width:100px;*/
    border: 1px solid #eee;
    box-shadow: 0px 0px 2px #444444;
}


li {
    margin-bottom: 0.5em;
}

li li {
	margin-top: 0.5em;
	font-style: italic;
}

/* GENERAL */
* {
	outline: none !important;
}

html {
	height: 100%;
}

body {
	/*font-weight: 300;*/
	/*padding-top: 70px;*/
	height:100%;
	font-size: 15px;
	/* Fons gris */
	/*background-color: #DEDEDE;*/
	background-color: #FFFFFF;
	margin-top: 2.6em;
	
}

/* Amplada maxima de tot el cos. Falta solucionar una cosa, pero casi ho tenim */
.container-fluid {
	margin-right: auto;
	margin-left: auto;
	max-width: 1280px;
}

.imgdan {
	float:left;
	width: 90px;
	margin-right: 10px;
}

/* Aixo ho he fet per que el contingut sino es solapa amb la barra */
#top {
	padding-top: 70px;
}

/* Classe que dona color al cos de la web (fons blanc) */
.cos {
	background-color: white;
}

p {
	margin-top: 15px;
	margin-bottom: 20px;
}

a {
	color: #3c763d;
}

h3 {
	font-weight: bold;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}

a:hover {
	/*text-decoration: none;*/
	color: #2b542c;
}

table, table tr {
	font-size: 15px;
	/*font-weight: 200;*/
	vertical-align: top;
	border: none !important;
	line-height: 20px;
}
/* FI GENERAL */

/* NAVBAR */
/* Li dono aquest marge per baix per que la imatge la vaig fer jo i no queda alineat, patilla */
.linkedin {
	margin-bottom: -1px;
}

.navbar-inverse {
	background-color: #333;
}

.nav-social-large {
    margin-left: 5px;
    padding-top: 13px;
    width: 170px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    filter: alpha(opacity=75);
    opacity: 0.75;
}

.nav-social-large:hover {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.nav-social {
	margin-left:5px;
	padding-top: 13px;
	width: 25px;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
	filter: alpha(opacity=60);
	opacity: 0.6;
}

.nav-social:hover {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}

.navbar-brand, .navbar-inverse .navbar-brand {
	padding-left: 10px;
	font-size: 24px;
	font-weight: 200;
	color: #AAA;
}

.navbar-nav > li > a {
	padding-top: 17px;
	padding-bottom: 13px;
	font-size: 17px;
	font-weight: 200;
}

.navbar-inverse .navbar-nav > li > a {
	color: #AAA;
}

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:hover {
	background-color: transparent;
}

.navbar-toggle {
	border: 1px solid #444 !important;
}

.navbar-toggle:hover {
	background-color: #444 !important;
}

/* Arreglos per pantalles de mobil */
@media (max-width: 767px) {
	.navbar-brand {
		padding-left: 15px;
	}

	.social-icons {
		float: left !important;
		text-align: center;
	}

	.social-icons {
		margin-right: 15px;
		margin-left: -10px;
	}

	.social-icons img {
		margin-top: 0px;
		margin-bottom: 15px;
		width: 150px;
	}
}
/* FI NAVBAR */

/* RESEARCH */
.imgres {
	margin-right: 10px;
	width: 159px;
}

.btn-group {
	margin-top: 7px;
}

.btn-group .btn-success {
	color: #468847;
	background-color: rgba(223,240,216,0.3);
	border: 1px solid #d6e9c6;
}

.btn-group .btn-success:hover {
	background-color: rgba(207,232,196,1);
}
/* FI RESEARCH */

/* AJUSTEM MIDES SEGONS RESOLUCIO */
@media (max-width: 767px) {
/* Al haver de posar container-fluid al navbar per fixar una mida maxima d'ample m'apareixia un padding extra al arriba a aquesta mida.*/
	.navbar .container-fluid {
		padding-right: 0px;
		padding-left: 0px;
	}
}

@media (min-width: 768px) {

}

@media (min-width: 992px) {

}

@media (min-width: 1200px) {

}























header{display: block;
    width: 100%; height: 78px; top:0; left:0;  z-index: 50;
    position: absolute; margin: 0; width: 100%;left: 0; right: 0; padding: 0;
    /* box-shadow: 0 0 25px rgba(5,5,38,0.1); */
    border-bottom: 1px solid rgba(255, 255, 255, 0.11); 
    background-color: rgba(0, 0, 0, 0.1);
    /* filter: invert(100%); */
    /* transition: all ease-out .3s; */
}

.navbar{display: block; position: absolute; right: 0; top:0; line-height: 78px; margin-right: 4%;}
.navbar a{font-size: 1.3em; 
    font-weight: 400;
    text-decoration: none; 
    margin-left: 1.25em; font-family: 'Hind Madurai'; font-variant-caps: all-small-caps; color: rgb(240, 240, 240);}
.navbar a:hover{color: #ec4779; text-decoration: none;}
.nav-active{border-bottom: 3px solid #ec4779; padding-bottom: 10px;}

.navbar-mobile{position: absolute; height: 78px; width: 60px; top: 0; right:0; visibility: hidden;}
.navbar-mobile i{line-height: 78px; font-size: 3em; color: #ffffffbe;}
.navbar-mobile i:hover{color: #ec4779;}

.navbar-section{position:absolute; top:78px; right:0; width:200px; text-align: center; background-color: rgb(255, 255, 255)}
.navbar-section.show{visibility: visible; z-index: 0}
.navbar-section.hide{visibility: hidden;}

.nb-section{display: block; font-size: 1.5em; line-height: 2.0em; text-decoration: none;  font-variant-caps: all-small-caps; color:rgb(0, 0, 0)}
.nb-section:hover{background-color: #ec4779; color: white;}

.header-title{display:inline-block;line-height:78px;font-family:'Hind Madurai', sans-serif;font-size:2.4em;font-weight:bolder;
    text-decoration:none;z-index:50; margin-left: 4%}
.header-title:hover{text-decoration: none;}
.header-title #ms {color: #ffffff; font-family:'Hind Madurai', sans-serif;}
.header-title #lab {color: #ffffff; opacity: 0.7; font-family:'Hind Madurai', sans-serif;}

header.opaque {
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 25px rgba(5, 5, 38, 0.055);
}

header.opaque a {
    color: #322e3d;
}

header.opaque .header-title #ms {color: #ec4779; }
header.opaque .header-title #lab {color: #322e3d; opacity: 1.0;}
header.opaque .navbar-mobile i {color: #322e3d;}


@media screen and (max-width: 650px) {
    .navbar{visibility: hidden;}
    .navbar-mobile{visibility: visible;}
    .header-title #ms {color: #ec4779; }
    .header-title #lab {color: #322e3d; opacity: 1.0;}
    .navbar-mobile i {color: #322e3d;}
    header {
        background-color: rgb(255, 255, 255);
        box-shadow: 0 0 25px rgba(5, 5, 38, 0.055);
    }
}