/*
—————————————————————————
Global
—————————————————————————
*/
body {
	min-width:320px;
}
h2 {
	font-size:2em;
}
#drivers h2 {
	font-size:22px;
}
.hide-mobile {
	display:none;
}
.filter select {
	width:200px;
}

/*
—————————————————————————
Navigation
—————————————————————————
*/
#header {
	height:100px;
}
#logo {
	top:22px;
}
#nav.hidden {
	display:none;
}
#hamburger {
	display:block;
	position:absolute;
	top:15px; right:15px;
	cursor:pointer;
}
#nav {
	position:fixed;
	top:0; left:0;
	width:100%;
	height:100%;
	background:#000;
	margin:0;
	z-index:1;
	overflow-y:scroll;
	-webkit-overflow-scrolling:touch;
}
#nav li, #nav li.top {
	display:block;
	float:none;
	margin:0;
}
#nav li.top {
	margin-bottom:16px;
}
#nav li ul {
	display:none !important;
}
#nav #close {
	display:block;
	height:47px;
	padding:10px 10px 0 0;
}
#nav #close img {
	float:right;
	width:23px;
	height:23px;
	cursor:pointer;
	padding:12px;
}
#nav li a,
#nav li:hover a,
#nav li a:hover,
#nav li.active a {
	float:none;
	display:block;
	text-align:center;
	text-transform:uppercase;
	font-size:16px;
	line-height:22px;
	height:auto;
	color:#fff;
}
#nav a:after {
	content:"";
	padding:0;
}
#nav li ul a,
#nav li:hover ul a,
#nav li.active ul a {
	text-transform:none;
	color:#fff;
	background:none;
	line-height:1;
}
#nav #close img.spin {
	-webkit-animation-name:spin;
	-webkit-animation-duration:800ms;
}
@-webkit-keyframes spin {
	from	{-webkit-transform:rotate(-90deg)}
	to		{-webkit-transform:rotate(0deg)}
}

@media only screen and (max-width: 650px) {
	#crest {
		width:150px;
	}
	#crest img {
		width:150px;
		height:180px;
	}
	#crest a {
		padding:3px;
	}
	#drivers li {
		padding-right:10px;
	}
	#drivers h2 {
		font-size:18px;
		font-weight:bold;
	}
	#drivers a {
		width:110px;
	}
}

/*
—————————————————————————
Schools
—————————————————————————
*/
#schools li {
	margin-bottom:30px;
}
#schools img {
	width:72px;
	height:90px;
}
#schools a {
	padding-left:90px;
	min-height:90px;
}
#tabs li {
	margin-bottom:6px;
}
#tabs a {
	border-radius:4px;
}
#tab-content-wrapper {
	border-radius:4px;
	padding:15px;
}
.person img {
	width:130px;
	height:173px;
}
.person {
	padding:0 155px 15px 0;
	margin-bottom:15px;
}
.has-photo {
	min-height:173px;
}


/*
—————————————————————————
Draw & Results
—————————————————————————
*/
.filter {
	float:none;
}
#years {
	float:none;
}
#years li {
	margin:0 8px 0 0;
}

@media only screen and (max-width: 530px) {
	#carousel br {
		display:none;
	}
	#carousel li {
		padding:30px 80px 0 80px;
	}
	#carousel h2 {
		font-size:32px;
		padding:10px 12px;
	}
	#carousel h3 {
		font-size:18px;
		padding:10px 12px;
	}
	#drivers {
		width:auto;
		margin:0;
	}
	#drivers li {
		float:none;
		width:auto;
		margin:0 0 15px 0;
		padding:0 0 20px 0;
		border-bottom:1px solid #ddd;
	}
	#drivers li:last-child {
		margin:0 0 6px 0;
		padding:0;
		border:0;
	}
	#drivers p {
		min-height:0;
	}
}


@media only screen and (max-width: 480px) {
	#header {
		height:80px;
	}
	#logo {
		width:130px;
		height:50px;
		background-size:130px 50px;
		top:16px; left:20px;
	}
	#content, #footer {
		padding:20px;
	}
	#carousel, .banner {
		margin:-20px -20px 20px -20px;
	}
	.banner {
		height:160px;
		padding:20px 20px 0 20px;
	}
	.banner h1 {
		font-size:30px;
		padding:10px 12px;
	}
	.banner h1.single {
		margin-top:15px;
	}
	.banner h2 {
		font-size:22px;
		padding:6px 12px;
	}
	.sponsor img {
		max-width:100%;
	}
	.person img {
		display:none;
	}
	.person {
		padding-right:0;
	}
	.has-photo {
		min-height:0;
	}
	#carousel, #carousel li {
		height:240px;
	}
	#carousel li {
		padding:30px 58px 0 58px;
	}
	#carousel .arrow {
		width:28px;
	}
	#carousel .left {
		left:10px;
	}
	#carousel .right {
		right:10px;
	}
}