/* Termék lista felépítés FLEX */

div.termek_lista_flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

div.termek_lista_flex.sor_elrendezes {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

div.termek_lista_elem {
	/* A termek_lista_elem-en belül minden egy-egy flex elem... */
	display: flex;

	/* ...amelyeket egymás alá rendezünk el ikon lista esetén */
	flex-direction: column;

	/* Azért kell, hogy a név és ár tartó teljes magasságában egyforma legyen a háttérszín,
	akkor is, ha a név ár tartó nem egyforma magas minden termék esetén */
	background-color: var(--bg_color_1);

	/* A címkék elhelyezéséhez kell */
	position: relative;

	/* Minden szép lassan változzon */
	transition: 200ms ease all;
}

div.termek_lista_flex.sor_elrendezes div.termek_lista_elem {
	border-bottom: 1px solid var(--border_color_1);
}

@media only screen and ( max-width: 3000px ) {

	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 20%;
	}

}

@media only screen and ( max-width: 1560px ) {
	
	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 25%;
	}

}

@media ( max-width: 1300px ) {
	
	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 33.333333%;
	}

}

@media only screen and ( max-width: 940px ) {
	
	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 50%;
	}

}

@media only screen and ( max-width: 899px ) {
	
	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 25%;
	}

}

@media only screen and ( max-width: 800px ) {
	
	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 33.333333%;
	}

}

@media only screen and ( max-width: 540px ) {
	
	div.termek_lista_flex:not(.sor_elrendezes) div.termek_lista_elem {
		flex: 0 1 50%;
	}
	
}

@media only screen and (min-width: 430px) {

	div.termek_lista_flex.sor_elrendezes div.termek_lista_elem {
		/* Ha nagyon keskeny a képernyő, akkor a sor lista
		kép és indormáció elemei egymás alá kerülnek */
		flex-direction: row;
	}

}

div.termek_lista_elem:hover {
	background-color: #ffffff;
}

/* Termék lista egy elemének felépítése */

div.termek_lista_kep_tarto {
	/* A megnagyított kép nem fog kilógni a kép tartóból */
	overflow: hidden;
}

div.termek_lista_flex.sor_elrendezes div.termek_lista_kep_tarto {
	/* 270 képpont nagyságú a kép tartó, nem lehet shrinkelni */
	flex: 0 0 270px;
}

div.termek_lista_kep_tarto img {
	/* A kép alatti kihagyott üres területet tünteti el: https://stackoverflow.com/questions/7774814/remove-white-space-below-image */
	display: block;
	max-width: 270px;
	width: 100%;
}

div.termek_lista_elem:hover div.termek_lista_kep_tarto img {
	transform: scale(1.02);
}

div.termek_lista_cimke_tarto
	{
	left: 0;
	position: absolute;
	top: 10px;
	-webkit-transition: tranform 0.3s ease-out;    
	transition: transform 0.2s ease-out;
	z-index: 40;
	}

div.termek_lista_elem:hover div.termek_lista_cimke_tarto
	{
	-ms-transform: translate(-100%, 0); /* IE 9 */
    -webkit-transform: translate(-100%, 0); /* Safari */
    transform: translate(-100%, 0);
	}
	
div.termek_lista_cimke_tarto div
	{
	margin-bottom: 5px;
	}
	
div.termek_lista_cimke_tarto div span
	{
	background-color: var(--label_color_1);
	color: #ffffff;
	display: block;
	font-size: 0.75rem;
	opacity: 0.8;
	padding: 5px 13px;
	}

div.termek_lista_nev_ar_tarto {
	padding: 13px 20px 8px 20px;
}

div.termek_lista_elem h3 a {
	color: var(--txt_color_1);
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 2px;
	text-decoration: none;
}

div.termek_lista_elem:hover h3 a {
	color: var(--txt_color_3);
}

p.termek_lista_regi_ar,
p.termek_lista_regi_ar_2 {
	color: var(--txt_color_5);
	font-size: 0.75rem;
	min-height: 14px;
	text-decoration: line-through;
}

p.termek_lista_uj_ar,
p.termek_lista_uj_ar_2 {
	font-size: 0.875rem;
	height: 21px;
	line-height: 1rem;
}

p.termek_lista_uj_ar_2 {
	font-size: 0.75rem;
}

p.termek_lista_egyseg_ar {
	color: var(--txt_color_5);
	font-size: 0.625rem;
	min-height: 11px;
}

div.termek_lista_leiras_tarto {
	color: var(--txt_color_1);
	display: none;
	font-size: 1rem;
	line-height: 150%;
	padding: 13px 20px 20px 20px;
}

div.termek_lista_flex.sor_elrendezes div.termek_lista_leiras_tarto {
	display: block;
}

div.termek_lista_funkcio_tarto {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20px 13px 20px;
}

div.termek_lista_kosarba_funkcio {
	background-color: var(--btn_color_1);
	color: #ffffff;
	cursor: pointer;
	font-size: 0.8125rem;
	margin: 0 5px 5px 0;
	padding: 10px;
	transition: background 0.1s ease-in;
}

div.termek_lista_kosarba_funkcio:hover {
	background-color: var(--btn_color_2);
}

a.termek_lista_reszletek_funkcio {
	background-color: var(--btn_color_3);
	color: var(--txt_color_2);
	display: block;
	font-size: 0.8125rem;
	margin-bottom: 5px;
	padding: 10px;
	text-decoration: none;
	transition: background 0.1s ease-in;
}

a.termek_lista_reszletek_funkcio:hover {
	background-color: var(--btn_color_4);
}

/* Termékcsoport lista felépítés FLEX */

div.termekcsoport_lista_flex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

div.termekcsoport_lista_flex.sor_elrendezes {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
}

div.termekcsoport_lista_elem {
	/* A termekcsoport_lista_elem-en belül minden egy-egy flex elem... */
	display: flex;

	/* ...amelyeket egymás alá rendezünk el ikon lista esetén */
	flex-direction: column;

	/* Azért kell, hogy a név tartó teljes magasságában egyforma legyen a háttérszín,
	akkor is, ha a név tartó nem egyforma magas minden termékcsoport esetén */
	background-color: var(--bg_color_1);

	/* A címkék elhelyezéséhez kell */
	position: relative;

	/* Minden szép lassan változzon */
	transition: 200ms ease all;
}

div.termekcsoport_lista_flex.sor_elrendezes div.termekcsoport_lista_elem {
	border-bottom: 1px solid var(--border_color_1);
}

@media only screen and ( max-width: 3000px ) {

	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 20%;
	}

}

@media only screen and ( max-width: 1560px ) {
	
	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 25%;
	}

}

@media ( max-width: 1300px ) {
	
	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 33.333333%;
	}

}

@media only screen and ( max-width: 940px ) {
	
	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 50%;
	}

}

@media only screen and ( max-width: 899px ) {
	
	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 25%;
	}

}

@media only screen and ( max-width: 800px ) {
	
	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 33.333333%;
	}

}

@media only screen and ( max-width: 540px ) {
	
	div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_elem {
		flex: 0 1 50%;
	}
	
}

@media only screen and (min-width: 430px) {

	div.termekcsoport_lista_flex.sor_elrendezes div.termekcsoport_lista_elem {
		/* Ha nagyon keskeny a képernyő, akkor a sor lista
		kép és indormáció elemei egymás alá kerülnek */
		flex-direction: row;
	}

}

div.termekcsoport_lista_elem:hover {
	background-color: #ffffff;
}

/* Termékcsoport lista egy elemének felépítése */

div.termekcsoport_lista_kep_tarto {
	/* A megnagyított kép nem fog kilógni a kép tartóból */
	overflow: hidden;
}

div.termekcsoport_lista_flex.sor_elrendezes div.termekcsoport_lista_kep_tarto {
	/* 270 képpont nagyságú a kép tartó, nem lehet shrinkelni */
	flex: 0 0 270px;
}

div.termekcsoport_lista_kep_tarto img {
	/* A kép alatti kihagyott üres területet tünteti el: https://stackoverflow.com/questions/7774814/remove-white-space-below-image */
	display: block;
	max-width: 270px;
	width: 100%;
}

div.termekcsoport_lista_elem:hover div.termekcsoport_lista_kep_tarto img {
	transform: scale(1.02);
}

div.termekcsoport_lista_cimke_tarto
	{
	left: 0;
	position: absolute;
	top: 10px;
	-webkit-transition: tranform 0.3s ease-out;    
	transition: transform 0.2s ease-out;
	z-index: 40;
	}

div.termekcsoport_lista_elem:hover div.termekcsoport_lista_cimke_tarto
	{
	-ms-transform: translate(-100%, 0); /* IE 9 */
    -webkit-transform: translate(-100%, 0); /* Safari */
    transform: translate(-100%, 0);
	}
	
div.termekcsoport_lista_cimke_tarto div
	{
	margin-bottom: 5px;
	}
	
div.termekcsoport_lista_cimke_tarto div span
	{
	background-color: var(--label_color_1);
	color: #ffffff;
	display: block;
	font-size: 0.75rem;
	opacity: 0.8;
	padding: 5px 13px;
	}

div.termekcsoport_lista_nev_tarto {
	padding: 13px 20px;
}

div.termekcsoport_lista_elem h3 a {
	color: var(--txt_color_1);
	font-size: 1rem;
	font-weight: 400;
	margin-bottom: 2px;
	text-decoration: none;
}

div.termekcsoport_lista_elem:hover h3 a {
	color: var(--txt_color_3);
}

div.termekcsoport_lista_leiras_tarto {
	color: var(--txt_color_1);
	display: none;
	font-size: 1rem;
	line-height: 150%;
	padding: 0 20px 13px 20px;
}

div.termekcsoport_lista_flex.sor_elrendezes div.termekcsoport_lista_leiras_tarto {
	display: block;
}

div.termekcsoport_lista_funkcio_tarto {
	display: flex;
	flex-wrap: wrap;
	padding: 0 20px 13px 20px;
}

a.termekcsoport_lista_reszletek_funkcio {
	background-color: var(--btn_color_3);
	color: var(--txt_color_2);
	display: block;
	font-size: 0.8125rem;
	padding: 10px;
	text-decoration: none;
	transition: background 0.1s ease-in;
}

a.termekcsoport_lista_reszletek_funkcio:hover {
	background-color: var(--btn_color_4);
}


div.termekcsoport_lista_flex:not(.sor_elrendezes) div.termekcsoport_lista_funkcio_tarto
{
	display: none;
}

/* Listák lapozógombjai */

div.lista_lapozo
{
	background-color: var(--bg_color_3);
	border-bottom: 1px dotted var(--border_color_1);
	border-top: 1px dotted var(--border_color_1);
	clear: both;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding:15px 20px;
}

div.lista_lapozo a
{
	color:var(--txt_color_5);
	font-size:0.875rem;
	margin-right:10px;
	text-decoration:none;
	transition: color 0.1s ease-in;
}

div.lista_lapozo a:hover,div.lista_lapozo a.lista_lapozo_funkcio_aktiv
{
    color: var(--txt_color_1);
}

div.lista_lapozo_sorrend
{
	display: none;
	position:relative;
}

div.lista_lapozo_sorrend select {
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    background: var(--bg_color_3);
    border: 1px solid;
	border-color: var(--border_color_1);
    color:var(--txt_color_1);
    cursor:pointer;
    display: inline-block;
	font-size: 0.875rem;
    margin: 0;
    padding: 5px;
    outline:none;
}

@media screen and (-webkit-min-device-pixel-ratio:0)
{
    div.lista_lapozo_sorrend select
	{
		padding-right:18px;
	}
}

div.lista_lapozo_sorrend:after
{
    border-bottom:1px solid var(--border_color_1);
    content:'<>';
    color:var(--txt_color_5);
    font-size:11px;
    pointer-events:none;
    position:absolute;
    right:5px; top:7px;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
}

div.lista_lapozo_sorrend:before {
    content:'';
    display:block;
	height:20px;
    pointer-events:none;
    position:absolute;
    right:6px;
	top:0px;
    width:20px;
}

@media only screen and (min-width: 701px) {

    div.lista_lapozo_sorrend
    {
        display: block;
    }

}


div.lista_lapozo_elrendezes a {
	color: var(--btn_color_4);
	font-size: 1.5em;
	margin-left: 5px;
	outline: none;
	transition: 0.2s;
}

div.lista_lapozo_elrendezes a:hover {
	color: var(--btn_color_1);
}

/* Listák termékcsoport útvonalai */
/* Termék- és termékcsoport listák felett megjelenő szülő termékcsoport leírások */

div#lista_ut
{
    color: var(--txt_color_1);
	font-size: 1rem;
	padding: 15px 20px;
    text-align: center;
}

div#lista_ut a
{
    color: var(--txt_color_5);
	line-height: 0;
	text-decoration: none;
	transition: color 0.1s ease-in;
}

div#lista_ut a:hover
{
    color: var(--txt_color_1);
}

@media only screen and (min-width: 701px) {

    div#lista_ut
    {
        text-align: left;
    }

}