._p-header > .robot{
	position: absolute;
	bottom: -120px;
	left: var(--page-hor-padding);
	z-index: 1;
}

._p-header > .robot > div{
	--header-border: 4px solid rgba(var(--green-rgb), 0.8);

	display: flex;
	padding: 10px 20px 0 20px;
	background-color: rgba(var(--grey-90-rgb), 0.8);
	border-top: var(--header-border);
	border-left: var(--header-border);
	border-right: var(--header-border);
	border-radius: 15px 15px 0 0;
	transition: 
		background-color 50ms ease,
		border 50ms ease;
	align-items: center;
	gap: 20px;
}

._p-header > .robot.animate{
	transform: translateY(-120px);
	transition: transform 500ms ease-in;
}

._p-header > .robot.animate > div{
	animation: robot-shake 5000ms;
	animation-iteration-count: infinite;
}

._p-header > .robot > div:hover{
	background-color: rgba(var(--grey-70-rgb), 0.8);
	transition: background-color 150ms ease, border 150ms ease;
}

._p-header > .robot > div > .icon{
	height: 70px;
	margin-bottom: -5px;
	animation-name: robot-spin;
	animation-duration: 3000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

._p-header > .robot > div > .logo{
	width: 350px;
}


@media (max-width: 1280px) {
	._p-header > .robot > div{
		padding: 6px 12px;
		border-radius: 10px 10px 0 0;
		gap: 12px;
	}
	
	._p-header > .robot > div > .icon{
		height: 40px;
	}
	
	._p-header > .robot > div > .logo{
		width: 200px;
	}
}

@keyframes robot-spin {
	0% {
		transform: rotate(5deg);
	}
	25% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(-5deg);
	}
	75% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(5deg);
	}
}
  
/* @keyframes robot-shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	10% { transform: translate(-1px, -2px) rotate(-1deg); }
	20% { transform: translate(-3px, 0px) rotate(1deg); }
	30% { transform: translate(3px, 2px) rotate(0deg); }
	40% { transform: translate(1px, -1px) rotate(1deg); }
	50% { transform: translate(-1px, 2px) rotate(-1deg); }
	60% { transform: translate(-3px, 1px) rotate(0deg); }
	70% { transform: translate(3px, 1px) rotate(-1deg); }
	80% { transform: translate(-1px, -1px) rotate(1deg); }
	90% { transform: translate(1px, 2px) rotate(0deg); }
	100% { transform: translate(1px, -2px) rotate(-1deg); }
} */

@keyframes robot-shake {
	0% { transform: translate(1px, 1px) rotate(0deg); }
	1% { transform: translate(-1px, -2px) rotate(-1deg); }
	2% { transform: translate(-3px, 0px) rotate(1deg); }
	3% { transform: translate(3px, 2px) rotate(0deg); }
	4% { transform: translate(1px, -1px) rotate(1deg); }
	5% { transform: translate(-1px, 2px) rotate(-1deg); }
	6% { transform: translate(-3px, 1px) rotate(0deg); }
	7% { transform: translate(3px, 1px) rotate(-1deg); }
	8% { transform: translate(-1px, -1px) rotate(1deg); }
	9% { transform: translate(1px, 2px) rotate(0deg); }
	10% { transform: translate(1px, -2px) rotate(-1deg); }
	11% { transform: translate(1px, 1px) rotate(0deg); }
	12% { transform: translate(-1px, -2px) rotate(-1deg); }
	13% { transform: translate(-3px, 0px) rotate(1deg); }
	14% { transform: translate(3px, 2px) rotate(0deg); }
	15% { transform: translate(1px, -1px) rotate(1deg); }
	16% { transform: translate(-1px, 2px) rotate(-1deg); }
	17% { transform: translate(-3px, 1px) rotate(0deg); }
	18% { transform: translate(3px, 1px) rotate(-1deg); }
	19% { transform: translate(-1px, -1px) rotate(1deg); }
	20% { transform: translate(1px, 2px) rotate(0deg); }
	21% { transform: translate(1px, -2px) rotate(-1deg); }
	22% { transform: translate(0, 0) rotate(0); }
	100% {}
}