@charset "utf-8";
article table{
	position: relative;
}
/*Mobile 280 ---------------------------------------------------------------------------------------------------------------------<480px*/
@media all and (min-width: 0px){

	#hora{
		margin-left: 13%;
		margin-top: -13%;
		/*margin-bottom: 7%;*/
	}
	#hora_text p{
		font-size: 1.5em;
		color: white;
	}
	#hora_text{
		margin-top: -24%;
	}


	/*------------ IMATGE GRAN --------------------*/
	#contingut_detall{
		background-color: rgb(230,230,230);
		float: left;
		width: 280px;
	}
	#ruta{
		color: black;
		font-size: 3vw;
	}
	.imatges_grans {
		position: relative;
		float: left;
		width: 280px;
		
	}
	.imatges_grans img{
		width: 280px;
		float: left;
		height: inherit;
	}
	.imatges_grans aside{
		position: absolute;
		z-index: 15;
		width: 280px;
		height: 40px;
		/*margin-top: 146px;*/
		bottom: 0;
	}
	.imatges_grans aside h2{
		float: left;
		color: white;
		font-weight: bold;
		font-size: 0.4em;
		margin-bottom: 2px;
		margin-left: 10px;
	}
	.imatges_grans aside p{
		margin: 0;
		clear:left;
		float: left;
		color: white;
		margin-left: 10px;
		font-size: 0.5em;
	}

	/*------------- DETALLS ----------------*/
	#contingut{
		clear: left;
		float: left;
		width: 280px;
		margin-top: 10px;
	}
	#info_esdev .categoria {
		padding: 5px 0px 5px 5px;
		border: thin solid white;
		text-align: center;
		width: 45%;
		float: left;
		margin-top: 21px; 

	}
	#info_esdev{
		color: white;
		width: 270px;
		padding: 5px;
		
		box-shadow: 1px 1px 5px rgba(0,0,0,0.35);
		overflow: hidden;
	}
	#info_esdev img{
		width: 100%;
		/*height: 272px;*/
	}
	#info_esdev.dansa{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#info_esdev.teatre{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#info_esdev.exposicio{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#info_esdev.concert{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#info_esdev.circ{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#info_esdev.conferencia{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#info_esdev.altres{
		opacity: 1;
		position: inherit;
		/*height: inherit;*/
	}
	#data_detall{
		width: 45%;
		float: left;
		margin-left: 5%;
	}
	#data_detall .compacte p{
		float: inherit;
		text-align: center;
		border-bottom: thin solid white;
		margin: 5% 0px 5% 0px;
		padding: 5% 0px 5% 0px;
		font-size: 1.2em;
	}
	@-moz-document url-prefix() {
   		#data_detall .compacte p{
			margin: 0px;
		}
	}
	#info_esdev p{
		float: left;
		/*margin-top: -28%;*/
		margin-top: -24%;
		font-size: 20px;

	}
	#hora img{
		width: 29%;
		margin-top: 4px;
	}
	#hora{
		float: left;
		margin-top: -15%; 
	}
	#info_esdev button{
		height: 39px;
		width: 70%;
		margin-left: 15%;
		background-color: #362D1F;
		border: none;
		color: white;
		padding: 10px;
		text-decoration: none;
	}
	#hora_text{
		margin-left: 40%;
		margin-top: -33%;
	}
	#hora_text p{
		margin: 0px;
		color: white;
	}

	/*----------- ARTICLE ----------*/
	#contingut article{
		background-color: white;
		float: left;
		margin-top: 10px;
		width: 97%;
	}
	#altres_dades,
	#quarantaanysdansa{
		background-color: white;
		float: left;
		margin-top: 5px;
		box-shadow: 1px 1px 5px rgba(0,0,0,0.35);
		width: auto;/*98%*/
		margin-right:5px;
	}
	#quarantaanysdansa{
		background-color:transparent;
		box-shadow: none;
	}
	#quarantaanysdansa img{
		width: 100%;
	}
	article iframe{
		width: 100%;
	}
}
/*Mobile 280 ---------------------------------------------------------------------------------------------------------------------<480px*/
@media all and (max-width: 481px){
	#altres_dades,
	#quarantaanysdansa{
		padding: 0% 0% 0% 1%;
	}
}
/*Mobile >280 ---------------------------------------------------------------------------------------------------------------------<480px*/
@media all and (min-width: 281px){
	/*------------ IMATGE GRAN --------------*/
	#contingut_detall{
		width: 100%;
	}.imatges_grans {
		width: 100%
	}
	.imatges_grans img{
		width: 100%;
	}
	.imatges_grans aside{
		width: 100%;
		height: 21%;
		/*margin-top: 52%;*/
		bottom: 0;
	}
	.imatges_grans aside h2{
		font-size: 0.5em;
	}
	.imatges_grans aside p{
		font-size: 0.4em;
	}
	#hora{
		margin-left: 11%;
	}

	/*------------- DETALLS ----------------*/
	#contingut{
		clear: left;
		float: left;
		width: 100%;
		margin-top: 10px;
	}
	#info_esdev .categoria {
		padding: 5px 0px 5px 5px;
		border: thin solid white;
		text-align: center;
		width: 45%;
		float: left;

	}
	#info_esdev{
		color: white;
		width: auto;/*100%;*/
		padding: 0px;
	}
	#info_esdev.espais{
		width:100%;
	}
	#data_detall .compacte p{
		font-size: 28px;
	}
	#info_esdev p{
		font-size: 1.5em;
		
		width: 45%;
		text-align: center;

	}
	#info_esdev button{
		height: 70px;
		width: 70%;
		margin-left: 15%;
		background-color: #362D1F;
		border: none;
		color: white;
	}
	#data_detall .compacte p{
		width: inherit;
	}
	#contingut{
		margin-bottom: 10px; 
	}

	/*---------FOOTER------------*/
	footer{
		float: left;
		clear: left;
		width: 100%;
	}
}

/*Mobile >280 ---------------------------------------------------------------------------------------------------------------------<480px*/

/*Tablet  ---------------------------------------------------------------------------------------------------------------------<1024px*/
@media all and (min-width: 481px){
	#ruta{
		font-size: 1.5vw;
	}
	.imatges_grans aside{
		
		height: 21%;
		
	}

	/*------------- DETALLS ----------------*/

	#info_esdev .categoria {
		width: 45%;
		float: left;

	}
	#info_esdev{
		width: 32.8%;
		float: right;
		padding: 5px;
	}
	#info_esdev.espais{
		width:32.8%;
	}
	#altres_dades,
	#quarantaanysdansa{
		width: 32.8%;
		float: right;
		clear: right;
		/*padding: 5px;*/

	}
	#contingut article{
		width: 63%;
		float: left;
		clear: inherit;
		padding: 7px;
		margin-top: 0px;
		position: relative;
	}
	#data_detall .compacte p{
		font-size: 20px;
	}
	#info_esdev p{
		font-size: 1.2em;
	}
	#info_esdev button{
		margin-bottom: 10px;
		margin-top: 6px;
	}
	#data_detall .compacte p{
		width: inherit;
	}
	#contingut{
		margin-bottom: 10px; 
	}
	.imatges_grans aside h2{
		font-size: 1em;
	}
	.imatges_grans aside p{
		font-size: 1em;
	}
	/*----------- SLIDES PROXIMAMENT ----------*/
	#propers_esdeveniments{
		float: left;
		width: 96%;
		padding: 2% 2% 2% 2%;
		position: relative;
	}

}
/*Tablet  ---------------------------------------------------------------------------------------------------------------------<1024px*/


/*Desktop  --------------------------------------------------------------------------------------------------------------------->1024px*/
@media (min-width: 1024px){
	#ruta{
		width: 1025px;
		margin: 5px auto 5px auto;
		font-size: 13px;
	}
	/*----------IMATGES-----------*/
	.imatges_grans {
		width: 1025px;
		margin: auto;
		float: none;
		/*height: 679px;*/
		overflow: hidden;
	}

	.imatges_grans aside{
		width: 1025px;
		height: 150px;
		/*margin-top: 530px;*/
		bottom: 0;
	}
	.imatges_grans aside h2{
		font-size: 2.5em;
		margin-left: 20px;
		margin-top: 37px;
	}
	.imatges_grans aside p{
		font-size: 1.4em;
		margin-left: 20px;
		margin-top: 10px;
	}

	/*--------- DETALLS --------------*/
	#detalls_contenidor{
		width: 1025px;
		margin:auto;
	}
	#info_esdev .categoria{
		font-size: 1.2em;
	}
	#info_esdev p{
		font-size:1.5em;
		margin-top: -14%;
	}
	#info_esdev button{
		font-size: 21px;
		height: 50px;
	}
	#info_esdev {
		/*height: 187px;*/
		height: 215px;
		padding: 5px 0px 5px 10px;
	}
	/*#altres_dades p{
		font-size: 20px;
	}
	#altres_dades h4{
		font-size: 20px;
	}*/

	#contingut article h1{
		font-size: 48px;
	}
	#contingut article h4{
		font-size: 36px;
	}
	#contingut article p{
		font-size: 20px;
	}
	article iframe{
		width: calc;
	}
	#hora{
		margin-left: 13%;
		margin-top: -15%;
	}
	#hora_text p{
		font-size: 1.2em;
		color: white;
	}
	#hora_text{
		margin-top: -18%;
	}
}

/*Desktop  --------------------------------------------------------------------------------------------------------------------->1024px*/