/* Defaults
---------------------------------------------------*/

html {
    -webkit-text-size-adjust: none; /* Prevent font scaling in landscape */
}

#navbutton,
#mobilenav,
.mobile,
#logo.mobile {
	display:none;
}

/*  1350px
---------------------------------------------------*/

@media (max-width: 1350px) {
	#intro .container {
		width:100%;
		margin:170px 0 0 0;
	}

	#intro .button {
		position:absolute;
		top:65px;
		right:80px;
	}

	#intro li .content {
		padding-bottom:50px;
	}

	.intro .flex-control-nav {
		bottom:-60px;
	}

	#intro .slide2 .content {
		padding-top:40px;
	}
}


/*  1200px
---------------------------------------------------*/

@media (max-width: 1200px) {
	.container {
		width:100%;
		padding:120px 50px;
		margin:0;
	}

	.container2 {
		width:100%;
		padding:120px 50px;
		margin:0;
	}

	#logo {
		left:40px;
	}

	#nav {
		right:40px;
	}

	nav ul li {
		margin:0 12px;
	}

	#becomeasponsorbutton {
		margin-left:18px;
	}

	header {
		width:100%;
		left:0;
		margin-left:0;
	}

	header h1 {
		font:400 140px/140px "Tide Sans Cond 600 Italic", sans-serif;
		transform: translateX(30px);
	}

	header h2 {
    	font:400 180px/180px "Tide Sans Cond 600 Italic", sans-serif;
    	top:110px;
	}

	#intro h2 {
		font:400 65px/65px "Tide Sans Cond 600 Italic", sans-serif;
	}

	#intro .button {
		right:40px;
	}

	.faderight,
	.fadeleft {
		display:none;
	}

	#intro li .content {
		padding:0 40px 60px 40px;
	}

	.intro .flex-control-nav {
		bottom:-80px;
	}

	#sponsors .column1 {
		display:none;
	}

	#sponsors .column2 {
		width:100%;
		float:none;
		border:0;
		padding:0;
	}

	footer .container {
		width:100%;
		padding:120px 50px 60px 50px;
		margin:0;
	}
}


/*  1050px
---------------------------------------------------*/

@media (max-width: 1050px) {
	#nav {
		display:none;
	}

	header {
		height:490px;
		top:160px;
	}

	header img {
		width:980px;
	}

	header h1 {
		font:400 120px/120px "Tide Sans Cond 600 Italic", sans-serif;
	}

	header h2 {
		font:400 160px/160px "Tide Sans Cond 600 Italic", sans-serif;
		top:95px;
		transform:translateX(-42px);
	}

	#navbutton {
		display:block;
	}

	#navbackground {
		width:350px;
		height:100%;
		background:#762123;
		display:none;
		position:fixed;
		top:0;
		left:-350px;
		z-index:3;
		-webkit-box-shadow: 10px 0px 15px -5px rgba(0,0,0,0.5);
		-moz-box-shadow: 10px 0px 15px -5px rgba(0,0,0,0.5);
		box-shadow: 10px 0px 15px -5px rgba(0,0,0,0.5);
	}

	#mobilenav {
		width:350px;
		background:#762123;
		position:fixed;
		top:0;
		left:-350px;
		z-index:3;
	}

	#mobilenav ul {
		padding:50px 30px;
	}

	#mobilenav ul li {
		display:block;
		margin:0;
	}

	#mobilenav ul li a {
		font:400 28px/34px "Tide Sans Cond 600 Italic", sans-serif;
		color:#fff;
		padding:10px 0 !important;
	}

	#becomeasponsorbutton {
		margin:0;
	}

	#becomeasponsorbutton a {
		padding:0;
	}

	#intro {
		width: 100%;
		height: 520px;
		background:url(../images/backgroundintro.svg) no-repeat top center / 1793px 450px;
		top: 519px;
	}

	#intro h2 {
		font:400 55px/55px "Tide Sans Cond 600 Italic", sans-serif;
	}

	#intro h3 {
		font:400 22px/32px "Titillium Web SemiBold", sans-serif;
	}

	#intro .container {
		margin:155px auto 0 auto;
	}

	#intro .button {
		font:400 24px/26px "Tide Sans Cond 600 Italic", sans-serif;
		padding:20px 40px;
		margin:0;
	}

	#intro .button {
		top:70px;
	}

	#intro .slide2 .content {
		padding-top:26px;
	}

	.intro .flex-control-nav {
		display:none;
	}

	#spacer {
		height:900px;
	}
	
	#seetheteam .bigbutton,
	#cars .bigbutton {
		bottom:0;
	}

	.flex-control-nav {
		right:40px;
	}

	.bigbutton {
		font:400 24px/26px "Tide Sans Cond 600 Italic", sans-serif;
		padding:20px 40px;
	}

	#teampage #team.container2 {
		padding-top:160px;
		text-align:center;
	}

	#teampage #team.container2 .clearer {
		display:none;
	}

	#teampage #team.container2 .clearer.mobile {
		display:block;
	}

	#teampage #team h4 br {
		display:none;
	}

	#team .column1 {
		width:50%;
		float:left;
		display:inline-block;
	}

	#team .column2 {
		width:50%;
		float:left;
		display:inline-block;
	}

	#team .column3 {
		width:50%;
		float:left;
		display:inline-block;
	}

	#carspage #cars.container {
		padding-top:160px;
		padding-bottom:60px;
	}

	#carspage #cars h3 {
		margin:0 0 20px 0;
	}

	#carspage #cars h4 br {
		display:none;
	}

	#carspage img {
		margin:0 0 20px 0;
	}

	#cars .column1 {
		margin:0 0 0 0;
	}

	#cars .column2 {
		margin:0 0 0 0;
	}

	hr {
		margin:0 0 40px 0;
	}
}


/*  920px
---------------------------------------------------*/

@media (max-width: 920px) {
	header {
		height:430px;
	}

	header h1 {
		font:400 100px/100px "Tide Sans Cond 600 Italic", sans-serif;
	}

	header h2 {
		font:400 140px/140px "Tide Sans Cond 600 Italic", sans-serif;
		top:80px;
		transform:translateX(-103px);
	}

	header img {
		width:870px;
	}

	#intro {
		height:420px;
		top:470px;
		background: url(../images/backgroundintro.svg) no-repeat top center / 1594px 400px;
	}

	#intro .container {
		margin:135px 0 0 0;
	}

	#intro li .content {
		text-align:center;
		padding:25px 40px 0 40px !important;
	}

	#intro .slide2 .content {
		padding-top:0;
	}

	#intro .button {
		background:#2d2d2d;
		color:#fff;
		display:inline-block;
		position:relative;
		bottom:auto;
		left:auto;
		right:auto;
		top:auto;
		margin:0;
	}

	#intro h2 {
		display:block;
		padding:0;
		margin:0 0 45px 0;
	}

	#intro h3 br {
		display:none;
	}
	
	#spacer {
		height:845px;
	}

	#intro .slide2 .button {
		margin-left:0;
	}

	#sponsors img {
		width:100%;
	}
}


/*  800px
---------------------------------------------------*/

@media (max-width: 800px) {
	.container {
		padding:80px 30px 100px 30px;
	}

	.container2 {
		padding:80px 30px 100px 30px;
	}

	#logo {
		left:20px;
	}

	#navbutton {
		right:30px;
	}

	header {
		height:380px;
		text-align:center;
		overflow-x:hidden;
	}

	header h1 {
		width:100%;
		font:400 70px/70px "Tide Sans Cond 600 Italic", sans-serif;
		transform: translateX(0px);
	}

	header h1 .mobile {
		display:inline-block;
	}

	header h2 {
		display:none;
	}

	header img {
		width:800px;
		left:50%;
		margin-left:-455px;
	}

	#intro {
		height:380px;
		top:420px;
	}

	#intro li .content {
		padding:25px 30px 0 30px !important;
	}

	#intro h3 {
		font:400 20px/30px "Titillium Web SemiBold", sans-serif;
	}

	#spacer {
		height:795px;
	}

	.flex-control-nav {
		display:none;
	}

	footer {
		margin-top:-60px;
	}

	footer .container {
		padding-left:30px;
		padding-right:30px;
	}

	.popup {
		padding:50px 30px 50px 30px;
	}
}


/*  700px
---------------------------------------------------*/

@media (max-width: 700px) {
	h2 {
		font:400 60px/64px "Tide Sans Cond 600 Italic", sans-serif;
	}

	h4 {
		font:400 24px/32px "Titillium Web SemiBold", sans-serif;
	}

	#intro .slide1 .content {
		padding-top:0 !important;
	}

	header {
		height:350px;
	}

	header h1 {
		font:400 60px/60px "Tide Sans Cond 600 Italic", sans-serif;
	}

	header img {
		width:700px;
		margin-left:-395px;
	}

	#intro {
		top:400px;
	}

	#intro h2 {
		font:400 50px/50px "Tide Sans Cond 600 Italic", sans-serif;
	}

	#citystatezip .column1 {
		width:100%;
		float:none;
		padding-right:0;
	}

	#citystatezip .column2 {
		width:50%;
		padding-left:0;
	}

	#citystatezip .column3 {
		width:50%;
		padding-right:0;
	}

	#team .column1 {
		width:100%;
		float:none;
	}

	#team .column2 {
		width:100%;
		float:none;
	}

	#team .column3 {
		width:100%;
		float:none;
	}

	#teampage #team h4 {
		margin:0 0 60px 0;
	}

	#carspage #cars h4 {
		margin:0 0 60px 0;
	}
}


/*  600px
---------------------------------------------------*/

@media (max-width: 600px) {
	header h1 {
		display:none;
	}

	header {
		height:300px;
	}

	#intro {
		top:350px;
	}

	#spacer {
		height:720px;
	}

	#social {
		width:100%;
		text-align:left;
		position:relative;
		top:auto;
		right:auto;
	}

	footer p {
		margin:0 0 40px 0;
	}

	#facebook {
		margin-left:0 !important;
	}

	#cars .column1 {
		width:100%;
		float:none;
		padding:0;
	}

	#cars .column2 {
		width:100%;
		float:none;
		padding:0;
	}

	#cars .column1 p {
		margin:0 0 30px 0;
	}
}


/*  500px
---------------------------------------------------*/

@media (max-width: 500px) {
	h2 {
		font:400 55px/55px "Tide Sans Cond 600 Italic", sans-serif;
	}

	h3 {
    	font: 400 25px/35px "Tide Sans Cond 600 Italic", sans-serif;
	}

	h4 {
		font:400 22px/30px "Titillium Web SemiBold", sans-serif;
		margin:0 0 30px 0;
	}

	h5 {
		font:400 22px/30px "Titillium Web SemiBold", sans-serif;
	}

	p {
		font:400 18px/28px "Titillium Web Regular", sans-serif;
		margin:0 0 30px 0;
	}

	#navbutton {
		right:25px;
	}

	.container {
		padding:60px 25px 80px 25px;
	}

	.container2 {
		padding:60px 25px 80px 25px;
	}

	.button {
		font:400 18px/22px "Tide Sans Cond 600 Italic", sans-serif;
		padding:15px 28px;
	}

	.bigbutton {
		font:400 20px/22px "Tide Sans Cond 600 Italic", sans-serif;
		padding:15px 30px;
	}

	header {
		height:250px;
	}

	header img {
		width:600px;
		margin-left:-335px;
	}

	#logo {
		display:none;
	}

	#logo.mobile {
		display:block;
	}

	#intro {
		top:290px;
	}

	#intro .container {
		margin-top:145px;
	}

	#intro li .content {
		padding:25px 25px 0 25px !important;
	}

	#intro h2 {
		font:400 40px/40px "Tide Sans Cond 600 Italic", sans-serif;
	}

	#intro .button {
		font:400 22px/24px "Tide Sans Cond 600 Italic", sans-serif;
		padding:15px 35px;
	}

	#spacer {
		height:655px;
	}
	
	#seetheteam .bigbutton {
		margin-left:-105px;
	}

	#contact .column1, 
	#join .column1, 
	#becomeasponsor .column1 {
		width:100%;
		float:none;
		padding:0;
	}

	#contact .column2, 
	#join .column2, 
	#becomeasponsor .column2 {
		width:100%;
		float:none;
		padding:0;
	}

	input[type=text], input[type=email], input[type=phone], textarea {
		margin:0 0 20px 0;
	}

	input[type=submit] {
		margin:10px 0 0 0;
	}

	footer {
		margin-top:-80px;
	}

	footer .container {
		padding:120px 25px 40px 25px;
	}

	.popup {
		padding:50px 25px 50px 25px;
	}

	#citystatezip .column2 {
		width:100%;
		float:none;
		padding-right:0;
	}

	#citystatezip .column3 {
		width:100%;
		float:none;
		padding-left:0;
	}
}


/*  450px
---------------------------------------------------*/

@media (max-width: 450px) {
	#intro h2 {
		font:400 36px/36px "Tide Sans Cond 600 Italic", sans-serif;
	}

	#intro h3 {
		font: 400 18px/26px "Titillium Web SemiBold", sans-serif;
	}

	#navbackground {
		width:220px;
	}

	#mobilenav {
		width:220px;
	}

	#mobilenav ul {
		padding:40px 25px;
	}

	#mobilenav ul li a {
		font:400 22px/28px "Tide Sans Cond 600 Italic", sans-serif;
	}
}


/*  400px
---------------------------------------------------*/

@media (max-width: 400px) {
	header {
		height:205px;
	}

	header img {
		width:500px;
		margin-left:-285px;
	}

	#intro {
		background:url(../images/backgroundintro.svg) no-repeat top center / 1195px 300px;
		top:300px;
	}

	#intro .container {
		margin-top:85px;
	}

	#intro h2 {
		font:400 36px/36px "Tide Sans Cond 600 Italic", sans-serif;
	}

	#intro h3 {
		font: 400 18px/26px "Titillium Web SemiBold", sans-serif;
	}

	#spacer {
		height:600px;
	}
}


/*  370px
---------------------------------------------------*/

@media (max-width: 370px) {
	h4 {
		font:400 20px/28px "Titillium Web SemiBold", sans-serif;
	}

	p {
		font:400 17px/24px "Titillium Web Regular", sans-serif;
		margin:0 0 30px 0;
	}

	#intro h2 {
		font:400 28px/36px "Tide Sans Cond 600 Italic", sans-serif;
		display:inline-block;
		margin:0 0 25px 0;
	}

	#intro h3 {
		font: 400 18px/26px "Titillium Web SemiBold", sans-serif;
		display:inline-block;
		margin:0 0 5px 0;
	}

	#intro .slide2 .content {
		padding-top:10px !important;
	}

	#intro .slide2 .content br {
		display:block;
	}

	#seetheteam .bigbutton, #cars .bigbutton {
		bottom:-20px;
	}

	#sponsors.container2,
	#contact.container {
		padding-top:80px
	}

	footer p {
		font:400 16px/24px "Titillium Web Regular", sans-serif;
	}

	#teampage #team h4 {
		margin:0 0 40px 0;
	}

	#team img {
		width:100%;
	}

	#team p {
		margin:0;
	}

	#carspage #cars h4 {
		margin:0 0 40px 0;
	}
}


/*  950px height
---------------------------------------------------

@media (max-height: 890px) {
	#whyenpower footer {
		position:absolute;
		top:850px;
		bottom:auto;
	}
}

@media (max-height: 950px) {
	#whyenpower footer {
		position:absolute;
		top:850px;
		bottom:auto;
	}
}

@media (max-height: 950px) {
	#benefitsofsolar footer {
		position:absolute;
		top:850px;
		bottom:auto;
	}
}*/