main[data-page="index"] > section > header > h1:before {
	content: "Digital Sovereignity and Protection from Cyber Attacks";
}

main[data-page="index"] > section > header > h2:before {
	content: "Automated Cyber Security for Infrastructures, Networks and Connected Systems";
}

main[data-page="index"] > section {
	text-align: center;
}

main[data-page="index"] > section > article {
	display: inline-block;
	width: 544px;
	min-height: 288px;
	margin: 0px;
	vertical-align: top;
}

main[data-page="index"] > section > article > p {
	font-family: 'museo';
	font-size: 20px;
	text-align: justify;
}

main[data-page="index"] > section:not(:has(figure)) > article {
	width: 640px;
}

main[data-page="index"] > section > figure {
	display: inline-block;
	width: 544px;
	min-height: 288px;
	margin: 0px;
	vertical-align: top;
}

main[data-page="index"] > section > figure:empty {
	display: none;
}

main[data-page="index"] > section:nth-child(2n) {
	position: relative;
	padding: 96px 32px 96px 32px;
}

main[data-page="index"] > section:nth-child(2n):before {
	display: block;
	position: absolute;
	content: " ";
	width: calc(100% + 32px);
	height: auto;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	background: var(--surface-default-background);
	border: 0px solid transparent;
	border-top: 8px solid var(--layout-default-color);
	border-bottom: 8px solid var(--layout-default-color);
	transform: rotate(-3deg) translate(-16px, 0px);
	z-index: -1;
}

main[data-page="index"] > section:nth-child(4n):before {
	transform: rotate(3deg) translate(-16px, 0px);
}

@supports(display: grid) {

	main[data-page="index"] > section:nth-child(2n):after {
		display: block;
		position: absolute;
		content: " ";
		width: calc(100% + 32px);
		height: auto;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
		background: transparent;
		border: 0px solid transparent;
		border-top: 8px solid var(--layout-default-color);
		border-bottom: 8px solid var(--layout-default-color);
		z-index: -1;
		animation: glitch-one 10s infinite alternate-reverse;
		animation-timing-function: step-start;
		transform: rotate(-3deg) translate(-16px, 0px);
	}

	@keyframes glitch-one {
		  0% { transform: rotate(-3deg) translate(calc(-16px + 0px),  0px); border-top: 8px solid #ffffff; border-bottom: 8px solid #ffffff; }
		  1% { transform: rotate(-3deg) translate(calc(-16px + 0px),  2px); border-top: 8px solid #ff00c1; border-bottom: 8px solid #ff00c1; }
		  2% { transform: rotate(-4deg) translate(calc(-16px + 4px),  2px); border-top: 8px solid #ff00c1; border-bottom: 8px solid #ff00c1; }
		  3% { transform: rotate(-3deg) translate(calc(-16px - 4px), -2px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 50% { transform: rotate(-3deg) translate(calc(-16px + 0px),  0px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 51% { transform: rotate(-3deg) translate(calc(-16px + 0px),  2px); border-top: 8px solid #00ffc1; border-bottom: 8px solid #00ffc1; }
		 52% { transform: rotate(-4deg) translate(calc(-16px + 4px),  2px); border-top: 8px solid #00ffc1; border-bottom: 8px solid #00ffc1; }
		 53% { transform: rotate(-3deg) translate(calc(-16px - 4px), -2px); border-top: 0px solid #00ffc1; border-bottom: 0px solid #00ffc1; }
		 54% { transform: rotate(-3deg) translate(calc(-16px + 0px),  0px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 97% { transform: rotate(-3deg) translate(calc(-16px + 0px),  0px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 98% { transform: rotate(-3deg) translate(calc(-16px + 0px),  2px); border-top: 8px solid #c100ff; border-bottom: 8px solid #c100ff; }
		 99% { transform: rotate(-4deg) translate(calc(-16px + 4px),  2px); border-top: 0px solid #c100ff; border-bottom: 0px solid #c100ff; }
		100% { transform: rotate(-3deg) translate(calc(-16px - 4px), -2px); border-top: 8px solid #ffffff; border-bottom: 8px solid #ffffff; }
	}

	main[data-page="index"] > section:nth-child(4n):after {
		animation: glitch-two 10s infinite alternate-reverse;
		animation-timing-function: step-start;
		transform: rotate(3deg) translate(-16px, 0px);
	}

	@keyframes glitch-two {
		  0% { transform: rotate(3deg) translate(calc(-16px + 0px),  0px); border-top: 8px solid #ffffff; border-bottom: 8px solid #ffffff; }
		  1% { transform: rotate(3deg) translate(calc(-16px + 0px),  2px); border-top: 8px solid #ff00c1; border-bottom: 8px solid #ff00c1; }
		  2% { transform: rotate(4deg) translate(calc(-16px + 4px),  2px); border-top: 8px solid #ff00c1; border-bottom: 8px solid #ff00c1; }
		  3% { transform: rotate(3deg) translate(calc(-16px - 4px), -2px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 50% { transform: rotate(3deg) translate(calc(-16px + 0px),  0px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 51% { transform: rotate(3deg) translate(calc(-16px + 0px),  2px); border-top: 8px solid #00ffc1; border-bottom: 8px solid #00ffc1; }
		 52% { transform: rotate(4deg) translate(calc(-16px + 4px),  2px); border-top: 8px solid #00ffc1; border-bottom: 8px solid #00ffc1; }
		 53% { transform: rotate(3deg) translate(calc(-16px - 4px), -2px); border-top: 0px solid #00ffc1; border-bottom: 0px solid #00ffc1; }
		 54% { transform: rotate(3deg) translate(calc(-16px + 0px),  0px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 97% { transform: rotate(3deg) translate(calc(-16px + 0px),  0px); border-top: 0px solid #ffffff; border-bottom: 0px solid #ffffff; }
		 98% { transform: rotate(3deg) translate(calc(-16px + 0px),  2px); border-top: 8px solid #c100ff; border-bottom: 8px solid #c100ff; }
		 99% { transform: rotate(4deg) translate(calc(-16px + 4px),  2px); border-top: 0px solid #c100ff; border-bottom: 0px solid #c100ff; }
		100% { transform: rotate(3deg) translate(calc(-16px - 4px), -2px); border-top: 8px solid #ffffff; border-bottom: 8px solid #ffffff; }
	}

}



@supports(display: grid) {

	section[data-section="sovereignity"] > figure > svg g.attackers g path,
	section[data-section="sovereignity"] > figure > svg g.defenders g path {
		transition: 250ms all ease-out;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g circle,
	section[data-section="sovereignity"] > figure > svg g.defenders g circle {
		transition: 250ms all ease-out;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.inactive path {
		stroke: transparent !important;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.inactive circle {
		fill: transparent !important;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.active path {
		stroke: #ff22cc !important;
		animation: network 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="sovereignity"] > figure > svg g.attackers g.active circle {
		fill: #ff22cc !important;
	}

	section[data-section="sovereignity"] > figure > svg g.defenders g.active path {
		stroke: #22ccff !important;
		animation: network 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="sovereignity"] > figure > svg g.defenders g.active circle {
		/* fill: #22ccff !important; */
		animation: capture 1000ms infinite;
		animation-timing-function: linear;
	}

	@keyframes network {
		0%   { stroke-dashoffset:   0; }
		50%  { stroke-dashoffset:  -8; }
		100% { stroke-dashoffset: -16; }
	}

	@keyframes capture {
		0%   { fill: #22ccff; }
		50%  { fill: #ff22cc; }
		100% { fill: #22ccff; }
	}

}



@supports(display: grid) {

	section[data-section="network-security"] > figure > svg g.attackers g path,
	section[data-section="network-security"] > figure > svg g.defenders g path {
		transition: 250ms all ease-out;
	}

	section[data-section="network-security"] > figure > svg g.attackers g circle,
	section[data-section="network-security"] > figure > svg g.defenders g circle {
		transition: 250ms all ease-out;
	}

	section[data-section="network-security"] > figure > svg g.attackers g.active path {
		stroke: #ff22cc !important;
		animation: network-attack 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="network-security"] > figure > svg g.attackers g.active circle {
		fill: #ff22cc !important;
	}

	section[data-section="network-security"] > figure > svg g.defenders g.active path {
		stroke: #22ccff !important;
		animation: network-attack 500ms infinite;
		animation-timing-function: linear;
	}

	section[data-section="network-security"] > figure > svg g.firewalls g.active path {
		stroke: #22ccff !important;
		animation: network-defend 500ms infinite;
		animation-timing-function: linear;
	}

	@keyframes network-attack {
		0%   { stroke-dashoffset:   0; }
		50%  { stroke-dashoffset:  -8; }
		100% { stroke-dashoffset: -16; }
	}

	@keyframes network-defend {
		0%   { stroke-dashoffset:  0; }
		50%  { stroke-dashoffset:  8; }
		100% { stroke-dashoffset: 16; }
	}

}



@supports(display: grid) {

	section[data-section="security-compliance"] > figure > svg text {
		font-family: 'crystalline';
		font-size: 24px;
		font-weight: 500;
		line-height: 32px;
		text-align: center;
		text-transform: uppercase;
	}

	section[data-section="security-compliance"] > figure > svg g circle,
	section[data-section="security-compliance"] > figure > svg g rect,
	section[data-section="security-compliance"] > figure > svg g path {
		fill: transparent !important;
		stroke: transparent !important;
		transition: 500ms all ease-out;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="1"].active circle,
	section[data-section="security-compliance"] > figure > svg g[data-item="2"].active circle,
	section[data-section="security-compliance"] > figure > svg g[data-item="3"].active circle {
		stroke: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="1"].active path,
	section[data-section="security-compliance"] > figure > svg g[data-item="2"].active path,
	section[data-section="security-compliance"] > figure > svg g[data-item="3"].active path {
		stroke: #22ccff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="1"].active rect,
	section[data-section="security-compliance"] > figure > svg g[data-item="2"].active rect,
	section[data-section="security-compliance"] > figure > svg g[data-item="3"].active rect {
		fill: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="4"].active circle {
		fill: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.attack circle {
		stroke: #ff22cc !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.attack rect {
		fill: #ff22cc !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.defend circle {
		stroke: #22ccff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.defend rect {
		fill: #22ccff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.normal circle {
		stroke: #ffffff !important;
	}

	section[data-section="security-compliance"] > figure > svg g[data-item="5"].active g.normal rect {
		fill: #ffffff !important;
	}

}



@supports(display: grid) {

	section[data-section="threat-intelligence"] > figure > svg g.defenders path {
		stroke: #22ccff !important;
		animation: network-scrape 500ms infinite;
		animation-timing-function: linear;
		transition: 250ms all ease-out;
	}

	section[data-section="threat-intelligence"] > figure > svg g.defenders circle {
		animation: network-grow 1000ms infinite;
		animation-timing-function: ease-out;
	}

	@keyframes network-scrape {
		0%   { stroke-dashoffset:   0; }
		50%  { stroke-dashoffset:  -8; }
		100% { stroke-dashoffset: -16; }
	}

	@keyframes network-grow {
		0%   { fill: #22ccff !important; r: 16; }
		50%  { fill: #ffffff !important; r: 20; }
		100% { fill: #22ccff !important; r: 16; }
	}

}



@media (max-width: 640px) {

	main[data-page="index"] > section:nth-child(2n) {
		padding-left: 0px;
		padding-right: 0px;
	}

	main[data-page="index"] > section > article {
		display: block;
		width: auto;
	}

	main[data-page="index"] > section > figure {
		display: block;
		width: auto;
	}

}

@media (max-width: 512px) {

	main[data-page="index"] > section > figure > svg {
		display: block;
		width: 100% !important;
		height: auto !important;
	}

}