* { margin: 0; padding: 0; }

body {
	font-family: 'Nunito', sans-serif;
}

a { text-decoration: none; }

h3 {
	font-size: 20px;
	margin: 1em 0;
}

header {
	border-bottom: 1px solid #eee;
	padding: 10px;
	margin-bottom: 20px;
}

footer {
	background: #eee;
	color: #aaa;
	font-size: 12px;
	padding: 30px 20px;
	margin-top: 50px;
}

footer .age {
	border: 1px solid #ccc;
	border-radius: 50%;
	color: #999;
	display: inline-block;
	font-size: 11px;
	padding: 5px;
}

footer p { margin: .4em 0; }

.page {
	margin: 0 auto;
	width: 85%;
}

.index-bg {
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	z-index: 0;
	width: 100%;
}

.index-bg > div {
	max-width: 20%;
	position: absolute;
}

.index-bg > div:nth-child(1) { left: 0; top: -1%; }
.index-bg > div:nth-child(2) { left: 30%; top: 0; }
.index-bg > div:nth-child(3) { left: 60%; top: 3%; }
.index-bg > div:nth-child(4) { right: -5%; top: -1%; }

.index-bg > div img { width: 100%; }

.index-logo {
	margin: 15vh 0 10vh;
	text-align: center;
	position: relative;
	z-index: 1;
}

.index-logo p {
	color: #777;
	font-size: 20px;
	margin: 10px auto;
	width: 70%;
}

.abc-book-logo {
	display: flex;
	font-size: 10vw;
	justify-content: center;
	margin: 0.5em auto;
}

.abc-book-logo span {
	align-items: center;
	background: #fff;
	border: 0.1em solid #ccc;
	border-radius: 20%;
	display: flex;
	font-weight: 900;
	height: 10vw;
	justify-content: center;
	line-height: 1;
	margin: 0 -0.07em;
	position: relative;
	text-transform: uppercase;
	width: 10vw;
}

.abc-book-logo span:nth-child(1) { border-color: #77b833; color: #77b833; transform: rotate(-5deg); z-index: 3; }
.abc-book-logo span:nth-child(2) { border-color: #f18b17; color: #f18b17; top: -0.2em; transform: rotate(7deg); z-index: 1; }
.abc-book-logo span:nth-child(3) { border-color: #f1909c; color: #f1909c; top: 0.2em; transform: rotate(1deg); z-index: 2; }
.abc-book-logo span:nth-child(4) { border-color: #f4a508; color: #f4a508; transform: rotate(-2deg); z-index: 3; }
.abc-book-logo span:nth-child(5) { border-color: #00b0ea; color: #00b0ea; top: 0.2em; transform: rotate(-3deg); z-index: 2; }
.abc-book-logo span:nth-child(6) { border-color: #77b833; color: #77b833; top: -0.2em; transform: rotate(-2deg); z-index: 1; }
.abc-book-logo span:nth-child(7) { border-color: #cd8aba; color: #cd8aba; transform: rotate(8deg); z-index: 3; }

.inner-logo {
	display: flex;
	justify-content: flex-start;
	margin: 1em 0;
}

.inner-logo .abc-book-logo {
	font-size: 4vw;
	margin: 0 0.6em;
}
.inner-logo .abc-book-logo span { height: 4vw; width: 4vw; }

.letters-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	margin: 0 -1%;
}

.letters-list:after {
	content: "";
	flex: auto;
}

.letters-list .letter {
	box-sizing: border-box;
	flex-basis: 23%;
	line-height: 1;
	margin: 1%;
	text-transform: uppercase;
}

.letter {
	background: #ffbf1b;
	border-radius: 10px;
	color: #fff;
	display: inline-block;
	font-size: 12vw;
	font-weight: bold;
	position: relative;
}

.letter:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}

.letter a,
.letter span {
	align-items: center;
	color: #fff;
	display: flex;
	justify-content: center;
	position: absolute;
	height: 100%;
	width: 100%;
}

.letter-blocks {
	margin-bottom: 60px;
}

.letter-blocks .letter-images {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.letter-blocks .letter-images > div {
	box-sizing: border-box;
	flex-basis: 30%;
	margin-bottom: 10%;
	position: relative;
}

.letter-blocks .letter-images > div:after {
	content: "";
	display: block;
	padding-bottom: 100%;
}


.letter-blocks .letter-images > div div {
	background: #fff8e8;
	align-items: center;
	border-radius: 25px;
	box-sizing: border-box;
	display: flex;
	height: 100%;
	justify-content: center;
	position: absolute;
	transition: .2s background;
	width: 100%;
}

.letter-blocks .letter-images div.active div { background: #ffe9b6; }
.letter-blocks .letter-images div.active em { color: #c54900; }

.letter-blocks .letter-images > div img {
	bottom: 25px;
	max-width: 90%;
	max-height: 80%;
	position: relative;
}

.letter-blocks .letter-images > div em {
	bottom: 10px;
	font-size: 4.25vw;
	font-style: normal;
	font-weight: bold;
	position: absolute;
	text-align: center;
}

.letter-stair {
	background: #fff8e8;
	border-radius: 25px;
	margin-bottom: 60px;
	padding: 15px 20px;
	position: relative;
}

.letter-stair > div {
	display: flex;
	flex-direction: column;
	font-size: 5.2vw;
	font-weight: bold;
	line-height: 1;
	text-transform: uppercase;
}

.letter-stair > div div.active { color: #ef7f1a; }

.letter-stair > div > div { margin: .25em 0; }
.letter-stair > div > div:nth-child(2) { margin-left: 0.8em; }
.letter-stair > div > div:nth-child(3) { margin-left: 1.6em; }
.letter-stair > div > div:nth-child(4) { margin-left: 2.4em; }
.letter-stair > div > div:nth-child(5) { margin-left: 3.2em; }
.letter-stair > div > div:nth-child(6) { }
.letter-stair > div > div:nth-child(7) { margin-left: 0.8em; }
.letter-stair > div > div:nth-child(8) { margin-left: 1.6em; }
.letter-stair > div > div:nth-child(9) { margin-left: 2.4em; }
.letter-stair > div > div:nth-child(10) { margin-left: 3.2em; }

.letter-stair .play,
.letter-wave .play {
	align-items: center;
	background: #ffaa00;
	border-radius: 50%;
	box-shadow: 0 0 16px #eee;
	display: flex;
	justify-content: center;
	height: 50px;
	margin-top: -25px;
	position: absolute;
	right: 25px;
	top: 0%;
	width: 50px;
	z-index: 2;
}

.letter-stair .play em,
.letter-wave .play em {
	background: transparent;
	border: 0;
	border-color: transparent transparent transparent #fff;
	border-style: solid;
	border-width: 10px 0 10px 16px;
	box-sizing: border-box;
	cursor: pointer;
	height: 20px;
	left: 5%;
	position: relative;
	width: 0;
}

.letter-wave {
	background: #fff8e8;
	border-radius: 25px;
	margin-bottom: 60px;
	padding: 30px 20px;
	position: relative;
}

.letter-wave > div {

}
.letter-wave svg {
	width: 100%;
}

.letter-wave .wave { position: relative; }

.letter-wave .wave-glyph-h1,
.letter-wave .wave-glyph-h2,
.letter-wave .wave-glyph-l1,
.letter-wave .wave-glyph-l2 {
	font-weight: bold;
	position: absolute;
	text-transform: uppercase;
}

.letter-wave .wave-glyph-h1,
.letter-wave .wave-glyph-h2 { font-size: 5.5vw; top: -0.4em; }

.letter-wave .wave-glyph-h1 { left: 47.4%; }
.letter-wave .wave-glyph-h2 { left: 87.4%;}

.letter-wave .wave-glyph-l1,
.letter-wave .wave-glyph-l2 { font-size: 3.5vw; bottom: -0.4em; }

.letter-wave .wave-glyph-l1 { left: 28.6%; }
.letter-wave .wave-glyph-l2 { left: 68.6%;}

.letter-table > div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 60px;
}

.letter-table > div div {
	margin-bottom: 0.7em;
	width: 30%;
}

.letter-table > div div a {
	background: #fff8e8;
	border-radius: 10px;
	color: #000;
	display: block;
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	padding: .7em 0;
	text-align: center;
	transition: .3s all;
}

.letter-table > div div a.active {
	background: #ef7f1a;
	color: #fff;
}