/* ********ULL!!!!******* */
/* He afegit TOTES les fonts s'han de treure les que no fem servir */

/* FONT URL https://www.google.com/fonts#UsePlace:use/Collection:Arvo:400,700,400italic,700italic|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800 */

/*@import url(http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic|Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);*/

/* font-family: 'Arvo', serif; */
/* font-family: 'Open Sans', sans-serif; */
body{
  font-family: 'Open Sans', sans-serif; 
  overflow: hidden;
}

#menu #lefttab,
#menu #righttab{
	font-family: 'Arvo', serif;
}
.foreground_l #menu #lefttab{
	font-weight:normal;
}

.foreground_r #menu #righttab{
	font-weight:normal;
}

#header h1{
	font-family: 'Arvo', serif;
	font-size: 17px;
	/*line-height: 18px;*/
}

/* End fonts */


.tabtext{
	font-size: large;
	/*white-space: nowrap;*/
}

.foreground_l #lefttab .tabtext, .foreground_r #righttab .tabtext{
	color: #333333;	
}

.foreground_l #righttab .tabtext, .foreground_r #lefttab .tabtext{
	color: #999999;	
}

strong{
	font-weight: bold;
}

h1{
	font-size: large;
	text-align: center;
}
@media screen and (min-height: 480px) {
    h1 {
        font-size: x-large;
    }
}

@media screen and (min-width: 630px) {
    h1 {
        font-size: x-large;
    }
}

#sharebutton{
	background-image: url('imgs/share.jpg');
	background-repeat: no-repeat;
}

#printbutton{
	background-image: url('imgs/print.png');
	background-repeat: no-repeat;
}

#menu li{
	cursor: pointer;
}

.textcol{
	margin: 0 3px 0 14px;
}

#titular{
	/*font-size: medium;*/
	font-size: 15px;
	color: #333333;
	line-height: 90%;
	text-align: center;
	max-width: 95%;
	margin: 0 auto;
}

#titular h2{
	padding-top: 0.5em;
}


.textbox{
	font-size: small;
	padding-left: 12px;
	line-height: 120%;
	color: #666666;
}
/*
.foreground_r .textbox{
	background-image: url('imgs/marcador_b.jpg');
	background-repeat: no-repeat;
	background-position: 0 0.35em;
}

.foreground_l .textbox{
	background-image: url('imgs/marcador.jpg');
	background-repeat: no-repeat;
	background-position: 0 0.35em;
}*/
/******IMAGES*****/
/*#fullslide{
	background-image: url('imgs/img0.png');
	background-repeat: no-repeat;	
	background-position: bottom right;
}*/

.foreground_l .slide img{
	float: right;
}

.foreground_r .slide img{
	float: left;
}












.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}


.slideLeft{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeft {
	0% {
		transform: translateX(150%);
	}
	50%{
		transform: translateX(-8%);
	}
	65%{
		transform: translateX(4%);
	}
	80%{
		transform: translateX(-4%);
	}
	95%{
		transform: translateX(2%);
	}			
	100% {
		transform: translateX(0%);
	}
}

@-webkit-keyframes slideLeft {
	0% {
		-webkit-transform: translateX(150%);
	}
	50%{
		-webkit-transform: translateX(-8%);
	}
	65%{
		-webkit-transform: translateX(4%);
	}
	80%{
		-webkit-transform: translateX(-4%);
	}
	95%{
		-webkit-transform: translateX(2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}

.slideRight{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRight {
	0% {
		transform: translateX(-150%);
	}
	50%{
		transform: translateX(8%);
	}
	65%{
		transform: translateX(-4%);
	}
	80%{
		transform: translateX(4%);
	}
	95%{
		transform: translateX(-2%);
	}			
	100% {
		transform: translateX(0%);
	}	
}

@-webkit-keyframes slideRight {
	0% {
		-webkit-transform: translateX(-150%);
	}
	50%{
		-webkit-transform: translateX(8%);
	}
	65%{
		-webkit-transform: translateX(-4%);
	}
	80%{
		-webkit-transform: translateX(4%);
	}
	95%{
		-webkit-transform: translateX(-2%);
	}			
	100% {
		-webkit-transform: translateX(0%);
	}
}





