/* =================== 
  Base Element Styles
====================== */

* {
	box-sizing: border-box;
}

body {
	font-family: 'Monda', sans-serif;
	line-height: 1.6;
	color: #3a3a3a;
}

p {
	margin-bottom: 1.8em;
}

h1 {
  font-weight: 600;
}

h2,
h3,
a {
	color: #811717
}

h2,
h3,
h4 {
	margin-top: 0;
}

h4 {
	margin-bottom: .4em;
}

a {
	text-decoration: none;
}

img {
	max-width: 100%;
  box-shadow: 5px 5px 5px grey;
}

figure {
	margin: 0;
	line-height: 0;
	position: relative;
}

figcaption {
	font-size: .9em;
	line-height: 1.5;
	color: #fff;
	padding: 1em;	
	
	position: absolute;
	bottom: 0;
	width: 100%;
}

/* ================== 
  Base Layout Styles
===================== */

/* - Navigation - */

.name {
	font-size: 1.25em;
	margin: 0;
}

.main-nav {
	margin-top: 5px;
}

	.name a,
	.main-nav a {
		display: block;
		text-align: center;
		padding: 10px 15px;
	}
	
	.main-nav a {
		font-size: .95em;
		text-transform: uppercase;
	}

	.main-nav a:hover {
		color: #d0d0d0;
	}

  .activep {
    color: #d0d0d0; 
  }

/* Footer Styles */
.footernav {
	margin-top: 0.1%;
  margin-bottom: 0.5%;
}
.footernav a {
	display: block;
	text-align: center;
	padding: 10px 15px;
}
	
.footernav a {
	font-size: .90em;
  color: #3a3a3a;
	text-transform: uppercase;
}

.footernav a:hover {
	color: #811717;
}

span {
  font-size: .80em;
  font-weight: bold;
}

/*- Hovers -*/

.name a:hover {
  color: #d0d0d0;
}

p a:hover {
  color: #d0d0d0;
}

/* - Layouts - */

.secondary.col {
  float: left;
}

.primary.col {
  float:right;
  font-size: 1.1em;
}

.secondary.colabout {
  width: 100%;
}

.primary.colabout {
  width: 100%;
  font-size: 1.2em;
}

.main-header {
	padding-top: .5em;
	padding-bottom: .5em;
  z-index: 1;
}

.banner,
.main-footer {
	text-align: center;
}

.banner {
	color: #fff;
	background: url('../img/basketball.jpg') no-repeat center;
  background-color: #811717;
	padding: 3.2em 0;
	margin-bottom: 60px;
}

.col, .colabout {
	padding-right: 1em;
	padding-left: 1em;
  z-index: -1;
}

.wrapper {
    margin: 47px auto;
    max-width:580px;
}
 
/*- Contact Form Styling -*/

#contact_form {
    text-shadow:0 1px 0 #FFF;
    background-color: #f9f9f9;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    padding:25px;
 
}
 
#ff label {
    cursor:pointer;
    margin:4px 0;
    color:#811717;
    display:block; 
}
 
input, textarea {
    display:block;
    width:90%;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    background-color:#f4f4f4;
    color:#000;
    border:1px solid #5f5f5f;
    padding:10px;
    margin-bottom:25px;
    font-weight: 400;
}

.sendButton {
    cursor:pointer;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #811717), color-stop(1, #741414) );
    background-color:#811717;
    border-radius:10px;
    color:#ffffff;
    font-size:16px;
    width:25%;
    font-weight:200;
  border: none;
}
.sendButton:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d0d0d0), color-stop(1, #bbb) );
    background-color:#d0d0d0;
}

.messagesent, .messagefailed {
  max-width: 90%;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #49D652), color-stop(1, #41c049) );
  border-radius: 8px;
  border: 4px #f0f0fe;
  height: 60px;
  margin-bottom: 25px;
  margin-left: 3%;
  padding-top: 30px;
  padding-left: 20%;
  z-index: -1;
}

.messagefailed {
  background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #D64949), color-stop(1, #c04141) );
}

.main-footer {
	background: #d0d0d0;
	padding: 2em 0;
	margin-top: 30px;
  display: inline-block;
  width: 100%;
}

/*- Extra layouts -*/

.contactinfo {
  font-size: 0.8em;
  margin-bottom: 1em;
}

.contactinfo a {
  color: inherit;
}

.contactinfo a:hover {
  color: #7c7c7c;
}
  

.locationinfo {
  font-size: 0.8em;
  margin-top: 0px;
}

.boardlist li {
  margin-bottom: 2%;
  list-style-type: circle;
  margin-left: 4%;
}

.boardlist {
  margin-bottom: 5%;
  font-size: 1.05em;
}

.boardlist a:hover {
  color: #d0d0d0;
  font-weight: 700;
}

.list li {
  margin-bottom: 2%;
  list-style-type: circle;
  margin-left: 4%;
}

.list {
  margin-bottom: 5%;
  font-size: .90em;
}

.list a:hover {
  color: #d0d0d0;
  font-weight: 700;
}

.video {
    max-width: 100%;
}

.charityimg {
  border-radius: 5%;
  margin-bottom: 4%;
  z-index: -1;
}

.phone a {
  float: left;
  margin-left: 22%;
  margin-right: 3%;
  color: #3a3a3a;
}


.email a {
  float: right;
  margin-right: 22%;
  color: #3a3a3a;
}

.phone a:hover {
  color: #811717;
}

.email a:hover {
  color: #811717;
}

/* FAQ Accordion Menu */

button.accordion {
    margin-left: 17.5%;
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 65%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #d0d0d0;
}

div.panel {
    margin-left: 20%;
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    max-width: 60%;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
}
/* - Page Elements - */

.fix {
  padding-top: 1em;
}

.bannerphoto {
  z-index: -1;
  height: 50%;
  width: 50%;
}

.logo {
	width: 190px;
  box-shadow: none;
  z-index: 1;
}

.headline {
	margin-bottom: 0;
}

.icon-location {
	width: 35px;
	position: absolute;
	top: -15px;
	right: -15px;
}

/*- Table Styling -*/

table { 
  width: 100%; 
  border-collapse: collapse;
}

tr:nth-of-type(odd) { 
  background: #e5e5e5; 
}
th { 
  background: #811717; 
  color: white; 
  font-weight: bold; 
}
td, th { 
  padding: 6px; 
  border: 1px solid #ccc; 
  text-align: left; 
}

tr:hover {
  background-color: #d0d0d0;
}
/* ============== 
  Media Queries
================= */

@media (min-width: 769px) {

	body {
		padding-top: 68px;
	}

	.main-header {
		position: fixed;
		background: #fff;
		box-shadow: 0 1px 4px rgba(0,0,0,.4);
		width: 100%;
		top: 0;
	}

	.container {
		width: 90%;
		margin: 0 auto;
	}

	.name,
	.col {
		float: left;
	}

	.primary,
	.secondary {
		width: 50%;
	}

	.main-nav {
		float: right;
	}

	.main-nav li {
		display: inline-block;
		margin-left: 15px;
	}

	.footernav li {
		display: inline-block;
		margin-left: 15px;
	}

	.tagline {
		font-size: 1.4em;
	}

	/* - clearfix - */

	.clearfix::after {
		content: " ";
		display: table;
		clear: both;
	}

}

@media (min-width: 1024px) {
	
	.container {
		width: 80%;
		max-width: 1150px;
	}

	.primary {
		width: 50%;
	}

	.secondary,
	.tertiary {
		width: 45%;
    font-size: 1.2em;
	}

}

@media (max-width: 1024px) {

.main-nav {
  font-size: 0.8em;
  line-height: 1em;
}

.footernav {
  font-size: 0.8em;
  line-height: 1em;
}
.googlemap {
  max-width: 100%;
}

.primary.colabout {
  font-size: 1em;
}

.messagesent, .messagefailed {
  font-size: 16px;
  height: 35px;
  padding: 7% 0 0 0;
}

.boardlist, .boardlist li, p, h3 {
  max-width: 90%;
  margin-left: 5%;
}

.list, .list li, p, h3 {
  max-width: 90%;
  margin-left: 5%;
}
@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {



div.panel {
  max-width: 90%;
  margin-left: 5%;
}

button.accordion {
  width: 92%;
  margin-left: 4%;
}

.messagesent, .messagefailed {
  padding: 65px 15px 0 2px;
}

	table, thead, tbody, th, td, tr { 
		display: block; 
	}
	
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		position: absolute;
    top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}

	td:nth-of-type(1):before { content: "Home Team"; }
	td:nth-of-type(2):before { content: "Away Team"; }
	td:nth-of-type(3):before { content: "Tipoff Time"; }
	td:nth-of-type(4):before { content: "Date"; }
}

@media (max-width: 736px) {

.phone a {
  margin-left: 38%;
  margin-right: 35%;
}

}

@media (min-device-width: 768px) and (max-device-width: 1024px)  {


.phone a {
  margin-left: 44%;
  margin-right: 40%;
}

.copy {
  margin-left: 6%;
}

.email a {
  margin-right: 35%;
}



}

@media (min-device-width: 1024px) and (max-device-width: 1366px)  {

.copy {
  margin-left: 15%;
  margin-right: 17%;
}

.email a {
  margin-right: 42%;
}
}