/*	•••	html Template css	•••	*/
/*----------------------------------CSS reset--*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, 
sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, 
tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary, time, mark, audio, video
{ margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align: baseline;}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
body{line-height:1;}
ol, ul{list-style: none;}
blockquote, q{quotes: none;}
blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;}
table{border-collapse:collapse;border-spacing:0;}

/*---------------------------------------------------------*/
@font-face {
    font-family:CooperHewitt-Thin;
    src:url(fonts/CooperHewitt-Thin.otf);
}
@font-face {
    font-family:CooperHewitt-Book;
    src:url(fonts/CooperHewitt-Book.otf);
}
@font-face {
    font-family:CooperHewitt-Heavy;
    src:url(fonts/CooperHewitt-Heavy.otf);
}

html{font-size:62.5%;} 
body{
    height: 100%;
	color:#91bed4;
    background:url(images/juggleHubBg.jpg) top right no-repeat;
    background-size: 100% 100%;
    background-attachment:fixed;
	font-family:'CooperHewitt-Book', Helvetica, sans-serif;
	font-size:14px; font-size:1.4rem;/* =14px */
}

h1, h2, h3, h4{color:#91bed4;}
h1{font-size:68px; font-size:6.854rem; }
h2{font-size:42px; font-size:4.236rem; }
h3{font-size:26px; font-size:2.618rem; }
h4{font-size:16px; font-size:1.618rem; }


#wrapper{
	width:100%;
	margin:0 auto;
}
#flip{
    position: absolute;
    top: 75%;
    left: 47%;
    padding: 5px;
    color: #eee;
    background-color:#91bed4;
    border-radius: 5px;
}
#flip:hover{
    background: #eee;
    color: #91bed4;
    border: 1px solid #91bed4;
}

#content{
	z-index:1;
	width:100%;
	
	top:5%;
}

.headerMenu{
    background: rgba(255,255,255,0.8);
    margin:0 auto;
    padding:auto;
    width:100%;
    height: 92.8%;
}

#logo{
    background: none;
    text-align: center;   
}
#logo h1{
    text-shadow:1px 1px 0 rgba(0,0,0,0.7);
    letter-spacing:-3pt;
}

.searchBox{
}
#search{
    width: 100%;
}

#search input[type="text"]{
    background:url(images/clubsIcon_orange.png) no-repeat 8px 2px #eee;
    border-radius: 5px;
    width:100%;
    color:#91bed4;
    outline:none;
    border:0 none;
    font:12px Arial,Helvetica,Sans-serif;
    padding:6px 15px 6px 35px;
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-transition:all 0.5s ease 0s;
    -moz-transition:all 0.5s ease 0s;
    -o-transition:all 0.5s ease 0s;
    -transition:all 0.5s ease 0s;
}

#search input[type="text"]:hover{background:url(images/clubsIcon_orange.png) no-repeat 8px 2px #91bed4;width: 100%; color:#eee;}

#search input[type="text"]:visited{
    color:#F2A368;
    font-weight: 800;
    -webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(, 0, 0, 0.8) inset;
    -box-shadow:0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}
#search input[type="text"]:active, :focus{ background:url(images/clubsIcon_orange.png) no-repeat 8px 2px #91bed4;}

input[type="text"]:active, :focus{background:none;}

#menu{
    position:absolute;
    top:0px;
    right:0px;
    height: 37px;
    padding-top: 19px;
    margin-right: 6%;
}

#menu a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:10px;
    padding-right:10px;
}

#menu a:hover{
    background:#eff5f9;
    color:#91bed4;
}

#login{
    background: none;
    border-radius: 5px;
    margin: 35px 5px 5px 15px;
    padding: 0;
}
#login input[type="password"]{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}
#login input[type="email"]{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}
#login input[type="submit"]{
    background: #91bed4;
    color: #eee;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}
#login input[type="submit"]:hover{color: #91bed4;background: #eee;border:1px solid #91bed4;}
#aniLoad{
    margin: 0 auto;
    padding-top: 5%;
}

/* •• NAV •• */
#navContainer{
    width: 100%;
    max-height: 50px;
    margin:0 auto;
    margin-bottom: 10px;
    padding-top: 15px;
    text-align: center;
}
#navList{
    height: auto;
    max-height: 50px;
}
#navList li{
    display: inline-block;
    position: relative;
    padding: 4px;
    padding-left: 20px;
}

#navList a{
    padding-left: 20px;
    padding-bottom: 14px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
}

#navList a:link, #navList a:visited{
    color: #EFAA46;
    background: url(images/ballIcon2.png) no-repeat 0 0;

}

#navList a:hover{
    color: #91bed4;
    padding-left: 20px;
    background: url(images/ballIconBlue.png) no-repeat 0 5px ;
    
    /* Rotate div --doesn't work!!!*/
    -ms-transform: rotate(7deg); /* IE 9 */
    -webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
    transform: rotate(7deg);
} 

#sticky {
    background: rgba(255,255,255,0.9);
    border-bottom: 2px solid #EFAA46;
    border-top: 2px solid #91bed4;
}

#sticky.stick {
    width: 100%;
    display: inline-block;
    position: fixed;
    margin: 0 auto;
    top: 0;
    z-index: 100;
}

/* •• WELCOME •• */
.intro{
    font-family: 'CooperHewitt-Thin', sans-serif;
    font-weight: 100;
    line-height: 1.2;
    padding-top: 5%;
}

/* •• REG •• */
#regTable {
   
}
#regTable input[type="text"]{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}
#regTable input[type="text"]:hover{border: 1px solid #F2A368;}

#regTable input[type="email"]{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}

#regTable input[type="password"]{
    background: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}

#regTable input[type="submit"]{
    background: #91bed4;
    border: none;
    border-radius: 5px;
    color:#eee;
    font-size: 15px;
    padding: 5px 15px;
    width: 100%; 
    max-width: 200px; 
    min-width: 150px;
    margin-bottom: 3px;
    margin-top: 3px;
    outline: none;
}
#regTable input[type="submit"]:hover{background:#eee;color:#91bed4;border:1px solid #91bed4;}

hr {
	text-align: center;
    font-family: sans-serif;
    border: none;
}
hr:after {
	content: url(images/ballIconBlue)" " url(images/ballIcon2)"    " url(images/ballIconBlue);
	display: inline-block;
	padding: 0 10px;

	background: none;
	color: #EFAA46;
	font-size: 4rem;
}

/* •• Heading Tabs •• *//* -- responsivesness is poor
.tabs{
    width: auto;
    max-width: 300px;
    margin-top: -15.8%;
    text-align: center;
    padding: 10px 15px;
    background:rgba(255,255,255,0.95);
    border-radius: 15px 15px 0 0;
    border-top: 2px solid #91bed4;
    border-left: 2px solid #91bed4;
    border-right: 2px solid #91bed4;
}
*/

#footer{
    width: 100%;
    padding: 1% 0;
    text-align: center;
    background: rgba(255,255,255,0.9);
}
/* •• GRID OF THREE for Menu bar •• */
.span_3_of_3 { width: 100%; }
.span_2_of_3 { width: 66.13%; }
.span_1_of_3 { width: 28%; }


/*  SECTIONS  */
.section{
	width:97.6%;
    height: auto;
	margin:0 auto;
    padding-top: 5%;
	clear:both;
    
    visibility: hidden;/*hides sections for animation*/
}

/*  COLUMN SETUP  */
.col{
	display:block;
	float:left;
	min-height:250px;
	margin:5% 0 1% 1.6%;
	padding:2%;
	background:rgba(255,255,255,0.95);
    border-bottom: 2px solid #F2A368;
    border-top: 2px solid #91bed4;
    border-radius: 5px;
}
.col:first-child{margin-left:0;}

/* •• dropAlevel •• remove margin left, lower .col sits flush with .col sitting above */
.dropAlevel{
    margin-left: 0;
}
.span_1_of_3{border: none;}/*remove border for .col in menu*/

/*  GROUPING  */
.group:before, .group:after{content:"";display:table;}
.group:after{clear:both;}
.group{zoom:1;}/* For IE 6/7 */

/*  GRID OF FOUR  */
.span_4_of_4{width:96%;}
.span_3_of_4{width:70.6%;}
.span_2_of_4{width:45.2%;}
.span_1_of_4{width:19.8%;}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width:480px){
    body{background-size: 100% 100%;}
    .section{margin-top: 15%;}
	.col {margin:1% 0 1% 0%;}
	.span_1_of_4, .span_2_of_4, .span_3_of_4,.span_4_of_4{width: 96%;}
    .span_3_of_3, .span_2_of_3, .span_1_of_3{width: 96%; margin: 0 auto;}
    #headerWrapper{width: 100%;}
    .sea
    #regTable{width: 99%;}
}

/* •• ANIMATION •• */
.slideLeftAni{
	animation-name: slideLeft;
	-webkit-animation-name: slideLeft;	

	animation-duration: 2s;	
	-webkit-animation-duration: 2s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideLeft{
	0% {transform: translateX(150%);}
	50%{transform: translateX(-8%);}
	65%{transform: translateX(4%);}
	80%{transform: translateX(-4%);}
	95%{transform: translateX(2%);}			
	100% {transform: translateX(0%);}
}

@-webkit-keyframes slideLeft{
	0% {-webkit-transform: translateX(150%);}
	50%{-webkit-transform: translateX(-8%);}
	65%{-webkit-transform: translateX(4%);}
	80%{-webkit-transform: translateX(-4%);}
	95%{-webkit-transform: translateX(2%);}			
	100% {-webkit-transform: translateX(0%);}
}

.slideRightAni{
	animation-name: slideRight;
	-webkit-animation-name: slideRight;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease-in-out;	
	-webkit-animation-timing-function: ease-in-out;		

	visibility: visible !important;	
}

@keyframes slideRight {
	0% {transform: translateX(-150%);}
	50%{transform: translateX(8%);}
	65%{transform: translateX(-4%);}
	80%{transform: translateX(4%);}
	95%{transform: translateX(-2%);}			
	100% {transform: translateX(0%);}	
}
@-webkit-keyframes slideRight {
	0% {-webkit-transform: translateX(-150%);}
	50%{-webkit-transform: translateX(8%);}
	65%{-webkit-transform: translateX(-4%);}
	80%{-webkit-transform: translateX(4%);}
	95%{-webkit-transform: translateX(-2%);}			
	100% {-webkit-transform: translateX(0%);}
}

.swingAni{
	animation-name: swing;
	-webkit-animation-name: swing;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;			
}

@keyframes swing{
	0% {transform: scale(0.3) rotate(6deg) translateX(-30%)  translateY(30%); 
        opacity: 0.2;}
	30% {transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;}
	45% {transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;}
	60% {transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;}	
	75% {transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;}
	90% {transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;}	
	100% {transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;}		
}
@-webkit-keyframes swing{
	0% {-webkit-transform: scale(0.3) rotate(6deg) translateX(-30%)  translateY(30%); 
        opacity: 0.2;}
	30% {-webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);		
		opacity: 1;}
	45% {-webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;}
	60% {-webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);		
		opacity: 1;}	
	75% {-webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
		opacity: 1;}
	90% {-webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);		
		opacity: 1;}	
	100% {-webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
		opacity: 1;}		
}

.slideUpAni{
	animation-name: slideUp;
	-webkit-animation-name: slideUp;	

	animation-duration: 1.6s;	
	-webkit-animation-duration: 1.6s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease -out;

	visibility: visible !important;	
}

@keyframes slideUp {
	0% {transform: translateY(100%) scaleX(0.5);}
	30%{transform: translateY(-8%) scaleX(0.5);}	
	40%{transform: translateY(2%) scaleX(0.5);}
	50%{transform: translateY(0%) scaleX(1.1);}
	60%{transform: translateY(0%) scaleX(0.9);}
	70% {transform: translateY(0%) scaleX(1.05);}			
	80%{transform: translateY(0%) scaleX(0.95);}
	90% {transform: translateY(0%) scaleX(1.02);}	
	100%{transform: translateY(0%) scaleX(1);}
}

@-webkit-keyframes slideUp {
	0% {-webkit-transform: translateY(100%) scaleX(0.5);}
	30%{-webkit-transform: translateY(-8%) scaleX(0.5);}	
	40%{-webkit-transform: translateY(2%) scaleX(0.5);}
	50%{-webkit-transform: translateY(0%) scaleX(1.1);}
	60%{-webkit-transform: translateY(0%) scaleX(0.9);}
	70%{-webkit-transform: translateY(0%) scaleX(1.05);}	
	80%{-webkit-transform: translateY(0%) scaleX(0.95);}
	90% {-webkit-transform: translateY(0%) scaleX(1.02);}	
	100%{-webkit-transform: translateY(0%) scaleX(1);}
}