@charset "UTF-8";



/* HEADER */


.header,
.header nav,
.header .sub:after,
.header .logo,
.header nav {
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

.header {
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	overflow: hidden;
	width: 100%;
	height: 75px;
	background: #fff;
	z-index: 10000;
	font-size: 14px;
	line-height: 32px;
}

.header .bigscreen { display: none }

.header.showpanel { overflow: visible; }
.header.fixed { box-shadow: 0px 10px 30px rgba(223, 223, 192, 0.8); }

.header .panel {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 20px;
	text-align: right;
	background: #fff;
	margin: 0 auto;
	max-width: 1180px;
}


/* HEADER */
/* nav */

.header a {
	text-decoration: none;
}

.header nav .navpanel { display: none; }
.header nav div { text-align: left; }

.header nav a, .header nav .sub {
	display: block;
	color: var(--dark);
	font-weight: 500;
	white-space: nowrap;
	cursor: pointer;
}

.header nav a:hover,
.header .sub:hover {
	opacity: 1 !important;
	color: var(--green);
}


/* HEADER */
/* subnav with sign */

.header .sub {
	position: relative;
	padding-right: 40px;
}

.accordion, .faq h4 {
	position: relative;
	padding-right: 60px !important;
}


.header .sub:after, .accordion:after, .faq h4:after {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%) rotate(180deg);
	content: '';
	width: 32px;
	height: 32px;
	background: url(/hu/images/web/accordion-up-green.png) no-repeat center;
	background-size: 25px auto;
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}

.header .sub.detailed:after, .accordion.detailed:after, .faq h4.detailed:after  { transform: translateY(-50%) }





.tabpanel {
	display: none;
}

.tabber .tab.active {
	color: var(--green);
	pointer-events: none;
}


/* HEADER */
/* city - lang -social */


.header .city {
	position: relative;
	background: url(/hu/images/web/pin.png) no-repeat left center;
	background-size: 13px auto;
}

.header .city a,
.header .lang a,
.header .city div {
	display: block;
	font-weight: 600;
	padding: 0 10px 0 24px;
	color: #000;
	cursor: pointer;
}

.header .lang a {
	padding: 0 10px;
	color: var(--green);
}

.header .city a,
.header .lang.EN a.EN,
.header .lang.HU a.HU {
	display: none;
}

.header .city a {
	position: absolute;
	top: 100%;
	left: 0;
	margin: 12px -12px;
	padding: 4px 12px;
	background: #fff;
	box-shadow: 0px 10px 30px rgba(223, 223, 192, 0.8);
	border-radius: 12px;
	background: #fff url(/hu/images/web/arrow.png) no-repeat 12px center;
	background-size: 13px auto;
	min-width: 100%;
	text-align: left;
	color: var(--light);
}

.header .city a span {
	display: inline-block;
	width: 20px;
}

.header .city a:hover { color: var(--dark) }


/* HEADER */
/* logo */


.header .logo {
	position: absolute;
	left: 20px;
	width: 72px;
	top: 36px;
	transform: translateY(-50%);
}

.header .logo img {
	display: block;
	width: 100%;
}


/* HEADER */
/* mobnav */


.header .mobnav {
	display: inline-block;
	font-size: 20px;
	color: var(--green);
	width: 24px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
}

.header .mobnav div:last-child, .header.showpanel .mobnav div:first-child { display: none }
.header.showpanel .mobnav div:last-child { display: block }





/* HEADER FOR MOBILES */


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


	.header .panel {
		position: absolute;
		top: 0;
		left: 0;
		height: 100vh;
		padding: 90px 20px 90px;
	}
	
	.header .mobnav, 
	.header .button {
		top: 36px;
		transform: translateY(-50%);
		position: absolute;
	}
	
	.header .button {
		font-size: 14px;
		line-height: 32px;
		padding: 2px 24px;
	}
	
	.header .mobnav { right: 20px; }
	.header .button { right: 60px; }
	
	.header .head-extra {
		position: fixed;
		box-sizing: border-box;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 72px;
		padding: 20px;
		text-align: right;
		background: #fff;
		opacity: 0;
		transition: all 0.3s ease-out;
		-webkit-transition: all 0.3s ease-out;
		pointer-events: none;
	}
	
	.header.showpanel .head-extra { opacity: 1; pointer-events: auto; }
	.header.showpanel .panel { overflow-y: auto }

	.header .city, 
	.header .lang { 
		position: absolute;
		bottom: 20px;
	 }
	 
	.header .city { left: 20px; }
	.header .lang { left: 50%; transform: translateX(-50%) }
	.header .head-extra a, .header .city div { font-size: 16px }
	.header .city a { top: auto; bottom: 100%; color: var(--dark); }
	
	.header .socials a { 
		display: inline-block;
		width: 28px;
		margin-left: 4px;
		position: relative;
		vertical-align: middle;
	}
			
	.header nav { margin-top: 40px; margin-bottom: 70px; opacity: 0; }
	.header.showpanel nav { margin-top: 0; opacity: 1; }
	
	.header nav a, .header nav .sub {
		font-size: 24px;
		line-height: 56px;
		font-weight: 500;
	}
	
	.header nav .navpanel a {
		font-size: 18px;
		line-height: 36px;
		padding-left: 40px;
		opacity: 0.6;
	}
	
}



/* FOR TABLET and SMALL DESKTOP */

@media only screen and (min-width: 520px) and (max-width: 1179px) {
	
	
	.header nav {
		display: block;
		position: absolute;
		top: 74px;
		right: 0;
		background: #fff;
		padding: 20px 40px;
		min-width: 160px;
		transform: translateX(100%);
	}

	
	.header.showpanel nav {
		transform: translateX(0);
		max-height: 70vh;
		overflow-y: auto;
	}
	
	.header nav a, .header nav .sub {
		font-size: 15px;
		line-height: 36px;
	}
	
	.header nav .navpanel a {
		font-size: 14px;
		line-height: 36px;
		padding-left: 20px;
		opacity: 0.6;
	}
	
	.header .sub { padding-right: 20px }
	.header .sub:after { right: -24px; background-size: 18px auto }

}


/* FROM TABLET TO ALL */

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

	
	.header { overflow: visible; }
	.header .logo { left: 40px; }
	.header .socials { display: none; }
	
	.header .head-extra {
		display: inline-block;
		vertical-align: middle;
	}
	
	.header .city,
	.header .lang {
		display: inline-block;
	}
	
	.header .button {
		font-size: 14px;
		line-height: 32px;
		padding: 0 16px;
		margin: 0 24px
	}

	
}


/* FROM BSIC DESKTOP */

@media only screen and (min-width: 1180px) {
	
	.header .bigscreen { display: block }
	
	.header { margin: 20px 0; overflow: visible; }
	.header .mobnav { display: none; }
	
	/*.header:before {
		position: absolute;
		top: -20px;
		left: 0;
		width: 100%;
		height: 20px;
		background: var(--white);
		content: '';
	}*/
	
	.header nav,
	.header nav > div {
		display: inline-block;
		vertical-align: middle;
		position: relative;
	}
	
	.header .sub:after {
		bottom: 0;
		right: auto;
		left: 50%;
		transform: translateX(-50%) rotate(180deg) scale(0.6);
		filter: grayscale(1);
		z-index: 10;
		pointer-events: none;
	}
	
	.header .sub.detailed:after {
		transform: translateX(-50%) translateY(6px) rotate(180deg) scale(0.6);
		filter: grayscale(0)
	}
	
	.header .sub.detailed {
		color: var(--green);
	}
	
	
	.header nav a, .header nav .sub {opacity: 1; }
	.header nav > div { margin: 0 10px; }
	
	.header nav .navpanel {
		position: absolute;
		top: 100%;
		margin: 24px -24px;
		padding: 24px;
		background: #fff;
		box-shadow: 0px 10px 30px rgba(223, 223, 192, 0.8);
		border-radius: 12px;
	}
	
	.header nav .navpanel:before {
		position: absolute;
		width: 100%;
		height: 56px;
		top: -56px;
		left: 0;
		content: '';
	}
	
	.header .logo {
		left: 40px;
		top: 50%;
		transform: translateY(-50%);
		width: 100px;
	}
	
	.header.fixed .logo { width: 72px; }
	
	.header nav .sub { padding-right: 0 }
	.header nav .sub:before {display: none; }
			
}
		






/* NOTIFICATIONS */


.notifications {
	position: relative;
	z-index: 10000;
}

.notifications .notification {
	position: relative;
	box-sizing: border-box;
	padding: 20px 20px 20px 0;
	display: none;
}

.notification.yellow { background: var(--yellow) }
.notification .panel { max-width: 1180px; margin:0 auto; }

.notification .text {
	font-weight: 500;
	font-size: 16px;
}

.notification .close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 20px;
	height: 20px;
	line-height: 20px;
	font-size: 18px;
	color: var(--dark);
	cursor: pointer;
	text-align: center;
}

.notification .close:hover { color: #fff }
.notification .button { margin-top: 6px }



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

	.notification { text-align: center }
	.notification .text { display: inline-block }
	.notification .button { margin-left: 12px }
	
}


/* FOOTER */


footer {
	display: block;
	background: var(--dark);
	padding: 4px 0;
	text-align: center;
	color: #fff;
	font-size: 14px;
	line-height: 24px;
}

footer .logo {
	width: 100px;
	margin: 0 auto 24px;
}

footer .link {
	text-align: center;
	margin: 12px 0;
}

footer .nowrap { font-size: 13px }
footer .box { margin: 32px 0 }

footer .socials a { width: 36px; margin: 0 6px }
footer a.store { width: 140px; margin: 0 6px }

footer a {
	display: inline-block;
	margin: 0 8px;
	color: #fff;
	text-decoration: none;
}




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

	footer .wrap {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 0 20px;
	}
	
	footer .box { padding: 0 20px }
	footer a.store { display: block; margin: 8px 0 }
	
	footer .logo, footer .link {
		display: inline-block;
		margin: 8px 0;
		vertical-align: middle;
	}

	footer .link { text-align: left }
	footer .logo { margin-right: 20px }

}


@media only screen and (min-width: 1420px) {
	
	.notification .panel, .header .panel {
		max-width: 1360px;
	}
}