@import url("general.css");

#seccion[premios]{
	padding:130px 0;
	background-color:#2d2d2d;
}

#seccion[premios] h1{
	font-family:Roboto, Arial, Helvetica, sans-serif;
	font-size:57px;
	font-weight:600;
	text-align:left;
	color:#f4eadd;
}

#seccion[premios] hr{
	display:block;
	width:100%;
	border:none;
	height:1px;
	background-color:#f4eadd;
	margin:20px 0;	
}


/***** PREMIO AMPLIADO  */
#seccion[premios] .tabla[premio_ampliado]{
	position:relative;
	margin:20px 0;
	width:100%;
	height:auto;
}

#seccion[premios] .tabla[premio_ampliado] .td{
	position:relative;
	width:50%;
	vertical-align:top;
	text-align:left;
}

#seccion[premios] .tabla[premio_ampliado] .td[izq]{
	padding-right:30px;
}

#seccion[premios] .tabla[premio_ampliado] .td[der]{
	padding-left:30px;
}

#seccion[premios] .tabla[premio_ampliado] #texto{
	color:#f4eadd;
	font-family:Noto serif, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:22px;
}

#seccion[premios] .tabla[premio_ampliado] h3{
	color:#f4eadd;
	font-size:28px;	
	font-family:Noto serif, "Times New Roman", Times, serif;
	font-style:italic;
}

#seccion[premios] .tabla[premio_ampliado] #texto p{
	position:relative;
	text-align:left;
	color:#f4eadd;
}

#seccion[premios] .tabla[premio_ampliado] img{
	position:relative;
	width:100%;
	height:auto;
}


/******* MOSAICO *********/
#seccion[premios] #mosaico{
	position:relative;
	display:block;
	width:auto;
	margin:40px 0;
}

#seccion[premios] #mosaico #premio{
	position:relative;
	display:table;
	float:left;
	width:23%;
	height:auto;
	padding:0;
	margin-right:2.66%;
	margin-top:35px;
}

#seccion[premios] #mosaico #premio:nth-child(4n){
	margin-right:0;
}

#seccion[premios] #mosaico #premio:nth-child(4n+5){
	clear:both;
}


#seccion[premios] #mosaico #premio .bg_completo,
#seccion[premios] #mosaico #premio iframe
{
	position:relative;
	width:100%;
	height:160px;
}

#seccion[premios] #mosaico #premio #titulo{
	position:relative;
	margin-top:5px;
	font-size:17px;
	color:#f4eadd;
	text-align:left;
	font-weight:600;
}

#seccion[premios] #mosaico #premio #texto{
	position:relative;
	font-size:16px;
	font-weight:300;
	color:#f4eadd;
	text-align:left;
}


@media screen and (max-width: 1200px) {
	
	/******* MOSAICO *********/
	#seccion[premios] #mosaico{
		margin:0;
	}
	
	#seccion[premios] #mosaico #premio{
		width:31%;
		margin-right:3.3%;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(4n){
		margin-right: 3.3%;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(4n+5){
		clear: inherit;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(3n){
		margin-right:0;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(3n+4){
		clear:both;
	}
}

@media screen and (max-width: 800px) {
	#seccion[premios] h1{
		font-size:37px;
		margin:0 20px;
	}
	
	#seccion[premios] hr{
		display:block;
		width:auto;
		margin:20px;
	}
	
	/***** PREMIO AMPLIADO  */
	#seccion[premios] .tabla[premio_ampliado]{
		width:92%;
		margin:20px auto;
	}
	
	#seccion[premios] .tabla[premio_ampliado] h3{
		font-size:23px;
		line-height:22px;
		margin-bottom:20px;
	}
	
	#seccion[premios] .tabla[premio_ampliado] #texto{
		font-size:17px;
		line-height:16px;
	}
	
	
	/******* MOSAICO *********/
	#seccion[premios] #mosaico{
		margin:0 20px;;
	}
	
	#seccion[premios] #mosaico #premio{
		width:48%;
		margin-right:2.3%;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(3n){
		margin-right: 2.3%;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(3n+4){
		clear: inherit;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(2n){
		margin-right:0;
	}
	
	#seccion[premios] #mosaico #premio:nth-child(2n+3){
		clear:both;
	}
}

@media screen and (max-width: 550px) {
	#seccion[premios]{
		padding:40px 0;
	}
	
	#seccion[premios] h1{
		font-size:37px;
	}
	
	/***** premio AMPLIADO  */
	
	
	#seccion[premios] .tabla[premio_ampliado],
	#seccion[premios] .tabla[premio_ampliado] .td
	{
		display:block;
		width:auto;
		padding:0 !important;
		margin:0;
		float:none;
		clear:both !important;
	}
	
	#seccion[premios] .tabla[premio_ampliado] .td{
		margin:0 20px !important; 
		margin-bottom:30px !important;
	}
	
	
	/******* MOSAICO *********/
	#seccion[premios] #mosaico #premio{
		position:relative;
		display:block;
		width:auto;
		padding:0;
		margin:30px 20px!important;
		float:none;
		clear:both !important;
		padding:10px;
		background-color:rgba(255,255,255,0.1);
	}
}