@charset "UTF-8";
/* CSS Document */

	/* default settings */
	
	html { margin: 0; padding: 0; font-family: Lato; font-size: 10px; line-height: 13px; color: #002d72; }
	body,div,p,ul,li { margin: 0; padding: 0; }
	div,span,h1,h2,h3,h4,h5,h6,i { background-position: center center; background-repeat: no-repeat; background-size: contain; margin: 0; padding: 0; }
	h1,h2,h3,h4,h5,h6,p,ul { font-family:Lato; font-weight: normal; text-align: left; }
	li { list-style: none; }
	img { border: none; }
	ul li, a { font-family: inherit; color: inherit; }
	a { text-decoration: none; }
	a:hover { text-decoration: underline; }
	a.foreign-link { font-weight: bold; color:#153572; }
	
	/* nonbreaking spaces (before and after) */
	.spb { white-space: nowrap; display: inline; margin-left:0.15em; }
	.spa { white-space: nowrap; display: inline; margin-right:0.15em; }
	

	/* responsibles */

	@media screen and (min-width:1440px)                        {	/*	XXXL: 1440 -		*/	}
	@media screen and (min-width:1240px) and (max-width:1439px) {	/*	 XXL: 1240 - 1439	*/	}
	@media screen and (min-width:1040px) and (max-width:1239px) {	/*	  XL: 1040 - 1239	*/	}
	@media screen and (min-width: 960px) and (max-width:1039px) {	/*	   L:  960 -  375	*/	}
 	@media screen and (min-width: 860px) and (max-width: 959px) {	/*	   M:  860 -  959	*/	}
 	@media screen and (min-width: 700px) and (max-width: 859px) {	/*	   S:  700 -  859	*/	}
 	@media screen and (min-width: 580px) and (max-width: 699px) {	/*	  XS:  580 -  699	*/	}
 	@media screen and (min-width: 310px) and (max-width: 579px) {	/*	 XXS:    0 -  375, mirror: 310	*/	}

	@media screen and (min-width:   0px) and (max-width: 859px) {	/*	   MOBILE	XXS-S:     0-  859	*/	div[data-desktop="1"], div[data-tablet="1"] { display: none!important; } }
	@media screen and (min-width: 860px) and (max-width:1039px) {	/*	   TABLET	M-L:     860- 1039	*/	div[data-desktop="1"], div[data-mobile="1"] { display: none!important; } }
	@media screen and (min-width:1040px)                        {	/*	   DESKTOP	M-XXXL: 1040-		*/	div[data-tablet="1"],  div[data-mobile="1"] { display: none!important; } }



	/* Columns */
	
	.columns {
		display: block;
		margin: 0; padding: 0;
		font-size: 0; line-height: 0;
	}
	.columns > .column {
		display: inline-block;
		font-size: 1.5rem;
		line-height: 1.8rem;
		vertical-align: top;
	}

	.columns.c1 {}
	.columns.c1 > .column { width: 100%;  }
	.columns.c1-4 {}
	.columns.c1-4 > .column:nth-child(n+1) { width:  440px;              background-color: #A0232500; }
	.columns.c1-4 > .column:nth-child(n+2) { width:  calc(100% - 440px); background-color: #3AC7B400; }




	/* elements */

	small { display: block; width: 100%; height: 20px; }
	big   { display: block; width: 100%; height: 40px; }
	
	
	.partners-wrapper {
		margin: 0;
	}
	.partners-wrapper
		ul.partners {
			font-family: "Lato";
			font-size: 20px;
			line-height: 26px;
			font-weight: 900;
		}
	.partners-wrapper
		ul.partners li.partner {
			display: block;
			padding: 0;
			margin: 0;
			list-style: none;
			border-top: 1px solid rgba(0,45,114,0.30);
			visibility: visible;
			opacity: 1;
		}

	.partners-wrapper ul.partners                    li.partner { display: none; }
	.partners-wrapper ul.partners[data-cty="összes"] li.partner { display: block; }

	.partners-wrapper ul.partners[data-dmc="1"] li.partner[data-dmc=""] { display: none; }
	.partners-wrapper ul.partners[data-hmd="1"] li.partner[data-hmd=""] { display: none; } 
	.partners-wrapper ul.partners[data-ott="1"] li.partner[data-ott=""] { display: none; } 
	.partners-wrapper ul.partners[data-hmn="1"] li.partner[data-hmn=""] { display: none; } 
	.partners-wrapper ul.partners[data-ofm="1"] li.partner[data-ofm=""] { display: none; } 
	.partners-wrapper ul.partners[data-clt="1"] li.partner[data-clt=""] { display: none; } 
	.partners-wrapper ul.partners[data-pwc="1"] li.partner[data-pwc=""] { display: none; } 

		
		
	.partners-wrapper
		ul.partners li a {
			display: block;
			padding: 3px 0 3px 0;
			text-decoration: none;
		}
	.partners-wrapper
		ul.partners li a:hover {
			background-color:#EEE;
		}
		
	
	/*
	.partners-wrapper
		ul.partners
			li
				.index {
					display: inline-block;
					font-size: 1.5rem;
					line-height: 1.7rem;
					font-weight: normal;
					color: #5C8CD6;
					text-align: left;
				}
	*/
	
		/* Counter */
		
		ul.partners { counter-reset: rowNumber; }
		ul.partners li.partner::before {
			display: inline-block;
			overflow: hidden;
			width: 80px;
			height: 30px;
			margin: 0 0 -30px 0;
			padding: 0 0 0 10px;
			position: relative;
			counter-increment: rowNumber;
			content: counter(rowNumber) ".";
			font-size: 1.5rem;
			line-height: 25px;
			font-weight: normal;
			color: #5C8CD6;
			text-align: left;
			pointer-events: none;
		}

		/* Discount with METRO Card */
		
		ul.partners li.partner[data-dmc="1"] .dmc {
			display: block;
			position: relative;
			float: right;
			text-align: right;
			width: 200px;
			height: 30px;
			margin: 0 0 -30px 0;
			left: -10px;
			top: 5px;
			font-weight: normal;
			font-size: 1.5rem;
			line-height: 1.8rem;
			color: #5C8CD6;
			pointer-events: none;
		}
		ul.partners li.partner[data-dmc="1"] .dmc:before {  white-space: pre; content:"-10% kedvezmény\AMETRO kártyával"; }

				
	.partners-wrapper ul.partners li .index:after { content:"."; }
	.partners-wrapper
		ul.partners
			li
				.name {
					display: inline-block;
					font-size: 2rem;
					line-height: 2.2rem;
					font-weight: bold;
				}
	.partners-wrapper
		ul.partners
			li
				.url-metro {
					display: inline-block;
					font-size: 16px;
					line-height: 24px;
					font-weight: 400;
					color: #0064fe;
				}
	.partners-wrapper
		ul.partners
			li
				.address {
					display: inline-block;
					font-size:1rem;
					line-height: 1.2rem;
				}
				
	
	
	.partners-wrapper
		ul.partners
			li .icons {
				display: inline-block;
			}
	.partners-wrapper
		ul.partners
			li .icons {
				display: inline-block;
			}
			
		/* List */
		
			.icon {
				display: inline-block;
				width: 20px;
				height: 20px;
				margin: 0 0 0 3px;
				padding: 0;
				background-position: center center;
				background-size: 20px 20px;
				background-repeat: no-repeat;
				opacity: 0;
			}
			.icon[data-filter="discount_metro_card" ] { background-image:url(../../images/icons/discount_metro_card.svg); }
			.icon[data-filter="home_delivery"       ] { background-image:url(../../images/icons/home_delivery.svg); }
			.icon[data-filter="order_to_take_away"  ] { background-image:url(../../images/icons/order_to_take_away.svg); }
			.icon[data-filter="has_menu"            ] { background-image:url(../../images/icons/has_menu.svg); }
			.icon[data-filter="order_from_menu"     ] { background-image:url(../../images/icons/order_from_menu.svg); }
			.icon[data-filter="contactless_transfer"] { background-image:url(../../images/icons/contactless_transfer.svg); }
			.icon[data-filter="payment_with_card"   ] { background-image:url(../../images/icons/payment_with_card.svg); }
			.icon[data-value="1"] { opacity: 1; }
			

	
	
	
	/* FILTERS */

	#filters {
		will-change: auto;
		background-color: #FFFFFF;
	}
	html.fixed-filter #filters {
		position: fixed;
	}
	html .filter-placeholder {
		width: 100%;
		max-height: 0px;
		overflow: hidden;
	}
	html.fixed-filter .filter-placeholder {
		max-height: 1000px;
	}

	.filters {
		display: block;
		margin: 0;
		padding: 0 10px 10px 10px;
		text-align: left;
		font-size: 0;
		line-height: 0;
	}
	.filters  .filter {
		display: block; 
		margin: 0;
		padding: 0;
	}
	
	
		/* City selector */
		
			.filters .filter[data-type="city-selector"] {
				display: block;
				width: 100%;
				text-align: left;
				margin: 0; padding: 0; font-size: 0; line-height: 0;
			}
			.filters .filter[data-type="city-selector"] .form-label {
				display: inline-block;
				font-size: 1.6rem;
				line-height: 26px;
				font-weight: normal;
				vertical-align: top;
			}
			.filters .filter[data-type="city-selector"] .form-element {
				display: inline-block;
				padding: 0;
				vertical-align: top;
			}
			.filters .filter[data-type="city-selector"] .form-label   { width: 100px; padding: 0 0 0 0; }
			.filters .filter[data-type="city-selector"] .form-element { width: calc(100% - 120px); margin: 0 0 0 0; }
			.filters .filter[data-type="city-selector"] .form-element select {	
				appearance:none;
				-webkit-appearance:none;
				-moz-appearance:none;
				-ms-appearance:none;
				-o-appearance:none;

				width: auto;
				min-width:300px;
				height: 36px;
				font-family: Lato;
				font-size: 16px;
				line-height: 30px;
				padding: 3px 0 3px 10px;
				font-weight: normal;
				text-transform: uppercase;
				color: #002d72;
				outline: none;
				border: 1px solid #002d72;
				border-radius: 4px;
				background-image: url("../../images/arrow-down.blue.svg");
				background-repeat: no-repeat;
				background-size: 16px 16px;
				background-position: 50% right;
				background-position: calc(100% - 10px) 50%;
				overflow: visible;
			}
			.filters .filter[data-type="city-selector"] .form-element select option {}

	
	
		/* Options filter */
	
			.filters .filter[data-type="options-chooser"] {
				margin: 10px 0 0 0;
			}
			.filters .filter[data-type="options-chooser"] .form-label {
				display: inline-block;
				font-size: 1.6rem;
				line-height: 26px;
				font-weight: normal;
				vertical-align: top;
				width: 100px;
			}
			.filters .filter[data-type="options-chooser"] .form-element {
				display: inline-block;
				padding: 0;
				vertical-align: top;
				width: calc(100% - 100px);
			}
			.filters .filter[data-type="options-chooser"] label { display: inline-block; width: 300px; margin: 0 0 5px 0; }
			.filters .filter[data-type="options-chooser"] label input { display: block; opacity: 0; position: absolute; }
			.filters .filter[data-type="options-chooser"] label input ~ i { display: block; position: relative; width: 21px; height: 21px; border: 1px solid #002d72; margin: 0 0 -23px 0; border-radius: 4px; background-image: url("../../images/checkbox.white.svg"); background-position: center center; background-repeat: no-repeat; background-size: 0 0; }
			.filters .filter[data-type="options-chooser"] label input:checked ~ i { background-color: #002d72; background-size: 14px 14px; }
			.filters .filter[data-type="options-chooser"] label input ~ .label { display: block; margin:0 0 0 30px; font-size: 1.6rem; line-height: 25px; opacity: 0.5; }
			.filters .filter[data-type="options-chooser"] label input:checked ~ .label { opacity: 1; }

			.filters .filter[data-type="options-chooser"] label[data-filter="discount_metro_card" ] input ~ .label:before { content:"METRO kártyával 10% kedvezmény"; }
			.filters .filter[data-type="options-chooser"] label[data-filter="home_delivery"       ] input ~ .label:before { content:"Házhozszállítás"; }
			.filters .filter[data-type="options-chooser"] label[data-filter="order_to_take_away"  ] input ~ .label:before { content:"Rendelés átvétele személyesen"; }
			.filters .filter[data-type="options-chooser"] label[data-filter="has_menu"            ] input ~ .label:before { content:"Étlappal rendelkezik"; }
			.filters .filter[data-type="options-chooser"] label[data-filter="order_from_menu"     ] input ~ .label:before { content:"Rendelés étlapról"; }
			.filters .filter[data-type="options-chooser"] label[data-filter="contactless_transfer"] input ~ .label:before { content:"Érintésmentes átadás"; }
			.filters .filter[data-type="options-chooser"] label[data-filter="payment_with_card"   ] input ~ .label:before { content:"Bankkártyás fizetés"; }


	
	
	/* MAP */
	
	#map {
		position: relative;
		width: calc(100% - 2px);
		height: 500px;
		margin: 15px 0 0 1px;
		box-shadow: 0 0 1px 1px gray;
		border-radius: 8px;
		overflow: hidden;
	}
	#map canvas {
		width: 100%;
		height: 100%;
	}
	
	
	
	
	/*	WIDTHS */

	.partners-wrapper ul.partners li { margin: 0; padding: 0; font-size: 0; line-height: 0; }
	.partners-wrapper ul.partners li .column { display: inline-block; }
/*	.partners-wrapper ul.partners li .index    { width: 45px;              padding: 0 0 0 5px; background-color: #6DD09B11; }*/
	.partners-wrapper ul.partners li .name     { width: calc(100% - 70px); padding: 0 0 0 60px; background-color: #A7B1E000; }
	.partners-wrapper ul.partners li .address  { display:block; width: calc(100% - 75px); padding: 0 15px 0 60px; margin: 3px 0 0 0; background-color: #87B46800; font-weight: normal; font-size: 1.2rem; line-height: 1.5rem; color: #5C8CD6; }
	
	
 	@media screen and (min-width: 860px) and (max-width:9999px) {
		#filters { width: calc(100% - 20px); min-width: auto; max-width: auto; }
	}
	@media screen and (min-width:   0px) and (max-width: 859px) {	/*	   MOBILE	XXS-S:     0-  859	*/
		.columns.c1-4 > .column:nth-child(n+1) { display: block; width: 100%; }
		.filter[data-type="options-chooser"] .form-element { column-count: 1; break-inside: avoid; }	
		.filters .filter[data-type="city-selector"] .form-element { width: calc(100% - 100px); }
		.filters .filter[data-type="city-selector"] .form-element select { width: calc(100% - 2px); }
		#filters { box-shadow: 0 5px 15px 0 rgba(0,0,0,0.0); }
		html.fixed-filter #filters { box-shadow: 0 5px 15px 0 rgba(0,0,0,0.5); }
		#filters { width: calc(100% - 20px); min-width: calc(100% - 20px); } max-width: auto;  }
	}
	@media screen and (min-width: 860px) and (max-width:1039px) {	/*	   TABLET	M-L:     860- 1039	*/	
		.columns.c1-4 > .column:nth-child(n+1) { display: block; width: 100%; }
		.filter[data-type="options-chooser"] .form-element { column-count: 2; break-inside: avoid; }	
		.filters .filter[data-type="city-selector"] .form-element { width: calc(100% - 100px); }
		.filters .filter[data-type="city-selector"] .form-element select { width: calc(100% - 2px); }
		#filters { width: calc(100% - 20px); min-width: calc(100% - 20px); max-width: auto; }
	}
	
	
 	@media screen and (min-width: 700px) and (max-width: 859px) {
	}
 	@media screen and (min-width: 580px) and (max-width: 699px) {
	
	}
 	@media screen and (min-width: 310px) and (max-width: 579px) {
		#reservation .city-selector .form-element {
			margin: 10px 0 0 0;
		}
		#reservation .city-selector .form-element select {	
		}
	}
	
	
	/* hacks */
	
	select::-ms-expand { display: none; }
	html[data-useragent*='MSIE 10.0'] #reservation .city-selector .form-element select { padding: 6px 0 0 10px; }
	html[data-useragent*='Trident/7.0'] #reservation .city-selector .form-element select { padding: 6px 0 0 10px; }