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




		
	/*							*/
	/*							*/
	/* BLOG LIST 				*/
	/*							*/
	/*							*/
	
	html[lang="hu"] .search-field > em:before { content:"Keresés:"; }
	html[lang="en"] .search-field > em:before { content:"Search:"; }

	html[lang="hu"] .no-blog-items:before { content:"Nem találhatóak tudástár bejegyzések."; }
	html[lang="en"] .no-blog-items:before { content:"No knowledge base entries found."; }
	
	html[lang="hu"] .b-action-b:before { content:"Tovább olvasok.."; }
	html[lang="en"] .b-action-b:before { content:"Read more..."; }


	/* blog title and filter */
	
	.blog-header {
		display: block;
		outline: 1px solid orange;
		outline: none;
		margin-top: 50px;
		margin-bottom: 50px;
	}
	.blog-header h1 {}
	.blog-header h1 i {
		display: inline-block;
		vertical-align: middle;
		font-size: 0.8em;
		margin-right: 5px;
	}
	.blog-header h1 i:before { content:"\E9D8"; }
	.blog-header h1 em {}
	.blog-header .b-h-f {
		display: block;
		position: relative;
		float: right;
		width: auto;
		height: 30px;
		margin: 0 0 -30px 0;
		top: -20px;
		text-align: right;
		transform: translateY(-100%);
		white-space: nowrap;
		background-color: yellow;
		background-color: transparent;
	}
	.blog-header form[name="filter"] {
	
	}
	.blog-header .b-h-f label.search-field {}
	.blog-header .b-h-f label.search-field i {}
	.blog-header .b-h-f label.search-field em {
		font-size: 1.5rem;
		margin: 0 10px 0 0;
		/* font-family:TeamCompass-Light; */
		font-weight:normal;
		font-style:normal;
		opacity: 0.5;
	}
	.blog-header .b-h-f label.search-field input {
		border: none;
		font-size: 1.5rem;
		padding: 8px 15px;
		border-radius: 25px;
		box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.25);
		outline: none;
		background-color: var(--brand_blue_25);
		color:var(--brand_blue);
		width: 300px;
	}
	.blog-header .b-h-f label.search-field input:focus {
		box-shadow: inset 0 0 5px 0 rgba(0,0,0,0.25), 0 0 0 1px var(--brand_blue);
		outline: none!important;
	}
	.blog-header .blog-page-title {
		margin-right: 5px;
		margin-bottom: 25px;
		font-size: 4rem;
	}
	.blog-header .blog-page-title:after {
		content:" | címke: ";
		font-weight: normal;
	}
	.blog-header:has(.selected-tag:empty) .blog-page-title:after { display: none; }
	.blog-header:has(.selected-tag:empty) .selected-tag { display: none; }
	.blog-header:has(.selected-tag:empty) .clear-selected-tag { display: none; }
	
	.blog-header .selected-tag {
		display: inline-block;
		vertical-align: middle;
		display:inline-block;
		background-color: var(--brand_blue);
		color:white;
		height: 15px;
		padding: 5px 35px 5px 15px;
		margin: 0 3px 3px 0;
		border-radius:20px;
		white-space: nowrap;
		text-decoration: none;
		font-size: 0.5em;
		line-height: 15px;
		font-weight: normal;
	}
	.blog-header a.clear-selected-tag { 
		display: inline-block;
		vertical-align: middle;
		position: relative;
		left: -30px;
		text-decoration:none;
		color: white;
		width: 15px;
		height: 15px;
		font-size: 12px;
		line-height: 15px;
		overflow: hidden;
		text-align: center;
		opacity: 0.5;
	}
	.blog-header a.clear-selected-tag:hover { opacity: 1; } 
	.blog-header a.clear-selected-tag i {}
	.blog-header a.clear-selected-tag i:before { content:"\EBAD"; }

	


	.blog-list {}
	.blog-list > ul {
		list-style: none;
		margin: 0 0 50px 0;
		padding: 0;
		gap:50px;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
	.blog-list > ul > li {
		box-sizing: content-box;
		list-style: none;
		margin: -15px;
		padding: 15px;
		position: relative;
		display: inline-block;
		vertical-align:top;
		height: 150px;
		outline: 1px solid orange;
		outline: none;
		break-inside: avoid;
	}
	.blog-list > ul > li:after {
		display: block;
		content:"";
		position: absolute;
		width: calc(100% - 30px);
		height: 1px;
		bottom: 0px;
		border-bottom: 1px dotted var(--brand_blue);
	}
	.blog-list > ul > li > .b-image {
		display:block;
		position:relative;
		width:      160px;
		height:     160px;
		margin:0 0 -160px 0;
		top: -15px;
		overflow:hidden;
	}
	.blog-list > ul > li > .b-image > figure {
		display:block;
		position:absolute;
		inset:0;
		margin:0;
		padding:0;
		background-position:center;
		background-size:contain;
	}
	.blog-list > ul > li > .b-image > .dim {
		display:none;
	}

	.blog-list > ul > li > .b-tags {
		display:block;
		position:absolute;
		bottom:-10px;
		left: 200px;
		right: 145px;
		transform:translateY(-50%);
		font-size: 1.1rem;
		line-height:1.2;
		outline: 1px solid orange;
		outline: none;
		z-index: 1;
		height: 45px;
		display: flex;
		align-items: flex-end;
		flex-wrap: wrap;
	}
	.blog-list > ul > li > .b-tags .b-t-b {
		display:inline-block;
		background-color: #b9c3df;
		color:white;
		padding: 2px 15px;
		margin: 0 3px 3px 0;
		border-radius:20px;
		max-width: 150px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-decoration: none;
		transition:background-color 0.3s ease;
		/* display: flex; */
		/* align-items: flex-end; */
	}
	.blog-list > ul > li > .b-tags .b-t-b:hover {
		background-color: var(--brand_red);
	}
	.blog-list > ul > li > .b-tags:has(.current) .b-t-b {opacity: 0.5;}
	.blog-list > ul > li > .b-tags:has(.current) .b-t-b.current {background-color: var(--brand_blue);}
	

	.blog-list > ul > li > .b-head {
		width: calc(100% - 210px);
		/*height: 100px;
		overflow:hidden;
		*/
		webkit-line-clamp:5;
		line-clamp:5;
		outline: 1px solid orange;
		outline: none;
		margin-left: 180px;
	}
	.blog-list > ul > li > .b-head .b-title {
		display: inline-block;
		vertical-align: top;
		width: calc(100% - 70px);
		outline: 1px solid blue;
		outline: none;
		font-size: 2.05rem;
		line-height: 1.0;
		margin: 0 0 15px 0;
		position: relative;
		/*top: 50%;*/
		/*transform: translateY(-50%);*/
	}
	.blog-list > ul > li > .b-head .b-date {
		display: inline-block;
		vertical-align: top;
		width: 60px;
		outline: 1px solid green;
		outline: none;
		display: none;
	}

		/* blog head */

			/* title */
			.blog-list > ul > li > .b-head .b-title .b-t-t {font-size: 1em; line-height: 1.2; margin: 0; font-family: TeamCompass-Semibold; }
			/* subtitle */
			.blog-list > ul > li > .b-head .b-title .b-t-s {font-size: 0.8em; line-height: 1.2; margin: 10px 0 0 0;}
			.blog-list > ul > li > .b-head .b-title .b-t-s:empty { display: none; }
			/* date */
			.blog-list > ul > li > .b-head .b-date .b-d {
				text-align: center;
				font-size: 1.5rem;
				line-height:1.2;
			}
			.blog-list > ul > li > .b-head .b-date .b-d .b-d-y {
				display:block;
				font-size: 0.8em;
			}
			.blog-list > ul > li > .b-head .b-date .b-d .b-d-m {
				display:block;
				overflow: hidden;
				font-size: 0;
			}
			.blog-list > ul > li > .b-head .b-date .b-d .b-d-d {
				display:block;
				font-size:2em;
				/* line-height: 1; */
				color: var(--brand_red);
			}
			.blog-list > ul > li > .b-head .b-date .b-d .b-d-m:before { font-size: 1.5rem; }
			
			html[lang="hu"] .b-d-m[data-month="1" ]:before { content:"Jan"; }
			html[lang="hu"] .b-d-m[data-month="2" ]:before { content:"Febr"; }
			html[lang="hu"] .b-d-m[data-month="3" ]:before { content:"Márc"; }
			html[lang="hu"] .b-d-m[data-month="4" ]:before { content:"Ápr"; }
			html[lang="hu"] .b-d-m[data-month="5" ]:before { content:"Máj"; }
			html[lang="hu"] .b-d-m[data-month="6" ]:before { content:"Jún"; }
			html[lang="hu"] .b-d-m[data-month="7" ]:before { content:"Júl"; }
			html[lang="hu"] .b-d-m[data-month="8" ]:before { content:"Aug"; }
			html[lang="hu"] .b-d-m[data-month="9" ]:before { content:"Szept"; }
			html[lang="hu"] .b-d-m[data-month="10"]:before { content:"Okt"; }
			html[lang="hu"] .b-d-m[data-month="11"]:before { content:"Nov"; }
			html[lang="hu"] .b-d-m[data-month="12"]:before { content:"Dec"; }

			html[lang="en"] .b-d-m[data-month="1" ]:before { content:"Jan"; }
			html[lang="en"] .b-d-m[data-month="2" ]:before { content:"Feb"; }
			html[lang="en"] .b-d-m[data-month="3" ]:before { content:"Mar"; }
			html[lang="en"] .b-d-m[data-month="4" ]:before { content:"Apr"; }
			html[lang="en"] .b-d-m[data-month="5" ]:before { content:"May"; }
			html[lang="en"] .b-d-m[data-month="6" ]:before { content:"Jun"; }
			html[lang="en"] .b-d-m[data-month="7" ]:before { content:"Jul"; }
			html[lang="en"] .b-d-m[data-month="8" ]:before { content:"Aug"; }
			html[lang="en"] .b-d-m[data-month="9" ]:before { content:"Sep"; }
			html[lang="en"] .b-d-m[data-month="10"]:before { content:"Oct"; }
			html[lang="en"] .b-d-m[data-month="11"]:before { content:"Nov"; }
			html[lang="en"] .b-d-m[data-month="12"]:before { content:"Dec"; }

		/* blog body */

			.blog-list > ul > li > .b-body {
				position: relative;
				color: #999;
				outline: 1px solid orange;
				outline: none;
				height: 55px;
				margin: 0 0 0 180px;
				overflow: hidden;
				-webkit-line-clamp:3;
				line-clamp:3;
			}
			.blog-list > ul > li > .b-body:before {
				display: block;
				content:"";
				position: absolute;
				inset:0;
				pointer-events: none;
				background: linear-gradient(to top, white 10%, rgba(255,255,255,0) 70%);
			}

		/* blog action */

			.blog-list > ul > li > .b-action {
				display: block;
				position:absolute;
				text-align: right;
				height: 30px;
				padding:15px;
				margin:-15px;
				outline: 1px solid orange;
				outline: none;
				overflow: hidden;
				bottom: 15px;
				right: 0px;				
			}
			.blog-list > ul > li > .b-action .b-action-b {
				display: inline-block;
				text-decoration: none;
				padding: 5px 15px;
				border-radius: 20px;
				background-color: var(--brand_red);
				color: white;
				font-size: 1.2rem;
				box-shadow:0 0 0 0 var(--brand_red);
				transition:box-shadow 0.3s ease;
				font-weight: bold;
			}
			.blog-list > ul > li > .b-action .b-action-b:hover {
				box-shadow:0 0 0 5px var(--brand_red);
			}
		
		
		
		
	/*							*/
	/*							*/
	/* BLOG DETAILS 			*/
	/*							*/
	/*							*/

	p {
		-webkit-font-smoothing:subpixel-antialiased;
	}

	.mirror h1.blogs-title {
		display: block;
		box-sizing: content-box;
		position:sticky;
		top: 75px;
		background-color: #ffffff80;
		background-color: transparent;
		width:calc(100% + 30px);
		margin:0 0 0 -30px;
		padding: 15px 0px 15px 30px;
		z-index:3;
		backdrop-filter:blur(10px);
	}
	h1 a.back-to-blogs {
		display: inline-block;
		position: relative;
		left: -5px;
		vertical-align: top;
		margin-right: 0;
		text-decoration: none;
	}
	h1 a.back-to-blogs i {
		font-size: 1.3em;
	}
	h1 a.back-to-blogs i:before {
		content:"\EBA3";
	}
	
	.blog-details {
		margin-top: 50px;
	}
	.blog-details:before {
		content:"";
		display: block;
		position: absolute;
		z-index: -1;
		inset:0;
		background:linear-gradient(rgba(190,215,224,1.00), white);
		opacity: 0.5;
		height: 400px;
		left: 50%;
		transform:translateX(-50%);
		width: 100vw;
	}
	
	.blog-details > .b-head {}
	.blog-details > .b-head > .b-title {}
	.blog-details > .b-head > .b-title .b-t-t {
	}
	.blog-details > .b-head > .b-title .b-t-s {
	}
	
	/* Image */
	
	.blog-details > .b-image {
		display:block;
		position:relative;
		width:  350px;
		height: 350px;
		margin: 0 0 -350px 0px;
		background-color:white;	
		background-color: transparent;
		outline: 1px dotted orange;
		outline: none;
	}
	.blog-details > .b-image > figure {
		display:block;
		position:absolute;
		inset:0;
		margin:0;
		padding:0;
		left: -10%;
		top: -10%;
		right: 10%;
		bottom:10%;
		background-position:center;
		background-size:contain;
		background-repeat: no-repeat;
	}
	/*
	.blog-details > .b-image > figure:before {
		content:"";
		position: absolute;
		display: block;
		inset:0;
		border-radius: 50%;
		background-color: white;
		background-color: transparent;
		z-index: -1;
		filter:blur(100px);
		filter:blur(3px);
		mix-blend-mode:luminosity;
		opacity: 0.5;
		background-image: inherit;
		background-size: inherit;
		background-repeat: inherit;
		background-position: inherit;
		transform-origin: center;
		transform:translate(5px,8px) scale(0.98,0.98) rotate(2deg);
	}
	*/
	.blog-details > .b-image > .dim {
		display: none;
	}
	
	/* Tags */
	
	.blog-details > .b-tags {
		display:block;
		position:relative;
		left: 0;
		width: calc(100% - 350px);
		margin: 0 0 0 350px;
		font-size: 1.2rem;
		line-height:1.2;
		outline: 1px solid orange;
		outline: none;
		z-index: 1;
	}
	.blog-details > .b-tags .b-t-b {
		display:inline-block;
		background-color: var(--brand_blue);
		color:white;
		padding: 2px 15px;
		margin: 0 3px 3px 0;
		border-radius:20px;
		max-width: 250px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		text-decoration: none;
		transition:background-color 0.3s ease;
	}
	.blog-details > .b-tags .b-t-b:hover {
		background-color: var(--brand_red);
	}
	
	.blog-details > .b-head {
		position: relative;
		width: calc(100% - 350px);
		margin: 0 0 0 350px;
		height: 250px;
		outline: 1px solid orange;
		outline: none;
	}
	.blog-details > .b-head .b-title {
		display: inline-block;
		vertical-align: top;
		width:calc(100% - 100px);
		outline: 1px solid blue;
		outline: none;
	}
	.blog-details > .b-head .b-date {
		display: inline-block;
		vertical-align: top;
		width: 100px;
		outline: 1px solid green;
		outline: none;
	}
		/* blog head */

			/* title */
			.blog-details > .b-head {
				margin-top: 30px;
				margin-bottom: 30px;
			}
			.blog-details > .b-head .b-title .b-t-t {
				font-size: 3.3rem;
				line-height: 1.15;
				margin-top: 0;
				font-weight: bold;
			}
			/* subtitle */
			.blog-details > .b-head .b-title .b-t-s {
				font-size: 2.5rem;
				line-height: 1.2;
				font-weight: bold;
			}
			/* date */
			.blog-details > .b-head .b-date {
				display: none;
			}
			.blog-details > .b-head .b-date .b-d {
				text-align: right;
				font-size: 1.5rem;
			}
			.blog-details > .b-head .b-date .b-d {
				text-align: right;
				font-size: 1.5rem;
				line-height:1.2;
			}
			.blog-details > .b-head .b-date .b-d .b-d-y {
				display:block;
				font-size: 0.8em;
			}
			.blog-details > .b-head .b-date .b-d .b-d-m {
				display:block;
				overflow: hidden;
				font-size: 0;
			}
			.blog-details > .b-head .b-date .b-d .b-d-d {
				display:block;
				font-size:2em;
				color: var(--brand_red);
			}
			.blog-details >  .b-head .b-date .b-d .b-d-m { font-size:0; overflow:hidden; }
			.blog-details > .b-head .b-date .b-d .b-d-m:before { font-size: 1.5rem; }
			
			
			.blog-details > .b-head .b-author {
				margin-bottom: 15px;
			}
			.blog-details > .b-head .b-author p.b-a-n {
				text-transform: uppercase;
				letter-spacing: 0.2pt;
			}
			.blog-details > .b-head .b-author p.b-a-n:before {
				text-transform: none;
			}
			html[lang="hu"] .blog-details > .b-head .b-author[data-multiple="0"] p.b-a-n:before { content:"Szerző: "; }
			html[lang="en"] .blog-details > .b-head .b-author[data-multiple="0"] p.b-a-n:before { content:"Author: "; }
			html[lang="hu"] .blog-details > .b-head .b-author[data-multiple="1"] p.b-a-n:before { content:"Szerzők: "; }
			html[lang="en"] .blog-details > .b-head .b-author[data-multiple="1"] p.b-a-n:before { content:"Authors: "; }
			

			.blog-details .b-body h1,
			.blog-details .b-body h2,
			.blog-details .b-body h3,
			.blog-details .b-body h4,
			.blog-details .b-body h5,
			.blog-details .b-body h6 {
				color: var(--brand_gray);
				font-weight: normal;
			}

			.blog-details .b-body h1 { font-size: 2.25rem; }
			.blog-details .b-body h2 { font-size: 2.0rem; }
			.blog-details .b-body h3 { font-size: 1.8rem; }
			.blog-details .b-body h4 { font-size: 1.7rem; }
			.blog-details .b-body h5 { font-size: 1.6rem; }
			.blog-details .b-body h6 { font-size: 1.4rem; }
			.blog-details .b-body p  { font-size: 1.4rem; }
			.blog-details .b-body ol { font-size: 1.4rem; }
			.blog-details .b-body ul { font-size: 1.4rem; }



	.blog-details > .b-body {
		position: relative;
		color: #999;
		padding: 0 70px 70px 0px;
	}
	.blog-details > .b-body .b-b-full {
		position: relative;
	}
	/*
	.blog-details > .b-body .b-b-full:before {
		display: block;
		content: "";
		position: absolute;
		width: 2px;
		top:0;
		bottom: 0;
		left: -50px;
		background-color: var(--brand_red);
	}
	*/

	.blog-details > .b-body blockquote {
		position: relative;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.blog-details > .b-body blockquote:before {
		display: block;
		content: "";
		position: absolute;
		width: 2px;
		top:5px;
		bottom: 5px;
		left: -4em;
		background-color: var(--brand_red);
	}

	
	
	.blog-details > .b-body * {
		user-select:none;
	}
	.blog-details > .b-body p {
		margin-bottom: 5px;
	}
	.blog-details > .b-body ol {
		font-family:TeamCompass-Light;
		font-size:1.5rem;
		line-height:1.4;
		margin-bottom:5px;
	}
	.blog-details > .b-body ul {
		font-family:TeamCompass-Light;
		font-size:1.5rem;
		line-height:1.4;
		margin-bottom:5px;
	}

	/* responsives */
	
	@media screen and (min-width:1440px) and (max-width:9999px){
	}
	@media screen and (min-width:1240px) and (max-width:1439px){
	}
	@media screen and (min-width:1040px) and (max-width:1239px){
	}
	@media screen and (min-width:960px) and (max-width:1039px){
	}
	@media screen and (min-width:860px) and (max-width:959px){
	}
	@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){
		.blog-list > ul {
			display: block;
		}
		.css.skn-1 ul li, ol li {
			/* height: 255px; */
			margin-bottom: 0px;
			margin-top: 0px;
		}
		.blog-header .b-h-f {
			margin: 40px 0 0 0;
			top: 0;
			float: none;
		}
		.blog-header .b-h-f label.search-field {}
		.blog-header .b-h-f label.search-field input {width: calc(100vw - 100px);}
		.blog-header h1 {
			font-size:2.5rem;
			text-align:center;
			background-color:var(--brand_red);
			color:white;
			width:100vw;
			margin:0 0 0 -15px;
			padding:5px 0;
			text-transform:uppercase;
			letter-spacing:0.3pt;
			font-weight:bold;
		}
		.blog-header h1:before {
			content:"";
			display: block;
			position: absolute;
			width: calc(100% + 30px);
			height: 250px;
			transform:translateY(-250px);
			background-color: var(--brand_red);
			z-index: -1;
		}
		.blog-details > .b-image {
			height:auto;
			aspect-ratio:5/4;
		}
		.blog-header .blog-page-title:after {
			content:"";
		}
	}
	@media screen and (min-width: 0px) and (max-width:309px){
	}