﻿.imageTopWrapper { position: relative; }
.topTextContent { max-width: 737px; margin: 0 auto 100px auto; text-align: center; position: relative; }
	.topTextContent.video { max-width: 100%; display: flex; justify-content: space-between; align-items: flex-start; margin: 0 auto 100px auto; }
		.topTextContent.video .textDiv { width: 68%; text-align: left; }
		.topTextContent.video.smallText .textDiv.small { width: 48%; text-align: left; }
		.topTextContent.video.smallText .textDiv { width: 63%; }
		.topTextContent.video .textVideoDiv { width: 32%; position: sticky; top: 0; background: var(--darkBlue); mix-blend-mode: lighten; }
			.topTextContent.video .textVideoDiv.wide { width: 48%; }
			.topTextContent.video .textVideoDiv img,
			.topTextContent.video .textVideoDiv video { position: relative; z-index: 2; }
		.topTextContent.video.smallText .topVideoMedicinSwe { position: relative; z-index: 2; top: 70px; }
		.topTextContent.video .textVideoDiv video { bottom: 0px; max-width: 100%; mix-blend-mode: lighten; }
			.topTextContent.video .textVideoDiv video::-webkit-media-controls { display: none !important; }

.topImage { max-width: 595px; margin: auto; }
	.topImage img { display: block; width: 100%; }
	.topImage.video { margin: -100px auto 100px auto; }
.imagePuffTextDiv { position: relative; top: -250px; margin: 0 0 -50px 0; padding: 113px 222px; text-align: center; border-radius: 20px; border: 0.5px solid var(--stroke); background: var(--bg-card, linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 122.81%)); backdrop-filter: blur(12.5px); -webkit-backdrop-filter: blur(12.5px); }
	.imagePuffTextDiv h2 { margin: 0 0 30px 0; }
	.imagePuffTextDiv p:last-child { margin: 0; }
.textContentBottom { max-width: 586px; text-align: center; margin: 0 auto 100px auto; position: relative; z-index: 3; }
	.textContentBottom h2 { text-transform: uppercase; }
	.textContentBottom h2,
	.textContentBottom p { position: relative; z-index: 3; }

.numberPuffList { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 1.33%; }
	.numberPuffList .puffitem { width: 32%; border-radius: 20px; border: 0.5px solid var(--stroke-card, #CCCCD2); background: var(--bg-card, linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.00) 122.81%)); backdrop-filter: blur(12.5px); -webkit-backdrop-filter: blur(12.5px); padding: 40px; box-sizing: border-box; }
		.numberPuffList .puffitem .counter { color: var(--purple); font-family: 'Mona-Sans', sans-serif; margin: 0 0 35px 0; font-size: 45px; font-style: normal; font-weight: 400; line-height: 110%; /* 49.5px */ text-transform: uppercase; }
		.numberPuffList .puffitem h3 { text-transform: uppercase; margin: 0 0 25px 0; }
		.numberPuffList .puffitem p { font-size: 14px; color: var(--stroke); }
			.numberPuffList .puffitem p:last-child { margin: 0; }

.columnPuffs { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 11%; margin: 200px 0 0 0; }
	.columnPuffs .puffitem { width: 42.9%; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin: 0 0 115px 0; }
		.columnPuffs .puffitem .image { width: 150px; height: 140px; box-sizing: border-box; border-radius: 20px; border: 1px solid #7C3DFD; padding: 10px; }
			.columnPuffs .puffitem .image img { display: block; }
		.columnPuffs .puffitem h3 { margin: 0 0 20px 0; }
		.columnPuffs .puffitem .puffTextDiv { padding: 0px 0; }
		.columnPuffs .puffitem p { font-size: 14px; }
			.columnPuffs .puffitem p:last-child { margin: 0; }


.fullPuffs { position: relative; }
	.fullPuffs .radiantWrapper,
	.columnPuffs .radiantWrapper,
	.numberPuffList .radiantWrapper { display: none; }
		.fullPuffs .radiantWrapper:nth-child(1) { display: block; height: 400px; }
		.fullPuffs .radiantWrapper .purpleRadiant { top: 80%; left: -15%; }
	.fullPuffs .puffitem { display: flex; justify-content: center; gap: 100px; margin: 0 0 100px 0; padding: 0 0 100px 0; border-bottom: 1px solid var(--purple); position: relative; z-index: 3; }
		.fullPuffs .puffitem:last-child { border-bottom: none; }
		.fullPuffs .puffitem .image { width: 230px; height: 230px; border: 1px solid var(--purple); border-radius: 150px; display: flex; justify-content: center; align-items: center; flex-shrink: 0; background: url(/gfx/puffBgImageRound.png) no-repeat center center; box-sizing: border-box; }
		.fullPuffs .puffitem .puffTextDiv { max-width: 660px; }
			.fullPuffs .puffitem .puffTextDiv h3 { text-transform: uppercase; margin: 0 0 25px 0; }
			.fullPuffs .puffitem .puffTextDiv p { font-size: 14px; }
			.fullPuffs .puffitem .puffTextDiv .readMoreLink { margin: 40px 0 0 0; }

@media screen and (max-width: 1650px) {
	.topTextContent.video .textVideoDiv video { max-width: 100%; height: 590px; bottom: 0; }
}

@media screen and (max-width: 1200px) {

	.imagePuffTextDiv { padding: 75px 100px; }
}

@media screen and (max-width: 880px) {
	.imagePuffTextDiv { padding: 50px 20px; }
	.numberPuffList .puffitem .counter { font-size: 35px; margin: 0 0 25px 0; }
	.numberPuffList .puffitem h3 { font-size: 14px; margin: 0 0 20px 0; }
	.numberPuffList .puffitem p { font-size: 12px; }
}

@media screen and (max-width: 850px) {
	.columnPuffs { margin: 100px 0 0 0; }
		.columnPuffs .radiantWrapper { display: none !important; }
		.columnPuffs .puffitem { text-align: center; margin: 0; }
			.columnPuffs .puffitem .image { margin: 0 auto 40px auto; }
	.purpleRadiant { width: 200px; height: 200px; border-radius: 200px; filter: blur(100px); -webkit-filter: blur(100px); }
	.fullPuffs .puffitem { flex-direction: column; gap: 60px; margin: 0 0 80px 0; padding: 0 0 80px 0; }
		.fullPuffs .puffitem:last-child { margin: 0; padding: 0; }
}

@media screen and (max-width: 700px) {
	.numberPuffList .puffitem { width: 100%; margin: 0 0 20px 0; }
		.numberPuffList .puffitem:last-child { margin: 0; }
	.topTextContent.video { display: block; }
		.topTextContent.video.smallText { flex-direction: column-reverse; display: flex; }
			.topTextContent.video.smallText .topVideoMedicinSwe { top: 0; }
		.topTextContent.video .textVideoDiv { position: relative; margin: 0 0 30px 0; }
		.topTextContent.video .textDiv { width: 100%; }
		.topTextContent.video .textVideoDiv { width: 100%; }


		.topTextContent.video.smallText .textDiv.small { width: 100%; }
		.topTextContent.video .textVideoDiv.wide { width: 100%; }

		.topTextContent.video .textVideoDiv { width: 100%; text-align: center; }
			.topTextContent.video .textVideoDiv video { height: 410px; width: 100%; }
}

@media screen and (max-width: 480px) {
	.topTextContent { margin: 0 auto 80px auto; }
	.imagePuffTextDiv { top: -120px; margin: 0 0 -20px 0; }
	.textContentBottom { margin: 0 0 60px 0; }
	.fullPuffs .puffitem .puffTextDiv h3 { font-size: 14px; }
	.fullPuffs .puffitem .puffTextDiv p { font-size: 12px; }
}
