/*============================================================
	For Small Desktop
==============================================================*/

@media (min-width: 980px) and (max-width: 1150px) {

h1, h2, h3, h4, h5, h6 {font-family: knockout, Arial Black, Impact, arial, sans-serif;}
h1 {font-size: 5em !important; line-height:1em;}
h2{font-size: 4em; text-transform:uppercase; line-height:1em;}
h3 {font-size: 2.5em; line-height:1em;}
h4 {font-site: 2.25em; line-height:1em;}
h5 {font-size: 1.15em; line-height:1.2em;}
h6 {font-size: 1em; line-height:1em;}
p {font-size:1em; line-height:1em; font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}

#hero {padding: 9em 0 3em 0;}
#hero h1 {font-size: 2.7em !important; line-height: .75em !important;}
#hero .left h3 {font-size:1em; line-height:1.1em; }
#hero .left h5 {font-size: 1.1em; }
#hero .btn-sp-custom {margin:1em auto;}
.btn {font-size: 1.75em;}
.navbar-nav li a {color:#ffffff;	font-size: 1em;}
ul.sp-list li {font-size: .8em; margin-top: 0; margin-bottom:2px;}

}


/*============================================================
	Tablet (Portrait) Design for a width of 768px
==============================================================*/

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

.btn {font-size: 1.15em;}
.breaker {clear:both; display:block; line-height:.005em;}


.navbar-nav > li > a {padding-left:5px;}
body > section {padding: 60px 0;}
#hero .container {margin-top: 5%; width: 90%;}
#hero {height: auto; padding:5em 0;}
#unlimited-access #mobile-comparison-key {margin-top: -15em;}
#slider1B img.img-responsive {max-height: 30em; margin:auto;}


#hero1B img.img-responsive {margin:auto; max-height:20em;}

.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
    display: block;
    max-width: 90%;
    height: auto;
    margin: -3em auto;
}


/*section#exclusive-content, section#unlimited-access, section#gametracker, section#benefits {min-height:80em;}*/
#hero h1 {text-align:center; margin-top:0; font-size:6em !important; }
#hero .left h3 {text-align:center; font-size:1.5em; width: 80%; margin:1em auto;}
#hero h5 {font-size:1.25em !important; line-height:.8em; text-align:center; }
.text-placement h2 {font-size:5em; text-align:center;}
.text-placement h5 {font-size:1.8em; text-align:center;}
.text-placement ul {width: 70%; margin:auto;}

.btn-sp-custom {margin: 1em auto; font-size:2em; width:8em !important; display:block;}

#hero, #exclusive-content, #unlimited-access, #gametracker, #benefits {height: auto;}

#benefits {padding-top: 0em; background-image:url(../img/VIP-mobile.jpg); background-position:bottom; background-attachment:scroll;}

#gametracker {background-color:#0e1a2a; background-image:url(../img/tracker-mobile2.jpg); background-size:cover; background-repeat:no-repeat;  background-attachment:scroll; background-color:#0e1a2a; height: 50em;}
#gametracker .text-placement {margin-top: 0%;}
.navbar-nav li a {
	font-size: .8em;
    margin-left: 0.05em !important;
	color:#ffffff !important;	
}

h1 {font-size: 5em !important; line-height:1em;}
h2{font-size: 2.25em; text-transform:uppercase; line-height:1em;}
h3 {font-size: 1.75em; line-height:1em;}
h4 {font-site: 1.35em; line-height:1em;}
h5 {font-size: 1.15em; line-height:1.2em;}
h6 {font-size: 1em; line-height:1em;}
p {font-size:1em; line-height:1em; font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;}


.navbar-nav {margin-top:0 !important; float:left;}
.navbar-brand {margin-top:3em !important; height:0;}
.main-logo {display:none;}

h1#logo img {
    max-height: 26px;
    margin-top: -1.85em;
}
.btn.btn-free-trial {border-color:#ed2024;}
.btn.btn-free-trial {background-color:transparent;}
.btn.btn-free-trial {color:#ed2024;}
.navbar-nav li a.current {color: #ed2024;}
.navbar-nav li a:focus {color: #ed2024;}
.navbar-nav li a:hover {color:#ed2024;}
.navbar-nav {margin-top:0em;}

.btn.btn-free-trial {font-size: 1em;}



.btn.btn-free-trial {padding: .25em .5em; margin-top:.5em !important;}
#hero .text-placement {text-align:center;}

td.sp-benefit {padding: 30px 40px;}



}



/*============================================================
	Tablet Landscape
==============================================================*/
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
	  
	#exclusive-content .container {width: 90%;}  
	#exclusive-content .image-placement {float:right; margin-top: 10%;}
	#hero h1 {font-size: 2.75em !important;}
	#unlimited-access h2, #exclusive-content h2, #gametracker h2, #benefits h2 {font-size:4.5em;}
	#exclusive-content .image-placement img.img-responsive {width: 130%; max-width:130%; margin-top:-3em; margin-left:-5em; }
	
	#exclusive-content .text-placement {margin-top:5em;}
.breaker {clear:both; display:block; line-height:.005em;}
#unlimited-access .breaker {clear:none !important; display:inline !important;}	
	


}




/*============================================================
	ipad 3 4
==============================================================*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
	#gametracker .text-placement {
    margin-top: 0%;
}
#gametracker, #benefits {min-height: 60em;}

	
	}

/*============================================================
	Mobile (Landscape) Design for a width of 480px
==============================================================*/

@media only screen and (min-width: 480px) and (max-width: 767px) {
h1 {font-size: 4em !important; line-height:1em; text-align:center;}
h2{font-size: 3em; text-transform:uppercase; line-height:1em; text-align:center;}
h3 {font-size: 2.25em; line-height:1em; text-align:center;}
h4 {font-site: 2em; line-height:1em; text-align:center;}
h5 {font-size: 1.05em; line-height:1.2em; text-align: center;}
h6 {font-size: 1em; line-height:1em; text-align:center;}
p {font-size:1em; line-height:1em; text-align:center;}


#hero .btn-sp-custom {
    display: block;
    margin: 1em auto;
    width: 8em;
}

}

/*============================================================
	under 480px
==============================================================*/

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


.more a {font-size: .6em;}


.container {width: 100%;}
section {min-height: 650px;}
body > section, #unlimited-access {
    padding: 20px 0;
}

.breaker {clear:both; display:block; line-height:.005em;}


section {min-height: 600px;}


.navbar-nav li a, .btn.btn-free-trial {color:#ffffff !important; width: 100%; text-align:center !important; border:none !important; margin:0 0 0 0 !important;}

.navbar-nav li a.current, .navbar-nav li a:focus, .navbar-nav li a:hover {color: #ed2024 !important;}

.text-placement h2 {font-size:2.2em;}
.text-placement h5 {font-size:1em;}


.sp-list {font-size:.9em;}
ul.sp-list  {margin:2em 0 !important;}
ul.sp-list li {margin-left:4em; text-indent:-1.6em; width:75% !important; padding-left:.35em;}

.row {margin-bottom: 2em;}

#hero {padding: 0em 0 0 0;}
#hero h1 {font-family: knockout, Arial Black, Impact, arial, sans-serif; font-size: 2.5em !important; line-height: .75em !important; margin-top:0;}
#hero .left {margin-top: 5em;}
#hero .left h3 {font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:.9em; line-height:1.1em; color:#000000; margin:.75em 0; font-weight:bold;}
#hero .left h5 {font-size: .9em; color:#000000;}


#hero1A h3, #hero1B h3, #hero1C h3 {color:#ed2024; text-transform:uppercase; font-size:1.3em; }




#unlimited-access {background-position:center; padding-top: 1em; background-size:cover;}
#unlimited-access h2 {margin-top: 1em;}
#unlimited-access .container {width: 100%;}
#unlimited-access {min-height:0;}
#unlimited-access #mobile-comparison-key {margin-top: 0em;}




#gametracker {background-color:#0e1a2a; background-image:url(../img/tracker-mobile2.jpg); background-size:contain; background-repeat:no-repeat;  background-attachment:scroll; background-color:#0e1a2a;}



#benefits .text-placement {margin-top:0;}
#benefits {background-image:url(../img/VIP-mobile.jpg); background-position:bottom; background-attachment:scroll;}
#benefits h2 {width:80%; margin:auto;}


section .container {width: 95%;}
#hero .left h3 {font-size: .7em;}


.text-placement h2 {font-size:2.5em;}

h1 {font-size: 2.25em !important; line-height:1em; text-align:center;}
h2{font-size: 2.5em; text-transform:uppercase; line-height:1em; text-align:center;}
h3 {font-size: 1.25em; line-height:1em; text-align:center; text-transform:uppercase;}
h4 {font-site: 1.5em; line-height:1em;}
h5 {font-size: 1em; line-height:1.2em; text-align:center;}
h6 {font-size: .8em; line-height:1em;}
.btn {display:block; margin:auto; font-size:1.25em; width: 70%;}	
ul.sp-list {display:block; margin:auto; width: 100%;}
ul.sp-list li {font-size: .8em; line-height: 1.1em;}
	
	h1#logo img {display:block !important; margin-left: .25em; margin-top:.35em;}

/*start slider*/

#main-carousel {background:none;}

.main-logo {display:none;}


.carousel-control i {font-size: 2em;}




/*end slider*/
/*start comparison table */
/* Force table to not be like tables anymore */
			.table-hide {display:none;}
			.table-unhide {display:block;}
			table.sp-comparison, table.sp-comparison thead, table.sp-comparison tbody, table.sp-comparison th, table.sp-comparison td, table.sp-comparison tr { 
				display: block; 
			}
			
			/* Hide table headers (but not display: none;, for accessibility) */
			table.sp-comparison thead tr { 
				position: absolute;
				top: -9999px;
				left: -9999px;
			}
			
			table.sp-comparison tr { border: none; }
			
			table.sp-comparison td { 
				/* Behave  like a "row" */
				border: none;
				border-bottom: none; 
				position: relative;
				padding-left: 50%; 
				text-align:right;
				padding-bottom: 0px;
				padding-top:0px;
			}
			
			table.sp-comparison td.sp-benefit {padding-left:0; font-weight: 900; text-align:center; color:#ffffff; background-color:#000000; margin:auto;}
			table.sp-comparison 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
			*/
			table.sp-comparison td:nth-of-type(1):before { content: ""; }
			table.sp-comparison td:nth-of-type(2):before { content: "Visitor"; font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;text-transform:capitalize; font-size:.9em; }
			table.sp-comparison td:nth-of-type(3):before { content: "Registered Reader"; font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:capitalize; font-size:.9em; }
			table.sp-comparison td:nth-of-type(4):before { content: "SportsPlus Member"; font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; text-transform:capitalize; font-size:.9em; }
		

/*end comparison table*/	

/*start mobile comparison table*/
#mobile-comparison-table {border: solid 1px #ed2024 !important;}
#mobile-comparison-table i, #mobile-comparison-key i {color:#ed2024; font-size:.8em;}
#mobile-comparison-table td {text-align:center;}
#mobile-comparison-table tr {color: #ffffff;}
#mobile-comparison-table tr:nth-of-type(odd) { 
	text-align: center;
	background-color: rgba(255, 255, 255, .15);
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}
#mobile-comparison-table tr {height: 2.5em;}
#mobile-comparison-table td.mobile-comparison-head { text-align:right; font-family:knockout, Impact, "Arial Black", sans-serif; color:#ffffff; padding-right: .5em; font-size:.85em;}

#mobile-comparison-key {color:#ffffff !important; font-family:tahoma, Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:.85em !important; line-height:1.2em !important; text-align:left !important; margin-top: 2em;}
#mobile-comparison-key i {font-size: 1.5em !important;}
#mobile-comparison-key td {padding-bottom: .7em; font-size:.85em; padding-right: 1.5em;}

/*end mobile comparison table*/	
footer .container {width: 100%;}
footer {font-size:.5em;}
	
	
	
}