body > header {
	box-sizing: content-box;
	margin: 0 auto;
	padding: var(--gap-large);
	position: relative;
	overflow: hidden;

	@media (max-width: 600px) {
		padding: var(--gap-normal);
	}

	& > * {
		position: relative;
		max-width: var(--container-width);
		z-index: 3;
	}

	&:before {
		content: '';
		position: absolute;
		top: min(calc(var(--scroll-top) * 0.5 * 1px), 50%);
		height: 100%;
		left: 0;
		width: 100%;
		background: var(--color-white) url(../../image/web/header/front.jpg) no-repeat center bottom/cover;
		z-index: 1;
	}

	&:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: linear-gradient(to bottom, white 10rem, transparent 50%) left top/100% 100%;
		z-index: 2;
	}

	& div.device.clip {
		position: absolute;
		z-index: 0;
		left: 0;
		bottom: -50%;
		animation: slideOut 700ms ease-in-out 500ms forwards;
		width: 200px;
		height: 300px;
		background: url(../../image/web/graphic/equimo-clip.png) no-repeat center bottom/contain;

		@media (max-width: 1024px) {
			& {
				width: 170px;
			}
		}
		@media (max-width: 700px) {
			& {
				width: 140px;
			}
		}

		& > div {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: no-repeat center bottom/contain;

			&:first-child {
				background-size: 83% auto;
				background-image: url(../../image/web/graphic/equimo-device.png);
				bottom: 10%;
				animation: popOut 700ms linear 600ms forwards;

				@media (max-width: 600px) {
					& {
						animation: popOutShort 700ms linear 600ms forwards;
					}
				}
			}

			&:last-child {
				background-image: url(../../image/web/graphic/equimo-clip-front.png);
			}
		}

	}

	& div.device.lineup {
		position: absolute;
		z-index: 0;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		transition: bottom 100ms;
		width: 200px;
		height: 300px;

		& > div {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: no-repeat center center/contain;

			&:nth-child(1) {
				background-image: url(../../image/web/graphic/equimo-mac.png);
				width: 250%;
				left: 70%;
				animation: slideOut 700ms ease-in-out 500ms forwards;
				bottom: -50%;
			}

			&:nth-child(2) {
				background-image: url(../../image/web/graphic/equimo-ipad.png);
				width: 170%;
				left: 40%;
				animation: slideOut 700ms ease-in-out 700ms forwards;
				bottom: -50%;
			}

			&:nth-child(3) {
				background-image: url(../../image/web/graphic/equimo-iphone.png);
				width: 50%;
				left: 0;
				animation: slideOut 700ms ease-in-out 900ms forwards;
				bottom: -50%;
			}

			&:nth-child(4) {
				background-image: url(../../image/web/graphic/equimo-aw.png);
				width: 50%;
				left: -30%;
				animation: slideOut 700ms ease-in-out 1100ms forwards;
				bottom: -50%;
			}

			&:nth-child(5) {
				background-image: url(../../image/web/graphic/equimo-garmin.png);
				width: 50%;
				left: -50%;
				animation: slideOut 700ms ease-in-out 1300ms forwards;
				bottom: -50%;
			}
		}
	}


	& section {
		min-height: 40em;
		margin: auto;
		padding: var(--gap-huge) 0;

		& > * {
			position: relative;
			z-index: 5;
		}

		& em {
			font-style: normal;
			background-color: rgba(255, 255, 255, .7);
			box-shadow: 0 0 10px rgba(255, 255, 255, .7);
			padding: 0;
			line-height: 1.4;
			font-size: var(--font-size-plus);
			position: relative;
		}

		& h1 {
			position: relative;
			text-align: center;
			font-size: var(--font-size-huge);
			font-weight: 600;
			line-height: 1.1;

			@media (max-width: 1024px) {
				& {
					font-size: var(--font-size-xlarge);
					text-align: left;
				}
			}

			@media (max-width: 600px) {
				& {
					padding: 0 var(--gap-tiny);
					font-size: var(--font-size-large);
				}
			}


			& b {
				text-transform: uppercase;
				color: var(--color-equimo);
			}

			& .icon:after {
				filter: var(--color-filter-equimo);
			}

			&:after {
				content: '.';
				color: var(--color-equimo);
			}
		}

		& p {
			text-align: center;
			margin: var(--gap-large) auto;
			max-width: 50em;

			&:last-of-type {
				margin-top: var(--gap-huge);
			}

			& a {
				display: inline-block;
				padding: .7lh 2lh;
				background: var(--color-darkgray);
				color: var(--color-white);
				border-radius: 2lh;
				text-decoration: none;
				margin: var(--gap-tiny);
				box-shadow: 0 0 2em rgba(255, 255, 255, .5);

				&:first-child {
					background: var(--color-equimo);
				}

				&:hover {
					background: var(--color-white);
					color: var(--color-equimo);
					box-shadow: 0 0 1em var(--color-equimo);
				}
			}
		}
	}
}

body.scrolled > header div.device.clip {

	bottom: 0;
	animation: slideIn 700ms ease-in-out 1s forwards;

	& > div:first-child {
		bottom: 110%;
		transform: rotate(10deg);
		animation: popIn 700ms linear forwards;

		@media (max-width: 600px) {
			& {
				transform: none;
				bottom: 50%;
				animation: popInShort 700ms linear forwards;
			}
		}
	}
}

body > header > nav, body > footer > nav {
	margin: var(--gap-normal) auto;
	position: relative;
	z-index: 100;

	& > a.menu {
		display: none;
	}

	& > ul {
		display: flex;
		justify-content: end;
		align-items: center;
		list-style: none;
		animation: appear 2s forwards linear;

		& li {
			font-size: var(--font-size-base);
			color: var(--color-darkgray);
			white-space: nowrap;
			margin: 0 0 0 var(--gap-rel-large);

			& a {
				cursor: pointer;
			}

			@media (min-width: 1025px) {

				& > a:not(:only-child) {
					position: relative;

					&:after {
						content: '';
						position: absolute;
						top: 2.4em;
						left: 50%;
						height: .6em;
						width: .6em;
						transform: translateX(-50%);
						border-radius: 50%;
						background: var(--color-equimo);
						z-index: 10;
						border: 1px solid var(--color-white);
						opacity: 0;
						visibility: hidden;
						transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
						transition-delay: 1s;
					}

				}


				& > ul {
					position: absolute;
					border-top: 1px solid transparent;
					border-image: linear-gradient(to right, transparent 10%, var(--color-darkgray) 20%, var(--color-darkgray) 80%, transparent 90%) 1;
					padding: var(--gap-small);
					border-radius: 3em;

					top: 100%;
					left: 10%;
					right: 0;
					list-style: none;
					display: flex;
					justify-content: center;
					opacity: 0;
					visibility: hidden;
					transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
					transition-delay: .5s;
				}
			}
		}

		@media (min-width: 1025px) {

			& > li {

				&.active, &:hover {

					& > ul {
						opacity: 1;
						visibility: visible;
						transition-delay: 0s;
					}

					& > a:not(:only-child):after {
						opacity: 1;
						visibility: visible;
						transition-delay: 0s;
					}
				}

				&:first-child {
					flex: 1;
					margin: 0 var(--gap-rel-large) 0 0;


					& a {
						display: block;
						width: 11rem;
						height: 4rem;
						position: relative;
						background: url(../../image/web/icon/logo_equimo_dark.svg) no-repeat center center/contain;
						transform: translateX(-1rem);

						&:after {
							background: no-repeat center bottom/contain;
							width: 1em;
							height: 1em;
							position: absolute;
							right: -2rem;
							top: 1.2rem;
							font-size: 1.6rem;
							border-left: 1px solid var(--color-darkgray);
							padding-left: .7rem;
						}
					}
				}

				&:last-child {

					& a {
						display: block;
						padding: .7lh 1.2lh;
						background: var(--color-darkgray);
						color: var(--color-white);
						border-radius: 2lh;


						&:hover {
							background: var(--color-equimo);
							text-decoration: none;
							color: var(--color-white);
						}
					}
				}

				& a {
					color: inherit;
					text-decoration: none;

				}
			}

			& li {
				& a:hover, &.active > a {
					text-decoration: underline;
					color: var(--color-equimo);
				}
			}

			&:hover > li.active:not(:hover) > ul, &:hover > li.active:not(:hover) > a:after {
				opacity: 0;
				visibility: hidden;
			}
		}

	}
}

@media (max-width: 1024px) {
	body > header > nav {

		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
		margin: 0;

		&.hover {
			position: fixed;
		}

		& > a.menu {
			display: block;
			position: absolute;
			top: var(--gap-normal);
			right: var(--gap-large);
			background: url(../../image/web/icon/menu-open.svg) no-repeat left center/auto 2.5em;
			text-align: right;
			padding: var(--gap-rel-small) 0 var(--gap-rel-small) 2.6em;
			cursor: pointer;
			height: 3.2em;

			&.active {
				background-image: url(../../image/web/icon/close.svg);
			}

			@media (max-width: 350px) {
				& > span {
					display: none;
				}
			}
		}

		& > ul {
			display: block;
			padding: var(--gap-normal) var(--gap-large) var(--gap-large) var(--gap-large);
			max-height: 0;
			transition: max-height 0.5s ease-in-out;

			&.hover {
				background: var(--color-white);
				overflow-y: auto;
				max-height: 100vh;
				box-shadow: 0 0 10px var(--color-darkgray);

				& li {
					display: block;
				}
			}

			& > li:first-child {
				border: none;
				padding: 0;
				margin-left: 0;
				display: block;

				& a {
					display: block;
					width: 11rem;
					height: 4rem;
					background: url(../../image/web/icon/logo_equimo_dark.svg) no-repeat center center/contain;
					position: relative;
					right: 1rem;
					bottom: .3rem;
					transform: translateX(-1rem);
				}
			}

			& > li:last-child a {
				padding: .7lh 1.2lh;
				background: var(--color-darkgray);
				color: var(--color-white);
				border-radius: 2lh;
				margin-top: .5em;
			}

			& li {
				margin: 0;
				display: none;
				padding: var(--gap-rel-small) 0;
				border-bottom: 1px solid var(--color-darkgray);

				&:has(> ul) {
					background: url("../../image/web/graphic/expand.svg") no-repeat right 1.1em/auto 1em;
				}

				& a {
					display: inline-block;
				}

				&:last-child {
					border-bottom: none;
				}

				& > ul {
					border-top: 1px solid var(--color-darkgray);
					position: static;
					display: none;
					list-style: disc;
					margin: var(--gap-rel-normal) 0 var(--gap-rel-tiny) var(--gap-rel-normal);
				}

				&.active, &.hover {

					& > ul {
						display: block;
					}
				}

				&.active {
					& > a {
						color: var(--color-equimo);
					}
				}
			}
		}
	}
}

body > footer {

	background-color: var(--color-gray);
	padding: var(--gap-large);
	color: var(--color-white);

	@media (max-width: 600px) {
		& {
			padding: var(--gap-normal);
		}
	}

	& > * {
		position: relative;
		max-width: var(--container-width);
		z-index: 2;
		margin: auto;
	}

	& > nav {

		& ul li {
			color: var(--color-white);

			&:first-child a {
				background: url(../../image/web/icon/logo_equimo_light.svg) no-repeat left center/contain;
			}

			&:last-child a {
				background-color: var(--color-equimo);
			}

			& span.icon.lang {
				filter: var(--color-filter-white);
			}

			& ul, & a:after, &.lang {
				display: none;
			}
		}


		@media (max-width: 1024px) {
			& ul {
				display: block;

				& li {
					margin: 0;

					& a {
						display: inline-block;
						padding: var(--gap-rel-tiny);
					}

					&:last-child a {
						padding: var(--gap-rel-tiny) var(--gap-rel-small);
						border-radius: var(--border-radius);
						margin-top: 1em;
					}

					&:first-child a {
						display: block;
						height: 4em;
						position: relative;
						right: .5em;
						bottom: .8em;

					}

				}
			}
		}
	}

	& section {
		padding: var(--gap-large) var(--gap-normal);
		text-align: center;

		& h2 {
			font-size: var(--font-size-large);
			font-weight: 500;

			&:after {
				content: '.';
				color: var(--color-equimo);
			}

			& b {
				color: var(--color-equimo);
				text-transform: uppercase;
			}
		}
	}

	& form {
		display: flex;
		justify-content: space-between;
		align-items: center;


		& div.social {
			flex-basis: 40%;
			font-size: 160%;
			filter: var(--color-filter-equimo);
			padding: var(--gap-small) var(--gap-small) var(--gap-small) 0;
		}

		& label {
			text-align: right;
			padding: 0 var(--gap-normal)
		}

		& input, & button {
			padding: var(--gap-rel-small);
			line-height: 1;
			border-radius: 2lh;
			border: none;
			outline: none;
			font-size: 100%;
		}

		& button {
			padding: 1.1em var(--gap-rel-normal);
			background: var(--color-equimo);
			color: var(--color-white);
			margin-left: calc(2lh * -2);
			white-space: nowrap;
		}

		@media (max-width: 1024px) {
			& {
				display: block;

				& > * {
					display: block;
					margin: var(--gap-rel-small) 0 !important;
					text-align: left !important;
				}

				& > label {
					padding: 0;
				}
			}
		}

	}


	&.legal {
		background-color: var(--color-darkgray);


		& section {
			display: flex;
			justify-content: space-between;
			font-size: var(--font-size-small);
			border-bottom: 1px solid var(--color-white);
			padding: 0;

			& > * {
				background-color: var(--color-darkgray);
				margin-bottom: -.5lh;
				padding-right: 1em;

				&:last-child {
					padding-right: 0;
					padding-left: 1em;
				}
			}
		}
	}

	& section.apps {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: var(--gap-tiny);
		padding: var(--gap-normal) 0;

		& > *:first-child {
			margin-right: var(--gap-large);
		}

		& > *:last-child {
		}

		& a {
			padding: var(--gap-small) var(--gap-small) var(--gap-small) 3em;
			border-radius: 2lh;
			border: 1px solid var(--color-white);
			vertical-align: center;
			position: relative;

			&:hover {
				box-shadow: 0 0 1em var(--color-white);
			}
		}

		& a span.icon {
			font-size: 150%;
			position: absolute;
			left: .7em;
			top: 20%
		}

		@media (max-width: 1024px) {
			& {
				flex-direction: column;
				align-items: flex-start;

				& h3 {
					margin: var(--gap-tiny);
				}
			}
		}
	}
}


body > main {

	& div.sides {
		display: flex;
		justify-content: space-between;
		align-items: start;

		& > *:first-child {
			margin-right: var(--gap-large);
		}

		@media (max-width: 1024px) {
			& {
				display: block;
			}

			& > *:first-child {
				margin-right: 0;
			}

			& > *:last-child .icon:after {
				background-position: left center;
			}
		}
	}


}

body > div.flash {

	background-color: var(--color-equimo);
	color: var(--color-white);
	overflow: hidden;
	animation: fadeOut 3s 10s forwards;

	& > div {
		max-width: var(--container-width);
		margin: auto;
		padding: var(--gap-normal) var(--gap-large);
		text-align: center;
	}

	&.flash-success {
		background-color: var(--color-success);
	}

	&.flash-warning {
		background-color: var(--color-warning);
	}
}

body > div.notification {
	background: linear-gradient(to top, #efefef 0%, #fff 30%);
	border-bottom: 1px solid #cecece;
	padding: var(--gap-normal) var(--gap-large);
	overflow: hidden;
	transform: translateY(-100%);
	animation: slideFromTop 1s 1s forwards;

	& > div {
		max-width: var(--container-width);
		margin: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-weight: bold;

		& > a {
			display: inline-block;
			padding: .1rem 1.5rem;
			background: var(--color-darkgray);
			color: var(--color-white);
			border-radius: 2lh;
			text-decoration: none;
			box-shadow: 0 0 2em rgba(255, 255, 255, .5);
			background: var(--color-equimo);
			font-size: 200%;
			margin-left: 2rem;

			&:hover {
				background: var(--color-white);
				color: var(--color-equimo);
				box-shadow: 0 0 1em var(--color-equimo);
			}
		}

		@media (max-width: 600px) {
			& {
				display: block;

				& > a {
					margin: var(--gap-normal) 0 0 0;
					text-align: center;
				}
			}
		}
	}
}