html, body {
  width: 100%;
  margin: 0px;
  padding: 0px;
}
/*  Layout Main Page */ 
.page{
	display: grid;
	grid-template-areas:
    "header_m header_m header_m"
	"main_nav_bar main_nav_bar main_nav_bar"
    "main_l main_m main_r"
	"footer_m footer_m footer_m";
	grid-template-columns: 1fr minmax(0, var(--szelesseg)) 1fr;
	grid-template-rows: 300px 50px 1fr 250px;
	gap: var(--gap);
	width: 100%;
	margin : auto ;
	min-height: 100vh;
	padding-top: 10px;
	padding-bottom: 20px;
}

/*  Layout Head */ 
.header_m{
	grid-area: header_m;
	width: 100%;
}

.header_content {
    max-width: var(--szelesseg);
    margin: 0 auto;
	height : 100%;
	display: grid;
	grid-template-areas:
	"lang login"
	"search search"
	"header_nav header_nav";
	grid-template-columns: 1fr 1fr ;
	grid-template-rows: 30px 1fr 40px;
}
.lang{
	grid-area: lang;	
}
.login{
	grid-area: login;
	justify-self: end;
}
.search{
	grid-area: search;
	justify-self: center;
	align-self: end;
}
.header_nav{
	grid-area: header_nav;	
	justify-self: center;
}

/* Main Nav bar */
.main_nav_bar{
	grid-area: main_nav_bar;
	position: sticky;
	top: 0;
	z-index: 1000;
	display: grid;
	grid-template-areas:
	"main_nav_bar_l main_nav_bar_content main_nav_bar_r";
	grid-template-columns: 1fr minmax(0, var(--szelesseg)) 1fr;
}

.main_nav_bar_l{
	grid-area: main_nav_bar_l;
}
.main_nav_bar_content{
	grid-area: main_nav_bar_content;
	justify-self: center;
	align-self: center;
}
.main_nav_bar_r{
	grid-area: main_nav_bar_r;
	justify-self: end;
	align-self: center;
}



/*  Layout Main */ 
.main_l{
	grid-area: main_l;
}
.main_m{
	grid-area: main_m;
	display: grid;
	grid-template-areas:
	"side_menu content";
	grid-template-columns: 250px 1fr;
	gap: var(--gap);
}
.main_m_single{
	grid-area: main_m;
	display: grid;
	grid-template-areas:
	"content";
	grid-template-columns: 1fr;
	gap: var(--gap);
}
.side_nemu_hide{
	display: none;
}

.main_r{
	grid-area: main_r;	
}

.side_menu{
	grid-area: side_menu;	
}
.content{
	grid-area: content;	
}
/* ========================== */
/* ====== Termék lista ====== */
.racs {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fit , minmax(300px , 1fr));
	justify-content: center;
	gap: 1em;
}

.kiskartya {
	height:250px;
	background-color: white;
	text-align: center;
	align-content: center;
	font-size: 3rem;
}
/* ========================== */





/*  Layout Footer */ 
.footer_m{
	grid-area: footer_m;
}

.footer_content{
    max-width: var(--szelesseg);
    margin: 0 auto;
	height : 100%;
	display: grid;
	grid-template-areas:
	"footer_columns1 footer_columns2 footer_columns3 footer_columns4"
	"footer_cr footer_cr footer_cr footer_cr";
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 190px 40px;
	gap: var(--gap);
	padding-top: var(--gap);
}
.footer_columns1{
	grid-area: footer_columns1;
	text-align: center;
}
.footer_columns2{
	grid-area: footer_columns2;
	text-align: center;
}
.footer_columns3{
	grid-area: footer_columns3;
	text-align: center;
}
.footer_columns4{
	grid-area: footer_columns4;
	text-align: center;
}
.footer_cr{
	grid-area: footer_cr;
	justify-self: center;
	align-self: start;
}
/* test elem */
.test  {
/*	border: 1px solid black; */
	background-color : #27F53C;
	/* Elmozdulás 0, elmosás 0, méret 10px, szín fekete, belső irány */
	box-shadow: inset 0 0 0 10px black;
}