/*  ViCo20230416 1a info 1er pre online */
/* include the padding and border in total width and height *//* igt2022_1a_publicacion 20220923 aca no funciona bien */
/* * {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
		-ms-box-sizing: border-box;
		 -o-box-sizing: border-box;
			box-sizing: border-box;
}  */ 
body {
	margin: 0;padding: 0;
	background-image: url("background.jpg");/* ViCo */
	background-color: white;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: #4b4b4b;
	font-size: 25px;
	font-family: Arial, Helvetica, sans-serif;
}
p {
	line-height: 1.2em;
}
h1, h2 {
	color: #404040;
	font-weight: bold;
}
h1 {
	font-size: 33px;
	text-align: center;
}
h2 {
	font-size: 23px;
}
/* ViCo */
.color_vino { color: #5b2121;} 	/* modal-0, modal-3 */
.clickable { cursor: pointer; } 	/* titulares, kalender y la hamburguesa*/
/*****************************************************************
**************************------HEADER------**********************
-----25-125-165-200---********************************************/

header, .back_header, .articulo, .footer {
	margin-left: 5%;
	margin-right: 5%;
}
.articulo_intro {
	margin-left: 5%;
	margin-right: 5%;
}
header, .back_header {
	width: 90%;
	/*height:200px;*//*1----------------height:140px;*/
	top: 0;
	left: 0;
}
header { /*div contenedor de .logo, .social_net, .menu*/
	position: fixed;
	height:165px;
    transition: top 0.2s ease-in-out;
    background-color: white;
    /*background-color: red;*/
}
.logo, .social_net, .sn_image {
	height:100px;/*b-----------------------------height:80px;*/
}
.logo, .social_net {
	position: relative;
	width:50%;
	top: 25px;/*------------25 de heigth degradado top*/
	margin: auto;
}
.logo {
	float: left;
	/* background-color: beige; */
}
.social_net { /*div contenedor de redes sociales*/
	float: right;
	/*background-color: purple;*/
}
.sn_image { /*imagenes de redes sociales*/
	width: 61px;
	float: right;
	/*background-color: brown;*/
}
.menu_div {
	position: relative;
	height:40px;
	top: 25px;
	width: 100%;/*100px*/
	clear: right;
	/*background-color: gray;*/
}
.degradado_blanco {
	position: relative;
	height:35px;/*d----------------------ok*/
	top: 25px;
	width: 100%;
	background-image: url("header/niebla.png");
	background-repeat: repeat-x;
	/*background-color: olive;*/
}

/******No están en el HEADER pero tienen influencia*******/
.back_header {/*Espacio 'detrás' del header*/
	position: relative;
	height:200px;/*Se le suman 25 mas que header para que no se transparente el contenido en degradado top antes de ocultarse el header*/
	clear: left;
	/*background-color: green;*/
}
.degradado_top { /*div fijado en el top*/
	position: fixed;
	width: 100%;
	height:25px;/*a-----------------height:20px;*/
	top: 0;
	left: 0;
	background-image: url("header/penumbra.png");
	background-repeat: repeat-x;
	/*background-color: yellow;*/
}
/*****************************************************************
************************------CONTENIDO------*********************
*****************************************************************/
.separador{
	clear: left;
	text-align: center;
}
.separador img {
	width: 24px;
	height: 24px;
}
.articulo {
	clear: left;
	width: 86%;
	/* padding: 5px 2% 5px 2%; */
	padding: 2em 2% 2em 2%;
	background-image: url("background_articulo.jpg");/* ViCo */
	background-color: white;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: auto;
	/* text-shadow: -6px 6px 23px rgba(0,0,0,0.3); *//* ViCo */
}
.articulo_intro {
	clear: left;
	width: 86%;
	/* padding: 5px 2% 5px 2%; */
	padding: 0 2% 2em 2%;
	background-image: url("background_articulo.jpg");/* ViCo */
	background-color: white;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: auto;
	/* text-shadow: -6px 6px 23px rgba(0,0,0,0.3); *//* ViCo */
}
.centrar {
	text-align: center;
}
.break_words {
	word-wrap: break-word;
	overflow-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
}
.anchor{
	text-decoration: none;/* ViCo */
	position: absolute;
	/*transform: translateY(-25vh);*/
	transform: translateY(-170px);/* ViCo */
}
/***********titulares***********************/
.titulares {
	color: #4b4b4b;
	text-decoration: none;
	overflow: auto;
	display: inline-block;
	width: 400px; /* 342px */
	height: 230px; /* 83px */
    margin-top: 20px;
	margin-right: 50px;
	margin-bottom: 0px; /* 30px */
	padding: 15px;
	box-shadow: -8px 6px 10px #888, 0px -2px 1px #eee;
	background-image: url("hauskonzert/background.jpg");
	background-repeat: no-repeat;
 	background-size: 100% 100%;
 	text-shadow: -6px 6px 23px rgba(255,255,255,0.9);/* ViCo */
}
.titulares:hover { color: #777777; }/* ViCo */
.titulares>.t_img_container {
	width: 230px;
	height: 230px;
	float: left;
	/*background-color: red;*/
}
.titulares>.t_img_container>.t_imagen {
	width: 230px;
	height: 230px;
	box-shadow: -8px 6px 10px #888888;
}
.titulares>.t_txt_container {
	overflow: auto;
	padding-left: 10px;
	text-align: left;
	width: 160px; /* 250px */
	height: 230px;
	font-size: .7em;
	float: left;
	/*background-color: green;*/
	text-decoration: none;/* ViCo */
}
.titulares>.t_txt_container>.t_titulo {font-weight: bolder; color: #4b4b4b;}/* ViCo */
.titulares>.t_txt_container>.t_descripcion {color: #000; font-size: 1.3em;}
.titulares>.t_txt_container>.t_grammy {color: #4b4b4b; font-size: 0.9em; letter-spacing: 0.09em;}/* Grammy winner 2025*/
.titulares>.t_txt_container>.t_fecha {color: #5b2121;}
.titulares>.t_txt_container>.t_hora {color: #5b2121;}
.titulares>.t_txt_container>.t_lugar {color: #4b4b4b;}
/***************TABLA CUOTAS*******************/
.cuotas{/* ViCo */
	background-image: url("ave_cuotas.png");
	background-color: white;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.cuotas_tr {
	overflow: auto;
	clear: left;
	border: 1px solid black;
}
.cuotas_td_A {
	/*border: 1px solid black;*/
	float: left;
	width: 59%;
}
.cuotas_td_B {
	/*border: 1px solid black;*/
	color: #5b2121;
	float: left;
	width: 39%;
}
/***********links (se usa titulares)***********************/
.links_a{/* ViCo */
	text-decoration: none;
}
/********************************/
img.estandar {padding-right: 15px;}
/* img.ave_kontakt{} */
.kontakt_mailto{color: #008aff;}/* ViCo */
/*************footer***************/
.footer {
	width: 70%;
	padding: 25px 10% 200px 10%;
	color: white;
	font-size: 18px;
	background-color: black;
}
.letra_chica {
    font-size:small;
}
/* solo para pruebas */
/* 
de 305 a menos
aparece barra de desplazamiento lateral
NO SE PORQUÉ !!!
*/
/* .nav-down { 
	background-color: black;

	margin-left: 0;
	margin-right: 0;
	width: 100%;

} */
.nav-up {/*usado por script "Hide Header on scroll down" (jquery-3.3.1.min.js)*/
    top: -200px;

/* 	margin-left: 0;
	margin-right: 0;
	width: 100%; */
}

/* 20230410 ! */
.links_descarga-contenedor { margin-top: 1.5em; }
.links_descarga {
	/* text-transform: uppercase; */
	display: block;
	margin-bottom: 0.0003em;
	cursor: pointer;
	text-decoration: none;
	color: #c11817;
	font-weight: bold;
	font-size: 0.9em;
	letter-spacing: 0.125em;
}
.links_descarga:hover {
	color: #d81e1e;
}
/* .achicoria{
	letter-spacing: -0.01em;
} */
.vinonino { width: 100%; clear: left;}
.c_left { clear: left;}

.nufufu{
	margin:0 auto;
	width: 260px; /* 18.043vw */
}

/*-----------------------------------------------------------------*/ 
/*-----------------------------------------------------------------*/  
/*-----------------------MEDIA QUERY-------------------------------*/   
/*-----------------------------------------------------------------*/    
/*-----------------------------------------------------------------*/


@media screen and (min-width: 1441px) { /* min MIN MIN MIN MIN min */ /* 20230416 VW = (PX / (Viewport Width in PX)) * 100 */
	body {	font-size: 1.7349vw} /* 25px; */
	p {	line-height: 1.2em;}
	h1 {font-size: 2.29vw} /* 33px; */
	h2 {font-size: 1.596vw} /* 23px; */

	/*****************************************************************
	**************************------HEADER------**********************
	-----25-125-165-200---********************************************/

	header, .back_header, .articulo, .footer {
		margin-left: 5%;
		margin-right: 5%;
	}
	.articulo_intro {
		margin-left: 5%;
		margin-right: 5%;
	}
	header { /*div contenedor de .logo, .social_net, .menu*/
		height: 11.45vw;/* 165px */
	}
	.logo, .social_net, .sn_image {
		height:6.939vw;  /* b-----------------------------height:80px; */ /* 100px */
	}
	.logo, .social_net {
		width:50%;
		top: 1.7349vw;/*------------25 de heigth degradado top*/ /* 25px; */
	}
	.logo img{width: 17.14vw} /* 247px new! */
	.sn_image { /*imagenes de redes sociales*/
		/* background-color: #008aff; */
		width: 4.233vw; /* 61px */
	}
	.sn_image img{ width: 100%; } /* new! */
	.hamburger{ width: 4.37vw; } /* new! */
	.menu_div {
		height:2.775vw; /* 40px */
		top: 1.7349vw; /* 25px; */
	}
	.degradado_blanco {
		height: 2.428vw; /*d----------------------ok*//* 35px */
		top: 1.7349vw; /* 25px; */
	}
	/******No están en el HEADER pero tienen influencia*******/
	.back_header {/*Espacio 'detrás' del header*/
		height: 13.879vw;/*Se le suman 25 mas que header para que no se transparente el contenido en degradado top antes de ocultarse el header*/ /* 200px */
	}
	.degradado_top { /*div fijado en el top*/
		height: 1.7349vw;/*a-----------------height:20px;*/ /* 25px; */
		background-size: 10% 100%;
	}
	/*****************************************************************
	************************------CONTENIDO------*********************
	*****************************************************************/
	.separador img {
		width: 1.665vw; /* 24px */
		height: 1.665vw; /* 24px */
	}
	.articulo {
		width: 86%;
		padding: 2em 2% 2em 2%;
	}
	.articulo_intro {
		width: 86%;
		padding: 0 2% 2em 2%;
	}
	.anchor{
		position: absolute;
		transform: translateY(-11.7973);/* 170px */
	}
	/***********titulares***********************/
	/* .titulares {
		width: 23.8029vw;
		height: 5.7598vw;
		margin-right: 3.4698vw;
		margin-bottom: 2.0818vw;
		padding: 1.0409vw;
		box-shadow: -0.5551vw 0.4163vw 0.6939vw #888, 0vw -0.1387vw 0.0693vw #eee;
		text-shadow: -0.4163vw 0.4163vw 1.5961vw rgba(255,255,255,0.9);
	}
	.titulares>.t_img_container {
		width: 5.7598vw;
		height: 5.7598vw;
	}
	.titulares>.t_img_container>.t_imagen {
		width: 5.7598vw;
		height: 5.7598vw;
		box-shadow: -0.5551vw 0.4163vw 0.6939vw #888888;
	}
	.titulares>.t_txt_container {
		padding-left: 0.6939vw;
		width: 17.349vw;
		height: 5.7598vw;
		font-size: .7em;
	} */

    .titulares {
		width: 27.7580vw; /* 343px 400px*/ /* 23.8029vw */
		height: 15.9608vw; /* 83px 230px*/ /* 5.7598vw */
		margin-right: 3.4698vw; /* 50px */
		margin-bottom: 0; /* 30px */ /* 2.0818vw */
		padding: 1.0409vw; /* 15px */
		box-shadow: -0.5551vw 0.4163vw 0.6939vw #888, 0vw -0.1387vw 0.0693vw #eee;
		text-shadow: -0.4163vw 0.4163vw 1.5961vw rgba(255,255,255,0.9);
	}
	.titulares>.t_img_container {
		width: 15.9608vw; /* 83px */
		height: 15.9608vw; /* 83px */
	}
	.titulares>.t_img_container>.t_imagen {
		width: 15.9608vw; /* 83px */
		height: 15.9608vw; /* 83px */
		box-shadow: -0.5551vw 0.4163vw 0.6939vw #888888;
	}
	.titulares>.t_txt_container {
		padding-left: 0.6939vw; /* 10px */
		width: 11.1032vw; /* 250px 160px*/ /* 17.349vw */
		height: 15.9608vw; /* 83px 230px*/
		font-size: .7em; /* .7em */
	}

	/***************TABLA CUOTAS*******************/
	.cuotas_tr { border: 1px solid black; } /* 0.0693vw */
	.cuotas_td_A { width: 59%; }
	.cuotas_td_B { width: 39%; }
	/********************************/
	img.estandar {padding-right: 1.04vw;} /* 15px */
	/*************footer***************/
	.footer {
		width: 70%;
		padding: 1.7349vw 10% 13.879vw 10%; /* 25px 10% 200px 10% */
		font-size: 1.249vw; /* 18px */
	}
	.nufufu{
		margin:0 auto;
		width: 18.043vw; /* 260px */
	}
	.letra_chica {
		/* font-size:small; */
		font-size: 1.2vw; /* 1.7349vw */
	}
	.nav-up {/*usado por script "Hide Header on scroll down" (jquery-3.3.1.min.js)*/
		top: -13.879vw; /* -200px */
	}

	/* 20230410 ! */
	.links_descarga-contenedor { margin-top: 1.5em; }
	.links_descarga {
		margin-bottom: 0.0003em;
		font-size: 0.9em;
		letter-spacing: 0.125em;
	}

	/* IMÁGENES */
	.tamima1{
		width: 23.108vw; /* 333px */ 
		height: auto;
	}
	.tamima2{
		width: 14.226vw; /* 205px */ 
		height: auto;
	}
	img.ave_kontakt{width: 31.9916vw;}
	.avefoo{
		width: 7.5641vw;
	}


}

/*-----------------------------------------------------------------*/
/*                               !                                 */
/*-----------------------------------------------------------------*/

@media only screen and (max-width: 770px){/* ViCo */
	img.estandar {width: 50%;}
}
/*-----------------------------------------------------------------*/

@media only screen and (max-width: 700px){/* 2025 */
	/***********titulares QUERY560px***********************/
	.titulares {
		width: 90%;
		height: auto;
		margin-right: 0;
		padding: 10px 5%;
	}
	.titulares>.t_img_container {
		width: 60%; /* 30 */
		height: 200px; /* 100px */
	}
	.titulares>.t_img_container>.t_imagen {
		/*width: 100px;
		height: 100px;*/
		width: auto;
		height: 100%;
	}
	.titulares>.t_txt_container {
		padding-left: 10px;
		width: 35%; /* 65 */
		height: 200px; /* 100px */
		text-align: left;
		font-size: .7em;
		float: left;
	}
}
/*-----------------------------------------------------------------*/
@media only screen and (max-width: 560px){
	body {
		margin: 0;padding: 0;
		background-image: url("background_white.jpg");/* ViCo */
		background-color: white;
	}
	header, .back_header, .articulo, .footer {
		margin-left: 0;
		margin-right: 0;
	}
    .articulo_intro {
        margin-left: 0;
		margin-right: 0;
	}
	header, .back_header {
		width: 100%;
	}
	.logo, .social_net {
		width:50%;
	}
	.logo img {
		width: 100%;
	}
	.sn_image { /*imagenes de redes sociales*/
		width: 25%;
	}
	.sn_image img { /*imagenes de redes sociales*/
		width: 100%;
	}
	/*****************************************************************
	************************------CONTENIDO QUERY560px------*********************
	*****************************************************************/
	.articulo {
		width: 94%;
		/* padding: 25px 3% 75px 3%; */
		padding: 2em 3% 2em 3%;
	}
    .articulo_intro {
        width: 94%;
		/* padding: 25px 3% 75px 3%; */
		padding: 0 3% 2em 3%;
	}

	/***************TABLA CUOTAS QUERY560px*******************/
	/* .cuotas{
		background-size: 100% 100%;
	} */
	.cuotas_td_A {
		width: 89%;
	}
	.cuotas_td_B {
		width: 89%;
	}
	.links {
		/*width: 343px;*/width: 96%;
	}
	.links>.l_txt_container {
		clear: left;
	}
	/***************************/
	img.estandar {width: 100%;padding-right: 0;}
	img.ave_kontakt{width: 100%;}
	/***************footer QUERY560px*********************/
	.footer {
		width: 80%;
	}
}
/*-----------------------------------------------------------------*/

@media only screen and (max-width: 575px){/* ViCo *//* de 400px a 370px (y a 575 en 2025!)*/
	/* .titulares {
		margin: 0 auto;text-align: center;
	} */
	.titulares>.t_img_container {
		/*display: block;*/
		width: 100%;
		margin: 0 auto;
	}
	.titulares>.t_txt_container {
		padding-top: 10px;
		padding-left: 0px;
		text-align: center;
		font-size: .7em;
		clear: left;
		width: 100%;
		margin: 0 auto;
	}

}
/*-----------------------------------------------------------------*/
/* 20230410 */
@media only screen and (max-width: 321px){
	.achicoria{
		font-size: .88em;
		letter-spacing: -0.01em;
	}
}
@media only screen and (max-width: 319px){
	.partin{
		display: block;
		width: 100%;
	}
}
 /* PROBLEMA */
/* @media only screen and (max-width: 305px){
	body { font-size: 12px; }
	p { line-height: 1.4em; }
	.achicoria{
		font-size: .68em;
		letter-spacing: -0.01em;
	}
} */

@media only screen and (max-width: 305px){
    /* .titulares {
		margin: 0 auto;text-align: center;
	} */
    .titulares {
		width: 80%;
		height: auto;
		/* margin-right: 0; */
        /* margin: 0 auto; */
        margin: 0;
        text-align: center;
		padding: 5% 5%; /* 10px 5% */
	}
    .titulares>.t_img_container {
		/*display: block;*/
		width: 100%;
		/* margin: 0 auto; */
        margin: 0;
	}
	.titulares>.t_txt_container {
		padding-top: 0em; /* 10px */
		padding-left: 0px;
		text-align: center;
		font-size: .7em;
		clear: left;
		width: 100%;
		/* margin: 0 auto; */
        margin: 0;
	}
    .titulares>.t_img_container>.t_imagen {
        /* width: auto;
        height: 80%; */
        width: 80%;
        height: auto;
    }
}


@media only screen and (max-width: 295px){ /* toto */
	body { font-size: 22px; }
	p { line-height: 1.4em; }
}
@media only screen and (max-width: 279px){
	.achicoria{
		/* font-size: .88em; */
		letter-spacing: -0.03em;
	}
}
@media only screen and (max-width: 268px){ /* toto */
	body { font-size: 20px; }
	p { line-height: 1.6em; }
	.achicoria{
		font-size: .8em;
		letter-spacing: -0.03em;
	}	
}

@media only screen and (max-width: 260px){ /* 2025! */
    .titulares>.t_img_container {
		width: 100%;
        height: auto;
        margin: 0;
	}
	.titulares>.t_txt_container {
		padding-top: 0em;
		padding-left: 0px;
		text-align: center;
		font-size: .7em;
		clear: left;
		width: 100%;
        height: auto;
        margin: 0;
	}
}

@media only screen and (max-width: 246px){
	.achicoria{
		font-size: .7em;
		letter-spacing: -0.03em;
	}
}
@media only screen and (max-width: 239px){ /* toto */
	body { font-size: 16px; }
}
@media only screen and (max-width: 217px){ /* funciona hasta 203 */
	.achicoria{
		font-size: .66em;
		letter-spacing: -0.04em;
	}
}
@media only screen and (max-width: 195px){ /* toto */
	body { font-size: 11px; }
}
