* {
	box-sizing: border-box;
}

html, body {
	margin: 0;
	padding: 0;
	background-color: #122232;
}

.pagewrap {
	width: 1450px;
	max-width: 100%;
	margin: 0 auto;
	font-family: Arial, sans-serif;
}

.header {
	width: 1450px;
}

.logo {
    background:url(images/blue.png) no-repeat;
    background-size: contain;
    vertical-align: top;
    display: inline-block;
    height: 152px;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    width: 16%;
    margin: 6px 0 0 0;
}

.logo:hover {
	cursor: pointer;
}

.centerTop {
	height: 158px;
	width: 62%;
	max-width: 100%;
	background: url(images/race.png) no-repeat;
	background-size: contain;
	display: inline-block;
	margin: 0 .5% 10 0
}

.rightTop {
	color: #a4a199;
	width: 20%;
	vertical-align: top;
	display: inline-block;
	margin: -12px 0 0 8px;
}

.rightTop div {
	/*background: url(images/JBblue.png) no-repeat;*/
	background-size: contain;
	vertical-align: top;
	display: inline-block;
	height: 40px;
	width: 42px;
	overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
	text-align: left;
	float: left;
	margin: 22px 4% 0 0;
}

rightTop p {
	display: inline-block;
	padding: 0;
	margin: 0 0 0 0;
}

.rightTop a:link {
	color: #ffffff;}
	
.rightTop a:visited {
	color: #ffffff;}
	
.rightTop a:hover {
	color: #ffcc33;}

.mainHead {
	color: #1682b2;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	margin: 30px auto 30px auto;
}

.bigHead {
	color: #1682b2;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 36px;
	font-weight: bold;
	text-align: center;
	margin: 30px auto 30px auto;
}

.centrdText {
	color: #a4a199;
	margin: 0 auto 30px auto;
	font-family: Arial, sans-serif;
	font-size: 14px;
	text-align: center;
	width: 80%;
}

.regText {
	color: #a4a199;
	margin: 12px 84px 0px 84px;
	font-family: Arial, sans-serif;
	font-size: 14px;
	text-align: left;
}

.footer {
	text-align: center;
	margin: 0 0 0 0;
}

.footer p {
	color: #a4a199;
	text-align: center;
}

.responsive-video {
	max-width: 100%;
	height: auto;
	margin: 40px 0px 0px 0px;
}

ul {
	margin: 0 0 30px 0;
	padding: 0;
}

li {
	display: inline-block;
	padding: 0;
	margin: 10px;
	list-style: none;
}

li a {
	margin: 10px 0 0 0;
	text-decoration: none;
	text-align: center;
	font: bold 18px Arial, sans-serif;

	padding: 8px 70px;	
	line-height: 1;
	color: #ffffff;
	
	border: none;
	background-color: #fff;
	background: -webkit-linear-gradient(#202f3e, #bbb); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#202f3e, #bbb); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#202f3e, #bbb); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#202f3e, #bbb); /* Standard syntax */
	
	-webkit-border-radius: 23px;
	-moz-border-radius: 23px;
	-o-border-radius: 23px;
	border-radius: 23px;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

li a:hover {
	color: #ffcc33;}

.mainPic {
	height: 698px;
	width: 1450px;
	margin: 24px 0 24px 0;
	background: url(images/legup.png) no-repeat;
	background-size: contain;
}

.mainPicBlank {
	height: 8px;
	width: 1450px;
	margin: 0 0 490px 0;
	background: url(images/spacer.png) no-repeat;
}

.primary {
	text-align: center;
	margin: 24px 4px 24px 4px;
}

.primary a {
	text-align: center;
	margin: 24px 4px 24px 4px;
}

.primary li {
	margin: 4px 4px 24px 4px;
}

.secondary {
	text-align: center;
	margin: 24px 0px 0px -4%;
}

.secondary a {
	margin: 24px 0px 0px 4%;
}

.coderpic {
	height: 300px;
	width: 400px;
	background: url(images/dogcoder.jpg) no-repeat;
	background-size: contain;
}

.whitebkgnd {
	height: 800px;
	width: 580px;
	background: url(images/bkgndwhite.png);
	background-repeat: no-repeat;
	background-size: contain;
}

/** Media Queries **/



@media all and (max-width: 1450px) {
	
	.pagewrap {
		width: 100%;
	}
	
	.header {
		width: 100%;
	}
	
	.logo {
    	width: 16%;
	}
  	
	.centerTop {
    	width: 58%;
	}
	
	.rightTop {
    	width: 22%;
	}
	
	.rightTop div {
		width: 18%;
		margin: 22px 1% 0 0;
	}
	
	nav {
		width: 100%;
	}
  	
	.mainPic {
    	width: 100%;
	}
	
	.mainPicBlank {
    	width: 100%;
    	margin: 0 0 440px 0;
	}
	
	.mainHead {
		width: 100%;
		margin: 0px auto 30px auto;
	}
	
	.bigHead {
		width: 100%;
		margin: 0px auto 30px auto;
	}
	
	.coderpic {
    	width: 100%;
	}
	
	.primary {
		margin: 24px 4px 24px 4px;
	}
	
	.regText {
		margin: 10px 84px 50px 84px;
	}
}

@media all and (max-width: 1250px) {
	
	.logo {
		width: 16%
	}
	
	.centerTop {
		width: 56%;
	}
	 
	.rightTop {
		width: 26%
	}
	
	.rightTop div {
		width: 14%;
		margin: 22px 3% 0 0;
	}
	
	rightTop p {
		width: 18%;
	}
	
	.centeredText {
		margin: 0 0 40px 0;
	}
	
	.mainPic {
    	width: 100%;
	}
	
	.mainPicBlank {
    	width: 100%;
    	margin: 0 0 480px 0;
	}
	
	.mainHead {
    	margin: -20px 0px 30px 0px;
	}
	
	.bigHead {
		margin: -20px 0px 30px 0px;
	}
	
	.primary {
		margin: 24px 4px 24px 4px;

	}
	
	.regText {
		margin: 10px 84px 50px 84px;
	}
	
}

@media all and (max-width: 1080px) {
	
	.logo {
		width: 20%
	}
	
	.centerTop {
		width: 44%;
		background: url(images/racead1.png) no-repeat;
		background-size: contain;
		display: inline-block;
		margin: 0 .5% 0 0
		
	}
	 
	.rightTop {
		width: 32%
		margin: -8px 5px 50px 23%;
	}
	
	.rightTop div {
		width: 16%;
		margin: 22px 10px 0 0;
	}
	
	rightTop p {
		width: 100%;
	}
	
	.mainHead {
    	margin: -20px 0px 30px 0px;
	}
	
	.bigHead {
		margin: -20px 0px 30px 0px;
	}
	
	.centeredText {
		margin: 0 0 40px 0;
		
	.mainPic {
		width: 100%;
		margin: 0px 0px -240px 0px;
	}
	
	.mainPicBlank {
		width: 100%;
		margin: 0px 0px 460px 0px;
	}
	
	.primary {
		margin: 24px 4px 24px 4px;

	}
	
	.regText {
		margin: 10px 84px 50px 84px;
	}
	
}

@media all and (max-width: 950px) {
	
	.logo {
		width: 29%
	}
	
	.centerTop {
		width: 70%;
		background: url(images/racead1.png) no-repeat;
		background-size: contain;
		display: inline-block;
		margin: 0 0 0 0

	}
	 
	.rightTop {
		width: 60%;
		margin: 0 19% 50px 19%;
	}
	
	.rightTop div {
		width: 18%;
		margin: 22px -10px 0px 0px;
	}
	
	rightTop p {
		width: 18%;
	}
	
	.mainHead {
    	margin: -20px 0px 30px 0px;
	}
	
	.bigHead {
		margin: -20px 0px 30px 0px;
	}
	
	.centeredText {
		margin: 0 0 40px 0;
		
	.mainPic {
		width: 100%;
		margin: 0px 0px -240px 0px;
	}
	
	.mainPicBlank {
		width: 100%;
		margin: 0px 0px 280px 0px;
	}
	
	.primary {
		margin: 24px 4px 24px 4px;

	}
	
	.regText {
		margin: 10px 10% 50px 10%;
	}
	
}

@media all and (max-width: 600px) {
	
	.logo {
		width: 58%
	}
	
	.header {
		margin: 0 0 0px 0;
	}
	
	.centerTop {
		width: 40%;
		background: url(images/racead2.png) no-repeat;
		background-size: contain;
		display: inline-block;
		margin: 0 0 0 0;
	}
	 
	.rightTop {
		width: 70%;
		margin: -40px 14% -20px 14%;
	}
	
	.rightTop div {
		width: 18%;
		margin: 22px 2% 0px 2%;
	}
	
	rightTop p {
		width: 18%;
	}
	
	.mainHead {
    	margin: 30px 0px 30px 0px;
	}
	
	.bigHead {
		margin: 30px 0px 30px 0px;
	}
	
	.centeredText {
		margin: 0 auto 40px auto;
		
	.mainPic {
		width: 100%;
		margin: 0px 0px -380px 0px;
	}
	
	.mainPicBlank {
		width: 100%;
		margin: 0px 0px 190px 0px;
	}
	
	.primary {
		margin: -40px 4px 24px 4px;
	}
	
	.regText {
		margin: 0px 0px 0px 0px;
	}
	

}