@import url("../common/index.css");
@import url("../common/elements.css");
@import url("../common/layout.css");
@import url("../common/theme.css");
@import url("../common/view.css");



section > header {
	display: block;
	width: 512px;
	height: auto;
	margin: 0px auto;
	padding: 256px 0px;
	box-sizing: content-box;
}

section > header svg {
	display: block;
	width: 128px;
	height: 128px;
	margin: 0px auto 32px auto;
	padding: 0px;
	border: 0px solid transparent;
}

section > header h1 {
	display: block;
	margin: 0px;
	padding: 0px;
	font-family: 'crystalline';
	font-size: 48px;
	font-weight: 500;
	line-height: 64px;
	text-align: center;
	text-transform: uppercase;
}

section > header h2 {
	display: block;
	margin: 0px;
	padding: 0px;
	font-family: 'crystalline';
	font-size: 32px;
	font-weight: 400;
	line-height: 32px;
	text-align: center;
	text-transform: uppercase;
}

section > header p {
	display: block;
	width: 512px;
	margin: 0px auto 16px auto;
	font-family: 'museo';
	font-size: 20px;
	font-weight: normal;
	text-align: justify;
}

section > header p:nth-of-type(1) {
	margin-top: 64px;
}

section > header + article:nth-of-type(1) {
	margin-top: 0px;
}



section > article:nth-of-type(odd) {
	transform: translate(calc(-50% - 16px));
}

section > article:nth-of-type(odd) > figure {
	transform: translate(calc(100% + 32px + 16px), -49px);
}

section > article:nth-of-type(even) {
	transform: translate(calc(50% + 16px));
}

section > article:nth-of-type(even) > figure {
	transform: translate(calc(-100% - 32px - 16px), -49px);
}



#we-uncover-the-web svg g circle,
#we-uncover-the-web svg g path {
	transition: 500ms all ease-out;
	cursor: pointer;
}

#we-uncover-the-web svg g:hover > g > circle {
	fill: #22ccff;
}

#we-uncover-the-web svg g:hover > path,
#we-uncover-the-web svg g:hover > g > path {
	stroke: #22ccff;
}

#we-uncover-the-web svg g > path:nth-of-type(2) { transition-delay:  50ms; }
#we-uncover-the-web svg g > path:nth-of-type(3) { transition-delay: 100ms; }
#we-uncover-the-web svg g > path:nth-of-type(4) { transition-delay: 150ms; }
#we-uncover-the-web svg g > path:nth-of-type(5) { transition-delay: 200ms; }
#we-uncover-the-web svg g > path:nth-of-type(6) { transition-delay: 250ms; }
#we-uncover-the-web svg g > path:nth-of-type(7) { transition-delay: 300ms; }
#we-uncover-the-web svg g > path:nth-of-type(8) { transition-delay: 350ms; }
#we-uncover-the-web svg g > path:nth-of-type(9) { transition-delay: 400ms; }
#we-uncover-the-web svg g > g > circle          { transition-delay: 500ms; }
#we-uncover-the-web svg g > g > path            { transition-delay: 500ms; }



#we-extract-the-web svg g circle,
#we-extract-the-web svg g path,
#we-extract-the-web svg g rect {
	transition: 500ms all ease-out;
	cursor: pointer;
}

#we-extract-the-web svg g:hover circle {
	fill: #22ccff;
}

#we-extract-the-web svg g:hover path {
	stroke: #22ccff;
	stroke-dasharray: unset;
}

#we-extract-the-web svg g:hover rect {
	fill: #22ccff;
}

#we-extract-the-web svg g:hover rect[stroke] {
	fill: transparent;
	stroke: #22ccff;
}



#we-automate-the-web svg g circle,
#we-automate-the-web svg g rect,
#we-automate-the-web svg g text {
	transition: 400ms all ease-out;
	cursor: pointer;
}

#we-automate-the-web svg g text {
	font-family: 'crystalline';
	font-size: 24px;
	font-weight: 500;
	line-height: 32px;
	stroke: #ffffff;
	stroke-width: 1px;
	transform: translate(0.5px, 1.5px);
}

#we-automate-the-web svg g:hover circle {
	fill: #22ccff;
	stroke: #22ccff;
}

#we-automate-the-web svg g:hover rect {
	fill: #22ccff;
}

#we-automate-the-web svg g:hover rect[stroke] {
	fill: transparent;
	stroke: #22ccff;
}



#we-understand-the-web svg g circle,
#we-understand-the-web svg g path,
#we-understand-the-web svg g rect {
	transition: 500ms all ease-out;
	cursor: pointer;
}

#we-understand-the-web svg g:hover circle {
	fill: #22ccff;
	stroke: #22ccff;
}

#we-understand-the-web svg g:hover path {
	fill: #22ccff;
	stroke: #22ccff;
}

#we-understand-the-web svg g:hover rect {
	fill: #22ccff;
}



@media screen and (max-width: 1184px) {

	section > article:nth-of-type(odd) {
		transform: unset;
	}

	section > article:nth-of-type(odd) > figure {
		transform: unset;
	}

	section > article:nth-of-type(even) {
		transform: unset;
	}

	section > article:nth-of-type(even) > figure {
		transform: unset;
	}

}



@media screen and (max-width: 560px) {

	section > header {
		width: auto;
	}

	section > header p {
		width: auto;
		padding: 16px;
	}

}



@media screen and (max-height: 800px) {

	section > header {
		padding: 64px 0px;
	}

}