body{
	background-color: var(--fekete);
}

#menu-home-logo{
	position: fixed;
	top: calc(4px + 0.5vh);
	left: calc(4px + 0.5vh);
	margin-top: -12vh;
	margin-bottom: 12vh;
	transition: 0.2s;
	width: 6vh;
	height: 6vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
	z-index: 1;
}

#menu-home-logo.active{
	margin-top: 0vh;
	margin-bottom: 0vh;
}

#menu-home-logo svg{
	width: 100%;
	height: 100%;
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--front_accent);
	stroke-width: 6;
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
}

#menu-home-logo-1{
	margin-top: 1vh;
	margin-bottom: -1vh;
	transition: 0.2s;
}

#menu-home-logo-2{
	margin-top: -1vh;
	margin-bottom: 1vh;
	transition: 0.2s;
}

#menu-home-logo:hover{
	cursor: pointer;
	transform: scale(1.2);
}

#menu-home-logo:hover #menu-home-logo-1{
	margin-top: 0;
	margin-bottom: 0;
}

#menu-home-logo:hover #menu-home-logo-2{
	margin-top: 0;
	margin-bottom: 0;
}


#menu{
	position: fixed;
	top: 4px;
	right: 0;
	width: 40vw;
	display: flex;
	justify-content: space-evenly;
	z-index: 1;
	pointer-events: none;
}

.menu-el{
	margin-top: -6vh;
	margin-bottom: 6vh;
	opacity: 0.0;
	transition: 0.2s;
}

#menu.active .menu-el{
	margin-top: 0;
	margin-bottom: 0;
	opacity: 1.0;
	pointer-events: all;
}

#menu.active .menu-el:hover{
	cursor: pointer;
}

.menu-el svg{
	width: 6vh;
	height: 6vh;
	stroke: var(--vilagosszurke);
	stroke-width: 8;
	fill: rgba(0, 0, 0, 0.0);
}

#menu-about{
	transition-delay: 0.1s;
}

#menu-img{
	transition-delay: 0.1s;
}

#menu-code{
	transition-delay: 0.2s;
}

#menu-kuka{
	transition-delay: 0.3s;
}


.res-wide .menu-title{
	height: 0vh;
	overflow: hidden;
}

.menu-title p{
	color: var(--piros);
	font-size: 18px;
	text-align: center;
	font-family: Roboto-regular;
}

.res-wide #menu.active .menu-el:hover .menu-title{
	height: 20px;
}

#menu.active .menu-el svg{
	margin: 0 0 0 0;
	transition: 0.2s;
}

#menu.active .menu-el:hover svg{
	margin: -4px 0 4px 0;
}

#menu.active #menu-about svg *{
	stroke: var(--about_accent);
}
#menu.active #menu-about p{
	color: var(--about_accent);
}

#menu.active #menu-img svg *{
	stroke: var(--img_accent);
}
#menu.active #menu-img p{
	color: var(--img_accent);
}


#menu.active #menu-code svg *{
	stroke: var(--code_accent);
}
#menu.active #menu-code p{
	color: var(--code_accent);
}

#menu.active #menu-kuka svg *{
	stroke: var(--kuka_accent);
}
#menu.active #menu-kuka p{
	color: var(--kuka_accent);
}

#front-bcg div{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.0;
	transition: 0.6s;
	z-index: 0;
}

#front-bcg .active{
	opacity: 1.0;
}

#front-bcg-front{
	background-color: var(--front_bcg);
}

#front-bcg-about{
	background-color: var(--about_bcg);
}

#front-bcg-img{
	background-color: var(--img_bcg);
}

#front-bcg-code{
	background-color: var(--code_bcg);
}

#front-bcg-kuka{
	background-color: var(--kuka_bcg);
}

#front-shape-holder{
	position: fixed;
	width: 70vh;
	height: 70vh;
	top: calc(50% - 35vh);
	left: calc(50% - 35vh);
	transition: 1s;
}

#front-content{
	position: fixed;
	width: 70vh;
	height: 70vh;
	top: calc(50% - 35vh);
	left: calc(50% - 35vh);
	transition: 1s;
}

#front-content h2{
	color: var(--vilagosszurke);
	text-align: center;
	font-family: Roboto-light;
	font-size: 4vh;
	margin-top: 2vh;
}

.front-shape{
	position: fixed;
	width: 70vh;
	height: 70vh;
	top: calc(50% - 35vh);
	left: calc(50% - 35vh);

	stroke: var(--vilagosszurke);
	stroke-width: 1;
	stroke-dasharray: 1000;
	stroke-dashoffset: 1000;
	fill: rgba(0, 0, 0, 0.0);
}

.front-shape.active {
	opacity: 1.0;
	animation: shapeEnter 0.5s linear forwards;
	animation-delay: 0.5s;
}

.front-shape.gone {
	stroke-dashoffset: 0;
	opacity: 1.0;
	animation: shapeExit 0.5s linear forwards;
}

@keyframes shapeEnter{
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes shapeExit{
  to {
    stroke-dashoffset: 1000;
  }
}


#front-shape-img.gone{
	transform: rotateX(180deg);
}

#front-shape-code.gone{
	transform: rotateY(180deg);
}

#front-shape-kuka.gone{
	transform: rotateY(180deg);
}

#front-shape-front *{
	stroke: var(--front_accent);
}

#front-shape-about *{
	stroke: var(--about_accent);
}

#front-shape-img *{
	stroke: var(--img_accent);
}

#front-shape-code *{
	stroke: var(--code_accent);
}

#front-shape-kuka *{
	stroke: var(--kuka_accent);
}

#front-side-1{
	position: fixed;
	width: calc((100vw - 70vh) / 2);
	height: 100vh;
	top: 0;
}

#front-side-2{
	position: fixed;
	width: calc((100vw - 70vh) / 2);
	height: 100vh;
	top: 0;
	left: calc(((100vw - 70vh) / 2) + 70vh);
}

#front-main.about #front-shape{
	border-radius: 70vh;
}

#about-sides{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 40vh;
	width: 100%;
	height: 100%;
	justify-items: center;
	align-items: center;
}

.about-side-div{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
	width: 20vh;
	height: 20vh;
	transition: 0.2s;
	pointer-events: all;
	transform: scale(0.0);
}

#about-side-0, #about-side-2{
	margin-top: 10vh;
}

#about-side-1, #about-side-3{
	margin-bottom: 10vh;
}

.about-side-div.active{
	animation: aboutSideAppear 0.2s linear 1 forwards;

}

@keyframes aboutSideAppear{
	0%{
		transform: scale(0.0);
	}
	80%{
		transform: scale(1.1);
	}
	100%{
		transform: scale(1.0);
	}
}

.about-side-div:hover{
	cursor: pointer;
}

.res-wide .about-side-div .about-side-title{
	height: 0vh;
	width: 100%;
	overflow: hidden;
	transition: 0.2s;
}

.res-wide .about-side-div:hover .about-side-title{
	height: 5vh;
	width: 100%;
}

.res-wide .about-side-div h3{
	text-align: center;
	color: var(--feher);
	margin-top: 12px;
	font-family: Roboto-regular;
	font-size: 24px;
}

.about-side-image{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	width: 15vh;
	height: 15vh;
}

.about-side-image > svg{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	height: 15vh;
	width: 15vh;
}

.about-side-image > svg *{
	stroke: var(--vilagosszurke);
	stroke-width: 4;
	fill: rgba(0, 0, 0, 0.0);
}

.about-side-inner{
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	display: none;
}

.about-side-div.entered .about-side-inner{
	display: block;
}

#about-side-0 svg *{
	stroke: var(--about_accent);
}
#about-side-0 h3{
	color: var(--about_accent);
}

#about-side-1 svg *{
	stroke: var(--img_accent);
}
#about-side-1 h3{
	color: var(--img_accent);
}

#about-side-2 svg *{
	stroke: var(--code_accent);
}
#about-side-2 h3{
	color: var(--code_accent);
}

#about-side-3 svg *{
	stroke: var(--kuka_accent);
}
#about-side-3 h3{
	color: var(--kuka_accent);
}

/* about about image */

.about-side-div.entered #about-about-subshapes{
	display: grid;
}

#about-about-subshapes{
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#about-about-subshapes svg{
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	width: 100%;
	height: 100%;
}

#about-about-subshapes polygon{
	stroke: var(--about_accent);
	stroke-width: 2;
	fill: rgba(0, 0, 0, 0.0);
	
}

#about-about-subshape-0{
	animation: aboutAboutAnimBe 90s linear infinite;
}
#about-about-subshape-1{
	animation: aboutAboutAnimBe 95s linear infinite;
}
#about-about-subshape-2{
	animation: aboutAboutAnimBe 100s linear infinite;
}
#about-about-subshape-3{
	animation: aboutAboutAnimBe 105s linear infinite;
}
#about-about-subshape-4{
	animation: aboutAboutAnimBe 110s linear infinite;
}

#about-about-subshape-5{
	animation: aboutAboutAnimKi 90s linear infinite;
}
#about-about-subshape-6{
	animation: aboutAboutAnimKi 95s linear infinite;
}
#about-about-subshape-7{
	animation: aboutAboutAnimKi 100s linear infinite;
}
#about-about-subshape-8{
	animation: aboutAboutAnimKi 105s linear infinite;
}
#about-about-subshape-9{
	animation: aboutAboutAnimKi 110s linear infinite;
}

@keyframes aboutAboutAnimBe{
	0%{
		transform: rotate(360deg) scale(1.0);
		opacity: 0.4;
	}
	50%{
		transform: rotate(180deg) scale(0.9);
		opacity: 0.2;
	}
	100%{
		transform: rotate(0deg) scale(1.0);
		opacity: 0.4;
	}
}

@keyframes aboutAboutAnimKi{
	0%{
		transform: rotate(0deg) scale(1.0);
		opacity: 0.5;
	}
	50%{
		transform: rotate(180deg) scale(1.15);
		opacity: 0.25;
	}
	100%{
		transform: rotate(360deg) scale(1.0);
		opacity: 0.5;
	}
}


/*about code image*/
#about-side-inner-2{
	clip-path: polygon(1% 99%, 99% 99%, 50% 1%, 1% 99%);
	width: 15vh;
	height: 15vh;
}

#about-code-dot-wrapper{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	width: 10vh;
	margin-left: 2.5vh;

	position: absolute;
	bottom: 0;
	left: 0;
}

.about-code-dot-holder{
	width: calc(15vh / 12);
}

.about-code-dot{
	width: calc(15vh / 14);
	height: calc(15vh / 14);
	border-radius: 10vh;
	border: 1px solid rgba(0, 0, 0, 0.0);
	box-sizing: border-box;
}

.about-code-dot.filled{
	background-color: var(--feher);
}

/* about image image */

.about-side-div.entered #about-side-inner-1{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

.about-img{
	grid-row: 1 / span 1;
	grid-column:  1 / span 1;
	width: 14vh;
	height: 14vh;
	margin: 0.5vh;
	
	opacity: 0.0;
	transition: 0.5s;
}

.about-img.current{
	opacity: 1.0;
}

/* about-kuka */

#about-kuka-kocka-holder{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	width: 15vh;
	height: 15vh;
	clip-path: polygon(1% 1%, 99% 1%, 78% 99%, 22% 99%, 1% 1%);
}

#about-kuka-kocka-holder div{
	width: 1.5vh;
	height: 1.5vh;
	display: none;
}

#about-side-3.entered #about-kuka-kocka-holder div{
	display: block;
}

#about-side-3.cursor-0{
	cursor: auto;
}

#about-side-3.cursor-1{
	cursor: help;
}

#about-side-3.cursor-2{
	cursor: pointer;
}

#about-side-3.cursor-3{
	cursor: progress;
}

#about-side-3.cursor-4{
	cursor: wait;
}

#about-side-3.cursor-5{
	cursor: cell;
}

#about-side-3.cursor-6{
	cursor: crosshair;
}

#about-side-3.cursor-7{
	cursor: vertical-text;
}

#about-side-3.cursor-8{
	cursor: alias;
}

#about-side-3.cursor-9{
	cursor: copy;
}

#about-side-3.cursor-10{
	cursor: move;
}

#about-side-3.cursor-11{
	cursor: not-allowed;
}

#about-side-3.cursor-12{
	cursor: col-resize;
}

#about-side-3.cursor-13{
	cursor: row-resize;
}

#about-side-3.cursor-14{
	cursor: grab;
}

#about-side-3.cursor-15{
	cursor: ne-resize;
}

#about-side-3.cursor-16{
	cursor: nw-resize;
}

#about-side-3.cursor-17{
	cursor: zoom-in;
}

#about-side-3.cursor-18{
	cursor: zoom-out;
}

#about-side-3.cursor-18{
	cursor: url(assts/kuka/kaka.png);
}


#about-logo{
	opacity: 0.0;
	transition: 1s;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
	margin-top: -5vh;
}

#about-logo.active{
	opacity: 1.0;
}

#about-logo svg{
	width: 24vh;
	height: 24vh;
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	stroke: var(--front_accent);
	stroke-width: 2;
	fill: rgba(0, 0, 0, 0.0);
}

#about-logo-1{
	
}

#about-logo-2{
	margin-top: 16vh;
}

#about-title{
	color: var(--front_accent) !important;
}

#about-text{
	text-align: center;
	margin-top: 1vh;
	font-size: 2.6vh;
	font-family: Roboto-light;
	color: var(--front_accent);
}


.about-side-div.menu{
	margin-top: 100vh;
	margin-bottom: -100vh;
}

#front-subshapes{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
}

#front-subshapes svg{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	width: 70vh;
	height: 70vh;
	transition: 0.2s;
	opacity: 0.0;
}

#front-subshapes svg *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--front_accent);
	stroke-width: 0.5;
}

#front-subshapes.active .front-subshape{
	opacity: 0.5;
	stroke-dasharray: 1000;
	stroke-dashoffset: 800;

}

#front-subshapes.active #front-subshape-0-0{
	animation: frontSubshapeAnim00 6s linear infinite;
}

#front-subshapes.active #front-subshape-0-1{
	animation: frontSubshapeAnim01 6s linear infinite;
}

#front-subshapes.active #front-subshape-0-2{
	animation: frontSubshapeAnim02 6s linear infinite;
}

@keyframes frontSubshapeAnim00{
	0%{
		transform: scale(1.0) rotate(0deg);
		opacity: 0.0;
	}
	20%{
		transform: scale(0.97) rotate(0deg);
		opacity: 0.5;
	}
	60%{
		transform: scale(0.97) rotate(180deg);
		opacity: 0.5;
	}
	90%{
		transform: scale(0.97) rotate(360deg);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.0) rotate(360deg);
		opacity: 0.0;
	}
}

@keyframes frontSubshapeAnim01{
	0%{
		transform: scale(1.0) rotate(0deg);
		opacity: 0.0;
	}
	10%{
		transform: scale(1.0) rotate(0deg);
		opacity: 0.0;
	}
	25%{
		transform: scale(0.94) rotate(0deg);
		opacity: 0.5;
	}
	60%{
		transform: scale(0.94) rotate(180deg);
		opacity: 0.5;
	}
	90%{
		transform: scale(0.94) rotate(360deg);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.0) rotate(360deg);
		opacity: 0.0;
	}
}

@keyframes frontSubshapeAnim02{
	0%{
		transform: scale(1.0) rotate(0deg);
		opacity: 0.0;
	}
	20%{
		transform: scale(1.0) rotate(0deg);
		opacity: 0.0;
	}
	30%{
		transform: scale(0.91) rotate(0deg);
		opacity: 0.5;
	}
	60%{
		transform: scale(0.91) rotate(180deg);
		opacity: 0.5;
	}
	90%{
		transform: scale(0.91) rotate(360deg);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.0) rotate(360deg);
		opacity: 0.0;
	}
}

#front-subshapes.active #front-subshape-1-0{
	animation: frontSubshapeAnim10 6s linear infinite;
}

#front-subshapes.active #front-subshape-1-1{
	animation: frontSubshapeAnim11 6s linear infinite;
}

#front-subshapes.active #front-subshape-1-2{
	animation: frontSubshapeAnim12 6s linear infinite;
}

@keyframes frontSubshapeAnim10{
	0%{
		transform: scale(1.0) rotate(180deg);
		opacity: 0.0;
	}
	20%{
		transform: scale(1.03) rotate(180deg);
		opacity: 0.5;
	}
	60%{
		transform: scale(1.03) rotate(0deg);
		opacity: 0.5;
	}
	90%{
		transform: scale(1.03) rotate(-180deg);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.0) rotate(-180deg);
		opacity: 0.0;
	}
}

@keyframes frontSubshapeAnim11{
	0%{
		transform: scale(1.0) rotate(180deg);
		opacity: 0.0;
	}
	10%{
		transform: scale(1.0) rotate(180deg);
		opacity: 0.0;
	}
	25%{
		transform: scale(1.06) rotate(180deg);
		opacity: 0.5;
	}
	60%{
		transform: scale(1.06) rotate(0deg);
		opacity: 0.5;
	}
	90%{
		transform: scale(1.06) rotate(-180deg);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.0) rotate(-180deg);
		opacity: 0.0;
	}
}

@keyframes frontSubshapeAnim12{
	0%{
		transform: scale(1.0) rotate(180deg);
		opacity: 0.0;
	}
	20%{
		transform: scale(1.0) rotate(180deg);
		opacity: 0.0;
	}
	30%{
		transform: scale(1.09) rotate(180deg);
		opacity: 0.5;
	}
	60%{
		transform: scale(1.09) rotate(0deg);
		opacity: 0.5;
	}
	90%{
		transform: scale(1.09) rotate(-180deg);
		opacity: 0.5;
	}
	100%{
		transform: scale(1.0) rotate(-180deg);
		opacity: 0.0;
	}
}



/*about*/

#about-subshapes{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
	opacity: 0.0;
	transition: 0.2s;
}

#about-subshapes.active{
	opacity: 1.0;
	transition: 0.2s;
}

.about-subshape{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	width: 70vh;
	height: 70vh;
}

.about-subshape *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--about_accent);
	stroke-width: 0.5;
	opacity: 0.5;
}

#about-subshape-0{
	animation: AboutSubAnim 90s linear infinite;
}

#about-subshape-1{
	animation: AboutSubAnim 95s linear infinite;
}

#about-subshape-2{
	animation: AboutSubAnim 100s linear infinite;
}

#about-subshape-3{
	animation: AboutSubAnim 105s linear infinite;
}

#about-subshape-4{
	animation: AboutSubAnim 110s linear infinite;
}

#about-subshape-5{
	animation: AboutSubAnim 115s linear infinite;
}

#about-subshape-6{
	animation: AboutSubAnim 120s linear infinite;
}

#about-subshape-7{
	animation: AboutSubAnim 125s linear infinite;
}

#about-subshape-8{
	animation: AboutSubAnim 130s linear infinite;
}
#about-subshape-9{
	animation: AboutSubAnim 135s linear infinite;
}
#about-subshape-10{
	animation: AboutSubAnim 140s linear infinite;
}
#about-subshape-11{
	animation: AboutSubAnim 145s linear infinite;
}
#about-subshape-12{
	animation: AboutSubAnim 150s linear infinite;
}

@keyframes AboutSubAnim{
	0%{
		transform: rotate(0deg) scale(1.0);
		opacity: 0.5;
	}
	50%{
		transform: rotate(180deg) scale(1.3);
		opacity: 0.25;
	}
	100%{
		transform: rotate(360deg) scale(1.0);
		opacity: 0.5;
	}
}

#about-subshape-13{
	animation: AboutSubAnimBe 90s linear infinite;
}

#about-subshape-14{
	animation: AboutSubAnimBe 95s linear infinite;
}

#about-subshape-15{
	animation: AboutSubAnimBe 100s linear infinite;
}

#about-subshape-16{
	animation: AboutSubAnimBe 105s linear infinite;
}

#about-subshape-17{
	animation: AboutSubAnimBe 110s linear infinite;
}

#about-subshape-18{
	animation: AboutSubAnimBe 115s linear infinite;
}

#about-subshape-19{
	animation: AboutSubAnimBe 120s linear infinite;
}

#about-subshape-20{
	animation: AboutSubAnimBe 125s linear infinite;
}

#about-subshape-21{
	animation: AboutSubAnimBe 130s linear infinite;
}

#about-subshape-22{
	animation: AboutSubAnimBe 135s linear infinite;
}

@keyframes AboutSubAnimBe{
	0%{
		transform: rotate(360deg) scale(1.0);
		opacity: 0.4;
	}
	50%{
		transform: rotate(180deg) scale(0.8);
		opacity: 0.2;
	}
	100%{
		transform: rotate(0deg) scale(1.0);
		opacity: 0.4;
	}
}



#kontakt-content{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

#kontakt-content h4{
	color: var(--about_accent);
	font-size: 50px;
	font-family: Roboto-thin;
	font-weight: 300;
	margin-bottom: 2vh;
}

#kontakt-content a{
	color: var(--about_accent);
	margin-bottom: 1vh;
	font-size: 24px;
	font-family: Roboto-light;
	font-weight: 300;
	text-decoration: none;
	transition: 0.2s;
}

#kontakt-content a:hover{
	color: var(--front_accent);

}

#social-wrapper{
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	width: 200px;
	margin-top: 3vh;
}

#social-wrapper svg{
	width: 50px;
	height: 50px;
	transform: scale(0.0);
}

#social-wrapper svg.active{
	animation: socialIn 0.2s linear 1 forwards;
}

@keyframes socialIn{
	0%{
		transform: scale(0.0);
	}
	90%{
		transform: scale(1.2);
	}
	100%{
		transform: scale(1.0);
	}
}

#fb-ico *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--about_accent);
	stroke-width: 1;
}

#inas-ico{
	margin-top: 2px;
	margin-bottom: -2px;
}

.inas-ico-vonal{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--about_accent);
	stroke-width: 6;
}

.inas-ico-teli{
	fill: var(--about_accent);
	stroke: var(--about_accent);
	stroke-width: 0;
}

#social-wrapper svg.active:hover{
	cursor: pointer;
}

#social-wrapper svg.active:hover *{
	stroke: var(--front_accent);
}

#social-wrapper svg.active:hover .inas-ico-teli{
	fill: var(--front_accent);
}










/*img*/



#front-shape-img{
	transition: 1s;
}

#front-main.img #front-shape-holder, #front-main.img #front-content,#front-main.img #front-shape-img{
	left: calc(98% - 70vh);
}


#front-img-holder{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 1fr);
	width: calc(70vh - 4px);
	height: calc(70vh - 4px);
	margin: 2px 0 0 2px;
}

.front-img-div{
	transition: 0.2s;
	overflow: hidden;
}

.front-img-div:hover{
	transform: scale(1.1);
	z-index: 100;
	cursor: pointer;
}

.front-img-div img{
	max-width: 100%;
	max-width: 100%;
}

.front-img-div.intro{
	transform: scale(0.0);
	animation: frontImgIntro 0.2s linear 1 forwards;
}

@keyframes frontImgIntro{
	0%{
		transform: scale(0.0);
	}
	60%{
		transform: scale(1.05);
	}
	85%{
		transform: scale(0.95);
	}
	100%{
		transform: scale(1.0);
	}
}


#front-img-div-0{
	grid-column: 1 / span 4;
	grid-row: 1 / span 5;
}

#front-img-div-1{
	grid-column: 5 / span 8;
	grid-row: 1 / span 5;
}

#front-img-div-2{
	grid-column: 1 / span 4;
	grid-row: 6 / span 2;
}

#front-img-div-3{
	grid-column: 5 / span 3;
	grid-row: 6 / span 4;
}

#front-img-div-4{
	grid-column: 8 / span 5;
	grid-row: 6 / span 4;
}

#front-img-div-5{
	grid-column: 1 / span 4;
	grid-row: 8 / span 5;
}

#front-img-div-6{
	grid-column: 5 / span 3;
	grid-row: 10 / span 3;
}

#front-img-div-7{
	grid-column: 8 / span 5;
	grid-row: 10 / span 3;
}

.front-img-div.gone{
	animation: frontImgGone 0.2s linear 1 forwards;
}

@keyframes frontImgGone{
	0%{
		transform: scale(1.0);
	}
	30%{
		transform: scale(1.05);
	}
	100%{
		transform: scale(0.0);
	}

}

#front-img-bcg{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(10px);
	opacity: 0.0;
	display: none;
	z-index: 3;
	transition: 0.2s;
}

#front-img-bcg.active{
	display: block;
	opacity: 1.0;
	pointer-events: none;
	z-index: 3;

}

#front-img-holder .active{
	z-index: 4;

}

#front-img-holder .active img{

}

#front-img-info{
	position: fixed;
	width: 70vh;
	height: 70vh;
	top: calc(50% - 35vh);
  left: calc(98% - 70vh);
	display: none;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: repeat(12, 1fr);
	z-index: 4;
}

#front-img-info.active{
	display: grid;
	z-index: 4;
}

#front-img-info-close{
	position: fixed;
	top: calc(50% - 35vh);
	right: 2%;
	width: 5vh;
	height: 5vh;
	border-radius: 5vh;
	border: 2px solid var(--vilagosszurke);
	justify-content: center;
	align-items: center;
	display: none;
}

#front-img-info-close.active{
	display: flex;
	z-index: 4;
}

#front-img-info-close p{
	font-size: 3vh;
	margin-top: -0.2vh;
	font-weight: 100;
	color: var(--vilagosszurke);
	
}

#front-img-info-close:hover{
	cursor: pointer;
	border: 2px solid var(--piros);
}

#front-img-info-close:hover p{
	color: var(--piros);

}

#front-img-nev{
	font-family: Roboto-light;
	font-weight: 300;
	text-align: left;
	font-size: 3vh;
	color: var(--feher);
}

#front-img-info.kat-0 #front-img-nev{
	grid-row: 3 / span 1;
	grid-column: 5 / span 7;
	margin-left: 2vh;
}

#front-img-info.kat-1 #front-img-nev{
	grid-row: 3 / span 1;
	grid-column: 1 / span 4;
	margin-right: 2vh;
	text-align: right;
}

#front-img-info.kat-1 #front-img-info-close{
	left: calc(98% - 70vh);
}

#front-img-info.kat-2 #front-img-nev{
	grid-row: 6 / span 1;
	grid-column: 5 / span 7;
	margin-left: 2vh;
}

#front-img-info.kat-3 #front-img-nev{
	grid-row: 5 / span 1;
	grid-column: 4 / span 5;
	text-align: center;
}

#front-img-info.kat-4 #front-img-nev{
	grid-row: 7 / span 1;
	grid-column: 1 / span 7;
	text-align: right;
	margin-right: 2vh;
}

#front-img-info.kat-5 #front-img-nev{
	grid-row: 10 / span 1;
	grid-column: 5 / span 7;
	text-align: left;
	margin-left: 2vh;
}

#front-img-info.kat-6 #front-img-nev{
	grid-row: 9 / span 1;
	grid-column: 4 / span 5;
	text-align: center;
}

#front-img-info.kat-7 #front-img-nev{
	grid-row: 11 / span 1;
	grid-column: 1 / span 7;
	text-align: right;
	margin-right: 2vh;
}


#front-img-subgal-holder{
	width: calc(96% - 70vh);
	height: 90vh;
	position: fixed;
	top: 10vh;
	left: 0;
	display: none;
	z-index: 5;
	grid-template-columns: repeat(3, 1fr);
	overflow: auto;
}

#front-img-subgal-holder.active{
	display: grid;
}

.front-img-subgal-col{
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	flex-flow: column;
}


.front-subgal-img{
	width: calc(100% - 4px);
	transform: scale(0.0);
	transition: 0.2s;
	pointer-events: all;
}

.front-subgal-img img{
	margin: 2px 0 2px 0;
	display: block;
	width: 100%;
}

.front-subgal-img.active{
	transform: scale(1.0);
}


#front-img-subgal-holder .front-subgal-img:hover{
	cursor: pointer;
	padding-top: 2vh;
	padding-bottom: 2vh;
	width: 100%;
}




/*code*/

#code-subshapes{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	justify-items: center;
	align-items: center;
}

#code-subshapes svg{
	width: 70vh;
	height: 70vh;
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	margin-top: -1vh;
}

#code-subshapes svg *{
	fill: rgba(0, 0, 0, 0.0);
	stroke: var(--code_accent);
	stroke-width: 0.5;
	opacity: 0.5;
}

#code-subshape-0{
	animation: codeSubshapeAnim1 2s linear infinite;
}

@keyframes codeSubshapeAnim1{
	0%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	20%{
		transform: scale(1.1);
		opacity: 0.7;
	}
	40%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	100%{
		transform: scale(1.0);
		opacity: 0.0;
	}
}

#code-subshape-1{
	animation: codeSubshapeAnim2 2s linear infinite;
}

@keyframes codeSubshapeAnim2{
	0%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	20%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	40%{
		transform: scale(1.1);
		opacity: 0.7;
	}
	60%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	100%{
		transform: scale(1.0);
		opacity: 0.0;
	}
}

#code-subshape-2{
	animation: codeSubshapeAnim3 2s linear infinite;
}

@keyframes codeSubshapeAnim3{
	0%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	40%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	60%{
		transform: scale(1.1);
		opacity: 0.7;
	}
	80%{
		transform: scale(1.0);
		opacity: 0.0;
	}
	100%{
		transform: scale(1.0);
		opacity: 0.0;
	}
}


#res-a{
	height: 0;
	overflow: hidden;
}

#front-main.code #front-content{
	pointer-events: none;
}

#front-shape-holder{
	pointer-events: none;
}

.code-menu.tall{
	display: none;
}


.code-menu{
	position: fixed;
	width: 70vh;
	height: 20vh;
	top: 45vh;
	left: calc(50vw - 35vh);
	z-index: 20;
	transition: 0.2s;
	pointer-events: all;
	text-decoration: none;
}

.code-menu:hover{
	cursor: pointer;
	padding-top: 2vh;
}


.code-menu h3{
	color: var(--code_accent);
	font-size: 4vh;
	font-family: Roboto-thin;
	font-weight: 100;
	text-align: center;
}

#code-menu-0{
	transform: rotate(-63.5deg);
	margin-left: -23vh;
}

#code-menu-1{
	transform: rotate(63.5deg);
	margin-left: 23vh;
}

#code-menu-2{
	margin-top: 45vh;
}

#code-menu-2:hover{
	padding-top: 0;
	margin-top: 43vh;
	height: 12vh;
}

.code-info{
	text-decoration: none;
	position: fixed;
	top: calc(50% - 35vh);
	left: calc(50% - 35vh);
	width: 70vh;
	height: 70vh;
	clip-path: polygon(1% 99%, 99% 99%, 50% 1%, 1% 99%);
	display: none;
	pointer-events: all;
}

.code-info.active{
	display: block;
}

.code-info-img{
	text-align: center;
}

.code-info p{
	margin-left: 15vh;
	width: 40vh;
	text-align: justify;
	color: var(--feher);
}

.code-info h2{
	color: var(--feher);
}


#code-info-0{
	background-image: url("../assts/ur_fa.jpg");
	background-size: cover;
}

#ur-info-tall{
	display: none;
}

#code-info-0 h2, #code-info-0 p{
	color: var(--feher);
  text-shadow: -1px -1px 2px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(255, 255, 255, 0.6);
  text-align: center;
}

#code-info-0.active .code-info-img{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	width: 70vh;
	height: 20vh;
	margin-top: 20vh;
	justify-items: center;
}

.ur-rosette{
	width: 20vh;
	height: 20vh;
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	transform: scale(0.0) rotate(0deg);
}

.ur-rosette path{
	fill: rgba(0, 0, 0, 0.0);
	
}

.ur-rosette.nagy{
	animation: urRosetteAnim 2s ease-in-out infinite;
}

.ur-rosette.nagy path{
	stroke-width: 4;
	stroke: var(--ur_zold);
}

.ur-rosette.kicsi{
	animation: urRosetteAnim 2s ease-in-out infinite;
	animation-delay: 0.3s;
}

.ur-rosette.kicsi path{
	stroke-width: 2;
	stroke: var(--feher);
}

@keyframes urRosetteAnim{
	0%{
		transform: scale(0.0) rotate(0deg);
	}
	30%{
		transform: scale(1.0) rotate(180deg);
	}
	60%{
		transform: scale(1.0) rotate(180deg);
	}
	90%{
		transform: scale(0.0) rotate(360deg);
	}
	100%{
		transform: scale(0.0) rotate(360deg);
	}
}

#code-info-1{
	clip-path: polygon(0% 100%, 100% 100%, 50% 0%, 0% 100%);
	background-color: var(--focar_feher);
	justify-content: center;
	align-items: center;
	flex-flow: column;
}

#code-info-1.active{
	display: flex;
}

#code-info-1 .code-info-img{
	margin-top: 10vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#focar-kor{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	width: 20vh;
	height: 20vh;
	border-radius: 20vh;
	box-shadow: 
		inset 4px 4px 8px 0 rgba(255, 255, 255, 0.5), 
		4px 4px 8px 0 rgba(0, 0, 0, 0.5), 
		inset -4px -4px 8px 0 rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}



#focar-kor img{
	width: 15vh;
	height: 15vh;
}

.focar-img{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	height: 60vh;
	margin-top: -24vh;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	transform: rotate(-180deg);
	transition: 0.4s;
}

.focar-img img{
	width: 20vh;
	border-radius: 2vh;
	box-shadow: 2px 2px 12px 0 rgba(0, 0, 0, 0.4);
	transform: scale(0.0);
	transition: 0.2s;
}

.focar-img.current{
	transform: rotate(0deg);
	z-index: 100;
}

.focar-img.current img{
	transform: scale(1.0);
}

.focar-img.next{
	transform: rotate(-40deg);
}

.focar-img.next img{
	transform: scale(0.7);
}


.focar-img.prev{
	transform: rotate(40deg);
}

.focar-img.prev img{
	transform: scale(0.7);
}

.focar-img.gone{
	transform: rotate(180deg);
}

.focar-img.gone img{
	transform: scale(0.0);
}


#code-info-1 p{
	color: var(--focar_kek);
	margin-left: 0;
	text-align: center;
}
#code-info-1 h2{
	color: var(--focar_kek);
}


#code-info-2 .code-info-img{
	position: absolute;
	top: 30vh;
	left: 15vh;
	width: 40vh;
	height: 30vh;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	z-index: 3;
}

#code-info-2 .code-info-img div{
	grid-row: 1 / span 1;
	grid-column: 1 / span 1;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

#code-info-2 .code-info-img div img{
	transform: scale(0.0);
	max-width: 100%;
	transition: 0.2s;
}

#code-info-2 .code-info-img .active img{
	transform: scale(1.0);
}


#st-site{
	position: absolute;
	top: 20vh;
	width: 70vh;
	opacity: 0.0;
	overflow: hidden;
	box-sizing: border-box;
	z-index: 1;
}

#st-site img{
	width: 100%;
}


#st-site.active{
	animation: stSiteAnim 10s linear infinite;
}

@keyframes stSiteAnim{
	0%{
		opacity: 0.0;
		top: 20vh;
	}
	5%{
		opacity: 0.0;
		top: 20vh;
	}
	50%{
		opacity: 0.7;
		top: -5vh;

	}
	95%{
		opacity: 0.7;
		top: -30vh;
	}
	100%{
		opacity: 0.0;
		top: 20vh;
	}
}

#st-info{
	width: 70vh;
	position: absolute;
	bottom: 1vh;
	padding-top: 10vh;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.0), var(--fekete), var(--fekete));
	margin-bottom: -1vh;
	padding-bottom: 1vh;
	box-sizing: border-box;
	z-index: 2;
}

#st-info h2{
	text-align: center;
	color: var(--feher);
}

#st-info p{
	color: var(--feher);
	text-align: center;
}



/*kuka*/

#front-shape-kuka{
	transition: 0.2s;
}

#front-main.kuka #front-shape-kuka{
	left: 10vw;
	top: calc(100% - 45vh);
	width: 45vh;
	height: 45vh;
	transform: rotate(18deg);
}

#kuka-info{
	position: fixed;
	top: 12vh;
	right: 14vw;
	width: 40vw;
	height: 80vh;
	transform: rotate(-4deg);
}

#kuka-text{
	text-align: justify;
}

.kuka-img{
	display: none;
}

.kuka-img.active{
	display: block;
}

.kuka-img:hover{
	cursor: pointer;
}

#kuka-img-zsivany{
	width: 29vh;
	position: fixed;
	bottom: 12vh;
	left: 15vw;
}

#kuka-img-nemvegeztuk{
	width: 22vw;
	position: fixed;
	top: 12vh;
	left: 12vw;
	transform: rotate(3deg);
}

#kuka-img-szolidvita-div{
	width: 32vw;
	position: fixed;
	bottom: 10vh;
	right: 16vw;
	transform: rotate(-2deg);
}

#kuka-img-szolidvita-div.active{
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#kuka-img-szolidvita-div img{
	width: 100%;
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
}

#kuka-szolidvita-kor{
	width: 2vw;
	height: 2vw;
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	margin-left: 12.9vw;
	margin-top: 2.7vw;
	animation: szolidvitaAnim 1s linear infinite;
}

#kuka-szolidvita-kor path{
	stroke: var(--vilagosszurke);
	stroke-width: 16;
	fill: rgba(0, 0, 0, 0.0);
}

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


#kuka-viewer-holder{
	display: none;
	width: 200vw;
	height: 200vh;
	background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(10px);
	cursor: zoom-out;
}

#kuka-viewer-holder.active{
	display: block;
	position: fixed;
	z-index: 10;
	top: 0;
	left: 0;
}

#kuka-viewer-holder.active img{
	max-width: 100%;
	max-height: 100%;

}

#kuka-viewer-holder.full{
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: zoom-in;
}

#kuka-viewer-holder.full img{
	max-width: 98vw;
	max-height: 98vh;
	margin: 1vh 0 0 1vw;
}

#kuka-viewer-close{
	position: fixed;
	top: 4px;
	right: 4px;
	width: 40px;
	height: 40px;
	border: 2px solid var(--piros);
	background-color: rgba(0, 0, 0, 0.5);
	border-radius: 40px;
	justify-content: center;
	align-items: center;
	transition: 0.2s;
	z-index: 12;
	display: none;
}

#kuka-viewer-close.active{
	display: flex;
	z-index: 12;
}

#kuka-viewer-close p{
	color: var(--piros);
	font-size: 30px;
	transition: 0.2s;
}

#kuka-viewer-close:hover{
	cursor: pointer;
	background-color: var(--piros);
	transform: scale(1.1);
}

#kuka-viewer-close:hover p{
	color: var(--feher);
}

.kuka-mover{
	display: none;
	position: fixed;
	width: 40px;
	height: 40px;
	border: 2px solid var(--kuka_accent);
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 10px;
}

.kuka-mover p{
	color: var(--kuka_accent);
	font-size: 36px;
	line-height: 0;
}

.kuka-mover.active{
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 999;
}

.kuka-mover:hover{
	cursor: pointer;
	border: 2px solid var(--kuka_accent);
	background-color: var(--kuka_accent);
}

.kuka-mover:hover p{
	color: var(--fekete);
}

#kuka-viewer-up{
	top: 1vh;
	left: calc(50% - 40px);
	transform: rotate(-90deg);
}

#kuka-viewer-down{
	bottom: 1vh;
	left: calc(50% - 40px);
	transform: rotate(90deg);
}


#kuka-viewer-left{
	top: calc(50% - 40px);
	left: 1%;
}

#kuka-viewer-right{
	top: calc(50% - 40px);
	right: 1%;
}


.kuka-banner{
	position: fixed;
	top: 8vh;
	bottom: 5vh;
	width: 8vw;
	border: 2px solid var(--vilagosszurke);
}

#banner-left{
	left: 2px;
}

#banner-right{
	right: 2px;
}

.kuka-banner aside{
	width: 100%;
	height: 100%;
}

#kuka-banner-0{
	background-color: #ffffff;
	border: 1px solid #47628a;
	box-shadow: inset 0px 0px 4px 0 #47628a;
}

#kuka-banner-0 h3{
	text-align: center;
	font-size: 2.2vh;
	font-weight: 600;
	font-family: "Comic Sans", cursive;
	color: #02fb1c;
}

#kuka-banner-0-subtext{
	margin-top: 4.1vh;
	font-size: 2.4vh;
	font-family: "Times New Roman", serif;
	color: #021bac;
}

#kuka-banner-0-button{
	border: 3px solid #a13ff4;
	margin: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: var(--feher);
	animation: kukaB1ButAnim 1s linear infinite;
	position: absolute;
	bottom: 2vh;
	left: 0;
	width: calc(100% - 16px);
}

@keyframes kukaB1ButAnim{
	0%{
		border: 3px solid #a13ff4;
	}
	49%{
		border: 3px solid #a13ff4;
	}
	50%{
		border: 3px solid #21e314;
	}
	99%{
		border: 3px solid #21e314;
	}
	100%{
		border: 3px solid #a13ff4;
	}
}

#kuka-banner-0-button:hover{
	cursor: pointer;
	background-color: #af340b;
	transform: scale(1.2);
}

#kuka-banner-0-button:hover p{
	color: var(--feher);
}

#kuka-banner-0-button p{
	text-align: center;
	font-size: 2.4vh;
	font-weight: 600;
	color: var(--fekete);
}

#kuka-banner-0-d-holder{
	margin-top: 3vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-items: center;
	align-items: center;
}

#kuka-banner-0-d-0{
	margin: 1vh 0.2vh -1vh -0.2vh;
	font-size: 4vh;
	transform: rotate(23deg);
	animation: kukaB1DAnim 1s linear infinite;
}
#kuka-banner-0-d-1{
	margin: -2vh 1.3vh 2vh -1.3vh;
	font-size: 3vh;
	transform: rotate(-38deg);
	animation: kukaB1DAnim 1s linear infinite;
	animation-delay: 0.1s;
}
#kuka-banner-0-d-2{
	margin: 1.8vh -0.9vh -1.8vh 0.9vh;
	font-size: 6vh;
	transform: rotate(8deg);
	animation: kukaB1DAnim 1s linear infinite;
	animation-delay: 0.2s;
}
#kuka-banner-0-d-3{
	margin: -0.2vh 0.7vh 0.2vh -0.7vh;
	font-size: 5vh;
	transform: rotate(17deg);
	animation: kukaB1DAnim 1.1s linear infinite;
}
#kuka-banner-0-d-4{
	margin: 0.7vh -4vh -0.7vh 4vh;
	font-size: 3.3vh;
	transform: rotate(-13deg);
	animation: kukaB1DAnim 1.2s linear infinite;
}

@keyframes kukaB1DAnim{
	0%{
		color: #a6ff00;
	}
	19%{
		color: #a6ff00;
	}
	20%{
		color: #f600ff;
	}
	39%{
		color: #f600ff;
	}
	40%{
		color: #ff9600;
	}
	59%{
		color: #ff9600;
	}
	60%{
		color: #00ffd2;
	}
	79%{
		color: #00ffd2;
	}
	80%{
		color: #ff0036;
	}
	99%{
		color: #ff0036;
	}
	100%{
		7800ff
	}
}

#kuka-banner-1{
	background-color: #ffffff;
}

#kuka-banner-2{
	background-color: #ffffff;
}

#kuka-banner-2 a{
	width: 100%;
	height: 100%;
	display: block;
}

#eggpl-holder{
	width: 100%;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}

#eggpl-holder img{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	width: 100%;
}

#kuka-eggpl-0{
	animation: kukaEggpl0 3s linear infinite;
	opacity: 0.0;
}
#kuka-eggpl-1{
	animation: kukaEggpl1 3s linear infinite;
	opacity: 0.0;
}
#kuka-eggpl-2{
	animation: kukaEggpl2 3s linear infinite;
	opacity: 0.0;
}
#kuka-eggpl-3{
	animation: kukaEggpl3 3s linear infinite;
	opacity: 0.0;
}

@keyframes kukaEggpl0{
	0%{
		opacity: 0.0;
	}
	1%{
		opacity: 1.0;
	}
	99%{
		opacity: 1.0;
	}
	100%{
		opacity: 0.0;
	}
}

@keyframes kukaEggpl1{
	0%{
		opacity: 0.0;
	}
	20%{
		opacity: 0.0;
	}
	21%{
		opacity: 1.0;
	}
	99%{
		opacity: 1.0;
	}
	100%{
		opacity: 0.0;
	}
}

@keyframes kukaEggpl2{
	0%{
		opacity: 0.0;
	}
	40%{
		opacity: 0.0;
	}
	41%{
		opacity: 1.0;
	}
	99%{
		opacity: 1.0;
	}
	100%{
		opacity: 0.0;
	}
}

@keyframes kukaEggpl3{
	0%{
		opacity: 0.0;
	}
	60%{
		opacity: 0.0;
	}
	61%{
		opacity: 1.0;
	}
	99%{
		opacity: 1.0;
	}
	100%{
		opacity: 0.0;
	}
}

#kuka-banner-2 a{
	text-decoration: none;
	text-align: center;
	padding-top: 6vh;
}

#eggpl-p-0{
	color: #fa132a;
	font-size: 30px;
	font-weight: 800;
	margin-top: 20px;
}

#eggpl-p-1{
	color: #2a3bc1;
	font-size: 16px;
	font-weight: 800;
	margin-top: 20px;
}

#eggpl-p-2{
	color: #b22f23;
	font-size: 21px;
	font-weight: 800;
	margin-top: 20px;
}


#kuka-banner-3{
	background-color: #ffffff;
}

#kuka-banner-4{
	background-color: #ffffff;
}