@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: 100px;
				padding-bottom: 25px;
				/* 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="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"; }

			}
			/* exception: mobile */ @media screen and (min-width:0px) and (max-width: 959.8px){
				
				#partners {
					.partner-logos {
						margin: 30px 0;
						position: relative;
					}
					.partner-logos ul {
						gap: 25px;
						list-style: none;
						margin: 0;
						padding: 0;
						height: auto;
						justify-content: center;
					}
					.partner-logos ul {
						display:flex;
						flex-flow: row;
						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[data-count="4"] ul li {
						width: calc(25% - 25px);
						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[data-count="4"] 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: 80%;
						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 {
						height: auto;
						padding-block: 0px 60px;
					}
					
				}
			}

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

				#partners {
					.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: 100%;
			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: 120px;
			height: 120px;
			margin: 0 0 -120px 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: 140px;
			/* border-top-right-radius: 0; */
			/* border-bottom-right-radius: 0; */
		}
		#partners .bubble figcaption {
			display: block;
			position: relative;
			margin: 0 0 0 140px;
		}		
		#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: 100%;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; }
	}
	/*   MOBILE     */ @media screen and (min-width:   0px) and (max-width: 519.8px) { 
		#partners .titles h2 {
			padding-top: 25px;
			padding-bottom: 15px;
		}
	}