/* ---------------------------------- PAGE RESET -----------------------------------------------------  */

*
{margin: 0;
padding: 0;}

img
{border: none;}

.clear
{clear:both;}

.hidden
{display: none;}


body 
{font-size: 62.5%;
background: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

a:link, a:active, a:visited {color: #D81F4A;
text-decoration: none;
-o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition: .5s;
  }
a:hover{color: #000033;
text-decoration: underline; }

h2 {
font-size: 4.0em;
color:#000033;}


h4 {
font-size: 2.6em;
color:#000000;
padding: 10px 0 0 0;
}

p {
font-size: 2.0em;
color:#000033;}

.bright_title {color: #006699; font-weight: bold;}
.red_title {color: #D81F4A; font-weight: bold;}

.education_box {padding: 0 0 25px 0;}

#commercialpage iframe {
    height: 150px;
    width: 100%;
	margin: 5px 0 15px 0;
}

#gigspage .bright_title
{
padding: 0 0 10px 0;
}

#testimonialspage .bright_title
{
padding: 0 0 20px 0;
}

#bottom
{
padding: 10px 0 10px 0;
}

#bottom p {
text-align:center;
font-size:1.4em;
color: #333333;
padding-top: 5px;
}

#bottom a:link, #bottom a:visited, #bottom a:active {

color: #009900;
text-decoration:none;}

#bottom a:hover{color: #003300;}

#bottom p.adminlink, #bottom a:link.adminlink, #bottom a:visited.adminlink, #bottom a:active.adminlink {color: #121212; text-decoration:none; margin-top: 5px;}

#bottom a:hover.adminlink {color: #666666;}



/*----------------- MOBILE ---------------------------------------------------------------------------------- */

#wrapper
{
width: 300px;
margin: auto auto auto auto;
text-align: center;

}

.header
{width: 300px;
height: 70px;
margin: auto auto 10px auto;
position:relative;

}

.header h1 a
{
width: 300px;
height: 66px;
text-indent: -5000px;
background-image:  url(images/logo.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 0;

}


.header h1 span{
	position: absolute;
	top:0;
	left:0;
	width: 300px;
height: 66px;
background-image:  url(images/logo.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -66px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.header h1 span:hover{
	opacity: 1;
}



#navcontainer #wheel {
width: 280px;
height: 22px;
display: block;
background: url(images/menu.png) 0 0;
cursor: pointer;
margin: 0 0 8px 10px;
}



#navcontainer #wheel:hover{
background: url(images/menu.png) 0 -20px;
}

#navcontainer.BigMenu #wheel
{
background: url(images/menu.png) 0 -40px;
}

#navcontainer.BigMenu #wheel:hover
{
background: url(images/menu.png) 0 -60px;
}


#navcontainer ul
{


}

.BigMenu
{
height: 210px;
}

.SmallMenu
{
height: 30px;

}

.HiddenNav
{
display: none;
}

#navcontainer{
	text-align: center;
	margin: 5px 0;	
	}
	
#navlist ul
{
margin: 0;
white-space: nowrap;
padding: 0;
text-align: center;

}


#navlist li
{font-size: 2.2em;
display: block;
list-style-type: none;
font-weight:bold;
padding: 0;
	text-align: center;

}

#navlist li img
{
border: 0;
}



#navlist a
{
padding: 0;
border: none;




}

#navlist a:link, #navlist a:visited
{

text-decoration: none;
}

#navlist a:hover
{
border: none;


}


#homepage #navcontainer .homelink a,
#biogpage #navcontainer .bioglink a,
#whatpage #navcontainer .whatlink a,
#practicepage #navcontainer .practicelink a,
#constitutionpage #navcontainer .constitutionlink a,
#contactpage #navcontainer .contactlink a,
#dancepage #navcontainer .dancelink a,
#gallerypage #navcontainer .gallerylink a
{
color: #000099;

}


.education_link a
{
width: 250px;
height: 329px;
text-indent: -5000px;
background-image:  url(images/education.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 25px;

}	

.education_link span{
	position: absolute;
	top:0;
	left:0;
	width: 250px;
height: 329px;
background-image:  url(images/education.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -329px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.education_link span:hover{
	opacity: 1;
}

.commercial_link a
{
width: 282px;
height: 329px;
text-indent: -5000px;
background-image:  url(images/commercial.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 9px;

}	

.commercial_link span{
	position: absolute;
	top:0;
	left:0;
	width: 282px;
height: 329px;
background-image:  url(images/commercial.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -329px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.commercial_link span:hover{
	opacity: 1;
}





.gigs_link a
{
width: 250px;
height: 329px;
text-indent: -5000px;
background-image:  url(images/gigs.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 25px;

}	

.gigs_link span{
	position: absolute;
	top:0;
	left:0;
	width: 250px;
height: 329px;
background-image:  url(images/gigs.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -329px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.gigs_link span:hover{
	opacity: 1;
}

h3 {
font-size: 2.4em;
color:#D81F4A;
}

.col-cont {margin: 0 auto; max-width: 700px;  padding: 0 0 20px 0;}
.home-youtube-container {cursor: pointer;  position: relative; background: #000000 url(images/videoloader.gif) no-repeat center center;} 
.homeVideoThumbnail {
position: relative;
  height: 0;
  overflow: hidden;
  padding-bottom: 75%;

}

.homeVideoThumbnail iframe {
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
}




.videoscreen
		{
		
		float: none;
		padding: 0;
		width: 100%;
		min-width: 300px;
		max-width: 800px;
		height: auto;
		margin: auto auto auto auto;
		
		opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
		
		-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
		}
		
		.videoscreen:hover {
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */

	
	-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;
}

.videooverlay
{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
 background: url(images/videothumb.png);
    background-repeat: no-repeat;
    background-size: 100px 75px;
    background-attachment: inherit;
    background-position: center; 

		opacity: 0.5;
    filter: alpha(opacity=100); /* For IE8 and earlier */
		
		-webkit-transition: opacity 0.5s;
	-moz-transition:    opacity 0.5s;
	-o-transition:      opacity 0.5s;

}

.video-caption
{
position: absolute;
top: 0;
left: 0;
background: url(images/image_hover.png) repeat;
width: 100%;
padding: 0 0 0 5px;
cursor: pointer;
}

.video-caption p

{
text-align: left;
color:#ffffff;
padding: 5px 0;
font-size: 1.6em;}


/*----------------- TABLET ---------------------------------------------------------------------------------- */
@media (max-width: 1000px) and (min-width: 551px) {

#wrapper
{
width: 90%;
margin: auto auto auto auto;
text-align: center;

}

.header
{width: 100%;
height: 70px;
margin: auto auto 10px auto;
position:relative;
}


.header h1 a
{
width: 300px;
height: 66px;
text-indent: -5000px;
background-image:  url(images/logo.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
margin: auto auto auto auto;

}


.header h1 span{
	position: absolute;
	top:0;
	left:0;
	width: 300px;
height: 66px;
background-image:  url(images/logo.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -66px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.header h1 span:hover{
	opacity: 1;
}


#navcontainer #wheel
{
width: 0;
height: 0;
display: none;

}

.BigMenu
{
height: 70px;
}

.SmallMenu
{
height: 70px;

}

.HiddenNav
{
display: block;
}

#navcontainer {
position: relative;
margin: auto auto auto auto;
   
    width: 520px;
	padding: 0;
	font-size: 1.6em;
	font-weight: bold;

	
    }      
	

#navcontainer	ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1.6em;
}

#navcontainer li {
    float: left;
	
}

#navcontainer li a {
    display: block;
   
    text-align: center;
    padding: 0 18px 5px 0;
    text-decoration: none;
}

#navcontainer li a:hover {
color: #000033;
}

#navlist li
{
font-size: 1.0em;

}

	
	
	#homepage #navcontainer .homelink a,
	#aboutpage #navcontainer .aboutlink a,
	#educationpage #navcontainer  .educationlink a,

	#commercialpage #navcontainer .commerciallink a,

	#gigspage #navcontainer .gigslink a,
	#testimonialspage #navcontainer .testimonialslink a,
	#contactpage #navcontainer .contactlink a

	{color: #006699; list-style: square inside none;}



.cycle-about
{
float: right;
padding: 0 0 20px 20px;
width: 33%;
height: auto;


}

.aboutpic
{
width: 100%;
height: auto;

}

.frontbox_1 {
  position: relative;
  width: 30%;
  padding-bottom: 39.5%;
  float: left;
}

.frontbox_2 {
  position: relative;
  width: 33.8%;
  padding-bottom: 39.5%;
  float: left;
}



.education_link, .commercial_link, .gigs_link
{
position: absolute;
  width: 100%;
  height: 100%;

}


.education_link a
{
width: 100%;
height: 100%;
text-indent: -5000px;
background-image:  url(images/education.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 200%;
display: block;
position: relative;
top: 0;
left: 0;

}	

.education_link span{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
height: 100%;
background-image:  url(images/education.png);
background-repeat: no-repeat;
background-position: 0 100%;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.education_link span:hover{
	opacity: 1;
}

.commercial_link a
{
width: 100%;
height: 100%;
text-indent: -5000px;
background-image:  url(images/commercial.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 200%;
display: block;
position: relative;
top: 0;
left: 0;

}	

.commercial_link span{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
height: 100%;
background-image:  url(images/commercial.png);
background-repeat: no-repeat;

background-position: 0 100%;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.commercial_link span:hover{
	opacity: 1;
}





.gigs_link a
{
width: 100%;
height: 100%;
text-indent: -5000px;
background-image:  url(images/gigs.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% 200%;
display: block;
position: relative;
top: 0;
left: 0;

}	

.gigs_link span{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
height: 100%;
background-image:  url(images/gigs.png);
background-repeat: no-repeat;

background-position: 0 100%;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.gigs_link span:hover{
	opacity: 1;
}



}

/*----------------- FULL SIZE ---------------------------------------------------------------------------------- */
	@media (min-width: 1001px) {
	
#wrapper
{width:999px;
margin: auto auto auto auto;
text-align: center;
}

.header
{width: 950px;
height: 160px;
margin: 10px auto auto auto;
position:relative;

}

#educationpage .header
{

background: url(images/education-header.png);
background-repeat: no-repeat;
background-position: 0 -1px;
background-size: 17% auto;
display: block;

}

#commercialpage .header
{

background: url(images/commercial-header.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 17% auto;
display: block;

}

#gigspage .header
{

background: url(images/gigs-header.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 17% auto;
display: block;

}

	
	.header h1 a
{
width: 600px;
height: 132px;
text-indent: -5000px;
background-image:  url(images/logo.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 175px;


}


.header h1 span{
	position: absolute;
	top:0;
	left:0;
	width: 600px;
height: 132px;
background-image:  url(images/logo.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -132px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.header h1 span:hover{
	opacity: 1;
}


#navcontainer #wheel
{
width: 0;
height: 0;
display: none;

}

.BigMenu
{
height: 60px;
}

.SmallMenu
{
height: 60px;

}

.HiddenNav
{
display: block;
}

#navcontainer {
position: relative;
margin: auto auto auto auto;
   
    width: 950px;
	padding: 0;
	font-size: 1.6em;
	font-weight: bold;

	
    }      
	

#navcontainer	ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
	font-family: Verdana, Arial, Helvetica, sans-serif; 
	font-size: 1.6em;
}

#navcontainer li {
    float: left;
	
}

#navcontainer li a {
    display: block;
   
    text-align: center;
    padding: 0 18px 5px 0;
    text-decoration: none;
}

#navcontainer li a:hover {
color: #000033;
}

#navlist li
{
font-size: 1.0em;

}

	
	
	#homepage #navcontainer .homelink a,
	#aboutpage #navcontainer .aboutlink a,
	#educationpage #navcontainer  .educationlink a,

	#commercialpage #navcontainer .commerciallink a,

	#gigspage #navcontainer .gigslink a,
	#testimonialspage #navcontainer .testimonialslink a,
	#contactpage #navcontainer .contactlink a

	{color: #006699; list-style: square inside none;}


.content{
height: auto;

}

.education_link
{
width: 320px;
height: 400px;

float: left;
}	

.education_link a
{
width: 300px;
height: 395px;
text-indent: -5000px;
background-image:  url(images/education.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 0;

}	

.education_link span{
	position: absolute;
	top:0;
	left:0;
	width: 300px;
height: 395px;
background-image:  url(images/education.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -395px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.education_link span:hover{
	opacity: 1;
}

.commercial_link
{
width: 340px;
height: 400px;

float: left;
}	

.commercial_link a
{
width: 338px;
height: 395px;
text-indent: -5000px;
background-image:  url(images/commercial.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 1px;

}	

.commercial_link span{
	position: absolute;
	top:0;
	left:0;
	width: 338px;
height: 395px;
background-image:  url(images/commercial.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -395px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.commercial_link span:hover{
	opacity: 1;
}

.gigs_link
{
width: 320px;
height: 400px;

float: left;
}

.gigs_link a
{
width: 300px;
height: 395px;
text-indent: -5000px;
background-image:  url(images/gigs.png);
background-repeat: no-repeat;
background-position: 0 0;
background-size: 100% auto;
display: block;
position: relative;
top: 0;
left: 20px;

}	

.gigs_link span{
	position: absolute;
	top:0;
	left:0;
	width: 300px;
height: 395px;
background-image:  url(images/gigs.png);
background-repeat: no-repeat;
background-size: 100% auto;	
background-position: 0 -395px;

opacity: 0;
	-webkit-transition: opacity 1.1s;
	-moz-transition:    opacity 1.1s;
	-o-transition:      opacity 1.1s;
}

.gigs_link span:hover{
	opacity: 1;
}

h3 {
font-size: 3.0em;
color:#D81F4A;
}


.unite-gallery
{
padding: 15px 0;

}

.cycle-about
{
float: right;
padding: 0 0 20px 20px;


}

.aboutpic
{
width: 300px;
height: auto;

}
	
	}