/*azul : #014DAD - celeste #5CE1E6 */
/* COLUMNAS de grid  QUE OCUPA UNA NOTA*/
.horaorig { color: #000; font-weight: 700; font-family: Arial; }


/* GRID 12 (col-12) para una fotonota degree*/
.top-col-12 { display: block;  }
.top-col-12 H2 a{ color:#FFF; font-size: 36px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 500; text-decoration: none;} 
.top-col-12 .marcofoto{ max-height:640px; max-width:100%; overflow: hidden; position: relative;} .top-col-12 img{  width: 100%}
.top-col-12 .seccion{ font-size: 14px; font-weight: 700;line-height: 24px; text-transform: uppercase; display:block; top:10px; background-color:transparent; position:absolute; left:25px; padding:1px 5px; color:#FFF; font-family: var(--sy-font-titulos);  } 
.top-col-12 .portatitu{ display: inline-block; margin-left:0px; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 50%); position:absolute; bottom:0px; left:0px; width:100%; padding:10px;  } 
.top-col-12 .portatitu .volanta{ font-size: 16px; font-weight: 500;line-height: 24px;  display:block; color:#FFF; font-family: var(--sy-font-titulos),arial;  } 
.top-col-12 .portatitu .copete{ font-size: 18px; font-weight: 500;line-height: 24px; display:block; color:#FFF; font-family: var(--sy-font-titulos),arial;  } 


@media screen and (max-width: 768px) {
.top-col-12 { clear: both; max-width: 98%; margin: auto auto 20px;  }
.top-col-12 H2 a{ color:#FFF; font-size: 18px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 500} 
.top-col-12 .portatitu{   bottom:0px; left:0px; width:99%; padding:10px;  }
.top-col-12 .portatitu .volanta{ font-size: 12px; font-weight: 500;line-height: 24px; text-transform: uppercase; 
	display:block; 
color:#FFF; font-family: var(--sy-font-titulos);  } 
.top-col-12 img{  width: 110%}
}


/* GRID 8 (col-8) para una fotonota degree*/
.top-col-8 { display: block;  }
.top-col-8 H4 a{ color:#FFF; font-size: 34px; letter-spacing:0px; font-family:var(--sy-primario); font-weight: 500; text-decoration: none;} 
.top-col-8 .marcofoto{ max-height:440px; max-width:100%; overflow: hidden; position: relative;} 
.top-col-8 img{  width: 100%}
.top-col-8 .seccion{ font-size: 14px; font-weight: 700;line-height: 24px; text-transform: uppercase; display:block; top:10px; background-color:transparent; position:absolute; left:25px; padding:1px 5px; color:#FFF; font-family: var(--sy-font-titulos);  } 

.top-col-8 .portatitu{ display: inline-block; margin-left:0px; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 50%); position:absolute; bottom:0px; left:0px; width:100%; padding:10px;  } 
.top-col-8 .portatitu .tapa-volanta{ font-size: 16px; font-weight: 500;line-height: 24px; text-transform: uppercase; display:block; color:#FFF; font-family: var(--sy-font-titulos);  } 

@media screen and (max-width: 768px) {
.top-col-8 { clear: both; max-width: 98%; margin: auto auto 20px;  }
.top-col-8 H4 a{ color:#FFF; font-size: 18px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 500} 
.top-col-8 .portatitu{   bottom:0px; left:0px; width:99%; padding:10px;  }
.top-col-8 .portatitu .tapa-volanta{ font-size: 12px; font-weight: 500;line-height: 24px; text-transform: uppercase; display:block; color:#FFF; font-family: var(--sy-font-titulos);  } 
 .top-col-8 img{  width: 110%}
}



/* GRID 6 (2 col) para una fotonota degree*/

.top-col-6 { display: block;  }
.top-col-6 a{ color:#FFF; font-size: 28px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 400; text-decoration: none;} 
.top-col-6 .marcofoto{ max-height:360px; max-width:100%; overflow: hidden; position: relative;} 
.top-col-6 img{  width: 100%}
.top-col-6 .seccion{ font-size: 14px; font-weight: 700;line-height: 24px; text-transform: uppercase; display:block; top:10px; background-color:transparent; position:absolute; left:25px; padding:1px 5px; color:#FFF; font-family: var(--sy-secundario);  } 

.top-col-6 .portatitu{ display: inline-block; margin-left:0px; background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.9) 50%); position:absolute; bottom:0px; left:0px; width:100%; padding:10px;  } 
.top-col-6 .portatitu .volanta{ font-size: 14px; font-weight: 500;line-height: 24px; text-transform: uppercase; display:block; color:#FFF; font-family: var(--sy-font-subtitulos);  } 

@media screen and (max-width: 768px) {
.top-col-6 { clear: both; max-width: 98%; margin: auto auto 20px;  }
.top-col-6 H2 a{ color:#FFF; font-size: 18px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 500} 
.top-col-6 .portatitu{   bottom:0px; left:0px; width:99%; padding:10px;  }
.top-col-6 .portatitu .volanta{ font-size: 12px; font-weight: 500;line-height: 24px; text-transform: uppercase; display:block; color:#FFF; font-family:var(--sy-font-titulos);  } 
.top-col-6 img{  width: 110%}
}


/* GRID 6 (2 col) para una fotonota SIN DEGREE*/
.top-col-6s { display: block;  }
.top-col-6s h2 a{ color:#000; font-size: 28px; letter-spacing:-1px; font-family:var(--sy-font-titulos); font-weight: 600; line-height: 120%; text-decoration: none;} 
.top-col-6s h3 a{ color:#000; font-size: 24px; letter-spacing:-1px; font-family:var(--sy-font-titulos); font-weight: 600; line-height: 90%; text-decoration: none;} 
.top-col-6s .marcofoto{ max-height:340px; overflow: hidden;} .top-col-6s img{  width: 110%}
.top-col-6s .bajada{ font-family: var(--sy-font-subtitulos);}
.top-col-6s .seccion{ font-size: 14px; font-weight: 700;line-height: 24px;  display:block;  left:25px; padding:1px 5px; color:var(--sy-secundario); font-family: var(--sy-font-subtitulos);  } 
.top-col-6s .tapa-volanta{ font-size: 14px; font-weight: 700;line-height: 24px; text-transform: uppercase; display:block; color:#014DAD; font-family: var(--sy-font-titulos);  } 

@media screen and (max-width: 768px) {
.top-col-6s { clear: both; max-width: 95%; margin: 0px auto 10px;} 
.top-col-6s .marcofoto{ max-height:200px;}
.top-col-6s  a{ color:#000; font-size: 20px; line-height: 5px; letter-spacing:-1px; font-family:var(--sy-font-titulos); font-weight: 500} 
}

/* background-color: azul #004CA4  naranja #FF6633 */

/* GRID 4 (3)COLUMNAS*/
.top-col-4 { clear:both;}
.top-col-4 .volanta { font-size:16px; font-family: var(--sy-font-textos); color:var(--sy-secundario);}
.top-col-4 .bajada{ font-size:14px; font-family:var(--sy-font-titulos); }
.top-col-4 .marcofoto {overflow:hidden; float:left; width:100%; height: auto; max-height:240px; margin-bottom:15px;}
.top-col-4 img{ width:110%}
.top-col-4 H3 a{ LINE-HEIGHT: 120%; DISPLAY: block; COLOR:#000; FONT-SIZE: 24px; FONT-WEIGHT: 600;  text-decoration:none; font-family: var(--sy-font-titulos); letter-spacing:-1px; height:auto; }
.top-col-4 H3 a:hover{ color: #666; }
.top-col-4 H4 a{ LINE-HEIGHT: 120%; DISPLAY: block; COLOR:#000; FONT-SIZE: 20px; FONT-WEIGHT: 600;  text-decoration:none; font-family: var(--sy-font-titulos); letter-spacing:-1px; height:auto; }
.top-col-4 H4 a:hover{ color: #666; }

@media screen and (max-width: 768px) {
.top-col-4 { clear: both; max-width: 95%; margin: auto;  }
.top-col-4 .marcofoto {overflow:hidden; float:left; width:100%; height: auto; max-height:200px; margin-bottom:15px;}
.top-col-4 img{ width:110%}
.top-col-4 H3 a{ color:#000; font-size: 20px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 500} 
}


/* GRID 3 (4)COLUMNAS*/
.top-col-3 { clear:both;}
.top-col-3 .volanta { font-size:14px; font-family: var(--sy-font-subtitulos); color:var(--sy-secundario); font-weight: 700;}
.top-col-3 .bajada{ font-size:14px; font-family:var(--sy-font-subtitulos);}
.top-col-3 .marcofoto {overflow:hidden; float:left; width:100%; height: auto; max-height:170px; margin-bottom:15px;}
.top-col-3 img{ width:110%}
.top-col-3 H3 a{ LINE-HEIGHT: 120%; DISPLAY: block; color:var(--sy-primario); FONT-SIZE: 18px; FONT-WEIGHT: 600;  text-decoration:none; 
	font-family: var(--sy-font-titulos),Arial; letter-spacing:-1px; height:auto; }
.top-col-3 H4 a{ LINE-HEIGHT: 120%; DISPLAY: block; COLOR:#000; FONT-SIZE: 16px; FONT-WEIGHT: 600;  text-decoration:none; 
	font-family: var(--sy-font-titulos),Arial; letter-spacing:0px; height:auto; }

.top-col-3 H3 a:hover, .top-col-3 H4 a:hover{ color: #666; }

@media screen and (max-width: 768px) {
.top-col-3 { clear: both; max-width: 95%; margin: auto;  }
.top-col-3 H3 a{ color:#000; font-size: 20px; letter-spacing:0px; font-family:var(--sy-font-titulos); font-weight: 500} 
.top-col-3 .marcofoto {overflow:hidden; float:left; width:100%; height: auto; max-height:200px; margin-bottom:15px;}
}