@charset "utf-8";
/* CSS Document */
#sp-top-bar {    padding: 8px 0;    font-size: 1rem!important;}

.sp-megamenu-parent {list-style: none; padding: 0; margin: 0-10px; z-index:99;display: block; float:right; position: relative; text-transform: uppercase; }	
.sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { display: inline-block; padding: 0 7px; line-height: 50px; margin: 0;}

#sp-header {height: 60px;left: 0;position:relative;top:0;width: 100%;z-index: 99;box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0.10)!important;}

#sp-logo.col-9 .col-lg-3 {margin-top: 25px!important;}
.logo-image {margin-top: 68px!important;}
.logo-image-phone { height: 100px!important; margin-top: 45px!important;}

#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title { margin: 10px 0px 10px 0px; /*padding-bottom: 0px;*/ font-size: 20px; font-weight: 700; border-bottom: 1px solid #f3f3f3; background-color:#000000; color:#FFFFFF!important; padding: 10px 0px 10px 10px; }

#sp-left .sp-module, #sp-right .sp-module { margin-top: 10px; border: 1px solid #f3f3f3; padding:5px 5px; border-radius: 3px;}

#sp-main-body {  padding: 0px 0px 0px 0px!important; }

h1, h2, h3 { color:#003278!important;}

#sp-front-page-news.col-lg-12 {background-color:#003278; /*margin-bottom:-30px;*/}

#sp-left .sp-module ul > li > a, #sp-right .sp-module ul > li > a {display: block;padding:5px 0;  line-height:18px; padding: 2px 0;}

#sp-left ul li:before { font-family: 'FontAwesome';  content: '\f0da';  margin:0 5px 0 -15px;  color: #f00;}

#sp-bottom .sp-module .sp-module-title {  font-weight: 700;  font-size: 18px; margin: 0 0 10px!important; color:#FFF!important;}
#sp-bottom .sp-module ul > li {    display: block;  margin-bottom: 5px!important;}

@media (min-width: 320px) and (max-width: 480px) { 
#sp-top1.col-lg-3, #sp-top2.col-lg-9, .logo-image {display:none!important;}}

@media screen and (max-width: 787px) {
#sp-top1.col-lg-3, #sp-top2.col-lg-9, .logo-image {display:none!important;}}

@media (min-width: 768px) and (max-width: 979px) {
#sp-top1.col-lg-3, #sp-top2.col-lg-9, .logo-image {display:none!important;}}

.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:visited,
.btn-primary:focus {
    background-color: #003278;
    border-color: #003278;
	color:#FFF;
	font-weight:bold;
}

Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.

@media only screen and (max-width: 768px), (min-device-width: 360px) and (max-device-width: 768px)*/

@media only screen and (min-width: 300px) and (max-width: 721px) { 

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 		display: block; 	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 		position: absolute;		top: -9999px;		left: -9999px;	}
	
	tr { border: 1px solid #ccc; }
	
	td { /* Behave  like a "row" */		border: none;		border-bottom: 1px solid #eee; 		position: relative;		padding-left: 50%; 	}
	
	td:before { /* Now like a table header */position: absolute;/* Top/left values mimic padding */top: 6px;left: 6px;width: 45%; 	padding-right: 10px; 
		white-space: nowrap;	}
	
	/*	Label the data	*/
	td:nth-of-type(1):before { content: "Team"; }
	td:nth-of-type(2):before { content: "Tranaactions|Action"; }
	td:nth-of-type(3):before { content: "No#"; }
	td:nth-of-type(4):before { content: "Last Name"; }
	td:nth-of-type(5):before { content: "First Name"; }
	td:nth-of-type(6):before { content: "Position"; }
	td:nth-of-type(7):before { content: "Height"; }
	td:nth-of-type(8):before { content: "Weight"; }
	td:nth-of-type(9):before { content: "College"; }
}