input[type='submit']
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;  
}


div {

}

body {
	margin: 0;
	font-family: Arial;
/*	font-family: 'Raleway', Arial, sans-serif;*/
	font-size: 100%;
	font-weight: normal;
	color: black;
}

a {
text-decoration: none;
}



#contain {
	margin: auto;
	width: 100%;
    min-width: 330px;
/*    max-width: 1400px; */

}

.topbar{
height: 0px;

}



div#media  {
display: inline-block;
}


.mediacontainer {
	display: block;
	padding: 20px;
	background: #343331;
	text-align: center;
	white-space: nowrap;
    margin: 0 20px 0px 20px;
	}

.media {
position: relative;
display: inline-block;
padding: 5px;

}

.media img{
height: 40px;
}

.email {
	color: grey;
}

.menubar{
    /*background: #e6e6e6;*/
    /*background: #6a7995;*/
    /*background: rgba(106, 121, 149, 0.5);*/
    position: relative;
    display: inline-block;
    z-index: 3;
    height: 51px;
    top: 0px;
    width: 100%;
    min-width: 330px;
/*    max-width: 1400px;*/

}

.menucontainer{
	position: relative;
	display: block;
    opacity: 1;
    z-index: 1;
}

.logo {
	margin: 13px 0 11px 60px;
	position: relative;
	display: inline-block;
	white-space: nowrap;
    font-size: 26px;
    text-shadow: 2px 2px 1px rgba(0,0,0, .3);
	text-decoration: none;
	color: white;
    z-index: 2;


}



.topmenu{

	position: relative;
	text-decoration: none;
	color: black;
/*	text-shadow: 1px 1px 2px rgba(0,0,0, .3); */
	margin: 0px 20px 0 20px;
    text-align: center;
    float: left;

}


.menu{
	display: inline-block;
	margin: 0 0px 0px 0px;
	overflow: hidden;
	position: relative;
	vertical-align: top;
	padding: 17px 10px 17px 10px;
	color: black;
    font-size: 20px;

}

.menu:hover, .menu:focus, .menu:active, .menu a:hover, .menu a:focus, .menu a:active{

	overflow: visible;
	color: #6a7995;

	
}

.menu_contact{
    position: relative;
    float: right;
    border: 1px solid red;

}

.menu_contact img{
    height: 30px;
    margin: 10px 10px 0px 0px;
    border: 1px solid black;
}

.menu_item_container{
	margin: 17px 0 0 -15px;
	padding: 0 0 0 0px;
	width: 150px;
	overflow: visible;
	position: absolute;
	background: #F8F8F8;
	}
	
.menu:hover .menu_item_container, .menu:focus .menu_item_container .menu:active .menu_item_container{
	white-space: nowrap;	
        z-index: 3;
}

.menu_item_container a, .menu_item{
	text-decoration: none;
	color: black;
	padding: 10px 0 10px 0;
}

.menu_item{
	padding-left: 10px;
}

.menu_item_container a:hover, .menu_item_container a:focus, .menu_item_container a:active, .menu_item:hover, .menu_item:focus, .menu_item:active{
	text-decoration: none;
	color: white;
	background: grey;
}

/*.menu_label label, .toggle{
display: none;
}*/

input#toggle-1, input.coursegroupcheckbox, input.coursecheckbox, input.coursedesccheckbox, input.scheduleallgroupcheckbox, input.cancelcheckbox{
display: none;
}

	.menu_label label { 
			display: inline-block;
            position: absolute;
			top: 11px;
			margin: 5px 0 0px 20px;
			cursor: pointer;


		}
	
	.menu_label label img{
		height: 20px;

	}
	
	.toggle{
		padding: 0px 0 0 0;
		margin: 0px 0 0 10px;
		color: white;
		width: 200px;
		height: 0px;
		overflow: hidden;
		background: #6a7995;
		line-height: 30px;
		vertical-align: middle;
		display: block;
		position: absolute;

		transition: all ease-in-out 500ms; /* css3 transition */
		-o-transition: all ease-in-out 500ms;
		-moz-transition: all height ease-in-out 500ms;
		-webkit-transition: all height ease-in-out 500ms;
	}
	
	.toggle a {
		text-decoration: none;
	}
	
	.toggle a div{
		padding: 0 0 0 10px;
		color: white;
	}
	
	input#toggle-1:checked ~ .toggle {
		height: 130px;
	
		transition: height ease-in-out 500ms; /* css3 transition */
		-o-transition: height ease-in-out 500ms;
		-moz-transition: height ease-in-out 500ms;
		-webkit-transition: height ease-in-out 500ms;
	
	}
	
	input#toggle-1:checked ~ .toggle a > div {
		color: white;
		text-decoration: none;
		padding: 0 0 0 10px;
	
	}
	
	input#toggle-1:checked ~ .toggle a:focus > div, input#toggle-1 ~ .toggle a:hover > div, input#toggle-1 ~ .toggle a:active > div {
		color: white;
		text-decoration: none;
		background: grey;
	}


div#slider1 { 
overflow: hidden;
max-width: 920px;
margin: auto;
}

div#slider1 figure img { width: 20%; float: left; }

div#slider1 figure { 
	  position: relative;
	  width: 500%;
	  margin: 0;
	  left: 0;
	  text-align: left;
	  font-size: 0;
	  z-index: -1;
	  animation: 30s slidy infinite; 
	  -moz-animation: 30s slidy infinite; 
	  -o-animation: 30s slidy infinite; 
	  -webkit-animation: 30s slidy infinite;
}


@-webkit-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: 0%; }
}


@-o-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: 0%; }
}

@-moz-keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -400%; }
100% { left: 0%; }
}

@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: 0%; }
}


div#sliderIE { 
	  position: relative;
max-width: 920px;
margin: auto;
	  width: 100%;
	  z-index: -1;
}

div#sliderIE img { 
	  width: 100%;
}


.logotext {
font-family: 'Great Vibes', cursive;
font-size: 50px;
font-size: 7vw;
color: black;
text-shadow: 2px 2px 2px rgba(0,0,0,0.4); 
display: inline-block;
white-space: nowrap;
position: absolute;
z-index: 1;
text-align: left;
top: 10%;
left: 0%;
background: #e6e6e6;
padding: 1% 3% 0 5%;
opacity: 0.7;

}

.widepicmain {
position: relative;
text-align: center;
background: black;
border-top: 3px solid black;
}

.widepic {
position: relative;
text-align: center;
margin: 20px 20px 0 20px;
}


.widepic img, .widepicmain img {
width: 100%;
opacity: 0.85;
}


.widepictitle {
color: black;
text-shadow: 4px 4px 0px rgba(0,0,0,0.4); 
position: absolute;
top: 30px;
width: 100%;
padding: 30px 0 0px 0;
}

.widepictext {
font-size: 16px;
font-size: 2.5vw;
color: black;
position: absolute;
top: 100px;
width: 100%;
}


.widepictext2#nevin {

font-size: 20px;
font-size: 5vw;
font-variant: small-caps;
letter-spacing: 0.15em;
color: white;
position: absolute;
bottom: 13%;
/*background: #333333;*/
opacity: 1;
text-shadow: 2px 2px 1px rgba(0,0,0, .3);
z-index: 2;
width: 100%;
text-align: center;

}

.widepictext2#pianist {

/*font-family: 'Alex Brush';*/
font-size: 16px;
font-size: 3vw;
letter-spacing: 0.15em;
color: white;
position: absolute;
bottom: 6%;
/*background: #333333;*/
opacity: 1;
text-shadow: 2px 2px 1px rgba(0,0,0, .3);
z-index: 2;
width: 100%;
text-align: center;

}

.widepictext3 {

font-size: 16px;
font-size: 3vw;
color: black;
position: absolute;
top: 30%;
left: 5%;


}

.widepictext4 {

font-size: 16px;
font-size: 3vw;
color: black;
position: absolute;
top: 60%;
left: 5%;

width: 50%;

}

.widepictext5 {

font-size: 16px;
font-size: 2.5vw;
color: black;
position: absolute;
top: 50%;
left: 12%;
width: 50%;

}

.widepicbox {
position: absolute;
width: 100%;
bottom: 10%;
}

.widesection {

margin: 30px 20px 0 20px;
text-align: center;
position: relative;
vertical-align: middle;

}

.widesectiontext {

padding: 20px 40px 0px 40px;
font-size: 20px;
color: black;
text-align: center;
line-height: 30px;

}

.sectiontext a{
color: #2d559a;
}

.sectiontext a:hover, .sectiontext a:focus {
color: #800000;
}


.pagetitletext{
    	position: relative;
    	padding: 10px 2px 10px 20px;
   	color: white;
   	background: black;
    	font-size: 32px;
    	font-weight: bold;
display: inline-block;
}


#content {
	
	min-height: 300px;
	position: relative;


}

#content .title{
	font-size: 300%; 
	margin-bottom: 10px;
}

#content .body{

}

#content .course_container{
	
}



#content .course_name{
	font-size: 200%;
	font-weight: bold;
	display: block;
	position: relative;
	padding: 5px 5px 5px 5px;
}



#content .course_element{
	font-weight: bold;
	width: 170px;
	vertical-align: top;
	padding: 5px 0 5px 0;

}
#content .course_element_desc{

}

.box4, .box2 {
	padding: 50px 10px 50px 10px;
	margin: 20px 20px 0 20px;
	text-align: center;
	position: relative;

}

.box4 a {
text-decoration: none;
color: black;
}

.boxcontainer{

	padding: 10px;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	height: 180px;
	width: 180px;
	margin: 15px;
	border-radius: 23px;
	position: relative;

}


#box4-1 {
    	border: 2px solid #FFC4C4;
    	color: #FF5E5E;
    	background: #FFF2F2;
}

#box4-2 {
    	border: 2px solid #C2D4FF;
    	color: #5285FF;
    	background: #F5F7FA;
}

#box4-3 {
    	border: 2px solid #8DD69C;
    	color: #22BF41;
        background: #F5FAF6;
}

#box4-4 {
    	border: 2px solid #FFC2F3;
    	color: #CC31AE;
    	background: #FAF5F9;
}

#box4-1:hover, #box4-1:focus, #box4-2:hover, #box4-2:focus, #box4-3:hover, #box4-3:focus, #box4-4:hover, #box4-4:focus {
	background: #E8E8E8;
}

.box4 .boximage {
	margin: 20px 0 0 0;
}

.box4 .boximage img {
	width: 80px;
	height: 80px;
	border: none;
}

.box4 .boxtitle {
	margin: 20px 0 0 0px;
	font-size: 30px;
	font-weight: bold;
}

.box4 .boxcontent {
	float: left;
	margin: -150px 0px 0px 0px;
	font-size: 11px;
	font-weight: bold;
	text-align: justify;
	width: 90%;
	height: 120px;
	color: black;
}

.box4 .learnmore {
	border-radius: 10px;
	float: left;
	margin: -30px 0 0 45px;
	font-size: 12px;
	font-weight: bold;
	text-align: justify;
	width: 70px;
	height: 12px;
	color: white;

}




#learnmore-1 {

	background: #AB8282;
    	background: -webkit-linear-gradient(top, #FFC4C4 0%, #5E1414 100%);
	background: -moz-linear-gradient(top, #FFC4C4 0%, #5E1414 100%);
	background: -o-linear-gradient(top, #FFC4C4 0%, #5E1414 100%);
	background: -ms-linear-gradient(top, #FFC4C4 0%, #5E1414 100%);
	background: linear-gradient(#FFC4C4 0%, #5E1414 100%);
}

#learnmore-2 {
	background: #C2D4FF;
    	background: -webkit-linear-gradient(top, #C2D4FF 0%, #364B7D 100%);
	background: -moz-linear-gradient(top, #C2D4FF 0%, #364B7D 100%);
	background: -o-linear-gradient(top, #C2D4FF 0%, #364B7D 100%);
	background: -ms-linear-gradient(top, #C2D4FF 0%, #364B7D 100%);
	background: linear-gradient(#C2D4FF 0%, #364B7D 100%);
}

#learnmore-3 {
	background: #C2FFCE;
    	background: -webkit-linear-gradient(top, #8DD69C 0%, #195725 100%);
	background: -moz-linear-gradient(top, #8DD69C 0%, #195725 100%);
	background: -o-linear-gradient(top, #8DD69C 0%, #195725 100%);
	background: -ms-linear-gradient(top, #8DD69C 0%, #195725 100%);
	background: linear-gradient(#8DD69C 0%, #195725 100%);
}

#learnmore-4 {
	background: #FFC2F3;
    	background: -webkit-linear-gradient(top, #FFC2F3 0%, #631B55 100%);
	background: -moz-linear-gradient(top, #FFC2F3 0%, #631B55 100%);
	background: -o-linear-gradient(top, #FFC2F3 0%, #631B55 100%);
	background: -ms-linear-gradient(top, #FFC2F3 0%, #631B55 100%);
	background: linear-gradient(#FFC2F3 0%, #631B55 100%);
}

.box2 div{
	text-align: left;
	padding: 0;
	white-space: nowrap;
	display: inline-block;
	margin: 15px;
	width: 440px;
	height: 280px;
	overflow: hidden;
	border-radius: 23px;
}



.box2 img, .box2 a{
    	width: 100%;
    	border: none;
}


.box2 .box2overlay, .box2 .box2overlaytext{
	margin-left: -460px;
	margin-top: 200px;
    	height: 25px;
    	width: 160px;
    	position: absolute;
    	padding: 10px 10px 10px 40px;
	border-radius: 0;
}

.box2 .box2overlay{
    	background: grey;
    	opacity: 0.7;
}

.box2 .box2overlaytext{
    	color: white;
    	opacity: 0.7;
	font-size: 20px;
	font-weight: bold;

    	
}

.sectiontitle, .widepictitle, .sectiontitle-a {
font-size: 40px;
line-height: 50px;

}

.sectiontitle {
/*text-shadow: 2px 2px 2px rgba(0,0,0, .15); */
padding: 0px 0 40px 0;
letter-spacing: 0.15em;
}

.sectiondesc{
font-size: 22px;
padding: 0px 0 20px 0;
}

.backbutton{
display: inline-block;
position: relative;
margin: 0px 10px 0px 0px;
border: 0;
vertical-align: middle;
}


.backbutton img{
    height: 30px;
}


.sectionboxcontainer{

	padding: 10px;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	height: 180px;
	width: 180px;
	margin: 15px;
	border-radius: 23px;
	position: relative;
    	border: 2px solid #FFC4C4;
    	color: #FF5E5E;
    	background: #FFF2F2;
        vertical-align: top;

}

.sectionboxcontainer img{

width: 100%;
}

.sectionboxtitle {

	font: bold 24px Arial, sans-serif;

}

.sectionboxcontent {
	float: left;
	margin: 0px 0px 0px 0px;
        padding: 5px;
	text-align: justify;
	height: 140px;
	color: black;


}

.sectionboxcontainer:hover, .sectionboxcontainer:focus {
	background: #E8E8E8;
}


#academic{
color: white;
background: #223c77;
opacity: 0.7;
}

#creative{
color: white;
background: #cc0000;
opacity: 0.7;
}

#social{
color: white;
background: #006600;
opacity: 0.7;
}

#pricing{
color: black;
background: none;
}

.sectiontitle-a {
text-shadow: 2px 2px 2px rgba(0,0,0, .5); 
padding: 0px 0 0px 0;
}

.sectiondesc-a {
font-size: 28px;
padding: 0px 0 50px 0;
text-shadow: 2px 2px 2px rgba(0,0,0, .5); 
}

.sectionboxcontainer-a{

	padding: 10px 0 10px 0;
	font-size: 14px;
	display: inline-block;
	width: 200px;
	margin: 15px 10px 15px 10px;
	position: relative;
    	color: white;
        vertical-align: top;
}

.sectionboxcontainer-a img{

width: 100%;
}

.sectionboxtitle-a {

	font-size: 20px;
	font-weight: bold;

}

.sectionboxcontent-a {

	margin: 10px 0px 0px 0px;

	text-align: center;
line-height: 18px;


}

.sectionboxcontainer-a:hover, .sectionboxcontainer-a:focus {
	
}

.sectionheader-b {
margin: 50px 0 50px 0;

}


.sectiontitle-b {
margin: 3px 30px 0px 0;
font-size: 25px;
font-weight: bold;
	display: inline-block;
vertical-align: top;
}

.sectiondesc-b {
font-size: 18px;
text-align: left;
color: grey;
display: inline-block;
margin: 0px 0 0 0;
line-height: 35px;
}

.sectionboxcontainer-b{

	padding: 10px;
	font-size: 12px;
	font-weight: bold;
	display: inline-block;
	width: 180px;
	margin: 15px;
	position: relative;
        vertical-align: top;
background: #f2f2f2;
height: 230px;


}

.sectionboxcontainer-b:hover, .sectionboxcontainer-b:focus {
text-decoration: none;
color: white;
background: grey;
}


.sectionboxtitle-b {
padding: 10px 0 10px 0;
	font-size: 24px;
	font-weight: bold;

}

.sectionboxcontent-b {
margin: 10px 0 0 0;
	text-align: center;
	font-size: 14px;
}

.sectionboxcontent-b-price {
margin: 15px 0 0 0;
	text-align: center;
	font-size: 20px;
}

.sectionboxcontent-b-more{
margin: 12px 0 0 0;
	text-align: center;
	font-size: 16px;
}


#registration{
background: none;
opacity: 1;
text-align: center;
margin: auto;
color: white;
}

.sectiontitle-c {
font-size: 40px;
text-shadow: 2px 2px 2px rgba(0,0,0, .15); 
margin: 5px 10px 10px 5px;
padding: 30px 0 30px 0;
line-height: 20px;

}

.sectionboxcontainer-c{

	font-size: 14px;
	display: inline-block;
	max-width: 320px;
	margin: 5px 5px 5px 5px;
	position: relative;
        vertical-align: top;
        height: 300px;
padding: 10px;

}

.sectionboxtitle-c {

	font-size: 35px;
	font-weight: normal;
	margin: -20px 0px 25px 0px;
display: inline-block;
padding: 20px 0 20px 0;
border-bottom: 1px solid white;
width: 200px;
color: white;

}

.sectionboxcontent-c {

	margin: 10px 0px 0px 0px;
	padding: 0px 10px 0px 10px;
	font-size: 20px;
	text-align: center;
line-height: 22px;
color: white;
}


.sectionboxcontent-c-close{
	font-size: 30px;
padding: 30px 0 30px 0;
margin: 10px 10px 5px 5px;
}

.sectionboxcontent-c-close, .sectionboxcontainer-c, .sectiontitle-c, .sectiondesc-c {
color: white;
background: #435a83;
opacity: 0.8;
} 

.sectionboxcontent-c a, .sectionboxcontent-c a:visited, .sectionboxcontent-c a:active, a.contactlink {
	color: #F4EBCE;
	font-weight: bold;
}

.sectionboxcontent-c a:hover, .sectionboxcontent-c a:focus, a.contactlink:hover, a.contactlink:focus {
	color: black;
}



.lessonbox_container {
	padding: 10px 10px 10px 10px;
	margin: 0 auto;
	text-align: center;
	position: relative;
	display: inline-block;
}


.lessonbox {
	height: 90px;
	width: 90px;
	margin: 15px;
	border-radius: 23px;
    	border: 2px solid #FFC4C4;
    	color: #FF5E5E;
    	background: #FFF2F2;
}


.lessonbox_container .lessonbox_label {
	float: left;
	margin: 0 0 0 0px;
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.coursegroupcontainer {
	margin: 10px 0px 10px 0px;
	position: relative;
	display: inline-block;
}

.coursegroup {
	font-size: 150%;
	font-weight: bold;
	display: block;
	padding: 10px 10px 10px 10px;

	color: black;
	cursor: pointer;
	background: #F0F0F0 ;	
	position: relative;
}

.coursegroup img{
	height: 20px;
	
	transition: All ease-in-out 500ms;
	-o-transition: All ease-in-out 500ms;
	-moz-transition: All ease-in-out 500ms;	
	-webkit-transition: All ease-in-out 500ms;
	
	transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}

/*
.coursecontainer {
	max-height: 0px;
	overflow: hidden;

	transition: max-height ease-in-out 500ms;
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition: max-height ease-in-out 500ms;
}
*/

input.coursegroupcheckbox:checked ~ .coursecontainer {
	max-height: 5000px;
	
	transition: max-height ease-in-out 500ms;
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition:max-height ease-in-out 500ms;
	
	}

input.coursegroupcheckbox:checked + label img{
	
	transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-webkit-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-moz-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-o-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-ms-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	
	}	


.courseleftside, .containerleftside {
	width: calc(100% - 440px);
	min-width: 400px;
	display: inline-block;
	margin: 10px 0 10px 10px;
	font-size: 100%;
	
}



.courserightside, .containerrightside {

	min-height: 100px;
	float: right;
	display: inline-block;
	margin: 10px 10px 10px 10px;
	padding: 20px 10px 20px 20px;

}

.courserightside{
	background: #F0F0F0 ;
}

.containerrightside img{
	width: 370px;
}
.course {

}

.courselabel {
	font-size: 125%;
	font-weight: bold;
	color: black;
	background: #F0F0F0 ;
	padding: 10px 10px 10px 10px;
}

.coursedetails{
	padding: 0 0px 0 10px;

}

input.coursecheckbox:checked ~ .coursedetails{
	max-height: 1000px;
	
	transition: max-height ease-in-out 500ms; /* css3 transition */
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition: max-height ease-in-out 500ms;
	
	}

.coursedesc{
	max-height: 55px;
	overflow: hidden;
	
	transition: max-height ease-in-out 500ms; /* css3 transition */
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition: max-height ease-in-out 500ms;
}



input.coursedesccheckbox:checked ~ .coursedesc{
	max-height: 2000px;
	
	transition: max-height ease-in-out 500ms; /* css3 transition */
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition: max-height ease-in-out 500ms;
	
	}


input.coursedesccheckbox ~ label:after{
	content: 'more...';
	color: red;
		}		
input.coursedesccheckbox:checked ~ label:after {
	content: '...less';
	color: red;
		}


#coursegrouptable{
	border-bottom: 2px dotted grey;
}
.coursegroup_element{
	font-weight: bold;
	width: 180px;
	vertical-align: top;
	padding: 5px 0 5px 0;

}
.coursegroup_element_desc{
	text-align: right;
	width: 150px;
}

.tuitioncontainer{
	display: block;
	padding: 0;
}

.tuition {
	margin: 20px 10px 0 0;
	display: inline-block;	
	vertical-align: top;
}

.tuitionlist{
	margin: 10px 0 0 0;
	display: inline-block;
	line-height: 30px;

}

.tuitionlist img{
	height: 30px;
	vertical-align: middle;
}

.checkmark {
	height: 30px;
	vertical-align: middle;
}

.auditioncontainer{
	margin-top: 20px;
	text-align: center;
}

.auditionbox{
	background: blue;
	padding: 10px 0 10px 0;
	width: 150px;
	display: inline-block;
	border-radius: 15px;
	color: black;
}


.auditionbox:focus, .auditionbox:hover {
	background: black;
	color: white;
}

.auditiontext{
	
}

.logincontainer{

	min-width: 295px;
	margin-right: 10px;
display: inline-block;

}
.loginrow{
	padding: 10px;
	background: #F8F8F8;
	margin: 10px 0 10px 0;
	display: block;
	overflow: hidden;
	text-align: left;
}


.logintitle{
	float: left;
	display: inline-block;
margin-right: 10px;
}

.logindata{

	display: inline-block;
	float: right;
	text-align: right;

}

.schedulecontainer{
text-align: center;
}

#schedulestudentcontainer{
	border: 0px solid red;
	background: white;
	padding: 5px;
	margin: 10px 10px 10px 10px;
	display: inline-block;
	vertical-align: top;
	box-shadow: 0px 0px 10px 2px #E0E0E0;
	min-width: 250px;
}

.schedulestudent{
	border: 0px solid red;
	font-size: 150%;
	padding: 10px;
	background: #F8F8F8;
	text-align: center;
}

.schedulenext{
	font-size: 125%;
	padding: 10px 10px 5px 10px;
}

.schedulenextdate{
	padding: 5px 10px 10px 10px;

}

.scheduleallgroup {
	font-size: 125%;
	font-weight: normal;
	display: block;
	padding: 10px 10px 10px 10px;
	color: black;
	cursor: pointer;
	background: #D0D0D0;
}


.scheduleallgroup img{
	height: 20px;
	
	transition: All ease-in-out 500ms;
	-o-transition: All ease-in-out 500ms;
	-moz-transition: All ease-in-out 500ms;	
	-webkit-transition: All ease-in-out 500ms;
	
	transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}


.scheduleall{
	max-height: 0px;
	overflow: hidden;


	transition: max-height ease-in-out 500ms;
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition: max-height ease-in-out 500ms;
}

input.scheduleallgroupcheckbox:checked ~ .scheduleall {
	max-height: 5000px;
	
	transition: max-height ease-in-out 500ms;
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition:max-height ease-in-out 500ms;
	
	}

input.scheduleallgroupcheckbox:checked + label div {

	}

input.scheduleallgroupcheckbox:checked + label img{
	
	transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-webkit-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-moz-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-o-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-ms-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	
	}	

.schedulelesson{
	border: 0px solid black;
	background: #F8F8F8;
	padding: 10px;
	margin: 10px 0px 0px 0px;
	z-index: 3;	
}

.schedulelesson div{
	display: inline;
	position: relative;
	z-index: 1;
	font-size: 80%;


}


.cancelcheckboxcontainer{

}


.cancel {
	border: 0px solid purple;
	margin: -32px 5px 0 0;
	height: 20px;

}

.cancel img{
	height: 20px;
	width: 20px;
	float: right;
	-webkit-backface-visibility: hidden;    
        backface-visibility: hidden;
	

	transition: All ease-in-out 500ms;
	-o-transition: All ease-in-out 500ms;
	-moz-transition: All ease-in-out 500ms;	
	-webkit-transition: All ease-in-out 500ms;
	
	transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-webkit-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-moz-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-o-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
	-ms-transform: rotate(0deg) scale(1) skew(1deg) translate(0px);
}

.schedulecancel{
	
	max-height: 0px;
	overflow: hidden;
	margin-left: 20px;
	font-size: 80%;

	transition: max-height ease-in-out 500ms;
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition: max-height ease-in-out 500ms;
}

input.cancelcheckbox:checked ~ .schedulecancel  {

	max-height: 100px;
	
	transition: max-height ease-in-out 500ms;
	-o-transition: max-height ease-in-out 500ms;
	-moz-transition: max-height ease-in-out 500ms;
	-webkit-transition:max-height ease-in-out 500ms;
	
	}
	
	

input.cancelcheckbox:checked + label img{
	
	transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-webkit-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-moz-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-o-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	-ms-transform: rotate(90deg) scale(1) skew(0deg) translate(0px);
	
	}	

.cancelform{
	
	display: inline-block;
}

.button {
	margin:10px 0 0 0; 
	padding:5px 15px; 
	background:#E0E0E0; 
	border:0 none;
	cursor:pointer;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	display: inline-block;
	text-decoration: none;
color: black;
font-size: 18px;
}

.cancelbutton {
	margin:0px 0 0 0; 
	padding:5px 10px; 
	background:#E0E0E0; 
	border:0 none;
	cursor:pointer;
	-webkit-border-radius: 5px;
	border-radius: 5px; 
	display: inline-block;
	text-decoration: none;
color: black;
font-size: 80%;
font-family: 'Raleway', sans-serif;
}

.button:hover, .button:active, .button:focus, .cancelbutton:hover, .cancelbutton:active, .cancelbutton:focus {
	background: grey;
color: white;
}

.lesson, .lesson_makeup, lesson_closed{
	color: black;
}

.lesson_cancel{
	color: grey;
}

.lesson_cancel_watermark, lesson_closed_watermark{
	color: red;
	border: 0px solid black;
	background-color: transparent;
	margin: -30px 0 20px 0;
	text-align: center;
	font-size: 140%;
	font-weight: bold;
	opacity: 0.3;	
	
	transform: scale(1,1) rotate(-4deg);;
	-webkit-transform: scale(1,1) rotate(-4deg);
	-moz-transform: scale(1,1) rotate(-4deg);
	-o-transform: scale(1,1) rotate(-4deg);
	-ms-transform: scale(1,1) rotate(-4deg);

}



.messagemain{
	font-weight: bold;
	color: red;
	padding: 10px;
	margin: 0 0px 10px 0;
	background: #F8F8F8;
	position: relative;
	display: inline-block;
}



.messagelesson{	
	padding: 10px 15px 10px 15px;
	margin: 0 0px 20px 0;
	background: #F8F8F8;

display: inline-block;
}

.footer {

	padding: 10px 10px 10px 10px;
	background: #6a7995;
	margin: 40px 0 0 0;
	text-align: center;
	position: relative;
	color: white;

}


.footer a, #header a {

	text-decoration: none;
	color: white;

}

.mainbox a, #headerlogin a {

	text-decoration: none;
	color: black;
}

.footer a:hover, #header a:hover, .mainbox a:hover, #headerlogin a:hover {

	text-decoration: none;
	color: grey;

}



#footermedia{
	padding: 0;
	font-size: 12px;
	font-weight: bold;
	color: black;
	text-align: center;
	white-space: nowrap;
}

#footermedia img{
	height: 40px;
}

#copyright {
	margin: 10px;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	white-space: nowrap;
	
}



@media screen and (max-width: 560px) {


    .topmenu{
        margin: auto;
        white-space: nowrap;
        width: 100%;
        

    }


    .menu {
        font-size: 16px;
    	padding: 18px 7px 18px 7px;
    }


}