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

			#partners .background {
				background-color:var(--brand_yellow);
			}
			#partners .mirror {
				height: 100%;
			}
			#partners {
				box-sizing: border-box;
				min-height: 100vh;
				min-height: 100dvh;
				min-height: 100svh;
			}
			#partners .mirror {
				color: black;
			}
			#partners .titles {
				position: relative;
				outline: 1px solid blue;
				outline: none;
			}
			#partners .titles h2 {
				color: black;
				position: relative;
				padding-top: 30px;
				padding-bottom: 0px;
				/* text-transform: uppercase; */
			}
			#partners .copies {
				position: relative;
				/* height: calc(100% - var(--copies)); */
				color:black;
				outline: 1px solid orange;
				outline: none;
			}
			#partners .copies * {
				color:inherit;
			}
			#partners .copies p {
				font-size: var(--copy_size);
				line-height: var(--copy_line_height);
			}
			#partners {
				.partner-logos ul li[data-label="flow-alapitvany"]      i { background-image:url(../../uploads/partners/XL/flow-alapitvany.webp); }
				.partner-logos ul li[data-label="magnet-bank"]          i { background-image:url(../../uploads/partners/XL/magnet-bank.webp); }
				.partner-logos ul li[data-label="magnet-kozossegi-haz"] i { background-image:url(../../uploads/partners/XL/magnet-kozossegi-haz.webp); }
				.partner-logos ul li[data-label="flow-events"]          i { background-image:url(../../uploads/partners/XL/flow-events.webp); }
				.partner-logos ul li[data-label="ceu"]                  i { background-image:url(../../uploads/partners/XL/ceu.webp); }
				.partner-logos ul li[data-label="greenpact"]            i { background-image:url(../../uploads/partners/XL/greenpact.webp); }
				.partner-logos ul li[data-label="drawjob"]              i { background-image:url(../../uploads/partners/XL/drawjob.webp); }

				.partner-logos ul li[data-label="flow-alapitvany"]      em:before { content:"Flow Alapítvány"; }
				.partner-logos ul li[data-label="magnet-bank"]          em:before { content:"Magnet Magyar Közösségi Bank"; }
				.partner-logos ul li[data-label="magnet-kozossegi-haz"] em:before { content:"Magnet Közösségi Ház"; }
				.partner-logos ul li[data-label="flow-events"]          em:before { content:"Flow Events"; }
				.partner-logos ul li[data-label="ceu"]                  em:before { content:"CEU"; }
				.partner-logos ul li[data-label="greenpact"]            em:before { content:"Greenpact"; }
				.partner-logos ul li[data-label="drawjob"]              em:before { content:"DrawJob Reklám és Grafika"; }

				.partner-logos ul li[data-label="flow-alapitvany"]      span:before { content:""; }
				.partner-logos ul li[data-label="magnet-bank"]          span:before { content:""; }
				.partner-logos ul li[data-label="magnet-kozossegi-haz"] span:before { content:""; }
				.partner-logos ul li[data-label="flow-events"]          span:before { content:""; }
				.partner-logos ul li[data-label="ceu"]                  span:before { content:"Köszönet a helyszínért!"; }
				.partner-logos ul li[data-label="greenpact"]            span:before { content:""; }
				.partner-logos ul li[data-label="drawjob"]              span:before { content:""; }

			}
			/* exception: mobile */ @media screen and (min-width:0px) and (max-width: 959.8px){
				
				#partners[data-arrange="grid"] {
					.partner-logos {
						margin: 30px 0;
						position: relative;
					}
					.partner-logos ul {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
						gap: 50px;
						list-style: none;
						margin: 0;
						padding: 0;
						height: auto;
						justify-content: center;
					}
					.partner-logos ul {
						height: auto;
						width: 100%;
					}
					.partner-logos ul li {
						list-style: none;
						margin: 0; padding: 0;
						position: relative;
						outline: 1px dotted orange;
						outline: none;
					}
					.partner-logos ul li {
						width: calc(100% - 0px);
						height: auto;
						aspect-ratio: 1/1;
						background-color: white;
						border-radius: 15px;
						display: block;
						margin: 0 0 25px 0;
						box-shadow: 0 8px 14px rgba(0, 0, 0, 0.16);
						transition: transform 0.28s ease, box-shadow 0.28s ease;
						transform-origin: 50% 55%;
					}
					.partner-logos ul li:hover {
						transform: translateY(-4px) scale(1.03);
						box-shadow: 0 18px 30px rgba(0, 0, 0, 0.26);
					}
					.partner-logos ul li i {
						display: block;
						position: absolute;
						inset:0;
					}
					.partner-logos ul li i {
						background-size: 90%;
						background-repeat: no-repeat;
						background-position: 50% 40%;
					}
					.partner-logos ul li em {
						position:absolute;
						font-size: var(--copy_size);
						line-height: var(--copy_line_height);
						color: black;
						/* opacity:0.5; */
						font-style:normal;
					}
					.partner-logos ul li em {
						top: calc(100% + 10%);
						left: 0;
						right: 0;
						text-align: center;
						font-size: var(--copy_size_smaller);
						line-height: var(--copy_line_height_smaller);
						text-wrap: balance;
					}
					.partner-logos ul li span {
						top: calc(100% + 10%);
						left: 0;
						right: 0;
						text-align: center;
						font-size: var(--copy_size_smallest);
						line-height: var(--copy_line_height_smallest);
						text-wrap: balance;
					}
					.partner-logos {
						height: auto;
						padding-block: 0px 60px;
					}
					
				}
			}

			/* exception: desktop */ @media screen and (min-width:960px){

				#partners[data-arrange="grid"] {
					.partner-logos {
						margin: 30px 0;
						position: relative;
					}
					.partner-logos ul {
						display: grid;
						grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
						width: calc(100% - 0px);
						margin-left: 0px;
						margin-right: 0;
						gap: 25px;
						list-style: none;
						padding: 0;
						align-items: stretch;
					}
					.partner-logos ul li {
						position: relative;
						width: 100%;
						height: auto;
						min-height: 180px;
						aspect-ratio: 1/1;
						background-color: white;
						border-radius: 20px;
						box-shadow: 0 10px 16px rgba(0, 0, 0, 0.18);
						transition: transform 0.28s ease, box-shadow 0.28s ease;
						transform-origin: 50% 60%;
						filter:grayscale(1) brightness(1.1) contrast(0.9) opacity(0.9);
					}
					.partner-logos ul li[data-visible="0"] {
						display:none;
					}
					.partner-logos ul li:hover {
						transform: translateY(-5px) scale(1.03);
						box-shadow: 0 22px 34px rgba(0, 0, 0, 0.30);
						filter:none;
					}
					.partner-logos ul li i {
						position: absolute;
						display: block;
						inset:0 0 10% 0;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: 50% 15%;
					}
					.partner-logos ul li em {
						position: absolute;
						bottom:15px;
						left:0;
						right:0;
						text-align:center;
						color: black;
						font-style: normal;
						opacity: 0.5;
						font-size: var(--copy_size_small);
						line-height: var(--copy_line_height_small);
					}
					.partner-logos ul li span {
						display: none;
					}
					.partner-logos ul li[data-has_note="1"] span {
						display: block;
						position: absolute;
						top: calc(100% + 10%);
						left: 0;
						right: 0;
						text-align: center;
						background-color: white;
						color: black;
						border-radius: 15px;
						padding: 10px 15px;
						font-size:   calc(var(--copy_size_smaller) * 0.95);
						line-height: calc(var(--copy_line_height_smaller) * 0.95);
						text-wrap: balance;
						opacity: 0.5;
					}
					.partner-logos ul li span:after {
						display: block;
						content:"";
						bottom: 100%;
						left: 50%;
						border: solid transparent;
						content: "";
						height: 0;
						width: 0;
						position: absolute;
						pointer-events: none;
						border-color: rgba(0,0,0, 0);
						border-bottom-color: white;
						border-width: 10px;
						margin-left: -10px;
					}
				}
				#partners[data-arrangement="list"] {
					.columns[data-columns="2-1"] .column:nth-child(2) {
						padding-top:90px;
					}
					.partner-logos {
						margin: 30px 0;
						position: relative;
					}
					.partner-logos ul {
						display: flex;
						flex-flow: column;
						width: calc(100% - 50px);
						margin-left: 50px;
						gap: 25px;
						list-style: none;
						padding: 0;
					}
					.partner-logos[data-count="4"] ul li {
						position: relative;
						width: auto;
						height: 12.5vh;
						aspect-ratio: 1/1;
						background-color: white;
						border-radius: 20px;
						box-shadow: 0 10px 16px rgba(0, 0, 0, 0.18);
						transition: transform 0.28s ease, box-shadow 0.28s ease;
						transform-origin: 50% 60%;
					}
					.partner-logos[data-count="4"] ul li:hover {
						transform: translateY(-5px) scale(1.03);
						box-shadow: 0 22px 34px rgba(0, 0, 0, 0.30);
					}
					.partner-logos ul li i {
						position: absolute;
						display: block;
						inset:0 0 10% 0;
						background-size: contain;
						background-repeat: no-repeat;
						background-position: 50% 15%;
					}
					.partner-logos ul li em {
						position: absolute;
						bottom:15px;
						left:0;
						right:0;
						text-align:center;
						color: black;
						font-style: normal;
						opacity: 0.5;
						font-size: var(--copy_size_small);
						line-height: var(--copy_line_height_small);
					}
				}
			}



		#partners .bubble {
			display: block;
			position: relative;
			width: calc(100% - 50px);
			margin-top: 75px;
			margin-bottom: 50px;
			border-radius: 60px;
			border-top-left-radius: 0;
			background-color: var(--brand_orange);
			background-color: var(--brand_green);
			padding: 50px 25px;
			/* box-shadow: 5px 5px 5px 0 var(--brand_green); */
			/* box-shadow:3px 10px 10px 0 #00000010; */
			left: 50%;
			transform: translateX(-50%);
		}
		#partners .bubble:after {
			position: absolute;
			top: 0;
			left: 0;
			border: solid transparent;
			content: "";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
			border-left-color: var(--brand_green);
			border-width: 50px;
			margin-top: -50px;
		}
		#partners .bubble figure {
			display: block;
			position: relative;
			width: calc(120px * var(--zoom_block_scale) * var(--bubble_figure_scale));
			height: calc(120px * var(--zoom_block_scale) * var(--bubble_figure_scale));
			margin: 0 0 calc(-120px * var(--zoom_block_scale) * var(--bubble_figure_scale)) 0;
			top: 0px;
			background-color: #4c699442;
			box-shadow: 0 0 0 2px #ffffff;
			background-size: 50%;
			background-image: url(../../images/page/partners/passion_15144190.white.svg);
			border-radius: calc(140px * var(--zoom_block_scale) * var(--bubble_figure_scale));
			/* border-top-right-radius: 0; */
			/* border-bottom-right-radius: 0; */
		}
		#partners .bubble figcaption {
			display: block;
			position: relative;
			margin: 0 0 0 calc(140px * var(--zoom_block_scale) * var(--bubble_figure_scale));
		}		
		#partners .bubble h3 {
			display: block;
			font-weight: 700;
			font-size: 2.25rem;
			line-height: 1.4;
			margin-bottom: 15px;
			color: white;
			text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
		}
		#partners .bubble p {
			display: block;
			font-weight: 500;
			font-size: var(--copy_size);
			line-height: var(--copy_line_height);
			color: white;
			text-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
		}


	/*            -M   */ @media screen and (min-width:   0px) and (max-width: 959.8px) {
		#partners .bubble {width: calc(100% - 50px);border-radius: 40px;padding-top: 25px;}
		#partners .bubble figure { display: block; margin: 0 0 25px 0; left: 50%; transform:  translateX(-50%); }
		#partners .bubble figcaption { margin: 0; }
		#partners .bubble h3 { text-align: center; }
	}

	/*   DESKTOP    */ @media screen and (min-width: 960px)                          { 

	}
	/*   TABLET     */ @media screen and (min-width: 520px) and (max-width: 959.8px) {
		#partners { min-height: 0; }
		#partners .bubble h3 {
			font-size: 1.65rem;
			line-height: 1.35;
		}
	}
	/*   MOBILE     */ @media screen and (min-width:   0px) and (max-width: 519.8px) { 
		#partners .titles h2 {
			padding-top: 25px;
			padding-bottom: 15px;
		}
		#partners .bubble h3 {
			font-size: 1.25rem;
			line-height: 1.35;
		}
	}

	#partners .how-to-support-us {
		display: block;
		position: relative;
		padding: 35px 0 80px 0;
		color: black;
	}
	#partners .how-to-support-us .titles h2 {
		padding-top: 0;
	}
	#partners .how-to-support-us .content {
		display: grid;
		gap: 25px;
		margin-top: 25px;
	}
	#partners .how-to-support-us .intro {
		background: var(--brand_green);
		border-radius: 25px;
		padding: 25px;
		box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
	}
	#partners .how-to-support-us .support-levels {
		/* background: var(--brand_green); */
		/* border-radius: 25px; */
		/* padding: 25px; */
		/* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); */
	}
	#partners .how-to-support-us .outro {
		/* background: var(--brand_green); */
		/* border-radius: 25px; */
		/* padding: 25px; */
		/* box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); */
	}
	#partners .how-to-support-us h3 {
		margin: 0 0 12px 0;
		font-size: clamp(1.2rem, 1.8vw, 1.75rem);
		line-height: 1.35;
		font-weight: 700;
		color: black;
	}
	#partners .how-to-support-us p {
		margin: 0 0 12px 0;
		font-size: var(--copy_size);
		line-height: var(--copy_line_height);
		color: black;
	}
	#partners .how-to-support-us p:last-child {
		margin-bottom: 0;
	}
	#partners .how-to-support-us .support-levels ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 12px;
	}
	#partners .how-to-support-us .support-levels li {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		gap: 12px;
		padding: 14px 16px;
		background: white;
		border-radius: 16px;
		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
		color: black;
		overflow: hidden;
		border: 2px solid white;
	}
	#partners .how-to-support-us .support-levels li figure {
		width: 38px;
		height: 38px;
		border-radius: 50%;
		margin: 0;
		background: #b7bcc5;
		box-shadow: inset 0 15px 50px 5px rgba(255, 255, 255, 0.9);
		width: 200px;
		height: 200px;
		margin: -100px;
	}
	#partners .how-to-support-us .support-levels li:nth-child(1) figure {
		background: #5bb5ff;
	}
	#partners .how-to-support-us .support-levels li:nth-child(2) figure {
		background: #e3b341;
	}
	#partners .how-to-support-us .support-levels li:nth-child(3) figure {
		background: #a8adb7;
	}
	#partners .how-to-support-us .support-levels li:nth-child(4) figure {
		background: #b87333;
	}
	#partners .how-to-support-us .support-levels li figcaption {
		display: grid;
		gap: 4px;
		padding: 0 0 0 110px;
	}
	#partners .how-to-support-us .support-levels li figcaption h3 {
		margin: 0;
		font-size: var(--copy_size_big);
		line-height: var(--copy_line_height_big);
		/* text-transform: uppercase; */
		color: black;
	}
	#partners .how-to-support-us .support-levels li figcaption p {
		margin: 0;
		font-size: var(--copy_size_smaller);
		line-height: var(--copy_line_height_smaller);
		color: black;
	}
	#partners .how-to-support-us a {
		color: inherit;
		font-weight: 700;
		text-decoration-thickness: 2px;
		text-underline-offset: 2px;
	}

	/*            -M   */ @media screen and (min-width:   0px) and (max-width: 959.8px) {
		#partners .how-to-support-us {
			padding: 20px 0 55px 0;
		}
		#partners .how-to-support-us .intro,
		#partners .how-to-support-us .support-levels,
		#partners .how-to-support-us .outro {
			padding: 20px;
			border-radius: 18px;
		}
		#partners .how-to-support-us .support-levels li {
			padding: 12px 14px;
			gap: 10px;
		}
		#partners .how-to-support-us .support-levels li figure {
			width: 14px;
			height: 14px;
		}
	}