@charset "UTF-8";
/* CSS Document */
	
/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
@media only screen and (min-width : 1201px) {
body {font-size: 16px;}
.navbar-nav > li > a {font-size: 1.5em;}



}

@media only screen and (max-width : 1200px) {
body {font-size:13px;}
.navbar-nav > li > a {font-size:1.6em;}




}

@media only screen and (max-width : 1100px) {
.navbar-nav > li > a {
    font-size: 1em;
    margin: 0;
}
h1#logo img {margin-top:.4em;}

}



@media only screen and (max-width : 979px) {
body {font-size:11px;}
h1#logo img {max-height: 40px;}

.sp-list li::before {
    	height: 20px;
    	width: 20px;
		}
.right-cell img.img-responsive {max-width:170%; margin-top:0; margin-left:-6em;}


}

/* Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
		
		h1#logo {font-size:0; }
		.btn.btn-free-trial.special {margin-top:.7em;}
		h2 {font-size:6.5em;}
		#hero .container, #unlimited-access .container, #exclusive-content .container, #gametracker .container, #benefits .container {width: 90%;}
		#hero .container {padding: 8em 0 12em 0;}
		#hero {background-position: center 1%;}
		#hero .left-cell h1 {font-size:6.5em;}
		#hero .left-cell p {font-size: 1.5em; width: 80%;}
		#unlimited-access {background-attachment:scroll; background-position:50% center;}
		#contest-box .btn { width: 50%;}
			.videoWrapper iframe {
			top: 11%;
			left: 18%;
			right:18%;
			width: 53%;
			height:95%;
		}
		#exlusive-content .right-cell img.img-responsive {margin-left: -4em; margin-top: -3em; max-width: 150%;}
		#gametracker .right-cell img.img-responsive {margin-left: 1em; margin-top: -1em; max-width: 150%; overflow:hidden !important;}
		#benefits .right-cell img.img-responsive {margin-top: 0; max-width: 170%; margin-top: -2em; margin-left: -5em;}
		
		.modal-content h5 {font-size:1em; text-align:center;}
		.modal-lg {padding-top:12%;}
		
				.sp-list li {text-indent:-2.0em;}

}

@media only screen and (max-width : 768px) {
		body {	font-size:14px;}
		#unlimited-access {background-attachment:scroll; background-position:100% center;}
		.breaker {display:block; clear:both;line-height:0;}

		#unlimited-access h2, #exlusive-content h2, #gametracker h2, #benefits h2 {font-size:6.5em; text-align:center;}
		#unlimited-access, #exlusive-content, #gametracker, #benefits {padding:2em 0;}
		#hero {background-position: center 50%;}
		#hero h1, #hero h2 {font-size: 4.4em; text-align:center;}
		#hero .container {width: 70%; padding: 10em 0 25em 0;}
		#hero .left-cell h1 {font-size:6em;}
		#hero .left-cell p {text-align:center; width:80%; margin:1em auto;}
		
		.sp-list li {text-indent:-2.4em;}
		h1#logo img {max-height: 35px; margin-left: .3em; margin-top: .3em;}
		h5 {font-size: 1.8em; text-align: center;}
		.navbar-brand {padding:0;}
		
		
		.navbar-toggle {
    	color: #ffffff;
    	padding: 4px 10px;
		}
		.navbar-nav > li > a {text-align:center;}
		.btn.btn-free-trial.special {width: 100%; text-align:center; font-size:1.1em; margin-top:.7em;}
		.btn.btn-free-trial.special:hover {color:#ed2024;}
		
		/*Button*/
		.btn {
			display: block;
			float: none;
			font-size: 2em;
			margin: 1.2em auto;
			padding: 0.4em 1em;
			width: 70%;
		}
		#contest-box .btn {font-size:1.5em;}	
		
		.more {padding:1em 0;}
		.more a {font-size:1.2em; line-height:.8em;}
		
		.sp-list li {
			margin: .75em 0 .75em 2em;
			font-size: 1.5em;
			width: 90%;}
			
		.sp-list li::before {
			height: 25px;
			width: 25px;
			margin-right: 1.3em;}
		.contest-rules {font-size:1.25em;}
		#exlusive-content .container, #gametracker .container, #benefits .container {width: 80%;}
		
		
		#exlusive-content .right-cell img.img-responsive {max-width: 120%; margin-left:-5em;}
		#gametracker .right-cell img.img-responsive {max-width: 115%; margin-left:-3em;}
		#benefits .right-cell img.img-responsive {max-width: 120%; margin-left: -5em;}
		
		.videoWrapper iframe {
			top: 30%;
			left: 8%;
			right:8%;
			width: 85%;
			height:150%;
		}
		.modal-content img.img-responsive {}
		.modal-content h3 {font-size: 2.2em; margin-top: .5em; line-height:1em !important;}
		.modal-content .order-box h4 {font-size:1.2em;}
		.modal-content h5 {color: #000000; font-size: 1.2em; margin-bottom: 0.2em; margin-top: 0.2em; text-transform: uppercase;}
		.modal-content .order-box {background-color:none; border:none; padding:0;}
		.modal-content p {font-size:.9em; margin: 1em auto;}
		.modal-content img.img-responsive {max-width:70%;}
		.modal-lg {width: 95%; padding-top:12%; }
		
}

@media only screen and (max-width : 766px) and (min-width: 481px) {
	.right-cell img.img-responsive {max-width:100%; margin-top:0em; margin-left:0;}
		
		.modal-content img.img-responsive {max-width:50%;}
		.modal-content h3 {font-size: 2.2em; margin-top: .5em; line-height:1em !important;}
		.modal-content .order-box h4 {font-size:1.2em;}
		.modal-content h5 {color: #000000; font-size: 1.2em; margin-bottom: 0.2em; margin-top: 0.2em; text-transform: uppercase;}
		.modal-content .order-box {background-color:none; border:none; padding:0;}
		.modal-content p {font-size:.9em; margin: 1em auto;}
		.modal-content img.img-responsive {max-width:70%;}
		.modal-lg {width: 95%;}
	
}


@media only screen and (max-width : 480px) {
		body {font-size:12px;}
		.container {margin-left:0; margin-right:0; width: 90% !important; margin:auto !important;}
		#unlimited-access {background-attachment:scroll; background-position:75% center;}

		#hero .container {padding:20em 0 !important; width: 100%;}
		#exlusive-content .container,
		#unlimited-access .container,
		#gametracker .container,
		#benefits .container {width:100%; }
		.navbar {min-height:53px;}
		.navbar-nav {margin:0;}
		.navbar-toggle {
    	color: #ffffff;
    	padding: 4px 10px;
		}
		.btn.btn-free-trial {
			color:#ffffff; 
    		margin: 1.2em auto;
 			border:none !important;
		}
		
		.btn.btn-free-trial.special {border:none;}
		.btn.btn-free-trial {}

		
		.modal-dialog {margin: 20px 35px;}
		#exlusive-content .right-cell img.img-responsive {margin-top: .025em;}
		h1#logo  {font-size:3.5em; line-height:1em; }
		h1#logo img {
    	margin-top: -3px;
    	max-height:30px;
		}		
		.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    	background-color:rgba(26,26,26,0.90);
		padding-bottom:1.5em;
		margin: 0 1.65em 0 0;
		}
		.left-cell {padding: 0;}
		section#unlimited-access .container {padding: 1em 0;}	
		section .container {padding: 1em 0;}	
		#unlimited-access h2, #exlusive-content h2, #gametracker h2, #benefits h2 {font-size:4.4em; text-align:center;}
		h1, h2 {text-align:center;}
		h3, h4, h5, h6 {text-align:center;}
		#hero .container {padding-top: 8em !important; padding-right: 1em; padding-bottom:4em; padding-left: 1em;}
		#hero {background-position: center 10%;}
		#hero .left-cell h1 {font-size:3.7em; width: 80%; margin:0 auto .5em auto;}
		#hero .left-cell p { width: 70%; margin: 1em auto; color:#000000 !important;}
		p {font-size: 1.2em; text-align:center;}
		#hero h1, #hero h2, #hero p {text-align:center;}
		html,body, section {height:inherit; }
		section .container, #hero .container {width: 95%; padding: 5em 0;}	
		
		#exlusive-content .right-cell img.img-responsive {max-width: 100%; margin-left:0; }
		#gametracker .right-cell img.img-responsive {max-width: 100%; margin-left:0;}
		#benefits .right-cell img.img-responsive {max-width: 100%; margin-left:0;}
		
	
		
		.sp-list li {
			margin: .75em 0 .75em 0em;
			font-size: 1em;
			width: 100%;}
			
		.sp-list li::before {
			height: 15px;
			width: 15px;
			margin-right: 1.3em;}
		.sp-benefit {
			font-size: 0.9em;
			line-height: 1.15em;
			padding:10px;}
		.sp-plus img {width: 20px;}
		#unlimited-access .row {padding:0;}
		.btn {margin:.75em auto;}
		/*SCROLL DOWN MORE*/
		.more {width:100%; text-align:center;bottom: 0px; }
		.more a {font-size:.9em;   border-radius: 4px; width: 100%; text-align:center;}
		.more a:hover {color:#red;}
		.more a::after {line-height:.35em; }
		
		.right-cell img.img-responsive {
			margin-left: auto;
			margin-right: auto;
			margin-top: 0;
			max-width: 100%;
		}
		
		.videoWrapper iframe {
    		height: 138%;
    		left: 7%;
    		right: 7%;
    		top: 50%;
    		width: 85%;
}
		.modal-content {padding: 2em .5em;}
		.modal-content h3 {font-size: 2.2em; margin-top: .5em; line-height:1em !important;}
		.modal-content .order-box h4 {font-size:1.4em;}
		.modal-content h5 {color: #000000; font-size: 1.2em; margin-bottom: 0.2em; margin-top: 0.2em; text-transform: uppercase;}
		.modal-content .order-box {background-color:none; border:none; padding:0;}
		.modal-content p {font-size:.9em; margin: 1em auto;}
		.modal-content img.img-responsive {max-width:70%;}
		.modal-lg {width: 95%;}

		
}
@media only screen and (max-width : 320px) {
	#hero {background-position: center -10%;}
	#hero .container {padding-top: 8em !important; padding-right: 1em; padding-bottom:4em; padding-left: 1em;}

	#hero .left-cell h1 {font-size:3em; margin:auto;}
	#unlimited-access h2, #exlusive-content h2, #gametracker h2, #benefits h2 {font-size:4.4em; text-align:center;}
	#hero .left-cell p {font-size:1em; width: 70%; margin:1em auto;}
}