body{
	width: 100%;
	margin: 0px;
	font-family: Helvetica;
}

/*
TIPOGRAFIA - fet per si volem posar la tipografia del Bigas Luna
=================

@font-face {
	font-family: tipografia-BL;
	src: url(../fonts/tipografia-BL.ttf);
	src: url(../fonts/tipografia-BL.woff);
	src: url(../fonts/tipografia-BL.otf);
}

*/

/* 
NAV
=================
*/

.flex-nav{
	display: flex;
	background-color: white;
	flex-direction: row;
	padding-left: 20px; padding-right: 20px; padding-top: 10px; padding-bottom: 10px;
	align-items: center;
	justify-content: space-between;
}
.titol{
	flex-grow: 5;
	font-family: Helvetica Neue;
	font-weight: bold;
	font-size: 40px;
	color: black;
}
.contacte{
	flex-grow: 1;
}
.llista{
	flex-grow: 0;
	color: white;
}

/* Si la pantalla és vertical la mida de la lletra canvia.*/
@media (orientation:portrait){
 	.titol {
 		font-size: 50px;
 	}
 }
 
/* 
VERTICAL MENU
=================
*/

 .vertical-menu ul {
 	width: 180px;
  	list-style: none;
  	margin: 0;
}

.vertical-menu ul li {
  	background-color: white; 
  	position: relative; /* Junt amb "float: left", fa que el menú surti a l'esquerra */
  	float: left;  /* Fa que el menú surti a l'esquerra */
}

.vertical-menu ul a {
 	color: black;
 	text-decoration:  none;
}

.vertical-menu ul li:hover {
  	background-color: white; /* Serveix per que no canvii de color la icona del menú */
}

.vertical-menu ul ul {
	position: absolute;
	float: left;
 	display: none; /* Serveix per amagar el menú */
    	left: auto;
    	right: 0; /* Serveix per veure el menú a l'esquerra */
}

.vertical-menu ul ul li {
	float: none; 
  	background-color: #D3D3D3; /* Gris clar */
  	padding: 5px; /* Separar la llista del menú */
}

.vertical-menu ul li:hover > ul {
	display: block; /* Serveix per veure el menú */
}

/* 
MAIN
=================
*/

/* 
MAIN ITEM
=================
*/

.main-item-title {
	font-weight: bold;
	font-size: 20px;
	color: grey;
	padding-top: 20px; padding-left: 20px; padding-bottom: 10px;
}
/* Si la pantalla és vertical la mida de la lletra canvia.*/
@media (orientation:portrait){
 	.main-item-title {
 		font-size: 30px;
 	}
 }

/* 
SMALL IMG 
=================
*/

.flex-container{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	padding-left: 10px; padding-rigth: 10px;
}
.flex-item {
	flex: 1;
	/* flex basis es la mida minima que vols que tinguin, si tenen mes espai es faran mes grans*/
	flex-basis: 300px;
	padding-top: 10px; padding-left: 20px; padding-right: 30px; padding-bottom: 20px;
}

.small-img-container {
}

.small-img {
	width: 100%;
}

/* 
BIG IMG
=================
*/

#big-img-container { 
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	z-index: 1;
	background: white;
	position: fixed;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

/*
Div per posar la X i que es vegi que es pot tancar la imatge
*/
.x-close-img {
	position: fixed;
	top: 10px;
	right: 20px;
	font-weight: bold;
	color: grey;
}

/* 
FORMULARI
=================
*/

/* Items del formulari */
.flex-container-form{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
}
.flex-item-form {
	flex: 1;
	/* flex basis es la mida minima que vols que tinguin, si tenen mes espai es faran mes grans*/
	flex-basis: 500px;
	padding-top: 5px; padding-left: 20px; padding-right: 20px; padding-bottom: 5px;
	font-weight: bold;
	font-size: 16px;
	color: grey;
}

/* 
ESTIL EMAIL
=================
*/

.email {
	font-family: arial;
	text-decoration: none;
	color: grey;
	font-weight: normal;
	padding-left: 10px;
}

/* 
ESTIL LINK
=================
*/

a {
	text-decoration: none;
	color: grey;
}