@keyframes play-title-scale {
	12% { scale: 1.0; }
	37% { scale: 1.05; }
	62% { scale: 1.0; }
}
@keyframes play-button-scale {
	50% { scale: 1.0; }
	75% { scale: 1.03; }
	100% { scale: 1.0; }
}

@keyframes play-img-scale-065 {
	0% { scale: 0.65; }
	75% { scale: 0.65; }
	87% { scale: 0.7; }
	100% { scale: 0.65; }
}

@keyframes play-img-scale-1 {
	0% { scale: 1.0; }
	75% { scale: 1.0; }
	87% { scale: 1.1; }
	100% { scale: 1.0; }
}

@keyframes play-img-scale-13 {
	0% { scale: 1.3; }
	75% { scale: 1.3; }
	87% { scale: 1.5; }
	100% { scale: 1.3; }
}

body {
	padding: 0 0 0 0;
	margin: 1px 0 0 0;
	font-family: Verdana, Arial, Sans-Serif;
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-size: 16px;
	color: #494949;
	background-color: #003c84;
	background-image: url(images/back.gif);
	background-repeat: repeat;
	width: 100%;
	min-width: 793px;
}

h1 {
	text-align: center;
}

h2 {
	margin: 0 0 20px 0;
	text-align: center;
}

h3 {
	margin: 0 0 16px 0;
	text-align: center;
}

h4 {
	margin: 0 0 12px 0;
	text-align: center;
}

h5 {
	margin: 0 0 10px 0;
	text-align: center;
}

p {
	font-size: 16px;
	margin: 0 0 10px 0;
}

a {
	color: #0000cd;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-decoration: underline;
}

	a:hover {
		text-decoration: none;
	}

ul {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style: none;
}

#content img {
	border: 0;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#header {
	padding: 0 0 0 0;
	margin: 0 0 6px 0;
	background-color: #02C6D2;
	width: 100%;
	min-width: 749px;
	height: 76px;
	text-align: center;
}

#menu {
	font-size: 28px;
	padding: 0 0 0 0;
	margin: 0 0 5px 0;
	width: 100%;
	min-width: 749px;
	overflow: hidden;
}

	#menu ul.menu {
		float: left;
		width: 100%;
		min-width: 749px;
		margin: 0 0 1px 0;
		padding: 0 0 0 0;
		background: url(images/lolight4.gif) repeat-x 0 0;
		overflow: hidden;
	}

		#menu ul.menu li {
			float: left;
			text-align: center;
		}

			#menu ul.menu li.home {
				width: 15%;
				overflow: hidden;
			}

			#menu ul.menu li.lessons {
				width: 19%;
				overflow: hidden;
			}

			#menu ul.menu li.students {
				white-space: nowrap;
				width: 23%;
				overflow: hidden;
			}

			#menu ul.menu li.instructor {
				width: 23%;
				overflow: hidden;
			}

			#menu ul.menu li.contact {
				white-space: nowrap;
				width: 20%;
				overflow: hidden;
			}

			#menu ul.menu li a {
				padding: 0;
				margin: 0;
				display: block;
				color: #494949;
				text-decoration: none;
			}

				#menu ul.menu li a:hover {
					font-weight: bold;
					background: url(images/hilight7.gif) repeat-x 0 0;
				}

			#menu ul.menu li.hilighted a {
				font-weight: bold;
				background: url(images/hilight7.gif) repeat-x 0 0;
			}

#submenu {
	/*font-family: Arial, Verdana, Sans-Serif;*/
	font-size: 28px;
	font-style: italic;
	padding: 0 0 0 0;
	margin: 0 0 5px 0;
	width: 100%;
	min-width: 749px;
	overflow: hidden;
}

	#submenu ul.submenu {
		float: left;
		width: 100%;
		min-width: 749px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		background: url(images/sm-lolight10.jpg) repeat-x 0 0;
		overflow: hidden;
	}

		#submenu ul.submenu li {
			float: left;
			text-align: center;
		}

			#submenu ul.submenu li.performances {
				width: 29%;
			}

			#submenu ul.submenu li.fun {
				width: 11%;
			}

			#submenu ul.submenu li.contests {
				width: 19%;
			}

			#submenu ul.submenu li.recitals {
				width: 19%;
			}

			#submenu ul.submenu li.camps {
				width: 15%;
			}

			#submenu ul.submenu li a {
				padding: 0;
				margin: 0;
				display: block;
				color: #f2ffff;
				text-decoration: none;
			}

				#submenu ul.submenu li a:hover {
					font-weight: bold;
					background: url(images/sm-hilight10.jpg) repeat-x 0 0;
				}

			#submenu ul.submenu li.hilighted a {
				font-weight: bold;
				background: url(images/sm-hilight10.jpg) repeat-x 0 0;
			}

#submenu2 {
	/*font-family: Arial, Verdana, Sans-Serif;*/
	font-size: 28px;
	font-style: italic;
	padding: 0 0 0 0;
	margin: 0 0 5px 0;
	width: 100%;
	min-width: 749px;
	overflow: hidden;
}

	#submenu2 ul.submenu2 {
		float: left;
		width: 100%;
		min-width: 749px;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		background: url(images/sm-lolight10.jpg) repeat-x 0 0;
		overflow: hidden;
	}

		#submenu2 ul.submenu2 li {
			float: left;
			text-align: center;
		}

			#submenu2 ul.submenu2 li.contact {
				width: 28%;
			}

			#submenu2 ul.submenu2 li.register {
				width: 22%;
			}

			#submenu2 ul.submenu2 li a {
				padding: 0;
				margin: 0;
				display: block;
				color: #f2ffff;
				text-decoration: none;
			}

				#submenu2 ul.submenu2 li a:hover {
					font-weight: bold;
					background: url(images/sm-hilight10.jpg) repeat-x 0 0;
				}

			#submenu2 ul.submenu2 li.hilighted a {
				font-weight: bold;
				background: url(images/sm-hilight10.jpg) repeat-x 0 0;
			}

#content {
	/*line-height: 16px;*/
	text-align: left;
	padding: 10px 9px 10px 10px;
	margin: 2px 0 2px 0;
	min-width: 730px;
	min-height: 452px;
	background-color: #4EDBF5;
	background: url(images/ramp5.gif) #4EDBF5 repeat-x 0px 0%;
}

	#content div.picture-block {
		text-align: center;
		padding-left: 14px;
	}

	#content div.floating-picture-container {
		overflow: hidden;
		height: 100%;
	}

		#content div.floating-picture-container div.floating-picture-block {
			text-align: center;
			padding-left: 14px;
			display: inline-block;
			float: left;
			overflow: hidden;
			height: 100%;
		}

	#content img {
		border: solid 1px white;
	}

	#content div.video-block {
		text-align: left;
		height: 256px;
	}

	#content div.video {
		width: 316px;
		height: 246px;
	}

	#content div.text4video {
		text-align: justify;
		margin: -248px 0 0 326px;
		padding: 0 0 0 0;
		vertical-align: top;
	}

	#content div.text4video-bottom {
		text-align: justify;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		vertical-align: top;
	}

		#content div.text4video-bottom div img.em {
			scale: 1;
		}

	#content div.still-block {
		text-align: left;
		height: 412px;
	}

	#content div.still {
		width: 302px;
		height: 402px;
	}

	#content div.text4still {
		text-align: justify;
		margin: -404px 0 0 312px;
		padding: 0 0 0 0;
		vertical-align: top;
	}

	#content div.text-bottom {
		text-align: justify;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
		vertical-align: top;
	}

		#content div.text-bottom p a {
			cursor: pointer;
		}

		#content div.text-bottom p img.refs {
			scale: 1;
		}
	/* 
#494949 black
#f2ffff white 
#4EDBF5 blue 
*/

	#content table.pricelist {
		margin: 26px 0 0 20px;
		width: 370px;
		text-align: left;
		border-left: solid 1px #38ACC0;
		border-bottom: solid 1px #38ACC0;
	}

		#content table.pricelist tr.head {
			font-weight: bold;
			color: #f2ffff;
			background-color: #38ACC0;
		}

		#content table.pricelist td {
			border-top: solid 1px #38ACC0;
			border-right: solid 1px #38ACC0;
		}

	#content table.booklist {
		margin: 5px 0 0 0;
		width: 700px;
		text-align: left;
		border-left: solid 1px #339CAE;
		border-bottom: solid 1px #339CAE;
	}

		#content table.booklist tr.head {
			padding: 5px 5px 5px 5px;
			font-weight: bold;
			color: #f2ffff;
			background-color: #339CAE;
		}

			#content table.booklist tr.head td {
				padding: 0 5px 0 5px;
			}

		#content table.booklist td {
			padding: 5px 5px 5px 5px;
			border-top: solid 1px #339CAE;
			border-right: solid 1px #339CAE;
		}

	#content .video-gallery-div {
		display: inline-block;
		float: left;
		width: 400px;
		height: 400px
		/*font-weight: bold;*/
		text-align: center;
		border: 1px solid black;
	}

	#content .video-link-div {
		display: block;
		width: 400px;
		height: 240px;
	}

	#content table.video-gallery {
		width: 100%;
		/*font-weight: bold;*/
		text-align: center;
	}

		#content table.video-gallery tr.text {
			vertical-align: bottom;
		}

			#content table.video-gallery tr.text td {
				font-size: 20px;
			}

		#content table.video-gallery tr.video {
			vertical-align: top;
		}

		#content table.video-gallery td {
			width: 50%;
			vertical-align: middle;
			text-align: center;
		}

			#content table.video-gallery td.video-link {
				width: 50%;
				height: 240px;
			}

				#content table.video-gallery td.video-link a img {
					cursor: pointer;
					scale: 1.3;
					animation-name: play-img-scale-13;
					animation-duration: 4s;
					animation-iteration-count: infinite;
				}

		#content table.video-gallery img {
			border: 0;
			margin: 0 0 0 0;
			padding: 0 0 0 0;
		}

	#content table.education {
		margin: 2px 0 0 0;
		width: 95%;
	}

		#content table.education td.year {
			width: 100px;
			vertical-align: top;
		}

	#content table.contactme {
	}

		#content table.contactme td {
			padding: 2px 2px 2px 2px;
			vertical-align: middle;
		}

			#content table.contactme td.col1 {
			}

			#content table.contactme td.col2 {
				text-align: right;
				width: 20px;
			}

	#content .video-container {
		overflow: hidden;
		height: 100%;
		margin: 0 -5px 0 -30px;
	}

		#content .video-container .video-item {
			width: 359px;
			height: 320px;
			overflow: hidden;
			float: left;
			display: inline-block;
			margin: 10px 0 15px 26px;
			border-bottom: white solid 1px;
		}

			#content .video-container .video-item .video-header {
				display: block;
				padding: 0;
				margin: 0 0 5px 0;
			}

			#content .video-container .video-item .video-image {
				/*width: 400px;*/
				height: 330px;
				display: block;
				border-left: white solid 1px;
				border-top: white solid 1px;
				border-right: white solid 1px;
				border-bottom: white solid 1px;
				margin: 0;
				padding: 0;
			}

				#content .video-container .video-item .video-image a img {
					margin: 130px 0 0 180px;
					border: none;
					cursor: pointer;
					scale: 0.65;
					animation-name: play-img-scale-065;
					animation-duration: 4s;
					animation-iteration-count: infinite;
				}

#footer {
	width: 100%;
}

	#footer p {
		text-align: center;
		margin: 5px 8px 5px 8px;
		color: White;
	}

		#footer p .footer-phone {
			/*display: inline-block;*/
			color: #0000cd;
			background-color: white;
			text-decoration: none;
			padding: 1px 5px 1px 5px;
			border-radius: 10px;
		}

			#footer p .footer-phone:hover {
				text-decoration: none;
			}

#content table.contactme td.col3 {
	width: 300px;
}

#controls select {
	background-color: #15c5f4;
	color: White;
	font-weight: bold;
	font-size: 16px;
	margin: 0 0 0 0;
}

#controls table.title {
	margin: 10px 0 20px 0;
}

	#controls table.title td {
		vertical-align: middle;
		text-align: center;
	}

		#controls table.title td.title h2 {
			margin: 6px 0 6px 0;
		}

		#controls table.title td.title h3 {
			margin: 4px 0 4px 0;
		}

#controls .go {
	background-color: #15c5f4;
	color: White;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	margin: 0 0 0 0;
	padding: 0 3px 0 3px;
}

#controls table.title td.recital-selector-td {
	width: 50%;
	font-weight: bold;
	font-size: 40px;
	text-align: left;
	padding: 0 0 0 5px;
/*	white-space: nowrap;*/
}

#controls table.title td.selprefix {
	font-weight: bold;
	padding: 0 6px 0 0;
}

#controls table.title td.seltitle {
	font-weight: bold;
	font-size: 30px;
	text-align: right;
	padding: 0 15px 0 5px;
	text-align: right;
}

#controls table.title td.seltitle .select-span-title {
	animation-name: play-title-scale;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	display: inline-block;
}

#content .recital-selector {
	position: relative;
	display: inline-block;
	font-size: 30px;
	margin-right: 50px;
}

	#content .recital-selector .mybutton {
		font-family: Verdana, Sans-Serif;
		display: block;
		/*width: 450px;*/
		background-color: #00A1CD; /*#15c5f4;*/
		font-weight: bold;
		color: white;
		font-size: 37px;
		border: 1px solid black;
		border-radius: 10px;
		padding: 7px 20px 10px 20px;
		margin: 0;
		white-space: nowrap;
		animation-name: play-button-scale;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	#content .recital-selector .mybutton-performances {
		/*font-size: 38px;*/
		/*width: 530px;*/
	}

	#content .recital-selector .mybutton-contests {
		/*font-size: 41px;*/
		/*width: 450px;*/
	}

	#content .recital-selector .mybutton-recitals {
		/*width: 436px;*/
	}

	#content .recital-selector .mybutton-camps {
		/*width: 416px;*/
	}

	#content .recital-selector .mybutton-fun {
		/*width: 416px;*/
	}

#content:hover .recital-selector .recital-links {
	display: none;
}

#content .recital-selector .recital-links {
	display: none;
	position: absolute;
	font-weight: normal;
	background-color: #15c5f4;
	width: 820px;
	z-index: 1;
	padding-bottom: 5px;
	text-align: left;
	border: 1px solid black;
	/*left: -80px;*/
/*	margin-right: 50px;*/
}

#content .recital-selector .recital-links a {
	display: inline-block;
	font-size: 28px;
	padding: 10px 10px 10px 10px;
}

#content .recital-selector .recital-links a:hover {
	background-color: white;
}

#content .recital-selector:hover .recital-links {
	display: block;
}

#content .recital-selector .recital-links .close-selector {
	font-weight: normal;
	position: absolute;
	right: -50px;
	top: -1px;
	z-index: 2;
	background-color: #15c5f4;
	border: 1px solid black;
	padding: 0;
	margin: 0;
	display: block;
	width: 48px;
	height: 44px;
	overflow: hidden;
}

	#content .recital-selector .recital-links .close-selector a {
		font-size: 60px;
		text-decoration: none;
		padding: 0;
		margin: -16px 0 0 0;
		-webkit-transform: scale(1.55, 1);
		-moz-transform: scale(1.55, 1);
		-o-transform: scale(1.55, 1);
		transform: scale(1.55, 1);
		display: inline-block;
	}

	#content .recital-selector .recital-links .close-selector:hover {
		background-color: white;
		color: black;
	}

	#content .recital-selector .recital-links .close-selector a:hover {
	}

.popup-video-div, .popup-audio-div {
	position: fixed;
	top: 0;
	left: 0;
	/*    top: 5%;*/
	/*    left: 5%;*/
	width: 100%;
	height: 100%;
	display: none;
	background: rgba(128,128,128,1);
}

	.popup-video-div .popup-video-inner-div, .popup-audio-div .popup-audio-inner-div {
		position: absolute;
		top: 1%;
		left: 1%;
		width: 90%;
		height: 82%;
		background: rgba(0,0,0,1.0);
	}

		.popup-video-div .popup-video-inner-div .close, .popup-audio-div .popup-audio-inner-div .close {
			display: inline-block;
			float: right;
			font-size: 48px;
			margin: -10px -68px 0 0;
			cursor: pointer;
		}

		.popup-video-div .popup-video-inner-div .popup-video, .popup-audio-div .popup-audio-inner-div .popup-audio {
			background: rgba(0,0,0,1.0);
			background-color: black;
		}

		.popup-video-div .popup-video-inner-div .close-button, .popup-audio-div .popup-audio-inner-div .close-button {
			display: inline-block;
			font-size: 32px;
			margin: 3px 0 0 38%;
			border-radius: 5px;
			border: solid 1px black;
			background-color: white;
			color: #dd0000;
			font-weight: bold;
			padding: 1px 40px 1px 40px;
			cursor: pointer;
		}

/* 7 items per row */
@media (2300px < width <= 2700px) {
	#content .video-container .video-item {
		width: 13.3%;
		margin-left: 0.96%;
	}
}

/* 6 items per row */
@media (2000px < width <= 2300px) {
	#content .video-container .video-item {
		width: 15.4%;
		margin-left: 1.25%;
	}
}

/* 5 items per row */
@media (1700px < width <= 2000px) {
	#content .video-container .video-item {
		width: 18.5%;
		margin-left: 1.5%;
	}
}

/* 4 items per row */
@media (1400px < width <= 1700px) {
	#content .video-container .video-item {
		width: 23.2%;
		margin-left: 1.8%;
	}
}

/* 3 items per row */
@media (1000px < width <= 1400px) {
	#content .video-container .video-item {
		width: 30.8%;
		margin-left: 2.5%;
	}
}

/* 2 items per row */
@media (920px < width <= 1000px) {
	body { font-size: 26px; }
	p { font-size: 26px; }
	#content div.text-bottom p img.refs { scale: 1.3; }
	#content table.video-gallery td.video-link a img { scale: 2; }
	#content .video-container .video-item .video-image a img { scale: 1; animation-name: play-img-scale-1; animation-duration: 4s; animation-iteration-count: infinite; }
	#content table.video-gallery tr.text td { font-size: 24px; }
	#content div.text4video-bottom div img.em { scale: 1.3; }

	#content .video-container .video-item {
		width: 46.6%;
		margin-left: 3.2%;
		height: 388px;
	}
}

@media (860px < width <= 920px) {
	body { font-size: 26px; }
	p { font-size: 26px; }
	#content div.text-bottom p img.refs { scale: 1.3; }
	#content table.video-gallery td.video-link a img { scale: 2; }
	#content .video-container .video-item .video-image a img { scale: 1; animation-name: play-img-scale-1; animation-duration: 4s; animation-iteration-count: infinite; }
	#content table.video-gallery tr.text td { font-size: 24px; }
	#content div.text4video-bottom div img.em { scale: 1.3; }

	#menu ul.menu li {
		font-size: 25px;
	}

	#submenu ul.submenu li {
		font-size: 24px;
	}

	#controls table.title td.seltitle { font-size: 30px; }

	#content .recital-selector .mybutton {
/*		font-size: 37px;*/
	}

	#content .recital-selector .recital-links {
		width: 730px;
	}

	#content .video-container .video-item {
		width: 46.6%;
		margin-left: 3.2%;
		height: 388px;
	}
}

@media (827px < width <= 860px) {
	body { font-size: 26px; }
	p { font-size: 26px; }
	#content div.text-bottom p img.refs { scale: 1.3; }
	#content table.video-gallery td.video-link a img { scale: 2; }
	#content .video-container .video-item .video-image a img { scale: 1; animation-name: play-img-scale-1; animation-duration: 4s; animation-iteration-count: infinite; }
	#content table.video-gallery tr.text td { font-size: 24px; }
	#content div.text4video-bottom div img.em { scale: 1.3; }

	#menu ul.menu li {
		font-size: 23px;
	}

	#submenu ul.submenu li {
		font-size: 22px;
	}

	#controls table.title td.seltitle { font-size: 27px; }

	#content .recital-selector .mybutton {
/*		font-size: 33px;*/
	}

	#content .recital-selector .recital-links {
		width: 730px;
	}

	#content .video-container .video-item {
		width: 46.6%;
		margin-left: 3.2%;
		height: 388px;
	}
}

@media (width <= 827px) {
	body { font-size: 26px; }
	p { font-size: 26px; }
	#content div.text-bottom p img.refs { scale: 1.3; }
	#content table.video-gallery td.video-link a img { scale: 2; }
	#content .video-container .video-item .video-image a img { scale: 1; animation-name: play-img-scale-1; animation-duration: 4s; animation-iteration-count: infinite; }
	#content table.video-gallery tr.text td { font-size: 24px; }
	#content div.text4video-bottom div img.em { scale: 1.3; }

	#menu ul.menu li {
		font-size: 23px;
	}

	#submenu ul.submenu li {
		font-size: 22px;
	}

	#controls table.title td.seltitle { font-size: 25px; }

	#content .recital-selector .mybutton {
/*		font-size: 33px;*/
	}

	#content .recital-selector .recital-links {
		width: 730px;
	}

	#content .video-container .video-item {
		width: 46.6%;
		margin-left: 3.2%;
		height: 388px;
	}
}