header { position: absolute; width: 55%; top: 0; right:0; padding: 4rem 5%; text-align: center; z-index: 20; /*display: none;*/ }
header > div { position: relative; }
header img { position: absolute; height: 2rem; top: 0; right:0; }



nav { display: inline-flex;  }
nav > span { display: block; width: 2rem; height: 2rem; border: solid 0.1rem var(--seriy); color: var(--seriy); border-radius: 2rem; display: flex; align-items: center; justify-content: center; font-family: 'Normalidad Compact Medium'; transition: 1500ms; line-height: 100%; }
nav > span:nth-child(n+2) { margin-left: 0.9rem; position: relative; }
nav > span:nth-child(n+2)::before { content: ''; display: block; width: 0.9rem; background: var(--seriy); height: 0.1rem; position: absolute; left: -1rem; }

nav > span.active { border-color: var(--rijiy); color: var(--rijiy); }
nav > span.active::before { background: var(--rijiy);  }

section { height: 100vh; width: 100%; display: none; }
section#step1 { display: block; }

aside { height: 100%;  width: 45%; position: fixed; top: 0; left: 0; }
article { padding: 8rem 5% 4rem 5%; width: 55%; right: 0; position: absolute; top: 0; min-height: 100vh; }

aside img { height: 100%; display: block; }

aside { background-repeat: no-repeat; background-size: cover; background-position: center center; }

section article { display: flex; flex-direction: column; /*overflow-y: hidden;*/ }
section article > div { flex: 1 1 0; align-items: center; display: flex; }

article h2 { text-align: center; }
article li { list-style: none; transition: 600ms; }
article li { padding: 1rem 0; display: flex; gap: 1.5rem; border-top: solid 1px #D0CFCF; font-size: 1.1rem; align-items: center; cursor: pointer; }
article li label {  display: flex; border: solid 1px #D0CFCF; border-radius: 1rem; width: 20px; height: 20px; min-width: 20px; align-items: center; justify-content: center; }
article li i { display: none; }
article li span { line-height: 125%; }

article li label::before { content: ''; display: block; background: #FF5500; width: 0; height: 0; position: relative; border-radius: 1rem; transition: 300ms linear; line-height: 100%; }
article li:hover label::before,
	article li.active label::before { width: 70%; height: 70%; }

article li.passive { color: var(--seriy); }
article li.passive label::before { width: 0; height: 0; }

.answer { display: none; }

.secret, 
	.secret h3 span { background: #F5F5F5; }

.secret { padding: 1.5rem; position: relative; border-radius: 2rem; font-size: 1.1rem; margin-top: 3rem; margin-bottom: 3rem; }
.secret h3 { text-align: center;  position: absolute; top: -1.3rem; left: 0; width: 100%;  font-size: 1.1rem; }
.secret h3 span { border-radius: 3rem 3rem 0 0; padding: 0.5rem 2rem; display: inline-block; }
.secret::after { content: ''; display: block; background: url('images/secret_angle.svg') top left no-repeat; background-size: contain; height: 1.5rem; width: 4rem; position: absolute; bottom: -1.5rem; right: 6rem; }
.ds { font-family: 'Normalidad Compact Light'; font-weight: normal; line-height: 125%; }

.bot { position: relative; text-align: center; }
.bot button { margin-top: 1rem; }
.bot .kern { display: block; width: 7.25rem; position: absolute; right: 0; top: 0; }

/* temp */ 

footer { display: block !important; padding-top: 0; padding-bottom: 0; }
footer section { height: 100%; }

main { overflow: hidden; }
main > div { z-index: 50; position: relative;  display: flex; background: #D2E2FF; gap: 0; }

main > div > div { width: 50%; padding: 4rem 8rem; position: relative; top: 0; }
main > div > div:first-child { left: 0; background: #fff; }
main > div > div:last-child { right: 0; background: #D2E2FF; }

main > div > div > div { position: relative; padding-top: 6rem; }

main > span { display: block; }
img.result { top: 4rem; position: absolute; z-index: 50; display: block; width: 12rem; margin-left: -6rem; left: 100%; }

main h2 { text-align: left;	margin-bottom: 3rem; }

main p, main li { font-family: 'Normalidad Compact Light'; line-height: 130%; }

main li { padding-left: 2.8rem; list-style: none; position: relative; margin-bottom: 1.5rem; }
main li::before { content: ''; display: block; position: absolute; top: 0.3rem; left: 0; width: 0.75rem; height: 0.75rem; background: #3C74D8; }

main .logo { position: absolute; height: 2.5rem; top: 0; left: 0; }


main > div { min-height: 100vh; padding-bottom: 7rem }
footer { position: relative; height: 7rem; top: -0; margin-top: -7rem; }






@media (max-width: 1799px){

}
@media (max-width: 1699px){
	
}
@media (max-width: 1599px), (max-height: 800px){

	
	main > div > div:first-child { padding-left: 4rem; }
	main > div > div:last-child { padding-right: 4rem; }
}

@media (max-width: 1399px), (max-height: 750px){

	main > div > div:first-child { padding-left: 3rem; padding-right: 7rem; }
	main > div > div:last-child { padding-right: 3rem; padding-left: 7rem; }
	main > div > div { padding-top: 3rem; padding-bottom: 3rem; }
	main > div > div > div { padding-top: 4rem; }
	img.result { top: 3rem; width: 10rem; margin-left: -5rem;  } 

	main h2 { margin-bottom: 1.5rem; }
	main li { margin-bottom: 1rem; padding-left: 2rem; }

}

@media (max-width: 1199px), (max-height: 700px){
	main > div > div:first-child { padding-left: 2rem; padding-right: 6rem; }
	main > div > div:last-child { padding-right: 2rem; padding-left: 6rem; }

}
@media (max-width: 1099px){
	
}
@media (max-width: 999px){
	
	aside 	{ width: 100%; height: 50vh; background-position: 50% 30%; position: absolute; }
	article { width: 100%; min-height: 50vh; top: 50vh; }
	header 	{ width: 100%; top: 50vh; }

	main > div > div { padding-top: 2rem; padding-bottom: 2rem; }
	main > div > div:first-child { padding-right: 5rem; }
	main > div > div:last-child { padding-left: 5rem; }
	
	main h2 { margin-bottom: 1.5rem; }
	main li { margin-bottom: 1rem; padding-left: 2rem; }
	
	img.result { top: 2rem; width: 8rem; margin-left: -4rem;  } 
	
	footer { height: 13rem; margin-top: -13rem; padding-top: 2rem; padding-bottom: 2rem; }
	main > div { padding-bottom: 13rem; }
}
@media (max-width: 650px){
	main > div { flex-direction: column; }
	main > div > div { width: 100%; position: relative; height: auto; padding: 1.5rem !important; }
	main > div > div:last-child { z-index: 80;  }
	main > div > div:last-child > div { padding-top: 1rem; }
	
	main > span { background: #fff; height: 30rem; overflow: hidden; }
	img.result { top: 0; position: relative; margin-top: 2rem; left: 50%; margin-bottom: -19rem; width: 12rem; margin-left: -6rem; }
	
	footer { position: relative; }
	footer { height: 17rem; margin-top: -17rem; }
	main > div { padding-bottom: 17rem; }
}
@media (max-width: 499px){
	
	header img { top: -50vh; }
	
	h2 { font-size: 1.7rem; }
	.bot { text-align: left; }
	
	article li { gap: 0.8rem; }
	

}