@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

@view-transition { navigation: auto; }

/* colors and font sizes */

:root {
	--white: #F4F5F8;
	--lightgrey: #E9EAEA;
	--halfgrey: #B6B8BA;
	--grey: #6E7176;
	--black: #05171D;  
	--beige: #E9E5DC;

	--green: #009992;
	--blue: #164194;
	--cyan: #00B1EB;
	--red: #CC1719;
	--pink: #E5007E;
	--orange: #EB6608;
	--yellow: #F7AC00;

	--gradientgreen: linear-gradient(to bottom, #007a73, #00afa9);
	--gradientblue: linear-gradient(to bottom, #102e7d, #3969b2);
	--gradientcyan: linear-gradient(to bottom, #0096e2, #00c3f0);
	--gradientred: linear-gradient(to bottom, #b80d0e, #d82e31);
	--gradientpink: linear-gradient(to bottom, #d9005e, #eb0098);
	--gradientorange: linear-gradient(to bottom, #e24804, #f08413);
	--gradientyellow: linear-gradient(to bottom, #f39100, #f9be00);
	--gradientblack: linear-gradient(to bottom, #030d10, #0c2e37);
	--gradientbeige: linear-gradient(to bottom, #9DA198, #C8CBC5);
	--gradientbeige2: linear-gradient(to bottom, #DFD9CD, #EEEBE4);

	--small: 13px;
	--norm: 16px;
	--norm2: 18px;

	--title1: 48px;
	--title2: 36px;
	--title3: 30px;
	--title4: 24px;
	--title5: 21px;
}

.s-red { background: var(--red); }
.s-yellow { background: var(--yellow); }
.s-blue { background: var(--blue); }
.bg-green { background: var(--gradientgreen); }
.bg-blue { background: var(--gradientblue); }
.bg-cyan { background: var(--gradientcyan); }
.bg-red { background: var(--gradientred); }
.bg-pink { background: var(--gradientpink); }
.bg-orange { background: var(--gradientorange); }
.bg-yellow { background: var(--gradientyellow); }
.bg-black { background: var(--gradientblack); }
.bg-beige { background: var(--gradientbeige); }
.bg-grey { background: var(--gradientbeige); }

/**********/

.poppins {
	font-family: "Poppins", sans-serif;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
}

body {
	-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
	margin: 0;
	padding: 0;
	font-family: Poppins, sans-serif;
	font-size: var(--norm);
	color: #05171D;
	background: var(--white);
	background-size: 100% auto;
}

a { transition: all 1s; transition: all 0.5s; text-decoration: none; color: #000; }
	a:hover, a:active { color: #666666; text-decoration: none; }
p:empty { display: none; }
b, strong { font-weight: 600; }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4,h5 { font-family: 'Poppins', sans-serif; margin: 0 0 20px; text-wrap-style: balance; }
	h1 { text-transform: uppercase; font-size: var(--title1); line-height: 120%; font-weight: 5700; }
	h2 { margin-top: 0; font-size: var(--title2); line-height: 120%; font-weight: 700; }
	h3 { font-size: var(--title3); font-weight: 700; margin: 60px 0 30px; }
blockquote { font-size: 18px; }

.videoWrapper { position: relative; display: flex; justify-content: center; width: 100%; height: 100%; }
	.videoWrapper iframe { aspect-ratio: 16 / 9; height: 100% !important; }

/* help
.container { border-left: 1px dotted yellow; border-right: 1px dotted yellow; }
.container > .row { border-left: 1px dashed green; border-right: 1px dashed green; }
.container > .row > * { border-left: 1px dashed cyan; border-right: 1px dashed cyan; } */

.main_content ul, .main_content ol { padding: 0 0 0 40px; border-left: 1px solid #ddd; margin: 0 0 30px 15px; }
	.main_content ul li, .main_content ol li { margin: 0 0 5px; }
.main_content hr { margin: 30px 10px 50px; background: none; border-bottom: 5px double #aaa; }
	.main_content hr.alt { margin: 30px 10px 50px; background: none; border-bottom: 2px dashed #666; }

/* posts */

.category-archive .row { gap: 45px; }
	.category-archive .imgcont { border-radius: 10px; }
	.category-archive .post { width: calc(100% / 3 - 30px) !important; padding: 0; }
	.category-archive .sticky { background: linear-gradient(0deg, #eaeaea, transparent); padding: 20px; border-radius: 10px; overflow: hidden; }
	.category-archive .sticky .imgcont { margin: -20px -20px 0; }
	.category-archive .sticky > *:not(.imgcont) {}

.post { margin: 30px 0; opacity: 0; animation: fadeInUp 0.5s forwards; animation-delay: calc(sibling-index() * 0.1s); }
	.post .imgcont { aspect-ratio: 16/9; overflow: hidden; display: flex; align-items: center; }
		.post .imgcont img { width: 100%; height: auto; }
	.post h3 { margin: 10px 0 20px; color: var(--blue); font-size: 1.5rem; }
		.post h3 a { color: var(--blue); }
	.post small { font-weight: bold; color: var(--halfgrey); text-transform: uppercase; font-size: 12px; display: table; margin: 20px 0 10px; }
	.post p { color: var(--grey); }
	a.rmore { text-transform: uppercase; font-weight: bold !important; font-size: 15px; margin: 10px 0 10px; color: var(--blue); }

	.featured-image-wrap img { display: block; width: 100%; margin: 0 0 30px; }

.social-share-wrapper { background: #eee; border-radius: 10px; display: flex; justify-content: space-between; padding: 20px; margin: 30px 0 0; } 
	.social-share-wrapper h4 { font-size: 15px; text-transform: uppercase; margin: 0; line-height: 200%; }
		.social-share-buttons { display: flex; gap: 30px; align-items: center; }
			.social-btn { width: 20px; height: 20px; display: inline-block; overflow: hidden; background-repeat: no-repeat; line-height: 200px; transition: all 0.5s; }
				.social-btn.facebook { background-image: url(../img/soc_facebook.svg); }
				.social-btn.linkedin { background-image: url(../img/soc_linkedin.svg); }
				.social-btn.email { background-image: url(../img/soc_email.svg); }
				.social-btn.twitter { background-image: url(../img/soc_ex.svg); }
			.social-share-buttons:hover .social-btn { opacity: 0.5; }
			.social-share-buttons:hover .social-btn:hover { opacity: 1; }

/* pagination */

.sp { text-align: center; padding: 45px 0 15px; }
	.sp .prev, .sp .next { display: none !important; }
	.sp span, .sp a.page-numbers { color: #0056A3; border: 1px solid; padding: 6px 12px; margin: 0 8px; text-decoration: none; display: inline-block; }
		.sp a.page-numbers:hover { color: var(--white); background: #0056A3; }
		.sp a.page-numbers:after { display: none; }
	.sp span { color: #ccc; }

/* NAVIGATION */

.topbar {}
	.topbar .row { color: var(--white); padding: 20px; justify-content: space-between; align-items: center; gap: 30px; }
	.topbar p { width: 0; font-size: 15px; margin: 0; flex: 1 1 auto; }
	.topbar a.button {
		background: var(--white); font-weight: 500; padding: 5px 15px; border-radius: 100px; width: auto; font-size: 15px;
	    display: flex; align-items: center; gap: 10px;
	}
	.topbar a.button img { height: 24px; }
	.topbar a.button:hover { transform: scale(1.1); }

.show-menu { width: 36px; height: 18px; cursor: pointer; z-index: 99999; margin-left: 30px; position: relative; }
	.show-menu .menu-icon__cheeckbox {
		display: block; width: 100%;height: 100%; position: relative; cursor: pointer; z-index: 2; -webkit-touch-callout: none; position: absolute; opacity: 0;
	}
	.show-menu div { margin: auto; position: absolute; top: 0; right: 0; left: 0; bottom: 0; width: 36px; height: 18px; }
	.show-menu span { position: absolute; display: block; width: 36px; height: 2px; background-color: #353535; transition: all 0.2s; top: 8px; right: 0; }
		.show-menu span:first-of-type { top: 0; }
		.show-menu span:last-of-type { top: 16px; width: 50%; left: 0; }
	body.showmenu { overflow-y: hidden; }
	body.showmenu .show-menu span { opacity: 0; }
	body.showmenu .show-menu span:first-of-type { transform: rotate(45deg); top: 1px; opacity: 1; background-color: var(--white); }
	body.showmenu .show-menu span:last-of-type { transform: rotate(-45deg); top: 1px; opacity: 1; background-color: var(--white); width: 100%; }
	.show-menu:hover span { background-color: var(--cyan); }
		body.kisvallalkozo .show-menu:hover span { background-color: var(--orange); }
		body.vallalat .show-menu:hover span { background-color: var(--green); }
	.show-menu a, .show-menu b {
	position: absolute; color: #000; background: #fff; width: 15px; height: 15px; border-radius: 15px; line-height: 15px;
	font-size: 8px; text-align: center; top: 28px; left: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.5); text-decoration: none; z-index: 99999;
	}
	body.showmenu header .logo { opacity: 0; pointer-events: none; }

#navigation { position: relative; }
#navigation ul { display: flex; gap: 10px; margin: 0; align-items: center; }
	#navigation li { list-style: none; padding: 0; }
		#navigation li a { font-size: 15px; font-weight: bold; transition: all 0.5s; color: #353553; position: relative; padding: 0 10px; }
		#navigation .main-menu:hover li a { opacity: 0.5; filter: blur(2px); }
		#navigation .main-menu:hover li:hover a { opacity: 1; filter: blur(0); }
	#navigation li.gomb a { background: var(--cyan); color: var(--white); padding: 8px 16px; border-radius: 32px; }
	#navigation li.gomb a:hover { background: var(--orange); }
	#navigation ul.sub-menu {
		position: absolute; z-index: 9999; opacity: 0; visibility: hidden; transition: all 0.5s;
		transition-timing-function: cubic-bezier(0.5, 0.05, 0.05, 1.15); transform: translateY(-42px) rotate3d(1, 0, 0, 90deg) perspective(800px) rotate(-10deg);
    	background: var(--cyan); border-radius: 5px; box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.225);
    	flex-direction: column; gap: 10px; align-items: flex-start; padding: 15px; margin: 0 0 0 10px;
	}
	#navigation li:hover ul.sub-menu {
		transform: translateY(0px) rotate3d(1, 0, 0, 0deg) perspective(800px) rotate(0deg); opacity: 1; visibility: visible; display: flex;
	}
	#navigation ul.sub-menu li { width: 100%; }
	#navigation ul.sub-menu li a { color: var(--white); display: block; line-height: 100%; padding: 6px 12px; }
		#navigation ul.sub-menu li a:hover { color: var(--black); }
	body.kisvallalkozo #navigation ul.sub-menu { background: var(--orange); }
	body.vallalat #navigation ul.sub-menu { background: var(--green); }

.search-btn { width: 20px; height: 20px; display: inline-block; overflow: hidden; margin-left: 20px; }

/* HEADER */

.search-overlay {
	position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(20px); z-index: 999999;
	transition: all 1s; display: flex; justify-content: center; align-items: center;
}
.search-overlay input[type='text'], .search-overlay input[type='search'] {
	padding: 20px; width: 50vw; border: none; border-radius: 100px; box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}
.search-overlay input[type='submit'] {
	background: var(--red) url(../img/white_search.svg) no-repeat; width: 70px; height: 70px; border-radius: 100px; border: none; font-size: 0;
	background-size: 20px; background-position: center; transform: translate(5px, -5px); box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
}
.search-close { font-size: 60px; font-weight: bold; transform: rotate(45deg); position: absolute; top: 10px; right: 30px; color: var(--grey); }
.search-results article { display: flex; flex-direction: row; gap: 20px; }
	.search-results article .imgcont { width: 25%; }
	.search-results article div { width: 75%; }

.hidden { display: none; }

header { width: 100%; }
	header .logo { position: relative; display: block; }
		header .logo img { max-width: 250px; max-height: 70px; margin: 20px 0 30px; }
		header .logo span { font-size: 7px; color: #aaa; position: absolute;  bottom: 27.5px; left: 0; }
	header .col-9 { display: flex; justify-content: flex-end; align-items: center; gap: 50px; padding-bottom: 30px; }
	header .col-9 div { display: flex; }
	    #navigation .secnav { list-style: none; display: flex; gap: 5px; }
	    	#navigation .secnav li a {
	    		background: var(--orange); padding: 6px 18px; border-radius: 20px; font-weight: bold; font-size: 12px; text-transform: uppercase; color: #fff; opacity: 0.5;
	    	}
	    	#navigation .secnav li:first-child a { background: var(--cyan); }
	    	#navigation .secnav li:last-child a { background: var(--green); }
		body.lakossag #navigation .secnav li:nth-child(1) a { opacity: 1; }
		body.kisvallalkozo #navigation .secnav li:nth-child(1) a { opacity: 1; }
	    body.vallalat #navigation .secnav li:nth-child(3) a { opacity: 1; }
	    #navigation .secnav:hover a { opacity: 0.25 !important; }
	    #navigation .secnav:hover a:hover { opacity: 1 !important; }


.flex { display: flex; flex-direction: row; justify-content: space-between; }
body.home hr { display: none; }

/* SLIDESHOW */

.slideshow {}
	.slideshow .slide { display: flex !important; justify-content: space-between; align-items: center; }
		.slideshow .slide > div:first-child { display: flex; flex-direction: column; max-width: 50%; gap: 40px; font-size: 18px; align-items: baseline; }
		.slideshow .slide > div:first-child div { display: flex; flex-direction: column; gap: 20px; }
		.slideshow .slide h4 { font-size: 48px; font-weight: 700; line-height: 110%; }
		.slideshow .slide a {
			color: var(--white); padding: 12px 18px; font-size: 14px; font-weight: bold; border-radius: 3px;
			text-transform: uppercase; transition: all 0.5s; display: flex; align-items: center;
		}
		.slideshow .slide a:hover { background: var(--gradientgreen); }
		.slideshow .slide a img { margin-right: 10px; height: 24px; }
		.slideshow .slide div + div img { max-height: 80vh; width: auto; }
.slick-arrow {
	position: absolute; top: calc(50% - 15px); background: url(../img/grey_arrow.svg); height: 30px; width: 30px; overflow: hidden; border: none;
	background-size: contain; line-height: 100px; opacity: 0.25;
}
.slick-arrow.slick-prev { transform: rotate(180deg); left: -100px; }
.slick-arrow.slick-next { right: -100px; }
.slick-dots { margin: 0 auto; display: table; padding: 0; }
	.slick-dots li { list-style: none; float: left; margin: 0 5px; position: relative; }
		.slick-dots li button {
			height: 12px; width: 12px; color: #fff; font-weight: bold; text-align: center; line-height: 30px; overflow: hidden; font-size: 0px;
			border-radius: 30px; border: none; background: #6f7177; opacity: 0.25; transition: all 0.5s;
		}
		.slick-dots li.slick-active button { opacity: 1; width: 50px; background: #aaa; }
		/* .slick-dots li.slick-active:before {
			content: ''; background: #666; width: 12px; height: 12px; display: block; position: absolute; top: 5.5px; left: 0; border-radius: 6px;
			animation: resizeW; animation-duration: 10s;
		}
		@keyframes resizeW {
			0% { width: 12px; }
			100% { width: 100%; }
		} */
		.slick-arrow:hover .slick-dots li button:hover { opacity: 1; }

.aposts { padding: 30px; background: #eee; border-radius: 10px; }
	.aposts .flex { gap: 30px; }
	.aposts .flex article { width: calc(100% / 3 - 20px); }
		.aposts a.imgcont { aspect-ratio: 16 / 9; overflow: hidden; display: block; border-radius: 10px; }
		.aposts h3 { margin: 20px 0; }
			.aposts h3 a { display: block; font-size: 24px; color: var(--blue); line-height: 120%; }
		.aposts p { color: var(--grey); font-size: 15px; line-height: 125%; }

/* PAGE */

.page_title { background: var(--beige); padding: 30px; margin: 0 0 50px; }
	.page_title h1 { margin: 0; font-weight: 300; text-transform: none; letter-spacing: -1px; margin: 0; }
	.page_title h1 + small { margin: 10px 0 0; opacity: 0.42; mix-blend-mode: luminosity; }

.intro { padding: 60px 0; }
	.intro .row { justify-content: center; align-items: flex-end; }
	.intro h2 { font-size: 36px; font-weight: 700; margin: 0 0 60px; }
	.intro .frontnum {
		background: #B6E4F5; border-radius: 10px; color: var(--blue); text-align: center; display: flex; align-items: center; justify-content: flex-end;
		flex-direction: column; line-height: 135%; padding: 20px; max-width: 150px; margin: 0 10px; font-size: 14px; gap: 30px; height: 210px;
	}
	.intro .frontnum:nth-of-type(2) { height: 180px; }
	.intro .frontnum:nth-of-type(3) { height: 150px; }
	.intro .frontnum img { width: 30px; }
	.intro .frontnum strong { display: block; font-size: 30px; margin-bottom: 5px; }
body.kisvallalkozo .intro .frontnum { background: hsla(from var(--orange) h s l / 0.25); color: var(--orange); }
	body.kisvallalkozo .intro .frontnum img { filter: invert(51%) sepia(51%) saturate(2983%) hue-rotate(354deg) brightness(91%) contrast(104%); }
body.vallalat .intro .frontnum { background: hsla(from var(--green) h s l / 0.25); color: var(--green); }
	body.vallalat .intro .frontnum img { filter: invert(45%) sepia(99%) saturate(2862%) hue-rotate(149deg) brightness(88%) contrast(101%); }

.sselector {}
	.sselector .col-1 img { opacity: 0.3; }
	.sselector .cities {}
		.sselector .select2-container { width: 300px !important; }
		.sselector .select2-container--default .select2-selection--single { border: none; border-radius: 5px; padding: 5px; height: auto; margin: 0 5px; }
		.sselector .select2-container--default .select2-selection--single .select2-selection__arrow { top: 5px; right: 10px; }
		.select2-container--default .select2-search--dropdown .select2-search__field { border-radius: 5px; outline: none; }
		.select2-container--open .select2-dropdown--below { width: 290px !important; border: none; padding: 10px; margin-left: 5px; }
	.sselector .packs, .sselector .offices { border: none; width: 300px; border-radius: 5px; padding: 5px; outline: none; margin: 0 5px; }
	.sselector .col-5, .sselector .col-6 { flex-direction: row; display: flex; margin: 0; align-items: center; gap: 15px; }
	.sselector .col:first-child { justify-content: flex-start; }
	.sselector .col:last-child { justify-content: flex-end; }
	.sselector input, .sselector #result {
		border: none; border-radius: 5px; padding: 6px 12px; margin: 0 5px; width: 300px; outline: none; background: var(--white); height: 42px;
	}
	#result { display: flex; align-items: center; }
	#map { width: 100%; height: 500px; }

.services { padding: 60px 0; }
	.services .row .col-6:first-of-type { padding-right: 60px; }
	.services .row .col-6:first-of-type img { width: 100%; border-radius: 10px; }
	.services .row .col-3 { display: flex; flex-direction: column; justify-content: center; }
	.servicebox {
		color: var(--white); font-weight: 300; line-height: 120%; padding: 30px; border-radius: 10px; margin: 20px 10px;    
		display: flex; break-inside: avoid; flex-direction: column; align-items: flex-start; font-size: 18px;
	}
	.servicebox img { display: table; height: 36px; margin: 0 0 30px; }
	.servicebox strong { display: inline; font-weight: 900; }
.pcomp { padding: 30px auto; }
	.pcomp h5 { font-size: 2rem; font-weight: 500; margin: 50px auto 30px; width: 75%; text-align: center; }
	.pcomp table { width: 100%; }
		.pcomp table tr td { padding: 10px 15px; border-bottom: 1px solid var(--beige); min-width: 100px; }
		.pcomp table tr td:first-child { background: var(--beige); }
		.pcomp table tr:first-child td { border-radius: 10px 10px 0 0; }
		.pcomp table tr:last-child td { border-radius: 0 0 10px 10px; }
	.resptable { width: 100%; overflow-y: scroll; }
	.order {
		background: #fff; border-radius: 10px; padding: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px;
		margin: 30px calc(var(--bs-gutter-x) * 0.5); width: calc(100% - var(--bs-gutter-x));
	}
	.order h4 { font-size: 2rem; }
	.order label { color: var(--grey); font-size: 2rem; margin: 20px 0; }
	.order label small { color: var(--halfgrey); font-size: 1rem; display: block; text-transform: uppercase; }
	.order input { border: none; padding: 15px; border-radius: 5px; background: var(--lightgrey); display: table; width: 60%; transition: all 0.5s; }
	.order input:focus { outline: none; background: var(--halfgrey); }
	.order a, .order input[type='submit'] {
		background: var(--cyan); color: var(--white); padding: 15px 30px; border-radius: 100px; display: inline-block; font-weight: 700;
		width: auto; text-transform: uppercase; margin-right: 5px;
	}
	.order a.btn-prev { background: var(--halfgrey); opacity: 0.5; }
	.order a:hover, .order input[type='submit']:hover { background: var(--orange); }
	.order a.btn-prev:hover { background: var(--halfgrey); opacity: 1; }
	.order .wpcf7-checkbox { display: flex; gap: 20px; }
	.order .wpcf7-checkbox label { display: flex; gap: 5px; font-size: 16px; }
	.order input[name='your-service'] { background: linear-gradient(90deg, transparent, #eee); color: #ccc; padding: 10px 20px; border-radius: 0; float: right; margin: -80px -50px 0 0; text-align: right; font-size: 14px; width: 50%; }

.szamla { padding: 30px 0; }
	.szamla .col-3 p { margin: 0; }
		.szamla .col-3 img { width: 100%; border-radius: 10px; }
	.szamla .bluebanner {
		display: flex; justify-content: space-between; align-items: center; height: 100%; padding: 0 0 0 50px; color: var(--white);
		background: var(--gradientcyan); border-radius: 10px;
	}

.promotions { padding: 30px 0 0; }
	.promotions .col-4 { display: flex; flex-direction: column; justify-content: center; padding-right: 60px; }
	.promotions .col-4 p { color: var(--grey); }
	.promotions .promos { display: flex; flex-wrap: wrap; gap: 20px; }
		.promotions .promos .promo { width: 100%; border-radius: 10px; color: var(--white); overflow: hidden; padding: 30px; position: relative; }
			.promotions .promos .promo.double { padding: 30px 40% 100px 30px; }
			.promotions .promos .promo.double h4 { font-size: var(--title1); }
			.promotions .promos .promo.double a {
				color: var(--white); background: transparent; padding: 5px 10px; border-radius: 3px; border: 1px solid; font-weight: 700;
				display: table; margin: 20px 0; font-size: 13px; text-transform: uppercase;
			}
			.promotions .promos .promo.double img { position: absolute; right: 50px; bottom: -100px; }
		.promotions .promos .promo.half { width: calc(50% - 10px); font-weight: 300; }
			.promotions .promos .promo.half a { color: var(--white); }
			.promotions .promos .promo.circleimage h4 .ci { width: 90px; height: 90px; border-radius: 90px; overflow: hidden; flex-grow: 0; flex-shrink: 0; }
				.promotions .promos .promo.circleimage h4 .ci img { height: 100%; max-width: none; }
			.promotions .promos .promo.circleimage h4 { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
			.promotions .promos .promo.notitle a { color: var(--black); width: 60%; display: block; line-height: 135%; font-size: 17px; }
			.promotions .promos .promo.notitle a small { display: block; margin: 20px 0; font-size: 13px; line-height: 120%; }
			.promotions .promos .promo.notitle img { position: absolute; top: 0; height: 100%; width: auto; right: 0; }
    		.promotions .promos .promo.bgimage { background-size: cover; background-position: center; }
				.promotions .promos .promo.bgimage a { height: 100%; width: 100%; display: flex; align-items: flex-end; }
					.promotions .promos .promo.bgimage h4 {
						color: var(--black); font-size: 21px; font-weight: 600; margin: 0; transform: translateY(10px); text-align: center;
					}
		.promos .fullbox {}
			.promos .fullbox span.row { width: 100%; }
			.promos .fullbox span { width: auto; display: flex; }
			.promos .fullbox span.button {
				border: 2px solid; padding: 4px 15px; border-radius: 50px; display: inline-block; text-transform: uppercase;
				font-weight: bold; font-size: 14px;
			}
		    .promos .fullbox span.button img { height: 20px; margin-right: 5px; }

form label {  color: var(--grey); font-weight: bold; font-size: 13px; padding: 10px 3px; }
form .wpcf7-list-item { margin: 0 1em 0 0; }
input, textarea { border: 1px solid #ccc; padding: 15px; border-radius: 5px; background: #f0f0f0; display: table; width: 100%; transition: all 0.5s; }
input:focus { outline: none; background: var(--lightgrey); }
input[type='submit'] {
	background: var(--green); color: var(--white); padding: 15px 30px; border-radius: 100px; display: inline-block; font-weight: 700;
	border: none; width: auto; text-transform: uppercase; margin-right: 5px;
}
input[type='submit']:hover { background: var(--black); }
input[type=radio] { position: absolute; opacity: 0; height: 30px; z-index: 999; cursor: pointer; margin-left: -25px; }
input[type=radio] + span {
	float: left; position: relative; display: inline-block; padding: 0 0 0 30px; line-height: 100%;
	font-weight: normal; text-transform: none; font-size: 15px; width: auto; transition: all 1s;
}
input[type=radio] + span:before {
	-webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; content: ''; position: absolute; width: 20px; height: 20px;
	border-radius: 20px; border: 3px solid var(--grey); margin: -2px 0 0 -25px; box-sizing: border-box; pointer-events: none;
}
input[type=radio]:checked + span { color: var(--green); }
input[type=radio]:checked + span:before { border: 8px solid var(--green); }

.vallalat-intro .row { align-items: flex-start; }
	.vallalat-intro .row .col-8 h3 { margin-top: 0px; }
		.vallalat-intro .row .col-8 > p, .vallalat-intro .row .col-8 form { max-width: 90%; }
	.vallalat-intro .row .col-4 { background: var(--gradientgreen); color: var(--white); padding: 30px; border-radius: 10px; }
	.vallalat-intro .row .col-4 h3 { margin-top: 0px; font-size: 27px; }

/* BENTO */

.sselector { background: var(--gradientbeige2); border-radius: 10px; padding: 30px; margin: 0 0 10px; }
.bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); grid-column-gap: 10px; grid-row-gap: 10px; }
.bento.hidden { display: none; }
	.bento > div { border-radius: 10px; padding: 30px; color: var(--white); font-size: 15px; line-height: 120%; }
	.bento > div { display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; }
		.box-yellow { grid-area: 1 / 1 / 2 / 2; background: var(--gradientyellow); }
		.box-orange { grid-area: 1 / 2 / 2 / 4; background: var(--gradientorange); }
			.box-orange h3 { font-size: 3.5rem; line-height: 100%; margin: 10px 0; letter-spacing: -1px; text-transform: uppercase; font-weight: 500; }
			.box-orange h3 + span { font-size: 1.5rem; }
			.box-orange h3 b { font-size: 2rem; }
			.box-orange h3 b small { font-size: 1rem; display: block; margin: -10px 0 20px; }
		.box-pink { grid-area: 1 / 4 / 3 / 5; background: var(--gradientbeige); }
			.box-pink h4 { font-weight: 700; font-size: 1.25rem; margin: 20px 0; color: var(--black); }
			.box-pink p { line-height: 150%; color: var(--black); }
		.box-green { grid-area: 2 / 1 / 3 / 2; background: var(--gradientgreen); }
			.box-green img + span, .box-red img + span { margin: 20px 0 0; }
			.box-green span, .box-red span { text-transform: uppercase; font-weight: 700; }
			.box-green h2, .box-red h2 { font-size: 5rem; font-weight: 300; margin: 0; letter-spacing: -3px; line-height: 100%; }
		.box-red { grid-area: 2 / 2 / 3 / 3; background: var(--gradientred); }
		.box-blue { grid-area: 2 / 3 / 4 / 4; background: var(--gradientblue); }
			.box-blue h4 { font-weight: 700; font-size: 1.25rem; margin: 20px 0; }
		.box-lightblue { grid-area: 3 / 1 / 4 / 3; background: var(--gradientcyan); }
			.box-lightblue img + span { text-transform: uppercase; font-weight: 700; margin: 20px 0 0; }
			.box-lightblue h2 { font-size: 5rem; font-weight: 300; margin: 0; letter-spacing: -3px; line-height: 100%; }
			.box-lightblue span img { height: 18px; transform: translate(-3px, -1px); }
		.box-black { grid-area: 3 / 4 / 4 / 5; background: var(--gradientblack); }
			.box-black a { background: var(--white); padding: 10px 20px; border-radius: 100px; font-weight: 700; }
			.box-black img { margin: 20px 0; }
.bento2 { grid-template-rows: auto; }
	.bento2 .box-yellow { grid-area: 1 / 1 / 2 / 4; }
		.bento2 .box-yellow h2 { font-size: 3rem; margin: 0; }
		.bento2 .box-yellow img + b { font-size: 1rem; font-weight: 700; display: inline-block; margin: 20px 0 0; }
	.bento2 .box-blue { grid-area: 1 / 4 / 3 / 5; }
		.bento2 .box-blue img + b { margin: 20px 0 10px; }
		.bento2 .box-blue p { font-weight: 700; }
		.bento2 .box-blue p span { margin: 5px 0 -3px; display: block; text-transform: uppercase; opacity: 0.65; font-weight: 500; }
	.bento2 .box-orange { grid-area: 2 / 1 / 3 / 2; }
		.bento2 .box-orange p b { display: block; margin: 20px 0 0; }
	.bento2 .box-green { grid-area: 2 / 2 / 3 / 3; }
		.bento2 .box-green span { text-transform: none; font-weight: 300; margin: 20px 0; }
		.bento2 .box-green a { background: var(--white); padding: 10px 20px; border-radius: 100px; font-weight: 700; }
	.bento2 .box-red { grid-area: 2 / 3 / 3 / 4; }
		.bento2 .box-red h3 { font-size: 3rem; margin: 0; }
	.bento2 .box-lightblue { grid-area: 3 / 1 / 4 / 4; padding: 0; overflow: hidden; box-shadow: 0 0 0 1px var(--cyan); }
	.bento2 .box-black { grid-area: 3 / 4 / 4 / 5; }
.bento > div { opacity: 0; animation: fadeInUp 0.5s forwards; animation-delay: calc(sibling-index() * 0.25s); }
.bento.b-tel { grid-template-rows: auto; }
	.bento.b-tel .box-green h2 + span, .bento.b-tel .box-red h2 + span { text-transform: none; }
	.bento.b-tel .box-green h2 + span small, .bento.b-tel .box-red h2 + span small, .bento.b-tel .box-blue h2 + span small  { opacity: 0.75; font-weight: 300; }
	.bento.b-tel .box-blue { grid-area: 2 / 3 / 3 / 4; }
		.bento.b-tel .box-blue img + span { margin: 20px 0 0; }
			.bento.b-tel .box-blue span { font-weight: 700; }
			.bento.b-tel .box-blue h2 { font-size: 5rem; font-weight: 300; margin: 0; letter-spacing: -3px; line-height: 100%; }
	.bento.b-tel .box-pink { background: var(--gradientbeige); color: var(--black); }
		.bento.b-tel .box-pink p { font-weight: 300; line-height: 135%; }
			.bento.b-tel .box-pink p b { font-weight: 700; }
	.bento.b-tel .box-lightblue { grid-area: 3 / 1 / 4 / 4; }
.bento.b-tv { grid-template-rows: auto; }
	.bento.b-tv .box-orange h3 { font-size: 2.5rem; line-height: 100%; margin: 20px 0; }
	.bento.b-tv .box-red { grid-area: 3 / 1 / 4 / 5; display: block; text-align: left; width: 100%; background: #eee; }
		.bento.b-tv .box-red > div { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px;}
		.bento.b-tv .box-red b { display: block; font-size: 16px; color: var(--black); width: 100%; margin: 30px 0 20px; }
		.bento.b-tv .box-red b:first-child { margin-top: 0; }
		.bento.b-tv .box-red span { font-weight: 300; display: inline-block; width: 75px; aspect-ratio: 1 / 1; width: 75px; display: block; }
		.bento.b-tv .box-red span img {
			width: 100%; height: 100%; border-radius: 3px; overflow: hidden; background: #fff; max-width: 75px; border-radius: 100px; padding: 10px;
		}
		.bento.b-tv .box-red img + span {
			color: var(--black); text-transform: capitalize; font-size: 13px; text-align: center; padding: 5px 0 0; aspect-ratio: auto; margin: 0;
		}
	.bento.b-tv .box-blue { grid-area: 1 / 4 / 3 / 5; }
	.bento.b-tv .box-lightblue { grid-area: 2 / 1 / 3 / 3; }
		.bento.b-tv .box-lightblue p > span { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 0; font-size: 14px; justify-content: center; }
			.bento.b-tv .box-lightblue p span span { display: block; width: 23.5%; border: 1px solid; border-radius: 3px; padding: 5px; }
				.bento.b-tv .box-lightblue p span span b { display: block; }
	.bento.b-tv .box-black { grid-area: 2 / 3 / 3 / 4; }

/* CONTACT, PRIVACY POLICY & IMPRESSUM */

.mailbox {}
	.mailbox .row { display: flex; gap: 30px; }
		.mailbox .row > div { border: 1px solid; border-radius: 10px; width: calc(100% / 2 - 15px); padding: 30px 0 10px; text-align: center; }
			.mailbox .row div a {
				background: var(--cyan); color: var(--white); width: auto; padding: 15px 30px; border-radius: 100px; display: inline-block;
				font-weight: 700; text-transform: uppercase; margin: 20px 0 0;
			}
			.mailbox .row div a:hover { background: var(--orange); }

.faq {}
	.faq .flex { gap: 50px; }
		.faq .flex div { gap: 50px; opacity: 0; animation: fadeInUp 0.5s forwards; animation-delay: calc(sibling-index() * 0.1s); }
.doclist > div { opacity: 0; animation: fadeInUp 0.5s forwards; animation-delay: calc(sibling-index() * 0.1s); }
.doclist a { display: flex; align-items: flex-start; gap: 20px; }
	.doclist a b { color: var(--blue); display: block; }
		.doclist a small { color: var(--grey); font-weight: 300; }

.accordion-header {
	cursor: pointer; padding: 15px 0; font-weight: 500; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--halfgrey);
}
.accordion-header.active { transition: all 0.5s; }
.accordion-header:after { content: "+"; font-size: 27px; }
.accordion-content {
	transition: all 0.5s; height: 0; border: none; padding: 0; line-height: 135%; font-size: 15px; overflow: hidden; opacity: 0;
}
.accordion-header.active + .accordion-content { height: auto; opacity: 1; padding: 30px; background: var(--lightgrey); border-radius: 3px; margin: 10px 0; }
.accordion-content ul { margin: 0; }
.accordion-header.active:after { content: "-"; }


/* FOOTER */

.grecaptcha-badge { display: none; }

footer { background: url(../img/rainbow.svg) no-repeat bottom center; padding: 60px 0; color: var(--blue); }
	footer .container { border-top: 1px solid #849AC3; display: flex; justify-content: flex-start; align-items: flex-start; }
	footer .foottext { color: var(--blue); }
		footer img { height: 30px; margin: 30px 0; }
	footer .social a { color: var(--blue); font-size: 12px; font-weight: 700; text-transform: uppercase; }
		footer .social a img { height: 20px; margin: 0 10px 0 0; }
		footer .flex { align-items: center; justify-content: flex-start; gap: 30px; }
	footer .foottext { font-size: 14px; }
		footer .foottext a { color: #595959; text-decoration: none; margin-left: 15px; }
			footer .foottext a:hover { color: #aaa; border-bottom: 1px solid #595959; }
	footer .footnav ul { display: flex; gap: 15px; list-style: none; padding: 30px 0 0; justify-content: space-between; }
		footer .footnav > ul > li {
			opacity: 0; animation: fadeInUp 0.5s forwards; animation-delay: calc(sibling-index() * 0.5s);
		}
		footer .footnav ul li a { color: var(--blue); font-size: 13px; }
			footer .footnav ul > li > a { font-weight: 700; font-size: 14px; }
		footer .footnav ul ul { display: block; padding: 14px 0 0; }
			footer .footnav ul ul li a { color: var(--blue); font-weight: 400; }

.outer-nav { z-index: 99998; position: fixed; top: 0; right: -200vw; height: 100vh; width: 35vw; transition: all 0.5s; padding: 100px 50px; z-index: 1000; }
	.outer-nav > .container { z-index: 2; position: relative; }
	.outer-nav:after { content: ''; background: var(--gradientcyan); width: 100%; height: 100%; top: 0; right: 0; position: absolute; z-index: 1; } 
	.outer-nav:after { box-shadow: -50px 0px 100px rgba(0,0,0,0.5); } 
		body.kisvallalkozo .outer-nav:after { background: var(--gradientorange); }
		body.vallalat .outer-nav:after { background: var(--gradientgreen); }
	.outer-nav > ul { margin: 0 30px; }
		.outer-nav li { list-style: none; margin: 0 0 5px; }
			.outer-nav li a { color: var(--white); font-size: 18px; letter-spacing: -1px; padding: 0 0 5px; display: inline-block; }
		.outer-nav #menu-main-menu > li > a { font-weight: bold; }
		.outer-nav #menu-main-menu .sub-menu { gap: 0; display: flex; flex-direction: column; }
			.outer-nav #menu-main-menu .sub-menu li a { padding: 0; }
			.outer-nav #menu-main-menu .sub-menu a:after {
				content: ''; width: 0px; height: 1px; background: var(--white); display: block; transition: all 0.5s;
			}
			.outer-nav #menu-main-menu .sub-menu a:hover:after { width: 100%; }
	.outer-nav .secnav { margin-bottom: 50px; }
	.outer-nav .secnav li a {
		background: var(--white); color: var(--cyan); font-weight: bold; text-transform: uppercase; font-size: 14px; letter-spacing: 1px;
		border-radius: 50px; padding: 6px 18px; margin: 0 0 5px;
	}
	body.kisvallalkozo .outer-nav .secnav li a { color: var(--orange); }
	body.vallalat .outer-nav .secnav li a { color: var(--green); }
	.outer-nav .secnav:hover li a { opacity: 0.5; transition: all 0.5s; }
	.outer-nav .secnav:hover li a:hover { opacity: 1; }
body.showmenu .outer-nav { top: 0; right: 0; }

/******************** RESPONSIVE ********************/

/* sm - tablet (mobile first) */ @media (min-width: 640px) {}
/* md - tablet landscape or really small desktop screen */ @media (min-width: 768px) {}
/* lg - smaller desktop screen */ @media (min-width: 1024px) {}
/* xl - normal/big desktop screen */ @media (min-width: 1280px) {}
/* 2xl - huge screen or tv */ @media (min-width: 1536px) {}

/* Desktop only */
@media (min-width: 1024px) {

	.desktophide { display: none !important; }

}

/* Tablet or small screen */
@media (min-width: 641px) and (max-width: 1023px) {

	.desktophide { display: none !important; }

}

/* Mobile only */
@media (max-width: 640px) {

	.show-menu {
		position: absolute; top: 40px; right: 30px; background: #bbb; padding: 20px; width: 50px; height: 50px; border-radius: 60px;
		transform: scale(0.9) translate(20px, -25px); transition: all 0.5s; overflow: hidden; border-radius: 10px;
	}
	.show-menu span { background-color: var(--white); }
	.show-menu .menu-icon__cheeckbox:checked + div span:first-of-type, .show-menu .menu-icon__cheeckbox:checked + div span:last-of-type { top: 8px; }
	.show-menu:hover span { background-color: var(--black); }
	body.showmenu .show-menu { background: transparent; position: fixed; }
	.outer-nav { width: 85vw; padding: 40px 20px; }
		.outer-nav li a { font-size: 18px; padding: 0 0 5px; }
		.outer-nav #menu-main-menu .sub-menu { gap: 0; flex-direction: column; padding: 5px 0 15px 15px; }
		.outer-nav .secnav { margin-bottom: 50px; }
	body { font-size: 16px; line-height: 24px; }
	.mobilehide { display: none !important; }
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 100%; }
	section { padding: 20px !important; }
		section .container { padding: 0; }
	.page_title h1 { font-size: 27px; }
	h2 { font-size: var(--title4); }
	.topbar .row { gap: 10px; flex-direction: column; }
		.topbar p { text-align: center; margin: 0 0 10px; width: 100%; }
	header { position: relative; }
		header .col-9 { position: absolute; }
		header .logo span { bottom: 23px; }
	.slideshow { overflow: hidden; }
	.slideshow .slide { flex-direction: column-reverse; }
		.slideshow .slide div + div img { max-height: 75vh; max-width: 90vw; }
		.slideshow .slide > div:first-child { padding: 30px 0; max-width: 100%; }
		.slideshow .slide h4 { font-size: 36px; }
		.slideshow .slide * { max-width: 100%; text-align: center; margin: 0 auto; }
	.intro .frontnum { height: auto !important; margin: 0 5px 10px; }
	.services .row { margin: 0; }
	.services .row .col-6:first-of-type { padding: 0; }
		.services .row .col-3 { padding: 0; }
			.servicebox { margin: 0 0 10px; }
	.szamla .row { gap: 30px; }
	.szamla .bluebanner { padding: 30px 30px 150px; position: relative; }
		.szamla .bluebanner img { transform: rotate(90deg); bottom: 25px; left: 25%; position: absolute; height: 100px; }
	.promotions .col-4 { padding-right: 0; }
		h3 { margin: 0 0 30px; }
	.promotions .promos { flex-direction: column; }
		.promotions .promos .promo.double { padding-bottom: 150px; }
			.promotions .promos .promo.double h4 { font-size: 2rem; }
			.promotions .promos .promo.double img { right: 0; }
		.promotions .promos .promo.half { width: 100%; }
		.promotions .promos .promo.notitle a small { width: 150%; }
	.promos .fullbox span.row { width: auto; }
	.promos .fullbox .row span { text-align: center; gap: 10px; }
	footer { background-size: 50vw auto; padding: 20px; }
		footer .container { flex-direction: column; }
			footer .footnav ul { flex-direction: column; }
	.bento { display: flex; flex-wrap: wrap; }	
		.bento > div { width: 100%; }
		.box-yellow img { height: 50px; }
		.bento > .box-red, .bento > .box-green { width: calc(50% - 5px); }
		.box-blue { order: 1; }
		.box-pink { order: 2; }
		.box-black { order: 3; }
		.box-orange h3, .box-lightblue h2, .box-green h2, .box-red h2 { font-size: 3rem; }
			.box-orange h3 b { font-size: 1.75rem; display: block; line-height: 110%; margin: 20px 0 0; }
				.box-orange h3 b small { margin: 0 0 20px; }
		.bento2 .box-green, .bento2 .box-red { width: 100%; }
		.bento2 .box-yellow h2 { font-size: 2rem; }
		.bento2 .box-lightblue { order: 3; }
		.bento.b-tel .box-blue { width: calc(50% - 5px); }
			.bento.b-tel .box-blue h2 { font-size: 3rem; }
		.bento.b-tel .box-lightblue { width: calc(50% - 5px); order: 1; }
		.bento.b-tv .box-red { order: 5; }
		.bento.b-tv .box-lightblue p span span { width: 100%; }
	.sselector { padding: 20px; }
		.sselector .select2-container, .sselector .packs { width: 100% !important; margin: 10px 0 0; }
		.sselector .col { padding: 0; }
		.sselector .col-1 { display: flex; justify-content: center; }
		.sselector .col-5, .sselector .col-6 { flex-direction: column; align-items: flex-start; gap: 5px; }
		.sselector input, .sselector #result { margin: 0; }
		.sselector .col-1 img { transform: rotate(90deg); display: block; margin: 30px }
	.pcomp { padding: 20px; } 
		.pcomp h5 { font-size: 1.5rem; width: 100%; }
		.comptable td {}
		.comptable b { display: block; line-height: 110%; }
	.order { padding: 30px; margin: 30px 20px; width: calc(100% - 40px); }
		.order h4 { margin: 60px 0 0; }
		.order label { line-height: 110%; }
		.order input { width: 100%; }
		.order a, .order input[type='submit'] { font-size: 15px; letter-spacing: -0.5px; padding: 6px 12px; text-transform: none; margin-top: 5px; }
		.order input[name='your-service'] {
			background: none; border: 1px solid; border-radius: 50px; padding: 5px 10px; width: 100%; float: left; text-align: center; margin: -110px 0 0;
		}
		.order .wpcf7-checkbox { flex-direction: column; gap: 5px; align-items: flex-start; }
		.order .wpcf7-checkbox label { margin: 5px 0; }
		.order .wpcf7-checkbox .wpcf7-list-item { margin: 3px; }
	.faq .flex { flex-direction: column; }
	.category-archive .row { flex-direction: column; }
		.category-archive .post { width: calc(100% - 60px) !important; margin: 0 30px; }
	body.single .main_content .row { padding: 0 20px; }
		body.single .main_content .row .post { margin: 0; }
		.page_title { margin: 0; }
		.social-share-wrapper { flex-direction: column; align-items: center; gap: 10px; }
	.aposts { background: none; }
	.aposts .flex { flex-direction: column; }
		.aposts .flex article { width: 100%; }
			.aposts h3 a { font-size: 21px; }
}