.w-iconbox.magic-icon-element {
	--magic-icon-box-size: var(--magic-icon-size-default, 2vw);
	--magic-icon-border-size: 0.15vw;
	--magic-icon-rotation: 0deg;
	--magic-icon-scale: 0.8;
}

.w-iconbox.magic-icon-size_small { --magic-icon-box-size: var(--magic-icon-size-small, 1.4vw); }
.w-iconbox.magic-icon-size_medium { --magic-icon-box-size: var(--magic-icon-size-medium, 2vw); }
.w-iconbox.magic-icon-size_large { --magic-icon-box-size: var(--magic-icon-size-large, 2.8vw); }
.w-iconbox.magic-icon-size_very-large { --magic-icon-box-size: var(--magic-icon-size-very-large, 3.6vw); }

.w-iconbox.magic-icon-element .w-iconbox-icon {
	font-size: var(--magic-icon-box-size) !important;
	line-height: 1;
}

.w-iconbox.magic-icon-element .w-iconbox-icon > i {
	display: inline-grid;
	position: relative;
	width: var(--magic-icon-box-size);
	height: var(--magic-icon-box-size);
	border: 0;
	border-radius: 0;
	background: transparent;
	place-items: center;
}

.w-iconbox.magic-icon-element .w-iconbox-icon > i::before {
	display: block;
	width: 100%;
	height: 100%;
	content: "";
	background: var(--icon-color, currentColor);
	-webkit-mask: url("../../img/icons/arrowup.svg") center / contain no-repeat;
	mask: url("../../img/icons/arrowup.svg") center / contain no-repeat;
	transform: rotate(var(--magic-icon-rotation)) scale(var(--magic-icon-scale));
}

.w-iconbox.magic-icon-element[class*="magic-icon--chevron-"] .w-iconbox-icon > i::before {
	-webkit-mask-image: url("../../img/icons/chevronup.svg");
	mask-image: url("../../img/icons/chevronup.svg");
}

.w-iconbox.magic-icon--plus .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/plus.svg"); mask-image: url("../../img/icons/plus.svg"); }
.w-iconbox.magic-icon--download .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/download.svg"); mask-image: url("../../img/icons/download.svg"); }
.w-iconbox.magic-icon--download-2 .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/download2.svg"); mask-image: url("../../img/icons/download2.svg"); }
.w-iconbox.magic-icon--checked .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/checked.svg"); mask-image: url("../../img/icons/checked.svg"); }
.w-iconbox.magic-icon--cross .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/cross.svg"); mask-image: url("../../img/icons/cross.svg"); }
.w-iconbox.magic-icon--star .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/star.svg"); mask-image: url("../../img/icons/star.svg"); }
.w-iconbox.magic-icon--marker .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/marker.svg"); mask-image: url("../../img/icons/marker.svg"); }
.w-iconbox.magic-icon--phone .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/phone.svg"); mask-image: url("../../img/icons/phone.svg"); }
.w-iconbox.magic-icon--envelope .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/envelope.svg"); mask-image: url("../../img/icons/envelope.svg"); }
.w-iconbox.magic-icon--envelope-2 .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/envelope2.svg"); mask-image: url("../../img/icons/envelope2.svg"); }
.w-iconbox.magic-icon--social-instagram .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/social-instagram.svg"); mask-image: url("../../img/icons/social-instagram.svg"); }
.w-iconbox.magic-icon--social-facebook .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/social-facebook.svg"); mask-image: url("../../img/icons/social-facebook.svg"); }
.w-iconbox.magic-icon--social-youtube .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/social-youtube.svg"); mask-image: url("../../img/icons/social-youtube.svg"); }
.w-iconbox.magic-icon--social-linkedin .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/social-linkedin.svg"); mask-image: url("../../img/icons/social-linkedin.svg"); }
.w-iconbox.magic-icon--logo-emblem .w-iconbox-icon > i::before,
.w-iconbox.magic-icon--logoemb .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/logoemb.svg"); mask-image: url("../../img/icons/logoemb.svg"); }
.w-iconbox.magic-icon--holder .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/holder.svg"); mask-image: url("../../img/icons/holder.svg"); }
.w-iconbox.magic-icon--rings .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/rings.svg"); mask-image: url("../../img/icons/rings.svg"); }
.w-iconbox.magic-icon--cheers .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/cheers.svg"); mask-image: url("../../img/icons/cheers.svg"); }
.w-iconbox.magic-icon--thunder-1 .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/thunder1.svg"); mask-image: url("../../img/icons/thunder1.svg"); }
.w-iconbox.magic-icon--thunder-2 .w-iconbox-icon > i::before { -webkit-mask-image: url("../../img/icons/thunder2.svg"); mask-image: url("../../img/icons/thunder2.svg"); }

.w-iconbox.magic-icon-element[class*="magic-icon--document"] .w-iconbox-icon > i::before {
	-webkit-mask-image: url("../../img/icons/document.svg");
	mask-image: url("../../img/icons/document.svg");
	transform: scale(var(--magic-icon-scale));
}

.w-iconbox.magic-icon--document-pdf .w-iconbox-icon > i::after,
.w-iconbox.magic-icon--document-doc .w-iconbox-icon > i::after,
.w-iconbox.magic-icon--document-docx .w-iconbox-icon > i::after {
	position: absolute;
	top: 42%;
	left: 39%;
	z-index: 1;
	color: var(--magic-document-extension-color, #00bbf2);
	font-family: Arial, sans-serif;
	font-size: .28em;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	transform: translate(-50%, -50%);
}

.w-iconbox.magic-icon--document-pdf .w-iconbox-icon > i::after { content: "PDF"; }
.w-iconbox.magic-icon--document-doc .w-iconbox-icon > i::after { content: "DOC"; }
.w-iconbox.magic-icon--document-docx .w-iconbox-icon > i::after { content: "DOCX"; font-size: .23em; }

.w-iconbox.magic-icon--chevron-right { --magic-icon-rotation: 90deg; }
.w-iconbox.magic-icon--chevron-down { --magic-icon-rotation: 180deg; }
.w-iconbox.magic-icon--chevron-left { --magic-icon-rotation: -90deg; }

.w-iconbox.magic-icon-style--circled .w-iconbox-icon > i {
	border: var(--magic-icon-border-size) solid currentColor;
	border-radius: 50%;
}

@media (max-width: 800px) {
	.w-iconbox.magic-icon-element {
		--magic-icon-box-size: 32px;
		--magic-icon-border-size: 2px;
	}
}
