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

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

#navbutton,
#mobilenav,
.mobilephoto,
.mobilebutton {
	display:none;
}


/*  1400px
---------------------------------------------------*/

@media (max-width: 1400px) {
	#wrapper {
		width:100%;
	}

	.container {
		width:100%;
	}

	header {
		width:100%;
		padding:110px 100px
	}

	header h1 {
		font:400 55px/60px "Aktiv Grotesk Bold Italic", sans-serif;
	}

	header h1 span {
		font:400 50px/60px "Aktiv Grotesk Light Italic", sans-serif;
	}

	header img {
		right:160px;
	}

	#sociallinks {
		right:30px;
	}

	#logo {
		left:30px;
	}

	#nav {
		right:30px;
	}

	#whatwedo .label {
		left:2px;
	}

	#whoweworkwith .label {
		right:-30px;
	}

	#aboutdrhawkins .label {
		left:-25px;
	}

	#getintouch .label {
		right:-5px;
	}
	
	#whatwedo .bignumber,
	#whoweworkwith .bignumber,
	#aboutdrhawkins .bignumber,
	#getintouch .bignumber {
		right:100px;
	}
	
	#getintouch.container {
		padding:100px 120px 100px 460px;
	}
}



/*  1300px
---------------------------------------------------*/

@media (max-width: 1300px) {
	header img {
		right:10%;
	}
}


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

@media (max-width: 1200px) {
	#intro {
		background:url("../images/intro.svg") no-repeat 415px 50px;
	}

	#intro.container {
		padding:100px 120px 100px 300px;
	}

	#intro img {
		left:-300px;
	}

	#whatwedo.container {
		padding:150px 120px 200px 120px;
	}

	#whoweworkwith.container {
		padding:100px 120px 100px 300px;
	}

	#whoweworkwith img {
		left:-730px;
	}

	#aboutdrhawkins.container {
		padding:150px 120px 200px 120px;
	}

	#getintouch.container {
		padding:100px 120px 100px 300px;
	}

	#getintouch img {
		left:-800px;
	}

	footer {
		padding:150px 120px 200px 120px;
	}
}


/*  1100px
---------------------------------------------------*/

@media (max-width: 1100px) {
	body {
		background:#000 url("../images/backgroundheader.jpg") no-repeat top right;
	}

	h2 {
		margin-bottom:20px;
	}

	header {
		padding:170px 100px 100px 100px;
		margin-bottom:180px;
	}
	
	header .content {
		background:rgba(0,0,0,0.5);
		padding:60px;
	}

	header h1 {
		margin-left:0;
	}

	header p {
		width:auto;
	}

	header img {
		width:450px;
		margin-left:-200px;
		top:-120px;
		left:50%;
		right:auto;
	}

	#sociallinks {
		display:none;
	}

	#nav {
		display:none;
	}

	#navbutton {
		display:block;
	}

	#mobilenav {
		width:100%;
		height:245px;
		display:block;
		background:#ef720a;
		padding:0;
		position:absolute;
		top:-245px;
		left:0;
	}

	#mobilenav li {
		width:100%;
		border-bottom:1px solid #000;
		padding:10px 20px;
		margin:0;
	}

	#mobilenav li:last-child {
		border:0;
	}

	nav ul li a span {
		color:#d8d6d6;
	}

	#intro {
		background:none;
		margin-bottom:0;
	}

	#intro.container {
		padding:100px 60px 100px 60px;
	}

	#intro h2 {
		margin-left:0;
	}

	#intro img {
		left:50%;
		top:-170px;
		margin-left:-320px;
	}

	#whatwedo.container {
		padding:150px 60px 100px 100px;
	}

	#whatwedo {
		position:relative;
		z-index:2;
		margin-bottom:0;
	}

	#whatwedo .label {
		left:-13px;
	}

	#whoweworkwith.container {
		padding:150px 60px 100px 100px;
	}

	#whoweworkwith .bignumber {
		top:52px;
	}

	#whoweworkwith h2 {
		margin-left:0;
	}

	#whoweworkwith img {
		left:50%;
		top:-120px;
		margin-left:-930px;
	}

	#whoweworkwith .label {
		top:238px;
		right:auto;
		left:-41px;
	}

	#aboutdrhawkins.container {
		padding:150px 60px 100px 100px;
	}

	#aboutdrhawkins .label {
		left:-40px;
	}

	#getintouch.container {
		padding:150px 60px 100px 100px;
	}

	#getintouch .label {
		top:215px;
		right:auto;
		left:-17px;
	}

	#getintouch h2 {
		margin-left:0;
	}

	#getintouch img {
		left:50%;
		top:-120px;
		margin-left:-1190px;
	}

	#whatwedo .bignumber, 
	#whoweworkwith .bignumber, 
	#aboutdrhawkins .bignumber, 
	#getintouch .bignumber {
		right:60px;
	}

	footer {
		padding:150px 120px 200px 120px;
	}
}


/*  1100px
---------------------------------------------------*/


@media (max-width: 1100px) {
	header {
		padding:170px 60px 100px 60px;
		margin-bottom:150px;
	}
	
	header .content {
		background:rgba(0,0,0,0.5);
		padding:60px;
	}
}


/*  900px
---------------------------------------------------*/

@media (max-width: 900px) {
	body {
    	background-size:1200px 917px;
	}

	.button,
	.readmore,
	.submit {
		margin-left:20px;
	}

	.label {
		text-align:left !important;
		transform: rotate(0deg) !important;
		position: relative !important;
		top:auto !important;
		left:auto !important;
		z-index: 2 !important;
		margin:0 0 40px 0;
	}

	header {
		padding:150px 0px 90px 0px;
		margin-bottom:0;
	}
	
	header .content {
		background:rgba(0,0,0,0.5);
		padding:40px;
	}

	header img {
		width:400px;
		margin-left:-170px;
	}

	#intro.container {
		padding:90px 40px 90px 40px;
	}

	#intro img {
		display:none;
	}

	#whatwedo.container {
		padding:90px 40px 90px 40px;
	}

	#whatwedo {
		position:relative;
		z-index:2;
		margin-bottom:0;
	}

	#whatwedo .label {
		left:-13px;
	}

	#whoweworkwith.container {
		padding:90px 40px 90px 40px;
	}

	#whoweworkwith .bignumber {
		top:52px;
	}

	#whoweworkwith h2 {
		margin-left:0;
	}
	
	#intro h2 br,
	#whoweworkwith h2 br,
	h3 br {
		display:none;
	}

	#whoweworkwith img {
		display:none;
	}

	#aboutdrhawkins.container {
		padding:90px 40px 90px 40px;
	}

	#aboutdrhawkins .label {
		left:-40px;
	}

	#getintouch.container {
		padding:90px 40px 90px 40px;
	}

	#getintouch .label {
		top:215px;
		right:auto;
		left:-17px;
	}

	#getintouch h2 {
		margin-left:0;
	}

	#getintouch img {
		display:none;
	}

	#whatwedo .bignumber, 
	#whoweworkwith .bignumber, 
	#aboutdrhawkins .bignumber, 
	#getintouch .bignumber {
		top:0;
		right:30px;
	}

	footer {
		padding:60px 40px 90px 40px;
	}
}



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

@media (max-width: 700px) {
	h2 {
		font:400 34px/44px "Aktiv Grotesk Bold Italic", sans-serif;
	}

	h3 {
		font:400 25px/35px "Aktiv Grotesk Bold Italic", sans-serif;
	}

	p {
		font:400 20px/30px "Aktiv Grotesk Light", sans-serif;
	}

	#logo {
		top:45px;
	}

	#navbutton {
		top:50px;
		right:30px;
	}

	header {
		padding-bottom:50px;
	}

	header .content {
		padding:40px 30px;
	}

	header img {
		width:350px;
		top:-70px;
	}

	header h1 {
		font:400 45px/50px "Aktiv Grotesk Bold Italic", sans-serif;
		margin-bottom:20px;
	}

	header h1 span {
		font:400 40px/50px "Aktiv Grotesk Light Italic", sans-serif;
	}

	header p {
		font:400 20px/30px "Aktiv Grotesk Light", sans-serif;
		margin:0 0 40px 0;
	}

	.button,
	.readmore,
	.submit {
		font:400 14px/16px "Aktiv Grotesk Bold Italic", sans-serif;
		padding:15px 30px 10px 30px;
	}

	.submit input {
		font:400 14px/16px "Aktiv Grotesk Bold Italic", sans-serif;
	}

	#intro.container,
	#whatwedo.container,
	#whoweworkwith.container,
	#aboutdrhawkins.container,
	#getintouch.container {
		padding:90px 30px 50px 30px;
	}

	#getintouch .column1,
	#getintouch .column2 {
		width:100%;
		float:none;
		padding:0;
	}

	#whoweworkwith p {
		margin-bottom:30px;
	}

	footer {
		padding:60px 30px 50px 30px;
	}
}


/*  550px
---------------------------------------------------*/

@media (max-width: 550px) {
	header h1 span {
		display:inline;
	}
}


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

@media (max-width: 400px) {
	h2 {
		font:400 28px/36px "Aktiv Grotesk Bold Italic", sans-serif;
	}

	h3 {
		font:400 22px/30px "Aktiv Grotesk Bold Italic", sans-serif;
	}

	p {
		font:400 19px/28px "Aktiv Grotesk Light", sans-serif;
	}

	#logo {
		width:185px;
		left:25px;
	}

	#navbutton {
		top:45px;
		right:25px;
	}

	.button, 
	.readmore,
	.submit {
		margin-left:10px;
	}

	header {
		padding-top:120px;
		padding-bottom:0px;
	}

	header .content {
		padding:35px 25px;
	}

	header img {
		width:325px;
	}

	header h1 {
		font:400 35px/40px "Aktiv Grotesk Bold Italic", sans-serif;
		margin-bottom:20px;
	}

	header h1 span {
		font:400 30px/40px "Aktiv Grotesk Light Italic", sans-serif;
	}

	header p {
		font:400 19px/28px "Aktiv Grotesk Light", sans-serif;
		margin:0 0 30px 0;
	}


	#intro.container,
	#whatwedo.container,
	#whoweworkwith.container,
	#aboutdrhawkins.container,
	#getintouch.container {
		padding:70px 25px 40px 25px;
	}

	#whatwedo .bignumber {
		width:353px;
		background-size:353px 270px;
		right:10px;
	}

	#whoweworkwith .bignumber {
		width:413px;
		background-size:413px 270px;
		right:10px;
	}

	#aboutdrhawkins .bignumber {
		width:415px;
		background-size:415px 270px;
		right:10px;
	}
	
	#getintouch .bignumber {
		width:428px;
		right:10px;
		background-size:428px 270px;
	}

	.checkbox {
		padding:2px 0 0 40px;
	}

	input[type=text],
	input[type=email],
	input[type=phone],
	textarea {
		font:400 18px/22px "Aktiv Grotesk Light Italic", sans-serif;
		padding:15px 20px 10px 20px;
		margin:0 0 20px 0;
	}

	footer {
		padding:50px 25px 40px 25px;
	}

	footer p {
		font:400 17px/27px "Aktiv Grotesk Light", sans-serif;
	}

	footer p.disclaimer {
		font:400 15px/22px "Aktiv Grotesk Light", sans-serif;
	}
}


/*  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;
	}
}*/