html, body { margin: 0; overflow-x: hidden; }
html { -webkit-text-size-adjust: none; }
*{ margin:0; padding:0}
:focus{ outline:none}
img, fieldset{ border:none;}
a{ text-decoration:none!important;}
body{ font-family:'Open Sans', Arial, Helvetica, sans-serif; font-weight: 400; background-color:#ccddea}

.main-body{ float:left; width:100%; background: url('../images/background-tile.gif') repeat-x; background-color: #ccddea; }
.wrapper{ margin:0 auto; width:1100px}

header{ float:left; width:100%; padding:0px; position:relative; z-index:99; overflow: hidden; }

.address { float: left; width: 70%; font-size: 13px; color: #99bedb; height: 26px; margin: 9px 0; }
.address .divide { padding: 2px 0 0 0;}
.address a { color: #ffffff; }
.top-nav { float: left; width: 30%; text-align: right; margin: 12px 0; height: 23px; }
.top-nav ul { display: block; float: right; margin: 0px; padding: 0px; }
.top-nav ul li { display: block; float: left; padding: 0px; margin: 0px; width: auto; }
.top-nav ul li.facebook { background: url('../images/facebook.png') no-repeat; width: 9px!important; height: 19px!important; }

.top-nav ul li.facebook a img { width: 100%; height: 100%; }
.top-nav ul li.facebook a:hover { display: block; background: url('../images/facebook-roll.png') no-repeat; width: 9px; height: 19px; }
.top-nav ul li img.divide { padding: 2px 0 0 0; }
.top-nav ul li a { font-family: 'Open Sans'; font-weight: semibold; font-size: 13px; text-transform: uppercase; color: #ffffff; font-weight: 400;}
.top-nav ul li a:hover { color: #99bedb; }

.logo { float: left; width: 26%; background-color: #ffffff; margin: 8px 0; height: 145px; text-align: center; vertical-align: middle; padding: 0 2%; }
.logo img { width: 100%; }
nav { float: left; width: 70%; margin: 8px 0; }
nav ul { display: block; float: left; width: 100%; margin: 0px; padding: 0px;}
nav ul li { display: block; float: left; width: 19%; margin: 0 0 0 1%; background-color: #ffffff; text-align: center; height: 50px; padding: 95px 0 0 0;}
nav ul li a { font-size: 14px; text-transform: uppercase; color: #000000; font-family: 'Open Sans'; font-weight: 700; padding: 100px 0 0 0; min-width: 70px!important; }
nav ul li a:hover { color: #005596; }
nav ul li a.dance { background: url('../images/icon1.gif') no-repeat center; }
nav ul li a:hover.dance { background: url('../images/icon1-roll.gif') no-repeat center; }
nav ul li a.music { background: url('../images/icon2.gif') no-repeat center; }
nav ul li a:hover.music { background: url('../images/icon2-roll.gif') no-repeat center; }
nav ul li a.rules { background: url('../images/icon3.gif') no-repeat center; }
nav ul li a:hover.rules { background: url('../images/icon3-roll.gif') no-repeat center; }
nav ul li a.about { background: url('../images/icon4.gif') no-repeat center; }
nav ul li a:hover.about { background: url('../images/icon4-roll.gif') no-repeat center; }
nav ul li a.staff { background: url('../images/icon5.gif') no-repeat center; }
nav ul li a:hover.staff { background: url('../images/icon5-roll.gif') no-repeat center; }

nav ul li:hover .sub_menu{ display:block; }
nav ul li .sub_menu { position:relative; left: -20%; z-index:99999; display:none; width: 320px!important; padding: 11px 0 0 0; }

nav ul li .sub_menu img { margin: 0px!important; padding: 0px!important; }
nav ul li .sub_menu .menu_list_arrow { background: url('../images/dropdown-arrow.png') no-repeat center; height:  25px; }
nav ul li .sub_menu .menu_list a { position: relative; display: block; }
nav ul li .sub_menu .menu_list{ background:#005596; text-align: center; }
nav ul li .sub_menu .menu_list a{ position: relative; display: block; color: #ffffff; padding: 6px 10px; font-size: 14px; }
nav ul li .sub_menu .menu_list a:hover{color:#005596; background: #ffffff;}
nav ul li .sub_menu .menu_list.active a{color:#005596; background:#ffffff;}

.toggle_nav{width: 100%;float: left}
.toggleMenu {background: url(../images/toggle_icon.png) no-repeat center center #005496; margin-top:35px;cursor: pointer; padding: 16px 24px;float: right;position: relative;z-index: 1000;border-radius:4px;}
.toggleMenu{display: none;}
.toggle_icon{display: none;position: absolute;right: 10px;top:9px;background: url(../images/arrowplus.png) no-repeat center center;height: 20px;width: 20px }
.close{display: none;position: absolute;background: url(../images/minus1.png) no-repeat center center;height: 20px;width: 20px }

.slider { float: left; width: 100%; margin-bottom: 8px; height: 447px;}
.slider img { width: 100%; height: 447px;}

.slider-inside { float: left; width: 100%; margin-bottom: 8px; height: auto;}
.slider-inside img { width: 100%; height: auto;}

.green { float: left; margin-right: 1%; width: 28%; background-color: #51ae19; padding: 2%; min-height: 420px; }
.green h1 { color: #ffffff; font-size: 32px; font-family: 'Open Sans'; font-weight: 300; text-transform: uppercase; padding: 0 0 15px 0; margin: 0px; }
.green p { font-size: 13px; color: #ffffff; line-height: 18px; padding: 0 0 20px 0;}
.green p span { font-weight: 700; color: #214d06; font-size: 14px; }
.green h2 { color: #9dfd62; text-transform: uppercase; font-size: 19px; font-weight: 700; padding: 0 0 20px 0; margin-top: -7px; }

.teal { float: left; margin-right: 1%; width: 28%; background-color: #19a5ae; padding: 2%; min-height: 420px;}
.teal h1 { color: #ffffff; font-size: 32px; font-family: 'Open Sans'; font-weight: 300; text-transform: uppercase; padding: 0 0 15px 0; margin: 0px;}
.teal p { font-size: 13px; color: #ffffff; line-height: 18px; padding: 0 0 20px 0;}
.teal p span { font-size: 15px; font-weight: 700; color: #08575c; }

.gray { float: left; width: 30%; background-color: #575757; padding: 2%; min-height: 420px;}
.gray h1 { color: #ffffff; font-size: 32px; font-family: 'Open Sans'; font-weight: 300; text-transform: uppercase; padding: 0 0 15px 0; margin: 0px; }
.gray p { font-size: 13px; color: #ffffff; line-height: 18px; padding: 0 0 20px 0;}
.gray p span { font-size: 15px; color: #b5b5b5; font-weight: 700; }

.button { background-color: #ffffff; color: #005596; font-family: 'Open Sans'; font-weight: 700; font-size: 15px; text-transform: uppercase; padding: 10px; float: right; margin: 0 0 5px 0; }

.content { float: left; width: 96%; background-color: #ffffff; padding: 2%; }
.content h1 { font-family: 'Open Sans'; font-weight: 300; color: #000000; padding: 0 0 30px 0; font-size: 38px; }
.content p { font-size: 14px; color: #000000; font-family: 'Open Sans'; font-weight: 400; padding: 0 0 20px 0; line-height: 20px; }
.content p span { font-size: 16px; font-family: 'Open Sans'; font-weight: 600; color: #51ae19; }
.content p.quad-button { height: 35px; }
.content p.double-button { height: 35px; }
.content h2 { font-size: 24px; font-family: 'Open Sans'; font-weight: 600; color: #51ae19; }
.content h3 { font-size: 18px; font-family: 'Open Sans'; font-weight: 600; color: #19a5ae; }
.content hr { border: 0px; border-top: #cccccc 1px solid; padding: 20px 0 0 0; height: 1px; }
.content hr.dashed { border: 0px; background: url('../images/dashed.gif') repeat-x; padding: 20px 0 0 0; height: 1px; }
.content a { color: #005494; }
.content a:hover { color: #000000; }
.content ul { padding: 0 0 0 30px; margin: 10px 0 20px 0;}
.content ul li { font-family: 'Open Sans'; font-size: 14px; font-weight: 400; color: #00000; }
.content .right-img { float: right; width: 40%; padding: 0 0 2% 2%; }
.content .left-img { float: left; width: 20%; padding: 0 2% 2% 0; }
.content .left-img-sm { float: left; width: 14%; padding: 0 2% 2% 0; }
.content .full { width: 100%; float: left; }
.content .contact-left { float: left; width: 64%; padding: 0 3% 0 0; }
.content .contact-right { float: left; width: 33%; }
.content .button { display: block; background-color: #005596; color: #ffffff; font-family: 'Open Sans'; font-weight: 700; font-size: 15px; text-transform: uppercase; padding: 10px; float: left; }

.lastars { float: left; width: 98%; padding: 1%; background-color: #ffffff; margin-top: 8px; }
.lastars img { width: 100%; }
.lastars h1 { font-family: 'Open Sans'; font-weight: 300; color: #000000; font-size: 32px;} 
.lastars h1 span { font-weight: 700; font-size: 18px; }
.lastars .star { float: left; width: 209px; margin: 1.5% .75% 0 0; }
.lastars .star img { width: 100%; }
.lastars .last { margin-right: 0px; }
.lastars .starbttn { background-color: #005596; font-family: 'Open Sans'; font-weight: 700; color: #ffffff; font-size: 15px; text-transform: uppercase; width: 110px; padding: 10px; text-align: center; position: absolute; margin-top: 150px;  }
.star-blue { position: absolute; z-index: 3000!important; width: 179px; height: 181px; padding: 15px; background-color: #005596; color: #ffffff; font-family: 'Open Sans'; font-weight: 400; font-size: 14px; margin: 0 0 0 0;}
.star-blue h1 { font-family: 'Open Sans'; font-weight: 700; color: #ffffff; font-size: 15px; padding: 0 0 15px 0; text-transform: uppercase; }
.star-blue a { color: #ffffff; }
.star-blue a:hover { color: #ffffff; }

.gallery { float: left; width: 31%; padding: 2% 2% 0 0; text-align: center;}
.gallery img { width: 100%; }

.video { float: left; width: 48%; padding: 2% 2% 0 0; text-align: center;}
.video-nav { float: right; }
.video-nav a { padding: 1px 6px 1px 6px; border: #a3c2d9 1px solid; margin: 0 0 0 4px; }


.star-nav { float: left;  width: 100%; margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: #cccccc 1px solid;}
.star-nav ul { display: block; margin: 0px; padding: 0px;}
.star-nav li { display: block; float: left; font-family: 'Open Sans'; font-weight: 400; font-size: 14px; padding: 0 2% 0 0; }
.star-nav li a { font-family: 'Open Sans'; font-weight: 400; font-size: 14px; text-transform: uppercase;}
.star-nav li.end { border-right: 0px; }

.lastars-left { float: left; width: 47%; margin: 0 6% 0 0; }
.lastars-right { float: left; width: 47%; }

footer { float: left; width: 100%; background-color: #a3c2d9; text-align: center; margin-top: 8px; }

.bottom-nav { float: left; width: 96%; padding: 2%; text-align: center; }
.bottom-nav a { color: #005596; font-weight: 600; text-transform: uppercase; font-size: 13px; font-family: 'Open Sans'; }

.copyright { float: left; width: 80%; margin: 0 10%; color: #ffffff; font-size: 12px; text-align: center; border-top: #8bb2cf 1px solid; padding: 2% 0;  }


@media only screen and (min-width: 1024px) and (max-width:1100px) {

.wrapper { width: 96%; padding: 0 2%; }
.slider { float: left; width: 100%; margin-bottom: 8px; height: 420px;}
.slider img { width: 100%; height: auto;}
}

@media only screen and (min-width: 961px) and (max-width:1023px) {

.wrapper { width: 96%; padding: 0 2%; }
.slider { float: left; width: 100%; margin-bottom: 8px; height:390px;}
.slider img { width: 100%; height: auto;}

.green {min-height: 460px; }
.teal { min-height: 460px; }
.gray { min-height: 460px; }

}

@media only screen and (min-width: 890px) and (max-width:960px) {

.wrapper { width: 96%; padding: 0 2%; }

.slider { float: left; width: 100%; margin-bottom: 8px; height: 375px;}
.slider img { width: 100%; height: auto;}
.address { float: left; width: 70%; font-size: 13px; color: #99bedb; height: 36px; margin: 4px 0; }
.logo img { width: 100%; padding: 10px 0 0 0; }
nav ul li .sub_menu { position:relative; left: -37%; z-index:99999; display:none; width: 320px!important; padding: 11px 0 0 0; }

.green {min-height: 500px; }
.teal { min-height: 500px; }
.gray { min-height: 500px; }


}

@media only screen and (min-width: 768px) and (max-width:889px) {

.wrapper { width: 96%; padding: 0 2%; }

.slider { float: left; width: 100%; margin-bottom: 8px; height: 345px;}
.slider img { width: 100%; height: auto;}
.address { float: left; width: 70%; font-size: 13px; color: #99bedb; height: 36px; margin: 4px 0; }

nav ul li a { font-size: 12px; text-transform: uppercase; color: #000000; font-family: 'Open Sans'; font-weight: 700; padding: 100px 0 0 0; min-width: 70px!important; }
.logo img { width: 100%; padding: 20px 0 0 0; }
nav ul li .sub_menu { position:relative; left: -45%; z-index:99999; display:none; width: 320px!important; padding: 11px 0 0 0; }
nav ul li .sub_menu .menu_list a { font-size: 12px; }

.green {min-height: 530px; }
.teal { min-height: 530px; }
.gray { min-height: 530px; }

.content .contact-left { float: left; width: 57%; padding: 0 3% 0 0; }
.content .contact-right { float: left; width: 40%; }
.content p.quad-button { height: 90px!important; }

}
@media only screen and (max-width:810px) {

.slider { float: left; width: 100%; margin-bottom: 8px; height: 320px;}
.slider img { width: 100%; height: auto;}
}

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

.wrapper { width: 96%; padding: 0 2%; }

.slider { float: left; width: 100%; margin-bottom: 8px; height: 280px;}
.slider img { width: 100%; height: auto;}

.address { float: left; width: 100%; font-size: 12px; color: #99bedb; height: 26px; margin: 9px 0; text-align: center; }
.top-nav { float: left; width: 100%; text-align: center; margin: 9px 0; height: 26px; }
.top-nav ul li a { font-family: 'Open Sans'; font-weight: semibold; font-size: 13px; text-transform: uppercase; color: #005496; }
.top-nav ul li a:hover { color: #000000; }
.logo { float: left; width: 96%; background-color: #ffffff; margin: 8px 0; height: 145px; text-align: center; vertical-align: middle; padding: 0 2%; }
.logo img { width: 282px; }

.top-nav ul li.facebook { background: url('../images/facebook-blue.png') no-repeat; width: 9px!important; height: 19px!important; }
.top-nav ul li.facebook a img { width: 100%; height: 100%; }
.top-nav ul li.facebook a:hover { display: block; background: url('../images/facebook-blue-roll.png') no-repeat; width: 9px; height: 19px; }

nav{ display:none; margin-top: 8px; width: 100%;  }
nav ul li{ display: block; background:#005596; position: relative;border-bottom: 1px dotted #fff; width: 100%; padding: 0px; margin: 0px; height: auto!important; }

nav ul li a{ background: none; width:100%;text-align:left; padding:7px 10px;  color: #ffffff; display: block; margin: 0px; }
nav ul li a:hover { background-color: #ffffff; color: #000000; }
nav ul li a.dance { background: none; width: 100%; }
nav ul li a:hover.dance { background: none; background-color: #ffffff; }
nav ul li a.music { background: none; width: 100%; }
nav ul li a:hover.music { background: none; background-color: #ffffff; }
nav ul li a.rules { background: none; width: 100%; }
nav ul li a:hover.rules { background: none; background-color: #ffffff; }
nav ul li a.about { background: none; width: 100%; }
nav ul li a:hover.about { background: none; background-color: #ffffff; }
nav ul li a.staff { background: none; width: 100%; }
nav ul li a:hover.staff { background: none; background-color: #ffffff; }




nav ul li:hover{ height:auto;}
nav ul li:hover .sub_menu{ display:none}

.toggleMenu{display:block; border-radius:4px; cursor:pointer; float:right; padding:20px 13px; position: relative; width:20px;z-index: 1000; clear:right; float:right; margin-top:0; background: url("../images/toggle_icon.png") no-repeat center center #005496;}
.toggle_icon{display: block;}
.toggleMenu{ position:absolute; float: left; left:5px; top:50px}
nav ul li .sub_menu .menu_list_arrow { background: none; height: 0px; }
nav ul li .sub_menu{ height:100px; position:static; top:0px; padding-top:0; height:auto; width:100% !important; border-top:2px solid #000000;}
nav ul li .sub_menu .menu_list{ margin:0; width:100%; height:auto; width:100% !important; border-bottom:0}
nav ul li .sub_menu .menu_list:first-child{ border-top:0}
nav ul li .sub_menu .menu_list a{ font-size:14px; line-height:16px; margin:0; padding:7px 0; width:100%; text-indent:30px}
nav ul li .sub_menu span img{ display:none;}

nav ul li .sub_menu .menu_list a br{ display:none}

.green { width: 96%; margin-right: 0%; }
.teal { width: 96%; margin-right: 0%; margin-top: 8px; }
.gray { width: 96%; margin-top: 8px;}
.content .right-img { display: block; width: 50%; padding: 0 0 2% 2%; }

.content .left-img { float: left; width: 32%; padding: 0 2% 2% 0; }
.content .left-img-sm { float: left; width: 24%; padding: 0 2% 2% 0; }

.content .contact-left { float: left; width: 100%; padding: 0 0 2% 0; }
.content .contact-right { float: left; width: 100%; }
.content p.quad-button { height: 90px!important; }

.gallery { float: left; width: 100%; padding: 2% 0 0 0; text-align: center;}

.video { float: left; width: 100%; padding: 2% 0 0 0; text-align: center;}

}

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


.slider { float: left; width: 100%; margin-bottom: 8px; height: 235px;}
.slider img { width: 100%; height: auto;}

.lastars-left { float: left; width: 100%; margin: 0 0 0 0; }
.lastars-right { float: left; width: 100%; border-top: #cccccc 1px solid; padding: 20px 0 0 0;}

}
@media only screen and (max-width:480px) {

.wrapper { width: 96%; padding: 0 2%; }

.slider { float: left; width: 100%; margin-bottom: 8px; height: 170px;}
.slider img { width: 100%; height: auto;}
.address { float: left; width: 100%; font-size: 12px; color: #99bedb; height: 36px; margin: 4px 0; text-align: center; }
.logo { float: left; width: 96%; background-color: #ffffff; margin: 8px 0; height: 145px; text-align: center; vertical-align: middle; padding: 0 2%; }
.logo img { width: 282px; }
nav { float: left; width: 100%; margin: 8px 0; }
.toggleMenu{ position:absolute; float: left; left:5px; top:50px}
.content p.double-button { height: 90px!important; }
.content p.quad-button { height: 180px!important; }
.content .right-img { display: block; width: 100%; padding: 0 0 2% 0; }
.content .left-img { float: left; width: 38%; padding: 0 2% 2% 0; }
.content .left-img-sm { float: left; width: 32%; padding: 0 2% 2% 0; }
.bottom-nav a { font-size: 11px; }

}
@media only screen and (max-width:380px) {

.wrapper { width: 96%; padding: 0 2%; }

.slider { float: left; width: 100%; margin-bottom: 8px; height: 140px;}


}