/*   
Theme Name: Luxmen 2025
Theme URI: http://www.jareksierpinski.de
Description: Screen-Design by Gretchendesign. Programming: Jarek Sierpinski
Author: Jarek Akara
Author URI: http://www.jareksierpinski.de
*/

/* SCHRIFTEN FONTS -------------------------------------------------------------- */

/* inter-regular - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/inter-v19-latin-regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-600 - latin */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/inter-v19-latin-600.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Sandro grot */
@font-face {
	font-display: swap;
	/* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Sandro';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/SandroGrottesco-Regular.woff2') format('woff2');
	/* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

:root {
	--schriftfarbe: #000;
	--gelb: #F0FE16;
	--dunkelblau: #07002E;
	--seitenfarbe: #ffffff;
	--weiss: #ffffff;
	--font: 'Inter', Arial, Verdana, sans-serif;
	--header: 'Sandro', 'Courier New', Courier;
	--smallfont: 12px;
	--fliesstext: clamp(12px, .9em, 20px);
	--dist1: 3.5rem;
	--dist2: 6vw;
	--dist3: 14vw;
	--disttop: 30px;
}


/* =Layout GLOBAL -------------------------------------------------------------- */

body {
	color: var(--schriftfarbe);
	font-family: var(--font);
	font-size: 1vw;
	line-height: 1.4em;
	font-weight: 400;
}

#mobilenav,
#navi-mb {
	display: none;
}

a {
	color: var(--schriftfarbe);
	text-decoration: none;
	transition: all .3s ease-out;
}

.wp-block-columns {
	width: 100%;
}

#main .wp-block-columns {
	align-items: baseline;
}

#footer .wp-block-columns {
	margin-bottom: 0 !important;
}

strong {
	font-weight: 600;
}

/* WRAPPER -------------------------------------------------------------- */

.wrapper,
.subfooter {
	width: 100%;
	max-width: 2500px;
	padding-left: var(--dist3);
	padding-right: var(--dist3);
	box-sizing: border-box;
	margin: auto;
	text-align: left;
}

.has-gelb-color {
	color: var(--gelb);
}

/* HEADER -------------------------------------------------------------- */

#header {
	position: absolute;
	top: 0px;
	right: 0px;
	left: 0px;
	height: auto;
	z-index: 50000;
	transition: all .3s ease-out;
	font-size: 1.35em;
	padding-top: 1.4em;
	min-height: 50px;
	box-sizing: border-box;
}

#logo {
	min-width: 100px;
	width: 13%;
	float: left;
	transition: all .3s ease-out;
	margin-top: var(--disttop);
}

#logo a {
	display: block;
	box-sizing: border-box;
	font-size: 0px;
	overflow: hidden;
	text-indent: -10000px;
	background: url(images/logo-luxmen-sw.svg) no-repeat left center;
	background-size: contain;
}

#logo img {
	max-width: 100%;
	width: 100%;
	height: auto;
}
#sublogo {
	float: right;
	position: relative;
	margin-top: var(--disttop);
	width: 5%;
	min-width: 47px;
	aspect-ratio: 1.5;
	background: url(images/lxm-logo.svg) no-repeat center center;
	background-size: contain;
}

/* BACKGROUND ANIMATION */

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#background {
	position: fixed;
	z-index: -1
}

.gradient {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	--size: 250px;
	--speed: 8s;
	--easing: cubic-bezier(0.8, 0.6, 0.8, 0.8);
	width: var(--size);
	height: var(--size);
	filter: blur(calc(var(--size) / 15));
	background: var(--gelb);
	animation: rotate var(--speed) var(--easing) alternate infinite;
	border-radius: 30% 10% 80% 50%;
}

.gradient2 {
	position: absolute;
	top: 20vw;
	left: 45vw;
	z-index: -1;
	--size: 250px;
	--speed: 9s;
	--easing: cubic-bezier(0.2, 0.5, 0.5, 0.2);
	width: var(--size);
	height: var(--size);
	filter: blur(calc(var(--size) / 20));
	background: var(--gelb);
	animation: rotate var(--speed) var(--easing) alternate infinite;
	border-radius: 50% 100% 70% 50%;
}


/* HEADINGS ÜBERSCHRIFTEN -------------------------------------------------------------- */

#main h1 {
	display: none;
}

#main h2 {
	font-family: var(--header);
	text-transform: uppercase;
	font-size: clamp(18px, 4.13vw, 5vw);

	line-height: 1.23em;
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-underline-offset: 0.1em;
	position: relative;
	z-index: 1;
	padding-bottom: 1em;
}

#main h3 {
	font-weight: normal;
	font-size: 1.7em;
	line-height: 1.33em;
}

body.page #main h3 {
	font-size: 1rem;
	font-weight: 600;
	padding-bottom: 1em;
	padding-top: .5em;
}

#main h4 {
	font-size: clamp(12px, 1em, 20px);
	font-weight: 600;
	padding-bottom: 2em;
	line-height: 1.4em;
}

#main p {
	padding-bottom: 1.4em;
	font-size: clamp(12px, 1em, 20px);
}

/* MAIN -------------------------------------------------------------- */
#main h3.sectionheader {
	font-size: var(--smallfont);
	position: absolute;
	left: var(--dist2);
	top: 7.3vw;
	text-transform: uppercase;
	transform-origin: top left;
	transform: rotate(-90deg) translate(-100%, 0px);
}

#main h3.sectionheader:before {
	content: ' ';
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 3px;
	height: 1px;
	border-bottom: 1px solid;
	width: 43px;
	margin-right: 1em;
}

#main {
	font-size: .9em;
}

body.page #main {
	padding-bottom: 4rem;
	padding-top: 6rem;
}

#main p {
	font-size: var(--fliesstext);
	line-height: 1.4em;
}

#main section:first-of-type .entry {
	min-height: 100vh;
	/* height: 100vh; */
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	position: relative;
}

#main section:first-of-type .entry::before {
	content: '';
	flex-grow: 1;
	/* erzeugt den Leerraum oben */
}

#main section:first-of-type h2 {
	font-size: 6.58vw;
	line-height: 1em;
	text-decoration: none;
	padding-bottom: 0;
	margin-bottom: .1em;
}

#main .claim {
	padding-bottom: var(--dist1);
}

#main section:first-of-type h2:before {
	content: ' ';
	border: 2px solid transparent;
	border-color: var(--schriftfarbe);
	width: 4.87em;
	position: absolute;
	height: 1.2em;
	display: block;
	border-radius: 50%;
	margin-left: -.58em;
	margin-top: -.15em;
	transform: rotate(-7deg);
}

#main section:first-of-type h2 em {
	text-decoration: inherit;
	font-style: normal;
	text-decoration: underline;
	text-decoration-thickness: .02em;
	text-underline-offset: 0.2em;
}

#main section:first-of-type .entry .sectionheader {
	display: none;
}

#main section:first-of-type .entry .wrapper {
	margin-top: auto;
}

.entry {
	padding: 7.2em 0;
	padding-bottom: 4em;
	position: relative;
}

figure.alignleft {
	display: inline-block;
	float: left;
	margin-right: 1em;
}

figure.alignright {
	display: inline-block;
	float: right;
	margin-left: 1em;
}

.wp-block-lazyblock-pfeil-nach-unten {
	position: absolute;
	right: var(--dist2);
	bottom: var(--dist1);
	font-size: var(--smallfont);
	text-transform: uppercase;
	white-space: nowrap;
	transform-origin: bottom right;
	transform: rotate(-90deg) translate(100%, 0px);
}

#scrolldown a:before {
	content: ' ';
	display: inline-block;
	vertical-align: middle;
	width: 15.3em;
	height: 2.5em;
	background: url(images/pfeilrunter.svg) no-repeat left center;
	background-size: contain;

}

#los {
	position: absolute;
	margin-top: -7em
}

/* MODULES */

.phoneleft {
	font-size: var(--smallfont);
	text-transform: uppercase;
	position: absolute;
	left: var(--dist2);
	bottom: var(--dist1);
	transform-origin: bottom left;
	transform: rotate(-90deg) translate(0, 100%);
	letter-spacing: .04em;
}

.phoneleft em {
	display: inline-block;
	border-bottom: 1px solid #000;
	width: 3.7em;
	height: .7em;
	color: transparent;
	margin: 0 .7em;
}

.branche img {
	width: 100% !important;
	max-width: 100%;
	height: auto;
}

.branche {
	max-width: 47vw;
	background-color: var(--weiss);
	color: var(--schriftfarbe);
	margin-bottom: 1.5em;
}

.branche .wp-block-column {
	flex-basis: 50% !important;
	flex: 1;
	box-sizing: border-box;
}

.branche .wp-block-column:has(p) {
	padding: 2em;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-wrap: wrap;
}

.branchen .branche:nth-child(2n) {
	margin-left: 17%;
}

#main .branche h4 {
	padding-bottom: 1em;
}

.branche .wp-block-buttons {
	text-align: center;
}

.branche img,
.branche figure {
	height: 100% !important;
	object-fit: cover;
}

.wp-block-columns:has(.referenz) {
	gap: 5%;
}

#main .referenz h3, #main .referenz-slider h3 {
	font-family: var(--header);
	text-transform: uppercase;
	text-decoration: underline;
	font-size: 2.2em;
	margin-left: -7rem;
	margin-bottom: 1em;
	min-height: 3em;
}
.referenz-slider {
	margin-left: calc(-14vw);
	margin-right: calc(-14vw);
	width: calc(100% + 28vw);
	padding-bottom: 0px;
}
.referenz figure, .referenz-bilder {
	margin-bottom: 5rem;
}

.referenz-bilder {
    width: 100%;
	aspect-ratio: 1.4;
	background: url(images/logo-luxmen-sw.svg) no-repeat center center #909090;
	background-size: 5em auto;
}

.referenz-item {
	width: 90%;
	margin: auto;
	padding-left: 25%;
}
.referenz-item .inhalt img {
	margin: 1em 0;
}
.wp-block-column:has(.referenz) {
	padding-left: 7rem;
}

.referenz-slider .wp-block-buttons {
	margin-top: 1em;
}

#main .swiper-button-next {
	background: url(images/pfeilrechts.svg) no-repeat;
	background-position-y: center;
	width: 180px;
	display: inline-block;
	vertical-align: middle;
	left: 50%;
	height: auto;
	aspect-ratio: 5;
	background-size: contain;
}
#main .swiper-button-next:before {
	content: 'scroll';
	transform: translateX(-100%);
	display: inline-block;
	vertical-align: middle;
	padding-right: .5em;
	font-size: 12px;
	line-height: 3em;
	color: var(--schriftfarbe);
}
#main .swiper-button-next:after {
	display: none;
}
.swiper-slide {
    width: 60% !important; /* 2/3 der Container-Breite = 1.5 Slides */
    transition: transform 0.3s ease;
}

#main #kontakt {
	position: absolute;
	margin-top: -7em;
}

/* end MODULES */


/* Blockquote right double quotes -------------------------------------------------------------- */

.blockquote .quote:after {
	content: "";
	position: absolute;
	border: 2px solid #fff;
	border-radius: 0 50px 0 0;
	width: 60px;
	height: 60px;
	bottom: -62px;
	left: 50px;
	border-bottom: none;
	border-left: none;
	z-index: 3;
}

.blockquote .quote:before {
	content: "";
	position: absolute;
	width: 80px;
	border: 6px solid var(--seitenfarbe);
	bottom: -3px;
	left: 50px;
	z-index: 2;
}


/* MENU NAVI -------------------------------------------------------------- */

#navi {
	float: right;
	width: 70%;
	text-align: right;
	padding-top: 1.5em;
	padding-bottom: 1.7em;
	letter-spacing: .035em;
	transition: all .3s ease-out;
	font-size: .86em;
	font-weight: 400;
}

body.scrolled #navi {
	padding-top: .6em;
	padding-bottom: 0;
}

#navi ul {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

#navi ul li {
	display: inline-block;
	vertical-align: top;
	margin-left: 6.1%;
	position: relative;
	text-decoration: none;
	transition-duration: 0.5s;
}

#navi a {}

#navi li:hover,
#navi li:focus-within {
	cursor: pointer;
}

#navi li:focus-within a {
	outline: none;
}

#navi ul li ul {}

.scrolled #navi ul li ul {
	padding-top: .65em;
}

#navi ul li:last-child ul {
	left: auto;
	right: -1em;
}

#navi ul li:hover>ul,
#navi ul li:focus-within>ul,
#navi ul li ul:hover,
#navi ul li ul:focus {
	visibility: visible;
	opacity: 1;
	display: block
}

#navi ul li ul li {}

#navi ul li ul li:hover {}

#navi li:hover>a,
#navi ul ul :hover>a,
#navi ul a.mPS2id-highlight {}

#navi ul li.current_page_item>a,
#navi ul li.current_page_ancestor>a,
#navi ul li.current-menu-ancestor>a,
#navi ul li.current-menu-item>a,
#navi ul li.current-menu-parent>a {}

* html #navi ul li.current_page_item a,
* html #navi ul li.current_page_ancestor a,
* html #navi ul li.current-menu-ancestor a,
* html #navi ul li.current-menu-item a,
* html #navi ul li.current-menu-parent a,
* html #navi ul li a:hover {}


/* FOOTER -------------------------------------------------------------- */

#footer,
#footer a {
	color: var(--weiss);
	background-color: var(--dunkelblau);
}

#footer {
	padding: 4rem 0;
	font-size: var(--fliesstext);
}

#footer a:hover {
	color: var(--gelb);
	text-decoration: underline;
}

#footer h3 {
	color: var(--gelb);
	font-weight: 600;
	padding-bottom: 1.5em;
}

#footer p {
	padding-bottom: 1em;
	line-height: 1.5em;
}


#subfooter {
	padding-top: 2rem;
	padding-bottom: 2.5rem;
	background-color: var(--weiss);
	font-size: var(--smallfont);
	text-align: center;	
}
#subfooter figure, #subfooter img {
	margin: auto;
}
#subfooter ul {
text-align: center;
	margin-top: 1rem;
}

.sufu2 {display: none !important;}
@media (width <= 700px) {
.sufu1 {display:none !important;}
.sufu2 {display:block !important; max-width: 300px; text-align:center}
}

#subfooter ul li {
	display: inline-block;
	line-height: 1.4em;
}

#subfooter ul li:before {
	content: ' | ';
}

#subfooter ul li:first-child:before {
	content: none;
}

#subfooter a:hover {
	text-decoration: underline;
}

/* =Global Elements -------------------------------------------------------------- */


/* LEAFLET MAP -------------------------------------------------------------- */
.leaflet-marker-icon {
	width: 0px !important;
	height: 0px !important;
	padding: 20px;
	padding-top: 30px;
	margin-top: -48px !important;
	margin-left: -20px !important;
	background: url(images/marker.svg) no-repeat center center;
	background-size: contain;
}

.map_block_leaflet {
	margin-bottom: 60px;
}

/* HR HORIZONTAL RULE -------------------------------------------------------------- */

hr,
#main .wp-block-separator {
	background-color: var(--weiss);
	border: 0;
	clear: both;
	height: 1px;
	margin-bottom: 0;
	border: none;
}

#main hr,
#main .wp-block-separator {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}


/* TOOLS: Scrollbutton, Loginbutton, Editlink ------------------------ */
body .is-content-justification-center {
	text-align: center;
}

body .wp-block-button__link,
.formular input[type=submit] {
	background-color: var(--gelb);
	font-size: var(--fliesstext);
	font-weight: 600;
	margin-top: 1.5em;
	padding: .7em 2.4em;
	border: 1px solid transparent;
	display: inline-block;
	transition: all .3s ease-out;
	cursor: pointer;
	font-size: clamp(12px, 1em, 20px);
}

body .wp-block-button__link:hover,
.formular input[type=submit]:hover {
	background-color: var(--weiss);
	border-color: var(--schriftfarbe);
	color: var(--schriftfarbe)
}

/* Formular ------------------------------------------------------- */

.formular {
	margin-top: -2rem;
	margin-bottom: 2rem;
}

.formular label span {
	display: block;
	padding-top: .5em;
}

.formular input,
.formular textarea {
	border: none;
	font-size: 1.3em;
	line-height: 1.3em;
	border-bottom: 1px solid #000;
	min-height: 2em;
	width: 100%;
	max-width: 100%;
	background-color: transparent;
	font-family: var(--font);
}

.formular input:focus,
.formular textarea:focus {
	background-color: rgba(255, 255, 255, .7);
}

.formular input[type=submit] {
	width: auto;
	background-color: var(--dunkelblau);
	color: var(--weiss);
	border-radius: 9999px;
	box-shadow: none;
	margin-top: 3.3rem
}

#main .formular p {
	padding-bottom: .9em;
}

.formular textarea {
	height: 9em;
}

.formular .wpcf7-spinner {
	position: absolute;
	margin-top: 3.5rem;
	margin-left: 1em;
}


/* Go TOPPFEIL -------------------------------------------------------------- */

#toTop {
	width: 35px;
	height: 35px;
	position: fixed;
	z-index: 1000;
	bottom: 0px;
	right: 0px;
	margin: 0;
	display: none;
	cursor: pointer;
	color: var(--auszeichnung);
	border-radius: 3px;
	text-align: center;
	font-size: 35px;
}

#toTop:before {
	content: '\25B2';
	font-family: Arial, Helvetica, sans-serif;
}

#toTop:hover {
	text-decoration: none !important;
	border-radius: 3px;
}

.login a {
	position: fixed;
	bottom: 2px;
	left: 0;
	background: url("images/login.gif") no-repeat scroll 0 3px transparent;
	font-size: 1px;
	height: 12px;
	overflow: hidden;
	text-indent: -1000px;
	width: 10px;
	display: inline-block;
	filter: alpha(opacity=40);
	-ms-filter: "alpha(opacity = 40)";
	opacity: .40;
}

.login a:hover {
	filter: alpha(opacity=100);
	/* IE 6, 7, 8 */
	-ms-filter: "alpha(opacity = 100)";
	opacity: 1;
}

a.post-edit-link {
	position: absolute;
	z-index: 22000;
	bottom: 0px;
	left: 0;
	display: block;
	font-size: 1px;
	text-decoration: none;
	text-indent: -1000px;
	overflow: hidden;
	background: url("images/edit.png") no-repeat;
	width: 43px;
	height: 57px;
	border: none !important;
}


/* Print Style -------------------------------------------------------------- */

@media print {
	body {
		background: none !important;
	}
}


/* RESPONSIVE --------------------------------------------------------------------------------------------------------------------------------------- */

@media only screen and (min-width: 1100px) {
	.scaled .wp-block-image img {
		height: 28em !important;
		width: auto !important;
	}
}

@media only screen and (max-width: 1100px) {
	:root {
		--dist3: 6%;
		--dist2: 1%;
	}
	.referenz-slider {
		margin-left: calc(-6%);
	  margin-right: clac(-6%);
	  width: clac(100% + 12%);
	}


	#main h3, #main .referenz h3, #main .referenz-slider h3 {
		font-size: clamp(16px, 2em, 20px);
	}

	.branche {
		max-width: 60vw;
		margin-bottom: 20px;
	}

	.scaled .wp-block-image img {
		height: 37em !important;
		width: auto !important;
	}

}

@media only screen and (max-width: 800px) {
.swiper-slide {
    width: 100% !important; /* 2/3 der Container-Breite = 1.5 Slides */
}
	.referenz-item {
		width: 100%;
		padding: 0;
	}
	#main .referenz h3, #main .referenz-slider h3 {
	min-height: 1px;
}
	#main .swiper-button-next {
		transform: translateX(-50%);
		background-position-x: right;
		width: 35px;
		height: 30px;
		background-size: auto 40px;
		right: 0;
		left: auto;
		top: 50% !important;
		margin-right: -.5rem;
	}
	
	#main .swiper-button-next:before {
		display:none;
	}
	.referenz-slider {
	margin-left: 0;
  margin-right: 0;
  width: 100%;
		padding-right: 2rem;
}
	#header,
	body.scrolled #header {}

	body.scrolled #logo,
	#logo {
		width: 140px;
		max-width: 30vw;
		min-width: 1px;
	}

	.wp-block-group,
	.wp-block-media-text,
	.wp-block-columns {
		flex-direction: column;
	}
	#main .referenz h3, #main .referenz-slider h3 {
		margin-left:0;
	}
	#main section:first-of-type h2 {
		font-size: 8vw;
		padding-left: 6vw;
	}

	.branche {
		max-width: 450px;
		width: 100%;
	}

	.branchen .branche:nth-child(2n) {
		margin-left: 0;
	}

	.branche figure {
		margin-bottom: 2em;
	}

	.branche .wp-block-column:has(p) {
		padding: 3em
	}

	.mobile,
	#navi ul li.mobile {
		display: block;
	}

	#mobilemenu {
		position: fixed;
		display: none;
		z-index: 1000;
		width: 50px;
		height: 50px;
		right: 0px;
		top: 0px;
		font-size: 1px;
		color: #000;
		cursor: pointer;
		background: url(images/burger.svg) no-repeat center center transparent;
	}

	.active #mobilemenu {
		background: url(images/close.svg) no-repeat center center transparent;
	}

	.active #navi {
		left: 0px;
		right: 0px;
	}

	#navi {
		position: fixed;
		top: 50px;
		left: 100%;
		bottom: 0px;
		transition: all .5s ease-out;
		background-color: var(--headerfarbe);
		width: 100%;
		box-sizing: border-box;
		padding-top: 5vh;
		overflow-y: auto;
		padding-left: 4%;
		padding-right: 4%;
		font-size: calc(12px + 2.4vw);
		line-height: 1.3em;
	}

	#navi ul li {
		display: block;
		text-align: left;
		padding-bottom: .5em;
		margin-left: 0;
	}

	#navi li a {
		color: var(--weiss);
		display: block;
	}

	.gradient {
		--size: 90vw;

	}

	.gradient2 {
		--size: 60vh;
		top: 45vh;
		left: -10vw;
	}
	.entry {
		padding-top: 2.5rem;
	}
	.referenz {
		padding-bottom: 4rem;
	}

	.scaled {
		margin-bottom: 2rem;
	}

	#main .referenz h3 {
		margin-left: 0;
		font-size: 1rem;
	}

	.referenz figure {
		margin-bottom: 1.5rem
	}

	body .wp-block-button__link,
	.formular input[type=submit] {
		padding: 1em 3em;
	}

	.formular {
		margin-top: 0rem;
	}
	:root {
    --dist1: 4rem;
}
	#main section:first-of-type .entry {
  height: 100vh; /* fallback */
		min-height: 1px;
  height: 100dvh;
	min-height: -webkitt-fill-available;
	min-height: fill-available;
	height: -webkitt-fill-available;
	height: fill-available;
	}
	.referenz-bilder {
		margin-bottom: 2rem;
	}
}

@media only screen and (max-width: 500px) {
	#main h3.sectionheader {
		display: none;
	}
	#main section:first-of-type h2 {
		font-size: 10vw;
	}
	.wp-block-column:has(.referenz) {
		padding-left: 0;
		margin-left: 0;
	}
	.branche .wp-block-column:has(p) {
		padding-left: 5%;
		padding-right: 5%;
}
}

@media (min-width: 801px) {
	.gradient {
		--size: 50vw;
	}

	.gradient2 {
		--size: 60vw;
	}
}