@font-face {
    font-family: DINPROmedium;
    src: url('font/FontsFree-Net-D-DIN-PRO-500-Medium.woff2') format('woff2'),
    url('font/FontsFree-Net-D-DIN-PRO-500-Medium.woff') format('woff'),
    url('font/FontsFree-Net-D-DIN-PRO-500-Medium.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: DIDOTLTRomanItalic;
    src: url('font/Didot LT Roman Italic.woff2') format('woff2'),
    url('font/Didot LT Roman Italic.woff2') format('woff'),
    url('Didot LT Roman Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DIDOTLTRomanRegular;
    src: url('font/Didot LT Roman Regular.woff2') format('woff2'),
    url('font/Didot LT Roman Regular.woff') format('woff'),
    url('Didot LT Roman Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINPRO700Bold;
    src: url('font/FontsFree-Net-D-DIN-PRO-700-Bold.woff2') format('woff2'),
    url('font/FontsFree-Net-D-DIN-PRO-700-Bold.woff') format('woff'),
    url('FontsFree-Net-D-DIN-PRO-700-Bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINPRO1;
    src: url('font/FontsFree-Net-DINPro-1.woff2') format('woff2'),
    url('font/FontsFree-Net-DINPro-1.woff') format('woff'),
    url('FontsFree-Net-DINPro-1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINTextProExtraBlack;
    src: url('font/FontsFree-Net-PF-DinText-Pro-Extra-Black-Regular.woff2') format('woff2'),
    url('font/FontsFree-Net-PF-DinText-Pro-Extra-Black-Regular.woff') format('woff'),
    url('FontsFree-Net-PF-DinText-Pro-Extra-Black-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINTextProRegular;
    src: url('font/FontsFree-Net-PF-DinText-Pro-Regular.woff2') format('woff2'),
    url('font/FontsFree-Net-PF-DinText-Pro-Regular.woff') format('woff'),
    url('font/FontsFree-Net-PF-DinText-Pro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINTextProBoldSubset;
    src: url('font/PFDINTextPro-Bold-subset.woff2') format('woff2'),
    url('font/PFDINTextPro-Bold-subset.woff') format('woff')
    url('font/PFDINTextPro-Bold-subset.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINTextProLightSubset;
    src: url('font/PFDINTextPro-Light-subset.woff2') format('woff2'),
    url('font/PFDINTextPro-Light-subset.woff') format('woff'),
    url('font/PFDINTextPro-Light-subset.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINTextProBoldSubset;
    src: url('font/PFDINTextPro-Bold-subset.woff2') format('woff2'),
    url('font/PFDINTextPro-Bold-subset.woff') format('woff'),
    url('font/PFDINTextPro-Bold-subset.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: DINTextProItalicSubset;
    src: url('font/PFDINTextPro-MedItalic-subset.woff2') format('woff2'),
    url('font/PFDINTextPro-MedItalic-subset.woff') format('woff'),
    url('font/PFDINTextPro-MedItalic-subset.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 
@font-face {
    font-family: UfontsDIDOT;
    src: url('font/ufonts.com_didot.woff2') format('woff2'),
    url('font/ufonts.com_didot.woff') format('woff'),
    url('font/ufonts.com_didot.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
} 



*{
	padding: 0; 
	margin:0; 
	border:0; 
	font-family: ;
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */	
	
}
body {
	font-family: DINPRO1;
	background-color: #f6f6f6;	
	background-image: url("images/szurke.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center ;
	background-attachment: fixed;
}

.hidden{ display:none; }
.clear{clear:both}
.left{float:left;}
.right{float:right;}
div#felso-sav{
	position:fixed;
	z-index: 1;
	width: 100%;
	background-color: rgb(150, 0, 30);
    padding: 20px 20px;
    text-align: left;
	font-family:DIDOTLTRomanRegular;
	font-size: 20px;
}

ul#bar li {
	float:left;
	list-style-type: none;
	padding:20px;
	color: #ffffff;
}
ul#bar li:first-child{ margin-left: 10%; }
ul#bar li.jobbra{ float:right; margin-right:10%;}

.gomb{
	background-color:#fff;
	padding: 10px;
	text-decoration: none;
	color: blue;
	cursor: pointer
}

div#hamburger_fo{
	display: none; 
	margin-right: 5%;
	background-color: #440015;
	padding: 2px 7px;
}

div#hamburger_fo div{
	width: 35px;
	height: 5px;
	background-color: #fff;
	margin: 6px 0;
}

#nyelv {
    position: absolute;
	right: 100px;
    margin-left: 1%;
    height: 30px;
    width: 60px;
    border-radius: 10px;
    border: 2px solid white;
    background-color: rgb(150, 0, 30);
    color: white;
    font-family: DINPROmedium;
    font-weight: bold;
}

div#tartalom{
	background-color: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position:relative;
	width: 60%;
	margin: 0 auto;
	top: 120px;
	padding: 10px;
}

div#tartalom_leker{
	background-color: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position:relative;
	width: 30%;
	margin: 0 auto;
	top: 70px;
	padding: 10px;
}
#energiakj{
    width: 24%;
}

@media only screen and (max-width: 1600px){
	#energiakj{
        width: 23%;
    }
}

@media only screen and (max-width: 1550px){
	#energiakj{
        width: 22.5%;
    }
}

@media only screen and (max-width: 1400px){
	#energiakj{
        width: 21.5%;
    }
}

@media only screen and (max-width: 1300px){
	#energiakj{
        width: 21%;
    }
}

@media only screen and (max-width: 1200px){
	div#tartalom_leker{
		background-color: #ffffff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		position:relative;
		width: 60%;
		margin: 0 auto;
		top: 70px;
		padding: 10px;
	}
	ul#bar li:first-child{ margin-left: 5%; }
	ul#bar li.jobbra{ float:right; margin-right:5%;}
	#energiakj{
        width: 20.5%;
    }
}

@media only screen and (max-width: 1150px){
	#energiakj{
        width: 20%;
    }
}

@media only screen and (max-width: 1080px){
	#energiakj{
        width: 19%;
    }
}

@media only screen and (max-width: 1050px){
	#energiakj{
        width: 18%;
    }
}

@media only screen and (max-width: 950px){
	#energiakj{
        width: 17%;
    }
}

@media only screen and (max-width: 850px){
	ul#bar li{margin:0;float:none}
	ul#bar li:first-child{ margin-left: 0; }
	ul#bar li.jobbra{ float:none; margin-right:0;text-align: center; display: none}
	ul#bar li a.gomb3{text-align: center; width:100%; padding: 20px; border-bottom: 2px solid white;}
	div#felso-sav{padding:20px 0;}
	div#hamburger_fo{display:block}
	.gomb3::after {
    content: '';
    display: block;
    width: 0;
    height: 0px;
    background: white;
    transition: none;
    }
    
    .gomb3:hover::after {
        width: 0%;
        transition: none;
    }
}

@media only screen and (max-width: 800px){
	div#tartalom_leker{
		background-color: #ffffff;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		position:relative;
		width: 80%;
		margin: 0 auto;
		top: 70px;
		padding: 10px;
	}
	

}

div#tartalom_rogzit{
	background-color: #ffffff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	position:relative;
	margin: 0 auto;
	top: 150px;
	display:inline-block;
	padding: 10px;
}

div#tartalom_rogzit h2{ font-family:DIDOTLTRomanRegular }

table#data{ width: 800px; padding: 10px; font-size: 15px; font-family: DIDOTLTRomanRegular; font-weight: normal;}
table#data td{	padding: 10px;text-align: center}
table#data tr:first-child{ font-weight: bold}
table#data tr:not(:first-child) td:first-child{ 
	font-weight: normal;
}

table#data tr:not(:first-child):hover{ 
	background-color: #a2a2a2;

}

table td{padding: 10px}

table#data td{ 
	border-left:1px solid #727272;
}

table#data tr:first-child td{ 
	border-top:1px solid #727272;
	border-bottom:1px solid #727272;
}

table#data tr td:last-child { 
	border-right:1px solid #727272;
}

table#data tr:last-child td{ 
	border-bottom:1px solid #727272;
}

a.edit{
	cursor: pointer
}
a.edit:hover{
	color: rgb(150, 0, 30);
}

label {
	display: inline-block;
	font-weight: bold;
}

input[type="text"],input[type="number"], input[type="password"], input[type="email"] {
	border: 1px solid #ccc;
	padding: 10px;
	margin: 5px 0;
	width: 100%;
	box-sizing: border-box;
	outline: none;
	transition: border-color 0.3s;
}

input[type="text"],input[type="number"], input[type="password"],input[type="email"]:focus {
	border-color: #999;
}

input[type="submit"] {
            padding: 10px 15px;
			margin-left:20px; 
			background-color: rgb(150, 0, 30); /* zöld */
			color: white;
			border: none;
			border-radius: 5px;
			font-size: 16px;
			cursor: pointer;
			transition: background-color 0.3s;
        }

        input[type="submit"]:hover {
            background-color: gray; /* sötétzöld */
        }
.select-wrapper {
    width: 200px; /* Állítsd be az elem szélességét igényeidnek megfelelően */
    margin: 0 auto; /* Középre igazítás */
    position: relative;
}

/* Stílusok a select elemhez */
.borFajta {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    appearance: none; /* Alap stílusok eltávolítása (pl. Firefox esetén) */
	
	background-image:
		linear-gradient(45deg, transparent 50%, gray 50%),
		linear-gradient(135deg, gray 50%, transparent 50%),
		radial-gradient(#ddd 70%, transparent 72%);
	background-position:
		calc(100% - 20px) calc(1em + 2px),
		calc(100% - 15px) calc(1em + 2px),
		calc(100% - .5em) .5em;
	background-size:
		5px 5px,
		5px 5px,
		1.5em 1.5em;
	background-repeat: no-repeat;
}

.borFajta:focus {
	background-image:
		linear-gradient(45deg, white 50%, transparent 50%),
		linear-gradient(135deg, transparent 50%, white 50%),
		radial-gradient(gray 70%, transparent 72%);
	background-position:
		calc(100% - 15px) 1em,
		calc(100% - 20px) 1em,
		calc(100% - .5em) .5em;
	background-size:
		5px 5px,
		5px 5px,
		1.5em 1.5em;
	background-repeat: no-repeat;
	border-color: green;
	outline: 0;
}

.the-icons {
	font-size: 14px;
	line-height: 24px;
}
.switch {
	position: absolute;
	right: 0;
	bottom: 10px;
	color: #666;
}
.switch input {
	margin-right: 0.3em;
}
.codesOn .i-name {
	display: none;
}
.codesOn .i-code {
	display: inline;
}
.i-code {
	display: none;
}
@font-face {
	font-family: 'fontello';
	src: url('/css/font/fontello.ttf');
	font-weight: normal;
	font-style: normal;
}
.demo-icon {
	font-family: "fontello";
	font-style: normal;
	font-weight: normal;
	speak: never;

	display: inline-block;
	text-decoration: inherit;
	width: 1em;
	margin-right: .2em;
	text-align: center;
	/* opacity: .8; */

	/* For safety - reset parent styles, that can break glyph codes*/
	font-variant: normal;
	text-transform: none;

	/* fix buttons height, for twitter bootstrap */
	line-height: 1em;

	/* Animation center compensation - margins should be symmetric */
	/* remove if not needed */
	margin-left: .2em;

	/* You can be more comfortable with increased icons size */
	/* font-size: 120%; */

	/* Font smoothing. That was taken from TWBS */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: rgb(150,0,30);
	/* Uncomment for 3D effect */
	/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
}

ul#allergen li{
	display:none;
	
	padding: 10px 0;
}


div#plane{
	z-index: 9;
	width:100%;
	height: 100%;
	background-color: rgba(123,123,123,0.7);
	position:fixed;
	display:none;
}
div#popup{
	padding: 5%;
	z-index: 10;
	color: red;
	background-color: rgba(240,240,240,1);
	position: fixed;
	width:25%;
	margin: 15% 34.5%;
	text-align:center;
	font-size: 17px;
	display: none;
}

td#osszetevo span input{
	display: none
}


form{ font-family:DINPRO1}

.gomb1{
	color:  rgb(150,0,30);
}

.gomb2{
	background-color: rgb(150,0,30);
	padding: 10px 15px;
	text-decoration: none;
	color: white;
	border: none;
	border-radius: 5px;
	font-size: 16px;
	cursor: pointer;
	transition: background-color 0.3s;
}

.gomb3 {
    background-color: transparent;
    border: none;
    float: right;
    color: white;
    font-family: DINPROmedium;
    font-size: 20px;
    text-decoration: none;
}

.gomb3::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: white;
    transition: width .3s;
}

.gomb3:hover::after {
    width: 100%;
    transition: width .3s;
}

table#pref{font-family: DINPRO1}

.hidded{display:none}