@charset "UTF-8";

/* Toggle button */
	
.toggle-nav {
	display: none;
	}

/* Navigation */	

.menu {
	font-family: "proxima-nova-soft";
	font-weight: 400;
	font-size: 1.00em;
	text-transform: uppercase;
	}
	
.menu li a {
	text-decoration: none;
	padding: 10px 9px;
	}

.menu li a:hover, .menu li.current-item a {
	padding-bottom: 8px;
	border-bottom: 1px solid;
	}
	
.menu li:last-child {margin-right: 0px;}

.menu ul li:nth-child(1) a {color: #F82E84;}
.menu ul li:nth-child(2) a {color: #594485;}
.menu ul li:nth-child(3) a {color: #36B4C2;}
.menu ul li:nth-child(4) a {color: #91C11F;}
.menu ul li:nth-child(5) a {color: #F33C14;}
.menu ul li:nth-child(6) a {color: #FFC43C;}

@media screen and (min-width: 900px) {
	
.menu ul {
	display: block;
	float: right;
	}

.menu li {
	display: inline-block;
	list-style: none;
	margin-top: 20px;
	}

}


@media screen and (max-width: 900px) {
	
.menu {
	display: block;
	float: right;
    }
    
.menu ul.active {
	display: none;
    }
	    
.menu ul {
    width: 40%;
	position: absolute;
    top: 60%;
    right: 20px;
	padding: 5px 5px;
	background: rgba(255,255,255, 0.8);
	border: 1px solid #F82E84;
	border-radius: 0.25em;
    }
      
.menu ul:after {
	width:0px;
    height:0px;
    position:absolute;
    top:0%;
    left:22px;       
    }
		    
.menu li {
	margin: 0px;
	float: none;
	display: block;
	}
	
.menu a {
	display: block;
	}
	
.toggle-nav {
	padding: 20px;
	float: right;
	display: block;
	color: #594485;
	font-size: 25px;
	text-decoration: none;
	}
	
.toggle-nav:hover, .toggle-nav.active {
    text-decoration:none;
    color:#F82E84;
    }

}


	
	
	


/* Mobile first queries */

	/* Library items */
	
header {
	margin: 0 auto;
	height: auto;
	width: 960px;
	}
	
#top {
	margin: 0 auto;
	width: 100%;
	height: 90px;
	background-color: rgba(255,255,255, 0.8);
	z-index: 99;
	position: fixed;
	top: 0;
	}

#logo {
	display: block;
	margin-top: 10px;
	margin-left: 20px;
	float: left;
	}

#footer {
	width: 100%;
	height: 60px;
	border-top: 1px solid #594485;
	margin-top: 40px;
	}

#footerhome {
	width: 100%;
	height: 60px;
	border-top: none;
	margin-top: 0px;
	}
	
#footer p, #footerhome p{
	margin-top: 15px;
	text-align: center;
	text-transform: uppercase;
	color: #594485;
	}
	
	
	/* Layout */
	
.main {
	margin-top: 125px;
	}
	
	/* Index */
	

/* Sections
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section {
  padding: 8rem 0;
  }
  

.section-heading,
.section-description {
	margin-bottom: 1.2rem;
	text-align: center;
	text-transform: none; 
	color: #FFF;
	}
	
.welcome {
  	margin-top: 100px;
  	background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../images/piano@2x.jpg');
  	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	}
	
		
.section-heading, .section-description {
	padding: 5px 10px;
	}
	
.section-heading {
	font-size: 2em;
	}
	
.section-description {
	font-size: 1.5em;
	}

	
#hometext {
	border-top: 1px dotted #594485;
	padding-bottom: 3em;
	}

#hometext h1 {
	text-align: center;
	padding-top: 3em;
	}

#hometext h2 {
	border-bottom: 1px solid #F82E84;
	width: 20%;
	margin-left: 40%;
	}
	
#hometext p {
	padding: 2em 2em 0 2em;
	}
	
.home {
  	background-image: url(../images/draftcomputerpaper.jpg);
  	background-size: cover;
	}
	
#stave {
	margin-top: 10px;
	}


	


	


	
	
	
	
	/* Show pages */
	
	/* sub nav */
	

	
	
.paypal {
	margin-top: 30px;
	}	
	
#info h1 {
	padding-bottom: 0.5em; 
	border-bottom: 1px dotted #594485; 
	}
	
#info4 h1 {
	color: #f33c14;
	padding-bottom: 0.5em; 
	border-bottom: 1px dotted #F33C14;
	}
	
#info p {
	text-transform: none;
	line-height: 18px;
	}
	
#post-1.read-more-state, #post-2.read-more-state, #post-3.read-more-state {
	display: none;
	}
	
.read-more-target {
	opacity: 0;
	max-height: 0;
	font-size: 0;
	transition: .25s ease;
	}
	
.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
	}

.read-more-state ~ .read-more-trigger:before {
  content: 'Show more';
	}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'Show less';
	}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  padding: 0 .5em;
  color: #594485;
  font-size: 0.750em;
  line-height: 2;
  border: 1px solid #594485;
  border-radius: .25em;
  margin-bottom: 20px;
  margin-top: -10px;
	}
	
#donate {
	padding-top: 20px;
	}




/* audio icons */

td a:before {
	display: inline-block;
	vertical-align: middle;
	text-transform: none;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	margin: -0.25em 0.4em 0 0;
}

.icon-sound:before {
    content: "\e907";
	font-size: 14px;
	}
	
.icon-music2:before {
    content: "\e902";
	}
	
	
	
	
	
#animage {
	display: none;
	}


.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
	}

.twinkle {
  -webkit-animation-name: twinkle;
  animation-name: twinkle;
	}
	
.flyUp {
  -webkit-animation-name: flyUp;
  animation-name: flyUp;
	}
	
.flyAcross {
  -webkit-animation-name: flyAcross;
  animation-name: flyAcross;
	}
	
	



.animated {
	-webkit-animation-duration: 3s;
	animation-duration: 3s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	
.twinkle {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;	
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	
.flyUp {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	
.flyAcross {
	-webkit-animation-duration: 5s;
	animation-duration: 5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	}
	
	

@-webkit-keyframes pulse{
  	0% { -webkit-transform: scale(1); }
    50% { -webkit-transform: scale(1.1); }
	100% { -webkit-transform: scale(1); }
	}

@keyframes pulse{
  	0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
	}
		
@-webkit-keyframes twinkle{
  	0% { -webkit-transform: scale(0.5); }
    50% { -webkit-transform: scale(0.75); }
	100% { -webkit-transform: scale(0.5); }
	}
	
@keyframes twinkle{
  	0% { transform: scale(0.5); }
    50% { transform: scale(0.75); }
    100% { transform: scale(0.5); }
	}
	
@-webkit-keyframes flyUp{
  	0% { 
		-webkit-transform: translate3d(0px, 20px, 0px);
		-moz-transform: translate3d(0px, 20px, 0px);
		-o-transform: translate3d(0px, 20px, 0px);
		-ms-transform: translate3d(0px, 20px, 0px);
		transform: translate3d(0px, 20px, 0px);
		animation-timing-function: ease-in;
		 
  
	 }
	 
    50% { 
		-webkit-transform: translate3d(50px, 25px, 0px);
		-moz-transform: translate3d(50px, 25px, 0px);
		-o-transform: translate3d(50px, 25px, 0px);
		-ms-transform: translate3d(50px, 25px, 0px);
		transform: translate3d(50px, 25px, 0px);
		animation-timing-function: ease-out; 
		}
		
	100% { 
		-webkit-transform: translate3d(110px, 15px, 0px);
		-moz-transform: translate3d(110px, 15px, 0px);
		-o-transform: translate3d(110px, 15px, 0px);
		-ms-transform: translate3d(110px, 15px, 0px);
		transform: translate3d(110px, 15px, 0px); 
		}
	}
	
@keyframes flyUp{
  	0% { 
		-webkit-transform: translate3D(0px, 20px, 0px);
		-moz-transform: translate3d(0px, 20px, 0px);
		-o-transform: translate3d(0px, 20px, 0px);
		-ms-transform: translate3d(0px, 20px, 0px);
		transform: translate3d(0px, 20px, 0px);
		animation-timing-function: ease-in;
	 }
	 
    50% { 
		-webkit-transform: translate3D(50px, 25px, 0px);
		-moz-transform: translate3d(50px, 25px, 0px);
		-o-transform: translate3d(50px, 25px, 0px);
		-ms-transform: translate3d(50px, 25px, 0px);
		transform: translate3d(50px, 25px, 0px);
		animation-timing-function: ease-out; 
		}
		
	100% { 
		-webkit-transform: translate3D(110px, 15px, 0px); 
		-moz-transform: translate3d(110px, 15px, 0px);
		-o-transform: translate3d(110px, 15px, 0px);
		-ms-transform: translate3d(110px, 15px, 0px);
		transform: translate3d(110px, 15px, 0px);
		}
	}
	
@-webkit-keyframes flyAcross{
  	0% { 
		-webkit-transform: translate3d(0px, 20px, 0px);
		-moz-transform: translate3d(0px, 20px, 0px);
		-o-transform: translate3d(0px, 20px, 0px);
		-ms-transform: translate3d(0px, 20px, 0px);
		transform: translate3d(0px, 20px, 0px);
		animation-timing-function: ease-in;
	 }
	 
    50% { 
		-webkit-transform: translate3d(60px, 20px, 0px);
		-moz-transform: translate3d(60px, 20px, 0px);
		-o-transform: translate3d(60px, 20px, 0px);
		-ms-transform: translate3d(60px, 20px, 0px);
		transform: translate3d(60px, 20px, 0px);
		animation-timing-function: ease-out; 
		}
		
	100% { 
		-webkit-transform: translate3d(120px, 20px, 0px); 
		-moz-transform: translate3d(120px, 20px, 0px);
		-o-transform: translate3d(120px, 20px, 0px);
		-ms-transform: translate3d(120px, 20px, 0px);
		transform: translate3d(120px, 20px, 0px);
		}
	}
	
@keyframes flyAcross{
  	0% { 
		-webkit-transform: translate3d(0px, 20px, 0px);
		-moz-transform: translate3d(0px, 20px, 0px);
		-o-transform: translate3d(0px, 20px, 0px);
		-ms-transform: translate3d(0px, 20px, 0px);
		transform: translate3d(0px, 20px, 0px);
		animation-timing-function: ease-in;
	 }
	 
    50% { 
		-webkit-transform: translate3d(60px, 20px, 0px);
		-moz-transform: translate3d(60px, 20px, 0px);
		-o-transform: translate3d(60px, 20px, 0px);
		-ms-transform: translate3d(60px, 20px, 0px);
		transform: translate3d(60px, 20px, 0px);
		animation-timing-function: ease-out; 
		}
		
	100% { 
		-webkit-transform: translate3d(120px, 20px,0px); 
		-moz-transform: translate3d(120px, 20px, 0px);
		-o-transform: translate3d(120px, 20px, 0px);
		-ms-transform: translate3d(120px, 20px, 0px);
		transform: translate3d(120px, 20px, 0px);
		}
	}
	

	




	
	



/* To Top */

.icon-box {
	font-size: 2em;
	line-height: 45px;
	background-color: #D4D4D4;
	display: block;
	text-align: center;
	border: none;
	width: 35px;
	height: 35px;
	}

.icon-box a:hover, .icon-box a:active {
	color: #FFF;
	}
	
.icon-box:hover, .icon-box:active {
	background-color: #594485;
	color: #FFF;
	}
	
#to-top {
	z-index: 999;
	position: fixed;
	bottom: 0%;
	right: 15px;
	}
	

/* Audio pages */	


#audio {
	border-bottom: 1px solid #594485;
	margin-bottom: 20px;
	}
	
#audioinfo h2 {
	margin-bottom: 0;
	}
	
#audioinfo p {
	font-style: italic;
	margin-bottom: 10px; 
	}
	
	
#scroll-wrapper {
	-webkit-overflow-scrolling: touch;
	overflow-y: hidden;
	overflow-x: hidden;
	}
	
#scroll-wrapper iframe {
	width: 100%;
	height: 750px;
	border: none;
	}

#audio-icons a:before {
	display: inline-block;
	vertical-align: middle;
	text-transform: none;
	font-family: 'icomoon';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
	margin: -0.25em 0.4em 0 0;
}

	
.icon-print:before {
    content: "\e903";
	font-size: 15px;
	}

.icon-back:before {
    content: "\e90c";
	font-size: 12px;
	}
	
.icon-back:link, .icon-print:link {
	color: #594485;
	}

.icon-back:hover, .icon-print:hover {
	color: #F82E84;
	}
	
a.icon-print span, a.icon-back span {
	text-transform: uppercase;
	}
	

a.icon-print span {
	margin-right: 0.5em;
	}
	
#audio-icons {
	padding-bottom: 10px;
	}
	
	

/* Larger than mobile */
@media (min-width: 400px) {
	
}

/* Larger than phablet */
@media (min-width: 550px) {
	
#hometext p {
	padding: 2em 8em 0 8em;
	}
  
 
	
#audio-icons {
	text-align: right;
	}
	
	}
	
	

/* Larger than tablet */
@media (min-width: 750px) {
	

/* Animation */

#animage {
	display: block;
	position: relative;
	}
	
#tiger {
	position: relative;
	z-index: 2;
	}

#balloon {
	position: absolute;
	top: -50px;
	left: 0px;;
	z-index: 1;
	}

#rocket {
	position: relative;
	z-index: 4;
	}
	
#pulse {
	position: absolute;
	top: 0px;
	z-index: 3;
	}
	
#twinkle {
	position: absolute;
	top: -20px;
	z-index: 2;
	}
	
#flame {
	position: absolute;
	top: 0px;
	z-index: 1;
	}
	
	
	

	
	
#essentials {
	position: relative;
	top: 40px;
	}
	
#essentials_improv {
	position: relative;
	top: 20px;
	}

#essentials ul li, #essentials_improv ul li {list-style-type: none;}

#essentials p, #essentials_improv p {
	color: #594485;
	line-height: 0.25em;
	}
	
#essentials_improv h3 {
	color: #594485;
	}
	
#artists_mobile {
	display: none;
	}
	
#resources {
	display: none;
	}
	
		
	
	}

/* Larger than desktop */
@media (min-width: 1000px) {
	@-webkit-keyframes flyUp{
  	0% { 
		-webkit-transform: translate3d(0px, 20px, 0px);
		-moz-transform: translate3d(0px, 20px, 0px);
		-o-transform: translate3d(0px, 20px, 0px);
		-ms-transform: translate3d(0px, 20px, 0px);
		transform: translate3d(0px, 20px, 0px);
		animation-timing-function: ease-in;
		 
  
	 }
	 
    50% { 
		-webkit-transform: translate3d(80px, 25px, 0px);
		-moz-transform: translate3d(80px, 25px, 0px);
		-o-transform: translate3d(80px, 25px, 0px);
		-ms-transform: translate3d(80px, 25px, 0px);
		transform: translate3d(80px, 25px, 0px);
		animation-timing-function: ease-out; 
		}
		
	100% { 
		-webkit-transform: translate3d(170px, 15px, 0px);
		-moz-transform: translate3d(170px, 15px, 0px);
		-o-transform: translate3d(170px, 15px, 0px);
		-ms-transform: translate3d(170px, 15px, 0px);
		transform: translate3d(170px, 15px, 0px); 
		}
	}
	
@keyframes flyUp{
  	0% { 
		-webkit-transform: translate3D(0px, 20px, 0px);
		-moz-transform: translate3d(0px, 20px, 0px);
		-o-transform: translate3d(0px, 20px, 0px);
		-ms-transform: translate3d(0px, 20px, 0px);
		transform: translate3d(0px, 20px, 0px);
		animation-timing-function: ease-in;
	 }
	 
    50% { 
		-webkit-transform: translate3D(80px, 25px, 0px);
		-moz-transform: translate3d(80px, 25px, 0px);
		-o-transform: translate3d(80px, 25px, 0px);
		-ms-transform: translate3d(80px, 25px, 0px);
		transform: translate3d(80px, 25px, 0px);
		animation-timing-function: ease-out; 
		}
		
	100% { 
		-webkit-transform: translate3D(170px, 15px, 0px); 
		-moz-transform: translate3d(170px, 15px, 0px);
		-o-transform: translate3d(170px, 15px, 0px);
		-ms-transform: translate3d(170px, 15px, 0px);
		transform: translate3d(170px, 15px, 0px);
		}
	}
	}

/* Larger than Desktop HD */
@media (min-width: 1200px) {}



/* Smaller than desktop */
@media (max-width: 1200px) {
	
	th.hide {display: none;}
	td#toHide {display: none;}
	}
	
	
	
/* audio pages */

@media (min-width: 550px) and (max-width: 1000px) {
	
	.icon-print span, .icon-back span {
		display: none;
		}
	
	}




	














	
	

	
	

	
	
	
	
	
	
	#essentials {
		margin-top: 0px;
		}
	
	
 

@media (max-width: 550px) {
		
	#essentials h2, #essentials p {display: inline;}
	
	}