@charset "utf-8";
/*============================================================


  gallery.css


============================================================*/

html {
  height: 100%;
}

body {
	height: 100%;
	padding-top: 100px;
}

#main {
	padding-bottom: 12%;
}


@media (max-width: 660px) {
	body {
		padding-top: 64px;
	}

	#main {
		padding-bottom: 24%;
	}
}



#main > h3 {
	display: block;
	width: 100%;
	font-family: 'Nunito';
	font-size: 187.5%;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 5.7% 0;
}

#main > section {
	display: block;
	width: 100%;
}

.lesson1 {
	background: #70d7d7;
}

.lesson2 {
	background: #c999d3;
}

.lesson3 {
	background: #fe9bae;
}

.lesson4 {
	background: #91c9f2;
}

.lesson5 {
	background: #88d762;
}

.lesson6 {
	background: #fdce3e;
}

.lesson7 {
	background: #7f99ed;
}

.lesson8 {
	background: #fd986a;
}

.lesson9 {
	background: #91e4f2;
}

.lesson10 {
	background: #FF7575;
}

.lesson11 {
	background: #AF87EB;
}

.lesson12 {
	background: #FB9496;
}

.lesson13 {
	background: #52C288;
}

.lesson14 {
	background: #9DD0FB;
}

.lesson15 {
	background: #F8DD60;
}

.lesson16 {
	background: #D96A74;
}

#main > section > h4 {
	display: block;
	width: 100%;
	font-family: 'Nunito';
	font-size: 187.5%;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-align: center;
	padding: 3.5% 0 0 0;
	color: #fff;
}


@media (max-width: 660px) {
	#main > h3 {
		font-size: 112.5%;
		padding: 6.25% 0;
	}

	#main > section > h4 {
		font-size: 112.5%;
		padding: 6.25% 0 0 0;
	}
}



#main > section > ul {
	display: block;
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	padding: 2% 0;
	overflow: hidden;
}

@media (max-width: 660px) {
	#main > section > ul {
		width: 100%;
		padding: 6.8% 0;
	}
}


#main > section > ul > li {
	display: block;
	width: 32%;
	padding-top: 32%;
	margin-left: 2%;
	margin-bottom: 2%;
	float: left;
	overflow: hidden;
	position: relative;
}

#main > section > ul > li:nth-of-type(3n+1) {
	margin-left: 0;
}

@media (max-width: 660px) {
	#main > section > ul > li {
		display: block;
		width: 45.5%;
		padding-top: 45.5%;
		margin-left: 3%;
		margin-bottom: 3%;
	}

	#main > section > ul > li:nth-of-type(3n+1) {
		margin-left: 3%;
	}
}





#main > section > ul > li figure a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}


#main > section > ul > li figure a > img {
	width: 100%;
	height: auto;
}


#main > section > ul > li figcaption {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
}