@charset "utf-8";
/* CSS Document */

.select section div h4 {text-align: center;font-size: 1.5em;margin-top: 1.5em;}
.select hr {height: 0;border: 0 none;background: #fff;height: 1px;}

#charSelect {}
#charSelect ul {width: 95%;margin: 0 auto;}
#charSelect ul li {float:left;width: 100%;padding: 0.5em;}
#charSelect ul li a {width: 100%;font-size: 1.5em;overflow: hidden;z-index: +1;}
#charSelect ul li a img {width: 100%;transition: all ease 0.5s;}
#charSelect ul li a span {display: block;font-size: 50%;}
#charSelect ul li a:hover img {transform: scale(1.2);}

#instSelect {}
#instSelect ul {width: 100%;margin: 0 auto;}
#instSelect ul li {float:left;width: 33.33%;padding: 0.25em;overflow: hidden;/*height: 55vw;*/}
#instSelect ul li a {width: 100%;overflow: hidden;}
#instSelect ul li p {width: 100%;/*position: relative;bottom:0;*/position: absolute;bottom:0;left: 0;padding: 0.25em;background: rgba(0,0,0,0.5);transition: all ease 0.5s;font-size: 50%;overflow: hidden; white-space: nowrap;text-overflow: ellipsis;}
#instSelect ul li a img {width: 100%;transition: all ease 0.5s;}
#instSelect ul li a:hover img {transform: scale(1.2);}
#instSelect ul li a:hover p {bottom:0;}

/**/
@media screen and (min-width: 480px) {
	#charSelect ul li {width: 33.33%;}
/*	#instSelect ul li {height: auto;font-size: 100%;}
	#instSelect ul li a:hover p {bottom:0;}*/
	#instSelect ul li {padding: 0.5em;}
		#instSelect ul li p {bottom:-100%;font-size: 100%;overflow: visible;white-space: normal;}
}

@media screen and (min-width: 750px) {
	/*#charSelect ul {width: 90%;}*/
	#instSelect ul li {width: 25%;}
}

@media screen and (min-width: 920px) {
	/*#charSelect ul {width: 85%;}*/
}

@media screen and (min-width: 1200px) {
	#instSelect ul li {width: 20%;}
}

@media screen and (min-width: 1500px) {
}