html {
background-color:#21242d;
margin:0px;
padding:0px;
overflow-x:hidden;
}
body {
margin:0px;
font-size:18px;
font-family: 'Roboto', 'Source Sans Pro', arial, sans-serif;
color:#ffffff;
//overflow-x:hidden;
}
.container {
width:100%;
text-align:left;
box-sizing: border-box;
position:relative;
display:inline-block;
max-width:1400px;
padding-left:10px;
padding-right:10px;
}
input, button {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}
#main {
background-color:#21242d;
min-height:600px;
}
h1 {
margin-top:0px;
font-weight:normal;
}
.error {
color:red;
font-style:italic;
font-size:16px;
}
#landing {
width:100%;
max-width:800px;
box-sizing:border-box;
}
.section {
padding:10px;
padding-top:60px;
padding-bottom:60px;
}
.sechead {
margin-bottom:20px;
font-size:50px;
font-weight:900;
font-family:'Roboto Condensed';
}
.subtitle {
font-size:30px;
font-weight:300;
}
.fade {
opacity:0;
}
.link {
color:#ff8400;
text-decoration:none;
}
.link:hover {
color:#f8723f;
}
.small {
font-size:14px;
}
@media screen and (max-width:500px) {
.sechead {font-size:40px !important;}
.subtitle {font-size:24px !important;}
}
@media screen and (max-width:850px) {
.sechead {text-align:center !important;}
}
/************************************ HEADER ************************************/
@media screen and (max-width:500px) {
#logo img {width:220px !important;}
}
@media screen and (max-width:850px) {
#desknav {display:none !important;}
#header {background-color:#303334 !important;}
}
@media screen and (min-width:851px) {
#mobicon, #mobnav {display:none !important;}
}
#header {
background-color:#303334;
position:fixed;
top:0px;
left:0px;
width:100%;
padding-top:20px;
padding-bottom:20px;
z-index:10;
box-sizing:border-box;
}
#logo {
display:inline-block;
}
#logo img {
max-width:100%;
width:250px;
height:auto;
box-sizing:border-boxl
}
#desknav {
display:inline-block;
float:right;
position:relative;
top:10px;
}
.navlink {
display:inline-block;
margin-left:22px;
font-variant:small-caps;
text-decoration:none;
color:#f5f5f5;
font-size:22px;
letter-spacing:1px;
cursor:pointer;
font-weight:bold;
transition:color 500ms linear;
-webkit-transition:color 200ms linear;
}
.navlink:hover {color:#ff8400;}
#mobicon {
display:inline-block;
float:right;
position:relative;
top:12px;
cursor:pointer;
}
#mobicon img {
width:30px;
height:auto;
}
#mobnav {
position:fixed;
right:0px;
top:77px;
background-color:#303334;
padding-right:10px;
padding-left:10px;
padding-bottom:8px;
width:100%;
z-index:9;
display:none;
}
.navlinkM {
display:block;
text-align:right;
padding-top:6px;
padding-bottom:6px;
font-variant:small-caps;
text-decoration:none;
color:#ffffff;
font-size:22px;
letter-spacing:1px;
cursor:pointer;
}
#spacer {
width:100%;
height:100px;
background-color:#21242d;
}
/************************************ HOME PAGE **********************************/
@media screen and (max-width:550px) {
#homebanner {height:500px !important;}
}
@media screen and (min-width:551px) and (max-width:850px) {
#homebanner {height:650px !important;}
}
@media screen and (max-width:850px) {
.sblock {width:300px !important; display:block !important; margin-left:auto !important; margin-right:auto !important; margin-bottom:50px !important;}
}
#homebanner {
width:100%;
height:750px;
background-image:url(images/bballback.jpg);
background-size:cover;
background-repeat:no-repeat;
background-position:top left;
text-align:center;
padding:10px;
}
#bannerlogo {
max-width:100%;
height:auto;
}
#bannercta {
display:inline-block;
padding:20px;
color:#ffffff;
text-decoration:none;
border:3px solid #ffffff;
margin-top:30px;
font-size:24px;
font-weight:bold;
letter-spacing:2px;
border-radius:5px;
cursor:pointer;
transition:background-color 500ms linear;
-webkit-transition:background-color 200ms linear;
}
#bannercta:hover {
background-color:rgba(255,255,255,.2);
}
#services {
background-color:#21242d;
}
.sblock {
display:inline-block;
width:20%;
max-width:100%;
box-sizing:border-box;
vertical-align:top;
margin-left:25px;
margin-right:25px;
margin-bottom:30px;
text-decoration:none;
color:inherit;
}
.sblock img {
display:block;
width:100%;
height:auto;
margin-bottom:10px;
border:2px solid #ffffff;
box-sizing:border-box;
filter:brightness(90%);
-webkit-filter:brightness(90%);
transition:filter 200ms linear;
-webkit-transition:-webkit-filter 200ms linear;
}
.sblock img:hover {
filter:brightness(120%);
-webkit-filter:brightness(120%);
}
.shead {
font-size:30px;
font-family:'Roboto Condensed';
font-weight:900;
}
.holder {
margin-top:60px;
opacity:0;
}
/************************************ ABOUT PAGE **********************************/
@media screen and (max-width:850px) {
.aboutimg {width:100% !important;margin:0px !important;margin-bottom:20px !important;}
#aboutpic {float:none !important;margin-left:0px !important; margin-bottom:20px !important; display:block !important; width:100% !important;}
}
#aboutpic {
float:right;
margin-left:20px;
margin-bottom:10px;
display:inline-block;
width:45%;
height:auto;
}
#photos {
background-color:#eaeaea;
}
#photos .container {
text-align:center;
}
.aboutimg {
width:28%;
height:auto;
display:inline-block;
vertical-align:top;
margin:20px;
box-sizing:border-box;
opacity:0;
}
.text {
line-height:1.5em;
}
/********************************** CONTACT PAGE ************************************/
@media screen and (max-width:850px) {
#contactform {margin-left:auto; margin-right:auto;}
}
#contactform {
width:500px;
display:block;
}
#contactform .textfield {
background-color:#eeeeee;
max-width:100%;
}
#contactform label {
font-weight:300;
}
#contactform .cta {
max-width:100%;
}
/************************************ EVENTS ************************************/
@media screen and (max-width:500px) {
.eventblock {margin-left:0px !important; margin-right:0px !important;}
}
@media screen and (max-width:850px) {
.eventblock {max-width:300px !important; margin:20px !important;}
#events {text-align:center !important;}
}
#events {
width:100%;
text-align:left;
margin-bottom:40px;
}
.eventblock {
display:inline-block;
margin:30px;
cursor:pointer;
width:100%;
max-width:350px;
box-sizing:border-box;
font-size:14px;
text-align:center;
vertical-align:top;
}
.eventblock img {
width:auto;
height:auto;
max-width:100%;
max-height:545px;
}
/************************************ SCHEDULE ************************************/
@media screen and (max-width:400px) {
.extra {display:none !important;}
.cal_day {display:none !important;}
.cal_col {width:100% !important;}
}
@media screen and (min-width:401px) and (max-width:550px) {
.extra {display:none !important;}
.cal_day {display:none !important;}
.cal_col {width:50% !important;}
}
@media screen and (min-width:551px) and (max-width:850px) {
.extra {display:none !important;}
.cal_day {display:none !important;}
.cal_col {width:33.3% !important;}
}
@media screen and (min-width:851px) and (max-width:1200px) {
#schedule_holder {width:1200px; overflow-x:auto !important;}
}
#schedule {
width:100%;
box-sizing:border-box;
}
.cal_head {
width:100%;
padding:10px;
padding-top:15px;
padding-bottom:15px;
text-align:center;
background-color:#e9600d;
box-sizing:border-box;
}
.cal_head select {
padding:8px;
font-size:20px;
border:1px solid #eeeeee;
margin-left:18px;
margin-right:20px;
position:relative;
top:1px;
}
.calnav {
vertical-align:middle;
display:inline-block;
cursor:pointer;
}
.cal_col {
display:inline-block;
width:14.28%;
vertical-align:top;
position:relative;
border-right:1px solid #666666;
border-left:1px solid #666666;
font-size:16px;
box-sizing:border-box;
}
.cal_day {
padding:5px;
text-align:center;
background-color:#214eb6;
}
.cal_date {
height:200px;
border-bottom:1px solid #666666;
padding:3px;
}
.cal_date .date {
display:inline-block;
position:absolute;
left:5px;
}
.cal_time {
position:relative;
display:block;
width:100%;
height:60px;
border-bottom:1px solid #666666;
padding:3px;
box-sizing:border-box;
}
.monthblock {
display:none;
}
.mactive {
display:block;
}
/************************************ FORMS ************************************/
.cform {
display:inline-block;
max-width:100%;
box-sizing:border-box;
}
.cform label {
display:block;
margin-bottom:5px;
}
.cform .textfield {
padding:10px;
border:1px solid #cccccc;
border-radius:6px;
background-color:#ffffff;
width:100%;
max-width:350px;
box-sizing:border-box;
}
.cta {
border:0px;
padding:10px;
padding-left:20px;
padding-right:20px;
background-color:#ff8400;
color:#ffffff;
margin-top:10px;
margin-bottom:5px;
letter-spacing:1px;
border-radius:6px;
display:inline-block;
width:100%;
max-width:350px;
box-sizing:border-box;
font-size:17px;
}
.cta:hover {
background-color:#f8723f;
}
#mailform {
//max-width:550px;
color:#ffffff;
}
#mailform label {
font-size:24px;
margin-bottom:15px;
}
#mailform .textfield {
font-size:18px;
}
.ferror {
border:2px solid red !important;
background-color:#f499a0 !important;
}
textarea {font-family:inherit;}
/************************************ FOOTER ************************************/
@media screen and (max-width:650px) {
.footblock {margin-right:0px !important; width:100% !important;}
}
@media screen and (min-width:651px) and (max-width:900px) {
.footblock {margin-right:50px !important;}
}
#footer {
background-color:#292929;
color:#f0f0f0;
padding-bottom:15px !important;
}
.footblock {
display:inline-block;
margin-right:200px;
margin-bottom:40px;
font-size:16px;
line-height:1.5em;
font-weight:300;
vertical-align:top;
}
.foothead {
display:block;
margin-bottom:10px;
letter-spacing:2px;
font-size:25px;
font-family:'Roboto Condensed';
font-weight:400;
}
.footblock a {
text-decoration:none;
color:inherit;
}
.footbottom {
width:100%;
text-align:center;
font-size:16px;
font-weight:300;
margin-top:20px;
}
.soclink {
display:inline-block;
margin-right:15px;
font-size:14px;
}
.soclink img {
height:25px;
width:auto;
}
#mailing {
background-image:url(images/courtback.png);
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}
#sponsors {
color:#21242d;
background-color:#f9f9f9;
}